/* =========================================================
   部品（見出し・ボタン・カードなど）
   見た目は components.html の見本帳で確認できる。
   新しい部品を足したら見本帳にも追加すること。
   ========================================================= */

/* ---------- 見出し ---------- */
.en-label {
  margin-bottom: 12px;
  font-family: var(--font-en);
  font-size: var(--fz-label);
  letter-spacing: .35em;
  color: var(--color-accent);
}

.ttl-serif {
  font-family: var(--font-serif);
  font-size: var(--fz-h2);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}

.ttl-sub {
  margin: 12px 0 16px;
  font-family: var(--font-serif);
  font-size: var(--fz-h3);
  font-weight: 500;
}

.big-num {
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
}

/* ---------- 写真の代わりのダミー（あとで <img> に差し替える） ---------- */
.ph {
  position: relative;
  background: var(--ph-bg, #889);
}

.ph::after {
  content: attr(data-label);
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: 12px;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .2em;
  text-align: right;
  color: var(--ph-label, rgba(255, 255, 255, .6));
}

.ph--city { --ph-bg: linear-gradient(160deg, #1d3557 0%, #457b9d 55%, #e9c46a 100%); }
.ph--sea { --ph-bg: linear-gradient(180deg, #8ecae6 0%, #219ebc 50%, #023047 100%); }
.ph--desert { --ph-bg: linear-gradient(170deg, #f4a261 0%, #e76f51 45%, #6d2e46 100%); }
.ph--night { --ph-bg: radial-gradient(circle at 70% 30%, #3a506b, #0b132b 70%); }

/* 明るいダミー（人物写真の仮置きなど）。ラベルは濃い色になる */
.ph--mint { --ph-bg: linear-gradient(150deg, #d9f3ea 0%, #a8dfcd 60%, #7ccbb3 100%); --ph-label: rgba(0, 0, 0, .45); }
.ph--sand { --ph-bg: linear-gradient(150deg, #f6efe4 0%, #e6d6bd 60%, #cfb994 100%); --ph-label: rgba(0, 0, 0, .45); }
.ph--sky { --ph-bg: linear-gradient(150deg, #e6f1f8 0%, #bcd8ea 60%, #8fbcd8 100%); --ph-label: rgba(0, 0, 0, .45); }

/* 画像に差し替えたときに枠いっぱいに表示する */
img.ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- ヘッダー ---------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--gutter);
  color: var(--white);
  transition: background-color .4s, color .4s;
}

.header.is-scrolled {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  color: var(--color-dark);
}

body.is-menu-open .header {
  background: transparent;
  backdrop-filter: none;
  color: var(--white);
}

.header_logo {
  display: flex;
  flex-direction: column;
  font-family: var(--font-en);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: .3em;
}

.header_logo small {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .1em;
}

/* ---------- ハンバーガーボタン ---------- */
.menu-btn {
  --size: 48px;
  position: relative;
  width: var(--size);
  height: var(--size);
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.menu-btn_line {
  position: absolute;
  left: 30%;
  right: 30%;
  height: 1px;
  background: currentColor;
  transition: translate .4s var(--ease-out), rotate .4s var(--ease-out);
}

.menu-btn_line:nth-child(1) { top: calc(50% - 4px); }
.menu-btn_line:nth-child(2) { top: calc(50% + 3px); }

body.is-menu-open .menu-btn_line:nth-child(1) { translate: 0 3.5px; rotate: 45deg; }
body.is-menu-open .menu-btn_line:nth-child(2) { translate: 0 -3.5px; rotate: -45deg; }

/* ---------- 全画面メニュー（ボタンの位置から円が広がって開く） ---------- */
.menu {
  --origin: calc(100% - var(--gutter) - 24px) calc(var(--header-h) / 2);
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--color-dark);
  color: var(--white);
  clip-path: circle(0 at var(--origin));
  visibility: hidden;
  transition: clip-path .8s var(--ease-io), visibility 0s .8s;
}

body.is-menu-open .menu {
  clip-path: circle(150vmax at var(--origin));
  visibility: visible;
  transition: clip-path .8s var(--ease-io), visibility 0s;
}

.menu_list li {
  padding: 10px 0;
  opacity: 0;
  translate: 0 20px;
  transition: opacity .5s var(--ease-out), translate .5s var(--ease-out);
}

.menu_list li:nth-child(2) { --n: 1; }
.menu_list li:nth-child(3) { --n: 2; }
.menu_list li:nth-child(4) { --n: 3; }
.menu_list li:nth-child(5) { --n: 4; }
.menu_list li:nth-child(6) { --n: 5; }
.menu_list li:nth-child(7) { --n: 6; }

body.is-menu-open .menu_list li {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(.35s + var(--n, 0) * .07s);
}

.menu_list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 32px);
}

.menu_list a span {
  font-family: var(--font-en);
  font-size: var(--fz-label);
  color: var(--color-accent);
}

/* ---------- 追従CTA（出し入れは js/ui/cv-fix.js） ---------- */
.cv-fix {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--white);
  font-weight: 500;
  letter-spacing: .1em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  opacity: 0;
  translate: 0 150%;
  transition: opacity .5s var(--ease-out), translate .5s var(--ease-out);
}

.cv-fix.is-show {
  opacity: 1;
  translate: 0 0;
}

body.is-menu-open .cv-fix {
  opacity: 0;
  translate: 0 150%;
}

/* ---------- ボタン（ホバーで背景が左から伸びる） ---------- */
.btn {
  --btn-color: var(--white);
  --btn-hover-text: var(--color-dark);
  position: relative;
  display: inline-block;
  padding: 20px 56px;
  overflow: hidden;
  border: 1px solid var(--btn-color);
  color: var(--btn-color);
  letter-spacing: .15em;
  isolation: isolate;
  transition: color .4s var(--ease-out);
}

/* 明るい背景の上で使うとき */
.btn--dark {
  --btn-color: var(--color-dark);
  --btn-hover-text: var(--white);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-io);
}

@media (hover: hover) {
  .btn:hover { color: var(--btn-hover-text); }
  .btn:hover::before { transform: scaleX(1); transform-origin: left; }
}

/* ---------- カード ---------- */
.card_img {
  aspect-ratio: 4 / 3;
  margin-bottom: 20px;
}

.card_tag {
  font-family: var(--font-en);
  font-size: var(--fz-label);
  letter-spacing: .25em;
  color: var(--color-accent);
}

.card_ttl {
  margin: 4px 0 8px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
}

/* ---------- FAQ（<details> だけで開閉。JS不要） ---------- */
.faq_item {
  border-bottom: 1px solid var(--color-line);
}

.faq_item summary {
  position: relative;
  padding: 24px 48px 24px 0;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.faq_item summary::-webkit-details-marker {
  display: none;
}

.faq_item summary::before {
  content: "Q";
  margin-right: 16px;
  font-family: var(--font-en);
  color: var(--color-accent);
}

.faq_item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 14px;
  translate: 0 -50%;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: rotate .4s var(--ease-out);
}

.faq_item[open] summary::after {
  rotate: 45deg;
}

/* 対応ブラウザ（Chrome 131+ など）では高さがなめらかに変わる */
.faq_item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete;
}

.faq_item[open]::details-content {
  block-size: auto;
}

.faq_answer {
  padding: 0 0 24px 32px;
}

/* ---------- 手順 ---------- */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.flow_step {
  padding: 32px 24px;
  border-top: 2px solid var(--color-accent);
  background: var(--white);
  font-family: var(--font-serif);
  font-size: 18px;
}

.flow_step span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-en);
  font-size: var(--fz-label);
  letter-spacing: .25em;
  color: var(--color-accent);
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .menu-btn {
    --size: 44px;
  }

  .menu {
    --origin: calc(100% - var(--gutter) - 22px) calc(var(--header-h) / 2);
  }

  .cv-fix {
    right: 12px;
    bottom: 12px;
    left: 12px;
    text-align: center;
  }
}

/* =========================================================
   採用LPなどで使う部品（v1.2.0 で追加）
   ========================================================= */

/* ---------- 応募ボタン（ホバーで濃い色が左から塗られる） ---------- */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: min(360px, 100%);
  padding: 22px 20px 16px 24px;
  border-radius: 6px;
  background: var(--color-cta);
  color: var(--white);
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  isolation: isolate;
}

.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-cta-deep);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .42s var(--ease-out);
}

/* 上に載せる吹き出し */
.cta-btn_note {
  position: absolute;
  top: 0;
  left: 16px;
  translate: 0 -50%;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--white);
  color: var(--color-cta-deep);
  font-size: 12px;
  letter-spacing: .05em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.cta-btn_main {
  flex: 1;
  display: grid;
  gap: 4px;
  font-size: clamp(16px, 1.4vw, 19px);
  letter-spacing: .06em;
}

.cta-btn_tag {
  justify-self: start;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--white);
  color: var(--color-cta-deep);
  font-size: 12px;
  letter-spacing: .1em;
}

/* 右端の丸い矢印 */
.cta-btn_icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
  transition: translate .42s var(--ease-out);
}

.cta-btn_icon::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--color-cta);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}

.cta-btn:focus-visible::before { clip-path: inset(0); }

@media (hover: hover) {
  .cta-btn:hover::before { clip-path: inset(0); }
  .cta-btn:hover .cta-btn_icon { translate: 4px 0; }
}

/* 矢印アイコン（mask で使う） */
:root {
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- キーワードの強調（1つの見出しで1種類まで） ---------- */
.kw {
  margin-inline: .1em;
  padding: 0 .3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.kw--box {
  border: 2px solid var(--color-text);
  background: var(--white);
}

.kw--bar {
  background: var(--color-text);
  color: var(--white);
}

.kw--marker {
  margin-inline: 0;
  padding: 0;
  background: linear-gradient(transparent 60%, var(--color-mark) 60%);
}

/* ---------- チェックリスト ---------- */
.check-list li {
  position: relative;
  padding-left: 28px;
}

.check-list li + li {
  margin-top: 8px;
}

.check-list li::before,
.check-list li::after {
  content: "";
  position: absolute;
  top: calc(.95em - 8px);
  left: 0;
  width: 16px;
  height: 16px;
}

.check-list li::before {
  border-radius: 3px;
  background: var(--color-accent);
}

.check-list li::after {
  background: var(--check-color, var(--white));
  -webkit-mask: var(--icon-check) center / 12px no-repeat;
  mask: var(--icon-check) center / 12px no-repeat;
}

/* ---------- 時間割（縦線＋丸） ---------- */
.timeline_item {
  --time-w: 64px;
  position: relative;
  display: grid;
  grid-template-columns: var(--time-w) 1fr;
  gap: 0 40px;
  padding-bottom: 32px;
}

.timeline_item::before {
  content: "";
  position: absolute;
  top: .9em;
  bottom: -.9em;
  left: calc(var(--time-w) + 19px);
  width: 2px;
  background: var(--color-accent);
}

.timeline_item:last-child::before {
  display: none;
}

.timeline_item::after {
  content: "";
  position: absolute;
  top: calc(.9em - 5px);
  left: calc(var(--time-w) + 15px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}

.timeline_time {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-accent-text);
}

.timeline_ttl {
  font-size: 18px;
  line-height: 1.8;
}

/* 時刻を置かないときも本文は2列目に置く（--time-w: 0px で使える） */
.timeline_body {
  grid-column: 2;
}

.timeline_body p {
  margin-top: 4px;
  font-size: 15px;
}

/* ---------- ステップ（番号つきの白いカードを縦に並べる） ---------- */
.steps {
  display: grid;
  gap: 16px;
}

.steps_item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 20px;
  padding: 24px 32px;
  border-radius: 10px;
  background: var(--color-card);
  box-shadow: var(--shadow-card);
}

.steps_num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 700;
}

.steps_ttl {
  font-size: 18px;
  line-height: 2.2;
}

.steps_ttl small {
  margin-left: .5em;
  font-size: 13px;
}

/* ---------- 数字カード ---------- */
.stat {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
  padding: 20px 16px 24px;
  border-radius: 10px;
  background: var(--color-card);
  text-align: center;
}

.stat_label {
  justify-self: stretch;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-text);
  font-size: 15px;
  font-weight: 700;
}

.stat_value {
  font-weight: 700;
  line-height: 1;
}

.stat_num {
  margin-right: .1em;
  font-family: var(--font-en);
  font-size: clamp(40px, 4.5vw, 64px);
  color: var(--color-accent-text);
}

/* ---------- 定義リスト（募集要項など） ---------- */
.spec-list_row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 32px;
  padding-block: 24px;
  border-bottom: 1px solid var(--color-line);
}

.spec-list_row:first-child {
  border-top: 1px solid var(--color-line);
}

.spec-list dt {
  font-weight: 700;
}

/* ---------- FAQ のカード版：.faq.faq--card ---------- */
.faq--card {
  display: grid;
  gap: 16px;
}

.faq--card .faq_item {
  padding-inline: 24px;
  border: 1px solid var(--white);
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
}

.faq--card .faq_item summary {
  font-weight: 700;
}

.faq--card .faq_item summary::before {
  font-weight: 700;
  color: var(--color-accent-text);
}

/* ---------- 横にスライドするカード（js/ui/carousel.js） ---------- */
.carousel {
  --carousel-item-w: min(560px, 84vw);
  --carousel-gap: 24px;
  position: relative;
}

.carousel_track {
  display: flex;
  gap: var(--carousel-gap);
  padding: 8px calc((100% - var(--carousel-item-w)) / 2) 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel_track::-webkit-scrollbar {
  display: none;
}

.carousel_item {
  flex: 0 0 var(--carousel-item-w);
  scroll-snap-align: center;
  transition: opacity .5s var(--ease-out), scale .5s var(--ease-out);
}

/* JSが動くときだけ、中央以外を小さく薄くする */
.js .carousel_item:not(.is-current) {
  opacity: .6;
  scale: .94;
}

.carousel_nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.carousel_btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-text);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}

.carousel_btn::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--color-text);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}

.carousel_btn[data-carousel-dir="-1"]::before {
  scale: -1 1;
}

/* ---------- スマホ（v1.2.0 の部品） ---------- */
@media (max-width: 768px) {
  .cta-btn {
    width: 100%;
  }

  .timeline_item {
    --time-w: 52px;
    gap: 0 32px;
  }

  .steps_item {
    padding: 20px;
    gap: 4px 16px;
  }

  .spec-list_row {
    grid-template-columns: 1fr;
    padding-block: 20px;
  }

  .faq--card .faq_item {
    padding-inline: 16px;
  }

  .carousel {
    --carousel-gap: 12px;
  }
}