@charset "utf-8";

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);


html {font-size:62.5%;}
body {font-size:1.2rem;}


/* パーツ */
.smOnly {display:none;}
li {list-style:none;}


/* header */
h1{
	display:block;
	margin:0 !important;
	text-align:center;
}
h1 img{
	width:100%;
	max-width:1080px;
	height:auto;
}


/* topへ戻る */
footer #pageTop{
    width:40px;
    height:40px;
    padding:0;
    text-indent:-9999px;
    background-color:#0079c7;
    border-radius:100%;
    position:fixed;
    bottom:10px;
    right:10px;
    z-index:800;
    display:none;
    cursor:pointer;
}
footer #pageTop a {display:block;}
footer #pageTop::after{
    content:"\f106";
    font-family:"FontAwesome";
    font-size:40px;
    line-height:35px;
    text-indent:0;
    text-align:center;
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}


@media screen and (min-width: 641px) {
body{
	background:url(../images/bg_flag.png) center 150% no-repeat fixed, url(../images/bg_texture.png) center 30px no-repeat fixed, linear-gradient(to right, #c30d23 0%, #c30d23 50%, #171c61 50%, #171c61 100%);
	width:100%;
	margin-bottom:0;
}
#contentsBox{
	width:1080px;
	margin:0 auto;
	box-sizing:border-box;
}
header {margin-bottom:30px;}

.fairBox #detail, #pop{
	background:rgba(255, 255, 255, 0.65);
	width:1080px;
	margin:0 auto 36px;
	padding:20px;
	font-size:2rem;
	line-height:1.6;
	text-align:center;
	box-sizing:border-box;
}


/* Hタグ */
#pop > h2 {display:none;}
h3{
	background:#fff;
	width:100%;
	margin:40px 0 16px;
	padding:16px 14px 14px;
	font-size:2.4rem;
	text-align:center;
	line-height:1;
	border:3px solid #000;
	box-sizing:border-box;
}


/* POP */
#popNav{
	overflow:hidden;
	width:100%;
	margin:30px auto;
	padding-left:8px;
}
#popNav li{
	float:left;
	width:calc(100% / 6 - 10px);
	margin-right:10px;
	font-size:2rem;
	font-weight:bold;
	text-align:center;
}
#popNav li:last-child {margin-right:0;}
#popNav li a{
	background:transparent;
	display:block;
	padding:10px 0;
	color:#000;
	line-height:1;
	text-decoration:none;
	border:2px solid #000;
	transition:0.5s;
}
#popNav li a:hover{
	background:#b8b9b9;
	transition:0.3s;
}
.redSubtit, .whiteSubtit{
	background:#c30d23;
	margin-bottom:6px;
	font-size:1.7rem;
	font-weight:bold;
	color:#fff;
	letter-spacing:4px;
}
.whiteSubtit {background:#171c61;}
.popBox{
	display:flex;
	flex-wrap:wrap;
	overflow:hidden;
	width:100%;
	margin:0 auto 20px;
}
.popBox li{
	float:left;
	background:#fff;
	width:calc(100% / 4 - 18px);
	margin:0 3px 10px;
	padding:5px;
	border:1px solid #373737;
}
.popBox .shopImg{
	width:242px;
	height:242px;
}
.popBox .shopImg img{
	position:relative;
	top:50%;
	transform:translateY(-50%);
	max-width:242px;
	max-height:242px;
	vertical-align:bottom;
}
.popBox .shopName{
	background:#000;
	margin-bottom:6px;
	padding:6px 0;
	font-size:1.5rem;
	font-weight:bold;
	color:#fff;
	text-align:center;
	line-height:1;
}
.popBox .shopName span {font-size:1.1rem;}
.popBox .itemLink{
	/*height:33px;*/
	font-size:1.3rem;
	font-weight:bold;
}
.popBox .itemLink.noBtn{
	background:none;
	text-indent:-9999px;
}
.popBox .itemLink a{
	display:block;
	background:linear-gradient(to right, #c30d23 0%, #c30d23 10%, #000 10%, #000 90%, #171c61 90%, #171c61 100%);
	color:#fff;
	border:5px double #fff;
	text-decoration:none;
	letter-spacing:-1px;
}
/*.popBox .itemLink a::before{
	font-family:"Font Awesome 5 Free";
	content:"\f106";
	margin-right:8px;
}*/
.popBox .itemLink a:hover{
	background:linear-gradient(to right, #171c61 0%, #171c61 10%, #000 10%, #000 90%, #c30d23 90%, #c30d23 100%);
}
/*.popBox form {display:none;}*/
.popBox form > div {text-align:center;}
.popBox form > div input{
	width:100%;
	margin:0 auto;
}


}

	
@media screen and (max-width: 640px) {
	
section {box-sizing:border-box;}
main{
	background:url(../images/bg_flag.png) center 150% no-repeat fixed, url(../images/bg_texture.png) center 30px no-repeat fixed, linear-gradient(to right, #c30d23 0%, #c30d23 50%, #171c61 50%, #171c61 100%);
	margin-bottom:0;
}


#contentsBox{
	width:100%;
	margin:0;
	box-sizing:border-box;
}
header {margin-bottom:30px;}

.fairBox #detail, #pop{
	background:rgba(255, 255, 255, 0.65);
	width:100%;
	margin:0;
	padding:20px 20px 0;
	font-size:1.3rem;
	line-height:1.6;
	box-sizing:border-box;
}
#pop {padding-top:1px;}


/* Hタグ */
#pop > h2 {display:none;}
h3{
	background:#fff;
	width:100%;
	margin:40px 0 16px;
	padding:8px 14px 6px;
	font-size:1.8rem;
	text-align:center;
	line-height:1;
	border:3px solid #000;
	box-sizing:border-box;
}
h3:first-of-type {margin-top:10px;}


/* POP */
#popNav{
	overflow:hidden;
	width:100%;
	margin:12px auto;
}
#popNav li{
	float:left;
	width:46%;
	margin:0 2% 10px;
	font-size:1.4rem;
	font-weight:bold;
	text-align:center;
}
#popNav li:last-child {margin-right:0;}
#popNav li a{
	background:transparent;
	display:block;
	padding:10px 0;
	color:#000;
	line-height:1;
	text-decoration:none;
	border:2px solid #000;
	transition:0.5s;
}
.redSubtit, .whiteSubtit{
	background:#c30d23;
	margin-bottom:6px;
	font-size:1.4rem;
	font-weight:bold;
	color:#fff;
	text-align:center;
	letter-spacing:2px;
}
.whiteSubtit {background:#171c61;}
.popBox{
	overflow:hidden;
	width:100%;
	margin:0 auto;
}
.popBox li{
	display:flex;
	flex-wrap:wrap;
	float:left;
	background:#fff;
	width:48%;
	margin:0 1% 10px;
	padding:5px;
	border:1px solid #373737;
	box-sizing:border-box;
}
.popBox .shopImg{
	width:100%;
	height:200px;
}
.popBox .shopImg img{
	position:relative;
	top:50%;
	transform:translateY(-50%);
	max-height:100%;
	vertical-align:bottom;
}
.popBox .shopImg img{
	width:100%;
	vertical-align:bottom;
}
.popBox .shopName{
	background:#000;
	width:100%;
	margin-bottom:6px;
	padding:6px 0;
	font-size:1.2rem;
	font-weight:bold;
	color:#fff;
	text-align:center;
	line-height:1;
}
.popBox .shopName span {font-size:1.1rem;}

.popBox .itemLink{
	width:100%;
	/*height:33px;*/
	font-size:1.2rem;
	font-weight:bold;
	text-align:center;
	line-height:1.2;
}
.popBox .itemLink a{
	display:block;
	background:linear-gradient(to right, #c30d23 0%, #c30d23 10%, #000 10%, #000 90%, #171c61 90%, #171c61 100%);
	color:#fff;
	border:5px double #fff;
	text-decoration:none;
}
.popBox .itemLink.noBtn, .popBox .itemLink.noBtn a{
	background:none;
	text-indent:-9999px;
}

/*.popBox form {display:none;}*/
.popBox form > div {text-align:center;}
.popBox form > div input{
	width:100%;
	margin:0 auto;
}

}