/* ===== ベース設定 ===== */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
    color: #000;
    cursor: none;
}

.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    z-index: 10;
    transition: opacity 1s ease;
}

/* ===== ローディング ===== */
.year-month {
    font-size: 6rem;
    font-weight: 200;
    margin: 20px;
}
.year-month.done { 
    color: #ff8800; 
    padding: 20px;
}

.Ready-text {
    font-size: 10rem;
    font-weight: 200;
    color: #ff8800;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    opacity: 0;
    padding: 20px;
}
@keyframes flicker {
    0%, 20%, 40% { 
        opacity: 1; 
        text-shadow: 0 0 2px #ff8800; 
    }
    10%, 30% { 
        opacity: 0.4; 
        text-shadow: none; 
    }
    60%, 100% { 
        opacity: 1; 
        text-shadow: 0 0 6px #ff8800, 0 0 12px #ff8800; 
    }
}
.Ready-text.flicker {
    animation: flicker 0.4s linear forwards;
}

/* ===== メイン部分 ===== */
.main-content { 
    /* 他の絶対配置要素の基準とする */
    position: relative; 
    width: 100%;
    display: none; 
    opacity: 0; 
    transition: opacity 1s ease; 

    overflow-x: hidden;
}

.main-content.show { 
    display: block; 
    opacity: 1; 
}

/* ===== 背景動画 ===== */
.video-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -5;
    filter: blur(8px);
}

/* ===== 中央画像 ===== */
.center-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%; 
    width: 80%; 
    min-width: 400px; 
    height: auto;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.5s ease, filter 0.5s ease;
    opacity: 1;
    filter: blur(0px);
    margin: 20px;
}

/* ===== コンテンツ ===== */

.white-content-background {
    position: absolute; /* 親要素 .main-content (position: relative) を基準 */
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #ffffff; 
    z-index: 1; /* 帯(z-index: 2)より下、content3(z-index: 2)より下になるように配置 */
    display: none; /* JSで高さを設定するまで非表示 */
}

.content2 {
    display: flex;
    width: 100%;
    min-height: 100%;
    margin: 0 0;
    background: #ffffff;
    padding: 10vh 2rem;
    position: relative;
    z-index: 2;
    color: #000;
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    box-sizing: border-box;
    overflow: hidden; 
}

/* 中央:本文 */
.text2 {
    flex: 1 1 auto; 
    min-width: 300px;
    padding: 2rem;
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    color: #000000;
    font-family: "源ノ明朝", "Noto Serif JP", serif;
    font-weight: 100;
}


/* 最初の文字だけ大きくオレンジ */
.text2 p::first-letter {
    font-size: 4rem;
    color: #ff8800;
    font-family: "源ノ明朝", "Noto Serif JP", serif;
    float: none; 
    margin: 0;
    font-weight: 100;
}

/* コンテナ3 */
.content3 {
    position: relative;
    width: 100%;
    height: 30vh;
    background: #ffffff;
    overflow: hidden;
    z-index: 2;
    display: flex; /* 追加: text3の位置調整のために必要 */
    align-items: center; 
    justify-content: center; 
    padding: 5vh 0;
    box-sizing: border-box; /* 追加: paddingをheightに含める */
}

/* 左から出てくるボックス */
.scroll-box {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #ff8800;
    transition: left 1s ease;
    z-index: 1;
}

/* テキスト */
.text3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    z-index: 2;
    color: #ffffff;
    text-align: center;
    padding: 1vh 2rem;
    font-size: clamp(3rem, 7.5vw, 12rem);
    font-family: "Poppins", "Yu Gothic", "游ゴシック", sans-serif;
    font-weight: 300;
    text-align: center;
    white-space: nowrap;
}



/* 中央:本文 */
.text4 {
    flex: 1 1 auto; 
    min-width: 300px;
    padding: 2rem;
    font-size: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    color: #ff8800;
    font-family: "源ノ明朝", "Noto Serif JP", serif;
    font-weight: 100;
}


.text4 p {
    white-space: nowrap;      /* 改行しない */
    max-width: 100%;
    overflow: hidden;         /* 念のため */
    
    font-size: clamp(2rem, 8vw, 7rem);
    /* 最小 2rem / 画面依存 8vw / 最大 7rem */

    line-height: 1.1;
}



/* ----------------------------------- */
/* スクロール追従バンド (画面中央のオレンジの帯) */
/* ----------------------------------- */
.scroll-center-band {
    position: absolute; 
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20%; 
    min-width: 200px;
    height: 0;
    background-color: #ff8800; 
    z-index: 2;
}

/* ----------------------------------- */
/* 車両紹介セクション */
/* ----------------------------------- */
.new-story-section {
    width: 100%;
    padding: 150px 0; /* 上下の余白 */
    background-color: #00000000; /* 背景色 */
    overflow: hidden; 
    position: relative; 
    z-index: 5; 
}

.new-story-container {
    max-width: 100%; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    gap: 5%; 
    padding: 0 5vw; 
    padding-bottom: 10%;
    /* デフォルトは非反転 (画像左、テキスト右) */
    flex-direction: row; 
}




.new-story-image-wrapper {
    flex: 0 0 45%;
    position: relative;
    overflow: visible;

    /* アニメーション用 */
    transform: translateX(30%);
    opacity: 0;
    transition: 
        transform 1.0s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 1.0s ease-out;
}

.aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-top: 90%; /* ← 縦を横の90%に */
}

.new-story-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: contain; /* 横を絶対に切らない */
    display: block;
}



/* --- 右側のテキストコンテンツ --- */
.new-story-text-content {
    flex: 1; /* 残りのスペースを占める */
    display: flex;
    justify-content: center; /* テキストボックスを縦方向の中央に */
    align-items: center; /* テキストボックスを横方向の中央に */

    /* 初期状態: 中央から少し左 (右へスライドインするため) */
    opacity: 0;
    transform: translateX(-10%);
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 0.2s; /* 画像アニメーションの後に開始 */
}

.new-story-text-box {
    background-color: #ffffff;
    padding: 10%;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* 影 */
    max-width: 500px; /* テキストボックスの最大幅 */
    text-align: left;
}

.new-story-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #ff8800;
    margin-bottom: 20px;
}

.new-story-paragraph {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #000000;
}

/* --- アニメーション表示時のスタイル (非反転時) --- */
/* is-visible クラスが追加されたらアニメーションを実行 */
.new-story-image-wrapper.is-visible {
    transform: translateX(10%); /* 元の位置へ戻る (中央から左へ) */
    opacity: 1;
}

.new-story-text-content.is-visible {
    opacity: 1;
    transform: translateX(0%); /* 元の位置へ戻る (中央から右へ) */
}



/* ----------------------------------- */
/* ステーションコンテンツ (路線図アニメーション) - 下線と縦線接続版 */
/* ----------------------------------- */
.station-content {
    width: 100%;
    position: relative;
    z-index: 4;
}

.station-content-area {
    flex-grow: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00000000;
	padding: 0 0 80px 0; /* 上250px, 下80px */
    min-height: 500px;
    z-index: 5;
}

.line-type-labels-container {
    /* station-line-box-wrapper に対して絶対配置 */
    position: absolute;
    top: 0;
    right: 0; 
    
    /* 縦線グループの幅と高さを合わせる */
    width: 250px; 
    /* ★修正: 高さを250pxに再確保 */
    height: 250px; 
    
    display: flex;
    flex-direction: row-reverse; /* 右から左へ並べる */
    gap: 20px; /* 縦線と同じ間隔 */
    
    z-index: 10;
    pointer-events: none; 
    background-color: transparent;
}

.line-type-label {
    width: 24px; 
    height: 100%;
    
    display: flex;
    justify-content: right; 
    
    /* ★修正: 縦書き要素全体をコンテナの下端（駅名側）に寄せる */
    align-items: flex-end; 
    
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    
    /* 縦書き設定 */
    writing-mode: vertical-rl;
    
    color: var(--line-color, #000000); 
    
    font-family: 'Noto Sans JP', sans-serif;
}

/* 線の色クラスが残っている場合のフォールバック */
.line-type-label.type-ltd-exp { color: #f20000; }
.line-type-label.type-home-liner { color: #f20000; } 
.line-type-label.type-rapid { color: #006d9f; } 	 
.line-type-label.type-semi-rapid { color: #00f200; } 	
.line-type-label.type-normal { color: #000000; }




/* 線と駅アイテムをまとめるラッパー (基準点) */
.station-line-box-wrapper {
    position: relatisve;
    width: 90%; 
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    min-height: 400px;
    z-index: 6;
    background-color: transparent; 
}

/* 駅アイテムのコンテナ */
.station-items-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    box-sizing: border-box;
    position: relative;
    z-index: 7;
    padding-top: 17rem;
}

/* 個々の駅アイテム */
.station-item {
    position: relative;
    display: flex;
    /* 駅名と線グループを両端に配置 */
    flex-direction: row; 
    justify-content: space-between; 
    align-items: stretch; /* 子要素の高さを確保 */
    
    /* ★修正: 上下のマージンを 0 にし、padding で駅間スペースと線の高さを確保 */
    margin-bottom: 0px; 
    padding: 25px 0; /* 駅間のスペースを確保 */

    opacity: 0; 
    animation-delay: calc(0.5s + var(--animation-order) * 0.1s);
    animation: fadeInStationItem 1s ease-out forwards;
    color: #000;
}
/* 最初と最後の要素の縦線に配慮したパディング調整 */
.station-item:first-child { padding-top: 50px; }
.station-item:last-child { padding-bottom: 50px; }

@keyframes fadeInStationItem {
    to { opacity: 1; }
}

.station-name-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 5px; 
    z-index: 8; 
    align-self: center; 
    
    width: calc(100% - 250px);
    height: 60px; 
}

/* 駅名の下線 */
.station-underline {
    position: absolute;
    /* ★修正: station-name-wrapper の一番下に固定し、境界線とする */
    bottom: 20px; 
    height: 2px;
    background-color: #ff8800;
    
    left: 0; 
    right: calc(-1 * 250px); /* station-item 幅いっぱいに延長 */
    
    width: auto; 
    transform-origin: right center;
    transform: scaleX(1); 
    transition: transform 0.8s ease-out;
    z-index: 10; 
}

/* ----------------------------------- */
/* 日本語表記 (下線より上) */
/* ----------------------------------- */
.station-name {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.5rem; 
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    
    /* ★修正: 絶対配置で下線の上 (bottom: 20px) に配置 */
    position: absolute;
    left: 5px; 
    bottom: 25px; /* 下線 (20px) + 少しの隙間 */

    padding: 0 5px; /* 白背景のパディング */
    background-color: #ffffff; /* 白背景で下線を隠す役割 */
    z-index: 15; 
    
    /* 下線との干渉を防ぐため、元のマージン等は削除 */
    margin: 0; 
    background-color: #00000000;
}

/* ----------------------------------- */
/* 英語表記 (下線より下) */
/* ----------------------------------- */
.station-name-english {
    font-family: 'Arial', sans-serif;
    font-size: 0.9rem; 
    font-weight: 400;
    color: #666; 
    white-space: nowrap;
    left: 5px; 
    bottom: 0px; 

	position: absolute;
    width: fit-content;

    padding: 0 5px; /* 白背景のパディング */
	
    background-color: #ffffff; /* 白背景で下線を隠す役割 */
    z-index: 15; 
    
    margin: 0; 
    background-color: #00000000;
}

/* ----------------------------------- */
/* 線と円のグループ (右側に絶対配置) */
/* ----------------------------------- */
.station-lines-and-circles-wrapper {
    /* ★修正: position: absolute; で station-item の右端に固定 */
    position: absolute; 
    right: 0;
    top: 0; 
    width: 200px; 
    height: 100%;
    z-index: 8;
}

/* 垂直の線グループの配置 */
.station-vertical-lines {
    position: relative; 
    width: 100%;
    height: 100%; 
    display: flex;
    flex-direction: row-reverse; 
    gap: 20px; 
    align-items: stretch; /* 高さ100%を確保 */
    z-index: 6; 
}

/* 各線と円のペア */
.line-circle-pair {
    position: relative; 
    height: 100%;
    width: 24px;
    display: flex;
    justify-content: center; 
    align-items: center; 
    z-index: 6;
}

/* 縦線 */
.station-line {
    position: absolute;
    width: 24px; 
    /* height: 100% で station-item のパディングを含めた高さ全体を埋める */
    height: 110%; 
    opacity: 1; 
    border-radius: 6px; 
    z-index: 7; 
    background-color: var(--line-color, #000000); 
}

/* 線の色をクラスからも確実に適用する */
.station-line.type-normal { background-color: #000000; }
.station-line.type-semi-rapid { background-color: #00f200; } 
.station-line.type-rapid { background-color: #006d9f; } 	 
.station-line.type-new-rapid { background-color: #f20000; } 	
.station-line.type-special-rapid { background-color: #f20000; } 

/* 各白丸 (線の子要素として扱う) */
.station-circle {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 18px; 
    height: 18px;
    border-radius: 50%;
    z-index: 99; 
    
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5); 
    
    background-color: #ffffff; 
    border: 2px solid #000000; 
    box-shadow: none; 
}
/* 停車駅のスタイル (塗りつぶし丸) */
.station-circle[data-stop-type="pass"] {
    background-color: #00000000; 
    border: none; 
}
/* アニメーション表示時の状態 */
.station-item.is-visible .station-circle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1); 
}












/* ----------------------------------- */
/* 左右互い違いコンテンツセクションのスタイル */
/* ----------------------------------- */
.alternating-content {
    padding: 80px 0; 
    width: 100%; 
    background-color: #00000000; 
    position: relative;
    z-index: 3; 
    box-sizing: border-box;
}

.alternating-content-inner {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 5vw; 
}

.story-box {
    display: flex;
    align-items: center; 
    margin-bottom: 120px; 
    padding: 0; 
    background-color: #ffffff; 
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0; 
    transition: opacity 1s ease-out, transform 1s ease-out; 
    position: relative;
    z-index: 6;
    overflow: hidden;
    
    /* 【修正】左側からスライドインするデフォルトの初期位置 */
    transform: translateX(-100px); 
}

/* 画像コンテナ (漢字タイトルを含む) */
.story-image-container {
    position: relative;
    flex: 0 0 45%; 
    max-width: 450px;
    box-shadow: none; 
    /* デフォルト (左側配置) のパディング */
    padding: 10px 40px 10px 40px; 
}

.story-image {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); 
}

/* 本文コンテナ */
.story-text-container {
    flex: 1; 
    padding: 30px; 
    max-width: 500px; 
}

.story-text-container p {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.large-kanji {
    font-family: 'Noto Serif JP', serif;
    font-size: 8rem; 
    font-weight: 700;
    color: #ff8800;
    margin-bottom: 20px;
    line-height: 1;
    opacity: 0.8;
    display: inline-block;
}

/* --- 左右配置の調整とアニメーション初期位置 --- */

/* 右側配置 (画像右、テキスト左) */
.right-side {
    /* 左右反転を適用 */
    flex-direction: row-reverse; 
    /* 【修正】右側からスライドインする初期位置 */
    transform: translateX(100px); 
    text-align: right;
}

/* 左側配置 (画像左、テキスト右) */
.left-side {
	flex-direction: row; 
	transform: translateX(100px); 
    text-align: left;
    /* transform: translateX(-100px); (story-boxで共通設定済み) */
}

.right-side .story-image-container {
    /* 反転時のパディングを調整 */
    padding: 10px 40px 10px 40px;
}

.left-side .story-image-container {
    /* 反転時のパディングを調整 */
    padding: 10px 40px 10px 40px;
}
/* 漢字の配置調整 */
.story-box.left-side .large-kanji {
    margin-right: auto;
    margin-left: 0;
}

.story-box.right-side .large-kanji {
    margin-left: auto;
    margin-right: 0;
}

/* スクロールアニメーション (表示時の状態) */
.story-box.is-visible {
    opacity: 1;
    transform: translateX(0); 
}
































/* =================================== */
/* download-section */
/* =================================== */

.download-section-wrapper {
    /* セクション全体の背景色 */
    background-color: rgba(255, 255, 255, 0); 
    padding: 60px 20px 0 20px; /* 上下のパディング、左右は少し */
    text-align: center; /* コンテンツ全体を中央寄せ */
	z-index: 4;
	position: relative;
}

.download-container {
    /* 白いボックス */
    background-color: #ffffff;
    max-width: 600px; /* ボックスの最大幅 */
    margin: 0 auto 40px auto; /* 左右中央寄せ、下部に余白 */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 白いボックスに少し影 */
	z-index: 5;
}

/* タイトル */
.download-title {
    font-size: 2.5rem; /* PCでのサイズ */
    color: #ff8800; /* オレンジ色 */
    font-weight: bold;
    margin-bottom: 20px;
}

/* 上部と下部の説明文 */
.download-description-top,
.download-description-bottom {
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 30px; /* 説明文とリストの間の余白 */
}
.download-description-bottom {
    margin-top: 30px; /* リストと説明文の間の余白 */
    margin-bottom: 0; /* 下部の説明文の直後には余白なし */
}

/* ダウンロードリスト */
.download-list {
    text-align: left; /* リストの項目は左寄せ */
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
    margin: 0;
	
}

.download-list-item,.spec-list-item {
    display: flex; /* 番号とテキストを横並びにする */
    align-items: center; /* 垂直方向中央寄せ */
    margin-bottom: 15px; /* 各項目の下余白 */
    font-size: 1.1rem;
    color: #ff8800; /* オレンジ色 */
}



.download-list-item:last-child,
.spec-list-item:last-child {
    margin-bottom: 0; /* 最後の項目には下余白なし */
}



.download-number {
    display: inline-flex; /* 番号を Flex アイテムとして扱う */
    justify-content: center;
    align-items: center;
    width: 30px; /* 番号のボックスの幅 */
    height: 30px; /* 番号のボックスの高さ */
    background-color: #ff8800; /* オレンジ背景 */
    color: white; /* 白い文字 */
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    margin-right: 15px; /* 番号とテキストの間の余白 */
    flex-shrink: 0; /* 番号の幅が縮まないように */
}

.download-item-text {
    /* 必要に応じて、テキストが折り返すように設定 */
    overflow-wrap: break-word; 
    word-break: break-word;
    color: #000000; /* テキストの色を黒に */
}


.link {
  position: relative;
  color: #ff8800;         /* 下線と同系色で統一 */
  font-weight: 550;       /* 少し強調 */
  text-decoration: none;  /* デフォルトの下線を消す */
  transition: color 0.2s; /* ホバー時の色変化 */
}


.p-spec {
  position: relative;
  color: #ff8800;         /* 下線と同系色で統一 */
  font-weight: 550;       /* 少し強調 */
  text-decoration: none;  /* デフォルトの下線を消す */
}

.bve5 {
  font-size: 1.5rem;
  position: relative;
  color: #ffffff;
  background-color: #ff8800;
  font-weight: bold; 
}

/* 下線アニメーション（中央から左右に広がる） */
.link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;            /* 文字の少し下に線を引く */
  width: 0;
  height: 1px;
  background-color: #ff8800;
  transition: all 0.3s ease;
  transform: translateX(-50%);
  border-radius: 2px;
}

.link:hover::after {
  width: 100%; /* 中央から両端に伸びる */
}










.download-button-wrapper {
    display: flex;
    justify-content: center;
    margin: 10vh 0 0 0;
}

.download-button {
    position: relative;
    width: 30%;              /* 画面の40% */
    aspect-ratio: 16 / 9;      /* 十分な高さを確保（比率指定） */
    min-width: 250px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #ff8800;
    color: #ffffff;

    text-decoration: none;
    font-size: clamp(2rem, 4vw, 4rem); /* デバイス依存しない可変サイズ */
    font-weight: 700;
    text-transform: uppercase;

    transition: background-color 0.3s ease;
}

/* 下線（初期は見えない） */
.download-button::after {
    content: "";
    position: absolute;
    bottom: 25%;
    left: 50%;
    width: 0;
    height: 0.07em;
    background-color: #ffffff;
    transform: translateX(-50%);
    transition: width 0.4s ease;
}



.download-button:hover::after {
    width: 80%; /* 文字幅に近い見た目 */
}



.space {
	width: 100%;
	height: 20vh;
	background-color: #ffffff;
	z-index: 10;
}




.PJ-logo{
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 5px;
}

.content4 {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 100%;
    margin: 0;
    background: #ffffff;
    padding: 10vh 2rem 0 2rem;
    position: relative;
    z-index: 2;
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    box-sizing: border-box;
    overflow: hidden; 
    flex-direction: column;

    transform: translateY(5rem);
}


.copyright-wrapper {
    /* フォントサイズに応じて、適切な高さを確保する */
    line-height: 1.7rem; 
}

.copy {
  display: block;
  font-size: 1.5rem;
  color: #ff8800;
  background-color: #ffffff;
  font-weight: bold; 

  line-height: 1;
}





/* =================================== */
/* collaborator */
/* =================================== */

.collaborator-section-wrapper {
    padding: 5% 5%;
	width: 90%;
    max-width: 1200px;
	margin-top: 5rem;
	margin-left: auto;
    margin-right: auto;
}


/* --- テキストボックス（Flexコンテナ化） --- */
.collaborator-text-box {
    /* ボックス全体の設定 */
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    width: 100%; /* 親の幅を占有 */

    /* ★修正: 画像とコンテンツを横並びにするためのFlexbox化 */
    display: flex;
    align-items: flex-start; /* 上揃え */
    gap: 20px; 

    border-radius: 8px;
	z-index: 10;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	
}

/* --- 画像エリア（collaborator-media） --- */
.collaborator-media {
    /* PCでの画像エリアの幅を固定し、Flexアイテムとする */
    position: relative;
    flex-shrink: 0; 
	z-index: 11;
	margin-right: 2rem;
}


.collaborator-component.large .collaborator-media {
    width: 250px;
}
.collaborator-component.small .collaborator-media {
    width: 150px;
}

/* 1:1アスペクト比固定のトリック (ここで実装) */
.collaborator-media::before {
    content: '';
    display: block;
    padding-top: 100%; 
}

/* 実際の画像 */
.collaborator-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
	z-index: 12;
}

/* --- テキストコンテンツ (collaborator-content) --- */
.collaborator-content {
    flex-grow: 1; /* 残りのスペースを占有 */
}

.collaborator-component.large .collaborator-content h3{
    color: #ff8800;
    font-family:  "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    margin-top: 0;
    font-size: 5rem;
	margin-block: 0.75rem;
}

.collaborator-content h3{
    color: #ff8800;
    font-family:  "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    margin-top: 0;
    font-size: 2rem;
}

.collaborator-content h4{
    color: #000000;
    font-family:  "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    margin-top: 0;
    font-size: 1.8rem;
}

.collaborator-content p{
    color: #000000;
    font-family:  "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 400;
	font-size: 1.25rem;
    margin-top: 0;
    line-height: 1.6;
}



/* =================================== */
/* feature-section-wrapper (セクション全体) */
/* =================================== */

.feature-section-wrapper {
    /* 中央寄せと幅の制限 */
    max-width: 1200px;
    margin: 5rem auto 0 auto; 
    padding: 0 5%; /* 左右に画面幅に対する余白を設定 */
	z-index: 10;
}

/* =================================== */
/* feature-text-box (個々のボックスの共通スタイル) */
/* =================================== */
.feature-text-box {
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
    height: 100%; /* feature-group内で高さを揃えるため */
	z-index: 11;

	overflow-wrap: break-word; /* 多くのブラウザで推奨 */
    word-break: break-word;
}

/* テキストコンテンツの共通スタイル */
.feature-content-text h3 {
    font-size: 1.5rem; 
    color: #ff8800;
    font-weight: bold;
    margin-top: 0;
}

.feature-content-text p {
    font-size: 1rem; 
    color: #000000;
}


.feature-group {
	position: relative;
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; /* ボックス間の隙間 */
    margin-bottom: 60px; 
	z-index: 10;
}

/* 小サイズコンポーネント (PC: 3分割) */
.feature-component.feature-content-small {
    /* PC (デフォルト) は3分割 */
    /* width: (100% - 30px * 2) / 3 = 33.33% - 20px */
    flex: 0 0 calc(33.33% - 20px); 
    
    /* 縦方向の折り返し時に下余白が必要 */
    margin-bottom: 30px; 
    height: auto;
}







.collaborator-group {
    display: flex;
    flex-wrap: wrap; /* 複数の行がある場合 */
    
    /* ★高さを揃えるための設定（Flexboxのデフォルト挙動を再確認）★ */
    align-items: stretch; 
    
    /* 必須: 親コンテナの高さがコンテンツ量で潰されていないか確認 */
    /* min-height: 40vh;  など、最低限の高さを設定するのも有効です */
}


.collaborator-component.small {
    /* Flexアイテムが親の高さを確実に引き継ぐようにする（デフォルトでOKなはず） */
    align-self: stretch; 
}

.collaborator-text-box.small {
    display: flex;
    
    /* ★親要素の高さいっぱいまでテキストボックスを伸ばす★ */
    height: 100%; 
    
    /* テキストボックス内のコンテンツを上下に配置・分散させる */
    justify-content: space-between; 
    align-items: center;
}


/* 共通コンポーネントスタイル */
.collaborator-component {
    display: flex;
    align-items: flex-start; /* 画像とテキストを上揃えにする */
    gap: 30px;
    margin-bottom: 60px;
}

/* 複数の小サイズを横並びにするためのラッパー */
.collaborator-component.collaborator-group {
    display: flex;
    gap: 30px;
    height: 100%;
}

/* 小サイズコンポーネントの個別の設定 */
.collaborator-component.small {
    flex: 1; /* 均等に幅を分割 */
    margin-bottom: 0;
	width: 100%;
}



/* --- 画像エリア --- */
.collaborator-media-wrapper {
    /* PCでは画像エリアの幅を固定 */
    position: relative;
    flex-shrink: 0; 
}
.collaborator-component.large .collaborator-media-wrapper {
    width: 250px;
}
.collaborator-component.small .collaborator-media-wrapper {
    width: 150px;
}

/* 1:1アスペクト比固定のトリック */
.collaborator-media-wrapper::before {
    content: '';
    display: block;
    padding-top: 100%; 
}

/* 実際の画像 */
.collaborator-media-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* --- テキストエリア --- */
.collaborator-text-wrapper {
    flex-grow: 1;
}








/* =================================== */
/* ポップアップのスタイル */
/* =================================== */


/* オーバーレイ（画面全体を覆い、背景を暗くする） */
#popup-overlay {

    display: none;

/* 2. ポップアップとしての振る舞い (レイアウトから分離) */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; 
    background-color: rgba(0, 0, 0, 0.7);

    /* ポップアップを他の要素の手前に表示する */
    z-index: 1000; 
    
    /* 中央寄せの設定 */
    justify-content: center;
    align-items: center;

}


#popup-window {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    max-width: 80%;
    width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    
    /* スクロールバーが不要な場合は、高さを制限 */
    max-height: 90vh; 
    overflow-y: auto;
}


/* その他の要素 (例: タイマーメッセージ) */
.timer-message {
    font-weight: bold;
    margin-top: 20px;
    font-size: 1.1rem;
}

/* タイトル (ポップアップのH3に適用) */
#popup-window h3 {
    font-size: 2.5rem; /* PCでのサイズ */
    color: #ff8800; /* オレンジ色 */
    font-weight: bold;
    margin-bottom: 20px;
}

/* 上部と下部の説明文 */
#popup-window .download-description-top,
#popup-window .download-description-bottom {
    font-size: 1rem;
    color: #000000;
    line-height: 1.6;
    margin-bottom: 30px; 
    margin-top: 0; /* h3の後に続くため */
}
#popup-window .download-description-bottom {
    margin-top: 30px; 
    margin-bottom: 20px; /* タイマーメッセージの上に余白 */
}

/* ダウンロードリスト (中央寄せしたい場合は、親要素に text-align: center; を適用) */
#popup-window .download-list {
    text-align: left; 
    list-style: none;
    padding: 0;
    margin: 0 auto; /* 親のtext-align: centerを無視し、リスト自体を中央寄せしたい場合 */
    width: fit-content; /* 中央寄せのために幅をコンテンツに合わせる */
}

#popup-window .download-list-item {
    display: flex; 
    align-items: center;
    margin-bottom: 15px; 
    font-size: 1.1rem;
    color: #ff8800; 
}

#popup-window .download-list-item:last-child {
    margin-bottom: 0; 
}

#popup-window .download-number {
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    width: 30px; 
    height: 30px; 
    background-color: #ff8800; 
    color: white; 
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    margin-right: 15px; 
    flex-shrink: 0; 
}

#popup-window .download-item-text {
    overflow-wrap: break-word; 
    word-break: break-word;
    color: #000000; 
}

/* リンクスタイル */
#popup-window .link {
    position: relative;
    color: #ff8800; 
    font-weight: 550; 
    text-decoration: none; 
    transition: color 0.2s; 
}

#popup-window .link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px; 
    width: 0;
    height: 1px;
    background-color: #ff8800;
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

#popup-window .link:hover::after {
    width: 100%; 
}

/* ボタンエリア */
.popup-actions button {
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    font-weight: bold;
}

/* OKボタンのスタイル */
#popup-ok-button {
    background-color: #4CAF50; /* 緑 */
    color: white;
}

/* OKボタン（無効状態）のスタイル */
#popup-ok-button:disabled {
    background-color: #ccc; /* 灰色 */
    cursor: not-allowed;
}

/* キャンセルボタンのスタイル */
#popup-cancel-button {
    background-color: #f44336; /* 赤 */
    color: white;
}



/* ----------------------------------- */
/* 1. ホームボタン全体 (<a>タグ) の設定 */
/* ----------------------------------- */
.fixed-home-button {

    position: fixed; 
    bottom: 60px; 
    right: 60px;  
    
    width: 80px;  
    height: 80px; 
    
    background-color: transparent; 
    box-shadow: none; 
    border-radius: 0; 
    
    display: flex;
    justify-content: center;
    align-items: center;    
    
    z-index: 1000;
    
    transition: transform 0.3s ease;
}

/* ホバー時のアニメーション: <a>タグ全体を拡大する */
.fixed-home-button:hover {
    transform: scale(1.1); 
}


/* ----------------------------------- */
/* 2. 画像 (<imgタグ) の設定 */
/* ----------------------------------- */
.home-icon-image {
    /* 親要素いっぱいに画像を使う */
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}


























/* ----------------------------------- */
/* マウス残像粒子のCSS設定 */
/* ----------------------------------- */
.trail-particle {
    position: fixed;
    width: 6px; 
    height: 6px;
    border-radius: 50%;
    background-color: #ff8800; 
    pointer-events: none; /* マウスクリックを妨げない */
    z-index: 9999;
}


@keyframes fade-out {
    from {
        opacity: 0.8;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5) translateY(-10px);
    }
}

/* メディアクエリ（必要に応じて） */
@media (max-width: 850px) {
    .story-box {
        flex-direction: column; 
        text-align: center;
        /* モバイルではX軸のアニメーションを無効化 */
        transform: none !important; 
        margin-bottom: 60px;
    }
    
    .story-image-container {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 0;
    }

    .story-text-container {
        padding: 20px;
    }

    .large-kanji {
        font-size: 5rem;
    }
    
    /* 左右の指定をリセット */
    .right-side {
        flex-direction: column;
        transform: none !important; 
        text-align: center;
    }

	.left-side {
    flex-direction: column;
    transform: none !important; 
    text-align: center;
    }

    /* 漢字の配置をリセット */
    .story-box.right-side .large-kanji,
    .story-box.left-side .large-kanji {
        margin-left: auto;
        margin-right: auto;
    }

	/* 中央:本文 */
.text4 {
    flex: 1 1 auto; 
    min-width: 300px;
    padding: 2rem;
    font-size: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    color: #ff8800;
    font-family: "源ノ明朝", "Noto Serif JP", serif;
    font-weight: 100;
}






/* --- コンテナ全体 --- */
    .new-story-container {
        flex-direction: column; 
        padding: 0 5vw; 
        padding-bottom: 0; 
        gap: 40px; 
    }
    

    .new-story-text-content {
        flex: 1; 
        width: 100%;
        padding: 0 5vw; 
        opacity: 0;
        transform: translateY(-10%);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        transition-delay: 0.1s; 
    }

    
    .new-story-image-wrapper {
        flex: 0 0 100%; 
        width: 100%;
        max-width: 90%; 
        margin: 0 auto; 
		padding-top: 10rem;

        position: relative;
        margin-top: 80px;
    }

	.new-story-image-wrapper.is-visible {
    transform: translateX(0%);
    opacity: 1;
	}
    
    /* --- 画像本体 --- */
    /* 画像が絶対配置されているため、このスタイルはPC用CSSからの継承で問題なし */
    .new-story-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* テキストを中央から下へスライドイン */
    .new-story-text-content.is-visible {
        opacity: 1;
        transform: translateY(0%); 
    }
    















	.download-section-wrapper {
        padding: 40px 15px 0 15px;
    }

    .download-container {
        padding: 30px 20px;
    }

    .download-title {
        font-size: 2.2rem;
    }

    .download-description-top,
    .download-description-bottom {
        font-size: 0.6rem;
        margin-bottom: 20px;
    }
    .download-description-bottom {
        margin-top: 20px;
    }

    .download-list-item {
        font-size: 1rem;
    }

    .download-number {
        width: 25px;
        height: 25px;
        font-size: 0.9rem;
        margin-right: 10px;
    }




























	/* 横並びの小サイズグループを縦並びに変更 */
    .collaborator-component.collaborator-group {
        flex-direction: column;
        gap: 40px;
    }


    /* 大小すべてのコンポーネントを縦並び (画像上、テキスト下) に変更 */
    .collaborator-component {
        flex-direction: column;
        gap: 20px;
        align-items: center; 
    }


	.collaborator-media {
        width: 100%; 
        max-width: 150px; /* 最大幅を統一 */
        margin-bottom: 15px; /* 画像とテキストの間に余白 */
		margin-right: 0;
    }
	

	.collaborator-component.large .collaborator-content h3 {
    font-weight: bold;
    font-size: 3rem;
	}

	.collaborator-component.large .collaborator-content h4 {
    font-weight: 400;
    font-size: 1.5rem;
	}

    /* --- 画像エリア --- */
    .collaborator-media-wrapper {
        width: 100%; 
        max-width: 250px; 
        margin: 0 auto;
		text-align: center;
    }
    


	.collaborator-content {
    	text-align: center;
	}

    /* 大小のサイズ設定をリセット（max-width: 250px で統一） */
    .collaborator-component.large .collaborator-media-wrapper,
    .collaborator-component.small .collaborator-media-wrapper {
		width: 150px;
    }




    /* --- テキストエリア --- */
    .collaborator-text-wrapper {
        width: 100%; 
    }
    

	.collaborator-text-box.large{
        flex-direction: column; 
        align-items: center; /* 中央寄せ */
        padding: 25px; /* スマホ用パディング */
    }
	
	.collaborator-text-box.small{
		display: flex;
        align-items: center; /* 中央寄せ */
        padding: 25px; /* スマホ用パディング */
		align-items: stretch;
    }

    /* スマホではテキストボックスのサイズを揃える（縦横比固定なし） */
    .collaborator-text-box {
        padding: 25px;
        height: auto; 
		width: 90%;
    }
    .collaborator-text-box h3 {
        font-size: 1.3rem;
    }
    .collaborator-text-box p {
        font-size: 0.9rem;
    }




	/* 小サイズコンポーネントを2分割に上書き */
    .feature-component.feature-content-small {
        /* スマホでは2分割: (100% - 30px) / 2 = 50% - 15px */
        flex: 0 0 calc(50% - 15px); 
    }
    
    /* より狭いスマホ画面では1分割にしても良い */
    @media (max-width: 480px) {
        .feature-component.feature-content-small {
            /* 1分割 */
            flex: 0 0 100%; 
        }
    }



    #popup-window h3 {
        font-size: 2rem;
    }
    #popup-window .download-description-top,
    #popup-window .download-description-bottom {
        font-size: 0.6rem;
    }
    #popup-window .download-list-item {
        font-size: 1rem;
    }

    .copy {
        font-size: 1rem;
    }
}