/* ========================================
   Layout

   .grid … 均等カラム（flex）
   .split … 写真+テキスト2カラム（DOM順＝SPの並び）

   HTML例（均等2カラム）:
   <div class="grid grid_col2">
     <div>…</div>
     <div>…</div>
   </div>

   HTML例（写真+テキスト / SPで写真→テキスト）:
   <div class="split">
     <div class="split_media">…</div>
     <div class="split_body">…</div>
   </div>
   PCで写真を右: split_media_end
   SPでテキスト→写真: split_body を先に書く
======================================== */

.layout_container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.layout_container_sm {
  width: min(100% - 40px, var(--container-sm));
  margin-inline: auto;
}

.layout_section {
  padding: var(--layout-section-padding-y) 0;
}

.layout_hero {
  text-align: center;
  padding: 100px 0;
}

.layout_sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.layout_sidebar > :first-child {
  flex: 1 1 0;
  min-width: 0;
  width: calc(100% - 368px);
}

.layout_sidebar > :last-child {
  flex: 0 0 320px;
  width: 320px;
}

/* ----------------------------------------
   Grid（均等カラム・flex）
---------------------------------------- */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

.grid_col2 > * {
  width: calc(50% - var(--grid-col2-inset));
}

.grid_col3 > * {
  width: calc(33.333% - var(--grid-col3-inset));
}

.grid_col4 > * {
  width: calc(25% - var(--grid-col4-inset));
}

/* ----------------------------------------
   Split（メディア+テキスト2カラム）
---------------------------------------- */
.split {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.split_media,
.split_body {
  width: 100%;
  box-sizing: border-box;
}

.body_wrap {
  overflow: hidden;
  padding-top: calc(var(--header_height) + 8px);
}

.wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  position: relative;
  box-sizing: border-box;
}

.wrap p {
  margin-bottom: 1rem;
}

.w86 {
  width: 86%;
  margin-inline: auto;
}

.sec {
  padding: var(--sec-padding-y-sp) 0;
}

.sec_block {
  padding: var(--sec-block-padding-y) 0;
}

.sec_block .split {
  gap: var(--sec-split-gap);
}

.sec_block .split + .grid {
  margin-top: var(--sec-tit-margin-bottom);
}

.sec_page_wrap,
.section_block {
  margin: 0 0 var(--space-section-block-sp);
}

.sec_page .sec_page_wrap:last-of-type,
.sec_page .section_block:last-of-type {
  margin-bottom: 0;
}

.target_line {
  margin-top: calc(-1 * var(--anchor-offset-sp));
  padding-top: var(--anchor-offset-sp);
}

@media (min-width: 768px) {
  .body_wrap {
    margin-top: var(--header-offset-pc);
  }

  .wrap {
    width: var(--container-gutter-pc);
  }

  .sec {
    padding: var(--sec-padding-top-pc) 0 var(--sec-padding-bottom-pc);
  }

  .sec:last-of-type {
    padding-bottom: var(--sec-padding-bottom-last-pc);
  }

  .sec_page_wrap,
  .section_block {
    margin-bottom: var(--space-section-block-pc);
  }

  .target_line {
    margin-top: 0;
    padding-top: 0;
  }

  .split {
    flex-direction: row;
    align-items: center;
    gap: var(--split-gap);
  }

  .split_media_end {
    flex-direction: row-reverse;
  }

  .split_media {
    flex: 0 0 var(--split-media-ratio);
    max-width: var(--split-media-ratio);
  }

  .split_body {
    flex: 1 1 var(--split-body-ratio);
    max-width: var(--split-body-ratio);
  }

  .split_media_narrow .split_media {
    flex-basis: var(--split-media-ratio-narrow);
    max-width: var(--split-media-ratio-narrow);
  }

  .split_body_wide .split_body {
    flex-basis: var(--split-body-ratio-wide);
    max-width: var(--split-body-ratio-wide);
  }
}

@media (min-width: 1240px) {
  .wrap {
    width: var(--container);
  }
}

.sp_only {
  display: block;
}

.pc_only {
  display: none;
}

@media (min-width: 768px) {
  .sp_only {
    display: none;
  }

  .pc_only {
    display: block;
  }
}

/* ----------------------------------------
   余白ユーティリティ（u_pt / u_mt / u_mb）
---------------------------------------- */
.u_pt10 { padding-top: var(--u-space-10) !important; }
.u_pt20 { padding-top: var(--u-space-20) !important; }
.u_pt30 { padding-top: var(--u-space-30) !important; }
.u_pt40 { padding-top: var(--u-space-40) !important; }
.u_pt60 { padding-top: var(--u-space-60) !important; }
.u_pt80 { padding-top: var(--u-space-80) !important; }

.u_mt10 { margin-top: var(--u-space-10) !important; }
.u_mt20 { margin-top: var(--u-space-20) !important; }
.u_mt30 { margin-top: var(--u-space-30) !important; }
.u_mt40 { margin-top: var(--u-space-40) !important; }
.u_mt60 { margin-top: var(--u-space-60) !important; }
.u_mt80 { margin-top: var(--u-space-80) !important; }

.u_mb10 { margin-bottom: var(--u-space-10) !important; }
.u_mb20 { margin-bottom: var(--u-space-20) !important; }
.u_mb30 { margin-bottom: var(--u-space-30) !important; }
.u_mb40 { margin-bottom: var(--u-space-40) !important; }
.u_mb60 { margin-bottom: var(--u-space-60) !important; }
.u_mb80 { margin-bottom: var(--u-space-80) !important; }

.u_mt00 { margin-top: 0 !important; }
.u_mb00 { margin-bottom: 0 !important; }

@media (max-width: 767px) {
  .grid_col2 > *,
  .grid_col3 > *,
  .grid_col4 > * {
    width: 100%;
  }

  .grid_col2.grid_sp2 > * {
    width: calc(50% - var(--grid-sp2-inset));
  }

  .layout_sidebar > :first-child,
  .layout_sidebar > :last-child {
    flex: 1 1 100%;
    width: 100%;
  }

  .layout_hero {
    padding: 64px 0;
  }
}