@charset "utf-8";
/* Zen Old Mincho（明朝） */
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap");
/* Noto Serif JP（明朝） */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap'); */
/* Noto Sans JP(ゴシック) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

/* 標準CSSでは$変数が使えないため、ルートでカスタムプロパティとして定義します */
:root {
  /* ---カラー--- */
  /* --color-base-0: #302618; */
  /* --color-base-1: #4a3b31; */
  --color-base: #3d3129;
  --color-base-dark: #4a3b31;
  --color-main: #d6a34a;
  --color-accent: #4b8765;
  --color-accent-2: #722620;
  --color-font: #eee;
  --color-footer: #4a2c2a;

  /* ---フォントサイズ--- */
  --fs-40: clamp(3.2rem, 7vw, 4rem);
  --fs-32: clamp(2.4rem, 4vw, 3.2rem);
  --fs-24: clamp(2rem, 3vw, 2.4rem);
  --fs-18: clamp(1.5rem, 2.5vw, 1.8rem);
  --fs-16: clamp(1.4rem, 2vw, 1.6rem);
  --fs-14: clamp(1.3rem, 1.5vw, 1.4rem);

  /* ブレイクポイントを定義 */
  --breakpoint-pc: 1023px; /*PCは1024px～*/
  --breakpoint-tablet: 767px; /*タブレットは768px～1024px*/
  --breakpoint-min: 320px; /*スマホは320px～375px基準～430px*/
}

html {
  font-size: 10px;
}

body {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.4rem;
  font-weight: 300;
  font-style: normal;
  color: var(--color-font);
  line-height: 1.75;
  letter-spacing: 0.05em;
  background-color: var(--color-base);
}

.fs-40 {
  font-size: var(--fs-40);
}

.fs-32 {
  font-size: var(--fs-32);
}

.fs-24 {
  font-size: var(--fs-24);
}

.fs-18 {
  font-size: var(--fs-18);
}

.fs-16 {
  font-size: var(--fs-16);
}

.fs-14 {
  font-size: var(--fs-14);
}

.page-wrapper {
  /* 画面をopacity: 0→1と3秒かけて表示させる */
  animation: fadein 3s both;
}

/* アニメーション */
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* アクセシビリティ対応：ユーザーがOSで「動きを減らす」設定をしている場合、アニメーションを無効化する*/
/* @media (prefers-reduced-motion: reduce) {
  .page-wrapper {
    animation: none;
  }
} */

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.4s ease, transform 1.6s ease-out;
  will-change: opacity, transform;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

& a {
  transition: color 0.3s ease, opacity 0.3s ease; /* 色と透明度をふわっとさせる */
}

& a:link {
  /* color: #161616; */
  text-decoration: none;
}

/* a:visited {
  color: var(--color-accent-2);
  } */

& a:hover {
  color: #009ee6;
  opacity: 0.8;
  text-underline-offset: 2px;
  text-decoration: underline;
}

& a:active {
  color: #e64800;
}

& h2 {
  display: block;
  margin-bottom: 2.5em;
  padding-left: 0;
  line-height: 1;

  & .wb-sec-title {
    width: 100%;
    max-width: 400px;
    font-size: var(--fs-40);
    white-space: nowrap;
    display: inline-block;
    border-bottom: solid 1px #eee;
  }

  & small {
    display: block;
    font-size: var(--fs-14);
    padding-top: 0.25em;
  }
}

/* フレックスボックス */
.model-flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.model-btn {
  display: block;
  font-size: var(--fs-18);
  font-weight: 400;
  width: fit-content;
  text-align: center;
  padding: 0.5em 3em;
  border-radius: 3px;
  white-space: nowrap;
  cursor: pointer;

  &.type-green {
    /* color: var(--color-font); */
    background-color: var(--color-accent);
  }

  &.type-blood-red {
    /* color: var(--color-font); */
    background-color: var(--color-accent-2);
  }
}

.model-inner {
  max-width: clamp(800px, 90vw, 960px);
  margin-left: auto;
  margin-right: auto;
  padding: 80px 60px 80px;
}

@media (max-width: 500px) {
  .model-inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}

:where(.site-header) {
  .header-column {
    gap: 2em;

    .gnav-menu {
      line-height: 1.25;
      text-align: center;
      width: fit-content; /*サブページ用の下線長さ*/
    }

    :where(.gnav-menu) {
      .gnav-list {
        padding: 0 1em;
        margin: 0.5em 0;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
        font-size: var(--fs-18);

        /* 改行のためdisplay: blockを改めて指定 */
        .sub-label {
          display: block;
          font-size: 1rem;
        }
      }

      .reserve-label {
        display: none;
      }

      .gnav-list:nth-child(-n + 3) {
        border-right: solid 1px var(--color-font);
      }
    }
  }
}

:where(.sub) {
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    /* 背景色をフェードアウトさせる */
    /* background: linear-gradient(to top, rgba(75, 60, 50, 0) 0%, rgba(75, 60, 50, 0.6) 30%, / rgb(75, 60, 50, 1) 65% ); */

    .header-column {
      padding: 15px 20px 0;

      :where(.gnav) {
        .contact-tel {
          display: none;
        }
      }
    }
  }
}

.hmb-icon {
  display: none;
  width: 50px;
  aspect-ratio: 1 / 1;
  padding: 5px;
  cursor: pointer;
  /* スライド時の固定は別で設けるため、fixedではなくabsolute */
  position: absolute;
  top: 15px;
  right: clamp(15px, 3vw, 20px);
  z-index: 2;

  & img {
    width: 100%;
    height: auto;
    min-width: 28px;
  }
}

/* ページトップボタンの基本スタイル */
.pagetop-icon {
  position: fixed;
  bottom: 15px;
  right: clamp(15px, 3vw, 20px);
  width: 50px;
  aspect-ratio: 1 / 1;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.pagetop-icon.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ヘッダー固定時のスタイル */
.site-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  /* 必要に応じてアニメーションを追加 */
  animation: slideDown 0.3s ease-out;
  overflow: hidden; /*疑似要素が角丸からはみ出ないようにする*/

  /* 背景色を色：var()＋半透明で指定する策 */
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-base);
    opacity: 0.8;
    z-index: -1;
  }
}

@media (max-width: 767px) {
  .header-column {
    flex-direction: column;
    gap: 0.2em;

    .gnav {
      display: flex;
      flex-wrap: nowrap;
      margin-top: -0.8em;

      :where(.gnav-menu) {
        .gnav-list:not(:last-of-type) {
          padding-top: 0;
          margin: 0;
        }
      }

      .contact-tel {
        margin-top: 0.5em;
        padding-left: 1em;
        border-left: 1px solid var(--color-font);
      }
    }
  }

  .header-logo {
    height: 50px;

    .subpage-logo,
    & h1,
    & img {
      width: 100%;
      height: 100%;
    }
  }
}

@media (max-width: 600px) {
  /* トップページ */
  .site-header {
    .contact-tel {
      display: none;
    }
  }

  /* ページ共通 */
  :where(.site-header) {
    .header-column {
      .header-logo {
        align-self: flex-start;
      }
      .gnav {
        display: none;
        .gnav-menu {
          .gnav-list {
            margin: 0.5em 0;
          }
        }
      }
    }
  }

  .hmb-icon {
    display: block;
    position: fixed;
  }
}

.gnav.open {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100vh;
  background-color: var(--color-base);
  padding: 80px 30px 0 30px;
  overflow-y: auto;

  .hmb-icon {
    display: block;
  }

  .gnav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .gnav-list {
    border: 0;
    border-bottom: 1px solid #d1d1d1;
    font-size: var(--fs-32);
    text-align: start;
    /* max-width:1050pxのheightをリセット */
    height: auto;

    .sub-label {
      display: inline-block;
      font-size: var(--fs-18);
    }

    &.reserve-label {
      display: block;
      background-color: var(--color-accent-2);
      border-bottom: 0;
      border-radius: 5px;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-top: 25px;
    }
  }
}

/* reserve-btn-fixedは常に固定 */
.reserve-btn-fixed {
  position: fixed;
  top: 30%;
  right: 0;
  z-index: 10;

  /* ボタンの形状と装飾 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 6px;

  width: clamp(200px, 25vh, 260px);
  height: 57px;
  background-color: var(--color-accent-2, #722620);

  /* 角丸：回転して右端に付くため、上側（回転前は左側）の角を丸くする */
  border-radius: 8px 8px 0 0;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);

  /* 洗練された動き：ホバー時に少し左に浮き出る */
  transition: transform 0.3s ease, background-color 0.3s ease;

  /* ★核心：右端中央を軸に90度左回転させる */
  /* 文字の底が右（画面外）を向き、上が左（画面内）を向く */
  transform-origin: right bottom;
  transform: translateY(-50%) rotate(-90deg);

  &:hover {
    background-color: #555; /* 少し明るく */
    transform: translateY(-50%) rotate(-90deg) translateX(5px);
  }
}

.reserve-btn-fixed.open {
  display: none;
}

@media (max-width: 500px) {
  .reserve-btn-fixed {
    display: none;
  }
}

:where(.sub) {
  .sub-main {
    padding-bottom: 50px;
    .sub-mv {
      position: relative;
      width: 100%;
      height: 40vw;
      min-height: 400px;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(75, 60, 50, 0) 45%, /* 下端は完全に透明 */ rgba(75, 60, 50, 0.5) 65%, /* 中間から色が不透明に */ rgb(75, 60, 50, 1) 90% /* 上端は完全に半分不透明 */);
      }

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

    .subpage-content {
      padding-top: 1em;

      .path {
        justify-content: flex-start;
        font-size: var(--fs-18);
        line-height: 1;

        li:not(last-child),
        a {
          display: flex;
          padding-right: 0.2em;
        }

        & li:last-child {
          color: #999;
        }
      }

      .page-tittle-bg {
        /* 背景画像を文字幅に合わせて配置 */
        width: fit-content;
        height: auto;
        margin-left: auto;
        margin-right: auto;
      }

      .page-title {
        font-size: var(--fs-40);
        justify-content: center;
        align-items: baseline;
        gap: 0.5em;
        line-height: 1;
        margin-top: 1em;

        background-image: url(../image/common/title-logo.png);
        /* ↓文字幅＆高さに合わせて画像を変形させる */
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: left bottom;

        & span {
          padding-left: 0.5em;
        }

        & small {
          font-size: var(--fs-18);
          padding-right: 1.5em;
        }
      }

      .sub-lead {
        display: block;
        max-width: 430px;
        margin-left: auto;
        margin-right: auto;

        .guide-content {
          margin: 4em 0;
          font-size: var(--fs-16);
        }

        .contact-guide {
          gap: 40px;
          white-space: nowrap;

          & a {
            font-size: var(--fs-18);
            width: 50%;
            max-width: 250px;
            text-align: center;
            line-height: 1;
            padding: 1em 1em;
            border-radius: 5px;
          }

          & a:first-child {
            background-color: #777;
          }
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .sub-main {
    .sub-mv {
      min-height: 300px;
    }
  }
}

.site-footer {
  background-color: var(--color-footer);

  .footer-logo-link {
    display: block;
    margin: 80px 0 120px;
    text-align: center;
    width: clamp(280px, 23vw, 440px);
    margin-left: auto;
    margin-right: auto;

    .footer-logo {
      /* display: inline-block; 画像を中央寄せ可能にする */
      width: 100%;
      height: auto;
    }
  }

  .footer-sns-links {
    display: flex;
    gap: 20px;
    margin-bottom: 160px;

    .sns-link {
      width: clamp(200px, 23vw, 300px);

      .sns-icon {
        width: 100%;
        height: auto;
        border-radius: 3px;
      }
    }
  }

  .footer-copyright {
    display: block;
    width: 100%; /* 親の幅いっぱいに広げる */
    text-align: center; /* テキストを中央寄せ */
  }
}

@media (max-width: 767px) {
  .site-footer {
    .footer-logo-link {
      margin-bottom: 80px;
    }
    .footer-sns-links {
      flex-direction: column;
      gap: 40px;
      margin-bottom: 70px;
    }
  }
}