/* 第2人事部 — site styles (v2: 白地＋淡い水色の帯・波線・角丸カード)
   rem は画面幅に比例（スマホ 375px / PC 1520px を基準に 1rem = 10px）。小さい文字は max() で 12px を下回らない。 */
:root {
  --sp: 2rem;
  --ink: #1f2a2e;
  --ink2: #4b5c63;
  --w: #fff;
  --main: #00809a;     /* ボタン・英字ラベル（白文字で 4.5:1 以上） */
  --main-d: #006b81;
  --teal: #00a0bd;
  --cy: #3ad8f3;
  --yl: #ffe100;       /* CTA だけ */
  --yl-d: #f2d000;
  --pale: #e8f6f9;
  --pale2: #f4fbfc;
  --cream: #fff8dc;
  --beige: #f7f4ec;
  --gray: #f2f4f4;
  --line: #d6e1e4;
  --err: #d14532;
  /* 見出しアイコンの色（メニューと対応） */
  --c-abt: #1fb2da;
  --c-sch: #f26b5b;
  --c-act: #00a0bd;
  --c-tgt: #e9ae00;
  --c-rep: #34ad84;
  --c-msg: #7a86de;
  --c-night: #2c4f86;
  --en: "Poppins", "Noto Sans JP", sans-serif;
  --logo: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --r: 1.2rem;
  --r-l: 4rem;
  --hd: 6.4rem;
  --shadow: 0 .6rem 2.4rem rgba(0, 60, 80, .09);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V8C15 8 15 0 30 0s15 8 30 8 15-8 30-8 15 8 30 8v8z'/%3E%3C/svg%3E");
}
html { font-size: clamp(9px, calc(1000vw / 375), 11.5px); scroll-behavior: smooth; scroll-padding-top: 8rem; }
@media (min-width: 1024px) {
  :root { --sp: 6rem; --r: 1.6rem; --r-l: 8rem; --hd: 11.6rem; }
  html { font-size: clamp(6.74px, calc(1000vw / 1520), 11px); scroll-padding-top: 10rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: var(--hd) 0 0;
  font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: max(1.5rem, 14px); line-height: 1.9; letter-spacing: .06em;
  color: var(--ink); background: var(--w); font-feature-settings: "palt"; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: max(1.6rem, 14px); letter-spacing: .08em; } }
@media (max-width: 640px) { body { padding-bottom: 8rem; } }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
b, strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--cy); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sp-only { display: inline; } .pc-only { display: none; }
@media (min-width: 1024px) { .sp-only { display: none; } .pc-only { display: inline; } }
.phr main, .phr footer { word-break: keep-all; overflow-wrap: anywhere; }
.nw { white-space: nowrap; }
.hl { color: var(--main); font-weight: 700; }
.mk { background: linear-gradient(transparent 60%, rgba(255, 225, 0, .8) 60%); padding: 0 .08em; }
.en, .num { font-family: var(--en); }
.num { font-weight: 700; letter-spacing: .02em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; vertical-align: middle; }
.c-abt { color: var(--c-abt); } .c-sch { color: var(--c-sch); } .c-act { color: var(--c-act); } .c-tgt { color: var(--c-tgt); }
.c-rep { color: var(--c-rep); } .c-msg { color: var(--c-msg); } .c-night { color: var(--c-night); }

/* ---------- layout ---------- */
.in { width: 100%; max-width: 128rem; margin: 0 auto; }
.in--s { max-width: 96rem; }
.sec { position: relative; padding: 6.4rem var(--sp); }
@media (min-width: 1024px) { .sec { padding-top: 12rem; padding-bottom: 12rem; } }

/* 色面のブロック：上の角を大きく丸める。続くブロックは前のブロックに重ねる */
.blk { position: relative; padding: 6.4rem var(--sp) 8rem; border-radius: var(--r-l) var(--r-l) 0 0; }
.blk + .blk { margin-top: calc(var(--r-l) * -1); }
.blk--cream { background: var(--cream); }
.blk--pale { background: var(--pale); }
.blk--teal { background: var(--main); color: var(--w); }
@media (min-width: 1024px) { .blk { padding-top: 12rem; padding-bottom: 14rem; } .blk--teal { padding-bottom: 9.6rem; } }

/* 波線（色は背景色、下向きは wv--down） */
.wv { position: relative; z-index: 1; height: 1.6rem; margin-bottom: -1px; background: var(--pale); -webkit-mask: var(--wave) left bottom / 12rem 100% repeat-x; mask: var(--wave) left bottom / 12rem 100% repeat-x; }
.wv--cream { background: var(--cream); } .wv--teal { background: var(--main); } .wv--gray { background: var(--gray); }
.wv--down { transform: scaleY(-1); margin: -1px 0 0; }
@media (min-width: 1024px) { .wv { height: 2.4rem; -webkit-mask-size: 18rem 100%; mask-size: 18rem 100%; } }

/* 点線 */
.dline { height: .6rem; margin: 2.4rem 0; background: radial-gradient(circle, #b4c3c8 1.6px, transparent 2px) left center / 1.1rem .6rem repeat-x; }

/* section head：アイコン＋和文＋英字ラベル */
.sh { margin-bottom: 3.2rem; }
.sh__ja { display: flex; align-items: center; gap: .55em; font-size: max(2.4rem, 20px); font-weight: 700; line-height: 1.35; letter-spacing: .08em; }
.sh__ja .ic { width: 1.1em; height: 1.1em; }
.sh__en { font-family: var(--en); font-weight: 700; font-size: max(1.3rem, 12px); letter-spacing: .14em; line-height: 1; color: var(--main); margin-top: 1rem; }
.sh__lead { margin-top: 1.6rem; color: var(--ink2); font-weight: 700; line-height: 1.85; }
.sh--c { text-align: center; }
.sh--c .sh__ja { justify-content: center; }
.sh--w .sh__ja { color: var(--w); } .sh--w .sh__ja .ic { color: var(--cy); } .sh--w .sh__en { color: var(--cy); } .sh--w .sh__lead { color: rgba(255, 255, 255, .92); }
@media (min-width: 1024px) {
  .sh { margin-bottom: 5.6rem; }
  .sh__ja { font-size: 3.6rem; }
  .sh__en { font-size: 1.6rem; margin-top: 1.2rem; }
  .sh--split { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2rem 8rem; }
  .sh--split .sh__lead { margin-top: 0; justify-self: end; max-width: 64rem; }
}
.catch { text-align: center; font-size: 2.8rem; font-weight: 900; line-height: 1.5; letter-spacing: .06em; margin: -1.2rem 0 4rem; }
@media (min-width: 1024px) { .catch { font-size: 4.4rem; margin: -2.4rem 0 6.4rem; } }

/* reveal */
[data-anim] { opacity: 0; transform: translate3d(0, 2.4rem, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-anim].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1; transform: none; transition: none; } }

/* ---------- parts ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1.6rem; min-height: 5.6rem; padding: .8rem 1.2rem .8rem 3.2rem; border: 2px solid var(--main); border-radius: 99rem; background: var(--main); color: var(--w); font-weight: 700; font-size: max(1.5rem, 14px); line-height: 1.4; letter-spacing: .08em; text-align: center; transition: background .25s, border-color .25s, color .25s; }
.btn__ar { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--w); color: var(--main); flex: 0 0 auto; transition: transform .25s var(--ease); }
.btn__ar .ic { width: 1.5rem; height: 1.5rem; }
.btn:hover { background: var(--main-d); border-color: var(--main-d); }
.btn:hover .btn__ar { transform: translateX(.3rem); }
.btn--y { background: var(--yl); border-color: var(--yl); color: var(--ink); }
.btn--y .btn__ar { background: var(--ink); color: var(--yl); }
.btn--y:hover { background: var(--yl-d); border-color: var(--yl-d); }
.btn--line { background: var(--w); color: var(--main); }
.btn--line .btn__ar { background: var(--main); color: var(--w); }
.btn--line:hover { background: var(--pale); border-color: var(--main); }
.btn--wt { background: var(--w); border-color: var(--w); color: var(--main); }
.btn--wt .btn__ar { background: var(--main); color: var(--w); }
.btn--wt:hover { background: var(--pale); border-color: var(--pale); }
.btn--s { min-height: 4.6rem; padding: .6rem .8rem .6rem 2rem; gap: 1rem; font-size: max(1.4rem, 13px); }
.btn--s .btn__ar { width: 2.6rem; height: 2.6rem; }
.btn--s .btn__ar .ic { width: 1.2rem; height: 1.2rem; }
.btn--l { min-height: 6.4rem; padding-left: 4rem; font-size: max(1.8rem, 16px); }
.btn--block { display: flex; width: 100%; justify-content: space-between; padding-left: 2.4rem; text-align: left; }
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 4rem; }
@media (min-width: 1024px) {
  .btn { min-height: 6rem; padding-left: 4rem; gap: 2.4rem; }
  .btn--s { min-height: 4.8rem; padding-left: 2.4rem; gap: 1.2rem; }
  .btn--l { min-height: 7.2rem; padding-left: 5.6rem; font-size: 2rem; }
  .btn--block { padding-left: 3.2rem; }
  .btns { margin-top: 6.4rem; gap: 2rem; }
}

.lk { display: inline-flex; align-items: center; gap: 1.2rem; min-height: 4.4rem; color: var(--main); font-weight: 700; line-height: 1.5; }
.lk__ar { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--main); color: var(--w); flex: 0 0 auto; transition: transform .25s var(--ease); }
.lk__ar .ic { width: 1.5rem; height: 1.5rem; }
.lk:hover .lk__ar { transform: translateX(.3rem); }
.lk--s { font-size: max(1.4rem, 13px); gap: 1rem; }
.lk--s .lk__ar { width: 2.6rem; height: 2.6rem; }
.lk--s .lk__ar .ic { width: 1.2rem; height: 1.2rem; }
.lks { display: grid; gap: .4rem; margin-top: 2.4rem; }

.pill { display: inline-flex; align-items: center; gap: .6rem; height: 3.8rem; padding: 0 1.8rem; border-radius: 99rem; font-weight: 700; font-size: max(1.4rem, 12px); letter-spacing: .06em; line-height: 1; white-space: nowrap; transition: filter .2s; }
.pill .ic { width: 1.5rem; height: 1.5rem; }
.pill--night { background: var(--c-night); color: var(--w); }
.pill--y { background: var(--yl); color: var(--ink); }
.pill:hover { filter: brightness(.94); }

.st { display: inline-flex; align-items: center; height: 2.6rem; padding: 0 1rem; border-radius: .6rem; font-size: max(1.2rem, 12px); font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap; vertical-align: middle; }
.st--open { background: var(--c-sch); color: var(--w); }
.st--wait { background: var(--yl); color: var(--ink); }
.st--soon { background: var(--gray); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); }

/* 吹き出しバッジ（写真の右上） */
.bdg { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; padding: .3rem 1.2rem; border: 2px solid var(--main); border-radius: 99rem; background: var(--w); color: var(--main); font-size: max(1.2rem, 12px); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.bdg::after { content: ""; position: absolute; left: 1.4rem; bottom: -.6rem; width: 1rem; height: 1rem; background: inherit; border-right: 2px solid; border-bottom: 2px solid; border-color: inherit; transform: rotate(45deg); }
.bdg--open { border-color: var(--c-sch); color: #c2402f; }
.bdg--wait { border-color: var(--c-tgt); color: #7d6200; }
.bdg--soon { border-color: #aab9be; color: var(--ink2); }

/* 写真の左下に重なる白いタブ */
.tab { position: absolute; left: 1.6rem; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.4rem .3rem; border-radius: 1rem 1rem 0 0; background: var(--w); color: var(--ink2); font-size: max(1.3rem, 12px); line-height: 1.5; white-space: nowrap; }
.tab .ic { width: 1.4rem; height: 1.4rem; color: var(--main); }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.2rem; color: var(--ink2); font-size: max(1.3rem, 12px); line-height: 1.7; }
.tags .ic { width: 1.6rem; height: 1.6rem; color: var(--main); }

.flag { display: inline-flex; align-items: center; height: 3rem; padding: 0 2.2rem 0 1.2rem; background: var(--c-abt); color: var(--w); font-weight: 700; font-size: max(1.3rem, 12px); letter-spacing: .08em; line-height: 1; clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 50%, 100% 100%, 0 100%); }
.flag--night { background: var(--c-night); }

.spec { display: grid; gap: 1rem; }
.spec > div { display: flex; align-items: center; gap: 1.2rem; }
.spec dt { flex: 0 0 auto; min-width: 9.6rem; padding: .2rem 1rem; border: 1.5px solid var(--main); border-radius: .3rem; color: var(--main); font-weight: 700; font-size: max(1.3rem, 12px); text-align: center; line-height: 1.6; }
.spec dd { font-weight: 700; line-height: 1.5; }

/* 回る英字（装飾） */
.rot { position: absolute; width: 13rem; height: 13rem; pointer-events: none; }
.rot text { font-family: var(--en); font-weight: 700; font-size: 15px; letter-spacing: 3.2px; fill: var(--main); opacity: .55; transform-box: view-box; transform-origin: 100px 100px; animation: spin 28s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .rot text { animation: none; } }

/* フクロウ（案内役のイラスト）＋ひとことの吹き出し */
.fk { display: flex; align-items: flex-start; gap: 1rem; width: max-content; max-width: 100%; }
.fk__say { position: relative; margin-top: .8rem; padding: .8rem 1.4rem; border: 2px solid var(--ink); border-radius: 1.2rem; background: var(--w); font-size: max(1.3rem, 12px); font-weight: 700; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; }
.fk__say::after { content: ""; position: absolute; right: -.8rem; top: 1.4rem; width: 1.2rem; height: 1.2rem; background: var(--w); border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.fk__img { flex: 0 0 auto; width: 8.8rem; animation: fk-bob 3.6s ease-in-out infinite; }
@keyframes fk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6rem); } }
@media (prefers-reduced-motion: reduce) { .fk__img { animation: none; } }
.fk--sch { position: absolute; z-index: 2; top: -6.4rem; right: var(--sp); }
.fk--tgt { margin: 2.4rem 0 0 auto; }
.fk--cta { margin: -9.6rem auto 1.2rem; }
.fk--entry { margin: -1.6rem auto 2.4rem; }
.rep__fk { width: 9.6rem; margin-bottom: 1.6rem; }
@media (min-width: 1024px) {
  .fk__img { width: 12rem; }
  .fk__say { margin-top: 1.2rem; padding: 1rem 1.8rem; font-size: 1.5rem; }
  .fk--sch { top: -8.8rem; right: max(var(--sp), calc((100% - 128rem) / 2)); }
  .fk--tgt { margin: 4rem 0 0 2rem; }
  .fk--cta { margin: -4rem 0 0; }
  .cta:has(.fk--cta) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fk--entry { margin: -3.2rem auto 3.2rem; }
  .rep__fk { width: 12.8rem; margin-bottom: 2rem; }
}

/* 横スライド（ネイティブの横スクロール＋スナップ。矢印・ドット・マウスのドラッグは main.js） */
.cs { position: relative; }
.cs__track { position: relative; display: flex; gap: 1.6rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(50% - var(--vw, 100vw) / 2); padding: .8rem calc(var(--vw, 100vw) / 2 - 50%) 2.4rem; }
.cs__track::-webkit-scrollbar { display: none; }
.cs__track > * { flex: 0 0 var(--cw, 82%); min-width: 0; scroll-snap-align: start; }
.cs.is-drag .cs__track { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.cs.is-drag .cs__track * { pointer-events: none; }
.cs__ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; margin-top: .4rem; }
.cs__ctrl[hidden] { display: none; }
.cs__dots { display: flex; align-items: center; }
.cs__dot, .mv__dot { display: grid; place-items: center; height: 4.4rem; padding: 0 .4rem; }
.cs__dot::before, .mv__dot::before { content: ""; display: block; width: .8rem; height: .8rem; border-radius: 99rem; background: #a9b9be; transition: width .4s var(--ease), background .4s; }
.cs__dot.is-on::before, .mv__dot.is-on::before { width: 3.2rem; background: var(--main); }
.cs__btn, .mv__btn { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--w); color: var(--ink); box-shadow: 0 .3rem 1.2rem rgba(0, 40, 60, .16); transition: color .2s, opacity .2s; }
.cs__btn .ic, .mv__btn .ic { width: 1.6rem; height: 1.6rem; }
.cs__btn:hover, .mv__btn:hover { color: var(--main); }
.cs__btn:disabled { opacity: .4; cursor: default; }
.blk--teal .cs__dot::before { background: rgba(255, 255, 255, .45); }
.blk--teal .cs__dot.is-on::before { background: var(--w); }
@media (min-width: 1024px) {
  .cs__track { gap: 2.4rem; }
  .cs__btn, .mv__btn { width: 5.2rem; height: 5.2rem; }
}


/* ---------- logo (font-set, 清書前提) ---------- */
.lg { --lg: 3rem; display: inline-flex; align-items: center; gap: .3em; font-size: var(--lg); line-height: 1; font-family: var(--logo); font-weight: 900; white-space: nowrap; color: var(--ink); letter-spacing: .02em; }
.lg__t { display: inline-flex; align-items: baseline; }
.lg__d { font-size: .74em; }
.lg__n { font-family: var(--en); font-weight: 700; font-size: 1.36em; line-height: .8; margin: 0 .04em; color: var(--teal); position: relative; top: .04em; }
.lg__j { font-size: 1em; }
.lg__en { font-family: var(--en); font-weight: 700; font-size: .2em; letter-spacing: .1em; line-height: 1.3; color: var(--ink2); padding-left: .55em; border-left: 1px solid var(--line); }

/* ---------- header ---------- */
.hd { position: fixed; top: 0; left: 0; z-index: 1001; width: 100%; height: var(--hd); display: flex; align-items: center; gap: .4rem; padding: 0 .8rem 0 var(--sp); background: var(--w); transition: box-shadow .3s, height .3s var(--ease); will-change: transform; }
.is-scrolled .hd { box-shadow: 0 .2rem 1.6rem rgba(0, 40, 60, .08); }
.hd__logo { margin-right: auto; line-height: 1; }
.hd__logo a { display: flex; flex-direction: column; gap: .7rem; padding: .6rem 0; }
.hd__catch { display: none; }
.hd .lg { --lg: 2.7rem; }
.hd__r { display: none; }
.hd__night { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 6.6rem; height: 5.6rem; color: var(--c-night); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.hd__night .ic { width: 2.2rem; height: 2.2rem; }
.hd__menu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; width: 5.6rem; height: 5.6rem; }
.hd__bars span { display: block; width: 2.6rem; height: 2px; margin: .5rem 0; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }
.hd__menu-t { font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: .06em; line-height: 1; }
.is-menu .hd__bars span:nth-child(1) { transform: translateY(calc(.5rem + 2px)) rotate(45deg); }
.is-menu .hd__bars span:nth-child(2) { opacity: 0; }
.is-menu .hd__bars span:nth-child(3) { transform: translateY(calc(-.5rem - 2px)) rotate(-45deg); }
@media (min-width: 1024px) {
  .hd { gap: 3.2rem; padding: 0 3.2rem 0 4rem; }
  .hd__logo a { gap: 1rem; }
  .hd__catch { display: block; font-size: max(1.2rem, 12px); font-weight: 700; letter-spacing: .06em; color: var(--ink2); }
  .hd__catch::before { content: "＼"; margin-right: .3em; } .hd__catch::after { content: "／"; margin-left: .3em; }
  .hd .lg { --lg: 4.2rem; }
  .hd__r { display: flex; flex-direction: column; align-items: flex-end; gap: 1.4rem; }
  .hd__util { display: flex; gap: 1rem; }
  .hd__nav ul { display: flex; gap: 2.6rem; }
  .hd__nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: .4rem 0; font-weight: 700; font-size: max(1.5rem, 12px); letter-spacing: .08em; line-height: 1; white-space: nowrap; transition: color .2s; }
  .hd__nav .ic { width: 2.2rem; height: 2.2rem; transition: transform .25s var(--ease); }
  .hd__nav a:hover { color: var(--main); }
  .hd__nav a:hover .ic { transform: translateY(-.3rem); }
  .hd__nav a.is-current { color: var(--main); }
  .hd__night { display: none; }
  .hd__menu { width: 6.4rem; height: 6.4rem; margin-left: -.8rem; }
  .hd__bars span { width: 3rem; }
  .is-scrolled .hd { height: 8rem; }
  .is-scrolled .hd__catch { display: none; }
  .is-scrolled .hd .lg { --lg: 3.4rem; }
  .is-scrolled .hd__r { flex-direction: row-reverse; align-items: center; gap: 3.2rem; }
  .is-scrolled .hd__nav a { flex-direction: row; gap: .6rem; }
  .is-scrolled .hd__nav .ic { width: 1.8rem; height: 1.8rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .mv__side { height: auto; min-height: 64rem; }
  .sbn__s { display: none; }
  .hd__nav ul { gap: 1.8rem; }
  .is-scrolled .hd__util .pill--night { display: none; }
}

/* drawer (phone) */
.dw { position: fixed; inset: var(--hd) 0 0 0; z-index: 1000; padding: 2rem var(--sp) 12rem; overflow: auto; background: var(--pale2); transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
.dw.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.dw__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dw__nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; min-height: 10.4rem; padding: 1.4rem 1rem; border-radius: var(--r); background: var(--w); box-shadow: 0 .2rem .8rem rgba(0, 60, 80, .06); font-weight: 700; font-size: max(1.5rem, 14px); line-height: 1.4; text-align: center; }
.dw__nav .ic { width: 3rem; height: 3rem; }
.dw__nav small { display: block; margin-top: .3rem; font-family: var(--en); font-size: 12px; color: var(--main); letter-spacing: .1em; }
.dw__nav a.is-current { box-shadow: inset 0 0 0 2px var(--main); }
.dw__cta { margin-top: 2.4rem; }
.is-menu { overflow: hidden; }
@media (min-width: 1024px) {
  .dw { inset: var(--hd) 0 auto 0; max-height: calc(100vh - var(--hd)); padding: 4rem max(var(--sp), calc((100% - 128rem) / 2)) 5.6rem; box-shadow: 0 2.4rem 4rem rgba(0, 40, 60, .14); transform: translateY(-2rem); opacity: 0; transition: transform .35s var(--ease), opacity .35s, visibility 0s .35s; }
  .dw.is-open { transform: none; opacity: 1; transition: transform .35s var(--ease), opacity .35s; }
  .is-scrolled .dw { top: 8rem; }
  .dw__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
  .dw__nav a { min-height: 12.8rem; transition: transform .25s var(--ease); }
  .dw__nav a:hover { transform: translateY(-.3rem); }
  .dw__cta { max-width: 48rem; margin: 3.2rem auto 0; }
}

/* demo note (dummy data) */
.demo-note { background: var(--ink); color: var(--w); text-align: center; font-size: max(1.2rem, 12px); font-weight: 700; padding: .8rem var(--sp); letter-spacing: .08em; line-height: 1.5; }

/* ---------- MV ---------- */
.mv { position: relative; isolation: isolate; padding-bottom: 5.6rem; }
.mv::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: 34rem; background: var(--pale); }
.mv::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(34rem - 3.2rem); height: 3.2rem; background: var(--pale); -webkit-mask: var(--wave) -8rem bottom / 44rem 100% repeat-x; mask: var(--wave) -8rem bottom / 44rem 100% repeat-x; }
.mv__main { position: relative; }
.mv__slider { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--pale); }
.mv__sl { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.mv__sl.is-on { opacity: 1; }
.mv__sl img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s linear; }
.mv__sl.is-on img { transform: none; }
/* 写真の上のバナー（2・3枚目） */
.mv__bn { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 1.2rem; padding: 2rem 2rem 6.8rem; background: linear-gradient(200deg, rgba(22, 42, 78, .82) 0%, rgba(22, 42, 78, .35) 45%, rgba(22, 42, 78, 0) 70%); color: var(--w); }
.mv__bn-v { display: none; position: absolute; top: 1.6rem; right: 1.6rem; writing-mode: vertical-rl; font-size: max(1.5rem, 13px); font-weight: 900; letter-spacing: .16em; line-height: 1.3; text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .35); }
.mv__bn-box { position: absolute; top: 1.6rem; left: 1.6rem; display: grid; justify-items: start; gap: .6rem; padding: 1.4rem 1.6rem 1.6rem; border-radius: 1.2rem; background: rgba(255, 255, 255, .94); color: var(--ink); transform: rotate(-3deg); box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .15); }
.mv__bn-tag { padding: .2rem 1rem; border-radius: 99rem; background: var(--c-night); color: var(--w); font-size: max(1.2rem, 12px); font-weight: 700; line-height: 1.6; }
.mv__bn-d { color: var(--main); font-family: var(--en); font-weight: 700; font-size: 4rem; line-height: 1; letter-spacing: 0; }
.mv__bn-d small { margin-left: .2em; color: var(--ink); font-size: .4em; }
.mv__bn-d--ja { font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: 2.6rem; line-height: 1.2; letter-spacing: .04em; }
.mv__bn-s { padding: .2rem 1rem; border-radius: .4rem; background: var(--yl); font-size: max(1.3rem, 12px); font-weight: 700; line-height: 1.6; }
.mv__sl--theme .mv__bn-box { background: rgba(255, 248, 220, .96); }
.mv__card { position: relative; z-index: 2; margin: -5.6rem var(--sp) 0; padding: 2.4rem 2.4rem 2rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.mv__caps { display: grid; }
.mv__cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(.8rem); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.mv__cap:first-child { visibility: visible; }
.mv__cap.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .15s, transform .6s var(--ease) .15s; }
.mv__label { color: var(--main); font-weight: 700; font-size: max(1.3rem, 12px); letter-spacing: .08em; line-height: 1.5; }
.mv__ttl { margin-top: .8rem; font-size: 2.9rem; font-weight: 900; line-height: 1.45; letter-spacing: .06em; }
.mv__date { color: var(--ink2); font-size: max(1.3rem, 12px); font-weight: 700; line-height: 1.5; text-align: right; }
.mv__date .num { font-size: 1.15em; color: var(--ink); }
.mv__ttl2 { margin-top: .8rem; font-size: 2.4rem; font-weight: 700; line-height: 1.5; letter-spacing: .06em; }
.mv__ttl2 a { background: linear-gradient(var(--main), var(--main)) left bottom / 0 2px no-repeat; transition: background-size .4s var(--ease); }
.mv__ttl2 a:hover { background-size: 100% 2px; }
.mv__lead { margin-top: 1.2rem; color: var(--ink2); font-size: max(1.4rem, 13px); line-height: 1.8; }
@media (prefers-reduced-motion: reduce) { .mv__cap { transition: none; transform: none; } }
.mv__present { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--ink2); line-height: 1; }
.mv__present img { width: 10rem; }
.mv__ctrl { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.6rem; }
.mv__dots { display: flex; align-items: center; }
.mv__side { position: relative; margin: 5.6rem var(--sp) 0; padding: 2.4rem 1.6rem 1.2rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.mv__side-ttl { display: flex; align-items: center; gap: .6rem; color: var(--main); font-size: max(2rem, 17px); font-weight: 700; line-height: 1.3; letter-spacing: .08em; }
.mv__side-ttl .ic { width: 1.1em; height: 1.1em; }
.mv__side-ttl .en { align-self: flex-end; margin-left: .2rem; font-size: 12px; letter-spacing: .12em; }
.sbns { display: grid; gap: 1rem; margin-top: 1.6rem; }
.sbn { position: relative; isolation: isolate; display: flex; align-items: center; height: 100%; min-height: 9.6rem; padding: 1.4rem 5.6rem 1.4rem 1.8rem; overflow: hidden; border-radius: 1rem; line-height: 1.35; transition: transform .25s var(--ease), box-shadow .25s; }
.sbn:hover { transform: translateY(-.2rem); box-shadow: 0 .6rem 1.6rem rgba(0, 40, 60, .14); }
.sbn__in { display: grid; gap: .5rem; }
.sbn__tag { font-size: max(1.2rem, 12px); font-weight: 700; letter-spacing: .06em; }
.sbn__big { font-size: 2.4rem; font-weight: 900; letter-spacing: .04em; line-height: 1.1; }
.sbn__big small { margin-left: .3em; font-size: .5em; font-weight: 700; }
.sbn__s { font-size: max(1.2rem, 12px); font-weight: 500; }
.sbn__ar { position: absolute; top: 50%; right: 1.4rem; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-top: -1.4rem; border-radius: 50%; background: var(--main); color: var(--w); }
.sbn__ar .ic { width: 1.3rem; height: 1.3rem; }
.sbn--night { background: var(--c-night); color: var(--w); }
.sbn--night img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sbn--night::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(22, 42, 78, .94) 0%, rgba(22, 42, 78, .78) 55%, rgba(22, 42, 78, .2) 100%); }
.sbn--night .sbn__big { font-family: var(--en); font-weight: 700; font-size: 3.2rem; letter-spacing: .02em; }
.sbn--night .sbn__ar { background: var(--yl); color: var(--ink); }
.sbn--theme { background: var(--cream) radial-gradient(rgba(233, 174, 0, .32) 1.4px, transparent 1.8px) 0 0 / 1.2rem 1.2rem; color: var(--ink); }
.sbn--theme .sbn__tag { color: #7d6200; }
.sbn--zemi { background: var(--pale); color: var(--main-d); }
.sbn--letter { background: var(--w); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.sbn--letter .sbn__tag { color: var(--main); }
.mv__more { display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 4.8rem; margin-top: .8rem; color: var(--main); font-weight: 700; font-size: max(1.4rem, 13px); }
.mv__more .ic { width: 1.6rem; height: 1.6rem; }
@media (min-width: 641px) { .mv__bn-v { display: block; } }
@media (min-width: 641px) and (max-width: 1023px) {
  .sbns { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .mv { display: grid; grid-template-columns: minmax(0, 1fr) 44rem; gap: 3.2rem; align-items: start; max-width: 172rem; margin: 0 auto; padding: 2.4rem 3.2rem 11rem; }
  .mv::before { top: 38rem; }
  .mv::after { top: calc(38rem - 6.4rem); height: 6.4rem; -webkit-mask-size: 96rem 100%; mask-size: 96rem 100%; -webkit-mask-position: -24rem bottom; mask-position: -24rem bottom; }
  .mv__slider { aspect-ratio: auto; height: 64rem; border-radius: 2.4rem; }
  .mv__bn { padding: 3.2rem; }
  .mv__bn-v { top: 3.2rem; right: 3.2rem; font-size: 2rem; }
  .mv__bn-box { top: 6.4rem; left: auto; right: 13.6rem; padding: 2.4rem 3.2rem 2.8rem; border-radius: 2rem; gap: 1rem; }
  .mv__bn-tag { font-size: 1.5rem; padding: .3rem 1.4rem; }
  .mv__bn-d { font-size: 8rem; }
  .mv__bn-d--ja { font-size: 5.2rem; }
  .mv__bn-s { font-size: 1.6rem; padding: .3rem 1.4rem; }
  .mv__card { position: absolute; left: 3.2rem; bottom: -6.4rem; width: 62rem; margin: 0; padding: 3.6rem 4.4rem 3.2rem; border-radius: 2rem; }
  .mv__ttl { font-size: 4.6rem; line-height: 1.4; }
  .mv__ttl2 { font-size: 3.4rem; }
  .mv__date { font-size: 1.5rem; }
  .mv__lead { font-size: 1.6rem; }
  .mv__present img { width: 13rem; }
  .mv__ctrl { position: absolute; z-index: 3; right: 3.2rem; bottom: 3.2rem; margin: 0; }
  .mv__side { display: flex; flex-direction: column; height: 64rem; margin: 0; padding: 3rem 2.4rem 1.2rem; }
  .sbns { flex: 1; grid-auto-rows: minmax(0, 1fr); margin-top: 2rem; }
  .sbn { min-height: 0; }
}

/* ---------- pick up（MVの下の横スライド） ---------- */
.pku { position: relative; padding: 2.4rem var(--sp) 4rem; background: var(--pale); }
.pku .in { position: relative; }
.pku__rot { top: -3.2rem; left: -1rem; width: 11rem; height: 11rem; }
.pku .sh { position: relative; }
.cs--pk { --cw: 84%; }
.pk { display: flex; flex-direction: column; gap: .4rem; }
.pk__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background: var(--w); }
.pk__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pk:hover .pk__img img { transform: scale(1.04); }
.pk__disk { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; width: 54%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 .4rem 1.6rem rgba(0, 40, 60, .16); text-align: center; transform: translate(-50%, -50%); }
.pk__lg { font-family: var(--logo); font-weight: 900; font-size: 12px; line-height: 1; letter-spacing: .04em; }
.pk__lg b { color: var(--teal); font-family: var(--en); font-size: 1.4em; }
.pk__lb { padding: 0 .9rem; border-radius: .4rem; background: var(--c-night); color: var(--w); font-size: 12px; font-weight: 700; line-height: 1.7; white-space: nowrap; }
.pk__dt { font-size: 1.8rem; font-weight: 900; line-height: 1.3; letter-spacing: .04em; }
.pk__t { margin-top: 1.4rem; font-size: 1.9rem; font-weight: 700; line-height: 1.5; }
.pk__s { color: var(--ink2); font-size: max(1.4rem, 13px); font-weight: 700; line-height: 1.7; }
@media (min-width: 1024px) {
  .pku { padding: 4.8rem var(--sp) 8rem; }
  .pku__rot { top: -4rem; left: 6rem; width: 18rem; height: 18rem; }
  .cs--pk { --cw: 62rem; }
  .pk__disk { width: 44%; gap: .9rem; }
  .pk__lg { font-size: 1.7rem; }
  .pk__lb { font-size: 1.4rem; padding: 0 1.2rem; }
  .pk__dt { font-size: 3rem; }
  .pk__t { margin-top: 2rem; font-size: 2.4rem; }
  .pk__s { font-size: 1.6rem; }
}

/* ---------- about ---------- */
.abt__in { display: grid; gap: 4.8rem; }
.abt__ttl { margin-top: 1.6rem; font-size: 2.3rem; font-weight: 700; line-height: 1.6; letter-spacing: .06em; }
.abt__desc { margin-top: 2.4rem; color: var(--ink2); line-height: 2; }
.abt .tags { margin-top: 2rem; }
.abt__ph { position: relative; padding: 3.2rem 0 7.2rem; }
.abt__main { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.abt__c { position: absolute; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: .5rem solid var(--w); box-shadow: var(--shadow); }
.abt__c--1 { top: 0; left: -1rem; width: 36%; }
.abt__c--2 { right: -1rem; bottom: 0; width: 44%; }
.abt__ph .rot { top: -2.4rem; right: 0; width: 11rem; height: 11rem; z-index: -1; }
.abt__ph { isolation: isolate; }
.aims { margin-top: 6.4rem; padding: 3.2rem 2rem; border-radius: var(--r); background: var(--pale2); text-align: center; }
.aims__lead { font-weight: 700; line-height: 1.9; }
.aims__list { display: grid; gap: 1rem; margin: 2.4rem 0; }
.aims__list li { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 1.4rem 1.6rem; border-radius: 99rem; background: var(--w); box-shadow: 0 .2rem .8rem rgba(0, 60, 80, .06); font-size: 1.9rem; font-weight: 700; line-height: 1.4; }
.aims__list .num { color: var(--main); font-size: .8em; }
.aims__end { font-weight: 700; }
@media (min-width: 1024px) {
  .abt__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 9.6rem; align-items: center; }
  .abt__ttl { font-size: 3rem; }
  .abt__ph { padding: 5.6rem 0 9.6rem 4rem; }
  .abt__c--1 { left: 0; width: 30%; }
  .abt__c--2 { right: -3.2rem; width: 36%; }
  .abt__ph .rot { top: -3.2rem; right: -5.6rem; width: 18rem; height: 18rem; }
  .aims { margin-top: 9.6rem; padding: 5.6rem 6.4rem; }
  .aims__lead { font-size: 1.8rem; }
  .aims__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin: 3.2rem 0; }
  .aims__list li { padding: 2.2rem 2rem; font-size: 2.4rem; }
  .aims__end { font-size: 1.8rem; }
}

/* ---------- schedule ---------- */
#schedule .in { position: relative; }
.sch { display: grid; gap: 4rem; }
.sch__lead { color: var(--ink2); font-weight: 700; line-height: 1.85; }
.sch__sub { display: flex; flex-wrap: wrap; gap: 0 2.4rem; font-weight: 700; font-size: max(1.4rem, 13px); }
.sch__sub a { display: inline-block; padding: .8rem 0; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.nxt { padding: 2.4rem 2rem 1.2rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.nxt__hd { display: flex; align-items: flex-end; gap: 1rem; padding-bottom: 1.4rem; border-bottom: 2px solid var(--ink); }
.nxt__m { font-family: var(--en); font-weight: 700; font-size: 5.2rem; line-height: .85; color: var(--main); letter-spacing: 0; }
.nxt__en { font-family: var(--en); font-weight: 700; font-size: 12px; line-height: 1.25; letter-spacing: .12em; color: var(--ink2); }
.nxt__cap { margin-left: auto; font-size: max(1.3rem, 12px); font-weight: 700; color: var(--ink2); line-height: 1.4; }
.nxt__list li { display: grid; grid-template-columns: 8.8rem minmax(0, 1fr); gap: .2rem 1.4rem; align-items: center; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.nxt__list li:last-child { border-bottom: 0; }
.nxt__d { grid-row: span 2; font-family: var(--en); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: 0; }
.nxt__d small { display: block; margin-top: .5rem; font-family: "Noto Sans JP", sans-serif; font-size: max(1.2rem, 12px); color: var(--ink2); letter-spacing: .04em; }
.nxt__d--tbd { font-family: "Noto Sans JP", sans-serif; font-size: max(1.5rem, 13px); color: var(--ink2); }
.nxt__n { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; color: var(--ink2); font-size: max(1.3rem, 12px); font-weight: 700; line-height: 1.5; }
.nxt__t { font-weight: 700; line-height: 1.5; }
.nxt__t a { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.nxt__t a:hover { color: var(--main); }
.cs--ev { --cw: 84%; margin-top: 5.6rem; }
.ev { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.ev__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.ev__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.ev__img:hover img { transform: scale(1.04); }
.ev__body { flex: 1; display: flex; flex-direction: column; padding: 2rem 2rem 2.4rem; }
.ev__no { color: var(--main); font-size: max(1.3rem, 12px); font-weight: 700; line-height: 1.5; }
.ev__t { margin-top: .4rem; font-size: 1.9rem; font-weight: 700; line-height: 1.55; }
.ev__t a:hover { color: var(--main); }
.ev__d { margin-top: 1rem; color: var(--ink2); font-size: max(1.4rem, 13px); line-height: 1.85; }
.ev__meta { display: grid; gap: .4rem; margin-top: auto; padding-top: 1.6rem; color: var(--ink2); font-size: max(1.3rem, 12px); line-height: 1.7; }
.ev__meta p { display: flex; align-items: flex-start; gap: .6rem; }
.ev__meta .ic { width: 1.6rem; height: 1.6rem; margin-top: .25em; color: var(--main); }
.ev__btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.ev__btns .btn { flex: 1 1 auto; justify-content: space-between; }
@media (min-width: 641px) and (max-width: 1023px) { .cs--ev { --cw: 46%; } }
@media (min-width: 1024px) {
  .sch { grid-template-columns: minmax(0, 1fr) 58rem; gap: 9.6rem; align-items: center; }
  .sch__head .sh { margin-bottom: 3.2rem; }
  .nxt { padding: 3.2rem 4rem 1.6rem; }
  .nxt__m { font-size: 7.2rem; }
  .nxt__list li { grid-template-columns: 11rem minmax(0, 1fr); padding: 2rem 0; }
  .nxt__d { font-size: 3.2rem; }
  .cs--ev { --cw: 40rem; margin-top: 8rem; }
  .ev__body { padding: 2.4rem 2.8rem 2.8rem; }
  .ev__t { font-size: 2rem; }
}

/* ---------- activities (teal block) ---------- */
.cs--act { --cw: 80%; }
.cd { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--w); color: var(--ink); }
.cd__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cd__img img { width: 100%; height: 100%; object-fit: cover; }
.cd__body { flex: 1; display: flex; flex-direction: column; padding: 2rem 2rem 2rem; }
.cd__hd { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.cd__t { font-size: 2rem; font-weight: 700; line-height: 1.45; }
.cd__d { margin-top: 1rem; color: var(--ink2); font-size: max(1.4rem, 13px); line-height: 1.85; }
.cd__ft { margin-top: auto; padding-top: 1.2rem; }
@media (min-width: 641px) and (max-width: 1023px) { .cs--act { --cw: 44%; } }
@media (min-width: 1024px) {
  .cs--act { --cw: 34rem; }
  .cd__body { padding: 2.4rem 2.4rem 2rem; }
}

/* ---------- points（1枚ずつの横スライド） ---------- */
.pts-sec .in { position: relative; }
.pts__rot { top: -3.2rem; right: 0; width: 11rem; height: 11rem; }
.pts__head { position: relative; display: grid; gap: 1.2rem; margin-bottom: 1.6rem; }
.pts__head .sh { margin-bottom: 0; }
.pts__lead { color: var(--ink2); font-weight: 700; line-height: 1.85; }
.pts__head .cs__ctrl { justify-content: flex-start; margin: 0; }
.cs--one { --cw: 100%; }
.cs--one .cs__track { gap: 0; margin: 0; padding: 0 0 1.6rem; }
.pt { display: grid; gap: 2rem; align-content: start; }
.pt__ph { position: relative; order: -1; padding: 2.8rem 1.6rem 3.6rem; }
.pt__big { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.pt__c { position: absolute; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: .5rem solid var(--w); box-shadow: var(--shadow); }
.pt__c--1 { top: 0; left: 0; width: 30%; }
.pt__c--2 { right: 0; bottom: 0; width: 36%; }
.pt__t { margin-top: 1.4rem; font-size: 3rem; font-weight: 900; letter-spacing: .12em; line-height: 1.3; }
.pt__txt .dline { margin: 2rem 0; }
.pt__d { margin-top: 2rem; line-height: 2; }
.pt .tags { margin-top: 1.6rem; }
.pt__txt { position: relative; }
.pt__ill { position: absolute; top: -.8rem; right: 0; width: 8.8rem; }
@media (min-width: 1024px) {
  .pt__ill { top: -1.6rem; width: 12.8rem; }
  .pts__rot { top: 16rem; right: -7.2rem; width: 18rem; height: 18rem; }
  .pts__head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 4rem; margin-bottom: 4rem; }
  .pts__head .cs__ctrl { justify-content: flex-end; }
  .pt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8rem; align-items: center; }
  .pt__ph { order: 2; padding: 4.8rem 4rem 6.4rem; }
  .pt__c--1 { width: 26%; }
  .pt__c--2 { width: 32%; }
  .pt__t { font-size: 4.4rem; }
}

/* ---------- 兼務先（会員証） ---------- */
.idcs { padding: 4.8rem var(--sp) 6.4rem; background: var(--pale); text-align: center; }
.idcs__lead { font-size: 2.2rem; font-weight: 700; line-height: 1.5; letter-spacing: .08em; }
/* 第2人事部 ＝ 兼務先【けんむさき】（白い角丸の箱） */
.kmu { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; max-width: 76rem; margin: 3.2rem auto 0; padding: 3.2rem 2.4rem 3.6rem; border-radius: 2rem; background: var(--w); box-shadow: var(--shadow); }
.kmu__lg .lg { --lg: 3.6rem; }
.kmu__eq { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--main); color: var(--w); font-size: 2.4rem; font-weight: 900; line-height: 1; }
.kmu__word { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; }
.kmu__big { white-space: nowrap; color: var(--main); font-size: 5.2rem; font-weight: 900; line-height: 1.15; letter-spacing: .08em; background: linear-gradient(transparent 68%, rgba(255, 225, 0, .8) 68%); padding: 0 .1em; }
.kmu__kana { margin-top: .6rem; color: var(--ink2); font-size: max(1.4rem, 13px); font-weight: 700; letter-spacing: .1em; }
.idcs__end { margin-top: 4.8rem; font-size: 1.8rem; font-weight: 700; line-height: 1.9; }
.idcs__end b { color: var(--main); }
@media (min-width: 1024px) {
  .idcs { padding: 8rem var(--sp) 9.6rem; }
  .idcs__lead { font-size: 3rem; }
  .kmu { flex-direction: row; justify-content: center; gap: 4rem; max-width: 92rem; margin-top: 4.8rem; padding: 5.6rem 6.4rem; }
  .kmu__lg .lg { --lg: 5.6rem; }
  .kmu__eq { width: 6.4rem; height: 6.4rem; font-size: 3.4rem; }
  .kmu__big { font-size: 8rem; }
  .kmu__kana { font-size: 1.8rem; }
  .idcs__end { margin-top: 6.4rem; font-size: 2.6rem; }
}

/* ---------- target ---------- */
.tgt { padding-left: 0; padding-right: 0; }
.tgt__panel { margin-left: var(--sp); padding: 4.8rem var(--sp) 4.8rem 2.4rem; border-radius: var(--r-l) 0 0 var(--r-l); background: var(--gray); }
.tgt__catch { font-size: 3.4rem; font-weight: 900; line-height: 1.3; letter-spacing: .06em; }
.tgt__p { margin-top: 1.6rem; line-height: 2; }
/* 丸い写真＋色付きハッシュタグ */
.kws { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.6rem; margin: 3.2rem 0 4rem; }
.kw { position: relative; }
.kw:nth-child(even) { transform: translateY(2.4rem); }
.kw img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.kw__t { position: absolute; right: -.4rem; bottom: .6rem; display: inline-flex; align-items: center; height: 3.8rem; padding: 0 1.4rem; border-radius: 99rem; color: var(--w); font-size: max(1.4rem, 13px); font-weight: 700; letter-spacing: .04em; line-height: 1; white-space: nowrap; box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .12); }
.kw__t--1 { background: #d9503f; } .kw__t--2 { background: var(--main); } .kw__t--3 { background: var(--c-tgt); color: var(--ink); } .kw__t--4 { background: var(--c-night); }
.rcm { padding: 2.4rem 2rem 1.2rem; border-radius: var(--r); background: var(--w); }
.rcm__t { display: flex; align-items: center; gap: .6rem; font-size: 2rem; font-weight: 700; line-height: 1.4; }
.rcm__list { margin-top: .8rem; }
.rcm__list li { position: relative; padding: 1.4rem 0 1.4rem 3.6rem; border-bottom: 1px dashed var(--line); line-height: 1.8; }.rcm__list li:last-child { border-bottom: 0; }
.rcm__list li::before { content: ""; position: absolute; left: 0; top: 1.7rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.5rem no-repeat; }
/* イラスト付きの一覧（チェックの丸の代わりに左にイラスト） */
.rcm__list--ill li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1.2rem; align-items: center; padding: 1.4rem 0; }
.rcm__list--ill li::before { content: none; }
.cta { position: relative; max-width: 128rem; margin: 6.4rem var(--sp) 0; padding: 4rem 2.4rem 3.2rem; border-radius: var(--r); background: var(--cream); text-align: center; }
.cta__lead { display: inline-block; padding: .4rem 1.6rem; border-radius: 99rem; background: var(--ink); color: var(--yl); font-size: max(1.4rem, 13px); font-weight: 700; letter-spacing: .1em; line-height: 1.5; }
.cta__ttl { margin-top: 1.6rem; font-size: 2.6rem; font-weight: 900; line-height: 1.45; letter-spacing: .06em; }
.cta__txt { margin-top: 1.6rem; line-height: 2; text-align: left; }
.cta__btns { display: grid; gap: 1.2rem; margin-top: 2.8rem; }
@media (min-width: 1024px) {
  .tgt__panel { display: grid; grid-template-columns: 46rem minmax(0, 1fr); gap: 8rem; align-items: start; margin-left: max(var(--sp), calc((100% - 128rem) / 2)); padding: 8rem max(var(--sp), calc((100vw - 128rem) / 2)) 8rem 8rem; }
  .tgt__catch { font-size: 5.6rem; }
  .kws { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0 0 5.6rem; }
  .kw__t { right: 50%; bottom: -1.2rem; height: 4.4rem; padding: 0 1.8rem; font-size: 1.7rem; transform: translateX(50%); }
  .rcm { padding: 3.2rem 4rem 1.6rem; }
  .rcm__t { font-size: 2.4rem; }
  .rcm__list--ill li { grid-template-columns: 9.6rem minmax(0, 1fr); gap: 2.4rem; padding: 1.6rem 0; }
  .cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5.6rem; align-items: center; margin: 9.6rem auto 0; padding: 5.6rem 6.4rem; text-align: left; width: calc(100% - var(--sp) * 2); }
  .cta__ttl { font-size: 3.4rem; }
  .cta__btns { margin-top: 0; min-width: 32rem; }
}

/* ---------- report（ベージュの帯） ---------- */
.rep-sec { background: var(--beige); }
.wv--beige { background: var(--beige); }
.rep { display: grid; gap: 2rem; }
.rep__soon { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4.8rem 2.4rem; border: 2px dashed #b9cbd0; border-radius: var(--r); background: var(--pale2); text-align: center; }
.rep__en { color: var(--main); font-family: var(--en); font-weight: 700; font-size: 3.2rem; letter-spacing: .12em; line-height: 1; }
.rep__t { margin-top: 1.6rem; font-size: 1.8rem; font-weight: 700; line-height: 1.6; }
.rep__p { max-width: 56rem; margin-top: 1.2rem; color: var(--ink2); line-height: 1.9; text-align: left; }
.rep__mail { display: flex; flex-direction: column; gap: 1.6rem; padding: 3.2rem 2.4rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.rep__mail-t { display: flex; align-items: center; gap: .6rem; font-size: 2rem; font-weight: 700; line-height: 1.5; }
.rep__mail-p { color: var(--ink2); line-height: 1.9; }
.rep__mail .btn { margin-top: auto; }
.rep__ill { align-self: flex-end; width: 9.6rem; margin: -5.2rem -.8rem -1.2rem 0; }
@media (min-width: 1024px) {
  .rep__ill { width: 12rem; margin: -8rem -1.6rem -1.6rem 0; }
  .rep { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3.2rem; }
  .rep__soon { padding: 7.2rem 4rem; }
  .rep__en { font-size: 4.8rem; }
  .rep__t { font-size: 2.2rem; }
  .rep__p { text-align: center; }
  .rep__mail { padding: 4rem; }
}

/* ---------- message ---------- */
.msg { display: grid; gap: 3.2rem; }
.msg__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.msg__ttl { margin-bottom: 2.4rem; font-size: 2.4rem; font-weight: 900; line-height: 1.55; letter-spacing: .06em; }
.msg__body p { line-height: 2.1; }
.msg__body p + p { margin-top: 1.6em; }
.msg__body .msg__sign { margin-top: 3.2rem; text-align: right; font-weight: 700; line-height: 1.8; }
@media (min-width: 1024px) {
  .msg { grid-template-columns: 44rem minmax(0, 1fr); gap: 9.6rem; align-items: start; }
  .msg__side { position: sticky; top: 12rem; }
  .msg__ttl { font-size: 3.6rem; margin-bottom: 4rem; }
}

/* ---------- footer ---------- */
.ft { position: relative; border-top: 1px solid var(--line); }
/* フッターの線の上に立つ街並み（イラスト） */
.ft::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: min(100%, 80rem); aspect-ratio: 8 / 1; transform: translateX(-50%); background: url("../img/ill/ill-machi.svg") center bottom / 100% auto no-repeat; pointer-events: none; }
.ft__brand { padding: 5.6rem var(--sp) 4rem; text-align: center; }
.ft__logo { display: inline-block; }
.ft__logo .lg { --lg: 4.4rem; }
.ft__catch { margin-top: 1.2rem; color: var(--ink2); font-size: max(1.3rem, 12px); font-weight: 700; }
.ft__present { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.6rem; color: var(--ink2); font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: .14em; line-height: 1; }
.ft__present img { width: 12rem; }
.ft__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2rem; margin-top: 3.2rem; font-size: max(1.4rem, 13px); font-weight: 700; }
.ft__nav a { display: inline-block; padding: .8rem 0; }
.ft__nav a:hover { color: var(--main); }
.ft__sub { margin-top: 1.2rem; font-size: max(1.3rem, 12px); }
.ft__sub a { display: inline-flex; align-items: center; gap: .4rem; padding: .8rem 0; text-decoration: underline; text-underline-offset: .3em; }
.ft__sub .ic { width: 1.4rem; height: 1.4rem; }
.ft__copy { margin-top: 2rem; color: var(--ink2); font-size: 12px; }
.ft__ct { padding: 4.8rem var(--sp) 5.6rem; background: var(--pale); }
.ft__ttl { font-size: 2.2rem; font-weight: 700; line-height: 1.4; }
.ft__ttl .en { display: block; margin-top: .6rem; color: var(--main); font-size: max(1.3rem, 12px); letter-spacing: .14em; }
.ft__txt { margin: 2rem 0 2.4rem; line-height: 1.9; }
.ft__btns { display: grid; gap: 1.2rem; }
@media (min-width: 1024px) {
  .ft__in { display: grid; grid-template-columns: 1fr 1fr; }
  .ft__brand { padding: 9.6rem 6.4rem 6.4rem; }
  .ft__logo .lg { --lg: 6rem; }
  .ft__ct { display: flex; flex-direction: column; justify-content: center; padding: 9.6rem max(6.4rem, calc((100vw - 128rem) / 2)) 9.6rem 9.6rem; }
  .ft__ttl { font-size: 3rem; }
  .ft__btns { max-width: 48rem; }
}
.totop { position: fixed; right: 1.6rem; bottom: 9.2rem; z-index: 900; display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: rgba(31, 42, 46, .5); color: var(--w); opacity: 0; pointer-events: none; transition: opacity .3s, background .2s; }
.totop.is-show { opacity: 1; pointer-events: auto; }
.totop:hover { background: var(--main); }
.totop .ic { width: 2rem; height: 2rem; }
@media (min-width: 641px) { .totop { bottom: 2.4rem; right: 2.4rem; } }
@media (min-width: 1024px) { .totop { width: 6.4rem; height: 6.4rem; right: 3.2rem; bottom: 3.2rem; } .totop .ic { width: 2.4rem; height: 2.4rem; } }
.spbar { position: fixed; left: 1.2rem; right: 1.2rem; bottom: 1.2rem; z-index: 1000; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: .6rem; padding: .6rem; border-radius: 99rem; background: var(--w); box-shadow: 0 .4rem 2rem rgba(0, 40, 60, .22); will-change: transform; }
.spbar__a { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 5rem; border-radius: 99rem; background: var(--c-night); color: var(--w); font-size: max(1.4rem, 13px); font-weight: 700; line-height: 1.3; }
.spbar__a .ic { width: 1.6rem; height: 1.6rem; }
.spbar__a--y { background: var(--yl); color: var(--ink); }
@media (min-width: 641px) { .spbar { display: none; } }

/* ---------- sub pages ---------- */
.bc ol { display: flex; flex-wrap: wrap; color: var(--ink2); font-size: max(1.2rem, 12px); line-height: 1.6; }
.bc li + li::before { content: "›"; margin: 0 .8rem; }
.bc a { display: inline-block; padding: .4rem 0; text-decoration: underline; text-underline-offset: .25em; }

.ph { position: relative; isolation: isolate; padding: 1.2rem var(--sp) 5.6rem; }
.ph::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: 26rem; background: var(--pale); }
.ph::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(26rem - 1.6rem); height: 1.6rem; background: var(--pale); -webkit-mask: var(--wave) left bottom / 12rem 100% repeat-x; mask: var(--wave) left bottom / 12rem 100% repeat-x; }
.ph__in { display: grid; gap: 0; margin-top: 1.2rem; }
.ph__ph { position: relative; order: -1; margin: 0 calc(var(--sp) * -1); }
.ph__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ph__txt { position: relative; z-index: 2; margin-top: -4rem; padding: 2.8rem 2.4rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.ph__ttl { margin-top: 1.6rem; font-size: 4rem; font-weight: 900; line-height: 1.2; letter-spacing: .06em; }
.ph__en { display: block; margin-bottom: .8rem; color: var(--c-night); font-family: var(--en); font-weight: 700; font-size: max(1.3rem, 12px); letter-spacing: .14em; line-height: 1.2; }
.ph__sub { margin-top: 1rem; font-size: 1.7rem; font-weight: 700; line-height: 1.5; }
.ph__sub small { font-size: .8em; }
.ph__lead { margin-top: 1.6rem; line-height: 1.95; }
.ph .spec { margin-top: 2.4rem; }
.ph .spec dt { min-width: 7.2rem; }
.ph__btns { margin-top: 2.8rem; }
.ph__btns .btn { width: 100%; justify-content: space-between; }
@media (min-width: 1024px) {
  .ph { padding: 2.4rem var(--sp) 12rem; }
  .ph::before { top: 36rem; }
  .ph::after { top: calc(36rem - 2.4rem); height: 2.4rem; -webkit-mask-size: 18rem 100%; mask-size: 18rem 100%; }
  .ph__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; max-width: 140rem; margin: 2.4rem auto 0; }
  .ph__ph { order: 2; margin: 0; }
  .ph__ph img { aspect-ratio: 5 / 4; border-radius: var(--r); }
  .ph__txt { order: 1; margin: 0 -9.6rem 0 0; padding: 5.6rem 6.4rem; }
  .ph__ttl { font-size: 7.2rem; }
  .ph__sub { font-size: 2.2rem; }
  .ph__btns .btn { width: auto; min-width: 36rem; }
}

.pgh { padding: 1.2rem var(--sp) 0; }
.pgh .sh { margin: 4rem 0 1.6rem; }
.pgh__lead { max-width: 64rem; margin: 0 auto; padding-bottom: 4rem; color: var(--ink2); font-weight: 700; line-height: 1.9; text-align: center; }
@media (min-width: 1024px) { .pgh { padding-top: 2.4rem; } .pgh .sh { margin-top: 6.4rem; } .pgh__lead { padding-bottom: 6.4rem; } }
.sec--pale { background: var(--pale); }

/* for */
.for3 { display: grid; gap: 1.6rem; }
.for3__item { padding: 2.8rem 2.4rem; border-radius: var(--r); background: var(--pale2); text-align: center; }
.for3__ill { width: 16rem; margin: 0 auto 1.6rem; }
.for3__t { font-size: 2rem; font-weight: 700; line-height: 1.5; }
.for3__d { margin-top: 1rem; color: var(--ink2); line-height: 1.9; text-align: left; }
@media (min-width: 1024px) { .for3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem; } .for3__item { padding: 4rem 3.2rem; } .for3__ill { width: 20rem; margin-bottom: 2rem; } .for3__t { font-size: 2.4rem; } }

/* guest */
.gst { display: grid; gap: 2.4rem; padding: 2.4rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.gst__ph { display: grid; place-items: center; width: 100%; max-width: 24rem; aspect-ratio: 1; margin: 0 auto; border: 2px dashed var(--line); border-radius: var(--r); background: var(--pale2); color: var(--ink2); font-size: max(1.3rem, 12px); font-weight: 700; line-height: 1.7; text-align: center; }
.gst__co { color: var(--ink2); font-size: max(1.3rem, 12px); font-weight: 700; line-height: 1.6; }
.gst__name { margin-top: .6rem; font-size: 2.4rem; font-weight: 900; line-height: 1.4; }
.gst__role { color: var(--ink2); font-size: max(1.3rem, 12px); }
.gst__theme { margin-top: 1.6rem; padding: 1.4rem 1.6rem; border-radius: 1rem; background: var(--cream); }
.gst__theme .k { display: block; color: #7d6200; font-size: max(1.2rem, 12px); font-weight: 700; }
.gst__theme .v { font-weight: 700; line-height: 1.7; }
.gnums { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
.gnum { padding: 1.6rem 1rem; border-radius: 1rem; background: var(--pale); text-align: center; }
.gnum__v { color: var(--main); font-family: var(--en); font-weight: 700; font-size: 4rem; line-height: 1; letter-spacing: 0; }
.gnum__v small { margin-left: .2rem; color: var(--ink); font-family: "Noto Sans JP", sans-serif; font-size: max(1.3rem, 12px); }
.gnum__l { margin-top: .8rem; font-size: max(1.2rem, 12px); font-weight: 700; line-height: 1.5; }
.gst__note { margin-top: 1.2rem; color: var(--ink2); font-size: max(1.2rem, 12px); }
@media (min-width: 1024px) {
  .gst { grid-template-columns: 30rem minmax(0, 1fr); gap: 5.6rem; padding: 5.6rem; }
  .gst__ph { max-width: none; }
  .gst__name { font-size: 3.2rem; }
  .gnums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
  .gnum__v { font-size: 5.2rem; }
}

/* timeline */
.tl { position: relative; display: grid; gap: 1.6rem; }
.tl::before { content: ""; position: absolute; left: 3.5rem; top: 2rem; bottom: 2rem; width: 2px; background: repeating-linear-gradient(var(--main) 0 .6rem, transparent .6rem 1.2rem); }
.tl__item { position: relative; display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.tl__time { display: grid; place-items: center; align-content: center; width: 7.2rem; height: 7.2rem; border-radius: 50%; background: var(--main); color: var(--w); font-family: var(--en); font-weight: 700; font-size: 1.8rem; line-height: 1.15; letter-spacing: 0; text-align: center; }
.tl__time small { display: block; margin-top: .2rem; font-family: "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.tl__box { padding: 1.6rem 2rem; border-radius: var(--r); background: var(--w); box-shadow: 0 .2rem .8rem rgba(0, 60, 80, .06); }
.tl__t { font-size: 1.8rem; font-weight: 700; line-height: 1.5; }
.tl__d { margin-top: .6rem; color: var(--ink2); font-size: max(1.4rem, 13px); line-height: 1.85; }
/* イラスト：スマホは時刻の丸の下（点線の上）、PCは箱の右（本文が回り込む） */
.tl__ill { position: absolute; left: .8rem; top: 8.4rem; width: 5.6rem; padding: .4rem 0; background: var(--pale); }
.tl__ill--w { left: 0; width: 7.2rem; }
@media (min-width: 1024px) {
  .tl { gap: 2.4rem; }
  .tl::before { left: 5rem; }
  .tl__item { grid-template-columns: 10rem minmax(0, 1fr); gap: 3.2rem; align-items: center; }
  .tl__time { width: 10rem; height: 10rem; font-size: 2.4rem; }
  .tl__box { padding: 2.4rem 3.2rem; }
  .tl__t { font-size: 2rem; }
  .tl__box:has(.tl__ill) { position: relative; padding-right: 16rem; }
  .tl__ill { left: auto; right: 3.2rem; top: 50%; width: 8rem; padding: 0; background: none; transform: translateY(-50%); }
  .tl__ill--w { right: 2.4rem; width: 11.2rem; }
}

/* rules */
.rul { display: grid; gap: 2.4rem; }
.rul__item { position: relative; padding: 3.2rem 2.4rem 2.4rem; border: 2px solid var(--line); border-radius: var(--r); line-height: 1.9; }
.rul__no { position: absolute; top: -1.6rem; left: 2rem; padding: 0 1rem; background: var(--w); color: var(--main); font-family: var(--en); font-weight: 700; font-size: 2.6rem; line-height: 1.2; }
.rul__t { margin-bottom: .8rem; font-size: 2rem; font-weight: 700; line-height: 1.5; }
.rul__item p { color: var(--ink2); }
/* 枠の右上にのせるイラスト（番号と同じく白地で枠線を切る） */
.rul__ill { position: absolute; top: -3.2rem; right: 1.6rem; width: 6.4rem; padding: 0 .6rem; background: var(--w); }
.rul__ill--w { width: 8rem; }
@media (min-width: 1024px) { .rul { grid-template-columns: 1fr 1fr; gap: 5.6rem 3.2rem; } .rul__item { padding: 4rem 4rem 3.2rem; } .rul__t { font-size: 2.4rem; } .rul__ill { top: -4.4rem; right: 3.2rem; width: 8.8rem; } .rul__ill--w { width: 11.2rem; } }

/* outline */
.obox { padding: .8rem 2.4rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.obox__row { display: grid; gap: .8rem; padding: 2rem 0; }
.obox__row + .obox__row { background: radial-gradient(circle, #b4c3c8 1.6px, transparent 2px) left top / 1.1rem .6rem repeat-x; }
.obox__lb { justify-self: start; padding: .1rem 1.2rem; border: 1.5px solid var(--main); border-radius: .3rem; color: var(--main); font-size: max(1.3rem, 12px); font-weight: 700; line-height: 1.7; }
.obox__st { font-size: 1.7rem; font-weight: 700; line-height: 1.6; }
.obox dd p:not(.obox__st) { margin-top: .4rem; color: var(--ink2); font-size: max(1.4rem, 13px); line-height: 1.8; }
@media (min-width: 1024px) {
  .obox { padding: 1.6rem 5.6rem; }
  .obox__row { grid-template-columns: 12rem minmax(0, 1fr); gap: 3.2rem; align-items: start; padding: 2.8rem 0; }
  .obox__lb { justify-self: stretch; text-align: center; }
  .obox__st { font-size: 1.9rem; }
}

.outline-sec { background: var(--gray); padding-bottom: calc(6.4rem + var(--r-l)); }
.outline-sec + .blk { margin-top: calc(var(--r-l) * -1); }
.faq-wrap { margin-top: 8rem; }
@media (min-width: 1024px) { .outline-sec { padding-bottom: calc(12rem + var(--r-l)); } .faq-wrap { margin-top: 12rem; } }

/* faq */
.faq { display: grid; gap: 1.2rem; }
.faq__item { overflow: hidden; border-radius: var(--r); background: var(--w); box-shadow: 0 .2rem 1rem rgba(0, 60, 80, .08); }
.faq__q { position: relative; display: flex; align-items: center; gap: 1.2rem; padding: 1.6rem 5.6rem 1.6rem 1.6rem; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .q, .faq__a::before { display: grid; place-items: center; flex: 0 0 auto; width: 3.6rem; height: 3.6rem; border-radius: 50%; font-family: var(--en); font-weight: 700; line-height: 1; }
.faq__q .q { background: var(--main); color: var(--w); }
.faq__q .tg { position: absolute; top: 50%; right: 1.6rem; width: 2.8rem; height: 2.8rem; margin-top: -1.4rem; border-radius: 50%; background: var(--pale); }
.faq__q .tg::before, .faq__q .tg::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.2rem; height: 2px; margin: -1px 0 0 -.6rem; background: var(--main); transition: transform .3s var(--ease); }
.faq__q .tg::after { transform: rotate(90deg); }
.faq__item[open] .tg::after { transform: none; }
.faq__a { position: relative; padding: 0 2rem 2rem 6.4rem; color: var(--ink2); line-height: 1.9; }
.faq__a::before { content: "A"; position: absolute; left: 1.6rem; top: 0; background: var(--yl); color: var(--ink); }
/* 質問する人の顔（イラスト）＋右下に小さな Q */
.faq__who { position: relative; flex: 0 0 auto; width: 4.8rem; height: 4.8rem; }
.faq__av { width: 100%; height: 100%; }
.faq__who .q { position: absolute; right: -.6rem; bottom: -.4rem; width: 2.2rem; height: 2.2rem; border: 2px solid var(--w); font-size: 12px; }
.faq__item:has(.faq__who) .faq__a { padding-left: 7.6rem; }
.faq__item:has(.faq__who) .faq__a::before { left: 2.2rem; }
@media (min-width: 1024px) { .faq__q { padding: 2.2rem 7.2rem 2.2rem 2.4rem; font-size: 1.8rem; } .faq__q .tg { right: 2.4rem; } .faq__a { padding: 0 4rem 2.8rem 7.2rem; } .faq__a::before { left: 2.4rem; } .faq__who { width: 5.6rem; height: 5.6rem; } .faq__item:has(.faq__who) .faq__a { padding-left: 9.2rem; } .faq__item:has(.faq__who) .faq__a::before { left: 3.4rem; } }

/* form */
.fm { max-width: 96rem; margin: 0 auto; padding: 2.8rem 2rem 3.2rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); }
.fm__head { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); font-size: max(1.4rem, 13px); line-height: 1.8; }
.req { display: inline-block; margin-left: .8rem; padding: 0 .8rem; border-radius: .4rem; background: var(--err); color: var(--w); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.7; vertical-align: middle; }
.fm__head .req { margin: 0 .2rem; }
.fm__row { display: grid; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.fm__lb { font-weight: 700; line-height: 1.6; }
.fm__in, .fm__sel, .fm__ta { width: 100%; min-height: 5.2rem; padding: 1.2rem 1.6rem; border: 1.5px solid var(--line); border-radius: .8rem; background: var(--pale2); color: var(--ink); font: inherit; font-size: 16px; letter-spacing: .04em; transition: border-color .2s, box-shadow .2s, background .2s; -webkit-appearance: none; appearance: none; }
.fm__in:focus, .fm__sel:focus, .fm__ta:focus { outline: none; border-color: var(--main); background: var(--w); box-shadow: 0 0 0 .4rem rgba(0, 128, 154, .16); }
.fm__sel { padding-right: 4.4rem; background: var(--pale2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2300809a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1.4rem center / 1.6rem no-repeat; }
.fm__ta { min-height: 14rem; resize: vertical; line-height: 1.8; }
.fm__grp { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fm__opts { display: grid; gap: .8rem; }
.fm__opt { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem; border: 1.5px solid var(--line); border-radius: .8rem; line-height: 1.6; cursor: pointer; transition: border-color .2s, background .2s; }
.fm__opt:hover { border-color: var(--main); }
.fm__opt:has(input:checked) { border-color: var(--main); background: var(--pale); }
.fm__opt input { flex: 0 0 auto; width: 2rem; height: 2rem; margin: .2rem 0 0; accent-color: var(--main); }
.fm__note { margin-top: .8rem; color: var(--ink2); font-size: max(1.2rem, 12px); }
.fm__err { display: none; margin-top: .8rem; color: var(--err); font-size: max(1.3rem, 12px); font-weight: 700; }
.is-err .fm__err { display: block; }
.is-err .fm__in, .is-err .fm__sel, .is-err .fm__opt { border-color: var(--err); }
.fm__btn { margin-top: 3.2rem; text-align: center; }
.fm__btn .btn { min-width: 28rem; justify-content: space-between; }
.fm__done { max-width: 96rem; margin: 0 auto; padding: 4.8rem 2.4rem; border-radius: var(--r); background: var(--w); box-shadow: var(--shadow); text-align: center; }
.fm__done h3 { font-size: 2.4rem; font-weight: 900; line-height: 1.5; }
.fm__done p { margin-top: 1.6rem; line-height: 1.9; }
@media (min-width: 1024px) {
  .fm { padding: 4.8rem 6.4rem 5.6rem; }
  .fm__row { grid-template-columns: 24rem minmax(0, 1fr); gap: 3.2rem; align-items: start; padding: 2.8rem 0; }
  .fm__lb { padding-top: 1.2rem; }
  .fm__opts--2 { grid-template-columns: 1fr 1fr; }
  .fm__btn .btn { min-width: 36rem; }
}