@charset "UTF-8";

/* =========================================
   0. Import Fonts
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Old+Mincho:wght@700&family=Condiment&display=swap');

/* =========================================
   1. Reset
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin-block-end: 0;
    margin: 0;
}
ul[role='list'], ol[role='list'], ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* ★追加：横スクロールを防止 */
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    text-wrap: balance;
}
input, button, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
img, picture {
    max-width: 100%;
    display: block;
}
textarea:not([rows]) {
    min-height: 10em;
}
a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}
a:hover {
    opacity: 0.7;
}

/* =========================================
   2. Root Font Size Settings (Fluid Typography)
   ========================================= */
@media screen and (min-width: 1441px) {
  html { font-size: 10px; }
}
@media screen and (min-width: 1025px) and (max-width: 1440px) {
  html { font-size: 0.69444vw; }
}
@media screen and (max-width: 1024px) {
  html { font-size: 2.66666vw; }
}

/* =========================================
   3. Variables (LP全体で確実に共有する変数のみ)
   ========================================= */
:root {
  /* 共通背景色 */
  --color-white: #FFFFFF;
  --color-bg-light: #F4F5F9;
  --color-bg-gray: #f2f4f9; /* お悩み・サービス右・ステップ等で共通使用 */

  /* 共通テキストカラー */
  --color-text-main: #1A1A24;
  --color-text-navy: #14154d; /* FV・CTA等 */
  --color-text-dark: #05093d; /* お悩み・サービス・REASON等 */
  --color-title-main: #070f4c; /* セクション見出し（日本語） */
  --color-title-sub: #ab91f2;  /* セクション見出し（英語） */
  
  /* 共通アクセントカラー */
  --color-accent-purple: #8461f8;
  --color-accent-blue: #4680fb;

  /* 共通ボタン（FV・CTA等で流用） */
  --color-btn-grad-start: #7d44f4;
  --color-btn-grad-end: #5b88fa;
  --color-btn-outline: #6441f7;

  /* 汎用UI要素 */
  --color-border-gray: #dcdcdc;
  --color-placeholder: #A8A8A8;

  /* Fonts */
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-mincho: 'Zen Old Mincho', serif;
  --font-en-decor: 'Condiment', cursive;
}

/* =========================================
   4. Base Settings
   ========================================= */
body {
  font-family: var(--font-ja);
  color: var(--color-text-main);
  background-color: var(--color-white);
  font-size: 1.6rem;
  line-height: 1.6;
}

/* =========================================
   5. Layout Utilities
   ========================================= */
.l-inner {
  max-width: 144rem;
  margin: 0 auto;
  width: 100%;
}
.sp-only { display: none !important; }
.pc-only { display: block !important; }

@media (max-width: 1024px) {
  .sp-only { display: block !important; }
  .pc-only { display: none !important; }
}

/* =========================================
   6. Typography Utilities
   ========================================= */
/* 共通セクションタイトル（英語） */
.c-title-en {
  font-family: var(--font-ja);
  letter-spacing: 0.15em;
  font-weight: 500;
  font-size: 2.2rem;      /* 修正：さらに大きく（2.0rem → 2.2rem） */
  color: var(--color-title-sub);
  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
}

/* 英語タイトルの左横の装飾マーク（CSSで実装） */
.c-title-en::before {
  content: "";
  display: inline-block;
  width: 3.2rem;           /* 修正：文字サイズに合わせて少し幅を広く（2.6rem → 3.2rem） */
  height: 1.6rem;          /* 修正：文字サイズに合わせて少し高く（1.2rem → 1.6rem） */
  border-radius: 0.4rem;   /* 修正：角丸の微調整 */
  background: linear-gradient(90deg, #6c88fb, var(--color-title-sub));
  transform: rotate(-30deg); /* 時計の2時の方向（反時計回り） */
}

/* 共通セクションタイトル（日本語） */
.c-title-ja {
  font-family: var(--font-ja);
  font-weight: 700;
  text-align: center;
  font-size: 3.6rem;
  color: var(--color-title-main);
  line-height: 1.4;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .c-title-en { 
    font-size: 2.0rem; /* 修正：スマホ・タブレット時もさらに少し大きく */
    margin-bottom: 0.6rem;
    gap: 1rem;
  }
  .c-title-en::before {
    width: 2.8rem;
    height: 1.4rem;
  }
  .c-title-ja { 
    font-size: 2.8rem; 
  }
}
/* =========================================
   7. Components (複数セクションで登場するUIパーツ)
   ========================================= */
/* ---- 共通ボタン ---- */
.c-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 23.5rem;
  height: 6.0rem;
  border-radius: 9999px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.3s ease;
  text-decoration: none;
}
.c-btn:hover { opacity: 0.8; }
.c-btn-primary {
  background: linear-gradient(to right, var(--color-btn-grad-start), var(--color-btn-grad-end));
  color: var(--color-white);
  border: none;
}
.c-btn-outline {
  background-color: var(--color-white);
  color: var(--color-btn-outline);
  border: 1px solid var(--color-btn-outline);
}
@media (max-width: 767px) {
  .c-btn { max-width: 100%; height: 5.6rem; }
}

/* ---- 汎用ボックス・カード ---- */
.c-box-white {
  background-color: var(--color-white);
  border-radius: 1.6rem;
}
.c-box-outline {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-gray);
  border-radius: 1.6rem;
}

/* =========================================
   8. Form Utilities
   ========================================= */
.c-input, .c-textarea {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-gray);
  font-family: var(--font-ja);
  width: 100%;
  padding: 0.8rem;
}
.c-input::placeholder, .c-textarea::placeholder {
  color: var(--color-placeholder);
  font-size: 1.4rem;
}

/* =========================================
   9. Generic Animations
   ========================================= */
:root {
  --anime-duration: 0.8s;
  --anime-easing: cubic-bezier(0.25, 1, 0.5, 1);
}
.js-anime-fadein-up {
  opacity: 0;
  transform: translateY(3rem);
  transition: transform var(--anime-duration) var(--anime-easing),
              opacity var(--anime-duration) var(--anime-easing);
  will-change: transform, opacity;
}
.js-anime-fadein-up.is-animated {
  opacity: 1;
  transform: translateY(0);
}
.u-delay-100 { transition-delay: 0.1s; }
.u-delay-200 { transition-delay: 0.2s; }
.u-delay-300 { transition-delay: 0.3s; }
.u-delay-400 { transition-delay: 0.4s; }
.u-delay-500 { transition-delay: 0.5s; }

/* =========================================
   10. Utilities
   ========================================= */
/* 単色テキスト変更ユーティリティ */
.u-text-purple { color: var(--color-accent-purple); }
.u-text-blue { color: var(--color-accent-blue); }

/* =========================================
   style.css 内の :root に追加
   ========================================= */
  /* ステップエリア用テキストカラー */
  --color-step-label: #444df2;
  --color-step-title: #060f2c;
  --color-step-text: #202032;

  /* 共通タグ用カラー */
  --color-tag-bg: #e2e5fb;
  --color-tag-text: #3258e5;


/* =========================================
   style.css の 7. Components に追加
   ========================================= */
/* ---- タグ（支援内容など） ---- */
.c-tag {
  display: inline-block;
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  border-radius: 0.4rem;
  padding: 0.4em 0.8em;
  font-weight: 500;
  font-size: 1.4rem; /* カンプの23pt相当 */
  line-height: 1.2;
}

/* =========================================
   style.css 内の :root に追加
   ========================================= */
  /* 支援フローエリア用カード背景色 */
  --color-bg-flow-card: #f5f6fe;