/* ============================================================
   コモレビ介護グループ — 採用サイト（制作サンプル）
   設計コンセプト：「木漏れ日の一日」
   ページ全体が施設の一日（朝→昼→おやつ→夕方→夜）。
   スクロールすると空の色が変わり、丸くやわらかい光の中を進む。
   ============================================================ */
:root {
  --cream: #fbf7ef;
  --green: #2e5e4e;
  --green-soft: #6f9c8b;
  --sun: #f3b95f;
  --peach: #f2a17c;
  --ink: #3c3a34;
  --ink-soft: #847f73;
  --white: #ffffff;
  --maru: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --jp: "Noto Sans JP", sans-serif;
  --en: "Quicksand", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream); color: var(--ink);
  font-family: var(--maru); font-size: 15px; line-height: 2.1;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1080px, 92vw); margin: 0 auto; }
::selection { background: var(--sun); color: var(--ink); }

/* ============ 空レイヤー：スクロールで一日が進む ============ */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.sky i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.sky .morning { background: linear-gradient(180deg, #fdf6e3 0%, #fbf7ef 60%, #f3eee2 100%); opacity: 1; }
.sky .noon    { background: linear-gradient(180deg, #eef6ee 0%, #fbf7ef 55%, #f5f2e8 100%); }
.sky .oyatsu  { background: linear-gradient(180deg, #fdf0dd 0%, #fbf4e8 55%, #f8eede 100%); }
.sky .evening { background: linear-gradient(180deg, #f9e0c8 0%, #f6e6d4 50%, #efe3d6 100%); }
.sky .night   { background: linear-gradient(180deg, #cfd8d3 0%, #e4e6dd 55%, #efeadf 100%); }

/* 木漏れ日の光斑（ゆっくり揺れる） */
.komorebi-light { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.komorebi-light i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 185, 95, 0.16), transparent 70%);
  animation: drift 14s ease-in-out infinite alternate;
}
.komorebi-light i:nth-child(1) { width: 480px; height: 480px; top: -8%; left: 4%; }
.komorebi-light i:nth-child(2) { width: 360px; height: 360px; top: 30%; right: -6%; animation-delay: -4s; animation-duration: 18s; }
.komorebi-light i:nth-child(3) { width: 300px; height: 300px; bottom: 6%; left: 22%; animation-delay: -9s; animation-duration: 16s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 28px) scale(1.12); }
}

/* ============ ヘッダー ============ */
.hd {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100;
  width: min(1080px, 94vw);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 20px;
  background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(60, 58, 52, 0.1);
}
.hd-logo { display: flex; align-items: center; gap: 11px; }
.hd-logo .leaf {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 4px;
  background: var(--green);
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease);
}
.hd-logo:hover .leaf { transform: rotate(-12deg); }
.hd-logo .leaf svg { width: 20px; height: 20px; }
.hd-logo .nm { font-weight: 900; font-size: 15.5px; letter-spacing: 0.06em; line-height: 1.35; color: var(--green); }
.hd-logo .nm small { display: block; font-family: var(--en); font-weight: 600; font-size: 8.5px; letter-spacing: 0.26em; color: var(--ink-soft); }
.hd-nav { display: flex; align-items: center; gap: 22px; }
.hd-nav a:not(.hd-entry) { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.hd-nav a:not(.hd-entry):hover { color: var(--green); }
.hd-entry {
  background: var(--green); color: #fff;
  font-weight: 900; font-size: 12.5px; letter-spacing: 0.1em;
  padding: 11px 26px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(46, 94, 78, 0.35);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.hd-entry:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(46, 94, 78, 0.45); }

/* ============ 時刻チップ（各セクションの始まり） ============ */
.tokei {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 999px; padding: 9px 22px;
  box-shadow: 0 6px 20px rgba(60, 58, 52, 0.08);
}
.tokei .t { font-family: var(--en); font-weight: 700; font-size: 17px; color: var(--green); letter-spacing: 0.06em; }
.tokei .l { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.tokei::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }

/* ============ セクション共通 ============ */
.sec { position: relative; padding: clamp(80px, 11vw, 130px) 0; }
.sec-title {
  margin-top: 22px;
  font-weight: 900; font-size: clamp(26px, 3.8vw, 40px);
  letter-spacing: 0.08em; line-height: 1.7; color: var(--ink);
}
.sec-title em { font-style: normal; color: var(--green); background: linear-gradient(transparent 64%, rgba(243, 185, 95, 0.45) 64%); padding: 0 2px; }
.sec-lead { margin-top: 14px; color: var(--ink-soft); font-size: 14px; max-width: 600px; }
.sec-head { margin-bottom: clamp(36px, 5vw, 56px); }

/* ============ AM7:00 ヒーロー ============ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 130px 0 80px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.hero-copy h1 {
  font-weight: 900; font-size: clamp(34px, 5.4vw, 58px);
  letter-spacing: 0.1em; line-height: 1.75; color: var(--ink);
}
.hero-copy h1 em { font-style: normal; color: var(--green); }
.hero-copy h1 .hana { display: inline-block; background: linear-gradient(transparent 62%, rgba(243, 185, 95, 0.5) 62%); }
.hero-sub { margin-top: 24px; font-size: 14px; color: var(--ink-soft); max-width: 430px; }
.hero-cta { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.btn-green {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green); color: #fff;
  font-weight: 900; font-size: 14px; letter-spacing: 0.1em;
  padding: 17px 36px; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(46, 94, 78, 0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.btn-green:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(46, 94, 78, 0.45); }
.btn-movie {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: none; cursor: pointer;
  font-family: var(--maru); font-weight: 700; font-size: 13px; color: var(--ink);
  padding: 12px 24px 12px 12px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(60, 58, 52, 0.12);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.btn-movie:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(60, 58, 52, 0.18); }
.btn-movie .pl {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sun); display: grid; place-items: center; flex-shrink: 0;
}
.btn-movie .pl::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.btn-movie small { display: block; font-family: var(--en); font-weight: 600; font-size: 9px; letter-spacing: 0.2em; color: var(--ink-soft); text-align: left; }

/* ヒーロー写真：大きな木漏れ日ブロブ＋丸写真 */
.hero-ph { position: relative; min-height: 460px; }
.blob-main {
  position: absolute; inset: 0 8% 12% 0;
  border-radius: 58% 42% 52% 48% / 50% 56% 44% 50%;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(46, 94, 78, 0.22);
  animation: blob 16s ease-in-out infinite alternate;
}
@keyframes blob {
  from { border-radius: 58% 42% 52% 48% / 50% 56% 44% 50%; }
  to   { border-radius: 46% 54% 44% 56% / 56% 46% 54% 44%; }
}
.blob-main img { width: 100%; height: 100%; object-fit: cover; }
.pop {
  position: absolute; border-radius: 50%; overflow: hidden;
  border: 6px solid #fff; box-shadow: 0 16px 36px rgba(60, 58, 52, 0.2);
}
.pop img { width: 100%; height: 100%; object-fit: cover; }
.pop-1 { width: 132px; height: 132px; right: 0; top: 4%; }
.pop-2 { width: 108px; height: 108px; right: 10%; bottom: 0; }
.hero-fukidashi {
  position: absolute; left: -8px; bottom: 10%;
  background: #fff; border-radius: 18px; padding: 13px 20px;
  font-size: 12.5px; font-weight: 700; line-height: 1.7;
  box-shadow: 0 12px 30px rgba(60, 58, 52, 0.14);
}
.hero-fukidashi::after {
  content: ""; position: absolute; left: 30px; bottom: -9px;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 10px solid #fff;
}
.hero-fukidashi b { color: var(--green); }

/* ============ AM10:00 しごと ============ */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.job {
  background: #fff; border-radius: 26px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(60, 58, 52, 0.1);
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
}
.job:hover { transform: translateY(-8px); box-shadow: 0 26px 60px rgba(60, 58, 52, 0.16); }
.job-movie { position: relative; display: block; width: 100%; border: none; padding: 0; cursor: pointer; aspect-ratio: 16/10.5; overflow: hidden; background: var(--green); }
.job-movie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.job-movie:hover img { transform: scale(1.06); }
.job-movie .pl {
  position: absolute; right: 14px; bottom: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.94); display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: transform 0.35s, background 0.35s;
}
.job-movie .pl::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 11px solid var(--green); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.job-movie:hover .pl { transform: scale(1.1); }
.job-movie .tag {
  position: absolute; left: 14px; top: 12px;
  font-family: var(--en); font-weight: 700; font-size: 9px; letter-spacing: 0.22em;
  background: rgba(255,255,255,0.92); color: var(--green); padding: 5px 13px; border-radius: 999px;
}
.job-body { padding: 24px 26px 28px; }
.job-body .role { font-size: 18px; font-weight: 900; letter-spacing: 0.08em; color: var(--ink); }
.job-body .role small { display: block; font-family: var(--en); font-weight: 600; font-size: 9.5px; letter-spacing: 0.24em; color: var(--ink-soft); margin-top: 4px; }
.job-body p { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.95; }
.job-tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.job-tags span {
  font-size: 11px; font-weight: 700; color: var(--green);
  background: rgba(111, 156, 139, 0.14); border-radius: 999px; padding: 4px 13px;
}

/* ============ PM0:00 ウソ・ホント診断 ============ */
.quiz-wrap { max-width: 660px; margin: 0 auto; }
.quiz-card {
  background: #fff; border-radius: 28px; padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 20px 56px rgba(60, 58, 52, 0.12);
}
.quiz-no { font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: 0.26em; color: var(--sun); }
.quiz-q { margin-top: 12px; font-size: clamp(17px, 2.2vw, 21px); font-weight: 900; letter-spacing: 0.06em; line-height: 1.9; }
.quiz-btns { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quiz-btns button {
  border: 2.5px solid var(--green); background: #fff; border-radius: 18px;
  font-family: var(--maru); font-weight: 900; font-size: 26px; color: var(--green);
  padding: 16px; cursor: pointer;
  transition: all 0.3s var(--ease);
}
.quiz-btns button small { display: block; font-size: 11.5px; font-weight: 700; margin-top: 2px; }
.quiz-btns button:hover { background: rgba(111, 156, 139, 0.12); transform: translateY(-2px); }
.quiz-ans { display: none; margin-top: 24px; }
.quiz-ans.is-show { display: block; animation: pop 0.5s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.quiz-ans .verdict {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 19px; letter-spacing: 0.1em;
  color: #fff; background: var(--green); border-radius: 999px; padding: 8px 24px;
}
.quiz-ans .verdict.wrongmark { background: var(--peach); }
.quiz-ans p { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.quiz-next {
  margin-top: 20px; border: none; cursor: pointer;
  background: var(--sun); color: #fff;
  font-family: var(--maru); font-weight: 900; font-size: 13.5px; letter-spacing: 0.1em;
  padding: 13px 32px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(243, 185, 95, 0.4);
  transition: transform 0.3s var(--ease);
}
.quiz-next:hover { transform: translateY(-2px); }
.quiz-progress { margin-top: 22px; display: flex; gap: 8px; justify-content: center; }
.quiz-progress i { width: 10px; height: 10px; border-radius: 50%; background: rgba(60,58,52,0.14); transition: background 0.3s; }
.quiz-progress i.done { background: var(--sun); }
.quiz-final { text-align: center; }
.quiz-final .big { font-size: clamp(22px, 3vw, 30px); font-weight: 900; letter-spacing: 0.08em; line-height: 1.8; }
.quiz-final .big em { font-style: normal; color: var(--green); }
.quiz-final p { margin-top: 14px; color: var(--ink-soft); font-size: 13.5px; }

/* ============ PM3:00 スタッフの声 ============ */
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.voice {
  position: relative; background: #fff; border-radius: 26px;
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: 0 16px 44px rgba(60, 58, 52, 0.1);
}
.voice .ribbon {
  position: absolute; top: -13px; left: 28px;
  background: var(--sun); color: #fff;
  font-size: 11.5px; font-weight: 900; letter-spacing: 0.12em;
  padding: 6px 18px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(243, 185, 95, 0.4);
}
.voice blockquote { font-size: clamp(16px, 1.9vw, 19px); font-weight: 900; letter-spacing: 0.06em; line-height: 1.95; }
.voice blockquote em { font-style: normal; background: linear-gradient(transparent 64%, rgba(243, 185, 95, 0.45) 64%); }
.voice .who { margin-top: 18px; display: flex; align-items: center; gap: 13px; }
.voice .icon {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--green-soft), var(--green));
  color: #fff; display: grid; place-items: center;
  font-family: var(--en); font-weight: 700; font-size: 14px;
}
.voice .who b { display: block; font-size: 13.5px; }
.voice .who span { font-size: 11.5px; color: var(--ink-soft); }
.voice .v-movie {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  border: 2px solid var(--green); background: #fff; border-radius: 999px;
  font-family: var(--maru); font-size: 12px; font-weight: 900; color: var(--green);
  padding: 9px 20px 9px 10px; cursor: pointer;
  transition: background 0.3s, transform 0.3s var(--ease);
}
.voice .v-movie:hover { background: rgba(111, 156, 139, 0.12); transform: translateY(-2px); }
.voice .v-movie .p { width: 26px; height: 26px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.voice .v-movie .p::before { content: ""; width: 0; height: 0; margin-left: 2px; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }

/* ============ PM5:00 数字 ============ */
.maru-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mn {
  background: #fff; border-radius: 50%; aspect-ratio: 1;
  display: grid; place-content: center; text-align: center; gap: 4px;
  box-shadow: 0 16px 40px rgba(60, 58, 52, 0.1);
  padding: 10px;
}
.mn .v { font-family: var(--en); font-weight: 700; font-size: clamp(30px, 4vw, 46px); color: var(--green); line-height: 1.1; }
.mn .v small { font-family: var(--maru); font-size: 0.42em; color: var(--sun); font-weight: 900; }
.mn .k { font-size: 11.5px; font-weight: 900; color: var(--ink); line-height: 1.6; }
.mn .nt { font-size: 9.5px; color: var(--ink-soft); }

/* ============ PM7:00 要項＋おたより ============ */
.req-list { display: grid; gap: 12px; max-width: 760px; }
.req-item {
  display: grid; grid-template-columns: 168px 1fr; gap: 14px; align-items: center;
  background: #fff; border-radius: 18px; padding: 18px 24px;
  box-shadow: 0 10px 28px rgba(60, 58, 52, 0.07);
}
.req-item dt { font-size: 12.5px; font-weight: 900; color: var(--green); letter-spacing: 0.1em; }
.req-item dd { font-size: 13.5px; }
.req-item dd b { color: var(--peach); font-family: var(--en); font-size: 16px; }

/* おたよりエントリー（便箋） */
.letter-wrap { max-width: 640px; margin: 0 auto; }
.letter {
  position: relative;
  background:
    repeating-linear-gradient(transparent 0 37px, rgba(111, 156, 139, 0.25) 37px 38px),
    #fffdf8;
  border-radius: 14px;
  box-shadow: 0 26px 60px rgba(60, 58, 52, 0.16);
  padding: 38px 36px 40px;
}
.letter::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  border-radius: 14px 14px 0 0;
  background: repeating-linear-gradient(90deg, var(--green-soft) 0 18px, #fffdf8 18px 36px, var(--sun) 36px 54px, #fffdf8 54px 72px);
  opacity: 0.7;
}
.letter-to { font-size: 15px; font-weight: 900; letter-spacing: 0.08em; }
.letter-to small { color: var(--ink-soft); font-size: 11px; font-weight: 700; display: block; margin-top: 2px; }
.kitte {
  position: absolute; top: 26px; right: 28px;
  width: 74px; height: 88px; padding: 7px;
  background: #fff; border: 1.5px dashed var(--green-soft);
  display: grid; place-items: center; text-align: center;
  transform: rotate(4deg);
}
.kitte .tree { font-size: 30px; line-height: 1; }
.kitte b { font-size: 9px; font-weight: 900; color: var(--green); letter-spacing: 0.1em; display: block; }
.kitte small { font-family: var(--en); font-size: 8px; color: var(--ink-soft); }
.letter .fld { margin-top: 22px; }
.letter .fld label { display: block; font-size: 12px; font-weight: 900; color: var(--green); letter-spacing: 0.1em; }
.letter .fld label i { font-style: normal; font-size: 9.5px; color: #fff; background: var(--peach); border-radius: 999px; padding: 2px 10px; margin-left: 10px; vertical-align: 1px; }
.letter input, .letter select, .letter textarea {
  width: 100%; padding: 8px 2px 9px;
  font-family: var(--maru); font-size: 15px; color: var(--ink);
  background: transparent; border: none;
}
.letter input:focus, .letter select:focus, .letter textarea:focus { outline: none; }
.letter input::placeholder, .letter textarea::placeholder { color: rgba(60, 58, 52, 0.3); }
.letter textarea { min-height: 114px; resize: vertical; }
.letter-submit {
  margin-top: 26px; width: 100%; border: none; cursor: pointer;
  background: var(--green); color: #fff;
  font-family: var(--maru); font-weight: 900; font-size: 15px; letter-spacing: 0.14em;
  padding: 19px; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(46, 94, 78, 0.35);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.letter-submit:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(46, 94, 78, 0.45); }
.letter-note { margin-top: 14px; text-align: center; font-size: 11px; color: var(--ink-soft); }

/* ============ フッター ============ */
.ft { background: var(--green); color: rgba(255,255,255,0.85); padding: 54px 0 38px; font-size: 13px; border-radius: 40px 40px 0 0; }
.ft-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.ft-name { color: #fff; font-weight: 900; font-size: 17px; letter-spacing: 0.08em; }
.ft-name small { display: block; font-family: var(--en); font-weight: 600; font-size: 9px; letter-spacing: 0.26em; color: rgba(255,255,255,0.6); margin-top: 5px; }
.ft-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.ft-nav a { font-size: 12.5px; font-weight: 700; }
.ft-nav a:hover { color: var(--sun); }
.ft-note {
  margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.22);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px; color: rgba(255,255,255,0.6);
}
.ft-note .credit a { color: #ffe3a8; font-weight: 900; }
.ft-note .credit a:hover { text-decoration: underline; }

/* ============ ありがとうメーター ============ */
.arigato-meter {
  position: fixed; left: 22px; bottom: 22px; z-index: 90;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 999px;
  box-shadow: 0 12px 32px rgba(60, 58, 52, 0.18);
  padding: 10px 20px 10px 12px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
}
.arigato-meter.is-on { opacity: 1; transform: none; }
.arigato-meter .heart {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--peach); color: #fff;
  display: grid; place-items: center; font-size: 16px;
  animation: beat 1.6s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } }
.arigato-meter .txt { line-height: 1.5; }
.arigato-meter .txt small { display: block; font-size: 9px; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.08em; }
.arigato-meter .txt b { font-size: 14.5px; font-weight: 900; color: var(--ink); }
.arigato-meter .txt b em { font-style: normal; font-family: var(--en); font-size: 18px; color: var(--green); }

/* ============ 動画モーダル ============ */
.mv-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 5vw;
  background: rgba(46, 56, 50, 0.85); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity 0.45s ease;
}
.mv-modal.is-open { opacity: 1; pointer-events: auto; }
.mv-wrap { position: relative; width: min(960px, 100%); }
.mv-frame {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #1d2823; border-radius: 22px; overflow: hidden;
  transform: translateY(24px) scale(0.97); transition: transform 0.5s var(--ease);
}
.mv-modal.is-open .mv-frame { transform: none; }
.mv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mv-coming { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.mv-coming .inner .en {
  font-family: var(--en); font-weight: 700; font-size: clamp(24px, 3.6vw, 40px);
  letter-spacing: 0.18em; color: rgba(255,255,255,0.9);
}
.mv-coming .inner .jp { margin-top: 10px; font-size: 12.5px; letter-spacing: 0.22em; color: rgba(255,255,255,0.65); }
.mv-coming .inner .rec { margin-top: 20px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--en); font-size: 10.5px; letter-spacing: 0.2em; color: rgba(255,255,255,0.6); }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--peach); animation: recBlink 1.2s steps(2) infinite; display: inline-block; }
@keyframes recBlink { 50% { opacity: 0.15; } }
.mv-close {
  position: absolute; top: -50px; right: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--maru); font-weight: 900; font-size: 13px; letter-spacing: 0.18em; color: #fff;
}
.mv-close:hover { color: var(--sun); }

/* ============ 出現アニメ ============ */
.rv { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 1s ease, transform 1s var(--ease), filter 1s ease; }
.rv.is-in { opacity: 1; transform: none; filter: blur(0); }

/* ============ レスポンシブ ============ */
@media (max-width: 920px) {
  .hd-nav a:not(.hd-entry) { display: none; }
  .hero { padding-top: 110px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-ph { min-height: 340px; margin-top: 10px; }
  .jobs { grid-template-columns: 1fr; }
  .voices { grid-template-columns: 1fr; }
  .maru-nums { grid-template-columns: repeat(2, 1fr); }
  .req-item { grid-template-columns: 1fr; gap: 2px; }
  .arigato-meter { display: none; }
  .kitte { top: 18px; right: 16px; width: 62px; height: 74px; }
}

/* ============================================================
   v2 アップグレード：オリジナルイラスト世界観
   （ベネッセ/元気グループ参考：白×イラスト×構造化）
   ============================================================ */

/* ---- ヒーロー：イラストシーン ---- */
.hero-scene { position: relative; width: 100%; }
.hero-scene svg { width: 100%; height: auto; display: block; }
/* 舞い落ちる葉っぱ */
.leaf-fall { position: absolute; top: -4%; pointer-events: none; }
.leaf-fall svg { width: 26px; height: 26px; }
.leaf-fall { animation: leafFall 9s linear infinite; opacity: 0; }
.leaf-fall.l1 { left: 12%; animation-delay: 0s; }
.leaf-fall.l2 { left: 48%; animation-delay: 3s; }
.leaf-fall.l3 { left: 78%; animation-delay: 6s; }
@keyframes leafFall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.9; }
  100% { transform: translateY(520px) rotate(300deg) translateX(-60px); opacity: 0; }
}
/* ヒーロー実績チップ */
.hero-chips { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-chips span {
  background: #fff; border-radius: 999px; padding: 8px 18px;
  font-size: 12px; font-weight: 700; color: var(--green);
  box-shadow: 0 6px 18px rgba(60, 58, 52, 0.08);
}
.hero-chips span b { color: var(--peach); font-family: var(--en); font-size: 14px; }

/* ---- 4つの約束 ---- */
.sec-en-label {
  font-family: var(--en); font-weight: 700; font-size: 11px;
  letter-spacing: 0.34em; color: var(--green-soft); text-transform: uppercase;
  display: block; margin-bottom: 8px;
}
.promises { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.promise {
  position: relative; background: #fff; border-radius: 28px;
  padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3vw, 36px);
  box-shadow: 0 16px 44px rgba(60, 58, 52, 0.09);
  display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start;
  transition: transform 0.5s var(--ease), box-shadow 0.5s;
  overflow: hidden;
}
.promise:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(60, 58, 52, 0.14); }
.promise .p-no {
  position: absolute; top: 14px; right: 22px;
  font-family: var(--en); font-weight: 700; font-size: 30px;
  color: rgba(111, 156, 139, 0.22);
}
.promise .p-ico {
  width: 96px; height: 96px; border-radius: 30px;
  background: var(--cream);
  display: grid; place-items: center;
}
.promise .p-ico svg { width: 62px; height: 62px; }
.promise h3 { font-size: 17.5px; font-weight: 900; letter-spacing: 0.06em; line-height: 1.7; }
.promise h3 em { font-style: normal; color: var(--green); background: linear-gradient(transparent 64%, rgba(243,185,95,0.45) 64%); }
.promise p { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.95; }

/* ---- 一日の流れ（時間ストリップ） ---- */
.day-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ds {
  background: #fff; border-radius: 22px; padding: 22px 16px 20px; text-align: center;
  box-shadow: 0 12px 30px rgba(60, 58, 52, 0.08);
  transition: transform 0.4s var(--ease);
}
.ds:hover { transform: translateY(-5px); }
.ds .ico { width: 52px; height: 52px; margin: 0 auto 10px; }
.ds .ico svg { width: 100%; height: 100%; }
.ds .t { font-family: var(--en); font-weight: 700; font-size: 14px; color: var(--green); }
.ds h4 { font-size: 13px; font-weight: 900; margin-top: 4px; letter-spacing: 0.04em; }
.ds p { font-size: 10.5px; color: var(--ink-soft); line-height: 1.8; margin-top: 6px; }

/* ---- 職種カード：イラストヘッダ版 ---- */
.job-illust {
  position: relative; aspect-ratio: 16/9; background: var(--cream);
  display: grid; place-items: center; overflow: hidden;
}
.job-illust svg { width: 72%; height: auto; }
.job-illust .movie-btn {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: #fff; border: none; cursor: pointer;
  font-family: var(--maru); font-size: 11.5px; font-weight: 900;
  padding: 9px 16px 9px 10px; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(46, 94, 78, 0.35);
  transition: transform 0.3s var(--ease);
}
.job-illust .movie-btn:hover { transform: translateY(-2px) scale(1.03); }
.job-illust .movie-btn .p { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.job-illust .movie-btn .p::before { content: ""; width: 0; height: 0; margin-left: 2px; border-left: 6px solid var(--green); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

/* ---- スタッフの声：イラスト似顔絵版 ---- */
.voice .face {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--cream); overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 6px 16px rgba(60,58,52,0.14);
}
.voice .face svg { width: 100%; height: 100%; }

/* ---- 見学CTAバンド ---- */
.kengaku {
  background: #fff; border-radius: 32px;
  padding: clamp(30px, 4vw, 48px);
  box-shadow: 0 20px 56px rgba(60, 58, 52, 0.1);
  display: grid; grid-template-columns: 110px 1fr auto; gap: 24px; align-items: center;
}
.kengaku .k-ico { width: 110px; height: 110px; }
.kengaku .k-ico svg { width: 100%; height: 100%; }
.kengaku h3 { font-size: clamp(18px, 2.2vw, 24px); font-weight: 900; letter-spacing: 0.08em; line-height: 1.7; }
.kengaku h3 em { font-style: normal; color: var(--green); }
.kengaku p { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }

@media (max-width: 920px) {
  .promises { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 72px 1fr; gap: 16px; }
  .promise .p-ico { width: 72px; height: 72px; border-radius: 22px; }
  .promise .p-ico svg { width: 46px; height: 46px; }
  .day-strip { grid-template-columns: repeat(2, 1fr); }
  .kengaku { grid-template-columns: 1fr; text-align: center; }
  .kengaku .k-ico { margin: 0 auto; }
}

/* ============================================================
   v3 リズム改善：白ボード面 / 余白圧縮 / 賑やかし装飾
   ============================================================ */
/* 余白を圧縮（間延び解消） */
.sec { padding: clamp(56px, 7vw, 84px) 0; }
.hero { padding: 112px 0 40px; min-height: auto; }
.sec-head { margin-bottom: clamp(28px, 4vw, 42px); }

/* 白いボード面：単調なクリーム連続を断つ */
.sec--board > .container {
  background: #fff; border-radius: 40px;
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4.5vw, 60px);
  box-shadow: 0 24px 60px rgba(60, 58, 52, 0.08);
}
.sec--board .promise, .sec--board .voice, .sec--board .quiz-card, .sec--board .mn, .sec--board .req-item {
  box-shadow: none; border: 1.5px solid rgba(111, 156, 139, 0.22);
}

/* 賑やかし装飾（葉・花・ハート） */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco svg { width: 100%; height: 100%; display: block; }
.deco--sway { animation: decoSway 5s ease-in-out infinite alternate; transform-origin: bottom center; }
@keyframes decoSway { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }
.deco--float { animation: decoFloat 6s ease-in-out infinite alternate; }
@keyframes decoFloat { from { transform: translateY(0); } to { transform: translateY(-14px); } }

/* スタッフの声：詰めて濃く */
.voice { display: grid; grid-template-columns: 84px 1fr; gap: 18px 20px; align-items: start; }
.voice .ribbon { left: 20px; }
.voice .face { width: 84px; height: 84px; grid-row: span 3; }
.voice blockquote { font-size: clamp(15px, 1.7vw, 17.5px); }
.voice .who { margin-top: 0; }
.voice .who .face { display: none; }
.voice .v-movie { margin-top: 0; justify-self: start; }

/* しごとイラストを大きく・空に立たせる */
.job-illust {
  aspect-ratio: 16/10;
  background: linear-gradient(180deg, #eef6ee 0%, #fdf6e3 78%, #dce8d6 78%, #dce8d6 100%);
}
.job-illust svg { width: 84%; }

/* 数字サークルに枠の表情 */
.mn { border: 2.5px dashed rgba(111, 156, 139, 0.35); }

@media (max-width: 920px) {
  .sec--board > .container { border-radius: 28px; }
  .voice { grid-template-columns: 64px 1fr; }
  .voice .face { width: 64px; height: 64px; }
  .deco { display: none; }
}

/* 声カード：grid-areaで明示配置（崩れ修正） */
.voice {
  grid-template-areas:
    "face quote"
    "face who"
    "face movie";
  grid-template-rows: auto auto auto;
  align-content: start;
}
.voice .face { grid-area: face; }
.voice blockquote { grid-area: quote; }
.voice .who { grid-area: who; }
.voice .v-movie { grid-area: movie; }