@charset "UTF-8";

:root {
    --red: #C80E47;
}

.header {
    padding: 0 0 3%;
}

.header__ttl {
    padding: 10% 7.8% 4%;
}

.article {
    padding: 9.5% 3.3% 7%;
}

.title {
    background-color: var(--white);
    position: relative;
    padding: 5% 0 4.2%;
    margin: 0 4%;
}

.title--mod {
    padding: 4.2% 0 5%;
}

.title img {
    position: absolute;
    bottom: 0;
    left: 0;
}

.title h2 {
    font-size: clamp(2.1rem, 6.6vw, 4.4rem);
    line-height: 1.4;
}

.title--mod h2 {
    font-size: clamp(1.9rem, 6vw, 4rem);
    line-height: 1.4;
}

.p1 {
    font-size: clamp(1.5rem, 4vw, 2.64rem);
}

.p2 {
    font-size: clamp(1.7rem, 4.4vw, 2.9rem);
}

.p3 {
    font-size: clamp(1.6rem, 5vw, 3.2rem);
}

.p4 {
    font-size: clamp(1.7rem, 5.35vw, 3.5rem);
}

.p5 {
    font-size: clamp(2.1rem, 6.6vw, 4.4rem);
}

.p6 {
    font-size: clamp(1.2rem, 3.7vw, 2.4rem);
}

.p7 {
    font-size: clamp(1.1rem, 3.1vw, 2rem);
}

.p8 {
    font-size: clamp(1.1rem, 3.4vw, 2.2rem);
}

.p9 {
    font-size: clamp(1.2rem, 3.8vw, 2.5rem);
}

.p10 {
    font-size: clamp(0.8rem, 2.9vw, 2rem);
    ;
}

.mrk {
    line-height: 1.8;
    background-color: color-mix(in srgb, var(--yellow) 32%, var(--white));
}

.pin_area {
    margin-top: 0;
}

.section h3 {
    font-size: clamp(1.8rem, 5vw, 3.3rem);
}

/***************************** 
電気代が気になる編
******************************/
.header p {
    background-color: var(--orange);
    color: var(--white);
    font-size: clamp(1rem, 2.2vw, 1.45rem);
    font-weight: 500;
    text-align: right;
    padding: 0 7% 3% 0;
    margin-top: -3%;
}

.section--electricBill h4,
.section--capacity h4 {
    background-color: var(--orange);
    padding: 3.5% 0%;
    margin-bottom: 7%;
}

.section--electricBill h4 img,
.section--capacity h4 img {
    width: 80.5%;
}

.section--electricBill .detail,
.section--capacity .detail__item {
    background-color: var(--white);
    margin: 10.5% 0 0;
    padding: 3.5% 0 10.5%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.section--electricBill .p2 {
    width: 92%;
    margin: 6.5% auto 0;
}

.section--electricBill .graph {
    width: 92%;
}

.js-scrollable {
    overflow-x: scroll;
}

.js-scrollable img {
    width: 197vw;
}

.guide img {
    width: 88%;
}

.section--electricBill strong.p5 {
    line-height: 1.4;
}

/* 能力差 section--capacity */
.section--capacity {
    padding: 10% 4%;
}

.section--capacity h3 {
    font-size: clamp(1.5rem, 4vw, 2.64rem);
}

.section--capacity h3 span {
    font-size: clamp(2rem, 6.1vw, 4rem);
    color: var(--orange);
    line-height: 1.3;
}

.section--capacity .detail__item {
    margin-top: 6.5%;
}

/* 運転能力 */
.detail__item--operation h4 img {
    width: 25%;
}

.detail__item--operation .inner {
    margin: 6.5% 13% 7%;
}

.detail__item--operation .operation {
    width: 92%;
    display: block;
    margin: 0 0 6% auto;
}

.comparison {
    background-color: color-mix(in srgb, var(--lightBlue) 10%, var(--white));
    padding: 5.5% 5% 4%;
}

.comparison dd {
    margin: 5% 6% 6%;
}

.comparison dd:nth-of-type(2) {
    margin: 5% 4% 6%;
}

.comparison dd p:first-of-type {
    font-size: clamp(1.1rem, 3.5vw, 2.3rem);
    letter-spacing: -0.1rem;
}

.comparison dd .p7 {
    color: color-mix(in srgb, var(--darkBlue) 70%, var(--white));
    line-height: 1.6;
    margin-top: 2%;
}

.comparison dd:nth-of-type(2) .p7 {
    letter-spacing: -0.09rem;
    padding: 0 1%;
}

.detail__item--operation img.graph {
    padding: 6.5%;
    width: 93%;
}

.detail__item--operation .p4 {
    color: var(--lightBlue);
    line-height: 1.3;
    letter-spacing: -0.1rem;
}

/*  お掃除  */
.section--capacity .detail__item:nth-of-type(2) {
    padding-bottom: 6.5%;
}

.detail__item--cleaning h4 img {
    width: 19%;
}

.frame {
    border: 3px solid var(--darkBlue);
    padding: 4.5% 0;
    margin: 4% 10% 2%;
    line-height: 1.3;
}

.frame span {
    color: var(--darkBlue);
}

.arrow img {
    width: 17%;
}

.rise {
    display: inline-block;
    font-size: clamp(2.3rem, 7.3vw, 4.8rem);
    color: var(--red);
    line-height: 1.2;
}

.detail__item--cleaning .p3 {
    line-height: 1.3;
    margin: 8.5% 0 3%;
}

.filter img {
    width: 88.5%;
}

.example {
    width: 90%;
}


/***************************** 
お手入れ編
******************************/
.section--cleaning {
    padding-top: 10%;
}

.section--cleaning .pin_area {
    margin-top: 1.5%;
}

.bothersome img {
    width: 88.5%;
}

.anxious img {
    width: 85%;
}

.detail__item--automatic,
.detail__item--internalC {
    background-color: var(--white);
    margin: 8% 0 0;
    padding: 7% 0 10.5%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    position: relative;
}

.detail__item--automatic::before,
.detail__item--internalC::before {
    display: inline-block;
    content: '';
    width: 21%;
    height: 15.5%;
    background-image: url(../img/care/care_point01.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -5%;
    left: -3.5%;
}

.detail__item--automatic .inner {
    letter-spacing: -0.1em;
    margin: 4% 12.5%;
}

.efficiency {
    width: 93%;
}

.smell {
    width: 81.5%;
}

.detail__item--internalC {
    margin-top: 3%;
}

.detail__item--internalC h4 span {
    display: block;
    color: var(--darkBlue);
}

.detail__item--internalC::before {
    background-image: url(../img/care/care_point02.png);
}

.mold {
    width: 89%;
}

.detail__item--internalC .inner {
    padding: 5% 3.5% 4%;
    margin: 5% 6% 0;
    background-color: color-mix(in srgb, var(--yellow) 32%, var(--white));
}

.detail__item--internalC .inner img {
    width: 90%;
}

.function {
    height: 28vw;
    display: flex;
    align-items: center;
    gap: 0 3%;
}

.function li {
    background-color: var(--orange);
    width: 49%;
    height: 100%;
    padding: 4% 2% 5%;
}

.function li p {
    color: var(--white);
    line-height: 1.3;
}

.function li span {
    display: block;
    background-color: var(--white);
    line-height: 1.3;
    padding: 2% 0 3%;
    border-radius: 50px;
    margin-bottom: 8%;
}

.function li:nth-of-type(2) span {
    padding: 9% 0;
}

.section--electric .line {
    width: 108%;
    margin: 2% 0 0 -4%;
}


/***************************** 
帰ってすぐ快適に過ごしたい編
******************************/
.comfortable .inner {
    background-color: var(--white);
    padding: 6.5% 4.5% 0;
    border-radius: 26px;
}

.comfortableList {
    background-color: color-mix(in srgb, var(--yellow) 32%, var(--white));
    padding: 7.5% 4.5%;
}

.comfortableList>li+li {
    margin-top: 7%;
}

.comfortableList__item {
    background-color: var(--white);
    padding: 8% 4%;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.smart {
    background-color: color-mix(in srgb, var(--yellow) 32%, var(--white));
    padding: 3.5% 0;
}

.smart p {
    display: flex;
    align-items: center;
    gap: 0 5%;
    line-height: 1.2;
}

.smart span {
    width: 39%;
    background-color: var(--orange);
    color: var(--white);
    text-align: center;
    padding: 5% 0;
    margin-left: 8%;
}

.comfortable .guide {
    width: 30%;
}

/***************************** 
ニオイが気になる編
******************************/
.cleaning {
    padding-bottom: 9.5%;
}

.cleaning .title span {
    color: var(--darkBlue);
}

.cleaningList,
.cleaning .notes {
    background-color: var(--white);
    border-radius: 26px;
    padding: 6.5% 4.5% 13%;
    margin-top: 7%;
}

.cleaningList__item .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6% 0 5.5%;
}

.cleaningList__item .flex img {
    width: 23.5%;
}

.youtube {
    aspect-ratio: 16 / 9;
}

.cleaningList__item .btn {
    margin: 5.5% 12.5% 0;
}

.cleaningList__item:nth-of-type(2) {
    background-color: color-mix(in srgb, var(--lightBlue) 10%, var(--white));
    padding: 5% 4.5% 13%;
    margin: 9.5% 0 8.5%;
}

.cleaningList__item h3 img {
    width: 91%;
    margin: 0 auto;
}

.cleaningList__item:nth-of-type(2) .p7,
.cleaningList__item:nth-of-type(2) .p8 {
    line-height: 1.8;
}

.cleaning .notes {
    padding: 7% 5% 8% 6.5%;
}

.cleaning .applyBtn {
    display: block;
    position: relative;
}

.cleaning .applyBtn p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cleaning .applyBtn .btn {
    background-color: var(--red);
    margin: 2% 16% 0;
}

.cleaning .applyBtn:nth-last-of-type(2n) .btn {
    background-color: #2A5CAA;
}

.cleaning .applyBtn:last-of-type .btn {
    background-color: var(--orange);
}

.cleaning .applyBtn::before,
.cleaning .applyBtn::after {
    display: block;
    content: '';
    background: url(../img/icon-deco-left.png) no-repeat top left / cover;
    width: 5.5%;
    height: 33%;
    position: absolute;
    top: -2%;
}

.cleaning .applyBtn::before {
    left: 15%;
}

.cleaning .applyBtn::after {
    background-image: url(../img/icon-deco-right.png);
    right: 15%;
}

.cleaning .applyBtn:nth-of-type(2):before {
    left: 8%;
}

.cleaning .applyBtn:nth-of-type(2):after {
    right: 8%;
}


/***************************** 
標準取付工事費込み価格
******************************/
.installation {
    padding-bottom: 15%;
}

.installation .section:not(:first-of-type) {
    opacity: 0;
}

.installation .section.fadeUp:not(:first-of-type) {
    opacity: 1;
    animation: fadeUp 0.5s ease;
}

.installation .title span {
    display: block;
    font-size: clamp(1.85rem, 5.8vw, 3.85rem);
    color: var(--darkBlue);
    letter-spacing: -0.2rem;
}

.installation .sec_inner {
    padding: 0 1.5%;
}

.installation .section__desc {
    font-size: clamp(1.5rem, 4vw, 2.64rem);
    background-color: var(--white);
    border-radius: 18px;
    padding-top: 8%;
    margin-top: 5%;
}

.installation .section__desc .p1 {
    display: inline-block;
    line-height: 1.3;
}

.installation .section__desc .p2 span {
    color: var(--orange);
    font-size: clamp(1.92rem, 6vw, 3.9rem);
    line-height: 1.2;
}

.installation .section__desc img {
    width: 28%;
    margin-top: 5%;
}

.installation .accordion,
.installation summary {
    display: block;
    color: var(--white);
    background-color: var(--lightBlue);
    border: 2px solid var(--darkBlue);
    text-align: left;
    padding: 1% 0 1% 8%;
    margin: 5% 4.8% 0;
    position: relative;
}

.installation details .accordion {
    color: var(--darkBlue);
    background-color: var(--white);
    margin: 0 4.8%;
    border-top: none;
}

.installation summary {
    margin: 0 4.8%;
    border-top: none;
}

.installation summary:hover {
    opacity: 0.5;
}

.installation .accordion::after,
.installation summary::after,
.installation details .accordion::after {
    display: block;
    content: "";
    background: url(../img/installation/icon_arrow-w.png) no-repeat top / cover;
    width: 5%;
    height: 30%;
    position: absolute;
    top: 50%;
    right: 5.5%;
    transform: translateY(-50%);
}

.installation summary::after {
    background-image: url(../img/installation/icon_p.png);
    height: 50%;
}

.installation details[open] summary::after {
    background-image: url(../img/installation/icon_m.png);
    height: 5%;
}

.installation details .accordion::after {
    background-image: url(../img/installation/icon_arrow-b.png);
}

.installation .red {
    color: var(--red);
    text-align: left;
    margin-top: 1%;
}

.installation .flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.section--standard .notes,
.section--replace .notes {
    margin: 1% 1.5% 0;
}

.section--replace .p1 {
    margin: 5% 8%;
}

.section--replace .speechB {
    background-color: color-mix(in srgb, var(--lightBlue) 10%, var(--white));
    padding: 4.5%;
    margin: 5% 3.5%;
    position: relative;
}

.section--replace .speechB::before {
    display: block;
    content: "";
    background-color: color-mix(in srgb, var(--lightBlue) 10%, var(--white));
    width: 7%;
    height: 20%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    top: -19%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.section--outlet {
    padding-bottom: 0;
}

.section--outlet .p1 {
    margin: 5% 8%;
}

.desc_list dt {
    font-size: clamp(1.7rem, 4.4vw, 2.9rem);
    border: 2px solid var(--darkBlue);
    margin: 8% 16% 5%;
}

.desc_list dt:not(:first-of-type) {
    margin: 12% 16% 5%;
}

.section--outlet .flex {
    align-items: center;
    justify-content: center;
}

.section--outlet .flex .p1 {
    margin: 0;
}

.section--outlet .flex img {
    margin-left: -3%;
}

.section--piping .p7 {
    margin: 5% 6% 6%;
}

.section--unit dt {
    background-color: color-mix(in srgb, var(--lightBlue) 10%, var(--white));
    font-size: clamp(1.3rem, 4vw, 2.7rem);
    margin: 6.5% 0 5%;
}

.section--unit .standard dt {
    background-color: var(--lightBlue);
    color: var(--white);
    padding: 2% 0;
    margin-top: 5%;
}

.section--unit .standard dd {
    background-color: color-mix(in srgb, var(--lightBlue) 10%, var(--white));
    padding: 3%;
}

.section--unit .work dt,
.section--unit .flexL span {
    background-color: var(--orange);
    padding: 1% 0;
}

.section--unit .work dt {
    margin: 6.5% 0 0;
}

.section--unit .work dd {
    padding: 3% 0;
}

.section--unit .work dd span {
    color: var(--orange);
}

.section--unit .flexL {
    width: 47%;
}

.section--unit .flexL span {
    display: inline-block;
    width: 100%;
    color: var(--white);
}

.section--unit .flexL p {
    line-height: 1.2;
    padding: 4% 5%;
}

.section--unit .flex img {
    width: 50%;
}

.section--unit .frame {
    width: 45%;
    height: 3.25em;
    border: 2px solid var(--darkBlue);
    padding: 3.4%;
    margin: 0;
}

.section--unit .center {
    align-items: center;
}

.section--unit .full {
    width: 96%;
    margin-top: 30%;
}

.section--unit p.full {
    line-height: 2;
}

.section--extension .sec_case {
    background-color: color-mix(in srgb, var(--lightBlue) 10%, var(--white));
    margin: 5% 0 0;
}

.section--extension .sec_case .inner {
    padding: 5% 8% 0;
}

.section--extension .sec_case ul {
    padding-right: 3%;
}

.section--extension .sec_case .same {
    padding: 5% 5% 8%;
}

.section--cover .inner {
    padding: 5% 8%;
}

.lastly .flex {
    padding: 10% 12% 6%;
}

.lastly .flex p {
    width: 60%;
}

.lastly .flex img {
    width: 50%;
}

.lastly .speechB {
    background-color: var(--white);
    border-radius: 15px;
    padding: 4% 0;
    margin: 0 3%;
    position: relative;
}

.bg_ye {
    display: inline-block;
    background-color: color-mix(in srgb, var(--yellow) 32%, var(--white));
}

.lastly .speechB span {
    color: var(--lightBlue);
}

.lastly .speechB::before {
    display: block;
    content: "";
    background-color: var(--white);
    width: 6%;
    height: 50%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    top: -30%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.p1_plus {
    font-size: clamp(1.3rem, 4vw, 2.64rem);
    padding-top: 3%;
}

.p1_plus3 {
    font-size: clamp(0.9rem, 2.5vw, 1.7rem);
}

/******** タブレット ********/
@media (660px < width) {
    .js-scrollable img {
        width: 1303px;
    }

    .comparison dt::before {
        width: 13px;
        height: 40px;
    }

    .function {
        height: 187px;
    }
}


/******** PC ********/
@media (999px < width) {
    .header__ttl {
        padding-top: 0;
    }
}