@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;
}

/* -----------------------------------------------------------------------------
   トップページのカード ★RAM LABEL独自
   -----------------------------------------------------------------------------
   トップは実績（Works）のサムネイルだけを並べます。
   タイトルと日付は出しません。写真そのものを見せる構成にするためです。

   【★ .page--home で囲っている理由】
     .card は /category/journal/ などの一覧でも使われます。
     囲わずに書くと、JOURNAL一覧からもタイトルと日付が消えます。
     home.html の body には page--archive と page--home の
     2つが付いているので、後者で限定できます。

   【★ display:none で消してよい理由（隠しテキストにならない）】
     カードのリンクは2箇所あります。

         <a class="card__thumb"><img alt="記事タイトル"></a>
         <h2 class="card__title"><a>記事タイトル</a></h2>

     components/article_helpers.php の resolveThumbnail() が
     alt に記事タイトルを入れているため、タイトルを消しても
     「リンクの読み上げ名」は失われません。

     visually-hidden（画面外へ飛ばす等）で文字を残す手もありますが、
     それは隠しテキストにあたります。アクセシビリティ目的なら
     問題視されない手法とはいえ、alt で足りている以上、
     文字を1つも隠さずに済むこちらを選んでいます。

   【★ 画像が無い記事は、リンクが1つも無いカードになります】
     サムネイルが無いとき、archive_card.php は
     <a class="card__thumb"> ごと出力しません。
     そこへタイトルまで消すと、押しても何も起きない灰色の箱が残ります。

     Works にはアイキャッチか本文画像が必ずある前提の作りです。
     画像を入れ忘れた記事があると、この形で表に出ます。
----------------------------------------------------------------------------- */
.page--home .card__title,
.page--home .card__date { display: none; }

/* タイトルと日付が無いぶん、写真の下の余白も要りません。
   ★.card__body 自体は残します。消すと、将来この中へ
     別の要素（受賞マーク等）を足したときに出なくなります。 */
.page--home .card__body { padding-top: 0; }

/* -----------------------------------------------------------------------------
   お問い合わせフォーム（/contact/）  ★RAM LABEL独自
   -----------------------------------------------------------------------------
   public/contact.php が出力するHTMLに対応します。

   【このページだけPHPで動きます】
     管理画面の固定ページとして作ると静的HTMLになり、
     フォームの送信処理を置けません。そのためFTPで直接置いています。
----------------------------------------------------------------------------- */

/* --- 幅 ---

   ★640px にしています。

     入力欄が横に広いと、ラベルから入力欄の右端までの視線移動が
     大きくなり、書きづらくなります。フォームは狭いほうが使えます。

     ★.page--contact の中だけを狭めています。
       .wrap そのものを書き換えると、他の全ページの幅が変わります。

     ★以前は page.html の .wrap--narrow（780px）に入っていましたが、
       専用の contact.html に切り替えたため、
       幅をこちらで決められるようになりました。 */
.page--contact .wrap { max-width: 640px; }

/* --- 見出し ---

   ★h1 はこちら側（.contact-head__title）だけが出します。

     以前は page.html を借りていたため、
     テンプレート側の <h1 class="page__title"> と合わせて
     「お問い合わせ」が2回表示されていました。
     contact.html には h1 を置いていません。両方に置くと再発します。 */

.contact-head{ padding:clamp(48px,7vw,88px) 0 0; }

.contact-head__en{
  margin:0;
  color:var(--sub);
  font-size:11px;
  letter-spacing:.2em;
}

.contact-head__title{
  margin:10px 0 0;
  font-size:clamp(22px,3vw,28px);
  font-weight:400;
  letter-spacing:.04em;
}

.contact-head__sub{
  margin:18px 0 0;
  color:var(--sub);
  font-size:14px;
  line-height:2;
}

/* --- フォーム --- */

.contact-form{ padding:40px 0 clamp(64px,10vw,120px); }

/* フォーム全体のエラー（スパム判定・未入力があったとき） */
.contact-form__alert{
  margin:0 0 32px;
  padding:16px 18px;
  background:#fbeceb;
  color:#b3392f;
  border-radius:2px;
  font-size:14px;
  line-height:1.9;
}

.contact-field{ margin-top:32px; }
.contact-field:first-of-type{ margin-top:0; }

.contact-field__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.contact-field__label{ font-size:14px; letter-spacing:.04em; }

/* 必須・任意のバッジ。
   ★色や形だけでなく、必ず文字でも示すこと。
     色覚特性によっては、色の差だけでは伝わりません。 */
.contact-badge{
  padding:2px 8px;
  border-radius:2px;
  font-size:10px;
  letter-spacing:.08em;
}
.contact-badge--req{ background:var(--ink); color:var(--paper); }
.contact-badge--opt{ background:var(--tint); color:var(--sub); }

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  line-height:1.7;
}

.contact-field input:focus,
.contact-field textarea:focus{
  outline:none;
  border-color:var(--ink);
}

.contact-field textarea{ min-height:190px; resize:vertical; }

.contact-field ::placeholder{ color:#bdbdbd; }

.contact-field__note{
  margin:8px 0 0;
  color:var(--sub);
  font-size:12.5px;
  line-height:1.85;
}

.contact-field__error{
  margin:8px 0 0;
  color:#b3392f;
  font-size:13px;
}

/* エラーになった欄。
   ★枠の色だけでなく、下にエラー文も出しています（contact.php 側）。 */
.contact-field.is-error input,
.contact-field.is-error textarea{
  border-color:#b3392f;
  background:#fbeceb;
}

/* --- ハニーポット（スパム対策） ---

   人間には見えない入力欄です。自動送信の道具だけが埋めます。

   ★display:none を使わない理由
     一部の道具は「非表示の欄は埋めない」判定をします。
     画面外へ飛ばすことで、機械からは通常の欄に見えるようにしています。

   ★aria-hidden と tabindex="-1" は contact.php 側で付けています。
     読み上げ環境とキーボード操作から確実に外すためです。 */
.contact-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* --- 送信ボタン --- */

.contact-submit{ margin-top:48px; }

.contact-btn{
  display:block;
  width:100%;
  padding:20px;
  border:1px solid var(--ink);
  background-color:var(--ink);
  color:var(--paper);
  font-family:inherit;
  font-size:14px;
  letter-spacing:.16em;
  cursor:pointer;
  transition:opacity .3s;
}
.contact-btn:hover{ opacity:.82; }

.contact-privacy{
  margin:20px 0 0;
  color:var(--sub);
  font-size:12.5px;
  line-height:1.95;
}
.contact-privacy a{ border-bottom:1px solid var(--line); }
.contact-privacy a:hover{ border-bottom-color:var(--ink); }

/* --- 完了画面 --- */

.contact-done{
  padding:clamp(64px,9vw,110px) 0 clamp(64px,10vw,120px);
  text-align:center;
}

.contact-done__mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto;
  border:1px solid var(--ink);
  border-radius:50%;
  font-size:22px;
}

.contact-done__title{
  margin:28px 0 0;
  font-size:clamp(19px,2.4vw,23px);
  font-weight:400;
  letter-spacing:.04em;
}

.contact-done__text{
  margin:20px auto 0;
  max-width:560px;
  color:var(--sub);
  font-size:14px;
  line-height:2.1;
}

/* 迷惑メールの案内。
   ★本文と同じ調子で書くと読み飛ばされます。
     ここを読まれないと、自動返信が迷惑メールに入ったときに
     「送ったのに反応がない」と受け取られます。 */
.contact-done__notice{
  margin:32px auto 0;
  max-width:560px;
  padding:18px 20px;
  background:var(--tint);
  border-radius:2px;
  font-size:13.5px;
  line-height:2;
  text-align:left;
}

.contact-done__back{
  display:inline-block;
  margin-top:40px;
  padding:16px 40px;
  border:1px solid var(--line);
  font-size:13px;
  letter-spacing:.16em;
  transition:border-color .3s;
}
.contact-done__back:hover{ border-color:var(--ink); }

@media (max-width:700px){
  .contact-field{ margin-top:26px; }
  .contact-form{ padding:32px 0 clamp(56px,10vw,90px); }
}

/* -----------------------------------------------------------------------------
   撮影実績ページ（photo）  ★RAM LABEL独自
   -----------------------------------------------------------------------------
   templates/theme-ramlabel/photo.html と
   components/photo_meta.php が出力するHTMLに対応します。

   【works との違い】
     works … 2カラム。右のスペック表が追従します。
     photo … 1カラム。写真が全幅で、情報は末尾へ。

   【★ページ幅が works と違います】
     works は .wrap（1160px）、photo は 1000px です。
     写真を大きく見せつつ、1枚が画面を埋め尽くさない幅として
     選んでいます。
----------------------------------------------------------------------------- */

/* ★.page--photo の中だけ .wrap を狭めます。
     .wrap そのものを書き換えると、他の全ページの幅が変わります。 */
.page--photo .wrap { max-width: 1000px; }

/* --- 1-2. タイトル / クライアント名 --- */

.photo-head { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); }

.photo-head__title {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* クライアント名はタイトルの下。
   ★works.html も「タイトル → クライアント名」の並びです。
     ページごとに順序が入れ替わると、読む側が探し直すことになります。
   ★未入力なら photo_meta.php が <p> ごと出力しません。 */
.photo-head__client {
  margin: 12px 0 0;
  color: var(--sub);
  font-size: 13px;
  letter-spacing: .08em;
}

/* --- 3. 写真（本文ブロック） --- */

.photo-body { padding-bottom: clamp(48px, 6vw, 80px); }

/* 本文はブロックエディタの出力です。figure や p が入ります。
   ★aspect-ratio を指定していません。
     写真の縦横比に依存しない作りにするためです。
     縦位置・横位置が混ざっても、そのままの比率で表示されます。 */
.photo-body img {
  display: block;
  width: 100%;
  height: auto;
  /* 読み込み中の下地。真っ白だと、写真が来るまで
     そこに何かがあることが分かりません。 */
  background: var(--tint);
}

/* figure の余白は「左右だけ」消します。
   ブラウザ既定の figure には左右 40px の余白があるためです。

   ★margin: 0 と書いてはいけません（実際に不具合が出ました）。

     margin は上下左右をまとめて指定する一括指定です。
     margin: 0 と書くと margin-top も 0 に含まれるため、
     下の .photo-body > * + * の指定と正面から競合し、
     写真どうしがぴったりくっついて表示されます。

     上下の余白は下の隣接セレクタに任せる、と役割を分けます。 */
.photo-body figure {
  margin-left: 0;
  margin-right: 0;
}

/* 1枚ごとの間隔。
   ★隣接セレクタなので、1枚目には余白が付きません。
   ★clamp で画面幅に応じて変えています。狭い画面で固定の80pxを空けると、
     スクロールばかりで写真が続かない印象になります。 */
.photo-body > * + * { margin-top: clamp(40px, 6vw, 80px); }

/* ギャラリーブロックを使った場合。

   ★写真は「画像ブロック」を縦に並べる想定です。
     ギャラリーブロックは <div class="gallery"> の中に
     figure がまとまって入るため、上の
     .photo-body > * + * が届きません（直下の子ではないため）。
     指定が無いと、ギャラリー内の写真だけがくっついて見えます。

   ★撮影実績では画像ブロックを推奨します。
     ギャラリーは複数枚をまとめて見せる部品なので、
     1枚ずつ大きく見せる目的とは噛み合いません。
     ここでの指定は、間違って使ったときに
     レイアウトが崩れないための保険です。 */
.photo-body .gallery { display: block; }
.photo-body .gallery__item + .gallery__item { margin-top: clamp(40px, 6vw, 80px); }

.photo-body figcaption {
  margin-top: 10px;
  color: var(--sub);
  font-size: 12px;
  letter-spacing: .04em;
}

/* --- 4. 紹介文 --- */

/* ★写真と同じ1000px幅です。

     1行が60〜65文字程度になります。日本語の読みやすさの目安
     （40〜45文字）は超えるので、2〜3行の短い文章に留めてください。
     長文を入れると、行を追うのが難しくなります。

   ★空なら photo_meta.php がこの div ごと出力しません。
     余白だけが残るのを防ぎます。 */
.photo-text {
  padding-bottom: clamp(48px, 6vw, 80px);
  color: var(--sub);
  font-size: 14px;
  line-height: 2.1;
}
.photo-text p { margin: 0; }
.photo-text p + p { margin-top: 1.5em; }

/* --- 5. CREDIT / タグ / CONTACT --- */

.photo-foot {
  padding: clamp(44px, 6vw, 68px) 0 clamp(64px, 10vw, 120px);
  border-top: 1px solid var(--line);
}

.photo-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

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

/* --- クレジット ---

   ★罫線を引いていません。

     線で区切ると「表」に見えます。works のスペック表は案件条件を
     照合する場所なので表で正しいのですが、クレジットは読み流す情報です。
     線が入るぶんだけページ末尾が重くなり、写真の余韻を削ります。

     代わりに行間で区切ります。罫線を消したぶん、縦の間隔は広げてあります。

   ★値が空の行は出力しません（works とは逆の仕様）。

     works は「空欄でもラベルを出す」ことで埋め忘れに気づける作りに
     しました。しかし撮影は、案件によって関わる職種が違います。
     スタイリストのいない撮影で「Styling」という空のラベルが出たら、
     それは埋め忘れではなく、そもそも無関係な項目です。 */
.photo-credit__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 7px 0;
  font-size: 13.5px;
  line-height: 1.8;
}

/* ラベル。複数名のときも1回しか出しません。

   ★align-self: start が要ります。
     grid の既定は stretch なので、これが無いとラベルが
     2行ぶんの高さに引き伸ばされ、1人目の名前と縦位置がずれます。
     複数名のときだけ起きる、気づきにくいズレです。 */
.photo-credit__key {
  align-self: start;
  color: var(--sub);
  font-size: 12px;
}

/* 名前を縦に積むための箱 */
.photo-credit__names { display: flex; flex-direction: column; }

/* 人名はローマ字（姓 → 名）で表記します。
   ★字面が英字になるぶん、和文より小さく見えます。
     letter-spacing を少し足して、詰まって見えないようにします。 */
.photo-credit__name { letter-spacing: .02em; }

/* 2人目以降。
   ★nl2br で <br> にすると行ごとの間隔を調整できず、
     名前が詰まって1つの塊に見えます。
     photo_meta.php は1行につき1つの span に分けて出力しています。 */
.photo-credit__name + .photo-credit__name { margin-top: 4px; }

/* 所属の括弧書き。
   ★人名より一段落とします。同じ濃さだと、
     どこまでが名前か一目で分からなくなります。
   ★全角（）と半角() の両方を photo_meta.php が拾います。 */
.photo-credit__org { color: var(--sub); font-size: 12.5px; }

/* --- タグ --- */

.photo-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.photo-tag {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  transition: border-color .3s;
}
.photo-tag:hover { border-color: var(--ink); }

/* --- CONTACT ---

   ★トップページのWORKS一覧に混ざる以上、
     見た人が問い合わせられる出口は残します。
     「作品として見せる」が主目的でも、
     一等地に置くなら受注につながる導線が必要です。 */
.photo-cta { margin-top: 40px; }

.photo-cta__btn {
  display: block;
  padding: 19px 16px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  letter-spacing: .16em;
  transition: border-color .3s;
}
.photo-cta__btn:hover { border-color: var(--ink); }

.photo-cta__sub {
  display: block;
  margin-top: 4px;
  color: var(--sub);
  font-size: 10.5px;
  letter-spacing: .06em;
}

/* --- 狭い画面 --- */

@media (max-width: 700px) {
  /* クレジットとタグを縦に積みます。
     2列のままだと、1列あたりが狭くて名前が折り返します。 */
  .photo-info { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .photo-credit__row { grid-template-columns: 80px 1fr; gap: 10px; }
}

/* -----------------------------------------------------------------------------
   ページ送り
----------------------------------------------------------------------------- */
.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 > * + *,
.works__body > * + * { margin-top: 1.8em; }

.article__body h2,
.page__body h2,
.works__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,
.works__body h3 { margin-top: 2em; font-weight: 400; font-size: 17px; }

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

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

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

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

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

.article__body table,
.works__body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.article__body th,
.article__body td,
.works__body th,
.works__body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.article__body th,
.works__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); }

/* -----------------------------------------------------------------------------
   実績詳細ページ（works）  ★RAM LABEL独自
   -----------------------------------------------------------------------------
   templates/theme-ramlabel/works.html と
   components/works_meta.php が出力するHTMLに対応します。

   【構成】
     左 … .works__body   本文（写真を縦に並べる）
     右 … .works__info   情報カラム。PCでは position:sticky で追従

   【本文の中身について】
     .works__body の直下には、ブロックエディタが生成した
     figure / h2 / p などがそのまま入ります。
     それらの見た目は上の「記事本文」セクションで
     .article__body と一緒に指定してあります（セレクタに
     .works__body を並べてあります）。ここでは重複させません。

   【★空欄でもラベルが出る仕様との関係】
     works_* の値が空でも、.works__row や .works__text は出力されます。
     そのため「値が無い行」でも罫線と余白は保たれ、
     レイアウトが崩れることはありません。

     消えるのは VISIT SITE と PRICE LIST のボタンだけです。
     .works__actions には枠線も背景も無いため、
     ボタンが減っても線が浮くことはありません。
----------------------------------------------------------------------------- */

.works {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
}

/* --- 左: 本文（写真） --- */

.works__body { min-width: 0; }

/* 実績ページの写真は、記事本文よりも間隔を広く取ります。
   1枚ずつを作品として見せるためです。
   ★上の「記事本文」セクションの 1.8em を、ここで上書きしています。 */
.works__body > * + * { margin-top: clamp(28px, 3.4vw, 48px); }

.works__body img { width: 100%; }

/* --- 右: 情報カラム --- */

/* ★top を小さめに取っている理由
     このテーマのヘッダーは追従しません（position: relative）。
     そのため情報カラムがヘッダーの下に潜り込む心配がなく、
     画面上端に近い位置まで寄せられます。

     ★将来ヘッダーを sticky にしたときは、
       この値をヘッダーの高さぶん増やしてください。
       忘れると、追従した情報カラムがヘッダーに隠れます。 */
.works__info {
  position: sticky;
  top: 24px;
}

.works__title {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
}

.works__client {
  margin: 8px 0 0;
  color: var(--sub);
  font-size: 13px;
}

/* --- ABOUT THIS PROJECT --- */

.works__about {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

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

.works__text {
  margin: 0 0 18px;
  color: var(--sub);
  font-size: 13px;
  line-height: 2;
}
.works__text:last-child { margin-bottom: 0; }

/* 「課題」「提案」「成果」の小見出し。
   ★空欄の項目でも、この見出しは表示されます（仕様）。 */
.works__text strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
}

/* --- スペック表 --- */

.works__spec {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.works__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}

.works__key {
  color: var(--sub);
  font-size: 12px;
  letter-spacing: .04em;
}

.works__val {
  font-size: 13.5px;
  line-height: 1.9;
}

/* ★リンクの下線は --line（薄灰）にしています。
     本文中のリンク（.article__body a）は --accent の下線ですが、
     スペック表は罫線が密に並ぶ場所なので、同じ濃さの線が増えると
     どれが罫線でどれがリンクか判別しづらくなります。 */
.works__val a {
  border-bottom: 1px solid var(--line);
  transition: border-color .3s;
}
.works__val a:hover { border-bottom-color: var(--ink); }

/* 対応範囲（Scope）。複数項目なので箇条書きにします。
   ★空行は components/works_meta.php 側で除いてあります。
     除かないと、行頭の「—」だけの空項目ができます。 */
.works__list { margin: 0; padding: 0; list-style: none; }
.works__list li { font-size: 13.5px; line-height: 1.85; }
.works__list li::before {
  content: "—";
  margin-right: 8px;
  color: var(--sub);
}

/* --- ボタン --- */

.works__actions { margin-top: 32px; }

.works__btn {
  display: block;
  padding: 19px 16px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .16em;
  transition: opacity .3s, border-color .3s;
}

/* VISIT SITE ── 黒ベース・白文字 */
.works__btn--solid {
  background-color: var(--ink);
  border: 1px solid var(--ink);
  color: var(--paper);
}
.works__btn--solid:hover { opacity: .82; }

/* PRICE LIST / CONTACT ── グレー枠・黒文字 */
.works__btn--outline {
  background-color: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.works__btn--outline:hover { border-color: var(--ink); }

/* ボタン同士の間隔。
   ★隣接セレクタ（+）で書いているのが重要です。
     VISIT SITE と PRICE LIST は、URLが空だと出力されません。
     .works__btn { margin-top: 12px } と書くと、
     残った1つ目のボタンにも上余白が付いてしまいます。 */
.works__btn + .works__btn { margin-top: 12px; }

.works__btn-sub {
  display: block;
  margin-top: 4px;
  color: var(--sub);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.works__btn--solid .works__btn-sub { color: rgba(255, 255, 255, .65); }

/* --- 1カラムに折り返す ---

   ★1100px はヘッダーのナビが3カラムからバーガーに切り替わる幅です。
     works だけ別の幅で折り返すと、画面幅によっては
     「ナビはSP表示なのに本文は2カラム」という中途半端な状態が生まれます。
     テーマ全体の区切りに合わせています。 */
@media (max-width: 1100px) {
  .works {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* 1カラムでは追従させません。
     情報カラムが本文の下に来るため、追従させると
     スクロールの最後まで画面に貼り付いたままになります。 */
  .works__info { position: static; }
}

@media (max-width: 700px) {
  .works__row { grid-template-columns: 76px 1fr; gap: 12px; }
}

/* -----------------------------------------------------------------------------
   埋め込みフレーム（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;
  }
}