@charset "UTF-8";

/* ========================================
   Font Face Declarations
   ======================================== */
@font-face {
    font-family: 'Shorai Sans';
    src: url('../font/ShoraiSansStdN-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Shorai Sans';
    src: url('../font/ShoraiSansStdN-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Shorai Sans';
    src: url('../font/ShoraiSansStdN-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Shorai Sans';
    src: url('../font/ShoraiSansStdN-Demi.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   デザインシステム変数
   ======================================== */

:root {
    /* Primary Colors */
    --color-primary-core: #f72a48;
    --color-primary-brand: #E6103D;

    /* Secondary Colors */
    --color-secondary-black: #191919;
    --color-secondary-white: #FFFFFF;
    --color-secondary-neutral-light: #f5f5f5;

    /* Spectrum - Neutral */
    --color-neutral-pale: #f2f2f2;
    --color-neutral-light: #CBCBCB;
    --color-neutral-bright: #dfdfdf;
    --color-neutral-gentle: #818181;
    --color-neutral-soft: #656565;
    --color-neutral-airy: #9b9b9b;
    --color-neutral-medium: #191919;
    --color-neutral-regular: #363636;

    /* Spectrum - Red */
    --color-red-pale: #FFEBED;
    --color-red-light: #ff98a0;
    --color-red-bright: #ffd5d7;
    --color-red-regular: #f72a48;
    --color-red-medium: #e6103d;

    /* Spectrum - Violet */
    --color-violet-medium: #6759ff;

    /* Text Colors */
    --color-text-brand: #E6103D;
    --color-text-black: #191919;
    --color-text-subdued: #6f6f6f;

    /* Spacing Scale (モバイルファースト - SPカンプ準拠) */
    --space-xxxxs: 4px;
    --space-xxxs: 8px;
    --space-xxs: 12px;
    --space-xs: 16px;
    --space-sm: 20px;
    --space-md: 24px;
    /* SPカンプで多用される基本padding */
    --space-lg: 32px;
    --space-xl: 40px;
    --space-xxl: 48px;
    --space-xxxl: 56px;
    --space-xxxxl: 64px;
    --space-xxxxxl: 80px;
    /* KVセクションのtop padding */
    --space-xxxxxxl: 96px;
    /* PC専用 */

    /* Typography (モバイルファースト - SPカンプ準拠) */
    --text-xxs: 10px;
    --text-xs: 12px;
    --text-sm: 14px;
    /* speeda_5/text_sm */
    --text-md: 16px;
    /* speeda_5/text_md */
    --text-lg: 18px;
    /* サブタイトル用 */
    --text-xl: 20px;
    /* speeda_5/text_xl */
    --text-xxl: 24px;
    /* speeda_5/text_xxl */
    --text-xxxl: 32px;
    /* speeda_5/text_xxxl - KVタイトル用 */
    --text-xxxxl: 40px;
    /* PC専用 */
    --text-xxxxxl: 48px;
    /* PC専用 */

    /* Font Family */
    --font-family: "Shorai Sans", "Shorai Sans StdN", sans-serif;
    --font-family-form: "Noto Sans JP", sans-serif;
    --font-family-form-note: "Noto Sans", sans-serif;

    /* Font Weight */
    --font-weight: 600;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Line Height (モバイルファースト - SPカンプ準拠) */
    --line-height-default: 1.5;

    /* Letter Spacing（% は仕様で無効なため em 指定） */
    --letter-spacing-tight: 0.02em;
    /* speeda_5用・旧2%相当 */
    --letter-spacing-wide: 0.04em;
    /* speeda用・旧4%相当 */

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-full: 999px;

    /* Stroke Weight */
    --stroke-weight-1: 1px;
    --stroke-weight-2: 2px;
    --stroke-weight-3: 3px;

    /* Effects */
    --effect-glass: blur(28.2px);
    --effect-shadow: drop-shadow(0 0 12px #FFEBED);

    /* SPカンプ専用変数 (モバイルファースト) */
    --sp-padding-base: 24px;
    /* 基本padding */
    --sp-padding-kv-top: 80px;
    /* KVセクションのtop padding */
    --sp-padding-kv-bottom: 32px;
    /* KVセクションのbottom padding */

    /* Form Variables */
    --form-area-width: 342px;
    --z-form-area: 100;
    --form-bg: var(--color-secondary-neutral-light);
    --form-border: #E5E5E5;
    --form-border-focus: var(--color-neutral-gentle);
    --form-border-error: var(--color-primary-core);
    --form-margin: 15px;
    --form-radius: 4px;
    --form-button-bg: #F72A48;
    --form-button-bg-hover: var(--color-red-medium);
    --form-button-radius: 4px;
    --form-error-text: var(--color-primary-core);
    --form-error-bg: var(--color-red-pale);
    --primary: var(--color-primary-brand);
    --btn-border-width: 2px;
    --text-default-brand: var(--color-text-brand);
    --text-subdued: var(--color-text-subdued);
    --white: var(--color-secondary-white);
    --transition-fast: 0.3s ease;
    --logo-clients-height: 48px;
    --animation-duration: 30s;

}

/* ========================================
   レスポンシブブレークポイント定義
   ======================================== */
/* 
   SP（スマートフォン）: ~919px（デフォルト、モバイルファースト）
   TB（タブレット）: 920px~1199px
   PC（デスクトップ）: 1200px~
*/

/* ========================================
   ベーススタイル（フォント設定）
   ======================================== */
html {
    font-family: var(--font-family);
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-md);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* すべての要素にフォントを継承 */
* {
    font-family: inherit;
}

/* ボタン要素もフォントを継承 */
button {
    font-family: inherit;
}

/* ========================================
   Wrapper（ラッパー）
   ======================================== */

.wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .wrapper {
        padding-right: var(--form-area-width);
    }
}

/* =======================================================
   Form Area Component
   ======================================================= */
.form-area {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-form-area);
    width: var(--form-area-width);
    height: 100%;
    background: var(--white);
}

.form-area .form-wrapper {
    height: 100%;
    overflow-y: visible;
    box-sizing: border-box;
}

.form-area .form-container {
    padding: var(--space-xl) var(--space-xs) var(--space-xxxxxl) var(--space-xs);
    background: var(--white);
    border-radius: var(--radius-sm);
    max-height: calc(100vh - var(--space-md) * 2);
    overflow-y: auto;
}

.form-area .form-container h2 {
    margin: 0 0 var(--space-sm) 0;
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 0.8;
    color: var(--color-text-black);
    text-align: center;
}

.form-area .form-container h2 span {
    color: var(--text-default-brand);
    display: block;
}

.form-area .form-container .form-inner {
    font-family: 'Noto Sans JP', sans-serif;
}

/* カスタムフォームスタイル */
.trial-form {
    width: 100%;
}

.form-row {
    display: flex;
    gap: var(--space-xxxs);
    margin-bottom: var(--form-margin);
}

.form-field {
    margin-bottom: var(--form-margin);
}

.form-field--half {
    flex: 1;
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-black);
    margin-bottom: var(--space-xxxxs);
    line-height: 1.4;
}

.form-required {
    color: var(--color-primary-core);
    margin-left: 2px;
}

.form-input,
.form-select {
    width: 100%;
    padding: 10px 16px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--text-sm);
    line-height: 1;
    background: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    color: var(--color-text-black);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23363636' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

.form-input::placeholder {
    color: var(--color-neutral-gentle);
}

.form-input:focus,
.form-select:focus {
    border-color: var(--form-border-focus);
    outline: none;
}

.form-note {
    font-size: var(--text-xs);
    color: var(--color-text-subdued);
    margin-top: var(--space-xxxxs);
    line-height: 1.5;
}

.form-notices {
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
}

.form-notice {
    font-size: var(--text-xs);
    color: var(--color-text-subdued);
    line-height: 1.5;
    margin-bottom: var(--space-xxxs);
}

.form-link {
    color: var(--color-neutral-regular);
    text-decoration: underline;
}

.form-link:hover {
    opacity: 0.7;
}

.form-submit {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--white);
    background: var(--form-button-bg);
    border: none;
    border-radius: var(--form-button-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: var(--space-md);
}

.form-submit:hover {
    background: var(--form-button-bg-hover);
}

.form-submit:active {
    opacity: 0.9;
}

@media (max-width: 767px) {
    .form-area {
        display: none;
    }
}

/* =======================================================
     Marketo Form Styles
     ======================================================= */
.form-container .form-inner .mktoForm {
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
}


/* フォーム要素の基本スタイル */
.form-container .form-inner .mktoForm input[type="text"],
.form-container .form-inner .mktoForm input[type="url"],
.form-container .form-inner .mktoForm input[type="email"],
.form-container .form-inner .mktoForm input[type="tel"],
.form-container .form-inner .mktoForm input[type="number"],
.form-container .form-inner .mktoForm input[type="date"],
.form-container .form-inner .mktoForm select.mktoField,
.form-container .form-inner .mktoForm textarea.mktoField {
    width: 100% !important;
    padding: 10px 16px;
    margin-bottom: var(--form-margin);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--text-sm);
    line-height: 1;
    background: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    transition: border-color var(--transition-fast);
}

/* フォーカス状態 */
.form-container .form-inner .mktoForm input[type="text"]:focus,
.form-container .form-inner .mktoForm input[type="url"]:focus,
.form-container .form-inner .mktoForm input[type="email"]:focus,
.form-container .form-inner .mktoForm input[type="tel"]:focus,
.form-container .form-inner .mktoForm input[type="number"]:focus,
.form-container .form-inner .mktoForm input[type="date"]:focus,
.form-container .form-inner .mktoForm select.mktoField:focus,
.form-container .form-inner .mktoForm textarea.mktoField:focus {
    border-color: var(--form-border-focus);
    outline: none;
}



/* mktoErrorが出る場合 */
.form-container .form-inner .mktoForm .mktoFieldWrap:has(.mktoError) input[type="text"],
.form-container .form-inner .mktoForm .mktoFieldWrap:has(.mktoError) input[type="url"],
.form-container .form-inner .mktoForm .mktoFieldWrap:has(.mktoError) input[type="email"],
.form-container .form-inner .mktoForm .mktoFieldWrap:has(.mktoError) input[type="tel"],
.form-container .form-inner .mktoForm .mktoFieldWrap:has(.mktoError) input[type="number"],
.form-container .form-inner .mktoForm .mktoFieldWrap:has(.mktoError) input[type="date"],
.form-container .form-inner .mktoForm .mktoFieldWrap:has(.mktoError) select.mktoField,
.form-container .form-inner .mktoForm .mktoFieldWrap:has(.mktoError) textarea.mktoField {
    border-color: var(--form-border-error) !important;
}



/* ラベル */
.form-container .form-inner .mktoForm .mktoRequiredField label.mktoLabel,
.form-container .form-inner .mktoForm label.mktoLabel {
    width: auto !important;
    font-weight: 600;
}

.form-container .form-inner .mktoForm.mktoLayoutAbove .mktoLabel {
    position: relative;
    width: 100%;
    padding-top: 0;
    padding-bottom: var(--space-xxxxs);
    font-size: var(--text-sm);
    line-height: 1.4;
}

/* オフセット */
.form-container .form-inner .mktoForm .mktoOffset {
    width: 0 !important;
}

/* 注釈 */
.form-container .form-inner .mktoForm .mktoHtmlText {
    width: 100% !important;
    font-size: var(--text-xs);
    color: var(--text-subdued);
    margin-top: -0.75rem;
    margin-bottom: var(--form-margin);
}

.form-container .form-inner .mktoForm .mktoHtmlText a {
    text-decoration: underline !important;
}

.form-container .form-inner .mktoForm .mktoHtmlText a:hover {
    opacity: 0.6;
}

/* フォーム行とカラム */
.form-container .form-inner .mktoForm .mktoFormRow {
    display: flex;
    margin: 0;
    gap: var(--space-xxxs);
    align-items: flex-end;
}

.form-container .form-inner .mktoForm .mktoFormCol {
    float: none;
    width: 100%;
}

.form-container .form-inner .mktoForm .mktoFieldWrap {
    position: relative;
    float: none;
}


/* ボタン行 */
.form-area .form-container .form-inner .mktoButtonRow {
    width: 100%;
    margin-top: 0;
    z-index: 0;
    bottom: 0;
    left: 0;
}



.form-area .form-container .form-inner .mktoButtonRow .mktoButtonWrap {
    display: block;
    padding-bottom: var(--space-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.70) 25%, #FFF 100%);
    margin: 0;
    height: 100px;
    width: 100%;
    position: fixed;
    bottom: 0;
}


/* ボタンスタイル */
.form-container .form-inner .mktoForm .mktoButtonWrap.mktoMinimal .mktoButton,
.form-container .form-inner .mktoForm .mktoButton {
    position: fixed;
    right: 1.5rem;
    bottom: 1rem;
    margin: 0 auto;
    padding: var(--space-xs) var(--space-sm);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--white);
    background: var(--form-button-bg);
    border: none;
    border-radius: var(--form-button-radius);
    cursor: pointer;
    transition: var(--transition-fast);
}



.form-container .form-inner .mktoForm .mktoButtonWrap.mktoMinimal .mktoButton:hover,
.form-container .form-inner .mktoForm .mktoButton:hover {
    box-shadow: inset 0 0 0 3px var(--primary);
    color: var(--text-default-brand);
    background-color: #FFE8E8;
}



.form-container .form-inner .mktoForm .mktoButtonWrap.mktoMinimal .mktoButton:disabled,
.form-container .form-inner .mktoForm .mktoButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-area .form-container .form-inner .mktoButtonRow .mktoNative {
    margin-left: 0 !important;
}




/* 必須フィールドのアスタリスク */
.form-container .form-inner .mktoForm.mktoLayoutAbove .mktoRequiredField .mktoAsterix {
    padding: 0;
}

.form-container .form-inner .mktoForm .mktoRequiredField .mktoAsterix {
    width: 0;
}

.form-container .form-inner .mktoForm .mktoAsterix {
    color: transparent;
}

.form-container .form-inner .mktoForm .mktoAsterix::after {
    content: "";
    position: absolute;
    top: 2.5px;
    right: -10px;
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--color-primary-core);
    border-radius: 50%;
}

.form-container .form-inner .mktoForm .mktoFormCol:nth-child(2) .mktoAsterix::after {
    display: none;
}


/* エラーメッセージ */
.form-container .form-inner .mktoForm .mktoError {
    position: absolute;
    bottom: -11px !important;
    left: 0;
}

.form-container .form-inner .mktoFormRow:nth-child(2) .mktoError {
    bottom: -28px !important;
}


.form-container .form-inner .mktoForm .mktoError .mktoErrorMsg {
    display: inline-block;
    left: 1rem;
    max-width: 100%;
    margin-top: 7px;
    padding: var(--space-xxxxs) var(--space-xxxs);
    font-size: 14px;
    color: var(--form-error-text);
    background-color: var(--form-error-bg);
    background-image: none;
    border: 1px solid var(--form-error-bg);
    border-radius: 4px;
    box-shadow: none;
    text-shadow: none;
}

.form-container .form-inner .mktoForm .mktoError .mktoErrorArrow {
    display: inline-block;
    width: 1rem;
    height: var(--space-xs);
    margin-top: 5px;
    background-color: var(--form-error-bg);
    border: 1px solid var(--form-error-bg);
    border-right: none;
    border-bottom: none;
    transform: rotate(45deg);
}



/* 非表示フィールド */
.form-container .form-inner .mktoForm .mktoFormRow[style*="display: none"],
.form-container .form-inner .mktoForm .mktoFormRow[style*="display:none"] {
    display: none !important;
}

/* 選択リストのスタイリング */
.form-container .form-inner .mktoForm select.mktoField {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23666" d="M4 6l4 4 4-4H4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

/* テキストエリアの調整 */
.form-container .form-inner .mktoForm textarea.mktoField {
    min-height: 80px;
    resize: vertical;
}

/* =======================================================
     Focus Management & Accessibility
     ======================================================= */
.focus-visible {
    outline: var(--btn-border-width) solid var(--primary);
    outline-offset: var(--btn-border-width);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: var(--btn-border-width) solid var(--primary);
    outline-offset: var(--btn-border-width);
}

.scene__table-container:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ========================================
   Header（ヘッダー）セクション
   ======================================== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-md);
    width: 100%;
    max-width: 100%;
    margin: 0;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-sizing: border-box;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* スクロール時の追従ヘッダー */
.header.is-scrolled {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* メニュー展開時のスクロールロック（industry-research 同構造） */
body.nav-open {
    overflow: hidden;
}

body.nav-open .header__logo {
    z-index: 1001;
}

/* ヘッダーラップ */
.header__wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0;
}

/* ロゴ */
.header__logo {
    display: flex;
    flex-direction: column;
    gap: 0.46px;
    padding: 15.97px 0;
    height: 64px;
    flex-shrink: 0;
    position: relative;
    z-index: 1001;
}

.header__logo a {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.header__logo img {
    height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ナビゲーションコンテナ */
.header__nav-container {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 32px;
}

/* PCナビゲーション */
.header__nav--pc {
    display: none;
}

/* PCナビゲーションリスト */
.header__nav-list {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--space-lg);
}

/* PCナビゲーションアイテム */
.header__nav-item {
    list-style: none;
}

/* PCナビゲーションリンク */
.header__nav-link {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--color-text-black);
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: block;
}

.header__nav-link:hover {
    opacity: 0.7;
}

/* ログインリンク */
.header__login {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.header__login-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: 0.04em;
    color: var(--color-neutral-regular);
    text-decoration: none;
    transition: opacity 0.3s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.header__login-link:hover {
    opacity: 0.7;
}

.header__login-text {
    display: inline-block;
}

.header__login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.header__login-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

/* ログインサブメニュー */
.header__login-submenu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    display: none;
    flex-direction: column;
    min-width: 280px;
    background-color: var(--color-secondary-white);
    border-radius: var(--radius-md);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
    padding: var(--space-xxxs) 0;
    list-style: none;
    z-index: 1000;
}

.header__login-submenu[aria-hidden="false"] {
    display: flex;
}

.header__login-submenu-item {
    list-style: none;
}

.header__login-submenu-link {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: 0.04em;
    color: var(--color-text-black);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: var(--radius-xs);
    margin: 0 var(--space-xxxs);
}

.header__login-submenu-link:hover {
    background-color: var(--color-red-pale);
    color: var(--color-primary-brand);
    font-weight: bold;
}

/* ログインボタンが開いている時、矢印を上向きに */
.header__login-link[aria-expanded="true"] .header__login-icon-img {
    transform: rotate(180deg);
}

/* PC セカンダリーボタン */
.btn-secondary_s {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xxxxs);
    padding: var(--space-xxxs) var(--space-sm);
    background-color: var(--color-secondary-white);
    border: var(--stroke-weight-2) solid var(--color-red-bright);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-sm);
    color: var(--color-primary-brand);
}

.btn-secondary_s:hover {
    background-color: var(--color-neutral-pale);
    border-color: var(--color-red-light);
}

.btn-secondary-text {
    display: inline-block;
}

.btn-secondary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

/* PC プライマリーボタン */
.btn-primary_s {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xxxxs);
    padding: var(--space-xxxs) var(--space-sm);
    background-color: var(--color-primary-core);
    border: var(--stroke-weight-2) solid var(--color-secondary-white);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-sm);
    color: var(--color-secondary-white);
}

.btn-primary_s:hover {
    background-color: var(--color-red-medium);
    border-color: var(--color-secondary-white);
}

.btn-primary-text {
    display: inline-block;
}

.btn-primary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* プライマリーボタン（Mサイズ） */
.btn-primary_m {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-xxxxs);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-primary-core);
    border: var(--stroke-weight-2) solid var(--color-secondary-white);
    border-radius: var(--radius-full);
    backdrop-filter: var(--effect-glass);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-xl);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-secondary-white);
    text-align: center;
    width: 240px;
    min-width: 240px;
    box-sizing: border-box;
}

.btn-primary_m .btn-primary-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-primary_m .btn-primary-icon svg,
.btn-primary_m .btn-primary-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.btn-primary_m .btn-primary-icon path {
    stroke: currentColor;
    stroke-width: 2.18px;
    /* stroke_31MBSM - 2.1818182468414307px */
}

.btn-primary_m:hover {
    background-color: var(--color-red-medium);
    border-color: var(--color-secondary-white);
    transition: 0.3s;
}

.btn-primary_m:active {
    background-color: var(--color-primary-brand);
    border-color: var(--color-secondary-white);
}

/* セカンダリーボタン（Mサイズ） */
.btn-secondary_m {
    display: none;
    /* モバイルでは非表示 */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-xxxxs);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-secondary-white);
    border: var(--stroke-weight-2) solid var(--color-red-bright);
    border-radius: var(--radius-full);
    backdrop-filter: var(--effect-glass);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-xl);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-brand);
    text-align: center;
    width: 240px;
    min-width: 240px;
    box-sizing: border-box;
    white-space: nowrap;
}

.btn-secondary_m .btn-secondary-text {
    white-space: nowrap;
}

.btn-secondary_m .btn-secondary-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-secondary_m .btn-secondary-icon svg,
.btn-secondary_m .btn-secondary-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.btn-secondary_m:hover {
    background: var(--color-bx-semantic-spectrum-red-bright, #FFD5D7);
    border-color: var(--color-red-light);
}

.btn-secondary_m:active {
    background-color: var(--color-neutral-bright);
    border-color: var(--color-red-bright);
}

/* =======================================================
   Hamburger Menu Component 
   ======================================================= */

/* グローバルナビゲーションラッパー */
.js-global-nav {
    position: relative;
    z-index: 998;
}

/* グローバルナビゲーション本体 - transform方式 */
.global__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, rgba(229, 236, 238, 1) 0%, rgba(242, 245, 246, 1) 7%, rgba(251, 252, 253, 1) 16%, rgba(255, 255, 255, 1) 28%, rgba(252, 253, 253, 1) 58%, rgba(244, 247, 248, 1) 76%, rgba(230, 236, 239, 1) 90%, rgba(215, 225, 229, 1) 100%);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding-top: 64px;
    padding-bottom: var(--space-xxxxl);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* メニューオープン時：スライドイン（industry-research 同構造: open） */
.global__nav.open,
.js-global-nav.open .global__nav {
    transform: translateX(0);
}

/* PC表示時は常に非表示 */
@media (min-width: 1200px) {

    .js-global-nav,
    .global__nav {
        display: none !important;
    }
}

/* グローバルナビゲーション内のinner */
.global__nav .inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* グローバルナビゲーションリスト（HTMLの構造に合わせて追加） */
.global__nav-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0 24px;
    margin: 0;
    gap: 0;
    width: 100%;
}

/* グローバルナビゲーションアイテム（HTMLの構造に合わせて追加） */
.global__nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: var(--space-xxs) 0;
}

/* グローバルナビゲーションリンク */
.global__nav-link {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-md);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-black);
    text-decoration: none;
    display: block;
    width: 100%;
    transition: opacity 0.3s ease;
}

.global__nav-link:hover {
    opacity: 0.7;
}

/* メニューリンク部分 */
.global__nav-links {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 80px;
    width: 100%;
    padding-top: 20px;
}

/* リンクアイテム */
.global__nav-link-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    padding: var(--space-xxs) 0;
    width: 100%;
}

.global__nav-link-item a {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-md);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-black);
    text-decoration: none;
    display: block;
    width: 100%;
    transition: opacity 0.3s ease;
}

.global__nav-link-item a:hover {
    opacity: 0.7;
}

/* ログインリンク */
.global__nav-link-item--login {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xxs);
    padding: var(--space-xxs) 0;
}

.global__nav-login {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xxxxs);
    padding: var(--space-xxs) 0;
    /* 12px 0px */
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.global__nav-login-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-md);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-neutral-regular);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* ログインメニュー展開時のテキスト色 */
.global__nav-login[aria-expanded="true"] .global__nav-login-text {
    color: var(--color-primary-brand);
}

.global__nav-login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.global__nav-login-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 0.3s ease;
}

/* ログインメニュー展開時のアイコン色 */
.global__nav-login[aria-expanded="true"] .global__nav-login-icon {
    transform: rotate(180deg);
}

.global__nav-login[aria-expanded="true"] .global__nav-login-icon-img {
    filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(7158%) hue-rotate(340deg) brightness(90%) contrast(90%);
}

/* ログインサブメニュー */
.global__nav-login-submenu {
    display: none;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--space-xxxs);
    width: 100%;
}

.global__nav-login-submenu[aria-hidden="false"] {
    display: flex;
}

.global__nav-login-submenu-item {
    list-style: none;
}

.global__nav-login-submenu-link {
    display: block;
    padding: var(--space-xxxs);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-sm);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-neutral-regular);
    text-decoration: none;
    transition: opacity 0.3s ease;
    width: 100%;
}

.global__nav-login-submenu-link:hover {
    opacity: 0.7;
}

/* CTAエリア */
.global__nav-cta {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xxxxs);
    padding: var(--space-xxs) var(--space-xs);
    width: 100%;
}

/* CTAボタンコンテナ */
.global__nav-cta-buttons {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    gap: var(--space-xxxs);
    width: 100%;
}

/* CTAボタン */
.global__nav-cta-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-xxxxs);
    padding: var(--space-xxs) 0;
    align-items: center;
    gap: var(--space-xxxxs);
    padding: var(--space-xxs) 0;
    flex: 1;
    border-radius: var(--radius-full);
    backdrop-filter: var(--effect-glass);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-md);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    text-align: center;
}

/* 資料ダウンロードボタン（Secondary） - Figma secondary button準拠 */
.global__nav-cta-button--secondary {
    background-color: var(--color-secondary-white);
    border: var(--stroke-weight-2) solid var(--color-red-bright);
    color: var(--color-primary-brand);
}

.global__nav-cta-button--secondary:hover {
    background-color: var(--color-neutral-pale);
    border-color: var(--color-red-light);
}

/* 無料トライアルボタン（Primary） - Figma primary button準拠 */
.global__nav-cta-button--primary {
    background-color: var(--color-primary-core);
    border: var(--stroke-weight-2) solid var(--color-secondary-white);
    color: var(--color-secondary-white);
}

.global__nav-cta-button--primary:hover {
    background-color: var(--color-red-medium);
    border-color: var(--color-secondary-white);
}

/* ハンバーガーボタン */
.hamburger {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxxs);
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1001;
}

/* ハンバーガーの線（2本） */
.hamburger__line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-black);
    border-radius: var(--radius-full);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* メニューオープン時のアニメーション */
/* メニューオープン時：ハンバーガー→×アイコン（industry-research 同構造） */
.js-global-nav.open .hamburger .hamburger__line:nth-child(1) {
    transform: translateY(5px) rotate(30deg);
    background-color: var(--color-primary-core);
}

.js-global-nav.open .hamburger .hamburger__line:nth-child(2) {
    transform: translateY(-5px) rotate(-30deg);
    background-color: var(--color-primary-core);
}

@media (min-width: 1200px) {
    .hamburger {
        display: none;
    }
}

/* PC表示時の調整: 1200px~ */
@media (min-width: 768px) {
    .header {
        width: calc(100% - 342px);
    }
}

@media (min-width: 1200px) {
    .header {
        padding: 0;
        margin: 0;
        left: 0;
        right: 0;
        transform: none;
    }


    .header__wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--space-lg);
        gap: var(--space-md);
        box-sizing: border-box;
    }

    .header__logo {
        height: 72px;
        padding: 0 24px;
        -webkit-backdrop-filter: blur(28.2px);
        border-radius: 0px 0px 8px 0px;
        background-color: transparent;
    }

    .header__logo img {
        height: 40px;
    }

    .header__nav-container {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 32px;
        width: auto;
    }

    .header__nav--pc {
        display: flex !important;
        align-items: center;
    }

    .header__nav-list {
        display: flex;
        flex-direction: row;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 24px;
    }

    .header__nav-item {
        list-style: none;
    }

    .header__nav-link {
        font-family: var(--font-family);
        font-size: 14px;
        font-weight: var(--font-weight);
        line-height: 1.5em;
        letter-spacing: 0.04em;
        color: var(--color-neutral-regular);
        text-decoration: none;
        transition: opacity 0.3s ease;
        display: block;
    }

    .header__nav-link:hover {
        opacity: 0.7;
    }

    .header__login {
        display: flex !important;
        position: relative;
    }

    .header__login-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        font-family: var(--font-family);
        font-size: 14px;
        font-weight: var(--font-weight);
        line-height: 1.5em;
        letter-spacing: 0.04em;
        color: var(--color-neutral-regular);
        text-decoration: none;
        transition: opacity 0.3s ease;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .header__login-text {
        color: var(--color-neutral-regular);
    }

    .header__login-icon {
        display: flex;
        align-items: center;
    }

    .header__login-link:hover {
        opacity: 0.7;
    }

    /* ログインサブメニュー（PC表示時） */
    .header__login-submenu {
        position: absolute;
        display: none;
        flex-direction: column;
        width: 379px;
        background-color: var(--color-secondary-white);
        border-radius: var(--radius-md);
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
        padding: var(--space-md, 24px) var(--space-xs, 16px);
        align-items: flex-start;
        list-style: none;
        z-index: 1000;
    }

    .header__login-submenu[aria-hidden="false"] {
        display: flex;
    }

    .header__login-submenu-item {
        list-style: none;
        width: 100%;
        box-sizing: border-box;
    }

    .header__login-submenu-link {
        display: block;
        padding: var(--space-xs) var(--space-sm);
        font-family: var(--font-family);
        font-size: var(--text-sm);
        font-weight: var(--font-weight);
        line-height: var(--line-height-default);
        letter-spacing: 0.04em;
        color: var(--color-text-black);
        text-decoration: none;
        transition: all 0.2s ease;
        border-radius: var(--radius-xs);
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header__login-submenu-link:hover {
        background-color: var(--color-red-pale);
        color: var(--color-primary-brand);
    }

    /* ログインボタンが開いている時、矢印を上向きに */
    .header__login-link[aria-expanded="true"] .header__login-icon-img {
        transform: rotate(180deg);
    }

    .js-global-nav {
        display: none !important;
    }
}

/* 1200px~1365pxの範囲での調整 */
@media (min-width: 1200px) {

    .header__wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        padding: 0 var(--space-lg);
        gap: var(--space-md);
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .header__nav-container {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 32px;
        width: auto;
        flex-shrink: 0;
    }

    .header__nav--pc {
        display: flex !important;
        align-items: center;
    }

    .header__login {
        display: flex !important;
        position: relative;
    }

    /* ログインサブメニュー（PC表示時） */
    .header__login-submenu {
        position: absolute;
        display: none;
        flex-direction: column;
        width: 379px;
        background-color: var(--color-secondary-white);
        border-radius: var(--radius-md);
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
        padding: var(--space-md, 24px) var(--space-xs, 16px);
        align-items: flex-start;
        list-style: none;
        z-index: 1000;
    }

    .header__login-submenu[aria-hidden="false"] {
        display: flex;
    }

    .header__login-submenu-item {
        list-style: none;
        width: 100%;
        box-sizing: border-box;
    }

    .header__login-submenu-link {
        display: block;
        padding: var(--space-xs) var(--space-sm);
        font-family: var(--font-family);
        font-size: var(--text-sm);
        font-weight: var(--font-weight);
        line-height: var(--line-height-default);
        letter-spacing: 0.04em;
        color: var(--color-text-black);
        text-decoration: none;
        transition: all 0.2s ease;
        border-radius: var(--radius-xs);
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header__login-submenu-link:hover {
        background-color: var(--color-red-pale);
        color: var(--color-primary-brand);
    }

    /* ログインボタンが開いている時、矢印を上向きに */
    .header__login-link[aria-expanded="true"] .header__login-icon-img {
        transform: rotate(180deg);
    }
}

/* タブレット（TB）: 920px~1199px */
@media (min-width: 920px) and (max-width: 1199px) {
    .header {
        max-width: 100%;
        padding: 0 var(--space-md);
    }
}

/* レスポンシブクラス（基本スタイル - モバイルファースト） */
.pc-view {
    display: none;
}

.sp-view {
    display: block;
}

/* SPメニュー内のCTAエリア */
.micro-cta {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: var(--space-lg);
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    max-width: 342px;
    align-items: center;
    /* ボタンを左右中央に配置 */
}

/* 資料ダウンロードボタン */
.btn-download {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--space-xxs) var(--space-md);
    background-color: var(--color-secondary-white);
    border: var(--stroke-weight-2) solid var(--color-red-bright);
    border-radius: var(--radius-full);
    backdrop-filter: var(--effect-glass);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-md);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-brand);
    text-align: center;
    width: 100%;
}

.btn-download:hover {
    background-color: var(--color-neutral-pale);
    border-color: var(--color-red-light);
}

/* トライアルエリア */
.trial-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

.trial-area__microcopy {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxxs);
    width: 100%;
}

.trial-area__microcopy img {
    height: auto;
    width: auto;
    max-height: 20px;
    object-fit: contain;
}

.trial-badge {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-sm);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-black);
    text-align: center;
}

.text--red {
    color: var(--color-primary-brand);
}

/* トライアルボタン */
.btn-trial {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--space-xxs) var(--space-md);
    background-color: var(--color-primary-core);
    border: var(--stroke-weight-2) solid var(--color-secondary-white);
    border-radius: var(--radius-full);
    backdrop-filter: var(--effect-glass);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-md);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-secondary-white);
    text-align: center;
    width: 100%;
}

.btn-trial:hover {
    background-color: var(--color-red-medium);
    border-color: var(--color-secondary-white);
}

/* ========================================
   KV（キービジュアル）セクション
   ======================================== */

.kv {
    padding-top: var(--space-xxxxxl);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-bottom: var(--sp-padding-kv-bottom);
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
    position: relative;
}

/* 背景画像用（必要に応じて） */
.kv__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.kv__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

/* PC表示時：背景画像をデバイス幅全体に表示 */
@media (min-width: 1200px) {
    .kv__bg {
        left: 50%;
        transform: translateX(-50%);
        max-width: none;
    }
}

/* KVコンテナ - Figma layout_ESH1BW準拠 */
.kv__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    /* 20px */
    width: 100%;
    max-width: 342px;
    position: relative;
    z-index: 2;
}

/* KVコンテンツ */
.kv__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}

/* タイトルエリア */
.kv__title {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    color: var(--color-text-brand);
    white-space: nowrap;
}

/* タイトル部分 */
.kv__title-main {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xxs);
    width: 100%;
}

/* メインタイトルラッパー */
.kv__maintitle-wrapper {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xxxxs);
    width: 100%;
}

/* メインタイトル */
.kv__maintitle {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 36px;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    text-align: left;
    margin: 0;
    width: 100%;
    color: #E6103D;
}

/* SP表示時は改行を表示 */
.kv__maintitle br {
    display: inline;
}

/* メインタイトル（赤色） */
.kv__maintitle--red {
    color: var(--color-primary-brand);
}

/* メインタイトル（サブ） */
.kv__maintitle--sub {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    color: var(--color-text-black);
    text-align: center;
}

/* サブタイトル */
.kv__subtitle {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* サブタイトル行 */
.kv__subtitle-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
    gap: 0;
}

/* サブタイトルテキスト部分 */
.kv__subtitle-text-part {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-regular);
    text-align: left;
}

/* AI部分のグラデーション */
.kv__subtitle-highlight-ai {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-xl);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    background: linear-gradient(115deg, rgba(247, 42, 72, 1) 1%, rgba(244, 42, 75, 1) 8%, rgba(237, 42, 85, 1) 14%, rgba(224, 42, 102, 1) 21%, rgba(206, 42, 125, 1) 29%, rgba(183, 43, 156, 1) 38%, rgba(155, 44, 193, 1) 45%, rgba(124, 45, 235, 1) 53%, rgba(57, 88, 225, 1) 74%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* サブタイトルテキスト */
.kv__subtitle-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: #191919;
    text-align: left;
    margin: 0;
}

/* SP表示時は改行を表示 */
.kv__subtitle-text br {
    display: inline;
}

/* サブタイトルハイライトテキスト */
.kv__subtitle-highlight-text {
    white-space: nowrap;
}

/* サブタイトル説明文エリア */
.kv__subtitle-description {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: var(--space-xxs);
}

/* サブタイトル説明文行 */
.kv__subtitle-description-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
    gap: 0;
}

/* サブタイトル説明文テキスト */
.kv__subtitle-description-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: #363636;
    text-align: left;
}

/* サブタイトル説明文の「が」部分 */
.kv__subtitle-description-row .kv__subtitle-description-text:last-of-type {
    font-size: 18px;
    line-height: 1.8;
}

/* サブタイトル説明文AIハイライト */
.kv__subtitle-description-ai {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    background: linear-gradient(115deg, rgba(247, 42, 72, 1) 1%, rgba(244, 42, 75, 1) 8%, rgba(237, 42, 85, 1) 14%, rgba(224, 42, 102, 1) 21%, rgba(206, 42, 125, 1) 29%, rgba(183, 43, 156, 1) 38%, rgba(155, 44, 193, 1) 45%, rgba(124, 45, 235, 1) 53%, rgba(57, 88, 225, 1) 74%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
}


.kv__subtitle-description>.kv__subtitle-description-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: #363636;
    text-align: left;
    margin: 0;
    margin-top: 0;
}

/* ビジュアル要素エリア */
.kv__visual {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Speeda画像 */
.kv__image {
    width: 100%;
    height: 197.31px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kv__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* モックアップ画像エリア - アスペクト比を保持してコンテンツ幅に収める */
.kv__mockup {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.kv__mockup img {
    width: 80%;
    max-width: 80%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* CTAボタンエリア */
.kv__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    align-self: stretch;
}

/* CTAボタン */
.kv__cta-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: var(--space-xxxxs);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-primary-core);
    border: var(--stroke-weight-2) solid var(--color-secondary-white);
    border-radius: var(--radius-full);
    backdrop-filter: var(--effect-glass);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.kv__cta-button:hover {
    background-color: var(--color-red-medium);
    border-color: var(--color-secondary-white);
}

.kv__cta-button:active {
    background-color: var(--color-primary-brand);
}

/* CTAボタンテキスト */
.kv__cta-button-text {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: var(--text-xl);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-secondary-white);
    text-align: center;
}

/* CTAボタンアイコン */
.kv__cta-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.kv__cta-button-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.kv__cta-button-icon path {
    fill: var(--color-secondary-white);
}

/* タブレット（TB）: 920px~1199px - 2カラムレイアウト */
@media (min-width: 920px) and (max-width: 1199px) {
    .kv {
        max-width: 100%;
        padding: var(--space-xxxl) var(--space-lg) var(--space-xxl);
    }

    /* Container: 縦並びレイアウト（モックアップ上、コンテンツ下） */
    .kv__container {
        display: flex;
        flex-direction: column;
        /* タブレット表示でも縦並び */
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        /* 中央揃え */
        gap: var(--space-lg);
        max-width: 100%;
        width: 100%;
        position: relative;
    }

    /* モックアップ画像 */
    .kv__mockup {
        flex: 1;
        max-width: 100%;
        /* 全幅 */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .kv__mockup img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    /* Title: 左揃え */
    .kv__title {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
    }

    /* メインタイトル */
    .kv__maintitle {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 32px;
        line-height: 1.5em;
        letter-spacing: 0.02em;
        color: #E6103D;
        text-align: left;
        margin: 0;
    }

    /* 改行を表示 */
    .kv__maintitle br {
        display: inline;
    }

    /* サブタイトルテキスト */
    .kv__subtitle-text {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 24px;
        line-height: 1.5em;
        letter-spacing: 0.02em;
        color: #191919;
        text-align: left;
    }

    /* 改行を表示 */
    .kv__subtitle-text br {
        display: inline;
    }

    /* サブタイトル説明文テキスト */
    .kv__subtitle-description-text {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 18px;
        line-height: 1.8;
        letter-spacing: 0.02em;
        color: #363636;
        text-align: left;
    }

    /* AI部分 */
    .kv__subtitle-description-ai {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 22px;
        line-height: 1.8;
        letter-spacing: 0.02em;
        background: linear-gradient(115deg, rgba(247, 42, 72, 1) 1%, rgba(244, 42, 75, 1) 8%, rgba(237, 42, 85, 1) 14%, rgba(224, 42, 102, 1) 21%, rgba(206, 42, 125, 1) 29%, rgba(183, 43, 156, 1) 38%, rgba(155, 44, 193, 1) 45%, rgba(124, 45, 235, 1) 53%, rgba(57, 88, 225, 1) 74%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* CTAボタンエリア: 下部に配置、中央揃え、〜1199px は max-width 342px */
    .kv .cta-buttons {
        display: flex;
        flex-direction: row;
        gap: 12px;
        width: 100%;
        max-width: 342px;
        margin-top: var(--space-lg);
        justify-content: center;
        /* ボタンを左右中央に配置 */
        align-items: center;
    }
}

/* PC表示時の調整 */
@media (min-width: 1200px) {
    .kv {
        max-width: 100%;
        padding: 120px 40px 56px;
        margin: 0 auto;
    }

    /* Container */
    .kv__container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 52px;
        max-width: 1200px;
        width: 100%;
        position: relative;
        flex-wrap: wrap;
    }

    /* Content */
    .kv__content {
        display: flex;
        flex-direction: column;
        gap: 52px;
        flex: 1;
    }

    /* Title */
    .kv__title {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        flex: 1;
    }

    /* メインタイトル */
    .kv__maintitle {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 36px;
        line-height: 1.5em;
        letter-spacing: 0.02em;
        color: #E6103D;
        text-align: left;
        margin: 0;
    }

    /* サブタイトルテキスト */
    .kv__subtitle-text {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 28px;
        line-height: 1.5em;
        letter-spacing: 0.02em;
        color: #191919;
    }

    /* サブタイトル説明文テキスト */
    .kv__subtitle-description-text {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 18px;
        line-height: 1.8;
        letter-spacing: 0.02em;
        color: #363636;
    }

    /* AI部分 */
    .kv__subtitle-description-ai {
        font-family: var(--font-family);
        font-weight: 600;
        font-size: 22px;
        line-height: 1.8;
        letter-spacing: 0.02em;
        background: linear-gradient(115deg, rgba(247, 42, 72, 1) 1%, rgba(244, 42, 75, 1) 8%, rgba(237, 42, 85, 1) 14%, rgba(224, 42, 102, 1) 21%, rgba(206, 42, 125, 1) 29%, rgba(183, 43, 156, 1) 38%, rgba(155, 44, 193, 1) 45%, rgba(124, 45, 235, 1) 53%, rgba(57, 88, 225, 1) 74%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* CTAボタンエリア */
    .cta-buttons {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: 12px;
        width: auto;
        max-width: none;
        align-self: flex-start;
    }

    /* 資料ダウンロードボタン: PC表示のみ表示 */
    .btn-secondary_m {
        display: flex;
    }

    /* タブレット用CTAボタン: PCでは非表示 */
    .cta-buttons--tablet {
        display: none;
    }

    /* モックアップ画像 */
    .kv__mockup {
        position: absolute;
        right: 0;
        top: 0;
        transform: translateY(0);
        width: 520px;
        height: 300px;
        flex-shrink: 0;
    }

    .kv__mockup img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        max-width: 100%;
    }
}

/* 1200px~1365pxの範囲での調整 */
@media (min-width: 1200px) {
    .kv__bg {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: none;
    }


    .kv__container {
        max-width: 944px;
        margin: 0 auto;
    }

    .kv__title {
        max-width: calc(100% - 480px - 52px);
        min-width: 0;
        flex: 0 1 auto;
    }

    .kv__container {
        flex-wrap: nowrap;
    }

    .kv__maintitle {
        font-size: 36px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .kv__subtitle-text {
        font-size: 28px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .kv__subtitle-description-text {
        font-size: 22px;
        line-height: 1.8;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .kv__subtitle-description {
        margin-top: var(--space-md)
    }

    .kv__subtitle-description-ai {
        font-size: 22px;
        line-height: 1.8;
    }
}

@media (min-width: 1366px) {
    .kv__maintitle br {
        display: none;
    }
}

/* ========================================
   Features（機能）セクション
   ======================================== */

/* Features（機能）セクション */
.features {
    background-color: var(--color-secondary-white);
    padding: var(--space-xxxxxxl) var(--space-md) var(--space-xxxl) var(--space-md);
    width: 100%;
}

/* Features（機能）セクション専用スタイル */
.features__container {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xxxxl);
    width: 100%;
    max-width: 944px;
    margin: 0 auto;
}

.features__article {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xxxl);
    width: 100%;
}

.features__tools {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    gap: var(--space-md);
    width: 100%;
}

.features__tools-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs, 12px);
}

/* 2つ目のtoolsセクション用: バッジと「が」の接続 */
.features__tools-badge-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    width: 100%;
}

.features__tools-badge-connector {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    font-weight: var(--font-weight);
    color: var(--color-text-black);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
    margin: 0;
}

.features__tools-title-continuation {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    font-weight: var(--font-weight);
    color: var(--color-text-black);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
}

/* 「現場の声」がすぐに手に入る。を一行で表示 */
.features__tools-title-oneline {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    white-space: nowrap;
}

.features__tools-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxxxs);
    padding: 0 0 0 var(--space-xxs);
    background-color: var(--color-primary-core);
    border-radius: var(--radius-xs);
    width: fit-content;
    border: none;
    margin: 0;
}

.features__tools-badge-text {
    font-family: var(--font-family);
    font-size: var(--text-xxl);
    font-weight: var(--font-weight);
    color: var(--color-secondary-white);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
}

/* 「現場の声」だけ左の余白無くす（全デバイス幅で共通） */
.features__tools[aria-labelledby="features-tools-heading-2"] .features__tools-badge {
    padding-left: 0;
}

/* features-tools-heading-3：常に改行（AI Agentが、／調査から示唆を導く。） */
#features-tools-heading-3 .features__tools-badge {
    display: block;
}

.features__tools-description {
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--font-weight);
    color: var(--color-neutral-regular);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
    margin: 0;
}

.features__tools-image {
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: var(--color-secondary-white);
    border-radius: 2.85px;
    backdrop-filter: var(--effect-glass);
    box-shadow: 0px 0px 8.55px 0px rgba(255, 235, 237, 1);
    overflow: hidden;
    aspect-ratio: 342 / 219.86;
    flex-shrink: 0;
}

.features__tools-image img,
.features__tools-image video,
.features__tools-image iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.features__tools-image iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
}

/* SP表示時：セクション1とセクション3の順番を入れ替え（テキスト→動画） */
.features__tools:nth-child(1) .features__tools-image,
.features__tools:nth-child(3) .features__tools-image {
    order: 2;
}

.features__tools:nth-child(1) .features__tools-content,
.features__tools:nth-child(3) .features__tools-content {
    order: 1;
}

/* CTAセクション */
.features__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-primary-core);
    border-radius: var(--radius-md);
    width: 100%;
}

.features__cta-visual {
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

.features__cta-visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin-top: var(--space-md);
}

/* Safari: タップでコントロールが出るのを防ぐ（オーバーレイでタップを吸収） */
.features__tools-video {
    pointer-events: none;
}

.features__tools-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
}

@media (min-width: 1200px) {
    .features__cta {
        max-width: 560px;
        margin: 0 auto;
    }
}

.features__cta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 100%;
    gap: var(--space_xs, 16px);
}

.features__cta-title {
    font-family: var(--font-family);
    font-size: var(--text_xl, 20px);
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}

.features__cta-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-xxxxs);
    padding: var(--space-xs) var(--space-md);
    width: 240px;
    background-color: var(--color-secondary-white);
    border: var(--stroke-weight-2) solid var(--color-red-bright);
    border-radius: var(--radius-full);
    backdrop-filter: var(--effect-glass);
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.features__cta-button:hover {
    background: var(--color-bx-semantic-spectrum-red-bright, #FFD5D7);
    border-color: var(--color-red-light);
}

.features__cta-button:active {
    background-color: var(--color-neutral-bright);
    border-color: var(--color-red-bright);
}

.features__cta-button-text {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    font-weight: var(--font-weight);
    color: var(--color-primary-brand);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
    text-align: center;
    white-space: nowrap;
}

.features__cta-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.features__cta-button-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.features__cta-button-icon path {
    fill: var(--color-primary-brand);
    stroke: var(--color-primary-brand);
    stroke-width: 0.75px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* PC表示時の調整 */
@media (min-width: 1200px) {
    .features__container {
        gap: var(--space-xxxxl);
    }

    .features__article {
        gap: 140px;
    }

    .features__tools-badge-text {
        font-size: var(--text-xxxl);
    }

    /* PC表示時：テキスト群と動画を横並びに */
    .features__tools {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .features__tools-content {
        flex: 1;
        gap: 24px;
    }

    .features__tools-image {
        width: 50%;
        max-width: 560px;
        margin: 0;
    }

    /* PC表示時：orderをリセット（元の順番に戻す） */
    .features__tools:nth-child(1) .features__tools-image,
    .features__tools:nth-child(3) .features__tools-image {
        order: 0;
    }

    .features__tools:nth-child(1) .features__tools-content,
    .features__tools:nth-child(3) .features__tools-content {
        order: 0;
    }

    /* PC表示時：CTAセクションを横並びに */
    .features__cta {
        flex-direction: row;
        align-items: center;
        padding: 32px 40px 32px 0;
        max-width: 720px;
        height: 200px;
        margin: 0 auto;
    }

    .features__cta-visual {
        width: 328px;
        height: 200px;
        flex-shrink: 0;
    }

    .features__cta-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin-top: var(--space-md);
    }

    .features__cta-content {
        flex: 1;
        align-items: center;
    }

    /* PC表示時：タイトルを左揃えに */
    .features__cta-title {
        text-align: left;
    }
}

/* ========================================
   Client（クライアント）セクション
   ======================================== */

/* Clientセクション全体  */
.client {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 16px;
    padding: 32px 0;
    background-color: var(--color-secondary-white);
    width: 100%;
}

/* Clientコンテンツ */
.client__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    padding: 0;
    width: 100%;
    margin: 0 auto;
}

/* Client統計情報エリア */
.client__stats {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    flex-wrap: wrap;
}

/* 統計情報行（時価総額TOP100企業） */
.client__stats-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: 0;
    flex-wrap: wrap;
}

/* 統計情報ラベル */
.client__stats-label {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: #363636;
    text-align: left;
}

/* 統計情報数字 */
.client__stats-number {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: #E6103D;
    text-align: left;
}

/* 統計情報テキスト */
.client__stats-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: #363636;
    text-align: left;
}

.logo {
    background: var(--white);
    padding: var(--space-md) 0;
}

.logo__content {
    text-align: center;
}

.logo__stats {
    margin-bottom: var(--space-sm);
}

.logo__stats-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-xxxxs);
}

.logo__stats-item img {
    width: 24px;
    height: 24px;
}

.logo__stats-text {
    display: flex;
    align-items: baseline;
    gap: var(--space-xxxxs);
    font-weight: 600;
}

.logo__stats-label {
    font-size: var(--text-sm);
    color: var(--black);
}

.logo__stats-number {
    font-size: var(--text-xxl);
    font-weight: 600;
    color: var(--text-default-brand);
}

.logo__stats-unit {
    font-size: var(--text-sm);
    color: var(--black);
}

.logo__stats-highlight {
    font-weight: 600;
    background: var(--red-pale);
    padding: var(--space-xxxxs);
    border-radius: var(--radius-xs);
    margin: 0 auto;
    width: 210px;
}

.logo__stats-highlight-text {
    font-size: var(--text-sm);
    color: var(--black);
    margin-bottom: -4px;
    display: block;
}

.logo__stats-highlight-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.logo__stats-highlight-number {
    font-size: var(--text-xxl);
    color: var(--text-default-brand);
}

.logo__stats-highlight-percent {
    font-size: var(--text-sm);
    color: var(--text-default-brand);
}

.logo__stats-highlight-desc {
    font-size: var(--text-sm);
    color: var(--black);
}

.client__clients {
    overflow: hidden;
    width: 100%;
}

.client__clients-scroll {
    display: flex;
    animation: clientScrollLeft var(--animation-duration) linear infinite;
    width: max-content;
    gap: 40px;
}

/* 無限ループ：2枚のリストのうち1枚分（50%）ずつ移動 */
@keyframes clientScrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        /* -50%にして、複製されたコンテンツ分のスクロールを実現 */
        transform: translateX(-50%);
    }
}

.client__clients-list {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
}

.client__clients-list img {
    height: var(--logo-clients-height);
    width: auto;
    transition: all var(--transition-fast);
}

/* Media Queries for Logo Section */
@media (min-width: 1200px) {
    .logo {
        padding: var(--space-lg) 0;
    }

    .logo__stats {
        margin-bottom: var(--space-md);
    }

    .logo__stats-item img {
        width: 40px;
        height: 24px;
    }

    .logo__stats-label {
        font-size: var(--text-xl);
    }

    .logo__stats-number {
        font-size: var(--text-xxxxl);
        font-weight: 600;
    }

    .logo__stats-unit {
        font-size: var(--text-xl);
        color: var(--black);
    }

    .logo__stats-highlight {
        display: flex;
        align-items: baseline;
        background: var(--red-pale);
        padding: var(--space-xxxxs);
        border-radius: var(--radius-xs);
        margin: 0 auto;
        width: 515px;
    }

    .logo__stats-highlight-text {
        font-size: var(--text-xl);
    }

    .logo__stats-highlight-number {
        font-size: var(--text-xxl);
    }

    .logo__stats-highlight-percent {
        font-size: var(--text-xl);
    }

    .logo__stats-highlight-desc {
        font-size: var(--text-xl);
    }
}


/* ========================================
   Feature（コンセプト）セクション
   ======================================== */

/* Featureセクション全体 */
.feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: var(--space-lg);
    width: 100%;
    padding: var(--space-xxxxxl) var(--space-md) 0 var(--space-md);
    background-color: var(--color-secondary-white);
    position: relative;
    overflow: hidden;
}

.feature::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -25%;
    width: 100%;
    height: 100%;
    background-image: url('../images/feature_backimage.png');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 1;
}

/* Featureコンテナ */
.feature__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 48px;
    width: 100%;
    max-width: 944px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* タイトルエリア */
.feature__title {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 16px;
    width: 100%;
}

/* タイトル行 */
.feature__title-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    align-self: stretch;
    width: 100%;
    flex-wrap: wrap;
}

/* タイトルテキスト */
.feature__title-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--text-xxl);
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: #191919;
    text-align: left;
}

/* Speedaの色（feature__title-text 内） */
.feature__title-brand {
    color: var(--color-bx-semantic-text-default-brand, #E6103D);
}

/* AI Agent部分のグラデーション */
.feature__title-highlight {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.5em;
    letter-spacing: 0.02em;
    background: linear-gradient(115deg, rgba(247, 42, 72, 1) 1%, rgba(244, 42, 75, 1) 8%, rgba(237, 42, 85, 1) 14%, rgba(224, 42, 102, 1) 21%, rgba(206, 42, 125, 1) 29%, rgba(183, 43, 156, 1) 38%, rgba(155, 44, 193, 1) 45%, rgba(124, 45, 235, 1) 53%, rgba(57, 88, 225, 1) 74%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
}

/* メインタイトル */
.feature__heading {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: var(--text-xxxxl);
    line-height: 1.5em;
    letter-spacing: 0.02em;
    color: #191919;
    text-align: left;
    margin: 0;
}

/* デバイス幅に関係なく常に改行を表示 */
.feature__heading br {
    display: inline;
}

/* メインタイトルハイライト */
.feature__heading-highlight {
    color: var(--color-primary-brand);
}

h2.feature__heading .feature__heading-highlight {
    color: var(--color-text-brand);
}

/* サブタイトル（調べる速さと、考える深さ。） */
.feature__description-text .feature__heading-subtitle {
    color: var(--color-primary-brand);
}

/* CTAエリア見出しハイライト */
.cta-area__heading-highlight {
    color: var(--color-secondary-white);
}

/* コンテンツエリア */
.feature__content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-lg);
    width: 100%;
}

/* 説明エリア */
.feature__description {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
}

/* 説明文の内側エリア */
.feature__description-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

/* 説明文テキスト */
.feature__description-text {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.8em;
    letter-spacing: 0.02em;
    color: #363636;
    text-align: left;
    margin: 0;
}

/* 最後の説明文テキスト（調べる速さと、考える深さ。） */
.feature__description-text:last-child {
    line-height: 1.5em;
}

/* ビジュアル要素（図解） */
.feature__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 342px;
    height: 342px;
    margin: 0 auto;
}

.feature__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* PC表示時の調整 */
@media (min-width: 1200px) {
    .feature {
        padding: var(--space-xxxxxxl) var(--space-md) 0 var(--space-md);
    }

    .features {
        padding: var(--space-xxxxxxl) var(--space-lg);
    }

    .feature__container {
        gap: 48px;
    }

    /* PC表示時：テキスト群と動画を横並びに */
    .feature__content {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }

    .feature__description {
        flex: 1;
        gap: 48px;
        max-width: 436px;
    }

    .feature__description-inner {
        gap: 24px;
    }

    .feature__visual {
        width: 460px;
        height: 460px;
        max-width: none;
        margin: 0;
        flex-shrink: 0;
    }
}

/* 1200px~1365px：画面幅が小さくなる場合の挙動 */
@media (min-width: 1200px) {

    /* 図解：アスペクト比を変えずに拡大縮小、min-width: 326px */
    .feature__visual {
        flex: 1 1 0;
        min-width: 326px;
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0;
    }

    .feature__visual img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
}

/* モバイル表示時の調整 */
@media (max-width: 1200px) {

    .feature__title-text,
    .feature__title-highlight {
        font-size: var(--text-md);
    }

    .feature__heading {
        font-size: var(--text-xxl);
    }

    .feature__description-text {
        font-size: var(--text-sm);
        line-height: var(--line-height-default);
    }
}

/* ========================================
   Tool（機能紹介）セクション
   ======================================== */

/* モバイルファースト（SP） */
.tool {
    background: linear-gradient(151deg, rgba(238, 241, 240, 1) 7%, rgba(234, 238, 237, 1) 30%, rgba(223, 230, 231, 1) 50%, rgba(205, 216, 219, 1) 70%, rgba(192, 206, 211, 1) 81%);
    padding: var(--space-xxl) var(--space-xs);
    width: 100%;
}

.tool__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-md);
    width: 100%;
    max-width: 944px;
    margin: 0 auto;
}

.tool__heading {
    font-family: var(--font-family);
    font-size: var(--text_xxl, 24px);
    font-weight: var(--font-weight);
    color: var(--color-text-black);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
    text-align: center;
    margin: 0;
}

@media (min-width: 1200px) {
    .tool__heading {
        font-size: var(--text_xxxl, 32px);
        white-space: nowrap;
    }

    .tool__heading br {
        display: none;
    }
}

.tool__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-sm);
    width: 100%;
}

/* タブ切り替え */
.tool__tabs {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    padding: 6px;
    background-color: var(--color-secondary-white);
    border-radius: var(--radius-full);
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tool__tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-xxxs) 0;
    flex: 1;
    background-color: transparent;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-weight);
    color: var(--color-neutral-gentle);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tool__tab--active {
    background-color: var(--color-red-pale);
    color: var(--color-primary-brand);
}

.tool__tab:hover:not(.tool__tab--active) {
    background-color: var(--color-neutral-pale);
}

.tool__tab:focus {
    transition: all 0.3s ease;
}

/* カードコンテナ：tool__cards を中央配置、余り1枚は左揃え */
.tool__cards-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.tool__cards-container[hidden] {
    display: none;
}

.tool__cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-self: stretch;
    gap: var(--space-xxxs);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* カード */
.tool__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxxs);
    padding: var(--space-xs) var(--space-xxs);
    width: calc(50% - 4px);
    max-width: 300px;
    height: auto;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.9) 24%, rgba(255, 255, 255, 0.75) 100%);
    border-radius: var(--radius-md);
    backdrop-filter: var(--effect-glass);
    box-shadow: 0px 0px 12px 0px rgba(223, 223, 223, 1);
    flex-shrink: 0;
    box-sizing: border-box;
}

.tool__card-image {
    width: 100%;
    aspect-ratio: 143 / 80;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
    background-color: var(--color-neutral-pale);
    box-shadow: 0 0 12px 0 var(--color-bx-semantic-spectrum-neutral-bright, #DFDFDF);
    over-flow: hidden;
    background: #fff;
}

.tool__card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.tool__card-content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
}

.tool__card-label {
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-weight);
    color: var(--color-primary-core);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
}

/* Speeda AI Agentラベル：ピンク〜紫の横グラデーション */
.tool__card-label--agent {
    background: linear-gradient(90deg, #EC447E, #8549CB);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.tool__card-title {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-weight);
    color: var(--color-text-black);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
    margin: 0;
}

.tool__card-description {
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-weight);
    color: var(--color-neutral-regular);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
    margin: 0;
    text-align: left;
    align-self: stretch;
    width: 100%;
}

.tool__card-note {
    font-family: var(--font-family);
    font-size: var(--text-xxs);
    font-weight: var(--font-weight);
    color: var(--color-neutral-soft);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-default);
    margin: 0;
    margin-top: var(--space-xxxxs);
}

@media (min-width: 1200px) {
    .tool {
        padding: var(--space-xxxxxxl) var(--space-lg);
    }
}

@media (min-width: 1200px) {
    .tool {
        padding: var(--space-xxxxxxl) var(--space-lg);
    }

    .tool__container {
        gap: var(--space-lg);
    }

    .tool__tabs {
        font-size: var(--text_xl, 20px);
    }

    .tool__tab,
    .tool__tab--active {
        white-space: nowrap;
        font-size: var(--text-xl, 20px);
    }

    .tool__tab br {
        display: none;
    }

    .tool__content {
        gap: var(--space-sm);
    }

    .tool__cards {
        gap: var(--space-xxxs);
        padding: var(--space-xxxs);
    }

    .tool__card-image {
        aspect-ratio: 13 / 4;
    }

    /* PC表示時：説明文を左揃えに */
    .tool__card-description {
        text-align: left;
    }
}

/* ========================================
   Dataassets（データアセット）セクション
   ======================================== */

/* セクション全体 */
.dataassets {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-md);
    padding: var(--space_xxl, 48px) var(--space_md, 24px);
    background-color: var(--color-neutral-regular);
    position: relative;
    overflow: hidden;
}

.dataassets__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-md);
    position: relative;
    z-index: 1;
}

/* 見出し */
.dataassets__heading {
    font-family: var(--font-family);
    font-size: var(--text_xxl, 24px);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-secondary-white);
    text-align: center;
    margin: 0;
}

@media (min-width: 1200px) {
    .dataassets__heading {
        font-size: var(--text_xxxl, 32px);
        white-space: nowrap;
    }

    .dataassets__heading br {
        display: none;
    }

    .dataassets__card-title {
        white-space: nowrap;
    }

    .dataassets__card-title br {
        display: none;
    }
}

/* 背景画像 */
.dataassets__background {
    position: absolute;
    bottom: -30%;
    right: calc(50% - 200px);
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    max-width: 1000px;
}

.dataassets__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* コンテンツコンテナ */
.dataassets__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-xxxs);
    box-shadow: 0px 0px 12px 0px rgba(155, 155, 155, 0.2);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* カード */
.dataassets__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
    background-color: var(--color-secondary-white);
    border-radius: var(--radius-md);
}

/* カードヘッダー */
.dataassets__card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xxxs);
}

/* カードアイコン */
.dataassets__card-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.dataassets__card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* カードタイトル */
.dataassets__card-title {
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-black);
    text-align: left;
    margin: 0;
}

.dataassets__card-title--dark {
    color: var(--color-neutral-regular);
}

/* 区切り線 */
.dataassets__card-divider {
    width: 100%;
    height: 0;
    border-top: var(--stroke-weight-2) solid var(--color-neutral-light);
}

/* 統計情報 */
.dataassets__card-stats {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 2px;
}

/* 数値 */
.dataassets__card-number {
    font-family: var(--font-family);
    font-size: var(--text-xxxxxl);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-brand);
}

/* 単位 */
.dataassets__card-unit {
    font-family: var(--font-family);
    font-size: var(--text-xxl);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-black);
}

/* カード3の詳細情報 */
.dataassets__card-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxxs);
    width: 100%;
}

.dataassets__card-detail-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dataassets__card-detail-label {
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-black);
    margin: 0;
}

.dataassets__card-detail-stats {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 2px;
}

.dataassets__card-detail-number {
    font-size: var(--text-xxxxxl);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-brand);
}

.dataassets__card-detail-unit {
    font-family: var(--font-family);
    font-size: var(--text-xxl);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-black);
}

/* バッジ */
.dataassets__card-badge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xxxxs) var(--space-xs);
    background-color: var(--color-primary-core);
    border-radius: var(--radius-xs);
    align-self: flex-start;
    width: fit-content;
    height: fit-content;
}

/* ::before デフォルト：縦並び用（左側の三角） */
.dataassets__card-badge::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.dataassets__card-badge-content {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.dataassets__card-badge-number {
    font-family: var(--font-family);
    font-size: var(--text-xxl);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-secondary-white);
}

.dataassets__card-badge-text {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-secondary-white);
}

/* カード画像 */
.dataassets__card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dataassets__card-image img {
    width: 126px;
    max-width: 126px;
    height: auto;
    object-fit: contain;
}

.dataassets__card-badge.dataassets__card-image {
    background: none;
    padding: 0;
    border-radius: 0;
    width: auto;
    align-self: auto;
}

.dataassets__card-badge.dataassets__card-image::before {
    display: none;
}

.dataassets__card-badge.dataassets__card-image img {
    width: auto;
    max-width: 240px;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (min-width: 1200px) {
    .dataassets {
        padding: var(--space_xxxl, 56px) var(--space_xl, 40px) var(--space_xxxxxxl, 96px) var(--space_xl, 40px);
    }

    /* Speech Bubbles_pc.png：固定幅 382px */
    .dataassets__card-badge.dataassets__card-image img {
        width: 382px;
        max-width: 382px;
    }

    /* バッジ 横並び */
    .dataassets__card-badge {
        flex-direction: row;
        gap: var(--space-xxxs);
    }

    /* ::before 1200px以上：横並び用（右側の三角・イラスト側を指す） */
    .dataassets__card-badge::before {
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 15px solid var(--color-primary-core);
    }
}

/* 1200px~1365pxの範囲での調整 */
@media (min-width: 1200px) and (max-width: 1365px) {
    .dataassets {
        padding: var(--space_xxxl, 56px) var(--space_xl, 40px) var(--space_xxxxxxl, 96px) var(--space_xl, 40px);
    }

    .dataassets__container {
        gap: var(--space-md);
        max-width: 1200px;
    }

    .dataassets__content {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-xxxs);
        align-items: stretch;
    }

    /* 上段: カード1とカード2を横並び */
    .dataassets__card:nth-child(1),
    .dataassets__card:nth-child(2) {
        width: calc((100% - var(--space-xxxs)) / 2);
        flex: 0 0 calc((100% - var(--space-xxxs)) / 2);
    }

    /* 下段: カード3を全幅 */
    .dataassets__card:nth-child(3) {
        width: 100%;
        flex: 0 0 100%;
    }

    /* カード3の詳細部分を横並びに・左右中央揃え */
    .dataassets__card:nth-child(3) .dataassets__card-details {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-md);
    }

    .dataassets__card:nth-child(3) .dataassets__card-detail-item {
        flex: 0 0 auto;
    }

    /* バッジとイラストを横並びにするコンテナ */
    .dataassets__card:nth-child(3) .dataassets__card-badge,
    .dataassets__card:nth-child(3) .dataassets__card-image {
        display: flex;
        align-items: center;
    }

    .dataassets__card:nth-child(3) .dataassets__card-badge {
        flex-shrink: 0;
        margin-right: var(--space-xs);
    }

    .dataassets__card:nth-child(3) .dataassets__card-image {
        flex-shrink: 0;
        width: auto;
    }
}

/* 1365px以上のPC表示時：2列+1列レイアウト */
@media (min-width: 1366px) {
    .dataassets {
        padding: var(--space_xxxl, 56px) var(--space_xl, 40px) var(--space_xxxxxxl, 96px) var(--space_xl, 40px);
    }

    .dataassets__container {
        gap: var(--space-md);
        max-width: 1200px;
        margin: 0 auto;
    }

    .dataassets__content {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-xxxs);
        align-items: stretch;
    }

    /* 上段: カード1とカード2を横並び */
    .dataassets__card:nth-child(1),
    .dataassets__card:nth-child(2) {
        width: calc((100% - var(--space-xxxs)) / 2);
        flex: 0 0 calc((100% - var(--space-xxxs)) / 2);
    }

    /* 下段: カード3を全幅 */
    .dataassets__card:nth-child(3) {
        width: 100%;
        flex: 0 0 100%;
    }

    /* カード3の詳細部分を横並びに・左右中央揃え */
    .dataassets__card:nth-child(3) .dataassets__card-details {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-md);
    }

    .dataassets__card:nth-child(3) .dataassets__card-detail-item {
        flex: 0 0 auto;
    }

    /* バッジとイラストを横並びにするコンテナ */
    .dataassets__card:nth-child(3) .dataassets__card-badge,
    .dataassets__card:nth-child(3) .dataassets__card-image {
        display: flex;
        align-items: center;
    }

    .dataassets__card:nth-child(3) .dataassets__card-badge {
        flex-shrink: 0;
        margin-right: var(--space-xs);
    }

    .dataassets__card:nth-child(3) .dataassets__card-image {
        flex-shrink: 0;
        width: auto;
    }
}

/* ========================================
   Case（導入事例）セクション
   ======================================== */

/* セクション全体 */
.case {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-md);
    padding: var(--space_xxl, 48px) 0 var(--space-xxxxl, 64px) 0;
    background-color: var(--color-neutral-pale);
}

.case__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-md);
}

/* 見出し */
.case__heading {
    font-family: var(--font-family);
    font-size: var(--text_xxl, 24px);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-black);
    text-align: center;
    margin: 0;
}

@media (min-width: 1200px) {
    .case__heading {
        font-size: var(--text_xxxl, 32px);
    }
}

.case__heading-highlight {
    color: var(--color-primary-core);
}

/* =======================================================
   Swiper/Slider Component（industry-research と同構造）
   ======================================================= */
.swiper__container {
    position: relative;
    margin-bottom: var(--space-md);
    width: 100%;
}

/* 左右ナビボタン（Swiperの上下中央に配置・button_left/right.svg） */
.swiper__container .swiper-button-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast);
}

.swiper__container .swiper-button-nav::after {
    display: none;
}

.swiper__container .swiper-button-prev.swiper-button-nav {
    left: 16px;
}

.swiper__container .swiper-button-next.swiper-button-nav {
    right: 16px;
    left: auto;
}

.swiper__container .swiper-button-nav:hover {
    opacity: 0.85;
}

.swiper__container .swiper-button-nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.swiper__container .swiper-button-nav img {
    display: block;
    width: 52px;
    height: 52px;
}

.swiper-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.swiper-slide {
    width: auto;
    height: auto;
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
}

.swiper-slide .case__card {
    width: calc(100vw - 80px);
    min-width: 310px;
    max-width: 400px;
    height: 100%;
    min-height: 100%;
    flex: 1;
}

/* カード（高さは内容に応じて内包） */
.case__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
    width: 310px;
    min-width: 310px;
    height: fit-content;
    background-color: var(--color-secondary-white);
    border-radius: var(--radius-md);
    box-shadow: 0px 0px 8px 0px rgba(223, 223, 223, 1);
    flex-shrink: 0;
    scroll-snap-align: center;
    box-sizing: border-box;
}

/* カードヘッダー */
.case__card-header {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    padding: 0 0 var(--space-xxxs);
}

/* カードタイトル */
.case__card-title {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-brand);
    text-align: left;
    margin-bottom: var(--space_md, 24px);
    height: 3em;
    overflow: hidden;
    display: -webkit-box;
}

/* タイトル改行：PC（1200px以上）のみ br-pc で表示、SPは改行なし */
.case__title-br-pc {
    display: none;
}

@media (max-width: 1199px) {
    .case__card-title {
        height: 90px;
        overflow: hidden;
        display: block;
    }
}

@media (min-width: 1200px) {
    .case__title-br-pc {
        display: block;
    }
}

/* カードメタ情報 */
.case__card-meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
    gap: var(--space-xxs);
}

/* カテゴリバッジ */
.case__card-badge {
    display: inline-flex;
    flex-direction: row;
    padding: 4px 6px;
    background-color: var(--color-secondary-white);
    border: var(--stroke-weight-1) solid var(--color-neutral-regular);
    border-radius: var(--radius-xs);
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-regular);
}

/* 会社ロゴ */
.case__card-logo {
    width: 100px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.case__card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 会社名 */
.case__card-company {
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-black);
    margin: 0;
}

/* 区切り線 */
.case__card-divider {
    width: 100%;
    height: 0;
    border-top: var(--stroke-weight-2) solid var(--color-neutral-light);
}

/* セクション（課題・解決） */
.case__card-section {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xxxs);
    padding: 0;
}

.case__card-section--challenge {
    background-color: var(--color-neutral-bright);
    border-radius: var(--radius-xs);
    padding-bottom: var(--space-xs);
}

.case__card-section--solution {
    background-color: var(--color-red-pale);
    border-radius: var(--radius-xs);
    padding-bottom: var(--space-xs);
}

/* セクションヘッダー */
.case__card-section-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-xxxs);
    padding: 4px 8px;
    width: fit-content;
}

.case__card-section--challenge .case__card-section-header {
    background-color: var(--color-neutral-soft);
    border-radius: 4px 0px 4px 0px;
}

.case__card-section--solution .case__card-section-header {
    background-color: var(--color-primary-core);
    border-radius: 4px 0px 4px 0px;
    padding: 4px 8px 4px 6px;
}

.case__card-section-icon {
    width: 18px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}

.case__card-section-icon--solution {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* セクションタイトル */
.case__card-section-title {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-secondary-white);
    margin: 0;
}

/* セクションコンテンツ */
.case__card-section-content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xxxs);
    padding: 0 var(--space-xxs) var(--space-xxs) var(--space-xxs);
}

/* セクションアイテム */
.case__card-section-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--space-xxxs);
}

/* 箇条書きアイコン */
.case__card-section-bullet {
    display: block;
    width: 5px;
    height: 5px;
    background-color: var(--color-neutral-regular);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6.5px;
    align-self: flex-start;
}

/* Speedaで解決セクションの丸はピンク */
.case__card-section--solution .case__card-section-bullet {
    background-color: var(--color-primary-core);
}

/* セクションテキスト - speeda_5/text_xs準拠 */
.case__card-section-text {
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-regular);
    margin: 0;
    flex: 1;
}

/* タグコンテナ */
.case__card-section-tags {
    display: flex;
    flex-direction: row;
    align-self: stretch;
    flex-wrap: wrap;
    gap: var(--space-xxxs);
}

/* タグ */
.case__card-section-tag {
    display: inline-flex;
    flex-direction: column;
    padding: 4px 8px;
    background-color: var(--color-secondary-white);
    border: var(--stroke-weight-1) solid var(--color-red-light);
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-brand);
}

@media (min-width: 1200px) {
    .case {
        padding: var(--space_xxxxxl, 80px) 0 var(--space_xxxxxl, 80px) 0;
    }

    .case__container {
        gap: var(--space-md);
        margin: 0 auto;
        width: 100%;
    }

    .case__card-badge {
        font-size: var(--text_xs, 12px);
    }

    .case__card-company {
        font-size: var(--text_xl, 20px);
    }

    .case__card-logo {
        width: 162px;
        height: 48px;
    }

    .case .swiper-slide .case__card {
        width: 430px;
        min-width: 430px;
        padding: var(--space-lg) var(--space-md);
        align-items: flex-start;
        align-self: stretch;
        height: 100%;
        min-height: 100%;
    }
}

/* ========================================
   CTA Area（CTAエリア）セクション
   ======================================== */

/* セクション全体 */
.cta-area {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 4px;
    padding: 0 var(--space-md);
    background-color: var(--color-secondary-neutral-light);
}

.cta-area__container {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

/* セクション内コンテナ */
.cta-area__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    background: var(--color-bx-semantic-spectrum-red-medium, #E6103D);
    border-radius: var(--radius-md);
}

/* 見出し */
.cta-area__heading {
    font-size: var(--text-xl);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-secondary-white);
    text-align: center;
    margin: 0;
}

/* ボタンコンテナ */
.cta-area__buttons {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-xs);
}

/* ボタン */
.cta-area__button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: var(--space-xs) var(--space-xs);
    width: 240px;
    min-width: 240px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: 0.3s;
    backdrop-filter: var(--effect-glass);
}

.cta-area__button:hover {
    opacity: 0.9;
}

.cta-area__button:active {
    transform: translateY(0);
}

/* Primaryボタン（資料ダウンロード） */
.cta-area__button--primary {
    border: var(--stroke-weight-2) solid var(--color-red-bright);
}

/* Secondaryボタン（無料トライアル） */
.cta-area__button--secondary {
    background-color: var(--color-secondary-white);
    border: 2px solid var(--color-bx-semantic-spectrum-red-bright, #FFD5D7);
}

/* ボタンテキスト */
.cta-area__button-text {
    font-family: var(--font-family);
    font-size: var(--text-xl);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
}

.cta-area__button--primary .cta-area__button-text {
    color: var(--color-secondary-white);
}

.cta-area__button--secondary .cta-area__button-text {
    color: var(--color-primary-brand);
}

/* ボタンアイコン */
.cta-area__button-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-area__button-icon svg,
.cta-area__button-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cta-area__button--primary .cta-area__button-icon {
    color: var(--color-secondary-white);
}

.cta-area__button--primary .cta-area__button-icon svg {
    color: var(--color-secondary-white);
}

.cta-area__button--primary .cta-area__button-icon svg path {
    stroke: var(--color-secondary-white);
}

.cta-area__button--secondary .cta-area__button-icon {
    color: var(--color-primary-brand);
}



@media (min-width: 1200px) {
    .cta-area {
        padding: 0 var(--space-lg);
    }

    .cta-area__heading {
        font-size: var(--text_xxl, 24px);
    }

    /* cta-area__buttons：横並び */
    .cta-area__buttons {
        flex-direction: row;
        gap: var(--space-xs);
    }

    /* cta-heading：（意思決定を）（サポート）の改行をなくす */
    .cta-area__heading-oneline br {
        display: none;
    }
}

/* 1200px~1365pxの範囲での調整 */
@media (min-width: 1200px) {
    .cta-area {
        padding: 0 var(--space-lg);
    }

    .cta-area__section {
        padding: var(--space-xxl) var(--space-xl);
    }
}

/* ========================================
   FAQセクション
   ======================================== */
.faq {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xxl) var(--space-md);
    background: linear-gradient(155deg, rgba(255, 255, 255, 1) 0%, rgba(250, 252, 253, 1) 20%, rgba(245, 248, 250, 1) 40%, rgba(240, 245, 248, 1) 60%, rgba(245, 248, 250, 1) 80%, var(--color-bx-semantic-core-secondary-neutral-light, #F5F5F5) 100%);
}

.faq__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 390px;
}

.faq__heading {
    font-family: var(--font-family);
    font-size: var(--text_xxl, 24px);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-black);
    text-align: center;
    margin: 0;
    padding: 4px var(--space-md);
}

@media (min-width: 1200px) {
    .faq__heading {
        font-size: var(--text_xxxl, 32px);
    }
}

/* FAQカードコンテナ */
.faq__card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: var(--space-xxs);
}

/* FAQカード */
.faq__card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-secondary-white);
    border-radius: var(--radius-md);
}

/* Q&A構造 */
.faq__qa {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    gap: 64px;
}

/* 質問部分 */
.faq__question {
    display: flex;
    flex-direction: row;
    gap: var(--space-xxxs);
    flex: 1;
}

/* Qラベル */
.faq__question-label {
    font-family: var(--font-family);
    font-size: var(--text-xxl);
    font-weight: var(--font-weight);
    line-height: 1em;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-primary-brand);
    flex-shrink: 0;
}

/* 質問テキスト */
.faq__question-text {
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-black);
    margin: 0;
    flex: 1;
}

/* 回答部分 */
.faq__answer {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-weight);
    line-height: 1.8;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-regular);
}

/* 回答コンテンツコンテナ */
.faq__answer-content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xxxs);
}

/* 補足テキスト */
.faq__answer-note {
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-neutral-soft);
}

/* FAQ回答内のリンク */
.faq__answer-link,
.faq__answer-note-link {
    color: inherit;
    text-decoration: underline;
    transition: 0.3s;
}

/* 本文リンク hover: text/neutral/soft */
.faq__answer-link:hover {
    color: var(--color-neutral-soft);
}

/* 注釈リンク hover: text/neutral/airy */
.faq__answer-note-link:hover {
    color: var(--color-neutral-airy);
}

@media (max-width: 1199px) {
    .faq__container {
        max-width: 512px;
    }

    .faq__card {
        max-width: 512px;
    }
}

@media (min-width: 1200px) {
    .faq {
        padding: var(--space-xxxxxxl) var(--space-lg);
    }

    .faq__container {
        max-width: 944px;
        gap: var(--space-md);
    }

    .faq__card-container {
        gap: var(--space-xxxs);
    }
}

/* ========================================
   Footer（フッター）セクション
   ======================================== */

/* フッター全体 */
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) 0 var(--space-md);
    background: linear-gradient(155deg, var(--color-bx-semantic-core-secondary-neutral-light, #F5F5F5) 52.39%, #EAEEED 63.45%, #DFE6E7 72.77%, #CDD8DB 81.76%, #C0CED3 86.94%);
    width: 100%;
}

.footer__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 390px;
}

/* フッターコンテンツ - Figma layout_4B4SPQ準拠 */
.footer__content {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-lg);
    padding: 0 var(--space-md);
}

/* メインコンテンツ */
.footer__main {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xl);
}

/* ロゴ＋ナビゲーション */
.footer__logo-nav {
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-md);
}

/* ロゴ */
.footer__logo {
    flex-direction: column;
    gap: 0.51px;
    padding: 13.31px 0;
}

.footer__logo img {
    height: 53.37px;
    width: auto;
    object-fit: contain;
}

/* ナビゲーション */
.footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ナビゲーションリンク */
.footer__nav-link {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-text-black);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer__nav-link:hover {
    opacity: 0.7;
}

/* サブナビゲーション */
.footer__sub-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxxs);
}

/* サブナビゲーションリンク */
.footer__sub-nav-link {
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-neutral-soft);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer__sub-nav-link:hover {
    opacity: 0.7;
}

/* コピーライト */
.footer__copyright {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.footer__copyright-text {
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-neutral-airy);
    text-align: center;
    margin: 0;
}

@media (min-width: 1200px) {
    .footer {
        padding: var(--space-xxxl) var(--space-lg) var(--space-md);
    }

    .footer__container {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    .footer__content {
        gap: var(--space-xl);
    }

    /* メインコンテンツを横並びに */
    .footer__main {
        flex-direction: column;
        gap: var(--space-xl);
    }

    /* ロゴとナビゲーションを横並びに */
    .footer__logo-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-md);
    }

    /* ナビゲーションを横並びに */
    .footer__nav {
        flex-direction: row;
        gap: var(--space-md);
    }

    .footer__nav-link {
        color: var(--color-neutral-regular);
    }

    /* サブナビゲーションを中央揃えで横並びに */
    .footer__sub-nav {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--space-xs);
        flex-wrap: wrap;
    }

    .footer__sub-nav-link {
        color: var(--color-neutral-soft);
    }

    /* サブナビゲーションリンクの間に縦棒を追加 */
    .footer__sub-nav-link:not(:last-child)::after {
        content: '|';
        margin-left: var(--space-xs);
        color: var(--color-neutral-soft);
    }

    .footer__copyright-text {
        color: var(--color-neutral-soft);
    }
}

/* 1200px~1365pxの範囲での調整 */
@media (min-width: 1200px) {
    .footer {
        padding: var(--space-xxxl) var(--space-lg) var(--space-md);
    }

    .footer__container {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }

    .footer__content {
        gap: var(--space-xl);
        padding: 0;
    }

    .footer__main {
        flex-direction: column;
        gap: var(--space-xl);
    }

    /* ロゴとナビゲーションを横並びに */
    .footer__logo-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-md);
    }

    /* ナビゲーションを横並びに */
    .footer__nav {
        flex-direction: row;
        gap: var(--space-md);
    }

    .footer__nav-link {
        color: var(--color-neutral-regular);
    }

    /* サブナビゲーションを中央揃えで横並びに */
    .footer__sub-nav {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--space-xs);
        flex-wrap: wrap;
    }

    .footer__sub-nav-link {
        color: var(--color-neutral-soft);
    }

    /* サブナビゲーションリンクの間に縦棒を追加 */
    .footer__sub-nav-link:not(:last-child)::after {
        content: '|';
        margin-left: var(--space-xs);
        color: var(--color-neutral-soft);
    }

    .footer__copyright-text {
        color: var(--color-neutral-soft);
    }
}

/* ========================================
   レスポンシブ
   ======================================== */

@media (min-width: 1200px) {
    .sp-view {
        display: none !important;
    }

    .pc-view {
        display: block !important;
    }
}

/* ========================================
   追従ボタン（PCサイズ以外で表示）
   ======================================== */
.floating-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-secondary-white);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.floating-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.floating-cta__buttons {
    display: flex;
    flex-direction: row;
    gap: var(--space-xxxs);
    max-width: 100%;
    width: 100%;
}

.floating-cta__button {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.2s ease;
    min-width: 0;
    width: calc((100% - var(--space-xxxs)) / 2);
}

.floating-cta__button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.floating-cta__button:active {
    transform: translateY(0);
}

/* Secondaryボタン（資料ダウンロード） */
.floating-cta__button--secondary {
    background-color: var(--color-secondary-white);
    border: var(--stroke-weight-2) solid var(--color-red-bright);
}

.floating-cta__button--secondary .floating-cta__button-text {
    color: var(--color-primary-brand);
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    white-space: nowrap;
}

/* Primaryボタン（無料トライアル） */
.floating-cta__button--primary {
    background-color: var(--color-primary-core);
    border: var(--stroke-weight-2) solid var(--color-primary-core);
}

.floating-cta__button--primary .floating-cta__button-text {
    color: var(--color-secondary-white);
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--font-weight);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    white-space: nowrap;
}

/* 767px以下で表示可能にする（is-visibleクラスで実際の表示を制御） */
@media (max-width: 767px) {
    .floating-cta {
        display: block;
    }
}