/* =========================
  Tokens
========================= */
:root{
  --lp-max: 700px;

  --font-head: "M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #f6f3ee;
  --white: #ffffff;
  --text: #2a2a2a;
  --muted: #6b6b6b;

  --orange: #f08a1a;
  --orange2:#ffb24a;
  --green: #28a745;
  --green2:#42c966;
  --blue:#2f80ed;
  --blue2:#4aa3ff;
  --tel:#f08a1a;
  --tel2:#ffb24a;
  --accent:#8a3e18;

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow: 0 10px 18px rgba(0,0,0,.12);
  --shadow-sm: 0 6px 12px rgba(0,0,0,.10);

  --pad: 16px;
  --section-gap: 18px;

  --fixed-cta-h: 40px;
}

/* =========================
  Reset
========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  background: var(--bg);
  line-height:1.65;
  overflow-x: hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

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

/* =========================
  PC background (outside LP)
========================= */
.pc-bg{
  position:fixed;
  inset:0;
  z-index:0;

  /* まずベースの柔らかいグラデ */
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(240,138,26,.20), transparent 60%),
    radial-gradient(900px 700px at 90% 20%, rgba(40,167,69,.18), transparent 60%),
    radial-gradient(900px 800px at 50% 95%, rgba(47,128,237,.16), transparent 60%),
    linear-gradient(180deg, #fbf7f1, #f6f3ee);
}

/* ここから：イラストを“薄く”重ねる */
.pc-bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image: url("../img/pc-bg-illust.png"); /* PNGなら .png */
  background-repeat: no-repeat;
  background-position: center center;

  /* ★ここが重要：画面全体に広げる */
  background-size: cover;

  /* 透け感 */
  opacity: .18;

  /* ほんの少し柔らかく（不要なら消してOK） */
  filter: blur(0.3px);
}

/* =========================
  LP Container (smartphone fixed width)
========================= */
.lp{
  position:relative;
  z-index:1;
  width:min(100%, var(--lp-max));
  margin:0 auto;
  background: var(--bg);
  min-height:100dvh;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 50px rgba(0,0,0,.10);
}

/* =========================
  Header
========================= */
.header{
  /*position:sticky;
  top:0;
  z-index:20;*/
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
/* ヘッダー：高さと詰まり対策 */
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 8px 16px;
}

/* ロゴ */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0; /* 狭い端末でのはみ出し防止 */
}

.brand__logo{
  height: 40px;
  width: auto;
  display:block;
}

/* ヘッダーCTA（画像ボタン） */
.header__cta{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
}

/* LINEボタン */
.header__line-btn{
  display:inline-flex;
  align-items:center;
  padding: 4px;
}

.header__line-btn img{
  height: 50px;
  width: auto;
  display:block;
}

/* PC表示 */
@media (min-width: 768px){
  .header__inner{
    padding: 10px 24px;
  }

  .brand__logo{
    height: 60px;
  }

  .header__line-btn img{
    height: 70px;
  }
}

/* 小さい端末対策 */
@media (max-width: 360px){
  .header__line-btn img{
    height: 36px;
  }

  .brand__logo{
    height: 32px;
  }
}


/* =========================
  Sections
========================= */
.section{
  padding: var(--section-gap) var(--pad);
}
.section--white{ background: #fff; }
.section--soft{ background: #fbf7f1; }

.section__inner{ max-width: 100%; }
.section__title{
  margin: 0 0 12px 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 20px;
  letter-spacing:.02em;
}


/* =========================
  FV
========================= */
.fv{
  position: relative;
  overflow: hidden;
  aspect-ratio: 1024 / 1364;
  max-height: 100svh;
}

.fv__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fv__bgimg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;
  object-position: center;
}


.fv__content{
  position: relative;
  z-index: 1;
  padding: 14px var(--pad) 16px;
}

.fv__illust {
  position: absolute;
  right: 0;
  top: 50%;
  width: 90%;
  z-index: 2;
  pointer-events: none;

  /* 既存の位置調整を変数化 */
  --illust-y: -5%;
  --illust-scale: 1.15;

  /* 初期状態：右から少し外して透明 */
  opacity: 0;
  transform: translateX(30%) translateY(var(--illust-y)) scale(var(--illust-scale));
  transform-origin: right center;

  /* ページ表示でスライドイン */
  animation: fvIllustIn 900ms cubic-bezier(.2,.8,.2,1) 120ms forwards;
}

@media (min-width: 768px){
  .fv__illust{
    --illust-y: 5%;
    transform: translateX(30%) translateY(var(--illust-y)) scale(var(--illust-scale));
  }
}

.fv__illust img {
  width: 100%;
  height: auto;
  display: block;
}

.fv__catch{
  margin: 35px 0 12px;
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .01em;

  /* 1行目を横並びにしつつ、2行目は自然に折り返す */
  display:flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 10px;

  /* 背景上でも読みやすくする */
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.18));

  /* 初期状態：少し小さく＆下から、透明 */
  opacity: 0;
  transform: translateY(12px) scale(.82);
  transform-origin: left top;

  /* バウンス風に飛び出す */
  animation: fvCatchPop 680ms cubic-bezier(.2,.9,.2,1) 350ms forwards;
}

@media (min-width: 768px){
  .fv__catch{
    margin: 90px 0 12px;
    gap: 8px 12px;
  }
}

/* 共通：白フチ＋立体影 */
.fv__catch .txt-pop{
  display:inline-block;
  /* 白フチ（webkit対応） */
  -webkit-text-stroke: 8px rgba(255,255,255,.92);
  paint-order: stroke fill;

  /* 互換用：text-shadowでフチを補強 */
  text-shadow:
    0 2px 0 rgba(0,0,0,.12),
    0 10px 18px rgba(0,0,0,.18),
    2px 0 0 rgba(255,255,255,.92),
    -2px 0 0 rgba(255,255,255,.92),
    0 2px 0 rgba(255,255,255,.92),
    0 -2px 0 rgba(255,255,255,.92),
    2px 2px 0 rgba(255,255,255,.92),
    -2px 2px 0 rgba(255,255,255,.92),
    2px -2px 0 rgba(255,255,255,.92),
    -2px -2px 0 rgba(255,255,255,.92);
}

/* 100％ */
.fv__catchTop{
  font-size: clamp(32px, 10vw, 70px);
  line-height: 1;
  color: #ff4a3a;
  font-style: italic;
  transform: skewX(-4deg);
  transform-origin: left bottom;

  /* 追加：100%で改行させる */
  flex: 1 0 100%;
  margin-bottom: 2px;
}

/* 寮費無料 */
.fv__catchMain{
  font-size: clamp(60px, 9.4vw, 120px);
  line-height: 1;
  color: #2a2a2a;
}

/* お仕事特集 */
.fv__catchSub{
  flex: 1 0 100%;
  margin-top: 2px;
  font-size: clamp(32px, 11vw, 74px);
  line-height: 1.03;
  color: #2a2a2a;
}

/* 文字色（中のspanで色分けする用） */
.fv__catch .is-red{ color:#ff4a3a; }
.fv__catch .is-blue{ color:#2f80ed; }
.fv__catch .is-green{ color:#28a745; }
.fv__catch .is-black{ color:#2a2a2a; }
.fv__catch .is-gray{
  color:#5b5b5b;
  font-size: 0.8em;
  margin-left: 7px;
}

.fv__sub {
  position: absolute;
  left: 10px;
  top: 95%;
  width: 55%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  animation: fvFadeIn 520ms ease-out 520ms forwards;
}

.fv__rep {
  position: absolute;
  left: -20px;
  bottom: -88%;
  width: 80%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  --rep-rotate: -6deg;
  transform: translateY(10px) rotate(-6deg);
  animation: fvFadeIn 560ms ease-out 720ms forwards;
  transform-origin: left bottom;
}

@media (min-width: 768px){
  .fv__sub { top: 100%; }
  .fv__rep {
    bottom: -100%;
    left: -30px;
  }
}

/* === badges (FV下部に3つ並び) === */
.badges{
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: -120%;
  z-index: 3;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

/* 画像自体 */
.badges .badge{
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  display: block;

  /* 初期状態（下＋透明） */
  opacity: 0;
  transform: translateY(14px);
  animation: fvBadgeIn 520ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* 左→右の順に遅延させる */
.badges .badge:nth-child(1){ animation-delay: 880ms; }
.badges .badge:nth-child(2){ animation-delay: 1020ms; }
.badges .badge:nth-child(3){ animation-delay: 1160ms; }

/* PCで少し余裕/サイズ調整したい場合 */
@media (min-width: 768px){
  .badges{
    bottom: -127%;
    gap: 14px;
  }
}

/* CTA全体：縦並び中央寄せ */
.ctaStack{
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 14px var(--pad) 0;
}

/* 画像ボタン：LP幅より少し小さく */
.ctaImg{
  width: min(90%, 620px);
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  /* 登場タイミング（全体の基準ディレイ） */
  --cta-delay: 1200ms;
}

@media (max-width: 360px){
  .ctaImg{ width: min(78%, 520px); }
}

.ctaImg img{
  width: 100%;
  height: auto;
  display: block;
}

/* 外側=リンク / 内側=アニメ対象（transform競合をここで制御） */
.ctaImg__inner{
  display: block;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));

  /* 1秒後にバウンスで登場 → 以降は「ブルブル→止まる」を繰り返す */
  animation:
    ctaBounceIn 680ms cubic-bezier(.2,.9,.2,1) var(--cta-delay) forwards,
    ctaShiver 3.2s ease-in-out calc(var(--cta-delay) + 820ms) infinite;
}

/* 2つ目（電話）だけ少し遅らせる */
.ctaImg--tel{ --cta-delay: 1340ms; }

/* hover/focus：影強め + 揺れ幅アップ */
.ctaImg:hover .ctaImg__inner,
.ctaImg:focus-visible .ctaImg__inner{
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.26));
  animation-name: ctaBounceIn, ctaShiverHover;
}

.ctaImg:focus-visible{
  outline: 3px solid rgba(255, 164, 40, .55);
  outline-offset: 6px;
  border-radius: 16px;
}

.fv__note{
  color: rgba(240,138,26,.85);
  position: relative;
  display: inline-block; /* テキスト幅に合わせて線を引く */
  margin: 10px 0 30px;
  font-weight: 900;
  letter-spacing: .02em;
}

/* 下の装飾ライン */
.fv__note::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 112%;
  height: 6px;

  /* “手描きっぽい帯” */
  background: linear-gradient(90deg,
    rgba(240,138,26,0) 0%,
    rgba(240,138,26,.55) 12%,
    rgba(240,138,26,.85) 50%,
    rgba(240,138,26,.55) 88%,
    rgba(240,138,26,0) 100%
  );

  border-radius: 999px;
  filter: blur(.15px);    /* ほんの少し柔らかく */
  opacity: .95;
}

@keyframes fvIllustIn{
  to{
    opacity: 1;
    transform: translateX(0) translateY(var(--illust-y)) scale(var(--illust-scale));
  }
}

@keyframes fvCatchPop{
  0%{
    opacity: 0;
    transform: translateY(14px) scale(.78);
  }
  55%{
    opacity: 1;
    transform: translateY(-14px) scale(1.12);
  }
  75%{
    transform: translateY(3px) scale(.98);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fvFadeIn{
  to{
    opacity: 1;
    transform: translateY(0) rotate(var(--rep-rotate));
  }
}

/* 下からスライド＋フェードイン */
@keyframes fvBadgeIn{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ctaBounceIn{
  0%{ opacity: 0; transform: translateY(18px) scale(.96); }
  55%{ opacity: 1; transform: translateY(-10px) scale(1.02); }
  75%{ transform: translateY(3px) scale(.99); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ctaShiver{
  /* 小刻みにブルブル（前半）→停止（中盤）→またブルブル（後半） */
  0%, 6%, 100%{ transform: translateX(0) translateY(0) scale(1); }
  1%{ transform: translateX(-3px) translateY(0) scale(1); }
  2%{ transform: translateX(3px) translateY(0) scale(1); }
  3%{ transform: translateX(-2px) translateY(0) scale(1); }
  4%{ transform: translateX(2px) translateY(0) scale(1); }
  5%{ transform: translateX(0) translateY(0) scale(1); }

  /* 停止時間 */
  6%, 72%{ transform: translateX(0) translateY(0) scale(1); }

  /* 2回目のブルブル */
  73%{ transform: translateX(-3px) translateY(0) scale(1); }
  74%{ transform: translateX(3px) translateY(0) scale(1); }
}

@keyframes ctaShiverHover{
  0%, 6%, 100%{ transform: translateX(0) translateY(-1px) scale(1.01); }
  1%{ transform: translateX(-5px) translateY(-1px) scale(1.01); }
  2%{ transform: translateX(5px) translateY(-1px) scale(1.01); }
  3%{ transform: translateX(-3px) translateY(-1px) scale(1.01); }
  4%{ transform: translateX(3px) translateY(-1px) scale(1.01); }
  5%{ transform: translateX(0) translateY(-1px) scale(1.01); }

  6%, 72%{ transform: translateX(0) translateY(-1px) scale(1.01); }

  73%{ transform: translateX(-5px) translateY(-1px) scale(1.01); }
  74%{ transform: translateX(5px) translateY(-1px) scale(1.01); }
  75%{ transform: translateX(-3px) translateY(-1px) scale(1.01); }
  76%{ transform: translateX(3px) translateY(-1px) scale(1.01); }
  77%{ transform: translateX(0) translateY(-1px) scale(1.01); }
  78%{ transform: translateX(-2px) translateY(-1px) scale(1.01); }
  79%{ transform: translateX(2px) translateY(-1px) scale(1.01); }
  80%{ transform: translateX(0) translateY(-1px) scale(1.01); }
}

@media (prefers-reduced-motion: reduce){
  .fv__illust{
    animation: none;
    opacity: 1;
    transform: translateX(0) translateY(var(--illust-y)) scale(var(--illust-scale));
  }

  .fv__catch{
    animation: none;
    opacity: 1;
    transform: none;
  }

  .fv__sub{
    animation: none;
    opacity: 1;
    transform: none;
  }

  .fv__rep{
    animation: none;
    opacity: 1;
    transform: rotate(-6deg);
    transform-origin: left bottom;
  }

  .badges .badge{
    animation: none;
    opacity: 1;
    transform: none;
  }

  .ctaImg__inner{
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* =========================
   ② 共感（悩み）
========================= */
/* セクション背景：#f4f1ed → #f6f3ee グラデーション */
#worries{
  background: linear-gradient(180deg, #f4f1ed 0%, #f6f3ee 100%);
  padding-bottom: 24px;
}

#worries .section__inner {
  max-width: 960px;
  margin: 0 auto;
}

.worries__title{
  /* セクションの左右 padding を打ち消してフル幅に */
  width: calc(100% + (var(--pad) * 2));
  margin: 0 calc(var(--pad) * -1) 18px;

  /* 中央寄せ */
  display: block;

  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 6px 14px rgba(0,0,0,.08);
}

.worries__title img{
  width: 100%;
  height: auto;
  display: block;

  /* ボタン感を消す */
  border-radius: 0;
  box-shadow: none;
}

.worries__list {
  display: grid;
  gap: 5px;
  width: min(860px, 100%);
  margin: 0 auto;
}

.worries__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.worries__close{
  /* セクション内で“横幅100%帯”にする（sectionの左右paddingを打ち消す） */
  width: calc(100% + (var(--pad) * 2));
  margin: 18px calc(var(--pad) * -1) 0;
  padding: 18px var(--pad);
  text-align: center;

  position: relative;

  /* ボタンっぽさを消す */
  border-radius: 0;
  border: 0;
  box-shadow: none;

  /* アピール感のある帯（暖色グラデ＋ほんのりハイライト） */
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(90deg, rgba(240,138,26,.18), rgba(255,178,74,.32), rgba(240,138,26,.18));
}

.worries__closeText{
  position: relative;
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(20px, 4.6vw, 28px);
  letter-spacing: .03em;
  color: #5a2b06;

  /* 文字だけ立体に（帯はフラットに） */
  text-shadow:
    0 2px 0 rgba(255,255,255,.75),
    0 10px 18px rgba(0,0,0,.10);
}

/* マーカー風の下線（強め） */
.worries__closeText::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 110%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(240,138,26,0) 0%,
    rgba(240,138,26,.35) 12%,
    rgba(240,138,26,.95) 50%,
    rgba(240,138,26,.35) 88%,
    rgba(240,138,26,0) 100%
  );
  opacity: .95;
  filter: blur(.2px);
}

/* =========================
   Reveal animation (scroll)
========================= */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(1px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: opacity, transform;
}

.reveal[data-anim="left"]  { transform: translate3d(-26px, 0, 0); }
.reveal[data-anim="right"] { transform: translate3d( 26px, 0, 0); }
.reveal[data-anim="fade"]  { transform: translate3d(0, 10px, 0); }

/* 表示された状態 */
.reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* ① 見出し：バウンス */
.reveal[data-anim="bounce"].is-inview {
  animation: bounceInUp .9s ease both;
}

/* キーフレーム */
@keyframes bounceInUp {
  0%   { opacity: 0; transform: translate3d(0, 36px, 0) scale(.98); }
  60%  { opacity: 1; transform: translate3d(0, -10px, 0) scale(1); }
  80%  { transform: translate3d(0, 5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}


/* =========================
  ③ 解決策提示：3ポイント + 中間CTA
========================= */
.benefit{
  position: relative;
  overflow: visible;
  background: transparent;
}

/* 背景画像を全面に敷く */
.benefit__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow: hidden;
  background: var(--bg);
}

.benefit__bg img{
  padding-top: 0px;
  width: 100%;
  height: auto;
  display:block;

  /* SPで右が欠けるのは object-fit:cover のトリミングが原因になりやすい */
  object-fit: contain;
  object-position: center top;

  /* absolute背景として上から敷く */
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 768px){
  .benefit__bg img{
    object-position: center 15%;
  }
}

.benefit__bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  background: linear-gradient(
    to bottom,
    rgba(246,243,238,0) 60%,
    rgba(246,243,238,.65) 82%,
    rgba(246,243,238,1) 100%
  );
}

/* 中身 */
.benefit__inner{
  position: relative;
  z-index:1;
  display:grid;
  gap: 14px;
  justify-items: center;
  width: 100%;
  padding-top: 110px;
}

.benefit__desc{
  margin: 0;
  width: min(92%, 720px);
  font-weight: 800;
  font-size: 0.9em;
  color: #3a3a3a;
  text-align: center;
  line-height: 1.75;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.benefit__desc__accent {
  color: var(--accent);
  font-size: 1.1em;
}

@media (min-width: 768px){
  .benefit__desc{
    margin-top: 50px;
    font-size: 1.3em;
  }

  .benefit__desc__accent {
    font-size: 1.4em;
  }
}

/* ---- Carousel ---- */
.benefitCarousel{
  width: min(94%, 620px);
  width: 100%;
  position: relative;
  perspective: 1300px;
}

/* 横スワイプレール（scroll-snapで気持ちよく） */
.benefitCarousel__track{
  display:flex;
  gap: 12px;

  overflow-x: auto;
  overflow-y: visible;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  padding: 10px 10% 16px;
  scrollbar-width: none;

  align-items: center;
  transform-style: preserve-3d;
}
.benefitCarousel__track::-webkit-scrollbar{ display:none; }
/* ループ補正（クローン→本体へ瞬間移動）時の“カクッ”対策 */
.benefitCarousel__track.is-jumping{
  scroll-snap-type: none;
}

/* 1枚=少し狭め（左右が覗く） */
.benefitCarousel__slide{
  flex: 0 0 72%;
  scroll-snap-align: center;

  transform: translateZ(0) scale(.92);
  opacity: .75;

  transition: transform .28s ease, opacity .28s ease, filter .28s ease;
  will-change: transform;
}

.benefitCarousel__slide img{
  width:100%;
  height:auto;
  display:block;
  /* 立体感（中心に寄せた見え方） */
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.20));
}

.benefitCarousel__slide.is-center{
  transform: translateZ(120px) scale(1);
  opacity: 1;
}
.benefitCarousel__slide.is-left{
  transform: translateZ(60px) translateX(12%) rotateY(18deg) scale(.88);
  opacity: .70;
}
.benefitCarousel__slide.is-right{
  transform: translateZ(60px) translateX(-12%) rotateY(-18deg) scale(.88);
  opacity: .70;
}
.benefitCarousel__slide.is-far{
  transform: translateZ(0) scale(.86);
  opacity: .45;
  filter: saturate(.9);
}


/* ドット */
.benefitCarousel__dots{
  display:flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.benefitDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  cursor:pointer;
  background: rgba(120, 80, 40, .22);
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  transition: transform .12s ease, background .12s ease;
}
.benefitDot.is-active{
  background: rgba(240,138,26,.85);
  transform: scale(1.15);
}

/* 小さい端末で左右の覗き幅を少し減らす */
@media (max-width: 360px){
  .benefitCarousel__track{ padding: 10px 10% 16px; }
  .benefitCarousel__slide{ flex-basis: 86%; }
}

/* CTA画像ボタン */
.benefitCta{
  padding-top: 10px;
  width: min(92%, 680px);
  display:block;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}
.benefitCta img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.18));
}

.benefitNote{
  width: min(92%, 720px);
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}

@media (min-width: 768px){
  .benefitNote{ font-size: 1.2em; }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .benefitCta img,
  .benefitCarousel__slide img{
    filter: none;
  }

  .benefitCarousel__slide{
    transition: none;
    transform: none;
    opacity: 1;
  }
}


/* =========================
  ④ この仕事が選ばれる理由
========================= */
.reasons{
  position: relative;
  overflow: hidden; /* フェードや背景を内側で切る */
  padding: 0;       /* 背景画像で見せるので section padding は使わない */
  background: #f5f2ed;
}

/* 背景（タイトル入り） */
.reasons__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 背景画像は “横幅は維持しつつ” 高さにもフィットさせる */
.reasons__bg img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

/* ★下側を徐々に白へフェード（透過していく見え方） */
.reasons__bg::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  /* 下に行くほど白が強くなる */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 55%,
    rgba(255,255,255,1) 100%
  );
}

/* 中身 */
.reasons__inner{
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;

  /* タイトル画像の分、上を空ける */
  padding: 50px var(--pad) 26px;
}

/* 各カード */
.reasons__item{
  width: min(100%, 720px);
  margin: 0 auto;
}

.reasons__item img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.12));
}

.reasons__item + .reasons__item{
  margin-top: -6px; /* -6〜-16pxで調整 */
}

/* PCのときだけ背景を少し下にずらす（上が切れる対策） */
@media (min-width: 768px){
  .reasons__inner{
    padding-top: 100px; /* タイトルの位置が合わないならここも微調整 */
  }
}

/* すごく小さい端末のときだけ詰める */
@media (max-width: 360px){
  .reasons__inner{
    padding-top: 10px;
  }
}


/* =========================
   ⑤ 寮・住環境
========================= */
.dorm{
  position: relative;

  /* ★背景表示の基準となる固定高さ */
  min-height: clamp(520px, 110vw, 550px);

  padding: 0;          /* paddingは inner側へ移す */
  overflow: hidden;    /* はみ出し防止 */
}

.dorm__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.dorm__bg img{
  width: 100%;
  height: 100%;
  display: block;

  object-fit: contain;
  object-position: center top;
}

.dorm__inner{
  position: absolute;
  inset: 0;
  z-index: 1;

  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 100px var(--pad) 24px; /* ここで余白を作る */
}

/* 説明テキスト */
.dorm__text{
  margin: 10px 30px 70px;
  text-align: start;
}

.dorm__lead{
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.1em;
  line-height: 1.5;
  color: var(--text);
  font-weight: 700;

  /* 袋文字（白フチ） */
  text-shadow:
    2px 0 0 #fbeceb,
   -2px 0 0 #fbeceb,
    0 2px 0 #fbeceb,
    0 -2px 0 #fbeceb,
    2px 2px 0 #fbeceb,
   -2px 2px 0 #fbeceb,
    2px -2px 0 #fbeceb,
   -2px -2px 0 #fbeceb;
    0 4px 10px rgba(0,0,0,.12); /* うっすら影 */
}

/* カード2×2 */
.dorm__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.dorm__item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px; /* 画像が角丸なら不要。合わなければ削除 */
}

/* PCで少しゆとり */
@media (min-width: 768px){
  .dorm{
    min-height: clamp(980px, 100vw, 980px);
  }
  .dorm__text{ margin: 10px 40px 130px; }
  .dorm__lead{ font-size: 1.7em;; }
  .dorm__grid{ gap: 14px; }
  .dorm__inner{ padding: 180px var(--pad) 24px; }
  .dorm__bg img{
    object-fit: cover;
    object-position: center top;
  }
}


/* =========================
   ⑥ 仕事内容（jobs）
========================= */
.jobs{
  position: relative;
  width: 100%;
  overflow: hidden;

  /* ★背景画像(jobs_bg)の比率に合わせてセクション自体の高さを決める
     jobs_bg.png: 1024x1364（= 1024 / 1364） */
  aspect-ratio: 1024 / 1364;

  /* 端末によっては小さすぎ/大きすぎを防ぐ */
  min-height: 560px;
  max-height: 860px;
}

/* 背景（見出し込み） */
.jobs__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.jobs__bg img{
  width: 100%;
  height: 100%;

  /* 横100%を優先して、余白が出ないように高さも埋める */
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 上に載せるコンテンツ（背景の上に重ねて、セクションの高さに影響させない） */
.jobs__inner{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: min(var(--lp-max), 100%);
  margin: 0 auto;
  padding: 150px var(--pad) 10px;
}

/* カード */
.jobs__list{
  display: grid;
  gap: 8px;
}

.jobs__item img{
  width: 100%;
  height: auto;
  display: block;
}

/* 下部テキスト（袋文字） */
.jobs__note{
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: 2px;

  /* 袋文字（白フチ） */
 /* -webkit-text-stroke: 6px rgba(255,255,255,.95);
  paint-order: stroke fill;*/
}

/* stroke 非対応ブラウザ用の保険（白フチ擬似） */
/*.jobs__note{
  text-shadow:
    2px 0 0 rgba(255,255,255,.95),
   -2px 0 0 rgba(255,255,255,.95),
    0 2px 0 rgba(255,255,255,.95),
    0 -2px 0 rgba(255,255,255,.95),
    2px 2px 0 rgba(255,255,255,.95),
   -2px 2px 0 rgba(255,255,255,.95),
    2px -2px 0 rgba(255,255,255,.95),
   -2px -2px 0 rgba(255,255,255,.95);
}*/

@media (min-width: 768px){
  .jobs{
    min-height: 1000px;
    max-height: 1300px;
  }
  .jobs__inner{
    padding: 250px var(--pad) 0px;
  }
  .jobs__note{
    font-size: 1.35rem;
  }
}


/* =========================
   Campaign（キャンペーン・特典）
========================= */
.campaign{
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #f6f3ee; /* 画像外に出たときの保険 */
}

/* 背景画像（セクション画像） */
.campaign__bg{
  position: relative;
  width: 100%;
}
.campaign__bg img{
  width: 100%;
  height: auto;
  display: block;
}

/* CTA：背景画像の“下部に重ねる” */
.campaign__cta{
  position: absolute;
  left: 0;
  right: 0;

  bottom: calc(var(--fixed-cta-h) - 48px);

  z-index: 2;

  /* 中央寄せ（transformでズレないようにする） */
  display: flex;
  justify-content: center;

  /* 端末端で切れないように左右の安全余白 */
  padding: 0 var(--pad);

  background: transparent;
}

.campaign__ctaLink{
  position: relative;
  display: block;
  width: min(92%, 680px);
  -webkit-tap-highlight-color: transparent;

  /* 光エフェクト用 */
  overflow: hidden;
  border-radius: 999px;
}

.campaign__ctaLink img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.18));
}

/* === CTA：光が走るエフェクト === */
.campaign__ctaLink::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 40%;
  height: 180%;

  /* 斜めの光 */
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.0) 18%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 82%,
    rgba(255,255,255,0) 100%
  );

  transform: skewX(-20deg);
  opacity: .85;

  /* 画像の上に重ねる */
  pointer-events: none;
  mix-blend-mode: screen;

  /* 走らせる */
  animation: ctaShine 2.8s ease-in-out infinite;
}

/* hover/タップ時は少し強め */
.campaign__ctaLink:hover::before,
.campaign__ctaLink:focus-visible::before{
  opacity: 1;
  animation-duration: 2.2s;
}

/* クリック中は一旦消して邪魔しない */
.campaign__ctaLink:active::before{
  opacity: 0;
}

/* 光の移動 */
@keyframes ctaShine{
  0%   { transform: translateX(0) skewX(-20deg); opacity: 0; }
  12%  { opacity: .9; }
  45%  { transform: translateX(240%) skewX(-20deg); opacity: .9; }
  60%  { opacity: 0; }
  100% { transform: translateX(240%) skewX(-20deg); opacity: 0; }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .campaign__ctaLink::before{
    animation: none;
    opacity: 0;
  }
}
@media (min-width: 768px){
  .campaign__cta{
    bottom: calc(var(--fixed-cta-h) - 35px);
  }
  .campaign__ctaLink{
    width: min(72%, 720px);
  }
}

/* 既存の .reveal はそのまま使う前提で、
   data-anim="big-bounce" だけ “強め” に上書き */
.reveal[data-anim="big-bounce"]{
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.92);
  filter: blur(.8px);
}

/* is-inview になったら強めバウンス */
.reveal[data-anim="big-bounce"].is-inview{
  animation: bigBounceIn 900ms cubic-bezier(.2,.9,.2,1) both;
  filter: blur(0);
}

/* ちょい強めのバウンス */
@keyframes bigBounceIn{
  0%   { opacity: 0; transform: translate3d(0, 34px, 0) scale(.88); }
  55%  { opacity: 1; transform: translate3d(0, -16px, 0) scale(1.06); }
  75%  { transform: translate3d(0, 6px, 0) scale(.99); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal[data-anim="big-bounce"]{
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
  .campaign__ctaLink img{ filter: none; }
}


/* =========================
   Flow（応募〜入社の流れ）
========================= */
.flow{
  margin-top: 3px;
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 400px;
}

/* 背景（見出し込み） */
.flow__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #f6e0d0;
}

.flow__bg::after{
  filter: blur(1px);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;              /* カード・矢印より上 */
  pointer-events: none;    /* 操作を邪魔しない */

  background: linear-gradient(
    to bottom,
    rgba(246,243,238,0) 0%,     /* 開始：透明 */
    #f6e0d0 80%,    /* 15%で完全表示 */
    #f6e0d0 80%,    /* 85%まで維持 */
    rgba(246,243,238,0) 100%    /* 終了：透明 */
  );
}

.flow__bg img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center top;
}

/* 上に載せる */
.flow__inner{
  position: relative;
  z-index: 1;
  width: min(var(--lp-max), 100%);
  margin: 0 auto;

  /* 見出しが背景に含まれている前提：上を空ける */
  padding: 150px var(--pad) 30px;
}

/* ステージ：矢印を重ねるため relative */
.flow__stage{
  position: relative;
}

/* カード */
.flow__card{
  width: 100%;
  position: relative;
  z-index: 2;
}
.flow__card img{
  width: 100%;
  height: auto;
  display: block;
}

/* 矢印：カードの間に重ねる（absolute） */
.flow__arrow{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(10%, 360px);
  pointer-events: none;
}
.flow__arrow img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

/* どの“間”に置くか：--rowで切り替え（微調整しやすい） */
.flow__arrow[style*="--row:1"]{ top: 28%; } /* 1と2の間 */
.flow__arrow[style*="--row:2"]{ top: 59%; } /* 2と3の間 */

/* カード同士の間隔：画像余白がある前提で“詰める” */
.flow__card + .flow__card{
  margin-top: -10px; /* ここで重なり感を調整 */
}

/* -------------------------
   既存 .reveal を流用して
   Flow専用アニメーションを追加
------------------------- */

/* カード：右→左（ゆっくりめ） */
.reveal[data-anim="flow-card"]{
  opacity: 0;
  transform: translate3d(34px, 0, 0);
  filter: blur(.6px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.2,.8,.2,1),
    filter 1.05s ease;
  will-change: opacity, transform, filter;
}
.reveal[data-anim="flow-card"].is-inview{
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

/* 矢印：上→下（カードより遅れて入る） */
.reveal[data-anim="flow-arrow"]{
  opacity: 0;
  transform: translate3d(-50%, -14px, 0); /* left:50%前提でXも含める */
  filter: blur(.6px);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.2,.8,.2,1),
    filter .9s ease;

  /* ★遅延：カードが出たあとに矢印が降りる */
  transition-delay: .35s;
  will-change: opacity, transform, filter;
}
.reveal[data-anim="flow-arrow"].is-inview{
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  filter: blur(0);
}

/* PC微調整（見出しの位置・余白に合わせて） */
@media (min-width: 768px){
  .flow{
    min-height: 600px;
  }
  .flow__inner{
    padding: 260px var(--pad) 60px;
  }

  /* 矢印サイズと位置調整 */
  .flow__arrow{
    width: min(10%, 420px);
  }
}


/* Q&A 背景（紙っぽい質感） */
.qa {
  padding: 1px 16px;
  background:
    linear-gradient(
      to bottom,
      #f6e0d0 0%,
      #f8eadf 40%,
      #fbf7f2 100%
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.15),
      rgba(255,255,255,.15) 2px,
      rgba(255,255,255,0) 4px,
      rgba(255,255,255,0) 6px
    );
}

.qa__inner {
  max-width: 720px;
  margin: 0 auto;
}

.qa__title {
  position: relative;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 32px;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .03em;

  /* ★袋文字（白フチ） */
  -webkit-text-stroke: 10px rgba(255,255,255,.95);
  paint-order: stroke fill;

  color: #5a3b22;

  /* stroke非対応の保険 + 立体感 */
  text-shadow:
    2px 0 0 rgba(255,255,255,.95),
   -2px 0 0 rgba(255,255,255,.95),
    0 2px 0 rgba(255,255,255,.95),
    0 -2px 0 rgba(255,255,255,.95),
    2px 2px 0 rgba(255,255,255,.95),
   -2px 2px 0 rgba(255,255,255,.95),
    2px -2px 0 rgba(255,255,255,.95),
   -2px -2px 0 rgba(255,255,255,.95),
    0 10px 18px rgba(0,0,0,.12);
}

/* ★タイトル下のグラデ下線 */
.qa__title::after{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: min(84%, 560px);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(240,138,26,0) 0%,
    rgba(240,138,26,.35) 14%,
    rgba(255,178,74,.85) 50%,
    rgba(240,138,26,.35) 86%,
    rgba(240,138,26,0) 100%
  );
  filter: blur(.15px);
  opacity: .95;
}

.qa__title span {
  color: #6a8f3d;
}

/* Q&Aカード */
.qa__item {
  background: linear-gradient(
    135deg,          /* 左上 → 右下 */
    #f7efe8 0%,
    #fffaf4 100%
  );
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
    /* ★ボーダー + 立体感 */
  border: 1px solid rgba(120, 80, 40, .22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 10px 18px rgba(0,0,0,.08);
}

/*.qa__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.6),
    rgba(255,255,255,0) 40%
  );
}*/

/* ★開いた時は薄い黄色 */
.qa__item.is-open{
  /*background: rgba(255, 244, 205, .82);*/
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(255, 244, 205, .82), transparent 60%),
    radial-gradient(900px 700px at 90% 20%, #f7efe8, transparent 60%),
    radial-gradient(900px 800px at 50% 95%, #fbf7f1, transparent 60%),
    linear-gradient(180deg, #fbf7f1, #f6f3ee);

  border-color: rgba(240, 163, 38, .45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 12px 22px rgba(0,0,0,.10);
}


/* 質問 */
.qa__question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: none;
  font-size: 1rem;
  font-family: var(--font-body);
  text-align: left;
  color: #5a3b22;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.qa__icon {
  background: linear-gradient(
    180deg,
    #f7b23a 0%,
    #f08a1a 100%
  );
  color: #fff;
  font-weight: 900;
  padding: 4px 11px;
  border-radius: 10px;
  font-size: 1.3rem;

  border: 1px solid rgba(255,255,255,.45);

  /* 立体感 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -2px 0 rgba(0,0,0,.15),
    0 4px 8px rgba(0,0,0,.18);
}

.qa__arrow {
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 3px solid #5a3b22;
  border-bottom: 3px solid #5a3b22;
  transform: rotate(45deg);
  transition: transform .3s;
}

/* 回答 */
.qa__answer {
  max-height: 0;
  overflow: hidden;
  padding: 0px 18px;
  transition: max-height .4s ease, padding .3s ease;
  font-size: .95rem;
  line-height: 1.7;
  color: #4a3423;
}

.qa__answer strong { font-size: 1.1rem; }

.qa__icon--a {
  background: linear-gradient(
    180deg,
    #7fcf8c 0%,
    #42c966 100%
  );
  border-color: rgba(255,255,255,.45);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 4px 8px rgba(0,0,0,.18);
}

/* OPEN状態 */
.qa__item.is-open .qa__answer {
  max-height: 300px;
  padding: 16px 18px 20px;
}

.qa__item.is-open .qa__arrow {
  transform: rotate(-135deg);
}


/* =========================
   ⑩ 最終CTA
========================= */
.apply{
  position: relative;
  isolation: isolate;
  /* セクションが背景より長くならないように “余白を作りすぎない” */
  padding: 0;
  margin: 0;
}

.apply__bg{
  position: relative;
  width: 100%;
  /* 画面幅いっぱい。はみ出し防止 */
  overflow: hidden;
}

.apply__bg img{
  display: block;
  width: 100%;
  height: clamp(450px, 120vw, 860px);
  object-fit: cover;
  object-position: center top;
}

/* CTAを背景に重ねる */
.apply__inner{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* 背景全体はクリック不可 */
  display: grid;
  align-items: center;
}

.apply__ctaStack{
  pointer-events: auto; /* ボタンだけクリック可 */
  width: min(92%, 560px);
  margin: 0 auto;
  transform: translateY(83%);
  display: grid;
  gap: 14px;
}

.apply__ctaBtn{
  display: block;
  border-radius: 999px;
  overflow: hidden;
  /* 押したくなる微妙な浮き */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
  -webkit-tap-highlight-color: transparent;
}

.apply__ctaBtn img{
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px){
  .apply__ctaStack{
    gap: 18px;
  }
}

/* =========================
   アニメ（じわーっと遅いフェード＋ほんの少しスケール）
========================= */
.reveal[data-anim="apply-fade"]{
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition:
    opacity 1.4s ease,
    transform 1.6s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.reveal.is-inview[data-anim="apply-fade"]{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* CTA：深呼吸アニメーション */
.apply__ctaBtn.reveal.is-inview[data-anim="apply-fade"] {
  animation: applyCtaBreath 4.8s cubic-bezier(.45, 0, .55, 1) infinite;
  transform-origin: center;
  will-change: opacity, transform;
}

/* 2つ目のCTAは位相をずらす */
.apply__ctaStack .apply__ctaBtn:nth-child(2).reveal.is-inview[data-anim="apply-fade"] {
  animation-delay: 1.8s;
}

@keyframes applyCtaBreath {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .75;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* =========================
  Footer
========================= */
.footer{
  padding: 50px 0 90px; /* 下部固定CTAがあるので余白 */
  background: rgba(255,255,255,.72);
  border-top: 1px solid rgba(0,0,0,.06);
}

.footer__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;
}

.footer__brand{
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: start;
}

.footer__logo{
  width: min(260px, 80vw);
  height: auto;
}

.footer__company{
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(247,239,232,.92), rgba(255,250,244,.92));
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  color: var(--text);
  font-family: var(--font-body);
}

.footer__row{
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 10px;
  padding: 10px 0;
  font-size: 0.8rem;
}

.footer__row + .footer__row{
  border-top: 1px dashed rgba(0,0,0,.12);
}

.footer__company dt{
  font-weight: 800;
  color: rgba(0,0,0,.72);
}

.footer__company dd{
  margin: 0;
  font-weight: 600;
  line-height: 1.6;
}

.footer__permits{
  margin: 0;
  padding-left: 1.2em;
  text-align: left;
}

.footer__permits li{
  margin: 4px 0;
}

.footer__small{
  margin-top: 14px;
  text-align: center;
}

.footer__copy{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

@media (min-width: 768px){
  .footer__company{ padding: 16px 20px; }
  .footer__row{ font-size: 1rem; }
}


/* =========================
  Fixed CTA (bottom)
========================= */
.fixedCta{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  width: min(100%, var(--lp-max));
  height: auto;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 0px 10px;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  border: none;
}

.fixedCta__btn{
  flex: 0 0 50%;
  min-height: 62px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.15;

  background: rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.12),
    0 8px 16px rgba(0,0,0,.18);

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fixedCta__btn--line{
  color: #fff;
  background:
    linear-gradient(180deg, rgba(68,211,108,.55), rgba(26,168,70,.55));
}

.fixedCta__btn--tel{
  color: #6b6b6b;
  background:
    linear-gradient(180deg, rgba(255,178,74,.6), rgba(240,138,26,.6));

  /* 右（テキスト）/左（アイコン）を横並びにする */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
}

.fixedCta__btn:active{
  transform: translateY(1px) scale(.98);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.14);
}

.fixedCta__telText{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}

.fixedCta__telIcon{
  flex: 0 0 auto;
  font-size: 1.4rem;
  line-height: 1;
  opacity: .95;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

.fixedCta__telTop{ font-size: 13px; }
.fixedCta__telSub{ font-size: 10px; opacity:.9; margin-top: 1px;}

.fixedCta__btn i{
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

/* PC時：中身を大きくする */
@media (min-width: 768px){
  .fixedCta{
    gap: 10px;
    padding: 0 14px;
  }

  .fixedCta__btn{
    min-height: 72px;     /* ボタンの押しやすさもUP */
    padding: 12px 16px;
    border-radius: 18px;
  }

  /* LINE側（テキスト＋アイコン） */
  .fixedCta__btn--line{
    font-size: 25px;
  }
  .fixedCta__btn--line i{
    font-size: 1.5rem;
  }

  /* TEL側（アイコン＋2行テキスト） */
  .fixedCta__telIcon{
    font-size: 2rem;    /* 電話アイコン */
  }
  .fixedCta__telTop{
    font-size: 1.5rem;     /* 電話番号 */
  }
  .fixedCta__telSub{
    font-size: 15px;      /* フリーダイヤル */
  }
}

@media (max-width: 360px){
  .fixedCta__btn{ min-height: 58px; padding: 8px 10px; }
  .fixedCta__telTop{ font-size: 12px; }
  .fixedCta__telSub{ font-size: 10px; }
}

/* =========================
  Small adjustments
========================= */
@media (max-width: 360px){
  .fv__titleTop{ font-size: 30px; }
  .fv__titleBottom{ font-size: 40px; }
  .fv__illust{ width: 138px; }
  .trustGrid{ grid-template-columns: 1fr; }
}