@charset "utf-8";

@import "keyframes.css";
#container { background: #063c93;}
.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: url('../img/bg.jpg') repeat-y 50% 0 / 1280px auto;}
.wrap.pb { padding-bottom: 150px;}
.wrap:before,
.wrap:after { content: ''; display: block; width: 180px; height: 600px; position: absolute; top: 0; opacity: 0.6; z-index: 9;}
.wrap:before{ left: 0; background: url('../img/curtain-L.png') no-repeat 0 0 / 100% auto;}
.wrap:after { right: 0; background: url('../img/curtain-R.png') no-repeat 100% 0 / 100% auto;}
@media (max-width: 1001px) {
	.wrap:before,
	.wrap:after { width: 160px; height: 480px;}
}
@media (max-width: 801px) {
	.wrap:before,
	.wrap:after { width: 100px; height: 300px;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	.wrap.pb { padding-bottom: 80px;}
	.wrap:before,
	.wrap:after { width: 80px; height: 240px;}
}

#ft { background: url('../img/bg-ft-sv.jpg') no-repeat 50% 50% / cover;}
@media (max-width: 641px) {
	#ft { background: url('../img/bg-ft-sv-sp.jpg') no-repeat 50% 50% / 100% auto;}
}


.kv { position: relative; z-index: 10;}
.kv .inner-kv { padding: 220px 0 80px;}
.kv h2 { text-align: center;}
.kv h2 img{ width: 50%; max-width: 50%; max-width: 350px;}
.kv p { color: #fff; font-size: 20px; font-weight: 700; line-height: 1; text-align: center;}
@media (max-width: 641px) {
	.kv .inner-kv { padding: 200px 0 60px;}
}
@media (max-width: 481px) {
	.kv .inner-kv { padding: 120px 0 40px;}
}


.wh-kv { position: relative; z-index: 10; padding-top: 120px;}
.wh-kv:before { content: ''; display: block; width: 100%; height: 80px; background: url('../img/bg-top.png')}
.wh-kv .inner-kv { background: #fff; padding: 100px 0 120px;}
.wh-kv h2 { font-size: 40px; letter-spacing: 0.1rem; text-align: center;}
.wh-kv h2 br { display: none;}
@media (max-width: 481px) {
	.wh-kv { padding-top: 50px;}
	.wh-kv:before { height: 30px; background-size: auto 100%;}
	.wh-kv .inner-kv { padding: 40px 0;}
	.wh-kv h2 { font-size: 18px;}
	.wh-kv h2 br { display: block;}
}


.tit { color: #fff; text-align: center;}
.tit h2 {}
.tit h2 img { width: 60%; max-width: 340px;}
.tit p { font-size: 14px; letter-spacing: 0.2rem; text-shadow: 0 0 4px #0e275d, 0 0 6px #0e275d, 0 0 8px #0e275d;}
@media (max-width: 481px) {
	.tit p span{ display: block;}
}


.sct .inner-sct { width: 92%; max-width: 1200px; margin: 0 auto;}


/*		SHOP
-------------------------------------------------- */
.nav-store { position: relative; z-index: 10; margin-bottom: 100px;}
.nav-store ul { width: 100%; max-width: 760px; margin: 0 auto; font-size: 0; text-align: center;}
.nav-store ul li { display: inline-block; width: 50%; padding: 0 15px;}
.nav-store ul li a { position: relative; display: block; width: 96%; max-width: 350px; margin: 0 auto; padding: 25px 0;/* background: url(../img/shop/bg-btn.png) no-repeat 50% 50% / 100% 100%;*/ background: #fff; border-radius: 5px; box-shadow: 0 0 6px #e2d286; text-decoration: none;}
.nav-store ul li a span { font-size: 20px; font-weight: 600;}
.nav-store ul li a:after { content: ''; display: block; width: 12px; height: 12px; border-bottom: solid 2px #676868; border-right: solid 2px #676868;
 position: absolute; right: 10%; top: 50%; transform: translate(0,-75%) rotate(50deg) skew(15deg);
}
@media (max-width: 801px) {
	.nav-store ul li a { padding: 18px 0;}
}
@media (max-width: 641px) {
	.nav-store { margin-bottom: 80px;}
	.nav-store ul { width: 88%;}
	.nav-store ul li { display: block; width: 100%; padding: 10px;}
}
@media (max-width: 481px) {
	.nav-store { margin-bottom: 40px;}
	.nav-store ul li a { padding: 15px 0;}
	.nav-store ul li a span { font-size: 16px;}
	.nav-store ul li a:after { width: 8px; height: 8px;}
}


.board { position: relative; width: 100%; max-width: 720px; margin: 0 auto 80px; padding: 60px 20px 0;}
.board .icn { width: 100px; position: absolute; left: -15px; top: 0; border-radius: 50%; overflow: hidden;}
.board .icn img { width: 100%;}
.board h3 { text-align: center;}
.board h3 img { width: 100%;}
@media (max-width: 481px) {
	.board { margin: 0 auto 60px; padding: 40px 12px 0;}
	.board .icn { width: 64px; left: -4px; top: 0;}
}


#online { padding-top: 20px;}
#online .tit { margin-bottom: 20px;}
#online .tit h3 { text-align: center;}
#online .tit h3 img { width: 100%; max-width: 700px;}
#online .ctn-item.mb { margin-bottom: 80px;}
#online .ctn-item ul { width: 100%; max-width: 720px; margin: 0 auto; font-size: 0; text-align: center;}
#online .ctn-item ul li { display: inline-block; width: 50%; margin: 0 0 40px; padding: 280px 0px 0;}
#online .ctn-item ul li dl { position: relative; width: 100%; padding-top: 100%;}
#online .ctn-item ul.ptn-ds li dl { background: url('../img/shop/bg-ptn-ds.png') no-repeat 50% 50% / cover;}
#online .ctn-item ul.ptn-ms li dl { background: url('../img/shop/bg-ptn-ms.png') no-repeat 50% 50% / cover;}
#online .ctn-item ul.ptn-nr li dl { background: url('../img/shop/bg-ptn-nr.png') no-repeat 50% 50% / cover;}
#online .ctn-item ul.ptn-tera li dl { background: url('../img/shop/bg-ptn-tera.png') no-repeat 50% 50% / cover;}
#online .ctn-item ul li dl dt { position: absolute; bottom: 85%; width: 100%;}
#online .ctn-item ul li dl dt img { width: 40%; max-width: 130px;}
#online .ctn-item ul li dl dd { position: absolute; left: 0; width: 100%;}
#online .ctn-item ul.ptn-tera li:nth-child(3) dl dt img,
#online .ctn-item ul.ptn-tera li:nth-child(4) dl dt img { max-width: 100px;}
#online .ctn-item ul.ptn-ds li dl dd { color: #746b3a;}
#online .ctn-item ul.ptn-ms li dl dd { color: #fff;}
#online .ctn-item ul.ptn-nr li dl dd { color: #fff;}
#online .ctn-item ul.ptn-tera li dl dd { color: #fff;}
#online .ctn-item ul li dl dd.data { top: 25%;}
#online .ctn-item ul.ptn-tera li dl dd.data { top: 18.5%;}
#online .ctn-item ul li dl dd.data span.name { display: block; font-size: 20px; font-weight: 700;}
#online .ctn-item ul li dl dd.data span.amount { display: block; margin-bottom: 12px; font-size: 18px; font-weight: 700;}
#online .ctn-item ul li dl dd.data span.price { display: block; width: 65%; max-width: 290px; margin: 0 auto; padding-top: 20px; font-size: 18px; font-weight: 700;}
#online .ctn-item ul.ptn-ds li dl dd span.price { border-top: solid 2px #746b3a;}
#online .ctn-item ul.ptn-ms li dl dd span.price { border-top: solid 2px #fff;}
#online .ctn-item ul.ptn-nr li dl dd span.price { border-top: solid 2px #fff;}
#online .ctn-item ul.ptn-tera li dl dd span.price { border-top: solid 2px #fff;}
#online .ctn-item ul li dl dd.data span.intax { font-size: 16px;}
#online .ctn-item ul li dl dd.btn { bottom: 10px;}
#online .ctn-item ul li dl dd.btn span {
 position: relative; display: block; width: 90%; max-width: 240px; margin: 0 auto; padding: 14px 0; border-radius: 50px; overflow: hidden;
 text-decoration: none; background: #a1a1a1; color: #fff; font-size: 16px; font-weight: 700; line-height: 1;
}
#online .ctn-item ul li dl dd.btn span svg { display: inline-block; width: 24px; margin-right: 6px; fill: #fff; vertical-align: middle;}
#online .ctn-item ul li dl dd.btn span em { display: inline-block; vertical-align: middle;}
#online .ctn-item ul li dl dd.btn form { position: relative; display: block; width: 90%; max-width: 240px; margin: 0 auto; border-radius: 50px; overflow: hidden;
 background: #fff; color: #fff; text-decoration: none;
}
#online .ctn-item ul li dl dd.btn form:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
#online .ctn-item ul.ptn-ds li dl dd.btn form:after { background: url('../img/shop/bg-btn-ds.jpg') no-repeat 50% 50%;}
#online .ctn-item ul.ptn-ms li dl dd.btn form:after { background: url('../img/shop/bg-btn-ms.jpg') no-repeat 50% 50%;}
#online .ctn-item ul.ptn-nr li dl dd.btn form:after { background: url('../img/shop/bg-btn-nr.jpg') no-repeat 50% 50%;}
#online .ctn-item ul.ptn-tera li dl dd.btn form:after { background: url('../img/shop/bg-btn-tera.jpg') no-repeat 50% 50%;}
#online .ctn-item ul li dl dd.btn form svg { position: absolute; left: 20%; top: 30%; width: 18px; fill: #fff; z-index: 2; transition: 0.4s linear;}
#online .ctn-item ul li dl dd.btn form input[type="hidden"]{ position: absolute;}
#online .ctn-item ul li dl dd.btn form input[type="submit"] {
 position: relative; z-index: 2; display: block; width: 100%; padding: 14px 0; border: none; background: rgba(255,255,255,0);
 color: #fff; font-size: 16px; font-weight: 700; text-indent: 30px; vertical-align: bottom; transition: 0.4s linear;
}
#online .ctn-item ul li dl dd.btn form:hover input[type="submit"] { background: rgba(255,255,255,1); color: #0e275d;}
#online .ctn-item ul li dl dd.btn form:hover svg { fill: #0e275d; z-index: 3;}
#online .note.mb { margin-bottom: 60px;}
#online .note ul { width: 100%; max-width: 680px; margin: 0 auto; text-align: right;}
#online .note ul li { color: #fff; font-size: 12px;}
@media (max-width: 1201px) {
	#online .ctn-item ul li dl dd.data span.price { padding-top: 15px;}
	#online .ctn-item ul li dl dd.btn { bottom: 0px;}
}
@media (max-width: 1001px) {
	#online .ctn-item ul li { margin: 0 0 20px; padding: 240px 0px 0;}
	#online .ctn-item ul li dl dt { bottom: 65%;}
	#online .ctn-item ul li dl dd.data { top: 40%;}
	#online .ctn-item ul li dl dd.data span.price { padding-top: 8px;}
	#online .ctn-item ul li dl dd.btn { bottom: -6px;}
	#online .ctn-item ul li dl dd.btn form input[type="submit"] { padding: 10px 0;}
	#online .ctn-item ul li dl dd.btn span { padding: 10px 0;}
}
@media (max-width: 801px) {
	#online .ctn-item ul li { margin: 0 0 100px; padding: 260px 20px 0;}
	#online .ctn-item ul li dl dt { bottom: 85%;}
	#online .ctn-item ul li dl dd.data { top: 30%;}
	#online .ctn-item ul li dl dd.data span.name { font-size: 18px; line-height: 1.4;}
	#online .ctn-item ul li dl dd.data span.name br { display: block;}
	#online .ctn-item ul li dl dd.data span.amount { font-size: 14px;}
	#online .ctn-item ul li dl dd.data span.price { font-size: 15px;}
	#online .ctn-item ul li dl dd.data span.intax { font-size: 12px;}
	#online .ctn-item ul li dl dd.btn { bottom: 0px;}
}
@media (max-width: 641px) {
	#online .ctn-item ul li { margin: 0 0 100px; padding: 260px 6px 0;}
	#online .ctn-item ul li dl dd.data { top: 24%;}
	#online .ctn-item ul li dl dd.btn form input[type="submit"] { padding: 12px 0; font-size: 14px;}

	#online .ctn-item ul li dl dd.btn span { padding: 12px 0; font-size: 14px;}
}
@media (max-width: 481px) {
	#online .ctn-item.mb { margin-bottom: 40px;}
	#online .ctn-item ul li { margin: 0 0 40px; padding: 140px 4px 0;}

	#online .ctn-item ul.ptn-tera li { margin: 0 0 60px; padding: 150px 4px 0;}

	#online .ctn-item ul li dl dd.data { top: 26%;}
	#online .ctn-item ul li dl dd.data span.name { font-size: 11px; line-height: 1.25;}
	#online .ctn-item ul li dl dd.data span.amount { margin-bottom: 4px; font-size: 11px;}
	#online .ctn-item ul li dl dd.data span.price { padding-top: 4px; border-width: 1px; font-size: 12px; line-height: 1.4;}
	#online .ctn-item ul li dl dd.data span.intax { font-size: 10px;}
	#online .ctn-item ul li dl dd.btn form input[type="submit"] { padding: 7px 0; font-size: 12px;}
	#online .ctn-item ul li dl dd.btn form svg { left: 13%; width: 16px;}

	#online .ctn-item ul li dl dd.btn span { padding: 8px 0; font-size: 12px;}
	#online .ctn-item ul li dl dd.btn span svg { width: 14px; margin-right: 4px;}

	#online .note.mb { margin-bottom: 20px;}
}



#store { padding-top: 20px;}
#store .tit { margin-bottom: 40px;}
#store .ctn-shop ul { width: 100%; max-width: 1000px; margin: 0 auto 20px; font-size: 0;}
#store .ctn-shop ul li { display: inline-block; width: 25%; padding: 10px;}
#store .ctn-shop ul li a { display: block; width: 100%; max-width: 230px; margin: 0 auto; padding: 20px 0; background: #fff; box-shadow: 0 0 5px #eee; border-radius: 6px;
 color: #6b84b6; font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
}
#store .ctn-shop ul li a:hover { opacity: 0.9;}
#store .ctn-shop p.note { color: #fff; font-size: 12px; letter-spacing: 0.1rem; text-align: center; text-shadow: 0 0 4px #0e275d, 0 0 6px #0e275d, 0 0 8px #0e275d;}
@media (max-width: 641px) {
	#store .ctn-shop ul li { width: 50%;}
}
@media (max-width: 481px) {
	#store .tit { margin-bottom: 30px;}
	#store .ctn-shop ul { margin: 0 auto 20px;}
	#store .ctn-shop ul li { padding: 7px;}
	#store .ctn-shop ul li a { padding: 8px 0; border-radius: 4px; font-size: 13px;}
}