@charset "UTF-8";

/* ===== Reset / Base ===== */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a { cursor: pointer; }

/* PC/SP 切替 */
.pc { display: block; }
@media screen and (max-width: 767px) { .pc { display: none; } }
.sp { display: none; }
@media screen and (max-width: 767px) { .sp { display: block; } }

/* ===== 共通 ===== */
.hero { width: 100vw; height: 100vh; overflow: hidden; }
.hero__svg { width: 100%; height: 100%; display: block; object-fit: cover; }

.flex_box_left{  width: 32.42857vw; margin-bottom: 40px; }
.flex_box_center{width: 21.785714vw; position: relative; left: -2vw; }
.flex_box_right{ width: 42.85714vw; margin-bottom: 40px; text-align: center; }

.box_logo{
  position: relative;
  width: 21.07142vw;
  top: 2.14285vw;
  left: 2.14285vw;
}

.img_box_red02, .img_box_blue02{
  position: relative;
  display: inline-block;
  width: 32.42857vw;
}
.btn_box a{ display: block; margin-top: 0px; }

.img_box_red02 img, .img_box_blue02 img{
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity .3s ease;
}
.img_box_red02 img:nth-child(1),
.img_box_blue02 img:nth-child(1){ opacity: 1; }
.img_box_red02 img:nth-child(2),
.img_box_blue02 img:nth-child(2){ opacity: 0; }
.a_red:hover .img_box_red02 img:nth-child(2),
.a_blue:hover .img_box_blue02 img:nth-child(2){ opacity: 1; }

.mv_txt {
    position: absolute;
  bottom: 1vw;
  left: 2.14285vw;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
  font-weight: 600;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

/* ===== 画像サイズ設定（比率指定用） ===== */
/* 画像の実寸に合わせて変更可能（例：1920×2200） */
:root {
  --pc-bg-w: 2800;
  --pc-bg-h: 1600;
  --pc-bg-aspect: calc(var(--pc-bg-h) / var(--pc-bg-w));
}

/* ===== PC（768px以上） ===== */
@media screen and (min-width: 768px) {
  /* 縦スクロールを許可 */
  html, body { overflow: auto; }

  .l-wrap{
    position: relative;
    height: auto; /* 固定高さを解除 */
    min-height: calc(100vw * var(--pc-bg-aspect)); /* 背景比率に合わせた高さ */
    background-image: url("../../assets/img/top_bg_pc@2x.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto; /* 横幅100%、縦自動 */
    overflow: visible;
  }


  /* ▼ .btn_boxを画面下から80pxに固定配置 ▼ */
  .btn_box{
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
  }
}

/* ===== SP（～767px） ===== */
@media screen and (max-width: 767px) {
  .l-wrap{
    position: relative;
    aspect-ratio: 752 / 1947;
    min-height: calc(100vw * 1947 / 752);
    background-image: url("../../assets/img/top_bg_sp@2x.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    overflow: hidden;
  }

  .btn_box{
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: clamp(17px, 32vw, 138px);
    display: block;
    padding-top: 0;
    width: 90%;
    margin: 0 auto;
  }
  .btn_box a{ margin-top: 0px; }

  .flex_box_left{ width: 100%; }
  .flex_box_right{ width: 100%; position: relative; top: 40px; }
  .flex_box_center{ width: 100%; left: 0; }

  .img_box_red02, .img_box_blue02{ width: 100%; }

  .mv_txt{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90vw;
    text-align: center;
  }
}