/*
Theme Name: hakoa Child
Theme URI: https://example.com/
Description: Arkhe（アルケー）の子テーマです。カスタマイズ用に作成しました。
Author: STUDIO Tachimachi
Author URI: 
Template: arkhe
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hakoa-child
*/

/* ===================================
   ここから下に独自のCSSを追加できます
   =================================== */

/* PCのみ改行（スマホでは無効化） */
.pc-only {
    display: block;
}
@media (max-width: 768px) {
    .pc-only { display: none; }
}

/* スマホのみ改行（PCでは無効化） */
.sp-only {
    display: none;
}
@media (max-width: 768px) {
    .sp-only { display: block; }
}

/* =========================================
   合同会社ハコア - カスタムデザイン (Child Theme)
   ========================================= */

/* --- 1. 変数定義（ここで色を一括管理） --- */
:root {
    /* ベースカラー */
    --hakoa-bg-body: #ffffff;
    --hakoa-bg-light: #f9fbfd; /* 薄いグレー */
    
    /* テキストカラー */
    --hakoa-text-main: #333333;
    
    /* アクセントカラー */
    --hakoa-green: #00d4a3;
    --hakoa-blue: #0066ff;
    --hakoa-gradient: linear-gradient(135deg, #0066ff 0%, #00d4a3 100%);
}

/* --- 2. 共通設定 --- */
.custom-section-wrapper {
    width: 100%;
    overflow: hidden; /* 横スクロール防止 */
}

.custom-section-wrapper h2, 
.custom-section-wrapper h3, 
.custom-section-wrapper p {
    margin: 0;
    line-height: 1.8;
    color: var(--hakoa-text-main);
}

.custom-section-wrapper a {
    text-decoration: none;
    transition: opacity 0.3s, transform 0.3s;
}
.custom-section-wrapper a:hover {
    opacity: 0.8;
}

.custom-section-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* コンテナ（Arkheの幅に依存せずレイアウトするため） */
.custom-container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

/* --- 3. アニメーション (Fade Up) --- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 4. ボタンデザイン --- */
/* グラデーションボタン */
.btn-gradient {
    display: inline-block;
    padding: 14px 45px;
    background: var(--hakoa-gradient);
    color: #fff !important;
    font-weight: 700;
    border-radius: 50px;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 212, 163, 0.3);
    border: none;
    text-align: center;
    cursor: pointer;
}
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 163, 0.4);
    opacity: 1;
}

/* アウトラインボタン */
.btn-outline {
    display: inline-block;
    padding: 12px 35px;
    border: 2px solid var(--hakoa-text-main);
    color: var(--hakoa-text-main);
    font-weight: 700;
    border-radius: 50px;
    font-size: 0.9rem;
    background: transparent;
    text-align: center;
}
.btn-outline:hover {
    background-color: var(--hakoa-text-main);
    color: #fff;
}

/* =========================================
   ヘッダーお問い合わせボタン（ぶら下がりリボン風）
   ========================================= */

/* 既存のスタイルを打ち消して再定義 */
.nav-btn-contact {
    /* メニュー項目自体の整列位置調整 */
    align-self: flex-start !important; 
    height: 100%;
}

.nav-btn-contact a {
    background: var(--hakoa-gradient) !important;
    color: #fff !important;
    
    /* 【重要】形状の指定：上は直角、下は角丸 (左上, 右上, 右下, 左下) */
    border-radius: 0 0 15px 15px !important;
    
    /* 余白調整：上を長くしてぶら下がり感を出す */
    padding: 25px 30px 15px !important;
    
    /* 位置調整：ヘッダーの余白分だけ上に引っ張り上げる */
    /* ※Arkheのヘッダー仕様に合わせて数値を微調整してください */
    margin-top: -10px !important; 
    
    font-weight: 800;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    box-shadow: 0 10px 20px rgba(0, 212, 163, 0.3); /* 影で浮遊感を出す */
    transition: transform 0.3s, padding 0.3s;
    
    /* インラインブロックで形状を維持 */
    display: inline-block;
}

/* ホバー時の動き：少しだけ下に伸びる演出 */
.nav-btn-contact a:hover {
    padding-top: 35px !important; /* ググッと下に伸びる */
    opacity: 1 !important;
}

/* --- スマホメニュー内ではリセット（ぶら下がると変になるため） --- */
@media (max-width: 1000px) {
    .nav-btn-contact {
        align-self: auto !important;
        margin: 20px auto 0;
    }
    .nav-btn-contact a {
        background: var(--hakoa-gradient) !important;
        border-radius: 50px !important; /* スマホでは普通の丸ボタンに戻す */
        margin-top: 0 !important;
        padding: 12px 30px !important;
    }
    .nav-btn-contact a:hover {
        padding-top: 12px !important;
    }
}

/* --- 6. 各セクションのスタイル --- */

/* MISSION */
.section-mission { padding: 100px 0; text-align: center; }
.mission-eyebrow { font-size: 1rem; letter-spacing: 0.2em; color: var(--hakoa-text-main); margin-bottom: 25px; display: block; font-weight: 700; opacity: 0.6; }
.mission-title { font-size: clamp(1.8rem, 4vw, 3rem); font-family: serif; font-weight: 800; margin-bottom: 50px; line-height: 1.5; }
.mission-body { max-width: 800px; margin: 0 auto 50px; font-size: 1.1rem; line-height: 2.2; text-align: center; }
.mission-highlight { background: linear-gradient(transparent 60%, #c6f6ff 60%); font-weight: 700; padding: 0 5px; }

/* WORK */
.section-work { padding: 100px 0; }
.section-head { text-align: center; margin-bottom: 60px; }
.section-head h2 { font-size: 2.5rem; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 10px; color: var(--hakoa-text-main); }
.section-head p { font-size: 1.1rem; font-weight: 700; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.work-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s; }
.work-card:hover { transform: translateY(-7px); }
.work-img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s; display: block; }
.work-card:hover .work-img { transform: scale(1.05); }
.work-content { padding: 30px; }
.work-title { font-size: 1.4rem; font-weight: 700; border-left: 5px solid var(--hakoa-green); padding-left: 15px; margin-bottom: 15px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.work-tag { font-size: 0.8rem; padding: 5px 12px; background: #f0f4f8; border-radius: 20px; font-weight: 500; }

/* TARGET (企業・大学・学生) */
.section-target { padding: 100px 0; }
.target-wrapper { display: flex; align-items: center; gap: 60px; }
.target-wrapper.reverse { flex-direction: row-reverse; } /* 左右反転用 */
.target-text { flex: 1; }
.target-label { font-size: 1rem; font-weight: 700; color: var(--hakoa-green); margin-bottom: 15px; display: flex; align-items: center; letter-spacing: 0.1em; }
.target-label::before { content: ''; display: inline-block; width: 20px; height: 3px; background: var(--hakoa-gradient); margin-right: 10px; }
.target-heading { font-size: 2rem; font-weight: 800; margin-bottom: 25px; line-height: 1.4; }
.target-desc { font-size: 1rem; margin-bottom: 30px; }
.target-image-box { flex: 1; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.target-image-box::after { content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 3px; background: var(--hakoa-gradient); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.target-img { width: 100%; height: auto; transition: transform 0.5s; display: block; }
.target-image-box:hover .target-img { transform: scale(1.03); }

/* CTA */
.section-cta { padding: 100px 0; background: linear-gradient(to bottom, var(--hakoa-bg-light) 0%, #ffffff 100%); text-align: center; }
.cta-box { max-width: 800px; margin: 0 auto; background: #fff; padding: 60px; border-radius: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05); border: 1px solid #f0f0f0; }
.cta-heading { font-size: 2.2rem; font-weight: 800; margin-bottom: 25px; line-height: 1.4; }
.cta-text { font-size: 1.1rem; margin-bottom: 40px; }

/* --- 7. レスポンシブ調整 --- */
@media (max-width: 900px) {
    .target-wrapper, .target-wrapper.reverse { flex-direction: column; gap: 40px; }
    .target-image-box { width: 100%; max-width: 600px; margin: 0 auto; }
}

@media (max-width: 1024px) {
    /* スマホメニュー内でボタンデザインをリセット */
    .nav-btn-contact a {
        background: transparent !important;
        color: inherit !important;
        box-shadow: none !important;
        padding: inherit !important;
        margin: 0;
    }
}

@media (max-width: 768px) {
    .section-mission, .section-work, .section-target, .section-cta { padding: 60px 0; }
    .pc-only { display: none; }
    .work-grid { grid-template-columns: 1fr; }
    .cta-box { padding: 40px 20px; }
    .cta-heading { font-size: 1.8rem; }
    .btn-gradient, .btn-outline { width: 100%; box-sizing: border-box; }
}

/* =========================================
   お問い合わせフォーム (Hakoa Brand Design)
   ========================================= */

/* --- コンテナ --- */
.rich-cf7-container {
    max-width: 720px;
    margin: 0 auto;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--hakoa-text-main); /* ネイビー */
}

/* --- 各入力グループ --- */
.rich-cf7-group {
    margin-bottom: 32px;
}

/* --- ラベル --- */
.rich-cf7-label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
    color: var(--hakoa-text-main);
}

/* --- 必須・任意バッジ --- */
.rich-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 3px 10px;
    margin-left: 10px;
    vertical-align: middle;
    border-radius: 4px; /* 少し角丸 */
    line-height: 1.4;
    font-weight: 700;
}

/* 必須：グラデーションで強調 */
.rich-badge.required {
    background: var(--hakoa-gradient);
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 212, 163, 0.2);
}

/* 任意：薄いグレー */
.rich-badge.optional {
    background-color: #f0f4f8;
    color: #888;
    border: 1px solid #dae1e7;
}

/* --- 入力フィールド共通設定 --- */
.rich-cf7-input {
    width: 100%;
    padding: 18px;
    font-size: 1rem;
    background-color: #f9fbfd; /* サイト共通の薄いブルーグレー */
    border: 1px solid #dae1e7; /* 薄い枠線 */
    border-radius: 12px; /* カードと同じ角丸 */
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
    color: #333;
}

/* フォーカス時のリッチな挙動 */
.rich-cf7-input:focus {
    background-color: #fff;
    border-color: var(--hakoa-blue); /* 青枠 */
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.1); /* ふわっと光る */
}

/* テキストエリア */
textarea.rich-cf7-input {
    min-height: 200px;
    resize: vertical;
    line-height: 1.8;
}

/* --- プライバシーポリシー --- */
.rich-cf7-privacy {
    text-align: center;
    margin: 50px 0 40px;
    font-size: 0.95rem;
}

.rich-cf7-privacy a {
    color: var(--hakoa-blue);
    text-decoration: underline;
    font-weight: 700;
    transition: opacity 0.3s;
}
.rich-cf7-privacy a:hover {
    opacity: 0.7;
}

/* チェックボックス (Contact Form 7標準のものを調整) */
.rich-cf7-privacy input[type="checkbox"] {
    transform: scale(1.3);
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--hakoa-blue); /* 青色に */
}

/* --- 送信ボタンエリア --- */
.rich-cf7-submit-wrap {
    text-align: center;
    margin-top: 20px;
}

/* --- 送信ボタン (サイト共通のグラデーションボタン) --- */
.rich-cf7-btn {
    display: inline-block;
    min-width: 320px;
    padding: 20px 40px;
    
    /* グラデーション */
    background: var(--hakoa-gradient) !important;
    color: #ffffff !important;
    
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    border: none !important;
    border-radius: 50px !important; /* 丸い形状 */
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    appearance: none;
    -webkit-appearance: none;
    
    /* 影 */
    box-shadow: 0 10px 20px rgba(0, 212, 163, 0.3);
}

/* 送信ボタンホバー時 */
.rich-cf7-btn:hover {
    transform: translateY(-3px); /* 浮き上がる */
    box-shadow: 0 15px 30px rgba(0, 212, 163, 0.4);
    opacity: 1 !important;
}

/* --- エラーメッセージ等の調整 --- */
.wpcf7-not-valid-tip {
    font-size: 0.85rem;
    color: #e63946;
    margin-top: 8px;
    font-weight: 700;
}

/* 送信完了メッセージの枠線 */
.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--hakoa-green);
    background-color: #f0fcf9;
    color: var(--hakoa-text-main);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

/* スマホ対応 */
@media screen and (max-width: 480px) {
    .rich-cf7-container {
        padding: 0 10px;
    }
    .rich-cf7-btn {
        width: 100%;
        min-width: auto;
    }
    .rich-cf7-input {
        font-size: 16px; /* iOSでズームされないように */
    }
}

/* =========================================
   ドロワーメニュー (完全リニューアル版)
   ========================================= */

/* --- 1. ベース設定の上書き (黒背景を白に変更) --- */
.p-drawer {
    background: #ffffff !important; /* 強制的に白背景 */
    color: var(--hakoa-text-main) !important; /* 文字色をネイビー/黒系に */
}

.p-drawer__body {
    padding-top: 40px; /* 上部の余白確保 */
}

/* --- 2. ロゴエリアのデザイン --- */
.c-drawerHeader {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
}
.c-drawerHeader__logo img {
    max-height: 45px; /* ロゴの大きさ */
    width: auto;
    margin: 0 auto 10px;
    display: block;
}
.c-drawerHeader__desc {
    font-size: 0.8rem;
    color: var(--hakoa-green); /* アクセントカラー(緑) */
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0;
}

/* --- 3. メニューリストのデザイン --- */
/* リスト全体の配置 */
.c-drawerNav {
    padding: 0 30px !important;
}

/* 各メニュー項目 */
.c-drawerNav > li {
    border-bottom: 1px dashed #eee; /* 薄いグレーの点線 */
}
/* リンクのスタイル */
.c-drawerNav > li > a {
    color: var(--hakoa-text-main) !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 18px 0;
    text-align: center; /* 中央揃え */
    display: block;
}

/* --- 4. お問い合わせボタン (専用クラス .drawer-cta) --- */
/* ここだけ特別扱いしてボタン化 */
.c-drawerNav > li.drawer-cta {
    border-bottom: none; /* 線を消す */
    margin-top: 30px;    /* 上に余白 */
}

.c-drawerNav > li.drawer-cta > a {
    /* グラデーション背景 */
    background: var(--hakoa-gradient) !important;
    color: #fff !important;
    
    /* 形状 */
    border-radius: 50px;
    padding: 15px 0;
    width: 100%;
    display: block;
    
    /* 装飾 */
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0, 212, 163, 0.3);
    text-align: center;
}

/* --- 5. 閉じるボタンのデザイン --- */
.p-drawer__close {
    background-color: #f7f7f7 !important; /* 薄いグレー */
    color: #888 !important;
    border-radius: 50px;
    width: auto !important;
    padding: 10px 30px !important;
    margin: 40px auto 30px !important;
    border: 1px solid #eee;
    font-weight: 700;
    font-size: 0.8rem;
}

/* =========================================
   「つながりたい方へ」ページデザイン (白背景・アニメーション対応版)
   ========================================= */

/* --- アニメーション動作定義 (.fade-up) --- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ベースレイアウト --- */
.section-connect {
    padding: 100px 0;
    background-color: #ffffff; /* 白背景 */
    color: #333;
}

/* --- リードエリア --- */
.connect-lead-area {
    text-align: center;
    margin-bottom: 80px;
}
.connect-main-title {
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    color: var(--hakoa-text-main); /* ネイビー */
    line-height: 1.5;
    margin-bottom: 30px;
    font-family: serif;
}
.connect-sub-text {
    font-size: 1.1rem;
    line-height: 2;
    color: #444;
}

/* --- ラベルエリア --- */
.connect-label-area {
    text-align: center;
    margin-bottom: 60px;
}
.connect-section-label {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--hakoa-green);
    border-bottom: 2px solid var(--hakoa-green);
    padding-bottom: 5px;
}

/* --- 各ブロック (画像 + 比較表) --- */
.connect-block {
    margin-bottom: 100px;
    /* 枠線などはつけず、余白で分ける */
}

/* ヘッダー部分 (画像とタイトル) */
.connect-block__header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
}
/* 偶数番目は画像を右にするなどの変化をつける場合（今回はシンプルに見やすさ重視で統一も可ですが、リズムのために反転用クラスを用意） */
.connect-block__header.reverse {
    flex-direction: row-reverse;
}

.connect-block__img {
    flex: 1;
    max-width: 500px; /* 画像が大きすぎないように制限 */
}
.connect-block__img img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* 少しだけ角丸 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.connect-block__titles {
    flex: 1;
}
.target-badge {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hakoa-blue);
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.target-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--hakoa-text-main);
    line-height: 1.2;
    margin: 0;
}

/* --- 比較エリア (課題 vs 解決) --- */
.comparison-row {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

/* ボックス共通 */
.box-problem, .box-solution {
    flex: 1;
    padding: 30px;
    border-radius: 8px;
}

/* 課題エリア (シンプルグレー) */
.box-problem {
    background-color: #f7f7f7;
    border-left: 4px solid #ccc;
}
.box-problem .box-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
/* 絵文字を使わずCSSで装飾 */
.box-problem .box-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #999;
    border-radius: 50%;
    margin-right: 10px;
}

/* 解決エリア (ブランドカラー強調) */
.box-solution {
    background-color: #f0fcf9; /* ごく薄い緑 */
    border: 1px solid #ccece6;
    border-left: 4px solid var(--hakoa-gradient); /* 左端をグラデーションに */
    position: relative;
    overflow: hidden;
}
/* 背景にうっすら光を入れる */
.box-solution::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom left, rgba(0, 212, 163, 0.1), transparent);
    pointer-events: none;
}

.box-solution .box-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hakoa-text-main);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.box-solution .box-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--hakoa-green);
    border-radius: 50%;
    margin-right: 10px;
}

/* リストスタイル */
.plain-list, .check-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.plain-list li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #444;
    padding-left: 1rem;
    text-indent: -1rem;
}
.plain-list li::before {
    content: '・';
    color: #888;
    margin-right: 5px;
}

.check-list li {
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hakoa-text-main);
    padding-left: 1.5em;
    position: relative;
}
/* チェックマークをCSSで作る */
.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 10px;
    border: solid var(--hakoa-green);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-50%);
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .section-connect { padding: 60px 0; }
    
    .connect-block__header, 
    .connect-block__header.reverse {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .connect-block__img {
        width: 100%;
        max-width: none;
    }
    
    .comparison-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .pc-only { display: none; }
}

/* =========================================
   ここから下を追加してください
   会社概要ページ (.section-company)
   ========================================= */

.section-company {
    padding: 100px 0;
    background-color: #fff;
    color: #333;
}

/* --- 1. Philosophy --- */
.company-philosophy {
    text-align: center;
    margin-bottom: 100px;
}
.philosophy-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    font-family: serif;
    color: var(--hakoa-text-main);
    line-height: 1.6;
    margin-bottom: 40px;
}
.philosophy-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 2.2;
    color: #444;
}

/* --- タイトル共通 --- */
.section-title-en {
    text-align: center;
    color: var(--hakoa-text-main);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 50px;
}
.section-title-en::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--hakoa-gradient);
}

/* --- 2. Vision & Mission (カード型) --- */
.company-vision {
    margin-bottom: 100px;
}
.vision-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
}
.vision-card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    overflow: hidden; /* 画像の角丸対応 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* 浮き上がり */
    display: flex;
    flex-direction: column;
}
.vision-card__img {
    width: 100%;
    height: 200px; /* 画像の高さを統一 */
}
.vision-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を保ってトリミング */
    transition: transform 0.5s;
}
.vision-card:hover .vision-card__img img {
    transform: scale(1.05); /* ホバーで少し拡大 */
}
.vision-card__body {
    padding: 30px;
    flex: 1;
    position: relative;
}
.vision-num {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(0, 212, 163, 0.2);
    line-height: 1;
    margin-bottom: 10px;
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: sans-serif;
}
.vision-head {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--hakoa-text-main);
    padding-right: 40px; /* 番号との被り防止 */
}
.vision-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
}

/* --- 3. Why Hakoa? (背景画像あり) --- */
.company-why {
    margin-bottom: 100px;
}
.why-bg-box {
    /* 画像を指定し、暗いフィルターを重ねて文字を読みやすくする */
    background: linear-gradient(rgba(10, 37, 64, 0.75), rgba(10, 37, 64, 0.75)), 
                url('https://collab.secca.inc/wp-content/uploads/2025/07/mission01.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    color: #fff; /* 文字色白 */
    padding: 80px 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.why-content-wrapper {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}
.why-header {
    flex: 0 0 250px;
}
.why-label {
    display: block;
    font-size: 0.9rem;
    color: var(--hakoa-green); /* アクセント */
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    font-weight: 700;
}
.why-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1;
    color: #fff;
}
.why-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    font-weight: 500;
}
.why-body {
    flex: 1;
    font-size: 1.05rem;
    line-height: 2;
}
.why-body p {
    margin-bottom: 20px;
}
.why-body p:last-child {
    margin-bottom: 0;
}

/* --- 4. Profile --- */
.company-profile {
    max-width: 800px;
    margin: 0 auto;
}
.section-title-jp {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    color: var(--hakoa-text-main);
}
.profile-list {
    border-top: 1px solid #eee;
}
.profile-row {
    display: flex;
    border-bottom: 1px solid #eee;
}
.profile-row dt {
    width: 30%;
    padding: 25px 20px;
    background-color: #fafafa;
    font-weight: 700;
    color: var(--hakoa-text-main);
    display: flex;
    align-items: center;
}
.profile-row dd {
    width: 70%;
    padding: 25px 30px;
    margin: 0;
    display: flex;
    align-items: center;
    color: #333;
    line-height: 1.6;
}
.profile-row dd a {
    color: var(--hakoa-blue);
    text-decoration: underline;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .section-company { padding: 60px 0; }
    
    .philosophy-title { font-size: 1.6rem; text-align: left; }
    .philosophy-text { text-align: left; }
    
    .vision-grid { flex-direction: column; gap: 30px; }
    .vision-card__img { height: 180px; }
    
    .why-bg-box { padding: 40px 25px; }
    .why-content-wrapper { flex-direction: column; gap: 30px; }
    .why-header { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 20px; }
    
    .profile-row { flex-direction: column; }
    .profile-row dt { width: 100%; padding: 15px 20px; background: #f4f4f4; border-bottom: none; }
    .profile-row dd { width: 100%; padding: 15px 20px 25px; }
}

/* =========================================
   【修正】Why Hakoa? の文字色を強制的に白にする
   ========================================= */

/* タイトル、サブタイトル、本文のpタグをすべて白で統一 */
.why-bg-box .why-title,
.why-bg-box .why-subtitle,
.why-bg-box .why-body,
.why-bg-box .why-body p {
    color: #ffffff !important;
}

/* ※左上の「Message」というラベルだけは緑色を維持 */
.why-bg-box .why-label {
    color: var(--hakoa-green) !important;
}

/* =========================================
   スマホ(SP)画面のフォントサイズ一括調整
   ========================================= */
@media screen and (max-width: 768px) {
	
    /* 1. トップページ & フッターのKV（一番大きな文字） */
    .kv-vivid-title,
    .footer-vivid-title {
        font-size: 2.2rem !important; /* 元がかなり大きいのでガッツリ小さく */
        line-height: 1.3;
    }
    
    /* 2. 固定ページのヘッダータイトル（ネイビー背景の部分） */
    .c-pageTitle,
    .custom-navy-title,
    .is-hakoa-custom-header .c-pageTitle {
        font-size: 1.8rem !important;
    }

    /* 3. 各セクションのメイン見出し（MISSION, つながりたい, 理念など） */
    .mission-title,
    .connect-main-title,
    .philosophy-title {
        font-size: 1.5rem !important; /* 日本語の読みやすさ重視 */
        line-height: 1.5;
    }

    /* 4. 英語の飾り見出し (Vision & Mission, WORKなど) */
    .section-title-en,
    .mission-eyebrow,
    .connect-section-label,
    .why-title {
        font-size: 1.8rem !important;
    }

    /* 5. カード内の見出し (企業の方へ, 学生の方へなど) */
    .target-title,
    .work-title,
    .vision-head {
        font-size: 1.4rem !important;
    }
    
    /* 6. お問い合わせフォームの見出し */
    .rich-cf7-label {
        font-size: 0.9rem !important;
    }
    
    /* 7. CTA (お問い合わせ誘導エリア) の見出し */
    .cta-heading {
        font-size: 1.5rem !important;
    }

}

/* =========================================
   固定ページヘッダー (動的背景版) デザイン
   ========================================= */

#custom-subpage-header {
    position: relative;
    width: 100vw;
    height: 300px; /* ヘッダーの高さ (お好みで調整: 250px〜400px) */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 60px;
    background-color: var(--hakoa-text-main); /* ネイビー背景(Canvasロード前の保険) */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* 背景アニメーション */
#subpage-header-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.6; /* 粒子の明るさ調整 */
}

/* タイトル周りのコンテンツ */
.custom-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 90%;
}

/* ページタイトル文字 */
.custom-header-title {
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 3rem); /* レスポンシブサイズ */
    font-weight: 800;
    font-family: serif; /* 明朝体で上品に */
    letter-spacing: 0.15em;
    margin: 0 0 20px 0;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3); /* 浮き上がるような影 */
    
    /* アニメーション初期状態 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

/* ふわっと表示 */
.custom-header-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* タイトル下のグラデーションライン */
.custom-header-line {
    width: 60px;
    height: 4px;
    background: var(--hakoa-gradient);
    margin: 0 auto;
    border-radius: 2px;
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
    #custom-subpage-header {
        height: 220px; /* スマホでは少し高さを抑える */
        margin-bottom: 40px;
    }
}

/* =========================================
   上に戻るボタン (リッチデザイン)
   ========================================= */

/* ボタンのベースデザイン */
.c-fixBtn.-pagetop.-custom-rich {
    width: 60px;  /* 少し大きめに */
    height: 60px;
    border-radius: 50%; /* 完全な円 */
    background: var(--hakoa-text-main); /* 通常時はネイビー */
    border: 2px solid rgba(255, 255, 255, 0.1); /* うっすら白い枠線で高級感 */
    color: #fff;
    
    /* 影で浮遊感を出す */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    
    /* アニメーション */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    position: relative;
    z-index: 100;
}

/* 中身のレイアウト */
.c-fixBtn.-pagetop.-custom-rich .c-fixBtn__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 100%;
    height: 100%;
}

/* アイコン調整 */
.c-fixBtn.-pagetop.-custom-rich .c-fixBtn__icon {
    margin-bottom: 2px;
    transition: transform 0.3s ease;
}

/* 文字調整 */
.c-fixBtn.-pagetop.-custom-rich .c-fixBtn__text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: sans-serif;
}

/* --- ホバー時のアクション --- */
@media (hover: hover) {
    .c-fixBtn.-pagetop.-custom-rich:hover {
        /* ホバー時はブランドカラーのグラデーションに */
        background: var(--hakoa-gradient);
        border-color: transparent;
        
        /* 少し上に浮き上がり、少し拡大 */
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 10px 25px rgba(0, 212, 163, 0.4); /* 緑色の光る影 */
    }

    /* アイコンがちょっと跳ねる */
    .c-fixBtn.-pagetop.-custom-rich:hover .c-fixBtn__icon {
        transform: translateY(-3px);
    }
}

/* --- スマホ調整 --- */
@media screen and (max-width: 768px) {
    .c-fixBtn.-pagetop.-custom-rich {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .c-fixBtn.-pagetop.-custom-rich .c-fixBtn__text {
        font-size: 9px;
        display: none; /* スマホでは文字を消してシンプルにしてもOK（お好みで） */
    }
    /* 文字を消すならアイコンを中心に */
    .c-fixBtn.-pagetop.-custom-rich .c-fixBtn__icon {
        margin-bottom: 0;
    }
}