@charset "utf-8";
/* CSS Document */

/* ===== Opening intro fix ===== */
:root{ --sbw: 0px; }                   /* スクロールバー幅（JSで代入） */

/* ページのスクロールは html に統一。対応ブラウザでは溝を常時確保 */
html{
  overflow-y: auto;
  scrollbar-gutter: stable
}

body {
    background: url("../images/common/back.jpg");
	background-size: cover;
}

html, body { margin: 0; overflow-x: clip; }

/* イントロ中はスクロールを止める（バー自体は非表示になる） */
html.intro-lock{ overflow: hidden; }

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




/* ===== リセット（必要最小限） ===== */
:root{ --blue:#054aa6; --ink:#000; }
*{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }

/* ===== ヘッダー ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0px 0 6vw; background:transparent;
}
.site-header .logo img{
  display:block; height:clamp(22px, 3.4vw, 51px); width:auto;
}

/* ===== メニューボタン（青い長方形＋3本線） ===== */
.menuBtn{
  -webkit-tap-highlight-color:transparent;
  display:flex; align-items:center; gap:18px;
  background:var(--blue); color:#fff; border:0; cursor:pointer;
  padding:14px 18px 14px 20px; border-radius:0px;
  letter-spacing:.18em; font-weight:700; font-family:system-ui, sans-serif;
}
.menuBtn__label{ font-size:14px; line-height:1; }
.menuBtn__icon{ display:inline-flex; flex-direction:column; gap:6px; }
.menuBtn__icon i{
  display:block; width:28px; height:2px; background:#fff; border-radius:2px;
}
.menuBtn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ===== オフキャンバス（右からスライド） ===== */
.offcanvas{
  position:fixed; inset:0; z-index:999; pointer-events:none;
}
.offcanvas__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45);
  opacity:0; transition:opacity .3s ease;
}
.offcanvas__panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(86vw, 420px); background:rgba(0,0,0,.88); color:#fff;
  transform:translateX(100%); transition:transform .36s cubic-bezier(.22,.61,.36,1);
  display:flex; align-items:center; padding:40px 36px;
}
.offcanvas__menu{ list-style:none; margin:0; padding:0; width:100%; }
.offcanvas__menu li + li{ margin-top:18px; }
.offcanvas__menu a{
  display:block; font-family:system-ui, sans-serif; font-weight:700;
  letter-spacing:.12em; font-size:clamp(14px,1.4vw,18px);
  padding:14px 10px; border-bottom:1px solid rgba(255,255,255,.18);
}

/* 開いた状態 */
.offcanvas.is-open{ pointer-events:auto; }
.offcanvas.is-open .offcanvas__backdrop{ opacity:1; }
.offcanvas.is-open .offcanvas__panel{ transform:translateX(0); }

/* メニュー開閉時にページスクロールを止める */
body.nav-open{ overflow:hidden; }

/* ヘッダーのクリックを確実に拾う（stage等の重なり対策） */
.site-header, .menuBtn{ position:relative; z-index:1001; }

/* =========================
   Wipe Reveal (JS依存・安全設計)
   ========================= */
/* 既定は常に見える（JSが落ちても消えない） */
.reveal-wipe {
  position: relative;
  overflow: hidden;
}

/* JSが有効なときだけ初期マスクを適用（←ここが重要） */
.js .reveal-wipe {
  --wipe-duration: 800ms;
  --wipe-ease: cubic-bezier(.2,.8,.2,1);
  --wipe-delay: 0ms;
  --wipe-radius: 0;

  will-change: clip-path;
  transition: clip-path var(--wipe-duration) var(--wipe-ease) var(--wipe-delay);
}

/* 方向（左から開くが既定） */
.js .reveal-wipe,
.js .reveal-wipe-left  { -webkit-clip-path: inset(0 100% 0 0 round var(--wipe-radius)); }
.js .reveal-wipe.is-inview { -webkit-clip-path: inset(0 0 0 0 round var(--wipe-radius)); }

/* 表示状態（マスク解除） */
.js .reveal-wipe.is-inview {
  clip-path: inset(0 0 0 0 round var(--wipe-radius));
}

/* 遅延・時間は要素ごとに上書き可
   例）style="--wipe-delay:150ms; --wipe-duration:900ms; --wipe-radius:8px" */

@media (prefers-reduced-motion: reduce){
  .reveal-wipe { clip-path: inset(0 0 0 0); transition: none; }
}

/* ---- Wipe easing presets ---- */
.wipe-ease-soft      { --wipe-ease: cubic-bezier(.22, 1, .36, 1); }      /* しっとり強めのイーズアウト（Quint系） */
.wipe-ease-emph      { --wipe-ease: cubic-bezier(.05, .7, .1, 1); }      /* Material風“Emphasized decelerate” */
.wipe-ease-snappy    { --wipe-ease: cubic-bezier(.12, .9, .14, 1); }     /* キレ良くパッと止まる */
.wipe-ease-inout     { --wipe-ease: cubic-bezier(.65, 0, .35, 1); }      /* 中盤で加速→減速（Cubic in-out） */
.wipe-ease-back      { --wipe-ease: cubic-bezier(.34, 1.56, .64, 1); }   /* ほんのり“食い込み”感（back系） */
/* ---- Wipe easing: accelerate presets (序盤かなりゆっくり→速く) ---- */
.wipe-ease-accel-soft   { --wipe-ease: cubic-bezier(.12, 0, .39, 0); } /* sine-in：上品に加速 */
.wipe-ease-accel        { --wipe-ease: cubic-bezier(.30, 0, .80, .15); } /* Material “emphasized accelerate” 風 */
.wipe-ease-accel-strong { --wipe-ease: cubic-bezier(.70, 0, .84, 0); } /* expo-in：序盤かなり溜めて一気に加速 */
.wipe-ease-accel-quint  { --wipe-ease: cubic-bezier(.64, 0, .78, 0); } /* quint-in：力強い加速 */

/* =========================
   Fade-up Reveal（下からフワッ）
   ========================= */
/* JSが落ちても見えたまま（既定値） */
.reveal-fadeup {
  opacity: 1;
  transform: none;
}

/* JS有効時は初期状態を下げ＆透明にしておく（安全設計） */
.js .reveal-fadeup {
  --fade-duration: 700ms;
  --fade-delay: 0ms;
  --fade-distance: 24px; /* 下方向の初期オフセット(px) */
  --fade-ease: cubic-bezier(.2,.8,.2,1);

  opacity: 0;
  transform: translate3d(0, var(--fade-distance), 0);
  will-change: opacity, transform;
  transition:
    opacity  var(--fade-duration) var(--fade-ease) var(--fade-delay),
    transform var(--fade-duration) var(--fade-ease) var(--fade-delay);
}

/* 表示判定が入ったらフワッと定位置へ */
.js .reveal-fadeup.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* お好みのイージング・プリセット */
.fadeup-ease-soft   { --fade-ease: cubic-bezier(.22, 1, .36, 1); }  /* しっとり減速 */
.fadeup-ease-snappy { --fade-ease: cubic-bezier(.12, .9, .14, 1); } /* キレ良く止まる */
.fadeup-ease-back   { --fade-ease: cubic-bezier(.34, 1.56, .64, 1);}/* 少し食い込み感 */

/* 省エネ設定：動きを最小化 */
@media (prefers-reduced-motion: reduce){
  .reveal-fadeup{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   Global Footer
   ========================= */
footer{
  background: #efefef;
  text-align: center;
  color: #222;
  padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 7vw, 100px); /* しっかり上下余白 */
}

/* お問い合わせボタン画像 */
footer .contact{
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
footer .contact img{
  width: clamp(200px, 28vw, 400px);
  height: auto;
  display: inline-block;
}

/* 電話まわり */
footer .tel-area{
  margin: clamp(10px, 4vw, 40px) auto;
}
footer .tel-area p{
  margin: 0;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 2;
  font-weight: 600;
  letter-spacing: .02em;
  color: #333;
}
footer .tel-area a{
  display: inline-block;
  text-decoration: none;
  margin: clamp(6px, 1.5vw, 12px) 0;
}
footer .tel-area a img{
  display: block;
  width: clamp(320px, 36vw, 560px); /* 電話番号画像を大きく */
  height: auto;
}

/* ロゴとコピーライト */
footer .foot-logo{
  margin: clamp(24px, 5vw, 36px) 0 10px;
}
footer .foot-logo img{
  width: clamp(140px, 18vw, 220px);
  height: auto;
  display: inline-block;
}
footer > p{
  margin: 0;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .04em;
  color: #222;
}

/* ちょっとしたホバー効果（PCのみ） */
@media (hover:hover){
  footer .tel-area a:hover{ transform: translateY(-1px); }
}