/* ================================
   Reset / Base Styles
================================ */

body {
  background:#f8fafc;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color:#111827;
}


/* =========================================================
   3. Layout (ヘッダー、フッター、全体のコンテナ)
   ※見た目/適用順を変えないため、移動はせず「位置に印」を付けて整理
========================================================= */

/* --- Container --- */

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

/* --- Header --- */

.header {
  background:#fff;
  padding:22px 22px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.header h1 {
  margin:0;
}

.sub {
  margin:6px 0 0;
  color:#6b7280;
  font-size:13px;
}

/* --- Grid --- */

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  margin-top:16px;
}

/* --- Card --- */

.card {
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 8px 16px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  padding:16px;
}

.card.wide {
  grid-column:1 / -1;
}

/* STEP1 横長：上段は項目を横並び（PC） */
.step1Fields {
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.step1Fields .field label {
  margin-top:0;
}



h2 {
  margin:0 0 12px;
  font-size:18px;
}

h3{
  margin:16px 0 8px;
  font-size:14px;
  color:#374151;
}


/* =========================================================
   4. Components - Forms (label / select / input / textarea)
   ※見た目/挙動を変えないため、今回は「範囲の明確化」だけ
========================================================= */


/* --- Form Label --- */

label{
  display:block;
  margin-top:12px;
  font-weight:600;
  font-size:13px;
  color:#111827;
}


/* --- Form Controls (select/textarea/input) --- */

select, textarea, input {
  width:100%;
  margin-top:8px;
  padding:10px;
  box-sizing:border-box;
  border-radius:10px;
  border:1px solid #e5e7eb;
  font-size:14px;
}

button {
  width:auto;
  margin-top:8px;
  padding:10px;
  box-sizing:border-box;
  border-radius:10px;
  border:1px solid #e5e7eb;
  font-size:14px;
}


/* --- Textarea --- */

textarea {
  min-height:92px;
  resize:vertical;
}

/* --- Result textarea --- */

#result {
  min-height:320px;
}

.buttons {
  display:flex;
  gap:10px;
  margin-top:12px;
}

/* removed global button flex reset */

/* =========================================================
   4. Components - Buttons (CTA / secondary / clear / copy)
   ※見た目/挙動を変えないため、適用順は動かさず
   - 競合しやすいセレクタの明確化
   - 明らかな重複だけ削除
========================================================= */


/* --- Primary (Generate) --- */

#generate {
  background:#2563eb;
  color:#fff;
}


/* --- Secondary (generic) --- */

.secondary {
  background: var(--chap-gray-bg);
  color: rgba(0,0,0,.78);
  border: 1px solid rgba(17,24,39,.12);
}

.secondary:hover{
  background: var(--chap-gray-bg-hover);
}

.copyMain, #copy, #clearAll {
  width:100%;
}

.opts {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}


/* --- Options (checkbox/radio) --- */

.opt {
  font-weight:600;
  color:#374151;
  display:flex;
  gap:8px;
  align-items:center;
}


/* --- Option Input (checkbox/radio input) --- */

.opt input {
  width:auto;
  margin:0;
}

.hint {
  color:#6b7280;
  font-size:13px;
  margin-top:10px;
}

/* --- Footer --- */

.footer {
  margin:18px 0 8px;
  color:#6b7280;
  text-align:center;
}



/* Step1 should stay horizontal while the page is still in 2-column layout (desktop) */



/* --- Description under title --- */

.desc {
  color:#6b7280;
  font-size:13px;
  margin:6px 0 12px;
  line-height:1.5;
}


/* --- Mono (code) --- */

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background:#f3f4f6;
  padding:2px 6px;
  border-radius:6px;
  color:#111827;
}

.varRow {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.varList {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}

.chip small {
  font-weight:600;
  color:#6b7280;
}

.chip .x {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#e5e7eb;
  color:#111827;
  font-weight:900;
}

#insertVar {
  background:#111827;
  color:#fff;
}



/* v5 additions */

/* =========================================================
   4. Components - Popular Templates (tabs + exCard)
   ※見た目/挙動を変えないため、適用順は動かさず
   - 範囲の明確化（コメント）
   - 完全一致の重複だけ削除
========================================================= */



.exGrid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.exCard{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: 0 8px 16px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}

.exCard:hover{
  transform: translateY(var(--chap-hover-lift-y, -1px));
  box-shadow: var(--chap-hover-lift-shadow, 0 10px 28px rgba(0,0,0,.08));
}

.exTabs{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.exTab{
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  min-height: 32px !important;
  width: auto !important;
  
  flex: 0 0 auto !important;
  border-width: 1px !important;
}

.exTab:hover{
  transform: translateY(var(--chap-hover-lift-y, -1px));
  box-shadow: var(--chap-hover-lift-shadow, 0 10px 28px rgba(0,0,0,.08));
}

.exTab.active{
  background: #e6f7f7 !important;
  color: var(--ink) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 2px rgba(0,162,161,.18), var(--lift-shadow) !important;
  transform: translateY(-1px) !important;
}

#exampleTabs .exTab{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  min-height: 32px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  width: auto !important;
  
  flex: 0 0 auto !important;
  border-width: 1px !important;
}

#exampleTabs .exTab.active{
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 2px rgba(0,162,161,.18), var(--lift-shadow) !important;
  background: #e6f7f7 !important;
  color: var(--ink) !important;
  transform: translateY(-1px) !important;
}

#exampleTabs .exTab.active:hover,
.exTabs .exTab.active:hover{
  transform: translateY(calc(var(--chap-hover-lift-y, -1px) - 1px)) !important;
}

/* --- Popular Templates: Section --- */

.examples {
  margin-top:14px;
}

.badge {
  display:inline-block;
  background: var(--brand);
  color: #fff;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

.exTitle {
  margin:10px 0 4px;
  font-size:18px;
}

.exSub {
  margin:0;
  color:#6b7280;
  font-size:13px;
}


/* --- exGrid (cards list) --- */

/* --- exCard (card) --- */

.exCard h3 {
  margin:0 0 6px;
  font-size:14px;
}

.exCard p {
  margin:0;
  color:#6b7280;
  font-size:12px;
  line-height:1.4;
}


/* =========================================================
   4. Components - Step Cards (STEP1〜3)
   ※見た目/適用順を変えないため、最小の重複削除と明確化のみ
========================================================= */


.step {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.stepNo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 900 !important;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 0;
  width: 76px;
  height: 28px;
  border-radius: 999px;
  background: var(--chap-step-bg, #d6d0ff) !important;
  border: 1px solid var(--chap-step-border, rgba(109,40,217,.20)) !important;
  color: var(--chap-step-text, #2f2568) !important;
}

.stepText {
  font-weight:900;
}

.smartRow {
  margin-top:14px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fafafa;
}

.bigOpt {
  font-size:15px;
}

.copyBar {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}


/* --- Copy (main button base) --- */

.copyMain {
  width:100%;
  background: var(--chap-purple);
  color:#fff;
  border:1px solid rgba(0,0,0,.06);
}

.copyMain:hover{
  background: var(--chap-purple-dark);
}

.copyState {
  color:#6b7280;
  font-weight:800;
}

.copyBig {
  background:#16a34a;
  color:#fff;
  border:none;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}

.flash {
  animation: flash .6s ease;
}

@keyframes flash {
  0%{
    transform:scale(1);
  }

  35%{
    transform:scale(1.02);
  }

  100%{
    transform:scale(1);
  }

}



/* v6 additions */
.buttons {
  flex-wrap:wrap;
}

/* v7 - example tabs */

/* --- Tabs (base) --- */

/* --- Tab (base) --- */

/* --- Tab (active) --- */

/* v7.7.1 - visual output format buttons */
.formatButtons {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 2px;
}

.formatBtn {
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
}

.formatBtn.active {
  background:#111827;
  color:#fff;
  border-color:#111827;
}


/* --- Small hint --- */

.smallHint {
  font-size:12px;
  color:#6b7280;
  margin-bottom:8px;
}

/* v7.7.1 - paste guide */
.pasteGuide {
  margin-top:10px;
  padding:10px 12px;
  border:1px dashed #e5e7eb;
  border-radius:14px;
  background:#fafafa;
}


/* --- Paste guide text --- */

.pasteGuideText {
  font-weight:900;
  margin-bottom:8px;
}

.aiLinks {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.aiLink {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  color:#111827;
}

.aiLink:hover{
  transform:translateY(-1px);
}

/* v8 - split output fields */
#outputContent {
  min-height:120px;
}

/* v8.2 - SVG icons (cross-platform) */
.formatBtn {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.formatBtn .fi {
  width:18px;
  height:18px;
  display:inline-block;
}

.formatBtn .fi path {
  stroke:currentColor;
}

.formatBtn .fitxt {
  display:inline-block;
}

/* v8.2 - step checkmarks */
.stepCheck {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  border:2px solid #d1d5db;
  background:#fff;
  color:#9ca3af;
  font-weight:900;
  font-size:14px;
  vertical-align:middle;
  opacity:1;
  transform:scale(1);
  margin-left:10px;
}

.stepCheck.on {
  border-color:#10b981;
  background:#10b981;
  color:#ffffff;
  box-shadow:0 6px 18px rgba(16,185,129,.25);
}

/* v9 - buttons moved under result */

/* --- Buttons under result --- */

.buttonsUnderResult {
  display:flex;
  gap:10px;
  margin:12px 0 0;
}

.buttonsUnderResult .secondary {
  flex:1;
}



/* v9 UI tweaks */
.topBadge {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,162,161,.12);
  color:#00a2a1;
  font-weight:700;
  font-size:12px;
  border:1px solid rgba(0,162,161,.18);
  margin-bottom:10px;
}

/* --- Popular template tabs: icon + short label --- */
.exTab .tabIcon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.exTab .tabIcon svg {
  width:16px;
  height:16px;
}

.exTab .tabLabel {
  white-space:nowrap;
}

/* === UI polish: tabs compact + headings color to brand teal === */
:root{
  /* Brand / Main */
  --chap-purple: #6d28d9;
  --chap-purple-dark: #5b21b6;
  --brand: #00a2a1;
  --teal: #00a2a1;
  --ink: #111111;

  /* Grays */
  --chap-gray: #e5e7eb;
  --chap-gray-dark: #d1d5db;
  --chap-gray-bg: #f1f5f9;
  --chap-gray-bg-hover: #e2e8f0;

  /* Step Badge */
  --chap-step-bg: #d6d0ff;
  --chap-step-border: rgba(109,40,217,.20);
  --chap-step-text: #2f2568;

  /* Active / Highlight */
  --coral: #FF7F50;
  --coral-bg: #FFF1EA;
  --coral-text: #111111;
  --lift-shadow: 0 10px 24px rgba(17, 24, 39, .10);

  /* Other */
  --brand-soft: #8f80ff;
  --brand-weak: rgba(0,162,161,.12);
  --brand-line: rgba(0,162,161,.25);

  --chap-hover-lift-y: -1px;

  --chap-hover-lift-shadow: 0 10px 28px rgba(0,0,0,.08);
}



/* =========================================================
   1. Base / Reset (基本設定)
   ※見た目を変えないため、最低限のみ
========================================================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

/* Badge (人気テンプレなど) を見出し.pngの雰囲気に */
.badge {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand-line) !important;
  font-weight: 900 !important;
}

/* STEP見出し（黒→ブランド色） */
/* 人気テンプレのタブをモックtabu.pngみたいにコンパクトに */
.exTab .tabIcon svg {
  width: 16px !important;
  height: 16px !important;
}

.exTab .tabLabel {
  letter-spacing: .02em;
}

/* タブが長く見えないように余白を抑える */
/* Compact exTabs pills */
.exTab .tabIcon svg {
  width:14px;
  height:14px;
}

/* =========================
   人気テンプレ：タブをモックみたいに短く（強制上書き）
   ========================= */
#exampleTabs {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 10px !important;
}


/* --- Tabs (inside #exampleTabs) --- */

#exampleTabs #exampleTabs .exTab .tabIcon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#exampleTabs .exTab .tabIcon svg {
  width: 14px !important;
  height: 14px !important;
}

#exampleTabs /* =========================
   人気テンプレ：タブをモックみたいに短く（さらに強制）
   ========================= */
#exampleTabs button,
#exampleTabs /* =========================
   v5.1 さらに強制：タブが縦並びになる/横に詰まらない問題を潰す
   （ボタンが width:100% や flex:1 を持っていても負けないように）
   ========================= */

/* --- Tabs (force horizontal layout) --- */

#exampleTabs, #exampleTabs #exampleTabs .exTab .tabLabel {
  display:inline-block !important;
}

/* =========================
   v5.3 コーラル薄塗り＋太枠＋軽い浮き（タブ/出力形式/コピー）
   ========================= */


/* 人気テンプレ：選択中 */
#exampleTabs #exampleTabs .exTab.active .tabIcon svg {
  color: var(--coral-text) !important;
}

/* 出力の書き方（見た目）：選択中 */
#formatButtons .formatBtn.isActive,
#formatButtons .formatBtn.active {
  border-color: var(--coral) !important;
  background: var(--coral-bg) !important;
  color: var(--coral-text) !important;
  box-shadow: 0 0 0 2px rgba(255,127,80,.25), var(--lift-shadow) !important;
  transform: translateY(-1px) !important;
}

#formatButtons .formatBtn.isActive svg,
#formatButtons .formatBtn.active svg {
  color: var(--coral-text) !important;
}

/* メインCTA：コピーしてChatGPTに貼り付ける（STEP2/STEP3どちらにも効かせる） */
.copyMain, .copyBig, #copyBig, #copy {
  background: var(--coral) !important;
  border: 2px solid var(--coral) !important;
  color: #fff !important;
  box-shadow: var(--lift-shadow) !important;
}

.copyMain:hover, .copyBig:hover, #copyBig:hover, #copy:hover{
  transform: translateY(-1px);
}

/* タブ/ボタンの非選択状態は上品に */
#exampleTabs /* =========================
   v5.4 改善セット
   1) 選択中だけ #00a2a1 を混ぜる（枠線をティール寄せ）
   3) ボタンとタブの差別化（コピーは #00a2a1 ベタ）
   4) タブ/ボタンの角丸は 12px に統一
   ========================= */


/* --- (4) 角丸：タブ/ボタンは 12px --- */
#exampleTabs .exTab,
#formatButtons .formatBtn,
.copyMain, .copyBig, #copyBig, #copy,
.secondary, #openChatGPT, #clearAll {
  border-radius: 12px !important;
}

/* --- (1) 選択中タブ：コーラル薄塗り + 枠をティール寄せ --- */
#exampleTabs #exampleTabs .exTab.active .tabIcon svg {
  color: var(--ink) !important;
}

/* --- 出力形式ボタン：選択中 --- */
#formatButtons .formatBtn.isActive,
#formatButtons .formatBtn.active {
  border-color: var(--teal) !important;
  background: var(--coral-bg) !important;
  color: var(--ink) !important;
  box-shadow: 0 0 0 2px rgba(0,162,161,.18), var(--lift-shadow) !important;
  transform: translateY(-1px) !important;
}

/* --- (3) コピーはブランド紫で主CTA --- */
.copyMain, .copyBig, #copyBig, #copy {
  background: var(--chap-purple) !important;
  border: 2px solid var(--chap-purple) !important;
  color:#fff !important;
  box-shadow: var(--lift-shadow) !important;
}

/* サブボタンは控えめ（グレー） */
.secondary, #openChatGPT, /* hover演出 */
.copyMain:hover, .copyBig:hover, #copyBig:hover, #copy:hover,
#exampleTabs .exTab:hover,
#formatButtons .formatBtn:hover {
  transform: translateY(-1px);
}

/* =========================
   v5.4.1 選択中背景をミントに変更（タブ/出力形式）
   ========================= */
#exampleTabs #formatButtons .formatBtn.isActive,
#formatButtons .formatBtn.active {
  background: #e6f7f7 !important;
}

/* =========================
   v5.6 UX改善
   (3) コピー完了フィードバック
   (4) 生成プロンプトの強調
   (5) AIリンクをコピー直下に配置
   ========================= */

/* --- Result label --- */

.resultLabel {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:#e6f7f7;
  border:1px solid rgba(0,162,161,.22);
  color:#0f172a;
  font-weight:800;
  font-size:12.5px;
  margin: 8px 0 10px;
}

#result {
  background:#f2fbfb !important;
  border:1px solid rgba(0,162,161,.25) !important;
}


/* --- AI links bar --- */

.aiLinksBar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 8px;
}

.aiMini {
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e5e7eb;
  color:#0f172a;
  font-weight:800;
  font-size:13px;
  text-decoration:none;
}

.aiMini:hover{
  transform: translateY(-1px);
}

.copyMain.isCopied, .copyBig.isCopied, #copyBig.isCopied, #copy.isCopied {
  filter: brightness(0.95);
}

/* =========================
   v5.7 STEP3 重複削減＆導線強化
   - ガイド文を目立たせる
   - 一括クリアを結果幅いっぱい
   ========================= */

/* =========================================================
   4. Components - Result / Copy (result / copyGuide / aiLinks)
   ※見た目/挙動を変えないため、適用順は動かさず
   - 範囲の明確化（コメント）
   - 完全一致の重複だけ削除
========================================================= */



/* --- Copy area --- */

.copyArea {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:10px;
}


/* --- Copy guide (strong) --- */

.copyGuideStrong {
  padding:10px 12px;
  border-radius:12px;
  background:#e6f7f7;
  border:1px solid rgba(0,162,161,.28);
  color:#0f172a;
  font-weight:900;
  font-size:13.5px;
}

.clearWide {
  width:100%;
  margin-top:10px;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e5e7eb;
  font-weight:900;
  cursor:pointer;
}

.clearWide:hover{
  transform: translateY(-1px);
}

/* =========================
   v5.7.1 ガイド文：強調ボックスをやめて“さりげなく目立たせる”
   ========================= */
.copyGuideStrong {
  background: transparent !important;
  border: 0 !important;
  border-left: 4px solid rgba(0,162,161,.55) !important;
  padding: 6px 10px !important;
  border-radius: 0 !important;
  font-weight: 900 !important;
  color:#0f172a !important;
}

/* v5.7.24-stable: selected popular template */
.exCard.selected {
  border-color: #00a2a1 !important;
  background: #e6f7f7 !important;
  box-shadow: 0 0 0 2px rgba(0,162,161,.18), 0 8px 18px rgba(0,0,0,0.08);
}

/* ===== Chapinavi Thin Header ===== */

/* =========================================================
   4. Components - Header UI (chapinavi-*)
   ※見た目/挙動を変えないため、適用順は動かさず
   - 範囲の明確化（コメント）
   - 完全一致の重複だけ削除
========================================================= */


/* --- Sticky header shell --- */

.chapinavi-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}


/* --- Header inner layout --- */

.chapinavi-header__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}


/* --- Brand link --- */

.chapinavi-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* Logo box: size is fixed, image uses % to keep aspect (object-fit) */

/* --- Brand logo box --- */

.chapinavi-brand__logoBox {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: inline-block;
}

.chapinavi-brand__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* --- Brand name --- */

.chapinavi-brand__name {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
  color: rgba(0,0,0,.78);
}

/* PC: show full name. SP: show short name to keep 1 line */
.chapinavi-brand__name--short {
  display:none;
}




/* --- Nav container --- */

.chapinavi-nav {
  display: inline-flex;
  align-items: center;
}

/* Header button base */

/* --- Nav link --- */

.chapinavi-nav__link {
  font-size: 13px;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.7);
  color: rgba(0,0,0,.78);
}

.chapinavi-nav__link:hover{
  border-color: rgba(0,0,0,.14);
  color: rgba(0,0,0,.9);
}

/* X share (SVG icon) */
.chapinavi-nav__link--x {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* --- X icon --- */

.chapinavi-xicon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(0,0,0,.88);
}

.chapinavi-xsvg {
  width: 12px;
  height: 12px;
  fill: #fff;
  display: block;
}

.chapinavi-xtext {
  font-weight: 700;
}

.chapinavi-ext {
  font-size: 12px;
  opacity: .7;
}

.chapinavi-nav__link--x:hover .chapinavi-xicon{
  background: rgba(0,0,0,.95);
}

.chapinavi-nav__link--x:hover .chapinavi-ext{
  opacity: 1;
}

/* Title mini logo */

/* --- Title line (logo + title) --- */

.chapinavi-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /* タイトルが2行でも崩れない */
  line-height: 1
}

.chapinavi-title__logoBox {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chapinavi-title__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.chapinavi-title__main {
  font-size: clamp(20px, 2.6vw, 26px);
  /* about 2/3 of the old size */
  font-weight: 900;
  letter-spacing: .01em;
}

.chapinavi-title__brand {
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 800;
  color: rgba(0,0,0,.72);
}

/* Keep H1 visually centered with logo box */
.chapinavi-title__main, .chapinavi-title__brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}



/* Primary / Secondary button colors */
.copyMain, #copy {
  background: var(--chap-purple) !important;
  border-color: var(--chap-purple) !important;
  color: #fff !important;
}

.copyMain:hover, #copy:hover{
  background: var(--chap-purple-dark) !important;
  border-color: var(--chap-purple-dark) !important;
}

.secondary{
  background: var(--chap-gray-bg) !important;
  border-color: rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.86) !important;
}

.secondary:hover{
  background: var(--chap-gray-bg-hover) !important;
}

/* ====== 一括クリアボタン（fix15準拠：枠/背景のみ・最終ルール） ====== */

/* --- Clear All (final rule) --- */

#clearAll{
  background: var(--chap-gray, #e5e7eb) !important;
  border-color: var(--chap-gray-dark, #d1d5db) !important;
  color: #111827 !important;
}
#clearAll:hover{
  background: var(--chap-gray-dark, #d1d5db) !important;
}

/* ====== ボタン文字の太さ（fix15準拠：コピー/一括クリアのみ） ====== */
#copy,
.copyMain{
  font-weight: 900 !important;
}

#clearAll{
  font-weight: 900 !important;
}

/* ====== Tabs hover (exCard準拠) ====== */

/* =========================================================
   5. Responsive (メディアクエリ：一番下にまとめる)
   ※値/セレクタは変更せず、位置だけ最下部へ集約
========================================================= */

@media (max-width: 900px) {
  .step1Fields {
    grid-template-columns:1fr;
  }

}

@media (max-width: 900px) {
  main.grid {
    grid-template-columns: 1fr;
  }

}

@media (min-width: 901px) {
  .step1Fields {
    display:flex;
    gap:12px;
  }

  .step1Fields .field {
    flex:1 1 0;
    min-width:0;
  }

}

@media (max-width: 900px) {
  .varRow {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 900px) {
  .exGrid {
    grid-template-columns:1fr;
  }

}

@media (max-width: 900px) {
  .buttonsUnderResult {
    flex-direction:column;
  }

}

@media (max-width: 640px) {
  

}

@media (max-width: 720px) {
  .chapinavi-brand__name {
    max-width: 70vw;
  }

  .chapinavi-brand__name--full {
    display:none;
  }

  .chapinavi-brand__name--short {
    display:inline;
  }

}

@media (max-width: 720px) {
  /* Slightly tighter on mobile */
  .chapinavi-title {
    gap: 8px;
  }

  .chapinavi-title__logoBox {
    width: 34px;
    height: 34px;
  }

}


/* v6.3: popular template autofill flash */
:root{
  /* STEPバッジ系の薄紫に寄せた一時ハイライト */
  --chap-flash-border: var(--chap-step-border, rgba(109, 40, 217, .20));
}

/* 人気テンプレ適用で自動入力された欄を“パッ”と強調（軽量・短時間） */
.flashFill{ animation: chapFlashFill 900ms ease-out 1; }

@keyframes chapFlashFill{
  0%   { background-color: rgba(214, 208, 255, .55); border-color: var(--chap-flash-border); }
  45%  { background-color: rgba(214, 208, 255, .32); border-color: var(--chap-flash-border); }
  100% { background-color: transparent; border-color: #e5e7eb; }
}


/* v7.2: footer (terms/privacy/contact) */
.chapinavi-footer{
  margin-top: 28px;
  padding: 16px 0 22px;
  border-top: 1px solid rgba(17, 24, 39, .08);
}
.chapinavi-footerInner{
  max-width: 980px;
  margin: 0 auto;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.chapinavi-footerLinks{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.chapinavi-footerLinks a{
  color: rgba(17, 24, 39, .75);
  text-decoration: none;
}
.chapinavi-footerLinks a:hover{
  text-decoration: underline;
}
.chapinavi-footerLinks .sep{
  color: rgba(17, 24, 39, .25);
}
.chapinavi-footerCopy{
  font-size: 12px;
  color: rgba(17, 24, 39, .55);
}
@media (max-width: 520px){
  .chapinavi-footerInner{
    justify-content: center;
  }
}


/* v7.3: footer band (match header tone) */
.chapinavi-footer{
  background: linear-gradient(90deg, rgba(33, 10, 54, 1), rgba(54, 16, 78, 1));
  border-top: none;
}
.chapinavi-footerLinks a{
  color: rgba(255, 255, 255, .92);
}
.chapinavi-footerLinks .sep{
  color: rgba(255, 255, 255, .35);
}
.chapinavi-footerCopy{
  color: rgba(255, 255, 255, .75);
}


/* v7.4: footer band exact company color */
.chapinavi-footer{
  background: #2C183D;
}

/* =========================================================
   v7.18 SAFE REFACTOR (A)
   Footer & PAGE TOP final rules (dedupe + reorder only)
   Scope:
     - .chapinavi-footer*
     - .pageTopBtn / .pageTopImg
     - html, body, .container (stick-bottom)
   NOTE: values are preserved from latest applied rules.
   ========================================================= */

/* stick footer to bottom */
html, body{
  min-height: 100%;
  margin: 0;
  padding: 0;
}
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container{
  flex: 1 0 auto;
}

/* footer */
.chapinavi-footer{
  margin-top: auto;
  height: 77px;
  padding: 0;
  border-top: none;
  background: #2C183D;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.chapinavi-footerInner{
  max-width: 980px;
  margin: 0 auto;
  
  width: 100%;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.chapinavi-footerLinks{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
.chapinavi-footerLinks a{
  color: #fff;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
.chapinavi-footerLinks a:hover{
  text-decoration: underline;
}
.chapinavi-footerLinks .sep{
  color: rgba(255, 255, 255, .55);
}
.chapinavi-footerCopy{
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
.chapinavi-footerContact{
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}

/* page top button (always visible; positioned above footer) */
.pageTopBtn{
  position: fixed;
  right: max(18px, calc((100vw - 1100px) / 2 + 16px + 18px));
  bottom: 96px; /* 18px + footer(77px) +1 */
  z-index: 50;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.pageTopImg{
  display: block;
  width: 121px;
  height: 27px;
}

/* responsive */
@media (max-width: 520px){
  .chapinavi-footerInner{
    justify-content: center;
  }
  .pageTopImg{
    width: 121px;
    height: 27px;
  }
}



/* v7.19: header help + faq modal (AdSense-safe, user-triggered) */
.chapinavi-nav{
  display: flex;
  align-items: center;
  gap: 10px;
}
.chapinavi-nav__btn{
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  cursor: pointer;
}
.chapinavi-nav__btn:hover{
  background: rgba(255,255,255,.12);
}
.chapinavi-helpicon{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.35);
  font-weight: 700;
  line-height: 1;
}

/* modal */
.chapinavi-modal[hidden]{
  display: none;
}
.chapinavi-modal{
  position: fixed;
  inset: 0;
  z-index: 999;
}
.chapinavi-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.15);
}
.chapinavi-modal__panel{
  position: relative;
  width: min(480px, calc(100% - 32px));
  margin: 72px auto 24px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: 18px 18px 16px;
}
.chapinavi-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.chapinavi-modal__close:hover{
  background: rgba(214,208,255,.35); /*薄紫寄せ*/
}
.chapinavi-modal__title{
  margin: 4px 52px 12px 0;
  font-size: 16px;
  font-weight: 700;
}
.chapinavi-faqItem{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
}
.chapinavi-faqItem + .chapinavi-faqItem{
  margin-top: 10px;
}
.chapinavi-faqQ{
  cursor: pointer;
  font-weight: 700;
}
.chapinavi-faqA{
  margin-top: 8px;
  line-height: 1.6;
  color: rgba(0,0,0,.78);
  font-size: 14px;
}
.chapinavi-modal__actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.chapinavi-modal__share{
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  color: #2C183D;
  text-decoration: underline;
}


/* v7.20: header help accordion (AdSense-safe, user-triggered) */
.chapinavi-helpWrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chapinavi-helpAcc{
  position: relative;
}
.chapinavi-helpAcc > summary{
  list-style: none;
}
.chapinavi-helpAcc > summary::-webkit-details-marker{
  display: none;
}
.chapinavi-helpAcc__sum{
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  cursor: pointer;
  user-select: none;
}
.chapinavi-helpAcc__sum:hover{
  background: rgba(255,255,255,.12);
}
.chapinavi-helpAcc[open] .chapinavi-helpAcc__sum{
  background: rgba(255,255,255,.14);
}
.chapinavi-helpAcc__panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  padding: 8px;
  z-index: 120;
}
.chapinavi-helpAcc__item{
  width: 100%;
  display: block;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  text-align: left;
  color: rgba(0,0,0,.82);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.chapinavi-helpAcc__item:hover{
  background: rgba(214,208,255,.35);
}
.chapinavi-helpAcc__item--text{
  cursor: default;
  color: rgba(0,0,0,.55);
}


/* v7.21: header menu (hamburger) */
.chapinavi-menu{
  position: relative;
}
.chapinavi-menu > summary{
  list-style: none;
}
.chapinavi-menu > summary::-webkit-details-marker{
  display: none;
}


.chapinavi-menu[open] .chapinavi-menu__btn{
  background: rgba(255,255,255,.14);
}
.chapinavi-menu__icon{
  width: 18px;
  height: 12px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}
.chapinavi-menu__icon span{
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.92);
}
.chapinavi-menu__panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  padding: 8px;
  z-index: 120;
}
.chapinavi-menu__item{
  width: 100%;
  display: block;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  text-align: left;
  color: rgba(0,0,0,.82);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.chapinavi-menu__item:hover{
  background: rgba(214,208,255,.35);
}


/* v7.23: header menu contrast fix (header is light, so use dark icon/button) */
.chapinavi-header .chapinavi-menu__btn{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.82);
}
.chapinavi-header .chapinavi-menu__btn:hover{
  background: rgba(214,208,255,.35);
}
.chapinavi-header .chapinavi-menu__icon span{
  background: rgba(0,0,0,.78);
}


/* v7.28b: footer company link should look like plain text (no emphasis) */
.chapinavi-footer .footerCompanyLink{
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.chapinavi-footer .footerCompanyLink:hover,
.chapinavi-footer .footerCompanyLink:focus,
.chapinavi-footer .footerCompanyLink:active{
  color: rgb(255, 255, 255);
  text-decoration: none;
}

/* v7.33: FAQ modal blocks (no accordion; minimal spacing) */
.chapinavi-faqBlock{margin:20px 0;}

/* v7.34 FAQ spacing */
.chapinavi-faqQ{margin-bottom:8px;}
.chapinavi-faqA{line-height:1.7;}

/* v7.39 container-right alignment (no layout change) */
:root{
  --chap-container-max: 1200px;
  --chap-container-pad: 16px;
}

/* align header menu button to container right */
.chapinavi-header .headerMenu{
  right: calc(50% - (var(--chap-container-max)/2) + var(--chap-container-pad));
}

/* align page top button to container right */



/* v7.39: align header menu + PAGE TOP to .container right edge (fullscreen stability)
   Scope: header right padding + .pageTopBtn right only
   NOTE: values preserved; only positioning basis unified to container.
*/
@media (min-width: 1100px){
  /* header right edge: shift right-side items inward to match .container (max-width:1100px) */
  .chapinavi-header__inner{
    padding-right: 26px; /* 16px + (1120-1100)/2 */
  }
}

/* PAGE TOP: align to .container right edge on wide screens (fallback keeps current 18px) */



/* v7.40: unify LEFT alignment too (header logo) + align PAGE TOP left edge with menu left edge
   Keep design/values; adjust only alignment basis.
*/
@media (min-width: 1100px){
  .chapinavi-header__inner{
    padding-left: 11px; /* 16px + (1120-1100)/2 */
  }
}

/* PAGE TOP: align left edge to menu button left edge on wide screens
   menu btn width: 40px, PAGE TOP image width: 121px => delta 81px
*/



/* v7.41: PAGE TOP non-overlap (container-based) */



/* v7.42: header menu button style (purple like stepNo) + PAGE TOP move outward to avoid overlap */



/* PAGE TOP: move OUTSIDE container on wide screens (push right) */



/* ================================
   FINAL RULES: Header Menu Button
   (consolidated to avoid conflicts)
   v7.43 - values unchanged, merge only
================================ */
.chapinavi-menu__btn{
  border: 1px solid var(--chap-step-border, rgba(109, 40, 217, .20));
  background: var(--chap-step-bg, #d6d0ff);
  color: var(--chap-step-text, #2f2568);
  border-radius: 999px;
  width: 40px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.chapinavi-menu__btn:hover{
  filter: brightness(0.98);
}


/* v7.45 FINAL: PAGE TOP left edge aligned to container right edge
   Rationale: avoid right-column overlap while keeping visual alignment.
*/
@media (min-width: 1100px){
  .pageTopBtn{
    /* PAGE TOP image width: 121px */
    right: calc((100vw - 1100px) / 2 - 121px);
  }
}


/* v7.46 FINAL OVERRIDE: PAGE TOP left edge aligned to container right edge
   - No assumption about element width (works even if text fallback expands width)
   - Responsive: wide screens use container-based left; smaller screens keep viewport-right.
*/
@media (min-width: 1132px){
  .pageTopBtn{
    left: calc((100vw - 1100px) / 2 + 1100px);
    right: auto;
  }
}
@media (max-width: 1131.98px){
  .pageTopBtn{
    left: auto;
    right: 18px;
  }
}


/* v7.48: PAGE TOP position is clamped/aligned by JS (no visual design change) */


/* v7.52 FINAL: header menu button stays purple (match stepNo) */
.chapinavi-menu__btn{
  background: var(--chap-step-bg, #d6d0ff);
  border: 1px solid var(--chap-step-border, rgba(109, 40, 217, .20));
  color: var(--chap-step-text, #2f2568);
}
.chapinavi-menu__btn:hover{
  filter: brightness(0.98);
}


/* v7.53 FINAL WINS: force header menu button purple (higher specificity) */
header .chapinavi-menu__btn,
.chapinavi-header .chapinavi-menu__btn{
  background-color: var(--chap-step-bg, #d6d0ff) !important;
  border: 1px solid var(--chap-step-border, rgba(109, 40, 217, .20)) !important;
  color: var(--chap-step-text, #2f2568) !important;
}
header .chapinavi-menu__btn:hover,
.chapinavi-header .chapinavi-menu__btn:hover{
  filter: brightness(0.98);
}


/* --- Footer links underline (added) --- */
.chapinavi-footerLinks a{
  text-decoration: underline;
}
/* --- /Footer links underline (added) --- */


/* --- Footer vertical right align (added) --- */
.chapinavi-footerInner{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}
.chapinavi-footerLinks{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
/* --- /Footer vertical right align (added) --- */


/* --- Footer spacing unify (added) --- */
.chapinavi-footerInner{
  gap: 4px; /* tighten overall spacing */
}
.chapinavi-footerCopy{
  margin: 0;
  line-height: 1.6;
}
.chapinavi-footerLinks{
  gap: 4px;
  line-height: 1.6;
}
.chapinavi-footerLinks a{
  margin: 0;
}
/* --- /Footer spacing unify (added) --- */


/* --- Footer spacing unify v2 (added) --- */
.chapinavi-footerInner{
  gap: 4px !important;
}
.chapinavi-footerCopy{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}
.chapinavi-footerLinks{
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px !important;
  line-height: 1.6 !important;
}
.chapinavi-footerLinks a{
  display: block;
  margin: 0 !important;
  line-height: 1.6 !important;
}
/* --- /Footer spacing unify v2 (added) --- */


/* --- Footer company link no underline (added) --- */
.chapinavi-footerLinks a:first-child{
  text-decoration: none !important;
}
/* --- /Footer company link no underline (added) --- */


/* --- Footer gap adjust (added) --- */
.chapinavi-footerLinks{
  gap: 2px !important;
}
/* --- /Footer gap adjust (added) --- */


/* --- Footer center align under 900px (added) --- */
@media (max-width: 900px){
  .chapinavi-footerInner{
    align-items: center !important;
    text-align: center !important;
  }
  .chapinavi-footerLinks{
    align-items: center !important;
  }
}
/* --- /Footer center align under 900px (added) --- */


/* --- Footer logo placement (added) --- */
.chapinavi-footerInner{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.chapinavi-footerLogo img{
  height:32px;
  width:auto;
}
@media (max-width:900px){
  .chapinavi-footerLogo{
    margin-bottom:6px;
  }
}
/* --- /Footer logo placement (added) --- */


/* --- Footer edge alignment fix (added) --- */
.chapinavi-footerInner{
  display:flex;
  justify-content:space-between !important;
  align-items:center;
}
.chapinavi-footerLogo{
  flex:0 0 auto;
}
.chapinavi-footerLinks{
  flex:0 0 auto;
  margin-left:auto;
  text-align:right;
}
/* --- /Footer edge alignment fix (added) --- */


/* --- Footer layout breakpoint fix (added) --- */
/* 901px+ : logo left, texts right */
@media (min-width: 901px){
  .chapinavi-footerInner{
    display:flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
  }
  .chapinavi-footerLogo{
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .chapinavi-footerLinks{
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-items: flex-end !important;
    text-align: right !important;
  }
}

/* 900px- : all centered */
@media (max-width: 900px){
  .chapinavi-footerInner{
    display:flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  .chapinavi-footerLogo{
    margin: 0 0 6px 0 !important;
  }
  .chapinavi-footerLinks{
    align-items: center !important;
    text-align: center !important;
    margin-left: 0 !important;
  }
}
/* --- /Footer layout breakpoint fix (added) --- */


/* --- Footer mobile center + logo divider (added) --- */
@media (max-width: 900px){
  .chapinavi-footerInner{
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .chapinavi-footerLinks{
    align-items: center !important;
    text-align: center !important;
    margin-left: 0 !important;
  }

  .chapinavi-footerLogo{
    border-bottom: 1px solid rgb(255, 255, 255);
    
    margin-bottom: 10px;
    width: 100%;
    display:flex;
    justify-content:center;
  }
}
/* --- /Footer mobile center + logo divider (added) --- */


/* --- Footer mobile center fix + inner padding (added) --- */
.chapinavi-footerInner{
  
}

@media (max-width: 900px){
  .chapinavi-footerInner{
    align-items: center !important;
    text-align: center !important;
  }
  .chapinavi-footerLinks{
    align-items: center !important;
    text-align: center !important;
  }
  .chapinavi-footerLinks a{
    text-align: center !important;
    width: 100%;
  }
}
/* --- /Footer mobile center fix + inner padding (added) --- */


/* --- Footer SP stack fix (added) --- */
@media (max-width: 900px){
  .chapinavi-footerInner{
    display:flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
  }

  .chapinavi-footerLogo{
    order: 1;
    width: 100%;
    display:flex;
    justify-content:center;
  }

  .chapinavi-footerLinks{
    order: 2;
    margin-top: 12px;
    align-items: center !important;
    text-align: center !important;
  }
}
/* --- /Footer SP stack fix (added) --- */


/* --- Footer: ensure order logo -> copy -> links (added) --- */
.chapinavi-footerText{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.chapinavi-footerCopy{ margin: 0; }
.chapinavi-footerCopy .footerCompanyLink{
  color: #ffffff;
  text-decoration: none !important;
}
.chapinavi-footerLinks{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px !important;
  text-align: right;
}
.chapinavi-footerLinks a{ text-decoration: underline; }

@media (min-width: 901px){
  .chapinavi-footerInner{
    display:flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

@media (max-width: 900px){
  .chapinavi-footerInner{
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .chapinavi-footerLogo{
    width: 100%;
    display:flex;
    justify-content:center;
    border-bottom: 1px solid rgb(255, 255, 255);
    
    margin-bottom: 10px;
  }
  .chapinavi-footerText{
    align-items: center !important;
    text-align: center !important;
  }
  .chapinavi-footerLinks{
    align-items: center !important;
    text-align: center !important;
  }
}
/* --- /Footer: ensure order logo -> copy -> links (added) --- */


/* --- Footer SP: force logo above text (added) --- */
@media (max-width: 900px){
  .chapinavi-footerInner{
    flex-direction: column !important;
  }
  .chapinavi-footerText{
    width: 100%;
  }
}
/* --- /Footer SP: force logo above text (added) --- */


/* --- Footer SP: logo clip fix + strict stack order (added) --- */
@media (max-width: 900px){
  /* strict stack + center */
  .chapinavi-footerInner{
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  /* logo: keep centered and prevent clipping */
  .chapinavi-footerLogo{
    width: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-bottom: 1px solid rgb(255, 255, 255);
    
    
  }
  .chapinavi-footerLogo img{
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* text block under logo */
  .chapinavi-footerText{
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .chapinavi-footerCopy{
    width: 100%;
    text-align: center !important;
  }
  .chapinavi-footerLinks{
    width: 100%;
    align-items: center !important;
    text-align: center !important;
  }
  .chapinavi-footerLinks a{
    width: 100% !important;
    text-align: center !important;
  }
}
/* --- /Footer SP: logo clip fix + strict stack order (added) --- */


/* --- Footer SP: strict stack center + no clip (final override) --- */
@media (max-width: 900px){
  /* allow footer to grow on SP */
  .chapinavi-footer{
    height: auto !important;
    
    align-items: stretch !important;
  }
  .chapinavi-footerInner{
    height: auto !important;
    flex-wrap: nowrap !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 25px !important;
  }

  /* enforce order */
  .chapinavi-footerLogo{ order: 1 !important; }
  .chapinavi-footerText{ order: 2 !important; width: 100% !important; }

  /* logo */
  .chapinavi-footerLogo{
    width: 100% !important;
    box-sizing: border-box;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-bottom: 1px solid rgb(255, 255, 255);
    
    
  }
  .chapinavi-footerLogo img{
    display: block;
    height: 34px !important;
    width: auto !important;
    max-width: 80vw !important;
  }

  /* text */
  .chapinavi-footerText{
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2px !important;
  }
  .chapinavi-footerCopy{
    order: 1 !important;
    width: 100% !important;
    text-align: center !important;
  }
  .chapinavi-footerLinks{
    order: 2 !important;
    width: 100% !important;
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2px !important;
  }
  .chapinavi-footerLinks a{
    width: 100% !important;
    text-align: center !important;
  }
}
/* --- /Footer SP: strict stack center + no clip (final override) --- */


/* --- Footer height control (added) --- */
@media (min-width: 901px){
  .chapinavi-footer{
    height: 130px !important;
  }
}

@media (max-width: 900px){
  .chapinavi-footer{
    height: 200px !important;
  }
}
/* --- /Footer height control (added) --- */


/* --- Footer logo height control (added) --- */
@media (max-width: 900px){
  .chapinavi-footerLogo{
    height: 110px !important;
  }
  .chapinavi-footerLogo img{
    height: 100% !important;
    width: auto !important;
  }
}
/* --- /Footer logo height control (added) --- */


/* --- Footer SP: logo fixed width 36px (added) --- */
@media (max-width: 900px){
  .chapinavi-footerLogo{
    height: auto !important;
  }
  .chapinavi-footerLogo img{
    
    height: auto !important;
    
  }
}
/* --- /Footer SP: logo fixed width 36px (added) --- */


/* --- Footer logo fixed height 36px (global) --- */
.chapinavi-footerLogo img{
  height: 36px !important;
  width: auto !important;
}
/* --- /Footer logo fixed height 36px (global) --- */


/* --- Footer logo container height 110px on SP (added) --- */
@media (max-width: 900px){
  .chapinavi-footerLogo{
    height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* --- /Footer logo container height 110px on SP (added) --- */


/* --- FooterInner padding only SP (added) --- */
@media (max-width: 900px){
  .chapinavi-footerInner{
    padding: 0 25px !important;
  }
}
/* --- /FooterInner padding only SP (added) --- */


/* --- Footer: underline Terms link only (added) --- */
.chapinavi-footerLinks a[href*="terms"]{
  text-decoration: underline !important;
}
/* --- /Footer: underline Terms link only (added) --- */