/* ========================================
   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(--sec_padding) 0;
}

.layout_hero {
  text-align: center;
  padding: var(--layout_hero_padding) 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_gap) / 2);
}

.grid_col3 > * {
  width: calc(33.333% - var(--grid_gap) * 2 / 3);
}

.grid_col4 > * {
  width: calc(25% - var(--grid_gap) * 3 / 4);
}

/* ----------------------------------------
   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: var(--header_height);
}

.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) 0;
}

.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) {
  .wrap {
    width: var(--container_gutter_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_gap) / 2);
  }

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