@charset "utf-8";
#container { background: #eef6fd;}
.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}


.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-frozen { padding: 20px 40px; background: linear-gradient(#6581c0,#a4bbd8);}
#hd-frozen h1 { line-height: 1;}
#hd-frozen h1 img { width: 55%; max-width: 350px;}
@media (max-width: 641px) {
	#hd-frozen { padding: 12px 20px;}
}
@media (max-width: 481px) {
	#hd-frozen { padding: 8px 15px;}
}

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


#campaign { position: relative;}
#campaign .inner-sct { padding: 20px 0px 40px; background: url('../../img/lp/frozen/bg-campaign.jpg') no-repeat 50% 0%;}
#campaign .ctn { position: relative; width: 92%; max-width: 650px; margin: 0 auto;}
#campaign .ctn h2 { position: relative; text-align: center;}
#campaign .ctn h2 img { width: 100%;}
#campaign .ctn h2 img.sp { display: none;}
#campaign .ctn .btn { position: absolute; bottom: 15px; width: 100%; font-size: 0px;}
#campaign .ctn .btn a { display: block; width: 40%; max-width: 260px; margin: 0 18px 0 auto; border-radius: 10px; line-height: 1; text-decoration: none; overflow: hidden;
 transition: 0.3s linear;
}
#campaign .ctn .btn a img { display: block; width: 100%;}
#campaign .ctn .btn a:hover { opacity: 0.8;}
@media (max-width: 641px) {
	#campaign .inner-sct { padding: 20px 0px; background: url('../../img/lp/frozen/bg-campaign-sp.jpg') no-repeat 50% 0% / 100% auto;}
	#campaign .ctn h2 img.pc { display: none;}
	#campaign .ctn h2 img.sp { display: block;}
	#campaign .ctn .btn { bottom: 5px;}
	#campaign .ctn .btn a { margin: 0 36px 0 auto;}
}
@media (max-width: 481px) {
	#campaign .inner-sct { padding: 15px 0px;}
	#campaign .ctn .btn { bottom: 8px;}
	#campaign .ctn .btn a { margin: 0 24px 0 auto; border-radius: 5px;}
}


.bnr { background: url('../../img/lp/frozen/bg-bnr.jpg');}
.bnr p { text-align: center;}
.bnr p img { width: 100%; max-width: 660px;}
.bnr p img.sp { display: none;}
@media (max-width: 641px) {
	.bnr p img.pc { display: none;}
	.bnr p img.sp { display: block;}
}

#point { position: relative;}
#point .inner-sct { position: relative; height: 1220px; padding-top: 50px; background: url('../../img/lp/frozen/bg-point.jpg') no-repeat 50% 50%;}
#point .ttl { margin-bottom: 40px;}
#point .ttl h2 { text-align: center;}
#point .ttl h2 img { width: 72%; max-width: 520px;}
#point .ctn { width: 100%; max-width: 680px; margin: 0 auto;}
#point .ctn ul li { opacity: 0; transition: 0.6s ease;}
#point .ctn ul li:nth-child(1) { margin-bottom: -80px; padding-right: 100px; text-align: right; transition-delay: 0.4s;}
#point .ctn ul li:nth-child(2) { margin-bottom: -100px; transition-delay: 0.6s;}
#point .ctn ul li:nth-child(3) { padding-right: 40px; text-align: right; transition-delay: 0.8s;}
#point .ctn ul li img { width: 80%; max-width: 330px;}
#point .ctn p { display: none;}
#point .ctn p img { width: 100%;}
#point .note { position: absolute; left: 0; bottom: 60px;}
#point .note ul { max-width: 450px;}
#point .note ul li { color: #7b8a9b;}
#point.show .ctn ul li { opacity: 1;}
@media (max-width: 801px) {
	#point .inner-sct { height: auto; padding-top: 0px; background: none;}
	#point .ttl { display: none;}
	#point .ctn { max-width: 100%;}
	#point .ctn ul { display: none;}
	#point .ctn p { display: block;}
	#point .note { bottom: 45px;}
	#point .note ul { max-width: 400px;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#point .note { bottom: 25px;}
	#point .note ul { width: 90%; max-width: 90%; margin: 0 auto;}
}


#product { position: relative; background: url('../../img/lp/frozen/bg-lineup.jpg') no-repeat 50% 0;}
#product .inner-sct { height: 830px; padding-top: 30px;}
#product .ttl { margin-bottom: 30px; opacity: 0; transition: 0.6s linear;}
#product .ttl h2 { text-align: center;}
#product .ttl h2 img { width: 72%; max-width: 400px;}

#product .ctn { position: relative; display: flex; align-items: flex-end; width: 100%; max-width: 660px; margin: 0 auto; opacity: 0; transition: 0.6s linear 0.4s;}
#product .ctn .item { width: 50%;}
#product .ctn .item figure { margin-bottom: 20px; text-align: center;}
#product .ctn .item figure img { width: 85%; max-width: 280px;}
#product .ctn .item h3 { margin-bottom: 8px; color: #093584; font-size: 20px; font-weight: 700; letter-spacing: 0.3rem; line-height: 1.4; text-align: center;}
#product .ctn .item p {}
#product .ctn .item p.price { color: #093584; font-size: 12px; line-height: 1.2; text-align: center;}
#product .ctn .item p.price span{ font-size: 18px; font-weight: 700; letter-spacing: 0.16rem;}
#product .ctn .txt .aside p.aroma { font-size: 13px; }
#product.show .ttl,
#product.show .ctn { opacity: 1;}
@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#product { position: relative; background: url('../../img/lp/frozen/bg-lineup-sp.jpg') no-repeat 50% 0 / cover;}
	#product .inner-sct { height: auto; padding: 60px 0 80px; background: url('../../img/lp/frozen/illust-sp.png') no-repeat 50% 100% / 100% auto;}
	#product .ctn { display: block;}
	#product .ctn .item { width: 100%; padding: 20px 0;}
	#product .ctn .item figure img { width: 54%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#product .inner-sct { padding: 40px 0 60px;}
	#product .ttl { margin-bottom: 20px;}
	#product .ctn .item { width: 100%; padding: 0px;}
	#product .ctn .item figure { margin-bottom: 12px;}
	#product .ctn .item h3 { margin-bottom: 4px; font-size: 18px; letter-spacing: 0.2rem;}
	#product .ctn .item p.price span{ font-size: 16px; letter-spacing: 0.1rem;}
}


.bg { position: relative; width: 100%; background: url('../../img/bg.jpg') repeat-y 50% 0 / 1280px auto;}
#check .inner-sct { width: 90%; margin: 0 auto; padding: 100px 0 40px;}
#check .ttl { margin-bottom: 30px; text-align: center; opacity: 0; transition: 0.6s linear;}
#check .ttl h2 { margin-bottom: 20px;}
#check .ttl h2 img { width: 72%; max-width: 380px;}
#check .ttl p { color: #fff; font-size: 18px; font-weight: 600;}
#check .ctn-flex { display: flex; justify-content: space-between; width: 100%; max-width: 760px; margin: 0 auto 30px; opacity: 0; transition: 0.6s linear 0.4s;}
#check .ctn-flex .ctn { width: 33%; padding: 5px;}
#check .ctn-flex .ctn figure { margin-bottom: 25px; text-align: center;}
#check .ctn-flex .ctn figure a { display: block; width: 100%; background: #fff;}
#check .ctn-flex .ctn figure a img { width: 100%; transition: 0.3s linear;}
#check .ctn-flex .ctn .btn-more { width: 88%; margin: 0 auto;}
#check .ctn-flex .ctn .btn-more a { display: block; width: 100%; padding: 10px 0; background: rgba(255,255,255,0.2);
 border: solid 2px #fff; border-radius: 10px; box-shadow: 0 0 10px #fff;
 color: #fff; font-size: 23px; font-weight: 700; text-align: center;text-decoration: none; transition: 0.3s linear;
}
#check .ctn-flex .ctn .btn-more a:after { position: relative; content: ''; display: inline-block; width: 14px; height: 14px;
 border-top: solid 3px #fff; border-right: solid 3px #fff; transform: rotate(45deg); vertical-align: middle;
}
#check .ctn-flex .ctn .btn-more a em { display: inline-block; margin-right: 10px; vertical-align: middle;}
#check .ctn-flex .ctn figure a img:hover,
#check .ctn-flex .ctn .btn-more a:hover { opacity: 0.8;}
#check .note ul { max-width: 185px;}
#check .note ul li { color: #fff;}
#check.show .ttl,
#check.show .ctn-flex { opacity: 1;}
@media (max-width: 801px) {
	#check .ttl h2 { margin-bottom: 12px;}
	#check .ctn-flex { margin: 0 auto 15px;}
	#check .ctn-flex .ctn figure { margin-bottom: 15px;}
	#check .ctn-flex .ctn .btn-more a { padding: 6px 0; border-width: 1px; border-radius: 5px; box-shadow: 0 0 5px #fff; font-size: 2.0vw;}
	#check .ctn-flex .ctn .btn-more a:after { width: 10px; height: 10px;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#check .inner-sct { padding: 60px 0 20px;}
	#check .ttl { margin-bottom: 15px;}
	#check .ttl p { font-size: 12px;}
	#check .ctn-flex .ctn figure { margin-bottom: 10px;}
	#check .ctn-flex .ctn .btn-more a { padding: 4px 0; font-size: 11px;}
	#check .ctn-flex .ctn .btn-more a:after { width: 6px; height: 6px; border-width: 2px;}
	#check .ctn-flex .ctn .btn-more a em { margin-right: 5px;}
}



#shop { position: relative;}
#shop:after { content: ''; display: block; width: 150px; height: 240px; background: url('../../img/lp/frozen/illust.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: 64%; bottom: 20px;
}
#shop .inner-sct { position: relative; padding: 40px 0 160px;}
#shop .tit { margin-bottom: 40px; color: #fff; text-align: center; opacity: 0; transition: 0.6s linear;}
#shop .tit h2 {}
#shop .tit h2 img { width: 60%; max-width: 340px;}
#shop .tit p { font-size: 14px; font-weight: 600; letter-spacing: 0.2rem; text-shadow: 0 0 4px #0e275d, 0 0 6px #0e275d, 0 0 8px #0e275d;}
#shop .ctn { width: 92%; max-width: 1000px; margin: 0 auto; opacity: 0; transition: 0.6s linear 0.4s;}

#shop .ctn ul { width: 100%; max-width: 1000px; margin: 0 auto 20px; font-size: 0;}
#shop .ctn ul li { display: inline-block; width: 25%; padding: 10px;}
#shop .ctn 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; transition: 0.3s linear;
}
#shop .ctn ul li a:hover { opacity: 0.85;}
#shop .ctn p { 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;}

#shop .copy { position: absolute; bottom: 20px; width: 100%; padding: 0 60px;}
#shop .copy p { color: #fff; font-size: 12px; letter-spacing: 0.1rem; text-align: right; text-shadow: 0 0 4px #0e275d, 0 0 6px #0e275d, 0 0 8px #0e275d;}
#shop.show .tit,
#shop.show .ctn { opacity: 1;}
@media (max-width: 801px) {
	#shop:after { left: 50%; transform: translateX(-50%);}
	#shop .inner-sct { padding: 40px 0 280px;}
	#shop .ctn ul li { width: 33%;}
}
@media (max-width: 641px) {
	#shop .ctn ul li { width: 50%;}
}
@media (max-width: 481px) {
	#shop:after { width: 120px; height: 200px;}
	#shop .inner-sct { padding: 20px 0 240px;}
	#shop .tit { margin-bottom: 30px;}
	#shop .tit p { font-size: 12px; letter-spacing: 0.1rem;}
	#shop .ctn ul { margin: 0 auto 10px;}
	#shop .ctn ul li { padding: 7px;}
	#shop .ctn ul li a { padding: 8px 0; border-radius: 4px; box-shadow: 0 0 3px #fff; font-size: 13px;}
	#shop .ctn p { font-size: 10px; text-align: right;}
	#shop .copy { padding: 0 12px;}
	#shop .copy p { font-size: 9px; letter-spacing: 0rem;}
}



/* aside */
.sns { background: #ddedfb;}
.sns .inner { width: 90%; margin: 0 auto; padding: 30px 0;}
.sns p { margin-bottom: 25px; color: #285077; font-size: 22px; letter-spacing: 0.2rem; text-align: center;}
.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: 55px; margin: 0 auto;}
.sns ul li a img { width: 100%;}
@media (max-width: 641px) {
	.sns { padding: 20px 0;}
}
@media (max-width: 481px) {
	.sns .inner { padding: 15px 0;}
	.sns p { margin-bottom: 20px;}
	.sns ul li { max-width: 80px;}
	.sns ul li a { max-width: 50px;}
}

#ft .ft-logo { background: linear-gradient(90deg,#d7dadc, #e3e7e9, #dce1e4);}