/* ==========================================================================
   特定商取引法ページ (Modern Tech Legal Style)
   ========================================================================== */

/* ヘッダー周り */
.legal-header {
    text-align: center;
    margin-bottom: 40px;
}
.legal-header h1 {
    /* 既存のh1スタイルを継承しつつ微調整 */
    margin-bottom: 5px;
}
.legal-sub {
    font-family: 'JetBrains Mono', monospace;
    color: #888;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0;
}

/* コンテナのデザイン */
.legal-container.tech-style {
    max-width: 900px;
    margin: 0 auto 60px;
    background-color: #ffffff;
    padding: 0; /* 中身のリストで余白を取るため0に */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* 角丸を効かせる */
    border: 1px solid #e1e4e8;
    
    /* 上部にアクセントライン（テック感） */
    border-top: 4px solid #26a081; 
    position: relative;
}

/* --- リストのデザイン (Grid Layout) --- */
.legal-list {
    margin: 0;
    padding: 0;
}

.legal-row {
    display: grid;
    grid-template-columns: 240px 1fr; /* 左(項目名)固定、右(内容)可変 */
    border-bottom: 1px solid #f0f0f0;
}

.legal-row:last-child {
    border-bottom: none;
}

/* 項目名 (dt) */
.legal-row dt {
    background-color: #f8f9fa;
    padding: 20px 25px;
    font-weight: bold;
    color: #4a5568;
    display: flex;
    align-items: center; /* 上下中央揃え */
    font-size: 15px;
}

/* 内容 (dd) */
.legal-row dd {
    margin: 0;
    padding: 20px 25px;
    color: #2d3748;
    font-size: 15px;
    line-height: 1.8;
}

/* 補足情報の文字 */
.legal-row .note {
    font-size: 13px;
    color: #718096;
    margin-top: 4px;
    display: block;
}

/* 開発者向けフォント (URLやメアド) */
.mono-font {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    color: #1a73e8 !important; /* 青色でリンクっぽく */
}
.mono-font a {
    color: inherit;
    text-decoration: none;
}
.mono-font a:hover {
    text-decoration: underline;
}

/* --- ダークモード対応 --- */
body.dark-mode .legal-sub { color: #a0a0a0; }

body.dark-mode .legal-container.tech-style {
    background-color: #1e1e1e;
    border-color: #333;
    border-top-color: #58a6ff; /* 明るい青 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .legal-row {
    border-bottom-color: #333;
}

body.dark-mode .legal-row dt {
    background-color: #252627; /* 少し明るい黒 */
    color: #e2e8f0;
}

body.dark-mode .legal-row dd {
    color: #c9d1d9;
}

body.dark-mode .legal-row .note {
    color: #8b949e;
}
body.dark-mode .mono-font {
    color: #58a6ff !important;
}
/* ==========================================================================
   モダン・ヒーローヘッダー共通スタイル (SQLチェッカー・法務ページ等)
   ========================================================================== */

.tech-hero-header {
    text-align: center;
    padding: 60px 20px 50px;
    background-color: #f8fafc;
    /* 背景にうっすら緑の光彩を入れる */
    background-image: radial-gradient(circle at 50% 40%, rgba(74, 222, 128, 0.1) 0%, rgba(248, 250, 252, 0) 60%);
    margin-bottom: 40px;
    
}

/* ロゴとテキストを横並びにするラッパー */
.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 25px;
}

/* アイコンボックス */
.logo-icon {
    width: 60px;
    height: 60px;
    /* 鮮やかなグリーンのグラデーション */
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3); /* ふんわりした影 */
    transform: translateY(-2px);
}

.logo-icon svg {
    width: 30px;
    height: 30px;
}

/* テキストグループ */
.logo-text-group {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

/* メインタイトル (英語) */
.main-title {
    font-family: 'Inter', 'Segoe UI', sans-serif; /* 英字フォント */
    font-size: 3rem;
    font-weight: 800;
    color: #334155;
    margin: 0;
    letter-spacing: -0.02em;
    /* 以前の装飾をリセット */
    text-shadow: none; 
    background: none; 
    box-shadow: none;
    padding: 0;
    border: none;
}

/* タイトルの一部をグラデーションにするクラス */
.gradient-text {
    background: linear-gradient(135deg, #4ade80 0%, #84cc16 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* サブタイトル (日本語) */
.sub-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #64748b; /* グレー */
    margin: 6px 0 0 2px;
    letter-spacing: 0.05em;
    text-transform: none;
}

/* 説明文 */
.hero-description {
    font-size: 1rem;
    color: #475569;
    line-height: 1.8;
    margin-top: 0;
    font-weight: 500;
}

.hero-description .highlight {
    background: linear-gradient(transparent 60%, #bef264 60%);
    padding: 0 4px;
    font-weight: bold;
    color: #1a202c;
}

/* --- ダークモード対応 --- */
body.dark-mode .tech-hero-header {
    background-color: #1e1e1e;
    background-image: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.15) 0%, rgba(30, 30, 30, 0) 70%);
    border-bottom-color: #333;
}
body.dark-mode .main-title { color: #f1f5f9; }
body.dark-mode .sub-title { color: #94a3b8; }
body.dark-mode .hero-description { color: #cbd5e1; }
body.dark-mode .hero-description .highlight {
    background: linear-gradient(transparent 60%, rgba(132, 204, 22, 0.4) 60%);
    color: #fff;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .logo-wrapper {
        flex-direction: column; /* スマホでは縦並び */
        gap: 10px;
    }
    .logo-text-group {
        text-align: center;
    }
    .main-title {
        font-size: 2.2rem;
    }
}

/* --- スマホ・タブレット対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .legal-container.tech-style {
        margin-bottom: 40px;
        border-radius: 8px;
    }
    
    /* グリッドを解除して縦積みに */
    .legal-row {
        display: block; 
    }
    
    .legal-row dt {
        background-color: transparent; /* 背景色を消す */
        padding: 15px 20px 5px 20px; /* 下の余白を詰める */
        color: #1a73e8; /* 項目名を青くして区別しやすく */
        font-size: 14px;
    }
    body.dark-mode .legal-row dt {
        color: #58a6ff;
    }
    
    .legal-row dd {
        padding: 5px 20px 20px 20px; /* 上の余白を詰める */
        padding-left: 20px;
    }
}