/*
  サービスページ共通CSS（/aio/ /seo/ /meo/ /reputation/ /recruiting/ /owned-media/）
  6ページで共有するマスタースタイル。ページ固有のコンテンツ（本文・画像パス・件数など）は
  各HTMLファイル側に残し、構造・見た目に関わるルールはすべてここに集約する。
  重複記述を避けるため、新しいセクションを追加する場合もまずここに追記すること。
*/
:root {
  --navy: #14224f;
  --navy-d: #0d1736;
  --gold: #c2a063;
  --gold-d: #a8854a;
  --bordeaux: #6e1b2c;
  --ink: #1c2230;
  --gray: #5c6470;
  --line: #e7e9ee;
  --tint: #f7f8fa;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 日本語は keep-all にしない（句読点以外で改行できず、はみ出し時に任意位置で切れて句点が行頭に来るため）。
     対応ブラウザは文節単位（auto-phrase）、それ以外は通常の禁則処理（line-break: strict）で折り返す */
  word-break: normal;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  /* 行頭に句読点・閉じ括弧が来ないよう禁則処理を明示（フラグメント単体表示でlang属性が
     無い環境でも確実に効かせるため、UAのlang依存に任せず明示指定する） */
  line-break: strict;
}
a { text-decoration: none; color: inherit; }
/* HERO（HARD LOCK）は従来どおりの折り返し設定を維持する */
.aio-hero { word-break: keep-all; overflow-wrap: break-word; }
/* HEROの説明文は句点が行頭に来ないよう文節単位で折り返す（H1は従来どおり） */
.aio-hero-copy p { word-break: normal; word-break: auto-phrase; line-break: strict; }
@media (max-width: 400px) { .aio-hero h1.rb-h1-long { font-size: 23px; } }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
h1 { font-family: "Shippori Mincho", serif; color: var(--navy); text-wrap: pretty; }
/* 統一（2026-09）: H2〜H4は日本語Sans 1family。H1（HERO）とHERO統計数字のみ Shippori Mincho を維持 */
h2, h3, h4 { font-family: var(--rb-font-jp, "Noto Sans JP", sans-serif); color: var(--navy); text-wrap: balance; }

/* ===== Header（サブページ標準ヘッダー：page-soudan.php等と同一パターン） ===== */
.head { border-bottom: 1px solid var(--line); height: 78px; }
.head .in { max-width: 1080px; margin: 0 auto; padding: 0 28px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { position: relative; }
.head-cta { display: flex; align-items: center; gap: 14px; }
.head .tel { font-family:var(--phone-font-family,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif); font-size: 18px; color: var(--navy); font-weight: 700; }
.head .tel small { display: block; font-family: "Noto Sans JP"; font-size: 10.5px; color: var(--gray); font-weight: 400; text-align: right; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--navy); color: #fff; font-weight: 500; font-size: 14px; padding:var(--cta-padding-y,11px) var(--cta-padding-x,18px); transition: .25s; letter-spacing: .04em; border-radius:var(--cta-radius,6px); }
.btn:hover { background: var(--navy-d); }
.btn-line { background: transparent; color: var(--navy); border: 1px solid var(--navy); border-radius:var(--cta-radius,6px); }
.btn-line:hover { background: var(--navy); color: #fff; }
/* head-cta配下のリンクは、既存クラスの組み合わせに関わらず箱の形を統一する
   （直下の<a>を対象にすることで、電話番号リンク（.tel内、孫要素）には影響しない） */
.head-cta > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  border-radius: 7px;
  border: 1px solid var(--navy);
  color: var(--navy);
  background: transparent;
  transition: border-color .25s, color .25s, background .25s;
}
.head-cta > a:hover { background: var(--navy); color: #fff; }
/* お問い合わせ：資料請求よりさらに軽いoutlineに（CTA優先順位：無料相談＞資料請求＞お問い合わせ） */
.head-cta > a:last-child {
  border-color: var(--line);
  color: var(--gray);
}
.head-cta > a:last-child:hover { border-color: var(--navy); background: transparent; color: var(--navy); }

/* ===== Hero（左：コピー／右：シグナル図解の非対称2カラム） ===== */
.aio-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(194,160,99,.14), transparent 50%),
    linear-gradient(155deg, rgba(20,34,79,.98), rgba(13,23,54,.98));
}
.aio-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 38%);
  pointer-events: none;
}
.aio-hero .wrap { position: relative; }
.aio-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.aio-hero .eyebrow { color: var(--gold); display: block; margin-bottom: 20px; font-family: "Cormorant Garamond", serif; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; }
.aio-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.55; }
.aio-hero-copy p { color: #b9c0d2; margin: 22px 0 0; font-size: 15.5px; max-width: 480px; }
.aio-hero .actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.aio-hero .btn:not(.btn-line) { background: var(--bordeaux); }
.aio-hero .btn:not(.btn-line):hover { filter: brightness(0.88); }
.aio-hero .btn-line { color: #fff; border-color: rgba(255,255,255,.6); }
.aio-hero .btn-line:hover { background: #fff; color: var(--navy); }
.aio-hero-stats { display: flex; gap: 28px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); }
.aio-hero-stats div { display: flex; flex-direction: column; }
.aio-hero-stats b { font-family: "Shippori Mincho", serif; font-size: 28px; color: #fff; line-height: 1; }
.aio-hero-stats span { margin-top: 6px; font-size: 12px; color: #8f98b3; letter-spacing: .02em; }
/* PCモックアップ：背景透過画像がHero上に自然に浮かぶよう、枠・切り抜き・影のカード処理をやめる */
.aio-hero-visual { display: flex; align-items: center; justify-content: center; }
.aio-hero-copy, .aio-hero-visual { min-width: 0; }
.aio-hero-visual img { width: 100%; height: auto; object-fit: contain; display: block; }
/* Desktopのみ、PC画像を約1.3倍表示。左端をテキスト側の余白（gap）に固定したまま
   右側（Hero自体の左右余白側、テキストと重ならない領域）へのみ拡張することで、
   本文への被り・横スクロールを避ける。Tablet/Mobileには影響しない。 */
@media (min-width: 1320px) {
  .aio-hero-visual { overflow: visible; justify-content: flex-start; }
  .aio-hero-visual img { width: 130%; max-width: 130%; }
}

/* ===== Intro（AIOとは：最小限） ===== */
.aio-intro { padding: 56px 0; border-bottom: 1px solid var(--line); }
.aio-intro .wrap { max-width: 820px; text-align: center; }
.aio-intro p { color: var(--gray); font-size: 15.5px; margin-bottom: 14px; }
.aio-intro .media-link { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom: 2px; }
.aio-intro .media-link:hover { color: var(--bordeaux); border-color: var(--bordeaux); }

/* ===== Section common ===== */
.aio-section { padding: var(--rb-space-md, 76px) 0; }
.aio-section.tint { background: var(--tint); }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sec-head .eyebrow { display: block; margin-bottom: 12px; color: var(--gold-d); font-family: "Cormorant Garamond", serif; font-size: 15px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.sec-head h2 { font-size: var(--rb-h2, clamp(23px, 3.2vw, 32px)); font-weight: 700; line-height: var(--rb-lh-h2, 1.5); text-wrap: pretty; }
.sec-head p { color: var(--gray); margin-top: 20px; font-size: var(--rb-lead, 15px); line-height: 1.85; }

/* ===== VALUE：フロー図解（line + step + number） ===== */
.aio-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 0; margin-top: 8px; }
.aio-flow-step { flex: 1; text-align: center; position: relative; padding: 0 6px; }
.aio-flow-step .n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--navy); border-radius: 50%; font-family: "Cormorant Garamond", serif; font-size: 17px; font-weight: 600; color: var(--navy); background: #fff; position: relative; z-index: 1; }
.aio-flow-step p { margin-top: 14px; font-size: 13.5px; color: var(--ink); line-height: 1.6; }
.aio-flow-step:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 20px); width: calc(100% - 40px); height: 1px; background: linear-gradient(to right, var(--line), var(--line)); border-top: 1px dashed var(--gold-d); }
.aio-value-lead { text-align: center; max-width: 620px; margin: 0 auto 52px; }
.aio-value-lead .eyebrow { display: block; margin-bottom: 14px; color: var(--gold-d); font-family: "Cormorant Garamond", serif; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; }
.aio-value-lead p.big { font-family: var(--rb-font-jp, "Noto Sans JP", sans-serif); color: var(--navy); font-weight: 700; font-size: clamp(21px, 3vw, 30px); line-height: 1.65; text-wrap: pretty; }

/* ===== 課題カード ===== */
.aio-issues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.aio-issue { border: 1px solid var(--line); background: #fff; padding: 28px 26px; display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.aio-issue .n { font-family: "Cormorant Garamond", serif; font-size: 28px; color: var(--gold-d); font-weight: 600; line-height: 1; flex-shrink: 0; }
.aio-issue p { color: var(--ink); font-size: 15px; line-height: 1.75; min-width: 0; }

/* ===== tool-card / tools-grid（PRODUCTS/SOLUTIONSと同一コンポーネント） ===== */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tools-grid.cols-1 { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
.tool-card { border: 1px solid var(--line); background: #fff; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .28s; }
.tool-card:hover { box-shadow: 0 16px 40px -20px rgba(20,34,79,.18); }
.tool-card-static { cursor: default; }
.tool-card-static:hover { box-shadow: none; }
.tool-card .ph { aspect-ratio: 1672/941; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px 28px; }
.tool-card .ph img { width: 100%; height: 100%; object-fit: contain; }
.tool-card .body { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.tool-card .tag { font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 8px; }
.tool-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; text-wrap: pretty; }
.tool-card .desc { font-size: 14px; color: var(--gray); line-height: 1.75; flex: 1; }
.tool-card .visit { margin-top: 16px; font-size: 13px; color: var(--navy); }
.tool-card .visit span::after { content: " —›"; color: var(--gold-d); }
.aio-note { text-align: center; margin-top: 28px; font-size: 13.5px; color: var(--gray); }

/* ===== 強み / stats ===== */
.aio-strength-lead { max-width: var(--reading-width, 760px); margin: 0 auto 40px; text-align: left; color: var(--gray); font-size: 15px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); background: #fff; }
.stat-box { padding: 40px 32px; border-right: 1px solid var(--line); text-align: center; }
.stat-box:last-child { border-right: none; }
.stat-box .v { font-family: var(--rb-font-jp, "Noto Sans JP", sans-serif); font-weight: 700; color: var(--navy); font-size: clamp(36px, 4.6vw, 50px); line-height: 1; }
.stat-box .v em { color: var(--gold-d); font-style: normal; font-size: 22px; margin-left: 3px; }
.stat-box .l { margin-top: 14px; color: var(--gray); font-size: 14px; letter-spacing: .04em; }

/* ===== case-card（実績・事例と同一コンポーネント／モーダル無し） ===== */
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.case-card { border: 1px solid var(--line); background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.case-card .ph { height: 180px; overflow: hidden; background: var(--tint); position: relative; }
.case-card .ph img { width: 100%; height: 100%; object-fit: contain; padding: 58px 26px 26px; background: #fff; }
.case-card .badge { position: absolute; top: 14px; left: 14px; font-size: 13px; letter-spacing: .1em; padding: 4px 10px; background: var(--navy); color: #fff; }
.case-card .body { padding: 24px 8px 26px; flex: 1; display: flex; flex-direction: column; }
.case-card .industry { font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: .14em; color: var(--gold-d); margin-bottom: 8px; }
.case-card h3 { margin-bottom: 12px; text-wrap: pretty; }
.case-card h3 .case-company { display: block; font-size: 17px; color: var(--navy); font-weight: 600; }
.case-card h3 .case-summary { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 13.5px; color: var(--gray); font-weight: 500; margin-top: 6px; }
.case-card .challenge { font-size: 13.5px; color: var(--gray); margin-bottom: 16px; flex: 1; }
.case-card .result-row { display: flex; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.case-card .result-item { text-align: center; flex: 1; min-width: 0; }
.case-card .result-item .rv { font-family: var(--rb-font-jp, "Noto Sans JP", sans-serif); font-size: 18px; color: var(--navy); font-weight: 700; }
.case-card .result-item .rv .before { font-size: 13px; font-weight: 600; color: var(--gray); }
.case-card .result-item .rv .after { font-size: 21px; font-weight: 800; color: var(--bordeaux); }
.case-card .result-item .rl { font-size: 12.5px; color: var(--gray); margin-top: 4px; line-height: 1.4; }

/* ===== Research：編集的カード ===== */
.aio-research-list { display: flex; flex-direction: column; }
.aio-research-card { display: flex; gap: 28px; padding: 32px 4px; border-top: 1px solid var(--line); }
.aio-research-card:last-child { border-bottom: 1px solid var(--line); }
.aio-research-card .idx { font-family: "Cormorant Garamond", serif; font-size: 13px; letter-spacing: .16em; color: var(--gold-d); text-transform: uppercase; flex-shrink: 0; width: 100px; padding-top: 4px; }
.aio-research-card .rc-body h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; text-wrap: pretty; }
.aio-research-card .rc-body p { font-size: 14px; color: var(--gray); line-height: 1.8; max-width: 620px; }
.aio-research-card .rc-body .visit { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--navy); border-bottom: 1px solid var(--navy); padding-bottom: 1px; }
.aio-research-card .rc-body .visit:hover { color: var(--bordeaux); border-color: var(--bordeaux); }
.aio-research-card .rc-img { width: 140px; aspect-ratio: 16/9; flex-shrink: 0; overflow: hidden; border-radius: 2px; align-self: center; background: #fff; }
.aio-research-card .rc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.aio-research-card .rc-img.logo { background: var(--tint); }
.aio-research-card .rc-img.logo img { object-fit: contain; padding: 14px; }

/* ===== Research：カルーセル（記事2件以上のときのみ有効化） =====
   カードの内部レイアウト（.aio-research-card自体）は変更しない。1スライド＝カード1枚
   の等幅ページャーとし、ネイティブのoverflow-x/scroll-snapで実際の移動を担う。
   JSは「矢印クリックで1枚送り」「disabled同期」「マウスドラッグ」のみ担当（TOPの
   .case-carousel/.media-carouselと同じ設計）。記事は常に全件を初期HTMLへ残す。 */
.aio-research-carousel { position: relative; }
.aio-research-carousel .case-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 50%;
  color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -12px rgba(20, 34, 79, .25); z-index: 2; transition: box-shadow .2s, opacity .2s;
}
.aio-research-carousel .case-nav:hover:not(:disabled) { box-shadow: 0 12px 28px -12px rgba(20, 34, 79, .35); }
.aio-research-carousel .case-nav:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.aio-research-carousel .case-nav:disabled { opacity: .35; cursor: default; box-shadow: none; }
.aio-research-carousel .case-nav-prev { left: -22px; }
.aio-research-carousel .case-nav-next { right: -22px; }
.aio-research-carousel .aio-research-list {
  flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.aio-research-carousel .aio-research-list::-webkit-scrollbar { display: none; height: 0; }
.aio-research-carousel .aio-research-list.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.aio-research-carousel .aio-research-list > .aio-research-card {
  /* flex-shrinkは0のまま（他スライドとの奪い合いで249pxがさらに縮むのを防ぐ）。
     min-width:0がないと、カード自身の子要素（画像・タイトル）が持つmin-content幅が
     flex-basis:100%より大きい場合にそちらへ張り出してしまうため明示的に上書きする。 */
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
}
@media (max-width: 480px) {
  .aio-research-carousel .case-nav { display: none; }
}

/* ===== 支援の流れ（横ライン＋ナンバリング） ===== */
.aio-process { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.aio-process::before { content: ""; position: absolute; top: 19px; left: calc(100% / 12); right: calc(100% / 12); height: 1px; background: var(--line); }
.aio-process li { list-style: none; text-align: center; padding: 0 8px; position: relative; min-width: 0; }
.aio-process .n { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 auto; border-radius: 50%; background: var(--navy); color: #fff; font-family: "Cormorant Garamond", serif; font-size: 16px; font-weight: 600; position: relative; z-index: 1; }
.aio-process .en { display: block; margin-top: 14px; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: .12em; color: var(--gold-d); text-transform: uppercase; }
.aio-process h4 { font-size: 14px; margin: 4px 0 8px; text-wrap: pretty; }
.aio-process p { font-size: 12.5px; color: var(--gray); line-height: 1.6; }

/* ===== 専門情報ブロック ===== */
.aio-media-cta { background: var(--navy-d); color: #fff; border-radius: 4px; padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.aio-media-cta .tx p { color: #b9c0d2; font-size: 14px; max-width: 520px; }
.aio-media-cta .btn-line { color: #fff; border-color: rgba(255,255,255,.6); flex-shrink: 0; }
.aio-media-cta .btn-line:hover { background: #fff; color: var(--navy); }

/* ===== FAQ ===== */
.aio-faq { max-width: 780px; margin: 0 auto; }
.aio-faq details { border-bottom: 1px solid var(--line); padding: 18px 4px; }
.aio-faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.aio-faq summary .q { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }
.aio-faq summary::after { content: "+"; color: var(--gold-d); font-size: 20px; font-weight: 300; flex-shrink: 0; }
.aio-faq details[open] summary::after { content: "\2212"; }
.aio-faq summary::-webkit-details-marker { display: none; }
.aio-faq .a { margin-top: 12px; font-size: 14.5px; color: var(--gray); line-height: 1.8; }

/* ===== CTA band ===== */
.ctaband { background: var(--navy); color: #fff; text-align: center; padding: 72px 0; }
.ctaband .eyebrow { color: var(--gold); display: block; margin-bottom: 18px; font-family: "Cormorant Garamond", serif; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; }
.ctaband .lead { font-family: var(--rb-font-jp, "Noto Sans JP", sans-serif); font-size: clamp(23px, 3.2vw, 34px); font-weight: 700; line-height: 1.6; text-wrap: pretty; }
.ctaband p { color: #b9c0d2; margin: 18px 0 34px; font-size: 15px; }
.ctaband .btn-line { color: #fff; border-color: rgba(255,255,255,.6); }
.ctaband .btn-line:hover { background: #fff; color: var(--navy); }
.ctaband .btn:not(.btn-line) { background: var(--bordeaux); }
.ctaband .btn:not(.btn-line):hover { filter: brightness(0.88); }
.aio-hero .actions, .ctaband .actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ===== Footer（front-page.php現行フッターと同一） ===== */
footer { background: var(--navy-d); color: #9aa3bc; padding: 0 0 38px; font-size: 14px; }
.footer-logo-band { background: #f1eadc; padding: 36px 0; }
.footer-logo-band .logo { margin: 0 auto; }
.f-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 28px; padding: 48px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.f-grid h5 { font-family: "Cormorant Garamond", serif; color: var(--gold); font-size: 14px; margin-bottom: 18px; letter-spacing: .12em; text-transform: uppercase; }
.f-grid ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
footer a:hover { color: #fff; }
.f-disabled { color: #6b7390; }
.footer-bottom { display: flex; flex-direction: column; padding-top: 26px; font-size: 14px; color: #6b7390; }
.footer-policy { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.footer-policy a { white-space: nowrap; }
.copy { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; }
@media (min-width: 881px) {
  .footer-bottom { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 20px; }
  .copy { margin-top: 0; padding-top: 0; border-top: none; text-align: left; }
}
@media (max-width: 880px) {
  .f-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .f-grid > div { border-bottom: 1px solid rgba(255,255,255,.14); min-width: 0; }
  .f-grid > div > h5 { margin: 0; padding: 18px 30px 18px 4px; text-align: center; white-space: normal; position: relative; cursor: pointer; }
  .f-grid > div > h5::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: sans-serif; font-size: 20px; font-weight: 300; line-height: 1; }
  .f-grid > div.open > h5::after { content: "\2013"; }
  .f-grid > div > ul { max-height: 0; overflow: hidden; align-items: center; gap: 0; transition: max-height .25s ease; }
  .f-grid > div.open > ul { max-height: 320px; padding-bottom: 18px; }
  .f-grid > div > ul > li { text-align: center; padding: 6px 0; }
  .footer-policy { justify-content: center; gap: 10px 14px; font-size: 13px; }
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .head .tel, .head-cta > a:last-child { display: none; }
  .head-cta > a { height: 38px; padding: 0 16px; font-size: 12.5px; }
  .aio-hero { padding: 64px 0 48px; }
  .aio-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .aio-hero h1 { font-size: clamp(26px, 5.6vw, 34px); }
  .aio-hero-copy p { max-width: 100%; }
  .aio-hero-visual { max-width: 380px; margin: 0 auto; }
  .aio-hero-stats { gap: 22px; flex-wrap: wrap; }
  .aio-flow { flex-direction: column; align-items: flex-start; gap: 24px; }
  .aio-flow-step { text-align: left; display: flex; align-items: center; gap: 16px; padding: 0; width: 100%; }
  .aio-flow-step p { margin-top: 0; }
  .aio-flow-step:not(:last-child)::after { content: none; }
  
  .aio-issues { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-box { border-right: none; border-bottom: 1px solid var(--line); }
  .stat-box:last-child { border-bottom: none; }
  .aio-process { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .aio-process::before { content: none; }
  .aio-research-card { gap: 18px; }
  .aio-research-card .idx { width: 72px; font-size: 11px; }
  .aio-research-card .rc-img { width: 110px; }
  .aio-media-cta { flex-direction: column; text-align: left; align-items: stretch; }
  .aio-media-cta .btn-line { align-self: flex-start; }
  .aio-media-cta .tx { width: 100%; }
}
/* 特定の見出しでのみ、狭幅時に意味の切れ目で改行させるための最小限のユーティリティ。
   Desktop/Tabletでは非表示のまま1行を維持し、480px以下でのみ改行として機能する。 */
.mob-break { display: none; }
.aio-flow-step p { text-wrap: balance; }
@media (max-width: 480px) {
  .mob-break { display: inline; }
}
@media (max-width: 480px) {
  .aio-section { padding: 56px 0; }
  .aio-hero .actions { flex-direction: column; align-items: stretch; }
  .aio-hero .actions .btn { width: 100%; white-space: nowrap; }
  .ctaband .actions { flex-direction: column; align-items: stretch; }
  .ctaband .actions .btn { width: 100%; white-space: nowrap; }
  .aio-process { grid-template-columns: 1fr; text-align: left; gap: 20px; }
  .aio-process li { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
  .aio-process .n { margin: 2px 0 0; flex-shrink: 0; }
  .aio-process .tx { min-width: 0; }
  .aio-process .en { margin-top: 0; }
  .aio-research-card { flex-direction: column; gap: 8px; }
  .aio-research-card .rc-img { width: 100%; aspect-ratio: 16/9; }
  .aio-research-card .idx { width: auto; white-space: nowrap; }
  .aio-hero { padding: 52px 0 40px; }
  .aio-hero-stats { gap: 18px 24px; }
  .aio-hero-visual { max-width: 300px; margin: 0 auto; }
}

/* ===== 320px（359px以下）専用：句読点行頭・語句分断・はみ出しの解消。360px以上は変更しない ===== */
@media (max-width: 359px) {
  .aio-hero h1, .aio-hero-copy p, .aio-hero .tx, .aio-hero .hcard, .aio-hero-stats { word-break: normal; word-break: auto-phrase; line-break: strict; }
  .aio-hero h1 { font-size: 22px; }
  .aio-hero h1.rb-h1-long { font-size: 20px; }
  .aio-hero-visual { max-width: 100%; width: 100%; }
  .aio-section h2 { font-size: 21px; }
  .aio-section h3 { font-size: 18px; }
}