@charset "utf-8";

#content {
    width: 100%;
}

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

.kanri-top {
    background-color: #fff;
}

/* --- 管理トップ（.legal-kanri-top-mv） --- */
.kanri-top-mv {
    padding: 41px 0 0;
    min-height: 470px;

    .top-mv__illustration--01 {
        top: -7px;
        left: -360px;
    }

    .top-mv__illustration--02 {
        top: -5px;
        left: -10px;
    }

    .top-mv__illustration--03 {
        top: -20px;
        left: -370px;
    }

    .top-mv__illustration--04 {
        top: 81px;
        left: -404px;
    }

    .top-mv__illustration--06 {
        top: 57px;
        right: 216px;
    }

    .top-mv__illustration--07 {
        top: -16px;
        right: -370px;
    }

    .top-mv__illustration--08 {
        top: 85px;
        right: -423px;
    }

    .top-mv__illustration--12 {
        top: -83px;
        right: 246px;
        width: 122px;
        height: 126px;
    }

    .top-mv__illustration--13 {
        top: 15px;
        left: 284px;
        width: 38px;
        height: 29px;
    }

    .top-mv__illustration--14 {
        top: -16px;
        right: -53px;
        width: 38px;
        height: 29px;
    }

    .top-mv__illustration--15 {
        top: -1px;
        right: -342px;
        width: 38px;
        height: 29px;
    }

    .top-mv__illustration--01 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-left 0.48s cubic-bezier(0.2, 0.88, 0.32, 1) 0.25s both;
    }

    .top-mv__illustration--02 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-right 0.48s cubic-bezier(0.2, 0.88, 0.32, 1) 0.6s both;
    }

    .top-mv__illustration--03 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-right 0.48s cubic-bezier(0.2, 0.88, 0.32, 1) 0.95s both;
    }

    .top-mv__illustration--04 .top-mv__illustration__surface {
        animation: top-mv-illust-bounce-from-bottom 1.02s cubic-bezier(0.33, 1, 0.68, 1) 1.35s both;
    }

    .top-mv__illustration--06 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-right 0.48s cubic-bezier(0.2, 0.88, 0.32, 1) 0.25s both;
    }

    .top-mv__illustration--07 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-right 0.48s cubic-bezier(0.2, 0.88, 0.32, 1) 0.95s both;
    }

    .top-mv__illustration--08 .top-mv__illustration__surface {
        animation: top-mv-illust-bounce-from-bottom 1.02s cubic-bezier(0.33, 1, 0.68, 1) 1.35s both;
    }

    .top-mv__illustration--12 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-bottom 0.52s cubic-bezier(0.2, 0.88, 0.32, 1) 1.35s both;
    }

    .top-mv__illustration--13 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-left 0.48s cubic-bezier(0.2, 0.88, 0.32, 1) 0.25s both;
    }

    .top-mv__illustration--14 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-right 0.48s cubic-bezier(0.2, 0.88, 0.32, 1) 0.6s both;
    }

    .top-mv__illustration--15 .top-mv__illustration__surface {
        animation: top-mv-illust-fade-from-bottom 0.52s cubic-bezier(0.2, 0.88, 0.32, 1) 0.95s both;
    }

    .top-mv__main--kanri {
        width: 100%;
        margin-bottom: 0;
    }

    .top-mv-catch {
        margin-bottom: 7px;
    }

    .top-mv-catch__row1 {
        line-height: 1.25;
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: 2px;
        margin-bottom: 2px;
        padding-left: 2px;
    }

    .top-mv-catch__no {
        font-size: 40px;
        line-height: 1.25;
    }

    .top-mv-catch__badge {
        font-size: 34px;
        line-height: 1.25;
        -webkit-text-stroke: 4px #534b45;
    }

    .top-mv-catch__badge span {
        font-size: 50px;
    }

    .top-mv-catch__badge span::before {
        content: none;
    }

    .top-mv-catch__line2 {
        font-size: 90px;
        letter-spacing: 0.02em;
        line-height: 1.25;
        padding-left: 2px;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }

    .top-mv__search {
        width: 100%;
        margin-bottom: 18px;
    }

    .top-mv__search-headline {
        margin-bottom: 0;
    }

    .top-mv__search-headline h2 {
        font-size: 32px;
        letter-spacing: 0;
        padding-left: 0;
    }

    .top-mv__bnr--yanushi {
        color: #fff;
        width: 400px;
        height: 110px;
        display: flex;
        align-items: center;
        gap: 13px;
        padding-left: 15px;
        border-radius: 10px;
        background-color: #534B45;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.20);
        margin: 0 auto;
        position: relative;
    }

    .top-mv__bnr--yanushi:hover {
        transform: translateY(4px);
    }

    .top-mv__bnr-text {
        font-size: 16px;
        font-weight: 500;
        padding-bottom: 2px;
    }

    .top-mv__bnr-text--large {
        display: block;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.25;
        color: #fff;
        margin-bottom: 2px;
    }

    .top-mv__bnr--yanushi::before {
        content: '';
        background: url(/images/pc/kanri/mv_icon-yanushi.svg) no-repeat center center / 52px;
        background-position-x: 16px;
        display: block;
        width: 80px;
        height: 80px;
        background-color: #E5DBD4;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .top-mv__bnr-btn {
        position: absolute;
        top: auto;
        bottom: auto;
        right: 30px;
        width: 34px;
        height: 34px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 2px;
    }

}

.ui-arrow-triangle--yanushi {
    fill: #534B45;
    width: 13px;
    height: 16px;
    padding-left: 2px;
}

/* ========================================= */
/* バナー群（CTA） */
/* Figma: management_list (node-id: 20269:86214) */
/* 計測値(375基準):
*/
/* ========================================= */
/* ページ表示時フェードイン（kanri.js initLoadFadeIn） */
.js-load-fade-in {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.94);
}

.js-load-fade-in.is-revealed {
    animation: scroll-reveal-in 1.05s cubic-bezier(0.34, 1.18, 0.55, 1) forwards;
}

.js-load-fade-in.is-visible-static {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .js-load-fade-in {
        opacity: 1;
        transform: none;
    }

    .js-load-fade-in.is-revealed {
        animation: none;
    }
}

.cta {
    position: relative;
    width: 1140px;
    margin: 0 auto;
}

.cta__list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 60px 0;
}

.cta__item {
    width: 273px;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 19px;
    padding: 0 0 0 7px;
    box-sizing: border-box;
    background-color: #feffd6;
    border: 1px solid #534b45;
    border-radius: 6px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.20);
    color: #333;
    text-decoration: none;
}

.cta__item:hover {
    transform: translateY(4px);
}

.cta__icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: block;
}

.cta__text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    width: 180px;
}

.cta__note {
    font-size: 14px;
    font-weight: 500;
    color: #b7b7b7;
    position: absolute;
    top: 7px;
    right: 0;
}

/* ========================================= */
/* ベストパートナー */
/* Figma node-id: 20190:86871 */
/* ========================================= */
.partner {
    background: url(/images/pc/kanri/bg_partner.webp) #feffd6 no-repeat center center / cover;
    padding: 60px 0 90px;
    position: relative;
    overflow: hidden;
}

.partner__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    justify-content: space-between;
    padding-inline: 40px;
}

.partner__figure {
    width: 480px;
    height: 450px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

.partner__headline {
    width: 100%;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.43;
    text-align: left;
    color: #000;
    margin: 0 0 19px;
}

.partner__headline--accent {
    color: #d83c3c;
}

.partner__text {
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.78;
    text-align: left;
    color: #000;
    margin: 0;
}

.partner__bg {
    width: 100%;
    margin: 0;
    display: block;
    position: absolute;
    left: 0;
    bottom: 79px;
    z-index: 0;
}

.partner__bg-surface {
    display: block;
    width: 100%;
}

.partner__bg-surface img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * 背景SVG: MV のイラスト--04 と同系（top-mv-illust-bounce-from-bottom）
 * メインは CSS アニメ。表示タイミングは initScrollReveal（top-org.js）。
 * .js-scroll-reveal の既定 opacity/transform は親に乗るため .kanri-top で打ち消し、
 * 演出は .partner__bg-surface に任せる。
 */
.kanri-top .partner__bg.js-scroll-reveal {
    opacity: 1;
    transform: none;
}

.kanri-top .partner__bg.js-scroll-reveal.is-revealed {
    animation: none;
}

.kanri-top .partner__bg.js-scroll-reveal:not(.is-revealed):not(.is-visible-static) .partner__bg-surface {
    opacity: 0;
}

.kanri-top .partner__bg.js-scroll-reveal.is-visible-static .partner__bg-surface {
    opacity: 1;
    transform: none;
    animation: none !important;
}

.kanri-top .partner__bg.js-scroll-reveal.is-revealed .partner__bg-surface {
    transform-origin: center center;
    backface-visibility: hidden;
    animation: top-mv-illust-bounce-from-bottom 1.02s cubic-bezier(0.33, 1, 0.68, 1) 0.15s both;
}

/* ========================================= */
/* 常口アトムの実績と体制 */
/* Figma node-id: 20190:86939 */
/* ========================================= */
.achievements {
    background-color: #fff;
    padding: 60px 0;
}

.achievements__headline {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 30px;
}

.achievements__content.--bottom {
    display: flex;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #EAEAEA;
    align-items: flex-start;
    gap: 55px;
    padding-bottom: 0;
    border-bottom: none;
}

.achievements__title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
    margin: 0;
}

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

.achievements__lead {
    width: 100%;
    text-align: center;
    color: #000;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 20px;
    padding-left: 5px;
}

.achievements__lead--accent {
    font-size: 22px;
    color: #d83c3c;
}

.achievements__map {
    width: 335px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-left: 5px;
}

.achievements__map-img {
    width: 100%;
    height: auto;
    display: block;
}

.achievements__stats-wrap {
    display: flex;
    align-items: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #EAEAEA;
}

.achievements__stats {
    width: 512px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-shrink: 0;
    padding-left: 74px;
    position: relative;
}
.achievements__stats::after {
    content: "";
    position: absolute;
    background: #EAEAEA;
    width: 1px;
    height: 86px;
    right: 0;
}

.achievements__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 157px;
}

.achievements__stat-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: #333;
    margin: 0 0 4px;
}

.achievements__stat-value {
    margin: 0 0 4px;
    line-height: 1.25;
}

.achievements__stat-num {
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    color: #d83c3c;
}

.achievements__stat-unit {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    color: #333;
}

.achievements__stat-rank {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: #333;
}

.achievements__stat-rank-note {
    font-size: 16px;
    color: #9e9e9e;
}

.achievements__divider {
    width: 1px;
    height: 86px;
    background-color: #eaeaea;
    flex-shrink: 0;
}

.achievements__notes {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-left: 29px;
}

.achievements__note {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #B7B7B7;
}

.achievements__content-inner.--left {
    width: 335px;
    flex-shrink: 0;
    padding-top: 40px;
}

.achievements__content-inner.--right {
    padding-top: 33px;
}

.achievements__block {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.achievements__block-list.--bottom {
    display: flex;
    padding-top: 23px;
}

.achievements__block:last-child {
    margin-bottom: 0;
}

.achievements__label {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: #d83c3c;
}

.achievements__list {
    color: #000;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 19px;
    border-bottom: 1px solid #EAEAEA;
}

.achievements__block-list.--bottom .achievements__list {
    padding-bottom: 0;
    border-bottom: none;
}

.achievements__list-item {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.79;
    text-indent: -1em;
    padding-left: 1em;
    width: 335px;
    color: #000;
}

.achievements__block-list.--bottom .achievements__list-item {
    width: 420px;
}

/* 管理トップ：募集中モーダル系（PC共通）
   Figma 23113:109383 / 25220:122612
   modal 640×208 / padding 40 / radius 20 / item 255×60 gap 14 */
#js-kanri-modal,
.search-modal.search-modal--resident,
.search-modal.search-modal--office {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

#js-kanri-modal.is-open,
.search-modal.search-modal--resident.is-open,
.search-modal.search-modal--office.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s ease, visibility 0s;
}

#js-kanri-modal .search-modal__overlay,
.search-modal--resident .search-modal__overlay,
.search-modal--office .search-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

#js-kanri-modal .search-modal__content,
.search-modal--resident .search-modal__content,
.search-modal--office .search-modal__content {
    position: relative;
    width: 640px;
    min-height: 208px;
    padding: 40px;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.search-modal__footer {
    position: absolute;
    top: 23px;
    right: 24px;
}

#js-kanri-modal .search-modal__close-btn,
.search-modal--resident .search-modal__close-btn,
.search-modal--office .search-modal__close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 33px;
    height: 33px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #cfcfcf;
    cursor: pointer;
}

#js-kanri-modal .search-modal__close-icon,
.search-modal--resident .search-modal__close-icon,
.search-modal--office .search-modal__close-icon {
    width: 33px;
    height: 33px;
}

#js-kanri-modal .search-modal__close-text,
.search-modal--resident .search-modal__close-text,
.search-modal--office .search-modal__close-text {
    display: none;
}

#js-kanri-modal .search-modal__title-main,
.search-modal--resident .search-modal__title-main,
.search-modal--office .search-modal__title-main {
    margin: 0 0 30px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

#js-kanri-modal .search-modal__select-list,
.search-modal--resident .search-modal__select-list,
.search-modal--office .search-modal__select-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

#js-kanri-modal .search-modal__select-item,
.search-modal--resident .search-modal__select-item,
.search-modal--office .search-modal__select-item {
    position: relative;
    display: flex;
    width: 255px;
    height: 60px;
    padding: 0 13px 0 12px;
    align-items: center;
    justify-content: center;
    background-color: #f6e24c;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    box-shadow: 0 3px 2.5px rgba(38, 50, 56, 0.08);
    box-sizing: border-box;
    text-decoration: none;
}

#js-kanri-modal .search-modal__select-item:hover,
.search-modal--resident .search-modal__select-item:hover,
.search-modal--office .search-modal__select-item:hover {
    transform: translateY(4px);
}

#js-kanri-modal .search-modal__select-name,
.search-modal--resident .search-modal__select-name,
.search-modal--office .search-modal__select-name {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    color: #333;
    text-align: center;
}

#js-kanri-modal .search-modal__select-item::after,
.search-modal--resident .search-modal__select-item::after,
.search-modal--office .search-modal__select-item::after {
    content: "";
    background: url(/images/pc/kanri/modal_icon-corner.svg);
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 12px;
    height: 12px;
}

/* 管理トップ・エリアモーダル: rent/tenant の2パネル切替（.area-modal__list の display:flex が [hidden] を打ち消すため） */
#js-search-modal-area-kanri .js-kanri-area-panel[hidden] {
    display: none !important;
}

.area-modal__item {
    background-color: #f6e24c;
}

.area-modal__item .area-modal__name {
    color: #333;
}

/* -----------------------------------------
   お知らせ
   ----------------------------------------- */
   .top-news__tag {
    color: var(--color-primary-grayscale-white);
    background: var(--color-primary-default-sub);
    border: none;
}

/* -----------------------------------------
   目的から探す（法人 LP / Figma 22169:101137）
   top-purpose は index と同クラス、レイアウトのみ上書き
   ----------------------------------------- */
.kanri-top {

    .top-chouki {
        display: flex;
        justify-content: center;
        gap: 12px;
    } 
    .top-purpose {
        padding-top: 49px;
    }

    .kanri-top-purpose .top-purpose__inner.l-top-inner {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        justify-content: flex-start;
    }

    .kanri-top-purpose .top-purpose__head {
        align-items: center;
        text-align: center;
    }

    .kanri-top-purpose .top-purpose__bnr-list {
        width: 1140px;
        max-width: 100%;
        flex: none;
        gap: 12px;
        justify-content: center;
    }

    .kanri-top-purpose .top-purpose__bnr {
        flex: 0 0 calc((100% - 24px) / 3);
        width: calc((100% - 24px) / 3);
        max-width: 372px;
        box-sizing: border-box;
    }

    .kanri-top-purpose .top-purpose__bnr-sub {
        flex: 0 0 calc((100% - 60px) / 6);
        width: calc((100% - 60px) / 6);
        max-width: 180px;
        box-sizing: border-box;
    }

    .kanri-top-purpose .top-purpose__bnr > img {
        bottom: -3px;
        left: -3px;
        width: 117px;
        height: 121px;
    }

    .kanri-top-purpose .top-purpose__bnr.top-purpose__bnr--buy > img {
        width: 121px;
    }

    .top-purpose__bnr.top-chouki__bnr--rent {
        margin: 0;
        flex: 0 0 calc((100% - 24px) / 3);
        width: calc((100% - 24px) / 3);
        max-width: 372px;
        background: #F08C34;
    }

    .top-purpose__bnr.top-chouki__bnr--rent:hover {
        transform: translateY(4px);
    }

    .top-purpose__bnr.top-chouki__bnr--rent .top-purpose__bnr-title {
        max-width: 264px;
    }

}

.top-chukai__bnr {
    flex: 0 0 calc((100% - 24px) / 3);
    width: calc((100% - 24px) / 3);
    max-width: 372px;

    .top-purpose__bnr-overlay {
        font-size: 12px;
    }
    .top-purpose__bnr-title {
        max-width: 100%;
    }
    .top-purpose__bnr-en {
        color: #FFF;
    }
    .top-purpose__bnr-btn {
        padding-left: 3px;
    }
    .ui-arrow-tab {
        width: 14px;
        height: 14px;
    }
}

.top-chukai__bnr--hokkaido {
    background: #DE4A1E;
}

.top-chukai__bnr--aomori {
    background: #AA3116;
}