:root {
    --white: #fff;
    --bg: #fffded;
    --base1: #fffadb;
    --yellow__lite: #fbffd3;
    --yellow__heavy: #f1eaa7;
    --yellow__bg: #f5eeb8;
    --green__lite: #fbffd3;
    --green1: #ccdcae;
    --green2: #ccdc91;
    --green3: #c3d58d;
    --green4: #83a991;
    --green5: #4a957e;
    --green__con: #004500;
    --orange: #ea4f18;
    --orange__lite: #ff9777;
    --font__color: #3d3125;
    --box__shadow: rgba(0, 0, 0, 0.1);
    --button__gradient: linear-gradient(135deg, #fed395 0%, #ea4f18 40%, #ea4f18 100%);
    --gray: #585858;
}

.center {
    margin: 0 auto;
}

.contents__wrap {
    width: 100%;
    margin: 0 auto;
    padding: 4rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* 工事内容＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

.energy__info__wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.energy__info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 4rem 1rem;
}

.energy__info__inner {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 500px 1fr;
    align-items: center;
    background: var(--base1);
    border-radius: 1rem;
    gap: 1rem;
    overflow: hidden;
    padding-right: 1rem;
}

.energy__info__inner img {
    width: 100%;
    max-width: 500px;
    border-radius: 1rem 0 0 1rem;
    margin-right: auto;
}

.energy__info__inner .text__wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
}

.energy__info__inner .text__wrap h5 {
    width: fit-content;
    padding-left: 1.5em;
    letter-spacing: 0.1em;
    font-size: clamp(1.215rem, 1.028rem + 0.93vw, 1.728rem);
    position: relative;
}

.energy__info__inner .text__wrap h5::after {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 1em;
    background: var(--green5);
    position: absolute;
    top: 0.1em;
    left: 0;
}

.energy__info__inner .text__wrap p {
    width: fit-content;
    background: var(--white);
    padding: 0.5em 1.5em;
    position: relative;
    border-radius: 0 1rem 1rem 0;
}


.energy__info__inner .text__wrap p::after {
    content: "";
    width: 0.5em;
    height: 100%;
    background: var(--orange);
    position: absolute;
    top: 0;
    left: 0;
}

.energy__info hr {
    position: relative;
    margin-bottom: 50px;
}

.energy__info hr::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    --r: 3px;
    /* border radius */
    height: 30px;
    aspect-ratio: 2;
    --_g: calc(var(--r)/tan(22.5deg)) top var(--r), #000 98%, #0000 101%;
    -webkit-mask:
        conic-gradient(from 157.5deg at 50% calc(var(--r)/(3*sqrt(2) - 4) - 100%/tan(22.5deg)), #000 45deg, #0000 0) 0 0/100% calc(100% - var(--r)/sqrt(2)) no-repeat,
        radial-gradient(var(--r) at 50% calc(100% - var(--r)*sqrt(2)), #000 98%, #0000 101%),
        radial-gradient(var(--r) at left var(--_g)),
        radial-gradient(var(--r) at right var(--_g));
    clip-path: polygon(50% 100%, 100% 0, 0 0);
    background: var(--yellow__heavy);
}

/* まとめて導入 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/

.bg__base1 {
    background: var(--base1);
}

.energy__issue {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.energy__issue__inner {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.energy__issue__inner ul {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
}

.energy__issue__inner ul li {
    font-size: clamp(1.138rem, 1.028rem + 0.55vw, 1.44rem);
}


.energy__issue__inner ul li i {
    color: var(--green4);
    margin-right: 0.5em;
}

.energy__issue p {
    width: fit-content;
    max-width: 900px;
    margin: 0 auto;
    background: var(--white);
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 0 1rem 1rem 0;
    position: relative;
    font-size: clamp(1.138rem, 1.028rem + 0.55vw, 1.44rem);
}

.energy__issue p::after {
    content: "";
    width: 0.5em;
    height: 100%;
    background: var(--orange);
    position: absolute;
    top: 0;
    left: 0;
}

/* エネルギーリフォームの予算＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

.energy__budget__wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.energy__budget {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.table__wrap {
    width: 100%;
    height: 100%;
    overflow-x: auto;
}

.table__wrap table {
    width: 100%;
    margin: 0 auto;
    text-wrap: nowrap;
}

.table__wrap table tr {
    border-bottom: 2px solid var(--yellow__heavy);
    font-size: 1.1em;
}

.table__wrap table tr th {
    padding: 0.5em 1em 0.5em 0;
}

.table__wrap table tr td {
    padding: 0.5em 1em 0.5em 0;
}

.align__right {
    text-align: right;
}

/* 補助金＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

.energy__subsidy {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.energy__subsidy img {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.energy__subsidy p {
    width: fit-content;
    margin: 0 auto;
    padding: 0.5em 1em 0.5em 1.5em;
    background: var(--white);
    line-height: 1.6em;
    position: relative;
    border-radius: 0 1rem 1rem 0;
    font-size: clamp(1.138rem, 1.028rem + 0.55vw, 1.44rem);
}

.energy__subsidy p::after {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 100%;
    background: var(--orange);
    top: 0;
    left: 0;
}

.energy__subsidy table {
    width: 100%;
    max-width: 500px;
}

small.center {
    width: fit-content;
    margin: 0 auto;
}

/* エネルギーリフォームのポイント＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

.energy__summary {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1rem;
}

.energy__summary ul {
    width: fit-content;
    margin: 0 auto;
    font-size: clamp(1.138rem, 1.028rem + 0.55vw, 1.44rem);
    line-height: 1.6em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    background: var(--white);
    padding: 1em 1em 1em 2em;
    border-radius: 0 1rem 1rem 0;
    position: relative;
}

.energy__summary ul::after {
    content: "";
    width: 0.5em;
    height: 100%;
    background: var(--orange);
    position: absolute;
    top: 0;
    left: 0;
}

.energy__summary ul i {
    margin-right: 0.5em;
    color: var(--green4);
}

/* よくある質問＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

.faq details {
    width: 100%;
    max-width: 600px;
    margin: 1em auto;
    background: var(--base1);
    padding: 0.5em 1em;
    border-radius: 1rem;
    font-size: clamp(1.067rem, 1.019rem + 0.24vw, 1.2rem);
}

.faq details i {
    margin-right: 0.8em;
}

.faq summary {
    font-weight: bold;
    cursor: pointer;
}

.faq summary i {
    color: var(--orange);
}

.faq p {
    margin: 0.5em 0 0 0;
}

.faq p i {
    color: var(--green5);
}

/* まずはお気軽にご相談ください＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

.contact__announce {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact__announce h4 {
    padding-left: 1em;
    position: relative;
}

.contact__announce h4::after {
    content: "";
    width: 0.5em;
    height: 1em;
    background: var(--orange);
    position: absolute;
    top: 0.1em;
    left: 0;
}

.contact__announce .text__wrap {
    width: 100%;
    max-width: 800px;
    background: var(--base1);
    border-radius: 1rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
}

.contact__announce img {
    width: 50%;
    max-width: 200px;
    margin: 0 auto -2rem auto;
}


.contact__announce p {
    width: fit-content;
    margin: 0 auto;
    font-size: clamp(1.067rem, 1.019rem + 0.24vw, 1.2rem);
}

.contact__announce p i {
    color: var(--green5);
}

.energy__contact__button {
    width: fit-content;
    background: var(--button__gradient);
    padding: 0.3em 2em;
    font-size: clamp(1.2rem, 1.055rem + 0.73vw, 1.6rem);
    letter-spacing: 0.05em;
    border-radius: 0.5em;
    box-shadow: 0px 0px 10px var(--box__shadow);
    display: flex;
    gap: 0.5em;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--white);
    position: relative;
    margin: 0 auto;
}

.energy__contact__button .button__arrow {
    width: 2rem;
    position: absolute;
    top: 0;
    right: -1rem;
    bottom: 0;
    margin: auto 0;
    animation: arrow 1s ease-in-out infinite;
}

.energy__contact__button:hover {
    box-shadow: none;
    color: var(--gray);
}

.energy__contact__button:hover .button__arrow {
    animation: none;
}

@keyframes arrow {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateX(-0.2rem);
    }

    75% {
        transform: translateX(0.2rem);
    }

    100% {
        transform: translateY(0);
    }
}

/* 省エネリフォーム ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

/* 施工事例 */

.eco__works__wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.eco__works {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 0 1rem;
}

.works__img__wrap {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.works__img__wrap small {
    margin-left: auto;
}

.eco__work {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.eco__work__text {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 1rem;
}

.eco__work__text h4 {
    padding-left: 1em;
    position: relative;
}

.eco__work__text h4::after {
    content: "";
    width: 0.5em;
    height: 100%;
    background: var(--orange);
    position: absolute;
    top: 0;
    left: 0;
}

.eco__work__text h4.green::after {
    background: var(--green4);
}

.eco__work__text p {
    width: fit-content;
    margin: 0 auto;
}

/* 工事内容（インプラス） */

.eco__work__flow {
    display: grid;
    grid-template-columns: 1fr 2rem 1fr 2rem 1fr;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.flow__inner {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.eco__work__flow i {
    font-size: 2rem;
    color: var(--orange__lite);
}

.eco__work__flow img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    background: var(--bg);
    padding: 1rem;
    border-radius: 1rem;
}

/* 外壁材の熱貫流率 */

.eco__work__text h5{
    width:fit-content;
    margin:0 auto;
    padding:0.2em 1em;
    border-radius: 2em;
    background:var(--green4);
}

table.eco__work__table{
    width:fit-content;
    margin:0 auto;
}

/* 省エネリフォームの予算  */

.eco__budget {
    width: 100%;
    max-width: 700px;
}

/* 補助金活用 */


/* 下部画像スライド＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

.img__slide {
    width: 100%;
    height: 200px;
    margin: 1rem 0;
    background-repeat: repeat-x;
    background-position: 0 0;
    animation: img__slide 30s linear infinite;
}

.img__slide.energy {
    background-image: url(../images/energy/energy16.webp);
}

.img__slide.eco {
    background-image: url(../images/eco/eco10.webp);
}

@keyframes img__slide {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -2800px 0;
    }
}

/* レスポンシブ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

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

    .contents__wrap {
        padding: 2rem 0;
    }

    /* 工事内容 */

    .energy__info {
        padding: 0 1rem;
        gap: 1rem;
    }

    .energy__info__inner {
        display: flex;
        flex-direction: column;
    }

    .energy__info__inner .text__wrap {
        padding: 0 0 1rem 1rem;
        gap: 1rem;
    }

    /* 工事工程 */

    .eco__work__flow {
        display: flex;
        flex-direction: column;
    }

    .eco__work__flow i {
        transform: rotate(90deg);
    }

    .eco__work__flow img {
        max-width: 200px;
    }

    .eco__works {
        gap: 2rem;
    }

    /* 最後のスライド画像 */

    .img__slide {
        height: 100px;
        background-size: cover;
    }

    @keyframes img__slide {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -1400px 0;
        }
    }
}