@charset "utf-8";

:root{
  
  --paper:      #F7FAFC;  
  --ink:        #16181C;  
  --ink-strong: #000000;  
  --mizu:       #C4E4F6;  
  --sora:       #33618F;  
  --rule:       #16181C1f;

  
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:144px;
  --gutter:  clamp(22px, 3.89vw, 56px);   
  --sec-top: clamp(80px, 10vw, 144px);    
  --sec-bot: calc(var(--sec-top) * 1.15); 

  --t0: 13.5px;
  --t1: 17px;
  --t2: clamp(18px, 1.46vw, 21px);
  --t3: clamp(20px, 1.88vw, 27px);
  --t4: clamp(24px, 2.50vw, 36px);  

  --w-head: 300;   
  --w-body: 400;   

  --cw: 1080px;
  --measure: 34em;

  --gothic: "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--gothic); font-weight:var(--w-body); font-size:var(--t1); line-height:2.0;
  letter-spacing:.05em;
  font-feature-settings:"palt" 1;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

a,button,input,select,textarea,table,th,td{ border-radius:0; box-shadow:none }

.wrap{ width:100%; max-width:var(--cw); margin-inline:auto; padding-inline:var(--gutter) }
.measure{ max-width:var(--measure) }
.t0{ font-size:var(--t0) }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.hd{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky; top:0; z-index:20;
}
.hd__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); min-height:72px;
}
.hd__logo{ display:block; text-decoration:none; line-height:0 }
.hd__logo small{
  display:block; font-family:var(--gothic); font-size:var(--t0);
  letter-spacing:.18em; color:var(--sora); line-height:1.6; margin-top:2px;
}

.hd__logo img{ width:auto; height:44px; max-width:153px }
@media(max-width:760px){ .hd__logo img{ height:38px } }
.nav{ display:flex; gap:clamp(14px,1.8vw,28px); flex-wrap:wrap; list-style:none; margin:0; padding:0 }
.nav a{
  font-size:var(--t0); letter-spacing:.12em; text-decoration:none;
  padding-block:6px; border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:var(--sora) }  

@media(max-width:760px){
  
  .hd{ position:static }
  .hd__in{ flex-direction:column; align-items:flex-start; gap:var(--s2);
           min-height:0; padding-block:var(--s3) }
  .nav{ gap:var(--s1) var(--s3) }
}

.fv{
  padding-block:var(--sec-top) var(--sec-bot);
  
  background-image:
    linear-gradient(180deg, var(--mizu) 0%, transparent 68%);
}

.fv__in{ display:grid; gap:var(--s4) }
@media(min-width:1100px){
  .fv__in{
    grid-template-columns:7fr 5fr;
    
    grid-template-areas:"tag pic" "lead lead";
    align-items:start; column-gap:var(--s4); row-gap:var(--s5);
  }
  .tag{ grid-area:tag }
  .fv__lead{ grid-area:lead }
  
  .fv__pic{ grid-area:pic; align-self:start;
            margin-top:calc(-1 * var(--sec-top)); margin-right:calc(-1 * var(--gutter)) }
  
  .fv__lead{ max-width:var(--measure) }
}
.fv__pic img{ width:100%; height:auto }

@media(max-width:1099px){
  
  .fv__pic{ margin-right:calc(-1 * var(--gutter)) }
  .fv__pic img{ aspect-ratio:16/5; object-fit:cover; object-position:100% 100%;
                max-height:240px }
}

.tag{
  margin:0; color:var(--ink-strong);
  font-family:var(--gothic); font-weight:var(--w-head);
  
  font-size:min(clamp(36px, 4.17vw, 60px), calc((100vw - 2*var(--gutter)) / 8.82));
  letter-spacing:.04em; line-height:1.42;
}
.tag em{ font-style:normal; display:block }   
.fv__lead{

  font-family:var(--gothic); font-size:var(--t2);
  line-height:1.9; margin:var(--s4) 0 0;
}

@media(min-width:1100px){ .fv__lead{ margin-top:0 } }
.fv__lead p{ margin:0 0 var(--s3) }
.fv__lead p:last-child{ margin-bottom:0 }

.pic{ margin:var(--s6) 0 0; max-width:calc(var(--measure) - 2 * var(--gutter)) }
.pic img{ width:100%; height:auto; display:block }
@media(max-width:760px){ .pic{ margin-top:var(--s5) } }

.sec{ padding-block:var(--sec-top) var(--sec-bot); border-top:1px solid var(--rule) }
.sec--flat{ padding-block:var(--s6) }   
.sec__label{
  font-size:var(--t0); letter-spacing:.2em; color:var(--sora);
  margin:0 0 var(--s3);
}
h1.ph, h2.sh{
  font-family:var(--gothic); font-weight:var(--w-head); color:var(--ink-strong);
  letter-spacing:.06em; line-height:1.5; margin:0 0 var(--s4);
  
  max-width:var(--measure);
}
h1.ph{ font-size:var(--t4) }
h2.sh{ font-size:var(--t3) }
.sec p{ margin:0 0 var(--s3); max-width:var(--measure) }
.sec p:last-child{ margin-bottom:0 }

.rule-mizu{ border:0; border-top:2px solid var(--mizu); margin:var(--s5) 0; max-width:var(--measure) }

.fig{ margin:var(--s5) 0 0; max-width:var(--measure) }

.fig--steps{ max-width:none }
.fig svg{ overflow:visible }   
.fig svg{ width:100%; height:auto; display:block; color:var(--ink-strong) }
.fig figcaption{
  font-size:var(--t0); letter-spacing:.08em; color:var(--sora);
  margin-top:var(--s2);
}

.trio{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s5) var(--s4); margin-top:var(--s5);
}
.trio p{ font-size:var(--t1); margin:0; max-width:none }

.trio p + p{ margin-top:var(--s3) }

.trio p.trio__v{
  font-family:var(--gothic); font-weight:var(--w-head); color:var(--ink-strong);
  font-size:var(--t3); letter-spacing:.08em;
  margin:0 0 var(--s2); padding-top:var(--s2); border-top:2px solid var(--mizu);
}

.trio--2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
@media(max-width:820px){ .trio{ grid-template-columns:1fr; gap:var(--s4) }
  .trio--2{ grid-template-columns:1fr } }

.two{
  display:grid; grid-template-columns:200px minmax(0,1fr);
  gap:var(--s5); align-items:start;
}
.two__label{ position:sticky; top:104px; font-size:var(--t0); letter-spacing:.2em; color:var(--sora) }
@media(max-width:900px){
  .two{ grid-template-columns:1fr; gap:var(--s4) }
  .two__label{ position:static }
}

.dl{ margin:0; display:grid; grid-template-columns:clamp(120px,14vw,180px) minmax(0,1fr) }
.dl dt,.dl dd{
  margin:0; padding:var(--s3) 0; border-top:1px solid var(--rule); font-size:var(--t1);
}
.dl dt{ letter-spacing:.1em; color:#16181Cb0; padding-right:var(--s3) }
.dl dd ul{ margin:0; padding-left:1.2em }
@media(max-width:640px){
  .dl{ grid-template-columns:1fr }
  .dl dt{ padding-bottom:0; border-top:1px solid var(--rule) }
  .dl dd{ border-top:0; padding-top:var(--s1) }
}

.biz{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:0 }
.biz li{ border-top:1px solid var(--rule); padding:var(--s3) 0 }
.biz a{ text-decoration:none; border-bottom:1px solid var(--mizu) }
.biz span{ display:block; font-size:var(--t0); color:#16181Cb0; letter-spacing:.08em }

.news{ list-style:none; margin:var(--s4) 0 0; padding:0 }
.news li{ border-top:1px solid var(--rule); padding:var(--s3) 0; display:grid;
  grid-template-columns:clamp(88px,10vw,120px) minmax(0,1fr); gap:var(--s3) }
.news time{ font-size:var(--t0); color:#16181Cb0; letter-spacing:.08em; font-variant-numeric:tabular-nums }
.news a{ text-decoration:none; border-bottom:1px solid transparent }
.news a:hover{ border-bottom-color:var(--mizu) }
@media(max-width:560px){ .news li{ grid-template-columns:1fr; gap:var(--s1) } }

.ft{ border-top:1px solid var(--rule); padding-block:var(--s6) var(--s5); margin-top:var(--sec-top) }
.ft__nav{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); list-style:none; margin:0 0 var(--s5); padding:0 }
.ft__nav a{ font-size:var(--t0); letter-spacing:.12em; text-decoration:none; border-bottom:1px solid transparent }
.ft__nav a:hover{ border-bottom-color:var(--mizu) }
.ft small{ font-size:var(--t0); color:#16181Cb0; letter-spacing:.08em }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

.fv{ position:relative; --p:0 }

html.js-motion .fv{ padding-block:0; background-image:none; height:300vh }
@supports (height:100svh){ html.js-motion .fv{ height:300svh } }

html.js-motion .fv__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  
  display:flex; align-items:center;
  padding-block:clamp(48px,5.5vw,80px);
  
  background-image:linear-gradient(180deg, var(--mizu) 0%, transparent 68%);
  background-color:var(--paper);
}
@supports (height:100svh){ html.js-motion .fv__stage{ height:100svh } }

.fv__sky,.fv__stars,.fv__sea,.fv__clouds{ position:absolute; inset:0; pointer-events:none }

.fv__sky--2{ z-index:1; background:linear-gradient(180deg,#8FC4E6 0%,#5E93C4 58%,#33618F 100%);
  opacity:clamp(0, calc((var(--p) - 0.60) / 0.16), 1) }

.fv__sky--3{ z-index:1; background:linear-gradient(180deg,#1B3358 0%,#0A1020 100%);
  opacity:clamp(0, calc((var(--p) - 0.80) / 0.12), 1) }

.fv__stars{ z-index:2;
  opacity:clamp(0, calc((var(--p) - 0.86) / 0.12), 1);
  background-image:
    radial-gradient(circle, #FFFFFF 0 1.1px, transparent 1.7px),
    radial-gradient(circle, #FFFFFF 0 0.8px, transparent 1.3px),
    radial-gradient(circle, #DCEBF7 0 1.5px, transparent 2.1px);
  background-size:213px 197px, 137px 151px, 331px 289px;
  background-position:0 0, 61px 43px, 137px 91px;
  
  animation:sky-twinkle 6.5s ease-in-out infinite alternate }
@keyframes sky-twinkle{ from{ filter:opacity(.5) } to{ filter:opacity(1) } }

.fv__ground{ position:absolute; inset:auto 0 9% 0; height:150px; z-index:2;
  background-repeat:no-repeat }

.fv__ground--road{ opacity:clamp(0, calc((var(--p) - 0.14) / 0.08), 1) }
.fv__ground--road::before{ content:""; position:absolute; inset:0;
  opacity:clamp(0, calc((0.34 - var(--p)) / 0.08), 1);
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--ink-strong) 0 0),linear-gradient(var(--ink-strong) 0 0),
    linear-gradient(var(--ink-strong) 0 0);
  background-size:46% 3px, 30% 3px, 38% 3px;
  background-position:4% 22px, 60% 62px, 22% 104px }

.fv__ground--sea{ opacity:clamp(0, calc((var(--p) - 0.28) / 0.08), 1) }
.fv__ground--sea::before{ content:""; position:absolute; inset:0;
  opacity:clamp(0, calc((0.58 - var(--p)) / 0.08), 1);
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--ink-strong) 0 0),linear-gradient(var(--ink-strong) 0 0),
    linear-gradient(var(--ink-strong) 0 0),linear-gradient(var(--ink-strong) 0 0),
    linear-gradient(var(--ink-strong) 0 0),linear-gradient(var(--ink-strong) 0 0);
  background-size:96px 3px,138px 3px,72px 3px,110px 3px,64px 3px,120px 3px;
  background-position:6% 10px,23% 46px,45% 88px,67% 28px,81% 120px,13% 136px;
  animation:sky-swell 60s ease-in-out infinite alternate }
@keyframes sky-swell{ to{ transform:translateY(7px) } }

.fv__clouds{ z-index:2; opacity:clamp(0, calc((var(--p) - 0.54) / 0.08), 1) }

.cl{ position:absolute; height:auto; bottom:var(--cb);
     opacity:clamp(0, calc((0.84 - var(--p)) / 0.08), 1) }
.cl--a{ width:min(52%, 620px); left:-4%;  --cb:-7% }
.cl--b{ width:min(40%, 470px); right:-3%; --cb:-11%;
        opacity:clamp(0, calc((0.84 - var(--p)) / 0.08 * 0.7), 1) }
.cl--c{ width:min(30%, 350px); left:38%;  --cb:-4%;
        opacity:clamp(0, calc((0.84 - var(--p)) / 0.08 * 0.5), 1) }

.fv__cast{ position:absolute; inset:0; z-index:3; pointer-events:none }

.ch{ position:absolute; left:var(--x); bottom:var(--b);
  height:calc(var(--h) * var(--k, 1)); width:auto; transform:translateX(-50%);
  
  opacity:clamp(0, calc((var(--p) - var(--in)) / 0.08), 1);
  
  filter:opacity(var(--dim))
         invert(clamp(0, calc((var(--p) - 0.809) / 0.012), 1)) }

.ch--me{ height:calc(var(--h) * var(--k, 1)); width:auto }
.ch--me .me{ height:100%; width:auto; display:block }
.me--bare{ opacity:clamp(0, calc((0.74 - var(--p)) / 0.12), 1) }
.me--suit{ position:absolute; left:50%; top:0; height:100%; width:auto;
           transform:translateX(-50%);
           opacity:clamp(0, calc((var(--p) - 0.62) / 0.12), 1) }

.ch--front{ --h:clamp(150px, 19vw, 280px);   --b:7%;  --dim:1 }
.ch--mid  { --h:clamp(105px, 13vw, 195px);   --b:21%; --dim:.85 }
.ch--back { --h:clamp(74px, 9vw, 135px);     --b:33%; --dim:.6 }
.ch--boat { --h:clamp(46px, 6vw, 86px);      --b:19%; --dim:.7 }

html.js-motion .fv__in{ position:relative; z-index:4;
  opacity:clamp(0, calc((0.20 - var(--p)) / 0.14), 1) }
html.js-motion .fv__pic{ opacity:clamp(0, calc((0.18 - var(--p)) / 0.13), 1) }

@media(min-width:1100px){
  html.js-motion .fv__sky,
  html.js-motion .fv__stars,
  html.js-motion .fv__ground,
  html.js-motion .fv__clouds,
  html.js-motion .fv__cast{ z-index:-1 }
  html.js-motion .fv__in{ position:static }
  html.js-motion .fv__pic{
    position:absolute; top:0; right:0; margin:0;
    width:min(34vw, 470px); z-index:0;
  }
}

@media(prefers-reduced-motion:reduce){
  
  html.js-motion .fv{ height:auto; padding-block:var(--sec-top) var(--sec-bot);
    background-image:linear-gradient(180deg, var(--mizu) 0%, transparent 68%) }
  html.js-motion .fv__stage{ position:static; height:auto; display:block;
    padding:0; background:none; overflow:visible }
  .fv__sky,.fv__stars,.fv__ground,.fv__clouds,.fv__cast{ display:none }
  html.js-motion .fv__in,html.js-motion .fv__pic{ opacity:1 }
}

html.js-reveal .rv.is-armed{
  opacity:0;
  transform:translateY(14px);
}

html.js-reveal .rv.is-armed.is-in{
  opacity:1;
  transform:none;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),
             transform .72s cubic-bezier(.22,.61,.36,1);
}

@media(prefers-reduced-motion:reduce){
  html.js-reveal .rv.is-armed{ opacity:1; transform:none; transition:none }
}

html:not(.js-motion) .fv__sky,
html:not(.js-motion) .fv__stars,
html:not(.js-motion) .fv__ground,
html:not(.js-motion) .fv__clouds,
html:not(.js-motion) .fv__cast{ display:none }

.pic .weave{ display:block; width:100%; height:auto; aspect-ratio:960/720 }

.weave{ --wp:1; --ws:1.6 }   

html.js-weave .weave .wv,
html.js-weave .weave .wf{
  
  --q: clamp(0, calc((var(--wp) * (var(--n) - 1 + var(--ws)) - var(--i)) / var(--ws)), 1);
}

html.js-weave .weave .wv{
  
  stroke-dasharray: calc(101 * var(--q)) 500;
  opacity: clamp(0, calc(var(--q) * 1000), 1);
}

html.js-weave .weave .wf{ opacity: clamp(0, calc((var(--q) - .84) / .16), 1) }

@media(prefers-reduced-motion:reduce){
  html.js-weave .weave .wv{ stroke-dasharray:none; opacity:1 }
  html.js-weave .weave .wf{ opacity:1 }
}

:root{
  --sec-top:clamp(56px,6.67vw,96px);
  --sec-bot:clamp(64px,7.78vw,112px);
}
body{ line-height:1.9; letter-spacing:.025em; line-break:strict; overflow-wrap:break-word }
main{ min-width:0 }
.wrap > *, .trio > *{ min-width:0 }
h1.ph,h2.sh{ letter-spacing:.035em; text-wrap:balance }
h1.ph{ margin-bottom:32px; line-height:1.55 }
h2.sh{ margin-bottom:28px }
.sec > .wrap > p{ max-width:34em }
.sec__label{ letter-spacing:.12em; line-height:1.6 }
.sec p.sec__label{ margin-bottom:24px }
.sec__label::before{
  content:""; display:inline-block; width:24px; height:2px;
  background:var(--mizu); margin-right:12px; vertical-align:middle;
}
.sec--flat{ padding-block:64px 80px }
main > .sec:first-child{ border-top:0 }
.rule-mizu{ margin-block:40px 24px; max-width:100% }
strong{ font-weight:600 }
a{ text-underline-offset:5px; text-decoration-thickness:1px }
a:hover{ color:var(--sora) }
a:focus-visible{ outline:2px solid var(--sora); outline-offset:5px }
.rule-mizu + p a{ display:inline-block; padding-block:10px }

.hd__in{ min-height:88px }
.hd__logo{ flex-shrink:0 }
.hd nav{ flex-shrink:0; width:420px }
.nav{ gap:24px; flex-wrap:nowrap; width:100%; justify-content:space-between }
.nav li{ flex:0 0 auto }
.nav a{ display:block; min-height:44px; padding-block:9px; letter-spacing:.06em; white-space:nowrap }
.nav a[aria-current="page"]{ color:var(--sora); border-bottom-width:2px }
.ft{ margin-top:0; padding-block:56px 32px; border-top:2px solid var(--mizu) }
.ft__nav{ gap:8px 32px; margin-bottom:32px }
.ft__nav a{ display:block; padding-block:9px; min-height:44px; letter-spacing:.06em }
.ft small{ display:block; font-size:11px; letter-spacing:.06em; line-height:1.8 }

.dl{ grid-template-columns:152px minmax(0,1fr); border-bottom:1px solid var(--rule) }
.dl dt,.dl dd{ padding-block:22px; line-height:1.85 }
.dl dt{ font-size:14px; color:var(--sora); letter-spacing:.045em; padding-right:24px }
.dl dd ul{ list-style:none; padding-left:0 }
.dl dd li + li{ margin-top:6px }
.biz{ margin-top:32px; border-bottom:1px solid var(--rule) }
.biz li{ padding-block:22px }
.biz span{ margin-top:6px; letter-spacing:.04em }

.news{ margin-top:32px; border-bottom:1px solid var(--rule) }
.news li{ grid-template-columns:112px minmax(0,1fr); gap:24px; padding-block:24px; align-items:baseline }
.news time{ color:var(--sora); letter-spacing:.04em; white-space:nowrap }
.news a{ min-width:0; max-width:100%; overflow-wrap:anywhere; line-height:1.8; padding-block:3px; text-decoration:underline; text-decoration-color:transparent }
.news a:hover,.news a:focus-visible{ border-bottom-color:transparent; text-decoration-color:var(--sora) }
.page-news .news{ margin-top:48px }
.page-news .rule-mizu{ margin-top:32px }

.intro .pic{ margin-top:40px; width:100%; max-width:360px }
.intro .fig{ margin-top:32px }
.trio{ gap:40px 36px; margin-top:40px }
.trio p{ line-height:1.9 }
.trio p.trio__v{ padding-top:18px; margin-bottom:20px; letter-spacing:.04em }
.trio p + p{ margin-top:24px }
.fig{ margin-top:40px }
.fig figcaption{ letter-spacing:.035em; line-height:1.75 }
.page-recruit .trio--2{ column-gap:56px }
.page-recruit .trio--2 strong{ font-weight:600 }
.page-recruit .trio--2 + .rule-mizu{ margin-block:64px 40px }
.page-recruit .sec--flat .dl{ max-width:880px }
.page-business .sec--flat{ padding-block:56px 72px }

.page-privacy .wrap.measure{ max-width:calc(720px + 2 * var(--gutter)) }
.page-privacy .sec > .wrap > p{ max-width:none }
.page-privacy h2.sh{
  margin-top:56px; margin-bottom:20px; padding-top:24px;
  border-top:2px solid var(--mizu); font-size:21px; line-height:1.65;
  text-wrap:wrap;
}
.page-privacy .dl{ grid-template-columns:144px minmax(0,1fr) }
.page-privacy .dl dt,.page-privacy .dl dd{ padding-block:18px }
.page-privacy .biz{ margin-top:24px }
.page-privacy .biz li{ padding-block:16px }

.page-topic .wrap.measure{ max-width:var(--cw) }
.page-topic h1.ph{ max-width:21em; margin-bottom:28px }
.page-topic .sec p.t0{ color:var(--sora); font-variant-numeric:tabular-nums; letter-spacing:.06em }
.page-topic .pic{ width:100%; max-width:320px; margin:32px 0 0 auto }
.page-topic .rule-mizu{ width:100%; margin-block:32px 16px }
.page-topic .rule-mizu + p{ font-size:14px; max-width:none }
.page-topic .sec{ padding-bottom:64px }

@media(min-width:901px){
  .page-index .sec > .wrap{
    display:grid; grid-template-columns:160px minmax(0,1fr); column-gap:56px;
  }
  .page-index .sec > .wrap > *{ grid-column:2 }
  .page-index .sec > .wrap > .sec__label{ grid-column:1; grid-row:1 / 10; padding-top:9px }
  .page-index .sec .news{ margin-top:0 }
  .page-index .sec h2.sh{ font-size:28px }
  .page-company .sec--flat > .wrap{
    display:grid; grid-template-columns:160px minmax(0,1fr); gap:56px;
  }
  .page-company .sec--flat .sec__label{ padding-top:24px }
  .page-company .dl{ grid-template-columns:128px minmax(0,1fr) }
  .intro > .wrap{
    display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr);
    column-gap:48px; align-items:start;
  }
  .intro > .wrap > *{ grid-column:1 }
  .intro > .wrap > .pic{ grid-column:2; grid-row:1 / 7; align-self:center; margin:0; justify-self:end }
  .intro h1.ph{ font-size:34px }
  .page-topic .wrap.measure{
    display:grid; grid-template-columns:128px minmax(0,1fr); column-gap:56px;
  }
  .page-topic .wrap > *{ grid-column:2 }
  .page-topic .wrap > .sec__label{ grid-column:1; grid-row:1; padding-top:10px }
  .page-topic .wrap > .t0{ grid-column:1; grid-row:2; margin:0 }
  .page-topic h1.ph{ grid-row:1 / 3 }
}
@media(max-width:900px){
  .intro .pic{ margin-left:auto; max-width:320px }
  .page-topic .wrap.measure{ max-width:calc(680px + 2 * var(--gutter)) }
}
@media(max-width:760px){
  .hd__in{ min-height:0; padding-block:16px 12px; gap:12px }
  .hd nav{ width:100% }
  .nav{ display:flex; justify-content:space-between; gap:8px; width:100% }
  .nav li{ flex:0 0 auto }
  .nav a{ font-size:12px; letter-spacing:0; white-space:nowrap; padding-block:10px }
  .ft{ padding-block:32px 24px }
  .ft__nav{ display:grid; width:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; margin-bottom:24px }
  .ft__nav li:last-child{ grid-column:1 / span 2 }
  .ft__nav li:nth-child(1){ grid-column:1; grid-row:1 }
  .ft__nav li:nth-child(2){ grid-column:2; grid-row:1 }
  .ft__nav li:nth-child(3){ grid-column:1; grid-row:2 }
  .ft__nav li:nth-child(4){ grid-column:2; grid-row:2 }
  .ft__nav li:nth-child(5){ grid-row:3 }
  .ft__nav a{ display:inline-block; white-space:nowrap }
  .sec--flat{ padding-block:48px 64px }
  h1.ph{ font-size:26px; margin-bottom:28px }
  h2.sh{ font-size:22px }
  .rule-mizu{ margin-block:32px 16px }
  .page-topic .pic{ max-width:280px; margin-top:24px }
  .page-topic .sec{ padding-top:40px; padding-bottom:48px }
  .page-topic .sec p.sec__label{ margin-bottom:12px }
  .page-topic .sec p.t0{ margin-bottom:20px }
  .page-privacy h2.sh{ font-size:20px; margin-top:44px; padding-top:20px }
}
@media(max-width:640px){
  .dl,.page-privacy .dl{ grid-template-columns:1fr }
  .dl dt,.page-privacy .dl dt{ padding-top:18px; padding-bottom:0 }
  .dl dd,.page-privacy .dl dd{ border-top:0; padding-top:8px; padding-bottom:20px }
}
@media(max-width:560px){
  .news li{ grid-template-columns:1fr; gap:6px; padding-block:20px }
  .news a{ padding-block:3px }
  .page-news .news{ margin-top:32px }
}