@charset "UTF-8";
#contents {  margin: 0 auto; }
#lgzcontents	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0; margin: 0; letter-spacing:.1em; font-style: normal; line-height:1.75; -webkit-text-size-adjust:100%; color:#323232; -webkit-font-smoothing: antialiased; }
#lgzcontents *	{  font-feature-settings: normal; font-family: "Untitled Sans", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Noto Sans JP", Meiryo, sans-serif; font-weight: 700; }
#lgzcontents i	{ letter-spacing:.05em!important; font-weight: 700; }
#lgzcontents img, 
#lgzcontents picture	{ width: 100%; vertical-align: bottom; line-height: 1;  }
#lgzcontents ul:before,
#lgzcontents ol:before,
#lgzcontents dl:before, 
#lgzcontents ul:after, 
#lgzcontents ol:after, 
#lgzcontents dl:after	{ display: none!important; }
#lgzcontents img	{ width: 100%; vertical-align: bottom; line-height: 0; }
#lgzcontents a { transition: all .3s; color:#323232;}
#lgzcontents a:hover { color:#323232; text-decoration:none;}
#lgzcontents .small {font-size:80%;}
#lgzcontents .center-text	{ text-align: center; }

/* ------------ FADEIN ------------- */
.scrollIn	{ opacity: 0; }
.scrollIn.active	{ transition: opacity 2.4s cubic-bezier(.24,.155,.275,.945); opacity: 1; transition-delay: .2s; }
@keyframes fadein	{ 
	from	{ opacity: 0; }
	to	{ opacity: 1; }
}

/* ------------ HEADER ------------- */
.contheader	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; line-height: 1; background-color: #fff; position: relative; z-index: 5; }
.contheader-inner	{ width: calc(100% - 80px); height: 110px; position: relative; display: -webkit-flex; display: flex; align-items: center; }
.contheader-inner h1	{ width: 100px; line-height: 1; display: -webkit-flex; display: flex; }
.contheader-inner > strong	{ width: 46%; min-width: 636px; position: absolute; top: 40px; right: 0; display: -webkit-flex; display: flex; }
@media (max-width: 960px)	{ 
	.contheader-inner	{ width: calc(100% - 40px); height: 54px; }
	.contheader-inner h1	{ width: 80px; }
	.contheader-inner > strong	{ width: 20.533%; min-width: auto; top: 20px; }
}

/* ------------ MAIN ------------- */
.heroarea	{ width: 100%; display: -webkit-flex; display: flex; position: relative; }
.heroarea > h2	{ position: absolute; width: 55.555%; position: absolute; top: 37.47%; left: 50%; transform: translate(-50%,0); z-index: 4; }
.heroimg	{ width: 50%; aspect-ratio: 103 / 100; position: relative; z-index: 1; overflow: hidden; }
.heroimg::before	{ content:""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 120%; height: 100%; background-color: #fff; z-index: 2; }
.move .heroimg::before	{ left: 102%; right: -2px; width: 0; }

.heroimg picture,
.heroimg img	{ transform:scale(1.15); transition: opacity 0.8s,transform 1.4s cubic-bezier(0.33, 1, 0.68, 1); }
.move .heroimg picture,
.move .heroimg img	{ transform:scale(1.0); }

.heroimg::after	{ content:""; position: absolute; top: 0; left: 0; right: 100%; bottom: 0; width: 0; height: 100%; z-index: 3; transition: all .79s cubic-bezier(0.33, 1, 0.68, 1); }
.heroimg.hero01::after	{ background-color: #fff3ee; }
.heroimg.hero02::after	{ background-color: #ecf1f7; }
.active .heroimg::after	{ right: 0; width: 120%; }
.move .heroimg::after	{ left: 120%; right: -10%; width: 0; }

@media (max-width: 960px)	{ 
	.heroarea	{ flex-wrap: wrap; }
	.heroarea > h2	{ position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
	.heroimg	{ width: 100%; aspect-ratio: 60 / 67; }
}

/* ------------ INTRODUCTION ------------- */
.introduction	{ display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: -1.4em 0 0; position: relative; z-index: 5; }
.introduction > strong	{ text-align: center; font-size: 20px; font-size: clamp(14px, 24px, 1.38vw); line-height: 2; margin: 0 0 6%; }
.introduction > p	{ color:#7d7d7d; text-align: center; font-size: 16px; font-size: clamp(12px, 20px, 1.2vw); line-height: 2; margin: 0 0 20%; }
@media (min-width: 960.99px)	{ 
	.introduction > strong br.sp	{ display: none; }
	.introduction > p br.sp	{ display: none; }
}
@media (max-width: 960px)	{ 
	.introduction	{ margin: -4.4em 0 0; }
	.introduction > strong	{ text-align: left; font-size: 4.6vw; line-height: 2; margin: 0 0 40px; }
	.introduction > p	{ text-align: left; font-size: 3.2vw; line-height: 1.8; margin: 0 0 160px; }
	.introduction > p br.pc	{ display: none; }
}

/* ------------ FEATURES ------------- */
.features	{ width: 100%; display: -webkit-flex; display: flex; background-color: #fff3ee; position: relative; }
.features > h2	{ width: 27.77%; position: absolute; top: -1em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 3; }
.features-inner	{ position: relative; width: 43%; margin: 0 0 0 52%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15% 0 12%; }
.features-inner::before	{ content:""; width: 100%; aspect-ratio: 1 / 1; background-color: #fff; position: absolute; top: -.8em; left: 0; right: 0; border-radius: 50%; z-index: 1; }
.features-inner h3	{ width: 32.25%; margin: 0 0 13%; z-index: 2; }
.features-inner p	{ width: 62.9%; font-size: 18px; font-size: clamp(12px, 22px, 1.26vw); line-height: 2; text-align:justify; z-index: 2; }
@media (min-width: 960.99px)	{ 
	.features .figimg	{ width: 50.41%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 8.75%; z-index: 2; }
}
@media (max-width: 960px)	{ 
	.features	{ flex-direction: column; align-items: center; justify-content: center; padding: 14% 0 20%; }
	.features > h2	{ width: 85.33%; top: -1.2em; }
	.features-inner	{ position: relative; width: 77.333%; margin: 0; padding: 28% 0 12%; }
	.features-inner::before	{ content:""; width: 94%; top: 0; margin: 0 3%; }
	.features-inner h3	{ width: 60.68%; margin: 0 0 32%; }
	.features-inner p	{ width: 100%; font-size: 4vw; }
	.features .figimg	{ width: 77.333%; }
}

/* ------------ CONDITIONING ------------- */
.conditioning	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #ecf1f7; position: relative; }
.conditioning-header	{ position: relative; width: 43%; padding: 20% 0 2%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin: -4% 0 0; }
.conditioning-header::before	{ width: 100%; content:""; aspect-ratio: 1 / 1; background-color: #fff; position: absolute; top: 0; left: 0; right: 0; border-radius: 50%; z-index: 1; }
.conditioning-header > h2	{ width: 64.51%; position: relative; z-index: 2; }
.conditioning-inner	{ width: 85.4%; display: -webkit-flex; display: flex; align-items: center; position: relative; z-index: 2; }
.conditioning-img	{ width: 54.7%; }
.conditioning-txt	{ width: 45.3%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8% 0 0; }
.conditioning-txt > h3	{ width: 47%; line-height: 1; margin: 0 0 8%; }
.conditioning-txt.col3 > h3	{ width: 56%; }
.conditioning-txt > p	{ width: 70.52%; font-size: 18px; font-size: clamp(12px, 22px, 1.26vw); line-height: 2; text-align:justify; }
@media (min-width: 960.99px)	{ 
	.conditioning-img	{ order: 2; }
	.conditioning-txt	{ order: 1; }
	.conditioning-txt.col2 > h3	{ width: 38%; }
	.reflect .conditioning-img	{ order: 1; width: 44%; }
	.reflect .conditioning-txt	{ order: 2; width: 56%; padding: 0 0 5%; }
}
@media (max-width: 960px)	{ 
	.conditioning-header	{ width: 86.666%; padding: 20% 0 14%; margin: 0; }
	.conditioning-header::before	{ width: 89.2%; top: -20%; left: 5.4%; right: 5.4%; }
	.conditioning-header > h2	{ width: 100%; position: relative; z-index: 2; }
	.conditioning-inner	{ width: 100%; flex-direction: column; }
	.conditioning-img	{ width: 100%; }
	.conditioning-txt	{ width: 77.333%; padding: 14% 0 0; margin: 0 0 18%; }
	.conditioning-txt > h3	{ width: 73.54%; margin: 0 0 14%; }
	.conditioning-txt.col3 > h3	{ width: 88.38%; }
	.conditioning-txt > p	{ width: 100%; font-size: 4vw; }
}

.moredetail	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 0 16%; }
.moredetail > p	{ font-size: 10px; }
.morelink	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; margin: 0 0 18px; }
.morelink::before	{ width: 100%; height: 50%; content:""; position: absolute; left: 0; top: 0; right: 0; bottom: 50%; background-color: #ecf1f7; z-index: 1; }
.morelink > a	{ line-height: 1; padding: 1em 3.4em .9em; border: 1px solid #000; border-radius: 200px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: #fff; transition: all .3s; position: relative; z-index: 2; }
.morelink > a:hover	{ background-color: #ecf1f7; }
.morelink > a > span	{ font-size: 14px; font-weight: 700; line-height: 1; }
@media (max-width: 960px)	{ 
	.moredetail	{ margin: 0 0 30%; }
	.morelink > a	{ padding: .7em 2em; }
	.morelink > a > span	{ font-size: 12px; }
}

/* ------------ FAVORITE AREA ------------- */
.favarea	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; background-color: #f2f2f2; }
.favheader	{ width: 100%; display: -webkit-flex; display: flex; justify-content: center; position: relative; margin: 0 0 8%; }
.favheader::before	{ content:""; width: 100%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 50%; background-color: #fff; }
.favheader > h2	{ width: 37.5%; line-height: 1; position: relative; }
.favitems-wrapper	{ width: 73.6%; display: -webkit-flex; display: flex; gap: 0 5%; flex-wrap: wrap; }
.favitems	{ width: 47.5%; margin: 0 0 5%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.favitems > a	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.favitems > a > strong	{ width: 100%; aspect-ratio: 10 / 7; align-items: center; overflow: hidden; border-radius: 3%; line-height: 1; }
.favitems > a > strong img	{ transition: all .3s; }
.favitems > a > b	{ width: 280px; height: 50px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; line-height: 1; border: 1px solid #323232; border-radius: 50px; transform: translateY(-25px); background-color: #fff; transition: all .3s; }
.favitems > a > b i	{ font-size: 16px; line-height: 1; padding: 0; }
.favitems > a:hover > strong img	{ transform:scale(1.1); }
.favitems > a:hover > b	{ background-color: #f2f2f2; }
.favitems > p	{ text-align: center; line-height: 1.5; font-size: clamp(12px, 20px, 1vw); }
@media (min-width: 960.99px)	{ 
	.favitems > p br	{ display: none; }
}
@media (max-width: 960px)	{ 
	.favheader	{ margin: 0 0 16%; }
	.favheader::before	{ height: 80%; bottom: 20%; }
	.favheader > h2	{ width: 77.333%; }
	.favitems-wrapper	{ width: 100%; gap: 0; justify-content: center; }
	.favitems	{ width: 77.33%; margin: 0 0 12%; }
	.favitems > a > b	{ width: 240px; height: 42px; transform: translateY(-21px); }
	.favitems > a > b i	{ font-size: 14px; padding: 2px 0 0; }
	.favitems > p	{ font-size: 14px; }
}

.morebtn	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 80px 0 0; margin: 0 0 130px; }
.morebtn > a	{ width: 420px; height: 62px; line-height: 1; display: -webkit-flex; display: flex; align-items: center; justify-content: center; border: 1px solid #323232; border-radius: 62px; background-color: #fff; transition: all .3s; }
.morebtn > a:hover	{ background-color: transparent; }
.morebtn > a span	{ font-size: 18px; line-height: 1; }
.andarea	{ width: 100%; background-color: #fff; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0 100px; }
.andarea > h2	{ width: 100%; margin: 0 0 20px; position: relative; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }
.andarea > h2::before	{ content:""; width: 100%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 50%; background-color: #f2f2f2; z-index: 1; }
.andarea > h2 > span	{ width: 24.65%; min-width: 355px; line-height: 1; position: relative; z-index: 2; }
.andbtn	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center;  }
.andbtn > a	{ font-size: 14px; line-height: 1; border-bottom: 1px solid #323232; opacity: 1; transition: all .3s; }
.andbtn > a:hover	{ opacity: .5; }
@media (max-width: 960px)	{ 
	.morebtn	{ padding: 40px 0 0; margin: 0 0 90px; }
	.morebtn > a	{ width: 77.333%; height: 52px; }
	.morebtn > a span	{ font-size: 15px; }
	.andarea	{ padding: 0 0 70px; }
	.andarea > h2	{ margin: 0 0 70px; }
	.andarea > h2 > span	{ width: 65%; min-width: auto; }
	.andbtn > a	{ font-size: 11px; }
}

/* ------------ BLOCK ------------- */
@media (max-width: 767.99px)	{ .pconly { display: none!important; } }
@media (min-width: 768px)	{ .pconly { display: inline-block; } }
@media (max-width: 767.99px)	{ .sponly { display: inline-block; } }
@media (min-width: 768px)	{ .sponly { display: none!important; } }