:root {
    /* Color Palette - Reflected from Analysis Report 3.2 */
    --primary-blue: #1B335F;      /* Logo Blue (Brand Primary) */
    --primary-green: #27ae60;    /* Environment & Sustainability (Sub) */
    --secondary-blue: #2980b9;   /* Water, Cleanliness & Reliability */
    --accent-red: #8B0000;       /* Logo Accent（マロンカラー：深い赤・黒寄り） */
    --bg-white: #ffffff;
    --bg-light-gray: #f8f9fa;
    --text-main: #1a2e44;        /* Deep Blue-Gray */
    --text-gray: #465f73;        /* Darkened for better contrast */
    --border-color: #d0dce8;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 101, 180, 0.15);
    
    /* Spacing */
    --section-padding: 80px 5%;
    --border-radius: 8px;
    
    /* Typography */
    --font-main: 'Inter', 'Noto Sans JP', sans-serif;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-margin-top: 100px; /* Account for fixed header */
}

body {
    background-color: var(--bg-white);
    color: var(--text-main);
    font-family: var(--font-main);
    line-height: 1.7;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-main);
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

li {
    list-style: none;
}

/* Glassmorphism / Clean Panel Utility */
.glass-panel {
    background: var(--bg-white);
    border: 1px solid rgba(208, 220, 232, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    border-radius: var(--border-radius);
    padding: 30px;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    color: var(--primary-blue);
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background-color: var(--primary-blue);
    border-radius: 2px;
}

/* Header: master.css / sp_master.css で管理 */

/* Hero Section */
#hero {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #F2F4F6;
    padding: 0 5%;
}

h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.3;
    color: var(--text-main);
}

#hero-typing {
    color: #0a3270;
}

h1 .highlight {
    color: #0a3270;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content p {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-main);
    max-width: 800px;
    margin: 0 auto 40px;
}

.hero-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-primary {
    background: var(--primary-blue);
    color: white;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 101, 180, 0.15);
}

.btn-secondary {
    border: 2px solid var(--primary-blue);
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-blue);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: bold;
}

/* About Section */
#about {
    padding: var(--section-padding);
    background: #fafbfc;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.comparison-card {
    padding: 40px;
    border-radius: var(--border-radius);
    background: var(--bg-white);
    border: 1px solid rgba(208, 220, 232, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
}

.comparison-card.select {
    border: 1.5px solid rgba(0, 101, 180, 0.6);
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 101, 180, 0.04);
}

.badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: var(--primary-blue);
    color: white;
    padding: 6px 16px;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 20px;
}

.comparison-card h3 {
    margin-bottom: 25px;
    font-size: 1.4rem;
    color: var(--text-main);
}

.comparison-card ul li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    color: var(--text-main);
}

.comparison-card ul li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--primary-green);
    font-size: 0.8rem;
}

/* Products & Services セクション */
#services-integrated {
    padding: var(--section-padding);
}

/* Products & Services Integrated Grid */
.services-integrated-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 25px;
    margin-top: 40px;
}

.service-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.service-card-link:hover {
    transform: translateY(-8px);
}

.service-item {
    height: 100%;
    padding: 30px;
    border: 1px solid rgba(208, 220, 232, 0.3);
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
    border-radius: var(--border-radius);
}

.service-card-link:hover .service-item {
    border-color: rgba(0, 101, 180, 0.4);
    box-shadow: 0 3px 10px rgba(0, 101, 180, 0.06);
}

.service-icon {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 20px;
    opacity: 0.3;
}

.simulator-frame {
    width: 100%;
    height: 1480px;
    border: none;
    border-radius: var(--border-radius);
    display: block;
}

@media (max-width: 768px) {
    .simulator-frame {
        height: 1800px;
    }
}

.sub-section-video {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto 30px;
    border-radius: var(--border-radius);
    background: #000;
}

.sub-section-gif {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto 30px;
    border-radius: var(--border-radius);
}

.service-card-img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    margin-bottom: 15px;
    border-radius: var(--border-radius);
}

.service-item h4 {
    font-size: 1.25rem;
    color: var(--text-main);
    margin-bottom: 15px;
    font-weight: 700;
}

.service-item p {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.6;
}

@media (max-width: 992px) {
    .services-integrated-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-integrated-grid {
        grid-template-columns: 1fr;
    }
}

/* Service Grid */
#services {
    padding: var(--section-padding);
    background: var(--bg-light-gray);
}

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

.service-card {
    background: var(--bg-white);
    padding: 40px;
    border: 1px solid rgba(208, 220, 232, 0.3);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
}

.service-tag {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-blue);
    opacity: 0.15;
    position: absolute;
    top: 15px;
    right: 20px;
}

.ai-catalogue-btn {
    margin-top: 25px;
    padding: 12px;
    background: var(--bg-light-gray);
    border: 1px solid var(--secondary-blue);
    color: var(--secondary-blue);
    text-align: center;
    cursor: pointer;
    border-radius: var(--border-radius);
    font-weight: bold;
}

/* Calculator Section */
.calculator-section {
    padding: var(--section-padding);
}

.calc-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}

.calc-input label {
    font-weight: bold;
    font-size: 1.1rem;
}

.calc-input input {
    width: 100%;
    margin: 25px 0;
    accent-color: var(--primary-blue);
}

.result-item {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(208, 220, 232, 0.3);
    padding-bottom: 10px;
}

.result-item .value {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.3rem;
}

.highlight-box {
    background: var(--bg-light-gray);
    border-left: 5px solid var(--secondary-blue);
}

.highlight-box .value {
    color: var(--secondary-blue);
    font-size: 2rem;
}

/* Evidence Section */
#evidence {
    padding: var(--section-padding);
    background: #fafbfc;
}

.tab-btn {
    background: var(--bg-white);
    border: 1px solid rgba(208, 220, 232, 0.4);
    color: var(--text-gray);
    padding: 12px 30px;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
}

.tab-btn.active {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.ev-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.img-placeholder {
    height: 220px;
    background: #f0f2f5;
    border: 1px solid rgba(208, 220, 232, 0.3);
    border-radius: var(--border-radius);
}

.img-placeholder.clear {
    background: #e3f2fd;
}

/* News & Columns */
#news-columns {
    padding: var(--section-padding);
}

.column-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafbfc;
    border-left: 2px solid rgba(0, 101, 180, 0.3);
    padding: 20px;
    transition: 0.3s;
    font-weight: 600;
    border-radius: 0 6px 6px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
}

.column-card::after {
    content: '→';
    color: var(--primary-blue);
    font-weight: bold;
    margin-left: 15px;
    transition: transform 0.2s;
}

.column-card:hover::after {
    transform: translateX(5px);
}

.column-card:hover {
    background: #f0f5fa;
}

/* Partner Scroll */
#partners {
    padding: 60px 0;
    background: #fff;
    border-top: 1px solid rgba(208, 220, 232, 0.3);
    border-bottom: 1px solid rgba(208, 220, 232, 0.3);
    overflow: hidden; /* Hide scrollbars */
}

.scroll-container {
    width: 100%;
}

.scroll-content {
    display: flex;
    gap: 100px;
    white-space: nowrap;
    width: max-content;
    animation: scroll-right-to-left 30s linear infinite;
}

.partner {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    opacity: 1;
    letter-spacing: 2px;
}

@keyframes scroll-right-to-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Footer */
/* footer rule removed: サイト職人標準のフッター青背景を維持するため */

.footer-grid {
    display: flex;
    justify-content: space-between;
}

.footer-info h3 {
    color: var(--primary-blue);
    margin-bottom: 15px;
}

.footer-links a:hover {
    color: var(--secondary-blue);
}

@media (max-width: 768px) {
    h1 { font-size: 2.2rem; }
    .comparison-grid, .calc-body, .ev-visual, .news-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid { flex-direction: column; gap: 40px; }
}
/* Evidence Image Slider */
.evidence-content {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    padding: 30px;
}

.ev-slider {
    position: relative;
    flex: 1 1 55%;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 4 / 3;
}

.ev-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
}

.ev-slide {
    min-width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* プレースホルダータブ用スタイル */
.ev-slide-placeholder {
    background: rgba(255,255,255,0.03);
    border: 1.5px dashed rgba(255,255,255,0.2);
    border-radius: 8px;
    height: 100%;
}

.ev-placeholder-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-gray);
    text-align: center;
    padding: 20px;
}

.ev-placeholder-msg span {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.ev-placeholder-msg small {
    font-size: 0.85rem;
    line-height: 1.7;
}

.ev-slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111;
    transition: transform 0.3s;
}

.ev-slide-img.ev-rotated {
    transform: rotate(90deg);
    /* 横→縦に回転するため、元の幅/高さを入れ替えてスケール調整 */
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

.ev-img-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 0.75rem;
    padding: 6px 10px;
    text-align: center;
}

.ev-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.95);
    color: var(--primary-blue);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: background 0.2s;
}

.ev-nav:hover { background: white; }
.ev-prev { left: 10px; }
.ev-next { right: 10px; }

.ev-dots {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.ev-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.ev-dot.active {
    background: white;
}

.ev-data {
    flex: 1 1 40%;
    min-width: 0;
}

.ev-data h3 {
    font-size: 1.2rem;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .evidence-content { flex-direction: column; }
    .ev-slider { flex: 1 1 100%; width: 100%; }
    .ev-data { flex: 1 1 100%; }
}

/* エビデンス 顧客情報保護ノート */
.evidence-privacy-note {
    margin-top: 16px;
    font-size: 0.78rem;
    color: var(--text-gray);
    line-height: 1.7;
    padding: 10px 14px;
    background: rgba(0, 101, 180, 0.04);
    border-left: 3px solid rgba(0, 101, 180, 0.2);
    border-radius: 0 4px 4px 0;
}


.sub-hero {
    height: 40vh;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-top: 60px;
}

.sub-hero h1 {
    color: white;
    font-size: 3rem;
    margin-bottom: 10px;
}

.breadcrumb {
    padding: 20px 5%;
    background: var(--bg-light-gray);
    font-size: 0.9rem;
    color: var(--text-gray);
}

.breadcrumb a {
    color: var(--primary-blue);
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.sub-content {
    padding: 60px 5%;
    max-width: 1000px;
    margin: 0 auto;
}

.sub-section {
    margin-bottom: 60px;
}

.sub-section h2 {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(208, 220, 232, 0.4);
    padding-bottom: 10px;
}

.sub-section h3 {
    font-size: 1.5rem;
    margin: 30px 0 15px;
    color: var(--text-main);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.data-table th, .data-table td {
    padding: 15px;
    border: 1px solid rgba(208, 220, 232, 0.3);
    text-align: left;
}

.data-table th {
    background: var(--bg-light-gray);
    font-weight: bold;
}

.flow-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flow-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--bg-light-gray);
    padding: 25px;
    border-radius: var(--border-radius);
}

.flow-num {
    background: var(--primary-blue);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.btn-back {
    display: inline-block;
    margin-top: 40px;
    padding: 12px 30px;
    background: var(--text-main);
    color: white;
    border-radius: 50px;
    font-weight: bold;
}

.btn-back:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .sub-hero h1 { font-size: 2rem; }
}

/* =============================================
   UX/UI アップデート（readme.txt 反映）
   ============================================= */

/* パーティクルキャンバス：サイト全体の背景レイヤー */
html {
    background-color: var(--bg-white);
}
body {
    background-color: transparent;
}
#particle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.3;
}

/* ヒーロー：白背景のシンプル構成 */
#hero {
    position: relative;
    overflow: hidden;
}
.hero-content {
    position: relative;
    z-index: 1;
}

/* ヒーロー句読点カラー */
.hero-punct {
    color: #0a3270;
}

/* タイピングカーソル */
.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 0.85em;
    background: var(--primary-blue);
    margin-left: 3px;
    vertical-align: middle;
    animation: cursorBlink 0.75s step-end infinite;
}
@keyframes cursorBlink {
    50% { opacity: 0; }
}

/* スクロールインジケーター */
.scroll-indicator {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    z-index: 1;
    animation: scrollFloat 2.2s ease-in-out infinite;
    pointer-events: none;
}
.scroll-indicator .scroll-line {
    width: 1px;
    height: 36px;
    position: relative;
    overflow: hidden;
    background: rgba(127, 140, 141, 0.2);
}
.scroll-indicator .scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--secondary-blue));
    animation: scrollLineFlow 2.2s ease-in-out infinite;
}
@keyframes scrollFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}
@keyframes scrollLineFlow {
    0%   { top: -100%; }
    60%  { top: 100%; }
    100% { top: 100%; }
}

/* サービスカード：ボーダーアニメーション（光が一周） */
.service-card-link {
    position: relative;
    isolation: isolate;
    border-radius: calc(var(--border-radius) + 2px);
}
.service-card-link::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--border-radius) + 2px);
    background: linear-gradient(
        90deg,
        var(--primary-blue) 0%,
        #4da6ff 50%,
        var(--primary-blue) 100%
    );
    background-size: 200% 100%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}
.service-card-link:hover::after {
    opacity: 1;
    animation: borderLightSlide 1.8s linear infinite;
}
@keyframes borderLightSlide {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

/* サービスカード：グラスモルフィズム強化 */
.service-card-link:hover .service-item {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 8px 20px rgba(0, 101, 180, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}
.service-icon {
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.service-card-link:hover .service-icon {
    transform: scale(1.15) translateY(-4px);
    opacity: 0.65;
}

/* スクロールフェードイン（Intersection Observer 連携） */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
    will-change: opacity, transform;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Evidence：カウントアップ数値 */
.ev-countup {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-blue);
}

/* Evidence：プログレスバー */
.progress-bar-wrap {
    margin: 12px 0 8px;
}
.progress-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-main);
}
.progress-bar-track {
    height: 10px;
    background: var(--bg-light-gray);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(208, 220, 232, 0.3);
}
.progress-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-blue), #4da6ff);
    border-radius: 5px;
    transition: width 1.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: width;
}

/* prefers-reduced-motion 完全対応 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    #particle-canvas {
        display: none;
    }
    .progress-bar-fill {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════
   追加スタイル（2026-03-25 修正分）
═══════════════════════════════════════════════ */

/* ── 3つの疑問ブロック ── */
.doubt-block {
    margin: 40px 0;
    padding: 36px 40px;
    background: #f5f9fc;
    border: 1px solid rgba(0, 101, 180, 0.25);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 101, 180, 0.02);
}
.doubt-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 0.05em;
}
.doubt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.doubt-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    background: #ffffff;
    border-top: 3px solid var(--primary-blue);
    border-radius: 8px;
    padding: 28px 24px;
    box-shadow: 0 4px 16px rgba(0, 101, 180, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
.doubt-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 101, 180, 0.1);
}
.doubt-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--primary-blue);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0;
    box-shadow: 0 2px 8px rgba(0, 101, 180, 0.2);
}
.doubt-content strong {
    display: block;
    font-size: 1.2rem;
    color: var(--primary-blue);
    margin-bottom: 10px;
    line-height: 1.5;
}
.doubt-content p {
    font-size: 0.92rem;
    color: var(--text-gray);
    line-height: 1.8;
}

/* ── 外部依存からの脱却ブロック ── */
.independence-block {
    margin: 32px 0;
    padding: 32px 40px;
    background: #fafbfc;
    border-left: 2px solid rgba(0, 101, 180, 0.35);
    border-radius: 0 8px 8px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
}
.independence-text {
    font-size: 1rem;
    color: var(--text-main);
    line-height: 2;
    text-align: center;
}
@media (max-width: 768px) {
    .independence-text br { display: none; }
    .independence-block { padding: 24px 20px; }
    .doubt-block { padding: 28px 20px; }
}

/* ── シミュレーターCTAセクション ── */
.simulator-cta-block {
    background: #1B335F;
    border-radius: 16px;
    padding: 52px 40px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 20px rgba(27, 51, 95, 0.12);
    margin: 0;
}
.sim-cta-label {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.95);
    margin-bottom: 12px;
}
.sim-cta-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}
.sim-cta-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.95);
    line-height: 1.9;
    margin-bottom: 32px;
}
.sim-cta-desc small {
    opacity: 0.95;
    font-size: 0.85em;
}
.btn-sim-cta {
    display: inline-block;
    background: #fff;
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 40px;
    border-radius: 2px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.btn-sim-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
@media (max-width: 768px) {
    .simulator-cta-block { padding: 40px 24px; }
}

/* ── column-cardをリンク化 ── */
a.column-card {
    display: block;
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.2s, box-shadow 0.2s;
}
a.column-card:hover {
    background: #f5f9fc;
    box-shadow: 0 2px 8px rgba(0,101,180,0.06);
}

/* ═══════════════════════════════════════════════
   services-hcg.html 追加スタイル
═══════════════════════════════════════════════ */

/* ── 製品スペック表 ── */
.spec-table-wrap {
    margin-top: 28px;
    border: 1px solid rgba(208, 220, 232, 0.3);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.spec-table th {
    background: #f7f9fc;
    color: var(--primary-blue);
    font-weight: 600;
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(208, 220, 232, 0.3);
    width: 30%;
    white-space: nowrap;
}
.spec-table td {
    padding: 14px 20px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(208, 220, 232, 0.2);
}
.spec-table tr:last-child th,
.spec-table tr:last-child td {
    border-bottom: none;
}
.spec-note {
    font-size: 0.78rem;
    color: var(--text-gray);
    padding: 10px 20px;
    background: #fafbfc;
    border-top: 1px solid rgba(208, 220, 232, 0.3);
}

/* ── 動画プレースホルダー ── */
.video-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 20px 0;
}
.video-placeholder {
    background: #f7f9fc;
    border: 1px dashed rgba(208, 220, 232, 0.4);
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vp-icon {
    font-size: 1.4rem;
    color: var(--primary-blue);
    opacity: 0.5;
}
@media (max-width: 600px) {
    .video-placeholder-grid { grid-template-columns: 1fr; }
    .spec-table th { width: auto; }
}

/* ── 前処理装置 図面プレースホルダー ── */
.preprocessing-diagram-section {
    margin: 32px 0;
}
.preprocessing-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.preprocessing-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.1em;
    background: var(--primary-blue);
    border-radius: 2px;
}
.preprocessing-diagram-wrap {
    border: 1.5px dashed var(--primary-blue);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
}
.preprocessing-placeholder {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.preprocessing-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.pp-icon {
    font-size: 2.8rem;
    opacity: 0.3;
    color: var(--primary-blue);
}
.pp-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-blue);
    opacity: 0.7;
}
.pp-sublabel {
    font-size: 0.8rem;
    color: var(--text-gray);
    line-height: 1.6;
}
.preprocessing-note {
    font-size: 0.75rem;
    color: var(--text-gray);
    padding: 10px 16px;
    background: rgba(0,101,180,0.05);
    border-top: 1px solid rgba(0,101,180,0.1);
    margin: 0;
}

/* ── 強メッセージセクション ── */
.strong-message-section {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border-top: 3px solid var(--primary-blue);
    border-bottom: 3px solid var(--primary-blue);
    padding: 56px 40px;
    text-align: center;
    margin: 0 -5%;
}
.strong-message-main {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: 20px;
}
.strong-message-sub {
    font-size: 0.95rem;
    color: var(--text-gray);
    line-height: 1.9;
}
@media (max-width: 768px) {
    .strong-message-section { margin: 0 -20px; padding: 40px 20px; }
}

/* ── 比較表 強調行・注記 ── */
.emphasis-block {
    background: linear-gradient(90deg, #e8f4fd 0%, #f0f7ff 100%);
    border-left: 4px solid var(--primary-blue);
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 16px;
}
.emphasis-row td {
    background: #f0f7ff;
    font-weight: 600;
}
.table-note {
    font-size: 0.78rem;
    color: var(--text-gray);
    padding: 10px 16px;
    border-top: 1px solid rgba(208, 220, 232, 0.3);
    text-align: right;
}

/* ── 導入プロセス こだわり強調 ── */
.process-emphasis {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f0f7ff;
    border: 1.5px solid var(--primary-blue);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 28px;
    font-size: 0.92rem;
    color: var(--text-main);
}
.process-emphasis-icon {
    font-size: 1.1rem;
    color: var(--primary-blue);
    flex-shrink: 0;
    margin-top: 2px;
}
.process-safety-note {
    font-size: 0.82rem;
    color: var(--text-gray);
    background: #fafbfc;
    border-left: 2px solid rgba(208, 220, 232, 0.4);
    padding: 10px 16px;
    margin-top: 24px;
    border-radius: 0 6px 6px 0;
    line-height: 1.7;
}

/* ── シミュレーター改修スタイル ── */
.simulator-intro {
    font-size: 0.92rem;
    color: var(--text-gray);
    margin-bottom: 24px;
    line-height: 1.8;
}
.sim-chart-note {
    font-size: 0.8rem;
    color: #16a34a;
    font-weight: 600;
    margin-left: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
    display: inline-block;
    padding: 4px 10px;
    background: rgba(22, 163, 74, 0.06);
    border-radius: 4px;
}
.sim-10y-large {
    font-size: clamp(3rem, 8vw, 4rem) !important;
    font-weight: 700;
    line-height: 1;
    color: #16a34a;
    display: block;
    margin: 20px 0 10px 0;
}
.sim-10y-caption {
    font-size: 13px !important;
    color: #4a6077 !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}
.sim-10y-caption small {
    display: block !important;
    font-size: 11px !important;
    color: var(--text-gray) !important;
    opacity: 0.8;
    margin-top: 2px;
}
.sim-legend-swatch {
    width: 22px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    background: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.3);
}
.sim-footnotes {
    background: #fafbfc;
    border-left: 2px solid rgba(208, 220, 232, 0.4);
    padding: 14px 18px;
    font-size: 0.8rem;
    color: var(--text-gray);
    line-height: 2;
    border-radius: 0 6px 6px 0;
    margin-top: 16px;
}

/* ── シミュレーター専用ページCTA ── */
.sim-fullpage-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    color: var(--text-gray);
}
.sim-fullpage-btn {
    background: var(--primary-blue);
    color: #fff;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
}
.sim-fullpage-btn:hover {
    background: var(--secondary-blue);
    transform: translateY(-1px);
}

/* ── FAQセクション ── */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}
.faq-item {
    background: #fff;
    border: 1px solid rgba(208, 220, 232, 0.3);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.faq-q {
    background: var(--primary-blue);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 14px 20px;
}
.faq-a {
    padding: 16px 20px;
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.8;
}

/* ==========================================
   HCG / HCG-MD サービスページ改修
   ========================================== */

/* (A) sub-hero の拡張 */
.sub-hero {
  min-height: 100vh;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sub-hero .container h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.sub-hero .container p {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 16px;
  letter-spacing: 0.06em;
}

/* (C) 強メッセージの独立セクション化 */
.strong-message-section {
  padding: 120px 40px;
  text-align: center;
}
.strong-message-main {
  font-size: clamp(24px, 3.5vw, 42px);
  letter-spacing: 0.12em;
  line-height: 1.6;
}
.strong-message-sub {
  margin-top: 36px;
  font-size: 14px;
  line-height: 2.2;
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* (D) 製品ギャラリーの再構成 */
.video-placeholder-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3px;
}
.sub-section-video {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 100%;
  aspect-ratio: 16/9;
}

/* (E) 製品概要テキストの3層構造化 */
.section-label-en {
  font-family: 'DM Serif Display', serif;
  font-size: 11px;
  letter-spacing: 0.5em;
  opacity: 0.4;
  margin-bottom: 12px;
}
.section-subtitle {
  font-size: 13px;
  opacity: 0.6;
  letter-spacing: 0.06em;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(208, 220, 232, 0.3);
}

/* (F) スペック表の背景分離 */
.spec-table-wrap {
  padding: 60px 0;
}
.spec-table th {
  padding: 20px 24px;
  font-weight: 400;
  font-size: 13px;
  opacity: 0.7;
  letter-spacing: 0.06em;
  width: 180px;
  vertical-align: top;
}
.spec-table td {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.8;
  font-weight: 300;
}

/* (G) 比較表の自社列強調 */
.data-table thead th:nth-child(3) {
  color: #0065B4;
}
.data-table tbody td:nth-child(3) {
  background: rgba(0,101,180,0.05);
}
.data-table .emphasis-row td:nth-child(3) {
  background: rgba(0,101,180,0.12);
  font-weight: 600;
}

/* (H) 導入プロセスの縦線導線 */
.flow-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.flow-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0;
  position: relative;
  background: none;
  padding: 20px 0;
}
.flow-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  background: var(--bg-white);
  color: var(--primary-blue);
}
.flow-item:not(:last-child) .flow-num::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100% + 24px);
  background: var(--border-color);
}

/* (I) シミュレーターCTA */
.sim-fullpage-cta {
  padding: 80px 40px;
  text-align: center;
}

/* HCG-MD 固有スタイル */
.md-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.md-overview-text h3 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  line-height: 1.5;
}
.md-spec-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  font-size: 13px;
  margin-top: 24px;
}
.md-spec-mini dt {
  font-weight: 500;
}
.md-spec-mini dd {
  opacity: 0.7;
  font-weight: 300;
}
.md-target-facilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 40px;
  list-style: none;
  padding: 0;
}
.md-target-facilities li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(208, 220, 232, 0.3);
  font-size: 14px;
  font-weight: 300;
}
.md-target-facilities li::before {
  content: '—';
  margin-right: 12px;
  opacity: 0.8;
  color: var(--primary-blue);
}

@media (max-width: 768px) {
  .sub-hero {
    min-height: 60vh;
  }
  .md-overview-grid, .video-placeholder-grid, .md-target-facilities {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── 選べるメンテナンス体制 ── */
.maintenance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 8px;
}
.maintenance-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.maintenance-card {
    background: #fff;
    border: 1px solid rgba(208, 220, 232, 0.3);
    border-radius: 10px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
}
.maintenance-card h4 {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}
.maintenance-card p {
    font-size: 0.86rem;
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0;
    flex: 1;
}
.mc-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 4px;
}
.mc-badge {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 4px;
    align-self: flex-start;
}
.mc-badge-green { background: #dcfce7; color: #15803d; }
.mc-badge-blue  { background: #dbeafe; color: #1d4ed8; }
.mc-badge-gray  { background: #f1f5f9; color: #475569; }

/* ── グリストラップ 安全警告ブロック ── */
.safety-warning-block {
    background: #fff5f5;
    border: 1.5px solid #fca5a5;
    border-left: 5px solid #ef4444;
    border-radius: 0 8px 8px 0;
    padding: 20px 24px;
    margin: 24px 0;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-main);
}
.safety-warning-block strong {
    color: #b91c1c;
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .maintenance-grid,
    .maintenance-grid-3 { grid-template-columns: 1fr; }
}

/* ── #company / #contact セクション ── */
#company, #contact {
    padding: 80px 0;
}
#company .glass-panel,
#contact .glass-panel {
    border-radius: 8px;
}
@media (max-width: 768px) {
    #contact > div > div:first-child {
        grid-template-columns: 1fr !important;
    }
}

/* ── TOTO Premium Catalog Style ── */
.toto-style-section {
    padding: 120px 5%; /* 十分な余白 */
    background: #fff;
    color: var(--text-main);
}

.toto-style-section h2, 
.toto-style-section .serif-title {
    font-family: 'DM Serif Display', 'Noto Sans JP', serif;
    font-weight: 400;
    font-size: 2.2rem;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
    color: var(--primary-blue);
    text-align: center;
}

.toto-style-section .section-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--primary-blue);
    text-transform: uppercase;
    margin-bottom: 15px;
    text-align: center;
}

.toto-style-section h3 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}

/* 精密なデータシート形式のテーブル */
.toto-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 0.9rem;
}

.toto-spec-table th,
.toto-spec-table td {
    border: 1px solid #eee;
    padding: 16px 20px;
    text-align: left;
}

.toto-spec-table th {
    background-color: #f9f9f9;
    font-weight: 700;
    width: 30%;
    color: var(--text-gray);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* 注釈（上付き文字）と脚注 */
.sup-note {
    font-size: 0.7em;
    vertical-align: super;
    font-weight: 400;
    color: var(--primary-blue);
    margin-left: 2px;
    cursor: default;
}

.footnote-list {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.footnote-item {
    font-size: 0.75rem;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 4px;
    display: block;
}

.toto-risk-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.toto-risk-headline {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-red);
    margin-bottom: 30px;
    line-height: 1.6;
}

.toto-accent-navy {
    color: var(--primary-blue);
}

.toto-text-light {
    color: var(--text-gray);
    font-weight: 300;
}

@media (max-width: 768px) {
    .toto-style-section {
        padding: 80px 5%;
    }
    .toto-style-section h2 {
        font-size: 1.8rem;
    }
    .toto-spec-table th {
        width: 40%;
    }
}




/* === 強制上書き：既存サイトCSSへの specificity 対抗 === */
.main .block .section-header h2 { color: var(--primary-blue) !important; }
.main .block h1, .main .block h2, .main .block h3 { color: var(--text-main) !important; font-family: var(--font-main) !important; }
#hero h1, #hero .hero-sub, .main .block #hero h1 { color: #1B335F !important; }
.main .block #hero { background: #F2F4F6; }
.main .block .partner { color: var(--text-main) !important; }
.main .block .doubt-content strong { color: var(--primary-blue) !important; }
.main .block .ev-data h3 { color: var(--primary-blue) !important; }
.main .block .news-section h3, .main .block .column-section h3 { color: var(--primary-blue) !important; }
.main .block .footer-info h3 { color: var(--primary-blue) !important; }
.main .block .service-item h4 { color: var(--text-main) !important; }
.main .block body, .wrapper, .main, .block { font-family: var(--font-main); }
/* ヒーローのサブタイトル文字サイズ調整 */
body#top #hero .hero-sub {
    font-size: 1.5rem !important; /* ← ここの数字で大きさを調整（1.5rem = 約24px） */
    font-weight: 500 !important;  /* メインタイトルより少し細くしてメリハリをつける場合（不要なら削除） */
    margin-top: 10px !important;  /* 上のBioreactorとの隙間を少し広げる場合（不要なら削除） */
    display: inline-block;
}

/* === v4.1: body font-size override (原本の16px基準に戻す) === */
html { font-size: 16px !important; }
body { font-size: 16px !important; line-height: 1.7 !important; }


/* === v4.2: header/footer/news などのテキストサイズを原本に合わせる === */
/* サイト職人テンプレート由来のヘッダー・フッターを元サイズに */
header, header * { font-size: 14px !important; line-height: 1.5 !important; }
header p.catch { font-size: 12px !important; }
header .logo a img { font-size: inherit; }
footer, footer * { font-size: 14px !important; line-height: 1.5 !important; }
footer small { font-size: 12px !important; }

/* bodyHTML内の要素のrem計算を原本の16px基準に */
/* タブボタン、ニュース・コラム、コラムカード */
.tab-btn { font-size: 16px !important; }
#news-columns, #news-columns p, #news-columns li, #news-columns a { font-size: 16px; }
.column-card { font-size: 16px !important; line-height: 1.5; }
.news-list, .news-list li, .news-item { font-size: 14px; line-height: 1.6; }


/* === v4.2.1: nav a specificity fix === */
header nav, header nav ul, header nav ul li, header nav ul li a { font-size: 14px !important; }
footer .foot_nav, footer .foot_nav ul, footer .foot_nav ul li, footer .foot_nav ul li a { font-size: 14px !important; }

/* === v4.4: お知らせ・みんなが知らないセクションの見出しサイズ === */
#news-columns h3 { font-size: 18px !important; line-height: 1.5 !important; margin-bottom: 16px; }
#news-columns .news-section h3,
#news-columns .column-section h3 { font-size: 18px !important; }
#news-columns .column-card { font-size: 14px !important; line-height: 1.5; }


/* === v4.5: independence-text サイズ修正 === */
.independence-block { font-size: 16px !important; }
.independence-text { font-size: 16px !important; line-height: 1.8 !important; }


/* === v4.6: evidence-privacy-note (注釈テキスト) サイズ === */
.evidence-privacy-note { font-size: 13px !important; line-height: 1.6 !important; }

/* === 前処理オプション一覧：システム選択グリッド === */
.sys-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    align-items: start;
}
.sys-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sys-header {
    width: 100%;
    background: linear-gradient(135deg, #2a9df4, #1e7bc8);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 16px 8px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    transition: all 0.3s;
}
.sys-header:hover { filter: brightness(1.12); }
.sys-header.active {
    background: linear-gradient(135deg, #1e7bc8, #155fa0) !important;
    box-shadow: 0 4px 15px rgba(42,157,244,0.35);
    border-radius: 6px 6px 0 0;
}
.sys-name { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; }
.sys-sub  { display: block; font-size: 0.68rem; font-weight: 400; opacity: 0.85; }
.sys-arrow { display: block; margin-top: 5px; font-size: 0.55rem; transition: transform 0.3s; }
.sys-header.active .sys-arrow { transform: rotate(180deg); }
.sys-tree {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 6px 20px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(0,0,0,0.06);
    border-top: none;
    border-radius: 0 0 6px 6px;
}
.sys-tree.open {
    display: flex;
    animation: treeFadeIn 0.35s ease;
}
@keyframes treeFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tree-line {
    width: 2px;
    height: 18px;
    background: rgba(80,100,120,0.35);
}
.tree-line-final {
    width: 2px;
    height: 28px;
    background: linear-gradient(to bottom, rgba(80,100,120,0.35), rgba(42,157,244,0.7));
}
.tree-node {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    padding: 10px 12px;
    color: #1a2a3a;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    width: 88%;
    max-width: 170px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tree-node.op {
    border: 1px dashed rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.85);
}
.tree-node.dashed { border-style: dashed; }
.tree-node.group {
    background: rgba(42,157,244,0.12);
    border: 1px solid rgba(42,157,244,0.3);
    border-left: 3px solid #2a9df4;
}
.tree-node.accent {
    background: rgba(230,126,34,0.12);
    border: 1px solid rgba(230,126,34,0.3);
    border-left: 3px solid #e67e22;
}
.tree-node.final {
    background: rgba(42,157,244,0.1);
    border: 1.5px solid rgba(42,157,244,0.5);
    font-weight: 700;
    color: #1565c0;
    box-shadow: 0 2px 12px rgba(42,157,244,0.15);
}
.op-badge {
    position: absolute;
    top: -7px;
    right: -4px;
    font-size: 0.5rem;
    font-weight: 700;
    background: #2a9df4;
    color: white;
    padding: 1px 5px;
    border-radius: 2px;
    letter-spacing: 0.05em;
}
.group-tag, .accent-tag { font-size: 0.75rem; font-weight: 700; line-height: 1.4; }
.group-tag { color: #1565c0; }
.accent-tag { color: #DC143C; }
.tree-label-select {
    font-size: 0.65rem;
    color: rgba(0,0,0,0.4);
    letter-spacing: 0.1em;
    padding: 2px 0;
    font-weight: 600;
}
.tree-branch { position: relative; width: 88%; max-width: 170px; }
.tree-branch .branch-items { display: flex; flex-direction: column; gap: 6px; }
.tree-branch .tree-node { width: 100%; max-width: none; font-size: 0.75rem; padding: 8px 10px; }
/* === HOME (TemplateTop) ナビ・ヘッダー表示修正 === */
#header .global-nav { display: flex !important; align-items: center !important; gap: 32px !important; }
#header .nav-list { display: flex !important; list-style: none !important; gap: 28px !important; margin: 0 !important; padding: 0 !important; }
#header .nav-list li { display: list-item !important; }
#header .nav-list a { display: block !important; }
#header .nav-cta { display: flex !important; }
/* TOP ページ固有の wrapper 制約を解除 */
.top_content { width: 100% !important; max-width: 100% !important; }
.top_main { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* === HOME (TemplateTop) 既存ヘッダー表示修正 === */
/* サイト職人のimport.cssがHOMEのheader nav/catch/h_cvをhideするため強制表示 */
/* === サービスページ ヒーローセクション h1 白色強制 === */
.main .block h1[style*="color: white"] { color: white !important; }
.main .block h1[style*="color:white"] { color: white !important; }

/* === シミュレーター レンジチック・タイトル修正 === */
.sim-range-ticks { width: 100%; flex-wrap: nowrap; }
.sim-range-ticks span { white-space: nowrap; min-width: 0; }
.sim-title { word-break: keep-all; overflow-wrap: break-word; }

/* === CO2/外的要因タブ スライダーラベル修正 === */
.sim-range-labels { display: flex !important; justify-content: space-between !important; width: 100% !important; font-size: 10px; color: #8099b0; margin-top: 4px; }
.sim-range-labels span { white-space: nowrap; }

/* p.catch hidden */
p.catch { display: none !important; }


/* ── SP (max-width:640px) serif-title カラー修正 ── */
/* .main .block h2 { color: var(--text-main) !important } を上書きするため
   詳細度を上げたセレクタを使用 */
@media (max-width: 640px) {
    .main .block .toto-style-section h2,
    .main .block .toto-style-section .serif-title {
        color: #0065b4 !important;
    }
    .main .block #risk h2,
    .main .block #risk .serif-title {
        color: #8B0000 !important;
    }
}

/* ev-desc: エビデンス詳細説明文をモバイルで非表示 2026-05-22 */
@media (max-width: 640px) {
    #ev-desc {
        display: none !important;
    }
}

/* ===== 旧ヘッダー互換ルール（復元） ===== */

#header .global-nav { display: flex !important; align-items: center !important; gap: 32px !important; }
#header .nav-list { display: flex !important; list-style: none !important; gap: 28px !important; margin: 0 !important; padding: 0 !important; }
#header .nav-list li { display: list-item !important; }
#header .nav-list a { display: block !important; }
#header .nav-cta { display: flex !important; }

/* サイト職人のimport.cssがHOMEのheader nav/catch/h_cvをhideするため強制表示 */
@media (min-width: 641px) {
body:not(.single) header nav { display: block !important; }
}
body:not(.single) header .catch { display: block !important; }
body:not(.single) header .h_cv { display: block !important; }
body:not(.single) header .head_r { width: auto !important; flex: 1 !important; display: flex !important; align-items: center !important; }
body:not(.single) header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 15px 40px !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(8px) !important; }
body:not(.single) header .logo { flex-shrink: 0 !important; }

/* ===== ヘッダーナビ右寄せ修正 (2026-05-25) ===== */
/* .head_r は flex:1 で幅が広がるため、中身を右端に寄せる */
body:not(.single) header .head_r {
    justify-content: flex-end !important;
    gap: 24px !important;
}

/* ===== ヘッダーナビ右寄せ修正 (2026-05-25) ===== */
body:not(.single) header .head_r {
    justify-content: flex-end !important;
    gap: 24px !important;
}

/* トップページヘッダーのキャッチコピーを非表示 (2026-05-25) */
body#top header p.catch {
    display: none !important;
}

/* === v4.4: foot_cv 3カラムCTA (PC横並び / SP縦並び中央寄せ) === */
.foot_cv-actions {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
}
.foot_cv-actions > * {
    flex: 1 0 200px;
    max-width: 320px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px 28px;
    border-radius: 2px;
    box-sizing: border-box;
    line-height: 1.6;
}
.foot_cv-item {
    background: rgba(255,255,255,0.22);
    border: 2px solid rgba(255,255,255,0.75);
}
.foot_cv-label {
    font-size: 0.95rem;
    color: #fff;
    display: block;
    margin-bottom: 8px;
}
.foot_cv-tel {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff !important;
    text-decoration: none !important;
    letter-spacing: 0.04em;
    display: block;
}
.foot_cv-note {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.9);
    display: block;
    margin-top: 6px;
}
.foot_cv-btn-white {
    background: #fff;
    color: var(--primary-blue) !important;
    font-weight: bold;
    font-size: 1.15rem;
    text-decoration: none;
}
.foot_cv-btn-outline {
    background: transparent;
    color: #fff !important;
    font-weight: bold;
    font-size: 1.15rem;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0.85);
}
@media (max-width: 640px) {
    .foot_cv-actions {
        flex-direction: column;
        align-items: center;
    }
    .foot_cv-actions > * {
        width: 100%;
        max-width: 100%;
        flex: none;
        min-height: auto;
    }
}
/* === v5.0: SP グリッド修正 === */
@media (max-width: 640px) {
  .toto-style-section div[style*="grid-template-columns"],
  .toto-risk-content div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 40px !important;
  }
}
/* === v5.1: SP 前処理オプション・仕様テーブル修正 === */
@media (max-width: 640px) {
  .sys-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .sys-header { padding: 10px 4px !important; }
  .sys-name { font-size: 0.75rem !important; }
  .sys-sub { font-size: 0.58rem !important; }
  /* toto-spec-table → v5.2に統合済み */
}
/* === v5.2: SP テーブル横スクロール（v5.1取り消し） === */
@media (max-width: 640px) {
  .toto-spec-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .toto-spec-table tbody { display: table-row-group !important; }
  .toto-spec-table tr { display: table-row !important; }
  .toto-spec-table th,
  .toto-spec-table td {
    display: table-cell !important;
    width: auto !important;
    padding: 8px 8px !important;
    font-size: 0.78rem !important;
    border: 1px solid #eee !important;
  }
}
/* === v5.3: SP h2青棒・ボーダー除去 === */
@media (max-width: 640px) {
  .main .block .toto-style-section h2.serif-title {
    border-bottom: none !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
  }
  .main .block .toto-style-section h2.serif-title::before,
  .main .block .toto-style-section h2.serif-title::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}
/* === v6.0: TOP PAGE SP修正 === */
@media (max-width: 640px) {
  body#top header {
    padding: 9px 10px 9px 15px !important;
    position: relative !important;
    background: none !important;
    justify-content: flex-start !important;
  }
  body#top header .head_r {
    width: 90px !important;
    flex: none !important;
    gap: 0 !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
  body#top header .catch { display: none !important; }
  body#top header .sp_trigger {
    display: inline-block !important;
  }
  #hero {
    height: auto !important;
    min-height: 60vh;
    padding: 40px 20px 60px;
  }
  #hero h1 { font-size: 2.4rem !important; }
  #differentiation [style*="repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
/* === v6.0b: TOP ヘッダーis-fixed修正 === */
@media (max-width: 640px) {
  body#top header.is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: rgba(255,255,255,0.95) !important;
  }
}
/* === v6.1: TOPページSP文字サイズ調整・CTA修正 === */
@media (max-width: 640px) {
  #hero h1 { font-size: 3rem !important; line-height: 1.0 !important; }
  body#top #hero h1 .hero-sub { font-size: 0.9375rem !important; margin-top: 0.5rem !important; }
  #differentiation a[style*="white-space: nowrap"] { white-space: normal !important; overflow-wrap: break-word; padding: 8px 14px !important; }
  #differentiation p[style*="font-size: 2rem"] { font-size: 1.5rem !important; }
}
/* === v6.2: カタログページSP横スクロール対応 === */
@media (max-width: 640px) {
  .catalog-page { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .catalog-page .page-title { position: sticky; left: 0; background: #fff; z-index: 5; padding-bottom: 8px; }
  .catalog-table { min-width: 640px; }
  .td-method { position: sticky; left: 0; background: #ffffff; z-index: 2; }
  .catalog-table thead th:first-child { position: sticky; left: 0; background: #ffffff; z-index: 2; }
  .th-series { font-size: 11px; padding: 6px 4px; }
  .td-method { font-size: 11px; white-space: nowrap; padding-right: 6px; }
  .td-img { padding: 10px 6px; }
  .catalog-page .img-views { display: flex !important; justify-content: center; align-items: center; gap: 4px; flex-wrap: nowrap; }
  .catalog-page .img-views img { width: 56px !important; height: 48px !important; max-width: 56px !important; max-height: 48px !important; object-fit: contain !important; }
  .catalog-page .img-single { width: 80px !important; height: 54px !important; max-width: 80px !important; object-fit: contain !important; }
}
/* === v6.3: 「サービス一覧へ戻る」フッター色と統一 === */
.btn-back { background: #1B335F !important; border-color: #1B335F !important; color: #ffffff !important; }

/* === v6.4: SPサービスページのパンくず非表示 === */
@media (max-width: 640px) {
  body.single nav.breadcrumb { display: none !important; }
  body.single .pagetit { display: none !important; }
}

/* === v6.5: SP Typography 統一ルール === */
@media (max-width: 640px) {
  .section-header h2,
  body#top h2 { font-size: 1.25rem !important; line-height: 1.4 !important; }
  .toto-style-section h2.serif-title,
  .toto-style-section .serif-title { font-size: 1.25rem !important; line-height: 1.4 !important; }
  .foot_cv h2 { font-size: 1.5rem !important; }
  #differentiation a[style] { font-size: 0.9375rem !important; }
}


/* === 証拠セクション 静的スライダー（クリーン版）=== */
.ev-static-panel { display: none; }
.ev-static-panel.active { display: flex; gap: 32px; align-items: flex-start; }
.ev-static-panel.active .ev-img-wrap { flex: 0 0 45%; max-width: 45%; position: relative; text-align: center; }
.ev-static-panel.active .ev-info { flex: 0 0 55%; max-width: 55%; min-width: 0; }
.ev-static-img { display: none; max-width: 100%; max-height: 680px; object-fit: contain; margin: 0 auto; }
@media (max-width: 640px) { .ev-static-img { max-height: 300px; } }
.ev-static-img.active { display: block; }
.ev-btn-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(27,51,95,0.7); color: #fff; border: none; border-radius: 50%; width: 36px; height: 36px; font-size: 16px; cursor: pointer; z-index: 2; }
.ev-btn-prev { left: 4px; }
.ev-btn-next { right: 4px; }
.ev-btn-dots { text-align: center; padding: 8px 0; }
.ev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ccc; margin: 0 4px; cursor: pointer; }
.ev-dot.active { background: var(--primary-blue); }
.ev-summary-img { max-width: 100%; margin-top: 12px; border-radius: 8px; }
.evidence-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 12px; }
@media (max-width: 640px) {
  .ev-static-panel.active { flex-direction: column; gap: 16px; align-items: stretch; }
  .ev-static-panel.active .ev-img-wrap,
  .ev-static-panel.active .ev-info { flex: 0 0 100%; max-width: 100%; }
  .evidence-tabs .tab-btn, .evidence-tabs .ev-tab { font-size: 11px !important; padding: 7px 12px !important; border-radius: 4px !important; margin: 0 !important; }
  .evidence-tabs .tab-btn.active, .evidence-tabs .ev-tab.active { background: var(--primary-blue); color: #fff; }
}

/* === evidence-content 幅固定 === */
.evidence-content { align-items: stretch; }
.ev-static-panel { width: 100%; }
.ev-static-panel.active { width: 100%; }

/* === SP: メトリクス1カラム固定 === */
@media (max-width: 640px) {
  .ev-metrics-list { grid-template-columns: 1fr !important; }
}

/* === toto-style-section h3のデフォルト青線を除去 === */
.toto-style-section h3::before,
.toto-style-section h3:before {
  display: none !important;
}
.toto-style-section h3 {
  padding-left: 0 !important;
}