@charset "UTF-8";
:root {
 --h3font:1200px;
 --footerColor:rgb(fff,fff,fff,0.5);
 --footerBGop:0.5;
 --fontH2:calc(1.8rem + ((1vw - 0.64rem) * 1.2));/* var(--fontH2) */
 --fontH3:calc(1.1rem + ((1vw - 0.64rem) * 1.2));/* var(--fontH3) */
}



img{ width:100%;}
html { font-size:62.5%;/*10px*/}
body { font-size:1.6rem; line-height: 2;
background-image:url(/special/18th-anniversary-project/_img/bodyBG.jpg);
background-repeat:repeat;
background-size:auto;
}

/*========================[ 定型  ]========================*/
/*-----  タイトル設定 -------*/
h1{ font-size: 36px; font-size: calc(2.4rem + ((1vw - 0.64rem) * 2));  /* 24px~36pxで可変*/ line-height: 1.5;}
h2{ font-size: 24px; font-size: calc(1.8rem + ((1vw - 0.64rem) * 1.2));/* 22px~24pxで可変*/ font-weight:bold; line-height: 1.5;}
h3{ font-size: 20px; font-size: calc(1.1rem + ((1vw - 0.64rem) * 1.2));/* 18px~20pxで可変*/ font-weight:bold; line-height: 1.5;}
/* 640px～1200px calc( 基準サイズ ((1vm -  [ビューポートの幅の最小値/100] ) * [100 * フォントサイズの差 / ビューポートの幅の差] ) ) */

@media (min-width: 75em) {/* 1200px以上でフォントサイズを固定*/
	h1{font-size: 3.6rem;/* 36px*/}
	h2{font-size: 2.4rem;/* 24px*/}
	h3{font-size: 2rem; /* 20px*/}
}
@media (max-width: 40em) {/* 640px以下 でフォントサイズを固定*/
	body { font-size:1.2rem;}
	h1{ font-size: 2.4rem;}
	h2{ font-size: 2rem;}
	h3{ font-size: 1.6rem;}
}
/*-----  ページトップ設定 -------*/
#page_top{ width:3em; height:3em; position:fixed; right:0; bottom:3em; background: rgba(0,10,27,1); opacity: 0.6; border:solid #fff 1px;}
#page_top a{ position:relative; display: block; width:40px; height:40px; text-decoration: none; }
#page_top a::after{ content: '▲'; font-size: 1.5em; font-weight: bold; color:#fff; position: absolute; top:0.25em; bottom:0; right:0; left:0.25em; margin: auto; text-align: center; }

/*-----  デコレーション設定 -------*/
.f-redBold{ color:red; font-weight:bold;}

/*====================================================================*/
/*--- トップイメージ ----*/
header{ width:100%; background: url(/special/18th-anniversary-project/_img/topBg.png) top center no-repeat; }
#headers{ max-width:1920px; background:url()  center top no-repeat; margin:0 auto;}
#hedderBox{max-width:1200px; height:auto; margin:0 auto; position:relative;}
#hedderBox:before{ content: ""; display: block; padding-top:85.16%;}
#hedderChar{ position:absolute; top:12%; left:0;}

#prf{ position:absolute; top:36%; left:0; padding:0 80.5% 0 2%;}
#move{ position:absolute; top:40%; left:0; padding:0 76% 0 2%;}


#topCatch{ position:absolute; top:0.5%; left:0; padding:0 23.04%;}
#centerRead{ position:absolute; top:53%; left:0; padding:0 27.58%;}
#bubbleMsg{ position:absolute; top:11%; left:0; padding:0 2% 0 85%;}
#hedderBox ul{ position:absolute; bottom:5%; left:0; width:100%; margin:0 auto; display: table;}
#hedderBox ul li{ display:table-cell; max-width:540px;}
#hedderBox ul li:first-child{ padding: 2% 1% 2% 2%;}
#hedderBox ul li:last-child{ padding: 2% 2% 2% 1%;}
#hedderBox ul li div{ padding:2.5%; background:rgb(69,54,0); background: linear-gradient(90deg, rgba(69,54,0,1) 0%, rgba(244,253,29,1) 50%, rgba(69,54,0,1) 100%); overflow: hidden;}
#hedderBox ul li div a{ text-decoration:none;}
#hedderBox ul li div a img{ transition: .3s ease-in-out; }
#hedderBox ul li div a img:hover{ transform: scale(1.1); }
#hedderBox ul li div .days{ background:rgb(255,255,255,0.3); text-align:center; font-size:var(--fontH2); font-weight:bold; color:#000;}
@media (max-width: 75em) {/* 1200px以下で背景を変更*/
	header{ background: url(/special/18th-anniversary-project/_img/topBg1200.png) top center no-repeat; background-size:contain;}
}
/*====================================================================*/
main{ max-width:1200px; margin:0 auto;}
.banners h2{ max-width:1035px; margin:0 auto;}
.banners ul::after{ content: ""; display: block; clear: both; padding-bottom:3rem;}
.banners ul li{ width:calc(100%/3); padding:1rem; box-sizing: border-box; float:left;}
.banners ul li div{ background:#000; text-align:center; padding-bottom:0.5rem; color:#fff; border-radius:1rem;}
.banners ul li div a{ text-decoration:none; line-height: 1.2; color:#fff;}
.banners ul li div .waitBar{ background:#333; text-align:center; color:#fff; position:relative;}
.banners ul li div .waitBar:before{ content: ""; display: block;  padding-top:33%;}
.banners ul li div .waitBar span{ position:absolute; top:12%; bottom:0; left:0; right:0; font-size:var(--fontH3);}
/*------------------*/
.wallpaper{display:flex;background:#cc3;}
.wallpaper .smpl{ max-width:350px; padding:1rem;}
.wallpaper .dlBtn{ max-width:350px; padding:1rem; text-align:center;}
.wallpaper .dlBtn li{ line-height:100%; background:#fc9; padding:0.8rem; border:1px solid #fff;}
.wallpaper .dlBtn li a{ width:100%; display:block; text-decoration:none;}
.wallpaper .dlBtn li:hover{ background:#fff;/*opacity:0.8;*/ }
.wallpaper .coment{ padding:1rem; }
.wallpaper .coment h3{ background:#fff; padding:0.5rem;}
.wallpaper .coment .link a{ text-decoration:none; background:#f7f7f7; padding:0.5rem; margin-top:1rem;}



@media (min-width: 75em) {/* 1200px以上でフォントサイズを固定*/
	#hedderBox ul li div .days{ font-size:2.4rem;}
	.banners ul li div .waitBar span{ font-size:2rem;}
}

@media (max-width: 52em) {
	.banners ul li{ width:calc(100%/2);}
}


@media (max-width: 26em) {
	.banners ul li{ width:calc(100%);}
}