/* ============================================================
   基本
============================================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 440;
  line-height: 1.6;
  color: #333;
  padding-top: 72px;
  /* 固定ヘッダー前提 */
}

/*--- ヘッダー分下に ---*/
@media screen and (max-width: 640px) {
  body {
    padding-top: 56px;
    /* 固定ヘッダー前提 */
  }
}

/*--- SP用 ---*/
@media (max-width: 767px) {
  body {
    font-size: 0.875rem;
    /* 14px */
  }
}

a {
  text-decoration: none;
  transition: opacity .2s;
}

a:hover {
  opacity: .5;
}

img {
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
}

/* アンカーリンクのヘッダー被り対策 */
[id] {
  scroll-margin-top: 70px;
}

#price {
  scroll-margin-top: 170px;
}

#strength {
  scroll-margin-top: 90px;
}

/*--- ヘッダー分下に ---*/
@media screen and (max-width: 640px) {
  [id] {
    scroll-margin-top: 56px;
  }

  #price {
    scroll-margin-top: 120px;
  }
}

/* ============================================================
   PC / SP 切り替え
============================================================ */
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .pc-only {
    display: none;
  }

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

/* ============================================================
   レイアウト系
============================================================ */
.l-section {
  padding: 80px 0;
}

.l-inner {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.l-inner--1000 {
  width: min(1000px, 90%);
  margin: 0 auto;
}

.l-inner--920 {
  width: min(920px, 90%);
  margin: 0 auto;
}

.l-inner--840 {
  width: min(840px, 90%);
  margin: 0 auto;
}

.l-inner--800 {
  width: min(840px, 90%);
  margin: 0 auto;
}

.l-main {
  overflow: hidden;
}

/* ============================================================
   HEADER 基本
============================================================ */
.l-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  background: #fff;
  z-index: 9999;
  /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.02); 一応残しておく*/
}

.l-header__inner {
  height: 70px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.l-header__logo img {
  height: 32px;
}

@media screen and (max-width: 640px) {
  .l-header__inner {
    height: 56px;
  }
}

/* ============================================================
   PC ナビ（デフォルト）
============================================================ */
.l-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  position: static;
  /* PCでは transform を使わない */
  transform: none;
  font-weight: 500;
}

.l-nav__list {
  display: flex;
  gap: 30px;
  align-items: center;
}

.l-nav__list a {
  color: #0A2A59;
  font-size: 0.975rem;
}

.l-nav__external {
  background: url("../img/icon_blank.svg") no-repeat center right / 1em;
  padding-right: 1.3em;
}

/* PCでは非表示 */
.l-nav__buttons {
  display: none;
}

.l-header__hamburger {
  display: none;
}



/* ============================================================
   PC 表示（1501px 以上）
============================================================ */
@media screen and (min-width: 1501px) {
  .l-header__inner {
    height: 72px;
    padding-bottom: 14px;
    align-items: end;
  }

  .l-nav {
    align-items: end;
    gap: 22px;
  }
}

/* ============================================================
   SP 表示（1500px 以下）
============================================================ */
@media screen and (max-width: 1500px) {
  .l-header__inner {
    padding: 0 10px;
  }

  /* 初期状態では完全非表示（チラつき防止） */
  .l-nav {
    display: none;
  }

  /* JS 有効後 */
  .l-nav.js-ready {
    display: flex;
    position: fixed;
    top: 70px;
    right: 0;
    width: 100%;
    height: calc(100vh - 70px);
    background: #0A2A59;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    padding: 0;
    transform: translateX(100%);
    transition: transform .3s;
  }

  .l-nav.js-ready.is-open {
    transform: translateX(0);
  }

  .l-nav__list {
    display: block;
  }

  .l-nav__list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .l-nav__list a {
    display: block;
    padding: 18px;
    font-size: 1.125rem;
    color: #fff;
  }

  .l-nav__buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 18px;
    padding-top: 0;
  }

  .l-nav__buttons a {
    width: 49%;
    background: #fff;
    color: #0A2A59;
    text-align: center;
    padding: 14px 0;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.125rem;
  }

  .l-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #0A2A59;
    border-radius: 50%;
    cursor: pointer;
    transition: background .3s ease;
  }

  .l-header__hamburger span {
    display: block;
    width: 16px;
    height: 1px;
    background: #fff;
    margin: 2px 0;
    transition: transform .3s ease, opacity .3s ease;
  }

  .l-header__hamburger.is-open span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  .l-header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .l-header__hamburger.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  .l-nav__external {
    background: url("../img/icon_blank--white.svg") no-repeat center left 5.8em / 1em;
    padding-right: 10;
  }
}

/*--- ヘッダー分下に ---*/
@media screen and (max-width: 640px) {
  .l-nav.js-ready {
    top: 56px;
    /* 固定ヘッダー前提 */
    height: calc(100vh - 56px);
    /* 固定ヘッダー前提 */
  }
}

/* ============================================================
   小画面追加調整
============================================================ */
@media screen and (max-width: 640px) {
  .l-header__logo img {
    height: 24px;
  }
}

@media screen and (max-width: 448px) {
  .l-nav__buttons {
    flex-direction: column;
  }

  .l-nav__buttons a {
    width: 100%;
  }
}

/* ============================================================
   汎用スタイル
============================================================ */
.size-x2 {
  font-size: 220%;
  vertical-align: -0.39em;
  padding: 0 0.1em;
  font-weight: 600;
}

.u-size-s {
  font-size: 82%;
}

.u-size-no-mal {
  font-size: 1rem;
}

.u-blod {
  font-weight: 700;
}

.u-weight-normal {
  font-weight: 500;
}

.u-color-k {
  color: #333;
}

.u-no-wrap {
  display: inline-block;
}

/* =========================================================
   固定バナー
========================================================= */
.c-fixed {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 100;
}

.c-fixed__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: #fff 2px solid;
  gap: 1.26em;
  padding: 0.8em 1.26em;
  border-radius: 6px;
  font-size: 1.2375rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 3.6px 7.2px rgba(0, 0, 0, .6);
  white-space: nowrap;
  width: 16.2em;
}

/* お問い合わせ */
.c-fixed__btn--contact {
  background: linear-gradient(180deg, #d96f02, #e99c36);
}

.c-fixed__btn--contact:hover {
  opacity: 1;
  background: #efb974;
}

/* 資料請求 */
.c-fixed__btn--doc {
  background: linear-gradient(180deg, #022a62, #0161a1);
}

.c-fixed__btn--doc:hover {
  opacity: 1;
  background: #5590bb;
}

.c-fixed__icon {
  aspect-ratio: 1/1;
  height: auto;
}

.c-fixed__btn--contact .c-fixed__icon {
  width: 34px;
  background: url("../img/icon_contact.svg") no-repeat center / contain;
  margin-top: 0.1em;
}

.c-fixed__btn--doc .c-fixed__icon {
  width: 40px;
  background: url("../img/icon_doc.svg") no-repeat center / contain;
}

/*--- SP用（横並び維持） ---*/
@media (max-width: 800px) {
  .c-fixed {
    left: 0;
    right: 0;
    bottom: 10px;
    transform: none;
    padding: 0 1%;
    /* 画面端の余白 */
    justify-content: center;
    gap: 1.5%;
  }

  .c-fixed__btn {
    width: 15em;
    font-weight: 500;
    max-width: 48%;
    gap: 5%;
    padding: 0.45em;
    font-size: 1rem;
    font-size: clamp(15px, 3vw, 1rem);
    border-radius: 4px;
    border-width: 1px;
  }

  .c-fixed__icon {
    width: 2em !important;
  }
}

/* =========================================================
   ページトップ
========================================================= */
.c-pagetop {
  display: none;
  position: fixed;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #022a62;
  color: #fff;
  text-decoration: none;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  padding-bottom: 0.5em;
  bottom: 25px;
  right: 20px;
  transition: bottom 0.3s ease;
}

.c-pagetop__arrow {
  display: block;
  margin-bottom: -0.4em;
}

.c-pagetop__text {
  font-size: 1rem;
  font-weight: 400;
}

@media screen and (max-width: 890px) and (min-width: 801px) {
  .c-pagetop {
    bottom: 130px;
  }
}

@media screen and (max-width: 800px) {
  .c-pagetop {
    bottom: 10px;
    transform: scale(0.7);
    transform-origin: 100% 100%;
  }
}

@media screen and (max-width: 687px) {
  .c-pagetop {
    bottom: 70px;
  }
}

/* =========================================================
   フッター
========================================================= */
.l-footer {
  background: #fff;
  padding: 4.2em 0 4em;
  text-align: center;
}

body {
  /*.c-fixed用*/
  position: relative;
}

@media screen and (max-width: 768px) {
  .l-footer {
    padding: 3.0em 0 7em;
  }
}

@media screen and (max-width: 640px) {
  .l-footer {
    padding: 2.7em 0 7em;
  }
}

/* =========================================================
   動き（アニメーション）
========================================================= */
/*--- FV ---*/
/* FV背景：最初から表示 */
.p-fv__bg {
  opacity: 1;
}

/* FV中身：最初は非表示 */
.p-fv__inner,
.p-fv__scroll {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}

/* 表示状態 */
.p-fv__inner.is-show,
.p-fv__scroll.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* FV 背景：初期 */
.p-fv__bg {
  opacity: 0;
  transform: scale(1.025);
  transition: opacity .6s ease, transform .6s ease;
}

/* 表示 */
.p-fv__bg.is-show {
  opacity: 1;
  transform: scale(1);
}

/* ====================================
   フェードイン（opacityのみ）
===================================== */
/* 共通フェード */
.js-fade {
  opacity: 0;
  transition: opacity .5s ease;
}

.js-fade.is-show {
  opacity: 1;
}

/* fadein-wrap は“見せ方だけ”変える */
.fadein-wrap>*.js-fade {
  transition-delay: calc(var(--i, 0) * 0.12s);
}