/*========= コンテンツ幅 ===============*/

/* コンテンツ幅 */
.smb-section__inner>.c-container {
    max-width: 850px;
}




/*========= フォントサイズ ===============*/

#SectionNine p,
#SectionEight p,
#SectionSeven .qa,
#SectionSix li,
#SectionThree p,
#SectionFive .WhiteBox p,
#SectionFourColumn p {
    font-size: 16px;
    line-height: 18px;
}



/*========= 見出し ===============*/


/* h2見出し */
.h2gap {
    font-weight: 800;
    color: #db1322 !important;
    padding: 10px 30px !important;
    margin-bottom: 30px !important;
    width: fit-content;
}

.h2gap:before {
    content: initial;
}

.h2gap:after {
    border: 2px solid #db1322 !important;
}


/* h3見出し */
.h3nomal {
    font-size: 30px;
    font-weight: 800;
    line-height: 35px;
    margin: -10px 0px 0px !important;
    letter-spacing: -2px;
    border-bottom: initial !important;
    margin: 0px auto !important;
}

.h3nomal span {
    color: #db1322;
}

.h3slash {
    font-size: 30px;
    font-weight: 800;
    color: #db1322;
    margin: 0px auto 5px !important;
    letter-spacing: 0.1px;
}

.h3slash:before,
.h3slash:after {
    background-color: #db1322;
    height: 38px;
}

.h3slash span {
    color: #231815;
    display: contents;
}

.h3speechBubblele {
    font-size: 25px;
    font-weight: 800;
    background-color: #db1322;
    margin: 90px auto 40px !important;
    max-width: 500px !important;
}

.h3speechBubblele:before {
    content: initial;
}

.h3speechBubblele:after {
    border-width: 20px 20px 0px 20px;
    border-color: #db1322 transparent transparent transparent;
    margin-top: 20px;
}

.h3image {
    position: relative;
    z-index: 3;
}

.h3image:before {
    position: absolute;
    animation-name: titleshaking;
    transform: scale(0.95, 0.95);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;
}


/* h4見出し */
.h4bold {
    font-size: 22px;
    font-weight: 800;
}



/*========= トップロゴ、ボタン ===============*/

#TopLogo {
    position: initial;
    height: initial;
    display: flex;
    max-width: 920px;
    align-items: center;
}

#TopLogo .title {
    font-size: xx-large;
    font-weight: 600;
}



#TopLogo .SliderButton {
    display: contents;
}


#TopLogo .SliderButton {
    width: 48%;
}

#TopLogo .SliderButton .TopButton {
    color: #ffffff;
    font-size: 22px;
    line-height: inherit;
}

#TopLogo .SliderButton .TopButton a {
    padding: 28px 28px;
    font-weight: 800;
    border: solid 2px #db1322;
    background-color: #db1322;
    box-shadow: initial;
}

#TopLogo .SliderButton .TopButton a:hover {
    color: #db1322;
    border-color: #db1322;
    background-color: #ffffff;
}


#TopLogo .SliderButton .TopButton .arrow {
    border-radius: initial;
}

#TopLogo .SliderButton .TopButton .arrow:before {
    content: initial;
}

#TopLogo .SliderButton .TopButton .arrow:after {
    border-style: initial;
    border-width: initial;
    width: 15px;
    height: 15px;
    border-top: solid 3px #ffffff;
    border-right: solid 3px #ffffff;
    transform: rotate(45deg);
    margin-top: -5px;
    right: 35px;
}

#TopLogo .SliderButton .TopButton .arrow:hover:after {
    border-top: solid 3px #db1322;
    border-right: solid 3px #db1322;
}





/*========= CTAボタン ===============*/


.CtaButton a {
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    background-color: #db1322;
    box-shadow: initial;
    border: solid 2px #db1322;
    padding: 20px 90px;
}

.CtaButton a:hover {
    color: #db1322;
    border-color: #db1322;
    background-color: #ffffff;
}

.CtaButton .arrow:before {
    content: initial;
}

.CtaButton .arrow:after {
    border-style: initial;
    border-width: initial;
    width: 25px;
    height: 25px;
    border-top: solid 4px #ffffff;
    border-right: solid 4px #ffffff;
    transform: rotate(45deg);
    margin-top: -10px;
    right: 80px;
}

.CtaButton .arrow:hover:after {
    border-top: solid 4px #db1322;
    border-right: solid 4px #db1322;
}



/*========= スライダー ===============*/
.spider {
    margin-top: initial;
}

.smb-spider-slider__figure-wrapper {
    overflow: initial;
}



/*■■■■■■■■■ セクション ■■■■■■■■■*/

/*========= SectionCheck ===============*/
#SectionCheck {
    padding: 0px 0px 20px;
}


#SectionCheck .h3nomal {
    padding: 20px 0px 25px !important;
}

#SectionCheck .item3 {
    gap: 10px;
}

#SectionCheck .item3 .wp-block-column {
    border-left: solid 1px #231815;
    padding: 10px 30px 10px 30px;
    align-items: center;
    display: inline-grid;
}

#SectionCheck .item3 .wp-block-column:nth-child(3) {
    border-right: solid 1px #231815;
}



#SectionCheck .item3 p {
    line-height: 20px;
}


#SectionCheck .item3 p:before {
    content: "";
    background-image: url(../img/check.png);
    width: 42px;
    height: 100px;
    background-size: 100%;
    background-repeat: no-repeat;
    float: inline-start;
    margin-right: 5px;
}


/*========= SectionOne ===============*/
#SectionOne {
    padding: 30px;
}

/*========= SectionTwo ===============*/

#SectionTwo li:nth-child(1) {
    width: initial;
}

#SectionTwo p {
    font-size: 19px;
    line-height: 20px;
}


#SectionTwo p span {
    font-size: 28px;
    font-weight: 800;
    line-height: normal;
    padding-bottom: 5px;
}


#SectionTwo ul {
    max-width: 800px;
}

#SectionTwo li {
    padding: 0px 0px 10px 115px;
    margin: 0px 0px 55px 0px;
}


#SectionTwo li:after {
    height: 5px;
}

#SectionTwo li:nth-child(1):after {
    background: #f9727c;
}

#SectionTwo li:nth-child(2):after {
    background: #db5481;
}

#SectionTwo li:nth-child(3):after {
    background: #db1322;
}


/*========= SectionThree ===============*/

#SectionThree .wp-block-columns {
    gap: 0px;
}

#SectionThree .greetingtext p {
    width: 540px;
    margin: 40px 0px;
    line-height: 25px;
}

#SectionThree .greeting {
    font-size: 18px;
}



/*========= SectionFive ===============*/
#SectionFive .h3image:before {
    content: "";
    background-image: url(../img/up.png);
    width: 105px;
    height: 140px;
    background-size: 100%;
    background-repeat: no-repeat;
    top: -85px;
    left: 495px;

}

#SectionFive .WhiteBox {
    gap: 30px !important;
    margin-top: 30px;
}

#SectionFive .WhiteBox div {
    padding: 20px 28px;
    border: solid 2px #db1322;
}

#SectionFive .WhiteBox p:nth-child(1) {
    min-height: initial;
}

#SectionFive .WhiteBox p {
    padding-bottom: 30px;
}

/*========= SectionSeven ===============*/

#SectionSeven .h2gap {
    color: #ffffff !important;
    margin: 30px auto 0px !important;
}

#SectionSeven .h2gap:after {
    border: 2px solid #ffffff !important;
}


#SectionSeven .smb-faq__item__answer__label,
.smb-faq__item__question__label {
    margin-right: 30px;
}

#SectionSeven .qa {
    margin-top: 20px;
}

#SectionSeven .qa .WhiteBox {
    gap: 30px !important;
    margin-top: 30px;
}

#SectionSeven .qa .WhiteBox .smb-faq__body {
    border: none;
    box-shadow: 8px 8px 0px 0 rgb(157, 157, 158);
}

#SectionSeven .qa .smb-faq__item__question {
    min-height: 60px;
}

#SectionSeven .qa .smb-faq__item__answer {
    min-height: 120px;
}

#SectionSeven .qa .WhiteBox .smb-faq__body .smb-faq__item__answer__body,
#SectionSeven .qa .WhiteBox .smb-faq__body .smb-faq__item__question__body {
    padding: initial;
    line-height: 20px;
}

#SectionSeven .qa .WhiteBox .smb-faq__body .smb-faq__item__answer__body:before,
#SectionSeven .qa .WhiteBox .smb-faq__body .smb-faq__item__question__body:before {
    left: 25px;
}

#SectionSeven .h2image:before {
    top: -60px;
    left: 390px;
}


/*========= SectionEight ===============*/

#SectionEight h5 {
    font-size: larger;
    background-color: #9d9d9e;
    width: 230px;
    padding: 0px;
}

#SectionEight .flex {
    display: flex;
    justify-content: end;
}

#SectionEight .price .wp-block-columns h4 {
    font-size: 22px;
    line-height: 50px;
    font-weight: normal;
}

#SectionEight .price .wp-block-columns {
    padding: 20px 70px;
}

#SectionEight .price .wp-block-columns p {
    font-size: 18px;
    font-weight: normal;
    line-height: 50px;
    margin: 0px;
}

#SectionEight .price .wp-block-columns p:nth-child(3) {
    padding-top: 8px;
}


#SectionEight .price .wp-block-columns span {
    font-size: 40px;
    font-weight: 800;
    padding: 0px 0px 0px 5px;
}

#SectionEight .price .wp-block-columns {
    color: #ffffff !important;
}

#SectionEight .price .wp-block-columns:nth-child(1) {
    background-color: #f9727c;
}

#SectionEight .price .wp-block-columns:nth-child(2) {
    background-color: #db5481;
}

#SectionEight .price .wp-block-columns:nth-child(3) {
    background-color: #db1322;
}

#SectionEight .price .wp-block-columns p:before {
    content: initial;
}

/*========= SectionNine ===============*/
#SectionNine .h2gap {
    color: #231815 !important;
}

#SectionNine .h2gap:after {
    border: 2px solid #231815 !important;
}


#SectionNine .news .bold {
    padding-left: 30px;
}

#SectionNine .news .wp-block-columns {
    border-bottom: solid 2px #db1322;
}






/*■■■■■■■■■ ブレイクポイント ■■■■■■■■■*/

@media screen and (min-width: 1950px) {}

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

    /*========= スライダー ===============*/
    .smb-spider-slider .spider__figure {
        width: 1920px;
    }

    /*========= SectionEight ===============*/

    #SectionEight .flex {
        align-items: center;
    }

    #SectionEight .price .wp-block-columns {
        padding: 20px;

    }

    /*========= #SectionNine ===============*/
    #SectionNine .news .bold {
        padding-left: initial;
    }


}

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


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


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

    /*========= トップロゴ、ボタン ===============*/
    #TopLogo {
        max-width: initial;
    }

    #TopLogo .title {
        font-size: x-large;
        line-height: 30px;
        margin-left: 30px;
    }

    #TopLogo .Logo img {
        width: initial;
    }

    #TopLogo .SliderButton .TopButton .arrow:after {
        right: 22px;
    }

    /*========= スライダー ===============*/
    .smb-spider-slider .spider__figure {
        width: 190vw;
    }


    /*========= SectionThree ===============*/
    #SectionThree .greetingtext p {
        width: 100%;
    }

    /*========= SectionFive ===============*/
    #SectionFive .h3image:before {
        left: 54vw;
        width: 95px;
        height: 130px;
        top: -70px;
    }


    /*========= SectionSeven ===============*/
    #SectionSeven .h2image:before {
        left: 37vw;
    }


}


@media screen and (max-width: 850px) {
    #SectionFive .h3image:before {
        left: 59vw;
    }
}

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


    body .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        margin-left: auto !important;
        margin-right: auto !important;
    }



    /*========= 見出し ===============*/

    .h3nomal,
    .h3slash {
        font-size: larger;
        line-height: 25px;
    }


    .h3speechBubblele {
        margin: 90px auto 120px !important;
    }

    .h3speechBubblele:after {
        margin-top: 30px;
    }




    /*========= トップロゴ、ボタン ===============*/


    #TopLogo {
        align-items: center;
        padding: 10px 10px 10px 20px;
    }


    #TopLogo .title {
        font-size: large;
        line-height: 18px;
        width: max-content;
    }

    #TopLogo .SliderButton .TopButton .arrow:after {
        right: 7px;
        width: 10px;
        height: 10px;
    }

    /*========= CTAボタン ===============*/
    .CtaButton a {
        font-size: 25px;
        padding: 20px 45px;
    }

    .CtaButton .arrow:after {
        width: 15px;
        height: 15px;
        margin-top: -5px;
        right: 20px;
    }


    /*========= SectionCheck ===============*/

    #SectionCheck .item3 {
        max-width: 300px;
        gap: 0px;
    }

    #SectionCheck .item3 .wp-block-column {
        border-left: initial;
        padding: 0px;
    }

    #SectionCheck .item3 .wp-block-column:nth-child(3) {
        border-right: initial;
    }


    #SectionCheck .item3 p:before {
        margin-right: 15px;
    }

    /*========= SectionTwo ===============*/

    #SectionTwo li {
        padding: 0px 0px 10px 85px;
    }

    #SectionTwo p {
        font-size: 16px;
        line-height: 16px;
    }


    #SectionTwo p span {
        font-size: 20px;
        line-height: 22px;
    }

    #SectionTwo p:nth-child(2) {
        padding-top: 10px;
    }

    #SectionTwo li:before {
        background-size: contain;
        width: 70px;
        height: 70px;
        background-repeat: no-repeat;
        bottom: 0px;
    }

    #SectionTwo li:nth-child(1):before {
        content: "";
        background-image: url(../img/one.png);
    }

    #SectionTwo li:nth-child(2):before {
        content: "";
        background-image: url(../img/two.png);
    }

    #SectionTwo li:nth-child(3):before {
        content: "";
        background-image: url(../img/three.png);
    }





    /*========= SectionFour ===============*/
    #SectionFour {
        padding-bottom: 0px;
    }

    /*========= SectionFourColumn ===============*/
    #SectionFourColumn .columnFloating {
        top: -45px;
    }

    /*========= SectionFive ===============*/
    #SectionFive .h3image:before {
        top: 10px;
        left: 60vw;
    }


    #SectionFive .WhiteBox p {
        min-height: initial;
        padding-bottom: 20px;
    }


    /*========= SectionSeven ===============*/
    #SectionSeven .h2image:before {
        left: 31vw;
        top: -125px;
    }

    /*========= SectionEight ===============*/

    #SectionEight .price .wp-block-columns {
        gap: 0px;
    }

    #SectionEight .price .wp-block-columns h4 {
        font-size: larger;
    }

    #SectionEight .price .wp-block-columns p {
        font-size: larger;
        text-align: right;
    }

    #SectionEight .price .wp-block-columns span {
        font-size: 30px;
    }

    /*========= SectionNine ===============*/

    #SectionNine .news .wp-block-columns {
        gap: 10px;
    }
}

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

    /*========= 見出し ===============*/
    .h3speechBubblele {
        margin: 100px auto 50px !important;
        font-size: large;
    }

    /*========= トップロゴ、ボタン ===============*/
    #TopLogo .title {
        font-size: medium;
        line-height: 16px;
        width: 130px;
        margin-left: initial;
    }

    #TopLogo .SliderButton .TopButton {
        line-height: 0px;
    }

    /*========= CTAボタン ===============*/
    .CtaButton a {
        font-size: 18px;
        padding: 15px;
    }

    /*========= スライダー ===============*/
    .top-spider img {
        width: 190vw !important;
    }


    /*========= SectionFive ===============*/
    #SectionFive .h3image:before {
        content: initial;
    }


    /*========= SectionSeven ===============*/
    #SectionSeven .h2image:before {
        left: 40vw;
        top: -85px;
    }



}


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

    /*========= 見出し ===============*/
    .h3speechBubblele {
        margin: 150px auto 50px !important;
        font-size: large;
    }

    .h3speechBubblele:after {
        display: none;
    }
}