@charset "UTF-8";
/* =============================================================================
   theme-ramlabel ── RAM LABEL
   =============================================================================

   【方針】
     ・白背景・細字・写真主体。余白と字間で間を持たせる
     ・読み込み時に白からフェードイン
     ・サムネイルは 4:3

   【フォント指定について ★元の指定から3点直しています】

     ① "ヒラギノゴ角シック W2" → "ヒラギノ角ゴシック W2"
        文字が入れ替わっていました。この綴りでは一致せず素通りします。

     ② "Hiragino Sans W2" → "Hiragino Sans"
        Hiragino Sans に W2 のようなウェイト名は付けません。
        太さは font-weight で指定します（W2 相当 ≒ font-weight: 200）。

     ③ 大阪 → Osaka
        フォント名は英字の Osaka です。「大阪」では一致しません。

     ★細さは書体名ではなく font-weight: 300 で作っています。
       こうすると、どの環境でも同じ方向に転びます。

   【カードのHTML】
     components/archive_card.php が生成します。CSSからは変えられません。

         <article class="card">
           <a class="card__thumb" href="…"><img …></a>
           <div class="card__body">
             <span class="card__category">…</span>   ← 非表示
             <h2 class="card__title"><a>…</a></h2>
             <time class="card__date">…</time>
             <p class="card__excerpt">…</p>          ← 非表示
           </div>
         </article>
============================================================================= */

/* -----------------------------------------------------------------------------
   トークン
----------------------------------------------------------------------------- */
:root {
  /* --- 色 --- */
  --paper:  #ffffff;   /* 背景 */
  --ink:    #1a1a1a;   /* 本文。純黒より少し柔らかく */
  --sub:    #8c8c8c;   /* 日付・補助 */
  --line:   #e3e3e3;   /* 罫線 */
  --tint:   #f4f4f4;   /* 画像の下地 */
  --accent: #425366;   /* 差し色。青みのある濃灰。ホバーと見出しの罫に使う */

  /* --- 書体 --- */
  --font-body: "Hiragino Sans", "ヒラギノ角ゴシック W2",
               "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
               Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

  /* --- レイアウト --- */
  --wrap-max: 1540px;
  --wrap-pad: 20px;

  /* --- フェードインの長さ ---
     ★ここだけ直せば速さを変えられます。 */
  --fade-duration: 3.5s;
}

/* -----------------------------------------------------------------------------
   ベース
----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;              /* ★細字 */
  font-size: 15px;
  line-height: 2;
  letter-spacing: 1px;
  font-feature-settings: "palt"; /* 和文の詰め */
  -webkit-font-smoothing: antialiased;

  /* --- 白からのフェードイン --- */
  animation: fadeIn var(--fade-duration) ease 0s 1 normal;
  -webkit-animation: fadeIn var(--fade-duration) ease 0s 1 normal;
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* --- キーボード操作時のフォーカス表示 ---
   ★:focus-visible はキーボード操作のときだけ効きます。
     マウスでクリックしたときには出ません。

   ★入力欄は下の「入力欄のフォーカス」で別扱いにしています。
     囲み線ではなく、枠線そのものを濃くして示します。 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* --- 入力欄のフォーカス ---
   -----------------------------------------------------------------------------
   囲み線は出さず、枠線を濃くすることで「今ここにいる」と伝えます。

   ★outline を完全に消してはいけません。
     キーボードだけで操作する人にとって、これは現在位置を知る
     唯一の手がかりです。消すと、Tabで移動しても画面上で
     何も起きていないように見えます。

     枠線の色を --line（薄灰）から --ink（本文色）へ変えることで、
     見た目は静かなまま、居場所は分かる状態を保っています。 */
input:focus-visible,
input:focus {
  outline: none;
  border-color: var(--ink);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .8em 1.4em;
  background: var(--ink);
  color: var(--paper);
}
.skip-link:focus { left: 0; }

/* -----------------------------------------------------------------------------
   ラッパー
----------------------------------------------------------------------------- */
.wrap {
  max-width: var(--wrap-max);
  padding-right: var(--wrap-pad);
  padding-left: var(--wrap-pad);
  margin-right: auto;
  margin-left: auto;
}

.wrap--narrow { max-width: 780px; }

.site-main {
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(64px, 10vw, 140px);
  min-height: 60vh;
}

/* -----------------------------------------------------------------------------
   ヘッダー
   -----------------------------------------------------------------------------
   PC（1101px〜） … 左にロゴ、右に PORTFOLIO / INFORMATION / PRESS の3カラム
   SP（〜1100px） … 左にロゴ、右にバーガー

   ★追従（sticky）はしません。
     ナビが3カラムで縦に伸びるため、固定すると画面上部を大きく占有します。

   ★罫線は引いていません。
     見本の白い余白の広さを、線で切らずにそのまま活かすためです。
----------------------------------------------------------------------------- */
.site-header {
  background-color: var(--paper);
  position: relative;
  z-index: 30;   /* パネル(50)より下、本文より上 */
}

.site-header__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: clamp(28px, 3.4vw, 48px) var(--wrap-pad) clamp(28px, 3.4vw, 44px);
  display: flex;
  align-items: flex-start;   /* ナビは複数行なので上端で揃える */
  justify-content: space-between;
  gap: 24px;
}

/* --- ロゴ ---
   SVGは 247 × 33。width だけ指定し、高さは比率のまま追従させます。
   ★height: auto を書かないと、HTMLの height="33" が効いて縦が潰れます。 */
.site-header__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;   /* インライン画像の下に出る隙間を消す */
}

.site-header__logo img {
  width: 330px;
  height: auto;
}

/* -----------------------------------------------------------------------------
   PC用グローバルナビ
   -----------------------------------------------------------------------------
   ★「»」は ::before で付けています。
     HTMLに直接書くと、読み上げ環境が記号を1つずつ読んでしまいます。
----------------------------------------------------------------------------- */
.gnav {
  display: flex;
  gap: clamp(32px, 4.5vw, 88px);
  padding-top: 4px;   /* ロゴの視覚的な天地と、見出しの高さを合わせる */
}

.gnav__group { min-width: 0; }

.gnav__heading {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.6;
  color: var(--ink);
  white-space: nowrap;
}

.gnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnav__list li { line-height: 1.7; }

.gnav__list a {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
  transition: color .3s;
}

.gnav__list a::before {
  content: "\00BB\0020";   /* » ＋ 半角スペース */
  color: var(--sub);
}

.gnav__list a:hover { color: var(--accent); }

/* -----------------------------------------------------------------------------
   バーガーボタン
   -----------------------------------------------------------------------------
   3本線は <span> で作っています。画像を使わないので読み込むファイルが増えず、
   色もCSS変数で変えられます。

   開いているときは上下の線を中央へ寄せて回転させ、×印にします。
   真ん中の線は透明にして消します。
----------------------------------------------------------------------------- */
.burger {
  display: none;   /* PCでは出しません。1100px以下で表示に切り替えます */
  position: relative;
  z-index: 60;     /* パネルより手前。開いている間も押せるようにする */
  width: 44px;     /* 指で押せる最小サイズを確保 */
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.burger__bar {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--ink);
  transition: transform .35s cubic-bezier(.2,.6,.2,1), opacity .2s;
}

/* 開いているとき：×印に変形 */
.is-menu-open .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-menu-open .burger__bar:nth-child(2) { opacity: 0; }
.is-menu-open .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -----------------------------------------------------------------------------
   背景のおおい
----------------------------------------------------------------------------- */
.menu-overlay {
  display: none;   /* PCでは使いません */
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .35s ease;
}

.menu-overlay[hidden] { display: none; }

.is-menu-open .menu-overlay { opacity: 1; }

/* -----------------------------------------------------------------------------
   スライドインするパネル（mmenu風ドリルダウン）
   -----------------------------------------------------------------------------
   ★transform で動かしています。left や right を変えると、
     動くたびにレイアウト計算が走り、動きがぎこちなくなります。

   ★閉じている間も要素は存在しています。
     Tabで入れないようにする処理は menu.js が行っています。

   【構造】
     .menu-panel            右から出る箱
       .menu-panel__head    戻る＋現在地（階層が変わっても動かない）
       .menu-panel__viewport 横スライドの舞台。はみ出た分を隠す
         .menu-level        階層1枚ぶん。重ねて置き、transformで出し入れする
----------------------------------------------------------------------------- */
.menu-panel {
  display: none;   /* PCでは使いません */
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  width: min(380px, 86vw);
  height: 100%;
  height: 100dvh;   /* スマホのアドレスバーを考慮（非対応環境は上の100%が効く） */
  background-color: var(--paper);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
  flex-direction: column;
  overflow: hidden;   /* 横スライドの尻尾を外へ出さない */
}

.is-menu-open .menu-panel { transform: translateX(0); }

/* --- パネル上部 ---
   ★高さを固定しています（56px）。
     戻るボタンの出し入れで高さが変わると、
     階層を移動するたびに下の内容が上下に飛びます。 */
.menu-panel__head {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 56px 0 20px;   /* 右はバーガー（×）と重ならない逃げ */
  border-bottom: 1px solid var(--line);
}

.menu-panel__back {
  flex: 0 0 auto;
  margin-right: 12px;
  padding: 8px 10px 8px 0;
  border: 0;
  background: transparent;
  color: var(--sub);
  font-family: inherit;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .3s;
}

/* 「‹」は装飾なので ::before で付けます */
.menu-panel__back::before {
  content: "\2039";
  margin-right: 6px;
  font-size: 16px;
  line-height: 1;
}

.menu-panel__back:hover { color: var(--ink); }
.menu-panel__back[hidden] { display: none; }

.menu-panel__title {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink);
}

/* --- 横スライドの舞台 --- */
.menu-panel__viewport {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}

/* --- 階層1枚 ---
   ★3枚とも同じ位置に重ねています。
     右で待機（100%）→ 表示（0）→ 左へ抜ける（-100%）と動かします。
     mmenu の「潜る」感覚は、親と子が同時に動くことで出ています。 */
.menu-level {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--paper);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
}

.menu-level--current { transform: translateX(0); }
.menu-level--past    { transform: translateX(-100%); }

.menu-level__inner { padding: 24px 20px 40px; }

/* --- パネル内の検索 --- */
.menu-search {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.menu-search__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.menu-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font-family: inherit;
  font-weight: 300;
  font-size: 16px;   /* ★16px未満にするとiOSで拡大される */
  letter-spacing: 1px;
}
.menu-search__input::placeholder { color: var(--sub); }
/* フォーカス時の見た目は、ベースの「入力欄のフォーカス」で統一しています。
   ここに書くと後勝ちで上書きしてしまうため、あえて指定していません。 */

.menu-search__button {
  flex: 0 0 auto;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--sub);
  font-family: inherit;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}
.menu-search__button:hover { color: var(--ink); border-color: var(--sub); }

/* --- パネル内のナビゲーション ---
   iOSのリスト風に、項目ごとに全幅の細い罫線で区切ります。
   ★左右いっぱいに線を伸ばすため、内側の余白は項目側に持たせています。 */
.menu-nav {
  list-style: none;
  margin: 0 -20px;   /* .menu-level__inner の左右余白を打ち消す */
  padding: 0;
}

.menu-nav li { border-bottom: 1px solid var(--line); }
.menu-nav li:first-child { border-top: 1px solid var(--line); }

.menu-nav a,
.menu-nav__parent {
  display: block;
  width: 100%;
  padding: 17px 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .18em;
  line-height: 1.6;
  text-align: left;
  transition: background-color .2s, color .3s;
}

.menu-nav a:hover,
.menu-nav__parent:hover { color: var(--accent); }

/* 押している間だけ薄く反応させる（触った手応え） */
.menu-nav a:active,
.menu-nav__parent:active { background-color: var(--tint); }

/* --- 親項目（押すと潜る） ---
   ★右端の「›」で、行き止まりではないことを示します。
     これが無いと、リンクと同じ見た目のまま挙動だけ違うことになります。 */
.menu-nav__parent {
  position: relative;
  padding-right: 44px;
  cursor: pointer;
}

.menu-nav__parent::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: var(--sub);
}

/* -----------------------------------------------------------------------------
   1100px以下：バーガーへ切り替え
   -----------------------------------------------------------------------------
   ★display の切り替えはここに集約しています。
     PC側の指定を打ち消すのではなく、「この幅から使う」と1か所で分かる形にしました。
----------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .gnav { display: none; }

  .burger      { display: flex; }
  .menu-overlay{ display: block; }
  .menu-panel  { display: flex; }

  /* hidden が付いている間は、上の display: block より優先して消す */
  .menu-overlay[hidden] { display: none; }

  .site-header__inner { align-items: center; }
}

/* -----------------------------------------------------------------------------
   アーカイブの見出し
----------------------------------------------------------------------------- */
.archive__header { margin-bottom: clamp(28px, 4vw, 56px); }

.archive__title {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 300;
  letter-spacing: .14em;
  line-height: 1.6;
}

.archive__lead,
.archive__header p {
  margin: 12px 0 0;
  color: var(--sub);
  font-size: 13px;
  max-width: 60ch;
}

/* -----------------------------------------------------------------------------
   グリッド
   -----------------------------------------------------------------------------
   4列: 〜1540px / 3列: 〜1100px / 2列: 〜700px / 1列: 〜440px

   ★間隔を詰めました。

     変更前  gap: clamp(20px, calc(33.33vw - 413px), 100px)
             1540pxで100px、1300pxで20px。
             上限に張り付いたあと急落する動きでした。

     変更後  横 clamp(14px, 1.8vw, 28px)
             縦 clamp(28px, 3.2vw, 52px)
             1540pxで横28px。画面幅に応じてなだらかに変わります。

   ★横より縦を広く取っています。
     横は列の切れ目が写真の縁で分かるため、詰めても混ざりません。
     縦はタイトルと次の段の写真が接するので、広げないと段が繋がって見えます。
----------------------------------------------------------------------------- */
.archive__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(14px, 1.8vw, 28px);
  row-gap: clamp(28px, 3.2vw, 52px);
}

@media (max-width: 1100px) {
  .archive__list {
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(12px, 1.8vw, 24px);
    row-gap: clamp(24px, 3vw, 44px);
  }
}

@media (max-width: 700px) {
  .archive__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    row-gap: 28px;
  }
}

@media (max-width: 440px) {
  .archive__list {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }
}

/* -----------------------------------------------------------------------------
   カード
----------------------------------------------------------------------------- */
.card { position: relative; }

/* 今回は「サムネイル・タイトル・日付」のみ */
.card__category,
.card__excerpt { display: none; }

.card__thumb {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;          /* ★4:3 */
  overflow: hidden;
  background-color: var(--tint);
}

.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1);
}

/* --- ホバー：下辺を左から右へ走る熾火のヘアライン --- */
.card__thumb::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.card:hover .card__thumb img,
.card:focus-within .card__thumb img { transform: scale(1.04); }

.card:hover .card__thumb::after,
.card:focus-within .card__thumb::after { transform: scaleX(1); }

/* サムネイルが無い記事でも段が崩れないようにする */
.card:not(:has(.card__thumb))::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;
  background-color: var(--tint);
}

.card__body { padding-top: 14px; }

.card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .04em;
}
.card__title a { transition: color .3s; }
.card:hover .card__title a { color: var(--accent); }

.card__date {
  display: block;
  margin-top: 6px;
  color: var(--sub);
  font-size: 11px;
  letter-spacing: .16em;
}

/* -----------------------------------------------------------------------------
   ページ送り
----------------------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: clamp(48px, 7vw, 96px);
  font-size: 13px;
  letter-spacing: .1em;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  color: var(--sub);
  transition: color .3s, border-color .3s;
}

.pagination a:hover { color: var(--ink); border-color: var(--sub); }

.pagination .current,
.pagination [aria-current="page"] {
  color: var(--paper);
  background-color: var(--ink);
  border-color: var(--ink);
}

/* -----------------------------------------------------------------------------
   ヒーロー画像（記事上部）
   -----------------------------------------------------------------------------
   ★PC用とスマホ用、2枚の画像を切り替えています。

     PC      16 : 9   横長。風景の広がりを見せる
     スマホ   4 : 3   縦を足す。横長のままだと帯のように細くなるため

   切り替えは components/hero.php が出力する <picture> が行います。
   ブラウザが「必要な1枚だけ」を選んで読み込むので、
   スマホでPC用の重い画像を裏で読む無駄が起きません。

   ★media の 700px は hero.php 側と必ず揃えてください。
     ここだけ変えると「4:3の枠に横長画像」のような組み合わせが起きます。

   ★片方しか登録されていない記事では、同じ画像が両方に使われます
     （hero.php 側で処理しています）。その場合も切り取り比率は変わるので、
     PC・スマホどちらでも成立する構図を選ぶと安全です。
----------------------------------------------------------------------------- */
.hero {
  display: block;   /* ★<picture> は既定が inline。下に隙間が出るのを防ぐ */
  margin: 0 0 clamp(28px, 4vw, 56px);
  background-color: var(--tint);
}

.hero__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 700px) {
  .hero__img { aspect-ratio: 4 / 3; }
}

/* -----------------------------------------------------------------------------
   記事ページの余白
   -----------------------------------------------------------------------------
   ★ヒーローがある記事は、画像を画面の上端に寄せます。
     大きな写真は、上に余白があると迫力が落ちます。

   ★ヒーローが無い記事は、逆に上へ大きく余白を取ります。
     :has() で「ヒーローを持たない記事」だけを狙い撃ちします。
     文字だけのページは、余白そのものが構成要素になります。
----------------------------------------------------------------------------- */
.site-main--post { padding-top: 0; }

.site-main--post:not(:has(.hero)) {
  padding-top: clamp(48px, 8vw, 120px);
}

/* --- ヒーローが無いときは、タイトルを一段大きく組む ---
   写真の代わりに、文字そのものを見せ場にします。 */
.site-main--post:not(:has(.hero)) .article__title {
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.6;
}

/* :has() に対応していない古いブラウザでも、
   ヒーロー無しの記事が上に詰まりすぎないようにする保険。 */
@supports not selector(:has(*)) {
  .site-main--post { padding-top: clamp(32px, 5vw, 72px); }
  .hero { margin-top: calc(clamp(32px, 5vw, 72px) * -1); }
}

/* -----------------------------------------------------------------------------
   記事本文  ★次の工程で詰めます。今は白背景に合う最低限のみ
----------------------------------------------------------------------------- */
.article__header,
.page__header {
  padding-bottom: 24px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.article__title,
.page__title {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 400;
  line-height: 1.7;
}

.article__meta {
  margin: 14px 0 0;
  color: var(--sub);
  font-size: 12px;
  letter-spacing: .16em;
}

.article__body > * + *,
.page__body > * + * { margin-top: 1.8em; }

.article__body h2,
.page__body h2 {
  margin-top: 2.4em;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-weight: 400;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.7;
}

.article__body h3 { margin-top: 2em; font-weight: 400; font-size: 17px; }

.article__body a,
.page__body a {
  border-bottom: 1px solid var(--accent);
  transition: color .3s;
}
.article__body a:hover,
.page__body a:hover { color: var(--accent); }

/* --- 本文中の画像とキャプション ---
   参考にした既存記事は、画像1枚ごとに必ずキャプションが付く構成でした。
   画像を本文幅より少し広げ、キャプションは小さく淡く添えます。 */
.article__body figure {
  margin-left: 0;
  margin-right: 0;
}

.article__body figcaption {
  margin-top: 10px;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
}

.article__body blockquote {
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--line);
  color: var(--sub);
}

.article__body pre {
  padding: 18px;
  background: var(--tint);
  border-radius: 2px;
  overflow-x: auto;
}

.article__body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.article__body th,
.article__body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.article__body th { background: var(--tint); font-weight: 400; }

.article__taxonomy,
.taxonomy {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.article__taxonomy a,
.taxonomy a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  color: var(--sub);
  font-size: 11px;
  letter-spacing: .16em;
  transition: color .3s, border-color .3s;
}
.article__taxonomy a:hover,
.taxonomy a:hover { color: var(--ink); border-color: var(--sub); }

.article__back { margin-top: 48px; font-size: 13px; letter-spacing: .12em; }
.article__back a { color: var(--sub); transition: color .3s; }
.article__back a:hover { color: var(--ink); }

.breadcrumb { margin-bottom: 24px; color: var(--sub); font-size: 12px; }
.breadcrumb a { color: var(--sub); transition: color .3s; }
.breadcrumb a:hover { color: var(--ink); }

/* -----------------------------------------------------------------------------
   埋め込みフレーム（YouTube / Google Map）
   -----------------------------------------------------------------------------
   記事本文にHTMLブロックで貼り付けて使います。

   【使い方】

       <div class="frame_wrapper">
         <div class="iframe_top icon_y">
           <img src="/img/blog/icon_youtube.svg" alt="YouTube">
         </div>
         <div class="frame frame--16x9">
           <iframe src="…" title="…" loading="lazy" allowfullscreen></iframe>
         </div>
         <p>説明文</p>
       </div>

   【比率は .frame--◯x◯ で指定します】

       .frame--16x9   動画（YouTube / Vimeo）
       .frame--4x3    地図
       .frame--1x1    正方形（Instagram など）

   ★元の .youtube / .map という書き方も残してあります。
     ただし新しく書くときは .frame--16x9 を使ってください。
     サービス名で分けると、Vimeo を足すたびにCSSが増えていきます。
     比率で分ければ、増えるのはHTML側のクラス名だけで済みます。

   ★余白は「親」に付けています。
     子の iframe に margin-top を付けると、親は aspect-ratio で
     高さが決まっているため、その分だけ下にはみ出します。
----------------------------------------------------------------------------- */
.frame_wrapper {
  border-bottom: 1px solid var(--line);
  padding-bottom: 27px;
  margin-bottom: 44px;
}

/* --- 上部のアイコン（左右に細い線が伸びる） --- */
.iframe_top {
  display: flex;
  align-items: center;
  font-weight: normal;
  margin-bottom: 30px;   /* ★子のiframeではなく、ここで余白を取る */
}

.iframe_top::before,
.iframe_top::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background-color: var(--line);
}
.iframe_top::before { margin-right: 1rem; }
.iframe_top::after  { margin-left: 1rem; }

/* ★flex-shrink: 0 が無いと、線に押されてアイコンが潰れます */
.iframe_top img { flex-shrink: 0; }

.icon_y img { max-width: 140px; width: 50%; height: auto; }
.icon_m img { width: 48px; height: auto; }

/* --- フレーム本体 --- */
.frame,
.youtube,
.map {
  width: 100%;
  overflow: hidden;   /* 中身が万一はみ出しても外へ出さない */
}

.frame iframe,
.youtube iframe,
.map iframe {
  display: block;   /* iframe は既定が inline。下の隙間を防ぐ */
  width: 100%;
  height: 100%;
  border: 0;
}

.frame--16x9,
.youtube { aspect-ratio: 16 / 9; }

.frame--4x3,
.map     { aspect-ratio: 4 / 3; }

.frame--1x1 { aspect-ratio: 1 / 1; }

/* --- 枠内の説明文 ---
   .article__body > * + * は直下の子だけが対象なので、
   frame_wrapper の中の <p> には余白が付きません。ここで補います。 */
.frame_wrapper > p {
  margin-top: 18px;
  margin-bottom: 0;
  font-size: 14px;
}

.frame_wrapper > p a {
  border-bottom: 1px solid var(--accent);
  transition: color .3s;
}
.frame_wrapper > p a:hover { color: var(--accent); }

/* --- スマートフォン --- */
@media (max-width: 700px) {
  .frame_wrapper { padding-bottom: 20px; margin-bottom: 32px; }
  .iframe_top { margin-bottom: 20px; }
  .iframe_top::before { margin-right: .7rem; }
  .iframe_top::after  { margin-left: .7rem; }
  .icon_y img { max-width: 110px; width: 45%; }
  .icon_m img { width: 38px; }

  /* 地図は横長すぎると見づらいので、少し縦に伸ばす */
  .frame--4x3,
  .map { aspect-ratio: 1 / 1; }
}

/* -----------------------------------------------------------------------------
   404
----------------------------------------------------------------------------- */
.notfound { padding: clamp(20px, 6vw, 72px) 0; }

.notfound__code {
  margin: 0;
  color: var(--accent);
  font-size: clamp(56px, 12vw, 120px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: .06em;
}

.notfound__title { margin: 20px 0 0; font-size: clamp(18px, 2.2vw, 24px); font-weight: 400; }
.notfound__message { margin: 12px 0 0; color: var(--sub); font-size: 14px; }

.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }

.notfound__link {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: .12em;
  transition: color .3s, border-color .3s;
}
.notfound__link:hover { color: var(--accent); border-color: var(--accent); }

.notfound__search { display: flex; gap: 8px; margin-top: 32px; }
.notfound__search .menu-search__input { width: min(320px, 100%); }

/* -----------------------------------------------------------------------------
   Brandline（フッター上部のロゴ一覧）
   -----------------------------------------------------------------------------
   HTMLは common/footer.html に直接書いています。

       .brandline
         .brandline__inner
           .brandline__heading   見出し。左上に小さく置く
           .brandline__grid      ロゴを並べる格子
             .brandline__item
               .brandline__link > img

   【なぜ格子（grid）なのか】
     ロゴは「表」ではなく「同じ重みのものが並んでいる」状態です。
     grid なら、列数の指定だけで折り返しが決まり、
     最後の行が半端な数でも左詰めで自然に収まります。

   【画像は 300 × 200 に統一されている前提】
     ロゴごとの縦横比の違いは、画像側で吸収済みです。
     そのためCSS側では、箱の比率を合わせるだけで済んでいます。

     ★もし比率の違う画像が混ざっても崩れないよう、
       object-fit: contain を入れてあります（切れずに収まります）。
----------------------------------------------------------------------------- */
.brandline {
  border-top: 1px solid var(--line);
  background-color: var(--paper);
}

.brandline__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--wrap-pad) clamp(40px, 6vw, 80px);
}

/* --- 見出し ---
   参考サイトに合わせ、主張させずに置いています。
   ★h2 のまま小さく見せています。
     見た目が小さいからと p に変えると、
     見出しの並び（目次）からこの区画が消えます。 */
.brandline__heading {
  margin: 0 0 clamp(32px, 5vw, 64px);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.6;
  color: var(--sub);
}

.brandline__grid {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* PC：6列 */

  /* ★行間を列間より広くしています。
     同じ間隔だと、格子が「網」に見えて
     1つ1つのロゴが読み取りにくくなります。 */
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(24px, 4vw, 64px);
}

.brandline__item { min-width: 0; }   /* はみ出し防止 */

/* --- ロゴ1つ ---
   ★リンクをブロックにして、箱いっぱいを押せるようにしています。
     画像の余白部分が押せないと、狙いを定める操作になります。 */
.brandline__link {
  display: block;
  aspect-ratio: 3 / 2;   /* 300 × 200 */

  /* 押したときに反応が薄いと「効かなかった」と思われるため、
     わずかに沈ませます（色は変えません。ロゴの色を守るためです）。 */
  transition: opacity .3s;
}

.brandline__link:hover { opacity: .55; }

.brandline__link img {
  width: 100%;
  height: 100%;

  /* ★cover ではなく contain。
     ロゴは切り取ってよい画像ではありません。 */
  object-fit: contain;
  object-position: center;
}

/* --- タブレット：4列 --- */
@media (max-width: 1100px) {
  .brandline__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- スマートフォン：3列 --- */
@media (max-width: 700px) {
  .brandline__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- 指で操作する画面では、ホバーの薄れを出さない ---
   ★タップ後にopacityが残り、押した箇所だけ薄いまま見えることがあります。 */
@media (hover: none) {
  .brandline__link:hover { opacity: 1; }
}

/* -----------------------------------------------------------------------------
   フッター
----------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); }

.site-footer__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--wrap-pad);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  align-items: flex-start;
}

.site-footer__tagline {
  margin: 0;
  margin-right: auto;
  font-size: 14px;
  line-height: 2.1;
}

.site-footer__tagline-en {
  color: var(--sub);
  font-size: 11px;
  letter-spacing: .18em;
}

.site-footer__nav,
.site-footer__social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .14em;
}

.site-footer__social { list-style: none; margin: 0; padding: 0; }

.site-footer__nav a,
.site-footer__social a { color: var(--sub); transition: color .3s; }
.site-footer__nav a:hover,
.site-footer__social a:hover { color: var(--ink); }

.site-footer__copyright {
  width: 100%;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--sub);
  font-size: 11px;
  letter-spacing: .16em;
}

/* -----------------------------------------------------------------------------
   トップページのスライドショー
   -----------------------------------------------------------------------------
   HTMLは theme-ramlabel/home_hero.php が組み立てます。

       .hero-slideshow            外枠。ここで大きさと位置を決める
         .hero-slideshow__item    スライド1枚。全部を同じ場所に重ねる
           picture > img          PC/SPで中身が入れ替わる

   【なぜ重ねるのか】
     切り替えは「前を消して次を出す」だけです。
     並べて横に動かす作りにすると、枚数ぶんの幅を計算する必要があり、
     画像を1枚足すたびにJSとCSSの両方を直すことになります。

   【CLS（読み込み時のガタつき）対策 ★重要】
     img に width / height 属性を付けていません
     （枚数ぶん getimagesize() を呼ぶとサーバー負荷が上がるためです）。

     代わりに aspect-ratio で枠を先に確保しています。
     これが無いと、画像が届いた瞬間に下の記事一覧が押し下げられ、
     読もうとした場所が指の下から逃げます。

     ★PC 960×300（3.2:1）と SP 640×448（10:7）で比率が違うため、
       画像の切り替えと同じ 700px で、比率も一緒に切り替えます。
       ここがずれると、切り替わった瞬間に上下が余ります。
----------------------------------------------------------------------------- */
.hero-slideshow {
  position: relative;
  max-width: 960px;      /* 原寸で頭打ち。伸ばすとぼやけるため */
  margin: 0 auto clamp(32px, 5vw, 64px);
  aspect-ratio: 960 / 300;
  overflow: hidden;
  background-color: var(--tint);   /* 読み込み前の下地 */
}

.hero-slideshow__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;   /* 元コードと同じ1秒のクロスフェード */

  /* ★見えていない間は触れないようにします。
     重なっているので、消えているスライドのリンクが
     上に乗ったままだと、そちらが押されてしまいます。 */
  pointer-events: none;
}

.hero-slideshow__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slideshow__item a,
.hero-slideshow__item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slideshow__item img {
  width: 100%;
  height: 100%;

  /* ★枠の比率と画像の比率がわずかにずれても、
     余白を出さずに埋めます。中央基準で切り取ります。 */
  object-fit: cover;
  object-position: center;
}

/* --- スマホ ---
   home_hero.php の <source media="(max-width: 700px)"> と
   必ず同じ数値にしてください。片方だけ変えると比率がずれます。 */
@media (max-width: 700px) {
  .hero-slideshow {
    max-width: 640px;
    aspect-ratio: 640 / 448;
  }
}

/* --- 動きを減らす設定 ---
   slideshow.js 側で自動送りを止め、1枚目で静止させています。
   ここではフェードの指定も消し、切り替わりが残らないようにします。 */
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow__item { transition: none !important; }
}

/* -----------------------------------------------------------------------------
   スマートフォン調整
----------------------------------------------------------------------------- */
@media (max-width: 700px) {
  body { font-size: 14px; }
  .site-header__inner { padding: 16px var(--wrap-pad); }

  /* ★ロゴは原寸(247px)のままだと、狭い画面でバーガーを押し出します。
     width を縮め、height: auto で比率(247:33)を保ちます。 */
  .site-header__logo img { width: 180px; }

  .site-footer__inner { flex-direction: column; gap: 28px; }
}

/* -----------------------------------------------------------------------------
   動きを減らす設定を尊重する
   -----------------------------------------------------------------------------
   ★フェードインも止めます。
     画面全体が明滅する動きは、前庭障害のある方に強い負担になります。
     opacity: 1 を明示しないと、透明のまま止まって何も見えなくなります。
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
    -webkit-animation: none !important;
    opacity: 1 !important;
  }

  /* ★メニューは「動かない」だけで、開閉そのものは効きます。
     transition を消しても transform は適用されるため、
     スライドせずに瞬時に切り替わります。 */
  .menu-panel,
  .menu-level,
  .menu-overlay,
  .burger__bar { transition: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}