@charset "UTF-8";
:root{
    /* 各コースのメインカラー */
    --color50: #910120;
    --color40: #3c64b4;
    --color30: #326983;
    --color20: #4b3c5a;
    --color10: #d47e4b;
    --color08: #6e3a21;
    --color06: #8e7c3b;
    --color04: #788000;
    --color02: #c46e64;
    --color01: #852674;
    /* 各コースのグラデ */
    --gradientTop: #dbcd9d 0%, #ece6cf 100%;
    --gradient50: var(--color50) 0%, #bb4a4f 100%;
    --gradient40: #00284b 0%, var(--color40) 100%;
    --gradient30: var(--color30) 0%, #64abc4 100%;
    --gradient20: var(--color20) 0%, #8c8296 100%;
    --gradient10: #b03400 0%, var(--color10) 100%;
    --gradient08: #5a321e 0%, #974b28 100%;
    --gradient06: #7f5a25 0%, var(--color06) 100%;
    --gradient04: #75801d 0%, #809531 100%;
    --gradient02: #923c46 0%, var(--color02) 100%;
    --gradient01: #73156d 0%, var(--color01) 100%;
}
/* TOPコンテンツ */
.home .sec_recom:not(.top) .title_cont{
    display: flex;
    column-gap: 50px;
}
.home .sec_recom:not(.top) .title_item{
    padding: 0;
    /* width: fit-content; */
}
.home .sec_recom:not(.top) .title_item h2{
    padding: 40px 0 0;
    /* max-width: 225px; */
    width: 100%;
}
.home .sec_recom:not(.top) .title_item h2 p{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 45px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
.home .sec_recom:not(.top) .title_item h2 p .sideways{
    font-size: inherit;
    font-weight: inherit;
    display: inline;
    writing-mode: horizontal-tb;
    text-orientation: sideways-right;
    line-height: 1;
    margin: 0 0 -0.2em;
    letter-spacing: -0.04em;
}
.home .sec_recom:not(.top) .title_item h2 p .offset_top{
    display: inline-block;
    margin: -0.45em 0 0;
    font-size: inherit;
}
.home .sec_recom:not(.top) .title_item h2 p .thin_sp{margin: 0 0 0.3em;display: inline;}
/* 画像2枚セクション */
.home .sec_recom.has_2img .recom_cont .recom_img{inset: auto;}
.home .sec_recom.has_2img .title_img > figure.sub_img{
    z-index: 2;
    width: 30vw;
    /* max-width: 525px; */
    max-width: 400px;
    height: auto;
    aspect-ratio: 1 / 1;
}
.home .sec_recom.has_2img .recom_cont{
    align-items: flex-end;
    margin: 25% auto 60px;
}
.home .sec_recom.has_2img .recom_cont .recom_cap{margin-bottom: 2em;}
.home .sec_recom:nth-of-type(2n).has_2img .recom_cont{flex-direction: row;}
.home .sec_recom:nth-of-type(2n).has_2img .title_img > figure.sub_img{inset: auto -48vw 18% auto;}

.home .sec_recom:nth-of-type(2n-1).has_2img .recom_cont{flex-direction: row-reverse;}
.home .sec_recom:nth-of-type(2n-1).has_2img .title_img > figure.sub_img{inset: auto auto -30% max(-25vw, -300px);}

/* フッター */
footer .footer_nav{
    width: 635px;
    background: transparent;
}
footer .footer_nav > li.list_top{border-bottom: 1px solid transparent;}
footer .footer_nav ul > li{border: 1px solid transparent;}
footer .footer_nav > li.list_top a{background: linear-gradient(to right, var(--gradientTop));}
footer .footer_nav ul > li.list50 a{background: linear-gradient(to right, var(--gradient50));}
footer .footer_nav ul > li.list40 a{background: linear-gradient(to right, var(--gradient40));}
footer .footer_nav ul > li.list30 a{background: linear-gradient(to right, var(--gradient30));}
footer .footer_nav ul > li.list20 a{background: linear-gradient(to right, var(--gradient20));}
footer .footer_nav ul > li.list10 a{background: linear-gradient(to right, var(--gradient10));}
footer .footer_nav ul > li.list8 a{background: linear-gradient(to right, var(--gradient08));}
footer .footer_nav ul > li.list6 a{background: linear-gradient(to right, var(--gradient06));}
footer .footer_nav ul > li.list4 a{background: linear-gradient(to right, var(--gradient04));}
footer .footer_nav ul > li.list2 a{background: linear-gradient(to right, var(--gradient02));}
footer .footer_nav ul > li.list1 a{background: linear-gradient(to right, var(--gradient01));}
footer .footer_nav ul {
    display: flex;
    flex-wrap: wrap;
}
footer .footer_nav li a{
    position: relative;
    z-index: 0;
    min-height: 80px;
}
footer .footer_nav li a::before{
    position: absolute;
    z-index: 0;
    inset: -100% 16px -100% auto;
    margin: auto;
    content: '▶';
    width: fit-content;
    height: fit-content;
    display: block;
    color: #fff;
}
footer .footer_nav li.list_top a::before{color: #8f001a;}
footer .footer_nav > li.list_top a{text-align: center;}
footer .footer_nav li.list_top a p{
    border: none;
    margin: 0 auto;
}
footer .footer_nav li.list_top a p span:nth-of-type(1){
    font-weight: 100;
    font-size: 30px;
    margin-right: 0.1em;
}
footer .footer_nav li.list_top a p span:nth-of-type(2){
    font-size: 20px;
    font-weight: 800;
    vertical-align: text-bottom;
}
footer .footer_nav ul > li{width: 50%;}
footer .footer_nav ul > li a{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 14px;
    padding: 11px 40px 0 30px;
}
footer .footer_nav li a .title{
    font-size: 30px;
    margin-right: 0;
    min-width: 150px;
}
footer .footer_nav li a .title span{
    font-size: 15px;
    margin-right: .2em;
}
footer .footer_nav li a .title span:nth-of-type(2){
    font-size: 18px;
    display: inline-block !important;
    margin-right: 0;
}
footer .footer_nav li a .title + span{font-size: 15px;}
footer .logo_cont{border: none;}

@media screen and (min-width: 1201px){
    /* ヘッダー */
    header{
        height: 120px;
        border-top: none;
    }
    header .header_box .logo{width: 100px;}
    /* ナビ */
    nav{width: 910px;}
    nav .nav_cont > ul > li.list_top,
    nav .nav_cont > ul ul > li{border: 1px solid #fff;}
    nav .nav_cont > ul > li:not(.list_top){width: 760px;}
    nav .nav_cont > ul > li.list_top{
        width: calc(100% - 760px);
        /* border-bottom: none; */
    }
    /* nav .nav_cont > ul ul > li:nth-of-type(n+5){border-bottom: none;} */
    nav .nav_cont > ul ul{
        display: flex;
        flex-wrap: wrap;
        width: 760px;
    }
    nav .nav_cont > ul ul > li{width: 150px;}
    nav .nav_cont > ul > li.list_top a{background: linear-gradient(to top, var(--gradientTop));}
    nav .nav_cont > ul ul > li.list50 a{background: linear-gradient(to top, var(--gradient50));}
    nav .nav_cont > ul ul > li.list40 a{background: linear-gradient(to top, var(--gradient40));}
    nav .nav_cont > ul ul > li.list30 a{background: linear-gradient(to top, var(--gradient30));}
    nav .nav_cont > ul ul > li.list20 a{background: linear-gradient(to top, var(--gradient20));}
    nav .nav_cont > ul ul > li.list10 a{background: linear-gradient(to top, var(--gradient10));}
    nav .nav_cont > ul ul > li.list8 a{background: linear-gradient(to top, var(--gradient08));}
    nav .nav_cont > ul ul > li.list6 a{background: linear-gradient(to top, var(--gradient06));}
    nav .nav_cont > ul ul > li.list4 a{background: linear-gradient(to top, var(--gradient04));}
    nav .nav_cont > ul ul > li.list2 a{background: linear-gradient(to top, var(--gradient02));}
    nav .nav_cont > ul ul > li.list1 a{background: linear-gradient(to top, var(--gradient01));}
    nav .nav_cont > ul > li a .title{display: inline-block;}
    nav .nav_cont > ul > li.list_top a p span{
        font-weight: 200;
        margin: 0 auto .15em;
    }
    nav .nav_cont > ul > li.list_top a p span:nth-of-type(2){font-weight: 800;}
    /* KV */
    .home .kv_cont .kv_scroll::before,
    .home .kv_cont .kv_scroll::after,
    .home .kv_cont .kv_scroll p{
        filter: 
        drop-shadow(0 0 1px rgba(0, 0, 0, 1))
        drop-shadow(0 0 5px rgba(0, 0, 0, 1))
        drop-shadow(0 0 3px rgba(0, 0, 0, 1))
        ;
    }
}
@media screen and (min-width:768px) {
    footer .f_pagettl{display: none !important;}
    /* =========== /min-width:768px =========== */
}

.home .kv_cont .h1_cont{
    height: fit-content;
}
.home .kv_cont .h1_cont h1{
    position: relative;
    inset: auto auto auto 0;
    transform: translate(0);
}

/* タブレット調整 */
@media screen and (min-width: 900px) and (max-width:1100px) {
    /* .home .kv_cont{display: flex !important;} */
    .home .kv_cont .h1_cont h1::before,
    .home .kv_cont .h1_cont h1::after{
        height: 5px;
        top: -104.5%;
    }
    .home .kv_cont .h1_cont h1::before{left: 215px;}
    .home .kv_cont .h1_cont h1::after{right: 215px;}
    .home .kv_cont > img.kv_bg{width: 81%;right: -8vw;}
    .home .kv_cont .kv_scroll::before,
    .home .kv_cont .kv_scroll::after,
    .home .kv_cont .kv_scroll p{
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1))
        drop-shadow(0 0 5px rgba(0, 0, 0, 1))
        drop-shadow(0 0 3px rgba(0, 0, 0, 1));
    }
    .home .sec_recom.has_2img .title_img > figure.sub_img{bottom: -20% !important;}
}
@media screen and (min-width:768px) and (max-width:1100px) {
    .home .recom_button a{justify-content: center;}
    .home .recom_button a .button_item .course{max-width: 9.5em;}
    .home .sec_recom .recom_button a .button_item .ticket span{
        /* display: block; */
        line-height: 1.2;
    }
    /* =========== /max-width:1100px =========== */
}
.home .sec_recom .title_item h2 p,
.home .recom_button a .button_item .course{word-break: auto-phrase;}
@media screen and (min-width:901px) and (max-width:1200px) {
    /* sub */
    .skv_cont > img{
        width: 104%;
        right: -10vw;
    }
    .skv_cont .kv_box .logo_cont,
    .skv_cont .kv_box .h1_cont{left: 8%;}
    .skv_cont .kv_box .logo_cont::before,
    .skv_cont .kv_box .logo_cont::after{top: 49.5%;}
}

@media screen and (max-width:1200px) {
    /* ヘッダー */
    header{
        border-bottom: none;
        height: 80px;
    }
    header .logo{width: 66px;}
    header .caption{top: 24px;}
    header .menu{top: 25px;
    }
    /* ナビ */
    nav .nav_cont > ul > li.list_top{border-bottom: 1px solid #fff;}
    nav .nav_cont > ul > li.list_top a{background: linear-gradient(to right, var(--gradientTop));}
    nav .nav_cont > ul ul{
        display: flex;
        flex-wrap: wrap;
    }
    nav .nav_cont > ul ul > li{
        width: 50%;
        border: 1px solid #fff;
    }
    nav .nav_cont > ul ul > li.list50 a{background: linear-gradient(to right, var(--gradient50));}
    nav .nav_cont > ul ul > li.list40 a{background: linear-gradient(to right, var(--gradient40));}
    nav .nav_cont > ul ul > li.list30 a{background: linear-gradient(to right, var(--gradient30));}
    nav .nav_cont > ul ul > li.list20 a{background: linear-gradient(to right, var(--gradient20));}
    nav .nav_cont > ul ul > li.list10 a{background: linear-gradient(to right, var(--gradient10));}
    nav .nav_cont > ul ul > li.list8 a{background: linear-gradient(to right, var(--gradient08));}
    nav .nav_cont > ul ul > li.list6 a{background: linear-gradient(to right, var(--gradient06));}
    nav .nav_cont > ul ul > li.list4 a{background: linear-gradient(to right, var(--gradient04));}
    nav .nav_cont > ul ul > li.list2 a{background: linear-gradient(to right, var(--gradient02));}
    nav .nav_cont > ul ul > li.list1 a{background: linear-gradient(to right, var(--gradient01));}
    /* KV */
    .home .kv_cont{
        min-height: calc(100vh - 80px);
        height: fit-content;
        margin: 80px 0 0;
        padding: 0 0 18px;
    }
    footer .footer_nav li a::before{display: none;}
    .f_pagettl{
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-height: 215px;
        text-align: center;
        background: url(../img/common/footer_bg_sp.svg) no-repeat center / cover;
    }
    .f_pagettl p span:nth-of-type(1){
        display: block;
        font-size: 12px;
        font-weight: 800;
        color: #fff;
        background: var(--color50);
        width: 80%;
        min-width: 115px;
        margin: 0 auto;
    }
    .f_pagettl p span:nth-of-type(2){
        display: block;
        font-size: 23px;
        font-weight: 600;
        color: var(--color50);
        line-height: 1.1;
        margin: 0.3em auto 0;
    }
}