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

html, body {
    width: 100%;
    /* 外部CSSで設定された左右の余白を強制的にリセット */
    margin: 0 !important; 
    padding: 0 !important;
    /* 横スクロールの発生を抑制し、右側の余白問題を解消 */
    overflow-x: hidden; 
}

body {
    background-color: white;
    font-family: 'Zen Maru Gothic', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* contents の padding をここで定義し、カルーセル外の要素に適用されるようにする */
#contents {
    /* ユーザー指定の padding を適用 */
    padding: 55px 10px 0px;
}

div.pad{
    /* .pad は #contents に置き換えられる可能性があるため、ここでは padding をリセット */
    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;
}

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

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

.title-footer {
    font-size: 1.6em;
    font-family: 'Baloo 2', sans-serif;
    color: #0086d1;
    text-align: center;
}

.footnote {
    font-size: 0.8em;
    color: #595757;
    text-align: end;
    padding-right: 10px;
    margin-top: 20px;
}

/* -------------------------------------- */
/* 1. 初期状態（隠す）の設定 */
/* -------------------------------------- */
.hidden {
    opacity: 0;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    transform: translateY(20px);
}


/* -------------------------------------- */
/* 2. フェードイン後の状態の設定 */
/* -------------------------------------- */
.text-content:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}


/* -------------------------------------- */
/* 3. ファーストビューの調整（任意） */
/* -------------------------------------- */
.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    min-height: 100vh;
    padding-top: 0;
    margin-top: 30%;
}

#scroll-fadein-content {
    margin-top: 40px;
}


/* style.css の hidden クラス */
.text-content {
    transition: opacity 2.5s ease-out, transform 2.5s ease-out !important; 
}

/* 初期状態：hiddenクラスが付いているとき */
.hidden {
    opacity: 0 !important;
    /* translateY(30px) から (0px) に変更 */
    transform: translateY(0px) !important; 
}

/* 最終状態：hiddenクラスが外れたとき (自動的に transition が適用される) */
.text-content:not(.hidden) {
    opacity: 1 !important;
    /* transform を完全に無効化 */
    transform: translateY(0) !important;
}


/* -------------------------------------- */
/* 5. バナー固定の設定 (#fade-step-5用) */
/* -------------------------------------- */
.fixed-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: white; 
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    
    margin-left: 0 !important;
    transform: none !important; 
    transition: all 0.5s ease-in-out, margin 0s, opacity 0s;
}

/* fixed-banner 内のバナーコンテンツの調整 */
.fixed-banner p.banner {
    margin: 0;
    text-align: center;
}

/* -------------------------------------- */
/* 6. バナー（非固定時）の横幅*/
/* -------------------------------------- */
#fade-step-5 {
    /*width: calc(100% + 20px);*/
    box-sizing: border-box;
}


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

/* セクション全体: 画面内でアニメーションが起こる範囲を確保 */
/* 全ての飛行機セクションに共通スタイルを適用 */
#scroll-plane-section, #scroll-plane-section-2, #scroll-plane-section-3, #scroll-plane-section-4, #scroll-plane-section-5 {
    position: relative;
    /* スクロール連動アニメーションの範囲を確保するため、適度な高さを設定 */
    height: 170px; 
    overflow: hidden; 
    /* アニメーション開始前は非表示にするためのクラス */
    opacity: 1; 
    transition: opacity 0.5s;
    margin: 0px 0 0;
    
    /* 親の padding: 10px を打ち消し、画面幅いっぱいにする */
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
}

.hidden-plane {
    opacity: 0 !important;
    height: 0 !important; /* 非表示時は高さを0にしてレイアウトに影響させない */
    margin: 0 !important;
}

/* 飛行機画像とその移動コンテナ */
.plane-content {
    position: sticky;
    top: 50vh; /* 画面中央を基準点とする */
    /* JSで transform: translateY(-50%) を初期設定 */
    
    /* 飛行機画像が画面外に出ても見え続けるように幅を設定 */
    width: 500px; 
    height: 150px; 
    left: 0; 
    
    /* スムーズなアニメーションのために transition を設定 */
    transition: transform 0s linear; 
}

.plane-image {
    width: 100%;
    height: auto;
    display: block;
}

/* 2つ目の飛行機画像のサイズ (right_plane.png用) */
.plane-image-2 {
    width: 500px; /* left_plane.pngと同じサイズとする */
    height: auto;
    display: block;
}


div.font_style{
    text-align: center;
    color: #f19dae;
    font-size: 1.5em;
    font-weight: 600;
}

/* --- カルーセル関連のスタイル --- */
.carousel-container {
    /* #contents の padding 10pxを打ち消すために、左右に -10px のマージンを設定 */
    width: calc(100% + 20px); 
    margin: 0px -10px 0; /* 左右の padding 10pxを打ち消す */
    position: relative;
    user-select: none; 
    padding-bottom: 30px; 
    top: -70px;
}

/* 画像全体を囲むラッパー：左右の画像を見せるために必要 */
.carousel-wrapper {
    overflow: hidden; 
    max-width: none; 
    margin: 0; 
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out; 
    margin-bottom: 20px; 
    
    /* CSSでの手動オフセットを削除し、JSで正確に制御するため、-10px にリセット */
    /* -10px は画像間のマージンを相殺するのに役立つ */
    margin-left: -10px; 
    padding: 0; 
    
    /* スワイプ/ドラッグ操作を可能にするため、カーソルの見た目を変更 */
    cursor: grab; 
}

.carousel-slide img {
    /* 画像サイズを小さくする (320px -> 280px)  */
    min-width: 280px; 
    width: 280px;
    height: 210px; 
    flex-shrink: 0; 
    display: block;
    object-fit: cover; 
    max-width: none; 
    max-height: none; 
    
    /* 画像間の隙間 */
    margin: 0 10px; 
    
    border-radius: 10px; 
    box-sizing: border-box;
}


/* ナビゲーションボタン */
.prev-btn, .next-btn {
    position: absolute;
    top: 0; 
    height: calc(100% - 30px); 
    width: 15%; 
    background: transparent; 
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 0; 
}

/* ホバー/タップ時に矢印アイコンを表示 */
.prev-btn::before, .next-btn::before {
    content: '〈'; 
    display: block;
    position: absolute;
    top: 50%;
    left: 10px; 
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.5); 
    font-size: 2em;
    font-weight: bold;
    pointer-events: none; 
    opacity: 0.8; 
    transition: opacity 0.3s;
}

.next-btn {
    right: 0;
}

.next-btn::before {
    content: '〉'; 
    left: auto;
    right: 10px;
}

.carousel-container:hover .prev-btn::before, 
.carousel-container:hover .next-btn::before {
    opacity: 0.8; 
}

/* インジケータドット */
.carousel-dots {
    /* ドットを画像の手前に表示させるために、absoluteとz-indexを設定 */
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center; 
    display: flex;
    justify-content: center; 
    gap: 8px;
    z-index: 0; 
    margin-top: 0; 
    padding-bottom: 10px; 
    width: 100%;
}

.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; 
}

img.logo-image{
    padding: 60px 60px 30px 60px;
}
div.mar{
    position: relative;
    top: -80px;
}
section#scroll-plane-section-2.plane-wrapper.air-posi{
    margin-top: -40px;
}
p.font_style2{
    text-align: center;
    color: #0eae71;
    font-size: 1em;
    font-weight: 600;
}
p.font_style3{
    text-align: center;
    color: #595757;
    font-size: 0.6em;
    font-weight: 100;
}
p.font_style4{
    text-align: center;
    color: #595757;
    font-size: 0.9em;
}
p.font_style5{
    text-align: center;
    color: #0086d1;
    font-size: 1em;
    font-weight: 600;
}
p.font_style6{
    text-align: center;
    color: #0086d1;
    font-size: 0.8em;
    display: inline-block; /* 下線（border-bottom）の幅をテキスト幅に合わせる */
    padding: 0 10px 0px; /* 左右のパディングで下線の長さをテキストより長くする */
    border-bottom: 2px solid #0086d1; /* 下線（アンダーライン）を設定 */
    margin: 0 auto;
    font-weight: 600;
}
p.font_style7{
    text-align: center;
    color: #f39800;
    font-size: 1em;
    font-weight: 600;
}
p.font_style8{
    text-align: center;
    color: #595757;
    font-size: 0.7em;
}
img.padd{
    padding: 10px;
}
img.imgsiz{
    width: 100px;
    margin-top: 20px;
    display: block; /* 画像をブロック要素に変更 */
    margin-left: auto; /* 左マージンを自動調整 */
    margin-right: auto;
}

.bnr{
    text-align: right;
}
div.readTxt {
    color: #606060;
    font-size: 1.5rem;
    text-align: center;
    margin-top: 20px;
}
.bnr a{
    display: block;
}
.more{
    width: 118px;
    display: block;
    margin: 0 0 0 auto;
}
.cm5{
    margin-bottom: 10px !important;
    border: 2px solid #e8e8e8;
}

/* 1. ul.sty1: Flexコンテナの設定 */
ul.sty1 {
    display: flex;             /* 子要素を横並びにする */
    justify-content: center;   /* 全体を中央寄せする */
    gap: 20px;                /* 各要素間に間隔を設定 */
    list-style: none;          /* リストの黒丸を非表示 */
    padding: 0;
    margin: 20px auto 0;
}

/* 2. li.sty2: 均等幅の設定と内部中央寄せ */
li.sty2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* 利用可能なスペースを均等に占有させる（幅を揃える） */
    flex-grow: 1; 
    /* 広がりすぎないように最大幅を設定 */
    max-width: 180px; 
    width: 160px;
}

/* 3. li.sty2 img: 画像コンテナの幅と高さ固定（テキスト位置を揃えるため） */
li.sty2 img {
    /* 画像が収まるコンテナのサイズを固定 */
    width: 100px; 
    height: 70px; 
    /* 画像の縦横比を維持しつつ、コンテナ内に収める */
    object-fit: contain; 
    display: block;
}

/* 4. li.sty2 p: テキストのサイズ調整 */
li.sty2 p {
    font-size: 0.43em;
    color: #333;
    margin: 0;
    font-weight: 100;
}

img.hei{
    height: 60px;
}

/* -------------------------------------- */
/* 8. フッターフォントの上書き設定　*/
/* -------------------------------------- */
/* フッターコンテンツを最も確実に上書きするため、フッター内に含まれる可能性のある 
   主要なテキスト要素全てに !important でフォントを強制適用します。 
   
   footer_base.js で挿入されるフッターの内容が、
   - <footer> タグとして挿入される可能性
   - フッターでよく使われるテキスト要素（p, a, li, spanなど）が含まれる可能性
   を考慮し、最も多くの要素をカバーし、既存のCSSよりも優先されるようにセレクタを強化しました。
*/
footer, 
footer *,
footer p, footer a, footer li, footer span,
#footer, 
.footer-wrapper,
#sm-footer, 
#sm-footer *,
/* body 直下に挿入されたフッターコンテンツ内のテキスト要素に直接適用 */
body > p, body > a, body > div > p, body > div > a,
body > footer p, body > footer a, body > footer li, body > footer span {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN W3", Meiryo, sans-serif !important;
}

div.posi{
    position: relative;
    top: -70px;
}

section.plane_posi{
    top: -40px;
}

img.logo_ch1{
    width: 90px !important; 
}
img.logo_ch2{
    width: 110px !important;
}