.mw--05{
    min-width: 5em;
}
.mw--03{
    min-width: 3em;
}
.house-example-result-chart__td a {
    font-weight: bold;
    color: var(--red-color-100);
}

.cat-zehinfo .page-hero__body::after {
    background: url("/assets/img/common/page_hero_deco_zehinfo_02.png") center center no-repeat;
    background-size: contain;
    width: calc(474 / var(--font-size) * 1rem);
    height: calc(202 / var(--font-size) * 1rem);
}
@media (max-width: 767px) {
    .cat-zehinfo .page-hero__body::after {
        background: url("/assets/img/common/page_hero_deco_zehinfo_02.png") center center no-repeat;
        background-size: contain;
        width: calc(200 / var(--font-size) * 1rem);
        height: calc(109 / var(--font-size) * 1rem);
        margin-bottom: calc(10 / var(--font-size) * 1rem * -1);
    }
}


/* 開催期間カレンダー */
/* スタイルリセット */
input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ccc;
    background-color: #ffffff;
    padding: 10px 8spx;
    color: #333;
}
.period-input,
.period-input-text {
    position: relative;
    /* display: inline-flex; */
    align-items: center;
}
/* date入力を透過して背景化（クリック判定のみ残す） */
input[type="date"].custom-date {
    position: relative;
    z-index: 2;
    color: transparent !important; /* 標準の文字は常に非表示 */
    background: transparent;
    cursor: pointer;
    background: #fff; 
}

/* カレンダーアイコンを消す */
input[type="date"].custom-date::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none;
}

/* 未選択・標準の「yyyy/mm/dd」表記を消す */
input[type="date"].custom-date::-webkit-datetime-edit {
    color: transparent !important;
}

/* YY/MM/DD を表示するテキスト */
.period_start-text,
.period_end-text {
    position: absolute;
    left: 12px;
    z-index: 1;
    color: #aaa; /* 未選択時の文字色 */
    font-size: 14px;
    pointer-events: none;
}

/* 日付選択後の文字色 */
.period_start-text.is-selected,
.period_end-text.is-selected {
    color: #373737 !important;
}

/* フォーカス時の入力エリア全体の文字を透明化 */
input[type="date"].custom-date:focus::-webkit-datetime-edit {
    color: transparent !important;
}

/* 個別のフィールド（年・月・日）および選択領域（::selection）の透明化 */
input[type="date"].custom-date::-webkit-datetime-edit-fields-wrapper,
input[type="date"].custom-date::-webkit-datetime-edit-text,
input[type="date"].custom-date::-webkit-datetime-edit-month-field,
input[type="date"].custom-date::-webkit-datetime-edit-day-field,
input[type="date"].custom-date::-webkit-datetime-edit-year-field {
    color: transparent !important;
    background-color: transparent !important;
}

/* フォーカスでフィールドが選択された際の背景色と文字色を消す */
input[type="date"].custom-date::-webkit-datetime-edit-month-field:focus,
input[type="date"].custom-date::-webkit-datetime-edit-day-field:focus,
input[type="date"].custom-date::-webkit-datetime-edit-year-field:focus {
    color: transparent !important;
    background-color: transparent !important;
}
/* /スタイルリセット */


.open_house-search-form .c-form__error-target{
    width: 100%;
}
.open_house-search-form .period-input {
    position: relative;
    width: 100%;
}
.open_house-search-form .period-input input[type="date"] {
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
}
.open_house-search-form .period_start-text, .open_house-search-form .period_end-text {
    color: #ccc;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    line-height: 1;
    z-index: 2;
}
.open_house-search-form .period_start-text, .open_house-search-form .period_end-text {
    left: calc(33 / var(--font-size) * 1rem);
    font-size: calc(16 / var(--font-size) * 1rem);
}
.open_house-search-form .period_start-btn, .open_house-search-form .period_end-btn {
    cursor: pointer;
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    position: absolute;
    transition: 0.2s ease-in-out;
    z-index: 2;
}
.open_house-search-form .period_start-btn, .open_house-search-form .period_end-btn {
    top: 1px;
    right: 1px;
    width: 38px;
    height: 38px;
    color: transparent;
}
.open_house-search-form .period-input::after {
    display: block;
    content: "";
    position: absolute;
    pointer-events: none;
}
.open_house-search-form .period-input::after {
    background: url("/assets/img/zehinfo/open_house/ico_calendar.svg") center center no-repeat;
    background-size: contain;
    width: 20.56px;
    height: 20.85px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 2;
}
.period-body-text{
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin: calc(12 / var(--font-size) * 1rem) auto;
    width: fit-content;
    display: block;
}
/* /開催期間カレンダー */



@media all and (min-width: 768px), print {
    .house-example-result-table{
        margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .house-example-result-table-note .c-note-txt{
        justify-content: end;
    }
    .house-example-lead-img{
        width: calc(89 / var(--font-size) * 1rem);
        height: calc(75 / var(--font-size) * 1rem);
        margin-left: auto;
    }
    .house-example-search-area--left {
        width: calc(606 / var(--font-size) * 1rem);
    }
    .house-example-search-area--right {
        width: calc(490 / var(--font-size) * 1rem);
    }

    /* 地図 */
    .house-example-search-map-list-item {
        --list-width: 205;
    }
    .house-example-search-map-list-item--hokkaido,
    .house-example-search-map-list-item--tohoku,
    .house-example-search-map-list-item--kanto,
    .house-example-search-map-list-item--kinki{
        --list-width: 190;
    }
    .house-example-search-map-list-item--shikoku{
        --list-width: 175;
        margin-left: calc(223 / var(--font-size) * 1rem);
    }
    .house-example-search-map-list-item--zenkoku {
        /* --list-bg-color: #EEEAD0; */
        --list-header-color: var(--primary-color-100);
    }
    .house-example-search-map__in {
        position: relative;
        height: calc(496 / var(--font-size) * 1rem);
    }
    .house-example-search-map__in::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("/assets/img/zehinfo/open_house/img_map_open_house.svg") no-repeat;
        background-position: top calc(18 / var(--font-size) * 1rem) left calc(20 / var(--font-size) * 1rem);
        background-size: calc(454 / var(--font-size) * 1rem) calc(440 / var(--font-size) * 1rem);
    }
    .house-example-search-map-detail__header-title, .house-example-search-map-detail__header-title .c-form-check input[type='checkbox'] + .c-form-check__label{
        font-weight: 400;
    }
    .house-example-search-map-detail__header {
        border-radius: calc(10 / var(--font-size) * 1rem);
    }
    .house-example-search-map-list-item--chugoku,
    .house-example-search-map-list-item--tohoku{
        margin-top: calc(176 / var(--font-size) * 1rem);
    }
    .house-example-search-map-list-item--chubu{
        margin-top: calc(84 / var(--font-size) * 1rem);
    }
    .house-example-search-map-list-item--kanto {
        margin-bottom: calc(136 / var(--font-size) * 1rem);
    }
    .house-example-search-table-chart__tr th {
        vertical-align: top;
    }
    .house-example-search-area__header {
        margin-bottom: calc(25 / var(--font-size) * 1rem);
    }
    .house-example-search-table-chart__tr td {
        background-color: var(--primary-color-10);
        padding: calc(22.5 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
        font-weight: 500;
    }
    .house-example-search-map-list-item--zenkoku {
        top: 0;
        left: 0;
    }
    .house-example-search-map-list-item--chubu {
        top: 0;
        left: 0;
    }
    
    .result-tpl{
        margin-left: .5em;
    }
    .form-row__col.form-row__col--m {
        width: calc(180 / var(--font-size) * 1rem);
    }
    .house-example-result-chart__thead .house-example-result-chart__th {
        padding: calc(14 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem);
    }
    .house-example-result-chart__tbody .house-example-result-chart__tr, .house-example-result-chart__tbody .house-example-result-chart__td {
        padding: calc(14 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .house-example-lead-img {
        width: calc(80 / var(--font-size) * 1rem);
        height: calc(67 / var(--font-size) * 1rem);
        margin-top: calc(30 / var(--font-size) * 1rem);
        margin-left: auto;
    }
    .house-example-sec--lead {
        margin-bottom: calc(50 / var(--font-size) * 1rem);
    }

    /* 地図 */
    .house-example-search-map {
        margin-top: calc(136 / var(--font-size) * 1rem);
    }
    .house-example-search-map-list-item + .house-example-search-map-list-item{
        margin-top: 0;
    }
    .house-example-search-map-list{
        position: relative;
        height: 425px;
        max-width: 325px;
        margin: 0 auto;
    }
    .house-example-search-map__in::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* height: 100%; */
        /* height: calc(425/375*100vw); */
        height: 425px;
        background: url("/assets/img/zehinfo/open_house/img_map_open_house_sp.svg") no-repeat;
        background-position: top center;
        background-size: contain;
    }
    .house-example-search-map-list-item--zenkoku .house-example-search-map-detail__header-title{
        justify-content: center;
    }
    .house-example-search-map-detail__header-in {
        padding: calc(16 / var(--font-size) * 1rem)calc(12 / var(--font-size) * 1rem);
    }
    .house-example-search-map-list-item {
        --list-width: 120;
    }
    .house-example-search-map-list-item--hokkaido {
        --list-width: 136;
        z-index: 10;

    }
    .house-example-search-map-list-item--kyushu{
        --list-width: 170;
        z-index: 10;

    }
    .house-example-search-map-list-item--zenkoku {
        --list-header-color: var(--primary-color-100);
        --list-width: 100%;
    }
    .house-example-search-map-list-item{
        position: absolute;
        inset: 0;
    }
    .house-example-search-map-list-item--zenkoku{
        top: calc(-106 / var(--font-size) * 1rem);
    }
    .house-example-search-map-list-item--hokkaido{
        left: unset;
        top: calc(-30 / var(--font-size) * 1rem);
        z-index: 2;
    }
    .house-example-search-map-list-item--tohoku{
        top: calc(-30 / var(--font-size) * 1rem);
        z-index: 2;
    }
    .house-example-search-map-list-item--chubu {
        top: calc(46 / var(--font-size) * 1rem);
        z-index: 3;
    }
    .house-example-search-map-list-item--chugoku {
        top: calc(122 / var(--font-size) * 1rem);
        z-index: 3;
    }
    .house-example-search-map-list-item--kyushu {
        top: unset;
        bottom: calc(-25 / var(--font-size) * 1rem);
    }
    .house-example-search-map-list-item--shikoku {
        top: unset;
        bottom: calc(42 / var(--font-size) * 1rem);
        left: calc(50 / var(--font-size) * 1rem);
        z-index: 3;
    }
    .house-example-search-map-list-item--kinki {
        top: unset;
        left: unset;
        bottom: calc(-25 / var(--font-size) * 1rem);
        z-index: 3;
    }
    .house-example-search-map-list-item--kanto {
        top: unset;
        left: unset;
        bottom: calc(42 / var(--font-size) * 1rem);
        z-index: 3;
    }
    /* /地図 */

    .house-example-search-area--right {
        margin-top: calc(78 / var(--font-size) * 1rem);
    }
    .house-example-search-table-chart__tr th{
        vertical-align: top;
    }
    .house-example-search-map-detail__header {
        border-radius: calc(5 / var(--font-size) * 1rem);
    }
    .house-example-result-table{
        margin-top: calc(20 / var(--font-size) * 1rem);

    }
    .house-example-result-chart {
        width: calc(1300 / var(--font-size)* 1rem);
    }
    .house-example-result-chart__tbody .house-example-result-chart__tr, .house-example-result-chart__tbody .house-example-result-chart__td {
        padding: calc(14 / var(--font-size) * 1rem)calc(8 / var(--font-size) * 1rem);
    }
    .house-example-search-table-chart__tr:nth-of-type(1) .form-row__col{
        width: fit-content;
    }
    .house-example-search-table-chart__tr:nth-of-type(2) .form-row__col{
        width: fit-content;
        min-width: calc(100 / var(--font-size) * 1rem);
    }
    
}