/*
Theme Name: lien 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: lien-child
*/

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

/* ==========================================================================
   ■ LP Custom Styles (Arkhē Section Optimized)
   ========================================================================== */

/* * 1. Base Variables & Global Settings
 * -------------------------------------------------- 
 */
:root {
    --lp-color-main: #1F3A5F;
    --lp-color-accent: #4A7C8C;
    --lp-color-text: #333333;
    --lp-color-text-light: #666666;
    --lp-color-bg-sub: #F4F7FA;
    --lp-easing: cubic-bezier(0.25, 1, 0.5, 1);
}

/* 共通フォント・リセット設定 */
.lp-section-padding, .lp-hero, .lp-sec-message {
    color: var(--lp-color-text);
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.9;
    box-sizing: border-box;
}

.lp-section-padding img, .lp-hero img, .lp-sec-message img { 
    max-width: 100%; 
    height: auto; 
    vertical-align: bottom; 
}

.lp-container ul { list-style: none; padding: 0; margin: 0; }
.lp-container a { text-decoration: none; color: inherit; transition: all 0.3s var(--lp-easing); }

/* コンテナ・余白ユーティリティ */
.lp-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2; /* 背景より上に */
}
.lp-section-padding { padding: 120px 0; }

/* 共通見出しスタイル */
.lp-sec-header { text-align: center; margin-bottom: 80px; }
.lp-sec-title {
    font-size: clamp(28px, 5vw, 36px);
    color: var(--lp-color-main);
    font-weight: 700;
    letter-spacing: 0.05em;
    display: inline-block;
    position: relative;
    margin: 0;
}
.lp-sec-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--lp-color-accent);
    margin: 20px auto 0;
}

/* ==========================================================================
   ■ Common Button Style (共通ボタン)
   ========================================================================== */
.lp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-color-accent);
    color: #fff !important;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    z-index: 10;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(74, 124, 140, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバーエフェクト（背景色がスライドして変わる） */
.lp-btn-primary::before {
    content: "";
    position: absolute;
    top: 0; left: 0; 
    width: 0%; height: 100%;
    background: var(--lp-color-main);
    z-index: -1;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-btn-primary:hover::before {
    width: 100%;
}
.lp-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(31, 58, 95, 0.3);
    color: #fff;
}
/* 共通アニメーション（Fade Up） */
.fade-target {
    opacity: 1; 
    transform: translateY(0);
}
.js-scroll-anim .fade-target {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s var(--lp-easing), transform 1s var(--lp-easing);
}
.js-scroll-anim .fade-target.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }


/* * 2. Hero Section (KV) - Responsive & Dynamic Update
 * -------------------------------------------------- 
 */
/* ベース設定 */
.lp-hero {
    position: relative;
    width: 100%;
    height: 100vh; /* 画面いっぱい */
    min-height: 600px; 
    overflow: hidden;
    display: flex;
    align-items: center; /* PCは上下中央揃え */
    background-color: #1F3A5F; /* 画像読み込み前の背景色 */
}

/* 背景画像を包むラッパー（マウスパララックス等の動き用） */
.lp-hero-bg-wrap {
    position: absolute;
    top: -5%; left: -5%; 
    width: 110%; height: 110%; /* 動きの余白を作るため少し大きく */
    z-index: 0;
}

/* 背景画像本体 */
.lp-hero-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* ▼ PC用画像 ▼ */
    background-image: url('https://lien-support.jp/wp-content/uploads/2026/01/6TAC0574.jpg');
    /* ゆっくりズームするアニメーション */
    animation: heroZoom 30s infinite alternate ease-in-out;
}

@keyframes heroZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Canvas (パーティクル) */
#lp-hero-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* オーバーレイ（文字を読みやすくする） */
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    /* PC: 左側を白っぽくして文字を読ませる */
    background: linear-gradient(90deg, rgba(255,255,255, 0.95) 0%, rgba(255,255,255, 0.8) 40%, rgba(255,255,255, 0) 100%);
}

/* コンテンツエリア */
.lp-hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    /* PC: 左寄せ */
    display: flex;
    justify-content: flex-start;
}

.lp-hero-text-area {
    max-width: 600px;
}

/* タイトル */
.lp-hero-title {
    font-size: clamp(32px, 4vw, 52px); /* 少し大きく */
    font-weight: 700;
    color: var(--lp-color-main);
    line-height: 1.5;
    margin-bottom: 32px;
    text-shadow: 0 2px 20px rgba(255,255,255,0.8);
}
/* 1行ずつアニメーションさせるためのクラス */
.lp-title-line {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: slideUpFade 0.8s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
.lp-title-line:nth-child(1) { animation-delay: 0.3s; }
.lp-title-line:nth-child(3) { animation-delay: 0.5s; } /* brタグを挟むので3番目 */
.lp-title-line:nth-child(5) { animation-delay: 0.7s; }

/* サブタイトル */
.lp-hero-sub {
    font-size: 18px;
    color: var(--lp-color-text);
    margin-bottom: 40px;
    font-weight: 500;
    opacity: 0;
    animation: slideUpFade 0.8s ease forwards 1.0s;
}

/* ボタン */
.lp-hero-btn-wrap {
    opacity: 0;
    animation: slideUpFade 0.8s ease forwards 1.2s;
}

@keyframes slideUpFade {
    to { opacity: 1; transform: translateY(0); }
}

/* スクロールダウンアイコン */
.lp-scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--lp-color-main);
    font-size: 12px;
    letter-spacing: 0.1em;
    animation: fadeBounce 2s infinite;
    z-index: 10;
    writing-mode: vertical-rl;
}
.lp-scroll-down::after {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    background: var(--lp-color-main);
    margin: 10px auto 0;
}
@keyframes fadeBounce {
    0%, 100% { opacity: 0.5; transform: translate(-50%, 0); }
    50% { opacity: 1; transform: translate(-50%, 10px); }
}


/* ==================================================
   ■ SP/Tablet Responsive (スマホ最適化)
   ================================================== */
@media (max-width: 768px) {
    .lp-hero {
        /* スマホは下寄せレイアウトにする */
        align-items: flex-end;
        padding-bottom: 100px; /* スクロールダウンアイコン等との余白 */
    }

    /* 背景画像の切り替え */
    .lp-hero-bg {
        /* ▼ SP用画像（縦長） ▼ */
        background-image: url('https://lien-support.jp/wp-content/uploads/2026/01/6TAC0577.jpg');
        /* 顔が見切れないように位置調整（上基準） */
        background-position: center 20%; 
    }

    /* オーバーレイの変更（下から黒〜透明のグラデーション） */
    /* これにより、白文字が写真の上でも読みやすくなる */
    .lp-hero::before {
        background: linear-gradient(
            to top, 
            rgba(31, 58, 95, 0.9) 0%,  /* 下は濃いネイビー */
            rgba(31, 58, 95, 0.6) 40%, 
            rgba(31, 58, 95, 0) 80%    /* 上は透明（写真が見える） */
        );
    }

    /* テキストエリア */
    .lp-hero-content {
        justify-content: center;
        text-align: left; /* スマホでも左揃えの方が読みやすい */
        padding: 0 20px;
    }

    .lp-hero-text-area {
        width: 100%;
    }

    /* 文字色を白に変更（濃い背景に乗るため） */
    .lp-hero-title {
        color: #fff;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        font-size: 28px;
        margin-bottom: 20px;
    }
    .lp-hero-sub {
        color: rgba(255,255,255, 0.9);
        font-size: 15px;
        margin-bottom: 30px;
    }

    /* スクロールダウンの色も白に */
    .lp-scroll-down {
        color: #fff;
        bottom: 20px;
    }
    .lp-scroll-down::after {
        background: #fff;
    }
    
    /* パーティクルの色調整（背景が暗くなるので明るくする） */
    /* ※これはJSで制御しますが、CSSで透明度などを調整 */
    #lp-hero-canvas {
        opacity: 0.6;
    }
}

/* * 3. Problem Section (課題) - Dark Contrast Design
 * -------------------------------------------------- 
 */
.lp-sec-problem { 
    /* 背景を濃いネイビーに変更してコントラストをつける */
    background-color: var(--lp-color-main); 
    color: #fff; /* 文字色を白に */
    position: relative;
    overflow: hidden;
}

/* 背景装飾（うっすらとした斜めラインで奥行きを出す） */
.lp-problem-bg-deco {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 20px
    );
    z-index: 0;
    pointer-events: none;
}

.lp-sec-problem .lp-sec-title {
    color: #fff; /* タイトルも白に */
}
/* タイトルの下線色を少し明るくして目立たせる */
.lp-sec-problem .lp-sec-title::after {
    background: #fff; 
    opacity: 0.3;
}

.lp-problem-intro { 
    text-align: center; 
    margin-bottom: 60px; 
    font-size: 18px; 
    color: rgba(255, 255, 255, 0.8); /* 少し薄い白 */
}

.lp-problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.lp-problem-card {
    /* ガラスのような半透明のダークカード */
    background: rgba(255, 255, 255, 0.05);
    padding: 50px 30px;
    border-radius: 12px;
    /* 境界線をうっすら引いてリッチに */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.4s var(--lp-easing), box-shadow 0.4s var(--lp-easing), background 0.4s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    backdrop-filter: blur(5px); /* すりガラス効果 */
}

.lp-problem-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    background: rgba(255, 255, 255, 0.1); /* ホバーで少し明るく */
    border-color: rgba(255, 255, 255, 0.3);
}

.lp-problem-icon {
    width: 70px; height: 70px;
    /* アイコン背景も白系にしてコントラスト確保 */
    background: #fff;
    color: var(--lp-color-main); /* アイコン自体はネイビー */
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.lp-problem-icon svg { 
    width: 32px; 
    height: 32px; 
    fill: currentColor; 
}

.lp-problem-text { 
    font-size: 18px; 
    font-weight: 700; 
    line-height: 1.8; 
    color: #fff; 
    margin: 0;
    letter-spacing: 0.05em;
}

/* * 4. Concept Section (Safe Animation Ver.)
 * -------------------------------------------------- 
 */
.lp-section-concept-new {
    background-color: #fff;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

/* コンテナ設定 */
.lp-concept-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* ■ 画像エリア */
.lp-concept-visual {
    width: 50%;
    position: relative;
    z-index: 1;
}

/* 画像の枠 */
.lp-visual-frame {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    line-height: 0;
}

.lp-concept-img {
    width: 100%;
    height: auto;
    display: block;
    /* 常にゆっくり動き続ける演出 */
    transform: scale(1.0);
    transition: transform 10s ease; 
}
/* ホバー時や表示時にズーム */
.lp-concept-visual:hover .lp-concept-img,
.lp-concept-visual.is-active .lp-concept-img {
    transform: scale(1.1);
}

/* 背面の装飾ボックス */
.lp-visual-back-deco {
    position: absolute;
    top: 30px;
    left: -30px;
    width: 100%;
    height: 100%;
    background-color: #f4f7fa;
    z-index: 1;
    border-radius: 4px;
}


/* ■ テキストエリア */
.lp-concept-text {
    width: 50%;
    position: relative;
}

.lp-concept-eng {
    display: block;
    font-size: 14px;
    color: var(--lp-color-accent);
    letter-spacing: 0.2em;
    font-family: sans-serif;
    font-weight: 700;
    margin-bottom: 15px;
}

.lp-concept-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 50px;
    line-height: 1.4;
}

.lp-concept-lead-area {
    margin-bottom: 40px;
    padding-left: 20px;
    border-left: 3px solid var(--lp-color-accent);
}

.lp-lead-sub {
    font-size: 18px;
    color: var(--lp-color-text-light);
    margin-bottom: 10px;
    font-weight: 500;
}

.lp-lead-main {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--lp-color-main);
}

.lp-marker {
    background: linear-gradient(transparent 65%, #dcf0f7 65%);
    padding-bottom: 2px;
}

.lp-concept-desc {
    font-size: 16px;
    line-height: 2.2;
    color: var(--lp-color-text);
}
.lp-concept-desc p { margin-bottom: 24px; }
.lp-concept-desc strong {
    color: var(--lp-color-main);
    border-bottom: 1px solid var(--lp-color-accent);
}
.sp-only { display: none; }


/* ■ アニメーション制御（ここが最重要） */

/* 1. 基本設定：見えている状態 */
.fade-up-trigger {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease, transform 1s ease;
}

/* 2. JSが正常に動いている場合のみ、初期状態を隠す */
/* bodyに js-scroll-anim があり、かつ .is-active がまだ無い時 */
body.js-scroll-anim .fade-up-trigger:not(.is-active) {
    opacity: 0;
    transform: translateY(30px);
}

/* 3. 遅延設定 */
.delay-200 { transition-delay: 0.2s; }


/* ■ SP Responsive */
@media (max-width: 768px) {
    .lp-section-concept-new { padding: 80px 0; }
    .lp-concept-inner { flex-direction: column; gap: 50px; }
    
    .lp-concept-visual { width: 100%; padding: 0 10px; }
    .lp-visual-back-deco { top: 20px; left: -10px; }
    
    .lp-concept-text { width: 100%; }
    .lp-concept-eng { font-size: 12px; margin-bottom: 10px; }
    .lp-concept-title { font-size: 26px; margin-bottom: 30px; text-align: left; }
    
    .lp-concept-lead-area { margin-bottom: 30px; padding-left: 15px; }
    .lp-lead-sub { font-size: 15px; }
    .lp-lead-main { font-size: 24px; }
    
    .lp-concept-desc { font-size: 15px; line-height: 2.0; text-align: justify; }
    .sp-only { display: inline; }
}
/* ==========================================================================
   ■ 5. Strength Section (強み)
   ========================================================================== */
.lp-sec-strength { 
    background-color: var(--lp-color-main); 
    color: #fff; 
    padding: 100px 0;
}
.lp-sec-strength .lp-sec-title { color: #fff; }
.lp-sec-strength .lp-sec-title::after { background: rgba(255,255,255,0.3); }

.lp-strength-list { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
}

.lp-strength-item {
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.1);
    padding: 40px 30px; 
    border-radius: 8px; 
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease, background 0.3s ease;
}
.lp-strength-item:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-5px);
}

.lp-strength-head-area {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 15px;
}

.lp-strength-num {
    display: block;
    font-size: 40px; 
    font-weight: 700; 
    color: var(--lp-color-accent);
    line-height: 1; 
    margin-bottom: 10px; 
    font-family: serif; /* 数字は明朝系でエレガントに */
}

.lp-strength-head { 
    font-size: 20px; 
    font-weight: 700; 
    line-height: 1.5; 
    margin: 0;
}

.lp-strength-desc { 
    font-size: 15px; 
    line-height: 1.8;
    opacity: 0.9; 
    text-align: justify;
}


/* ==========================================================================
   ■ 6. Service Section (サービス)
   ========================================================================== */
.lp-sec-service { 
    background-color: #f7f9fb; /* 薄いグレーで区分け */
    padding: 120px 0 160px; /* 次のセクションが被る分の余白を下にとる */
}

.lp-service-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* 画像エリア */
.lp-service-visual {
    width: 50%;
    position: relative;
    box-shadow: 20px 20px 0px rgba(31, 58, 95, 0.05); /* ズレた影 */
    border-radius: 4px;
}
.lp-service-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* テキストエリア */
.lp-service-info { 
    width: 45%; 
}

.lp-sec-subtitle {
    display: block;
    font-size: 14px;
    color: var(--lp-color-accent);
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: sans-serif;
}

.lp-sec-title-left {
    font-size: 32px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 40px;
    line-height: 1.4;
    border-left: 4px solid var(--lp-color-accent);
    padding-left: 20px;
}

.lp-service-list {
    margin-bottom: 40px;
}
.lp-service-list li {
    padding: 18px 0; 
    border-bottom: 1px solid #ddd; 
    font-size: 18px; 
    font-weight: 700;
    color: var(--lp-color-main); 
    display: flex; 
    align-items: center;
}
.lp-service-list li::before { 
    content: "✔"; 
    color: var(--lp-color-accent); 
    margin-right: 15px; 
    font-size: 16px; 
}


/* ==========================================================================
   ■ 7. Message Section (代表メッセージ)
   ========================================================================== */
.lp-sec-message { 
    /* 上のセクションに被せる設定 */
    margin-top: -100px; 
    position: relative; 
    z-index: 5;
    padding-bottom: 100px;
}

.lp-message-card { 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.08); 
    overflow: hidden; 
    display: flex; 
}

/* 写真エリア */
.lp-message-img-area { 
    width: 40%; 
    position: relative;
}
.lp-message-img-area img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center top; /* 顔が見えるように上基準 */
}

/* テキストエリア */
.lp-message-body { 
    width: 60%; 
    padding: 80px 60px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lp-message-head {
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.lp-message-role {
    display: block;
    font-size: 14px;
    color: var(--lp-color-accent);
    margin-bottom: 5px;
    font-weight: 700;
}
.lp-message-name {
    font-size: 28px;
    color: var(--lp-color-main);
    font-weight: 700;
    margin: 0;
}

.lp-message-text p {
    font-size: 16px;
    line-height: 2.2;
    color: var(--lp-color-text);
    margin-bottom: 24px;
    font-family: "Yu Mincho", "YuMincho", serif; /* メッセージは明朝体で誠実に */
}


/* ==========================================================================
   ■ SP Responsive (スマホ最適化)
   ========================================================================== */
@media (max-width: 900px) {
    /* 共通コンテナ */
    .lp-container { padding: 0 20px; }

    /* Strength Section */
    .lp-sec-strength { padding: 80px 0; }
    .lp-strength-list { 
        grid-template-columns: 1fr; /* 1列にする */
        gap: 20px; 
    }
    .lp-strength-item {
        padding: 30px 24px;
        text-align: left;
    }
    .lp-strength-num { font-size: 36px; }
    .lp-strength-head { font-size: 18px; }

    /* Service Section */
    .lp-sec-service { 
        padding: 80px 0 120px; /* 下の余白確保 */
    }
    .lp-service-layout {
        flex-direction: column;
        gap: 30px;
    }
    .lp-service-visual {
        width: 100%;
        margin-left: 0;
        box-shadow: none; /* スマホでは影なしでシンプルに */
    }
    .lp-service-img {
        width: 100%;
        max-height: 250px;
        object-fit: cover; /* 横長にトリミング */
    }
    .lp-service-info { 
        width: 100%; 
    }
    .lp-sec-title-left {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .lp-service-list li {
        font-size: 16px;
        padding: 15px 0;
    }

    /* Message Section */
    .lp-sec-message { 
        margin-top: -60px; /* 被り幅を少し減らす */
        padding-bottom: 60px;
    }
    .lp-message-card { 
        flex-direction: column; 
    }
    .lp-message-img-area { 
        width: 100%; 
        height: 300px; /* 高さを固定 */
    }
    .lp-message-img-area img {
        object-position: center 20%; /* 顔中心に合わせる */
    }
    .lp-message-body { 
        width: 100%; 
        padding: 40px 24px; 
    }
    .lp-message-text p {
        font-size: 15px;
        text-align: justify;
    }
}


/* ==========================================================================
   ■ 8. CTA Section (お問い合わせ - Dark Navy Version)
   ========================================================================== */
.lp-sec-cta-rich {
    background-color: var(--lp-color-main); /* 濃いネイビー背景 */
    padding: 100px 0;
    color: #fff;
    text-align: center;
}

/* ヘッダー周り */
.lp-cta-header {
    margin-bottom: 50px;
}

.lp-cta-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
}

.lp-cta-lead {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}


/* コンバージョンボックス（白い箱） */
.lp-cta-box {
    background: #fff;
    border-radius: 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* 強い影で浮き立たせる */
    color: #333; /* 箱の中は黒文字 */
}


/* --- 左側：電話エリア --- */
.lp-cta-tel-area {
    width: 45%;
    text-align: center;
}

.lp-cta-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 15px;
    display: block;
    opacity: 0.7;
}

.lp-cta-tel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-color-main);
    text-decoration: none;
    transition: opacity 0.3s;
    line-height: 1;
}
.lp-cta-tel-link:hover {
    opacity: 0.7;
}

.lp-cta-tel-icon {
    font-size: 24px;
    margin-right: 10px;
}

.lp-cta-tel-num {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: sans-serif; /* 数字を見やすく */
}

.lp-cta-hours {
    font-size: 12px;
    color: #888;
    margin-top: 10px;
}


/* --- 中央：区切り線 --- */
.lp-cta-divider {
    width: 1px;
    height: 80px;
    background-color: #ddd;
    margin: 0 40px;
}


/* --- 右側：ボタンエリア --- */
.lp-cta-btn-area {
    width: 45%;
    text-align: center;
}

.lp-btn-cta {
    width: 100%; /* ボタンを横幅いっぱいに */
    max-width: 320px;
    height: 60px; /* 少し大きく */
    font-size: 18px;
}

.lp-btn-arrow {
    margin-left: 15px;
    font-weight: 400;
    transition: transform 0.3s;
}
.lp-btn-cta:hover .lp-btn-arrow {
    transform: translateX(5px);
}

.lp-cta-note {
    font-size: 12px;
    color: var(--lp-color-accent);
    margin-top: 15px;
    font-weight: 700;
}


/* * 9. Responsive Adjustments (スマホ・タブレット)
 * -------------------------------------------------- 
 */
@media (max-width: 900px) {
    /* Hero */
    .lp-hero { height: auto; min-height: 600px; padding: 120px 0 80px; flex-direction: column; justify-content: center; }
    .lp-hero-content { margin-left: 0; padding: 0 20px; }
    
    /* Concept, Service, Message (Flex to Column) */
    .lp-concept-wrapper, .lp-service-content-wrap, .lp-message-card { flex-direction: column; }
    
    /* Layout Reset */
    .lp-concept-img-box, .lp-concept-content, 
    .lp-service-img-wrap, .lp-service-info, 
    .lp-message-img-area, .lp-message-body { 
        width: 100%; padding: 0; 
    }
    
    /* Spacings */
    .lp-concept-img-box { margin-bottom: 40px; }
    .lp-concept-img { border-radius: 12px; box-shadow: none; }
    .lp-concept-content { padding: 0 20px; }
    
    .lp-strength-list { grid-template-columns: 1fr; gap: 20px; }
    
    .lp-service-content-wrap { padding: 40px 0; }
    .lp-service-img-wrap { height: 300px; order: -1; margin-bottom: 30px; }
    .lp-service-bg-deco { width: 100%; border-radius: 0; }
    .lp-service-info { padding: 0 20px; }
    
    .lp-sec-message { margin-top: 0; padding-top: 80px; }
    .lp-message-img-area { height: 300px; }
    .lp-message-body { padding: 40px 24px; }
}

/* ==========================================================================
   ■ SP Responsive (CTA スマホ最適化)
   ========================================================================== */
@media (max-width: 768px) {
    .lp-sec-cta-rich {
        padding: 80px 0;
    }
    
    .lp-cta-title {
        font-size: 26px;
        margin-bottom: 20px;
    }
    .lp-cta-lead {
        font-size: 14px;
        padding: 0 10px;
    }

    /* ボックスを縦積みに */
    .lp-cta-box {
        flex-direction: column; /* 縦並び */
        padding: 40px 20px;
        width: 90%; /* 画面幅に対して少し余白 */
    }

    /* 電話エリア */
    .lp-cta-tel-area {
        width: 100%;
        margin-bottom: 30px;
    }
    .lp-cta-tel-num {
        font-size: 28px; /* スマホでは少し小さく */
    }

    /* 区切り線（横線に変更） */
    .lp-cta-divider {
        width: 100%;
        height: 1px;
        margin: 0 0 30px 0;
    }

    /* ボタンエリア */
    .lp-cta-btn-area {
        width: 100%;
    }
    .lp-btn-cta {
        max-width: 100%; /* 横幅いっぱい */
        font-size: 16px;
    }
}

/* ==========================================================================
   ■ Secondary Button (詳細を見るボタン)
   ========================================================================== */
.lp-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* 文字と矢印の間隔 */
    
    /* ボタンの形状 */
    padding: 14px 35px;
    border: 1px solid var(--lp-color-main); /* ネイビーの枠線 */
    border-radius: 50px;
    background-color: transparent;
    
    /* 文字スタイル */
    color: var(--lp-color-main) !important;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    letter-spacing: 0.05em;
    
    /* アニメーション設定 */
    transition: all 0.3s ease;
    margin-top: 20px; /* 上の要素との余白 */
}

/* 矢印（spanタグ） */
.lp-link-arrow span {
    font-family: sans-serif; /* 矢印の形を綺麗に */
    font-weight: 400;
    transition: transform 0.3s ease;
}

/* ▼ ホバー時の動き（色が反転して矢印が動く） */
.lp-link-arrow:hover {
    background-color: var(--lp-color-main);
    color: #fff !important;
    transform: translateY(-3px); /* 少し浮く */
    box-shadow: 0 10px 20px rgba(31, 58, 95, 0.15); /* 影が落ちる */
}

.lp-link-arrow:hover span {
    transform: translateX(5px); /* 矢印が右に動く */
    color: #fff;
}

/* ==========================================================================
   ■ Custom Drawer Menu (Lien Support Style)
   ========================================================================== */

/* 1. ベースデザイン：ネイビー背景 */
.custom-lp-drawer .p-drawer__body {
    background: linear-gradient(180deg, var(--lp-color-main) 0%, #152a45 100%) !important; /* グラデーションで奥行きを */
    color: #fff;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* 2. ヘッダーエリア */
.custom-lp-drawer .c-drawerHeader {
    padding: 50px 30px 30px; /* 余白をゆったりと */
    text-align: left;
    /* 線は引かず、余白で区切る */
}

.custom-lp-drawer .c-drawerHeader__desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-top: 15px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* 3. ナビゲーションリスト（線なし・シンプル） */
.custom-lp-drawer .p-drawer__nav {
    padding: 10px 0;
    flex-grow: 1;
    overflow-y: auto;
}

/* リストアイテムの線（border）を削除 */
.custom-lp-drawer .c-drawerNav > li {
    border-bottom: none; 
}

/* リンクのデザイン */
.custom-lp-drawer .c-drawerNav > li > a {
    color: #fff;
    font-size: 17px; /* 少し大きく */
    font-weight: 700;
    padding: 18px 30px; /* タップしやすい広い余白 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    border-radius: 0 50px 50px 0; /* 右側だけ丸くして遊び心を */
    margin-right: 20px; /* 角丸を見せるための余白 */
}

/* ホバー・タップ時の挙動 */
.custom-lp-drawer .c-drawerNav > li > a:hover {
    background: rgba(255, 255, 255, 0.1);
    padding-left: 40px; /* 右にスッと動くアニメーション */
    color: var(--lp-color-accent); /* 文字色をアクセントカラーに */
}

/* 矢印アイコン（控えめに） */
.custom-lp-drawer .c-drawerNav > li > a::after {
    content: "›";
    font-size: 24px;
    font-weight: 300; /* 細く */
    color: rgba(255, 255, 255, 0.3); /* 薄く */
    font-family: sans-serif;
    transform: translateY(-2px);
    transition: color 0.3s;
}
.custom-lp-drawer .c-drawerNav > li > a:hover::after {
    color: var(--lp-color-accent); /* ホバー時に明るく */
}


/* 4. フッターエリア（CTA） */
.c-drawerFooter {
    padding: 40px 30px 60px;
    background: rgba(0, 0, 0, 0.15); /* ほんのり暗く */
    text-align: center;
    margin-top: auto;
}

/* CTAボタン */
.drawer-cta-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #fff;
    color: var(--lp-color-main) !important;
    font-weight: 700;
    padding: 18px;
    border-radius: 50px;
    text-decoration: none;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}
.drawer-cta-btn:active {
    transform: scale(0.98);
}

/* 電話番号エリア */
.drawer-tel-box {
    color: #fff;
}
.drawer-tel-label {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 8px;
    display: block;
}
.drawer-tel-link {
    display: inline-block;
    font-size: 30px; /* 大きく */
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    font-family: sans-serif;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}
.drawer-tel-time {
    font-size: 12px;
    opacity: 0.6;
}

/* 5. 閉じるボタン */
.custom-lp-drawer .p-drawer__close {
    background: transparent;
    border: none;
    width: 60px; 
    height: 60px;
    position: absolute;
    top: 10px; 
    right: 10px;
    opacity: 0.8;
}
.custom-lp-drawer .c-modalClose__icon::before,
.custom-lp-drawer .c-modalClose__icon::after {
    background-color: #fff;
    height: 2px;
}


/* ==========================================================================
   ■ Drawer Contact Button (メニュー内の「お問い合わせ」強調)
   ========================================================================== */

/* メニュー項目に「nav-btn-contact」クラスがついている場合のデザイン */
.custom-lp-drawer .c-drawerNav > li.nav-btn-contact {
    margin-top: 20px;
    margin-right: 0; /* 通常リンクの余白リセット */
    padding: 0 30px;
}

.custom-lp-drawer .c-drawerNav > li.nav-btn-contact > a {
    background: var(--lp-color-accent);
    color: #fff !important;
    justify-content: center;
    border-radius: 50px;
    padding: 16px;
    margin: 0; /* 通常リンクの余白リセット */
    box-shadow: 0 5px 15px rgba(74, 124, 140, 0.4);
}

/* 矢印を消してメールアイコンにする */
.custom-lp-drawer .c-drawerNav > li.nav-btn-contact > a::after {
    content: "\f0e0"; /* fa-envelope */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    margin-left: 10px;
    font-size: 18px;
    color: #fff;
    opacity: 1;
}

/* ホバーアニメーション */
.custom-lp-drawer .c-drawerNav > li.nav-btn-contact > a:hover {
    background: #fff;
    color: var(--lp-color-accent) !important;
    padding-left: 16px; /* 通常リンクの動きを打ち消し */
    transform: translateY(-2px);
}
.custom-lp-drawer .c-drawerNav > li.nav-btn-contact > a:hover::after {
    color: var(--lp-color-accent);
}
/* ==========================================================================
   ■ 案2：モダン・スクエア（スタイリッシュ）
   ========================================================================== */
@media (min-width: 1024px) {
    .l-header .header-cta-btn {
        display: flex;
        align-items: center;
        margin-left: 15px;
        height: fit-content;
        align-self: center;
    }

    .l-header .header-cta-btn > a {
        background-color: var(--lp-color-accent);
        color: #fff !important;
        
        /* ▼ 変更：適度なサイズ感 */
        padding: 10px 28px;
        
        /* ▼ 変更：完全な丸ではなく、少し角を残す */
        border-radius: 6px; 
        
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        
        /* フラットに近い影で清潔感を出す */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
        transition: all 0.3s ease;
    }

    .l-header .header-cta-btn > a:hover {
        background-color: var(--lp-color-main);
        border-radius: 12px; /* ホバーで少し丸くする遊び心 */
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        opacity: 1;
    }
}

/* ==========================================================================
   ■ Page Top Button (上に戻るボタン - Rich Design)
   ========================================================================== */

/* 1. ボタン本体のスタイル */
.c-fixBtn.-custom-rich {
    width: 60px;
    height: 60px;
    background-color: var(--lp-color-main); /* 通常時はネイビー */
    border-radius: 50%; /* 完全な円形 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 影で浮かせる */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 内部レイアウト用 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* アニメーション */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.9;
    overflow: hidden;
    z-index: 900; /* 他の要素より手前に */
}

/* 2. インナー要素（アイコンと文字を縦積みに） */
.c-fixBtn.-custom-rich .c-fixBtn__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* 3. アイコン（矢印） */
.c-fixBtn.-custom-rich .c-fixBtn__icon {
    width: 14px;
    height: 14px;
    fill: #fff; /* 白い矢印 */
    margin-bottom: 4px; /* 文字との間隔 */
    transition: transform 0.3s ease;
}

/* 4. テキスト（TOP） */
.c-fixBtn.-custom-rich .c-fixBtn__text {
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1em;
    font-family: sans-serif;
    display: block;
}

/* 5. ホバー時の動き（PCのみ） */
@media (hover: hover) {
    .c-fixBtn.-custom-rich:hover {
        background-color: var(--lp-color-accent); /* 水色に変化 */
        transform: translateY(-5px); /* 少し上に浮く */
        box-shadow: 0 10px 20px rgba(74, 124, 140, 0.4);
        opacity: 1;
    }

    /* 矢印がピョコっと動く */
    .c-fixBtn.-custom-rich:hover .c-fixBtn__icon {
        transform: translateY(-3px);
    }
}

/* 6. スマホでの調整（少し小さくして邪魔にならないように） */
@media (max-width: 768px) {
    .c-fixBtn.-custom-rich {
        width: 50px;
        height: 50px;
        bottom: 20px !important;
        right: 15px !important;
    }
    .c-fixBtn.-custom-rich .c-fixBtn__icon {
        width: 12px;
        height: 12px;
        margin-bottom: 2px;
    }
    .c-fixBtn.-custom-rich .c-fixBtn__text {
        font-size: 9px;
    }
}

/* ==========================================================================
   ■ Floating Action Buttons (電話 + TOP + 吹き出し)
   ========================================================================== */

/* --------------------------------------------------
   1. 電話ボタン本体 (Base)
   -------------------------------------------------- */
.c-fixBtn.-phone {
    background-color: var(--lp-color-accent); /* 水色 */
    color: #fff;
    text-decoration: none;
    z-index: 910; /* TOPボタンより手前に */
    
    /* 位置調整：TOPボタン(50px) + 余白の上に配置 */
    margin-bottom: 70px; 
    
    /* 【重要】吹き出しをボタン枠外に表示させるため切り抜きを解除 */
    overflow: visible !important;
    
    /* PCでは基本非表示（誤クリック防止） */
    display: none;
}

/* アイコンサイズ調整 */
.c-fixBtn.-phone i {
    font-size: 20px;
    margin-bottom: 2px;
}

/* --------------------------------------------------
   2. 吹き出しツールチップ (Bubble)
   -------------------------------------------------- */
.c-fixBtn__bubble {
    position: absolute;
    bottom: 60px; /* ボタン(50px) + 余白(10px) */
    right: 0;     /* 右端揃え */
    
    background-color: #fff;
    color: var(--lp-color-main); /* ネイビー文字 */
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    
    /* クリックの邪魔をしない */
    pointer-events: none;
    
    /* ふわふわアニメーション */
    animation: bubble-float 2s ease-in-out infinite;
}

/* 吹き出しのしっぽ（▼） */
.c-fixBtn__bubble::after {
    content: "";
    position: absolute;
    bottom: -5px;
    right: 20px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #fff transparent transparent transparent;
}

/* --------------------------------------------------
   3. アニメーション定義 (Keyframes)
   -------------------------------------------------- */
/* 電話アイコンの揺れ */
@keyframes phone-shake {
    0% { transform: rotate(0deg) scale(1); }
    5% { transform: rotate(15deg) scale(1.1); }
    10% { transform: rotate(-15deg) scale(1.1); }
    15% { transform: rotate(15deg) scale(1.1); }
    20% { transform: rotate(-15deg) scale(1.1); }
    25% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(0deg) scale(1); }
}

/* 吹き出しの浮遊 */
@keyframes bubble-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* --------------------------------------------------
   4. レスポンシブ設定 (Media Queries)
   -------------------------------------------------- */
/* ▼ スマホ表示時 (768px以下) */
@media (max-width: 768px) {
    /* ボタンの共通サイズ・位置固定 */
    .c-fixBtn.-custom-rich {
        width: 50px;
        height: 50px;
        position: fixed;
        right: 15px !important;
        bottom: 20px !important;
    }

    /* 電話ボタンを表示させる */
    .c-fixBtn.-phone {
        display: flex !important;
    }

    /* アイコンのアニメーション適用 */
    .c-fixBtn__anim-icon {
        display: block;
        animation: phone-shake 3s infinite;
        line-height: 1;
        margin-bottom: 3px;
    }
}

/* ▼ PC表示時 (769px以上) */
@media (min-width: 769px) {
    /* 念のため吹き出しも非表示に */
    .c-fixBtn__bubble { display: none; }
}

/* ==========================================================================
   ■ Message Page Styles (代表挨拶ページ専用)
   ========================================================================== */

/* 1. ページヘッダー (Wave & Animation) */
#custom-subpage-header {
    width: 100%;
    height: 380px;
    /* サイト共通のネイビーグラデーション */
    background: linear-gradient(135deg, #1F3A5F 0%, #152a45 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-bottom: 60px;
}

#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%;
    margin-top: -20px;
}

.custom-header-en {
    display: block;
    font-size: 14px;
    color: var(--lp-color-accent);
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: sans-serif;
    opacity: 0;
    animation: fadeIn 1s ease 0.5s forwards;
}

.custom-header-title {
    font-size: clamp(2.0rem, 4vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
    /* 明朝体がなければ標準フォントへフォールバック */
    font-family: "Noto Serif JP", serif; 
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}
.custom-header-title.is-visible { opacity: 1; transform: translateY(0); }

.custom-header-wave {
    position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 3;
}
.custom-header-wave svg { width: 100%; height: 80px; display: block; }
@keyframes fadeIn { to { opacity: 1; } }


/* 2. コンテンツエリア */
.page-content {
    padding-bottom: 120px;
    background-color: #fff;
}

/* キャッチコピー */
.message-catch-area {
    text-align: center;
    margin-bottom: 60px;
}
.message-catch {
    font-family: "Noto Serif JP", serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--lp-color-main);
    line-height: 1.6;
    display: inline-block;
    position: relative;
    text-align: center;
}
.message-catch::before, .message-catch::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--lp-color-accent);
    margin: 0 auto;
}
.message-catch::before { margin-bottom: 25px; }
.message-catch::after { margin-top: 25px; }


/* 写真＆プロフィールエリア */
.message-visual {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    margin-bottom: 80px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.message-img-frame {
    width: 45%;
    position: relative;
    z-index: 1;
}
.message-img {
    border-radius: 4px;
    box-shadow: 20px 20px 0px rgba(31, 58, 95, 0.05);
    width: 100%;
    height: auto;
}

.message-profile {
    width: 45%;
    padding-bottom: 10px;
}
.profile-role {
    font-size: 14px;
    color: var(--lp-color-accent);
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}
.profile-name {
    font-size: 28px;
    color: var(--lp-color-main);
    font-weight: 700;
    font-family: "Noto Serif JP", serif;
    margin-bottom: 20px;
}
.profile-desc {
    font-size: 14px;
    color: var(--lp-color-text-light); /* なければ #666 */
    line-height: 1.8;
}

/* 導入文ボックス */
.lead-box {
    background-color: #F7F9FB;
    padding: 50px 60px;
    border-radius: 8px;
    margin-bottom: 80px;
    border-left: 5px solid var(--lp-color-accent);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.lead-text {
    font-size: 18px;
    font-weight: 500;
    color: var(--lp-color-main);
    line-height: 2;
    margin: 0;
}

/* 本文スタイル */
.message-body {
    max-width: 800px;
    margin: 0 auto;
}
.message-body p {
    font-size: 16px;
    margin-bottom: 35px;
    text-align: justify;
    line-height: 2;
}

/* 強調メッセージ */
.message-highlight {
    font-family: "Noto Serif JP", serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--lp-color-main);
    text-align: center;
    margin: 80px 0 60px;
    padding: 40px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
}

/* マーカー装飾 */
strong.marker {
    background: linear-gradient(transparent 60%, #dcf0f7 60%);
    font-weight: 700;
    color: inherit;
}

/* 署名エリア */
.signature {
    margin-top: 100px;
    text-align: right;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.signature-text {
    font-family: "Noto Serif JP", serif;
}
.sig-role {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}
.sig-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--lp-color-main);
}
.sp-only { display: none; }


/* ==========================================================================
   ■ SP Responsive (スマホ対応)
   ========================================================================== */
@media (max-width: 768px) {
    /* ヘッダー */
    #custom-subpage-header { height: 280px; margin-bottom: 40px; }
    .custom-header-wave svg { height: 50px; }

    /* キャッチコピー */
    .message-catch { font-size: 22px; width: 100%; }
    .message-catch::before, .message-catch::after { width: 30px; }

    /* 写真エリア */
    .message-visual {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }
    .message-img-frame { width: 100%; }
    .message-img { box-shadow: 10px 10px 0px rgba(31, 58, 95, 0.05); }
    
    .message-profile { width: 100%; text-align: left; padding: 0 10px; }
    .profile-name { font-size: 24px; margin-bottom: 15px; }

    /* 導入文 */
    .lead-box { padding: 30px 20px; margin-bottom: 50px; }
    .lead-text { font-size: 16px; line-height: 1.9; }

    /* 本文・強調 */
    .message-body { padding: 0 10px; }
    .message-highlight { font-size: 20px; margin: 60px 0; padding: 30px 0; }
    .message-body p { font-size: 15px; line-height: 1.9; }

    /* 署名 */
    .signature { margin-top: 60px; padding-right: 10px; }
    .sig-name { font-size: 20px; }
    
    .sp-only { display: inline; }
}

/* ==========================================================================
   ■ Service Page Styles (SP Optimized Ver.)
   ========================================================================== */

/* --- 共通設定 --- */
.svc-sec-header {
    text-align: center;
    margin-bottom: 60px;
}
.svc-en-title {
    display: block;
    font-size: 14px;
    color: var(--lp-color-accent);
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: sans-serif;
}
.svc-ja-title {
    font-size: 32px;
    color: var(--lp-color-main);
    font-weight: 700;
    margin: 0;
}
.marker-blue {
    background: linear-gradient(transparent 70%, #dcf0f7 70%);
}


/* --- 1. イントロダクション --- */
.svc-intro {
    padding: 80px 0;
    text-align: center;
}
.svc-main-copy {
    font-size: 36px;
    font-weight: 700;
    color: var(--lp-color-main);
    line-height: 1.6;
    margin-bottom: 40px;
    font-family: "Noto Serif JP", serif;
}
.svc-intro-body p {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
    color: var(--lp-color-text);
}

.svc-target-box {
    background: #F7F9FB;
    border: 1px solid #E1E8ED;
    border-radius: 8px;
    display: inline-block;
    padding: 30px 50px;
    text-align: center;
    max-width: 100%;
}
.svc-target-label {
    display: block;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 15px;
    font-size: 18px;
}
.svc-target-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.svc-target-list li {
    font-size: 20px;
    font-weight: 700;
    color: var(--lp-color-text);
    border-bottom: 2px solid var(--lp-color-accent);
}
.svc-target-note {
    font-size: 13px;
    color: #888;
    margin: 0 !important;
}


/* --- 2. 考え方（Policy） --- */
.svc-policy {
    padding: 100px 0;
    background: #fff;
}
.svc-policy-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* PC: 円形デザイン */
.svc-policy-visual {
    width: 45%;
    display: flex;
    justify-content: center;
}
.svc-policy-message {
    width: 320px;
    height: 320px;
    background: var(--lp-color-main);
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 20px 20px 0 rgba(74, 124, 140, 0.2);
}
.svc-policy-sub {
    font-size: 14px;
    margin-bottom: 10px !important;
    opacity: 0.8;
}
.svc-policy-main {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 !important;
}
.svc-policy-main .highlight {
    font-size: 38px;
    color: #63d2ff;
    display: block;
    margin-top: 5px;
}

/* テキストエリア */
.svc-policy-text { width: 50%; }
.svc-policy-text p {
    line-height: 2;
    margin-bottom: 30px;
    text-align: justify;
}
.svc-policy-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
    list-style: none;
    padding: 0;
}
.svc-policy-points li {
    background: #F7F9FB;
    padding: 15px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.svc-policy-points .num {
    font-size: 24px;
    font-weight: 700;
    color: var(--lp-color-accent);
    opacity: 0.3;
    font-family: sans-serif;
    line-height: 1;
}
.svc-policy-points .text {
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-color-main);
    line-height: 1.3;
}
.svc-policy-conclusion {
    font-weight: 700;
    color: var(--lp-color-main);
    font-size: 18px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}


/* --- 3. サポート内容（Support） --- */
.svc-support {
    padding: 100px 0;
    background-color: #F7F9FB;
}
.svc-support-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.svc-support-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}
.svc-support-card:hover { transform: translateY(-5px); }
.card-icon { font-size: 40px; margin-bottom: 20px; }
.card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 15px;
    line-height: 1.4;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-desc {
    font-size: 14px;
    text-align: left;
    line-height: 1.8;
    color: var(--lp-color-text-light);
    margin: 0;
}


/* --- 4. 徹底した事前育成プログラム（Training） --- */
.svc-training {
    padding: 120px 0;
    background: #fff;
}
.svc-training-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}
.svc-training-title .sub {
    display: block;
    font-size: 16px;
    color: var(--lp-color-accent);
    font-weight: 700;
    margin-bottom: 10px;
}
.svc-training-title .main {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--lp-color-main);
}
.svc-training-lead { font-size: 16px; line-height: 2; }

.svc-program-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.svc-program-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 50px;
}
.svc-program-item.reverse { flex-direction: row-reverse; }

/* 画像まわり */
.program-img {
    width: 48%;
    position: relative;
}
.program-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* ラベル（PCでは画像の外に出す案もあるが、SP統一のため画像内に配置） */
.program-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 15px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.cat-safety { background-color: #e63946; }
.cat-skill { background-color: #4A7C8C; }
.cat-lang { background-color: #D4A373; }
.cat-attitude { background-color: #606c38; }
.cat-life { background-color: #8d99ae; }

.program-info { width: 48%; padding-top: 10px; }
.program-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 20px;
    line-height: 1.4;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.program-desc {
    font-size: 15px;
    line-height: 1.9;
    color: var(--lp-color-text);
    margin: 0;
    text-align: justify;
}


/* --- 5. 流れ（Flow）Timeline Style --- */
.svc-bottom-group {
    background-color: #F7F9FB;
    padding: 100px 0;
}
.svc-flow { margin-bottom: 100px; }
.svc-flow-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}
/* PCは横並び（ただしカード型） */
@media (min-width: 769px) {
    .svc-flow-timeline {
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }
    .svc-flow-step {
        background: #fff;
        padding: 30px 20px;
        width: 24%;
        border-radius: 8px;
        position: relative;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .svc-flow-step:not(:last-child)::after {
        content: "▶";
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        color: #ccc;
        font-size: 14px;
        z-index: 1;
    }
    .step-marker { margin-bottom: 15px; }
    .step-no {
        font-size: 14px;
        font-weight: 700;
        color: var(--lp-color-accent);
        background: #eef3f7;
        padding: 5px 10px;
        border-radius: 50px;
    }
    .step-head {
        font-size: 18px;
        font-weight: 700;
        color: var(--lp-color-main);
        margin-bottom: 10px;
    }
    .step-text { font-size: 13px; line-height: 1.6; margin: 0; }
}


/* --- 6. チェックリスト --- */
.svc-checklist { text-align: center; }
.check-board {
    background: var(--lp-color-main);
    color: #fff;
    padding: 60px;
    border-radius: 12px;
    display: inline-block;
    max-width: 800px;
    width: 100%;
}
.check-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 40px;
}
.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left;
    display: inline-block;
}
.check-list li {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.check-list li::before {
    content: "✔";
    color: #63d2ff;
    margin-right: 15px;
    font-size: 24px;
}
.check-note { font-size: 16px; opacity: 0.8; margin: 0; }


/* ==========================================================================
   ■ SP Responsive (ここから強化)
   ========================================================================== */
@media (max-width: 768px) {
    .sp-only { display: inline; }
    .pc-only { display: none; }
    .svc-sec-header { margin-bottom: 40px; }
    .svc-ja-title { font-size: 24px; }

    /* Intro */
    .svc-intro { padding: 60px 0; }
    .svc-main-copy { font-size: 22px; text-align: left; margin-bottom: 30px; }
    .svc-intro-body p { text-align: justify; font-size: 15px; }
    
    .svc-target-box { padding: 25px 20px; width: 100%; box-sizing: border-box; }
    .svc-target-list { flex-wrap: wrap; gap: 10px 20px; }
    .svc-target-list li { font-size: 16px; }

    /* Policy (大幅変更) */
    .svc-policy { padding: 60px 0; }
    .svc-policy-layout { flex-direction: column; gap: 30px; }
    
    .svc-policy-visual { width: 100%; }
    .svc-policy-message {
        width: 100%;
        height: auto;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(31, 58, 95, 0.2);
    }
    .svc-policy-main { font-size: 22px; }
    .svc-policy-main .highlight { font-size: 32px; display: inline-block; margin-left: 5px; }

    .svc-policy-text { width: 100%; }
    /* ポイントを2列グリッドにして高さを抑える */
    .svc-policy-points { gap: 10px; }
    .svc-policy-points li {
        padding: 10px;
        font-size: 14px;
        flex-direction: column; /* 上下に並べる */
        text-align: center;
        justify-content: center;
        height: 100px; /* 高さ固定で揃える */
    }
    .svc-policy-points .num { font-size: 18px; margin-bottom: 5px; }
    .svc-policy-conclusion { font-size: 16px; margin-top: 20px; }


    /* Support (2列グリッドでコンパクト化) */
    .svc-support { padding: 60px 0; }
    .svc-support-grid {
        grid-template-columns: 1fr 1fr; /* 2列にする */
        gap: 15px;
    }
    .svc-support-card {
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .card-icon { font-size: 32px; margin-bottom: 10px; }
    .card-title {
        font-size: 14px;
        min-height: 40px;
        margin-bottom: 0;
    }
    .card-desc { display: none; } /* SPでは説明文を隠してスッキリさせる */


    /* Training (見やすく整理) */
    .svc-training { padding: 60px 0; }
    .svc-training-intro { margin-bottom: 40px; }
    .svc-training-title .main { font-size: 22px; line-height: 1.4; }
    .svc-training-lead { font-size: 14px; text-align: justify; }

    .svc-program-list { gap: 40px; }
    .svc-program-item, .svc-program-item.reverse {
        flex-direction: column;
        gap: 15px;
        border-bottom: 1px dashed #ddd; /* 区切り線 */
        padding-bottom: 40px;
    }
    .svc-program-item:last-child { border-bottom: none; padding-bottom: 0; }

    .program-img, .program-info { width: 100%; }
    .program-img img { height: 200px; object-fit: cover; } /* 画像の高さを統一 */
    
    .program-name {
        font-size: 18px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-width: 2px;
    }
    .program-desc { font-size: 14px; line-height: 1.8; }


    /* Flow (タイムライン化) */
    .svc-bottom-group { padding: 60px 0; }
    .svc-flow { margin-bottom: 60px; }
    
    .svc-flow-timeline {
        padding-left: 20px; /* 左側に線のスペース */
        border-left: 2px solid #ddd;
    }
    .svc-flow-step {
        background: transparent;
        padding: 0 0 30px 20px;
        width: 100%;
        box-shadow: none;
        position: relative;
    }
    .step-marker {
        position: absolute;
        left: -35px; /* 線の上に配置 */
        top: 0;
        background: #fff;
        padding: 5px 0;
    }
    .step-no {
        background: var(--lp-color-accent);
        color: #fff;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        padding: 0;
        box-shadow: 0 0 0 4px #fff; /* 白フチ */
    }
    .step-head { font-size: 18px; margin-bottom: 5px; }
    .step-text { font-size: 14px; }


    /* Checklist */
    .check-board { padding: 40px 20px; }
    .check-title { font-size: 20px; margin-bottom: 30px; }
    .check-list li { font-size: 15px; align-items: flex-start; }
    .check-list li::before { font-size: 20px; margin-top: -2px; }
}

/* ==========================================================================
   ■ Contact Page Styles (お問い合わせページ専用)
   ========================================================================== */

/* 全体の余白 */
.contact-page-content {
    padding-bottom: 120px;
    background-color: #fff;
}

/* 1. 導入エリア */
.contact-intro {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
}
.intro-text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
}

/* 電話ボックス */
.contact-tel-box {
    background: #F7F9FB;
    border: 2px solid #E1E8ED;
    border-radius: 8px;
    padding: 30px;
    display: inline-block;
    width: 100%;
    max-width: 600px;
}
.tel-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 15px;
    display: block;
}
.tel-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.tel-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    color: var(--lp-color-main);
    line-height: 1;
    transition: opacity 0.3s;
}
.tel-link:hover { opacity: 0.7; }
.tel-link .icon { font-size: 24px; }
.tel-link .num {
    font-size: 32px;
    font-weight: 700;
    font-family: sans-serif;
    letter-spacing: 0.05em;
}
.tel-time {
    font-size: 13px;
    color: #888;
}


/* 2. フォームエリア */
.contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
}

/* フォームの各行 */
.form-item {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
    padding: 30px 0;
}
.form-item:last-of-type {
    border-bottom: 1px solid #eee;
}

/* ラベルエリア（左側） */
.form-label {
    width: 240px;
    padding-right: 20px;
    padding-top: 10px; /* 入力欄と高さを合わせる */
    font-weight: 700;
    color: var(--lp-color-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 必須・任意バッジ */
.label-required {
    background: #e63946; /* 赤系 */
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    vertical-align: middle;
}
.label-optional {
    background: #ccc;
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    vertical-align: middle;
}

/* 入力エリア（右側） */
.form-input {
    flex: 1;
    width: 100%; /* SP対策 */
}

/* Input, Textarea共通スタイル */
.form-input input[type="text"],
.form-input input[type="email"],
.form-input input[type="tel"],
.form-input textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fdfdfd;
    font-size: 16px;
    line-height: 1.5;
    transition: all 0.3s;
    box-sizing: border-box; /* 崩れ防止 */
}

/* フォーカス時のスタイル */
.form-input input:focus,
.form-input textarea:focus {
    border-color: var(--lp-color-accent);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 124, 140, 0.1);
}

.form-input textarea {
    resize: vertical; /* 縦方向のみリサイズ許可 */
    min-height: 200px;
}

.form-note {
    font-size: 13px;
    color: #888;
    margin-top: 8px;
}

/* ラジオボタン */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 10px;
}
.radio-item {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
}
.radio-item input[type="radio"] {
    transform: scale(1.2); /* ラジオボタンを少し大きく */
    accent-color: var(--lp-color-main);
}


/* 送信エリア */
.form-submit-area {
    text-align: center;
    margin-top: 60px;
}

.privacy-check {
    margin-bottom: 30px;
    font-size: 15px;
}
.privacy-check a {
    color: var(--lp-color-accent);
    text-decoration: underline;
}

/* 送信ボタン */
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-color-main); /* ネイビー */
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 20px 80px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(31, 58, 95, 0.2);
}
.submit-btn:hover {
    background: var(--lp-color-accent); /* ホバーで水色 */
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(31, 58, 95, 0.3);
}
.submit-btn .arrow {
    margin-left: 15px;
    font-weight: 400;
}


/* ==========================================================================
   ■ SP Responsive (スマホ対応)
   ========================================================================== */
@media (max-width: 768px) {
    /* 導入エリア */
    .contact-intro { margin-bottom: 40px; }
    .tel-link .num { font-size: 26px; }

    /* フォームエリア */
    .form-item {
        flex-direction: column; /* 縦積みに */
        padding: 20px 0;
    }
    
    /* ラベルを上に */
    .form-label {
        width: 100%;
        padding-right: 0;
        margin-bottom: 10px;
        padding-top: 0;
    }
    
    /* 入力欄を押しやすく */
    .form-input input[type="text"],
    .form-input input[type="email"],
    .form-input input[type="tel"],
    .form-input textarea {
        font-size: 16px; /* iOSでズームされないサイズ */
        padding: 14px;
    }
    
    /* ラジオボタンを縦並びに（押し間違い防止） */
    .radio-group {
        flex-direction: column;
        gap: 15px;
    }
    .radio-item {
        padding: 10px;
        background: #F7F9FB;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 送信ボタン */
    .submit-btn {
        width: 100%; /* 横幅いっぱい */
        padding: 18px;
    }
}

/* ==========================================================================
   ■ Success Modal (送信完了ポップアップ)
   ========================================================================== */

/* モーダル全体（オーバーレイ含む） */
.c-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 最前面 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 初期状態は非表示（フェード用） */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 表示時のクラス */
.c-success-modal.is-active {
    opacity: 1;
    visibility: visible;
}

/* 背景の黒い膜 */
.c-success-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

/* 白いボックス本体 */
.c-success-modal__content {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 480px;
    padding: 50px 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10;
}

/* 表示時にふわっと浮き上がるアニメーション */
.c-success-modal.is-active .c-success-modal__content {
    transform: translateY(0);
}

/* チェックアイコン */
.c-success-modal__icon {
    width: 80px;
    height: 80px;
    background: #e6f7ff; /* 薄い水色 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}
.c-success-modal__icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--lp-color-accent); /* ブランドカラーの水色 */
}

/* タイトル */
.c-success-modal__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 20px;
}

/* テキスト */
.c-success-modal__text {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 閉じるボタン */
.c-success-modal__close-btn {
    display: inline-block;
    background: var(--lp-color-main);
    color: #fff;
    border: none;
    padding: 15px 50px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
    text-decoration: none;
    line-height: 1;
}
.c-success-modal__close-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* スマホ調整 */
@media (max-width: 768px) {
    .c-success-modal__content {
        padding: 40px 25px;
        width: 85%;
    }
    .c-success-modal__title {
        font-size: 20px;
    }
    .c-success-modal__text {
        font-size: 14px;
    }
    .c-success-modal__close-btn {
        width: 100%; /* スマホではボタンを押しやすく最大幅に */
        padding: 16px;
    }
}

/* ==========================================================================
   ■ Privacy Policy Page Styles (動的でリッチな規約ページ)
   ========================================================================== */

/* 全体のラッパー */
.privacy-page-wrapper {
    padding-bottom: 120px;
    background-color: #f5f7fa; /* ほんのりグレーで書類感を出す */
}

/* 1. ヘッダーエリア */
.privacy-header {
    text-align: center;
    padding: 60px 0 40px;
}
.privacy-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin-bottom: 20px;
    font-family: "Noto Serif JP", serif; /* 明朝体で厳格に */
}
.privacy-meta {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.meta-label {
    background: var(--lp-color-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 10px;
}
.privacy-meta time {
    font-family: sans-serif;
    font-weight: 500;
    color: #666;
    letter-spacing: 0.05em;
}

/* 2. 序文 */
.privacy-intro {
    max-width: 800px;
    margin: 0 auto 50px;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border-left: 5px solid var(--lp-color-main);
}
.privacy-intro p {
    margin: 0;
    line-height: 2;
    text-align: justify;
    font-size: 15px;
}


/* 3. 条文リスト（アコーディオン） */
.privacy-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* アコーディオンの箱 */
.privacy-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
/* 開いている時の強調 */
.privacy-item[open] {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: rgba(74, 124, 140, 0.2);
}

/* 見出し部分（クリックエリア） */
.privacy-summary {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    list-style: none; /* デフォルトの三角を消す */
    position: relative;
    transition: background 0.2s;
}
.privacy-summary::-webkit-details-marker {
    display: none; /* Safari用 */
}
.privacy-summary:hover {
    background-color: #fafbfc;
}

/* 第◯条のバッジ */
.privacy-summary .num {
    font-size: 12px;
    font-weight: 700;
    color: var(--lp-color-accent);
    background: #eef3f7;
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 15px;
    white-space: nowrap;
}
/* 条文タイトル */
.privacy-summary .head {
    font-size: 16px;
    font-weight: 700;
    color: var(--lp-color-main);
    flex-grow: 1;
}
/* プラス・マイナスアイコン */
.privacy-summary .icon {
    width: 20px;
    height: 20px;
    position: relative;
}
.privacy-summary .icon::before,
.privacy-summary .icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ccc;
    transition: transform 0.3s ease;
}
.privacy-summary .icon::before { width: 14px; height: 2px; } /* 横棒 */
.privacy-summary .icon::after { width: 2px; height: 14px; } /* 縦棒 */

/* 開いている時は縦棒を回転させて横棒にする（マイナス化） */
.privacy-item[open] .privacy-summary .icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 本文エリア */
.privacy-body {
    padding: 0 25px 30px;
    color: #444;
    line-height: 1.9;
    font-size: 15px;
    text-align: justify;
    animation: fadeIn 0.4s ease;
}
.privacy-body ul, .privacy-body ol {
    background: #f9f9f9;
    padding: 20px 20px 20px 40px;
    border-radius: 4px;
    margin: 20px 0 0;
}
.privacy-body li {
    margin-bottom: 8px;
}
.privacy-body li:last-child { margin-bottom: 0; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* 4. 事業者情報ボックス */
.privacy-contact-box {
    margin-top: 20px;
    border-top: 1px dashed #ddd;
    padding-top: 20px;
}
.pcb-row {
    display: flex;
    margin-bottom: 12px;
    font-size: 15px;
}
.pcb-label {
    width: 120px;
    font-weight: 700;
    color: var(--lp-color-text-sub);
    flex-shrink: 0;
}
.pcb-text {
    color: var(--lp-color-main);
    font-weight: 500;
}
.pcb-text a {
    color: var(--lp-color-accent);
    text-decoration: underline;
}


/* 5. 信頼の証（フッターあしらい） */
.privacy-seal {
    text-align: center;
    margin-top: 60px;
    opacity: 0.6;
}
.privacy-seal p {
    font-family: "Noto Serif JP", serif;
    font-size: 14px;
    color: var(--lp-color-main);
    letter-spacing: 0.1em;
}


/* ==========================================================================
   ■ SP Responsive (スマホ対応)
   ========================================================================== */
@media (max-width: 768px) {
    .privacy-header { padding: 40px 0 30px; }
    .privacy-title { font-size: 24px; }
    
    .privacy-intro { padding: 25px; margin-bottom: 30px; }
    
    .privacy-summary { padding: 15px 20px; }
    .privacy-summary .num { font-size: 11px; margin-right: 10px; padding: 3px 6px; }
    .privacy-summary .head { font-size: 15px; }
    
    .privacy-body { padding: 0 20px 25px; font-size: 14px; }
    
    .pcb-row { flex-direction: column; margin-bottom: 15px; }
    .pcb-label { width: 100%; font-size: 12px; margin-bottom: 5px; }
    .pcb-text { font-size: 14px; }
}

/* ==========================================================================
   ■ Images & Merit Tags Fix (画像統一とメリット強調)
   ========================================================================== */

/* 1. 画像の縦横比を統一する設定 */
.program-img {
    width: 48%;
    position: relative;
    overflow: hidden; /* 角丸からはみ出ないように */
    border-radius: 8px; /* 親要素にも角丸 */
}

.program-img img {
    width: 100%;
    /* ▼▼▼ ここで高さを固定して比率を統一 ▼▼▼ */
    height: 250px;       /* PCでの高さ */
    object-fit: cover;   /* 画像をトリミングして枠いっぱいに表示 */
    /* ▲▲▲ -------------------------------- ▲▲▲ */
    
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

/* スマホでは高さを少し低くする */
@media (max-width: 768px) {
    .program-img { width: 100%; }
    .program-img img {
        height: 200px; /* スマホでの高さ */
    }
}


/* 2. メリット強調バッジのデザイン */
.program-merit {
    display: inline-block;
    background: #e6f7ff; /* 薄い水色背景 */
    color: var(--lp-color-main);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    border-left: 3px solid var(--lp-color-accent); /* 左にアクセントライン */
    line-height: 1.4;
    letter-spacing: 0.05em;
}

/* 3. 小見出し（POLICY, SUPPORTの上） */
.svc-benefit-sub {
    display: block;
    font-size: 15px;
    color: var(--lp-color-accent);
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}
@media (max-width: 768px) {
    .svc-benefit-sub { font-size: 13px; }
}

/* 4. マーカー（青） */
.marker-blue {
    background: linear-gradient(transparent 70%, #dcf0f7 70%);
    font-weight: 700;
}

/* ==========================================================================
   ■ Corporate Info Section (企業情報セクション)
   ========================================================================== */

/* エリア全体の余白 */
.company-section-wrapper {
    margin-top: 100px;
    padding-top: 80px;
    border-top: 1px solid #eee;
}

/* 共通見出し */
.c-sec-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--lp-color-main);
    text-align: center;
    margin-bottom: 50px;
    font-family: "Noto Serif JP", serif;
    position: relative;
}
.c-sec-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: var(--lp-color-accent);
    margin: 15px auto 0;
}


/* --------------------------------------------------
   1. 企業理念 (Philosophy)
   -------------------------------------------------- */
.company-philosophy {
    margin-bottom: 100px;
    text-align: center;
}
.philosophy-box {
    background: #F7F9FB;
    padding: 50px 20px;
    border-radius: 8px;
    display: inline-block;
    width: 100%;
    max-width: 800px;
}
.philosophy-main {
    font-size: 32px;
    font-weight: 700;
    color: var(--lp-color-main);
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    font-family: "Noto Serif JP", serif;
}
.philosophy-sub {
    font-size: 16px;
    line-height: 2;
    color: var(--lp-color-text);
}


/* --------------------------------------------------
   2. 事業内容 (Business)
   -------------------------------------------------- */
.company-business {
    margin-bottom: 100px;
}
.business-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* カードスタイル */
.business-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s;
}
.business-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
/* 1つ目の「有料職業紹介」は横幅いっぱいに */
.business-card.-wide {
    grid-column: span 2;
    background: #fdfdfd;
    border-color: var(--lp-color-accent); /* 少し強調 */
}

/* タイトルまわり */
.biz-head {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
}
.biz-icon { font-size: 28px; }
.biz-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--lp-color-main);
    margin: 0;
}
.biz-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 0;
    text-align: justify;
}

/* 対象人材リスト（有料職業紹介の中） */
.biz-target-area {
    margin-top: 20px;
    background: #F7F9FB;
    padding: 20px;
    border-radius: 4px;
}
.biz-target-label {
    display: block;
    font-weight: 700;
    color: var(--lp-color-accent);
    font-size: 13px;
    margin-bottom: 10px;
}
.biz-target-list {
    margin: 0;
    padding-left: 20px;
}
.biz-target-list li {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 700;
    color: #444;
}
.biz-target-list .note {
    font-weight: normal;
    font-size: 12px;
    color: #888;
}


/* --------------------------------------------------
   3. 会社概要 (Outline)
   -------------------------------------------------- */
.company-outline {
    max-width: 800px;
    margin: 0 auto;
}
.outline-list {
    border-top: 1px solid #ddd;
    margin-bottom: 50px;
}
.outline-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.outline-row dt {
    width: 30%;
    background-color: #F7F9FB;
    padding: 20px;
    font-weight: 700;
    color: var(--lp-color-main);
    display: flex;
    align-items: center;
}
.outline-row dd {
    width: 70%;
    padding: 20px;
    color: #333;
    line-height: 1.8;
}
.outline-row a {
    color: var(--lp-color-accent);
    text-decoration: underline;
}

/* 許可番号バッジ */
.license-tag {
    display: inline-block;
    background: #eee;
    color: #555;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
    vertical-align: middle;
}

/* Google Mapボタン */
.map-link-btn {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    color: var(--lp-color-accent) !important;
    border: 1px solid var(--lp-color-accent);
    padding: 2px 8px;
    border-radius: 4px;
    text-decoration: none !important;
}

/* マップフレーム */
.company-map-frame {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


/* --------------------------------------------------
   SP Responsive (スマホ対応)
   -------------------------------------------------- */
@media (max-width: 768px) {
    .company-section-wrapper { margin-top: 60px; padding-top: 60px; }
    
    /* 理念 */
    .philosophy-main { font-size: 24px; }
    
    /* 事業内容 */
    .business-grid { grid-template-columns: 1fr; }
    .business-card.-wide { grid-column: span 1; }
    
    /* 会社概要 */
    .outline-row { flex-direction: column; }
    .outline-row dt { width: 100%; padding: 10px 15px; border-bottom: 1px dashed #eee; font-size: 14px; }
    .outline-row dd { width: 100%; padding: 15px; font-size: 14px; }
    
    .map-link-btn { margin: 5px 0 0 0; display: block; width: fit-content; }
}

/* ==========================================================================
   ■ Ultra Rich Footer Styles (全書き換え)
   ========================================================================== */

/* --------------------------------------------------
   1. フッター全体のベース上書き
   -------------------------------------------------- */
/* Arkheのフッターエリア全体を強制的にネイビーにする */
.l-footer {
    background-color: var(--lp-color-main) !important; /* メインカラー(紺) */
    color: #fff !important;
    padding-top: 80px !important;
    padding-bottom: 20px !important;
    position: relative;
    border-top: 5px solid var(--lp-color-accent) !important; /* 上部に水色のアクセント線 */
}

/* リンク色も白に強制変更 */
.l-footer a {
    color: #fff !important;
    text-decoration: none;
    transition: opacity 0.3s;
}
.l-footer a:hover {
    opacity: 0.7;
}


/* ==========================================================================
   ■ Ultra Rich Footer Styles (中央寄せ・ロゴ修正版)
   ========================================================================== */

/* --------------------------------------------------
   1. フッター全体のベース上書き
   -------------------------------------------------- */
/* Arkheのフッターエリア全体を強制的にネイビーにする */
.l-footer {
    background-color: var(--lp-color-main) !important; /* メインカラー(紺) */
    color: #fff !important;
    padding-top: 80px !important;
    padding-bottom: 20px !important;
    position: relative;
    border-top: 5px solid var(--lp-color-accent) !important;
}

/* ★PCでの左右の寄りすぎを解消（中央寄せ）★ */
@media (min-width: 1024px) {
    /* ウィジェットエリアの幅を制限して中央に寄せる */
    .l-footer__body {
        max-width: 1100px !important; /* コンテンツ幅を制限 */
        margin: 0 auto !important;    /* 中央寄せ */
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* リンク色も白に強制変更 */
.l-footer a {
    color: #fff !important;
    text-decoration: none;
    transition: opacity 0.3s;
}
.l-footer a:hover {
    opacity: 0.7;
}


/* --------------------------------------------------
   2. 左カラム：会社情報・信頼性エリア
   -------------------------------------------------- */
.f-logo-wrap {
    margin-bottom: 25px;
}
/* 白ロゴ用スタイル（背景透過） */
.f-logo-link img {
    display: block;
    width: 200px; /* 少し大きめに調整 */
    height: auto;
    /* 透過ロゴなので背景色は不要 */
}

.f-corp-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.f-address {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    opacity: 0.9;
}

.f-contact-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    font-family: sans-serif;
}
.f-tel {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}
.f-tel .icon { font-size: 18px; }
.f-fax {
    font-size: 14px;
    opacity: 0.7;
}

/* 許認可バッジ */
.f-license-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 15px;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
}
.f-license-badge dl {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 12px;
}
.f-license-badge dt {
    background: #fff;
    color: var(--lp-color-main);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 2px;
    margin-right: 10px;
    min-width: 80px;
    text-align: center;
}
.f-license-badge dd {
    margin: 0;
    font-family: sans-serif;
    letter-spacing: 0.05em;
}


/* --------------------------------------------------
   3. 右カラム：ナビゲーション
   -------------------------------------------------- */
.f-widget-right {
    height: 100%;
    display: flex;
    align-items: center; /* 縦中央 */
    justify-content: flex-end; /* 右寄せ */
}

.f-nav-grid {
    text-align: right;
}

/* メインメニュー */
.f-nav-main {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.f-nav-main li a {
    font-size: 16px;
    font-weight: 700;
    position: relative;
    padding-left: 20px;
}
.f-nav-main li a::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--lp-color-accent);
}

/* お問い合わせボタン */
.f-nav-main li a.btn-contact {
    display: inline-block;
    background: var(--lp-color-accent);
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 50px;
    margin-top: 10px;
    transition: transform 0.3s;
}
.f-nav-main li a.btn-contact::before { content: none; }
.f-nav-main li a.btn-contact:hover {
    background: #fff;
    color: var(--lp-color-main) !important;
    transform: translateY(-3px);
}

/* サブメニュー */
.f-nav-sub {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}
.f-nav-sub li a {
    font-size: 12px;
    opacity: 0.6;
}
.f-nav-sub li a:hover { opacity: 1; }


/* --------------------------------------------------
   4. 最下部コピーライトエリア
   -------------------------------------------------- */
.l-footer__copyright {
    margin-top: 60px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding-top: 30px !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.5) !important;
    text-align: center;
}


/* --------------------------------------------------
   5. SP Responsive (スマホ対応)
   -------------------------------------------------- */
@media (max-width: 768px) {
    .l-footer {
        padding-top: 60px !important;
        text-align: center;
    }
    
    /* 左ウィジェット */
    .f-logo-link { margin: 0 auto; }
    .f-contact-info {
        justify-content: center;
        flex-direction: column;
        gap: 5px;
    }
    .f-license-badge {
        display: inline-block;
        text-align: left;
        width: 100%;
        max-width: 300px;
    }

    /* 右ウィジェット */
    .f-widget-right {
        justify-content: center;
        margin-top: 50px;
        padding-top: 40px;
        border-top: 1px dashed rgba(255,255,255,0.2);
    }
    .f-nav-grid { text-align: center; }
    
    .f-nav-main {
        gap: 20px;
        margin-bottom: 30px;
    }
    .f-nav-main li a { padding-left: 0; }
    .f-nav-main li a::before { content: none; }

    .f-nav-sub {
        justify-content: center;
        flex-direction: column;
        gap: 15px;
    }
}