/* PC は Figma 企業情報-01（1019:8777）に合わせる。4セクションとも同じ骨格:
   1200px 中央寄せ、セクション間40px、リング240pxを左右いずれかに -64px（上端0）、
   英字見出しは上64pxで左右端から16px、白パネルは上端128px（見出し84px - 20px）。
   SP（767px以下）は後半のメディアクエリで別途組んでいるので、ここは PC のみ */
@media (min-width: 768px) {
  .content-section,
  .content-section.reverse,
  .content-section.action,
  .content-section.related {
    width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
    min-height: 0;
    margin: 40px auto 0;
  }

  .section-heading,
  .section-heading.action-heading {
    padding-top: 64px;
  }

  .section-heading.align-right,
  .section-heading.action-heading {
    padding-right: 16px;
  }

  .section-heading.align-left {
    padding-left: 16px;
  }

  .content-section .section-panel {
    margin-top: -20px;
  }

  /* section decoration rings — match Figma: plain 240px circle, no rotation */
  .content-section .section-ring.red {
    top: 0;
    right: -64px;
  }

  .content-section .section-ring.orange {
    top: 0;
    left: -64px;
  }

  .content-section.action .section-ring.blue {
    top: 0;
    right: -64px;
    width: 240px;
    height: 240px;
    display: block;
  }

  .content-section.related .section-ring.green {
    top: 0;
    left: -64px;
    width: 240px;
    height: 240px;
    display: block;
  }

  /* 目次: ヒーローから40px、padding 64px 56px、高さは内容なり（Figma 256px） */
  .toc {
    width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
    height: auto;
    margin-top: 40px;
    padding: var(--panel-padding-y) var(--panel-padding-x);
  }

  .toc-title-en {
    font-size: 48px;
  }

  .toc-links {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* philosophy */

.section-panel.philosophy-panel {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  margin-left: auto;
}

.quote-box {
  position: relative;
  width: 100%;
  max-width: var(--inner-width);
  padding: 24px 32px;
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}

.quote-box.large {
  min-height: 135px;
}

.quote-box.compact {
  min-height: 77px;
}

.quote-box p {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
}

.quote-mark {
  position: absolute;
  color: rgba(0, 0, 0, 0.1);
  font-family: "A P-OTF Midashi Go MB31 Pr6N", var(--font-jp);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
}

.quote-mark.start {
  left: 8px;
  top: 8px;
}

/* 開きは左上、閉じは右下の対角に置く。
   字形は 80px の行ボックス内で上寄り（字面の下端から行ボックス下端まで約48.6px空く）ため、
   bottom を負の値にして、開きの上余白（8px + 字面上端まで6.9px ≒ 15px）と見た目を揃える */
.quote-mark.end {
  right: 8px;
  bottom: -34px;
}

.policy-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Figma: 引用ボックスの下32px、16px/行高26px */
.policy-lead {
  margin: 32px 0 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}

.number-list {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: var(--inner-width);
}

/* 罫線は下側だけを持たせ、先頭にのみ上罫線を足す。
   li ごとに上下両方を指定すると項目間で罫線が重なって2pxに見えるため */
.number-list li {
  min-height: 48px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}

.number-list li:first-child {
  border-top: 1px solid var(--line);
}

.number-badge {
  width: 24px;
  height: 24px;
  border-radius: 80px;
  background: #343434;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
}

.number-list p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* from the president（Figma 1019:8799）
   パネル（1200x378）の左上に正方形の写真をぴったり置き、名前ボックスは写真の右下角に収める。
   本文は写真の右40px（x=418）から幅742px、上48px */

/* 社長写真の一辺。この値を基準に、パネルのpaddingを算出する */
/* --president-top は写真の頭＝パネルの頭。見出しの padding-top(64px) + 英字タイトルの行高
   - パネルの引き上げ(20px)、で算出する（1512pxで128px） */
:root {
  --president-photo: clamp(240px, 25vw, 378px);
  --president-top: calc(44px + clamp(44px, 4.76vw, 72px) * 1.1667);
}

.president-panel {
  width: 100%;
  min-height: var(--president-photo);
  margin-left: 0;
  padding: 48px 40px 32px calc(var(--president-photo) + 40px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
}

.president-copy {
  width: min(742px, 100%);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.president-copy p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

/* Figma では全段落が左端揃い（字下げなし） */
.president-copy .indent {
  padding-left: 0;
}

.president-photo-wrap {
  position: absolute;
  z-index: 2;
  left: 0;
  top: var(--president-top);
  width: var(--president-photo);
  height: var(--president-photo);
  overflow: hidden;
  background: #3c3c3c;
}

/* 元画像は 432x378 を -27px ずらして使うトリミング。比率のまま追従させる */
.president-photo {
  width: 114.29%;
  height: 100%;
  object-fit: scale-down;
  transform: translateX(-6.25%);
}

/* 写真の右下角に内接（右端・下端を写真に揃える） */
.president-name {
  position: absolute;
  z-index: 3;
  left: calc(var(--president-photo) - 160px);
  top: calc(var(--president-top) + var(--president-photo) - 106px);
  width: 160px;
  min-height: 106px;
  padding: 16px 24px;
  background: #000;
  color: #fff;
  text-align: center;
}

.president-name p {
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.president-role {
  font-size: 14px;
}

.president-person {
  padding-top: 2px;
  font-size: 22px;
  font-weight: 700;
}

.president-kana {
  font-size: 12px;
}

/* action plan */

.action-panel {
  margin-right: auto;
  margin-left: auto;
  min-height: 804px;
}

.plan-content {
  margin-top: 40px;
  width: 100%;
  max-width: var(--inner-width);
}

.plan-content .tab {
  width: min(280px, 50%);
}

.plan-caption {
  min-height: 55px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.plan-table {
  border: 1px solid var(--border);
  border-top: 0;
}

.plan-row {
  display: grid;
  grid-template-columns: 176px 1fr;
  min-height: 55px;
}

.plan-row + .plan-row {
  border-top: 1px solid var(--border);
}

.plan-label,
.plan-detail {
  padding: 16px 12px;
  font-size: 14px;
  line-height: 1.65;
}

.plan-label {
  display: flex;
  align-items: center;
  color: var(--text);
  background: var(--bg);
}

.plan-label span {
  display: contents;
}

.plan-detail {
  border-left: 1px solid var(--border);
}

.plan-detail p {
  margin: 0;
}

.goal-block + .goal-block {
  margin-top: 16px;
}

.goal-title {
  font-weight: 700;
}

.goal-title.muted {
  color: #808080;
}

/* related pages */

.related-panel {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: var(--panel-padding-y) var(--panel-padding-x);
}

/* 最後のセクションからフッターまで（Figma: 40px + フッター枠の上余白40px） */
.site-footer {
  margin-top: 80px;
}

@media (max-width: 767px) {
  /* PC用の margin-top（16 / -42 / 17px）を打ち消し、共通のセクション間隔32pxに揃える */
  .content-section.reverse,
  .content-section.action,
  .content-section.related {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 32px auto 0;
  }

  /* PC用の見出し・パネルの位置調整（padding-left 44px / margin-top -28px）を打ち消す */
  .section-heading.align-left {
    padding-left: 0;
  }

  .president-panel,
  .action-panel,
  .related-panel {
    margin-top: 0;
  }

  /* リングは4色とも 184px / 上端0 / 左右 -64px（Figma SP） */
  .content-section .section-ring.red {
    top: 0;
    right: -64px;
  }

  .content-section .section-ring.orange {
    top: 0;
    left: -64px;
  }

  .content-section.action .section-ring.blue {
    top: 0;
    right: -64px;
    width: 184px;
    height: 184px;
  }

  .content-section.related .section-ring.green {
    top: 0;
    left: -64px;
    width: 184px;
    height: 184px;
  }

  .section-heading.action-heading {
    padding: 48px 0 0;
    align-items: center;
    justify-content: flex-start;
  }

  /* 「From the president」「Related pages」はFigmaどおり2行に折る */
  .content-section.reverse .section-title-en,
  .content-section.related .section-title-en {
    max-width: 327px;
  }

  .section-panel.philosophy-panel {
    min-height: 0;
    gap: 32px;
  }

  .quote-box,
  .quote-box.large,
  .quote-box.compact {
    width: 100%;
    padding: 24px 32px;
  }

  .quote-box p {
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .quote-box p br {
    display: none;
  }

  .quote-mark.end {
    right: 15px;
    top: auto;
    bottom: -34px;
  }

  .policy-block {
    gap: 8px;
  }

  .policy-lead {
    font-size: 16px;
    line-height: 2;
  }

  .number-list {
    width: 100%;
  }

  .number-list li {
    min-height: 0;
    align-items: flex-start;
    gap: 16px;
  }

  .number-list p {
    min-width: 0;
    max-width: 100%;
    line-height: 1.8;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 社長より（Figma 968:4687）: 見出し2行の下 248px からパネル。パネル先頭に
     正方形の写真を幅いっぱいに敷き、名前ボックスは写真の右下（下端が写真下端+3px）。
     写真の高さ＝セクション幅なので、名前の位置は cqw で追従させる */
  .content-section.reverse {
    container-type: inline-size;
  }

  .content-section.reverse .section-heading {
    height: 248px;
  }

  .section-panel.president-panel {
    width: 100%;
    min-height: 0;
    margin-left: 0;
    padding: calc(100% + 20px) 20px 40px;
  }

  .president-copy {
    width: 100%;
    gap: 8px;
  }

  .president-copy p {
    color: #364153;
    font-size: 14px;
    line-height: 2;
  }

  .president-copy .indent {
    padding-left: 0;
  }

  .president-photo-wrap {
    left: 0;
    top: 248px;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .president-name {
    left: auto;
    right: 0;
    top: calc(248px + 100cqw - 103px);
    width: 160px;
    height: 106px;
  }

  .action-heading .section-title-en {
    white-space: nowrap;
  }

  .action-panel {
    width: 100%;
    min-height: auto;
  }

  .plan-content {
    width: 100%;
    margin-top: 32px;
  }

  .plan-content .tab {
    width: 50%;
  }

  .plan-caption {
    padding: 16px;
    font-size: 15px;
    line-height: 1.8;
  }

  .plan-row {
    grid-template-columns: 72px 1fr;
  }

  .plan-label,
  .plan-detail {
    padding: 16px 24px;
    font-size: 14px;
    line-height: 1.75;
    flex-direction: column;
  }

  .plan-label {
    justify-content: center;
    text-align: center;
    word-break: normal;
  }

  /* SPはラベル列が72pxと狭いので、span 単位で改行位置を制御する */
  .plan-label span {
    display: block;
    white-space: nowrap;
  }

  .plan-detail {
    min-width: 0;
  }

  .goal-block + .goal-block {
    margin-top: 24px;
  }

  /* 見出し「Related pages」が2行なので本文の頭を 224px に（padding-top 104px） */
  .related-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 104px 20px 40px;
  }

  .site-footer {
    margin-top: 32px;
  }
}