/* CSS変数定義 */

:root {

    --primary-color: #609;

    --secondary-color: #00f;

    --accent-color: #ffc;

    --success-color: #4CAF50;

    --warning-color: #ff9800;

    --danger-color: #f44336;

    --text-color: #333;

    --bg-color: #fff;

    --gray-light: #f5f5f5;

    --gray-medium: #e0e0e0;

    --container-width: 1200px;

    --content-width: calc(100% - 320px);

    --sidebar-width: 300px;

    --transition-speed: 0.3s;

}



/* リセット */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* ベース */

html {

    scroll-behavior: smooth;

}



body {

    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, -apple-system, BlinkMacSystemFont, sans-serif;

    font-size: 16px;

    line-height: 1.7;

    color: var(--text-color);

    background: #f8f8f8;

}



/* リンク */

a {

    color: var(--secondary-color);

    text-decoration: none;

    transition: all var(--transition-speed);

}



a:hover {

    text-decoration: underline;

    opacity: 0.8;

}



/* キーボード操作時のフォーカス表示を強化 (アクセシビリティ) */

a:focus {

    outline: 2px solid var(--primary-color);

    outline-offset: 2px;

}



/* コンテナ */

.container {

    max-width: var(--container-width);

    margin: 0 auto;

    background: var(--bg-color);

    box-shadow: 0 0 20px rgba(0,0,0,0.05);

}



/* ヘッダー */

.header {

    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);

    border-bottom: 3px solid var(--primary-color);

    padding: 15px 20px;

    position: relative;

}



.header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

}



.headerlogo img {

    display: block;

    max-width: 100%;

    height: auto;

}



.header-right {

    flex: 1;

    max-width: 400px;

}



/* 検索フォーム */

#cse-search-box div {

    display: flex;

    gap: 0;

}



#cse-search-box input[type="text"] {

    flex: 1;

    padding: 8px 12px;

    border: 2px solid #ddd;

    border-radius: 4px 0 0 4px;

    font-size: 14px;

    transition: border-color var(--transition-speed);

}



#cse-search-box input[type="text"]:focus {

    outline: none;

    border-color: var(--primary-color);

}



#cse-search-box input[type="submit"] {

    padding: 8px 20px;

    background: var(--success-color);

    color: white;

    border: none;

    border-radius: 0 4px 4px 0;

    cursor: pointer;

    font-weight: bold;

    transition: background var(--transition-speed);

}



#cse-search-box input[type="submit"]:hover {

    background: #45a049;

}



/* ハンバーガーメニュー */

.hamburger {

    display: none;

    flex-direction: column;

    cursor: pointer;

    padding: 10px;

    background: none;

    border: none;

    z-index: 1001;

    position: fixed;

    top: 15px;

    right: 15px;

}



.hamburger span {

    width: 25px;

    height: 3px;

    background-color: var(--primary-color);

    margin: 3px 0;

    transition: 0.3s;

    display: block;

}



.hamburger.active span:nth-child(1) {

    transform: rotate(-45deg) translate(-5px, 6px);

}



.hamburger.active span:nth-child(2) {

    opacity: 0;

}



.hamburger.active span:nth-child(3) {

    transform: rotate(45deg) translate(-5px, -6px);

}



.sidebar-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: rgba(0,0,0,0.5);

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.sidebar-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* パンくずリスト */

.breadcrumb {

    background: var(--gray-light);

    padding: 10px 20px;

    border-bottom: 1px solid var(--gray-medium);

}



.breadcrumb ol {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    font-size: 14px;

}



/* セレクタを厳密化 */

.breadcrumb ol li::after {

    content: ">";

    margin: 0 8px;

    color: #999;

}



.breadcrumb ol li:last-child::after {

    content: "";

}



.breadcrumb a {

    color: var(--primary-color);

}



/* 広告エリア */

.contentup, .contentdown {

    padding: 20px;

    text-align: center;

    background: #fafafa;

    border-top: 1px solid var(--gray-medium);

    border-bottom: 1px solid var(--gray-medium);

}



/* メインレイアウト */

.main-layout {

    display: flex;

    gap: 20px;

    padding: 20px;

    min-height: 500px;

}



/* メインコンテンツ */

.content {

    flex: 1;

    width: var(--content-width);

    background: white;

    padding: 30px;

    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.05);

}



/* 見出し */

h1 {

    font-size: 28px;

    color: var(--primary-color);

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 3px solid var(--primary-color);

}



h2 {

    font-size: 22px;

    color: #444;

    margin: 30px 0 15px;

    padding: 8px 0 8px 15px;

    border-left: 4px solid var(--primary-color);

    background: linear-gradient(to right, rgba(102,0,153,0.05) 0%, transparent 100%);

}



h3 {

    font-size: 18px;

    color: #555;

    margin: 25px 0 10px;

    padding-left: 10px;

    border-left: 3px solid var(--accent-color);

}



h4 {

    font-size: 16px;

    color: #666;

    margin: 20px 0 10px;

    font-weight: bold;

}



/* ★ 追加1: データまとめ（h2.data-conclusion）のスタイル */

h2.data-conclusion {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;

    color: white !important;

    padding: 15px 20px !important;

    border-left: none !important;

    border-radius: 8px;

    margin-top: 0 !important;

    margin-bottom: 30px !important;

    box-shadow: 0 4px 12px rgba(102, 0, 153, 0.2);

    font-size: 24px;

}



/* 段落 */

p {

    margin-bottom: 15px;

    line-height: 1.8;

}



/* リスト */

ul, ol {

    margin: 15px 0;

    padding-left: 30px;

}



li {

    margin-bottom: 8px;

}



/* ボックス装飾 */

.summary-box {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    padding: 20px;

    border-radius: 8px;

    margin-bottom: 30px;

    box-shadow: 0 4px 15px rgba(102,0,153,0.2);

}



.summary-box p {

    margin: 0;

    font-size: 16px;

    line-height: 1.6;

}



.info-box {

    background: var(--gray-light);

    border-left: 4px solid var(--primary-color);

    padding: 15px;

    margin: 20px 0;

    border-radius: 4px;

}



.point-box {

    background: #fff9e6;

    border: 2px solid #ffd700;

    padding: 15px;

    margin: 20px 0;

    border-radius: 8px;

}



.point-box h4 {

    color: #ff6b00;

    margin-top: 0;

}



/* 回遊ボックス（データページ用） */

.navigation-box {

    background: #e8f4f8;

    padding: 25px;

    margin: 40px 0;

    border-left: 5px solid #2874b8;

    border-radius: 4px;

}



.navigation-box h4 {

    margin-top: 0;

    color: #2874b8;

    font-size: 1.1em;

}



.navigation-box p {

    margin-bottom: 20px;

    color: #555;

}



.navigation-box ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.navigation-box li {

    margin: 15px 0;

    padding: 10px;

    background: white;

    border-radius: 5px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

    transition: transform 0.2s, box-shadow 0.2s;

}



.navigation-box li:hover {

    transform: translateY(-2px);

    box-shadow: 0 3px 8px rgba(0,0,0,0.15);

}



.navigation-box li strong {

    display: block;

    margin-bottom: 5px;

}



.navigation-box li strong a {

    color: #2874b8;

    text-decoration: none;

    font-size: 1em;

}



.navigation-box li strong a:hover {

    text-decoration: underline;

}



.navigation-box li span {

    display: block;

    font-size: 0.9em;

    color: #666;

    line-height: 1.6;

}



/* テーブル */

.table-wrapper {

    overflow-x: auto;

    margin: 20px 0;

}



.data-table {

    width: 100%;

    border-collapse: collapse;

    background: white;

}



.data-table caption {

    font-weight: bold;

    margin-bottom: 10px;

    text-align: left;

}



/* テーブルヘッダーのアクセシビリティ視認性強化 */

.data-table th {

    background: var(--primary-color);

    color: white;

    padding: 12px;

    text-align: left;

    font-weight: normal;

    border-right: 1px solid rgba(255,255,255,0.2); 

}

/* 固定列（th.fixed-col）を強調 */

.data-table th.fixed-col {

    font-weight: bold;

    background: #507;

}



.data-table td {

    padding: 12px;

    border-bottom: 1px solid var(--gray-medium);

}

/* 固定列のセルの境界を強調 */

.data-table td.fixed-col {

    font-weight: 500;

    background: #fcfcfc;

    border-right: 1px solid var(--gray-medium); 

}



.data-table tbody tr:hover {

    background: var(--gray-light);

}



/* 関連リンク */

.related-links {

    background: #f9f9f9;

    padding: 20px;

    border-radius: 8px;

    margin-top: 30px;

}



.related-links h3 {

    margin-top: 0;

}



.related-links ul {

    list-style: none;

    padding: 0;

}



.related-links li {

    padding: 8px 0;

    border-bottom: 1px dotted #ddd;

}



.related-links li:last-child {

    border-bottom: none;

}



.related-links a {

    display: block;

    padding-left: 20px;

    position: relative;

}



.related-links a::before {

    content: "▶";

    position: absolute;

    left: 0;

    color: var(--primary-color);

}



/* サイドバー */

.sidebar1 {

    width: var(--sidebar-width);

    flex-shrink: 0;

}



/* メニュー */

.menu1 {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: #fff;

    padding: 10px 15px;

    font-weight: bold;

    font-size: 16px;

    border-radius: 4px 4px 0 0;

    position: relative;

}



.menu1::after {

    content: "▲";

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 12px;

    color: #666;

}



.menu_box {

    background: white;

    border: 1px solid var(--gray-medium);

    border-top: none;

    margin-bottom: 20px;

    border-radius: 0 0 4px 4px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.05);

}



/* サイドバーナビゲーション - 階層別グラデーション */

.subs {

    list-style: none;

    padding: 0;

}



.subs li {

    margin: 0;

}



/* 第1階層 - 最も薄い紫 */

.subs > li > a {

    display: block;

    padding: 10px 15px;

    background: linear-gradient(135deg, #f3f4fb 0%, #e8eaf6 100%);

    color: var(--text-color);

    border-bottom: 1px solid #e0e0e0;

    font-weight: 500;

    transition: all var(--transition-speed);

    text-decoration: none;

}



.subs > li > a:hover {

    background: linear-gradient(135deg, #e8eaf6 0%, #d1d9ff 100%);

    color: var(--primary-color);

    padding-left: 20px;

}



/* 第2階層 - 中間の紫 */

.subs ul {

    list-style: none;

    padding: 0;

    background: #f0f2ff;

}



.subs ul a {

    display: block;

    padding: 10px 15px 10px 30px;

    background: linear-gradient(135deg, #e8eaf6 0%, #d1d9ff 100%);

    color: #555;

    font-size: 16px;

    border-bottom: 1px solid #d0d0d0;

    transition: all var(--transition-speed);

    text-decoration: none;

}



.subs ul a:hover {

    background: linear-gradient(135deg, #d1d9ff 0%, #c5cae9 100%);

    color: var(--primary-color);

    padding-left: 35px;

}



/* 第3階層 - 最も濃い紫 */

.subs ul ul {

    background: #e0e3f0;

}



.subs ul ul a {

    padding: 8px 15px 8px 45px;

    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);

    color: #666;

    font-size: 15px;

    border-bottom: 1px solid #c0c0c0;

}



.subs ul ul a:hover {

    background: linear-gradient(135deg, #c5cae9 0%, #b39ddb 100%);

    color: var(--primary-color);

    padding-left: 50px;

}



/* フッター */

.footer {

    background: linear-gradient(to bottom, #f5f5f5 0%, #e0e0e0 100%);

    color: #333;

    padding: 30px 20px 20px;

    margin-top: 40px;

    border-top: 3px solid var(--primary-color);

}



.footer-nav ul {

    list-style: none;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    padding: 0 0 20px;

    border-bottom: 1px solid #ccc;

}



.footer-nav a {

    color: var(--primary-color);

    font-weight: 500;

}



.footer-nav a:hover {

    color: var(--secondary-color);

    text-decoration: underline;

}



.footer-info {

    text-align: center;

    padding: 20px 0;

    font-size: 14px;

    line-height: 1.6;

    color: #666;

}



.footer-info p {

    margin: 5px 0;

}



.copyright {

    text-align: center;

    padding: 15px;

    background: #ddd;

    font-size: 12px;

    color: #666;

    border-top: 1px solid #bbb;

}



.copyright p {

    margin: 3px 0;

}



.copyright a {

    color: var(--primary-color);

}



/* ページトップボタン */

.pagetop {

    position: fixed;

    bottom: 30px;

    right: 30px;

    width: 50px;

    height: 50px;

    background: var(--primary-color);

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    opacity: 0;

    pointer-events: none;

    transition: all var(--transition-speed);

    box-shadow: 0 2px 10px rgba(0,0,0,0.2);

    z-index: 1000;

}



.pagetop.show {

    opacity: 0.8;

    pointer-events: auto;

}



.pagetop:hover {

    opacity: 1;

    transform: scale(1.1);

}



/* レスポンシブ - タブレット */

@media (max-width: 768px) {

    .hamburger {

        display: flex;

    }

    

    .sidebar1 {

        position: fixed;

        top: 0;

        left: -100%;

        width: 80%;

        height: 100vh;

        background: white;

        transition: left 0.3s ease;

        overflow-y: auto;

        z-index: 1000;

        padding-top: 60px;

        box-shadow: 2px 0 5px rgba(0,0,0,0.1);

    }

    

    .sidebar1.active {

        left: 0;

    }



    .container {

        width: 100%;

    }



    .main-layout {

        flex-direction: column;

    }



    .content {

        width: 100%;

        padding: 20px;

    }



    h1 {

        font-size: 24px;

    }



    h2 {

        font-size: 20px;

    }



    .header-content {

        flex-direction: column;

        align-items: center;

    }



    .header-right {

        width: 100%;

        max-width: none;

    }



    .navigation-box {

        padding: 20px;

        margin: 30px 0;

    }



    .navigation-box li {

        padding: 12px;

    }

    

    .table-wrapper {

        position: relative;

    }

    

    .data-table .fixed-col {

        position: sticky;

        left: 0;

        z-index: 10;

    }

    

    .data-table th.fixed-col {

        z-index: 20;

    }

}



/* レスポンシブ - スマートフォン */

@media (max-width: 480px) {

    body {

        font-size: 14px;

    }



    .sidebar1 {

        width: 100%;

        padding: 0 8px;

        padding-top: 60px;

    }



    .content {

        padding: 15px;

    }



    h1 {

        font-size: 20px;

    }



    h2 {

        font-size: 18px;

    }



    h3 {

        font-size: 16px;

    }



    .breadcrumb {

        font-size: 12px;

        padding: 8px 15px;

    }



    .footer-nav ul {

        flex-direction: column;

        gap: 10px;

    }



    .data-table {

        font-size: 12px;

    }



    .data-table th,

    .data-table td {

        padding: 8px;

    }



    .pagetop {

        bottom: 20px;

        right: 20px;

        width: 40px;

        height: 40px;

    }



    .menu1 {

        font-size: 14px;

        padding: 12px;

        border-radius: 0;

    }



    .subs > li > a {

        padding: 12px 15px;

        font-size: 14px;

        border-bottom: 1px solid #e0e0e0;

    }



    .subs ul a {

        padding: 12px 15px 12px 25px;

        font-size: 14px;

    }



    .subs ul ul a {

        padding: 10px 15px 10px 35px;

        font-size: 13px;

    }



    .navigation-box {

        padding: 15px;

        margin: 25px 0;

    }



    .navigation-box h4 {

        font-size: 1em;

    }



    .navigation-box li {

        padding: 10px;

        margin: 12px 0;

    }



    .navigation-box li span {

        font-size: 0.85em;

    }

}



/* FAQ専用CSS */

.faq-item {

    margin-bottom: 15px;

    border: 1px solid #ddd;

    border-radius: 8px;

    overflow: hidden;

}



.faq-question {

    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

    padding: 15px 20px;

    margin: 0;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 16px;

    font-weight: 600;

    color: #333;

    border-bottom: 1px solid #ddd;

    transition: background 0.3s ease;

}



.faq-question:hover {

    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);

}



.faq-toggle {

    font-size: 20px;

    font-weight: bold;

    color: #609;

    min-width: 20px;

    text-align: center;

}



.faq-answer {

    display: none;

    padding: 20px;

    background: white;

    line-height: 1.8;

}



.faq-item.active .faq-question {

    background: linear-gradient(135deg, #609 0%, #5a2d8a 100%);

    color: white;

}



.faq-item.active .faq-toggle {

    color: white;

}



/* テーブルラッパーのoverflow-x設定 */

.table-wrapper {

    overflow-x: auto !important;

    margin: 20px 0;

    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}



/* ===== 診断ツール用CSS（外部化） ===== */

.tk-box {

    max-width: 650px;

    margin: 20px auto;

    background: #fff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}



.tk-t {

    font-size: 1.2rem;

    color: #667eea;

    text-align: center;

    margin-bottom: 12px;

    font-weight: bold;

}



.tk-q {

    display: flex;

    gap: 8px;

    margin-bottom: 10px;

    flex-wrap: wrap;

}



.tk-q h3 {

    font-size: 0.85rem;

    width: 100%;

    margin: 0 0 6px 0;

    color: #555;

    border: none;

    padding: 0;

}



.tk-o {

    background: #fff;

    border: 2px solid #ddd;

    padding: 8px 12px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 0.9rem;

    flex: 1;

    text-align: center;

    min-width: calc(33.3% - 8px);

    transition: all 0.3s ease;

}



.tk-o:hover {

    border-color: #667eea;

    background: #f0f4ff;

}



.tk-o.s {

    border-color: #667eea;

    background: #667eea;

    color: #fff;

    font-weight: bold;

}



.tk-b {

    background: linear-gradient(135deg, #f093fb, #f5576c);

    color: #fff;

    border: 0;

    padding: 12px 30px;

    font-size: 1rem;

    font-weight: bold;

    border-radius: 40px;

    cursor: pointer;

    display: block;

    margin: 12px auto;

    transition: all 0.3s ease;

}



.tk-b:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);

}



.tk-b:disabled {

    background: #ccc;

    cursor: not-allowed;

}



.tk-r {

    display: none;

    margin-top: 15px;

    padding: 15px;

    background: linear-gradient(135deg, #667eea, #764ba2);

    color: #fff;

    border-radius: 8px;

    text-align: center;

}



.tk-r.on {

    display: block;

}



.tk-r h3 {

    margin: 0 0 8px 0;

    font-size: 1.1rem;

    border: none;

    padding: 0;

}



.tk-r p {

    margin: 0 0 10px 0;

    font-size: 0.9rem;

}



.tk-a {

    display: inline-block;

    background: #fff;

    color: #667eea;

    padding: 10px 25px;

    border-radius: 40px;

    text-decoration: none;

    font-weight: bold;

    font-size: 0.95rem;

    transition: all 0.3s ease;

}



.tk-a:hover {

    transform: scale(1.05);

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

}



/* モバイル対応 */

@media (max-width: 768px) {

    .faq-question {

        padding: 12px 15px;

        font-size: 14px;

    }



    .faq-answer {

        padding: 15px;

    }



    .table-wrapper {

        margin: 15px -15px;

        border-radius: 0;

    }

}



/* モバイル対応 - 診断ツール */

@media (max-width: 600px) {

    .tk-o {

        min-width: calc(50% - 8px);

    }



    .tk-box {

        padding: 15px;

        margin: 15px auto;

    }

}