/* KEIO介護 採用LP
   デザイン画像（幅683）を1倍として、--u で画面幅に合わせて拡大（最大1.6倍）。
   639px以下はスマホ用の縦並びに組み替える。 */

:root {
  --u: clamp(1px, calc(100vw / 683), 1.6px);
  --navy: #1b2842;
  --ink: #2f3a4c;
  --gray: #5b6270;
  --pink: #e8798c;
  --coral: #f26d6f;
  --coral2: #f58c80;
  --yellow: #f6d268;
  --line: #e9edf1;
  --hand: "Zen Kurenaido", "Klee One", cursive;
  --sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  line-height: 1.7;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.wrap {
  position: relative;
  width: 100%;
  max-width: calc(683 * var(--u));
  margin: 0 auto;
  padding: 0 calc(20 * var(--u));
}
.hand { font-family: var(--hand); font-weight: 400; color: var(--navy); }
.ml { display: inline-block; margin-left: 1.2em; }
.brush { display: block; color: var(--yellow); overflow: visible; }

/* ---------- ヘッダー ---------- */
.site-header { /* スクロールしても上に固定。一番上（.at-top）の時だけ透明にして写真を見せる */
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 10px rgba(30, 50, 80, .08);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.at-top { background: rgba(255, 255, 255, 0); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.snav { display: none; } /* スマホだけで出すページ内タブ */
main [id], #top { scroll-margin-top: calc(70 * var(--u)); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(62 * var(--u));
}
.logo { text-decoration: none; color: #374552; line-height: 1.2; }
.logo-name {
  display: block; font-weight: 900; letter-spacing: .04em;
  font-size: calc(18.5 * var(--u));
}
.logo-tag { display: block; font-size: calc(7.5 * var(--u)); margin-top: calc(3 * var(--u)); padding-left: .6em; letter-spacing: .06em; }
.gnav { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.gnav a {
  font-size: calc(9.5 * var(--u)); font-weight: 700; text-decoration: none; color: #2c3445;
  letter-spacing: .03em;
}
.gnav a:not(.gnav-btn):hover { color: var(--pink); }
.gnav .gnav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(72 * var(--u)); height: calc(25 * var(--u));
  padding: 0 calc(14 * var(--u)); border-radius: 999px;
  background: var(--pink); color: #fff;
  box-shadow: 0 2px 8px rgba(232, 121, 140, .3);
  transition: transform .2s, box-shadow .2s;
}
.gnav .gnav-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232, 121, 140, .45); }

/* ---------- ヒーロー ---------- */
.hero {
  position: relative; overflow: hidden;
  height: calc(540 * var(--u));
  background: #cfe6f6;
}
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 30%;
  transform: scale(1.14); transform-origin: 66% 18%;
}
.hero::before { /* 左側を少し明るくして文字を読みやすく */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(240,247,252,.55) 0%, rgba(240,247,252,.25) 38%, rgba(240,247,252,0) 58%);
}
.hero-inner { position: relative; z-index: 2; height: 100%; }
.hero-title { /* 2行目の右端が人物の髪（999px以下で約377u・1000px以上で約395u）から16u以上離れる大きさ */
  position: absolute; left: calc(32 * var(--u)); top: calc(128 * var(--u));
  font-size: min(calc(32 * var(--u)), 4.6vw); line-height: 1.42; letter-spacing: .04em;
  -webkit-text-stroke: calc(1.2 * var(--u)) var(--navy);
  transform: rotate(-3deg); transform-origin: left top;
}
.hw-line { display: block; white-space: nowrap; }
.hw-line:nth-child(2) { margin-left: -.45em; }
.hw-line:nth-child(3) { margin-left: .2em; }
.kakko { display: inline-block; }
.hero-brush {
  width: 7.1em; height: .68em;
  margin: .05em 0 0 -.1em;
}
.hero-lead {
  position: absolute; left: calc(44 * var(--u)); top: calc(316 * var(--u));
  font-size: calc(11.5 * var(--u)); line-height: 2; letter-spacing: .08em; color: #253047;
}
.hero-badges {
  position: absolute; left: calc(25 * var(--u)); top: calc(388 * var(--u));
  display: flex; gap: calc(4 * var(--u));
}
.badge {
  width: calc(108 * var(--u)); height: calc(108 * var(--u)); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-weight: 700; font-size: calc(10.5 * var(--u)); line-height: 1.55; color: #2c3445;
  box-shadow: 0 4px 14px rgba(40, 70, 100, .08);
}
.badge svg {
  width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin-bottom: calc(6 * var(--u));
  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.badge--pink { background: rgba(252, 234, 240, .95); } .badge--pink svg { stroke: #4b6478; }
.badge--blue { background: rgba(224, 242, 253, .95); } .badge--blue svg { stroke: #3f9fca; }
.badge--green { background: rgba(230, 244, 216, .95); } .badge--green svg { stroke: #4d8a56; }
.hero-note {
  position: absolute; right: calc(28 * var(--u)); top: calc(416 * var(--u));
  color: #fff; font-size: calc(22 * var(--u)); line-height: 1.45;
  transform: rotate(-6deg); text-shadow: 0 1px 6px rgba(0, 20, 50, .25);
  isolation: isolate;
}
.hero-note::before { /* 白い手書きの背後に淡い暗がり（写真の明るい所でも読めるように） */
  content: ""; position: absolute; inset: -34% -22% -20% -22%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(16, 32, 58, .34), rgba(16, 32, 58, .18) 55%, rgba(16, 32, 58, 0));
}
.hero-note .brush { color: rgba(255,255,255,.9); width: calc(165 * var(--u)); height: calc(10 * var(--u)); margin: calc(2 * var(--u)) 0 0 calc(-6 * var(--u)); }
.hero-note-logo {
  display: block; text-align: right; font-family: var(--sans); font-weight: 700;
  font-size: calc(11 * var(--u)); letter-spacing: .08em; margin-top: calc(6 * var(--u)); transform: rotate(6deg);
}

/* ---------- 私たちについて ---------- */
.about {
  position: relative; display: grid;
  grid-template-columns: 34% 1fr 23%;
  min-height: calc(265 * var(--u));
  background: linear-gradient(180deg, #f5fafc, #f8fbfc);
}
.about-photo { position: relative; overflow: hidden; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-photo--hands img {
  object-position: 30% 62%;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
}
.about-photo--city img {
  object-position: 50% 70%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.about-text {
  padding: calc(34 * var(--u)) calc(14 * var(--u)) calc(28 * var(--u)) calc(34 * var(--u));
  font-size: calc(9.5 * var(--u)); line-height: 1.9; letter-spacing: .06em; color: #4f5663;
}
.about-title {
  font-size: calc(17.5 * var(--u)); font-weight: 700; line-height: 1.8; letter-spacing: .08em;
  color: var(--navy); margin-bottom: calc(10 * var(--u));
}
.about-text p + p { margin-top: calc(2 * var(--u)); }
.city-note {
  position: absolute; left: calc(40 * var(--u)); top: calc(62 * var(--u));
  font-size: calc(19 * var(--u)); line-height: 1.5; transform: rotate(-8deg); color: #22304a;
}
.city-note .brush { width: calc(85 * var(--u)); height: calc(8 * var(--u)); margin-left: calc(4 * var(--u)); }

/* ---------- 見出し（共通） ---------- */
.sec-title {
  text-align: center; font-weight: 700; color: var(--navy);
  font-size: calc(17 * var(--u)); letter-spacing: .06em; line-height: 1.4;
}
.sec-title .mark { position: relative; display: inline-block; padding: 0 calc(4 * var(--u)); }
.sec-title .mark .brush {
  position: absolute; left: 0; right: 0; bottom: calc(-4 * var(--u)); width: 100%; height: calc(9 * var(--u)); z-index: -1;
}
.sec-title .mark { z-index: 0; }
.sec-title .big { font-size: 1.45em; line-height: 1; }

/* ---------- 5つのこと ---------- */
.points { padding: calc(38 * var(--u)) 0 calc(30 * var(--u)); background: #fff; }
.point-list {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(8 * var(--u));
  margin-top: calc(26 * var(--u));
}
.point { text-align: center; }
.point-circle {
  display: flex; align-items: center; justify-content: center;
  width: calc(88 * var(--u)); height: calc(88 * var(--u)); margin: 0 auto;
  border-radius: 50%;
}
.point-circle svg {
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.point h3 {
  margin-top: calc(12 * var(--u));
  font-size: calc(10.5 * var(--u)); font-weight: 700; line-height: 1.65; color: var(--navy); letter-spacing: .04em;
}
.point p {
  margin: calc(6 * var(--u)) auto 0; max-width: calc(118 * var(--u));
  font-size: calc(9 * var(--u)); line-height: 1.85; color: #4f5663; letter-spacing: .04em;
}
.point--pink .point-circle { background: #fcedf2; } .point--pink svg { stroke: #dc676e; }
.point--blue .point-circle { background: #e4f4fe; } .point--blue svg { stroke: #3f9fca; }
.point--peach .point-circle { background: #fdf0e4; } .point--peach svg { stroke: #db903c; }
.point--green .point-circle { background: #eaf6e3; } .point--green svg { stroke: #4d8a56; }
.point--lav .point-circle { background: #efeffd; } .point--lav svg { stroke: #626ebe; }

/* ---------- ヘルパーの1日 ---------- */
.day { padding: calc(26 * var(--u)) 0 calc(28 * var(--u)); background: #fff; }
.day-head { position: relative; }
.day-note {
  position: absolute; right: calc(24 * var(--u)); top: calc(-22 * var(--u)); /* 線が下のカードに触れない高さ */
  font-size: calc(18 * var(--u)); line-height: 1.45; transform: rotate(-8deg); color: #22304a;
}
.day-note .brush { width: calc(90 * var(--u)); height: calc(8 * var(--u)); margin-left: calc(10 * var(--u)); }
.day-card {
  margin-top: calc(26 * var(--u));
  background: #fff; border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(16 * var(--u)) rgba(30, 50, 80, .09);
  padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u));
}
.day-lead { font-weight: 700; color: var(--navy); font-size: calc(12.5 * var(--u)); letter-spacing: .05em; }
.day-lead small { font-size: .8em; font-weight: 500; color: var(--gray); margin-left: .3em; }
.day-list {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column;
  column-gap: calc(28 * var(--u)); margin-top: calc(10 * var(--u));
}
.day-list li {
  position: relative; display: flex; align-items: baseline; gap: calc(12 * var(--u));
  padding: calc(7 * var(--u)) 0 calc(7 * var(--u)) calc(16 * var(--u));
  border-bottom: 1px dashed #e3e8ee;
  font-size: calc(10.5 * var(--u)); color: #3b4453; letter-spacing: .04em;
}
.day-list li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #f2a3ae;
}
.day-list li.k-life::before { background: #8fcaa0; }
.day-list li.k-rest::before { background: #bfd8ec; }
.day-list li.k-home::before { background: var(--yellow); }
.day-list time {
  flex: 0 0 auto; width: 3.2em; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums;
}
.day-foot { margin-top: calc(12 * var(--u)); font-size: calc(9.5 * var(--u)); line-height: 1.85; color: #4f5663; letter-spacing: .04em; }

/* ---------- 募集要項 ---------- */
.req { padding: calc(24 * var(--u)) 0 calc(34 * var(--u)); background: #fff; }
.req-card {
  margin-top: calc(22 * var(--u));
  background: #fff; border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(16 * var(--u)) rgba(30, 50, 80, .09);
  padding: calc(8 * var(--u)) calc(22 * var(--u));
}
.req-table { width: 100%; border-collapse: collapse; font-size: calc(10 * var(--u)); letter-spacing: .04em; }
.req-table th, .req-table td { padding: calc(10 * var(--u)) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.8; }
.req-table tr:last-child th, .req-table tr:last-child td { border-bottom: 0; }
.req-table th { width: 7.5em; font-weight: 700; color: var(--navy); white-space: nowrap; }
.req-table td { color: #3b4453; }

/* ---------- 締め ---------- */
.closing {
  position: relative; overflow: hidden;
  min-height: calc(390 * var(--u));
  background: linear-gradient(90deg, #e3f0f9 0%, #f4f8fa 38%, #fbf7f1 100%);
}
.closing-photo {
  position: absolute; top: 0; right: 0; bottom: calc(60 * var(--u)); width: 64%;
}
.closing-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0, #000 18%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0, #000 18%);
          mask-composite: intersect;
}
.closing::after { /* 下端を空色に */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(80 * var(--u));
  background: linear-gradient(180deg, rgba(221,236,247,0), #dcecf7);
  pointer-events: none;
}
.closing-inner { position: relative; z-index: 2; padding-top: calc(42 * var(--u)); padding-bottom: calc(10 * var(--u)); }
.closing-title {
  font-size: calc(25 * var(--u)); line-height: 1.75; letter-spacing: .05em;
  -webkit-text-stroke: calc(.9 * var(--u)) var(--navy);
  transform: rotate(-4deg); transform-origin: left top;
  margin-left: calc(20 * var(--u));
}
.closing-title span { display: block; white-space: nowrap; }
.closing-title span:nth-child(2) { margin-left: .2em; }
.closing-title .last { position: relative; display: inline-block; margin-left: .1em; }
.closing-title .last .brush { position: absolute; left: -.3em; right: -1em; bottom: calc(-6 * var(--u)); width: calc(100% + 1.3em); height: calc(14 * var(--u)); z-index: -1; }
.closing-body {
  margin: calc(22 * var(--u)) 0 0 calc(22 * var(--u));
  font-size: calc(10.5 * var(--u)); line-height: 2.05; letter-spacing: .06em; color: #2f3a4c; font-weight: 700;
}
.cta { text-align: center; margin-top: calc(26 * var(--u)); position: relative; z-index: 3; }
.cta-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: calc(370 * var(--u)); max-width: 100%; height: calc(60 * var(--u));
  border-radius: 999px; text-decoration: none; color: #fff;
  font-weight: 700; font-size: calc(15 * var(--u)); letter-spacing: .1em;
  background: linear-gradient(90deg, var(--coral) 0%, #f07a79 60%, var(--coral2) 100%);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(242, 109, 111, .35);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.cta-arrow {
  position: absolute; right: calc(28 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u));
  fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s ease;
}
.cta-btn:hover, .cta-btn:focus-visible {
  transform: translateY(-2px); filter: brightness(1.04);
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(242, 109, 111, .45);
}
.cta-btn:hover .cta-arrow, .cta-btn:focus-visible .cta-arrow { transform: translateX(5px); }
.cta-btn:focus-visible, .gnav a:focus-visible, .cta-sub:focus-visible { outline: 3px solid #1b2842; outline-offset: 3px; }
.cta-line-note {
  width: calc(460 * var(--u)); max-width: 100%; margin: calc(8 * var(--u)) auto 0;
  font-size: calc(8.5 * var(--u)); line-height: 1.75; color: #2f3a4c; letter-spacing: .03em;
  text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9);
}
.cta-sub { /* 副のボタン：白地・枠線・LINEより低く小さく */
  display: flex; align-items: center; justify-content: center;
  width: calc(300 * var(--u)); max-width: 100%; height: calc(42 * var(--u)); margin: calc(14 * var(--u)) auto 0;
  border: 1.5px solid #c3ccd8; border-radius: 999px; background: #fff;
  font-size: calc(11 * var(--u)); font-weight: 700; color: var(--navy); letter-spacing: .08em; text-decoration: none;
  box-shadow: 0 2px 8px rgba(30, 50, 80, .06);
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.cta-sub:hover { color: var(--coral); border-color: var(--coral2); transform: translateY(-1px); }
.cta-note { margin-top: calc(6 * var(--u)); font-size: calc(8.5 * var(--u)); color: #4f5663; letter-spacing: .03em; }

/* ---------- フッター ---------- */
.site-footer {
  position: relative; overflow: hidden;
  min-height: calc(230 * var(--u));
  padding-bottom: calc(70 * var(--u)); /* 下に街並みを見せる余白 */
  background: #dcecf7;
}
.footer-photo {
  position: absolute; left: 0; right: 0; bottom: calc(-80 * var(--u)); width: 100%; height: calc(420 * var(--u));
  object-fit: cover; object-position: 50% 100%;
}
.site-footer::before { /* 文字のある上側は白く霞ませ、下の街並みだけくっきり見せる */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, #dcecf7 0%, rgba(232,242,249,.9) 30%, rgba(240,246,251,.78) 58%, rgba(255,255,255,.25) 80%, rgba(255,255,255,0) 92%);
}
.footer-inner {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; column-gap: calc(24 * var(--u));
  align-items: start; padding-top: calc(22 * var(--u));
}
.footer-copy { grid-column: 1; grid-row: 1 / span 2; }
.footer-brand { grid-column: 2; grid-row: 1; }
.footer-info {
  grid-column: 2; grid-row: 2; margin: calc(10 * var(--u)) calc(28 * var(--u)) 0 0; max-width: calc(250 * var(--u));
  font-size: calc(8 * var(--u)); line-height: 1.8; letter-spacing: .04em; color: #2f3a4c;
}
.footer-info a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.footer-info a:hover { color: var(--coral); }
.footer-links { display: flex; flex-wrap: wrap; gap: .3em 1.4em; margin-top: .3em; }
.footer-copy {
  position: relative; margin-left: calc(34 * var(--u));
  font-size: calc(22 * var(--u)); line-height: 1.45; /* これまでの表示（水平）に合わせて回転なし */
  -webkit-text-stroke: calc(.3 * var(--u)) var(--navy);
}
.footer-copy .brush { width: calc(210 * var(--u)); height: calc(18 * var(--u)); margin: calc(-2 * var(--u)) 0 0 calc(8 * var(--u)); }
.footer-brand { text-align: center; margin-right: calc(28 * var(--u)); padding-top: calc(8 * var(--u)); color: #374552; }
.footer-name { font-weight: 900; font-size: calc(20 * var(--u)); letter-spacing: .06em; line-height: 1.2; }
.footer-tag { font-size: calc(8 * var(--u)); letter-spacing: .08em; margin-top: calc(4 * var(--u)); font-weight: 700; }

@media (min-width: 1000px) {
  .hero-photo img { width: 116%; right: auto; object-position: 60% 30%; }
  .hero-title { font-size: calc(34.5 * var(--u)); top: calc(122 * var(--u)); }
}

/* ---------- 動き ----------
   隠す・ずらす状態は「.js かつ 動きを減らす設定でない時」だけに書く。
   動きの終わりは、上の通常の見た目とまったく同じになる（配置は変えない）。
   合図のクラスは main.js が付ける：.is-play（ヒーロー）／.is-in（登場）／.is-written（手書き）／.is-drawn（黄色い線） */
.cta-btn { overflow: hidden; isolation: isolate; }

@media (prefers-reduced-motion: no-preference) {
  /* ヒーロー：写真がゆっくり引く */
  .hero-photo img { animation: hero-zoom 7s cubic-bezier(.25,.1,.25,1) both; }
  @keyframes hero-zoom { from { transform: scale(1.2312); } }

  /* ヒーロー見出し・白い一言：1行ずつ左から書く（見出し全体で約1.2秒） */
  .js .hero-title .hw-line,
  .js .hero-note > span:not(.hero-note-logo) {
    clip-path: inset(-40% 100% -40% -8%);
    transition: clip-path var(--wd, .5s) cubic-bezier(.55,.1,.35,1) var(--wl, 0s);
  }
  .js .hero-note > span:not(.ml, .hero-note-logo) { display: inline-block; }
  .js .is-written .hw-line,
  .js .hero-note.is-written > span:not(.hero-note-logo) { clip-path: inset(-40% -12% -40% -8%); }

  /* 手書き風の一言（街・1日・締め・フッター）：行ごとにふわっと。字を途中で欠けさせない */
  .js :is(.city-note, .day-note, .closing-title, .footer-copy) > span {
    opacity: 0; translate: 0 8px;
    transition: opacity var(--wd, .6s) ease var(--wl, 0s), translate var(--wd, .6s) ease var(--wl, 0s);
  }
  .js :is(.city-note, .day-note, .footer-copy) > span:not(.ml) { display: inline-block; }
  .js .is-written > span { opacity: 1; translate: 0 0; }

  /* 黄色い（白い）ブラシ線：左から引く */
  .js .brush {
    clip-path: inset(-80% 100% -80% -4%);
    transition: clip-path .6s cubic-bezier(.6,.05,.3,1) var(--bd, .15s);
  }
  .js .brush.is-drawn { clip-path: inset(-80% -4% -80% -4%); }

  /* ヒーロー：サブコピーと丸バッジ3つは、見出しと並行して最初からふわっと（字の読み込みを待たない） */
  .js .hero-lead, .js .badge { animation: fade-up .55s ease both; }
  .js .hero-lead { animation-delay: .12s; }
  .js .badge:nth-child(1) { animation-delay: .22s; }
  .js .badge:nth-child(2) { animation-delay: .3s; }
  .js .badge:nth-child(3) { animation-delay: .38s; }
  @keyframes fade-up { from { opacity: 0; translate: 0 10px; } }
  .js .hero-note-logo {
    opacity: 0; translate: 0 8px;
    transition: opacity .5s ease 1.5s, translate .5s ease 1.5s;
  }
  .js .hero.is-play .hero-note-logo { opacity: 1; translate: 0 0; }

  /* スクロールでの登場（画面の少し手前から出し始める。main.js） */
  .js .reveal {
    opacity: 0; translate: 0 14px;
    transition: opacity .6s ease, translate .6s ease;
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }

  /* 5つのこと：出るのと同時にアイコンが一度だけ小さく弾む（アイコンが消えている時間は作らない） */
  .js .point.is-in .point-circle svg { animation: icon-pop .6s ease-out both; animation-delay: calc(var(--i, 0) * 70ms + .1s); }
  @keyframes icon-pop {
    0% { scale: .85; }
    55% { scale: 1.08; }
    100% { scale: 1; }
  }

  /* ヘルパーの1日：行が上から順に出て、左の点が順に灯る */
  .js .day-list li {
    opacity: 0; translate: 0 -6px;
    transition: opacity .45s ease, translate .45s ease;
    transition-delay: calc(.08s + var(--n, 0) * .06s);
  }
  .js .day-list li::before {
    opacity: .35; scale: .45; filter: grayscale(1);
    transition: opacity .4s ease, scale .45s cubic-bezier(.3,1.5,.5,1), filter .4s ease;
    transition-delay: calc(.2s + var(--n, 0) * .06s);
  }
  .js .day-card.is-in .day-list li { opacity: 1; translate: 0 0; }
  .js .day-card.is-in .day-list li::before { opacity: 1; scale: 1; filter: none; }

  /* 写真のごく弱いパララックス（main.js が translate を数十px以内で動かす） */
  .js .about-photo img, .js .closing-photo img { scale: 1.08; will-change: translate; }
  .js .about-photo--hands img { transform-origin: 100% 50%; }
  .js .about-photo--city img { transform-origin: 0 50%; }
  .js .closing-photo img { transform-origin: 0 100%; }

  /* LINEボタン：数秒おきに光が左から右へ一度走る */
  .cta-btn::after {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -35%; width: 30%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-18deg); pointer-events: none;
    animation: cta-shine 5.5s ease-in-out 1.2s infinite;
  }
  .cta-btn > * { position: relative; z-index: 1; }
  .cta-btn > .cta-arrow { position: absolute; }
  @keyframes cta-shine {
    0% { translate: 0 0; }
    24%, 100% { translate: 500% 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta-btn, .cta-arrow, .gnav .gnav-btn { transition: none; }
  .cta-btn:hover, .cta-btn:focus-visible, .gnav .gnav-btn:hover { transform: none; }
  .cta-btn:hover .cta-arrow, .cta-btn:focus-visible .cta-arrow { transform: none; }
}

/* ---------- スマホ（639px以下）：縦並び ---------- */
@media (max-width: 639px) {
  .wrap { padding: 0 20px; }
  .header-inner { height: 60px; }
  .logo-name { font-size: 19px; }
  .logo-tag { font-size: 9px; }
  .gnav a:not(.gnav-btn) { display: none; }
  .gnav .gnav-btn { font-size: 13px; height: 34px; padding: 0 18px; }
  /* 帯の下のページ内タブ（横スクロール） */
  .snav {
    display: flex; gap: 6px; height: 38px; align-items: center;
    padding: 0 16px 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .snav::-webkit-scrollbar { display: none; }
  .snav a {
    flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
    border-radius: 999px; background: rgba(255, 255, 255, .82); border: 1px solid #dfe5ec;
    font-size: 12.5px; font-weight: 700; color: #2c3445; text-decoration: none; letter-spacing: .03em;
  }
  .snav a:focus-visible { outline: 3px solid #1b2842; outline-offset: 2px; }
  main [id], #top { scroll-margin-top: 104px; }

  .hero { height: auto; min-height: 738px; background: linear-gradient(180deg, #cfe5f5 0%, #e3f0f9 45%, #eaf3fa 100%); }
  .hero::before { background: linear-gradient(180deg, rgba(240,247,252,.2) 0%, rgba(240,247,252,0) 60%); }
  .hero-photo img {
    top: 290px; height: 448px; bottom: auto; object-position: 76% 20%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  }
  .hero-inner { min-height: 738px; }
  .hero-title { left: 22px; top: 122px; font-size: 32px; -webkit-text-stroke: .6px var(--navy); }
  .hero-brush { width: 230px; height: 22px; }
  .hero-lead { left: 24px; top: 300px; /* 2行目が人物の頭（約368px）にかからない高さ */ font-size: 13.5px; line-height: 1.9; text-shadow: 0 0 8px rgba(255,255,255,.9); }
  .hero-badges { left: 50%; transform: translateX(-50%); top: auto; bottom: 18px; gap: 8px; }
  .badge { width: 104px; height: 104px; font-size: 12px; line-height: 1.45; }
  .badge svg { width: 28px; height: 28px; margin-bottom: 4px; }
  .hero-note { top: auto; bottom: 132px; right: 16px; font-size: 19px; -webkit-text-stroke: .5px #fff; text-shadow: 0 1px 3px rgba(0,20,50,.45), 0 1px 10px rgba(0,20,50,.4); }
  .hero-note::before { background: radial-gradient(closest-side, rgba(16, 32, 58, .42), rgba(16, 32, 58, .22) 55%, rgba(16, 32, 58, 0)); }
  .hero-note .brush { width: 150px; height: 9px; }
  .hero-note-logo { font-size: 11px; }

  .about { grid-template-columns: 1fr 1fr; grid-template-rows: auto 230px; }
  .about-text { grid-column: 1 / -1; grid-row: 1; padding: 44px 22px 30px; font-size: 14px; line-height: 1.95; }
  .about-title { font-size: 22px; margin-bottom: 16px; }
  .about-text p + p { margin-top: 8px; }
  .about-photo--hands { grid-row: 2; grid-column: 1; }
  .about-photo--city { grid-row: 2; grid-column: 2; }
  .about-photo--hands img { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 70%, transparent 100%); }
  .city-note { left: 22px; top: 36px; font-size: 22px; }
  .city-note .brush { width: 90px; height: 8px; }

  .sec-title { font-size: 20px; }
  .sec-title .mark .brush { height: 10px; bottom: -4px; }
  .points { padding: 52px 0 40px; }
  .point-list { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
  .point { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center;
    column-gap: 16px; text-align: left; min-height: 108px; padding: 14px 14px 14px 10px;
    background: #fff; border-radius: 12px; box-shadow: 0 3px 14px rgba(30,50,80,.07); }
  .point-circle { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 88px; height: 88px; margin: 0; }
  .point-circle svg { width: 40px; height: 40px; }
  .point h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 16px; line-height: 1.5; }
  .point h3 br { display: none; }
  .point p { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; max-width: none; font-size: 13.5px; line-height: 1.75; }
  .day { padding: 44px 0 36px; }
  .day-head { display: flex; flex-direction: column-reverse; }
  .day-note { position: static; align-self: flex-end; margin: 0 8px 18px 0; font-size: 20px; }
  .day-note .brush { width: 96px; height: 8px; }
  .day-card { margin-top: 24px; padding: 20px 18px 18px; border-radius: 12px; }
  .day-lead { font-size: 15px; }
  .day-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .day-list li { font-size: 14.5px; padding: 10px 0 10px 18px; gap: 12px; }
  .day-list li::before { width: 8px; height: 8px; }
  .day-foot { font-size: 13.5px; margin-top: 14px; }

  .req { padding: 30px 0 44px; }
  .req-card { margin-top: 24px; padding: 6px 18px; border-radius: 12px; }
  .req-table, .req-table tbody, .req-table tr, .req-table th, .req-table td { display: block; width: auto; }
  .req-table { font-size: 14px; }
  .req-table th { padding: 14px 0 2px; border-bottom: 0; }
  .req-table td { padding: 0 0 14px; }

  .closing { min-height: 0; padding-bottom: 20px; background: linear-gradient(180deg, #eef5fa 0%, #f7f8f7 45%, #dcecf7 100%); }
  .closing-photo { position: relative; width: 100%; height: 300px; bottom: auto; order: 2; }
  .closing-photo img {
    object-position: 68% 30%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%);
  }
  .closing { display: flex; flex-direction: column; }
  .closing-inner { display: contents; }
  .closing-text { order: 1; padding: 50px 20px 10px; }
  .closing-title { font-size: 26px; margin-left: 4px; }
  .closing-title .last .brush { height: 13px; bottom: -6px; }
  .closing-body { margin: 26px 0 0 4px; font-size: 14px; line-height: 2; }
  .cta { order: 3; margin-top: -30px; padding: 0 20px; }
  .cta-btn { width: 100%; height: 62px; font-size: 17px; }
  .cta-arrow { right: 24px; width: 22px; height: 22px; }
  .cta-line-note { width: auto; font-size: 12.5px; text-align: left; margin-top: 10px; }
  .cta-sub { width: 100%; height: 48px; font-size: 14.5px; margin-top: 14px; }
  .cta-note { font-size: 12px; line-height: 1.7; text-align: left; margin-top: 10px; }

  .site-footer { min-height: 0; padding-bottom: 130px; }
  .footer-photo { height: 100%; bottom: 0; }
  .site-footer::before { background: linear-gradient(180deg, #dcecf7 0%, rgba(234,243,250,.92) 40%, rgba(240,246,251,.82) 68%, rgba(255,255,255,.2) 88%, rgba(255,255,255,0) 96%); }
  .footer-inner { display: flex; flex-direction: column; align-items: stretch; padding-top: 34px; }
  .footer-copy { margin-left: 10px; font-size: 23px; }
  .footer-copy .brush { width: 220px; height: 16px; }
  .footer-brand { margin: 34px 0 0; }
  .footer-name { font-size: 24px; }
  .footer-info { margin: 20px 0 0; max-width: none; font-size: 12.5px; line-height: 1.8; }
  .footer-tag { font-size: 11px; }
}

@media (max-width: 359px) {
  .hero-title { font-size: 28px; }
  .badge { width: 94px; height: 94px; font-size: 11px; }
}