/* after_bouquet list (20260817) + detail */
/* =========================================
           ベース設定 (IDスコープ内のみ適用)
========================================= */
#after-bouquet-wrapper {
    --ab-bordeaux: #7a2021;
    --ab-gold: #c5a059;
    --ab-bg: #faf9f8;
    --ab-text: #333333;
    --ab-text-light: #666666;
    --ab-mincho: 'Shippori Mincho', 'Noto Serif JP', serif;
    --ab-gothic: 'M PLUS 1p', 'Noto Sans JP', sans-serif;
    font-family: var(--ab-gothic);
    color: var(--ab-text);
    background-color: var(--ab-bg);
    line-height: 1.8;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

#after-bouquet-wrapper * {
    box-sizing: border-box;
}

#after-bouquet-wrapper img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* 共通見出しスタイル */
#after-bouquet-wrapper .ab-section-title {
    font-family: var(--ab-mincho);
    font-size: 36px;
    text-align: center;
    color: var(--ab-bordeaux);
    margin-bottom: 50px;
    font-weight: normal;
}

/* 共通ボタンスタイル */
#after-bouquet-wrapper .ab-btn {
    display: inline-block;
    background-color: var(--ab-bordeaux);
    color: #fff;
    text-decoration: none;
    padding: 18px 20px;
    font-size: 16px;
    font-family: var(--ab-mincho);
    border-radius: 40px;
    box-shadow: 0 4px 15px rgba(122, 32, 33, 0.3);
    transition: all 0.3s ease;
    border: 1px solid var(--ab-bordeaux);
    text-align: center;
}

#after-bouquet-wrapper .ab-btn:hover {
    background-color: #fff;
    color: var(--ab-bordeaux);
}

/* 共通セクション余白 */
#after-bouquet-wrapper .ab-section {
    padding: 100px 20px;
    max-width: 1100px;
    margin: 0 auto;
}

/* =========================================
           1. ファーストビュー
========================================= */
#after-bouquet-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    background-color: #eaddd3;
    overflow: hidden;
    padding: 60px 20px;
    max-width: 1400px;
    margin: auto;
}

#after-bouquet-hero .ab-hero-left-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 40%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.9;
}

#after-bouquet-hero .ab-hero-right-img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    max-width: 500px;
    z-index: 2;
}

#after-bouquet-hero .ab-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    background: rgba(255, 255, 255, 0.85);
    padding: 50px 60px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 600px;
    margin: 0 auto;
}

#after-bouquet-hero h1 {
    font-family: var(--ab-mincho);
    font-size: 42px;
    color: var(--ab-text);
    line-height: 1.4;
    margin-bottom: 20px;
    margin-top: 0;
}

#after-bouquet-hero p {
    font-size: 16px;
    color: var(--ab-text-light);
    margin-bottom: 30px;
    font-family: var(--ab-mincho);
}

/* =========================================
           2. 共感・課題提起
========================================= */
#after-bouquet-empathy.ab-section {
    position: relative;
    margin: 60px auto 0;
    border-radius: 20px;
    /* 背景画像の設定 */
    background-image: url('../img/after_bouquet/img_02.jpg');
    /* 画像パス */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 150px 20px;
    /* 背景画像がしっかり見えるよう上下に十分な余白をとる */
    color: #fff;
    /* 要素全体の最大幅制限を解除して画面いっぱいに広げる場合は以下を有効に（お好みで） */
    /*max-width: 100%;*/
    /*max-width: 1400px;*/
}

/* 背景画像の上に黒い透過レイヤーを重ねる疑似要素 */
#after-bouquet-empathy::before {
    border-radius: 20px;
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 暗さの調整。0.5に設定 */
    z-index: 1;
}

/* 文字を黒いレイヤーよりも上に表示させる */
#after-bouquet-empathy > * {
    position: relative;
    z-index: 2;
}

#after-bouquet-empathy h2 {
    font-family: var(--ab-mincho);
    font-size: 40px;
    margin-bottom: 20px;
    margin-top: 0;
    color: #fff;
    /* 文字を白に */
    line-height: 1.4;
}

#after-bouquet-empathy p {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
    /* 少し透過させて柔らかい印象の白に */
    margin: 0;
}

/* =========================================
           3. 解決策
========================================= */
#after-bouquet-solution {
    display: flex;
    align-items: center;
    gap: 60px;
}

#after-bouquet-solution .ab-solution-content {
    flex: 1;
}

#after-bouquet-solution .ab-solution-img {
    flex: 1.2;
}

#after-bouquet-solution .ab-solution-img img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

#after-bouquet-solution .ab-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0;
}

#after-bouquet-solution .ab-icons span {
    background-color: #fff;
    border: 1px solid var(--ab-gold);
    color: var(--ab-gold);
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 30px;
}

/* =========================================
           4. 商品ラインナップ
========================================= */
#after-bouquet-products .ab-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* ここを変更：常に2列 */
    gap: 10px;
}

#after-bouquet-products .ab-product-card {
    background-color: #fff;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    text-align: center;
    border-radius: 10px;
}

#after-bouquet-products .ab-product-card img {
    width: 100%;
    margin-bottom: 30px;
}

#after-bouquet-products .ab-product-title {
    font-family: var(--ab-mincho);
    font-size: 22px;
    margin-bottom: 15px;
    line-height: 1.4;
}

#after-bouquet-products .ab-product-desc {
    font-size: 15px;
    color: var(--ab-text-light);
    margin-bottom: 20px;
}

#after-bouquet-products .ab-product-price {
    font-family: var(--ab-mincho);
    font-size: 23px;
    color: var(--ab-bordeaux);
    margin-bottom: 30px;
    font-weight: bold;
}

/* =========================================
           5. お客様の声
========================================= */
#after-bouquet-voice {
    background-color: #fff;
}

#after-bouquet-voice .ab-voice-box {
    display: flex;
    gap: 50px;
    align-items: center;
    background-color: var(--ab-bg);
    padding: 50px;
    border-radius: 10px;
}

#after-bouquet-voice .ab-voice-box > img {
    width: 45%;
    max-width: 450px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

#after-bouquet-voice .ab-voice-text h3 {
    font-family: var(--ab-mincho);
    color: var(--ab-bordeaux);
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.4;
}

/* =========================================
           6. ご注文の流れ (アイコン追加版)
========================================= */
#after-bouquet-flow .ab-flow-steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-align: center;
    margin-top: 50px;
    gap: 20px;
}

#after-bouquet-flow .ab-step {
    flex: 1;
    position: relative;
}

/* PC時はステップ間に矢印のような装飾を入れる場合 */
#after-bouquet-flow .ab-step:not(:last-child)::after {
    content: "〉";
    position: absolute;
    right: -20px;
    top: 40px;
    color: var(--ab-gold);
    font-size: 24px;
}

#after-bouquet-flow .ab-flow-icon {
    width: 80px;
    /* アイコンの基本サイズ */
    height: 80px;
    object-fit: contain;
    margin: 0 auto 20px;
    display: block;
}

#after-bouquet-flow .ab-step-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#after-bouquet-flow .ab-step-num {
    display: inline-block;
    background-color: var(--ab-gold);
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-family: var(--ab-mincho);
    font-size: 14px;
}

#after-bouquet-flow .ab-step-text {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
}

/* =========================================
           7. お持ち込み店舗案内
========================================= */
#after-bouquet-shop {
    background-color: #fff;
}

#after-bouquet-shop .ab-shop-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 40px;
}

#after-bouquet-shop .ab-shop-info > img {
    width: 50%;
    max-width: 500px;
    border-radius: 10px;
}

#after-bouquet-shop .ab-shop-info > div {
    width: 50%;
}

/* =========================================
           8. クロージングとCTA
========================================= */
#after-bouquet-cta {
    /* 既存の背景色は削除するか、画像読み込みまでのフォールバックとして残す */
    background-color: transparent;
    /* 背景色を透明に */
    /* 疑似要素（黒いレイヤー）を配置するための基準に */
    position: relative;
    /* 背景画像の設定 */
    background-image: url('../img/after_bouquet/bg.jpg');
    /* ここに画像パスを入力 */
    background-size: cover;
    /* 画面いっぱいに広げる */
    background-position: center;
    /* 中央に配置 */
    background-repeat: no-repeat;
    /* 繰り返さない */
    color: #fff;
    text-align: center;
    padding: 100px 20px;
    /* 画像が見えるよう余白を少し広く */
}

/* * 背景画像の上に黒い透過レイヤーを重ねる疑似要素
 * これで画像が暗くなり、白い文字が浮き上がります
 */
#after-bouquet-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 親要素(#after-bouquet-cta)の四隅にぴったり合わせる */
    width: 100%;
    height: 100%;
    /* 半透明の黒色。0.6の部分を変えることで暗さを調整できます(0.0〜1.0) */
    background-color: rgba(0, 0, 0, 0.4);
    /* 文字やボタン（z-index: 1）よりも下に、背景画像よりも上に配置 */
    z-index: 1;
}

/* 文字やボタンを黒いレイヤーよりも上に表示させる */
#after-bouquet-cta > * {
    position: relative;
    z-index: 2;
}

#after-bouquet-cta h2 {
    font-family: var(--ab-mincho);
    color: #FFF;
    font-size: 36px;
    margin-bottom: 40px;
    margin-top: 0;
    line-height: 1.4;
}

#after-bouquet-cta .ab-cta-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

#after-bouquet-cta .ab-btn-line {
    background-color: #06C755;
    border-color: #06C755;
    font-size: 20px;
    padding: 20px 60px;
}

#after-bouquet-cta p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    /* 少し透過させて柔らかく */
    margin-bottom: 10px;
}

#after-bouquet-cta .ab-tel {
    font-size: 42px;
    font-family: var(--ab-gothic);
    font-weight: bold;
    display: block;
    margin-top: 15px;
    color: #fff;
    text-decoration: none;
}

/* =========================================
           9. フッター
========================================= */
#after-bouquet-footer {
    background-color: #222;
    color: #ccc;
    text-align: center;
    padding: 40px 20px;
    font-size: 12px;
}

/* =========================================
           レスポンシブ (スマホ対応)
========================================= */
@media (max-width: 768px) {
    #after-bouquet-wrapper .ab-section {
        padding: 60px 15px;
    }

    #after-bouquet-wrapper .ab-section-title {
        font-size: 28px;
    }

    #after-bouquet-hero {
        flex-direction: column;
        padding: 100px 0 0;
        min-height: auto;
        background-color: #fff;
    }

    #after-bouquet-hero .ab-hero-left-img {
        position: relative;
        width: 100%;
        height: 300px;
    }

    #after-bouquet-hero .ab-hero-content {
        width: 90%;
        margin: -50px auto 30px;
        padding: 30px 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    #after-bouquet-hero h1 {
        font-size: 28px;
    }

    #after-bouquet-hero .ab-hero-right-img {
        position: relative;
        transform: none;
        width: 80%;
        margin: 0 auto 40px;
    }

    #after-bouquet-empathy {
        padding: 80px 15px;
    }

    #after-bouquet-empathy h2 {
        font-size: 28px;
    }

    #after-bouquet-empathy p {
        font-size: 16px;
    }

    #after-bouquet-solution, #after-bouquet-voice .ab-voice-box, #after-bouquet-shop .ab-shop-info {
        flex-direction: column;
        gap: 30px;
        /*padding: 20px;*/
    }

    #after-bouquet-solution .ab-solution-img, #after-bouquet-voice .ab-voice-box > img, #after-bouquet-shop .ab-shop-info > img, #after-bouquet-shop .ab-shop-info > div {
        width: 100%;
        max-width: 100%;
    }

    #after-bouquet-products .ab-product-grid {
        gap: 20px;
    }

    #after-bouquet-products .ab-product-card {
        padding: 10px;
    }

    #after-bouquet-products .ab-product-card img {
    }

    #after-bouquet-products .ab-product-title {
        font-size: 16px;
    }

    #after-bouquet-products .ab-product-desc {
    }

    #after-bouquet-products .ab-product-price {
        font-size: 18px;
    }

    #after-bouquet-wrapper .ab-btn {
        font-size: 16px;
        border-radius: 10px;
        padding: 10px 7px;
    }

    /* スマホ時のOrder Flow調整 */
    #after-bouquet-flow .ab-flow-steps {
        /*flex-direction: column;*/
        gap: 40px;
    }

    #after-bouquet-flow .ab-step:not(:last-child)::after {
        /* スマホでは横向きの矢印を非表示にして下向きに */
        content: "∨";
        right: auto;
        left: 50%;
        top: auto;
        bottom: -35px;
        transform: translateX(-50%);
    }

    #after-bouquet-flow .ab-flow-icon {
        width: 70px;
        height: 70px;
    }

    #after-bouquet-cta {
        padding: 60px 15px;
    }

    #after-bouquet-cta h2 {
        font-size: 24px;
    }

    #after-bouquet-cta .ab-tel {
        font-size: 32px;
    }
}

/* extras for site integration */
#after-bouquet-breadcrumb {
	max-width: 1400px;
	margin: 0 auto;
	padding: 12px 20px 0;
}
#after-bouquet-breadcrumb .breadcrumbs { position: static; }
#after-bouquet-breadcrumb .breadcrumbs-list a,
#after-bouquet-breadcrumb .breadcrumbs-list span { color: #231815; }
#after-bouquet-products .ab-product-note {
	margin: 24px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--ab-text-light, #666);
}
#after-bouquet-flow .ab-flow-lead {
	text-align: center;
	margin: 0 0 24px;
	color: var(--ab-text-light, #666);
}
#after-bouquet-flow .ab-flow-img {
	display: block;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	height: auto;
	border-radius: 10px;
}
#after-bouquet-shop .ab-shop-info + .ab-shop-info { margin-top: 40px; }
#after-bouquet-shop .ab-shop-info > div h3 {
	font-family: var(--ab-mincho);
	margin-top: 0;
	font-size: 24px;
	line-height: 1.4;
	color: var(--ab-text);
}
#after-bouquet-shop .ab-shop-info > div p {
	margin: 0 0 1em;
	line-height: 1.8;
	color: var(--ab-text);
}
#after-bouquet-shop .ab-shop-info > div p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
	#after-bouquet-products .ab-product-grid { grid-template-columns: 1fr; }
}

/* ========== detail page ========== */
.ab-detail__hero{padding:40px 0 0}
.ab-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.ab-detail__gallery{margin:0;width:100%}
.ab-detail__gallery #main-img{margin:0 0 24px;position:relative;padding-top:86%;overflow:hidden}
.ab-detail__gallery #main-img img{box-shadow:0 0 10px #e0e0e0;width:100%;position:absolute;top:0;left:0;height:100%;object-fit:cover;border-radius:2px}
.ab-detail__gallery #sub-img{list-style:none;padding:0;margin:0;display:grid;gap:2.5%}
.ab-detail__gallery #sub-img li{width:auto;margin:0 0 20px;box-shadow:0 0 10px #e0e0e0;cursor:pointer;list-style:none;min-width:0}
.ab-detail__gallery #sub-img li img{display:block;width:100%;height:auto;vertical-align:top}
.ab-detail__gallery #sub-img li.current{box-shadow:0 0 10px #ff4f54}
.ab-detail__gallery--thumbs-2 #sub-img{grid-template-columns:repeat(2,minmax(0,1fr))}
.ab-detail__gallery--thumbs-3 #sub-img{grid-template-columns:repeat(3,minmax(0,1fr))}
.ab-detail__gallery--thumbs-4 #sub-img{grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-detail__gallery--thumbs-5 #sub-img{grid-template-columns:repeat(5,minmax(0,1fr))}
.ab-detail__gallery--thumbs-6 #sub-img{grid-template-columns:repeat(6,minmax(0,1fr))}
.ab-detail__gallery--thumbs-7 #sub-img{grid-template-columns:repeat(7,minmax(0,1fr))}
.ab-detail__gallery--thumbs-8 #sub-img{grid-template-columns:repeat(8,minmax(0,1fr))}
.ab-detail__gallery--single #sub-img{display:none}
.ab-detail__label{font-size:13px;color:#666;margin:0 0 8px}
.ab-detail__title{font-size:22px;line-height:1.5;margin:0 0 20px;color:#231815}
.ab-detail__table{width:100%;border-collapse:collapse;font-size:14px}
.ab-detail__table th,.ab-detail__table td{border:1px solid #e5e5e5;padding:10px 12px;text-align:left;vertical-align:top}
.ab-detail__table th{width:28%;background:#fafafa;font-weight:600;white-space:nowrap}
.ab-detail__price{font-size:28px;font-weight:800;line-height:1.2;color:#b60005}
.ab-detail__expl{margin-top:20px;font-size:14px;line-height:1.9;color:#333}
.ab-detail__rose-note{margin:0;font-size:medium}
.ab-detail__order{margin:28px 0 0}
.ab-detail__order .btn{margin:0}
.ab-notes{padding:40px 3% 56px;border-top:1px solid #e5e5e5;background:#fff}
.ab-notes__inner{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
.ab-notes__title{font-size:18px;margin:0;padding:16px;background:#eae4d1;text-align:center;color:#231815}
.ab-notes__body{font-size:13px;line-height:1.9;color:#444}
.ab-notes__item{margin:0 0 8px}
.ab-howto{padding:48px 3%}
.ab-howto h2{font-size:30px;color:#231815;margin:0 0 30px;text-align:center}
.ab-howto__lead{text-align:center;color:#444;margin:0 0 20px;font-size:14px;line-height:1.8}
.ab-howto__figure{margin:0;padding:0}
.ab-howto__img{display:block;width:100%;max-width:920px;margin:0 auto;height:auto;border:1px solid #e8e8e8;border-radius:2px}
@media only screen and (max-width:768px){
.ab-detail__grid{grid-template-columns:1fr;gap:20px}
.ab-detail__title{font-size:20px}
.ab-detail__price{font-size:24px}
.ab-notes__inner{grid-template-columns:1fr}
}