@charset "utf-8";

/* =========================
   Day Flow (scoped)
   ========================= */
.gs-dayflow {
  --df-bg: #f7f8fa;
  --df-card: #ffffff;
  --df-text: #1b1f24;
  --df-sub: #5b6470;
  --df-accent: #31a072;
  /* 落ち着いたグリーン */
  --df-line: #e6e9ee;
  --df-shadow: 0 6px 20px rgba(23, 32, 38, .08);
  --df-radius: 16px;
  --df-max: 980px;
}

.gs-dayflow * {
  box-sizing: border-box;
}

.gs-dayflow .df-container {
  max-width: var(--df-max);
  margin: 0 auto;
  padding: 28px 18px 56px;
  color: var(--df-text);
}

/* 導入：横並びレイアウト */
.gs-dayflow .df-intro .df-intro-flex {
  display: block;
  /* SPは縦並び */
  gap: 16px;
}

.gs-dayflow .df-intro .df-lead {
  margin: 0;
  /* 既存指定を踏襲 */
  color: var(--df-sub);
  line-height: 1.9;
  font-size: 15px;
}

.gs-dayflow .df-intro .df-visual {
  margin: 12px 0 0;
}

.gs-dayflow .df-intro .df-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--df-line);
  box-shadow: var(--df-shadow);
}

/* 罫線（原文の ---------- を保持しつつ装飾） */
.gs-dayflow .df-hr {
  margin: 18px 0;
  text-align: center;
  color: #9aa3ad;
  letter-spacing: .25em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =========================
   タイムライン（連番付きノード）
   ========================= */
.gs-dayflow .df-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  counter-reset: df-step;
  /* 連番開始 */
}

.gs-dayflow .df-timeline .df-step {
  position: relative;
  background: var(--df-card);
  border: 1px solid var(--df-line);
  border-radius: 14px;
  padding: 18px 16px 16px 70px;
  /* 丸番号ぶん左余白を拡張 */
  box-shadow: var(--df-shadow);
  margin: 16px 0;
  counter-increment: df-step;
  /* 連番インクリメント */
}

/* 縦ライン（区間） */
.gs-dayflow .df-timeline .df-step::before {
  content: "";
  position: absolute;
  left: 30px;
  /* 丸の中心に合わせる */
  top: -16px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(180deg, rgba(49, 160, 114, .25), rgba(49, 160, 114, .05));
}

/* 丸ノード（数字入り） */
.gs-dayflow .df-timeline .df-step::after {
  content: counter(df-step);
  position: absolute;
  left: 21px;
  /* 丸の左位置（中心= before と揃う） */
  top: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--df-accent);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  line-height: 40px;
  /* 垂直中央 */
  text-align: center;
  box-shadow: 0 0 0 6px rgba(49, 160, 114, .15);
}

/* 先頭/末尾で縦ラインの余白を整える（お好みで） */
.gs-dayflow .df-timeline .df-step:first-child::before {
  top: 22px;
}

.gs-dayflow .df-timeline .df-step:last-child::before {
  bottom: 22px;
}

/* 見出し・本文 */
.gs-dayflow .df-step h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
}

.gs-dayflow .df-step p {
  margin: 8px 0 0;
  color: var(--df-sub);
  line-height: 1.9;
  font-size: 15px;
}

/* 情報ボックス（資格・適性） */
.gs-dayflow .df-info {
  background: #ffffff;
  border: 1px solid var(--df-line);
  border-radius: var(--df-radius);
  padding: 18px 16px;
  box-shadow: var(--df-shadow);
  margin: 16px 0;
}

.gs-dayflow .df-info h3 {
  margin: 0 0 10px;
  font-size: 18px;
  border-left: 6px solid var(--df-accent);
  padding-left: 10px;
}

.gs-dayflow .df-info p {
  margin: 8px 0 0;
  color: var(--df-sub);
  line-height: 1.9;
  font-size: 15px;
}

.gs-dayflow .df-lines {
  background: #fafbfc;
  border: 1px dashed var(--df-line);
  border-radius: 12px;
  padding: 12px;
}

/* レスポンシブ微調整 */
@media (min-width: 720px) {
  .gs-dayflow .df-intro .df-intro-flex {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .gs-dayflow .df-intro .df-lead {
    width: 70%;
  }

  .gs-dayflow .df-intro .df-visual {
    width: 30%;
    margin: 0;
  }

  .gs-dayflow .df-container {
    padding: 34px 22px 72px;
  }

  /* タイムラインの位置関係はベース値と合わせる */
  .gs-dayflow .df-step {
    padding-left: 56px;
  }

  .gs-dayflow .df-timeline .df-step::before {
    left: 36px;
  }

  .gs-dayflow .df-timeline .df-step::after {
    left: 17px;
  }
}


/* =========================
   FAQ Accordion (scoped)
   ========================= */
.gs-faq {
  --fq-bg: #ffffff;
  --fq-panel: #ffffff;
  --fq-text: #1b1f24;
  --fq-sub: #5b6470;
  --fq-accent: #31a072;
  /* ガラス・サッシの既存配色と揃える */
  --fq-line: #e6e9ee;
  --fq-radius: 16px;
  --fq-shadow: 0 6px 20px rgba(23, 32, 38, .08);
  --fq-max: 880px;
}

.gs-faq * {
  box-sizing: border-box;
}

.gs-faq .faq-container {
  max-width: var(--fq-max);
  margin: 0 auto;
  padding: 20px 16px 28px;
  color: var(--fq-text);
}

.gs-faq .faq-item {
  background: var(--fq-panel);
  border: 1px solid var(--fq-line);
  border-radius: var(--fq-radius);
  box-shadow: var(--fq-shadow);
  margin: 12px 0;
  overflow: clip;
  /* 角丸からはみ出さない */
}

/* summary（ボタン相当） */
.gs-faq .faq-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  position: relative;
  font-weight: 700;
}

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

/* Safari用 */
.gs-faq .faq-summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--fq-line);
  color: var(--fq-accent);
  background: #fff;
  font-size: 18px;
  line-height: 1;
}

/* 開いた状態のアイコンを−に */
.gs-faq .faq-item[open] .faq-summary::after {
  content: "−";
}

/* キーボード操作の見やすさ */
.gs-faq .faq-summary:focus-visible {
  outline: 3px solid rgba(49, 160, 114, .35);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Qテキスト */
.gs-faq .faq-q {
  font-size: clamp(16px, 2.6vw, 18px);
  line-height: 1.5;
}

/* パネル内本文 */
.gs-faq .faq-content {
  padding: 2px 18px 16px;
  color: var(--fq-sub);
  line-height: 1.9;
  font-size: 15px;
  border-top: 1px dashed var(--fq-line);
}

.gs-faq .faq-content p {
  margin: 12px 0 0;
}

.gs-faq .faq-list {
  margin: 10px 0 0 1.1em;
  padding: 0;
}

.gs-faq .faq-list li {
  margin: 4px 0;
}

/* ホバー/押下の軽いフィードバック */
@media (hover: hover) {
  .gs-faq .faq-summary:hover {
    background: linear-gradient(180deg, #fff, #f9fbfb);
  }
}



/* ▼ 2桁以上が想定される場合のサイズ拡張（必要時のみ有効化）
.gs-dayflow .df-timeline .df-step::after{
  width:32px; height:32px; line-height:32px; font-size:14px;
  left:20px; top:16px;
}
.gs-dayflow .df-timeline .df-step{ padding-left:60px; }
.gs-dayflow .df-timeline .df-step::before{ left:30px; }
*/