@charset "utf-8";

/* 
Base style
*/
body {
  font-family:
    'Noto Sans JP',
    'Noto Serif JP',
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Arial",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #edfcff;
  /* 好きな色コードに変更 */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

* {
  box-sizing: border-box;
}

summary {
  cursor: pointer;
}

/* 
header
*/
/* ========== Header (REPLACE ALL) ========== */
.header {
  --max-w: 1200px;
  --pad-x-sp: 16px;
  --pad-x-pc: 32px;

  width: 100%;
  margin: 0 auto;
  max-width: var(--max-w);
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px var(--pad-x-sp);
  box-sizing: border-box;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ロゴ */
.header-title-1 {
  margin: 0;
  line-height: 0;
}

.header-title-1>a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.header-title-1 img {
  display: block;
  height: auto;
  max-height: 48px;
  width: auto;
}

/* テキスト */
.header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  line-height: 1.2;
}

.header-title-2 {
  margin: 0;
  font: 400 12px "Noto Serif JP", serif;
  color: #333;
}

.header-title-3 {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #70c7d8;
  letter-spacing: .02em;
}

/* PC右端リンク（ホバー下線なし） */
.header-title-5 {
  display: none;
  color: #333;
  text-decoration: none !important;
  border: 0;
  font: 400 14px "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
  transition: opacity .2s;
}

a.header-title-5,
a.header-title-5:hover,
a.header-title-5:focus,
a.header-title-5:active,
a.header-title-5:visited {
  text-decoration: none !important;
}

.header-title-5:hover {
  opacity: .8;
}

.header-title-5:focus {
  outline: 2px solid #70c7d8;
  outline-offset: 2px;
}

/* ========== Hamburger（SP表示／PC非表示） ========== */
.hamburger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.hamburger:hover {
  outline: none;
  box-shadow: none;
}

.hamburger:focus {
  outline: none;
}

.hamburger:focus-visible {
  outline: 2px solid #70c7d8;
  outline-offset: 2px;
}

.hamburger::-moz-focus-inner {
  border: 0;
}

.hamburger-box {
  position: relative;
  width: 24px;
  height: 16px;
  display: inline-block;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #333;
  content: "";
  transition: transform .38s ease-out, opacity .32s ease-out;
}

.hamburger-inner {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger-inner::before {
  top: -7px;
}

.hamburger-inner::after {
  top: 7px;
}

.hamburger.is-open .hamburger-inner {
  transform: translateY(-50%) rotate(45deg);
}

.hamburger.is-open .hamburger-inner::before {
  transform: rotate(90deg) translateX(0);
}

.hamburger.is-open .hamburger-inner::after {
  transform: rotate(90deg) translateX(0);
}

/* ========== Drawer（共通ベース：PC保険） ========== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
  /* にじみ防止 */
}

.drawer[hidden] {
  display: none;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .38s ease-out;
}

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(84vw, 320px);
  height: 100%;
  background: #fff;
  box-shadow: none;
  transform: translateX(calc(100% + 24px));
  transition: transform .38s ease-out, box-shadow .38s ease-out;
  display: flex;
  flex-direction: column;
}

.drawer.is-open {
  pointer-events: auto;
}

.drawer.is-open .drawer-backdrop {
  opacity: 1;
}

.drawer.is-open .drawer-panel {
  transform: translateX(0);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
}

/* リスト（共通） */
.drawer-list {
  list-style: none;
  margin: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-list a {
  display: block;
  padding: 12px 8px;
  border-radius: 8px;
  background: #f7f7f7;
  text-decoration: none;
  color: #333;
  font: 500 16px "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background-color .2s, opacity .2s;
}

.drawer-list a:hover {
  background: #efefef;
}

/* スクロールロック */
body.is-locked {
  overflow: hidden;
}

/* ===== PC専用：右端リンク表示／ハンバーガー非表示 ===== */
@media (min-width: 768px) {
  .header {
    padding: 12px var(--pad-x-pc);
  }

  .header-title-2 {
    font-size: 13px;
  }

  .header-title-3 {
    font-size: 22px;
  }

  .hamburger {
    display: none;
  }

  .header-title-5 {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 6px;
    font-size: 15px;
  }
}

/* ===== SP専用：黒フル画面ドロワー、右→左、✕は線で描画（細さ可変） ===== */
@media (max-width: 767.98px) {
  .header {
    gap: 8px;
  }

  .header-title-1,
  .header-title-2,
  .header-title-5 {
    display: none !important;
  }

  .header-title-3 {
    display: block !important;
    font-size: 20px;
    font-weight: 700;
    color: #70c7d8;
  }

  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 背景は不要（フル画面で覆うため） */
  .drawer-backdrop {
    display: none;
  }

  /* ドロワーパネル：全画面・黒・右→左・影なし */
  .drawer-panel {
    left: auto;
    right: 0;
    width: 100vw;
    height: 100dvh;
    background: #000;
    color: #fff;
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(100%);
    box-shadow: none;
  }

  .drawer.is-open .drawer-panel {
    transform: translateX(0);
    box-shadow: none;
  }

  /* ✕（閉じる）つまみ：位置・サイズ・色・細さをここで調整 */
  .drawer {
    --x-size: 48px;
    /* タップ領域の一辺 */
    --x-top: 10px;
    /* 上からの距離 */
    --x-left: 10px;
    /* 左からの距離 */
    --x-color: #fff;
    /* ×の色 */
    --x-cross: 28px;
    /* ×の長さ（見た目サイズ感） */
    --x-stroke: 2px;
    /* ×の太さ（1〜3pxで微調整） */
  }

  /* 文字の“×”は使わず、疑似要素で線を2本描く */
  .drawer-close {
    position: absolute;
    top: calc(max(var(--x-top), 0px) + env(safe-area-inset-top, 0px));
    left: var(--x-left);
    width: var(--x-size);
    height: var(--x-size);
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;

    font-size: 0;
    /* ← 文字の×は非表示 */
    line-height: 1;
    color: var(--x-color);
    /* currentColor が線色として使われる */
  }

  .drawer-close:hover {
    opacity: .9;
  }

  .drawer-close:active {
    opacity: .85;
  }

  .drawer-close:focus {
    outline: none;
  }

  .drawer-close:focus-visible {
    outline: 2px solid #70c7d8;
    outline-offset: 2px;
  }

  .drawer-close::before,
  .drawer-close::after {
    content: "";
    position: absolute;
    top: 65%;
    left: 65%;
    width: var(--x-cross);
    height: var(--x-stroke);
    background: currentColor;
    border-radius: 1px;
    transform-origin: center;
  }

  .drawer-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .drawer-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* ドロワー内リンクは白文字基調 */
  .drawer-list {
    margin: 16px;
  }

  .drawer-list a {
    background: transparent;
    color: #fff;
    border-radius: 6px;
  }

  .drawer-list a:hover {
    background: rgba(255, 255, 255, .08);
  }
}


/* 
hero
*/
/* ===== scope ===== */
.wrapper-hero .hero {
  position: relative;
  width: 100%;
  max-width: 750px;
  /* PC時の最大幅 */
  margin: 0 auto;

  /* オーバーレイ微調整用（必要なら調整） */
  --up-top: 4%;
  --up-left: 50%;
  --up-w: 90%;
  --under-bottom: 4%;
  --under-left: 50%;
  --under-w: 92%;
}

/* 画像の基礎 */
.wrapper-hero .hero .hero-media,
.wrapper-hero .hero .hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* CLS対策：端末別の想定比率を先に確保 */
.wrapper-hero .hero .hero-media img {
  aspect-ratio: 390 / 693;
}

@media (min-width: 768px) {
  .wrapper-hero .hero .hero-media img {
    aspect-ratio: 750 / 400;
  }
}

/* “枠いっぱいに見せたい”ときは下の1行をON（必要時のみ） */
/* .wrapper-hero .hero .hero-media img { object-fit: cover; } */

/* ===== オーバーレイ（任意） ===== */
.wrapper-hero .hero .img-main-up,
.wrapper-hero .hero .img-main-under {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  max-width: 100%;
  height: auto;
}

.wrapper-hero .hero .img-main-up {
  top: var(--up-top);
  left: var(--up-left);
  width: var(--up-w);
}

.wrapper-hero .hero .img-main-under {
  bottom: var(--under-bottom);
  left: var(--under-left);
  width: var(--under-w);
}

/* ===== ヒーロー上テキスト（使う場合のみ） ===== */
.wrapper-hero .hero>h2 {
  font-family: "Noto Serif JP", serif;
  font-size: 30px;
  color: #333;
  font-weight: 400;
  position: absolute;
  z-index: 3;
  top: 0%;
  left: 5%;
  margin: 0;
}


.container {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.wrapper-0 {
  max-width: 750px;
  height: auto;
  margin: 0 auto;
}

.wrapper-1,
.wrapper-2,
.wrapper-4,
.wrapper-5,
.wrapper-6,
.wrapper-7,
.wrapper-8,
.wrapper-9,
.wrapper-10,
.wrapper-11,
.wrapper-12,
.wrapper-13,
.wrapper-14,
.wrapper-15,
.wrapper-16,
.wrapper-17,
.wrapper-18,
.wrapper-19,
.wrapper-20,
.wrapper-21,
.wrapper-22 {
  max-width: 750px;
  height: auto;
  margin: 0 auto;
  /*padding: 80px 0px 0px;*/
}

.container-0 {
  background-color: rgb(189 233 251);
  padding-top: 80px;
  padding-bottom: 80px;
}

/* ===== wrap-1（スマホ縦積み／750px〜横並び）===== */

.wrap-0 {
  font-family: Noto Sans JP;
  font-weight: 400;
  font-size: 10px;
  text-align: center;
  margin: 0 auto;
  width: 80%;
}

/* ===== wrapper-1 ===== */
/* ===== wrapper-1 ===== */
.wrap-1 {
  width: 100%;
  margin: 0 auto;
  background: #503221;
  padding: 50px 25px 50px;
  /* ← 下も 50px に戻す（内側余白） */
  text-align: center;
  display: flow-root;
  /* 末子marginの“にじみ”防止（BFC） */
}

/* 見出し */
.wrap-1>h1 {
  font-family: Noto Serif JP;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  margin: 0;
  color: #E0CF87;
}

/* リード（SP） */
.wrap-1>p:first-of-type {
  font-family: Noto Sans JP;
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  display: inline-block;
  text-align: left;
  width: 92%;
  margin: 20px auto 0;
  text-align: justify;
}

/* ===== Award block ===== */
.award-flex {
  margin-top: 16px;
}

.award-flex>img {
  display: block;
  width: 280px;
  height: auto;
  margin: 0 auto 16px;
  /* SPは中央 */
}

.award-text h2 {
  font-family: Noto Serif JP;
  font-weight: 400;
  font-size: 20px;
  margin: 25px 0 5px;
  color: #E0CF87;
}

.award-text h3 {
  font-family: Noto Sans JP;
  font-weight: 400;
  font-size: 18px;
  margin: 16px 0 0;
  color: #E0CF87;
}

.award-text {
  /* 点線の長さ＆最後の段落の下余白はここで調整 */
  --rule-length-pc: 95%;
  --rule-length-sp: 88%;
  --award-last-gap: 16px;
  /* ← 最後の<p>の下マージン */
}

.award-text p {
  font-family: Noto Sans JP;
  font-weight: 400;
  font-size: 14px;
  color: #FFF5C9;
  text-align: justify;
  width: 94%;
  margin: 14px auto;
}

/* h2+p と h3 の間に“短い点線” */
.award-text h3 {
  position: relative;
  margin-top: 24px;
}

.award-text h3::before {
  content: "";
  display: block;
  width: var(--rule-length-pc);
  /* PC長さ */
  border-top: 1px dashed #bbb;
  margin: 20px 0 12px;
  /* PCは左寄せ */
}

/* 最後の段落だけ下余白（wrap-1はBFCなので外へにじまない） */
.award-text p:last-of-type {
  margin-bottom: var(--award-last-gap);
}

/* ===== wrapper-2（画像帯） ===== */
.wrapper-2 .container {
  max-width: 750px;
  margin: 0 auto;
  padding: 0;
}

.wrap-2 {
  position: relative;
  padding-top: 0;
}

.wrap-2 picture,
.wrap-2 img {
  display: block;
  width: 100%;
  height: auto;
}

/* セクション同士を“外側ゼロ”に（内側パディングは生かす） */
.wrapper-1,
.wrapper-2 {
  margin: 0;
}

.wrapper-2 .wrap-2>*:first-child {
  margin-top: 0;
}

/* ===== PC（750px〜） ===== */
@media (min-width:750px) {

  /* H1を1行化（<br>を無効化） */
  .wrap-1>h1 br {
    display: none;
  }

  .wrap-1>h1 {
    white-space: nowrap;
  }

  /* リード：2行固定（…省略）＋中央寄せ */
  .wrap-1>p:first-of-type {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    width: 60%;
    margin: 20px auto 0;
  }

  /* 画像左／テキスト右 */
  .award-flex {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
  }

  .award-flex>img {
    flex: 0 0 280px;
    margin: 0;
  }

  .award-text {
    flex: 1 1 auto;
    text-align: left;
  }

  .award-text p {
    width: 100%;
    line-height: 1.7;
  }
}

/* ===== SP（〜767.98px）：点線だけ中央寄せ ===== */
@media (max-width:767.98px) {
  .award-text h3::before {
    width: var(--rule-length-sp);
    margin: 20px auto 12px;
    /* 中央寄せ */
  }
}

/* ===== 無縫合でくっつける用の上書きパッチ ===== */

/* グローバルで section に余白を付ける規則があっても打ち消す */
section.wrapper-1,
section.wrapper-2 {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* wrapper-1 内側の“保険スペーサー”を無効化（もし入れている場合） */
.wrapper-1 .wrap-1::after {
  margin-bottom: 0 !important;
  height: 0 !important;
  content: "" !important;
  display: block !important;
}

/* 本当に線一本も見せたくない場合のサブピクセル対策 */
.wrapper-2 {
  /* 端末によって稀に出る1px隙間の保険。不要ならコメントアウト可 */
  margin-top: -0.5px;
  /* or -1px */
}

/* 念のためブラウザ初期値対策（未設定なら無視されるだけ） */
html,
body {
  margin: 0;
  padding: 0;
}



.wrapper-3 {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.wrap-3>h2 {
  font-family: Noto Serif JP;
  font-weight: 400;
  font-size: 29px;
  text-align: center;
  margin: 0;
  margin: 40px 0 24px 0;
  line-height: 1.2;
}

.wrap-3-txt {
  width: 90%;
  margin: 0 auto;
  font-family: Noto Sans JP;
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  margin-bottom: 40px;
  line-height: 1.6;
  text-align: center;
}


.wrap-3 {
  width: 100%;
  height: auto;
}

/* 上書きまたは wrapper-3専用で追加 */
.wrapper-3 .button01 {
  margin-top: 1.5em;
  text-align: center;
  position: static;
  /* 絶対位置を解除 */
}

.wrapper-3 .button01 a {
  position: static !important;
  /* 必須：以前の absolute を無効化 */
  margin: 0 auto;
  margin-bottom: 20px;
  width: 250px;
  height: 60px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 400;
  background-color: #000;
  color: #fff;
  opacity: 95%;
  text-decoration: none;
  transition: 0.3s;
}

/* hover効果はそのまま使用 */
.wrapper-3 .button01 a:hover {
  text-decoration: none;
  background-color: #fff;
  color: #000;
  border: solid 1px #000;
}

/* モバイル（デフォルト）では改行を無効化 */
.wrap-3-txt br.pc-br {
  display: none;
}

/* PC幅のみ改行を有効化（例：751px以上をPC扱い） */
@media (min-width: 751px) {
  .wrap-3-txt br.pc-br {
    display: inline;
  }
}

.wrap-3-txt {
  text-align: center;
}

@media (max-width: 750px) {
  .wrap-3-txt {
    text-align: left;
    text-align: justify;
  }
}

.button01 a {
  display: flex;
  /* フレックスボックスで中央揃え */
  justify-content: center;
  /* 横方向の中央揃え */
  align-items: center;
  text-align: center;
  padding: 0.7em 2em;
  /* アイコン分の左余白を調整 */
  width: 250px;
  height: 60px;
  background-color: #907ACF;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  opacity: 95%;
  transition: 0.3s;
  position: static;
  /* 必要なら absolute を解除 */
}


.figure-wrap {
  width: 765px;
  display: flex;
  margin: 0 auto;
}

.figure-wrap-1,
.figure-wrap-2 {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.aim {
  margin: 0;
}

.aim-image {
  margin: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.aim-headline {
  font-family: Noto Sans JP;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
}

/* ========== wrapper-4：2カラム＋背景＋ボタン（完全版） ========== */
/* =========================================
   wrapper-4（HTMLで背景URL指定・SP/PC切替対応）
   ========================================= */

.wrapper-4 {
  /* 既存トークン（必要なら調整） */
  --container: 750px;
  --gap: 2rem;
  --pad-x: 16px;
  --hpad-pc: 35px;

  --btn-radius: 30px;
  --btn-gap: 16px;
  --btn-pad-y: 12px;
  --btn-pad-x: 16px;
  --btn1: #6e88b1;
  --btn1-hover: #5a77a0;
  --btn2: #d65c9d;
  --btn2-hover: #c24f8f;

  position: relative;
  isolation: isolate;
  /* ::beforeを背面に固定 */
}

/* セクション背景：まずはSP値を適用（HTMLのstyleで上書き） */
.wrapper-4::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, var(--bg-dim-sp, .0)),
      rgba(0, 0, 0, var(--bg-dim-sp, .0))),
    var(--bg-url-sp, none);
  background-size: cover;
  background-position: var(--bg-pos-sp, center);
  background-repeat: no-repeat;
  z-index: -1;
}

.wrapper-4 {
  min-height: var(--min-h-sp, 0);
}

/* PC幅ではPC用の変数に切替 */
@media (min-width: 751px) {
  .wrapper-4::before {
    background:
      linear-gradient(rgba(0, 0, 0, var(--bg-dim-pc, .0)),
        rgba(0, 0, 0, var(--bg-dim-pc, .0))),
      var(--bg-url-pc, none);
    background-size: cover;
    background-position: var(--bg-pos-pc, center);
  }

  .wrapper-4 {
    min-height: var(--min-h-pc, 0);
  }
}

/* コンテナ */
.wrapper-4 .container.two-col-4 {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
  padding: 35px 0px;
}

/* 左カラム（画像） */
.wrapper-4 .col-left-4 {
  flex: 1 1 260px;
  display: flex;
  justify-content: center;
}

.wrapper-4 .col-left-4 img {
  display: block;
  width: min(100%, 260px);
  height: auto;
  aspect-ratio: 254 / 412;
}

/* 右カラム（テキスト＋ボタン） */
.wrapper-4 .col-right-4 {
  flex: 1.5 1 320px;
  display: grid;
  gap: 12px;
}

/* 見出し */
.wrapper-4 .col-right-4 h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 18px;
  margin: 0 0 20px;
}

.wrapper-4 .col-right-4 h2 {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 10px;
}

/* 右カラム直下の .wrap-4 は背景なし（セクション背景に一本化） */
.wrapper-4 .col-right-4>.wrap-4 {
  background: none;
  padding: 0;
  box-sizing: border-box;
  text-align: inherit;
  color: inherit;
}

/* ボタンコンテナ */
.wrapper-4 .button-container {
  max-width: 800px;
  margin-inline: auto;
}

/* ボタン群レイアウト */
.wrapper-4 .button-container>.wrap-4 {
  background: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--btn-gap);
}

/* ボタン（共通） */
.wrapper-4 .button-1,
.wrapper-4 .button-2 {
  display: inline-block;
  width: clamp(240px, 86vw, 337px);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--btn-radius);
  box-sizing: border-box;
  transition: filter .2s ease, background-color .2s ease;
}

/* 個別色 */
.wrapper-4 .button-1 {
  background-color: var(--btn1);
  color: #fff;
}

.wrapper-4 .button-2 {
  background-color: var(--btn2);
  color: #fff;
}

/* ホバー/フォーカス */
.wrapper-4 .button-1:hover {
  background-color: var(--btn1-hover);
}

.wrapper-4 .button-2:hover {
  background-color: var(--btn2-hover);
}

.wrapper-4 .button-1:focus-visible,
.wrapper-4 .button-2:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  filter: brightness(1.03);
}

/* PCで見出しを左寄せ＋左右パディング */
@media (min-width: 751px) {

  .wrapper-4 .col-right-4 h3,
  .wrapper-4 .col-right-4 h2 {
    text-align: left;
    padding: 0 var(--hpad-pc);
  }

  .wrapper-4 .container.two-col-4 {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap);
    padding: 35px 60px;
  }
}

/* ===== SP（～750px）：順序制御＆中央寄せ ===== */
@media (max-width: 750px) {
  .wrapper-4 .container.two-col-4 {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 14px;
    grid-template-areas:
      "h3"
      "h2"
      "image"
      "buttons";
  }

  .wrapper-4 .col-right-4 {
    display: contents;
  }

  .wrapper-4 .col-right-4>h3 {
    grid-area: h3;
    margin: 0;
    text-align: center;
  }

  .wrapper-4 .col-right-4>h2 {
    grid-area: h2;
    margin: 0 0 .5rem;
    text-align: center;
    line-height: 1.35;
  }

  .wrapper-4 .col-left-4 {
    grid-area: image;
    display: flex;
    justify-content: center;
    margin: 15px 0px;
  }

  .wrapper-4 .col-right-4>.button-container {
    grid-area: buttons;
  }

  /* 画像の上限（SP） */
  .wrapper-4 .col-left-4 img {
    width: 100%;
    max-width: clamp(220px, 70vw, 360px);
    height: auto;
  }

  /* ボタンは縦積み＆中央 */
  .wrapper-4 .button-container>.wrap-4 {
    display: grid;
    gap: 12px;
    justify-items: center;
  }

  /* 見出しはSPでは左右パディング無し */
  .wrapper-4 .col-right-4 h3,
  .wrapper-4 .col-right-4 h2 {
    padding: 0;
  }
}

/* ==== 左カラム画像の厳密固定（PC時 254×412） ==== */
@media (min-width: 751px) {
  .wrapper-4 .col-left-4 {
    flex: 0 0 auto;
  }

  .wrapper-4 .col-left-4>img {
    width: 254px !important;
    height: 412px !important;
    max-width: none !important;
    object-fit: contain;
  }
}

/* SP時は自然可変 */
@media (max-width: 750px) {
  .wrapper-4 .col-left-4>img {
    width: min(254px, 70vw) !important;
    height: auto !important;
    max-width: none !important;
  }
}

/* 汎用指定の打消し（保険） */
.wrapper-4 .col-left-4 img {
  width: auto;
  height: auto;
  max-width: none;
}

/* ===== 基本体裁 ===== */
/* ========== wrapper-6（フル） ========== */
.wrapper-6 {
  padding: clamp(24px, 4vw, 40px) 0;
}

.wrapper-6 .container {
  max-width: 750px;
  margin: 0 auto;
}

.wrap-6 {
  text-align: center;
}

.wrap-6 h3 {
  font: 400 15px "Noto Serif JP", serif;
  margin: 0 0 12px;
}

.wrap-6 h2,
.wrap-6 p {
  font: 400 20px "Noto Serif JP", serif;
  margin: 0 0 12px;
}

/* 既存の見出し基準（route-ttl で上書き） */
.wrap-6 h1 {
  font: 400 29px "Noto Serif JP", serif;
  margin: 0 0 20px;
}

/* 既存：h1内spanの色（route-ttl内でも踏襲） */
.wrap-6 h1>span {
  color: #70d1e8;
}

/* --- 画像レイアウト共通 --- */
.wrapper-6 .img {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto 0;
  padding-inline: clamp(12px, 4vw, 20px);
}

.wrapper-6 .img img {
  display: none;
  height: auto;
}

/* --- SP：SP画像のみ表示。指定サイズを“厳守” --- */
@media (max-width: 750px) {

  .wrapper-6 .img .pc {
    display: none !important;
  }

  .wrapper-6 .img .sp {
    display: block !important;
  }

  /* 他の汎用指定を無効化して厳密サイズ適用 */
  .wrapper-6 .img .sp {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 auto !important;
    float: none !important;
  }

  /* 328×385を厳守 */
  .wrapper-6 .img .sp--fix328x385 {
    width: 328px !important;
    height: 385px !important;
  }
}

/* --- PC：PC画像のみ表示。実寸＆中央 --- */
@media (min-width: 751px) {
  .wrapper-6 .container {
    padding: 0 !important;
  }

  .wrapper-6 .img .sp {
    display: none !important;
  }

  .wrapper-6 .img .pc {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 auto !important;
    float: none !important;
  }

  /* サブピクセルの微ズレ抑止 */
  .wrapper-6 .img:nth-of-type(1) .pc {
    width: 750px !important;
  }
}

/* ========== ▼ 繰り落ち対策：h1（route-ttl） ========== */
/* &nbsp;を使わず、要素分割＋gapで余白を作る */
.wrap-6 .route-ttl {
  display: inline-flex;
  /* 単語の塊で並ぶ */
  flex-wrap: wrap;
  /* 狭い幅で自然に折返し */
  align-items: baseline;
  gap: clamp(10px, 3vw, 24px);
  /* 以前の3つ分のスペースを再現 */
  margin: 0 0 20px;
  /* 既存h1と同じ下余白 */
  font: 400 29px "Noto Serif JP", serif;
  /* 既存の見出しサイズを踏襲 */
  line-height: 1.25;
  text-align: center;
}

/* “半年”は常にひと塊（半と年が別行にならない） */
.wrap-6 .route-ttl .nowrap {
  white-space: nowrap;
  color: #70d1e8;
  /* 既存色を踏襲 */
}

/* 引用符の微調整（任意） */
.wrap-6 .route-ttl .quo {
  transform: translateY(0.02em);
  opacity: .95;
}

/* Z Flip等の縦長・狭幅端末で詰める */
@media (max-width: 420px) {
  .wrap-6 .route-ttl {
    gap: clamp(8px, 2.5vw, 16px);
    letter-spacing: .01em;
  }
}

/* さらに狭い端末の保険（必要に応じて解除）
@media (max-width: 360px){
  .wrap-6 .route-ttl{ font-size: 27px; }
}
*/
/* ===== wrapper-6 見出しの色指定：半年だけ水色、他は黒 ===== */
.wrap-6 .route-ttl span:not(.nowrap) {
  color: #333 !important;
  /* ← 最短 / “ / ” / ルート を黒に */
}

.wrap-6 .route-ttl .nowrap {
  color: #70d1e8 !important;
  /* ← 半年だけ既存の水色 */
}

/* PCでは wrapper-6 内の <br> を非表示にして改行しない */
@media (min-width: 751px) {
  .wrapper-6 .wrap-6 p br {
    display: none;
  }
}

/* wrapper全体の余白・背景（必要に応じて調整） */
.wrapper-7 {
  padding: 2em 0;
  background-color: #f9f9f9;
}

/* 中央寄せコンテナ */
.wrapper-7 .container {
  display: flex;
  justify-content: center;
}

/* ボックス本体 */
.wrapper-7 .box {
  max-width: 315px;
  width: 100%;
}

/* テキスト部分 */
.wrapper-7 .box-txt {
  margin: 0;
}

.wrapper-7 .box-txt h3 {
  margin: 0 0 0.5em;
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 400;
  text-align: center;
}

.wrapper-7 .box-txt p {
  margin: 0 0 1em;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

/* ボタン */
.wrapper-7 .button01 {
  text-align: center;
  margin-top: 1em;
}

/* ボタン */
/* ===== wrapper-7：沈むだけボタン（差し替え） ===== */
.wrapper-7 .button01 a,
.wrapper-7 .button01 a:link,
.wrapper-7 .button01 a:visited,
.wrapper-7 .button01 a:focus,
.wrapper-7 .button01 a:focus-visible,
.wrapper-7 .button01 a:hover,
.wrapper-7 .button01 a:active {
  /* レイアウト */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 315px;
  height: 60px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  border-radius: 30px;
  text-decoration: none !important;

  /* 色・枠はいじらない（常に固定） */
  color: #fff !important;
  border: 0 !important;
  outline: none !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-tap-highlight-color: transparent;

  /* グラデは固定（wrapper-9と同じ） */
  background: linear-gradient(129deg, #7bc8ff 0%, #5a73ec 15%, #0d1f8c 55%) !important;

  /* 艶と影（ベース） */
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;

  /* “沈むだけ”のアニメーション */
  transition: transform .10s ease, box-shadow .15s ease !important;
}

/* hover：沈むだけ（色・枠・背景は不変） */
.wrapper-7 .button01 a:hover {
  transform: translateY(1px) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .10),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

/* active：さらに少し沈む */
.wrapper-7 .button01 a:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .10),
    inset 0 2px 0 rgba(255, 255, 255, .14) !important;
}

/* ===== wrapper-7：Z Flip等の狭幅最適化パッチ（追記） ===== */

/* 基本：ボックスに余白を持たせて詰まりを回避 */
.wrapper-7 .container {
  box-sizing: border-box;
}

.wrapper-7 .wrap-7 .box {
  padding: clamp(12px, 3.5vw, 20px);
  border-radius: 12px;
}

/* テキストは読みやすく（詰まり防止） */
.wrapper-7 .box-txt p {
  margin: 0 0 12px;
  line-height: 1.8;
  /* 両端揃えを使っている場合はそのままでOK。指定していなければ下を有効化
  text-align: justify;
  text-align-last: left;
  */
}

/* ボタンを中央・可変幅にしてはみ出し防止 */
.wrapper-7 .button01 {
  display: flex;
  justify-content: center;
}

.wrapper-7 .button01 a {
  box-sizing: border-box;
  width: clamp(220px, 86vw, 315px);
  /* ← 端末幅に応じて縮む／最大315px */
  max-width: 100%;
}

/* ===== 狭幅端末（Z Flip想定）：さらに余白＆サイズ調整 ===== */
@media (max-width: 400px) {
  .wrapper-7 .container {
    padding: 0 16px;
    /* 端の密着感を緩和 */
  }

  .wrapper-7 .box-txt p {
    font-size: clamp(14px, 4.2vw, 16px);
  }

  .wrapper-7 .button01 a {
    height: 56px;
    /* 少しだけ低くして圧迫感を軽減 */
    font-size: 16px;
    width: clamp(220px, 90vw, 315px);
  }
}

/* 超狭幅（保険）：320px以下でも余裕を確保 */
@media (max-width: 320px) {
  .wrapper-7 .container {
    padding: 0 18px;
  }

  .wrapper-7 .button01 a {
    width: 94vw;
  }
}

.item {
  background-color: aqua;
}

.br-sp {
  display: none;
}

.sns {
  margin-top: 20px;
  display: inline-flex;
}

.fb-button {
  width: 110px
}

.line-btn {
  margin-left: 20px;
  width: 110px;
}

video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  margin-top: 30px;
  margin-bottom: 48px;
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
}


/* ============ wrapper-8：SPファースト（色・フォントは inherit） ============ */

/* カスタムプロパティ（必要に応じて数値だけ変更） */
.wrapper-8 .wrap-8 {
  /* SP背景の比率（SP背景画像の縦横比に合わせる）*/
  --w8-aspect: 390 / 1008;

  /* 重ね画像（円）のサイズと位置 */
  --w8-overlay-size: 300px;
  /* SPデフォルトの直径 */
  --w8-overlay-top: 10%;
  /* 背景上端からの距離 */

  /* 下段テキストの余白 */
  --w8-side-pad: 16px;
  --w8-bottom-pad: 12px;
}

/* コンテナ（中央寄せ） */
.container-8 {
  position: relative;
  width: 100%;
  max-width: 390px;
  /* SP時は390px想定 */
  margin: 0 auto;
}

/* 背景領域は比率で高さ管理（固定高さに依存しない） */
.wrap-8 {
  position: relative;
  width: 100%;
  aspect-ratio: var(--w8-aspect);
  overflow: hidden;
}

/* ===== 背景ピクチャ（最背面） ===== */
.bg-pic {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bg-pic>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 埋めて表示（トリミングあり） */
  display: block;
}

/* 見出し（自然フロー／最前面） */
.wrap-8>h3 {
  position: relative;
  margin: 0;
  text-align: center;
  z-index: 3;
  font: inherit;
  color: inherit;
  line-height: inherit;
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 600;
  padding: 40px 0px 0px;
}

.wrap-8>h2 {
  position: relative;
  margin: 0;
  text-align: center;
  z-index: 3;
  font: inherit;
  color: inherit;
  line-height: inherit;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

/* 下段テキスト：背景のいちばん下に固定 */
.wrap-8>p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--w8-bottom-pad);
  margin: 0;
  padding: 0 var(--w8-side-pad);
  text-align: center;
  z-index: 3;
  font: inherit;
  color: inherit;
  line-height: inherit;
  box-sizing: border-box;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 400;
}


/* ============ PC（768px〜）：背景枠を 750×595 に固定表示 ============ */
@media (min-width: 768px) {
  .container-8 {
    max-width: 750px;
    /* 横幅 750px に */
  }

  .wrap-8 {
    width: 750px;
    aspect-ratio: 750 / 595;
    /* → 高さは自動で 595px */
  }

  /* PCで重ね画像サイズ/位置を上書きしたい場合（任意） */
  .wrapper-8 .wrap-8 {
    /* 例：--w8-overlay-size: 320px; --w8-overlay-top: 12%; */
  }
}

/* ── 全体ラッパー ── */
.wrapper-9 {
  margin: 0 auto;
}


/* ── モバイルファースト：縦並び ── */
.wrap-9-3 {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.wrap-9-3>.wrap-9,
.wrap-9-3>.wrap-9-sec,
.wrap-9-3>.wrap-9-thi {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 380px;
  margin: 0px 0 20px;
  padding-top: 65px;
  overflow: visible;
}

/* ── アイコン ── */
.aim-9 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  margin: 0;
}

.aim-9 img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* ── テキスト共通 ── */
.wrap-9-3>.wrap-9>h2,
.wrap-9-3>.wrap-9-sec>h2,
.wrap-9-3>.wrap-9-thi>h2 {
  margin: 16px 0 0;
  text-align: center;
  font: 400 19px "Noto Serif JP", serif;
}

.wrap-9-3>.wrap-9>h1,
.wrap-9-3>.wrap-9-sec>h1,
.wrap-9-3>.wrap-9-thi>h1 {
  margin: 16px 0 0;
  text-align: center;
  font: 600 24px "Noto Serif JP", serif;
}

.wrap-9-3>.wrap-9>h3,
.wrap-9-3>.wrap-9-sec>h3,
.wrap-9-3>.wrap-9-thi>h3,
.wrap-9-3>.wrap-9>p,
.wrap-9-3>.wrap-9-sec>p,
.wrap-9-3>.wrap-9-thi>p {
  margin: 16px 0 0;
  text-align: center;
  font: 400 15px "Noto Sans JP", sans-serif;
}

.wrap-9-3>.wrap-9>p,
.wrap-9-3>.wrap-9-sec>p,
.wrap-9-3>.wrap-9-thi>p {
  margin-bottom: 24px;
}

.wrapper-9 .button01 {
  text-align: center;
  margin-top: 1em;
}

/* ボタン */
/* 差し替え：添付に近いグラデ色味 */
/* ── 基本 ─────────────────────────── */
.wrapper-9 .button01 a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 43px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  /* ← 常に白 */
  text-decoration: none;
  border-radius: 9999px;
  border: 0;
  outline: none;
  /* ← UAアウトライン無効 */
  -webkit-tap-highlight-color: transparent;

  /* 既存グラデ（色は固定で一切変えない） */
  --g1: #7bc8ff;
  --gM: #5a73ec;
  --g2: #0d1f8c;
  background: linear-gradient(129deg, var(--g1) 0%, var(--gM) 15%, var(--g2) 55%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18);

  /* 位置や色は遷移させない → “沈む”だけ */
  transition: transform .10s ease, box-shadow .15s ease;
}

/* ── hover：沈むだけ（色・枠は不変） ── */
.wrapper-9 .button01 a:hover {
  transform: translateY(1px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .10),
    inset 0 1px 0 rgba(255, 255, 255, .16);
  color: #fff;
  text-decoration: none;
  border: 0;
  outline: none;
}

/* ── focus/active：色・枠は不変 ── */
.wrapper-9 .button01 a:focus,
.wrapper-9 .button01 a:focus-visible,
.wrapper-9 .button01 a:active {
  color: #fff;
  text-decoration: none;
  border: 0;
  outline: none;
}

/* active は少しだけさらに沈む */
.wrapper-9 .button01 a:active {
  transform: translateY(2px);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .10),
    inset 0 2px 0 rgba(255, 255, 255, .14);
}

/* ===== BUTTON01 最終オーバーライド（必ず一番最後に） ===== */
.wrapper-9 .button01 a,
.wrapper-9 .button01 a:link,
.wrapper-9 .button01 a:visited,
.wrapper-9 .button01 a:hover,
.wrapper-9 .button01 a:active,
.wrapper-9 .button01 a:focus,
.wrapper-9 .button01 a:focus-visible {
  color: #fff !important;
  text-decoration: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(129deg, #7bc8ff 0%, #5a73ec 15%, #0d1f8c 55%) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  transition: transform .10s ease, box-shadow .15s ease !important;
}

.wrapper-9 .button01 a:hover {
  transform: translateY(1px) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, .10),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

.wrapper-9 .button01 a:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 3px 10px rgba(0, 0, 0, .10),
    inset 0 2px 0 rgba(255, 255, 255, .14) !important;
}

/* ========== wrapper-9：SPファースト（色・フォントは inherit） ========== */
.wrapper-9 {
  padding: 2em 0;
}

.container-9 {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding-inline: clamp(12px, 4vw, 20px);
  box-sizing: border-box;
}

/* セクション見出し（継承ベース） */
.container-9>h3 {
  margin: 0 0 12px;
  text-align: center;
  line-height: 1.4;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 400;
}

.container-9>h2 {
  margin: 0 0 12px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 25px;
  font-weight: 400;
}

.container-9>p {
  margin: 0 0 12px;
  text-align: left;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 400;
}

.container-9>h1 {
  font: 600 36px "Noto Serif JP", serif;
  text-align: center;
}

@media (min-width: 768px) {
  .wrapper-9 .container-9>p {
    text-align: center;
    margin: 0 auto;
    /* 読みやすくする任意調整：横幅を少し絞って中央配置 */
    max-width: 720px;
    /* 不要なら削除OK。好みで 640–800px に */
  }
}

/* ------- 並び ------- */
.wrap-9-3 {
  display: grid;
  grid-template-columns: 1fr;
  /* SPは1列 */
  gap: 20px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .wrap-9-3 {
    grid-template-columns: repeat(3, 236px);
    justify-content: center;
    gap: 20px;
    margin-top: 45px;
  }
}

/* ------- カード共通：白BOX化 ------- */
.wrap-9,
.wrap-9-sec,
.wrap-9-thi {
  --card-radius: 14px;
  --card-pad-x: 16px;
  --card-pad-top: 100px;
  /* 丸画像が半分はみ出す分の余白 */
  --card-pad-bottom: 16px;

  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: var(--card-pad-top) var(--card-pad-x) var(--card-pad-bottom);
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 1.08);
  font: inherit;
}

/* ------- テキストブロック：色付き背景（h2,h1,h3,p をまとめて囲む） ------- */
.text-9 {
  --text-bg: #f5fbff;
  /* ← 背景色：ここを変えるだけでOK */
  --text-radius: 12px;
  background: #e2f4f7;
  ;
  padding: 14px 12px;
}

.text-9>h2 {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
  margin-top: 25px;
}

.text-9>h1 {
  margin: 0 0 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: #70C7D8;
}

.text-9>h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #70C7D8;
  margin: 0;
}

.text-9>p {
  margin: 0 0 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 400;
}


/* 最後は余白ゼロ */

/* ※ カードごとに色を変えたい場合（例） */
/*
.wrap-9       .text-9{ --text-bg: #f5fbff; }  // 1枚目：青系
.wrap-9-sec   .text-9{ --text-bg: #fff7f0; }  // 2枚目：薄オレンジ
.wrap-9-thi   .text-9{ --text-bg: #f7fff2; }  // 3枚目：薄グリーン
*/

/* ------- 丸画像（半分はみ出し） ------- */
.aim-9 {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  background: #fff;
  /* 背景透け対策（任意） */
}

.aim-9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------- ボタン（既存カラーを継承） ------- */
.button01 {
  margin-top: 12px;
}

.button01 a {
  display: inline-block;
  padding: 20px 20px;
  text-decoration: none;
  background: transparent;
  color: inherit;
  border-radius: 6px;
  line-height: 1;
}

/* 既存 hover を尊重 */
.wrapper-9 .button01 a:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

/* -------（必要なら）フォント/色の強制継承パッチ ------- */
/*
.wrapper-9 :where(h1,h2,h3,h4,h5,h6,p,span,a,li,small,strong,em){
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
*/
/* 1) 1枚目カード .wrap-9 の背景を白に */
.wrap-9 {
  background-color: #fff;
}

/* 2) これまで白にしていたテキストブロック背景を #96c2e5 に */
.text-9 {
  --text-bg: #96c2e5;
}

/* 全カード共通：上パディングと丸画像の軽いはみ出し量を統一 */
.wrap-9,
.wrap-9-sec,
.wrap-9-thi {
  position: relative;
  /* 丸画像対策の上余白（必要に応じて数値だけ変えてOK） */
  --card-pad-top: 110px;
  padding-top: var(--card-pad-top);
}

/* 丸画像：半分ではなく“少しだけ”はみ出す（約30%） */
.wrap-9-3 .aim-9 {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translate(-50%, var(--aim-overlap, -30%));
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}

/* —— 必要ならPCだけ微調整（例：ちょい下げ＆上余白もちょい増） —— */
@media (min-width: 768px) {

  .wrap-9,
  .wrap-9-sec,
  .wrap-9-thi {
    --card-pad-top: 120px;
    /* PC時の上パディング */
  }

  .wrap-9-3 .aim-9 {
    --aim-overlap: -28%;
    /* PC時のはみ出し量（少し控えめ） */
  }

  .wrapper-9 .button01 {
    text-align: center;
    margin-top: 2em;
  }

  .text-9>h2 {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: inherit;
    margin-top: 33px;
  }

  .text-9>h1 {
    margin: 0 0 8px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #70C7D8;
  }

  .text-9>h3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #70C7D8;
    margin: 0;
  }

  .text-9>p {
    margin: 0 0 8px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-weight: 400;
  }
}

/* —— 1枚目カードの背景を白、text-9 背景を #96c2e5（前回指定の再掲） —— */
.wrap-9 {
  background-color: #fff;
}

.wrap-9 .text-9 {
  --text-bg: #96c2e5;
}

/* .text-9 の色背景をカードの左右端までフルブリード */
.wrap-9 .text-9,
.wrap-9-sec .text-9,
.wrap-9-thi .text-9 {
  /* カードの左右パディング分だけ外へ広げる */
  margin-left: calc(var(--card-pad-x, 16px) * -1);
  margin-right: calc(var(--card-pad-x, 16px) * -1);
  width: calc(100% + calc(var(--card-pad-x, 16px) * 2));
}

/* ページ全体をスムーススクロール */
html {
  scroll-behavior: smooth;
}

/* 既存の smooth を無効化（JSで制御するため） */

/* アンカー到達時に余白ができないように（以前の調整を打ち消す） */
#efficiency-1,
#efficiency-2,
#efficiency-3 {
  scroll-margin-top: 0 !important;
}

/* =======================================================
   wrapper-10 完全版
   - 角丸なし
   - SP: 横幅いっぱい
   - PC: 750×357 固定（画像はcoverでトリミング）
   - SP/PCで別画像（<picture>）
   ======================================================= */

.wrapper-10 {
  --accent: #70c7d8;
  /* 必要なら変更可 */
  --pc-text: 2fr;
  /* PCでの比率：テキスト側 */
  --pc-img: 3fr;
  /* PCでの比率：画像側 */
  margin-block: clamp(24px, 4vw, 64px);
}

.container-10 {
  box-sizing: border-box;
  margin: 0 auto;
}

/* 画像の角丸は使わない */
.wrapper-10 img {
  display: block;
  border-radius: 0;
}

/* ---------- SP（～767px） ---------- */
@media (max-width: 767px) {
  .container-10 {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    /* 端まで広げる */
  }

  /* テキストブロック（端まで） */
  .wrap-10-1 {
    width: 100%;
    background: var(--accent);
    color: #fff;
    text-align: center;
    padding: 20px;
  }

  .wrap-10-1>h2 {
    margin: 16px 0 0;
    font: 400 19px "Noto Serif JP", serif;
  }

  .wrap-10-1>h1 {
    margin: 12px 0 0;
    font: 600 24px "Noto Serif JP", serif;
  }

  .wrap-10-1>p {
    width: 95%;
    margin: 12px auto 0;
    font: 400 14px "Noto Sans JP", sans-serif;
    line-height: 1.85;
    color: #000;
    text-align: left;
  }


  /* 画像：コンテナ左右0にしているので幅100%で端まで */
  .media-10 img {
    width: 100%;
    height: auto;
  }
}

/* ---------- PC（768px～） ---------- */
@media (min-width: 768px) {
  .container-10 {
    max-width: 750px;
    /* ちょうど750px */
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: var(--pc-text) var(--pc-img);
    align-items: stretch;
    height: 357px;
    /* 全体高さ固定 */
  }

  .wrap-10-1,
  .wrap-10-2 {
    height: 100%;
  }

  .wrap-10-1 {
    background: var(--accent);
    color: #fff;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 縦中央 */
    text-align: left;
  }

  .wrap-10-1>h2 {
    margin: 0;
    font: 400 18px "Noto Serif JP", serif;
  }

  .wrap-10-1>h1 {
    margin: 12px 0 0;
    font: 600 26px "Noto Serif JP", serif;
  }

  .wrap-10-1>p {
    margin: 12px 0 0;
    font: 400 14px "Noto Sans JP", sans-serif;
    line-height: 1.9;
    color: #000;
  }


  /* 画像：750×357枠にフィット（トリミング） */
  .media-10,
  .media-10 img {
    width: 100%;
    height: 100%;
  }

  .media-10 img {
    object-fit: cover;
  }
}

/* ===== 見出し・注記（あなたの指定を尊重） ===== */
.container-11>h2 {
  font: 400 18px "Noto Serif JP", serif;
  text-align: center;
}

.container-11>h1 {
  font: 400 26px "Noto Sans JP", sans-serif;
  text-align: center;
}

.container-11>p {
  font: 400 14px "Noto Sans JP", sans-serif;
  text-align: center;
  color: #333;
  line-height: 1.8;
}

/* 角丸なし */
.wrapper-11 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.container-11 {
  box-sizing: border-box;
  margin: 0 auto;
}

/* ===== ギャラリー共通 ===== */
.gallery-11 {
  position: relative;
  max-width: 750px;
  margin: 16px auto;
}

.gallery-11 .viewport {
  overflow: hidden;
  width: 100%;
}

.gallery-11 .track {
  display: flex;
  will-change: transform;
  transition: transform .35s ease;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-11 .slide {
  flex: 0 0 auto;
}

/* 幅・高さはJSで固定 */

.gallery-11 .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid #999;
  background: #fff;
  color: #333;
  border-radius: 999px;
  cursor: pointer;
  line-height: 38px;
  text-align: center;
  font-size: 22px;
}

.gallery-11 .nav.prev {
  left: -8px;
}

.gallery-11 .nav.next {
  right: -8px;
}

.gallery-11 .nav:disabled {
  opacity: .35;
  cursor: default;
}

/* ===== SP（〜767px）：1枚表示 ===== */
@media (max-width:767px) {
  .container-11 {
    max-width: 100%;
    padding: 0;
  }

  .gallery-11 {
    max-width: 100%;
    margin: 16px 0;
  }

  .gallery-11 .nav.prev {
    left: 8px;
  }

  .gallery-11 .nav.next {
    right: 8px;
  }

  .container-11>p {
    padding: 0 16px;
  }

  /* 注釈は少し内側に */
}

/* ===== PC（768px〜）：3枚表示 ===== */
@media (min-width:768px) {
  .container-11 {
    max-width: 750px;
    padding: 0;
  }

  /* ビューポートの高さはJSで固定（data属性でも可） */
}

@media (max-width:767px) {

  /* 既存 */
  .container-11 {
    max-width: 100%;
    padding: 0;
  }

  .gallery-11 {
    max-width: 100%;
    margin: 16px 0;
  }

  .gallery-11 .nav.prev {
    left: 8px;
  }

  .gallery-11 .nav.next {
    right: 8px;
  }

  .container-11>p {
    padding: 0 16px;
  }

  /* ★ これを追加：ビューポート（=画像幅ぶん）を中央寄せ */
  .gallery-11 .viewport {
    margin: 0 auto;
  }
}

@media (min-width:768px) {
  .container-11 {
    max-width: 750px;
    padding: 0;
  }

  /* ★ 追加：JSで600px（=200×3）などに固定されたviewportを中央寄せ */
  .gallery-11 .viewport {
    margin: 0 auto;
  }
}

/* ===== SP（〜767px）だけ：注釈<p>を中央配置＆文字は左揃え ===== */
@media (max-width:767px) {
  .container-11>p {
    text-align: left;
    /* 文字は左揃え */
    width: min(28em, calc(100% - 32px));
    /* 横幅を少し絞る（中央寄せのため） */
    margin: 0 auto;
    /* ボックス自体を中央に */
    line-height: 1.8;
    /* 既定どおり */
    color: #333
      /* 既定どおり */
  }
}

/* ========== wrapper-12（MEMBER DATA） ========== */
.wrapper-12 {
  --container: 750px;
  --radius: 12px;
  --tab-gap: 8px;
  --pc-left: 2fr;
  --pc-right: 1fr;
  --pc-gap: 0;
  --pc-h: auto;
}

/* コンテナ */
.wrapper-12 .container-12 {
  max-width: var(--pc-w, var(--container));
  margin: 0 auto;
  /* SPは下のメディアクエリで上書き */
  box-sizing: border-box;
}

/* 見出し */
.wrap-12>h2 {
  font: 600 25px "Noto Serif JP", serif;
  text-align: center;
  color: var(--brand);
  margin: 0 0 8px;
}

.wrap-12>h1 {
  font: 400 26px "Noto Sans JP", sans-serif;
  text-align: center;
  margin: 0 0 8px;
}

.wrap-12>p {
  font: 400 16px "Noto Sans JP", sans-serif;
  text-align: center;
  margin: 0 0 4px;
}

.wrap-12>h3 {
  font: 400 14px "Noto Sans JP", sans-serif;
  text-align: center;
  margin: 0 0 16px;
}

.wrapper-12 h1,
.wrapper-12 h3 {
  text-decoration: none;
  border: 0;
}

.area h2 {
  text-decoration: none;
  border: 0;
  font: 600 20px "Noto Serif JP", serif;
  color: #fff;
}

.area p {
  text-decoration: none;
  border: 0;
  font: 400 14px "Noto Serif JP", serif;
  color: #fff;
  line-height: 1.6;
  text-align: justify;
}

/* ========== タブ ========== */

.wrapper-12 .tab {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  width: 77%;
  display: grid;
}

.wrapper-12 .tab+.area {
  margin-top: 0;
}

.wrapper-12 .tab li {
  margin: 0;
}

.wrapper-12 .tab a {
  display: block;
  text-align: center;
  background: #eee;
  padding: 15px 12px;
  text-decoration: none;
  color: inherit;
  background: #e8eaed;
}

.wrapper-12 .tab a.is-active,
.wrapper-12 .tab a[aria-current="true"] {
  background: #fff;
  outline: 2px solid var(--brand);
}

/* タブ列数 */
@media (max-width:767.98px) {
  .wrapper-12 .container-12 {
    padding-left: 0;
    padding-right: 0;
  }

  /* 端まで（下で余白付与） */
  .wrapper-12 .tab {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width:768px) {
  .wrapper-12 .tab {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    max-width: 90%;
  }
}

/* ========== パネル（area） ========== */
/* 枠だけ＆背景なし＆内側余白ゼロ（フルブリード） */
.wrapper-12 .area {
  width: 100%;
  margin: 0 auto;

}

.wrapper-12 .area.is-active {
  display: block;
  animation: memberFade .25s ease forwards;
}

/* 画像は幅いっぱい */
.wrapper-12 .area img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* グリッド内のオーバーフロー対策 */
.wrapper-12 .area>* {
  min-width: 0;
}

/* SP（～767px）：従来の“帯化”を打ち消し、縦だけ少し空ける */
@media (max-width:767.98px) {
  .wrapper-12 .area>div:last-child {
    background: #70c7d8;
    color: inherit !important;
    border-radius: 0 !important;
    margin-top: 12px;
    text-align: left;
    padding: 20px;
  }
}

/* PC（768px～）：可変グリッド（.wrapper-13 相当） */
@media (min-width:768px) {
  .wrapper-12 .area.is-active {
    display: grid !important;
    /* element.style 対策 */
    grid-template-columns: var(--pc-left) var(--pc-right);
    gap: var(--pc-gap);
    align-items: stretch;
    /* フルブリードなので stretch */
    height: var(--pc-h);
  }

  /* 左カラム（画像）/ 右カラム（テキスト）ともに面いっぱい */
  .wrapper-12 .area>div:first-child,
  .wrapper-12 .area>div:first-child img {
    width: 100%;
    height: 100%;
  }

  .wrapper-12 .area>div:first-child img {
    object-fit: cover;
  }

  .wrapper-12 .area>div:last-child {
    background: #70c7d8;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 20px;

  }
}

/* ふわっと表示 */
@keyframes memberFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* SPの横余白（全体のパツパツ回避／タブは端まで、パネルは枠内） */
@media (max-width:767.98px) {
  .wrapper-12 .container-12 {
    padding-inline: clamp(12px, 4vw, 20px);
  }
}

/* 下側=0 に */
.wrapper-12 .tab+.area {
  margin-top: 0;
}

/* 念のため上側=0 */

/* --- PCではタブを折り返さず1行固定 --- */
@media (min-width: 768px) {
  .wrapper-12 .tab {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow-x: visible;
    /* はみ出しそうなら auto に */
  }

  .wrapper-12 .tab li {
    flex: 0 0 auto;
  }

  /* アイテムを縮めない */
  .wrapper-12 .tab a {
    white-space: nowrap;
  }

  /* ラベル内も折り返し禁止 */
}

/* （オプション）見た目も“連結”にしたいとき：枠を一体化 */
@media (min-width: 768px) {
  .wrapper-12 .tab a.is-active {
    outline: 0;
    background: #fff;
    border: 2px solid var(--brand);
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .wrapper-12 .area {
    border: 2px solid var(--brand);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* すべて .wrapper-12 内だけに適用 */
.wrapper-12 {
  --tab-h-pc: 52px;
}

/* ← PCタブの高さ（お好みで） */

@media (min-width: 768px) {

  /* タブ行を1行・等分・高さそろえ */
  .wrapper-12 .tab {
    display: flex;
    /* grid → flex に */
    flex-wrap: nowrap;
    /* 折り返しなし */
    gap: var(--tab-gap, 8px);
    align-items: stretch;
    /* 各liの高さをそろえる */
    width: 100%;
    /* 77%指定を維持したい場合は width:77% に */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
  }

  .wrapper-12 .tab li {
    flex: 1 1 0;
    /* ★等幅化（同じ配分） */
    display: flex;
    /* 子のaを縦伸ばしさせるため */
  }

  .wrapper-12 .tab a {
    /* 既存から置き換え（高さ均一＆中央寄せ） */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: var(--tab-h-pc);
    /* ★高さ統一 */
    background: #eee;
    padding: 0 28px;
    /* 高さはmin-heightで管理するので上下パディング0 */
    text-decoration: none;
    color: inherit;
    /* ラベルを1行固定にするなら下3行を有効化（はみ出し時は…） */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* アクティブ見た目（必要なら併用） */
  .wrapper-12 .tab a.is-active,
  .wrapper-12 .tab a[aria-current="true"] {
    background: #fff;
    outline: 2px solid var(--brand);
  }
}

/* PCタブ寸法（必要に応じて変えてOK） */
.wrapper-12 {
  --tab-h-pc: 56px;
  /* ★PCタブの高さ */
  --tab-gap: 1px;
  /* タブ間余白 */
  --tab-row-width: 77%;
  /* タブ行の横幅（100%にすれば全幅） */
}

@media (min-width: 768px) {

  /* タブ行：5等分。折返し・スクロールなしで必ず1行に収める */
  .wrapper-12 .tab {
    display: grid !important;
    /* 既存のgrid/flexを上書き */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* ★5個を均等幅 */
    width: var(--tab-row-width);
    margin: 12px 0 0;
    /* 中央寄せ＆上は密着 */
    overflow: hidden;
    /* 念のためスクロール出さない */
  }

  .wrapper-12 .tab li {
    /* グリッドの各セルをタブ全体の高さに合わせるため */
    min-width: 0;
    /* 省略記号のために必要 */
  }

  /* タブボタン：高さを統一。中央揃え＆1行で省略表示 */
  .wrapper-12 .tab a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--tab-h-pc);
    /* ★高さをここで調整 */
    padding: 0 24px;
    /* 横の余白はお好みで */
    box-sizing: border-box;
    white-space: nowrap;
    /* 折返し禁止 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 長いラベルは「…」で省略 */
  }
}

/* アニメーションを少しだけ滑らかに（任意） */
.wrapper-12 .tab a {
  transition: background-color .15s ease, color .15s ease;
}

/* ホバー／キーボードフォーカス時：プレビュー色 */
.wrapper-12 .tab a:hover,
.wrapper-12 .tab a:focus-visible {
  background: var(--tab-hover-bg, #959EE5);
  color: #fff;
}

/* 選択中（.is-active / aria-current） */
.wrapper-12 .tab a.is-active,
.wrapper-12 .tab a[aria-current="true"] {
  background: var(--tab-active-bg, #fff);
  color: var(--tab-active-fg, inherit);
  outline: 2px solid var(--brand);
  /* 既存の見た目を維持 */
}

/* 選択中のときはホバーで色が変わらないように固定 */
.wrapper-12 .tab a.is-active:hover,
.wrapper-12 .tab a[aria-current="true"]:hover,
.wrapper-12 .tab a.is-active:focus-visible,
.wrapper-12 .tab a[aria-current="true"]:focus-visible {
  background: var(--tab-active-bg, #fff);
  color: var(--tab-active-fg, inherit);
}


/* ===== 基本（SP） ===== */
.wrap-13-1,
.wrap-16-1 {
  background-color: #70c7d8;
  padding: 20px;
  color: #fff;
  text-align: center;
}

.wrap-13-1>h2,
.wrap-16-1>h2,
.wrap-18-1>h2 {
  font: 400 15px "Noto Sans JP", sans-serif;
  margin-top: 20px;
  text-align: center;
}

.wrap-13-1>h1,
.wrap-16-1>h1 {
  margin-top: 16px;
  font: 600 24px "Noto Serif JP", serif;
}

.wrap-13-1>p,
.wrap-16-1>p {
  width: 95%;
  font: 400 15px "Noto Sans JP", sans-serif;
  margin: 25px auto;
  line-height: 1.8;
  text-align: left;
}

/* 画像（SPはそのまま可変） */
.wrap-13-2 img,
.wrap-16-2 img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

/* 下段ブロック */
.wrap-13-3,
.wrap-16-3 {
  background-color: #fff;
  padding: 25px 0;
  text-align: center;
  border-radius: 0 0 20px 20px
}

.wrap-13-3>h3,
.wrap-16-3>h3 {
  font: 600 16px "Noto Serif JP", serif;
  color: #70c7d8;
}

.wrap-13-3>h2,
.wrap-16-3>h2 {
  font: 600 19px "Noto Serif JP", serif;
}

.wrap-13-3>h1,
.wrap-16-3>h1 {
  font: 400 20px "Noto Sans JP", sans-serif;
}

.wrap-13-3>p,
.wrap-16-3>p {
  font: 400 14px "Noto Sans JP", sans-serif;
  line-height: 1.8;
  width: 80%;
  margin: 30px auto;
  text-align: justify;
}

/* ===== PC（768px〜） ===== */
@media (min-width: 768px) {

  .wrap-13,
  .wrap-16 {
    display: flex;
    align-items: stretch;
    /* 高さを揃える */
    gap: 0;
    /* 余白なしでピッタリ */
  }

  /* テキスト:画像 = 40:60 */
  .wrap-13-1,
  .wrap-16-1 {
    flex: 2 1 0;
    padding: 40px 30px;
    /* PC時の内側余白 */
  }

  .wrap-13-2,
  .wrap-16-2 {
    flex: 3 1 0;
  }

  .wrap-13-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 余白ゼロでフィット（必要に応じてトリミング） */
  }

  /* wrap-3-1 の画像（下段の横幅調整） */
  .wrap-3-1 img {
    width: 50%;
    height: auto;
    margin: 0 auto;
  }
}

/* デフォルト（SP用） */
.wrap-13-3 img {
  display: block;
  margin: 20px auto;
  width: 327px;
  /* 画面幅にフィット */
  height: auto;
}

/* PC用（768px以上） */
@media (min-width: 768px) {

  .wrap-13-3 img {
    width: 500px;
    /* PC時は大きく表示したいサイズを指定 */
    height: auto;
    /* 比率は維持 */
    max-width: none;
    /* max-width指定を解除 */
  }
}

.pair-14-15 {
  max-width: 750px;
  margin: 0 auto;
  /* 念のための保険（親要素でのはみ出しを抑制） */
  overflow-x: clip;
}

/* ブロック内の全画像を安全に可変 */
.pair-14-15 img {
  max-width: 100%;
  height: auto;
}

/* =======================
   SUPPORT 01（wrapper-14）
   ======================= */
.wrapper-14 .container-14 {
  max-width: 900px;
  margin: 0 auto;
  /* 狭幅で左右余白を自動的に小さく */
  padding: clamp(24px, 6vw, 48px) clamp(12px, 4vw, 32px);
  background: #e0f6fb;
  border-radius: 0 0 20px 20px;
  box-sizing: border-box;
}

.wrapper-14 .wrap-14-1 {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.wrapper-14 .wrap-14-left {
  flex: 1 1 280px;
  min-width: 280px;
}

.wrapper-14 .wrap-14-right {
  flex: 2 1 320px;
  min-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 見出し・本文（SP中央） */
.wrapper-14 .wrap-14-left>h2,
.wrapper-14 .wrap-14-left>h1,
.wrapper-14 .wrap-14-2 p {
  text-align: center;
  margin: 0 auto 16px;
}

.wrapper-14 .wrap-14-left>h2 {
  font: 600 19px "Noto Serif JP", serif;
  color: #70c7d8;
}

.wrapper-14 .wrap-14-left>h1 {
  font: 400 24px "Noto Sans JP", sans-serif;
}

.wrapper-14 .wrap-14-2 p {
  font: 400 14px "Noto Sans JP", sans-serif;
  line-height: 1.7;
  width: 88%;
  text-align: justify;
}

/* ← 固定幅だった281pxを可変に */
.wrapper-14 .wrap-14-2>img {
  display: block;
  width: min(281px, 100%);
  height: auto;
  margin: 8px auto;
}

/* 右画像（SPは312x296相当の比率で収める） */
.wrapper-14 .wrap-14-right picture {
  display: flex;
  justify-content: center;
  width: 100%;
}

.wrapper-14 .wrap-14-right img {
  display: block;
  width: min(312px, 100%);
  aspect-ratio: 39 / 37;
  /* 312:296 */
  height: auto;
  object-fit: cover;
  /* 収まり方を一貫してcoverに */
}


/* PC(>=750px)：テキスト左寄せ／画像は324x243相当（≈4:3） */
@media (min-width: 750px) {

  .wrapper-14 .wrap-14-left>h2,
  .wrapper-14 .wrap-14-left>h1,
  .wrapper-14 .wrap-14-2 p {
    text-align: left;
    margin-left: 0;
    width: auto;
  }

  .wrapper-14 .wrap-14-right {
    justify-content: flex-start;
  }

  .wrapper-14 .wrap-14-right picture {
    justify-content: flex-start;
  }

  .wrapper-14 .wrap-14-right img {
    width: min(324px, 100%);
    aspect-ratio: 4 / 3;
    /* 324:243 ≒4:3 */
    height: auto;
  }

  .wrapper-14 .wrap-14-2>img {
    margin-left: 0;
    margin-right: auto;
  }
}

/* ===========================
   Section wrapper
=========================== */
.wrapper-15 .container-15 {
  max-width: 900px;
  margin: 0 auto;
  /* 狭幅で左右余白を自動的に小さく */
  padding: clamp(24px, 6vw, 48px) clamp(12px, 14vw, 32px);
  background: #e8eaed;
  border-radius: 0 0 20px 20px;
  box-sizing: border-box;
}

/* ===========================
   Layout
=========================== */
.wrap-15-1 {
  display: flex;
  flex-wrap: wrap;
}

.wrap-15-left {
  flex: 1 1 300px;
  min-width: 280px;
}

/* SP：常に2列 */
.wrap-15-right {
  flex: 2 1 320px;
  min-width: 320px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* プレースホルダーは見えないように */
.item-15.is-placeholder {
  visibility: hidden;
}

/* ===========================
   Headings & text（SP中央）
=========================== */
.wrap-15-left>h2 {
  width: 90%;
  font: 600 19px "Noto Serif JP", serif;
  margin: 20px auto 0;
  text-align: center;
  color: #70c7d8;
}

.wrap-15-left>h1 {
  margin: 16px 0 0;
  text-align: center;
  font: 400 24px "Noto Sans JP", sans-serif;
}

.wrap-15-2>p {
  width: 86%;
  font: 400 14px "Noto Sans JP", sans-serif;
  margin: 16px auto;
  line-height: 1.8;
  text-align: justify;
}

/* ===========================
   Cards（共通）
=========================== */
.item-15 {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #eee;
}

/* 非アイコン版：従来の全面画像 */
.item-15:not(.icon-15) img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* オーバーレイ文字（全面画像用） */
.ov-15 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 8px;
  margin: 0;
  color: #fff;
  font: 400 14px/1.4 "Noto Sans JP", sans-serif;
  text-align: center;
  /* 文字の視認性アップ（薄い画像対策） */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ホバー拡大（非アイコンのみ） */
.item-15:hover:not(.icon-15) img {
  transform: scale(1.03);
  transition: transform .25s ease;
}

/* ===========================
   PC(>=750px)
=========================== */
@media (min-width: 750px) {

  /* 見出し・本文は左寄せへ */
  .wrap-15-left>h2,
  .wrap-15-left>h1,
  .wrap-15-2>p {
    text-align: left;
    margin-left: 0;
    width: auto;
  }

  /* 固定グリッド切替：どちらか一方のクラスをwrap-15-rightに付与 */
  .wrap-15-right {
    --gap: 12px;
    --ratio: 4/3;
    gap: var(--gap);
    justify-content: center;
    /* 左寄せなら flex-start */
    align-content: start;
  }

  /* 3×4（列3固定） */
  .wrap-15-right.grid-3x4 {
    --colw: 100px;
    /* 調整可 */
    grid-template-columns: repeat(3, var(--colw));
  }

  /* 4×3（列4固定） */
  .wrap-15-right.grid-4x3 {
    --colw: 150px;
    /* 調整可 */
    grid-template-columns: repeat(4, var(--colw));
  }

  /* カードは列幅に合わせて同一サイズに */
  .wrap-15-right .item-15 {
    width: var(--colw);
    aspect-ratio: var(--ratio);
    background: #eee;
  }

  /* 非アイコン版：画像をカードいっぱいに */
  .wrap-15-right .item-15:not(.icon-15)>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 可変パディング（必要時のみ） */
  .wrapper-15 .container-15 {
    --w15-extra: 0px;
    padding-bottom: calc(var(--w15-extra));
  }
}

/* ===========================
   PC(>=900px)：可読性微調整
=========================== */
@media (min-width: 900px) {
  .ov-15 {
    font-size: 12px;
    line-height: 1.35;
  }

  /* 非アイコン版のみ影響（アイコンのサイズ計算に干渉しない） */
  .wrapper-15 .wrap-15-right .item-15:not(.icon-15) img {
    aspect-ratio: auto;
  }
}

/* ===========================
   アイコン版（枠＋小アイコン 49×44固定）
   .item-15 に .icon-15 を付けた要素に適用
=========================== */
.item-15.icon-15 {
  /* 枠をsolidで */
  background: #fff;
  border-radius: 8px;

  /* アイコン＆テキストを中央揃え */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 12px;

  /* SPでも高さを安定（PCは既存の var(--ratio) が効く） */
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  overflow: hidden;
  /* 角丸と整合 */
}

/* アイコン画像サイズ固定（SVG/PNGどちらでもOK） */
.item-15.icon-15>img,
.item-15.icon-15>svg {
  width: 44px;
  height: 40px;
  display: block;
  flex: 0 0 auto;
  /* 収縮させない保険 */
  object-fit: contain;
  /* PNG用の歪み防止。SVGには影響しない */
}

/* アイコン版ではテキストを通常フローに（オーバーレイ無効化） */
.item-15.icon-15 .ov-15 {
  position: static;
  inset: auto;
  padding: 0;
  margin: 0;
  color: #333;
  font: 500 10px/1.5 "Noto Sans JP", sans-serif;
  text-shadow: none;
  text-align: center;
}

/* アイコン版のホバー（枠色と影の軽いフィードバック） */
.item-15.icon-15:hover {
  border-color: #5fb6c8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* ===== 狭幅端末向けの“最終防衛ライン” ===== */
/* iPhone SE / Z Flip等（≤360px）での横スクロール根絶 */
@media (max-width: 360px) {

  .wrapper-14 .wrap-14-left,
  .wrapper-14 .wrap-14-right,
  .wrap-15-left,
  .wrap-15-right {
    min-width: 0;
    /* ← 固定下限を解除 */
    flex-basis: 100%;
    /* ← 1カラム幅にして収める */
  }

  /* 画像は確実に枠内へ */
  .wrapper-14 .wrap-14-right img {
    width: 100%;
  }

  /* グリッドのギャップも少し詰めるとバランス良い */
  .wrap-15-right {
    gap: 10px;
  }
}



/* コンテナ（必要に応じて） */
.wrapper-16 .container-16 {
  max-width: 750px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── 上段（SP基準：縦並び） ── */
.wrap-16 {
  display: block;
}

.wrap-16-1 {
  padding: 20px 16px;
}

.wrap-16-1> :first-child {
  margin-top: 0;
}

.wrap-16-1> :last-child {
  margin-bottom: 0;
}

.wrap-16-2 {
  position: relative;
  margin-top: 0;
  /* SPはテキスト直下にピッタリ */
}

.wrap-16-2 picture {
  display: block;
}

.wrap-16-2 img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 下段（テキスト＋横長画像） ── */
.wrap-16-3 {
  text-align: center;
}

.wrap-16-3 h3,
.wrap-16-3 h2,
.wrap-16-3 h1,
.wrap-16-3 p {
  margin-left: auto;
  margin-right: auto;
}

.wrap-16-3 picture {
  display: block;
  margin: 16px auto 0;
  /* 見出し群の下に配置 */
}

.wrap-16-3 img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── セクション共通の下余白（サイト全体で使っている場合の継続） ── */
section[class^="wrapper-"],
section[class*=" wrapper-"] {
  margin-block-end: clamp(24px, 4vw, 64px);
}

section[class^="wrapper-"]> :first-child {
  margin-top: 0;
}

section[class^="wrapper-"]> :last-child {
  margin-bottom: 0;
}

/* wrapper-0 だけ上下余白ゼロ（他所互換のため残し） */
section.wrapper-0 {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

section.wrapper-0>.wrap-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== PC（768px〜） ===== */
@media (min-width: 768px) {

  /* 上段：左右40:60、左右の高さを完全一致 */
  .wrap-16 {
    display: flex;
    align-items: stretch;
    /* 高さをそろえる */
    gap: 0;
  }

  .wrap-16-1 {
    flex: 0 0 40%;
    padding: 40px 30px;
    margin: 0;
    overflow: hidden;
    /* 子要素の下marginがはみ出さない保険 */
  }

  .wrap-16-2 {
    flex: 0 0 60%;
    margin: 0;
    position: relative;
    min-height: 1px;
    /* Safari高さ計算の保険 */
  }

  /* 上段右画像：親の高さに“カバー”でフィット（トリミング許容） */
  .wrap-16>.wrap-16-2 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 下段の横長画像だけ 680×149 に固定（中央寄せ） */
  .wrap-16-3 picture {
    width: 680px;
    aspect-ratio: 680 / 149;
    margin: 24px auto 0;
  }

  @supports not (aspect-ratio: 1) {
    .wrap-16-3 picture {
      height: 149px;
    }

    .wrap-16-3 picture>img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .wrap-16-3 picture>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 680×149の枠に収める */
    display: block;
  }
}

/* ===== 極小端末での隙間ゼロを確実化（〜767.98px） ===== */
@media (max-width: 767.98px) {

  /* テキスト直下と右画像の隙間を確実にゼロに */
  .wrapper-16 .wrap-16-2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .wrapper-16 .wrap-16-1> :last-child {
    margin-bottom: 0 !important;
  }

  .wrapper-16 .wrap-16-1 {
    overflow: hidden;
    /* マージン相殺対策の保険 */
  }
}

/* ===== SP（〜767.98px）で下段画像を 328×72 に固定 ===== */
@media (max-width: 767.98px) {
  .wrap-16-3 picture {
    width: 328px;
    aspect-ratio: 328 / 72;
    margin: 16px auto 0;
    /* 中央寄せ */
    display: block;
  }

  @supports not (aspect-ratio: 1) {
    .wrap-16-3 picture {
      height: 72px;
    }

    /* 古いブラウザ向け */
  }

  .wrap-16-3 picture>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 枠に収める（トリミングなし） */
    display: block;
  }
}

.wrap-17-1>h2,
.wrap-17-1>h1,
.wrap-18-1>h1,
.wrap-19-1>h1,
.wrap-19-1>h2,
.wrap-20-1>h2 {
  text-align: center;
}

.wrap-17-1>p {
  width: 98%;
  font: 400 14px "Noto Sans JP", sans-serif;
  margin: 25px auto;
  line-height: 1.8;
  text-align: justify;
}

.wrap-17-1>h1 {
  margin: 25px 0;
  text-align: center;
  font: 400 24px "Noto Sans JP", sans-serif;
}

.wrap-17-1>h2,
.wrap-20-1>h2 {
  width: 90%;
  font: 600 19px "Noto Serif JP", serif;
  margin: 31px auto 0;
  padding-top: 40px;
  text-align: center;
  color: #70c7d8;
}

.wrap-17-1 {
  display: flex;
  flex-wrap: wrap;
}

.container-17 {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 2rem;
  background-color: #e8eaed;
  border-radius: 0 0 20px 20px;
}

/* デフォルトはSP版：縦並び */
.wrap-17-1 {
  display: block;
}

/* PC版（768px以上） */
@media (min-width: 768px) {
  .wrap-17-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 左右50:50 */
    column-gap: 30px;
    align-items: start;
    /* 左カラムは上揃え */
  }

  /* 左カラムに配置する要素 */
  .wrap-17-1 h2,
  .wrap-17-1 h1,
  .wrap-17-1 p {
    grid-column: 1;
  }

  /* 右カラムの画像だけ中央配置 */
  .wrap-17-1 .item-17 {
    grid-column: 2;
    grid-row: 1 / span 3;
    /* 左側の高さに合わせる */
    align-self: center;
    /* 縦方向の中央 */
    justify-self: center;
    /* 横方向の中央 */
  }

  .wrap-17-1 .item-17 img {
    width: 100%;
    height: auto;
    display: block;
  }

  .wrap-17-1 h1 {
    margin: 0 0 0 0;
  }
}

@media (min-width: 768px) {

  .wrap-17-1 h2,
  .wrap-17-1 h1 {
    text-align: left;
    margin-left: 0;
  }
}

.wrap-18-1>h1,
.wrap-20-1>h1 {
  width: 90%;
  font: 400 26px "Noto Serif JP", serif;
  margin: 20px auto 0;
  text-align: center;
}

/* ========== wrapper-18：動画ブロック（SP優先） ========== */
.wrapper-18 {
  margin-block: clamp(20px, 6vw, 48px);
}

.container-18 {
  max-width: var(--pc-w, 750px);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.wrap-18-1 {
  text-align: center;
}

/* 見出し（既存フォント設定に干渉しない） */
.wrap-18-1>h2 {
  margin: 0 0 6px;
  color: var(--brand, #70c7d8);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.wrap-18-1>h1 {
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}

/* 動画：16:9の比率でレスポンシブ表示 */
.item-18 {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* 主要ブラウザ対応 */
  background: #000;
  /* 読み込み前の背景 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06));
}

.item-18 .v18 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ポスター/動画ともトリミングでフィット */
  background: #000;
  outline: none;
  border: 0;
}

/* PC（768px〜）：少しゆとりあるタイポに */
@media (min-width: 768px) {
  .wrap-18-1>h2 {
    margin-bottom: 8px;
  }

  .wrap-18-1>h1 {
    margin-bottom: 16px;
  }
}

/* =========================================================
   VOICE（wrapper-19） / PRICE（wrapper-20）
   Stack Overlap：SPのみ20が19にかぶさる
   ※このブロックをCSSの一番最後に「丸ごと差し替え」
   --------------------------------------------------------- */

/* ------- 見出し（据え置き） ------- */
/* =========================================================
   VOICE（wrapper-19） / PRICE（wrapper-20）
   SPだけ：20がスクロールで19に徐々にかぶさる（安定版）
   ※ これを CSS の一番最後に「まるっと差し替え」
   ========================================================= */

/* ------- 見出し（据え置き） ------- */
.wrap-19-1>h2 {
  width: 90%;
  font: 600 19px "Noto Serif JP", serif;
  margin: 20px auto 0;
  text-align: center;
  color: #fff;
  padding-top: 25px;
}

.wrap-19-1>h1 {
  margin: 6px 0 20px;
  text-align: center;
  font: 400 24px "Noto Sans JP", sans-serif;
}

.wrap-20-1>h3 {
  margin: 6px 0 20px;
  text-align: center;
  font: 400 24px "Noto Sans JP", sans-serif;
}

/* ------- VOICE：カード並び（SP基準） ------- */
.wrap-19-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 0 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.wrap-19,
.wrap-19-sec,
.wrap-19-thi {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wrap-19-3>div>p:first-of-type {
  margin: 0;
  font: 400 14px "Noto Sans JP", sans-serif;
  line-height: 1.8;
  color: #333;
  text-align: justify;
}

.profile-19 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-19 .aim-19 {
  margin: 0;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.profile-19 .aim-19 img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.profile-19 p {
  margin: 0;
  font: 600 13px "Noto Sans JP", sans-serif;
  color: #555;
  text-align: left;
}

/* ------- VOICE 背景（動画/オーバーレイ） ------- */
.wrapper-19 {
  position: relative;
  background: #fbd2ac;
}

.wrapper-19 .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  opacity: var(--bg-video-opacity, 1);
}

.wrapper-19::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .10);
  z-index: 1;
}

.container-19 {
  position: relative;
  z-index: 2;
}

/* ------- PRICE：本文・カード ------- */
.wrap-20-1>p {
  width: 78%;
  font: 400 14px "Noto Sans JP", sans-serif;
  margin: 25px auto;
  line-height: 1.8;
  text-align: justify;
}

.wrap-20-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 0 16px;
  max-width: 900px;
  margin: 0 auto;
}

.wrap-20,
.wrap-20-sec {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.profile-20 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.profile-20 .aim-20 {
  width: 40px;
  height: 40px;
}

.profile-20 .aim-20 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-20 p {
  margin: 0 0 2px;
  font: 400 14px "Noto Sans JP", sans-serif;
  color: #555;
  line-height: 1.3;
}

.profile-20 h1 {
  font: 600 18px "Noto Serif JP", serif;
  margin: 0 0 2px;
  line-height: 1.2;
}

.profile-20 h2 {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1;
  color: #000;
}

.profile-20 h2 .price {
  font-size: 36px;
  line-height: 1;
}

.profile-20 h2 .unit {
  font-size: 16px;
}

.wrap-20-img {
  margin-top: 30px;
  text-align: center;
}

.wrap-20-img img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ---- PC（768px〜）：常にフラット ---- */
@media (min-width:768px) {
  .wrap-19-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 25px;
  }

  .wrap-20-2 {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
  }

  .wrap-20,
  .wrap-20-sec {
    width: 228px;
    min-height: 213px;
    margin: 0;
    flex-shrink: 0;
  }

  .wrap-20-img img {
    width: 356px;
    height: 117px;
    object-fit: cover;
  }

  .stack-overlap>.wrapper-19::after {
    height: 0 !important;
  }

  /* スペーサ無効化 */
  .stack-overlap>.wrapper-19 {
    padding-bottom: 0 !important;
  }

  .stack-overlap>.wrapper-20 {
    transform: none !important;
    /* 平常表示に戻す */
  }
}

/* ---- SP（〜767.98px）：確実にオーバーラップ（崩れない版） ---- */
@media (max-width:767.98px) {

  /* 親：切り取り/積層の事故を遮断 */
  .stack-overlap {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  /* 19：見えないスペーサで実レイアウトだけ確保（相殺しない） */
  .stack-overlap>.wrapper-19 {
    overflow: visible !important;
  }

  .stack-overlap>.wrapper-19::after {
    content: "";
    display: block;
    height: var(--overlap-sp) !important;
  }

  /* 20：translateYで見た目だけ引き上げ（grid/flexでも崩れない） */
  .stack-overlap>.wrapper-20 {
    position: relative !important;
    /* スタッキング確保 */
    z-index: 3 !important;
    /* 前面へ */
    /* 既存の位置指定をリセットしてから translate に統一 */
    top: auto !important;
    margin-top: 0 !important;
    transform: translateY(calc(-1 * var(--overlap-sp))) !important;
    background: #fff;
    /* 透け防止 */
    overflow: visible !important;
  }
}

/* アニメ控えめ指定に配慮（任意） */
@media (prefers-reduced-motion:reduce) {
  .wrapper-19 .bg-video {
    display: none;
  }

  .wrapper-19 {
    background: #f6f6f6;
  }
}




/* PC（768px〜）：フラット表示 */
@media (min-width:768px) {
  .stack-overlap>.wrapper-19::after {
    height: 0 !important;
  }

  .stack-overlap>.wrapper-19 {
    padding-bottom: 0 !important;
  }

  .stack-overlap>.wrapper-20 {
    transform: none !important;
  }
}

/* SP（〜767.98px）：20が19に確実にかぶさる */
@media (max-width:767.98px) {
  .stack-overlap>.wrapper-19 {
    overflow: visible !important;
  }

  /* 見えないスペーサで実レイアウトを確保 */
  .stack-overlap>.wrapper-19::after {
    content: "";
    display: block;
    height: var(--overlap-sp) !important;
  }

  /* 20は見た目だけ上へ（フローは壊さない） */
  .stack-overlap>.wrapper-20 {
    position: relative !important;
    z-index: 3 !important;
    /* 19より前面へ */
    background: #fff;
    /* 透け防止 */
    transform: translateY(calc(-1 * var(--overlap-sp))) !important;
    will-change: transform;
    overflow: visible !important;
  }
}

/* ===== Stack Overlap：最終勝ちハードニング（CSSの一番最後に追加） ===== */

/* 1) 変数をブリッジ（どちらの記法でも動く） */
.stack-overlap {
  --overlap-sp: 32px;
  /* ← 重なり量はここで調整 */
  --ov: var(--overlap-sp);
  /* 旧ブロック向けの互換 */
  --ovt: calc(-1 * var(--overlap-sp));
  /* 旧ブロック向けの互換 */
}

/* 2) 親子の積層と切り取りを確実に解除 */
.stack-overlap {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.stack-overlap>.wrapper-19,
.stack-overlap>.wrapper-20 {
  margin: 0 !important;
  /* 全体の汎用マージンを無効化 */
  overflow: visible !important;
}

/* 3) PCは常にフラット */
@media (min-width:768px) {
  .stack-overlap>.wrapper-19 {
    padding-bottom: 0 !important;
  }

  .stack-overlap>.wrapper-20 {
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* 4) SPだけオーバーラップ（transform基準／確実に前面へ） */
@media (max-width:767.98px) {

  /* スペーサは ::after と padding の二重防止（旧CSSの ::after を無効化） */
  .stack-overlap>.wrapper-19::after {
    content: "";
    height: 0 !important;
    display: block;
  }

  .stack-overlap>.wrapper-19 {
    padding-bottom: var(--overlap-sp) !important;
  }

  .stack-overlap>.wrapper-20 {
    position: relative !important;
    z-index: 3 !important;
    /* 背景動画やオーバーレイより前面 */
    background: #fff;
    /* 透け防止 */
    transform: translateY(var(--ovt)) !important;
    /* = calc(-1 * var(--overlap-sp)) */
    will-change: transform;
  }

  /* 5) 変換が無効な環境のフォールバック（margin-top） */
  @supports not (transform: translateY(1px)) {
    .stack-overlap>.wrapper-20 {
      margin-top: var(--ovt) !important;
    }
  }
}

/* === Stack Overlap：最終統一版（SPのみ重なり） === */
.stack-overlap {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  --overlap-sp: 32px;
  /* ← 重なり量をここで調整 */
}

.stack-overlap>.wrapper-19,
.stack-overlap>.wrapper-20 {
  margin: 0 !important;
  overflow: visible !important;
}

/* PC（768px〜）：常にフラット */
@media (min-width:768px) {
  .stack-overlap>.wrapper-19::after {
    height: 0 !important;
  }

  .stack-overlap>.wrapper-20 {
    transform: none !important;
  }
}

/* SP（〜767.98px）：20を19へ重ねる（translateY＋見えないスペーサ） */
@media (max-width:767.98px) {

  /* スペーサで“実レイアウトの高さ”だけ確保 */
  .stack-overlap>.wrapper-19::after {
    content: "";
    display: block;
    height: var(--overlap-sp) !important;
  }

  /* 見た目だけ上へ。前面＆透け防止 */
  .stack-overlap>.wrapper-20 {
    position: relative !important;
    z-index: 5 !important;
    background: #fff !important;
    transform: translateY(calc(-1 * var(--overlap-sp))) !important;
    will-change: transform;
  }
}


/* ===== wrapper-21 をスコープ化 ===== */
/* ===== SP（デフォルト：390×592ベース） ===== */
.wrapper-21 .wrap-21-1 img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: 390px;
  /* 通常は実サイズ上限 */
  aspect-ratio: 390 / 592;
  /* CLS対策：SP実比率 */
}

/* ===== PC（768px〜）：750×519に合わせる（トリミングしない） ===== */
@media (min-width: 768px) {
  .wrapper-21 .wrap-21-1 img {
    width: 750px;
    height: auto;
    max-width: 100%;
    aspect-ratio: 750 / 519;
    /* CLS対策 */
    object-fit: contain;
    /* coverによる切り取りを回避 */
  }
}

/* ===== SP（〜767.98px）：上下余白ゼロ＋フルブリードで横幅いっぱい ===== */
@media (max-width: 767.98px) {

  /* セクション自体の上下マージン（全体共通ルールを上書き） */
  section.wrapper-21 {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
  }

  /* 画面端まで広げる（フルブリード） */
  .wrapper-21 {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* コンテナの左右パディングを除去 */
  .wrapper-21 .container-21 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;
    /* 親の幅制限を解除 */
    box-sizing: border-box;
  }

  .wrapper-21 .wrap-21-1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 画像まわりの既定余白を排除＆横幅100vwに */
  .wrapper-21 .wrap-21-1 picture,
  .wrapper-21 .wrap-21-1 img {
    display: block;
    margin: 0;
    width: 100vw;
    /* 画面幅いっぱい */
    max-width: none;
    /* 上の max-width:390px を上書き */
    height: auto;
  }

  /* CLS対策は維持（実比率） */
  .wrapper-21 .wrap-21-1 img {
    aspect-ratio: 390 / 592;
  }
}

/* ===== SP（〜767.98px）だけ：前セクションの下マージンを消す（:has 対応ブラウザ） ===== */
@media (max-width: 767.98px) {
  @supports selector(:has(*)) {

    /* 直前のセクションがあれば、その下マージンを0にする */
    section[class^="wrapper-"]:has(+ section.wrapper-21),
    section[class*=" wrapper-"]:has(+ section.wrapper-21) {
      margin-block-end: 0 !important;
    }
  }
}

/* ===== SP（〜767.98px）：wrapper-20 の“セクション終端”マージンを0に ===== */
@media (max-width: 767.98px) {

  /* セクション共通の margin-block-end を打ち消す */
  section.wrapper-20 {
    margin-block-end: 0 !important;
  }

  /* 念のため最終ブロック周りもゼロ化（クラス名が一致していれば効く） */
  .wrapper-20 .wrap-20-img {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* containerがある場合の保険（無ければ無視されます） */
  .wrapper-20 .container-20 {
    padding-bottom: 0 !important;
  }
}

/* hero と wrapper-0 の間だけ隙間ゼロ */
section.wrapper-hero {
  margin-block-end: 0 !important;
}

section.wrapper-0 {
  margin-block-start: 0 !important;
}

/* ========== wrapper-22 ========== */
/* ========== wrapper-22 ========== */
.wrapper-22 {
  --max-w: 750px;
  --container-pad: 16px;

  /* ヒーロー内テキスト縦位置（%） */
  --kv-center-y-sp: 42%;
  --kv-center-y-pc: 40%;

  /* ヒーローと下枠の重なり量（下画像は使わずCTAブロックに重なりだけ残す） */
  --overlap-sp: 40px;
  --overlap-pc: 48px;
  --seam: 0px;

  /* 安全余白（オーバーレイの内側余白） */
  --safe-gap-sp: 12px;
  --safe-gap-pc: 16px;

  /* カード内パディング／白の見せ幅 */
  --body-pad-x-sp: 16px;
  --body-pad-x-pc: 24px;
  --white-bottom-sp: 12px;
  --white-bottom-pc: 16px;

  /* SP時のCTA狙い幅 */
  --cta-w-sp: 380px;
  /* ← ここだけ 340→380 に拡大 */
  --cta-side-sp: 24px;

  /* PC時のダイヤル行 微調整（必要に応じ数値だけ変更） */
  --dial-ico-x: 0px;
  /* +で右 / -で左 */
  --dial-ico-y: 0px;
  /* +で下 / -で上 */
  --dial-gap-pc: 16px;
  /* アイコンと右列のすき間 */
}

/* ========== レイアウト基本 ========== */
.container-22 {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}

.stack-22 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ========== 上画像（kv-22） ========== */
.kv-22 {
  position: relative;
  z-index: 1;
  width: 390px;
  height: 221px;
  background: none !important;
  box-shadow: none !important;
}

.kv-22>picture,
.kv-22 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kv-22::before,
.kv-22::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

.kv-22 img {
  line-height: 0;
  vertical-align: bottom;
}

/* 画像上テキスト（共通ユーティリティ） */
.o-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: var(--safe-gap-sp);
  box-sizing: border-box;
  pointer-events: none;
}

.o-copy .slot {
  position: absolute;
  max-width: 90%;
  color: #fff;
  line-height: 1.5;
  pointer-events: auto;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.pos-tl {
  top: var(--safe-gap-sp);
  left: var(--safe-gap-sp);
}

.pos-tr {
  top: var(--safe-gap-sp);
  right: var(--safe-gap-sp);
}

.pos-bl {
  bottom: var(--safe-gap-sp);
  left: var(--safe-gap-sp);
}

.pos-br {
  bottom: var(--safe-gap-sp);
  right: var(--safe-gap-sp);
}

.pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* ヒーローの最初のスロット＝中央寄せ＆やや上 */
.wrapper-22 .kv-22-copy .slot:first-child {
  top: var(--kv-center-y-sp);
  left: 50%;
  right: auto;
  bottom: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: min(90%, 640px);
}

.wrapper-22 .kv-22-copy .slot:first-child .title-22,
.wrapper-22 .kv-22-copy .slot:first-child p {
  text-align: center;
  width: auto;
  max-width: 100%;
}

/* タイトル（下線復活対策） */
.o-copy .title-22 {
  margin: 0 0 6px;
  letter-spacing: .12em;
  line-height: 1.1;
  font-size: clamp(18px, 5.5vw, 26px);
  color: #fff;
  text-decoration: none;
  border: 0;
  font: 600 26px "Noto Serif JP", serif;
}

.wrapper-22 h1,
.wrapper-22 h2,
.wrapper-22 h3,
.wrapper-22 .title-22 {
  text-decoration: none !important;
  border: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.wrapper-22 h1::before,
.wrapper-22 h1::after,
.wrapper-22 h2::before,
.wrapper-22 h2::after,
.wrapper-22 h3::before,
.wrapper-22 h3::after,
.wrapper-22 .title-22::before,
.wrapper-22 .title-22::after {
  content: none !important;
}

/* ========== 白背景カード ========== */
.card-22 {
  position: relative;
  z-index: 2;
  width: calc(100% + var(--container-pad) * 2);
  margin-left: calc(var(--container-pad) * -1);
  margin-right: calc(var(--container-pad) * -1);
  background: #fff;
  border-radius: 0;
  overflow: visible;
  margin-top: 0;
  box-shadow: none;
}

/* figureのデフォルト背景を無効化 */
.wrapper-22 figure {
  background: transparent !important;
}

.lower-22 {
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

/* 下画像だけを無効化（直下のみ） */
.wrapper-22 .lower-22>picture,
.wrapper-22 .lower-22>img,
.wrapper-22 .lower-22>picture>img {
  display: none;
}

.lower-22-replace {
  display: block;
}

/* ========== CTA ========== */
.cta-22 {
  width: 100%;
  max-width: 640px;
  margin: calc((var(--overlap-sp) + var(--seam)) * -1) auto 0;
  /* ヒーローに食い込ませる */
  background: #fff;
  padding: 18px 16px 20px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
  border: 1px solid rgba(0, 0, 0, .06);
}

.cta-22-head {
  margin: 10px 0 8px;
  font-weight: 400;
  text-align: center;
  color: #222;
  font: 600 17px "Noto Serif JP", serif;
}

/* ボタン */
.cta-22-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  text-decoration: none !important;
  color: #fff;
  margin: 8px 0 16px;
  transition: transform .05s ease, opacity .2s ease;
  background: linear-gradient(135deg, #1e5eff, #1a9bff);
}

.cta-22-btn:where(:hover, :focus-visible) {
  opacity: .95;
  transform: translateY(-1px);
}

/* アイコンは白丸にせずそのまま */
.cta-22-btn .ico {
  background: transparent;
  border-radius: 0;
  width: auto;
  height: auto;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.cta-22-btn .ico img {
  display: block;
  width: 30px;
  height: 30px;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

.cta-22-btn .label {
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* 電話ブロック（SP既定） */
.cta-22-dial {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px 23px;
  align-items: center;
  padding: 8px 30px 0;
  /* ← SPでは従来どおり */
  color: #222;
  margin: 18px 0px;
}

.cta-22-dial .dial-ico {
  display: grid;
  place-items: start;
}

.cta-22-dial .dial-lead {
  grid-column: 1 / -1;
  font: 600 17px "Noto Serif JP", serif;
  margin-bottom: 10px;
}

.cta-22-dial .dial-num {
  grid-column: 1 / -1;
  text-align: center;
  letter-spacing: .04em;
  text-decoration: none !important;
  color: #000;
  font: 600 23px "Noto Serif JP", serif;
}

.cta-22-dial .dial-hours {
  grid-column: 1 / -1;
  color: #333;
  font: 400 16px "Noto Sans JP", sans-serif;
}

/* ========== カード下側の白の見せ幅（下余白） ========== */
.card-body {
  padding: 50px var(--body-pad-x-sp) var(--white-bottom-sp);
}

.card-body> :last-child {
  margin-bottom: 0;
}

/* ========== PC（768px〜） ========== */
@media (min-width: 768px) {
  .kv-22 {
    width: 750px;
    height: 250px;
  }

  .o-copy {
    padding: var(--safe-gap-pc);
  }

  .wrapper-22 .kv-22-copy .slot:first-child {
    top: var(--kv-center-y-pc);
  }

  .cta-22 {
    margin: calc((var(--overlap-pc) + var(--seam)) * -1) auto 0;
    padding: 45px 20px;
  }

  .cta-22-btn {
    gap: 12px;
    padding: 14px 18px;
  }

  .card-body {
    padding: 50px var(--body-pad-x-pc) var(--white-bottom-pc);
  }

  /* タイトルの上限 */
  .o-copy .title-22 {
    font: 600 26px "Noto Serif JP", serif;
  }
}

/* === SP：CTAを細く中央寄せ ===================== */
@media (max-width: 767.98px) {
  .wrapper-22 .cta-22 {
    width: min(var(--cta-w-sp), calc(100% - var(--cta-side-sp) * 2));
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  }

  .wrapper-22 .cta-22-btn {
    border-radius: 12px;
    padding: 14px 18px;
  }
}

/* === PC：CTAを2列レイアウト ===================== */
@media (min-width: 768px) {
  .wrapper-22 .cta-22 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 10px;
    align-items: start;
  }

  .wrapper-22 .cta-22-head {
    margin: 0;
    text-align: center;
  }

  .wrapper-22 .cta-22-btn {
    width: 100%;
    margin: 0;
  }

  .wrapper-22 .cta-22-head:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .wrapper-22 .cta-22-head:nth-of-type(1)+.cta-22-btn {
    grid-column: 1;
    grid-row: 2;
  }

  .wrapper-22 .cta-22-head:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .wrapper-22 .cta-22-head:nth-of-type(2)+.cta-22-btn {
    grid-column: 2;
    grid-row: 2;
  }

  .wrapper-22 .cta-22-dial {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

/* ▼ PC：ボタンとダイヤルの間を詰める（任意調整） */
@media (min-width: 768px) {
  .wrapper-22 .cta-22 {
    row-gap: 10px;
  }

  .wrapper-22 .cta-22-dial {
    margin-top: 12px;
  }
}

/* === PC：ダイヤル行（見出し | アイコン | 右テキスト塊） ===================== */
@media (min-width: 768px) {
  .wrapper-22 .cta-22-dial {
    /* SPの左65pxパディングをPCでは解除 */
    padding-left: 0;

    /* 左=見出し / 中=アイコン / 右=番号+営業時間（2行） */
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: var(--dial-gap-pc);
    align-items: center;
  }

  /* 左：見出しを第1列に固定 */
  .wrapper-22 .cta-22-dial .dial-lead {
    grid-column: 1;
    text-align: left;
    margin: 0;
    align-self: center;
  }

  /* 中：アイコンを第2列（右テキストの“左横”） */
  .wrapper-22 .cta-22-dial .dial-ico {
    grid-column: 2;
    justify-self: start;
    align-self: center;
    transform: translate(var(--dial-ico-x), var(--dial-ico-y));
  }

  /* 右：番号＋営業時間（2行縦積み）を“ひとかたまり”に */
  .wrapper-22 .cta-22-dial .dial-text {
    grid-column: 3;
    display: flex;
    /* ← display: contents を使わない */
    flex-direction: column;
    justify-content: center;
    /* アイコン高さにセンター合わせ */
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    text-align: left;
  }
}

/* 角丸を使わない（必要なら） */
@media (min-width: 768px) {
  /* ボタン角丸は維持したい場合はこのブロックは削除 or 無視 */
  /* .wrapper-22 .cta-22,
     .wrapper-22 .cta-22-btn{ border-radius: 0; } */
}

/* ▼ PC：高さ揃え＆左パディングを確実に効かせる */
@media (min-width: 768px) {
  .wrapper-22 {
    --dial-left-pad: 60px;
    /* ← 左側の余白。好みで変更 */
    --dial-gap-pc: 12px;
    /* 列間のすき間（任意） */
  }

  .wrapper-22 .cta-22-dial {
    /* 左余白を有効化（以前の0指定を上書き） */
    padding-left: var(--dial-left-pad) !important;

    /* 3列2行のグリッド： lead | ico | right(上段/下段) */
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    grid-template-rows: auto auto;
    /* 1段目=番号 / 2段目=営業時間 */
    column-gap: var(--dial-gap-pc);
    row-gap: 2px;
    /* 行間（任意で調整） */
    align-items: center;
  }

  /* 左：見出し＝2行分を縦センターでまたぐ */
  .wrapper-22 .cta-22-dial .dial-lead {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    /* ← 2行にまたがる */
    align-self: center;
    text-align: left !important;
    margin: 0;
  }

  /* 中：アイコンも2行分で縦センター */
  .wrapper-22 .cta-22-dial .dial-ico {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    /* ← 2行にまたがる */
    justify-self: start;
    align-self: center;
    transform: translate(var(--dial-ico-x, 0px), var(--dial-ico-y, 0px));
  }

  /* 右：番号＝上段 / 営業時間＝下段（縦に2行） */
  .wrapper-22 .cta-22-dial .dial-text {
    display: contents !important;
  }

  /* 子を親グリッドに参加 */
  .wrapper-22 .cta-22-dial .dial-num {
    grid-column: 3 !important;
    grid-row: 1 !important;
    margin: 0;
    text-align: left !important;
    line-height: 1.2;
  }

  .wrapper-22 .cta-22-dial .dial-hours {
    grid-column: 3 !important;
    grid-row: 2 !important;
    margin: 0;
    text-align: left !important;
    line-height: 1.2;
  }

  .wrapper-22 .kv-22-copy .slot:first-child {
    top: var(--kv-center-y-sp);
    left: 50%;
    right: auto;
    bottom: 45%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: min(90%, 640px);
  }
}



/* SP：ヒーローの下2行テキストを1行固定に（折り返し禁止） */
@media (max-width: 767.98px) {

  /* テキスト枠を広げて余裕を作る（90%→100%） */
  .wrapper-22 .kv-22-copy .slot:first-child {
    max-width: 100%;
  }

  /* 各 <p> を1行化。はみ出す分は省略記号で処理 */
  .wrapper-22 .kv-22-copy .slot p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 省略せず全部入れたいならこの行は削除 */
  }
}

/* ===== Simple Footer ===== */
.footer-mini-22 {
  position: relative;
  background: #73c3d0;
  /* 画像の水色に近い色 */
  color: #0b0b0b;
  text-align: center;
  font: 400 14px/1.8 "Noto Sans JP", system-ui, -apple-system, sans-serif;
  padding: 28px 16px 24px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .06) inset;
}

/* センター配置の内容 */
.footer-mini-22-title {
  margin: 0 0 6px;
  font: 600 16px/1.6 "Noto Serif JP", serif;
}

.footer-mini-22-copy {
  margin: 0;
  font-size: 13px;
}

/* ↑ TOP ボタン（丸・上に半分重ねる） */
.footer-mini-22-top {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

.footer-mini-22-top:where(:hover, :focus-visible) {
  filter: brightness(1.1);
}

/* スクロールをなめらかに（任意） */
html {
  scroll-behavior: smooth;
}

/* 端末幅に応じて少しだけ余白調整（任意） */
@media (min-width: 768px) {
  .footer-mini-22 {
    padding: 32px 20px 26px;
  }

  .footer-mini-22-title {
    font-size: 17px;
  }
}

/* ▼ wrapper-22 と footer-mini-22 の間隔をゼロに */
.wrapper-22 {
  margin-bottom: 0;
}

.wrapper-22 .card-22 {
  margin-bottom: 0;
}

/* 念のため下マージンを抑止 */
.footer-mini-22 {
  margin-top: 0;
}

/* 2者が連続する時だけ確実にゼロにしたい場合 */
.wrapper-22+.footer-mini-22 {
  margin-top: 0;
}

/* ===== wrapper-22 と footer-mini-22 を完全に密着させる ===== */

/* 1) セクション側の下余白（padding/margin）をゼロ */
.wrapper-22 {
  --white-bottom-sp: 20px;
  --white-bottom-pc: 20px;
  margin-bottom: 0 !important;
}

.wrapper-22 .card-22,
.wrapper-22 .card-body,
.wrapper-22 figure.lower-22 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ===== フッター密着 + 矢印は境目で半々 + 被り回避＆縦幅拡張 ===== */

/* 調整用（必要に応じて数値だけ変更） */
:root {
  --footer-arrow-size: 40px;
  /* 矢印ボタンの直径 */
  --footer-arrow-gap: 10px;
  /* 矢印とテキストのすき間 */
  --footer-extra-padding: 16px;
  /* さらに縦幅を増やしたい分（0～） */
}


.footer-mini-22 {
  /* セクションと密着 */
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  position: relative;

  /* ←ここがポイント：矢印半分分 + 余白分だけ上パディングを追加 */
  padding-top: calc(var(--footer-arrow-size) / 2 + var(--footer-arrow-gap) + var(--footer-extra-padding));
  /* 既存の左右/下のパディングは好みで（下は少し広めにして縦幅アップ） */
  padding-right: 16px;
  padding-left: 16px;
  padding-bottom: 24px;
}

/* 1px残るケースの保険（不要なら削除可） */
.wrapper-22+.footer-mini-22 {
  margin-top: -1px !important;
}

/* 矢印：境目で半々に重ねる */
.footer-mini-22-top {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--footer-arrow-size);
  height: var(--footer-arrow-size);
  transform: translate(-50%, -50%);
  /* 上下半々の重なり */
  z-index: 20;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* 前セクションに隠れる場合の保険 */
.wrapper-22 {
  position: relative;
  z-index: 0;
}

/* SPだけ：kv-22 を横いっぱいに（コンテナ左右パディングを打消し） */
@media (max-width: 767.98px) {
  .wrapper-22 .kv-22 {
    width: calc(100% + var(--container-pad) * 2);
    margin-left: calc(var(--container-pad) * -1);
    margin-right: calc(var(--container-pad) * -1);
    /* 既存の高さ 221px はそのまま。画像は object-fit: cover でOK */
  }
}

/* ====== 下パディング復活 + 見た目は密着のまま ====== */
/* ===== Z Flip 縦長画面だけの微調整（最小パッチ） =====
   幅が狭く（≤430px）かつ縦長（aspect-ratio < 0.55）だけに適用 */
@media (max-width: 430px) and (aspect-ratio < 0.55) {

  /* 変数だけで全体を少しだけ圧縮 */
  .wrapper-22 {
    --cta-w-sp: 320px;
    /* CTA 横幅を少し細く（340→320） */
    --safe-gap-sp: 10px;
    /* KV内の安全余白を微縮 */
  }

  /* KV とカードの縦方向パディングを少しだけ詰める */
  .wrapper-22 .kv-22 {
    height: 200px;
  }

  /* 221→200 */
  .wrapper-22 .card-body {
    padding-top: 32px;
  }

  /* 50→32 */

  /* 見出し・ボタンの圧縮（行間＆上下マージンだけ） */
  .wrapper-22 .cta-22-head {
    margin: 20px 0 8px;
    font-size: 16px;
  }

  .wrapper-22 .cta-22-btn {
    padding: 12px 14px;
    border-radius: 10px;
    width: 90%;
    margin: auto;
  }

  /* ダイヤル行の詰め（数字はそのまま、上下だけタイトに） */
  .wrapper-22 .cta-22-dial {
    padding-top: 4px;
  }

  .wrapper-22 .cta-22-dial .dial-num {
    line-height: 1.15;
  }

  .wrapper-22 .cta-22-dial .dial-hours {
    line-height: 1.15;
  }
}

/* Z Flip系（幅≤430px & 縦長）だけ、左右の安全余白を少し詰める */
@media (max-width: 430px) and (aspect-ratio < 55/100) {
  .wrapper-22 {
    --cta-side-sp: 8px;
    /* ← 24px → 8px に。実幅の上限 = 100% - 16px */
    --cta-w-sp: 9999px;
    /* 念のため狙い幅の上限も解放（min()で制限されないように） */
  }
}

/* Z Flip系など幅が狭い縦長端末：CTA をもう一段広げる */

@media (max-width: 430px) and (aspect-ratio < 55/100) {
  .wrapper-22 {
    --cta-side-sp: 18px;
    /* ← 広がりすぎたらココを増やす（例: 10〜14px） */
    --cta-w-sp: 9999px;
    /* 任意：上限を解放。数値で固定したいなら下の例へ */
  }
}

/* ===== Stack Overlap：最終版（SPのみ重なり・PCはフラット） ===== */
.stack-overlap {
  /* 重なり量（SP）：20〜48pxくらいで調整 */
  --overlap-sp: 32px;

  /* 互換用（古い書き方を吸収） */
  --ov: var(--overlap-sp);
  --ovt: calc(-1 * var(--overlap-sp));

  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.stack-overlap>.wrapper-19,
.stack-overlap>.wrapper-20 {
  margin: 0 !important;
  /* 全体共通のセクション余白を無効化 */
  overflow: visible !important;
}

/* PC（768px〜）：重なりなし＝常にフラット */
@media (min-width:768px) {
  .stack-overlap>.wrapper-19 {
    padding-bottom: 0 !important;
  }

  .stack-overlap>.wrapper-20 {
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* SP（〜767.98px）：20を19に重ねる */
@media (max-width:767.98px) {

  /* スペーサは padding-bottom で確保（::afterとの二重を無効化） */
  .stack-overlap>.wrapper-19::after {
    content: "";
    display: block;
    height: 0 !important;
  }

  .stack-overlap>.wrapper-19 {
    padding-bottom: var(--overlap-sp) !important;
  }

  .stack-overlap>.wrapper-20 {
    position: relative !important;
    z-index: 3 !important;
    /* 19の背景/動画/オーバーレイより前面 */
    background: #fff;
    /* 透け防止 */
    transform: translateY(var(--ovt)) !important;
    /* = -overlap-sp */
    will-change: transform;
  }

  /* 変換が効かない環境のフォールバック */
  @supports not (transform: translateY(1px)) {
    .stack-overlap>.wrapper-20 {
      margin-top: var(--ovt) !important;
    }
  }
}