@charset "utf-8";

/*--------------------------------------------------
 リセット
--------------------------------------------------*/
*, ::before, ::after {
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    /* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-feature-settings: "palt";
    color: #000;
    margin: 0;
    padding: 0;
}

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

h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
    vertical-align: bottom;
}

button {
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: none
}

a {
    text-decoration: none;
    cursor: pointer;
}

address{
    font-style:normal;
}



/*--------------------------------------------------
 ブレイクポイント
--------------------------------------------------*/
/* 768px */
@media screen and (width <= 768px) {
}




/*--------------------------------------------------
 変数
--------------------------------------------------*/
:root {
    /* 色 */
    --color-blue-primary: #003399;
    --color-gray_primary: #c8c8c8;
    --color-pink_primary: #F38F9A;

    /* サイズ */
    --width-primary: 1140px;
}



/*--------------------------------------------------
 メディアクエリ
--------------------------------------------------*/
/* width <= 1024px */
.width_1024_more_show {
    display: block !important;
}
@media screen and (width <= 1024px) {
    .width_1024_more_show {
        display: none !important;
    }
}

.width_1024_less_show {
    display: none !important;
}
@media screen and (width <= 1024px) {
    .width_1024_less_show {
        display: block !important;
    }
}


/* width <= 768px */
.pc-only {
    display: block !important;
}
@media screen and (width <= 768px) {
    .pc-only {
        display: none !important;
    }
}

.pc-only-flex {
    display: flex !important;
}
@media screen and (width <= 768px) {
    .pc-only-flex {
        display: none !important;
    }
}

  
.sp-only {
    display: none !important;
}
@media screen and (width <= 768px) {
    .sp-only {
        display: block !important;
    }
}

.sp-only-flex {
    display: none !important;
}
@media screen and (width <= 768px) {
    .sp-only-flex {
        display: flex !important;
    }
}



/*--------------------------------------------------
 共通
--------------------------------------------------*/
/* フォントサイズ */
.font_1p5em {
    font-size: 1.5em;
}

.font_2p0em {
    font-size: 2em;
}

.font_0p8em {
    font-size: 0.8em;
}

/* マウスオーバー時 */
.hover_opacity {
    transition: all 0.3s;

    &:hover {
        opacity: 0.7;
    }
}

/* ボーダー */
.border_bottom_gray_primary {
    border-bottom: 1.5px solid var(--color-gray_primary);

    &.triangle {
        position: relative;

        &::before {
            content: "";
            width: 24px;
            height: 10px;
            background-color: var(--color-gray_primary);
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            position: absolute;
            bottom: -10px;
            left: 50%;
            translate: -50% 0;
            z-index: 10;
        }

        &::after {
            content: "";
            width: 24px;
            height: 10px;
            background-color: var(--color-blue-primary);
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            position: absolute;
            bottom: calc(-10px + 2.5px);
            left: 50%;
            translate: -50% 0;
            z-index: 20;
        }
    }
}

/* 768pxより大きいときのみ<span class="width_more768px_text_inline">&nbsp;</span>（半角スペース）が生きる設定 */
.width_more768px_text_inline {
    display: inline;
}
@media screen and (width <= 768px) {
    .width_more768px_text_inline {
        display: none;
    }
}



/*--------------------------------------------------
 ハンバーガーメニュー
--------------------------------------------------*/
/* ボタン */
.hamburger-menu_wrap {
    width: 40px;
    height: 40px;
}

.hamburger-menu {
    width: 40px;
    height: 40px;

    position: relative;
    
    appearance: none;
    padding: 0;
    cursor: pointer;


    &.hamburger-menu--open {
        background-color: transparent;
        border: 2px solid transparent;

        .hamburger_menu_bar {
            background-color: #5f5f5f;
            top: 50%;

            &:first-child {
                transform: translateX(0%) translateY(-50%) rotate(45deg);
                top: 50%;
            }

            &:nth-child(2) {
                display: none;
            }

            &:last-child {
                transform: translateX(0%) translateY(-50%) rotate(-45deg);
                top: 50%;
            }
        }
    }

    .hamburger_menu_bar {
        display: inline-block;
        width: 100%;
        height: min(0.6dvw, 3px);
        background-color: #5f5f5f;
        position: absolute;
        left: 0;
        transform: translate(0%, -50%);
        transition: .5s;

        &:first-child {
            top: 20%;
        }

        &:nth-child(2) {
            top: 50%;
        }

        &:last-child {
            top: 80%;
        }
    }
}

/* メニュー */
.navigation_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    max-width: 100dvw;
    height: 0;
    z-index: 9000;
    margin-inline: 0;

    .navigation {
        display: none;
        background-color: var(--color-blue-primary);
        position: absolute;
        top: 0;
        left: 0;
        width: 100dvw;
        height: 100vh;
        /* z-index: 8000; */
    }

    .navigation_inner {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        overflow-y: auto;
        margin-inline: 0;
    }

    .navigation_inner_box {
        margin-inline: 5%;
        display: flex;
        flex-direction: column;
        width: fit-content;
    }

    .navigation_title_box { 
        margin-inline: 0;
        margin-bottom: 25px;

        .navigation_title {
            width: 80px;
            margin-inline: 0;
        }
    }

    .navigation_list {
        list-style: none;
        padding: 0 20px;
        margin: 0;
        display: grid;
        row-gap: 60px;
    }

    .list_item {
        position: relative;

        &:not(:last-of-type):before {
            content: "";
            width: 100%;
            height: 1px;
            background-color: #fff;
            position: absolute;
            bottom: -30px;
            left: 0;
        }
    }

    .navigation_link {
        color: #fff;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        transition: .5s;
        display: flex;
        flex-direction: column;
    }
}

/* バーガーメニューOPEN時にスクロールを禁止する */
body.navigation--open {
    overflow-y: hidden;
} 

  

/*--------------------------------------------------
 header
--------------------------------------------------*/
.header_wrap {
    width: 100%;
    height: 65px;
    padding-inline: 30px;
    align-items: center;
    position: relative;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.40);
    display: grid;
    align-items: center;
    position: fixed;

    .header_wrap_inner {
        width: 100%;
        max-width: var(--width-primary);
        margin-inline: auto;

        &.remit_flex {
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .header_logo_box {
            height: 36px;
        }

        .nav_wrap {
            align-items: center;
            column-gap: 3rem;

            a {
                color: #5F5F5F;
                font-size: 15px;
                font-style: normal;
                font-weight: 500;
                line-height: 1.5;
            }

            .nav_list_btn {
                display: grid;
                place-content: center;
                background-color: var(--color-pink_primary);
                border: 1px solid var(--color-pink_primary);
                filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.10));
                border-radius: 99999px;
                width: 230px;
                height: 40px;

                color: #fff;
                transition: color 0.3s, background-color 0.3s;

                /* マウスホバー時 */
                &:hover {
                    background-color: #fff;
                    color: var(--color-pink_primary);
                }
            }
        }
    }
}



/*--------------------------------------------------
 footer
--------------------------------------------------*/
.footer_wrap {
    background-image: url(../img/bg-footer-pc.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-block: 120px;
    padding-inline: 50px;
}
@media screen and (width <= 768px) {
    .footer_wrap {
        padding-block: 80px;
        padding-inline: 40px;
    }
}

.footer_wrap_inner {
    max-width: var(--width-primary);
    margin-inline: auto;        

    &.remit_grid {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
    }
    @media screen and (width <= 768px) {
        &.remit_grid {
            display: grid;
            grid-template-columns: auto;
            grid-template-rows: auto auto;
            justify-content: center;
        }
    }

    .footer_logo {
        width: 249px;
    }
    @media screen and (width <= 768px) {
        .footer_logo {
            width: 249px;
            justify-self: center;
        }
    }

    .footer_text_wrap {
        color: #fff;

        &.remit_grid {

        }
        @media screen and (width <= 768px) {
            &.remit_grid {
                display: grid;
                justify-content: center;
            }
        }

        .footer_text_box_01 {
            color: #FFF;
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.05em;
            border: 1px solid #fff;
            border-radius: 99999px;
            width: 370px;
            height: 65px;
            display: grid;
            place-content: center;
        }
        @media screen and (width <= 768px) {
            .footer_text_box_01 {
                font-size: 14px;
                width: 100%;
                max-width: 300px;
                height: 45px;
                justify-self: center;
                margin-top: 4rem;
            }
        }

        .footer_text_box_02 {
            margin-top: 1rem;
            color: #FFF;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.05em;
        }
        @media screen and (width <= 768px) {
            .footer_text_box_02 {
                font-size: 14px;
                justify-self: center;
            }
        }

        .footer_text_box_03 {
            margin-top: 1rem;
            position: relative;
            padding-left: 0.7em;

            color: #FFF;
            text-align: center;
            font-size: 47px;
            font-style: normal;
            font-weight: 700;
            line-height: 1;
            letter-spacing: 0.05em;

            &::before {
                content: "";
                width: 0.7em;
                height: 0.7em;
                background-image: url(../img/tel-mark.svg);
                background-size: contain;
                background-repeat: no-repeat;
                position: absolute;
                top: 55%;
                left: 0;
                translate: 0 -50%;
            }
        }
        @media screen and (width <= 768px) {
            .footer_text_box_03 {
                font-size: 36px;
                justify-self: center;
            }
        }

        .footer_text_box_tel_number {
            color: #fff;
        }
        @media screen and (width >= 768px){
                a[href*="tel:"] {
                    pointer-events: none; /*①アンカーのtelを無効化*/
                    cursor: default; /*②アンカーのポインターをデフォルトにする*/
                    text-decoration: none;
                }
        }

        .footer_text_box_04 {
            margin-top: 1rem;
            color: #FFF;
            font-size: 13px;
            font-style: normal;
            font-weight: 700;
            line-height: 1.5;
            letter-spacing: 1px;
        }
        @media screen and (width <= 768px) {
            .footer_text_box_04 {
                font-size: 11px;
                justify-self: center;
            }
        }
    }
}