@charset "utf-8";

/* ----------------------------------------
- Grid System (Improved)
---------------------------------------- */
/* 基本グリッド
---------------------------------------- */
.grid {
  display: grid;
  grid-auto-rows: auto;
  overflow: visible;
  gap: clamp(30px, 7vw, 120px) clamp(15px, 3vw, 50px);
}
@media screen and (min-width: 768px) {
  .grid_pc {
    display: grid;
    grid-auto-rows: auto;
    overflow: visible;
  gap: clamp(30px, 7vw, 120px) clamp(15px, 3vw, 50px);
  }
}
@media screen and (max-width: 767px) {
  .grid_sp {
    display: grid;
    grid-auto-rows: auto;
    overflow: visible;
    gap: clamp(30px, 7vw, 120px) clamp(15px, 3vw, 50px);
  }
}
/* ----------------------------------------
-　列数指定（親要素）
---------------------------------------- */
.grid_col-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid_col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid_col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid_col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid_col-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid_col-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid_col-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Auto-fit/fill レイアウト（レスポンシブ自動調整）
---------------------------------------- */
.grid_auto-fit-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid_auto-fit-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid_auto-fit-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid_auto-fill-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid_auto-fill-250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid_auto-fill-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ----------------------------------------
- 行数指定（親要素）
---------------------------------------- */
.grid_rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid_rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid_rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid_rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.grid_rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.grid_rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }

/* ----------------------------------------
- 子要素の列占有（span）
---------------------------------------- */
.grid-child_col-1 { grid-column: span 1 / span 1; }
.grid-child_col-2 { grid-column: span 2 / span 2; }
.grid-child_col-3 { grid-column: span 3 / span 3; }
.grid-child_col-4 { grid-column: span 4 / span 4; }
.grid-child_col-5 { grid-column: span 5 / span 5; }
.grid-child_col-6 { grid-column: span 6 / span 6; }
.grid-child_col-7 { grid-column: span 7 / span 7; }
.grid-child_col-8 { grid-column: span 8 / span 8; }
.grid-child_col-9 { grid-column: span 9 / span 9; }
.grid-child_col-10 { grid-column: span 10 / span 10; }
.grid-child_col-11 { grid-column: span 11 / span 11; }
.grid-child_col-12 { grid-column: span 12 / span 12; }
.grid-child_col-full { grid-column: 1 / -1; }

/* ----------------------------------------
- 子要素の行占有（span）
---------------------------------------- */
.grid-child_row-1 { grid-row: span 1 / span 1; }
.grid-child_row-2 { grid-row: span 2 / span 2; }
.grid-child_row-3 { grid-row: span 3 / span 3; }
.grid-child_row-4 { grid-row: span 4 / span 4; }
.grid-child_row-5 { grid-row: span 5 / span 5; }
.grid-child_row-6 { grid-row: span 6 / span 6; }
.grid-child_row-full { grid-row: 1 / -1; }

/* ----------------------------------------
- 列の開始位置
---------------------------------------- */
.grid-child_col-start-1 { grid-column-start: 1; }
.grid-child_col-start-2 { grid-column-start: 2; }
.grid-child_col-start-3 { grid-column-start: 3; }
.grid-child_col-start-4 { grid-column-start: 4; }
.grid-child_col-start-5 { grid-column-start: 5; }
.grid-child_col-start-6 { grid-column-start: 6; }
.grid-child_col-start-7 { grid-column-start: 7; }
.grid-child_col-start-auto { grid-column-start: auto; }

/* 列の終了位置
---------------------------------------- */
.grid-child_col-end-1 { grid-column-end: 1; }
.grid-child_col-end-2 { grid-column-end: 2; }
.grid-child_col-end-3 { grid-column-end: 3; }
.grid-child_col-end-4 { grid-column-end: 4; }
.grid-child_col-end-5 { grid-column-end: 5; }
.grid-child_col-end-6 { grid-column-end: 6; }
.grid-child_col-end-7 { grid-column-end: 7; }
.grid-child_col-end-auto { grid-column-end: auto; }

/* ----------------------------------------
-  行の開始位置
---------------------------------------- */
.grid-child_row-start-1 { grid-row-start: 1; }
.grid-child_row-start-2 { grid-row-start: 2; }
.grid-child_row-start-3 { grid-row-start: 3; }
.grid-child_row-start-4 { grid-row-start: 4; }
.grid-child_row-start-5 { grid-row-start: 5; }
.grid-child_row-start-6 { grid-row-start: 6; }
.grid-child_row-start-auto { grid-row-start: auto; }

/* 行の終了位置
---------------------------------------- */
.grid-child_row-end-1 { grid-row-end: 1; }
.grid-child_row-end-2 { grid-row-end: 2; }
.grid-child_row-end-3 { grid-row-end: 3; }
.grid-child_row-end-4 { grid-row-end: 4; }
.grid-child_row-end-5 { grid-row-end: 5; }
.grid-child_row-end-6 { grid-row-end: 6; }
.grid-child_row-end-auto { grid-row-end: auto; }

/* ----------------------------------------
- Gap（間隔）
---------------------------------------- */

/* Gap - vw単位
---------------------------------------- */
.grid_gap-0  { gap: 0; }
.grid_gap-5  { gap: clamp(5px, 0.298vw, 5px); }
.grid_gap-10 { gap: clamp(5px, 0.595vw, 10px); }
.grid_gap-15 { gap: clamp(10px, 0.893vw, 15px); }
.grid_gap-20 { gap: clamp(10px, 1.190vw, 20px); }
.grid_gap-25 { gap: clamp(10px, 1.488vw, 25px); }
.grid_gap-30 { gap: clamp(15px, 2.083vw, 35px); }
.grid_gap-40 { gap: clamp(20px, 2.381vw, 40px); }
.grid_gap-45 { gap: clamp(20px, 2.679vw, 45px); }
.grid_gap-50 { gap: clamp(25px, 2.976vw, 50px); }
.grid_gap-80 { gap: clamp(40px, 4.762vw, 80px); }


/* Gap - px単位
---------------------------------------- */
.grid_gap-0px  { gap: 0; }
.grid_gap-5px  { gap: 5px; }
.grid_gap-10px { gap: 10px; }
.grid_gap-15px { gap: 15px; }
.grid_gap-20px { gap: 20px; }
.grid_gap-25px { gap: 25px; }
.grid_gap-30px { gap: 30px; }
.grid_gap-35px { gap: 35px; }
.grid_gap-40px { gap: 40px; }
.grid_gap-45 { gap: 45px; }
.grid_gap-50px { gap: 50px; }

/* Row Gap（行の間隔）
---------------------------------------- */
.grid_row-gap-0  { row-gap: 0; }
.grid_row-gap-5  { row-gap: clamp(5px, 0.5vw, 5px); }
.grid_row-gap-10 { row-gap: clamp(5px, 1vw, 10px); }
.grid_row-gap-15 { row-gap: clamp(10px, 1.5vw, 15px); }
.grid_row-gap-20 { row-gap: clamp(10px, 2vw, 20px); }
.grid_row-gap-25 { row-gap: clamp(10px, 2.5vw, 25px); }
.grid_row-gap-30 { row-gap: clamp(15px, 3vw, 30px); }
.grid_row-gap-35 { row-gap: clamp(15px, 3.5vw, 35px); }
.grid_row-gap-40 { row-gap: clamp(20px, 4vw, 40px); }
.grid_row-gap-45 { row-gap: clamp(20px, 4.5vw, 45px); }
.grid_row-gap-50 { row-gap: clamp(25px, 5vw, 50px); }
.grid_row-gap-80 { row-gap: clamp(40px, 8vw, 80px); }


/* Column Gap（列の間隔）
---------------------------------------- */
.grid_col-gap-0  { column-gap: 0; }
.grid_col-gap-5  { column-gap: clamp(5px, 0.5vw, 5px); }
.grid_col-gap-10 { column-gap: clamp(5px, 1vw, 10px); }
.grid_col-gap-15 { column-gap: clamp(10px, 1.5vw, 15px); }
.grid_col-gap-20 { column-gap: clamp(10px, 2vw, 20px); }
.grid_col-gap-25 { column-gap: clamp(10px, 2.5vw, 25px); }
.grid_col-gap-30 { column-gap: clamp(15px, 3vw, 30px); }
.grid_col-gap-35 { column-gap: clamp(15px, 3.5vw, 35px); }
.grid_col-gap-40 { column-gap: clamp(20px, 4vw, 40px); }
.grid_col-gap-45 { column-gap: clamp(20px, 4.5vw, 45px); }
.grid_col-gap-50 { column-gap: clamp(25px, 5vw, 50px); }
.grid_col-gap-80 { column-gap: clamp(40px, 8vw, 80px); }



/* ----------------------------------------
- Alignment（配置）
---------------------------------------- */

/* Place Items（justify + align の一括指定）
---------------------------------------- */
.place-items-start { place-items: start; }
.place-items-center { place-items: center; }
.place-items-end { place-items: end; }
.place-items-stretch { place-items: stretch; }

/* Justify Items（水平方向の配置）
---------------------------------------- */
.justify-items-start { justify-items: start; }
.justify-items-center { justify-items: center; }
.justify-items-end { justify-items: end; }
.justify-items-stretch { justify-items: stretch; }

/* Align Items（垂直方向の配置）
---------------------------------------- */
.align-items-start { align-items: start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: end; }
.align-items-stretch { align-items: stretch; }
.align-items-baseline { align-items: baseline; }

/* Justify Content（グリッド全体の水平方向配置）
---------------------------------------- */
.justify-content-start { justify-content: start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: end; }
.justify-content-space-between { justify-content: space-between; }
.justify-content-space-around { justify-content: space-around; }
.justify-content-space-evenly { justify-content: space-evenly; }

/* Align Content（グリッド全体の垂直方向配置）
---------------------------------------- */
.align-content-start { align-content: start; }
.align-content-center { align-content: center; }
.align-content-end { align-content: end; }
.align-content-space-between { align-content: space-between; }
.align-content-space-around { align-content: space-around; }
.align-content-space-evenly { align-content: space-evenly; }

/* ----------------------------------------
- Self Alignment（個別要素の配置）
---------------------------------------- */

/* Justify Self
---------------------------------------- */
.justify-self-start { justify-self: start; }
.justify-self-center { justify-self: center; }
.justify-self-end { justify-self: end; }
.justify-self-stretch { justify-self: stretch; }

/* Align Self
---------------------------------------- */
.align-self-start { align-self: start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: end; }
.align-self-stretch { align-self: stretch; }

/* Place Self
---------------------------------------- */
.place-self-start { place-self: start; }
.place-self-center { place-self: center; }
.place-self-end { place-self: end; }
.place-self-stretch { place-self: stretch; }

/* ----------------------------------------
- Grid Flow（要素の配置方向）
---------------------------------------- */
.grid_flow-row { grid-auto-flow: row; }
.grid_flow-col { grid-auto-flow: column; }
.grid_flow-dense { grid-auto-flow: dense; }
.grid_flow-row-dense { grid-auto-flow: row dense; }
.grid_flow-col-dense { grid-auto-flow: column dense; }

/* ----------------------------------------
- Auto Columns/Rows（自動生成される列・行のサイズ）
---------------------------------------- */
.auto-cols-auto { grid-auto-columns: auto; }
.auto-cols-min { grid-auto-columns: min-content; }
.auto-cols-max { grid-auto-columns: max-content; }
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

.auto-rows-auto { grid-auto-rows: auto; }
.auto-rows-min { grid-auto-rows: min-content; }
.auto-rows-max { grid-auto-rows: max-content; }
.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

/* ----------------------------------------
- タブレット用（~1020px）
---------------------------------------- */
@media screen and (max-width: 1200px) {
  .grid_col-1-tb { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid_col-2-tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid_col-3-tb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid_col-4-tb { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid_col-5-tb { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid_col-6-tb { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* 子要素の列占有 */
  .grid-child_col-1-tb { grid-column: span 1 / span 1; }
  .grid-child_col-2-tb { grid-column: span 2 / span 2; }
  .grid-child_col-3-tb { grid-column: span 3 / span 3; }
  .grid-child_col-4-tb { grid-column: span 4 / span 4; }
  .grid-child_col-5-tb { grid-column: span 5 / span 5; }
  .grid-child_col-6-tb { grid-column: span 6 / span 6; }
  .grid-child_col-full-tb { grid-column: 1 / -1; }


  .grid_gap-0px-tb  { gap: 0; }
  .grid_gap-5px-tb  { gap: 5px; }
  .grid_gap-10px-tb { gap: 10px; }
  .grid_gap-15px-tb { gap: 15px; }
  .grid_gap-20px-tb { gap: 20px; }
  .grid_gap-25px-tb { gap: 25px; }
  .grid_gap-30px-tb { gap: 30px; }
  .grid_gap-35px-tb { gap: 35px; }
  .grid_gap-40px-tb { gap: 40px; }
  .grid_gap-45px-tb { gap: 45px; }
  .grid_gap-50px-tb { gap: 50px; }


  /* Alignment */
  .place-items-center-tb { place-items: center; }
  .place-items-start-tb { place-items: start; }
  .place-items-end-tb { place-items: end; }
}

/* ----------------------------------------
- スマホ用（~767px）
---------------------------------------- */
@media screen and (max-width: 767px) {
  .grid_col-1-sp { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid_col-2-sp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid_col-3-sp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid_col-4-sp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid_col-5-sp { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid_col-6-sp { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* 子要素の列占有 */
  .grid-child_col-1-sp { grid-column: span 1 / span 1; }
  .grid-child_col-2-sp { grid-column: span 2 / span 2; }
  .grid-child_col-3-sp { grid-column: span 3 / span 3; }
  .grid-child_col-4-sp { grid-column: span 4 / span 4; }
  .grid-child_col-5-sp { grid-column: span 5 / span 5; }
  .grid-child_col-6-sp { grid-column: span 6 / span 6; }
  .grid-child_col-full-sp { grid-column: 1 / -1; }

  /* Gap */
  .grid_gap-none-sp  { gap: unset; }
  .grid_gap-0-sp  { gap: 0; }
  .grid_gap-5-sp  { gap: clamp(5px, 0.298vw, 5px); }
  .grid_gap-10-sp { gap: clamp(5px, 0.595vw, 10px); }
  .grid_gap-15-sp { gap: clamp(10px, 0.893vw, 15px); }
  .grid_gap-20-sp { gap: clamp(10px, 1.190vw, 20px); }
  .grid_gap-25-sp { gap: clamp(10px, 1.488vw, 25px); }
  .grid_gap-30-sp { gap: clamp(15px, 1.786vw, 30px); }
  .grid_gap-35-sp { gap: clamp(15px, 2.083vw, 35px); }
  .grid_gap-40-sp { gap: clamp(20px, 2.381vw, 40px); }
  .grid_gap-45-sp { gap: clamp(20px, 2.679vw, 45px); }
  .grid_gap-50-sp { gap: clamp(25px, 2.976vw, 50px); }
  .grid_gap-80-sp { gap: clamp(40px, 4.762vw, 80px); }


  .grid_gap-0px-sp  { gap: 0; }
  .grid_gap-5px-sp  { gap: 5px; }
  .grid_gap-10px-sp { gap: 10px; }
  .grid_gap-15px-sp { gap: 15px; }
  .grid_gap-20px-sp { gap: 20px; }
  .grid_gap-25px-sp { gap: 25px; }
  .grid_gap-30px-sp { gap: 30px; }
  .grid_gap-35px-sp { gap: 35px; }
  .grid_gap-40px-sp { gap: 40px; }
  .grid_gap-45px-sp { gap: 45px; }
  .grid_gap-50px-sp { gap: 50px; }

  /* Row Gap */
  .grid_row-gap-1-sp { row-gap: 1rem; }
  .grid_row-gap-2-sp { row-gap: 2rem; }
  .grid_row-gap-16px-sp { row-gap: 16px; }
  .grid_row-gap-24px-sp { row-gap: 24px; }

  /* Column Gap */
  .grid-child_col-gap-1-sp { column-gap: 1rem; }
  .grid-child_col-gap-2-sp { column-gap: 2rem; }
  .grid-child_col-gap-16px-sp { column-gap: 16px; }
  .grid-child_col-gap-24px-sp { column-gap: 24px; }

  /* Alignment */
  .place-items-center-sp { place-items: center; }
  .place-items-start-sp { place-items: start; }
  .place-items-end-sp { place-items: end; }
  
  .align-items-start-sp { align-items: start; }
  .align-items-center-sp { align-items: center; }
  .align-items-end-sp { align-items: end; }

  /* 列の開始位置（SP） */
  .grid-child_col-start-1-sp { grid-column-start: 1; }
  .grid-child_col-start-2-sp { grid-column-start: 2; }
  .grid-child_col-start-auto-sp { grid-column-start: auto; }
}