/*
 * Boost System - メインスタイルシート
 * 1. グローバル設定 (リセット, 変数, 基本スタイル)
 * 2. 汎用レイアウト & コンポーネント (コンテナ, セクション, ボタン)
 * 3. ヘッダー (.header)
 * 4. フッター (.footer)
 * 5. トップページ - セクション別
 *    5.1. ファーストビュー (.fv)
 *    5.2. 導入 (.section-intro)
 *    5.3. 強み (.section-strength)
 *    5.4. サービス概要 (.section-service-summary)
 *    5.5. 開発実績 (.section-works)
 *    5.6. 開発プロセス (.section-process)
 *    5.7. コンタクトCTA (.section-cta)
 * 6. 下層ページ共通スタイル
 * 7. 下層ページ - コンテンツ別
 * 8. 状態とアニメーション (.is-active, .js-scroll-trigger など)
 * 9. メディアクエリ (レスポンシブ)
 */

/* === 1. グローバル設定 === */
:root {
    /* 色の定義 */
    --color-main: #004488;          /* メインカラー (ディープブルー) */
    --color-accent: #FFC107;        /* アクセントカラー (アンバー/ゴールドイエロー) */
    --color-accent-dark: #e0b100;   /* アクセントカラー (ホバー) */
    --color-bg-light: #F8F8F8;      /* 背景色 (ライトグレー) */
    
    --color-text-dark: #333333;     /* テキスト (ダークグレー) */
    --color-text-light: #FFFFFF;    /* テキスト (ホワイト) */
    --color-text-secondary: #555;   /* テキスト (サブ) */

    /* フォント */
    --font-family-base: 'Noto Sans JP', sans-serif;
    --font-family-heading: 'Roboto', 'Noto Sans JP', sans-serif; /* 見出し用 */

    /* レイアウト */
    --header-height: 80px;
    --header-height-mobile: 60px;
    --radius: 8px; /* 汎用的な角丸 */
    --transition-base: 0.3s ease; /* 汎用的なトランジション */
}

/* リセットと基本スタイル */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family-base);
    line-height: 1.8;
    color: var(--color-text-dark);
    background-color: var(--color-text-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: opacity var(--transition-base);
}

a:hover {
    opacity: 0.7;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    line-height: 1.4;
}

/* 共通レイアウト */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.container--narrow {
    max-width: 800px;
}

.section {
    padding: 80px 0;
}

/* 汎用的なセクションサブタイトル */
.section-subtitle {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px; /* タイトルとの間隔 */
    color: var(--color-text-secondary);
    letter-spacing: 0.05em; /* 少し文字間を広げる */
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-top: 0; /* サブタイトルとの間隔をリセット */
    margin-bottom: 50px; /* 少し詰める */
    color: var(--color-main);
}

/* === 2. 汎用レイアウト & コンポーネント === */
.bg-light-gray {
    background-color: var(--color-bg-light);
    /* 斜め背景用の設定 */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.bg-main-color {
    background-color: var(--color-main);
    color: var(--color-text-light);
    position: relative; /* 疑似要素を配置するための基準点 */
    overflow: hidden; /* はみ出した疑似要素を隠す */
    z-index: 1; /* コンテンツが背景より手前に来るように */
}
/* .bg-main-color 内の .section-title は白にする */
.bg-main-color .section-title {
    color: var(--color-text-light);
}

.section-link {
    text-align: center;
    margin-top: 40px;
}

/* 標準CTAボタン */
.cta-btn {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid transparent;
    border-radius: var(--radius); /* 汎用角丸 */
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    opacity: 1 !important; /* ホバーで薄くならない */
}

/* アウトラインボタン */
.cta-btn--outline {
    border-color: var(--color-main);
    color: var(--color-main);
    background-color: transparent;
    position: relative; /* アニメーションの基準 */
    z-index: 1;
}
.cta-btn--outline:hover {
    color: var(--color-text-light);
    background: var(--color-main);
    border-color: var(--color-main); /* ホバー時に元の枠線を隠す */
}

/* .bg-main-color の上で使うためのアウトラインボタン(ライト版) */
.cta-btn--outline--light {
    border-color: var(--color-text-light);
    color: var(--color-text-light);
    background-color: transparent;
}
.cta-btn--outline--light:hover {
    color: var(--color-main); /* ホバー時の文字色はメインカラー */
    background: var(--color-text-light); /* ホバー時の背景は白 */
    border-color: var(--color-text-light);
}

/* CTAセクションのボタン */
.cta-btn--accent {
    background-color: var(--color-accent);
    color: var(--color-text-dark);
}
.cta-btn--large {
    font-size: 1.1rem;
    padding: 15px 40px;
}

/* 「私たちについて」セクション(.section-intro)独自の斜め背景 */
.section-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50vw - 600px - 100px); /* (画面中央 - コンテナ半分の幅 + オフセット) */
    width: 500px;
    height: 100%;
    background-color: #1a4aa3;
    transform: skewX(-25deg);
    z-index: -1; /* コンテンツの背面へ */
    transition: width 2s ease-out, left 2s ease-out;
}


/* 「強み」セクション(.section-strength)独自の斜め背景 */
.section-strength::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50vw - 600px - 480px); /* (画面中央 - コンテナ半分の幅 + オフセット) */
    width: 500px;
    height: 100%;
    /* メインカラーを薄くした色 */
    background-color: #edf0f4;
    transform: skewX(-25deg);
    z-index: -1; /* コンテンツの背面へ */
    transition: width 2s ease-out, left 2s ease-out;
}

/* === 3. ヘッダー (.header) === */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}

.header__inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

/* ロゴ */
.header__logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 1 !important; /* ホバーで薄くならない */
}

.header__logo .logo__text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-light); /* 初期文字色は白 */
    transition: color 0.4s ease;
}

.header__logo .logo__icon-wrapper {
    /* 2つのロゴを重ねるためのラッパー */
    position: relative;
    width: 32px;
    height: 32px;
}

.header__logo .logo__icon {
    /* 共通スタイル */
    width: 100%;
    height: 100%;
    /* 2つのロゴを重ねる */
    position: absolute;
    top: 0;
    left: 0;
    /* transitionで滑らかな切り替え */
    transition: opacity 0.4s ease;
}

/* ロゴの切り替え */
.logo__icon--white {
    opacity: 1; /* 初期状態(白)を表示 */
}
.logo__icon--black {
    opacity: 0; /* 初期状態(黒)を非表示 */
}

/* ヘッダー右側 */
.header__right-group {
    display: flex;
    align-items: center;
    gap: 30px; /* PC時のナビとCTAのギャップ */
}

.header__actions {
    display: flex;
    align-items: center;
}

/* PCナビゲーション */
.nav-list {
    display: flex;
    gap: 30px;
}

.nav-list__item a {
    position: relative;
    padding: 5px 0;
    font-weight: 700;
    color: var(--color-text-light); /* 初期文字色は白 */
    transition: color 0.4s ease;
}

.nav-list__item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent); /* 初期はアクセントカラー */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base), background-color var(--transition-base);
}

.nav-list__item a:hover::after {
    transform: scaleX(1);
}

/* ナビリンクホバー時のopacity変更を無効化 */
.nav-list__item a:hover {
    opacity: 1;
}

/* モバイル用ナビゲーション */
.nav-toggle {
    display: none; /* デスクトップファースト: PCでは非表示 */
    width: 30px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1010;
    position: relative; /* バツ印アニメーションの基準 */
}

.nav-toggle__bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-text-light); /* 初期は白 */
    border-radius: 3px;
    transition: transform var(--transition-base), background-color var(--transition-base), opacity var(--transition-base);
    position: absolute;
    left: 0;
}

.nav-toggle__bar:nth-child(1) {
    top: 0;
}
.nav-toggle__bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
.nav-toggle__bar:nth-child(3) {
    bottom: 0;
}


.mobile-nav {
    display: none; /* デスクトップファースト: PCでは非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-text-light);
    z-index: 990;
    padding-top: var(--header-height); /* ヘッダーの高さ分下げる */
    padding: 100px 40px 40px;
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
}

.mobile-nav__list {
    text-align: center;
}
.mobile-nav__item {
    margin-bottom: 20px;
}
.mobile-nav__item a {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-main);
}
.mobile-nav__cta {
    display: block;
    width: 100%;
    margin-top: 30px;
    text-align: center;
}

/* ヘッダーのCTAボタン */
.header__cta-btn {
    padding: 8px 24px; /* 他より少し小さく */
    border-radius: 0; /* 角を四角に */
    
    /* 初期状態（透明時） */
    background-color: transparent;
    border-color: var(--color-text-light);
    color: var(--color-text-light);
}
.header__cta-btn:hover {
    /* ホバー時（透明時） */
    background-color: var(--color-text-light);
    color: var(--color-main);
    transform: none; /* 他のボタンのtransformを打ち消し */
    box-shadow: none; /* 他のボタンのbox-shadowを打ち消し */
}

/* === 4. フッター (.footer) === */
.footer {
    background-color: var(--color-text-dark); /* 背景をダークグレーに */
    color: var(--color-text-light);      /* テキストを白に */
    padding-top: 50px; /* 上部の余白を広げる */
}

.footer__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 各カラムの上端を揃える */
    padding-bottom: 40px;
}

.footer__col {
    flex: 1; /* 各カラムが均等な幅を占める */
}

.footer__col--info {
    flex: 2; /* ロゴカラムを広げる */
}

.footer__col--nav {
    flex: 2; /* ナビゲーションカラムを広げる */
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* 左側に区切り線 */
    padding-left: 40px; /* 区切り線との余白 */
}

.footer__col--contact {
    flex: 1.5; /* お問い合わせカラムの比率を調整 */
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* 左側に区切り線 */
    padding-left: 40px; /* 区切り線との余白 */
}

.footer__heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-text-light);
    opacity: 0.9; /* 少し透明度を下げて本文と差をつける */
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-light); /* ロゴテキストを白に */
    margin-bottom: 20px;
    opacity: 1;
}
.footer__logo .logo__icon {
    width: 32px;
    height: 32px;
}

.footer-nav-wrapper {
    display: flex;
    gap: 90px; /* サイトマップの列間を広げる */
}

.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-nav-list a {
    font-size: 0.9rem;
    font-weight: 700;
    opacity: 0.8; /* 通常時の透明度 */
    color: var(--color-text-light); /* リンクテキストを白に */
}
/* フッターリンクのホバーエフェクト */
.footer-nav-list a:hover {
    opacity: 1;
    color: var(--color-accent);
}

.footer__contact-item {
    font-size: 0.9rem;
    margin-bottom: 10px;
    line-height: 1.6;
    opacity: 0.8; /* 透明度を調整 */
}

.footer__copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 区切り線 */
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
}

/* === 5. トップページ - セクション別 === */
/* --- 5.1. ファーストビュー (.fv) --- */
.fv {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-text-light);
    overflow: hidden;
}

.fv__bg-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #000; /* フォールバック */
}

/* 開発用プレースホルダ */
.fv__bg-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-main) 0%, #002244 100%);
    opacity: 0.8;
}

/* 背景動画用のオーバーレイ */
.fv__bg-video-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.fv__content {
    padding: 20px;
}

.fv__title {
    font-size: 3rem;
    margin-bottom: 20px;
}

.fv__subtitle {
    font-size: 1.25rem;
}

/* --- 5.2. 導入 (.section-intro) --- */

/*
 * 左右分割レイアウト
 * .solution-layout-new__left と .solution-layout-new__right を子要素に持つ
 * 主に「導入」「開発プロセス」セクションで使用
 */
.solution-layout-new {
    display: flex;
    align-items: flex-start; /* 上揃え */
    gap: 40px;
}

.solution-layout-new__left {
    flex: 2;
    /* .section-title は左揃えに */
    text-align: left;
}

.solution-layout-new__right {
    flex: 2; /* テキスト側を広く */
    padding-top: 20px; /* 左のタイトルと高さを合わせるため微調整 */
}

.solution-layout-new__pre-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--color-text-light);
    opacity: 0.8;
}

/* .section-title のマージンをリセット */
.solution-layout-new__left .section-title {
    text-align: left;
    margin-bottom: 0;
    font-size: 4rem;
    letter-spacing: 0.05em; /* 文字間を広げる */
    line-height: 1.1; /* 強調部分の行間を狭める */
}

/* 強みセクションのタイトルは色を戻す */
.section-strength .solution-layout-new__pre-title {
    color: var(--color-text-secondary);
}
.section-strength .solution-layout-new__left .section-title {
    color: var(--color-main);
}

.section-intro__lead {
    margin-bottom: 24px; /* 説明文との間隔 */
    color: var(--color-text-light);
}
.section-intro__lead strong {
    /* 強調部分のスタイル */
    font-weight: 700;
    color: var(--color-text-light); /* 白文字に変更 */
    font-size: 2rem; /* 文字サイズを大きく変更 */
    line-height: 1.6; /* 強調部分の行間を狭める */
}

/* 導入セクションのテキストハイライト */
.section-intro__lead .highlight-text {
    background-color: var(--color-text-light); /* 白い背景 */
    color: var(--color-main); /* ディープブルーの文字 */
}

.section-intro__body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 40px;
    color: var(--color-text-light);
}

.section-intro .section-link {
    text-align: left;
}

/* --- 5.3. 強み (.section-strength) --- */
/* 強みセクションの右側コンテンツはpadding-topをリセット */
.section-strength .solution-layout-new__right {
    padding-top: 0;
}

.strength-list {
    /* カードを縦に並べる */
    display: flex;
    flex-direction: column;
    gap: 40px; /* カード間の余白 */
}

.strength-item {
    display: flex;
    align-items: center; /* 画像とテキストを中央揃え */
    gap: 30px;
    min-height: 260px; /* heightからmin-heightに変更し、最小の高さを確保 */
    background-color: var(--color-text-light);
    border-radius: var(--radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden; /* 画像の角を丸めるため */
    transition: transform var(--transition-base);
}

.strength-item:hover {
    /* ホバー時に少し浮き上がる効果 */
    transform: translateY(-5px);
}

.strength-item__image {
    flex: 0 0 300px; /* 画像の幅を300pxで固定 */
    align-self: stretch; /* 画像の高さをカードに合わせる */
}

.strength-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* アスペクト比を維持してコンテナを埋める */
}

.strength-item__content {
    padding: 30px;
}

.strength-item__title {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--color-main);
}

/* --- 5.4. サービス概要 (.section-service-summary) --- */
.section-service-summary {
    background-color: var(--color-bg-light);
}

.service-alternating-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 60px;
}

.service-alternating-item {
    display: block;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #fff;
    border-radius: var(--radius);
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.service-alternating-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    opacity: 1;
}

/* 偶数番目は左右反転 */
.service-alternating-item--reverse {
    flex-direction: row-reverse;
}

.service-alternating-item__image {
    flex: 1 1 55%; /* 画像の幅を少し広めに */
    align-self: stretch; /* 高さをコンテナに合わせる */
    overflow: hidden;
    border-radius: var(--radius) 0 0 var(--radius);
}

.service-alternating-item--reverse .service-alternating-item__image {
    border-radius: 0 var(--radius) var(--radius) 0;
}

.service-alternating-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.service-alternating-item:hover .service-alternating-item__image img {
    transform: scale(1.05);
}

.service-alternating-item__content {
    flex: 1 1 45%;
    padding: 40px;
}

.service-alternating-item--reverse .service-alternating-item__content {
    padding: 40px 20px 40px 60px;
}

.service-alternating-item__number {
    display: block;
    font-family: var(--font-family-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-main);
    opacity: 0.6;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.service-alternating-item__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 20px;
}

.service-alternating-item__desc {
    font-size: 1rem;
    margin-bottom: 30px;
}

.service-alternating-item__link-text {
    /* アウトラインボタンのデザイン */
    display: inline-block;
    background-color: transparent;
    color: var(--color-main);
    border: 2px solid var(--color-main);
    padding: 10px 25px;
    border-radius: 999px; /* 角を丸くしてカプセル型に */
    font-weight: 700;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.service-alternating-item__link-text::after {
    content: '→';
    margin-left: 8px; /* テキストと矢印の間隔 */
    display: inline-block; /* transformを適用するため */
    transition: transform 0.2s ease;
}

/* カードホバー時にボタンを表示し、矢印を動かす */
.service-alternating-item:hover .service-alternating-item__link-text {
    background-color: var(--color-main);
    color: var(--color-text-light);
}
.service-alternating-item:hover .service-alternating-item__link-text::after {
    transform: translateX(3px);
}

/* --- 5.5. 開発実績 (.section-works) --- */
/* 開発実績セクションの背景色 */
.section-works {
    background-color: #edf0f4;
}
.works-list {
    display: flex;
    gap: 30px;
}

.work-card {
    flex: 1;
    background-color: var(--color-text-light);
    border-radius: var(--radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative; /* コンテンツを重ねるための基準 */
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.work-card__image {
    aspect-ratio: 4 / 3; /* 画像の高さを少し確保 */
}
.work-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease; /* アニメーション効果 */
}

/* ホバー時に画像を拡大 */
.work-card:hover .work-card__image img {
    transform: scale(1.05);
}

.work-card__content {
    /* 画像の上に重なるように設定 */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-text-light);
    padding: 20px 25px;
}

.work-card__tag {
    display: inline-block;
    background-color: var(--color-main);
    color: var(--color-text-light);
    padding: 4px 12px;
    border-radius: 999px; /* 楕円形にする */
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.work-card__title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* --- 5.6. 開発プロセス (.section-process) --- */
.process-list {
    display: flex;
    flex-direction: column;
    gap: 30px; /* 少し間隔を広げる */
    counter-reset: process-counter; /* 番号をリセット */
}

.process-item {
    display: flex;
    gap: 30px;
    border-bottom: 2px solid #ddd; /* 下に区切り線 */
    padding-bottom: 30px;
    position: relative; /* 三角形を配置するための基準 */
}

/* 区切り線の中央に三角形を追加 */
.process-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -8px; /* 三角形を線の中央に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: #ddd transparent transparent transparent;
}

/* 最後のアイテムの下線は不要 */
.process-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 番号表示用のブロック */
.process-item__number-block {
    flex-shrink: 0;
    width: 90px;
    text-align: center;
    color: var(--color-main);
    font-weight: 700;
}

.process-item__number-block::before {
    content: "STEP";
    display: block;
    font-size: 1rem; /* STEPの文字を小さく */
    line-height: 1;
}

.process-item__number-block::after {
    counter-increment: process-counter;
    content: "0" counter(process-counter);
    font-size: 1.5rem; /* 番号は大きく */
    line-height: 1;
}

.process-item__title {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.process-item__desc {
    font-size: 1rem;
    color: var(--color-text-secondary);
}

/* 開発の流れセクションのタイトルサイズを調整 */
.section-process .section-title {
    font-size: 2.5rem; /* 他のセクションタイトルと同じサイズに調整 */
    line-height: 1.4;
}

/* 開発の流れセクションのタイトル色を調整 */
.section-process .solution-layout-new__pre-title {
    color: var(--color-text-secondary);
}
.section-process .solution-layout-new__left .section-title {
    color: var(--color-main);
}

/* 開発の流れセクションのレイアウト比率を調整 */
.section-process .solution-layout-new__left {
    flex: 1; /* 左側を狭く */
}
.section-process .solution-layout-new__right {
    flex: 2; /* 右側を広く */
}

/* 開発の流れセクションの画像配置調整 */
.section-process .solution-layout-new__left {
    display: flex;
    flex-direction: column;
    /* コンテナの高さを右側に合わせるため */
    align-self: stretch;
}
.section-process .solution-layout-new__image {
    margin-top: auto; /* 画像をコンテナの下部に押し下げる */
    max-width: 90%; /* 画像を小さくする */
}

/* --- 5.7. コンタクトCTA (.section-cta) --- */
.section-cta {
    text-align: center;
    padding: 100px 0; /* 上下の余白を広げる */
}
.cta-section__title {
    font-size: 2.2rem;
    margin-bottom: 15px;
}
.cta-section__subtitle {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* === 6. 下層ページ共通スタイル === */
.cta-btn--accent:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.cta-btn--large {
    font-size: 1.1rem;
    padding: 15px 40px;
}

/* 導入セクションのテキスト表示アニメーション */
.js-reveal-text {
    position: relative;
    overflow: hidden;
    display: inline-block; /* アニメーションのためにブロック要素化 */
    vertical-align: bottom; /* 他のテキストとの高さを揃える */
}

.js-reveal-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-main); /* マスクの色 */
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.solution-layout-new__right.is-visible .js-reveal-text::after {
    transform: translateX(101%); /* マスクを右にスライドさせて消す */
    transition-delay: 0.3s; /* 右側のコンテンツが表示されてから0.3秒後に開始 */
}
.solution-layout-new__right.is-visible .js-reveal-text:nth-of-type(2)::after {
    transition-delay: 0.5s; /* 2つ目の要素はさらに遅れて開始 */
}


/* === 13. アニメーション === */
.js-scroll-trigger {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* ファーストビューの要素は遅延させる */
.fv__title.js-scroll-trigger {
    transition-delay: 0.2s;
}
.fv__subtitle.js-scroll-trigger {
    transition-delay: 0.4s;
}

/* 導入セクションのテキストは少し遅れて表示 */
.solution-layout-new__right.js-scroll-trigger {
    transition-delay: 0.2s;
}

.js-scroll-trigger.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* === 14. メディアクエリ (レスポンシブ) === */

/* タブレット (991px以下) */
@media (max-width: 991px) {
    :root {
        --header-height: var(--header-height-mobile);
    }
    
    .header__inner {
        padding: 0 20px;
    }

    /* PCナビを非表示 */
    .header__nav {
        display: none;
    }

    /* モバイルトグルを表示 */
    .nav-toggle {
        display: block;
    }
    
    /* PC用CTAボタンを非表示 */
    .header__cta-btn {
        display: none;
    }

    .header__right-group {
        gap: 20px; /* トグルと(もしあれば)他の要素のギャップ */
    }
    
    /* モバイルメニューを表示 */
    .mobile-nav {
        display: block;
    }

    .section {
        padding: 60px 0;
    }
    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    .fv__title {
        font-size: 2.5rem;
    }
    
    /* 導入セクション */
    /* .section-title を .solution-layout-new__left に移動したため */
    .solution-layout-new {
        flex-direction: column;
    }
    .solution-layout-new__right {
        padding-top: 0;
    }
    .solution-layout-new__left .section-title {
        font-size: 2.5rem; /* モバイルでは少し小さく */
        margin-bottom: 20px; /* モバイルではマージンを戻す */
    }
    .section-intro__message {
        font-size: 1.1rem;
        line-height: 1.8;
        text-align: left; /* サンプル画像に合わせて左揃えを維持 */
    }
    .section-intro .section-link {
        text-align: left;
    }
    
    /* 強みセクション */
    .strength-list {
        flex-direction: column;
        gap: 40px;
    }
    /* ↓↓↓ ここから追加 ↓↓↓ */
    .strength-item {
        flex-direction: column; /* 画像とテキストを縦積みに変更 */
        height: auto; /* 高さを自動調整 */
        min-height: 0; /* PC用の最小高さをリセット */
        gap: 0; /* 画像とコンテンツの間のgapをリセット */
    }
    .strength-item__image {
        width: 100%; /* 画像の幅をカードいっぱいに */
        flex-basis: auto; /* flexの基準サイズをリセット */
        aspect-ratio: 16 / 9; /* 画像の縦横比を16:9に固定 */
    }
    .strength-item__content {
        padding: 20px 30px; /* 上下のpaddingを調整し、左右は維持 */
    }
    /* ↑↑↑ ここまで追加 ↑↑↑ */

    /* サービス概要 */
    .service-alternating-list {
        gap: 30px;
    }
    .service-alternating-item,
    .service-alternating-item--reverse {
        flex-direction: column;
    }
    .service-alternating-item__image,
    .service-alternating-item--reverse .service-alternating-item__image {
        border-radius: var(--radius) var(--radius) 0 0;
    }

    /* 実績 */
    .works-list {
        flex-direction: column;
        gap: 30px;
    }

    /* プロセス */
    .process-list {
        flex-direction: column;
        gap: 40px;
    }

    /* フッター */
    .footer__main {
        flex-direction: column;
        gap: 30px;
        padding-bottom: 30px;
    }
    .footer__col {
        flex: none; /* flex-growをリセット */
        width: 100%;
        text-align: center; /* 中央揃えに */
    }
    .footer__col--info {
        margin-bottom: 20px;
    }
    .footer__logo {
        justify-content: center;
    }
    .footer__address {
        margin-bottom: 20px;
    }
    .footer__col--nav {
        margin-bottom: 20px;
    }
}

/* モバイル (575px以下) */
@media (max-width: 575px) {
    .section {
        padding: 50px 0;
    }
    
    .fv__title {
        font-size: 2rem;
    }
    .fv__subtitle {
        font-size: 1.1rem;
    }

    .solution-layout-new__left .section-title {
        font-size: 2rem;
    }

    .cta-section__title {
        font-size: 1.8rem;
    }

    /* プロセス */
    .process-list {
        flex-direction: column;
        gap: 40px;
    }

    /* フッター */
    .footer__main {
        flex-direction: column;
        gap: 30px;
        padding-bottom: 30px;
    }
    .footer__col {
        flex: none; /* flex-growをリセット */
        width: 100%;
        text-align: center; /* 中央揃えに */
    }
    .footer__col--info {
        margin-bottom: 20px;
    }
    .footer__logo {
        justify-content: center;
    }
    .footer__address {
        margin-bottom: 20px;
    }
    .footer__col--nav {
        margin-bottom: 20px;
    }
}

/* モバイル (575px以下) */
@media (max-width: 575px) {
    .section {
        padding: 50px 0;
    }
    
    .fv__title {
        font-size: 2rem;
    }
    .fv__subtitle {
        font-size: 1.1rem;
    }

    .solution-layout-new__left .section-title {
        font-size: 2rem;
    }

    .cta-section__title {
        font-size: 1.8rem;
    }
    
    /* フッター */
    .footer__main {
        flex-direction: column;
        gap: 30px;
        padding-bottom: 30px;
    }
    .footer__col {
        flex: none; /* flex-growをリセット */
        width: 100%;
        text-align: center; /* 中央揃えに */
    }
    .footer__col--info {
        margin-bottom: 20px;
    }
    .footer__logo {
        justify-content: center;
    }
    .footer__address {
        margin-bottom: 20px;
    }
    .footer__col--nav {
        margin-bottom: 20px;
    }
}

/* モバイル (575px以下) */
@media (max-width: 575px) {
    .section {
        padding: 50px 0;
    }
    
    .fv__title {
        font-size: 2rem;
    }
    .fv__subtitle {
        font-size: 1.1rem;
    }

    .solution-layout-new__left .section-title {
        font-size: 2rem;
    }

    .cta-section__title {
        font-size: 1.8rem;
    }
}




/* === 15. 追加スタイル (下層ページ) === */

/* --- 15.1 ナビゲーションのアクティブ表示 --- */
/* PCナビ */
.nav-list__item.is-active a {
    color: var(--color-accent);
}
.nav-list__item.is-active a::after {
    transform: scaleX(1);
    background-color: var(--color-accent);
}
.header.is-scrolled .nav-list__item.is-active a {
    color: var(--color-main);
}
.header.is-scrolled .nav-list__item.is-active a::after {
    background-color: var(--color-main);
}

/* モバイルナビ */
.mobile-nav__item.is-active a {
    color: var(--color-accent-dark);
}

/* お問い合わせボタン (CTA) */
.header__cta-btn.is-active {
    background-color: var(--color-text-light);
    color: var(--color-main);
}
.header.is-scrolled .header__cta-btn.is-active {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: var(--color-text-light);
}
.mobile-nav__cta.is-active {
    /* モバイルでは背景色をメインカラーに */
    background-color: var(--color-main);
    color: var(--color-text-light);
    border-color: var(--color-main);
}

/* フッターナビ */
.footer-nav-list .is-active a {
    color: var(--color-accent);
    opacity: 1;
}


/* --- 15.2 下層ページ共通FV --- */
.sub-fv {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    color: var(--color-text-light);
    padding-top: var(--header-height); /* ヘッダー分高さを確保 */
}
.sub-fv__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-main);
    z-index: -1;
}
.sub-fv__content {
    text-align: left;
}
.sub-fv__title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
}
.sub-fv__subtitle {
    font-size: 1.1rem;
    font-weight: 700;
}

.page-content {
    padding: 80px 0;
}
.page-lead {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 60px;
    text-align: center;
    line-height: 1.9;
}
/* テキストセクション（Privacy, Aboutなど） */
.text-content-section {
    margin-bottom: 60px;
}
.text-content-section h3 {
    font-size: 1.5rem;
    color: var(--color-main);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-main);
    margin-top: 40px;
    margin-bottom: 20px;
}
.text-content-section p,
.text-content-section ul,
.text-content-section ol {
    margin-bottom: 20px;
}
.text-content-section ul,
.text-content-section ol {
    padding-left: 20px;
}
.text-content-section ul li,
.text-content-section ol li {
    list-style: revert; /* ulは・, olは数字 */
    margin-bottom: 10px;
}
/* 左揃えのセクションタイトル (Aboutページなどで使用) */
.section-title--left-align {
    font-size: 2rem;
    text-align: left;
    margin-bottom: 30px;
    color: var(--color-main);
}

/* === 7. 下層ページ - コンテンツ別 === */
.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.profile-table {
    border-top: 1px solid #ddd;
}
.profile-table__row {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.profile-table__term {
    flex: 0 0 180px;
    font-weight: 700;
    padding: 20px;
    background-color: var(--color-bg-light);
}
.profile-table__desc {
    flex: 1;
    padding: 20px;
}
.profile-table__desc ul {
    list-style: none;
    padding-left: 0;
}

.contact-form {
    background: var(--color-bg-light);
    border: 1px solid #eee;
    padding: 40px;
    border-radius: var(--radius);
}
.form-group {
    margin-bottom: 25px;
}
.form-label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
}
.form-required {
    display: inline-block;
    background: #c00;
    color: #fff;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}
.form-control {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-family: var(--font-family-base);
    border: 1px solid #ccc;
    border-radius: var(--radius);
}
.form-control:focus {
    outline: none;
    border-color: var(--color-main);
    box-shadow: 0 0 5px rgba(0, 68, 136, 0.3);
}
textarea.form-control {
    resize: vertical;
    min-height: 150px;
}
.form-privacy-check {
    text-align: center;
    margin-bottom: 30px;
}
.form-privacy-check input[type="checkbox"] {
    margin-right: 10px;
    vertical-align: middle;
}
.form-privacy-check a {
    text-decoration: underline;
}
.form-privacy-check a:hover {
    opacity: 0.7;
    text-decoration: none;
}
.form-submit {
    text-align: center;
}
.form-submit .cta-btn {
    padding: 15px 60px;
    font-size: 1.1rem;
}

/* === 8. 状態とアニメーション (.is-active, .js-scroll-trigger など) === */

/* --- 8.1 ヘッダーの状態 --- */
/* ヘッダー スクロール後 (.is-scrolled) */
.header.is-scrolled {
    /* 半透明の白背景 */
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* ガラスのようなぼかし効果 */
    -webkit-backdrop-filter: blur(10px); /* Safari用 */
    backdrop-filter: blur(10px);
}

/* スクロール後のロゴ切り替え */
.header.is-scrolled .logo__icon--white {
    opacity: 0; /* スクロール後(白)を非表示 */
}
.header.is-scrolled .logo__icon--black {
    opacity: 1; /* スクロール後(黒)を表示 */
}

/* スクロール後の文字色変更 */
.header.is-scrolled .header__logo .logo__text,
.header.is-scrolled .nav-list__item a {
    color: var(--color-text-dark);
}

/* スクロール後のアンダーライン色変更 */
.header.is-scrolled .nav-list__item a::after {
    background-color: var(--color-main);
}

/* スクロール後のトグル色変更 */
.header.is-scrolled .nav-toggle__bar {
    background-color: var(--color-text-dark);
}

/* スクロール後のヘッダーCTAボタン */
.header.is-scrolled .header__cta-btn {
    border-color: var(--color-text-dark);
    color: var(--color-text-dark);
    background-color: transparent; /* スクロール後も通常は透明 */
}
.header.is-scrolled .header__cta-btn:hover {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: var(--color-text-light);
}

/* ハンバーガーメニューオープン時 (.is-active) */
.header.is-active .mobile-nav {
    transform: translateY(0);
}

/* ハンバーガー -> バツ印 のアニメーション */
.header.is-active .nav-toggle__bar:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.header.is-active .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}
.header.is-active .nav-toggle__bar:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}
/* メニューオープン時は常に黒（白背景のため） */
.header.is-active .nav-toggle__bar {
    background-color: var(--color-text-dark);
}

/* --- 8.2 ナビゲーションのアクティブ表示 --- */
/* PCナビ */
.nav-list__item.is-active a {
    color: var(--color-accent);
}
.nav-list__item.is-active a::after {
    transform: scaleX(1);
    background-color: var(--color-accent);
}
.header.is-scrolled .nav-list__item.is-active a {
    color: var(--color-main);
}
.header.is-scrolled .nav-list__item.is-active a::after {
    background-color: var(--color-main);
}

/* モバイルナビ */
.mobile-nav__item.is-active a {
    color: var(--color-accent-dark);
}

/* お問い合わせボタン (CTA) */
.header__cta-btn.is-active {
    background-color: var(--color-text-light);
    color: var(--color-main);
}
.header.is-scrolled .header__cta-btn.is-active {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: var(--color-text-light);
}
.mobile-nav__cta.is-active {
    /* モバイルでは背景色をメインカラーに */
    background-color: var(--color-main);
    color: var(--color-text-light);
    border-color: var(--color-main);
}

/* フッターナビ */
.footer-nav-list .is-active a {
    color: var(--color-accent);
    opacity: 1;
}

/* --- 8.3 スクロールアニメーション --- */
.js-scroll-trigger {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.js-scroll-trigger.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* アニメーション遅延設定 */
.fv__title.js-scroll-trigger { transition-delay: 0.2s; }
.fv__subtitle.js-scroll-trigger { transition-delay: 0.4s; }
.solution-layout-new__right.js-scroll-trigger { transition-delay: 0.2s; }
.section-strength .section-subtitle.js-scroll-trigger,
.section-strength .section-title.js-scroll-trigger,
.section-strength .strength-item.js-scroll-trigger:nth-child(1),
.section-strength .strength-item.js-scroll-trigger:nth-child(2),
.section-strength .strength-item.js-scroll-trigger:nth-child(3),
.section-strength .section-link.js-scroll-trigger,
.section-works .section-subtitle.js-scroll-trigger,
.section-works .section-title.js-scroll-trigger,
.section-works .section-link.js-scroll-trigger,
.section-cta .cta-section__title.js-scroll-trigger,
.section-cta .cta-section__subtitle.js-scroll-trigger {
    transition-delay: 0s;
}
.section-works .work-card.js-scroll-trigger:nth-of-type(2) { transition-delay: 0.1s; }
.section-cta .cta-btn.js-scroll-trigger { transition-delay: 0.1s; }

/* セクション背景アニメーション */
.section-intro.is-animating::before,
.section-strength.is-animating::before {
    width: 5000px;
}
.section-intro.is-animating::before { left: calc(50vw - 600px - 100px - 950px); }
.section-strength.is-animating::before { left: calc(50vw - 600px - 480px - 950px); }

/* === 9. メディアクエリ (レスポンシブ) === */
/* --- 9.1 タブレット (991px以下) --- */
@media (max-width: 991px) {
    .sub-fv {
        height: 250px;
    }
    .sub-fv__title {
        font-size: 2.5rem;
    }
    .page-content {
        padding: 60px 0;
    }
    .works-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    :root {
        --header-height: var(--header-height-mobile);
    }
    
    .header__inner {
        padding: 0 20px;
    }

    .header__nav {
        display: none;
    }

    .nav-toggle {
        display: block;
    }
    
    .header__cta-btn {
        display: none;
    }

    .header__right-group {
        gap: 20px;
    }
    
    .mobile-nav {
        display: block;
    }

    .section {
        padding: 60px 0;
    }
    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    .fv__title {
        font-size: 2.5rem;
    }
    
    .solution-layout-new {
        flex-direction: column;
    }
    .solution-layout-new__right {
        padding-top: 0;
    }
    .solution-layout-new__left .section-title {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }
    .section-intro .section-link {
        text-align: left;
    }
    
    .strength-list {
        gap: 40px;
    }
    .strength-item {
        flex-direction: column;
        height: auto;
        min-height: 0;
        gap: 0;
    }
    .strength-item__image {
        width: 100%;
        flex-basis: auto;
        aspect-ratio: 16 / 9;
    }
    .strength-item__content {
        padding: 20px 30px;
    }

    .service-alternating-list { gap: 30px; }
    .service-alternating-item, .service-alternating-item--reverse { flex-direction: column; }
    .service-alternating-item__image, .service-alternating-item--reverse .service-alternating-item__image { border-radius: var(--radius) var(--radius) 0 0; }

    .works-list { flex-direction: column; gap: 30px; }
    .process-list { flex-direction: column; gap: 40px; }

    .footer__main { flex-direction: column; gap: 30px; padding-bottom: 30px; }
    .footer__col { flex: none; width: 100%; text-align: center; }
    .footer__col--info { margin-bottom: 20px; }
    .footer__logo { justify-content: center; }
    .footer__col--nav { margin-bottom: 20px; }
}

/* --- 9.2 中間モバイル (767px以下) --- */
@media (max-width: 767px) {
    .profile-table__row {
        flex-direction: column;
    }
    .profile-table__term {
        flex: 0 0 auto;
        border-bottom: 1px solid #ddd;
    }
    .profile-table__term,
    .profile-table__desc {
        padding: 15px;
    }
}

/* --- 9.3 モバイル (575px以下) --- */
@media (max-width: 575px) {
    .sub-fv {
        height: 200px;
    }
    .sub-fv__title {
        font-size: 2rem;
    }
    .page-content {
        padding: 50px 0;
    }
    .page-lead {
        font-size: 1rem;
        margin-bottom: 40px;
        text-align: left;
    }
    .works-grid {
        grid-template-columns: 1fr;
    }
    .contact-form {
        padding: 25px;
    }

    .section {
        padding: 50px 0;
    }
    
    .fv__title {
        font-size: 2rem;
    }
    .fv__subtitle {
        font-size: 1.1rem;
    }

    .solution-layout-new__left .section-title {
        font-size: 2rem;
    }

    .cta-section__title {
        font-size: 1.8rem;
    }
}