/* --- Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
	scroll-behavior: smooth;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-style: normal;
	}
	
body {
    background-color: #ffffff;
}

.outer-wrapper { 
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", sans-serif;
    line-height: 1.7; 
    color: #333; 
    /*overflow-x: hidden; /* 横揺れ防止 */
	zoom: 1.65;
    width: 894px;
    margin: 0 auto;
    background-color: #fff;
}
.container {
    padding-top: 0px;
    padding-right: 45px;
    padding-left: 45px;
    padding-bottom: 0px;
}
.py-xl {
    padding-top: 0px;
    padding-bottom: 100px;
}
.footnote {
	font-size: 8px;
	text-align: center;
	padding-top: 10px;
}.footnote2 {
	font-size: 8px;
	text-align: center;
	padding-top: 10px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Images --- */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    width: 100%;
}

/* --- Colors --- */
.bg-orange { background-color: #d97a1d; color: #fff; }
.bg-white { background-color: #fff; color: #333; }
.border-top-white { border-top: 1px solid rgba(255,255,255,0.3); }

/* --- Hero Section --- */
.hero {
    width: 894px;
    height: 694px;
    background: url(../images/hero.jpg) no-repeat center top / cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    padding-bottom: 0;
}

.hero-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-main-row {
    display: flex;
    flex-direction: row; 
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 15px;
}

/* PC版の並び: 左にthumb、右にabout */
.hero-thumb-box { order: 1; }
.hero-about-box { order: 2; }

.img-thumb { width: 264px; height: 149px; display: block; }
.img-about {
    width: 313px;
    height: 149px;
    display: block;
    top: -14px;
}

.hero-scroll-graphic { margin-bottom: 15px; }
.img-scroll { width: 86px; height: 18px; display: block; }

/* 横並びボタンエリア: PC版 左右92px空き */
.hero-nav-btns {
    width: 79.4%;
    /*background: rgba(0, 0, 0, 0.85);*/
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.nav-btn-container {
    width: 710px; /* 355px * 2 */
    margin: 0 92px; 
    display: flex;
    justify-content: space-between;
}

.nav-btn-link { display: block; width: 355px; }
.btn-img { width: 355px; height: 24px; display: block; }

/* --- Responsive (Smartphone) --- */
@media screen and (max-width: 894px) {
    .outer-wrapper {
		zoom: 1.1;
		width: 100%; 
	}
    
    .hero { 
        width: 100%; 
        height: auto; 
        min-height: 100vh;
        /* 背景画像を hero_sp.jpg に切り替え */
        background: url(../images/hero_sp.jpg) no-repeat center top / cover !important;
        background-attachment: scroll;
        background-color: #0f224d;
        padding-top: -20; /* 上部の余白をリセット */
    }
	
    .hero-content {
        width: 100%;
        align-items: center;
        /* ここの数値を小さくすることで class="hero-main-row" を上に */
        padding-top: 400px; 
        margin-bottom: 0;
    }

    /* 画像を縦に並べ、about(オレンジ)を上にする */
    .hero-main-row {
        flex-direction: column;
        align-items: center; /* 縦並びの中央寄せ */
        gap: 20px;
        width: 100%;
        margin-bottom: 30px;
    }
	
	.hero-thumb-box { 
        order: 2; 
        width: 100%;
        display: flex;
        justify-content: center;
	}
	
	/* 画像自体のサイズ: 固定幅を解除して画面に合わせる */
    .img-about, .img-thumb {
        width: 85%;      /* 画面幅の85%にする（中央に余白ができる） */
        max-width: 320px; /* PCサイズ(313px)を超えないように制限 */
        height: auto;    /* アスペクト比を維持 */
        margin: 0 auto;  /* 念のための中央寄せ */
    }
	
    .hero-about-box { order: 1; } 
    .hero-thumb-box { order: 2; }

    .img-about, .img-thumb {
        width: 100%; 
        max-width: 320px; /* 大きくなりすぎないよう制限 */
        height: auto;
    }
	
    /* ボタンエリア: 縦に並べてマージンをリセット */
    .nav-btn-container {
        width: 100%;
        margin: 0;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 15px 0;
    }
    .nav-btn-link { 
        width: 90%; 
        display: flex;
        justify-content: center;
    }
    .btn-img { 
        width: 100%; 
        max-width: 355px;
        height: auto; 
	}
	
}

/* --- Intro Section Layout --- */
.intro-section {
    padding-top: 43px;
    padding-bottom: 1px;
} /* セクション全体の余白調整 */

.w612-center {
    width: 612px;
    margin: 0 auto;
}

/* Intro 1 */
.intro1-inner {
    margin-bottom: 65px;
} /* 次のブロックとの間隔 */
.intro-main-title { margin: 0 0 40px; text-align: center; line-height: 1; }
.intro-main-title img {
    width: 500px;
    max-width: 100%; /* これでスマホの画面幅を超えなくなります */
    height: auto;    /* アスペクト比を維持 */
}

.intro-flex-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.img-arukikata { width: 262px; height: 146px; }
.intro1-text-box { width: 306px; }
.intro-description { font-size: 14px; line-height: 1.6; margin-bottom: 15px; }
.btn-arukikata-img {
    width: 100% !important; /* 親要素（intro1-text-box）の幅いっぱいに広げる */
    max-width: 306px;       /* PC時のテキスト幅に合わせて制限 */
    height: auto !important;
    display: block;
}

sup {
    font-size: 0.6em;      /* 元の文字の60%程度の大きさに縮小 */
    vertical-align: 0.4em; /* 位置が下がりすぎないよう少し上に調整 */
    line-height: 0;        /* 行間への影響を防ぐ */
}

/* EXPERIENCE Blocks (w711基準) */
.exp-block {
    width: 711px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 65px;
} /* ブロック間の余白を拡大 */
.exp-header-bar { 
    background: #001a3d; color: #fff; 
    width: 711px; height: 21px; line-height: 21px; 
    padding-left: 15px; font-size: 13px; font-weight: bold; margin-bottom: 40px;
}

/* 見出しブロック (dream_title等) の配置 */
.exp-heading-group {
    display: flex;
    width: 612px;           /* w612ガイドラインに固定 */
    margin: 0 auto 30px;    /* 中央配置しつつ下マージン */
    justify-content: space-between; /* これで画像が左端、テキストが右端に張り付きます */
    align-items: center;
}
.exp-heading-group h2 {
    margin: 0;
}
.exp-title-img {
    width: 185px;
    height: 51px;    /* 設計図通りのh33を厳守 */
    object-fit: contain; /* 画像を歪ませずに枠内に収める */
    display: block;
}
.exp-text-top {
    width: 400px;           /* 設計図通りの幅 */
    font-size: 13px;
    line-height: 1.6;
    text-align: justify;    /* 右端を綺麗に揃える */
    top: -7px;
}

/* 01: 画像2枚をw612の両端に合わせる */
.exp-img-row.w612-center {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* 02: 画像(左端)とテキスト(中央から右端) */
.exp-content-inner.w612-center {
    display: flex;
    width: 612px;
    margin: 0 auto;
    justify-content: space-between; /* 画像(左)とテキスト(右)を両端へ */
    align-items: center;
}
.offer-box {
    width: 306px;           
    font-size: 13px;
    line-height: 1.6;
    text-align: justify;
}

/* 共通パーツ */
.comp-img { width: 264px; height: 195px; object-fit: cover; }
.shadow-3316 { filter: drop-shadow(3px 3px 1.6px rgba(0,0,0,0.4)); }
.shadow-4428 { filter: drop-shadow(4px 4px 2.8px rgba(0,0,0,0.3)); }
.exp-text-bottom { width: 560px; margin: 0 auto; font-size: 12px; line-height: 1.6; }

/* タグライン (背景色あり) */
.travel-title-wrap { display: flex; flex-direction: column; width: 179px; }
.tagline-badge { 
    background-color: #001a3d; /* 紺色の背景 */
    color: #fff;
    font-size: 10.5px; 
    padding: 2px 9px; 
    width: fit-content; 
    margin-bottom: 5px; 
}
/* --- Intro 2 Section (PC最終全体) --- */
.pb-65 {
    padding-bottom: 65px;
}

.intro2-card {
    width: 612px;
    margin: 0 auto 30px;
    padding: 30px;
    background-color: #001a3d !important;
    color: #fff;
    border-radius: 0;
}

/* テキストエリアの数値指定 */
#text-area-6 { margin-bottom: 22px; } /* 6と7の間 */
#text-area-7 {
    width: 520px; /* PC指定幅 */
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 22px; /* 7と下の間の余白 */
    text-align: justify;
}

/* 01下段の横並びと下端合わせ */
.c01-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 下端揃え */
    padding-left: 40px; /* ナンバー分インデント */
}

/* 02, 03の余白 */
#text-area-9, #text-area-11 { margin-bottom: 25px; } /* タイトルと説明文の間 */

/* 共通パーツ */
/* 全カード：ナンバーとタイトルの横並びを維持し、改行を禁止する */
    .num-text-flex {
        display: flex !important;
        flex-direction: row !important; /* 横並びを強制 */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;         /* 80px固定を解除 */
        order: 1;
        margin-bottom: 0px;
        flex-wrap: nowrap !important;   /* 絶対に改行させない */
    }

    .service-num {
        width: 36px !important;         /* 番号の幅を確保 */
        flex-shrink: 0 !important;      /* 番号が潰れないように固定 */
        font-size: 18px;
        font-weight: bold;
    }

    .center-title {
        text-align: center !important;
        flex: 1;                        /* 残りの幅をタイトルが使う */
	margin: 4px 0 0 0 !important;   /* 番号との高さ調整 */
	padding: 0 0 40px 0;
        white-space: normal;            /* タイトルが長い場合はここで改行を許可 */
    }
.service-desc {
    font-size: 13px;
    line-height: 1.8;
}
.service-desc-top {
    font-size: 11px;
    margin-bottom: 47px;
}

/* 画像・ボタン固定サイズ */
.img-book-fixed { height: 162px !important; width: auto !important; display: block; }
.img-btn-dl-fixed { width: 150px !important; height: 30px !important; display: block; }

/* --- Intro 2 Smartphone Layout (スマホ最終全体) --- */
@media screen and (max-width: 894px) {
    /* 1. セクション全体の底余白（オレンジ背景の終わり）を強制的に消す */
    #intro-orange-continuation {
        padding-bottom: 30px !important; 
        height: auto !important;
        margin-bottom: 0px !important; /* セクション自体の外余白もゼロに */
	}

    /* 2. カード自体の下のマージンを最小限にする */
    #intro-orange-continuation .intro2-card {
        width: 100% !important;
        padding: 25px 20px;
        display: flex !important;
        flex-direction: column !important;
        /* カード同士の隙間を25pxにしつつ、最後だけ消すための準備 */
        margin-bottom: 25px !important; 
    }

    /* カード03（最後）の下マージンだけを0にして、futureセクションに密着させる */
    #intro-orange-continuation .intro2-card:last-of-type {
        margin-bottom: 0px !important;
    }

    /* 3. 汎用クラス .container の padding-bottom が邪魔をしている場合の上書き */
    #intro-orange-continuation .container {
        padding-bottom: 30px !important;
    }

    /* 01の中身を解体して順序制御 */
    .c01-top-group, .c01-bottom-flex { display: contents; }

    /* 全カード：ナンバーとタイトルの左端揃え */
    .num-text-flex {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start !important;
    width: 80%;
    order: 1;
    margin-bottom: 15px;
    }
    .service-num {
    width: auto !important;
    left: 100px;
}
    .center-title { text-align: left !important; flex: 1; margin: 0 !important; }

    /* 全カード：説明文の左端揃え */
    .service-desc {
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        order: 2;
        margin-bottom: 0px;
    }

    /* 01：本画像（ボタンセットの上） */
    .c01-right-box { 
        order: 3; 
        display: flex; 
        justify-content: center; 
        margin-bottom: 0px;
    }
    .img-book-fixed { height: 140px !important; margin: 0 auto; }

    /* 01：エリア8＋ボタン */
    .sp-action-group { 
        order: 4; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        padding-left: 0;
    }
    #text-area-8 {
    text-align: center;
    margin-bottom: 10px;
    bottom: 40px;
}

    /* 02, 03の順序調整 */
    .card-step-02 .num-text-flex, .card-step-03 .num-text-flex { order: 5; margin-top: 10px; }
    #text-area-10, #text-area-12 { order: 6; }
}

/* --- Responsive (Smartphone) --- */
@media screen and (max-width: 894px) {
    .outer-wrapper {
		zoom:1.1;
		width: 100%;
	}
    .container { padding: 40px 20px; }
    
    /* 共通ガイドラインのスマホ対応 */
    .w612-center, 
    .exp-block, 
    .exp-header-bar, 
    .exp-heading-group { 
        width: 95% !important; 
    }
    
    /* フレックス配置を縦並びに強制 */
    .intro-flex-content, 
    .exp-heading-group, 
    .exp-img-row, 
    .exp-content-inner { 
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important; 
        width: 100% !important; 
        gap: 20px !important;
    }

    /* 各テキスト要素の幅調整 */
    .intro1-text-box, 
    .exp-text-top, 
    .exp-text-bottom, 
    .offer-box { 
        width: 95% !important; 
        text-align: left !important; 
        margin: 0 auto !important; 
        height: auto !important; 
    }
    
    /* 画像のサイズ調整：compass-img3を含め一括強制リサイズ */
    .img-arukikata, 
    .comp-img { 
        width: 90% !important; 
        max-width: 400px; /* あまりに大きくなりすぎないよう制限 */
        height: auto !important; 
        flex-shrink: 1 !important; /* 縮小を許可 */
        object-fit: contain !important;
    }
    
    .btn-arukikata-img {
        width: 100% !important; /* スマホ時もテキスト幅（95%）に合わせる */
        max-width: 100% !important;
    }

    /* --- 設計図通りの表示順 (1〜12) --- */
    .exp-body { 
        display: flex !important; 
        flex-direction: column !important; 
    }
    
    /* EXPERIENCE 01 */
    #exp01 .exp-header-bar { order: 1; }
    #exp01 .exp-title-img { order: 2; margin-bottom: 10px; }
    #exp01 .exp-text-top { order: 3; }
    #exp01 .exp-img-row { order: 4; display: flex; flex-direction: column; } /* 画像を個別に並び替え */
    #exp01 .exp-img-row img:nth-child(1) { order: 4; } /* compass-img1 */
    #exp01 .exp-img-row img:nth-child(2) { order: 5; } /* compass-img2 */
    #exp01 .exp-text-bottom { order: 6; }

    /* EXPERIENCE 02 */
    #exp02 .exp-header-bar { order: 7; }
    #exp02 .tagline-badge { order: 8; align-self: center; margin-bottom: 5px; }
    #exp02 .exp-title-img { order: 9; margin-bottom: 10px; }
    #exp02 .exp-text-top { order: 10; }
    #exp02 .comp-img { order: 11; } /* ここがcompass-img3 */
    #exp02 .offer-box { order: 12; }
    
    /* 余白の調整 */
    .intro-main-title { margin-bottom: 25px; }
    .intro1-inner { margin-bottom: 60px; }
    #exp01, #exp02 { margin-bottom: 50px; }
    
    /* dream_titleなどの高さ固定をスマホでは解除して比率を守る */
    .exp-title-img {
        width: 160px !important;
        height: auto !important;
	}
	
	/* --- Intro 2 Smartphone Layout (決定版) --- */
	/* 1. セクション全体の底余白を強制的に詰める */
    #intro-orange-continuation {
        padding-bottom: 0px !important; /* !importantで強制適用 */
        height: auto !important;         /* もし高さが固定されていたら解除 */
    }

    /* 2. カード自体の下のマージンを詰める */
    #intro-orange-continuation .intro2-card {
        width: 100% !important;
        padding: 25px 20px;
        display: flex !important;
        flex-direction: column !important;
        /* カード同士、および最後のカードの下の隙間 */
        margin-bottom: 25px !important; 
    }

    /* 01の中身を解体して順序制御 */
    .c01-top-group, .c01-bottom-flex { display: contents; }

    /* 全カード：ナンバーとタイトルの左端揃え */
    .num-text-flex {
    display: flex !important;
    align-items: flex-start;
    justify-content: flex-start !important;
    width: 80px;
    order: 1;
    margin-bottom: 15px;
    }
    .service-num {
    width: auto !important;
}
    .center-title { text-align: left !important; flex: 1; margin: 0 !important; }

    /* 全カード：説明文の左端揃え */
    .service-desc {
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        order: 2;
        margin-bottom: 25px;
    }

    /* 01：本画像（ボタンセットの上） */
    .c01-right-box { 
        order: 3; 
        display: flex; 
        justify-content: center; 
        margin-bottom: 25px;
    }
    .img-book-fixed { height: 120px !important; margin: 0 auto; }

    /* 01：エリア8＋ボタン */
    .sp-action-group { 
        order: 4; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        padding-left: 0;
    }
	#text-area-8 { text-align: center; margin-bottom: 10px; }

    /* 02, 03の順序調整 */
    .card-step-02 .num-text-flex, .card-step-03 .num-text-flex { order: 5; margin-top: 10px; }
	#text-area-10, #text-area-12 { order: 6; }
	
	/* intro2セクション全体の底の余白を調整 */
    #intro2 {
        padding-bottom: 30px !important; /* 既存の余白が広い場合はここを小さく */
    }

}
/* --- Future --- */
#future {
    background-color: #fff;
    padding-top: 65px; /* PC版 100点 */
}

.pb-88 { padding-bottom: 40px; }

.future-title-block {
    text-align: center;
    margin-bottom: 15px;
}

.img-future-title {
    width: 612px;
    height: 53px;
    object-fit: contain;
}

.future-intro-text {
    width: 702px;
    height: 108px;
    margin: 0 auto 40px;
    font-size: 14.5px;
    line-height: 1.8;
    text-align: left;
    color: #333;
}

.future-identity-img {
    text-align: center;
    margin-bottom: 40px;
}

.img-identity-main {
    width: 702px;
    height: 377px;
    object-fit: contain;
}

/* カードコンテナ */
.future-cards-container {
    width: 612px;
    margin: 0 auto;
}

.future-card {
    width: 580px;
    border: #f5a324 solid 3px;
    border-radius: 15px;
    margin: 0 auto 35px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

/* PC版：背景画像として表示 */
.sp-card-img { display: none; } /* PCでは隠す */

.card-01 { height: 381px; background: url('../images/identity01.png') no-repeat center / cover; }
.card-02 { height: 351px; background: url('../images/identity02.png') no-repeat center / cover; }
.card-03 { height: 351px; background: url('../images/identity03.png') no-repeat center / cover; }

.future-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 32px 25px;
}

.future-card-text {
    width: 510px;
    height: 72px;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.7;
    color: #333;
    text-align: left;
}

/* --- Future Smartphone --- */
@media screen and (max-width: 894px) {
	#future { padding-top: 40px; }

    .img-future-title { width: 100%; height: auto; }

    .future-intro-text {
        width: 100%; height: auto;
        padding: 0 20px; margin-bottom: 30px;
        font-size: 12px;
    }
    .future-intro-text br { display: none; }

    .img-identity-main { width: 100%; height: auto; padding: 0 10px; }

    .future-cards-container { width: 100%; padding: 0 15px; }

    .future-card {
        width: 100% !important;
        height: auto !important;
        background-image: none !important;
        margin-bottom: 25px;
        overflow: visible; /* 被り部分を表示させるためvisibleに変更 */
    }

    /* スマホ用：画像をカード上部に出す */
    .sp-card-img {
        display: block;
        width: 100%;
        height: auto;
    }

    .future-card-content {
        position: relative; /* staticから変更：重なりを制御 */
        margin-top: -50px;   /* 画像に少し被せる（数値は任意で調整） */
        padding: 0 20px 25px;
        z-index: 10;
    }

    .future-card-text {
        width: 100% !important;
        height: auto !important;
        font-size: 12px;
        padding: 10px;       /* 内側に少し余白 */
        border-radius: 8px;
    }
	.future-card-text br { display: none; }
	
	/* セクション全体の底余白 */
    .pb-88 {
        padding-bottom: 20px; 
    }

    /*カード03の下にあるマージンを調整*/
    .future-card:last-child {
        margin-bottom: 0;
    }
}

/* --- under --- */
.outer-wrapper .under-section {
    width: 100%;
    height: 80px; /* 設計図通り */
    background-color: #001a3d; /* 濃紺 */
    position: relative;
    overflow: hidden;
}

.under-container {
    width: 894px; /* 基底幅 */
    height: 100%;
    margin: 0 auto;
    position: relative;
}

/* 下部ナビゲーション：下端から30px、高さ24pxに固定 */
.under-nav-group {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 710px; /* 355px * 2 */
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.img-under-nav {
    width: 355px;
    height: 24px;
    display: block;
}

/* お問合せボタンの配置エリア 
   セクション上端(0)から、ナビボタンの上端(180px - 30px - 24px = 126px)までの範囲 */
.under-enquiry-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 126px; /* ナビボタンまでの高さ */
    display: flex;
    align-items: center; /* この範囲内での上下中央 */
    justify-content: center;
}

.img-enquiry {
    width: 197px;
    height: 41px;
    display: block;
}

/* --- under Smartphone --- */
@media screen and (max-width: 894px) {
    .outer-wrapper .under-section {
        height: auto;
        padding: 50px 20px;
    }

    .under-container {
        width: 100%;
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .under-enquiry-area {
        position: static;
        height: auto;
        width: auto;
        transform: none;
    }

    .under-nav-group {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 15px;
    }

    .img-under-nav {
        width: 100%;
        max-width: 355px;
        height: auto;
    }
}

/* --- Fade-in Animation --- */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.9s ease-out; }
.fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* --- Responsive (Smartphone) --- */
.sp-only { display: none; }
@media screen and (max-width: 894px) {
    .outer-wrapper {
		zoom: 1.1;
		width: 100%;
	}
    .container {
    padding-top: 0px;
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 60px;
}
    .sp-only { display: block; }
    
    .hero { height: auto; padding: 60px 0; }
    .hero-sub { font-size: 24px; margin-bottom: 40px; }
    
    .hero-logo-group { 
        flex-direction: column; 
        align-items: center; 
        gap: 15px; 
    }
    
    /* スマホ版での順序を確実に変更：about.png(2)を上に、thumb.jpg(1)を下に */
    .about-png { order: 1; width: 90%; height: 160px; }
    .thumb-jpg {
    order: 2;
    width: 90%;
    height: 160px;
    background-image: url(images/mov_thimb.jpg);
}

    .flex-row { flex-direction: column; gap: 20px; }
    .arukikata-jpg, .image03 { width: 100%; height: auto; aspect-ratio: 3/2; }
    .image-grid-2 { flex-direction: column; }
    .identity-jpg { width: 100%; height: auto; aspect-ratio: 1/1; }
    .portfolio-jpg, .planner-jpg, .connect-jpg { height: auto; aspect-ratio: 16/10; }
    
    .card { padding: 25px; flex-direction: column; text-align: center; }
    .card .num { width: 100%; margin-bottom: 10px; }
    .cta-btn-wrapper { width: 80%; }
}
/*以下はスマホでのレイアウトを強制*/
@media screen and (max-width: 894px) {
    .outer-wrapper .intro1.py-xl {
        padding-bottom: 0px !important; /* 30pxまで詰めましたが、お好みで調整してください */
	}
	/* EXPERIENCE 01自体の下の余白を削る */
    #exp01.exp-block {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* EXPERIENCE 02自体の上の余白を削る */
    #exp02.exp-block {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* セクションを繋ぐ共通クラスのパディングをスマホ時のみ縮小 */
    .intro1.py-xl, 
    .container {
        padding-bottom: 10px !important;
    }
}

/* ------------------------------------------------------------
   【最終修正】スマホ版で脚注を一番下に強制移動
   ------------------------------------------------------------ */
@media screen and (max-width: 894px) {
    /* カード自体を「並び替え可能な箱」に設定 */
    .intro2-card {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 脚注の順番を強制的に最後(10番)にする */
    .intro2-card .footnote {
        order: 10 !important;
        display: block !important;
        margin-top: 20px !important;
        width: 100% !important;
    }

    /* 他の要素の順番を固定して隙間を与えない */
    .c01-top-group { order: 1 !important; }
    .c01-bottom-flex { order: 2 !important; }
}

/* ============================================================
制作範囲外の共通ヘッダー・フッターを style.css の影響から保護する 
   ============================================================*/
header, 
under, 
.include, 
#pagetop {
    all: revert; /* ブラウザ標準または他のCSS（common.css等）の設定に戻す */
    box-sizing: border-box; /* レイアウト崩れ防止 */
}

/* 特殊な指定の干渉を個別にブロック */
header *, 
under * {
    max-width: none !important;
    zoom: normal !important; /* 絶対にzoomさせない */
}

/* ============================================================
   動画ポップアップ
   ============================================================ */
.video-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.video-popup.active {
    display: flex;
}

.video-popup-content {
    position: relative;
    width: 1792px;
    height: 1008px;
    max-width: 90vw;
    max-height: 90vh;
}

.video-popup video {
    width: 100%;
    height: 100%;
}

.video-popup-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-popup-close:hover {
    background: #ddd;
}