@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/* =========================================================
 * family-benefit.jp article design system
 * Prefix: fb-
 * ======================================================= */

:root {
  --fb-ink: #333333;
  --fb-green: #2f6b2f;
  --fb-green-2: #5f9658;
  --fb-green-soft: #f2f8ef;
  --fb-line: #d7e4d2;
  --fb-yellow: #fff2a8;
  --fb-red: #b42318;
  --fb-caution-soft: #fff6f2;
  --fb-white: #ffffff;
  --fb-radius: 8px;
  --fb-shadow: 0 4px 16px rgba(37, 76, 36, 0.08);
}

.entry-content {
  color: var(--fb-ink);
  line-height: 1.9;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > .wp-block-group,
.entry-content > .wp-block-table,
.entry-content > .blank-box,
.entry-content > .fb-box,
.entry-content > .fb-flow,
.entry-content > .fb-actions {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.entry-content h2 {
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 2.6em;
  margin-bottom: 1.05em;
  padding: 0.72em 0.86em;
  border: 0;
  border-left: 6px solid var(--fb-green);
  border-radius: 0 var(--fb-radius) var(--fb-radius) 0;
  background: var(--fb-green-soft);
  color: #244f24;
  font-weight: 700;
  line-height: 1.45;
}

.entry-content h3 {
  margin-top: 2em;
  margin-bottom: 0.8em;
  padding: 0.25em 0 0.48em;
  border: 0;
  border-bottom: 2px solid var(--fb-line);
  color: #2b572b;
  font-weight: 700;
  line-height: 1.5;
}

.entry-content h3::before {
  content: "";
  display: inline-block;
  width: 0.48em;
  height: 0.48em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--fb-green-2);
  vertical-align: 0.12em;
}

.entry-content mark[data-oneroom-emphasis="yellow"],
.entry-content mark[data-fb-emphasis="yellow"] {
  padding: 0.08em 0.18em;
  background: linear-gradient(transparent 55%, var(--fb-yellow) 55%) !important;
  color: inherit;
}

.entry-content [data-oneroom-emphasis="red"],
.entry-content [data-fb-emphasis="red"] {
  color: var(--fb-red) !important;
}

.fb-box {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  padding: 1.05em 1.2em;
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius);
  background: var(--fb-white);
  box-shadow: var(--fb-shadow);
  overflow-wrap: anywhere;
}

p.fb-box {
  margin-top: 1.35em;
  margin-bottom: 1.35em;
}

.fb-box > :first-child { margin-top: 0; }
.fb-box > :last-child { margin-bottom: 0; }

.fb-box--point {
  border-left: 5px solid var(--fb-green);
  background: var(--fb-green-soft);
}

.fb-box--note { border-left: 5px solid var(--fb-green-2); }

.fb-box--caution {
  border-color: #efc7c1;
  border-left: 5px solid var(--fb-red);
  background: var(--fb-caution-soft);
}

.entry-content .blank-box,
.entry-content .information-box,
.entry-content .question-box,
.entry-content .alert-box {
  border-radius: var(--fb-radius);
  box-shadow: var(--fb-shadow);
}

.entry-content .blank-box:not(.fb-next-step) { border-color: var(--fb-line); }
.entry-content .bb-tab::before { font-weight: 700; }

.fb-flow {
  counter-reset: fb-step;
  margin: 1.7em 0;
  padding: 0;
  list-style: none;
}

.fb-flow--steps > li,
.fb-flow__item {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 1em 1em 1em 4.2em;
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius);
  background: var(--fb-white);
  box-shadow: var(--fb-shadow);
  list-style: none;
}

.fb-flow--steps > li { counter-increment: fb-step; }

.fb-flow--steps > li::before,
.fb-flow__number {
  position: absolute;
  top: 50%;
  left: 1em;
  display: grid;
  width: 2.25em;
  height: 2.25em;
  place-items: center;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--fb-green);
  color: var(--fb-white);
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1;
}

.fb-flow--steps > li::before { content: counter(fb-step); }

.fb-flow--steps > li:not(:last-child)::after,
.fb-flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 2em;
  width: 2px;
  height: 15px;
  background: var(--fb-green-2);
}

.fb-flow--steps > li strong,
.fb-flow__title {
  display: block;
  margin-bottom: 0.25em;
  color: #244f24;
}

.fb-flow--choice {
  display: grid;
  gap: 12px;
}

.fb-choice {
  box-sizing: border-box;
  max-width: 100%;
  padding: 1.05em 1.15em;
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius);
  background: var(--fb-white);
}

.fb-choice__question {
  margin: 0 0 0.8em;
  color: #244f24;
  font-weight: 700;
}

.fb-choice__answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fb-choice__answer {
  padding: 0.8em 0.9em;
  border-radius: 6px;
  background: var(--fb-green-soft);
}

.fb-choice__label {
  display: block;
  margin-bottom: 0.25em;
  color: var(--fb-green);
  font-weight: 700;
}

.fb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.fb-btn,
.fb-next-step a {
  box-sizing: border-box;
  max-width: 100%;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.75em 1.35em;
  border: 2px solid var(--fb-green);
  border-radius: var(--fb-radius);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fb-btn--primary,
.fb-next-step a {
  background: var(--fb-green);
  color: var(--fb-white) !important;
}

.fb-btn--secondary {
  background: var(--fb-white);
  color: var(--fb-green) !important;
}

.fb-btn:hover,
.fb-next-step a:hover {
  transform: translateY(-1px);
  background: #245824;
  color: var(--fb-white) !important;
}

.fb-btn:focus-visible,
.fb-next-step a:focus-visible {
  outline: 3px solid var(--fb-yellow);
  outline-offset: 3px;
}

.fb-next-step {
  padding: 1.15em 1.2em;
  border-color: var(--fb-line) !important;
  background: var(--fb-green-soft);
}

.fb-next-step a { margin-top: 0.35em; }

.entry-content table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--fb-line);
  border-radius: var(--fb-radius);
}

.entry-content th {
  background: var(--fb-green-soft);
  color: #244f24;
}

.entry-content th,
.entry-content td { border-color: var(--fb-line); }

@media screen and (max-width: 768px) {
  .entry-content { line-height: 1.85; }

  .entry-content h2 {
    margin-top: 2.2em;
    padding: 0.65em 0.72em;
    font-size: 1.25em;
  }

  .entry-content h3 { font-size: 1.1em; }

  .fb-flow--steps > li,
  .fb-flow__item { padding: 3.55em 0.95em 0.95em; }

  .fb-flow--steps > li::before,
  .fb-flow__number {
    top: 0.9em;
    left: 0.95em;
    transform: none;
  }

  .fb-flow--steps > li:not(:last-child)::after,
  .fb-flow__item:not(:last-child)::after { left: 2.05em; }

  .fb-choice__answers { grid-template-columns: 1fr; }

  .fb-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .fb-btn,
  .fb-next-step a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-btn,
  .fb-next-step a { transition: none; }
}