@charset "UTF-8";
/*--------------------------------
  せのびゴシック　フォント
--------------------------------*/

@font-face{
  font-family:"Senobi Gothic";
  src:
    url("font/Senobi-Gothic-Regular.woff2") format("woff2"), /* 軽くて速い → 優先 */
    url("font/Senobi-Gothic-Regular.ttf")   format("truetype"); /* fallback */
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.senobi-font{
  font-family:"Senobi Gothic","Noto Sans JP",system-ui,sans-serif;
}


:root{
  --hb-accent:#ff6b6b;
  --hb-z:9999;
  --hb-width:84vw;
  --hb-max:360px;
}

/*--------------------------------
  ハンバーガーメニュー（統合版）
--------------------------------*/
:root{
  --hb-accent:#ff6b6b;
  --hb-size:63px;      /* ボタンサイズ */
  --hb-bar-w:40px;     /* 線の長さ */
  --hb-bar-h:4px;      /* 線の太さ */
  --hb-gap:1px;        /* 三本線の隙間 */
  --hb-z:9999;
  --hb-width:84vw;     /* ドロワー幅 */
  --hb-max:360px;
}

/* ボタン（右上固定） */
#hbBtn.hb{
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  width: var(--hb-size);
  height: var(--hb-size);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: calc(var(--hb-z) + 10); /* 常に最前面 */
}
#hbBtn.hb:focus-visible{ outline: 2px solid var(--hb-accent); outline-offset: 4px; }

/* 三本線 */
#hbBtn.hb .hb__bar{
  width: var(--hb-bar-w);
  height: var(--hb-bar-h);
  background: var(--hb-accent);
  display: block;
  transition: transform .25s ease, opacity .2s ease;
}
#hbBtn.hb .hb__bar + .hb__bar{ margin-top: var(--hb-gap); }

/* 開状態で「×」に変形 */
#hbBtn.hb.is-open .hb__bar:nth-child(1){
  transform: translateY(calc(var(--hb-gap) + var(--hb-bar-h))) rotate(45deg);
}
#hbBtn.hb.is-open .hb__bar:nth-child(2){ opacity: 0; }
#hbBtn.hb.is-open .hb__bar:nth-child(3){
  transform: translateY(calc(-1 * (var(--hb-gap) + var(--hb-bar-h)))) rotate(-45deg);
}

/* 右サイドドロワー */
#hbNav.drawer{
  position: fixed;
  inset: 0 0 0 auto;
  width: min(var(--hb-width), var(--hb-max));
  background: #fff;
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: var(--hb-z);
  box-shadow: -8px 0 24px rgba(0,0,0,.10);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;  /* ハンバーガーにかぶらない余白 */
}
#hbNav.drawer.is-open{ transform: translateX(0); }

#hbNav.drawer .drawer__list{ list-style: none; margin: 0; padding: 0; width: 88%; }
#hbNav.drawer .drawer__link{
  display: block;
  padding: 16px 6px;
  color: var(--hb-accent);
  text-decoration: none;
  font-size: clamp(16px, 2.6vw, 18px);
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#hbNav.drawer .drawer__link:focus-visible{ outline: 2px solid var(--hb-accent); outline-offset: 4px; }

/* マスク */
#hbMask.mask{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  z-index: calc(var(--hb-z) - 1);
  opacity: 0;
  transition: opacity .2s ease;
}
#hbMask.mask.is-show{ opacity: 1; }

/* スクロール固定 */
.body-lock{ overflow: hidden; }

/* ドロワー内の × ボタン */
.drawer__close{
  position:absolute; top:12px; right:12px;
  width:44px; height:44px;
  border:0; background:transparent; cursor:pointer;
  z-index: calc(var(--hb-z) + 20);
}
.drawer__close:focus-visible{ outline:2px solid var(--hb-accent); outline-offset:4px; }
.drawer__close::before,
.drawer__close::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:24px; height:2px; background: var(--hb-accent);
  transform-origin:center;
}
.drawer__close::before{ transform: rotate(45deg); }
.drawer__close::after { transform: rotate(-45deg); }

/* 開いている間はハンバーガーを非表示にして二重表示を防ぐ */
body.hb-open #hbBtn.hb{
  opacity: 0;
  pointer-events: none;
}

/* 省モーション */
@media (prefers-reduced-motion: reduce){
  #hbBtn.hb .hb__bar, #hbNav.drawer, #hbMask.mask{ transition: none; }
}

/*--------------------------------
  トップビュー（統合・重複排除済み）
--------------------------------*/

/* スライダー外枠：SPデフォ（縦カード） */
.short-top-slider{
  --frame:12px;               /* 内側の白フチ（SP） */
  position:relative;
  width:90%;
  max-width:520px;
  margin:28px auto;
  aspect-ratio:9/16;          /* SPは縦長カード */
  background:#fff;
  padding:var(--frame);
  border-radius:20px;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  overflow:hidden;
}

/* スライド（共通） */
.short-slide{
  position:absolute;
  inset:var(--frame);
  opacity:0;
  transition:opacity 1.2s ease, transform 6s ease;
}
.short-slide picture,
.short-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:16px;
}
.short-slide.active{ opacity:1; transform:scale(1.05); }

/* CTA（任意） */
.short-btn{
  display:block;
  width:80%;
  margin:20px auto 8px;
  padding:15px;
  text-align:center;
  background:#ff7b7b;
  color:#fff;
  font-size:18px;
  border-radius:15px;
}

/* ヒーロー見出し（共通） */
.short-hero-title{
  position:absolute;
  z-index:5;
  margin:0;
  color:#1f5b3e;
  font-weight:700;
  text-shadow:0 1px 3px rgb(255 255 255 / 90%);
  pointer-events:none;
  letter-spacing:.06em;
  font-family:"Senobi Gothic","Noto Sans JP",system-ui,sans-serif;
}
.short-hero-title span{ display:block; white-space:nowrap; padding:.1em 0; }

/* ヒーロー見出し（SP：縦書き・右下寄せ） */
@media (max-width:767px){
  .short-hero-title{
    display:flex;
    gap:.2em;
    flex-direction:row-reverse;
    font-size:clamp(18px,6.2vw,28px);
    line-height:1.3;
     inset:6vh auto auto 6vw;
  }
  .short-hero-title span{ writing-mode:vertical-rl; text-orientation:upright; }
}

/* Intro（初回だけ） */
.intro{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:#fff;
  transition:opacity .6s ease, visibility .6s ease;
  opacity:0; visibility:hidden;
}
.js .intro{ opacity:1; visibility:visible; }
.intro-title{
  font-size:clamp(28px,6vw,56px);
  line-height:1.2;
  text-align:center;
  letter-spacing:.02em;
  opacity:0;
  transform:translateY(8px);
  animation:intro-pop .8s ease forwards .2s;
}
@keyframes intro-pop{ to{ opacity:1; transform:translateY(0); } }
.intro.is-hiding{ opacity:0; visibility:hidden; }
body.is-locked{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){
  .intro, .intro-title{ animation:none; transition:none; }
}
@media (max-width:600px){
  .intro .intro-title{
    writing-mode:vertical-rl;
    text-orientation:upright;
    line-height:1.3;
    font-size:28px;
    margin:0;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    animation:none;
  }
}

/* ===== Intro：くすみグリーン＋ロゴ配置（後勝ちパッチ） ===== */
.intro{
  background:#ddead7 !important;   /* くすみグリーン */
  color:#355e3b !important;         /* 文字もサイト基調色に */
  z-index:10050 !important;         /* スマホでHBより前面に */
}

/* タイトルの下にロゴを置く */
.intro-logo{
  display:block;
  width:clamp(120px,22vw,220px);
  height:auto;
  margin:16px auto 0;               /* タイトルとの間を少し空ける */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
}

/* スマホの縦書きレイアウト時もロゴが中央に来るように */
@media (max-width:600px){
  .intro{ display:grid; place-items:center; }
  .intro-inner{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    /* タイトルの縦書き指定は既存のままでOK */
  }
}


/* =========================
　TOP　ファーストビュー
========================= */

/* ===== PC（768px以上）：フチなし＆画像だけズーム ===== */
@media (min-width:768px){
  .short-top-slider{
    /* 既存のサイズ感はキープ（幅・高さ・余白はそのまま） */
    width:calc(100vw - 2cm);
    height:min(84vh, 920px);
    margin:1cm auto;

    /* フチ（内側余白）をなくす */
    --frame:0;
    padding:0;
    background:transparent;      /* ここを白→透明に */
    aspect-ratio:auto;
    max-width:none;

    border-radius:28px;
    box-shadow:0 10px 28px rgba(0,0,0,.10);
    overflow:hidden;             /* 角丸クリップは維持 */
  }

  /* スライドは枠いっぱいに */
  .short-slide{
    inset:0;                     /* ← フチなしなので0 */
    opacity:0;
    /* コンテナは拡大しない（サイズ固定） */
    transition:opacity 1.2s ease;
  }

  /* 画像だけをズームさせる（Ken Burns） */
  .short-slide picture,
  .short-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:inherit;        /* 角丸は外枠と同じ */
    transform:scale(1.06);        /* 初期状態を少し拡大 */
    transform-origin:center center;
    transition:transform 7s ease; /* ゆっくりズーム */
    will-change:transform;
  }

  /* 表示中スライドはさらにじんわり拡大 */
  .short-slide.active img{
    transform:scale(1.12);
  }

  /* ヒーロー見出し（位置は従来どおり） */
  .short-hero-title{
    display:block;
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    font-size:clamp(28px,4.2vw,56px);
    line-height:1.35;
    left:calc(6vw + .5cm);
    top:10vh;
    right:auto;
    bottom:auto;
  }
}

/* =========================
   CTA：英語 | ♥ | 日本語（枠なし）
   ＊PC=横一列固定／SP=縦積み＋ハート上げ
========================= */

/* ベース */
.cta-join{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(30px,4vw,60px); color:var(--short-green,#355e3b);
  background:none; box-shadow:none; flex-wrap:nowrap;  /* ← PCで必ず横並び */
  --hx:0px;  /* ハートのX移動（左=マイナス） */
  --hy:0px;  /* ハートのY移動（上=マイナス） */
}

/* 英語（左） */
.cta-en{
  order:1; flex-shrink:0;
  font-size:clamp(28px,6vw,44px); letter-spacing:.22em; line-height:1.05;
  z-index:2;
}

/* ♥（中央） */
.cta-heart{
  order:2; flex-shrink:0; z-index:1; pointer-events:none; user-select:none;
  width:clamp(150px,26vw,270px);
  transform:translate(var(--hx),var(--hy)) rotate(-6deg);
  opacity:.95;
}

/* 日本語（右・2行） */
.cta-ja{
  order:3; flex-shrink:0; display:inline-block; text-align:right; color:inherit;
  font-size:clamp(30px,6.6vw,42px); line-height:1.2; text-decoration:none;
  z-index:2;
}

/* 下線アニメ（1回だけ） */
.underline-once{
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;
  transition:background-size .6s cubic-bezier(.2,1,.2,1);
}
.underline-once.is-in{ background-size:100% 2px; }
.underline-once:hover{ opacity:.92; }

/* ------ スマホ：横並び（英語左・ハート中央・日本語右2行）----------------------- */
@media (max-width: 767px){
  .cta-join{
    flex-direction: row;
    justify-content: center;          /* 全体中央配置 */
    align-items: flex-start;
    gap: 6vw;
    overflow: hidden;                 /* はみ出し防止 */
  }

  .cta-en{
    flex: 0 1 auto;
    text-align: left;
    transform: translateY(-8px);      /* 英語を少し上へ */
  }

  .cta-heart{
    flex: 0 0 auto;
    width: clamp(120px, 38vw, 180px);
    transform: translate(-10px, -50px) rotate(-6deg);
  }

  /* === 日本語：右寄せ・2行固定・収まるよう調整 === */
  .cta-ja{
    flex: 0 1 auto;                   /* ← 縮まるけど消えない */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
    line-height: 1.28;
    word-break: keep-all;
    white-space: normal;
    max-width: 35vw;                  /* ← はみ出し防止で右端に収める */
  }

  .cta-ja .ja-line{
    display: block;
  }
}
/* ==== SPだけ：グリッドで三角配置 ==== */
@media (max-width: 767px){
  /* 全体：3×3グリッドにして配置を指定 */
  .cta-join{
    display:grid;               /* flex→gridに切替 */
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "en   .     ."
      ".    heart ."
      ".    .     ja";
    gap: 10vw;                  /* すきま（好みで） */
    align-items: center;
    justify-items: center;
  }

  /* 左上：英語 */
  .cta-en{
    grid-area: en;
    justify-self: start;        /* 左寄せ */
    align-self: start;          /* 上寄せ */
    transform: translate(120px,25px);            /* 既存のYずらしを無効化 */
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1.05;
  }

  /* 中央：ハート（少し上げる） */
  .cta-heart{
    grid-area: heart;
    width: clamp(120px, 40vw, 200px);
    transform: translateY(-6px) rotate(-6deg);
  }

  /* 右下：日本語（2行） */
  .cta-ja{
    grid-area: ja;
    justify-self: end;
  align-self: end;
  transform: translate(-120px, -100px); /* ← 左右・上下に動かす */
    text-align: right;
    line-height: 1.28;
    max-width: none;            /* 35vw制限があれば無効化 */
    display: block;             /* フレックス化を戻す */
  }
  .cta-ja .ja-line{ display:block; }
}
/* ==========  ハート：ふわふわアニメーション=============== */
.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
}

/* ゆるく上下＆回転 */
@keyframes fuwafuwa {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  50%  { transform: translate(0, -8px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(6deg); }
}

/* ==================
   セカンドビュー（コラージュ）｜統合版
   ・push方式のみ採用
   ・重複/競合を整理
================== */

/* 枠 */
.short-about.collage{ width:min(1100px,94%); margin:0 auto; }

/* 行 */
.collage-row{ display:grid; gap:24px; align-items:center; }
.collage-row--top{ grid-template-columns:1fr 1.4fr; margin:24px 0 36px; }
.collage-row--bottom{ grid-template-columns:1fr; margin:28px 0 0; }

/* stack共通 */
.short-about.collage .stack{ position:relative; overflow:hidden; border-radius:16px; }
.short-about.collage .stack.v{ aspect-ratio:3/4; }
.short-about.collage .stack.h{ aspect-ratio:16/9; }

/* 図版（土台） */
.short-about.collage .stack>figure{
  position:absolute; inset:0; margin:0;
  opacity:0; z-index:0;
  transform:translateX(0);
  will-change:transform,opacity;
}
.short-about.collage .stack>figure img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 表示中 */
.short-about.collage .stack>figure.is-active{ opacity:1; z-index:1; }

/* push：役割 */
.short-about.collage{ --push-ms:640ms; --fade-ms:420ms; --push-out:-9%; }
.short-about.collage .stack>figure.is-next.push-in{
  opacity:1; z-index:2; transform:translateX(100%);
}
.short-about.collage .stack>figure.is-current.push-out{
  opacity:1; z-index:3; transform:translateX(0);
}
.short-about.collage .stack>figure.is-next.push-in.run{
  transition:transform var(--push-ms) cubic-bezier(.3,1,.2,1), opacity var(--fade-ms) ease;
  transform:translateX(0);
}
.short-about.collage .stack>figure.is-current.push-out.run{
  transition:transform var(--push-ms) cubic-bezier(.3,1,.2,1), opacity var(--fade-ms) ease;
  transform:translateX(var(--push-out)); opacity:0.001;
}

/* 初期：1枚目は見せる（保険） */
.short-about.collage .stack>figure:first-child{ opacity:1; z-index:1; }

/* テキスト */
:root{ --short-green:#2e4e3f; }
.short-about.collage .short-text{ width:min(860px,92%); margin:0 auto; text-align:center; }
.short-about.collage .short-text .short-title,
.short-about.collage .short-text .short-desc{ color:var(--short-green); }
.short-about.collage .short-text .short-desc{ line-height:1.95; letter-spacing:.05em; }

/* アクセシビリティ */
@media (prefers-reduced-motion:reduce){
  .short-about.collage .stack>figure{ transition:none !important; transform:none !important; position:relative; }
}

/* ==================
   レスポンシブ（SP）
   ・縦A→横Bの重なり
================== */
@media (max-width:768px){
  .short-about.collage{ overflow-x:hidden; }
  .collage-row--top{ display:block; position:relative; }

  /* A（縦）：左寄せ、半分弱 */
  .collage-row--top .stack--A{
    width:48vw; margin:0 0 0 6vw; border-radius:14px; position:relative; z-index:1;
  }
  /* B（横）：3/4、Aにかぶせて右はみ出し */
  .collage-row--top .stack--B{
    width:75vw; margin:-10vw 0 0 auto; transform:translateX(6vw);
    border-radius:14px; position:relative; z-index:2;
  }

  /* 行の隙間を少し詰める */
  .collage-row{ gap:18px; }
  /* 1カラム化 */
  .collage-row--top{ /* grid→block 済み */ }
}

/* ==================
   レスポンシブ（タブレット）
================== */
@media (max-width:960px){
  .collage-row--top{ grid-template-columns:1fr; }
}

/* ==================
   PC専用：A左／B上下のずらし
   ・数値だけ触ればOK（--A-x / --B-y）
================== */
@media (min-width:961px){
  .collage-row--top{
    position:relative; align-items:start;
    margin:24px 0 clamp(80px,10vw,160px);
    --A-x:-12%;   /* Aを左へ（-6%〜-14%で微調整） */
    --B-y:30%;    /* Bを下へ（上にしたい場合は 12%→8%→0%→-4% と近づける） */
  }
  .collage-row--top .stack--A{ transform:translateX(var(--A-x)); will-change:transform; }
  .collage-row--top .stack--B{ align-self:start; transform:translateY(var(--B-y)); will-change:transform; }
}

/* ==================
   PC専用：テキスト調整
   ・位置下げ（今は強めに14em）
   ・サイズアップ（タイトル2倍／本文やや拡大）
================== */
@media (min-width:961px){
  .short-about.collage .short-text{ margin-top:14em; }
  .short-about.collage .short-text .short-title{ font-size:2em; }
  .short-about.collage .short-text .short-desc{ font-size:1.4em; line-height:2; }
}

/*=========================
  短期のいいところ（完全統合・最終版）
  - 背景：白 / テキスト：#355e3b
  - 背景イラスト：左上/右下
  - カード枠・影なし
  - PC/スマホとも縦1列
=========================*/

.short-good{
  position: relative;
  background:#fff;
  color:#355e3b;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  width: min(var(--container-pc, 960px), 92%);
  margin: 0 auto;
  padding: 60px 20px 40px; /* 下余白はPCで0に */
}

/* タイトル・小見出し（スマホ基準） */
.short-good h2{ font-size: clamp(28px, 5vw, 40px); margin: 0 0 40px; }
.short-good h3{ font-size: 1.4rem; margin:14px 0 8px; }

/* 背景デコ */
.bg-deco{
  position:absolute;
  width:172px; height:172px;
  pointer-events:none;
  z-index:0;
  background:url("./img/icon-background.svg?v=20250929a") center/contain no-repeat;
}
.bg-deco-left{  top:-32px;  left:-32px; }
.bg-deco-right{ bottom:-32px; right:-32px; transform:scaleX(-1); }

/* コンテンツ前面 */
.short-good h2, .good-list{ position:relative; z-index:1; }

/* レイアウト：常に縦1列（PC・SP共通） */
.good-list{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
}

/* 各カード */
.good-item{
  max-width: 600px;
  width: 100%;
  text-align: center;
}
.good-icon{
  width: 90px;
  height: auto;
  display: block;
  margin: 0 auto 16px;
}
.good-item h3{
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.good-item p{
  font-size: 1rem;
  line-height: 1.8;
  color: #355e3b;
}

/* フェードアップ */
.reveal-up{ opacity:0; transform:translateY(22px); }
.reveal-up.is-in{ animation:revealUp .7s ease both; }
@keyframes revealUp{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .reveal-up, .reveal-up.is-in{ opacity:1; transform:none; animation:none; }
}

/* PC限定：下の白余白を削除＋フォント1.4倍 */
@media (min-width:768px){
  .short-good{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .short-good + .wave-bleed,
  .short-good + .wave-divider{
    margin-top: -4px;
  }

  /* PCだけフォントを1.4倍 */
  .short-good h2{ font-size: calc(clamp(28px, 5vw, 40px) * 1.4) !important; }
  .short-good h3{ font-size: calc(1.4rem * 1.4) !important; }
  .short-good p { font-size: calc(1rem * 1.4) !important; line-height: 1.85; }
}



/* =========================
   PC限定：左右ガターに縦長写真（同じ画像を左右で左右寄せ）
   - センターの内側幅 = min(960px, 92vw) を基準にガター幅を自動計算
   - 4セクション分の高さの間は写真を sticky で固定表示
========================= */

/* ガターを使うラッパー（4つのコンテンツを包む） */
.side-gutters{
  position: relative;
  isolation: isolate;          /* 重なりの独立性を確保 */
  --inner: min(960px, 92vw);   /* サイトの内側幅（short-reco__innerと同等） */
  --gutter: calc((100vw - var(--inner)) / 2); /* 左右の余白幅を自動で算出 */
}

/* 波帯も“内側幅”に合わせたいとき（フルブリード→内側） */
.wave-bleed--inset{
  position: relative;
  left: 50%;
  margin-left: calc(-0.5 * var(--inner));
  width: var(--inner);
}

/* 左右写真の貼り付きフレーム（親の範囲内で固定） */
.side-gutters__stick{
  position: sticky;
  top: 0;
  z-index: 0;                  /* コンテンツより“背面”。ボタン操作の邪魔をしない */
  height: 100vh;               /* 画面に貼り付かせる */
  pointer-events: none;        /* クリック透過 */
}

/* 左右の“縦長カラム”領域そのもの */
.side-gutters__img{
  position: fixed;             /* 画面基準で左右に固定（スクロールしても同じ位置） */
  top: 0; bottom: 0;
  width: var(--gutter);
  overflow: hidden;
  opacity: 0.999;              /* サブピクセルの白筋対策 */
  mix-blend-mode: normal;
}
.side-gutters__img--left { left: 0; }
.side-gutters__img--right{ right: 0; }

/* 中に“重ねる”スライド用の面（JSで figure を流し込む） */
.side-gutters__img > figure{
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .8s ease;
  will-change: opacity;
}
.side-gutters__img > figure.is-show{ opacity: 1; }

.side-gutters__img img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.96);         /* ほんのり落として中央の文字を読みやすく */
}

/* 左右で“同じ画像”を見せつつ、見せる位置だけ変える */
.side-gutters__img--left  img{ object-position: left  center; }
.side-gutters__img--right img{ object-position: right center; }

/* 小さめ画面やタブレットでガターが狭くなる時は自動で無効化 */
@media (max-width: 1200px){
  .side-gutters__img{ display:none; }
}

/* センター側の通常セクションが最前面になるように（念のため） */
.side-gutters > *:not(.side-gutters__stick){
  position: relative;
  z-index: 1;
}

/* “ガターは余白内だけに出す”：横スクロールは出さない ★*/
html, body{ overflow-x: clip; }
@supports not (overflow: clip){ html, body{ overflow-x: hidden; } }

/* =========================
 こんな方におすすめセクション
========================= */
.short-reco{
  --coral:#ff6b6b;
  --text:#fff;
  background:var(--coral);
  color:var(--text);
  overflow:hidden;
}
.short-reco__inner{
  width:min(960px,92%);
  margin:auto;
  padding:64px 0 100px;
  position:relative;
  text-align:center;
}
.short-reco__title{
  font-size:clamp(22px,3.6vw,28px);
  letter-spacing:.08em;
  margin:0 0 28px;
}
.short-reco__list{
  list-style:none;
  margin:0 auto 12px;
  padding:0;
  width:fit-content;
  max-width:36em;
  text-align:left;
  font-size:clamp(18px,2.6vw,22px);
  line-height:1.9;
  letter-spacing:.06em;
}
.short-reco__list li{ position:relative; padding-left:1.2em; margin:18px 0; }
.short-reco__list li::before{ content:"・"; position:absolute; left:0; top:0; }
.short-reco__list li:last-child{ margin-bottom:6px; }

/* フレーム→人（中央・重なりなし） */
.short-reco__bubble{
  position:relative;
  z-index:1;
  display:block;
  width:min(92vw,720px);
  margin:0 auto 10px;
  opacity:.95;
}
.short-reco__mates{
  position:relative;
  z-index:0;
  display:block;
  width:clamp(180px,34vw,320px);
  margin:6px auto 0;
}


/* PC調整：2/3サイズ感で近づける（重ならない） */
@media (min-width:768px){
  .short-reco__inner{ padding:80px 0 110px; }
  .short-reco__list{ line-height:2.05; margin-bottom:14px; }
  .short-reco__bubble{ width:min(66vw,820px); margin:0 auto 14px; }
  .short-reco__mates{ width:clamp(240px,22vw,360px); margin-top:10px; }
}


/* =========================
  参加者の声（重複統合済み）
========================= */
:root{
  --short-green:#2e4e3f;
  --short-pink:#F27373;
}

/* ===== 参加者の声（統合） ===== */
.short-voice{ text-align:center; padding:60px 20px; background:#fff; }
.short-voice__title{ font-size:28px; margin:0 0 32px; color:var(--short-green); letter-spacing:.08em; }

/* スライダー */
.short-voice__slider{ position:relative; max-width:620px; margin:0 auto; overflow:hidden; z-index:0; }
.short-voice__slides{ display:flex; transition:transform .5s ease; }
.short-voice__item{ min-width:100%; padding:20px; box-sizing:border-box; }

/* 写真 */
.short-voice__photo{ position:relative; z-index:1; } /* △より下、overlayより下 */
.short-voice__photo img{
  width:100%; display:block;
  border:10px solid #fff; border-radius:0;
  box-shadow:0 18px 36px rgba(0,0,0,.26), 0 8px 18px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
}

/* 見出し・本文 */
.short-voice__subtitle{ color:var(--short-pink); font-size:20px; margin:18px 0 12px; letter-spacing:.1em; }
.short-voice__text{ color:var(--short-green); font-size:16px; line-height:1.9; }

/* ---- 写真上オーバーレイ（ヒットゾーン＆矢印を乗せる器） ---- */
.short-voice__overlay{
  position:absolute;
  /* JSが left/top/width/height を写真に合わせて設定（fallbackで全面） */
  inset:0;                 /* ★JS未読込でもクリック効く保険。JS有効なら上書きされる */
  pointer-events:none;
  z-index:4;               /* いちばん上 */
}

/* 矢印（クリック可） */
.short-voice .short-voice__prev,
.short-voice .short-voice__next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:none; color:var(--short-green);
  font-size:26px; font-weight:800; line-height:1;
  text-shadow:0 2px 6px rgba(255,255,255,.8), 0 1px 10px rgba(0,0,0,.25);
  cursor:pointer; user-select:none;
  pointer-events:auto;
}
.short-voice .short-voice__prev{ left:8px; }
.short-voice .short-voice__next{ right:8px; }
.short-voice .short-voice__prev::before{ content:"◀"; }
.short-voice .short-voice__next::before{ content:"▶"; }

/* △ヒットゾーン（クリック可・写真範囲に後でJSで合わせる） */
.short-voice .short-voice__hit{
  position:absolute; top:0; bottom:0; width:36%;
  background:transparent; pointer-events:auto;
}
.short-voice .short-voice__hit--left { left:0;  clip-path:polygon(0 0,100% 50%,0 100%); }
.short-voice .short-voice__hit--right{ right:0; clip-path:polygon(0 0,100% 0,100% 100%,0 50%); }

/* ● ドット */
.short-voice__dots{
  display:flex; gap:10px; justify-content:center; align-items:center; margin:16px 0 0;
}
.short-voice__dots button{
  width:10px; height:10px; border-radius:50%; border:0; cursor:pointer; background:#cfd9d3;
}
.short-voice__dots button.active{ width:22px; border-radius:999px; background:var(--short-green); }


/* =====
 開催概要：
  ===== */

.overview-simple{
  /* 配色とサイズ（カードを約2/3に縮小） */
  --bg: #ddead7;             /* くすみグリーン背景 */
  --text: #355e3b;           /* 黒なし → くすみグリーン */
  --shadow: #89a489;         /* やわらかい影色 */
  --cardMax: 174px;          /* ★約2/3サイズ（従来260px想定→約174px） */
  --gap: 12px;               /* ★カード間隔を半分（例：24px→12px） */

  background: var(--bg);
  padding: clamp(24px, 5vw, 40px) 0 8px; /* 下側ほぼ無しに */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cardMax), 1fr));
  gap: var(--gap);
  justify-items: center;
  color: var(--text);
}

/* カード本体（正方形寄り・中央そろえ） */
.ov-card{
  width: 100%;
  max-width: var(--cardMax);
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 3px 8px rgba(137,164,137,.22),
    0 6px 16px rgba(137,164,137,.18);
  color: var(--text);
}

/* アイコン → 見出し → 本文（中央） */
.ov-card__icon{
  width: 56px; height: 56px; /* アイコン大きめのまま */
  object-fit: contain;
  margin-bottom: 8px;
}
.ov-card__title{
  font-size: clamp(14px, 2.2vw, 16px);
  letter-spacing: .05em;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text);
}
.ov-card__big{
  font-size: clamp(18px, 4.2vw, 22px);
  line-height: 1.35;
  margin: 0;
  color: var(--text);
}

/* 1行で収めたい箇所用 */
.no-wrap{ white-space: nowrap; }

/* 下部テキスト（注釈） */
.overview-note{
  grid-column: 1 / -1;
  text-align: center;
  font-size: clamp(12px, 2.8vw, 13px);
  color: var(--text);
  opacity: .9;

  /* ★gridのgapをほぼ打ち消して“密着風”にする */
  margin-top: calc(-0.75 * var(--gap));
}

/* ちょいPC調整（任意） */
@media (min-width: 768px){
  .ov-card{ padding: 18px; }
  .ov-card__icon{ width: 60px; height: 60px; }
}
/* ==== 強制・縦一列レイアウト ==== */
.overview-simple{
  display: grid !important;
  grid-template-columns: 1fr !important; /* ★常に1列 */
  justify-items: center;                  /* ★中央寄せ */
  gap: 12px;                              /* カード間は半分のまま */
  padding-bottom: 8px;                    /* 最下部をほぼゼロに */
}

/* カードのサイズは“約2/3”のまま中央に */
.overview-simple .ov-card{
  max-width: 174px;   /* ★約2/3サイズ */
  width: 100%;
  aspect-ratio: 1/1;  /* 正方形より */
}

/* 最下カードと注釈を“ほぼ密着”に */
.overview-simple .overview-note{
  grid-column: 1 / -1;
  margin-top: -9px;   /* gap(12px)を相殺気味に */
}


/* スマホ：カード横幅を約1.2倍 */
@media (max-width: 767px){
  .overview-simple .ov-card{
    max-width: calc(174px * 1.2); /* 1.2倍 */
  }
}

/* PC：カード横幅を約1.5倍＆タイトル文字を2倍に */
@media (min-width: 768px){
  .overview-simple .ov-card{
    max-width: calc(174px * 1.5); /* 1.5倍 */
  }
  .overview-simple .ov-card__title{
    font-size: calc(clamp(14px, 2.2vw, 16px) * 2); /* 文字2倍 */
  }
  .overview-note{
    font-size: calc(clamp(12px, 2.8vw, 13px) * 2); /* 注釈も2倍 */
  }
}


/* ==============
 参加の流れ
  ============== */

.short-flow {
  background: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

.short-flow__title {
  font-size: clamp(22px, 4vw, 28px);
  color: #2e4e3f; /* くすみグリーン */
  margin-bottom: 40px;
}

.short-flow__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 420px;
}

.short-flow__list li {
  position: relative;
  margin-bottom: 40px;
}

.short-flow__list li img {
  width: 64px;
  display: block;
  margin: 0 auto 12px;
}

.short-flow__list li p {
  font-size: 18px;
  color: #2e4e3f;
  margin: 0;
}

.short-flow__list li p span {
  display: inline-block;
  font-weight: bold;
  margin-right: 8px;
  letter-spacing: .1em;
}

.short-flow__list li::after {
  content: "↓";
  display: block;
  font-size: 24px;
  color: #2e4e3f;
  margin-top: 20px;
}

.short-flow__list li:last-child::after {
  content: none;
}
/* ==============
  よくある質問（最終版）
   - テキスト #355e3b
   - Q帯 #ddead7
   - Aカード影 #ddead7
   - ＋／－ #ff6b6b
================= */

:root{
  --faq-text:#355e3b;
  --faq-qbg:#ddead7;
  --faq-shadow:#ddead7;
  --faq-accent:#ff6b6b;
}

/* ラッパー */
.short-faq{
  max-width:680px;
  margin:60px auto;
  padding:0 20px;
  color:var(--faq-text);
}
.short-faq__title{
  text-align:center;
  font-size:24px;
  margin-bottom:28px;
  letter-spacing:.02em;
}

/* ===== 1) 行ごと（details） ===== */
.short-qa{
  margin:20px 0;
  /* 以前のデザインを無効化 */
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}

/* デフォルトの三角マーカーを消す */
.short-qa summary::-webkit-details-marker{ display:none; }

/* ===== 2) Q帯 ===== */
.short-qa summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  background:var(--faq-qbg);
  border-radius:16px; /* 角丸少しゆるめ */
  padding:16px 20px;
  list-style:none;
  transition:box-shadow .25s ease, transform .25s ease;
}
.short-qa summary:focus-visible{ outline:2px solid color-mix(in srgb, var(--faq-accent) 40%, white); }
.short-qa__q{
  font-weight:700;
  font-size:18px;
  color:var(--faq-text);
}

/* 右の＋／－丸ボタン */
.short-qa__toggle{
  width:32px; height:32px; flex-shrink:0;
  border-radius:50%;
  background:var(--faq-accent);
  position:relative;
}
.short-qa__toggle::before,
.short-qa__toggle::after{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:#fff;
}
.short-qa__toggle::before{ width:16px; height:2px; }
.short-qa__toggle::after { width:2px;  height:16px; }
.short-qa[open] .short-qa__toggle::after{ display:none; } /* 開いたらマイナスに */

/* ===== 3) Aカード（Qの下に表示） ===== */
/* Aカード（Qの下に表示） */
.short-qa__a{
  margin:0;                          /* Q帯と隙間なし */
  padding:18px 20px 22px;
  background:#fff;
  border-radius:14px;
  color:var(--faq-text);
  font-size:16px;
  line-height:1.8;
  /* ドロップ感のある影 */
  box-shadow:
    0 6px 14px rgba(53,94,59,0.28),
    0 12px 28px rgba(53,94,59,0.22);
}


/* ===== 4) 細かな演出（任意） ===== */
.short-qa[open] summary{
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

/* スマホ余白のバランス */
@media (max-width:480px){
  .short-qa summary{ padding:14px 16px; border-radius:14px; }
  .short-qa__a{ margin:8px 4px 0; border-radius:12px; }
}


/* =========================
  Auto Slide / Tall Cards（PC/SPとも縦長）
  ※アニメはJS側で制御
========================= */
.auto-slide{ background:#fff; overflow:hidden; }
.auto-slide__viewport{ width:100%; overflow:hidden; position:relative; }
.auto-slide__track{
  display:flex;
  will-change:transform;
}

:root{
  --space-pc: 20px;   /* PCの画像間隔 */
  --space-sp: 14px;   /* SPの画像間隔 */
  --w-pc: 28vw;       /* PC 1枚の幅（小さくすると見える枚数↑） */
  --w-pc-max: 360px;  /* PC 最大幅 */
  --w-sp: 70vw;       /* SP 1枚の幅 */
}

.auto-slide__item{
  flex:0 0 auto;
  width: min(var(--w-pc), var(--w-pc-max));
  aspect-ratio: 3 / 4;           /* 縦長で統一 */
  margin-right: var(--space-pc);  /* gapは使わない（幅ズレ防止） */
}
.auto-slide__item img{
  width:100%; height:100%;
  object-fit:cover; display:block; border-radius:12px;
}

@media (max-width:768px){
  .auto-slide__item{
    width: var(--w-sp);
    margin-right: var(--space-sp);
    border-radius:10px;
  }
}


/* PC（約2倍に） */
@media (min-width: 769px){
  .auto-slide{
    --w-pc: 56vw;      /* 28vw → 56vw（約2倍） */
    --w-pc-max: 820px; /* 360px → 820px（上限も拡大） */
    --space-pc: 28px;  /* 余白ちょい広め（好みで） */
  }
}

/* スマホ（フルスクリーン化） */
@media (max-width: 768px){
  .auto-slide__viewport{
    height: 100dvh;           /* 画面の高さいっぱい */
  }
  .auto-slide__item{
    width: 100vw;             /* 横幅いっぱい */
    height: 100dvh;           /* 高さいっぱい */
    aspect-ratio: auto;       /* 3/4指定を無効化して実寸で張る */
    margin-right: 0;          /* 継ぎ目を詰める（好みで 8px などに） */
    border-radius: 0;         /* 端まで出す */
  }
  .auto-slide__item img{
    border-radius: 0;         /* 端まで出す */
    object-fit: cover;        /* 余白なく全面に */
  }
}
/* SP：フル画面＋スライド間にすきまを作る */
@media (max-width: 768px){
  .auto-slide{
    --space-sp: 10px;            /* ← すきまの太さ（6〜16pxで調整） */
  }
  .auto-slide__viewport{
    height: 100dvh;
    background: #fff;            /* すきまに見える背景色（サイト色に合わせてOK） */
  }
  .auto-slide__item{
    width: calc(100vw - var(--space-sp)); /* ← すきまぶんだけ幅を小さくする */
    height: 100dvh;
    margin-right: var(--space-sp);        /* ← ここが“すきま”になる */
    aspect-ratio: auto;
    border-radius: 8px;                   /* 角丸いらなければ 0 に */
    overflow: hidden;                      /* 角丸時の画像はみ出し防止 */
  }
  .auto-slide__item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
/* JS制御なのでトランジションは不要 */
.auto-slide__track{ transition: none; will-change: transform; }

/* ===== Auto Slide：フルブリード化（左右の余白を消す） ===== */
.auto-slide{
  /* 画面幅に広げつつ、親の中央配置から外へはみ出させる定番テク */
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;       /* 親の max-width 制限を無視 */
}

.auto-slide__viewport{
  width: 100vw;          /* ビューポート幅ぴったり */
  padding: 0;            /* 念のため内側の余白ゼロ */
}

.auto-slide__track{
  padding: 0;            /* 余白があれば除去 */
}


/* =========================
   波帯（統合）
   - デフォ：SP=フル幅、PC=コンテンツ幅（--inner）
   - .is-full を付けた波だけ常にフル幅（フッター用）
   - 画像はラッパーに100%フィットでサイズぶれなし
========================= */

/* サイトの“内側幅”の基準（必要なら数値調整OK） */
:root{ --inner:min(960px,92vw); --wave-w:1440; --wave-h:300; --wave-overlap:2px; }

/* ベース */
.wave{
  position:relative; display:block; line-height:0; font-size:0; overflow:hidden; z-index:1;
  width:100vw; left:50%; margin-left:-50vw;               /* SPは画面いっぱい */
  aspect-ratio:var(--wave-w)/var(--wave-h);               /* 器（高さ）を固定 */
}

/* 中身の画像は器に100%フィット（色違いでも同サイズになる） */
.wave>img{
  width:100% !important; height:100% !important; display:block;
  object-fit:cover; object-position:center bottom; vertical-align:bottom; pointer-events:none;
}

/* 上下の食い込み（白スジ防止）＆反転 */
.wave.is-top{    margin-top:calc(var(--wave-overlap) * -1); }
.wave.is-bottom{ transform:rotate(180deg); margin-bottom:calc(var(--wave-overlap) * -1); }

/* PCだけコンテンツ幅に揃える（デフォ挙動） */
@media (min-width:1024px){
  .wave{
    width:var(--inner); left:50%; margin-left:calc(-0.5 * var(--inner));
    max-width:100%;
  }
}

/* 例外：常にフル幅（フッター専用） */
.wave.is-full{
  left:50% !important; margin-left:-50vw !important; width:100vw !important; max-width:none !important;
}

/* iOSの1pxスジが出る環境向けの微調整（任意） */
@supports (-webkit-touch-callout:none){
  .wave.is-top{ margin-top:-4px; }
}



/* ========= ===== ===== = 
横スクロール禁止
 ===== =====   */

/* ---- 横スクロール保険（他所で指定済みなら不要） ---- */
html,body{ overflow-x:hidden; }

/* 横スクロールは全ページで完全封印（クリップ） */
html, body{
  overflow-x: clip !important;  /* hidden より強力 */
}
/* 先に無難な hidden を敷いておく */
html, body { overflow-x: hidden; }


/* ========= ===== ===== = 
フッター（ピンク背景・フルブリード）
 ===== =====   */
.short-footer{
  /* どのコンテナ幅でも“画面端まで”塗る */
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;

  background: #ff6b6b;
  color: #fff;
  text-align: center;

  /* 余白（PC/SP両方で良い感じ） */
  padding: clamp(28px, 6vw, 60px) 0 clamp(36px, 7vw, 80px);
}

/* 上段アイコン3つ */
.short-footer__icons{
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 4vw, 40px);
  margin-bottom: clamp(24px, 4.8vw, 40px);
}
.short-footer__icon{
  display: inline-grid;
  place-items: center;
  width: clamp(42px, 7vw, 64px);
  height: clamp(42px, 7vw, 64px);
  transition: transform .15s ease, opacity .15s ease;
}
.short-footer__icon img{
  width: 100%;
  height: auto;
  display: block;
}
.short-footer__icon:hover{ transform: translateY(-2px); opacity: .9; }

/* 下段ロゴ（中央） */
.short-footer__logo{
  width: clamp(120px, 22vw, 220px);
  height: auto;
  display: block;
  margin: 0 auto;
}

/* スマホでアイコン間隔をほんの少し広げる（好み） */
@media (max-width: 480px){
  .short-footer__icons{ gap: clamp(20px, 8vw, 28px); }
}


/* === HOTFIX：PCは波を“内側幅”に強制そろえ（両方式対応） === */
:root{ --inner: min(960px, 92vw); } /* 未定義でも動くように保険 */

@media (min-width: 1024px){
  /* ラッパー方式 <div class="wave-bleed"><img></div> */
  .wave-bleed{
    left: 50% !important;
    margin-left: calc(-0.5 * var(--inner)) !important;
    width: var(--inner) !important;
    max-width: 100% !important;
  }
  .wave-bleed > img{ width: 100% !important; height: auto !important; }

  /* 単体img方式 <img class="wave-divider"> */
  .wave-divider{
    left: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: var(--inner) !important;
    max-width: 100% !important;
    display: block !important;
  }
}

/* 上下の白スジ対策は維持 */
.wave-bleed--top,
.wave-divider--top{ margin-top: -2px !important; }
.wave-bleed--bottom,
.wave-divider--bottom{ transform: rotate(180deg); margin-bottom: -2px !important; }


/*=== === === === 
 PCでのコンテンツ幅統一
=== === === === */

/* 1) 共通コンテナ幅（PC基準） */
:root{
  --container-pc: 960px;    /* ←ここだけ変えれば全体が連動 */
  --container-pad: 0 20px;  /* タイトル行などの左右パディング用（任意） */
}

/* 2) ユーティリティ（HTMLにクラスを足すだけで幅統一） */
.w-960, .wrap-960, .container-960{
  width: min(var(--container-pc), 92%);
  margin: 0 auto;
}

/* 3) セクションごとの上書き（既存を統一ルールに寄せる） */
.short-reco__inner{
  width: min(var(--container-pc), 92%) !important;
}

/* 「参加者の声」：スライダ器をコンテナ幅に */
.short-voice__slider{
  max-width: var(--container-pc) !important;
  margin-left: auto; margin-right: auto;
}
/* タイトルも中央に揃えて見た目のラインを合わせる（任意） */
.short-voice__title{
  max-width: var(--container-pc);
  margin: 0 auto 32px;
  padding: var(--container-pad);
}

/* 「開催概要」：セクションに w-960 が付いている前提でOK。
   念のため .overview-simple 自体にも中央寄せだけ足す */
.overview-simple{ margin-left: auto; margin-right: auto; }

/* ========================================= 
PC幅 完全統一（最終確定パッチ：必ずCSSの最後） 

========================================= */
*, *::before, *::after { box-sizing: border-box; }

/* 統一用の変数（開催概要/参加の流れに合わせる） */
:root{
  --pc-max: 960px;   /* PCの最大内側幅：ここを変えれば全体が揃う */
  --pc-vw:  92vw;    /* 画面%の基準 */
  --pad-pc: 20px;    /* PC左右パディング */
  --pad-sp: 16px;    /* SP左右パディング */
}

/* ====== PC（1024px〜）：幅を min(960px,92vw) に完全統一 ====== */
@media (min-width:1024px){
  :root{ --INNER: min(var(--pc-max), var(--pc-vw)); }

  /* コンテンツ幅を揃える対象（必要なら追加してOK） */
  #taib-short .short-about.collage,
  #taib-short .short-good,
  #taib-short .short-voice,
  #taib-short .short-faq,
  #taib-short .short-flow,
  #taib-short #outline.overview-simple,
  #taib-short .short-reco__inner{
    width: var(--INNER) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--pad-pc) !important;
    padding-right: var(--pad-pc) !important;
  }

  /* PCは波帯を非表示（要望） */
  #taib-short .wave{ display: none !important; }

  /* 「参加の流れ」のズレ防止：グリッドで固定配置 */
  #taib-short #flow.short-flow .short-flow__list{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 列数は好みで 2/3/4 に */
    gap: 32px 40px;
    justify-items: center;
    align-items: start;
  }
  #taib-short #flow.short-flow .short-flow__list > li{
    margin: 0 !important; /* 古い margin レイアウトを打ち消し */
  }
}

/* ====== SP（〜1023.98px）：全幅＋共通余白、波はフル幅表示 ====== */
@media (max-width:1023.98px){
  /* 各セクションは全幅＋共通左右余白でラインを揃える */
  #taib-short .short-about.collage,
  #taib-short .short-good,
  #taib-short .short-voice,
  #taib-short .short-faq,
  #taib-short .short-flow,
  #taib-short #outline.overview-simple,
  #taib-short .short-reco,
  #taib-short .short-reco__inner{
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: var(--pad-sp) !important;
    padding-right: var(--pad-sp) !important;
  }

  /* 波帯は常に親幅100%（左ズレ完全停止） */
  #taib-short .wave,
  #taib-short .wave.is-top,
  #taib-short .wave.is-bottom{
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  #taib-short .wave > img{
    display: block; width: 100% !important; height: auto !important;
    vertical-align: bottom;
  }

  /* ガターの固定画像が干渉する端末向けの保険 */
  #taib-short .side-gutters__stick,
  #taib-short .side-gutters__img{ display:none !important; }
}

/* ====== 補足：ピンク帯（おすすめ）は“内側”で背景色を持たせる ====== */
@media (min-width:1024px){
  #taib-short .short-reco{ background: transparent !important; }
  #taib-short .short-reco__inner{ background: var(--coral, #ff6b6b) !important; }
}
@media (max-width:1023.98px){
  #taib-short .short-reco{ background: var(--coral, #ff6b6b) !important; }
  #taib-short .short-reco__inner{ background: transparent !important; }
}

/* === 参加の流れ：PCも1列に戻す（最優先・最後に置く） === */
@media (min-width:1024px){
  #taib-short #flow.short-flow .short-flow__list{
    display: block !important;           /* グリッド解除 */
  }
  #taib-short #flow.short-flow .short-flow__list > li{
    width: 100% !important;              /* 横幅いっぱい */
    margin: 0 0 24px !important;         /* 縦の間隔だけ */
  }
  #taib-short #flow.short-flow .short-flow__list > li:last-child{
    margin-bottom: 0 !important;         /* 最後だけ余白なし */
  }
}

/* =========================================
   short-good と おすすめ の間の余白まわり（統合版）
   ・PCは波を非表示
   ・ガターラッパーの上余白を消す
   ・short-good の下だけ「ほどよい余白」を戻す
     （数値は --good-gap で調整）
========================================= */
@media (min-width:1024px){
  :root{
    --good-gap: 28px; /* ← PCで short-good の“下”に入れる余白。お好みで 16〜40px */
    --INNER: min(960px, 92vw);
    --pad-pc: 20px;
  }

  /* 1) PCでは波を出さない */
  #taib-short .wave{ display:none !important; }

  /* 2) サイドガター（ラッパー）の上余白は持たせない */
  #taib-short .side-gutters{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* 3) short-good 自体の上下トリミング
        - 上：ゼロ（押し上げ）
        - 下：適度な余白（--good-gap）
        - 内側の最初/最後の margin は潰す */
  #taib-short .short-good{
    margin-top:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-bottom: var(--good-gap) !important;  /* ★ここで“少し開ける” */
  }
  #taib-short .short-good > *:first-child{
    margin-top:0 !important; padding-top:0 !important;
  }
  #taib-short .short-good > *:last-child,
  #taib-short .short-good .good-list > *:last-child,
  #taib-short .short-good .good-item > *:last-child{
    margin-bottom:0 !important; padding-bottom:0 !important;
  }

  /* 4) short-good の直後要素の“上側”は常にゼロ
        （余白は short-good 側でだけ管理する） */
  #taib-short .short-good + *,
  #taib-short .short-good + .short-reco,
  #taib-short .short-good + .wave,
  #taib-short .short-good + .wave-bleed,
  #taib-short .short-good + .wave-divider{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* 5) 「こんな方におすすめ」：PCは“内側だけピンク”に統一 */
  #taib-short #recommend.short-reco{ background: transparent !important; }
  #taib-short #recommend .short-reco__inner{
    background: var(--coral, #ff6b6b) !important;
    width: var(--INNER) !important;
    margin-left:auto !important; margin-right:auto !important;
    padding-left: var(--pad-pc) !important;
    padding-right: var(--pad-pc) !important;
    padding-top: 80px !important; /* 既存見た目維持。必要なら調整 */
  }
}

/* =========================================
   side-gutters の「上の帯」を確実に消す（統合版）
   - テーマの section 既定 margin を無効化（このラッパー限定）
   - マージン折り畳みを break
   - 直前セクションの margin-bottom も無視
   - short-good 見出しの margin-top も無効化
========================================= */
@media (min-width:1024px){
  /* 0) もし過去に display:contents を当ててたら絶対やめる */
  #taib-short .side-gutters{ display:block !important; }

  /* 1) ラッパー自身に余白を持たせない（テーマの section 既定 margin 対策） */
  #taib-short .side-gutters{
    margin-top:0 !important;           /* 上マージン殺し */
    padding-top:0 !important;
    margin-block-start:0 !important;    /* ブロック方向の既定を明示的に0 */
    position:relative;                  /* 折り畳み抑止のベース */
    overflow:auto;                      /* ← 折り畳み完全停止（高さは変わらない） */
  }

  /* 2) それでも残る環境向けの“±0トリック”（見た目は変えない） */
  #taib-short .side-gutters::before{
    content:"";
    display:block;
    height:0;
    border-top:2px solid transparent;   /* 内側に“境界”を作る */
    margin-top:-2px;                    /* 見た目を±0に戻す */
  }

  /* 3) 直前の兄弟要素が margin-bottom を吐いても無視させる */
  #taib-short * + .side-gutters{
    margin-top:0 !important;
  }

  /* 4) ラッパー内の最初の要素（= short-good）も押し上げる */
  #taib-short .side-gutters > *:first-child{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  /* 5) short-good 側で見出しが margin-top を出している保険 */
  #taib-short .short-good h2{
    margin-top:0 !important;
  }

  /* 6) 直前コンテンツが #about / 固定コラージュ の場合の下マージン殺し（必要なときだけ） */
  #taib-short #about,
  #taib-short .pin.pin-image.collage{
    margin-bottom:0 !important;
  }
}
/* ===== PCだけ：ガター写真は最初は非表示／発火後にフェードイン ===== */
@media (min-width:1024px){
  #taib-short .side-gutters__img{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .35s ease, transform .35s ease;
    pointer-events:none; /* 背景なのでクリックは透過 */
  }
  #taib-short .side-gutters.is-on .side-gutters__img{
    opacity:1;
    transform:none;
  }
}

/* ===========================================
   ▼ パララックス用（コメントアウト版）
   ※一括で無効化したい場合はこのブロックを削除OK
=========================================== */

/*
#taib-short {

  --inner: min(760px, 92vw);
}
#taib-short .scene{
  position: relative; isolation: isolate;
  min-height: 100vh;
  padding-bottom: 0 !important;
  display: flex; flex-direction: column;
  background: transparent;
}

#taib-short .scene__bg{
  position: -webkit-sticky; position: sticky;
  top: 0; height: 100vh;
  background: var(--bg) center/cover no-repeat;
  pointer-events: none; z-index: 0;
}

#taib-short .scene__bg--dom{
  position: -webkit-sticky; position: sticky;
  top: 0; height: 100vh;
  display: grid; place-items: center;
  pointer-events: none; z-index: 0;
}

#taib-short .scene__wave{
  position: relative; z-index: 4;
  width: 100%; margin: 0 auto;
  background: transparent; line-height: 0;
}
#taib-short .scene__wave img{
  display: block; width: 100%; height: auto;
  transform: translateY(1px);
}

#taib-short .scene__band{
  position: relative; z-index: 3;
  background: #ddead7; box-shadow: none;
  width: 100%; margin: 0 auto;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px; padding: clamp(32px, 6vh, 64px) 24px; box-sizing: border-box;
  text-align: center;
}
#taib-short .scene__band > *{ max-width: 60ch; margin-left: auto; margin-right: auto; }
#taib-short .scene__band > *:last-child{ margin-bottom: 0 !important; }

#taib-short .scene + .scene{ margin-top: 0 !important; }

#taib-short .band-title{ margin: 0 0 12px; line-height: 1.3; }
#taib-short .short-num{ width: 44px; height: auto; vertical-align: middle; margin-right: 8px; }

@media (min-width:1024px){
  #taib-short .scene__wave{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
  }
  #taib-short .scene__wave img{
    width: 100vw; max-width: none;
  }
  #taib-short .scene__band{
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    font-size: 200%;
    line-height: 1.6;
    padding: clamp(40px, 8vh, 96px) 4vw;
  }
  #taib-short .scene__band p{ line-height: 1.75; }
}

#taib-short .scene__bg--dom .collage-wrap{
  width: min(980px, 92vw);
  aspect-ratio: 16 / 9;
  position: relative;
}
#taib-short .scene__bg--dom .collage-row{
  display: grid;
  gap: 12px;
  height: 100%;
}
#taib-short .scene__bg--dom .collage-row--bottom{
  grid-template-columns: 1fr;
}
#taib-short .scene__bg--dom .stack.h{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  height: 100%;
}
#taib-short .scene__bg--dom .stack.h figure{ margin: 0; }
#taib-short .scene__bg--dom .stack.h img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

#taib-short .scene__band{
  color: #355e3b !important;
}
#taib-short .scene__band :is(h1,h2,h3,h4,h5,h6,strong){
  color: #355e3b !important;
}
#taib-short .scene__band a{
  color: #2e4e3f;
  text-decoration-color: rgba(53,94,59,.5);
}
#taib-short .scene__band a:hover{
  text-decoration-color: currentColor;
}

#taib-short :where(main,#content,.site,.wrap,.l-content,.entry-content,.container){
  overflow: visible !important;
  transform: none !important;
}

@media (max-width: 1023.98px){
  body:not(.hb-open) #taib-short,
  body:not(.hb-open) #taib-short :where(main,#content,.site,.wrap,.l-content,.entry-content,.container){
    overflow-y: visible !important;
    transform: none !important;
  }
}

@media (max-width: 767.98px){
  #taib-short .scene__bg{
    height: 100svh !important;
    top: 0;
  }
  #taib-short .scene{ min-height: 100svh !important; }
  #taib-short .scene__band{ min-height: 100svh !important; }
}

body.page-id-2930 :where(.site,.wrap,.l-content,.entry-content,.container){
  overflow: visible !important;
  transform: none !important;
}

html:has(#taib-short) :where(.site,.wrap,.l-content,.entry-content,.container){
  overflow: visible !important;
  transform: none !important;
}

@media (max-width: 1023.98px){
  html:has(#taib-short) :where(.site,.wrap,#content,.l-content,.entry-content,.container){
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    contain: none !important;
    perspective: none !important;
    will-change: auto !important;
  }

  #taib-short .scene{
    display: block !important;
    min-height: 100svh !important;
  }

  #taib-short .scene__bg{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    z-index: 0 !important;
  }

  #taib-short .scene__wave{ z-index: 4 !important; }
  #taib-short .scene__band{ z-index: 3 !important; }
}

@media (max-width: 1023.98px){
  body:not(.hb-open) :where(html,body){ overflow-y: auto !important; }
}
*/