/*
Theme Name: Analyze11 Theme
Theme URI: https://analyze11.example.com/
Author: Analyze11
Author URI: https://analyze11.example.com/
Description: フレンチ・テック風（白背景＋1pxボーダー＋赤アクセント＋サンセリフ体で統一）のAnalyze11オリジナルテーマ。自治体DX・医療連携・中小企業AI導入のコンサルティングサイト向け。
Version: 1.13.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: analyze11
Tags: one-column, custom-menu, editor-style, translation-ready
*/

/* ==========================================================================
   ベース設定：白基調

   タイポグラフィの原則（フレンチ・テック＝抜け感と余白で見せる）
   ・書体は Noto Sans JP のみ。明朝体（Noto Serif JP）は使わない。
   ・ウェイトは 400（standard）と 500（medium）の2段だけ。
     700 以上・font-black 相当は使わない（Google Fonts 側も 400/500 のみ
     読み込んでいるため、指定しても合成太字になるだけで字面が濁る）。
   ・文字色は本文 #1F2937（gray-800）／見出し #111827（gray-900）／
     補助テキスト #4B5563〜#6B7280。赤 #D90429 はアクセントに限定する。
   ・text-transform: uppercase は使わない。英字ラベルも Title Case で書く。
   ・強さではなく「サイズ・字間・行間」の差で階層を作る。
   ========================================================================== */
body {
  margin: 0;
  background-color: #FFFFFF;
  color: #1F2937; /* = text-gray-800 */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400; /* = font-normal */
  line-height: 1.9; /* 行間を少し広げて抜け感を出す（旧 1.8） */
  letter-spacing: 0.02em;
}

/* 見出しも本文と同じサンセリフ体。ウェイトは 500 で止め、
   サイズと字間・行間で階層を作る。 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500; /* = font-medium */
  color: #111827;   /* = text-gray-900 */
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* ブラウザ既定の <strong> / <b> は font-weight: bolder（=700 相当）。
   Noto Sans JP は 400/500 しか読み込んでいないため、そのままだと
   ブラウザが合成太字（fake bold）を描いて字面が濁る。
   強調は 500 ＋ 濃いグレーで表し、太らせない。 */
strong, b {
  font-weight: 500;
  color: #111827;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* アクセント：ピンポイントの赤 */
.accent-red {
  color: #D90429;
}
.red-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #D90429;
  margin-right: 12px;
  border-radius: 1px; /* シャープな四角形 */
  flex: 0 0 auto;     /* section-title 内で潰れないように固定 */
}

/* ==========================================================================
   サイトヘッダー（テキストロゴ／タイポグラフィ・ロゴ）
   罫線は入れず、白背景のまま余白だけでロゴを浮かせる（フレンチ・テックの軽さを維持）。
   ロゴは .container を共有するため、ヒーローの見出しと左端が揃う。
   画像ロゴは使用しない（images/logo-sharp.svg は削除済み）。
   ※ このテーマは Tailwind CSS を読み込んでいないため、font-sans / font-medium /
     text-gray-900 / tracking-wider 等のユーティリティクラスは使えない。
     ここでは同等の値を素のCSSで指定している。
   ========================================================================== */
header.site-header {
  padding: 28px 0 0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo {
  line-height: 1; /* ロゴ文字の行間による余白を消し、ナビと光学的に揃える */
}
.site-logo__link {
  display: inline-block;
  text-decoration: none;
}
/* ロゴは太らせず、広い字間（tracking）だけで存在感を作る。
   表示するテキストは analyze11_text_logo_html() が返す "Analyze11" のみ。 */
.site-logo__text {
  display: block;
  font-family: 'Noto Sans JP', sans-serif; /* = font-sans */
  font-weight: 500;                        /* = font-medium（旧 700 の font-bold を解除） */
  font-size: 24px;
  line-height: 1;
  color: #111827;                          /* = text-gray-900 */
  letter-spacing: 0.16em;                  /* = tracking-wider 相当（抜け感） */
  text-transform: none;                    /* 強制大文字はかけない */
  transition: color 0.3s ease;
}
/* 末尾の「11」だけをアクセントカラーの赤にし、さりげない差し色にする。 */
.site-logo__accent {
  /* ウェイトは親と同じ 500 のまま。差は色だけでつける。 */
  color: #D90429;
}
.site-logo__link:hover .site-logo__text {
  color: #4B5563; /* ナビのホバーと同じ 0.3s ease で控えめに反応させる */
}
.site-logo__link:hover .site-logo__accent {
  color: #D90429; /* 赤は退色させず、ブランドカラーとして保持する */
}

/* ==========================================================================
   ブランド・ロゴタイプ（本文・ウィジェット用の汎用コンポーネント）

   固定ページ本文やウィジェットに貼られた「白抜きのロゴPNG」は、白背景の
   このテーマでは白飛びして読めない。その置き換え先として、ヘッダーと同じ
   配色のテキストロゴをどこにでも置けるようにしたもの。
   出力は functions.php の analyze11_logotype_html() ／ショートコード
   [analyze11_logo] から行う（本文に直接HTMLを書いても同じ）。
   ※ このテーマは Tailwind CSS を読み込んでいないため、text-gray-900 /
     text-red-600 等のユーティリティは使えない。同等の値を素のCSSで持つ。
   ========================================================================== */
.brand-logotype {
  display: inline-block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;      /* = font-medium。太らせず字間で見せる */
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  color: #111827;        /* = text-gray-900。白背景に対して約17:1 */
  text-transform: none;
  text-decoration: none;
}
/* 末尾の「11」だけをブランドのアクセントレッドにする。 */
.brand-logotype__accent {
  color: #D90429;        /* = text-red-600 相当（ブランド指定色） */
}
.brand-logotype--sm { font-size: 22px; }
.brand-logotype--lg { font-size: 48px; letter-spacing: 0.14em; }
a.brand-logotype:hover { color: #4B5563; }
a.brand-logotype:hover .brand-logotype__accent { color: #D90429; }

/* --------------------------------------------------------------------------
   画像ロゴをどうしても維持する場合の代替（フォールバック）

   .brand-logo-plate … 白抜きロゴを載せる濃色のプレート（＝ bg-gray-800 相当）。
                       白い文字が背景から浮き、確実に読める状態になる。
   .brand-logo-img   … 白背景に置いたままにする場合の輪郭付け。drop-shadow は
                       画像の不透明ピクセルの形に沿って影を落とすため、
                       透過PNG／SVGの白文字でも輪郭が出る。
   -------------------------------------------------------------------------- */
.brand-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  background-color: #1F2937; /* = bg-gray-800 */
  border-radius: 8px;
}
.brand-logo-plate .brand-logo-img {
  filter: none; /* 濃色プレート上では影は不要 */
}
.brand-logo-img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* グローバルナビゲーション
   下線や背景は持たせず、文字とホバー時の赤だけで構成する。
   現在表示中のページ（.current-menu-item）だけ赤ドット相当の下線で示す。 */
.site-nav {
  flex: 0 1 auto; /* ロゴを潰さず、必要なときだけナビ側が縮む */
}
.site-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.site-nav__list a {
  font-size: 14px;
  font-weight: 500;
  color: #4B5563;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.site-nav__list a:hover {
  color: #D90429;
  border-bottom-color: #D90429;
}
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
  color: #111827;
  border-bottom-color: #D90429;
}

/* ==========================================================================
   ヒーローエリア（アシンメトリーレイアウト）
   ========================================================================== */
/* ヘッダー（padding 28px ＋ テキストロゴ 26px）が上に入った分、
   旧値 140px から詰めてロゴとキャッチコピーの間隔を適正化する。 */
.hero {
  padding: 80px 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.hero-text {
  width: 60%;
}
/* ミニマルな見出し：サイズは 52px から 44px へ落とし、行間と字間を
   ゆるめて「大きく重い塊」ではなく「余白のある一文」として見せる。 */
.hero h1 {
  font-size: 44px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 36px;
  letter-spacing: 0.005em; /* 旧 -0.02em の詰めすぎを解除 */
}
.hero p {
  font-size: 17px;
  font-weight: 400;
  color: #4B5563;
  margin-bottom: 40px;
  max-width: 520px;
}
/* 英字ラベル（eyebrow）。太字・大文字はかけず、字間だけ広げて小さく添える。 */
.hero-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #6B7280;
  text-transform: none;
}

/* ヒーローの導線（主ボタン ＋ About への副導線テキストリンク） */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}

/* 罫線もボタン枠も持たない控えめなテキストリンク。矢印だけで前進感を出す。 */
.text-link {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  border-bottom: 1px solid #E5E7EB;
  padding-bottom: 3px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.text-link::after {
  content: '→';
  margin-left: 8px;
}
.text-link:hover {
  color: #D90429;
  border-bottom-color: #D90429;
}

/* ヒーロー右側の装飾ブロック（抽象的なインフラ・ネットワークを表現） */
.hero-visual {
  width: 35%;
  height: 300px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: linear-gradient(145deg, #f9f9f9, #ffffff);
  position: relative;
  flex: 0 0 auto;
}
/* メインビジュアルのブランドマーク。ヘッダーのテキストロゴと同じ
   サンセリフ＋広い文字間隔で組む。
   ※ 以前は「極薄のウォーターマーク」として #F3F4F6 を敷いていたが、
     .hero-visual の背景（linear-gradient(145deg, #f9f9f9, #ffffff)）との
     コントラスト比が約1.03:1しかなく、白背景に同化して（＝白飛びして）
     ブランド名がまったく読めない状態だった。装飾よりもブランドの視認性を
     優先し、ヘッダーのロゴと同じ配色（#111827 ＋ 末尾「11」を #D90429）へ
     引き上げている。 */
.hero-visual__mark {
  position: absolute;
  bottom: 20px;
  right: 20px;
  max-width: calc(100% - 40px);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.16em;
  color: #111827; /* = text-gray-900。白背景に対して約17:1（WCAG AAA） */
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.hero-visual__mark-accent {
  /* ブランドのアクセントレッド。不透明で置き、白背景でも赤としてはっきり読ませる
     （旧 rgba(217, 4, 41, 0.14) は実質不可視だった）。 */
  color: #D90429;
}

/* ==========================================================================
   フレンチ・テック流カード（極細の線）
   ========================================================================== */
.section-title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 88px 0 40px; /* 見出しの前の余白を少し広く取る */
  display: flex;
  align-items: center;
}

/* PC表示では明示的に2列。カードが4枚のときに 2列×2行 で美しく整列する。
   ※旧 repeat(auto-fit, minmax(320px, 1fr)) では内寸1052pxに3列（320*3+32*2=1024px）が
     収まってしまい、4枚目だけが2行目に取り残されるため固定2列に変更。 */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 100px;
  align-items: stretch; /* 文量が違っても各行のカード高さを揃える */
}
.french-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB; /* 極薄の境界線 */
  border-radius: 12px;
  padding: 40px;
  transition: all 0.3s ease;
}
.french-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.03);
  border-color: #D1D5DB;
}
.french-card h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 18px;
}
.french-card p {
  font-size: 15px;
  font-weight: 400;
  color: #4B5563;
  margin: 0;
}

/* ==========================================================================
   資料スライドショー（CSS @keyframes のみ・外部ライブラリ不使用）
   カード内の説明文の直下に置き、8枚の資料を自動でクロスフェード再生する。
   1周の長さは inline style の --a11-slide-cycle（枚数 × 4秒）で受け取る。
   ========================================================================== */
.a11-slideshow {
  position: relative;
  margin-top: 24px;
  /* 画像の実寸 2867 × 1600 と同じ比率を先に確保し、読み込み時のガタつきを防ぐ */
  aspect-ratio: 2867 / 1600;
  overflow: hidden;
  border: 1px solid #E5E7EB; /* 極細の枠線でカード本体とトーンを揃える */
  border-radius: 8px;
  background-color: #FFFFFF;
}
.a11-slideshow__item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 元画像と同比率のため実質トリミングは発生しない */
  display: block;
  opacity: 0;
  animation-name: a11-slide-fade;
  animation-duration: var(--a11-slide-cycle, 32s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; /* 自動ループ */
  animation-fill-mode: both;
  will-change: opacity;
}

/* 1周を枚数（8枚）で割った 12.5% を1枚の持ち時間とし、
   その前後をフェードに充てることでクロスフェードになる。 */
@keyframes a11-slide-fade {
  0% {
    opacity: 0;
  }
  1.5% {
    opacity: 1;
  }
  11% {
    opacity: 1;
  }
  12.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* アニメーションを望まないユーザーには1枚目のみを静止表示する */
@media (prefers-reduced-motion: reduce) {
  .a11-slideshow__item {
    animation: none;
    opacity: 0;
  }
  .a11-slideshow__item:first-child {
    opacity: 1;
  }
}

/* ==========================================================================
   スタック・ビジュアル（2枚の画像を少しズラして重ね、ゆっくり浮遊させる）
   カード内の説明文の直下に置く。外部ライブラリ・JS は不使用。

   ・背面画像（--base）はフロー内に残し、親要素の高さの基準にする。
   ・前面画像（--front）は右下へ absolute でオフセット配置する。
     はみ出す分は親の padding-right / padding-bottom で先に確保しているため、
     カードから溢れたり横スクロールが発生することはない。
   ・ズラし量（--a11-stack-offset）と前面画像の幅は clamp / % 指定なので、
     スマートフォンでも比率を保ったまま縮小する。
   ========================================================================== */
.a11-stack {
  --a11-stack-offset: clamp(14px, 3.2vw, 32px); /* 右下へのズラし量 */
  --a11-stack-front-width: 58%;                 /* 前面画像の幅（親基準） */
  position: relative;
  width: 100%;
  max-width: 480px; /* カード内寸（約430px）に収まるサイズ。中央寄せで余白を均す */
  margin: 24px auto 0;
  padding: 0 var(--a11-stack-offset) var(--a11-stack-offset) 0;
  box-sizing: border-box;
}
.a11-stack__img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box; /* border を含めた幅で計算し、はみ出しを防ぐ */
  /* 画像の実寸 2816 × 1536 と同比率を先に確保し、読み込み時のガタつきを防ぐ */
  aspect-ratio: 2816 / 1536;
  object-fit: cover;
  border-radius: 12px;
  background-color: #FFFFFF;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; /* ゆっくり浮遊し続ける */
  will-change: transform;
}
/* 背面（1枚目）：4秒周期 */
.a11-stack__img--base {
  position: relative;
  z-index: 1;
  border: 1px solid #E5E7EB; /* 極細の枠線でカード本体とトーンを揃える */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  animation-name: a11-stack-float-base;
  animation-duration: 4s;
}
/* 前面（2枚目）：5秒周期＋開始タイミングをズラして奥行きを強調 */
.a11-stack__img--front {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: var(--a11-stack-front-width);
  border: 3px solid #FFFFFF; /* 白フチで背面画像から浮かせる */
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16); /* 影を強めて手前に見せる */
  animation-name: a11-stack-float-front;
  animation-duration: 5s;
  animation-delay: -1.6s; /* 負の遅延で、読み込み直後から位相をズラした状態にする */
}

@keyframes a11-stack-float-base {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}
@keyframes a11-stack-float-front {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -14px, 0) rotate(-0.4deg);
  }
}

/* スマートフォン：ズラし量を控えめにし、前面画像を少し大きく見せる */
@media screen and (max-width: 600px) {
  .a11-stack {
    --a11-stack-offset: 12px;
    --a11-stack-front-width: 64%;
    max-width: 100%;
    margin-top: 20px;
  }
}

/* アニメーションを望まないユーザーには静止した重ね表示のみを見せる */
@media (prefers-reduced-motion: reduce) {
  .a11-stack__img {
    animation: none;
  }
}

/* ==========================================================================
   単体画像ビジュアル（.a11-figure）
   カード内の説明文の直下に、資料や図を1枚だけ置くためのパーツ。
   （2枚重ねは .a11-stack、複数枚の自動送りは .a11-slideshow を使う）

   フレンチ・テックの原則にそろえる:
   ・角丸 12px ＋ 1px の極薄ボーダー（.french-card と同じ #E5E7EB）
   ・説明文との間に 24px の余白を取り、窮屈にしない
   ・width:100% / height:auto で画面幅に追従し、--a11-figure-max で
     PC 表示の上限幅を決めて中央寄せ（margin: auto）にする
   ========================================================================== */
.a11-figure {
  /* 2列カードの内寸（約430px）に収まる幅。隣の .a11-stack と同値にして、
     同じ行に並ぶ2枚のビジュアルの見た目のサイズをそろえている。 */
  --a11-figure-max: 480px;
  width: 100%;
  max-width: var(--a11-figure-max);
  margin: 24px auto 0; /* 上に余白 ＋ 左右 auto で中央揃え */
  padding: 0;
  box-sizing: border-box;
}
/* カード外（全幅セクション等）で使う場合の広めの上限（Tailwind の max-w-4xl 相当） */
.a11-figure--wide {
  --a11-figure-max: 896px;
}
.a11-figure__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto; /* 画面幅に合わせて縦横比を保ったまま縮小する */
  box-sizing: border-box; /* border を含めた幅で計算し、はみ出しを防ぐ */
  /* 画像の実寸 2816 × 1536 と同比率を先に確保し、読み込み時のガタつきを防ぐ */
  aspect-ratio: 2816 / 1536;
  object-fit: cover;
  border: 1px solid #E5E7EB; /* 極細の枠線でカード本体とトーンを揃える */
  border-radius: 12px;
  background-color: #FFFFFF;
}

/* スマートフォン：カード内寸いっぱいまで使い、上の余白を少し詰める */
@media screen and (max-width: 600px) {
  .a11-figure {
    --a11-figure-max: 100%;
    margin-top: 20px;
  }
}

/* 独自システム紹介エリア（少し背景色を変えてメリハリを） */
.system-showcase {
  background-color: #FAFAFA;
  padding: 80px 0;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
/* showcase 内は上下の余白を padding 側で持つため見出しの上マージンを打ち消す */
.system-showcase .section-title {
  margin-top: 0;
}
.system-showcase .grid {
  margin-bottom: 0;
}

/* ==========================================================================
   自治体標準化（Local Government Standardization）
   Apple の製品紹介ページのような縦スクロール体験を CSS だけで構成する。

   ・PC：左カラム（見出し・リード文・資料スライドショー）を position: sticky で
     画面左に留め、右カラムのステップカードだけがスクロールしていく。
   ・900px 未満：sticky と2カラムを解除し、タイトル → 各カードの縦一列に戻す。
   ・JavaScript は使わない（テーマ全体がスクリプト非依存のため）。
   ========================================================================== */
.a11-gov {
  /* 直前の .a11-eco が padding-bottom: 100px を持つため、上余白は持たせない */
  padding: 0 0 100px;
  scroll-margin-top: 40px; /* #local-government-standardization へのジャンプ時の余白 */
}
.a11-gov__inner {
  display: grid;
  /* 左：見出し／右：ステップ。右をやや広く取り、本文の1行が長くなりすぎないようにする */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: start; /* カラムを引き伸ばさない（sticky を効かせるための前提） */
}

/* 左カラム（固定）
   このテーマのヘッダーは position: fixed ではないが、
   画面上端に張り付かせず余裕を持たせるため top: 120px で留める。 */
.a11-gov__aside {
  position: sticky;
  top: 120px;
  align-self: start;
}
/* .section-title の上下マージン（80px / 40px）はここでは不要なので打ち消す */
.a11-gov__title {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
}
/* 英字の副題。強制大文字（text-transform: uppercase）は使わず、
   Title Case のまま字間だけ広げて添える。 */
.a11-gov__en {
  margin: 14px 0 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #9CA3AF;
  text-transform: none;
}
.a11-gov__lead {
  margin: 24px 0 0;
  font-size: 15px;
  color: #4B5563;
}
/* 本文中の強調は太字で押し切らず、色だけを一段濃くして示す。 */
.a11-gov__lead strong {
  font-weight: 500;
  color: #111827;
}
/* 左カラム内の資料スライドショー（.a11-slideshow は既存の共通パーツ） */
.a11-gov__aside .a11-slideshow {
  margin-top: 32px;
}
.a11-gov__link {
  display: inline-block;
  margin-top: 28px;
}

/* 右カラム（スクロール）：カードを縦一列に並べる */
.a11-gov__card {
  background-color: #FFFFFF;
  border: 1px solid #e5e7eb; /* 極細のボーダー */
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 32px; /* カード間の余白。スクロール時に窮屈にならない間隔 */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.a11-gov__card:last-child {
  margin-bottom: 0;
}

/* 上品な浮き上がり。タッチ端末ではホバー状態が残るため、
   マウス等のホバー可能なポインタにのみ適用する。 */
@media (hover: hover) {
  .a11-gov__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    border-color: #D1D5DB;
  }
}

/* ステップ番号（小さな灰色のラベル ＋ サンセリフ体の数字）
   旧デザインは「赤・太字・大文字の STEP」だったが、赤は red-dot と
   ギャラリーの連番に限定し、ここは色を持たせず字間だけで整える。 */
.a11-gov__step {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
}
.a11-gov__step-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #9CA3AF;
  text-transform: none;
}
.a11-gov__step-num {
  font-family: 'Noto Sans JP', sans-serif; /* 明朝体をやめてサンセリフへ統一 */
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #111827;
}
.a11-gov__card-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 16px;
}
.a11-gov__card-text {
  font-size: 15px;
  font-weight: 400;
  color: #4B5563;
  margin: 0;
}
/* 各ステップの要点。細い罫線で本文と区切る */
.a11-gov__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #F3F4F6;
}
.a11-gov__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: #4B5563;
}
.a11-gov__list li + li {
  margin-top: 8px;
}
.a11-gov__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background-color: #D90429;
  border-radius: 1px; /* .red-dot と同じシャープな四角形 */
}

/* アニメーションを望まないユーザーには移動を伴う演出を行わない */
@media (prefers-reduced-motion: reduce) {
  .a11-gov__card {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .a11-gov__card:hover {
    transform: none;
  }
}

/* ==========================================================================
   医療連携法人のネットワーク・コネクティング（Apple 風 横スクロール・ギャラリー）

   ・.a11-gallery         … 横スクロールするビューポート。scroll-snap-type: x mandatory。
   ・.a11-gallery__track  … 画像を横一列に並べる flex コンテナ。左右の padding で
                            1枚目・最後の1枚も画面中央にスナップできるようにする。
   ・.a11-gallery__item   … 各スライド。scroll-snap-align: center で中央停止。
   ・スクロールバーは非表示（WebKit / Firefox / 旧 Edge の3系統に対応）。
   ・JavaScript は使わない。ドラッグ／トラックパッド／Shift+ホイール／
     キーボード（tabindex="0" のためカーソルキー）で操作できる。
   ========================================================================== */
/* 事業領域カードから本セクションへ降りるための内部リンク
   （.text-link は inline 要素なので、余白を効かせるため inline-block にする） */
.a11-card__link {
  display: inline-block;
  margin-top: 20px;
}

.a11-net {
  /* 直前の .a11-gov が padding-bottom: 100px を持つため、上余白は持たせない */
  padding: 0 0 100px;
  scroll-margin-top: 40px; /* #medical-network-connecting へのジャンプ時の余白 */
}

/* 見出しブロック
   書体はサイト全体と同じサンセリフ体。旧デザインの「太字＋字間詰め」で
   塊として見せる手法はやめ、サイズを抑えて行間・字間をゆるめる。 */
.a11-net__eyebrow {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #6B7280;
  text-transform: none;
}
.a11-net__title {
  margin: 20px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.5;
  letter-spacing: 0.01em; /* 旧 -0.01em の詰めすぎを解除 */
  color: #111827;
}
.a11-net__lead {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: 15px;
  color: #4B5563;
}
.a11-net__lead strong {
  font-weight: 500;
  color: #111827;
}

/* 横スクロール・ビューポート
   .container の外に置いて画面幅いっぱいに使い、左右の端で次の画像が
   わずかに覗く Apple 風の見え方にする。 */
.a11-gallery {
  --a11-gallery-item: clamp(280px, 74vw, 860px); /* 1枚の幅。トラックの padding と共有 */
  margin-top: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory; /* 横方向に必ずスナップさせる */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* スクロールバーの隠蔽（Firefox / 旧 Edge・IE） */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* スクロールバーの隠蔽（WebKit / Blink：Chrome・Safari・Edge） */
.a11-gallery::-webkit-scrollbar {
  display: none;
}
/* キーボード操作でフォーカスしたことが分かるようにする（見た目は控えめに） */
.a11-gallery:focus-visible {
  outline: 2px solid #D90429;
  outline-offset: 4px;
}

.a11-gallery__track {
  display: flex;
  align-items: flex-start;
  gap: 32px; /* 画像同士の美しい余白 */
  /* 左右の padding = (画面幅 − 1枚の幅) / 2。
     これにより最初と最後の画像も「画面中央」でスナップできる。
     画面が狭い場合でも 24px は必ず確保する。 */
  padding: 4px max(24px, calc((100vw - var(--a11-gallery-item)) / 2));
  width: max-content;
}

.a11-gallery__item {
  flex: 0 0 auto;
  width: var(--a11-gallery-item);
  margin: 0;
  scroll-snap-align: center; /* 各画像が画面の中央でピタッと止まる */
  scroll-snap-stop: always;  /* 一度のスワイプで飛ばさず1枚ずつ送る */
}

.a11-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: #F9FAFB;   /* 読み込み前の下地 */
  border-radius: 12px;         /* 角丸（フレンチ・テックの踏襲） */
  border: 1px solid #e5e7eb;   /* 極細ボーダー */
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .a11-gallery__item:hover .a11-gallery__img {
    border-color: #D1D5DB;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  }
}

/* キャプション：赤の連番 ＋ スライドの見出し */
.a11-gallery__caption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  padding: 0 2px;
  font-size: 13px;
  color: #4B5563;
}
.a11-gallery__num {
  flex: 0 0 auto;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #D90429; /* 連番だけは赤アクセントを残す（数字1〜2文字なので重くならない） */
}
.a11-gallery__num-total {
  font-weight: 400;
  color: #9CA3AF;
}
.a11-gallery__text {
  font-weight: 500;
  color: #111827;
}

/* スクロール操作のヒントと補助リンク */
.a11-net__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
}
.a11-net__hint {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #9CA3AF;
}

/* アニメーションを望まないユーザーにはスムーススクロールを行わない */
@media (prefers-reduced-motion: reduce) {
  .a11-gallery {
    scroll-behavior: auto;
  }
  .a11-gallery__img {
    transition: none;
  }
}

/* スマートフォン：1枚をほぼ画面幅まで広げ、余白と字送りを詰める */
@media screen and (max-width: 900px) {
  .a11-net {
    padding-bottom: 72px;
  }
  .a11-gallery {
    --a11-gallery-item: min(86vw, 520px);
    margin-top: 32px;
  }
  .a11-gallery__track {
    gap: 20px;
  }
  .a11-net__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ==========================================================================
   ボタン
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 14px 32px;
  background-color: #FFFFFF;
  color: #111827;
  border: 1px solid #111827;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn:hover {
  background-color: #D90429;
  border-color: #D90429;
  color: #FFFFFF;
}

/* ==========================================================================
   About Us への導線（トップページ下部のバンド）
   .grid の margin-bottom: 100px を受けるため上余白は持たせない。
   ========================================================================== */
.about-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding: 48px;
  margin-bottom: 100px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: linear-gradient(145deg, #FAFAFA, #FFFFFF);
}
.about-cta__body {
  flex: 1 1 420px;
  min-width: 0;
}
.about-cta__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 14px;
}
.about-cta__text {
  font-size: 15px;
  font-weight: 400;
  color: #4B5563;
  margin: 0;
}
.about-cta .btn {
  flex: 0 0 auto;
}

/* ==========================================================================
   代表プロフィール＋会社概要（page-about.php / Company Profile）
   PC：左に顔写真（180px 固定）／右に概要テーブル（可変）の2カラム。
   901px 未満では下部のメディアクエリで「写真が上・テーブルが下」に縦積みする。
   ========================================================================== */
.a11-profile {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  margin-bottom: 120px;
}
.a11-profile__figure {
  flex: 0 0 180px;
  margin: 0;
}
/* 極細ボーダー＋控えめな角丸のみ。影やリングなどの過度な装飾は入れない。 */
.a11-profile__img {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  background-color: #FFFFFF;
}
.a11-profile__caption {
  margin-top: 16px;
}
/* 役職ラベル。旧デザインは「赤・太字・大文字」だったが、
   ラベルは灰色の細字に落として名前の方を主役にする。 */
.a11-profile__role {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #9CA3AF;
  text-transform: none;
}
.a11-profile__name {
  display: block;
  margin-top: 8px;
  font-family: 'Noto Sans JP', sans-serif; /* 明朝体をやめてサンセリフへ統一 */
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #111827;
}
/* 概要テーブル：<table> ではなく <dl> の Flexbox で組み、
   狭い画面では見出し（dt）と内容（dd）が自然に上下へ折り返る。 */
.a11-profile__table {
  flex: 1 1 auto;
  min-width: 0;
  border-top: 1px solid #E5E7EB;
}
.a11-profile__row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid #E5E7EB;
}
.a11-profile__row dt {
  flex: 0 0 160px;
  font-weight: 500;
  color: #111827;
}
.a11-profile__row dd {
  flex: 1 1 220px;
  margin: 0;
  color: #4B5563;
}

/* ==========================================================================
   投稿・固定ページ本文（管理画面から編集した文章の受け皿）
   ========================================================================== */
.entry {
  padding: 80px 0 100px; /* ヘッダー追加に合わせて上余白を調整（旧 120px） */
}
.entry-title {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0 0 36px;
}
.entry-content p {
  font-size: 16px;
  font-weight: 400;
  color: #374151;
}
.entry-content a {
  color: #D90429;
}
/* 管理画面から入る本文の見出しも、太らせず余白で階層を作る。 */
.entry-content h2 {
  font-size: 24px;
  font-weight: 500;
  margin: 72px 0 24px;
}
.entry-content h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 44px 0 16px;
}
.entry-content img {
  max-width: 100%;
  height: auto;
}
.entry-list {
  padding: 80px 0 60px; /* ヘッダー追加に合わせて上余白を調整（旧 120px） */
}

/* ==========================================================================
   フッター
   ========================================================================== */
footer.site-footer {
  padding: 60px 0;
  border-top: 1px solid #E5E7EB;
  font-size: 14px;
  color: #6B7280;
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.site-footer a {
  color: #6B7280;
  text-decoration: none;
}
.site-footer a:hover {
  color: #D90429;
}
.site-footer__tagline {
  display: block;
  margin-top: 12px;
  color: #6B7280;
}
.site-nav__list--footer {
  gap: 24px;
}
.site-nav__list--footer a {
  font-size: 13px;
  color: #6B7280;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width: 900px) {
  /* スマホではテキストロゴを一段小さくし、文字間隔もわずかに詰めて
     ナビと2段で並んだときに窮屈にならないようにする */
  header.site-header {
    padding: 20px 0 0;
  }
  .site-logo__text {
    font-size: 21px;
    letter-spacing: 0.1em;
  }
  .hero-visual__mark {
    font-size: 26px;
  }
  .hero {
    flex-direction: column;
    padding: 48px 0 72px;
  }
  .entry,
  .entry-list {
    padding-top: 48px;
  }
  .hero-text,
  .hero-visual {
    width: 100%;
  }
  .hero h1 {
    font-size: 32px;
    line-height: 1.5;
  }
  .grid {
    grid-template-columns: 1fr; /* タブレット・スマホは1列 */
    gap: 24px;
  }
  .section-title {
    font-size: 23px;
    margin: 60px 0 32px;
  }
  .french-card {
    padding: 32px 24px;
  }
  .entry-title {
    font-size: 26px;
  }
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ヘッダーはロゴとナビを縦積みにせず、ロゴ左・ナビ右のまま詰める。
     項目が増えた場合は .site-nav__list の flex-wrap で自然に折り返る。 */
  .site-header__inner {
    gap: 16px;
  }
  .site-nav__list {
    gap: 20px;
    justify-content: flex-end;
  }
  .site-nav__list a {
    font-size: 13px;
  }

  .about-cta {
    padding: 32px 24px;
    gap: 24px;
  }
  .about-cta__title {
    font-size: 19px;
  }

  /* 自治体標準化：2カラムと sticky 固定を解除し、
     「タイトル・リード文 → 各ステップカード」の素直な縦一列に戻す。 */
  .a11-gov {
    padding-bottom: 72px;
  }
  .a11-gov__inner {
    grid-template-columns: 1fr; /* 1カラムへフォールバック */
    gap: 32px;
  }
  .a11-gov__aside {
    position: static; /* sticky 解除。以降は通常のフローで一緒にスクロールする */
    top: auto;
  }
  .a11-gov__title {
    font-size: 23px;
  }
  .a11-gov__aside .a11-slideshow {
    margin-top: 24px;
  }
  .a11-gov__link {
    margin-top: 20px;
  }
  .a11-gov__card {
    padding: 32px 24px;
    margin-bottom: 24px;
  }
  .a11-gov__step-num {
    font-size: 20px;
  }
  .a11-gov__card-title {
    font-size: 18px;
  }

  /* Company Profile：写真が上・テーブルが下の縦積みに切り替える */
  .a11-profile {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 80px;
  }
  .a11-profile__figure {
    flex: 0 0 auto;
  }
  .a11-profile__table {
    width: 100%;
  }
  .a11-profile__row {
    padding: 20px 0;
  }
  .a11-profile__row dt {
    flex: 0 0 100%;
    margin-bottom: 6px;
  }
  .a11-profile__row dd {
    flex: 0 0 100%;
  }
}

/* WordPress 標準の必須クラス（管理画面から画像を挿入した際の見た目崩れ防止） */
.alignleft {
  float: left;
  margin: 0 24px 16px 0;
}
.alignright {
  float: right;
  margin: 0 0 16px 24px;
}
.aligncenter {
  display: block;
  margin: 0 auto 16px;
}
.wp-caption-text {
  font-size: 13px;
  color: #6B7280;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ==========================================================================
   ご相談・お問い合わせフォーム（page-contact.php）

   フレンチ・テックのトーンをフォーム部品にも適用する。
   ・白背景のまま、極細ボーダー（1px solid #e5e7eb）＋控えめな角丸（6px）
   ・フォーカス時のみアクセントカラーの赤（#D90429）で枠線をハイライトし、
     ごく薄いリング（rgba 0.08）を添えて「どこに入力しているか」を明示する
   ・影・グラデーション等の装飾は入れず、線と余白だけで構成する

   Contact Form 7 等のプラグインへ差し替える場合も、生成される
   input / select / textarea へ .a11-input / .a11-select / .a11-textarea を
   付け直せば見た目をそのまま引き継げるよう、クラス単位で完結させている。
   ========================================================================== */
.a11-contact {
  margin-bottom: 120px;
}
/* 左：フォーム（可変）／右：ご相談の流れ・対応領域（360px） */
.a11-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 56px;
  align-items: start;
}
.a11-contact__main {
  min-width: 0;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB; /* 極薄の境界線（.french-card とトーンを揃える） */
  border-radius: 12px;
  padding: 48px;
}

/* --------------------------------------------------------------------------
   入力項目（ラベル＋入力欄＋補足）
   -------------------------------------------------------------------------- */
.a11-field {
  margin-bottom: 28px;
}
.a11-field__label {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #111827;
}
/* 必須 / 任意のバッジ。塗りは使わず文字色と極細の枠線だけで差を付ける。 */
.a11-field__req,
.a11-field__opt {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  vertical-align: 2px;
}
.a11-field__req {
  color: #D90429;
}
.a11-field__opt {
  color: #9CA3AF;
}
.a11-field__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #6B7280;
}

/* 入力欄・セレクト・テキストエリアで枠線と内側余白を完全に共通化する */
.a11-input,
.a11-select,
.a11-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background-color: #FFFFFF;
  border: 1px solid #e5e7eb; /* 極細のボーダー */
  border-radius: 6px;        /* 控えめな角丸 */
  color: #111827;
  font-family: inherit; /* Noto Sans JP を継承（ブラウザ既定書体に戻らないように） */
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.a11-input::placeholder,
.a11-textarea::placeholder {
  color: #9CA3AF;
}
/* ホバーはごくわずかに線を締めるだけ（赤はフォーカス時のみに取っておく） */
.a11-input:hover,
.a11-select:hover,
.a11-textarea:hover {
  border-color: #D1D5DB;
}
/* フォーカス：アクセントカラーの赤で枠線をハイライト */
.a11-input:focus,
.a11-select:focus,
.a11-textarea:focus {
  outline: none;
  border-color: #D90429;
  box-shadow: 0 0 0 3px rgba(217, 4, 41, 0.08);
}
/* 入力途中の不正値には枠線だけで静かに知らせる（送信前に赤くしない） */
.a11-input:not(:placeholder-shown):invalid,
.a11-textarea:not(:placeholder-shown):invalid {
  border-color: #F0A6B2;
}
.a11-textarea {
  min-height: 180px;
  resize: vertical;
}

/* セレクト：標準の矢印を消し、CSSのみで細い山形（chevron）を描く */
.a11-select-wrap {
  position: relative;
}
.a11-select {
  padding-right: 44px; /* 矢印と文字が重ならない分だけ右を空ける */
  cursor: pointer;
}
/* 未選択（placeholder の option）のときだけ文字色を薄くする */
.a11-select:invalid {
  color: #9CA3AF;
}
.a11-select option {
  color: #111827;
}
.a11-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1px solid #6B7280;
  border-bottom: 1px solid #6B7280;
  transform: rotate(45deg);
  pointer-events: none; /* 矢印の上をクリックしても select が開くように */
  transition: border-color 0.25s ease;
}
.a11-select-wrap:focus-within::after {
  border-color: #D90429;
}

/* --------------------------------------------------------------------------
   送信ボタン（Apple 風：余白の広いピル型・赤基調）
   既存の .btn（白地＋黒枠）とは別物なので独立クラスにしている。
   -------------------------------------------------------------------------- */
.a11-form__foot {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #E5E7EB;
}
.a11-submit {
  display: inline-block;
  padding: 16px 48px;
  background-color: #D90429;
  border: 1px solid #D90429;
  border-radius: 980px; /* Apple 系のピル型 */
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.a11-submit:hover {
  background-color: #B00320;
  border-color: #B00320;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(217, 4, 41, 0.18);
}
.a11-submit:active {
  transform: translateY(0);
  box-shadow: none;
}
.a11-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 4, 41, 0.22);
}
.a11-form__note {
  margin: 20px 0 0;
  font-size: 12px;
  color: #6B7280;
}

/* --------------------------------------------------------------------------
   右カラム：ご相談の流れ／主な対応領域
   -------------------------------------------------------------------------- */
.a11-contact__aside {
  min-width: 0;
}
.a11-contact__aside-title {
  margin: 0 0 20px;
  font-size: 18px;
}
.a11-contact__aside-title + * {
  margin-top: 0;
}
.a11-flow {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}
.a11-flow__item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid #E5E7EB;
}
.a11-flow__item:last-child {
  border-bottom: 1px solid #E5E7EB;
}
.a11-flow__num {
  flex: 0 0 auto;
  font-family: 'Noto Sans JP', sans-serif; /* 明朝体をやめてサンセリフへ統一 */
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #D90429; /* 連番のみアクセントを残す（2文字なので重くならない） */
  line-height: 1.6;
}
.a11-flow__body {
  min-width: 0;
}
.a11-flow__head {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
.a11-flow__text {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #4B5563;
  line-height: 1.8;
}
.a11-contact__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.a11-contact__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: #4B5563;
  line-height: 1.9;
}
.a11-contact__list li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 6px;
  height: 1px;
  background-color: #D90429;
}

/* スマホ・タブレット：2カラムを解除し、フォームが上・補足情報が下の縦積みに */
@media screen and (max-width: 900px) {
  .a11-contact {
    margin-bottom: 80px;
  }
  .a11-contact__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .a11-contact__main {
    padding: 32px 24px;
  }
  .a11-submit {
    display: block;
    width: 100%;
    padding: 16px 24px;
    text-align: center;
  }
}

/* 動きを減らす設定：ボタンの浮き上がりを無効化する */
@media (prefers-reduced-motion: reduce) {
  .a11-submit {
    transition: none;
  }
  .a11-submit:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================================
   Contact Form 7 の出力（page-contact.php / .a11-cf7 スコープ）

   CF7 は .wpcf7-form-control 系の独自クラスを持つマークアップを吐くため、
   上の .a11-input / .a11-select / .a11-textarea / .a11-submit は当たらない。
   ここでは同じ値（極細ボーダー #e5e7eb・角丸 6px・フォーカス時に赤 #D90429）
   を CF7 側のセレクタへ写して見た目を揃える。

   すべて .a11-cf7 の子孫に限定しているので、既存クラスの定義には一切
   影響しない。CF7 の管理画面でクラスを付け直す必要もない。
   ========================================================================== */
/* CF7 が挿入する隠しフィールド用の <p> が余白を作らないように */
.a11-cf7 .wpcf7-form > p:empty {
  display: none;
}
/* 項目間の余白。CF7 の既定テンプレートは 1 項目 = 1 つの <p>。 */
.a11-cf7 .wpcf7-form p {
  margin: 0 0 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #111827; /* ラベル行（.a11-field__label 相当） */
}
.a11-cf7 .wpcf7-form label {
  display: block;
  font-weight: 500;
}
/* ラベル直後の改行は行間だけ確保する（<br> の高さを余白として使う） */
.a11-cf7 .wpcf7-form label br,
.a11-cf7 .wpcf7-form p > br {
  line-height: 2.2;
}
.a11-cf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: 10px;
}

/* 入力欄・セレクト・テキストエリア（.a11-input 系と同一の指定） */
.a11-cf7 .wpcf7-form input[type="text"],
.a11-cf7 .wpcf7-form input[type="email"],
.a11-cf7 .wpcf7-form input[type="tel"],
.a11-cf7 .wpcf7-form input[type="url"],
.a11-cf7 .wpcf7-form input[type="number"],
.a11-cf7 .wpcf7-form input[type="date"],
.a11-cf7 .wpcf7-form select,
.a11-cf7 .wpcf7-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background-color: #FFFFFF;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #111827;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400; /* 親の <p> から継承する太字を打ち消す */
  line-height: 1.7;
  letter-spacing: 0.03em;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.a11-cf7 .wpcf7-form input::placeholder,
.a11-cf7 .wpcf7-form textarea::placeholder {
  color: #9CA3AF;
}
.a11-cf7 .wpcf7-form input[type="text"]:hover,
.a11-cf7 .wpcf7-form input[type="email"]:hover,
.a11-cf7 .wpcf7-form input[type="tel"]:hover,
.a11-cf7 .wpcf7-form select:hover,
.a11-cf7 .wpcf7-form textarea:hover {
  border-color: #D1D5DB;
}
.a11-cf7 .wpcf7-form input:focus,
.a11-cf7 .wpcf7-form select:focus,
.a11-cf7 .wpcf7-form textarea:focus {
  outline: none;
  border-color: #D90429;
  box-shadow: 0 0 0 3px rgba(217, 4, 41, 0.08);
}
.a11-cf7 .wpcf7-form textarea {
  min-height: 180px;
  resize: vertical;
}
/*
 * セレクトの矢印。プレーン版は .a11-select-wrap::after で描いていたが、
 * CF7 の出力にはラップ要素を足せないため、同じ形の山形を SVG の
 * background-image として持たせる（色・位置・太さは揃えている）。
 */
.a11-cf7 .wpcf7-form select {
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8'%3E%3Cpath d='M1 1.5l4.5 4.5L10 1.5' fill='none' stroke='%236B7280' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

/* チェックボックス・ラジオは既定の外観を使い、間隔だけ整える */
.a11-cf7 .wpcf7-checkbox .wpcf7-list-item,
.a11-cf7 .wpcf7-radio .wpcf7-list-item {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
}
.a11-cf7 .wpcf7-list-item input {
  margin-right: 8px;
}

/* --------------------------------------------------------------------------
   送信ボタン（.a11-submit と同一の見た目）とスピナー
   -------------------------------------------------------------------------- */
.a11-cf7 .wpcf7-form input[type="submit"] {
  display: inline-block;
  width: auto;
  margin-top: 12px;
  padding: 16px 48px;
  background-color: #D90429;
  border: 1px solid #D90429;
  border-radius: 980px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.a11-cf7 .wpcf7-form input[type="submit"]:hover {
  background-color: #B00320;
  border-color: #B00320;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(217, 4, 41, 0.18);
}
.a11-cf7 .wpcf7-form input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}
.a11-cf7 .wpcf7-form input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 4, 41, 0.22);
}
/* 送信中はボタンを押せないことが分かるよう彩度を落とす */
.a11-cf7 .wpcf7-form.submitting input[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}
.a11-cf7 .wpcf7-spinner {
  margin: 0 0 0 16px;
  background-color: #D90429;
}
/* 送信ボタンを含む <p> だけは下の余白を詰める（区切り線を上に置くため） */
.a11-cf7 .wpcf7-form p:has(input[type="submit"]) {
  margin-top: 40px;
  margin-bottom: 0;
  padding-top: 32px;
  border-top: 1px solid #E5E7EB;
}

/* --------------------------------------------------------------------------
   バリデーション・送信結果のメッセージ
   CF7 既定の太い枠線は使わず、左に細い罫を引くだけの静かな表現にする。
   -------------------------------------------------------------------------- */
.a11-cf7 .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  color: #D90429;
}
.a11-cf7 .wpcf7-form-control.wpcf7-not-valid {
  border-color: #F0A6B2;
}
.a11-cf7 .wpcf7-response-output {
  margin: 24px 0 0 !important; /* CF7 本体のインラインに近い既定値を上書き */
  padding: 16px 20px !important;
  border: 0 !important;
  border-left: 2px solid #D1D5DB !important;
  border-radius: 0 6px 6px 0;
  background-color: #F9FAFB;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  color: #374151;
}
.a11-cf7 .wpcf7-form.sent .wpcf7-response-output {
  border-left-color: #D90429 !important;
}
.a11-cf7 .wpcf7-form.invalid .wpcf7-response-output,
.a11-cf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.a11-cf7 .wpcf7-form.failed .wpcf7-response-output,
.a11-cf7 .wpcf7-form.aborted .wpcf7-response-output {
  border-left-color: #F0A6B2 !important;
}

/* スマホ・タブレット：送信ボタンを全幅に（.a11-submit と同じ扱い） */
@media screen and (max-width: 900px) {
  .a11-cf7 .wpcf7-form input[type="submit"] {
    display: block;
    width: 100%;
    padding: 16px 24px;
    text-align: center;
  }
}

/* 動きを減らす設定：ボタンの浮き上がりを無効化する */
@media (prefers-reduced-motion: reduce) {
  .a11-cf7 .wpcf7-form input[type="submit"] {
    transition: none;
  }
  .a11-cf7 .wpcf7-form input[type="submit"]:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ==========================================================================
   街角窓口受付システムの設計・展開（Street Counter Kiosk）
   フレンチ・テックの原則（白背景／極細ボーダー 1px #E5E7EB ／角丸 12px ／
   十分な余白）で、端末イメージと「4つの画面展開」を構成する。

   ・.a11-kiosk__shots … 実装画面 4 枚を並べるグリッド。PC は横並び4列、
     900px 未満は縦1列にフォールバック。
   ・画面間の矢印は .a11-kiosk__shot::before の擬似要素で描く
     （PC は列間の gap に「›」、スマホは上の余白に「↓」）。装飾用の空タグは置かない。
   ・端末イメージ・各画面ともに角丸 12px（Tailwind の rounded-xl 相当）＋控えめなシャドウ。
   ・JavaScript は使わない。
   ========================================================================== */
.a11-kiosk {
  /* 直前の .a11-net が padding-bottom: 100px を持つため、上余白は持たせない */
  padding: 0 0 100px;
  scroll-margin-top: 40px; /* #street-counter-kiosk へのジャンプ時の余白 */
}

/* 見出しブロック（.a11-net__* と同じトーン：太字で押し切らず字間で整える） */
.a11-kiosk__eyebrow {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #6B7280;
  text-transform: none;
}
.a11-kiosk__title {
  margin: 20px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #111827;
}
.a11-kiosk__lead {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: 15px;
  color: #4B5563;
}
/* 本文中の強調は太字で押し切らず、色だけを一段濃くして示す。 */
.a11-kiosk__lead strong {
  font-weight: 500;
  color: #111827;
}

/* 端末イメージ（中央寄せ・角丸・控えめなシャドウ）
   実寸は正方形（1024 × 1024）想定。縦横比を先に確保して読み込み時の
   ガタつきを防ぎ、PC では幅の上限を 460px に抑えて主役を食わないようにする。 */
.a11-kiosk__visual {
  margin-top: 56px;
}
.a11-kiosk__figure {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 0;
}
.a11-kiosk__img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid #E5E7EB; /* 極細の枠線でカード本体とトーンを揃える */
  border-radius: 12px; /* rounded-xl 相当 */
  background-color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 控えめなシャドウ */
}
.a11-kiosk__caption {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.8;
  color: #6B7280;
  text-align: center;
}

/* --------------------------------------------------------------------------
   4つの画面展開（実装画面のスクリーンショットによる視覚的ワークフロー）

   テキストのステップ記述はやめ、実画面 4 枚（qr-01 〜 qr-04）を左から右へ
   並べる。画面そのものが横に流れることでプロセスの進行を感じさせる構成。

   ・.a11-kiosk__shots … PC は横並び4列 → 1100px 以下は2列 → 900px 未満は縦1列。
   ・スクリーンショットは縦横比がまちまちなので、共通比率の枠
     （.a11-kiosk__shot-frame, 3:4）に object-fit: contain で収める。
     切り抜かずに全画面を見せつつ、4枚の高さと余白がそろう。
   ・進行方向の矢印は .a11-kiosk__shot::before の擬似要素（PC「›」／スマホ「↓」）。
   -------------------------------------------------------------------------- */
.a11-kiosk__flow-title {
  margin: 88px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #111827;
}
.a11-kiosk__flow-lead {
  max-width: 720px;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: #6B7280;
}
.a11-kiosk__shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* gap は矢印の置き場も兼ねる。::before の left / width と同値にしている。 */
  gap: 40px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  align-items: stretch; /* 説明文の行数が違っても4枚の高さを揃える */
}
.a11-kiosk__shot {
  position: relative;
  display: flex; /* 中の figure を li の高さいっぱいに伸ばす */
}
/* 2枚目以降の左側（列間の gap の中央）に進行方向の矢印を置く。
   細いシェブロン1つだけの控えめな表現で、情報の流れる向きを示す。 */
.a11-kiosk__shot + .a11-kiosk__shot::before {
  content: '\203A'; /* › */
  position: absolute;
  top: 50%;
  left: -40px; /* gap と同値 */
  width: 40px;
  transform: translateY(-50%);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: #D1D5DB;
  text-align: center;
}

/* 画面カード本体（白背景・極細ボーダー・角丸12px・控えめなシャドウ） */
.a11-kiosk__shot-figure {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 26px 24px 28px;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB; /* 極細のボーダー */
  border-radius: 12px; /* rounded-xl 相当 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* 控えめなシャドウ */
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* 上品な浮き上がり。タッチ端末ではホバー状態が残るため、
   マウス等のホバー可能なポインタにのみ適用する。 */
@media (hover: hover) {
  .a11-kiosk__shot-figure:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
    border-color: #D1D5DB;
  }
}

/* ステップ番号（.a11-gov__step と同じ表現：赤は使わず字間で整える） */
.a11-kiosk__shot-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 18px;
}
.a11-kiosk__shot-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #9CA3AF;
  text-transform: none;
}
.a11-kiosk__shot-num {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #111827;
}

/* 画像の枠。比率を先に確保して読み込み時のガタつきを防ぐ。
   縦長・横長が混在するため contain で全体を見せ、余白は淡い地色で埋める。 */
.a11-kiosk__shot-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 10px;
  overflow: hidden;
  background-color: #FAFAFA;
  border: 1px solid #F3F4F6;
  border-radius: 8px;
}
.a11-kiosk__shot-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* 画像から読み取れる動作を、細い罫線で区切って短く添える。
   画像の枠は4枚とも同じ比率なので、余白を固定すれば罫線と見出しの高さは
   自然にそろう（説明文の行数差はカード下端の余白で吸収する）。 */
.a11-kiosk__shot-caption {
  display: block;
  margin-top: 0;
  padding-top: 20px;
}
.a11-kiosk__shot-title {
  display: block;
  padding-top: 20px;
  border-top: 1px solid #F3F4F6;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #111827;
}
.a11-kiosk__shot-text {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.9;
  color: #6B7280;
}

/* 4画面を貫く進行の軸。1px の罫線の中央にラベルを置くだけの控えめな表現。 */
.a11-kiosk__rail {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 44px 0 0;
}
.a11-kiosk__rail::before,
.a11-kiosk__rail::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
}
.a11-kiosk__rail::before {
  background-image: linear-gradient(to right, rgba(229, 231, 235, 0), #E5E7EB);
}
.a11-kiosk__rail::after {
  background-image: linear-gradient(to right, #E5E7EB, rgba(229, 231, 235, 0));
}
.a11-kiosk__rail-label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #9CA3AF;
}
.a11-kiosk__rail-label::after {
  content: '\00A0\00A0\203A\203A\203A'; /* ››› で流れる向きを示す */
  color: #D1D5DB;
}

/* タブレット：4列は窮屈になるため2列×2行にし、矢印は3枚目の前でだけ切る */
@media screen and (max-width: 1100px) and (min-width: 901px) {
  .a11-kiosk__shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
  /* 3枚目（2行目の先頭）は左に前のカードが無いので矢印を出さない */
  .a11-kiosk__shot:nth-child(3)::before {
    content: none;
  }
}

/* スマートフォン：縦1列に落とし、矢印を「↓」としてカードの上に置く */
@media screen and (max-width: 900px) {
  .a11-kiosk__visual {
    margin-top: 40px;
  }
  .a11-kiosk__flow-title {
    margin-top: 64px;
  }
  .a11-kiosk__shots {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 36px;
  }
  .a11-kiosk__shot-figure {
    padding: 22px 20px 24px;
  }
  /* 縦1列ではカードの高さがそろわないため、下端寄せをやめて固定の余白に戻す */
  .a11-kiosk__shot-caption {
    margin-top: 0;
  }
  .a11-kiosk__shot + .a11-kiosk__shot::before {
    content: '\2193'; /* ↓ */
    display: flex;
    align-items: center;
    justify-content: center;
    top: -48px; /* gap と同値 */
    left: 50%;
    width: 48px;
    height: 48px;
    font-size: 18px;
    transform: translateX(-50%);
  }
  .a11-kiosk__shot:nth-child(3)::before {
    content: '\2193'; /* タブレット用の打ち消しをここで戻す */
  }
}

/* 画面が狭いほど 3:4 の枠は縦に伸びすぎるため、比率を少しだけ横長へ寄せる */
@media screen and (max-width: 560px) {
  .a11-kiosk__shot-frame {
    aspect-ratio: 4 / 5;
  }
}

/* 動きを減らす設定：移動を伴う演出は行わない */
@media (prefers-reduced-motion: reduce) {
  .a11-kiosk__shot-figure {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .a11-kiosk__shot-figure:hover {
    transform: none;
  }
}

/* ==========================================================================
   共通の英字ラベル（eyebrow）と、その直下に置く見出し

   これまで .a11-net__eyebrow / .a11-kiosk__eyebrow / .a11-gov__en が
   同じ指定を各ブロックで繰り返していた。新しく追加するセクション
   （One Ecosystem / Shared Foundations）と、英字ラベルを後付けした
   既存セクション（Data Driven Automation / Consulting Domains）は
   この共通クラスを使う。
   ・強制大文字（text-transform: uppercase）は使わない。
   ・ウェイトは 400 のまま、字間だけ広げて小さく添える。
   ========================================================================== */
.a11-eyebrow {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #6B7280;
  text-transform: none;
}
/* .section-title の上マージン（88px）をラベル側へ移すための修飾子。
   セクションの先頭がラベルになる場所で使う。 */
.a11-eyebrow--section {
  margin: 88px 0 0;
}
/* 英字ラベルの直下に来る見出し。88px はラベル側が持っているので詰める。 */
.section-title--tight {
  margin-top: 18px;
}
/* .system-showcase は上下の余白を padding 側で持つため、
   ラベルの上マージンは打ち消し、見出しとの間隔だけ残す。 */
.system-showcase .a11-eyebrow--section {
  margin-top: 0;
}
.system-showcase .section-title--tight {
  margin-top: 18px;
}

/* 専用セクションを持たない事業領域が1枚だけ残る場合、PC 2列の .grid では
   左半分しか埋まらず「欠け」に見える。1枚のときだけ全幅へ伸ばし、
   本文の1行が長くなりすぎないよう字幅の上限を設ける。
   （カテゴリー「domains」に投稿を追加して2枚以上になれば従来の2列に戻る） */
.grid > .french-card:only-child {
  grid-column: 1 / -1;
}
.grid > .french-card:only-child p {
  max-width: 720px;
}

/* ==========================================================================
   各プロダクトセクションの中見出し（H3）

   H2 でキャッチコピーを言い切り、その直下の H3 でそのプロダクトの
   核心的な価値を宣言する。3セクションで同じトーンにそろえるため、
   セレクタをまとめて1か所で定義する。
   ・H2（clamp(26px, 2.8vw, 36px)）より一段小さく、本文より一段大きい。
   ・色は本文（#4B5563）ではなく見出しの #111827 を使い、宣言として立てる。
   ========================================================================== */
.a11-net__sub,
.a11-kiosk__sub,
.a11-eco__sub,
.a11-pillars__sub {
  max-width: 720px;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #111827;
}
/* 自治体標準化は sticky な左カラムに収まるため、少しだけ小さく組む。 */
.a11-gov__sub {
  margin: 18px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #111827;
}
/* 左カラムでは H3 が入った分、リード文との間隔を詰める */
.a11-gov__sub + .a11-gov__lead {
  margin-top: 18px;
}

/* ==========================================================================
   One Ecosystem（3プロダクトの全体像）

   個別の機能を並べる前に「基盤 → 連携 → 接点」というひとつの流れを見せる。
   3枚のカードはそれぞれ後段の専用セクションへの内部リンク。
   ・カード全体をリンクにする（<a> を display: flex で組む）。
   ・矢印は .a11-eco__card::after の擬似要素で描くため、装飾用の空タグは置かない。
   ・JavaScript は使わない。
   ========================================================================== */
.a11-eco {
  /* 直前の .hero が padding-bottom: 100px を持つため、上余白は持たせない */
  padding: 0 0 100px;
}
.a11-eco__title {
  margin: 20px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #111827;
}
.a11-eco__lead {
  max-width: 720px;
  margin: 18px 0 0;
  font-size: 15px;
  color: #4B5563;
}
.a11-eco__lead strong {
  font-weight: 500;
  color: #111827;
}

/* 3枚のカード。PC は横並び3列、900px 未満は縦1列。 */
.a11-eco__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  align-items: stretch; /* 文量が違ってもカードの高さをそろえる */
}
.a11-eco__item {
  display: flex; /* 中の <a> を li の高さいっぱいに伸ばす */
}
.a11-eco__card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 32px 30px 56px; /* 下の余白は矢印の置き場 */
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB; /* 極細のボーダー */
  border-radius: 12px; /* rounded-xl 相当 */
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* 前進感は矢印だけで示す（ボタン枠も塗りも持たせない） */
.a11-eco__card::after {
  content: '→';
  position: absolute;
  left: 30px;
  bottom: 26px;
  font-size: 15px;
  line-height: 1;
  color: #9CA3AF;
  transition: color 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) {
  .a11-eco__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
    border-color: #D1D5DB;
  }
  .a11-eco__card:hover::after {
    color: #D90429; /* アクセントレッドは矢印1つに限定する */
    transform: translateX(4px);
  }
}
/* キーボード操作でも同じ強調が得られるようにする */
.a11-eco__card:focus-visible {
  outline: 2px solid #D90429;
  outline-offset: 3px;
}
.a11-eco__label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #9CA3AF;
  text-transform: none;
}
.a11-eco__name {
  margin-top: 16px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #111827;
}
.a11-eco__text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: #4B5563;
}

/* ==========================================================================
   医療連携セクション内の補足ブロック（患者の家族専用ポータル）

   事業領域カードから統合した内容。本題（連携基盤）と混ざらないよう、
   左に1本の罫線を引くだけの控えめな区切りで添える。
   ========================================================================== */
.a11-net__aside {
  max-width: 720px;
  margin: 36px 0 0;
  padding-left: 24px;
  border-left: 1px solid #E5E7EB; /* 極細の区切り線 */
}
.a11-net__aside-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: #111827;
}
.a11-net__aside-text {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: #4B5563;
}

/* ==========================================================================
   Shared Foundations（3プロダクトに共通する価値）

   セキュリティ・UI・運用・データを一度だけ宣言する場所。
   カードで囲わず、1px の罫線で区切った2列の組みにして「土台」らしく置く。
   ========================================================================== */
.a11-pillars {
  /* 直前の .a11-kiosk が padding-bottom: 100px を持つため、上余白は持たせない */
  padding: 0 0 100px;
}
.a11-pillars__title {
  margin: 20px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #111827;
}
.a11-pillars__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #E5E7EB;
}
.a11-pillars__item {
  padding: 36px 40px 36px 0;
  border-bottom: 1px solid #E5E7EB;
}
/* 2列組みのとき、右列の左側に区切り線を1本入れる */
.a11-pillars__item:nth-child(2n) {
  padding-left: 40px;
  border-left: 1px solid #E5E7EB;
}
.a11-pillars__name {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #111827;
}
.a11-pillars__text {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: #4B5563;
}

/* ==========================================================================
   タブレット・スマートフォン（新規セクション分）
   ========================================================================== */
@media screen and (max-width: 900px) {
  .a11-eyebrow--section {
    margin-top: 60px;
  }
  .a11-eco {
    padding-bottom: 72px;
  }
  .a11-eco__list {
    grid-template-columns: 1fr; /* 縦1列 */
    gap: 20px;
    margin-top: 32px;
  }
  .a11-eco__card {
    padding: 28px 24px 52px;
  }
  .a11-eco__card::after {
    left: 24px;
  }
  .a11-pillars {
    padding-bottom: 72px;
  }
  .a11-pillars__list {
    grid-template-columns: 1fr; /* 縦1列 */
    margin-top: 32px;
  }
  .a11-pillars__item {
    padding: 28px 0;
  }
  /* 1列に戻るので、右列用の左罫線と字下げは打ち消す */
  .a11-pillars__item:nth-child(2n) {
    padding-left: 0;
    border-left: 0;
  }
  .a11-net__aside {
    margin-top: 28px;
    padding-left: 18px;
  }
}

/* 動きを減らす設定：移動を伴う演出は行わない */
@media (prefers-reduced-motion: reduce) {
  .a11-eco__card,
  .a11-eco__card::after {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .a11-eco__card:hover {
    transform: none;
  }
  .a11-eco__card:hover::after {
    transform: none;
  }
}

/* 自治体標準化の H2 は製品名（「自治体標準化」）からキャッチコピーへ差し替えたため、
   sticky な左カラムの幅では2行に折り返ることがある。.section-title の
   align-items: center だと赤ドットが2行の中央に落ちてしまうので、
   1行目の高さにそろえ直す（28px × line-height 1.5 の中央あたり）。 */
.a11-gov__title {
  align-items: flex-start;
}
.a11-gov__title .red-dot {
  margin-top: 0.6em;
}