@charset "UTF-8";

/* ========================================
  layout.css
  レイアウト用（グリッド・ラッパー）
  PCファースト / SPは767px以下で調整
======================================== */

/* ------------------------------
  1. ページ全体のラッパー
------------------------------ */
.l-container {
  max-width: 1312px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.l-main {
  min-height: 60vh;
  /* padding-top: 32px; */
  padding-top: 142px;
  padding-bottom: 32px;
}

.l-section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.l-main .l-section:last-of-type {
  padding-bottom: 120px;
}

.l-main .l-section:has(+ .l-section.p-related-section:last-of-type) {
  padding-bottom: 120px;
}

.l-main .l-section.p-related-section:last-of-type {
  padding-bottom: 64px;
}

.l-section.bg-wave,
.l-section.bg-gradient-blue {
  padding-top: 120px;
  padding-bottom: 180px;
}

/* ------------------------------
  2. グリッドシステム
------------------------------ */
.l-row {
  display: flex;
  flex-wrap: wrap;
}

.l-col {
  flex: 1 1 0%;
}

.l-row--2 > .l-col {
  flex: 0 0 calc((100% - 24px) / 2);
  max-width: calc((100% - 24px) / 2);
}

.l-row--3 > .l-col {
  flex: 0 0 calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}

.l-row--4 > .l-col {
  flex: 0 0 calc((100% - 72px) / 4);
  max-width: calc((100% - 72px) / 4);
}

.l-row--5 > .l-col {
  flex: 0 0 calc((100% - 96px) / 5);
  max-width: calc((100% - 96px) / 5);
}

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

.flex-col {
  flex-direction: column;
}

.l-flex-top-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.l-flex-top-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.l-flex-top-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.l-flex-center-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.l-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.l-flex-center-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.l-flex-bottom-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.l-flex-bottom-center {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.l-flex-bottom-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* gap（Flex / Grid 用） */
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }
.gap-7 { gap: 28px; }
.gap-8 { gap: 32px; }
.gap-9 { gap: 36px; }
.gap-10 { gap: 40px; }
.gap-11 { gap: 44px; }
.gap-12 { gap: 48px; }
.gap-13 { gap: 52px; }
.gap-14 { gap: 56px; }
.gap-15 { gap: 60px; }
.gap-16 { gap: 64px; }
.gap-17 { gap: 68px; }
.gap-18 { gap: 72px; }
.gap-19 { gap: 76px; }
.gap-20 { gap: 80px; }
.gap-21 { gap: 84px; }
.gap-22 { gap: 88px; }
.gap-23 { gap: 92px; }
.gap-24 { gap: 96px; }
.gap-25 { gap: 100px; }

/* ------------------------------
  3. レスポンシブ（SP / 767px以下）
------------------------------ */
@media screen and (max-width: 767px) {
  .l-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .l-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .l-main {
    padding-top: 80px;
  }
  .l-main .l-section:last-of-type {
    padding-bottom: 64px;
  }
  .l-main .l-section:has(+ .l-section.p-related-section:last-of-type) {
    padding-bottom: 64px;
  }
  .l-main .l-section.p-related-section:last-of-type{
      padding-bottom: 56px;
  }
  .l-section.bg-wave,
  .l-section.bg-gradient-blue {
    padding-top: 80px;
    padding-bottom: 120px;
  }
  .l-col,
  .l-row--2 > .l-col,
  .l-row--3 > .l-col,
  .l-row--4 > .l-col,
  .l-row--5 > .l-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

/* gap */
  .gap-1 { gap: 2px; }
  .gap-2 { gap: 4px; }
  .gap-3 { gap: 6px; }
  .gap-4 { gap: 8px; }
  .gap-5 { gap: 10px; }
  .gap-6 { gap: 12px; }
  .gap-7 { gap: 14px; }
  .gap-8 { gap: 16px; }
  .gap-9 { gap: 18px; }
  .gap-10 { gap: 20px; }
  .gap-11 { gap: 22px; }
  .gap-12 { gap: 24px; }
  .gap-13 { gap: 26px; }
  .gap-14 { gap: 28px; }
  .gap-15 { gap: 30px; }
  .gap-16 { gap: 32px; }
  .gap-17 { gap: 34px; }
  .gap-18 { gap: 36px; }
  .gap-19 { gap: 38px; }
  .gap-20 { gap: 40px; }
  .gap-21 { gap: 42px; }
  .gap-22 { gap: 44px; }
  .gap-23 { gap: 46px; }
  .gap-24 { gap: 48px; }
  .gap-25 { gap: 50px; }

  /* SPレイアウトの際、PCの半分以外のレイアウトにしたい際に使用 */
  .sp-gap-1 { gap: 2px; }
  .sp-gap-2 { gap: 4px; }
  .sp-gap-3 { gap: 6px; }
  .sp-gap-4 { gap: 8px; }
  .sp-gap-5 { gap: 10px; }
  .sp-gap-6 { gap: 12px; }
  .sp-gap-7 { gap: 14px; }
  .sp-gap-8 { gap: 16px; }
  .sp-gap-9 { gap: 18px; }
  .sp-gap-10 { gap: 20px; }
  .sp-gap-11 { gap: 22px; }
  .sp-gap-12 { gap: 24px; }
  .sp-gap-13 { gap: 26px; }
  .sp-gap-14 { gap: 28px; }
  .sp-gap-15 { gap: 30px; }
  .sp-gap-16 { gap: 32px; }
  .sp-gap-17 { gap: 34px; }
  .sp-gap-18 { gap: 36px; }
  .sp-gap-19 { gap: 38px; }
  .sp-gap-20 { gap: 40px; }
  .sp-gap-21 { gap: 42px; }
  .sp-gap-22 { gap: 44px; }
  .sp-gap-23 { gap: 46px; }
  .sp-gap-24 { gap: 48px; }
  .sp-gap-25 { gap: 50px; }
}