/* --- Base Styles --- */
:root {
    /* 洗練されたテックカラーパレット */
    --primary-color: #0b1c3c; /* 深いネイビー */
    --accent-color: #00d2ff; /* 鮮やかなシアン */
    --accent-gradient: linear-gradient(135deg, #0061ff 0%, #60efff 100%);
    --text-color: #333;
    --text-light: #8892b0;
    --bg-light: #f8faff;
    --white: #fff;
    --font-base: "Noto Sans JP", "Helvetica Neue", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--text-color);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    background-color: var(--white);
    letter-spacing: 0.04em;
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; padding: 0; margin: 0; }

/* --- Layout Utility --- */
.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 40px;
}

.section { padding: 100px 0; }

.section-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
    color: var(--primary-color);
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-gradient);
    margin: 20px auto 0;
    border-radius: 3px;
}

.section-title span {
    display: block;
    font-size: 1rem;
    color: var(--text-light);
    margin-top: 15px;
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* --- Header --- */
header {
    background: rgba(255, 255, 255, 0.9); /* 少し透過度を上げる */
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

/* ロゴ画像*/
.logo {
    display: flex;
    align-items: center;
    height: 100%; /* ヘッダーの高さに合わせる */
    text-decoration: none;
    padding-left: 20px; /* 左端の余白（お好みで調整） */
}

.logo img {
    height: 45px; /* ロゴの高さ（ヘッダーが80pxなので40-50pxが適正） */
    width: auto;  /* 横幅は比率を維持して自動調整 */
    display: block;
    
    /* スマホなどで少し縮小したい場合は以下のように調整可能です */
    /* transition: height 0.3s ease; */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .logo img {
        height: 35px; /* スマホでは少し小さくする */
    }
    .logo {
        padding-left: 15px;
    }
}

.nav-menu { display: flex; gap: 40px; }
.nav-menu a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #0061ff;
    transition: width 0.3s;
}
.nav-menu a:hover::after { width: 100%; }

/* =========================================
   Hero Section 
   ========================================= */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 800px; /* 修正: 700pxから増やして重なりを防止 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    overflow: hidden;
    color: #333;
    z-index: 1;
    
    /* ▼ 追加: コンテンツを視覚的に上にずらす設定 */
    padding-bottom: 0px; 
    box-sizing: border-box;
}
/* --- 背景コンテナ --- */
.hero-bg-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* --- 動く光のオーブ --- */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 1;
    will-change: transform;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 70vh;
    height: 70vh;
    background: radial-gradient(circle, rgba(0, 97, 255, 0.6) 0%, rgba(0, 97, 255, 0) 70%);
    animation: blobFloat1 25s infinite ease-in-out;
}

.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 80vh;
    height: 80vh;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.6) 0%, rgba(0, 210, 255, 0) 70%);
    animation: blobFloat2 30s infinite ease-in-out;
}

@keyframes blobFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, -80px) scale(1.1); }
}

@keyframes blobFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-60px, 40px) scale(0.95); }
}

/* --- コンテンツエリア --- */
.hero-container {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-content {
    perspective: 1000px; /* 3D効果用 */
}

/* ========================================
   ヒーローエリアの英字ラベル (Our Philosophy) - 線付きver
   ======================================== */
.hero-eyebrow {
    /* 配置設定 */
    display: flex;             /* 横並びにする */
    align-items: center;       /* 上下中央揃え */
    justify-content: center;   /* 左右中央揃え */
    gap: 20px;                 /* 線と文字の間隔 */
    
    /* フォント設定 */
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0061ff;            /* 文字色 */
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 30px;       /* 下の日本語見出しとの距離 */
    
    /* 本体のアニメーション（フワッと浮き上がる） */
    opacity: 0;
    transform: translateY(10px);
    animation: eyebrowFadeIn 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation-delay: 0.2s;     /* 少しだけ待ってから開始 */
}

/* --- 左右のライン設定 --- */
.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    display: block;
    height: 1px;               /* 線の太さ（細くスタイリッシュに） */
    width: 40px;               /* 線の長さ */
    background: #0061ff;       /* 線の色 */
    
    /* アニメーション用：最初は幅0にしておく */
    transform: scaleX(0);
    transition: transform 0.8s ease;
    animation: lineGrow 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    animation-delay: 0.6s;     /* 文字が出た後に線を伸ばす */
}

/* 左の線：右（文字側）から左へ伸びる */
.hero-eyebrow::before {
    /* グラデーション：左(透明) ← 右(青) */
    background: linear-gradient(to left, #0061ff, transparent);
    transform-origin: right; 
}

/* 右の線：左（文字側）から右へ伸びる */
.hero-eyebrow::after {
    /* グラデーション：左(青) → 右(透明) */
    background: linear-gradient(to right, #0061ff, transparent);
    transform-origin: left;
}

/* --- アニメーション定義 --- */

/* 本体フェードイン */
@keyframes eyebrowFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 線が伸びる動き */
@keyframes lineGrow {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* スマホ対応 */
@media (max-width: 768px) {
    .hero-eyebrow {
        font-size: 0.75rem;
        gap: 15px; /* スマホでは間隔を少し狭く */
        margin-bottom: 20px;
    }
    .hero-eyebrow::before,
    .hero-eyebrow::after {
        width: 25px; /* スマホでは線を少し短く */
    }
}

/* ========================================
   見出しアニメーション（特徴的な演出）
   ======================================== */

.hero h1 {
    /* フォント設定：少しウェイトを落として知的に */
    font-size: 3.5rem;          /* 大きすぎず、上品なサイズ感 */
    line-height: 1.6;           /* 行間を広げて「余裕」を演出 */
    margin-bottom: 40px;
    font-weight: 700;           /* 800から700へ（太すぎない） */
    letter-spacing: 0.08em;     /* 文字の間隔を少し広げる */
    color: #0b1c3c;
    
    /* 日本語の文字詰め（プロっぽい仕上がり） */
    font-feature-settings: "palt"; 
}

/* 各行のラッパー */
.hero-line {
    display: inline-block;
    /* 改行しても自然に見えるよう調整 */
}

/* 一文字ずつのスタイル（初期状態） */
.hero-line .char {
    display: inline-block;
    opacity: 0;
    /* 初期位置：少し下、ぼかし強め */
    transform: translateY(20px) scale(0.95);
    filter: blur(10px);
    
    /* アニメーション：ゆっくりと優雅に */
    animation: refinedReveal 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 1行目: テクノロジーで、 */
.hero-line:nth-child(1) .char:nth-child(1) { animation-delay: 0.6s; }
.hero-line:nth-child(1) .char:nth-child(2) { animation-delay: 0.64s; }
.hero-line:nth-child(1) .char:nth-child(3) { animation-delay: 0.68s; }
.hero-line:nth-child(1) .char:nth-child(4) { animation-delay: 0.72s; }
.hero-line:nth-child(1) .char:nth-child(5) { animation-delay: 0.76s; }
.hero-line:nth-child(1) .char:nth-child(6) { animation-delay: 0.80s; }
.hero-line:nth-child(1) .char:nth-child(7) { animation-delay: 0.84s; }
.hero-line:nth-child(1) .char:nth-child(8) { animation-delay: 0.88s; }

/* 2行目: 会計の */
.hero-line:nth-child(3) .char:nth-child(1) { animation-delay: 1.2s; }
.hero-line:nth-child(3) .char:nth-child(2) { animation-delay: 1.24s; }
.hero-line:nth-child(3) .char:nth-child(3) { animation-delay: 1.28s; }

/* 3行目: 「未来」（強調パート） */
.text-gradient-wrapper {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    filter: blur(8px);
    
    /* ふわっと拡大して定着する動き */
    animation: futureGlow 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 1.6s; /* 会計の、の直後 */
}

/* 4行目: を創る。 */
.hero-line:nth-child(5) .char:nth-child(1) { animation-delay: 2.0s; } /* 未来が出るのを待つ */
.hero-line:nth-child(5) .char:nth-child(2) { animation-delay: 2.04s; }
.hero-line:nth-child(5) .char:nth-child(3) { animation-delay: 2.08s; }
.hero-line:nth-child(5) .char:nth-child(4) { animation-delay: 2.12s; }



/* 1. 通常文字の出現（霧が晴れるように） */
@keyframes refinedReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
/* 2. 「未来」の出現（発光しながら浮かび上がる） */
@keyframes futureGlow {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
        filter: blur(8px);
    }

    50% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1.0); /* 最終的に1.0倍で落ち着く */
        filter: blur(0);
    }
}

.text-gradient {
    /* 高級感のあるディープブルー〜シアンのグラデーション */
    background: linear-gradient(135deg, #0044cc 0%, #00d2ff 60%, #0044cc 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* ほんのり光彩を放つ（上品な輝き） */
    filter: drop-shadow(0 0 15px rgba(0, 210, 255, 0.3));
    
    display: inline-block;
    animation: shineText 6s linear infinite; /* ゆっくりと光が流れる */
}

@keyframes shineText {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}



/* ========================================
   説明文アニメーション（段階的フェードイン）
   ======================================== */

.hero-description {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 50px;
    line-height: 2;
    font-weight: 500;
}

.desc-line {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    animation: descFadeIn 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* nth-of-type()を使用（同じタグ種類の中でカウント） */
.desc-line:nth-of-type(1) {
    animation-delay: 2.5s;
}

.desc-line:nth-of-type(2) {
    animation-delay: 2.8s;
}

@keyframes descFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ボタンアニメーション（遅延表示）
   ======================================== */

/* より詳細度の高いセレクタで.btnを上書き */
section.hero .hero-actions {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(15px);
    animation: actionsFadeIn 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 3.1s forwards; 
}

@keyframes actionsFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section.hero .hero-btn {
    position: relative;
    padding: 15px 65px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #0061ff 0%, #00d2ff 100%);
    color: #fff;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 8px 25px rgba(0, 97, 255, 0.25);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section.hero .btn-text {
    position: relative;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section.hero .hero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 97, 255, 0.35);
}

section.hero .hero-btn:hover .btn-text {
    transform: translateY(-1px);
}



/* ========================================
   スクロールダウン
   ======================================== */

.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #0b1c3c;
    opacity: 0;
    animation: scrollFadeIn 1s ease-out 4s forwards, scrollBounce 2s ease-in-out 3.5s infinite;
}

@keyframes scrollFadeIn {
    to { opacity: 0.6; }
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

.scroll-down span {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    text-transform: uppercase;
}

.scroll-line {
    width: 2px;
    height: 60px;
    background: linear-gradient(180deg, transparent, rgba(0, 97, 255, 0.3));
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(180deg, #0061ff, #00d2ff);
    animation: scrollDrop 2.5s ease-in-out infinite;
    border-radius: 2px;
}

@keyframes scrollDrop {
    0% { top: -35%; opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ========================================
   スマホ対応
   ======================================== */

@media (max-width: 768px) {
    .hero {
        min-height: 600px;
    }
    
    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 25px;
    }
    
    .hero-description {
        font-size: 1rem;
        margin-bottom: 35px;
    }
    
    .hero-btn {
        padding: 16px 50px;
        font-size: 1rem;
    }
    
    .blob-1, .blob-2 {
        width: 50vh;
        height: 50vh;
        filter: blur(80px);
    }
}

/* =========================================
   MVV Section (Typography Style)
   ========================================= */

#mvv {
    background-color: #fff;
    padding: 100px 0;
}

/* 左右並びのレイアウトコンテナ */
.mvv-container {
    display: flex;
    justify-content: center;
    align-items: stretch; /* 高さを揃える */
    max-width: 900px;
    margin: 0 auto;
    gap: 0; /* 隙間はパディングで調整 */
}

/* 各ブロック（MISSION / VISION） */
.mvv-block {
    flex: 1; /* 1:1の幅 */
    text-align: center;
    padding: 20px 40px; /* 横の余白を確保 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 中央の縦線（セパレーター） */
.mvv-separator {
    width: 1px;
    background: linear-gradient(to bottom, transparent, #e1e5ee 20%, #e1e5ee 80%, transparent);
    margin: 0 10px;
}

/* --- テキストスタイル --- */

/* ラベル (MISSION / VISION) */
.mvv-label-text {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0061ff; /* ブランドカラーでアクセント */
    letter-spacing: 0.2em;
    margin-bottom: 30px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    position: relative;
}

/* ラベルの下に短い線を入れる */
.mvv-label-text::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #0061ff;
    margin: 10px auto 0; /* ラベルの下中央 */
}

/* 日本語メインテキスト */
.mvv-jp-text {
    font-size: 1.5rem;
    line-height: 1.8;
    color: #0b1c3c;
    font-weight: 700;
    margin: 0 0 30px 0;
    font-feature-settings: "palt"; /* 文字詰め */
}

/* 英語サブテキスト */
.mvv-en-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #8892b0; /* 薄いグレーで控えめに */
    font-family: "Helvetica Neue", Arial, sans-serif;
    margin: 0;
}

/* --- スマホ対応 (Responsive) --- */
@media (max-width: 768px) {
    .mvv-container {
        flex-direction: column; /* 縦並び */
        gap: 60px; /* 上下の間隔 */
    }

    /* スマホでは縦線を横線に変更 */
    .mvv-separator {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, #e1e5ee 20%, #e1e5ee 80%, transparent);
        margin: 0;
        display: none; /* もしくは非表示にして余白だけで区切る */
    }
    
    .mvv-block {
        padding: 0 20px;
    }

    .mvv-jp-text {
        font-size: 1.3rem;
    }
}

/* --- CPA Space Special Feature (Compact & Clean) --- */
.cpaspace-feature {
    width: 100%;
    background: #fff;
    border: 1px solid #e1e5ee;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.cpaspace-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 97, 255, 0.1);
    border-color: #cce0ff;
}

.cpaspace-inner {
    display: flex;
    flex-direction: row;
    min-height: 300px;
}

/* 左側：テキストエリア */
.cpaspace-text-side {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

/* 右側：画像エリア */
.cpaspace-img-side {
    flex: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    margin: 20px 20px 20px 0;
    min-height: 250px;
}

/* テキストスタイル調整 */
.cpaspace-header-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.cpaspace-logo-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: 0.05em;
}

.cpaspace-headline {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--primary-color);
    margin: 0 0 15px 0;
}

.cpaspace-sub {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 25px;
}

/* アクションエリア */
.cpaspace-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.cpaspace-btn {
    background: var(--primary-color);
    color: #fff;
    padding: 10px 25px;
    font-size: 0.9rem;
    border-radius: 6px;
    box-shadow: none;
}

.cpaspace-btn:hover {
    /* background: #004494; */
    transform: none;
    opacity: 0.9;
}

/* --- Service Section (Card Link Version) --- */
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* カード全体をリンクにするための設定 */
a.service-item {
    text-decoration: none; /* リンクの下線を消す */
    color: inherit; /* 文字色を継承（青くしない） */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 40px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer; /* カーソルを指マークに */
}

a.service-item:hover {
    box-shadow: 0 15px 30px rgba(0, 97, 255, 0.15);
    transform: translateY(-10px);
    border-color: transparent;
}

/* コンテンツラッパー */
.service-content-wrapper {
    margin-bottom: 10px;
}

.service-item h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-weight: 700;
}

.service-item .sub-title {
    font-size: 0.8rem;
    color: #0061ff;
    margin-bottom: 15px;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.service-desc {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.8;
}

/*  View More テキストのデザイン */
.service-link-text {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0061ff; /* アクセントカラー */
    width: fit-content;
    margin-top: auto;
    transition: all 0.3s ease;
}

/* カードホバー時に、View Moreテキストも少し動かす */
a.service-item:hover .service-link-text {
    color: #004494;
    transform: translateX(5px); /* 右に少し動く */
}

/* ▼▼▼ View More リンクのデザイン ▼▼▼ */
.service-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0061ff; /* アクセントカラー */
    text-decoration: none;
    width: fit-content;
    margin-top: auto; /* Flexbox内で下端に配置 */
    transition: all 0.3s ease;
}

.service-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.service-link:hover {
    color: #004494;
}

.service-link:hover::after {
    transform: translateX(5px); /* 矢印が右に動くアニメーション */
}

/* --- Company Table (Simple & Clean) --- */
.company-table {
    width: 100%;
    border-collapse: collapse; /* シンプルな線にするためcollapseを採用 */
    margin-top: 20px;
    border-top: 1px solid #ddd; /* 一番上の線 */
}

.company-table th, 
.company-table td {
    padding: 24px;
    border-bottom: 1px solid #ddd; /* 行ごとの区切り線 */
    text-align: left;
    vertical-align: top; /* 上揃え */
    font-size: 0.95rem;
}

/* 左側の見出しセル */
.company-table th {
    width: 25%;
    background-color: #f9f9f9; /* ごく薄いグレーで区別 */
    color: #333;
    font-weight: 700;
    white-space: nowrap; /* 見出しの折り返し防止 */
}

/* 右側の内容セル */
.company-table td {
    width: 75%;
    color: #333;
    line-height: 1.8;
}

/* --- 法人情報のレイアウト --- */
.entity-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.entity-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0061ff; /* ここだけブランドカラーで少し強調 */
    margin-bottom: 2px;
}

.entity-address {
    font-size: 1rem;
}

.entity-date {
    font-size: 0.9rem;
    color: #666; /* 補足情報は少し薄く */
}

/* --- 事業内容リスト --- */
.business-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.business-list li {
    margin-bottom: 8px;
    padding-left: 0;
}
.business-list li:last-child {
    margin-bottom: 0;
}

/* --- スマホ対応 (Responsive) --- */
@media (max-width: 768px) {
    .company-table, 
    .company-table tbody, 
    .company-table tr, 
    .company-table th, 
    .company-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    
    .company-table th {
        background: transparent; /* スマホでは背景なしですっきり */
        padding: 20px 20px 5px 20px;
        color: #000000;
        border-bottom: none;
    }
    
    .company-table td {
        padding: 0 20px 20px 20px;
    }
    
    /* 事業内容などテキストが長い場合の調整 */
    .business-list li {
        margin-bottom: 15px;
    }
}

/* --- Members Section (Updated) --- */
.member-grid { 
    display: flex; 
    gap: 30px; 
    /* 折り返しを禁止して1行にする */
    flex-wrap: nowrap; 
    /* 横スクロールを有効化 */
    overflow-x: auto; 
    /* スクロール時に左端が切れないよう左揃えにする */
    justify-content: flex-start;
    
    /* スクロールバーや影が切れないように余白を少し広めに取る */
    padding: 20px 10px 40px; 
    
    /* スマホでの慣性スクロールを有効化 */
    -webkit-overflow-scrolling: touch; 
}

/* スクロールバーを少しスタイリッシュにする（Chrome/Safari/Edge） */
.member-grid::-webkit-scrollbar {
    height: 8px;
}
.member-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.member-grid::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.member-card {
    /* 3.2枚分を表示する計算式 */
    flex: 0 0 calc((100% - 200px) / 3);
    max-width: none; 
    
    text-align: center;
    padding: 40px 20px 30px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    
    /* カード内の要素を縦方向に中央揃え・配置するためのFlex指定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-between; を使うと高さが揃いやすいですが今回はなくてもOK */
}
.member-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 97, 255, 0.1);
    border-color: #cce0ff;
}

.member-img {
    width: 120px;
    height: 120px;
    background-color: #eef2f5; /* 画像読み込み前の背景色 */
    border-radius: 50%;
    margin: 0 auto 20px;
    background-size: cover;
    background-position: center;
}

.member-img-1 {
    background-image: url('img/masaki_kitagawa.jpeg');
}

.member-img-2 {
    background-image: url('img/kenji_hanazawa.png');
}

.member-img-3 {
    background-image: url('img/rintaro_takase.jpeg');
}
.member-card h3 { 
    margin: 10px 0 5px; 
    color: #0b1c3c; 
    font-size: 1.2rem;
}
.member-card .role {
    margin: 0 0 0px; 
    font-size: 0.9rem;
    font-weight: bold;
    color: #0061ff;
}

/* 「View More」リンク風装飾 */
.read-more {
    display: inline-block; 
    /* 上下のマージンを少し調整 */
    margin-top: auto; /* カードの下部に配置されやすくなる */
    padding-top: 15px;
    font-size: 0.8rem;
    color: #0061ff; 
    font-weight: bold; 
    border-bottom: 1px solid #0061ff;
    opacity: 0; 
    transform: translateY(10px); 
    transition: all 0.3s ease;
}
.member-card:hover .read-more {
    opacity: 1;
    transform: translateY(0);
}

.member-action {
    margin-top: 40px;
    text-align: center;
}

/* --- Modal Styles (新規追加) --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(11, 28, 60, 0.6); /* 暗い背景 */
    backdrop-filter: blur(5px); /* 背景ぼかし */
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* モーダル表示時のクラス */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    padding: 40px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 15px; right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}
.modal-close:hover {
    color: #0061ff;
}

.modal-body {
    text-align: center;
}
.modal-img-area .member-img {
    width: 140px; height: 140px;
    margin-bottom: 20px;
}

.modal-text-area h3 {
    font-size: 1.5rem;
    color: #0b1c3c;
    margin-bottom: 5px;
}
.modal-role {
    color: #0061ff;
    font-weight: bold;
    margin-bottom: 20px;
}
.modal-text-area hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}
.modal-desc {
    text-align: left; /* 詳細文は左揃えで見やすく */
    line-height: 1.8;
    color: #555;
    font-size: 0.95rem;
}

/* --- Modal Tags (新規追加) --- */
.modal-tags-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 中央揃え */
    gap: 8px; /* タグ間の隙間 */
    margin-bottom: 20px;
}

.modal-tag-item {
    /* 文字サイズを小さく (0.8rem -> 0.7rem) */
    font-size: 0.7rem;
    
    color: #0061ff;
    background-color: #f0f7ff;
    
    /* 余白を小さく (6px 12px -> 4px 10px) */
    padding: 4px 10px;
    
    border-radius: 20px;
    font-weight: bold;
    border: 1px solid #cce0ff;
    white-space: nowrap;
}

/* スマホ対応 */
@media (max-width: 900px) {
    .member-card {
        /* スマホでは3枚並ぶと狭すぎるので、1.2枚（1枚＋チラ見せ）にする */
        flex: 0 0 calc((100% - 30px) / 1.2);
    }
}


/* --- Footer --- */
footer {
    background: var(--primary-color); /* 深いネイビー */
    color: rgba(255, 255, 255, 0.8);
    padding: 50px 0 30px;
    font-size: 0.9rem;
}

/* 上段：会社名とリンクエリア */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 区切り線 */
    padding-bottom: 30px;
    margin-bottom: 30px;
}


/* フッターロゴ */

.footer-logo-link {
    display: inline-block;
    /* 必要であればリンクの余白などを調整 */
}

.footer-logo {
    height: 40px; /* ロゴの高さ（フッターに合わせて調整してください） */
    width: auto;  /* 横幅は自動調整 */
    display: block;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .footer-logo {
        height: 30px; /* スマホでは少し小さく */
        margin: 0 auto; /* 中央揃えにする場合 */
    }
    
    .footer-company-info {
        text-align: center; /* 親要素も中央揃え */
        width: 100%;
    }
}


/* リンク集（横並び） */
.footer-links {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.9rem;
}

.footer-links li a:hover {
    color: #fff;
    text-decoration: underline;
}

/* 下段：コピーライト */
.copyright {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    font-family: "Helvetica Neue", sans-serif;
    letter-spacing: 0.05em;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* 縦並びに変更 */
        gap: 20px;
        text-align: center;
    }
    
    .footer-links {
        flex-direction: column; /* リンクも縦に積む */
        gap: 15px;
    }
}

/* --- Mobile --- */
@media (max-width: 768px) {
    /* コンテナの余白を少し狭める */
    .container {
        padding: 0 20px;
    }

    /* セクションの上下余白を減らす */
    .section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }
    .hero { background-position: right center; /* スマホでは地球が中心に来るように */ }
    .hero-content {
        text-align: center; margin-left: 0; max-width: 100%;
        padding: 0 20px;
    }
    .hero h1 { font-size: 2.5rem; }
    .nav-menu { display: none; }
    
    /* CPA Space Mobile */
    .cpaspace-inner { flex-direction: column-reverse; }
    .cpaspace-img-side {
        width: 100%; height: 200px; min-height: auto;
        background-position: center; margin: 0; background-size: cover;
    }
    .cpaspace-text-side { padding: 30px 20px; }
    .cpaspace-headline { font-size: 1.5rem; }

    .news-list li { display: block; }
    .news-date { display: block; margin-bottom: 5px; }
}

/* --- CPA Space Logo (Large Impact) --- */
.cpaspace-header-row {
    display: flex;
    align-items: center; /* ロゴとバッジを垂直方向中央揃え */
    gap: 20px; /* ロゴとバッジの間隔 */
    margin-bottom: 25px; /* 下の文字との余白を広げる */
}

.cpaspace-logo-img {
    height: 70px; /* ロゴを大きく（文字より目立つサイズに） */
    width: auto;
    margin-right: 0; /* マージンは親要素のgapで調整するため0に */
    display: block;
}

/* キャッチコピー（文字）のバランス調整 */
.cpaspace-headline {
    font-size: 1.6rem; /* ロゴを引き立てるため、文字は少しだけ控えめに */
    margin-top: 0;
}

/* スマホ表示時の調整 */
@media (max-width: 768px) {
    .cpaspace-logo-img {
        height: 50px; /* スマホでも十分な存在感を維持 */
    }
    .cpaspace-header-row {
        flex-wrap: wrap; /* 画面が狭ければバッジを折り返す */
    }
}

/* --- Common Button Style --- */

.btn {
    display: inline-block;
    padding: 16px 45px;          /* クリックしやすい余裕のあるパディング */
    background: var(--accent-gradient); /* 定義済みの鮮やかなグラデーションを使用 */
    color: #fff;                 /* 文字色は白 */
    font-size: 1rem;
    font-weight: 700;            /* 太字で視認性アップ */
    border-radius: 50px;         /* 丸みのあるピル型（モダンで親しみやすい） */
    box-shadow: 0 5px 15px rgba(0, 97, 255, 0.3); /* ふんわりとした発光感のある影 */
    transition: all 0.3s ease;   /* アニメーション */
    letter-spacing: 0.05em;
}

.btn:hover {
    transform: translateY(-3px); /* ホバー時に少し浮き上がる */
    box-shadow: 0 10px 25px rgba(0, 97, 255, 0.5); /* 影を強くして浮遊感を強調 */
    opacity: 0.95;
}

/* スマホ表示時の微調整 */
@media (max-width: 768px) {
    .btn {
        width: 100%;             /* スマホでは横幅いっぱいにしても良い（お好みで） */
        text-align: center;      /* 文字を中央揃え */
        padding: 15px 20px;
        box-sizing: border-box;  /* パディングを含めた幅計算 */
    }
}

/* =========================================
   詳細ページ用スタイル (Service Detail)
   ========================================= */

.page-header {
    position: relative;
    width: 100%;
    /* ▼ 修正1: 上の余白を 120px → 180px に増やして、位置を下げる */
    padding: 180px 0 100px;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f7ff 100%);
    overflow: hidden;
    text-align: center;
    z-index: 1;
}

/* --- 背景レイヤー --- */
.page-header-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.header-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.6;
    will-change: transform, border-radius;
}
.blob-sub-1 {
    top: -20%; left: -10%; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0, 97, 255, 0.6) 0%, rgba(0, 97, 255, 0) 70%);
    animation: moveBlob1 15s infinite alternate ease-in-out;
}
.blob-sub-2 {
    bottom: -20%; right: -10%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.6) 0%, rgba(0, 210, 255, 0) 70%);    animation-delay: -5s;    
    animation: moveBlob2 18s infinite alternate ease-in-out;
}

/* --- コンテンツ --- */
.header-content-layer {
    position: relative;
    z-index: 2;
}

.page-header h1 {
    font-size: 2.2rem;
    margin-bottom: 20px; /* 余白を少し広げる */
    letter-spacing: 0.05em;
    font-weight: 800;
    color: #0b1c3c;
}

.page-header p {
    font-size: 0.95rem;
    color: #6e7c91; 
    font-weight: 500;
    letter-spacing: 0.15em; 
    text-transform: uppercase;
    
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    display: block; /* 念のためブロック表示 */
}

/* --- 下部のアクセントライン --- */
.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(135deg, #0061ff 0%, #00d2ff 100%);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .page-header {
        /* スマホでも少し位置を下げる */
        padding: 140px 0 70px;
    }
    .page-header h1 {
        font-size: 1.6rem;
        padding: 0 15px;
        margin-bottom: 15px;
    }
    .page-header p {
        font-size: 0.8rem;
    }
    .blob-sub-1, .blob-sub-2 {
        width: 300px; height: 300px; opacity: 0.4;
    }
}


/* --- Main Content Layout --- */
.service-detail {
    padding: 80px 0;
}

/* 概要セクション */
.detail-section {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px; /* 下のマージンを少し広げてゆとりを持たせる */
}
.detail-section h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    line-height: 1.5;
    color: #003366;
}

/* 詳細ページのリード文エリア */
.detail-lead-wrapper {
    text-align: left;       /* テキストを左揃えにする */
    max-width: 800px;       /* 読みやすいように幅を制限 */
    margin: 0 auto 60px;    /* 上下余白を取りつつ、中央配置 */
    line-height: 2;         /* 行間を少し広げて読みやすく */
    color: #333;            /* 文字色 */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .detail-lead-wrapper {
        padding: 0 20px;    /* スマホでの横余白 */
        font-size: 0.95rem; /* 文字サイズ調整 */
    }
}

/* --- Service Menu ---  */

/* セクション全体 */
.service-menu-section {
    max-width: 900px; /* リストなので少し幅を絞って読みやすく */
    margin: 0 auto 100px;
    text-align: center;
}

.service-menu-section h3 {
    font-size: 1.8rem;
    color: #003366;
    margin-bottom: 60px; /* 余白を多めにとる */
    display: inline-block;
}

/* リスト全体のスタイル */
.detail-list-border {
    list-style: none;
    padding: 0;
    text-align: left;
    border-top: 1px solid #e1e5ee; /* 一番上の線 */
}

/* 各リストアイテム */
.detail-list-border li {
    display: flex;
    align-items: flex-start; /* 上揃え */
    padding: 40px 20px; /* 上下の余白をたっぷりとる */
    border-bottom: 1px solid #e1e5ee; /* 区切り線 */
    transition: background-color 0.3s ease;
}

/* ホバー時にほんのり背景色を変える（クリック感ではなく、フォーカス感） */
.detail-list-border li:hover {
    background-color: #fafcff;
}

.list-icon {
    width: 60px;
    height: 60px;
    background: #f0f4ff; /* アイコン背景 */
    border-radius: 12px;
    flex-shrink: 0;
    margin-right: 30px; /* テキストとの間隔 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


/* --- テキストエリア --- */
.list-content {
    flex: 1; /* 残りの幅を全部使う */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 5px; /* アイコンとの高さ合わせ */
}

.list-content strong {
    font-size: 1.3rem;
    color: #0b1c3c;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* タイトルのアクセント（小さい丸） */
.list-content strong::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent-gradient);
    border-radius: 50%;
    margin-right: 15px;
}

.list-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin: 0;
    padding-left: 23px; /* タイトルの文字位置に合わせるインデント */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .detail-list-border li {
        flex-direction: column; /* スマホでは縦並び */
        padding: 30px 10px;
        align-items: center;
        text-align: center;
    }
    .list-icon {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .list-content strong {
        justify-content: center; /* 中央揃え */
    }
    .list-content p {
        padding-left: 0;
    }
}

/* =========================================
   Accounting Automation Page Icons
   ========================================= */


/* --- Icon 1: Analysis (Bar Chart) --- */
/* 棒グラフのアニメーション */
.icon-analysis {
    align-items: flex-end; /* 下揃え */
    padding-bottom: 12px;
    gap: 4px;
}

.bar {
    width: 6px;
    background: var(--accent-gradient); /* 青のグラデーション */
    border-radius: 2px;
    animation: bar-grow 2s infinite ease-in-out;
    transform-origin: bottom; /* 下を基準に伸縮 */
}

/* 各棒の高さと動きのタイミングをずらす */
.bar-1 { height: 18px; animation-delay: 0s; }
.bar-2 { height: 28px; animation-delay: 0.2s; }
.bar-3 { height: 22px; animation-delay: 0.4s; }

@keyframes bar-grow {
    0%, 100% { transform: scaleY(1); opacity: 0.8; }
    50% { transform: scaleY(1.3); opacity: 1; }
}

/* --- Icon 2: OCR (Scanning) --- */
/* 書類スキャン風のアニメーション */
.icon-ocr {
    background: #fff;
    border: 1px solid #dbe4f3; /* 薄い枠線 */
}

/* 書類のベース */
.doc-lines {
    width: 26px;
    height: 32px;
    border: 2px solid #aebdd8;
    border-radius: 4px;
    position: relative;
    box-sizing: border-box;
}

/* 書類の中身（横線） */
.doc-lines::before,
.doc-lines::after {
    content: '';
    position: absolute;
    left: 4px;
    height: 2px;
    background: #dbe4f3;
    width: 14px;
}
.doc-lines::before { top: 6px; }
.doc-lines::after { top: 12px; }

/* 動くスキャンライン */
.scan-line {
    position: absolute;
    width: 100%;     /* アイコンの横幅いっぱい */
    height: 2px;
    background: #00d2ff;
    box-shadow: 0 0 8px #00d2ff; /* 光るエフェクト */
    top: 0;
    z-index: 5;
    animation: scan-move 2.5s infinite linear;
}

@keyframes scan-move {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* --- Icon 3: Support (Gear) --- */
/* 歯車の回転アニメーション */
.icon-support .gear-wheel {
    width: 28px;
    height: 28px;
    border: 3px solid #0061ff;
    border-radius: 50%;
    position: relative;
    box-sizing: border-box;
    animation: rotate-gear 6s infinite linear;
}

/* 歯車のギザギザ（点線で表現） */
.icon-support .gear-wheel::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 4px dashed #0061ff;
    border-radius: 50%;
    opacity: 0.3;
}

/* --- Icon 4: Flow / Structure (Hierarchy Chart) --- */
/* あるべき姿・ERP活用方針整理用：構造図アイコン */
.icon-flow {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.flow-box {
    background: #fff;
    border: 2px solid #0061ff;
    border-radius: 2px;
    box-sizing: border-box;
}

/* 上の親ボックス */
.top-box {
    width: 14px;
    height: 10px;
    animation: fadeInFlow 2s infinite;
}

/* 縦の接続線 */
.flow-line {
    width: 2px;
    height: 6px;
    background: #0061ff;
    position: relative;
}
/* 横の分岐線 */
.flow-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -10px;
    width: 22px; /* 左右のボックスへ広がる線 */
    height: 2px;
    background: #0061ff;
}

/* 下のボックス配置 */
.flow-row {
    display: flex;
    gap: 12px; /* ボックス間の距離 */
    align-items: flex-start;
}

.sub-box {
    width: 12px;
    height: 10px;
    background: var(--accent-gradient); /* 下層は塗りつぶしで強調 */
    border: none;
    opacity: 0.8;
    animation: fadeInFlow 2s infinite;
    animation-delay: 0.5s;
}

/* フローが上から下へ流れるアニメーション */
@keyframes fadeInFlow {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}


/* --- Icon 5: RPA / API (Robot) --- */
/* RPA・API開発用：ロボットアイコン */
.icon-rpa {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ロボットの頭 */
.bot-head {
    width: 28px;
    height: 20px;
    background: #fff;
    border: 2px solid #0061ff;
    border-radius: 6px;
    position: relative;
    box-sizing: border-box;
    animation: bot-blink 4s infinite; /* 瞬きアニメーション */
}

/* ロボットの目 */
.bot-head::before,
.bot-head::after {
    content: '';
    position: absolute;
    top: 6px;
    width: 4px;
    height: 4px;
    background: #0061ff;
    border-radius: 50%;
}
.bot-head::before { left: 5px; }
.bot-head::after { right: 5px; }

/* アンテナ */
.bot-antenna {
    width: 2px;
    height: 6px;
    background: #0061ff;
    position: relative;
    margin-bottom: 0; /* 頭の上にくっつける */
}
.bot-antenna::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -2px;
    width: 6px;
    height: 6px;
    background: var(--accent-gradient);
    border-radius: 50%;
    animation: antenna-pulse 2s infinite ease-in-out;
}

@keyframes bot-blink {
    0%, 48%, 52%, 100% { height: 20px; transform: scaleY(1); }
    50% { height: 18px; transform: scaleY(0.95); } /* 少し潰れて瞬きっぽく */
}

@keyframes antenna-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 5px #00d2ff; }
    100% { transform: scale(1); opacity: 0.8; }
}

@keyframes rotate-gear {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- スマホ対応（配置調整） --- */
@media (max-width: 768px) {
    .list-icon {
        margin-right: 0;
        margin-bottom: 15px;
        width: 50px;
        height: 50px;
    }
}

/* =========================================
   ERP Implementation Consulting Page Icons
   ========================================= */


/* --- Icon 1: Selection (Document & Magnifier) --- */
/* 選定支援用：書類と虫眼鏡 */
.icon-selection {
    position: relative;
    justify-content: center;
    align-items: center;
}

/* 書類 */
.doc-sheet {
    width: 24px;
    height: 32px;
    border: 2px solid #aebdd8;
    background: #fff;
    border-radius: 3px;
    position: relative;
}
.doc-sheet::before,
.doc-sheet::after {
    content: '';
    position: absolute;
    left: 4px;
    height: 2px;
    background: #dbe4f3;
    width: 12px;
}
.doc-sheet::before { top: 6px; }
.doc-sheet::after { top: 12px; }

/* 虫眼鏡 */
.magnifier {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border: 2px solid #0061ff;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    box-sizing: border-box;
    animation: search-move 3s infinite ease-in-out;
}
/* 持ち手 */
.magnifier::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 8px;
    height: 2px;
    background: #0061ff;
    transform: rotate(45deg);
}

@keyframes search-move {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-5px, -5px); }
}


/* --- Icon 2: Fit & Gap (Shapes & Connector) --- */
/* Fit&Gap分析用：四角と丸の比較 */
.icon-fitgap {
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.fit-shape {
    width: 16px;
    height: 16px;
    border: 2px solid #0061ff;
    box-sizing: border-box;
}

.shape-square {
    border-radius: 2px; /* ERP標準機能（四角） */
    background: #fff;
}
.shape-circle {
    border-radius: 50%; /* 現行業務（丸） */
    border-color: #00d2ff;
    background: #fff;
}

/* ギャップを埋めるコネクタ */
.fit-connector {
    position: absolute;
    width: 24px;
    height: 2px;
    background: #aebdd8;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}
.fit-connector::after {
    content: '?';
    position: absolute;
    top: -12px;
    left: 10px;
    font-size: 10px;
    font-weight: bold;
    color: #0061ff;
    animation: fade-question 2s infinite;
}

@keyframes fade-question {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}


/* --- Icon 3: PMO (Gantt Chart) --- */
/* PMO用：ガントチャート */
.icon-pmo {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 左揃え */
    padding-left: 14px; /* 全体位置調整 */
    gap: 5px;
    position: relative;
}

.chart-bar {
    height: 5px;
    border-radius: 2px;
    background: #dbe4f3;
    position: relative;
    overflow: hidden;
}

/* 進行度バー（青色） */
.chart-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: var(--accent-gradient);
}

.bar-long { width: 34px; }
.bar-long::after { width: 80%; }

.bar-med { width: 28px; }
.bar-med::after { width: 50%; }

.bar-short { width: 20px; }
.bar-short::after { width: 30%; }

/* 現在地を示す縦線 */
.chart-indicator {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 28px; /* 縦線の位置 */
    width: 2px;
    background: #ff4d4f; /* 赤色で強調 */
    opacity: 0.6;
    animation: indicator-blink 2s infinite;
}

@keyframes indicator-blink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}


/* --- Icon 4: Migration (Database & Arrow) --- */
/* データ移行用：DBからDBへ */
.icon-migration {
    justify-content: center;
    align-items: center;
    gap: 4px;
}

/* データベースアイコン（円柱風） */
.db-cylinder {
    width: 16px;
    height: 20px;
    border: 2px solid #0061ff;
    border-radius: 4px;
    position: relative;
    box-sizing: border-box;
    background: #fff;
}
/* DBの線 */
.db-cylinder::before {
    content: '';
    position: absolute;
    top: 5px; left: 2px; right: 2px;
    height: 2px;
    border-top: 1px solid #0061ff;
    border-bottom: 1px solid #0061ff;
}

.db-old {
    opacity: 0.6;
    border-color: #8892b0; /* 旧システムはグレーっぽく */
}
.db-old::before { border-color: #8892b0; }

.db-new {
    border-color: #0061ff; /* 新システムは鮮やか */
    box-shadow: 0 0 5px rgba(0, 97, 255, 0.2);
}

/* 移動する矢印・ドット */
.db-arrow {
    width: 12px;
    height: 2px;
    background: #e1e5ee;
    position: relative;
    overflow: hidden;
}
.db-arrow::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 2px;
    background: #00d2ff;
    animation: data-transfer 1.5s infinite linear;
}

@keyframes data-transfer {
    0% { left: -4px; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* =========================================
   AI Consulting Page Icons
   ========================================= */



/* --- Icon 1: AI Optimization (Circuit Brain) --- */
/* 最適化：脳と回路のノード */
.icon-ai-opt {
    position: relative;
    justify-content: center;
    align-items: center;
}

.circuit-brain {
    width: 20px;
    height: 20px;
    background: #0061ff;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px rgba(0,97,255,0.4);
}

.circuit-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00d2ff;
    border-radius: 50%;
    animation: orbit-node 4s infinite linear;
}

/* 脳の周りを回るノード */
.node-1 { top: 0; left: 50%; transform-origin: 0 15px; animation-delay: 0s; }
.node-2 { top: 50%; left: 0; transform-origin: 15px 0; animation-delay: -1.3s; }
.node-3 { bottom: 0; right: 0; transform-origin: -10px -10px; animation-delay: -2.6s; }

@keyframes orbit-node {
    from { transform: rotate(0deg) translate(14px) rotate(0deg); }
    to { transform: rotate(360deg) translate(14px) rotate(-360deg); }
}




/* --- Icon 2: AI Selection (List & Check) - Fixed --- */
/* ツール選定：リストの中からベストなものを選ぶ */
.icon-ai-select {
    justify-content: center;
    align-items: center;
    position: relative;
}

.select-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

/* 選択肢のバー（通常） */
.select-item {
    width: 24px;
    height: 4px;
    background: #e1e5ee;
    border-radius: 2px;
    transition: all 0.3s;
}

/* 真ん中の選ばれたバー（強調） */
.item-picked {
    width: 28px; /* 少し大きく */
    height: 14px; /* 高さを出してカード状に */
    background: #fff;
    border: 2px solid #0061ff;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    animation: item-pop 2s infinite ease-in-out;
}

/* チェックマーク */
.item-picked::after {
    content: '';
    width: 6px; height: 3px;
    border-left: 2px solid #0061ff;
    border-bottom: 2px solid #0061ff;
    transform: rotate(-45deg) translate(1px, -2px);
}

@keyframes item-pop {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0,97,255,0.2); }
}

/* --- Icon 3: AI Construction (Robot Head) --- */
/* 構築・設定：AIボット（ロボット）の生成 */
.icon-ai-build {
    justify-content: center;
    align-items: center;
    position: relative;
}

/* ロボットの顔（輪郭） */
.ai-bot {
    width: 24px;
    height: 20px;
    border: 2px solid #0061ff;
    border-radius: 6px;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px; /* 目と目の間隔 */
}

/* 目 */
.bot-eye {
    width: 4px; 
    height: 4px;
    background: #0061ff;
    border-radius: 50%;
    animation: bot-blink 3s infinite;
}

/* アンテナ */
.bot-antenna {
    position: absolute;
    top: -5px;
    width: 2px; 
    height: 5px;
    background: #0061ff;
}

/* アンテナの先端（光る部分） */
.bot-antenna::after {
    content: '';
    position: absolute;
    top: -3px; 
    left: -2px;
    width: 6px; 
    height: 6px;
    background: var(--accent-gradient);
    border-radius: 50%;
    animation: antenna-flash 2s infinite;
}

/* --- Animations --- */

/* 瞬きのアニメーション */
@keyframes bot-blink {
    0%, 45%, 55%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

/* アンテナの点滅アニメーション */
@keyframes antenna-flash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* --- Icon 4: Governance (Scanning Shield) - Fixed --- */
/* ガバナンス：スキャン（監視）する盾 */
.icon-ai-gov {
    justify-content: center;
    align-items: center;
}

.gov-shield {
    width: 24px;
    height: 28px;
    background: #fff;
    border: 2px solid #0061ff;
    border-radius: 0 0 12px 12px;
    position: relative;
    overflow: hidden; /* スキャン線を盾の内側に留めるために必須 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 盾の中の鍵穴（背景） */
.gov-shield::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 8px;
    background: #dbe4f3;
    clip-path: polygon(20% 0%, 80% 0%, 100% 60%, 50% 100%, 0% 60%);
}

/* 上下するスキャンライン */
.scan-beam {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: #00d2ff;
    box-shadow: 0 0 5px #00d2ff;
    animation: shield-scan 2.5s infinite linear;
    z-index: 2; /* 鍵穴より手前に表示 */
}

@keyframes shield-scan {
    0% { top: -10%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}


/* =========================================
   Accounting BPO Page Icons (Animated)
   ========================================= */

/* --- Icon 1: Bookkeeping (Ledger & Pen) --- */
/* 記帳代行：帳簿とペン */
.icon-bpo-book {
    position: relative;
    justify-content: center;
    align-items: center;
}

.ledger-book {
    width: 28px;
    height: 20px;
    border: 2px solid #0061ff;
    border-radius: 2px;
    background: #fff;
    position: relative;
}
/* 帳簿の罫線 */
.ledger-book::before {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 16px; height: 2px;
    background: #dbe4f3;
    box-shadow: 0 4px 0 #dbe4f3, 0 8px 0 #dbe4f3;
}

.ledger-pen {
    position: absolute;
    bottom: 12px; right: 15px;
    width: 4px; height: 18px;
    background: var(--accent-gradient);
    border-radius: 2px;
    transform-origin: bottom center; /* ペン先を軸にする */
    transform: rotate(45deg);
    animation: pen-write 1s infinite alternate ease-in-out; /* 書く動作 */
}
/* ペン先 */
.ledger-pen::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 4px 2px 0 2px;
    border-color: #00d2ff transparent transparent transparent;
}

@keyframes pen-write {
    0% { transform: rotate(45deg) translate(0, 0); }
    100% { transform: rotate(55deg) translate(2px, -2px); }
}


/* --- Icon 2: Invoicing (Paper & Yen) --- */
/* 請求書・資金：紙幣と円マーク */
.icon-bpo-invoice {
    justify-content: center;
    align-items: center;
    position: relative;
}

.invoice-paper {
    width: 20px;
    height: 28px;
    border: 2px solid #aebdd8;
    background: #fff;
    border-radius: 2px;
    transform: rotate(-10deg);
}

.invoice-yen {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #0061ff;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    bottom: 10px;
    right: 10px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    transform: rotate(10deg);
    animation: yen-float 2.5s infinite ease-in-out; /* ふわりと浮く動作 */
}

@keyframes yen-float {
    0%, 100% { transform: rotate(10deg) translateY(0); }
    50% { transform: rotate(10deg) translateY(-5px); }
}


/* --- Icon 3: Tax Support (Calculator) --- */
/* 税務：電卓 */
.icon-bpo-tax {
    justify-content: center;
    align-items: center;
}

.tax-calc {
    width: 24px;
    height: 32px;
    border: 2px solid #0061ff;
    border-radius: 4px;
    background: #fff;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
}

.calc-screen {
    width: 16px;
    height: 6px;
    background: #dbe4f3;
    margin-bottom: 4px;
    animation: calc-compute 2s infinite steps(1); /* 画面の点滅 */
}

.calc-btns {
    width: 16px;
    height: 12px;
    background-image: radial-gradient(#0061ff 20%, transparent 20%);
    background-size: 5px 5px;
    background-position: center;
    opacity: 0.8;
    animation: calc-type 0.5s infinite alternate; /* ボタンを押すような点滅 */
}

@keyframes calc-compute {
    0%, 100% { background: #dbe4f3; }
    50% { background: #81bbff; }
}

@keyframes calc-type {
    0% { opacity: 0.6; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}


/* --- Icon 4: Payroll (Payslip & Yen) --- */
/* 給与計算：明細書と円マーク */
.icon-bpo-payroll {
    justify-content: center;
    align-items: center;
}

/* 明細書本体 */
.pay-sheet {
    width: 24px;
    height: 30px;
    border: 2px solid #aebdd8;
    background: #fff;
    border-radius: 3px;
    position: relative;
    box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}

/* 明細のライン（ヘッダー部分） */
.pay-sheet::before {
    content: '';
    position: absolute;
    top: 5px; left: 4px;
    width: 12px; height: 2px;
    background: #dbe4f3;
}

/* 明細のライン（下部） */
.pay-sheet::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 4px;
    width: 12px; height: 2px;
    background: #dbe4f3;
    box-shadow: 0 -4px 0 #dbe4f3;
}

/* 円マーク（強調） */
.pay-symbol {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    background: #0061ff;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,97,255,0.3);
    animation: pay-pulse 2s infinite ease-in-out; /* 脈打つアニメーション */
}

@keyframes pay-pulse {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(0, 97, 255, 0.4); }
    70% { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 6px rgba(0, 97, 255, 0); }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(0, 97, 255, 0); }
}

/* =========================================
   Startup Support Page Icons (Animated & Intuitive)
   ========================================= */

/* --- Icon 1: Capital Policy (Graph & Coin) - Fixed --- */
/* 資本政策：右肩上がりに伸びるグラフとコイン */
.icon-startup-cap {
    position: relative;
    justify-content: center;
    align-items: center;
}

/* グラフの軸（L字型） */
.cap-graph {
    width: 26px;
    height: 20px;
    border-bottom: 2px solid #aebdd8;
    border-left: 2px solid #aebdd8;
    position: relative;
    margin-right: 4px;
    box-sizing: border-box;
}

/* 成長する折れ線（アニメーション） */
.cap-graph::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 軸の角に合わせる */
    left: -1px;
    height: 2px;   /* 線の太さ */
    background: #0061ff; /* 線の色 */
    
    /* 左下を基準に回転させて配置 */
    transform-origin: left bottom;
    transform: rotate(-35deg); /* 右肩上がりの角度 */
    
    /* アニメーション設定 */
    width: 0; /* 最初は長さゼロ */
    animation: graph-line-grow 2s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* コイン（グラフが伸びきった後にポップする） */
.cap-coin {
    position: absolute;
    top: 10px; right: 10px;
    width: 20px; height: 20px;
    background: #00d2ff;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    /* 初期状態は非表示 */
    opacity: 0;
    transform: scale(0);
    animation: coin-pop-up 2s infinite;
}

/* アニメーション定義 */
@keyframes graph-line-grow {
    0% { width: 0; }
    60% { width: 130%; } /* 斜めの距離分、100%より長く伸ばす */
    100% { width: 130%; } /* 待機 */
}

@keyframes coin-pop-up {
    0%, 50% { transform: scale(0); opacity: 0; } /* グラフが伸びるまで待機 */
    60% { transform: scale(1.2); opacity: 1; }   /* ポンッと出る */
    70% { transform: scale(1); opacity: 1; }     /* 落ち着く */
    90% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }    /* フェードアウト */
}

/* --- Icon 2: CFO Support (Briefcase) --- */
/* 管理部門支援：揺れるビジネスバッグ */
.icon-startup-cfo {
    justify-content: center;
    align-items: center;
}

.cfo-briefcase {
    width: 26px;
    height: 18px;
    background: #fff;
    border: 2px solid #0061ff;
    border-radius: 2px;
    position: relative;
    box-sizing: border-box;
    margin-top: 4px;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    animation: briefcase-shake 3s infinite ease-in-out;
}
/* バッグの取っ手 */
.briefcase-handle {
    position: absolute;
    top: -5px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 4px;
    border: 2px solid #0061ff;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

@keyframes briefcase-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}


/* --- Icon 3: HR/Org (Org Tree) --- */
/* 組織設計：広がる組織図 */
.icon-startup-hr {
    justify-content: center;
    align-items: center;
}

.hr-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.node-top {
    width: 10px; height: 10px;
    background: #0061ff;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.node-line {
    width: 2px; height: 8px;
    background: #aebdd8;
    position: relative;
}
/* 分岐線 */
.node-line::after {
    content: '';
    position: absolute;
    bottom: 0; left: -9px;
    width: 20px; height: 2px;
    background: #aebdd8;
}

.node-row {
    display: flex;
    gap: 14px;
}
.node-sub {
    width: 8px; height: 8px;
    background: #fff;
    border: 2px solid #00d2ff;
    border-radius: 50%;
    animation: node-appear 2s infinite;
}
.node-sub:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes node-appear {
    0%, 100% { transform: scale(1); background: #fff; }
    50% { transform: scale(1.3); background: #e0f7ff; }
}


/* --- Icon 4: IPO Prep (Flag) --- */
/* IPO支援：はためくゴールフラッグ */
.icon-startup-ipo {
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: 8px; /* 中心調整 */
}

.ipo-flag-pole {
    width: 2px; height: 30px;
    background: #333;
    border-radius: 1px;
    position: relative;
    left: -10px;
}

.ipo-flag {
    position: absolute;
    top: 15px; left: 27px;
    width: 30px; height: 18px;
    background: var(--accent-gradient);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 2px 2px 0;
    transform-origin: left center;
    animation: flag-wave 1.2s infinite ease-in-out alternate;
}

.ipo-base {
    position: absolute;
    bottom: 0; left: -4px;
    width: 10px; height: 2px;
    background: #ccc;
    border-radius: 2px;
}

@keyframes flag-wave {
    0% { transform: skewY(0deg) scaleX(1); }
    100% { transform: skewY(-10deg) scaleX(0.9); }
}

/* =========================================
   Internal Control Page Icons
   ========================================= */

/* --- Icon 1: 3-Point Set (Documents Stack) --- */
/* 3点セット：重なる書類 */
.icon-ic-docs {
    position: relative;
    justify-content: center;
    align-items: center;
}

.doc-stack {
    position: absolute;
    width: 20px;
    height: 26px;
    background: #fff;
    border: 1px solid #aebdd8;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
}
/* 書類の罫線 */
.doc-stack::before {
    content: '';
    position: absolute;
    top: 4px; left: 3px;
    width: 12px; height: 2px;
    background: #dbe4f3;
    box-shadow: 0 4px 0 #dbe4f3, 0 8px 0 #dbe4f3;
}

.doc-1 {
    transform: translate(-6px, 4px) rotate(-10deg);
    animation: doc-shuffle-1 3s infinite ease-in-out;
    background: #f0f4ff;
    z-index: 1;
}
.doc-2 {
    transform: translate(0, 0) rotate(0deg);
    animation: doc-shuffle-2 3s infinite ease-in-out;
    background: #fff;
    z-index: 2;
}
.doc-3 {
    transform: translate(6px, -4px) rotate(10deg);
    animation: doc-shuffle-3 3s infinite ease-in-out;
    background: #fff;
    border-color: #0061ff;
    z-index: 3;
}

@keyframes doc-shuffle-1 {
    0%, 100% { transform: translate(-6px, 4px) rotate(-10deg); }
    50% { transform: translate(-2px, 2px) rotate(-5deg); }
}
@keyframes doc-shuffle-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(0, -2px) rotate(0deg); }
}
@keyframes doc-shuffle-3 {
    0%, 100% { transform: translate(6px, -4px) rotate(10deg); }
    50% { transform: translate(2px, -6px) rotate(5deg); }
}

/* --- Icon 2: IT Control (Database & Shield) - Fixed --- */
/* IT統制：3段積みのデータベースと盾 */
.icon-ic-it {
    justify-content: center;
    align-items: center;
    position: relative;
}

/* データベース（3段のラック） */
.db-rack {
    display: flex;
    flex-direction: column;
    gap: 2px; /* ユニット間の隙間 */
    position: relative;
    z-index: 1;
    margin-bottom: 2px; /* 盾との位置バランス調整 */
}

/* 各ユニット（サーバー/DB） */
.db-unit {
    width: 26px;
    height: 6px;
    border: 2px solid #aebdd8; /* 青みがかったグレー */
    background: #fff;
    border-radius: 3px; /* 少し丸みを持たせてハードウェア感を出す */
    position: relative;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05); /* 厚みを表現 */
}

/* アクセスランプ（稼働中） */
.db-unit::after {
    content: '';
    position: absolute;
    top: 50%; right: 4px;
    transform: translateY(-50%);
    width: 3px; height: 3px;
    background: #00d2ff; /* 水色の光 */
    border-radius: 50%;
    animation: db-blink 0.5s infinite alternate;
}

/* ランプの点滅タイミングをずらす */
.unit-1::after { animation-delay: 0s; }
.unit-2::after { animation-delay: 0.3s; }
.unit-3::after { animation-delay: 0.7s; }

/* ガードする盾（手前に配置） */
.it-shield {
    position: absolute;
    bottom: 10px; right: 10px;
    width: 14px; height: 16px;
    background: #0061ff;
    border: 2px solid #fff;
    border-radius: 0 0 8px 8px; /* 盾の形状 */
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: -2px -2px 5px rgba(255,255,255,0.5); /* 境界を際立たせる */
}

/* 盾の中のチェックマーク */
.it-shield::after {
    content: '';
    width: 5px; height: 3px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

@keyframes db-blink {
    from { opacity: 0.3; }
    to { opacity: 1; box-shadow: 0 0 4px #00d2ff; }
}


/* --- Icon 3: Internal Audit (Magnifier) --- */
/* 内部監査：書類をチェックする虫眼鏡 */
.icon-ic-audit {
    justify-content: center;
    align-items: center;
    position: relative;
}

.audit-paper {
    width: 22px;
    height: 28px;
    background: #fff;
    border: 2px solid #aebdd8;
    border-radius: 2px;
    position: relative;
}
.audit-paper::before {
    content: '';
    position: absolute;
    top: 5px; left: 4px;
    width: 13px; height: 2px;
    background: #dbe4f3;
    box-shadow: 0 4px 0 #dbe4f3, 0 8px 0 #dbe4f3, 0 12px 0 #dbe4f3;
}

.audit-glass {
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid #0061ff;
    border-radius: 50%;
    top: 20px; left: 30px;
    background: rgba(255,255,255,0.5);
    animation: audit-scan 3s infinite ease-in-out;
}
.audit-glass::after {
    content: '';
    position: absolute;
    bottom: -5px; right: -5px;
    width: 6px; height: 2px;
    background: #0061ff;
    transform: rotate(45deg);
}

@keyframes audit-scan {
    0% { transform: translate(0, 0); }
    25% { transform: translate(4px, 8px); }
    50% { transform: translate(-2px, 10px); }
    75% { transform: translate(2px, 4px); }
    100% { transform: translate(0, 0); }
}


/* --- Icon 4: Audit Firm (Approval Stamp) --- */
/* 監査法人対応：承認スタンプ（監査クリア） */
.icon-ic-meeting {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 4px; /* スタンプの持ち手分下げる */
}

/* 書類 */
.audit-cert {
    width: 26px;
    height: 20px;
    background: #fff;
    border: 2px solid #aebdd8;
    border-radius: 2px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* スタンプの道具 */
.stamp-tool {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    width: 10px; height: 14px;
    background: #0061ff; /* 持ち手 */
    border-radius: 2px 2px 0 0;
    z-index: 5;
    animation: stamp-motion 2.5s infinite;
}
/* スタンプの底面 */
.stamp-tool::after {
    content: '';
    position: absolute;
    bottom: -2px; left: -3px;
    width: 16px; height: 4px;
    background: #0061ff;
    border-radius: 2px;
}

/* 押された後のマーク（承認印） */
.stamp-mark {
    width: 12px; height: 12px;
    border: 2px solid #00d2ff;
    border-radius: 50%;
    opacity: 0; /* 最初は見えない */
    animation: mark-appear 2.5s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* マークの中身 */
.stamp-mark::after {
    content: '';
    width: 4px; height: 2px;
    border-left: 2px solid #00d2ff;
    border-bottom: 2px solid #00d2ff;
    transform: rotate(-45deg) translate(1px, -1px);
}

@keyframes stamp-motion {
    0%, 10% { transform: translateX(-50%) translateY(0); }
    30% { transform: translateX(-50%) translateY(14px); } /* 押す */
    50% { transform: translateX(-50%) translateY(0); } /* 戻る */
    100% { transform: translateX(-50%) translateY(0); }
}

@keyframes mark-appear {
    0%, 29% { opacity: 0; transform: scale(1.5); }
    30% { opacity: 1; transform: scale(1); } /* 押された瞬間に表示 */
    80% { opacity: 1; }
    100% { opacity: 0; }
}


/* --- Benefits Icons (Visual Circle) --- */

/* Reliability: Shield Check */
/* .icon-shield-check {
    width: 20px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 0 0 10px 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-shield-check::after {
    content: '';
    width: 6px; height: 3px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -2px);
} */

/* Scalability: Scale Up (Arrows) */
/* .icon-scale-up {
    width: 20px; height: 20px;
    position: relative;
}
.icon-scale-up::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 8px; height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.icon-scale-up::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 8px; height: 8px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
} */
/* 中央の四角（拡大元） */
/* .icon-scale-up span {
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    background: #fff;
    transform: translate(-50%, -50%);
    animation: scale-pulse 2s infinite;
}
@keyframes scale-pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
} */

/* Transparency: Eye */
/* .icon-transparency-eye {
    width: 24px; height: 14px;
    border: 2px solid #fff;
    border-radius: 70%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-transparency-eye::after {
    content: '';
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: eye-look 3s infinite;
}
@keyframes eye-look {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
} */





/* --- Benefits Icons (Circle Inner) --- */

/* Stability: Block Stack */

/* .icon-block-stable {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    box-shadow: 6px 6px 0 rgba(255,255,255,0.5); 
} 
*/

/* Reliability: Badge Star */
/* .icon-badge-star {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #fff;
    position: relative;
    top: -2px;
}
.icon-badge-star::after {
    content: '';
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #fff;
    top: 6px;
    left: -10px;
} */

/* Cost: Coins Stack */
/* .icon-coins-stack {
    width: 16px;
    height: 6px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    top: 4px;
}
.icon-coins-stack::before {
    content: '';
    position: absolute;
    top: -6px; left: -2px;
    width: 16px; height: 6px;
    border: 2px solid #fff;
    border-radius: 50%;
}
.icon-coins-stack::after {
    content: '';
    position: absolute;
    top: -12px; left: -2px;
    width: 16px; height: 6px;
    border: 2px solid #fff;
    border-radius: 50%;
} */


/* --- Introduction Effect Section (導入効果) --- */
.effect-section {
    padding: 0 0 100px 0; /* 下に余白 */
    text-align: center;
}
.effect-section h3 {
    font-size: 1.8rem;
    color: #003366;
    margin-bottom: 15px;
}
.section-lead {
    font-size: 1rem;
    color: #666;
    margin-bottom: 50px;
    line-height: 1.8;
}

.effect-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.effect-card {
    background: #fff;
    border: 1px solid #e1e5ee;
    border-radius: 12px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
    display: flex; /* 中身を縦に整列 */
    flex-direction: column;
    align-items: center; /* 中央揃え */
}
.effect-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 97, 255, 0.1);
    border-color: #cce0ff;
}

/* 数字・アイコンエリア */
.effect-icon-area {
    margin-bottom: 20px;
    position: relative;
    text-align: center;
}
.effect-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0061ff; 
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}
.effect-number {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    color: #0b1c3c;
    line-height: 1;
    font-family: "Helvetica Neue", sans-serif;
}
.effect-number .unit {
    font-size: 1rem;
    font-weight: 600;
    color: #8892b0;
    margin-left: 5px;
}

.effect-card h4 {
    font-size: 1.2rem;
    margin-top: 5px;
    margin-bottom: 15px;
    color: #333;
    width: 100%;
    text-align: center;
}
.effect-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    text-align: left;
    width: 100%;
}

/* --- Flow Section (矢印付き) --- */
.flow-section {
    background: #f9f9f9;
    padding: 40px 40px;
    border-radius: 16px; /* 角丸を少し大きく */
    margin-bottom: 80px;
}
.flow-section h3 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.8rem;
    color: #003366;
}
.flow-steps {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.step {
    flex: 1;
    background: #fff;
    padding: 40px 30px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative; /* 矢印配置の基準 */
}

.step p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    text-align: left; 
}

/* ステップ間の矢印（PCのみ） */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -25px; /* カードの右外側 */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 15px; /* 三角形を作る */
    border-color: transparent transparent transparent #ddd; /* 左側だけ色をつける */
    z-index: 1;
}

.step-num {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
    color: #0061ff;
    margin-bottom: 15px;
    opacity: 0.15;
    line-height: 1;
    font-family: "Helvetica Neue", sans-serif;
}
.step h4 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #003366;
}

.step p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    text-align: left; 
}

/* --- Detail CTA Box (強調エリア) --- */
.detail-cta-box {
    text-align: center;
    margin-top: 60px;
    padding: 60px 20px;
    background: #eef5ff; /* 薄い青背景でエリアを区切る */
    border-radius: 16px;
}
.cta-lead {
    font-size: 1.3rem;
    margin-bottom: 30px;
    font-weight: 700;
    color: #003366;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .detail-row {
        flex-direction: column;
        gap: 40px;
    }
    .flow-steps {
        flex-direction: column;
    }
    /* スマホでは矢印を消して、下にマージンをとる */
    .step:not(:last-child)::after {
        display: none;
    }
    .step {
        margin-bottom: 20px; /* 下に隙間 */
    }
    .effect-number {
        font-size: 3rem;
    }
    .detail-section h2 {
        font-size: 1.5rem;
    }
}


/* =========================================
   Member List Page (memberlist.html)
   ========================================= */

.member-detail-section {
    padding: 80px 0;
    background-color: #f8faff; /* 全体の背景を少しグレーにしてカードを目立たせる */
}

.member-detail-lead {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    font-size: 1.1rem;
    line-height: 2;
    color: #555;
}

/* ▼▼▼ カードを縦に並べるためのラッパー ▼▼▼ */
.member-list-wrapper {
    display: flex;
    flex-direction: column; /* 縦並び */
    gap: 60px; /* カードとカードの間隔（PC用） */
    max-width: 1000px;
    margin: 0 auto;
}

/* --- 詳細カードのデザイン --- */
.member-detail-card {
    display: flex;
    background: #fff;
    border: 1px solid #e1e5ee;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    padding: 40px;
    align-items: flex-start;
    gap: 50px; /* 写真とテキストの間隔 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時に少し浮き上がる演出（連続してても見やすい） */
.member-detail-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 97, 255, 0.1);
    border-color: #dcebff;
}

/* 左側：写真ラッパー */
.member-photo-wrapper {
    width: 240px; /* 写真エリアの幅 */
    flex-shrink: 0;
}

/* 正方形の写真 */
.member-img-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    background-color: #f0f4ff;
    border: 1px solid #f0f0f0;
}

/* 右側：情報エリア */
.member-info {
    flex: 1;
    padding: 0;
}

/* 名前と役職 */
.member-header {
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.member-position {
    display: block;
    font-size: 0.9rem;
    color: #0061ff;
    font-weight: 700;
    margin-bottom: 5px;
}

.member-name {
    font-size: 1.8rem;
    color: #0b1c3c;
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    font-weight: 700;
}

.member-en {
    font-size: 1rem;
    color: #8892b0;
    margin-left: 15px;
    font-weight: 500;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* 経歴・本文 */
.member-bio p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
}

.member-bio p:last-child {
    margin-bottom: 0; /* 最後の段落の余白を消す */
}

.bio-title {
    font-size: 1rem;
    color: #0b1c3c;
    margin-bottom: 10px;
    border-left: 3px solid #0061ff;
    padding-left: 10px;
    font-weight: 700;
    margin-top: 30px; /* 項目間の余白 */
}
.bio-title:first-child {
    margin-top: 0; /* 最初の項目は余白なし */
}

/* タグエリア */
.member-tags {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* タグ間の隙間 */
}

.member-tags span {
    display: inline-block;
    background: #eef5ff; /* 少し濃い目の青背景 */
    color: #0061ff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ▼▼▼ スマホ対応 (Responsive) ▼▼▼ */
@media (max-width: 768px) {
    .member-list-wrapper {
        gap: 40px; /* スマホではカード間の隙間を少し狭く */
    }

    .member-detail-card {
        flex-direction: column;
        padding: 30px 20px;
        align-items: center;
        gap: 30px;
    }

    .member-photo-wrapper {
        width: 180px; /* スマホでは写真を少し小さく */
    }

    .member-name {
        font-size: 1.5rem;
    }

    .member-en {
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }
}


/* =========================================
   Legal Pages (Terms & Privacy)
   ========================================= */

/* メインセクション */
.legal-section {
    padding: 80px 0;
    background-color: #fff;
}

/* 読みやすいように幅を制限 */
.legal-container {
    max-width: 800px; 
    margin: 0 auto;
}

.legal-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
}

/* 制定日 */
.legal-date {
    text-align: right;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 40px;
}

/* 見出し (第◯条) */
.legal-heading {
    font-size: 1.4rem;
    color: #0b1c3c;
    margin-top: 50px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef5ff; /* 薄い青のライン */
    font-weight: 700;
}

/* リスト（箇条書き・連番） */
.legal-content ul,
.legal-content ol {
    margin: 20px 0 30px 20px;
    padding: 0;
    color: #555;
}

.legal-content ul li {
    list-style: disc;
    margin-bottom: 10px;
    padding-left: 5px;
}

.legal-content ol li {
    margin-bottom: 10px;
    padding-left: 5px;
    /* olのデフォルト番号を使用 */
}

/* プライバシーポリシー内のお問い合わせボタンエリア */
.legal-contact-area {
    margin-top: 30px;
    padding: 30px;
    background: #f8faff;
    border-radius: 12px;
    border: 1px solid #e1e5ee;
    text-align: center; /* ボタンを中央に配置 */
}

/* スマホ対応（念のため） */
@media (max-width: 768px) {
    .legal-contact-area {
        padding: 20px;
    }
}

/* 末尾の「以上」 */
.legal-end {
    margin-top: 60px;
    text-align: right;
    font-weight: bold;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .legal-heading {
        font-size: 1.2rem;
        margin-top: 40px;
    }
    .legal-container {
        padding: 0 20px;
    }
}

/* =========================================
   Contact Form Page
   ========================================= */

.contact-form-section {
    padding: 80px 0;
    background: #fff;
}

.form-lead {
    text-align: center;
    margin-bottom: 60px;
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}

/* フォームの外枠 */
.contact-form {
    max-width: 700px; /* 幅を制限して見やすく */
    margin: 0 auto;
    padding: 0 20px;
}

/* 各入力項目 */
.form-item {
    margin-bottom: 30px;
}

/* ラベル */
.form-label {
    display: block;
    font-weight: 700;
    color: #0b1c3c;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

/* 必須バッジ */
.required-badge {
    display: inline-block;
    background: #ff4d4f;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: text-bottom;
}

/* 入力フィールド共通 */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    border: 1px solid #dcebff;
    border-radius: 8px;
    background: #f8faff;
    color: #333;
    font-family: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box; /* パディングを含める */
}

/* フォーカス時のデザイン（青く光る） */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: #0061ff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.1);
}

/* テキストエリア */
.form-textarea {
    height: 200px;
    resize: vertical; /* 縦方向のみリサイズ可 */
}

/* セレクトボックスの矢印カスタマイズ */
.select-wrapper {
    position: relative;
}
.select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 10px;
    height: 6px;
    background-color: #8892b0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateY(-50%);
    pointer-events: none;
}
.form-select {
    appearance: none; /* 標準の矢印を消す */
    cursor: pointer;
}

/* プライバシーポリシー同意エリア */
.form-privacy {
    text-align: center;
    margin: 40px 0;
}

.privacy-checkbox-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
}

.privacy-checkbox-label input {
    display: none; /* 元のチェックボックスは隠す */
}

/* カスタムチェックボックス */
.checkbox-dummy {
    width: 20px;
    height: 20px;
    border: 2px solid #dcebff;
    border-radius: 4px;
    background: #fff;
    margin-right: 10px;
    position: relative;
    transition: all 0.2s;
}

/* チェックされた時のスタイル */
.privacy-checkbox-label input:checked + .checkbox-dummy {
    background: #0061ff;
    border-color: #0061ff;
}

/* チェックマーク */
.privacy-checkbox-label input:checked + .checkbox-dummy::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.privacy-checkbox-label a {
    color: #0061ff;
    text-decoration: underline;
    margin-right: 4px;
}

/* 送信ボタンエリア */
.form-submit {
    text-align: center;
}

.btn-submit {
    border: none;
    cursor: pointer;
    min-width: 240px;
}

/* エラー時の入力フォーム（赤枠と背景色） */
.form-input.error-border,
.form-select.error-border,
.form-textarea.error-border {
    border-color: #ff4d4f !important;
    background-color: #fff1f0 !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .contact-form {
        padding: 0;
    }
    .form-item {
        margin-bottom: 25px;
    }
}

/* --- Form Validation Styles --- */

/* エラーメッセージテキスト */
.error-message {
    color: #ff4d4f;       /* 赤色 */
    font-size: 0.9rem;
    font-weight: 700;
    margin-top: 10px;
    display: none;        /* 最初は非表示 */
    animation: fadeIn 0.3s ease;
}

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

/* エラー時のチェックボックス（枠線を赤くする） */
.has-error .checkbox-dummy {
    border-color: #ff4d4f !important;
    background-color: #fff1f0 !important;
}