/**
 * 恋リアポータル エディターブロックスタイル
 * 女子高生向けのかわいいデザインパターン
 *
 * @package KoiRiaPortal
 */

/* =============================================
   A. 見出しスタイル
   ============================================= */

/* リボン型見出し */
.heading--ribbon {
    position: relative;
    display: inline-block;
    padding: 0.5em 1.5em 0.5em 1.8em;
    background: linear-gradient(135deg, #FFB6D5, #E8619A);
    color: #fff;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    border-radius: 0 8px 8px 0;
    margin-left: 0;
    margin-bottom: 1.2em;
    box-shadow: 0 3px 10px rgba(232, 97, 154, 0.25);
    line-height: 1.6;
}

.heading--ribbon::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 50% 0;
    border-color: transparent #fff transparent transparent;
}

.heading--ribbon::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50% 16px 0 0;
    border-color: transparent #fff transparent transparent;
}

/* ハートアイコン付き見出し */
.heading--heart {
    position: relative;
    padding: 0.5em 0.5em 0.5em 2.2em;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    color: #E8619A;
    border-bottom: 3px solid #FFB6D5;
    margin-bottom: 1.2em;
    line-height: 1.6;
}

.heading--heart::before {
    content: '\2665';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    color: #E8619A;
    line-height: 1;
}

/* グラデーション背景見出し */
.heading--gradient {
    padding: 0.6em 1.2em;
    background: linear-gradient(135deg, #FFB6D5 0%, #C084FC 50%, #93C5FD 100%);
    color: #fff;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    border-radius: 12px;
    margin-bottom: 1.2em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 14px rgba(192, 132, 252, 0.25);
    line-height: 1.6;
}

/* 吹き出し型見出し */
.heading--bubble {
    position: relative;
    padding: 0.6em 1.2em;
    background: #FFF0F5;
    color: #E8619A;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    border: 2px solid #FFB6D5;
    border-radius: 16px;
    margin-bottom: 1.8em;
    text-align: center;
    line-height: 1.6;
}

.heading--bubble::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 10px 0;
    border-color: #FFF0F5 transparent transparent;
}

.heading--bubble::before {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 12px 0;
    border-color: #FFB6D5 transparent transparent;
}

/* =============================================
   B. ボックスデザイン
   ============================================= */

/* ピンクボーダー丸角ボックス */
.box--pink {
    border: 2px solid #FFB6D5;
    border-radius: 14px;
    padding: 1.2em 1.4em;
    margin: 1.5em 0;
    background: #FFFAFC;
    box-shadow: 0 2px 8px rgba(255, 182, 213, 0.15);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.8;
}

/* POINTラベル付きボックス */
.box--point {
    position: relative;
    border: 2px solid #E8619A;
    border-radius: 14px;
    padding: 2.4em 1.4em 1.2em;
    margin: 2em 0 1.5em;
    background: #FFF5F9;
    box-shadow: 0 2px 10px rgba(232, 97, 154, 0.12);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.8;
}

.box--point::before {
    content: '\2605 POINT';
    position: absolute;
    top: -0.85em;
    left: 1.2em;
    display: inline-block;
    padding: 0.15em 1em;
    background: linear-gradient(135deg, #E8619A, #C084FC);
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: 0.05em;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* 注意ラベル付きボックス */
.box--caution {
    position: relative;
    border: 2px solid #F59E0B;
    border-radius: 14px;
    padding: 2.4em 1.4em 1.2em;
    margin: 2em 0 1.5em;
    background: #FFFBF0;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.12);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.8;
}

.box--caution::before {
    content: '\26A0 注意';
    position: absolute;
    top: -0.85em;
    left: 1.2em;
    display: inline-block;
    padding: 0.15em 1em;
    background: linear-gradient(135deg, #F59E0B, #FB923C);
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: 0.05em;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* チェックリスト風ボックス */
.box--check {
    border: 2px solid #FFB6D5;
    border-radius: 14px;
    padding: 1.2em 1.4em;
    margin: 1.5em 0;
    background: #FFF8FB;
    box-shadow: 0 2px 8px rgba(255, 182, 213, 0.15);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.8;
}

.box--check ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.box--check ul li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 0.5em;
}

.box--check ul li::before {
    content: '\2714';
    position: absolute;
    left: 0;
    top: 0;
    color: #E8619A;
    font-size: 1.1em;
    font-weight: 700;
}

/* おしゃれ引用ボックス */
.box--quote {
    position: relative;
    border: none;
    border-left: 4px solid #C084FC;
    border-radius: 0 14px 14px 0;
    padding: 1.8em 1.4em 1.2em 2.8em;
    margin: 1.5em 0;
    background: linear-gradient(135deg, #FAF5FF, #FFF0F5);
    box-shadow: 0 2px 10px rgba(192, 132, 252, 0.12);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-style: normal;
    line-height: 1.8;
    color: #6B21A8;
}

.box--quote::before {
    content: '\201C';
    position: absolute;
    top: 0.1em;
    left: 0.3em;
    font-size: 3em;
    color: #C084FC;
    font-family: Georgia, serif;
    line-height: 1;
    opacity: 0.5;
}

/* ランキング風ボックス */
.box--ranking {
    counter-reset: ranking;
    border: 2px solid #FFB6D5;
    border-radius: 14px;
    padding: 1.2em 1.4em;
    margin: 1.5em 0;
    background: #FFFAFC;
    box-shadow: 0 2px 8px rgba(255, 182, 213, 0.15);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.8;
}

.box--ranking ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
    counter-reset: ranking;
}

.box--ranking ol li {
    position: relative;
    padding-left: 2.6em;
    margin-bottom: 0.8em;
    counter-increment: ranking;
}

.box--ranking ol li::before {
    content: counter(ranking);
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 1.8em;
    height: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E8619A, #C084FC);
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
}

.box--ranking ol li:first-child::before {
    background: linear-gradient(135deg, #F59E0B, #FBBF24);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.box--ranking ol li:nth-child(2)::before {
    background: linear-gradient(135deg, #9CA3AF, #D1D5DB);
}

.box--ranking ol li:nth-child(3)::before {
    background: linear-gradient(135deg, #CD7F32, #DEB887);
}

/* =============================================
   C. フキダシ
   ============================================= */

/* 左からのフキダシ */
.balloon--left {
    position: relative;
    display: inline-block;
    max-width: 85%;
    padding: 1em 1.4em;
    background: #FFF0F5;
    border: 2px solid #FFB6D5;
    border-radius: 16px 16px 16px 4px;
    margin: 1em 0 1em 1.2em;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.7;
    box-shadow: 0 2px 8px rgba(255, 182, 213, 0.15);
}

.balloon--left::before {
    content: '';
    position: absolute;
    left: -12px;
    bottom: 12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 0;
    border-color: transparent #FFB6D5 transparent transparent;
}

.balloon--left::after {
    content: '';
    position: absolute;
    left: -8px;
    bottom: 14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #FFF0F5 transparent transparent;
}

/* 右からのフキダシ */
.balloon--right {
    position: relative;
    display: inline-block;
    max-width: 85%;
    padding: 1em 1.4em;
    background: #F5F0FF;
    border: 2px solid #C084FC;
    border-radius: 16px 16px 4px 16px;
    margin: 1em 1.2em 1em auto;
    margin-left: auto;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.7;
    box-shadow: 0 2px 8px rgba(192, 132, 252, 0.15);
}

.balloon--right::before {
    content: '';
    position: absolute;
    right: -12px;
    bottom: 12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: #C084FC transparent transparent transparent;
}

.balloon--right::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: 14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: #F5F0FF transparent transparent transparent;
}

/* 考え中フキダシ */
.balloon--think {
    position: relative;
    display: inline-block;
    max-width: 85%;
    padding: 1em 1.6em;
    background: #F0F9FF;
    border: 2px solid #93C5FD;
    border-radius: 24px;
    margin: 1em 0 1.5em 2em;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    line-height: 1.7;
    box-shadow: 0 2px 8px rgba(147, 197, 253, 0.15);
}

.balloon--think::before {
    content: '';
    position: absolute;
    left: 12px;
    bottom: -18px;
    width: 14px;
    height: 14px;
    background: #F0F9FF;
    border: 2px solid #93C5FD;
    border-radius: 50%;
}

.balloon--think::after {
    content: '';
    position: absolute;
    left: 4px;
    bottom: -30px;
    width: 8px;
    height: 8px;
    background: #F0F9FF;
    border: 2px solid #93C5FD;
    border-radius: 50%;
}

/* =============================================
   D. マーカー / 装飾
   ============================================= */

/* ピンクマーカー */
.marker--pink {
    background: linear-gradient(transparent 60%, rgba(255, 182, 213, 0.4) 60%);
    padding: 0 0.2em;
}

/* 黄色マーカー */
.marker--yellow {
    background: linear-gradient(transparent 60%, rgba(253, 224, 71, 0.5) 60%);
    padding: 0 0.2em;
}

/* グラデーションマーカー */
.marker--gradient {
    background: linear-gradient(
        transparent 60%,
        rgba(255, 182, 213, 0.4) 60%,
        rgba(192, 132, 252, 0.3) 100%
    );
    padding: 0 0.2em;
}

/* 大きめテキスト */
.text--large {
    font-size: 1.25em;
    font-weight: 500;
    line-height: 1.8;
}

/* 小さめテキスト（注釈用） */
.text--small {
    font-size: 0.85em;
    color: #9CA3AF;
    line-height: 1.7;
}

/* =============================================
   レスポンシブ
   ============================================= */

@media (max-width: 768px) {
    .heading--ribbon {
        display: block;
        font-size: 1em;
        padding: 0.5em 1em 0.5em 1.6em;
    }

    .heading--gradient {
        font-size: 1em;
        padding: 0.5em 1em;
        border-radius: 10px;
    }

    .heading--bubble {
        font-size: 1em;
    }

    .box--pink,
    .box--point,
    .box--caution,
    .box--check,
    .box--quote,
    .box--ranking {
        padding: 1em;
        margin: 1em 0;
        border-radius: 10px;
    }

    .box--point,
    .box--caution {
        padding-top: 2em;
    }

    .balloon--left,
    .balloon--right,
    .balloon--think {
        max-width: 92%;
        padding: 0.8em 1em;
        font-size: 0.95em;
    }

    .balloon--right {
        margin-right: 0.5em;
    }

    .balloon--left {
        margin-left: 0.8em;
    }

    .balloon--think {
        margin-left: 1em;
    }
}