/**************************

    窓リノベ用CSS

**************************/

/*-----------------------------------

    共通

-----------------------------------*/


:root {
    --main-color: #338E8E;
    --sub-color: #DE7B1E;
    --sub-color2: #1497D9;
    --font-color: #333333;
    --white-color: #ffffff;

    --header-main-color: var(--main-color);
    --header-bg-color: var(--white-color);
    --header-font-color: var(--main-color);
}

html,
body {
    background-color: #F6EFE0;
    letter-spacing: .03em;
    line-height: 1.3;
    color: #333333;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    scroll-padding-top: 48px;
    overflow-x: hidden;
}

main {
    padding-top: 30px;
}

section {
    max-width: 1200px;
    margin: 0 auto;
}

img {
    display: block;
    width: 100%;
    object-fit: cover;
}

ul,
ol,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    max-width: 40em;
    margin: 1em auto;
}

p > b {
    font-weight: 800;
    color: var(--main-color);
}

.bp {
    display: inline-block;
}

p strong {
    color: var(--main-color);
    font-weight: 600;
    font-size: clamp(20px, 1.2vw + 0.5rem, 26px);
    line-height: 2;
}

.gene-head {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    color: var(--main-color);
}

.gene-head b {
    padding: 0 4px;
    font-size: clamp(48px, 6vw, 80px);
}

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(80%, 250px);
    min-width: fit-content;
    padding: 10px 32px 10px 20px;
    margin: 1em auto;
    font-size: 1em;
    color: var(--main-color);
    font-weight: 600;
    background-color: var(--white-color);
    border-radius: 999px;
    border: 1px solid var(--main-color);
    transition: transform .2s;
    cursor: pointer;
}

.btn:hover {
    transform: scale(1.05);
}

.btn::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 16px;
    transform: translateY(-40%);
    display: block;
    width: 16px;
    aspect-ratio: 6 / 5;
    background: url(btn-arrow-g.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.btn.right::after {
    transform: translateY(-50%) rotate(-90deg);
}

.btn.back::after {
    transform: translateY(-50%) rotate(90deg);
}

.dashline-head {
    position: relative;
    display: block;
    font-size: clamp(20px, 3vw, 24px);
    width: 100%;
    margin: 1em 0;
    z-index: 10;
}

.dashline-head::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background: linear-gradient(to left, var(--sub-color), var(--sub-color) 3px, transparent 3px, transparent 6px);
    background-repeat: repeat-x;
    background-size: 6px 2px;
    z-index: -10;
}

.dashline-head span {
    display: block;
    width: fit-content;
    background: var(--sub-color);
    padding: 4px 2em;
    border-radius: 999px;
    color: var(--white-color);
    font-weight: 700;
}



/*追従ボタン*/

.follow-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 10px;
    font-weight: 600;
    border: 4px solid var(--main-color);
    background-color: var(--white-color);
    box-shadow: 0 4px 10px rgb(51 51 51 / 20%);
    border-radius: 100vw;
    z-index: 999;
    transition: transform .2s;
}

.follow-btn:hover {
    transform: scale(1.05);
}

/* 追従ボタンがフォームエリアより下に位置するときの挙動 */
.follow-btn.hide {
    display: none;
}

.follow-btn p {
    color: var(--main-color);
    text-align: center;
    line-height: 1;
    margin: 0;
    font-size: 1em;
}

.follow-btn p::after {
    content: "";
    display: block;
    width: 16px;
    aspect-ratio: 1 / 1;
    margin: 10px auto 0;
    background-image: url(btn-arrow-g.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.follow-btn b {
    line-height: 1.6;
    text-align: center;
    font-size: 1.125em;
}

/*FV*/

#fv {
    box-sizing: border-box;
    line-height: 1.3;
}

#fv .catch {
    padding: 0 16px;
    overflow-x: hidden;
}

#fv .catch .main {
    position: relative;
    display: block;
    width: fit-content;
    line-height: 1em;
    color: var(--sub-color);
    text-align: center;
    font-weight: 700;
    font-size: clamp(24px, 5vw, 48px);
    margin: 0 auto;
    z-index: 30;
}

#fv .catch .main > p {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

#fv .catch .main b.hot {
    position: relative;
    display: inline-block;
    padding: 8px 6px 8px 8px;
    letter-spacing: .1em;
    color: var(--white-color);
    background-image: url(bg-circle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: visible;
}

#fv .catch .main .btm {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fv .catch .main .btm b.huge {
    display: block;
    font-size: clamp(64px, 15vw, 110px);
    line-height: 1em;
    color: var(--sub-color);
}

#fv .catch .main .btm .vertical {
    display: block;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    line-height: 1.3;
    margin-top: .2em;
}

#fv .catch .main .btm .ex-qu {
    position: absolute;
    display: block;
    margin: 0;
    bottom: 0;
    left: 100%;
    font-size: clamp(32px, 12vw, 72px);
    transform: rotate(12deg);
}

#fv .catch p.sub {
    position: relative;
    background: var(--white-color);
    padding: .5em 1em;
    margin: 1em auto 0;
    border-radius: 24px;
    color: var(--main-color);
    font-weight: bold;
    text-align: center;
    line-height: 1.2em;
    z-index: 20;
    box-sizing: border-box;
}

#fv .catch p.sub b {
    font-size: 1.25em;
}

#fv img.main-img {
    position: relative;
    display: block;
    margin: -32px 0 0;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    z-index: 10;
}

#fv img.neko-hot {
    position: relative;
    display: block;
    width: min(60%, 200px);
    margin: -48px 0 auto auto;
    z-index: 20;
}

@media (min-width: 640px) {
    #fv {
        position: relative;
        height: clamp(300px, 60vh, 500px);
    }

    #fv .catch {
        width: 100%;
        padding-right: 40%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

    #fv .catch .main {
        width: 100%;
        font-size: clamp(24px, 5vw, 48px);
    }

    #fv .catch .main > p {
        background: #F6EFE0;
        padding: 0 0;
        margin: 4px auto;
    }

    #fv .catch .main .btm b.huge {
        font-size: clamp(54px, 12vw, 110px);
    }
    
    #fv .catch .main .btm .ex-qu {
        color: #F6EFE0;
        bottom: 16px;
        left: 100%;
        font-size: clamp(64px, 8vw, 96px);
    }

    #fv .catch p.sub {
        width: 100%;
        max-width: 35em;
    }
    
    #fv > img.main-img {
        position: absolute;
        display: block;
        width: 50%;
        height: 100%;
        top: 0;
        right: 16px;
        object-fit: cover;
        margin: 0;
    }

    #fv img.neko-hot {
        position: absolute;
        margin: 0;
        bottom: -48px;
        right: 16px;
    }
}

/*--------------------------------------

    こんなお悩みありませんか？
    
---------------------------------------*/

section#problem {
    position: relative;
    margin: 0 16px 72px;
    padding: 16px 16px 32px;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom, transparent, rgb(255 208 163 / 0) 50%, rgb(255 208 163 / 1));
}

section#problem::after {
    position: absolute;
    content: '';
    top: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: 64px;
    clip-path: polygon(
        0 0,
        100% 0,
        50% 100%
    );
    background: rgb(255 208 163);
}

#problem h2 {
    font-size: clamp(24px, 3.5vw, 28px);
    color: var(--sub-color);
    font-weight: bold;
    text-align: center;
}

#problem h2 b {
    font-size: 1.45em;
    background-image: radial-gradient(circle at center, var(--sub-color) 20%, transparent 20%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 1em .3em;
    padding-top: 4px;
    margin: 0 4px;
}

#problem > ul {
    margin: 1em 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    justify-content: center;
    gap: 8px;
    list-style: none;
    max-width: 760px;
}

#problem > ul li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-size: clamp(1em, 3vw, 1.2em);
    font-weight: 500;
    padding: 8px;
    border-radius: 24px;
    background: var(--white-color);
    box-sizing: border-box;
}

#problem > ul li::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: 16px;
    border: solid 2px var(--sub-color);
}

#problem > ul li b {
    font-size: 1.125em;
    font-weight: 800;
    color: var(--sub-color);
}

@media (min-width: 768px) {
    section#problem {
        margin: 0 auto 72px;
    }

    #problem > ul {
        margin: 16px auto 0;
    }
}

/*--------------------------------------

    暑さの原因は窓でした
    
---------------------------------------*/

#factor {
    padding: 0 16px;
    box-sizing: border-box;
}

#factor p {
    margin: 1em 0;
}

#factor p b {
    font-size: 1.25em;
    margin: 0 4px;
}

#factor .gene-head {
    text-align: center;
}

#factor > .box {
    display: block;
    background: var(--white-color);
    border-radius: 24px;
    padding: 24px 16px;
    box-sizing: border-box;
    margin: -16px auto 0;
}

#factor > .box .img {
    position: relative;
    width: 100%;
}

#factor > .box img.main-img {
    display: block;
    width: min(100%, 600px);
    margin: 0 auto;
}

#factor > .box img.kikumaru-img {
    margin: -16px 0 0 auto;
    width: min(80%, 200px);
    aspect-ratio: 5 / 4;
    object-fit: contain;
}

@media (min-width: 640px) {
    #factor .box {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 32px;
        padding-bottom: 48px;
    }

    #factor .box > div.img {
        flex-basis: 60%;
        flex-grow: 1;
    }

    #factor > .box img.main-img {
        width: 100%;
    }

    #factor > .box img.kikumaru-img {
        position: absolute;
        margin: 0;
        top: 90%;
        right: 0%;
    }
    
    #factor .box > p {
        flex-basis: min(50%, 400px);
    }
}

/*--------------------------------------

    窓を変えると、暮らしははこう変わります。
    
---------------------------------------*/

section#wdw-change {
    margin: 0 auto;
    padding: 24px 16px;
}

#wdw-change > section {
    padding: 0;
    margin: 64px 0 0;
}

#wdw-change p.intro-txt {
    display: block;
    width: fit-content;
    margin: 1em auto;
}

#wdw-change > section > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}

#wdw-change > section > ul li {
    display: block;
    background: var(--white-color);
    border-radius: 24px;
    border: solid 2px var(--sub-color);
    padding: 16px;
    box-sizing: border-box;
}

#wdw-change > section.other > ul li {
    border-color: var(--main-color);
}

#wdw-change > section.other > ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--main-color);
    font-weight: 700;
}

#wdw-change > section > h3 {
    display: block;
    margin-bottom: .25em;
    font-weight: 800;
    font-size: clamp(24px, 3.5vw, 32px);
    color: var(--sub-color);
}

#wdw-change > section.other > h3 {
    color: var(--main-color);
}

#wdw-change > section > ul li h4 {
    display: block;
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 800;
    color: var(--sub-color);
    width: fit-content;
    margin: 0 auto 1em;
    background-image: linear-gradient(to top, #FFE7B2 .5em, transparent .5em);
}

#wdw-change > section.other > ul li h4 {
    color: var(--main-color);
    background-image: linear-gradient(to top, #DBF0F0 .5em, transparent .5em);
}

#wdw-change .btm-txt {
    display: block;
    margin: 48px auto 0;
    text-align: center;
    font-weight: bold;
    font-size: 1.25em;
}

#wdw-change .btm-txt b {
    font-size: 1.25em;
}

/*--------------------------------------

    数字で見る断熱窓の実力
    
---------------------------------------*/

div.num-wr {
    position: relative;
    background: var(--main-color);
    padding: 24px 16px;
    margin: 32px auto;
    color: white;
}

#in-number {
    position: relative;
}

#in-number::before {
    position: absolute;
    content: '';
    bottom: 100%;
    right: 0;
    width: clamp(100px, 15%, 200px);
    aspect-ratio: 1 / 1;
    background-image: url(neko.gif);
    background-size: contain;
    background-repeat: no-repeat;
}

#in-number .gene-head {
    text-align: center;
    color: white;
}

#in-number .grid-wr {
    margin: 24px 0;
}

#in-number .grid-wr > div {
    position: relative;
    background: white;
    color: var(--font-color);
    border-radius: 24px;
    padding: 16px;
    margin: 8px 0;
    font-weight: 600;
    box-sizing: border-box;
}

#in-number .grid-wr > div::after {
    position: absolute;
    content: '';
    bottom: 8px;
    right: 16px;
    width: min(20%, 60px);
    aspect-ratio: 1 / 1;
    z-index: 10;
}

#in-number .grid-wr > div.tmp::after {
    background-image: url(temp-icon.svg);
    background-size: contain;
    background-position: right bottom; 
    background-repeat: no-repeat;
}

#in-number .grid-wr > div.cost::after {
    background-image: url(cost-icon.svg);
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
}

#in-number .grid-wr > div.noise::after {
    background-image: url(noise-icon.svg);
    background-size: contain;
    background-position: right bottom; 
    background-repeat: no-repeat;
}

#in-number .grid-wr > div h3 {
    margin: 0;
    text-align: center;
    color: var(--sub-color2);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
}

#in-number .grid-wr > div ul {
    margin: 32px 0 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

#in-number .grid-wr > div ul li {
    background-image: url(bg-arrow.svg);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
}

#in-number .grid-wr > div .place {
    text-align: center;
    margin: 0;
}

#in-number .grid-wr > div .num {
    position: relative;
    text-align: center;
    z-index: 20;
}

#in-number .grid-wr > div .num b.huge {
    font-size: clamp(54px, 5vw, 72px);
    font-weight: 900;
    color: var(--sub-color2);
    padding: 0 8px;
}

#in-number .grid-wr > div .num span.mdl {
    font-size: 0.75em;
    margin: 0 4px;
}

#in-number .grid-wr > div .num span.sml {
    font-size: 0.5em;
}

#in-number .grid-wr > div .num small {
    background: var(--white-color);
    padding: 0 8px;
}

@media (min-width: 500px) {
    #in-number .grid-wr > div.tmp > ul {
        flex-direction: row;
        justify-content: center;
    }

    #in-number .grid-wr > div.tmp > ul > li {
        width: min(45%, 300px);
    }
}

@media (min-width: 640px) {
    #in-number .grid-wr {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 8px;
    }

    #in-number .grid-wr > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 24px;
        margin: 0;
    }

    #in-number .grid-wr > div:first-child {
        grid-column: 1 / 4;
    }

    #in-number .grid-wr > div:nth-of-type(2) {
        grid-column: 1 / 3;
    }

    #in-number .grid-wr > div:last-child {
        grid-column: 3 / 4;
    }

    #in-number .grid-wr > div::after {
        width: 100px;
    }
}

/*--------------------------------------

    断熱窓のヒミツ
    
---------------------------------------*/

section#himitsu {
    margin: 32px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

#himitsu ul.txt li {
    margin: 16px 0;
}

#himitsu .wr {
    margin-top: 24px;
}

#himitsu .wr img {
    max-width: 350px;
    margin: 0 auto;
}

#himitsu ul.txt li h3 {
    display: block;
    color: var(--main-color);
    font-weight: 800;
    font-size: clamp(18px, 3vw, 20px);
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: solid 2px var(--main-color);
}

#himitsu .btm-txt {
    display: block;
    width: fit-content;
    margin: 1em auto;
    font-size: 1.25em;
}

#himitsu .btm-txt b {
    font-size: 1.25em;
    color: var(--main-color);
}

@media (min-width: 640px) {
    #himitsu .wr {
        display: flex;
        align-items: flex-start;
        gap: 5%;
    }

    #himitsu .wr img {
        flex-basis: 45%;
        max-width: unset;
        width: 45%;
    }

    #himitsu .wr ul {
        flex-basis: 55%;
    }
}

/*--------------------------------------

    補助金
    
---------------------------------------*/

section#subsidy {
    margin: 0 16px;
    padding: 24px 16px;
    color: white;
    box-sizing: border-box;
    background-image: linear-gradient(rgb(51 142 142 / .7), rgb(51 142 142 / .7)), url(system.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 24px;
}

#subsidy h2 {
    font-size: clamp(24px, 3.5vw, 32px);
    font-weight: 700;
    margin: 0 0 1.5em;
    text-align: center;
}

#subsidy h2 b {
    font-size: 1.25em;
    font-weight: 600;
    border-bottom: solid 3px var(--white-color);
}

#subsidy > p b {
    color: var(--white-color);
    text-decoration: underline;
    font-size: 1.25em;
    font-weight: 700;
}

#subsidy .contact-txt {
    text-align: center;
    margin: 32px auto 1em;
    font-size: 1.15em;
    font-weight: 600;
}

#subsidy .btn {
    margin-top: 0;
}

@media (min-width: 1100px) {
    section#subsidy {
        margin: 64px auto;
    }
}

/*--------------------------------------

    1窓60分の簡単リフォーム
    
---------------------------------------*/

section#reform {
    margin: 48px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

#reform .intro-txt {
    max-width: none;
    margin: 1em 0;
}

#reform > ul.item-wr {
    max-width: 1024px;
    margin: 0 auto;
}

#reform > ul.item-wr li {
    margin: 32px 0;
}

#reform > ul.item-wr li img {
    max-width: 350px;
    margin: 1em auto;
}

@media (min-width: 640px) {
    #reform > ul.item-wr {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto 1fr;
        gap: 1em;
    }

    #reform > ul.item-wr li {
        margin: 0;
    }

    #reform > ul.item-wr > li:first-child {
        grid-column: 1 / 3;
    }

    #reform > ul.item-wr > li:first-child .wr {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 5%;
    }

    #reform > ul.item-wr > li:first-child .wr > img,
    #reform > ul.item-wr > li:first-child .wr > p {
        width: 45%;
    }

    #reform > ul.item-wr > li:nth-of-type(2) {
        grid-column: 1 / 2;
    }

    #reform > ul.item-wr > li:last-child {
        grid-column: 2 / 3;
    }

    #reform > ul.item-wr li img {
        margin: 0;
    }
}

/*--------------------------------------

    住まいに合わせてご提案します
    
---------------------------------------*/

section#suggest {
    margin: 96px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

#suggest ul.box-wr {
    margin: 32px 0;
}

#suggest ul.box-wr hr.dashline {
    width: min(100%, 800px);
    border: none;
    border-top: dashed 2px var(--sub-color);
    margin: 1em auto;
}

#suggest ul.box-wr > li {
    background: var(--white-color);
    border-radius: 24px;
    padding: 24px 16px;
    margin: 16px 0;
    box-sizing: border-box;
}

#suggest ul.box-wr > li h3 {
    color: var(--sub-color);
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 800;
    text-align: center;
    margin: 0 0 1em;
}

#suggest ul.box-wr > li h4 {
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    margin: 1em 0;
    color: var(--sub-color);
}

#suggest ul.box-wr > li p {
    margin: 1em 0;
}

#suggest ul.box-wr > li img {
    display: block;
    width: min(100%, 400px);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

#suggest ul.box-wr > li .wr {
    margin: 16px 0;
}

#suggest ul.box-wr ul.colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px 4px;
    margin: 16px 0;
}

#suggest ul.box-wr ul.colors li img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

#suggest ul.box-wr > li:last-child .wr > img {
    object-fit: contain;
}

#suggest ul.box-wr ul.colors li p {
    font-size: .85em;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

@media (min-width: 640px) {
    #suggest ul.box-wr > li .wr {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 1em;
        max-width: 800px;
        margin: 0 auto;
    }
    
    #suggest ul.box-wr > li:last-child .wr {
        flex-direction: row-reverse;
    }

    #suggest ul.box-wr > li .wr > img {
        width: 45%;
    }

    #suggest ul.box-wr > li .wr > p,
    #suggest ul.box-wr > li .wr > div {
        width: 45%;
    }

    #suggest ul.box-wr > li:first-child .wr {
        flex-direction: row-reverse;
    }
}

/*--------------------------------------

    実際にどう変わった？
    
---------------------------------------*/

section#how-change {
    padding: 0 16px;
    margin: 32px auto;
    box-sizing: border-box;
}

#how-change .fukidashi {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: .75em 24px;
    margin: 1em auto;
    background: var(--white-color);
    color: var(--sub-color);
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
    border-radius: 999px;
    z-index: 10;
}

#how-change .fukidashi::after {
    position: absolute;
    content: '';
    display: block;
    width: 30px;
    aspect-ratio: 40 / 47;
    bottom: 0;
    right: 0;
    background-image: url(fukidashi_ashi.svg);
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: -10;
}

#how-change .fukidashi .main {
    margin: 0;
    font-size: 20px;
}

#how-change .fukidashi .sub {
    position: relative;
    display: block;
    width: fit-content;
    padding: 0 24px;
    margin: 8px auto 0;
    font-weight: 500;
    text-align: center;
}

#how-change .fukidashi .sub::before,
#how-change .fukidashi .sub::after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    background: var(--sub-color);
}

#how-change .fukidashi .sub::before {
    left: 0;
}

#how-change .fukidashi .sub::after {
    right: 0;
}

@media (min-width: 640px) {
    #how-change .fukidashi {
        padding: .75em 64px;
        max-width: 100%;
    }
}

/*----------------------------------------
    以下、「実際にどう変わった？」と「施工事例」の共通css
*/

ul.case > li {
    margin: 48px 0;
}

ul.case .wr > img {
    display: block;
    width: min(100%, 400px);
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin: 1em auto;
}

ul.case .wr dl {
    background: var(--white-color);
    padding: 16px;
    margin: 1em 0;
    border-radius: 24px;
    box-shadow: 0 0 15px rgb(0 0 0 / .15);
    box-sizing: border-box;
}

ul.case .wr dl > div {
    padding: .5em 0;
    border-bottom: dashed 1.5px var(--sub-color);
}

ul.case  .wr dl > div dt {
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--sub-color);
}

@media (min-width: 640px) {
    ul.case .wr {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        gap: 1em;
        margin-top: 24px;
    }

    ul.case .wr > img,
    ul.case .wr > div {
        width: 45%;
        margin: 0;
    }
}

/*----------------------------------------
    以上、「実際にどう変わった？」と「施工事例」の共通css 終了
*/

/*--------------------------------------

    施工事例
    
---------------------------------------*/

section#works {
    padding: 0 16px;
    box-sizing: border-box;
    margin: 32px auto;
}

/*--------------------------------------

    窓リノベページ お問い合わせ
    
---------------------------------------*/

section#form {
    position: relative;
    padding: 32px 16px;
    background: var(--main-color);
    color: white;
    max-width: unset;
    z-index: 1000;
}

#form h2.gene-head {
    text-align: center;
    color: var(--white-color);
}

/*------------------------
　入力時の画面拡大を防ぐ
------------------------*/
#form input,
#form select,
#form textarea {
    font-size: 1em;
}

/*------------------------
　小見出し
------------------------*/
#form dt {
    text-align: left;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--color-white);
}

#form dl div {
    margin: 30px auto;
    color: var(--color-white);
}


/*------------------------------------------------------------

    入力フォーム(top)

------------------------------------------------------------*/

#contact-form {
    max-width: 800px;
    margin: 0 auto;
}


/*--- 入力欄（お問い合わせ内容） ---*/
#form dl textarea {
    width: 80%;
    height: 240px;
}

#form p.intro {
    display: block;
    padding: 0;
    margin: 1em auto;
    width: fit-content;
}

#form dl {
    color: var(--color-main);
}

#form dl dd {
    padding: 0;
    margin: 0;
}

#form dl input,
#form dl select,
#form dl textarea {
    margin: 0 0 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 52px;
    -webkit-appearance: none;
    appearance: none;
    font-size: 1em;
    border-radius: 6px;
    border: solid 1px var(--color-main);
    padding: 16px;
    box-sizing: border-box;
}

#form dl select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23338E8E' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px;
}

#form dl .radio dd p {
    display: flex;
    justify-content: left;
    margin: 1em auto 1em 0;
}

#form dl .radio dd p label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* 上の一括リセット（appearance:none）を打ち消してラジオの丸を復活させる */
#form dl .radio dd p input[type="radio"] {
    -webkit-appearance: radio;
    appearance: radio;
    width: 1.1em;
    height: 1.1em;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    margin: 0 .5em 0 0;
    flex: none;
    accent-color: var(--main-color);
    cursor: pointer;
}

#form dl span.l_required {
    background: rgb(193, 61, 61);
    color: white;
    padding: 2px 8px;
    margin: 0 8px;
    font-size: .8em;
}

#form p.pp {
    display: block;
    width: fit-content;
    margin: 1em auto;
}

#form p.pp > a {
    color: var(--color-accent);
}

/* 「ご来店予約」がチェックされた時 */
#form dl:has(#reserve:checked) .date dt .l_required,
#form dl:has(#reserve:checked) .hour dt .l_required {
    display: inline-block;
}

/* 「ご来店予約」以外がチェックされた時 */
#form dl:not(:has(#reserve:checked)) .date dd input:disabled,
#form dl:not(:has(#reserve:checked)) .hour dd select:disabled {
    opacity: 1;
    background-color: #bbbbbb;
}

#form dl:not(:has(#reserve:checked)) .date dt .l_required,
#form dl:not(:has(#reserve:checked)) .hour dt .l_required {
    display: none;
}

@media (min-width: 768px) {
    #form dl {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr) auto;
        gap: 2em;
    }

    #form dl > div {
        width: 100%;
        margin: 0;
    }

    #form dl > div:nth-of-type(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    #form dl > div:nth-of-type(2) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    #form dl > div:nth-of-type(3) {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    #form dl > div:nth-of-type(4) {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    #form dl > div:nth-of-type(5) {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    #form dl > div:nth-of-type(6) {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }

    #form dl > div:nth-of-type(7) {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
    }
}


/*-------------------------------------------------------------

confirm

--------------------------------------------------------------*/

/* submitと共通 */

#confirm section,
#submit section {
    padding: 0 16px;
    box-sizing: border-box;
}

#confirm h1,
#submit h1 {
    text-align: center;
    color: var(--main-color);
}

#confirm .btn::after,
#submit .btn::after {
    transform: translateY(-50%) rotate(-90deg);
}

#confirm .btn.back,
#submit .btn.back {
    background: var(--main-color);
    color: var(--white-color);
}

#confirm .btn.back::after,
#submit .btn.back::after {
    background-image: url(btn-arrow-w.svg);
    transform: translateY(-50%) rotate(90deg);
}

#confirm dd {
    text-align: left;
    margin-left: 30px;
}

#confirm .intro {
    display: block;
    width: fit-content;
    margin: 1em auto;
}

#confirm .form_list {
    max-width: 600px;
    margin: 0 auto;
}

#confirm .form_list dt {
    width: 100%;
    font-weight: bold;
}

#confirm .form_list dd {
    flex-grow: 1;
    margin-bottom: 16px;
}

@media (min-width: 600px) {

    #confirm .form_list > div {
        display: flex;
        justify-content: center;
    }

    #confirm .form_list dt {
        flex-basis: 30%;
        text-align: right;
    }

    #confirm .form_list dd {
        flex-basis: 70%;
        padding-left: 16px;
    }
}

/*-------------------------------------------------------------

submit

--------------------------------------------------------------*/

/*--- メール（デバッグ） ---*/
pre {
    text-align: left; border: 1px solid black;
    white-space: pre-wrap;
}

#sumit main > h1,
#confirm main > h1 {
    font-family: var(--font-sub);
    text-align: center;
}

/*--------------------------------------

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

#qa {
    margin: 48px auto;
}

#qa hgroup {
    text-align: center;
    font-weight: 600;
    color: var(--main-color);
}

#qa hgroup p {
    font-size: clamp(20px, 1.5vw + 0.5rem, 32px);
}

#qa hgroup p span {
    display: inline-block;
    margin: 0 6px;
    padding: 10px;
    aspect-ratio: 1 / 1;
    line-height: 0.5;
    color: var(--white-color);
    border-radius: 100vw;
}

#qa hgroup p span.q-deco {
    background-color: var(--main-color);
}
#qa hgroup p span.a-deco {
    background-color: var(--sub-color);
}

#qa hgroup h2 {
    font-size: clamp(28px, 2vw + 1rem, 48px);
}

#qa .qa-con {
    width: 90%;
    margin: 30px auto;
}

#qa .qa-con > div {
    margin: 60px 0;
}

#qa .qa-con dt,
#qa .qa-con dd {
    display: flex;
    gap: 10px;
    font-size: clamp(16px, 1vw + 0.5rem, 20px);
    font-weight: 500;
    letter-spacing: 0.03rem;
}

#qa .qa-con dt {
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px dotted var(--main-color);
}

#qa .qa-con dd {
    padding-top: 10px;
    margin: 0;
}

#qa .qa-con dt::before,
#qa .qa-con dd::before {
    display: block;
    height: fit-content;
    padding: 10px;
    aspect-ratio: 1 / 1;
    font-size: clamp(16px, 1.5vw + 0.5rem, 24px);
    line-height: 0.5;
    color: var(--white-color);
    border-radius: 100vw;
}

#qa .qa-con dt::before {
    content: "Q";
    background-color: var(--main-color);
}
#qa .qa-con dd::before {
    content: "A";
    background-color: var(--sub-color);
}

@media (min-width:768px) {
    #qa {
        display: flex;
        gap: 30px;
    }

    #qa hgroup {
        flex-basis: 40%;
    }

    #qa .qa-con {
        width: auto;
        margin-top: 0;
    }

    #qa .qa-con > div:first-child {
        margin: 0 0 60px;
    }
}

/*ボトムコンテンツ*/

.bottom-back {
    padding: 50px 8px;
    background-color: var(--main-color);
}

#bottom {
    padding: 0;
}

#bottom > p {
    text-align: center;
    color: var(--white-color);
    line-height: 2;
}

#bottom .btn {
    margin: 30px auto 0;
}

/*-------------------------------

	header

-------------------------------*/


header {
    box-shadow: 0 1px 4px #4d4d4d;
    background-color: var(--header-bg-color);
}

header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    padding: 4px 12px;
    max-width: 1024px;
}

header .company {
    display: block;
    width: min(60%, 300px);
    text-decoration: none;
}

header .company img {
    display: block;
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: 340 / 64;
    object-fit: contain;
    background: var(--white-color);
    padding: 8px;
}

header .hamburger {
    position: relative;
    width: 60px;
    height: auto;
    aspect-ratio: 1/1;
    border: none;
    background-color: var(--header-bg-color);
    cursor: pointer;
}

header .hamburger .hamburger-line {
    display: block;
    position: absolute;
    left: 50%;
    width: 48px;
    height: 4px;
    border-radius: 30px;
    background-color: var(--header-main-color);
}

header .hamburger .hamburger-line:nth-of-type(1) {
    top: 50%;
    transform: translate(-50%, calc(-50% - 10px));
}

header .hamburger .hamburger-line:nth-of-type(2) {
    top: 50%;
    transform: translate(-50%, -50%);
}

header .hamburger .hamburger-line:nth-of-type(3) {
    top: 50%;
    transform: translate(-50%, calc(-50% + 10px));
}

/************
サイドメニュー
************/

header #menu {
    width: 90%;
    max-width: 420px;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    left: auto;
    transition: transform 0.8s ease, overlay 0.7s ease allow-discrete, display 0.6s ease allow-discrete;
    transform: translateX(100%);
}

header #menu:popover-open {
    transform: translateX(0);
}

@starting-style {
    header #menu:popover-open {
        transform: translateX(100%);
    }
}

header #menu::backdrop {
    backdrop-filter: blur(3px);
    background-color: rgb(77 77 77 /0.5);
}

header #menu .hamburger {
    display: block;
    position: relative;
    width: 60px;
    height: auto;
    aspect-ratio: 1/1;
    border: none;
    margin: 12px 12px 0 auto;
    background-color: var(--header-bg-color);
}

header #menu .hamburger .hamburger-line:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

header #menu .hamburger .hamburger-line:nth-of-type(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

header #menu ul {
    display: flex;
    flex-direction: column;
    margin: 60px 40px 30px;
    gap: 50px;
    padding: 0;
    width: auto;
    list-style: none;
}

header #menu ul li {
    border-bottom: 2px solid #ededed;
    padding-bottom: 14px;
}

header #menu ul li a {
    text-decoration: none;
    color: var(--header-font-color);
    font-weight: bold;
}

header #menu ul li.contact {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
    border: 2px solid var(--header-font-color);
}

header #menu li.contact a {
    font-weight: bold;
}

header #menu li.contact::after {
    content: "→";
}



@media (min-width:768px) {
    header .hamburger {
        display: none;
    }

    header #menu {
        position: static;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        max-width: none;
        width: fit-content;
        min-width: 470px;
        height: auto;
        border: none;
        margin: 0;
        overflow: visible;
        transform: none;
    }

    header #menu .hamburger {
        display: none;
    }

    header #menu ul{
        flex-direction: row;
        align-items: center;        
        margin: 0;
        gap: 20px;
    }

    header #menu ul li {
        border-bottom: none;
        padding: 0;
    }

    header #menu ul li:not(.contact) a:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

    header #menu ul li.contact:hover {
        background-color: #d9d9d9;
    }

    header #menu ul li.contact::after {
        display: none;
    }

    header #menu li.contact {
        margin-left: 10px;
        padding: 10px;
    }
}

/*-------------------------------

	footer

-------------------------------*/

footer {
    background: var(--white-color);
    padding: 24px 16px;
    box-sizing: border-box;
}

footer .l-cont {
    max-width: 1000px;
    margin: 0 auto; 
}

footer .l-footer_txt {
    display: flex;
    align-items: flex-start;
    margin: 24px auto;
}

footer .l-footer_txt > img {
    display: block;
    width: 30%;
    flex-shrink: 0;
}

footer .l-footer_txt > div {
    flex-basis: 70%;
    flex-grow: 1;
}

footer .l-privacy {
    position: relative;
    display: block;
    width: fit-content;
    margin: 1em auto;
    padding: 0 1em;
    color: #295ca2;
    font-weight: bold;
}

footer .l-privacy::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: .5em;
    aspect-ratio: 2 / 3;
    clip-path: polygon(
        0 0,
        100% 50%,
        0 100%
    );
    background: #295ca2;
}

@media (min-width: 768px) {
    footer .l-footer_inner_row {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
        gap: 32px;
    }

    footer .l-footer_l,
    footer .l-footer_r {
        flex-basis: 50%;
    }
}