/* section.css — 見出し＋本文（＋横長画像）の汎用セクション
   Figma: 私たちについて 1916:50851 / 1916:51390 など。ページ側は余白の修飾子だけを付ける */

.content-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  width: 100%;
  color: var(--color-black);
}

.content-section--gap-64 { gap: var(--space-64); }
.content-section--gap-80 { gap: var(--space-80); }
.content-section--pt-40 { padding-top: var(--space-40); }
.content-section--pb-24 { padding-bottom: var(--space-24); }
.content-section--py-24 { padding-block: var(--space-24); }

.content-section__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  width: 100%;
}

.content-section__text .heading {
  width: 100%;
}

.content-section__body {
  width: 100%;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

.content-section__body p {
  margin: 0;
}

/* 段落間の空行（Figma は空行で区切っている）*/
.content-section__body p + p {
  margin-top: calc(var(--font-size-body) * var(--line-height-loose));
}

/* 横長画像 1000×414 */
.content-section__image {
  width: 100%;
  aspect-ratio: 1000 / 414;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.content-section__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 薄いベージュのパネル（事業概要の経営者向け／経営者の方への事例）Figma: 1998:54345 / 2091:61336 ---- */
.consult-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-80);
  padding: var(--space-40) var(--space-56);
  border-radius: var(--radius-lg);
  background: var(--color-genki-port-a89990-20);
  color: var(--color-black);
}

.consult-panel__block {
  --consult-panel-deco-top: calc(-7 / 16 * 1rem);
  --consult-panel-deco-right: calc(-16 / 16 * 1rem);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  width: 100%;
}

.consult-panel__deco {
  position: absolute;
  top: var(--consult-panel-deco-top);
  right: var(--consult-panel-deco-right);
  width: calc(460 / 16 * 1rem);
  height: calc(303.592 / 16 * 1rem);
  pointer-events: none;
}

.consult-panel__block > :not(.consult-panel__deco) {
  position: relative;
}

.consult-panel__tag {
  margin: 0;
  padding: var(--space-4) var(--space-16);
  border-radius: var(--radius-full);
  background: var(--color-black);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  color: var(--color-white);
  white-space: nowrap;
}

.consult-panel__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  width: 100%;
}

.consult-panel__group .heading {
  width: 100%;
}

.consult-panel__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-40);
  width: 100%;
}

.consult-panel__col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-32);
  min-width: 0;
}

.consult-panel__image {
  --consult-panel-image-ratio: 472 / 337;

  flex: 1 0 0;
  align-self: center;
  min-width: 0;
  aspect-ratio: var(--consult-panel-image-ratio);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.consult-panel__image--media {
  --consult-panel-image-ratio: 275 / 196;
}

.consult-panel__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1200px 以下：Figma で1行固定（nowrap）の見出しも、幅が足りなければ折り返す */
@media (max-width: 1200px) {
  .consult-panel__tag {
    white-space: normal;
  }
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  .content-section {
    gap: var(--space-32);
  }

  .content-section__text {
    gap: var(--space-16);
  }

  /* 本文の読点直後の改行（PC の行長合わせ）は SP では外して自然に折り返す */
  .content-section__br-pc {
    display: none;
  }

  .content-section--gap-80 {
    gap: var(--space-40);
  }

  .content-section--pt-40 {
    padding-top: var(--space-24);
  }

  .content-section__body p + p {
    margin-top: var(--space-16);
  }

  .consult-panel {
    gap: var(--space-40);
    padding: var(--space-40) var(--space-24) var(--space-24);
  }

  .consult-panel__group {
    gap: var(--space-24);
  }

  .consult-panel__tag {
    font-size: var(--font-size-h3);
  }

  /* パネル内の見出しは SP の xl（h2）から1段階下げる */
  .consult-panel .heading--xl .heading__title {
    font-size: var(--font-size-h2-lead);
  }

  .consult-panel__row {
    flex-direction: column;
  }

  .consult-panel__col,
  .consult-panel__image {
    flex: none;
    width: 100%;
  }
}