/**
 * だいこん畑 共通コンポーネントCSS
 *
 * 複数ページで使用する見出し、ボタン、カードなどを
 * 段階的に管理します。
 */


/* ============================================================
   01．共通セクション見出し
============================================================ */

.daikon-section-heading,
.daikon-heading-unified {
  position: relative;
  width: min(
    var(--daikon-width-text, 860px),
    100%
  );
  margin: 0 auto var(--daikon-heading-gap-pc, 50px) !important;
  padding: 0 var(--daikon-gutter-pc, 24px);
  text-align: center;
}


/* ============================================================
   02．英語ラベル
============================================================ */

.daikon-heading-unified .daikon-section-label,
.daikon-section-heading .daikon-section-label {
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #3f7555 !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-transform: none !important;
}


/* ============================================================
   03．日本語見出し
============================================================ */

.daikon-heading-unified h2,
.daikon-section-heading h2 {
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #24332a !important;
  font-family: inherit !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  text-align: center !important;
  text-transform: none !important;
}

.daikon-heading-unified h2::before,
.daikon-heading-unified h2::after,
.daikon-section-heading h2::before,
.daikon-section-heading h2::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
   04．共通リード文
============================================================ */

.daikon-heading-unified .daikon-section-lead,
.daikon-section-heading .daikon-section-lead {
  width: 100%;
  max-width: var(--daikon-width-text, 860px);
  margin: 0 auto 8px !important;
  padding: 0 !important;
  color: var(--daikon-color-text, #59635c) !important;
  font-family: inherit !important;
  font-size: var(--daikon-font-lead, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: var(--daikon-line-lead, 2) !important;
  text-align: center !important;
}

.daikon-heading-unified .daikon-section-lead:last-child,
.daikon-section-heading .daikon-section-lead:last-child {
  margin-bottom: 0 !important;
}


/* ============================================================
   05．セクション間の案内用空見出し
============================================================ */

.entry-content .daikon-section-guide__title,
.daikon-section-guide__title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  border: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

.entry-content .daikon-section-guide__title::before,
.entry-content .daikon-section-guide__title::after,
.daikon-section-guide__title::before,
.daikon-section-guide__title::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
   06．スマートフォン
============================================================ */

@media screen and (max-width: 781px) {
  .daikon-section-heading,
  .daikon-heading-unified {
    width: 100%;
    margin-bottom: var(--daikon-heading-gap-sp, 36px) !important;
    padding-right: var(--daikon-gutter-sp, 16px);
    padding-left: var(--daikon-gutter-sp, 16px);
  }

  .daikon-heading-unified .daikon-section-label,
  .daikon-section-heading .daikon-section-label {
    margin-bottom: 8px !important;
    font-size: 16px !important;
  }

  .daikon-heading-unified h2,
  .daikon-section-heading h2 {
    margin-bottom: 16px !important;
    font-size: 27px !important;
    line-height: 1.5 !important;
  }

  .daikon-heading-unified .daikon-section-lead,
  .daikon-section-heading .daikon-section-lead {
    font-size: var(--daikon-font-lead, 16px) !important;
    line-height: 1.9 !important;
  }

  .entry-content .daikon-section-guide__title,
  .daikon-section-guide__title {
    padding-right: var(--daikon-gutter-sp, 16px) !important;
    padding-left: var(--daikon-gutter-sp, 16px) !important;
  }
}


/* ============================================================
   07．共通CTAボタン
============================================================ */

.daikon-a-midcta__button {
  margin: 0 !important;
}

.daikon-a-midcta__button .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--daikon-button-height-pc, 56px);
  padding: 13px 18px !important;
  border-radius: var(--daikon-radius-small, 10px) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box !important;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


/* 見学・相談ボタン */

.daikon-a-midcta__button--visit .wp-block-button__link {
  border: 2px solid
    var(--daikon-color-primary, #60ab66) !important;
  background:
    var(--daikon-color-primary, #60ab66) !important;
  color: #ffffff !important;
}


/* 電話ボタン */

.daikon-a-midcta__button--tel .wp-block-button__link {
  border: 2px solid
    var(--daikon-color-gold, #caa95f) !important;
  background:
    var(--daikon-color-gold, #caa95f) !important;
  color: #ffffff !important;
}

.daikon-a-midcta__button--tel
.wp-block-button__link::before {
  margin-right: 7px;
  content: "☎";
}


/* 関連ページボタン */

.daikon-a-midcta__button--form .wp-block-button__link {
  border: 2px solid
    var(--daikon-color-primary, #60ab66) !important;
  background: #ffffff !important;
  color:
    var(--daikon-color-primary-dark, #315b40) !important;
}


/* ホバー・キーボード操作 */

.daikon-a-midcta__button--visit
.wp-block-button__link:hover,
.daikon-a-midcta__button--visit
.wp-block-button__link:focus-visible {
  border-color:
    var(--daikon-color-primary-dark, #315b40) !important;
  background:
    var(--daikon-color-primary-dark, #315b40) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.daikon-a-midcta__button--tel
.wp-block-button__link:hover,
.daikon-a-midcta__button--tel
.wp-block-button__link:focus-visible {
  border-color: #a98435 !important;
  background: #a98435 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.daikon-a-midcta__button--form
.wp-block-button__link:hover,
.daikon-a-midcta__button--form
.wp-block-button__link:focus-visible {
  background: #edf5ef !important;
  color:
    var(--daikon-color-primary-dark, #315b40) !important;
  transform: translateY(-2px);
}


/* ============================================================
   08．3ボタンレイアウト
============================================================ */

.daikon-three-buttons,
.daikon-three-buttons * {
  box-sizing: border-box;
}

.daikon-three-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, 290px) !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}

.daikon-three-buttons > .wp-block-button {
  width: 290px !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.daikon-three-buttons > .wp-block-button:nth-child(3) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}

.daikon-three-buttons .wp-block-button__link {
  width: 100% !important;
  min-height: var(--daikon-button-height-pc, 56px) !important;
  padding: 14px 18px !important;
  border-radius:
    var(--daikon-radius-small, 10px) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center;
  white-space: nowrap;
}


/* ============================================================
   09．共通チェック項目
============================================================ */

.daikon-a-midcta__check {
  position: relative;
  margin: 0 !important;
  padding: 14px 15px 14px 44px;
  border: 1px solid
    var(--daikon-color-border, #dce8df);
  border-radius: 11px;
  background: #ffffff;
  color:
    var(--daikon-color-primary-dark, #315b40) !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.65;
}

.daikon-a-midcta__check::before {
  position: absolute;
  top: 50%;
  left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    var(--daikon-color-primary, #60ab66);
  color: #ffffff;
  font-size: 12px;
  content: "✓";
  transform: translateY(-50%);
}


/* ============================================================
   10．共通ボタン スマートフォン
============================================================ */

@media screen and (max-width: 781px) {
  .daikon-three-buttons {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .daikon-three-buttons > .wp-block-button,
  .daikon-three-buttons .wp-block-button__link {
    width: 100% !important;
    max-width: 100% !important;
  }

  .daikon-three-buttons > .wp-block-button:nth-child(3) {
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  .daikon-three-buttons .wp-block-button__link,
  .daikon-a-midcta__button .wp-block-button__link {
    min-height: var(--daikon-button-height-sp, 58px) !important;
    white-space: normal !important;
  }
}
