/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rock+Salt&display=swap');
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css");

:root {
    --fk-darkblue: #00328A;
    --fk-black: #000000;
    --fk-darkgray: #616161;
    --fk-darkegray2: #9e9e9e;
    --fk-gray: #bababa;
    --fk-lightgray: dfdfdf;
    --fk-lightgray2: #f1f1f1;
    --fk-white: #f5f5f5;

    --vk-color-text-body: var(--fk-black);
}

body,
html {
    font-family: Roboto, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

.footer-contact-area {
    color: var(--wp--preset--color--white);
    background-color: var(--fk-darkblue);
    background-image: url("./images/footer_background.webp");
    background-size: cover;
    background-position: center 7rem;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 4rem;
    position: relative;

    


    & p {
        text-align: center;
    }

    & .footer-contact-phrase-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        & .footer-contact-phrase1 {
            font-family: "Rock Salt", sans-serif;
            font-size: 6rem;
            transform: rotate(-6deg);
            margin-bottom: 1rem;
        }

        & span {
            font-size: 1.5rem;
            ;
        }
    }

    & .footer-contact-phrase2 {
        font-size: 1.5rem;

    }

    & a.contact-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        max-width: 620px;
        height: 80px;
        font-size: 1.5rem;
        color: var(--fk-darkblue);
        background-color: var(--wp--preset--color--white);
        border: none;
        position: relative;

        &::after {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            content: "\f061";
            color: var(--fk-white);
            font-size: 1rem;
            position: absolute;
            right: 1em;
            background-color: var(--fk-darkblue);
            border-radius: 50%;
            width: 2em;
            height: 2em;
            padding-top: 0.5rem;
            text-align: center;
        }
    }

    & .footer-tel {
        text-align: center;
        font-size: 1.5rem;

        & a {
            color: var(--wp--preset--color--white);
        }
    }

}

@media (min-width: 576px) {
    :root {
        --vk-width-container: 576px;
    }

    .container {
        max-width: 576px;
    }
}

@media (min-width: 768px) {
    :root {
        --vk-width-container: 768px;
    }

    .container {
        max-width: 768px;
    }
}

@media (min-width: 992px) {
    :root {
        --vk-width-container: 992px;
    }

    .container {
        max-width: 992px;
    }

    .footer-contact-area {
        & .footer-contact-phrase-box {
            width: 992px;
        }
    }

}

@media (min-width: 1200px) {
    :root {
        --vk-width-container: 1200px;
    }

    .container {
        max-width: 1200px;
    }

    .footer-contact-area {
        & .footer-contact-phrase-box {
            width: 1200px;
        }
    }
}

/* top page */
.h2_box {
    margin-bottom: 4rem;

    & .top_h2 {
        border: none;
        color: var(--fk-darkblue);
        font-family: "Rock Salt", sans-serif;
        font-size: 6rem;
        transform: rotate(-6deg);
        margin-bottom: 1rem;
        white-space: nowrap;
    }

    & span {
        font-size: 1.5rem;
    }
}

.top_h3 {
    font-size: 3rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    border: none;

    &::before {
        border-top: 1px solid var(--fk-darkblue);
        content: "";
        width: 32px;
        margin-right: 28px;
    }

    &::after {
        content: none;
    }
}

.top_content {}

.top_content1,
.top_content2,
.top_content3 {
    & p {
        padding-left: 60px;
    }
}

.top_content1 {
    position: relative;
    & .text_content{
        width: 50%;
    }
    & figure{
        position: absolute;
        
    }
    
}

.top_content2 {
    
    & .text_content{
        width: 70%;
        margin: 0 auto;
    }
}

.top_content3 {
    & .text_content{
        width: 50%;
    }

}