/* ============================================================
   エルタノ GETCH POINT ガイド 共通スタイル
   Tailwind CDN を補完する追加スタイル（モバイルファースト）
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-text-size-adjust: 100%; }

/* タップターゲットは指で押しやすく（44px以上） */
.nav-link,
.btn,
.tap { min-height: 44px; }

/* ------------------------------------------------------------
   ハンバーガーメニュー（スライドイン・ドロワー）
   ------------------------------------------------------------ */
#nav-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#nav-drawer {
  transform: translateX(100%);
  transition: transform .25s ease;
}
body.nav-open #nav-overlay { opacity: 1; pointer-events: auto; }
body.nav-open #nav-drawer { transform: translateX(0); }
body.nav-open { overflow: hidden; }

/* 現在ページのナビをハイライト（main.js が data-active を付与） */
.drawer-link[data-active="true"] {
  background-color: #d1fae5;
  color: #065f46;
  font-weight: 700;
}

/* ------------------------------------------------------------
   表：スマホで横スクロール可能に（見切れ対応）
   ------------------------------------------------------------ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
}
.table-scroll table { width: 100%; border-collapse: collapse; min-width: 480px; }
.table-scroll th,
.table-scroll td {
  padding: .6rem .75rem;
  text-align: left;
  font-size: .9rem;
  border-bottom: 1px solid #eef1f0;
  vertical-align: top;
}
.table-scroll thead th {
  background: #059669;
  color: #fff;
  white-space: nowrap;
  font-weight: 700;
}
.table-scroll tbody tr:nth-child(even) { background: #f7faf8; }
.table-scroll tbody tr:last-child td { border-bottom: none; }
/* 横スクロール可能なことを示すヒント（スマホのみ） */
@media (max-width: 640px) {
  .table-scroll::after {
    content: "← 横にスクロールできます →";
    display: block;
    text-align: center;
    font-size: .7rem;
    color: #9ca3af;
    padding: .35rem;
    background: #f7faf8;
  }
}

/* GP数の強調 */
.gp-num { color: #059669; font-weight: 700; white-space: nowrap; }
.gp-minus { color: #dc2626; font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------
   コンテンツ内の見出し・本文の体裁
   ------------------------------------------------------------ */
.prose-eltano h2 {
  font-size: 1.25rem; font-weight: 700; color: #065f46;
  margin: 1.75rem 0 .75rem; padding-left: .6rem;
  border-left: 5px solid #059669; scroll-margin-top: 5rem;
}
.prose-eltano h3 {
  font-size: 1.05rem; font-weight: 700; color: #065f46;
  margin: 1.25rem 0 .5rem;
}
.prose-eltano p { line-height: 1.85; margin: .6rem 0; }
.prose-eltano ul { margin: .5rem 0 .5rem 1.1rem; list-style: disc; line-height: 1.85; }
.prose-eltano ol { margin: .5rem 0 .5rem 1.3rem; list-style: decimal; line-height: 1.9; }
.prose-eltano a.inline-link { color: #059669; text-decoration: underline; word-break: break-all; }

/* カード */
.card { background:#fff; border:1px solid #e5e7eb; border-radius:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:active { transform: scale(.99); }
@media (hover:hover) {
  .card-hover:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(5,150,105,.15); }
}

/* 注意ボックス */
.callout { border-left: 4px solid; border-radius: .5rem; padding: .9rem 1rem; font-size: .9rem; line-height: 1.8; }
.callout-info { background:#eff6ff; border-color:#60a5fa; color:#1e40af; }
.callout-warn { background:#fff7ed; border-color:#fb923c; color:#9a3412; }
.callout-tip  { background:#ecfdf5; border-color:#059669; color:#065f46; }

/* フロー図（縦並びステップ） */
.flow { counter-reset: step; }
.flow-step { position: relative; padding-left: 3rem; padding-bottom: 1.25rem; }
.flow-step:not(:last-child)::before {
  content:""; position:absolute; left:1.05rem; top:.4rem; bottom:-.4rem; width:2px; background:#a7f3d0;
}
.flow-step::after {
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:0; width:2.1rem; height:2.1rem;
  background:#059669; color:#fff; border-radius:9999px;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem;
}

/* 図解（レート掛け算） */
.calc-chip {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.4rem .7rem; border-radius:.5rem; font-weight:700; font-size:.9rem;
}


/* ============================================================
   公式サイト（/）と統一したヘッダー/フッター用（追加）
   ============================================================ */
.nav-desktop { display: none; }
.nav-mobile-btn { display: inline-flex; }
@media (min-width: 880px) {
  .nav-desktop { display: flex; }
  .nav-mobile-btn { display: none; }
}
.navlink {
  padding: 8px; font-size: 13px; font-weight: 500; color: #4b5563;
  text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent;
}
.navlink:link, .navlink:visited { color: #4b5563; }
.navlink:hover { color: #15803d; }
.navlink.active { color: #15803d; font-weight: 700; border-bottom-color: #15803d; }
@media (hover: hover) {
  .btn-pill-amber:hover { background: #fde68a !important; }
  .footlink:hover { color: #ffffff !important; }
}

/* ===== 2段目ナビ（GPガイド内・PCのみ表示） ===== */
.nav-sub { display: none; }
@media (min-width: 880px) { .nav-sub { display: block; } }
.navlink-sub {
  padding: 5px 9px; font-size: 13px; font-weight: 500; color: #4b5563;
  text-decoration: none; border-radius: 7px; white-space: nowrap;
}
.navlink-sub:link, .navlink-sub:visited { color: #4b5563; }
.navlink-sub:hover { background: #ecfdf5; color: #059669; }
.navlink-sub.active { background: #ecfdf5; color: #059669; font-weight: 700; }

/* ===== モバイルメニュー（公式トップと同一の #drawer 方式） ===== */
.navlink-m { display: block; width: 100%; text-align: left; padding: 13px 14px; font-size: 16px; font-weight: 500; color: #374151; background: transparent; border: none; border-radius: 12px; cursor: pointer; text-decoration: none; }
.navlink-m:link, .navlink-m:visited { color: #374151; }
.navlink-m:hover { background: #ecfdf5; }
.navlink-m.active { color: #15803d; font-weight: 700; background: #ecfdf5; }
#drawer { display: none; border-top: 1px solid #e5e7eb; background: #fff; padding: 8px 14px 16px; }
#drawer.open { display: block; }

/* ドロワー内の配下ページ（使い方→交通費/講習費/現金）インデント表示 */
.navlink-m-sub { padding-left: 34px; font-size: 14px; }
.navlink-m-sub:link, .navlink-m-sub:visited { color: #6b7280; }
.navlink-m-sub.active { color: #15803d; font-weight: 700; }