/* ============================================================
 * service（きものリプランニングの 3つのサービス）
 *
 * service-intro / reborn / reuse / recycle の 4 セクション。
 *
 * Figma では y=2044〜4731（SP は 3171〜8233）の全体に紫のグラデーションが
 * 1 回だけかかっている。セクションごとに同じグラデーションを敷くと段差が出るため、
 * #8763a3 → #725589 を全体の高さで線形補間して、各セクションの区間の
 * 開始色・終了色を求めてから敷いている。
 * ============================================================ */

/* ============================================================
 * service-intro（見出し＋リード文）
 * Figma PC: y 2044〜2500 / SP: y 3171〜3902
 * ============================================================ */
.hm-rp-service-intro {
    height: calc(456 * var(--u));
    background: linear-gradient(180deg, #8763a3 0%, #83619f 100%);
}
/* 罫はエディタ上でカスタム HTML のラッパーに包まれ直下の子でなくなるため、名指しもする */
.hm-rp-service-intro > *,
.hm-rp-service-intro .hm-rp-service-intro__rule {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
}
.hm-rp-service-intro .hm-rp-service-intro__en {
    top: calc(100 * var(--u));
    color: var(--rp-gold-light);
    font-family: var(--rp-en);
    font-weight: 400;
    font-size: calc(20 * var(--u));
    line-height: 1.25;
    letter-spacing: calc(2 * var(--u));
    white-space: nowrap;
}
.hm-rp-service-intro .hm-rp-service-intro__title {
    top: calc(142 * var(--u));
    width: calc(345 * var(--u));
    color: var(--rp-gold-light);
    font-size: calc(30 * var(--u));
    line-height: 1.4333;
    letter-spacing: calc(1.5 * var(--u));
    /* 字送りのぶん Figma のボックス幅ぎりぎりになる。改行は br だけで決める */
    white-space: nowrap;
}
/* 見出し下の三重線（Figma 216:61 / 270:133） */
.hm-rp-service-intro__rule {
    top: calc(243 * var(--u));
    width: calc(80 * var(--u));
    height: calc(14 * var(--u));
    background: url(../svg/service-rule.svg) no-repeat center / 100% 100%;
}
.hm-rp-service-intro .hm-rp-service-intro__lead {
    top: calc(296 * var(--u));
    color: var(--rp-white);
    font-size: calc(16 * var(--u));
    line-height: calc(29 * var(--u));
    letter-spacing: calc(-0.32 * var(--u));
}

/* ============================================================
 * reborn / reuse / recycle 共通
 *
 * 写真の帯（高さ 377）をセクション上端から 50 下げて敷き、
 * 装飾の英字・アイコンは帯の上端にまたがって重ねる。
 * テキストパネルは PC では帯の外（下）ではなく帯の中に重なる位置にあり、
 * 紫のベール（乗算）で敷いた側へ置く。SP ではベールがなく、帯の下に置く。
 * ============================================================ */
.hm-rp-svc__panel {
    position: absolute;
    left: 0;
    top: calc(50 * var(--u));
    width: 100%;
    height: calc(377 * var(--u));
    overflow: hidden;
    /* ベールの mix-blend-mode を写真の中だけに閉じる */
    isolation: isolate;
}
.hm-rp-svc .hm-rp-svc__photo {
    position: absolute;
    margin: 0;
}
.hm-rp-svc .hm-rp-svc__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 文字側を沈ませる紫のベール */
.hm-rp-svc__veil {
    position: absolute;
    top: 0;
    width: calc(728 * var(--u));
    height: 100%;
    background: linear-gradient(90deg, rgba(135, 99, 163, 0) 6.484%, rgba(114, 85, 137, .85) 47.481%);
    mix-blend-mode: multiply;
}
/* 帯の上下の金の罫。上辺は英字を避けて短い方と長い方に分かれる */
.hm-rp-svc__rule {
    position: absolute;
    height: calc(2 * var(--u));
    background: var(--rp-gold-light);
}
.hm-rp-svc__rule--a,
.hm-rp-svc__rule--b {
    top: 0;
}
.hm-rp-svc__rule--c {
    top: calc(375 * var(--u));
    left: 0;
    width: calc(1240 * var(--u));
}

.hm-rp-svc .hm-rp-svc__en {
    position: absolute;
    top: 0;
    margin: 0;
    color: var(--rp-gold-light);
    font-family: var(--rp-en);
    font-weight: 400;
    font-size: calc(80 * var(--u));
    line-height: calc(99 * var(--u));
    letter-spacing: calc(8 * var(--u));
    white-space: nowrap;
    /* 写真や紫地の上に乗るため、Figma では装飾英字とアイコンにだけ影が付く
     * （Service の英字や和文見出しには付かない） */
    text-shadow: 0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .25);
}
.hm-rp-svc__icon {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .25));
}

.hm-rp-svc__txt {
    position: absolute;
    top: calc(120 * var(--u));
}
.hm-rp-svc .hm-rp-svc__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: calc(33 * var(--u));
    padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(5 * var(--u)) calc(9 * var(--u));
    margin: 0;
    background: var(--rp-gold-light);
    color: var(--rp-ink);
    font-family: var(--rp-mincho);
    font-weight: 700;
    font-size: calc(18 * var(--u));
    line-height: normal;
    letter-spacing: calc(0.9 * var(--u));
    white-space: nowrap;
}
.hm-rp-svc .hm-rp-svc__title {
    margin: calc(10 * var(--u)) 0 0;
    color: var(--rp-white);
    font-size: calc(28 * var(--u));
    line-height: calc(37 * var(--u));
    letter-spacing: calc(-0.56 * var(--u));
}
.hm-rp-svc .hm-rp-svc__body {
    margin: calc(13 * var(--u)) 0 0;
    color: var(--rp-white);
    font-size: calc(16 * var(--u));
    line-height: calc(29 * var(--u));
    letter-spacing: calc(-0.32 * var(--u));
}

/* ---------- reborn（Figma PC: y 2500〜2977 / SP: y 3902〜4850） ---------- */
.hm-rp-svc--reborn {
    height: calc(477 * var(--u));
    background: linear-gradient(180deg, #83619f 0%, #805e9a 100%);
}
.hm-rp-svc--reborn .hm-rp-svc__photo {
    left: calc(-31.84 * var(--u));
    top: calc(-181.47 * var(--u));
    width: calc(1302.678 * var(--u));
    height: calc(867.947 * var(--u));
}
.hm-rp-svc--reborn .hm-rp-svc__veil {
    left: calc(511 * var(--u));
}
.hm-rp-svc--reborn .hm-rp-svc__rule--a {
    left: calc(-11 * var(--u));
    width: calc(31 * var(--u));
}
.hm-rp-svc--reborn .hm-rp-svc__rule--b {
    left: calc(496 * var(--u));
    width: calc(744 * var(--u));
}
.hm-rp-svc--reborn .hm-rp-svc__en {
    left: calc(125 * var(--u));
}
.hm-rp-svc--reborn .hm-rp-svc__icon {
    left: calc(40 * var(--u));
    top: calc(17 * var(--u));
    width: calc(69.6782 * var(--u));
    height: calc(66.7827 * var(--u));
    background-image: url(../svg/reborn-icon.svg);
}
.hm-rp-svc--reborn .hm-rp-svc__txt {
    left: calc(887 * var(--u));
}

/* ---------- reuse（Figma PC: y 2977〜3454 / SP: y 4850〜5748） ---------- */
.hm-rp-svc--reuse {
    height: calc(477 * var(--u));
    background: linear-gradient(180deg, #805e9a 0%, #7c5c95 100%);
}
.hm-rp-svc--reuse .hm-rp-svc__photo {
    left: calc(-65 * var(--u));
    top: calc(-408 * var(--u));
    width: calc(1311 * var(--u));
    height: calc(983 * var(--u));
}
/* テキストが左側なのでベールを左右反転して敷く */
.hm-rp-svc--reuse .hm-rp-svc__veil {
    left: 0;
    transform: scaleX(-1);
}
.hm-rp-svc--reuse .hm-rp-svc__rule--a {
    left: calc(1219 * var(--u));
    width: calc(20 * var(--u));
}
.hm-rp-svc--reuse .hm-rp-svc__rule--b {
    left: calc(1 * var(--u));
    width: calc(811 * var(--u));
}
.hm-rp-svc--reuse .hm-rp-svc__en {
    left: calc(919 * var(--u));
}
.hm-rp-svc--reuse .hm-rp-svc__icon {
    left: calc(834 * var(--u));
    top: calc(17 * var(--u));
    width: calc(66.684 * var(--u));
    height: calc(66.783 * var(--u));
    background-image: url(../svg/reuse-icon.svg);
}
.hm-rp-svc--reuse .hm-rp-svc__txt {
    left: calc(40 * var(--u));
}
/* 見出しが長いぶんだけ 1 段小さい */
.hm-rp-svc--reuse .hm-rp-svc__title {
    font-size: calc(24 * var(--u));
    letter-spacing: calc(-0.48 * var(--u));
}

/* ---------- recycle（Figma PC: y 3454〜3961 / SP: y 5748〜6666） ---------- */
.hm-rp-svc--recycle {
    height: calc(507 * var(--u));
    background: linear-gradient(180deg, #7c5c95 0%, #785990 100%);
}
.hm-rp-svc--recycle .hm-rp-svc__photo {
    left: 0;
    top: calc(-345 * var(--u));
    width: calc(1241 * var(--u));
    height: calc(931 * var(--u));
}
.hm-rp-svc--recycle .hm-rp-svc__veil {
    left: calc(514 * var(--u));
}
.hm-rp-svc--recycle .hm-rp-svc__rule--a {
    left: 0;
    width: calc(20 * var(--u));
}
.hm-rp-svc--recycle .hm-rp-svc__rule--b {
    left: calc(514 * var(--u));
    width: calc(726 * var(--u));
}
.hm-rp-svc--recycle .hm-rp-svc__en {
    left: calc(125 * var(--u));
}
.hm-rp-svc--recycle .hm-rp-svc__icon {
    left: calc(40 * var(--u));
    top: calc(14 * var(--u));
    width: calc(68.963 * var(--u));
    height: calc(71.916 * var(--u));
    background-image: url(../svg/recycle-icon.svg);
}
.hm-rp-svc--recycle .hm-rp-svc__txt {
    left: calc(887 * var(--u));
}

/* ============================================================
 * SP
 * ============================================================ */
@media (max-width: 768px) {
    .hm-rp-service-intro {
        height: calc(731 * var(--u));
    }
    .hm-rp-service-intro .hm-rp-service-intro__en {
        top: calc(100 * var(--u));
        color: var(--rp-gold);
        font-size: calc(30 * var(--u));
        letter-spacing: calc(3 * var(--u));
    }
    .hm-rp-service-intro .hm-rp-service-intro__title {
        top: calc(149 * var(--u));
        width: calc(597 * var(--u));
        color: var(--rp-gold);
        font-size: calc(45 * var(--u));
        line-height: 1.45;
        letter-spacing: calc(2.25 * var(--u));
    }
    .hm-rp-service-intro__rule {
        top: calc(298 * var(--u));
        width: calc(100 * var(--u));
        height: calc(17 * var(--u));
    }
    .hm-rp-service-intro .hm-rp-service-intro__lead {
        top: calc(354 * var(--u));
        width: calc(687 * var(--u));
        font-size: calc(28 * var(--u));
        line-height: calc(50 * var(--u));
        letter-spacing: calc(-0.56 * var(--u));
    }

    /* SP では写真の上に文字を重ねないのでベールを使わない */
    .hm-rp-svc__veil {
        display: none;
    }
    .hm-rp-svc__rule--c {
        width: calc(750 * var(--u));
    }
    .hm-rp-svc__txt {
        top: calc(487 * var(--u));
    }
    .hm-rp-svc .hm-rp-svc__label {
        width: calc(150.545 * var(--u));
        height: calc(54 * var(--u));
        font-size: calc(27 * var(--u));
        letter-spacing: calc(1.35 * var(--u));
    }
    .hm-rp-svc .hm-rp-svc__title {
        margin-top: calc(30 * var(--u));
        font-size: calc(42 * var(--u));
        letter-spacing: calc(-0.84 * var(--u));
    }
    .hm-rp-svc .hm-rp-svc__body {
        margin-top: calc(30 * var(--u));
        width: calc(685 * var(--u));
        font-size: calc(28 * var(--u));
        line-height: calc(50 * var(--u));
        letter-spacing: calc(-0.56 * var(--u));
    }

    .hm-rp-svc--reborn {
        height: calc(948 * var(--u));
    }
    .hm-rp-svc--reborn .hm-rp-svc__photo {
        left: calc(-364 * var(--u));
    }
    .hm-rp-svc--reborn .hm-rp-svc__rule--b {
        width: calc(254 * var(--u));
    }
    .hm-rp-svc--reborn .hm-rp-svc__txt {
        left: calc(32 * var(--u));
    }

    .hm-rp-svc--reuse {
        height: calc(898 * var(--u));
    }
    .hm-rp-svc--reuse .hm-rp-svc__photo {
        left: calc(-331 * var(--u));
        top: calc(-429 * var(--u));
    }
    .hm-rp-svc--reuse .hm-rp-svc__rule--a {
        left: calc(730 * var(--u));
    }
    .hm-rp-svc--reuse .hm-rp-svc__rule--b {
        left: calc(-488 * var(--u));
    }
    .hm-rp-svc--reuse .hm-rp-svc__rule--c {
        left: calc(-489 * var(--u));
        width: calc(1240 * var(--u));
    }
    .hm-rp-svc--reuse .hm-rp-svc__en {
        left: calc(430 * var(--u));
    }
    .hm-rp-svc--reuse .hm-rp-svc__icon {
        left: calc(345 * var(--u));
    }
    .hm-rp-svc--reuse .hm-rp-svc__txt {
        left: calc(32 * var(--u));
    }
    .hm-rp-svc--reuse .hm-rp-svc__title {
        font-size: calc(42 * var(--u));
        letter-spacing: calc(-0.84 * var(--u));
    }

    .hm-rp-svc--recycle {
        height: calc(918 * var(--u));
    }
    .hm-rp-svc--recycle .hm-rp-svc__photo {
        left: calc(-88 * var(--u));
        top: calc(-276 * var(--u));
        width: calc(1057 * var(--u));
        height: calc(793 * var(--u));
    }
    .hm-rp-svc--recycle .hm-rp-svc__rule--b {
        left: calc(517 * var(--u));
        width: calc(233 * var(--u));
    }
    .hm-rp-svc--recycle .hm-rp-svc__txt {
        left: calc(33 * var(--u));
    }
}