/* style.css の内容 (モバイル優先の基本スタイル + PC対応) */

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

body {
    background-color: white;
    /*　bodyのfont-familyを base.css の設定に合わせる */
    font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif;
    color: #333;
    line-height: 1.6;
    /* カルーセルが画面幅を超えて右側に余白（水平スクロール）を出さないようにする */
    overflow-x: hidden;
    /* bodyの上下のパディングをなくす */
    padding-top: 0; 
    padding-bottom: 0;
}

/* コンテンツ部分のみZen Maru Gothicを適用 */
#container {
    font-family: 'Zen Maru Gothic', sans-serif;
}

/* ユーザー指定の #contents スタイル */
#contents {
    /* 上部のパディング 55px を 0 に変更し、余白を無くす */
    padding: 0 10px 20px; 
}

/* PC版の中央寄せラッパーのスタイルをモバイルでは無効化 */
/* IDからクラスセレクタに変更 */
.contents-wrapper-pc {
    width: 100%;
    margin: 0;
}

/* 他の基本スタイル */
div.pad{
    padding: 0; 
}

div.color{
    background-color: white;
}

img.siz{
    width: max-content;
    height: max-content;
}

h2.font{
    font-size: 1.5em;
    color: #EEB9C8;
    margin-bottom: 30px;
    padding-bottom: 10px;
    text-align: center;
    font-weight: 400;
}

.main-copy1, .main-copy2, .footnote {
    margin-bottom: 20px;
    line-height: 1.8;
    text-align: center; 
    padding: 0; /* paddingを解除 */
}

.main-copy1 {
    font-size: 1.4em;
    color: #0086d1;
    padding: 0 30px;
    font-weight: 600;
}
.main-copy2 {
    font-size: 1.4em;
    color: #0086d1; 
    margin-bottom: 0;
    font-weight: 600;
}

.sub-copy {
    font-size: 0.9em;
    color: #6c757d;
}

.title-footer {
    font-size: 1.8em;
    font-family: 'Baloo 2', sans-serif;
    color: #0086d1;
    font-weight: 600;
}

.footnote {
    font-size: 1em;
    color: #595757;
    text-align: right; 
    padding-right: 0;
}

/* 1. 初期状態（隠す）の設定 */
.hidden {
    opacity: 0;
    /* 1.5秒の透明度トランジションのみ */
    transition: opacity 1.5s ease-out; 
}

/* 2. フェードイン後の状態の設定 */
.text-content:not(.hidden),
/* バナーにも適用 */
#sticky-banner:not(.hidden) { 
    opacity: 1;
}

/* --- テキスト全体を非表示にする初期スタイル (位置移動なし) --- */
.static-content {
    opacity: 0;
    transition: opacity 2.0s ease-out; /* 2秒かけてゆっくり表示 (opacityのみ) */
}

/* JavaScriptで付与され、表示をトリガーするクラス (位置移動なし) */
.static-content.active-fade {
    opacity: 1;
}


.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    min-height: auto; 
    padding-top: 0;
    margin-top: 0; 
}

/* PC版でロゴとテキストを横並びにするラッパー */
.kobe-20th-content-pc {
    display: flex;
    align-items: center; /* 垂直中央揃え */
    justify-content: center;
    width: 100%;
    max-width: 960px; /* .contents-wrapper-pc の幅に合わせる */
    margin: 120px auto 0;
    /* 上下のパディングを削除 */
    padding: 0; 
    gap: 60px;
}

/* ロゴ専用コンテナ */
.logo-area {
    width: 50%; /* 左側50% */
    /* ロゴエリアの上部パディングを削除 */
    padding-top: 0; 
    text-align: center;
}

/* テキスト専用コンテナ */
.text-fade-area {
    width: 50%; /* 右側50% */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    padding-left: 0; /* パディングを解除 */
}

@media (max-width: 960px) {
    .content-wrapper {
        flex-direction: column;
        height: auto; 
        margin-top: 30px; 
    }
    .logo-area, .text-fade-area {
        width: 100%;
        padding: 0;
        align-items: center;
    }
}


/* バナー要素のスタイル（高さを確保してスクロールを発生させる） */
p.banner {
    text-align: center;
    /* スクロールでバナーを表示するための「余白」を確保 (550px) */
    height: 550px; 
    margin: 0 auto; 
    padding-top: 0; 
    padding-bottom: 0;
    width: 100%;
}
p.banner img.siz {
    /*max-width: 100%;*/
    /*height: auto;*/
    height: 9rem;
}

/* 5. バナー固定の設定 (#sticky-banner用) */
#sticky-banner {
    /* スクロールによって表示される固定バナーの共通スタイル */
    position: fixed; /* 常に画面に固定 */
    bottom: 0;       /* 画面下端に配置 */
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #0599d9; 
    height: auto;
    margin-left: 0 !important;

    /* スライドの動きを削除し、opacityのみで制御 */
    transform: translateY(0); /* 初期位置は動かさない */
    opacity: 0;
    /* フェードイン/アウトのアニメーション設定 (1.5秒かけて透明度を変化) */
    transition: opacity 1.5s ease-out;
}

/* .hiddenが外れてフェードインが始まる状態（スクロール時）*/
#sticky-banner:not(.hidden) {
    /* 画面下端に固定 */
    transform: translateY(0);
    opacity: 1;
}

#sticky-banner.fixed-banner {
    transition: opacity 1.5s ease-out; /* hiddenと同じトランジションを維持 */
    background-color: #0599d9;
}


/* footer-spacerを削除し、フッター自体に余白を追加してバナー隠れを解消 */
/* .footer-spacer の定義を削除しました */

#footer {
    /* 固定バナーの高さ（約9rem）＋フッター自体の下にある可能性のあるコンテンツ分の余白を確保 */
    /* padding-bottomを30remに設定して、フッター最下部が隠れないようにする */
    padding-bottom: 30rem; 
    background-color: #1a1a1a; /* フッターの背景色（仮）*/
    color: white;
}


/* 7. スクロール連動飛行機アニメーションの定義 */

/* 共通基本スタイル */
/* 全てのセクションに適用される、高さとマージン */
#scroll-plane-section-1, #scroll-plane-section-2, #scroll-plane-section-3, #scroll-plane-section-4, #scroll-plane-section-5 {
    position: relative;
    height: 120px;
    overflow: hidden; 
    opacity: 1; 
    transition: opacity 0.5s;
    margin-top: 60px;
}

/* JavaScript実行前のFOUCを防ぐためのクラス */
/* opacity: 0 で非表示にし、visibility: visible でJSによる制御を可能にする */
.plane-initial-hide {
    opacity: 0;
    visibility: visible; /* opacityのみで非表示にするため、visibleにしておく */
}

/* 他の飛行機セクション (2, 3, 4, 5) の親要素 */
/* 1, 2, 3, 4, 5 の全てに適用されるようにする */
.plane-wrapper {
    /* position: relative; が共通スタイルで適用されているため、ここでは特別な調整は不要 */
    pointer-events: none; 
    z-index: 10; 
    overflow: visible; 
}


.hidden-plane {
    /* スクロールトリガー前は非表示 */
    opacity: 0 !important;
    visibility: hidden; 
    height: auto !important; 
    margin: 0 !important;
}

/* 他の飛行機セクション (2, 3, 4, 5) の飛行機コンテナ */
/* 1, 2, 3, 4, 5 の全てに適用されるようにする */
.plane-content {
    position: sticky; /* スクロールに合わせて一時的に固定する */
    top: 50vh; 
    width: 1200px; /* コンテナの幅を900pxに (← 1200pxを維持) */
    height: 250px; /* コンテナの高さを250pxに */
    left: 0; 
    transition: transform 0s linear; 
}

.plane-image, .plane-image-2 {
    width: 1200px; /* 画像の幅を900pxに (← 1200pxを維持) */
    height: auto; /* 画像の高さをautoに戻し、拡大を防ぐ */
    display: block;
}

/* --- カルーセル関連の基本スタイル --- */
.carousel-container {
    position: relative;
    user-select: none; 
    padding-bottom: 0; 
    margin: 20px auto; 
    max-width: none;
}
.carousel-wrapper {
    overflow: hidden; 
    max-width: none; 
    margin: 0; 
    padding: 0; 
}
.carousel-slide {
    display: flex; 
    transition: transform 0.5s ease-in-out; 
    margin-bottom: 20px; 
    padding: 0; 
}
.carousel-slide img {
    /* 高さ350px、幅467px（4:3のアスペクト比）に固定 */
    width: 467px; 
    height: 350px; 
    min-width: 467px; 
    max-width: 467px; 
    max-height: 350px; 
    
    flex-shrink: 0; 
    display: block;
    object-fit: cover; 
    border-radius: 10px; 
    box-sizing: border-box;
    margin: 0 15px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
}

.carousel-dots {
    position: static; 
    text-align: center; 
    display: flex;
    justify-content: center; 
    gap: 8px;
    z-index: 10; 
    padding-bottom: 10px; 
    width: 100%;
    margin-top: 10px; 
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #D3D3D3; 
    border: none; 
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #EEB9C8; 
}
/* --- ナビゲーションボタンのスタイル --- */
.prev-btn, .next-btn {
    position: absolute;
    top: 50%; 
    transform: translateY(-50%);
    height: 100%; 
    width: 20%; 
    background: transparent; 
    border: none;
    cursor: pointer;
    z-index: 11; 
    opacity: 0; 
}

/* 矢印アイコンのスタイル (常に非表示) */
.prev-btn::before, .next-btn::before {
    content: '〈'; 
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.5); 
    font-size: 2em;
    font-weight: bold;
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 0.3s;
}
.next-btn {
    right: 0;
}
.next-btn::before {
    content: '〉'; 
    left: auto;
    right: 0; 
}


/* --- PC対応: 画面幅961px以上 --- */
@media (min-width: 961px) { 
    
    /* 1. メインコンテンツ幅の制限と中央寄せ (960px) */
    /* IDからクラスセレクタに変更 */
    .contents-wrapper-pc {
        width: 960px; 
        margin: 0px auto 0; 
        padding: 0;
    }
    
    /* 2. スクロール連動飛行機セクションをブラウザ幅全体に広げる */
    #scroll-plane-section-1, 
    #scroll-plane-section-2, 
    #scroll-plane-section-3, 
    #scroll-plane-section-4, 
    #scroll-plane-section-5 { /* <-- IDを統合 */
        width: 100vw; 
        /* 親要素 #contents (幅960px) の左右の余白を負のマージンで相殺 */
        margin-left: calc(-1 * (100vw - 960px) / 2);
        margin-right: calc(-1 * (100vw - 960px) / 2);
    }
    
    /* 3. 固定バナーをブラウザ幅いっぱいに広げる */
    #sticky-banner {
        width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        transform: none !important;
        text-align: center;
    }
    
    /* 4. カルーセルPC表示の調整 */
    .carousel-slide img {
        /* モバイルと同じ固定サイズを適用 */
        min-width: 467px;
        width: 467px;
        height: 350px;
        max-width: 467px;
        max-height: 350px;
        margin: 0 15px; 
    }
    
    .plane-content {
        left: 0;
        width: 1200px; /* PCでもコンテナ幅を1200pxで維持 */
    }

    /* PC画面ではバナー画像が小さい（高さが固定）ので、フッターの余白を調整 */
    #footer {
        /* PC版のバナー画像は9remの固定高なので、少し余裕を見て15remに増やす */
        padding-bottom: 15rem; 
    }
}

/* --- その他 (以前のスタイルシートに含まれていた可能性のあるスタイル) --- */
div.font_style{
    text-align: center;
    color: #f19dae;
    font-size: 2em;
    font-weight: 600;
}
.title-footer{
    font-size: 2.6em;
    font-family: 'Baloo 2', sans-serif;
    color: #4198D7;
    text-align: center;
    font-weight: 600;
}

/* ★★★ 中央寄せのためのCSS ★★★ */
/* p.font_style5 と ul.sty1 を含むブロック要素全体を中央寄せ */
/* IDからクラスセレクタに変更 */
.contents-wrapper-pc > div.pad > div {
    text-align: center;
}

ul.sty1{
    display: flex;
    gap: 50px;
    padding-top: 20px;
    /* 親要素に text-align: center; を適用しているため、
       flexコンテナである ul.sty1 には width: fit-content; を適用することで中央寄せされます。*/
    width: fit-content; 
    margin: 0 auto;
}
li.sty2{
    width: 10em;
}

/* --- 地図画像の中央寄せとサイズ調整 --- */
.map-section {
    /* 子要素（地図画像とテキスト）を中央に配置 */
    text-align: center; 
    margin: 30px auto; /* 上下のマージンと中央寄せ */
    padding: 20px 0;
}

/* 💡 地図画像のサイズ調整と中央寄せ */
.map-image-resized {
    /* 画像をブロック要素にして中央寄せを有効化 */
    display: block; 
    /* 左右のマージンを auto にして中央寄せ */
    margin: 0 auto 20px; 
    
    /* モバイル・PC共通の最大幅 */
    max-width: 80%; /* 画面幅に対して最大80%に */
    height: auto;
}

/* PC版の調整: 必要に応じて最大幅を再設定 */
@media (min-width: 961px) {
    .map-image-resized {
        max-width: 450px; 
    }
}

div.readTxt {
    color: #606060;
    font-size: 1.6em;
    line-height: 1.8em;
    text-align: center;
    margin-top: 20px;
}
ul.bnr-list{
    width: 630px;
    margin: 0 auto;
}
ul.bnr-list li{
    width: 100%;
    margin: 0 0 50px;
}
img.hei {
    height: auto;
}
span.more {
    width: 118px;
    display: block;
    margin: 0 0 0 auto;
}

p.font_style2{
    text-align: center;
    color: #0eae71;
    font-size: 2em;
    font-weight: 600;
}
p.font_style3{
    text-align: center;
    color: #595757;
    font-size: 1.2em;
}
p.font_style4{
    text-align: center;
    color: #0086d1;
    font-size: 2em;
    font-weight: 600;
}

/* p.font_style5 の定義*/
p.font_style5{
    color: #0086d1;
    font-size: 1.8em;
    /* 既存の border-bottom を削除/無効化 */
    border-bottom: none; 
    /* 疑似要素の基準と、中央寄せを可能にする設定 */
    position: relative; 
    display: inline-block; 
    font-weight: 600;
}

/* p.font_style5 の下線 (::after) の定義 */
p.font_style5::after {
    content: '';
    display: block;
    width: 120%; /* テキストより少し長い下線 */
    height: 2px; 
    background-color: #0086d1; 
    
    /* 下線を中央に配置 */
    position: absolute;
    left: 50%; 
    transform: translateX(-50%); 
}


p.font_style6{
    text-align: center;
    color: #f39800;
    font-size: 2em;
    font-weight: 600;
}
p.font_style7{
    text-align: left;
    color: #595757;
    font-size: 1.5em;
}
p.font_style8{
    text-align: center;
    color: #595757;
    font-size: 1em;
}
div.posit{
    text-align: center;
    padding: 0 200px;
}
img.bord{
    border: 2px solid #e8e8e8;
}

.footerBottom {
    background-color: #1a1a1a;
    color: white;
    padding: 20px 0; /* 適度な上下のパディング */
    margin-bottom: 90px;
}

/* footerBottom の子要素のスタイルを調整 */
#footer .title-footer {
    color: #EEB9C8; /* フッター内のタイトルをピンクに変更（ヘッダーと区別） */
    font-size: 1.2em;
}

#footer .footnote {
    color: #aaa;
    text-align: center; /* フッター内の注釈を中央寄せ */
}

.readTxt,
.font_style1,
.font_style2,
.font_style3,
.font_style4,
.font_style5,
.font_style6,
.font_style7,
.font_style8 {
    font-family: 'Zen Maru Gothic', sans-serif;
}

img.im_siz{
    height: 150px;
}

img.im_siz2{
    width: 500px;
}

img.logo_posi{
    position: relative;
    top: -10px;
}
p.logo_posi2{
    position: relative;
    top: -25px;
}

img.logo_ch1{
    width: 9em !important; 
}
img.logo_ch2{
    width: 11em !important;
}

p.mar_ch{
    margin-top: 15px !important;
}