@charset "UTF-8";

/*==============================================================================
1.共通事項
2.header
3.footer
4.下層
5.パンクズ
6.404ページ
==============================================================================*/

/*============================================================================================================================================================
==============================================================================================================================================================

	1.共通事項

==============================================================================================================================================================
============================================================================================================================================================*/
html {
    font-size: 10px;
    scroll-padding-top: 50px; /* ヘッダー高さ */
}
@media all and (min-width: 769px) {
    html {
        scroll-padding-top: 130px;
    }
}

body {
    font-size: var(--fontsize-base);
    font-family: var(--font-base);
    color: var(--color-font);
    letter-spacing: var(--letter-spacing);
    line-height: var(--lingh-height);
}
@media all and (max-width: 768px) {
    body{
        margin-top: 50px;
    }
}
@media all and (min-width: 769px) {
    body {
        font-size: 1.5rem;
        min-width: var(--min-width);
    }
}

/*============ カラー ============*/
body{
    & .col-font{color: var(--color-font);}
    & .col-main{color: var(--color-main);}
    & .col-sub{color: var(--color-sub);}
    & .col-accent{color: var(--color-accent);}
    & .col-red{color: var(--color-red);}
    & .col-white{color: #fff;}
}

/*============ リンク ============*/
a {
    font-family: var(--font-base);
    color: var(--color-sub);
    transition: 500ms;

    &:hover {opacity: 0.6;}
}
/* 電話番号はPC時にクリックできないようにする */
@media all and (min-width: 769px) {
    a[href^="tel:"]{pointer-events: none;}
}

/*============ フォント ============*/
[lang="en"] {
    font-family: var(--font-en);
}

/*============ selection ============*/
::selection {
    background: var(--color-sub);
    color: var(--color-font);
}

/*============ indent ============*/
.indent{
    margin-left: 1em;
    text-indent: -1em;
}

/*============ disc_list ============*/
ul.disc-list li {
    position: relative;
    padding-left: 1em;

    &::before {
        content: "";
        width: 0.3em;
        height: 0.3em;
        position: absolute;
        left: 0;
        top: 0.8em;
        background-color: var(--color-main);
        border-radius: 100%;
    }

    & + li{
        margin-top: 10px;
    }
}


/*============ ボタン ============*/
.button {
    width: 250px;
    max-width: 100%;
    padding: 15px 30px;
    display: inline-block;
    text-align: center;
    font-size: 1.6rem;
    font-weight: var(--weight-bold);
    background-color: var(--color-main);
    line-height: 1.6;
    border-radius: 30px;
    position: relative;
    transition: 500ms;

    &:hover {opacity: 0.6;}

    &::after {
        content: "";
        width: 8px;
        height: 14px;
        position: absolute;
        top: 50%;
        right: 20px;
        background-color: #fff;
        transform: translateY(-50%);
        clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 100%, 80% 50%, 0% 0%);
        transition: 500ms;
    }

    /* ========== 矢印 左向き ========== */
    &.arrow-left {
        &::after {
            left: 20px;
            right: unset;
            transform: translateY(-50%) scale(-1.1);
        }
    }

    /* ========== 矢印 カラー font ========== */
    &.arrow-font {
        &::after {background-color: var(--color-font);}
    }
    /* ========== 矢印 カラー main ========== */
    &.arrow-main {
        &::after {background-color: var(--color-main);}
    }
    /* ========== 矢印 カラー sub ========== */
    &.arrow-sub {
        &::after {background-color: var(--color-sub);}
    }
    /* ========== 矢印 カラー accent ========== */
    &.arrow-accent {
        &::after {background-color: var(--color-accent);}
    }

    /* ========== ボタンカラー 白 ========== */
    &.bg-white {background-color: #fff;}

    /* ========== ボタンカラー 黒 ========== */
    &.bg-black {background-color: #000;}

    /* ========== ボタンカラー フォント ========== */
    &.bg-font {background-color: var(--color-font);}

    /* ========== ボタンカラー sub ========== */
    &.bg-sub {background-color: var(--color-sub);}

    /* ========== ボタンカラー accent ========== */
    &.bg-accent {background-color: var(--color-accent);}

    /* ========== ボタン 別窓 ========== */
    &.window {
        &::after {
            right: 20px !important;
            width: 10px;
            height: 10px;
            background-color: transparent;
            background-image: url(../1_img/base/icon-window.svg);
            clip-path: unset;
        }

        /* ========== ボタン 別窓 白 ========== */
        &.window-white::after {
            background-image: url(../1_img/base/icon-window-white.svg);
        }
    }
}

@media all and (min-width: 769px) {
    &.button {
        padding: 20px 0;
        line-height: 1;
    }
}

/*================================    fukidashi   ================================*/
.fukidashi{
    padding: 0 25px;
    display: inline-block;
    position: relative;

    &::before,&::after{
        content: "";
        position: absolute;
        bottom: 0;
        width: 15px;
        aspect-ratio: 15 / 22;
        background: url(../1_img/base/deco-fukidashi.svg) no-repeat center / 100% auto;
    }
    &::before{left: 0;}
    &::after{right: 0;transform: scale(-1,1);}

    &.white{
        color: #fff;
        
        &::before,&::after{
            background: url(../1_img/base/deco-fukidashi_white.svg) no-repeat center / 100% auto;
        }
    }
    &.size-l{
        padding: 0 30px;
        
        &::before,&::after{
            width: 20px;
        }
    }
}


/*================================    clearfix   ================================*/
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/*================================    表示・非表示   ================================*/
@media all and (min-width: 769px) {
    .only-sp {
        display: none !important;
    }
}

@media all and (max-width: 768px) {
    .only-pc {
        display: none !important;
    }
}

/*================================    inner   ================================*/
.inner {
    margin: 0 auto;
    padding: 0 20px;

    & .pdg-none{padding: 0;}
}
@media all and (min-width: 769px) {
    .inner {
        padding: 0;
        width: var(--min-width);
    }
}

/*==============================================================================

	カルーセル

==============================================================================*/
.carousel-wrap{
    overflow: hidden;

    & .carousel{
        width: max-content;
        display: flex;
        height: 100%;
        list-style: none;
        animation: loop-slide 30s infinite linear 0s both; 
        gap: 10px;
    }

    &.reverse .carousel{
        animation: loop-slide_rev 30s infinite linear 0s both;
    }

}
/*================================   カルーセル PC   ================================*/
@media all and (min-width: 769px){
    .carousel-wrap{
        & .carousel{animation: loop-slide 100s infinite linear 0s both;}
        &.reverse .carousel{animation: loop-slide_rev 100s infinite linear 0s both;}
    }
}
@keyframes loop-slide {
    from {transform: translateX(0);}
    to {transform: translateX(-50%);}
}
@keyframes loop-slide_rev {
    from {transform: translateX(-50%);}
    to {transform: translateX(0%);}
}
/*
animation-name: loop-slide;アニメーション名
animation-duration: 20s;開始から終了までの所要時間
animation-iteration-count: infinite;アニメーションのループ回数
animation-timing-function: linear;動きの加減速
animation-delay: 1s; アニメーションが開始するまでの遅延時間
animation-fill-mode: both;アニメーション開始前・終了後の挙動
*/

/* hoverで止めたいとき
.carousel {
animation-play-state: paused!important;
}
*/


/*==============================================================================

	swiper

==============================================================================*/
.swiper-wrap{
    height: 100%;
    position: relative;
    padding-bottom: 30px;

    /* ページネーション */
    & .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal{
        display: flex;
        gap: 10px;
        justify-content: center;
        bottom: 0px;

        & .swiper-pagination-bullet{
            margin: 0;
            background-color: #9c9a99;
            opacity: 1;
        }
        & .swiper-pagination-bullet-active{
            background-color: var(--color-main);
        }
    }
    /* ページ送り */
    & .swiper-button-next, & .swiper-button-prev{
        width: 40px;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 100%;
        background-color: var(--color-main);
        transition: 500ms;

        &:hover{
            background-color: var(--color-sub);

            &::after{
                border-color: var(--color-font);
            }
        }

        &::after{
            content: "";
            width: 35%;
            aspect-ratio: 1 / 1;
            position: absolute;
            top: 50%;
            left: 50%;
            border-top: 2px solid #fff;
            border-left: 2px solid #fff;
            transition: 500ms;
        }
    }
    & .swiper-button-next{
        right: 40px;
        transform: translateX(10px);

        &::after{
            transform: translateX(calc(-50% - 3px)) translateY(-50%) rotate(-45deg) scale(-1,-1);
        }
    }
    & .swiper-button-prev{
        left: 40px;
        transform: translateX(-10px);

        &::after{
            transform: translateX(calc(-50% + 3px)) translateY(-50%) rotate(-45deg);
        }
    }
}
/* pc時のみスライダー解除する場合 */
@media all and (min-width: 769px) {
    .swiper-wrap.swiper-only_sp{

        & .swiper{
            overflow: visible;
        }

        & .swiper-wrapper {
            display: block;
            transform: none;
        }
        & .swiper-slide {
            width: auto;
            margin-right: 0;
        }

        & .swiper-pagination,
        & .swiper-button-prev,
        & .swiper-button-next{
            display: none;
        }

    }
}



/*==============================================================================

	fancybox

==============================================================================*/
.fancybox__dialog{
    & .fancybox__container{
        --f-arrow-width: 30px;
        --f-arrow-height: 30px;
        --f-arrow-svg-width: 15px;
        --f-arrow-svg-height: 15px;
        --f-arrow-pos: 12px;
    }

    /* 背景色 */
    & .fancybox__backdrop {
        background-color: rgb(var(--color-main_rgb) / 0.8);
    }
    /* モーダルのコンテンツ表示 */
    & .f-html {
        padding: 30px;
        position: relative;
        max-width: calc(100% - 40px);

        /* 閉じるボタン */
        & .f-button[data-fancybox-close] {
            margin: 0;
            padding: 0;
            width: 40px;
            height: auto;
            aspect-ratio: 1 / 1;
            position: absolute;
            top: -10px;
            right: -10px;
            background-color: var(--color-main);
            border-radius: 50%;
            
            &::before,&::after {
                content: "";
                width: 60%;
                height: 2px;
                position: absolute;
                top: 50%;
                left: 50%;
                background: var(--color-white);
            }
            &::before {
                transform: translate(-50%, -50%) rotate(45deg);
            }
            &::after {
                transform: translate(-50%, -50%) rotate(-45deg);
            }

            & svg{display: none;}
        }
    }
}
@media all and (min-width: 769px) {
    .fancybox__dialog{
        & .fancybox__container{
            --f-arrow-width: 50px;
            --f-arrow-height: 50px;
            --f-arrow-svg-width: 24px;
            --f-arrow-svg-height: 24px;
            --f-arrow-pos: 30px;
        }
        /* モーダルのコンテンツ表示 */
        & .f-html {
            /* 閉じるボタン */
            & .f-button[data-fancybox-close] {
                width: 45px;
                top: -20px;
                right: -20px;
            }
        }
    }
}


/*==============================================================================

	ローディングアニメーション
    
==============================================================================*/
/* https://www.t-web.co.jp/blog/page-move-animation/ */
.md_transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    transition: transform 0.8s cubic-bezier(.39, .575, .565, 1) 0.8s;
    /* ここの最後の0.8sを増減するとアニメーションの開始タイミングを変更できます */
    z-index: 999998;
}
.md_transition::before {
    /*background: linear-gradient(0deg, hsla(0, 77%, 66%, 0), #5b5757 33.33333%, #5b5757 66.66667%, hsla(0, 0%, 100%, 0)); */
    background: var(--color-gray);
    content: "";
    display: block;
    width: 100%;
    height: 300%;
    position: absolute;
    left: 0;
    top: -100%;
    z-index: 1;
}
body.is_remove .md_transition {
    -webkit-animation: maskCloseTransition .8s cubic-bezier(.47, 0, .745, .715) 0s 1 forwards;
    animation: maskCloseTransition .8s cubic-bezier(.47, 0, .745, .715) 0s 1 forwards;
}
body:not(.is_fade) .md_transition {
    transform: translateY(-200%);
}
@-webkit-keyframes maskCloseTransition {
    0% {
        transform: translateY(200%);
    }

    to {
        transform: translate(0);
    }
}
@keyframes maskCloseTransition {
    0% {
        transform: translateY(200%);
    }

    to {
        transform: translate(0);
    }
}

.md_icon {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: url(../1_img/base/loading.svg) no-repeat center / 150px auto;
    transition: 800ms;
    z-index: 999998;
    pointer-events: none;
}
body:not(.is_fade) .md_icon {
    opacity: 0;
}
body.is_remove .md_icon {
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(.39, .575, .565, 1) 0.8s;
}
@media all and (min-width: 769px) {
    .md_icon {background-size: 200px auto;}
}


/*============================================================================================================================================================
==============================================================================================================================================================

	2.header

==============================================================================================================================================================
============================================================================================================================================================*/
@media (min-width: 769px) {
    .front header{
        background-color: transparent;
        transition: background-color 800ms;

        &.on{background-color: var(--color-main);}
    }
    header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        transition: 500ms;
        z-index: 9999;
        background-color: var(--color-main);

        & .header-inner {
            margin: 0 auto;
            padding: 0 0 0 20px;
            height: 90px;
            max-width: var(--min-width);
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: stretch;
        }
    }

    /* ========== ロゴの周り logo-wrap ========== */
    header .logo-wrap {
        display: flex;
        align-items: center;

        & .logo {
            aspect-ratio: 213 / 52;
            width: 265px;
            height: auto;
            transition: 500ms;

            & img{
                width: 100%;
                height: 100%;
            }
        }
    }

    /* ========== navの設定 ========== */
    header .nav-wrap {
        display: flex;
        align-items: center;

        & nav {
            height: 100%;
        }
    }

    /* ========== ベースメニュー ========== */
    header .nav-wrap nav ul.nav-menu-base {
        height: 100%;
        display: flex;
        position: relative;
        gap: 0;

        & >li {
            height: 100%;
            transition: 500ms;

            &.current,
            &:hover {
                &>a {color: var(--color-sub);}
            }

            & > a {
                padding: 0 15px;
                height: 100%;
                display: flex;
                align-items: center;
                color: #fff;
                opacity: 1;
                transition: 500ms;

                & span {
                    padding-top: 16px;
                    display: block;
                    text-align: center;
                    transition: 500ms;
                    background-image: url(../1_img/base/deco-star.svg);
                    background-repeat: no-repeat;
                    background-position: top center;
                    background-size: 9px auto;

                    &[lang="ja"] {
                        font-size: 1.4rem;
                        font-weight: var(--weight-bold);
                    }
                }
            }

            /* === homeはsp用なので消しておく === */
            &.nav-menu-base-home {
                display: none;
            }
        }
    }

    /* ========== サブメニュー ========== */
    header nav ul.nav-menu-sub {
        width: calc(100% - 20px);
        position: absolute;
        top: calc(100%);
        left: 0;
        background-color: var(--color-sub);
        border-radius: 0 0 10px 10px;
        opacity: 0;
        transition: 500ms;
        pointer-events: none;

        & li {
            & a {
                padding: 10px;
                display: block;
                color: var(--color-font);
                font-size: 1.2rem;
                line-height: 1.6;
            }

            &+li {
                border-top: 1px solid var(--color-font);
            }
        }
    }

    /* ベースでhover時の動き */
    header nav ul.nav-menu-base li:hover ul.nav-menu-sub {
        opacity: 1;
        pointer-events: all;
    }

    /*======== スマホ用の開閉メニュー =========*/
    .sp-menu-wrap {
        display: none;
    }

    /*======== スマホ用の開閉メニュー =========*/
    & .header-insta{
        margin-left: 20px;
        padding: 10px 33px 10px 13px;
        width: auto;
        text-align: left;
        background: linear-gradient(90deg, #ff860f 10%, #ff1e52 50%, #cf5cc6 90%);

        &.window::after{right: 15px!important;}
        
        & span{
            padding-left: 27px;
            display: inline-block;
            position: relative;
            font-size: 1.4rem;
            
            &::after{
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                width: 19px;
                aspect-ratio: 1 / 1;
                background: url(../1_img/base/icon-insta_white.svg) no-repeat center / 100% auto;
                transform: translateY(-50%);
            }
        }
    }
}

@media (max-width: 900px) and (min-width: 768px) {

    header .logo-wrap {
        & .logo {
            width: 230px;
        }
    }
    header .nav-wrap nav ul.nav-menu-base {
        & > li {
            & > a {
                padding: 0 10px;

                & span {
                    &[lang="en"] {
                        font-size: 1.6rem;
                    }
                }
            }
        }
    }
}

/*==============================================================================

	header スマホ

==============================================================================*/
@media all and (max-width: 768px) {
    header {
        padding: 5px 10px;
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        transition: 800ms;
        z-index: 9999;
        background-color: var(--color-main);
        box-shadow: 0 4px 4px rgba(135, 135, 135, 0.1);

        & .header-inner{
            height: 100%;
        }
    }

    /* ========== ロゴの周り logo-wrap ========== */
    header .logo-wrap {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;

        & .logo {
            aspect-ratio: 213 / 52;
            height: 40px;
            transition: 500ms;

            & a{
                display: block;
                height: 100%;
                line-height: 1;
            }

            & img{
                width: 100%;
                height: 100%;
            }
        }
    }


    /* ========== navの設定 ========== */
    header .nav-wrap {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        transition: 800ms;
        z-index: 9999;
        background-color: var(--color-main);
        filter: drop-shadow(0px -5px 5px rgba(135, 135, 135, 0.1));
        padding: 0 10px;
    }

    /* ========== ベースメニュー ========== */
    header nav ul.nav-menu-base {
        display: flex;
        justify-content: flex-start;

        /* crttentなしの設定 */
        & >li {
            width: calc(100% / 4);

            & > button,& > a {
                padding-top: 30px;
                padding-bottom: 5px;
                width: 100%;
                display: block;
                position: relative;
                font-size: 1rem;
                letter-spacing: 0.15em;
                text-align: center;
                background-size: 10px auto;
                background-position: top 9px center;
                background-repeat: no-repeat;
                color: #fff;
                font-weight: var(--weight-bold);

                & span {
                    display: block;
                }
            }

            & > button,& > a {
                padding-bottom: 8px;
                background-position: top 12px center;
                background-image: url(../1_img/base/deco-star.svg);
            }
        }

        /* current時の設定 */
        & > li.current {
            & > a {color: var(--color-sub);}
        }
    }

    /* ========== メニューのアニメーション ========== */
    & .menu-animation {
        position: absolute;
        left: 50%;
        top: 10px;
        width: 30px;
        height: 2px;
        transform: translateX(-50%);

        & >span {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #fff;
            top: 0px;
            transition: 500ms;
            display: block;
        }

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #fff;
            transition: 500ms;
        }

        &::before {
            top: -10px;
        }

        &::after {
            bottom: -10px;
        }
    }

    .nav-menu-base .menu{
        & span{transition: 500ms;}
    }
    .menu_open .nav-menu-base .menu{
        & span{color: var(--color-sub);}
    }
    .menu_open .nav-wrap-sp .menu span>span {color: var(--color-sub);}
    .menu_open .menu-animation {

        & >span {opacity: 0;}

        &::before {
            top: 0px;
            transform: rotate(135deg);
            background-color: var(--color-sub);
        }

        &::after {
            bottom: 0px;
            transform: rotate(-135deg);
            background-color: var(--color-sub);
        }
    }
    .menu_open header{
        box-shadow:  4px 4px rgba(135, 135, 135, 0);
        background-color: transparent;

        & .logo-wrap{
            opacity: 0;
            pointer-events: none;
            transition: 500ms;
        }
    }
    /* ========== メニューのアニメーション end ========== */

    /*======== スマホ用の開閉メニュー =========*/
    .sp-menu-wrap {
        padding: 20px 10px;
        width: 100%;
        height: calc(100svh - 53px);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9998;
        opacity: 0;
        background-color: #000;
        transition: opacity 500ms;
        pointer-events: none;

        &.open {
            opacity: 1;
            pointer-events: all;
        }
    }
    /*======== スマホ用の開閉メニュー end =========*/

    /* サブメニュー */
    header nav ul.nav-menu-sub {
        display: none;
    }

    /*======== インスタのアイコン =========*/
    & .header-insta{
        margin: 0;
        padding: 0;
        width: 60px;
        aspect-ratio: 1 / 1;
        position: fixed;
        bottom: 72px;
        right: 10px;
        background: url(../1_img/base/header-insta.png) center / 100% auto;
        
        &::after{content: none;}
        & span{display: none;}
    }
}

/*============================================================================================================================================================
==============================================================================================================================================================

	3.footer

==============================================================================================================================================================
============================================================================================================================================================*/

/* お問い合わせ等のボタン */
.fix-btn {
    padding: 10px;
    position: fixed;
    right: 20px;
    bottom: 70px;
    color: var(--color-font);
    background-color: var(--color-sub);
    transition: 800ms;
    z-index: 999;
}

footer {
    margin-top: 70px;
    padding: 40px 0 calc(40px + 53px);
    position: relative;
    color: #fff;
    background-color: #5d5959;
    z-index: 4;

    & a{
        color: #fff;
    }

    &::before {
        width: 100%;
        height: 170px;
        content: "";
        top: -170px;
        left: 0;
        position: absolute;
        background: 
        url(../1_img/base/footer_building.svg) repeat-x bottom center / auto 100px,
        url(../1_img/base/footer_cloud.svg) repeat-x top center / auto 100%;
    }

    /*================================   お問い合わせ   ================================*/
    & .footer-contact{
        text-align: center;

        & .contact-en{
            font-size: 1.3rem;
            color: var(--color-sub);
        }
        & h3{
            margin-top: 10px;
            font-size: 1.8rem;
            font-weight: var(--weight-black);
        }
        & .contact-links{
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;

            & .fukidashi-wrap{
                margin-bottom: 10px;
            }
        }
    }

    /*================================    footer-content   ================================*/
    & .footer-content {
        margin-top: 70px;
        padding-top: 50px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        border-top: 1px solid #fff;

        &::before,&::after{
            content: "";
            width: 12px;
            height: 10px;
            position: absolute;
            top: -5px;
            background-color: #5d5959;
            background-image: url(../1_img/base/deco-star_white.svg);
            background-size: 7px auto;
            background-repeat: no-repeat;
        }
        &::before{
            left: 0;
            background-position: left center;
        }
        &::after{
            right: 0;
            background-position: right center;
        }
        

        /* h2 */
        & h2 {
            margin-bottom: 20px;
            text-align: center;

            & img {width: 300px;}
        }

        & .content_text{
            & address {font-size: 1.4rem;}
            & p{
                color: var(--color-sub);
                font-size: 1.6rem;
            }

            & .btn-wrap{
                margin-top: 45px;
                text-align: center;

                & .insta{
                    width: 250px;
                    background: linear-gradient(90deg, #ff860f 10%, #ff1e52 50%, #cf5cc6 90%);

                    & span{
                        padding-left: 30px;
                        display: inline-block;
                        position: relative;

                        &::after{
                            content: "";
                            position: absolute;
                            top: 50%;
                            left: 0;
                            width: 22px;
                            aspect-ratio: 1 / 1;
                            background: url(../1_img/base/icon-insta_white.svg) no-repeat center / 100% auto;
                            transform: translateY(-50%);
                        }
                    }
                }
            }
        }

    }
    /*================================    footer-content end   ================================*/

    /*================================   copyright   ================================*/
    & #copyright {
        margin-top: 30px;
        padding-top: 30px;
        text-align: center;
    }

}



/*==============================================================================

	footer PC

==============================================================================*/
@media all and (min-width: 769px) {

    footer {
        padding: 80px 0 30px;

        &::before {
            height: 342px;
            top: -342px;
            background-size: auto 218px,auto 100%;
        }

        /*================================   お問い合わせ   ================================*/
        & .footer-contact{
            margin: 0 auto;
            width: 800px;

            & .contact-links{
                margin-top: 50px;
                flex-direction: row;
                justify-content: center;

                & .fukidashi{
                    font-size: 1.4rem;
                }
            }
        }

        /*================================    footer-content   ================================*/
        & .footer-content {
            margin-top: 70px;
            padding-top: 60px;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0 140px;

            /* h2 */
            & h2 {
                margin-bottom: 20px;
                text-align: left;

                & img {width: 400px;}
            }

            & .content_text{
                & address {font-size: 1.6rem;}
                & p {font-size: 1.8rem;}
                & .btn-wrap{margin-top: 30px;}
            }
        }
        /*================================    footer-content end   ================================*/


        /*================================   copyright   ================================*/
        & #copyright {
            margin-top: 50px;
        }
    }

}


/*============================================================================================================================================================
==============================================================================================================================================================

	4.下層

==============================================================================================================================================================
============================================================================================================================================================*/

/*================================   下層 title   ================================*/
#title {
    padding: 30px 20px 70px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    background-size: cover;
    background-position: center;
    background: url(../1_img/base/title_sp.jpg) no-repeat center / cover;

    &::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 60px;
        left: 0;
        bottom: 0;
        background: url(../1_img/base/title-deco_sp_white.svg) repeat-x  bottom center/ auto 100%;
    }

    & .title-content{
        & > span {
            display: block;
            position: relative;
            z-index: 3;
            font-weight: var(--weight-bold);
            

            & em{
                margin-right: 10px;
                padding: 5px 5px 7px 9px;
                display: inline-block;
                text-align: center;
                background-color: var(--color-sub);
                color: var(--color-white);
                line-height: 1;
                letter-spacing: 0.15em;
                border-radius: 5px;
            }

            &[lang="ja"] {
                color: var(--color-sub);
                font-size: 3rem;
                letter-spacing: 0.2em;
                line-height: 1.5;
            }

            &[lang="en"] {
                margin-top: 10px;
                color: #fff;
                font-size: 1.2rem;
                line-height: 1;
            }
        }
    }
}

/*================================   下層 title-lv2   ================================*/
.title-lv2 {
    margin-bottom: 30px;
    position: relative;
    text-align: center;
    font-weight: var(--weight-bold);

    & span{display: block;}

    & [lang="ja"]{
        color: var(--color-main);
        font-size: 2rem;
        font-weight: var(--weight-bold);
        z-index: 2;
    }

    & [lang="en"]{
        width: 100%;
        position: absolute;
        top: -0.75em;
        left: 0;
        color: var(--color-font);
        font-family: var(--color-en);
        opacity: 0.1;
        font-size: 2.5rem;
        z-index: 1;
    }
}

/*================================   下層 title-lv3   ================================*/
.title-lv3 {
    margin-bottom: 30px;
    padding: 20px;
    font-size: 1.6rem;
    font-weight: var(--weight-bold);
    color: var(--color-main);
    border-top: 2px solid var(--color-main);
    border-bottom: 2px solid var(--color-main);
}

/*================================   下層 title-lv4   ================================*/
.title-lv4 {
    margin-bottom: 30px;
    padding: 15px 20px;
    position: relative;
    font-size: 1.6rem;
    font-weight: var(--weight-bold);
    
    &::after {
        content: "";
        width: 100%;
        height: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-color: var(--color-main);/* 色はここで管理 */
        /* SVGは「形」として使う */
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='4'><circle cx='2' cy='2' r='2' fill='black'/></svg>") repeat-x center;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='4'><circle cx='2' cy='2' r='2' fill='black'/></svg>") repeat-x center;
    }
}

/*================================   下層 title-lv5   ================================*/
.title-lv5 {
    margin-bottom: 30px;
    padding: 15px 20px;
    font-size: 1.4rem;
    font-weight: var(--weight-bold);
    border-bottom: 1px solid var(--color-main);
}

/*================================   下層 content   ================================*/
.underlayer .content {
    padding: 50px 0 200px;

    & >section+section {
        margin-top: 50px;
    }
}

/*==============================================================================

	下層 PC

==============================================================================*/
@media all and (min-width: 769px) {

    /*================================   title   ================================*/
    #title {
        padding: 150px 0 200px;
        background-image: url(../1_img/base/title_pc.jpg);

        &::before{
            height: 140px;
            background-image: url(../1_img/base/title-deco_pc_white.svg);
        }

        & .title-content{
            & > span {
                &[lang="ja"] {font-size: 4.3rem;}
                &[lang="en"] {font-size: 1.8rem;}
            }
        }
    }

    /*================================   下層 title-lv2   ================================*/
    .title-lv2 {
        margin-bottom: 50px;

        & [lang="ja"]{
            font-size: 2.5rem;
        }

        & [lang="en"]{
            font-size: 3rem;
        }
    }

    /*================================   下層 content   ================================*/
    .underlayer .content {
        padding: 100px 0 400px;

        & >section+section {
            margin-top: 100px;
        }
    }
}

/*============================================================================================================================================================
==============================================================================================================================================================

	5.パンクズ

==============================================================================================================================================================
============================================================================================================================================================*/
#pankuzu {
    margin-top: 50px;

    & ul {
        margin: auto;
        width: var(--min-width-s);
        display: flex;
        list-style: none;
        font-size: 1rem;
        flex-wrap: wrap;
        position: relative;
        z-index: 2;
        gap: 5px 0px;

        & li {
            margin: 0;
            font-weight: var(--weight-black);

            &:not(:first-child) {
                margin-left: 9px;
                padding-left: 18px;
                position: relative;

                &::before {
                    content: ">";
                    position: absolute;
                    font-size: 1.3rem;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0px;
                    line-height: 0;
                }
            }

            &:last-child {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 15em;
            }
        }
    }
}
@media all and (min-width: 769px) {
    #pankuzu {
        margin-top: 100px;
        
        & ul {
            & li {
                &:not(:first-child) {
                    margin-left: 13px;
                    padding-left: 22px;
                }
            }
        }
    }
}


/*============================================================================================================================================================
==============================================================================================================================================================

	6.404ページ

==============================================================================================================================================================
============================================================================================================================================================*/
#nopage {
    padding: 100px 20px;
    font-size: 1.8rem;
    text-align: center;
}

#nopage .to-top {
    margin-top: 30px;
}

/*==============================================================================

	404ページ PC

==============================================================================*/
@media all and (min-width: 769px) {
    #nopage {
        margin: 0 auto;
        padding: 200px 0px;
        width: 980px;
        font-size: 1.8rem;
    }

    #nopage .to-top {
        margin-top: 50px;
    }
}

/*==============================================================================
	モーダルウィンドウ
==============================================================================*/
.remodal {
    background-color: #21445b;
    border-radius: 20px;
    color: #fff;
}

.remodal-close {
    width: 30px;
    height: 30px;
    background: url(../1_img/base/close.svg);
    top: 20px;
    left: unset;
    right: 20px;
}

.remodal-close::before {
    content: none;
}

#nopage .btn_wrap {
    margin-top: 50px;
}