@charset "UTF-8";
/* solarail/style.css (2025-11-27 15:30 Updated) */

/* =========================================
   CSS Variables & Reset
   ========================================= */
:root {
    --color-white: #ffffff;
    --color-sky-blue: #00AEEF;
    --color-sky-glow: rgba(0, 174, 239, 0.8);
    --color-sky-glow-mild: rgba(0, 174, 239, 0.4);
    --color-silver: #B0B7BD;
    --color-dark: #1A2B3C;
    --color-tech-bg: #0F1923;
    --color-dark-tech: #0A1118;
    --color-gray-bg: #F4F6F8;
    --color-warning: #FFD700;

    --font-jp: 'Noto Sans JP', sans-serif;
    --font-en: 'Oswald', sans-serif;
    --font-mono: 'Roboto Mono', monospace;

    --section-spacing: 120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-jp); color: var(--color-dark); line-height: 1.8;
    background-color: var(--color-white); overflow-x: hidden;
}

/* Typography & Utilities */
.lang-en { font-family: var(--font-en); letter-spacing: 0.05em; }
.lang-mono { font-family: var(--font-mono); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-white { color: var(--color-white); }
.container { width: 90%; max-width: 1100px; margin: 0 auto; }
.section-padding { padding: var(--section-spacing) 0; }
.bg-gray { background-color: var(--color-gray-bg); }

/* Text Glow Effects */
.text-glow { text-shadow: 0 0 10px var(--color-sky-glow), 0 0 20px var(--color-sky-glow), 2px 2px 2px rgba(0,0,0,0.8); }
.text-glow-sm { text-shadow: 0 0 5px var(--color-sky-glow), 1px 1px 1px rgba(0,0,0,0.8); }
.text-glow-mild { text-shadow: 0 0 10px var(--color-sky-glow-mild), 0 0 20px var(--color-sky-glow-mild), 1px 1px 1px rgba(0,0,0,0.2); }

.section-title {
    font-size: 4rem; color: #E0E5E9; line-height: 1; margin-bottom: -1.2rem;
    position: relative; z-index: 0; font-weight: 700; text-transform: uppercase;
}
.section-jp-title {
    font-size: 2rem; font-weight: 700; margin-bottom: 4rem;
    position: relative; z-index: 1; display: block; width: 100%;
    text-align: center !important;
}

section[id] { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .text-glow, .text-glow-sm, .text-glow-mild, .dimension-line.unit-marker, .chevron {
        text-shadow: none !important; box-shadow: none !important; animation: none !important; opacity: 1 !important;
    }
    .traverser-stage { animation: none !important; }
}

/* =========================================
   HERO Section
   ========================================= */
.hero {
    height: 100vh; width: 100%; position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--color-white);
}
.hero__logo-container { position: absolute; top: 2rem; left: 2rem; z-index: 10; }
.hero__logo-svg { width: 180px; height: auto; filter: drop-shadow(0 0 3px rgba(0,0,0,0.3)); }
.hero__bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('images/hero-bg.jpg'); background-size: cover; background-position: center bottom; z-index: -2;
}
.hero__overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,10,20,0.6));
    background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 40px 40px; z-index: -1;
}
.hero__content { z-index: 2; text-align: center; margin-top: -2rem; }
.hero__subtitle { font-size: 1.1rem; color: var(--color-sky-blue); margin-bottom: 0.5rem; letter-spacing: 0.2em; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }
.hero__title { font-size: 6.5rem; line-height: 0.9; margin-bottom: 1.5rem; }
.hero__lead { font-size: 1.3rem; font-weight: 500; }
.hero__scroll {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
    text-align: center; opacity: 0.9; text-decoration: none; color: var(--color-white);
    transition: opacity 0.3s; z-index: 10; cursor: pointer;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)); display: flex; flex-direction: column; align-items: center;
}
.hero__scroll:hover { opacity: 1; }
.scroll-text { display: block; font-size: 1rem; margin-bottom: 0.5rem; letter-spacing: 0.15em; }
.scroll-chevron-container { position: relative; width: 40px; height: 40px; }
.chevron {
    position: absolute; top: 0; left: 50%; width: 20px; height: 20px;
    border-bottom: 3px solid; border-right: 3px solid; transform: translateX(-50%) rotate(45deg);
    animation: chevronMove 2s infinite; opacity: 0;
}
.chevron:nth-child(1) { animation-delay: 0s; border-color: var(--color-sky-blue); }
.chevron:nth-child(2) { top: 12px; animation-delay: 0.2s; border-color: var(--color-white); }
.chevron:nth-child(3) { top: 24px; animation-delay: 0.4s; border-color: var(--color-sky-blue); }
@keyframes chevronMove {
    0% { opacity: 0; transform: translateX(-50%) rotate(45deg) translate(-15px, -15px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) rotate(45deg) translate(15px, 15px); }
}

/* =========================================
   HEADLINE & CONTENT & PROCESS
   ========================================= */
.headline-section { padding: 1.2rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.bg-dark-tech { background-color: var(--color-dark-tech); }
.headline-container { display: flex; align-items: center; }
.headline-label { background: var(--color-sky-blue); color: var(--color-dark); padding: 0.2rem 0.8rem; font-weight: 700; font-size: 0.8rem; margin-right: 1.5rem; white-space: nowrap; }
.headline-link { display: flex; align-items: baseline; text-decoration: none; color: var(--color-white); flex-grow: 1; transition: color 0.3s; }
.headline-link:hover { color: var(--color-sky-blue); }
.headline-date { color: var(--color-sky-blue); margin-right: 1rem; font-size: 0.9rem; }
.headline-title { font-size: 1rem; font-weight: 500; margin-right: auto; }
.headline-more { font-size: 0.8rem; color: var(--color-sky-blue); opacity: 0.8; white-space: nowrap;}

.intro__text p, .philosophy__text p { margin-bottom: 1.5rem; font-feature-settings: "palt"; }
.philosophy__signature { margin-top: 3rem; font-weight: 700; color: var(--color-sky-blue); }
.term-link a { color: var(--color-sky-blue); text-decoration: none; font-weight: bold; margin-left: 2px; }
.term-link a:hover { text-decoration: underline; }

/* PROCESS Section */
.process__content { max-width: 800px; margin: 0 auto 4rem; }
.tech-title { font-size: 1.8rem; margin-bottom: 1.5rem; color: var(--color-sky-blue); }
.tech-caption { font-size: 0.9rem; color: #666; margin-top: 0.5rem; display: block; text-align: center; }

/* Tech Diagram Wrapper (Grid Background) */
.tech-diagram-wrapper {
    background-color: #f8fbfe;
    border: 1px solid #e0e5e9;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    background-image:
        linear-gradient(rgba(0, 174, 239, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 174, 239, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
}

.tech-diagram-wrapper.three-stage {
    display: flex; align-items: stretch; justify-content: space-between;
    gap: 1rem; overflow-x: auto;
}

.tech-diagram-stage {
    flex: 1; min-width: 200px; text-align: center;
    background: var(--color-white); padding: 1.5rem 1rem; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid #eee;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    transition: transform 0.3s;
}
.tech-diagram-stage:hover { transform: translateY(-3px); }

.tech-diagram-stage.solution {
    border: 2px solid var(--color-sky-blue);
    background: #fff;
    position: relative;
    overflow: hidden;
}
.tech-diagram-stage.solution::before {
    content: "OUR ANSWER";
    position: absolute; top: 0; right: 0;
    background: var(--color-sky-blue); color: #fff;
    font-size: 0.6rem; padding: 2px 6px; font-weight: bold;
    border-bottom-left-radius: 4px;
}

.diagram-label {
    font-size: 1.1rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--color-silver);
    padding-bottom: 0.5rem; width: 80%; font-weight: 700; letter-spacing: 0.05em; color: var(--color-silver);
}
.diagram-label.highlight { color: var(--color-sky-blue); border-bottom-color: var(--color-sky-blue); }

.diagram-arrow.large { font-size: 1.5rem; color: var(--color-silver); align-self: center; margin: 0 0.2rem; }

/* SVG Styles for Management Team Original SVG */
.diagram-visual-svg {
    width: 100%; height: auto; max-width: 180px; /* 元の縦横比を維持しつつ収める */
    margin-bottom: 1.5rem;
}

/* Original SVG Styles (Prefixed with org-) */
.org-cls-1, .org-cls-2, .org-cls-3, .org-cls-4, .org-cls-5, .org-cls-6, .org-cls-7, .org-cls-8, .org-cls-9, .org-cls-10, .org-cls-11, .org-cls-12, .org-cls-13, .org-cls-14, .org-cls-15, .org-cls-16, .org-cls-17, .org-cls-18 {
    stroke: #231815; stroke-miterlimit: 10;
}
.org-cls-1 { stroke-width: 3.77px; fill: #d9d9da; }
.org-cls-2 { stroke-width: 1.67px; fill: #7b7a7b; }
.org-cls-3 { fill: #4052a2; }
.org-cls-4 { fill: #fff794; }
.org-cls-5 { stroke-width: 1.67px; fill: #393332; }
.org-cls-6 { stroke-width: 1.67px; fill: #b1b1b2; }
.org-cls-7 { stroke-width: 1.67px; fill: #fff; }
.org-cls-8 { stroke-width: 3px; fill: url(#grad-rail-1); }
.org-cls-9 { stroke-width: 3px; fill: url(#grad-rail-3); }
.org-cls-10 { stroke-width: 1.67px; fill: #cac375; }
.org-cls-11 { stroke-width: 1.18px; fill: #fff; }
.org-cls-12 { stroke-width: 1.67px; fill: #fffbc4; }
.org-cls-13 { stroke-width: 2px; fill: #7b7a7b; }
.org-cls-14 { fill: #0066b5; stroke-width: 1.6px; }
.org-cls-15 { stroke-width: 1.67px; fill: #d9d9da; }
.org-cls-16 { stroke-width: .76px; fill: #393332; }
.org-cls-17 { stroke-width: 3px; fill: url(#grad-rail-2); }
.org-cls-18 { fill: #043994; stroke-width: 1.18px; }


.stage-caption { font-size: 0.9rem; line-height: 1.6; text-align: left; width: 100%; color: #666; }
.stage-caption strong { display: block; font-size: 1rem; margin-bottom: 0.5rem; text-align: center; color: var(--color-dark); }
.stage-caption.highlight { color: var(--color-dark); font-weight: 500; }

/* Traverser Animation Logic */
.traverser-anim-container { width: 100%; max-width: 500px; margin: 0 auto; }
.cls-1{fill:#60b632;opacity:.33}.cls-2{opacity:.5;stroke:#5cbcec;stroke-width:12.19px}.cls-2,.cls-3{fill:none;stroke-miterlimit:10}.cls-3{stroke:#043994}
#pnl-block-a { animation: slideA 6s ease-in-out infinite; }
#pnl-block-b { animation: slideB 6s ease-in-out infinite; }
@keyframes slideA {
    0%, 16.6% { transform: translateY(0); }
    50%, 66.6% { transform: translateY(-25.51px); }
    100% { transform: translateY(0); }
}
@keyframes slideB {
    0%, 16.6% { transform: translateY(0); }
    50%, 66.6% { transform: translateY(25.51px); }
    100% { transform: translateY(0); }
}

/* Core Rail Text Block */
.process__text-block {
    margin-top: 2rem; text-align: left; background: #fff; padding: 2rem;
    border-left: 4px solid var(--color-sky-blue); box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.process__text-block h4 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--color-dark); }
.process__text-block p { margin-bottom: 1rem; font-size: 0.95rem; color: #555; }
.process__text-block .note { font-size: 0.85rem; color: #888; margin-top: 0.5rem; }

/* Bridge Text */
.process__bridge {
    margin-top: 5rem; margin-bottom: 2rem; padding: 3rem 2rem;
    background-color: var(--color-white); border-top: 1px solid #eee; border-bottom: 1px solid #eee;
    position: relative;
}
.process__bridge::before {
    content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 60px; height: 4px; background: var(--color-sky-blue);
}
.bridge-text { font-size: 1.3rem; font-weight: 700; line-height: 1.8; color: var(--color-dark); }
.bridge-arrow { font-size: 2rem; color: var(--color-sky-blue); margin-top: 1.5rem; animation: bounceDown 2s infinite; }
@keyframes bounceDown { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} }


/* =========================================
   MECHANICS Section
   ========================================= */
.bg-tech { background-color: var(--color-tech-bg); color: var(--color-silver); background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 20px 20px; }
.mechanics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.mech-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 2rem; transition: all 0.3s; }
.mech-card:hover { border-color: var(--color-sky-blue); background: rgba(255,255,255,0.08); }
.mech-card__header { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 1rem; }
.mech-card__title { font-size: 1.3rem; color: var(--color-white); }
.mech-card__visual { position: relative; }
.spec-diagram { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); }

.dimension-line.unit-marker { position: absolute; border: 2px dashed var(--color-sky-blue); box-shadow: 0 0 5px var(--color-sky-blue); opacity: 0.9; }
.dimension-line.unit-marker::before, .dimension-line.unit-marker::after { content: ''; position: absolute; background: var(--color-sky-blue); }
.dimension-line.horizontal { width: 80%; height: 0; top: 60%; left: 10%; border-bottom-width: 2px; border-top: none; border-left: none; border-right: none;}
.dimension-line.horizontal::before { width: 2px; height: 10px; left: 0; top: -4px; }
.dimension-line.horizontal::after { width: 2px; height: 10px; right: 0; top: -4px; }
.dimension-line.vertical { height: 80%; width: 0; left: 50%; top: 10%; border-right-width: 2px; border-top: none; border-bottom: none; border-left: none;}
.dimension-line.vertical::before { height: 2px; width: 10px; top: 0; left: -4px; }
.dimension-line.vertical::after { height: 2px; width: 10px; bottom: 0; left: -4px; }

.spec-value {
    font-size: 1.2rem; color: var(--color-white); font-weight: bold;
    background: none; padding: 0.2rem 0.5rem; position: relative; z-index: 2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}
.mech-caption { font-size: 0.8rem; color: #999; margin-top: 0.5rem; margin-bottom: 1rem; text-align: center; }
.section-caption { margin-top: 2rem; color: #999; font-size: 0.9rem; }

/* =========================================
   LINEUP Section (System Architecture)
   ========================================= */
.lineup-grid { 
    display: flex; flex-direction: column; gap: 3rem; 
}
.lineup-item { 
    background: var(--color-white); box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    border-radius: 4px; overflow: hidden; 
    display: grid; grid-template-columns: 350px 1fr; 
}
.lineup-item:hover { box-shadow: 0 8px 20px rgba(0,174,239,0.15); }

.lineup-item__info { 
    padding: 2rem; border-right: 1px solid #eee; background: #fff; z-index: 2;
}
.lineup-category { 
    display: inline-block; background: var(--color-dark); color: var(--color-white); 
    padding: 0.2rem 0.8rem; font-family: var(--font-en); font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 1rem;
}
.lineup-name { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--color-dark); }
.lineup-desc { font-size: 0.9rem; color: #444; margin-top: 1rem; line-height: 1.6; }

.lineup-specs { list-style: none; margin-top: 1rem; padding-left: 0; }
.lineup-specs li { 
    font-size: 0.85rem; color: #555; margin-bottom: 0.4rem; font-family: var(--font-mono); 
    border-bottom: 1px dashed #eee; padding-bottom: 0.2rem;
    display: flex; justify-content: space-between;
}
.lineup-specs li span:first-child { font-weight: 700; color: var(--color-sky-blue); margin-right: 0.5rem;}

.naming-rule {
    margin-top: 1.5rem; background: #f9f9f9; padding: 1rem; border-radius: 4px; border-left: 3px solid var(--color-silver);
}
.naming-rule h4 { font-size: 0.85rem; margin-bottom: 0.5rem; color: var(--color-dark); font-family: var(--font-en); }
.naming-rule dl { display: grid; grid-template-columns: 40px 1fr; gap: 0.2rem; font-size: 0.8rem; font-family: var(--font-mono); color: #666; }
.naming-rule dt { font-weight: bold; color: var(--color-sky-blue); }
.naming-rule dd { margin: 0; }

.lineup-item__visual {
    background-color: #f9fbfd; position: relative;
    background-image: linear-gradient(rgba(0, 174, 239, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 174, 239, 0.05) 1px, transparent 1px);
    background-size: 20px 20px; 
    display: flex; align-items: center; justify-content: center;
    padding: 2rem; min-height: 350px;
}
.visual-svg { width: 100%; height: auto; max-height: 100%; }

@media (max-width: 900px) {
    .lineup-item { grid-template-columns: 1fr; }
    .lineup-item__info { border-right: none; border-bottom: 1px solid #eee; }
    .lineup-item__visual { min-height: 250px; }
}

/* =========================================
   FAQ & TIMELINE & FOOTER
   ========================================= */
.faq-list { max-width: 800px; margin: 0 auto; text-align: left; }
.faq-item { margin-bottom: 1rem; border-bottom: 1px solid #ddd; padding-bottom: 1rem; }
.faq-item summary { font-weight: 700; cursor: pointer; position: relative; padding-right: 2rem; }
.faq-item summary::after { content: '+'; position: absolute; right: 0; color: var(--color-sky-blue); font-size: 1.5rem; line-height: 1; }
.faq-item[open] summary::after { content: '-'; }
.faq-item p { margin-top: 1rem; padding-left: 1rem; color: #444; }
.faq-item a.text-link { color: var(--color-sky-blue); text-decoration: underline; }

.timeline-container { max-width: 800px; margin: 0 auto; position: relative; padding-left: 2rem; border-left: 2px solid #eee; text-align: left; }
.timeline-block { position: relative; margin-bottom: 3rem; }
.timeline-marker { position: absolute; top: 0.5rem; left: -2.6rem; width: 1rem; height: 1rem; background: var(--color-white); border: 3px solid var(--color-sky-blue); border-radius: 50%; z-index: 1; }
.timeline-block.future .timeline-marker { border-color: var(--color-warning); background: var(--color-warning); }
.timeline-block.past .timeline-marker { border-color: var(--color-silver); background: var(--color-silver); }
.timeline-content h3 { color: var(--color-warning); margin-bottom: 1rem; }
.timeline-content h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.timeline-content time { display: block; color: var(--color-sky-blue); font-weight: 700; margin-bottom: 0.5rem; }
.future-list { list-style: none; padding-left: 1rem; border-left: 2px solid var(--color-warning); }
.future-list li { margin-bottom: 0.5rem; }

.verified-matrix { border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); background: var(--color-white); font-size: 0.95rem; }
.matrix-header, .matrix-row { display: grid; grid-template-columns: 1.5fr 1fr 2fr 1fr; padding: 1rem; align-items: center; }
.matrix-header { background: var(--color-dark); color: var(--color-white); font-weight: bold; }
.matrix-row { border-bottom: 1px solid #eee; transition: background 0.3s; }
.matrix-row:last-child { border-bottom: none; }
.matrix-row:hover { background: #f9f9f9; }
.matrix-cell.item { font-weight: bold; }
.matrix-cell.evidence { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix-date { color: #888; font-size: 0.9rem; }
.matrix-status { display: inline-flex; align-items: center; font-weight: 700; font-family: var(--font-en); }
.status-icon { margin-right: 0.4rem; }
.matrix-status.verified { color: var(--color-sky-blue); }
.matrix-status.prototype { color: var(--color-warning); }
.matrix-status.inprogress { color: #999; }
@media (max-width: 768px) {
    .verified-matrix { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .pc-only { display: none; }
    .matrix-row { display: flex; width: max-content; border-bottom: 1px solid #eee; }
    .matrix-cell { display: inline-block; padding: 0.8rem; vertical-align: top; max-width: 240px; white-space: normal; }
    .matrix-cell::before { content: attr(data-label); display: block; font-size: 0.7rem; color: #999; margin-bottom: 0.3rem; font-weight: bold; }
}

.glossary-list { max-width: 800px; margin: 0 auto; text-align: left; border-top: 1px solid rgba(0,0,0,0.1); }
.glossary-item { padding: 1.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.1); display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; scroll-margin-top: 100px; }
.glossary-item dt { font-weight: 700; color: var(--color-dark); font-size: 1.1rem; }
.glossary-item dd { color: #555; font-size: 0.95rem; }
.back-link { font-size: 0.8rem; color: #ccc; text-decoration: none; margin-left: 0.5rem; vertical-align: middle; }
.back-link:hover { color: var(--color-sky-blue); }
.glossary-item:target { background-color: rgba(0, 174, 239, 0.1); border-left: 4px solid var(--color-sky-blue); padding-left: 1rem; transition: all 0.3s ease; }
@media (max-width: 768px) { .glossary-item { grid-template-columns: 1fr; gap: 0.5rem; } }

.footer { background: var(--color-dark); color: var(--color-silver); padding: 5rem 0 2rem; font-size: 0.9rem; }
.footer__content { display: grid; grid-template-columns: 1fr 1.5fr 2fr; gap: 3rem; margin-bottom: 3rem; text-align: left; }
.footer__sns { margin-top: 1rem; display: flex; gap: 1rem; }
.footer__sns .sns-link { color: var(--color-sky-blue); text-decoration: none; font-family: var(--font-en); font-weight: 500; font-size: 0.9rem; transition: opacity 0.3s; }
.footer__sns .sns-link:hover { opacity: 0.7; text-decoration: underline; }
.footer__links { border-top: 2px solid rgba(255, 255, 255, 0.2); padding-top: 1.5rem; }
.footer__links h3 { color: var(--color-silver); margin-bottom: 1.2rem; font-size: 1.1rem; font-family: var(--font-en); letter-spacing: 0.05em; }
.footer__links ul { list-style: none; }
.footer__links li { margin-bottom: 0.8rem; }
.footer__links a { color: var(--color-sky-blue); text-decoration: none; transition: opacity 0.3s; display: flex; align-items: center; }
.footer__links a::before { content: '🔗'; margin-right: 0.5rem; font-size: 0.8rem; }
.footer__links a:hover { opacity: 0.7; text-decoration: underline; }
.footer__disclaimer { border-top: 2px solid var(--color-warning); padding-top: 1.5rem; }
.footer__disclaimer h3 { color: var(--color-warning); margin-bottom: 1rem; font-size: 1rem; }
.footer__disclaimer ul { list-style: none; }
.footer__disclaimer li { margin-bottom: 0.6rem; font-size: 0.8rem; line-height: 1.5; opacity: 0.8;}
.copyright { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; font-size: 0.8rem; opacity: 0.5; }
.last-updated { display: block; margin-top: 0.5rem; font-size: 0.8rem; opacity: 0.6; }

.scroll-top { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; background: var(--color-sky-blue); color: var(--color-white); text-align: center; line-height: 50px; font-size: 1.5rem; border-radius: 50%; text-decoration: none; z-index: 100; opacity: 0.8; transition: opacity 0.3s; }
.fade-in { opacity: 0; animation: fadeIn 1s forwards; } @keyframes fadeIn { to { opacity: 1; } }
.fade-in-up { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.fade-on-scroll { opacity: 0; transform: translateY(50px); transition: opacity 0.8s, transform 0.8s; } .fade-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.hover-trigger:hover { opacity: 0.8; }
@media (max-width: 768px) {
    .hero__bg { background-position: 85% bottom; }
    .hero__logo-container { top: 1.5rem; left: 1.5rem; } .hero__logo-svg { width: 140px; }
    .hero__title { font-size: 4rem; }
    .headline-container { flex-direction: column; align-items: flex-start; }
    .headline-label { margin-bottom: 0.5rem; }
    .headline-link { flex-direction: column; align-items: flex-start; }
    .headline-date { margin-bottom: 0.2rem; } .headline-more { display: none; }
    .section-title { font-size: 2.5rem; }
    .tech-diagram-wrapper.three-stage { flex-direction: column; align-items: center; gap: 2rem; }
    .diagram-arrow.large { transform: rotate(90deg); margin: 0.5rem 0; }
    .tech-diagram-stage { width: 100%; max-width: 300px; }
    .footer__content { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =========================================
   GALLERY Section (New)
   ========================================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* メディアカード（枠組み） */
.media-card {
    background: var(--color-white);
    border: 1px solid rgba(0, 174, 239, 0.2); /* 薄い青枠 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}
.media-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 174, 239, 0.15);
    border-color: var(--color-sky-blue);
}

/* 動画・画像のコンテナ */
.media-visual {
    width: 100%;
    position: relative;
    background: #000; /* 映像の黒帯対策 */
    aspect-ratio: 16 / 9; /* アスペクト比固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* iframe, video, img の共通スタイル */
.media-visual iframe,
.media-visual video,
.media-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* アスペクト比維持 */
    border: none;
}

/* キャプションエリア */
.media-info {
    padding: 1rem;
    background: #f9fbfd;
    border-top: 1px solid #eee;
    flex-grow: 1; /* 高さ揃え用 */
}
.media-date {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-sky-blue);
    margin-bottom: 0.3rem;
}
.media-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-dark);
    font-weight: 500;
}
.media-source {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.5rem;
    display: block;
    text-align: right;
}

/* YouTubeチャンネルリンクボタン */
.gallery-more {
    margin-top: 3rem;
    text-align: center;
}
.btn-primary {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: var(--color-sky-blue);
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: background 0.3s, transform 0.3s;
    font-family: var(--font-en);
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(0, 174, 239, 0.3);
}
.btn-primary:hover {
    background: #0090c5;
    transform: translateY(-2px);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 1.5rem;
    }
}

/* ---------------------------------------------------
   Dark Theme Override for .bg-tech section
   黒背景セクション内に配置された場合のスタイル上書き
   --------------------------------------------------- */
.bg-tech .media-card {
    background: rgba(255, 255, 255, 0.05); /* 半透明のダークグレー */
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}
.bg-tech .media-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-sky-blue);
    box-shadow: 0 0 20px rgba(0, 174, 239, 0.2); /* 発光感 */
}
.bg-tech .media-info {
    background: transparent; /* 背景を透過させて親のグリッドを見せる */
    border-top-color: rgba(255, 255, 255, 0.1);
}
.bg-tech .media-desc { color: var(--color-white); } /* 文字を白に */
.bg-tech .media-source { color: #666; }

/* ボタンもダークモードに合わせて微調整 */
.bg-tech .gallery-more .btn-primary {
    box-shadow: 0 0 15px rgba(0, 174, 239, 0.4);
}
.bg-tech .gallery-more p { color: #666; }