@charset "UTF-8";
/* ========================================
   Buttons
   Version: 1.0
   Author: Fujii Yuri
   Description: ブランド・アクセントの2系統 × S/Mサイズ
======================================== */
/* ========================================
   step-log.com Design Tokens
   Version: 1.0
   Author: Fujii Yuri
   Description: ブランドカラー、タイポグラフィ、余白スケールなど共通設定
======================================== */
/* ----------------------------------------
   1. Colors (Palette)
---------------------------------------- */
/* === ブランドカラー（Blue × Sky） === */
/* === サブカラー（クールな補助トーン） === */
/* === アクセント（暖色バランス） === */
/* === モノクローム === */
/* ----------------------------------------
   2. Colors (Semantic) ー 実装用
---------------------------------------- */
/* ----------------------------------------
   Shadow System
---------------------------------------- */
/* ----------------------------------------
   3. Gradients（ロゴ調）
---------------------------------------- */
/* ----------------------------------------
   4. Radius
---------------------------------------- */
/* ----------------------------------------
   5. Typography
---------------------------------------- */
/* === Font Size === */
/* === Line Height & Weight === */
/* ----------------------------------------
   6. Spacing Scale
---------------------------------------- */
/* ----------------------------------------
   7. Layout
---------------------------------------- */
/* ----------------------------------------
   8. Breakpoints
---------------------------------------- */
/* ----------------------------------------
   Shadow System
---------------------------------------- */
/* ========================================
   Buttons
   Version: 1.0
   Author: Fujii Yuri
   Description: ブランド・アクセントの2系統 × S/Mサイズ
======================================== */
/* ===== 1) container ===== */
/* coで呼べるミックスイン */
/* 使い方:
.inner {
  // ベース（SP想定）：幅は100%で左右20px余白
  @include mixin.container(); // デフォルト値使用
  // PCで左右30pxに上書き（maxはそのままでOK）
  @include mixin.mq(md-up) { // 768px以上
    padding-inline: v.$pad-pc; // 30pxに上書き
  }
} */
/* ===== 2) ブレイクポイント ===== */
/* mq で呼べるミックスイン */
/* ----------------------------------------
   共通アニメーション（モダンなhover演出）
---------------------------------------- */
/* 背景が右下からふわっと塗り広がる */
@-webkit-keyframes btn-fill {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes btn-fill {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
/* 軽く浮き上がる＆シャドウ強調 */
@-webkit-keyframes btn-float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  100% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}
@keyframes btn-float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  100% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}
/* ----------------------------------------
   共通スタイル
---------------------------------------- */
button.btn-s, .btn-s {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid transparent;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-size: 200% auto;
  background-position: 0 0;
  will-change: transform, box-shadow;
}

/* アイコンのサイズとアニメ（既存のgapで間隔はOK） */
.btn-m__icon {
  font-size: 1.1em;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.btn-m:hover .btn-m__icon {
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
} /* 右にスッ */
.btn-s i {
  font-size: 1em;
} /* ヘッダーの視認性を揃える */
@media (min-width: 960px) {
  .btn-m {
    height: 60px;
    padding: 0 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-m {
    -webkit-transition: background 0.25s ease, border-color 0.25s ease, -webkit-box-shadow 0.25s ease;
    transition: background 0.25s ease, border-color 0.25s ease, -webkit-box-shadow 0.25s ease;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, -webkit-box-shadow 0.25s ease;
  }
}
/* ----------------------------------------
   Sサイズ（タグ・ミニCTA）
---------------------------------------- */
.btn-s {
  font-size: 14px;
  height: 48px; /* ボタンの統一高さ */
  padding: 6px 22px;
  /* --- Blue ver. --- */
}
.btn-s--blue {
  color: #444;
  border-color: #4a8fd8;
  background: linear-gradient(120deg, #fff 50%, #4a8fd8 50%);
  background-size: 200% 100%;
}
.btn-s--blue:hover {
  color: #fff;
  background-position: 100% 0;
  -webkit-animation: btn-float 0.35s ease forwards;
          animation: btn-float 0.35s ease forwards;
}

/* button要素に対する明示的なスタイル */
button.btn-s {
  font-size: 14px;
  height: 48px;
  padding: 6px 22px;
  /* --- Coral ver. --- */
}
button.btn-s.btn-s--blue {
  color: #444 !important;
  border-color: #4a8fd8 !important;
  background: linear-gradient(120deg, #fff 50%, #4a8fd8 50%) !important;
  background-size: 200% 100% !important;
}
button.btn-s.btn-s--blue:hover {
  color: #fff !important;
  background-position: 100% 0 !important;
  -webkit-animation: btn-float 0.35s ease forwards;
          animation: btn-float 0.35s ease forwards;
}
button.btn-s--coral {
  color: #ff8d3b;
  border-color: #ff8d3b;
  background: linear-gradient(120deg, #fff 50%, #ff8d3b 50%);
  background-size: 200% 100%;
}
button.btn-s--coral:hover {
  color: #fff;
  background-position: 100% 0;
  -webkit-animation: btn-float 0.35s ease forwards;
          animation: btn-float 0.35s ease forwards;
}

/* ----------------------------------------
   Mサイズ（メインCTA）
---------------------------------------- */
/* 共通 */
.btn-m {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.6em;
  height: 56px;
  padding: 0 26px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  text-decoration: none;
  letter-spacing: 0.04em;
  background-clip: padding-box;
  position: relative;
  isolation: isolate;
  -webkit-transition: background 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: background 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  -webkit-box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
          box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.btn-m span {
  position: relative;
  z-index: 2;
}
.btn-m:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Brand（青） */
.btn-m--brand {
  background: -webkit-gradient(linear, left top, left bottom, from(#66b3ff), to(#4a8fd8));
  background: linear-gradient(180deg, #66b3ff, #4a8fd8);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  /* 光沢 */
}
.btn-m--brand::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 12px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), color-stop(55%, rgba(255, 255, 255, 0)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: soft-light;
  z-index: 1;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.btn-m--brand:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}
.btn-m--brand:hover::before {
  opacity: 0.75;
}

/* Accent（コーラル） */
.btn-m--accent {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 158.7979591837, 89.6)), to(#ff8d3b));
  background: linear-gradient(180deg, rgb(255, 158.7979591837, 89.6), #ff8d3b);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-m--accent:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

/* 透過ゴースト（必要なら .btn-m--ghost 追加） */
.btn-m--ghost {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.12)), to(rgba(255, 255, 255, 0.06)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(0, 0, 0, 0.1);
}
.btn-m--ghost:hover {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.16)), to(rgba(255, 255, 255, 0.08)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

/* ----------------------------------------
   アニメーション抑制（prefers-reduced-motion）
---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-s,
  .btn-m {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transform: none !important;
            transform: none !important;
    -webkit-transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
}
/* ----------------------------------------
   高詳細度スタイル（フォームプラグイン対策）
---------------------------------------- */
form button[type=submit].btn-s.btn-s--blue,
.wpcf7-form button[type=submit].btn-s.btn-s--blue,
input[type=submit].btn-s.btn-s--blue {
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  gap: 10px !important;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  border: 2px solid #4a8fd8 !important;
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
  background: linear-gradient(120deg, #fff 50%, #4a8fd8 50%) !important;
  background-size: 200% 100% !important;
  background-position: 0 0 !important;
  will-change: transform, box-shadow !important;
  font-size: 14px !important;
  height: 48px !important;
  padding: 6px 22px !important;
  color: #444 !important;
}
form button[type=submit].btn-s.btn-s--blue:hover,
.wpcf7-form button[type=submit].btn-s.btn-s--blue:hover,
input[type=submit].btn-s.btn-s--blue:hover {
  color: #fff !important;
  background-position: 100% 0 !important;
  -webkit-animation: btn-float 0.35s ease forwards !important;
          animation: btn-float 0.35s ease forwards !important;
}

/* ========================================
   Breadcrumb
   Version: 1.0
   Author: Fujii Yuri
   Description: パンくずリスト（構造化マークアップ前提）
======================================== */
/* ----------------------------------------
   ベース
---------------------------------------- */
.breadcrumb {
  font-size: 14px;
  color: #8f9aa3;
  padding-block: 10px;
}

/* ----------------------------------------
   リスト構造
---------------------------------------- */
.breadcrumb__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ----------------------------------------
   各アイテム
---------------------------------------- */
.breadcrumb__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* 現在ページ（リンクなし） */
}
.breadcrumb__item a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
}
.breadcrumb__item a:hover {
  color: #2f5ea6;
}
.breadcrumb__item a:focus-visible {
  outline: 2px solid rgba(74, 143, 216, 0.4);
  outline-offset: 2px;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}
.breadcrumb__item[aria-current=page] {
  color: #444;
  font-weight: 700;
  pointer-events: none;
}

/* ----------------------------------------
   区切り（ > や / ）
---------------------------------------- */
.breadcrumb__sep {
  color: #8f9aa3;
  opacity: 0.6;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* ========================================
   CTA Card
   Version: 1.1 (for step-log.com)
   Author: Fujii Yuri
   Description: ブランドカラーを基調とした行動喚起セクション
======================================== */
/* ----------------------------------------
   ベース
---------------------------------------- */
.cta-card {
  position: relative;
  background: linear-gradient(290deg, #a7d1f0 0%, #4a8fd8 55%, #2f5ea6 100%);
  color: #fff;
  border-radius: 20px;
  text-align: center;
  padding: clamp(32px, 6vw, 60px) clamp(20px, 4vw, 40px);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  isolation: isolate; /* ::before の重なり制御 */
  max-width: 800px;
  margin-inline: auto;
  /* 背景にやわらかい光のグラデーション（装飾） */
  /* --- 白背景バリエーション --- */
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.2), transparent 70%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .cta-card {
    display: grid;
    place-items: center;
  }
}
.cta-card--white {
  background: #fff;
  border: 2px solid #e6eaed;
  color: #444;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.cta-card--white::before {
  display: none;
}

/* ----------------------------------------
   タイトル
---------------------------------------- */
.cta-card__title {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: clamp(14px, 2vw, 20px);
  color: #fff;
  letter-spacing: 0.02em;
}
.cta-card--white .cta-card__title {
  color: #1f3a56;
}

/* ----------------------------------------
   テキスト
---------------------------------------- */
.cta-card__text {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.cta-card--white .cta-card__text {
  color: #444;
}

/* ----------------------------------------
   ボタン配置
---------------------------------------- */
.cta-card__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* ----------------------------------------
   受付時間・補足など
---------------------------------------- */
.cta-card__hours {
  margin-top: clamp(12px, 2vw, 18px);
  font-size: 14px;
  opacity: 0.9;
}
.cta-card--white .cta-card__hours {
  color: #6c7a89;
}

.cta-card__note {
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.8;
}

.cta-card__icon {
  font-size: 1.2em;
}

/* ========================================
   Reset (Light)
   Version: 1.0
   Author: Fujii Yuri
   Description: ブラウザ差異を最小限に整えた軽量リセット
======================================== */
/* ----------------------------------------
   1. 基本設定
---------------------------------------- */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%; /* モバイルの自動拡大防止 */
  scroll-behavior: smooth; /* スムーズスクロール */
}

body {
  margin: 0;
}

/* ----------------------------------------
   2. メディア要素
---------------------------------------- */
img,
svg,
video,
canvas,
picture {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: clip; /* アセットはみ出し防止 */
}

/* ----------------------------------------
   3. リンク
   ※色やhover装飾は base.scss で定義
---------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

/* ----------------------------------------
   4. リスト
---------------------------------------- */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ----------------------------------------
   5. タイポグラフィ要素
---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

/* ----------------------------------------
   6. フォーム要素
---------------------------------------- */
input,
button,
select,
textarea {
  font: inherit; /* 親要素のフォント継承 */
  color: inherit;
  vertical-align: top;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* ボタン差異軽減（最小） */
button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* iOS/Safari用 */
}

/* ----------------------------------------
   7. テーブル
---------------------------------------- */
table {
  border-collapse: collapse;
  width: 100%;
}

/* ========================================
   Base
   Version: 1.0
   Author: Fujii Yuri
   Description: 基本のタイポグラフィ、リンク、フォームスタイルなど
======================================== */
/* ----------------------------------------
   1. Body / Typography
---------------------------------------- */
body {
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.6;
  color: #444;
  background-color: #fff !important; /* WordPressのデフォルトスタイルを強制上書き */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em; /* Noto Sans JP + 英字系の妥協点 */
}

/* WordPress固有の要素のリセット */
.admin-bar body {
  background-color: #fff !important;
}

html {
  background-color: #fff !important; /* htmlの背景も明示的に設定 */
}

/* ----------------------------------------
   2. Headings
---------------------------------------- */
h1,
.h1 {
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.2;
  color: #1f3a56;
}

h2,
.h2 {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  color: #1f3a56;
}

h3,
.h3 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  color: #1f3a56;
}

h4,
.h4 {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  color: #1f3a56;
}

/* ----------------------------------------
   3. Links
---------------------------------------- */
a {
  color: #4a8fd8;
  text-underline-offset: 2px;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
a:hover {
  color: #2f5ea6;
}
a:focus-visible {
  outline: 2px solid rgba(74, 143, 216, 0.4);
  outline-offset: 2px;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}

/* ----------------------------------------
   4. Focus Visible
---------------------------------------- */
:focus {
  outline: none; /* デフォルトブラウザの青枠を削除 */
}

:focus-visible {
  outline: 2px solid rgba(74, 143, 216, 0.4);
  outline-offset: 2px;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}

/* ----------------------------------------
   5. Motion (ユーザー環境設定に準拠)
---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
            animation: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* ----------------------------------------
   6. Form Elements
---------------------------------------- */
input[type=text],
input[type=email],
input[type=tel],
select,
textarea {
  font: inherit;
  line-height: 1.4;
  height: 50px;
  padding-inline: clamp(12px, 2vw, 16px);
  border-radius: 8px;
  border: 1px solid #e6eaed;
  background-color: #fff;
  width: 100%;
}

textarea {
  min-height: 140px;
  height: auto;
  padding-block: 10px;
  resize: vertical;
}

/* ----------------------------------------
   7. Buttons
---------------------------------------- */
button,
.button,
input[type=submit] {
  font: inherit;
  font-weight: 700;
  height: clamp(40px, 4.5vw, 48px);
  padding-inline: clamp(12px, 2vw, 16px);
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  color: #fff;
  background-color: #4a8fd8;
  -webkit-transition: background-color 0.3s ease, opacity 0.3s ease;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}
button:hover,
.button:hover,
input[type=submit]:hover {
  background-color: #2f5ea6;
}
button:disabled,
.button:disabled,
input[type=submit]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
Header（PC：flip／SP：slide down）
Author: Fujii Yuri
======================================== */
/* ----------------------------------------
1. Header Base
---------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px); /* 背景ぼかし */
  z-index: 100;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 70px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .header__inner {
    height: 80px;
  }
}

/* ----------------------------------------
2. Logo
---------------------------------------- */
.header__logo {
  margin: 0;
  z-index: 300;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.header__logo-link {
  font-family: "Niconne", cursive;
  font-weight: 500;
  color: #4a8fd8;
  font-size: clamp(32px, 4vw, 40px);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__logo-link:hover {
  color: #2f5ea6;
}

/* ----------------------------------------
3. Navigation (gnav)
---------------------------------------- */
.gnav {
  position: fixed;
  top: 70px;
  right: 0;
  width: 100%;
  height: calc(100dvh - 70px);
  background: #e9f4fb;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 300; /* ヘッダーより上、ハンバーガーより下 */ /* 初期は「少し右＋透明＋クリック無効」で待機 */
  -webkit-transform: translate3d(16px, 0, 0);
          transform: translate3d(16px, 0, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* スムーズに遷移 */
  -webkit-transition: opacity 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.32s, -webkit-transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: opacity 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.32s, -webkit-transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.32s;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.32s, -webkit-transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform, opacity;
  contain: content;
}
@media screen and (min-width: 768px) {
  .gnav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: static;
    width: auto;
    height: auto;
    -webkit-transform: none;
            transform: none;
    background: inherit;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-transition: none;
    transition: none;
  }
}

.gnav.is-open {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transition-delay: 0s, 0s, 0s;
          transition-delay: 0s, 0s, 0s;
}

.gnav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin: 38px 0 0 0;
  list-style: none;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .gnav__list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px; /* 固定幅に合わせて間隔を調整 */
    margin: 0;
    padding: 8px 8px;
  }
}

.gnav__list a {
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: #1f3a56;
}

/* body固定（背景スクロール防止） */
body.is-fixed {
  overflow: hidden;
}

/* ----------------------------------------
 4. Hamburger Menu
 ---------------------------------------- */
.header__icon {
  display: grid;
  place-content: center;
  width: 64px;
  height: 64px;
  border: 0;
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 400; /* gnavより上に表示 */
  position: relative; /* z-indexを有効にする */
}
@media screen and (min-width: 768px) {
  .header__icon {
    display: none;
  }
}

/* ハンバーガーアイコンの線 */
.header-icon__bar,
.header-icon__bar::before,
.header-icon__bar::after {
  content: "";
  display: block;
  inline-size: 36px;
  block-size: 3px;
  background: #4a8fd8;
  border-radius: 6px;
  -webkit-transition: opacity 0.2s ease, background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: opacity 0.2s ease, background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease, -webkit-transform 0.2s ease;
}

.header-icon__bar {
  position: relative;
}

.header-icon__bar::before {
  position: absolute;
  left: 0;
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}

.header-icon__bar::after {
  position: absolute;
  left: 0;
  -webkit-transform: translateY(12px);
          transform: translateY(12px);
}

/* ハンバーガーを"×"アイコンに変形 */
.header__icon.is-open .header-icon__bar {
  background-color: transparent;
}

.header__icon.is-open .header-icon__bar::before {
  -webkit-transform: translateY(0) rotate(30deg);
          transform: translateY(0) rotate(30deg);
}

.header__icon.is-open .header-icon__bar::after {
  -webkit-transform: translateY(0) rotate(-30deg);
          transform: translateY(0) rotate(-30deg);
}

/* フォーカス見える化 */
.header__icon:focus-visible {
  outline: 2px solid rgba(74, 143, 216, 0.4);
  outline-offset: 2px;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}

/* 動きを減らす設定に追従 */
@media (prefers-reduced-motion: reduce) {
  .header-icon__bar,
  .header-icon__bar::before,
  .header-icon__bar::after {
    -webkit-transition: none;
    transition: none;
  }
}
/* ----------------------------------------
5. Navigation Links (PC Flip Animation)
---------------------------------------- */
.gnav__link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 90px; /* 統一された固定幅 */
  height: 48px; /* gnav__itemと統一 */
  -webkit-perspective: 600px;
          perspective: 600px;
  text-align: center;
  text-decoration: none;
  color: #1f3a56;
}
@media screen and (max-width: 767px) {
  .gnav__link {
    width: auto;
    height: auto;
    -webkit-perspective: none;
            perspective: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* 縦積みレイアウト */
    gap: 4px; /* 英語と日本語の間隔 */
    padding: 16px 24px; /* タップ領域 */
    border-radius: 8px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; /* SP時のホバー・タップエフェクト */
  }
  .gnav__link:hover, .gnav__link:active {
    background: rgba(74, 143, 216, 0.05);
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }
  .gnav__link:hover .gnav-text--front::after, .gnav__link:active .gnav-text--front::after {
    width: 100%; /* ホバー時は下線を100%に */
    opacity: 1; /* 完全不透明に */
    height: 3px; /* 少し太く */
  }
}

.gnav-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  white-space: nowrap; /* 文字の改行を防ぐ */
}
@media screen and (max-width: 767px) {
  .gnav-text {
    position: static;
    -webkit-transform: none !important;
            transform: none !important;
    white-space: normal;
  }
}

.gnav-text--front {
  color: #1f3a56;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  font-size: 16px; /* 英語は大きめ */
}
@media screen and (max-width: 767px) {
  .gnav-text--front {
    font-weight: 700; /* SP時は太字 */
    position: relative;
    padding-bottom: 6px; /* 下線との間隔 */ /* 常時表示の美しい下線 */
  }
  .gnav-text--front::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80%; /* 文字幅より少し短めで洗練された印象 */
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, #4a8fd8), color-stop(50%, #66b3ff), color-stop(80%, #4a8fd8), to(transparent));
    background: linear-gradient(90deg, transparent 0%, #4a8fd8 20%, #66b3ff 50%, #4a8fd8 80%, transparent 100%); /* グラデーション下線 */
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    border-radius: 1px;
    opacity: 0.8; /* 少し透明にして上品に */
  }
}

.gnav-text--back {
  color: #4a8fd8;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
@media screen and (max-width: 767px) {
  .gnav-text--back {
    font-weight: 400; /* SP時は通常の太さ */
    font-size: 12px; /* 日本語は小さめ */
  }
}

/* PC専用：ホバーエフェクト */
@media screen and (min-width: 768px) {
  .gnav__link:hover .gnav-text--front {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  .gnav__link:hover .gnav-text--back {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
/* ----------------------------------------
6. Navigation Items
---------------------------------------- */
.gnav__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .gnav__item {
    height: 48px; /* PC時の統一高さ */
  }
}

.gnav__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

/* ----------------------------------------
7. CTA Link
---------------------------------------- */
@media screen and (max-width: 767px) {
  .gnav__item--cta {
    margin-top: 20px;
  }
}
@media screen and (min-width: 768px) {
  .gnav__item--cta {
    margin-left: 8px; /* CTAボタンの前に少し余白 */
  }
}

.gnav__item--cta .btn-s {
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 48px; /* ボタンの統一高さ */
}

/* ===== SP版375ピクセル・PC版1280ピクセル確認 ===== */
/* ----------------------------------------
 1. Hero Base 
 ---------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  color: #fff;
  display: grid;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  z-index: 1;
  margin-top: -70px;
  padding-top: 70px;
}
@media screen and (min-width: 768px) {
  .hero {
    margin-top: -80px;
    padding-top: 80px;
  }
}

/* ---------------------------------------- 
  2. Hero Background 
  ---------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: -webkit-gradient(linear, left top, left bottom, from(#b5e6e2), to(#4a8fd8));
  background: linear-gradient(180deg, #b5e6e2 0%, #4a8fd8 100%);
  overflow: hidden;
}

/* 波のアニメーション */
.hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 40svh;
  opacity: 0.8;
}

.hero__wave path {
  -webkit-animation: waveFlow 12s linear infinite;
          animation: waveFlow 12s linear infinite;
}

.wave--base {
  fill: url(#waveGradBase);
  opacity: 0.9;
  -webkit-animation: waveFlow 14s linear infinite;
          animation: waveFlow 14s linear infinite;
}

.wave--shine {
  fill: url(#waveGradShine);
  opacity: 0.7;
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
  -webkit-animation: waveFlow 14s linear -2s infinite;
          animation: waveFlow 14s linear -2s infinite;
}

/* 浮遊する丸のアニメーション */
.hero__circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(1px);
  pointer-events: none;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hero__circle:nth-child(1) {
  width: 60px;
  height: 60px;
  top: 20%;
  left: 10%;
  -webkit-animation: floatCircle1 15s ease-in-out infinite;
          animation: floatCircle1 15s ease-in-out infinite;
}

.hero__circle:nth-child(2) {
  width: 40px;
  height: 40px;
  top: 60%;
  right: 15%;
  -webkit-animation: floatCircle2 12s ease-in-out infinite;
          animation: floatCircle2 12s ease-in-out infinite;
}

.hero__circle:nth-child(3) {
  width: 80px;
  height: 80px;
  bottom: 30%;
  left: 70%;
  -webkit-animation: floatCircle3 18s ease-in-out infinite;
          animation: floatCircle3 18s ease-in-out infinite;
}

.hero__circle:nth-child(4) {
  width: 30px;
  height: 30px;
  top: 40%;
  left: 80%;
  -webkit-animation: floatCircle4 10s ease-in-out infinite;
          animation: floatCircle4 10s ease-in-out infinite;
}

.hero__circle:nth-child(5) {
  width: 50px;
  height: 50px;
  bottom: 60%;
  right: 40%;
  -webkit-animation: floatCircle5 14s ease-in-out infinite;
          animation: floatCircle5 14s ease-in-out infinite;
}

.hero__circle:nth-child(6) {
  width: 35px;
  height: 35px;
  top: 15%;
  right: 25%;
  -webkit-animation: floatCircle6 13s ease-in-out infinite;
          animation: floatCircle6 13s ease-in-out infinite;
}

.hero__circle:nth-child(7) {
  width: 70px;
  height: 70px;
  bottom: 45%;
  left: 5%;
  -webkit-animation: floatCircle7 16s ease-in-out infinite;
          animation: floatCircle7 16s ease-in-out infinite;
}

.hero__circle:nth-child(8) {
  width: 25px;
  height: 25px;
  top: 70%;
  left: 30%;
  -webkit-animation: floatCircle8 11s ease-in-out infinite;
          animation: floatCircle8 11s ease-in-out infinite;
}

.hero__circle:nth-child(9) {
  width: 55px;
  height: 55px;
  top: 35%;
  right: 5%;
  -webkit-animation: floatCircle9 17s ease-in-out infinite;
          animation: floatCircle9 17s ease-in-out infinite;
}

.hero__circle:nth-child(10) {
  width: 45px;
  height: 45px;
  bottom: 15%;
  right: 60%;
  -webkit-animation: floatCircle10 14s ease-in-out infinite;
          animation: floatCircle10 14s ease-in-out infinite;
}

/* アニメーション定義 */
@-webkit-keyframes waveMove {
  0%, 100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateY(-20px) scale(1.02);
            transform: translateY(-20px) scale(1.02);
  }
}
@keyframes waveMove {
  0%, 100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateY(-20px) scale(1.02);
            transform: translateY(-20px) scale(1.02);
  }
}
@-webkit-keyframes waveFlow {
  0% {
    d: path("M0,160L60,149.3C120,139,240,117,360,122.7C480,128,600,160,720,165.3C840,171,960,149,1080,133.3C1200,117,1320,107,1380,101.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  25% {
    d: path("M0,192L60,197.3C120,203,240,213,360,208C480,203,600,181,720,170.7C840,160,960,160,1080,170.7C1200,181,1320,203,1380,213.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  50% {
    d: path("M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,208C840,213,960,203,1080,186.7C1200,171,1320,149,1380,137.3L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  75% {
    d: path("M0,160L60,170.7C120,181,240,203,360,197.3C480,192,600,160,720,149.3C840,139,960,149,1080,160C1200,171,1320,181,1380,186.7L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  100% {
    d: path("M0,160L60,149.3C120,139,240,117,360,122.7C480,128,600,160,720,165.3C840,171,960,149,1080,133.3C1200,117,1320,107,1380,101.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
}
@keyframes waveFlow {
  0% {
    d: path("M0,160L60,149.3C120,139,240,117,360,122.7C480,128,600,160,720,165.3C840,171,960,149,1080,133.3C1200,117,1320,107,1380,101.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  25% {
    d: path("M0,192L60,197.3C120,203,240,213,360,208C480,203,600,181,720,170.7C840,160,960,160,1080,170.7C1200,181,1320,203,1380,213.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  50% {
    d: path("M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,208C840,213,960,203,1080,186.7C1200,171,1320,149,1380,137.3L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  75% {
    d: path("M0,160L60,170.7C120,181,240,203,360,197.3C480,192,600,160,720,149.3C840,139,960,149,1080,160C1200,171,1320,181,1380,186.7L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  100% {
    d: path("M0,160L60,149.3C120,139,240,117,360,122.7C480,128,600,160,720,165.3C840,171,960,149,1080,133.3C1200,117,1320,107,1380,101.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
}
/* 丸のランダム浮遊アニメーション */
@-webkit-keyframes floatCircle1 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(30px, -20px) rotate(90deg);
            transform: translate(30px, -20px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-10px, -40px) rotate(180deg);
            transform: translate(-10px, -40px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-20px, 10px) rotate(270deg);
            transform: translate(-20px, 10px) rotate(270deg);
  }
}
@keyframes floatCircle1 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(30px, -20px) rotate(90deg);
            transform: translate(30px, -20px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-10px, -40px) rotate(180deg);
            transform: translate(-10px, -40px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-20px, 10px) rotate(270deg);
            transform: translate(-20px, 10px) rotate(270deg);
  }
}
@-webkit-keyframes floatCircle2 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(-25px, 30px) rotate(120deg);
            transform: translate(-25px, 30px) rotate(120deg);
  }
  66% {
    -webkit-transform: translate(15px, -15px) rotate(240deg);
            transform: translate(15px, -15px) rotate(240deg);
  }
}
@keyframes floatCircle2 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(-25px, 30px) rotate(120deg);
            transform: translate(-25px, 30px) rotate(120deg);
  }
  66% {
    -webkit-transform: translate(15px, -15px) rotate(240deg);
            transform: translate(15px, -15px) rotate(240deg);
  }
}
@-webkit-keyframes floatCircle3 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(20px, 25px) rotate(72deg);
            transform: translate(20px, 25px) rotate(72deg);
  }
  40% {
    -webkit-transform: translate(-30px, 10px) rotate(144deg);
            transform: translate(-30px, 10px) rotate(144deg);
  }
  60% {
    -webkit-transform: translate(10px, -35px) rotate(216deg);
            transform: translate(10px, -35px) rotate(216deg);
  }
  80% {
    -webkit-transform: translate(-15px, -20px) rotate(288deg);
            transform: translate(-15px, -20px) rotate(288deg);
  }
}
@keyframes floatCircle3 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(20px, 25px) rotate(72deg);
            transform: translate(20px, 25px) rotate(72deg);
  }
  40% {
    -webkit-transform: translate(-30px, 10px) rotate(144deg);
            transform: translate(-30px, 10px) rotate(144deg);
  }
  60% {
    -webkit-transform: translate(10px, -35px) rotate(216deg);
            transform: translate(10px, -35px) rotate(216deg);
  }
  80% {
    -webkit-transform: translate(-15px, -20px) rotate(288deg);
            transform: translate(-15px, -20px) rotate(288deg);
  }
}
@-webkit-keyframes floatCircle4 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(-40px, 20px) rotate(180deg);
            transform: translate(-40px, 20px) rotate(180deg);
  }
}
@keyframes floatCircle4 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(-40px, 20px) rotate(180deg);
            transform: translate(-40px, 20px) rotate(180deg);
  }
}
@-webkit-keyframes floatCircle5 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(25px, -30px) rotate(90deg);
            transform: translate(25px, -30px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-35px, -10px) rotate(180deg);
            transform: translate(-35px, -10px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(20px, 25px) rotate(270deg);
            transform: translate(20px, 25px) rotate(270deg);
  }
}
@keyframes floatCircle5 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(25px, -30px) rotate(90deg);
            transform: translate(25px, -30px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-35px, -10px) rotate(180deg);
            transform: translate(-35px, -10px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(20px, 25px) rotate(270deg);
            transform: translate(20px, 25px) rotate(270deg);
  }
}
@-webkit-keyframes floatCircle6 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(-20px, 25px) rotate(120deg);
            transform: translate(-20px, 25px) rotate(120deg);
  }
  66% {
    -webkit-transform: translate(30px, -15px) rotate(240deg);
            transform: translate(30px, -15px) rotate(240deg);
  }
}
@keyframes floatCircle6 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(-20px, 25px) rotate(120deg);
            transform: translate(-20px, 25px) rotate(120deg);
  }
  66% {
    -webkit-transform: translate(30px, -15px) rotate(240deg);
            transform: translate(30px, -15px) rotate(240deg);
  }
}
@-webkit-keyframes floatCircle7 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(35px, 20px) rotate(90deg);
            transform: translate(35px, 20px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-25px, -30px) rotate(180deg);
            transform: translate(-25px, -30px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-10px, 15px) rotate(270deg);
            transform: translate(-10px, 15px) rotate(270deg);
  }
}
@keyframes floatCircle7 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(35px, 20px) rotate(90deg);
            transform: translate(35px, 20px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-25px, -30px) rotate(180deg);
            transform: translate(-25px, -30px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-10px, 15px) rotate(270deg);
            transform: translate(-10px, 15px) rotate(270deg);
  }
}
@-webkit-keyframes floatCircle8 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(20px, -25px) rotate(144deg);
            transform: translate(20px, -25px) rotate(144deg);
  }
  80% {
    -webkit-transform: translate(-30px, 10px) rotate(288deg);
            transform: translate(-30px, 10px) rotate(288deg);
  }
}
@keyframes floatCircle8 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(20px, -25px) rotate(144deg);
            transform: translate(20px, -25px) rotate(144deg);
  }
  80% {
    -webkit-transform: translate(-30px, 10px) rotate(288deg);
            transform: translate(-30px, 10px) rotate(288deg);
  }
}
@-webkit-keyframes floatCircle9 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  30% {
    -webkit-transform: translate(-25px, -20px) rotate(108deg);
            transform: translate(-25px, -20px) rotate(108deg);
  }
  60% {
    -webkit-transform: translate(15px, 35px) rotate(216deg);
            transform: translate(15px, 35px) rotate(216deg);
  }
  90% {
    -webkit-transform: translate(20px, -10px) rotate(324deg);
            transform: translate(20px, -10px) rotate(324deg);
  }
}
@keyframes floatCircle9 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  30% {
    -webkit-transform: translate(-25px, -20px) rotate(108deg);
            transform: translate(-25px, -20px) rotate(108deg);
  }
  60% {
    -webkit-transform: translate(15px, 35px) rotate(216deg);
            transform: translate(15px, 35px) rotate(216deg);
  }
  90% {
    -webkit-transform: translate(20px, -10px) rotate(324deg);
            transform: translate(20px, -10px) rotate(324deg);
  }
}
@-webkit-keyframes floatCircle10 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(30px, 15px) rotate(72deg);
            transform: translate(30px, 15px) rotate(72deg);
  }
  40% {
    -webkit-transform: translate(-15px, -25px) rotate(144deg);
            transform: translate(-15px, -25px) rotate(144deg);
  }
  60% {
    -webkit-transform: translate(-20px, 20px) rotate(216deg);
            transform: translate(-20px, 20px) rotate(216deg);
  }
  80% {
    -webkit-transform: translate(25px, -5px) rotate(288deg);
            transform: translate(25px, -5px) rotate(288deg);
  }
}
@keyframes floatCircle10 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(30px, 15px) rotate(72deg);
            transform: translate(30px, 15px) rotate(72deg);
  }
  40% {
    -webkit-transform: translate(-15px, -25px) rotate(144deg);
            transform: translate(-15px, -25px) rotate(144deg);
  }
  60% {
    -webkit-transform: translate(-20px, 20px) rotate(216deg);
            transform: translate(-20px, 20px) rotate(216deg);
  }
  80% {
    -webkit-transform: translate(25px, -5px) rotate(288deg);
            transform: translate(25px, -5px) rotate(288deg);
  }
}
/* ---------------------------------------- 
  3. Hero Message & Inner Container 
  ---------------------------------------- */
.hero__message {
  margin-bottom: clamp(40px, 10vw, 60px);
}

.hero__sub {
  font-size: clamp(16px, 2vw, 18px);
  color: #fff;
  margin-bottom: 16px;
  opacity: 0.9;
}

.hero__title {
  font-family: "Niconne", cursive;
  font-size: clamp(60px, 8vw, 80px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 16px;
}

.hero__desc {
  font-size: clamp(16px, 2.2vw, 20px);
  color: #fff;
  opacity: 0.9;
}

.hero__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: clamp(18px, 4vw, 28px);
  margin-bottom: 100px;
}
@media screen and (min-width: 768px) {
  .hero__cta {
    margin-bottom: 120px;
  }
}

/* ---------------------------------------- 
  4. Scroll Cue
   ---------------------------------------- */
.scrollcue {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  bottom: 60px;
}
@media screen and (min-width: 768px) {
  .scrollcue {
    bottom: 80px;
  }
}

.scrollcue__text {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  position: relative;
  padding-top: 18px;
  padding-left: 3px;
}

/* 矢印（縦棒＋三角） */
.scrollcue__text::before,
.scrollcue__text::after {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.scrollcue__text::before {
  top: -35px;
  width: 2px;
  height: 30px;
  background: #fff;
  border-radius: 1px;
}

.scrollcue__text::after {
  top: -8px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #fff;
}

/* ふわっと表示＆上下ゆらぎ */
@-webkit-keyframes cue {
  0% {
    opacity: 0.2;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(-50%, 6px);
            transform: translate(-50%, 6px);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}
@keyframes cue {
  0% {
    opacity: 0.2;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  50% {
    opacity: 1;
    -webkit-transform: translate(-50%, 6px);
            transform: translate(-50%, 6px);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}
.scrollcue__text::before {
  -webkit-animation: cue 1.8s ease-in-out infinite;
          animation: cue 1.8s ease-in-out infinite;
}

.scrollcue__text::after {
  -webkit-animation: cue 1.8s ease-in-out 0.1s infinite;
          animation: cue 1.8s ease-in-out 0.1s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .scrollcue__text::before,
  .scrollcue__text::after {
    -webkit-animation: none;
            animation: none;
  }
}
.hero__sub,
.hero__title,
.hero__desc,
.hero__cta {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.7s cubic-bezier(0.6, 0.2, 0.2, 1), -webkit-transform 0.7s cubic-bezier(0.6, 0.2, 0.2, 1);
  transition: opacity 0.7s cubic-bezier(0.6, 0.2, 0.2, 1), -webkit-transform 0.7s cubic-bezier(0.6, 0.2, 0.2, 1);
  transition: opacity 0.7s cubic-bezier(0.6, 0.2, 0.2, 1), transform 0.7s cubic-bezier(0.6, 0.2, 0.2, 1);
  transition: opacity 0.7s cubic-bezier(0.6, 0.2, 0.2, 1), transform 0.7s cubic-bezier(0.6, 0.2, 0.2, 1), -webkit-transform 0.7s cubic-bezier(0.6, 0.2, 0.2, 1);
}

.hero__sub.is-animated,
.hero__title.is-animated,
.hero__desc.is-animated,
.hero__cta.is-animated {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

@-webkit-keyframes fadeUpZoom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px) scale(0.98);
            transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}

@keyframes fadeUpZoom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px) scale(0.98);
            transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}
.hero__sub.is-animated,
.hero__title.is-animated,
.hero__desc.is-animated,
.hero__cta.is-animated {
  -webkit-animation: fadeUpZoom 0.8s ease-out forwards;
          animation: fadeUpZoom 0.8s ease-out forwards;
}

/* ===== SP版375ピクセル・PC版1440ピクセル確認 ===== */
/* ================================
   footer
================================ */
.footer {
  color: #fff;
  text-align: center;
  background: radial-gradient(90% 70% at 80% 0%, rgba(167, 209, 240, 0.25), transparent 60%), -webkit-gradient(linear, left top, left bottom, from(#2f5ea6), to(#4a8fd8));
  background: radial-gradient(90% 70% at 80% 0%, rgba(167, 209, 240, 0.25), transparent 60%), linear-gradient(180deg, #2f5ea6, #4a8fd8);
  /* ===== To Top ===== */
  /* スクロール量が閾値を超えたら出現 */
  /* フッターが見え始めたら、少し上に持ち上げて被り回避 */
}
.footer .footer__toTop {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  /* 青ベースの丸ボタン */
  background: #4a8fd8;
  color: #fff;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  /* 初期は非表示（ふわっと出現） */
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translateY(12px) scale(0.94);
          transform: translateY(12px) scale(0.94);
  -webkit-transition: opacity 0.22s ease, background 0.2s ease, -webkit-transform 0.22s ease;
  transition: opacity 0.22s ease, background 0.2s ease, -webkit-transform 0.22s ease;
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.2s ease;
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.2s ease, -webkit-transform 0.22s ease;
}
.footer .footer__toTop:hover {
  background: #2f5ea6;
}
.footer .footer__toTop:focus-visible {
  outline: none;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}
.footer .footer__toTop.is-visible {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: none;
          transform: none;
}
.footer .footer__toTop.is-lift {
  bottom: clamp(72px, 10vh, 120px);
}

/* =========================
   Global Form Base
   ========================= */
.form {
  /* --- テキスト・セレクト・テキストエリア --- */
}
.form__group {
  display: grid;
  gap: 6px;
}
.form__label {
  font-weight: 700;
  color: #1f3a56;
}
.form__hint {
  color: #8f9aa3;
  font-size: 14px;
}
.form__control {
  width: 100%;
  padding-inline: clamp(12px, 2vw, 16px);
  border: 1px solid #e6eaed;
  border-radius: 8px;
  background: #fff;
  color: #444;
  -webkit-transition: border-color 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease;
}
.form__control:hover {
  border-color: #66b3ff;
}
.form__control:focus {
  outline: none;
  border-color: #4a8fd8;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}
.form__control:disabled {
  background: color-mix(in srgb, #e6eaed 40%, #fff);
  color: #8f9aa3;
  cursor: not-allowed;
}
.form__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.form__legend {
  font-weight: 700;
  margin-bottom: 4px;
  color: #1f3a56;
}
.form__actions {
  margin-top: clamp(8px, 1vw, 12px);
  text-align: center;
}
.form__consent {
  margin-top: clamp(8px, 1vw, 12px);
}

/* ----------------------------------------
   Select / Textarea
---------------------------------------- */
.select__control {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%238f9aa3' d='M7 10 0 0h14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

.textarea__control {
  height: auto;
  min-height: 160px;
  padding-block: 10px;
  resize: vertical;
}

/* ----------------------------------------
   ステータス表示
---------------------------------------- */
.is-error .form__control {
  border-color: #f7b500;
  -webkit-box-shadow: 0 0 0 2px rgba(200, 51, 73, 0.12);
          box-shadow: 0 0 0 2px rgba(200, 51, 73, 0.12);
}

.is-valid .form__control {
  border-color: #66b3ff;
  -webkit-box-shadow: 0 0 0 2px rgba(74, 143, 216, 0.12);
          box-shadow: 0 0 0 2px rgba(74, 143, 216, 0.12);
}

/* ----------------------------------------
   チェックボックス / ラジオ
---------------------------------------- */
input[type=checkbox],
input[type=radio] {
  accent-color: #4a8fd8;
  width: 18px;
  height: 18px;
}

/* 1行チェック（同意など） */
.checkline {
  display: grid;
  grid-template-columns: 20px 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 8px;
}

.checkline__input {
  width: 20px;
  height: 20px;
  margin-top: 5px;
}
@media screen and (min-width: 768px) {
  .checkline__input {
    margin-top: 7px;
  }
}

.checkline__body {
  line-height: 1.6;
}

/* ===== SP版375ピクセル・PC版1280ピクセル確認 ===== */
/* ----------------------------------------
 1. Subhero Base 
 ---------------------------------------- */
.subhero {
  position: relative;
  height: 200px;
  color: #fff;
  display: grid;
  -ms-flex-line-pack: center;
      align-content: center;
  text-align: center;
  z-index: 1;
}

/* ---------------------------------------- 
  2. Subhero Background 
  ---------------------------------------- */
.subhero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: -webkit-gradient(linear, left top, left bottom, from(#b5e6e2), to(#4a8fd8));
  background: linear-gradient(180deg, #b5e6e2 0%, #4a8fd8 100%);
  overflow: hidden;
}

/* 波のアニメーション */
.subhero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 28svh;
  opacity: 0.8;
}

@media (max-width: 767px) {
  .subhero__wave {
    aspect-ratio: 1000/260;
  } /* 少し背を低く */
}
.subhero__wave path {
  -webkit-animation: waveFlow 12s linear infinite;
          animation: waveFlow 12s linear infinite;
}

.wave--base {
  fill: url(#waveGradBase);
  opacity: 0.9;
  -webkit-animation: waveFlow 14s linear infinite;
          animation: waveFlow 14s linear infinite;
}

.wave--shine {
  fill: url(#waveGradShine);
  opacity: 0.7;
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
  -webkit-animation: waveFlow 14s linear -2s infinite;
          animation: waveFlow 14s linear -2s infinite;
}

/* 浮遊する丸のアニメーション */
.subhero__circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(1px);
  pointer-events: none;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.subhero__circle:nth-child(1) {
  width: 60px;
  height: 60px;
  top: 20%;
  left: 10%;
  -webkit-animation: floatCircle1 15s ease-in-out infinite;
          animation: floatCircle1 15s ease-in-out infinite;
}

.subhero__circle:nth-child(2) {
  width: 40px;
  height: 40px;
  top: 60%;
  right: 15%;
  -webkit-animation: floatCircle2 12s ease-in-out infinite;
          animation: floatCircle2 12s ease-in-out infinite;
}

.subhero__circle:nth-child(3) {
  width: 80px;
  height: 80px;
  bottom: 30%;
  left: 70%;
  -webkit-animation: floatCircle3 18s ease-in-out infinite;
          animation: floatCircle3 18s ease-in-out infinite;
}

.subhero__circle:nth-child(4) {
  width: 30px;
  height: 30px;
  top: 40%;
  left: 80%;
  -webkit-animation: floatCircle4 10s ease-in-out infinite;
          animation: floatCircle4 10s ease-in-out infinite;
}

.subhero__circle:nth-child(5) {
  width: 50px;
  height: 50px;
  bottom: 60%;
  right: 40%;
  -webkit-animation: floatCircle5 14s ease-in-out infinite;
          animation: floatCircle5 14s ease-in-out infinite;
}

.subhero__circle:nth-child(6) {
  width: 35px;
  height: 35px;
  top: 15%;
  right: 25%;
  -webkit-animation: floatCircle6 13s ease-in-out infinite;
          animation: floatCircle6 13s ease-in-out infinite;
}

.subhero__circle:nth-child(7) {
  width: 70px;
  height: 70px;
  bottom: 45%;
  left: 5%;
  -webkit-animation: floatCircle7 16s ease-in-out infinite;
          animation: floatCircle7 16s ease-in-out infinite;
}

.subhero__circle:nth-child(8) {
  width: 25px;
  height: 25px;
  top: 70%;
  left: 30%;
  -webkit-animation: floatCircle8 11s ease-in-out infinite;
          animation: floatCircle8 11s ease-in-out infinite;
}

.subhero__circle:nth-child(9) {
  width: 55px;
  height: 55px;
  top: 35%;
  right: 5%;
  -webkit-animation: floatCircle9 17s ease-in-out infinite;
          animation: floatCircle9 17s ease-in-out infinite;
}

.subhero__circle:nth-child(10) {
  width: 45px;
  height: 45px;
  bottom: 15%;
  right: 60%;
  -webkit-animation: floatCircle10 14s ease-in-out infinite;
          animation: floatCircle10 14s ease-in-out infinite;
}

/* アニメーション定義 */
@keyframes waveMove {
  0%, 100% {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
  50% {
    -webkit-transform: translateY(-20px) scale(1.02);
            transform: translateY(-20px) scale(1.02);
  }
}
@keyframes waveFlow {
  0% {
    d: path("M0,160L60,149.3C120,139,240,117,360,122.7C480,128,600,160,720,165.3C840,171,960,149,1080,133.3C1200,117,1320,107,1380,101.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  25% {
    d: path("M0,192L60,197.3C120,203,240,213,360,208C480,203,600,181,720,170.7C840,160,960,160,1080,170.7C1200,181,1320,203,1380,213.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  50% {
    d: path("M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,208C840,213,960,203,1080,186.7C1200,171,1320,149,1380,137.3L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  75% {
    d: path("M0,160L60,170.7C120,181,240,203,360,197.3C480,192,600,160,720,149.3C840,139,960,149,1080,160C1200,171,1320,181,1380,186.7L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
  100% {
    d: path("M0,160L60,149.3C120,139,240,117,360,122.7C480,128,600,160,720,165.3C840,171,960,149,1080,133.3C1200,117,1320,107,1380,101.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z");
  }
}
/* 丸のランダム浮遊アニメーション */
@keyframes floatCircle1 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(30px, -20px) rotate(90deg);
            transform: translate(30px, -20px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-10px, -40px) rotate(180deg);
            transform: translate(-10px, -40px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-20px, 10px) rotate(270deg);
            transform: translate(-20px, 10px) rotate(270deg);
  }
}
@keyframes floatCircle2 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(-25px, 30px) rotate(120deg);
            transform: translate(-25px, 30px) rotate(120deg);
  }
  66% {
    -webkit-transform: translate(15px, -15px) rotate(240deg);
            transform: translate(15px, -15px) rotate(240deg);
  }
}
@keyframes floatCircle3 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(20px, 25px) rotate(72deg);
            transform: translate(20px, 25px) rotate(72deg);
  }
  40% {
    -webkit-transform: translate(-30px, 10px) rotate(144deg);
            transform: translate(-30px, 10px) rotate(144deg);
  }
  60% {
    -webkit-transform: translate(10px, -35px) rotate(216deg);
            transform: translate(10px, -35px) rotate(216deg);
  }
  80% {
    -webkit-transform: translate(-15px, -20px) rotate(288deg);
            transform: translate(-15px, -20px) rotate(288deg);
  }
}
@keyframes floatCircle4 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(-40px, 20px) rotate(180deg);
            transform: translate(-40px, 20px) rotate(180deg);
  }
}
@keyframes floatCircle5 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(25px, -30px) rotate(90deg);
            transform: translate(25px, -30px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-35px, -10px) rotate(180deg);
            transform: translate(-35px, -10px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(20px, 25px) rotate(270deg);
            transform: translate(20px, 25px) rotate(270deg);
  }
}
@keyframes floatCircle6 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  33% {
    -webkit-transform: translate(-20px, 25px) rotate(120deg);
            transform: translate(-20px, 25px) rotate(120deg);
  }
  66% {
    -webkit-transform: translate(30px, -15px) rotate(240deg);
            transform: translate(30px, -15px) rotate(240deg);
  }
}
@keyframes floatCircle7 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  25% {
    -webkit-transform: translate(35px, 20px) rotate(90deg);
            transform: translate(35px, 20px) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-25px, -30px) rotate(180deg);
            transform: translate(-25px, -30px) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-10px, 15px) rotate(270deg);
            transform: translate(-10px, 15px) rotate(270deg);
  }
}
@keyframes floatCircle8 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(20px, -25px) rotate(144deg);
            transform: translate(20px, -25px) rotate(144deg);
  }
  80% {
    -webkit-transform: translate(-30px, 10px) rotate(288deg);
            transform: translate(-30px, 10px) rotate(288deg);
  }
}
@keyframes floatCircle9 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  30% {
    -webkit-transform: translate(-25px, -20px) rotate(108deg);
            transform: translate(-25px, -20px) rotate(108deg);
  }
  60% {
    -webkit-transform: translate(15px, 35px) rotate(216deg);
            transform: translate(15px, 35px) rotate(216deg);
  }
  90% {
    -webkit-transform: translate(20px, -10px) rotate(324deg);
            transform: translate(20px, -10px) rotate(324deg);
  }
}
@keyframes floatCircle10 {
  0%, 100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
  }
  20% {
    -webkit-transform: translate(30px, 15px) rotate(72deg);
            transform: translate(30px, 15px) rotate(72deg);
  }
  40% {
    -webkit-transform: translate(-15px, -25px) rotate(144deg);
            transform: translate(-15px, -25px) rotate(144deg);
  }
  60% {
    -webkit-transform: translate(-20px, 20px) rotate(216deg);
            transform: translate(-20px, 20px) rotate(216deg);
  }
  80% {
    -webkit-transform: translate(25px, -5px) rotate(288deg);
            transform: translate(25px, -5px) rotate(288deg);
  }
}
/* ---------------------------------------- 
  3. Hero Message & Inner Container 
  ---------------------------------------- */
.subhero__message {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .subhero__message {
    margin-bottom: 0;
  }
}

.subhero__sub {
  font-size: clamp(16px, 2vw, 18px);
  color: #fff;
  margin-bottom: 16px;
  opacity: 0.9;
}

.subhero__title {
  font-family: "Niconne", cursive;
  font-size: clamp(60px, 8vw, 80px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
  .subhero__title {
    margin-top: 0;
  }
}

.subhero__desc {
  font-size: clamp(16px, 2.2vw, 20px);
  color: #fff;
  opacity: 0.9;
}

/* ===== 404 Page ===== */
.section--404 {
  padding-block: clamp(50px, 6vw, 80px);
  text-align: center;
}

.notfound {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  justify-items: center;
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.notfound__lead {
  font-size: clamp(16px, 2.2vw, 20px);
  color: #1f3a56;
  font-weight: 600;
}

.notfound__text {
  font-size: clamp(16px, 2vw, 18px);
  color: #444;
  line-height: 1.8;
}

.notfound__btn {
  margin-top: clamp(16px, 2vw, 24px);
}

/* ===== SP版375ピクセル・PC版1440ピクセル確認 ===== */
/* ================================
   Works Section
================================ */
.works {
  text-align: center;
}

.works__list {
  display: grid;
  gap: 32px;
  margin-top: 48px;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .works__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .works__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

.works__item {
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  border-radius: 12px;
}
.works__item:hover {
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.works__item img {
  width: 100%;
  border-radius: 12px;
}
.works__item .works__title {
  margin-top: 20px;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: #1f3a56;
}
.works__item .works__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 20px;
}
.works__item .works__tags li {
  border: 1px solid #e6eaed;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  color: #8f9aa3;
}

.works__comingsoon {
  margin-top: 2rem;
  text-align: center;
  line-height: 1;
}
.works__comingsoon .works__comingsoon--en {
  display: block;
  font-family: "Niconne", cursive;
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
  color: #4a8fd8;
}
.works__comingsoon .works__comingsoon--jp {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: #1f3a56;
  line-height: 1;
}

/* ================================
   Modal
================================ */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 200;
}

.modal.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal__content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  max-width: 800px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.modal__close {
  position: absolute;
  top: 28px;
  right: 30px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: #4a8fd8;
  color: #fff;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-transition: opacity 0.15s ease, background 0.2s ease, -webkit-transform 0.15s ease;
  transition: opacity 0.15s ease, background 0.2s ease, -webkit-transform 0.15s ease;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.2s ease;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.2s ease, -webkit-transform 0.15s ease;
  /* 必要ならここで微調整量を変えられるようにしておく */
  --icon-nudge-x: -3px;
  --icon-nudge-y: 0px;
}
.modal__close:hover {
  background: #2f5ea6;
}
.modal__close:active {
  -webkit-transform: scale(0.96);
          transform: scale(0.96);
}
.modal__close:focus-visible {
  outline: none;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}

.modal__close .fa-xmark {
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
  -webkit-transform: translate(var(--icon-nudge-x), var(--icon-nudge-y));
          transform: translate(var(--icon-nudge-x), var(--icon-nudge-y));
  /* さらに必要なら個別に：
     transform: translate(-2px, 0); 等に変更 */
}

.modal__title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  color: #2f5ea6;
}

.modal__image {
  display: block;
  width: 100%;
  border-radius: 12px;
  margin-bottom: 24px;
}

.modal__section {
  margin-bottom: 24px;
}
.modal__section h4 {
  color: #4a8fd8;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 700;
}
.modal__section ul {
  list-style: none;
  padding: 0;
}
.modal__section ul li {
  margin-bottom: 4px;
  font-size: 15px;
  color: #1f3a56;
}
.modal__section p {
  font-size: 15px;
  line-height: 1.8;
  color: #1f3a56;
}

.modal__btn {
  text-align: center;
  margin-top: 24px;
}

.modal__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

/* =========================
   Commitment Section
========================= */
.commitment {
  /* 淡く落ち着いた縦グラデ（白寄せ） */
  --warm-top: color.mix(v.$amber, v.$white, 88%);
  --warm-btm: color.mix(v.$coral, v.$white, 90%);
  background: linear-gradient(135deg, rgba(247, 181, 0, 0.1), rgba(255, 141, 59, 0.1));
  text-align: center;
  position: relative;
  overflow: hidden;
  /* 端を静かに締めるビネット */
  /* 柔らかい“丸い光”を数個だけ。落ち着き重視で低コントラスト */
}
.commitment::after {
  content: "";
  position: absolute;
  inset: -6% -6% auto -6%; /* 少し外まで広げて切れ目を隠す */
  height: 120%;
  z-index: 0;
  background: radial-gradient(circle at 82% 18%, rgb(255, 255, 255) 0, rgb(255, 255, 255) 44px, transparent 45px), radial-gradient(circle at 18% 52%, rgba(247, 181, 0, 0.22) 0, rgba(247, 181, 0, 0.22) 60px, transparent 61px), radial-gradient(circle at 76% 78%, rgba(255, 141, 59, 0.18) 0, rgba(255, 141, 59, 0.18) 70px, transparent 71px), radial-gradient(65% 60% at 50% 55%, rgba(255, 255, 255, 0.18), transparent 60%);
  -webkit-filter: blur(6px);
          filter: blur(6px); /* エッジを柔らかく */
  opacity: 0.65;
  pointer-events: none;
  /* ゆっくり漂う微動（視覚ノイズを抑えた小さめの動き） */
  -webkit-animation: commitmentFloat 28s ease-in-out infinite;
          animation: commitmentFloat 28s ease-in-out infinite;
}

.commitment__body {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}
.commitment__body h3 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: #1f3a56;
  margin-top: 40px;
  margin-bottom: 10px;
  text-align: center;
}
.commitment__body h3:first-of-type {
  margin-top: 20px;
}
.commitment__body p {
  font-size: 16px;
  line-height: 1.9;
  color: rgb(21.08, 21.08, 21.08); /* わずかに濃くして可読性UP */
  text-align: center;
  margin-bottom: 24px;
}

/* =========================
   Service Section
========================= */
.service {
  text-align: center;
}
.service .service__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 4vw, 48px);
}
@media screen and (min-width: 768px) {
  .service .service__list {
    gap: clamp(24px, 3vw, 32px);
  }
}
.service .service__item {
  background: linear-gradient(290deg, #e9f4fb 0%, #a7d1f0 100%);
  border: 1px solid rgba(230, 234, 237, 0.8);
  border-radius: 20px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: clamp(16px, 2vw, 24px);
  text-align: left;
  position: relative;
  overflow: hidden;
  -webkit-transition: border-color 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: border-color 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  /* アイコンと見出しを青に統一 */
}
.service .service__item:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-color: rgba(74, 143, 216, 0.35);
}
.service .service__item:hover::before {
  opacity: 0.9;
}
.service .service__item .service__icon {
  font-size: clamp(40px, 6vw, 56px);
  color: #4a8fd8; /* = $blue-main */
  text-align: center;
  margin-bottom: clamp(8px, 1vw, 12px);
  position: relative;
  z-index: 1;
  line-height: 1;
}
.service .service__item .service__title {
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  color: #1f3a56;
  margin-bottom: clamp(8px, 1vw, 12px);
  position: relative;
  z-index: 1;
  text-align: center;
  /* 下線をWorks風に（任意） */
}
.service .service__item .service__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 9999px;
  background: -webkit-gradient(linear, left top, right top, from(#a7d1f0), to(#4a8fd8));
  background: linear-gradient(90deg, #a7d1f0, #4a8fd8);
  opacity: 0.85;
}
.service .service__item p {
  font-size: 14px;
  line-height: 1.8;
  color: rgb(21.08, 21.08, 21.08); /* わずかに濃くして可読性UP */
  position: relative;
  z-index: 1;
  text-align: center; /* Works と同じセンター寄せ */
}

/* =========================
   Blog Section
========================= */
.blog {
  background: #e9f4fb;
}
.blog .blog__list {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
}
@media screen and (min-width: 768px) {
  .blog .blog__list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 32px);
  }
}
.blog .blog__item {
  background: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.blog .blog__item:hover {
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.blog .blog__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.blog .blog__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.blog .blog__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.blog__item:hover .blog .blog__thumb img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.blog .blog__body {
  padding: 20px;
}
.blog .blog__title {
  font-size: 18px;
  font-weight: 700;
  color: #1f3a56;
  line-height: 1.4;
  margin-bottom: 8px;
}
.blog .blog__excerpt {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
}
.blog .blog__btn {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
}
.blog .blog__no-posts {
  text-align: center;
  padding: clamp(50px, 6vw, 80px);
  color: #8f9aa3;
  font-size: 16px;
}

/* =========================
   About Section
========================= */
.about {
  text-align: center;
  /* 各要素をエリアに割り当て */
  /* 中のブロックもセル幅をいっぱい使う */
}
.about .about__inner {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  /* SP: 画像 → 文章 */
  grid-template-columns: 1fr;
  grid-template-areas: "img" "body";
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  justify-items: stretch;
}
@media screen and (min-width: 768px) {
  .about .about__inner {
    /* PC: 左 文章（1.5）／右 画像（1） */
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas: "body img";
    -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
            justify-content: stretch;
    justify-items: stretch;
    -webkit-column-gap: clamp(24px, 3vw, 32px);
       -moz-column-gap: clamp(24px, 3vw, 32px);
            column-gap: clamp(24px, 3vw, 32px);
  }
}
.about .about__body {
  grid-area: body;
}
.about .about__img {
  grid-area: img;
}
.about .about__body,
.about .about__img {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .about .about__body {
    text-align: left;
  }
}
.about .about__body p {
  font-size: 16px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 1.2em;
}
.about .about__body .about__intro {
  font-weight: 500;
}
.about .about__body .about__sign {
  margin-top: 24px;
  text-align: right;
}
.about .about__body .about__sign .about__role {
  font-size: 14px;
  color: #8f9aa3;
}
.about .about__body .about__sign .about__name {
  font-size: 20px;
  font-weight: 700;
  color: #1f3a56;
  text-transform: lowercase;
}
.about .about__img {
  -ms-flex-item-align: start;
      align-self: start; /* ← Gridの縦位置を上揃え */
  justify-self: center; /* 横は中央のままにしたい場合 */
}
@media screen and (max-width: 767px) {
  .about .about__img {
    max-width: 300px;
  }
}
.about .about__img img {
  display: block; /* 画像の下の余白を消す */
  border-radius: 20px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  margin: 0 auto;
}

/* ==== スキルボックス ==== */
.about__skills {
  background: #e9f4fb;
  border: 1px solid rgba(74, 143, 216, 0.12);
  border-radius: 12px;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  padding: 24px;
  /* SP: 1カラム＆横線で区切る */
  grid-template-columns: 1fr;
  text-align: center;
}
.about__skills .about-skill {
  /* SPでは縦の区切り線は不要 */
  border-right: none;
  padding-inline: 0;
  /* ここで横線を追加（1つ目は無し） */
}
.about__skills .about-skill:not(:first-child) {
  border-top: 1px solid rgba(74, 143, 216, 0.18);
  padding-top: 16px;
}
.about__skills .about-skill h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1f3a56;
  margin-bottom: 8px;
  /* ネストが二重になっていたのを修正 */
}
.about__skills .about-skill h3 i {
  color: #4a8fd8; /* メインブルー */
  margin-right: 8px;
}
.about__skills .about-skill p {
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .about__skills {
    /* 768〜1023pxにだけ適用 */
    margin-top: 30px;
    max-width: 600px;
    margin-inline: auto;
  }
}
@media screen and (min-width: 1024px) {
  .about__skills {
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    margin-top: 30px;
  }
  .about__skills .about-skill {
    padding-inline: 16px;
    border-right: 1px solid rgba(74, 143, 216, 0.12);
  }
  .about__skills .about-skill:not(:first-child) {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
  .about__skills .about-skill:last-child {
    border-right: none;
  }
}

/* =========================
   Contact Section
========================= */
.contact {
  background: #e9f4fb;
  text-align: center;
}

.contact__lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 24px;
  color: #444;
}

/* ===== Form ===== */
.contact__form {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

/* 3) 入力欄の灰色背景をやめて白＋ボーダーに */
.form__group {
  margin-bottom: 24px;
}
.form__group label,
.form__group legend {
  font-weight: 700;
  color: #1f3a56;
  display: block;
  margin-bottom: 8px;
}
.form__group input,
.form__group textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e6eaed;
  border-radius: 8px;
  background: #fff; /* ← ここを白に */
  font-size: 15px;
  -webkit-transition: border-color 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, -webkit-box-shadow 0.25s ease;
}
.form__group input:hover,
.form__group textarea:hover {
  border-color: #66b3ff;
}
.form__group input:focus,
.form__group textarea:focus {
  outline: none;
  border-color: #4a8fd8;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}
.form__group input:disabled,
.form__group textarea:disabled {
  background: color-mix(in srgb, #e6eaed 40%, #fff);
  color: #8f9aa3;
  cursor: not-allowed;
}
.form__group textarea {
  resize: vertical;
}

/* 2) バッジは variables の赤系（$coral）を使用 */
.form__req {
  display: inline-block;
  background: #ff8d3b; /* 変数使用 */
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 4px;
}

/* 4) チェックボックスのレイアウト崩れを解消 */
.form__checkbox-list {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr; /* SPは1列 */
  /* ラベルとチェックを横並び・折返し対応 */
}
@media screen and (min-width: 768px) {
  .form__checkbox-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* PCは2列 */
    -webkit-column-gap: clamp(24px, 3vw, 32px);
       -moz-column-gap: clamp(24px, 3vw, 32px);
            column-gap: clamp(24px, 3vw, 32px);
  }
}
.form__checkbox-list label {
  display: grid;
  grid-template-columns: 20px 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-weight: 400;
  color: #444;
  line-height: 1.5;
}

/* ===== Policy ===== */
.form__policy {
  background: #e9f4fb;
  border-radius: 12px;
  margin-top: 30px;
}
.form__policy h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.form__policy p {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 12px;
}
.form__policy .form__agree {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-size: 14px;
}

/* 5) 送信ボタンは青（btn-s の青バリアントを使用） */
.form__submit {
  text-align: center;
  margin-top: 24px;
}

/* ===== Contact Thanks ===== */
.section--thanks {
  padding-block: clamp(50px, 6vw, 80px);
  text-align: center;
}

.thanks {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  justify-items: center;
  max-width: 800px;
  margin-inline: auto;
}

.thanks__title {
  font-size: clamp(32px, 4vw, 40px);
  color: #1f3a56;
  font-weight: 700;
}

.thanks__text {
  font-size: clamp(16px, 2vw, 18px);
  color: #444;
  line-height: 1.8;
}

.thanks__btn {
  margin-top: clamp(16px, 2vw, 24px);
}

/* ===== レイアウト（はみ出し防止を徹底） ===== */
.l-contents--blog {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
  /* まずは1カラム（SP） */
  grid-template-columns: 1fr;
  /* PCでは 1fr + 固定幅。余白は gap に収める */
  /* .u-container のパディング込みで安全に収める */
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .l-contents--blog {
    grid-template-columns: minmax(0, 1fr) 320px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

/* メイン側が横に広がって sidebar を押し出さないように */
.l-contents__main {
  min-width: 0;
}

/* ===== カード一覧 ===== */
.postcards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.postcards__item {
  min-width: 0;
}

.postcard {
  height: 100%;
  background: #fff;
  border: 1px solid #e6eaed;
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: clip; /* 画像のはみ出し防止 */
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
@media (hover: hover) {
  .postcard:hover {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}

.postcard__link {
  display: grid;
  grid-template-rows: auto 1fr;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.postcard__thumb {
  aspect-ratio: 3/2; /* 固定比率で高さ暴れ防止 */
  background: #e9f4fb;
}
.postcard__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.postcard__body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 8px;
}

.postcard__title {
  margin: 0;
  font-size: 18px;
  color: #1f3a56;
}

.postcard__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #8f9aa3;
  margin: 0;
}

.postcard__excerpt {
  margin: 0;
  font-size: 14px;
  color: #444;
  line-height: 1.7;
}

/* ===== サイドバー（幅を“絶対に”超えさせない） ===== */
.sidebar {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  /* 幅の上限を column 幅に一致させ、padding等を含めて Box 化 */
  width: 100%;
  max-width: 320px;
  min-width: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .sidebar {
    max-width: 100vw;
  }
}
@media screen and (min-width: 768px) {
  .sidebar {
    position: sticky;
    top: 96px;
  }
}

.widget {
  background: #fff;
  border: 1px solid #e6eaed;
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: clamp(16px, 2vw, 24px);
  min-width: 0; /* 内部コンテンツが横に伸びて外へ押し出すのを抑制 */
}

.widget__title {
  margin: 0 0 clamp(8px, 1vw, 12px);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: #1f3a56;
}

/* 検索 */
.searchbox {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(8px, 1vw, 12px);
}
.searchbox input[type=search] {
  height: clamp(40px, 4.5vw, 48px);
  padding-inline: clamp(12px, 2vw, 16px);
  border: 1px solid #e6eaed;
  border-radius: 8px;
  background: #fff;
  width: 100%;
  min-width: 0; /* ←入力欄の最小幅で押し広げない */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.searchbox .btn-s {
  height: clamp(40px, 4.5vw, 48px);
}

/* カテゴリー */
.catlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.catlist li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.catlist a {
  color: #4a8fd8;
  text-decoration: none;
}
.catlist a:hover {
  color: #2f5ea6;
}
.catlist .badge {
  background: #e9f4fb;
  color: #1f3a56;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
}

/* アーカイブ */
.archive-select {
  width: 100%;
  height: clamp(40px, 4.5vw, 48px);
  border: 1px solid #e6eaed;
  border-radius: 8px;
  padding-inline: clamp(12px, 2vw, 16px);
  background: #fff;
  font-size: clamp(16px, 2vw, 18px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* タグ */
.tagcloud {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tagcloud a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  background: #b5e6e2;
  color: #1f3a56;
  text-decoration: none;
  font-size: 14px;
  -webkit-transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.15s ease;
}
.tagcloud a:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =========================================
   Pagination
========================================= */
.pagination {
  margin-top: clamp(32px, 5vw, 48px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pagination__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #4a8fd8;
  color: #4a8fd8;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  background: #fff;
}
.pagination__link:hover {
  background: #4a8fd8;
  color: #fff;
}
.pagination__link.is-current {
  background: #4a8fd8;
  color: #fff;
  cursor: default;
}
.pagination__link--prev, .pagination__link--next {
  width: 40px;
  height: 40px;
}
@media screen and (max-width: 767px) {
  .pagination__link {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
}

/* ===============================
   Post (single)
   改訂版 v2.0（階層・配色・余白調整）
================================ */

/* --- セクション全体 --- */
.section--post {
  padding-block: clamp(50px, 6vw, 80px);
}

/* --- メタ情報（日付・カテゴリ） --- */
.post__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 1rem;
}

.post__meta .post__cat {
  display: inline-block;
  border: 1px solid #ff8d3b;
  color: #ff8d3b;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
}

.post__meta .post__date {
  color: #8f9aa3;
}

/* --- タイトル（H1） --- */
.post__title {
  font-size: clamp(28px, 4vw, 36px);
  color: #1f3a56;
  font-weight: 700;
  border-bottom: 3px solid #66b3ff;
  padding-bottom: 0.3em;
  margin-bottom: 1.5rem;
}

/* --- アイキャッチ画像 --- */
.post__thumb {
  margin-bottom: 2rem;

  img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
}

/* --- 本文エリア --- */
.post__body {
  font-size: clamp(16px, 2vw, 18px);
  color: #444;
  line-height: 1.8;
}

/* H2：セクションタイトル */
.post__body h2 {
  font-size: clamp(22px, 2.8vw, 28px);
  color: #1f3a56;
  font-weight: 700;
  background: #e9f4fb;
  border-left: 6px solid #4a8fd8;
  padding: 0.6em 1em;
  margin-block: 3em 1.5em;
  border-radius: 2px;
}

/* H3：小見出し */
.post__body h3 {
  font-size: clamp(18px, 2vw, 22px);
  color: #2f5ea6;
  font-weight: 600;
  border-bottom: 2px solid #a7d1f0;
  padding-bottom: 0.3em;
  margin-block: 2em 1em;
}

/* H4：補足見出し */
.post__body h4 {
  font-size: clamp(16px, 1.8vw, 20px);
  color: #2f5ea6;
  font-weight: 500;
  border-left: 4px solid #a7d1f0;
  padding-left: 0.8em;
  margin-block: 1.5em 1em;
}

/* --- 段落・リスト --- */
.post__body p {
  margin-bottom: 1.5em;
}

.post__body ul,
.post__body ol {
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.post__body li {
  margin-bottom: 0.4em;
}

/* --- リンク --- */
.post__body a.link {
  color: #2f5ea6;
  font-weight: 500;
  text-decoration: underline;

  &:hover {
    opacity: 0.8;
  }
}

/* --- 引用 --- */
.post__body blockquote {
  background: #f4f9ff;
  border-left: 4px solid #4a8fd8;
  padding: 1em 1.2em;
  font-style: italic;
  color: #333;
  margin-block: 2em;
  border-radius: 4px;
}

/* --- タグ一覧 --- */
.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2rem;

  a {
    display: inline-block;
    background: #e9f4fb;
    color: #2f5ea6;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    transition: 0.3s;

    &:hover {
      background: #4a8fd8;
      color: #fff;
    }
  }
}

/* --- 前後ナビ --- */
.post__nav {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;

  a {
    color: #2f5ea6;
    font-weight: 500;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* ===== Archive Page ===== */
.section--archive {
  padding-block: clamp(50px, 6vw, 80px);
}

.archive__title {
  font-size: clamp(24px, 2.6vw, 32px);
  color: #1f3a56;
  margin-bottom: clamp(16px, 2vw, 24px);
}

/* post cards・sidebarは blogs と共通 */
/* ===== Search Results ===== */
.section--search {
  padding-block: clamp(50px, 6vw, 80px);
}

.search__title {
  font-size: clamp(24px, 2.6vw, 32px);
  color: #1f3a56;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.search__title span {
  color: #4a8fd8;
}

/* 検索0件時のメッセージ */
.search__noresult {
  font-size: clamp(16px, 2vw, 18px);
  color: #444;
  text-align: center;
  margin-block: 60px;
}

/* ========================================
   Utilities
   共通ユーティリティ（レイアウト・表示制御・アクセシビリティなど）
   Version: 1.0
   Author: Fujii Yuri
======================================== */
/* ----------------------------------------
   1. コンテナ
---------------------------------------- */
.u-container {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* resetでborder-boxを入れているのでpaddingを含めて100%で収まる */
  width: min(100%, 1260px);
  margin-inline: auto;
  padding-inline: 15px;
}
@media screen and (min-width: 768px) {
  .u-container {
    padding-inline: 30px;
  }
}

/* ----------------------------------------
   2. セクション間余白
---------------------------------------- */
/* すべてのセクションに基本リズムを適用 */
.section {
  padding-block: clamp(60px, 9vw, 120px);
}

.section--cta {
  padding-top: 0;
  padding-bottom: clamp(32px, 4vw, 48px);
}

.postlist {
  padding-top: clamp(32px, 4vw, 48px);
}

/* ----------------------------------------
   3. セクションタイトル（共通デザイン）
---------------------------------------- */
.section__title {
  position: relative;
  display: grid;
  place-items: center;
  margin-block: clamp(32px, 4vw, 48px);
  text-align: center;
  isolation: isolate; /* 重なりを綺麗に */
}

/* 英語：巨大・淡色・輪郭あり（背景扱い） */
.section__title-english {
  font-family: "Niconne", cursive;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  font-size: clamp(80px, 10vw, 110px);
  position: absolute;
  inset: 20% auto auto 50%;
  -webkit-transform: translate(-50%, -56%);
          transform: translate(-50%, -56%); /* ほんの少し上に */
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  /* 1) 薄く乗る色（ヒーローに馴染むブルー系） */
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(233, 244, 251, 0.85)), to(rgba(167, 209, 240, 0.55)));
  background: linear-gradient(180deg, rgba(233, 244, 251, 0.85), rgba(167, 209, 240, 0.55));
  -webkit-background-clip: text;
  color: transparent;
  /* 2) うっすら輪郭で読み筋を作る（白系ストローク） */
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
  /* 3) 淡い影で奥行き */
  text-shadow: 0 8px 30px rgba(0, 0, 40, 0.1);
  /* 4) ブレンドで背景となじませる（ブラウザOKなら） */
  mix-blend-mode: soft-light;
  z-index: 1; /* 和文より下：z-index 1 / 和文を2に */
}

/* 日本語：前面にくっきり */
.section__title-japanese {
  position: relative;
  z-index: 2;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", Meiryo, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(32px, 4vw, 40px);
  color: #2f5ea6;
  /* アクセントの下線（ブランドグラデ） */
  display: inline-block;
  padding-inline: 0.4em;
  padding-bottom: 0.2em;
}
.section__title-japanese::after {
  content: "";
  display: block;
  height: 4px;
  border-radius: 999px;
  margin: 0.3em auto 0;
  width: clamp(80px, 10vw, 140px);
  background: linear-gradient(290deg, #a7d1f0 0%, #4a8fd8 55%, #2f5ea6 100%); /* blue-light→blue-main→blue-dark */
  -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* 明るい背景で英字が飛ぶ時の保険（セクション個別に付与） */
.section-title--dark .section-title__en {
  -webkit-text-stroke: 1px rgba(47, 94, 166, 0.2);
  mix-blend-mode: multiply;
}

/* ----------------------------------------
   4. アクセシビリティユーティリティ
---------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------
   5. 表示切替（SP/PC）ユーティリティ
---------------------------------------- */
@media screen and (min-width: 768px) {
  .only-sp {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .only-pc {
    display: none !important;
  }
}

.only-pc {
  display: none;
}
@media (min-width: 992px) {
  .only-pc {
    display: block;
  }
}

/* ----------------------------------------
   6. フォーカス（アクセシビリティ強調）
---------------------------------------- */
.u-focus:focus-visible {
  outline: 2px solid rgba(74, 143, 216, 0.4);
  outline-offset: 2px;
  -webkit-box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
          box-shadow: 0 0 0 3px rgba(74, 143, 216, 0.3);
}

/* ----------------------------------------
   7. テキスト強調・見出し補助
---------------------------------------- */
.u-text-highlight {
  color: #4a8fd8;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
}

/* ----------------------------------------
   8. 下層ページ共通（任意）
---------------------------------------- */
.page-header {
  background: #e9f4fb;
  padding: 40px 20px;
  text-align: center;
}

.page-header__title {
  font-size: 28px;
  font-weight: 700;
  color: #1f3a56;
}

.page-header__lead {
  margin-top: 10px;
  font-size: 16px;
  color: #8f9aa3;
}

/* ----------------------------------------
   Font Awesome アイコン調整
---------------------------------------- */
.fa-solid.fa-angle-left,
.fa-solid.fa-angle-right,
.fas.fa-angle-left,
.fas.fa-angle-right {
  margin-top: 10px;
}

/* ----------------------------------------
   WPForms スタイル調整
---------------------------------------- */
.wpforms-field-label {
  text-align: left !important;
}

.wpforms-field-description {
  text-align: left !important;
}

.wpforms-container {
  max-width: 600px !important;
  margin: 0 auto !important;
}

.wpforms-field-medium {
  width: 100% !important;
  max-width: 100% !important;
}

/* WPFormsの数値フィールド(電話番号)のスピンボタンを完全に非表示 */
.wpforms-field input[type="number"]::-webkit-inner-spin-button,
.wpforms-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Firefox対応 */
.wpforms-field input[type="number"] {
  -moz-appearance: textfield !important;
}