@charset "utf-8";
/* CSS Document */
/* =============================================== */
/* moon lower
-------------------------------------------------- */
/* common
-------------------------------------------------- */
main { overflow-x:hidden;}
footer { background: #fff;}

.ttl--area h1 { 
	position: relative; z-index: 2;
	transform:translateY(-240%);	
	font-family: goldenbook, serif; text-transform: uppercase;
	font-size:48px; 
	text-align: center; line-height:1.7; letter-spacing: .24em;
	color: #fff; text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}
.ttl--area h1 small { display: block; font-size:36px;}
.product--about p { 
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size:1.6em; line-height: 1.8; letter-spacing: .14em; text-align: center;
}
.product--about p + p { margin-top: 1.8em;}

@media all and (min-width: 769px) {
	
	.product main { margin-top:-8vw;}
	
	.product--about .inner { max-width:1440px; width:92%; margin: 0 auto;}
 }
@media all and (min-width: 1441px) {
	.ttl--area h1 { transform:translateY(-300%); }
}
@media all and (max-width: 768px) {
	
	.product main { margin-top:-30%;}
	
	.ttl--area h1 { 
		transform:translateY(-170%);
		font-size:36px; line-height: 1.4;
	}
	.ttl--area h1 small { margin-top:4px; font-size:25px;}
	.product--about p { font-size:1.4em;}
}
@media all and (max-width: 480px) {}
@media print {}

.moon--buy { display: none;}



/* product--frag
-------------------------------------------------- */
.product--frag { position: relative; nax-width:100%; margin:0 auto;}
.product--frag::before { 
	content:''; 
	position: absolute; left: 0; bottom:0; 
	width:100%; height: 336px;
	background: rgba(255, 255, 255, .8);
}
.product--frag--inner { position: relative;}
.product--frag--inner p {
	font-size:1.5em; line-height: 1.5; letter-spacing: 0.14em;
}

@media all and (min-width: 769px) {
	.product--frag { width:1440px; margin-bottom: 160px; padding:100px 0 60px;}
	.product--frag--inner { 
		display: flex; align-items: flex-end;
		max-width:1120px; margin:0 auto; padding: 0 0 0 1.78571%;
	}
	.product--frag--inner .tri { margin-right: 5.8928%;}
	.product--frag--inner .tri img { max-width:520px;}
	.product--frag--inner .txt { padding-bottom: 10px;}
}
@media all and (max-width: 768px) {
	.product--frag { margin:27% 0 34%;}
	.product--frag--inner { margin-top: 6.4%; text-align: center;}
	.product--frag--inner .txt { margin-top: 8%;}
	.product--frag--inner p {
		font-size:1.4em; line-height: 1.6;
	}
	
	.product--frag::before { bottom:-8%;}
}
@media all and (max-width: 480px) {}
@media print {}


/* product--item
-------------------------------------------------- */
.product--item--inner {}
.product--item--inner h4 {
	margin-bottom: .75em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: 600;
	line-height: 1.5;
}
.product--item--inner h5 { margin-bottom: 1.1em; font-size:1.8em;}

.product--item--inner .photo .item--bg { position: relative;}
.product--item--inner .photo .item { position: absolute; bottom:-40px;}

.product--item--inner .txt .hdwt { position: absolute; right:0; top:0;}
.product--item--inner .txt p { margin-bottom: 1.5em; font-size:1.6em;}

.product--item--inner .txt .buy--btn,
.product--item--inner .txt .buy--txt { position: relative;}

.product--item--inner .buy--btn_01:hover { cursor: pointer;}

.product--item--inner .txt .buy--btn_01 .btn--cart {
	position: relative; 
	display: block;
	max-width:280px;
	font-family: goldenbook, serif;
	font-weight: 400;
	font-style: normal;
	font-size:1.4em;
	line-height: 48px;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.24em;
	color:  #5f5f5f;	 
	border:1px solid #5f5f5f;
	border-radius: 30px;
	background: #fff;
}
.product--item--inner .txt .btn--cart::before {
	content:''; position: absolute; left:4%; top:50%; transform: translateY(-50%);
	width:20px; height:21px;
	background: url("../img/common/icn_cart.svg") left center no-repeat;
	background-size:100% auto;
	transition:.4s all;
}
.product--item--inner .txt .btn--cart::after {
	content:''; position: absolute; right:8%; top:50%; transform: translateY(-50%);
	width:10px; height:8px;
	background: url("../img/common/arrow_01.svg") right center no-repeat;
	background-size:100% auto;
	transition:.4s all;
}
.product--item--inner .txt .moon--buy { width:280px; right: auto;}

.product--item--inner .txt .ul--moon--buy::before { right: 50%; transform: translateX(50%);}
.product--item--inner .txt .ul--moon--buy.afTxt::before {}

.product--item--inner .buy--txt { display: flex;}
.buy--btn_01 strong { 
	display: inline-block;	margin: 1em 3em 0 0; 
	font-size:1.4em; font-weight: normal; text-decoration: underline;
}
.buy--btn_01 strong:hover { cursor: pointer;}

.ul--situation {
	display: flex;
	flex-wrap: wrap;
	margin: 25px 0 0 5px;
}
.ul--situation li { display: flex; align-items: center; width:55%; margin-bottom: 8px;
	font-size:1.3em; letter-spacing: 0.02em;}
.ul--situation li img { width:38px; margin-right: 12px;}

@media all and (min-width: 769px) {
	.product--item { padding-bottom: 105px;}
	.product--item--inner {
		position: relative;
		display: flex; 
		max-width:1120px; margin:85px auto 0;
	}	
	.product--item--inner .txt::after {
		content:''; position: absolute; right:0; left: 37%; bottom:0; top:25px;
		background: rgba(255, 255, 255, .8);
		z-index: -1;
	}
	.product--item--inner:nth-of-type(even) .txt::after {
		content:''; position: absolute; left:0; right: 37%; bottom:0; top:25px;
		background: rgba(255, 255, 255, .8);
		z-index: -1;
	}
	.product--item--inner:nth-of-type(even) { flex-direction: row-reverse;}
	
	.product--item--inner .photo { width:41%; margin-right: 95px;}
	.product--item--inner:nth-of-type(even) .photo { margin-right: 0;}
	.product--item--inner .photo .bg { width:455px;}
	
	.product--item--inner .txt { padding: 95px 0 50px;}
	.product--item--inner:nth-of-type(even) .txt { width:55.2%; padding-left: 66px;}
	
	.product--item--inner h4 { font-size:3em;}
	
	.ul--situation li:nth-child(odd) { width:45%;}
	
	.buy--btn_01 strong { white-space: nowrap;}
	
	.item_01 .photo .item { width:136px; right: 0; transform: translateX(34%);}
	.item_01 .txt .hdwt { max-width:384px; transform: translate(20%, 0);}
	
	.item_02 .photo .item { width:99px; right: auto; left: 0; bottom:-50px; transform: translateX(-50%);}
	.item_02 .txt .hdwt { max-width:405px; right: 50%; transform: translate(20%, -29%);}
	
	.item_03 .photo .item { width:290px; right: 0; bottom:-50px; transform: translateX(13%);}
	.item_03 .txt .hdwt { max-width:425px; transform: translate(13%, -46%);}
	
	.item_04 .photo .item { width:100px; right: auto; left: 0; bottom:-90px; transform: translateX(-50%);}
	.item_04 .txt .hdwt { max-width:248px; right: 50%; transform: translate(15%, -20%);}
	
	.item_05 .photo .item { width:306px; right: 0; bottom:-65px; transform: translateX(14%);}
	.item_05 .txt .hdwt { max-width:330px; transform: translate(10%, 0);}
	
	
	.product--item--inner .txt .moon--buy.afTxt02 { left: 150px;}
	
	
}
@media all and (max-width: 768px) {
	
	.product--item--inner { padding-top: 36.8%;}
	.product--item--inner .txt::after {
		content:''; position: absolute; right: -4.5%; left: -4.5%; bottom: -5.4%; top:-20%;
		background: rgba(255, 255, 255, .8);
		z-index: -1;
	}
	
	.product--item--inner > div { margin:0 5%;}
	
	.product--item--inner .txt { position: relative; padding-top: 9.1%;}
	.product--item--inner h4 { font-size:2.3em;}
	.product--item--inner h5 { font-size:1.4em;}
	.product--item--inner .txt p { font-size:1.2em;}
	
	.product--item--inner .txt .buy--txt .ul--moon--buy::before { right: 75%;}
	
	.product--item--inner .txt .moon--buy.afTxt02 { right: 0;}
	.product--item--inner .txt .buy--txt .ul--moon--buy.afTxt::before { right: 45%;}
	
	.product--item--inner .photo .item { bottom:6.4%;}
	
	.item_01 .photo .item { width:32.6%; right: 50%; transform: translateX(50%);}
	.item_01 .txt .hdwt { max-width:56%; transform: translate(0, 0) rotate(9deg);}
	
	.item_02 .photo .item { width:24.2%; right: 50%; transform: translateX(50%);}
	.item_02 .txt .hdwt { max-width:86%; right: 0; transform: translate(2%, -43.9%);}
	
	.item_03 .photo .item { width:68.4%; right: 50%; transform: translateX(50%);}
	.item_03 .txt .hdwt { max-width:none; width:106%; right: 0; transform: translate(2%, -43%) rotate(-1.3deg);}
	
	.item_04 .photo .item { width:24.9667%; right: 50%; transform: translateX(50%);}
	.item_04 .txt .hdwt { max-width:47%; right: 0; transform: translate(-5%, -28%) rotate(10.5deg);}
	
	.item_05 .photo .item { width:67.466667%; right: 50%; transform: translateX(50%);}
	.item_05 .txt .hdwt { max-width: 89%; right: 0; transform: translate(2%, -39%);}
	
	.ul--situation li { width:42.5%; font-size:10px;}
	.ul--situation li img { width:26px; margin-right: 5px;}
	
	.ul--situation li:nth-child(even) { width:55%;}
	
	.product--item--inner .buy--txt {}
	.buy--btn_01 strong { margin-right: 1.5em; font-size:1.2em; white-space: nowrap;}
}
@media all and (max-width: 480px) {}
@media print {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}


/* ul--other
-------------------------------------------------- */
@media all and (min-width: 769px) {
	.other--area {}
	.ul--other { 
		display: flex; gap:10px;
		max-width:880px; margin:0 auto;
	}
	.ul--other li { width:50%;}
}
@media all and (max-width: 768px) {
	.other--area {}
	.ul--other { 
		display: flex; gap:4px;
		margin:20% 8% 8%;
	}
	.ul--other li { width:50%;}
}
@media all and (max-width: 480px) {}
@media print {}


/* shop--area
-------------------------------------------------- */
@media all and (min-width: 769px) {
	.shop--area { 
		margin:65px auto 0; padding:115px 0 80px;
		background: url("../img/products/bg_shop_low@2x.png") center top no-repeat;
		background-size:100% 100%;		
	}
}
@media all and (max-width: 768px) {
	.shop--area { 
		margin:7% auto 0; padding:16% 0 6%;
		background: url("../img/products/bg_shop_low_sp@2x.png") center top no-repeat;
		background-size:100% 100%;
	}
}
@media all and (max-width: 480px) {}
@media print {}


/* =============================================== */
/* magic
-------------------------------------------------- */
/* ttl--area
-------------------------------------------------- */
.ttl--area { position: relative;}

.magic main h4 { color: #8745a1;}
.magic main .ul--situation li { color: #cd689f;}

@media all and (min-width: 769px) {
	body.magic {
		background: url("../img/products/masic/bg_pc@2x.jpg") center top no-repeat;
		background-size:100% auto;
	}
	.ttl--area h1 img { width:578px;}
	
	.magic .hdwt { max-width:380px; margin-left: -20px;}
}
@media all and (max-width: 768px) {
	body.magic {
		background: url("../img/products/masic/bg_sp@2x.jpg") center top no-repeat;
		background-size:100% auto;
	}
}
@media all and (max-width: 480px) {}
@media print {}


/* =============================================== */
/* blue
-------------------------------------------------- */
/* ttl--area
-------------------------------------------------- */
.ttl--area { position: relative;}

.blue main h4 { color: #167fb6;}
.blue main .ul--situation li { color: #0391bf;}

@media all and (min-width: 769px) {
	body.blue {
		background: url("../img/products/blue/bg_pc@2x.jpg") center top no-repeat;
		background-size:100% auto;
	}
	.ttl--area h1 img { width:578px;}
	
	.blue .hdwt { max-width:380px; margin-left: -20px;}
}
@media all and (max-width: 768px) {
	body.blue {
		background: url("../img/products/blue/bg_sp@2x.jpg") center top no-repeat;
		background-size:100% auto;
	}
}
@media all and (max-width: 480px) {}
@media print {}


/* =============================================== */
/* green
-------------------------------------------------- */
/* ttl--area
-------------------------------------------------- */
.ttl--area { position: relative;}

.green main h4 { color: #03a7bf;}
.green main .ul--situation li { color: #14c3bb;}

@media all and (min-width: 769px) {
	body.green {
		background: url("../img/products/green/bg_pc@2x.jpg") center top no-repeat;
		background-size:100% auto;
	}
	.ttl--area h1 img { width:578px;}
	
	.green .hdwt { max-width:380px; margin-left: -20px;}
}
@media all and (max-width: 768px) {
	body.green {
		background: url("../img/products/green/bg_sp@2x.jpg") center top no-repeat;
		background-size:100% auto;
	}
}
@media all and (max-width: 480px) {}
@media print {}

/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}


/* 
-------------------------------------------------- */
@media all and (min-width: 769px) {}
@media all and (max-width: 768px) {}
@media all and (max-width: 480px) {}
@media print {}