@charset "UTF-8";

/* ==========================================
   FV（ファーストビュー）・News ポップ・スクロール表示
   XD: 01_TOP_SP の FV（375×600）、01_TOP_PC の FV（1366×768）
   ========================================== */
.fv {
  position: relative;
  box-sizing: border-box;
  height: 600px; /* XD SP: FV 375×600 */
  margin-bottom: 40px; /* About は FV の 40px 下から（SP） */
  overflow: hidden;
  scroll-margin-top: 50px;
}

.fv__bg {
  /* XD: 写真 AdobeStock_247298564 に、白 50% の長方形 1121 を重ねる（SP・PC 共通） */
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("../../img/fv-900.webp"); /* 原本 img/fv.jpeg（6000×4000）を 900×600 に縮めたもの（tools/images.mjs） */
  background-position: center top;
  background-size: cover;
}

.fv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(255 255 255 / 50%);
}

.fv__content {
  /* XD SP: ロゴ x=28.73、キャッチの行の上端 y=294.5（2 行）、ロゴの右端 101 → キャッチ x=105.5 */
  position: absolute;
  top: 294.5px;
  left: 50%;
  display: flex;
  gap: 3.77px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 375px;
  padding: 0 0 0 28.73px;
  text-align: center;
  transform: translateX(-50%);
}

.fv__logo {
  flex-shrink: 0;
}

.fv__logo img {
  display: block;
  width: 73px; /* XD SP: LOGO2 w=72.26 h=56.24 */
  height: 56px;
  object-fit: contain;
}

.fv__catchphrase {
  /* XD SP: YuGo-Bold 25px・字間 3.75px（0.15em）・#93c572・行の高さ 37・中央揃えの 2 行 */
  margin: 0;
  font-family: var(--font-ja);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.48; /* 37px ÷ 25px */
  letter-spacing: 0.15em;
  color: var(--color-main);
  text-align: center;
  white-space: nowrap;
}

.fv__catchphrase-line {
  display: block;
}

/* スクロール表示は PC だけ */
.scroll-down {
  display: none;
}

.news-pop {
  /* XD SP: 左下の News ポップ x=20 y=504（下から 20）142×76 #f7b560 角丸 10、影 0 3 3。News のベースライン 528、タイトル 551・569 */
  position: fixed;
  bottom: max(20px, 100dvh - 580px); /* 画面が FV（600）より高いときは、FV の下端から 20 上に置く（XD の位置） */
  left: 20px;
  z-index: 295; /* 閉じている間はドロワー（290）の上（FV の上に出る）。メニューを開いている間は下（.is-drawer-open。下の規則） */
  display: block;
  box-sizing: border-box;
  width: 142px;
  max-width: calc(100vw - 40px);
  height: 76px;
  padding: 6px 10px 10px;
  border-radius: 10px;
  overflow: hidden;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-accent);
  box-shadow: var(--shadow-card);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

@media (any-hover: hover) {
  .news-pop:hover {
    box-shadow: 0 6px 12px rgb(0 0 0 / 20%);
    transform: translateY(-3px);
  }
}

.is-drawer-open .news-pop {
  /* 人間の判断（2026-10-26。iPhone 実機で重なって見づらいため）：XD 02 の「ポップがメニューの上」は採らず、メニューを開いている間はドロワー（290）の下にする */
  z-index: 280;
}

.news-pop.is-hidden {
  /* スクロールして FV を過ぎたら隠す（main.js） */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .news-pop {
    /* 動きを減らす設定では、フェードせずに即時に切り替える */
    transition: none;
  }
}

.news-pop__heading {
  display: inline-block;
  margin: 0 6px 4px 0;
  font-family: var(--font-en);
  font-size: 14px; /* XD SP: News 14px・字間 0.7px・SemiBold */
  font-weight: 600;
  line-height: 0.8572; /* 12px ÷ 14px（切り上げて 12px ちょうどにする） */
  letter-spacing: 0.05em;
  text-transform: capitalize;
}

.news-pop__date {
  display: inline-block;
  margin-bottom: 4px;
  font-family: var(--font-en);
  font-size: 10px; /* XD SP: 日付 10px・字間 0.5px */
  font-weight: 400;
  line-height: 1.2; /* 12px ÷ 10px */
  letter-spacing: 0.05em;
}

.news-pop__title {
  display: -webkit-box;
  margin: 2.41px 0 0; /* XD SP: タイトルのベースライン y=551 */
  overflow: hidden;
  font-family: var(--font-ja);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5; /* 18px ÷ 12px */
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (width >= 768px) {
  .fv {
    height: 768px; /* XD PC: FV 1366×768 */
    margin-bottom: 0;
    scroll-margin-top: 120px;
  }

  .fv__bg {
    background-image: url("../../img/fv-1800.webp"); /* 1800×1200（1366px の 2x まで） */
    background-position: center;
  }

  .fv__content {
    /* XD PC: ロゴ y=269.84（w=202.16 h=157.34・中心 x=683）、キャッチのベースライン y=492（行の上端 445）。縦に中央揃え */
    top: 269.84px;
    right: 0;
    left: 0;
    flex-direction: column;
    gap: 17.82px;
    width: auto;
    max-width: none;
    padding: 0;
    transform: none;
  }

  .fv__logo img {
    width: 202.16px;
    height: 157.34px;
  }

  .fv__catchphrase {
    /* XD PC: YuGo-Bold 50px・字間 7.5px（0.15em）・#87b16c・1 行。末尾の字間ぶん（3.75px）右へ寄せて中央にそろえる。
       font-size：1 行 16 字 × 1.15em ≒ 18.4em なので、1000px 未満は 5vw に縮めて幅に収め、1000px 以上（1366 含む）は 50px（FV の 1 か所だけの vw） */
    padding-left: 0.15em;
    font-size: clamp(24px, 5vw, 50px);
    line-height: 1.2; /* 60px ÷ 50px */
    color: var(--color-fv-catch);
  }

  .fv__catchphrase-line {
    display: inline;
  }

  .scroll-down {
    /* XD PC: SCROLL（Archivo Narrow 14px・字間 1.4px・ベースライン 667）と、線（x=683 y=682.68 の縦線 62.64 と、右上へ 56° の矢じり w=11.28）。下端 745.32 */
    position: absolute;
    right: 0;
    bottom: 22.68px;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
  }

  .scroll-down__text {
    margin-bottom: 11.68px;
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2858; /* 18px ÷ 14px（切り上げて 18px ちょうどにする） */
    letter-spacing: 0.1em;
    color: var(--color-white);
    text-transform: uppercase;
  }

  .scroll-down__line {
    position: relative;
    align-self: flex-start;
    width: 11.28px;
    height: 62.64px;
    margin-left: 50%; /* 線の中心を SCROLL の中心（x=683）に置く */
  }

  .scroll-down__line::before {
    /* 上下に動かすのは線と矢じりだけ（枠は動かさない） */
    content: "";
    position: absolute;
    top: 0;
    left: -1.5px;
    width: 3px;
    height: 100%;
    border-radius: 1.5px 1.5px 0 0;
    background-color: var(--color-white);
    animation: scroll-bounce 2s ease-in-out infinite;
  }

  .scroll-down__arrow {
    position: absolute;
    bottom: -1.5px;
    left: -1.5px;
    width: 23.17px;
    height: 3px;
    border-radius: 1.5px;
    background-color: var(--color-white);
    transform: rotate(-56deg);
    animation: scroll-bounce-arrow 2s ease-in-out infinite;
    transform-origin: 1.5px 1.5px;
  }

  .news-pop {
    /* XD PC: News ポップ x=984 y=611 337×109（右 45・下 48）角丸 20。News 20px（ベースライン 647）・日付 12px（675）・タイトル 16px（698）、左 15
       width：768〜817px では 337px だと中央の SCROLL（幅 54.4）に重なるので、SCROLL の右端から 16px 空くよう 50% − 88px まで縮める（850px 以上は 337px のまま） */
    position: absolute;
    right: max(45px, (100% - 1366px) / 2 + 45px);
    bottom: 48px;
    left: auto;
    z-index: 10; /* PC は FV の中に置く（メニューのドロワーは SP だけ） */
    width: min(337px, 50% - 88px);
    max-width: none;
    height: 109px;
    padding: 18.5px 15px 0;
    border-radius: 20px;
  }

  .news-pop__heading {
    display: block;
    margin: 0;
    font-size: 20px;
    line-height: 1; /* 20px ÷ 20px */
    letter-spacing: 0.05em;
  }

  .news-pop__date {
    display: block;
    margin: 13.38px 0 0;
    font-size: 12px;
    line-height: 1.3334; /* 16px ÷ 12px（切り上げて 16px ちょうどにする） */
  }

  .news-pop__title {
    display: block;
    margin: 5.63px 0 0;
    font-size: 16px;
    line-height: 1; /* 16px ÷ 16px */
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@keyframes scroll-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

@keyframes scroll-bounce-arrow {
  0%,
  100% {
    transform: translateY(0) rotate(-56deg);
  }

  50% {
    transform: translateY(10px) rotate(-56deg);
  }
}

/* 動きを減らす設定では、スクロール表示の上下の動きを止める（線と矢じりは静止した位置のまま） */
@media (prefers-reduced-motion: reduce) {
  .scroll-down__line::before,
  .scroll-down__arrow {
    animation: none;
  }
}