.sclstart {
    opacity: 0;
    transform: translateY(1em);
}

.sclup {
    opacity: 0;
    transform: translateY(3rem);
}

.airtight .sclup.on,
.airtight .sclstart.on {
    transition: transform .75s ease, opacity .75s ease;
}

.airtight .scldown {
    transform: translateY(-3rem) scaleY(.7);
}

.airtight .scldown.on {
    transform: translateY(0) scaleY(1);
    transition: transform .75s .75s ease, opacity .75s .75s ease;
}

.airtight .sclleft {
    transform: translateX(-2rem) translateY(0);
}

.airtight .sclleft.on {
    transform: translateX(0) translateY(0);
    transition: transform .75s .5s ease, opacity .75s .5s ease;
}

@keyframes zoom {
    0% {
        transform: scale(1);
        background-color: #d05c0f;
    }

    100% {
        transform: scale(1.2);
        background-color: #feb200;
    }
}

.airtight .tech-header .title {
    font-size: min(3.3em, 8vw);
}

.airtight .tech-header .tech-point-navi-title-wrp {
    display: inline-block;
    padding: 1.65em 8em;
    background: linear-gradient(180deg, rgb(255, 222, 103) 0%, rgba(236, 143, 81, 1) 50%, rgba(208, 92, 15, 1) 100%);
    color: #f9f9f9;
    text-shadow: 0 0 5px #d05c0f;
    overflow: clip;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .airtight .tech-header .tech-point-navi-title-wrp {
        font-size: 1.6em;
        padding: 1em;
    }
}

.airtight .tech-header .tech-point-navi-title {
    padding: 0;
    font-size:2.2em;
    background: transparent;
}

@media (max-width: 767px) {
    .airtight .tech-header .tech-point-navi-title {
        font-size: 1em;
    }
}

/* .airtight .tech-header .tech-point-navi-title {
    color: #f9f9f9;
    background: linear-gradient(180deg, rgb(255, 222, 103) 0%, rgba(236, 143, 81, 1) 50%, rgba(208, 92, 15, 1) 100%);
    text-shadow: 0 0 5px #d05c0f;
    overflow: clip;
} */

/* .airtight .tech-header .tech-point-navi-title span {
    display: inline-block;
    background: linear-gradient(transparent 90%, #f4c741 90%);
} */

.airtight .tech-header .tech-point-navi-title-wrp .note {
    text-align: center;
    font-size: .8rem;
}

.airtight .tech-anchor-btn-wrp {
    gap: 1em;
}

@media screen and (max-width:767px) {
    .airtight .tech-anchor-btn-wrp {
        gap: unset;
    }
}

.airtight .d-orange {
    color: #d05c0f;
}

.airtight .number {
    font-size: 1.2em;
}

@media screen and (max-width:767px) {
    .airtight .number {
        font-size: 1.1em;
    }
}

.airtight .marker {
    background: linear-gradient(transparent 70%, #edc88d 70%);
}

.airtight .co-title {
    font-size: min(1.8em, 6vw);
    margin-bottom: .75em;
    text-align: center;
}

.airtight .co-lead {
    font-size: min(1.1em, 4vw);
    margin-bottom: 2.5em;
    text-align: center;
}

@media screen and (max-width:767px) {
    .airtight .co-lead {
        text-align: justify;
    }
}

.airtight .large {
    font-size: 1.2em;
}

.airtight table {
    width: 100%;
    border: 1px solid #555;
    table-layout: fixed;
}

.airtight td,
.airtight th {
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
    vertical-align: middle;
    font-size: min(1em, 3vw);
}

/* tech1 grade info */
.airtight .grade-info-tabele-wrp {
    width: 60%;
}

@media screen and (max-width:767px) {
    .airtight .grade-info-tabele-wrp {
        width: 100%;
    }
}

.airtight .grade-info-wrp {
    width: 36%;
    padding-top: 3em;
}

@media screen and (max-width:767px) {
    .airtight .grade-info-wrp {
        width: 100%;
    }
}

.airtight .grade-info-wrp .title {
    font-size: min(1.1em, 5vw);
    font-feature-settings: "palt";
    letter-spacing: .05em;
    margin-bottom: .5em;
    color: #d05c0f;
}

.airtight .grade-info-wrp p {
    font-size: min(.9em, 4vw);
}

.airtight .grade {
    background-color: #edc88d;
}

.airtight .l-yellow {
    background-color: #fdfeef;
}

.airtight .area.yellow,
.airtight .grade.yellow {
    background-color: #fbefce;
}

.airtight .grade.orange {
    background-color: #ec8f51;
}

.table-grade-wrp {
    position: relative;
    padding-left: 3em;
    overflow: clip;
}

.airtight .table-grade-wrp .level {
    width: 2em;
    padding: .5em;
    position: relative;
    display: block;
    height: 100%;
    background: #ec8f51;
    background: linear-gradient(180deg, rgba(237, 200, 141, 1) 0%, rgba(236, 143, 81, 1) 50%, rgba(208, 92, 15, 1) 100%);

    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.2;
    padding: .5em;
    padding-top: 5em;
    clip-path: polygon(100% 0, 100% 95%, 50% 100%, 0 95%, 0 0);
}

.airtight .table-grade {
    width: 100%;
    background-color: #fff;
    margin: 1em auto;
}

.airtight .table-grade td {
    border-bottom: 1px dashed;
    line-height: 1.5;
}

.airtight .table-grade .grade {
    width: 6em;
    padding: .5em;
    text-align: center;
}

@media screen and (max-width:767px) {
    .airtight .table-grade .grade {
        width: 4em;
    }
}

.airtight .table-grade .year {
    padding: .5em;
    text-align: left;
}

.airtight .table-grade .year h3 {
    font-feature-settings: "palt";
    letter-spacing: .05em;
}

.airtight .table-grade .value {
    width: 9em;
    padding: .5em;
    text-align: center;
}

.airtight .table-grade .value .number {
    font-size: 1.2em;
}

.airtight .table-grade .ua-value .ua {
    display: block;
    padding: .5em;
    background: #ec8f51;
    background: linear-gradient(180deg, rgba(237, 200, 141, 1) 0%, rgba(236, 143, 81, 1) 50%, rgba(208, 92, 15, 1) 100%);
    clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
}

.airtight .table-grade .ua-value .ua .large {
    display: inline-block;
    font-size: 1.2em;
}

.airtight .area-table-wrp {
    width: 60%;
}

.airtight .area-jp-map {
    width: 38%;
    padding-top: 1em;
}

@media screen and (max-width:767px) {
    .airtight .area-table-wrp {
        width: 100%;
    }

    .airtight .area-jp-map {
        width: 100%;
        padding-top: 0;
    }
}

.airtight .area-table {
    width: 100%;
    margin: 1em 0 2em;
    background-color: #fff;
}

.airtight .area-table td,
.airtight .area-table th {
    padding: .5em;
    text-align: center;
    font-size: min(.8em, 3vw);
    line-height: 1.5;
}

@media screen and (max-width:767px) {

    .airtight .area-table td,
    .airtight .area-table th {
        padding: .25em;
    }
}

.airtight .area-table .area-color {
    display: block;
    width: 100%;
    height: 1.5em;
}

.airtight .area-table .area-color.area1 {
    background-color: #1d2b6b;
}

.airtight .area-table .area-color.area2 {
    background-color: #1b439a;
}

.airtight .area-table .area-color.area3 {
    background-color: #15803c;
}

.airtight .area-table .area-color.area4 {
    background-color: #f1d83e;
}

.airtight .area-table .area-color.area5 {
    background-color: #f4ad31;
}

.airtight .area-table .area-color.area6 {
    background-color: #fc703f;
}

.airtight .area-table .area-color.area7 {
    background-color: #e11313;
}

.airtight .area-table .area-color.area8 {
    background-color: #6e277a;
}

.airtight .grade-comment {
    display: block;
    background-color: #ec8f51;
    /* background: linear-gradient(180deg, rgba(236, 143, 81, 1) 0%, rgba(208, 92, 15, 1) 100%); */
    background: linear-gradient(180deg, rgb(255, 209, 45) 0%, rgba(236, 143, 81, 1) 50%, rgba(208, 92, 15, 1) 100%);
    padding: 1em;
    border-radius: 4px;
    width: 100%;
    position: relative;
    text-shadow: 0 0 5px #d05c0f;
}

.airtight .grade-comment::before {
    content: '';
    display: block;
    width: 1em;
    height: 1.5em;
    background-color: rgb(255, 209, 45);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    position: absolute;
    top: -1.5em;
    left: 70%;
}

.airtight .grade-comment .grade-comment-text {
    color: #fff;
    font-size: min(1.3em, 4vw);
    text-align: center;
}

.airtight .grade-comment .large {
    display: inline-block;
    font-size: 1.5em;
}

.airtight .grade-comment .fukidashi {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7em;
    height: 7em;
    font-size: min(1em, 4vw);
    line-height: 1.5;
    border-radius: 100%;
    border: 5px solid;
    color: #d05c0f;
    background-color: #fff;
    position: absolute;
    top: -1em;
    left: -2.5em;
    text-shadow: 0 0 0 #ffc927;
}

.airtight .area-map {
    border: 2px solid #555;
    padding: 1.5em;
    margin-top: 2em;
    background-color: rgba(255, 255, 255, .5);
}

@media screen and (max-width:767px) {
    .airtight .area-map {
        padding: 1em;
    }
}

.airtight .title-wrp {
    text-align: center;
    margin-bottom: 1em;
}

.airtight .dash-title {
    display: inline-block;
    font-size: min(1.4em, 4vw);
    padding: .5em 2.5em;
    position: relative;
}

.airtight .dash-title::before,
.airtight .dash-title::after {
    content: '';
    width: 1.75em;
    height: 0;
    border-bottom: 1px solid;
    position: absolute;
    top: 50%;
}

.airtight .dash-title::before {
    left: 0;
}

.airtight .dash-title::after {
    right: 0;
}

.airtight .standard3-wrp {
    margin-top: 3em;
    background-color: #fff;
    padding: 1.5em 3em;
    border-radius: 5px;
}

@media screen and (max-width:767px) {
    .airtight .standard3-wrp {
        padding: 1em;
    }
}

.airtight .standard3-wrp .text-box,
.airtight .standard3-wrp .img-box {
    width: 49%;
}

@media screen and (max-width:767px) {

    .airtight .standard3-wrp .text-box,
    .airtight .standard3-wrp .img-box {
        width: 100%;
    }
}

.airtight .standard3-wrp ul {
    counter-reset: number;
}

.airtight .standard3-wrp li {
    font-size: min(1.2em, 4vw);
    padding-left: 2em;
    position: relative;
    border-bottom: 1px dotted #555;
    margin-bottom: .5em;
    padding-bottom: .5em;
    counter-increment: number;
}

.airtight .standard3-wrp li::before {
    content: counter(number);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.3em;
    height: 1.3em;
    background-color: #fff;
    color: #d05c0f;
    border-radius: 100%;
    border: 2px solid #d05c0f;
    position: absolute;
    top: 0.15em;
    left: 0;
}

/* tech2 */
.airtight .insulation {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3em 0;
}

.airtight .insulation .element {
    width: min(520px, 48%);
}

@media screen and (max-width:767.9px)  {
    .airtight .insulation .element {
        width: 100%;
    }
}

.airtight .insulation .element .bgorange {
    margin-bottom: 1em;
    padding: .25em;
    background-color: #d05c0f;
    color: #fff;
    border-radius: 4px;
    text-align: center;
}

@media screen and (min-width:641px) {
    .airtight .insulation .element.material .material-container {
        display: grid;
        grid-template-areas: 'title1 title2 title3' 'item1 item1 item2' 'note note note';
        grid-template-columns: 30% 30% 34%;
        grid-template-rows: auto 1fr;
        gap: 0 3%;
    }
}

@media screen and (max-width:640.9px) {
    .airtight .insulation .element.material .material-container {
        display: grid;
        grid-template-areas: 'title1 title2' 'item1 item1' 'title3 null' 'item2 null';
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 0 1em;
    }
}

@media screen and (min-width:641px) {
    .airtight .insulation .element.frontage .window-container {
        display: grid;
        grid-template-areas: 'title1 title1 title2' 'item1-1 item1-2 item2' 'note note note';
        grid-template-columns: repeat(3, 1fr);
        gap: 0 1em;
    }
}

@media screen and (max-width:640.9px) {
    .airtight .insulation .element.frontage .window-container {
        display: grid;
        grid-template-areas: 'title1 title1' 'item1-1 item1-2' 'note note' 'title2 null' 'item2 null';
        grid-template-columns: repeat(2, 1fr);
        gap: 0 1em;
    }
}

.airtight .insulation .element .title-wrp.title1 {
    grid-area: title1;
}

.airtight .insulation .element .title-wrp.title2 {
    grid-area: title2;
}

.airtight .insulation .element .title-wrp.title3 {
    grid-area: title3;
}

.airtight .insulation .element .item-box.item1 {
    grid-area: item1;
}

.airtight .insulation .element .item-box.item1-1 {
    grid-area: item1-1;
}

.airtight .insulation .element .item-box.item1-2 {
    grid-area: item1-2;
}

.airtight .insulation .element .item-box.item2 {
    grid-area: item2;
}

.airtight .insulation .element .title-wrp {
    margin-bottom: 1em;
}

@media screen and (max-width:640.9px) {
    .airtight .insulation .element .title-wrp~.title-wrp {
        margin-top: 2em;
    }

    .airtight .insulation .element .title-wrp+.title-wrp {
        margin-top: 0;
    }
}

.airtight .insulation .element .orange-title {
    padding-bottom: .1em;
    font-size: min(1em, 3.4vw);
    color: #d05c0f;
    font-weight: bold;
    border-bottom: solid 2px;
    position: relative;
    z-index: 2;
}

/* material-container */
.airtight .insulation .element.material .orange-title::before {
    content: '';
    width: 2px;
    background-color: #501700;
    position: absolute;
    left: calc(50% - 1px);
    top: calc(100% + 2px);
}

.airtight .insulation .element.material .orange-title::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: #501700;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%)
}

@media screen and (max-width:767.9px) {
    .airtight .insulation .element.material .orange-title:before,
    .airtight .insulation .element.material .orange-title::after {
        font-size: 2.7vw;
    }

    @media screen and (max-width:640.9px) {
        .airtight .insulation .element.material .orange-title:before,
        .airtight .insulation .element.material .orange-title::after {
            font-size: 4vw;
        }
    }
}

.airtight .insulation .element.material .title1 .orange-title::before {
    height: 3em;
}

.airtight .insulation .element.material .title1 .orange-title::after {
    left: 50%;
    top: calc(100% + 3em);
}

.airtight .insulation .element.material .title2 .orange-title::before {
    width: 47%;
    height: 4.2em;
    left: auto;
    right: 50%;
    clip-path: polygon(3px 0%, 100% 100%, calc(100% - 3px) 100%, 0% 0%);
    transform: rotateX(180deg);
}

.airtight .insulation .element.material .title2 .orange-title::after {
    left: 5%;
    top: calc(100% + 4.2em);
}

.airtight .insulation .element.material .title3 .orange-title::before {
    width: 5.5%;
    height: 6em;
    left: 50%;
    clip-path: polygon(2px 0%, 100% 100%, calc(100% - 2px) 100%, 0% 0%);
}

.airtight .insulation .element.material .title3 .orange-title::after {
    left: 55%;
    top: calc(100% + 6em);
}

.airtight .insulation .element.material .material-container .item-box figure {
    height: 100%;
    position: relative;
}

.airtight .insulation .element.material .material-container .item-box figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.airtight .insulation .element.material .material-container .item-box figcaption {
    padding: .3em .5em;
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: #d05c0f;
    background-color: #fff;
    border: solid 2px;
    font-size: min(.85em, 3.4vw);
    line-height: 1;
    border-radius: 4px;
}

/* window-container */
.airtight .insulation .element.frontage .window-container .caption-container {
    margin-top: .75em;
}

.airtight .insulation .element.frontage .window-container .caption-container .caption-title {
    font-weight: bold;
    font-size: min(.9em, 3.2vw);
    line-height: 1.5;
}

.airtight .insulation .element.frontage .window-container .caption-container .caption-title .hd {
    display: block;
    width: max-content;
    margin-bottom: .25em;
    padding: .15em 1em;
    background-color: #d05c0f;
    color: white;
    font-size: .8em;
    border-radius: 2em;
    vertical-align: .15em;
}

@media screen and (max-width:640px) {
    .airtight .insulation .element.frontage .window-container .caption-container .caption-title .hd {
        display: block;
        width: fit-content;
    }
}

.airtight .insulation .element.frontage .window-container .caption-container .caption2 {
    margin-left: -.5em;
    font-size: min(.8em, 3vw);
    font-weight: normal;
}

.airtight .insulation .element.frontage .window-container .caption-container .caption2 sup {
    margin-left: -.5em;
}

.airtight .insulation .element.frontage .window-container .note {
    grid-area: note;
    margin-top: .5em;
    font-size: min(.8em, 3vw);
}


/* insulation-point */
.airtight .insulation-point {
    width: 100%;
    margin-top: min(60px, 10vw);
    position: relative;
}

.airtight .insulation-point .point-btn {
    display: inline-block;
    font-size: min(1.1em.4vw);
    border-radius: 4px;
    position: absolute;
    border: 3px solid #d05c0f;
    /* overflow: hidden; */
    background-color: #d05c0f;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    transition: all .3s;
}

.airtight .insulation-point .point-btn:hover {
    border: 3px solid #020024;
    background-color: #020024;
}

.airtight .insulation-point .point-btn::before {
    content: '＋';
    color: #fff;
    width: 2em;
    height: 2em;
    background-color: #d05c0f;
    border-radius: 100%;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    position: absolute;
    top: -1em;
    left: -1em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    animation-name: zoom;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.airtight .insulation-point .point-btn:hover::before {
    background-color: #020024;
}

.airtight .insulation-point .point-btn .bgorange {
    display: inline-block;
    color: #fff;
    padding: .3em 1em;
}

.airtight .insulation-point .point-btn .bgwhite {
    display: inline-block;
    background-color: #fff;
    color: #d05c0f;
    padding: .3em 1em;
    transition: all .3s;
}

@media screen and (max-width:767px) {

    .airtight .insulation-point .point-btn .bgorange,
    .airtight .insulation-point .point-btn .bgwhite {
        display: none;
    }
}

.airtight .insulation-point .point-btn:hover .bgwhite {
    color: #020024;
}

.airtight .insulation-point .point-btn1 {
    top: 7%;
    left: 33%;
}

.airtight .insulation-point .point-btn2 {
    top: 25%;
    left: 44%;
}

.airtight .insulation-point .point-btn3 {
    top: 56%;
    left: 20%;
}

.airtight .insulation-point .point-btn4 {
    top: 52%;
    left: 48%;
}

.airtight .insulation-point .point-btn5 {
    bottom: 5%;
    left: 35%;
}

/* .insulation-img {
    padding: 1em;
}

.insulation-img-inner {
    width: 100%;
    max-width: 980px;
    margin: 2em auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

@media screen and (max-width:767px) {
    .insulation-img-inner {
        margin: 4em auto;
        padding: 10px;
    }
}

.insulation-floor .insulation-img-inner,
.insulation-wall .insulation-img-inner {
    max-width: 680px;
    margin: 20% auto;
} */


/* tech3 */
.airtight .construction-point-wrp {
    width: 60%;
    padding-top: 1em;
}

.airtight .gap-area-wrp {
    width: 35%;
}

@media screen and (max-width:767px) {
    .airtight .construction-point-wrp {
        width: 100%;
    }

    .airtight .gap-area-wrp {
        width: 100%;
    }
}

.airtight .construction {
    padding-bottom: 1em;
    border-bottom: 1px dotted #555;
    margin-bottom: 1em;
}

.airtight .construction .img-box {
    width: 25%;
    position: relative;
}

.airtight .construction .text-box {
    width: 70%;
    position: relative;
}


.airtight .construction .text-box .construction-point .tag {
    display: inline-block;
    padding: .25em 1em;
    border-radius: 4px;
    margin-bottom: 1em;
    background-color: #d05c0f;
    text-align: center;
    min-width: 5em;
    color: #fff;
}

.airtight .construction .text-box .construction-lead {
    font-size: min(1.3em, 5vw);
}

.airtight .unit-work {
    width: 100%;
    /* border: 2px solid #555; */
    padding: 1.5em;
    margin-top: 3em;
    /* background-color: rgba(255, 255, 255, .5); */
}

/* .airtight .unit-work .text-box {
    width: 45%;
} */

@media screen and (max-width:767px) {
    .airtight .unit-work .text-box {
        width: 100%;
    }
}

.airtight .unit-work .text-box .dot-title {
    font-size: min(1.4em, 5vw);
    margin-bottom: 1em;
}

.airtight .unit-work .text-box p {
    font-size: min(1.3em, 4vw);
    margin-bottom: 1em;
}

.airtight .mov-box {
    width: 100%;
    margin: 1em auto;
    position: relative;
}

@media screen and (max-width:767px) {
    .airtight .mov-box {
        width: 100%;
    }
}

.airtight .mov-box video {
    width: 100%;
    aspect-ratio: 16/9;
}