/* カスタムプロパティ */
:root {
    --breakpoint-md: 768px;
    --color-base: #ffffff;
    --color-text: #0b1841;
    --color-gray: #F2F2F2;
    --color-gray-dark: #929292;
    --fontsize-xl: clamp(20px, 5vw, 38px);
    --fontsize-lg: clamp(20px, 5vw, 32px);
    --fontsize-md: clamp(20px, 5vw, 28px);
    --fontsize-sm: clamp(18px, 5vw, 20px);
    --fontsize-xs: 16px;
}
/* 共通 */
.mh_title_about,
.mh_title_section,
.mh_title_block,
.mh_title_item, 
.mh_title_text    {
    font-weight: 500;
    text-align: center;
}
.mh_title_about   {font-size: var(--fontsize-xl);}
.mh_title_section {font-size: var(--fontsize-lg);}
.mh_title_block   {font-size: var(--fontsize-md);}
.mh_title_item    {font-size: var(--fontsize-sm);}
.mh_title_text    {font-size: var(--fontsize-xs);}

.mh_bg_color_base {background-color: var(--color-base);}
.mh_bg_color_gray {background-color: var(--color-gray);}

.mh_common_button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: auto;
    padding: 20px;
    border-radius: 7px;
    color: var(--color-text);
    transition: .2s;
}
.mh_common_button.outline {
    border: 1px solid var(--color-text);
}
.mh_common_button.outline:hover {
    background-color: var(--color-text);
    color: #ffffff;
}
.mh_common_button.arrow-after {
    padding-right: calc(20px + 1.4em);
}
.mh_common_button.arrow-after::after {
    content: '';
    position: absolute;
    right: 1.4em;
    display: block;
    aspect-ratio: 1/1;
    width: .6em;
    margin-left: auto;
    border-right: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    transform: rotate(-45deg);
    transition: inherit;
}
.mh_common_button.arrow-after:hover::after {
    border-color: #ffffff;
}
.mh_common_width_base,
.mh_common_width_lg,
.mh_common_width_sm {
    width: 100%;
    margin: auto;
}
.mh_common_width_sm {
    max-width: 490px;
}
.mh_common_width_base {
    max-width: 718px;
}
.mh_common_width_lg {
    max-width: 1200px;
}

.mh_show_sp {display: none;}
.mh_show_pc {display: inline-block;}

.mh_column {
    display: flex;
    flex-direction: column;
}
.mh_column.gap-xl {gap: 100px;}
.mh_column.gap-lg {gap: min(70px, 8vw);}
.mh_column.gap-md {gap: 40px;}
.mh_column.gap-sm {gap: 20px;}
.mh_column.gap-xs {gap: 10px;}

.mh_link_transparent {
    transition: .2s;
}
.mh_link_transparent:hover {
    opacity: .7;
}
.item_title.border-block {
    padding: 1em 0;
    border-block: 1px solid var(--color-text);
}
.mh_section {
    padding: min(100px, 10vw) 0;
}
.mh_section .item_text {
    line-height: 1.8;
}
/* メインビジュアル */
.mh_mv {
    position: relative;
}
.mh_mv .item_title {
    position: absolute;
    inset: 10% 0 auto;
    width: min(555px, 30vw);
    height: fit-content;
    margin: auto;
}
.mh_mv .item_title img {
    width: 100%;
}
/* 概要 */
.mh_about {
    padding: min(50px, 5vw) 0 min(100px, 10vw);
}
.mh_about_head {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: auto;
}
.block_overview {
    display: flex;
    flex-direction: column;    
}
.block_overview .item_title,
.block_overview .item_text {
    text-align: center;
}
.mh_about .block_desc {
    display: flex;
    flex-direction: column;
}
.mh_about .block_desc .item_image {
    display: flex;
}
/* 人気 */
.mh_popular_block .block_title * {
    text-align: left;
}
.mh_popular_block .item_graph {
    padding: 20px;
}
.mh_popular .reason_list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 4%;
}
.mh_popular .reason_item {
    width: calc(92%/3);
}
/* 特徴 */
.mh_features .item_text {
    text-align: center;
}
.mh_features_head {
    width: 80%;
    margin: auto;
}
.mh_features_head .item_title {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-text);
}
/* 間取り */
.mh_floor_pr {
    counter-reset: num 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 1%;
}
.mh_floor_pr_block {
    counter-increment: num;
    display: flex;
    width: calc(96%/3);
    gap: 2%;
}
.mh_floor_pr_block * {
    text-align: left;
}
.mh_floor_pr_block::before {
    content: counter(num, decimal-leading-zero);
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-self: flex-start;
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 100%;
    background-color: var(--color-gray-dark);
    color: var(--color-base);
    font-weight: 700;
}
.mh_floor_pr_item {
    flex: 7.5;
}
/* マップ */
.mh_map {
    padding: min(50px, 7vw) 0;
}
.mh_map * {
    text-align: center;
}
.mh_map .item_map iframe {
    width: 100% !important;
    height: 240px !important;
}
.mh_map .item_address {
    font-style: normal;
}
@media screen and (max-width: 767px){
    .mh_show_sp {display: inline-block;}
    .mh_show_pc {display: none;}

    .mh_section_inner {
        width: 100%;
        max-width: calc(100% - 2rem);
        margin-inline: auto;
    }
    .item_title.border-block {
        padding: .5em 0;
    }
    .mh_mv .item_title {
        width: clamp(215px, 55vw, 430px);
    }
    .mh_popular .reason_item {
        width: calc(96%/2);
    }
    .mh_features_head {
        width: 100%;
    }
    .mh_floor_pr {
        flex-direction: column;
        gap: 30px;
    }
    .mh_floor_pr_block {
        width: 100%;
    }
}