@charset "utf-8";

/* ============================================================
   parts.css — ページ固有コンポーネント
   （style.css の CSS変数を参照しています）

   目次
   1.  top-about グリッド & カード
   2.  サービスカードグリッド（#t-service）
   3.  子どもケアセクション（.child-care）
   4.  利用者の声（.voice-card）
   5.  サービスカード一覧（.servicecard / .s-card）
   6.  画像＋テキスト 2カラム（.c-box）
   7.  ご利用の流れ（.flow）
   8.  FAQ（.faq）
   9.  スタッフ・実績カード（.s-cred2）
   ============================================================ */


/* ============================================================
   1. top-about グリッド & カード
   ============================================================ */
.tabout-grid {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: 50px;
}

/* グリッド配置 */
.tabout-img  { grid-column: 1 / 2; grid-row: 1 / 3; padding: 20px; }
.tabout-text { grid-column: 2 / 3; grid-row: 1 / 2; }
.tabout-link { grid-column: 1 / 2; grid-row: 3 / 4; }
.tabout-card { grid-column: 2 / 3; grid-row: 2 / 4; align-self: end; }

/* 浮遊アニメーション */
.tabout-img img,
.child-img img {
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%       { transform: translate(5px, -15px) rotate(0.5deg); }
}

/* アバウトカード（2×2グリッド） */
.tabout-card .card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.card-items {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

/* アイコン共通 */
.card-icon {
  width: 50px;
  height: 50px;
  background: var(--color-bg-icon);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #d97706;
}

/* SVGマスクアイコン */
.card-icon .icon {
  width: 30px;
  height: 30px;
  display: block;
  background: #d97706;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.icon._01 { mask-image: url('../img/common/icon01.svg'); -webkit-mask-image: url('../img/common/icon01.svg'); }
.icon._02 { mask-image: url('../img/common/icon02.svg'); -webkit-mask-image: url('../img/common/icon02.svg'); }
.icon._03 { mask-image: url('../img/common/icon03.svg'); -webkit-mask-image: url('../img/common/icon03.svg'); }
.icon._04 { mask-image: url('../img/common/icon04.svg'); -webkit-mask-image: url('../img/common/icon04.svg'); }
.icon._05 { mask-image: url('../img/common/icon05.svg'); -webkit-mask-image: url('../img/common/icon05.svg'); }
.icon._06 { mask-image: url('../img/common/icon06.svg'); -webkit-mask-image: url('../img/common/icon06.svg'); }
.icon._07 { mask-image: url('../img/common/icon07.svg'); -webkit-mask-image: url('../img/common/icon07.svg'); }
.icon._08 { mask-image: url('../img/common/icon08.svg'); -webkit-mask-image: url('../img/common/icon08.svg'); }

.card-txt .ttl  { font-size: 16px; font-weight: 600; color: var(--color-bg-dark); }
.card-txt .desc { font-size: 14px; color: var(--color-text-mute); margin-top: 2px; }

/* タブレット */
@media (max-width: 768px) {
  .tabout-link { grid-column: 1 / 3; grid-row: 3 / 4; }
  .tabout-card { grid-column: 1 / 3; grid-row: 2 / 3; }
}

/* SP */
@media (max-width: 599px) {
  .tabout-img  { grid-column: 1 / 3; grid-row: 4 / 5; width: 86%; margin: 0 auto; }
  .tabout-text { grid-column: 1 / 3; grid-row: 1 / 2; width: 96%; margin: 0 auto; }
  .tabout-link { grid-column: 1 / 3; grid-row: 3 / 4; }
  .tabout-card { grid-column: 1 / 3; grid-row: 2 / 3; }
}
@media (max-width: 500px) {
  .tabout-card .card { grid-template-columns: 1fr; }
}


/* ============================================================
   2. サービスカードグリッド（#t-service）
   ============================================================ */
#t-service .service-grid,
#t-service .bottom-grid {
  display: grid;
  gap: 32px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  #t-service .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  #t-service .bottom-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 780px;
    margin: 32px auto 0;
  }
}

/* カード */
#t-service .card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
#t-service .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* 画像 */
#t-service .card-img {
  height: 210px;
  overflow: hidden;
  position: relative;
}
#t-service .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s ease;
}
#t-service .card:hover .card-img img { transform: scale(1.05); }

/* 近日開設カード */
#t-service .card.is-coming .card-img img { filter: grayscale(30%) brightness(0.7); }
#t-service .card.is-coming:hover .card-img img { filter: grayscale(20%) brightness(0.8); }

#t-service .coming-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 2;
  white-space: nowrap;
}

/* カードボディ */
#t-service .card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#t-service .card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
#t-service .card-icon {
  width: 32px;
  height: 32px;
  background: var(--color-bg-icon);
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
}
#t-service .card-icon .icon { width: 20px; height: 20px; }
#t-service .card-cat { font-size: 12px; color: var(--color-text-mute); }

#t-service .card-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-bg-dark);
  margin-bottom: 10px;
  line-height: 1.4;
}
#t-service .card-text {
  font-size: 14px;
  color: var(--color-text-mute);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* タグ */
#t-service .card-tags { margin-bottom: 20px; }
#t-service .card-tags span {
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  margin: 2px;
  border-radius: 999px;
  background: #fffbeb;
  color: #b45309;
  font-weight: 500;
}

/* 詳しく見る リンク */
#t-service .card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #d97706;
}

/* 矢印 */
#t-service .arrow_02 { position: relative; width: 20px; height: 10px; }
#t-service .arrow_02::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 2px;
  background: #d97706;
  transform: translateY(-50%);
  transition: width var(--transition);
}
#t-service .arrow_02::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #d97706;
  border-right: 2px solid #d97706;
  transform: translateY(-50%) rotate(45deg);
  transition: right var(--transition);
}
#t-service .card-body:hover .arrow_02::before { width: 20px; }
#t-service .card-body:hover .arrow_02::after  { right: -2px; }


/* ============================================================
   3. 子どもケアセクション（.child-care）
   ============================================================ */
.child-wrap {
  display: grid;
  gap: 60px;
}
@media (min-width: 1024px) {
  .child-wrap {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.child-text h2 {
  font-size: clamp(1.5rem, 1.286rem + 0.95vw, 2rem);
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 20px;
  color: var(--color-bg-dark);
}
.child-text p {
  color: var(--color-text-mute);
  line-height: 1.8;
}

/* ラベル */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg-icon);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
}

/* ポイントリスト */
.child-points {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.point {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.point:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}
.point .ttl { font-weight: 600; color: var(--color-bg-dark); font-size: 18px; }
.point .txt { font-size: 16px; color: var(--color-text-mute); }

.point .card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.point .icon { width: 60%; height: 60%; }


/* ============================================================
   4. 利用者の声（.voice-card）
   ============================================================ */
.voice-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 768px) {
  .voice-grid { grid-template-columns: repeat(3, 1fr); }
}

.voice-card {
  background: #fafaf9;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.voice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* 引用符 */
.voice-card::before {
  content: "\201C";
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 40px;
  color: #fbbf24;
  font-family: serif;
  line-height: 1;
}

.voice-text {
  font-size: 14px;
  color: #44403c;
  line-height: 1.8;
  margin-bottom: 20px;
  padding-top: 20px;
}

.voice-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.voice-img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  flex-shrink: 0;
}
.voice-img img { width: 100%; height: 100%; object-fit: cover; }

.name { font-size: 14px; font-weight: 600; color: var(--color-bg-dark); }
.attr { font-size: 12px; color: var(--color-text-mute); }


/* ============================================================
   5. サービスカード一覧（.servicecard / .s-card）
      helper.php などのサービス詳細ページで使用
   ============================================================ */
.servicecard {
  display: grid;
  gap: 40px;
}
.servicecard._02 { grid-template-columns: repeat(2, 1fr); }
.servicecard._03 { grid-template-columns: repeat(3, 1fr); }
.servicecard._04 { grid-template-columns: repeat(4, 1fr); }

/* カード本体 */
.s-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 48px;
}
.s-card-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}
.s-card h3 {
  font-size: 26px;
  font-weight: 600;
  color: var(--color-text-dark);
}

/* s-cardアイコン */
.s-icon {
  width: 52px;
  height: 52px;
  background: var(--color-bg-icon);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s-icon i {
  color: #d97706;
  font-size: 1.8rem;
  font-weight: 600;
}

/* リスト */
.s-card ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 40px;
}
.s-card li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  color: #4a4a4a;
}
.s-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: bold;
}

/* タブレット */
@media (max-width: 1200px) {
  .servicecard._03,
  .servicecard._04 { grid-template-columns: repeat(2, 1fr); }
}

/* SP */
@media (max-width: 768px) {
  .servicecard._02,
  .servicecard._03,
  .servicecard._04 { grid-template-columns: 1fr; }

  .s-card { padding: 32px; border-radius: 20px; }
  .s-card h3 { font-size: 28px; margin-bottom: 24px; }
  .s-card ul { grid-template-columns: 1fr; gap: 12px; }
}


/* ============================================================
   6. 画像＋テキスト 2カラム（.c-box）
   ============================================================ */
.c-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}
.c-box.reverse { flex-direction: row-reverse; }

.cimg { width: 48%; }
.cimg img {
  width: 100%;
  height: 520px;
  object-fit: contain;
  border-radius: 24px;
  display: block;
}

.ctext-wrap { width: 46%; }

/* ラベル */
.c-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #fff4d9;
  border-radius: 999px;
  color: #d98b00;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 30px;
}

/* タイトル（helper.php では h2/h3 が入る） */
.ctext-wrap h2,
.ctext-wrap h3 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}

.ctext-wrap p { line-height: 2; color: var(--color-text-light); }

/* ボタン */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 40px;
  background: var(--color-accent);
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.c-btn::after { content: "→"; margin-left: 14px; transition: transform var(--transition); }
.c-btn:hover  { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(245, 163, 0, 0.25); }
.c-btn:hover::after { transform: translateX(4px); }

.childcare { background: var(--color-bg-white); }

/* SP */
@media (max-width: 768px) {
  .c-box,
  .c-box.reverse { flex-direction: column; gap: 40px; }

  .cimg,
  .ctext-wrap { width: 100%; }

  .cimg img { height: 300px; border-radius: 20px; }

  .ctext-wrap h2,
  .ctext-wrap h3 { font-size: 1.5rem; }

  .ctext-wrap p { line-height: 1.9; }

  .c-btn { width: 100%; height: 64px; font-size: 16px; }
}


/* ============================================================
   7. ご利用の流れ（.flow）
   ============================================================ */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
}

/* 横ライン */
.flow::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: #f2ddb0;
  z-index: 0;
}

/* カード */
.flow-box {
  position: relative;
  background: var(--color-bg-white);
  border-radius: 24px;
  padding: 90px 32px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  z-index: 1;
  transition: transform var(--transition);
}
.flow-box:hover { transform: translateY(-6px); }

/* 番号バッジ */
.flow-box > span,
.flow-box > li > span {
  position: absolute;
  top: -25px;
  left: 20px;
  width: 74px;
  height: 74px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(245, 163, 0, 0.2);
}

.flow-box h3 {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 15px;
  min-height: 50px;
}
.flow-box p {
  font-size: 16px;
  line-height: 2;
  color: var(--color-text-light);
}

/* タブレット */
@media (max-width: 1200px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow::before { display: none; }
}

/* SP */
@media (max-width: 768px) {
  .s-flow { padding: 80px 0; }
  .flow { grid-template-columns: 1fr; gap: 50px; }
  .flow-box { padding: 80px 24px 32px; border-radius: 20px; }
  .flow-box > span { width: 70px; height: 70px; font-size: 24px; left: 24px; }
  .flow-box h3 { font-size: 18px; min-height: 40px; }
  .flow-box p  { font-size: 15px; line-height: 1.9; }
}


/* ============================================================
   8. FAQ（.faq）
   ============================================================ */
.faq { background: var(--color-bg-white); }

.faq-list {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* カード */
.faq-item {
  background: var(--color-bg-warm);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--color-border-warm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* 質問行（button化対応） */
.question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 25px 80px 25px 32px;
  cursor: pointer;
  font-family: inherit;
  font-weight: inherit;
}
.question::after {
  content: "+";
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  font-weight: 300;
  color: var(--color-accent);
  transition: transform var(--transition);
}
.faq-item.active .question::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Q バッジ */
.q {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.question p {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text-dark);
  margin: 0;
}

/* 回答 */
.answer {
  padding: 0 32px 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* hidden属性対応（display:none は JS側で制御） */
.answer[hidden] { display: none; }

/* A バッジ */
.a {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-bg-white);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.answer p {
  font-size: 17px;
  line-height: 2;
  color: var(--color-text-light);
  padding-top: 10px;
  margin: 0;
}

/* SP */
@media (max-width: 768px) {
  .faq { padding: 80px 0; }
  .question { padding: 24px 70px 24px 20px; gap: 16px; }
  .question::after { right: 20px; font-size: 26px; }
  .q, .a { width: 42px; height: 42px; font-size: 18px; }
  .question p { font-size: 18px; }
  .answer { padding: 0 20px 24px; }
  .answer p { font-size: 15px; line-height: 1.9; }
}


/* ============================================================
   9. スタッフ・実績カード（.s-cred2）
   ============================================================ */
.staff-text {
  font-size: 18px;
  line-height: 2;
  color: var(--color-text-light);
  margin-top: 20px;
}

.s-cred2 {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-warm);
  border-radius: 28px;
  padding: 40px 25px;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.s-cred2:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* アイコン */
.s-cred2 .s-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 30px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-cred2 .s-icon i {
  color: #fff;
  font-size: 38px;
}

.s-cred2 h3 {
  font-size: clamp(1rem, 0.786rem + 0.95vw, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-dark);
  margin-bottom: 20px;
}

/* ※ 元コードにセミコロン抜け（font-size後）があったため修正 */
.s-cred2 p {
  font-size: clamp(14px, 2vw, 16px);
  line-height: 2;
  color: var(--color-text-light);
}

/* タブレット */
@media (max-width: 1200px) {
  .servicecard._04 { grid-template-columns: repeat(2, 1fr); }
}

/* SP */
@media (max-width: 768px) {
  .staff { padding: 80px 0; }

  .servicecard._04 { grid-template-columns: 1fr; gap: 24px; }

  .s-cred2 { padding: 40px 24px; border-radius: 22px; }
  .s-cred2 .s-icon { width: 72px; height: 72px; margin-bottom: 24px; }
  .s-cred2 p { line-height: 1.9; }

  .staff-text { font-size: 15px; }
}

/* ============================================================
   helper.php 固有スタイル
   ============================================================ */
 
/* サブFV 背景 */
.helper-fv {
  background-image: url("../img/fv/helper-fv.jpg");
}
 
/* servicecard内の画像エリア（helper専用） */
.s-card-head .s-icon i {
  font-size: 1.6rem;
}

/* ============================================================
   nurse.php 固有スタイル
   ============================================================ */
 
/* サブFV 背景 */
.nurse-fv {
  background-image: url("../img/fv/nurse-fv.jpg");
}
/* ============================================================
   sodan.php 固有スタイル
   ============================================================ */
 
/* ---- sub-fv ひなた専用背景 ---- */
.sodan-fv {
  background-image: url("../img/fv/sodan-fv.jpg");
}
 
/* ---- パンくず ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 20px;
  color: rgba(255,255,255,.75);
}
.breadcrumb a {
  color: rgba(255,255,255,.85);
}
.breadcrumb i {
  font-size: 10px;
  opacity: .7;
}
 
/* ---- センター紹介セクション ---- */
#sodan-about {
  /*background: var(--color-bg-white);*/
}
 
/* ---- ポイントバッジリスト ---- */
.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.about-badges li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fffbeb;
  border: 1px solid var(--color-border-warm);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #b45309;
}
.about-badges li i {
  color: var(--color-accent);
}
 
/* ---- サービスカードグリッド ---- */
#sodan-service {
 /* background: var(--color-bg-warm);*/
}
 
.sodan-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) {
  .sodan-service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .sodan-service-grid { grid-template-columns: 1fr; }
}
 
.sodan-s-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.sodan-s-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,.07);
}
.sodan-s-card .s-icon {
  width: 52px;
  height: 52px;
  background: var(--color-bg-icon);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sodan-s-card .s-icon i {
  color: #d97706;
  font-size: 1.4rem;
	font-weight: 600;
}
.sodan-s-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.5;
}
.sodan-s-card p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-mute);
}
 
/* ---- ご利用の流れ ---- */
 
/* parts.css の .flow を5列対応で上書き */
.sodan-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  position: relative;
}
.sodan-flow::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 5%;
  width: 90%;
  height: 2px;
  background: #f2ddb0;
  z-index: 0;
}
@media (max-width: 1100px) {
  .sodan-flow { grid-template-columns: repeat(3, 1fr); }
  .sodan-flow::before { display: none; }
}
@media (max-width: 599px) {
  .sodan-flow { grid-template-columns: 1fr; gap: 50px; }
}
 
/* 各ステップボックス */
.sodan-flow-box {
  position: relative;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-warm);
  border-radius: 20px;
  padding: 80px 22px 30px;
  z-index: 1;
  transition: transform var(--transition);
}
.sodan-flow-box:hover { transform: translateY(-5px); }
 
/* ステップバッジ */
.sodan-flow-box .step-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 68px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  line-height: 1.1;
  box-shadow: 0 8px 20px rgba(245,163,0,.25);
}
.sodan-flow-box .step-badge span {
  font-size: 9px;
  letter-spacing: .05em;
  opacity: .85;
}
.sodan-flow-box .step-badge b {
  font-size: 22px;
}
 
.sodan-flow-box h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 10px;
  line-height: 1.5;
  text-align: center;
}
.sodan-flow-box p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-light);
  text-align: center;
}
 
/* ---- 子ども・医療的ケア対応 ---- */
 
/* c-box リスト（ひなた用上書き） */
.sodan-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sodan-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-light);
}
.sodan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: .25;
}
.sodan-list li::after {
  content: "✓";
  position: absolute;
  left: 2px;
  top: .05em;
  font-size: 14px;
  color: var(--color-accent);
  font-weight: bold;
}
 
/* ---- 就労B型PRセクション ---- */
 
.b-wrap {
  display: flex;
  align-items: center;
  gap: 80px;
}
@media (max-width: 900px) {
  .b-wrap { flex-direction: column; gap: 40px; }
  .b-img, .b-text { width: 100%; }
}
 
.b-img {
  width: 45%;
  flex-shrink: 0;
}
.b-img img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
 
.b-text { flex: 1; }
 
.b-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 28px 0;
}
@media (max-width: 500px) {
  .b-features { grid-template-columns: 1fr; }
}
 
.b-feature-item {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border-warm);
  border-radius: 14px;
  padding: 16px 18px;
}
.b-feature-item h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}
.b-feature-item h4::before {
  content: "✦";
  color: var(--color-accent);
  margin-right: 6px;
  font-size: 12px;
}
.b-feature-item p {
  font-size: 13px;
  color: var(--color-text-mute);
  line-height: 1.7;
}
 
.b-notice {
  background: #fffbeb;
  border-left: 4px solid var(--color-accent);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin-bottom: 28px;
}
.b-notice h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}
.b-notice p {
  font-size: 13px;
  color: var(--color-text-light);
  line-height: 1.8;
}
 
/* ---- FAQ ---- */
/* ---- SP調整 ---- */
@media (max-width: 768px) {
  .b-img img { height: 260px; }
}

/* ============================================================
   about.php 固有スタイル
   ============================================================ */

/* サブFV 背景 */
.about-fv {
  background-image: url("../img/fv/about-fv.jpg");
}

/* 円形デコ画像（sodan.phpと共通パターン） */
.deco-img {
  position: relative;
  width: 48%;
  flex-shrink: 0;
  animation: float 5s ease-in-out infinite;
}
.deco-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .deco-img { width: 72%; margin: 0 auto; }
}

/* キャッチフレーズ引用ブロック */
.rinen-quote {
  position: relative;
  background: #fffbeb;
  border-left: 5px solid var(--color-accent);
  border-radius: 0 16px 16px 0;
  padding: 24px 28px;
  margin: 30px 0;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  line-height: 1.9;
  color: var(--color-text-dark);
}
.rinen-quote::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 48px;
  color: var(--color-accent);
  opacity: .35;
  font-family: serif;
  line-height: 1;
}

/* ---- 強みセクション ---- */
.strength-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 599px) {
  .strength-grid { grid-template-columns: 1fr; }
}

.strength-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 24px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.strength-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.strength-item .card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  flex-shrink: 0;
}
.strength-item .card-icon .icon {
  width: 32px;
  height: 32px;
}
.strength-item-txt h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 8px;
  line-height: 1.4;
}
.strength-item-txt p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-mute);
}

/* ---- 事業所一覧 ---- */

.stations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1000px) {
  .stations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .stations-grid { grid-template-columns: 1fr; }
}

.station-card {
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border-warm);
  border-radius: 22px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.station-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}
.station-card .s-icon {
  width: 64px;
  height: 64px;
  background: var(--color-accent);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.station-card .s-icon i {
	color: #fff;
	font-size: 1.7rem;
	font-weight: 600;
}
.station-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-dark);
  line-height: 1.5;
}
.station-card .station-cat {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff4d9;
  color: #d98b00;
  margin-bottom: 4px;
}
.station-card .station-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.station-card .station-info li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-light);
  line-height: 1.7;
}
.station-card .station-info li i {
  color: var(--color-accent);
  font-size: 12px;
  flex-shrink: 0;
  width: 14px;
}
.station-card .station-num {
  font-size: 12px;
  color: var(--color-text-mute);
  background: var(--color-bg-white);
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.7;
}
.station-card.is-coming {
  opacity: .75;
}
.station-card.is-coming .s-icon {
  background: #aaa;
}
.coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #aaa;
  border-radius: 999px;
  padding: 4px 12px;
  width: fit-content;
}

/* ---- 会社概要テーブル ---- */
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.company-table th,
.company-table td {
  padding: 18px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-warm);
  line-height: 1.8;
}
.company-table th {
  width: 220px;
  font-weight: 600;
  color: var(--color-text-light);
  background: var(--color-bg-warm);
  white-space: nowrap;
}
.company-table td {
  color: var(--color-text-dark);
  background: var(--color-bg-white);
}

.company-table .area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.company-table .area-tag {
  display: inline-block;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff4d9;
  color: #b45309;
  font-weight: 500;
}

@media (max-width: 599px) {
  .company-table,
  .company-table tbody,
  .company-table tr,
  .company-table th,
  .company-table td {
    display: block;
    width: 100%;
  }
  .company-table th {
    border-bottom: none;
    padding-bottom: 6px;
  }
  .company-table td {
    padding-top: 6px;
  }
}

/* ---- 地域対応エリア ---- */
.area-wrap {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.area-tags-lg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.area-tags-lg li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  padding: 10px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-border-warm);
  color: #b45309;
}
.area-tags-lg li i {
  color: var(--color-accent);
  font-size: 13px;
}
.area-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-text-mute);
}


/* ============================================================
   contact.php 固有スタイル
   ============================================================ */
 
.contact-fv {
  background-image: url("../img/fv/contact-fv.jpg");
}
 
/* ---- レイアウト ---- */
#contact-wrap {
  background: var(--color-bg-warm);
}
 
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
}
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
}
 
/* ---- サイドバー（電話・対応時間） ---- */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
}
.side-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 28px 24px;
}
.side-card .cta-points{
	color: var(--color-text-light);
}
.side-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-warm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.side-card h3 i { color: var(--color-accent); }
 
/* 電話リスト */
.side-tel-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.side-tel-item {}
.side-tel-item .label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-mute);
  margin-bottom: 4px;
}
.side-tel-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-text-dark);
  transition: color var(--transition);
}
.side-tel-item a:hover { color: var(--color-accent); }
.side-tel-item a i { color: var(--color-accent); font-size: 15px; }
 
.side-hours {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-light);
  line-height: 1.75;
}
.side-hours dt {
  font-weight: 700;
  color: var(--color-text-dark);
  margin-top: 8px;
}
.side-hours dt:first-child { margin-top: 0; }
 
/* ---- フォーム本体 ---- */
.contact-form-wrap {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 48px 44px;
}
@media (max-width: 599px) {
  .contact-form-wrap { padding: 32px 20px; }
}
 
.form-intro {
  margin-bottom: 36px;
}
.form-intro p {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 1.9;
}
 
/* 必須・任意バッジ */
.req {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.opt {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
 
/* フォームグループ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.form-group:last-of-type { margin-bottom: 0; }
 
.form-group label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
}
 
/* テキスト入力・テキストエリア */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 15px;
  color: var(--color-text-dark);
  background: var(--color-bg-warm);
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(245,163,0,.15);
  background: #fff;
}
.form-group textarea {
  resize: vertical;
  min-height: 140px;
}
 
/* セレクトbox矢印 */
.select-wrap {
  position: relative;
}
.select-wrap select {
  padding-right: 42px;
  cursor: pointer;
}
.select-wrap::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  pointer-events: none;
  font-size: 13px;
}
 
/* ラジオ・チェックボックス */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-radio-item {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  transition: border-color .2s, background .2s;
  background: var(--color-bg-warm);
}
.form-radio-item:hover {
  border-color: var(--color-accent);
  background: #fffbeb;
}
.form-radio-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}
.form-radio-item input[type="radio"]:checked + .radio-label-wrap {
  color: var(--color-text-dark);
}
.form-radio-item:has(input:checked) {
  border-color: var(--color-accent);
  background: #fffbeb;
}
.radio-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.radio-label-wrap .r-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-dark);
}
.radio-label-wrap .r-sub {
  font-size: 12px;
  color: var(--color-text-mute);
}
 
/* プライバシーポリシー同意 */
.form-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 16px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-warm);
  transition: border-color .2s;
}
.form-check-item:has(input:checked) {
  border-color: var(--color-accent);
  background: #fffbeb;
}
.form-check-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.form-check-item span {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.8;
}
.form-check-item a {
  color: var(--color-accent);
  text-decoration: underline;
}
 
/* エラーメッセージ */
.form-error {
  font-size: 12px;
  color: #b91c1c;
  display: none;
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #b91c1c;
}
.form-group.has-error .form-error { display: block; }
 
/* 送信ボタン */
.form-submit {
  margin-top: 36px;
  text-align: center;
}
.form-submit button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--sub-color, var(--color-accent));
  color: #fff;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 18px 56px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, opacity .25s;
  box-shadow: 0 8px 24px rgba(245,163,0,.25);
}
.form-submit button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(245,163,0,.35);
}
.form-submit button:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.form-submit .submit-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--color-text-mute);
}
 
/* ハニーポット */
.honeypot { display: none !important; }
 
/* ---- セクション全体 ---- */
.contact-section-head {
  margin-bottom: 48px;
}
 
/* ---- SP ---- */
@media (max-width: 960px) {
  .contact-side { position: static; }
}

/* ---- プライバシーポリシーカード ---- */
.side-privacy .privacy-body > p {
  font-size: 12px;
  color: var(--color-text-mute);
  line-height: 1.8;
  margin-bottom: 14px;
}
 
.privacy-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}
.privacy-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-border-warm);
}
.privacy-item:last-child { border-bottom: none; }
 
.privacy-item dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.privacy-item dt i {
  color: var(--color-accent);
  font-size: 8px;
}
.privacy-item dd {
  font-size: 12px;
  color: var(--color-text-mute);
  line-height: 1.75;
  padding-left: 14px;
}
 
.privacy-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--color-text-mute);
  background: var(--color-bg-warm);
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 4px;
}
.privacy-note i { color: var(--color-accent); flex-shrink: 0; }


/* ============================================================
   thanks.php 専用スタイル
   ============================================================ */
#thanks-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-warm);
  padding: 100px 20px;
}

.thanks-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  padding: 72px 60px;
  max-width: 720px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.06);
}
@media (max-width: 599px) {
  .thanks-card { padding: 48px 28px; }
}

.thanks-icon {
  width: 88px;
  height: 88px;
  background: #f0fdf4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32px;
}
.thanks-icon i {
  font-size: 2.8rem;
  color: #16a34a;
}

.thanks-card h1 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 24px;
  line-height: 1.5;
}

.thanks-card p {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: 2;
  margin-bottom: 16px;
}
.thanks-card p:last-of-type { margin-bottom: 0; }

.thanks-divider {
  border: none;
  border-top: 1px dashed var(--color-border-warm);
  margin: 36px 0;
}

.thanks-tel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}
.thanks-tel-item .label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-mute);
  margin-bottom: 2px;
}
.thanks-tel-item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
}
.thanks-tel-item a i { color: var(--color-accent); font-size: 14px; }

.thanks-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}
.thanks-btns a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s;
}
.thanks-btns a:hover { transform: translateY(-3px); }
.thanks-btns .btn-home {
  background: var(--sub-color, var(--color-accent));
  color: #fff;
  box-shadow: 0 6px 20px rgba(245,163,0,.25);
}
.thanks-btns .btn-home:hover { box-shadow: 0 10px 28px rgba(245,163,0,.35); }
.thanks-btns .btn-back {
  background: var(--color-bg-warm);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border);
}