/* ===== Page Wrapper ===== */
/* PCではMV画像幅(1200px)を最大幅としてセンタリング。
   左右の余白にはpage-wrapperの白背景(#ffffff)が見える */
.page-wrapper {
  width: 100%;
  background-color: #ffffff;
  overflow-x: hidden; /* 内部の絶対配置要素(curvy-divider等)が横方向にはみ出さないよう */
  /* overflow: hidden だと祖先要素がスクロールコンテナとなり、
     ヘッダーの position: sticky が正しく機能せず、
     メインビジュアルがヘッダーの下に潜り込む原因となるため
     overflow-x: hidden に変更（縦方向のクリップは行わない） */
}

/* ===== Base ===== */
body {
  font-family: 'Noto Sans JP', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===== Hero Gradient ===== */
.hero-gradient {
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
}

/* ===== Details/Summary ===== */
details > summary::-webkit-details-marker {
  display: none;
}

/* ===== Curvy Dividers ===== */
.curvy-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.curvy-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 50px;
}

.curvy-divider-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.curvy-divider-top svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 50px;
}

/* ===== Hero Inner (MV Block) ===== */
/* PC(661px〜)ではヘッダーとMVを別ブロックとして表示。
   画像本来の最大幅(1200px)を超える幅の場合は、
   左右にpage-wrapperの白背景がそのまま余白として見える形でセンタリングする */
.hero-inner {
  width: 100%;
}

@media (min-width: 661px) {
  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ===== Responsive: Hero Image ===== */

/* PC用画像: 1200×460px に合わせた高さ */
.hero-img {
  width: 100%;
  display: block;
  object-fit: cover;
  /* ビューポート幅に応じてスケール、最大460px */
  height: clamp(200px, 38.33vw, 460px);
}

/* ラッパー内（最大1200px）では実寸460pxを維持 */
@media (min-width: 1200px) {
  .hero-img {
    height: 460px;
  }
}

/* スマホ (660px以下): 720×699px のアスペクト比を維持 */
@media (max-width: 660px) {
  .hero-img {
    height: calc(100vw * 699 / 720);
    max-height: 699px;
  }
}

/* ===== Responsive: Overlapping circle images ===== */
.circle-img-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

@media (min-width: 768px) {
  .circle-img-wrapper {
    height: 400px;
  }
}

/* スマホ（660px以下）: 画像を中央揃え・余白を最小化 */
@media (max-width: 660px) {
  .circle-img-wrapper {
    height: auto;
    padding: 1rem 0;
  }

  .circle-img-wrapper > div {
    transform: none !important; /* translate-x/y のずれをリセット */
    position: static;
  }
}

/* ===== Responsive: Nav padding ===== */
@media (max-width: 767px) {
  footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ===== FAQ Typography ===== */

/* PC（661px以上）: Q見出しは大きめ、Aはやや小さめ */
.faq-label {
  font-size: 1.5rem;   /* 24px */
  line-height: 1.4;
  flex-shrink: 0;
}

.faq-question {
  font-size: 1.25rem;  /* 20px */
  line-height: 1.4;
  font-family: 'Noto Sans JP', sans-serif;
}

.faq-answer {
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  font-family: 'Noto Sans JP', sans-serif;
}

/* スマホ（660px以下）: QとAを同じフォントサイズ・行間に統一 */
@media (max-width: 660px) {
  .faq-label {
    font-size: 1rem;   /* 16px — Q./A.ラベルもテキストに揃える */
    line-height: 1.7;
  }

  .faq-question,
  .faq-answer {
    font-size: 1rem;   /* 16px */
    line-height: 1.7;
  }
}
#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* ===== News: scroll container (shows ~3 entries, rest scrollable) ===== */
#news-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-pink, #ec4899) transparent;
}

#news-scroll::-webkit-scrollbar {
  width: 6px;
}

#news-scroll::-webkit-scrollbar-track {
  background: transparent;
}

#news-scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-accent-pink, #ec4899);
  border-radius: 9999px;
}

/* ===== Display Utility: .pc / .sp ===== */
/* .pc: PCのみ表示（661px以上で表示、660px以下で非表示） */
.pc {
  display: block;
}
@media (max-width: 660px) {
  .pc {
    display: none !important;
  }
}

/* .sp: スマホのみ表示（660px以下で表示、661px以上で非表示） */
.sp {
  display: none;
}
@media (max-width: 660px) {
  .sp {
    display: block !important;
  }
}

/* ===== Responsive: Text alignment ===== */
/* スマホ（660px以下）: テキストを基本左揃えに統一 */
@media (max-width: 660px) {
  /* セクション見出しブロック・説明文を左揃えに */
  main .text-center {
    text-align: left;
  }

  /* inline-block の見出し（border-b付き）も左揃えのまま表示 */
  main .text-center h2 {
    display: block;
  }

  /* Contact セクションは中央揃えを維持（ボタン1つのみのレイアウト） */
  main section:has(button[onclick]) .text-center {
    text-align: center;
  }

  /* フッターは中央揃えを維持 */
  footer .text-center {
    text-align: center;
  }
}