@charset "utf-8";

/*==================================================================
    IPすまいる2026 ／ clearance.css
    残置物処理（clearance.php）専用スタイル
==================================================================*/
@media screen and (max-width: 767px) {
	#pagehead {
		min-height: 100svw;
	}
}

/*------------------------------------------------------------------
    #reception ／ 鹿児島の「居住支援 × 残置物」の窓口に。
------------------------------------------------------------------*/
#reception {
    padding-block: 75px 120px;
    background: #fff;
}
#reception .title { margin-block-start: .55lh; }
#reception .lead { margin-block-start: .9lh; }
#reception .lead + .lead { margin-block-start: .45lh; }

#reception .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m4);
    margin-block-start: var(--m5);
}
#reception .block {
    flex: 1;
}
#reception .block .badge {
    width: fit-content;
    padding: 5px 20px;
    background: var(--orange);
    translate: 0 -50%;
    margin-inline: auto;
    border-radius: 6px;
    color: #fff;
    font-size: var(--medium-size);
}
#reception .block:first-child .badge {
    background: var(--yellow);
}
#reception .block:last-child .badge {
    background: var(--bright-orange);
}
#reception .block h3 {
    margin-top: .5lh;
    font-size: var(--medium-size);
    font-weight: 700;
    text-align: center;
}
#reception .block p {
    margin-block-start: .6lh;
    text-align: center;
}

/* 対応エリア（許認可番号） */
#reception .area {
    position: relative;
    width: 960px;
    max-width: 100%;
    margin: 105px auto 0;
    padding: 60px 50px 45px;
    background: var(--pale-gray);
    border: 1px solid var(--border);
    border-radius: 18px;
    text-align: center;
}
#reception .area .balloon {
    border-radius: 100%;
    border-radius: 100%;
    padding-block: 0.5lh;
    position: absolute;
    inset-block-start: -30px;
    inset-inline: 0;
}
#reception .area h3 {
    font-size: calc(var(--medium-size) * 1.125);
    font-weight: 700;
    line-height: 1.5;
}
#reception .area .sub {
    margin-block-start: .2lh;
    font-size: var(--regular-size);
    font-weight: 700;
}
#reception .area p { margin-block-start: 1lh; }
#reception .area .tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 20px;
    width: 520px;
    max-width: 100%;
    margin: 45px auto 0;
}
#reception .area .tags li {
    padding: 4px 24px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    font-size: var(--regular-size);
    font-weight: 700;
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    /* #reception */
    #reception { padding-block: var(--m2) var(--m4); }
    #reception .row { gap: var(--m3); margin-block-start: var(--m3); }
    #reception .block { flex-basis: 100%; }
    #reception .block h3 {
        margin-top: 0;
    }
    #reception .area {
        margin-block-start: var(--m4);
        padding: var(--m3) var(--m) var(--m2);
    }
    #reception .area .tags { margin-block-start: var(--m2); }
}


/*------------------------------------------------------------------
    #service ／ ご対応できること
------------------------------------------------------------------*/
#service {
    padding-block: var(--m5) var(--m6);
    background: var(--light-gray);
}
#service .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m4);
    margin-block-start: var(--m4);
}
#service .block {
    flex: 1;
    padding-block-end: 30px;
    background: #fff;
    border-radius: 18px;
}
#service .block .image {
    position: relative;
    border-radius: 18px 18px 0 0;
}
#service .block .number {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    translate: 0 -50%;
    width: var(--m4);
    height:var(--m4);
    border-radius: 50%;
    background: var(--bright-orange);
    color: #fff;
    font-size: var(--medium-size);
    line-height: 1;
}
#service .block h3 {
    font-size:var(--medium-size);
    text-align: center;
}
@media screen and (max-width: 767px) {
    /* #service */
    #service { padding-block: var(--m2) var(--m3); }
    #service .row { gap: var(--m3); margin-block-start: var(--m2); }
    #service .block { flex-basis: 100%; }
    #service .block h3 {
        margin-top: -.5lh;
    }
}


/*------------------------------------------------------------------
    #issue ／ なぜ「居住支援 × 残置物」が課題になるのか
------------------------------------------------------------------*/
#issue {
    padding-block: 105px 90px;
    background: #fff;
}
#issue .title { margin-block-start: .8lh; }
#issue .lead { margin-block-start: 1.1lh; }
#issue .lead.narrow { margin-block-start: .6lh; }
#issue .lead.close { margin-block-start: 1.75lh; }

#issue .figure {
    margin-top: var(--m8);
    max-width: 960px;
    padding-left: 150px;
    margin-inline: auto;
    position: relative;
}
#issue .figure .image {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -60%;
    max-width: 300px;
    z-index: 1;
}
#issue .figure .text {
    padding: var(--m2);
    padding-left: calc(150px + var(--m2));
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--pale-gray);
}
#issue .figure .text h3 {
    font-size: var(--medium-size);
    color: var(--bright-orange)
}
#issue .figure .text p {
    margin-block-start: .9lh;
    line-height: 1.9;
}
@media screen and (max-width: 767px) {
    /* #issue ／ 画像の重ね配置を解除して縦積み */
    #issue { padding-block: var(--m3); }
    #issue .figure {
        margin-top: var(--m4);
        padding-left: 0;
    }
    #issue .figure .image {
        position: relative;
        top: auto;
        translate: none;
        max-width: calc(180 * var(--px));
        margin-inline: auto;
    }
    #issue .figure .text {
        margin-top: calc(-1 * var(--m3));
        padding-top: var(--m4);
        padding-left: var(--m2);
    }
}


/*------------------------------------------------------------------
    #order ／ ご依頼・お問い合わせの流れ
------------------------------------------------------------------*/
#order {
    padding-block: 90px 75px;
    background: var(--gradient);
}
#order .title { margin-block-start: .9lh; }

#order .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    width: 1140px;
    max-width: 100%;
    margin: 45px auto 0;
    padding: 45px 60px 30px;
    background: #fff;
    border-radius: 16px;
}
#order .block {
    position: relative;
    flex: 1;
}
#order .block:not(:last-child)::after {
    display: block;
    width: 9px;
    height: 12px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--accent);
    position: absolute;
    left: calc(100% + var(--m) / 2);
    top: 204px;
    translate: -50% -50%;
}

#order .block .image {
    position: relative;
    border-radius: 50%;
}
#order .block .number {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 204px;
    translate: -50% -50%;
    width: var(--m5);
    height: var(--m5);
    border-radius: 50%;
    background: var(--yellow);
    color: white;
    font-size: var(--medium-size);
    font-weight: 700;
    line-height: 1;
}
#order .block h3 {
    margin-block-start: 1.1lh;
    font-size: var(--regular-size);
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
}
#order .block h3 .small {
    display: block;
    font-size: calc(var(--regular-size) * 0.85);
}
@media screen and (max-width: 767px) {
    /* #order ／ 縦積み。横並び前提の矢印は隠す */
    #order { padding-block: var(--m3) var(--m2); }
    #order .row {
        gap: var(--m3);
        margin-block-start: var(--m2);
        padding: var(--m2) var(--m);
    }
    #order .block { flex-basis: 100%; max-width: calc(300 * var(--px)); }
    #order .block:not(:last-child)::after {
        width: 12px;
        height: 9px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        left: 50%;
        top: calc(100% + var(--m3) / 2);
    }
    #order .block .image {
        max-width: 70%;
        margin-inline: auto;
    }
    #order .block .number {
        width: var(--m4);
        height: var(--m4);
        top: 0;
        left: 5%;
        translate: none;
    }
    #order .block h3 {
        margin-block-start: 0.1lh;
        font-size: var(--medium-size);
    }
}