/* cute-theme.css — 女性向け美容記事の「やさしく可愛い」仕上げ。
   index.html の <style> より後に読み込む前提。ページ背景は指定せず、Dark Reader に任せる。
   色: ローズ #b23a63 / 淡ピンク #fdeaf0 / 線 #f0b3c6 / メイ側 淡ブルー #eaf2fb */

/* ---------- 文字の基本 ---------- */
#main-wrapper #main_section,
#main-wrapper header h1#logo {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif;
}
#main-wrapper #main_section p {
    font-size: 16px;
    line-height: 1.95;
    color: #3a3440;
    padding: 0 1.6em;
    margin: 0 0 1.05em;
    letter-spacing: .02em;
}
#main-wrapper #main_section strong {
    color: #8e2a50;
    background: linear-gradient(transparent 62%, #fde1ea 62%);
    padding: 0 .1em;
}
#main-wrapper #main_section a {
    color: #b8456d;
    text-decoration: underline;
    text-decoration-color: #f0b3c6;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* ---------- h1 タイトル ---------- */
#main-wrapper header h1#logo {
    color: #b23a63;
    text-shadow: none;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .03em;
    padding: 44px 50px 26px;
    margin: 0;
    border-top: 5px solid #f6bcd0;
}
#main-wrapper header h1#logo::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 18px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f08fb0, #f7c7a8);
}

/* ---------- h2 帯見出し ---------- */
#main-wrapper #main_section h2.bg_red {
    background: #fdeaf0;
    background-image: none;
    color: #7a2447;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .03em;
    padding: 14px 18px 14px 20px;
    border-left: 6px solid #d9577f;
    border-radius: 4px 14px 14px 4px;
    margin: 3.4em 0 1.3em;
    overflow: visible;
}

/* ---------- h3 小見出し ---------- */
#main-wrapper #main_section h3.bg_red {
    position: relative;
    background: transparent;
    background-image: none;
    color: #b23a63;
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .03em;
    padding: 4px 4px 10px 28px;
    border-bottom: 2px dotted #f0b3c6;
    margin: 2.8em 0 1.6em;
    overflow: visible;
}
#main-wrapper #main_section h3.bg_red::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .72em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f39ab8;
    box-shadow: 0 0 0 4px #fde1ea;
}

/* ---------- 商品概要（左にバナー、右に説明） ---------- */
#main-wrapper #main_section .intro {
    display: flow-root;
    margin: 1.4em 0 1.2em;
}
#main-wrapper #main_section .intro img {
    float: left;
    width: clamp(240px, 45%, 360px);
    max-width: 45%;
    height: auto;
    margin: 4px 1.6em 1em 0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(178, 58, 99, .14);
}
#main-wrapper #main_section .intro .item_text {
    display: flow-root;
}
#main-wrapper #main_section .intro .item_text p {
    padding: 0;
    line-height: 1.85;
    margin: 0 0 .9em;
}

/* 公式サイトへの案内リンク（同じリンク先の行だけ、押しやすい形に） */
#main-wrapper #main_section p > a[href^="https://fineaid.co.jp/lp"] {
    display: inline-block;
    margin-top: .3em;
    padding: .7em 1.5em;
    border-radius: 999px;
    background: #c2416b;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(194, 65, 107, .22);
}

/* ---------- 会話（口コミの女性 → メイ） ---------- */
#main-wrapper #main_section .speech-wrap.ibiki-conversation {
    gap: 16px;
    margin: 0 0 30px;
}
#main-wrapper #main_section .speech-wrap.ibiki-conversation.sbp-l {
    margin-bottom: 14px;
}
#main-wrapper #main_section .speech-wrap.ibiki-conversation.sbp-r {
    margin-bottom: 38px;
}

/* 顔アイコンと名前 */
#main-wrapper #main_section .reviewer-avatar,
#main-wrapper #main_section .speech-icon-image {
    border: 3px solid #f6cfdc;
    box-shadow: 0 2px 8px rgba(178, 58, 99, .12);
}
#main-wrapper #main_section .sbp-r .speech-icon-image {
    border-color: #c9dcf2;
}
#main-wrapper #main_section .speech-name {
    display: inline-block;
    margin-top: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    background: #fdeaf0;
    color: #a3345c;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}
#main-wrapper #main_section .sbp-r .speech-name {
    background: #e6f0fb;
    color: #2f5687;
}

/* 吹き出し本体：淡い色＋細い線で、ダーク表示でも輪郭が残るようにする */
#main-wrapper #main_section .speech-wrap.ibiki-conversation .speech-balloon {
    padding: 14px 20px;
    border-radius: 20px;
    border: 1.5px solid;
}
#main-wrapper #main_section .speech-wrap.ibiki-conversation.sbp-l .speech-balloon {
    background: #fdeef3;
    border-color: #f2bcd0;
    color: #6b2140;
}
#main-wrapper #main_section .speech-wrap.ibiki-conversation.sbp-r .speech-balloon {
    background: #eef5fc;
    border-color: #c4d8ef;
    color: #2e3442;
}
#main-wrapper #main_section .speech-wrap .speech-balloon p {
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    color: inherit;
}
#main-wrapper #main_section .speech-wrap.sbp-l .speech-balloon p {
    font-weight: 700;
}

/* しっぽ：::before が線、::after が中の色 */
#main-wrapper #main_section .speech-wrap.ibiki-conversation .speech-balloon::before,
#main-wrapper #main_section .speech-wrap.ibiki-conversation .speech-balloon::after {
    top: 20px;
}
#main-wrapper #main_section .speech-wrap.ibiki-conversation.sbp-l .speech-balloon::before {
    left: -13px;
    border-width: 8px 13px 8px 0;
    border-color: transparent #f2bcd0 transparent transparent;
}
#main-wrapper #main_section .speech-wrap.ibiki-conversation.sbp-l .speech-balloon::after {
    left: -10px;
    top: 21.5px;
    border-width: 6.5px 11px 6.5px 0;
    border-color: transparent #fdeef3 transparent transparent;
}
#main-wrapper #main_section .speech-wrap.ibiki-conversation.sbp-r .speech-balloon::before {
    right: -13px;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #c4d8ef;
}
#main-wrapper #main_section .speech-wrap.ibiki-conversation.sbp-r .speech-balloon::after {
    right: -10px;
    top: 21.5px;
    border-width: 6.5px 0 6.5px 11px;
    border-color: transparent transparent transparent #eef5fc;
}

/* ---------- スマホ（〜600px、390px幅を想定） ---------- */
@media (max-width: 600px) {
    #main-wrapper header h1#logo {
        font-size: 21px;
        line-height: 1.6;
        padding: 30px 18px 18px;
    }
    #main-wrapper header h1#logo::after {
        width: 56px;
        margin-top: 14px;
    }
    #main-wrapper #main_section {
        padding: 8px 18px 32px;
    }
    #main-wrapper #main_section p {
        font-size: 15.5px;
        line-height: 1.9;
        padding: 0 .25em;
    }
    #main-wrapper #main_section h2.bg_red {
        font-size: 17px;
        padding: 12px 14px 12px 15px;
        border-left-width: 5px;
        margin: 2.8em 0 1.1em;
    }
    #main-wrapper #main_section h3.bg_red {
        font-size: 16px;
        padding-left: 26px;
        margin: 2.4em 0 1.3em;
    }
    #main-wrapper #main_section .intro img {
        float: none;
        display: block;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 1.2em;
        border-radius: 12px;
    }
    #main-wrapper #main_section .intro .item_text p {
        padding: 0 .25em;
    }
    #main-wrapper #main_section p > a[href^="https://fineaid.co.jp/lp"] {
        display: block;
        text-align: center;
        padding: .75em 1em;
    }
    #main-wrapper #main_section .speech-wrap.ibiki-conversation {
        gap: 10px;
    }
    #main-wrapper #main_section .speech-wrap.ibiki-conversation .speech-balloon {
        padding: 11px 14px;
        border-radius: 16px;
    }
    #main-wrapper #main_section .speech-wrap .speech-balloon p {
        font-size: 15px;
        line-height: 1.8;
    }
    #main-wrapper #main_section .speech-name {
        font-size: 11px;
        padding: 0 7px;
    }
}

/* ASPのバナーは角を切らず、原稿全体を表示する。 */
#main-wrapper #main_section .intro img { border-radius: 0; }

/* お買い得バナーは実画像の幅を超えて引き伸ばさない。 */
#main-wrapper #main_section .intro.sale-offer img { max-width: 320px; }

/* サイト名：記事タイトルとは別に示す。 */
#main-wrapper header .site-brand { padding: 18px 50px 0; color: #8a3453; font-size: 15px; line-height: 1.6; font-weight: 700; }
#main-wrapper header h1#logo { padding-top: 14px; }
@media(max-width:600px) { #main-wrapper header .site-brand { padding: 16px 18px 0; font-size: 14px; } #main-wrapper header h1#logo { padding-top: 12px; } }

#main-wrapper #main_section p.review-note { font-size: 13px; line-height: 1.7; }