@charset "utf-8";
/* ===================================
   レスポンシブ表示制御クラス
   PC: 1201px以上
   SP: 1200px以下
   ※モバイルファースト設計
=================================== */

/* SP表示用（ベース = 表示） */
.show-sp {
  display: block !important;
}

.show-sp-inline {
  display: inline !important;
}

.show-sp-inline-block {
  display: inline-block !important;
}

.show-sp-flex {
  display: flex !important;
}

.show-sp-inline-flex {
  display: inline-flex !important;
}

.show-sp-grid {
  display: grid !important;
}

.show-sp-table {
  display: table !important;
}

.show-sp-table-row {
  display: table-row !important;
}

.show-sp-table-cell {
  display: table-cell !important;
}

/* PC表示用（ベース = 非表示） */
.show-pc,
.show-pc-inline,
.show-pc-inline-block,
.show-pc-flex,
.show-pc-inline-flex,
.show-pc-grid,
.show-pc-table,
.show-pc-table-row,
.show-pc-table-cell {
  display: none !important;
}

/* 非表示クラス */
.hide-sp {
  display: none !important;
}

.hide-pc {
  display: block !important;
}

/* ===================================
   PC範囲 (1201px以上)
=================================== */
@media (min-width: 1201px) {

  /* SP用を非表示 */
  .show-sp,
  .show-sp-inline,
  .show-sp-inline-block,
  .show-sp-flex,
  .show-sp-inline-flex,
  .show-sp-grid,
  .show-sp-table,
  .show-sp-table-row,
  .show-sp-table-cell {
    display: none !important;
  }

  /* PC用を表示 */
  .show-pc {
    display: block !important;
  }

  .show-pc-inline {
    display: inline !important;
  }

  .show-pc-inline-block {
    display: inline-block !important;
  }

  .show-pc-flex {
    display: flex !important;
  }

  .show-pc-inline-flex {
    display: inline-flex !important;
  }

  .show-pc-grid {
    display: grid !important;
  }

  .show-pc-table {
    display: table !important;
  }

  .show-pc-table-row {
    display: table-row !important;
  }

  .show-pc-table-cell {
    display: table-cell !important;
  }

  /* 非表示制御 */
  .hide-pc {
    display: none !important;
  }

  .hide-sp {
    display: block !important;
  }
}

/* ---------------------------
    スキップリンク（アクセシビリティ）
----------------------------- */
.skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-main);
  color: var(--color-light);
  padding: 1rem 2rem;
  border-radius: 0 0 1rem 1rem;
  z-index: 10000;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.3s ease;
  pointer-events: none;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-light);
  outline-offset: 2px;
  pointer-events: auto;
}
@media screen and (max-width: 1024px) {
  .skip-link {
  display: none;
  }
}
/* ---------------------------
    基本設定
----------------------------- */
html {
  font-size: 2.5641025641vw !important;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 1201px) {
  html {
    font-size: 10px !important;
  }
}

/* ===================================
    CSS変数（カスタムプロパティ）
=================================== */
:root {
  /* カラー */
  --color-main: #F62022;
  --color-light: #FFFCE3;
  --color-dark: #2C2C2C;
  --color-text: #460A0A;
  --color-bg: #ffffff;
  /* フォント */
  --font-main: "Zen Maru Gothic", sans-serif;
  --font-en: "Changa One", sans-serif;
  --font-noto: "Noto Sans JP", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* サイズ */
  --container-width: 980px;
  --container-padding: 7rem;

  /* 余白 */
  --spacing-xs: 0.8rem;
  --spacing-sm: 1.6rem;
  --spacing-md: 2.4rem;
  --spacing-lg: 3.2rem;
  --spacing-xl: 4.8rem;
  --spacing-xxl: 6.4rem;

  /* トランジション */
  --transition-fast: 0.2s ease;
  --transition-base: 0.4s ease;
  --transition-slow: 0.5s ease;
}

/* ===================================
    body設定
=================================== */
body {
  font-family: var(--font-main);
  font-size: 1.4rem;
  line-height: 1.65;
  letter-spacing: 0.07rem;
  color: var(--color-text);
  background-color: var(--color-main);
  width: 100%;
  overflow-x: hidden;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
}

@media (min-width: 1201px) {
  body {
    font-size: 1.6rem;
    line-height: normal;
    letter-spacing: normal;
  }
}

/* ===================================
    ユーティリティクラス
=================================== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.font-en {
  font-family: var(--font-en);
}

.contents-hidden {
  display: none;
}

/* -------------------------------
  pcナビゲーションと全体レイアウト
---------------------------------*/
.page__inner {
  position: relative;
  display: block;
}

.page__left {
  display: none;
}

.page__right {
  position: fixed;
  width: 100%;
  height: 100lvh;
  overflow-y: scroll;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--color-main);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page__right.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page__right-inner {
  padding: 10rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.page__right-img {
  width: 80%;
  margin: 0 auto;
}

/* ナビゲーション */
.nav {
  width: 80%;
}

.nav__list--top {
  background: var(--color-light);
  border-radius: 1rem;
  padding: 1.1rem 2.2rem;
}

.nav__list--top li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1.7rem 0;
  color: var(--color-main);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 0.042rem;
  border-bottom: 1px solid var(--color-main);
}

.nav__list--top li:last-child a {
  border-bottom: none;
}

.nav__list--top li a::after {
  content: '';
  display: block;
  width: 0.9rem;
  height: 1.2rem;
  background-color: #F62022;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: var(--transition-base);
}

.nav__list--top li a:hover::after {
  transform: translateX(0.5rem);
}

.nav__list--bottom {
  margin-top: 5.7rem;
  position: relative;
}

.nav__list--bottom::after {
  content: '';
  position: absolute;
  bottom: -10.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.8rem;
  height: 10rem;
  background: var(--color-light);
}

.nav__list--bottom li {
  position: relative;
}

.nav__list--bottom li:first-child:after {
  content: '';
  position: absolute;
  top: -2.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.8rem;
  height: 2rem;
  background: var(--color-light);
  border-radius: 2rem 2rem 0 0;
}

.nav__list--bottom li:nth-child(2):after {
  content: '';
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.8rem;
  height: 1.9rem;
  background: var(--color-light);
}

.nav__list--bottom li a {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--color-light);
  color: var(--color-main);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: 0.075rem;
  padding: 1.8rem 3rem 1.8rem 2.2rem;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 57' preserveAspectRatio='none'%3E%3Cpath d='M189.8 1.5C192.889 1.50004 195.849 2.74308 198.012 4.94922L216.64 23.9502C219.118 26.4778 219.118 30.5242 216.64 33.0518L198.012 52.0508C195.849 54.2568 192.889 55.5 189.8 55.5L13 55.501C6.64875 55.501 1.50004 50.3522 1.5 44.001V13.001C1.5 6.64972 6.64875 1.50101 13 1.50098L189.8 1.5Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 57' preserveAspectRatio='none'%3E%3Cpath d='M189.8 1.5C192.889 1.50004 195.849 2.74308 198.012 4.94922L216.64 23.9502C219.118 26.4778 219.118 30.5242 216.64 33.0518L198.012 52.0508C195.849 54.2568 192.889 55.5 189.8 55.5L13 55.501C6.64875 55.501 1.50004 50.3522 1.5 44.001V13.001C1.5 6.64972 6.64875 1.50101 13 1.50098L189.8 1.5Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  transition: var(--transition-base);
}

.nav__list--bottom li:first-child a {
  margin-top: 0;
}

.nav__list--bottom li a::after {
  content: '';
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  background-image: url(../images/common/iconArrow01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transition: var(--transition-base);
  margin-left: auto;
}

.nav__list--bottom li a:hover::after {
  transform: translateX(0.5rem);
}

.nav__icon {
  width: 2.9rem;
  height: auto;
}

.nav__icon svg {
  width: 100%;
  height: auto;
}

/* 道路の車線 */
.road-center {
  background: var(--color-main);
  position: relative;
}

/* 道路の車線（sticky版） */
.road-sticky-lines {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  pointer-events: none;
  z-index: -1;
  margin-bottom: -100vh;
}

.road-sticky-center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.1rem;
  height: 100%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='35' viewBox='0 0 11 35' fill='none'%3E%3Cpath d='M10.1138 34.3928C9.08379 35.6128 8.54377 34.4128 6.94377 34.4128C5.34377 34.4128 5.34378 34.4528 3.74378 34.4528C2.14378 34.4528 1.58378 35.6328 0.553775 34.4128C-0.666225 32.9828 0.523777 32.5328 0.523777 30.6528C0.523777 28.7728 0.523777 28.7728 0.523777 26.8928C0.523777 25.0128 0.513767 25.0128 0.513767 23.1328C0.513767 21.2528 0.523777 21.2528 0.523777 19.3728C0.523777 17.4928 0.533771 17.4928 0.533771 15.6128C0.533771 13.7328 0.583774 13.7328 0.583774 11.8528C0.583774 9.97279 0.533771 9.97279 0.533771 8.09279C0.533771 6.21279 0.483768 6.2028 0.483768 4.32279C0.483768 2.44279 -0.65623 2.00279 0.56377 0.562793C1.59377 -0.657207 2.14378 0.532794 3.74378 0.532794C5.34378 0.532794 5.34377 0.51279 6.94377 0.51279C8.54377 0.51279 9.10379 -0.667209 10.1438 0.552791C11.3638 1.98279 10.0938 2.43279 10.0938 4.31279C10.0938 6.19279 10.1438 6.19279 10.1438 8.07279C10.1438 9.9528 10.1438 9.95279 10.1438 11.8328C10.1438 13.7128 10.1738 13.7128 10.1738 15.5928C10.1738 17.4728 10.1738 17.4728 10.1738 19.3528C10.1738 21.2328 10.1138 21.2328 10.1138 23.1128C10.1138 24.9928 10.1638 24.9928 10.1638 26.8728C10.1638 28.7528 9.73377 28.8028 10.0938 30.6528C10.4738 32.5928 11.3338 32.9528 10.1138 34.3928Z' fill='%23FFFCE3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='35' viewBox='0 0 11 35' fill='none'%3E%3Cpath d='M10.1138 34.3928C9.08379 35.6128 8.54377 34.4128 6.94377 34.4128C5.34377 34.4128 5.34378 34.4528 3.74378 34.4528C2.14378 34.4528 1.58378 35.6328 0.553775 34.4128C-0.666225 32.9828 0.523777 32.5328 0.523777 30.6528C0.523777 28.7728 0.523777 28.7728 0.523777 26.8928C0.523777 25.0128 0.513767 25.0128 0.513767 23.1328C0.513767 21.2528 0.523777 21.2528 0.523777 19.3728C0.523777 17.4928 0.533771 17.4928 0.533771 15.6128C0.533771 13.7328 0.583774 13.7328 0.583774 11.8528C0.583774 9.97278 0.533771 9.97279 0.533771 8.09279C0.533771 6.21279 0.483768 6.20278 0.483768 4.32278C0.483768 2.44278 -0.65623 2.00279 0.56377 0.562787C1.59377 -0.657213 2.14378 0.532789 3.74378 0.532789C5.34378 0.532789 5.34377 0.512784 6.94377 0.512784C8.54377 0.512784 9.10379 -0.667207 10.1438 0.552793C11.3638 1.98279 10.0938 2.43279 10.0938 4.31279C10.0938 6.19279 10.1438 6.19278 10.1438 8.07278C10.1438 9.95278 10.1438 9.95279 10.1438 11.8328C10.1438 13.7128 10.1738 13.7128 10.1738 15.5928C10.1738 17.4728 10.1738 17.4728 10.1738 19.3528C10.1738 21.2328 10.1138 21.2328 10.1138 23.1128C10.1138 24.9928 10.1638 24.9928 10.1638 26.8728C10.1638 28.7528 9.73377 28.8028 10.0938 30.6528C10.4738 32.5928 11.3338 32.9528 10.1138 34.3928Z' fill='%23FFFCE3'/%3E%3Cpath d='M10.6037 18.4026C9.94371 18.3326 9.12372 18.9626 8.93372 19.6926C9.04372 19.8326 9.19371 20.1626 9.31371 20.1426C9.87371 20.0726 10.4437 19.9726 10.9437 19.7326C11.1037 19.6626 11.1237 19.1326 11.0737 18.8426C11.0437 18.6726 10.7837 18.4126 10.6137 18.3926L10.6037 18.4026Z' fill='%23F62022'/%3E%3Cpath d='M8.58341 15.5229C8.65341 15.6429 8.87341 15.7529 8.99341 15.7329C9.31341 15.6629 9.7034 15.5929 9.9034 15.3829C10.6934 14.5429 11.3134 13.5429 12.4334 13.0629C12.4834 13.0429 12.4934 12.7128 12.4234 12.6228C12.2734 12.4428 12.0434 12.3329 11.8934 12.2229C11.7434 12.2229 11.6334 12.1829 11.5834 12.2229C10.5734 13.1629 9.56342 14.1029 8.57342 15.0629C8.49342 15.1429 8.51341 15.4029 8.58341 15.5229Z' fill='%23F62022'/%3E%3Cpath d='M8.88328 27.4425C8.41328 27.3825 7.92328 27.4825 7.44328 27.5225C7.34328 27.0625 7.17328 26.6125 7.17328 26.1525C7.17328 25.2925 6.93328 25.8225 6.59328 25.9325C6.29328 26.0225 5.64328 25.8725 5.58328 25.6925C5.32328 24.8525 5.17328 23.9725 5.08328 23.0925C5.07328 22.9425 5.56328 22.5925 5.81328 22.6125C6.38328 22.6425 6.94327 22.8725 7.51327 22.9325C7.82327 22.9625 8.25328 22.8825 8.42328 22.6825C8.57328 22.5125 8.44328 22.0825 8.39328 21.7725C8.33328 21.3725 8.46327 21.0025 8.84328 21.3325C9.92327 22.2625 11.2333 21.7325 12.4033 22.0125C13.2833 23.2225 13.3433 24.3025 12.1133 25.4525C11.5433 25.9825 11.2533 26.8525 10.9733 27.6125C10.7733 28.1525 11.0533 28.5625 11.7433 28.5625C12.4833 28.5625 13.2333 28.5825 13.9733 28.6625C14.1133 28.6725 14.2633 28.9925 14.3033 29.1925C14.3233 29.2825 14.1433 29.4925 14.0133 29.5425C13.7933 29.6225 13.5233 29.5825 13.2933 29.6525C12.4533 29.9025 11.3733 30.6125 10.8533 30.3225C10.2633 29.9925 10.2433 28.7325 9.85328 27.9425C9.71328 27.6725 9.22328 27.4825 8.86328 27.4325L8.88328 27.4425Z' fill='%23F62022'/%3E%3Cpath d='M10.5233 24.4125C10.5333 24.1325 10.1833 23.6724 9.89334 23.5624C9.38334 23.3824 8.74332 24.0825 8.65332 24.8825C8.76332 25.0025 8.88332 25.2624 9.06332 25.3124C9.72332 25.5124 10.4833 25.0724 10.5233 24.4024V24.4125Z' fill='%23F62022'/%3E%3Cpath d='M7.52388 9.69238C7.20388 9.91238 6.62388 10.1324 6.61388 10.3624C6.59388 10.9924 6.78388 11.6324 6.97388 12.2424C7.01388 12.3924 7.51388 12.5624 7.55388 12.5124C7.73388 12.3124 7.94387 12.0024 7.90387 11.7824C7.81387 11.3324 7.56388 10.9224 7.38388 10.4924C7.48388 10.4724 7.58389 10.4424 7.68389 10.4224C7.63389 10.1824 7.57388 9.93238 7.52388 9.69238Z' fill='%23F62022'/%3E%3C/svg%3E");
  background-position: 0 0, 0 5.5rem;
  background-size: 1.1rem 11rem;
  background-repeat: repeat-y;
}

.road-sticky-left,
.road-sticky-right {
  position: absolute;
  top: 0;
  width: 1.2rem;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='100' viewBox='0 0 12 100' fill='none'%3E%3Cpath d='M10.32 99.78C9.26 100.98 8.77 99.96 7.17 99.96C5.57 99.96 5.57 99.18 3.97 99.18C2.37 99.18 1.66 101.17 0.59 99.98C-0.61 98.64 1.34 98.02 1.34 96.23C1.34 94.44 0.63 94.43 0.63 92.63C0.63 90.83 1.07 90.83 1.07 89.03C1.07 87.23 0.78 87.23 0.78 85.43C0.78 83.63 0.59 83.63 0.59 81.83C0.59 80.03 1.03 80.03 1.03 78.23C1.03 76.43 1.37 76.43 1.37 74.63C1.37 72.83 0.44 72.83 0.44 71.03C0.44 69.23 1.54 69.23 1.54 67.43C1.54 65.63 0.2 65.63 0.2 63.83C0.2 62.03 0.29 62.03 0.29 60.23C0.29 58.43 0.9 58.43 0.9 56.63C0.9 54.83 1.16 54.83 1.16 53.03C1.16 51.23 0.12 51.23 0.12 49.43C0.12 47.63 0.86 47.63 0.86 45.83C0.86 44.03 1.48 44.03 1.48 42.23C1.48 40.43 1.48 40.43 1.48 38.63C1.48 36.83 0.05 36.83 0.05 35.03C0.05 33.23 1.14 33.23 1.14 31.43C1.14 29.63 0.43 29.63 0.43 27.83C0.43 26.03 1.15 26.03 1.15 24.23C1.15 22.43 0.32 22.43 0.32 20.63C0.32 18.83 0.77 18.83 0.77 17.03C0.77 15.23 0.54 15.23 0.54 13.43C0.54 11.63 1.5 11.63 1.5 9.83C1.5 8.03 0.22 8.03 0.22 6.23C0.22 4.43 0.07 4.43 0.07 2.63C0.07 0.83 -0.68 1.38 0.51 0.02C1.57 -1.18 2.39 -0.44 3.98 -0.44C5.57 -0.44 5.58 -0.44 7.18 -0.44C8.78 -0.44 9.66 -1.24 10.73 -0.04C11.93 1.3 10.38 2.07 10.38 3.87C10.38 5.67 10.8 5.67 10.8 7.47C10.8 9.27 10.43 9.27 10.43 11.07C10.43 12.87 10.99 12.87 10.99 14.67C10.99 16.47 11.01 16.47 11.01 18.27C11.01 20.07 9.79 20.07 9.79 21.87C9.79 23.67 11.07 23.67 11.07 25.47C11.07 27.27 9.7 27.27 9.7 29.07C9.7 30.87 10.95 30.87 10.95 32.67C10.95 34.47 9.93 34.47 9.93 36.27C9.93 38.07 10.09 38.07 10.09 39.87C10.09 41.67 9.77 41.67 9.77 43.47C9.77 45.27 9.77 45.27 9.77 47.07C9.77 48.87 10.03 48.87 10.03 50.67C10.03 52.47 10.68 52.47 10.68 54.27C10.68 56.07 10.86 56.07 10.86 57.87C10.86 59.67 9.97 59.67 9.97 61.47C9.97 63.27 10.99 63.27 10.99 65.07C10.99 66.87 10.13 66.87 10.13 68.67C10.13 70.47 9.83 70.47 9.83 72.27C9.83 74.07 10.6 74.07 10.6 75.87C10.6 77.67 9.65 77.67 9.65 79.47C9.65 81.27 10.46 81.27 10.46 83.07C10.46 84.87 10.88 84.87 10.88 86.67C10.88 88.47 10.87 88.47 10.87 90.27C10.87 92.07 10.82 92.07 10.82 93.87C10.82 95.67 10.13 95.67 10.13 97.47C10.13 99.27 10.18 99.27 10.32 99.78Z' fill='%23FFFCE3'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 1.2rem auto;
}

.road-sticky-left {
  left: -2.5rem;
}

.road-sticky-right {
  right: -2.5rem;
  transform: scaleX(-1);
}

@media (min-width: 1201px) {
  .road-sticky-left {
    left: -3rem;
  }

  .road-sticky-right {
    right: -3rem;
  }
}

/* ===================================
   SPヘッダー（ベース）
=================================== */
.page__left {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 100;
}

.page__left-title,
.page__left-item {
  display: none;
}

.header {
  padding: 1.3rem 1.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.7rem;
}

.header__inner {
  flex: 1;
  padding: 0.8rem 0.5rem;
  background: var(--color-light);
  border-radius: 10rem;
}

.header__logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  transition: var(--transition-base);
  max-width: 450px;
  margin: 0 auto;
}

.header__logo-wrapper:hover {
  opacity: 0.5;
}

.header__logo {
  width: 12.2rem;
  display: flex;
  align-items: center;
}

.header__tab {
  max-width: 175px;
  height: 1.6rem;
  line-height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-main);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.022rem;
  border-left: 2px solid var(--color-main);
  padding-left: 0.9rem;
}

@media screen and (max-width:1200px) {
  .header__logo-wrapper {
    max-width: 600px;
  }
  .header__tab {
    max-width: 100%;
  }

}

.hamburger {
  display: block;
  margin-left: auto;
}

.hamburger svg {
  width: 6.4rem;
  height: 3.1rem;
}

/* ハンバーガー→×アニメーション */
.hamburger svg path {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* 上の線：回転して×の一部に */
.hamburger.is-active svg path:nth-of-type(1) {
  transform: translate(-3px, 4.5px) rotate(45deg);
}

/* 中央の線：非表示 */
.hamburger.is-active svg path:nth-of-type(2) {
  opacity: 0;
}

/* 下の線：回転して×の一部に */
.hamburger.is-active svg path:nth-of-type(3) {
  transform: translate(-3px, -2.5px) rotate(-45deg);
}

.page__main {
  margin-top: 6rem;
}

.fixed-buttons {
  position: fixed;
  z-index: 80;
  bottom: 2rem;
  left: 0;
  width: 100%;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fixed-buttons.hide {
  opacity: 0;
  visibility: hidden;
}


.fixed-buttons a {
  width: 100%;
  display: block;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  line-height: 1.35;
  background: var(--color-light);
  color: var(--color-main);
  border-radius: 1rem;
  height: 3.8rem;
  padding: 0 1.1rem 0 1.4rem;
}

.fixed-buttons a:nth-child(1) {
  font-size: 1.5rem;
  letter-spacing: 0.075rem;
}

.fixed-buttons a:nth-child(2) {
  font-size: 1.4rem;
  letter-spacing: 0.07rem;
}
.fixed-buttons a svg{
  width: 1.9rem;
  height: 1.9rem;
}

.fixed-buttons a::after {
  content: '';
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url(../images/common/iconArrow01.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transition: var(--transition-base);
  margin-left: auto;
}

@media (min-width: 1201px) {
  .fixed-buttons {
    display: none;
  }
}

.section__bottom {
  margin-top: 7rem;
  width: 100%;
  border-radius: 2rem;
  background: var(--color-light);
  padding: 4rem 3.5rem;
  filter: drop-shadow(0 2.5rem 0 rgba(159, 2, 2, 0.30));
}

.section__bottom a {
  margin-top: 2.4rem;
}

.section__bottom-heading {
  color: var(--color-light);
  text-align: center;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.021rem;
}

.section__bottom img {
  display: block;
  margin: 0 auto;
  margin-bottom: 3.4rem;
}

@media (min-width: 1201px) {
  .section__bottom {
    padding: 5rem 5.7rem;

  }

  .section__bottom img {
    max-width: 300px;
  }
}

/* ===================================
   フッター
=================================== */
.footer {
  position: relative;
  z-index: 2;
  margin-top: -14rem;
  padding-top: 5rem;
}

.footer__contents {
  width: 100%;
  background-image: url(../images/common/imgCar.webp);
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio: 511 / 582;
  display: flex;
  align-items: end;
  justify-content: center;
}

.footer__contents>div {
  width: 100%;
  background: var(--color-light);
  padding: 4.2rem 2rem;
}

@media (min-width: 1201px) {

  .footer__contents>div {
    width: fit-content;
    background: var(--color-light);
    padding: 3.3rem 0.8rem 0.5rem;
  }
}

.footer__contents a {
  transition: var(--transition-base);
}

.footer__contents a:hover {
  opacity: 0.6;
}

.footer__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.footer__logo img {
  width: 23.2rem;
}

.footer__logo span {
  width: fit-content;
  color: var(--color-light);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.75;
  letter-spacing: 0.016rem;
  padding: 0 2.7rem;
  background: var(--color-main);
  border-radius: 5rem;
}


.footer__nav {
  margin-top: 2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--color-main);
}

.footer__nav-top {
  display: block;
  margin-top: 1.6rem;
}

@media (min-width: 1201px) {
  .footer__nav-top {
    display: none;
  }
}

.footer__nav-top li a {
  position: relative;
  display: block;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--color-main);
  color: var(--color-main);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 0.042rem;
}

.footer__nav-top li a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.3rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent var(--color-main);
}

.footer__nav-top li:last-child a {
  border-bottom: none;
}

.footer__nav-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  flex-direction: column;
  align-items: start;
  gap: 0.8rem;
  padding-bottom: 1rem;
}

@media (min-width: 1201px) {
  .footer__nav-bottom {
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding-bottom: 0;
  }
}

.footer__nav-bottom li a {
  padding: 0;
  color: var(--color-main);
  font-size: 1.3rem;
  font-weight: 500;
  border: none;
  transition: var(--transition-base);
}

@media (min-width: 1201px) {
  .footer__nav-bottom li a {
    padding: 0 0.8rem;
    border-right: 1px solid var(--color-main);
  }

  .footer__nav-bottom li:first-child a {
    padding-left: 0;
  }

  .footer__nav-bottom li:last-child a {
    padding-right: 0;
    border: none;
  }
}

.footer__copy {
  text-align: center;
  color: var(--color-main);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2.58;
  margin-top: 0.8rem;
}

/* ===================================
  共通パーツ
=================================== */
.section__wrapper {
  margin-top: -3rem;
  padding: 0 3.5rem 16rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 1201px) {
  .section__wrapper {
    padding: 3rem 4.5rem 16rem;
  }
}

/* ページヘッダー */
.page__header {
  position: relative;
  z-index: 2;
  width: 96%;
  margin: 0 auto;
  padding: 4.5rem 2.5rem 5rem;
  background: var(--color-light);
  filter: drop-shadow(0 2.5rem 0 rgba(159, 2, 2, 0.30));
  border-radius: 2rem;
}

@media (min-width: 1201px) {
  .page__header {
    width: 100%;
    padding: 4.5rem 3rem 5rem;
  }
}

.page__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

@media (min-width: 1201px) {
  .page__title {
    gap: 1.2rem;
  }
}

.page__title .en {
  color: var(--color-main);
  text-align: center;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: 0.12rem;
}

.page__title img {
  margin-top: 1.2rem;
}

[data-page="about"] .page__title img {
  width: 80%;
}

[data-page="people"] .page__title img {
  width: 70.4%;
}

[data-page="work"] .page__title img {
  width: 46.4%;
}

[data-page="requirements"] .page__title img {
  width: 40%;
}

[data-page="not-found"] .page__title img {
  width: 44.6%;
}

[data-page="entry"] .page__title img {
  width: 46%;
}

.page__text {
  margin-top: 2rem;
  color: var(--color-main);
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.07rem;
}

@media (min-width: 1201px) {
  .page__text {
    font-size: 1.6rem;
    line-height: 2.12;
    letter-spacing: 0.08rem;
  }
}

/* セクションカード */
.section__card {
  margin-top: 5rem;
  padding: 3rem 2rem;
  border-radius: 2rem;
  background: var(--color-light);
  overflow: clip;
  box-shadow: 0 2.5rem 0 0 rgba(159, 2, 2, 0.30);
}

.section__card:first-of-type {
  margin-top: 10rem;
}

@media (min-width: 1201px) {
  .section__card {
    margin-top: 7rem;
    padding: 3rem;
  }

  .section__card:first-of-type {
    margin-top: 7rem;
  }
}

.section__card:first-child {
  margin-top: 0;
}

.section__card-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-main);
  font-weight: 700;
}

[data-page="people"] .section__card-title,
[data-page="about"] .section__card-title {
  gap: 0.8rem;
}

[data-page="people"] .section__card-title .en,
[data-page="about"] .section__card-title .en,
[data-page="work"] .section__card-title .en,
[data-page="requirements"] .section__card-title .en {
  font-size: 1.6rem;
}

[data-page="people"] .section__card-title .en,
[data-page="about"] .section__card-title .en {
  line-height: 1.87;
}

[data-page="work"] .section__card-title .en,
[data-page="requirements"] .section__card-title .en {
  line-height: 2.14;
}

[data-page="people"] .section__card-title .ja,
[data-page="about"] .section__card-title .ja,
[data-page="requirements"] .section__card-title .ja {
  font-size: 2.6rem;
}

[data-page="work"] .section__card-title .ja {
  font-size: 1.76rem;
  letter-spacing: 0.1rem;
}

[data-page="work"] .section__card-title .ja,
[data-page="requirements"] .section__card-title .ja {
  line-height: 1.25;
}

@media (min-width: 1201px) {

  [data-page="work"] .section__card-title .en,
  [data-page="requirements"] .section__card-title .en {
    font-size: 1.4rem;
  }

  [data-page="people"] .section__card-title .ja,
  [data-page="about"] .section__card-title .ja {
    font-size: 3.2rem;
    line-height: 0.93;
  }

  [data-page="work"] .section__card-title .ja,
  [data-page="requirements"] .section__card-title .ja {
    font-size: 2.4rem;
    letter-spacing: 0.12rem;
  }
}

.section__img {
  margin: 3rem 0 2.5rem;
  border-radius: 2rem;
  overflow: hidden;
}

.section__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section__text {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.9;
}

@media (min-width: 1201px) {
  .section__text {
    font-size: 1.4rem;
    line-height: 2;
  }
}

.section__text--small {
  font-size: 1.2rem;
  line-height: 1.83;
}

.section__text strong {
  font-weight: 500;
}

.section__card-inner {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.card__box {
  padding: 2rem;
  border-radius: 2rem;
  border: 2px solid var(--color-main);
}

@media (min-width: 1201px) {
  .card__box {
    padding: 2.6rem;
  }
}

.card__box-title {
  color: var(--color-main);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.87;
  letter-spacing: 0.08rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.7rem;
  border-bottom: 2px solid var(--color-main);
  text-align: center;
}

.card__box-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1201px) {
  .card__box-list {
    gap: 2rem;
  }
}

.card__box-list li {
  display: grid;
  grid-template-columns: 4.4rem 1fr;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 1201px) {
  .card__box-list li {
    gap: 1.4rem;
  }
}

.card__box-list li .section__text {
  font-weight: 500;
}

.card__box-list li .section__text--small {
  margin-top: -0.5rem;
}

.card__title {
  color: var(--color-main);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.66;
  letter-spacing: 0.09rem;
}

@media (min-width: 1201px) {
  .card__title {
    font-size: 1.8rem;
  }
}

.card__meta {
  margin: 1.6rem 0 2.5rem;
  display: flex;
  gap: 1.2rem;
}

.card__role {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.63;
  letter-spacing: 0.07rem;
}

.card__name {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: 0.085rem;
}

.card__date {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: 0.075rem;
}

/* ===================================
   ボタン
=================================== */
.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.7rem 6.8rem;
  border-radius: 6rem;
  border: 1px solid var(--color-main);
  background: var(--color-main);
  transition: var(--transition-base);
  color: var(--color-light);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.075rem;
}

@media (min-width: 1201px) {
  .button {
    font-size: 1.5rem;
  }
}

.button--01,
.button--03 {
  width: 100%;
  max-width: 510px;
  margin: 0 auto;
  padding: 1.2rem 1.8rem 1.2rem 2rem;
}

@media (min-width: 1201px) {

  .button--01,
  .button--03 {
    padding: 1.7rem 1rem;
  }
}

.button--02 {
  padding: 0.8rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: start;
  background: var(--color-main);
  color: var(--color-light);
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.4rem;
  letter-spacing: 0.09rem;
  text-align: center;
}

@media (min-width: 1201px) {
  .button--02 {
    max-width: 300px;
  }

}

.button--02 svg {
  width: 3.1rem;
  height: 3.1rem;
}

.button--04 {
  padding: 1.2rem 1.5rem 1.2rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-main);
  color: var(--color-light);
  width: 100%;
  max-width: 100%;
  font-size: 1.4rem;
  letter-spacing: 0.08rem;
  text-align: center;
  transition: var(--transition-base);
}

@media (min-width: 1201px) {
  .button--04 {
    padding: 1.6rem 2rem 1.6rem 2.5rem;
    font-size: 1.6rem;
  }
}

.button--01::after {
  content: '';
  display: block;
  width: 0.9rem;
  height: 1.2rem;
  transition: var(--transition-base);
  background-color: var(--color-light);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.button--02::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
  width: 1.9rem;
  height: 1.9rem;
  transition: var(--transition-base);
  background: url(../images/common/iconArrow02.svg) no-repeat center/contain;
}

.button--03::after {
  content: '';
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  transition: var(--transition-base);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1V15' stroke='%23FFFCE3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 8H15' stroke='%23FFFCE3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

.button--03.is-active::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1 8H15' stroke='%23FFFCE3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

.button--04::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3rem;
  width: 1.9rem;
  height: 1.9rem;
  transition: var(--transition-base);
  background: url(../images/common/iconArrow02.svg) no-repeat center/contain;
}

.button--01:hover,
.button--04:hover {
  background: var(--color-light);
  color: var(--color-main);
}

.button--01:hover::after {
  transform: translate(0.5rem, 0);
  background-color: var(--color-main);
}

.button--02:hover::after {
  transform: translate(0.5rem, -50%);
}

.button--03:hover::after {
  transform: rotate(270deg);
}

.button--03.is-active:hover::after {
  transform: rotate(-360deg);
}

.button--04:hover::after {
  transform: translate(0.5rem, -50%);
  background: url(../images/common/iconArrow01.svg) no-repeat center/contain;
}


/* ===================================
   PCレイアウト (1201px以上)
=================================== */
@media (min-width: 1201px) {
  .page__inner {
    display: grid;
    grid-template-columns: 1fr minmax(510px, 32.8%) 21.6%;
  }

  .page__left,
  .page__right {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
  }

  .page__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1;
    grid-row: 1;
    z-index: auto;
  }

  .page__left-title,
  .page__left-item {
    display: block;
  }

  /* ヘッダー */
  .header {
    padding: 3.2rem 2.5rem;
    width: 100%;
    display: block;
    gap: 0;
  }

  .header__inner {
    flex: none;
    padding: 1.2rem 0.5rem;
    background: var(--color-light);
    border-radius: 10rem;
  }

  .header__logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }

  .header__logo {
    width: 50%;
    max-width: 232px;
    display: block;
  }

  .header__tab {
    max-width: 175px;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 2.2rem;
    padding-left: 1.8rem;
  }

  .page__left-title {
    width: 80%;
    margin-top: 15rem;
    position: relative;
    z-index: 10;
  }

  .page__left-item {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }

  .page__left-item--01 {
    width: 60%;
    left: 48%;
  }

  .page__left-item--02 {
    width: 100%;
  }

  .page__left-item--03 {
    width: 100%;
  }

  .page__left-item--04 {
    width: 100%;
  }

  .page__left-title img,
  .page__left-item img {
    width: 100%;
  }

  .page__main {
    margin-top: 3.3rem;
    grid-column: 2;
    grid-row: 1;
    position: relative;
  }

  .page__right {
    pointer-events: all;
    overflow: inherit;
    opacity: 1;
    visibility: visible;
    display: block;
    grid-column: 3;
    grid-row: 1;
  }

  .page__right-inner {
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* ナビゲーション */
  .nav {
    width: 95%;
    max-width: 250px;
  }

  .nav__list--top {
    background: var(--color-light);
    border-radius: 1rem;
    padding: 1.1rem 2.2rem;
  }

  .nav__list--top li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.7rem 0;
    color: var(--color-main);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.85;
    letter-spacing: 0.042rem;
    border-bottom: 1px solid var(--color-main);
  }

  .nav__list--top li:last-child a {
    border-bottom: none;
  }

  .nav__list--top li a::after {
    content: '';
    display: block;
    width: 0.9rem;
    height: 1.2rem;
    background-color: #F62022;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: var(--transition-base);
  }

  .nav__list--top li a:hover::after {
    transform: translateX(0.5rem);
  }

  .nav__list--bottom {
    margin-top: 5.7rem;
    position: relative;
  }

  .nav__list--bottom::after {
    content: '';
    position: absolute;
    bottom: calc(-100% - 20.3vh);
    left: 50%;
    transform: translateX(-50%);
    width: 1.8rem;
    height: calc(100% + 20vh);
    background: var(--color-light);
  }

  .nav__list--bottom li {
    position: relative;
  }

  .nav__list--bottom li:first-child:after {
    content: '';
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.8rem;
    height: 2.7rem;
    background: var(--color-light);
    border-radius: 2rem 2rem 0 0;
  }

  .nav__list--bottom li:nth-child(2):after {
    content: '';
    position: absolute;
    top: -2.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.8rem;
    height: 1.9rem;
    background: var(--color-light);
  }

  .nav__list--bottom li a {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    background: var(--color-light);
    color: var(--color-main);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.26;
    letter-spacing: 0.075rem;
    padding: 1.8rem 3rem 1.8rem 2.2rem;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 57' preserveAspectRatio='none'%3E%3Cpath d='M189.8 1.5C192.889 1.50004 195.849 2.74308 198.012 4.94922L216.64 23.9502C219.118 26.4778 219.118 30.5242 216.64 33.0518L198.012 52.0508C195.849 54.2568 192.889 55.5 189.8 55.5L13 55.501C6.64875 55.501 1.50004 50.3522 1.5 44.001V13.001C1.5 6.64972 6.64875 1.50101 13 1.50098L189.8 1.5Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 57' preserveAspectRatio='none'%3E%3Cpath d='M189.8 1.5C192.889 1.50004 195.849 2.74308 198.012 4.94922L216.64 23.9502C219.118 26.4778 219.118 30.5242 216.64 33.0518L198.012 52.0508C195.849 54.2568 192.889 55.5 189.8 55.5L13 55.501C6.64875 55.501 1.50004 50.3522 1.5 44.001V13.001C1.5 6.64972 6.64875 1.50101 13 1.50098L189.8 1.5Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    transition: var(--transition-base);
  }

  .nav__list--bottom li:first-child a {
    margin-top: 0;
  }

  .nav__list--bottom li a::after {
    content: '';
    display: block;
    width: 1.9rem;
    height: 1.9rem;
    background-image: url(../images/common/iconArrow01.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transition: var(--transition-base);
    margin-left: auto;
  }

  .nav__list--bottom li a:hover::after {
    transform: translateX(0.5rem);
  }

  .nav__icon {
    width: 2.9rem;
    height: auto;
  }

  .nav__icon svg {
    width: 100%;
    height: auto;
  }

  .hamburger {
    display: none;
  }
}

/* ===================================
   PCレイアウト (1281px以上)
=================================== */
@media (min-width: 1281px) {

  /* ヘッダー */
  .header {
    padding: 3.2rem 4.2rem;
    width: 100%;
    display: block;
    gap: 0;
  }
}

/* ===================================
   アスペクト比による調整
=================================== */

/* 16:10 ワイド画面 (MacBook等) */
@media (min-width: 1201px) and (min-aspect-ratio: 16/10) {
  .page__left-title {
    width: 85%;
    margin-top: 12rem;
  }

  .page__left-item--01 {
    width: 70%;
  }

  .page__left-item--02 {
    width: 110%;
  }
}

/* 16:9 標準ワイド画面（16:9〜21:9未満） */
@media (min-width: 1201px) and (min-aspect-ratio: 16/9) and (max-aspect-ratio: 20/9) {
  .page__left-title {
    width: 75%;
    margin-top: 12rem;
  }

  .page__left-item--01 {
    width: 50%;
  }

  .page__left-item--02 {
    width: 90%;
  }
}

/* 21:9 ウルトラワイド画面（21:9以上） */
@media (min-width: 1201px) and (min-aspect-ratio: 21/9) {
  .page__left-title {
    width: 60%;
    margin-top: 18rem;
  }

  .page__left-item--01 {
    width: 30%;
  }

  .page__left-item--02 {
    width: 60%;
  }
}

/* 高さが低い画面用 */
@media (min-width: 1201px) and (max-height: 790px) and (min-aspect-ratio: 16/9) {
  .page__left-title {
    margin-top: 5rem;
  }

  .page__left-item--01 {
    bottom: -2rem;
  }
  .page__left-item--03 {
    bottom: -2rem;
  }

  .page__left-item--04 {
    bottom: -2rem;
  }
}
@media (min-width: 1201px) and (min-aspect-ratio: 16 / 9) and (max-height: 791px){
  .page__left-title {
    margin-top: 8rem;
  }
}