@charset "UTF-8";

/* --- 全体リセット --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    width: 100%; 
    overflow-x: hidden; 
    font-family: 'Helvetica', 'Helvetica Neue', 'Noto Sans JP', sans-serif;
    color: #666666;
    font-size: clamp(14px, 1.6vw, 24px);
    font-kerning: none;
    font-feature-settings: "palt" 1;
    letter-spacing: 1px;
}

/* --- 見出しの基本スタイル --- */
h1 { color: #333333; margin: 1em 0 0.5em; font-weight: bold; font-size: clamp(28px, 4.4vw, 80px); }
h2 { color: #333333; margin: 1em 0 0.5em; font-weight: bold; font-size: clamp(20px, 3vw, 60px); }
h3 { color: #333333; margin: 1em 0 0.5em; font-weight: bold; font-size: clamp(18px, 2.4vw, 48px); }
h4 { color: #333333; margin: 1em 0 0.5em; font-weight: bold; font-size: clamp(16px, 2vw, 40px); }

.en-text { font-family: 'Helvetica', 'Helvetica Neue', sans-serif; font-weight: bold; font-style: oblique; }

/* --- 1. ヘッダー全体 --- */
.header {
    display: flex;
    align-items: center;
    height: 60px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}


/* --- 2. 左側ロゴエリア --- */
.header-left {
    background-color: rgb(24, 44, 117);
    width: clamp(200px, 20vw, 300px);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-left img {
    height: clamp(18px, 1.5vw, 24px);
    width: auto;
    display: block;
}

/* --- 3. 右側エリア（メニュー＋検索窓） --- */
.header-right {
    display: flex;
    align-items: center;
    height: 60px;
    flex-grow: 1;
    background-color: rgba(25, 25, 25, 0.5);
    justify-content: flex-start;
}

/* メニュー全体の配置 */
.nav-menu {
    flex-grow: 1; /* 余ったスペースを活用 */
    white-space: nowrap; /* メニューを改行させない */
    overflow: hidden;    /* はみ出た場合は隠す */
}


.nav-menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 60px;
}

/* メニュー項目 */
.nav-menu li {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #fff;
    padding-left: clamp(10px, 1.5vw, 20px);
    padding-right: clamp(10px, 1.5vw, 20px);
    height: 100%;
    transition: background-color 0.3s ease;
}

.nav-menu li:last-child {
    border-right: none;
}

.nav-menu a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-family: "Helvetica", sans-serif;
    font-size: clamp(14px, 1.2vw, 20px);
    font-style: italic;
    white-space: nowrap;
}

/* ホバー時の挙動 */
.nav-menu li:hover {
    background-color: #f6f427;
}

.nav-menu li:hover a {
    color: #182c75;
}

/* --- 4. 検索窓 --- */
.search-box {
    display: flex;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 2px 15px;
    height: 30px;
    width: clamp(120px, 15vw, 200px);
    flex-shrink: 0;
    margin-right: 20px;
}

.search-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    display: block;
}

.search-box input {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    outline: none;
}


/* --- 5. FV (左右分割・ズーム/フェード切り替え・インジケーター同期) --- */
.fv-wrapper { 
    display: flex; 
    width: 100%; 
    height: 100vh; 
    position: relative; 
    overflow: hidden; 
    margin-top: -60px;
}

.fv-side { 
    flex: 1; 
    position: relative; 
    overflow: hidden; 
    height: 100vh; 
    background-color: #000; /* 白飛び防止の黒背景 */
}

.scroll-wrapper { 
    position: relative; 
    width: 100%; 
    height: 100%; 
}

/* 画像：フェード ＋ ズームアニメーション */
.scroll-wrapper img { 
    position: absolute; 
    top: 0; left: 0;
    width: 100%; height: 100%; 
    object-fit: cover; 
    opacity: 0; 
    animation-timing-function: ease-in-out;
}

/* 左：4秒切り替え（12秒ループ・拡大） */
.left-side .scroll-wrapper img { animation: zoomFadeLeft 12s infinite; }
.left-side .scroll-wrapper img:nth-child(1) { animation-delay: 0s; }
.left-side .scroll-wrapper img:nth-child(2) { animation-delay: 4s; }
.left-side .scroll-wrapper img:nth-child(3) { animation-delay: 8s; }

/* 右：5秒切り替え（15秒ループ・縮小） */
.right-side .scroll-wrapper img { animation: zoomFadeRight 15s infinite; }
.right-side .scroll-wrapper img:nth-child(1) { animation-delay: 0s; }
.right-side .scroll-wrapper img:nth-child(2) { animation-delay: 5s; }
.right-side .scroll-wrapper img:nth-child(3) { animation-delay: 10s; }

@keyframes zoomFadeLeft {
    0% { opacity: 0; transform: scale(1.0); }
    12% { opacity: 1; transform: scale(1.05); }
    33% { opacity: 1; transform: scale(1.1); }
    40% { opacity: 0; transform: scale(1.15); }
    100% { opacity: 0; }
}

@keyframes zoomFadeRight {
    0% { opacity: 0; transform: scale(1.1); }
    10% { opacity: 1; transform: scale(1.05); }
    33% { opacity: 1; transform: scale(1.0); }
    40% { opacity: 0; transform: scale(0.95); }
    100% { opacity: 0; }
}

/* 下部グラデーション */
.scroll-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0) 50%);
    mix-blend-mode: multiply;
    z-index: 5;
    pointer-events: none;
}

/* --- インジケーター配置 --- */
.indicator {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 20;
    display: flex;
    align-items: center;
    color: #fff;
    font-family: "Helvetica", sans-serif;
}

.bar {
    width: 100px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin-right: 20px;
    position: relative;
    overflow: hidden;
}

.bar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: #fff;
}

/* バーの同期（左4秒・右5秒） */
.left-side .bar::after { animation: barAnimation 4s linear infinite; }
.right-side .bar::after { animation: barAnimation 5s linear infinite; }

@keyframes barAnimation {
    0% { width: 0%; }
    100% { width: 100%; }
}

.count {
    font-size: 12px;
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
}

.right-side .indicator {
    left: auto;
    right: 40px;
    flex-direction: row-reverse;
}
.right-side .bar {
    margin-right: 0;
    margin-left: 20px;
}



/* --- ロゴと中央メッセージの表示設定 --- */

/* 左側のロゴ（左上固定） */
.left-side .left-logo {
    position: absolute;
    bottom : 20%;
    left: 30%;
    z-index: 30; /* 画像(0)やグラデ(5)より手前に配置 */
    width: 36%; 
    pointer-events: none;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.2));
}

/* 右側のロゴ（右上固定） */
.right-side .right-logo {
    position: absolute;
    bottom : 20%;
    left: 30%;
    z-index: 30; /* 画像(0)やグラデ(5)より手前に配置 */
    width: 36%; 
    pointer-events: none;
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.2));
}

/* 中央テキスト（中央固定） */
.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    width: 20%; /* サイズは適宜調整 */
    pointer-events: none;
    
    /* 影の追加 */
    /* 1. テキスト（SVG内部の文字）に影を付けたい場合 */
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.2));
    
    /}
/* ロゴが見えない場合の対策：親要素を相対位置に */
.fv-side {
    position: relative; /* これが重要：ロゴの基準点になります */
}


/* 中央のSCROLLと縦線の設定（下のみ） */
.scroll-indicator {
    position: absolute;
    bottom:-2%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 66;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.1em;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* 文字と線の間隔 */
}

/* 下の線のみ表示 */
.scroll-indicator::after {
    content: "";
    width: 1px;
    height: 40px; /* 線の長さ */
    background-color: #fff;
    display: block;
    transform-origin: top; /* 上を起点に伸びる */
    animation: growLine 2s infinite;
}

@keyframes growLine {
    0% { transform: scaleY(0); opacity: 0; }
    20% { transform: scaleY(1); opacity: 1; }
    80% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(0); opacity: 0; }
}
/* --- NEWSバー全体のデザイン --- */
.news-bar {
    background-color: rgb(53, 23, 0);
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.news-container {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 90%;
    max-width: 1200px;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}

.news-label, .news-date { font-size: 16px; white-space: nowrap; }

.separator { width: 1px; height: 16px; background-color: #fff; }

.news-tag {
    font-size: 14px;
    background-color: rgb(133, 114, 99);
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
    animation: blink 1.5s infinite;
}

/* タイトル専用のエリア */
.news-title-wrapper {
    flex: 1; /* 残りのスペースを全て埋める */
    overflow: hidden; 
    position: relative; /* 子要素の基準 */
    height: 20px;
}

.news-title {
    position: absolute;
    top: 0;
    white-space: nowrap;
    font-size: 16px;
    /* 0の位置(親の左端)からスタートさせる */
    animation: scrollText 15s linear infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes scrollText {
    /* 親要素の右端(100%)から出現し、左端(-100%)へ消える */
    0% { left: 100%; }
    100% { left: -100%; }
}

/* --- セクション全体：全幅 --- */
.topics-section { 
    width: 100%; 
    padding: 40px 0; 
    overflow: hidden; 
}

/* --- セクション全体 --- */
.topics-section { 
    width: 100%; 
    padding: 100px 0; /* 上下100pxの余白に変更 */
    box-sizing: border-box;
}
/* --- コンテンツ共通の余白調整 --- */
.topics-header, 
.carousel-container, 
.all-view-wrapper {
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0 0px; /* ここで左右40pxを確保 */
    box-sizing: border-box;
}

.topics-header { 
    display: flex; 
    align-items: baseline; /* baselineをこれに変更 */
    padding-bottom: 5px;   /* 必要に応じて微調整 */
    margin-bottom: 40px; 
    padding: 0 40px; 
    box-sizing: border-box;
}

.topics-title { 
    font-size: 36px; 
    font-weight: bold; 
    color: #182c75; 
    margin: 0; 
    line-height: 1; /* 行高を固定 */
}

.sub-title { 
    font-size: 16px; 
    color: #333; 
    margin-left: 10px; 
    
    /* ここからが重要 */
    position: relative;
    top: -6px; /* この数値を増減させて、見た目で中央になるよう調整してください */
}
/* タブデザイン */
.filter-tabs {
    margin-left: auto; /* 自動で右側に寄る */
    display: flex;
    border: 1px solid #000;
}


.filter-tabs button {
    padding: 15px 40px;
    border: none;
    border-right: 1px solid #000;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    color: #333;
    transition: all 0.3s;
}
.filter-tabs button:last-child { border-right: none; }
.filter-tabs button.active { background: #000; color: #fff; }

/* カルーセル */
.carousel-container { 
    position: relative; 
    display: flex; 
    align-items: center; 
}
.carousel-wrapper { 
    display: flex; 
    gap: 20px; 
    width: 100%; 
    overflow-x: hidden; 
    padding: 20px 0;
    scroll-behavior: smooth; 
}
.carousel-wrapper img { width: 300px; height: auto; flex-shrink: 0; }

/* 左右ボタン */
.prev-btn, .next-btn { 
    position: absolute; top: 50%; z-index: 10; 
    width: 50px; height: 50px; border-radius: 50%; border: none; 
    background: rgba(0,0,0,0.5); color: #fff; cursor: pointer;
    transform: translateY(-50%);
}
.prev-btn { left: 40px; } /* 余白の内側から開始 */
.next-btn { right: 40px; }

/* ALL VIEW ボタン */
.all-view-wrapper { display: flex; justify-content: center; margin-top: 40px; }

.all-view-btn {
    background: #000; 
    color: #fff; 
    border: none; 
    border-radius: 50px;
    padding: 15px 30px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    width: 300px; 
    cursor: pointer; 
    font-size: 20px; 
    font-weight: bold; 
    font-style: italic; 
    height: 70px;
    transition: background 0.3s ease; /* 背景色の変化を滑らかに */
}

/* ホバー時の背景色 */
.all-view-btn:hover {
    background: #182c75;
}

.btn-icon {
    background: #fff; 
    color: #000; 
    width: 45px; 
    height: 45px;
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: transform 0.3s ease; /* 矢印の動きを滑らかに */
}

/* ボタンホバー時にアイコンを右へ移動させる */
.all-view-btn:hover .btn-icon {
    transform: translateX(10px);
}






.gallery-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #351700;
    overflow: hidden;
}

/* 80%の不透明度オーバーレイ */
.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(53, 23, 0, 0.8);
    z-index: 2;
}

.gallery-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.col { flex: 1; overflow: hidden; position: relative; }
.scroll-inner { display: flex; flex-direction: column; }
.scroll-inner img { width: 100%; height: 25vh; object-fit: cover; }

/* アニメーション設定 */
.col-down .scroll-inner { animation: slideDown 20s linear infinite; }
.col-up .scroll-inner { animation: slideUp 20s linear infinite; }

@keyframes slideDown {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}
@keyframes slideUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

.scroll-inner { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; /* ここで隙間を10pxに設定 */
}

.scroll-inner img { 
    width: 100%; 
    height: 25vh; /* 必要に応じて調整してください */
    object-fit: cover; 
    display: block; /* 画像下の余白対策 */
}
.gallery-container {
    display: flex;
    width: calc(100% + 10px); /* 隙間分だけ横幅を広げる */
    height: 100%;
    gap: 10px; /* ここでカラム間の隙間を10pxに設定 */
    padding-right: 10px; /* 右端の調整用 */
}

.col { 
    flex: 1; 
    overflow: hidden; 
    position: relative; 
}

/* ギャラリーセクション全体 */
.gallery-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #351700;
    overflow: hidden;
}

/* 80%不透明度オーバーレイ */
.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(53, 23, 0, 0.8);
    z-index: 2;
}

/* テキスト・ボタンのオーバーレイ配置 */
.content-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 80px;
    box-sizing: border-box;
    pointer-events: none; /* マウス操作を背景に通す */
}

.text-area { pointer-events: auto; color: #fff; }
.text-area h2 { font-size: 48px; margin-bottom: 20px; font-weight: bold; }
.text-area p { font-size: 18px; line-height: 1.6; }

.btn-area { display: flex; gap: 20px; margin-top: 30px; pointer-events: auto; }
.small-btn {
    padding: 15px 40px; border-radius: 50px; border: none;
    background: #182c75; color: #fff; cursor: pointer; font-weight: bold;
}



/* --- ギャラリーセクション全体 --- */
.gallery-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #351700;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(53, 23, 0, 0.8);
    z-index: 2;
}

.content-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 80px 80px; /* タブ分を考慮して上に余白 */
    pointer-events: none;
}

/* --- コンテンツレイアウト --- */
.top-area { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.area-logo { font-size: 120px; color: #fff; margin: 0; line-height: 1; }
.area-sub { font-size: 24px; color: #fff; margin-top: 10px; }
.horizontal-line { width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.5); margin: 40px 0; }
.content-body { display: flex; justify-content: space-between; align-items: flex-end; pointer-events: auto; }
.description p { font-size: 18px; color: #fff; line-height: 1.6; }


/* --- ボタン --- */
.small-btn {
    display: flex; justify-content: space-between; align-items: center;
    width: 220px; padding: 20px 30px; border-radius: 50px; border: none;
    background: #182c75; color: #fff; cursor: pointer; font-weight: bold;
}
.small-btn span { background: #fff; color: #000; width: 35px; height: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; }

/* --- 背景アニメーション画像群 --- */
.gallery-container {
    position: absolute; top: 0; left: 0;
    display: flex; gap: 10px; width: 100%; height: 100%; z-index: 1;
}
.col { flex: 1; overflow: hidden; position: relative; }
.scroll-inner { display: flex; flex-direction: column; gap: 10px; }
.scroll-inner img { width: 100%; height: 25vh; object-fit: cover; display: block; }

.col-down .scroll-inner { animation: slideDown 20s linear infinite; }
.col-up .scroll-inner { animation: slideUp 20s linear infinite; }

@keyframes slideDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }
@keyframes slideUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* --- 装飾 --- */
.side-decoration {
    position: absolute; left: 40px; top: 0; height: 100%;
    display: flex; flex-direction: column; align-items: center; color: #fff; z-index: 5;
}
.side-label { writing-mode: vertical-rl; margin-top: 40px; font-size: 16px; letter-spacing: 0.2em; }
.vertical-line { width: 1px; flex-grow: 1; background-color: rgba(255, 255, 255, 0.5); margin: 20px 0; }
.side-number { font-size: 24px; font-weight: bold; margin-bottom: 40px; }



/* 各セクションを固定するための設定 */
.gallery-section {
    position: sticky; /* スクロールに合わせて固定 */
    top: 0;           /* 画面上部に張り付く */
    width: 100%;
    height: 100vh;
    background-color: #351700;
    overflow: hidden;
    z-index: 1;
}

/* left-textの色を指定 */
.left-text {
    color: #fff;
}

/* 念のため、中のh2も白になるように明示 */
.left-text h2 {
    color: #fff;
}