@charset "utf-8";

body{
    color:#333;
    font-family: Arial, sans-serif;
    letter-spacing: 0.03rem;
    overflow-wrap: anywhere;
    position: relative;
}

body:not(#top-page){
    padding-top:119px;
}

a{
    position: relative;
    transition: all 0.2s ease;
}

h1,h2,h3,p,dl,dt,dd,ul,ol,li{margin:0;padding:0;}
ul,ol{margin:0;padding:0;list-style-type: none;}
h2,h3,h4{font-weight:bold;}

.modal-open .fixed-top {
    margin-right: var(--scrollbar-width, 0);
}

.page-top{
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:50;
}
.page-top a{
	display: flex;
	justify-content: center;
	align-items: center;
	width:50px;
	height:50px;
	font-size:20px;
	color:#fff;
	background:#234e71;
	border:1px solid  rgba(255,255,255,0.6);
	border-radius:7px;
	box-shadow:0 4px 8px rgba(0,0,0,0.1);
	text-decoration:none;
}

.pc{display:block;}
.tab{display:none;}
.pc.tab{display:block;}
.sp.tab{display:none;}
.sp{display:none;}
@media(min-width:768px) and (max-width:1025px){
    .pc{display:none;}
    .tab{display:block;}
    .pc.tab{display:block;}
    .sp.tab{display:block;}
    .sp{display:none;}
}
@media(max-width:767px){
	.pc{display:none;}
	.sp{display:block;}
    .pc.tab{display:none;}
    .sp.tab{display:block;}
    body:not(#top-page) {
        padding-top: 120px;
    }
    .page-top{
        right:15px;
        bottom:15px;
    }
    .page-top a{
        width:40px;
        height:40px;
    }
}

@media(min-width:1700px){
    body{
        font-size:28px;
    }
    body:not(#top-page){
        padding-top:125px;
    }
    
    .form-control{
        font-size:28px;
        padding:15px 10px;
        height:auto;
    }
}

@media(max-width:1699px){
    body:not(#top-page){
        padding-top:89px;
    }
}

@media(max-width:411px){
    body{
        letter-spacing: 0.01rem;
    }
}


.modal-open {
    padding-right: 0px !important;
    overflow: auto;
}
.modal {
    padding-right: 0px !important;
}
.navbar {
    padding-right: 0 !important;
}

/*
container
*********************************************/
.container{
    position: relative;
}

.container-1200{
    position: relative;
    max-width:1200px;
    width:100%;
    margin:0 auto;
    padding:0 15px;
}

.modal-history-container{
    position: relative;
    max-width:600px;
    width:100%;
    margin:0 auto;
    padding:0 15px;
}

.mypage-container{
    position: relative;
    max-width:650px;
    width:100%;
    margin:0 auto;
    padding:0 15px;
}
@media(min-width:1700px){
    .container{
        max-width:1680px;
        width:100%;
    }
}
@media(min-width:1026px) and (max-width:1699px){
    .container{
        max-width:1200px;
        width:100%;
    }
    #nav-menu .container{
        max-width:1160px;
        width:100%;
    }
    .container-1200{
        max-width:1160px;
    }
}

@media(min-width:992px) and (max-width:1199px){
    .container-1200{
        max-width:960px;
    }
}

@media(min-width:576px) and (max-width:767px){
    .container-1200{
        max-width:540px;
    }
}

@media(min-width:768px) and (max-width:991px){
    .container-1200{
        max-width:720px;
    }
}

@media(max-width:1025px){
    footer .container{
        padding:0;
    }
}

/*
layout
*********************************************/

.row-col-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.row-col-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.row-col-4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/*
txt
*********************************************/

.txt-orange{
    color:#f1832c;
}
.txt-blue{
    color:#005bac;
}

.txt-bld{
    font-weight:bold;
}

/*
card
*********************************************/
.card{
    background:#fff;
    border-radius: 10px;
}

/*
btn
*********************************************/
button{
    outline:none;
    border:none;
    display:block;
    width:100%;
    padding:10px;
    border-radius: 8px;
    color:#fff;
    font-size:20px;
    font-weight:normal;
    text-align: center;
    background: none;
}
button:hover{
    cursor: pointer;
}
button:focus{
    outline:none;
    border:none;
}

button.btn-next,
button.btn-navy {
    display:block;
    text-align: center;
    color:#fff;
    border-radius: 10px;
    background: #234E72;
    max-width:700px;
    width:100%;
    position: relative;
}

button.btn-next:after,
button.btn-navy:after{
    content: "\f054";
}

button.btn-next:disabled{
    color:#fff !important;
    background: #ccc;
}

button.btn-next:disabled:after{
    display:none;
}

button[class^="btn-"]{
    color:#fff;
    font-size:20px;
    font-weight: bold;
    max-width:550px;
    width:100%;
    margin:0 auto;
    padding:15px;
    display:block;
    border: 1px solid transparent;
    position: relative;
}
button[class^="btn-"]:hover{
    color:#fff;
    text-decoration: none;
}
button[class^="btn-"]:after{
    font-family: "Font Awesome 6 Free";
    font-weight:900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 30px;
}

a[class^="btn-"]{
    color:#fff;
    font-size:20px;
    font-weight: bold;
    max-width:550px;
    width:100%;
    margin:0 auto;
    padding:15px;
    display:block;
    border: 1px solid transparent;
    position: relative;
}
a[class^="btn-"]:hover{
    color:#fff;
    text-decoration: none;
}
a[class^="btn-"]:after{
    font-family: "Font Awesome 6 Free";
    font-weight:900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 30px;
}

.btn-details{
    color:#fff;
    text-align: center;
    background: #2d4f72;
    padding:15px;
    margin:30px auto 0 auto;
    border-radius: 10px;
}

.btn-purchase{
    color:#fff;
    text-align: center;
    background:#c83a24;
    padding:15px;
    border-radius: 50px;
}

.btn-purchase:after{
    content: "\f054";
}
.btn-details.collapsed:after{
    content: "\2b";
}

.btn-details:not(.collapsed):after{
    content:"\f068";
}

a.btn-back,
button.btn-back{
    max-width:700px;
    color:#224C70;
    background:#fff;
    border:1px solid #224C70;
    text-align: center;
    border-radius: 10px;
    margin: 50px auto 0 auto;
}

a.btn-back:hover,
button.btn-back:hover{
    color:#224C70;
}

a.btn-back:after,
button.btn-back:after{
    content: "\f053";
    right:initial;
    left:30px;
}

a.btn-next:after,
a.btn-next02:after{
    content: "\f054";
}

a.btn-border{
    max-width:700px;
    color:#224C70;
    background:#fff;
    border:1px solid #224C70;
    text-align: center;
    border-radius: 10px;
    margin: 50px auto 0 auto;
}

a.btn-border:hover{
    color:#224C70;
}

a.btn-navy,
a.btn-next,
a.btn-terms,
a.btn-login,
a.btn-next02{
    display:block;
    text-align: center;
    color:#fff;
    border-radius: 10px;
    background: #234E72;
    max-width:700px;
    width:100%;
    position: relative;
}

a.btn-next02{
    margin-top:30px;
    border-radius: 80px;
    max-width:550px;
}

.btn-next02.disabled{
    color:#fff !important;
    background: #ccc;
}
.btn-next02.disabled:after{
    display:none;
}

a.btn-pdf:after{
    display:block;
    content: "\f1c1";
    font-family: "Font Awesome 6 Free";
    font-weight:900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 30px;
}

a.btn-terms:after{
    display:block;
    content: "";
    width:25px;
    height:25px;
    background:url(/img/i-pdf02-80bbb4d7dbb6bf0c0619bb7a4a70d327.svg) no-repeat center center;
    background-size:cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 30px;
}

a.btn-pdf.for-eu {
    margin-bottom: 40px;
}

@media (min-width: 1700px) {
    a.btn-pdf.for-eu {
        font-size: 22px;
        text-align: left;
        height: 80px;
        padding-top: 22px;
    }
}
@media (max-width: 499px) and (min-width: 379px) {
    a.btn-pdf.for-eu {
        font-size: 12px;
    }
}

a.btn-register,
button.btn-register{
    text-align: center;
    background:#C93A24;
    border-radius: 60px;
}

a.btn-register:after,
button.btn-register:after{
    content: "\f054";
}

a.btn-create-account{
    text-align: center;
    background:#C93A24;
    border-radius: 10px;
}

a.btn-create-account:after{
    content: "";
    width:24px;
    height:24px;
    background: url(/img/i-edit-627dcc256eb0a5f04672018128e586cb.svg) no-repeat center center;
}
a.btn-login:after{
    content: "";
    width:24px;
    height:24px;
    right:32px;
    background: url(/img/i-login-319917ce2e8ef95949dba0015130a3bd.svg) no-repeat center center;
}

a.btn-agree{
    text-align: center;
    border:1px solid #C93A24;
    border-radius: 60px;
    margin:0;
}

.btn-ticket:before{
    display:block;
    content: "";
    width:22px;
    height:19px;
    background:url(/img/i-list-f3d676a0131cc1fb17d491a1044bc7bc.svg) no-repeat center center;
    background-size:cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    left: 30px;
}

.btn-history:before{
    content: "\f1da";
    font-family: "Font Awesome 6 Free";
    font-size:22px;
    font-weight:900;
    color:#fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    left: 30px;
}

.btn-purchase.disabled{
    color:#fff !important;
    background: #ccc;
}
.btn-purchase.disabled:after{
    display:none;
}

a[class^="btn-"].btn-round{
    border-radius: 60px;
}

@media (max-width:767px){
    a[class^="btn-"]{
        font-size:16px;
        display: flex;
        justify-content: center;
        align-items: center;
        height:50px;
    }
    a[class^="btn-"]:after{
        right:20px;
    }
    a.btn-next02{
        font-size:16px;
        padding-right:30px;
    }
    a.btn-next02:after{
        font-size:16px;
    }
    a.btn-back:after{
        left:20px !important;
        right:initial !important;
    }
    button.btn-back:after {
        left: 20px !important;
        right: initial !important;
    }
    button[class^="btn-"]{
        font-size:16px;
    }
    button[class^="btn-"]:after{
        right:20px;
    }
}

@media (max-width:391px){
    a[class^="btn-"]:after{
        right:15px;
    }
    button[class^="btn-"]:after{
        right: 15px;
    }
    a.btn-back:after{
        left:20px !important;
        right:initial !important;
    }
}

@media(min-width:1700px){
    a[class^="btn-"]{
        font-size:32px;
        max-width:700px;
    }
    button[class^="btn-"]{
        font-size:32px;
        max-width:700px;
    }
}

/*
ttl
*********************************************/

.ttl-box{
    text-align: center;
    margin-bottom:30px;
}
.ttl-box h2{
    position: relative;
    font-size: 30px;
    font-weight:bold;
    margin-bottom:30px;
}

.ttl-box p{
    font-size:16px;
}

.ttl-box h2:after{
    display:block;
    content:"";
    position: absolute;
    bottom:-15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width:72px;
    height: 5px;
    border-radius:5px;
    background:#f1832c;
}

.ttl-img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap:15px;
    margin-bottom:60px;
}
.ttl-img-box img{
    max-width:70px;
    height:auto;
}

.ttl-img-box h3{
    font-size:28px;
    font-weight:bold;
    padding:0 !important;
}

.ttl-img-box h3 span{
    position: relative;
}

.ttl-img-box h3 span:after{
    display:block;
    content:"";
    position: absolute;
    bottom:-20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width:50px;
    height: 5px;
    border-radius:5px;
    background:#f1832c;
}

@media(min-width:1700px){
    .ttl-img-box {
        margin-bottom:80px;
    }
    .ttl-img-box h3{
        font-size:38px !important;
    }
    .ttl-img-box h3 span:after{
        height:10px;
        bottom:-30px;
    }
}

/*
header
*************************************/
header{
    color:#fff;
    background:#234e71;
    position: fixed;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100%;
    z-index:20;
}

#top-page header{
    background:rgba(35,78,113,0.9);
}

header.transparent{
    background:rgba(35,78,113,0.5);
}

header .logo{
    font-family: "Cormorant Garamond", serif;
    font-weight: bold;
}

header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav ul{
    display: flex;
    align-items: center;
    gap:20px;
}

header .btn-white{
    padding:0;
}

header .btn-white a{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap:5px;
    width:65px;
    height:65px;
    padding:7px;
    border-radius: 7px;
    color:#333 ;
    font-size:10px;
    font-weight: normal;
    line-height: 1.3;
    text-align: center;
    background: #fff;
    letter-spacing: normal;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

header .btn-white a img{
    width:20px;
    height:auto;
}

header .btn-white.btn-mypage a{
	font-size:12px;
    gap:0px;
}

header .btn-white.btn-mypage a img{
    width:30px;
}

header .btn-white a:hover{
    color:#333 ;
    background: #f4f4f4;
}
header .btn-menu button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap: 10px;
    width: 65px;
    height: 65px;
    position: relative;
    background: transparent; 
    border: none; 
    cursor: pointer;
}

header .btn-menu button span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fff;
}

/* 開いている状態のスタイル */
header .btn-menu button:not(.collapsed) span:nth-child(1) {
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(-45deg); 
}

header .btn-menu button:not(.collapsed) span:nth-child(2) {
    display: none; 
}

header .btn-menu button:not(.collapsed) span:nth-child(3) {
    transform: rotate(45deg); 
    position: absolute;
    top: 50%;
    left: 50%; 
    transform-origin: center; 
    transform: translate(-50%, -50%) rotate(45deg);
}



header a,
header a:hover{
    color:#fff;
    text-decoration: none;
}

header #nav-menu{
    color:#fff;
    position: fixed;
    top:80px;
    left:0;
    width:100%;
    background:#234E72;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    z-index:100;
}

header #nav-menu{
    border-top: 1px solid #fff;
}
header #nav-menu .container{
    display: block;
    padding:30px 0 50px 0;
}

header #nav-menu .header-menu01{
    display: grid;
    grid-template-columns: 1fr 1.1fr 0.8fr;
    gap:60px;
}

header #nav-menu .header-menu01 ul {
    margin-left:65px;
    margin-bottom: 40px;
}

header #nav-menu .header-menu01 ul li + li {
    margin-top: 7px;
}

header #nav-menu .header-menu01 ul li a {
    position: relative;
    display: block;
    font-size: 18px;
}

header #nav-menu .header-menu01 ul li a:hover{
    text-decoration: underline;
}

header #nav-menu .header-menu01 ul li a:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 0;
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

header #nav-menu .header-menu01 h3{
    font-size:26px;
    margin-bottom:30px;
    display: flex;
    align-items: center;
    gap: 15px;
}
header #nav-menu .header-menu01 h4{
    font-size: 20px;
    margin-left:65px;
    margin-bottom: 10px;
}
header #nav-menu .header-menu01 img{
    width:50px;
    height:auto;
}

header #nav-menu .header-menu02{
    margin-bottom:30px;
}

header #nav-menu .header-menu02 ul{
    display: flex;
    gap:40px;
    margin-left:65px;
}

header #nav-menu .header-menu02 ul li a{
    display: flex;
    align-items: center;
    gap:10px;
}

header #nav-menu .header-menu02 ul li a img{
    width:15px;
    height:auto;
}

header #nav-menu .header-menu03{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header #nav-menu .header-menu03 .item:first-child ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:46px;
}
header #nav-menu .header-menu03 .item:first-child ul li i{
    font-size:40px;
}
header #nav-menu .header-menu03 .item:last-child a.logout{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:15px;
    font-size:20px;
}

header #nav-menu .header-menu02 ul li a:hover,
header #nav-menu .header-menu03 .item:last-child a.logout:hover{
    text-decoration: underline;
}

header #nav-menu .header-menu03 .item:last-child a.logout img{
    width:20px;
    height:auto;
}

@media(min-width:1026px) and (max-width:1199px){
    header #nav-menu .container{
        width:94%;
    }
    header #nav-menu .header-menu01{
        gap:30px;
    }
    header #nav-menu .header-menu02 ul{
        gap:25px;
    }
}


@media(max-width:1025px){
    header h1,
    header .logo{
        font-size:22px;
    }
    header nav ul{
        gap:15px;
    }
    header .btn-menu{
        padding-right:0;
    }
    header .btn-menu button{
        width:35px;
        padding:10px 0;
    }

    header .btn-white a{
        height:63px;
    }

    /* メニュー表示エリアの設定 */
    header #nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        max-height: calc(100% - 90px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-top: none;
    }

    /* スクロール可能なコンテナ */
    header #nav-menu .container {
        height: auto;
        padding-top: 0px;
        padding-bottom: 30px;
    }

    header #nav-menu .header-menu01{
        display:flex;
        flex-flow: column;
        gap:0;
    }
    header .sp-acc-panel{
        display:none;
    }
    header #nav-menu .header-menu01 h3{
        font-size:20px;
        border-top:1px solid #fff;
        padding:15px 5px;
        margin-bottom:0;
        gap:10px;
    }
    header #nav-menu .header-menu01 h4{
        font-size:16px;
        margin-left:50px;
    }
    header #nav-menu .header-menu01 ul{
        margin-left:50px;
        margin-bottom:20px;
    }
    header #nav-menu .header-menu01 ul li a{
        font-size:16px;  
    }
    header #nav-menu .header-menu01 img{
        width:38px;
        height:auto;
    }

    header #nav-menu .header-menu02{
        margin-bottom:0;
    }

    header #nav-menu .header-menu02 ul.u-nav{
        display:flex;
        flex-wrap: wrap;
        gap:0;
        margin:0;
    }

    header #nav-menu .header-menu02 ul.u-nav li a{
        display: flex;
        justify-content: center;
        align-items: center;
        padding:0;
        height:70px;
    }

    header #nav-menu .header-menu02 ul li{
        width:50%;
    }

    header #nav-menu .header-menu02 ul li:first-child a{
        border-top:1px solid #fff;
        border-left:1px solid #fff;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }
    header #nav-menu .header-menu02 ul li:nth-child(2) a{
        border-top:1px solid #fff;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }
    header #nav-menu .header-menu02 ul li:nth-child(3) a{
        border-left:1px solid #fff;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }
    header #nav-menu .header-menu02 ul li:nth-child(4) a{
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }
    header #nav-menu .header-menu02 ul li:nth-child(5) a{
        border-left:1px solid #fff;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }
    header #nav-menu .header-menu02 ul li:nth-child(6) a{
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }
    header #nav-menu .header-menu02 ul li:nth-child(7) a{
        border-left:1px solid #fff;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }

    header #nav-menu .header-menu02 ul li a{
        text-align: center;
        display:block;
        padding:20px 5px;
    }

    header #nav-menu .header-menu03{
        flex-direction: column-reverse;
        gap:20px;
    }

    header #nav-menu .header-menu03 .item:last-child{
        width:100%; 
    }
    header #nav-menu .header-menu03 .item:last-child a.logout{
        width:100%;
        height:70px;
        border-left:1px solid #fff;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }
    header .sp-acc-panel{
        padding:0 5px;
    }
    header h3.sp-acc-ttl{
        position: relative;
    }
    header h3.sp-acc-ttl:after{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        right: 25px;
        content: "\2b";
        font-size: 20px;
        font-family: "Font Awesome 6 Free";
        font-weight:900;
    }
    header h3.sp-acc-ttl.active:after{
        content:"\f068";
    }
    header #nav-menu .header-menu01 ul li a:after{
        right:25px;
    }

}

@media(min-width:768px) and (max-width:1025px){
    header h1, header .logo{
        font-size:36px;
    }
    header .container{
        max-width: 95%;
    }
    header #nav-menu .container{
        max-width: 100%;
    }

    header nav ul{
        gap:30px;
    }
}


@media(min-width:377px) and (max-width:419px){
    header h1,
    header .logo{
        font-size: 22px;
    }
}
@media(max-width:376px){
    header h1,
    header .logo{
        font-size: 19px;
    }
    header .container{
        padding:0 15px 0 7px;
    }
    header .btn-white a{
        font-size:10px;
    }
}

@media(min-width:1200px) and (max-width:1699px){
    header #nav-menu .header-menu01 h3,
    header #nav-menu .header-menu01 ul,
    header #nav-menu .header-menu02{
        margin-bottom:20px;
    }
}

@media(min-width:1025px) and (max-width:1199px){
    header #nav-menu .header-menu01 h3,
    header #nav-menu .header-menu01 ul,
    header #nav-menu .header-menu02{
        margin-bottom:20px;
    }
    header #nav-menu .header-menu01 img{
        width:40px;
    }
    header #nav-menu .header-menu01 h3{
        font-size:24px;
        gap:10px;
    }
    header #nav-menu .header-menu01 h4,
    header #nav-menu .header-menu01 ul,
    header #nav-menu .header-menu02 ul{
        margin-left:50px;
    }
    header #nav-menu .header-menu02 ul{
        gap:20px;
    }
    header #nav-menu .header-menu01 ul li a{
        font-size:16px;
    }
    header #nav-menu .header-menu01{
        gap:20px;
    }
}
@media(min-width:1700px){
    header #nav-menu{
        top:115px;
    }
    header #nav-menu .header-menu01 h3{
        font-size:40px;
        gap:30px;
    }
    header h1,
    header .logo{
        font-size: 46px;
        font-weight: bold;
    }
    header .btn-white a{
        width:100px;
        height:100px;
        font-size:16px;
        gap:10px;
    }
    header .btn-white a img{
        width:34px;
        height:auto;
    }
    header .btn-white.btn-mypage a {
        font-size: 15px;
    }
    header .btn-white.btn-mypage a img {
        width: 45px;
        height: auto;
    }
    header .btn-menu button span{
        width:40px;
    }
    header nav ul{
        align-items: center;
    }

    header #nav-menu .header-menu01 h4,
    header #nav-menu .header-menu01 ul li a,
    header #nav-menu .header-menu02 ul li a{
        font-size:28px;
    }
    header #nav-menu .header-menu01 img{
        width:85px;
    }
    header #nav-menu .header-menu01 h4,
    header #nav-menu .header-menu01 ul,
    header #nav-menu .header-menu02 ul{
        margin-left:117px;
    }
    header #nav-menu .header-menu02{
        margin:20px 0 40px 0;
    }
    header #nav-menu .header-menu03 .item:last-child a.logout{
        font-size:45px;
        gap:25px;
    }
    header #nav-menu .header-menu03 .item:last-child a.logout img{
        width:48px;
    }
    header #nav-menu .header-menu03 .item:first-child ul li i{
        font-size:60px;
    }
    
}


/*
notice
*********************************************/
#notice{
    padding:10px 12px 12px 12px;
    background: #D70000;
}

#notice .notice-ttl{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:20px;
    color:#fff;
    text-align: center;
}
#notice .notice-ttl span{
    position: relative;
}

@media(max-width:767px){
    #notice .notice-ttl span:after{
        right: -50% !important;
    }
}

#notice .notice-ttl span:after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    content:"\2b";
    right: -20%;
    font-family: "Font Awesome 6 Free";
    font-weight:900;
}

#notice .notice-ttl:not(.collapsed) span:after{
    content:"\f068";
}

#notice .notice-ttl img{
    width:25px;
    height:auto;
    margin-right:10px;
}
#notice .notice-ttl:hover{
    cursor: pointer;
}

#notice .notice-contents{
    color:#333;
    margin-top:10px;
}

#notice ul{
    display: flex;
    flex-flow: column;
    gap:10px;
    max-width: 1165px;
    width:100%;
    margin:0 auto;
}

#notice ul li dl{
    display: flex;
    gap:20px;
}

#notice ul li dl dt{
    width:100px;
}

#notice a{
    color:#333;
}
#notice a:hover{
    text-decoration: underline;
}

#notice .notice-contents{
    padding:15px;
    background:#fff;
}

@media(min-width:1700px){
    #notice{
        padding:15px 12px 15px 12px;
    }
    #notice .notice-ttl{
        font-size:26px;
    }
    #notice ul li dl{
        font-size:20px;
    }
    #notice ul li dl dt{
        width:130px;
    }
    #notice ul{
        max-width:1630px;
    }
    #notice .notice-contents{
        padding:20px;
    }
}

/*
main
*********************************************/
#top-page #main{
    background:url(/img/mv01-8364a24dfcd35419cdffe7f59a054c85.jpg) no-repeat center center;
    background-size:cover;
    padding-top:1px;
}

@media(min-width:1700px){
    #top-page #main{
        padding-top:190px;
    }
}

@media(max-width:767px){
    #top-page #main{
        padding-top:140px;  
    }
    #top-page #main .container{
        max-width:100%;
        padding:50px 0 0 0;
        max-height: 660px;
    }
}

/*
login
*********************************************/
#login-box{
    max-width:410px;
    width:100%;
    padding:20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
    margin:175px 0 70px auto;
}

#login-box .login-ttl{
    font-size:22px;
    font-weight:bold;
    color:#244d71;
    margin-bottom:10px;
}

#login-box input.form-control {
    margin-top:0;
    margin-bottom:10px;
}

#login-box .form-control + .form-control{
    margin-top:15px;
}

#login-box ul li{
    text-align:right;
}
#login-box button{
    color:#fff;
    background: #234e71;
    margin:10px 0 0px 0;
    padding:7px;
}

#login-box form{
    margin-bottom:30px;
}

#login-box ul li a{
    font-size:14px;
    color:#398CD1;
    text-decoration: underline;
    padding-right:15px;
}
#login-box ul li a:hover{
    color:#428ac5;
    text-decoration: underline;
}

#login-box ul li a:after{
    position: absolute;
    top:-3px;
    right: 0;
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight:900;
    color:#333;
}

@media(min-width:1700px){
    #login-box{
        margin:40px 10px 25px auto;
    }
    #login-box .login-ttl{
        font-size:40px;
    }
    #login-box{
        max-width: 650px;
        padding:30px 25px;
    }
    #login-box button{
        font-size:28px;
        margin:15px 0 30px 0;
        padding:15px 10px;
    }
    #login-box ul li a{
        font-size:24px;
        padding-right:25px;
    }
}


@media(max-width:767px){
    #login-box{
        width:90%;
        margin:45px auto;
    }
}

/*
contents
*************************************/

.page-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:120px;
}
.page-nav li a{
    display:block;
    font-size:36px;
    font-weight:bold;
    color:#fff;
    font-family: "Cormorant Garamond", serif;
    padding:30px;
    text-align: center;
    border-radius: 30px 30px 0 0;
    position: relative;
}

@media(max-width:767px){
    .page-nav li a{
        background: #005BAC;
        transition: box-shadow 0.3s ease;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
    }
}

.page-nav li a:after{
    position: absolute;
    bottom:5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-size: 18px;
    font-weight:900;
    color:#fff;
}

.page-nav li a:hover{
    text-decoration: none;
}

.page-nav li:first-child a{
    background:url(/img/tab01_pc-660441dc73f6beffa9ae7547d22d71cf.svg) no-repeat center right;
}
.page-nav li:last-child a{
    background:url(/img/tab02_pc-99a23e5a5bce3fed8e3192eab3fa9add.svg) no-repeat center right;
}

#nikko-pass{
    background: #F0832B;
    padding:50px 0 30px 0;
}
#kawagoe-pass{
    background: #005BAC;
    padding:50px 0 30px 0;
}

#nikko-pass .row-col-2{
    gap:100px;
}

#kawagoe-pass .row-col-2{
    gap:100px;
}

.card:not(#main .card,.mypage-container .card) {
    padding:50px 30px;
}

.gray-box{
    padding:20px;
    background: #FAFAFA;
}

.gray-box + .gray-box{
    margin-top:20px;
}

p + p:not(.price-line){
    margin-top:15px;
}

.ttl-pass{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:30px;
    margin-bottom: 40px;
}

.ttl-pass .item:first-child{
    width:130px;
}

.ttl-pass .pass-box{
    padding:5px 8px;
    background:#fff;
    border-radius: 10px;
    box-shadow: 0 4px 5px rgba(0,0,0,0.1);
}
.pass-box .nikko1 {
    background:url(/img/nikko-pass01-e6bff42cdd88bf2a3cfc04a6edf45364.svg) no-repeat center center;
    background-size:cover;
}
.pass-box .nikko2 {
    background:url(/img/nikko-pass02-fdca7fd102d579ef3307575302d2230d.svg) no-repeat center center;
    background-size:cover;
}

@media(min-width:1700px){
    .pass-box .nikko1,
    .pass-box .nikko2 {
        width: 164px;
        height: 124px;
    }
}
@media(min-width:1026px) and (max-width: 1699px) {
    .pass-box .nikko1,
    .pass-box .nikko2 {
        width: 102px;
        height: 77px;
    }
}
@media(min-width:768px) and (max-width: 1025px) {
    .pass-box .nikko1,
    .pass-box .nikko2 {
        width: 114px;
        height: 86px;
    }
}
@media(max-width: 767px) {
    .pass-box .nikko1,
    .pass-box .nikko2 {
        width: 84px;
        height: 64px;
    }
}


.ttl-pass h2{
    font-size:36px;
    font-weight:bold;
    font-family: "Cormorant Garamond", serif;
    color:#fff;
    text-align: center;
}

#kawagoe-pass h2{
    font-size:36px;
    font-weight:bold;
    font-family: "Cormorant Garamond", serif;
    color:#fff;
    text-align: center;
    min-height:88px;
    margin:30px 0 30px 0;
}

#kawagoe-pass h2 span{
    font-size:28px;
    font-weight:bold;
    font-family: "Cormorant Garamond", serif;
    color:#fff;
}

#nikko-pass .card,
#kawagoe-pass .card{
    border:none;
    border-radius: 10px;
    margin-bottom: 50px;
}

#nikko-pass .row-col-2 .card{
    min-height:1330px;
}
#kawagoe-pass .row-col-2 .card{
    min-height:698px;
}


.card h3{
    font-size:28px;
    font-weight:bold;
    text-align: center;
    padding:30px 0 20px 0;
}

.card h4{
    font-size:22px;
    font-weight:bold;
    padding:10px 0 0px 0;
}

.price-box{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-flow: column;
    max-width:300px;
    margin:0 auto;
}

.price-line{
    color:#F0832B;
    display: flex;
    align-items: center;
}

#kawagoe-pass .price-line{
    color:#005BAC;
}

.price-line .price-num{
    font-size:40px;
    font-weight:bold;
    display: inline-block;
}
.price-line .price-yen{
    font-size:40px;
    font-weight:bold;
    margin-left:10px;
    display: inline-block;
}
.price-line .price-class{
    font-size:24px;
    margin-bottom:-7px;
    display: inline-block;
    width:100px;
    padding-left:15px;
    text-align: left;
}

h3.validity-period{
    font-size:24px;
    text-align: left;
    padding:30px 0 30px 15px;
}

.img-area-map{
    max-width:450px;
    width:95%;
    margin:0 auto;
    display: block;
}

#limited-express .row-col-2,
#sl .row-col-2{
    gap:70px;
    margin-bottom:40px;
}

.caption-txt{
    font-weight: bold;
    text-align: center;
    margin-top:15px;
}

#kawagoe-pass .btn-purchase{
    margin-top:30px;
}

#bnr-area{
    padding:70px 0;
}

#bnr-area ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:30px;
    max-width:700px;
    margin:0 auto;
}


.train-bus01-cap,
.train-bus02-cap,
.train-bus03-cap{
    margin-top:10px;
}

.train-bus01-cap{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.train-bus01-cap .item,
.train-bus02-cap .item,
.train-bus03-cap .item{
    text-align: center;
    font-weight: bold;;
}

.train-bus01-cap .item:first-child{
    text-align: left;
    font-size:22px;
    padding-left:13%;
}

.train-bus02-cap{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.train-bus02-cap .item:first-child{
    font-size:22px;
    padding-right:23%;
}

.train-bus02-cap .item:nth-child(2){
    font-size:22px;
    padding-right:0;
}

.train-bus03-cap{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.train-bus03-cap .item:first-child{
    font-size:22px;
    padding-left:13%;
    padding-right:13%;
}

.ttl-pass .item.nikko-item01,
.ttl-pass .item.nikko-item02{
    width:80%;
}

@media (min-width:1026px) and (max-width:1200px){
    #nikko-pass .row-col-2,
    #kawagoe-pass .row-col-2{
        gap:30px;
        width:100%;
    }

    .page-nav{
        gap:50px;
    }
}

@media (min-width:768px) and (max-width:1025px){
    #nikko-pass .container,
    #kawagoe-pass .container{
        max-width:900px;
    }

    #nikko-pass .row-col-2{
        display:flex;
        gap:20px;
        flex-flow: column;
    }
    
    #kawagoe-pass .row-col-2{
        display:flex;
        gap:0px;
        flex-flow: column;
    }

    #kawagoe-pass h2{
        min-height:auto;
    }
    .page-nav{
        gap:35px;
    }
    .page-nav li a{
        font-size:32px;
    }

    #nikko-pass .row-col-2 .card,
    #kawagoe-pass .row-col-2 .card{
        min-height:auto;
    }

    .train-bus01,
    .train-bus02,
    .train-bus03{
        display:block;
        max-width:initial;
        width:auto;
        height:120px;
        margin:0 auto;
    }

    .train-bus01-cap{
        width:460px;
        margin:15px auto 0 auto;
    }
    .train-bus01-cap .item:first-child{
        text-align: center;
        padding-left:0;
    }

    .train-bus02-cap{
        width:590px;
        margin:15px auto 0 auto;
    }
    .train-bus02-cap .item:first-child{
        text-align: center;
        padding-right:10px;
    }

    .train-bus03-cap{
        width:560px;
        margin:15px auto 0 auto;  
    }
    .train-bus03-cap .item:first-child{
        text-align: center;
        padding-left:0;
        padding-right:0;
    }

    #limited-express img,
    #sl img{
        width:100%;
    }
    .card h4,
    h3.validity-period{
        text-align: center;
    }

}


@media (max-width:767px){
    .sp-nikko-pass-top img{
        border-radius: 10px 10px 0 0;
    }
    .sp-kawagoe-pass-top{
        background:#F0832B;
    }

    .sp-kawagoe-pass-top img{
        border-radius: 10px 10px 0 0;
    }
    #nikko-pass{
        padding-top:10px;
    }

    #kawagoe-pass{
        padding-top:10px;
        margin-top:-135px;
    }

    #kawagoe-pass h2{
        margin:0 0 10px 0;
    }

    .img-area-map{
        max-width:80%;
    }
    .page-nav{
        width:95%;
        gap:20px;
        margin:0 auto;
    }
    .page-nav li a{
        font-size: 20px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height:100px;
        padding:0;
    }
    .page-nav li a:after{
        bottom:17px;
    }

    .page-nav li:first-child a{
        background:url(/img/main-sp-btn01-c25bb5496875e84e303ea2424c812d16.png) no-repeat center center;
        background-size:cover;
    }
    .page-nav li:last-child a{
        background:url(/img/main-sp-btn02-01ef96a91293d7a489fb3641cae9dedf.png) no-repeat center center;
        background-size:cover;
    }

    .card:not(#main .card){
        padding:20px 20px 30px 20px;
    }

    .ttl-pass{
        gap:13px;
        margin-bottom:20px;
    }
    .ttl-pass h2{
        line-height:1.15;
    }

    .ttl-pass .item:first-child{
        width:100px;
    }

    .ttl-pass .item.nikko-item01{
        width:180px;
    }

    .ttl-pass .item.nikko-item02{
        width:195px;
    }

    #nikko-pass .card, #kawagoe-pass .card{
        margin-bottom:30px;
    }

    #nikko-pass .row-col-2 .item:last-child .ttl-pass{
        padding:20px 0 10px 0;
        background:url(/img/sp-bg-ttl02-271bc0e824e284765e798dad9e405f97.png) no-repeat top center;
        background-size:cover;
        margin-bottom:0;
        border-radius:10px 10px 0 0;
    }

    #kawagoe-pass .row-col-2 .item:last-child h2{
        color:#005BAC;
        padding:35px 0 5px 0;
        background:url(/img/sp-bg-ttl02-271bc0e824e284765e798dad9e405f97.png) no-repeat top center;
        background-size:cover;
        margin-bottom:0;
        border-radius:10px 10px 0 0;
    }

    #nikko-pass .row-col-2 .item:last-child .ttl-pass h2{
        color:#F0832B;
    }

    #nikko-pass .row-col-2 .item:last-child .card,
    #kawagoe-pass .row-col-2 .item:last-child .card{
        margin-top:-2px;
        border-radius:0 0 10px 10px;
    }

    #nikko-pass .row-col-2,
    #kawagoe-pass .row-col-2{
        display:flex;
        gap:20px;
        flex-flow: column;
    }
    #nikko-pass .row-col-2 .card,
    #kawagoe-pass .row-col-2 .card{
        min-height: auto;
    }
    .train-bus01-cap .item, .train-bus02-cap .item, .train-bus03-cap .item{
        font-size:11px;
    }
    .train-bus01-cap .item:first-child{
        font-size:15px;
    }

    .ttl-pass h2,
    #kawagoe-pass h2{
        font-size:30px;
    }

    .price-line .price-num{
        font-size:30px;
    }
    .price-line .price-yen{
        font-size:30px;
    }
    .price-line .price-class{
        font-size:16px;
    }
    .card h3{
        font-size:20px;
    }
    h3.validity-period{
        font-size:18px;
    }
    #kawagoe-pass .btn-purchase{
        margin-top:20px;
    }

    #bnr-area{
        padding:40px 0;
    }
    #bnr-area ul{
        max-width:92%;
        flex-flow: column;
    }

    .blank-space{
        margin-top: 300px !important;
    }
}

@media(max-width:376px){
    .page-nav li a{
        font-size:18px;
    }
    #kawagoe-pass h2{
        font-size:26px;
    }

    .ttl-pass .item .nikko-item01{
        width:180px;
    }

    .ttl-pass .item .nikko-item02{
        width:240px;
    }

    .blank-space{
        margin-top: 300px !important;
    }
}

@media(min-width:1700px){
    .page-nav{
        gap:140px;
    }
    .page-nav li {
        width:750px;
    }
    .page-nav li a{
        font-size:48px;
    }
    .page-nav li a:after{
        font-size:26px;
    }
    .ttl-pass h2{
        font-size:60px;
    }
    .ttl-pass .item:first-child{
        width:200px;
    }

    #nikko-pass .row-col-2,
    #kawagoe-pass .row-col-2{
        gap:150px;
    }
    .train-bus01-cap .item:first-child{
        font-size:30px;
    }
    .train-bus01-cap .item:last-child{
        font-size:22px;
    }

    .card h3{
        font-size:40px;
    }
    h3.validity-period{
        font-size:36px;
    }

    .card h4{
        font-size:40px;
    }
    .price-box{
        max-width:420px;
    }
    .price-line .price-num,
    .price-line .price-yen{
        font-size:60px;
    }

    .price-line .price-class{
        font-size:30px;
        width:130px;
    }

    /* #nikko-pass .row-col-2 .card{
        min-height:1960px;
    } */
    #limited-express .row-col-2, #sl .row-col-2{
        gap:90px;
    }

    #limited-express.card,
    #sl.card{
        padding:50px !important;
    }

    #kawagoe-pass h2{
        min-height:135px;
    }

    #kawagoe-pass h2,
    #kawagoe-pass h2 span{
        font-size:56px;
    }
    .train-bus img{
        max-width:640px;
        width:100%;
        height:auto;
        display:block;
        margin:0 auto;
    }
    .train-bus01-cap .item:first-child{
        padding-left:15%;
    }

    #kawagoe-pass .item:first-child .train-bus img{
        max-width:600px;
        width:100%;
        height:auto;
    }
    .train-bus02-cap .item:first-child{
        padding-right:7%;
    }

    .train-bus02-cap .item:first-child,
    .train-bus02-cap .item:nth-child(2){
        font-size:30px;
    }
    .train-bus02-cap .item:nth-child(3){
        font-size:22px;
    }
    .train-bus03-cap{
        display:flex;
        justify-content: space-between;
        max-width:460px;
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }
    .train-bus03-cap .item:first-child{
        font-size:30px;
        width:150px;
        padding:0;
    }
    .train-bus03-cap .item:last-child{
        font-size:22px;
        width:210px;
        justify-content: space-between;
    }

    #kawagoe-pass .row-col-2 .card{
        min-height:862px;
    }
}

.blank-space{
    margin-top: 588px;
}

/*
footer
*************************************/
footer{
    color:#fff;
    background:#234e71;
    padding:70px 0;
}

footer h3{
    font-weight:bold;
}

footer .footer01-left h3{
    display: flex;
    align-items: center;
    gap:15px;
}

.footer-sl{
    margin-bottom: 0px !important;
    padding-top: 27px;
}

footer h3 img{
    width:50px;
    height:auto;
}

footer h4{
    font-weight:bold;
}

footer a{
    color:#fff;
    text-decoration: none;
}

footer a:hover{
    color:#fff;
    text-decoration: underline;
}

.footer01-left li a{
    position: relative;
    display: block;
    font-size:18px;
}
.footer01-left li a:after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 0;
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight:900;
}
.footer01{
    display: flex;
    justify-content: space-between;
    gap:120px;
}
.footer01-left{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap:100px;
    width:70%;
}

.footer01-left h3{
    font-size:26px;
    margin-bottom: 30px;
}
.footer01-left h4{
    font-size:20px;
    margin-bottom: 10px;
}
.footer01-left ul{
    margin-bottom:40px;
}

.footer01-left ul li + li{
    margin-top:7px;
}

.footer01-right{
    width:20%;
}
.footer01-right .item{
    display: flex;
    justify-content: space-between;
    flex-flow: column;
    text-align: center;
}

.footer01-right h3{
    margin-bottom: 20px;
}

.footer01-right ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:46px;
    width:80%;
    margin:0 auto;
}
.footer01-right ul li a{
    font-size:55px;
}

.footer02{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer02 .logo{
    font-size:36px;
    font-weight:bold;
    font-family: "Cormorant Garamond", serif;
}

.footer02 .item:first-child{
    width: 80%;
}
.footer02 .item:last-child{
    width: 20%;
    text-align: center;
}
.footer02 img{
    max-width:180px;
    height:auto;
}

footer ul.u-nav {
    display:flex;
    gap:20px;
}

footer ul.u-nav li a{
    font-size:16px;
}
.footer03{
    margin-top:30px;
}

.copyright{
    display:flex;
    justify-content: center;
    align-items: center;
    gap:20px;
    font-size:12px;
    text-align: center;
    margin-top:60px;
}
footer ul.u-nav li a i{
    font-size:15px;
    margin-left:7px;
}

footer ul.u-nav li a img{
    width:15px;
    margin-left:7px;
}

@media(min-width:1700px){
    footer{
        padding:80px 0;
    }
    footer .footer01-left h3,
    .footer01-right h3{
        font-size:40px;
    }
    footer .footer01-left h4{
        font-size:30px;
    }
    footer h3 img{
        width:75px;
    }
    .footer01-left li a{
        font-size:30px;
    }
    .footer01-right ul li a{
        font-size:100px;
    }
    .footer02 .logo{
        font-size:57px;
    }
    footer ul.u-nav li a{
        font-size:24px;
    }
    .footer03{
        margin-top:40px; 
    }
    .copyright{
        font-size:20px;
        margin-top:70px;
    }
    .footer02 img{
        max-width:280px;
        padding-right:15px;
    }
    .footer02 .item:first-child{
        width:77%;
    }
    .footer02 .item:last-child{
        width:23%;
    }
}
@media (max-width:1025px){
    footer{
        padding-top:10px;
    }
    footer .container{
        display:flex;
        flex-flow: column;
        max-width:100%;
    }
    .footer01,
    .footer01-left,
    .footer01-right,
    .footer02,
    .footer03{
        display:contents;
    }

    .footer01-left .item{
        order:1;
    }
    .footer02 .item.logo{
        order:2; 
    }
    .footer03 ul.u-nav{
        order:3;  
    }
    .footer01-right .item{
        order:4;  
    }

    .footer02 .item:last-child{
        order:5; 
    }

    .copyright{
        order:6;  
    }

    .footer01-right h3{
        display:none;
    }

    .footer01 .item{
        padding:0 10px;
    }

    .footer01 .item h3{
        gap:10px;
        font-size:22px;
        padding:15px 0;
        border-top: 1px solid #fff;
        margin-bottom: 0;
    }

    .footer01-left h4{
        font-size:18px;
        margin-top:10px;
        margin-left:50px;
    }
    .footer01-left li a{
        font-size:16px;
    }
    .footer01-left ul{
        margin-left:50px;
    }
    .sp-acc-panel ul{
        margin-bottom:20px;
    }

    footer h3.sp-acc-ttl{
        position: relative;
    }
    footer h3.sp-acc-ttl:after{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        right: 10px;
        content: "\2b";
        font-size: 20px;
        font-family: "Font Awesome 6 Free";
        font-weight:900;
    }
    footer h3.sp-acc-ttl.active:after{
        content:"\f068";
    }

    footer .sp-acc-panel{
        display:none;
    }
    .footer01-left li a:after{
        right:15px;
    }

    footer h3 img{
        width: 38px;
    }

    .footer02{
        justify-content: center;
    }

    .footer02 .item:last-child{
        width:100%; 
        padding: 0 15px 0 0;
    }

    .footer02 img{
        max-width:140px;
    }

    .footer02 .item.logo{
        font-size:30px;
        width:100%;  
        text-align: center;
        padding:0px 10px 0 10px;
    }
    .footer02 .item.logo span{
        display:block;
        border-top: 1px solid #fff;
        padding:30px 0;
    }

    footer .item{
        width:100%;
    }

    footer ul.u-nav{
        display:flex;
        flex-wrap: wrap;
        gap:0;
    }
    footer ul.u-nav li{
        width:50%;
    }
    footer ul.u-nav li a i{
        margin-left:10px;
    }

    footer ul.u-nav li a img{
        width:15px;
        margin-left:10px;
    }

    footer ul.u-nav li:first-child a{
        border-top:1px solid #fff;
        border-left:1px solid #fff;
        border-right:none;
        border-bottom:1px solid #fff;
    }
    footer ul.u-nav li:nth-child(2) a{
        border-top:1px solid #fff;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }
    footer ul.u-nav li:nth-child(3) a{
        border-left:1px solid #fff;
        border-right:none;
        border-bottom:1px solid #fff;
    }
    footer ul.u-nav li:nth-child(4) a{
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    }


    footer ul.u-nav li a{
        text-align: center;
        display:block;
        padding:20px 5px;
    }

    .footer01-right ul{
        width:40%;
        margin:30px auto;
    }

    .copyright{
        flex-flow: column;
        gap:0px;
    }

    .sl-margin{
        margin-top: -25px !important;
    }
}

@media (max-width: 767px) {
    .privacy-text{
        padding: 8px 35px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 553px) {
    .privacy-text{
        padding: 10px 35px !important;
        font-size: 14.7px !important;
    }
}

@media (max-width: 526px) {
    .privacy-text{
        padding: 12px 35px !important;
        font-size: 13.3px !important;
    }
}

@media (max-width: 496px) {
    .privacy-text{
        padding: 2px 35px !important;
        font-size: 13.4px !important;
    }
}

@media (max-width:362px){
    .privacy-text{
        padding: 5px 13px !important;
        font-size: 12px !important;
    }
    .terms {
        font-size: 13px !important;
        padding: 22px 5px !important;
    }
}

@media (max-width:360px){
    .terms {
        font-size: 13px !important;
        padding: 22.5px 5px !important;
    }
}

.sl-margin{
    margin-top: 20px;
}


/*
modal
*************************************/
.i-info-l{
    text-align: center;
    padding:10px 0;
}

.i-info-l i{
    font-size:76px;
    color:#D70000;
}

#top-page-pass-modal .btn-ok{
    text-align: center;
    background:#C93A24;
    border-radius: 50px;
    color: white;
    cursor: pointer;
}

#top-page-pass-modal .modal-dialog{
    max-width:620px;
}

#top-page-pass-modal p{
    font-weight:bold;
    margin-bottom:50px;
}

#top-page-pass-modal .modal-header p{
    margin-bottom:0px;
}

#top-page-pass-modal .modal-header,
#seat-wheelchair-modal .modal-header{
    padding-bottom:0;
    border-bottom: 0;
}

.modal#please-login-modal .btn-nav{
    margin-top:0;
}

.modal-content:not(:has(.modal-footer)) .modal-body {
    padding-bottom: 40px;
}

@media(max-width:767px){
    .modal-body p{
        font-size:14px;
    }
}

/*
page
*************************************/

.page-ttl{
    background: #fff;
    padding:40px 0;
    border-bottom: 1px solid #DADADA;
}

.page-ttl h1{
    font-size:30px;
    font-weight:bold;
    line-height: 1;
    color:#234E72;
    text-align: center;
}

.page-contents{
    background: #FAF9F7;
    padding:80px 0;
}

.page-contents p{
    font-size:22px;
}

.page-contents h2{
    font-size:24px;
    font-weight:bold;
    padding:40px 0;
}

.entry-date{
    color:#234E72;
    font-weight:bold;
}

.card02{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    border-radius: 10px;
    background:#fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.card02 .item{
    padding:55px;
    width:100%;
}

.card02 .item_confirm{
    padding:25px 30px;
    width:100%;
}

.card02 .item_confirm + .item_confirm{
    border-top:1px solid #ddd;
}

.card02 .item:first-child,
.card02 .item_confirm:first-child{
    border-bottom:1px solid #DEDDDD;
}

.card02 .item:first-child,
.card02 .item_confirm.free{
    border-bottom:0px !important;
}

.card02 .item_confirm dl{
    display:flex;
    align-items: center;
    gap:30px;
    font-size: 22px;
}

.card02 .item_confirm dl dt{
    font-weight:bold;
    color:#234E72;
    flex: 0 0 250px;
}

.card02 .item_confirm dl dt.i-calendar{
    padding-left:30px;
    background:url(/img/i-calendar02-c7303fbbf184680ecd8cc4489251a467.svg) no-repeat center left;
}

.card02 .item_confirm dl dt.i-person{
    padding-left:30px;
    background:url(/img/i-person-91970faf1c2e3e7b383f840bc1bd0c33.svg) no-repeat center left;
}

.card02 .item_confirm dl dd{
    color:#333;
    font-weight:bold;
    flex-grow: 1;
    min-width: 0;
}

.card02 .item_confirm_train_head{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    gap:20px;
    font-size:34px;
    font-weight:bold;
    color:#234E72;
    border-bottom:1px solid #DEDDDD;
    width:100%;
    padding:30px 30px 20px 30px;
}

.card02 .item_confirm_train_head .num_box{
    font-weight:bold;
    color:#fff;
    border-radius: 10px;
    background:#C93A24;
    width:45px;
    height:45px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card02 .item_confirm_train_body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:80px;
    width:100%;
    padding:20px 20px 0px 20px;
}

.card02 .item_confirm_train_bottom{
    width:100%;
    padding:20px 20px 30px 20px;
}

.card02:not(:has(.item_confirm_train_bottom)) .item_confirm_train_body {
    padding-bottom: 30px;
}

.card02 + .card02{
    margin-top:50px;
}

.card02 + h3{
    margin-top:60px;
}

.train_station_time{
    background:#FAF9F7;
    border-radius: 10px;
    position: relative;
}


.train_station_time:first-child:after{
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-size:26px;
    font-weight:900;
    color:#C93A24;
    display:block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: -48px;
}

.train_station_time .train_station_time_item:first-child{
    border-bottom:2px solid #DEDDDDed;
    padding:20px 20px 10px 20px;
}
.train_station_time .train_station_time_item:last-child{
    padding:10px 20px 20px 20px;
}

.train_station_time .label-ttl{
    font-size:18px;
    font-weight:bold;
    color:#234E72;
}

.train_station_time .confirm_train_txt{
    color:#333;
    margin-top:0;
}


label.check-label{
    display: flex;
    align-items: flex-start;
    gap:15px;
    font-size:28px;
    font-weight:bold;
    color: #234E72;
    margin:20px auto 0 auto;
    max-width:700px;
    width:100%;
}

label.check-label:hover{
    cursor: pointer;
}

label.check-label p{
    width:calc(100% - 45px);
    line-height:1.3;
}

/* チェックボックスのデフォルトスタイルをリセット */
input[type="checkbox"] {
    appearance: none; /* デフォルトのスタイルを削除 */
    -webkit-appearance: none; /* Safari用 */
    width: 24px;
    height: 24px;
    border: 1px solid #333; /* 枠線の色 */
    border-radius: 4px; /* 角を丸くする */
    background-color: #fff; /* 背景色 */
    cursor: pointer;
    position: relative;
    margin-top:0px;
}

/* チェックされた時のスタイル */
input[type="checkbox"]:checked {
    background: #fff; /* チェック時の背景色 */
}

/* チェックマークを表示 */
input[type="checkbox"]:checked::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight:900;
    color: #707070;
    font-size: 22px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

label.check-label.btn-agree{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:0 auto ;
}


label.check-label.btn-agree{
    font-size:20px;
    color: #C93A24;
    background:#fff;
    border:1px solid #C93A24;
    border-radius: 60px;
    padding:15px;
}

.btn-agree input[type="checkbox"]:checked::after{
    color: #C93A24;
}

label.check-label.btn-agree input[type="checkbox"] {
    border-color: #C93A24;
}

.inner-block{
    padding:50px 0;
}


.pt-0{
    padding-top:0;
}

.form-control{
    margin:30px 0;
}

.page-breadcrumbs{
    padding:20px 0;
}

ul.breadcrumbs-list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:50px;
}

ul.breadcrumbs-list li{
    position: relative;
    font-size:20px;
    color:#BFBFBF;
}

ul.breadcrumbs-list li.active{
    font-weight:bold;
    color:#234E72;
}

ul.breadcrumbs-list li:after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: -30px;
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight:900;
    font-size: 18px;
}
ul.breadcrumbs-list li.active:after{
    color:#BFBFBF;
}

ul.breadcrumbs-list li:last-child:after{
    display:none;
}

.page-contents #bnr-pass{
    padding-top:70px;
}

.page-contents #bnr-pass ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:120px;
}

.page-contents #bnr-pass a{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:40px;
    font-weight:bold;
    font-family: "Cormorant Garamond", serif;
    color:#fff;
    border-radius: 10px;
    box-shadow: 0 3px 4px rgba(0,0,0,0.18);
    width:100%;
    height:200px;
}

.page-contents #bnr-pass a:hover{
    text-decoration: none;
    opacity: 0.8;
}

.page-contents #bnr-pass a.bnr-nikko-pass{
    background: url(/img/bnr-bg-nikko-pass-c25bb5496875e84e303ea2424c812d16.png) no-repeat center center;
    background-size:cover;
}

.page-contents #bnr-pass a.bnr-kawagoe-pass{
    background: url(/img/bnr-bg-kawagoe-pass-01ef96a91293d7a489fb3641cae9dedf.png) no-repeat center center;
    background-size:cover;
}

.btn-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap:30px;
    max-width: 550px;
    width:100%;
    margin:30px auto 0 auto;
    padding:0;
}

.btn-nav a[class^="btn-"]{
    margin:0;
}

.btn-nav button[class^="btn-"]{
    margin:0;
}

.btn-nav:first-child{
    margin:0 auto 50px auto;
}

.modal .btn-nav{
    margin:20px auto 0 auto;
}

.modal .modal-footer .btn-nav{
    margin:20px auto 20px auto;
}

.select-time-min{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
}

.form-controls .form-control{
	margin:10px 0;
}

.form-controls .row-col-2{
	gap:20px;
}

.form-controls h3{
    color:#234E72;
	padding:5px 0 5px 25px;
	margin-bottom:20px;
	position:relative;

}

.form-controls h3:before{
	display:block;
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:8px;
	height:100%;
	border-radius:30px;
	background:#C93A24;
}

.form-controls.select_condition .btn-nav:first-child{
    margin-bottom:20px;
}

.form-controls.select_condition .btn-nav:first-child + p{
    margin-bottom:40px;
}

.form-controls.select_condition .btn-nav:last-child{
    margin-top:70px;
}


.date_time_set{
	display:flex;
	gap:30px;
    max-width:620px;
	width:100%;
    margin:20px 0 15px 0;
}

.date_time_set .btn-group{
    background: #fff;
}

.date_time_set .btn-group .btn{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:22px;
	font-weight:bold;
	height:60px;
}

.date_time_set .btn-group:first-child{
	width:200px;
	position:relative;
}

.date_time_set .btn-group:first-child:after{
	display:block;
	content:"";
	width:1px;
	height:100%;
	background:#999;
	position:absolute;
	top:0;
	right:-15px;
}

.date_time_set .btn-group:first-child .btn{
	border-radius:10px;
}

.date_time_set .btn-group:last-child{
	width:390px;
}

.date_time_set .btn-group:last-child .btn-dep{
	border-radius:10px 0 0 10px;
}

.date_time_set .btn-group:last-child .btn-arr{
	border-radius:0 10px 10px 0;
}

.date_time_set .btn-group:last-child .btn{
	border:2px solid #000;
}

.date_time_set .btn-group:last-child label{
	width:50%;
}

.btn-outline-primary.focus, .btn-outline-primary:focus{
	box-shadow:none !important;
}

.btn-current-time{
	color:#C93A24;
	border:2px solid #C93A24;
}
.btn-current-time:hover,
.btn-current-time.active{
	color:#C93A24 !important;
	background:#fff !important;
	border-color:#C93A24 !important;
}

.btn-group.btn-group-dep-arr .btn-outline-primary{
	border-color:#000;
}

.btn-group.btn-group-dep-arr .btn-outline-primary{
	color:#000;
}

.btn-group.btn-group-dep-arr .btn-outline-primary.btn-default{
	color:#fff;
	background:#000;
}

.btn-group.btn-group-dep-arr .btn-outline-primary:hover,
.btn-group.btn-group-dep-arr .btn-outline-primary.active{
	color:#fff;
	background:#234e71;
	border-color:#234e71;
}

select:hover{
	cursor:pointer;
}

.select-wrap,
.calendar-wrap{
	position:relative;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
}

.select-wrap:before {
	z-index: 1;
	position: absolute;
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	line-height: 36px;
	color: #C93A24;
	font-size: 18px;
	pointer-events: none;
	width: 18px;
	text-align: center;
}

.form-control{
	padding:10px 12px;
	border:1px solid #999999;
	border-radius:5px;
	height:auto;
}
.form-control:focus{
	border:1px solid #C93A24;
	box-shadow:0 0 0 .1rem rgba(201, 58, 36);
}

.dropdown-container {
    position: relative;
    width: 100%;
    margin: 0 auto 10px auto;
}

.dropdown-button {
    width: 100%;
    padding: 10px;
    color:#333;
    background: white;
    border: 1px solid #999;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.dropdown-button:after {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 36px;
    color: #C93A24;
    font-size: 18px;
    pointer-events: none;
    width: 18px;
    text-align: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 8px;
    box-sizing: border-box;
}

.dropdown-content.show {
    display: block;
}

.station-group {
    margin-bottom: 4px;
    border-radius: 4px;
    overflow: hidden;
}

.station-group-header {
    padding: 10px;
    margin-bottom:2px;
    color:#333;
    background: #FFF3F1; 
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.station-group-header:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 45%;
    border: solid #C93A24;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
}

.station-group.open .station-group-header:after {
    transform: rotate(-135deg);
}

.station-group-content {
    display: none;
    background: white;
}

.station-group.open .station-group-content {
    display: block;
}

.station-option {
    color:#333;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.station-option:hover {
    background-color: #FFF3F1;
    border-radius: 4px;
}

.all-stations {
    padding: 10px;
    cursor: pointer;
    background: #f8f8f8;
    user-select: none;
    margin-top: 4px;  /* 上部に余白を追加 */
    border-radius: 4px;  /* 角を丸く */
}

.all-stations:hover {
    background-color: #f0f0f0;
}

.label-ttl{
    font-weight:bold;
}
.form-controls.select_condition .txt-s{
    font-size:120%;
    color:#234E72;
    margin-bottom: 30px;
}
.form-controls.select_condition .label-ttl{
    color:#234E72;
    line-height:1.3;
    margin-bottom: 10px;
}
.form-controls.select_condition .form-control{
    margin-top:0;
}
.form-controls.select_condition .row-col-2{
    gap:60px;
}

.form-controls.select_condition .row-col-2.dep-arr{
    margin:30px 0;
}

.label-ttl span{
    font-size:80%;
    font-weight:normal;
    display:block;
}
.page-contents p.info-txt{
    font-size:22px;
    color:#234E72;
    position: relative;
    padding-left:25px;
}

.info-txt:before{
    display:block;
    position: absolute;
    top:5px;
    left:0;
    content: "";
    width:18px;
    height:18px;
    background:url(/img/i-info-4933f11e75740366ba53bedcaacab5ed.svg) no-repeat center center;
    background-size:cover;
}

.error-txt{
    color:#C93A24;
    margin:-5px 0 5px 0;
}

.error-txt02{
    font-weight: bold;
    color:#C93A24;
    width:100%;
}

.error-txt02.text-center{
    margin-bottom:30px;
}

.error-txt02:before{
    display:inline-block;
    content:"";
    width:24px;
    height:24px;
    background: url(/img/i-info02-c5aec6aeee11dc2428de58bb066ff4b9.svg) no-repeat center center;
    background-size:24px auto;
    margin-right:10px;
    vertical-align:-5px;
}

.btn-nav .error-txt02{
    margin-top:-40px;
}

.error-box{
    color:#C93A24;
    padding:20px 30px;
    background: #FFF3F1;
    border:1px solid #C93A24;
    border-radius:10px;
    margin-bottom:50px;
}

.radio-list li {
    color:#333;
    margin-bottom: 10px;
}

.radio-list li label{
    font-size:24px ;
    margin:0;
}

.radio-list li label:hover{
    cursor: pointer;
}

.radio-list li input[type="radio"] {
    position: relative;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #DADADA;
    border-radius: 50%;
    margin-right:15px;
    vertical-align: 0px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.radio-list li input[type="radio"]:checked{
    border-color: #C93A24;
}
  
.radio-list li input[type="radio"]:checked:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #C93A24;
    content: '';
}

.radio-list + p{
    color:#333;
    margin-bottom: 70px;
}

/** radio disabled css*/
.radio-list li input[type="radio"]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.radio-list li input[type="radio"]:disabled + label {
    cursor: not-allowed;
}

.radio-list li:has(input[type="radio"]:disabled) {
    pointer-events: none;
}

.carriage-numbers{
    max-width: 614px;
    margin:40px auto 40px auto;
}
.carriage-numbers p{
    font-weight:bold;
    color:#333;
    text-align: center;
}


ul.carriage-nav{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap:15px;
    margin:15px auto 30px auto;
}
ul.carriage-nav li{
    display:block;
    width:100%;
    height:80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:30px;
    font-weight:bold;
    color:#C93A24;;
    background:#fff;
    border:2px solid #C93A24;
    border-radius:10px;
}

ul.carriage-nav li.active{
    display:block;
    width:100%;
    height:80px;
    display: flex;
    color:#fff;
    justify-content: center;
    align-items: center;
    background: #C93A24;
    text-decoration: none;
}

.carriage-nav li.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.train-panel{
    display:none;
}

.train-panel.active{
    display:block;
}

.train-direct-box{
    color:#333;
    text-align: center;
    padding:15px;
    border-radius: 10px;
    background: #F0EFEE;
    max-width: 510px;
    width:95%;
    margin-left:auto;
    margin-right:auto;
}

.train-direct-box .arr-name{
    font-size:22px;
}

.train-direct-box .train-direct{
    font-size:24px;
    font-weight:bold;
    margin-top:0;
}
.train-direct-box .train-direct span{
    padding:0 15px;
}
.train-direct-box .train-direct i{
    font-size:20px;
}

.seat-wrap{
    max-width:600px;
    margin:30px auto;
    border:2px solid #CCCCCC;
    border-radius: 10px;
    overflow: hidden;
}

.seat-wrap-head{
    font-weight:bold;
    color:#333;
    text-align: center;
    padding:15px 20px;
    background:#F0EFEE;
    border-bottom:2px solid #CCCCCC;
}
.seat-wrap-body{
    padding:35px 30px;
    display: flex;
    flex-flow: column;
    gap:15px;
    background: #fff;
}

.seat-line-num{
    font-size:28px;
    font-weight:bold;
    color:#333;
    text-align: center;
}

.seat-line-num-in{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    gap:50px;
}

.btn-seat-select{
    display: flex;
    justify-content: center;
    align-items: center;
    color:#C93A24;
    font-size:30px;
    font-weight:bold;
    background:#fff;
    border:2px solid #C93A24;
    border-radius: 10px;
}

@media(min-width:1024px){
    .btn-seat-select:hover{
        cursor: pointer;
        color:#fff;
        background: #C93A24;
    }
}

.btn-seat-select.active{
    color:#fff;
    background: #C93A24;
}

.seat-wrap ul.seat-type-standard{
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr 0.3fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap:15px;
    margin:0 auto;
    width:97%;
}

.seat-wrap ul.seat-type-standard li{
    display: flex;
    justify-content: center;
    align-items: center;
    height:80px;
}
.seat-wrap-body.disabled .seat-line-num{
    color:#ccc;
}
@media(min-width:1024px){
.seat-wrap ul.seat-type-standard li.btn-seat-select:hover,
.seat-wrap ul.seat-type-standard li.btn-seat-select.active{
    color:#fff ;
    background: #C93A24 ;
}
    }
@media(max-width:1024px) {
    .seat-wrap ul.seat-type-standard li.btn-seat-select.seat-wheelchair.active {
        color: #fff;
        background: #C93A24;
    }
}

.seat-wrap ul.seat-type-cockpit-lounge{
    display: grid;
    grid-template-columns: 1.4fr 0.4fr 1fr;
    justify-content: center;
    align-items: center;
    gap:15px;
    margin:0 auto;
    width:97%;
}

.seat-wrap ul.seat-type-cockpit-lounge li{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height:224px;
}

.seat-wrap ul.seat-type-cockpit-lounge:first-child{
    grid-template-columns: 1.2fr 1fr 1.2fr;
}
.seat-wrap ul.seat-type-cockpit-lounge:first-child li{
    height:120px;
}

.seat-wrap ul.seat-type-cockpit-lounge:first-child li.btn-seat-select{
    background:url(/img/bg-seat-cockpit01-fad5968f527dd1a6a7de4b23d9a7935a.svg) no-repeat center center;
}

.seat-wrap ul.seat-type-cockpit-lounge li:first-child{
    background:url(/img/bg-seat-cockpit03-ec0e6f9b13ce1067d809946c4d7ce053.svg) no-repeat center center;
}
.seat-wrap ul.seat-type-cockpit-lounge li:last-child{
    background:url(/img/bg-seat-cockpit02-2120248979dc33bc588e2d1308c3f2c7.svg) no-repeat center center;
}

.seat-wrap ul[class^="seat-type-"] li p{
    margin:0;
}

.seat-wrap ul[class^="seat-type-"] li p.block-num{
    font-size:26px;
    font-weight:bold;
}

.seat-wrap ul[class^="seat-type-"] li p.capa{
    font-size:20px;
    font-weight:normal;
}

/*
.seat-wrap ul[class^="seat-type-"] li.btn-seat-select:hover,
.seat-wrap ul[class^="seat-type-"] li.btn-seat-select.active{
    color:#fff ;
    background: #C93A24 ;
}*/

.seat-wrap .seat-wrap-body.disabled{
    background:rgba(240, 239, 238, 0.6);
}
.seat-wrap .seat-wrap-body.disabled ul li.btn-seat-select,
.seat-wrap ul li.btn-seat-select.disabled{
    color:#ccc;
    background: #F0EFEE;
    border-color:#ccc;
}
.seat-wrap .seat-wrap-body.disabled ul li.btn-seat-select:hover,
.seat-wrap .seat-wrap-body ul li.btn-seat-select.disabled:hover{
    cursor: auto;
    color:#ccc;
    background: #F0EFEE;
    border-color:#ccc;
}

.seat-wrap ul.seat-type-cockpit-lounge li.btn-seat-select:hover,
.seat-wrap ul.seat-type-cockpit-lounge li.btn-seat-select.active{
    color:#fff ;
    background: #C93A24 ;
}

.seat-wrap ul.seat-type-cockpit-lounge:first-child li.btn-seat-select.disabled {
    color: #8C8C8C;
    background:url(/img/bg-seat-cockpit01-fad5968f527dd1a6a7de4b23d9a7935a.svg) no-repeat center center , rgba(133,133,133,0.1);
    border-color: #ccc;
    position: relative;
}

.seat-wrap ul.seat-type-cockpit-lounge:nth-child(n+2) li:first-child.btn-seat-select.disabled {
    color: #8C8C8C;
    background:url(/img/bg-seat-cockpit03-ec0e6f9b13ce1067d809946c4d7ce053.svg) no-repeat center center , rgba(133,133,133,0.1);
    border-color: #ccc;
    position: relative;
}

.seat-wrap ul.seat-type-cockpit-lounge:nth-child(n+2) li:last-child.btn-seat-select.disabled {
    color: #8C8C8C;
    background:url(/img/bg-seat-cockpit02-2120248979dc33bc588e2d1308c3f2c7.svg) no-repeat center center , rgba(133,133,133,0.1);
    border-color: #ccc;
    position: relative;
}

.seat-wrap ul.seat-type-premium{
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr 0.3fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap:15px;
    margin:0 auto;
    width:97%;
}

.seat-wrap ul.seat-type-premium li{
    display: flex;
    justify-content: center;
    align-items: center;
    height:80px;
}

.seat-wrap ul.seat-type-premium li.btn-seat-select:hover,
.seat-wrap ul.seat-type-premium li.btn-seat-select.active{
    color:#fff ;
    background: #C93A24 ;
}

.seat-wrap ul.seat-type-box{
    display: grid;
    grid-template-columns: 0.4fr 2fr 0.3fr 2fr;
    justify-content: center;
    align-items: center;
    gap:15px;
    margin:0 auto;
    width:97%;
}

.seat-wrap ul.seat-type-box li{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height:200px;
}

.seat-wrap ul.seat-type-box li.btn-seat-select:hover,
.seat-wrap ul.seat-type-box li.btn-seat-select.active{
    color:#fff;
    background: #C93A24 !important;
}

.seat-wrap ul.seat-type-box li:nth-child(2).btn-seat-select{
    background:url(/img/bg-seat-box01-3d81fa26648ee9dad6540f9c8b1318c6.svg) no-repeat center left 10px;
}
.seat-wrap ul.seat-type-box li:last-child.btn-seat-select{
    background:url(/img/bg-seat-box02-da4e55dd0fbb31da7a0103d39a82cb11.svg) no-repeat center right 10px;
}

.seat-wrap .seat-wrap-body.disabled ul.seat-type-box li:nth-child(2).btn-seat-select,
.seat-wrap .seat-wrap-body.disabled ul.seat-type-box li:nth-child(2).btn-seat-select:hover,
.seat-wrap ul.seat-type-box li:nth-child(2).btn-seat-select.disabled {
    color: #8C8C8C !important;
    background:url(/img/bg-seat-box01-3d81fa26648ee9dad6540f9c8b1318c6.svg) no-repeat center left 10px , rgba(133,133,133,0.1) !important;
    border-color: #ccc;
    position: relative;
}

.seat-wrap .seat-wrap-body.disabled ul.seat-type-box li:last-child.btn-seat-select,
.seat-wrap .seat-wrap-body.disabled ul.seat-type-box li:last-child.btn-seat-select:hover,
.seat-wrap ul.seat-type-box li:last-child.btn-seat-select.disabled {
    color: #8C8C8C!important;
    background:url(/img/bg-seat-box02-da4e55dd0fbb31da7a0103d39a82cb11.svg) no-repeat center right 10px , rgba(133,133,133,0.1) !important;
    border-color: #ccc;
    position: relative;
}


.seat-compartment-line{
    max-width:326px;
    height:auto;
}

.seat-wrap ul.seat-type-compartment,
.seat-wrap ul.seat-type-prvtRoom{
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    justify-content: center;
    align-items: center;
    gap:15px;
    margin:0 auto;
    width:97%;
}

.seat-wrap ul.seat-type-compartment li,
.seat-wrap ul.seat-type-prvtRoom li{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height:300px;
}
.seat-wrap ul.seat-type-compartment li.btn-seat-select,
.seat-wrap ul.seat-type-prvtRoom li.btn-seat-select{
    background:url(/img/bg-seat-compartment-9b13f4b98ce17ef927ed4c269e6c21fa.svg) no-repeat center center;
}

.seat-wrap ul.seat-type-compartment li.btn-seat-select:hover,
.seat-wrap ul.seat-type-compartment li.btn-seat-select.active,
.seat-wrap ul.seat-type-prvtRoom li.btn-seat-select:hover,
.seat-wrap ul.seat-type-prvtRoom li.btn-seat-select.active{
    color:#fff;
    background: #C93A24 !important;
}

.seat-wrap .seat-wrap-body.disabled ul.seat-type-compartment li.btn-seat-select,
.seat-wrap .seat-wrap-body.disabled ul.seat-type-compartment li.btn-seat-select:hover,
.seat-wrap ul.seat-type-compartment li.btn-seat-select.disabled,
.seat-wrap .seat-wrap-body.disabled ul.seat-type-prvtRoom li.btn-seat-select,
.seat-wrap .seat-wrap-body.disabled ul.seat-type-prvtRoom li.btn-seat-select:hover,
.seat-wrap ul.seat-type-prvtRoom li.btn-seat-select.disabled {
    color: #8C8C8C !important;
    background:url(/img/bg-seat-compartment-9b13f4b98ce17ef927ed4c269e6c21fa.svg) no-repeat center center , rgba(133,133,133,0.1) !important;
    border-color: #ccc;
    position: relative;
}

.seat-wrap ul.seat-type-cockpit-suite{
    justify-content: center;
    align-items: center;
    gap:15px;
    margin:0 auto;
    max-width:460px;
    width:97%;
}

.seat-wrap ul.seat-type-cockpit-suite li{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height:300px;
}

.seat-wrap ul.seat-type-cockpit-suite li.btn-seat-select:hover,
.seat-wrap ul.seat-type-cockpit-suite li.btn-seat-select.active{
    color:#fff;
    background: #C93A24 !important;
}

.seat-wrap ul.seat-type-cockpit-suite li.btn-seat-select{
    background:url(/img/bg-seat-cockpit-suite-80d9ade0b3c64d86bdb4188dfed1d095.svg) no-repeat center center;
}

.seat-wrap .seat-wrap-body.disabled ul.seat-type-cockpit-suite li.btn-seat-select,
.seat-wrap .seat-wrap-body.disabled ul.seat-type-cockpit-suite li.btn-seat-select:hover,
.seat-wrap ul.seat-type-cockpit-suite li.btn-seat-select.disabled {
    color: #8C8C8C !important;
    background:url(/img/bg-seat-cockpit-suite-80d9ade0b3c64d86bdb4188dfed1d095.svg) no-repeat center center , rgba(133,133,133,0.1) !important;
    border-color: #ccc;
    position: relative;
}


.seat-wrap ul li.btn-seat-select.seat-wheelchair{
    background:url(/img/bg-seat-wheelchair-6571a603ceed3677206db199b72f552d.svg) no-repeat center center ;
}
.seat-wrap ul li.btn-seat-select.seat-wheelchair.disabled,
.seat-wrap ul li.btn-seat-select.seat-wheelchair.disabled:hover{
    color: #8C8C8C !important;
    background:url(/img/bg-seat-wheelchair-disabled-00143f1a9b3027c42f086f76312bb5e9.svg) no-repeat center center , rgba(133,133,133,0.06) !important;
}

.seat-image{
    text-align: center;
    color:#333;
    max-width: 650px;
    margin:50px auto;
}

.seat-image img{
    margin-bottom:15px;
}

.nav-tabs{
    border-bottom: none;
}
.nav-tabs .nav-link{
    border:initial;
    border-radius:initial;
}
.tab-pane{
animation: fadeIn 0.5s ease 0s 0.5 normal;
-webkit-animation: fadeIn 0.5s ease 0s 00.5 normal;
}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

.seat-wrap .seat-wrap-body.disabled ul li.btn-seat-select,
.seat-wrap ul li.btn-seat-select.seat-wheelchair.disabled, .seat-wrap ul li.btn-seat-select.seat-wheelchair.disabled:hover{
    color:#ccc !important;
}

.purchase-breakdown{
    display: flex;
    gap:20px;
}

.seat-reservation .txt-normal{
    font-weight:normal;
}
.seat-reservation .seat-num{
    font-weight:bold;
}

.purchase-breakdown .txt-normal{
    font-size:20px;
    font-weight:normal;
    padding-left:8px;
}

.purchase-breakdown .price-yen{
    font-size:20px;
    font-weight:normal;
    padding-left:5px;
}

.purchase-breakdown .passengers-num,
.purchase-breakdown .price-num{
    font-weight: bold;
}

.bg-total{
    background:#FFF3F1;
}
.confirm-notice-box{
    margin:30px 0 60px 0;
    padding-left:30px;
}
.confirm-notice-box ul{
    color:#333;
    list-style-type: disc;
}
.confirm-notice-box ul li{
    font-size:22px;
}
.modal-header{
    display: block;
    padding:25px 15px;
    margin-bottom:10px;
    position: relative;
}
.modal-header h4{
    font-size:28px;
    color:#234E72;
    text-align: center;
    margin-bottom:0;
}

.modal-header.body{
    padding: 10px 15px !important;
}

.modal-body h4{
    font-size:20px;
    color:#234E72;
    text-align: center;
    margin-bottom:0;
    padding-bottom: 8px;
}

.modal-body.footer{
    padding: 0px 15px !important;
    line-height: 16px;
}

.modal-body span.limited{
    font-size: 13px;
    color:#234E72;
    text-align: left;
}

.modal-body p.limited{
    font-size: 13px;
    color:#234E72;
    text-align: left;
}

.modal-header .close{
    padding:0;
    position: absolute;
    top:-20px;
    right:15px;
    color:#fff;
    text-shadow: none;
    opacity: 1;
    width:34px;
    height:34px;
    font-size:34px;
}
.modal-header .close:hover{
    opacity: 1 !important;
}
.modal-body p{
    font-size:20px;
    letter-spacing: 0;
}
.modal-footer{
    border-top:none;
}

.create-account-txt p:not(.error-txt),
.create-account p:not(.error-txt){
    color:#333;
}
.create-account .label-ttl{
    font-weight:normal;
}

p.confirm-bld{
    font-weight:bold;
    margin-top: 0 !important;
}

.create-account .form-control{
    margin-top:10px;
}

.create-account .form-control + .error-txt{
    margin-top:0px;
}

.create-account .form-control.form-verification-code{
    margin:30px 0 30px 0;
}
.create-account .form-control.form-verification-code + .error-txt{
    margin-top:-25px;
}


.card02-in{
    max-width:550px;
    width:100%;
    margin:0 auto;
}

.check-label + .error-txt{
    margin-top:5px;
}

.create-account .form-control + .error-txt{
    margin-top:-25px;
}

.faq-box{
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.faq-box + .faq-box{
    margin-top:35px;
}

.faq_q{
    padding:30px 60px 30px 30px;
    background:#fff;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    border-radius: 10px;
    transition: all 0.2s ease;
    position: relative;
}

.faq_q h3{
    color: #234E72;
}

.faq_q:after{
    display:block;
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-size:20px;
    font-weight:900;
    color:#C93A24;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 30px;
}

.faq-box.active .faq_q:after{
    content: "\f077";
}


.faq_q:hover{
    cursor: pointer;
}

.faq-box.active .faq_q{
    box-shadow: none;
    border-radius: 10px 10px 0 0;
}
.faq_a{
    display:none;
    padding:30px;
    background:#FFF3F1;
    border-radius: 0 0 10px 10px;
}

.faq_q p,
.faq_a p{
    color:#333;
}

.faq_a h3{
    color:#C93A24;
}
#please-login-modal h4{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:15px;
}
#please-login-modal h4 span{
    position: relative;
    text-align: left;
}

.profile-thumb{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom:30px;
}
.profile-thumb img{
    max-width:100px;
    width:100%;
    height:auto;
}

@media(min-width:1026px) and (max-width:1699px){
    .card .container-1200{
        max-width:800px;
    }
}

@media(min-width:576px){
    .modal-dialog{
        margin:4.2rem auto;
    }
    .modal-body{
        padding:20px 50px;
    }    
}

@media(min-width:576px) and (max-width:991px){
    .modal-dialog{
        max-width:90%;
    }
}

@media(min-width:1700px){
    .page-ttl h1{
        font-size:40px;
    }
    
    .page-contents p{
        font-size:28px;
    }
    
    .page-contents h2{
        font-size:28px;
    }


    .form-control{
        margin:30px 0;
    } 

    .page-contents #bnr-pass a{
        font-size:48px;
    }

    label.check-label.btn-agree{
        font-size:30px;
    }
    input[type="checkbox"] {
        width:30px;
        height:30px;
    }
}

@media(min-width:768px) and (max-width:991px){

    .page-contents #bnr-pass ul{
        gap:50px;
    }
    .page-contents #bnr-pass a{
        font-size:32px;
    }
}

@media(max-width:767px){
    .page-ttl{
        padding:20px 0;
    }
    .page-ttl h1{
        font-size:20px;
    }
    .page-contents{
        padding:40px 0;
    }
    .page-contents h2{
        font-size:18px;
        padding:15px 0;
    }

    .page-contents p{
        font-size:14px;
    }

    .card02 .item{
        padding:30px 20px;
    }
    
    label.check-label{
        font-size:18px;
        gap:10px;
    }
    input[type="checkbox"]{
        width:20px;
        height:20px;
    }
    input[type="checkbox"]:checked::after {
        font-size:18px;
    }
    label.check-label p{
        width:calc(100% - 30px);
    }

    .page-contents #bnr-pass{
        padding-top:30px;
    }

    .page-contents #bnr-pass ul{
        gap:15px;
    }
    .page-contents #bnr-pass a{
        font-size:20px;
        height:100px;
    }

    ul.breadcrumbs-list{
        gap:20px;
    }
    ul.breadcrumbs-list li:after {
        font-size:13px;
        right:-13px;
    }

    ul.breadcrumbs-list li{
        font-size:13px;
    }

    .date_time_set{
        width:100%;
    }
    .date_time_set .btn-group .btn{
        font-size:14px;
        padding:0;
    }
    .date_time_set .btn-group:first-child{
        width:35%;
    }
    .date_time_set .btn-group:last-child{

        width:65%;
    }
    label.check-label.btn-agree{
        font-size:16px;
    }
    .form-controls.select_condition .txt-s{
        font-size:14px;
    }
    .page-contents p.info-txt{
        font-size:16px; 
    }
    .form-controls h3{
        font-size:20px;
        padding-left:20px;
    }
    .form-controls.select_condition .label-ttl{
        font-size:18px;
    }
    .form-controls.select_condition .row-col-2{
        gap:20px;
    }

    .form-controls.select_condition .row-col-2.dep-arr{
        display:flex;
        flex-flow: column;
    }
    .select-time-min{
        gap:10px;
    }
    .select-wrap:before{
        top:6px;
        transform:initial;
    }
    ul.breadcrumbs-list li{
        line-height: 1.2;
    }

    .card02 .item_confirm{
        padding:10px 10px 10px 10px;
    }
    .card02 .item_confirm dl{
        font-size:15px;
        gap:7px;
    }
    .card02 .item_confirm dl dt.i-calendar,
    .card02 .item_confirm dl dt.i-person{
        background-size:18px auto;
        padding-left:25px;
    }

    .card02 .item_confirm_train_head{
        font-size:20px;
        gap:10px;
        padding:20px 15px 10px 15px;
    }
    .card02 .item_confirm_train_head .num_box{
        width:25px;
        height:25px;
        border-radius:4px;
    }
    .card02 .item_confirm_train_body{
        gap:30px;
        padding:15px 15px 0px 15px;
    }
    .train_station_time .label-ttl{
        font-size:14px;
    }
    .train_station_time .train_station_time_item:first-child{
        padding:10px 10px 7px 10px;
    }
    .train_station_time .train_station_time_item:last-child{
        padding:7px 10px 10px 10px ;
    }

    .train_station_time:first-child:after{
        font-size:20px;
        right:-20px;
    }
    .radio-list li label{
        font-size:16px;
        line-height: 1;
        vertical-align: middle;
        margin-bottom:0;
    }
    .radio-list li input[type="radio"]{
        width:16px;
        height:16px;
        margin-right:8px;
        vertical-align: -2px;
    }
    .btn-nav{
        gap:20px;
    }
    .form-controls.select_condition .btn-nav:last-child{
        margin:50px auto 20px auto;
    }
    .train-direct-box .arr-name{
        font-size:18px;
    }
    .train-direct-box .train-direct{
        font-size:20px;
    }
    .seat-line-num{
        font-size:16px;
    }
    .btn-seat-select{
        font-size:18px;
    }
    .seat-wrap ul.seat-type-standard{
        gap:10px;
        width:100%;
    }

    .seat-wrap-body{
        padding:25px 20px;
    }
    ul.carriage-nav{
        gap:10px;
    }

    ul.carriage-nav li,
    ul.carriage-nav li.active,
    ul.carriage-nav li:hover{
        font-size:18px;
        height:50px;
        border-radius:5px;
    }
    .seat-wrap ul[class^="seat-type-"] li p.block-num{
        font-size:20px;
    }
    .seat-wrap ul[class^="seat-type-"] li p.capa{
        font-size:16px;
    }

    .seat-wrap ul.seat-type-cockpit-lounge{
        width:100%;
        gap:0;
    }
    .seat-wrap ul.seat-type-cockpit-lounge li{
        height:150px;
    }
    .seat-wrap ul.seat-type-cockpit-lounge li:first-child{
        background:url(/img/bg-seat-cockpit03-ec0e6f9b13ce1067d809946c4d7ce053.svg) no-repeat center center;
        background-size:80% auto;
    }
    .seat-wrap ul.seat-type-cockpit-lounge:nth-child(n+2) li:first-child.btn-seat-select.disabled{
        background:url(/img/bg-seat-cockpit03-ec0e6f9b13ce1067d809946c4d7ce053.svg) no-repeat center center , rgba(133,133,133,0.1);
        background-size:80% auto;
    }

    .seat-wrap ul.seat-type-cockpit-lounge li:last-child{
        background:url(/img/bg-seat-cockpit02-2120248979dc33bc588e2d1308c3f2c7.svg) no-repeat center center;
        background-size:45% auto;
    }
    .seat-wrap ul.seat-type-cockpit-lounge:nth-child(n+2) li:last-child.btn-seat-select.disabled{
        background:url(/img/bg-seat-cockpit02-2120248979dc33bc588e2d1308c3f2c7.svg) no-repeat center center , rgba(133,133,133,0.1);
        background-size:45% auto;
    }
    .seat-wrap ul.seat-type-cockpit-lounge:first-child li{
        height:100px;
    }
    .seat-wrap ul.seat-type-cockpit-lounge:first-child li.btn-seat-select{
        background:url(/img/bg-seat-cockpit01-fad5968f527dd1a6a7de4b23d9a7935a.svg) no-repeat center center;
        background-size:45% auto;
    }
    .seat-wrap ul.seat-type-cockpit-lounge:first-child li.btn-seat-select.disabled{
        background:url(/img/bg-seat-cockpit01-fad5968f527dd1a6a7de4b23d9a7935a.svg) no-repeat center center, rgba(133,133,133,0.1);
        background-size:45% auto;
    }
    .seat-wrap ul.seat-type-cockpit-lounge li.btn-seat-select:hover, .seat-wrap ul.seat-type-cockpit-lounge li.btn-seat-select.active{
        background:#C93A24;
    }

    .seat-wrap ul.seat-type-standard,
    .seat-wrap ul.seat-type-premium{
        width:100%;
    }
    .seat-wrap ul.seat-type-standard li,
    .seat-wrap ul.seat-type-premium li{
        height:50px;
        border-radius:5px;
    }
    .seat-wrap ul.seat-type-box{
        width:100%;
    }
    .seat-wrap ul.seat-type-box li{
        height:120px;
    }
    .seat-wrap ul.seat-type-box li:nth-child(2).btn-seat-select{
        background:url(/img/bg-seat-box01-3d81fa26648ee9dad6540f9c8b1318c6.svg) no-repeat center left 10px;
        background-size:45% auto;
    }
    .seat-wrap ul.seat-type-box li:nth-child(2).btn-seat-select.disabled{
        background:url(/img/bg-seat-box01-3d81fa26648ee9dad6540f9c8b1318c6.svg) no-repeat center left 10px, rgba(133,133,133,0.1);
        background-size:45% auto;
    }
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-box li:nth-child(2).btn-seat-select, 
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-box li:nth-child(2).btn-seat-select:hover, 
    .seat-wrap ul.seat-type-box li:nth-child(2).btn-seat-select.disabled{
        background:url(/img/bg-seat-box01-3d81fa26648ee9dad6540f9c8b1318c6.svg) no-repeat center left 10px, rgba(133,133,133,0.1) !important;
        background-size:45% auto !important;
    }
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-box li:last-child.btn-seat-select, 
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-box li:last-child.btn-seat-select:hover, 
    .seat-wrap ul.seat-type-box li:last-child.btn-seat-select.disabled{
        background:url(/img/bg-seat-box02-da4e55dd0fbb31da7a0103d39a82cb11.svg) no-repeat center right 10px, rgba(133,133,133,0.1) !important;
        background-size:45% auto !important;
    }

    .seat-wrap .seat-wrap-body.disabled ul li.btn-seat-select.seat-wheelchair,
    .seat-wrap ul li.btn-seat-select.seat-wheelchair.disabled, 
    .seat-wrap ul li.btn-seat-select.seat-wheelchair.disabled:hover{
        background:url(/img/bg-seat-wheelchair-disabled-00143f1a9b3027c42f086f76312bb5e9.svg) no-repeat center center , rgba(133,133,133,0.06) !important;
        background-size:40% auto !important;
    }

    .seat-wrap ul li.btn-seat-select.seat-wheelchair{
        background:url(/img/bg-seat-wheelchair-6571a603ceed3677206db199b72f552d.svg) no-repeat center center;
        background-size:40% auto !important;
    }

    .seat-wrap ul.seat-type-compartment li,
    .seat-wrap ul.seat-type-prvtRoom li{
        height:200px;
    }
    .seat-wrap ul.seat-type-compartment li.btn-seat-select,
    .seat-wrap ul.seat-type-prvtRoom li.btn-seat-select{
        background:url(/img/bg-seat-compartment-9b13f4b98ce17ef927ed4c269e6c21fa.svg) no-repeat center center;
        background-size:90% auto;
    }
    .seat-compartment-line{
        max-width:230px;
    }
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-compartment li.btn-seat-select, 
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-compartment li.btn-seat-select:hover, 
    .seat-wrap ul.seat-type-compartment li.btn-seat-select.disabled,
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-prvtRoom li.btn-seat-select, 
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-prvtRoom li.btn-seat-select:hover, 
    .seat-wrap ul.seat-type-prvtRoom li.btn-seat-select.disabled{
        background:url(/img/bg-seat-compartment-9b13f4b98ce17ef927ed4c269e6c21fa.svg) no-repeat center center , rgba(133,133,133,0.1) !important;
        background-size:90% auto !important;
    }

    .seat-wrap ul.seat-type-cockpit-suite{
        max-width:400px;
        width:95%;
    }
    
    .seat-wrap ul.seat-type-cockpit-suite li{
        height:200px;
    }
    
    .seat-wrap ul.seat-type-cockpit-suite li.btn-seat-select{
        background:url(/img/bg-seat-cockpit-suite-80d9ade0b3c64d86bdb4188dfed1d095.svg) no-repeat center center;
        background-size:55% auto;
    }
    
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-cockpit-suite li.btn-seat-select,
    .seat-wrap .seat-wrap-body.disabled ul.seat-type-cockpit-suite li.btn-seat-select:hover,
    .seat-wrap ul.seat-type-cockpit-suite li.btn-seat-select.disabled {
        color: #8C8C8C !important;
        background:url(/img/bg-seat-cockpit-suite-80d9ade0b3c64d86bdb4188dfed1d095.svg) no-repeat center center , rgba(133,133,133,0.1) !important;
        background-size:55% auto !important;
    }

    .purchase-breakdown .txt-normal{
        font-size:14px;
        padding-left:8px;
    }
    
    .purchase-breakdown .price-yen{
        font-size:14px;
        padding-left:5px;
    }

    .card02 .item_confirm dl dt{
        flex: 0 0 175px;
    }
    .purchase-breakdown{
        gap:10px;
    }

    .confirm-notice-box ul li{
        font-size:16px;
    }
    .confirm-notice-box ul li + li{
        margin-top:10px;
    }
    .modal-dialog{
        margin:4rem auto;
    }
    .modal-content{
        width:94%;
        margin:0 auto;
    }
    .modal-open header{
        width:100%;
    }

    #please-login-modal h4 span{
        font-size:22px;
    }
    .modal-body p{
        font-size:14px;
    }
    
    .modal-header h4{
        font-size:18px;
    }

    .modal-transfer-content .modal-header h4{
        font-size:15px;
    }

    .faq_q h3,
    .faq_a h3{
        font-size:18px;
    }
    .faq_q{
        padding:20px 40px 20px 20px;
    }
    .faq_a{
        padding:20px;
    }

    .faq_q:after{
        right:15px;
        font-size:16px;
    }

    .modal-body p.error-txt02{
        font-size:16px;
    }
    .error-txt02:before{
        vertical-align:-6px;
    }
}
@media(max-width:415px){
    .seat-compartment-line{
        max-width:210px;
    }
}
@media(max-width:391px){
    .card02 .item_confirm dl{
        gap:0;
    }
    .card02.seat-reservation dl dt,
    .card02.purchase-amount dl dt{
        flex: 0 0 110px;
    }
    .card02 dl dt,
    .card02 dl dd{
        font-size: 13px;
    }
}
@media(max-width:376px){
    ul.breadcrumbs-list{
        gap:17px !important;
    }
    ul.breadcrumbs-list li {
        font-size:12px;
    }
    ul.breadcrumbs-list li:after{
        font-size:12px;
        right:-11px;
    }

    .seat-compartment-line{
        max-width:185px;
    }

    .page-contents p.confirm_train_txt{
        font-size:13px;
    }
}


/* 
Datepicker
***************************************/ 
.calendar-wrap input{
    width:88%;
}

.ui-datepicker-trigger{
    display: none;
}

.calendar-wrap img.purchase-datepicker-trigger{
	display:inline-block;
	position:absolute;
	top: 25%;
	right:15px;
	width:30px;
	height:auto;
}

.calendar-wrap img.account-datepicker-trigger{
	display:block;
	position:absolute;
	top: 25%;
	right:65px;
	width:30px;
	height:32px;
}

@media(min-width:1026px) and (max-width:1699px){
    .calendar-wrap input{
        width:89%;
    }

    .calendar-wrap img.purchase-datepicker-trigger{
        width:25px;
        height:27px;
        right: 5px;
    }

    .calendar-wrap img.account-datepicker-trigger{
        width:25px;
        height:27px;
        right: 25px;
    }
}
@media(min-width:992px) and (max-width:1025px){
    .calendar-wrap input{
        width:87%;
    }

    .calendar-wrap img.purchase-datepicker-trigger{
        right:67px;
        width:25px;
        height:27px;
    }

    .calendar-wrap img.account-datepicker-trigger{
        right:55px;
        width:25px;
        height:27px;
    }
}
@media(min-width:768px) and (max-width:991px){
    .calendar-wrap input{
        width:88%;
    }

    .calendar-wrap img.purchase-datepicker-trigger{
        right:-5px;
        width:25px;
        height:27px;
    }

    .calendar-wrap img.account-datepicker-trigger{
        right:15px;
        width:25px;
        height:27px;
    }
}
@media(min-width:576px) and (max-width:767px){
    .calendar-wrap input{
        width:92%;
    }

    .calendar-wrap img.purchase-datepicker-trigger{
        right:-10px;
        width:22px;
        height:24px;
    }

    .calendar-wrap img.account-datepicker-trigger{
        right:-10px;
        width:22px;
        height:24px;
    }
}
@media(max-width:575px){
    .calendar-wrap input{
        width:85%;
    }

    .calendar-wrap img.purchase-datepicker-trigger{
        right:-5px;
        width:20px;
        height:22px;
    }

}
@media (min-width: 500px) and (max-width:575px){
    .calendar-wrap input{
        width:85%;
    }

    .calendar-wrap img.account-datepicker-trigger{
        right:20px;
        width:20px;
        height:22px;
    }
}
@media (max-width:499px){
    .calendar-wrap input{
        width:85%;
    }

    .calendar-wrap img.account-datepicker-trigger{
        right:10px;
        width:20px;
        height:22px;
    }
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled{
    opacity:1.0;
    color:#DADADA;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
    border:none;
    padding:8px;
    background: none;
    color:#DADADA;
}
.ui-datepicker td span, .ui-datepicker td a{
    text-align: center;
}

 
/* オーバーレイのスタイル */
#datepicker-overlay {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* datepickerの基本スタイル */
.ui-datepicker {
    background: white;
    width: 100%;
    max-width: 800px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    border-radius: 8px;
    position: relative;
    z-index: 1000;
}

/* datepickerの配置調整 */
#ui-datepicker-div {
    position: fixed !important;
    top: 20% !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; 
    -webkit-transform: translateX(-50%) !important; 
    -ms-transform: translateX(-50%) !important; 
    margin: 0 !important;
    z-index: 1000 !important;
    animation: fadeInScale 0.2s ease-out;
    max-width: 800px;
}


/* ヘッダー部分のスタイル */
.ui-datepicker-header {
    background: white;
    border: none;
    padding: 10px 0;
    position: relative;
}

.ui-datepicker-title {
    color: #234E72;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    margin: 0 !important;
    /* margin: 0 40px; */
}

.ui-datepicker a.ui-datepicker-prev,
.ui-datepicker a.ui-datepicker-next{
    position: absolute;
    font-size:20px;
    font-weight:bold;
    color: #234E72;
    z-index:100000;
}

.ui-datepicker a.ui-datepicker-prev.ui-state-disabled,
.ui-datepicker a.ui-datepicker-prev.ui-state-disabled:before,
.ui-datepicker a.ui-datepicker-next.ui-state-disabled,
.ui-datepicker a.ui-datepicker-next.ui-state-disabled:before{
    color:#b3b3b3;
}


.ui-datepicker a.ui-datepicker-prev:hover,
.ui-datepicker a.ui-datepicker-next:hover{
    color: #234E72;
    text-decoration: none;
}
.ui-datepicker a.ui-datepicker-prev:before,
.ui-datepicker a.ui-datepicker-next:before{
    display:block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color:#C93A24;
    font-family: "Font Awesome 6 Free";
    font-weight:900;
}
.ui-datepicker a.ui-datepicker-prev{
    padding-left:20px;
    left:0 !important;
}
.ui-datepicker a.ui-datepicker-prev:before{
    content: "\f053";
    left:0 !important;
}
.ui-datepicker a.ui-datepicker-next{
    text-align: right;
    padding-right:20px;
    right:0 !important;
}
.ui-datepicker a.ui-datepicker-next:before{
    content: "\f054";
    right:0 !important;
}


/* 閉じるボタン（×）のスタイル */
.ui-datepicker .datepicker-close-x {
    position: absolute;
    right: -13px;
    top: -50px;
    background: none;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: #fff;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Font Awesomeアイコンのサイズ調整 */
.ui-datepicker .datepicker-close-x i {
    font-size: 34px;
}

.ui-datepicker-title {
    padding-top: 15px;
}

/* ナビゲーションボタンのスタイル */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    color: #234E72;
    text-decoration: none;
    font-size: 14px;
    background: none !important;
    border: none;
    padding: 5px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 20px;
}

.ui-datepicker .ui-datepicker-prev {
    left: 5px;
}

.ui-datepicker .ui-datepicker-next {
    right: 5px;
}

/* アイコンの削除と置換 */
.ui-icon,
.ui-widget-header .ui-icon,
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
    display: none !important;
    background-image: none !important;
}

.ui-datepicker-prev:before {
    content: 'Prev';
}

.ui-datepicker-next:before {
    content: 'Next';
}

/* カレンダー本体のスタイル */
.ui-datepicker th {
    padding: 8px;
    color: #333;
    font-weight: normal;
    font-size: 18px;
    font-weight:bold;
}

.ui-datepicker th:first-child {
    color:#C93A24;
}
.ui-datepicker th:last-child {
    color:#234E72;
}

.ui-datepicker td a {
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    border: none;
    background: white;
}

.ui-datepicker td a.ui-state-default {
    background: white;
    border: none;
    color: #333;
    border: 2px solid transparent;
    margin:0;
}

.ui-datepicker td a.ui-state-default:hover {
    color:#fff;
    background: #C93A24;
    border:2px solid #C93A24 !important;
}

.ui-datepicker-today a.ui-state-highlight {
    color:#C93A24 !important;
    background-color: #fff !important;
    border:2px solid #C93A24 !important;
}


.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-active:hover {
    background: #C93A24;
    color: #fff;
    border:2px solid #C93A24 !important;
}

.ui-datepicker td a.ui-state-default.ui-state-active:hover{
    background: #C93A24;
    border:2px solid #C93A24 !important;
}

.ui-datepicker td a.ui-state-highlight.ui-state-active{
    color:#333;
}


/* 土日の色設定 */
.ui-datepicker-calendar tr td:first-child a {
    color: #C93A24;
}



.ui-datepicker-calendar tr td:last-child a {
    color: #234E72;
}

.ui-datepicker-calendar tr td:first-child a.ui-state-active,
.ui-datepicker-calendar tr td:last-child a.ui-state-active{
    color:#fff ; 
}

.ui-datepicker-calendar tr td,
.ui-datepicker-calendar tr td a{
    font-size:18px;
}

/* ボタンエリアのスタイル */
.datepicker-buttons {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 0 0 ;
    margin-top: 10px;
}

/* 過去日付のスタイル */
.past-date,
.ui-datepicker-other-month span,
.ui-datepicker td.ui-datepicker-other-month a.ui-state-default {
    color: #DADADA !important;
}

/* 前月・次月の土日色の上書き */
.ui-datepicker-calendar tr td.ui-datepicker-other-month:first-child a,
.ui-datepicker-calendar tr td.ui-datepicker-other-month:last-child a {
    color: #ccc !important;
}

/* ボタンのスタイル */
.ui-datepicker .ui-datepicker-buttonpane .datepicker-button {
    border:2px solid #234E72;
    border-radius: 10px;
    max-width: 200px;
    width:100%;
    padding:12px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    font-weight:bold;
    margin:0;
}

.close-button,
.close-button:hover {
    background-color: #fff;
    color: #234E72;
}

.today-button,
.today-button:hover {
    background-color: #234E72;
    color: #fff;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
    width:100px;
}

.calendar-wrap input:hover{
    cursor:pointer;
}

.form-control:disabled, .form-control[readonly]{
    background:#fff;
}

/* ホバー効果 */
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: none !important;
    border: none !important;
    color: #1557b0;
}

/* ボタンパネルの調整 */
.ui-datepicker .ui-datepicker-buttonpane {
    border-top: none !important;
    padding:0;
    margin: 0 !important;
}

.datepicker-buttons {
    display: flex;
    justify-content: space-between;
}

.datepicker-button.close-button {
    order: 1; /* 左側に配置 */
}

.datepicker-button.today-button {
    order: 2; /* 右側に配置 */
}

/* アニメーション定義 */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@media (max-width: 767px) {
    .ui-datepicker {
        width: 95%;
        padding:12px;
    }
    
    .ui-datepicker th {
        padding: 6px 4px;
        font-size: 13px;
    }
    
    .ui-datepicker td a {
        padding: 4px 4px;
        font-size: 13px;
    }
    .ui-datepicker .ui-datepicker-buttonpane .datepicker-button{
        max-width:120px;
        padding:7px;
    }

    .ui-datepicker .ui-datepicker-title{
        font-size:18px;
    }
    .ui-datepicker a.ui-datepicker-prev,
    .ui-datepicker a.ui-datepicker-next{
        font-size:16px;
    }
    .ui-state-default, .ui-widget-content .ui-state-default{
        padding:3px 5px;
    }
    
}

/*
mypage
******************************/
.mypage-container.ticket-list{
    display:flex;
    flex-flow: column;
    gap:100px;
}
.mypage-container .ticket-item{
    position: relative;
    z-index:0;
}

.mypage-container .ticket-item:after{
    display:block;
    content:"";
    position: absolute;
    bottom:-55px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width:75vw;
    height:1px;
    background:#ddd;
    z-index:-1;
}
.mypage-container .ticket-item:last-child:after{
    display:none;
}

.mypage-container .btn-nav{
    max-width: 100%;
    margin-top:50px;
}

.mypage-container .btn-nav:first-child{
    margin-bottom:0;
}

.mypage-container .label-ttl{
    font-weight:normal;
}

.mypage-container .confirm-bld{
    font-weight:900;
}

.mypage-container .card{
    padding:30px;
}
.page-contents .mypage-container{
    color:#333;
}

.mypage-container .card{
    color:#234e71;
}
.page-contents .mypage-container h2{
    color:#234e71;
    padding:0;
    margin-bottom:30px;
}

.mypage-container .ticket-ttl{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
}

.mypage-container .ticket-ttl .ticket-ttl-thumb img{
    width:auto;
    height:57px;
}

.mypage-container .ticket-btn-area{
    text-align: center;
    padding:40px 20px 60px 20px;
}

.mypage-container .ticket-btn-area p{
    font-size:20px;
    margin-top:20px;
}

.mypage-container .ticket-ttl .ticket-ttl-txt{
    font-size:26px;
    text-align: center;
}

.ticket-contents{
    background:#fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.ticket-contents .ticket-line{
    display: flex;
    gap:20px;
    padding:14px 20px;
}
.ticket-contents .ticket-line:first-child{
    padding-top:18px;
}
.ticket-contents .ticket-line:last-child{
    padding-bottom:18px;
}

.ticket-contents .ticket-line dt{
    width:200px;
    font-size:20px;
    color:#234e71;
}

.ticket-contents .ticket-line dd{
    width:calc(100% - 220px);
    font-size:20px;
    font-weight:bold;
}

.ticket-contents .ticket-line + .ticket-line{
    border-top:1px solid #ddd;
}

.modal-header.modal-train-header{
    padding:15px 12px 0 12px;
    margin-bottom:0;
    border:none;
}

.modal-train-header-in{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:20px;
    position: relative;
}

.modal-train-header .train-header-logo{
    width:90px;
}

.order-number p{
    font-size:12px;
    line-height:1.4;
}

.modal-body p.boarding-date{
    font-size:17px;
}

.riding-time-set,
.station-name-set{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:5px;
}

.riding-time-set .dep-time,
.riding-time-set .arr-time,
.station-name-set .train-name{
    font-size:16px;
    font-weight:900;
}
.riding-time-set .riding-time{
    font-size:14px;
    line-height: 1.0;
    color:#4A66A4;
    background:#EBF2F8;
    border-radius:40px ;
    text-align: center;
    padding:4px 8px;
    width:95px;
}
.station-name-set .train-name{
    width: 120px;
    text-align: center;
}

.station-name-set > div{
    width:33%;
}

.dep-station-name,
.arr-station-name{
    font-size:13px;
    color:#888;
}
.arr-station-name{
    text-align: right;
}

.ticket-total-set{
    display: flex;
    justify-content: space-between;
    margin:20px 0 8px 0;
}

.ticket-total-set .ticket-total{
    font-size:16px;
    font-weight: 900;
}
.ticket-total-set .purchase-amount{
    font-size:14px;
    font-weight: 900;
}

.train-ticket-contents{
    display: flex;
    flex-flow: column;
    gap:15px;
}
.train-ticket-box-set-top{
    background:#EAF6F4;
    border-top:1px solid #E0E9E6;
    border-left:1px solid #E0E9E6;
    border-right:1px solid #E0E9E6;
    border-radius:10px 10px 0 0;
    padding:10px 15px 0px 15px;
    display: flex;
    justify-content: space-between;
}

.modal-body .ticket-passenger p{
    font-size:16px;
    font-weight:900;
}
.modal-body .ticket-price p{
    font-size:16px;
    font-weight:900;
}

.train-num{
    font-size:16px;
    font-weight:900;
}

.train-seat-name,
.train-ticket-num{
    font-size:16px;
    color:#888;
}

.train-ticket-box-set-middle{
    background:#EAF6F4;
    overflow: hidden;
    position: relative;
}
.train-ticket-box-set-middle hr{
    margin:7.5px 0;
    border-top:1px dashed #E0E9E6;
}

.train-ticket-box-set-middle:before,
.train-ticket-box-set-middle:after{
    display:block;
    content:"";
    width:20px;
    height:15px;
    background:#fff ;
    border:1px solid #E0E9E6;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    border-radius: 100%;
}

.train-ticket-box-set-middle:before{
    left:-10px;
}
.train-ticket-box-set-middle:after{
    right:-10px;
}


.train-ticket-box-set-bottom{
    background:#EAF6F4;
    border-bottom:1px solid #E0E9E6;
    border-left:1px solid #E0E9E6;
    border-right:1px solid #E0E9E6;
    border-radius:0 0 10px 10px ;
    padding:0px 15px 10px 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:12px;
}
.train-ticket-box-set-bottom .train-ticket-num{
    width:100%;
}

.modal-header.modal-header-noborder{
    border: none;
    padding-bottom: 0;
    margin-bottom:0;
}
.modal-header.modal-header-noborder .i-info-l{
    padding-bottom: 0;
}

.tobu-logo {
    background: url(/img/logo-tobu02-992b8f6149047fc01b400f213cb979f0.svg) no-repeat center center;
    background-size:cover;
    width: 120px;
    height: 70px;
}

.tobu-logo-ltd {
    background: url(/img/logo-tobu02-992b8f6149047fc01b400f213cb979f0.svg) no-repeat center center;
    background-size:cover;
    width: 90px;
    height: 54px;
}

@media (max-width: 767px) {
    .tobu-logo {
        width: 90px;
        height: 54px;
        margin-top: -10px;
        margin-left: -5px;
    }
}

/* オレンジのグラデーションbackdrop */
.modal-backdrop-orange {
    background: linear-gradient(to bottom, 
        rgba(254, 97, 32, 1) 0%,
        rgba(244, 244, 244, 1) 45%) !important;
}

/* 青のグラデーションbackdrop */
.modal-backdrop-blue {
    background: linear-gradient(to bottom, 
        rgba(0, 0, 254, 1) 0%,
        rgba(244, 244, 244, 1) 45%) !important;
}

.modal-backdrop.modal-backdrop-orange.show,
.modal-backdrop.modal-backdrop-blue.show{
    opacity:1.0;
}

.current-time-box{
    text-align: center;
    padding-bottom: 10px;

}
.current-time-box p{
    font-size:50px;
    font-weight:bold;
    line-height:1.2;
}
.current-time-box p + p{
    margin:0;
}
.current-time-box.orange-type p{
    color:#FE6C1F;
}

.current-time-box.blue-type p{
    color:#0000FE;
}

.modal-content.pass-ticket-content{
    background:none;
    border: none;
}

.modal-content.pass-ticket-content .modal-header.modal-header-noborder{
    background:#fff;
    border-radius: 10px 10px 0 0;
}

.pass-ticket-line{
    display: flex;
    justify-content: center;
    align-items: center;
}

.pass-ticket-line-left{
    width:10px;
    height: 25px;
    font-size: 0;
    background: url(/img/bg-ticket-line-2bdc20e2f511b23141eb03e4dd1bbbaa.png) no-repeat center left;
    background-size:cover;
}
.pass-ticket-line-right{
    width:10px;
    height: 25px;
    font-size: 0;
    background: url(/img/bg-ticket-line-2bdc20e2f511b23141eb03e4dd1bbbaa.png) no-repeat center right;
    background-size:cover;
}

.pass-ticket-line-center{
    background: #fff;
    width:calc(100% - 20px);
    height: 25px;
    font-size: 0;
}

.pass-ticket-line-center hr{
    border-top:1px dashed #F8BD9A;
    margin:12.5px 0;
}

.pass-ticket-detail{
    background:#fff;
}
.please-staff-txt{
    padding:15px 20px;
    margin-bottom:15px;
    background:#FAF9F7;
}
.please-staff-txt p{
    font-size:18px;
    font-weight:bold;
    line-height:1.25;
}

.pass-ticket-detail{
    text-align: center;
}

.pass-ticket-detail p + p{
    margin-top:0;
}
.pass-ticket-ttl-s{
    font-size:14px;
    margin-bottom:5px;
    padding:15px 15px 0px 15px;
}
.pass-ticket-ttl-l{
    font-size:24px;
    font-weight:bold;
    line-height:1.25;
    margin-bottom:12px;
    padding:0px 15px;
}
.pass-ticket-people-s{
    font-size:14px;
    margin-bottom:3px;
    padding:0px 15px;
}
.pass-ticket-people-l{
    font-size:24px;
    font-weight:bold;
    padding:0px 15px 15px 15px;
}

.pass-ticket-name{
    font-size:18px;
    font-weight:bold;
}

.pass-ticket-content .card02 .item{
    padding:10px 15px;
}
.pass-ticket-content .card02 .item dl{
    display:flex;
    justify-content: space-between;
    gap:15px;
}

.pass-ticket-details{
    display:flex;
    flex-flow: column;
    gap:2px;
}

.pass-ticket-content .card02 .item dl dt{
    font-size:15px;
    font-weight:bold;
    color:#A5A5A5;
}

.pass-ticket-content .card02 .item dl dd{
    font-size:17px;
    font-weight:bold;
}

.modal-content.bg-ticket{
    background:#FAF9F7;
}

label.check-label.btn-check-transfer{
    align-items: center;
    color:#000;
    margin:0;
    gap:40px;
}

label.check-label.btn-check-transfer input[type="checkbox"]{
    border-color:#000;
    width:30px;
    height:30px;
}

label.check-label.btn-check-transfer input[type="checkbox"]:checked::after{
    color:#fff;
}

label.check-label.btn-check-transfer input[type="checkbox"]:checked{
    background:#000;
    border-radius: 3px;
}

label.check-label.btn-check-transfer.transferred span{
    color:#999;
}

label.check-label.btn-check-transfer.transferred span.transferred-label{
    color:#fff;
    font-size:20px;
    background:#999;
    border-radius: 3px;
    padding:4px 8px;
    margin-left:50px;
}

label.check-label.btn-check-transfer.transferred input[type="checkbox"]{
    border-color:#999;
}

label.check-label.btn-check-transfer.transferred input[type="checkbox"]:checked::after{
    color:#fff;
}

label.check-label.btn-check-transfer.transferred input[type="checkbox"]:checked{
    background:#999;
    border-radius: 3px;
}

.transfer-box{
    max-width:650px;
    margin:0 auto 50px auto;
    padding:30px 50px;
    background:#fff;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    position: relative;
}

.transfer-box .error-txt02{
    margin-bottom:15px;
}

.transfer-box ul{
    display: flex;
    flex-flow: column;
    gap:20px;
}

h4.transfer{
    color:#333;
    margin-top: 30px;
}

.notice-box{
    text-align: center;
    background:#C93A24;
    padding:10px;
}
.notice-box p{
    font-size:18px;
    color:#fff;
}

.qr-modal-inner{
    max-width:650px;
    margin:0 auto 50px auto;
}

.qr-slider {
    width: 100% !important;
}

.qr-slider .slick-slide {
    width: 100% !important;
}

.qr-slider .slick-track {
    display: flex !important;
}

.qr-slider {
    width: 100% !important;
    opacity: 0;
    transition: opacity 0.3s;
}

.qr-slider.slick-initialized {
    opacity: 1;
}

.qr-code-box{
    max-width: 400px;
    margin:30px auto;
    padding:20px;
    background:#fff ;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}

.qr-code-box img{
    display: block;
    max-width:250px;
    margin:0 auto;
}
.slick-next, .slick-prev{
    width:50px;
    height:50px;
    z-index: 100;
}
.slick-next{
    right:-5px;
}
.slick-prev{
    left:-5px;
}
.slick-prev:before,
.slick-next:before{
    display:block;
    content:"";
    opacity: 1.0;
    width:50px;
    height:50px;
    border-radius: 50px;
}
.slick-prev:before{
    background: url(/img/i-slide-prev-4444e2f628ca3f761c04076b3bb80b0c.svg) no-repeat center center,#fff;
    background-size:cover;
}
.slick-next:before{
    background: url(/img/i-slide-next-0211bd73c95bb287ed432801b5e9f477.svg) no-repeat center center,#fff;
    background-size:cover;
}

.slick-prev:after,
.slick-next:after{
    font-size: 16px;
    font-weight:500;
    color:#333;
    margin-top:10px;
    display:block;
}
.slick-prev:after{
    content:"Prev";

}
.slick-next:after{
    content:"Next";
}

.slider-counter{
    font-size:22px;
    font-weight: 600;
    text-align: center;
}

.qr-code-box .ticket-type{
    font-size:20px;
    font-weight:bold;
    text-align: center;
}

.history-list .btn-nav a[class^="btn-"]{
    max-width:100%;
}

.modal-header .modal-history-container p{
    font-size:24px;
    font-weight:bold;
    text-align: center;
}

.modal-history-container .form-control{
    margin-bottom:10px;
}

.modal .modal-history-container .btn-nav{
    margin-top:50px;
}

.btn-nav.resign-ver{
    gap:50px;
    margin-top:40px;
}

.resign-box{
    max-width:550px;
    margin:0 auto 60px auto;
}

.modal a.btn-back-history{
    font-size:26px;
}

@media(min-width:992px){
    .modal-header.modal-header-noborder .i-info-l img{
        width:70px;
        height:auto;
    }
}

@media(max-width:767px){
    .modal-body p a{
        color:#385F7F;
        text-decoration: underline;
    }
    .modal-content{
        width:95%;
        margin-left:auto;
        margin-right:auto;
    }
    .mypage-container{
        gap:60px;
    }
    .mypage-container.ticket-list{
        gap:60px;
    }
    .mypage-container .ticket-item:after{
        width:100%;
        bottom:-35px;
    }
    .mypage-container .ticket-ttl{
        gap:10px;
    }
    .mypage-container .ticket-ttl .ticket-ttl-txt{
        font-size:20px;
    }

    .mypage-container .ticket-ttl.sl-ticket .ticket-ttl-txt{
        font-size:18px;
    }
    .mypage-container .ticket-ttl .ticket-ttl-thumb img{
        height:40px;
    }
    .mypage-container .ticket-btn-area{
        padding:20px 15px 30px 15px;
    }
    .mypage-container .ticket-btn-area p{
        font-size:14px;
        margin-top:15px;
    }
    .ticket-contents .ticket-line{
        padding:10px 10px 10px 15px;
        gap:10px;
    }
    .ticket-contents .ticket-line:first-child{
        padding-top:14px;
    }
    .ticket-contents .ticket-line:last-child{
        padding-bottom:14px;
    }
    .ticket-contents .ticket-line dt,
    .ticket-contents .ticket-line dd{
        font-size:14px;
    }
    .ticket-contents .ticket-line dt{
        width:150px;
    }
    .ticket-contents .ticket-line dd{
        width:calc(100% - 150px);
    }
    .modal-body p.use-tickets-info-txt-red{
        font-size:18px;
        font-weight:bold;
        color:#c83a24;
    }
    .modal-body .btn-nav p{
        margin-bottom:-15px;
    }

    label.check-label.btn-check-transfer{
        gap:30px;
    }
    label.check-label.btn-check-transfer input[type="checkbox"]{
        border-color:#000;
        width:25px;
        height:25px;
    }
    label.check-label.btn-check-transfer.transferred span.transferred-label{
        font-size:13px;
        margin:0;
    }
    .transfer-box{
        padding:20px 30px;
        margin-bottom:50px;
    }

    .slick-next,
    .slick-prev,
    .slick-prev:before,
    .slick-next:before{
        width:35px;
        height:35px;
    }
    .slick-prev:after,
    .slick-next:after{
        font-size:14px;
    }

    .qr-code-box{
        padding:15px;
        margin:20px auto 30px auto;
    }

    .qr-code-box .ticket-type{
        font-size:18px;
    }
    .qr-code-box img{
        max-width:80%;
    }
    .slider-counter{
        font-size:18px;
    }
    .notice-box p{
        font-size:16px;
    }
    .qr-modal-inner{
        margin-bottom:30px;
    }

    .transfer-box ul{
        gap:12px;
    }

    .transfer-box{
        margin-bottom:30px;
    }

    .modal-header .modal-history-container p{
        font-size:18px;
    }
    .resign-box{
        margin:0 auto 30px auto;
    }

    .modal a.btn-back-history{
        padding-left:37px;
        font-size: 16px;
    }

    .pass-ticket-content .modal-header-noborder img{
        width:90px;
        margin-top:-15px;
        margin-left:-5px;
    }

    .pass-ticket-content .card02 + .card02.card-important{
        margin-top:15px;
    }
    .pass-ticket-content .card02.card-important h4{
        font-size:18px;
        padding:3px 0 0 0;
        margin:0;
    }
    .pass-ticket-content .card02.card-important ul{
        display: flex;
        flex-flow: column;
        gap:5px;
        list-style: disc;
        margin:0 0 5px 15px;
    }
    .pass-ticket-content .card02.card-important ul li{
        line-height: 1.3;
    }
    .pass-ticket-content .card02.card-important .item:first-child{
        padding-bottom:0;
        border-bottom:none;
    }
}


@media(max-width:411px){
    .mypage-container .ticket-ttl.sl-ticket .ticket-ttl-txt{
        font-size:16px;
    }
    .modal a.btn-back-history{
        font-size: 14px;
    }
}

@media(max-width:376px){
    .modal-dialog{
        margin:3.2rem auto;
    }
    .modal-content.pass-ticket-content .modal-header.modal-header-noborder{
        padding:12px 15px 5px 15px;
    }
    .current-time-box{
        padding: 0;
    }
    .pass-ticket-ttl-s{
        padding-top:10px;
    }
    .current-time-box p{
        font-size:38px;
    }

    .pass-ticket-name{
        font-size:16px;
    }

    .qr-code-box img{
        max-width:70%;
    }
    .qr-code-box .slick-prev{
        left:3px;
    }
    .qr-code-box .slick-next{
        right:3px;
    }
    .qr-modal-inner{
        margin-bottom:0;
    }
    .qr-code-box{
        margin:7px auto 20px auto;
        padding:7px 10px;
    }
    .notice-box{
        padding:7px;
    }
    .notice-box p{
        font-size:13px;
    }

    .transfer-box{
        margin-bottom:20px;
    }
    .transfer-box ul{
        gap:10px;
    }
    .pass-ticket-content .modal-header-noborder img{
        width:90px;
        margin-top:-10px;
        margin-left:-5px;
    }
}

/* 追加調整
**************************************/

.card02.card-important-ticket{
	padding:0;
	margin-top:12px;
	box-shadow:none;
}

.card02.card-important-ticket .item:first-child{
	border:none;
}

.card02.card-important-ticket .item{
	padding:5px 0px;
}

.pass-ticket-content .card02.card-important h4,
.card02.card-important-ticket h4{
	font-size:18px;
	padding:3px 0 0 0;
	margin:0 0 5px 0;
}

.card-important h5,
.card02.card-important-ticket h5{
	font-size:16px;
	font-weight:bold;
	margin-top:10px;
}

@media(min-width:767px){
	header #nav-menu .header-menu02 ul{
		width:770px;
		flex-wrap: wrap;
		gap:15px 40px;
	}
}

@media(min-width:767px) and (max-width:1699px){
	header #nav-menu .header-menu02 ul{
		width:100%;
		flex-wrap: wrap;
		gap:15px 40px;
	}
}


@media(min-width:1700px){
	header #nav-menu .header-menu02 ul{
		width:1500px;
		flex-wrap: wrap;
		gap:15px 40px;
	}
}
@media(max-width:1025px){
	header #nav-menu .header-menu02 ul li:first-child{
		width:50%;
	}
	header #nav-menu .header-menu02 ul li:last-child a{
		border-top:none;
		border-left:1px solid #fff;
		border-right:1px solid #fff;
		border-bottom:1px solid #fff;
	}
	
	.footer03 ul.u-nav li:first-child{
		width:50%;
	}
	
	.footer03 ul.u-nav li:nth-child(2) a,
	.footer03 ul.u-nav li:nth-child(4) a{
		border-left:1px solid #fff;
	}
	.footer03 ul.u-nav li:last-child a{
		border-top:none;
		border-left:1px solid #fff;
		border-right:1px solid #fff;
		border-bottom:1px solid #fff;
	}
    .footer03 ul.u-nav li:nth-child(5) a{
        border-top:none;
        border-left:1px solid #fff;
        border-right:none;
        border-bottom:1px solid #fff;
    }
}
/* 駅選択セレクトボックスがヘッダーと被らないように調整 */
.dropdown-content{
    z-index: 10;
}

/* 会員登録カレンダーcss */
.custom-year-select,
.custom-month-select {
    background: white;
    color: #234E72;
    border: 0px;
    padding: 10px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1000;
    width: 100px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
}

.custom-month-select {
    width: 22% !important;
    text-align: right !important;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23C93A24"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat left 2% center;
    background-size: 30px;
}
.custom-year-select {
    width: 20% !important;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23C93A24"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 19% center;
    background-size: 30px;
}    

@media(max-width:768px) {
    .custom-month-select{
        width: 37% !important;
        text-align: right !important;
    }
    .custom-year-select{
        width: 25% !important;
    }
}

.transfer-message{
    border:solid 1px#DADADA;
    padding:10px;
    margin: 0 auto 20px;
    font-size: 15px;
}

.transfer-message-title{
    display:flex;
    justify-content:flex-start;
    align-items: center;
    margin-bottom: 8px;
}

.ticket-transfer-icon{
    width:20px;
    margin-right: 8px;
}
