/* =================================================================
   画面幅で切り替わる指定だけを置く

   スマホの見た目は assets/site.css。ここはそれを上書きするだけ。
   幅と関係のない指定をここに書かないこと（site.css の役目）。

   読み込む順は  tokens.css → site.css → pc.css。
   ================================================================= */

/* 1rem = 11px */
@media (min-width: 768px){ html{ font-size: 75%; } }

@media (min-width: 700px) {
  .far dl > div { grid-template-columns: 120px 1fr; padding:12px 16px; }
}

/* 3列以上の表が、狭い画面で1文字ずつの縦書きに潰れていた
   （用途別の比較表、エリアの比較表、キャンセル料の表）。
   文字を大きくしたぶん幅が足りなくなり、目立つようになった。

   潰す代わりに横へ流す。表そのものに下限幅を与え、はみ出したぶんは
   容器を横スクロールさせる。角丸のために入れていた overflow:hidden が
   はみ出しを隠していたので、この場合だけ auto に戻す。
   2列の表（施設のスペック表）は潰れないので、そのまま。 */
@media (max-width: 699px) {
  .tbl:has(tr > *:nth-child(3)) table { min-width: 520px; }
  .tbl:has(tr > *:nth-child(5)) table { min-width: 620px; }
}

/* .list はスマホでは1行ずつの縦リスト（行の下線で区切る）なので、
   グリッドに変わる700px以上でだけ同じ扱いにする */
@media (min-width: 700px) {
  .list { background: var(--paper); overflow: hidden; }
  .list > * { box-shadow: 0 0 0 1px var(--line); }
}

/* ===============================================================
   2. モバイルの調整（タップ領域は最小44px）
   =============================================================== */
@media (max-width: 767px) {
  .hd-in .logo,
  .hd-in .login,
  .legal a, .legalnav a,
  .others:not(:has(img)) a,
  .otherlinks:not(:has(img)) a, .qnav a, .doc a, .bizdoc a, .pager a,
  .tags .tag,
  .chips .chip, .dchips .dchip,
  .calhd button,
  .rbtns .rbtn,
  .dpick input, .sortwrap select {
    min-height: var(--tap);
  }
  /* 高さを与えても中身が上に寄らないように */
  .hd-in .logo,
  .others:not(:has(img)) a,
  .otherlinks:not(:has(img)) a, .qnav a, .doc a, .bizdoc a,
  .tags .tag, .chips .chip, .dchips .dchip, .calhd button {
    display: flex;
    align-items: center;
  }
  .chips .chip, .dchips .dchip, .calhd button, .tags .tag { justify-content: center; }
  /* 本文中のインライン導線 */
  .brand .promise ,
  .brand .promisebtn { padding:10px 0; }
  /* 同意チェックの label が1行24pxしかなく、必須項目なのに押しにくかった */
  .agree { min-height: var(--tap); }
}

/* ===============================================================
   3. PC表示の調整（モバイルの指定を後から上書きする）
   方針：読む列は広げすぎない。横に伸びるものだけ段組みにする。
   =============================================================== */
@media (min-width: 768px) {
  :root {
    /* 画面端の余白。0にしていたため、各ページが持つ padding:0 var(--pad) が
       すべて消え、pc.css で列挙し直した要素だけが24px内側という不揃いになっていた。
       24pxのまま残せば、各ページの既存指定がそのまま端の余白として働く
       （全ページ box-sizing:border-box なので max-width に内包される）。 */
    --pad: 24px;

    /* 段の幅。**全ページ同じにする**。
       もとはページごとの --maxw（720/760/840/900/960/1000/1080px の7種類）を
       尊重していたが、ページを行き来すると本文の幅が変わって落ち着かない。
       ページ側の --maxw もここで上書きし、直接 var(--maxw) を使っている
       指定（トップの用途タイルなど）も同じ幅にそろえる。
       読む列（記事・法務・フォーム）だけは 760px の細い段を使う。 */
    --maxw: 960px;
    --col:  960px;
  }

  body { padding-bottom:0; }

  /* 読み物・フォームのページ（body.w-read）も、PCでは段の幅にそろえる。
     スマホでは画面幅いっぱいなので、ここだけの話。
     760pxのままだと、ヘッダー・フッターより本文が内側に入って見える */
  body.w-read{ --maxw: var(--col); }

  /* --- グローバルナビゲーション ---------------------------------
     ヘッダーを画面上部に貼り付ける。縦に長いページでも、
     上まで戻らずに別のページへ移れるようにする。 */
  .hd {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
  }
  /* ヘッダーだけは、段が狭いページでも800pxを下回らせない。
     読む列に合わせて720pxまで詰めると、ロゴとナビがくっついてしまう。
     ヘッダーはページの中身ではなく共通の枠なので、幅がそろっていてよい */
  header.hd > .hd-in {
    max-width: max(var(--col), 800px);
    gap:18px;
  }
  .navbtn { display: none; }
  .nav {
    display: flex;
    align-items: center;
    /* 段の幅はページによって違う（狭いところで720px）。
       いちばん狭い段でも1行に収まる間隔にする */
    gap:14px;
    flex: 0 0 auto;      /* 縮めない。縮むと文字が切れる */
    font-size: 1.3rem;
    color: var(--ink-2);
  }
  .nav a {
    padding:4px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .nav a:hover { color: var(--ink); }
  /* いま見ているページ。青の下線1本だけで示す（塗ると押せるものに見える） */
  .nav a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--key);
  }

  /* 貼り付いたヘッダーの下に見出しが隠れないようにする。
     ページ内リンク（#access など）で飛んだときに効く */
  :target,
  [id] { scroll-margin-top: 68px; }

  /* 中央の1列にそろえる。ヘッダーとフッターの罫線は全幅のまま残す */
  .hd-in, .crumb, h1, .lede, .operator, .shotnum, .guide,
  .summary,
  .areasum, .stats, .shots, .qnav, .toc, .toc-inline, .chips,
  main, footer > *, .legal, .legalnav, .ft-note {
    max-width: var(--col);
    margin-left:auto;
    margin-right:auto;
  }

  h1 { font-size:3rem; }
  .lede { font-size:1.6rem; }

  /* ヒーローは高さを抑える。横に伸ばしても情報は増えない */
  .shots { scroll-snap-type: none; overflow-x: auto; }
  .shots .shot { flex: 0 0 62%; aspect-ratio: 16/10; }

  /* 横に伸びると読みにくくなるものを段組みにする */
  .kit { grid-template-columns: repeat(4, 1fr); }
  .rooms, .near, .plist, .rlist, .doors, .others , .otherlinks { grid-template-columns: repeat(2, 1fr); }

  /* 予約カレンダーは段いっぱいに広げる。日付を押す面が大きいほど選びやすく、
     月の埋まり具合も一目で分かる（連携メモ「カレンダーの見た目」と揃える） */
  .cal { max-width: none; }
  .calhd { padding:14px 18px; font-size:1.6rem; }
  .dow div { font-size:1.2rem; padding:10px 0 6px; }
  .days button { min-height: 92px; gap:6px; }
  .days button b { font-size:1.5rem; }
  .days button s { width: 30px; height: 30px; font-size:1.5rem; }
  .cal .legend, .cal2 ~ .legend { padding:12px 18px; }
  /* 図版は広げない。平面図や地図は大きくしても読み取れる情報が増えない */
  .plan,
  .tkplan, .mapimg { max-width: 640px; }
  /* 図解のSVGは viewBox で拡大されるため、放っておくと本文の倍の文字になる */
  main figure { max-width: 640px; }

  /* 表は段いっぱいに使う。スペック表は読み物ではなく一覧なので、
     760pxで止めると右が空いて中途半端に見える */
  .tbl { max-width: none; }

  /* 幅を絞ったものは左端でそろえる。
     各ページの PC 用指定が section > * に margin:auto を当てているため、
     幅を絞った時点で中央に寄り、見出しから最大100px内側にずれていた。 */
  /* 平面図と地図は広げない（引き伸ばすと解像度が足りない）。
     幅を絞るぶん、左端に寄せず中央に置いて余白を左右で分ける */
  .plan,
  .tkplan, .mapimg, main figure { margin-left:auto; margin-right:auto; }
  .cal { margin-left:var(--pad); margin-right:var(--pad); }

  /* ボタンの幅
       ・複数並ぶとき … 段いっぱいを均等に割る（2つなら50%ずつ）
       ・1つのとき     … 段いっぱい
     360pxで頭打ちにして左に寄せていたため、右側が空いて不釣り合いだった。
     文字は左寄せのままでよいが、押す面は幅をそろえたほうが落ち着く。
     grid-auto-columns:1fr なので、3つ並んでも均等になる。 */
  .acts, .ilinks, .rbtns, .faracts, .mapbtns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap:10px;
    max-width: none;
  }
  /* width は与えない。ブロック要素はもともと親いっぱいに広がり、
     行の中のものはグリッドが伸ばす。width:100% を足すと、
     margin:0 var(--pad) を持つ .cta が左右24pxずつはみ出す */
  .cta, .submit, .go, .act, .ilink, .rbtn, .mapbtn, .bulk { max-width: none; }

  /* 下部の固定バー。**画面の下いっぱいの帯**にする（2026-08-18 ご指定・A案）。
     もとは右下に浮かぶ小さなカードだったが、画面幅によっては本文に
     重なっていた。帯にして本文の下にそのぶんの余白を確保すれば、
     どの幅でも重ならない。スマートフォンと同じ形になるので、
     機種を変えても同じ場所に同じボタンがある。 */
  .bar {
    display: flex;
    justify-content: center;
    gap:8px;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding:8px var(--pad);
    background: var(--paper);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 -2px 14px rgba(26, 25, 23, .06);
  }
  .bar a {
    flex: 0 1 auto;
    min-width: 180px;
    min-height: 46px;
    padding:0 26px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
  }
  .bar a.primary { border-color: var(--key); }
  .bar a[data-line] { border-color: var(--line-green) !important; }
  /* 帯のぶんだけ本文の下に余白を取る（重ならないようにする） */
  body { padding-bottom:70px; }
  footer { padding-bottom:0; }

  /* 記事本文と法務ページも、ほかのページと同じ段の幅にそろえる。
     以前は読みやすさを優先して760pxに絞っていたが、ヘッダー・フッターが
     960pxのままなので、本文だけ左右に100pxずつ引っ込んで見えていた。
     ページを行き来したときに幅が変わるのも落ち着かない。 */
  main > .art, main > .doc , main > .bizdoc { max-width: var(--col); margin-left:auto; margin-right:auto; }
  .art p, .art li, .doc p, .bizdoc p, .doc li , .bizdoc li { font-size:1.5rem; }
  body:has(main > .art) :is(.crumb, h1, .lede, .artmeta),
  body:has(main > .doc) :is(.crumb, h1, .lede, .toc, .toc-inline),
  body:has(main > .bizdoc) :is(.crumb, h1, .lede, .toc, .toc-inline){ max-width: var(--col); }
}

@media (min-width: 1200px) {
  .kit { grid-template-columns: repeat(5, 1fr); }
  .rooms, .plist { grid-template-columns: repeat(3, 1fr); }
  .shots .shot { flex: 0 0 44%; }
}

@media (min-width: 768px){
  .evbox{ max-width:var(--col); margin-left:auto; margin-right:auto; }
  .ev{ padding:18px 20px; }
  .ev-t{ font-size:2.2rem; }
  .ev-go{ max-width:340px; }
  .ev-past{ display:grid; grid-template-columns:auto 1fr auto; gap:2px 16px; align-items:baseline; }
  .ev-past .ev-when{ margin:0; white-space:nowrap; }
  .ev-past .ev-t{ margin:0; }
  .ev-past .ev-where{ text-align:right; }
  /* 主催者へのリンクはイベント名の下（2列目）に置く */
  .ev-past .ev-link{ margin:0; grid-column:2 / 4; }
}

@media (prefers-reduced-motion:reduce){ .snav{ transition:none; } }

@media (min-width: 768px){
  .stile{ grid-template-columns:repeat(4,1fr); max-width:var(--col);
          margin-left:auto; margin-right:auto; }
  .stile-h{ max-width:var(--col); margin-left:auto; margin-right:auto; }
  .snav{ top:53px; background:var(--wash); }
  .snav-in{ max-width:max(var(--col),800px); margin:0 auto; }
  .snav a{ font-size: 1.4rem; padding:0 16px; min-height:46px; }
  .shots .shot{ flex:0 0 76%; aspect-ratio:16/10; }
  .thumbs{ max-width:var(--col); margin-left:auto; margin-right:auto; }
  .thumb{ flex:0 0 96px; height:70px; }
  [id]{ scroll-margin-top:104px; }
}

@media (min-width: 1200px){
  .shots .shot{ flex:0 0 68%; }
}

@media (min-width: 768px){
  /* 縦のリストがPCで2列のグリッドに変わるもの。同じ組み替えを当てる */
  /* div.rooms と書いているのは、空き状況ページの「空き2室／3室」が
     同じ class を span で使っているため（そちらは文字なので触らない） */
  div.rooms, .plist, .rlist, .list, .doors{
    background: none; border: 0; overflow: visible; gap:10px;
    padding-left:var(--pad); padding-right:var(--pad);
  }
  div.rooms > *, .plist > *, .rlist > *, .list > *{
    box-shadow: none; border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
  }
}

@media (min-width: 768px){
  /* 地図は段いっぱいに広げる。場所の把握は面積がそのまま分かりやすさに
     つながるので、平面図（640pxで頭打ち）とは別扱いにする。
     予約カレンダーを段いっぱいにしているのと同じ考え方 */
  .gmap{ max-width: none; aspect-ratio: 21 / 9; }
}

/* 左右の余白はスマートフォンだけ。768px以上は中央ぞろえの指定が効くので触らない */
@media (max-width: 767px){
  .summary,
  .areasum, .easy, .stats, .assure{
    margin-left:var(--pad);
    margin-right:var(--pad);
  }
}

@media (min-width: 768px){
  section > h3, .art h3, .doc h3, .bizdoc h3{
    max-width: calc(var(--col) - var(--pad) * 2);
    margin-left:auto; margin-right:auto;
    padding-left:14px;
  }
}

/* ===============================================================
   0-16 段の幅と、枠の左右をそろえる

   ・段の幅は全ページ 960px（読む列は 760px）
   ・枠のあるものは、段からさらに左右 --pad ぶん内側にそろえる
     これまで .evbox だけが段いっぱいで、すぐ下の電話番号の枠より
     大きく見えていた
   =============================================================== */
@media (min-width: 768px){
  /* 入力する列も、ほかのページと同じ段の幅にそろえる。
     入力欄そのものが横に伸びすぎないよう、幅の上限は .f 側で持たせる */
  main form, .art, .doc, .bizdoc{
    max-width: var(--col);
    margin-left:auto;
    margin-right:auto;
  }
  /* 写真の送りボタンは、入れ物が全幅のままだと画面の両端に飛んでいた。
     入れ物を段の幅にそろえ、メインビジュアルの左右に置く */
  .shotwrap{ max-width: var(--col); margin-left:auto; margin-right:auto; }

  /* 枠のあるものの左右をそろえる */
  .evbox, .summary, .areasum, .stats, .assure, .easy, .help, .notebox{
    max-width: calc(var(--col) - var(--pad) * 2);
    margin-left:auto;
    margin-right:auto;
  }
}

/* 節の目次（.stile）だけ段いっぱいのままで、下の帯や表と左右がずれていた */
@media (min-width: 768px){
  .stile, .stile-h{
    max-width: calc(var(--col) - var(--pad) * 2);
    margin-left:auto;
    margin-right:auto;
  }
}

/* 「ALBEの約束」のリード文が段の外（画面いっぱい）に出ていた。
   <main> の前に置かれた要素は中央ぞろえの指定から漏れていたため */
@media (min-width: 768px){
  .lead-block, .promises{
    max-width: var(--col);
    margin-left:auto;
    margin-right:auto;
  }
}

@media (min-width: 768px){
  .shots.small .shot{ flex: 0 0 38%; aspect-ratio: 4/3; }
}

@media (min-width: 1200px){
  .shots.small .shot{ flex: 0 0 33%; }
}

@media (min-width: 768px){
  .tktbn{ max-width: calc(var(--col) - var(--pad) * 2);
          margin-left:auto; margin-right:auto;
          display: grid; grid-template-columns: 1fr auto; align-items: center;
          gap:6px 24px; padding:18px 20px; }
  .tktbn-lab{ grid-column: 1; justify-self: start; margin-bottom:2px; }
  .tktbn b{ grid-column: 1; }
  .tktbn s{ grid-column: 1; }
  .tktbn em{ grid-column: 2; grid-row: 1 / 4; margin-top:0; padding:0 26px; }
}

/* iOS の Safari だけは上の指定でも縮まない。見た目の作りごと外して縛りを解く。
   ほかのブラウザで同じことをするとカレンダーの絵柄まで消えてしまうので、
   iOS だけに効く条件（-webkit-touch-callout）で囲む */
@supports (-webkit-touch-callout: none){
  input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input[type="week"]{
    -webkit-appearance: none;
    appearance: none;
    display: block;        /* iOS では行内に置かれ、下に余白が付いて縦にずれる */
  }
}

/* 日付と時刻を横に2つ並べると、スマホでは1つあたり190px前後しか取れない。
   iOS では日付欄だけで150〜170px 必要なうえ、指で押す的も小さくなる。
   600px 未満では縦に積む */
@media (max-width: 599px){
  .pair{ grid-template-columns: 1fr; gap:8px; }
}

@media (min-width: 768px){
  /* max-width で内側に寄せるので、左右の padding は外す（二重に効いて他の枠とずれる） */
  .voices{ grid-template-columns: 1fr 1fr; padding:0;
           max-width: calc(var(--col) - var(--pad) * 2);
           margin-left:auto; margin-right:auto; }
}

@media (min-width: 768px){
  .cal2{ grid-template-columns: 1fr 1fr; gap:12px; }
}

@media (min-width: 768px){
  .cal2 ~ .legend{ max-width: calc(960px - var(--pad) * 2); margin-left:auto; margin-right:auto; }
}

@media (min-width: 768px){
  .planbtns{ max-width: 640px; margin-left:auto; margin-right:auto; }
}

@media (min-width: 600px){
  .fsum > div{ grid-template-columns: 200px 1fr; gap:12px; align-items: baseline; }
}

@media (min-width: 768px){
  .fstep{ max-width: calc(var(--col) - var(--pad) * 2); margin-left:auto; margin-right:auto; }
}

/* ===============================================================
   0-24 トップページ・節と節のあいだ

   スマホでは各ブロックが画面の端まで伸び、境目は罫線で分かる。
   PCでは上の 0-19 でその罫線を外して角丸のカードに変えているため、
   ブロック同士が地続きになり、どこで話が変わったのか分からない箇所が
   出ていた。PCのときだけ、間を空ける。
   =============================================================== */
@media (min-width: 768px){
  /* 特設エリア（新スペースのご案内）と、その下の用途タイル */
  .feature + .uses{ margin-top:28px; }
  /* 用途タイル → 「条件で絞り込んで探す」 → 全施設ラインナップ */
  .uses + .allspaces{ margin-top:14px; }
  .allspaces + .lineup{ margin-top:8px; }
}

/* =================================================================
   0-25 段の中央ぞろえを、余白の一括指定に負けないようにする

   スマホでは画面端から `margin: 0 var(--pad)` で内側に寄せている箱が
   多い。PCではその箱を段の中央に置きたいが、`margin` の一括指定は
   左右の値まで書いてしまうため、あとから来る中央ぞろえの指定
   （margin-left:auto / margin-right:auto）に勝ってしまい、左に寄る。

   ここで同じ強さの指定を最後に置いて、左右だけ auto に戻す。
   新しく `margin: 0 var(--pad)` を書く箱を足したときは、
   このリストにも足すこと（コーディングルール R12-5）。
   ================================================================= */
@media (min-width: 768px){
  .tel, .telnav, .pick, .traits, .acc, .artmeta, .steps, .rules,
  .biz, .sec, .bundle, .alt, .ex, .plans, .ev-go, .voice, .box,
  .brand p, .brand .sub, .count, .notebox{
    margin-left: auto;
    margin-right: auto;
  }
  /* もっと強い指定に負けているもの */
  .brand p:first-child,
  h2.sec, ul.rules, .doc .sec, .doc .rules, .doc ol, .doc ul, .art ol, .art ul{
    margin-left: auto;
    margin-right: auto;
  }
}


/* =================================================================
   0-27 ナビのまとまり（ご予約について）

   変更・キャンセル／見学のご予約／よくある質問 は、どれも
   「お問い合わせしなくて済む方法」なので1つにまとめた。

   **マウスオーバーでは開かない。押して開く。**
   タッチ端末にマウスオーバーが無いこと、また親がリンクだと
   「押したのにページへ行かない」という迷いが出ることによる。
   親は <button> にしてあるので、キーボードでも開ける。
   ================================================================= */
@media (min-width: 768px){
  .navgrp{ position: relative; }
  .navgrp-b{
    display: inline-flex; align-items: center; gap: 4px;
    width: auto; padding: 4px 0; cursor: pointer;
    font: inherit; font-size: 1.3rem; font-weight: 400;
    color: var(--ink-2); letter-spacing: normal;
    border-bottom: 2px solid transparent;
  }
  .navgrp-b:hover{ color: var(--ink); }
  /* 下向きの小さな三角。開くと上を向く */
  .navgrp-b::after{
    content: ""; width: 0; height: 0; margin-top: 2px;
    border: 4px solid transparent; border-top-color: currentColor;
  }
  .navgrp-b[aria-expanded="true"]{ color: var(--ink); }
  .navgrp-b[aria-expanded="true"]::after{
    border-top-color: transparent; border-bottom-color: currentColor; margin-top: -4px;
  }
  /* いま見ているページが中にあるときは、親にも印を付ける */
  .navgrp:has([aria-current="page"]) .navgrp-b{
    color: var(--ink); font-weight: 600; border-bottom-color: var(--key);
  }

  .navgrp-m{
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    z-index: 60; min-width: 190px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: 0 10px 24px rgba(0,0,0,.10);
    padding: 6px 0;
  }
  .navgrp-m[hidden]{ display: none; }
  .navgrp-m a{
    display: block; padding: 10px 16px; white-space: nowrap;
    font-size: 1.3rem; line-height: 1.5; color: var(--ink-2); border-bottom: 0;
  }
  .navgrp-m a:hover{ background: var(--wash); color: var(--ink); }
  .navgrp-m a[aria-current="page"]{ color: var(--key); font-weight: 600; }
}

/* =================================================================
   0-28 スマホにだけ出す注記（.sponly）

   「ホーム画面に追加すると次回からアプリのように開ける」の案内は、
   スマホの話なのでPCでは出さない。読む人に関係のない一文を置くと、
   本文の信頼が下がる。
   ================================================================= */
@media (min-width: 768px){
  .sponly{ display: none; }
  .pconly{ display: block; }
  /* PCは幅に余裕があるので、枠付きで「English」と綴る（.login と揃える） */
  .langsw{ border:1px solid var(--line-2); border-radius:var(--r); padding:0 12px; }
  .langsw .pc-i{ display: inline; }
  .langsw .sp-i{ display: none; }
}

/* =================================================================
   0-29 フッターの「スマホで予約」

   段の中央にそろえ、二次元コードと文章を横に並べる。
   ボタン（.go）はスマホでだけ出るので、ここでは触らない。
   ================================================================= */
@media (min-width: 768px){
  /* 帯そのものは画面いっぱいに広げる。ページによっては段の幅に
     縛られてしまい、背景の色が途中で切れていた */
  .appcta{ max-width: none; margin-left: 0; margin-right: 0; padding: 26px var(--pad); }
  /* 中身だけを段の幅にそろえる。`.appcta h2{ margin:0 0 6px }` のような
     余白の一括指定に負けないよう、子セレクタで同じ強さにして後ろに置く
     （R12-4 と同じ落とし穴） */
  /* 幅は --col（PCでは全ページ960px）にそろえる。--maxw はページによって
     読む列（760px）になるため、同じフッターの中で規約リンクと左端が
     ずれてしまう */
  .appcta > h2, .appcta > p, .appcta > .go, .appcta > .appcta-qr{
    max-width: var(--col, var(--maxw)); margin-left: auto; margin-right: auto; }
  .appcta-qr{ display: flex; }
}