@charset "UTF-8";

/* ============================================================
   faq.css
   よくある質問（Q&A）ページ専用スタイル
============================================================ */

.faq-page {
  padding: 60px 0 100px;
}
.faq-page .container {
  max-width: 880px;
}

/* ページタイトル */
.faq-eyebrow {
  text-align: center;
  font-family: var(--font-mincho);   /* v17：ゴシック→明朝 */
  font-style: normal;              /* v17：斜体をやめた */
  font-size: 0.97rem;
  letter-spacing: 0.22em;
  color: var(--color-mauve-light);  /* v17：#0065B0 → #18BFD7 */
  margin: 0 0 4px;                 /* v17：h1との間隔を 8px→4px に */
}
.faq-page-title {
  font-family: var(--font-mincho);
  text-align: center;
  font-size: 1.8rem;
  font-weight: 400;   /* v17：PCを一段階太く（300→400）。SPは768px以下で700に上書き */
  color: var(--text-heading);
  margin: 0 0 18px;
  letter-spacing: 0.08em;
}
.faq-page-lead {
  text-align: center;
  font-size: 1.0rem;
  color: var(--text-light);
  line-height: 1.9;
  margin: 0 0 40px;
}
@media screen and (max-width: 768px) {
  /* v17：SPのページタイトルを統一（明朝700 / 27px / 字間0.04em）。
     font-family は上のベース宣言（var(--font-mincho)）を継承。
     1rem＝18px なので 1.5rem＝27px。ウェイトは 300/500 → 700 に上げる。 */
  .faq-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
}

/* ページ内サブメニュー（求人について／店舗・サービスについて） */
.submenu-wrap {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 60px;
}
.submenu-btn {
  display: inline-block;
  padding: 12px 28px;
  font-size: 0.97rem;
  font-weight: 500;
  font-family: var(--font-gothic);
  transition: background 0.3s, color 0.3s;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
.submenu-btn:hover {
  background: var(--color-blue-ink);
  color: #fff;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .submenu-wrap { gap: 10px; }
  .submenu-btn { padding: 10px 18px; font-size: 0.93rem; }
}

/* セクション見出し */
.faq-section {
  margin-bottom: 70px;
  scroll-margin-top: 90px;
}
.faq-section-title {
  font-size: 1.23rem;
  font-weight: 500;
  color: var(--text-heading);
  margin: 0 0 26px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-pink-pale);
  font-family: var(--font-gothic);
  letter-spacing: 0.05em;
}

/* ============================================================
   Q&Aリスト（detailsで実装：JS不要でキーボード操作にも対応）
============================================================ */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}
.faq-item details { }
.faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 50px 18px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--font-gothic);
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Qアイコン */
.faq-q {
  flex: 1;
  font-size: 1.0rem;
  font-weight: 400;
  color: var(--text-main);
  line-height: 1.6;
}
.faq-q::before {
  content: 'Q';
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1.4;
  text-align: center;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-blue-ink); /* 非対応ブラウザ用フォールバック */
  border-radius: 0;
  font-size: 1.7rem;
  font-weight: 700;
  font-family: var(--font-mincho);
  margin-right: 10px;
  flex-shrink: 0;
}

.faq-item[open] summary { border-bottom: 1px solid var(--border-color); }

/* 開閉アイコン（＋→開くと×に回転） */
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--color-mauve), var(--color-mauve)),
    linear-gradient(var(--color-mauve), var(--color-mauve));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 1.5px, 1.5px 100%;
  transition: transform 0.25s ease;
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* 回答エリア */
.faq-a {
  padding: 4px 22px 22px 54px;
}
.faq-a p {
  font-size: 0.97rem;
  color: var(--text-light);
  line-height: 1.9;
  margin: 0;
}
.faq-a a { color: var(--color-blue-ink); text-decoration: underline; text-underline-offset: 3px; }

@media screen and (max-width: 600px) {
  .faq-item summary { padding: 16px 46px 16px 16px; }
  .faq-a { padding: 4px 16px 18px 44px; }
  .faq-q::before { font-size: 1.4rem; margin-right: 8px; }
}

/* ============================================================
   お問い合わせCTA
============================================================ */
.faq-cta {
  text-align: center;
  padding: 50px 20px;
  background: var(--color-pink-pale);
  border-radius: 14px;
}
.faq-cta-text {
  font-family: var(--font-gothic);
  font-size: 1.0rem;
  color: var(--text-main);
  margin: 0 0 22px;
}
.faq-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.faq-cta-btn {
  display: inline-block;
  padding: 13px 30px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 0.98rem;
  transition: opacity 0.2s ease;
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
.faq-cta-btn:hover { opacity: 0.8; }
.faq-cta-btn-primary {
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}
.faq-cta-btn-outline {
  border-radius: 999px;
  background: var(--gradient-blue);
  color: #fff;
  border: 0;
}


/* PCヘッダーが2段になり約120pxになったため、アンカー着地位置を40px下げる（SPは従来どおり） */
@media screen and (min-width: 769px) {
  .faq-section { scroll-margin-top: 105px; }
}