/*
Theme Name: Zebra Aqua
Theme URI: https://zebra-aqua.com
Author: Zebra Aqua
Description: Custom WordPress theme for ゼブラアクア株式会社
Version: 1.0
*/

/* Interフォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');

/* スムーズなスクロールを有効にします */
:root {
    --first-view-gap: clamp(1.5rem, 6vw, 3.5rem);
    --splash-logo-size: clamp(240px, 32vw, 480px);
}

@media (max-width: 768px) {
    :root {
        --splash-logo-size: clamp(180px, 55vw, 320px);
    }
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    margin: 0;
    background-color: transparent; /* 背景は透明（動画が見えるように） */
    color: #e6f1ff; /* 基本テキスト色 (白っぽい) */
}

/* スプラッシュロゴ（スプラッシュスクリーン終了後も表示、スクロールで左上に移動） */
.splash-logo,
.splash-screen .splash-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    width: var(--splash-logo-size);
    height: var(--splash-logo-size);
    display: block;
    pointer-events: none;
}

.splash-logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, filter 0.8s ease;
}

.splash-logo.is-visible {
    opacity: 1;
    visibility: visible;
}

.splash-logo.menu-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 背景が白のときは黒いロゴに */
.splash-logo.dark {
    filter: invert(1) brightness(0);
}

.splash-logo-image,
.splash-screen .splash-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .splash-logo {
        display: none !important;
    }

    .mobile-splash-logo.menu-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* モバイル専用ロゴ */
.mobile-splash-logo {
    display: none; /* デスクトップでは非表示 */
}

@media (max-width: 768px) {
    .mobile-splash-logo {
        display: block !important;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: var(--splash-logo-size);
        height: var(--splash-logo-size);
        pointer-events: none;
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-splash-logo-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* ヘッダー */
.top-header {
    position: fixed;
    top: 2rem;
    left: 2rem;
    z-index: 60;
    display: flex;
    align-items: center;
    transition: opacity 0.6s ease, filter 0.6s ease;
}

.header-inner {
    max-width: 180px;
}

.header-logo {
    width: 100%;
    height: auto;
    display: block;
}

.top-header.hide {
    opacity: 0;
    filter: saturate(0) brightness(1.1);
}

/* FV (ファーストビュー) ラッパー */
#fv-wrapper {
    height: 100vh;
    width: 100%;
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    z-index: -10; /* スクロールコンテンツの後ろに配置 */
    background-color: #0a192f; /* 初期背景色 (濃い青) */
}

#fv-background {
    background-size: cover;
    background-position: center;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* モザイク（グラデーション）オーバーレイ */
#mosaic-overlay {
    /* グラデーション（元のコード） */
    /* background: linear-gradient(108.18deg, #10282c99, #173d4b); */
    /* 単色に変更（スクロールしてもグラデーションではなく初期色と同じ） */
    background: #10282c99;
    position: absolute;
    inset: 0;
    opacity: 1 !important; /* 初期状態から色を表示 */
}

/* 黒い点々パターン（常に表示、スクロール前から表示） */
#dots-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #5a5a5a 2.0px, transparent 2.0px);
    background-size: 20px 20px;
    background-position: 0 0;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

.scroll-indicator {
    position: fixed;
    bottom: clamp(2rem, 6vw, 4rem);
    left: 50%;
    transform: translate(-50%, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    animation: scrollIndicatorFadeIn 1s ease 1.2s forwards;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.scroll-indicator-text {
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
}

.scroll-indicator-arrow {
    width: 1.5rem;
    height: 1.5rem;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
    animation: scrollIndicatorBounce 1.6s ease-in-out infinite;
}

.scroll-indicator.hidden {
    opacity: 0;
    transform: translate(-50%, 16px);
}

@keyframes scrollIndicatorFadeIn {
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes scrollIndicatorBounce {
    0%, 100% {
        transform: translateY(0) rotate(-45deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(8px) rotate(-45deg);
        opacity: 1;
    }
}

/* 各アニメーションシーンのコンテナ */
.animation-scene {
    height: 100vh; /* 各シーンは画面の高さを持つ */
    width: 100%;
    position: relative; /* 子要素の絶対配置の基準 */
    overflow: hidden; /* はみ出した要素を隠す */
}

/* 説明文のスタイル */
.description-text {
    border: 1.5px solid #ffffff;
    border-radius: 24px;
    padding: clamp(0.7rem, 2.5vw, 1.2rem);
    backdrop-filter: blur(6px);
}

.description-text p {
    font-size: 1.125rem; /* 18px */
    line-height: 1.65;
    color: white; /* 白色で表示 */
    white-space: normal;
    word-break: normal;
    margin: 0 0 0.6rem 0; /* 余白をさらに縮小 */
}

.description-text p:last-child {
    margin-bottom: 0; /* 最後の段落の余白を削除 */
}

.force-opacity-100 {
    opacity: 1 !important;
}

/* モバイル時の説明文を中央配置（ミッション・ビジョン・バリューと同じように） */
@media (max-width: 768px) {
    .description-text {
        text-align: center !important;
        width: min(92vw, 720px) !important;
        margin: 0 auto !important;
        padding: clamp(0.8rem, 6vw, 1.4rem) !important;
    }
    
    .description-text p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    /* #text-oishii の説明文は複数行表示（今までどおり） */
    #text-oishii.description-text {
        white-space: normal !important;
    }
    
    #text-oishii.description-text p {
        white-space: normal !important; /* 複数行表示（今までどおり） */
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
        line-height: 1.75 !important;
        margin-bottom: 1.5rem !important; /* 段落間の余白を追加 */
        letter-spacing: -0.02em !important;
    }
    
    #text-oishii.description-text p:last-child {
        margin-bottom: 0 !important; /* 最後の段落の余白を削除 */
    }
}

/* スクロール用の全体のコンテナ */
#main-scroll-container {
    position: relative;
    z-index: 10;
    background-color: transparent; /* 透明（動画が見えるように） */
}

.caption-scene {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(2rem, 10vw, 6rem) clamp(1.5rem, 8vw, 5rem);
    color: #ffffff;
}

.caption-scene-inner {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    pointer-events: none;
}

#caption-line-1,
#caption-line-2,
#caption-line-3 {
    opacity: 0;
    transform: translateY(80px);
}

.caption-label {
    font-size: clamp(1rem, 1.4vw, 2rem);
    letter-spacing: 0.8em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    opacity: 0.7;
    font-weight: 400;
    font-family: 'Noto Sans JP';
    font-family: ui-sans-serif;
}


.caption-title {
    font-size: clamp(2.2rem, 5vw, 4rem);
    letter-spacing: 0.5em;
    font-weight: 400;
    margin: 0 0 1.6rem;
    font-family: ui-sans-serif;
}

.caption-en {
    font-size: clamp(1rem, 1.8vw, 2rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0;
    /* opacity: 0.85; */
    color: #ffffffa3;
    font-family: ui-sans-serif;
}
.intermission-visual-section {
    width: 100%;
    /* background-color: #ffffff;
    padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 4rem); */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.intermission-visual-inner {
    width: 70%;
    margin-bottom: 8em;
    max-width: 1280px;
}

.intermission-visual-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2));
}

/* ニュースセクション以降のコンテンツを確実に表示 */
.news-section {
    position: relative;
    z-index: 20; /* FVラッパーの後ろに表示 */
    background-color: #6F6F6F !important; /* 指定の背景色 */
    color: #ffffff;
}

/* テキストのスタイル調整 */
.text-shadow-custom {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* メニュー項目のスタイル */

.english-title {
    font-size: 1.7em;
    font-weight: 700;
    color: rgba(200, 206, 212, 0.85);
    white-space: nowrap;
    letter-spacing: 0.2em;
    margin-top: 0.5em;
    margin-bottom: 0.8em;
}

.japanese-subtitle {
    font-size: 0.6em;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    letter-spacing: 0.18em;
}

.underline {
    width: 0;
    height: 1px;
    background-color: rgba(255, 74, 74, 0.6);
    margin: 0 auto;
    margin-top: 0.3em;
}

#menu-about .underline,
#menu-dev .underline,
#menu-sus .underline {
    background-color: rgba(200, 206, 212, 0.65);
}

/* bodyの高さを確保するため（旧スタイル - 後方互換性のため残す） */
.fv-wrapper {
    /* (フェードアウト開始を遅らせるため、全体の高さを 500vh に変更) */
    height: 500vh; 
    position: relative;
}

.first-view {
    /* 画面上端に固定 (sticky) */
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    /* 中身がはみ出ても表示（アニメーションのため） */
    overflow: visible; 
}

.video-background {
    overflow: hidden;
}

/* --- JSで制御する要素の初期状態 --- */

/* 1. 動画スライド (3つの動画を無限ループ) */
.video-slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.05);
    background-color: #000000; /* 黒背景 */
    transition: opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* 2. オーバーレイ */
#overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

#overlay::before,
#overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

#overlay::before {
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.65) 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0.35;
    z-index: 1;
}

#overlay::after {
    background: linear-gradient(108.18deg, #10282cdd, #173d4bcc);
    z-index: 2;
}

/* 3. default-text (Scroll Down) - 左カラム */
/* #default-textは左右2カラムの左側に配置されているdiv要素で、中のspan要素をJSで制御 */
/* ページアクセス時から表示 */
#default-text span {
    opacity: 1;
    transform: translateY(0px);
}

.first-view-text {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, 0.95);
    transition: background 0.3s ease, color 0.3s ease;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .first-view-text {
        --text-fill: 100%;
        color: transparent;
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.95) var(--text-fill, 100%),
            rgba(255, 255, 255, 0.15) var(--text-fill, 100%),
            rgba(255, 255, 255, 0) 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.first-view-text-stack {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 100%;
    margin: 0 auto;
    pointer-events: none;
}

#default-text,
#additional-text {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    pointer-events: none;
    transform-origin: center;
    transform: translate(-20%, -50%);
}

/* 共通スタイル */
#text-umibudo,
#text-oishii,
#text-zebra-aqua,
#text-zebra-aqua-desc {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.35em;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
}

/* シーン1Bのタイトルはabsolute配置 */
#text-zebra-aqua,
#text-zebra-aqua-desc {
    position: absolute;
    top: 50%;
    transform: translate(-20%, -50%);
}

/* ゼブラ企業として...の段落の文字間隔を狭くする */
#text-oishii.description-text p,
#text-zebra-aqua-desc.description-text p {
    letter-spacing: -0.02em;
}

/* ゼブラとは/ゼブラアクアとはの文字間隔を詰める */
#text-umibudo,
#text-zebra-aqua {
    letter-spacing: 0.15em;
}

#default-text {
    left: 20%;
    justify-content: flex-start;
}

#additional-text {
    left: 80%;
    justify-content: flex-end;
}

@media (min-width: 769px) {
    /* 新しいレイアウトではflexboxで配置されるため、absolute positioningは不要 */
    #text-umibudo,
    #text-zebra-aqua {
        white-space: nowrap;
    }
    
    /* シーン1、シーン1B、シーン2のコンテナに左右のマージンを追加（PC版のみ） */
    #scene-1 > div,
    #scene-1b > div,
    #scene-2 > div {
        padding-left: 25% !important;
        padding-right: 25% !important;
    }
    
    /* シーン1のタイトルに右マージンを追加（少し狭く） */
    #scene-1 #text-umibudo {
        margin-right: clamp(1.5rem, 3vw, 2.5rem);
    }
    
    /* シーン1Bのタイトルに右マージンを追加（少し狭く） */
    #scene-1b #text-zebra-aqua {
        margin-right: clamp(1.5rem, 3vw, 2.5rem);
    }
    
    #text-oishii,
    #text-zebra-aqua-desc {
        width: auto;
        min-width: 900px;
        max-width: none;
        text-align: left;
    }
    
    /* シーン1とシーン1Bの説明文の内側のpaddingを広げる */
    #scene-1 #text-oishii.description-text,
    #scene-1b #text-zebra-aqua-desc.description-text {
        padding: clamp(1.2rem, 3vw, 1.8rem);
    }
    
    /* シーン1、シーン1B、シーン2の説明文の行間を広げる */
    #scene-1 #text-oishii p,
    #scene-1b #text-zebra-aqua-desc p,
    #scene-2 #desc-dev p,
    #scene-2 #desc-about p,
    #scene-2 #desc-sus p {
        line-height: 2.2;
    }
    
    /* シーン1の説明文に左マージンを追加（少し狭く） */
    #scene-1 #text-oishii {
        margin-left: clamp(1.5rem, 3vw, 2.5rem);
    }
    
    /* シーン1Bの説明文に左マージンを追加（少し狭く） */
    #scene-1b #text-zebra-aqua-desc {
        margin-left: clamp(1.5rem, 3vw, 2.5rem);
    }
}

#default-text span {
    text-align: left;
}

#additional-text span {
    text-align: right;
}

/* 3b. 追加テキスト (...and Fade) - 右カラム */
/* #additional-textは左右2カラムの右側に配置されているdiv要素で、中のspan要素をJSで制御 */
#additional-text span {
    opacity: 0;
    transform: translateY(0px);
}

@media (max-width: 768px) {
    .first-view-text-stack {
        max-width: 90%;
    }

    #default-text,
    #additional-text {
        position: relative;
        left: 0;
        top: auto;
        transform: none !important;
        justify-content: center;
        margin: 0 auto 1.5rem;
    }
    
    /* モバイル時に「ゼブラファームとは」と「ゼブラ企業として...」を中央配置 */
    #text-umibudo,
    #text-zebra-aqua {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        white-space: nowrap !important; /* 横一列表示 */
    }
    
    #text-oishii,
    #text-zebra-aqua-desc {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important; /* HTMLのインラインスタイルを上書き */
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        width: 90vw !important;
        max-width: 100% !important;
    }
    
    #text-oishii p,
    #text-zebra-aqua-desc p {
        white-space: normal !important; /* 複数行表示（今までどおり） */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 1.5rem auto !important; /* 段落間の余白を追加 */
        text-align: center !important;
        font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
        line-height: 1.75 !important;
        letter-spacing: -0.02em !important;
    }
    
    #text-oishii p:last-child,
    #text-zebra-aqua-desc p:last-child {
        margin-bottom: 0 !important; /* 最後の段落の余白を削除 */
    }
}

/* 4. 各feature-itemの初期状態 */
.feature-item {
    opacity: 0;
    transform: translateY(20px);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;
}

.feature-item h3 {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 300;
    letter-spacing: 0.45em;
    color: rgba(255, 74, 74, 0.85);
    margin-bottom: 0.6rem;
}

.feature-item p {
    font-size: clamp(0.65rem, 1vw, 0.85rem);
    font-weight: 200;
    letter-spacing: 0.28em;
    color: rgba(255, 74, 74, 0.7);
}

.feature-item::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    margin-top: 1.25rem;
    background-color: rgba(255, 74, 74, 0.65);
    transition: width 0.6s ease;
}

.feature-item.active::after {
    width: 60px;
}

/* 説明文（右カラム） */
.feature-description {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    pointer-events: none;
}

.feature-description-content {
    position: relative;
    width: 100%;
    min-height: 120px;
}

.feature-description-text {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    width: 180%;
    max-width: 960px;
    opacity: 0;
    transform: translate(-50%, 50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    text-align: left;
    line-height: 1.85;
}

.feature-description.show {
    opacity: 1;
    transform: translateY(0);
}

/* 5. FVラッパー (縮小/フェードアウト用) */
#fv-content-wrapper {
    transform: scale(1) translateY(0px);
    opacity: 1;
    /* 縮小・移動の起点 */
    transform-origin: center center;
}


/* コンテンツエリア */
.content-area {
    padding: 4rem 0;
}

/* 上段: 中央配置 */
.content-top-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0 2.5rem;
}

.content-image-top {
    max-width: min(90vw, 760px);
    width: 100%;
    height: auto;
    opacity: 0;
    transform: scale(0.5);
    transform-origin: center center;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.content-image-top.fade-in {
    opacity: 1;
    transform: scale(1);
}

/* 下段: 左右配置 */
.content-bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    padding: 0 2.5rem;
}

.content-image-bottom-wrapper {
    position: static;
}

.content-image-bottom {
    width: 100%;
    max-width: min(90vw, 760px);
    height: auto;
    opacity: 0;
    transform: scale(0.5);
    transform-origin: center center;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.content-image-bottom.fade-in {
    opacity: 1;
    transform: scale(1);
}

.content-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

.content-description {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #22c55e; /* 緑色に変更 */
}

/* フッター直前のビジュアル */
.footer-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.footer-hero-image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.footer-hero-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    right: clamp(2rem, 8vw, 5rem);
    transform: none;
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.6vw, 1.2rem);
    justify-content: center;
    padding: clamp(0.6rem, 1.4vw, 1rem) clamp(1rem, 2.5vw, 1.8rem);
    color: #ffffff;
    z-index: 5;
}

.footer-hero-caption-subtitle,
.footer-hero-caption-title {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.9;
    font-weight: 700;
}

.footer-hero-caption-title {
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    padding: clamp(0.75rem, 1.8vw, 1.2rem) clamp(1.4rem, 3vw, 2.2rem);
    border-radius: 12px;
    margin-top: 0;
}

@media (max-width: 768px) {
    .footer-hero-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        margin: 0;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
        width: calc(100% - clamp(2rem, 10vw, 4rem));
        max-width: min(90%, 360px);
    }
}

/* ノイズパターン（細かい黒い点々） - オーバーレイの上に表示 */
.footer-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 1px, transparent 1px);
    background-size: 4px 4px;
    background-position: 0 0;
    opacity: 1;
}

.footer-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.35);
}

/* フッター */
.footer {
    background-color: #1F2529;
    color: white;
    padding: 8rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-container {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto 6rem;
    display: grid;
    grid-template-columns: 200px 1fr 2fr; /* ナビゲーションカラムを1.2frから2frに拡大 */
    gap: 3rem;
    align-items: flex-start;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-image-column {
    align-items: center;
}

.footer-image-primary {
    max-width: 100px;
    width: 100%;
    height: auto;
}

.footer-info-column {
    margin-left: 2rem; /* 右に移動させるためのマージン */
}

.footer-info-column .footer-title {
    margin-bottom: 0;
}

.footer-contact {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.footer-contact br {
    display: block;
    margin: 0.5rem 0;
}

/* 住所とTELを同じフォントサイズに統一 */
.footer-contact,
.footer-contact * {
    font-size: 0.95rem !important;
    font-weight: 400;
}

.footer-nav-column {
    display: flex;
    flex-direction: column;
}

.footer-nav-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed; /* セルの幅を固定して確実に30%にする */
}

.footer-nav-row {
    vertical-align: top;
}

.footer-nav-cell {
    padding: 0 1.5rem 0.5rem 0; /* パディングを少し減らしてスペースを確保 */
    vertical-align: top;
    width: 30%; /* すべてのセルを30%に統一 */
    min-width: 0; /* テキストの改行を防ぐ */
}

/* Product（3番目）とSpecial（4番目）の間隔を広げる */
.footer-nav-cell:nth-child(3) {
    padding-right: 4rem; /* Productの右側パディングを増やす */
}

.footer-nav-cell:nth-child(4) {
    padding-left: 2.5rem; /* Specialの左側パディングを追加 */
}

.footer-nav-cell:last-child {
    padding-right: 0;
}

.footer-nav-column .footer-link {
    display: inline-block;
}

.footer-link-label {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(165, 165, 165, 0.7);
    padding-bottom: 0.25rem;
    display: inline-block;
}

.footer-link-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    white-space: nowrap; /* テキストの改行を防ぐ */
}

.footer-link + .footer-link-note {
    margin-top: 1rem;
}

.footer-link-note + .footer-link-note {
    margin-top: 0.75rem;
}

.footer-title {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: white;
}

.footer-english {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.footer-description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 0.75rem;
}

.footer-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: white;
}

.footer-coming-soon {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
}

.footer-divider {
    max-width: 1500px;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 2rem auto;
}

.footer-copyright {
    max-width: 1500px;
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 2rem;
    margin: 0 auto;
}

.footer-copyright p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 16px;
        margin-bottom: 0rem;
    }
    
    .footer {
        padding: 2rem 1rem 1rem;
    }
    
    .footer-image-column {
        align-items: center;
        text-align: center;
    }
    
    .footer-info-column {
        align-items: center;
        text-align: center;
        margin-left: 0; /* スマホサイズではマージンをリセット */
    }
    
    .footer-title {
        text-align: center;
    }
    
    .footer-contact {
        text-align: center;
    }
    
    .footer-nav-column {
        align-items: center;
        margin-left: 55px;
    }
    
    .footer-nav-table {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    
    .footer-nav-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .footer-nav-row {
        margin-bottom: 0;
    }
    
    .footer-nav-cell {
        display: flex;
        flex-direction: column;
        width: 50%;
        padding: 0.75rem 1rem 0.75rem 0;
        min-width: 0;
    }
    
    .footer-nav-cell:nth-child(2) {
        padding-left: 2rem;
    }
    
    .footer-nav-cell:nth-child(4) {
        padding-left: 2rem;
    }
    
    /* 左列：Home, About, Product, Privacy */
    .footer-nav-cell:nth-child(1),
    .footer-nav-cell:nth-child(2),
    .footer-nav-cell:nth-child(3),
    .footer-nav-cell:nth-child(5) {
        width: 50%;
    }
    
    /* 右列：Special */
    .footer-nav-cell:nth-child(4) {
        width: 50%;
    }
    
    .footer-link-note {
        font-size: 0.75rem;
    }
    
    /* コンテンツエリア レスポンシブ */
    .content-bottom-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .content-image-bottom-wrapper {
        position: static;
        transform: none;
    }
    
    .content-title {
        font-size: 1.5rem;
    }
    
    .content-description {
        font-size: 1rem;
    }

    .top-header {
        display: none !important;
    }

    .bottom-left-nav {
        display: none !important;
    }
}

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

/* ハンバーガーボタン */
.hamburger-btn {
    position: fixed;
    top: 2rem;
    right: 2.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100;
    transition: transform 0.3s ease;
}

.hamburger-btn.menu-open {
    transform: none;
}

.hamburger-line {
    position: absolute;
    left: 50%;
    width: 28px;
    height: 3px;
    background-color: white; /* デフォルトを白に変更 */
    border-radius: 3px;
    transform: translateX(-50%);
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
}

/* 背景が白のときは黒に */
.hamburger-btn.dark .hamburger-line {
    background-color: black;
}

.hamburger-line:nth-child(1) {
    top: 16px;
}

.hamburger-line:nth-child(2) {
    top: 24px;
}

.hamburger-line:nth-child(3) {
    top: 32px;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* メニューオーバーレイ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 70;
    display: flex;
    clip-path: circle(0px at calc(100% - 2.5rem) 2rem); /* ハンバーガーボタンの位置を基準に円形展開 */
    pointer-events: none;
    background-color: #45686F; /* 背景ページが透けないように不透明な背景色を設定 */
}

/* メニュー背景画像 */
.menu-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/Image_20240917_125333_975 1.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* メニューグラデーションオーバーレイ */
.menu-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(104, 117, 125, 0.7), rgba(69, 104, 111, 0.7));
    z-index: 1;
}

.menu-overlay.active {
    pointer-events: auto;
}

.menu-overlay.hidden {
    display: none;
}

/* メニューコンテンツ */
.menu-content {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    z-index: 2;
}

.menu-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.menu-nav {
    width: 100%;
}

.menu-table {
    width: auto;
    border-collapse: separate;
    border-spacing: 0 3rem;
    margin: 0 auto;
    table-layout: fixed;
}

.menu-row {
    display: table-row;
}

.menu-cell {
    display: table-cell;
    vertical-align: top;
    padding: 0 2rem 0 0;
    text-align: left;
    width: auto;
}

.menu-item {
    display: inline-block;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
    text-align: left;
    position: relative;
    padding: 0;
    padding-bottom: 0.25rem;
    margin: 0;
    line-height: 1;
    opacity: 0; /* 初期状態：非表示 */
    transform: translateY(20px); /* 初期状態：下に20px */
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    width: fit-content;
}

/* メニュー項目が表示されるアニメーション */
/* .menu-item.show は削除（GSAPで直接制御） */

.menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease;
}

.menu-item:hover {
    color: rgba(255, 255, 255, 0.8);
}

.menu-item:hover::after {
    width: 100%;
}


.menu-item-note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    text-align: left;
    opacity: 0;
    transform: translateY(20px);
    white-space: nowrap;
}

.menu-item + .menu-item-note {
    margin-top: 1.5rem;
}

.menu-item-note + .menu-item-note {
    margin-top: 1rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .menu-nav {
        margin-left: 55px;
    }
    
    .menu-table {
        width: 100%;
        margin: 0 auto;
        border-spacing: 0 2rem;
    }
    
    .menu-row {
        display: table-row;
    }
    
    .menu-row:nth-child(2) {
        display: block;
    }
    
    .menu-row:nth-child(2) .menu-cell {
        display: block;
        padding-bottom: 2rem;
    }
    
    .menu-row:nth-child(2) .menu-cell:first-child {
        padding-bottom: 2rem;
    }
    
    .menu-cell {
        display: table-cell;
        vertical-align: top;
        padding: 0 1rem 0 0;
        text-align: left;
        width: auto;
    }
    
    .menu-item {
        font-size: 1.5rem;
        text-align: left;
    }
    
    .menu-item-note {
        text-align: left;
        font-size: 0.8rem;
    }
    
    .menu-right {
        flex: none;
        padding: 1rem;
        justify-content: center;
        align-items: center;
    }
}

/* --- 左下ナビゲーションメニュー --- */
.bottom-left-nav {
    position: fixed;
    bottom: 3rem;
    left: 5rem;
    z-index: 30;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.bottom-left-nav.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bottom-left-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bottom-left-nav-item {
    display: flex;
    align-items: center;
    color: #BCBFC3; /* 非アクティブ時は薄いグレー */
    font-size: 1.25rem;
    font-weight: 300; /* フォントウェイトを落とす */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease, font-weight 0.3s ease;
    font-family: sans-serif;
}

.bottom-left-nav-item.show {
    opacity: 1;
    transform: translateY(0);
}

.bottom-left-nav-item::before {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background-color: #BCBFC3; /* 非アクティブ時は薄いグレー */
    margin-right: 12px;
    flex-shrink: 0;
    transition: background-color 0.3s ease, width 0.3s ease; /* widthのトランジションを追加 */
}

.bottom-left-nav-item:hover {
    color: #a5a5a5; /* ホバー時にグレーに変更 */
}

.bottom-left-nav-item:hover::before {
    background-color: #a5a5a5; /* ホバー時にグレーに変更 */
}

/* Newsセクション・コンテンツエリア表示時の黒色スタイル */
.bottom-left-nav-item.dark {
    color: #BCBFC3; /* 非アクティブ時は薄いグレー */
    font-weight: 300; /* フォントウェイトを落とす */
}

.bottom-left-nav-item.dark::before {
    background-color: #BCBFC3; /* 非アクティブ時は薄いグレー */
}

.bottom-left-nav-item.dark:hover {
    color: #a5a5a5; /* ホバー時にグレーに変更 */
}

.bottom-left-nav-item.dark:hover::before {
    background-color: #a5a5a5; /* ホバー時にグレーに変更 */
}

/* 現在のページ/セクションを示すアクティブスタイル */
.bottom-left-nav-item.active {
    color: #ffffff; /* アクティブ時は白色 */
    font-weight: 500; /* アクティブ時はフォントウェイトを上げる */
}

.bottom-left-nav-item.active::before {
    background-color: #ffffff; /* アクティブ時は白色 */
    width: 32px; /* アクティブ時はバーを長くする（20px → 32px） */
}

.bottom-left-nav-item.active:hover {
    color: #ffffff; /* アクティブ時はホバーでも白色を維持 */
}

.bottom-left-nav-item.active:hover::before {
    background-color: #ffffff; /* アクティブ時はホバーでも白色を維持 */
}

/* アクティブ状態で黒色セクションにいる場合 */
.bottom-left-nav-item.active.dark {
    color: #000000; /* アクティブ時は黒色（黒背景用） */
    font-weight: 500; /* アクティブ時はフォントウェイトを上げる */
}

.bottom-left-nav-item.active.dark::before {
    background-color: #000000; /* アクティブ時は黒色（黒背景用） */
    width: 32px; /* アクティブ時はバーを長くする（20px → 32px） */
}

.bottom-left-nav-item.active.dark:hover {
    color: #000000; /* アクティブ時はホバーでも黒色を維持 */
}

.bottom-left-nav-item.active.dark:hover::before {
    background-color: #000000; /* アクティブ時はホバーでも黒色を維持 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .bottom-left-nav {
        bottom: 1.5rem;
        left: 2.5rem;
    }
    
    .bottom-left-nav-item {
        font-size: 1rem;
    }
    
    .bottom-left-nav-item::before {
        width: 15px;
        margin-right: 8px;
    }
    
    .bottom-left-nav-list {
        gap: 1rem;
    }
}

/* ============================================
   ブログ関連スタイル
   ============================================ */

/* ブログアーカイブページ */
.blog-archive-area {
    padding-top: 2rem;
}

.blog-header {
    margin-bottom: 3rem;
}

.blog-title {
    color: #1F2529;
    margin-bottom: 1rem;
}

.blog-description {
    font-size: 1.125rem;
    line-height: 1.6;
}

.blog-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .blog-posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ブログ記事カード */
.blog-post-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.blog-post-thumbnail {
    display: block;
    overflow: hidden;
}

.blog-post-thumbnail img {
    transition: transform 0.3s ease;
}

.blog-post-card:hover .blog-post-thumbnail img {
    transform: scale(1.05);
}

.blog-post-content {
    padding: 1.5rem;
}

.blog-post-categories {
    margin-bottom: 0.75rem;
}

.blog-category-tag {
    display: inline-block;
    background-color: #f3f4f6;
    color: #374151;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.blog-category-tag:hover {
    background-color: #e5e7eb;
}

.blog-post-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.blog-post-title a {
    color: #111827;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post-title a:hover {
    color: #2563eb;
}

.blog-post-meta {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.blog-post-excerpt {
    color: #374151;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-read-more {
    display: inline-block;
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-read-more:hover {
    color: #1e40af;
}

/* ページネーション */
.blog-pagination {
    margin-top: 3rem;
}

.blog-pagination .nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.blog-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: white;
    color: #374151;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background-color: #2563eb;
    color: white;
}

.blog-no-posts {
    text-align: center;
    padding: 4rem 0;
}

/* 個別投稿ページ・固定ページ - FVラッパーを非表示にする */
/* ただし、トップページ（body.home）では表示する */
body.single #fv-wrapper,
body.single-post #fv-wrapper,
body.page:not(.home) #fv-wrapper,
body.page-product #fv-wrapper,
body.page-about #fv-wrapper {
    display: none !important;
}

/* トップページではFVラッパーを表示する（最優先） */
body.home #fv-wrapper,
body.home.page #fv-wrapper {
    display: block !important;
    visibility: visible !important;
}

/* 固定ページの背景色を設定 */
body.page,
body.page-product,
body.page-about {
    background-color: #ffffff;
    color: #1f2937;
}

/* 個別投稿ページ */
.single-post-area {
    width: 100%;
    background-color: #f3f4f6;
    min-height: 100vh;
    padding-top: 2rem;
    position: relative;
    z-index: 30;
    overflow: visible;
}

.single-post-container {
    max-width: 64rem; /* 1024px */
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.single-post {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.single-post-header {
    padding: 2rem;
    padding-bottom: 1.5rem;
}

.single-post-categories {
    margin-bottom: 1rem;
}

.single-category-tag {
    display: inline-block;
    background-color: #f3f4f6;
    color: #374151;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.single-category-tag:hover {
    background-color: #e5e7eb;
}

.single-post-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.single-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}

.single-post-date,
.single-post-author,
.single-post-comments-count {
    display: flex;
    align-items: center;
}

.single-post-thumbnail {
    width: 100%;
}

.single-post-thumbnail-img {
    width: 100%;
    height: auto;
    display: block;
}

.single-post-content {
    padding: 2rem;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.single-post-tags-label {
    color: #374151;
    font-weight: 500;
    margin-right: 0.75rem;
}

.post-content {
    color: #1f2937;
    line-height: 1.8;
    overflow: visible;
    position: relative;
}

.post-content p {
    margin-bottom: 1.5rem;
}

.post-content h2 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #111827;
}

.post-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #111827;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content a {
    color: #2563eb;
    text-decoration: underline;
}

.post-content a:hover {
    color: #1e40af;
}

.post-content img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
}

.post-content blockquote {
    border-left: 4px solid #2563eb;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6b7280;
}

.page-links {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.single-post-tags {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.single-tag {
    display: inline-block;
    background-color: #dbeafe;
    color: #1e40af;
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.single-tag:hover {
    background-color: #bfdbfe;
}

.single-post-navigation {
    padding: 2rem;
    padding-top: 0;
    border-top: 1px solid #e5e7eb;
}

.single-post-navigation-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.post-nav-prev,
.post-nav-next {
    flex: 1;
}

.post-nav-empty {
    flex: 1;
}

.post-nav-link {
    display: flex;
    align-items: center;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-nav-link:hover {
    color: #1e40af;
}

.post-nav-link-next {
    justify-content: flex-end;
}

.post-nav-arrow {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.post-nav-link-next .post-nav-arrow {
    margin-right: 0;
    margin-left: 0.5rem;
}

.post-nav-content {
    display: flex;
    flex-direction: column;
}

.post-nav-label {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.post-nav-title {
    font-weight: 500;
    color: #111827;
}

/* コメントセクション */
.comments-area {
    margin-top: 2rem;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.comments-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-body {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.comment-body:last-child {
    border-bottom: none;
}

.comment-meta {
    margin-bottom: 1rem;
}

.comment-author img {
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.comment-author-name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.comment-meta-data {
    font-size: 0.875rem;
    color: #6b7280;
}

.comment-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #374151;
}

.comment-text p {
    margin-bottom: 0.75rem;
}

.comment-text p:last-child {
    margin-bottom: 0;
}

.comment-reply a {
    color: #2563eb;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.comment-reply a:hover {
    color: #1e40af;
}

.comment-awaiting-moderation {
    display: block;
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* コメントフォーム */
.comment-form {
    margin-top: 2rem;
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
    margin-bottom: 1.5rem;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.comment-notes,
.form-allowed-tags {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.submit {
    background-color: #2563eb;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit:hover {
    background-color: #1e40af;
}

.comments-pagination {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.comments-pagination .nav-links {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.comments-pagination .page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: white;
    color: #374151;
    text-decoration: none;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.comments-pagination .page-numbers:hover,
.comments-pagination .page-numbers.current {
    background-color: #2563eb;
    color: white;
    border-color: #2563eb;
}

.no-comments {
    text-align: center;
    padding: 2rem 0;
    font-size: 1rem;
    color: #6b7280;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .single-post-container {
        padding: 1rem 1rem 2rem;
    }
    
    .single-post-title {
        font-size: 1.875rem;
    }
    
    .single-post-header,
    .single-post-content,
    .single-post-navigation {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .blog-posts-grid {
        grid-template-columns: 1fr;
    }
    
    .single-post-navigation-inner {
        flex-direction: column;
        gap: 1rem;
    }
    
    .post-nav-next {
        text-align: left;
    }
    
    .post-nav-link-next {
        justify-content: flex-start;
    }
    
    .post-nav-link-next .post-nav-arrow {
        margin-left: 0;
        margin-right: 0.5rem;
        order: -1;
    }
    
    .comments-area .single-post {
        padding: 1.5rem;
    }
    
    .comment-author img {
        width: 40px;
        height: 40px;
    }
    
    .comments-title {
        font-size: 1.5rem;
    }
}

/* ============================================
   ニュースセクション（トップページ用）
   ============================================ */

.news-section {
    padding: 0 0 4rem 0; /* ファーストビューとの間隔を最小限に（上側を0に） */
    background-color: #6F6F6F !important;
    color: #ffffff;
}

.news-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.news-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .news-section-title {
        font-size: 2.5rem;
    }
}

.news-section-subtitle {
    color: #ffffff;
    font-size: 1rem;
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 行間を狭くする（1.5rem → 0.75rem） */
}

.news-item {
    background-color: #6F6F6F;
    border-radius: 0;
    padding: 1.5rem 0; /* 左右のパディングを削除 */
    transition: none;
    border-bottom: 1px solid #ffffff; /* 指定どおり白いアンダーライン */
}

.news-item:hover {
    box-shadow: none;
}

.news-item > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .news-item > div {
        flex-direction: row;
        align-items: center;
    }
}

.news-date {
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
}

.news-category {
    flex-shrink: 0;
}

.news-category-tag {
    display: inline-block;
    font-size: 0.75rem;
    color: #ffffff;
    text-decoration: none; /* アンダーラインを削除 */
}

.news-content {
    flex: 1;
}

.news-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.news-title:hover {
    color: #ffffff;
}

.news-more {
    text-align: center;
    margin-top: 3rem;
}

.news-more-link {
    display: inline-block;
    background-color: transparent;
    color: #2563eb;
    padding: 0;
    border-radius: 0;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-more-link:hover {
    color: #1d4ed8;
}

.news-no-posts {
    text-align: center;
}

/* ============================================
   課題・解決セクション
   ============================================ */

.issue-solution-section {
    background-color: #ffffff;
}

.issue-solution-section .intermission-visual-section {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
}

.issue-solution-heading {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #1F2529;
    letter-spacing: 0.05em;
    margin: 0;
}

.issue-solution-image {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    height: auto;
    display: block;
}

.issue-solution-section .intermission-visual-section:nth-of-type(3) .issue-solution-image {
    max-width: 160px;
}

.issue-heading-block {
    padding-top: clamp(0.8rem, 2vw, 1.2rem) !important;
    padding-bottom: clamp(0.8rem, 2vw, 1.2rem) !important;
}

/* ============================================
   スマート農業ビジュアルセクション
   ============================================ */

.smart-agri-visual-section {
    background-color: #878787;
    padding: 10rem 0 6rem;
}

.smart-agri-visual-inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.smart-agri-visual-image {
    width: 100%;
    max-width: 1100px;
    height: auto;
    display: block;
}

/* ============================================
   スマート農業フローセクション
   ============================================ */

@media (max-width: 768px) {
    .news-item {
        padding: 1rem;
    }
}

/* ============================================
   スマート農業フローセクション
   ============================================ */

.smart-agri-flow-section {
    background-color: #ffffff;
    background-image: url("img/new-top-05.svg");
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: clamp(5rem, 12vw, 7.5rem);
    padding-bottom: clamp(5rem, 12vw, 7.5rem);
}

.smart-agri-flow-image {
    width: 100%;
    max-width: 860px;
    height: auto;
    display: block;
}

.smart-agri-flow-heading {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: #0F1F2C;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* ============================================
   オフグリッドセクション
   ============================================ */

.offgrid-section {
    background-color: #ffffff;
}

.offgrid-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    text-align: center;
}

.offgrid-heading,
.offgrid-subheading {
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0F1F2C;
    margin: 0;
}

.offgrid-heading {
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
}

.offgrid-subheading {
    font-size: clamp(1.2rem, 3.5vw, 2rem);
}

.offgrid-note {
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: #0F1F2C;
    letter-spacing: 0.05em;
    margin: clamp(1rem, 3vw, 1.5rem) 0 0;
}

.offgrid-image {
    width: 100%;
    max-width: 760px;
    height: auto;
    display: block;
}

/* ============================================
   オフグリッド拡張セクション
   ============================================ */

.offgrid-extension-section {
    background-image: url("img/new-top-08.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: clamp(8rem, 15vw, 12rem);
    padding-bottom: clamp(8rem, 15vw, 12rem);
}

.offgrid-extension-inner {
    min-height: clamp(360px, 45vw, 680px);
}

.issue-smart-gradient {
    background: linear-gradient(180deg, #ffffff 0%, #878787 100%);
}

.issue-smart-gradient > section {
    background: transparent;
}

.issue-smart-gradient .intermission-visual-section {
    background: transparent;
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
    .news-section {
        padding: 2rem 0;
    }
    
    .news-section-header {
        margin-bottom: 2rem;
    }
    
    .news-section-title {
        font-size: 1.75rem;
    }
    
    .news-item {
        padding: 1rem;
    }
    
    .news-title {
        font-size: 1rem;
    }
}

/* ============================================
   スプラッシュスクリーン
   ============================================ */

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
    pointer-events: none;
}

.splash-screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.splash-screen.fading {
    /* 背景と点々は非表示にするが、画像は表示し続ける */
    background-color: transparent !important;
}

.splash-screen.fading .splash-dots {
    opacity: 0;
    visibility: hidden;
}

/* スプラッシュスクリーンの画像は常に表示 */
.splash-screen .splash-image {
    opacity: 1 !important;
    visibility: visible !important;
}

.splash-image {
    transform: scale(1);
}

/* 3つの点々コンテナ */
.splash-dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

/* 個別の点 */
.splash-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000000;
    display: block;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.splash-dot:nth-child(1) {
    animation-delay: 0s;
}

.splash-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.splash-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .splash-dots {
        margin-top: 30px;
    }
    
    .splash-dot {
        width: 8px;
        height: 8px;
    }
}

/* ============================================
   test.svg セクション（左右レイアウト）
   ============================================ */

.test-svg-section {
    position: relative;
    z-index: 20;
    background-color: #000000 !important;
    background: #000000 !important;
}

.test-svg-container {
    position: relative;
    min-height: 100vh;
    background-color: #000000 !important;
    background: #000000 !important;
}

/* 左側：test.svgを丸く表示 */
.test-svg-left {
    width: 50%;
    padding: 2rem;
    background-color: #000000 !important;
    background: #000000 !important;
}

.test-svg-circle-wrapper {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: transparent;
}

.test-svg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
    clip-path: circle(50%);
    -webkit-clip-path: circle(50%);
}

/* 右側：文字を表示 */
.test-svg-right {
    width: 50%;
    padding: 2rem 4rem;
    background-color: #000000 !important;
    background: #000000 !important;
}

.test-svg-text-content {
    color: #ffffff;
    max-width: 600px;
}

.test-svg-title {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #ffffff;
    font-family: 'Noto Serif JP', serif;
}

.test-svg-description {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 3rem;
    color: #ffffff;
    opacity: 0.9;
}

.test-svg-about-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    transition: opacity 0.3s ease;
}

/* Aboutページの画像スクロールアニメーション */
.svg-image-wrapper img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.svg-image-wrapper img.scroll-fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* テキストコンテンツのスクロールアニメーション */
.about-05-section .text-content {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.about-05-section .text-content.scroll-fade-in {
    opacity: 1;
    transform: translateX(0);
}

.test-svg-about-link:hover {
    opacity: 0.7;
}

.test-svg-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    font-size: 1.2rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .test-svg-container {
        flex-direction: column;
        min-height: auto;
        padding: 2rem 0;
    }
    
    .test-svg-left {
        width: 100%;
        padding: 2rem;
    }
    
    .test-svg-circle-wrapper {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .test-svg-right {
        width: 100%;
        padding: 2rem;
        justify-content: center !important; /* 中央配置 */
    }
    
    .test-svg-text-content {
        text-align: center !important; /* テキストを中央揃え */
        max-width: 90vw !important;
        margin: 0 auto !important;
    }
    
    .test-svg-title {
        font-size: 1.75rem;
        text-align: center !important;
    }
    
    .test-svg-description {
        font-size: 0.9rem;
        text-align: center !important;
    }
}

/* キャプションのモバイル対応：改行を表示 */
.mobile-break {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-break {
        display: block !important;
    }
}

/* NEWSセクションのモバイル対応 */
@media (max-width: 768px) {
    .news-section {
        padding: 2rem 1rem 4rem 1rem !important;
    }
    
    .news-section .max-w-2xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .news-section-header {
        margin-bottom: 2rem !important;
    }
    
    /* issue-solutionセクションの上部パディング追加 */
    .issue-solution-section {
        padding-top: 3rem !important;
    }
    
    /* ニュース記事のレイアウト調整：日付とカテゴリを横並び、タイトルを下に */
    .news-item > div {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 0.75rem !important;
        row-gap: 0.75rem !important;
        align-items: center !important;
    }
    
    .news-item .news-date {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }
    
    .news-item .news-category {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: start !important;
    }
    
    .news-item .news-content {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }
}

/* シーン1とシーン1Bのモバイル対応 */
@media (max-width: 768px) {
    /* シーン1の親要素を縦並びに */
    #scene-1 .relative.flex {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2rem !important;
        padding: 2rem 1rem !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* シーン1Bの親要素を縦並びに */
    #scene-1b .relative.flex {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2rem !important;
        padding: 2rem 1rem !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* シーン1のタイトルと説明文 */
    #scene-1 #text-umibudo,
    #scene-1 #text-oishii {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #scene-1 #text-umibudo {
        margin-bottom: 2rem !important;
        text-align: center !important;
    }
    
    #scene-1 #text-oishii {
        text-align: left !important;
    }
    
    #scene-1 #text-oishii p {
        text-align: left !important;
    }
    
    /* シーン1Bのタイトルと説明文 */
    #scene-1b #text-zebra-aqua,
    #scene-1b #text-zebra-aqua-desc {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #scene-1b #text-zebra-aqua {
        margin-bottom: 2rem !important;
        text-align: center !important;
    }
    
    #scene-1b #text-zebra-aqua-desc {
        text-align: left !important;
    }
    
    #scene-1b #text-zebra-aqua-desc p {
        text-align: left !important;
    }
    
    /* シーン2の説明文もシーン1と同じフォント設定に */
    #scene-2 #desc-dev,
    #scene-2 #desc-about,
    #scene-2 #desc-sus {
        text-align: left !important;
    }
    
    #scene-2 #desc-dev p,
    #scene-2 #desc-about p,
    #scene-2 #desc-sus p {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem) !important;
        line-height: 1.75 !important;
        letter-spacing: -0.02em !important;
        text-align: left !important;
    }
}