/* 見本 (c) しおまち舎「潮と余白」: 霧のような青灰色の地に、深い海の色を1つ。
   写真は揃えずにずらして置き、縦書きの小さな添え書きで雑誌のような余白をつくる。
   見出しは Zen Old Mincho（使う字だけに絞った woff2）、本文は Zen Kaku Gothic New */
@font-face{font-family:'Zen Old Mincho';font-weight:700;font-display:swap;src:url('/samples/yado/fonts/zenold-700.woff2') format('woff2')}
@font-face{font-family:'Zen Old Mincho';font-weight:400;font-display:swap;src:url('/samples/yado/fonts/zenold-400.woff2') format('woff2')}
:root{--fog:#e9edec;--fog2:#dfe5e4;--ink:#16262c;--mute:#56666b;--sea:#1f4d55;--line:#c9d2d1;
  --min:'Zen Old Mincho','Hiragino Mincho ProN',serif;--g:'Zen Kaku Gothic New',system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fog);color:var(--ink);font:400 16px/2.05 var(--g);letter-spacing:.05em}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--min);font-weight:700;letter-spacing:.08em;word-break:auto-phrase}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}

/* ヘッダー（トップは動画の上に白で重ねる） */
.hd{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 40px;position:relative;z-index:3}
.hd--over{position:absolute;left:0;right:0;color:#fff}
.logo{text-decoration:none;font:700 22px/1.3 var(--min);letter-spacing:.2em}
.logo small{display:block;font:400 11px/1.4 var(--g);letter-spacing:.3em;opacity:.8}
.nav{display:flex;align-items:center;gap:26px;font-size:14px}
.nav a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:currentColor}
.nav .cta{border:1px solid currentColor;padding:10px 16px}
.nav .cta:hover{background:var(--sea);border-color:var(--sea);color:#fff}

/* 最初の画面の動画 */
.hero{position:relative;height:100svh;min-height:620px;color:#fff;overflow:hidden;background:#27343a}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,22,26,.45) 0%,rgba(14,22,26,0) 30%,rgba(14,22,26,0) 50%,rgba(14,22,26,.62) 100%)}
.hero__txt{position:absolute;z-index:2;left:40px;right:40px;bottom:clamp(40px,8vh,88px)}
.hero h1{font-size:clamp(40px,6vw,88px);line-height:1.35;margin:0}
.hero p{margin:18px 0 28px;font-size:clamp(15px,1.3vw,18px);max-width:28em}
.btn{display:inline-block;background:var(--sea);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.12em;padding:18px 28px}
.btn--w{background:#fff;color:var(--ink)}
.btn:focus-visible,.nav a:focus-visible,.more:focus-visible,.pause:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.pause{position:absolute;z-index:2;right:40px;bottom:clamp(40px,8vh,88px);background:none;border:1px solid rgba(255,255,255,.7);color:#fff;
  font:500 12px/1 var(--g);letter-spacing:.12em;padding:10px 14px;cursor:pointer}

/* 本文 */
.sec{padding:clamp(88px,11vw,156px) 0}
.sec--deep{background:var(--ink);color:#e6ecea}
.sec--alt{background:var(--fog2)}
.h2{font-size:clamp(28px,3.6vw,46px);line-height:1.45;margin:0 0 24px}
.more{display:inline-block;margin-top:28px;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.note{font-size:13px;color:var(--mute)}
.sec--deep .note{color:#9fb0b1}
.vcap{writing-mode:vertical-rl;font:400 13px/1.9 var(--min);letter-spacing:.3em;color:var(--mute);margin:0}

/* 下層の見出し */
.ph{padding:clamp(56px,8vw,112px) 0 clamp(40px,5vw,64px)}
.ph h1{font-size:clamp(34px,4.8vw,60px);line-height:1.35;margin:0}
.ph p{margin:16px 0 0;max-width:36em;color:var(--mute)}

dl.tbl{display:grid;grid-template-columns:9em minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.tbl dt,.tbl dd{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.tbl dt{color:var(--mute);font-size:14px}

.ft{background:var(--ink);color:#e6ecea;padding:56px 0 48px;font-size:14px}
.ft__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 48px}
.ft a{color:#e6ecea;text-decoration:none}
.ft nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.ft p{margin:0}
.ft small{display:block;margin-top:32px;color:#8fa0a2;font-size:12px}

@media (prefers-reduced-motion:no-preference){
  .hero__txt{animation:yUp 1.4s .3s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes yUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .wrap{padding:0 16px}
  .hd{flex-wrap:wrap;padding:14px 16px;gap:8px}
  .nav{width:100%;flex-wrap:wrap;gap:6px 18px;font-size:13px}
  .nav .cta{padding:6px 10px}
  .hero{height:88svh;min-height:560px}
  .hero__txt{left:16px;right:16px;bottom:88px}
  .pause{right:16px;bottom:32px}
  dl.tbl{grid-template-columns:6.5em minmax(0,1fr)}
}