@charset "utf-8";
/* ==================================================================
CSS information
style info : INDEX
================================================================== */


/* --------------------------------------------------------
OVERWRITE
-------------------------------------------------------- */
#section-Area { }
@media screen and (min-width: 641px) {
	#section-Area { }
}

/* --------------------------------------------------------
COMMON
-------------------------------------------------------- */


/* --------------------------------------------------------
#section-Charalist
-------------------------------------------------------- */
#section-Charalist { border-bottom: 1px solid #9fa5af; padding-bottom: 3.125%;}
#section-Charalist .ttl { }
#section-Charalist a { display: block; text-decoration: none; position: relative;}
#section-Charalist .icon { position: absolute; top: 0; right: calc(9/130*100%); margin-top: calc(80/130*100%); width: calc(52/130*100%);}
#section-Charalist .name { position: absolute; bottom: 0; left: 0; display: block; width: 100%; text-align: center; font-size: 2.8125vw; color: #000; font-weight: bold; }
#section-Charalist .name.lesp { letter-spacing: -0.3vw;}
#section-Charalist img { width: 100%; height: auto;}
.swiper-container {
width: calc(610/640*100%);
margin: 0 auto;
overflow: visible!important;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;
-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
}

@media screen and (min-width: 641px) {
	#section-Charalist { display: none;}
}


/* --------------------------------------------------------
#section-Mainvisual
-------------------------------------------------------- */
#section-Mainvisual { margin-bottom: 1.5625%;}
#visual {}
#section-Mainvisual .bnr_camp { position: relative;}
#section-Mainvisual .bnr_camp a { display: block;}
#section-Mainvisual .bnr_camp .btn { display: none;}
@media screen and (min-width: 641px) {
	#section-Mainvisual .bnr_camp .btn { display: block; max-width: 250px; width: 24.4140625%; position: absolute; left: 36.328125%; bottom: 0; margin-bottom: 1.26953125%;}
}


/* --------------------------------------------------------
#section-Item
-------------------------------------------------------- */
#section-Item { width: 100%; margin: 0 auto 4.6875%;}

#item-list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: stretch; align-items: stretch;
align-content: space-between;}
#item-list li { width: 32.8125%; vertical-align: top; /*padding-bottom: 0.78125%;*/}/* flex-basis: 30%; */
#item-list li img { vertical-align: top; margin-bottom: 2.380952%;}
#item-list li a { display: block; position: relative;}
#item-list li a::after { content: ""; display: block; position: absolute; top: 0; right: 3%; margin-top: 3%; width: 15.5%; padding-top: 15.5%; background: url(../_img/icon/icon_window.png) no-repeat; background-size: contain;}
@media screen and (min-width: 641px) {
	#section-Item { margin: 0 auto 2.9296875%;}
	/*#item-list li a::after { right: 0%; margin-top: 0%; width: 100%; padding-top: 100%; opacity: 0.8; background: url(../_img/icon/icon_window.png) 98% 2% no-repeat; background-size: 10.5%;}*/
	#item-list li a::after { right: 0; margin-top: 0; width: 100%; height: 100%; padding-top: 0; background: url(../_img/icon/icon_window.png) 98% 2% no-repeat; background-size: 10.5%;}
	#item-list li a:hover::after { opacity: 0.4; background-color: #000; }
}

/* --------------------------------------------------------
#btn_share
-------------------------------------------------------- */
#btn_share { width: 88%; margin: 0 auto 4.6875%;}
#btn_share a { display: block; }
/*#btn_share a img { box-shadow: 3px 3px 5px rgba(0,0,0,0.1); border-radius: 100px;}*/
@media screen and (min-width: 641px) {
	#btn_share { max-width: 480px; width: 46.875%; margin: 0 auto 3.90625%;}
	#btn_share a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden;}
	#btn_share a:hover { -webkit-transform: scale(1.03); transform: scale(1.03);}
}

/* --------------------------------------------------------
#section-Campaign
-------------------------------------------------------- */
#section-Campaign { width: 100%; margin: 0 auto;}
#section-Campaign a { display: block;}
#section-Campaign .howto { width: 87.5%; margin: 3.125% auto 0;}
#section-Campaign .btn_terms { width: 87.5%; margin: 3.125% auto 0;}
#btn_follow { width: 87.5%; margin: 4.6875% auto 0;}

@media screen and (min-width: 641px) {
	#section-Campaign { width: 100%; margin: 0 auto 2.9296875%; position: relative;}
	#section-Campaign .howto { max-width: 452px; width: 44.140625%; margin: 1.9375% 0 0 3.90625%;}
	#section-Campaign .btn_terms { max-width: 452px; width: 44.140625%; margin: 0.9765625% 0 0 3.90625%;}
	#btn_follow { position: absolute; bottom: 0; right: 2.9296875%; margin-bottom: 8.9296875%; max-width: 452px; width: 44.140625%; }
	
	#section-Campaign .btn_terms a,
	#btn_follow a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden;}
	#section-Campaign .btn_terms a:hover,
	#btn_follow a:hover { -webkit-transform: scale(1.02); transform: scale(1.02);}
}






/* ----------------------------------------------------------------------------------------------------------------
#colorbox.forPIC
---------------------------------------------------------------------------------------------------------------- */
#colorbox.forPIC , .forPIC #cboxWrapper { overflow: visible!important; }
.forPIC #cboxContent { background: none; margin-top: 0;}
.forPIC #cboxLoadedContent { background: none; padding: 0; }
.forPIC #cboxLoadedContent { -webkit-box-sizing: border-box!important; -moz-box-sizing: border-box!important; -ms-box-sizing: border-box!important; box-sizing: border-box!important;}
.forPIC #cboxClose { display: none; width: 30px; height: 30px; background: url(../img/btn_close.png) center center no-repeat; background-size: cover; top: 0px; left: 0px;}
.forIMG #cboxClose:hover { background-position: center center;}