/* ----------------------------------------------------------------------
	
	指定席ネット予約 共通
	
---------------------------------------------------------------------- */
#seat_reserve { max-width: 940px; margin: 0 auto; }

/* ----- 指定席ネット予約ナビゲーション ----- */
#seat_reserve_nav div.nav.pills.flap > div > a { font-weight: bold; }

.nav2nd #seat_reserve_nav { margin-top: 20px; }

/* ----- レイアウト ----- */
.reserve_main { margin-top: 30px; }
.reserve_main > .unit + .unit { margin-top: 50px; }

/* --- 強調（アンダーライン） --- */
strong.underline { text-decoration: underline; }


/* - 指定席・入場券ネット予約 ナビ
---------------------------------------------------------------------- */
#seat_reserve_nav div.nav.pills.flap {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

#seat_reserve_nav div.nav.pills.flap.div4 > div { width: auto; }

#reserve_nav_top { grid-area: 1 / 1 / 2 / 2; }
#reserve_nav_member_jra { grid-area: 1 / 2 / 2 / 3; }
#reserve_nav_member_basic { grid-area: 1 / 3 / 2 / 4; }
#reserve_nav_guide { grid-area: 2 / 1 / 3 / 2; }
#reserve_nav_schedule { grid-area: 2 / 2 / 3 / 3; }
#reserve_nav_seat { grid-area: 2 / 3 / 3 / 4; }
#reserve_nav_faq { grid-area: 2 / 4 / 3 / 5; }



/* - 新規会員登録・会員ログインボタン
---------------------------------------------------------------------- */
.welcome_line {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome_line .btn_member_login { flex-grow: 1; }

.welcome_line .btn_member_login > a,
.welcome_line .btn_member_entry > a {
    padding: 18px;
    font-size: 2rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: 5px;
    box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
    border: 3px solid #fff;
    background: linear-gradient(170deg, #268300, #1d4f0d);
    transition: all 0.3s ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 104px;
    text-decoration: none;
    color: #fff;
}

.no-touch .welcome_line .btn_member_login > a:hover,
.no-touch .welcome_line .btn_member_entry > a:hover {
    background: linear-gradient(-15deg, #268300, #1d4f0d);
    border: 3px solid #fff;
}

.welcome_line .btn_member_login > a > div > span.copy {
    display: block;
    font-size: 1.6rem;
    margin-top: 1px;
}

.welcome_line .btn_member_login > a > div > span.login {
    margin-top: 5px;
    display: inline-block;
    background-color: #f9f5df;
    color: #444;
    border-radius: 1em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    border: 1px solid #1d4f0d;
    background-color: rgba(255,255,255,0.8);
    font-size: 1.7rem;
    padding: 4px 15px;
}

.welcome_line .btn_member_login > a > div > span.login i { margin-right: 0.5em; }

.welcome_line .btn_member_entry > a {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    padding: 18px 30px;
}

.welcome_line .btn_member_entry > a .cap { font-size: 1.3rem; }

.welcome_line .btn_member_entry > a .inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome_line .btn_member_entry > a .inner > .cell img {
    max-width: 30px;
    vertical-align: top;
}


/* ------------------------------------------------------------
	アニメーション
------------------------------------------------------------ */
@keyframes obj_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

/* ------------------------------------------------------------

	959px以下

------------------------------------------------------------ */
@media screen and ( max-width : 959px ) {
    
    /* ----- 指定席ネット予約ナビゲーション ----- */
    div.nav.pills.flap.div4 > div { width: 33.33%; }
    
}

/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
    
    /* - 指定席・入場券ネット予約 ナビ
    ---------------------------------------------------------------------- */
    #seat_reserve_nav div.nav.pills.flap {
        grid-template-columns: repeat(auto-fit, 33.333%);
    }

    #reserve_nav_top { grid-area: auto; }
    #reserve_nav_member_jra { grid-area: auto; }
    #reserve_nav_member_basic { grid-area: auto; }
    #reserve_nav_guide { grid-area: auto; }
    #reserve_nav_schedule { grid-area: auto; }
    #reserve_nav_seat { grid-area: auto; }
    #reserve_nav_faq { grid-area: auto; }

}


/* ------------------------------------------------------------

	639px以下

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
	
    /* ----- 指定席ネット予約ナビゲーション ----- */
    div.nav.pills.flap.div4 > div { width: 50%; }
    
    /* --- レイアウト --- */
    .reserve_main > .unit + .unit { margin-top: 30px; }

    /* - 指定席・入場券ネット予約 ナビ
    ---------------------------------------------------------------------- */
    #seat_reserve_nav div.nav.pills.flap {
        grid-template-columns: repeat(auto-fit, 50%);
        /*grid-template-columns: repeat(2, 1fr);*/
        /*grid-template-rows: repeat(3, 1fr);*/
    }


    /* - 新規会員登録・会員ログインボタン
    ---------------------------------------------------------------------- */
    .welcome_line { display: block; }
    .welcome_line > div + div { margin-top: 10px; }
    
}


/* ------------------------------------------------------------

	479px以下

------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
    
    /* ----- 指定席ネット予約ナビゲーション ----- */
    #seat_reserve_nav div.nav.pills.flap.div4 > div { text-align: left; }
    /*#seat_reserve_nav div.nav.pills.flap.div4 > div:first-child { width: 100%; }*/
    #seat_reserve_nav div.nav.pills.flap.div4 > div > a { font-size: 1.2rem; }
    #seat_reserve_nav div.nav.pills.flap.div4 > div > a > span { display: none; }

    
}

/* ------------------------------------------------------------

	374px以下

------------------------------------------------------------ */
@media screen and ( max-width : 374px ) {
    
}

/* ------------------------------------------------------------

	359px以下

------------------------------------------------------------ */
@media screen and ( max-width : 359px ) {
    
    /* ----- 指定席ネット予約ナビゲーション ----- */
    #seat_reserve_nav div.nav.pills.flap.div4 > div { width: 100%; }

    /* - 指定席・入場券ネット予約 ナビ
    ---------------------------------------------------------------------- */
    #seat_reserve_nav div.nav.pills.flap {
        grid-template-columns: repeat(auto-fit, 100%);
        /*grid-template-columns: repeat(1, 1fr);*/
        /*grid-template-rows: repeat(3, 1fr);*/
    }
    
}