:root {
  /* 色 */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray: #cbc9c9;

  /* フォント（Adobe Fonts kitId: jfl5jps） */
  --font-heading: "fot-udkakugoc80-pro", sans-serif;
  --font-body: "biz-udgothic", sans-serif;

  /* フォントサイズ */
  --fs-title: 70px;
  --fs-heading: 40px;
  --fs-subheading: 23px;
  --fs-body: 15px;
  --fs-furigana: 16px;
  --fs-copyright: 15px;

  /* 行間 */
  --lh-title: 100px;
  --lh-heading: 57px;
  --lh-subheading: 33px;
  --lh-body: 33px;
  --lh-furigana: 40px;

  /* レイアウト */
  --content-width: 750px;
  --content-margin-left: 138px;
  --sidebar-width: calc(100% - 888px);
  --content-padding-x: 68px;
  --content-padding-y: 83px;
}

/* ================================
   リセット
   ================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow: hidden scroll;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-body);
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow: clip visible;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================
   .site（全体レイアウト）
   ================================ */
.site {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* 全幅背景スライダー（Swiper） */
.site__bg-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

.site__bg-slider .swiper-slide {
  width: 100%;
  height: 100vh;
}

.site__bg-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site__content {
  width: var(--content-width);
  margin-left: var(--content-margin-left);
  background-color: var(--color-white);
  position: relative;
  z-index: 1;
  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.16);
}

.site__content-inner {
  padding: 0 var(--content-padding-x);
}

/* ================================
   .sidebar（右側ナビ + グラデーション背景）
   ================================ */

.sidebar {
  position: fixed;
  top: 0;
  right: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 60px;
  overflow: hidden;
  background: transparent;
  z-index: 2;
}

/* ================================
   .nav（PCナビゲーション）
   ================================ */
.nav {
  position: relative;
  z-index: 1;
  background-color: transparent;
  padding: 83px 0 65px;
  border-radius: 4px;
  transition: background-color 0.8s ease;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nav__link {
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  font-weight: bold;
  line-height: var(--lh-heading);
  color: var(--color-black);
  border-bottom: 2px solid rgba(0, 0, 0, 0.7);
  padding-bottom: 4px;
  white-space: nowrap;
  transition:
    color 0.8s ease,
    border-color 0.8s ease;
}

.nav__link:hover {
  opacity: 0.7;
}

/* ================================
   .sidebar__qr
   ================================ */
.sidebar__copyright {
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-black);
  position: fixed;
  bottom: 60px;
  right: 62px;
  transition: color 0.8s ease;
}

.sidebar__qr {
  margin-top: 0;
  z-index: 1;
}

.sidebar__qr-image {
  width: 120px;
  height: 120px;
}

.sidebar__qr-text {
  font-family: var(--font-heading);
  font-size: var(--fs-copyright);
  line-height: 23px;
  color: var(--color-black);
  transition: color 0.8s ease;
  margin-top: 28px;
}

/* ================================
   .hero
   ================================ */
.hero {
  padding-top: 83px;
}

.hero__inner {
  padding: 0 var(--content-padding-x);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: bold;
  line-height: var(--lh-title);
  color: var(--color-black);
}

.hero__furigana {
  font-family: var(--font-heading);
  font-size: var(--fs-furigana);
  line-height: var(--lh-furigana);
  margin-top: 10px;
}

.hero__english {
  font-family: var(--font-heading);
  font-size: var(--fs-furigana);
  line-height: var(--lh-furigana);
  margin-top: -6px;
}

.hero__divider {
  width: 100%;
  height: 3px;
  background-color: var(--color-black);
  margin-top: 93px;
}

/* ================================
   共通セクションスタイル
   ================================ */

/* セクション見出し共通 */
.concept__heading,
.profile__heading,
.service__heading,
.hours__heading,
.access__heading,
.payment__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  font-weight: bold;
  line-height: var(--lh-heading);
  display: inline-block;
  border-bottom: 1px solid #000000;
  padding-bottom: 3px;
}

.concept__heading {
  margin-bottom: clamp(45px, calc(41.67px + 0.43vw), 50px);
}

.concept {
  padding-top: clamp(100px, calc(84.67px + 2vw), 123px);
  padding-bottom: clamp(50px, calc(44px + 0.78vw), 59px);
}

.concept__subtitle {
  font-family: var(--font-heading);
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: bold;
  margin-bottom: clamp(35px, calc(31.67px + 0.43vw), 40px);
  letter-spacing: 0.05em;
}

.concept__text {
  letter-spacing: 0.05em;
  margin-top: 13px;
}

.concept__text p {
  margin-bottom: 0;
}

/* ================================
   .profile
   ================================ */
/* XD: y=1103〜1927, 824px */
.profile__heading {
  margin-bottom: clamp(46px, calc(42px + 0.52vw), 52px);
}

.profile {
  padding-bottom: clamp(60px, calc(54px + 0.78vw), 69px);
}

.profile__image-placeholder {
  width: 393px;
  background-color: var(--color-gray);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 14px;
}

.profile__subsection {
  margin-top: clamp(52px, calc(48px + 0.52vw), 58px);
}

.profile__image-placeholder + .profile__subsection {
  margin-top: clamp(65px, calc(61.67px + 0.43vw), 70px);
}

.br-s {
  display: inline-block;
}

.profile__subsection-title {
  font-family: var(--font-heading);
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: bold;
  margin-bottom: clamp(25px, calc(23px + 0.26vw), 28px);
}

.profile__subsection-text {
  line-height: var(--lh-body);
}

/* ================================
   .service
   ================================ */
.service__heading {
  margin-bottom: clamp(35px, calc(33.67px + 0.17vw), 37px);
}

.service__list {
  display: flex;
  gap: 40px;
}

.service__items {
  line-height: var(--lh-body);
}

/* ================================
   .hours
   ================================ */
.hours__heading {
  margin-bottom: clamp(38px, calc(35.33px + 0.35vw), 42px);
}

.hours {
  padding-top: clamp(86px, calc(80px + 0.78vw), 95px);
}

.hours__text {
  line-height: var(--lh-body);
}

/* ================================
   .access
   ================================ */
.access {
  margin-top: clamp(92px, calc(86.67px + 0.69vw), 100px);
}

.access__heading {
  margin-bottom: clamp(35px, calc(33px + 0.26vw), 38px);
}

.access__subsection {
  margin-top: 24px;
}

.access__subsection:first-of-type {
  margin-top: 0;
}

.access__subsection-title {
  font-family: var(--font-heading);
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: bold;
}

.access__subsection-text {
  line-height: var(--lh-body);
  padding-top: 17px;
}

.access__contact-note {
  padding-top: 45px;
}

.access__icons {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
}

.access__icon-link {
  display: block;
  width: 60px;
  height: 60px;
  transition: opacity 0.2s;
}

.access__icon-link:hover {
  opacity: 0.8;
}

.access__icon-svg {
  display: block;
  width: 60px;
  height: 60px;
}

.access__icons-break {
  display: none;
}

/* ================================
   .payment
   ================================ */
.payment__heading {
  margin-bottom: clamp(35px, calc(33.67px + 0.17vw), 37px);
}

.payment__text {
  line-height: var(--lh-body);
}

.payment__icons {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

.payment__icon {
  height: 38px;
  width: auto;
}

/* ================================
   .payment
   ================================ */
.payment {
  padding-top: clamp(46px, calc(42px + 0.52vw), 52px);
  padding-bottom: clamp(200px, calc(180px + 2.6vw), 230px);
}

/* ================================
  .footer
   ================================ */

.footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000000;
  border: 1px solid #707070;
  box-sizing: border-box;
}

.footer__copyright {
  font-family: var(--font-heading);
  font-size: var(--fs-copyright);
  line-height: 23px;
  padding: 60px var(--content-padding-x) 45px;
}

/* ================================
   背景明暗に応じた文字色切替
   .site--on-dark: 暗い背景画像時に付与
   ================================ */
.site--on-dark .nav {
  background-color: transparent;
}

.site--on-dark .nav__link {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.site--on-dark .sidebar__copyright {
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.site--on-dark .sidebar__qr-text {
  color: var(--color-white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ================================
   .hamburger（SP用）
   ================================ */
.hamburger {
  display: none;
  position: fixed;
  top: 0;
  right: calc(8.6665% + 16px);
  z-index: 100;
  width: 56px;
  height: 56px;
  margin: 0;
  background-color: var(--color-black);
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 14px 12px;
}

.hamburger__line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  margin-bottom: 7px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.hamburger__line:last-child {
  margin-bottom: 0;
}

/* ハンバーガー→X変形 */
.hamburger--open .hamburger__line:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.hamburger--open .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger--open .hamburger__line:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

/* ================================
   .sp-nav（SP用オーバーレイナビ）
   ================================ */
.sp-nav {
  position: fixed;
  inset: 0;
  background-color: var(--color-black);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: none;
}

.sp-nav--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sp-nav__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 91;
  -webkit-appearance: none;
  appearance: none;
  font-size: 0;
  color: transparent;
}

.sp-nav__close::before,
.sp-nav__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 1px;
  background-color: var(--color-white);
}

.sp-nav__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sp-nav__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.sp-nav__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 90px 40px 60px 70px;
}

.sp-nav__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sp-nav__link {
  font-family: var(--font-heading);
  font-size: 35px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--color-white);
  border-bottom: 1px solid var(--color-white);
  padding-bottom: 8px;
  white-space: nowrap;
}

.sp-nav__copyright {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-white);
  margin-top: 40px;
}

/* ================================
   レスポンシブ（タブレット: ≤1279px）
   レイアウト変更のみ。コンテンツ幅82.667%中央配置、背景が両サイドに見える
   ================================ */
@media (max-width: 1279px) {
  .site {
    flex-direction: column;
    align-items: center;
  }

  .site__content {
    width: 82.6667%;
    margin-left: 0;
  }

  .sidebar {
    display: none;
  }

  .hamburger {
    display: block;
  }

  /* sp-navは.sp-nav--openクラスでdisplay:block切替 */
}

/* 768〜1279px: ハンバーガーメニュー中央揃え（リスト左端とコピーライト左端を揃える） */
@media (min-width: 768px) and (max-width: 1279px) {
  .sp-nav__inner {
    width: fit-content;
    margin: 0 auto;
    align-items: flex-start;
    padding: 120px 0 60px;
  }
}

/* ================================
   レスポンシブ（SP: ≤767px）
   ================================ */
@media (max-width: 767px) {
  .site__content {
    width: 91%;
  }

  .hamburger {
    right: calc(4.5% + 16px);
    width: 41px;
    height: 57px;
    padding: 14px 8px;
  }

  .hamburger__line {
    height: 1px;
    margin-bottom: 7px;
  }

  .site__content-inner {
    padding: 0 30px;
  }

  .hero {
    padding-top: 75px;
  }
  .hero__inner {
    padding: 0 30px;
  }
  .hero__title {
    font-size: 42px;
    line-height: 1.5;
  }

  .hero__furigana,
  .hero__english {
    font-size: 10px;
    line-height: 3;
  }

  .hero__divider {
    margin-top: 22%;
  }

  .footer__copyright {
    font-family: var(--font-heading);
    font-size: var(--fs-copyright);
    line-height: 23px;
    padding: 60px 30px 45px;
  }

  .concept {
    padding-top: 73px;
    padding-bottom: 39px;
  }

  /* セクション見出し: XD SP=36px/50px */
  .concept__heading,
  .profile__heading,
  .service__heading,
  .hours__heading,
  .access__heading,
  .payment__heading {
    font-size: 32px;
  }

  /* プロフ写真プレースホルダー */
  .profile__image-placeholder {
    width: 100%;
    max-width: clamp(250px, 80vw, 350px);
   /* height: clamp(320px, 101.33vw, 440px);*/
  }

  .payment {
    padding-bottom: clamp(40px, 16vw, 70px);
  }

  .access__icons-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }

  /* SNSアイコン: PC時と同じサイズ・間隔を維持 */
  .access__icon-link,
  .access__icon-svg {
    width: 60px;
    height: 60px;
  }

  .access__icons {
    column-gap: 14px;
    row-gap: 7px;
  }

  /* クレカアイコン */
  .payment__icon {
    height: clamp(26px, 8vw, 34px);
  }
}