/* ============================================================
 * concern（こんなきもののお悩み、ありませんか？）
 *
 * Figma PC: 1240 x 1277 / SP: 750 x 2243。
 * 上半分は吹き出しが自由配置されたレイアウトなので、
 * ステージ（帯より上の領域）内で絶対配置する。
 * 下半分は金色の帯で、左にコピー・右に写真。
 * ============================================================ */

.hm-rp-concern {
    position: relative;
    /* 和紙テクスチャ。原寸比 1240:1166 を width 100% で保ったまま縦に繰り返す */
    background-image: url(../img/washi.jpg);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: repeat-y;
}

/* ---------- 帯より上の自由配置エリア ---------- */
.hm-rp-concern__stage {
    position: relative;
    width: 100%;
    height: calc(874 * var(--u));
    margin: 0;
}

/* 見出し「こんな／きもののお悩み、／ありませんか？」 */
.hm-rp-concern .hm-rp-concern__title {
    position: absolute;
    left: calc(342 * var(--u));
    top: calc(285 * var(--u));
    width: calc(553 * var(--u));
    margin: 0;
    color: var(--rp-gold);
    font-size: calc(42 * var(--u));
    line-height: 1.4286;
    letter-spacing: calc(2.1 * var(--u));
    text-align: center;
}

/* ---------- 吹き出し ---------- */
.hm-rp-concern .hm-rp-bubble {
    position: absolute;
    margin: 0;
    /* 枠線の疑似要素を文字の背面に置くための独立した重ね順。
     * z-index は装飾の小さい吹き出し（0）より前に出すため。 */
    isolation: isolate;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* 吹き出しの下に出るしっぽのぶん、文字を上に寄せる */
    padding-bottom: calc(19 * var(--u));
    color: var(--rp-ink);
    font-family: var(--rp-mincho);
    font-weight: 700;
    font-size: calc(20 * var(--u));
    line-height: 1.45;
    letter-spacing: calc(-0.4 * var(--u));
    text-align: center;
    white-space: nowrap;
}
/* 枠線は SVG。左右反転する吹き出しがあるため疑似要素に敷く */
.hm-rp-concern .hm-rp-bubble::before,
.hm-rp-concern__deco span {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.hm-rp-concern .hm-rp-bubble::before {
    z-index: -1;
}
.hm-rp-concern .hm-rp-bubble--1 {
    left: calc(517 * var(--u));
    top: calc(124 * var(--u));
    width: calc(339.01 * var(--u));
    height: calc(142.89 * var(--u));
}
.hm-rp-concern .hm-rp-bubble--1::before {
    background-image: url(../svg/bubble-1.svg);
}
.hm-rp-concern .hm-rp-bubble--2 {
    left: calc(78 * var(--u));
    top: calc(274 * var(--u));
    width: calc(339 * var(--u));
    height: calc(142.89 * var(--u));
}
.hm-rp-concern .hm-rp-bubble--2::before {
    background-image: url(../svg/bubble-2.svg);
}
.hm-rp-concern .hm-rp-bubble--3 {
    left: calc(569 * var(--u));
    top: calc(532 * var(--u));
    width: calc(380 * var(--u));
    height: calc(144.89 * var(--u));
}
.hm-rp-concern .hm-rp-bubble--3::before {
    background-image: url(../svg/bubble-3.svg);
}
.hm-rp-concern .hm-rp-bubble--4 {
    left: calc(808 * var(--u));
    top: calc(310 * var(--u));
    width: calc(282 * var(--u));
    height: calc(144.89 * var(--u));
}
.hm-rp-concern .hm-rp-bubble--4::before {
    background-image: url(../svg/bubble-4.svg);
}
.hm-rp-concern .hm-rp-bubble--5 {
    left: calc(215 * var(--u));
    top: calc(475 * var(--u));
    width: calc(280.01 * var(--u));
    height: calc(142.89 * var(--u));
}
.hm-rp-concern .hm-rp-bubble--5::before {
    background-image: url(../svg/bubble-5.svg);
    transform: scaleX(-1);
}

/* ---------- 文字の入らない小さい吹き出し（装飾） ---------- */
.hm-rp-concern__deco {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
}
.hm-rp-concern__deco span {
    display: block;
    inset: auto;
}
.hm-rp-concern__deco span:nth-child(1) {
    left: calc(1024 * var(--u));
    top: calc(120 * var(--u));
    width: calc(120 * var(--u));
    height: calc(92.89 * var(--u));
    background-image: url(../svg/deco-1.svg);
    transform: scaleX(-1);
}
.hm-rp-concern__deco span:nth-child(2) {
    left: calc(350.01 * var(--u));
    top: calc(209 * var(--u));
    width: calc(140.01 * var(--u));
    height: calc(102.89 * var(--u));
    background-image: url(../svg/deco-2.svg);
    transform: scaleX(-1);
}
.hm-rp-concern__deco span:nth-child(3) {
    left: calc(864 * var(--u));
    top: calc(620 * var(--u));
    width: calc(120.01 * var(--u));
    height: calc(92.89 * var(--u));
    background-image: url(../svg/deco-3.svg);
}
.hm-rp-concern__deco span:nth-child(4) {
    left: calc(1028 * var(--u));
    top: calc(382 * var(--u));
    width: calc(120.01 * var(--u));
    height: calc(92.89 * var(--u));
    background-image: url(../svg/deco-3.svg);
}
.hm-rp-concern__deco span:nth-child(5) {
    left: calc(565.01 * var(--u));
    top: calc(195 * var(--u));
    width: calc(140.01 * var(--u));
    height: calc(102.89 * var(--u));
    background-image: url(../svg/deco-2.svg);
    transform: scaleX(-1);
}
.hm-rp-concern__deco span:nth-child(6) {
    left: calc(155 * var(--u));
    top: calc(546 * var(--u));
    width: calc(120 * var(--u));
    height: calc(92.89 * var(--u));
    background-image: url(../svg/deco-4.svg);
}
.hm-rp-concern__deco span:nth-child(7) {
    left: calc(733 * var(--u));
    top: calc(485 * var(--u));
    width: calc(120 * var(--u));
    height: calc(92.89 * var(--u));
    background-image: url(../svg/deco-4.svg);
}

/* ---------- 帯の上の下向き矢印 ---------- */
.hm-rp-concern__arrow {
    position: absolute;
    left: calc(593 * var(--u));
    top: calc(763 * var(--u));
    width: calc(49.36 * var(--u));
    height: calc(21.46 * var(--u));
    background: url(../svg/arrow-down.svg) no-repeat center / 100% 100%;
}

/* ---------- 金色の帯 ---------- */
.hm-rp-concern__band {
    position: relative;
    width: 100%;
    height: calc(403 * var(--u));
    margin: 0;
    background: var(--rp-gold-grad);
}
.hm-rp-concern__band-inner {
    position: relative;
    width: calc(1240 * var(--u));
    max-width: 100%;
    height: 100%;
    margin-inline: auto;
}
.hm-rp-concern .hm-rp-concern__lead {
    position: absolute;
    left: calc(133 * var(--u));
    top: calc(85 * var(--u));
    margin: 0;
    color: var(--rp-ink);
    font-size: calc(42 * var(--u));
    line-height: 1.4286;
    letter-spacing: calc(2.1 * var(--u));
    /* Figma では各行の下に白い罫線が引かれている。行ごとに追従する下線で再現する */
    text-decoration: underline;
    text-decoration-color: var(--rp-white);
    text-decoration-thickness: calc(2 * var(--u));
    text-underline-offset: calc(12 * var(--u));
}
.hm-rp-concern .hm-rp-concern__note {
    position: absolute;
    left: calc(133 * var(--u));
    top: calc(175 * var(--u));
    margin: 0;
    color: var(--rp-ink);
    font-family: var(--rp-mincho);
    font-weight: 700;
    font-size: calc(25 * var(--u));
    line-height: 1.44;
    letter-spacing: calc(1.25 * var(--u));
}
.hm-rp-concern .hm-rp-concern__photo {
    position: absolute;
    left: calc(764 * var(--u));
    bottom: 0;
    width: calc(386 * var(--u));
    height: calc(467 * var(--u));
    margin: 0;
}
.hm-rp-concern .hm-rp-concern__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
 * SP
 * ============================================================ */
@media (max-width: 768px) {
    .hm-rp-concern__stage {
        height: calc(1879 * var(--u));
    }
    .hm-rp-concern .hm-rp-concern__title {
        left: calc(98 * var(--u));
        top: calc(100 * var(--u));
        width: calc(553 * var(--u));
        font-size: calc(63 * var(--u));
        line-height: 1.4444;
        letter-spacing: calc(3.15 * var(--u));
    }

    .hm-rp-concern .hm-rp-bubble {
        padding-bottom: calc(32 * var(--u));
        font-size: calc(30 * var(--u));
        line-height: 1.4333;
        letter-spacing: calc(-0.6 * var(--u));
    }
    .hm-rp-concern .hm-rp-bubble--1 {
        left: calc(205.5 * var(--u));
        top: calc(427 * var(--u));
        width: calc(508.515 * var(--u));
        height: calc(214.335 * var(--u));
    }
    .hm-rp-concern .hm-rp-bubble--2 {
        left: calc(38 * var(--u));
        top: calc(700 * var(--u));
        width: calc(508.5 * var(--u));
        height: calc(214.335 * var(--u));
    }
    .hm-rp-concern .hm-rp-bubble--3 {
        left: calc(137.5 * var(--u));
        top: calc(1453 * var(--u));
        width: calc(570 * var(--u));
        height: calc(217.335 * var(--u));
    }
    .hm-rp-concern .hm-rp-bubble--4 {
        left: calc(289.5 * var(--u));
        top: calc(984 * var(--u));
        width: calc(423 * var(--u));
        height: calc(217.335 * var(--u));
    }
    .hm-rp-concern .hm-rp-bubble--5 {
        left: calc(30.5 * var(--u));
        top: calc(1200 * var(--u));
        width: calc(420.015 * var(--u));
        height: calc(214.335 * var(--u));
    }

    .hm-rp-concern__deco span:nth-child(1) {
        left: calc(15 * var(--u));
        top: calc(847 * var(--u));
        width: calc(180 * var(--u));
        height: calc(139.335 * var(--u));
        background-image: url(../svg/deco-2.svg);
        transform: none;
    }
    .hm-rp-concern__deco span:nth-child(2) {
        left: calc(254.015 * var(--u));
        top: calc(511 * var(--u));
        width: calc(210.015 * var(--u));
        height: calc(154.335 * var(--u));
        background-image: url(../svg/deco-3.svg);
        transform: scaleX(-1);
    }
    .hm-rp-concern__deco span:nth-child(3) {
        left: calc(402.5 * var(--u));
        top: calc(1292.5 * var(--u));
        width: calc(180.015 * var(--u));
        height: calc(139.335 * var(--u));
        background-image: url(../svg/deco-4.svg);
    }
    .hm-rp-concern__deco span:nth-child(4) {
        left: calc(499 * var(--u));
        top: calc(897 * var(--u));
        width: calc(180.015 * var(--u));
        height: calc(139.335 * var(--u));
        background-image: url(../svg/deco-4.svg);
    }
    .hm-rp-concern__deco span:nth-child(5) {
        left: calc(681.015 * var(--u));
        top: calc(653 * var(--u));
        width: calc(210.015 * var(--u));
        height: calc(154.335 * var(--u));
        background-image: url(../svg/deco-3.svg);
        transform: scaleX(-1);
    }
    .hm-rp-concern__deco span:nth-child(6) {
        left: calc(-33 * var(--u));
        top: calc(1145 * var(--u));
        width: calc(180 * var(--u));
        height: calc(139.335 * var(--u));
        background-image: url(../svg/deco-2.svg);
    }
    .hm-rp-concern__deco span:nth-child(7) {
        left: calc(186 * var(--u));
        top: calc(951 * var(--u));
        width: calc(180 * var(--u));
        height: calc(139.335 * var(--u));
        background-image: url(../svg/deco-2.svg);
    }

    .hm-rp-concern__arrow {
        left: calc(338 * var(--u));
        top: calc(1767 * var(--u));
        width: calc(74.04 * var(--u));
        height: calc(32.19 * var(--u));
    }

    .hm-rp-concern__band {
        height: calc(364 * var(--u));
    }
    .hm-rp-concern__band-inner {
        width: calc(750 * var(--u));
    }
    .hm-rp-concern .hm-rp-concern__lead {
        left: calc(33 * var(--u));
        top: calc(40 * var(--u));
    }
    .hm-rp-concern .hm-rp-concern__note {
        left: calc(33 * var(--u));
        top: calc(180 * var(--u));
    }
    .hm-rp-concern .hm-rp-concern__photo {
        left: calc(461 * var(--u));
        width: calc(318 * var(--u));
        height: calc(384 * var(--u));
    }
}