@charset "utf-8";
#container { background: #fff;}
.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: linear-gradient(90deg,#feafaf 50%,#f4bcea 50%)}


.note { width: 100%;}
.note ul { width: 100%; margin: 0 0 0 auto; font-size: 0; text-align: left;}
.note ul li { font-size: 10px;}
@media (max-width: 481px) {
	.note ul { text-align: left;}
}

#hd-snowrap { padding: 14px 50px; background: #e191cb;}
#hd-snowrap h1 { line-height: 1;}
#hd-snowrap h1 img { width: 55%; max-width: 210px;}
@media (max-width: 641px) {
	#hd-snowrap { padding: 12px 20px;}
}
@media (max-width: 481px) {
	#hd-snowrap { padding: 8px 15px;}
}

#kv { position: relative; background: url('../../img/lp/snowrap/kv.jpg') no-repeat 50% 50% / cover; opacity: 0; transition: 0.4s ease 0.2s;}
#kv .inner-kv { padding-top: 440px;}
#kv h2 {}
#kv h2 img { width: 100%; display: none;}
#kv.fadeIn { opacity: 1;}
@media (max-width: 1281px) {
	#kv .inner-kv { padding-top: 42vw;}
}
@media (max-width: 801px) {
	#kv .inner-kv { padding-top: 0;}
	#kv h2 img { display: block;}
}
@media (max-width: 481px) {
}

.ttl {background: #e191cb;}
.ttl h2 { line-height: 1; text-align: center;}
.ttl h2 img { width: 90%;}
.ttl h2 img.sp { display: none;}


#select { position: relative;}
#select .ttl { padding: 25px 0;}
#select .ttl h2 img { max-width: 730px;}
#select .inner-sct { position: relative;}
#select .ctn { padding-top: 40px;}
#select .ctn.ctn-1 { background: linear-gradient(#fdf6f6, #f64f66 55%);}
#select .ctn.ctn-2 { background: linear-gradient(#feeefb, #b57bd4 55%);}
#select .ctn .tit { position: relative; margin-bottom: -40px;}
#select .ctn .tit h3 { text-align: center;}
#select .ctn .tit h3 img { width: 100%; max-width: 760px;}
#select .ctn .tit h3 img.sp { display: none;}
#select .ctn .bg-1 { position: relative; padding: 76px 0 60px; background: url('../../img/lp/snowrap/bg-1.png') no-repeat 50% 0}
#select .ctn .bg-2 { position: relative; padding: 76px 0 60px; background: url('../../img/lp/snowrap/bg-2.png') no-repeat 50% 0}
#select .ctn .fig { width: 94%; max-width: 420px; margin: 0 auto 30px;}
#select .ctn .fig figure { text-align: center;}
#select .ctn .fig figure img { width: 100%;}
#select .ctn .note ul { text-align: center;}
#select .ctn .note ul li { color: #999897; font-size: 10px;}
@media (max-width: 801px) {
}
@media (max-width: 641px) {
	#select .ttl { padding: 18px 0;}
	#select .ttl h2 img.pc { display: none;}
	#select .ttl h2 img.sp { display: block; margin: 0 auto;}
	#select .ctn { padding-top: 30px;}
	#select .ctn .tit { margin-bottom: -10vw;}
	#select .ctn .tit h3 img.pc { display: none;}
	#select .ctn .tit h3 img.sp { display: block;}
	#select .ctn .bg-1 { position: relative; padding: 90px 0 40px; background: url('../../img/lp/snowrap/bg-1@sp.png') no-repeat 50% 0 / 100% auto;}
	#select .ctn .bg-2 { position: relative; padding: 90px 0 40px; background: url('../../img/lp/snowrap/bg-2@sp.png') no-repeat 50% 0 / 100% auto;}
	#select .ctn .fig { margin: 0 auto 20px;}
	#select .ctn .note ul { width: 90%; margin: 0 auto; text-align: right;}

}
@media (max-width: 481px) {
	#select .ttl { padding: 12px 0;}
	#select .ctn .bg-1 { position: relative; padding: 50px 0 30px;}
	#select .ctn .bg-2 { position: relative; padding: 50px 0 30px;}
	#select .ctn .fig { margin: 0 auto 12px;}
}


#which { position: relative;}
#which .ttl { padding: 28px 0;}
#which .ttl h2 img { max-width: 510px;}
#which .inner-sct { position: relative; padding: 20px 0 40px;}
#which .ctn { margin-bottom: 30px;}
#which .ctn figure { text-align: center;}
#which .ctn figure img { width: 100%; max-width: 960px;}
#which .ctn figure img.sp { display: none;}
#which .ctn ul { width: 100%; max-width: 960px; margin: 0 auto; font-size: 0; text-align: center;}
#which .ctn ul li { display: inline-block; width: 50%;}
#which .ctn ul li a { display: block; width: 92%; max-width: 380px; margin: 0 auto; color: #fff; text-decoration: none;}
#which .ctn ul li a dl dt { margin-bottom: 15px; text-align: center;}
#which .ctn ul li a dl dt img { width: 100%;}
#which .ctn ul li a dl dt img.sp { display: none;}
#which .ctn ul li a dl dd { font-size: 17px; font-weight: 700; }
#which .ctn ul li a dl dd span { position: relative; display: inline-block; padding: 5px 15px; border-bottom: solid 2px #fff;}
#which .ctn ul li a dl dd span:after { content: ''; width: 8px; height: 8px; border-right: solid 3px #fff;
	position: absolute; right: 0; bottom: 0; transform: translateX(-4px) skewX(45deg);
}
#which .ctn ul li a:hover { opacity: 0.6;}
#which .note ul { max-width: 510px; margin: 0 auto; text-align: center;}
#which .note ul li { color: #999897; font-size: 10px;}

@media (max-width: 641px) {
	#which .ttl { padding: 18px 0;}
	#which .inner-sct { padding: 0px 0 40px;}
	#which .ctn figure { margin-bottom: 20px;}
	#which .ctn figure img.pc { display: none;}
	#which .ctn figure img.sp { display: block;}
	#which .ctn ul li a dl dt img.pc { display: none;}
	#which .ctn ul li a dl dt img.sp { display: block;}
	#which .note ul { max-width: 92%; margin: 0 auto; text-align: left;}
}
@media (max-width: 481px) {
	#which .ttl { padding: 12px 0;}
	#which .inner-sct { padding: 0px 0 30px;}
	#which .ctn { margin-bottom: 20px;}
	#which .ctn figure { margin-bottom: 12px;}
	#which .ctn ul li a dl dt { margin-bottom: 8px;}
	#which .ctn ul li a dl dd { font-size: 14px;}
	#which .ctn ul li a dl dd span { padding: 2px 10px 6px;}
	#which .ctn ul li a dl dd span:after { width: 5px; height: 5px; transform: translateX(-3px) skewX(45deg);}
}


#campaign { position: relative;}
#campaign .ttl { padding: 28px 0;}
#campaign .ttl h2 img { max-width: 510px;}
#campaign figure { text-align: center;}
#campaign figure img { width: 100%;}
#campaign figure img.sp { display: none;}
#campaign .ctn { position: relative; width: 92%; margin: 0 auto; padding: 50px 0 30px;}
#campaign .ctn .box { position: relative; width: 92%; max-width: 480px; margin: 0 auto 12px;}
#campaign .ctn .box p { position: relative; text-align: center; z-index: 1;}
#campaign .ctn .box p img { width: 100%; border-radius: 10px;}
#campaign .ctn .box .icn { width: 88px; position: absolute; left: -20px; top: -20px; z-index: 2; border-radius: 50%; overflow: hidden;
 box-shadow: 0px 0px 18px #e1afe9;
}
#campaign .ctn .box .icn img { width: 100%;}
#campaign .ctn .box .btn { position: absolute; bottom: 25px; width: 100%; font-size: 0px; z-index: 2;}
#campaign .ctn .box .btn a { display: block; width: 60%; max-width: 280px; margin: 0 auto;
 border-radius: 50px; line-height: 1; text-decoration: none; overflow: hidden; box-shadow: 0 0 8px #fff,0 0 8px #fff;
 transition: 0.3s linear;
}
#campaign .ctn .box .btn a img { display: block; width: 100%;}
#campaign .ctn .box .btn a:hover { opacity: 0.8;}
#campaign .ctn .copy  p { color: #fff; font-size: 10px; text-align: right;}
@media (max-width: 641px) {
	#campaign .ttl { padding: 18px 0;}
	#campaign figure img.pc { display: none;}
	#campaign figure img.sp { display: block;}
}
@media (max-width: 481px) {
	#campaign .ttl { padding: 12px 0;}
	#campaign .ctn { padding: 30px 0 20px;}
	#campaign .ctn .box { margin: 0 auto 8px;}
	#campaign .ctn .box .icn { width: 68px; left: -12px; top: -10px;}
	#campaign .ctn .box .btn { bottom: 18px;}
	#campaign .ctn .box .btn a { box-shadow: 0 0 6px #fff,0 0 6px #fff;}
}



#shop { position: relative;}
#shop .ttl { padding: 28px 0;}
#shop .ttl h2 img { max-width: 510px;}
#shop .inner-sct { position: relative; padding: 20px 0;}
#shop .ctn { width: 100%; margin: 0 auto; padding: 40px 0 20px;
 background-image: url('../../img/lp/snowrap/bg-shop-1.png'),url('../../img/lp/snowrap/bg-shop-2.png');
 background-repeat: no-repeat, no-repeat;
 background-position: 50% 0, 50% 100%;
 background-size: 620px auto, 620px auto;
}
#shop .ctn p { text-align: center;}
#shop .ctn p.tit { margin-bottom: 40px; color: #4e4e4e; font-size: 23px; font-weight: 600; letter-spacing: 0.1rem;}
#shop .ctn p.kome { color: #999897; font-size: 10px; text-align: center;}
#shop .ctn ul { width: 92%; max-width: 780px; margin: 0 auto 50px; font-size: 0;}
#shop .ctn ul li { display: inline-block; width: 33%; padding: 12px;}
#shop .ctn ul li a { display: block; width: 100%; margin: 0 auto; padding: 20px 0;
 background: #fff; box-shadow: 0 0 5px #a09ed8; border-radius: 6px;
 color: #6b84b6; font-size: 17px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: 0.3s linear;
}
#shop .ctn ul li a span { display: inline-block; background: linear-gradient(90deg, #cb60e5, #e7202f);
 -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
#shop .ctn ul li a:hover { opacity: 0.85;}
@media (max-width: 801px) {
	#shop .inner-sct { padding: 30px 0;}
}
@media (max-width: 641px) {
	#shop .ttl { padding: 18px 0;}
	#shop .ctn p.tit { font-size: 18px;}
	#shop .ctn ul li { width: 50%; padding: 8px;}
}
@media (max-width: 481px) {
	#shop .ttl { padding: 12px 0;}
	#shop .inner-sct { padding: 20px 0;}
	#shop .ctn { padding: 20px 0 10px; background-size: 100% auto, 100% auto;}
	#shop .ctn p.tit { margin-bottom: 30px; font-size: 16px;}
	#shop .ctn ul { margin: 0 auto 10px;}
	#shop .ctn ul li { padding: 5px;}
	#shop .ctn ul li a { padding: 8px 0; border-radius: 4px; box-shadow: 0 0 3px #fff; font-size: 13px;}
}



/* aside */
.sns {}
.sns .inner { width: 90%; margin: 0 auto; padding: 40px 0 120px;}
.sns p { margin-bottom: 40px; text-align: center;}
.sns p img { width: 60%; max-width: 280px;}
.sns ul { font-size: 0; text-align: center;}
.sns ul li { display: inline-block; width: 50%; max-width: 100px;}
.sns ul li a { display: block; width: 80%; max-width: 50px; margin: 0 auto;}
.sns ul li a img { width: 100%;}
@media (max-width: 641px) {
	.sns .inner { padding: 20px 0;}
}
@media (max-width: 481px) {
	.sns .inner { padding: 15px 0 40px;}
	.sns p { margin-bottom: 20px;}
	.sns ul li { max-width: 60px;}
	.sns ul li a { max-width: 30px;}
}



#ft2 .inner-ft { background: #fff;}
#ft2 .ft-flex { display: block; padding: 18px 0;}
#ft2 .ft-logo { width: 100%; padding: 30px 0;}
#ft2 .ft-nav { width: 100%;}
#ft2 .ft-logo h3 { text-align: center;}
#ft2 .ft-logo h3 a { display: inline-block; width: 50%; max-width: 150px;}
#ft2 .ft-logo h3 a img{ width: 100%;}
#ft2 .ft-nav ul { font-size: 0; text-align: center;}
#ft2 .ft-nav ul li { display: inline-block; padding: 0 45px;}
#ft2 .ft-nav ul li a { color:#333; font-size: 14px; text-decoration:none;}
#ft2 .ft-nav ul li a:hover { text-decoration:underline;}

#ft2 .copyright { width: 100%; margin: 0 auto; background:#000; padding:12px;}
#ft2 .copyright p { color:#fff; font-size: 10px; text-align:center;}

@media screen and (max-width: 801px){
	#ft2 .ft-flex { display: block; padding: 18px 0;}
	#ft2 .ft-logo { width: 100%; margin: 0 auto;}
	#ft2 .ft-nav { width: 92%; margin: 0 auto;}
	#ft2 .ft-nav ul li { padding: 0 10px;}
}
@media screen and (max-width: 641px){
	#ft2 .ft-nav ul li { display: block; width: 100%; padding: 8px;}
	#ft2 .ft-nav ul li a { display: block; padding: 7px 0; border: none; font-size: 12px;}
}
@media screen and (max-width: 481px){
	#ft2 .ft-nav ul li { padding: 4px;}
	#ft2 .ft-nav ul li a { padding: 4px 0;}
}