:root{--accent:#f15a24;--text:#222;--bg:#fff;--muted:#666;--max:1120px;font-size:16px;scroll-behavior:smooth; /* 共通間隔 */
 /* 余白を少し大きく */
  --gap: 32px;             /* 以前の24px→32pxに拡大 */
  --gap-lg: 32px;
  --gap-md: 24px;
  --gap-sm: 16px;
  --brand-orange: #F15A24;
  --gray-border: #CCCCCC;
  --bg-light: #FFF6E6;       /* 薄い黄背景 */
  --bg-option: #FFFFFF;      /* オプション枠白背景 */
/* 角丸 */
  --radius: 16px;
  /* Problems 背景・枠線はそのまま */
  --bg-prob: #FFF5E6;      /* パンフ背景色 */
  --border-prob: #F7C298;  /* パンフ枠色 */
 /* Problems セクションの間隔を縦横で分けて定義 */
  --problem-gap-vertical: 40px;   /* 縦方向の隙間：40px */
  --problem-gap-horizontal: 32px; /* 横方向の隙間：32px */
  /* Reasons セクション */
  --bg-reason: #FFF6E6;
  --border-reason: #F7C298;
 /* 色・間隔を変数化 */
  --reason-number-size: 64px;           /* 番号ブロックの正方形サイズ */
  --reason-bg-number: #FFF6E6;          /* 背景色（薄い黄） */
  --reason-color-number: #F15A24;       /* 文字色（オレンジ） */
  --reason-separator: #E0E0E0;          /* 区切り線色（薄いグレー） */
  --reason-gap-v: 24px;                 /* 項目間の縦ギャップ */
  --reason-gap-h: 24px;                 /* 番号⇔アイコン⇔テキストの横ギャップ */
/* Benefits (=緑背景) */
   /* ベネフィット用カラー・間隔 */
  --benefit-bg: #CDEDDA;        /* パンフ緑背景 */
  --benefit-gap: 24px;          /* ボックス間のギャップ */
  --benefit-padding: 24px;      /* 各ボックス内パディング */
  --benefit-radius: 16px;       /* 角丸 */}
    *,*::before,*::after{box-sizing:border-box;}html { font-size: 18px !important; }
.grecaptcha-badge,.g-recaptcha{display:none;}    body{margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.75;line-height: 1.6}html, body {
  overflow-x: hidden !important;
}
    img{max-width:100%;height:auto;}
    a{color:var(--accent);text-decoration:none;}
    h1,h2,h3,h4{margin:0 0 .6em;font-weight:700;color:#111;}
    h1{font-size:clamp(2.5rem,4vw,2.6rem);}h2{font-size:clamp(1.6rem,3.2vw,2.1rem);}h3{font-size:clamp(1.2rem,2.2vw,1.5rem);}
    p{margin:.6em 0;}
    .l-container{max-width:var(--max);margin:0 auto;padding:0 1.2rem;}
    .u-center{text-align:center;}.u-mt2{margin-top:2rem;}.u-mb0{margin-bottom:0;}
    .c-btn{display:inline-block;padding:.85rem 1.6rem;border-radius:9999px;background:var(--accent);color:#fff;font-weight:600;transition:.2s;}
    .c-btn:hover{opacity:.9;}
    .l-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee;}
    .l-header__inner{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;}
    .c-logo{font-weight:700;font-size:1.1rem;color:var(--accent);}
    .l-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;}
    .l-nav a{font-size:.9rem;color:#333;font-weight:500;}.l-nav a:hover{color:#000;}
    /* Hamburger menu */
    .c-hamburger{display:none;} .c-hamburger span{display:block;width:22px;height:3px;background:#333;margin:4px 0;border-radius:2px;}
.pc_on{display: inline-block;}
.sp_on{display: none;}
@media(max-width:431px){.pc_on{display:none;}.sp_on{display: inline-block;}}
    @media (max-width:768px) {
      .l-header__inner{position:relative;}.c-hamburger{display:block;cursor:pointer;background:transparent;border:none;padding:.6rem;}
      #nav-list ul{display:none;flex-direction:column;background:#fff;position:absolute;top:100%;right:1rem;width:200px;box-shadow:0 2px 6px rgba(0,0,0,.2);}
      #nav-list ul.open{display:flex;}
    }
    .p-hero{position:relative;min-height:65vh;display:flex;align-items:center;background:url("images/top-bg.webp") center/cover no-repeat;}
    .p-hero__content{position:relative;z-index:2;padding:3rem 0;color: #fff}
	.p-hero__content h1{text-shadow:0 2px 4px rgba(0,0,0,0.6);color:#fff}
    .p-hero__tagline{font-size:1.1rem;margin-bottom:1.5rem;text-shadow:0 2px 4px rgba(0,0,0,0.6)}
    .c-section{padding:4rem 0;}
    .c-section--alt{background:#f7f7f7;}
    .c-grid{display:grid;gap:1.6rem;}
    .c-grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
    .c-grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
    .c-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:1.6rem;box-shadow:0 2px 6px rgba(0,0,0,.04);}
    .c-card--plan{border:2px solid var(--accent);}
    .c-num{font-size:2rem;font-weight:700;color:var(--accent);display:block;margin-bottom:.4rem;}
    .p-reasonList{counter-reset:reason;}
    .p-reason{position:relative;padding-left:3.6rem;margin-bottom:2rem;}
    .p-reason::before{counter-increment:reason;content:counter(reason, decimal-leading-zero);position:absolute;left:0;top:0;font-size:2.4rem;color:var(--accent);font-weight:700;}
    .p-benefits{display:flex;flex-wrap:wrap;gap:.6rem .8rem;}
    .p-benefit{background:var(--accent);color:#fff;padding:.35rem .8rem;border-radius:999px;font-size:.85rem;}
    .p-price{font-size:1.8rem;font-weight:700;color:var(--accent);} .p-eq{font-size:.85rem;color:var(--muted);}
    .p-flow{counter-reset:step;} .p-flowItem{position:relative;padding-left:3.4rem;margin-bottom:1.4rem;}
    .p-flowItem::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
    details{border:1px solid #ddd;border-radius:8px;padding:1rem;background:#fff;margin-bottom:.8rem;} summary{cursor:pointer;font-weight:600;}
    table{width:100%;border-collapse:collapse;font-size:.92rem;} th,td{border:1px solid #ddd;padding:.6rem .8rem;text-align:left;} th{background:#f8f8f8;width:26%;}
    .l-footer{background:#111;color:#ccc;padding:2.8rem 0;font-size:.85rem;} .l-footer a{color:#fff;text-decoration:underline;}
    .p-cta{background:var(--accent);color:#fff;padding:2.2rem 1rem;border-radius:16px;text-align:center;margin-top:3rem;} .p-cta h2{margin-bottom:1rem;}
    .c-form input,.c-form textarea{width:100%;padding:.6rem;margin:.4rem 0;border:1px solid #ccc;border-radius:6px;font-size:1rem;}
    .c-form__error{color:#d00;font-size:.85rem;margin-top:.4rem;}
	  @media (max-width:768px) {
      .l-header__inner { position: relative; }
      .c-hamburger { display: block; cursor: pointer; background: transparent; border: none; padding: .6rem; }
      #nav-list ul {
        display: none;
        flex-direction: column;
        background: #fff;
        position: absolute;
        top: 100%;
        right: 1rem;
        width: 200px;
        box-shadow: 0 2px 6px rgba(0,0,0,.2);
        text-align: center; /* 追加: 中央揃え */
      }
      #nav-list ul.open { display: flex; }
      #nav-list ul.open li a {
        display: block;
        text-align: center;
        width: 100%;
      }
    }
	/* bg-white に白背景 */
.bg-white {
  background-color: #fff;
}

/* block 内の画像を中央揃え */
.block img {
  display: block;
  margin: 0 auto;
}
	/* 各ブロック（.block）の間隔を広げる */
	.block {
  margin-bottom: 2.5rem;   /* 下方向の余白を広げ */
  padding: 1.5rem 1rem;    /* 上下左右に余白を追加 */
}

/* .block 内の段落テキストと枠（ボックス）の間隔を調整 */
.block p {
  margin-bottom: 1rem;     /* 段落の下に余白を追加 */
}

/* セクション左右の余白も少し広げたい場合 */
.l-container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
	/* ① ラッパーコンテナ */

.wrap {
  width: 100%;
  padding-left: 2.67vw;
  padding-right: 2.67vw;
  position: relative;
}
@media (min-width: 640px) {
  .wrap {
    padding-left: 1.95vw;
    padding-right: 1.95vw;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) {

  .wrap {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1040px;
  }
}

/* ② ブロック01 の見出し＋配置 */
.block01 {
  margin-bottom: 2rem;
  text-align: center;
}
.block01 h3 {
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

/* ③ inner の画像＋キャプション揃え */
  /* inner を相対位置づけ */
  .block01 .inner {
    position: relative;
    display: block; /* flex は解除 */
  }

  /* PC用画像を幅 660px */
  .block01 .inner img.hidden.sm\:block {
    width: 660px;
    height: auto;
  }

  /* 見出し h4 を絶対配置で重ね、右側に幅 26.9375rem を確保 */
  .block01 .inner h4 {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 26.9375rem; /* 431px */
    margin: 0;
    text-align: left;
  }
/* ④ SP/PC 切り替え用ユーティリティ */
/* デフォルト（モバイル）では .sm:hidden は表示、
   .hidden / .sm:block は非表示 */
.sm\:hidden { display: block !important; }
.hidden     { display: none  !important; }
.sm\:block  { display: none  !important; }

/* 640px以上（PC）になったら */
@media (min-width: 640px) {
  .sm\:hidden { display: none  !important; }
  .hidden     { display: none  !important; }
  .sm\:block  { display: block !important; }
}
	/* block01 見出し */
.block01 h3 {
  font-size: 1.6rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  text-align: center;
}

/* inner のデフォルト（モバイル）: 縦並び中央寄せ */
.block01 .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* PC（1024px以上）で横並びに切り替え */
@media (min-width: 1024px) {
  .block01 .inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
}

/* 画像のサイズ調整 */
.block01 .inner img {
  width: 100%;
}

/* PC時は半分幅 */
@media (min-width: 1024px) {
  .block01 .inner img {
    flex: 0 0 48%;
  }
}

/* キャプション(h4)は残り幅 */
.block01 .inner h4 {
  font-size: 1.25rem;
  line-height: 1.5;
  text-align: center;
}

/* PC時は左寄せ・幅調整 */
@media (min-width: 1024px) {
  .block01 .inner h4 {
    flex: 1;
    text-align: left;
  }
}
@media (max-width:767px) {.block01 .inner h4 {right:-20%;
  }}
	/* 課題訴求ブロックのキャッチコピー内 span 装飾 */
#sctn02 .block01 h4 span {
  display: inline-block;
  font-size: 1.75rem;       /* モデルでは約28px相当 */
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
  padding: 0.5rem 1rem;      /* 上下0.5rem／左右1rem */
  border-radius: 0.4rem;     /* 角丸 */
  margin-bottom: 0.6rem;     /* 上下の間隔 */
  text-align: center;
}

/* 2行目の span は少しマージンを詰める */
#sctn02 .block01 h4 span + span {
  margin-top: -0.3rem;       /* 重ね気味に */
}

/* PC表示（1024px以上）では文字を少し大きく */
@media (min-width: 1024px) {
  #sctn02 .block01 h4 span {
    font-size: 2rem;         /* 約32px相当 */
    padding: 0.75rem 1.25rem;
  }
}
@media (min-width: 1024px) {
  #sctn02 .block01 h4 span {
    height: 66px;
    margin: 10px 0;
  }
}
	/* ─── Problems（.mega_policy）レスポンシブ ─── */
.mega_policy {
  background: #f7f7f7;
  padding: 3rem 0;
}

/* ポリシーリストを縦並び → PCで2カラム */
.policy_list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);         /* 32px */
}
@media (min-width: 768px) {
  .policy_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}

/* Problems セクション全体 */
.political.top_political.orange_bg.pad_tb {
  background-color: #f15a24; /* オレンジ背景 */
  color: #fff;
  padding: 4rem 0;
}

/* コンテナ幅 */
.political .l-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---------- Problems ---------- */
/* 親Flex の分割比を指定 */
#problems .problem-body {
  display: flex;
  align-items: center;
  gap: 16px;                      /* テキストと画像間の隙間 */
}

	/* 各アイテムに背景＋枠を再適用＆パディング拡大 */
#problems .problem-item {
  flex: 0 0 calc(50% - var(--gap));
  background: var(--bg-prob);           /* 薄いベージュ */
  border: 2px solid var(--border-prob); /* 枠線を2pxに少し太く */
  border-radius: 16px;                  /* 丸みを16pxに拡大 */
  padding: var(--gap);                  /* 内側32px */
  margin: 50px 30px;
}

/* テキスト領域：全体幅の60% */
#problems .problem-content {
  flex: 0 0 60%;                  /* 960pxコンテナ時→約576px */
}

/* 画像領域：全体幅の40% */
#problems .problem-icon-wrapper {
  flex: 0 0 40%;                  /* 960pxコンテナ時→約384px */
}

/* 画像を横幅いっぱいに広げる */
#problems .problem-icon-wrapper img {
  display: block;
  width: 80%;
  height: auto;
  object-fit: contain;
  padding-left: 40px;
}

/* 見出し部 */
#problems .problem-header {
  display: flex;
  align-items: center;
  gap: 8px;                       /* 番号とタイトル間 */
}

#problems .problem-num {
  width: 38px; height: 38px;      /* 円直径38px */
  font-size: 1.25rem;             /* 約20px */
  background: #F15A24;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#problems .problem-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

/* 本文 */
#problems .problem-desc {
  margin: 8px 0 0;                /* 上8px */
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* スマホ時は縦積みに */
@media (max-width: 767px) {
  #problems .problem-body {
    flex-direction: column;
    align-items: flex-start;
  }
  #problems .problem-content,
  #problems .problem-icon-wrapper {
    flex: 0 0 100%;
  }
  #problems .problem-icon-wrapper {
    margin-top: 16px;
  }
	#problems .problem-icon-wrapper img {padding: 0;}
	#problems .problem-item {margin: 15px 0;}
}
@media (max-width: 600px) {
  /* .problem-icon はアイコンに付いているクラス名に置き換えてください */
  .problem-icon-wrapper img {
    display: block; 
    margin: 0 auto 16px;  /* 上0／左右自動／下16px */
  }
}

/* ---------- Reasons ---------- */
/* ─── 各 Reason Item ─── */
/* ── 通常（PC）時は横並び ── */
.reason-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;                   /* 番号アイコン⇔テキスト間 */
  align-items: center;
  margin-bottom: 32px;
}
.reason-header {
  display: flex;
  align-items: center;
  gap: 8px;                    /* 番号⇔アイコン間 */
}
.reason-number {
  display: inline-block;
  width: 40px; height: 40px;   /* 円形番号 */
  background: #FFE9C2;
  border-radius: 8px;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  font-size: 18px;
}
.reason-icon {
  width: 64px; height: 64px;
}
.reason-body .reason-title {
  font-size: 20px;
  margin: 0 0 8px;
}
.reason-body .reason-desc {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

/* 最後のアイテムだけ下線不要 */
#reasons .reason-item.last {
  border-bottom: none;
}

/* ─── 番号ブロック ─── */
#reasons .reason-number {
  flex: 0 0 var(--reason-number-size);
  width: var(--reason-number-size);
  height: var(--reason-number-size);
  background: var(--reason-bg-number);
  color: var(--reason-color-number);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* ─── コンテンツ（アイコン＋テキスト） ─── */
#reasons .reason-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--reason-gap-h);
}

/* アイコンサイズ */
#reasons .reason-icon {
  flex: 0 0 auto;
  width: 100px;
  height: auto;
}

/* タイトル */
#reasons .reason-text h3 {
  margin: 0;
  font-size: 1.5rem;    /* 約24px */
  line-height: 1.2;
  font-weight: 700;
  color: #222;
}

/* 説明文 */
#reasons .reason-text p {
  margin: 0.5rem 0 0;  /* 上下余白0.5rem */
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

/* ── モバイル時：２ブロックを幅100%で縦並び ── */
@media (max-width: 600px) {
  .reason-item {
    grid-template-columns: 1fr; /* １列 */
  }
  .reason-header,
  .reason-body {
    width: 100%;               /* 幅100% */
    display: block;            /* ブロック化 */
  }
  .reason-header {
    justify-content: flex-start; /* 左寄せ */
    margin-bottom: 16px;         /* 見出し間隔 */
  }
  .reason-body {
    margin-top: 0;               /* 余計な上下マージン解除 */
  }
  #reasons .reason-icon {
	display: block;
  width: 80%;
  height: auto;
  margin: 0 auto; 
}
}

/* ---------- Benefits ---------- */
/* ベネフィット一覧をグリッド状に */
#reasons .benefits-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--benefit-gap);
  margin-top: var(--benefit-gap);
}

/* 各ベネフィットボックス */
#reasons .benefit-item {
  background: var(--benefit-bg);
  border-radius: var(--benefit-radius);
  padding: var(--benefit-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* アイコン */
#reasons .benefit-item img {
  width: 100px;     /* パンフ上ほぼ48px */
  height: auto;
  margin-bottom: 12px;
}

/* テキスト */
#reasons .benefit-item p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #222;
  line-height: 1.4;
}

/* 全体グリッド */
/* --------------------------------------------------
   ◇ plans-list：縦積みに */
.plans-list {
  display: flex;
  flex-direction: column;     /* 縦に並べる */
  gap: 24px;                  /* プラン間の間隔 24px */
  margin-bottom: 24px;
}

/* ① アイコン画像：縦幅 64px 固定、横幅は自動で調整 */
.plan-left img {
  height: 64px;    /* 縦幅を 64px に固定 */
  width: auto;     /* 元画像のアスペクト比を保つ */
  object-fit: contain;
}

/* 1. .plan-item がグリッドアイテムを上下いっぱいに伸ばす */
.plan-item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch;      /* ← 明示的に“伸ばす”指定 */
  border: 1px solid #000;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

/* 2. .plan-left を flex コンテナにして高さ100%＆縦中央揃え */
.plan-left {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* ← 縦中央揃え */
  align-items: center;       /* ← 横中央揃え */
  height: 100%;              /* ← グリッドセルいっぱいに */
  background-color: #FFF5D9;
  padding: 16px;
  gap: 8px;
}
	
/* 見出し */
.plan-item .plan-left h3 {
  font-size: 24px;            /* 24px */
  margin: 0;
  text-align: center;
}

/* 右カラム */
.plan-item .plan-right {
  padding: 16px;              /* 内側余白16px */
  font-size: 16px;            /* 本文16px */
  line-height: 1.5;           /* 行間1.5 */
}

/* 段落間マージン */
.plan-item .plan-right p + p {
  margin-top: 12px;           /* 段落間12px */
}

/* 注釈 */
.plan-item .plan-right .note {
  font-size: 14px;            /* 注釈14px */
  color: #555;
  margin-top: 16px;
  line-height: 1.4;
}

/* --------------------------------------------------
   ◇ モバイル対応（必要なら） */
@media (max-width: 600px) {
  .plan-item {
    grid-template-columns: 1fr;   /* 1カラムに */
  }
  .plan-item .plan-left,
  .plan-item .plan-right {
    padding: 12px;                /* 若干余白を縮小 */
  }
}	
/* ─── オプションメニュー背景を要素幅ぴったりに ─── */
.plan-options-list {
  display: inline-block;       /* ブロック幅を内容幅に */
  background-color: #D4F8E8;   /* パステルグリーン */
  border-radius: 8px;          /* 角丸8px */
  padding: 12px 16px;          /* 上下12px／左右16px */
  margin: 16px auto;           /* 上下16pxの余白＋左右中央寄せ */
  text-align: left;            /* リストは左寄せ */
}

/* 見出しとの隙間を微調整 */
.plan-options-container h4 {
  margin-bottom: 8px;          /* 下マージンを8pxに */
}

/* ─── リストスタイル ─── */
.plan-options {
  list-style: disc inside;       /* ●をリスト内側に */
  margin: 0;                     /* 上下 0 */
  padding-left: 16px;            /* 見出しと同じ左内側余白 16px */
  font-size: 16px;               /* 本文リスト 16px */
  line-height: 1.5;              /* 行間 1.5 */
}

.plan-options li + li {
  margin-top: 8px;               /* リスト項目間の間隔 8px */
}
	
/* ── 親リスト：縦積み／全幅 ── */
.cases-list {
  display: flex;
  flex-direction: column;
  gap: 32px;        /* 事例間スペース 32px */
  width: 100%;      /* 全幅にゆったり広げる */
}

/* ── 各事例アイテム：グリッドで2カラム ── */
.case-item {
  display: grid;
  width: 100%;                            /* 全幅 */
  grid-template-columns: 1fr 2fr;         /* 画像:テキスト = 1:2 */
  gap: 24px;                              /* カラム間の余白 24px */
  align-items: stretch;                   /* 行の高さ＝最大コンテンツに */
}

/* ── reverse クラス：2:1に入れ替え ── */
.case-item.reverse {
  grid-template-columns: 2fr 1fr;         /* テキスト:画像 = 2:1 */
}
/* 必要に応じて明示的に列を指定（なくても動きます） */
.case-item.reverse .case-photo { grid-column: 2; }
.case-item.reverse .case-text  { grid-column: 1; }

/* ── 画像：親セルの高さにフィット ── */
.case-photo {
  display: block;         /* ブロック化 */
  width: auto;            /* 幅は自動（高さ優先） */
  height: 100%;           /* 親セルの高さに合わせる */
  object-fit: cover;      /* はみ出し部分は切り取り */
  border-radius: 8px;     /* 角丸 8px */
}

/* ── テキストボックス ── */
.case-text {
  background-color: #FFF5D9;  /* パンフのクリーム色 */
  border-radius: 8px;         /* 角丸 8px */
  padding: 16px;              /* 内側余白 16px */
}

/* 見出し */
.case-text h3 {
  font-size: 20px;            /* 見出し 20px */
  font-weight: bold;
  margin: 0 0 12px;           /* 下余白 12px */
}

/* 本文／著者 */
.case-text p {
  margin: 0 0 8px;            /* 段落間 8px */
  font-size: 16px;            /* 本文 16px */
  line-height: 1.6;           /* 行間 1.6 */
}
.case-text .case-author {
  margin-bottom: 0;           /* 最終行の余白は不要 */
}

@media (max-width: 600px) {
  /* ── すべての case-item を Flexbox に切り替え ── */
  .case-item,
  .case-item.reverse {
    display: flex !important;
    align-items: stretch;
    width: 100%;
  }

  /* ── 通常アイテムは img→text （HTML順）のまま ── */
  .case-item {
    flex-direction: column;           /* 1列：上から順に子要素 */
  }

  /* ── reverse アイテムは HTML順を反転して img→text ── */
  .case-item.reverse {
    flex-direction: column-reverse !important; 
  }

  /* ── 画像・テキスト幅をリセット ── */
  .case-photo {
    width: 100%;
    height: auto;
  }
  .case-text {
    max-width: none;
  }
}


/* ── 親コンテナ：隙間なしで横中央 ── */
.flow-list {
  display: flex;
  justify-content: space-evenly; /* アイテム間を均等配置 */
  align-items: center;
  max-width: 800px;              /* 全体幅は 800px に制限 */
  margin: 32px auto;             /* 上下 32px、左右は自動センター */
  overflow: visible;
}


/* ── 各ステップボックス ── */
.flow-step {
  writing-mode: vertical-rl;    /* 縦書き */
  text-orientation: upright;
  width: 120px;                  /* 元 80px → 100px (+25%) */
  height: 200px;                 /* 元 200px → 220px (+10%) */
  background-color: #FFE9C2;    /* 淡オレンジ */
  border-radius: 20px;          /* 丸角 20px */
  display: flex;
  justify-content: center;      /* 縦書き文字中心寄せ */
  align-items: center;
  font-size: 18px;              /* フォントサイズ 18px */
  font-weight: bold;
  position: relative;
  box-sizing: border-box;
  margin: 0;                    /* 余白は矢印の重なりで表現 */
}

/* ── 隣り合うボックスを矢印分だけ重ねる ── */
.flow-step:not(:first-child) {
  margin-left: -8px;            /* 矢印幅16px の半分 */
}

/* ── 右ノッチ（三角） ── */
/* ② .flow-step（最後以外）にオレンジ三角を追加 */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  /* ボックス幅の半分ぶんだけ被せる */
  right: -16px;         
  /* 上下 20px は border-radius 分だけマージン */
  top: 9px;
  bottom: 20px;
  width: 0;
  height: 0;
  /* ボックス高さ 220px – 丸角上下各20px = 180px → 三角の高さを 180px に */
  border-top: 90px solid transparent;   
  border-bottom: 90px solid transparent;
  /* 幅 16px のオレンジ三角 */
  border-left: 16px solid #FFE9C2;     
  z-index: 1;
}
.flow-step::before{
    display: none;
  }
/* ── モバイル時は1列表示 ── */
@media (max-width: 600px) {
  .flow-list {
    flex-direction: column;
    gap: 16px;
  }
  .flow-step {
    width: 100%;
    height: auto;
    writing-mode: horizontal-tb;
    text-orientation: initial;
    margin-left: 0;
  }
  .flow-step::after {
    display: none;
  }
  /* ▼文字を要素下にブロックで追加 */
  .flow-step:not(:first-child)::before {
    content: "▼";
    display: block;
	position: absolute;
	top:-39px;
	left:47%;
    font-size: 24px;           /* お好みで調整 */
    color: #FFE9C2;            /* 背景色と同じ */
    margin: 8px 0;             /* 上下余白 */
  }
}