@charset "utf-8";


/*		font-style
-------------------------------------------------- */
body { color: #e96087;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input, textarea {font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min {font-family: "游明朝", "Yu Mincho", "YuMincho", serif;}

::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}


#container {}

#ft { background: #fff;}
#ft .inner-ft { padding: 50px 0 30px;}
#ft h3 { margin-bottom: 30px; text-align: center;}
#ft h3 img { width: 40%; max-width: 160px;}
#ft ul { font-size: 0; text-align: center;}
#ft ul li { display: inline-block; margin: 0 30px; font-size: 14px;}
#ft ul li a { color: #000; text-decoration: none;}
#ft .copyright { padding: 10px 0; background: #000;}
#ft .copyright p { color: #fff; font-size: 12px; text-align: center;}
@media (max-width: 801px) {
	#ft ul li { margin: 0 20px;}
}
@media (max-width: 641px) {
	#ft .inner-ft { padding: 50px 0;}
	#ft h3 { margin-bottom: 20px;}
	#ft ul { width: 92%; margin: 0 auto;}
	#ft ul li { display: block; width: 100%; margin: 0; padding: 8px 0;}
	#ft ul li a { display: block; width: 94%; margin: 0 auto; padding: 5px 0;}
}
@media (max-width: 481px) {
	#ft .inner-ft { padding: 40px 0 20px;}
	#ft h3 { margin-bottom: 10px;}
	#ft ul li { padding: 5px; font-size: 12px;}
	#ft .copyright p { font-size: 10px; letter-spacing: 0.05rem;}
}


.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: url('./img/bg-1.jpg') repeat-y 50% 50%;}
.wrap:after { content: ''; display: block; width: 100%; height: 600px; position: absolute; left: 0; bottom: 0; z-index: 1;
 background: url('./img/bg-3.png') no-repeat 50% 100% / 100% auto;
}
@media (max-width: 481px) {
	.wrap { background-size: 120% auto;}
}


.ttl { text-align: center;}


.hd-logo { padding: 35px 0 30px; background: url('./img/ptn-1.png') no-repeat 50% 50%; text-align: center;}
.hd-logo img { width: 40%; max-width: 170px;}
@media (max-width: 801px) {
	.hd-logo { padding: 4vw 0;}
}
@media (max-width: 481px) {
	.hd-logo { padding: 25px 0 30px; background: url('./img/ptn-1-sp.png') no-repeat 50% 0% / 100% auto;}
}


#kv { position: relative; z-index: 3;}
#kv .inner-kv { position: relative; width: 100%;}
#kv .inner-kv:before,
#kv .inner-kv:after { content: ''; display: block; position: absolute; z-index: 2;}
#kv .inner-kv:before{ width: 180px; height: 145px; left: 18%; top: -68px;
 background: url('./img/badge.png') no-repeat 50% 50% / 100% auto;
}
#kv .inner-kv:after { width: 140px; height: 128px; right: 16%; top: -30px;
 background: url('./img/illust-R1.png') no-repeat 50% 50% / 100% auto;
}
#kv h1 { position: absolute; right: 0; top: 50%; width: 60%; transform: translateY(-50%); z-index: 2; text-align: center;}
#kv h1 img { width: 50%; max-width: 300px;}
#kv .bg { position: relative; width: 100%; z-index: 1;}
#kv .bg img { width: 100%;}
#kv .bg img.sp { display: none;}
#kv .bg:before,
#kv .bg:after { content: ''; display: block; position: absolute; z-index: 2;}
#kv .bg:before{ width: 150px; height: 150px; left: 9%; bottom: -80px;
 background: url('./img/illust-L1.png') no-repeat 50% 50% / 100% auto;
}
#kv .bg:after { width: 150px; height: 140px; right: 25%; bottom: -60px;
 background: url('./img/illust-R2.png') no-repeat 50% 50% / 100% auto;
}
@media (max-width: 1001px) {
	#kv .inner-kv:before{ width: 150px; height: 120px; left: 18%; top: -68px;}
	#kv .inner-kv:after { width: 120px; height: 100px; right: 16%; top: -30px;}
	#kv .bg:before{ width: 120px; height: 120px; left: 9%; bottom: -80px;}
	#kv .bg:after { width: 120px; height: 110px; right: 25%; bottom: -60px;}
}
@media (max-width: 801px) {
	#kv h1 { width: 50%;}
	#kv h1 img { width: 80%;}
	#kv .bg img.pc { display: none;}
	#kv .bg img.sp { display: block;}
	#kv .inner-kv:before{ left: 5%;}
	#kv .inner-kv:after { right: 6%;}
	#kv .bg:before{ left: 4%;}
	#kv .bg:after { right: 8%;}
}
@media (max-width: 481px) {
	#kv .inner-kv:before{ width: 100px; height: 80px; left: 5%; top: -50px;}
	#kv .inner-kv:after { width: 80px; height: 68px; right: 6%; top: -40px;}
	#kv .bg:before{ width: 80px; height: 80px; left: 6%; bottom: -55px;}
	#kv .bg:after { width: 88px; height: 82px; right: 8%; bottom: -50px;}
}


#lineup { position: relative; z-index: 2;}
#lineup .inner-sct { position: relative; padding: 100px 0 40px; background: url('./img/ptn-2.png') no-repeat 50% 0%;}
#lineup .ttl div { width: 90%; max-width: 500px; margin: 0 auto 20px;;}
#lineup .ttl div img { width: 100%;}
#lineup .ttl h2 img { width: 68%; max-width: 340px;}
#lineup .item-1 { padding: 30px 0 60px;}
#lineup .item-2 { background: url('./img/bg-2.png') no-repeat 50% 50% / 100% 100%;}
#lineup .item-2 div{ padding: 80px 0; background: url('./img/ptn-3.png') no-repeat 50% 50%;}
#lineup .item figure { margin-bottom: 20px; text-align: center;}
#lineup .item figure img { width: 90%; max-width: 580px;}
#lineup .item p { text-align: center;}
#lineup .item p img { width: 48%; max-width: 260px;}
@media (max-width: 1001px) {
	#lineup .item-2 { background-size: auto 100%;}
}
@media (max-width: 641px) {
	#lineup:before { content: ''; display: block; width: 100%; padding-top: 20%;
	 background: url('./img/ptn-2a-sp.png') no-repeat 50% 0 / 100% auto;
	 position: absolute; left: 0; top: -25px;
	}
	#lineup .inner-sct { padding: 120px 0 30px; background: url('./img/ptn-2b-sp.png') no-repeat 50% 26% / 100% auto;}
	#lineup .item-2 div{ padding: 40px 0 30px; background: url('./img/ptn-3-sp.png') no-repeat 50% 50% / 100% auto;}
}
@media (max-width: 481px) {
		#lineup:before { top: -16px;}
	#lineup .inner-sct{ padding: 80px 0 20px; background-position: 50% 33%;}
	#lineup .item-1 { padding: 20px 0 30px;}
	#lineup .item-2 div{ background-position: 50% 50%;}
	#lineup .item figure { margin-bottom: 12px;}
}



.bg-ptn-4 { background: url('./img/ptn-4.png') no-repeat 50% 0%;}
@media (max-width: 481px) {
	.bg-ptn-4 { background: none;}
}
#point { position: relative;}
#point .inner-sct { padding: 40px 0;}
#point .ttl { margin-bottom: 50px;}
#point .ttl h2 img { width: 80%; max-width: 540px;}
#point .ttl h2 img.sp { display: none;}
#point .ctn { position: relative;}
#point .ctn figure { text-align: center;}
#point .ctn figure img { width: 94%; max-width: 680px;}
#point .ctn figure img.sp { display: none;}
@media (max-width: 641px) {
	#point .ttl { margin-bottom: 30px;}
}
@media (max-width: 481px) {
	#point .inner-sct { padding: 20px 0; background: url('./img/ptn-4-sp.png') no-repeat 50% 50% / 100% auto;}
	#point .ttl { margin-bottom: 20px;}
	#point .ttl h2 img.pc { display: none;}
	#point .ttl h2 img.sp { display: block; margin: 0 auto;}
	#point .ctn figure img.pc { display: none;}
	#point .ctn figure img.sp { display: block; margin: 0 auto;}
}



#shop .inner-sct { padding: 40px 0;}
#shop .ttl { margin-bottom: 40px;}
#shop .ttl h2 { margin-bottom: 25px;}
#shop .ttl h2 img { width: 27.5%; max-width: 140px;}
#shop .ttl h3 { margin-bottom: 15px; color: #a74f55; font-size: 20px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4;}
#shop .ttl h3 br { display: none;}
#shop .ttl p { color: #a74f55; font-size: 12px; font-weight: 600; }

#shop .ctn { width: 94%; max-width: 900px; margin: 0 auto;}
#shop .ctn ul { font-size: 0;}
#shop .ctn ul li { display: inline-block; width: 33.33335%; padding: 15px; font-size: 16px;}
#shop .ctn ul li a { position: relative; display: block; padding: 3px; background: #fff; border-radius: 8px;
 color: #eb7aab; font-weight: 700; text-decoration: none;
}
#shop .ctn ul li a:before { content: ''; display: block; width: 18px; height: 100%;
 position: absolute; left: 12px; top: 0;
 background: url('./img/icn.svg') no-repeat 50% 50% / 100% auto ;
}
#shop .ctn ul li a span { display: block; padding: 10px; padding-left: 32px; border: solid 1px #eb7aab; border-radius: 5px;}
#shop .ctn ul li a:hover { opacity: 0.8;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#shop .ctn ul li { padding: 10px; font-size: 1.8vw;}
}
@media (max-width: 641px) {
	#shop .ctn ul li { width: 50%; padding: 8px; font-size: 14px;}
}
@media (max-width: 481px) {
	#shop { background: url('./img/ptn-5a-sp.png') no-repeat 50% 40px / 100% auto;}
	#shop .inner-sct { padding: 30px 0 20px; background: url('./img/ptn-5b-sp.png') no-repeat 50% 100% / 100% auto;}
	#shop .ttl { margin-bottom: 20px;}
	#shop .ttl h2 { margin-bottom: 18px;}
	#shop .ttl h3 { margin-bottom: 10px; font-size: 18px; letter-spacing: 0.05rem;}
	#shop .ttl h3 br { display: block;}
	#shop .ttl p { font-size: 10px;}
	#shop .ctn ul li { padding: 6px; font-size: 13px;}
	#shop .ctn ul li a { padding: 2px; border-radius: 5px;}
	#shop .ctn ul li a:before { width: 15px;}
	#shop .ctn ul li a span { padding: 7px 0; padding-left: 30px; border-radius: 3px;}
}


#series { position: relative; z-index: 2;}
#series .inner-sct { padding: 40px 0;}
#series .tit { margin-bottom: 50px; text-align: center;}
#series .tit h3 img { width: 68%; max-width: 540px;}
#series .tit h3 img.sp { display: none;}
#series ul.series li { color: #621a14;}
@media (max-width: 481px) {
	#series .inner-sct { padding: 30px 0;}
	#series .tit { margin-bottom: 30px;}
	#series .tit h3 img.pc { display: none;}
	#series .tit h3 img.sp { display: block; margin: 0 auto;}
	#series .sp-show div span { color: #621a14;}
	#series .slider .slick-prev{ left: 10px;}
	#series .slider .slick-next{ right: 10px;}
}

.cr { position: relative; z-index: 2; padding: 80px 0px 100px;}
.cr:after { content: ''; display: block; width: 92%; max-width: 1080px; height: 12px; margin: 0 auto;
 background: url('./img/copyright.png') no-repeat 100% 50% / auto 100%;
}
@media (max-width: 641px) {
	.cr { padding: 80px 0px 100px;}
}
@media (max-width: 481px) {
	.cr { padding: 20px 0px 30px;}
	.cr:after { height: 9px;}
}