@charset "UTF-8";

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

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

	1.共通事項

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

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 (min-width: 769px) {
    body {
        min-width: var(--max-width);
    }
}

/*============ カラー ============*/
.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);}

/*============ リンク ============*/
a {
    color: var(--color-main);
    transition: 500ms;

    &:hover {
        opacity: 0.6;
        color: var(--color-main);
    }

    &[href^="tel:"] {
    }
}
@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: #fff;
}

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

/*============ list-disc ============*/
ul.list-disc {
    display: flex;
    flex-direction: column;
    gap: 10px;

    & li {
        position: relative;
        padding-left: 1em;

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



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

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

    /* ========== ボタン 左向き ========== */
    &.left {
        &::after {
            left: 20px;
            right: unset;
            clip-path: polygon(100% 0, 0 50%, 100% 100%);
        }
    }

    &:hover {
        opacity: 0.6;
        color: #fff;
    }

    /* ========== ボタン 白 ========== */
    &.white {
        background-color: #fff;
        color: var(--color-main);

        &::after {
            background-color: var(--color-main);
        }
    }

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

    /* ========== ボタン 別窓 ========== */
    &.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 {
    text-align: center;

    & span {
        padding: 0 25px;
        display: inline-block;
        position: relative;

        &::before,
        &::after {
            content: "";
            position: absolute;
            bottom: 15px;
            width: 22px;
            height: 2px;
            background:
                radial-gradient(circle at 1px 1px,
                    var(--color-main) 0 1px,
                    transparent 1px);
            background-size: 4px 2px;
            background-repeat: repeat-x;
        }

        &::before {
            left: -6px;
            transform: rotate(65deg);
        }

        &::after {
            right: -6px;
            transform: rotate(115deg);
        }
    }
}

/*================================    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;
}
@media all and (min-width: 769px) {
    .inner {
        width: calc(var(--min-width) + 40px);
    }
}

/*==============================================================================
	swiper
==============================================================================*/
.swiper-wrap{
    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: 0;
        transform: translateX(10px);

        &::after{
            transform: translateX(calc(-50% - 3px)) translateY(-50%) rotate(-45deg) scale(-1,-1);
        }
    }
    & .swiper-button-prev{
        left: 0;
        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;
        }

    }
}



/*==============================================================================
	カルーセル
==============================================================================*/
.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 150s infinite linear 0s both;}
        &.reverse .carousel{animation: loop-slide_rev 150s 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で止めたいとき
.slide-paused:hover .carousel {
animation-play-state: paused!important;
}
*/


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

	2.header

==============================================================================================================================================================
============================================================================================================================================================*/
@media (min-width: 769px) {
    header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        transition: 500ms;
        z-index: 9999;
        transform: translateY(-50%);
        opacity: 0;
        pointer-events: none;
        transition: 500ms;
        background-color: rgb(255 255 255 / 0.7);

        & .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;
        }

        &.on{
            transform: translateY(0%);
            opacity: 1;
            pointer-events: all;
        }
    }

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

        & .logo {
            aspect-ratio: 520 / 65;
            width: 300px;
            transition: 500ms;

            & img{
                width: 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;

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

                &>a {
                    color: var(--color-font);
                }
            }

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

                & span {
                    padding-top: 35px;
                    display: block;
                    text-align: center;
                    transition: 500ms;
                    background-repeat: no-repeat;
                    background-position: top center;
                    background-size: 30px auto;

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

            &.menu-events a span {
                background-image: url(../1_img/base/menu-events.svg);
            }

            &.menu-features a span {
                background-image: url(../1_img/base/menu-features.svg);
            }

            &.menu-lesson a span {
                background-image: url(../1_img/base/menu-lesson.svg);
            }

            &.menu-contact a span {
                background-image: url(../1_img/base/menu-contact.svg);
            }

            /* === 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;
    }
}

@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) {

    /* ========== ロゴの周り logo-wrap ========== */
    header .logo-wrap {
        padding: 5px 10px;
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        transition: 500ms;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(255 255 255 / 0.7);
        box-shadow: 0 4px 4px rgba(135, 135, 135, 0.1);
        z-index: 999;

        & .logo {
            aspect-ratio: 255 / 48;
            width: 150px;
            transition: 500ms;

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

            & img{
                width: 100%;
            }
        }
    }
    header.on .logo-wrap{
        opacity: 1;
        pointer-events: all;
        transform: translateY(0%);
    }


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

        &::before {
            content: "";
            width: 85px;
            height: 21px;
            position: absolute;
            left: 50%;
            top: -21px;
            background: url(../1_img/base/deco-menu.svg);
            transform: translateX(-50%);
            filter: drop-shadow(0px -3px 2px rgba(135, 135, 135, 0.1));
        }
    }

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

        /* crttentなしの設定 */
        &>li {
            width: 20%;

            &>a {
                padding-top: 30px;
                padding-bottom: 5px;
                display: block;
                position: relative;
                font-size: 1rem;
                letter-spacing: 0.15em;
                text-align: center;
                background-size: 20px auto;
                background-position: top 9px center;
                background-repeat: no-repeat;
                color: var(--color-font);

                & span {
                    display: block;
                }
            }

            &.menu-events a {
                background-image: url(../1_img/base/menu-events.svg);
            }

            &.menu-features a {
                background-image: url(../1_img/base/menu-features.svg);
            }

            &.menu-lesson a {
                background-image: url(../1_img/base/menu-lesson.svg);
            }

            &.menu-contact a {
                background-image: url(../1_img/base/menu-contact.svg);
            }
        }


        /* homeのアイコン */
        &>li.nav-menu-base-home>a::before {
            content: "";
            position: absolute;
            width: 27px;
            height: 28px;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            background-image: url(../1_img/base/menu-home.svg);
            background-size: 100% auto;
        }
    }
}

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

	3.footer

==============================================================================================================================================================
============================================================================================================================================================*/
footer {
    margin-top: 75px;
    padding: 50px 0 calc(40px + 53px);
    position: relative;
    background-color: #c8d9de;

	&::before{
		content: "";
		width: 100%;
		height: 20px;
		position: absolute;
		top: -20px;
		left: 0;
		background-image: url(../1_img/base/wave-blue.svg);
        background-repeat: repeat-x;
        background-position: center bottom;
        background-size: auto 20px;
	}

    & .footer-maps{
        display: flex;
        flex-direction: column;
        gap: 50px;

        & .fukidashi{
            margin-bottom: 10px;
            font-weight: var(--weight-bold);
            color: #506e85;

            & span {
                &::before, &::after {
                    background: radial-gradient(circle at 1px 1px, #506e85 0 1px, transparent 1px);
                    background-size: 6px 2px;
                    background-repeat: repeat-x;
                }
            }
        }

        & iframe{
            width: 100%;
            height: auto;
            aspect-ratio: 2 / 1;
        }

        & h3{
            margin-top: 10px;
            font-size: 1.6rem;
            font-weight: var(--weight-bold);
            color: #506e85;
        }

        & address{
            margin-top: 5px;
            font-size: 1.2rem;
            font-family: var(--font-sub);
        }

        & ul{
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-size: 1.2rem;
            font-family: var(--font-sub);

            & li{
                display: flex;
                gap: 5px;
            }
        }

        & .maps-note{
            margin-top: 10px;
            font-size: 1.2rem;
            font-family: var(--font-sub);
            color: #595757;
        }
    }

    /* お問い合わせ */
    & .footer-contact{
        margin-top: 55px;
        padding: 0 20px 30px;
        background-color: #fff;
        text-align: center;
        font-family: var(--font-sub);

        & h3{
            transform: translateY(-50%);

            & span{
                padding: 0 15px 2px;
                display: inline-block;
                background-color: #506e85;
                border-radius: 30px;
                font-size: 1.8rem;
                font-weight: var(--weight-bold);
                font-family: var(--font-base);
                color: #fff;
            }
        }

        & .contact-tel{
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--color-font);

            & p:first-child{
                font-size: 2.5rem;
                font-weight: var(--weight-bold);
                font-family: var(--font-base);
                color: #506e85;

                & a{
                    color: #506e85;
                }
            }
            & p:last-child{
                font-size: 1.3rem;
            }
        }

        & .contact-line,& .contact-insta{
            & p{
                font-weight: var(--weight-bold);
            }
            & .button{
                margin-top: 15px;
                border-radius: 0;

                &::after{
                    content: none;
                }

                & span{
                    padding-right: 27px;
                    display: inline-block;
                    position: relative;

                    &::before{
                        content: "";
                        width: 22px;
                        aspect-ratio: 1 / 1;
                        position: absolute;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                    }
                }
            }
        }
        & .contact-line{
            & .button{
                background-color: #06c755;

                & span::before{
                    background: url(../1_img/base/btn-line.svg) no-repeat center / 100% auto;
                }
            }
        }
        & .contact-insta{
            margin-top: 25px;

            & .button{
                background-color: var(--color-main);

                & span::before{
                    background: url(../1_img/base/btn.svg) no-repeat center / 100% auto;
                }
            }
        }
    }
    /* お問い合わせ end */

    & .footer-logo{
        margin-top: 30px;
        text-align: center;
    }

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

}



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

	footer PC

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

    footer {
        margin-top: 110px;
        padding-top: 90px;
        padding-bottom: 50px;

		&::before{
			height: 50px;
			top: -50px;
			background-size: auto 50px;
		}

        & .footer-maps{
            gap: 60px;

            & > div{
                display: flex;
                flex-wrap: wrap;
                align-items: center;
            }

            & .maps-text{
                width: calc(100% - 500px);
                padding-left: 40px;
            }

            & .fukidashi{
                margin-bottom: 35px;
                width: 100%;

                & span {
                    font-size: 2rem;

                    &::before, &::after {
                        background: radial-gradient(circle at 1px 1px, #506e85 0 1px, transparent 1px);
                        background-size: 6px 2px;
                        background-repeat: repeat-x;
                    }
                }
            }

            & iframe{
                width: 500px;
                aspect-ratio: 50 / 32;
            }

            & h3{font-size: 2.4rem;}

            & address{
                margin-top: 5px;
                font-size: 1.8rem;
            }

            & ul{
                margin-top: 30px;
                gap: 3px;
                font-size: 1.8rem;
            }

            & .maps-note{
                margin-top: 15px;
                font-size: 1.4rem;
            }
        }

        /* お問い合わせ */
        & .footer-contact{
            margin-top: 130px;
            padding: 0 100px 50px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            & h3{
                width: 100%;

                & span{
                    padding: 10px 50px;
                    border-radius: 50px;
                    font-size: 2.8rem;
                }
            }

            & .contact-tel{
                margin-bottom: 30px;
                padding-bottom: 30px;
                width: 100%;

                & p:first-child{
                    font-size: 3.8rem;
                }
                & p:last-child{
                    font-size: 1.8rem;
                }
            }

            & .contact-line,& .contact-insta{
                width: calc( (100% - 30px) / 2 );

                & .button{
                    padding: 20px 0 19px;
                    width: 100%;
                }
            }
            & .contact-insta{
                margin-top: 0;
            }
        }
        /* お問い合わせ end */



        & .footer-logo{
            margin-top: 80px;

            & img{
                width: 270px;
            }
        }

        /*================================   copyright   ================================*/
        & #copyright {
            margin-top: 190px;
            font-size: 2.5rem;
        }
    }

}


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

	4.下層

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

/*================================   下層 title   ================================*/
#title {
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    background-color: #fff;
    background-size: cover;
    background-position: center;

    & span {
        display: block;
        color: var(--color-main);
        font-weight: var(--weight-bold);

        &[lang="ja"] {
            margin-top: 0px;
            font-size: 1.2rem;
        }

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

/*================================   title-lv2   ================================*/
.title-lv2 {
    margin-bottom: 30px;
    text-align: center;
    font-weight: var(--weight-bold);
    letter-spacing: 0.2em;

    & span{
        display: block;
    }

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

    & [lang="en"]{
        color: var(--color-main);
        font-family: var(--color-base);
        font-size: 1.4rem;
    }
}

/*================================   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;

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

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

	下層 PC

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

    /*================================   title   ================================*/
    #title {
        padding: 150px 0 80px;

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

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

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

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

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

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

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

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

	5.パンクズ

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

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

        & li {
            margin: 0;
            font-weight: 400;

            &:not(:first-child) {
                margin-left: 13px;
                padding-left: 22px;
                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;
            }
        }
    }
}


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

	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;
}