@charset "utf-8";

/* ============================================================
   JIMTOF 2026 特設サイト
   ・ベースは白（FOOMA と同様）
   ・メインコンテンツは黒基調のハイテク・パネルでメリハリ
   ・アクセント緑は KV「Next Era」の #7ED957
   ============================================================ */

.jimtof-lp {
  --jt-accent:      #7ED957;   /* KV「Next Era」グリーン rgb(126,217,87) */
  --jt-accent-2:    #4fd06a;
  --jt-accent-deep: #2fa84c;   /* ソディックブランドグリーン */
  --jt-dark:        #070a07;   /* パネルの黒 */
  --jt-dark-2:      #0d110c;
  --jt-p-ink:       #ffffff;   /* 暗パネル上の見出し文字 */
  --jt-p-ink-dim:   #f1f5ee;   /* 暗パネル上の本文（視認性UP：ほぼ白） */
  --jt-p-muted:     #b7c2b0;
  --jt-line:        rgba(126, 217, 87, 0.16);
  --jt-line-soft:   rgba(255, 255, 255, 0.09);
  --jt-line-strong: rgba(126, 217, 87, 0.45);
  --jt-glow:        rgba(126, 217, 87, 0.35);
  --jt-base:        #ffffff;   /* ページのベース（白） */
  --jt-ink:         #23291f;   /* 白地の文字 */

  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  background: var(--jt-base);
  color: var(--jt-ink);
  line-height: 1.85;
}

.jimtof-lp a { text-decoration: none; }

/* --- 追従フォーム(position:sticky)を効かせるための overflow 対策 ---
   共通CSS（blockparts.css / common.css / common-5.css）は html・body・main に
   `overflow-x: hidden` を指定している。overflow-x が hidden だと仕様上 overflow-y が
   auto に計算され、その要素がスクロールコンテナ化して sticky が無効になる。
   clip はスクロールコンテナを作らないため、横はみ出し防止を保ったまま sticky が効く。
   （このCSSは JIMTOF ページでのみ読み込まれるため影響はこのページ限定。
     common-5.css の `body{overflow-x:hidden!important}` に勝つため !important 指定） */
html:has(main.jimtof-lp),
body:has(main.jimtof-lp) {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
main.jimtof-lp {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* ページ全体を 2 カラムに（左＝コンテンツ列 / 右＝申込フォーム列）。
   申込フォームは KV の時点から見え、スクロールに追従する。 */
.jimtof-layout {
  width: calc(100% - 48px);
  max-width: 1540px;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 40px;
  align-items: start;
}

.jimtof-left { min-width: 0; }

/* 左列内のセクションは列いっぱいに広げる */
.jimtof-hero,
.jimtof-main,
.jimtof-access {
  width: 100%;
}

/* ============================================================
   ヒーロー（キービジュアル） ― 白ベース
   ============================================================ */
.jimtof-hero {
  padding: 0 0 8px;
  text-align: center;
}

.jimtof-hero__head {
  display: flex;
  justify-content: center;
  margin: 0 0 40px;
}

.jimtof-hero__logo {
  width: 580px;
  max-width: 82%;
  height: auto;
  margin: 0;
  display: block;
}

.jimtof-hero__frame {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

.jimtof-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* コーナーブラケット（「」型のテック演出のあしらい） */
.jimtof-hero__frame::before,
.jimtof-hero__frame::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid var(--jt-accent);
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
}
.jimtof-hero__frame::before {
  top: 14px; left: 14px;
  border-right: none; border-bottom: none;
}
.jimtof-hero__frame::after {
  bottom: 14px; right: 14px;
  border-left: none; border-top: none;
}

.jimtof-hero__cta { display: none; }

/* ============================================================
   ダーク・パネル共通（メイン & アクセス）
   ============================================================ */
.jimtof-main,
.jimtof-access {
  position: relative;
  border-radius: 0;
  background: var(--jt-dark);
  color: var(--jt-p-ink);
  box-shadow: 0 50px 120px -55px rgba(0, 0, 0, 0.6);
  isolation: isolate;
}

/* グリーングロー（KV の光を再現） */
.jimtof-main::before,
.jimtof-access::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 92% 4%, rgba(126, 217, 87, 0.20) 0%, rgba(126, 217, 87, 0) 46%),
    radial-gradient(90% 60% at 4% 100%, rgba(47, 168, 76, 0.14) 0%, rgba(47, 168, 76, 0) 55%),
    var(--jt-dark);
}

/* メイン（出展製品紹介）の背景グリーンを縦方向へ広げて高級感を演出。
   縦長パネルの中央部が真っ黒にならないよう、左右交互に光源を分散配置する。 */
.jimtof-main::before {
  background:
    radial-gradient(100% 40% at 96% 1%,  rgba(126, 217, 87, 0.26) 0%, rgba(126, 217, 87, 0) 48%),
    radial-gradient(95% 34% at 2% 30%,   rgba(47, 168, 76, 0.17) 0%, rgba(47, 168, 76, 0) 52%),
    radial-gradient(95% 30% at 100% 58%, rgba(126, 217, 87, 0.16) 0%, rgba(126, 217, 87, 0) 52%),
    radial-gradient(95% 34% at 3% 84%,   rgba(47, 168, 76, 0.15) 0%, rgba(47, 168, 76, 0) 52%),
    radial-gradient(100% 38% at 94% 100%,rgba(126, 217, 87, 0.20) 0%, rgba(126, 217, 87, 0) 50%),
    linear-gradient(165deg, rgba(126, 217, 87, 0.06) 0%, rgba(6, 9, 6, 0) 44%),
    var(--jt-dark);
}

/* テックグリッド */
.jimtof-main::after,
.jimtof-access::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(126, 217, 87, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 217, 87, 0.055) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.25) 62%, transparent 100%);
          mask-image: radial-gradient(130% 100% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.25) 62%, transparent 100%);
  opacity: 0.75;
  pointer-events: none;
}

/* ============================================================
   メイン（出展製品紹介 ＋ 追従フォーム）
   ============================================================ */
.jimtof-main {
  margin-top: 44px;
  margin-bottom: 56px;
  padding: 52px 48px 60px;
  overflow: visible;   /* ← sticky を効かせるため hidden にしない */
}

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

.jimtof-content { min-width: 0; }

/* --- 追従フォーム（sticky はグリッドアイテム自身に付ける） --- */
.jimtof-side {
  position: -webkit-sticky;
  position: sticky;
  top: 24px;
  align-self: start;   /* 中身の高さのまま＝グリッドコンテナ内を移動できる */
}

.jimtof-form-card {
  background: linear-gradient(180deg, #141a12 0%, #0e120d 100%);
  /* 枠線は削除（現在風の見栄え＋左メインカラムとのバランス調整）。
     枠がなくなり上端がぼやけるため box-shadow の Y を 24px→12px に詰めて締める。 */
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 12px 60px -30px rgba(0, 0, 0, 0.9);
}

.jimtof-form-card__head {
  position: relative;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--jt-line-soft);
  background: radial-gradient(120% 140% at 100% 0%, rgba(126, 217, 87, 0.16) 0%, rgba(126, 217, 87, 0) 60%);
}

.jimtof-form-card__head::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--jt-accent), var(--jt-accent-deep));
}

.jimtof-form-card__en {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--jt-accent);
  margin-bottom: 4px;
}

.jimtof-form-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--jt-p-ink);
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
}

.jimtof-form-card__note {
  font-size: 0.8rem;
  color: var(--jt-p-muted);
  margin: 6px 0 0;
  line-height: 1.6;
}

/* iframe は白カードに載せて背景とメリハリ */
.jimtof-form-card__frame {
  background: #ffffff;
  padding: 8px;
}

.jimtof-form-card__frame iframe {
  display: block;
  width: 100%;
  /* 画面の高さに応じて自動調整（固定500pxをやめ、ビューポート基準に）。
     sticky 追従時にビューポート内に収まる高さとし、min/max で極端値を抑制。 */
  height: 82vh;
  min-height: 560px;
  max-height: 900px;
  border: 0;
  border-radius: 0;
}

/* ============================================================
   セクション見出し（暗パネル上）
   ============================================================ */
.jt-sec-head { margin-bottom: 42px; text-align: center; }

.jt-sec-en {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--jt-accent);
  margin-bottom: 10px;
}

.jt-sec-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--jt-p-ink);
  line-height: 1.35;
  margin: 0;
  padding-bottom: 16px;
  position: relative;
}

.jt-sec-title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 72px; height: 3px;
  background: linear-gradient(90deg, rgba(126, 217, 87, 0), var(--jt-accent), rgba(126, 217, 87, 0));
}

/* ============================================================
   製品グループ
   ============================================================ */
.jt-group {
  position: relative;
  margin-bottom: 132px;   /* 大項目同士の余白を従来より広く確保 */
}
.jt-group:last-child { margin-bottom: 0; }

/* ============================================================
   大項目（jt-group）のフェードアップ演出
   ・大項目全体（ブロック単位）が透明な状態から徐々に表示され、
     その少し後に、大項目内のコンテンツ（見出し・リード・カード群）が
     まとまってスッと立ち上がることで、大項目ごとの区切りを明確にする。
   ・親（.jt-group）で全体の opacity をフェードし、
     子（内部コンテンツ）を transition-delay 付きの translateY で「後追い」させる。
     opacity は親に集約しているため、全体表示→中身が整列、の2段階に見える。
   ・初期非表示は .jt-anim（JS が付与）が付いている時のみ適用する。
     → JS が動かない環境では常に表示され、本文が消えることはない（保険）。
   ・is-visible は IntersectionObserver（index.html）が付与する。
   ・先方の明確なデザイン要望のため、prefers-reduced-motion では
     動き量（translateY）は控えるが、フェード自体は再生する。
   ============================================================ */
.jt-anim .jt-group {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.jt-anim .jt-group.is-visible {
  opacity: 1;
  transform: none;
}

/* 内部コンテンツは大項目本体より少し遅れて「まとまって」立ち上がる */
.jt-anim .jt-group__head,
.jt-anim .jt-group__lead,
.jt-anim .jt-group .jt-cards {
  transform: translateY(26px);
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.jt-anim .jt-group.is-visible .jt-group__head { transition-delay: 0.20s; }
.jt-anim .jt-group.is-visible .jt-group__lead { transition-delay: 0.30s; }
.jt-anim .jt-group.is-visible .jt-cards      { transition-delay: 0.40s; }
.jt-anim .jt-group.is-visible .jt-group__head,
.jt-anim .jt-group.is-visible .jt-group__lead,
.jt-anim .jt-group.is-visible .jt-cards {
  transform: none;
}

/* アニメーション抑制設定でも、区切りが分かるようフェードは残し、動きだけ控える */
@media (prefers-reduced-motion: reduce) {
  .jt-anim .jt-group {
    transform: none;
    transition: opacity 0.7s ease;
  }
  .jt-anim .jt-group__head,
  .jt-anim .jt-group__lead,
  .jt-anim .jt-group .jt-cards {
    transform: none;
    transition: none;
  }
}

.jt-group__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  /* 左は緑の三角形（::before）のぶんを空ける */
  padding: 14px 20px 14px 40px;
  background:
    linear-gradient(90deg, rgba(126, 217, 87, 0.10) 0%, rgba(126, 217, 87, 0) 62%),
    linear-gradient(180deg, #171c14 0%, #12160f 100%);
  border: 1px solid var(--jt-line);
}

/* 見出し左端の緑の三角形。従来の 4px の縦線に代わるアクセント。
   連番（.jt-group__no）と併用する。
   top/bottom:0 で見出しの高さに追従するため、タイトルが 2 行に
   折り返しても頂点は常に上下中央にくる。 */
.jt-group__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  background: var(--jt-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.jt-group__no {
  flex: 0 0 auto;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--jt-accent);
}

.jt-group__title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--jt-line-strong);
}

/* メルマガ等からのアンカーリンク(#01〜#07)でジャンプした際、
   モバイル時の固定ヘッダー(--navbar-height)に見出しが隠れないための余白 */
.jt-group__title,
.jt-sec-title {
  scroll-margin-top: 70px;
}

/* ------------------------------------------------------------
   大項目の連番（01〜06）は表示する。
   ※ 五月雨公開で連番が飛ぶのを避けるため一時的に非表示にしていたが、
     全項目が出揃ったため再表示に戻した。
   見出し左の緑の三角形アクセント（.jt-group__head::before）は
   そのまま併用し、番号とタイトルの間の区切り線は付けない。
   ------------------------------------------------------------ */
.jt-group__title {
  padding-left: 0;
  border-left: 0;
}

/* タイトル前半の説明句を細字にして、後半の製品名（太字）を強調しメリハリを付ける */
.jt-group__title-thin {
  font-weight: 400;
}

.jt-group__lead {
  font-size: 1.1rem;
  color: var(--jt-p-ink-dim);
  margin: 0 0 26px;
  text-align: justify;
}

/* --- カードリスト（構成案どおり 画像＋テキストの横並びを縦に積む） --- */
.jt-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.jt-card {
  display: flex;
  flex-direction: row;          /* 画像（左）＋テキスト（右）の横並び */
  align-items: stretch;
  background: linear-gradient(180deg, #171c14 0%, #12160f 100%);
  border: 1px solid var(--jt-line-soft);
  border-radius: 0;
  overflow: hidden;
}
/* ホバー演出は削除（クリック可能なのは「詳しくはこちら」ボタンのみのため） */

/* 画像を右側に配置するバリエーション（article に付与） */
.jt-card--media-right {
  flex-direction: row-reverse;
}

.jt-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 24px;
}

.jt-card__text {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--jt-p-ink-dim);
  margin: 0 0 18px;
  text-align: justify;
}

.jt-card__text strong,
.jt-group__lead strong { color: var(--jt-accent); font-weight: 700; }

.jt-model { color: var(--jt-accent); font-weight: 700; }

/* テキスト・ボタンは上寄せ */
.jt-card__body { justify-content: flex-start; }

/* ============================================================
   画像パネル ／ 画像プレースホルダ（画像準備中）
   ・画像は width:100% ＋ height:auto で掲載する。object-fit による
     トリミングを行わないため、縦横比は元のまま・見切れも発生しない。
   ・画像の四辺にパディングを取り、テキスト列や外周と詰まって見えないようにする。
   ・背景はグラデーションを使わずフラット（画像の周囲に色ムラが出ると
     不自然に見えるため）。暗いパネルはカード背景をそのまま活かす。
   ============================================================ */
.jt-card__media {
  position: relative;
  flex: 0 0 50%;
  max-width: 50%;
  align-self: stretch;        /* 画像がない（プレースホルダ）場合はカード全高 */
  min-height: 200px;
  display: flex;              /* 画像をパネル内で中央に配置 */
  align-items: center;
  justify-content: center;
  padding: 0;                 /* 画像は余白なしでパネルいっぱいに表示 */
  box-sizing: border-box;     /* パディングを含めて 50%（テキスト列と等幅を維持） */
  background: transparent;    /* グラデーション廃止（カード背景をそのまま活かす） */
  overflow: hidden;
}

.jt-card__media img {
  width: 100%;
  max-width: 100%;
  height: auto;               /* 縦横比そのまま＝見切れなし */
  display: block;
}

/* 画像入りパネルは「画像」の高さに収め、テキストの先頭と上端を揃える。
   テキストが長いカードでパネルだけが極端に縦長になり、余白だけの面が
   できるのを避けるため。:has() 非対応の古い環境では align-self:stretch の
   ままとなり、パネル内の余白が増えるだけでレイアウトは崩れない。
   margin-top は jt-card__body の padding-top（22px）と揃えるためのもの。 */
.jt-card__media:has(img) {
  align-self: flex-start;
  align-items: flex-start;    /* min-height 分の余白が生じても画像を上端に固定 */
  margin-top: 22px;
}

/* 白背景の図版・製品カット用の明るいパネル */
.jt-card__media--light {
  background: #ffffff;
}

.jt-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--jt-p-muted);
}

.jt-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(126, 217, 87, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 217, 87, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
}

.jt-ph::after {
  content: "";
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  border: 1px dashed rgba(126, 217, 87, 0.25);
  border-radius: 0;
  pointer-events: none;
}

.jt-ph__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--jt-accent);
  display: grid;
  place-items: center;
  color: var(--jt-accent);
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 18px -4px var(--jt-glow);
}

.jt-ph__label {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.jt-ph__jp {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  color: var(--jt-p-ink-dim);
  letter-spacing: 0.06em;
}

.jt-media-note {
  position: absolute;
  left: 12px; bottom: 12px; right: 12px;
  z-index: 1;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--jt-p-muted);
  text-align: center;
}

/* ============================================================
   「詳しくはこちら」ボタン
   ============================================================ */
.jt-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.62em 1.4em;
  border: 1px solid var(--jt-line-strong);
  border-radius: 999px;
  background: rgba(126, 217, 87, 0.05);
  color: var(--jt-accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.jt-btn::after {
  content: "→";
  font-size: 0.95em;
  transition: transform 0.25s ease;
}

.jt-btn:hover {
  background: linear-gradient(120deg, var(--jt-accent), var(--jt-accent-deep));
  color: #05210b;
  border-color: var(--jt-accent);
  box-shadow: 0 0 22px -4px var(--jt-glow);
  text-decoration: none;
}

.jt-btn:hover::after { transform: translateX(3px); }

/* ============================================================
   アクセス・ブース情報（FOOMA と同様：暗背景＋白カード）
   ============================================================ */
.jimtof-access {
  margin-bottom: 64px;
  padding: 52px 48px 56px;
  overflow: hidden;
}

/* アクセスの背景に KV に準じたハイテク画像（黒＋グリーンの光線）を敷く。
   白カードが読みやすいよう暗幕グラデーションを重ねる。 */
.jimtof-access::before {
  background:
    linear-gradient(180deg, rgba(6, 9, 6, 0.42) 0%, rgba(6, 9, 6, 0.5) 55%, rgba(6, 9, 6, 0.62) 100%),
    url('../img/access-bg.jpg') center center / cover no-repeat,
    var(--jt-dark);
}

.jt-access__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

/* 情報テーブル（半透明の白カード：FOOMA と同様） */
.jt-access__info {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 0;
  padding: 28px;
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.8);
}

.jt-access__info table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}

.jt-access__info th,
.jt-access__info td {
  padding: 8px 8px;      /* 行間を従来（16px）の半分に詰めてまとまりよく */
  border-bottom: 1px solid #e8ece5;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;      /* セル内の複数行も詰める */
}

.jt-access__info tr:last-child th,
.jt-access__info tr:last-child td { border-bottom: none; }

.jt-access__info th {
  white-space: nowrap;
  width: 6em;
  color: var(--jt-accent-deep);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.jt-access__info td { color: #333; }

.jt-access__info td strong {
  color: #111;
  font-size: 1.1rem;
  font-weight: 700;
}

/* ブース図（白カード） */
.jt-access__map figure { margin: 0; }

.jt-access__map-frame {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border-radius: 0;
  padding: 28px;
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.8);
}

.jt-access__map-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.jt-access__map figcaption {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--jt-p-ink-dim);
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1080px) {
  .jimtof-layout {
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: 32px;
  }
}

@media (max-width: 992px) {
  /* 2カラムを解除：フォームは本文の下（末尾）に回り、ヒーローにCTAを出す */
  .jimtof-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .jimtof-side { position: static; }
  .jimtof-main {
    padding: 40px 28px 48px;
  }
  .jimtof-access {
    padding: 40px 28px 44px;
  }

  /* ヒーロー内に「申し込みへ」ボタン */
  .jimtof-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 22px;
    padding: 0.9em 1.9em;
    border-radius: 999px;
    background: linear-gradient(120deg, #97e874, var(--jt-accent));
    color: #04160a;
    font-weight: 800;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 6px 26px -6px rgba(47, 168, 76, 0.5);
  }
  .jimtof-hero__cta::after { content: "↓"; }
}

@media (max-width: 720px) {
  /* モバイル：外側の余白をなくし、各セクションを左右均等（中央寄せ）で
     ほぼ全幅に。キービジュアルを極力 100% の大きさで見せる。 */
  .jimtof-layout {
    width: 100%;
    margin-top: 20px;
  }
  .jimtof-hero,
  .jimtof-main,
  .jimtof-access {
    width: calc(100% - 16px);   /* 左右8pxずつ＝ほぼ全幅かつ左右均等 */
    margin-left: auto;
    margin-right: auto;
  }
  .jimtof-hero { padding: 20px 0 4px; }
  /* KV 周りのシャドウのあしらいは省く */
  .jimtof-hero__frame { box-shadow: none; }
  .jimtof-main { margin-top: 28px; padding: 34px 18px 40px; }
  .jimtof-access { padding: 34px 18px 38px; }
  .jimtof-hero__frame::before,
  .jimtof-hero__frame::after { width: 22px; height: 22px; }
  .jt-sec-title { font-size: 1.55rem; }
  .jt-group__title { font-size: 1.14rem; }
  .jt-group__no { font-size: 2rem; }
  /* 三角形も見出しの縮小に合わせて一回り小さくする */
  .jt-group__head { padding: 12px 16px 12px 30px; }
  .jt-group__head::before { width: 15px; }
  .jt-card { flex-direction: column; }
  /* 縦積みでは画像の高さがそのままパネルの高さになる（比率固定はしない）。
     画像のないプレースホルダのみ min-height（200px）で高さを確保する。
     縦積み時の align-self は横方向の揃えになるため、いずれのパネルも
     auto（＝カード幅いっぱい）に戻す。 */
  .jt-card__media,
  .jt-card__media:has(img) {
    flex: none;
    max-width: 100%;
    align-self: auto;
    padding: 16px;
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .jimtof-main { padding: 28px 14px 34px; }
  .jimtof-access { padding: 28px 14px 32px; }
  .jt-group__head { gap: 12px; }
  .jimtof-form-card__frame iframe { height: 85vh; min-height: 520px; }
  .jt-access__info { padding: 4px 18px; }
}