@charset "UTF-8";

/* ========================================================
   Base Styles
======================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden; /* ★追加：横スクロールを完全に防ぐ */
  width: 100%;        /* ★追加：横幅を画面サイズに固定 */
}

body {
  background-color: #fafafa;
  color: #333333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* ★追加：横スクロールを完全に防ぐ */
  width: 100%;        /* ★追加：横幅を画面サイズに固定 */
}

/* ========================================================
   Components
======================================================== */

/* ヒーローエリアの背景画像設定 */
.hero-bg {
  background-image: url('../_src/20329317/pixta_32643635_l.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* ★修正：テキストを描くように表示するワイプアニメーション（速度を遅く調整） */
.text-wipe {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: wipeText 2.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* ★修正：日本語部分の表示（フェードインさせながらワイプ） */
.text-wipe-delay {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  opacity: 0;
  animation: wipeTextFadeIn 2.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation-delay: 1.2s; /* 英語の後にゆっくり出るように調整 */
}

@keyframes wipeText {
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes wipeTextFadeIn {
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1; /* ここで確実に表示させる */
  }
}

/* ★修正：ABOUTのテキスト行間を大幅に広げる専用クラス */
.about-line-height {
  line-height: 2.8 !important;
}

/* Q&A アコーディオン（<details>）のアニメーション調整 */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
/* ★修正：Q&Aをより「ぬるっと」動かすためのイージング調整 */
.faq-content-inner {
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out;
}

/* LINE固定ボタン (hover時の動き) */
.fixed-line-btn {
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
.fixed-line-btn:hover {
  transform: translateY(-5px);
}

/* Form Overrides */
.form-input:focus {
  outline: none;
}