@charset "utf-8";

.wrap { position: relative; padding-top: 240px;}
@media (max-width: 801px) {
	.wrap { padding-top: 180px;}
}
@media (max-width: 481px) {
	.wrap { padding-top: 120px;}
}
#hd .menu ul.nav li.index { display: none;}

#ft p.note { display: none;}

.hd-logo { width: 30%; max-width: 150px; position: absolute; left: 20px; top: 20px;}
.hd-logo a { display: block;}
.hd-logo a img { width: 100%; fill: #fff; filter: drop-shadow(0 0 6px #36A6ED);}

#shop-hd .inner { position: relative; padding-bottom: 250px; background: url('../img/bg/ttl.png') no-repeat 50% 0;}
#shop-hd .ttl { margin-bottom: 180px; padding-top: 20px;}
#shop-hd .ttl h2 { text-align: center;}
#shop-hd .ttl h2 img { width: 92%; max-width: 880px;}
#shop-hd .ttl h2 img.sp { display: none;}
#shop-hd ul { position: relative; width: 92%; max-width: 880px; margin: 0 auto; font-size: 0; text-align: center;}
#shop-hd ul:after { content: ''; display: block; width: 2px; height: 60px; background: #fff;
 position: absolute; left: 50%; top: 0;
 box-shadow: 0 0 8px #61C5FC;
}
#shop-hd ul li { display: inline-block; width: 50%; font-size: 42px; font-weight: 700;}
#shop-hd ul li a { position: relative; display: inline-block; padding-right: 65px; color: #fff; text-shadow: 0 0 12px #61C5FC; text-decoration: none;}
#shop-hd ul li a:after { content: ''; display: block; width: 50px; height: 50px;
 background: url('../img/arw-L.svg') no-repeat 50% 50% / 100% auto; border: solid 3px #fff; border-radius: 50%;
 box-shadow: -2px 2px 8px #90cdef;
 position: absolute; right: 0; top: 50%; transform: translate(0,-50%) rotate(-90deg);
}
@media (max-width: 801px) {
	#shop-hd .ttl { margin-bottom: 120px;}
	#shop-hd ul li { font-size: 32px;}
}
@media (max-width: 641px) {
	#shop-hd .inner { padding-bottom: 100px; background: none;}
	#shop-hd .ttl { margin-bottom: 0px;}
	#shop-hd .ttl h2 img.pc { display: none;}
	#shop-hd .ttl h2 img.sp { display: block; width: 100%;}
	#shop-hd ul:after { height: 100%;}
	#shop-hd ul li a { padding: 0;}
	#shop-hd ul li a:after { position: relative; left: auto; top: auto; transform: translate(0,0) rotate(-90deg);
	 margin: 0 auto;
	}
	#shop-hd ul li a span { display: block; margin: 0 auto 8px;}
}
@media (max-width: 481px) {
	#shop-hd .inner { padding-bottom: 80px;}
	#shop-hd ul li { font-size: 21px;}
	#shop-hd ul li a:after { width: 30px; height: 30px; border-width: 2px; box-shadow: -2px 2px 5px #90cdef;}
	#shop-hd ul li a span { margin: 0 auto 5px;}
}



#online .inner-sct { padding: 40px 0 280px;}
#online .stl { margin-bottom: 160px;}
#online .stl h2 { text-align: center;}
#online .stl h2 img { width: 88%; max-width: 780px;}
#online .stl h2 img.sp { display: none;}

#online .box { width: 94%; max-width: 1000px; margin: 0 auto; overflow: hidden;
 border-radius: 20px; border-top-left-radius: 120px; border-top-right-radius: 120px;
 background: rgba(255, 255, 255, 0.6); box-shadow: 0 0 10px #c3d9e5;
}
#online .box.mb { margin-bottom: 60px;}
#online .box .tit { box-shadow: 0 0 10px #c3d9e5;}
#online .box .tit h3 { text-align: center;}
#online .box .tit h3 img { width: 100%;}
#online .box .tit h3 img.sp { display: none;}
#online .box .inner { padding: 60px 40px;}
#online .box .ctn-3 { display: flex; justify-content: space-between;}
#online .box .item-3{ width: 30%;}
#online .box .ctn-2 { display: flex; justify-content: space-around; width: 100%; max-width: 600px; margin: 0 auto;}
#online .box .item-2{ width: 50%;}
#online .box .item figure { position: relative; width: 100%; margin-bottom: 20px; padding-top: 140%; text-align: center;}
#online .box .item figure img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 50%; }
#online .box .item p.moist { color: #36ACED;}
#online .box .item p.repair{ color: #C7B12C;}
#online .box .item p.hairpack { color: #7570CF;}
#online .box .item p.hairspray{ color: #A864CD;}

#online .box .item .name { height: 9.5em;}
#online .box .item .name p { font-size: 24px; font-weight: 700; line-height: 1.5; text-align: center;}
#online .box .item .name p span { display: block;}
#online .box .item p.amount { margin-bottom: 10px; font-size: 20px; text-align: center;}
#online .box .item hr { width: 92%; height: 0; margin: 0 auto 18px; border: 0px; border-top: solid 2px #36ACED;}
#online .box .item hr.moist { border-color: #36ACED;}
#online .box .item hr.repair{ border-color: #C7B12C;}
#online .box .item hr.hairpack { border-color: #7570CF;}
#online .box .item hr.hairspray{ border-color: #A864CD;}
#online .box .item p.price { margin-bottom: 30px; font-size: 20px; font-weight: 700; text-align: center;}
#online .box .item p.price span { display: block; font-size: 22px;}
#online .box .item .cart form { position: relative; width: 92%; margin: 0 auto; border: solid 1px #fff; border-radius: 18px; overflow: hidden;}
#online .box .item .cart form.cart-1 { background: url('../img/product/cart-1.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 10px #46ACE4;}
#online .box .item .cart form.cart-2 { background: url('../img/product/cart-2.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 10px #B29825;}
#online .box .item .cart form.cart-3 { background: url('../img/product/cart-3.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 10px #945FBF;}
#online .box .item .cart form.cart-4 { background: url('../img/product/cart-4.jpg') no-repeat 0% 50% / cover; box-shadow: 0 0 10px #CE88D2;}
#online .box .item .cart form svg { position: absolute; left: 50%; top: 50%; transform: translate(-82px,-50%); width: 30px; fill: #fff;}
#online .box .item .cart form input[type="submit"] { width: 100%; padding: 10px 0;
 border: none; background: rgba(255,255,255,0);
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-indent: 40px;
}
#online .box .item .cart form.cart-1 input[type="submit"] { text-shadow: 0 0 5px #46ACE4;}
#online .box .item .cart form.cart-2 input[type="submit"] { text-shadow: 0 0 5px #B29825;}
#online .box .item .cart form.cart-3 input[type="submit"] { text-shadow: 0 0 5px #945FBF;}
#online .box .item .cart form.cart-4 input[type="submit"] { text-shadow: 0 0 5px #CE88D2;}
#online .box .item .cart form input[type="submit"]:hover { background: rgba(255,255,255,0.2);}

#online .box .item .cart span { position: relative; display: block; width: 92%; margin: 0 auto; background: radial-gradient(#ccc,#b9b9b9); border: solid 1px #fff; border-radius: 18px; box-shadow: 0 0 10px #b9b9b9; overflow: hidden;}
#online .box .item .cart span svg { position: absolute; left: 50%; top: 50%; transform: translate(-85px,-50%); width: 30px; fill: #fff;}
#online .box .item .cart span em { display: block; width: 100%; padding: 10px 0;
 border: none; background: rgba(255,255,255,0);
 color: #fff; font-size: 18px; font-weight: 700; text-align: center; text-indent: 40px; text-shadow: 0 0 8px #b9b9b9;
}

@media (max-width: 801px) {
	#online .inner-sct { padding: 40px 0 120px;}
	#online .box .tit h3 img.pc { display: none;}
	#online .box .tit h3 img.sp { display: block;}
	#online .box .ctn-3 { flex-wrap: wrap;}
	#online .box .item-3{ width: 50%;}
	#online .box .item .name { height: 8em;}
	#online .box .item .name p { font-size: 20px;}
	#online .box .item p.amount { font-size: 18px;}
	#online .box .item p.price { font-size: 18px;}
	#online .box .item p.price span { font-size: 20px;}
}
@media (max-width: 641px) {
	#online .stl { margin-bottom: 120px;}
	#online .stl h2 img.pc { display: none;}
	#online .stl h2 img.sp { display: block; margin: 0 auto;}
	#online .box { border-radius: 12px; border-top-left-radius: 100px; border-top-right-radius: 100px;}
}
@media (max-width: 481px) {
	#online .inner-sct { padding: 20px 0 80px;}

	#online .stl { margin-bottom: 60px;}
	#online .box { border-top-left-radius: 60px; border-top-right-radius: 60px;}
	#online .box.mb { margin-bottom: 40px;}
	#online .box .inner { padding: 40px 15px;}
	#online .box .item figure { padding-top: 100%;}
	#online .box .item figure img { width: 40%;}
	#online .box .item .name { height: 5.5em;}
	#online .box .item .name p { font-size: 14px;}
	#online .box .item p.amount { margin-bottom: 8px; font-size: 13px;}
	#online .box .item p.price { margin-bottom: 20px; font-size: 13px;}
	#online .box .item p.price span { font-size: 14px;}
	#online .box .item hr { margin: 0 auto 12px; border-width: 1px;}

	#online .box .item .cart form { border-radius: 12px; border-width: 0.5px; font-size: 12px;}
	#online .box .item .cart form.cart-1 { box-shadow: 0 0 4px #46ACE4;}
	#online .box .item .cart form.cart-2 { box-shadow: 0 0 4px #B29825;}
	#online .box .item .cart form.cart-3 { box-shadow: 0 0 4px #945FBF;}
	#online .box .item .cart form.cart-4 { box-shadow: 0 0 4px #CE88D2;}

	#online .box .item .cart form svg { transform: translate(-55px,-50%); width: 21px;}
	#online .box .item .cart form input[type="submit"] { padding: 10px 0; font-size: 12px; text-indent: 25px;}

	#online .box .item .cart span { border-radius: 12px; border-width: 0.5px; box-shadow: 0 0 6px #b9b9b9;}
	#online .box .item .cart span svg { transform: translate(-55px,-50%); width: 21px;}
	#online .box .item .cart span em { padding: 10px 0; font-size: 12px; text-indent: 20px;}

}


#store .inner-sct { padding: 40px 0 120px;}
#store .stl { margin-bottom: 60px;}
#store .stl h2 { text-align: center;}
#store .stl h2 img { width: 88%; max-width: 780px;}
#store .stl h2 img.sp { display: none;}
#store .ctn { width: 92%; max-width: 920px; margin: 0 auto;}
#store .ctn ul { width: 100%; margin: 0 auto 60px; font-size: 0;}
#store .ctn ul li { display: inline-block; width: 33.333334%; padding: 10px; font-size: 22px;}
#store .ctn ul li a { display: block; padding: 15px 0;
 background: rgba(255,255,255,0.6); border: solid 1px #36ACED; border-radius: 15px;
 box-shadow: 0 0 10px #90cdef, 0 0 10px inset #90cdef;
 color: #46ACE4; font-weight: 700; text-align: center; text-decoration: none;
}
#store .ctn p { text-align: center;}
#store .ctn p img { width: 60%; max-width: 400px;}
@media (max-width: 801px) {
	#store .ctn ul li { padding: 8px; font-size: 18px;}
}
@media (max-width: 641px) {
	#store .stl h2 img.pc { display: none;}
	#store .stl h2 img.sp { display: block; margin: 0 auto;}
	#store .ctn ul li { width: 50%; font-size: 18px;}
}
@media (max-width: 481px) {
	#store .stl { margin-bottom: 40px;}
	#store .ctn ul { margin: 0 auto 40px;}
	#store .ctn ul li { padding: 5px; font-size: 13px;}
	#store .ctn ul li a { border-radius: 10px; box-shadow: 0 0 6px #90cdef, 0 0 6px inset #90cdef;}
}