@charset "UTF-8";
/* ==========================================================================
   layout.css — header / gnav / spnav / footer-cta / footer（SPD-v2）
   ========================================================================== */

/* header
   ========================================================================== */
body.is-locked { overflow: hidden; }

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  color: var(--cl-wh);
  transition: background-color var(--ease-t-slow), backdrop-filter var(--ease-t-slow);

  &._solid {
    background-color: var(--cl-green-dk);
  }

  /* スクロール中は、後ろが透けてぼける「すりガラス」。深い緑を重ね、ぼけはうっすら分かる程度（88%） */
  &.is-scrolled {
    background-color: color-mix(in srgb, var(--cl-green-dk) 88%, transparent);
    -webkit-backdrop-filter: blur(1.6rem) saturate(1.2);
    backdrop-filter: blur(1.6rem) saturate(1.2);
  }

  /* メニュー・メガメニューを開いている間はベタ（メニュー本体と地続きに見せる） */
  &.is-open {
    background-color: var(--cl-green-dk);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-h);
  padding-inline-start: var(--inner-pad);

  @media print, screen and (min-width: 1024px) {
    padding-inline-start: min(4.8rem, 2.4vw);
  }
}

.header-logo {
  flex: 0 0 auto;

  & img {
    inline-size: 18rem;

    @media print, screen and (min-width: 1024px) {
      /* 1024〜1600 でナビと1行に収めるため、ロゴ・余白は画面幅に合わせて縮める（上限はFigma実寸） */
      inline-size: min(32.1rem, 18vw);
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: min(4.8rem, 2.4vw);
}

.header-cta {
  display: none;

  @media print, screen and (min-width: 1024px) {
    display: grid;
    place-items: center;
    align-self: stretch;
    inline-size: min(17.5rem, 11vw);
    background-image: linear-gradient(90deg, var(--cl-cta-from) 7%, var(--cl-cta-to));
    color: var(--cl-offwh);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: filter var(--ease-t);
  }

  @media (any-hover: hover) {
    &:hover {
      filter: brightness(1.14);
      opacity: 1;
    }
  }
}

.header-menuBtn {
  position: relative;
  inline-size: var(--header-h);
  block-size: var(--header-h);
  /* 三本線（×）の右端を、ロゴと同じ余白（inner-pad）に揃える。線は幅の30%〜70%にあるので、右側の余りは幅の30% */
  margin-inline-end: calc(var(--inner-pad) - var(--header-h) * 0.3);

  & span {
    position: absolute;
    inset-inline-start: 30%;
    inline-size: 40%;
    block-size: 2px;
    background-color: currentColor;
    transition: translate var(--ease-t), rotate var(--ease-t), opacity var(--ease-t);

    &:nth-child(1) { inset-block-start: 35%; }
    &:nth-child(2) { inset-block-start: calc(50% - 1px); }
    &:nth-child(3) { inset-block-end: 35%; }
  }

  &[aria-expanded="true"] span {
    &:nth-child(1) { translate: 0 calc(var(--header-h) * 0.15 - 1px); rotate: 45deg; }
    &:nth-child(2) { opacity: 0; }
    &:nth-child(3) { translate: 0 calc(var(--header-h) * -0.15 + 1px); rotate: -45deg; }
  }

  @media print, screen and (min-width: 1024px) {
    display: none;
  }
}

/* gnav（PCのみ）
   ========================================================================== */
.header-gnav {
  display: none;

  @media print, screen and (min-width: 1024px) {
    display: flex;
    align-items: center;
    align-self: stretch;
  }
}

.header-gnavList {
  display: flex;
  align-items: stretch;
  gap: min(3.8rem, 1.8vw);
  block-size: 100%;
}

.header-gnavItem {
  position: relative;
  display: flex;
  align-items: center;
}

.header-gnavLink {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.75;
  white-space: nowrap;
  transition: color var(--ease-t);

  /* ホバー・開いている間は金の下線が左から伸びる */
  &::before {
    content: "";
    position: absolute;
    inset-block-end: -0.4rem;
    inset-inline: 0;
    block-size: 2px;
    background-color: var(--cl-gold-lt);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--ease-t) var(--ease-out);
  }

  @media (any-hover: hover) {
    &:hover {
      color: var(--cl-gold-lt);
      opacity: 1;
    }

    &:hover::before { scale: 1 1; }
  }
}

/* ドロップダウン（シンプルな1段。ラベルはリンク、▾ が開閉ボタン）
   ・ホバー（ポインタのある端末）か、▾ の押下（キーボード・タッチ）で開く
   ・パネルはヘッダーの真下にくっつけて、項目の真下に中央揃え。斜めに動かしても途切れない
   ========================================================================== */
.header-gnavToggle {
  display: grid;
  place-items: center;
  inline-size: 2.8rem;
  block-size: 4.4rem;
  color: inherit;

  &::before {
    content: "";
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-inline-end: 1px solid currentColor;
    border-block-end: 1px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.2rem;
    transition: rotate var(--ease-t), translate var(--ease-t);
  }
}

.header-drop {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  min-inline-size: 27rem;
  padding-inline: 2rem;
  border-block-start: 2px solid var(--cl-gold);
  background-color: var(--cl-green-dk);
  box-shadow: 0 1.6rem 3.2rem rgb(0 20 14 / 0.28);
  color: var(--cl-wh);
  opacity: 0;
  visibility: hidden;
  translate: -50% -0.8rem;
  transition:
    opacity var(--ease-t),
    translate var(--ease-t) var(--ease-out),
    visibility 0s linear var(--ease-t);

  &._wide { min-inline-size: 36rem; }

  & li + li { border-block-start: 1px solid rgb(255 255 255 / 0.16); }

  & a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding-block: 1.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    transition: padding-inline-start var(--ease-t), color var(--ease-t);

    &::after {
      content: "";
      flex: none;
      inline-size: 1.2rem;
      block-size: 1.2rem;
      background-color: var(--cl-gold-lt);
      mask: url(/assets/images/common/ico_arrow_s.svg) no-repeat center / contain;
      transition: translate var(--ease-t) var(--ease-out);
    }
  }
}

/* 開いている状態（js-drop-btn の押下＝is-open）。ホバーは、ポインタのある端末だけ */
.header-gnavItem._drop.is-open {
  & .header-drop {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
    transition-delay: 0s;
  }

  & .header-gnavLink { color: var(--cl-gold-lt); }
  & .header-gnavLink::before { scale: 1 1; }
  & .header-gnavToggle::before { rotate: 225deg; translate: 0 0.2rem; }
}

@media (any-hover: hover) {
  .header-gnavItem._drop:hover {
    & .header-drop {
      opacity: 1;
      visibility: visible;
      translate: -50% 0;
      transition-delay: 0s;
    }

    & .header-gnavLink { color: var(--cl-gold-lt); }
    & .header-gnavLink::before { scale: 1 1; }
    & .header-gnavToggle::before { rotate: 225deg; translate: 0 0.2rem; }
  }

  .header-drop a:hover {
    padding-inline-start: 0.7rem;
    color: var(--cl-gold-lt);
    opacity: 1;
  }

  .header-drop a:hover::after { translate: 0.4rem 0; }
}

/* spnav（1023pxまで）
   ========================================================================== */
.spnav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  overflow-y: auto;
  padding-block: 2.4rem 4.8rem;
  padding-inline: var(--inner-pad);
  background-color: var(--cl-green-dk);
  color: var(--cl-wh);

  &[hidden] { display: none; }

  @media print, screen and (min-width: 1024px) {
    display: none;
  }
}

.spnav-list {
  border-block-start: 1px solid rgb(255 255 255 / 0.2);

  & > li {
    border-block-end: 1px solid rgb(255 255 255 / 0.2);
  }

  & a,
  & summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: max(5.6rem, 56px);
    padding-block: 1.2rem;
    font-size: max(1.7rem, 16px);
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--ease-t);

    /* タッチ端末はホバーが無いので、押した瞬間だけ薄く光らせる */
    &:active { background-color: rgb(255 255 255 / 0.08); }
  }

  & summary {
    list-style: none;

    &::-webkit-details-marker { display: none; }

    &::after {
      content: "";
      inline-size: max(1.4rem, 14px);
      block-size: max(1.4rem, 14px);
      background-color: currentColor;
      mask: url(/assets/images/common/ico_chevron.svg) no-repeat center / contain;
      transition: rotate var(--ease-t);
    }
  }

  & details[open] summary::after { rotate: 180deg; }

  & details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--ease-t), content-visibility var(--ease-t) allow-discrete;
  }

  & details[open]::details-content { block-size: auto; }
}

.spnav-sub {
  padding-block-end: 1.6rem;
  padding-inline-start: 1.6rem;

  & a {
    min-block-size: max(4.8rem, 48px);
    padding-block: 0.8rem;
    color: rgb(255 255 255 / 0.8);
    font-size: max(1.5rem, 15px);
    font-weight: 400;
  }
}

.spnav-cta {
  display: grid;
  gap: 1.2rem;
  margin-block-start: 3.2rem;

  & .c-btn { inline-size: 100%; }
}

.spnav-tel {
  display: block;
  font-family: var(--ff-num);
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;

  & small {
    margin-inline-end: 0.8rem;
    font-size: 1.4rem;
    font-weight: 400;
  }
}

/* footer-cta（全ページ共通の相談導線：電話とメールの2つ）
   ========================================================================== */
.footer-cta {
  padding-block: 6rem;
  background-color: var(--cl-green-dk);
  color: var(--cl-offwh);

  @media print, screen and (min-width: 640px) {
    padding-block: 8rem;
  }
}

.footer-ctaInner {
  display: grid;
  gap: 3.2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: 1fr 46rem;
    align-items: start;
    gap: 4rem;
  }

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: 1fr 52.8rem;
  }
}

.footer-ctaHead {
  display: grid;
  gap: 2rem;
  container-type: inline-size;

  /* 見出しは常に1行。13文字＋字間で幅の約97%に収まる文字サイズを上限つきで取る */
  & h2 {
    font-family: var(--ff-serif);
    font-size: min(var(--fs-4xl), 7.2cqi);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.36;
    white-space: nowrap;
  }

  & p {
    color: rgb(246 245 240 / 0.78);
    font-size: var(--fs-m);
    letter-spacing: 0.04em;
    line-height: 1.9;
  }

  @media print, screen and (min-width: 640px) {
    align-self: stretch;
    align-content: space-between;
  }
}

.footer-ctaAction {
  display: grid;
  gap: 2.4rem;

  @media print, screen and (min-width: 640px) {
    gap: 3.2rem;
    padding-block-start: 1.6rem;
  }
}

.footer-ctaMail {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2.4rem;
  border-radius: 0.3rem;
  background-color: var(--cl-gold-dk);
  box-shadow: 0 0.5rem 1.1rem rgb(0 0 0 / 0.1), 0 1.9rem 3.8rem rgb(0 0 0 / 0.16);
  color: var(--cl-wh);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1;
  transition:
    background-color var(--ease-t),
    box-shadow var(--ease-t),
    translate var(--ease-t) var(--ease-out),
    scale 0.15s var(--ease-out);

  &::after {
    content: "";
    position: absolute;
    inset-inline-end: 3.2rem;
    inset-block-start: 50%;
    inline-size: 2.8rem;
    block-size: 2.4rem;
    background: url(/assets/images/common/ico_mail.svg) no-repeat center / contain;
    translate: 0 -50%;
    transition: translate var(--ease-t) var(--ease-out);
  }

  &:active { scale: 0.98; }

  @media (any-hover: hover) {
    &:hover {
      background-color: color-mix(in srgb, var(--cl-gold-dk) 84%, var(--cl-wh));
      box-shadow: 0 0.8rem 1.6rem rgb(0 0 0 / 0.14), 0 2.4rem 4.4rem rgb(0 0 0 / 0.2);
      opacity: 1;
      translate: 0 -0.3rem;
    }

    &:hover::after { translate: 0.4rem -50%; }
  }

  @media print, screen and (min-width: 1024px) {
    padding: 3.2rem;
    font-size: 2.2rem;
  }
}

.footer-ctaTel {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  font-family: var(--ff-num);
  line-height: 1;
  white-space: nowrap;

  & span {
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    line-height: 1.39;

    @media print, screen and (min-width: 1024px) { font-size: 2.4rem; }
  }

  & strong {
    font-size: 3.8rem;
    font-weight: 500;
    letter-spacing: 0.065em;

    @media print, screen and (min-width: 1024px) { font-size: 5.2rem; }
  }
}

/* footer
   ========================================================================== */
.footer {
  padding-block: 4.8rem 0;
  background-color: var(--cl-wh);
}

.footer-main {
  display: grid;
  gap: 4rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: minmax(0, 32.5rem) minmax(0, 1fr);
    gap: 6rem;
  }

  @media print, screen and (min-width: 1024px) {
    gap: 12rem;
  }
}

.footer-logo {
  inline-size: 18rem;

  @media print, screen and (min-width: 640px) {
    inline-size: 21.5rem;
  }
}

.footer-company {
  margin-block-start: 3.2rem;
  padding-block-start: 2.4rem;
  border-block-start: 1px solid var(--cl-ln-foot);
  color: var(--cl-txt-sub);
  font-size: 1.4rem;
  line-height: 1.9;

  & .footer-name {
    margin-block-end: 1.6rem;
    color: var(--cl-green);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  & dl + dl { margin-block-start: 1.6rem; }
}

.footer-cert {
  margin-block-start: 2.4rem;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--cl-ln);
  color: var(--cl-gr-cert);
  font-size: 1.3rem;
  line-height: 1.85;
}

.footer-nav {
  display: grid;
  gap: 3.2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: minmax(0, 19fr) minmax(0, 28.5fr) minmax(0, 20fr);
    gap: 4rem;
  }
}

.footer-navGroup {
  & h2 {
    margin-block-end: 2.2rem;
    padding-block-end: 1.2rem;
    border-block-end: 1px solid var(--cl-gold);
    color: var(--cl-green);
    font-family: var(--ff-serif);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  & ul {
    display: grid;
    gap: 1rem;
    color: var(--cl-txt-sub);
    font-size: 1.4rem;
    line-height: 1.65;

    & a {
      text-decoration: underline;
      text-decoration-color: transparent;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.35em;
      transition: color var(--ease-t), text-decoration-color var(--ease-t);
    }
  }

  & ._lead {
    margin-block-end: 0.6rem;
    color: var(--cl-txt);
    font-weight: 700;
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.6rem;
  margin-block-start: 4rem;
  padding-block: 2rem 4rem;
  border-block-start: 1px solid var(--cl-ln-foot);
  font-size: 1.3rem;

  & small {
    color: var(--cl-gr);
    font-size: inherit;
  }

  & a {
    color: var(--cl-txt-mute);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    transition: color var(--ease-t), text-decoration-color var(--ease-t);
  }
}

@media (any-hover: hover) {
  .footer-navGroup ul a:hover,
  .footer-bottom a:hover {
    color: var(--cl-green);
    text-decoration-color: var(--cl-gold);
    opacity: 1;
  }
}