:root{--navy:#071b2d;--blue:#167bb0;--aqua:#5fb7d8;--ice:#eef5f7;--white:#fff;--ink:#14222b;--muted:#62717a;--line:#cad8de;--max:1280px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font:16px/1.9 "Noto Sans JP",sans-serif}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{text-wrap:balance;line-break:strict}
.progress{position:fixed;z-index:100;top:0;left:0;height:3px;background:var(--aqua)}
header{position:fixed;z-index:50;inset:0 auto 0 0;width:230px;height:100vh;padding:42px 30px 34px;display:flex;flex-direction:column;align-items:flex-start;color:#fff;background:#061522;border-right:1px solid #19394c;transition:.3s}
header:after{content:"WATERPROOF CONTRACTOR / OSAKA";margin-top:auto;color:#547486;font:600 9px "DM Sans";letter-spacing:.2em;writing-mode:vertical-rl}
header.solid{background:#061522;box-shadow:10px 0 35px rgba(0,0,0,.12)}
.logo{display:flex;align-items:center;gap:13px}
.logo>i{width:42px;height:42px;border:1px solid var(--aqua);position:relative}
.logo>i:before,.logo>i:after{content:"";position:absolute;left:8px;right:8px;height:1px;background:var(--aqua)}
.logo>i:before{top:14px}
.logo>i:after{top:25px}
.logo span{font-weight:700;letter-spacing:.1em}
.logo small{display:block;color:#91bfd0;font:600 9px "DM Sans";letter-spacing:.2em}
nav{display:flex;flex-direction:column;gap:28px;margin-top:90px}
nav a{font:600 11px "DM Sans";letter-spacing:.18em;position:relative}
nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:var(--aqua);transition:.3s}
nav a:hover:after,nav a.on:after{right:0}
.menu{display:none}
main,body>footer{margin-left:230px}
.hero{min-height:760px;height:100svh;display:grid;grid-template-columns:52% 48%;position:relative;overflow:hidden;color:#fff;background:var(--navy)}
.hero-photo{padding:140px 6vw 75px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#061522,#0b3048);position:relative;overflow:hidden}
.hero-photo:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),rgba(95,183,216,.08) 20%)}
.layer-copy{position:relative;z-index:1}.layer-copy p{color:var(--aqua);font:700 11px "DM Sans";letter-spacing:.22em}.layer-copy h2{max-width:600px;color:#fff;font-size:clamp(2.2rem,3.5vw,4rem);line-height:1.5}.layer-stack{position:relative;z-index:1;list-style:none;padding:0;margin:0;width:min(610px,100%)}.layer-stack li{height:54px;padding:0 18px;display:flex;align-items:center;gap:25px;border-top:1px solid rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.04);transform:translateX(calc(var(--n,0)*18px))}.layer-stack li:nth-child(1){--n:3;background:rgba(95,183,216,.34)}.layer-stack li:nth-child(2){--n:2;background:rgba(22,123,176,.28)}.layer-stack li:nth-child(3){--n:1}.layer-stack b{color:var(--aqua);font:600 12px "DM Sans"}.layer-stack span{font:600 11px "DM Sans";letter-spacing:.18em}
.hero-panel{min-width:0;padding:125px 3vw 75px 4.5vw;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#0a2740,#061827)}
.hero-panel:before{content:"";position:absolute;right:-12%;top:-20%;width:48vw;height:48vw;border:1px solid rgba(95,183,216,.16);border-radius:50%}
.en,.label{color:var(--blue);font:700 11px "DM Sans";letter-spacing:.22em}
.hero .en{color:var(--aqua)}
.hero h1{margin:20px 0 22px;font-size:clamp(2.75rem,3.55vw,3.75rem);line-height:1.32;position:relative}
.hero h1 span,.hero h1 em{display:block;width:max-content;max-width:none;white-space:nowrap!important}
.hero h1 em{font-style:normal;color:var(--aqua)}
.hero .lead{color:#b8cbd4;position:relative}
.hero-panel>div{display:flex;align-items:center;gap:28px;margin-top:28px;position:relative}
.button{min-height:58px;padding:15px 27px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--blue);border:0;font-weight:700;cursor:pointer}
.line-link{font-size:13px;font-weight:700;border-bottom:1px solid currentColor}
.diagnosis{max-width:var(--max);margin:auto;padding:140px 30px;display:grid;grid-template-columns:1.2fr .8fr;gap:120px}
.diagnosis h2,.service-lead h2,.message h2,.contact-wrap h2{font-size:clamp(2.4rem,4.5vw,4.8rem);line-height:1.5}
.diagnosis>div:last-child{padding-top:55px;color:var(--muted)}
.diagnosis .line-link{display:inline-block;margin-top:18px;color:var(--blue)}
.systems{padding:130px max(30px,calc((100% - var(--max))/2));background:var(--ice)}
.section-title{display:grid;grid-template-columns:1fr 1fr;align-items:end;margin-bottom:50px}
.section-title h2{font-size:clamp(3rem,6vw,6rem);margin:5px 0}
.section-title span{color:var(--muted);text-align:right}
.system-list{border-top:1px solid #aebfc6}
.system-list a{min-height:125px;padding:20px;display:grid;grid-template-columns:80px 1fr 30px;align-items:center;border-bottom:1px solid #aebfc6;transition:.3s}
.system-list a:hover{padding-left:35px;color:#fff;background:var(--navy)}
.system-list b,.system-list a>span{color:var(--blue);font-family:"DM Sans"}
.system-list small{color:var(--blue);font:700 10px "DM Sans";letter-spacing:.17em}
.system-list h3{margin:5px 0 0;font-size:24px}
.precision{min-height:740px;display:grid;grid-template-columns:46% 54%;background:var(--navy);color:#fff}
.precision-copy{padding:110px 7vw 90px max(30px,calc((100vw - var(--max))/2))}
.precision-copy .label{color:var(--aqua)}
.precision-copy h2{font-size:clamp(2.3rem,4.2vw,4.5rem);line-height:1.5}
.precision-copy>p:not(.label){color:#aebfc7}
.precision-copy ul{list-style:none;padding:25px 0 0;margin:35px 0 0;border-top:1px solid #294357}
.precision-copy li{padding:18px 0;display:flex;gap:25px;border-bottom:1px solid #294357}
.precision-copy li b{color:var(--aqua);font-family:"DM Sans"}
.precision-photo{background:linear-gradient(90deg,rgba(7,27,45,.35),transparent),url("https://s3-ap-northeast-1.amazonaws.com/production-switch/uploads/portfolio_storage/file/388506/T66xtdMcOXSDNlxUqtaG6Q.png") center/cover}
.symptoms{padding:120px max(30px,calc((100% - var(--max))/2))}
.symptoms h2{font-size:clamp(2rem,4vw,4rem)}
.symptoms>div{display:grid;grid-template-columns:repeat(5,1fr);margin-top:45px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.symptoms span{min-height:130px;padding:20px;display:grid;place-items:center;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta{padding:120px max(30px,calc((100% - var(--max))/2));color:#fff;background:linear-gradient(120deg,#0d4d70,#071b2d);position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;right:-100px;top:-180px;width:520px;height:520px;border:1px solid rgba(255,255,255,.12);border-radius:50%}
.cta>p{color:var(--aqua);font:700 11px "DM Sans";letter-spacing:.2em}
.cta h2{font-size:clamp(2.3rem,4.5vw,4.8rem);line-height:1.5;position:relative}
.button.white{color:var(--navy);background:#fff;position:relative}
.page-hero{min-height:470px;padding:175px max(30px,calc((100% - var(--max))/2)) 75px;display:flex;flex-direction:column;justify-content:end;color:#fff;background:linear-gradient(130deg,#0c4160,#071b2d);position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;right:6%;top:-50%;width:560px;height:560px;border:1px solid rgba(95,183,216,.2);border-radius:50%}
.page-hero p{color:var(--aqua);font:700 11px "DM Sans";letter-spacing:.22em}
.page-hero h1{font-size:clamp(3.7rem,8vw,7.6rem);line-height:1;margin:10px 0 28px;position:relative}
.page-hero span{color:#b8cbd4}
.service-lead{max-width:var(--max);margin:auto;padding:130px 30px 85px}
.service-cards{max-width:var(--max);margin:auto;padding:0 30px 140px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.service-cards article{padding:60px;background:#fff}
.service-cards article>b{float:right;color:#dce8ec;font:700 85px "DM Sans";line-height:.8}
.service-cards small{color:var(--blue);font:700 10px "DM Sans";letter-spacing:.16em}
.service-cards h2{clear:both;font-size:29px;margin:25px 0}
.service-cards p{color:var(--muted)}
.service-cards ul{padding-left:20px}
.flow{padding:120px max(30px,calc((100% - var(--max))/2));background:var(--ice)}
.flow h2,.profile>h2,.quality>h2{font-size:clamp(2.7rem,5vw,5.2rem)}
.flow ol{list-style:none;padding:0;margin:45px 0 0;display:grid;grid-template-columns:repeat(5,1fr)}
.flow li{padding:25px 18px;border-left:1px solid #b8c9cf}
.flow li b{display:block;color:var(--blue);font:600 28px "DM Sans"}
.flow li span{font-size:14px}
.message{max-width:var(--max);margin:auto;padding:140px 30px;display:grid;grid-template-columns:1fr 1fr;gap:100px}
.message>div:last-child p{color:var(--muted)}
.message>div:last-child b{display:block;margin-top:35px;text-align:right}
.profile{padding:120px max(30px,calc((100% - var(--max))/2));background:var(--ice)}
.profile dl{margin:45px 0 0}
.profile dl div{padding:23px 8px;display:grid;grid-template-columns:230px 1fr;border-top:1px solid #b8c9cf}
.profile dl div:last-child{border-bottom:1px solid #b8c9cf}
.profile dt{font-weight:700}
.profile dd{margin:0;color:var(--muted)}
.quality{padding:120px max(30px,calc((100% - var(--max))/2))}
.quality>div{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:45px;background:var(--line)}
.quality article{padding:45px;background:#fff}
.quality article b{color:var(--blue);font:600 26px "DM Sans"}
.quality article h3{font-size:22px}
.quality article p{color:var(--muted)}
.contact-wrap{max-width:var(--max);margin:auto;padding:130px 30px;display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}
.contact-wrap>div>p:not(.label){color:var(--muted)}
.contact-wrap ul{list-style:none;padding:20px 0 0}
.contact-wrap li{padding:10px 0;border-bottom:1px solid var(--line)}
form{padding:50px;background:var(--ice)}
form label{display:block;margin-bottom:24px;font-weight:700}
form label>span{float:right;color:var(--blue);font-size:12px}
input,select,textarea{width:100%;margin-top:8px;padding:15px;border:1px solid #b8c9cf;border-radius:0;background:#fff;font:inherit}
textarea{resize:vertical}
.check{display:flex;align-items:center;gap:10px}
.check input{width:auto;margin:0}
.check i{font-style:normal;font-weight:500;font-size:14px}
.note,.success{margin:18px 0 0;color:var(--muted);font-size:13px}
.success{padding:14px;background:#fff;border-left:3px solid var(--blue)}
footer{padding:65px max(30px,calc((100% - var(--max))/2));display:grid;grid-template-columns:1fr 1fr;gap:35px;color:#c0d0d7;background:#061522}
footer>div{display:flex;justify-content:end;gap:25px;font-size:13px}
footer>p{text-align:right;font-size:13px}
footer>small{grid-column:1/-1;padding-top:22px;border-top:1px solid #233b4b;color:#718997}
.reveal{opacity:0;transform:translateY(28px);transition:.75s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){header{inset:0 0 auto;width:auto;height:72px;padding:0 20px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background:rgba(7,27,45,.97);border-right:0;border-bottom:1px solid #19394c}
header:after{display:none}
header.solid{height:72px;box-shadow:0 8px 35px rgba(0,0,0,.12)}
main,body>footer{margin-left:0}
.menu{display:grid;width:44px;height:44px;place-content:center;gap:7px;border:0;background:none}
.menu b{display:block;width:24px;height:1px;background:#fff}
nav{position:fixed;inset:72px 0 0;margin:0;padding:55px 30px;display:flex;flex-direction:column;align-items:flex-start;background:rgba(7,27,45,.99);transform:translateX(100%);transition:.3s}
nav.open{transform:none}
nav a{font-size:20px}
.hero{height:auto;grid-template-columns:1fr}
.hero-photo{min-height:520px;padding:110px 35px 55px}
.hero-panel{min-height:640px;padding:100px 35px}
.diagnosis,.message,.contact-wrap{grid-template-columns:1fr;gap:45px}
.diagnosis,.message,.contact-wrap{padding-top:90px;padding-bottom:90px}
.diagnosis>div:last-child{padding-top:0}
.precision{grid-template-columns:1fr}
.precision-copy{padding:90px 35px}
.precision-photo{min-height:480px}
.symptoms>div{grid-template-columns:1fr 1fr}
.service-cards{grid-template-columns:1fr}
.flow ol{grid-template-columns:1fr 1fr}
.profile dl div{grid-template-columns:180px 1fr}
}

/* Meaning-based mobile line breaks */
@media(max-width:600px){.sp-line{display:block!important}p br{display:block!important}}

@media(max-width:600px){.logo>i{width:37px;height:37px}
.logo span{font-size:13px}
.hero-photo{min-height:430px}
.hero-panel{min-height:610px;padding:85px 25px}
.hero h1{font-size:clamp(2.75rem,12vw,3.55rem)}
.hero h1 span,.hero h1 em{width:auto;white-space:normal!important}
.hero-panel>div{align-items:flex-start;flex-direction:column}
.diagnosis h2,.service-lead h2,.message h2,.contact-wrap h2{font-size:2.4rem}
.section-title{grid-template-columns:1fr}
.section-title span{text-align:left}
.system-list a{grid-template-columns:45px 1fr 20px;padding:16px 4px}
.system-list h3{font-size:19px}
.precision-copy{padding:80px 25px}
.precision-copy h2{font-size:2.4rem}
.symptoms{padding-top:85px;padding-bottom:85px}
.symptoms>div{grid-template-columns:1fr}
.symptoms span{min-height:80px}
.page-hero{min-height:410px;padding-top:140px}
.page-hero h1{font-size:3.7rem}
.service-lead{padding-top:90px}
.service-cards{padding:0 15px 90px}
.service-cards article{padding:42px 25px}
.service-cards article>b{font-size:62px}
.flow ol{grid-template-columns:1fr}
.profile dl div{grid-template-columns:1fr;gap:7px}
.profile dd{font-size:14px}
.quality>div{grid-template-columns:1fr}
.contact-wrap{padding-left:18px;padding-right:18px}
form{padding:35px 20px}
footer{grid-template-columns:1fr}
footer>div{justify-content:flex-start;flex-wrap:wrap}
footer>p{text-align:left}
footer>small{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
.reveal{opacity:1;transform:none}
}

/* Single-focus hero: visual diagram left, message right */
.hero-photo{padding:110px 6vw 80px;align-items:center;justify-content:center}
.hero-photo .layer-stack{width:min(650px,88%)}
@media(max-width:900px){.hero-photo{padding:90px 35px 55px}}

/* Editorial modern direction */
:root{--navy:#101216;--blue:#0068ff;--aqua:#62c7ef;--ice:#f2f5f7;--ink:#111820;--muted:#64717a;--line:#d7dfe4}
body{background:#f7f8f9}
header{width:200px;padding:38px 26px 30px;background:#101216;border-right:0}
header.solid{background:#101216}
header:after{color:#666e75;letter-spacing:.24em}
nav{margin-top:105px;gap:31px}
nav a{font-size:12px}
nav a:after{background:#fff}
main,body>footer{margin-left:200px}
.hero{grid-template-columns:minmax(560px,1.3fr) minmax(360px,.7fr);grid-template-areas:"copy art";color:var(--ink);background:#fff}
.hero-panel{grid-area:copy;padding:125px 7vw 75px;background:#fff;position:relative;overflow:hidden}
.hero-panel:before{content:"WATERPROOF";right:auto;left:7vw;top:9%;width:auto;height:auto;border:0;border-radius:0;color:#eef1f3;font:700 clamp(4rem,8vw,9rem) "DM Sans";letter-spacing:-.06em;white-space:nowrap}
.hero .en{color:var(--blue)}
.hero h1{color:var(--ink);font-size:clamp(3.5rem,5vw,5.8rem);line-height:1.2;letter-spacing:-.035em}
.hero h1 em{color:var(--blue)}
.hero .lead{color:var(--muted)}
.hero .line-link{color:var(--ink)}
.hero-photo{grid-area:art;padding:0 3vw;background:#dff2fa;align-items:center;position:relative}
.hero-photo:before{content:"";position:absolute;inset:auto -35% 10% auto;width:38vw;height:38vw;border-radius:50%;background:#bce6f6}
.hero-photo:after{content:"04 / WATERPROOF LAYERS";position:absolute;right:28px;top:32px;color:#3f7185;font:600 10px "DM Sans";letter-spacing:.18em;writing-mode:vertical-rl}
.hero-photo .layer-stack{width:100%;transform:rotate(-7deg)}
.layer-stack li{height:68px;border:0;border-bottom:1px solid rgba(17,24,32,.17);color:var(--ink);background:rgba(255,255,255,.3)!important;backdrop-filter:blur(8px);transform:translateX(calc(var(--n,0)*12px))}
.layer-stack li:nth-child(1){background:#fff!important}.layer-stack li:nth-child(2){background:rgba(98,199,239,.72)!important}.layer-stack li:nth-child(3){background:rgba(0,104,255,.16)!important}.layer-stack li:nth-child(4){background:rgba(17,24,32,.12)!important}
.layer-stack b{color:var(--blue)}
.diagnosis{background:#fff}
.systems{color:#fff;background:#101216}
.systems .section-title span,.systems .system-list small{color:#9ca6ac}
.systems .system-list{border-color:#33383d}
.systems .system-list a{border-color:#33383d}
.systems .system-list a:hover{color:#101216;background:#fff}
.systems .system-list b,.systems .system-list a>span{color:var(--aqua)}
.precision{color:var(--ink);background:#e9eef1}
.precision-copy .label,.precision-copy li b{color:var(--blue)}
.precision-copy>p:not(.label){color:var(--muted)}
.precision-copy ul,.precision-copy li{border-color:#c7d1d7}
.precision-photo{filter:grayscale(1);background-blend-mode:screen}
.cta{background:var(--blue)}
.cta>p{color:#cce9ff}
.cta:after{border-color:rgba(255,255,255,.24)}
.page-hero{color:var(--ink);background:#fff;border-bottom:1px solid var(--line)}
.page-hero p{color:var(--blue)}
.page-hero span{color:var(--muted)}
.page-hero:after{border-color:#bde6f5;background:#eaf7fc}
.service-cards article,.quality article{background:#fff}
.flow,.profile,form{background:#eef3f5}
footer{background:#101216}
@media(max-width:900px){header{width:auto;padding:0 20px;background:#101216}header.solid{background:#101216}main,body>footer{margin-left:0}.hero{grid-template-columns:1fr;grid-template-areas:"copy" "art"}.hero-panel{padding:120px 35px 90px}.hero-panel:before{left:35px;top:7%;font-size:5rem}.hero-photo{padding:70px 40px}.hero-photo:before{width:70vw;height:70vw}.hero-photo:after{right:15px}.hero-photo .layer-stack{transform:rotate(-4deg)}}
@media(max-width:600px){.hero-panel{padding:110px 25px 80px}.hero-panel:before{left:25px;font-size:3.8rem}.hero h1{font-size:3.2rem}.hero-photo{padding:65px 25px}.layer-stack li{height:58px}}

/* Mobile Japanese line-break refinement 2026-09-15 */
@media(max-width:600px){
  h1,h2,h3{text-wrap:balance;line-break:strict;overflow-wrap:normal}
  p,li,dd{line-break:strict;overflow-wrap:anywhere}
  p br{display:none}
  h1 br,h2 br,h3 br{display:block}
  .hero h1{font-size:clamp(2.65rem,12vw,3.25rem);line-height:1.27}
  .hero h1 span,.hero h1 em{width:auto;white-space:normal!important}
  .diagnosis h2,.service-lead h2,.message h2,.contact-wrap h2{font-size:clamp(2rem,9.5vw,2.55rem);line-height:1.5}
  .page-hero h1{font-size:clamp(2.65rem,12vw,3.35rem)}
}

@media(max-width:600px){.sp-line{display:block!important}p br{display:block!important}}
/* Mobile rule: keep industry terms and compound nouns on one line. */
@media(max-width:600px){.term-keep{display:inline-block;white-space:nowrap;max-width:100%}}


/* Shared Japanese line-breaking rules: preserve phrases without wasting width. */
html{line-break:strict}
h1,h2,h3,.lead,.catch,.copy{text-wrap:balance;overflow-wrap:normal;word-break:normal}
p,li,dt,dd,figcaption{text-wrap:pretty;overflow-wrap:break-word;word-break:normal}
@supports (word-break:auto-phrase){h1,h2,h3,.lead,.catch,.copy,p,li,dt,dd,figcaption{word-break:auto-phrase}}


/* Mobile fixes: symptom names, decorative circle and CTA lines */
.symptom-keep{white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
.semantic-cta>span{display:inline}
@media(max-width:600px){
  .page-hero:after{display:none!important}
  .page-hero{isolation:isolate}
  .symptoms .symptom-keep{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important}
  .semantic-cta{font-size:clamp(1.9rem,7.8vw,2.1rem)!important;line-height:1.55!important;letter-spacing:-.025em}
  .semantic-cta>span{display:block;width:max-content;max-width:100%;white-space:nowrap}
}


/* Fix nested term wrappers inside symptom cards. */
.symptoms > div > span > span{
  display:inline!important;
  min-height:0!important;
  width:auto!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:none!important;
  text-align:inherit!important;
  place-items:initial!important;
  white-space:inherit!important;
}


/* Desktop precision panel: use the full left column and preserve semantic lines. */
@media(min-width:901px){
  .precision-copy{padding:110px 4vw 90px 8vw}
  .precision-title{font-size:clamp(2rem,3.15vw,4rem)!important;line-height:1.45!important}
  .precision-title>span{
    display:block;
    width:max-content;
    max-width:100%;
    white-space:nowrap;
    text-wrap:nowrap;
  }
}

/* Approved phrase boundaries, preserving existing heading and card styles. */
.phrase-heading{white-space:normal!important;text-wrap:wrap!important;word-break:normal;overflow-wrap:normal;min-width:0}
.phrase-heading>.phrase-unit{display:inline-block!important;width:auto!important;max-width:none!important;white-space:nowrap!important;text-wrap:nowrap!important;word-break:normal;overflow-wrap:normal;font:inherit;color:inherit;letter-spacing:inherit}
.phrase-heading>wbr{display:inline}
.hero h1 .phrase-unit em{display:inline;width:auto;white-space:inherit!important}