@charset "UTF-8";

/* =========================================
   Base & Resets
========================================= */
h1, h2, h3, h4, h5, p, ul, li {
    margin: 0;
    padding: 0;
}
/* bodyでの指定は外し、大枠の .lp-wrapper に設定を移動しました */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
a { text-decoration: none; }

/* リンク用アンダーライン共通クラス追加 */
.underline-link {
    text-decoration: underline !important;
}

/* 共通：strongタグの太字を強制適用 */
strong {
    font-weight: bold !important;
}

/* SP専用改行（デフォルトは非表示） */
.sp-br {
    display: none;
}

/* プレースホルダー（水色） */
.img-placeholder {
    background-color: #92c2d4;
    width: 100%;
    max-width: 830px; /* バナーの横幅を830pxに制限 */
    height: auto; /* 縦幅は成り行き（自動） */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto 20px auto; /* 中央寄せ */
    text-align: center;
}
/* プレースホルダー内の画像を枠いっぱいに広げ、縦幅を成り行きにする */
.img-placeholder img {
    width: 100%;
    height: auto;
}

.img-placeholder.schedule-img {
    max-width: 100%;
    height: auto;
    background-color: #f7a8b8;
    min-height: 200px; /* 画像が入っていない時の仮の高さを設定 */
}


/* =========================================
   Layout
========================================= */
/* bodyの代わりの大枠ラッパーにベーススタイルを適用 */
.lp-wrapper {
    width: 100%; 
    margin: 0 auto;
    background-color: #f5f1eb; 
    color: #000;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.05em; /* ページ全体の字間を広げる調整 */
}

/* =========================================
   Hero Banner (メインビジュアル・スライダー)
========================================= */
.hero-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.hero-banner-inner {
    position: relative;
    width: 100%;
    height: auto;
}
.heroSwiper {
    width: 100%;
    height: auto;
}
.heroSwiper .swiper-slide {
    width: 100%;
}
.heroSwiper .swiper-slide img {
    width: 100%;
    /* PCの横幅1920pxのときに高さが約890pxになるような比率（1920 / 890）に設定 */
    aspect-ratio: 192 / 89;
    height: 100%;
    max-height: 890px; /* PCでの最大高さを890pxに制限 */
    display: block;
    object-fit: cover;
    object-position: center;
}

/* メインビジュアル上に重ねるロゴとタイトル */
.hero-overlay-logo {
    position: absolute;
    top: 5%;
    left: 4%;
    width: 16%; 
    max-width: 180px;
    min-width: 100px;
    z-index: 10;
}
.hero-overlay-title {
    position: absolute;
    bottom: 8%;
    right: 4%;
    width: 35%; 
    max-width: 500px;
    min-width: 250px;
    z-index: 10;
}

.content-inner {
    max-width: 930px; /* 830pxのバナー + 左右の余白（padding）を考慮した幅 */
    margin: 0 auto;
    padding: 40px 5%;
    box-sizing: border-box;
}

/* =========================================
   Typography (TypeSquare)
========================================= */
.mincho-area,
.mincho-area h1,
.mincho-area h2,
.mincho-area h3,
.mincho-area h4,
.mincho-area p,
.top-title,
.top-catch,
.fukui-title,
.fukui-catch,
.section-title,
.sub-title {
    font-family: "A1 Mincho", serif !important;
}

/* 明朝体エリアでのstrongタグ（太字）の強制適用 */
.mincho-area strong {
    font-family: "A1 Mincho", serif !important;
    font-weight: bold !important;
    text-shadow: 0.4px 0 0 currentcolor, -0.4px 0 0 currentcolor, 0 0.4px 0 currentcolor; /* 太字を補強 */
}

.gothic-area,
.gothic-area h4,
.gothic-area h5,
.gothic-area p,
.schedule-title,
.info-section {
    font-family: "A1 Gothic L", sans-serif;
}

/* ゴシック体エリアでのstrongタグ（太字）の強制適用（フォントファミリーを太字用のものに変更） */
.gothic-area strong,
.info-section strong {
    font-family: "A1 Gothic B", sans-serif !important;
    font-weight: bold !important;
}

/* キャプションをA1ゴシックに強制（詳細度を上げてMinchoに勝つ設定） */
p.caption,
.mincho-area p.caption {
    font-size: 16px;
    color: #000;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1.5;
    font-family: "A1 Gothic L", sans-serif !important; 
}

p.img-caption,
.mincho-area p.img-caption {
    font-size: 16px;
    color: #000;
    text-align: center;
    margin: 0;
    line-height: 1.5;
    font-family: "A1 Gothic L", sans-serif !important; 
}

.text-center { text-align: center; }
.text-left { text-align: left; }

/* PC向け見出しレスポンシブ設定 */
h1.top-title { font-size: 30px; }
h2.fukui-title { font-size: 42px; }
h3.section-title { font-size: 24px; }
h4.sub-title { font-size: 20px; }
h4.schedule-title { font-size: 20px; }

/* =========================================
   Components (Mincho Area)
========================================= */
/* ロゴ重ね合わせ */
.logo-area {
    text-align: center;
    margin-top: -60px; /* -100pxから-60pxに変更して被りを小さく（下に下げる） */
    position: relative;
    z-index: 10;
    margin-bottom: 30px;
}
.overlap-logo {
    width: 130px;
    height: auto;
    display: inline-block;
}

/* 上部テキスト（フェリシモ大人旅〜） */
.top-title {
    color: #a48c62;
    margin-bottom: 25px;
    font-weight: normal;
    letter-spacing: 0.1em;
}
.top-catch {
    font-size: 18px;
    line-height: 2;
    margin-bottom: 40px;
    font-weight: normal;
}

/* 中部テキスト（FUKUI〜） */
.fukui-title {
    color: #a48c62;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: normal;
    letter-spacing: 0.15em;
}
.fukui-catch {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 30px;
    font-weight: normal;
}

.intro-text p {
    font-size: 16px;
    margin-bottom: 30px;
}

/* 開催日・締切情報 */
.date-info {
    margin: 50px 0;
}
.date-info .date-main,
.date-info .date-sub {
    font-size: 30px;
    margin-bottom: 15px;
    font-weight: normal;
}
.date-info .date-note { 
    font-size: 16px; 
    margin-top: 10px; 
}

/* 見出し類 */
.section-title {
    color: #a48c62;
    margin-bottom: 20px;
}
.section-desc {
    margin-bottom: 40px;
    font-size: 16px;
}
.sub-title {
    color: #133b7d;
    margin: 40px 0 15px;
    border-bottom: 1px solid transparent;
}

/* スライダー */
.swiper-container-wrapper {
    margin: 40px auto;
    position: relative;
    max-width: 830px; /* スライダー全体も830pxに制限 */
    width: 100%;
}
.mySwiper {
    padding-bottom: 45px;
}
.swiper-pagination {
    bottom: 0 !important;
}
.swiper-slide .img-placeholder {
    margin-bottom: 10px !important;
}
.swiper-button-next, .swiper-button-prev {
    color: #fff !important;
}
.swiper-pagination-bullet-active {
    background: #a48c62 !important;
}

/* =========================================
   White Box Container (Gothic Area)
========================================= */
.white-box-container {
    padding: 0 5% 80px 5%;
}
.white-box {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 50px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.schedule-title {
    margin-bottom: 20px;
    font-weight: bold;
}
.schedule-title small {
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
}

/* 料金ボタン */
.price-btn-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0 20px 0;
}
.optional-btn {
    display: block;
    background-color: #a48c62;
    padding: 15px 20px;
    border-radius: 8px;
    flex: 1;
    max-width: 340px; 
    text-align: center;
    box-shadow: 0 4px 0 #8a7551;
    transition: all 0.2s ease;
    box-sizing: border-box;
    
    font-family: "A1 Gothic M", sans-serif !important;
    font-weight: normal !important;
    text-decoration: none !important;
    color: #ffffff !important;
}
.optional-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8a7551;
    text-decoration: none !important;
    filter: brightness(1.06); 
}
.optional-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}
.optional-btn .btn-top-text { 
    margin: 0; 
    font-size: 18px; 
    font-family: "A1 Gothic M", sans-serif !important;
    font-weight: normal !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.optional-btn .price { 
    font-size: 20px; 
    margin-top: 5px; 
    font-family: "A1 Gothic M", sans-serif !important;
    font-weight: normal !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.optional-btn .tax { 
    font-size: 13px; 
    font-family: "A1 Gothic R", sans-serif !important;
    font-weight: normal !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.base-btn {
    display: block;
    background-color: #200E40;
    padding: 15px 20px;
    border-radius: 8px;
    flex: 1;
    max-width: 340px; 
    text-align: center;
    box-shadow: 0 4px 0 #100720;
    transition: all 0.2s ease;
    box-sizing: border-box;
    
    font-family: "A1 Gothic M", sans-serif !important;
    font-weight: normal !important;
    text-decoration: none !important;
    color: #ffffff !important;
}
.base-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #100720;
    text-decoration: none !important;
    filter: brightness(1.06); 
}
.base-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}
.base-btn .btn-top-text { 
    margin: 0; 
    font-size: 18px; 
    font-family: "A1 Gothic M", sans-serif !important;
    font-weight: normal !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.base-btn .price { 
    font-size: 20px; 
    margin-top: 5px; 
    font-family: "A1 Gothic M", sans-serif !important;
    font-weight: normal !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.base-btn .tax { 
    font-size: 13px; 
    font-family: "A1 Gothic R", sans-serif !important;
    font-weight: normal !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* オプショナルコースのリボン */
.optional-course-area {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 50px;
}
.optional-ribbon-img {
    text-align: center;
    margin: 40px 0 0;
}
.optional-ribbon-img img {
    max-width: 100%;
    height: auto;
    width: 100%;
    max-width: 600px;
}
.ribbon-fold-left {
    left: 0;
    border-top: 15px solid #3e7b88;
    border-left: 15px solid transparent;
}
.ribbon-fold-right {
    right: 0;
    border-top: 15px solid #3e7b88;
    border-right: 15px solid transparent;
}

/* オプショナルプラン説明テキストのスタイル */
.optional-desc {
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px; /* PC用のフォントサイズ */
}

/* 注意事項・情報エリア */
.info-section {
    font-size: 16px; /* 14pxから16pxに変更 */
    line-height: 1.8;
}
.info-block {
    margin-bottom: 40px;
}
.info-block p {
    font-size: 16px; /* PCでの明示的な指定 */
}
.info-block h5 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* お問い合わせセクションとキャンペーンエリア */
.contact-section p {
    margin-bottom: 0;
}
.mt-20 { 
    margin-top: 20px !important; 
}

.campaign-area {
    margin-top: 60px;
    border: 4px solid #f3354c;
    border-radius: 12px;
    background-color: #fff;
    text-align: center;
    padding: 40px 20px 30px;
    position: relative;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.campaign-title {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f3354c;
    color: #fff;
    padding: 10px 40px;
    border-radius: 30px;
    font-weight: bold;
    font-family: "A1 Gothic B", sans-serif !important;
    font-size: 18px;
    white-space: nowrap;
    letter-spacing: 0.05em;
}
.campaign-content p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 10px;
}
.campaign-content .campaign-link-text {
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 18px;
}
.campaign-content .campaign-url {
    color: #333;
    word-break: break-all;
    text-decoration: underline; /* noneからunderlineに変更 */
    font-size: 15px;
    letter-spacing: 0.05em;
}
.campaign-content .campaign-url:hover {
    text-decoration: underline;
}

/* スマホ用下部固定バー */
.sp-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
.btn-main {
    background-color: #a48c62;
    color: #fff;
    text-align: center;
    padding: 15px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 0;
    width: 85%;
    max-width: 340px;
    display: block;
    box-sizing: border-box;
    text-decoration: none;
}
.btn-main:hover {
    color: #fff;
    text-decoration: none;
}

/* 画像とキャプションのラッパー */
.img-wrapper {
    margin: 0 auto 30px auto;
    max-width: 830px; /* プレースホルダーの最大幅に合わせる */
}
/* プレースホルダー自体のmargin-bottomを上書き */
.img-wrapper .img-placeholder {
    margin-bottom: 10px;
}


/* =========================================
   Info Block (概要下部の情報エリア)
========================================= */
.info-block {
    margin-top: 20px;
    margin-bottom: 20px;
}

.info-block .info-lead {
    font-size: 22px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.info-block .info-details p {
    margin-bottom: 20px;
}

.info-block .info-price,
.info-block .info-deadline {
    font-size: 24px; /* PCでの最小テキストサイズを18pxに設定 */
}

.info-block .info-date {
    font-size: 28px; /* deadline-date と同じサイズに設定 */
    margin: 5px 0;
}

.info-block .deadline-date {
    font-size: 28px;
    display: inline-block;
    margin: 5px 0;
    font-weight: bold;
}

.info-block .deadline-note {
    font-size: 18px; 
}

/* =========================================
   Media Queries (SP対応)
========================================= */
@media screen and (max-width: 768px) {
    /* body指定の代わりに .lp-wrapper に変更 */
    .lp-wrapper {
        padding-bottom: 80px;
    }

    /* SP見出しレスポンシブ設定 */
    h1.top-title { font-size: 24px; }
    h2.fukui-title { font-size: 30px; }
    h3.section-title { font-size: 20px; }
    h4.sub-title { font-size: 18px; }
    h4.schedule-title { font-size: 18px; }

    /* SP専用改行を有効化 */
    .sp-br {
        display: block;
    }

    /* Hero Banner SP */
    /* メインビジュアルの縦幅をSP用に適宜高く調整（少し縦を長めに） */
    .heroSwiper .swiper-slide img {
        aspect-ratio: 4 / 3; 
        max-height: 80vh; /* SPでの最大高さを画面の80%までに制限 */
    }
    .hero-overlay-logo {
        top: 3%;
        left: 3%;
        width: 18%;
        min-width: 80px;
    }
    .hero-overlay-title {
        bottom: 5%;
        right: 3%;
        width: 65%;
        min-width: 220px;
    }

    .content-inner {
        padding: 30px 15px;
    }
    .white-box-container {
        padding: 0 15px 80px 15px;
    }
    .white-box {
        padding: 30px 20px;
    }
    .sp-bottom-bar {
        display: flex;
    }
    
    /* Info Block SP調整 */
    .info-block {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .info-block p {
        font-size: 14px; /* SPでの情報エリアpタグのサイズ（後で調節可能） */
    }
    .info-block .info-lead {
        font-size: 18px;
    }
    .info-block .info-price,
    .info-block .info-deadline {
        font-size: 18px; /* SPでの基本サイズ */
    }

    .info-block .deadline-note {
        font-size: 15px; /* SPでの基本サイズ */
        line-height: 1.4;
        display: inline-block;
        margin-top: 5px;
    }	
	
    .info-block .info-date {
        font-size: 20px; /* SPの deadline-date と同じサイズに設定 */
    }
    .info-block .deadline-date {
        font-size: 20px;
    }

    /* キャプションサイズのSP調整 */
    p.caption, .mincho-area p.caption { font-size: 13px; margin-top: 8px; margin-bottom: 0; line-height: 1.4; }
    p.img-caption, .mincho-area p.img-caption { font-size: 13px; }
    
    .mySwiper { padding-bottom: 35px; }
    .swiper-slide .img-placeholder { margin-bottom: 8px !important; }

    /* ロゴ・テキストサイズのSP調整 */
    .logo-area { margin-top: -20px; margin-bottom: 20px; } /* 被らないよう、または極力被りを減らすため-70pxから-20pxに変更 */
    .overlap-logo { width: 70px; } /* 90pxから70pxに変更して小さく */
    
    .top-title { margin-bottom: 15px; }
    .top-catch { font-size: 16px; margin-bottom: 30px; }
    
    .fukui-title { margin-top: 30px; }
    .fukui-catch { font-size: 18px; margin-bottom: 25px; }

    .intro-text p { font-size: 16px; text-align: left; }
    
    .date-info { margin: 30px 0; }
    .date-info .date-main,
    .date-info .date-sub { font-size: 20px; margin-bottom: 10px; }
    .date-info .date-note { font-size: 14px; }

    /* オプショナルプラン説明テキストのSP調整 */
    .optional-desc {
        font-size: 16px; /* SP用のフォントサイズ */
    }

    /* ボタンのSP調整 (横並び) */
    .price-btn-area {
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        margin: 20px 0 15px 0;
    }
    
    /* SPオプショナルプランボタンのサイズ調整（元の約2/3） */
    .optional-btn {
        display: block;
        background-color: #a48c62;
        padding: 10px 10px; /* 余白を縮小 */
        border-radius: 8px;
        flex: 1;
        max-width: 230px; /* 最大幅を約2/3に縮小 */
        margin: 0 auto; /* 中央寄せ */
        text-align: center;
        box-shadow: 0 4px 0 #8a7551;
        transition: all 0.2s ease;
        box-sizing: border-box;
        
        font-family: "A1 Gothic M", sans-serif !important;
        font-weight: normal !important;
        text-decoration: none !important;
        color: #ffffff !important;
    }
    .optional-btn:hover {
        transform: translateY(2px);
        box-shadow: 0 2px 0 #8a7551;
        text-decoration: none !important;
        filter: brightness(1.06); 
    }
    .optional-btn:active {
        transform: translateY(4px);
        box-shadow: none;
    }
    .optional-btn .btn-top-text { 
        margin: 0; 
        font-size: 14px; /* 文字サイズを縮小 */
        font-family: "A1 Gothic M", sans-serif !important;
        font-weight: normal !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
    .optional-btn .price { 
        font-size: 16px; /* 文字サイズを縮小 */
        margin-top: 3px; 
        font-family: "A1 Gothic M", sans-serif !important;
        font-weight: normal !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
    .optional-btn .tax { 
        font-size: 11px; /* 文字サイズを縮小 */
        font-family: "A1 Gothic R", sans-serif !important;
        font-weight: normal !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .base-btn {
        flex: 0 0 48%;
        padding: 15px 5px; 
    }
    .base-btn .btn-top-text {
        font-size: 13px; 
        font-family: "A1 Gothic M", sans-serif !important;
    }
    .base-btn .price {
        font-size: 15px; 
        margin-top: 3px;
        font-family: "A1 Gothic M", sans-serif !important;
    }
    .base-btn .tax {
        display: block; 
        font-size: 11px;
        margin-top: 2px;
        font-family: "A1 Gothic R", sans-serif !important;
    }

    /* オプショナルリボン・キャンペーン SP調整 */
    .optional-ribbon-img { margin: 30px 0 0; }
    
    .campaign-area { padding: 50px 6px 20px; margin-top: 50px; }
    .campaign-title { font-size: 15px; padding: 10px 15px; white-space: normal; width: 90%; top: 0; transform: translate(-50%, -50%); box-sizing: border-box; line-height: 1.4; }
    .campaign-content p { font-size: 14px; }
    .campaign-content .campaign-link-text { font-size: 16px; margin-top: 20px; }
    .campaign-content .campaign-url { font-size: 12px; }
}