@charset "utf-8";

/* =========================================================
   さわやか無線センター TOP
   - カンプ実測値（Illustrator「showa」1366×768）を :root に採取
   - フレキシブル: --u = 1366px設計基準の1px。全KV座標を calc(var(--u)*N) で記述
   ========================================================= */

:root{
  /* color（カンプ採取値） */
  --ground:#efefef;
  --sky:#ecf8f5;               /* 3Dステージの空。canvasのクリア色と合わせる（カンプのabout背景） */
  --ink:#212121;
  --teal:#268e83;
  --blue:#0161b5;
  --white:#fff;
  --date:#c1c1c1;
  --line:#dcdcdc;
  --sub:#6b6b6b;

  /* font */
  --font-sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  /* DIN 2014 は Adobe Fonts kit 追加後に有効化（未読込時は Noto Sans JP へフォールバック） */
  --font-din:"din-2014",var(--font-sans);

  /* layout */
  --frame:15px;                /* 画面を覆うマスクの太さ（天地左右） */
  --frame-color:#268e83;
  --frame-radius:20px;         /* 表示エリア側の角丸 */
  --u:1px;                     /* 1366px設計の1px相当（下でvw連動） */
  --container:1180px;
  --gutter:clamp(20px,5vw,50px);
  --header-h:64px;

  /* z-index */
  --z-stage:0;
  --z-content:5;
  --z-gnav:90;
  --z-header:100;
  --z-frame:300;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--frame-color);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.8;
  overflow-x:clip;
}

img,svg{max-width:100%;height:auto;vertical-align:middle}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---------------------------------------------------------
   画面全体のマスク
   天地左右 var(--frame) ぶんを常時ブランドカラーで覆う
   --------------------------------------------------------- */
.frame{
  position:fixed;
  inset:var(--frame);
  z-index:var(--z-frame);
  pointer-events:none;
  border-radius:var(--frame-radius);
  /* 角丸の外側をまとめて塗り潰す。border＋border-radiusだと
     外側の角から中身が覗いてしまうため、広げた影で覆う */
  box-shadow:0 0 0 100vmax var(--frame-color);
}

/* ---------------------------------------------------------
   3D ステージ（KV〜about を貫通する固定背景）
   --------------------------------------------------------- */
.stage{
  position:fixed;
  inset:0;
  z-index:var(--z-stage);
  pointer-events:none;
}
.stage__canvas{display:block;width:100%;height:100%}
/* JSがcanvasを畳むときに display:block に負けないようにする */
.stage__canvas[hidden]{display:none}

/* 3Dが使えない環境向けの静止画フォールバック */
.stage__fallback[hidden]{display:none}

.stage__fallback{
  position:absolute;
  inset:0;
  margin:0;
  display:grid;
  place-items:center;
}
.stage__fallback img{width:min(64vw,880px);height:auto}

/* ---------------------------------------------------------
   共通パーツ
   --------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  color:var(--white);
  font-weight:700;
  font-size:15px;
  line-height:1;
  letter-spacing:.02em;
  transition:opacity .25s ease,transform .25s ease;
}
.btn:hover{opacity:.86}
.btn:active{transform:translateY(1px)}
.btn--blue{background:var(--blue)}
.btn--teal{background:var(--teal)}
.btn--ink{background:var(--ink);color:var(--white);border-radius:999px}
.btn--wide{min-width:min(100%,320px)}
.btn__icon{flex:none;width:auto}
.btn--blue .btn__icon{height:1.75em}
.btn--teal .btn__icon{height:1.4em}
.btn__label{white-space:nowrap}

.label{
  display:inline-block;
  font-family:var(--font-din);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--teal);
}

/* ---------------------------------------------------------
   header
   --------------------------------------------------------- */
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:var(--z-header);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px var(--gutter);
}
.header__logo{line-height:1}
.header__logo-link{display:block}
.header__logo-link img{width:154px;height:auto}

.header__actions{
  display:flex;
  align-items:center;
  gap:12px;
}
/* SPではヘッダ内CTAを隠し、固定下部バーへ回す */
.header__actions .btn{display:none}

.hamburger{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  width:44px;
  height:44px;
  align-items:flex-end;
}
.hamburger__bar{
  display:block;
  width:34px;
  height:2px;
  background:var(--ink);
  transition:transform .3s ease,opacity .2s ease;
}
.hamburger__label{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1){transform:translateY(5px) rotate(20deg)}
.hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2){transform:translateY(-5px) rotate(-20deg)}


/* ---------------------------------------------------------
   「タクシーを呼ぶ」モーダル
   --------------------------------------------------------- */
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:var(--gutter);
  background:rgba(33,33,33,.42);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__dialog{
  position:relative;
  width:min(520px,100%);
  max-height:86svh;
  overflow:auto;
  padding:38px clamp(22px,5vw,40px) 34px;
  border-radius:20px;
  background:var(--white);
}
.modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
}
.modal__close::before,
.modal__close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:17px;
  height:2px;
  background:var(--ink);
}
.modal__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.modal__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.modal__title{
  margin:10px 0 0;
  font-size:26px;
  font-weight:900;
  line-height:1.4;
}
.modal__text{
  margin-top:12px;
  color:var(--sub);
  font-size:13.5px;
}
.modal__tels{display:grid;gap:12px;margin-top:22px}
.modal__tel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:14px;
  transition:border-color .2s ease,background-color .2s ease;
}
.modal__tel:hover{border-color:var(--teal);background:rgba(38,142,131,.05)}
.modal__tel-area{font-size:13px;font-weight:700}
.modal__tel-num{
  font-family:var(--font-din);
  font-size:26px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--teal);
}

/* ---------------------------------------------------------
   gnav（PC: KV左の縦並び／SP: ドロワー）
   --------------------------------------------------------- */
.gnav{
  position:fixed;
  inset:0;
  z-index:var(--z-gnav);
  display:grid;
  align-content:center;
  padding:0 var(--gutter);
  background:var(--sky);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.gnav.is-open{opacity:1;visibility:visible}
.gnav__label{
  margin:0 0 18px;
  font-family:var(--font-din);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--date);
}
.gnav__list{display:grid;gap:22px}
.gnav__link{
  display:inline-block;
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ---------------------------------------------------------
   KV
   --------------------------------------------------------- */
.kv{
  position:relative;
  z-index:var(--z-content);
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:22px;
  padding:calc(var(--header-h) + 24px) var(--gutter) 96px;
}
.kv__copy{display:grid;gap:10px}
.kv__lead{
  font-size:clamp(17px,4.6vw,22px);
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.3;
}
.kv__title{line-height:0}
.kv__title img{width:min(100%,460px);height:auto}

/* ---- お知らせ（KVマージ版） ---- */
.news{position:relative;text-align:right}
.news__more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 16px;
  background:var(--white);
  border-radius:10px 10px 0 0;
  font-size:13px;
  font-weight:700;
}
.news__list{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.news__panel{
  position:relative;
  background:var(--white);
  /* 右上は「一覧はこちら」タブと連結させるため角丸なし */
  border-radius:14px 0 14px 14px;
  padding:16px 46px 16px 18px;
  text-align:left;
  /* 中の .news__item は position:absolute なので、パネル自身は中身から
     高さを得られない。SPでは高さ指定が無く2行目が見切れるため最低限を確保する
     （PCでは下のメディアクエリで height が入る）。 */
  min-height:92px;
}
/* 送りは「現在の記事が抜ける方向」へスライドしながらフェード、
   入れ替わりの記事は反対側からスライドインする */
.news__item{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(100%);
  transition:opacity .38s ease,
             transform .55s cubic-bezier(.22,.75,.2,1),
             visibility .38s step-end;
}
.news__item.is-current{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-timing-function:ease,cubic-bezier(.22,.75,.2,1),step-start;
}
.news__item.is-leaving{
  opacity:0;
  visibility:visible;
  transform:translateY(-100%);
}
/* 逆送り（下向き） */
.news__list.is-rev .news__item{transform:translateY(-100%)}
.news__list.is-rev .news__item.is-current{transform:none}
.news__list.is-rev .news__item.is-leaving{transform:translateY(100%)}
/* 待機位置へ“戻す”ための状態。
   送り方向が変わると待機位置(translateYの符号)が反転するため、
   transitionを効かせたまま切り替えると画面外の項目が横切って見えてしまう。
   位置の付け替えは必ずこれを噛ませて一瞬で行う。 */
.news__item.is-parked{transition:none !important}
.news__link{display:grid;gap:8px}
.news__meta{display:flex;align-items:center;gap:12px}
.news__date{
  font-family:var(--font-din);
  font-size:13px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--date);
}
.news__cat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  height:16px;
  padding:0 8px;
  background:var(--teal);
  color:var(--white);
  font-size:12px;
  line-height:1;
}
.news__text{
  display:block;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.news__nav{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
}
.news__arrow{
  position:relative;
  width:24px;
  height:14px;
}
.news__arrow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:12px;
  border-top:2px solid var(--ink);
  border-right:2px solid var(--ink);
}
.news__arrow--prev::before{transform:translate(-50%,-50%) rotate(-45deg)}
.news__arrow--next::before{transform:translate(-50%,-50%) rotate(135deg)}
.news__arrow:hover::before{opacity:.55}
.news__arrow-label{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

/* ---------------------------------------------------------
   about（カンプ: showa [復元] の実測値）
   背景は3Dステージ（空色 = カンプのabout背景色）をそのまま見せる
   --------------------------------------------------------- */
.about{
  position:relative;
  z-index:var(--z-content);
  /* 冒頭1画面ぶんは走行カットだけを見せ、その後にコピーが入ってくる */
  min-height:170svh;
  display:flex;
  align-items:center;
  padding:80px 0;
}
.about__inner{
  width:min(var(--container),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}
.about__copy{max-width:640px;margin-left:auto}  /* SPでも右寄せ */
.about__label{
  font-family:var(--font-din);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--date);
}
.about__title{
  margin:14px 0 0;
  font-size:clamp(26px,7vw,40px);
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.25;
}
/* 各行に白い帯を敷く（カンプの見出し表現） */
.about__title-line{
  display:table;
  padding:.18em .12em;
  background:var(--white);
  white-space:nowrap;
}
.about__title-line + .about__title-line{margin-top:.22em}
.about__text{
  margin-top:26px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:2.2;
}
.about__action{margin-top:30px}

/* ---- aboutの出現アニメーション ----
   リード文は「行ごとに左から色が入れ替わる」ワイプ。
   文字を透明にして、#212121と#c1c1c1の2色グラデを背景に敷き、
   background-clip:text で文字型に抜いて背景位置をスライドさせる    */
.about__line{
  display:block;
  color:var(--date);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .about__line{
    color:transparent;
    -webkit-text-fill-color:transparent;
    background-image:linear-gradient(90deg,var(--ink) 50%,var(--date) 50%);
    background-size:200% 100%;
    background-position:100% 0;      /* 初期は右側＝#c1c1c1 が見えている */
    background-repeat:no-repeat;
    -webkit-background-clip:text;
    background-clip:text;
    transition:background-position .9s cubic-bezier(.22,.75,.2,1);
  }
  .about__copy.is-in .about__line{background-position:0 0}
}

/* 見出し・ラベル・ボタンは軽く持ち上げて出す */
.about__label,
.about__title-line,
.about__action{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.22,.75,.2,1);
}
.about__copy.is-in .about__label,
.about__copy.is-in .about__title-line,
.about__copy.is-in .about__action{
  opacity:1;
  transform:none;
}

/* 上から順に少しずつ遅らせる */
.about__label{transition-delay:0s}
.about__title-line:nth-child(1){transition-delay:.10s}
.about__title-line:nth-child(2){transition-delay:.20s}
.about__line:nth-child(1){transition-delay:.42s}
.about__line:nth-child(2){transition-delay:.54s}
.about__line:nth-child(3){transition-delay:.66s}
.about__line:nth-child(4){transition-delay:.78s}
.about__action{transition-delay:.95s}
.btn--about{
  width:min(100%,300px);
  height:50px;
  min-height:0;
  padding:0;
  font-size:16px;
}

/* ---------------------------------------------------------
   footer
   --------------------------------------------------------- */
.footer{
  position:relative;
  z-index:var(--z-content);
  background:var(--ink);
  color:var(--white);
  padding:56px 0 32px;
}
.footer__inner{
  width:min(var(--container),calc(100% - var(--gutter) * 2));
  margin-inline:auto;
  display:grid;
  gap:34px;
}
.footer__logo{width:180px}
.footer__address{
  margin-top:16px;
  font-size:12.5px;
  line-height:1.9;
  color:rgba(255,255,255,.72);
}
.footer__list{
  display:grid;
  gap:12px;
  font-size:13px;
  font-weight:700;
}
.footer__list a:hover{opacity:.7}
.footer__copy{
  font-family:var(--font-din);
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(255,255,255,.55);
}

/* ---------------------------------------------------------
   SP固定CTAバー
   --------------------------------------------------------- */
.cta-bar{
  position:fixed;
  left:0;
  bottom:0;
  z-index:var(--z-header);
  width:100%;
  display:flex;
  gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,247,247,.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.cta-bar .btn{flex:1;min-height:46px;padding:0 12px;font-size:14px}


/* ---------------------------------------------------------
   オープニング と スクロール時のフェードアウト
   - .is-intro が付いている間はKVのUIを伏せる（JSが付けたときだけ効く）
   - .is-past-kv が付いたら（スクロール開始）KVのUIをフェードアウトさせる
   --------------------------------------------------------- */
.header,
.header__logo,
.header__actions,
.gnav,
.gnav__item,
.kv__copy,
.news{
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,.7,.2,1);
}
.header__logo{transition-delay:0s}
.header__actions{transition-delay:.08s}
.gnav__item:nth-child(1){transition-delay:.30s}
.gnav__item:nth-child(2){transition-delay:.37s}
.gnav__item:nth-child(3){transition-delay:.44s}
.gnav__item:nth-child(4){transition-delay:.51s}
.kv__copy{transition-delay:.16s}
.news{transition-delay:.46s}

/* オープニング中は伏せる */
.is-intro .header__logo,
.is-intro .header__actions,
.is-intro .gnav__item,
.is-intro .kv__copy,
.is-intro .news{
  opacity:0;
  transform:translateY(16px);
  transition-duration:0s;
}

/* スクロールを始めたらKVのUI一式をフェードアウト（ヘッダーも消す） */
.is-past-kv .header,
.is-past-kv .gnav,
.is-past-kv .kv__copy,
.is-past-kv .news{
  opacity:0;
  pointer-events:none;
  transition-delay:0s;
  transition-duration:.45s;
}
.is-past-kv .header{transform:translateY(-100%)}
.is-past-kv .kv__copy{transform:translateY(-14px)}
.is-past-kv .news{transform:translateY(-10px)}

/* =========================================================
   PC（カンプ 1366×768 に忠実）
   ========================================================= */
@media (min-width:768px){
  :root{
    /* 1366px設計の1px。4Kでの過大化を抑えるため上限あり */
    /* カンプ(1366px)の1px。広い画面でも1pxを超えて拡大させない＝文字はカンプ実寸のまま。
       狭い画面では0.86pxまで縮小を許容し、それ以下は縮めない（可読性の下限） */
    --u:clamp(0.86px,calc(100vw / 1366),1px);
    --header-h:calc(var(--u) * 110);
  }

  body{font-size:calc(var(--u) * 15)}

  .cta-bar{display:none}

  /* ---- header ---- */
  .header{
    padding:0;
    height:calc(var(--u) * 110);
    display:block;
  }
  .header__logo{
    position:absolute;
    left:calc(var(--u) * 50);
    top:calc(var(--u) * 30);
  }
  .header__logo-link img{
    width:calc(var(--u) * 206.85);
    height:calc(var(--u) * 41.21);
  }

  /* 右側は「右端からの距離」で固定する（左基準だと広い画面で中央に取り残される） */
  .header__actions{
    position:absolute;
    top:calc(var(--u) * 30);
    right:calc(var(--u) * 50);
    left:auto;
    width:0;
    display:block;
  }
  .header__actions .btn{
    position:absolute;
    top:0;
    display:inline-flex;
    width:calc(var(--u) * 200);
    height:calc(var(--u) * 50);
    min-height:0;
    padding:0;
    font-size:calc(var(--u) * 16);
  }
  .header__actions .btn--blue{
    right:calc(var(--u) * 300);
    left:auto;
    gap:calc(var(--u) * 14);
  }
  .header__actions .btn--teal{
    right:calc(var(--u) * 85);
    left:auto;
    gap:calc(var(--u) * 10);
  }
  .header__actions .btn--blue .btn__icon{
    width:calc(var(--u) * 18.97);
    height:calc(var(--u) * 26.66);
  }
  .header__actions .btn--teal .btn__icon{
    width:calc(var(--u) * 23.32);
    height:calc(var(--u) * 20.99);
  }

  /* .header__actions の右端が基準（カンプのハンバーガー右端 1316 = 右から50） */
  .hamburger{
    position:absolute;
    top:calc(var(--u) * 19);
    right:0;
    left:auto;
    width:calc(var(--u) * 50);
    height:calc(var(--u) * 22);
    gap:calc(var(--u) * 8);
    align-items:flex-start;
    justify-content:flex-start;
    padding-top:0;
  }
  .hamburger__bar{
    width:calc(var(--u) * 50);
    height:calc(var(--u) * 2);
  }

  /* ---- gnav（KV左の縦並び） ---- */
  .gnav{
    position:absolute;
    inset:auto auto auto 0;
    left:calc(var(--u) * 51.29);
    top:calc(var(--u) * 117);
    padding:0;
    background:none;
    opacity:1;
    visibility:visible;
    display:block;
    z-index:var(--z-content);
  }
  .gnav__label{
    margin:0;
    font-size:calc(var(--u) * 14);
    line-height:calc(var(--u) * 15);
    letter-spacing:.1em;
  }
  .gnav__list{
    display:block;
    /* カンプ: ラベル left51.29 に対してリストは left60 */
    margin:calc(var(--u) * 18) 0 0 calc(var(--u) * 8.71);
  }
  /* li の行ボックスを殺してピッチを45pxに固定（20 + 25） */
  .gnav__item{line-height:0}
  .gnav__item + .gnav__item{margin-top:calc(var(--u) * 25)}
  .gnav__link{
    font-size:calc(var(--u) * 14);
    line-height:calc(var(--u) * 20);
    letter-spacing:0;
  }
  .gnav__link:hover{color:var(--teal)}

  /* ハンバーガー展開時はフルスクリーンメニューに変化 */
  .gnav.is-open{
    position:fixed;
    inset:0;
    left:0;
    top:0;
    z-index:var(--z-gnav);
    display:grid;
    align-content:center;
    justify-content:center;
    background:var(--sky);
  }
  .gnav.is-open .gnav__list{display:grid;gap:calc(var(--u) * 26)}
  .gnav.is-open .gnav__item + .gnav__item{margin-top:0}
  .gnav.is-open .gnav__link{
    font-size:calc(var(--u) * 30);
    line-height:1.4;
  }

  /* ---- KV ---- */
  .kv{
    min-height:100svh;
    display:block;
    padding:0;
  }
  .kv__copy{
    position:absolute;
    left:calc(var(--u) * 50);
    bottom:calc(var(--u) * 40.66);
    display:block;
  }
  .kv__lead{
    font-size:calc(var(--u) * 28);
    line-height:calc(var(--u) * 34);
    letter-spacing:.1em;
    margin-bottom:calc(var(--u) * 24);
  }
  .kv__title img{
    width:calc(var(--u) * 695.385);
    height:calc(var(--u) * 151.008);
  }

  /* ---- お知らせ ---- */
  .news{
    position:absolute;
    right:calc(var(--u) * 50);
    left:auto;
    bottom:calc(var(--u) * 40.18);
    width:calc(var(--u) * 450);
  }
  .news__more{
    position:absolute;
    right:0;
    left:auto;
    bottom:calc(var(--u) * 100);
    width:calc(var(--u) * 100);
    height:calc(var(--u) * 35);
    padding:0;
    border-radius:calc(var(--u) * 10) calc(var(--u) * 10) 0 0;
    font-size:calc(var(--u) * 14);
  }
  .news__panel{
    height:calc(var(--u) * 100);
    padding:0;
    /* 右上のみ角丸なし（「一覧はこちら」タブと連結） */
    border-radius:calc(var(--u) * 16) 0 calc(var(--u) * 16) calc(var(--u) * 16);
  }
  .news__link{
    display:block;
    height:100%;
    padding:calc(var(--u) * 26) calc(var(--u) * 70) 0 calc(var(--u) * 20);
  }
  /* 日付は幅を固定して、後続のチップがカンプ座標(left:969)に必ず着地するようにする */
  .news__meta{gap:calc(var(--u) * 14.2)}
  .news__date{
    width:calc(var(--u) * 68.8);
    font-size:calc(var(--u) * 14);
    line-height:calc(var(--u) * 17);
  }
  .news__cat{
    min-width:calc(var(--u) * 76);
    height:calc(var(--u) * 15);
    padding:0;
    border-radius:0;
    font-size:calc(var(--u) * 13);
  }
  .news__text{
    max-width:calc(var(--u) * 327);
    margin-top:calc(var(--u) * 14);
    font-size:calc(var(--u) * 14);
    line-height:calc(var(--u) * 17);
  }
  .news__nav{
    width:calc(var(--u) * 60);
    gap:calc(var(--u) * 24);
  }
  .news__arrow{
    width:calc(var(--u) * 20);
    height:calc(var(--u) * 12);
  }
  .news__arrow::before{
    width:calc(var(--u) * 10.5);
    height:calc(var(--u) * 10.5);
    border-width:calc(var(--u) * 2);
  }

  /* ---- about（カンプ実測: セクション上端768pxを原点とした値） ---- */
  .about{
    min-height:170svh;
    align-items:center;
    padding:0;
  }
  .about__inner{
    position:relative;
    width:100%;
    max-width:none;
    margin:0;
    height:calc(var(--u) * 788);
  }
  /* コピーは右端基準で配置する。
     左基準だと1366pxを超えた画面で中央に取り残されるため
     （カンプ: left626.04 + width700 = 右から40px） */
  .about__copy{
    position:absolute;
    right:calc(var(--u) * 40);
    left:auto;
    top:0;
    max-width:none;
    margin:0;
    padding:0;
    width:calc(var(--u) * 700);
  }
  .about__label{
    margin:calc(var(--u) * 120.94) 0 0;
    font-size:calc(var(--u) * 14);
    line-height:calc(var(--u) * 15);
    letter-spacing:.1em;
  }
  .about__title{
    margin:calc(var(--u) * 35) 0 0;
    font-size:calc(var(--u) * 56);
    line-height:calc(var(--u) * 70);
    letter-spacing:0;
  }
  .about__title-line{
    height:calc(var(--u) * 70);
    padding:0 calc(var(--u) * 5.7);
  }
  .about__title-line + .about__title-line{margin-top:calc(var(--u) * 21.92)}
  .about__text{
    margin-top:calc(var(--u) * 41.5);
    margin-left:calc(var(--u) * 8.43);
    font-size:calc(var(--u) * 20);
    line-height:calc(var(--u) * 55);
    letter-spacing:.03em;
  }
  .about__action{
    margin-top:calc(var(--u) * 43);
    margin-left:calc(var(--u) * 7.48);
  }
  .btn--about{
    width:calc(var(--u) * 300);
    height:calc(var(--u) * 50);
    font-size:calc(var(--u) * 16);
  }

  /* ---- footer ---- */
  .footer__inner{
    grid-template-columns:1fr auto;
    align-items:start;
    gap:calc(var(--u) * 56);
  }
  .footer__list{
    grid-template-columns:repeat(2,auto);
    gap:calc(var(--u) * 14) calc(var(--u) * 40);
  }
  .footer__copy{grid-column:1 / -1}
}

/* =========================================================
   アクセシビリティ
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .is-intro .header__logo,
  .is-intro .header__actions,
  .is-intro .gnav__item,
  .is-intro .kv__copy,
  .is-intro .news{opacity:1;transform:none}
  .header,.header__logo,.header__actions,.gnav,.gnav__item,.kv__copy,.news{transition:none}
  .btn{transition:none}
  .about__line{transition:none;background-position:0 0}
  .about__label,.about__title-line,.about__action{
    opacity:1;transform:none;transition:none;transition-delay:0s
  }
}