@charset "utf-8";

/* ============================================
   CSS カスタムプロパティ（変数）
   ============================================ */
:root {
  /* フォント */
  --f-ja: 'Noto Serif JP', serif;
  --f-title: 'Instrument Serif', serif;

  /* カラー */
  --c-main: #931E23;
  /* メインカラー（深紅） */
  --c-accent: #B18F46;
  /* アクセント（ゴールド） */
  --c-text: #000;
  /* テキスト（ライトセクション） */
  --c-bg-gray: #F0F0F0;
  /* 背景グレー */
  --c-black: #000;
  /* ブラック背景 */
  --c-white: #fff;
  /* ホワイト */
  --c-line: #06C755;
  /* LINEグリーン */
  --c-red: #D9464C;
  /* 明るい赤（ショートナビ英字など） */
  --c-border: #C2C2C2;
  /* ボーダー色 */
  --c-dark: #272727;
  /* ダークグレー（出勤時間帯など） */
  --c-link: #3F58FF;
  --c-tel: #008eff;
  /* 電話ボタン色 */
  --c-bg-cream: #F9F8F0;
  /* クリーム背景（inquiry・コースなど） */


  /* レイアウト */
  --max-width: 520px;
  /* コンテンツ最大幅 */
  --page-width: 520px;
  /* ページ全体の最大幅 */
  --header-height: 64px;
  /* ヘッダー固定高さ */
}

/* ============================================
   ヘッダー
   ============================================ */

/* ヘッダー本体（固定） */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--c-white);
  z-index: 200;
  /* ドロワーより前面 */
}

/* PC幅制限に対応するための内側コンテナ */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 8px;
}

/* ロゴリンク */
.header__logo {
  display: block;
  line-height: 1;
}

/* ロゴ画像 */
.header__logo-img {
  height: 56px;
  width: auto;
  display: block;
}

/* ハンバーガーボタン */
.header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  /* ラインの間隔 */
  /* width: 44px;
  height: 44px;
  padding: 10px; */
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

/* ハンバーガーの横線（3本） */
.header__hamburger-line {
  display: block;
  width: 56px;
  height: 1px;
  background-color: var(--c-black);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* ドロワーオープン時：ハンバーガー → × に変換 */
.header__hamburger.is-active .header__hamburger-line:nth-child(1) {
  transform: translateY(15px) rotate(45deg);
}

.header__hamburger.is-active .header__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.header__hamburger.is-active .header__hamburger-line:nth-child(3) {
  transform: translateY(-15px) rotate(-45deg);
}

/* ============================================
   ドロワーメニュー
   ============================================ */

/* ドロワーラッパー（非表示状態） */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  /* 閉じアニメーション完了（0.3s）後に visibility: hidden を適用 */
  transition: visibility 0s 0.3s;
  z-index: 100;
  /* ヘッダーより後ろ */
}

/* ドロワーオープン時：即座に visible にしてからアニメーション開始 */
.drawer.is-open {
  visibility: visible;
  transition: visibility 0s;
  /* 開くときは遅延なし */
}

/* オーバーレイ（左側の半透明背景） */
.drawer__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drawer.is-open .drawer__overlay {
  opacity: 1;
}

/* ナビ本体（右からスライドイン） */
.drawer__nav {
  position: absolute;
  top: 0;
  right: 0;
  /* 左側に72pxページが見えるようにする */
  width: calc(100% - 72px);
  max-width: 320px;
  height: 100%;
  background-color: var(--c-black);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  /* ヘッダー分の上部余白 */
  padding-top: var(--header-height);
}

.drawer.is-open .drawer__nav {
  transform: translateX(0);
}

/* ナビリスト */
.drawer__list {
  list-style: none;
}

/* 各ナビアイテム */
.drawer__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* ナビリンク */
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.4rem, 2.7vw, 1.5rem);
  transition: background-color 0.2s ease;
}

.drawer__link:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* アクティブなリンク（現在ページ） */
.drawer__link--active {
  background-color: var(--c-main);
}

.drawer__link--active:hover {
  background-color: var(--c-main);
}

/* 右矢印アイコン（擬似要素） */
.drawer__link::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--c-white);
  border-right: 1.5px solid var(--c-white);
  transform: rotate(45deg);
}

/* ============================================
   フッター
   ============================================ */

/* フッター本体 */
.footer {
  background-color: var(--c-black);
  padding: 40px 24px 0;
  text-align: center;
}

/* フッターロゴリンク */
.footer__logo {
  display: inline-block;
  margin-bottom: 24px;
}

/* フッターロゴ画像 */
.footer__logo-img {
  height: 64px;
  width: auto;
  display: block;
}

/* 営業時間テキスト */
.footer__hours {
  font-size: clamp(1.6rem, 3.2vw, 1.8rem);
  color: var(--c-white);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

/* 電話ボタン */
.footer__tel {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background-color: var(--c-tel);
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.footer__tel:hover {
  background-color: var(--c-white);
  color: var(--c-black);
}

/* LINEボタン */
.footer__line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background-color: var(--c-line);
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.8rem, 3.6vw, 2rem);
  font-weight: 700;
  margin-bottom: 32px;
  transition: opacity 0.2s ease;
}

.footer__line:hover {
  opacity: 0.85;
}

/* LINEアイコン */
.footer__line-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* SNSリスト */
.footer__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  list-style: none;
  margin-bottom: 24px;
}

/* SNSリンク */
.footer__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.footer__sns-link:hover {
  opacity: 0.7;
}

/* SNSアイコン */
.footer__sns-icon {
  width: 32px;
  height: 32px;
  display: block;
}

/* コピーライト */
.footer__copyright {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}

/* ============================================
   Base
   ============================================ */
html {
  font-size: 62.5%;
  /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-ja);
  font-size: clamp(1.4rem, 2.9vw, 1.6rem);
  line-height: 1.7;
  background-color: #393939;
  position: relative;
  overflow-x: hidden;
  font-feature-settings: "palt"1;
  letter-spacing: 0;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  min-height: 100svh;
  /* 固定フッターCTAの高さ分だけ下部に余白（コンテンツが隠れないよう） */
  padding-bottom: 64px;
}

/* PC幅を560pxに制限（中央寄せ） */
@media (min-width: 560px) {
  body {
    max-width: var(--max-width);
    margin-inline: auto;
  }
}

/* ============================================
   PCビュー：サイド余白のグラデーションアニメーション
   body（520px）の外側に見えるビューポート背景を
   html の background-position アニメーションで動かす

   【仕組み】
   - background-size を大きく取った斜めグラデーションを
     background-position でゆっくりスライドさせる定番手法
   - html に設定することで body 外側のサイド余白のみに表示
   ============================================ */
@media (min-width: 560px) {
  html {
    background:
      linear-gradient(
        130deg,
        #0e0607 0%,
        #393939 30%,
        #1a0708 55%,
        #393939 75%,
        #111111 100%
      );
    background-size: 300% 300%;
    animation: bg-drift 14s ease-in-out infinite;
  }
}

@keyframes bg-drift {
  0%   { background-position: 0% 0%;     }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%;     }
}

/* 共通：セクション内側コンテナ（最大幅制限・中央寄せ） */
.inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 32px 16px 48px;
}

@media (min-width: 560px) {
  .inner {
    padding: 40px 24px 56px;
  }
}

/* ============================================
   メインコンテンツ（ヘッダー固定分の余白）
   ============================================ */
.main {
  padding-top: var(--header-height);
  background-color: var(--c-white);
  padding-bottom: 64px;
}

/* ============================================
   共通：セクションタイトル（.sec-title）
   英語タイトル（Instrument Serif）＋日本語サブ
   他セクションでも同じ構造を使い回す
   ============================================ */

/* タイトル行：英語と日本語をベースライン揃えで横並び */
.sec-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 2px solid var(--c-main);
  margin-bottom: 16px;
  /* 下の要素側でmargin-topを持たせる */
}

/* 英語タイトル（Instrument Serif・大） */
.sec-title__en {
  font-family: var(--f-title);
  font-size: clamp(5.6rem, 12.9vw, 6.4rem);
  line-height: 1;
  font-weight: 400;
}

/* 最初の1文字だけメインカラーに */
.sec-title__en::first-letter {
  color: var(--c-main);
}

/* 日本語サブタイトル（小・細） */
.sec-title__ja {
  font-size: clamp(1.2rem, 2.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1;
}

@media (min-width: 560px) {
  .sec-title {
    margin-bottom: 24px;
  }
}

/* ============================================
   共通：セクション説明文（.sec-note）
   セクションタイトル直下の注意書き・説明テキスト
   他セクションでも同じ構造を使い回す
   ============================================ */

.sec-note {
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  line-height: 1.8;
  color: var(--c-text);
  margin-bottom: 24px;
}

/* ============================================
   共通：セクション MOREリンク（.sec-more）
   セクション下部のリンクボタン（丸角・メインカラー）
   他セクションでも同じ構造を使い回す
   ============================================ */

/* ボタンを中央寄せ */
.sec-more {
  text-align: center;
  margin-top: 48px;
}

/* ピル形ボタン */
.sec-more__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  height: 64px;
  background-color: var(--c-main);
  color: var(--c-white);
  text-decoration: none;
  font-size: clamp(1.6rem, 3vw, 1.7rem);
  font-weight: 400;
  border-radius: 50vmax;
  transition: opacity 0.2s ease;
}

.sec-more__link:hover {
  opacity: 0.8;
}

/* ============================================
   固定フッターCTA
   電話・LINEボタンを画面下に固定表示
   ============================================ */
.fixed-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-width);
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 64px;
  z-index: 90;
  background-color: var(--c-white);
  /* ドロワー（100）より後ろ */
}

/* ボタン共通 */
.fixed-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: clamp(1.5rem, 2.9vw, 1.6rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--c-white);
  transition: opacity 0.2s ease;
}

.fixed-cta__btn:hover {
  opacity: 0.85;
}

/* 電話ボタン：メインカラー */
.fixed-cta__btn--tel {
  background-color: var(--c-tel);
}

/* LINEボタン：グリーン */
.fixed-cta__btn--line {
  background-color: var(--c-line);
}

/* アイコン */
.fixed-cta__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}