@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
.search_feature.active, 
.search_styling.active, 
.result_suggest	{ background-color: #fff; position: relative; z-index: 5; }
.search_box	{ z-index: 3; }
.header_caution { height: 48px; }
#contents { width: 100%!important; max-width: 100%!important; padding: 0; margin: 0; }
#pisss { width: 100%!important; max-width: 100%!important; }
#pi { width: 100%!important; max-width: 100%!important; margin: 0; background-color: transparent!important; padding: 0; }
#pi > img { display: none!important; }
#main	{ background-color: #fff; z-index: 20; }
@media (min-width: 1000px)	{
	.result_suggest_title .result_suggest_list { margin: 0 -1.5rem 0; }
}
.section_main, 
.seach_sort_wrapper,
.search_contents,
.bread	{ background-color: #fff; }
.seach_sort_wrapper,
.search_contents,
.bread,
.store_footer	{ position: relative; z-index: 5; }
.result_suggest	{ margin: 0; }
.pi_description	{ padding: 0!important; background-color: #fff; }
.result_suggest_header	{  }

.pi_lgzformat	{ background-color: #fffff3; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0; margin: 0; letter-spacing:0; }
.pi_lgzformat div	{ letter-spacing:0; }
.pi_lgzformat *	{ color:#fff; letter-spacing:0; font-family: "Inter", "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size:14px; line-height:1.75; -webkit-text-size-adjust:100%; color:#000000; -webkit-font-smoothing: antialiased; }
.pi_lgzformat img, 
.pi_lgzformat picture	{ width: 100%; vertical-align: bottom; line-height: 1;  }
.pi_lgzformat ul:before,
.pi_lgzformat ol:before,
.pi_lgzformat dl:before, 
.pi_lgzformat ul:after, 
.pi_lgzformat ol:after, 
.pi_lgzformat dl:after	{ display: none!important; }
.pi_lgzformat img	{ width: 100%; vertical-align: bottom; line-height: 0; }
.pi_lgzformat a { transition: all .3s; color:currentColor; }
.pi_lgzformat a:hover { opacity:0.7; color:currentColor; text-decoration:none; }
.pi_lgzformat .small { font-size:80%; }
.pi_lgzformat .center-text	{ text-align: center; }
@media (max-width: 1000px) {
	.pi_lgzformat	{ padding: 0; }
}

/* ------------ FADEIN ------------- */
.scrollIn	{ opacity: 0; }
.scrollIn.active	{ animation: fadein 1.8s both; }
@keyframes fadein	{ 
	from	{ opacity: 0; transform: translateY(20px); transition: 2s cubic-bezier(.24,.155,.275,.945); }
	to	{ opacity: 1; transform: translateY(0); transition: 2s cubic-bezier(.24,.155,.275,.945); }
}

/* ------------ MAIN ------------- */
.mainArea	{ width: 100%; display: -webkit-flex; display: flex; background-color: #0074ff; margin: 0; }
.mainvisual	{ width: 62.5%; }
.mainvisual > ul	{ list-style: none; display: -webkit-flex; display: flex; flex-wrap: wrap; }
.mainvisual > ul > li	{ width: calc(100% / 3); aspect-ratio: 5 / 6; overflow: hidden; }
.mainvisual > ul > li picture, 
.mainvisual > ul > li picture img, 
.mainvisual > ul > li img	{
	opacity: 0;
	-webkit-transform: scale(1.04);
	transform: scale(1.04);
	-webkit-transition: opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1),-webkit-transform .7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1),-webkit-transform .7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1),transform .7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	transition: opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1),transform .7s cubic-bezier(0.55, 0.055, 0.675, 0.19),-webkit-transform .7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	will-change: opacity,transform
}
.mainvisual > ul > li.active picture, 
.mainvisual > ul > li.active picture img, 
.mainvisual > ul > li.active img	{
	opacity: 1;
	-webkit-transform: scale(1.01);
	transform: scale(1.01);
	-webkit-transition: opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1),-webkit-transform .7s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1),-webkit-transform .7s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1),transform .7s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1),transform .7s cubic-bezier(0.215, 0.61, 0.355, 1),-webkit-transform .7s cubic-bezier(0.215, 0.61, 0.355, 1)
}
.mainttle	{ width: 14%; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: flex-end; }
.mainttle > h1	{ width: 28%; line-height: 1; padding: 30% 0 0 0; margin: 0 27.5% 0 0; animation-delay:1s!important; }
.mainsub	{ width: 23.5%; display: -webkit-flex; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 0 4%; animation-delay:1.4s!important; }
.mainsub > h2	{ width: 64%; display: -webkit-flex; display: flex; align-items: flex-start; line-height: 1; padding: 0 0 90px; position: relative; }
.mainsub > h2::before	{ content:""; width: 1px; height: 50px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 20px; background-color: #7fbaff; }
.mainsub > h3	{ color:#fff; text-align: center; font-size: 1.4vw; line-height: 1.4; font-weight: 500; letter-spacing:.06em; }
@media (min-width: 1000.99px) {
	.mainvisual	{ order: 1; }
	.mainttle	{ order: 3; }
	.mainsub	{ order: 2; }
}
@media (max-width: 1000px) {
	.mainArea	{ flex-wrap: wrap; }
	.mainvisual	{ width: 78%; }
	.mainvisual > ul > li	{ width: 50%; aspect-ratio: 10 / 9; }
	.mainttle	{ width: 22%; align-items: flex-start; justify-content: center; }
	.mainttle > h1	{ width: 39%; padding: 30% 0 0 0; margin: 0; }
	.mainsub	{ width: 100%; padding: 20px 0 26px; }
	.mainsub > h2	{ width: 56%; padding: 0 0 40px; }
	.mainsub > h2::before	{ content:""; width: 1px; height: 22px; bottom: 8px; }
	.mainsub > h3	{ font-size: 4.6vw; line-height: 1.4; font-weight: 400; letter-spacing:.06em; }
}

.introduction	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 170px 0; }
.introduction > p	{ width: 38.194%; color:#0073FF; font-size: 1.37vw; line-height: 1.84; font-weight: 500; letter-spacing:.08em; text-align : justify; display: -webkit-flex; display: flex; flex-direction: column; }
.introduction > p > span	{ color:#0073FF; font-size: .7vw; line-height: 1.6; letter-spacing:.06em; padding: 15px 0 0; }
@media (max-width: 1200px) {
	.introduction > p	{ width: 60% }
}
@media (max-width: 767.99px) {
	.introduction	{ padding: 120px 4.5% 130px; }
	.introduction > p	{ width: 100%; font-size: 15px; line-height: 2; letter-spacing:.04em; }
	.introduction > p > span	{ font-size: 10px; line-height: 1.6; letter-spacing:.06em; padding: 20px 0 0; }
}

/* ------------ MOVIE ------------- */
.video-wrapper	{ width: 100%; padding: 0; margin: 0; display: -webkit-flex; display: flex; flex-direction: column; line-height: 1; position: relative; }
.video-inner	{ width: 100%; position: relative; line-height: 1; }
.video-inner video	{ width: 100%; line-height: 1; vertical-align: bottom; position: relative; z-index: 1; }
.video-inner > b	{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 180px; line-height: 1; z-index: 3; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }
.video-inner > b > a	{ transition: all .5s; opacity: 1; }
@media (min-width: 1000.99px) {
	.video-inner > b > a:hover	{ opacity: .6; }
}
@media (max-width: 1000px) {
	.video-wrapper	{ width: 100%; overflow-x: hidden; }
	.video-inner	{ width: calc(100% + 4px); margin: 0 -2px;  }
	.video-inner > b	{ width: 100px; }
}

/* ------------ NAVI ------------- */
.page-navbtn	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; padding: 110px 0; }
.page-navbtn > ul	{ display: -webkit-flex; display: flex; justify-content: space-between; gap: 80px; }
.page-navbtn > ul > li	{ width: 262px; height: 80px; line-height: 1; display: -webkit-flex; display: flex; }
.page-navbtn > ul > li > a	{ color:#0074ff; font-size: 18px; font-weight: 500; letter-spacing:.08em; width: 100%; height: 100%; position: relative; border: 1px solid #0074ff; border-radius: 80px; background-color: #fff; transition: all .5s; display: -webkit-flex; display: flex; align-items: center; justify-content: center; gap: 13px; line-height: 1; }
.page-navbtn > ul > li > a span { color:#0074ff; position: relative; display: inline-block; width: 1px; height: 14px; margin: 0 5px; border-radius: 9999px; background-color: currentColor; transition: all .5s; }
.page-navbtn > ul > li > a span::before,
.page-navbtn > ul > li > a span::after	{ content: ""; position: absolute; bottom: 0; left: calc(50% - 0.5px); width: 1px; height: 8px; border-radius: 9999px; background-color: currentColor; transform-origin: 50% calc(100% - 0.5px); }
.page-navbtn > ul > li > a span::before	{ transform: rotate(45deg); }
.page-navbtn > ul > li > a span::after	{ transform: rotate(-45deg); }
@media (min-width: 1000.99px) {
	.page-navbtn > ul > li > a:hover	{ color:#fff; background-color: #0074ff; }
	.page-navbtn > ul > li > a:hover span	{ color:#fff!important; }
}
@media (max-width: 1000px) {
	.page-navbtn	{ padding: 80px 6.4%; }
	.page-navbtn > ul	{ width: 100%; gap: 4.8%; }
	.page-navbtn > ul > li	{ width: 47.6%; height: 48px; }
	.page-navbtn > ul > li > a	{ font-size: 12px; border-radius: 48px; gap: 6px; }
	.page-navbtn > ul > li > a span { height: 10px; }
	.page-navbtn > ul > li > a span::before,
	.page-navbtn > ul > li > a span::after	{ height: 6px; }
	.page-navbtn > ul > li > a:hover, 
	.page-navbtn > ul > li > a::link, 
	.page-navbtn > ul > li > a::visited, 
	.page-navbtn > ul > li > a::hover, 
	.page-navbtn > ul > li > a::active, 
	.page-navbtn > ul > li > a::focus	{ color:#0074ff!important; }
}
.pganchorhd	{ position: relative; transform: translateY(-47px); height: 0; }
@media (max-width: 1000px) {
	.pganchorhd	{ position: relative; transform: translateY(-46px); height: 0; }
}

/* ------------ CONTENTS ------------- */
.water-repellent	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; }
.repellent-hdd	{ width: 100%; display: -webkit-flex; display: flex; list-style: none; background-color: #bef0f1; }
.repellent-hdd li	{ line-height: 1; width: 50%; aspect-ratio: 1 / 1; }
.repellent-hdd li:last-child	{ position: relative;  }
.repellent-hdd li:last-child h4	{ font-family: "Noto Sans JP", sans-serif; position: absolute; left: 12.5%; top: 8%; color:#0074ff; font-size: 2vw; line-height: 1.4; font-weight: 500; letter-spacing:.08em; }
.repellent-hdd li:last-child strong	{ writing-mode: vertical-rl; position: absolute; right: 7%; bottom: 8%; color:#0074ff; font-size: 2.3vw; line-height: 1; font-weight: 500; }
@media (max-width: 1000px) {
	.repellent-hdd	{ flex-wrap: wrap; }
	.repellent-hdd li	{ width: 100%; aspect-ratio: 1 / 1; order: 2; }
	.repellent-hdd li:last-child	{ position: relative; order: 1; }
	.repellent-hdd li:last-child h4	{ left: 9%; font-size: 5vw; line-height: 1.55; }
	.repellent-hdd li:last-child strong	{ font-size: 5.3vw; }
}

/* ------------ REPELLENT ------------- */
.repellent-body	{ display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: #dbfafc; padding: 100px 0 140px; }
.repellent-body > ul	{ width: 78%; min-width: 900px; list-style: none; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: space-between; }
.repellent-body > ul > li	{ width: 47%; display: -webkit-flex; display: flex; flex-direction: column; }
.repeinhdd	{ display: -webkit-flex; display: flex; align-items: center; gap: 23px; margin: 0 0 20px; }
.repeinhdd > b	{ color:#0074ff; width: 82px; height: 82px; aspect-ratio: 1 / 1!important; border-radius: 100px; background-color: #fff; border: 1px solid #0074ff; display: -webkit-flex; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; font-weight: 400; }
.repeinhdd > b.ng	{ color:#fff; background-color: #0074ff; }
.repeinhdd > span	{ color:#0074ff; font-size: 1.4vw; line-height: 1; font-weight: 500; letter-spacing:.08em; }
.repeinimg	{ line-height: 1; padding: 10px; background-color: #fff; margin: 0 0 35px; }
.repeintxt	{ color:#0074ff; font-size: 1vw; line-height: 2; font-weight: 400; letter-spacing:.08em; }
@media (min-width: 1000.99px) {
	.repeinhdd > span br	{ display: none; }
}
@media (max-width: 1000px) {
	.repellent-body	{ padding: 100px 4%; }
	.repellent-body > ul	{ width: 100%; min-width: 100%; flex-wrap: wrap; gap: 80px; }
	.repellent-body > ul > li	{ width: 100%; }
	.repeinhdd > span	{ font-size: 5vw; line-height: 1.35; }
	.repeinimg	{ margin: 0 0 20px; }
	.repeintxt	{ font-size: 3.3vw; letter-spacing:.06em; }
}

/* ------------ MAINTENANCE ------------- */
.maintenance	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; background-color: #fffff3; }
.maintenance-hdd	{ width: 100%; display: -webkit-flex; display: flex; list-style: none; background-color: #f5f4d6; }
.maintenance-hdd li	{ line-height: 1; width: 50%; aspect-ratio: 1 / 1; }
.maintenance-hdd li:last-child	{ position: relative;  }
.maintenance-hdd li:last-child h4	{ font-family: "Noto Sans JP", sans-serif; position: absolute; left: 12.5%; top: 8%; color:#0074ff; font-size: 2vw; line-height: 1.4; font-weight: 500; letter-spacing:.08em; }
.maintenance-hdd li:last-child strong	{ writing-mode: vertical-rl; position: absolute; right: 7%; bottom: 8%; color:#0074ff; font-size: 2.3vw; line-height: 1; font-weight: 500; text-align: right; }
.mainte-info	{ width: 100%; padding: 140px 4.2%; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: center; }
.mainte-info > p	{ width: 34.72%; min-width: 500px; line-height: 1; color:#0074ff; font-size: clamp(16px, 20px, 1.04vw); line-height: 1.875; font-weight: 500; letter-spacing:.08em; }
@media (min-width: 1000.99px) {
	.maintenance-hdd li:last-child strong br	{ display: none; }
}
@media (max-width: 1000px) {
	.maintenance-hdd	{ flex-wrap: wrap; }
	.maintenance-hdd li	{ width: 100%; aspect-ratio: 1 / 1; order: 2; }
	.maintenance-hdd li:last-child	{ position: relative; order: 1; }
	.maintenance-hdd li:last-child h4	{ left: 9%; font-size: 5vw; line-height: 1.55; }
	.maintenance-hdd li:last-child strong	{ font-size: 5.3vw; }
	.mainte-info	{ padding: 50px 4.2%; }
	.mainte-info > p	{ width: 100%; min-width: 100%; font-size: 15px; line-height: 2; }
}

.mainte-body	{ display: -webkit-flex; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.mainte-inner	{ display: -webkit-flex; display: flex; width: 69.44%; min-width: 900px; align-items: flex-start; justify-content: space-between; position: relative; }
.mainte-ttle	{ width: 37.5%; position: -webkit-sticky; position: sticky; top: 125px; left: 0; border-top: 1px solid #0074ff; margin: 0 9% 130px 0; padding: 20px 0 0; display: -webkit-flex; display: flex; flex-direction: column; }
.mainte-ttle > span	{ color:#0074ff; font-size: 15px; line-height: 1; font-weight: 400; letter-spacing:.06em; margin: 0 0 40px; }
.mainte-ttle > h4	{ color:#0074ff; font-size: 30px; line-height: 1; font-weight: 500; letter-spacing:.06em; margin: 0 0 20px; }
.mainte-ttle > strong	{ color:#0074ff; font-size: 30px; line-height: 1; font-weight: 400; letter-spacing:.06em; padding: 20px 0 0;position: relative; }
.mainte-ttle > strong::before	{ position: absolute; left: 0; top: 0; content:""; height: 1px; width: 28px; background-color: #0074ff; }
.mainte-conten	{ width: 54%; min-width: 540px; display: -webkit-flex; display: flex; flex-direction: column; margin: 0 0 40px; }
.mainte-set	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; }
.mainte-set > p	{ line-height: 1; margin: 0 0 30px; }
.mainte-set > ul	{ display: -webkit-flex; display: flex; flex-direction: column; list-style: none; margin: 0 0 80px 1.3em;  }
.mainte-set > ul > li	{ list-style-type: disc; color:#0074ff; font-size: 13px; line-height: 1.5; font-weight: 400; letter-spacing:.08em; margin: 0 0 .3em; }
@media (max-width: 1000px) {
	.mainte-body	{ padding: 0 4.2%; }
	.mainte-inner	{ width: 100%; min-width: 100%; flex-direction: column; }
	.mainte-ttle	{ width: 100%; margin: 0 0 30px; }
	.mainte-conten	{ width: 100%; min-width: 100%; margin: 0 0 40px; }
	.mainte-set > p	{ margin: 0 0 20px; }
	.mainte-set > ul	{ margin: 0 0 40px 1.3em;  }
}

/* ------------ FOOTER ------------- */
.page-bottomft	{ width: 100%; display: -webkit-flex; display: flex; align-items: center; justify-content: center; position: relative; background-color: #0074ff; padding: 108px 0 200px; }
.page-bottomft > strong	{ writing-mode: vertical-rl; position: absolute; right: 2.8%; top: 100px; color: #fff; font-size: 2.3vw; line-height: 1; font-weight: 400; letter-spacing:.04em; }
.page-bottomft-inner	{ display: -webkit-flex; display: flex; width: 69.444%; display: -webkit-flex; display: flex; flex-direction: column; }
.page-bottomft-inner > h3	{ color:#fff; font-size: 2.1vw; line-height: 1; font-weight: 500; letter-spacing:.08em; width: 100%; margin: 0 0 110px; }
.page-bottomftbtm	{ display: -webkit-flex; display: flex; width: 100%; align-items: center; justify-content: space-between; }
.page-bottomftbtm > ul	{ width: 44%; list-style: none; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; }
.page-bottomftbtm > ul > li	{ line-height: 1; }
.page-bottomftbtm > ul > li:first-child	{ width: 49.54%; }
.page-bottomftbtm > ul > li:last-child	{ width: 37.95%; }
.page-bmtx	{ width: 39%; display: -webkit-flex; display: flex; flex-direction: column; padding: 0 20px 0 0; }
.page-bmtx > b	{ color:#fff; font-size: 1.3vw; line-height: 1.1; font-weight: 500; letter-spacing:.06em; margin: 0 0 30px; }
.page-bmtx > p	{ color:#fff; font-size: .97vw; line-height: 2; font-weight: 400; letter-spacing:.06em; margin: 0 0 30px; }
.page-bmtx > span	{ color:#fff; font-size: 10px; line-height: 1.6; font-weight: 500; letter-spacing:.06em; }
@media (max-width: 1000px) {
	.page-bottomft	{ padding: 72px 0 60px 9.866%; }
	.page-bottomft > strong	{ right: 5%; top: 72px; font-size: 23px; letter-spacing:0; }
	.page-bottomft-inner	{ width: 100%; padding: 0 18% 0 0; }
	.page-bottomft-inner > h3	{ font-size: 5.4vw; margin: 0 0 100px; }
	.page-bottomftbtm	{ flex-direction: column; }
	.page-bottomftbtm > ul	{ width: 100%; flex-direction: column; padding: 0 10% 0 0; margin: 0 0 100px; }
	.page-bottomftbtm > ul > li:first-child	{ width: 72.65%; margin: 0 0 50px; }
	.page-bottomftbtm > ul > li:last-child	{ width: 54.68%; }
	.page-bmtx	{ width: 100%; padding: 0; }
	.page-bmtx > b	{ font-size: 4.8vw; line-height: 1.1; margin: 0 0 30px; }
	.page-bmtx > p	{font-size: 3.3vw; line-height: 2;  margin: 0 0 30px; }
	.page-bmtx > span	{ font-size: 10px; line-height: 1.6; letter-spacing:.08em; }
}

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