@charset "utf-8";

/*
Theme Name: loop-ac-legal
Theme URI: https://legal.loop-ac.jp/
Description: 行政書士e-LOOP法務事務所（legal.loop-ac.jp）のホームページ ※loop-ac-website から複製
version:
Author: Yoshioka
Author URI:
*/

@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@600;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/*----------- 目次 --------------------
/*　webレスポンシブ用 pc⇒タブレット端末⇒スマホ
@media(min-width: 1281px){}
@media screen and (min-width:768px) and (max-width:1280px){}
@media(max-width: 767px){}
*/

/*　CSS更新時
	920　Q&A（.qa_list dd）　display: none; → display: block;
	1712　.elp-acc__panel の max-height	max-height: 0; → max-height: none !important;
	1713　.elp-acc__panel の overflow		overflow: hidden; → overflow: visible !important;
	1714　.elp-acc__panel の opacity		opacity: 0; → opacity: 1 !important;
	1858　.fadein　opacity: 0; → opacity: 1;
	1863　.fadein1　opacity: 0; → opacity: 1;

/* 最下部　トップページ戻るボタン・シェアボタン・ブログボタンは完成後削除する */

/*----------- このファイルの構成 --------------------
 0. 共通パーツ（:root／文字強調／背景強調／リスト／テーブル／Q&A／リンクボタン／フロー／アコーディオン）
 1. ベース（初期化・見出し・ヘッダー・ナビ・パンくず・サイドバー・フッター・固定CTA）
 2. 固定ページ（一般）：トップ／カテゴリー／事務所概要・地図・代表者挨拶・プライバシー
 3. 固定ページ（LP用）：elp- 系
 4. 固定ページ（単ページ専用）：古物商・業務委託・化粧品許可・ひな形集 など
 5. 固定ページ（マイナスマーケティング用）：.mm-page
 6. ブログ用：シェア／記事一覧／ページネーション／目次
----------------------------------------------------*/

/*
============================================================
 0. 共通パーツ
 （:root／文字強調／背景強調／リスト／テーブル／Q&A／リンクボタン／フロー／アコーディオン）
============================================================
*/

/*
============================================================
 共通パーツ（整理版 v1）
 ・:root 変数の集約
 ・文字強調（color）
 ・背景強調（background）
 ・リスト
 ・テーブル（2列 / 3列 / 4列）
 ※ 個別ページ用CSSは含みません
 ブレークポイント
   PC        : 1281px 以上（ベース）
   タブレット : 768px ～ 1280px
   スマホ    : 767px 以下
============================================================
*/

/* ============================================================
   0. :root（変数はここに集約）
   ============================================================ */

:root {
  /* --- LP用カラー --- */
  --elp-navy: #2E3349;   /* 元の色 #1a2744 */
  --elp-navy-d: #2E333D; /* 元の色 #111b36 */
  --elp-gold: #c9a84c;
  --elp-gold-l: #c9a84c;
  --elp-emph: #fffffa;   /* 強調（黄み白） */
  --elp-silver: #bcc1c8;   /* シルバー風・グレー */
  --elp-accent: #f4e1be; /* 強調（大見出しと同じ） */
  --elp-cream: #faf8f3;
  --elp-gray-l: #f4f2ed;
  --elp-gray-m: #e8e4d9;
  --elp-gray-t: #8a8070;
  --elp-text: #2a2420;
  --elp-red: #c0392b;
  --elp-white: #ffffff;
  --elp-shadow: 8px 8px 16px -5px rgba(26,39,68,0.3);
  --elp-radius: 6px;

  /* --- ダーク背景上の強調色 --- */
  --silver: #eceef2;        /* gold-p-s / gold-p-l / bold-28 */
  --silver-strong: #f0f2f5; /* strong */

  /* --- 文字サイズ（PC・タブレット共通） --- */
  --fs-20: 1.25em;
  --fs-24: 1.5em;
  --fs-24-hl: 1.5em;        /* under-* 系の24 */
  --fs-28: 1.75em;

  /* --- マイナスマーケティングLP（.mm-page）用 --- */
  --paper: #F8F6F0;
  --kinari: #FFFDF7;
  --ink: #27251F;
  --sumi: #63615A;
  --line: #E3DFD2;
  --shu: #C2402E;
  --shu-deep: #9E2F21;
  --shu-wash: #F6E7E2;
  --maxw: 1060px;
  --serif: "Zen Old Mincho",serif;
  --sans: "Zen Kaku Gothic New",sans-serif;
  --mono: "IBM Plex Mono",monospace;
}

@media (max-width: 767px) {
  :root {
    --fs-20: 1.1em;
    --fs-24: 1.25em;
    --fs-24-hl: 1.35em;
    --fs-28: 1.35em;
  }
}

/* ページ内リンク移動用の調整（1回だけ） */

html {
  scroll-behavior: smooth;
}

h2, h3 {
  scroll-margin-top: 2em;
}

/* ============================================================
   1. 文字強調（color / font）
   ============================================================ */

/* --- 1-1. カラーユーティリティ --- */

.text-accent  { color: var(--elp-accent); } /* h1と同じ色 */
.text-gold    { color: #c9a84c; }
.text-caution { color: #ff6b6b; }
.text-red     { color: #ff0000; }
.text-underline { text-decoration: underline; }
.text-center  { text-align: center; }
.link-light   { color: #aac8f0; }
.link-bright  { color: #ccffff; }

.elp-text--red {
  color: var(--elp-red);
  font-weight: 700;
}

.elp-text--gold {
  color: var(--elp-gold);
  font-weight: 700;
}

/* --- 1-2. 文中テキストリンク --- */

/* ライト背景用 */
.text-link {
  color: #06f !important;
  font-size: 1em;
}

.text-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ダーク背景用 */
.d-text-link {
  color: #aee !important;
  font-size: 1em;
}

.d-text-link:hover {
  opacity: 0.8;
  color: #9ff;
  text-decoration: underline;
}

/* --- 1-3. 文字サイズ＋太字（サイズは :root の --fs-* で切替） --- */

.bold-20, .white-20, .red-20, .pink-20,
.under-lb20, .under-ora20, .under-pink20, .under-ye20 {
  font-size: var(--fs-20);
  font-weight: bold;
}

.bold-24, .white-24, .red-24, .pink-24 {
  font-size: var(--fs-24);
  font-weight: bold;
}

.under-lb24, .under-ora24, .under-pink24, .under-ye24 {
  font-size: var(--fs-24-hl);
  font-weight: bold;
}

.bold-28, .white-28, .red-28, .pink-28 {
  font-size: var(--fs-28);
  font-weight: bold;
}

/* 文字色 */
.white-20, .white-24, .white-28 { color: #fff; }
.red-20,   .red-24,   .red-28   { color: #ff0000; }
.pink-20,  .pink-24,  .pink-28  { color: #ff9999; }

/* 注釈 */
.note {
  font-size: 0.75em;
  line-height: 0;
}

/* --- 1-4. 下線（アンダーライン系） --- */

.kasen {
  text-decoration: underline;
}

.under-line20 {
  text-decoration: underline;
  font-size: var(--fs-20);
}

.under-line24 {
  text-decoration: underline;
  font-size: var(--fs-24);
}

/* --- 1-5. ダーク背景上の強調（ゴールド→シルバー） --- */

.point-box-navy strong,
.elp-card--dark strong {
  color: var(--silver-strong);
}

.gold-p-s,
.gold-p-l,
.point-box-navy .bold-28 {
  color: var(--silver);
}

.gold-p-s {
  font-size: 0.92rem;
}

.gold-p-l {
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .gold-p-l {
    font-size: 1.5em;
  }
}

/* ============================================================
   2. 背景強調（background / box）
   ============================================================ */

/* --- 2-1. マーカー（背景ハイライト） --- */

.under-lb20, .under-lb24   { background: linear-gradient(transparent 60%, #00eeff 100%); }
.under-ora20, .under-ora24 { background: linear-gradient(transparent 60%, #ff6600 100%); }
.under-pink20, .under-pink24 { background: linear-gradient(transparent 60%, #ff9999 100%); }

.under-ye20, .under-ye24 {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(255, 228, 0, 0.6);
  text-underline-offset: -0.2em;
  text-decoration-skip-ink: none;
}

.elp-mark {
  background: linear-gradient(transparent 60%, #ffe066 60%);
}

/* --- 2-2. 4色ボックス（灰・青・赤・緑） 枠色と背景色だけ変数で切替 --- */

.info-box-gray,
.point-box-blue,
.attention-box,
.opinion-box-green {
  width: 70%;
  border: 0.15em solid var(--box-bd);
  border-radius: 0.75em;
  padding: 0.75em 1em;
  color: #555;
  background-color: var(--box-bg);
  margin: 1.5em auto;
  line-height: 2em;
}

.info-box-gray p,
.point-box-blue p,
.attention-box p,
.opinion-box-green p {
  font-size: 0.92rem;
}

.info-box-gray     { --box-bd: #d8dce3; --box-bg: #fafbfc; } /* Googleが行った対策 */
.point-box-blue    { --box-bd: #a0c4e8; --box-bg: #f8fbff; } /* 企業がやったほうがいい対策 */
.attention-box     { --box-bd: #ff8888; --box-bg: #fff6f6; } /* よくありがちなミス・補足 */
.opinion-box-green { --box-bd: #a8d5ba; --box-bg: #f6faf8; } /* 代表者の意見 */

@media (max-width: 767px) {
  .info-box-gray,
  .point-box-blue,
  .attention-box,
  .opinion-box-green {
    width: 100%;
  }
}

/* --- 2-3. 紺×ゴールド ポイントボックス --- */

.point-box-navy {
  padding: 24px 30px;
  background: #2E3341; /* 元の色 #0d1f36 */
  margin-top: 24px;
  box-shadow: 0 0 10px 0 #ccc;
}

.point-box-navy p {
  margin: 0;
  color: #cfd5e0;
  font-size: 0.9375em;
  line-height: 1.8;
}

.point-box-navy p + p {
  margin-top: 0.5em;
}

@media (max-width: 767px) {
  .point-box-navy {
    padding: 18px 20px;
  }
}

/* ▼ バリエーション（使っていなければ削除OK：WordPress検索で
     "point-box-navy--" を確認してください） */

.point-box-navy--w p {
  color: #ffffff;
  font-size: 0.92rem;
}

.point-box-navy--lb p {
  color: #dde6f4;
  font-size: 0.92rem;
}

.point-box-navy--b {
  background: #ffffff;
}

.point-box-navy--b p {
  color: #222222;
  font-size: 0.92rem;
}

/* --- 2-4. 左ラインのコールアウト --- */

.callout-gold,
.callout-gold-light,
.callout-red,
.elp-callout {
  padding: 24px 30px;
  border-left: 5px solid #c9a84c;
}

.callout-gold p,
.callout-gold-light p,
.callout-red p,
.elp-callout p {
  margin: 0;
  font-size: 0.92rem;
}

.callout-gold-light,
.callout-red,
.elp-callout {
  background: #ffffff;
}

.callout-red,
.elp-callout {
  border-left-color: #a32d2d;
}

.callout-gold,
.elp-callout {
  margin-top: 24px;
}

/* --- 2-5. セクション背景 --- */

.elp-section--white { background: var(--elp-white); }
.elp-section--gray  { background: var(--elp-gray-l); }
.elp-section--dark  { background: var(--elp-navy-d); }
.elp-section--cream { background: var(--elp-cream); }

.elp-section--navy {
  background: var(--elp-navy);
  color: #ffffff;
}

/* ============================================================
   3. リスト
   ============================================================ */

/* --- 3-1. 基本（黒） .disc / .decimal ／（白） .disc-w / .decimal-w --- */

.disc li,
.decimal li,
.disc-w li,
.decimal-w li {
  margin: 0.25em 0 0.75em 2em;
  padding-left: 1em;
  line-height: 2em;
  font-size: 1em;
}

.disc li,
.disc-w li {
  list-style-type: disc;
}

.decimal li,
.decimal-w li {
  list-style-type: decimal;
}

.disc-w li,
.decimal-w li {
  color: #fff;
}

@media (min-width: 834px) {
  .disc li,
  .decimal li,
  .disc-w li,
  .decimal-w li {
    margin: 1em 2em 1em 5em;
  }
}

/* --- 3-2. 記号付きリスト --- */

.list-check li:before {
  content: "✓";
  margin-right: 1.2em;
  color: #222;
}

.list-check li {
  line-height: 2.5em;
  margin-left: 0.5em;
  font-size: 0.875em;
}

.list-maru li:before {
  content: "●";
  margin-right: 1em;
  color: #222;
}

.list-maru li {
  line-height: 2.5em;
}

.list-sankaku li:before {
  display: inline-block;
  content: "▲";
  transform: rotate(90deg);
  margin-right: 1em;
  color: pink;
}

.list-sankaku li {
  line-height: 2.5em;
  font-size: 0.65em;
}

.list-sikaku li:before {
  content: "■";
  margin-right: 1em;
  color: #222;
}

.list-sikaku li {
  line-height: 2.5em;
  font-size: 0.65em;
}

.list-kome li:before {
  content: "＊";
  margin-right: 1em;
  color: pink;
}

.list-kome li {
  line-height: 3em;
}

.list-daiya {
  margin: auto 0;
}

.list-daiya li:before {
  content: "◆";
  margin: auto 1em;
  color: #222;
}

.list-daiya li {
  line-height: 3em;
  font-size: 1em;
}

@media (min-width: 834px) {
  .list-daiya li {
    font-size: 1.3em;
  }
}

/* ============================================================
   4. テーブル
   ============================================================ */

/* --- 4-1. 2列テーブル .basic-table（PCがベース） --- */

.basic-table {
  display: table;
  width: 75%;
  height: auto;
  margin: auto;
  box-sizing: border-box;
}

.basic-table th,
.basic-table td {
  vertical-align: baseline;
  padding: 0.75em 0;
  line-height: 2.25em;
  border-right: dotted 1px #999;
  border-bottom: dotted 1px #999;
}

.basic-table th:first-child,
.basic-table td:first-child {
  border-left: dotted 1px #999;
}

.basic-table a {
  font-size: 1.125em !important;
  font-weight: normal !important;
}

.basic-table th {
  vertical-align: middle;
  font-size: 1.35em;
  padding-left: 0.25em;
  text-align: left;
  background-color: #eee;
  width: 40%;
}

.basic-table td {
  vertical-align: top;
  font-size: 1.35em;
  padding: 0.25em;
  width: 60%;
}

/* 料金表（中央揃え・上線あり） */
.ryokin th,
.ryokin td {
  font-size: 1.35em;
  vertical-align: middle;
  border-top: dotted 1px #999;
}

/* 上線だけ付けたいとき */
.table-top th,
.table-top td {
  border-top: dotted 1px #999;
}

.basic-table .komidashi {
  font-size: 1.15em;
  line-height: 2.5em;
  text-decoration: underline;
}

.table-text td {
  vertical-align: top;
  font-size: 1em;
  width: 70%;
}

.explanation td {
  vertical-align: top;
  padding: 0.35em;
  line-height: 2.25em;
  font-size: 1em;
  text-align: justify;
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
  .basic-table {
    width: 85%;
  }
  .basic-table th {
    padding-left: 0;
    text-align: center;
  }
  .ryokin th,
  .ryokin td {
    font-size: 1.25em;
  }
  .ryokin th {
    padding-left: 0.25em;
    text-align: left;
  }
  .basic-table .komidashi {
    font-size: 1.2em;
  }
  .table-text td {
    font-size: 1.1em;
  }
  .explanation td {
    padding: 0.25em;
    line-height: 2em;
    font-size: 1em;
  }
}

@media (max-width: 767px) {
  .basic-table {
    width: 100%;
  }
  .basic-table a {
    font-size: 0.875em !important;
  }
  .basic-table th {
    font-size: 0.925em;
    text-align: center;
  }
  .basic-table td {
    font-size: 0.875em;
  }
  .ryokin th,
  .ryokin td {
    font-size: 1em;
  }
  .basic-table .komidashi {
    font-size: 1em;
  }
  .table-text td {
    font-size: 0.875em;
  }
  .explanation td {
    padding: 0.25em;
    line-height: 1.75em;
    font-size: 0.875em;
  }
}

/* --- 4-2. 横スクロール枠 .el-force-scroll（スマホで横スクロール） --- */

.el-force-scroll {
  width: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 3em 0;
}

.el-force-scroll .basic-table {
  min-width: 100% !important;
  width: 100%;
  table-layout: fixed;
}

.el-force-scroll .basic-table th {
  width: 30%;
  padding-left: 0.5em;
}

.el-force-scroll .basic-table td {
  padding-left: 0.5em;
  width: 70%;
}

@media (max-width: 767px) {
  .el-force-scroll {
    overflow-x: auto;
    margin-bottom: 1.25em;
  }
  .el-force-scroll .basic-table {
    min-width: 900px !important;
  }
}

.el-force-scroll::-webkit-scrollbar {
  height: 0.65em;
  display: block;
}

.el-force-scroll::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 10px;
}

.el-force-scroll::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

.el-force-scroll::-webkit-scrollbar-thumb:hover {
  background: #005bac;
}

/* --- 4-3. LP用テーブル .elp-table（3列の料金表 --fee を含む） --- */

.elp-scroll {
  overflow-x: auto;
  margin: 16px 0 24px;
}

.elp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.elp-table thead th {
  background: var(--elp-navy);
  color: var(--elp-white);
  padding: 13px 18px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.elp-table tbody tr td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--elp-gray-m);
  vertical-align: top;
  line-height: 1.75;
}

.elp-table tbody tr:nth-child(even) td {
  background: var(--elp-gray-l);
}

/* 3列（料金表）：18% / 24% / 58% */
.elp-table--fee tbody tr td:nth-child(1) {
  font-weight: 600;
  width: 18%;
}

.elp-table--fee tbody tr td:nth-child(2) {
  font-weight: 700;
  color: var(--elp-navy);
  width: 24%;
}

.elp-table--fee tbody tr td:nth-child(3) {
  width: 58%;
  font-size: 0.87rem;
  color: #4a4540;
}

@media (max-width: 767px) {
  .elp-table {
    font-size: 0.8rem;
  }
  .elp-table thead th,
  .elp-table tbody tr td {
    padding: 10px;
  }
  .elp-table--fee tbody tr td:nth-child(1),
  .elp-table--fee tbody tr td:nth-child(2) {
    white-space: normal;
  }
}

/* --- 4-4. 4列テーブル（列幅は変数で切替） ---
   .simple-table       : 16% / 28% / 28% / 28%（見た目つき）
   .elp-table--4col-note: 20% / 20% / 20% / 40%（最終列＝備考。幅だけ指定）
   ※ 列幅を変えたいときは --c1～--c4 を書き換えるだけ */

.simple-table {
  --c1: 16%; --c2: 28%; --c3: 28%; --c4: 28%;
  table-layout: fixed;
  min-width: 780px;
  border-collapse: collapse;
}

.elp-table--4col-note {
  --c1: 20%; --c2: 20%; --c3: 20%; --c4: 40%;
  width: 100%;
  table-layout: fixed;
}

.simple-table th:nth-child(1), .simple-table td:nth-child(1),
.elp-table--4col-note th:nth-child(1), .elp-table--4col-note td:nth-child(1) { width: var(--c1); }

.simple-table th:nth-child(2), .simple-table td:nth-child(2),
.elp-table--4col-note th:nth-child(2), .elp-table--4col-note td:nth-child(2) { width: var(--c2); }

.simple-table th:nth-child(3), .simple-table td:nth-child(3),
.elp-table--4col-note th:nth-child(3), .elp-table--4col-note td:nth-child(3) { width: var(--c3); }

.simple-table th:nth-child(4), .simple-table td:nth-child(4),
.elp-table--4col-note th:nth-child(4), .elp-table--4col-note td:nth-child(4) { width: var(--c4); }

.simple-table th,
.simple-table td {
  padding: 10px 12px;
  border: 1px solid #ddd;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.6;
}

.simple-table thead th {
  background: var(--elp-navy);
  font-weight: bold;
  text-align: center;
  color: #ffffff;
}

/* 備考（4列目）は長文想定：折り返し＆左寄せ */
.elp-table--4col-note td:nth-child(4) {
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* --- 4-5. 見出し行（最初の行のth）をネイビー背景にする .table-head-navy ---
   使い方：<table class="... table-head-navy"> を付けるだけ。
   これまで th ごとに書いていた
     class="gold-p-l" style="text-align:center; background-color:#0d1f3c; font-weight:bold;"
   は不要になります（th側の class と style は外してOK）。
   効く範囲：
     ・thead がある表 → thead の th だけ
     ・thead がない表 → 最初の行の th だけ
   本文の行の th（左端の行見出し）には効きません。 */

.table-head-navy thead th,
.table-head-navy tbody:first-child tr:first-child th {
  background-color: #0d1f3c;
  color: var(--silver);
  font-weight: bold;
  text-align: center;
  font-size: 1.25rem;
}

@media (min-width: 768px) {
  .table-head-navy thead th,
  .table-head-navy tbody:first-child tr:first-child th {
    font-size: 1.5em;
  }
}

/* ============================================================
   5. Q&A（アコーディオン）
   ------------------------------------------------------------
   ※ 2種類が並存中（いずれ LP版 に統一し、旧版は削除予定）
     5-1. 旧版  : .qa_list            ← 削除予定
     5-2. LP版  : #elp-lp-faq .qa_list（旧版の上に色などを上書き）
   ※ CSS更新時：editor-style.css では dd の display を block に
   ============================================================ */

/* --- 5-1. 旧版 .qa_list（削除予定） --- */

.qa_list {
  --qa-fs: 1.25em;
  display: block;
  margin: 3em auto;
  width: 70%;
  height: auto;
  box-sizing: border-box;
}

.qa_list dl {
  margin-bottom: 0.5em;
}

.qa_list dt {
  display: block;
  width: auto;
  margin: 0 auto 0.25em;
  padding: 0.35em;
  font-weight: bold;
  font-size: var(--qa-fs);
  line-height: 2em;
  border-radius: 5px;
  background-color: #f4e1be;
}

.qa_list dt::before {
  content: "Q：";
  font-weight: bold;
  font-size: var(--qa-fs);
}

.qa_list dt::after {
  content: "+";
  float: right;
  font-size: 1.5em;
  transition: transform 0.5s;
}

.qa_list dd {
  display: none; /* CSS更新時：editor-style.cssでは block に */
  width: auto;
  margin: 0 auto 1.15em;
  padding: 0.35em;
  border-radius: 0.35em;
  border: dotted 1px #666;
  font-size: var(--qa-fs);
  line-height: 2em;
}

.qa_list dd::before {
  content: "A：";
  font-weight: bold;
  font-size: var(--qa-fs);
}

.click_deg::after {
  transform: rotateZ(135deg);
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
  .qa_list {
    --qa-fs: 1.15em;
    width: 80%;
  }
}

@media (max-width: 767px) {
  .qa_list {
    --qa-fs: 1em;
    width: 100%;
  }
  .qa_list dl {
    margin-bottom: 0.75em;
  }
  .qa_list dd {
    margin: 0 auto;
  }
}

/* --- 5-2. LP版（#elp-lp-faq 内：旧版に上書き） --- */

#elp-lp-faq .qa_list dt {
  background-color: #e0ddd6;
  color: var(--elp-navy) !important;
  font-size: 0.95rem !important;
}

#elp-lp-faq .qa_list dd {
  background-color: #E6E3DE;
  color: var(--elp-text) !important;
  font-size: 0.92rem !important;
  line-height: 1.85 !important;
  opacity: 0.9;
  border: none;
}

#elp-lp-faq .qa_list dd .text-link {
  color: #069;
}

#elp-lp-faq .qa_list dd .text-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ============================================================
   6. リンクボタン・CTA
   ------------------------------------------------------------
   見分け方（見た目）
     .notice-box a   ：枠線＋影の白いボタン。ホバーで上下に線が伸びる（新着・カテゴリ別リンク）
     .in-link        ：黒背景・白文字の横長ボタン。右に矢印（内部リンク／16文字まで）
     .out-link       ：枠線つきカード＋左上に黒いラベル（外部リンク）
     .intro-link     ：右寄せ・下線がホバーで黒く伸びる（投稿用の自己紹介リンク）
     .elp-btn--primary：黒グラデの高級感ボタン。押すと沈む
     .elp-btn--secondary：白抜き・紺枠（ホバーで紺ベタ）
     .elp-btn--outline-gold：ダーク背景用・金枠（ホバーで金ベタ）
     .cta-box        ：水色系の枠のお問い合わせ誘導ボックス＋丸型 .cta-button
   ============================================================ */

/* --- 6-1. 新着情報リンク・カテゴリ別リンク .notice-box a --- */

.notice-box a {
  position: relative;
  display: block;
  margin: 1em auto;
  padding: 1em;
  width: 50%;
  letter-spacing: 0.1em;
  font-weight: bold;
  color: #222;
  text-align: center;
  border: 1px solid #777;
  background-color: #fcfcfc;
  box-shadow: 0.15em 0.15em 0.5em 0 #aaa;
  opacity: 1 !important;
}

.notice-box a:before,
.notice-box a:after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #777;
}

.notice-box a:before {
  right: 3px;
}

.notice-box a:after {
  left: 3px;
}

.notice-box a:hover:before,
.notice-box a:hover:after {
  top: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  transition: width 0.4s;
}

.notice-box a:hover:after {
  top: auto;
  right: 0;
  left: auto;
  bottom: 2px;
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
  .notice-box a {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .notice-box a {
    padding: 0.5em;
    width: 90%;
  }
}

/* --- 6-2. 内部リンク .in-link（16文字まで） --- */

.in-link {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 2em auto;
  padding: 1em 0;
  font-weight: bold;
  width: 90%;
  font-size: 1em;
  letter-spacing: 0.15em;
  color: #fff;
  background-color: #222;
  transition: 0.3s ease-in-out;
}

.in-link:before,
.in-link:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.6rem;
  display: block;
  transition: all 0.3s;
}

.in-link:before {
  width: 1.4rem;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
}

.in-link:after {
  opacity: 0;
  width: 0;
  height: 0;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.in-link:hover {
  opacity: 0.8;
}

.in-link:hover:before {
  width: 2rem;
}

.in-link:hover:after {
  opacity: 1;
  width: 10px;
  height: 10px;
}

@media (max-width: 767px) {
  .in-link {
    padding: 0.75em 0.25em;
    width: 100%;
    letter-spacing: 0.1em;
  }
}

/* --- 6-3. 外部リンク .out-link --- */
/* ※ .out-link_label::before / .out-link_site::before はアイコン用の枠です。
     元は content が空（`content: ;`＝無効）で何も表示されていませんでした。
     表示したい場合は、コメントアウトした content の行を有効にして
     文字（例：外部サイトを示す「↗」など）を入れてください。 */

.out-link-outer {
  display: block;
  width: 90%;
  margin: 4em auto 1em auto;
  box-sizing: border-box;
}

.out-link {
  position: relative;
  display: block;
  margin: 0;
  padding: 0.5em 0.25em;
  border: 0.15em solid #666;
  text-decoration: none;
  transition: 0.5s;
}

.out-link_label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5em 0.75em;
  background-color: #222;
  color: #fff;
  font-size: 0.8em;
  transform: translate(-2px, -100%);
  border-radius: 6px 6px 0 0;
}

.out-link_label::before {
  /* content: ""; ← アイコン文字を入れる */
  font-size: 0.75em;
  font-weight: bold;
  color: #fff;
  margin-right: 0.45em;
}

.out-link_body {
  display: flex;
  flex-direction: column-reverse;
  width: auto;
  margin: 0.5em;
}

.out-link_site {
  color: #333;
  font-size: 0.8em;
}

.out-link_site::before {
  /* content: ""; ← アイコン文字を入れる */
  font-weight: bold;
  margin-right: 0.7em;
}

.out-link_title {
  margin-bottom: 0.5em;
  padding: 0;
  color: #222;
  font-size: 1em;
  font-weight: bold;
}

.out-link:hover {
  background-color: #fefefc;
  transform: translateY(-4px);
  box-shadow: 0 0.35em 0.35em 0 rgba(0, 0, 0, 0.2);
}

/* --- 6-4. 投稿用 自己紹介リンク .intro-link --- */

.intro-link {
  position: relative;
  display: table;
  margin: 2em 0.5em 2em auto;
  padding: 0.25em;
  text-align: right;
  color: #222;
  transition: 0.3s ease-in-out;
  font-weight: 600;
}

.intro-link::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 100%;
  height: 3px;
  background: rgba(150,150,150,0.3);
  transform: translateX(-50%);
}

.intro-link::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #222;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

.intro-link:hover {
  opacity: 0.7;
}

.intro-link:hover::after {
  transform: scale(1, 1);
}

/* --- 6-5. ボタン .elp-btn 系 --- */

.elp-btn {
  display: inline-block;
  font-weight: 700;
  border-radius: var(--elp-radius);
  letter-spacing: .04em;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

/* 高級感のある黒グラデ：押すと影の分（3px）沈む */
.elp-btn--primary {
  background: linear-gradient(180deg, #4a4a4a 0%, #222 100%);
  color: #fffffa;
  font-size: 1.05rem;
  margin: 1.5em 0;
  padding: 18px 48px;
  border: 1px solid #d9d0bd;
  box-shadow: 0 3px 0 #0f0f0f, 0 6px 10px rgba(0, 0, 0, 0.25);
  transition: transform .15s, box-shadow .15s, border-color .2s;
}

.elp-btn--primary:hover {
  background: linear-gradient(180deg, #555 0%, #2a2a2a 100%);
  border-color: #fffffa;
  color: #fffffa;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #0f0f0f, 0 8px 14px rgba(0, 0, 0, 0.28);
}

.elp-btn--primary:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #0f0f0f, inset 0 2px 6px rgba(0, 0, 0, 0.45);
  transition-duration: .05s;
}

/* 白抜き・紺枠 */
.elp-btn--secondary {
  background: transparent;
  color: var(--elp-navy);
  font-size: 0.95rem;
  padding: 14px 36px;
  border: 2px solid var(--elp-navy);
}

.elp-btn--secondary:hover {
  background: var(--elp-navy);
  color: var(--elp-white);
  text-decoration: none;
}

/* ダーク背景用・金枠 */
.elp-btn--outline-gold {
  background: transparent;
  color: var(--elp-gold-l);
  font-size: 0.95rem;
  padding: 14px 40px;
  border: 2px solid var(--elp-gold);
}

.elp-btn--outline-gold:hover {
  background: var(--elp-gold);
  color: var(--elp-navy-d);
  text-decoration: none;
}

.elp-btn-note {
  font-size: 0.82rem;
  color: #b0bac8;
  margin: 0 1em;
}

.elp-btn-wrap {
  margin-top: 32px;
}

.elp-btn-wrap--center {
  text-align: center;
  margin-top: 1em;
}

@media (max-width: 767px) {
  .elp-btn--primary {
    font-size: 0.95rem;
    padding: 0.875em 3em;
  }
  .elp-btn--outline-gold {
    display: block;
    padding: 14px 20px;
  }
}

/* --- 6-6. CTAボックス .cta-box（水色系）＋丸型ボタン .cta-button --- */

.cta-box {
  margin: 32px 0;
  padding: 28px 24px;
  border: 1px solid #d7e3ef;
  border-radius: 12px;
  background: #f8fbfe;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.cta-box h3 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  line-height: 1.5;
  color: #1f3c5a;
}

.cta-box p {
  margin: 0 0 14px;
  line-height: 1.9;
  text-align: center;
}

.cta-box .note {
  margin-top: 14px;
  font-size: 0.92rem;
  line-height: 1.8;
  color: #5f6b76;
}

a.cta-button,
.cta-box .cta-button {
  display: inline-block;
  margin-top: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  background: #2c6aa0;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px rgba(44, 106, 160, 0.18);
}

a.cta-button:hover,
.cta-box .cta-button:hover {
  background: #245782;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(44, 106, 160, 0.22);
}

a.cta-button:focus,
.cta-box .cta-button:focus {
  outline: 2px solid #8bb7de;
  outline-offset: 2px;
}

.cta-top {
  margin-top: 28px;
}

.cta-middle {
  margin: 40px 0;
  background: #f5f9fc;
}

.cta-bottom {
  margin-top: 36px;
  background: #f7fbf7;
  border-color: #d8e7d8;
}

.cta-bottom h3 {
  color: #284b35;
}

.cta-box .in-link + .note,
.cta-box .cta-button + .note {
  margin-top: 14px;
}

@media screen and (max-width: 767px) {
  .cta-box {
    margin: 24px 0;
    padding: 22px 16px;
    border-radius: 10px;
  }
  .cta-box h3 {
    font-size: 1.15rem;
  }
  a.cta-button,
  .cta-box .cta-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
  }
}

/* ============================================================
   7. フロー（手順の縦並び）
   ------------------------------------------------------------
   見分け方（見た目）
     A. .request-flow .flow-list（サイト共通）
        各項目の下に「ベージュの線＋下向き三角」の矢印。
        見出し(dt)は点線の下線、左に小さなベージュのラベル（.chohokei）。
     B. .elp-flow__list（LP用）
        左に金色の「STEP」バッジ、その下から次へ縦線がつながる。
        見出し(dt)は紺色の太字。
   ============================================================ */

/* --- 7-A. サイト共通 .request-flow / .flow-list --- */

.request-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 70%;
  height: auto;
  box-sizing: border-box;
}

.request-flow ul {
  padding: 0;
}

.request-flow li {
  list-style-type: none;
}

.request-flow dd {
  margin-left: 0;
  font-size: 0.92rem;
}

.flow-list > li {
  padding: 40px 10px;
}

.flow-list > li:not(:last-child) {
  position: relative;
  border-bottom: 3px solid #e3d1ad;
}

.flow-list > li:not(:last-child)::before,
.flow-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 15%;
  border: solid transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.flow-list > li:not(:last-child)::before {
  border-width: 22px;
  border-top-color: #e3d1ad;
}

.flow-list > li:not(:last-child)::after {
  border-width: 18px;
  border-top-color: #fff;
}

.flow-list > li dl {
  margin: 0;
}

.flow-list > li dl dt {
  display: flex;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  font-size: 1.3em;
  font-weight: 600;
  border-bottom: 2px dotted #878787;
}

.flow-list > li dl dt .chohokei {
  display: inline-block;
  margin-right: 0.5em;
  padding: 5px 10px;
  font-size: 0.6em;
  color: #fff;
  background: #e3d1ad;
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
  .request-flow {
    width: 80%;
  }
  .request-flow dd {
    font-size: 1em;
  }
}

@media (max-width: 767px) {
  .request-flow {
    width: 100%;
  }
  .request-flow dd {
    font-size: 0.875em;
  }
}

/* --- 7-B. LP用 .elp-flow__list --- */

.elp-flow__list {
  list-style: none;
  padding: 0;
}

.elp-flow__list li {
  position: relative;
  padding: 0 0 0 88px;
  margin-bottom: 40px;
}

.elp-flow__list li::after {
  content: '';
  position: absolute;
  left: 32px;
  top: 46px;
  width: 2px;
  height: calc(100% - 8px);
  background: var(--elp-gray-m);
}

.elp-flow__list li:last-child::after {
  display: none;
}

.elp-flow__list li dl dt {
  font-weight: 700;
  font-size: 1rem;
  color: var(--elp-navy);
  margin-bottom: 6px;
}

.elp-flow__list li dl dd {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--elp-text);
}

.elp-step-badge {
  display: inline-block;
  background: var(--elp-gold);
  color: var(--elp-navy-d);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 2px;
  position: absolute;
  left: 0;
  top: 2px;
}

@media (max-width: 1280px) {
  .elp-flow__list li {
    padding-left: 76px;
  }
}

@media (max-width: 767px) {
  .elp-flow__list li {
    padding-left: 60px;
    margin-bottom: 28px;
  }
  .elp-flow__list li::after {
    left: 24px;
  }
  .elp-step-badge {
    font-size: 0.62rem;
    padding: 3px 7px;
  }
}

/* ============================================================
   8. アコーディオン .elp-acc（LP共通：JSで開閉）
   ------------------------------------------------------------
   使用ページ：創業融資LP／財務コンサル（予定：資金繰り・CF改善LP）
   見た目：濃いグレーの見出し帯＋▼アイコン。開くと白地に
           業種名（dt）とお悩み（dd）が並ぶ。ゴールドの点線で区切り。
   ※ CSS更新時（editor-style.css）：.elp-acc__panel を
       max-height:none !important; opacity:1 !important;
       overflow:visible !important; にして常に開いた表示にする
   ============================================================ */

.elp-acc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 70%;
  margin: auto;
}

@media (max-width: 1280px) {
  .elp-acc {
    width: 85%;
  }
}

@media (max-width: 767px) {
  .elp-acc {
    width: 90%;
  }
}

.elp-acc__block {
  border: 1px solid #e3e6ec;
  border-radius: 6px;
  background: #0d1f3c;
  overflow: hidden;
}

.elp-acc__block.is-open {
  border-color: #c9a84c;
}

/* 見出し（クリックで開閉） */
.elp-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 18px 24px;
  cursor: pointer;
  background: #2E333D;
  color: #fff;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.4;
  transition: opacity .2s ease;
}

.elp-acc__head:hover {
  opacity: .85;
}

.elp-acc__head::after {
  display: none;
}

/* ▼アイコン：開くと180度回転して▲ */
.elp-acc__icon {
  flex: 0 0 auto;
  color: #f0f2f5;
  font-size: .8em;
  transition: transform .38s cubic-bezier(0.65, 0, 0.35, 1);
}

.elp-acc__block.is-open .elp-acc__icon {
  transform: rotate(180deg);
}

/* パネル：max-height と opacity で開閉アニメ */
.elp-acc__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  transition: max-height .38s cubic-bezier(0.65, 0, 0.35, 1),
              opacity    .38s cubic-bezier(0.65, 0, 0.35, 1);
}

/* dt：業種名 */
.elp-acc__term {
  margin: 0;
  padding: 14px 24px 4px;
  font-weight: 700;
  color: #0d1f3c;
  background: #fff;
}

.elp-acc__block .elp-acc__term:first-of-type {
  padding-top: 18px;
}

/* dd：お悩み＋リンク */
.elp-acc__desc {
  margin: 0;
  padding: 0 24px 14px;
  font-size: .9em;
  line-height: 1.6;
  color: #555;
  background: #fff;
  border-bottom: 1px dotted #c9a84c !important;
}

.elp-acc__desc:last-child {
  padding-bottom: 20px;
}

.elp-acc__desc:last-of-type {
  border-bottom: none !important;
}

.elp-acc__desc a.text-link {
  color: #0d1f3c;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .elp-acc__panel,
  .elp-acc__icon {
    transition: none;
  }
}

@media (max-width: 767px) {
  .elp-acc__head {
    padding: 14px 16px;
    font-size: 1.02em;
  }
  .elp-acc__term {
    padding: 12px 16px 4px;
  }
  .elp-acc__desc {
    padding: 0 16px 12px;
    font-size: .86em;
  }
}

/* ============================================================
   9. その他の共通
   ============================================================ */

.page-area {
  margin-top: 3em;
}

/*
============================================================
 1. ベース
 初期化・見出し・ヘッダー・ナビ・パンくず・サイドバー・フッター・固定CTA
============================================================
*/

/* 初期化 */

html,body,h1,h2,div,p,span,a,ul,ol,li,dl,dt,dd,small,header,nav,main,article,section,aside,footer,#containar,#contents {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  text-align: left;
}

#container,header,nav,#contents,main,article,section,div,aside,footer {
  display: block;
  box-sizing: border-box;
}

#container {
  width: 100%;
  margin: auto;
}

/*---------- 基本共通事項-基本事項の調整　---------------*/

/* 基本フォントサイズ */

html {
  font-size: 16px;
}

body {
  font-family: 'Noto Serif JP', serif;
  line-height: 1.5;
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  /* 各ページをふわっと表示させる */
  animation: fadeIn 0s ease 0s 1 normal;
  -webkit-animation: fadeIn 0s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* サービスメニューと事務所案内はふわっと出る */

/* ふわっとでてくる */

.fadein {
  opacity: 0;
  /* CSS更新時：editor-style.cssでは 1 に */
}

.fadein1 {
  opacity: 0;
  /* CSS更新時：editor-style.cssでは 1 に */
  transform: translateY(50px);
  transition: all 1.5s;
}

a {
  outline: none;
  border: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
  display: block;
  margin-top: 0.25em;
  margin-bottom: 0.5em;
  font-size: 100%;
  font-weight: bold;
  letter-spacing: 0.1em;
}

h1,h2,h3,h4,h5,h6,li,a,p,nav {
  color: #222;
}

p {
  font-size: 1em;
  line-height: 2em;
  margin-bottom: 1.25em;
  letter-spacing: 0.1em;
}

@media(min-width: 960px) {
  p {
    font-size: 1.25em;
    line-height: 2.25em;
    margin-bottom: 1.25em;
  }
}

li {
  list-style-type: none;
  line-height: 2em;
  letter-spacing: 0.1em;
}

img {
  outline: none;
  border: none;
}

.catch img {
  display: none;
}

/*
   ============================================
   headerタグ用
   ============================================
*/

/*---------- 基本共通事項-ヘッダー ---------------*/

@media(min-width: 1281px) {
  #home > img {
    margin-bottom: 8em;
  }
  .header {
    margin-bottom: 4em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  #home > img {
    margin-bottom: 5em;
  }
  .header {
    margin-bottom: 2em;
  }
}

@media(max-width: 767px) {
  #home > img {
    margin-bottom: 3em;
  }
  .header {
    margin-bottom: 2em;
  }
}

/*----- タイトルボックス-ロゴとキャッチコピー ----------*/

@media(min-width: 1281px) {
  .title-box {
    display: flex;
    justify-content: flex-start;
  }
  .logo-box {
    margin: auto 0;
  }
  .logo-box img {
    width: 100%;
  }
  .cacth-midasi {
    margin: auto 0 auto 3em;
  }
  .cacth-midasi .site-title {
    font-size: 2.5em;
    margin-top: 1.5em;
  }
  .cacth-midasi .catch-copy {
    font-size: 1.75em;
    line-height: 0.25em !important;
    margin: 1.5em auto !important;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .title-box {
    display: flex;
    justify-content: flex-start;
    margin-top: 3em;
  }
  .logo-box {
    margin: auto 0;
  }
  .logo-box img {
    width: 90%;
  }
  .cacth-midasi {
    margin: auto 0 auto 1em;
  }
  .cacth-midasi .site-title {
    font-size: 1.75em;
    margin-bottom: -1em;
  }
  .cacth-midasi .catch-copy {
    margin-bottom: 0;
    font-size: 1.5em;
  }
}

@media(max-width: 767px) {
  .title-box {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.75em;
    width: 80%;
  }
  .logo-box {
    margin: auto 0;
    width: 20%;
  }
  .logo-box img {
    width: 100%;
  }
  .cacth-midasi {
    margin: 1em auto 1em 0.5em;
    width: 80%;
  }
  .cacth-midasi .site-title {
    font-size: 0.875em;
    margin-bottom: -1.5em;
  }
  .cacth-midasi .catch-copy {
    margin-bottom: 0;
    font-size: 0.725em;
    line-height: 1.5em;
  }
}

/*----- グローバルナビゲーション ----------*/

/* ハンバーガーメニューボタン */

@media(min-width: 1281px) {
  #nav-toggle {
    position: fixed;
    top: 55px;
    right: 55px;
    height: 55px;
    cursor: pointer;
    > div {
      position: relative;
      width: 70px;
    }
    span {
      width: 100%;
      height: 1px;
      left: 0;
      display: block;
      background: #333;
      position: absolute;
      transition: transform .6s ease-in-out, top .5s ease;
      &:nth-child(1) {
        top: 0;
      }
      &:nth-child(2) {
        top: 23px;
      }
      &:nth-child(3) {
        top: 46px;
      }
    }
    &:hover span:nth-child(1) {
      top: 3px;
    }
    &:hover span:nth-child(3) {
      top: 40px;
    }
  }
  .open {
    #nav-toggle span {
      background: #fff;
      &:nth-child(1) {
        top: 15px;
        transform: rotate(45deg);
      }
      &:nth-child(2) {
        top: 15px;
        width: 0;
        left: 50%;
      }
      &:nth-child(3) {
        top: 15px;
        transform: rotate(-45deg);
      }
    }
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  #nav-toggle {
    position: fixed;
    top: 55px;
    right: 55px;
    height: 60px;
    cursor: pointer;
    > div {
      position: relative;
      width: 55px;
    }
    span {
      width: 100%;
      height: 1px;
      left: 0;
      display: block;
      background: #333;
      position: absolute;
      transition: transform .6s ease-in-out, top .5s ease;
      &:nth-child(1) {
        top: 0;
      }
      &:nth-child(2) {
        top: 23px;
      }
      &:nth-child(3) {
        top: 46px;
      }
    }
    &:hover span:nth-child(1) {
      top: 3px;
    }
    &:hover span:nth-child(3) {
      top: 40px;
    }
  }
  .open {
    #nav-toggle span {
      background: #fff;
      &:nth-child(1) {
        top: 15px;
        transform: rotate(45deg);
      }
      &:nth-child(2) {
        top: 15px;
        width: 0;
        left: 50%;
      }
      &:nth-child(3) {
        top: 15px;
        transform: rotate(-45deg);
      }
    }
  }
}

@media(max-width: 767px) {
  #nav-toggle {
    position: fixed;
    top: 25px;
    right: 25px;
    height: 32px;
    cursor: pointer;
    > div {
      position: relative;
      width: 36px;
    }
    span {
      width: 100%;
      height: 1px;
      left: 0;
      display: block;
      background: #333;
      position: absolute;
      transition: transform .6s ease-in-out, top .5s ease;
      &:nth-child(1) {
        top: 0;
      }
      &:nth-child(2) {
        top: 14px;
      }
      &:nth-child(3) {
        top: 28px;
      }
    }
    &:hover span:nth-child(1) {
      top: 4px;
    }
    &:hover span:nth-child(3) {
      top: 23px;
    }
  }
  .open {
    #nav-toggle span {
      background: #fff;
      &:nth-child(1) {
        top: 15px;
        transform: rotate(45deg);
      }
      &:nth-child(2) {
        top: 15px;
        width: 0;
        left: 50%;
      }
      &:nth-child(3) {
        top: 15px;
        transform: rotate(-45deg);
      }
    }
  }
}

/* ハンバーガーメニュー・×ボタンは常に最前面 */

#nav-toggle {
  z-index: 1000;
}

#container {
  z-index: 900;
}

/* メニューを左からスライドイン */

#gloval-nav {
  background: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 27px;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
}

#gloval-nav {
  a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    transition: color .6s ease;
    &:hover {
      color: #666;
    }
  }
  ul {
    list-style: none;
    li {
      opacity: 0;
      transform: translateX(200px);
      transition: transform .6s ease, opacity .2s ease;
      &:nth-child(2) {
        transition-delay: .15s;
      }
      &:nth-child(3) {
        transition-delay: .3s;
      }
      &:nth-child(4) {
        transition-delay: .45s;
      }
      &:nth-child(5) {
        transition-delay: .6s;
      }
      &:nth-child(6) {
        transition-delay: .75s;
      }
      &:nth-child(7) {
        transition-delay: .9s;
      }
      &:nth-child(8) {
        transition-delay: 1.05s;
      }
      &:nth-child(9) {
        transition-delay: 1.2s;
      }
    }
  }
}

@media(min-width: 1281px) {
  .open {
    overflow: hidden;
    #gloval-nav {
      visibility: visible;
      opacity: 1;
    }
    #gloval-nav li {
      opacity: 1;
      transform: translateX(0);
      transition: transform 1s ease, opacity .9s ease;
    }
  }
  #gloval-nav {
    display: block;
  }
  #gloval-nav nav {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  #gloval-nav nav div div {
    height: 50%;
  }
  .sub-menu {
    margin-left: 1em;
    font-size: 0.75em;
  }
  .sub-menu li {
    line-height: 1.25em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .open {
    overflow: hidden;
    #gloval-nav {
      visibility: visible;
      opacity: 1;
    }
    #gloval-nav li {
      font-size: 0.625em;
      opacity: 1;
      transform: translateX(0);
      transition: transform 1s ease, opacity .9s ease;
    }
  }
  #gloval-nav {
    display: block;
    overflow-y: scroll;
    scrollbar-width: 0.35em;
    scrollbar-color: #fefefe #eee;
	  padding: 0.35em;
  }
  #gloval-nav nav {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  #gloval-nav nav div div {
    height: 50%;
  }
  .sub-menu {
    margin-left: 1em;
    font-size: 1.25em;
  }
  .sub-menu li {
    line-height: 1.25em;
  }
}

@media(max-width: 767px) {
  .open {
    overflow: hidden;
    #gloval-nav {
      visibility: visible;
      opacity: 1;
    }
    #gloval-nav li {
      font-size: 0.75em;
      opacity: 1;
      transform: translateX(0);
      transition: transform 1s ease, opacity .9s ease;
    }
  }
  #gloval-nav {
    display: inline-grid;
    overflow-y: scroll;
    scrollbar-width: 0.35em;
    scrollbar-color: #fefefe #eee;
  }
  #gloval-nav nav {
    display: block;
    justify-content: normal;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  #gloval-nav nav div div {
    height: 50%;
    margin-left: 0.5em;
  }
  .sub-menu {
    margin-left: 1em;
    font-size: 1.15em;
  }
  .sub-menu li {
    line-height: 1.25em;
  }
}

/*----- パンくずリスト 前デバイス共通----------*/

.bread-outer {
  display: inline-block;
  margin: 1em 0 1em 0.5em;
}

.bread ol {
  padding: 0;
  list-style: none;
}

.bread li a {
  padding: 0.3em 0.1em;
  color: #222;
  font-size: 0.6em;
  text-decoration: none;
  vertical-align: middle;
  text-shadow: none;
}

.bread li a[href]:hover {
  text-decoration: underline;
}

.bread li {
  float: left;
  width: auto;
  line-height: 1em;
}

.bread li:after {
  content: '\003e';
  margin-left: 0.25em;
  margin-right: 0.25em;
  color: #222;
}

.bread li:last-child:after {
  content: none;
}

.bread i {
  font-size: 1.5em;
  margin-left: 0.25em;
}

.bread span {
  display: none;
}

/*
   ============================================
   mainタグ用
   ============================================
*/

/*---------- 基本共通事項-container ---------------*/

@media(min-width: 1281px) {
  #container {
    display: block;
    box-sizing: border-box;
    width: 80%;
    margin: auto;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  #container {
    display: block;
    box-sizing: border-box;
    width: 85%;
    margin: auto;
  }
}

@media(max-width: 767px) {
  #container {
    display: block;
    box-sizing: border-box;
    width: 95%;
    margin: auto;
  }
}

/*---------- 基本共通事項-各ページの画像の調整 ---------------*/

@media(min-width: 1281px) {
  .img100,
  .img80 {
    display: block;
    margin: auto;
  }
  .img100 {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .img80 {
    width: 70%;
    height: auto;
    box-sizing: border-box;
  }
  .img60 {
    display: block;
    margin: auto;
    width: 60%;
    height: auto;
    box-sizing: border-box;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .img100,
  .img80 {
    display: block;
    margin: auto;
  }
  .img100 {
    width: 90%;
    height: auto;
    box-sizing: border-box;
  }
  .img80 {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .img60 {
    display: block;
    margin: auto;
    width: 70%;
    height: auto;
    box-sizing: border-box;
  }
}

@media(max-width: 767px) {
  .img100,
  .img80,
  .img60 {
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
}

/* 個別ページのキャッチアイ画像大枠 */

@media(min-width: 1281px) {
  .main-headline {
    display: block;
    width: 90%;
    margin: auto;
    box-sizing: border-box;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .main-headline {
    display: block;
    width: 95%;
    margin: auto;
    box-sizing: border-box;
  }
}

@media(max-width: 767px) {
  .main-headline {
    display: block;
    width: 100%;
    margin: auto;
    box-sizing: border-box;
  }
}

/* 大枠内で全体に表示 */

.main-headline img {
  width: 100%;
  height: auto;
}

/* パンくずリスト上下余白調整 */

@media(min-width: 1281px) {
  .sub-header {
    display: inline-block;
    margin: 1em 0 6em 0;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .sub-header {
    display: inline-block;
    margin: 1em 0 4em 0;
  }
}

@media(max-width: 767px) {
  .sub-header {
    display: inline-block;
    margin: 0.5em 0 3em 0;
  }
}

/*---------- 基本共通事項-見出し ---------------*/

/* トップページのみの大見出し */

@media(min-width: 1281px) {
  #home h1,.page-main h1 {
    position: relative;
    display: block;
    margin: 0 auto 2em auto;
    padding: 0.5em 0;
    width: auto;
    text-align: center;
    font-weight: bold;
    font-size: 2.5em;
    box-sizing: border-box;
  }
  #home h1::before {
    content: '';
    position: absolute;
    left: auto;
    transform: translateX(-65%);
    rotate: 45deg;
    width: 3.5em;
    height: 3.5em;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #f4e1be;
    z-index: -1;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  #home h1,.page-main h1 {
    position: relative;
    display: block;
    margin: 0 auto 2em auto;
    padding: 0.5em 0;
    width: auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.875em;
    box-sizing: border-box;
  }
  #home h1::before {
    content: '';
    position: absolute;
    left: auto;
    transform: translateX(-65%);
    rotate: 45deg;
    width: 3.5em;
    height: 3.5em;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #f4e1be;
    z-index: -1;
  }
}

@media(max-width: 767px) {
  #home h1,.page-main h1 {
    display: block;
    position: relative;
    margin: 0 auto 1em auto;
    padding: 0.5em 0;
    width: auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.15em;
    box-sizing: border-box;
  }
  #home h1::before {
    content: '';
    position: absolute;
    left: 17%;
    top: 27%;
    transform: translateX(-65%);
    rotate: 45deg;
    width: 3.5em;
    height: 3.5em;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #f4e1be;
    z-index: -1;
  }
}

/* 大見出し */

@media(min-width: 1281px) {
  h1 {
    position: relative;
    display: block;
    margin: 1em;
    padding: 0.5em 0;
    width: auto;
    text-align: center;
    font-weight: bold;
    font-size: 2.5em;
    box-sizing: border-box;
  }
  h1::before {
    content: '';
    position: absolute;
    left: auto;
    transform: translateX(-65%);
    rotate: 45deg;
    width: 3.5em;
    height: 3.5em;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #f4e1be;
    z-index: -1;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  h1 {
    position: relative;
    display: block;
    margin: 1em;
    padding: 0.5em 0;
    width: auto;
    text-align: center;
    font-weight: bold;
    font-size: 2em;
    box-sizing: border-box;
  }
  h1::before {
    content: '';
    position: absolute;
    left: auto;
    transform: translateX(-65%);
    rotate: 45deg;
    width: 3.5em;
    height: 3.5em;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #f4e1be;
    z-index: -1;
  }
}

@media(max-width: 767px) {
  h1 {
    display: block;
    position: relative;
    margin: 1.5em auto;
    padding: 0.5em 0;
    width: auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.4em;
    box-sizing: border-box;
  }
  h1::before {
    content: '';
    position: absolute;
    left: 17%;
    top: 27%;
    transform: translateX(-65%);
    rotate: 45deg;
    width: 3.5em;
    height: 3.5em;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #f4e1be;
    z-index: -1;
  }
}

/* 中見出し */

@media(min-width: 1281px) {
  h2 {
    position: relative;
    margin: 2em auto;
    padding: 1em;
    width: fit-content;
    text-align: center;
    font-weight: bold;
    font-size: 2em;
  }
  h2::before,h2::after {
    position: absolute;
    content: '';
    width: 30%;
    height: 0.15em;
    background-color: #e1bff5;
  }
  h2::before {
    top: 0;
    left: 0;
  }
  h2::after {
    bottom: 0;
    right: 0;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  h2 {
    position: relative;
    margin: 2em auto;
    padding: 1em;
    width: fit-content;
    text-align: center;
    font-weight: bold;
    font-size: 1.75em;
  }
  h2::before,h2::after {
    position: absolute;
    content: '';
    width: 30%;
    height: 0.15em;
    background-color: #e1bff5;
  }
  h2::before {
    top: 0;
    left: 0;
  }
  h2::after {
    bottom: 0;
    right: 0;
  }
}

@media(max-width: 767px) {
  h2 {
    position: relative;
    margin: 2em auto;
    padding: 1em;
    width: fit-content;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
  }
  h2::before,h2::after {
    position: absolute;
    content: '';
    width: 30%;
    height: 0.15em;
    background-color: #e1bff5;
  }
  h2::before {
    top: 0;
    left: 0;
  }
  h2::after {
    bottom: 0;
    right: 0;
  }
}

/* 小見出し */

@media(min-width: 1281px) {
  h3 {
    margin: 2em 0 2em 1em;
    font-weight: bold;
    font-size: 1.75em;
  }
  h3::after {
    display: block;
    content: '';
    margin-top: 1em;
    width: 3.5em;
    height: 0.2em;
    background: #bff5d8;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  h3 {
    margin: 2em 0 2em 1em;
    font-weight: bold;
    font-size: 1.55em;
  }
  h3::after {
    display: block;
    content: '';
    margin-top: 1em;
    width: 3.5em;
    height: 0.2em;
    background: #bff5d8;
  }
}

@media(max-width: 767px) {
  h3 {
    margin: 2em 0 2em 0.35em;
    font-weight: bold;
    font-size: 1.2em;
  }
  h3::after {
    display: block;
    content: '';
    margin-top: 0.75em;
    width: 3.25em;
    height: 0.2em;
    background: #bff5d8;
  }
}

/* 最小見出し */

h4 {
  position: relative;
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  border-left: 4px solid #1E333D;
  background: none;
}
h4::before {
  content: none;
}

@media (min-width: 1281px) {
  h4 {
    font-size: 1.25em;
    padding: 0.2em 0 0.2em 0.7em;
    margin: 1.8em 0 0.8em;
  }
}

@media screen and (min-width: 768px) and (max-width: 1280px) {
  h4 {
    font-size: 1.2em;
    padding: 0.2em 0 0.2em 0.7em;
    margin: 1.6em 0 0.7em;
  }
}

@media (max-width: 767px) {
  h4 {
    font-size: 1.05em;
    padding: 0.15em 0 0.15em 0.6em;
    margin: 1.4em 0 0.6em;
  }
}

/*
   ============================================
   asideタグ用
   ============================================
*/

/*---------- 基本共通事項-サイドバー ---------------*/

/* 曜日フォントカラー　全デバイス共通 */

.business-hours .saturday {
  color: #0000ff;
  font-weight: bold;
}

.business-hours .sunday {
  color: #ff0000;
  font-weight: bold;
}

/*----- 営業時間・営業曜日 ----------*/

@media(min-width: 1281px) {
  .business-hours {
    width: 80%;
    margin: auto;
  }
  .business-hours table {
    width: 80%;
    margin: 0.75em auto;
    border: solid 0.0625em #000000;
    box-sizing: border-box;
  }
  .business-hours th:first-child {
    font-weight: bold;
  }
  .business-hours th {
    width: 20%;
    padding: 0.25em 0;
    font-size: 1.125em;
    border: solid 0.0625em #000000;
    text-align: center;
    font-weight: bold;
  }
  .business-hours td {
    width: 40%;
    padding: 0.25em 0;
    font-size: 1.125em;
    font-weight: bold;
    text-align: center;
    border: solid 0.0625em #000000;
  }
  .business-hours p {
    font-size: 1em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .business-hours {
    width: 80%;
    margin: auto;
  }
  .business-hours table {
    width: 100%;
    margin: 0.75em auto;
    border: solid 0.0625em #000000;
    box-sizing: border-box;
  }
  .business-hours th:first-child {
    font-weight: bold;
  }
  .business-hours th {
    width: 20%;
    padding: 0.25em 0;
    font-size: 1.125em;
    border: solid 0.0625em #000000;
    text-align: center;
    font-weight: bold;
  }
  .business-hours td {
    width: 40%;
    padding: 0.25em 0;
    font-size: 1.125em;
    font-weight: bold;
    text-align: center;
    border: solid 0.0625em #000000;
  }
  .business-hours p {
    font-size: 1em;
  }
}

@media(max-width: 767px) {
  .business-hours table {
    width: 100%;
    margin: 10px auto;
    border: solid 1px #000000;
    box-sizing: border-box;
  }
  .business-hours th:first-child {
    font-weight: bold;
  }
  .business-hours th {
    width: 20%;
    padding: 0.25em 0;
    font-size: 1em;
    border: solid 1px #000000;
    text-align: center;
    font-weight: bold;
  }
  .business-hours td {
    width: 40%;
    padding: 0.25em 0;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    border: solid 1px #000000;
  }
  .business-hours p {
    font-size: 0.75em;
  }
}

/*----- 混雑状況ボックス ----------*/

@media(min-width: 1281px) {
  .datetime-outer {
    display: table;
    margin: 2em auto;
    padding: 0.65em 1.3em;
    font-size: 1.75em;
    border: outset 0.15em #ddd;
  }
  .status p {
    margin-bottom: 0;
    text-align: center;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .datetime-outer {
    display: table;
    margin: 1.25em auto;
    padding: 0.55em 1.1em;
    font-size: 1.45em;
    border: outset 0.15em #ddd;
  }
  .status p {
    margin-bottom: 0;
    text-align: center;
  }
}

@media(max-width: 767px) {
  .datetime-outer {
    display: table;
    margin: 1.2em auto;
    padding: 0.4em 0.8em;
    font-size: 1.45em;
    border: outset 0.15em #ddd;
  }
  .status p {
    margin-bottom: 0;
    text-align: center;
  }
}

/*----- サーチボックス ----------*/

@media(min-width: 1281px) {
  .search-field {
    display: block;
    margin: 1em auto;
    padding: 0.35em;
    width: 80%;
    height: auto;
    font-size: 1.35em;
    border-radius: 0.5em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .search-field {
    display: block;
    margin: 1em auto;
    padding: 1em 0.5em;
    width: 80%;
    height: auto;
    font-size: 1.25em;
    border-radius: 0.5em;
  }
}

@media(max-width: 767px) {
  .search-field {
    display: block;
    margin: 0.5em auto;
    padding: 0.5em;
    width: 95%;
    height: auto;
    font-size: 1em;
    border-radius: 0.5em;
  }
}

/*
   ============================================
   footerタグ用
   ============================================
*/

/*---------- 基本共通事項-フッター　--------------------*/

@media(min-width: 1281px) {
  #footer {
    margin-bottom: 0;
  }
  .footer-upper ul {
    margin-top: -2em;
  }
  .footer-upper li {
    display: block;
    margin-left: 2em;
    margin-bottom: 1em;
    padding: 0.6em 0;
  }
  .footer-middle p {
    margin: 2em 0;
    text-align: right;
    font-size: 1em;
  }
  .footer-under p {
    text-align: center;
    font-size: 1em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  #footer {
    margin-bottom: 0;
  }
  .footer-upper ul {
    margin-top: -2em;
  }
  .footer-upper li {
    display: block;
    margin-left: 2em;
    margin-bottom: 1em;
    padding: 0.6em 0;
  }
  .footer-middle p {
    margin: 2em 0;
    text-align: right;
    font-size: 1em;
  }
  .footer-under p {
    text-align: center;
    font-size: 1em;
  }
}

@media(max-width: 767px) {
  #footer {
    margin-bottom: 3.5em;
  }
  .footer-upper ul {
    margin-top: -2em;
  }
  .footer-upper li {
    display: block;
    margin-left: 2em;
    margin-bottom: 0.35em;
    padding: 0.6em 0;
  }
  .footer-middle p {
    margin: 2em 0;
    text-align: right;
    font-size: 0.75em;
  }
  .footer-under p {
    text-align: center;
    font-size: 0.75em;
  }
}

/*----- 固定追従お問い合わせボタン -----*/

@media(min-width: 1281px) {
  .contact-fixed {
    position: fixed;
    bottom: 0.25em;
    right: 0.25em;
    display: block;
    width: 18%;
    padding: 1em 0;
    box-shadow: 2px 2px 8px 2px #ddd;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    z-index: 100;
  }
  .contact-fixed h2 {
    font-size: 1.5em !important;
    margin: 0.5em auto !important;
    padding: 0.35em !important;
  }
  .contact-fixed ul {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .kotei-cta-tel,.kotei-cta-form {
    text-align: center;
    margin: 0 4%;
  }
  .tel-btn,.form-btn {
    display: block;
    width: 100%;
    font-size: 0.875em;
    text-align: center;
  }
  .tel-btn::before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    padding-left: 0.75em;
    vertical-align: text-bottom;
    background-image: url('https://legal.loop-ac.jp/wp-content/uploads/2026/10/tel-icon-green1-50x50-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .form-btn::before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.35em;
    padding-left: 0.75em;
    vertical-align: text-bottom;
    background-image: url('https://legal.loop-ac.jp/wp-content/uploads/2026/10/mail-icon-blue2-50x50-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .kotei-add-line {
    display: block;
    margin-top: 1em;
    text-align: center;
  }
  .line-add-btn {
    font-size: 1.1em;
  }
  .add-line-img {
    width: 46.5%;
    height: auto;
    margin-top: 0.35em;
  }
  .contact-time {
    font-size: 0.875em;
    text-align: center;
  }
  #contact-fixed {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  #contact-fixed.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .contact-fixed {
    position: fixed;
    bottom: 0.25em;
    right: 0.25em;
    display: block;
    width: 25%;
    padding: 1em 0;
    box-shadow: 2px 2px 8px 2px #ddd;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    z-index: 100;
  }
  .contact-fixed h2 {
    font-size: 1.5em !important;
    margin: 0.5em auto !important;
    padding: 0.35em !important;
  }
  .contact-fixed ul {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .kotei-cta-tel,.kotei-cta-form {
    text-align: center;
    margin: 0 4%;
  }
  .tel-btn,.form-btn {
    display: block;
    width: 100%;
    font-size: 0.75em;
    text-align: center;
  }
  .tel-btn::before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    padding-left: 0.75em;
    vertical-align: text-bottom;
    background-image: url('https://loop-ac.jp/wp-content/uploads/2026/04/tel-icon-green1-50x50-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .form-btn::before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.35em;
    padding-left: 0.75em;
    vertical-align: text-bottom;
    background-image: url('https://loop-ac.jp/wp-content/uploads/2026/04/mail-icon-blue2-50x50-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .kotei-add-line {
    display: block;
    margin-top: 1em;
    text-align: center;
  }
  .add-line-img {
    width: 46.5%;
    height: auto;
    margin-top: 0.35em;
  }
  .contact-time {
    font-size: 0.875em;
    text-align: center;
  }
  #contact-fixed {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  #contact-fixed.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media(max-width: 767px) {
  .contact-fixed {
    position: fixed;
    bottom: 0.25em;
    right: 0.25em;
    display: block;
    width: 35%;
    padding: 0.25em 0;
    box-shadow: 2px 2px 8px 2px #ddd;
    background-color: rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    z-index: 100;
  }
  .contact-fixed h2 {
    font-size: 0.875em !important;
    margin: 0.825em auto !important;
    padding: 0.35em !important;
  }
  .contact-fixed ul {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .kotei-cta-tel,.kotei-cta-form {
    text-align: center;
    margin: 0 4%;
  }
  .kotei-cta-tel span,.kotei-cta-form span {
    display: none;
  }
  .tel-btn,.form-btn {
    display: block;
    width: 100%;
    font-size: 0.825em;
    text-align: center;
  }
  .tel-btn::before {
    content: "";
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    padding-left: 0.75em;
    vertical-align: text-bottom;
    background-image: url('https://loop-ac.jp/wp-content/uploads/2026/04/tel-icon-green1-50x50-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .form-btn::before {
    content: "";
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    padding-left: 0.75em;
    vertical-align: text-bottom;
    background-image: url('https://loop-ac.jp/wp-content/uploads/2026/04/mail-icon-blue2-50x50-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .kotei-add-line {
    display: block;
    margin-top: 0.5em;
    text-align: center;
  }
  .line-add-btn {
    font-size: 0.5875em;
  }
  .add-line-img {
    width: 90%;
    height: auto;
    margin-top: 0.35em;
  }
  .contact-time {
    font-size: 0.65em;
    margin-bottom: 0;
    text-align: center;
  }
  #contact-fixed {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  #contact-fixed.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/*---------- ページ最上部に戻るボタン ---------------*/

#page-top {
  display: none;
}

#page-top a {
  width: 2.6em;
  height: 2.6em;
  position: fixed;
  bottom: 1em;
  right: 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 3px #999;
  border-radius: 50%;
  text-decoration: none;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 300;
  opacity: 0.9;
  box-sizing: border-box;
}

#page-top a svg {
  display: block;
}

#page-top a:hover {
  opacity: 0.7;
}

/*
   ============================================
   各ページ共通用
   ============================================
*/

/*----- サーチボックス ----------*/

form {
  display: block;
  margin: auto;
  width: 90%;
  height: auto;
}

form input[type="text"] {
  width: 80%;
  height: 2em;
  font-size: 1em;
}

form input[type="submit"] {
  padding: 0.34em 1em;
  font-size: 1em;
}

@media(max-width: 767px) {
  form {
    display: block;
    margin: auto;
    width: 90%;
    height: auto;
  }
  form input[type="text"] {
    width: 70%;
    height: 2em;
    font-size: auto;
  }
  form input[type="submit"] {
    padding: 0.34em 1em;
    font-size: auto;
  }
}

/*
============================================================
 2. 固定ページ（一般）
 トップ／カテゴリー／事務所概要・地図アクセス・代表者挨拶・プライバシー
============================================================
*/

/*---------- トップページ-タイピング風 ---------------*/

/* トップページのみ表示するタイピング文字 */

.home-header {
  position: relative;
}

@media(min-width: 1281px) {
  #simpleType {
    position: absolute;
    left: 0;
    bottom: 17.5%;
    z-index: 100;
    font-size: 2.5em;
    line-height: 2em;
    text-align: center;
    letter-spacing: 0.2em;
    color: #222;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  #simpleType {
    position: absolute;
    left: 0;
    bottom: 7.5%;
    z-index: 100;
    font-size: 1.825em;
    line-height: 2em;
    text-align: center;
    letter-spacing: 0.1em;
    color: #222;
  }
}

@media(max-width: 767px) {
  #simpleType {
    position: absolute;
    left: 0;
    bottom: 7.5%;
    z-index: 100;
    font-size: 0.825em;
    line-height: 2em;
    text-align: center;
    letter-spacing: 0.1em;
    color: #222;
  }
}

#simpleType #typed {
  font-weight: bold;
  color: #fff;
}

#cursor {
  display: inline-block;
  margin-left: 2px;
}

/* シルバー調タイプ文字 */

#simpleType #typed {
  color: #222;
  text-shadow: 0 0 1px rgba(255,255,255,0.9),
		0 0 3px rgba(220,230,240,0.8),
		0 0 6px rgba(180,190,200,0.6),
		0 0 10px rgba(150,160,170,0.45),
		0 0 16px rgba(255, 230, 150, 0.25),
		0 0 24px rgba(255, 230, 150, 0.18);
  line-height: 2.5em;
  color: #222;
  text-shadow: 0 0 1px rgba(255,255,255,1),
		0 0 4px rgba(210,220,230,.85),
		0 0 8px rgba(170,180,190,.6),
		0 0 14px rgba(140,150,160,.45),
		0 0 22px rgba(255,235,160,.22);
}

/* 打ち終わりの"キラッ" */

#simpleType #typed.flash {
  animation: flashShine 360ms ease-out 1;
}

@keyframes flashShine {
  0% {
    filter: brightness(1);
    text-shadow: 0 0 1px rgba(255,255,255,.95),
			0 0 4px rgba(210,220,230,.85),
			0 0 10px rgba(160,170,180,.55),
			0 0 18px rgba(255,235,160,.20);
  }
  55% {
    filter: brightness(1.25);
    text-shadow: 0 0 2px rgba(255,255,255,1),
			0 0 8px rgba(235,245,255,.95),
			0 0 16px rgba(190,200,210,.75),
			0 0 30px rgba(255,240,170,.35);
  }
  100% {
    filter: brightness(1);
    text-shadow: 0 0 1px rgba(255,255,255,.95),
			0 0 4px rgba(210,220,230,.85),
			0 0 10px rgba(160,170,180,.55),
			0 0 18px rgba(255,235,160,.20);
  }
}

.ai-only-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 白い背景を消し、文字に「影」をつけて浮かび上がらせる */

.home-title {
  background: none !important;
  color: #333;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8),
		-2px -2px 4px rgba(255, 255, 255, 0.8),
		2px -2px 4px rgba(255, 255, 255, 0.8),
		-2px 2px 4px rgba(255, 255, 255, 0.8);
  line-height: 1.5em;
  font-weight: bold;
}

/* 画像の上に薄いベールを被せる */

.home-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

/* 文字をベールより上に持ってくる */

.home-title {
  position: relative;
  z-index: 2;
  background: none;
  color: #333;
  mix-blend-mode: multiply;
  font-weight: 900;
}

.home-title::before {
  opacity: 0 !important;
}

/* サブキャッチコピー */

@media(min-width: 1281px) {
  .home-lead-text {
    text-align: center;
    font-size: 1.5em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .home-lead-text {
    text-align: center;
    font-size: 1.2em;
  }
}

@media(max-width: 767px) {
  .home-lead-text {
    text-align: center;
    font-size: 0.75em;
  }
}

/*---------- トップページ-メインコンテンツ　---------------*/

/*----- 3つの選ばれる理由 ----------*/

@media(min-width: 1281px) {
  .home-sec {
    display: block;
    margin-bottom: 7em;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .point-outer {
    display: flex;
    justify-content: space-around;
    margin-top: 8em;
    width: 95%;
    height: auto;
    box-sizing: border-box;
  }
  .point-inner {
    display: block;
    width: 30%;
    height: auto;
    background-color: #fff;
    box-shadow: 0.15em 0.15em 0.5em 0 #ccc;
  }
  .point-illust {
    display: block;
    width: 100%;
    margin-top: -7em;
  }
  .point-illust img {
    display: block;
    width: 60%;
    height: auto;
    margin: 0 auto -3em auto;
  }
  .point-text {
    display: block;
    margin-top: -3em;
    padding: 1.5em;
  }
  .point-text p {
    font-size: 1em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .home-sec {
    display: block;
    margin-bottom: 7em;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .point-outer {
    display: flex;
    justify-content: space-around;
    margin-top: 8em;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .point-inner {
    display: block;
    width: 30%;
    height: auto;
    background-color: #fff;
    box-shadow: 0.15em 0.15em 0.5em 0 #ccc;
  }
  .point-illust {
    display: block;
    width: 100%;
    margin-top: -6em;
  }
  .point-illust img {
    display: block;
    width: 75%;
    height: auto;
    margin: 0 auto -2em auto;
  }
  .point-midashi h3 {
    font-size: 1.2em;
  }
  .point-text {
    display: block;
    margin-top: -1.5em;
    padding: 1em;
  }
  .point-text p {
    font-size: 0.875em;
  }
}

@media(max-width: 767px) {
  .home-sec {
    display: block;
    margin-top: 1em;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .point-outer {
    display: block;
    justify-content: space-around;
    margin: 0 auto;
    width: 95%;
    height: auto;
    box-sizing: border-box;
  }
  .point-inner,
  .point-illust {
    display: block;
    width: 100%;
  }
  .point-inner {
    height: auto;
    margin-bottom: 2em;
    background-color: #fff;
    box-shadow: 0.15em 0.15em 0.5em 0 #ccc;
  }
  .point-illust {
    margin-top: 0;
  }
  .point-illust img {
    display: block;
    width: 60%;
    height: auto;
    margin: 0 auto -3em auto;
  }
  .point-midashi h3 {
    font-size: 1.65em;
  }
  .point-text {
    display: block;
    margin-top: -3em;
    padding: 1.5em;
  }
  .point-text p {
    font-size: 1em;
  }
}

/*---------- 事務所案内4つ ---------------*/

@media(min-width: 1281px) {
  .office-flex {
    display: flex;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
  }
  .office-li {
    display: block;
    width: 40%;
    margin: 2em;
  }
  .office-link {
    overflow: hidden;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .office-sozai {
    overflow: hidden;
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .office-sozai img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1s ease;
  }
  .office-text-frame {
    margin-top: 1em;
    width: 100%;
    height: auto;
    padding: 0 0.5em 0.5em 0.5em;
  }
  .office-midashi {
    margin: 0;
    font-size: 1.5em;
    text-align: center;
  }
  .office-midashi,h3::after {
    margin-top: 0.5em;
    margin-bottom: 1.25em;
  }
  .small-text {
    font-size: 0.75em;
    margin-bottom: 1em;
    text-align: center;
  }
  .office-text {
    font-size: 1em;
  }
  .office-link:hover img {
    overflow: hidden;
    transform: scale(1.1,1.1);
    transition: transform 1s ease;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .office-flex {
    display: flex;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
  }
  .office-li {
    display: block;
    width: 40%;
    margin: 1em;
  }
  .office-link {
    overflow: hidden;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .office-sozai {
    overflow: hidden;
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .office-sozai img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1s ease;
  }
  .office-text-frame {
    margin-top: 1em;
    width: 100%;
    height: auto;
    padding: 0 0.5em 0.5em 0.5em;
  }
  .office-midashi {
    margin: 0;
    font-size: 1.5em;
    text-align: center;
  }
  .office-midashi,h3::after {
    margin-top: 0.5em;
    margin-bottom: 1.25em;
  }
  .small-text {
    font-size: 0.75em;
    margin-bottom: 1em;
    text-align: center;
  }
  .office-text {
    font-size: 1em;
  }
  .office-link:hover img {
    overflow: hidden;
    transform: scale(1.1,1.1);
    transition: transform 1s ease;
  }
}

@media(max-width: 767px) {
  .office-flex {
    display: block;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
  }
  .office-li {
    display: block;
    width: 95%;
    margin: 0 auto 3em auto;
  }
  .office-link {
    overflow: hidden;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .office-sozai {
    overflow: hidden;
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .office-sozai img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1s ease;
  }
  .office-text-frame {
    margin-top: 0;
    padding: 0 0.5em 0.5em 0.5em;
    width: 100%;
    height: auto;
  }
  .office-midashi {
    margin: 0;
    font-size: 1.5em;
    text-align: center;
  }
  .office-midashi,h3::after {
    margin-top: 0.5em;
    margin-bottom: 1.25em;
  }
  .small-text {
    font-size: 0.75em;
    margin-bottom: 1em;
    text-align: center;
  }
  .office-text {
    font-size: 1em;
  }
  .office-link:hover img {
    overflow: hidden;
    transform: scale(1.1,1.1);
    transition: transform 1s ease;
  }
}

/*---------- サービスメニュー6つ ---------------*/

@media(min-width: 1281px) {
  .top-service-flex {
    display: flex;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
  }
  .top-service-li {
    display: block;
    width: 30%;
    margin: 2em;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .top-service-link {
    overflow: hidden;
    display: inline-block;
    width: 100%;
  }
  .top-service-sozai {
    overflow: hidden;
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .top-service-sozai img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1s ease;
  }
  .top-service-text-frame {
    position: relative;
    margin-top: 1em;
    padding: 0 0.5em 0.5em 0.5em;
    width: 100%;
    height: auto;
  }
  .top-service-midashi {
    font-size: 1.25em;
    padding-left: 1.25em;
  }
  .top-service-midashi,h3::after {
    margin-top: 0.5em;
    margin-bottom: 1.25em;
  }
  .top-service-text {
    font-size: 1em;
	padding: 0 1.25em;
    margin-bottom: 2em;
  }
  .top-service-text-frame .arrow {
    position: absolute;
    bottom: 0.875em;
	left: auto;
    right: 1.5em;
    width: 2em;
    height: auto;
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
  .top-service-link:hover {
    opacity: 0.8;
  }
  .top-service-link:hover img {
    overflow: hidden;
    transform: scale(1.1,1.1);
    transition: transform 1s ease;
  }
  .top-service-link:hover .arrow {
    transform: translateX(1em);
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .top-service-flex {
    display: flex;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
  }
  .top-service-li {
    display: block;
    width: 30%;
    margin: 1em;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .top-service-link {
    overflow: hidden;
    display: inline-block;
    width: 100%;
  }
  .top-service-sozai {
    overflow: hidden;
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .top-service-sozai img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1s ease;
  }
  .top-service-text-frame {
    position: relative;
    margin-top: 1em;
    padding: 0 0.5em 0.5em 0.5em;
    width: 100%;
    height: auto;
  }
  .top-service-midashi {
    margin: 0;
    font-size: 1.2em;
    text-align: center;
  }
  .office-midashi,h3::after {
    margin-top: 0.5em;
    margin-bottom: 1.25em;
  }
  .top-service-text {
    font-size: 0.925em;
    margin-bottom: 2em;
  }
  .top-service-text-frame .arrow {
    position: absolute;
    bottom: 0.5em;
    left: 1.25em;
    width: 2em;
    height: auto;
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
  .top-service-link:hover {
    opacity: 0.8;
  }
  .top-service-link:hover img {
    overflow: hidden;
    transform: scale(1.1,1.1);
    transition: transform 1s ease;
  }
  .top-service-link:hover .arrow {
    transform: translateX(1em);
  }
}

@media(max-width: 767px) {
  .top-service-flex {
    display: block;
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
  }
  .top-service-li {
    display: block;
    width: 95%;
    margin: 0 auto 3em auto;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .top-service-link {
    overflow: hidden;
    display: inline-block;
    width: 100%;
  }
  .top-service-sozai {
    overflow: hidden;
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .top-service-sozai img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1s ease;
  }
  .top-service-text-frame {
    position: relative;
    margin-top: 0;
    padding: 0 0.5em 0.5em 0.5em;
    width: 100%;
    height: auto;
  }
  .top-service-midashi {
    margin: 0;
    font-size: 1.25em;
    text-align: center;
  }
  .top-service-midashi,h3::after {
    margin-top: 0.5em;
    margin-bottom: 1.25em;
  }
  .top-service-text {
    font-size: 1em;
    margin-bottom: 1.5em;
  }
  .top-service-text-frame .arrow {
    position: absolute;
    bottom: 0.5em;
    right: 2.25em;
    width: 2em;
    height: auto;
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
  .top-service-link:hover {
    opacity: 0.8;
  }
  .top-service-link:hover img {
    overflow: hidden;
    transform: scale(1.1,1.1);
    transition: transform 1s ease;
  }
  .top-service-link:hover .arrow {
    transform: translateX(1em);
  }
}

/*---------- カテゴリーページ専用 ---------------*/

.category-top {
  margin-bottom: 3em;
}

@media(min-width: 1281px) {
  .category-left,.category-right {
    position: relative;
    display: inline-block;
    margin-bottom: 2em;
    width: 100%;
    height: 450px;
    box-sizing: border-box;
  }
  .sozai-left img {
    width: auto;
    height: auto;
  }
  .category-h3 h3 {
    margin: 0.5em 0 0.75em 2.15em !important;
  }
  .contents-inner {
    position: relative;
  }
  .category-text {
    margin-left: 3.75em !important;
    font-size: 1em !important;
  }
  .contents-inner .in-link {
    font-size: 0.875em !important;
  }
  .sozai-left,
  .contents-right {
    position: absolute;
    top: 0;
  }
  .sozai-left {
    left: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  .contents-right {
    right: 0;
    width: 60%;
    height: auto;
    z-index: 10;
  }
  .contents-link {
    position: absolute;
    top: 12em;
    right: 0;
    padding: 0.5em 0 !important;
    transform: Translate(-50%, -50%);
  }
  .sozai-right,
  .contents-left {
    position: absolute;
    top: 0;
  }
  .sozai-right {
    right: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 1;
  }
  .contents-left {
    left: 0;
    width: 60%;
    height: auto;
    z-index: 10;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .category-left,.category-right {
    position: relative;
    display: inline-block;
    margin-bottom: 2em;
    width: 100%;
    height: 450px;
    box-sizing: border-box;
  }
  .sozai-left img {
    width: auto;
    height: auto;
  }
  .category-h3 h3 {
    margin: 0.5em 0 0.75em 2.45em !important;
  }
  .contents-inner {
    position: relative;
  }
  .category-text {
    margin-left: 3.75em !important;
    font-size: 1em !important;
  }
  .contents-inner .in-link {
    font-size: 0.875em !important;
  }
  .sozai-left,
  .contents-right {
    position: absolute;
    top: 0;
  }
  .sozai-left {
    left: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  .contents-right {
    right: 0;
    width: 60%;
    height: auto;
    z-index: 10;
  }
  .contents-link {
    position: absolute;
    top: 12em;
    right: 0;
    padding: 0.5em 0 !important;
    transform: Translate(-50%, -50%);
  }
  .sozai-right,
  .contents-left {
    position: absolute;
    top: 0;
  }
  .sozai-right {
    right: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 1;
  }
  .contents-left {
    left: 0;
    width: 60%;
    height: auto;
    z-index: 10;
  }
}

@media(max-width: 767px) {
  .category-left,.category-right {
    position: relative;
    display: block;
    margin-bottom: 2em;
    width: 100%;
    height: 270px;
    box-sizing: border-box;
  }
  .sozai-right img,.sozai-left img {
    width: 100%;
    height: auto;
  }
  .category-h3 h3 {
    margin: 0.35em 0 0.5em 0.85em !important;
    font-size: 1.1em;
  }
  .contents-inner {
    position: relative;
  }
  .category-text {
    margin-left: 1em !important;
    font-size: 0.875em !important;
  }
  .contents-inner .in-link {
    font-size: 0.875em !important;
  }
  .sozai-left,
  .contents-right {
    position: absolute;
    top: 0;
  }
  .sozai-left {
    left: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 0.4;
  }
  .contents-right {
    right: 0;
    width: 100%;
    height: auto;
    z-index: 10;
  }
  .contents-link {
    position: absolute;
    top: 8em;
    left: 50%;
    padding: 0.5em 0 !important;
    transform: none;
    transform: translate(-50%, -50%);
  }
  .sozai-right,
  .contents-left {
    position: absolute;
    top: 0;
  }
  .sozai-right {
    right: 0;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 0.4;
  }
  .contents-left {
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10;
  }
}

/*---------- 固定＆投稿メインページ ---------------*/

/*----- 事務所概要-風景 ----------*/

@media(min-width: 1281px) {
  .office-lndscape ul {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .office-lndscape ul li {
    width: 32%;
    height: auto;
  }
  .office-lndscape ul li img {
    width: 100%;
    height: auto;
  }
}

@media(max-width: 767px) {
  .office-lndscape ul {
    display: block;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .office-lndscape ul li,
  .office-lndscape ul li img {
    width: 100%;
    height: auto;
  }
  .office-lndscape ul li {
    margin: auto auto 1em auto;
  }
}

/*----- 事務所概要-ご案内 ----------*/

@media(min-width: 1281px) {
  .office-table {
    display: table;
    width: 70%;
    height: auto;
    margin: auto;
    box-sizing: border-box;
  }
  .office-table th,.office-table td {
    padding: 0.75em 0 0.75em 0.75em;
    font-size: 1.125em;
    border: dotted 0.1px #ccc;
    border-bottom: none;
  }
  .office-table a {
    font-size: 1.125em !important;
    font-weight: normal !important;
  }
  .office-table th:last-child,.office-table td:last-child {
    line-height: 2.25em;
    border-bottom: dotted 0.1px #ccc;
  }
  .office-table th {
    width: 30%;
    background-color: #eee;
    border-right: none;
  }
  .office-table td {
    width: 70%;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .office-table {
    display: table;
    width: 80%;
    height: auto;
    margin: auto;
    box-sizing: border-box;
  }
  .office-table th,.office-table td {
    padding: 0.75em 0 0.75em 0.75em;
    font-size: 1.125em;
    line-height: 1.75em;
    border: dotted 0.1px #ccc;
    border-bottom: none;
  }
  .office-table a {
    font-size: 1.125em !important;
    font-weight: normal !important;
  }
  .office-table th:last-child,.office-table td:last-child {
    border-bottom: dotted 0.1px #ccc;
  }
  .office-table th {
    width: 30%;
    background-color: #eee;
    border-right: none;
  }
  .office-table td {
    width: 70%;
  }
}

@media(max-width: 767px) {
  .office-table {
    display: table;
    width: 100%;
    height: auto;
    margin: auto;
    box-sizing: border-box;
  }
  .office-table th,.office-table td {
    padding: 0.75em 0 0.75em 0.75em;
    line-height: 1.875em;
    font-size: 0.875em;
    border: dotted 0.1px #ccc;
    border-bottom: none;
  }
  .office-table a {
    font-size: 0.875em !important;
    font-weight: normal !important;
  }
  .office-table th:last-child,.office-table td:last-child {
    border-bottom: dotted 0.1px #ccc;
  }
  .office-table th {
    width: 30%;
    background-color: #eee;
    border-right: none;
  }
  .office-table td {
    width: 70%;
    background-color: #fafafa;
  }
}

/*----- 事務所概要-事業案内 ----------*/

@media(min-width: 1281px) {
  .business-details-frame {
    display: flex;
    justify-content: space-around;
    width: auto;
    height: auto;
    box-sizing: border-box;
  }
  .business-details-list-outer {
    position: relative;
    display: block;
    margin: 2em 0;
    padding: 1em 2em;
    width: 30%;
    border-top: solid 2px #bff5d8;
    border-bottom: solid 2px #bff5d8;
  }
  .business-details-list-outer:before, .business-details-list-right:after {
    position: absolute;
    top: -12px;
    width: 2px;
    height: -webkit-calc(100% + 24px);
    height: calc(100% + 24px);
    background-color: #bff5d8;
    content: "";
  }
  .business-details-list-outer:before {
    left: 12px;
  }
  .business-details-list-outer:after {
    right: 12px;
  }
  .business-details-list-title h3 {
    margin: 0;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.25em;
    color: #6cc2a5;
    text-align: center;
  }
  .business-details-list-title h3::after {
    display: initial;
    content: normal;
    margin-top: 0;
    width: auto;
    height: auto;
  }
  .business-details-list-outer ul,.business-details-list-outer ol {
    position: relative;
    margin: 0;
    padding: 0 0.75em 0.75em;
    color: #bff5d8;
    border: none;
    list-style-type: none;
  }
  .business-details-list-outer ul li,.business-details-list-outer ol li {
    line-height: 1.5;
    padding: 0.5em 0 0.5em 0;
    font-size: 0.875em;
    border-bottom: dashed 1px #bff5d8;
  }
  .business-details-list-outer ul li:before,.business-details-list-outer ol li:before {
    content: "✓";
    position: absolute;
    left: -0.5em;
    margin: 0.75em 0 0 0;
    padding-left: 0;
    line-height: 0;
    font-size: 1em;
    color: #9dd3b6;
  }
  .business-details-frame p {
    font-size: 1em;
    line-height: 1.75em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .business-details-frame {
    display: flex;
    justify-content: space-around;
    width: auto;
    height: auto;
    box-sizing: border-box;
  }
  .business-details-list-outer {
    position: relative;
    display: block;
    margin: 2em 0;
    padding: 1em 2em;
    width: 32%;
    border-top: solid 2px #bff5d8;
    border-bottom: solid 2px #bff5d8;
  }
  .business-details-list-outer:before, .business-details-list-right:after {
    position: absolute;
    top: -12px;
    width: 2px;
    height: -webkit-calc(100% + 24px);
    height: calc(100% + 24px);
    background-color: #bff5d8;
    content: "";
  }
  .business-details-list-outer:before {
    left: 12px;
  }
  .business-details-list-outer:after {
    right: 12px;
  }
  .business-details-list-title h3 {
    margin: 0;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.05em;
    color: #6cc2a5;
    text-align: center;
  }
  .business-details-list-title h3::after {
    display: initial;
    content: normal;
    margin-top: 0;
    width: auto;
    height: auto;
  }
  .business-details-list-outer ul,.business-details-list-outer ol {
    position: relative;
    margin: 0;
    padding: 0 0.75em 0.75em;
    color: #bff5d8;
    border: none;
    list-style-type: none;
  }
  .business-details-list-outer ul li,.business-details-list-outer ol li {
    line-height: 1.5;
    padding: 0.5em 0 0.5em 0;
    font-size: 0.775em;
    border-bottom: dashed 1px #bff5d8;
  }
  .business-details-list-outer ul li:before,.business-details-list-outer ol li:before {
    content: "✓";
    position: absolute;
    left: -0.5em;
    margin: 0.75em 0 0 0;
    padding-left: 0;
    line-height: 0;
    font-size: 1em;
    color: #9dd3b6;
  }
  .business-details-frame p {
    font-size: 1em;
    line-height: 1.75em;
  }
}

@media(max-width: 767px) {
  .business-details-frame {
    display: block;
    justify-content: flex-start;
    width: auto;
    height: auto;
    box-sizing: border-box;
  }
  .business-details-list-outer {
    position: relative;
    display: block;
    margin: 3em 0;
    padding: 1em 2em;
    width: 100%;
    border-top: solid 2px #bff5d8;
    border-bottom: solid 2px #bff5d8;
  }
  .business-details-list-outer:before, .business-details-list-right:after {
    position: absolute;
    top: -12px;
    width: 2px;
    height: -webkit-calc(100% + 24px);
    height: calc(100% + 24px);
    background-color: #bff5d8;
    content: "";
  }
  .business-details-list-outer:before {
    left: 12px;
  }
  .business-details-list-outer:after {
    right: 12px;
  }
  .business-details-list-title h3 {
    margin: 0;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.25em;
    color: #6cc2a5;
    text-align: center;
  }
  .business-details-list-title h3::after {
    display: initial;
    content: normal;
    margin-top: 0;
    width: auto;
    height: auto;
  }
  .business-details-list-outer ul,.business-details-list-outer ol {
    position: relative;
    margin: 0;
    padding: 0 0.75em 0.75em;
    color: #bff5d8;
    border: none;
    list-style-type: none;
  }
  .business-details-list-outer ul li,.business-details-list-outer ol li {
    line-height: 1.5;
    padding: 0.5em 0 0.5em 0;
    font-size: 0.785em;
    border-bottom: dashed 1px #bff5d8;
  }
  .business-details-list-outer ul li:before,.business-details-list-outer ol li:before {
    content: "✓";
    position: absolute;
    left: -0.5em;
    margin: 0.75em 0 0 0;
    padding-left: 0;
    line-height: 0;
    font-size: 1em;
    color: #9dd3b6;
  }
  .business-details-frame p {
    font-size: 0.925em;
    line-height: 1.45em;
  }
}

/*---------- 地図アクセス ---------------*/

@media(min-width: 1281px) {
  .shozaiti-text {
    display: block;
    margin-bottom: 0.5em;
    line-height: 1.5em;
    font-weight: bold;
    font-size: 2.25em;
    text-align: center;
  }
  .map {
    display: block;
    width: 95%;
    margin: auto;
  }
  .map iframe {
    width: 100%;
    height: 800px;
  }
  .access {
    display: block;
    width: 100%;
    height: auto;
    margin: 2em auto;
  }
  .access-img {
    display: block;
    margin: 4em auto 2em auto;
  }
  .access-img img {
    display: block;
    margin: auto;
    width: 70%;
    height: auto;
  }
  .access-text {
    font-size: 1.35em;
    text-align: center;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .shozaiti-text {
    display: block;
    margin-bottom: 0.35em;
    line-height: 1.5em;
    font-weight: bold;
    font-size: 1.75em;
    text-align: center;
  }
  .map {
    display: block;
    width: 95%;
    margin: auto;
  }
  .map iframe {
    width: 100%;
    height: 800px;
  }
  .access {
    display: block;
    width: 100%;
    height: auto;
    margin: 2em auto;
  }
  .access-img {
    display: block;
    margin: 4em auto 2em auto;
  }
  .access-img img {
    display: block;
    margin: auto;
    width: 80%;
    height: auto;
  }
  .access-text {
    font-size: 1.35em;
    text-align: center;
  }
}

@media(max-width: 767px) {
  .shozaiti-text {
    display: block;
    line-height: 1.1em;
    font-weight: bold;
    font-size: 1.1875em;
    text-align: center;
  }
  .map {
    display: block;
    width: 100%;
    margin: auto;
  }
  .map iframe {
    width: 100%;
    height: 330px;
  }
  .access {
    display: block;
    width: 100%;
    height: auto;
    margin: 2em auto;
  }
  .access-img {
    display: block;
    margin: 4em auto 1em auto;
  }
  .access-img img {
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
  }
  .access-text {
    margin-bottom: 1em;
    font-size: 1.15em;
    text-align: left;
  }
}

/*---------- 代表者挨拶 ---------------*/

/* 代表者実績 */

.jisseki-card {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  border: 1px solid #d0d0d0;
  border-left: 6px solid #003366;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
}

.jisseki-card dt {
  background-color: #f7f7f7;
  color: #444;
  font-weight: bold;
  padding: 18px 20px;
  margin: 0;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.jisseki-card dd {
  background-color: #fff;
  color: #333;
  padding: 18px 20px;
  margin: 0;
  line-height: 1.875em;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}

.jisseki-card dt:last-of-type,
.jisseki-card dd:last-of-type {
  border-bottom: none;
}

.jisseki-card dt.label-result {
  background-color: #faf7f2;
  color: #cc2222;
}

.jisseki-card dd.value-result strong {
  color: #cc2222;
  font-size: 1.35em;
  font-weight: 800;
}

@media screen and (max-width: 767px) {
  .jisseki-card dt, .jisseki-card dd {
    width: 100%;
  }
  .jisseki-card dt {
    border-bottom: none;
    padding-bottom: 5px;
  }
}

@media screen and (min-width: 768px) {
  .jisseki-card dt {
    width: 25%;
    border-right: 1px solid #e5e5e5;
  }
  .jisseki-card dd {
    width: 75%;
  }
}

@media(min-width: 1281px) {
  .aisatsu-outer {
    display: flex;
    justify-content: space-around;
    margin: 5em auto;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .aisatsu-img {
    margin-left: 0.5em;
    width: 100%;
  }
  .aisatsu-img img {
    display: block;
    margin: auto;
    width: 70%;
    height: auto;
  }
  .aisatsu-text-outer {
    display: block;
    width: 100%;
  }
  .aisatsu-text {
    margin-bottom: 2em;
    font-size: 1em;
    letter-spacing: 0.1em;
    line-height: 2.25em;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .aisatsu-outer {
    display: flex;
    justify-content: space-around;
    margin: 2em auto;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .aisatsu-img {
    margin-left: 0.5em;
    width: 100%;
  }
  .aisatsu-img img {
    display: block;
    margin: 10em auto 1em auto;
    width: 70%;
    height: auto;
  }
  .aisatsu-text-outer {
    display: block;
    width: 100%;
  }
  .aisatsu-text {
    margin-bottom: 2em;
    font-size: 1em;
    letter-spacing: 0.1em;
    line-height: 2.25em;
  }
}

@media(max-width: 767px) {
  .aisatsu-outer {
    display: block;
    justify-content: flex-start;
    margin: 3em auto;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .aisatsu-img {
    margin-left: 0;
    margin-bottom: 1em;
    width: 100%;
  }
  .aisatsu-img img {
    display: block;
    margin: auto;
    width: 80%;
    height: auto;
  }
  .aisatsu-text-outer {
    display: block;
    padding: 0.5em;
    width: 100%;
  }
  .aisatsu-text {
    margin-bottom: 2em;
    font-size: 0.875em;
    letter-spacing: 0.1em;
    line-height: 1.875em;
  }
}

/*----- プライバシーポリシー ----------*/

.e-loop-privacy p {
  font-size: 0.875em;
}

.privacypolicy-disc li {
  margin: 0.25em 0 0.15em 2em;
  padding-left: 1em;
  line-height: 1.5em;
  font-size: 0.875em;
  list-style-type: disc;
}

/*
============================================================
 3. 固定ページ（LP用）
 elp- 系。創業融資・財務コンサル・AIO対策など
============================================================
*/

/* =============================================
   フレームワーク h3 サブ見出し
   ============================================= */

.fw-subhead {
  color: #0d1f3c;
  border-left: 4px solid #c9a84c;
  padding-left: 12px;
  margin: 40px 0 16px;
}

.fw-subhead--first {
  margin-top: 32px;
}

/* =============================================
   elp-reason-grid レスポンシブ対応
   ============================================= */

.elp-reason-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.elp-reason-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 768px) and (max-width: 1280px) {
  .elp-reason-grid--2col,
  	.elp-reason-grid--3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .elp-reason-grid--2col,
  	.elp-reason-grid--3col {
    grid-template-columns: 1fr !important;
  }
}

/* =============================================
   Hero パーツ
   ============================================= */

.elp-hero__eyecatch {
  color: #f0f2f5;
  font-size: 0.8em;
}

.elp-hero__title {
  color: #ffffff;
}

.elp-hero__accent {
    color: #fff;
    font-weight: bold;
    font-size: 2.75rem;
}
@media (max-width: 767px) {
	.elp-hero__accent {
		color: #fff;
		font-weight: bold;
		font-size: 2rem;
	}
  }

/* =============================================
   elp-reason-grid レスポンシブ（既存追記分）
   ============================================= */

@media (min-width: 768px) and (max-width: 1280px) {
  .elp-reason-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .elp-reason-grid {
    grid-template-columns: 1fr !important;
  }
}

/*---------- 財務コンサルティングページ専用 --------------------*/

/*
   ============================================================
   elp LP汎用CSS  v1
   クラスプレフィックス: elp-
   セクションIDプレフィックス: elp-lp-
   ブレークポイント
   PC        : 1281px 以上
   タブレット : 768px ～ 1280px
   スマホ    : 767px 以下
   ============================================================
*/

/* ============================================================
   2. ベーススタイル
   ============================================================ */

[id^="elp-lp-"] img,
.elp-closing img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * [id^="elp-lp-"] a {
	color: #222;
	text-decoration: none;
}
[id^="elp-lp-"] a:hover {
	opacity: 0.8;
	text-decoration: underline;
}
*/

#elp-lp-contact a.elp-closing__tel,
#elp-lp-contact a.elp-closing__tel:link,
#elp-lp-contact a.elp-closing__tel:visited {
  color: #c8d4e8;
  text-decoration: none;
}

#elp-lp-contact a.elp-closing__tel:hover {
  color: var(--elp-gold-l);
  text-decoration: none;
}

#elp-lp-contact a.elp-closing__form-link,
#elp-lp-contact a.elp-closing__form-link:link,
#elp-lp-contact a.elp-closing__form-link:visited {
  color: #c8d4e8;
  text-decoration: none;
}

#elp-lp-contact a.elp-closing__form-link:hover {
  color: var(--elp-gold-l);
  text-decoration: none;
}

.elp-closing a {
  text-decoration: none;
}

.elp-closing a:hover {
  text-decoration: none;
}

.elp-inner {
  margin: 0 auto;
  padding: 1px 48px;
}

.elp-section {
  padding: 1em 0;
}

.elp-section-title br {
  display: none;
}

.elp-section--white {
  background: var(--elp-white);
}

.elp-section--gray {
  background: var(--elp-gray-l);
}

.elp-section--dark {
  background: var(--elp-navy-d);
}

.elp-section--cream {
  background: var(--elp-cream);
}

/* ============================================================
   3. 見出しスタイル
   ============================================================ */

#elp-lp-hero h2.elp-hero__copy,
#elp-lp-hero .elp-hero__copy,
#elp-lp-hero h2.elp-hero__title,
#elp-lp-hero .elp-hero__title,
.elp-hero__title h2,
.elp-hero h2 {
  border: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
}

#elp-lp-hero h2.elp-hero__copy::before,
#elp-lp-hero h2.elp-hero__copy::after,
#elp-lp-hero .elp-hero__copy::before,
#elp-lp-hero .elp-hero__copy::after,
#elp-lp-hero h2.elp-hero__title::before,
#elp-lp-hero h2.elp-hero__title::after,
#elp-lp-hero .elp-hero__title::before,
#elp-lp-hero .elp-hero__title h2::after,
h2 .elp-hero__title::before,
h2 .elp-hero__title::after,
.elp-hero h2::before,
.elp-hero h2::after {
  display: none !important;
  content: none !important;
}

h2.elp-section-title,
.elp-section-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--elp-navy) !important;
  border-left: 5px solid #bcc1c8 !important;
  border-bottom: none !important;
  border-top: none !important;
  border-right: none !important;
  background: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  padding: 0 0 0 18px !important;
  margin-bottom: 40px !important;
  line-height: 1.5 !important;
}

h2.elp-section-title::after,
h2.elp-section-title::before,
.elp-section-title::after,
.elp-section-title::before {
  display: none !important;
  content: none !important;
}

h2.elp-section-title small,
.elp-section-title small {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  color: #bcc1c8 !important;
  margin-bottom: 6px !important;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
  padding: 0 !important;
}

h2.elp-section-title--light,
.elp-section-title--light {
  color: var(--elp-white) !important;
}

h2.elp-section-title--light small,
.elp-section-title--light small {
  color: #f0f2f5 !important;
}

.elp-section-lead {
  font-size: 0.92rem;
}

[id^="elp-lp-"] h3,
.elp-toc-wrap h3 {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

[id^="elp-lp-"] h3::before,
[id^="elp-lp-"] h3::after,
.elp-toc-wrap h3::before,
.elp-toc-wrap h3::after {
  display: none !important;
  content: none !important;
}

[id^="elp-lp-"] h3.elp-sub-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--elp-navy) !important;
  display: block !important;
  border-left: 3px solid var(--elp-silver) !important;
  background: var(--elp-gray-l) !important;
  padding: 10px 14px !important;
  margin: 28px 0 12px !important;
  border-radius: 0 var(--elp-radius) var(--elp-radius) 0 !important;
}

[id^="elp-lp-"] h3.elp-card__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--elp-navy) !important;
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
}

[id^="elp-lp-"] h3.elp-service-item__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--elp-navy) !important;
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  margin-left: 0;
  border-radius: 0 !important;
}

[id^="elp-lp-"] h3.elp-reason-card__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--elp-navy) !important;
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  border-radius: 0 !important;
}

[id^="elp-lp-"] h3.elp-area-card__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--elp-white) !important;
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  line-height: 1.4 !important;
  border-radius: 0 !important;
}

.elp-toc-wrap h3.elp-toc__title {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  color: var(--elp-gold) !important;
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  border-radius: 0 !important;
}

/* ============================================================
   4. ヒーローセクション
   ============================================================ */

.elp-hero {
  background: linear-gradient(135deg, var(--elp-navy-d) 55%, #2E333D 100%); /* 後ろの元の色 #1e2f56 */
  color: var(--elp-white);
  padding: 100px 0 88px;
  position: relative;
  overflow: hidden;
}

.elp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

.elp-hero__label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: .22em;
  color: #f0f2f5;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 4px 16px;
  margin: 0 0 1em 1em;
}

@media (max-width: 767px) {
  .elp-hero__label {
    margin: 0 auto;
    font-size: 0.65rem;
  }
}

.elp-hero__copy {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 28px;
  color: var(--elp-white);
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
}

.elp-hero__copy em {
  font-style: normal;
  color: var(--elp-gold-l);
  border-bottom: 2px solid var(--elp-gold);
}

.elp-hero__sub {
  font-size: 1.05rem;
  color: #dde6f4;
  line-height: 1.84em;
  margin-bottom: 2em;
  padding: 0 0.35em;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.elp-hero__badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.elp-hero__badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(201,168,76,0.6);
  border-radius: 3px;
  font-size: 0.85rem;
  padding: 7px 16px;
  color: #f0f4ff;
  font-weight: 500;
}

.elp-hero-spacer {
  background: var(--elp-cream);
  height: 64px;
}

/* ============================================================
   6. ヒーロー内目次
   ============================================================ */

.elp-hero__toc {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.elp-hero__toc-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  color: #f0f2f5 !important;
  margin-bottom: 16px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.elp-hero__toc-title::before,
.elp-hero__toc-title::after {
  display: none !important;
  content: none !important;
}

.elp-hero__toc-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 24px;
}

.elp-hero__toc-list li {
  font-size: 0.86rem;
  padding: 6px 0 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.elp-hero__toc-list li::before {
  content: '▶ ';
  font-size: .58rem;
  color: #f0f2f5;
}

.elp-hero__toc-list a {
  color: #c8d4e8;
  font-weight: 400;
}

.elp-hero__toc-list a:hover {
  color: #eaf6fa;
  text-decoration: underline;
}

/* ============================================================
   7. イントロセクション
   ============================================================ */

.elp-intro {
  background: var(--elp-navy-d);
  color: var(--elp-white);
}

.elp-intro__lead {
  color: #c8d4e8;
  font-size: 0.97rem;
  padding: 0 0.35em;
  line-height: 1.9;
}

.elp-intro__center {
  text-align: center;
  color: #c8d4e8;
  margin-bottom: 8px;
  font-size: 0.97rem;
}

.elp-intro__lead-b {
  color: #222;
  font-size: 0.97rem;
  padding: 0 0.35em;
  line-height: 1.9;
}

/* ============================================================
   8. カード
   ============================================================ */

.elp-card {
  background: var(--elp-gray-l);
  border-left: 4px solid var(--elp-gold) !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 var(--elp-radius) var(--elp-radius) 0;
  padding: 22px 28px;
  margin-bottom: 16px;
}

.elp-card__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--elp-navy) !important;
  margin-bottom: 8px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.elp-card p,
.elp-card li {
  font-size: 0.93rem;
  line-height: 1.8;
}

.elp-list--disc {
  padding-left: 20px;
}

.elp-list--disc li {
  list-style: disc;
  margin-bottom: 6px;
  font-size: 0.93rem;
}

.elp-card--dark {
  background: rgba(150,150,150,0.05); /* 元の色 255,255,255,0.07 */
  border-left: 6px double #b1afaa !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 var(--elp-radius) var(--elp-radius) 0;
  padding: 22px 28px;
  margin-bottom: 16px;
}

.elp-card--dark,
.elp-card--dark p {
  color: #c8d4e8;
  font-size: 0.93rem;
  line-height: 1.8;
}

/* ============================================================
   10. テキスト装飾ユーティリティ
   ============================================================ */

.elp-note {
  font-size: 0.8rem;
  color: var(--elp-gray-t);
  display: block;
  margin-top: 10px;
  line-height: 1.75;
}

/* ============================================================
   13. 理由カード（WHY USセクション・PC3カラム）
   ============================================================ */

.elp-reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 1.25em 0.15em;
}

/* 原因カード：「この場合は…」ブロックを4段目にそろえる */
.elp-reason-card__solution { margin: 0; }
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    .elp-reason-grid--align .elp-reason-card__solution { grid-row: 4; }
  }
}

.elp-reason-card {
  background: var(--elp-white);
  border: 1px solid var(--elp-gray-m);
  /*	border-top: 3px solid var(--elp-gold);	*/
  border-radius: var(--elp-radius);
  padding: 20px 10px;
  box-shadow: var(--elp-shadow);
}

.elp-reason-card__num {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--elp-gold);
  line-height: 1;
  margin-bottom: 12px;
  opacity: .75;
}

.elp-reason-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--elp-navy);
  margin-bottom: 12px;
}

.elp-reason-card p {
  font-size: 0.875rem;
  color: #4a4540;
  line-height: 1.8;
}

.elp-reasons__lead,
.elp-reasons__summary {
  font-size: 0.97rem;
  color: var(--elp-text);
  line-height: 1.9;
}

.elp-reasons__lead {
  margin: 0.75em 0.35em;
}

.elp-reasons__summary {
  margin: 0.5em 0.35em;
}

/* ============================================================
   施策カード：ボタン位置をそろえる
   （.elp-reason-grid--align を付けたグリッドだけに効く）
   ============================================================ */

/* 段の見た目（全画面共通） */
.elp-reason-card__link {
  margin: 0;
  text-align: center;
}

/* 注釈 */
.elp-reason-card__notes {
  font-size: 0.8rem;
  line-height: 1.8;
  color: #4a4540;
}
.elp-reason-card__notes p,
.elp-reason-card__notes small {
  display: block;
  margin: 0.6em 0 0;
  font-size: inherit;
}
.elp-reason-card__notes hr {
  margin: 0.9em 0;
  border: 0;
  border-top: 1px dotted #aaa;
}

/* タブレット・PC（2列／3列）：カードの段をそろえる */
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    .elp-reason-grid--align {
      row-gap: 0;
    }
    .elp-reason-grid--align > .elp-reason-card {
      display: grid;
      grid-row: span 5;                 /* num / title / desc / link / notes */
      grid-template-rows: subgrid;
      margin-bottom: 24px;              /* カード同士の縦の間隔 */
    }
    /* 余計な改行・空の段落を無効にする */
    .elp-reason-grid--align > .elp-reason-card > br,
    .elp-reason-grid--align > .elp-reason-card > p:empty {
      display: none;
    }
    /* 各パーツの段を固定する */
    .elp-reason-grid--align .elp-reason-card__num   { grid-row: 1; }
    .elp-reason-grid--align .elp-reason-card__title { grid-row: 2; }
    .elp-reason-grid--align .elp-reason-card__desc  { grid-row: 3; }
    .elp-reason-grid--align .elp-reason-card__link  { grid-row: 4; }
    .elp-reason-grid--align .elp-reason-card__notes { grid-row: 5; }
  }
}

/* カード見出し：シャンパン×シルバーの縦グラデーション */
.elp-card--dark .elp-card__title,
[id^="elp-lp-"] .elp-card--dark .elp-card__title {
  color: #fffffa !important;
  background: repeating-linear-gradient(
    180deg,
    #ffffff 0px,
    #ffffec 18px,
    #caa 13px,
    #dfe2e8 26px
  ) !important;
  background-size: 100% 20px !important;
  background-repeat: repeat-y !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   13-B. 代表者エピソード
   ============================================================ */

[id^="elp-lp-"] h3.elp-episode__label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  color: var(--elp-gold) !important;
  background: none !important;
  border: none !important;
  padding: 0 0 12px !important;
  margin: 0 0 20px !important;
  border-bottom: 1px solid var(--elp-gray-m) !important;
  border-radius: 0 !important;
}

.elp-episode {
  max-width: 800px;
  margin: 0 auto;
}

.elp-episode__body {
  display: grid;
  gap: 20px;
}

.elp-episode__body p {
  font-size: 0.97rem;
  line-height: 2;
  color: var(--elp-text);
  padding-left: 20px;
  border-left: 3px solid #bcc1c8;
  margin: 0;
}

.elp-episode__name {
  font-size: 0.85rem;
  color: var(--elp-gray-t);
  text-align: right;
  letter-spacing: .06em;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--elp-gray-m);
}

/* ============================================================
   14. サービスリスト
   ============================================================ */

.elp-service-list {
  display: grid;
  gap: 16px;
  margin: 28px 0;
}

.elp-service-item {
  background: var(--elp-white);
  /*	border-left: 4px solid var(--elp-gold);	*/
  border-radius: 0 var(--elp-radius) var(--elp-radius) 0;
  padding: 24px 32px;
  box-shadow: var(--elp-shadow);
}

.elp-service-item__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--elp-navy);
  margin-bottom: 8px;
}

.elp-service-item p {
  font-size: 0.92rem;
  line-height: 1.85;
}

/* ============================================================
   15. 中間CTAブロック
   ============================================================ */

.elp-cta-block {
  background: linear-gradient(135deg, var(--elp-navy-d), var(--elp-navy));
  color: var(--elp-white);
  border-radius: var(--elp-radius);
  padding: 52px 48px;
  margin: 52px 0;
  text-align: center;
  box-shadow: 3px 3px 10px 0px rgba(17,27,54,0.5);
}

.elp-cta-block p {
  font-size: 0.97rem;
  color: #c8d4e8;
  margin-bottom: 24px;
  line-height: 1.95;
}

.elp-cta-block__note {
  font-size: 0.8rem;
  color: #9aabc0;
  margin-top: 14px;
}

/* ============================================================
   16. 対応エリアグリッド
   ============================================================ */

.elp-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 36px 0 16px;
  border-radius: var(--elp-radius);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(17,27,54,0.18);
}

.elp-area-card {
  background: var(--elp-navy);
  padding: 44px 32px;
  position: relative;
  transition: background .25s;
}

.elp-area-card + .elp-area-card {
  border-left: 1px solid rgba(255,255,255,0.10);
}

.elp-area-card:hover {
  background: #1e2f5a;
}

.elp-area-card::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: #f0f2f5;
  margin-bottom: 22px;
  border-radius: 2px;
}

.elp-area-card__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--elp-white) !important;
  margin-bottom: 16px !important;
  line-height: 1.4 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0;
}

.elp-area-card p {
  font-size: 0.88rem;
  color: #a8bcd8;
  line-height: 1.8;
}

.elp-area-note {
  font-size: 0.82rem;
  color: var(--elp-gray-t);
  margin-top: 10px;
}

/* 4カラム版 */

.elp-area-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 900px) {
  .elp-area-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .elp-area-grid--4col {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   17. クロージングCTA
   ============================================================ */

.elp-closing {
  background: var(--elp-navy-d);
  padding: 100px 0;
  text-align: center;
}

.elp-closing__eyebrow {
  color: #f0f2f5;
  font-size: 0.8rem;
  letter-spacing: .22em;
  margin: 0 1em;
}

.elp-closing h2 {
  border: none;
  border-bottom: none;
  border-top: none;
  text-decoration: none;
  box-shadow: none;
  background: none;
  padding: 0;
}

.elp-closing h2::before,
.elp-closing h2::after {
  display: none;
  content: none;
}

.elp-closing__title {
  color: var(--elp-white);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
}

.elp-closing__body {
  color: #c8d4e8;
  font-size: 0.97rem;
  line-height: 2;
  margin-bottom: 36px;
  margin: 0.35em;
  padding: 0 15%;
}

.elp-closing__sub-note {
  color: #9aabc0;
  font-size: 0.82rem;
  margin: 0.35em;
}

.elp-closing__contact-row {
  margin-top: 32px;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.elp-closing__tel {
  color: #c8d4e8;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}

.elp-closing__tel:hover {
  color: #d9e5f9;
  text-decoration: none;
}

.elp-closing__divider {
  color: #4a6080;
}

.elp-closing__form-link {
  color: #c8d4e8;
  font-size: 0.9rem;
  text-decoration: none;
}

.elp-closing__form-link:hover {
  color: #d9e5f9;
  text-decoration: none;
}

.elp-hero__badge {
  margin: auto;
  text-align: center;
  font-size: 0.825rem;
  padding: 0.5em 0.25em;
  width: 190px;
}

/* ============================================================
   18. タブレット対応（768px ～ 1280px）
   ============================================================ */

@media (max-width: 1280px) {
  .elp-inner {
    padding: 0 36px;
  }
  .elp-section {
    padding: 1em 0;
  }
  .elp-section-title {
    font-size: 1.55rem !important;
  }
  .elp-section-title br {
    display: none;
  }
  .elp-hero {
    padding: 80px 0 68px;
  }
  .elp-hero__copy {
    font-size: 2rem;
  }
  .elp-hero__sub {
    font-size: 1rem;
  }
  .elp-hero__badge {
    margin: auto;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.5em 0.25em;
    width: 165px;
  }
  .elp-reason-grid,
  .elp-area-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .elp-area-card + .elp-area-card {
    border-left: none;
  }
  .elp-area-card:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.10);
  }
  .elp-area-card:nth-child(1),
  	.elp-area-card:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .elp-cta-block {
    padding: 44px 36px;
  }
  .elp-closing {
    padding: 80px 0;
  }
  .elp-closing__title {
    font-size: 1.75rem;
  }
  .elp-hero__toc-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   19. スマホ対応（767px 以下）
   ============================================================ */

@media (max-width: 767px) {
  .elp-inner {
    padding: 0 0.65em;
  }
  .elp-section {
    padding: 1em 0;
  }
  .elp-section-title {
    font-size: 1.25rem !important;
    padding-left: 12px !important;
    margin-bottom: 24px !important;
  }
  .elp-sub-title {
    font-size: 0.95rem !important;
  }
  .elp-hero {
    padding: 56px 0 48px;
  }
  .elp-hero__copy {
    font-size: 1.5rem;
    line-height: 1.5;
  }
  .elp-hero__sub {
    font-size: 0.92rem;
  }
  .elp-hero__badge {
    margin: auto;
    text-align: center;
    font-size: 0.625rem;
    padding: 0.5em 0.25em;
    width: 140px;
  }
  .elp-hero-spacer {
    height: 40px;
  }
  .elp-hero__toc-list {
    grid-template-columns: 1fr;
  }
  .elp-hero__toc-list li {
    font-size: 0.84rem;
  }
  .elp-card {
    padding: 16px 18px;
  }
  .elp-reason-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .elp-reason-card {
    padding: 0.5em;
  }
  .elp-service-item {
    padding: 18px 20px;
  }
  .elp-episode__body p {
    padding-left: 14px;
    font-size: 0.92rem;
  }
  .elp-cta-block {
    padding: 28px 18px;
    margin: 32px 0;
  }
  .elp-cta-block p {
    font-size: 0.88rem;
  }
  .elp-area-grid {
    grid-template-columns: 1fr;
  }
  .elp-area-card {
    padding: 0.5em;
    border-right: none !important;
  }
  .elp-area-card + .elp-area-card {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .elp-closing {
    padding: 56px 0;
  }
  .elp-closing__title {
    font-size: 1.4rem;
  }
  .elp-closing__body {
    font-size: 0.88rem;
    padding: 0;
  }
  .elp-closing__tel {
    font-size: 1.05rem;
  }
  .elp-closing__contact-row {
    flex-direction: column;
    gap: 10px;
  }
  .elp-closing__divider {
    display: none;
  }
}

/* ===== CONCEPT：補助金STAGEカード横並び ===== */

.elp-intro {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 768px) and (max-width: 1280px) {
  .elp-intro {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .elp-intro {
    grid-template-columns: 1fr;
  }
}

/* ===== おしゃれLP用 ===== */

.elp-section .elp-inner li::after {
  border-top-color: #f4f2ed;
}

/* ===== LP用のh3のライトグリーン削除 ===== */

.elp-area-card__title::after,
.elp-card__title::after,
.elp-reason-card__title::after {
  display: none;
}

/* ============================================================
   料金シミュレーション（#ad-simulation）専用スタイル
   既存クラスは一切変更せず、新規クラス elp-sim-* のみで完結。
   テーブルを使わず dl/dt/dd の flex 構成なので、
   PC・タブレット・スマホとも横スクロールなしで常に100%表示。

   ブレイクポイント
     PC       : 1281px 以上
     タブレット : 768px 〜 1280px
     スマホ    : 767px 以下
   ============================================================ */

/* カードを並べるグリッド（PCは2列、それ以外は1列） */

.elp-sim-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 100%;
}

/* 各ケースのカード */

.elp-sim-card {
  background: #ffffff;
  border: 1px solid #e5e2d8;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  /* 念のため、中身がはみ出してもカード外に出さない */
}

.elp-sim-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0d1f3c;
  margin: 0 0 4px;
  line-height: 1.4;
}

.elp-sim-card__lead {
  font-size: 0.9rem;
  color: #555;
  margin: 0 0 12px;
  line-height: 1.5;
}

.elp-sim-card__note {
  font-size: 0.85rem;
  color: #555;
  margin: 12px 0 0;
  line-height: 1.6;
}

/* 明細リスト */

.elp-sim-list {
  margin: 0;
  padding: 0;
}

/* 1行 ＝ 左（項目）と右（金額）を両端に配置 */

.elp-sim-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.elp-sim-row:last-child {
  border-bottom: none;
}

/* 項目名：余ったスペースを使い、長ければ折り返す */

.elp-sim-row dt {
  flex: 1 1 auto;
  min-width: 0;
  /* flex 子要素が縮めるようにして、はみ出し防止 */
  font-size: 0.92rem;
  color: #333;
  line-height: 1.5;
  overflow-wrap: anywhere;
  /* 長い文字列も折り返す */
  word-break: break-word;
}

/* 金額：内容ぶんだけの幅で右寄せ、折り返さない */

.elp-sim-row dd {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0d1f3c;
  text-align: right;
  white-space: nowrap;
}

/* 合計行を強調 */

.elp-sim-row--total {
  border-top: 2px solid #0d1f3c;
  border-bottom: none;
  margin-top: 2px;
  padding-top: 10px;
}

.elp-sim-row--total dt {
  font-weight: 700;
  color: #0d1f3c;
}

.elp-sim-row--total dd {
  font-size: 1rem;
  font-weight: 700;
}

/* ====================== PC（1281px 以上） ====================== */

@media (min-width: 1281px) {
  .elp-sim-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================= タブレット（768px 〜 1280px） ================= */

@media (min-width: 768px) and (max-width: 1280px) {
  .elp-sim-grid {
    grid-template-columns: 1fr;
    /* 1列に */
  }
  .elp-sim-row dt,
    .elp-sim-row dd {
    font-size: 0.9rem;
  }
}

/* ==================== スマホ（767px 以下） ==================== */

@media (max-width: 767px) {
  .elp-sim-grid {
    grid-template-columns: 1fr;
    /* 1列に */
    gap: 14px;
  }
  .elp-sim-card {
    padding: 16px;
  }
  .elp-sim-card__title {
    font-size: 0.98rem;
  }
  .elp-sim-row {
    /* 金額が長い行は、項目名の下に金額を落として横はみ出しを防ぐ */
    flex-wrap: wrap;
    gap: 2px 12px;
  }
  .elp-sim-row dt {
    flex: 1 1 100%;
    font-size: 0.88rem;
  }
  .elp-sim-row dd {
    flex: 1 1 100%;
    text-align: right;
    font-size: 0.9rem;
  }
  .elp-sim-row--total dd {
    font-size: 0.98rem;
  }
}

/* ===== 動画証拠セクション ===== */

.elp-proof-videos {
  margin: 40px 0;
}

.elp-proof-video-item {
  margin-bottom: 48px;
}

.elp-proof-video-label {
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
}

.elp-proof-video-note {
  margin-top: 12px;
  text-align: center;
}

.elp-video-wrap {
  position: relative;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.elp-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 1281px) {
  .elp-video-wrap {
    width: 80%;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .elp-video-wrap {
    width: 80%;
  }
}

@media (max-width: 767px) {
  .elp-video-wrap {
    width: 100%;
  }
}

/* ===== 対応地域 ===== */

.elp-kanagawa-box {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  box-sizing: border-box;
}

.elp-kanto-box {
  background: #f3f0ff;
  border-radius: 8px;
  padding: 1.5rem;
  box-sizing: border-box;
}

.elp-kanagawa-grid,
.elp-kanto-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.elp-kanto-grid {
  margin-top: 1rem;
}

.elp-kanagawa-grid .elp-city-card {
  flex: 0 0 calc(50% - 0.5rem);
  box-sizing: border-box;
}

.elp-kanto-grid .elp-city-card {
  flex: 0 0 calc(33.333% - 0.667rem);
  box-sizing: border-box;
}

.elp-city-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 1.2rem;
  box-sizing: border-box;
  border-left: 4px solid #005bac;
}

.elp-city-online {
  border-left: 4px solid #7b68ee;
}

.elp-city-cat {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #005bac;
}

@media (min-width: 768px) and (max-width: 1280px) {
  .elp-kanagawa-grid .elp-city-card,
  .elp-kanto-grid .elp-city-card {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

@media (max-width: 767px) {
  .elp-kanagawa-grid .elp-city-card,
  .elp-kanto-grid .elp-city-card {
    flex: 0 0 100%;
  }
}

/* ============================================
   AIO対策LP 追加パーツ（2ドア構成／ダーク統一版）
   Breakpoints: PC 1281+ / Tablet 768-1280 / Mobile -767
   ============================================ */

/* --- ヒーロー内：2つのドア（ベース = PC） --- */

.elp-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0 8px;
}

.elp-door-card {
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.04);
}

.elp-door-card p,
.elp-door-card {
  line-height: 1.85;
  color: #fff;
}

/* A：シルバー調の縁取り */

.elp-door-card--a {
	border: 1px solid #ccc;
	box-shadow: inset 0 0 0 1px rgba(210, 210, 210, 0.25);
}

.elp-door-card--a .elp-door-card__label {
  color: var(--elp-accent);
}

/* B：明るめスチールブルーの縁取り */

.elp-door-card--b {
  border: 1px solid #6f8fbf;
  box-shadow: inset 0 0 0 1px rgba(111, 143, 191, 0.25);
}

.elp-door-card--b .elp-door-card__label {
  color: #e1bff5;
}

.elp-door-card__label {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 8px;
}

.elp-door-card strong {
  color: #f0d98a;
}

.elp-door-card__link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  color: #d8bd6a;
}

/* --- FOR YOU内：ドア見出し --- */

.elp-door-head {
  margin: 32px 0 12px;
  padding: 8px 14px;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 0 8px 8px 0;
}

.elp-door-head--a {
  background: #f7f1de;
  color: #8a6c1c;
  border-left: 5px solid #c9a84c;
}

.elp-door-head--b {
  background: #e7ecf4;
  color: #0d1f3c;
  border-left: 5px solid #0d1f3c;
}

.elp-door-head--all {
  background: #efeadd;
  color: #6a5a2c;
  border-left: 5px solid #8a7a3f;
}

/* --- 横串カード（全幅） --- */

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

/* ============================================
   TABLET : 768px 〜 1280px
   ============================================ */

@media (min-width: 768px) and (max-width: 1280px) {
  .elp-doors {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 24px 0 8px;
  }
  .elp-door-card {
    padding: 20px;
  }
  .elp-door-card__label {
    font-size: 1.05rem;
  }
  .elp-door-head {
    font-size: 1.1rem;
    margin: 28px 0 10px;
  }
}

/* ============================================
   MOBILE : 767px 以下
   ============================================ */

@media (max-width: 767px) {
  .elp-doors {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0 8px;
  }
  .elp-door-card {
    padding: 16px;
    border-radius: 10px;
  }
  /* 本文を小さめにして、ラベルとの大小差をはっきり見せる */
  .elp-door-card p,
    .elp-door-card {
    font-size: 0.825rem;
  }
  .elp-door-card__label {
    font-size: 1rem;
    margin: 0 0 6px;
  }
  .elp-door-card__link {
    margin-top: 10px;
  }
  .elp-door-head {
    font-size: 1rem;
    padding: 7px 12px;
    margin: 24px 0 10px;
  }
}

/*
============================================================
 4. 固定ページ（単ページ専用）
 古物商・業務委託・契約書チェック・車庫証明・化粧品許可・ひな形集 など
============================================================
*/

/*---------- 個別ページデザイン　---------------*/

/* =========================================
   古物商書類ページ
========================================= */

#kobutsu-shorui1 {
  margin-top: 5em;
}

.kobutsu-shorui .kobutsu-catch {
  margin: 0.875em auto;
  padding: 1em 1.2em;
  background: #f5f8fb;
  border-left: 4px solid #4a6fa5;
  font-weight: 500;
  line-height: 1.8;
}

.kobutsu-shorui .kobutsu-catch .in-link {
  margin: 1em auto;
  font-weight: 600;
}

.kobutsu-shorui .kobutsu-miss-list {
  margin: 1em 0 1.8em;
  padding-left: 1.2em;
  line-height: 1.8;
}

.kobutsu-shorui .kobutsu-miss-list li {
  margin: 1em 0;
}

.kobutsu-shorui .kobutsu-intro {
  margin: 2em 0 1.5em;
  padding: 1.5em 1.8em;
  background: #f9fafb;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  line-height: 1.8;
}

.kobutsu-shorui .kobutsu-intro-title {
  margin: 0 0 .8em;
  font-size: 1.15em;
  font-weight: 700;
  color: #2c3e50;
}

.kobutsu-shorui .kobutsu-cta {
  margin: 1.3em 0 0;
  padding: 1.1em 1.3em;
  background: #f7f9fb;
  border: 1px solid #d9e1ea;
  border-radius: 6px;
  font-weight: 500;
}

.kobutsu-shorui .kobutsu-flow {
  counter-reset: step;
  list-style: none;
  margin: 1.2em 0 2em;
  padding: 0;
}

.kobutsu-shorui .kobutsu-flow > li {
  counter-increment: step;
  position: relative;
  margin-bottom: 1.2em;
  padding: 1.2em 1.4em 1.2em 3.8em;
  background: #fafafa;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  line-height: 1.7;
}

.kobutsu-shorui .kobutsu-flow > li::before {
  content: counter(step);
  position: absolute;
  top: 1.1em;
  left: 1.1em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  font-weight: 700;
  font-size: .95em;
  color: #555;
  background: #f0f0f0;
  border-radius: 50%;
}

.kobutsu-shorui .kobutsu-flow strong {
  display: block;
  margin-bottom: .3em;
  font-size: 1.02em;
  color: #333;
}

.kobutsu-shorui .note {
  display: inline;
  margin-top: .6em;
  padding: .5em .7em;
  background: #fff8e5;
  border-left: 4px solid #f0c040;
  font-size: .88em;
  color: #555;
}

/* ----- オススメ用吹き出し -----*/

.el-force-scroll {
  padding-top: 3em !important;
  overflow: visible !important;
}

@media screen and (max-width: 767px) {
  .el-force-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
}

.cloud-fukidashi {
  position: relative !important;
}

.cloud-fukidashi::before {
  content: "オススメ";
  position: absolute;
  z-index: 100;
  left: 55%;
  top: -55px;
  transform: translateX(-50%);
  background: #fffde7;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 0.785em;
  font-weight: bold;
  padding: 0.5em 1em;
  white-space: nowrap;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.1);
  animation: balloon-float 3s ease-in-out infinite;
  pointer-events: none;
}

.cloud-fukidashi::after {
  content: '';
  position: absolute;
  z-index: 90;
  top: -10px;
  left: 47%;
  width: 18px;
  height: 18px;
  background: #fffde7;
  border-radius: 50%;
  border: 2px solid #ccc;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.02);
  animation: balloon-float 3s ease-in-out infinite;
  pointer-events: none;
}

.cloud-fukidashi a::before {
  content: '';
  position: absolute;
  z-index: 80;
  top: 10px;
  left: 42%;
  width: 10px;
  height: 10px;
  background: #fffde7;
  border-radius: 50%;
  border: 2px solid #ccc;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.05);
  animation: balloon-float 3s ease-in-out infinite;
}

@media screen and (max-width: 767px) {
  .cloud-fukidashi::before {
    top: -45px;
    font-size: 0.725em;
    padding: 0.3em 0.75em;
  }
  .cloud-fukidashi::after {
    top: -5px;
    width: 12px;
    height: 12px;
  }
  .cloud-fukidashi a::before {
    top: 10px;
    width: 7px;
    height: 7px;
  }
}

@keyframes balloon-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/*---------- 業務委託 ---------------*/

#gyomuitaku-final-layout {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 15px;
  color: #2d3748;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
}

/*---------- 契約書リーガルチェック-対応エリア ---------------*/

.area-container {
  margin-top: 20px;
  font-size: 0.95em;
}

.area-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.area-cat {
  font-size: 1.1em !important;
  color: #333;
  border-left: 4px solid #bff5d8;
  padding-left: 10px;
  margin-bottom: 10px !important;
  margin-top: 0 !important;
  text-align: left !important;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
}

.main-area {
  border: 2px solid #005CAF;
  background: #f0f7ff;
}

.online-area {
  background: #f9f9f9;
  border: 2px dashed #ccc;
  text-align: center;
  margin-top: 0;
}

.online-lead {
  font-size: 1.1em;
  color: #d32f2f;
  margin-bottom: 5px;
}

.area-tag {
  display: inline-block;
  background: #666;
  color: #fff;
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 10px;
}

.area-tag.gold {
  background: #b8860b;
}

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

/*---------- 車庫証明-メリット ---------------*/

.merit-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0;
}

.merit-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  border-left: 5px solid #d32f2f;
}

.merit-icon {
  font-size: 28px;
  color: #d32f2f;
  margin-right: 15px;
  min-width: 40px;
  text-align: center;
  padding-top: 5px;
}

.merit-text strong {
  display: block;
  margin-bottom: 5px;
  line-height: 1.4;
}

.merit-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.final-header {
  text-align: center;
  margin-bottom: 40px;
}

.final-header h2 {
  color: #1a365d;
}

.final-subtitle {
  display: block;
  font-size: 1.1rem;
  color: #b08d4b;
  margin-top: 10px;
  font-weight: 600;
}

.final-main-img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 50px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.final-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 60px;
}

.final-text-content {
  flex: 1.2;
  min-width: 320px;
}

.final-check-list {
  list-style: none;
  padding: 0;
  margin-top: 25px;
}

.final-check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 1.1rem;
}

.final-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  background: #b08d4b;
}

.final-cta-box {
  flex: 0.8;
  min-width: 320px;
  background: #fdfdfd;
  border: 1px solid #e2e8f0;
  border-top: 4px solid #1a365d;
  padding: 30px;
  text-align: center;
  border-radius: 0 0 8px 8px;
}

.final-cta-btns {
  display: flex;
  flex-direction: column;
  margin: 1.25em 0;
}

.final-cta-btns a {
  padding: 16px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}

.final-btn-tel {
  background: #1a365d;
  color: #fff;
}

.final-btn-mail {
  border: 1px solid #1a365d;
  color: #1a365d;
}

.final-free-badge {
  font-weight: bold;
  font-size: 1.1rem;
}

.final-free-badge span {
  color: #e53e3e;
  font-size: 1.6rem;
  margin-left: 5px;
}

.final-btn-tel:hover,
.final-btn-mail:hover {
  opacity: 0.8;
}

.final-area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  .final-area-grid {
    grid-template-columns: 1fr;
  }
}

.final-area-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  padding: 30px;
  border-radius: 8px;
}

.final-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #1a365d;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.final-area-card h3 {
  font-size: 1.4rem;
  margin: 0;
  color: #1a365d;
}

.final-tag {
  font-size: 0.8rem;
  background: #f1f5f9;
  padding: 4px 10px;
  color: #64748b;
  border-radius: 3px;
}

.final-dl-section {
  background: #f5f7f9;
  padding: 60px 20px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e1e8f0;
}

.final-dl-inner h2 {
  font-size: 1.6rem;
  color: #1a365d;
  margin-bottom: 20px;
  border: none;
}

.final-dl-lead {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.final-highlight {
  background: #fff5ab;
  padding: 2px 8px;
  font-weight: bold;
}

.final-dl-btns {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 35px;
}

.final-btn-main {
  background: #b08d4b;
  color: #fff;
  padding: 18px 35px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

.final-btn-sub {
  border: 1px solid #2d3748;
  color: #2d3748;
  padding: 18px 35px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

@media (max-width: 600px) {
  .final-dl-btns {
    flex-direction: column;
  }
}

/*----- 化粧品許可用 ---------------*/

.highlight-box {
  border: 0.2em solid #d4af37;
  padding: 1.5em;
  border-radius: 0.5em;
  background: #fffcf5;
  margin-bottom: 2.5em;
  text-align: center;
}

.box-sub-text {
  font-weight: bold;
  color: #b8860b;
  margin-bottom: 1em;
  font-size: 1.1em;
}

.box-main-title {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1.65em;
  line-height: 2em;
  color: #333;
}

.box-main-title:before,
.box-main-title:after {
  display: none;
}

.red-highlight {
  color: #c00;
  font-size: 2em;
  font-weight: bold;
}

.usu-kurenai {
  color: #f29c97;
  font-size: 2em;
  font-weight: bold;
}

.sp-only {
  display: none;
}

@media screen and (max-width: 1280px) {
  .highlight-box {
    padding: 1.5em;
  }
  .box-main-title {
    font-size: 1.2em;
    text-align: center;
  }
  .box-main-title:before,
  	.box-main-title:after {
    display: none;
  }
  .red-highlight,
  .usu-kurenai {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 767px) {
  .highlight-box {
    padding: 1em 0.5em;
    margin-bottom: 1.5em;
    border-width: 0.1em;
  }
  .box-sub-text {
    font-size: 0.75em;
    margin-bottom: 0.75em;
    text-align: center;
  }
  .box-main-title {
    font-size: 0.875em;
    line-height: 1.5em;
  }
  .box-main-title:before,
  	.box-main-title:after {
    display: none;
  }
  .red-highlight {
    font-size: 1.45em;
    display: inline-block;
    margin-top: 0.45em;
  }
  .usu-kurenai {
    font-size: 1.5em;
  }
  .sp-only {
    display: block;
  }
}

/* --- 化粧品許可-対応地域 --- */

.area-container {
  display: flex;
  gap: 20px;
  margin-top: 2em;
}

.area-card {
  flex: 1;
  background: #f9f9f9;
  padding: 1.25em 0.5em;
  border-radius: 0.45em;
}

.area-yokohama {
  border-left: 0.45em solid #003366;
}

.area-kanagawa {
  border-left: 0.45em solid #333;
}

.area-label {
  font-size: 1.1em;
  margin-bottom: 1em;
  color: #333;
}

.area-text {
  font-size: 0.925em;
  line-height: 2em;
  margin: 0;
}

.area-note {
  margin-top: 1.925em;
  padding: 1.25em;
  background: #fff5f5;
  border: 1px solid #ffcccc;
  border-radius: 0.5em;
}

.note-title {
  color: #d95e4d;
  margin-bottom: 0.75em;
}

.note-title:after {
  display: none;
}

.note-text {
  font-size: 0.925em;
  line-height: 2em;
  margin: 0;
}

@media screen and (max-width: 1280px) {
  .area-container {
    flex-direction: row;
    gap: 15px;
  }
  .area-card {
    padding: 1.25em;
  }
}

@media screen and (max-width: 767px) {
  .area-container {
    flex-direction: column;
  }
  .area-card {
    padding: 0.925em;
  }
  .area-label {
    font-size: 1em;
    margin-bottom: 0.875em;
  }
  .area-text {
    font-size: 0.9em;
  }
  .area-note {
    margin-top: 1.25em;
    padding: 0.925em;
  }
}

/*  内容証明郵便のエリアCSS */

.area-lead {
  margin-bottom: 30px;
  line-height: 1.8;
  text-align: center;
}

.area-lead strong {
  color: #c00;
  border-bottom: 2px solid #ff0;
}

.area-card-header {
  background: #444;
  color: #fff;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 1.1em;
}

.area-card-body {
  padding: 15px;
  font-size: 0.95em;
  line-height: 1.6;
}

.area-card-body strong {
  color: #333;
}

.area-footer {
  text-align: center;
  font-size: 0.9em;
  color: #666;
}

@media (max-width: 600px) {
  .area-lead {
    text-align: left;
  }
}

/*----- AIO実績紹介用シンプル枠 ----------*/

.aio-performance-box {
  background-color: #fffaf0;
  border: 0.15em solid #d9534f;
  padding: 1.25em;
  border-radius: 0.5em;
  margin: 1.875em 0;
}

.performance-label {
  margin-top: 0;
  font-weight: bold;
  color: #d9534f;
  text-align: center;
  font-size: 1.5em;
}

.performance-content {
  line-height: 1.8;
}

.performance-result {
  text-align: center;
  margin: 1em 0 0 0;
  line-height: 2;
}

.result-number {
  color: #d9534f;
  font-size: 2em;
  font-weight: bold;
  margin-left: 0.25em;
  line-height: 0;
}

.to-explain {
  font-size: 1.15em;
}

@media (max-width: 767px) {
  .result-number {
    font-size: 1.35em;
  }
  .to-explain {
    font-size: 0.875em;
  }
}

/*--退職代行ページ --*/

.taishoku {
  width: 95%;
  margin: 0 auto;
}

.taishoku#area {
  background: #f9f9f9;
  border-radius: 8px;
}

.area-box {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.area-group {
  flex: 1;
  background: #fff;
  padding: 25px;
  border: 1px solid #ddd;
  border-left: 5px solid #2c3e50;
}

.area-title {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.taishoku#contact-lead {
  text-align: center;
  padding: 60px 20px;
}

.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.btn-tel {
  background: #e67e22;
  color: #fff !important;
}

.btn-mail {
  background: #2c3e50;
  color: #fff !important;
}

@media screen and (max-width: 1280px) {
  .taishoku {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .taishoku {
    padding: 0;
  }
  .taishoku .el-force-scroll thead th {
    font-size: 1em;
    text-align: center;
  }
  .area-box {
    flex-direction: column;
    gap: 15px;
  }
  .area-group {
    padding: 15px;
  }
  .area-title {
    font-size: 1.1rem;
  }
  .contact-buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .elp-reason-card .in-link {
    width: 100%;
    max-width: 300px;
    min-width: auto;
    box-sizing: border-box;
  }
}

/* 比較表の強調列（行政書士） */

.basic-table.ryokin th.highlight-col,
.basic-table.ryokin td.highlight-col {
  background-color: #f0f7ff !important;
  border-left: 2px solid #2c3e50;
  border-right: 2px solid #2c3e50;
}

.basic-table.ryokin th.highlight-col {
  background-color: #e1efff !important;
}

.basic-table.ryokin tr:last-child td.highlight-col {
  border-bottom: 2px solid #2c3e50;
}

/* =========================================================
   ひな形集（#tpl-collection）専用CSS
   ========================================================= */

#tpl-collection {
  max-width: 1100px;
  margin: 0 auto;
}

#tpl-collection,
#tpl-collection * {
  box-sizing: border-box;
}

#tpl-collection .tpl-page-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 10px 0 8px;
  line-height: 1.35;
}

#tpl-collection .tpl-page-lead {
  margin: 0 0 14px;
  line-height: 1.9;
}

#tpl-collection .tpl-notes {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #e8e8e8;
  background: #fafafa;
  border-radius: 10px;
  line-height: 1.85;
  font-size: 14px;
}

#tpl-collection .tpl-cta {
  margin: 16px 0 26px;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: #fff;
}

#tpl-collection .tpl-cta-title {
  margin: 0 0 8px;
  font-weight: 800;
}

#tpl-collection .tpl-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#tpl-collection .tpl-cta-actions a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid #222;
  color: #222;
}

#tpl-collection .tpl-cta-actions a.tpl-cta-primary {
  background: #222;
  color: #fff;
}

#tpl-collection .tpl-divider {
  border: 0;
  border-top: 1px solid #eee;
  margin: 22px 0;
}

#tpl-collection .tpl-toc {
  display: grid;
  gap: 10px;
  width: 90%;
  margin: auto;
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
}

#tpl-collection .tpl-toc-title {
  margin: 0;
  font-weight: 800;
}

#tpl-collection .tpl-toc ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.9;
}

#tpl-collection .tpl-toc a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#tpl-collection .tpl-cat-title {
  margin: 1em 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
}

#tpl-collection .tpl-toc a {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: #222;
  font-weight: 600;
  line-height: 1.6;
  transition: background-color .2s ease,
		color .2s ease,
		box-shadow .2s ease,
		transform .15s ease;
}

@media (hover:hover) {
  #tpl-collection .tpl-toc a:hover {
    background-color: #eef6f2;
    color: #1f6f57;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transform: translateX(2px);
  }
}

#tpl-collection .tpl-toc a.is-active {
  background-color: #dff1ea;
  color: #1f6f57;
  font-weight: 700;
}

#tpl-collection .tpl-list {
  display: grid;
  gap: 0;
}

#tpl-collection .tpl-item {
  display: grid;
  align-items: start;
  column-gap: 24px;
  row-gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid #e6e6e6;
}

#tpl-collection .tpl-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#tpl-collection .tpl-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  margin: 0;
}

#tpl-collection .tpl-meta {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

#tpl-collection .tpl-desc {
  font-size: 14px;
  line-height: 1.9;
  color: #222;
  margin: 0;
  min-width: 0;
}

#tpl-collection .tpl-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#tpl-collection .tpl-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  padding: 0 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .03em;
  border: 1px solid transparent;
  white-space: nowrap;
}

#tpl-collection .tpl-btn-primary {
  background: #b0894d;
  color: #fff;
}

#tpl-collection .tpl-btn-ghost {
  background: #fff;
  color: #222;
  border-color: #222;
}

@media (hover:hover) {
  #tpl-collection .tpl-btn-primary:hover {
    filter: brightness(0.96);
  }
  #tpl-collection .tpl-btn-ghost:hover {
    background: #f5f5f5;
  }
}

@media (min-width: 1281px) {
  #tpl-collection .tpl-item {
    grid-template-columns: 260px 1fr 240px;
  }
  #tpl-collection .tpl-btn {
    width: 240px;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  #tpl-collection .tpl-item {
    grid-template-columns: 240px 1fr;
  }
  #tpl-collection .tpl-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  #tpl-collection .tpl-btn {
    width: min(320px, 100%);
    flex: 1 1 240px;
  }
}

@media (max-width: 767px) {
  #tpl-collection .tpl-page-title {
    font-size: 24px;
  }
  #tpl-collection .tpl-cat-title {
    font-size: 22px;
  }
  #tpl-collection .tpl-item {
    grid-template-columns: 1fr;
    padding: 16px 0;
  }
  #tpl-collection .tpl-actions {
    flex-direction: column;
  }
  #tpl-collection .tpl-btn {
    width: 100%;
    white-space: normal;
  }
}

#tpl-collection [id^="cat-"] {
  scroll-margin-top: 90px;
}

#tpl-collection p {
  margin-top: 0;
  margin-bottom: 0;
}

#tpl-collection .tpl-desc {
  margin: 0;
}

#tpl-collection .tpl-name {
  word-break: break-word;
}

#tpl-collection .tpl-btn-primary {
  transition: background-color .2s ease,
		box-shadow .2s ease,
		transform .15s ease;
}

#tpl-collection .tpl-btn-primary:hover {
  background-color: #9c7840;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

#tpl-collection .tpl-btn-ghost {
  transition: background-color .2s ease,
		color .2s ease,
		box-shadow .2s ease;
}

#tpl-collection .tpl-btn-ghost:hover {
  background-color: #f2f2f2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

#tpl-collection .tpl-cta-actions a.tpl-cta-primary {
  transition: background-color .2s ease,
		box-shadow .2s ease,
		transform .15s ease;
}

#tpl-collection .tpl-cta-actions a.tpl-cta-primary:hover {
  background: #000;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

#tpl-collection .tpl-btn-ghost {
  transition: background-color .2s ease,
		color .2s ease,
		border-color .2s ease,
		box-shadow .2s ease,
		transform .15s ease;
}

#tpl-collection .tpl-btn-ghost:hover {
  background-color: #eef6f2;
  border-color: #6bbf9c;
  color: #1f6f57;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

#tpl-collection .tpl-cta-actions a {
  transition: background-color .2s ease,
		color .2s ease,
		box-shadow .2s ease,
		transform .15s ease;
}

#tpl-collection .tpl-cta-actions a:not(.tpl-cta-primary):hover {
  background-color: #f3f7f5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* =========================
   免責事項（#tpl-disclaimer）
   ========================= */

#tpl-disclaimer {
  margin: 40px 0 16px;
  padding: 24px 26px;
  background: #f7f9f8;
  border: 2px solid #cfe6dc;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04),
		0 10px 22px rgba(0,0,0,0.03);
}

#tpl-disclaimer h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}

#tpl-disclaimer p {
  margin: 0 0 12px;
  line-height: 1.9;
  font-size: 14.5px;
}

#tpl-disclaimer p:last-of-type {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #b9d8cc;
}

/*
============================================================
 5. 固定ページ（マイナスマーケティング用）
 .mm-page の内側にだけ効く
============================================================
*/

/*
==========================================================
自分の弱みを見せる・少しやわらかめの雰囲気にしたいなど
==========================================================
マイナスマーケティング戦略立案：サービスページに使用している

【構造方針（本版で適用済み）】
・h1には一切干渉しない（ページタイトルはCMS側の装飾に任せる）。
・各セクションは <section> 直下の <h2 class="sec-h"> が見出しの起点。
  ラベル（eyebrow）はh2内の span として内部に置く。
・header要素のスタイルは含まない（テーマ側のheaderを使う）。

【3ブレークポイント構成】
  共通ベース → ① 1281px以上（PC用）→ ② 768px～1280px（タブレット用）→ ③ 767px以下（スマホ用）

【使い方】
・WordPress「外観 → カスタマイズ → 追加CSS」にそのまま全行貼り付け。
・フォントは下の @import で読み込むため、head要素の編集は不要です。
・すべてのスタイルは .mm-page の内側にのみ効くスコープ設計です。

【色を変えたいとき】
:root（このファイルの先頭の共通パーツ内）の変数を1か所直すだけで全体が変わります。
  --shu（朱：メインアクセント）／--ink（墨：濃色・暗色背景）
  --paper（紙：ページ背景）／--kinari（生成り：カード背景）
==========================================================
*/

/* ==========================================================
   共通ベース（全ブレークポイント共通：縦積みが基本形）
   ========================================================== */

.mm-page,.mm-page * {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.mm-page {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}

.mm-page a {
  color: inherit;
}

/* ---------- 見出し・リンク・リストの正規化（テーマの装飾干渉を打ち消す） ----------
   テーマ側の .entry-content h2{border-bottom:…} 等は詳細度が高いため、
   div.mm-page タグ連鎖（詳細度 0,1,2）で上回って打ち消します。
   各部品の見た目はその後の class 指定（.sec-h / .card h3 など）が上書きします */

div.mm-page h2,div.mm-page h3,div.mm-page h4,div.mm-page h5,div.mm-page h6 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: normal;
  border: none;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  padding: 0;
}

/* テーマ側が h2::before / h2::after / h3::after などで飾り線を差し込む対策。
   見出しそのものの疑似要素だけを消すので、.eyebrow::before や li::before など
   このブロック内で意図的に使っている装飾には影響しません */

div.mm-page h2::before,div.mm-page h2::after,
div.mm-page h3::before,div.mm-page h3::after,
div.mm-page h4::before,div.mm-page h4::after,
div.mm-page h5::before,div.mm-page h5::after,
div.mm-page h6::before,div.mm-page h6::after {
  content: none !important;
  display: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

div.mm-page a {
  color: inherit;
  text-decoration: none;
}

div.mm-page ul,div.mm-page ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

div.mm-page li {
  list-style: none;
}

.mm-page :focus-visible {
  outline: 3px solid var(--shu);
  outline-offset: 3px;
  border-radius: 2px;
}

.mm-page .wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- ページ内リンクナビ（headerとは別物：aria-labelで区別） ---------- */

.mm-page .page-nav {
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--kinari);
  font-size: 13px;
}

.mm-page .page-nav-lead {
  margin: 0 0 12px;
  padding-bottom: 6px;
  text-align: center;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: .08em;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.mm-page .page-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-page .page-nav-item {
  display: flex;
  list-style: none;
}

.mm-page .page-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 2px 0;
  color: var(--sumi);
  text-decoration: none;
  line-height: 1.35;
  text-align: center;
  font-size: 0.92rem;
}

.mm-page .page-nav-link:hover {
  color: var(--shu);
}

/* ---------- hanko（朱印：このページの象徴パーツ） ---------- */

.mm-page .hanko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--shu);
  color: var(--kinari);
  font-family: var(--serif);
  font-weight: 900;
  border-radius: 7px;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2.5px rgba(255,253,247,.4),0 2px 10px rgba(158,47,33,.25);
}

/* ---------- セクション共通：見出しは必ず section 直下の h2 ---------- */

.mm-page section {
  padding: 52px 0;
}

.mm-page .sec-h {
  max-width: var(--maxw);
  margin: 0 auto 36px;
  padding: 0 24px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px,3.6vw,26px);
  line-height: 1.5;
  letter-spacing: .04em;
  position: relative;
  /* 一部テーマの疑似要素absolute配置の基準崩れ回避 */
}

.mm-page .sec-h .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--shu);
  text-transform: uppercase;
  font-weight: 500;
}

.mm-page .sec-h .eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--shu);
  border-radius: 1px;
  flex: none;
}

.mm-page .sec-sub {
  color: var(--sumi);
  font-size: 15px;
  margin-bottom: 36px;
  max-width: 640px;
}

/* ---------- hero ---------- */

.mm-page .hero {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.mm-page .hero .sec-h {
  font-size: clamp(25px,6.6vw,30px);
  line-height: 1.48;
  font-weight: 900;
  margin-bottom: 28px;
}

.mm-page .hero .sec-h .shu {
  color: var(--shu);
}

.mm-page .hero-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

/* Gutenberg/テーマ側で class="lede" が落ちても効くように、hero-main 直下の段落そのものを対象にする */

div.mm-page .hero .hero-main > p,
div.mm-page .hero p.lede {
  font-size: 15px !important;
  line-height: 2.1 !important;
  color: var(--sumi) !important;
  margin: 0 !important;
  font-family: var(--sans) !important;
  letter-spacing: .02em !important;
}

div.mm-page .hero .hero-main > p + p,
div.mm-page .hero p.lede + p.lede {
  margin-top: 18px !important;
}

div.mm-page .hero .hero-main > p strong,
div.mm-page .hero p.lede strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

.mm-page .hero-hanko {
  width: 78px;
  height: 78px;
  font-size: 40px;
}

.mm-page .hero-note {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--sumi);
  border-left: 2px solid var(--shu);
  padding-left: 14px;
  line-height: 1.8;
}

/* ---------- buttons ---------- */

.mm-page .btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .05em;
  padding: 15px 30px;
  border-radius: 3px;
  transition: transform .15s ease,box-shadow .15s ease;
}

.mm-page .btn-shu {
  background: var(--shu);
  color: var(--kinari);
  box-shadow: 0 3px 0 var(--shu-deep);
}

.mm-page .btn-shu:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--shu-deep);
}

.mm-page .btn-ghost {
  border: 1.5px solid var(--ink);
  color: var(--ink);
}

.mm-page .btn-ghost:hover {
  background: var(--ink);
  color: var(--kinari);
}

.mm-page .btn-row {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- weakness cards ---------- */

.mm-page .cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.mm-page .card {
  background: var(--kinari);
  border: 1px solid var(--line);
  border-left: 5px solid var(--shu);
  border-radius: 4px;
  padding: 28px 24px 26px;
  position: relative;
}

.mm-page .card .tag {
  position: absolute;
  top: -14px;
  left: 22px;
  background: var(--shu);
  color: var(--kinari);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  padding: 3px 14px;
  border-radius: 2px;
  transform: rotate(-2deg);
}

.mm-page .card h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  margin: 8px 0 14px;
}

.mm-page .card p {
  font-size: 14px;
  line-height: 2;
  color: var(--sumi);
}

.mm-page .card p b {
  color: var(--ink);
}

/* ---------- confession (dark) ---------- */

.mm-page .confess {
  background: var(--ink);
  color: var(--kinari);
}

.mm-page .confess .sec-h {
  color: var(--kinari);
}

/* テーマのh2文字色（黒系）が漏れて闇に溶ける対策 */

.mm-page .confess .sec-h .eyebrow {
  color: #E8A08F;
}

.mm-page .confess .sec-h .eyebrow::before {
  background: #E8A08F;
}

.mm-page .confess-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.mm-page .confess p {
  font-size: 14.5px;
  line-height: 2.2;
  color: #CFCBC0;
  margin-top: 20px;
}

.mm-page .confess p b {
  color: var(--kinari);
}

.mm-page .big-loss {
  background: rgba(255,253,247,.06);
  border: 1px solid rgba(255,253,247,.16);
  border-radius: 6px;
  padding: 30px 24px;
  text-align: center;
}

.mm-page .big-loss .num {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(36px,6vw,50px);
  color: #E8A08F;
  line-height: 1.2;
}

.mm-page .big-loss .lbl {
  font-size: 13px;
  color: #CFCBC0;
  margin-top: 6px;
}

.mm-page .big-loss .div {
  height: 1px;
  background: rgba(255,253,247,.16);
  margin: 20px 0;
}

.mm-page .big-loss small {
  display: block;
  font-size: 11.5px;
  color: #8F8C83;
  margin-top: 14px;
  line-height: 1.8;
}

/* ---------- typology ---------- */

.mm-page .types {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}

.mm-page .type {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 28px 6px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.mm-page .type .no {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--shu);
  letter-spacing: .1em;
}

.mm-page .type .no .jp {
  display: inline-block;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin-left: 10px;
  letter-spacing: .08em;
}

.mm-page .type h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.mm-page .type h3 .badge {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--kinari);
  background: var(--shu);
  border-radius: 2px;
  padding: 2px 9px;
  margin-left: 10px;
  vertical-align: 3px;
  letter-spacing: .12em;
}

.mm-page .type p {
  font-size: 14px;
  color: var(--sumi);
  line-height: 2;
}

.mm-page .type p b {
  color: var(--ink);
}

/* ---------- legal strip ---------- */

.mm-page .legal {
  background: var(--shu-wash);
  border: 1px solid #E8CFC5;
  border-radius: 6px;
  padding: 28px 24px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}

.mm-page .legal .hanko {
  width: 60px;
  height: 60px;
  font-size: 32px;
}

.mm-page .legal h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.mm-page .legal p {
  font-size: 13.5px;
  color: #6A554D;
  line-height: 2;
}

.mm-page .legal p b {
  color: var(--shu-deep);
}

/* ---------- menu ---------- */

.mm-page .menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.mm-page .menu-item {
  background: var(--kinari);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 22px;
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.mm-page .menu-item .mn {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--shu);
  flex: none;
}

.mm-page .menu-item h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.mm-page .menu-item p {
  font-size: 13px;
  color: var(--sumi);
  line-height: 1.95;
}

/* ---------- pricing ---------- */

.mm-page .price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}

.mm-page .plan {
  background: var(--kinari);
  border: 1.5px solid var(--line);
  border-radius: 5px;
  padding: 30px 24px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.mm-page .plan.feat {
  border: 2px solid var(--shu);
  box-shadow: 0 10px 30px rgba(158,47,33,.10);
}

.mm-page .plan .p-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  color: var(--sumi);
  text-transform: uppercase;
}

.mm-page .plan h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0 4px;
}

.mm-page .plan .price {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 32px;
  margin: 12px 0 4px;
}

.mm-page .plan .price small {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--sumi);
}

.mm-page .plan .note {
  font-size: 12px;
  color: var(--shu-deep);
  font-weight: 700;
  margin-bottom: 16px;
}

.mm-page .plan ul {
  list-style: none;
  margin-top: 6px;
  flex: 1;
}

.mm-page .plan li {
  font-size: 13px;
  color: var(--sumi);
  line-height: 1.9;
  padding: 7px 0 7px 22px;
  border-bottom: 1px dashed var(--line);
  position: relative;
}

.mm-page .plan li::before {
  content: "＋";
  position: absolute;
  left: 0;
  color: var(--shu);
  font-weight: 700;
}

.mm-page .plan .btn {
  margin-top: 22px;
}

.mm-page .price-foot {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--sumi);
  line-height: 1.9;
}

.mm-page .price-foot b {
  color: var(--ink);
}

/* ---------- fit / unfit ---------- */

.mm-page .fit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.mm-page .fit-box {
  border-radius: 5px;
  padding: 28px 24px;
}

.mm-page .fit-box.yes {
  background: var(--kinari);
  border: 1.5px solid var(--line);
}

.mm-page .fit-box.no {
  background: var(--ink);
  color: var(--kinari);
}

.mm-page .fit-box h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mm-page .fit-box.yes h3::before {
  content: "向いています";
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  background: var(--shu);
  color: var(--kinari);
  padding: 3px 10px;
  border-radius: 2px;
  letter-spacing: .1em;
}

.mm-page .fit-box.no h3::before {
  content: "向いていません";
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  background: #565349;
  color: var(--kinari);
  padding: 3px 10px;
  border-radius: 2px;
  letter-spacing: .1em;
}

.mm-page .fit-box ul {
  list-style: none;
}

.mm-page .fit-box li {
  font-size: 13.5px;
  line-height: 2;
  padding: 8px 0 8px 20px;
  border-bottom: 1px dashed rgba(128,124,112,.35);
  position: relative;
}

.mm-page .fit-box.yes li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--shu);
  font-weight: 700;
}

.mm-page .fit-box.no li::before {
  content: "×";
  position: absolute;
  left: 0;
  color: #B8B4A8;
  font-weight: 700;
}

.mm-page .fit-box.no li {
  border-bottom-color: rgba(255,253,247,.14);
  color: #D8D5CB;
}

/* ---------- flow ---------- */

.mm-page .flow {
  border-left: 2px solid var(--line);
  margin-left: 8px;
  padding-left: 0;
}

.mm-page .step {
  position: relative;
  padding: 0 0 32px 30px;
}

.mm-page .step:last-child {
  padding-bottom: 0;
}

.mm-page .step::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--shu);
}

.mm-page .step .s-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--shu);
}

.mm-page .step h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 6px;
}

.mm-page .step p {
  font-size: 13.5px;
  color: var(--sumi);
  line-height: 2;
}

/* ---------- faq ---------- */

.mm-page .faq {
  border-top: 2px solid var(--ink);
}

.mm-page details {
  border-bottom: 1px solid var(--line);
}

.mm-page summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 6px;
  font-weight: 700;
  font-size: 14.5px;
  position: relative;
}

.mm-page summary::-webkit-details-marker {
  display: none;
}

.mm-page summary::after {
  content: "＋";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--shu);
  font-weight: 700;
  font-size: 18px;
  transition: transform .2s;
}

.mm-page details[open] summary::after {
  content: "－";
}

.mm-page details .ans {
  padding: 0 6px 22px;
  font-size: 13.5px;
  color: var(--sumi);
  line-height: 2.1;
}

.mm-page details .ans b {
  color: var(--ink);
}

/* ---------- footer cta ---------- */

.mm-page .cta {
  background: var(--shu-wash);
  border-top: 1px solid #E8CFC5;
  text-align: center;
}

.mm-page .cta .sec-h {
  text-align: center;
}

.mm-page .cta .sec-h .eyebrow {
  justify-content: center;
}

.mm-page .cta-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mm-page .cta .hanko {
  width: 60px;
  height: 60px;
  font-size: 32px;
  margin: 0 0 20px;
}

.mm-page .cta p {
  color: var(--sumi);
  font-size: 14px;
  line-height: 2;
}

.mm-page .cta .btn {
  margin-top: 26px;
}

/* ---------- cluster nav ---------- */

.mm-page .cluster {
  border-top: 1px solid var(--line);
}

.mm-page .cluster .sec-h {
  font-size: 17px;
  margin-bottom: 0;
}

.mm-page .cluster .sec-h .eyebrow {
  margin-bottom: 8px;
}

.mm-page .cluster .inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  padding-top: 22px;
}

.mm-page .cluster .inner p {
  font-size: 12.5px;
  color: var(--sumi);
}

.mm-page .cluster a {
  text-decoration: none;
}

.mm-page footer {
  background: var(--ink);
  color: #8F8C83;
  font-size: 11.5px;
  text-align: center;
  padding: 26px 20px;
  line-height: 2;
}

/* ---------- hero entrance（ページを開いた瞬間に一度だけ） ---------- */

@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mm-page .hero .sec-h {
  animation: heroIn .8s ease both;
}

.mm-page .hero-body>* {
  animation: heroIn .8s ease .15s both;
}

@media(prefers-reduced-motion:reduce) {
  .mm-page .hero .sec-h,.mm-page .hero-body>* {
    animation: none;
  }
  .mm-page .btn,.mm-page .btn-shu:hover {
    transform: none;
  }
}

/* ==========================================================
   ① 1281px以上：PC用
   ========================================================== */

@media (min-width:1281px) {
  .mm-page .page-nav {
    padding: 12px 24px;
  }
  .mm-page .page-nav-lead {
    margin-bottom: 8px;
    font-size: 0.82rem;
  }
  .mm-page .page-nav-list {
    flex-wrap: wrap;
    gap: 6px 22px;
  }
  .mm-page .hero {
    padding: 88px 0 72px;
  }
  .mm-page .hero .sec-h {
    font-size: 48px;
    line-height: 1.42;
  }
  .mm-page .hero-body {
    grid-template-columns: 1fr auto;
    gap: 40px;
  }
  .mm-page .hero .lede {
    max-width: 620px;
    font-size: 15.5px;
    line-height: 2.15;
  }
  .mm-page .hero-hanko {
    width: 118px;
    height: 118px;
    font-size: 64px;
  }
  .mm-page .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 36px;
  }
  .mm-page section {
    padding: 76px 0;
  }
  .mm-page .sec-h {
    margin-bottom: 44px;
    font-size: clamp(26px,3vw,34px);
  }
  .mm-page .cards {
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
  }
  .mm-page .confess-grid {
    grid-template-columns: 1fr 340px;
    gap: 48px;
  }
  .mm-page .confess p {
    margin-top: 22px;
  }
  .mm-page .type {
    grid-template-columns: 120px 1fr;
    gap: 26px;
    padding: 34px 6px;
  }
  .mm-page .type .no .jp {
    display: block;
    font-size: 22px;
    margin: 6px 0 0;
  }
  .mm-page .legal {
    grid-template-columns: auto 1fr;
    gap: 26px;
    padding: 34px 32px;
    margin-top: 40px;
  }
  .mm-page .legal .hanko {
    width: 74px;
    height: 74px;
    font-size: 38px;
    flex: none;
  }
  .mm-page .menu {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .mm-page .menu-item {
    padding: 24px 26px;
  }
  .mm-page .price-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
  }
  .mm-page .plan {
    padding: 34px 28px 30px;
  }
  .mm-page .fit {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .mm-page .fit-box {
    padding: 32px 30px;
  }
  .mm-page .step {
    padding: 0 0 36px 34px;
  }
  .mm-page .step p {
    max-width: 640px;
  }
  .mm-page .cluster .inner {
    grid-template-columns: 1fr auto;
    gap: 28px;
    padding-top: 34px;
  }
}

/* ==========================================================
   ② 768px～1280px：タブレット用
   ========================================================== */

@media (min-width:768px) and (max-width:1280px) {
  .mm-page .page-nav {
    padding: 12px 24px;
  }
  .mm-page .page-nav-lead {
    margin-bottom: 8px;
    font-size: 0.82rem;
  }
  .mm-page .page-nav-list {
    gap: 4px 20px;
  }
  .mm-page .hero {
    padding: 72px 0 58px;
  }
  .mm-page .hero .sec-h {
    font-size: clamp(30px,4.4vw,40px);
  }
  .mm-page .hero-body {
    grid-template-columns: 1fr auto;
    gap: 32px;
  }
  .mm-page .hero .lede {
    max-width: 560px;
  }
  .mm-page .hero-hanko {
    width: 96px;
    height: 96px;
    font-size: 50px;
  }
  .mm-page .btn-row {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 32px;
  }
  .mm-page section {
    padding: 64px 0;
  }
  .mm-page .sec-h {
    margin-bottom: 40px;
    font-size: clamp(24px,3.2vw,30px);
  }
  /* 3枚組は画面幅に応じて3→2→1列へ自動で折り返し */
  .mm-page .cards {
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    gap: 20px;
  }
  .mm-page .price-grid {
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 20px;
  }
  .mm-page .confess-grid {
    grid-template-columns: 1fr 300px;
    gap: 36px;
  }
  .mm-page .type {
    grid-template-columns: 110px 1fr;
    gap: 22px;
    padding: 30px 6px;
  }
  .mm-page .type .no .jp {
    display: block;
    font-size: 20px;
    margin: 6px 0 0;
  }
  .mm-page .legal {
    grid-template-columns: auto 1fr;
    gap: 22px;
    padding: 30px 28px;
    margin-top: 36px;
  }
  .mm-page .legal .hanko {
    width: 68px;
    height: 68px;
    font-size: 35px;
    flex: none;
  }
  .mm-page .menu {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .mm-page .fit {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .mm-page .fit-box {
    padding: 30px 26px;
  }
  .mm-page .cluster .inner {
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding-top: 32px;
  }
}

/* ==========================================================
   ③ 767px以下：スマホ用
   ========================================================== */

@media (max-width:767px) {
  .mm-page {
    font-size: 15px;
  }
  .mm-page .wrap {
    padding: 0 20px;
  }
  .mm-page .page-nav {
    padding: 10px 16px;
    font-size: 0.92rem;
  }
  .mm-page .page-nav-lead {
    margin-bottom: 10px;
    font-size: 0.8rem;
  }
  .mm-page .page-nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
    justify-content: flex-start;
  }
  .mm-page .page-nav-item {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    flex: none;
  }
  .mm-page .page-nav-link {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--kinari);
    font-size: 0.92rem;
  }
  .mm-page .sec-h {
    padding: 0 20px;
    margin-bottom: 30px;
  }
  .mm-page .sec-sub {
    margin-bottom: 28px;
  }
  .mm-page .hero {
    padding: 46px 0 40px;
  }
  .mm-page .hero .sec-h {
    font-size: clamp(24px,7.2vw,27px);
  }
  .mm-page .hero .lede {
    font-size: 14.5px;
  }
  .mm-page .hero-note {
    margin-top: 22px;
  }
  /* ボタンは横幅いっぱい・タップしやすく */
  .mm-page .btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 14.5px;
  }
  .mm-page .cta .btn {
    display: inline-block;
    width: auto;
    padding: 15px 40px;
  }
  .mm-page section {
    padding: 46px 0;
  }
  .mm-page .card {
    padding: 26px 20px 24px;
  }
  .mm-page .card h3 {
    font-size: 17.5px;
  }
  .mm-page .confess-grid {
    gap: 28px;
  }
  .mm-page .big-loss {
    padding: 26px 20px;
  }
  .mm-page .type {
    padding: 26px 4px;
  }
  .mm-page .type h3 {
    font-size: 16.5px;
  }
  .mm-page .type p {
    font-size: 13.5px;
  }
  .mm-page .legal {
    padding: 24px 20px;
  }
  .mm-page .menu-item {
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px;
  }
  .mm-page .menu-item .mn {
    line-height: 1;
  }
  .mm-page .plan {
    padding: 28px 20px 24px;
  }
  .mm-page .plan .price {
    font-size: 29px;
  }
  .mm-page .fit-box {
    padding: 26px 20px;
  }
  .mm-page summary {
    font-size: 14px;
  }
  .mm-page details .ans {
    font-size: 13px;
  }
  .mm-page .cta p {
    font-size: 13.5px;
  }
  .mm-page .cluster .inner {
    padding-top: 24px;
  }
}

/*
============================================================
 6. ブログ用
 シェアボタン／記事一覧／ページネーション／目次
============================================================
*/

/*----- シェアボタン ----------*/

@media(min-width: 1281px) {
  .share {
    position: relative;
    margin: 3em 0 5em 0;
    z-index: 100;
  }
  .share ul {
    position: static;
    bottom: 1em;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .share li {
    margin: 0 3em;
    line-height: 0;
    opacity: 0.7;
  }
  .share a {
    display: block;
    width: 100%;
    text-decoration: none;
  }
  .share a:hover {
    opacity: 0.8;
  }
  .share a img {
    width: 150%;
    height: auto;
  }
  .share .li-b-li a img {
    width: 104%;
    height: auto;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .share {
    position: relative;
    margin: 3em 0 5em 0;
    z-index: 100;
  }
  .share ul {
    position: static;
    bottom: 1em;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .share li {
    margin: 0 2em;
    line-height: 0;
    opacity: 0.7;
  }
  .share a {
    display: block;
    width: 100%;
    text-decoration: none;
  }
  .share a:hover {
    opacity: 0.8;
  }
  .share a img {
    width: 125%;
    height: auto;
  }
  .share .li-b-li a img {
    width: 87%;
    height: auto;
  }
}

@media(max-width: 767px) {
  .share {
    position: relative;
    margin: 3em 0 5em 0;
    z-index: 100;
  }
  .share ul {
    position: static;
    bottom: 1em;
    left: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  .share li {
    margin: 0 0.75em;
    line-height: 0;
    opacity: 0.7;
  }
  .share a {
    display: block;
    width: 100%;
    text-decoration: none;
  }
  .share a:hover {
    opacity: 0.8;
  }
  .share a img {
    width: 100%;
    height: auto;
  }
  .share .li-b-li a img {
    width: 69%;
    height: auto;
  }
}

/*---------- ブログindexページ ---------------*/

@media(min-width: 1281px) {
  .single-box {
    margin-top: 5em;
  }
  .kiji-link {
    display: flex;
    padding: 1em;
    justify-content: space-around;
    margin: 1em auto 3em auto;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .index-left {
    display: block;
    margin: auto;
    width: 34%;
    height: auto;
  }
  .index-left img {
    width: 95%;
    height: auto;
  }
  .index-right {
    display: block;
    margin-top: 3.35em;
    width: 64%;
    height: auto;
  }
  .index-right h2,
  .index-right p {
    margin: 0 0 1em 1em;
    padding: 0.5em 0;
  }
  .index-right h2 {
    font-size: 1.5em;
  }
  .index-right p {
    font-size: 1em;
  }
  .index-right .kiji-ymd {
    margin: 0 0 0 1em;
    padding: 0;
  }
  .index-right .blogtop-link {
    display: block;
    text-align: right;
  }
  .index-right .blogtop-link a {
    margin: 0 0 1em 1em;
    padding: 0.5em 1em 0.5em 0;
    font-size: 1.25em;
    color: #06f;
  }
  .index-right .blogtop-link a:hover {
    opacity: 0.8;
    text-decoration: underline;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .single-box {
    margin-top: 5em;
  }
  .kiji-link {
    display: flex;
    padding: 0.5em;
    justify-content: space-around;
    margin: 1em auto 3em auto;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .index-left {
    display: block;
    margin: auto;
    width: 40%;
    height: auto;
  }
  .index-left img {
    width: 100%;
    height: auto;
  }
  .index-right {
    display: block;
    margin-top: 3.35em;
    width: 60%;
    height: auto;
  }
  .index-right h2,
  .index-right p {
    margin: 0 0 1em 1em;
    padding: 0.5em 0;
  }
  .index-right h2 {
    font-size: 1.5em;
  }
  .index-right p {
    font-size: 1em;
  }
  .index-right .kiji-ymd {
    margin: 0 0 0 1em;
    padding: 0;
  }
  .index-right .blogtop-link {
    display: block;
    text-align: right;
  }
  .index-right .blogtop-link a {
    margin: 0 0 1em 1em;
    padding: 0.5em 1em 0.5em 0;
    font-size: 1.25em;
    color: #06f;
  }
  .index-right .blogtop-link a:hover {
    opacity: 0.8;
    text-decoration: underline;
  }
}

@media(max-width: 767px) {
  .single-box {
    margin-top: 3em;
  }
  .kiji-link {
    display: block;
    padding: 0.15em;
    justify-content: flex-start;
    margin: 3em auto;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.75em #ccc;
  }
  .index-left {
    display: block;
    margin: auto;
    width: 95%;
    height: auto;
  }
  .index-left img {
    width: 100%;
    height: auto;
  }
  .index-right {
    display: block;
    margin-top: 0.5em;
    width: 95%;
    height: auto;
  }
  .index-right h2 {
    margin: 0.5em auto;
    padding: 0.5em 0;
    font-size: 1.5em;
  }
  .index-right p {
    margin: 0 0 0.5em 1em;
    padding: 0;
    font-size: 1em;
  }
  .index-right .kiji-ymd {
    margin: 0 0 0 1em;
    padding: 0;
  }
  .index-right .blogtop-link {
    display: block;
    text-align: right;
  }
  .index-right .blogtop-link a {
    margin: 0;
    padding: 0.5em 0.25em 0.5em 0;
    font-size: 1.25em;
    color: #06f;
  }
  .index-right .blogtop-link a:hover {
    opacity: 0.8;
    text-decoration: underline;
  }
}

/* ページネーション */

.page-numbers {
  display: flex;
  justify-content: center;
}

.page-numbers li {
  margin: 0 0.5em;
  font-size: 1em;
}

.page-numbers li a {
  width: 3.5em;
  background-color: #eee;
}

/*---------- 基本共通事項-投稿ページ　---------------*/

/*----- リストスタイルボックス-ブログ用目次 ----------*/

@media(min-width: 1281px) {
  .mokuji {
    width: 60%;
    font-size: 1em;
    margin: 1em auto;
    padding: 0.75em 0 0.75em 1em;
    border: dotted 1px #222;
    border-radius: 10px;
    background-color: #eeeeee;
    box-sizing: border-box;
  }
  .mokuji li {
    list-style-type: decimal;
    margin-left: 2em;
  }
  .mokuji ul li {
    list-style-type: disc;
    margin: 0 0 0 1.25em;
  }
  .mokuji ol li {
    list-style-type: decimal;
    margin: 0 0 0 1.25em;
  }
  .mokuji a {
    font-size: 1em;
    color: #0000ff;
    text-decoration: underline;
  }
  .mokuji a:hover {
    color: #0066ff;
    text-decoration: underline;
  }
  .mokuji:before {
    padding-left: 3.5em;
    content: "--- 目次 ---";
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .mokuji {
    width: 80%;
    font-size: 1em;
    margin: 1em auto;
    padding: 0.75em 0 0.75em 2em;
    border: dotted 1px #222;
    border-radius: 10px;
    background-color: #eeeeee;
    box-sizing: border-box;
  }
  .mokuji li {
    list-style-type: decimal;
  }
  .mokuji ul li {
    list-style-type: disc;
    margin: 0 0 0 1.25em;
  }
  .mokuji ol li {
    list-style-type: decimal;
    margin: 0 0 0 1.25em;
  }
  .mokuji a {
    font-size: 1em;
    color: #0000ff;
    text-decoration: underline;
  }
  .mokuji a:hover {
    color: #0066ff;
    text-decoration: underline;
  }
  .mokuji:before {
    padding-left: 3.5em;
    content: "--- 目次 ---";
  }
}

@media(max-width: 767px) {
  .mokuji {
    width: 100%;
    font-size: 0.92rem;
    margin: 1em auto;
    padding: 0.75em 0 0.75em 0;
    border: dotted 1px #222;
    border-radius: 10px;
    background-color: #eeeeee;
    box-sizing: border-box;
  }
  .mokuji li {
    list-style-type: decimal;
    margin-left: 2em;
  }
  .mokuji ol li {
    list-style-type: decimal;
    margin: 0 0 0 1.15em;
    font-size: 1em;
  }
  .mokuji ul li {
    list-style-type: disc;
    margin: 0 0 0 1.15em;
    font-size: 0.875em;
  }
  .mokuji a {
    font-size: 1em;
    color: #0000ff;
    text-decoration: underline;
  }
  .mokuji a:hover {
    color: #0066ff;
    text-decoration: underline;
  }
  .mokuji:before {
    padding-left: 0.7em;
    content: "--- 目次 ---";
  }
}

/* リストスタイルボックス-ドロップシャドウ */

@media(min-width: 1281px) {
  .list-box-shadow {
    display: block;
    margin: 2em auto;
    padding: 1em 1em 1em 0;
    width: 60%;
    height: auto;
    box-shadow: 0 0 0.5em -0.15em #bdb;
  }
}

@media screen and (min-width:768px) and (max-width:1280px) {
  .list-box-shadow {
    display: block;
    margin: 2em auto;
    padding: 1em 1em 1em 0;
    width: 80%;
    height: auto;
    box-shadow: 0 0 0.5em -0.15em #bdb;
  }
}

@media(max-width: 767px) {
  .list-box-shadow {
    display: block;
    margin: 2em auto;
    padding: 1em 1em 1em 0;
    width: 95%;
    height: auto;
    box-shadow: 0 0 0.5em -0.15em #bdb;
  }
}


/* =============================== 追加CSS ============================== */

/* ============================================================
   見出し・ボタン・背景色・表・エリア・ラストCTA（行政書士サイト用）v9：深緑（確定版）
   ※元テーマの --elp-navy は変更しない
   ※緑背景のブロック一覧（このファイル内で共通）：
     .lg-green / .elp-hero / .elp-section--dark / .elp-section--navy
     .elp-intro / .elp-closing / .point-box-navy / .elp-card--dark
     → 一覧にないブロックを緑背景にしたいときは、外側のタグに
       class="lg-green" を足して、style の背景色・文字色を消す
   ============================================================ */
:root {
  --lg-main:   #2C3830;  /* 主色：ボタン・〇・アクセント */
  --lg-bg1:    #2C3830;  /* 背景グラデーション：始まり／表の見出し */
  --lg-bg2:    #1E333D;  /* 背景グラデーション：終わり（緑寄りにするなら #1F2A25） */
  --lg-bg:     linear-gradient(135deg, var(--lg-bg1) 0%, var(--lg-bg2) 100%);
  --lg-pale:   #EDF1EF;  /* 薄緑：表の左列の見出し */
  --lg-pale2:  #F2F5F3;  /* ごく薄い緑：表の縞模様・FAQのA */
  --lg-line:   #C9D3CD;  /* 薄い緑グレーの線：STEPの区切り・副ボタンの枠 */
  --lg-text:   #1E1E1E;  /* 見出しの文字（黒） */
  --lg-gray:   #B5C1BA;  /* h2の縦線・英語（緑グレー） */
}


/* ============================================================
   1. 背景
   ============================================================ */

/* 緑背景のブロック（旧ネイビー部分はすべてここ） */
.lg-green,
.elp-hero,
.elp-section--dark,
.elp-section--navy,
.elp-intro,
.elp-closing,
.point-box-navy,
.elp-card--dark {
  background: var(--lg-bg) !important;
  color: #fff !important;
}
/* 緑背景の中のポイントボックス：影を消して細い白枠 */
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing) .point-box-navy {
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .25);
}
/* 開閉式FAQ */
.elp-acc__head,
.elp-acc__block {
  background: var(--lg-bg1);
}

/* ---- 対応エリア：TOPの神奈川カード（.elp-area-card） ----
   白いカード＋黒文字、カードの間に薄い緑グレーの線、ホバーの変化なし */
.elp-area-card,
.elp-area-card:hover {
  background: #fff !important;
  color: var(--lg-text) !important;
  transform: none !important;
  box-shadow: none !important;
}
.elp-area-card :is(h3, h4, p, span, strong, a, li) {
  color: var(--lg-text) !important;
}
/* 区切り線：パソコン（3列）は左の線、ホバーしても太さ・色は変えない */
.elp-area-card,
.elp-area-card:hover {
  border: none !important;
  outline: none !important;
}
.elp-area-card + .elp-area-card,
.elp-area-card + .elp-area-card:hover {
  border-left: 1px solid var(--lg-line) !important;
}
/* タブレット（2列）：テーマと同じく、奇数の右と1・2枚目の下に線 */
@media (min-width: 768px) and (max-width: 1280px) {
  .elp-area-card + .elp-area-card,
  .elp-area-card + .elp-area-card:hover {
    border-left: none !important;
  }
  .elp-area-card:nth-child(odd),
  .elp-area-card:nth-child(odd):hover {
    border-right: 1px solid var(--lg-line) !important;
  }
  .elp-area-card:nth-child(1),
  .elp-area-card:nth-child(2),
  .elp-area-card:nth-child(1):hover,
  .elp-area-card:nth-child(2):hover {
    border-bottom: 1px solid var(--lg-line) !important;
  }
}
/* スマホ（1列）：上に線 */
@media (max-width: 767px) {
  .elp-area-card + .elp-area-card,
  .elp-area-card + .elp-area-card:hover {
    border-left: none !important;
    border-top: 1px solid var(--lg-line) !important;
  }
}
/* カード上の短い線：深緑 */
.elp-area-card::before {
  background: var(--lg-main) !important;
}
/* カード内の見出しは〇なし（短い線があるので） */
.elp-area-card :is(h3, h4)::before {
  content: none !important;
  display: none !important;
}

/* ---- 対応エリア：車ページの神奈川・関東カード（.elp-city-card ほか） ----
   関東の箱はごく薄い緑、カードは白＋左に深緑の線、ホバーの変化なし */
.elp-kanto-box {
  background: var(--lg-pale2);
}
.elp-city-card,
.elp-city-card:hover,
.elp-kanto-box > div > div:not(.elp-area-card),
.elp-kanto-box > div > div:not(.elp-area-card):hover {
  background: #fff !important;
  border-left-color: var(--lg-main) !important;
  transform: none !important;
  box-shadow: none !important;
}
.elp-city-card > *:first-child,
.elp-kanto-box > div > div:not(.elp-area-card) > *:first-child {
  color: var(--lg-main) !important;
}
.elp-city-card p {
  font-size: 0.875em;
}

/* ============================================================
   2. 緑背景の中の文字：すべて白
   ============================================================ */

/* 本文・見出し・強調など */
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  :is(h1, h2, h3, h4, p, li, span, strong, b, em, small, dt, dd, th, td, label) {
  color: #fff !important;
}
/* 文字リンク（ボタンは除く）：白＋下線 */
.link-light,
.link-bright,
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  a:not([class*="btn"]):not(.in-link):not(.cta-button) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.d-text-link:hover {
  opacity: .8;
}
/* リスト内のリンク（目次など）：ふだんは下線なし、ホバーで下線が左→右に伸びる */
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  li > a:not([class*="btn"]):not(.in-link):not(.cta-button) {
  text-decoration: none !important;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 1px;
  padding-bottom: 2px;
  transition: background-size .35s ease;
}
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  li > a:not([class*="btn"]):not(.in-link):not(.cta-button):hover {
  background-size: 100% 1px;
}
.elp-btn-note {
  color: rgba(255, 255, 255, .8) !important;
}


/* ============================================================
   3. 文字リンク（白背景の上）：青のまま落ち着いたトーン
   ============================================================ */
.text-link {
  color: #1F5FA8;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.text-link:hover {
  color: #174A85;
  text-decoration-thickness: 2px;
}


/* ============================================================
   4. 見出し
   ============================================================ */

/* ---- h1：黒文字・左寄せ・左端に短い黒の下線のみ ---- */
h1, #home h1, .page-main h1 {
  color: var(--lg-text);
  text-align: center;
  padding: 0 0 0.5em;
  /* 下線はいったん削除：background: linear-gradient(var(--lg-text), var(--lg-text)) left bottom / 64px 3px no-repeat; */
}
h1::before, h1::after,
#home h1::before, #home h1::after {
  content: none;
  display: none;
}

/* ---- h2：全ページで統一（左に緑グレーの縦線＋英語の小見出し） ---- */
h2,
.elp-hero h2,
.elp-closing h2,
.elp-section-title {
  color: var(--lg-text) !important;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 0 18px;
  border-left: 5px solid var(--lg-gray) !important;
  line-height: 1.5;
}
h2::before, h2::after,
.elp-hero h2::before, .elp-hero h2::after,
.elp-closing h2::before, .elp-closing h2::after {
  content: none !important;
  display: none !important;
}
/* 見出し上の英語（<small>） */
h2 > small,
.elp-section-title small {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--lg-gray) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  line-height: 1.4;
}
h2 > small + br {
  display: none;
}
/* 固定のお問い合わせボックスの見出しは対象外 */
.contact-fixed h2 {
  border-left: none !important;
  padding: 0;
}

/* ---- h3：全ページで左に〇（下線は消す） ---- */
h3,
.page-main h3 {
  margin-left: 0;
  padding: 0;
  border: none;
  line-height: 1.5;
}
:is(h3, .page-main h3)::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.5em;
  vertical-align: 0.05em;
  border: 3px solid var(--lg-main);
  border-radius: 50%;
  box-sizing: border-box;
}
:is(h3, .page-main h3)::after {
  content: none !important;
  display: none !important;
}
/* ポイント見出しの h3：少し大きく、左に余白 */
.point-midashi h3 {
  font-size: 1.25em;
  padding-left: 1.25em;
}
/* ---- h4（本文内）：装飾なし、太字と大きさのみ ---- */
.page-main h4 {
  overflow: visible;
  margin: 1.5em 0 0.75em;
}
.page-main h4::before {
  content: none;
  display: none;
}

/* ---- 緑背景の中の見出し：白に ---- */
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark) h1 {
  background-image: linear-gradient(#fff, #fff);
}
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark) :is(h2, .elp-section-title) {
  color: #fff !important;
  border-left-color: rgba(255, 255, 255, .45) !important;
}
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark) :is(h2, .elp-section-title) small {
  color: rgba(255, 255, 255, .65) !important;
}
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark) h3::before {
  border-color: #fff;
}

/* ---- フッター・固定のお問い合わせボックスの h3 は〇なし ---- */
:is(footer, .contact-fixed) h3::before {
  content: none;
  display: none;
}


/* ============================================================
   5. 表
   ============================================================ */

/* ---- 見出し行：深緑＋白文字 ---- */
.elp-table thead th,
.simple-table thead th,
.table-head-navy thead th,
.table-head-navy tbody:first-child tr:first-child th {
  background: var(--lg-bg1);
}
/* basic-table（横型）：1行目を見出し行に（th も td も）
   縦型（左列が見出し）の表は class="basic-table basic-table--side" */
.basic-table:not(.basic-table--side):not(.office-table) thead :is(th, td),
.basic-table:not(.basic-table--side):not(.office-table) tbody:first-child tr:first-child > :is(th, td) {
  background: var(--lg-bg1) !important;
  color: #fff !important;
}
/* 本文に紺色が直接書かれている見出し */
th[style*="0d1f3c"],
td[style*="0d1f3c"] {
  background-color: var(--lg-bg1) !important;
}

/* ---- 行の見出し（左列の th）：薄緑 ---- */
:is(.basic-table, .office-table) tbody th {
  background: var(--lg-pale);
  color: var(--lg-text);
}

/* ---- 本文の行：白とごく薄い緑の交互、区切り線も薄緑 ---- */
:is(.elp-table, .simple-table, .table-head-navy) tbody tr:nth-child(odd) td {
  background: #fff;
}
:is(.elp-table, .simple-table, .table-head-navy) tbody tr:nth-child(even) td {
  background: var(--lg-pale2);
}
:is(.elp-table, .simple-table, .basic-table, .table-head-navy) tbody td {
  border-bottom-color: #DCE3DF;
}

/* ---- 料金表の強調：黒 ---- */
.elp-table--fee tbody tr td:nth-child(2) {
  color: #222;
}


/* ============================================================
   6. FAQ：Qを少し濃い緑グレー、Aをごく薄い緑
   ※元の指定が ID 付きなので、こちらも ID 付きで上書き
   ============================================================ */
#elp-lp-faq .qa_list dt,
.qa_list dt {
  background-color: #DDE5E0;
  color: var(--lg-main) !important;
}
#elp-lp-faq .qa_list dd,
.qa_list dd {
  background-color: var(--lg-pale2);
}


/* ============================================================
   7. 流れ（STEP）
   ============================================================ */
/* 区切り線と三角：薄い緑グレー（内側の白い三角 ::after はそのまま） */
.flow-list > li:not(:last-child) {
  border-bottom-color: var(--lg-line) !important;
}
.flow-list > li:not(:last-child)::before {
  border-top-color: var(--lg-line);
}
/* STEP の四角：深緑＋白文字（flow-list 版・LP版の両方） */
.flow-list > li dl dt .chohokei,
.elp-step-badge {
  background: var(--lg-main) !important;
  color: #fff !important;
}


/* ============================================================
   8. ボタン（白背景の上）
   ============================================================ */

/* ---- 主ボタン：深緑のグラデーション＋厚み、ホバーで浮く ---- */
.elp-btn--primary,
a.cta-button,
.cta-box .cta-button {
  background: linear-gradient(180deg, #3A4A40 0%, #2C3830 100%);
  color: #fff !important;
  border: none;
  border-bottom: 4px solid #1A231E;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
  transition: transform .15s, box-shadow .15s;
}
.elp-btn--primary:hover,
a.cta-button:hover,
.cta-box .cta-button:hover {
  background: linear-gradient(180deg, #3A4A40 0%, #2C3830 100%);
  color: #fff !important;
  border-bottom-color: #1A231E !important;  /* 元テーマのホバー時の白い枠を打ち消す */
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
}
.elp-btn--primary:active,
a.cta-button:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

/* ---- 副ボタン：白→薄い緑グレー＋厚み、色は反転させず浮くだけ ---- */
.in-link,
.elp-btn--secondary {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6ECE8 100%) !important;
  color: var(--lg-main) !important;
  border: 1px solid var(--lg-line) !important;
  border-bottom: 4px solid #A9B8B0 !important;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  transition: transform .2s, box-shadow .2s;
}
.in-link:hover,
.elp-btn--secondary:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.in-link:active,
.elp-btn--secondary:active {
  transform: translateY(2px);
  border-bottom-width: 2px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
/* 矢印：常に深緑 */
.in-link:before,
.in-link:hover:before { background: var(--lg-main); }
.in-link:after,
.in-link:hover:after {
  border-color: var(--lg-main);
  opacity: 1;
  width: 8px;
  height: 8px;
}
@media (max-width: 767px) {
  .in-link,
  .elp-btn--secondary {
    max-width: 90%;
  }
}


/* ============================================================
   9. ボタン（緑背景の上）
   ============================================================ */

/* ---- 主ボタン：白→薄い緑グレー＋厚み＋影（hero・ラストCTA共通） ---- */
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  :is(.elp-btn--primary, a.cta-button),
a.lg-btn {
  display: inline-block;
  max-width: 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, #DDE6E1 100%) !important;
  border: none !important;
  border-bottom: 4px solid #A9B8B0 !important;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35) !important;
  transition: transform .2s, box-shadow .2s;
}
/* 文字は中の span なども含めて深緑で固定 */
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  :is(.elp-btn--primary, a.cta-button),
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  :is(.elp-btn--primary, a.cta-button) *,
a.lg-btn,
a.lg-btn * {
  color: var(--lg-main) !important;
}
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  :is(.elp-btn--primary, a.cta-button):hover,
a.lg-btn:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #DDE6E1 100%) !important;
  border-bottom-color: #A9B8B0 !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45) !important;
}
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  :is(.elp-btn--primary, a.cta-button):active,
a.lg-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35) !important;
}
/* lg-btn を単独で使うときのサイズ */
a.lg-btn {
  min-width: 320px;
  padding: 22px 48px;
  text-align: center;
}
@media (max-width: 767px) {
  a.lg-btn { min-width: 0; width: 80%; padding: 10px 8px; }
}

/* ---- 副ボタン：白い枠線（ホバーで少し明るく浮くだけ） ---- */
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  :is(.in-link, .elp-btn--secondary) {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  box-shadow: none;
}
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark)
  :is(.in-link, .elp-btn--secondary):hover {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .30);
}
/* 矢印：常に白 */
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark) .in-link:before,
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark) .in-link:hover:before { background: #fff; }
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark) .in-link:after,
:is(.lg-green, .elp-hero, .elp-section--dark, .elp-section--navy, .elp-intro, .elp-closing, .point-box-navy, .elp-card--dark) .in-link:hover:after  { border-color: #fff; }


/* ============================================================
   10. ラストCTA（LP以外のページ）：点線の囲み＋角の飾り
   ※共通パーツ（id が「-common-cta-last」で終わる section）に自動で適用
   ※それ以外の場所で使うときは class="lg-cta"
   ============================================================ */
:is(.lg-cta, section[id$="-common-cta-last"]) {
  position: relative;
  margin: 3em 0;
  padding: 56px 40px;
  background: #fff;
  border: 2px dotted var(--lg-gray);
  border-radius: 4px;
  text-align: center;
}
/* 左上・右下のL字の角飾り */
:is(.lg-cta, section[id$="-common-cta-last"])::before,
:is(.lg-cta, section[id$="-common-cta-last"])::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: solid var(--lg-main);
}
:is(.lg-cta, section[id$="-common-cta-last"])::before {
  top: -2px;
  left: -2px;
  border-width: 3px 0 0 3px;
}
:is(.lg-cta, section[id$="-common-cta-last"])::after {
  right: -2px;
  bottom: -2px;
  border-width: 0 3px 3px 0;
}
:is(.lg-cta, section[id$="-common-cta-last"]) h2 {
  display: inline-block;
  text-align: left;
}
:is(.lg-cta, section[id$="-common-cta-last"]) p {
  text-align: left;
}
@media (max-width: 767px) {
  :is(.lg-cta, section[id$="-common-cta-last"]) { padding: 40px 20px; }
}
/* 中の文字：元テーマの水色・白 → 黒（白い枠の中で読めるように）
   ※LPの元ラストCTAは、パーツごとに elp-closing__○○ という名前で色が付いているので、まとめて上書き */
.lg-cta :is([class^="elp-closing__"], [class*=" elp-closing__"]),
.lg-cta :is([class^="elp-closing__"], [class*=" elp-closing__"]) :is(span, strong, a:not([class*="btn"])) {
  color: var(--lg-text) !important;
}
/* 見出し上の「CONTACT」：緑グレー */
.lg-cta .elp-closing__eyebrow {
  color: var(--lg-gray) !important;
}


/* ============================================================
   11. TOPのサービスカード（会社設立・許認可・民事法務）
   ============================================================ */
/* カードの高さをそろえて、矢印を常にカードの一番下に置く
   （文章の長さに関係なく、3枚とも同じ高さに矢印が並ぶ） */
@media (min-width: 768px) {
  .top-service-flex {
    align-items: stretch;
  }
  .top-service-li {
    display: flex;
    flex-direction: column;
  }
  .top-service-link {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .top-service-text-frame {
    flex: 1;
  }
}
/* 矢印の位置：カードの右下（全画面幅共通） */
.top-service-text-frame .arrow {
  left: auto;
  right: 1.5em;
  bottom: 0.875em;
}

/* LPのhero（一番上の大見出し）は対象外：縦線・余白の装飾なし */
/* LPのhero（一番上の大見出し）は対象外：縦線・余白の装飾なし、中央寄せ */
.elp-hero :is(h1, h2, .elp-section-title) {
  border-left: none !important;
  padding-left: 0 !important;
  background-image: none !important;
  text-align: center !important;
}
/* 記事の投稿日・更新日（h1の下） */
.post-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.5em;
  margin: 0.5em 0 1.5em;
  font-size: 0.875em;
  color: #666;
}