@charset "UTF-8";

/* ==========================================
   共通設定・変数（カラーのみ）
   ========================================== */
:root {
    --color-navy: #0F3254;
    --color-yellow: #FFEA7F;
    --color-text-main: #333333;
}

/* ==========================================
   全体のラッパー（bodyの代わり）
   ========================================== */
#okawariken-wrap {
    margin: 0;
    padding: 0;
    color: var(--color-text-main);
    
    /* CSSによるドット柄の背景 */
    background-color: #ffffff;
    background-image: radial-gradient(circle, #eae69b 1.5px, transparent 1.5px);
    background-size: 10px 10px;
}

/* ==========================================
   フォントファミリーの強制適用
   ========================================== */
#okawariken-wrap,
#okawariken-wrap h1,
#okawariken-wrap h2,
#okawariken-wrap h3,
#okawariken-wrap p,
#okawariken-wrap span {
    font-family: "Kuretake Meiseki", sans-serif !important;
}

#okawariken-wrap img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.container {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 20px 40px;
    box-sizing: border-box;
}

/* ==========================================
   PC / SP 表示切り替え
   ========================================== */
.is-sp {
    display: none !important;
}
@media (max-width: 768px) {
    .is-pc {
        display: none !important;
    }
    .is-sp {
        display: block !important;
    }
}

/* ==========================================
   スマホのみ改行を有効にする設定
   ========================================== */
.sp-br {
    display: none !important;
}
@media (max-width: 768px) {
    .sp-br {
        display: inline !important;
    }
}

/* ==========================================
   フローティングバナー
   ========================================== */
.floating-banner {
    display: block;
    position: fixed;
    bottom: 20px;
    /* ブラウザ幅を広げても画像（コンテンツ）の右下に追従するように変更 */
    left: 50%;
    margin-left: 430px; /* ★ここを370pxから430pxに変更して少し右に移動しました */
    z-index: 9999;
    width: 100px;
    transition: transform 0.3s;
}
.floating-banner:hover {
    transform: scale(1.05);
}
/* 画面幅が1000px以下になり、バナーが画面外にはみ出しそうになったら画面右端基準に変更 */
@media (max-width: 1060px) {
    .floating-banner {
        left: auto;
        right: 20px;
        margin-left: 0;
    }
}
@media (max-width: 768px) {
    .floating-banner {
        width: 80px;
        bottom: 10px;
        right: 10px;
        left: auto;
        margin-left: 0;
    }
}

/* ==========================================
   タイトル・挨拶エリア
   ========================================== */
.title-banner {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
}

.greeting-section {
    background-color: var(--color-navy);
    color: #ffffff;
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 40px; /* PC用マージン */
}
/* ↓ 追加：スマホ用のマージン設定 ↓ */
@media (max-width: 768px) {
    .greeting-section {
        margin-bottom: 20px; /* スマホ用マージン（必要に応じて数値を変更してください） */
    }
}

.greeting-section h2 {
    font-size: 48px; /* PCサイズ */
    margin: 0 0 30px 0;
    letter-spacing: 0.1em;
}
@media (max-width: 768px) {
    .greeting-section h2 { font-size: 28px; /* SPサイズ */ }
}

.greeting-section p {
    font-size: 28px; /* PCサイズ */
    line-height: 1.8;
    margin: 0;
}
@media (max-width: 768px) {
    .greeting-section p { font-size: 18px; /* SPサイズ */ }
}

/* ==========================================
   バナー共通クラス
   ========================================== */
.banner-wrapper {
    margin-bottom: 20px;
    text-align: center;
}

.banner-placeholder {
    /* 背景色を削除しました */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #333;
    width: 100%;
    min-height: 300px; 
}

/* ==========================================
   画像サイズ調整 (PC用)
   ========================================== */
.scale-img-pc {
    width: 80%;
}
@media (max-width: 768px) {
    .scale-img-pc {
        width: 100%; /* SPでは元の幅に戻す */
    }
}

/* ==========================================
   テキスト・コンテンツエリア
   ========================================== */
.center-text {
    text-align: center;
    font-size: 30px; /* PCサイズ */
    font-weight: bold;
    margin: 50px 0 20px;
    /* 白フチの追加 */
    text-shadow: 
        2px 2px 0 #fff, -2px -2px 0 #fff,
       -2px 2px 0 #fff,  2px -2px 0 #fff,
        0px 2px 0 #fff,  0px -2px 0 #fff,
       -2px 0px 0 #fff,  2px  0px 0 #fff;
}
@media (max-width: 768px) {
    .center-text { font-size: 24px; /* SPサイズ */
	line-height: 1.4;}
}

/* --- 改修：メッセージテキストエリア（肉球あしらい） --- */
.description-text {
    position: relative; /* 肉球画像の配置基準 */
    text-align: center;
    font-size: 25px; /* PCサイズ */
    line-height: 2;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin: 40px 0;
    /* PC：テキストの変な改行を防ぐために左右の余白を調整（肉球は端に配置） */
    padding: 30px 50px; 
    /* 白フチの追加 */
    text-shadow: 
        2px 2px 0 #fff, -2px -2px 0 #fff,
       -2px 2px 0 #fff,  2px -2px 0 #fff,
        0px 2px 0 #fff,  0px -2px 0 #fff,
       -2px 0px 0 #fff,  2px  0px 0 #fff;
}
.description-text p {
    margin-bottom: 20px;
}

/* PC：両サイドの肉球デザイン（上段a(2)・中段b(5)・下段a(2)） */
.description-text::before,
.description-text::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px; /* 肉球画像の横幅 */
    z-index: 1; /* 背景や文字の裏に隠れないように設定 */
    background-image: 
        url("../images/nikukyu-a.png"),
        url("../images/nikukyu-b.png"),
        url("../images/nikukyu-a.png");
    background-repeat: no-repeat;
    /* それぞれ 上部(5%)、中央(50%)、下部(95%) に配置 */
    background-position: 
        center 5%, 
        center 50%, 
        center 95%;
    /* 画像のサイズ指定 (横幅100%で縦は成り行き) */
    background-size: 100% auto, 100% auto, 100% auto; 
}

/* PC: 左側の肉球 */
.description-text::before {
    left: 0;
}

/* PC: 右側の肉球 */
.description-text::after {
    right: 0;
}

/* スマホ（SP）用の調整：サイドではなく上下に配置 */
@media (max-width: 768px) {
    .description-text { 
        font-size: 18px; /* SPサイズ */ 
        line-height: 1.7;
        /* ★修正：肉球エリアの高さ可変に伴い、上下の余白を少し広めにとってテキストとの重なりを防ぎます */
        padding: 65px 0; 
        margin-bottom: 20px; /* ★追加：要素全体のしたの余白を設定 */
    }
    
    .description-text::before,
    .description-text::after {
        /* SPでの肉球エリアの横幅（少し広めに） */
        width: 85%; 
        /* ★修正：画像の横幅（1/9）の拡大に合わせて高さも自動可変にし、見切れるのを防ぎます */
        height: 7vw; 
        min-height: 25px; /* 小さい画面でも最小高さをキープ */
        left: 50%;
        transform: translateX(-50%); /* 中央寄せ */
        background-image: url("../images/nikukyu-a.png");
        
        /* 端が切れないよう、左からリピートを開始 */
        background-repeat: repeat-x;
        background-position: left center;
        
        /* ★重要：1つの画像サイズを「エリア幅のちょうど9分の1」に計算して表示 */
        background-size: calc(100% / 9) auto;
    }

    /* SP: 上部の肉球 */
    .description-text::before {
        top: 10px; /* paddingの内側に配置されるように調整 */
        bottom: auto; /* bottomのリセット */
    }
    
    /* SP: 下部の肉球 */
    .description-text::after {
        bottom: 10px; /* paddingの内側に配置されるように調整 */
        top: auto; /* topのリセット */
    }
}
/* --------------------------------------------------- */

.section-title {
    text-align: center;
    font-size: 40px; /* PCサイズ */
    font-weight: bold;
    margin: 70px 0 20px;
    /* アイコン配置用Flexレイアウト追加 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 白フチの追加 */
    text-shadow: 
        2px 2px 0 #fff, -2px -2px 0 #fff,
       -2px 2px 0 #fff,  2px -2px 0 #fff,
        0px 2px 0 #fff,  0px -2px 0 #fff,
       -2px 0px 0 #fff,  2px  0px 0 #fff;
}
@media (max-width: 768px) {
    .section-title { 
        font-size: 24px; /* SPサイズ */ 
        margin: 40px 0 20px;
    }
}

/* ==========================================
   青いボックスエリア（定期便紹介）
   ========================================== */
.blue-box {
    background-color: var(--color-navy);
    color: #ffffff;
    border-radius: 20px;
    padding: 40px;
    margin: 10px 0;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
    .blue-box { padding: 30px 20px; }
}

.blue-box .subtitle {
    font-size: 36px; /* PCサイズ */
    margin: 0 0 10px 0;
}
@media (max-width: 768px) {
    .blue-box .subtitle { font-size: 18px; /* SPサイズ */ }
}

.blue-box .title {
    font-size: 55px; /* PCサイズ */
    margin: 0 0 20px 0;
    letter-spacing: 0.05em;
}
@media (max-width: 768px) {
    .blue-box .title { font-size: 24px; /* SPサイズ */ }
}

.price-area {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* baselineからflex-endに変更し、下揃えに統一 */
    gap: 10px;
    margin-bottom: 30px;
}

.price-note {
    font-size: 20px; /* PCサイズ */
    text-align: left;
    margin-bottom: 8px; /* フォントサイズ差による微調整 */
}
@media (max-width: 768px) {
    .price-note { 
        font-size: 12px; /* SPサイズ */ 
        margin-bottom: 4px;
    }
}

.price-yen {
    font-size: 60px; /* PCサイズ */
    font-weight: bold;
    line-height: 1;
}
@media (max-width: 768px) {
    .price-yen { font-size: 36px; /* SPサイズ */ }
}

.price-tax {
    font-size: 20px; /* PCサイズ */
    margin-bottom: 8px; /* フォントサイズ差による微調整 */
}
@media (max-width: 768px) {
    .price-tax { 
        font-size: 12px; /* SPサイズ */ 
        margin-bottom: 4px;
    }
}

.box-note {
    font-size: 20px; /* PCサイズ */
    text-align: center;
    margin-top: 15px;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .box-note { font-size: 16px; /* SPサイズ */ }
}

/* ==========================================
   プレゼントエリア
   ========================================== */
.present-area {
    margin-top: 40px;
}

.present-title {
    font-size: 36px; /* PCサイズ */
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .present-title { font-size: 24px; /* SPサイズ */ }
}

.present-title .highlight {
    color: var(--color-yellow);
    border-bottom: 2px solid var(--color-yellow);
    padding: 0 5px;
}

.white-box {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px;
    color: var(--color-text-main);
}
@media (max-width: 768px) {
    .white-box { padding: 20px; }
}

.white-box-note {
    font-size: 24px; /* PCサイズ */
    margin-top: 20px;
    margin-bottom: 0;
    line-height: 1.6;
}
@media (max-width: 768px) {
    .white-box-note { font-size: 14px; /* SPサイズ */ }
}

/* ==========================================
   追加・改修レイアウトスタイル
   ========================================== */

/* 肉球アイコン */
.title-icon {
    display: inline-block;
    width: 45px; /* PCアイコンサイズ */
    margin: 0 15px;
}

/* お申し込みボタン・ホバーアクションと余白調整 */
.btn-apply-wrapper {
    margin: 50px 0 70px; /* PC: ボタン周りの余白 */
}
.btn-apply-wrapper .banner-placeholder {
    min-height: auto; /* 余分な空白を排除 */
}
.btn-hover-effect {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.btn-hover-effect:hover {
    transform: translateY(4px); /* 押し込んだようなアクション */
    opacity: 0.85; /* 画像の不透明度を少し下げることで、背景の白が透けて「薄く白くなる」表現に */
    filter: brightness(1.03); /* 明るさはごくわずか（1.03倍）に抑え、自然な変化にします */
}

/* ランチョンマット 画像の余白調整 */
.placemat-wrapper {
    margin: 10px 0; /* PC: マット周りの余白 */
}
.placemat-wrapper .banner-placeholder {
    min-height: auto; /* 余分な空白を排除 */
}

/* むにちゃん・犬七番飯店 余白調整 */
.muni-wrapper {
    margin: 50px 0 100px; /* PC: 余白 */
}
.muni-wrapper .banner-placeholder {
    min-height: auto;
}

.inu7ban-wrapper {
    margin: 50px 0; /* PC: 余白 */
}
.inu7ban-wrapper .banner-placeholder {
    min-height: auto;
}

/* ↓ 追加：なすなかにしさんエリアの高さ成り行き設定 ↓ */
.nasunaka-wrapper .banner-placeholder {
    min-height: auto; /* PC/SP共通でmin-heightの設定を解除し、画像の高さに合わせる */
}

/* SP専用の余白・レイアウト調整 */
@media (max-width: 768px) {
    .title-icon {
        width: 30px; /* SPアイコンサイズ */
        margin: 0 10px;
    }
    
    .btn-apply-wrapper {
        margin: 20px 0 60px; /* SP: ボタン周りの余白 */
    }

    .placemat-wrapper {
        margin: 0; /* SP: マット周りの余白 */
    }
    
    .muni-wrapper {
        margin: 60px 0; /* SP: 余白 */
    }

    .inu7ban-wrapper {
        margin: 20px 0; /* SP: 余白 */
    }
}