.inner {
    padding: min(80px, 15vw) 0;
}

.hdgroup {
    margin-bottom: min(80px, 12vw);
    text-align: center;
}

.hdgroup .icon {
    width: min(200px, 36%);
    margin-bottom: 2em;
    margin-inline: auto;
}

.hdgroup .title {
    font-size: 2em;
    line-height: 1.5;
}

@media screen and (max-width:767px) {
    .hdgroup .title {
        font-size: min(3em, 5vw);
    }
}

.hdgroup .title .large {
    font-size: 1.2em;
}

.hdgroup .lead {
    margin-top: 2em;
}

/* summary */
.summary {}

.summary .main-figure {
    width: min(880px, 100%);
    margin: min(80px, 12vw) auto 0;
}

.summary .main-figure figcaption {
    margin-top: 1em;
    line-height: 2;
    font-size: 1.2em;
}

.summary .main-figure img {
    width: 100%;
    height: auto;
}

@media screen and (max-width:767px) {
    .summary .main-figure figcaption {
        font-size: min(15px, 4.2vw);
    }
}

.summary .arrow {
    width: 0;
    height: 3em;
    margin: 2em auto;
    border-right: solid 2px;
    position: relative;
}

.summary .arrow::after {
    content: '';
    display: block;
    width: 1.4em;
    height: 1.4em;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: solid 2px;
    border-right: solid 2px;
    rotate: 45deg;
    translate: -80% -30%;
    transform-origin: center bottom;
}

.summary .summary-lead {
    line-height: 1.8;
    font-size: 1.1em;
    font-weight: 500;
}

@media screen and (max-width:767px) {
    .summary .summary-lead {
        font-size: min(16px, 3.8vw);
    }
}

/* data */
.contents-wrp.data {
    background-color: var(--gray);
}

.tab-list {
    width: min(1000px, 94%);
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}

.tab-list .tab {
    width: 45%;
    margin-bottom: -1px;
    padding: 1em;
    text-align: center;
    font-size: clamp(12px, 2.8vw, 18px);
    background-color: #fff;
    border: solid 1px #666;
    border-bottom: none;
    background-color: color-mix(in srgb, var(--data-color) 30%, #fff);
    position: relative;
    cursor: pointer;
    transition: all .3s ease;
}

.tab-list .tab.on {
    z-index: 2;
    cursor: default;
}

.tab-list:not(.footer-tab) .tab:not(.on):hover {
    padding: .75em 1em;
}

.footer-tab.tab-list .tab {
    margin: 3em auto 0;
    border-bottom: solid 1px #666;
}

.footer-tab.tab-list .tab.on {
    display: none;
}

@media screen and (max-width:750px) {
    .footer-tab.tab-list .tab {
        margin-top: 2em;
        width: 100%;
    }
}

.tab-list .tab[data-tab="energy_saving"] {
    --data-color: #81d0d1;
}

.tab-list .tab[data-tab="comfort"] {
    --data-color: #f39944;
}

.data-wrp {
    width: min(1000px, 94%);
    margin: 0 auto;
    border: solid 1px #666;
    position: relative;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}

.data-box {
    padding: min(80px, 10vw) min(60px, 5vw);
    background-color: #fff;
}

.data-box.energy_saving-box {
    --data-color: #81d0d1;
}

.data-box.comfort-box {
    --data-color: #f39944;
    display: none;
}

.data-box .data-hdgroup {
    margin: max(-80px, -10vw) max(-60px, -5vw) 0;
    padding: min(80px, 10vw) min(40px, 4vw) 0 min(60px, 5vw);
    display: grid;
    grid-template-areas: 'title ill' 'note ill';
    grid-template-columns: auto 55%;
    background: linear-gradient(color-mix(in srgb, var(--data-color) 30%, #fff) 70%, #fff 70%);
}

@media screen and (max-width:767px) {
    .data-box .data-hdgroup {
        grid-template-areas: 'title' 'ill' 'note';
        grid-template-columns: auto;
        gap: 2em 0;
    }
}

.data-box .data-hdgroup .title {
    grid-area: title;
    line-height: 1.6;
    text-align: left;
    font-size: min(4vw, 2.5em);
}

@media screen and (max-width:767px) {
    .data-box .data-hdgroup .title {
        margin-bottom: 1em;
        text-align: center;
        font-size: min(6vw, 32px);
    }
}

.data-box .data-hdgroup .title span {
    font-weight: 400;
}

.data-box .data-hdgroup .note {
    grid-area: note;
    width: fit-content;
    text-align: left;
    margin-top: 1em;
    font-size: .8em;
}

@media screen and (max-width:767px) {
    .data-box .data-hdgroup .note {
        margin-top: 0;
        line-height: 1.6;
        font-size: 2.7vw;
    }
}

.data-box .data-hdgroup .illust {
    grid-area: ill;
    margin-top: -10%;
}

@media screen and (max-width:767px) {
    .data-box .data-hdgroup .illust {
        width: min(460px, 90%);
        margin-inline: auto;
    }
}

.data-box .data-hd {
    margin-bottom: 1em;
    font-size: min(1.6em, 4.6vw);
    text-align: left;
    font-weight: 500;
    position: relative;
}

@media screen and (max-width:767px) {
    .data-box .data-hd {
        font-size: min(24px, 5vw);

    }
}

.data-box .data-hd:not(:first-child) {
    margin-top: 3em;
}

.data-box .data-hd::before {
    content: '';
    display: inline-block;
    width: .7em;
    height: .7em;
    margin-right: .5em;
    background-color: var(--data-color);
    /* vertical-align: 0lh; */
    /* scale: .55; */
    /* transform-origin: left 0; */
    border-radius: 100%;
}

.data-box .data-hd+p {
    text-align: left;
    line-height: 1.8;
}

@media screen and (max-width:767px) {
    .data-box .data-hd+p {
        font-size: min(14px, 4.2vw);
    }
}


@media screen and (max-width:767px) {
    .data-box [class^="w"] {
        width: 100%;
    }
}

.data-box figure {
    margin: 3em auto 0;
}


@media screen and (min-width:768px) {
    .data-box [class*="flex"]>figure {
        margin: 0;
    }
}

.data-box figure img {
    display: block;
    margin: 0 auto;
}

@media screen and (max-width:640px) {
    .data-box figure img {
        width: 100%;
    }

    .data-box picture img:not(.spw100) {
        width: min(380px, 90%);
        padding: 1em 0;
    }
}

.data-box figure figcaption {
    width: fit-content;
    margin: 0 auto 1em;
    padding: 0 .25em .5em;
    border-bottom: solid 1px var(--data-color);
    /*     background-color: #fff; */
    font-size: min(1em, 4.2vw);
    font-weight: 500;
}

@media screen and (max-width:767px) {
    .data-box figure figcaption {
        font-size: min(16px, 4vw);
    }
}

.data-box figure .note {
    width: fit-content;
    margin: 1em auto 0;
    text-align: left;
}

.data-box figure .note-wrp {
    margin: 2em auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
}

@media screen and (max-width:767px) {
    .data-box figure .note-wrp {
        flex-wrap: wrap;
    }
}

.data-box figure .note-wrp .note {
    margin: 0;
}

@media screen and (max-width:767px) {
    .data-box figure .note-wrp .note:not(dl) {
        width: 100%;
    }
}

.data-box figure dl.note {
    /* margin-top: .5em; */
    padding: 1em min(2em, 3vw);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2em 0;
    font-size: min(.85rem, 12px);
    line-height: 1.5;
    border: solid 1px #ccc;
    flex-shrink: 0;
}

.data-box figure dl.note dd::before {
    content: '：';
}

@media screen and (max-width:767px) {
    .data-box figure dl.note {
        font-size: min(2.8vw, .85rem, 11px);
    }
}

.data-box .column {
    margin-top: 3em;
    background-color: color-mix(in srgb, var(--data-color) 12%, #fff);
    padding: min(40px, 5vw);
    text-align: left;
}

.data-box .column .column-title {
    margin-bottom: 2em;
    font-size: min(1.1em, 4vw);
    font-weight: 500;
}

.data-box .column p {
    line-height: 1.8;
}

@media screen and (max-width:767px) {
    .data-box .column .column-title {
        margin-bottom: 1em;
        font-size: min(18px, 4.4vw);
    }

    .data-box .column p {
        font-size: min(14px, 4.2vw);
    }

    .data-box .column figure {
        width: min(360px, 100%);
    }
}

/* @media screen and (max-width:767px) {
    .data-box .comfort-fig4 img {
        width: min(360px, 100%);
    }
} */

.comfort-fig5 {
    gap: 3em 0;
}

.comfort-fig5 .fig-box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
}

@media screen and (max-width:767px) {
    .comfort-fig5 .fig-box {
        width: 100%;
    }

    .comfort-fig5 .fig-box:first-child img {
        width: 38%;
    }
}

.fixedBnr {
    z-index: 100;
}