@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; /* ページ全体の字間を広げる調整 */
    overflow-x: hidden; /* ★ 横スクロール（横揺れ）防止 */
}

/* =========================================
   Hero Banner (メインビジュアル・スライダー)
========================================= */
.hero-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.hero-banner-inner {
    position: relative;
    width: 100%;
    /* 大きな画面でもバナーが巨大になりすぎないよう幅を制限し、控えめに表示します */
    max-width: 1200px; 
    margin: 0 auto;
    height: auto;
}
.heroSwiper {
    width: 100%;
    height: auto;
}
.heroSwiper .swiper-slide {
    width: 100%;
}
.heroSwiper .swiper-slide img {
    width: 100%;
    /* 元の画像の比率をそのまま維持し、上部や下部が一切切れないように設定 */
    height: auto;
    display: block;
}

/* メインビジュアル上に重ねるロゴとタイトル */
.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,
.oita-title,
.oita-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 h5,
.gothic-area p,
.schedule-title,
.info-section {
    font-family: "A1 Gothic L", sans-serif;
}

.room-type-title h4,
.gothic-area h4
 {
    font-family: "A1 Gothic R", sans-serif;
}

/* 指定エリアを A1 Gothic R に変更（.date-info と .course-date-text は元のフォントを維持するためここから外しています） */
.course-intro-text,
.course-intro-text p,
.course-desc {
    font-family: "A1 Gothic R", sans-serif !important;
}

/* ゴシック体エリアでの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.oita-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;
}

/* 中部テキスト（OITA〜） */
.oita-title {
    color: #a48c62;
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: normal;
    letter-spacing: 0.15em;
}
.oita-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;
}
/* ★ここでPCでのフォントサイズを調整できます */
.date-info .date-course {
    font-size: 30px; 
    margin-bottom: 15px;
}
.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%;
    width: 100%; /* ★ はみ出し防止 */
    box-sizing: border-box; /* ★ 横揺れ防止 */
}
.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);
    box-sizing: border-box; /* ★ 横揺れ防止 */
}

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

/* コース・日程テキストのサイズ調整 (PC用) */
.course-date-text {
    font-size: 16px; /* ★ここでPCでのフォントサイズを調整できます */
    margin-bottom: 5px;
}

/* 料金ボタンベースエリア */
.price-btn-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0px 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;
}

/* 追加・調整：コース・料金エリア用スタイル (PC用ベース) */
.course-intro-text {
    margin: 60px 0 40px;
    font-size: 20px;
    line-height: 1.8;
}
.course-block {
    margin-bottom: 70px;
}
.course-block.mt-50 {
    margin-top: 50px;
}
.text-center-wrapper {
    text-align: center;
    width: 100%; /* ★ 追加: ラッパーの幅を確保 */
    display: block; /* ★ 追加 */
}
.course-title {
    background-color: #63a4b0;
    color: #fff;
    text-align: center;
    padding: 10px 30px;
    border-radius: 30px;
    display: table; /* ★ 中央配置を強制するため inline-block から table へ変更 */
    margin: 0 auto 20px auto; /* ★ 左右 auto を明示 */
    font-size: 24px;
    font-weight: bold;
}
.course-sub {
    font-size: 18px;
   /* font-weight: normal;*/
}
.course-desc {
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 1.8;
}
.room-type-block {
    margin-bottom: 30px;
}
.room-type-title-wrapper {
    text-align: center;
}
.room-type-title {
    background-color: #b08d6a;
    color: #fff;
    text-align: center;
    padding: 10px 40px;
    border-radius: 30px;
    display: inline-block;
    margin: 20px auto 15px;
    font-size: 18px;
}
.room-type-area-half {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.room-type-area-half .room-type-block.half {
    flex: 1;
    max-width: 340px;
}
/* ボタン色の上書き設定 */
.base-btn.btn-green {
    background-color: #104838;
    box-shadow: 0 4px 0 #092c22;
}
.base-btn.btn-green:hover {
    box-shadow: 0 2px 0 #092c22;
}
.base-btn.btn-red {
    background-color: #7b1d28;
    box-shadow: 0 4px 0 #4f1118;
}
.base-btn.btn-red:hover {
    box-shadow: 0 2px 0 #4f1118;
}


/* オプショナルコースのリボン */
.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-desc {
    text-align: center;
    margin-bottom: 20px;
}
.campaign-list-wrapper {
    text-align: center;
    margin-bottom: 25px;
}
.campaign-list {
    display: inline-block;
    text-align: left;
    list-style: none; /* デフォルトのリストスタイルをリセット */
    padding-left: 0;
}
.campaign-list li {
    margin-bottom: 5px;
    font-weight: bold;
    padding-left: 1em;  /* 行頭のインデントを確保 */
    text-indent: -1em;  /* 1行目だけ1文字分（・の分）戻す */
    font-size: 16px; /* PC用フォントサイズ */
}
.campaign-list li::before {
    content: "・";
}
.campaign-list .note {
    font-size: 14px;
    font-weight: normal;
}
.campaign-content .campaign-link-text {
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 18px;
    text-align: center;
}
.campaign-content .campaign-url {
    color: #333;
    word-break: break-all;
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 5px;
}
.campaign-content .campaign-url:hover {
    text-decoration: underline;
}
.campaign-content .campaign-note {
    font-size: 13px;
    text-align: center;
    margin-top: 5px;
}

/* スマホ用下部固定バー */
.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: 24px;
    line-height: 1.8;
    margin-bottom: 30px;
}

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

/* ▼ スマホでのURLのはみ出しを防止するために追加 ▼ */
.info-block a {
    word-break: break-all;
    overflow-wrap: break-word;
}
/* ▲ 追加箇所ここまで ▲ */

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


/* =========================================
   Profile Section (プロフィールエリア)
========================================= */
.matatabi-profile-section {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    margin-top: 40px;
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.05);*/
}

/* PC：ロゴを独立して配置 */
.matatabi-logo {
    max-width: 280px;
    margin-bottom: 20px;
    display: block;
}

/* PC：テキスト（左）と画像（右）を横並びに */
.matatabi-main-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.matatabi-text {
    flex: 1;
}

.matatabi-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

.matatabi-image {
    flex: 1;
    max-width: 45%; /* 右側の画像を制限 */
    text-align: right;
}

.matatabi-photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}


/* =========================================
   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.oita-title { font-size: 30px; }
    h3.section-title { font-size: 20px; }
    h4.sub-title { font-size: 18px; }
    h4.schedule-title { font-size: 18px; }

    /* 追加：SP向けコース・料金エリア */
    .course-intro-text {
        font-size: 16px;
        margin-bottom: 30px;
    }
    .course-block {
        margin-bottom: 100px;
    }
    .course-block.mt-50 {
        margin-top: 40px;
    }
    .course-title {
        font-size: 18px;
        padding: 8px 15px;
        margin-bottom: 15px;
    }
    .course-sub {
        font-size: 14px;
        display: inline;
    }
    .course-desc {
        font-size: 16px;
        margin-bottom: 0px;
    }

    /* コース・日程テキストのサイズ調整 (SP用) */
    .course-date-text {
        font-size: 14px; /* ★ここでSPでのフォントサイズを調整できます */
    }

    .room-type-block {
        margin-bottom: 10px;
    }
    .room-type-title {
        font-size: 16px;
        padding: 8px 25px;
        margin-bottom: 15px;
    }
    .room-type-area-half {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .room-type-area-half .room-type-block.half {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0px;
    }
    .room-type-area-half .room-type-block.half:last-child {
        margin-bottom: 0;
    }

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

    /* Hero Banner SP */
    .heroSwiper .swiper-slide img {
        /* SPでも画像を一切切らずに全体表示 */
        width: 100%;
        height: auto;
        display: block;
    }
    .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; }
    
    .oita-title { margin-top: 30px; }
    .oita-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; }
    /* ★ここでSPでのフォントサイズを調整できます */
    .date-info .date-course { font-size: 18px; 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: 0 0 15px 0;
    }
    
    /* 基本ボタンのSP調整（1つの場合は100%、2つの場合は半々で自動調整） */
    .base-btn {
        flex: 1;
        width: 100%;
        max-width: none;
        padding: 15px 5px; 
    }
    .base-btn .btn-top-text {
        font-size: 13px; 
        font-family: "A1 Gothic M", sans-serif !important;
    }
    .base-btn .price {
        font-size: 14px; 
        margin-top: 5px;
        font-family: "A1 Gothic M", sans-serif !important;
    }
    .base-btn .tax {
        display: inline; /* SPでも金額と同じ行に配置 */
        font-size: 10px;
        font-family: "A1 Gothic R", sans-serif !important;
    }

    /* 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;
    }

    /* オプショナルリボン・キャンペーン 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; }
    
    /* キャンペーンエリアのSP追加調整 */
    .campaign-content .campaign-desc { margin-bottom: 15px; }
    
    .campaign-list-wrapper {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .campaign-list {
        text-align: left; /* テキストは左揃え */
    }
    .campaign-list li {
        font-size: 14px; /* SP用のフォントサイズ */
    }

    .campaign-list .note { font-size: 12px; }
    .campaign-content .campaign-link-text { font-size: 16px; margin-top: 20px; }
    .campaign-content .campaign-url { font-size: 13px; }
    .campaign-content .campaign-note { font-size: 11px; }

    /* Profile Section SP調整 */
    .matatabi-profile-section {
        padding: 25px 20px;
    }
    
    .matatabi-logo {
        max-width: 240px;
        /* スマホでロゴを中央揃えにする場合は以下のコメントを外す */
        /* margin: 0 auto 20px auto; */
    }

    .matatabi-main-content {
        flex-direction: column; /* 縦並びに変更 */
        gap: 25px;
    }

    .matatabi-text,
    .matatabi-image {
        width: 100%;
        max-width: 100%;
    }

    .matatabi-text p {
        font-size: 14px;
    }

    .matatabi-image {
        text-align: center;
    }
}