@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');

body { font-family: 'Inter', 'Noto Sans JP', sans-serif; }

/* --- スクロールアニメーション用 --- */
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-left { opacity: 0; transform: translateX(-20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-right { opacity: 0; transform: translateX(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.visible { opacity: 1; transform: translate(0, 0); }

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* --- グローバルメニュー：スライドアンダーライン --- */
.nav-link {
  position: relative;
  display: inline-block;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0px;
  left: 0;
  background-color: #111111;
  transform-origin: bottom right;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* --- お問い合わせボタン：シャイン（光る）エフェクト --- */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right, 
    rgba(255,255,255,0) 0%, 
    rgba(255,255,255,0.4) 50%, 
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  transition: none;
}

.btn-shine:hover::before {
  left: 150%;
  transition: all 0.6s ease;
}

/* --- アコーディオン用アニメーション --- */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr; /* 初期状態は高さ0 */
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.4s ease, margin-bottom 0.4s ease;
}

.accordion-content.is-open {
  grid-template-rows: 1fr; /* 開くと中身の高さに合わせて広がる */
  opacity: 1;
}

.accordion-inner {
  overflow: hidden; /* 高さが0の時にはみ出さないようにする */
}

.accordion-icon {
  transition: transform 0.4s ease;
}

.accordion-icon.is-open {
  transform: rotate(180deg); /* 矢印を反転させる */
}


/* ========================
   ローディング画面 (修正版)
   ======================== */
.loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    /* ★漆黒から、上品なダークグレーに変更 */
    background-color: #2c2c2e; 
    color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* ★追加：スタイリッシュに切り取るための準備 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.loader-content {
    text-align: center;
    width: 80%;
    max-width: 400px;
}
.loader-text {
    font-size: 2rem; /* ★3remから2remに縮小 */
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 8px; /* 下のテキストとの間隔 */
    font-variant-numeric: tabular-nums;
}
/* ★追加：サブテキストのスタイル */
.loader-subtext {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 40px; /* バーとの間隔 */
}
.loader-bar-wrap {
    width: 100%;
    height: 1px; /* バーをより細くして繊細に */
    background-color: rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
}
.loader-bar {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--accent-color);
}


/* ========================
   ローディング画面 (線画ドロー＆崩壊版)
   ======================== */
.loader {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #222222; /* 最初の無地のグレー */
    z-index: 9999;
}

/* 描画用の線と崩壊用のグリッドを同じ位置に重ねる */
.line-container, .grid-loader {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* 描画される線（最初は幅・高さが0） */
.h-line {
    position: absolute; left: 0; height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    width: 0%; /* JSで100%まで伸ばす */
}
.v-line {
    position: absolute; top: 0; width: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    height: 0%; /* JSで100%まで伸ばす */
}

/* 崩壊用のマス目（最初は見えない） */
.grid-loader {
    display: grid;
    opacity: 0; /* 100%になるまで隠しておく */
}
.grid-cell {
    background-color: #222222; /* 背景のグレーと同じ色 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 完成した線と同じような見た目 */
    box-sizing: border-box;
    will-change: transform, opacity;
}

/* 中央テキスト */
.loader-center {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    text-align: center;
    color: #ffffff;
    pointer-events: none;
}
.loader-text {
    font-size: 2rem; font-weight: 700; letter-spacing: 2px;
    margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.loader-subtext {
    font-size: 0.7rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: #aaa;
}