/**
 * Page Subpages - 残り8ページ専用スタイル
 * daily / cases / fee / learning / special / voices / staff / faq
 *
 * page-common.css のヒーロー・セクション見出し・CTA を前提に、
 * 各ページ固有のレイアウトのみを定義する。
 */

/* =========================================================
 *  共通:点線区切り(セクション間の薄い装飾)
 * ========================================================= */

.special-traits__note,
.fee-plan__caption {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-sub);
  margin: var(--space-md) 0 0;
}

/* =========================================================
 *  /daily/  ページ内ナビ(1日の流れ / 通い方の例 / 料金)
 * ========================================================= */

.daily-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
  padding: var(--space-md);
  background: var(--color-bg-mint);
  border-radius: var(--radius-pill);
  max-width: 560px;
  margin-inline: auto;
}

.daily-nav a {
  flex: 1;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-heading-jp);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-mint-text);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background var(--transition-base), color var(--transition-base);
  white-space: nowrap;
}

.daily-nav a:hover {
  background: var(--color-mint-deep);
  color: var(--color-white);
}

@media (max-width: 599px) {
  .daily-nav { gap: 4px; padding: 4px; }
  .daily-nav a { font-size: var(--fs-caption); padding: var(--space-xs) var(--space-sm); }
}

/* =========================================================
 *  /daily/  タイムスケジュール
 * ========================================================= */

.daily-schedule {
  max-width: 720px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.daily-schedule__item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border);
  align-items: center;
}

.daily-schedule__item:last-child {
  border-bottom: 0;
}

.daily-schedule__time {
  font-family: var(--font-number);
  font-size: var(--fs-small);
  color: var(--color-mint-deep);
  font-weight: var(--fw-bold);
}

.daily-schedule__activity {
  font-size: var(--fs-body);
  color: var(--color-text-main);
}

@media (max-width: 599px) {
  .daily-schedule__item { grid-template-columns: 1fr; gap: var(--space-xs); }
}

/* /daily/  過ごし方の例(4枚ギャラリー) */

.daily-moments-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.daily-moments__item {
  margin: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
}

.daily-moments__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.daily-moments__item figcaption {
  padding: var(--space-sm);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-mint-text);
  font-family: var(--font-heading-jp);
}

@media (max-width: 959px) {
  .daily-moments-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
 *  /daily/cases/  通い方の例
 * ========================================================= */

.cases-patterns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
}

.cases-pattern {
  background: var(--color-bg-mint);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.cases-pattern__title {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
}

.cases-pattern__desc {
  font-size: var(--fs-caption);
  color: var(--color-text-sub);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 959px) {
  .cases-patterns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .cases-patterns { grid-template-columns: 1fr; }
}

.cases-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.cases-card {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.cases-card__name {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
}

.cases-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.cases-card__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-text-main);
  margin: 0;
}

@media (max-width: 599px) {
  .cases-list { grid-template-columns: 1fr; }
}

/* =========================================================
 *  /daily/fee/  料金
 * ========================================================= */

.fee-plan {
  max-width: 540px;
  margin: 0 auto;
}

.fee-plan__card {
  background: var(--color-bg-mint);
  border: var(--border-width-emphasis) solid var(--color-mint-main);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  text-align: center;
}

.fee-plan__label {
  font-family: var(--font-heading-en);
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  color: var(--color-mint-deep);
  margin: 0 0 var(--space-sm);
}

.fee-plan__price {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h3);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
  font-weight: var(--fw-medium);
  line-height: 1.1;
}

.fee-plan__price strong {
  font-family: var(--font-number);
  font-size: 56px;
  font-weight: var(--fw-bold);
  color: var(--color-mint-deep);
  letter-spacing: 0.02em;
  margin-right: 4px;
}

.fee-plan__price small {
  font-size: var(--fs-h4);
  color: var(--color-mint-text);
  font-weight: var(--fw-medium);
}

/* =========================================================
 *  /daily/  東京都の助成金(SUBSIDY)
 * ========================================================= */

.subsidy {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
  max-width: 960px;
  margin: 0 auto;
}

.subsidy__main {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.subsidy__name {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width-emphasis) solid var(--color-mint-main);
  line-height: 1.5;
}

.subsidy__summary {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.subsidy__summary > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-border);
}

.subsidy__summary > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.subsidy__summary dt {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-mint-deep);
  margin: 0;
}

.subsidy__summary dd {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  margin: 0;
  line-height: 1.6;
}

.subsidy__main .btn-secondary {
  margin-top: auto;
  align-self: flex-start;
}

/* 助成金適用後 実質負担カード */
.subsidy__effect {
  background: var(--color-yellow-light);
  border: var(--border-width-emphasis) solid var(--color-yellow-main);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
}

.subsidy__effect-label {
  display: inline-block;
  background: var(--color-yellow-main);
  color: var(--color-text-yellow);
  font-family: var(--font-heading-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin: 0 0 var(--space-sm);
}

.subsidy__effect-from {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  margin: 0;
  text-decoration: line-through;
  text-decoration-color: var(--color-text-sub);
}

.subsidy__effect-price {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  color: var(--color-mint-text);
  font-weight: var(--fw-medium);
  margin: var(--space-xs) 0 0;
  line-height: 1.1;
}

.subsidy__effect-price strong {
  font-family: var(--font-number);
  font-size: 56px;
  font-weight: var(--fw-bold);
  color: var(--color-mint-deep);
  margin: 0 4px;
}

.subsidy__effect-price small {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  color: var(--color-mint-text);
  font-weight: var(--fw-medium);
}

.subsidy__effect-note {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  margin: var(--space-xs) 0 0;
}

/* 助成金の注意書き(誤解防止・東京都からの指摘対応) */
.subsidy__caution {
  font-size: var(--fs-caption);
  color: var(--color-text-sub);
  line-height: 1.7;
  margin: var(--space-md) 0 0;
}

@media (max-width: 599px) {
  .subsidy { grid-template-columns: 1fr; gap: var(--space-md); }
  .subsidy__main, .subsidy__effect { padding: var(--space-lg); }
  .subsidy__summary > div { grid-template-columns: 90px 1fr; gap: var(--space-sm); }
  .subsidy__effect-price strong,
  .fee-plan__price strong { font-size: 44px; }
}

.fee-plan__note {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  margin: 0;
}

.fee-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: 800px;
  margin: 0 auto;
}

.fee-includes__col {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.fee-includes__col--include {
  border-color: var(--color-mint-main);
}

.fee-includes__heading {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width) solid var(--color-border);
}

.fee-includes__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fee-includes__col li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.7;
}

.fee-includes__col--include li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-mint-deep);
  font-weight: var(--fw-bold);
}

.fee-includes__col--exclude li::before {
  content: '−';
  position: absolute;
  left: 0;
  color: var(--color-text-sub);
}

.fee-entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  max-width: 720px;
  margin: 0 auto;
}

.fee-entry__item {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.fee-entry__label {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-small);
  color: var(--color-mint-deep);
  margin: 0 0 var(--space-xs);
}

.fee-entry__value {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-body);
  color: var(--color-text-main);
  margin: 0;
}

@media (max-width: 599px) {
  .fee-includes,
  .fee-entry { grid-template-columns: 1fr; }
}

/* =========================================================
 *  /learning/  学習と進路
 * ========================================================= */

.learning-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.learning-methods__group {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.learning-methods__title {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h3);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width-emphasis) solid var(--color-mint-main);
}

.learning-methods__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.learning-methods__list li {
  padding: var(--space-md) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.learning-methods__list li:last-child { border-bottom: 0; }

.learning-methods__name {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-body);
  color: var(--color-mint-text);
  margin: 0 0 4px;
  font-weight: var(--fw-medium);
}

.learning-methods__desc {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  line-height: 1.7;
  margin: 0;
}

.learning-paths {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.learning-paths__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.learning-paths__num {
  flex-shrink: 0;
  font-family: var(--font-number);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--color-mint-deep);
}

.learning-paths__name {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-mint-text);
  margin: 0 0 4px;
}

.learning-paths__desc {
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  line-height: 1.7;
  margin: 0;
}

.learning-cases {
  list-style: none;
  padding: var(--space-xl);
  margin: 0;
  background: var(--color-bg-mint);
  border-radius: var(--radius-md);
  max-width: 720px;
  margin-inline: auto;
}

.learning-cases__item {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border);
  font-size: var(--fs-body);
  color: var(--color-text-main);
}

.learning-cases__item:last-child { border-bottom: 0; }

.learning-cases__item::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-mint-deep);
}

.learning-attendance {
  display: grid;
  gap: var(--space-lg);
  max-width: 800px;
  margin: 0 auto;
}

.learning-attendance__block {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.learning-attendance__block h3 {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
}

.learning-attendance__block p,
.learning-attendance__block ul {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--color-text-main);
  margin: 0;
}

.learning-attendance__block ul {
  padding-left: var(--space-md);
}

@media (max-width: 599px) {
  .learning-methods,
  .learning-paths { grid-template-columns: 1fr; }
}

/* =========================================================
 *  /special/  発達特性
 * ========================================================= */

.special-traits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.special-traits__item {
  background: var(--color-bg-mint);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.special-traits__name {
  font-family: var(--font-heading-en);
  font-size: var(--fs-h4);
  color: var(--color-mint-deep);
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.04em;
}

.special-traits__desc {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.7;
  margin: 0;
}

.special-features {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: special;
}

.special-features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-md);
}

.special-features__num {
  flex-shrink: 0;
  font-family: var(--font-number);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--color-mint-main);
  line-height: 1;
}

.special-features__title {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-xs);
  font-weight: var(--fw-medium);
}

.special-features__desc {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 959px) {
  .special-traits { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
  .special-traits { grid-template-columns: 1fr; }
  .special-features__item { padding: var(--space-lg); gap: var(--space-md); }
  .special-features__num { font-size: var(--fs-h3); }
}

/* =========================================================
 *  /voices/  利用者の声
 * ========================================================= */

.voices-grid-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}

.voice-card-detail {
  position: relative;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  margin: 0;
}

.voice-card-detail--parent {
  background: var(--color-bg-mint);
  border-color: var(--color-mint-soft);
}

.voice-card-detail::before {
  content: '"';
  position: absolute;
  top: 4px;
  left: var(--space-lg);
  font-family: var(--font-heading-en);
  font-size: 56px;
  line-height: 1;
  color: var(--color-mint-main);
}

.voice-card-detail__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-main);
  margin: 0 0 var(--space-md);
}

.voice-card-detail__cite {
  display: block;
  text-align: right;
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  font-style: normal;
}

.voice-card-detail__cite::before { content: '— '; }

@media (max-width: 599px) {
  .voices-grid-detail { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* =========================================================
 *  /staff/  スタッフ紹介
 * ========================================================= */

/* スタッフカード:単色ベースで「色ブロックの並置感」を排除し、
 * 罫線・余白・タイポでヒエラルキーを作る。 */

.staff-detail {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-3xl);
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  margin-bottom: var(--space-3xl);
  box-shadow:
    0 12px 32px -16px rgba(31, 63, 24, 0.08),
    0 2px 6px rgba(31, 63, 24, 0.03);
}

.staff-detail__photo {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-bg-mint);
  border: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
}

.staff-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* 写真円の外側に控えめなアクセント(細い緑のリング) */
.staff-detail__photo::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--color-mint-soft);
  opacity: 0.55;
  pointer-events: none;
}

.staff-detail__photo-placeholder {
  color: var(--color-text-sub);
  font-family: var(--font-heading-jp);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
}

.staff-detail__meta {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.staff-detail__name {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h2);
  color: var(--color-mint-text);
  margin: 0 0 6px;
  line-height: 1.3;
  font-weight: var(--fw-medium);
}

.staff-detail__name-en {
  font-family: var(--font-heading-en);
  font-size: var(--fs-small);
  letter-spacing: 0.22em;
  color: var(--color-text-sub);
  margin: 0 0 var(--space-sm);
  opacity: 0.85;
}

.staff-detail__role {
  font-size: var(--fs-small);
  color: var(--color-mint-deep);
  margin: 0;
  letter-spacing: 0.02em;
}

.staff-detail__bio {
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--color-text-main);
  margin: 0 0 var(--space-2xl);
}

/* メッセージは「色ブロック」をやめ、左の細い緑ラインだけで控えめに */
.staff-detail__message {
  background: transparent;
  border-left: 3px solid var(--color-mint-main);
  border-radius: 0;
  padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  margin: 0 0 var(--space-2xl);
}

.staff-detail__message h3 {
  font-family: var(--font-heading-en);
  font-size: var(--fs-caption);
  letter-spacing: 0.22em;
  color: var(--color-mint-deep);
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

.staff-detail__message p {
  font-size: var(--fs-body);
  line-height: 2;
  color: var(--color-text-main);
  margin: 0;
}

.staff-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
}

.staff-detail__tags .tag {
  padding: 6px 16px;
  font-size: var(--fs-caption);
}

/* 経歴・想い(長文の自己紹介)
 * カードの中の色違いブロックを廃し、横線+余白で区切る。 */
.staff-detail__history {
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) 0 0;
  background: transparent;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

.staff-detail__history h3 {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  letter-spacing: 0.04em;
  color: var(--color-mint-text);
  margin: 0 0 var(--space-md);
  padding: 0;
  border-bottom: none;
  text-transform: none;
  font-weight: var(--fw-medium);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

.staff-detail__history h3::before {
  content: 'HISTORY & THOUGHTS';
  font-family: var(--font-heading-en);
  font-size: var(--fs-caption);
  letter-spacing: 0.22em;
  color: var(--color-mint-deep);
  font-weight: var(--fw-medium);
  flex-shrink: 0;
  opacity: 0.85;
}

.staff-detail__history p {
  font-size: var(--fs-small);
  line-height: 2.05;
  color: var(--color-text-main);
  margin: 0 0 var(--space-lg);
}

.staff-detail__history p:last-child {
  margin-bottom: 0;
}

@media (max-width: 599px) {
  .staff-detail { grid-template-columns: 1fr; padding: var(--space-lg); gap: var(--space-lg); }
  .staff-detail__photo { max-width: 200px; margin: 0 auto; }
}

/* スタッフ一覧プレースホルダ */

.staff-other-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.staff-other-card {
  text-align: center;
  background: var(--color-white);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.staff-other-card__photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--color-mint-light);
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.staff-other-card__placeholder {
  font-size: var(--fs-caption);
  color: var(--color-mint-deep);
  font-family: var(--font-heading-jp);
}

.staff-other-card__name {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-small);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-xs);
}

.staff-other-card__role {
  font-size: var(--fs-caption);
  color: var(--color-text-sub);
  margin: 0;
}

@media (max-width: 959px) {
  .staff-other-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
 *  /faq/  よくある質問(全件)
 * ========================================================= */

.faq-category {
  max-width: 800px;
  margin-inline: auto;
}

.faq-list-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item-detail {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-item-detail[open] {
  border-color: var(--color-mint-soft);
}

.faq-item-detail__q {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-heading-jp);
  font-weight: var(--fw-medium);
  color: var(--color-mint-text);
  font-size: var(--fs-body);
}

.faq-item-detail__q::-webkit-details-marker { display: none; }

.faq-item-detail__q::after {
  content: '＋';
  margin-left: auto;
  color: var(--color-mint-deep);
  font-size: 20px;
  transition: transform var(--transition-base);
}

.faq-item-detail[open] .faq-item-detail__q::after { content: '−'; }

.faq-item-detail__mark {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-mint-light);
  color: var(--color-mint-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading-en);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
}

.faq-item-detail__mark--a {
  background: var(--color-yellow-main);
  color: var(--color-text-yellow);
}

.faq-item-detail__a {
  padding: 0 var(--space-lg) var(--space-md);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.faq-item-detail__a p {
  margin: 4px 0 0;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--color-text-main);
}

/* =========================================================
 *  /attendance/ (出席扱いについて)専用スタイル
 *
 *  方針:
 *  - 部分色装飾は使わない(全辺均等の枠 or 全面色)
 *  - 実績数値は大きく強調(訴求性)
 *  - 申請の流れはステップ番号でリズム付け
 * ========================================================= */

/* 実績統計の3カラム */
.attendance-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: 880px;
  margin: 0 auto var(--space-2xl);
}

.attendance-stat {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

.attendance-stat__num {
  font-family: var(--font-heading-jp);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: var(--fw-bold);
  color: var(--color-mint-deep);
  line-height: 1;
  margin: 0 0 var(--space-sm);
  letter-spacing: 0;
}

.attendance-stat__num span {
  font-size: 0.4em;
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin-left: 4px;
  letter-spacing: 0.05em;
}

.attendance-stat__label {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-xs);
}

.attendance-stat__note {
  font-size: var(--fs-caption);
  color: var(--color-text-sub);
  margin: 0;
  line-height: 1.6;
}

/* 申請の流れ */
.attendance-flow {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 880px;
  counter-reset: flow;
}

.attendance-flow__step {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}

.attendance-flow__step:last-child {
  border-bottom: none;
}

.attendance-flow__num {
  font-family: var(--font-heading-en);
  font-size: var(--fs-caption);
  letter-spacing: 0.22em;
  color: var(--color-mint-deep);
  font-weight: var(--fw-bold);
  padding-top: 6px;
}

.attendance-flow__title {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-xs);
  line-height: 1.5;
}

.attendance-flow__desc {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.9;
  margin: 0;
}

/* 対応すること(リスト) */
.attendance-support {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.attendance-support li {
  background: var(--color-bg-mint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.attendance-support h3 {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
}

.attendance-support p {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.9;
  margin: 0;
}

/* FAQ */
.attendance-faq {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
}

.attendance-faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}

.attendance-faq__item:first-of-type {
  border-top: 1px solid var(--color-border);
}

.attendance-faq dt {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
  padding-left: 28px;
  position: relative;
  line-height: 1.6;
}

.attendance-faq dt::before {
  content: 'Q.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading-en);
  font-weight: var(--fw-bold);
  color: var(--color-mint-deep);
  letter-spacing: 0.04em;
}

.attendance-faq dd {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.95;
  margin: 0;
  padding-left: 28px;
  position: relative;
}

.attendance-faq dd::before {
  content: 'A.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading-en);
  font-weight: var(--fw-bold);
  color: var(--color-text-sub);
  letter-spacing: 0.04em;
}

/* page-section--mint(全面ミント背景セクション) */
.page-section--mint {
  background: var(--color-bg-mint);
  padding: var(--space-3xl) var(--space-xl);
  border-radius: var(--radius-lg);
  margin: var(--space-3xl) auto;
}

/* =========================================================
 *  .page-section--callout(連携呼びかけセクション)
 *  ベース白+左にミントアクセントは使わず、全面に薄ミントの背景で
 *  「やわらかい呼びかけ」を表現。ボタンは中央配置で目線を集める。
 * ========================================================= */
.page-section--callout {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-bg-mint) 100%);
  border: 1px solid var(--color-mint-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  margin: var(--space-2xl) auto;
  max-width: 880px;
  text-align: center;
}

.page-section--callout .page-section-head {
  margin-bottom: var(--space-lg);
}

.page-section--callout .page-prose {
  margin: 0 auto var(--space-lg);
  max-width: 640px;
}

.page-section--callout .page-section-foot {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

/* =========================================================
 *  .page-cta が page-section-head + page-prose + page-section-foot
 *  構造で使われる場合の補正(/attendance/ ページ等)
 * ========================================================= */
.page-cta > .page-section-head {
  margin-bottom: var(--space-lg);
}

.page-cta > .page-section-head .page-section-head__title {
  font-size: var(--fs-h2) !important;
  line-height: 1.5 !important;
}

.page-cta > .page-prose {
  max-width: 580px;
  margin: 0 auto var(--space-2xl);
}

.page-cta > .page-prose p {
  line-height: 2;
  color: var(--color-text-sub);
}

.page-cta > .page-section-foot {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

/* CTA 内のプライマリボタンを大きく目立たせる */
.page-cta .page-section-foot .btn-primary {
  padding: var(--space-md) var(--space-3xl);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  box-shadow: 0 8px 22px -6px rgba(75, 143, 44, 0.45);
  letter-spacing: 0.04em;
}

.page-cta .page-section-foot .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -6px rgba(75, 143, 44, 0.55);
}

/* page-prose--center */
.page-prose--center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .attendance-stats {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .attendance-flow__step {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  .attendance-support {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 *  /recruit/ スタッフ募集ページ専用スタイル
 * ========================================================= */

/* 大切にしたい姿勢(2x2グリッド) */
.recruit-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 960px;
  margin: 0 auto;
}

.recruit-value {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.recruit-value__title {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
  position: relative;
  padding-left: 28px;
}

.recruit-value__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-mint-main);
  background-image:
    linear-gradient(45deg, transparent 40%, #fff 40%, #fff 58%, transparent 58%),
    linear-gradient(-45deg, transparent 58%, #fff 58%, #fff 75%, transparent 75%);
}

.recruit-value__desc {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.95;
  margin: 0;
}

/* 想定する役割(縦リスト) */
.recruit-roles {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 880px;
}

.recruit-roles li {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.recruit-roles li:first-child {
  border-top: 1px solid var(--color-border);
}

.recruit-roles h3 {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-mint-text);
  margin: 0;
  line-height: 1.5;
}

.recruit-roles p {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.95;
  margin: 0;
}

/* 働く環境(定義リスト) */
.recruit-env {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
}

.recruit-env > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
}

.recruit-env > div:first-child {
  border-top: 1px solid var(--color-border);
}

.recruit-env dt {
  font-family: var(--font-heading-jp);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-mint-deep);
  margin: 0;
  padding-top: 4px;
}

.recruit-env dd {
  font-size: var(--fs-small);
  color: var(--color-text-main);
  line-height: 1.95;
  margin: 0;
}

/* 補足注記 */
.recruit-note {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-sub);
  margin: var(--space-md) auto 0;
  line-height: 1.8;
  max-width: 640px;
}

@media (max-width: 768px) {
  .recruit-values { grid-template-columns: 1fr; }
  .recruit-roles li { grid-template-columns: 1fr; gap: var(--space-xs); }
  .recruit-env > div { grid-template-columns: 1fr; gap: var(--space-xs); }
}