@charset "UTF-8";

/*
 * 不動産管理・リーシング業務（PC /kanri/service02/）
 * Figma: jogjog.com node 24991:119999 計測（px のみ）
 * 計測メモ: 本文幅1140 / 上padding 60 / セクション縦gap 30 / リード34px bold lh1.45 中央
 * 業務見出し22px bold #d83c3c / 本文18px medium #333 lh1.5 / 区切り線#eaeaea pb30
 * 特徴カード2列: W527 gap6 p20 gap内5 背景#feffd6 角丸10（外周）
 * 販促2列: W560 col-gap20 row-gap30 / 吹き出し50h #f6e24c 22px medium / 下三角約20×14
 * 強み2×2: 570×2 gap0 p30 / ラベル36h 18px bold / 見出し22 bold #d83c3c / 黄#feffd6 橙#fff3e9
 * メニュー: service06 と同系（1140 / gap15）
 */

#content {
    width: 100%;
}

#contents {
    width: 100%;
    padding-bottom: 0;
}

.l-main.l-page.mgmt {
    padding: 0 0 60px;
    background: var(--color-primary-grayscale-white);
}

.mgmt-service02 .l-contents {
    max-width: 100%;
    background: var(--color-primary-grayscale-white);
}

.mgmt-service02 p,
.mgmt-service02 h1,
.mgmt-service02 h2,
.mgmt-service02 h3 {
    margin: 0;
}

/* ---------- MV（画像 1920×450） ---------- */
.mgmt-service02 .mgmt-mv {
    margin: 0;
    padding: 0;
    line-height: 0;
    position: relative;
}

.mgmt-service02 .mgmt-mv__canvas {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 0;
    height: 450px;
}

.mgmt-service02 .mgmt-mv__h1-image {
    margin: 0;
    height: 100%;
    line-height: 0;
}

.mgmt-service02 .mgmt-mv__bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mgmt-service02 .mgmt-mv__note {
    box-sizing: border-box;
    width: 1140px;
    max-width: 100%;
    margin: 10px auto 0;
    padding: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-gray);
}

/* ---------- 本文ラッパ W1140 / pt60 / gap30 ---------- */
.mgmt-service02 .mgmt-s02-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    box-sizing: border-box;
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;
    padding: 36px 0 0;
}

/* ---------- リード 34px bold lh1.45 ---------- */
.mgmt-service02 .service-lead {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-primary-grayscale-white);
}

.mgmt-service02 .service-lead__title {
    margin: 0 auto;
    max-width: 100%;
    color: var(--color-primary-grayscale-black);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.mgmt-service02 .service-lead__title--accent {
    color: #d83c3c;
}

/* ---------- 業務リスト ---------- */
.mgmt-service02 .service-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 1140px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mgmt-service02 .service-item {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 29px;
    padding: 0 0 30px;
    border-bottom: 1px solid #eaeaea;
}

.mgmt-service02 .service-item--last {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 32px;
}

.mgmt-service02 .service-item--last .service-feature {
    margin-bottom: 0;
}

/* 見出し: 22px bold #d83c3c lh1.3 */
.mgmt-service02 .service-item__title {
    margin: 0 0 10px;
    max-width: 335px;
    color: #d83c3c;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

/* 入居者募集ブロック先頭: 見出し〜本文 gap10 の後に30相当はカード列まで含めた子レイアウトで調整 */
.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-item__text {
    margin-bottom: 30px;
}

.mgmt-service02 .service-item__text {
    color: var(--color-text-default);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}

/* ---------- 特徴カード 2×2 gap6 W527 p20 ---------- */
.mgmt-service02 .service-feature {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin: 0 0 29px;
    box-sizing: border-box;
}

.mgmt-service02 .service-feature__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 567px;
    max-width: calc(50% - 3px);
    height: 155px;
    margin: 0;
    padding: 22px 20px 20px;
    background: #feffd6;
}

.mgmt-service02 .service-item--last .service-feature__card:nth-child(1) {
    border-radius: 10px 0 0 0;
}

.mgmt-service02 .service-item--last .service-feature__card:nth-child(2) {
    border-radius: 0 10px 0 0;
}

.mgmt-service02 .service-item--last .service-feature__card:nth-child(3) {
    border-radius: 0 0 0 10px;
}

.mgmt-service02 .service-item--last .service-feature__card:nth-child(4) {
    border-radius: 0 0 10px 0;
}

.mgmt-service02 .service-item--last .service-feature__card:nth-child(5) {
    width: 100%;
    max-width: 100%;
    flex: 1 0 100%;
    border-radius: 0 0 10px 10px;
    align-items: center;
    justify-content: center;
}

/* 入居者募集内 4枚グリッドのみ（マーケティング記事には feature なし） */
.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-feature .service-feature__card--first {
    border-radius: 10px 0 0 0;
}

.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-feature .service-feature__card:nth-child(2) {
    border-radius: 0 10px 0 0;
}

.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-feature .service-feature__card:nth-child(3) {
    border-radius: 0 0 0 10px;
}

.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-feature .service-feature__card--last {
    border-radius: 0 0 10px 0;
}

.mgmt-service02 .service-feature__title {
    margin: 0;
    color: #d83c3c;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.mgmt-service02 .service-feature__text {
    color: var(--color-text-default);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    text-align: center;
}

/* ---------- 入居者募集: 2列プロモ＋強み ---------- */
.mgmt-service02 .service-list > .service-item:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
}

.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-item__title,
.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-item__text,
.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-feature,
.mgmt-service02 .service-list > .service-item:nth-child(2) > .service-power {
    flex: 1 0 100%;
    width: 100%;
}

.mgmt-service02 .service-list > .service-item:nth-child(2) .service-promo__wrapper > .service-promo {
    flex: 0 0 auto;
    width: 560px;
    max-width: calc(50% - 10px);
    box-sizing: border-box;
}

/* ---------- 販促ブロック ---------- */
.mgmt-service02 .service-promo__wrapper {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 30px;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 30px;
}

.mgmt-service02 .service-promo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0;
}

.mgmt-service02 .service-promo__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.mgmt-service02 .service-promo__bubble {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 6px 16px;
    border-radius: 9999px;
    color: var(--color-primary-grayscale-black);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    background: var(--color-primary-default-main);
}

.mgmt-service02 .service-promo__bubble::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 9px solid var(--color-primary-default-main);
}

.mgmt-service02 .service-promo__title {
    margin: 0;
    width: 335px;
    max-width: 100%;
    color: var(--color-primary-grayscale-black);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.mgmt-service02 .service-promo__text {
    width: 560px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--color-text-default);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.mgmt-service02 .service-promo__img {
    display: block;
    width: 335px;
    max-width: 100%;
    height: auto;
}

.mgmt-service02 .service-promo__img--web {
    width: 393px;
    max-width: 100%;
    height: auto;
}

.mgmt-service02 .service-promo__sns {
    display: block;
    width: 322px;
    max-width: 100%;
    height: auto;
    margin-top: 17px;
}

.mgmt-service02 .service-promo__sns-list {
    display: flex;
    gap: 30px;
    margin-top: 17px;
}

.mgmt-service02 .service-promo__sns-link {
    display: block;
}

.mgmt-service02 .service-promo__sns-link:hover {
    transform: translateY(4px);
}

/* ---------- 強み 2×2 ---------- */
.mgmt-service02 .service-power {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    gap: 0;
}

.mgmt-service02 .service-power__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 570px;
    max-width: 50%;
    margin: 0;
    padding: 30px;
}

.mgmt-service02 .service-power__card--yellow {
    background: #feffd6;
}

.mgmt-service02 .service-power__card--orange {
    background: #fff3e9;
}

.mgmt-service02 .service-power__card--first {
    border-radius: 10px 0 0 0;
}

.mgmt-service02 .service-power__card:nth-child(2) {
    border-radius: 0 10px 0 0;
}

.mgmt-service02 .service-power__card:nth-child(3) {
    border-radius: 0 0 0 10px;
}

.mgmt-service02 .service-power__card--last {
    border-radius: 0 0 10px 0;
}

.mgmt-service02 .service-power__label {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 36px;
    margin: 0 0 6px;
    padding: 0 22px;
    border-radius: 9999px;
    color: var(--color-primary-grayscale-black);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    background: var(--color-primary-default-main);
}

.mgmt-service02 .service-power__label--orange {
    color: var(--color-primary-grayscale-white);
    background: var(--color-primary-default-point);
}

.mgmt-service02 .service-power__title {
    width: 510px;
    max-width: 100%;
    margin: 0 0 10px;
    color: #d83c3c;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.mgmt-service02 .service-power__text {
    width: 510px;
    max-width: 100%;
    margin: 0 0 20px;
    color: var(--color-text-default);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    text-align: center;
}

.mgmt-service02 .service-power__img {
    display: block;
    width: 299px;
    max-width: 100%;
    height: auto;
}

.mgmt-service02 .service-power__img--network {
    width: 329px;
    margin-top: 27px;
}

.mgmt-service02 .service-power__img--recruitment {
    margin-top: 54px;
}

.mgmt-service02 .service-power__card--last .service-power__img {
    width: 510px;
    max-width: 100%;
}

.mgmt-service02 .service-power__note {
    width: 510px;
    max-width: 100%;
    margin: 21px 0 0;
    padding: 0;
    color: var(--color-text-default);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    text-indent: -1em;
    padding-left: 1em;
    box-sizing: border-box;
}

/* ---------- 関連メニュー（service06 準拠） ---------- */
.mgmt-service02 .mgmt-menu {
    width: 1140px;
    max-width: 100%;
    margin: 0;
    padding: 0 0 60px;
    box-sizing: border-box;
}

.mgmt-service02 .mgmt-menu__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 30px;
}

.mgmt-service02 .mgmt-menu__head .ui-headline {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary-grayscale-black);
}

.mgmt-service02 .mgmt-menu__en {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #d83c3c;
}

.mgmt-service02 .mgmt-menu__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.mgmt-service02 .mgmt-menu__grid .mgmt-menu__btn:nth-child(-n + 3) {
    width: calc((100% - 30px) / 3);
}

.mgmt-service02 .mgmt-menu__grid .mgmt-menu__btn:nth-child(n + 4) {
    width: calc((100% - 15px) / 2);
}

.mgmt-service02 .mgmt-menu__btn--wide {
    width: calc((100% - 15px) / 2);
}

.mgmt-service02 .mgmt-menu__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 60px;
    padding: 18px 85px 18px 75px;
    background: var(--color-primary-default-main);
    border-radius: 6px;
    box-shadow: 0 2px 1.5px rgba(38, 50, 56, 0.2);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary-grayscale-black);
    text-align: center;
    text-decoration: none;
}

.mgmt-service02 .mgmt-menu__btn:hover {
    transform: translateY(4px);
}

.mgmt-service02 .mgmt-menu__btn::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: 11px;
    height: 16px;
    background: url(/images/pc/kanri/service02/icon-triangle.webp) no-repeat center center / contain;
}

/* ---------- 不動産管理トップに戻る（service06 準拠） ---------- */
.mgmt-service02 .mgmt-back-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 60px 0 0;
    border-top: 1px solid #eaeaea;
    box-sizing: border-box;
}

.mgmt-service02 .mgmt-back {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 340px;
    max-width: 100%;
    min-height: 70px;
    padding: 18px 34px 18px 50px;
    border: 2px solid #d83c3c;
    border-radius: 6px;
    background: var(--color-primary-grayscale-white);
    box-shadow: 0 2px 1.5px rgba(38, 50, 56, 0.1);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #d83c3c;
    text-decoration: none;
}

.mgmt-service02 .mgmt-back:hover {
    transform: translateY(4px);
}

.mgmt-service02 .mgmt-back::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    width: 15px;
    height: 20px;
    background: url(/images/pc/kanri/service02/icon-triangle.webp) no-repeat center center / contain;
}