@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho+B1&display=swap');

:root {
	--zoom:1px;
}

#moit{ background:#fdeded; font-family:"Noto Sans JP", serif; font-weight:400; }
#moit .inr{ max-width:630px; margin-left:auto; margin-right:auto; position:relative; }

#moit ul{ display:block; list-style:none; }
#moit ul li{ width:auto; margin:0; text-align:left; }

@media screen and (min-width: 651px) {
	.sp{ display:none; }
	.bt{ min-width:500px; min-height:90px; font-size:28px; line-height:1.2; }
}
@media screen and (max-width: 650px) {
	.pc{ display:none; }
	.bt{ min-width:calc(var(--zoom) * 500); min-height:calc(var(--zoom) * 90); font-size:calc(var(--zoom) * 28); line-height:1.2; }
	:root {
		--zoom:100vw / 630;
	}
}

#moit .lg{ position:absolute; width:calc(var(--zoom) * 250); left:50%; top:0; transform:translateX(-50%); z-index:100; transition:0.3s; }
#moit .lg.fix{ position:fixed; top:0; }

@media screen and (min-width: 651px) {
	#moit .lg.fix{ top:125px; }
}
@media screen and (max-width: 650px) {
}

#moit #s1{ margin-bottom:calc(var(--zoom) * 60); }

#moit #s2{ background:#ffffff; position:relative; padding:calc(var(--zoom) * 150) calc(var(--zoom) * 30) calc(var(--zoom) * 100); }
#moit #s2::before,
#moit #s2::after{ display:block; content:""; width:100%; aspect-ratio:630 / 50; position:absolute; left:0; }
#moit #s2::before{ background:url("../img/moit/bg1.png") no-repeat center/cover; top:0; }
#moit #s2::after{ background:url("../img/moit/bg2.png") no-repeat center/cover; bottom:0; }
#moit #s2 .box1{ border:1px solid #e48fa0; color:#e48fa0; margin-bottom:calc(var(--zoom) * 70); }
#moit #s2 .box1>*{ text-align:center; }
#moit #s2 .box2 h3{
	font-family:"Shippori Mincho B1", serif;
	font-size:calc(var(--zoom) * 34); line-height:1.4; font-weight:bold; text-align:center; color:#6e6c6c;
	margin-bottom:calc(var(--zoom) * 70);
}
#moit #s2 .box2 h3 ruby{ font-size:calc(var(--zoom) * 43); }
#moit #s2 .box2 h3 ruby rt{ font-size:calc(var(--zoom) * 16); line-height:1.0; margin-bottom:calc(var(--zoom) * -16); }

@media screen and (min-width: 651px) {
	#moit #s2 .box1{ padding:50px; }
	#moit #s2 .box1 .t1{ font-size:30px; line-height:1.4; padding-bottom:30px; }
	#moit #s2 .box1 .t2{ font-size:18px; line-height:1.4; }
	#moit #s2 .box1 .t2 strong{ font-size:20px; line-height:1.8; }
}
@media screen and (max-width: 650px) {
	#moit #s2 .box1{ padding:calc(var(--zoom) * 40); }
	#moit #s2 .box1 .t1{ font-size:calc(var(--zoom) * 32); line-height:1.4; padding-bottom:calc(var(--zoom) * 30); }
	#moit #s2 .box1 .t2{ font-size:calc(var(--zoom) * 26); line-height:1.2; }
	#moit #s2 .box1 .t2 strong{ line-height:1.8; }
}

#moit #s3{ background:#fff6f6; padding:calc(var(--zoom) * 60) calc(var(--zoom) * 30) calc(var(--zoom) * 90); }
#moit #s3 .ttl{ text-align:center; margin-bottom:calc(var(--zoom) * 30); }
#moit #s3 .box1{ margin-bottom:calc(var(--zoom) * 95); }
#moit #s3 .box1 .sub{ font-size:calc(var(--zoom) * 34); line-height:1.4; color:#6e6c6c; text-align:center; padding-bottom:calc(var(--zoom) * 40); }
#moit #s3 .box1 .txt{ font-family:"Shippori Mincho B1", serif; font-size:calc(var(--zoom) * 18); line-height:1.4; color:#6e6c6c; padding-bottom:calc(var(--zoom) * 25); }
#moit #s3 .box1 .txt strong{ font-weight:bold; }

#moit #s3 .box2{ margin-bottom:calc(var(--zoom) * 50); }
#moit #s3 .box2 .sub{ font-size:calc(var(--zoom) * 28); line-height:1.4; color:#6e6c6c; text-align:center; padding-bottom:calc(var(--zoom) * 40); }
#moit #s3 .box2 .sub strong{ font-size:calc(var(--zoom) * 34); font-weight:inherit; }

#moit #s3 .box3 .img{ margin-bottom:calc(var(--zoom) * 20); }
#moit #s3 .box3 .t1{ padding-left:calc(var(--zoom) * 30); margin-bottom:calc(var(--zoom) * 60); }
#moit #s3 .box3 .t1 li{
	position:relative; padding-left:calc(var(--zoom) * 30);
	font-size:calc(var(--zoom) * 24); line-height:1.6; color:#6e6c6c;
}
#moit #s3 .box3 .t1 li::before{
	display:inline-block; content:""; background:url("../img/moit/ck_icon.png") no-repeat center/cover;
	width:calc(var(--zoom) * 20); height:calc(var(--zoom) * 18);
	position:absolute; left:0; top:calc(var(--zoom) * 8);
}
#moit #s3 .box3 .t1 span{ display:block; font-size:calc(var(--zoom) * 18); line-height:1.0; color:#6e6c6c; margin-top:calc(var(--zoom) * 6); }
#moit #s3 .box3 .t3{
	display:flex; justify-content:center; align-items:center;
	font-size:calc(var(--zoom) * 34); line-height:1.6; color:#e8a8b4; font-weight:bold; border:2px solid #e8a8b4;
	width:calc(var(--zoom) * 428); height:calc(var(--zoom) * 85); margin:0 auto;
}

@media screen and (min-width: 651px) {
}
@media screen and (max-width: 650px) {
}

#moit #s4{ background:#ffffff; padding:calc(var(--zoom) * 150) calc(var(--zoom) * 30) calc(var(--zoom) * 130);  position:relative; }
#moit #s4::before{
	display:block; content:""; width:100%; aspect-ratio:630 / 50;
	background:url("../img/moit/bg3.png") no-repeat center/cover; position:absolute; top:0; left:0;
}
#moit #s4 .ttl{
	font-family:"Cormorant Garamond", serif; font-size:calc(var(--zoom) * 70); line-height:1.0; color:#6e6c6c; font-weight:700; text-align:center; margin-bottom:calc(var(--zoom) * 60);
}
#moit #s4 .box1{ margin-bottom:calc(var(--zoom) * 100); }
#moit #s4 .box1 .img li:not(:last-child){ margin-bottom:calc(var(--zoom) * 28); }

#moit #s4 .box2{}
#moit #s4 .box2 .img{ margin-bottom:calc(var(--zoom) * 35); }
#moit #s4 .box2 .sub{
	font-size:calc(var(--zoom) * 28); line-height:1.6; color:#333333; font-weight:700; text-align:center;
	margin-bottom:calc(var(--zoom) * 30);
}
#moit #s4 .box2 .sub span{ font-size:calc(var(--zoom) * 16); font-weight:500; }
#moit #s4 .box2 .btn>*{
	display:flex; justify-content:center; align-items:center;
	font-size:calc(var(--zoom) * 28); line-height:1.6; color:#e8a8b4; color:#ea6173;
	width:calc(var(--zoom) * 500); height:calc(var(--zoom) * 90); border:2px solid #ea6173; margin:0 auto;
	transition:0.3s;
}
#moit #s4 .box2 .btn>a:hover{ opacity:0.6; }
#moit #s4 .box2 .btn>*:not(:last-child){ margin-bottom:calc(var(--zoom) * 28); }
#moit #s4 .box2 .btn ._1{ background:#ea6173; color:#ffffff; }
#moit #s4 .box2 .btn ._2{ background:#ffffff; color:#ea6173; }

@media screen and (min-width: 651px) {
}
@media screen and (max-width: 650px) {
}