.water_server_page{
  --ink:#06222A;
  --deep:#0B3540;
  --mid:#14606B;
  --spring:#3FA9A0;
  --tachibana:#E8A33D;
  --paper:#F1F5F3;
  --paper-2:#E4EBE8;
  --line:rgba(6,34,42,.14);
  --line-dark:rgba(255,255,255,.22);
  --text:#0E2E36;
  --text-soft:#4A6A72;
  --mincho:"Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --wrap:1080px;
}

.water_server_page,
.water_server_page *{
  box-sizing:border-box;
}

.water_server_page{
  margin:0;
  font-size:16px;
  background:var(--paper);
  color:var(--text);
  font-family:var(--gothic);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-align:justify;
  text-justify:inter-ideograph;
}

.water_server_page img{
  max-width:100%;
}

.water_server_page .wrap{
  width:min(100% - 40px, var(--wrap));
  margin-inline:auto;
}


/* ---------- 共通パーツ ---------- */

.water_server_page .eyebrow{
  font-family:var(--mono);
  font-size: 1.5rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--spring);
  display:flex;
  align-items:center;
  gap:.8em;
  margin:0 0 22.4px;
  text-align:left;
}

.water_server_page .eyebrow::before{
  content:"";
  width:35.2px;
  height:1px;
  background:currentColor;
  flex:none;
}

.water_server_page h2{
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(24.8px, 3.6vw, 37.6px);
  line-height:1.55;
  letter-spacing:.04em;
  margin:0 0 19.2px;
  text-align:left;
}

.water_server_page h3{
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(18.4px, 2.3vw, 22.4px);
  line-height:1.65;
  letter-spacing:.04em;
  margin:0 0 11.2px;
  text-align:left;
}

.water_server_page p{
  margin:0 0 1.3em;
}

.water_server_page strong{
  font-weight:700;
  color:var(--ink);
}

.water_server_page .lead{
  font-size:16.48px;
  color:var(--text-soft);
}

.water_server_page section{
  padding:clamp(72px, 9vw, 120px) 0;
}


/* ---------- ヒーロー ---------- */

.water_server_page .hero{
  position:relative;
  min-height:min(82svh, 720px);
  padding:0;
  display:flex;
  align-items:flex-end;
  background:linear-gradient(178deg,#1B7A83 0%, #14606B 28%, #0B3540 66%, #06222A 100%);
  color:#fff;
  overflow:hidden;
}

.water_server_page .hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.05) 0 1px,
    transparent 1px 46px
  );
  opacity:.6;
  pointer-events:none;
}

.water_server_page .hero-inner{
  position:relative;
  z-index:2;
  padding-block:clamp(96px,14vh,144px) clamp(56px,8vh,88px);
}

.water_server_page .hero .eyebrow{
  color:rgba(255,255,255,.75);
}

.water_server_page .hero h1{
  font-family:var(--mincho);
  font-weight:700;
  font-size:clamp(32px, 6.2vw, 64px);
  line-height:1.5;
  letter-spacing:.04em;
  margin:0 0 28.8px;
  max-width:19em;
  text-align:left;
}

.water_server_page .hero h1 .accent{
  color:var(--tachibana);
}

.water_server_page .hero-sub{
  font-family:var(--mincho);
  font-weight:500;
  font-size:clamp(18px, 2.5vw, 22.4px);
  letter-spacing:.08em;
  color:rgba(255,255,255,.9) !important;
  margin:-6.4px 0 30.4px;
  padding-top:24px;
  border-top:1px solid var(--line-dark);
  max-width:24em;
  text-align:left;
}

.water_server_page .hero p{
  max-width:34em;
  color:rgba(255,255,255,.86);
  font-size:16.32px;
}

.water_server_page .hero-sig{
  margin-top:41.6px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.6);
}


/* ---------- 深度ルーラー ---------- */

.water_server_page .ruler{
  position:absolute;
  top:0;
  bottom:0;
  right:max(20px, calc((100vw - var(--wrap))/2 - 56px));
  width:120px;
  z-index:1;
  pointer-events:none;
  font-family:var(--mono);
}

.water_server_page .ruler-line{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background:var(--line-dark);
}

.water_server_page .tick{
  position:absolute;
  left:0;
  display:flex;
  align-items:center;
  gap:9.6px;
  transform:translateY(-50%);
}

.water_server_page .tick::before{
  content:"";
  width:14px;
  height:1px;
  background:var(--line-dark);
}

.water_server_page .tick span{
  font-size:12px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.5);
}

.water_server_page .tick.is-source::before{
  width:26px;
  background:var(--tachibana);
  height:2px;
}

.water_server_page .tick.is-source span{
  color:var(--tachibana);
  font-size:11.52px;
  font-weight:500;
}

@media (max-width:820px){
  .water_server_page .ruler{
    display:none;
  }
}


/* ---------- 深度バンド ---------- */

.water_server_page .band{
  background:var(--ink);
  color:#fff;
  padding-block:clamp(56px,7vw,88px);
}

.water_server_page .band h2{
  color:#fff;
}

.water_server_page .band p{
  color:rgba(255,255,255,.78);
}

.water_server_page .band .eyebrow{
  color:var(--tachibana);
}

.water_server_page .depth-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}

@media (max-width:760px){
  .water_server_page .depth-grid{
    grid-template-columns:1fr;
  }
}

.water_server_page .bars{
  display:flex;
  flex-direction:column;
  gap:17.6px;
}

.water_server_page .bar-row{
  display:grid;
  grid-template-columns:9.5em 1fr;
  align-items:center;
  gap:16px;
}

.water_server_page .bar-row .name{
  font-size:13.76px;
  color:rgba(255,255,255,.72);
  text-align:left;
  line-height:1.5;
}

.water_server_page .bar-track{
  position:relative;
  height:10px;
  background:rgba(255,255,255,.09);
  border-radius:99px;
}

.water_server_page .bar-fill{
  position:absolute;
  inset:0 auto 0 0;
  border-radius:99px;
  background:rgba(255,255,255,.32);
}

.water_server_page .bar-row.is-us .bar-fill{
  background:linear-gradient(90deg, var(--spring), var(--tachibana));
}

.water_server_page .bar-row.is-us .name{
  color:#fff;
  font-weight:700;
}

.water_server_page .bar-val{
  font-family:var(--mono);
  font-size:11.52px;
  color:rgba(255,255,255,.55);
  margin-top:5.6px;
  display:block;
  text-align:left;
}


/* ---------- カード ---------- */

.water_server_page .cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(255px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}

.water_server_page .card{
  background:var(--paper);
  padding:32px 27.2px;
}

.water_server_page .card .kicker{
  font-family:var(--mono);
  font-size: 1.4rem;
  letter-spacing:.14em;
  color:var(--spring);
  display:block;
  margin-bottom:14.4px;
  text-align:left;
}

.water_server_page .card h3{
  font-size: 1.8rem;
  margin-bottom:8px;
}

.water_server_page .card p{
  color:var(--text-soft);
  margin:0;
  line-height:1.85;
}


/* ---------- 比較表 ---------- */

.water_server_page .table{
  width:100%;
  border-collapse:collapse;
  margin-top:40px;
  font-size:1.6rem;
}

.water_server_page .table th,
.water_server_page .table td{
  padding:18.4px 17.6px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  line-height:1.7;
}

.water_server_page .table thead th{
  font-family:var(--mono);
  font-weight:500;
  font-size:1.5rem;
  letter-spacing:.12em;
  color:var(--text-soft);
  border-bottom:1px solid var(--ink);
}

.water_server_page .table tbody th{
  font-weight:700;
  white-space:nowrap;
  font-size:15.2px;
}

.water_server_page .table tr.is-us{
  background:rgba(63,169,160,.09);
}

.water_server_page .table tr.is-us th{
  color:var(--mid);
}

.water_server_page .table tr.is-us td{
  color:var(--ink);
  font-weight:500;
}

@media (max-width:760px){

  .water_server_page .table,
  .water_server_page .table tbody,
  .water_server_page .table tr,
  .water_server_page .table td,
  .water_server_page .table th{
    display:block;
    width:100%;
  }

  .water_server_page .table thead{
    display:none;
  }

  .water_server_page .table tr{
    border:1px solid var(--line);
    margin-bottom:16px;
    padding:6.4px 0;
  }

  .water_server_page .table tbody th{
    border-bottom:none;
    padding-bottom:4.8px;
  }

  .water_server_page .table td{
    border-bottom:none;
    padding-block:7.2px;
    display:grid;
    grid-template-columns:6.5em 1fr;
    gap:12.8px;
  }

  .water_server_page .table td::before{
    content:attr(data-label);
    font-family:var(--mono);
    font-size:10.88px;
    letter-spacing:.1em;
    color:var(--text-soft);
    padding-top:.35em;
  }
}


/* ---------- 理由セクション ---------- */

.water_server_page .reasons{
  background:var(--paper-2);
}

.water_server_page .reason{
  display:grid;
  grid-template-columns:208px 1fr;
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(40px,5vw,54.4px);
  border-top:1px solid var(--line);
}

.water_server_page .reason:last-of-type{
  border-bottom:1px solid var(--line);
}

@media (max-width:760px){
  .water_server_page .reason{
    grid-template-columns:1fr;
    gap:14.4px;
  }
}

.water_server_page .reason-label{
  position:sticky;
  top:32px;
  align-self:start;
  text-align:left;
}

@media (max-width:760px){
  .water_server_page .reason-label{
    position:static;
  }
}

.water_server_page .reason-label .tag{
  font-family:var(--mincho);
  font-weight:700;
  font-size: 2.6rem;
  letter-spacing:.12em;
  color:var(--mid);
  display:block;
  line-height:1.3;
}

.water_server_page .reason-label .sub{
  font-family:var(--mono);
  font-size: 1.4rem;
  letter-spacing:.16em;
  color:var(--text-soft);
  display:block;
  margin-top:8px;
}

.water_server_page .reason-body p:last-child{
  margin-bottom:0;
}

.water_server_page .notes{
  list-style:none;
  margin:22.4px 0 0;
  padding:0;
  display:grid;
  gap:14.4px;
}

.water_server_page .notes li{
  padding-left:24px;
  position:relative;
  font-size:14.88px;
  color:var(--text-soft);
  line-height:1.85;
  text-align:left;
}

.water_server_page .notes li::before{
  content:"";
  position:absolute;
  left:0;
  top:.85em;
  width:8.8px;
  height:8.8px;
  border-radius:50%;
  border:1.5px solid var(--tachibana);
}

.water_server_page .notes li strong{
  color:var(--ink);
}


/* ---------- 引用 ---------- */

.water_server_page .quote{
  background:var(--ink);
  color:#fff;
  text-align:center;
}

.water_server_page .quote blockquote{
  margin:0;
  font-family:var(--mincho);
  font-weight:500;
  font-size:clamp(21.6px,4vw,34.4px);
  line-height:1.85;
  letter-spacing:.05em;
  text-align:center;
}

.water_server_page .quote .mark{
  color:var(--tachibana);
}

.water_server_page .quote cite{
  display:block;
  margin-top:32px;
  font-style:normal;
  font-family:var(--mono);
  font-size: 1.6rem;
  letter-spacing:.16em;
  color:rgba(255,255,255,.55);
}


/* ---------- まとめ ---------- */

.water_server_page .closing{
  text-align:center;
}

.water_server_page .closing .wrap{
  max-width: 800px;
}

.water_server_page .closing h2,
.water_server_page .closing p{
  text-align:center;
}

.water_server_page .closing h2{
  margin-inline:auto;
}

.water_server_page .summary{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:38.4px 0;
  margin:40px 0;
  font-family:var(--mincho);
  font-size:clamp(16.32px,2.4vw,19.52px);
  line-height:2.1;
  text-align:center;
}

.water_server_page .summary em{
  font-style:normal;
  color:var(--mid);
  font-weight:700;
}

.water_server_page .cta{
  display:inline-flex;
  align-items:center;
  gap:12.8px;
  margin-top:19.2px;
  padding:16.8px 41.6px;
  background:var(--mid);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  font-size:15.2px;
  border-radius:2px;
  transition:background .25s ease, transform .25s ease;
}

.water_server_page .cta:hover{
  background:var(--ink);
  transform:translateY(-2px);
}

.water_server_page .cta:focus-visible{
  outline:2px solid var(--tachibana);
  outline-offset:3px;
}

.water_server_page .cta .arrow{
  font-family:var(--mono);
}


/* ---------- 出現アニメーション ---------- */

.water_server_page .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease, transform .8s ease;
}

.water_server_page .reveal.is-in{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){

  .water_server_page .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .water_server_page .cta{
    transition:none;
  }
}

@media print{

  .water_server_page .hero{
    min-height:auto;
    color:#000;
    background:none;
  }

  .water_server_page .hero h1,
  .water_server_page .hero p,
  .water_server_page .band,
  .water_server_page .quote{
    color:#000;
    background:none;
  }

  .water_server_page .reveal{
    opacity:1;
    transform:none;
  }
}