@charset "utf-8";

.nopc { display: none; }
.nosp { display: inline-block; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease 0s; }
sup { font-size: 50%; vertical-align: middle; color: #3a3a39; }
sup.ca { margin-left: -1.0em; }

@media screen and (max-width:768px) {
	.nosp { display: none; }
	.nopc { display: inline-block; }
	sup { font-size: 70%; }
}

/* --------------------------------------------------------------------------
   kv
-------------------------------------------------------------------------- */

.kv {
	position: relative; width: 100%; height: 0; padding: 0 0 56.25%;
	background: center/cover no-repeat url(../image/kv.jpg);
}
.kv h2 { position: absolute; bottom: 10.5%; left: 35%; width: 21.6%; }
.kv h2 span {
	display: block; width: 100%; height: 0; padding: 0 0 35.6%;
	background: center/cover no-repeat url(../image/h2.png);
	text-indent: 100%; white-space: nowrap; overflow: hidden;
}
.kv .logo { position: absolute; bottom: 3.5%; left: 35%; width: 14.6%; }
.kv .logo span {
	display: block; width: 100%; height: 0; padding: 0 0 17.4%;
	background: center/cover no-repeat url(../image/logo_w.png);
	text-indent: 100%; white-space: nowrap; overflow: hidden;
}
.kv2 { background: #ddd8d4; }
.kv2 i {
	display: block; width: 100%; height: 0; padding: 0 0 63%;
	background: center/cover no-repeat url(../image/kv2.jpg?v=1);
}
section { color: #3a3a39; }
section * img { width: 100%; }
section * { box-sizing: border-box; }
#pageTop { background: transparent; }

@media screen and (min-width:769px) {
	.kv, section { min-width: 1200px; }
	section .parrafo { width: 1000px; margin: 0 auto; padding: 136px 0 0; }
}
@media screen and (max-width:768px) {
	.kv { padding: 0 0 176%; background-image: url(../image/kv_s.jpg); }
	.kv h2 { bottom: 36%; left: 53%; width: 37.7%; }
	.kv .logo { bottom: 2%; left: 3.5%; width: 40%; }
	.kv2 i { padding: 0 0 140%; background-image: url(../image/kv2_s.jpg); }
	section { width: 100%; overflow: hidden; }
	section .parrafo { width: 90%; margin: 0 auto; padding: 60px 0 0; }
}

/* --------------------------------------------------------------------------
   Prologue
-------------------------------------------------------------------------- */

#prologue { background: #ddd8d4; }
#prologue h2 { margin: 0 auto 72px; font: 300 5.1rem/1.5 'Noto Serif JP'; letter-spacing: .08em; }
#prologue p { font: 300 2.2rem/3.0 'Noto Serif JP'; letter-spacing: .1em; }
#prologue .movie { width: 1000px; margin: 0 auto; padding: 136px 0 0; }
#prologue .movie p { position: relative; width: 100%; height: 0; padding: 0 0 56.25%; }
#prologue .movie #mov { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#epilogue { padding: 120px 0 0; background: #ddd8d4; }
#epilogue .logo { width: 440px; margin: 0 auto; text-align: center; }
#epilogue h2 { font: 300 1.8rem/5.0 'Noto Serif JP'; }

@media screen and (max-width:768px) {
	#prologue .parrafo { width: 80%; }
	#prologue h2 { margin: 0 auto 48px; font-size: 3.0rem; }
	#prologue p { font-size: 1.5rem; font-weight: 400; letter-spacing: .05em; font-weight: 500; }
	#prologue .movie { width: 100%; padding: 60px 0 0; }
	#epilogue { padding: 48px 0 0; }
	#epilogue .logo { width: 80%; }
	#epilogue h2 { font-size: 1.4rem; font-weight: 500; }
}

/* --------------------------------------------------------------------------
   Effect
-------------------------------------------------------------------------- */

#efecto { background: linear-gradient(#ddd8d4 70%,#b4ada4); text-align: center; }
#efecto .parrafo { padding: 0; }
#efecto .ttl { display: inline-block; margin: 0 0 20px; padding: 136px 0 0; }
#efecto .ttl dt { width: 100px; }
#efecto .ttl dd {
	margin: -100px 0 0 100px; 
	text-align: left; font: 300 4.0rem/1.5 'Noto Serif JP'; letter-spacing: .08em; 
}
#efecto .ttl dd span { display: block; padding-left: 0.75em; font-size: 75%; }
#efecto .ttl dd .subttl { display: block; margin-left: 0.65em; }
#efecto .ttl dd .subttl span {
	display: inline-block; margin: 16px auto 50px; padding: 0 .5em; border: solid 1px #3a3a39;
	font: 300 2.0rem/2.4 'Noto Serif JP'; 
}
#efecto ul {
	margin: 0 0 40px; padding: 80px 0; background: #fff; border-radius: 18px;
	box-shadow: 3.5px 3.5px 2px rgba(0,0,0,.1);
}
#efecto ul:last-of-type { margin: 0; }
#efecto li { width: 400px; }
#efecto li h3 { font: 300 4.0rem/1.5 'Noto Serif JP'; }
#efecto li h4 {
	margin: 10px 0; border-bottom: solid 1px #3a3a39; font: 300 2.7rem/1.8 'Noto Serif JP';
}
#efecto li p { font: 300 1.8rem/1.8 'Noto Serif JP'; }
#efecto li .kome { margin: 8px 0 0; font: 300 1.15rem/1.5 'Noto Serif JP'; }

@media screen and (min-width:769px) {
	#efecto ul { display: flex; justify-content: space-around; align-items: center; }
	#efecto ul.rside { flex-direction: row-reverse; }
}
@media screen and (max-width:768px) {
	#efecto .ttl { min-height: 14vw; padding: 60px 0 0; }
	#efecto .ttl dt { width: 14vw; }
	#efecto .ttl dd { margin: -14vw 0 0 14vw; font-size: 2.0rem; }
	#efecto .ttl dd .subttl span { margin: 16px auto 28px; font-size: 1.3rem; }
	#efecto ul { display: block; margin: 0 auto 28px; padding: 28px 2vw 2vw; }
	#efecto li:first-child { width: 96%; margin: 0 auto 20px; }
	#efecto li:last-child { width: 100%; }
	#efecto li h3 { font-size: 2.8rem; }
	#efecto li h4 { font-size: 2.0rem; }
	#efecto li p { font-size: 1.3rem; font-weight: 500; }
	#efecto li .kome { padding-left: 1.8em; text-align: left; text-indent: -1.8em; }
}

/* --------------------------------------------------------------------------
   products
-------------------------------------------------------------------------- */

#producto {
	padding: 0 0 120px;
	background: linear-gradient(175deg,#b4ada4 10%,#ddd8d4 40%,#b4ada4 80%,#ddd8d4);
}
#producto h2 { margin: 0 0 80px; font: 5.0rem/1.5 'Outfit'; text-align: center; }
#producto ul {
	margin: 0 0 40px; padding: 36px 0; background: #fff; border-radius: 18px;
	box-shadow: 3.5px 3.5px 2px rgba(0,0,0,.1);
}
#producto ul:last-of-type { margin: 0; }
#producto li .name { font: 300 1.2rem/1.5 'Noto Sans JP'; }
#producto li h3 { font: 300 4.5rem/1.5 'Noto Serif JP'; }
#producto li h3 span { font-size: 75%; }
#producto li h3.b1 { width: 58%; margin: 12px 0; }
#producto li h3.b1 span {
	display: block; width: 100%; height: 0; padding: 0 0 21.3%;
	background: center/cover no-repeat url(../image/h3.svg);
	text-indent: 150%; white-space: nowrap; overflow: hidden; font-size: 0; 
}
#producto li .num { font: 300 1.6rem/1.5 'Noto Sans JP'; }
#producto li h4 { margin: 16px 0 20px; font: 1.8rem/1.5 'Noto Serif JP'; }
#producto li .wind { display: flex; }
#producto li .wind p:first-child {
	display: inline-block; padding: 0 1em; background: #f7f7f7; border: solid 1px #81796d;
	border-radius: 30px 0 0 30px; font: 500 1.4rem/1.8 'Noto Sans JP'; color: #81796d;
	text-align: center;
}
#producto li .wind p:last-child {
	display: inline-block; padding: 0 .6em; background: #81796d; border: solid 1px #81796d;
	border-radius: 0 30px 30px 0; font: 500 1.8rem/1.4 'Noto Sans JP'; color: #fff;
}
#producto li .wind p:last-child span { font-size: 75%; }
#producto li .wind p:last-child .kome {	display: inline-block; margin-left: 10px; font-size:60%; }
#producto li .uno {
	display: flex; justify-content: space-around; align-items: center;
	margin: 20px 0; padding: 10px 0; background: #f7f7f7; border-radius: 12px;
	box-shadow: 3px 3px 3px rgba(0,0,0,.3);
}
#producto li .uno dt { display: block; width: 116px; }
#producto li .uno dd { width: 220px; text-align: center; }
#producto li .uno h5 {
	margin: 0 0 6px; padding: 0 0 6px; border-bottom: solid 1px #3a3a39;
	font: 300 1.35rem/1.5 'Noto Serif JP'; 
}
#producto li .uno p { font: 300 1.1rem/1.5 'Noto Sans JP'; }
#producto li .dos { display: flex; justify-content: space-between; margin: 0 0 20px; }
#producto li .dos div {
	width: 164px; border-radius: 12px 12px 13px 13px; background: #f7f7f7;
	box-shadow: 3px 3px 3px rgba(0,0,0,.3);
}
#producto li .dos p { padding: 10px 0; font: 300 1.35rem/1.6 'Noto Serif JP'; text-align:center; }
#producto li .dos p span { display: block; font-size: 80%; }
#producto li .dos img { display: block; border-radius: 0 0 12px 12px; }
#producto li .detail {
	display: flex; justify-content: space-between; align-items: center; text-align: center;
}
#producto li .detail .cost { width: 180px; }
#producto li .detail .cost i {
	display: block; width: 100%; height: 0; margin: 0 auto; padding: 0 0 16.4%;
	background: center/contain no-repeat url(../image/cocoro.png);
	text-indent: 100%; white-space: nowrap; overflow: hidden; vertical-align: middle;
}
#producto li .detail .cost p { font: 500 2.4rem/1.5 'Noto Sans JP'; }
#producto li .detail .cost p span { font-size: 52%; }
#producto li .detail a {
	display: block; width: 160px; border: solid 2px #3a3a39; font: 500 1.2rem/2.0 'Noto Sans JP';
}
#producto li .detail a:hover { background: #3a3a39; color: #fff; text-decoration: none; }

@media screen and (min-width:769px) {
	#producto ul { display: flex; justify-content: space-around; align-items: center; }
	#producto li:first-child { width: 420px; }
	#producto li:last-child { width: 360px; }
}
@media screen and (max-width:768px) {
	#producto { padding: 0 0 48px; }
	#producto h2 { margin: 0 0 30px; font-size: 2.6rem; }
	#producto ul { margin: 0 auto 24px; padding: 12px 4% 24px; }
	#producto li .name { font-weight: 400; }
	#producto li .uno dt { width: 30%; }
	#producto li .uno dd { width: 66%; }
	#producto li .uno h5 { font-size: 1.25rem; font-weight: 500; }
	#producto li .uno p { font-size: 1.2rem; font-weight: 400; }
	#producto li .dos div { width: 49%; }
	#producto li .dos p { font-size: 1.3rem; font-weight: 500; }
	#producto li .detail .cost { width: 54%; }
	#producto li .detail a { width: 40%; }
}

/* --------------------------------------------------------------------------
   cautions
-------------------------------------------------------------------------- */

#caution { padding: 100px 0; font: 300 1.6rem/1.8 'Noto Serif JP'; }
#caution .dia li { position: relative; padding-left: 1.2em; }
#caution .dia li::before { content: '◆'; position: absolute; top: 0; left: 0; font: inherit; }
#caution .kome { margin: 1.0em 0 1.0em 1.5em; }
#caution .num { margin: 0 0 1.0em; }
#caution .num li { margin-left: 1.8em; counter-increment: cnt; text-indent: -1.8em; }
#caution .num li::before { content: "※"counter(cnt)" "; }

@media screen and (max-width:768px) {
	#caution { padding: 48px 0; font-size: 1.4rem; font-weight: 500; }
}

/* --------------------------------------------------------------------------
   animation
-------------------------------------------------------------------------- */

.din { opacity: 0; transform: translateY(-30px); }
.din.active {
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
	opacity: 1; transform: translateY(0);
}
.rin { opacity: 0; transform: translateX(-30px); }
.rin.active {
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
	opacity: 1; transform: translateX(0);
}
.lin { opacity: 0; transform: translateX(30px); }
.lin.active {
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 1s ease 0s;
	opacity: 1; transform: translateX(0);
}