/* ==========================================================================
   Samurai Brain — responsive overrides
   Breakpoints: 1200 / 1024 / 900 / 768
   ========================================================================== */

@media (max-width: 1200px) {
  .feature-detail__inner {
    gap: 44px;
  }

  .site-nav__list {
    gap: 20px;
  }

  /* 課題カード：4列 → 2列（2段） */
  .challenge-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* グラフはラベル幅を詰めてバー描画面積を確保する。
     ※「同業他社の成功/失敗事例」「業界分析・他社事例提供」を1行で保つには、
       番号バッジ（①②③）込みで実測165px必要。以前の138pxでは3行が折り返していた。
       値は .gap-chart の --gap-label で管理する */
  .gap-chart {
    --gap-label: 184px;
  }

  .gap-bar,
  .gap-chart__axis {
    gap: 10px;
  }

  /* ギャップ早見：ラベル幅を詰める。最長ラベルは実測231pxのため、
     1行を保てる範囲で詰める */
  .gapsum {
    --gapsum-label: 250px;
  }

  .gapsum__row,
  .gapsum__axis {
    gap: 12px;
  }
}

@media (max-width: 1024px) {
  .section-title {
    font-size: 40px;
  }

  /* 「5つの理由」見出しも .section-title と同じサイズに追従させる */
  .challenges__issues-title {
    font-size: 40px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero__visual {
    min-height: 320px;
  }

  /* 6つの機能バナー：固定の2列指定は撤去しました。
     3列固定だとカード幅が足りず見出しが3行化していたため、
     style.css 側で auto-fit（minmax(380px, 1fr)）にして
     幅に応じて 3列 → 2列 → 1列 と連続的に切り替わるようにしています */

  /* 使い方の流れ：カードが細くなるため、gap と矢印を詰める */
  .howto__steps {
    gap: 42px;
  }

  .howto-step {
    min-height: 236px;
    padding: 28px 18px 30px;
  }

  .howto-step__num {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .howto-step__title {
    padding-bottom: 12px;
    font-size: 17px;
  }

  .howto-step__text {
    font-size: 13px;
  }

  .howto-step + .howto-step::before {
    left: -30px;
    width: 18px;
    height: 26px;
  }

  /* 導入で変わる6つのこと：グループ内3列を保つと1枚あたりが細くなるため、余白と見出しを詰める */
  .benefits {
    padding-block: 72px 80px;
  }

  .benefit-card {
    padding: 26px 22px 24px;
  }

  .benefit-card__title {
    font-size: 19px;
  }

  .feature-detail__inner,
  .feature-detail:nth-of-type(even) .feature-detail__inner {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 40px;
  }

  .usecase__list {
    grid-template-columns: 1fr;
  }

  .columns {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .columns__inner {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  /* 月額3プランは1024pxでも3列を保つ。
     列が細くなるぶん、余白と文字サイズを詰めて窮屈さを避ける */
  .plans__grid {
    gap: 10px;
  }

  .plan {
    padding: 24px 18px 20px;
  }

  .plan__name {
    font-size: 17px;
    letter-spacing: 0.06em;
  }

  /* 価格はDidoneの数字。列幅が狭いため、桁が折り返さない範囲まで縮める */
  .plan__price {
    font-size: 34px;
  }

  .plan__price small {
    margin-left: 5px;
    font-size: 11px;
  }

  .plan__specs {
    margin-top: 22px;
  }

  .plan__spec {
    padding: 10px 0;
  }

  .plan__spec dt {
    font-size: 11px;
  }

  .plan__spec dd {
    font-size: 13px;
  }

  .plan__desc {
    font-size: 11px;
  }

  .plan-options {
    gap: 16px;
  }

  .plan-options__title {
    font-size: 18px;
  }

  /* 開発会社からのメッセージ：本文と写真の比率を調整（左に本文・右に写真） */
  .message__grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 36px;
  }

  .message__name-main b {
    font-size: 21px;
  }

  .form-layout {
    grid-template-columns: 1fr;
  }

  /* フッターは1列になるため、メニューも右寄せをやめて左揃えにする
     （2026-10 最終：4列グリッド → ヘッダーと同じ5項目の横並びに変更したため） */
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .site-footer__nav {
    justify-content: flex-start;
  }

  .site-footer__nav ul {
    justify-content: flex-start;
    gap: 10px 24px;
  }

  .video__wrapper {
    max-width: 100%;
  }

  .news-list__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 課題カード：5列 → 2列 */
  .challenge-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 見出し統合により #gap はヘッダーを持たないため、上余白は .gap__grid 側で確保する */
  .gap__grid {
    margin-top: 36px;
  }

  /* 導入で変わる6つのこと：グループ内3列 → 2列（1グループが2+1段になる） */
  .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ギャップ早見：ラベル幅をさらに詰める。
     最長「同業他社の成功/失敗事例＋に応える『業界分析・他社事例提供』」は
     実測231pxのため、折り返さないよう236pxを確保する（以前の210pxでは折り返していた） */
  .gapsum {
    --gapsum-label: 236px;
  }

  .challenges__issues {
    margin-top: 76px;
  }

  /* データで示すファクト：円グラフ2つは2カラムを保ち、円の径を少し詰める */
  .needproof {
    margin-top: 48px;
  }

  .ringproof {
    gap: 18px;
  }

  .ringcard {
    padding: 28px 24px 26px;
  }

  .ringcard__chart {
    width: 146px;
    height: 146px;
  }

  .ringcard__value {
    font-size: 40px;
  }

  .ringcard__title {
    font-size: 15px;
  }

  .challenges__cta {
    margin-top: 68px;
    padding: 44px 28px 48px;
  }

  /* 特許出願済：証書の内側余白を詰め、3項目の左右余白を均等に縮める
     （印章を廃止したため、上余白は見出しの直上まで詰める） */
  .patent__panel {
    padding: 54px 34px 50px;
  }

  .patent__item {
    padding-inline: 22px;
  }

  .patent__item:first-child {
    padding-left: 0;
  }

  .patent__item:last-child {
    padding-right: 0;
  }

  /* 安心の訴求：4列 → 2列（2段）。
     カード幅が狭くなると説明文が細くなるため、余白と文字を詰める */
  .security__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .security-card {
    padding: 24px 22px 24px;
  }

  .security-card__num {
    right: 22px;
    top: 26px;
  }

  /* 所長の視点：左右2カラムの比率を詰め、本文の可読幅を確保する */
  .security__panel {
    gap: 34px;
    padding: 38px 34px;
  }

  /* 課題提起（要約版）：見出しを .section-title と同じサイズに追従させる */
  .issues-brief__title {
    font-size: 40px;
  }

  .issues-brief__item {
    padding: 24px 22px 22px;
  }

  .issues-brief__num strong {
    font-size: 40px;
  }

  /* FAQ 見出しも .section-title と同じサイズに追従させる */
  .faq__title {
    font-size: 40px;
  }

  .faq__list {
    padding-inline: 26px;
  }

  /* ※2026-10（最終）：フッターの「会社概要」ブロック（.site-footer__facts）を
     HTMLから削除したため、この幅での1列化の調整も撤去しました */
}

@media (max-width: 900px) {
  .pc-only {
    display: none !important;
  }

  .sp-only {
    display: block !important;
  }

  /* ※2026-10（最終）：`.sp-only { display:block !important }` が
     `.sp-header { display:flex }` を上書きしてしまい、スマホのヘッダーで
     ロゴとハンバーガーが縦積みになり、帯（60px）の外へはみ出していました。
     ヘッダーだけは flex を維持し、ロゴ左・ハンバーガー右の1行に戻します。
     （`.sp-only` は <br class="sp-only"> でも使うため、汎用側は変更しません） */
  .sp-header.sp-only {
    display: flex !important;
  }

  .mini-item a {
    grid-template-columns: 140px 1fr;
  }

  /* ヘッダーの帯廃止に伴い、押し下げ（margin-top）を廃止。
     スマホ用ヘッダー（60px）はヒーローに重なるため、そのぶんを上余白に含める
     （72 + 60 = 132px） */
  .hero {
    padding-top: 132px;
  }

  .page-hero {
    padding-top: 116px;
  }

  /* グラフは縦積み（ニーズと提供サービスの差が縦に並び、比較しやすい） */
  .gap__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --pad-pc: 20px;
  }

  body {
    font-size: 15px;
  }

  .section-title {
    font-size: 30px;
  }

  /* 「5つの理由」見出しも .section-title と同じサイズに追従させる */
  .challenges__issues-title {
    font-size: 30px;
  }

  .hero {
    padding-top: 104px;
    padding-bottom: 24px;
  }

  .hero h1 {
    font-size: clamp(26px, 8vw, 34px);
  }

  .hero__lead {
    font-size: 14px;
  }

  /* 肩書と特許表示は、狭い幅では縦積みにして1行の文字数を確保する */
  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hero__eyebrow {
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .hero__patent {
    padding: 4px 15px 5px;
  }

  .hero__patent b {
    font-size: 13.5px;
  }

  /* 導入で変わる6つのこと：1列に積む（2列並べると本文が読みにくい） */
  .benefits {
    padding-block: 56px 64px;
  }

  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* 1列時はグループ見出しを詰めて、カードの連なりとして読ませる */
  .benefits__group + .benefits__group {
    margin-top: 30px;
  }

  .benefits__group-title {
    margin-top: 32px;
    margin-bottom: 14px;
    font-size: 13px;
  }

  .benefits__title {
    font-size: 26px;
  }

  .benefit-card {
    padding: 24px 22px 22px;
  }

  /* 1列表示では他のカードと本文の頭を揃える必要がないため、
     2行分の高さ確保（style.css）を解除して余白を詰める */
  .benefit-card__title {
    min-height: 0;
  }

  /* 課題カードの通し番号は、1列表示では見出しの頭に添えるだけで十分 */
  .challenge-card {
    padding: 22px 20px 18px;
  }

  /* データで示すファクト：外側の余白を詰め、円グラフを1列に積む */
  .needproof {
    margin-top: 36px;
  }

  .ringproof {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ringcard {
    gap: 14px;
    padding: 24px 20px 22px;
  }

  .ringcard__chart {
    width: 140px;
    height: 140px;
  }

  .ringcard__value {
    font-size: 38px;
  }

  .ringcard__title {
    font-size: 15px;
  }

  .ringcard__desc {
    font-size: 12px;
  }

  /* 1列表示では右寄せだと不自然に見えるため、左寄せに戻す */
  .needproof__source {
    margin-top: 14px;
    text-align: left;
  }

  .hero__actions {
    display: grid;
    gap: 12px;
  }

  .hero__actions .btn {
    justify-content: flex-start;
  }

  .hero__visual {
    min-height: 300px;
  }

  /* スマホは縦積みで幅いっぱいに使うため、縮小はせず等倍で表示する */
  .hero-demo-scale {
    width: 100%;
    height: auto;
  }

  .hero-demo-scale > .hero-demo {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
  }

  /* スマホでは左右に並べると狭くなるため、縦積みにして
     会話枠と画面枠を被らせず分離する */
  .hero-demo {
    height: auto;
    padding: 14px;
    border-radius: 14px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .demo-screen {
    grid-column: 1;
    grid-row: 1;
    height: 300px;
  }

  .demo-screen__body {
    padding: 12px;
  }

  .demo-view {
    inset: 12px;
    gap: 10px;
  }

  .demo-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .demo-kpi {
    padding: 8px;
  }

  .demo-kpi b {
    font-size: 17px;
  }

  .demo-kpi span {
    font-size: 9px;
  }

  .demo-chart {
    height: 104px;
    padding: 8px;
  }

  .demo-chat {
    grid-column: 1;
    grid-row: 2;
    height: 336px;
    border-radius: 12px;
  }

  .demo-app__log {
    padding: 12px 10px 14px;
  }

  .demo-table th,
  .demo-table td {
    padding: 5px 5px;
    font-size: 10px;
  }

  .marquee {
    padding-block: 18px;
  }

  .marquee__item {
    font-size: 15px;
    padding-inline: 22px;
  }

  .intro {
    padding-block: 44px 36px;
  }

  .intro h2 {
    font-size: 24px;
  }

  .intro p {
    font-size: 14px;
  }

  /* 使い方の流れ：横3列は窮屈なので縦積みにし、矢印は下向きに切り替える */
  .howto {
    padding-block: 40px 48px;
  }

  .howto__title {
    font-size: 22px;
  }

  .howto__steps {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 24px;
  }

  .howto-step {
    min-height: 0;
    gap: 10px;
    padding: 24px 20px 26px;
  }

  .howto-step__num {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .howto-step__title {
    padding-bottom: 12px;
    font-size: 17px;
  }

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

  /* 縦積みでは、カードの上辺中央に下向きの矢印を置く */
  .howto-step + .howto-step::before {
    top: -25px;
    left: 50%;
    width: 26px;
    height: 18px;
    transform: translateX(-50%);
    clip-path: polygon(30% 0, 70% 0, 70% 40%, 96% 40%, 50% 100%, 4% 40%, 30% 40%);
  }

  .feature-banners {
    padding-block: 24px 48px;
  }

  .feature-banners__head h2 {
    font-size: 22px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feature-card {
    min-height: 0;
    padding: 22px 20px;
  }

  .feature-card h3 {
    font-size: 20px;
  }

  .feature-detail {
    padding-block: 48px;
  }

  .feature-detail__title {
    font-size: 26px;
  }

  .feature-detail__lead {
    font-size: 14px;
  }

  .acc-trigger span {
    font-size: 15px;
  }

  /* 課題提起（要約版）：3つの統計を縦積みにし、数値の頭を揃える */
  .issues-brief {
    padding-block: 56px 60px;
  }

  .issues-brief__title {
    font-size: 30px;
    line-height: 1.4;
  }

  .issues-brief__lead {
    margin-top: 20px;
    font-size: 13.5px;
    line-height: 1.9;
  }

  .issues-brief__stats {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 32px;
  }

  .issues-brief__item {
    padding: 22px 20px 18px;
  }

  .issues-brief__num strong {
    font-size: 36px;
  }

  .issues-brief__action {
    margin-top: 28px;
  }

  /* スマホはボタンを全幅・左揃えにして押しやすくする */
  .issues-brief__action .btn {
    width: 100%;
    justify-content: flex-start;
  }

  /* FAQ：内側の余白を詰め、質疑を読みやすく積む */
  .faq {
    padding-block: 56px 64px;
  }

  .faq__title {
    font-size: 30px;
    line-height: 1.4;
  }

  /* ※2026-10：リード文（.faq__lead）の削除に伴い、モバイル側の指定も撤去しました */

  .faq__list {
    margin-top: 30px;
    padding: 0 18px 4px;
  }

  .faq__list .acc-trigger {
    padding: 18px 0;
  }

  .faq__list .acc-panel p {
    padding-bottom: 20px;
    font-size: 13px;
    line-height: 1.85;
  }

  .faq__action {
    margin-top: 28px;
  }

  .faq__action .btn {
    width: 100%;
    justify-content: flex-start;
  }

  .visual {
    min-height: 360px;
    padding: 52px 16px 20px;
  }

  .visual__caption {
    left: 16px;
    top: 16px;
  }

  .vdnd__zone {
    padding: 13px 12px;
  }

  /* スマホはパネル幅が狭いため、ドラッグ中のゴーストを縮小して重なりを抑える */
  .vdnd__drag {
    top: -2px;
  }

  .vdnd__drag-doc {
    width: 28px;
    height: 35px;
  }

  .vdnd__drag-name {
    max-width: 150px;
    font-size: 9px;
  }

  .vdnd__file {
    transform: translateY(-44px) scale(0.97);
  }

  .vdnd__file-body b {
    font-size: 11px;
  }

  /* 紙芝居のページ送り：スマホは1ページの表示を短くし、ナビを折り返す */
  .vslides {
    --slide-step: 2.2s;
  }

  .vslides__nav {
    gap: 4px;
    padding: 7px 8px;
  }

  .vslides__step {
    padding: 3px 7px;
    font-size: 9px;
  }

  /* 経営分析：シーン切り替えを短くし、スライドは2列にする */
  .van {
    --scene-step: 3.2s;
  }

  .vanslides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .van__views,
  .van__bar,
  .van__steps {
    padding-inline: 10px;
  }

  /* テンプレート機能：一覧カードは2列に、進行表示は1ページを短くする */
  .vtpl {
    --scene-step: 3s;
  }

  .vtpl__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vtpl__views,
  .vtpl__bar {
    padding-inline: 10px;
  }

  /* クライアント管理：シーン切り替えを短くし、カードは縦1列にする */
  .vcli {
    --scene-step: 3s;
  }

  .vcli__cards {
    grid-template-columns: 1fr;
  }

  .vcli__views,
  .vcli__bar,
  .vcli__steps {
    padding-inline: 10px;
  }

  .vcli__msg {
    max-width: 92%;
  }

  .vcli__chatbar-btn {
    display: none;
  }

  /* 開発元の宣言：上下の余白を詰め、見出しは2〜3行に収める */
  .statement {
    padding-block: 56px 60px;
  }

  .statement__title {
    font-size: 20px;
    line-height: 1.5;
  }

  .statement__lead {
    margin-top: 22px;
    font-size: 13.5px;
    line-height: 1.85;
  }

  .statement__logo {
    margin-bottom: 26px;
  }

  .statement__logo img {
    width: 180px;
  }

  /* 開発会社からのメッセージ：モバイルは本文を先、写真を後に縦積みする */
  .message {
    padding-block: 56px 60px;
  }

  .message__title {
    font-size: 21px;
    line-height: 1.5;
  }

  .message__rule {
    margin-top: 20px;
  }

  .message__grid {
    margin-top: 32px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* 1カラム時は高さを伸縮させず、縦長写真＋名刺プレートの形を保つ */
  .message__photo {
    max-width: 320px;
    margin-inline: auto;
  }

  .message__photo-frame {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .message__name {
    padding: 16px 18px 18px;
  }

  .message__name-main b {
    font-size: 19px;
  }

  .message__name-cred {
    margin-top: 10px;
    padding-top: 9px;
    font-size: 10.5px;
  }

  .message__body {
    gap: 16px;
  }

  .message__body p {
    font-size: 13.5px;
    line-height: 2;
  }

  /* 特許出願済：証書の内側余白を詰め、3項目は縦積みにして
     左右の罫を上罫に切り替える（欄外の罫に見えないようにする） */
  .patent {
    padding-block: 56px;
  }

  .patent__panel {
    padding: 40px 22px 34px;
  }

  /* スマホは外枠と内側の金罫の間隔を詰める */
  .patent__panel::before {
    inset: 7px;
  }

  /* ※2026-10（最終）：アイブロー（INTELLECTUAL PROPERTY）を削除したため、
     .patent__eyebrow のモバイル指定も撤去しました */

  .patent__title {
    /* 2026-10（最終）：アイブロー削除に伴い、スマホ側のアイブロー用オフセットも撤去 */
    margin-top: 0;
    font-size: 26px;
    line-height: 1.45;
  }

  .patent__rule {
    margin-top: 22px;
  }

  .patent__lead {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.95;
  }

  .patent__grid {
    margin-top: 36px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* 縦積み時は左罫をやめ、上罫で区切る */
  .patent__item {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid rgba(201, 162, 75, 0.32);
  }

  .patent__item:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .patent__item:last-child {
    padding-bottom: 0;
  }

  .patent__item h3 {
    margin-top: 8px;
    font-size: 16px;
  }

  .patent__item p {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.9;
  }

  .patent__note {
    margin-top: 32px;
    padding-top: 16px;
    font-size: 10.5px;
  }

  /* ヒーローの特許出願済：狭い幅では罫線ボックスの余白を詰める
     （英字ラベルは 2026-10 に廃止したため、旧 .hero__patent-label の指定は削除） */
  .hero__patent {
    padding: 4px 15px 5px;
  }

  .video {
    padding-block: 44px 52px;
  }

  .video__title {
    font-size: 22px;
  }

  .usecase {
    padding-block: 48px;
  }

  .usecase__head h2 {
    font-size: 24px;
  }

  /* 見出しとボタンは縦積みにし、ボタンは全幅・左揃えにする */
  .usecase__head {
    display: grid;
    gap: 18px;
  }

  .usecase__head .btn {
    width: 100%;
    justify-content: flex-start;
  }

  .usecase__note {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 11.5px;
    line-height: 1.7;
  }

  /* 導入事例：1社のケーススタディ。
     3列（番号｜課題｜活用）をやめ、番号を左に残したまま
     「課題 → 活用 → 効果」を縦に積む（横並びでは1段が細くなりすぎる） */
  .case {
    padding: 26px 20px 24px;
  }

  .case__company {
    font-size: 19px;
  }

  .case__company-sub {
    display: block;
    margin: 4px 0 0;
    font-size: 11.5px;
  }

  .case__title {
    margin-top: 18px;
    font-size: 21px;
    line-height: 1.5;
  }

  .case__lead {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.9;
  }

  /* 本人の言葉：写真を上に置き、引用文を下に読ませる */
  .case__voice {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
    padding: 20px 18px;
  }

  /* 1カラム時は写真を大きくせず、横に広がらない幅に抑える。
     正方形に切り抜くため、顔が中央に来る位置へ寄せる */
  .case__voice-photo {
    width: 116px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: 55% 30%;
  }

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

  .case__list {
    margin-top: 28px;
  }

  .case__item {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0 12px;
    padding: 20px 0;
  }

  .case__num {
    font-size: 14px;
  }

  /* 縦積み時は左右の罫をやめ、課題と活用のあいだに上罫を引く */
  .case__col--before {
    grid-column: 2;
    padding-right: 0;
    padding-bottom: 14px;
    border-right: 0;
  }

  .case__col--after {
    grid-column: 2;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
  }

  .case__label {
    margin-bottom: 8px;
    font-size: 10px;
  }

  .case__text {
    font-size: 12.5px;
    line-height: 1.85;
  }

  .case__effect {
    margin-top: 12px;
    padding: 11px 12px;
    font-size: 12px;
    line-height: 1.8;
  }

  .case__action {
    display: grid;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
  }

  .case__action-text {
    font-size: 12px;
  }

  .case__action .btn {
    width: 100%;
    justify-content: flex-start;
  }

  .columns {
    padding-block: 48px;
    gap: 48px;
  }

  .columns__inner {
    gap: 48px;
  }

  .column-block h2 {
    font-size: 22px;
  }

  .mini-item a {
    grid-template-columns: 110px 1fr;
    gap: 14px;
  }

  .mini-item__title {
    font-size: 14px;
  }

  /* 下余白は料金プランの上余白と合わせてセクション間の空白を作る。
     当初は下 52px ＋ プラン上 48px ＝ 100px あったため、
     ユーザー指示により半分（26px ＋ 24px ＝ 50px）へ縮小した */
  .news-list {
    padding-block: 44px 26px;
  }

  .news-list h2 {
    font-size: 24px;
  }

  .news-item__row {
    gap: 14px;
  }

  .news-item__row p {
    font-size: 14px;
  }

  /* 上余白はお知らせの下余白（26px）と合わせて 50px。
     下余白はお知らせ側の余白とは無関係なため 48px のまま維持する */
  .plans {
    padding-block: 24px 48px;
  }

  .plans__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* スマホは1列。カード内の余白と文字サイズを詰め、
     価格の桁が折り返さない大きさに保つ */
  .plan {
    padding: 24px 20px 20px;
  }

  .plan__name {
    font-size: 18px;
    letter-spacing: 0.08em;
  }

  .plan__desc {
    margin-top: 10px;
    font-size: 11.5px;
  }

  .plan__price {
    margin-top: 18px;
    font-size: 38px;
  }

  .plan__specs {
    margin-top: 24px;
  }

  .plan__spec dt {
    font-size: 11.5px;
  }

  .plan__spec dd {
    font-size: 14px;
  }

  /* 注記は左右振り分けをやめ、左揃えで2行に積む */
  .plans__notes {
    display: grid;
    gap: 4px;
    margin-top: 20px;
  }

  /* オプション：見出しを上段に置き、項目をその下に縦積み */
  .plan-options {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 20px 22px;
  }

  .plan-options__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .plan-option {
    padding: 18px 20px;
  }

  /* カード内の「月間の利用目安」：項目名が長いため折り返してよい幅を与える */
  .plan__usage-label {
    margin-top: 16px;
    padding-top: 14px;
    font-size: 10.5px;
  }

  /* ※2026-10：ご指示により「月間の利用目安」セクションと「料金の考え方」を
     削除したため、.plan-usage / .cost-table / .plan-value / .value-card の
     レスポンシブ指定も併せて撤去しました。 */

  /* 安心の訴求：4項目を1列に縦積みにする。
     番号バッジはアイコンの右に置いたままだと詰まるため、右上の位置を詰める */
  .security {
    padding-block: 56px 60px;
  }

  .security__pillars {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 36px;
  }

  .security-card {
    padding: 22px 20px 22px;
  }

  .security-card__num {
    right: 20px;
    top: 24px;
  }

  .security-card__title {
    font-size: 16px;
  }

  .security-card__desc {
    font-size: 12.5px;
    line-height: 1.9;
  }

  /* 所長の視点：2カラムをやめて縦積みにし、本文 → 箇条書きの順で読ませる */
  .security__panel {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 14px;
    padding: 30px 22px 32px;
  }

  .security__panel-title {
    font-size: 21px;
  }

  .security__panel-text {
    font-size: 12.5px;
    line-height: 1.95;
  }

  .security__foot {
    gap: 18px;
    margin-top: 30px;
  }

  .security__actions {
    display: grid;
    justify-items: stretch;
    width: 100%;
    gap: 10px;
  }

  .security__actions .btn {
    justify-content: flex-start;
  }

  .cta__box {
    padding: 40px 22px;
  }

  .cta__actions {
    display: grid;
    gap: 12px;
  }

  .cta__actions .btn {
    justify-content: flex-start;
  }

  .fixed-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .fixed-banner a {
    padding: 14px 16px;
  }

  .back-to-top {
    right: 16px;
    bottom: 100px;
  }

  .video__play {
    width: 60px;
    height: 60px;
  }

  .site-footer {
    padding-block: 44px 24px;
  }

  .site-footer__nav {
    justify-content: flex-start;
  }

  .site-footer__nav ul {
    justify-content: flex-start;
    gap: 10px 20px;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* ※2026-10（最終）：フッターの「会社概要」ブロックを削除したため、
     .site-footer__company / .site-footer__facts の狭幅用調整も撤去しました */

  .page-hero {
    padding-top: 96px;
    padding-bottom: 32px;
  }

  .page-hero h1 {
    font-size: 24px;
  }

  .form-section {
    padding-block: 40px 64px;
  }

  .form-card {
    padding: 22px 18px;
  }

  .form-submit {
    width: 100%;
    padding: 15px 24px;
  }

  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner button {
    width: 100%;
  }

  /* 課題セクション：カードは1カラム、グラフは「ラベル→バー」の縦積みにする */
  .challenges {
    padding-block: 60px 64px;
  }

  .challenge-cards {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 30px;
  }

  .challenge-card {
    padding: 20px 18px 18px;
    gap: 14px;
  }

  .challenge-card__title {
    font-size: 17px;
  }

  .gap__grid {
    margin-top: 28px;
  }

  .challenges__issues {
    margin-top: 56px;
  }

  .challenges__issues-lead {
    font-size: 13.5px;
  }

  /* 原資料の一括表記：スマホは左揃えにして折返しを揃える */
  .challenges__issues-source {
    margin-top: 16px;
  }

  .gap-chart {
    padding: 20px 16px 18px;
  }

  .gap-bars {
    gap: 14px;
  }

  /* スマホではラベルをバーの上段に置き、バーを幅いっぱいに使う */
  .gap-bar {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  /* ラベルが1行（nowrap）のため、狭い画面でもはみ出さないよう折返しを許可する */
  .gap-bar__label {
    font-size: 12px;
    white-space: normal;
  }

  /* 赤枠は枠線が隣の行に触れないよう控えめにする */
  .gap-bar.is-gap {
    outline-offset: 3px;
  }

  .gap-bar.is-gap .gap-bar__label::before {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    font-size: 9px;
  }

  .gap-bar__track {
    height: 12px;
  }

  .gap-chart__axis {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 14px;
  }

  /* グラフ内の注記・読み方のコメント：スマホは文字を小さくし余白を詰める */
  .gap-chart__note {
    margin-top: 14px;
    padding-top: 12px;
    font-size: 11px;
  }

  /* ギャップ早見：スマホはラベルをバーの上段に置き、バーを幅いっぱいに使う */
  .gapsum {
    margin-top: 16px;
    padding: 20px 16px 18px;
  }

  .gapsum__head {
    font-size: 15px;
  }

  .gapsum__lead {
    font-size: 12.5px;
  }

  .gapsum__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .gapsum__axis {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ラベルがバーの上段に来るため、目盛り行の左カラム用の空セルは不要 */
  .gapsum__axis > span:first-child {
    display: none;
  }

  .gapsum__track {
    height: 18px;
  }

  .gapsum__legend {
    font-size: 11px;
  }

  .gap__callout {
    padding: 18px 18px;
    text-align: left;
    font-size: 15px;
  }

  /* 結論の帯：バッジは独立行にして本文の折返しを揃える */
  .gap__callout-tag {
    display: block;
    width: fit-content;
    margin: 0 0 10px;
  }

  .gap__source {
    text-align: left;
  }

  .challenges__cta {
    margin-top: 56px;
    padding: 36px 20px 40px;
  }

  .challenges__cta-lead {
    font-size: 13.5px;
  }

  /* CVボタンはスマホで押しやすいよう全幅・左揃えに */
  .challenges__cta-actions {
    display: grid;
    gap: 12px;
    margin-top: 26px;
  }

  .challenges__cta-actions .btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   極小幅（〜360px）
   テンプレート一覧の表紙は 16:9 固定のため、幅が狭くなると高さも比例して
   小さくなる。320px では「英字ラベル＋3行になったタイトル＋罫＋フッター」が
   表紙の内側に収まらず、文字が表紙の外へはみ出していた
   （実測：表紙 98×55px に対し内容 57px）。
   ここでは文字サイズと行間、余白を詰めて表紙内に収める。
   ※一覧の列数は 768px 以下ですでに2列のため、列数は変更しない。
   ========================================================================== */
@media (max-width: 360px) {
  /* カード間の余白を詰め、表紙の幅をわずかに稼ぐ */
  .vtpl__grid {
    gap: 7px;
  }

  .vtplcard {
    padding: 7px;
    gap: 4px;
  }

  /* ※2026-10（最終）：表紙を「左＝ペトロール面／右＝生成り面」の2分割デザインに
     刷新したため、表紙自体の padding は 0 のまま（左右の面が端まで届く）。
     旧：.vcover { padding: 6px 7px } */

  /* 英字ラベル・タイトルを縮め、3行になる長いタイトルでも収める */
  .vcover__eyebrow {
    font-size: 4.5px;
    letter-spacing: 0.08em;
    padding: 5px 4px 0 6px;
  }

  .vcover__title {
    font-size: 8px;
    line-height: 1.24;
    padding: 0 6px 0 7px;
  }

  .vcover__bar {
    width: 14px;
    margin: 0 0 6px 7px;
  }

  /* フッターの英字は装飾のみで情報量が少ないため、極小幅では落とす */
  .vcover__foot {
    display: none;
  }

  /* カード下のタイトル・タグも一段小さくして折返しを抑える */
  .vtplcard__title {
    font-size: 9px;
    line-height: 1.35;
  }

  .vtpl__chips {
    gap: 5px;
  }

  .vtpl__chip {
    padding: 2px 8px;
    font-size: 9px;
  }
}