/*------------------------------------------------------------------
  /y.haku lab のCSS
  テンプレート（style.css / media_query.css）の後に読み込む層。

  なぜ分けているか：
    media_query.css はテンプレート付属で style.css より後に読み込まれる。
    そのため同じ強さの指定を style.css に書いても必ず負けてしまい、
    これまで「ロゴの幅」「ヘッダーの余白」「金額の文字」「スキルの円」で
    表示が崩れる原因になっていた。
    このファイルを最後に読み込むことで、素直な指定のまま上書きできる。

  ここを触るときの約束：
    ・テンプレートの2ファイルは書き換えない（差分はすべてこのファイルへ）
    ・打ち消しのためだけにセレクタを不必要に強くしない
------------------------------------------------------------------ */

/*==================================================================
  目次 － どこに何が書いてあるか

  ※ 並び順は「書いた順」のままです。ここは探すための案内だけで、
     指定そのものは1行も動かしていません。
     （CSSは「下に書いたほうが勝つ」ため、並べ替えると見た目が変わる恐れがあります）

  ※ 探しかた：下の見出し名をそのままコピーして検索してください。
     例）「31.制作実績のサムネイル」で検索

  ※ 注意：番号 46〜54 は2回ずつ出てきます（過去の追記で重複したため）。
     番号だけで検索すると2か所ヒットします。名前まで入れて検索してください。


  ■ 土台（サイト全体の色・文字）
      20.配色と書体
      24.日本語まわりの調整
      25.カラーの上書き
      26.ウェイトを400/700の2種に統一

  ■ 骨組み（全ページに出るもの）
      19.ローディング表示
      21./y.haku lab Logo
      28.SNSアイコン・サイドバーの情報行
      40.フッター
      51.サイドメニューのホバー・現在地

  ■ 共通の部品（いろいろなページで使い回すもの）
      30.セクションタイトル（英語＋日本語）
      41.ボタン（左から色が入る）
      42.アイコンの大きさを揃える
      49.矢印まわり（ボタン・戻る・詳細を見る・ページ上部へ）
      50.セクション見出しの英語に細い線を添える
      39.下層ページの「戻る」
      53.画像を大きく開く（ライトボックス）

  ■ トップページ
      29.FV
      36.FVの吹き出し
      35.お客様の声（流れる帯）
      37.サービス（料金プラン形式）
      44.サービスの余白・背景画像の受け口
      34.お知らせ
      45.お知らせの追記
      33.Contact
      47.お問い合わせの追記
      48.連絡先の見出しをアイコンのみに
      49.連絡先のボタン
      54.お問い合わせの4つの箱を一列に
      52.フォームへの着地位置

  ■ 私について（about.html）
      23.Works & Tools
      32.About / Career
      38.使用ツール（円グラフ）
      50.私についてのイラスト・YouTube
      53.経歴・職歴をカードにする

  ■ 制作実績（一覧・モーダル・詳細ページ）
      31.制作実績のサムネイル
      57.実績一覧の説明文の折り返し
      43.実績の詳細モーダル
      54.制作実績の詳細ページ
      47.実績詳細：箇条書きと掲載メディア
      48.実績詳細のヒーロー（Figmaの重ね配置）
      55.実績詳細の見出し（スマホ）
      56.ロゴ・名刺など Figma 構成の詳細ページ
      58.フライヤーの詳細ページ
      46.バナー詳細ページのカラー・フォント見本

  ■ 料金ページ（price.html）
      27.料金ページ
      料金ページ（番号なしの見出し。price.html 専用の指定はここから）
      51.プラン診断（料金ページ）
      59.料金表の「参考イメージ」リンク

  ■ お知らせの詳細（news-01.html）
      46.お知らせの詳細ページ

  ■ その他
      52.こまかい調整
      60.準備中ページ
      61.スマホのボタン位置
==================================================================*/

/*-----------------------[ 19.ローディング表示 ]------------------------*/
/* ブランド名は表記どおり小文字で表示し、追加した文字にも順番に動きを付ける。 */
.preloader .loading {
    text-transform: none;
    /* 「/y.haku lab」は 30px・字間8px だと横幅が約408px になり、
       それより狭いスマホでは「b」だけ2行目に落ちていた。
       文字の大きさを画面幅に合わせて縮め（最大はPCと同じ30px）、字間も文字サイズに比例させ、
       折り返し自体も禁止して、どの端末でも1行に収める（横幅 ≒ 文字サイズ × 13.6） */
    font-size: clamp(16px, 6.5vw, 30px);
    letter-spacing: 0.27em;
    white-space: nowrap;
}
.loading span:nth-child(8)::after {
    animation-delay: 1.4s;
}
.loading span:nth-child(9)::after {
    animation-delay: 1.6s;
}
.loading span:nth-child(10)::after {
    animation-delay: 1.8s;
}
.loading span:nth-child(11)::after {
    animation-delay: 2s;
}

/*-----------------------[ 20.配色と書体 ]------------------------*/
/* テンプレートの :root と書体をここで上書きする。
   後から読み込むので、テンプレート側は書き換えなくてよい。 */
* {
    /* 欧文の Inter は CJK を含まないため、日本語は自動的に Noto Sans JP へ流れる。
       以降のヒラギノ・游ゴシックは、Webフォントの読み込みに失敗した場合の保険。 */
    font-family: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
}
:root {
    /* ページ背景：赤みを入れたグレージュ。R241 G237 B233 と 4 ずつ下がる構成 */
    --primary-color: #F1EDE9;
    /* サイドメニューのカード：左上の淡い水色から右下の青へ流れるグラデーションに、
       砂目状のノイズを重ねた「グレイニーグラデーション」。
       ノイズは SVG の feTurbulence をデータURIで埋め込んでいるので画像ファイルは不要。
       feColorMatrix で彩度を0にしないと色付きのノイズになりカードが濁る。

       調整するところ：
         粒の細かさ … baseFrequency（大きいほど細かい）
         粒の強さ   … rect の opacity（現在 0.7）
       0.7 は Figma の実データと原寸で見比べて合わせた値。

       ノイズは中間色なので、両端が中央へ寄る（実測）：
         明るい端 #E2E9F2 → #D4D9DF   文字#333333 とのコントラスト 8.90:1
         濃い端   #89A7CC → #9BAEC6   同 5.57:1
       どちらもAA基準（4.5:1）を満たす。 */
    --side-menu-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23n%29' opacity='0.7'/%3E%3C/svg%3E");
    --side-menu-color: var(--side-menu-noise) 0 0 / 200px 200px repeat,
        linear-gradient(145.75deg, #E2E9F2 4.39%, #89A7CC 100%) 0 0 / cover no-repeat;
    --section-background: #FFFFFF;
    --card-background: #FFFFFF;
    /* SNSアイコンの丸背景。カードより濃い同系色にして白のグリフを載せる（5.43:1） */
    --icons-background: #4D6A9E;
    /* 見出し・強調。白カード上で 12.63:1 */
    --main-text: #666666;
    /* 本文。白カード上で 5.74:1 / ページ背景上で 4.93:1 */
    --sub-text: #666666;
    --btn-border: #666666;
    /* カード上のテキストは白だとコントラスト 2.5:1 で読めないため、チャコールに統一（5.13:1） */
    --side-menu-web: #333333;
    --card-text: #333333;
    /* アクセント。カードと同じ色相219度のまま明度を落とし、白カード上 5.43:1 / 背景上 4.66:1 */
    --accent: #4D6A9E;
    /* 箇条書き用のチェックボックス。マスクで描くので色は自由に変えられる */
    --checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 1H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm0 1.5a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5Z'/%3E%3Cpath d='m6.9 10.9-2.7-2.7 1.1-1.1 1.6 1.6 3.8-3.8 1.1 1.1-4.9 4.9Z'/%3E%3C/svg%3E");
    /* 黒アイコンを --sub-text (#666666) に染めるフィルター（数値解、誤差0で一致） */
    --icons-filter: brightness(0) saturate(100%) invert(32.6367%) sepia(0.0003%) saturate(0%) hue-rotate(239deg) brightness(4.9417%) contrast(20.6666%);
    --icons-hover: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(221deg) brightness(101%) contrast(101%);
}

/*-----------------------[ 21./y.haku lab Logo ]------------------------*/
/* 元テンプレートのロゴは黒1色で --icons-filter に依存していたが、
   /y.haku lab ロゴは自前の色（#6f8fa3）を持つため filter を無効化する。 */
/* ヘッダーの余白を上下左右そろえる。
   中身（ロゴ・ボタン・ハンバーガー）が全て50px前後なので、
   20pxずつで囲むと高さ90pxに収まる。 */
header {
    padding: 20px;
}
@media (max-width: 767px) {
    header {
        padding: 16px;
    }
}
/* PCでも背景を透けさせる。
   1199px以下は media_query.css が同じことをしているので、
   ここはその補集合（1200px以上）だけを対象にして、透け具合も同じ値に合わせる。
   ::before に敷くのは、backdrop-filter が自分の背景色には効かないため。 */
@media (min-width: 1200px) {
    header {
        position: relative;
        background: transparent;
    }
    header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: inherit;
    }
}
/* 狭い画面のサイドメニュー（ドロワー）で、ナビと連絡先の2枚が
   くっついてしまっていた。media_query.css が margin-bottom を 0 にしているため。
   PCと同じ20pxに戻す。 */
@media (max-width: 1199px) {
    .list-menu {
        margin-bottom: 20px;
    }
    /* ドロワー自体にも青いグラデーションが敷かれていて、
       カードとの境目が分からず1枚の面に見えていた。
       PCと同じくページ背景（ベージュ）にして、カード2枚が浮いて見えるようにする。 */
    .side-menu-main {
        background: var(--primary-color);
        padding: 20px;
        /* 中身が画面より高くなったときにスクロールできるように */
        overflow-y: auto;
        /* 背後のページもベージュなので、影がないと開いている端が分からなくなる */
        box-shadow: 0 0 24px rgba(77, 106, 158, 0.14);
    }
}
/* ハンバーガー／閉じる（同じボタンの2つの状態）。
   テンプレートは黒のグラデ円＋白線だったが、ヘッダーの他の要素と浮いてしまうので、
   背景をなくして線だけにし、色もアイコン類と同じ #666666 にそろえる。
   大きさ50pxはそのまま（ヘッダーの余白をこの高さに合わせているため）。 */
.menu-toggle-button {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.hamburger .line {
    background-color: var(--sub-text);
}
.logo {
    filter: none;
    /* 縦横比が 197:165（ほぼ正方形）のロゴなので、幅ではなく高さで揃える。
       高さは、お問い合わせボタン（51px）とハンバーガー（50px）に合わせて
       50px にしている。3つの高さが揃うので、ヘッダーの上下の余白が均一になる。
       なお、この大きさではロゴ内の「/y.haku lab.」は読めない。
       文字も読ませたい場合は76px必要で、その場合ヘッダーは96pxになる。 */
    height: 50px;
    width: auto;
}

/*-----------------------[ 23.Works & Tools ]------------------------*/
/* サムネイルは公開URLがあるものだけリンクにするため、
   .gallery-item 全体に付いていた cursor:pointer をリンク側に移す。 */
.gallery-item {
    cursor: default;
}
a.gallery-item-sub {
    display: block;
    cursor: pointer;
}
/* 流れる帯は企業ロゴ画像からツール名テキストへ変更したためチップとして装飾する */
.marquee-tool {
    display: inline-block;
    padding: 10px 22px;
    border: 2px dashed var(--sub-text);
    border-radius: 22px;
    color: var(--main-text);
    font-size: 18px;
    line-height: 24px;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
}
.marquee-img-main:hover .marquee-tool {
    border: 2px dashed var(--main-text);
    border-radius: 0;
}

/*-----------------------[ 24.日本語まわりの調整 ]------------------------*/
/* 日本語は英字より字面が大きく、行間・折り返しの調整が必要なための上書き */
body {
    line-break: strict;
    overflow-wrap: break-word;
}
.creative,
.arya-stack-about {
    line-height: 1.4;
}
.visionary,
.self-taught,
.cursus,
.ipsum {
    line-height: 1.9;
}
.services-box .visionary {
    line-height: 1.9;
}
.overlay-text {
    letter-spacing: 0;
    line-height: 1.6;
    padding: 0 10px;
}
.about-detail {
    max-width: 130px;
}
.about-detail-info::before {
    margin-right: 20px;
}
@media (max-width: 991px) {
    .creative {
        line-height: 1.4;
    }
}
/* media_query.css の .logo { width: 200px } を上書きする */
@media (max-width: 767px) {
    .logo {
        height: 50px;
        width: auto;
    }
}

/*-----------------------[ 25.カラーの上書き ]------------------------*/
/* サイドメニューのカードが黒(#000)から青(#92A6CA)に変わったため、
   元テンプレートで「暗い背景に白文字」を前提にしていた箇所をチャコールへ統一する。
   白のままだとコントラスト比 2.48:1 で、メールや所在地が読めない。 */
.phone-num,
.phone-text,
.side-menu-ul li a {
    color: var(--card-text);
}
/* カード上のナビアイコン（元は白のSVG）もチャコールへ */
.side-menu-ul li a img {
    filter: brightness(0) saturate(100%) invert(18.4257%) sepia(0%) saturate(0%) hue-rotate(1.99deg) brightness(11.6294%) contrast(62.6865%);
}
.side-menu-ul li a.active img {
    filter: brightness(0) saturate(100%) invert(18.4257%) sepia(0%) saturate(0%) hue-rotate(1.99deg) brightness(11.6294%) contrast(62.6865%);
}
/* SNSアイコンは濃い青の丸に白グリフ。ホバーで白丸＋チャコールグリフに反転する */
.media-icons:hover img {
    filter: brightness(0) saturate(100%) invert(18.4257%) sepia(0%) saturate(0%) hue-rotate(1.99deg) brightness(11.6294%) contrast(62.6865%);
}
/* サムネイルのホバー覆い */
.overlay {
    background: #333333d9;
}

/*-----------------------[ 26.ウェイトを400/700の2種に統一 ]------------------------*/
/* Webフォントの読み込みを軽くするため 400 と 700 の2ウェイトだけを配信している。
   元テンプレートで最も多い font-weight:500 は自動的に 400 で描画されるため、
   そのままだと「小見出し」に相当する情報が本文と同じ太さになり階層が潰れる。
   下記は見出し的な役割を持つものだけを 700 に引き上げ、階層を保つための指定。 */
.web-dev-text,
.gallery-info h3,
.call-num,
.about-detail-info,
.bachelor {
    font-weight: 700;
}
/* 経歴の見出しは元テンプレートが英字前提で uppercase だったため、
   「Web制作の道へ」が「WEB制作の道へ」になってしまう。日本語なので解除する */
.bachelor {
    text-transform: none;
}

/*-----------------------[ 27.料金ページ ]------------------------*/
/* サービスの箱（.services-box）の中に、料金の行を並べるための指定 */
.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--sub-text);
}
.price-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
/* テンプレートに .services-box div { display:flex } があるため、
   この中の div は放っておくと横並びになる（項目名と補足が同じ行に出て、
   項目名が単語の途中で折れていた）。縦積みに戻す。 */
.services-box .price-row-main {
    flex: 1;
    min-width: 0;
    display: block;
    text-align: left;
    padding-bottom: 0;
}
.price-name {
    color: var(--main-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}
.price-note {
    color: var(--sub-text);
    font-size: 14px;
    line-height: 1.8;
    padding-top: 4px;
}
.price-value {
    color: var(--main-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
/* 料金の箱に置くサービスアイコン。
   3Dイラスト（PNG）に差し替えたので、テンプレートの単色化フィルターを外す。
   .services-box img より強い指定にしないと打ち消せない */
.services-box .services-icon {
    filter: none;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/*-----------------------[ 料金ページ ]------------------------
   ここから下は price.html 専用。他ページに影響しないよう、
   すべて .page-price（body に付けたクラス）配下に閉じている。
------------------------------------------------------------ */
/* ---- ページ内メニュー ---- */
.page-price .price-nav {
    margin: 4px 0 34px;
    padding: 12px 6px;
    border-top: 1px solid #E3E8F0;
    border-bottom: 1px solid #E3E8F0;
}
.page-price .price-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.page-price .price-nav a {
    display: block;
    padding: 7px 15px;
    border-radius: 20px;
    background: #EDF0F5;
    color: var(--main-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    transition: all 0.3s ease-in-out;
}
.page-price .price-nav a:hover,
.page-price .price-nav a:focus-visible {
    background: var(--accent);
    color: #FFFFFF;
}
/* 見出しへ飛んだとき、追従ヘッダーの下に隠れないようにする */
.page-price .price-area,
.page-price .plan-title,
.page-price #flow,
.page-price #faq {
    scroll-margin-top: 110px;
}

/* ---- 分野の見出し ---- */
.page-price .price-area {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--main-text);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    padding: 10px 0 10px 16px;
    border-left: 4px solid var(--accent);
    margin: 46px 0 20px;
}
.page-price .price-area:first-of-type {
    margin-top: 8px;
}
.page-price .price-area-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: none;
    flex-shrink: 0;
}
.page-price .price-area-icon:last-of-type {
    margin-right: 10px;
}
/* 分野の見出しとリード文の間隔。見出し側の下余白20pxをそのまま活かし、
   「プラン診断」のリード文と同じ空きにそろえる */
.page-price .price-area-lead {
    color: var(--sub-text);
    font-size: 15px;
    line-height: 1.9;
    margin: 0 0 22px;
}
.page-price .plan-title {
    color: var(--main-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    padding-bottom: 12px;
    border-bottom: 1px solid #D5DCE8;
    margin: 30px 0 16px;
}
.page-price .plan-note {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 14px;
}
/* カードの外に1回だけ書く共通事項 */
.page-price .plan-common {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.9;
    margin: 14px 0 0;
    padding-left: 1.1em;
    position: relative;
}
.page-price .plan-common::before {
    content: "※";
    position: absolute;
    left: 0;
}

/* ---- プランBOX（全サービス共通の横長カード） ----
   左：おすすめ→プラン名→画像 ／ 中央：短い説明→金額→補足 ／ 右：詳細
   HTMLの並びも同じなので、読み上げ順・キーボードの移動順も同じになる。
   演出クラス（fade_down 等）はこのページでは付けていないため、
   読み込み直後から中身が読める。 */
.page-price .plan-rows {
    display: grid;
    gap: 16px;
    /* すべてのBOXが同じ外幅・同じ列位置になるよう、幅の指定はここだけに置く */
    width: 100%;
}
.page-price .plan-row {
    display: grid;
    grid-template-columns: 25% 30% minmax(0, 1fr);
    gap: 24px;
    /* 3ブロックの高さが違うので、上下の余白が均等になるよう中央にそろえる */
    align-items: center;
    padding: 22px 24px;
    border-radius: 20px;
    /* 枠は全BOX1pxで固定。おすすめの太い線は内側の影で描き、外寸を変えない */
    border: 1px solid #E3E8F0;
    background: var(--section-background);
}
/* ホバーで枠の色が変わるのと合わせて少し拡大する（バナー作品と同じ動き） */
.page-price .plan-row {
    position: relative;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.page-price .plan-row:hover {
    z-index: 2;
    border-color: var(--accent);
    transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
    .page-price .plan-row {
        transition: none;
    }
    .page-price .plan-row:hover {
        transform: none;
    }
}
.page-price .plan-row.is-recommended {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent), 0 6px 20px rgba(77, 106, 158, 0.12);
}
/* --- 左：おすすめ／プラン名／画像 --- */
.page-price .plan-row-head {
    text-align: center;
}
/* おすすめはBOXの左上。対象外のBOXには要素ごと出さないので余白も空かない */
.page-price .plan-badge {
    display: block;
    width: fit-content;
    margin: 0 0 8px;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--accent);
    /* 濃い青の上なので白（5.43:1） */
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}
.page-price .plan-card-name {
    padding: 8px 14px;
    border-radius: 24px;
    background: #D3DEEE;
    /* 淡い水色の上で 6.03:1 */
    color: #2E3F5C;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
.page-price .plan-row.is-recommended .plan-card-name {
    background: linear-gradient(135deg, #5B78AB 0%, #3B547F 100%);
    color: #FFFFFF;
}
.page-price .plan-row-visual {
    margin-top: 12px;
}
.page-price .plan-row-visual img {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
}
/* サービスの立体イラストは写真より小さいので、下地を敷いて見た目の大きさをそろえる */
.page-price .plan-row-icon {
    padding: 20px;
    background: rgba(77, 106, 158, 0.07);
}
/* --- 中央：短い説明＋金額 --- */
.page-price .plan-card-lead {
    color: var(--sub-text);
    font-size: 14px;
    line-height: 1.9;
}
.page-price .plan-unit {
    padding-top: 12px;
    color: var(--sub-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
}
.page-price .plan-card-price {
    padding-top: 2px;
    color: var(--accent);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    /* 金額の途中で折り返さない */
    white-space: nowrap;
}
.page-price .plan-card-price.is-tbd {
    font-size: 19px;
    color: var(--main-text);
    white-space: normal;
}
.page-price .plan-tax {
    margin-left: 5px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sub-text);
}
.page-price .plan-price-note {
    padding-top: 4px;
    color: var(--sub-text);
    font-size: 12px;
    line-height: 1.7;
}
.page-price .pack-compare {
    padding-top: 6px;
    color: var(--sub-text);
    font-size: 12px;
    line-height: 1.7;
}
.page-price .pack-compare b {
    color: var(--accent);
    font-weight: 700;
}
.page-price .pack-term {
    padding-top: 6px;
    color: var(--sub-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}
/* 動画のコンパクトな料金一覧 */
.page-price .price-lines {
    margin-top: 12px;
}
.page-price .price-lines li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0 10px;
    padding: 7px 0;
    border-bottom: 1px dashed #E3E8F0;
}
.page-price .price-lines li:last-child {
    border-bottom: none;
}
.page-price .price-lines-label {
    color: var(--sub-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.page-price .price-lines-value {
    color: var(--accent);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.page-price .price-lines-note {
    grid-column: 1 / -1;
    color: var(--sub-text);
    font-size: 12px;
    line-height: 1.6;
}
/* --- 右：詳細 --- */
.page-price .plan-row-detail {
    padding-left: 24px;
    border-left: 1px solid #E3E8F0;
    text-align: left;
}
.page-price .plan-detail-title {
    color: var(--sub-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
}
.page-price .plan-points {
    margin-top: 4px;
}
.page-price .plan-points li {
    position: relative;
    padding: 5px 0 5px 14px;
    color: var(--main-text);
    font-size: 13px;
    line-height: 1.8;
}
.page-price .plan-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.page-price .plan-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #E3E8F0;
    color: var(--main-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
}
.page-price .plan-meta span {
    margin: 0 6px;
    color: var(--sub-text);
    font-weight: 400;
}
/* ページ末尾のお問い合わせボタン（プランBOXの相談ボタンは廃止した） */
.page-price .price-contact-btn {
    display: flex;
    margin-top: 18px;
}

/* ---- 表 ---- */
.page-price .plan-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
}
.page-price .plan-table-wrap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.page-price .plan-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}
.page-price .plan-table th,
.page-price .plan-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #E3E8F0;
    color: var(--sub-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
}
/* 「おすすめ」はプラン名の上の行に小さく出す。
   横に並べるとその列だけ広がって、3つのプランの幅がそろわないため。 */
.page-price .plan-table-badge {
    display: block;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}
/* 項目の列を26%、残りをプランの数で等分して、どのプランも同じ幅にする。
   table-layout: fixed にすると、1行目（見出し）の指定だけで列幅が決まる。 */
.page-price .plan-table {
    table-layout: fixed;
}
.page-price .plan-table thead th:first-child {
    width: 26%;
}
.page-price .plan-table tbody th {
    width: 26%;
    color: var(--main-text);
    font-weight: 700;
}
.page-price .plan-table thead th {
    border-bottom: 2px solid var(--sub-text);
    color: var(--main-text);
    font-size: 14px;
    font-weight: 700;
}
.page-price .plan-table tbody tr:nth-child(odd) {
    background: rgba(77, 106, 158, 0.05);
}
.page-price .plan-table tbody tr:last-child th,
.page-price .plan-table tbody tr:last-child td {
    border-bottom: none;
}
/* 対象外は印を付けず「—」で示す */
.page-price .plan-table td.is-off {
    color: #8C8C8C;
}
.page-price .plan-price {
    color: var(--main-text);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- 折りたたみ ---- */
.page-price .price-fold {
    margin-top: 16px;
    border: 1px solid #E3E8F0;
    border-radius: 14px;
    background: var(--section-background);
}
.page-price .price-fold + .price-fold {
    margin-top: 10px;
}
.page-price .price-fold > summary {
    position: relative;
    padding: 14px 44px 14px 18px;
    color: var(--main-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    cursor: pointer;
    list-style: none;
    border-radius: 14px;
}
.page-price .price-fold > summary::-webkit-details-marker {
    display: none;
}
.page-price .price-fold > summary::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out;
}
.page-price .price-fold[open] > summary::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}
.page-price .price-fold > summary:hover {
    background: rgba(77, 106, 158, 0.05);
}
/* キーボード操作のときだけ枠を出す */
.page-price .price-fold > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.page-price .price-fold-body {
    padding: 4px 18px 18px;
}
.page-price .price-fold-title {
    margin-top: 14px;
    color: var(--main-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}
.page-price .price-fold-body > .price-fold-title:first-child {
    margin-top: 0;
}
.page-price .price-list li {
    position: relative;
    padding: 4px 0 4px 1.1em;
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.9;
}
.page-price .price-list li::before {
    content: "・";
    position: absolute;
    left: -0.15em;
}
.page-price .price-list b {
    color: var(--main-text);
}
.page-price .price-fold-note {
    margin: 8px 0 0;
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.9;
}
.page-price .price-fold .plan-table-wrap {
    margin-bottom: 0;
}

/* ---- お問い合わせへの案内 ---- */
.page-price .price-contact {
    margin-top: 30px;
    padding: 26px 28px;
    border-radius: 20px;
    background: var(--primary-color);
}
.page-price .price-contact-title {
    color: var(--main-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}
.page-price .price-contact-text {
    color: var(--sub-text);
    font-size: 14px;
    line-height: 1.9;
    padding-top: 8px;
}
.page-price .price-contact .plan-cta-row {
    margin-top: 18px;
}

/* ---- 画面幅ごとの調整 ---- */
/* 本文幅は1400px未満でぐっと狭くなる（実測：BOX内側800px→665px）。
   3列のままだと中央の金額欄が200px以下になり窮屈なので、
   その手前でBOX内部を1列に切り替える。 */
@media (max-width: 1399px) {
    .page-price .plan-row {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px;
    }
    /* 縦積みでは、プラン名と画像を横に並べて高さを抑える */
    .page-price .plan-row-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 168px;
        gap: 16px;
        align-items: center;
        text-align: left;
    }
    .page-price .plan-badge {
        grid-column: 1 / -1;
    }
    /* 帯が横いっぱいに伸びると間延びするので、文字幅に合わせる */
    .page-price .plan-card-name {
        width: fit-content;
        min-width: 180px;
    }
    .page-price .plan-row-visual {
        margin-top: 0;
    }
    .page-price .plan-row-detail {
        padding-left: 0;
        padding-top: 16px;
        border-left: none;
        border-top: 1px solid #E3E8F0;
    }
    .page-price .price-area {
        font-size: 22px;
        margin-top: 38px;
    }
    .page-price .price-area-icon {
        width: 34px;
        height: 34px;
    }
}
@media (max-width: 767px) {
    /* スマホは おすすめ → プラン名 → 画像 → 説明・金額 → 詳細 の縦一列 */
    .page-price .plan-row-head {
        grid-template-columns: 1fr;
        gap: 12px;
        justify-items: stretch;
        text-align: center;
    }
    .page-price .plan-badge {
        justify-self: start;
    }
    .page-price .plan-card-name {
        width: fit-content;
        min-width: 200px;
        margin: 0 auto;
    }
    /* 画像が主役になりすぎないよう小さく抑える */
    .page-price .plan-row-visual img {
        max-width: 140px;
    }
    .page-price .plan-row-icon {
        padding: 16px;
    }
    .page-price .plan-card-price {
        font-size: 26px;
    }
    .page-price .price-nav {
        margin-bottom: 26px;
    }
    .page-price .price-nav a {
        padding: 6px 13px;
        font-size: 13px;
    }
    .page-price .plan-title {
        font-size: 18px;
    }
    .page-price .plan-row {
        padding: 18px 16px;
    }
    .page-price .price-contact {
        padding: 22px 18px;
    }
    .page-price .price-fold-body {
        padding: 4px 14px 16px;
    }
    .page-price .price-fold > summary {
        padding: 13px 40px 13px 14px;
    }
}
/* 料金ページには登場アニメーションを付けていないが、
   万一クラスが残っても内容が隠れないようにしておく（保険）。 */
.page-price .fade_up,
.page-price .fade_down,
.page-price .zoom_in,
.page-price .zoom_out,
.page-price .fade_right,
.page-price .fade_left {
    opacity: 1;
    transform: none;
    transition: none;
}
/* 「視差効果を減らす」設定では、このページの動きを止める */
@media (prefers-reduced-motion: reduce) {
    .page-price *,
    .page-price *::before,
    .page-price *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ご依頼の流れ。番号の四角を縦線でつないだ形。
   箱で囲っていたが、6ステップ並ぶと枠だらけになって読みにくかった。 */
.flow-list {
    margin-top: 8px;
}
.flow-step {
    position: relative;
    display: flex;
    gap: 20px;
    padding-bottom: 34px;
}
.flow-step:last-child {
    padding-bottom: 0;
}
/* 番号どうしをつなぐ縦線。最後のステップには引かない */
.flow-step:not(:last-child)::before {
    content: "";
    position: absolute;
    /* 番号の四角（42px）の中心 */
    left: 21px;
    top: 46px;
    bottom: 4px;
    width: 1px;
    background: #D5DCE8;
}
.flow-num {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--accent);
    /* 濃い青の上なので白（5.43:1） */
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flow-body {
    min-width: 0;
    padding-top: 2px;
}
.flow-name {
    color: var(--main-text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
}
.flow-desc {
    color: var(--sub-text);
    font-size: 15px;
    line-height: 1.9;
    padding-top: 6px;
}
@media (max-width: 767px) {
    .flow-step {
        gap: 14px;
        padding-bottom: 26px;
    }
    .flow-step:not(:last-child)::before {
        left: 17px;
        top: 38px;
    }
    .flow-num {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    .flow-name {
        font-size: 17px;
    }
    .flow-desc {
        font-size: 14px;
    }
}

/* サービス名から料金ページへ飛ぶリンク */
.price-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
    transition: opacity 0.3s ease-in-out;
}
.price-link:hover {
    opacity: 0.6;
}
@media (max-width: 767px) {
    .price-row {
        flex-direction: column;
        gap: 6px;
    }
    .price-value {
        align-self: flex-start;
    }
}

/*-----------------------[ 28.SNSアイコン・サイドバーの情報行 ]------------------------*/
/* SNSアイコンは素材ごとに元サイズが違う（20px と 36px が混在）ため、表示サイズを揃える */
.media-icons img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
/* アイコン6個（36px）＋余白では内側221pxに収まらず2行に折り返していたため、
   32pxにして1行に収める。余白は space-between で自動配分する */
.media-icons {
    width: 32px;
    height: 32px;
}
.media-main {
    gap: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
}
/* メール / 所在地 / 生年月日 のラベル文字をアイコンに置き換えたための指定 */
.side-fact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}
/* 以前はこの下に問い合わせボタンがあったが、削除したので
   SNSアイコンとの間隔だけを残す */
.side-fact:last-of-type {
    margin-bottom: 20px;
}
.side-fact-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 4px;
    /* 青いカードの上に載るので、カード上の文字色（#333333）に合わせる */
    filter: brightness(0) saturate(100%) invert(18.4257%) sepia(0%) saturate(0%) hue-rotate(1.99deg) brightness(11.6294%) contrast(62.6865%);
}
.side-fact .phone-num {
    margin-bottom: 0;
    /* メールアドレスは24文字あり、15pxだとサイドバーが狭い幅のとき
       （1200px前後で内側193px）に収まらず「m」だけ次行へこぼれていた。
       13pxなら約184pxで収まる。折り返さないよう nowrap も付ける。 */
    font-size: 13px;
    line-height: 1.7;
    white-space: nowrap;
}

/*-----------------------[ 29.FV ]------------------------*/
/* FVの本文は4文。<br> で強制改行すると折り返しと重なって不自然な行末になるため、
   文ごとの段落にして間隔で区切る */
.fv-lead {
    margin-bottom: 14px;
    /* 行の長さをそろえる。文末だけが短い行になって
       「…実装まで一貫して／対応します。」のように不自然に折り返すのを防ぐ。
       対応していないブラウザでは、これまでどおりの折り返しになる（文章は変わらない）。 */
    text-wrap: balance;
}
.fv-lead:last-of-type {
    margin-bottom: 0;
}
/* FVの見出しは「企画から運用まで窓口ひとつで。」の15文字が1行に入る幅が必要。
   入らないと語の途中で割れて4行になってしまう。
   カラム幅はサイドバーの有無で段階的に変わるため、帯ごとに指定を分けている。 */
#home h1.creative {
    /* 上限34pxだと1650px以上で崩れる。
       この帯はサイドバーが広がってテキスト側が470pxまで縮むのに、
       文字だけ34pxで止まるため15文字が入らず「丸ごと形／に。」と割れていた。
       470 ÷ 15文字 = 31px なので、余裕をみて上限29pxにする。 */
    font-size: clamp(22px, 2.0vw, 29px);
}
@media (min-width: 992px) and (max-width: 1199px) {
    #home h1.creative {
        font-size: 30px;
    }
}
@media (max-width: 991px) {
    #home h1.creative {
        font-size: 28px;
    }
}
@media (max-width: 767px) {
    #home h1.creative {
        font-size: 22px;
    }
}
/* 画像は高精細ディスプレイでぼやけないよう表示サイズの2倍で書き出している。
   そのままだと実寸で表示されて崩れるため、表示サイズを指定する。
   height を固定すると狭い画面で楕円になるので aspect-ratio で正円を保つ。 */
.portfolio-girl-img {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}
@media (max-width: 991px) {
    .portfolio-girl-img {
        width: 260px;
    }
}

/*-----------------------[ 30.セクションタイトル（英語＋日本語） ]------------------------*/
/* 英語を主役に、日本語を添える形。日本語は span で改行して小さく置く */
/* セクションの見出し。テンプレートの .creative は48pxだが、
   サイト全体の見出しバランスに合わせて32pxにする。
   .brand は料金ページの見出し（料金プラン／ご依頼の流れ）で、
   これもセクション見出しなので同じ大きさに揃える。 */
.sec-title,
.creative.brand {
    font-size: 32px;
    line-height: 1.4;
    padding-bottom: 30px;
}
/* 過去の英語補足用クラスも同じ見た目で保持し、現在は .sec-title-ja を使用する。 */
.sec-title-ja,
.sec-title-en {
    display: block;
    /* 英語見出しとの間を詰める。日本語は字間も詰めて、ひとかたまりに見せる */
    margin-top: 2px;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--sub-text);
}
/* media_query.css が .creative を 40px / 34px に下げるが、
   そのままだと狭い画面のほうがPCより大きくなってしまうので抑える */
@media (max-width: 991px) {
    .sec-title,
    .creative.brand {
        font-size: 28px;
    }
}
@media (max-width: 767px) {
    .sec-title,
    .creative.brand {
        font-size: 24px;
    }
    .sec-title-ja,
    .sec-title-en {
        font-size: 13px;
    }
}

/*-----------------------[ 31.制作実績のサムネイル ]------------------------*/
/* 種類でしぼり込むタブ（実績一覧ページ）。
   ふだんは色を持たない淡いグレーの丸ボタンで、
   ホバーと選択中に分類（Digital / Graphic / Videos / Social Media）の色が出る。
   親の名前は文字にせず、この色で伝える（間隔はグループの内外とも10pxで統一）。
   4色はどれも白地とのコントラスト 4.9:1 以上（塗ったときの白文字も同値）。 */
.works-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 24px 0 34px;
    /* 既定の色。分類ごとの色は .works-tab-group で上書きし、継承で各ボタンへ届く。
       （.works-tab 自身に書くと、自分で宣言した値が継承より優先されて色が変わらない） */
    --tab-color: var(--sub-text);
}
.works-tab-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.works-tab-group[data-group="digital"] {
    --tab-color: #4D6A9E;
}
.works-tab-group[data-group="graphic"] {
    --tab-color: #3F7A4E;
}
.works-tab-group[data-group="video"] {
    --tab-color: #6E5D9E;
}
.works-tab-group[data-group="social"] {
    --tab-color: #B04E7A;
}
.works-tab {
    padding: 8px 16px;
    border: none;
    /* サイト内のボタン（.aryaBtn）と同じ丸み */
    border-radius: 20px;
    /* 実績サムネイルのプレースホルダーと同じ淡いグレー。文字とのコントラスト 5.03:1 */
    background: #EDF0F5;
    color: var(--main-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
/* ホバーで分類の色が出る。どれとどれが仲間かはここで分かる */
.works-tab:hover {
    background: color-mix(in srgb, var(--tab-color) 14%, #FFFFFF);
    color: var(--tab-color);
}
/* 選択中は分類の色で塗る。白文字とのコントラストは上記のとおり4.9:1以上 */
.works-tab.is-active {
    background: var(--tab-color);
    color: #FFFFFF;
}
/* 該当する実績がまだない分類を選んだとき */
.works-empty {
    color: var(--sub-text);
    font-size: 12px;
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: center;
}
@media (max-width: 767px) {
    .works-tabs {
        gap: 10px;
        margin: 20px 0 26px;
    }
    .works-tab {
        padding: 7px 13px;
        font-size: 13px;
    }
}

/* 元テンプレートは 400x280 と 350x350 を交互に並べ、3枚目を上にずらす
   「box-up-down」の見せ方だった。素材の比率が揃わず扱いにくいため、
   4枚とも正方形に統一して2列グリッドで並べる。 */
.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}
.gallery-item {
    margin-bottom: 0;
}
.gallery-item.gallery-item3 {
    margin-top: 0;
}
/* 直下の img のみ。.overlay の中のアイコンまで拾わないよう子セレクタにする */
.gallery-item-sub > img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
@media (max-width: 767px) {
    .gallery {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/*-----------------------[ 32.About / Career ]------------------------*/
.about-row {
    padding-bottom: 10px;
}
/* イラストと名前を横並びにする。
   元の左右2カラムは、右の表（5行）が左の列より短いため
   表の下に大きな空白が残っていた。 */
.about-profile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    margin-top: 30px;
}
/* 経歴年数・実案件数。名前の右の空きに置く */
.about-stats {
    display: flex;
    gap: 14px;
    margin-left: auto;
}
.about-stats li {
    min-width: 124px;
    padding: 16px 20px;
    border-radius: 16px;
    background: #F4F6FA;
}
.about-stat-num {
    color: var(--accent);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    /* 「25」と「件」が別行に折れないように */
    white-space: nowrap;
}
.about-stat-unit {
    font-size: 14px;
    font-weight: 700;
    margin-left: 4px;
}
/* カウントアップ中に桁が増えても「年目」が動かないよう、数字の幅を等幅にする */
.about-stat-value {
    font-variant-numeric: tabular-nums;
}
.about-stat-label {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.6;
    padding-top: 4px;
}
/* 幅が足りず名前の下へ回り込むときは、右端に寄せず左に揃える */
@media (max-width: 1199px) {
    .about-stats {
        margin-left: 0;
    }
}
/* 基本情報は横一杯に2列で敷き、罫線でプロフィールと区切る */
.about-deatils-head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    margin-top: 28px;
    padding-top: 26px;
    border-top: 2px solid var(--primary-color);
}
/* 340px 固定だと2列に収まらないので、列幅にまかせる */
.about-deatils-head .about-detail-info {
    width: auto;
}
.about-name-ja {
    color: var(--main-text);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
}
.about-name-en {
    color: var(--sub-text);
    font-size: 17px;
    letter-spacing: 0.08em;
    padding-top: 6px;
}
.about-name-lab {
    color: var(--accent);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-top: 10px;
}
.about-block {
    padding-top: 44px;
}
.about-h3 {
    color: var(--main-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sub-text);
    margin-bottom: 20px;
}
/* 英語を添える場合も、日本語を添える場合と見た目は同じ */
.about-h3-ja,
.about-h3-en {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--sub-text);
    margin-left: 14px;
}
.about-closing {
    padding-top: 16px;
}
/* 趣味の項目。
   枠で囲むとボタン（押せるもの）に見えてしまうので、
   枠をやめて「/」区切りの読みものとして見せる。 */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 7px;
}
.chip-list li {
    color: var(--sub-text);
    font-size: 16px;
    line-height: 2;
}
/* 区切りは項目と項目の間だけ。先頭には出さない */
.chip-list li + li::before {
    content: "/";
    color: var(--sub-text);
    opacity: 0.45;
    margin-right: 7px;
}
.tool-group {
    padding-bottom: 22px;
}
.tool-group:last-child {
    padding-bottom: 0;
}
/* スキルは2列×2段に並べる。狭い画面では1列に折り返す */
.skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
}
.skill-grid .tool-group {
    /* 段の間隔は .progress-grid の下パディング（名前のぶん）で足りている */
    padding-bottom: 0;
}
/* スキル10項目は、PC・タブレットで上段5つ／下段5つに均等配置する。 */
.skill-grid.skill-grid-five {
    grid-template-columns: 1fr;
}
/* 円の折り返しで「3段」に見えてしまうのを防ぐ。
   自動折り返し（auto-fill）だと画面幅によって4つ目が次の行に落ちるため、
   1グループ＝必ず1行（最大4列）に固定し、幅が足りないぶんは円を縮める。 */
@media (min-width: 768px) {
    .skill-grid .progress-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .skill-grid.skill-grid-five .progress-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .skill-grid .progress-item {
        width: 100%;
        max-width: 88px;
        height: auto;
        aspect-ratio: 1;
    }
    /* 内側の白丸も固定幅をやめ、外周の太さ（margin）だけ残して伸縮させる */
    .skill-grid .progress-item::after {
        width: auto;
        flex: 1 1 auto;
        margin: 7px;
        font-size: clamp(13px, 1.2vw, 17px);
    }
    /* 円が縮むと名前が列幅に収まらず「WordPres / s」のように
       単語の途中で折れてしまうため、幅に応じて字も小さくする */
    .skill-grid .skill-label {
        font-size: clamp(11px, 1.15vw, 13px);
        word-break: normal;
        overflow-wrap: normal;
    }
}
@media (max-width: 767px) {
    .skill-grid {
        grid-template-columns: 1fr;
    }
}
.tool-group-name {
    color: var(--main-text);
    font-size: 16px;
    font-weight: 700;
    padding-bottom: 10px;
}
/* 仕事で大切にしていること */
.check-list li {
    position: relative;
    padding-left: 1.6em;
    color: var(--sub-text);
    font-size: 17px;
    line-height: 2;
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
/* 私の強み */
.strength-item {
    display: flex;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px dashed var(--sub-text);
}
.strength-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.strength-no {
    color: var(--accent);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    flex-shrink: 0;
}
.strength-title {
    color: var(--main-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    padding-bottom: 6px;
}
/* 経歴：テンプレート同様の2列。左が学び、右が職歴 */
.career-col {
    padding-bottom: 10px;
}
.career-col-title {
    color: var(--main-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    padding-bottom: 18px;
}
/* 列名は日本語を主役に、英語を小さく添える（セクション見出しと同じ考え方） */
.career-col-title span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--sub-text);
}
/* 最後の項目は、下に続く縦線を消す */
.career-col .education:last-child::before {
    display: none;
}
/* 年月はタイトルの下に、細字のアクセントカラーで置く */
.career-term {
    color: var(--accent);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.04em;
    padding: 2px 0 8px;
}
@media (max-width: 767px) {
    .about-name-ja {
        font-size: 24px;
    }
    .about-h3 {
        font-size: 19px;
    }
    .about-h3-ja,
    .about-h3-en {
        display: block;
        margin-left: 0;
        margin-top: 4px;
    }
    .strength-item {
        gap: 14px;
    }
    .strength-no {
        font-size: 22px;
    }
}

/*-----------------------[ 33.Contact ]------------------------*/
/* 連絡先を3つから4つ（メール / 公式LINE / Chatwork / 所在地）に変更したため、
   3列固定だと最後の1つだけ次の行に残る。折り返す2列基調にする */
.contact-box-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    /* 上下2段とも同じ高さにして、4つの箱の中身の位置をそろえる */
    grid-auto-rows: 1fr;
    align-items: stretch;
}
/* 説明文の行数が箱によって違う（LINEは2行、他は1行）ため、
   そのままだとボタンの高さがバラバラになる。
   箱を縦のフレックスにして、ボタンだけ下端へ寄せてそろえる。 */
.contact-sec-box {
    display: flex;
    flex-direction: column;
    /* アイコン・ID・ボタンの3つを同じ間隔で並べる */
    gap: 12px;
    padding-bottom: 22px;
}
.contact-sec-box .line-add,
.contact-sec-box .contact-cta {
    margin-top: auto;
    /* 縦のフレックスでは既定で横いっぱいに伸びるので、左端で文字幅に留める */
    align-self: flex-start;
}

@media (max-width: 767px) {
    .contact-box-grid {
        grid-template-columns: 1fr;
    }
}

/*-----------------------[ 34.お知らせ ]------------------------*/
/* 日付と本文を横並びにした一覧。項目が増えても行が伸びるだけで済む形にしている */
.news-list {
    border-top: 1px solid var(--sub-text);
}
.news-item {
    display: flex;
    gap: 28px;
    padding: 20px 0;
    border-bottom: 1px solid var(--sub-text);
}
.news-date {
    flex: 0 0 auto;
    width: 120px;
    color: var(--accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.9;
    letter-spacing: 0.04em;
}
.news-text {
    color: var(--sub-text);
    font-size: 16px;
    line-height: 1.9;
}
/* 狭い画面では日付を上に置いて2段にする */
@media (max-width: 767px) {
    .news-item {
        flex-direction: column;
        gap: 2px;
    }
    .news-date {
        width: auto;
    }
    .news-text {
        font-size: 16px;
    }
}

/*-----------------------[ 35.お客様の声（流れる帯） ]------------------------*/
/* 見出し「お客様の声」。
   テンプレートは 2px の枠＋角丸22px のピル型で、サイト内のボタンと同じ形のため
   押せるものに見えていた。枠をやめ、細い罫線に挟まれたラベルとして見せる。
   他のセクションと同じく、日本語のうしろに小さく英語を添える。 */
.title-box {
    padding: 0 22px;
    border: none;
    border-radius: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.6;
}
.title-box-en {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--sub-text);
    margin-left: 12px;
}
/* 罫線は見出しの下地なので、2px の実線から細く淡いものへ */
.section-title .line {
    height: 1px;
    background-color: #DDE3EC;
}
.section-title {
    margin: 48px 0 26px;
}
@media (max-width: 767px) {
    .title-box {
        padding: 0 14px;
        font-size: 16px;
    }
    .title-box-en {
        margin-left: 8px;
    }
}
/* 帯の仕組み（.logos / .logos-slide）と向き（右→左）はテンプレートのまま。
   script.js が .logos の中身を複製して繋げるので、途切れずに流れる。
   ただし秒数は「帯1本を何秒で流し切るか」の指定なので、
   ロゴ4枚のテンプレート既定(30s)のままだと、幅の広いカード6枚では速すぎる。
   読める速さ（毎秒65px前後）になるよう、この帯だけ秒数を指定している。
   カードを増減したら、ここも合わせて直す必要がある。
   目安の秒数 = カード枚数 × 440px ÷ 65
   （現在：5枚 → 2200px ÷ 65 ≒ 34s） */
.voice-marquee .logos-slide {
    animation-duration: 34s;
}
/* 読んでいる途中で流れていくと困るので、カーソルを乗せている間は止める */
.voice-marquee:hover .logos-slide {
    animation-play-state: paused;
}
/* 帯の左右の端でカードが真横に切れると、そのカードだけ幅が違って見える。
   端を少しずつ薄くして、切れ目を目立たせない（カードの幅はすべて同じ420px） */
.voice-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
@media (max-width: 767px) {
    .voice-marquee {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }
}
/* 「視差効果を減らす」を有効にしている人には動かさず、折り返して並べる */
@media (prefers-reduced-motion: reduce) {
    .voice-marquee .logos-slide {
        animation: none;
    }
    .voice-marquee {
        overflow: visible;
        white-space: normal;
    }
    .voice-marquee .marquee__content {
        flex-wrap: wrap;
    }
}
/* コメントの長さでカードの高さが変わると帯がガタつくので、
   一番高いカードに合わせて揃える（align-items の既定は center なので上書きする） */
.voice-marquee .marquee__content {
    align-items: stretch;
}
.marquee-voice-main {
    padding: 0 10px;
    display: flex;
}
.voice-item {
    position: relative;
    /* 幅を広げると長いコメントの折り返しが減り、その分だけ背が低くなる */
    width: 420px;
    padding: 13px 22px;
    border-radius: 20px;
    /* 実績サムネイルのプレースホルダーと同じ色。文字 #666666 とのコントラストは 5.03:1 */
    background: #EDF0F5;
    /* 親の .logos が white-space: nowrap なので、カードの中だけ折り返しを戻す */
    white-space: normal;
    /* 出典はカードの下端に揃える。上のコメントの行数が違っても位置が揃う */
    display: flex;
    flex-direction: column;
}
.voice-item .voice-meta {
    margin-top: auto;
}
/* カード上段：左に星、右に引用符 */
.voice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
}
.voice-stars {
    color: var(--accent);
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.16em;
}
.voice-mark {
    width: 20px;
    height: auto;
    opacity: 0.35;
    filter: var(--icons-filter);
}
.voice-text {
    color: var(--main-text);
    font-size: 14px;
    line-height: 1.8;
    padding-bottom: 10px;
}
.voice-meta {
    color: var(--main-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    padding-top: 8px;
    border-top: 1px dashed var(--sub-text);
}
/* 出典（年月・サービス名・評価）は補足なので細字で改行して置く */
.voice-meta span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--sub-text);
}
.voice-note {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.9;
    padding-top: 18px;
}
@media (max-width: 767px) {
    .voice-item {
        width: 290px;
        padding: 16px 16px;
    }
    .voice-text {
        font-size: 13px;
    }
}

/*-----------------------[ 36.FVの吹き出し ]------------------------*/
/* 元は「暗い半透明＋白文字」だったが、サイドメニューのカードと色を揃える。
   背景はグレイニーグラデーション、文字はカード上と同じチャコール。
   コントラストは明るい端 8.90:1 / 濃い端 5.57:1 でAA基準を満たす。 */
.girl-name {
    /* 並びは元テンプレートを踏襲する。
       元： linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.30) 100%)
            ＝ 真上から真下へ、上が濃く下が淡い。
       この「180deg・上が濃い」という並びはそのままに、
       黒の半透明をサイドメニューと同じ水色に置き換えている。
       色域もカードと同一（濃い #89A7CC / 淡い #E2E9F2）。

       斜めではなく 180deg にしているのは元の並びに合わせるため。
       ノイズもカードと同じものを重ねて、質感を揃えている。 */
    background: var(--side-menu-noise) 0 0 / 200px 200px repeat,
        linear-gradient(180deg, #89A7CC 0%, #E2E9F2 100%) 0 0 / cover no-repeat;
    /* 不透明にしたので、後ろをぼかす意味がなくなった */
    backdrop-filter: none;
    height: auto;
    max-width: 100%;
}
.girl-name p {
    color: var(--card-text);
    /* 日本語なので大文字変換は不要（「Webクリエイター」が「WEB…」になってしまう） */
    text-transform: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .girl-name p {
        font-size: 14px;
    }
}

/*-----------------------[ 37.サービス（料金プラン形式） ]------------------------*/
/* テンプレートの料金プランを日本語のサービス紹介に転用したための調整。
   元は英語・$表記・5行の箇条書きが前提だった。 */
/* 元は英語の短いプラン名が前提で幅指定が無く、flex で縮んで
   「Webデザイン」が2行に割れていた。
   サービス名を24pxに上げたことで「グラフィック制作」に192px必要になったため、
   230px → 250px（内側208px）に広げて1行に収める */
.basic-plain-box-main {
    flex: 0 0 250px;
}
/* テンプレートの .basic-plain-box は max-width:230px。
   上で外枠を広げても、ここを直さないと中身は広がらない */
.basic-plain-box {
    max-width: 250px;
}
/* テンプレートの .basic-plain-box img { filter: var(--icons-filter) } は
   セレクタが一段強く、そのままだと brightness(0) でイラストが真っ黒になる。
   同じ強さのセレクタで打ち消す。 */
.basic-plain-box .plan-icon {
    /* 線画のSVGから、色の付いた立体イラストに差し替えた。
       元は --icons-filter で1色に染めていたが、イラストは自前の配色を
       持っているのでフィルターは掛けない。
       表示は書き出しサイズ200pxの半分。左カラム230pxに余裕を持って収まる。 */
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: none;
}
@media (max-width: 575px) {
    /* 上のセレクタを .basic-plain-box .plan-icon に強めたので、
       こちらも同じ強さにしないと効かない */
    .basic-plain-box .plan-icon {
        width: 84px;
        height: 84px;
    }
}
/* 「グラフィック制作」など7文字前後が枠内に収まるようにする */
.basic-plain-text {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    padding-top: 14px;
}
.basic-plain-text.service-name-long {
    font-size: 20px;
    white-space: nowrap;
}
/* 「20万円〜」は $25 より横に長いので、左右の余白を詰めて1行に収める */
.basic-plain-box-sub {
    padding: 30px 20px;
}
.mon {
    /* 「150,000円〜」は桁が多く、40pxだと左カラム（内側190px）に収まらない */
    font-size: 30px;
    white-space: nowrap;
}
.mon span {
    font-size: 18px;
    margin-left: 2px;
}
/* 金額が未確定のあいだは、数字と同じ大きさだと枠に収まらないため小さく置く */
.mon-tbd {
    font-size: 17px;
    font-weight: 400;
    margin-left: 0;
}
/* 対応内容は本文相当の色。元の #838485 は白背景で 3.0:1 しかなく読みにくい */
.pricing-plaines-name {
    color: var(--sub-text);
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 14px;
}
.pricing-plaines-name.mb-0 {
    margin-bottom: 0;
}
/* 右側は Figma と同じ「テキスト左・ボタン右」の横並び。
   仕切り線は入れず、1つの箱として扱う。 */
.development-box {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    /* 実績サムネイルのプレースホルダーと同じ色。お客様の声のカードとも揃う */
    background: #EDF0F5;
}
/* flex 指定が無いと中身の幅でしか広がらず、右に余白が余ったまま
   文章だけが早く折り返していた。空いている幅を使い切らせる。 */
.service-detail {
    flex: 1;
    min-width: 0;
}
/* 行末に「ます。」のような数文字だけが残るのを避ける。
   pretty は最終行だけを見るのに対し、balance は行数を決めてから
   各行の長さを均すので、日本語の長文でも収まりが良い。 */
.service-cat,
.service-desc {
    text-wrap: balance;
}
/* 「YouTubeショート」など、途中で割りたくない語に付ける */
.nowrap {
    white-space: nowrap;
}
/* 対応できる媒体を並べた行。区切りは全角の縦棒 */
.service-cat {
    color: var(--main-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
    padding-bottom: 8px;
}
.service-desc {
    color: var(--sub-text);
    font-size: 16px;
    line-height: 1.9;
}
.choose-plain-btn-main {
    flex-shrink: 0;
}
.choose-plain-btn-main {
    padding: 0;
    border-left: none;
}
/* ボタンは一旦小さめ。全セクションで統一する際にここを見直す */
.choose-plan {
    white-space: nowrap;
    font-size: 15px;
    padding: 8px 18px;
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 1px;
    border-radius: 16px;
    gap: 8px;
}
.choose-plan img {
    width: 14px;
    height: 14px;
}
/* 狭い画面では、左のサービス名も右のボタンも縦に積む */
@media (max-width: 991px) {
    .development-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .pricing-section-main {
        flex-direction: column;
    }
    .basic-plain-box-main {
        flex: 0 0 auto;
        border-right: 2px dashed var(--primary-color);
        border-bottom: none;
        display: flex;
        align-items: center;
    }
    .basic-plain-box {
        border-bottom: none;
        border-right: 2px dashed var(--primary-color);
        max-width: none;
        flex: 1;
    }
    .basic-plain-box-sub {
        max-width: none;
        flex: 1;
        text-align: center;
    }
}
@media (max-width: 575px) {
    .basic-plain-box-main {
        display: block;
    }
    .basic-plain-box {
        border-right: none;
        border-bottom: 2px dashed var(--primary-color);
    }
    .mon {
        font-size: 26px;
    }
}

/*-----------------------[ 38.使用ツール（円グラフ） ]------------------------*/
/* テンプレートのスキルチャート（.progress-item）を流用。
   Aboutの本文幅に10個のツールを上下5項目ずつ収めるため、
   円を小さくしてレスポンシブに並べている。 */
.progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    /* ツール名は絶対配置で円の外に出るため、行間と下に名前2行ぶんの余白を確保する */
    gap: 56px 10px;
    padding: 8px 0 44px;
}
.progress-item {
    width: 88px;
    height: 88px;
    /* 数値が入るまでは輪の下地だけを見せる */
    background: #EDF0F5;
    justify-self: center;
}
.progress-item::after {
    width: 74px;
    margin: 7px;
    font-size: 17px;
    line-height: 1;
}
/* 数値が未確定のものは、%ではなく【要記入】と出す */
.progress-tbd::after {
    content: "【要記入】";
    font-size: 11px;
    color: var(--sub-text);
}
.skill-label {
    /* bottom 基準だと、名前が2行になったときに上へ伸びて円に重なってしまう。
       top:100% にすれば、行数にかかわらず必ず円の下から始まる。 */
    bottom: auto;
    top: 100%;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
@media (max-width: 575px) {
    .progress-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 30px 8px;
    }
    .progress-item {
        width: 76px;
        height: 76px;
    }
    .progress-item::after {
        width: 64px;
        margin: 6px;
        font-size: 15px;
    }
    .skill-label {
        font-size: 12px;
    }
}

/*-----------------------[ 39.下層ページの「戻る」 ]------------------------*/
/* About・Works・料金詳細の白いコンテンツBOX内、左下に置く。 */
.subpage-back-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--main-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    margin-top: 40px;
    transition: opacity 0.3s ease-in-out;
}
.subpage-back-button:hover {
    color: var(--main-text);
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* パンくず。下層ページの見出しの上に置き、今どこにいるかを示す。
   Bootstrap にも .breadcrumb があるので、名前をぶつけないよう -nav を付けている。 */
.breadcrumb-nav {
    /* セクションの上下 padding は 60px。
       負のマージンでカードの上端寄りに引き上げ、
       見出しとのあいだは広めに空けて役割を分ける。 */
    margin-top: -26px;
    margin-bottom: 40px;
}
.breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    /* テンプレートは ol の数字を消していないので、ここで消す */
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    color: var(--sub-text);
    font-size: 14px;
    line-height: 1.8;
}
.breadcrumb-nav a {
    color: var(--sub-text);
    transition: opacity 0.3s ease-in-out;
}
.breadcrumb-nav a:hover {
    opacity: 0.6;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* 区切りは項目と項目の間だけ。先頭には出さない */
.breadcrumb-nav li + li::before {
    content: "›";
    margin-right: 8px;
    opacity: 0.6;
}
/* 今いるページはリンクにせず、少し濃くして現在地だと分かるようにする */
.breadcrumb-nav [aria-current="page"] {
    color: var(--main-text);
    font-weight: 700;
}
@media (max-width: 767px) {
    .breadcrumb-nav {
        margin-top: -14px;
        margin-bottom: 30px;
    }
}

/*-----------------------[ 40.フッター ]------------------------*/
/* 本文より一段控えめにする。#757575 は白背景で 4.61:1 と
   AA基準（4.5:1）をぎりぎり満たす範囲で、--main-text(#666666) より薄い。
   これ以上薄くすると基準を下回る（#808080 で 3.95:1）。 */
.rights-reserved h2,
.rights-reserved a {
    color: #757575;
    font-size: 14px;
    line-height: 1.7;
}

/*-----------------------[ 41.ボタン（左から色が入る） ]------------------------*/
/* 枠線を細く。テンプレートは 2/4/4/2 の非対称で右下が太い作りだったので、
   その印象は残したまま太さだけ半分にしている。 */
.aryaBtn {
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 1px;
}
/* 元は hover で背景色を一気に差し替えていた。
   参考サイトと同じく、左から色が滑り込む形にする。
   ::before を左外へ逃がしておき、hover で 0 に戻す。 */
.aryaBtn {
    position: relative;
    overflow: hidden;
    /* 疑似要素を文字より後ろに置くための土台 */
    isolation: isolate;
}
.aryaBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 参考サイトと同じく、うっすら色が乗る程度にする。
       左から滑り込むので、グラデーションも左→右（90deg）。
       左が濃く、右へ抜けていく。色はサイドメニューの水色の淡い側を使う。 */
    /* ここではノイズを重ねない。ボタンは小さく、砂目が乗ると
       色がくすんで灰色寄りに見えてしまうため。 */
    background: linear-gradient(90deg, #B6C8DF 0%, #FFFFFF 78%);
    /* 78% で白に到達させ、右端まで白を残す。
       100% までかけると右まで色が残り、参考サイトより濃く見える。 */
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.aryaBtn:hover::before {
    transform: translateX(0);
}
/* 水色の上でも読めるよう、文字とアイコンは濃いままにする。
   #333333 は水色の上で 5.09:1〜7.41:1 でAA基準を満たす。
   （元は白文字に反転していたが、明るい背景では読めない） */
.aryaBtn:hover {
    background: transparent;
    color: var(--card-text);
    border-color: var(--card-text);
    border-radius: 20px;
}
.aryaBtn:hover img,
.submit-btn-main .aryaBtn:hover img {
    filter: brightness(0) saturate(100%) invert(18.4257%) sepia(0%) saturate(0%) hue-rotate(1.99deg) brightness(11.6294%) contrast(62.6865%) !important;
}
/* .aryaBtn:hover は角丸を20pxにするが、.choose-plan は平常時16px。
   そのままだとサービスの「料金詳細」だけ、ホバーで形が変わって見える。
   他のボタンは形が変わらないので、角丸を保ってそろえる。 */
.choose-plan:hover {
    border-radius: 16px;
}
/* サービスの箱は、テンプレートだとホバーで破線が濃くなり流れ出す
   （linearGradientMove）。サイト内で唯一の派手な動きで浮くうえ、
   箱自体は押せないので、平常時と同じ見た目のまま止める。 */
.services-box:hover {
    animation: none;
    background: linear-gradient(90deg, var(--section-background) 50%, var(--primary-color) 0) repeat-x,
        linear-gradient(90deg, var(--section-background) 50%, var(--primary-color) 0) repeat-x,
        linear-gradient(0deg, var(--section-background) 50%, var(--primary-color) 0) repeat-y,
        linear-gradient(0deg, var(--section-background) 50%, var(--primary-color) 0) repeat-y;
    background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}
/* 「詳しく見る」の矢印だけ小さく */
.btn-icon-sm {
    width: 14px;
    height: 14px;
}
/* メール・斜め矢印はSVGの元サイズがまちまちなので、表示サイズを揃える。
   アイコンは箱いっぱいには描かれておらず、図柄は箱の75%ほど。
   文字（18px）と同じ大きさに見せるには 18 ÷ 0.75 ＝ 24px の箱が要る。 */
.aryaBtn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.choose-plan img {
    width: 14px;
    height: 14px;
}

/*-----------------------[ 42.アイコンの大きさを揃える ]------------------------*/
/* SVGごとに元サイズがまちまち（24 / 36 / 20px）で、指定が無いと
   そのまま出てしまい大きさが揃わない。表示サイズを明示する。 */
/* サイドメニューのナビ：他が24pxなのでメール（元36px）も合わせる */
.side-menu-ul li a img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}
/* お問い合わせセクション：4つとも Chatwork と同じ20pxに揃える
   （元は メール36 / LINE20 / Chatwork20 / 所在地36 とばらばらだった） */
.call-us-contact-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/*-----------------------[ 43.実績の詳細モーダル ]------------------------*/
/* テンプレートのモーダルを流用しつつ、中身はFigmaの構成に合わせている。 */
.work-modal .modal-content {
    border-radius: 24px;
}
/* サムネイルはボタンにしたので、ブラウザ既定の枠と背景を消す */
.gallery-item-sub {
    display: block;
    width: 100%;
}
button.gallery-item-sub {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

/*-----------------------[ 54.制作実績の詳細ページ ]------------------------*/
/* 一覧からの移動を軽く感じられるよう、詳細ページではローディング幕を表示しない。 */
.page-work-detail .preloader {
    display: none;
}
.work-detail-section {
    position: relative;
}
.work-detail-heading {
    padding-bottom: 26px;
}
.work-detail-heading .creative {
    padding-bottom: 8px;
}
.work-detail-heading .sec-title-ja {
    display: block;
}
.work-detail-category {
    color: var(--sub-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.work-detail-hero {
    overflow: hidden;
    border-radius: 20px;
    background: var(--primary-color);
}
.work-detail-hero img {
    display: block;
    width: 100%;
}
.work-detail-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
    gap: 42px;
    padding: 38px 0 54px;
}
.work-detail-copy h3,
.work-detail-showcase h3 {
    color: var(--main-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    padding-bottom: 14px;
}
.work-detail-copy p {
    color: var(--sub-text);
    font-size: 15px;
    line-height: 2;
}
.work-detail-facts {
    margin: 0;
    border-top: 1px solid #E3E8F0;
}
.work-detail-fact {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #E3E8F0;
}
.work-detail-fact dt {
    color: var(--sub-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
/* 日本語の見出しは字間を詰めて、英字と同じ列幅に収める */
.work-detail-facts-wide .work-detail-fact dt {
    font-size: 13px;
    letter-spacing: 0.02em;
}
.work-detail-fact dd {
    margin: 0;
    color: var(--main-text);
    font-size: 14px;
    line-height: 1.7;
}
.work-detail-showcase {
    padding-top: 44px;
    border-top: 1px solid #E3E8F0;
}
.work-detail-showcase-lead {
    color: var(--sub-text);
    font-size: 14px;
    line-height: 1.8;
    padding-bottom: 24px;
}
.work-detail-comps {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(180px, 0.55fr);
    gap: 24px;
    align-items: start;
}
.work-detail-comp {
    margin: 0;
}
.work-detail-comp figcaption {
    color: var(--sub-text);
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
}
.work-detail-comp img {
    display: block;
    width: 100%;
    border: 1px solid #E3E8F0;
    border-radius: 12px;
    background: #FFFFFF;
}
.work-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    padding-top: 44px;
}
.work-detail-actions .work-site-link {
    margin-top: 0;
}
.work-detail-actions .subpage-back-button {
    margin-top: 0;
}
@media (max-width: 767px) {
    .work-detail-intro {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 0 42px;
    }
    .work-detail-comps {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .work-detail-comp-sp {
        max-width: 320px;
    }
    .work-detail-heading .creative {
        font-size: 34px;
    }
}
.work-movie {
    /* 比率を固定して切り抜くと、動画によっては端が欠ける。
       元の比率のまま見せ、高さだけ画面に収まるよう制限して中央に置く。
       今の動画は 1000×572（横長）。縦長のものに差し替えても崩れない。 */
    display: block;
    max-width: 100%;
    max-height: 62vh;
    width: auto;
    margin: 0 auto;
    border-radius: 20px;
    background: var(--primary-color);
}
.work-theme {
    color: var(--main-text);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    padding-top: 26px;
}
/* 左にクライアント名とタグ、右に制作期間と使用ツール */
.work-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0 6px;
}
.work-client {
    color: var(--main-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    padding-bottom: 12px;
}
.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.work-tags li {
    padding: 5px 14px;
    border: 1px solid var(--sub-text);
    border-radius: 20px;
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.6;
}
.work-meta-side {
    flex-shrink: 0;
    text-align: right;
}
.work-term {
    color: var(--sub-text);
    font-size: 14px;
    line-height: 1.6;
    padding-bottom: 10px;
}
.work-term span {
    color: var(--accent);
    font-size: 12px;
}
.work-tools {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
/* Figmaの四角シェイプ＝使用ツールのアイコン */
.work-tool {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #EDF0F5;
}
.work-tool img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.work-modal .ipsum {
    padding-top: 18px;
}
/* デザインカンプ（PC・SP）。縦に非常に長いため、枠の中だけをスクロールさせて
   2つを横に並べたまま見比べられるようにする */
.work-comps {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
    align-items: start;
}
.work-comp {
    margin: 0;
}
.work-comp figcaption {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.6;
    padding-bottom: 6px;
}
.work-comp-frame {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #E3E8F0;
    border-radius: 14px;
    background: #FFFFFF;
    -webkit-overflow-scrolling: touch;
}
.work-comp-frame > img {
    display: block;
    width: 100%;
}
/* .aryaBtn は既定で横いっぱいに伸びるため、文字幅に留めて左端に置く */
.work-site-link {
    display: inline-flex;
    margin-top: 20px;
}
/* 商品ページなど複数枚の成果物。左上から2列に並べる。
   高さは指定せず、作品そのものの比率のまま表示する（切り抜かない） */
.work-sheets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    justify-items: start;
}
.work-sheets > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}
/* バナーは1点ずつが小さいので、縦一列ではなく格子に並べて一覧できるようにする。
   比率が6:5と1:1で混ざるため、高さは各バナーの元比率のままにしている */
.work-banners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px 16px;
    align-items: start;
}
.work-banner {
    margin: 0;
}
/* 6:5と1:1が混ざるため、枠の比率を6:5にそろえて中に収める（切り抜かない）。
   こうすると各段のキャプションの位置がぴったり並ぶ */
.work-banner img {
    display: block;
    width: 100%;
    aspect-ratio: 6 / 5;
    object-fit: contain;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #E3E8F0;
    /* ホバーで枠の色が変わるのと合わせて、少しだけ拡大する */
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.work-banner figcaption {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.6;
    padding-top: 7px;
}
/* 動画がある場合は2列ぶんを使って大きく見せる（.work-movie の中央寄せは打ち消す） */
.work-sheets > video {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    max-width: 560px;
    max-height: none;
    margin: 0;
    border-radius: 12px;
    background: var(--primary-color);
}
@media (max-width: 575px) {
    .work-comps {
        grid-template-columns: 1fr;
    }
    .work-comp-frame {
        max-height: 320px;
    }
    .work-meta {
        flex-direction: column;
        gap: 16px;
    }
    .work-meta-side {
        text-align: left;
    }
    .work-tools {
        justify-content: flex-start;
    }
    .work-theme {
        font-size: 21px;
    }
}

/*-----------------------[ 44.サービスの余白・背景画像の受け口 ]------------------------*/
/* Figmaの見え方に寄せて、右ボックスの余白を少し詰める */
.development-box {
    padding: 26px 30px;
}
/* 右のボックスに背景画像を敷くときの受け口。
   カードに .has-bg を付け、--service-bg で画像を渡す。
     <div class="development-box has-bg"
          style="--service-bg: url('assets/images/home-images/service-web-bg.jpg')">
   写真の上でも文字が読めるよう、白い膜を1枚重ねている。
   膜の濃さ（0.82）は、写真が透けつつ本文が4.5:1を保てる値。 */
.development-box.has-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
        var(--service-bg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/*-----------------------[ 45.お知らせの追記 ]------------------------*/
/* 見出しリンク。日付の色（アクセント）と区別するため本文色で置き、
   ホバーで下線を出す */
a.news-text {
    color: var(--sub-text);
    transition: opacity 0.3s ease-in-out;
}
a.news-text:hover {
    opacity: 0.65;
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* 「もっと見る」はセクションの右下に置く */
.news-more {
    display: flex;
    justify-content: flex-end;
    padding-top: 24px;
}
/* 実績の「もっと見る」だけは左下に置く */
.works-more {
    justify-content: flex-start;
}

/*-----------------------[ 46.お知らせの詳細ページ ]------------------------*/
.article-date {
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-bottom: 6px;
}
.article-body {
    padding-top: 6px;
}
.article-body strong {
    color: var(--main-text);
    font-weight: 700;
}

/*-----------------------[ 47.お問い合わせの追記 ]------------------------*/
/* LINE ID / Chatwork ID のような、コピーして使う文字列 */
.contact-id {
    color: var(--main-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
    padding-top: 6px;
    /* 選択しやすいよう、途中で折り返さない */
    white-space: nowrap;
}
/* LINE公式の「友だち追加」ボタン */
.line-add {
    display: inline-block;
    margin-top: 12px;
    transition: opacity 0.3s ease-in-out;
}
.line-add:hover {
    opacity: 0.75;
}
.line-add img {
    display: block;
    height: 36px;
    width: auto;
}
/* フォームの見出しは、セクション見出しより一段小さく。
   上の連絡先ボックスとの間は、白い箱の上端〜「CONTACT」と同じ 60px にそろえる
   （テンプレートの .got の margin-top 60px だけを使い、上乗せの余白は付けない） */
.section-nine .got.sec-title {
    font-size: 32px;
    padding-top: 0;
}
/* 本文欄は input ではなく textarea。見た目は input に揃える。
   ラベルが枠の上辺に重なる作りなので、上の余白を多めに取らないと
   1行目のテキストがラベルと重なってしまう。 */
.input-main textarea {
    background: transparent;
    border-radius: 20px;
    border: 2px dashed var(--primary-color);
    outline: none;
    padding: 22px 20px 14px;
    color: var(--main-text);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    width: 100%;
    resize: vertical;
    font-family: inherit;
    transition: all 0.3s ease-in-out;
}
.input-main textarea:focus {
    border: 2px dashed var(--main-text);
    border-radius: 0;
}
/* 入力例（プレースホルダー）は入力欄の中身ではなく案内文なので、
   入力した文字（18px / #666666）より小さく淡くして区別できるようにする。
   各欄にはラベルが別に付いているため、ここが薄くても意味は伝わる。
   白地とのコントラストは 3.42:1。 */
.input-main input::placeholder,
.input-main textarea::placeholder {
    color: #8C8C8C;
    font-size: 16px;
    opacity: 1;
}
/* 送信ボタンを button 要素にしたので、ブラウザ既定の見た目を打ち消す */
.download-btn button.aryaBtn {
    background: none;
    cursor: pointer;
    font-family: inherit;
}
/* 個人情報の取り扱い */
.form-note {
    margin-top: 30px;
    padding: 22px 26px;
    border-radius: 20px;
    background: var(--primary-color);
}
.form-note p {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.9;
}
.form-note-title {
    font-weight: 700;
    padding-bottom: 4px;
}
.form-note a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
@media (max-width: 767px) {
    .section-nine .got.sec-title {
        font-size: 24px;
    }
    .form-note {
        padding: 18px 18px;
    }
}

/*-----------------------[ 48.連絡先の見出しをアイコンのみに ]------------------------*/
/* サービス名の文字を外してアイコンだけにしたので、
   見出しとして成り立つ大きさに上げる（本文20px → 26px）。
   サービス名は img の alt に入れてあるので、読み上げでは伝わる。 */
.contact-sec-box .call-us-contact-img {
    width: 26px;
    height: 26px;
}


/*-----------------------[ 49.連絡先のボタン ]------------------------*/
/* LINE公式の「友だち追加」ボタン（高さ36px）に揃えたボタン。
   X・Instagram・Chatwork には公式の埋め込みボタンが無い、
   もしくはスクリプトが必要なので、サイトの配色で自作している。
   LINEだけは公式ボタンのほうが認知されやすいため、そのまま使う。 */
.contact-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-top: 12px;
    padding: 0 16px;
    /* LINE公式ボタンの画像を実測したところ、角丸は2px・幅116px・高さ36px。
       同じ形に揃えるため、丸みをほぼ無くして横幅の下限も合わせる。 */
    border-radius: 2px;
    min-width: 116px;
    justify-content: center;
    background: var(--icons-background);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out;
}
.contact-cta:hover {
    opacity: 0.8;
}
.contact-cta img {
    width: 13px;
    height: 13px;
    /* 濃い青の上に置くので白へ */
    filter: brightness(0) invert(1);
}

/*-----------------------[ 50.私についてのイラスト・YouTube ]------------------------*/
/* 書き出しは420pxなので、表示160pxなら高精細ディスプレイでもぼやけない */
.about-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
/* お問い合わせから移してきたYouTubeの項目 */
.about-youtube {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sub-text);
    font-size: 15px;
    line-height: 1.7;
    padding-top: 14px;
}
.about-profile#youtube-preparing {
    /* 固定ヘッダーと読み込み時のアニメーション分を避け、準備中表示まで見える位置に止める */
    scroll-margin-top: 300px;
}
.about-youtube img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: var(--icons-filter);
}
@media (max-width: 991px) {
    .about-avatar {
        width: 130px;
        height: 130px;
    }
}
/* 狭い画面では横並びをやめて積む。基本情報も1列に */
@media (max-width: 575px) {
    .about-profile {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .about-stats {
        margin-left: 0;
        /* 縦積みのときは横幅いっぱいに使い、2つを等分する */
        width: 100%;
    }
    .about-stats li {
        min-width: 0;
        flex: 1;
    }
    .about-deatils-head {
        grid-template-columns: 1fr;
    }
}

/*-----------------------[ 51.サイドメニューのホバー・現在地 ]------------------------*/
/* テンプレートには .active（Bootstrapのスクロール連動で付く）の指定しか無く、
   ホバーの指定が無かった。そのため下層ページでは白いバーが一切出なかった。
   ホバーでも同じ見た目になるようにする。 */
.side-menu-ul li a {
    transition: background 0.25s ease-in-out, border-radius 0.25s ease-in-out;
}
.side-menu-ul li a:hover,
.side-menu-ul li a.active {
    background: #FFFFFF;
    border-radius: 10px;
    color: var(--card-text);
}
.side-menu-ul li a:hover img {
    filter: brightness(0) saturate(100%) invert(18.4257%) sepia(0%) saturate(0%) hue-rotate(1.99deg) brightness(11.6294%) contrast(62.6865%);
}

/*-----------------------[ 52.フォームへの着地位置 ]------------------------*/
/* サイドメニューのメールアドレスからフォームへ飛んだとき、
   見出しが画面の上端に貼り付かないよう少し余白を残す */
#contact-form {
    scroll-margin-top: 30px;
}

/*-----------------------[ 53.経歴・職歴をカードにする ]------------------------*/
/* 縦線と丸は今までどおり左に残し、本文だけを白いカードに載せる。
   カードの背景が縦線を隠さないよう、丸と線より内側に余白を取っている。 */
.career-col .small_yellow_border_main {
    flex: 1;
    min-width: 0;
    margin-left: 4px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--section-background);
    box-shadow: 0 2px 10px rgba(77, 106, 158, 0.08);
}
.career-col .education {
    margin-top: 16px;
    align-items: flex-start;
}
/* 縦線の始点と終点。
   テンプレートは項目の上端から下端までを線にしていたため、
     ・1つ目で丸より上へ線が突き抜ける
     ・項目のあいだ（16px）で線が途切れる
   という2つの崩れが出ていた。
   丸の中心（項目の上から32px）から始め、
   次の丸の中心まで届くよう下へ 16＋32＝48px 伸ばす。 */
.career-col .education::before {
    left: 11px;
    top: 32px;
    bottom: -48px;
}
/* 丸がカードと重ならないよう、上端を本文の高さに合わせる */
.career-col .side_circle_ring {
    padding-top: 20px;
    flex-shrink: 0;
}
.career-col .bachelor {
    padding-bottom: 6px;
}
@media (max-width: 767px) {
    .career-col .small_yellow_border_main {
        padding: 16px 16px;
    }
}

/*-----------------------[ 46.バナー詳細ページのカラー・フォント見本 ]------------------------*/
/* Figma「バナー01〜05」の下段カードに対応する。
   既存の .work-detail-* （CLOUD LINK の詳細ページ）はそのまま使い、
   ここではバナー特有の「テーマカラー」「使用したフォント」だけを足している。 */
.work-spec-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px 32px;
    padding-top: 6px;
}
.work-spec-title {
    color: var(--main-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    padding-bottom: 16px;
}
.work-swatches,
.work-fonts {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}
.work-swatch,
.work-font {
    text-align: center;
}
.work-swatch-label,
.work-font-label {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.6;
    padding-bottom: 8px;
}
.work-swatch-chip {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid #E3E8F0;
}
.work-swatch-hex {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.6;
    padding-top: 8px;
}
/* 見本は各フォントで「愛あ」「Aa」を表示する。
   Webフォントはこの2文字だけを読み込む（Google Fonts の text= 指定）ので容量はごく小さい。 */
.work-font-sample {
    color: var(--main-text);
    font-size: 40px;
    line-height: 1.25;
}
.work-font-name {
    max-width: 130px;
    color: var(--sub-text);
    font-size: 12px;
    line-height: 1.5;
    padding-top: 6px;
}
/* バナー一覧（モーダル）から詳細ページへ飛べるものはリンクにする。
   詳細ページがまだ無いものは figure のままで、見た目だけそろえる */
a.work-banner {
    text-decoration: none;
    color: inherit;
}
.work-banner figcaption,
.work-banner-caption {
    display: block;
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.6;
    padding-top: 7px;
}
.work-banner-more {
    display: block;
    color: var(--accent);
    font-size: 12px;
    line-height: 1.6;
}
a.work-banner:hover img,
a.work-banner:focus-visible img {
    border-color: var(--accent);
    transform: scale(1.03);
}
/* 動きを減らす設定の端末では拡大しない */
@media (prefers-reduced-motion: reduce) {
    .work-banner img {
        transition: none;
    }
    a.work-banner:hover img,
    a.work-banner:focus-visible img {
        transform: none;
    }
}
@media (max-width: 991px) {
    .work-spec-group {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575px) {
    .work-sheets {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* バナー詳細ページは「画像 → タイトル → 情報表 → カラー＆フォント」の順で、
   情報表は右カラムではなく横いっぱいに置く（値の折り返しを減らすため） */
.work-detail-hero + .work-detail-heading {
    padding-top: 34px;
}
.work-detail-facts-wide {
    margin: 0 0 46px;
}
.work-detail-facts-wide .work-detail-fact {
    grid-template-columns: 150px 1fr;
    padding: 14px 0;
}
/* デザインのポイントは Figma と同じく、カラー・フォントと同じカードの下に置く */
.work-detail-point {
    padding-top: 30px;
}
.work-detail-point p {
    color: var(--sub-text);
    font-size: 15px;
    line-height: 2;
}
@media (max-width: 575px) {
    .work-detail-facts-wide .work-detail-fact {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* .work-detail-heading は <header> 要素のため、テンプレートのサイトヘッダー用の
   左右余白と角丸をそのまま受けてしまい、見出しだけ内側にずれていた。打ち消しておく */
.work-detail-heading {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    background: none;
    /* 1199px 以下ではテンプレートが header に影と白い枠を付けるため、見出しが箱に見えていた */
    box-shadow: none;
    border: 0;
}
@media (max-width: 767px) {
    /* バナー詳細はタイトルが日本語で長く、34px だと3行に折り返して
       画面の約1/4を見出しだけで使ってしまう。1行に収まる大きさへ下げる。
       テンプレートの .creative は狭い画面で中央寄せになるが、
       すぐ下の情報表は左揃えなので、そろえて左に戻す */
    .page-work-summary .work-detail-heading .creative {
        font-size: clamp(20px, 6.2vw, 26px);
        line-height: 1.45;
        text-align: left;
        padding-bottom: 4px;
    }
    .page-work-summary .work-detail-heading .sec-title-ja {
        text-align: left;
        margin-top: 6px;
    }
    .page-work-summary .work-detail-hero + .work-detail-heading {
        padding-top: 22px;
        padding-bottom: 18px;
    }
}

/*-----------------------[ 47.実績詳細：箇条書きと掲載メディア ]------------------------*/
/* ターゲットや目的が複数行になる実績では、値を箇条書きで置く */
.work-detail-fact dd ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
/* 記号は「・」ではなくチェックボックス。色を変えられるようマスクで描いている */
.work-detail-fact dd ul li {
    position: relative;
    list-style: none;
    padding-left: 26px;
    padding-bottom: 6px;
}
.work-detail-fact dd ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.36em;
    width: 16px;
    height: 16px;
    background: var(--accent);
    -webkit-mask: var(--checkbox-icon) no-repeat center / contain;
    mask: var(--checkbox-icon) no-repeat center / contain;
}
.work-detail-fact dd li:last-child {
    padding-bottom: 0;
}
/* ページ全体のキャプチャは1枚なので1列にする */
.work-detail-comps.is-single {
    grid-template-columns: minmax(0, 1fr);
}
/* 詳細ページに置く画像・動画。左上から1枚ずつ縦に並べる */
.work-detail-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: 24px;
}
.work-detail-media > img,
.work-detail-media > video {
    display: block;
    width: 100%;
    max-width: 560px;
    max-height: none;
    margin: 0;
    border: 1px solid #E3E8F0;
    border-radius: 12px;
    background: #FFFFFF;
}
.work-detail-media-label {
    color: var(--sub-text);
    font-size: 13px;
    font-weight: 700;
    padding-top: 6px;
}

/*-----------------------[ 48.実績詳細のヒーロー（Figmaの重ね配置） ]------------------------*/
/* Figma「Group 140〜142」（どれも 1240×580）の配置をそのまま再現する。
   外枠 → 内側パネル(20,12,1200,556) → 画面写真を重ねる。
   1枚ずつの位置・大きさ・重なり順は、HTML側の --l / --t / --w / --h / --z で渡す。
   すべて外枠に対する％なので、幅が変わっても配置は崩れない。 */
.work-stage {
    position: relative;
    aspect-ratio: 1240 / 580;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(100deg, #D7E1EC 0%, #E6E9EE 48%, #EFE4DC 100%);
}
.work-stage-panel {
    position: absolute;
    left: 1.613%;
    top: 2.069%;
    width: 96.774%;
    height: 95.862%;
    border-radius: 14px;
    background: #BABABA;
}
.work-stage-shot {
    position: absolute;
    display: block;
    left: var(--l);
    top: var(--t);
    width: var(--w);
    height: var(--h);
    z-index: var(--z, 1);
    object-fit: cover;
    object-position: top center;
}
/* 何で作ったかが一目で分かるように、制作ツールを見出しの右端に添える。
   アイコンの上に文字ではなく、アイコン → 文字の縦並び。
   文字幅（12px の「Figma」でおよそ32px）にアイコンの幅をそろえている */
.work-detail-tools {
    display: flex;
    flex-shrink: 0;
    gap: 14px;
}
.work-detail-tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--primary-color);
    color: var(--main-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}
/* Figma・WordPress・Gemini とも、同じ32pxの枠の中に同じ比率で収める */
.work-detail-tool img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    object-position: center;
}
/* 見出しは「タイトル｜（右端）制作ツール」の1行。高さをそろえる */
.page-work-summary .work-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.page-work-summary .work-detail-heading .work-detail-tools {
    margin-top: 4px;
}
@media (max-width: 575px) {
    .work-detail-tool {
        padding: 8px 10px;
        gap: 4px;
        font-size: 11px;
    }
    .work-detail-tool img {
        width: 26px;
        height: 26px;
    }
    .work-detail-facts-wide .work-detail-fact {
        grid-template-columns: 1fr;
    }
}

/*-----------------------[ 49.矢印まわり（ボタン・戻る・詳細を見る・ページ上部へ） ]------------------------*/
/* 矢印は SVG を HTML に直接書いている。
   外部SVGファイルをCSSのマスクで読む方法だと、file:// で開いたときに
   ブラウザがブロックして何も表示されなくなるため。
   直接書けば stroke="currentColor" で文字色をそのまま拾える。 */
/* 幅は文字の大きさに比例させる（15pxの文字で約20px）。
   軸を短くした形（viewBox 30×16）に描き直してあり、矢じりの角度は以前と同じ30度 */
.arrow-long {
    display: inline-block;
    flex-shrink: 0;
    width: 1.3em;
    line-height: 0;
    /* 軸は文字の中央にあるが、矢じりが上にだけ伸びるぶん、矢印全体の中心は
       文字の中央より 0.1em ほど上に見える（15pxで約1.6px）。
       その差だけ下げて、見た目の中心を文字にそろえる。
       transform はホバーと左右反転で使っているので、位置は top でずらす */
    position: relative;
    top: 0.1em;
    transition: transform 0.25s ease;
}
.arrow-long svg {
    display: block;
    width: 100%;
    height: auto;
}
/* 線の太さはボタンの文字の太さに合わせる。
   non-scaling-stroke で縮小に引きずられない実寸の太さにし、em で文字サイズに比例させる
   （15pxの太字で約1.4px／12pxで約1.1px）。HTML側の stroke-width="1" はこちらが上書きする */
.arrow-long path,
.work-banner-more path {
    stroke-width: 0.09em;
    vector-effect: non-scaling-stroke;
}
/* 戻る側は左向き。180度回すと矢じりが下に来てしまうので、左右反転にする */
.arrow-long.is-back {
    transform: scaleX(-1);
}
.aryaBtn:hover .arrow-long {
    transform: translateX(4px);
}
/* 「戻る」は字形が「もっと見る」などより下寄り（る の下端・戻 の払い）で、
   同じ 0.1em では矢印が約1px上に見える。字形の差 0.07em ぶんだけ多めに下げる */
.subpage-back-button .arrow-long {
    top: 0.17em;
}
.subpage-back-button:hover .arrow-long.is-back {
    transform: scaleX(-1) translateX(4px);
}
/* 「詳細を見る」は丸囲みの矢印を先頭に置く */
.work-banner-more {
    /* inline-flex にすると業種名と同じ行に並んでしまうので、行を分ける flex にする */
    display: flex;
    align-items: center;
    gap: 8px;
}
.work-banner-more svg {
    display: block;
    /* ボタンの矢印と同じく文字の大きさに比例。高さは線の比率に合わせて自動 */
    width: 1.3em;
    height: auto;
    /* ボタンの矢印と同じく、矢じりのぶん下げて文字の中央にそろえる */
    position: relative;
    top: 0.1em;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
a.work-banner:hover .work-banner-more svg {
    transform: translateX(3px);
}
/* ページ上部へ戻る。丸ボタンではなく、縦の線に矢印と「Top」を添える形 */
button.bottom-top-button {
    width: auto;
    height: auto;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
button.bottom-top-button:hover {
    animation: none;
    opacity: 0.65;
}
/* 回転させず、はじめから縦向きの矢印を置く（回転だと幅の計算が崩れるため） */
.scroll-top-arrow {
    display: block;
    width: 12px;
    line-height: 0;
    color: var(--sub-text);
    transition: transform 0.25s ease;
}
.scroll-top-arrow svg {
    display: block;
    width: 100%;
    height: auto;
}
button.bottom-top-button:hover .scroll-top-arrow {
    transform: translateY(-6px);
}
/* 「Top」は画像ではなくサイトのフォントで縦書きにする */
.scroll-top-label {
    color: var(--sub-text);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1;
    writing-mode: vertical-rl;
}
@media (max-width: 767px) {
    .scroll-top-arrow {
        width: 10px;
    }
    .scroll-top-label {
        font-size: 11px;
    }
}
/* 「実際のサイトを見る」の下に「戻る」を置く */
.work-detail-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.work-detail-actions .subpage-back-button {
    margin-top: 22px;
}
/* フッターは主張させない。文字を小さめ・細めにして行間を広げる */
.rights-reserved h2,
.rights-reserved a {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 2;
}

/*-----------------------[ 50.セクション見出しの英語に細い線を添える ]------------------------*/
/* 英語の見出しの前に短い横線を置き、字間を少し広げる。
   対象は英語の見出しだけ。日本語が主役の見出し（詳細ページの h1 や .sec-title-ja）には付けない。
   線は擬似要素のインラインブロックなので、1行目の文字の前だけに入り、
   下に続く日本語の補足（.sec-title-ja は display:block）には影響しない。 */
h2.creative.sec-title,
h2.creative.brand,
h3.creative.sec-title,
.work-detail-showcase h2 {
    letter-spacing: 0.05em;
}
/* 詳細ページの見出し（COLOR & FONT など）は線を付けない */
h2.creative.sec-title::before,
h2.creative.brand::before,
h3.creative.sec-title::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 1px;
    background: var(--sub-text);
    /* 文字の中心に合わせるための微調整 */
    position: relative;
    top: -0.08em;
}
h2.creative.sec-title::before,
h2.creative.brand::before,
h3.creative.sec-title::before {
    width: 42px;
    margin-right: 18px;
}
@media (max-width: 767px) {
    h2.creative.sec-title::before,
    h2.creative.brand::before,
    h3.creative.sec-title::before {
        width: 28px;
        margin-right: 12px;
    }
}

/*-----------------------[ 51.プラン診断（料金ページ） ]------------------------*/
/* 質問に答えると、おすすめのプランが出る。1画面に1問だけ出して迷わせない。
   .page-price 配下にしか出ないので、他ページには影響しない。 */
.plan-finder {
    margin-bottom: 46px;
}
.finder-lead {
    color: var(--sub-text);
    font-size: 15px;
    line-height: 1.9;
    padding-bottom: 18px;
}
.finder-box {
    padding: 28px 30px 24px;
    border-radius: 20px;
    border: 1px solid #E3E8F0;
    background: var(--section-background);
}
.finder-progress {
    color: var(--sub-text);
    font-size: 12px;
    letter-spacing: 0.08em;
    padding-bottom: 12px;
}
.finder-q {
    color: var(--main-text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
    padding-bottom: 18px;
}
.finder-choices {
    display: grid;
    gap: 12px;
}
/* 選択肢。押せることが分かるよう、枠と余白を大きめに取る */
.finder-choice {
    display: block;
    width: 100%;
    padding: 16px 20px;
    border: 1px solid #E3E8F0;
    border-radius: 14px;
    background: var(--primary-color);
    color: var(--main-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.finder-choice span {
    display: block;
    color: var(--sub-text);
    font-size: 13px;
    font-weight: 400;
    padding-top: 4px;
}
.finder-choice:hover,
.finder-choice:focus-visible {
    border-color: var(--accent);
    transform: scale(1.01);
}
/* 結果 */
.finder-result-label {
    color: var(--sub-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.finder-result-name {
    color: var(--main-text);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    padding-top: 6px;
}
.finder-result-price {
    color: var(--accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
    padding-top: 4px;
}
.finder-result-note,
.finder-result-care {
    color: var(--sub-text);
    font-size: 15px;
    line-height: 1.9;
    padding-top: 10px;
}
.finder-result-care strong {
    color: var(--main-text);
}
.finder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 22px;
}
.finder-actions .aryaBtn {
    display: inline-flex;
}
.finder-caution {
    color: var(--sub-text);
    font-size: 12px;
    line-height: 1.8;
    padding-top: 14px;
}
/* 戻る・やり直し */
.finder-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
}
.finder-back,
.finder-reset {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.8;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out;
}
.finder-back:hover,
.finder-reset:hover {
    opacity: 0.65;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.finder-reset {
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* 選択肢は、どの質問でも縦1列にそろえる（2026-09-14 横2列をやめて統一） */
@media (max-width: 575px) {
    .finder-box {
        padding: 22px 18px 20px;
    }
    .finder-q {
        font-size: 17px;
    }
    .finder-choice {
        padding: 14px 16px;
        font-size: 15px;
    }
    .finder-result-name {
        font-size: 20px;
    }
    .finder-result-price {
        font-size: 19px;
    }
}

/* 診断の結果に添える制作期間 */
.finder-result-term {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.8;
    padding-top: 6px;
}

/* 診断の結果に添える「ご要望があれば」の案内 */
.finder-result-hint {
    color: var(--sub-text);
    font-size: 14px;
    line-height: 1.9;
    padding-top: 10px;
}

/*-----------------------[ 52.こまかい調整 ]------------------------*/
/* ツールのアイコンは、文字の長さが違っても箱の幅をそろえる */
.work-detail-tool {
    min-width: 92px;
    justify-content: center;
}
/* 見出しのすぐ下に本文が来るときの間隔。
   .sec-title は自身が下に30pxの余白を持っているので、本文側では足さない。
   本文と、その下の作品・目次とのあいだは 34px 空ける。 */
.creative + .visionary,
.sec-title + .visionary,
h2.creative.brand + .visionary {
    display: block;
    margin-top: 0;
    margin-bottom: 34px;
}
/* 見出しの下余白が無いページ（料金など）は、本文側で間を取る。
   すぐ上の h2.creative.brand の指定と重みが同じなので、
   同じ「要素名つき」の書き方にして、あとから書いたこちらを優先させる */
.page-price h2.creative.pb-0 + .visionary {
    margin-top: 26px;
}
/* 詳細ページの見出しだけ色が濃かったので、他の見出しにそろえる */
.work-detail-showcase h2,
.work-detail-copy h2 {
    color: var(--main-text);
}
/* ヒーローの写真。クリックで大きく開くので、ホバーは「押せる」と分かる程度に留める */
.work-stage-shot {
    cursor: zoom-in;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.work-stage-shot:hover,
.work-stage-shot:focus-visible {
    transform: scale(1.02);
    z-index: 9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
@media (prefers-reduced-motion: reduce) {
    .work-stage-shot {
        transition: none;
    }
    .work-stage-shot:hover {
        transform: none;
    }
}

/*-----------------------[ 53.画像を大きく開く（ライトボックス） ]------------------------*/
/* 画像をクリックすると画面いっぱいに開く。閉じるのは ×・背景クリック・Escキー。 */
.img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: rgba(30, 33, 40, 0.86);
}
.img-lightbox img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: #FFFFFF;
    cursor: default;
}
.img-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s ease;
}
.img-lightbox-close:hover,
.img-lightbox-close:focus-visible {
    background: rgba(255, 255, 255, 0.3);
}
/* 詳細ページから戻ってモーダルを開くときは、読み込み演出を出さない */
html.skip-preloader .preloader {
    display: none !important;
}
@media (max-width: 575px) {
    .img-lightbox {
        padding: 60px 12px 24px;
    }
    .img-lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }
}

/*-----------------------[ 54.お問い合わせの4つの箱を一列に ]------------------------*/
/* 2列×2段だった連絡先を、画面が広いときは4つ横一列に並べる。
   1箱あたりの幅が半分以下になるので、中身も同じ割合で小さくしている。
   ・IDは折り返しを許可する（IDそのものは keep-all で途中で切らせない）
   ・ボタンは文字と矢印を小さくして、いちばん長い「プロフィールを見る」が収まる幅にする
   ・説明文の行数が箱ごとに違うので、ID とボタンをまとめて下端にそろえる
   1200px 未満では、これまでどおり2列（767px以下は1列）に戻る。 */
@media (min-width: 1200px) {
    .contact-box-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .contact-sec-box {
        padding: 14px 10px 18px;
    }
    .contact-sec-box .call-us-contact-img {
        width: 22px;
        height: 22px;
    }
    .contact-box-grid .contact-id {
        font-size: 12px;
        line-height: 1.6;
        /* 幅が足りないので折り返す。ただし ID の文字列そのものは切らない */
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: normal;
        /* 説明文の行数が違っても、IDとボタンの位置は4つそろう */
        margin-top: auto;
        margin-bottom: 0;
    }

    .contact-sec-box .contact-cta {
        min-width: 0;
        padding: 0 8px;
        gap: 4px;
        font-size: 12px;
    }
}

/*-----------------------[ 55.実績詳細の見出し（スマホ） ]------------------------*/
/* スマホでは制作ツールの箱が幅をとり、タイトルが「CLOUD / LINK」と2行に折れていた。
   ・タイトルは1行（折り返さない）
   ・制作ツールは文字を消してアイコンだけの小さな正方形にし、タイトルと同じ行の右端へ
   ・アイコンの高さ(34px)をタイトルの行の高さ(約34px)にそろえ、上端を合わせる
   文字は font-size:0 で見えなくしているだけなので、読み上げでは「Figma」などが伝わる */
@media (max-width: 575px) {
    .page-work-summary .work-detail-heading {
        align-items: flex-start;
        gap: 12px;
    }
    .page-work-summary .work-detail-heading .creative {
        white-space: nowrap;
    }
    .page-work-summary .work-detail-heading .sec-title-ja {
        white-space: normal;
    }
    .page-work-summary .work-detail-heading .work-detail-tools {
        gap: 8px;
        margin-top: 0;
    }
    .work-detail-tool {
        justify-content: center;
        width: 34px;
        height: 34px;
        min-width: 0;
        padding: 0;
        gap: 0;
        border-radius: 10px;
        font-size: 0;
    }
    .work-detail-tool img {
        width: 22px;
        height: 22px;
    }
}

/*-----------------------[ 56.ロゴ・名刺など Figma 構成の詳細ページ ]------------------------*/
/* ヒーローの明るいパネル（.is-light）、タグ（.detail-tags）、見出し＋本文のブロック（.detail-spec-*）は
   ロゴと名刺の詳細ページで共通。白い箱にロゴを入れる .logo-stage-box だけロゴ専用。 */
/* Figma「ロゴ」(222:238) の構成。ヒーローは他の実績と同じ .work-stage の枠を使い、
   パネルだけ明るいグレーにして、白い箱を3つ置いてロゴを入れる。
   箱の位置・大きさは外枠に対する％、ロゴの余白は箱に対する％（HTML の --l〜--my）。 */
.work-stage.is-light .work-stage-panel {
    background: #F4F4F4;
}
.logo-stage-box {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--w);
    height: var(--h);
    background: #FFFFFF;
}
/* 余白の内側いっぱいにロゴを置く。縦横比は変えない（contain） */
.logo-stage-box img {
    position: absolute;
    left: var(--mx);
    top: var(--my);
    width: calc(100% - var(--mx) * 2);
    height: calc(100% - var(--my) * 2);
    object-fit: contain;
}
.detail-tags {
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}
.detail-tags li {
    min-width: 120px;
    list-style: none;
    text-align: center;
}
.detail-spec-item {
    padding-bottom: 36px;
}
.detail-spec-title {
    color: var(--main-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    padding-bottom: 10px;
}
.detail-spec-item p {
    color: var(--main-text);
    font-size: 15px;
    line-height: 1.9;
}
/* 「説明｜色見本」のような左右2列（ロゴのカラー） */
.detail-spec-split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}
.detail-spec-split .work-swatches {
    flex-shrink: 0;
}
/* アイソレーションはタイプ別の図を横に3つ並べる。図は縦横比がばらばらなので、同じ大きさの枠の中央に置く */
.logo-iso-figs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 16px;
}
.logo-iso-fig {
    margin: 0;
}
.logo-iso-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 14px;
    border-radius: 14px;
    background: #F4F4F4;
}
.logo-iso-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.logo-iso-fig figcaption {
    color: var(--main-text);
    font-size: 14px;
    line-height: 1.7;
    padding-top: 8px;
    text-align: center;
}
@media (max-width: 767px) {
    .detail-spec-split {
        flex-direction: column;
    }
    .detail-spec-title {
        font-size: 16px;
    }
    .detail-spec-item p {
        font-size: 14px;
    }
}
@media (max-width: 575px) {
    .logo-iso-figs {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* 記載事項・ご要望のような短い項目の縦並び */
.detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.detail-list li {
    color: var(--main-text);
    font-size: 15px;
    line-height: 1.9;
    list-style: none;
}
@media (max-width: 767px) {
    .detail-list li {
        font-size: 14px;
    }
}

/*-----------------------[ 57.実績一覧の説明文の折り返し ]------------------------*/
/* 「LP ／ Mobile First ／ レスポンシブ ／ 自主制作」のように項目が多いと、
   日本語の途中（「自主制／作」など）で折れてしまう。
   項目の中では折らず、「／」の前後の空白でだけ改行する。長すぎる項目だけは例外的に折る */
.gallery-info p {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/*-----------------------[ 58.フライヤーの詳細ページ ]------------------------*/
/* 縦長のフライヤーを2枚並べるため、ヒーローの枠を Figma と同じ 1240×730 にする。
   パネルの内側余白（左右20px・上下15px）も高さに合わせて％を計算し直している */
.work-stage.is-tall {
    aspect-ratio: 1240 / 730;
}
.work-stage.is-tall .work-stage-panel {
    left: 1.613%;
    top: 2.055%;
    width: 96.774%;
    height: 95.890%;
}
/* Figma の「A4 PRODUCT FEATURES」の内容（使用フォントと工夫した点）を、1枚ずつ「画像｜説明」で並べる */
.flyer-point {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.flyer-point-img {
    margin: 0;
}
.flyer-point-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.flyer-point-font {
    color: var(--sub-text);
    font-size: 13px;
    line-height: 1.7;
    padding-bottom: 10px;
}
.flyer-point-body p + p {
    padding-top: 8px;
}
@media (max-width: 575px) {
    .flyer-point {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .flyer-point-img {
        max-width: 220px;
    }
}

/*-----------------------[ 59.料金表の「参考イメージ」リンク ]------------------------*/
/* 各プランの右の列の一番下、「〜 ／ 修正〇回まで」の下に、上の文章と左端をそろえて置く小さなリンク（13px）。
   リンク先は今は準備中ページ。参考サイトが決まったら price.html の各 href を差し替える */
.page-price .plan-example {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    margin: 14px 0 0;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
.page-price .plan-example:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-price .plan-example:hover .arrow-long {
    transform: translateX(3px);
}

/* 横3列の表示（1400px以上）では、右の列が中央の列より短いとリンクが下端から浮くので、
   右の列をBOXの高さいっぱいに伸ばし、余った高さを「内容の上」と「リンクの上」で半分ずつ分ける。
   内容は今までどおり上下中央に見え、リンクだけがBOXの下端にそろう */
@media (min-width: 1400px) {
    .page-price .plan-row-detail {
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }
    .page-price .plan-row-detail > :first-child {
        margin-top: auto;
    }
    .page-price .plan-row-detail .plan-example {
        margin-top: auto;
        padding-top: 14px;
    }
}

/*-----------------------[ 60.準備中ページ ]------------------------*/
.page-preparing .preparing-text {
    color: var(--main-text);
    font-size: 15px;
    line-height: 2;
}

/*-----------------------[ 61.スマホのボタン位置 ]------------------------*/
/* スマホでは、制作実績とお知らせの「もっと見る」を、サービスの「料金詳細」と同じく中央にそろえる。
   （ファーストビューの「詳しく見る」とお問い合わせの送信ボタンは、もともと中央） */
@media (max-width: 767px) {
    .news-more,
    .news-more.works-more {
        justify-content: center;
    }
}

/*-----------------------[ 62.参考イメージのないプランの高さ調整 ]------------------------*/
/* 59番は、右の列の余った高さを「内容の上」と「参考イメージの上」で半分ずつ分けている。
   参考イメージを置かないプラン（保守・更新サポートの3つ）では分け合う相手がいないため、
   余った高さが全部「内容の上」に寄り、内容が約30px下にずれてしまう。
   参考イメージを持たないBOXは、内容のかたまりごと上下中央に置いて他のBOXと見え方をそろえる。
   ※ 対象を絞るために :has() を使っている。参考イメージの有無だけで自動的に切り替わるので、
      あとからプランを足しても指定を書き足す必要がない。 */
@media (min-width: 1400px) {
    .page-price .plan-row-detail:not(:has(.plan-example)) {
        justify-content: center;
    }
    .page-price .plan-row-detail:not(:has(.plan-example)) > :first-child {
        margin-top: 0;
    }
}

/*-----------------------[ 63.プライバシーポリシー ]------------------------*/
/* 本文は news-01 と同じ .article-body / .about-block / .about-h3 / .visionary を使い、
   このページ専用に足すのは「箇条書き」「窓口の一覧」「制定日」の3つだけにする。
   長い文章のページなので、行間を本文（1.9）より少しだけ広げて読みやすくする。 */
.page-privacy .article-body .visionary,
.page-privacy .about-block .visionary {
    line-height: 2;
}
/* 利用目的の箇条書き。中黒ではなく小さな丸を左に置き、本文の左端とそろえる */
.page-privacy .privacy-list {
    margin: 10px 0 14px;
    padding-left: 1.2em;
    list-style: none;
}
.page-privacy .privacy-list li {
    position: relative;
    margin-bottom: 6px;
    color: var(--main-text);
    font-size: 16px;
    line-height: 2;
}
.page-privacy .privacy-list li::before {
    content: "";
    position: absolute;
    /* 丸の中心を1行目の文字の中心に合わせる（行の高さ2em の半分 − 丸の半径） */
    top: 0.86em;
    left: -1.2em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
/* お問い合わせ窓口。項目名と内容を2列に並べ、狭い画面では縦に積む */
.page-privacy .privacy-contact {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 8px 16px;
    margin: 12px 0 0;
}
.page-privacy .privacy-contact dt {
    color: var(--main-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
}
.page-privacy .privacy-contact dd {
    margin: 0;
    color: var(--main-text);
    font-size: 16px;
    line-height: 1.8;
}
/* 窓口のメールアドレス。押せることが分かるようアクセント色にし、
   下線はホバー時だけ出す（本文中の他のリンクと同じ振る舞い） */
.page-privacy .privacy-contact a {
    color: var(--accent);
    font-weight: 700;
    /* 長いアドレスが狭い画面で枠からはみ出さないよう、必要なら途中で折り返す */
    word-break: break-all;
}
.page-privacy .privacy-contact a:hover,
.page-privacy .privacy-contact a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.page-privacy .privacy-date {
    margin: 28px 0 0;
    color: var(--main-text);
    font-size: 14px;
}
@media (max-width: 575px) {
    .page-privacy .privacy-contact {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .page-privacy .privacy-contact dd {
        margin-bottom: 10px;
    }
}
/* フッターの「プライバシーポリシー」は、そのページを開いているときだけ
   リンクではなく文字として出す（押しても同じページなので） */
.footer-current {
    opacity: 0.6;
}

/*-----------------------[ 64.ローディングの文字を出しきってから消す ]------------------------*/
/* これまでの動き（テンプレート既定）には2つの問題があった。
   ・11文字が出そろうのに2.5秒かかる一方、文字を消す動きが1.6秒で始まるため、
     屋号は「/y.haku」までしか読めず「 lab」が一度も表示されていなかった
   ・1文字ずつ出ては消えるを繰り返す（5秒周期の無限ループ）ため、時間がかかっていた

   そこで「速く出して、出たら消えない」動きに変える。
   ・@keyframes loading を同じ名前で上書き（後に読み込む側が勝つ）
   ・1回だけ再生し、最後の状態で止める（forwards）
   ・11文字の間隔を 0.04 秒ずつにして、0.75秒で全部出しきる
   これで「約2秒」の演出でも屋号が最後まで読めるようになる。 */
@keyframes loading {
    0% {
        transform: rotateY(-90deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0);
        opacity: 1;
    }
}
.loading span::after {
    animation: loading 0.35s ease-out forwards;
}
.loading span:nth-child(1)::after  { animation-delay: 0s; }
.loading span:nth-child(2)::after  { animation-delay: 0.04s; }
.loading span:nth-child(3)::after  { animation-delay: 0.08s; }
.loading span:nth-child(4)::after  { animation-delay: 0.12s; }
.loading span:nth-child(5)::after  { animation-delay: 0.16s; }
.loading span:nth-child(6)::after  { animation-delay: 0.20s; }
.loading span:nth-child(7)::after  { animation-delay: 0.24s; }
.loading span:nth-child(8)::after  { animation-delay: 0.28s; }
.loading span:nth-child(9)::after  { animation-delay: 0.32s; }
.loading span:nth-child(10)::after { animation-delay: 0.36s; }
.loading span:nth-child(11)::after { animation-delay: 0.40s; }
/* 動きを減らす設定の方には、点滅や回転を見せず最初から文字を出しておく */
@media (prefers-reduced-motion: reduce) {
    .loading span::after {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/*-----------------------[ 65.見出しタグの整理にともなう調整 ]------------------------*/
/* 文書の構造を正しくするため、次の2つを変えた。
     ・各ページの主見出し（ABOUT / WORKS / PRICING など）を h2 → h1 に
     ・フッターの著作権表記を h2 → p に（見出しではないため）

   既存の指定はタグ名で対象を絞っている箇所があるため、h1 にも同じだけ効かせる。
   狙いは「見た目を1pxも変えないこと」。 */

/* --- ① 英語の見出しに添える線（50番）--- */
/* 50番が h2 / h3 だけを対象にしていたのは、実績詳細ページの h1（作品名が主役）に
   線を付けないための区別だった。その区別は body のクラスで代わりに行い、
   詳細ページ以外の h1 には線を出す。
   ※ プライバシーポリシーは最初から h1 で作ったため線が無かったが、これで他とそろう。 */
body:not(.page-work-detail) h1.creative.sec-title,
body:not(.page-work-detail) h1.creative.brand {
    letter-spacing: 0.05em;
}
body:not(.page-work-detail) h1.creative.sec-title::before,
body:not(.page-work-detail) h1.creative.brand::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 1px;
    background: var(--sub-text);
    position: relative;
    top: -0.08em;
    width: 42px;
    margin-right: 18px;
}
@media (max-width: 767px) {
    body:not(.page-work-detail) h1.creative.sec-title::before,
    body:not(.page-work-detail) h1.creative.brand::before {
        width: 28px;
        margin-right: 12px;
    }
}

/* --- ② 見出しのすぐ下に来る本文の間隔（料金ページ）--- */
/* 元は「.page-price h2.creative.pb-0 + .visionary」。h1 になると効かなくなるので同じ指定を足す。
   セレクタの重みも元と同じ（クラス3つ＋要素名1つ）なので、効き方は変わらない */
.page-price h1.creative.pb-0 + .visionary {
    margin-top: 26px;
}

/* --- ③ フッターの著作権表記 --- */
/* h2 に付けていた指定（40番・実績詳細まわりの2か所で上書き）と同じ値を p にも与える */
.rights-reserved p {
    margin: 0;
    color: #757575;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 2;
}

/* --- ④ 制作実績のサムネイルの見出し --- */
/* 制作実績ページでは、主見出し（WORKS）の直下に作品が並ぶため、作品名は h2 が正しい。
   トップページでは「WORKS」の下の階層なので h3 のまま（同じ見た目にする必要がある）。
   テンプレート側は .gallery-info h3 とタグで指定しているため、h2 にも同じ値を与える。
   値は style.css(711) ＋ custom.css(354) ＋ media_query.css(383) を合わせた最終結果。 */
.gallery-info h2 {
    color: var(--main-text);
    font-size: 20px;
    /* テンプレートは500だが、見出しの階層を保つため custom.css で700に上げている */
    font-weight: 700;
    line-height: 32px;
    margin-top: 10px;
}
/* テンプレートは 767px 以下で中央揃えにしている（media_query.css:383）。同じ境目にそろえる */
@media (max-width: 767px) {
    .gallery-info h2 {
        text-align: center;
    }
}

/*-----------------------[ 66.WordPress版での画像の高さ ]------------------------*/
/* WordPress は画像に width="800" height="800" という属性を自動で付けます。
   この height の指定があると、31番の「正方形に収める」指定（aspect-ratio）が効かなくなり、
   実績のサムネイルが元の大きさ（縦800px）のまま出て、並びが大きく崩れます。
   height を auto に戻すことで、属性より指定を優先させ、正方形に収めます。
   ※ 属性自体は残します。読み込み中に文字が飛ぶのを防ぐ役割があるためです。

   静的HTMLの画像にはこの属性が無いので、こちらでは何も変わりません。
   それでも このファイルに書いておくのは、テーマ側のCSSが
   このファイルのコピーだからです。テーマ側にだけ書くと、次にコピーしたときに消えます。 */
.gallery-item-sub > img {
    height: auto;
}

/*-----------------------[ 67.文末が1〜2文字だけ次の行に落ちるのを防ぐ ]------------------------*/
/* 日本語は文字単位で折り返すため、画面幅によっては「…抑えま／す。」のように
   最後の行に1〜2文字だけ残ってしまいます（12種類の幅で発生することを実測）。
   文字サイズや字間を詰める方法も試しましたが、縮めると別の場所で端数が出るため解決しません。

   そこで、文末の12文字を「途中で折らないひとかたまり」にしています。
   こうすると、どの画面幅でも最終行が必ず12文字以上になります。
   文章そのものは1文字も変えていません。

   文字数は「言葉の切れ目で分かれるか」を実際の画面幅で見比べて決めました。
   例：12文字なら「余計なコストを抑えます。」がまとまり、10文字だと「余計／なコスト」で割れます。 */
.keep-together {
    white-space: nowrap;
}

/*-----------------------[ 68.バナー詳細の大きな画像にホバーの反応をつける ]------------------------*/
/* バナー一覧のサムネイルと同じ反応を、詳細ページの大きな画像にもつけます。
   マウスを乗せると枠がアクセント色になり、画像が少しだけ（1.03倍）大きくなります。

   枠は「透明な1px」を最初から置いておき、色だけを変えています。
   ホバーした瞬間に線が増えると、その分だけ中身が動いてガタつくためです。
   （Bootstrapが box-sizing: border-box を指定しているので、線は内側に引かれ、外の大きさは変わりません）

   拡大した画像は .work-detail-hero の overflow: hidden で切り取られるので、
   角丸の枠からはみ出さず、枠の中で寄っていくように見えます。

   .work-detail-hero を使っているのはバナー詳細5ページだけなので、
   body クラスで範囲を絞る必要はありません。 */
.work-detail-hero {
    border: 1px solid transparent;
    transition: border-color 0.25s ease;
}
.work-detail-hero img {
    transition: transform 0.25s ease;
}
.work-detail-hero:hover {
    border-color: var(--accent);
}
.work-detail-hero:hover img {
    transform: scale(1.03);
}
/* 動きを減らす設定の端末では拡大しない（枠の色は変わります） */
@media (prefers-reduced-motion: reduce) {
    .work-detail-hero,
    .work-detail-hero img {
        transition: none;
    }
    .work-detail-hero:hover img {
        transform: none;
    }
}

/*-----------------------[ 69.FVの吹き出しを最初から空にしたときの高さ ]------------------------*/
/* 吹き出しの文字は、JavaScriptが「いま入っている文字の後ろに1文字ずつ足す」作りです。
   テンプレートの仮の文章（Thank you for visiting.）が入ったままだと、
   1周目だけ英語と日本語がつながって表示され、吹き出しからはみ出していました。
   そこでHTMLの中身を空にしています。

   空のままだと文字が出るまで吹き出しの高さが0になり、
   打ち始めた瞬間に吹き出しがふくらんで見えるため、1行分の高さを先に確保します。
   （36番で行の高さを24pxにしているので、それに合わせています） */
.girl-name .ityped {
    min-height: 24px;
}