@charset 'UTF-8';

/* Box sizing rules */

*,
*::before,
*::after
{
    box-sizing: border-box;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd
{
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul,
ol
{
    margin: 0;
    padding: 0;

    list-style: none;
}

/* Set core root defaults */

html:focus-within
{
    scroll-behavior: smooth;
}

/* Set core body defaults */

body
{
    line-height: 1.5;

    min-height: 100vh;

    text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */

a:not([class])
{
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture
{
    max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select
{
    font: inherit;
}

button
{
    padding: 0;

    border: none;
    outline: none;
    background: none;
}

button:focus
{
    outline: none;
}

button:disabled
{
    opacity: 1;
}

button:disabled:hover
{
    opacity: 1;
}

:root
{
    --color: #000;
}

/* ==========================================================================
   共通設定
========================================================================== */

html
{
    font-size: 1.5625vw;

    overflow-y: scroll;

        -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body
{
    font-family: 'Noto Sans JP','Noto Sans','Noto Sans CJK JP','ヒラギノ角ゴ ProN W3','游ゴシック', '游ゴシック体','メイリオ',Meiryo,sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3;

    overflow: hidden;

    width: 100%;

    text-align: justify;
    text-justify: inter-ideograph;

    color: #000;
    color: var(--color);

    font-feature-settings: 'pkna';
    font-optical-sizing: auto;
    font-optical-sizing: auto;
    font-variation-settings: 'wdth' 100;
}

img
{
    width: 100%;
    height: auto;

    vertical-align: bottom;

    backface-visibility: hidden;
}

a
{
    display: inline-block;

    transition: all .1s linear;
    text-decoration: none;

    color: #000;
    color: var(--color);
}

a:hover
{
    opacity: .8;
}

.fontM
{
    font-family: 'Noto Serif', serif;
    font-style: normal;

    font-optical-sizing: auto;
    font-variation-settings: 'wdth' 100;
}

/* ==========================================================================
   header
========================================================================== */

.header
{
    display: flex;

    height: 15.9375vw;

    border-bottom: .15625vw solid #ccc;
    background-color: #f4faff;

    align-items: center;
    justify-content: center;
}

.header .logo
{
    line-height: 1;

    width: 37.8125vw;
}

/* ==========================================================================
   fv
========================================================================== */

.fv
{
    position: relative;
    z-index: 1;

    height: 126.5625vw;
    padding-top: 63.90625vw;

    background-image: -webkit-image-set(
    url('../img/fv_bk.webp') 1x,
    url('../img/fv_bk@1.5x.webp') 2x
    );
    background-image:         image-set(
    url('../img/fv_bk.webp') 1x,
    url('../img/fv_bk@1.5x.webp') 2x
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.nurikae{
    padding-top:13vw !important;
}
.fv .nurikae-banner{
    width: 50%;
    padding-bottom: 25vw;
    padding-left: 2rem;
    text-align: center;
}
p.nurikae-text{
    font-weight: 700;
    font-size:2rem;
    color: white;
    margin-bottom: .5rem;
    text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.85);
}

.fv .inner
{
    position: relative;

    width: 94.84375vw;
    margin: 0 auto;
    padding: 8.75vw 0 3.4375vw;

    border-radius: 1.5625vw;
    background: #fff;
    box-shadow: 0 .625vw 1.5625vw 0 rgba(0, 0, 0, .25);
}

.fv .inner h2
{
    line-height: 1;

    text-align: center;
}

.fv .inner h2 .line1
{
    font-size: 6.3165rem;
    font-weight: 400;

    color: #283c4c;
}

.fv .inner h2 .line1 strong
{
    font-weight: 700;
}

.fv .inner h2 .line1 span
{
    display: inline-block;

    rotate: 15deg;
}

.fv .inner h2 .line2
{
    font-size: 6.1225rem;
    font-weight: 900;

    display: block;

    margin-top: .78125vw;

    color: #fc552b;
}

.fv .inner h2 .line2 span
{
    letter-spacing: -.18em;
}

.fv .inner .area
{
    font-size: 3.1457rem;
    font-weight: 600;
    line-height: 1.3;

    position: absolute;
    top: -10.46875vw;
    left: 50%;

    display: flex;

    width: 71.25vw;
    height: 15.625vw;

    color: #fff;
    border: 4px solid #f0b495;
    background: #fc552b;

    flex-shrink: 0;
    translate: -50% 0;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.fv .inner .area li:not(:nth-child(4)):not(:nth-child(7))::after
{
    content: '・';
}

.fv .inner .data
{
    display: grid;

    width: 84.84375vw;
    margin: 3.125vw auto 0;

    text-align: center;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 5.15625vw;
}

.fv .inner .data dl
{
    display: flex;

    min-height: 17.65625vw;

    background: url('../img/jisseki_bk.svg') no-repeat center center / contain;

    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.fv .inner .data dt
{
    font-size: 2.5395rem;
    font-weight: 500;
    line-height: 1;
}

.fv .inner .data dd
{
    font-family: 'Jost', sans-serif;
    font-size: 6.5rem;
    font-weight: 700;
    line-height: 1;

    margin-top: 1.5625vw;
}

.fv .inner .data dd small
{
    font-size: 4rem;
    font-weight: 700;
}

.fv .inner .data dl:nth-child(1) dd
{
    color: #2b99fc;
}

.fv .inner .data dl:nth-child(2) dd
{
    color: #45b343;
    letter-spacing: -0.3rem;
}

/* ==========================================================================
   無料点検
========================================================================== */

.freeInspection
{
    position: relative;
    z-index: 2;

    height: 46.09375vw;
    padding: 1.5625vw 0 0 0;

    color: #fff;
    background: #86c085;
}

.freeInspection::before
{
    position: absolute;
    right: 0;
    bottom: 0;

    width: 40.3125vw;
    height: 59.0625vw;

    content: '';

    background-image: -webkit-image-set(
    url('../img/free_chara@1x.webp') 1x,
    url('../img/free_chara@2x.webp')  2x
    );
    background-image:         image-set(
    url('../img/free_chara@1x.webp') 1x,
    url('../img/free_chara@2x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    flex-shrink: 0;
}

.freeInspection::after
{
    position: absolute;
    top: -10.78125vw;
    left: 1.5625vw;

    width: 22.1875vw;
    height: 22.34375vw;

    content: '';

    background-image: -webkit-image-set(
    url('../img/free_fukidashi@1x.webp') 1x,
    url('../img/free_fukidashi@2x.webp')  2x
    );
    background-image:         image-set(
    url('../img/free_fukidashi@1x.webp') 1x,
    url('../img/free_fukidashi@2x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.freeInspection > p
{
    padding-right: 38.125vw;

    text-align: right;
}

.freeInspection .line1
{
    font-size: 2.4114rem;
    font-weight: 500;
    line-height: 1;
}

.freeInspection .line2
{
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.4;

    display: flex;

    margin-top: -.2em;

    justify-content: flex-end;
    align-items: center;
}

.freeInspection .line2 .num
{
    font-weight: 700;
    line-height: 1;

    margin-right: 1.5625vw;
}

.freeInspection .line2 .num small
{
    font-size: 6.9549rem;
}

.freeInspection .line2 .num strong
{
    font-size: 13.91rem;
    font-weight: 700;
}

.freeInspection .ctaBtn
{
    display: grid;

    width: 90vw;
    height: 17.1875vw;
    margin: 0 auto;

    animation: pulse 1.5s infinite;

    grid-template-columns: 100%;
    grid-template-rows: auto;
}

.freeInspection .ctaBtn .text1
{
    font-size: 2.4rem;
    font-weight: 500;

    z-index: 2;

    display: grid;

    width: 49.53125vw;
    height: 5.3125vw;

    border: .46875vw solid #286eb8;
    border-radius: 3.90625vw;
    background: #fff;

    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    place-content: center;
}

.freeInspection .ctaBtn .text2
{
    font-size: 4.5885rem;
    font-weight: 500;

    z-index: 1;

    display: flex;

    width: 100%;
    height: 15vw;
    padding-top: .3em;

    color: #fff;
    background: #286eb8;
    box-shadow: 0 .9375vw 0 0 #205084;

    grid-column: 1;
    grid-row: 1;
    align-self: end;
    align-items: center;
    justify-content: center;
    gap: 0 4.21875vw;
}

.freeInspection .ctaBtn .text2::after
{
    width: 5.46875vw;
    height: 5.46875vw;

    content: '';

    background: url('../img/cta_arrow.svg') no-repeat center center / contain;

    flex-shrink: 0;
}

@keyframes pulse
{
    0%
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.05);
    }
    100%
    {
        transform: scale(1);
    }
}

/* ==========================================================================
   こんなお悩み抱えていませんか？
========================================================================== */

.onayami
{
    position: relative;
    z-index: 1;

    min-height: 200.15625vw;
    padding: 3.4375vw 0 0;

    background-image: -webkit-image-set(
    url('../img/onayami_1x.webp') 1x,
    url('../img/onayami_1_5x.webp')  2x
    );
    background-image:         image-set(
    url('../img/onayami_1x.webp') 1x,
    url('../img/onayami_1_5x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

.onayami .inner
{
    position: relative;

    width: 92.5vw;
    margin: 0 auto;
    padding: 1.5625vw 0 6.71875vw;

    background: rgba(0, 0, 0, .60);
}

.onayami .inner::before
{
    position: absolute;
    top: 27.8125vw;
    left: 13.28125vw;

    width: 11.71875vw;
    height: 8.125vw;

    content: '';

    background: url('../img/uzu.svg') no-repeat center center / contain;
}

.onayami .title
{
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1.3;

    text-align: center;

    color: #fff;
}

.onayami .title span
{
    font-size: 6.4rem;
}

.onayami .nayamiList
{
    display: grid;

    width: 85.78125vw;
    margin: 2.34375vw auto 0;

    grid-template-columns: 1fr 1fr;
}

.onayami .nayamiList li
{
    width: 30.9375vw;
}

.onayami .nayamiList li figure
{
    position: relative;
}

.onayami .nayamiList li figcaption
{
    font-size: 3.0877rem;
    font-weight: 700;

    position: absolute;
    z-index: 2;

    letter-spacing: -.05em;

    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

.onayami .nayamiList li figcaption span
{
    font-size: 2.2344rem;

    vertical-align: baseline;
}

.onayami .nayamiList li:nth-child(1)
{
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: center;
}

.onayami .nayamiList li:nth-child(1) figcaption
{
    top: .625vw;
    right: -20.9375vw;

    width: 31.40625vw;
    height: 15.46875vw;
    padding: 2.96875vw 0 0 2.65625vw;

    background-image: -webkit-image-set(
    url('../img/fukidashi1.png') 1x,
    url('../img/fukidashi1@2x.png')  2x
    );
    background-image:         image-set(
    url('../img/fukidashi1.png') 1x,
    url('../img/fukidashi1@2x.png')  2x
    );
}

.onayami .nayamiList li:nth-child(2)
{
    margin-top: -6.09375vw;

    grid-column: 1;
    grid-row: 2;
}

.onayami .nayamiList li:nth-child(2) figcaption
{
    top: -8.59375vw;
    left: 2.8125vw;

    width: 31.40625vw;
    height: 15.625vw;
    padding: 3.4375vw 0 0 4.6875vw;

    background-image: -webkit-image-set(
    url('../img/fukidashi2.png') 1x,
    url('../img/fukidashi2@2x.png')  2x
    );
    background-image:         image-set(
    url('../img/fukidashi2.png') 1x,
    url('../img/fukidashi2@2x.png')  2x
    );
}

.onayami .nayamiList li:nth-child(3)
{
    margin-top: -10.46875vw;

    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

.onayami .nayamiList li:nth-child(3) figcaption
{
    top: 13.28125vw;
    right: 21.5625vw;

    width: 31.40625vw;
    height: 16.09375vw;
    padding: 5.15625vw 0 0 4.6875vw;

    background-image: -webkit-image-set(
    url('../img/fukidashi3.png') 1x,
    url('../img/fukidashi3@2x.png')  2x
    );
    background-image:         image-set(
    url('../img/fukidashi3.png') 1x,
    url('../img/fukidashi3@2x.png')  2x
    );
}

.onayami .nayamiList li:nth-child(4)
{
    margin: 2.5vw 0 0 11.71875vw;

    grid-column: 1;
    grid-row: 3;
}

.onayami .nayamiList li:nth-child(4) figcaption
{
    top: -2.96875vw;
    right: 12.5vw;

    width: 31.40625vw;
    height: 15.625vw;
    padding: 3.125vw 0 0 5.46875vw;

    background-image: -webkit-image-set(
    url('../img/fukidashi4.png') 1x,
    url('../img/fukidashi4@2x.png')  2x
    );
    background-image:         image-set(
    url('../img/fukidashi4.png') 1x,
    url('../img/fukidashi4@2x.png')  2x
    );
}

.onayami .nayamiList li:nth-child(5)
{
    margin: -3.90625vw 0 0 2.03125vw;

    grid-column: 2;
    grid-row: 3;
}

.onayami .nayamiList li:nth-child(5) figcaption
{
    top: 24.375vw;
    right: -2.8125vw;

    width: 37.1875vw;
    height: 15.9375vw;
    padding: 5.15625vw 0 0 5.15625vw;

    background-image: -webkit-image-set(
    url('../img/fukidashi5.png') 1x,
    url('../img/fukidashi5@2x.png')  2x
    );
    background-image:         image-set(
    url('../img/fukidashi5.png') 1x,
    url('../img/fukidashi5@2x.png')  2x
    );
}

.onayami .boxText
{
    font-size: 3.2rem;
    font-weight: 500;

    display: grid;

    width: 40.46875vw;
    height: 8.28125vw;
    margin: 5.625vw auto 0;

    background: #fff;

    place-content: center;
}

.onayami .endText
{
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1.2;

    margin-top: 4.6875vw;

    text-align: center;

    color: #fff;
}

/* ==========================================================================
   屋根は10年の点検が<br>推奨とされています。
========================================================================== */

.inspection
{
    padding: 2.03125vw 0 0 0;

    background: linear-gradient(166deg, #599fdc 0%, #afdafe 100%);
}

.inspection > h2
{
    font-size: 5.7143rem;
    font-weight: 500;
    line-height: 1.2;

    margin-bottom: 7.8125vw;

    text-align: center;

    color: #fff;
}

.inspection > h2 .num
{
    font-size: 8.571rem;
}

.inspection > h2 .num span
{
    letter-spacing: -.1em;
}

.inspection > h2 strong
{
    font-weight: 700;
    font-family: 'Noto Serif', serif;

    position: relative;
}

.inspection > h2 strong::before
{
    position: absolute;
    bottom: -0.1em;
    left: 0;

    width: 100%;
    height: .625vw;

    content: '';

    background: #fff;
}

.inspection .graphBox
{
    position: relative;

    width: 92.5vw;
    margin: 0 auto;
    padding: 7.5vw 0 5.46875vw;

    border-radius: 1.5625vw;
    background: #fff;
}

.inspection .graphBox > h2
{
    font-size: 3.0167rem;
    font-weight: 500;
    line-height: 1;

    position: absolute;
    top: -4.84375vw;
    left: 50%;

    display: flex;

    width: 72.5vw;
    height: 12.34375vw;
    padding-top: 2.8125vw;

    color: #fff;
    background: url('../img/graph_fukidashi.svg') no-repeat center center / contain;

    justify-content: center;
    translate: -50% 0;
}

.inspection .graphBox .qa h2
{
    font-size: 3.2rem;
    font-weight: 500;

    margin-bottom: 2.03125vw;

    text-align: center;

    color: #61a4de;

    linhe-height: 1;
}

.inspection .graphBox .qa figure
{
    width: 77.5vw;
    margin-left: 6.875vw;
}

.inspection .graphBox .qa p
{
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.5;

    margin-top: 3.4375vw;

    text-align: center;
}

.inspection .graphBox .qa p strong
{
    font-weight: 500;

    color: #e34242;
}

/* ==========================================================================
   「不安だな…」という方はキズナ工務店の無料ドローン点検
========================================================================== */

.droneSec
{
    margin-top: 5vw;
}

.droneSec > header
{
    height: 65.46875vw;
    padding: 3.75vw 0 0;

    background-image: -webkit-image-set(
    url('../img/drone_bk_1x.webp') 1x,
    url('../img/drone_bk_1_5x.webp')  2x
    );
    background-image:         image-set(
    url('../img/drone_bk_1x.webp') 1x,
    url('../img/drone_bk_1_5x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.droneSec > header h2
{
    padding: 0 5.78125vw;
}

.droneSec > header h2 > span
{
    display: block;

    color: #fff;
}

.droneSec > header h2 .line1
{
    font-size: 4.2471rem;
    font-weight: 700;
    line-height: 1;

    text-align: right;
}

.droneSec > header h2 .line1 span
{
    font-size: 2.83rem;
}

.droneSec > header h2 .line2
{
    font-size: 7.508rem;
    font-weight: 500;

    margin-top: 2.34375vw;

    text-align: right;
}

.droneSec > header h2 .line3
{
    font-size: 7rem;
    font-weight: 700;

    display: grid;

    width: 100%;
    height: 14.0625vw;

    letter-spacing: -.05em;

    color: #286eb8;
    background: #fff;

    flex-shrink: 0;
    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, .50));
    place-content: center;
}

.droneSec > header ul
{
    display: flex;

    margin-top: 4.6875vw;

    justify-content: center;
    gap: 0 2.34375vw;
}

.droneSec > header ul li
{
    font-size: 3.1516rem;
    font-weight: 500;
    line-height: 1.2;

    display: flex;

    height: 15.46875vw;
    padding-bottom: .3em;

    color: #fff;
    text-shadow: 0 .625vw 1.5625vw rgba(0, 0, 0, .50);

    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.droneSec > header ul li:first-child
{
    width: 41.875vw;

    background: url('../img/drone_waku1.svg') no-repeat center center / 100% auto;
}

.droneSec > header ul li:last-child
{
    width: 47.65625vw;

    background: url('../img/drone_waku2.svg') no-repeat center center / 100% auto;
}

.droneSec .droneWrapper
{
    padding-top: 5vw;

    background: #eff4f8;
}

.droneSec .droneWrapper .toptext
{
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.4;

    width: 86.25vw;
    margin: 0 auto;

    color: #286eb8;
}

.droneSec .droneWrapper .merit
{
    margin-top: 6.71875vw;
}

.droneSec .droneWrapper .merit > h2
{
    font-size: 3.7086rem;
    font-weight: 1;
    font-weight:700;

    margin-bottom: 6.25vw;

    text-align: center;

    color: #f2b715;
}

.droneSec .droneWrapper .merit > h2 span
{
    font-size: 4.6357rem;
}

.droneSec .droneWrapper .merit .meritSec
{
    width: 89.6875vw;
    margin: 0 auto;
}

.droneSec .droneWrapper .merit .meritSec > header
{
    margin-bottom: 2.34375vw;
}

.droneSec .droneWrapper .merit .meritSec > header .num
{
    font-size: 2.8rem;
    font-weight: 500;

    display: grid;

    width: 28.75vw;
    height: 6.40625vw;

    color: #fff;
    background: #286eb8;

    place-content: center;
}

.droneSec .droneWrapper .merit .meritSec > header h2
{
    font-size: 4.7rem;
    font-weight: 700;
    line-height: 1.4;

    color: #286eb8;
}

.droneSec .droneWrapper .merit .meritSec p
{
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.4;
}

.droneSec .droneWrapper .merit .meritSec .img
{
    margin-top: 3.28125vw;
}

.droneSec .droneWrapper .merit .meritSec + .meritSec
{
    margin-top: 8.125vw;
}

.droneSec .droneWrapper .ctaText
{
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1.2;

    display: flex;

    width: 92.96875vw;
    height: 32.8125vw;
    margin: 10vw auto 0;
    padding-top: .35em;

    text-align: center;

    color: #286eb8;
    background: url('../img/cta_text_box.svg') no-repeat center center / contain;

    justify-content: center;
}

.droneSec .droneWrapper .freeInspection
{
    height: 55.625vw;
    padding-top: 6.25vw;
}

.droneSec .droneWrapper .freeInspection .ctaBtn
{
    margin-top: 3.90625vw;
}

/* ==========================================================================
   急増する悪徳な業者にご注意ください。
========================================================================== */

.warning
{
    height: 74.53125vw;
    padding-top: 5.15625vw;

    text-align: center;

    background-image: -webkit-image-set(
    url('../img/akutoku_1x.webp') 1x,
    url('../img/akutoku_1_5x.webp')  2x
    );
    background-image:         image-set(
    url('../img/akutoku_1x.webp') 1x,
    url('../img/akutoku_1_5x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.warning > h2
{
    font-size: 5.2679rem;
    font-weight: 700;
    line-height: 1.3;

    margin-bottom: 9.375vw;
}

.warning > h2 span
{
    font-size: 7.0239rem;
}

.warning p
{
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.75;
}

.warning ul
{
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.75;
}

.warning ul li
{
    text-decoration: underline;
}

.warning ul li::before
{
    display: inline-block;

    content: '・';
}

/* ==========================================================================
   キズナ工務店はお約束いたします。
========================================================================== */

.promise
{
    height: 98.59375vw;
    padding-top: 5.15625vw;

    background-image: -webkit-image-set(
    url('../img/promise_1x.webp') 1x,
    url('../img/promise_1_5x.webp')  2x
    );
    background-image:         image-set(
    url('../img/promise_1x.webp') 1x,
    url('../img/promise_1_5x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.promise > h2
{
    font-size: 5.5315rem;
    line-height: 1.4;

    margin-bottom: 4.375vw;

    text-align: center;
    letter-spacing: .05em;

    color: #8d5858;
}

.promise ul
{
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.4;

    padding: 0 3.125vw 0 11.71875vw;

    color: #8d5858;
}

.promise ul li
{
    display: flex;

    align-items: center;
}

.promise ul li::before
{
    width: 4.84375vw;
    height: 4.84375vw;
    margin-right: 3.75vw;

    content: '';

    background: url('../img/check_mark.svg') no-repeat center center / contain;

    flex-shrink: 0;
}

.promise ul li + li
{
    margin-top: 3.90625vw;
}

/* ==========================================================================
   お客様満足度97.9%の理由
========================================================================== */

.customerSatisfaction
{
    position: relative;
    z-index: 2;

    padding-top: 70vw;

    background: #ddebf8;
}

.customerSatisfaction > header
{
    position: absolute;
    top: -14.21875vw;
    left: 0;

    display: flex;

    width: 100%;
    height: 76.875vw;
    padding-bottom: 12.03125vw;

    background-image: -webkit-image-set(
    url('../img/customer_1x.webp') 1x,
    url('../img/customer_1_5x.webp')  2x
    );
    background-image:         image-set(
    url('../img/customer_1x.webp') 1x,
    url('../img/customer_1_5x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    justify-content: center;
    align-items: flex-end;
}

.customerSatisfaction > header h2
{
    font-size: 3.877rem;
    font-weight: 400;
    line-height: 1.1;

    text-align: center;
    letter-spacing: .05em;

    color: #fff;
}

.customerSatisfaction .csSec
{
    position: relative;
    z-index: 1;

    display: flex;

    padding-left: 6.40625vw;

    align-items: center;
    gap: 0 3.125vw;
}

.customerSatisfaction .csSec::before
{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 6.40625vw;

    width: 47.5vw;
    height: 47.5vw;

    content: '';

    border-radius: 47.5vw;
    background: #fff;

    filter: blur(6.25vw);
    translate: 0 -50%;
}

.customerSatisfaction .csSec > header
{
    display: flex;

    flex-flow: row wrap;
    align-items: center;
}

.customerSatisfaction .csSec > header .num
{
    font-size: 8.5rem;
    font-weight: 400;
    line-height: 1;

    margin: 0 2.03125vw 0 0;

    color: #286eb8;

    flex-shrink: 0;
}

.customerSatisfaction .csSec > header h2
{
    font-size: 3.8773rem;
    font-weight: 700;
    line-height: 1.1;

    color: #286eb8;
}

.customerSatisfaction .csSec > header p
{
    font-size: 2.8rem;
    line-height: 1.5;

    margin-top: 4.21875vw;

    color: #79acdb;
}

.customerSatisfaction .csSec .img
{
    flex: 0 0 37.96875vw;
}

.customerSatisfaction .csSec2
{
    margin-top: 16.25vw;

    align-items: flex-start;
}

.customerSatisfaction .csSec3
{
    margin-top: 9.0625vw;

    align-items: flex-start;
}

.customerSatisfaction .endText
{
    position: relative;
    z-index: 2;
}

.customerSatisfaction .endText span
{
    font-weight: 500;

    display: inline-flex;

    color: #fff;
    background: #286eb8;

    align-items: center;
}

.customerSatisfaction .endText span:first-child
{
    font-size: 5.0485rem;

    width: 46.09375vw;
    height: 10.625vw;

    justify-content: center;
}

.customerSatisfaction .endText span:last-child
{
    font-size: 4.0258rem;

    width: 100%;
    height: 8.75vw;
    padding-left: 2.96875vw;

    justify-content: flex-start;
}

/* ==========================================================================
   過去の施工事例
========================================================================== */

.constructionExamples
{
    padding-top: 9.375vw;
    padding-bottom: 7.8125vw;

    background-color: #e2edda;
}

.constructionExamples > h2
{
    font-size: 5rem;

    margin-bottom: 7.5vw;

    text-align: center;

    color: #333;
}

.constructionExamples .swiper-container
{
    overflow: visible;

    width: 84.375vw;
    margin: 0 auto;
}

.constructionExamples .exBox
{
    position: relative;
}

.constructionExamples .exBox h2
{
    font-size: 3.2506rem;
    font-weight: 500;
    line-height: 1.2;

    position: absolute;
    top: 4.375vw;
    left: 0;

    display: flex;

    width: 61.5625vw;
    height: 10.46875vw;

    text-align: center;

    justify-content: center;
    align-items: center;
}

.constructionExamples .notion
{
    font-size: 2.6rem;

    margin-top: 7.5vw;

    text-align: center;
}

/* ==========================================================================
   たくさんの喜びの声が届いています　
========================================================================== */

.voice
{
    padding: 11.25vw 0 7.8125vw;

    background: linear-gradient(180deg, #fff 0%, #ffe9ad 24.62%);
}

.voice > h2
{
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;

    margin-bottom: 5.46875vw;

    text-align: center;

    color: #ffb342;
    background: url('../img/voice_title.svg') no-repeat center bottom / 100% auto;
}

.voice > h2 .larg
{
    font-size: 5.6rem;
}

.voice > h2 .eMark
{
    font-size: 7.2641rem;

    display: inline-block;

    transform: rotate(19.45deg);
}

.voice .voiceBox
{
    width: 87.8125vw;
    margin: 0 auto;
    padding: 4.53125vw 0 0;

    border-radius: 1.5625vw;
    background: #fff;
}

.voice .voiceBox > header
{
    display: grid;

    width: 82.03125vw;
    margin: 0 auto 4.6875vw;
    padding: 0 0 2.34375vw;

    border-bottom: .3125vw solid #000;

    grid-template-columns: 17.65625vw 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 3.90625vw;
}

.voice .voiceBox > header::before
{
    width: 18.59375vw;
    height: 18.59375vw;

    content: '';

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    grid-column: 1;
    grid-row: 1 / 3;
}

.voice .voiceBox > header h2
{
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.4;
}

.voice .voiceBox > header .star
{
    height: 3.75vw;
}

.voice .voiceBox > header .star img
{
    width: auto;
    height: 100%;
}

.voice .voiceBox > p
{
    font-size: 2.4rem;
    line-height: 1.5;

    padding: 0 4.6875vw;
}

.voice .voiceBox footer
{
    font-size: 1.8rem;

    display: flex;

    height: 7.5vw;
    margin-top: 5.3125vw;
    padding-right: 4.21875vw;

    color: #fff;
    background: linear-gradient(90deg, #f3ce86 0%, #ffc44d 100%);

    align-items: center;
    justify-content: flex-end;
}

.voice .voiceBox1 > header::before
{
    background-image: -webkit-image-set(
    url('../img/voice1_1x.png') 1x,
    url('../img/voice1_1_5x.png')  2x
    );
    background-image:         image-set(
    url('../img/voice1_1x.png') 1x,
    url('../img/voice1_1_5x.png')  2x
    );
}

.voice .voiceBox2 > header::before
{
    background-image: -webkit-image-set(
    url('../img/voice2_1x.png') 1x,
    url('../img/voice2_1_5x.png')  2x
    );
    background-image:         image-set(
    url('../img/voice2_1x.png') 1x,
    url('../img/voice2_1_5x.png')  2x
    );
}

.voice .voiceBox2 > header h2
{
    letter-spacing: -.01em;
}

.voice .voiceBox3 > header::before
{
    background-image: -webkit-image-set(
    url('../img/voice3_1x.png') 1x,
    url('../img/voice3_1_5x.png')  2x
    );
    background-image:         image-set(
    url('../img/voice3_1x.png') 1x,
    url('../img/voice3_1_5x.png')  2x
    );
}

.voice .voiceBox + .voiceBox
{
    margin-top: 6.5625vw;
}

/* ==========================================================================
   施工費用について
========================================================================== */

.priceSec
{
    margin-top: 8.75vw;
}

.priceSec > h2
{
    font-size: 3.8773rem;
    font-weight: 700;
    line-height: 1;

    width: 48.125vw;
    margin: 0 auto 5.15625vw;

    text-align: center;
}

.priceSec > h2::before
{
    font-family: 'Noto Sans',sans-serif;
    font-size: 2.3832rem;
    font-weight: 500;
    line-height: 1;

    display: block;

    margin-bottom: 3.125vw;

    content: 'PRICE';

    color: #45b343;
}

.priceSec > h2::after
{
    display: block;

    width: 100%;
    height: 2.5vw;
    margin-top: 2.96875vw;

    content: '';

    background: url('../img/price_title_bk.svg') no-repeat center center / contain;
}

.priceSec .inner
{
    padding: 6.25vw 6.25vw 7.5vw;

    background-image: -webkit-image-set(
    url('../img/price_bk_1x.webp') 1x,
    url('../img/price_bk_1_5x.webp')  2x
    );
    background-image:         image-set(
    url('../img/price_bk_1x.webp') 1x,
    url('../img/price_bk_1_5x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.priceSec .priceListSec
{
    text-align: center;
}

.priceSec .priceListSec h2
{
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1;

    display: flex;

    width: 29.6875vw;
    height: 8.4375vw;
    margin: 0 auto 4.21875vw;
    padding-top: .1em;

    text-align: center;

    color: #fff;
    background: #45b343;

    justify-content: center;
    align-items: center;
}

.priceSec .priceListSec .text
{
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.4;

    margin-bottom: 3.90625vw;

    text-align: center;

    color: #45b343;
}

.priceSec .priceListSec .number
{
    font-weight: 700;
    line-height: 1;

    display: flex;

    text-align: center;

    color: #217320;

    justify-content: center;
    align-items: baseline;
    gap: 0 2.03125vw;
}

.priceSec .priceListSec .number span:first-child
{
    font-size: 3.2rem;
}

.priceSec .priceListSec .number span:last-child
{
    font-size: 7.2rem;
}

.priceSec .priceListSec .number span:last-child small
{
    font-size: 3.2rem;
}

.priceSec .priceListSec + .priceListSec
{
    margin-top: 8.75vw;
}

.priceSec .priceListSec1 h2
{
    width: 26.09375vw;
}

.priceSec .priceListSec4 .text
{
    font-size: 2.4rem;
}

.priceSec .priceListSec4 .number span:last-child
{
    font-size: 4.8rem;
}

.priceSec .notice
{
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;

    margin-top: 11.5625vw;

    text-align: center;
}

/* ==========================================================================
   エリア最安水準に挑戦します
========================================================================== */

.areaSec h2
{
    font-size: 7rem;
    font-weight: 500;
    line-height: 1;

    display: flex;

    width: 100%;
    height: 55.625vw;

    background-image: -webkit-image-set(
    url('../img/sl_3_3_1x.webp') 1x,
    url('../img/sl_3_3_1_5x.webp')  2x
    );
    background-image:         image-set(
    url('../img/sl_3_3_1x.webp') 1x,
    url('../img/sl_3_3_1_5x.webp')  2x
    );
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 103%;

    writing-mode: vertical-rl;
    flex-flow: column;
    justify-content: flex-end;
}

.areaSec h2 > span
{
    display: flex;

    width: 12.65625vw;
    padding-right: .1em;

    color: #d13e41;

    justify-content: flex-start;
    align-items: center;
}

.areaSec h2 > span span
{
    font-size: 4.0806rem;
}

.areaSec h2 > span:nth-child(1),
.areaSec h2 > span:nth-child(3)
{
    color: #fff;
    background: #d13e41;
}

.areaSec h2 > span:nth-child(2)
{
    letter-spacing: .1em;
}

.areaSec .map
{
    display: flex;

    height: 56.71875vw;
    margin: 0 2.34375vw 3.125vw 0;

    background: url('../img/map.svg') no-repeat left -8.4375vw / 66.5625vw auto;

    justify-content: flex-end;
    align-items: flex-end;
}

.areaSec .map .areaList
{
    width: 42.1875vw;
    height: 37.96875vw;

    background: #f8f2e2;
}

.areaSec .map .areaList figcaption
{
    font-size: 2.6124rem;
    font-weight: 500;

    display: flex;

    height: 6.71875vw;

    color: #fff;
    background: #e5b32b;

    justify-content: center;
    align-items: center;
}

.areaSec .map .areaList ul
{
    display: grid;

    padding: 2.03125vw 4.375vw;

    grid-template-columns: repeat(2,1fr);
    gap: 1.5625vw .78125vw;
}

.areaSec .map .areaList ul li
{
    font-size: 2.61rem;
    font-weight: 500;

    text-align: center;

    flex: 0 1 8ch;
}

/* ==========================================================================
   lastCta
========================================================================== */

.lastCta .freeInspection
{
    height: 77.8125vw;
    padding-top: 0;

    background: #45b343;
}

.lastCta .freeInspection .ctaText
{
    font-size: 4.8rem;
    font-weight: 500;
    line-height: 1;

    position: relative;
    z-index: 3;

    display: flex;

    width: 100%;
    height: 25.78125vw;
    margin-bottom: 4.6875vw;
    padding-top: 3.125vw;

    text-align: center;

    color: #fff;
    background: url('../img/end_cta_title.svg') no-repeat center center / contain;

    flex-flow: column;
    gap: 2.34375vw 0;
}

.lastCta .freeInspection .ctaText span:last-child
{
    font-size: 3.7238rem;
}

.lastCta .freeInspection::after
{
    z-index: 10;
    top: 20.3125vw;;
}

.lastCta .freeInspection .ctaBtn
{
    margin-top: 1.5625vw;
}

/* ==========================================================================
  固定CTA
========================================================================== */

.fixedFooterCta
{
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;

    display: flex;

    width: 100%;
    height: 15.625vw;
    padding-left: 26.09375vw;

    background: url('../img/fix_cta.svg') no-repeat center center / contain;

    align-items: center;
}

.fixedFooterCta a:hover
{
    opacity: 1;
}

.fixedFooterCta p
{
    text-align: center;
}

.fixedFooterCta .line1
{
    font-size: 2rem;
    line-height: 1.4;

    letter-spacing: .1em;

    color: #fff;
}

.fixedFooterCta .line2
{
    font-size: 3.9943rem;
    font-weight: 700;
    line-height: 1.4;

    color: #fff;
}

.footer.siFixFooter
{
    padding: 20px 0 20.3125vw;
}

/* ==========================================================================
  以下　流用
========================================================================== */

/* FAQ */

.faq-section
{
    width: 90%;
    max-width: 640px;
    margin: 0 auto;
    padding-top: 4rem;
    padding-bottom: 2rem;
}

.faq-section h2
{
    font-size: 18px;

    text-align: center;
    text-transform: uppercase;

    color: #286eb8;
}

.faq-title
{
    font-size: 24px;
    font-weight: bold;

    margin-bottom: 20px;

    text-align: center;
}

.faq-container
{
    width: 100%;
}

.faq-item
{
    border-bottom: 1px solid #ddd;
}

.faq-question
{
    font-size: 16px;
    font-weight: bold;

    width: 100%;
    padding: 15px;

    cursor: pointer;
    transition: background .3s;
    text-align: left;

    color: white;
    border: none;
    outline: none;
    background: #286eb8;
}

.faq-question:hover
{
    background: #357ecb;
}

.faq-answer
{
    font-size: 14px;
    font-weight: bold;

    overflow: hidden; /* はみ出しを隠す */

    max-height: 0; /* 初期状態は閉じる */
    padding: 0 15px; /* 初期状態では余白をゼロ */

    transition: max-height .4s ease-out, padding .4s ease-out; /* スムーズな開閉 */
    text-align: left;

    color: #333;
    background: #ddebf8;
}

/* フォーム */

.contact-form
{
    padding: 20px;

    background-color: #f4faff;
}

.contact-form h2
{
    font-size: 32px;

    margin-bottom: 16px;

    text-align: center;

    color: #4caf50;
}

.contact-form p
{
    font-weight: 700;

    margin-bottom: 48px;

    text-align: center;

    color: #555;
}

.form-group
{
    margin-bottom: 32px;
}

.form-group label
{
    font-weight: bold;

    display: block;

    margin-bottom: 5px;
}

.form-group input,
.form-group select,
.form-group textarea
{
    padding: 10px;

    border: 1px solid #ccc;
    border-radius: 5px;
}

.form-group textarea
{
    height: 100px;
}

/* フォームヘッダーのデザイン */

.form-header
{
    display: flex;

    margin-bottom: 20px;

    justify-content: center;
    align-items: center;
    gap: 15px; /* 吹き出しと見出しの間隔 */
}

/* 吹き出し画像のスタイル */

.form-balloon
{
    width: 80px;
    height: 80px;

    -o-object-fit: contain;
       object-fit: contain; /* 画像が歪まないように調整 */
}

.button-grid
{
    display: grid;

    margin-top: 10px;

    grid-template-columns: repeat(2, 1fr); /* PCでは2列表示 */
    gap: 10px;
}

.option-button
{
    font-size: 15px;

    padding: 20px;

    cursor: pointer;
    transition: background-color .3s, border-color .3s;
    text-align: center;

    color: #666;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff; /* 通常時の白色 */
}

.option-button:hover
{
    background-color: #f0f0f0; /* ホバー時の色 */
}

.option-button.selected
{
    color: #4caf50;
    border-color: #4caf50;
    background-color: #e8f5e9; /* 選択時の薄緑色 */
}

@media (max-width: 640px)
{
    .button-grid
    {
        grid-template-columns: 1fr; /* モバイルでは1列表示 */
    }
}

input[type='text'],
input[type='email'],
input[type='tel'],
select,
textarea
{
    font-size: 16px; /* フォントサイズを設定 */

    box-sizing: border-box; /* パディングとボーダーを含めてサイズを計算 */
    width: 100%; /* 横幅を100%に設定 */
    height: 56px; /* 縦幅を2remに設定 */
    padding: 5px 10px; /* 内側の余白を調整 */

    transition: border-color .3s, box-shadow .3s; /* フォーカス時のアニメーション */

    border: 1px solid #ccc; /* ボーダーの色を設定 */
    border-radius: 5px; /* 角を丸める */
}

textarea
{
    height: auto; /* テキストエリアの高さはコンテンツに応じて調整 */
    min-height: 64px; /* 最小高さを設定 */
}

input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
select:focus,
textarea:focus
{
    border-color: #4caf50; /* フォーカス時のボーダー色 */
    outline: none; /* デフォルトのアウトラインを削除 */
    box-shadow: 0 0 5px rgba(76, 175, 80, .5); /* フォーカス時のシャドウ */
}

/* 送信ボタン */

.submit-button
{
    font-size: 20px;

    position: relative;

    display: inline-flex;

    width: 100%;
    height: 64px;
    padding: 10px 20px;

    cursor: pointer;
    transition: background-color .3s;

    color: #fff;
    border: none;
    border-radius: 5px;
    background-color: #4caf50;

    align-items: center;
    justify-content: center;
}

.submit-button:disabled
{
    cursor: not-allowed;

    background-color: #9e9e9e; /* ボタンを無効化した際の色 */
}

.spinner
{
    width: 16px;
    height: 16px;
    margin-right: 8px;

    animation: spin 1s linear infinite;

    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
}

@keyframes spin
{
    from
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotate(360deg);
    }
}

/* PC画面（幅640px以上）では非表示 */

@media (min-width: 641px)
{
    .fixed-footer-cta
    {
        display: none; /* PC画面では非表示 */
    }
    .form-header h2 span
    {
        display: none;
    }
}

/* 会社概要セクション */

.company-section
{
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 20px;

    text-align: center;

    border-radius: 10px;
    background: #fff;
}

.company-section h2
{
    font-size: 24px;

    margin-bottom: 10px;

    color: #333;
}

.company-details
{
    padding: 0 20px;

    text-align: left;

    border-radius: 8px;
}

.company-details p
{
    font-size: 16px;

    margin: 8px 0;

    color: #333;
}

/* フッター */

.footer
{
    padding: 20px 0;

    text-align: center;

    border-top: 1px solid #ccc;
    background-color: #f4faff;
}

.footer-container
{
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 640px;
    margin: 0 auto;

    align-items: center;
    gap: 10px;
}

.footer-logo
{
    width: 200px;
    height: auto;
    margin-bottom: 16px;
}

.footer-link
{
    font-size: 14px;

    transition: color .3s;
    text-decoration: none;

    color: #4caf50;
}

.footer-link:hover
{
    color: #2e7d32;
}

.footer p
{
    font-size: 12px;

    color: #666;
}

/* プライバシーポリシーページのスタイル */

.policy-container
{
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;

    background-color: #fff;
}

.policy-title
{
    font-size: 28px;

    margin-bottom: 20px;

    text-align: center;

    color: #4caf50;
}

.policy-section
{
    margin-bottom: 30px;
}

.policy-section h2
{
    font-size: 20px;

    margin-bottom: 10px;

    color: #333;
}

.policy-section p
{
    font-size: 16px;
    line-height: 1.6;

    color: #555;
}

.policy-section ul
{
    padding-left: 20px;

    list-style-type: disc;
}

.policy-section ul li
{
    font-size: 16px;
    line-height: 1.6;

    color: #555;
}

/* 戻るボタンのコンテナ */

.back-button-container
{
    margin-top: 30px;

    text-align: center;
}

/* 戻るボタン */

.back-button
{
    font-size: 16px;

    padding: 10px 20px;

    cursor: pointer;
    transition: background-color .3s, transform .2s;
    text-align: center;

    color: #fff;
    border: none;
    border-radius: 5px;
    background-color: #4caf50;
}

.back-button:hover
{
    transform: scale(1.05);

    background-color: #45a049;
}

/* ==========================================================================
   end
========================================================================== */

@media only screen and (min-width: 641px)
{
    html
    {
        font-size: 62.5%;
    }
    body
    {
        font-size: 1.6rem;
    }
    img
    {
        max-width: 100%;
    }

    /* ==========================================================================
   header
========================================================================== */
    .header
    {
        height: 80px;

        border-bottom: 1px solid #ccc;
    }
    .header .logo
    {
        width: 640px;
        padding: 0 20px;
    }
    .header .logo img
    {
        width: 147px;
    }
    /* ==========================================================================
   container
========================================================================== */
    .container
    {
        overflow: hidden;

        max-width: 640px;
        margin: 0 auto;
    }
    /* ==========================================================================
   fv
========================================================================== */
    .fv
    {
        height: 810px;
        padding-top: 409px;
    }
    .nurikae{
        padding-top: 50px !important;
    }
    .fv .nurikae-banner{
        width: 300px;
        padding-bottom: 180px;
        padding-left: 2rem;
        text-align: center;
    }

    .fv .inner
    {
        width: 607px;
        padding: 56px 0 22px;

        border-radius: 10px;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .25);
    }
    .fv .inner h2 .line1
    {
        font-size: 6.3165rem;
    }
    .fv .inner h2 .line2
    {
        margin-top: 5px;
    }
    .fv .inner .area
    {
        top: -67px;
        left: 50%;

        width: 456px;
        height: 100px;

        border: 4px solid #f0b495;

        translate: -50% 0;
    }
    .fv .inner .data
    {
        width: 543px;
        margin: 20px auto 0;

        gap: 0 33px;
    }
    .fv .inner .data dl
    {
        min-height: 113px;
    }
    .fv .inner .data dd
    {
        margin-top: 10px;
    }
    /* ==========================================================================
   無料点検
========================================================================== */
    .freeInspection
    {
        height: 295px;
        padding: 10px 0 0 0;
    }
    .freeInspection::before
    {
        width: 258px;
        height: 379px;
    }
    .freeInspection::after
    {
        top: -69px;
        left: 10px;

        width: 142px;
        height: 143px;
    }
    .freeInspection > p
    {
        padding-right: 244px;

        text-align: right;
    }
    .freeInspection .line2 .num
    {
        margin-right: 10px;
    }
    .freeInspection .ctaBtn
    {
        width: 576px;
        height: 110px;
    }
    .freeInspection .ctaBtn .text1
    {
        width: 317px;
        height: 34px;

        border: 3px solid #286eb8;
        border-radius: 25px;
    }
    .freeInspection .ctaBtn .text2
    {
        width: 100%;
        height: 96px;

        box-shadow: 0 6px 0 0 #205084;

        gap: 0 27px;
    }
    .freeInspection .ctaBtn .text2::after
    {
        width: 35px;
        height: 35px;
    }
    /* ==========================================================================
   こんなお悩み抱えていませんか？
========================================================================== */
    .onayami
    {
        min-height: 1281px;
        padding: 22px 0 0;
    }
    .onayami .inner
    {
        width: 592px;
        padding: 10px 0 43px;
    }
    .onayami .inner::before
    {
        top: 178px;
        left: 85px;

        width: 75px;
        height: 52px;
    }
    .onayami .nayamiList
    {
        width: 549px;
        margin: 15px auto 0;
    }
    .onayami .nayamiList li
    {
        width: 198px;
    }
    .onayami .nayamiList li:nth-child(1) figcaption
    {
        top: 4px;
        right: -134px;

        width: 201px;
        height: 99px;
        padding: 19px 0 0 17px;
    }
    .onayami .nayamiList li:nth-child(2)
    {
        margin-top: -39px;

        grid-column: 1;
        grid-row: 2;
    }
    .onayami .nayamiList li:nth-child(2) figcaption
    {
        top: -55px;
        left: 18px;

        width: 201px;
        height: 100px;
        padding: 22px 0 0 30px;
    }
    .onayami .nayamiList li:nth-child(3)
    {
        margin-top: -67px;
    }
    .onayami .nayamiList li:nth-child(3) figcaption
    {
        top: 85px;
        right: 138px;

        width: 201px;
        height: 103px;
        padding: 33px 0 0 30px;
    }
    .onayami .nayamiList li:nth-child(4)
    {
        margin: 16px 0 0 75px;
    }
    .onayami .nayamiList li:nth-child(4) figcaption
    {
        top: -19px;
        right: 80px;

        width: 201px;
        height: 100px;
        padding: 20px 0 0 35px;
    }
    .onayami .nayamiList li:nth-child(5)
    {
        margin: -25px 0 0 13px;
    }
    .onayami .nayamiList li:nth-child(5) figcaption
    {
        top: 156px;
        right: -18px;

        width: 238px;
        height: 102px;
        padding: 33px 0 0 33px;
    }
    .onayami .boxText
    {
        width: 259px;
        height: 53px;
        margin: 36px auto 0;
    }
    .onayami .endText
    {
        margin-top: 30px;
    }
    /* ==========================================================================
   屋根は10年の点検が<br>推奨とされています。
========================================================================== */
    .inspection
    {
        padding: 13px 0 0 0;
    }
    .inspection > h2
    {
        margin-bottom: 50px;
    }
    .inspection > h2 strong::before
    {
        width: 100%;
        height: 4px;
    }
    .inspection .graphBox
    {
        width: 592px;
        padding: 48px 0 35px;

        border-radius: 10px;
    }
    .inspection .graphBox > h2
    {
        top: -31px;

        width: 464px;
        height: 79px;
        padding-top: 18px;
    }
    .inspection .graphBox .qa h2
    {
        margin-bottom: 13px;
    }
    .inspection .graphBox .qa figure
    {
        width: 496px;
        margin-left: 44px;
    }
    .inspection .graphBox .qa p
    {
        font-weight: 500;

        margin-top: 22px;
    }
    /* ==========================================================================
   「不安だな…」という方はキズナ工務店の無料ドローン点検
========================================================================== */
    .droneSec
    {
        margin-top: 32px;
    }
    .droneSec > header
    {
        height: 419px;
        padding: 24px 0 0;
    }
    .droneSec > header h2
    {
        padding: 0 37px;
    }
    .droneSec > header h2 .line2
    {
        margin-top: 15px;
    }
    .droneSec > header h2 .line3
    {
        width: 100%;
        height: 90px;

        filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, .50));
    }
    .droneSec > header ul
    {
        margin-top: 30px;

        gap: 0 15px;
    }
    .droneSec > header ul li
    {
        height: 99px;

        text-shadow: 0 4px 10px rgba(0, 0, 0, .50);
    }
    .droneSec > header ul li:first-child
    {
        width: 268px;
    }
    .droneSec > header ul li:last-child
    {
        width: 305px;
    }
    .droneSec .droneWrapper
    {
        padding-top: 32px;
    }
    .droneSec .droneWrapper .toptext
    {
        width: 552px;
    }
    .droneSec .droneWrapper .merit
    {
        margin-top: 43px;
    }
    .droneSec .droneWrapper .merit > h2
    {
        margin-bottom: 40px;
    }
    .droneSec .droneWrapper .merit .meritSec
    {
        width: 574px;
    }
    .droneSec .droneWrapper .merit .meritSec > header
    {
        margin-bottom: 15px;
    }
    .droneSec .droneWrapper .merit .meritSec > header .num
    {
        width: 184px;
        height: 41px;
    }
    .droneSec .droneWrapper .merit .meritSec .img
    {
        margin-top: 21px;
    }
    .droneSec .droneWrapper .merit .meritSec + .meritSec
    {
        margin-top: 52px;
    }
    .droneSec .droneWrapper .ctaText
    {
        width: 595px;
        height: 210px;
        margin: 64px auto 0;
    }
    .droneSec .droneWrapper .freeInspection
    {
        height: 356px;
        padding-top: 40px;
    }
    .droneSec .droneWrapper .freeInspection .ctaBtn
    {
        margin-top: 25px;
    }
    /* ==========================================================================
   急増する悪徳な業者にご注意ください。
========================================================================== */
    .warning
    {
        height: 477px;
        padding-top: 33px;
    }
    .warning > h2
    {
        margin-bottom: 60px;
    }
    /* ==========================================================================
   キズナ工務店はお約束いたします。
========================================================================== */
    .promise
    {
        height: 631px;
        padding-top: 33px;
    }
    .promise > h2
    {
        margin-bottom: 28px;
    }
    .promise ul
    {
        padding: 0 20px 0 75px;
    }
    .promise ul li::before
    {
        width: 31px;
        height: 31px;
        margin-right: 24px;
    }
    .promise ul li + li
    {
        margin-top: 25px;
    }
    /* ==========================================================================
   お客様満足度97.9%の理由
========================================================================== */
    .customerSatisfaction
    {
        padding-top: 448px;
    }
    .customerSatisfaction > header
    {
        top: -91px;
        left: 0;

        width: 100%;
        height: 492px;
        padding-bottom: 77px;
    }
    .customerSatisfaction .csSec
    {
        padding-left: 41px;

        gap: 0 20px;
    }
    .customerSatisfaction .csSec::before
    {
        left: 41px;

        width: 304px;
        height: 304px;

        border-radius: 304px;

        filter: blur(40px);
        translate: 0 -50%;
    }
    .customerSatisfaction .csSec > header .num
    {
        margin: 0 13px 0 0;
    }
    .customerSatisfaction .csSec > header p
    {
        margin-top: 27px;
    }
    .customerSatisfaction .csSec .img
    {
        flex: 0 0 243px;
    }
    .customerSatisfaction .csSec2
    {
        margin-top: 104px;
    }
    .customerSatisfaction .csSec3
    {
        margin-top: 58px;
    }
    .customerSatisfaction .endText span:first-child
    {
        width: 295px;
        height: 68px;
    }
    .customerSatisfaction .endText span:last-child
    {
        width: 100%;
        height: 56px;
        padding-left: 19px;
    }
    /* ==========================================================================
   過去の施工事例
========================================================================== */
    .constructionExamples
    {
        padding-top: 60px;
        padding-bottom: 50px;
    }
    .constructionExamples > h2
    {
        margin-bottom: 48px;
    }
    .constructionExamples .swiper-container
    {
        overflow: hidden;

        width: 540px;
    }
    .constructionExamples .exBox h2
    {
        top: 28px;
        left: 0;

        width: 394px;
        height: 67px;
    }
    .constructionExamples .notion
    {
        margin-top: 48px;
    }
    /* ==========================================================================
   たくさんの喜びの声が届いています　
========================================================================== */
    .voice
    {
        padding: 72px 0 50px;
    }
    .voice > h2
    {
        margin-bottom: 35px;
    }
    .voice .voiceBox
    {
        width: 562px;
        padding: 29px 0 0;

        border-radius: 10px;
    }
    .voice .voiceBox > header
    {
        width: 525px;
        margin: 0 auto 30px;
        padding: 0 0 15px;

        border-bottom: 2px solid #000;

        grid-template-columns: 113px 1fr;
        grid-template-rows: auto 1fr;
        gap: 0 25px;
    }
    .voice .voiceBox > header::before
    {
        width: 119px;
        height: 119px;
    }
    .voice .voiceBox > header .star
    {
        height: 24px;
    }
    .voice .voiceBox > p
    {
        padding: 0 30px;
    }
    .voice .voiceBox footer
    {
        height: 48px;
        margin-top: 34px;
        padding-right: 27px;
    }
    .voice .voiceBox + .voiceBox
    {
        margin-top: 42px;
    }
    /* ==========================================================================
   施工費用について
========================================================================== */
    .priceSec
    {
        margin-top: 56px;
    }
    .priceSec > h2
    {
        width: 308px;
        margin: 0 auto 33px;
    }
    .priceSec > h2::before
    {
        margin-bottom: 20px;
    }
    .priceSec > h2::after
    {
        width: 100%;
        height: 16px;
        margin-top: 19px;
    }
    .priceSec .inner
    {
        padding: 40px 40px 48px;
    }
    .priceSec .priceListSec h2
    {
        width: 190px;
        height: 54px;
        margin: 0 auto 27px;
    }
    .priceSec .priceListSec .text
    {
        margin-bottom: 25px;
    }
    .priceSec .priceListSec .number
    {
        gap: 0 13px;
    }
    .priceSec .priceListSec + .priceListSec
    {
        margin-top: 56px;
    }
    .priceSec .priceListSec1 h2
    {
        width: 167px;
    }
    .priceSec .priceListSec4 .text
    {
        font-size: 2.4rem;
    }
    .priceSec .priceListSec4 .number span:last-child
    {
        font-size: 4.8rem;
    }
    .priceSec .notice
    {
        margin-top: 74px;
    }
    /* ==========================================================================
   エリア最安水準に挑戦します
========================================================================== */
    .areaSec h2
    {
        height: 356px;
    }
    .areaSec h2 > span
    {
        width: 81px;
    }
    .areaSec .map
    {
        height: 363px;
        margin: 0 15px 20px 0;

        background: url('../img/map.svg') no-repeat left -54px / 426px auto;
    }
    .areaSec .map .areaList
    {
        width: 270px;
        height: 243px;
    }
    .areaSec .map .areaList figcaption
    {
        height: 43px;
    }
    .areaSec .map .areaList ul
    {
        padding: 13px 28px;

        gap: 10px 5px;
    }
    /* ==========================================================================
   lastCta
========================================================================== */
    .lastCta .freeInspection
    {
        height: 498px;
    }
    .lastCta .freeInspection .ctaText
    {
        width: 100%;
        height: 165px;
        margin-bottom: 30px;
        padding-top: 20px;

        gap: 15px 0;
    }
    .lastCta .freeInspection::after
    {
        top: 130px;
    }
    .lastCta .freeInspection .ctaBtn
    {
        margin-top: 10px;
    }
    /* ==========================================================================
  固定CTA
========================================================================== */
    .fixedFooterCta
    {
        display: none;
    }
    .footer.siFixFooter
    {
        padding: 20px 0;
    }
    /*end*/
}