@charset "UTF-8";

/* CSS Document */


/*===================================================
	画面用CSS（PC/SMP）
===================================================*/


/*////////////////////////////////////////////////////////////
	COMMON
///////////////////////////////////////////////////////////*/

@media (max-width: 999px) {
	.flBox {
		display: block;
	}
	.fl2Box {
		display: flex;
	}
        .br-none {
            display: none;
        }
}

/***** cart *****/
@media (max-width: 999px) {
	.cart-step .baseBox {
		width: 100%;
	}

	/* ラベル */
	.ec-progress__label {
		margin-top: 8px;
		font-size: 1.1rem;
		color: #0b8f87;
		white-space: normal;
	}
}

/* ボタン */

@media (max-width: 600px) {
	.btn.back {
		min-width: 200px;
	}

	.btn.next {
		min-width: 200px;
	}
}

@media (max-width: 450px) {
	.btn {
		text-align: center;
	}

	.buttons {
		/* flex-direction: column !important; */
		gap: 12px;
	}

	.buttons a {
		min-width: 150px;
	}
}


/*////////////////////////////////////////////////////////////
	TOP
///////////////////////////////////////////////////////////*/

@media (max-width: 999px) {
	#top .main .sec01 .contentBox .newsBox {
		width: 100%;
		margin-bottom: 30px;
	}

	#top .main .sec02 .box.flBoxAlw {
		display: block;
		text-align: center;
	}

	#top .main .sec02 .box span {
		transform: rotate(90deg);
                display: none;
	}

	#top .main .sec03 {
		height: 100%;
	}

	#top .main .sec03 .box {
		height: auto;
		text-align: center;
	}

	#top .main .sec03 .box .stationBox .inBox:first-child {
		margin-right: 0px;
	}

	#top .main .sec03 .box03.otherBox .dateBox {
		margin-right: 0px;
		width: 242px;
		margin: 0 auto;
	}

	#top .main .sec03 .box03.otherBox .timeBox {
		margin: 0 auto;
		margin-top: 20px;
	}

	#top .main .sec03 .box03.otherBox .dateBox::after {
		/*bottom: -9.5px;*/
                top: 15px;
	}

	#top .main .sec03 .box .inBox {
		margin-top: 20px;
	}

	#top .main .sec04 li {
		margin: 20px auto 40px;
	}

	#top .main .sec04 li::after {
		transform: rotate(90deg);
		right: 0;
		left: 0;
		top: 250px;
                display: none;
	}

	#top .main .sec05 li {
		margin: 20px auto 40px;
	}

	#top .main .sec06 li {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		margin-bottom: 50px;
	}

	#top .main .sec07 li {
		margin: 0;
		margin-bottom: 30px;
	}

}

@media (max-width: 480px) {
	#top .main .sec03 .box03.otherBox .numberBox select {
		margin-right: 10px;
		width: 50px;
	}
}

/*////////////////////////////////////////////////////////////
	LIST PAGE（検索結果画面）
///////////////////////////////////////////////////////////*/
@media (max-width: 768px) {
	#list .sec02 .route-box {
		flex-direction: column;
	}

	#list .sec02 .ChangeSearchBox {
		margin-top: 10px;
	}

	#list .sec03 .route-box {
		flex-direction: column;
	}

	#list .sec03 .route-main {
		gap: 10px;
	}

	#list .sec03 .route-date .date,
	#list .sec03 .route-place {
		font-size: 16px;
	}


	#list .sec03 .seat-buttons {
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

}

@media (max-width: 480px) {
	#list .sec03 .route-main {
		flex-direction: column;
		align-items: flex-start;
	}

	#list .sec03 .route-place {
		gap: 6px;
	}
}

@media (max-width: 768px) {
	#list .sec03 .train-row {
		flex-direction: column;
	}

	#list .sec03 .train-info {
		min-width: auto;
	}

	#list .sec03 .seat {
		flex: 1 1 calc(50% - 6px);
		min-width: auto;
		font-size: 1.2rem;
	}

	#list .modal-box .seat-select span {
		display: block;
	}

	#list .modal-box .seat-select label {
		padding: 10px 5px;
		display: inline-block;
	}

        #list ol.modalprice {
            display: block;
        }
	#list .modal-box .price-wrapper .price-label {
		width: 100%;
	}
}

@media (max-width: 480px) {
	#list .sec03 .seat {
		flex: 1 1 100%;
	}

	#list .info-table th,
	#list .info-table td {
		font-size: 1.2rem;
	}

	#list .price-card span {
		margin-left: 5px;
		font-size: 1.2rem;
	}

	#list .price-total.strong {
		font-size: 1.6rem;
	}

	#list .seat-select label {
		margin-right: 2px;
	}
        #list .sec03 .train-list .seat-buttons .type {
                min-width: auto;
                width: 11.8rem;
        }
}

/*////////////////////////////////////////////////////////////
	CONFIRM PAGE（確認画面）
///////////////////////////////////////////////////////////*/
@media (max-width: 600px) {
	#confirm .btn {
		padding: 10px;
		min-width: 150px;
	}
}
@media (max-width: 768px) {
	#confirm .cart-table thead {
		display: none;
	}

	#confirm .cart-table,
	#confirm .cart-table tbody,
	#confirm .cart-table tr,
	#confirm .cart-table td {
		display: block;
		width: 100%;
	}

	#confirm .cart-table tr {
		margin-bottom: 20px;
		border: 4px solid #eeeeee;
	}

	#confirm .cart-table td {
		border: none;
		border-bottom: 1px solid #ddd;
		position: relative;
		padding: 4px;
		text-align: center;
	}

	#confirm .cart-table td.time {
		text-align: center;
	}

	#confirm .cart-table td.route {
		background-color: #eeeeee;
	}

	#confirm .sum-row td {
		padding-left: 10px;
	}

	#confirm .count {
		padding: 10px 5px;
		font-size: 12px;
	}

	#confirm .cart-buttons {
		flex-direction: column;
		gap: 15px;
	}
}

/*////////////////////////////////////////////////////////////
	USER PAGE（カート内お客様情報登録）
///////////////////////////////////////////////////////////*/
@media (max-width: 600px) {
	#user .btn {
		min-width: 150px;
		padding: 10px;
	}
}
@media(max-width:768px) {
	#user .form-row {
		flex-direction: column;
	}

	#user .form-label {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #eee;
	}

	/* #user .buttons {
		flex-direction: column;
		gap: 12px;
	} */

	#user .btn-back,
	#user .btn-next {
		text-align: center;
	}
}

/*////////////////////////////////////////////////////////////
	PAYMENT TYPE PAGE（お支払い方法選択）
///////////////////////////////////////////////////////////*/
/* レスポンシブ */
@media (max-width: 600px) {
	#payment-type .agree-check span {
		font-size: 1.2rem;
	}

	#payment-type .button-area {
		flex-direction: column;
		gap: 12px;
	}

	#payment-type .btn {
		min-width: 150px;
		padding: 10px;

	}
}

/*////////////////////////////////////////////////////////////
	PAYMENT CARD PAGE（クレジットカード情報入力）
///////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {

	#payment-card .form-table,
	#payment-card .form-table tbody,
	#payment-card .form-table tr,
	#payment-card .form-table th,
	#payment-card .form-table td {
		display: block;
		width: 100%;
	}

	#payment-card .form-table th {
		background: #f5f5f5;
		border-bottom: none;
	}

	#payment-card .form-table td {
		border-bottom: 1px solid #ccc;
	}

	#payment-card .security-info {
		flex-direction: column;
		gap: 16px;
	}

	#payment-card .form-actions {
		flex-direction: column;
		gap: 16px;
	}
}

/*////////////////////////////////////////////////////////////
	COMPLETE PAGE（予約完了画面）
///////////////////////////////////////////////////////////*/
/* レスポンシブ */
@media screen and (max-width: 600px) {
	#complete .complete-title {
		font-size: 20px;
	}

	#complete .reservation-box .number {
		display: block;
		margin-top: 8px;
	}

	#complete .btn-top {
		width: 100%;
		max-width: 200px;
		padding: 14px 0;
	}
}


/*////////////////////////////////////////////////////////////
	マイページ
///////////////////////////////////////////////////////////*/
/***** 予約一覧 *****/
@media (max-width: 768px) {

	#mypage.reservation-list .table-header,
	#mypage.reservation-list .row {
		grid-template-columns: 1fr;
	}

	#mypage.reservation-list .left {
		border-right: none;
		border-bottom: 1px solid #ccc;
	}

	#mypage.reservation-list .block {
		grid-template-columns: 1fr;
	}

	#mypage.reservation-list .block .label {
		text-align: left;
	}

}

@media (max-width: 500px) {

	#mypage.reservation-list .line,
	#mypage.reservation-list .route {
		display: block;
	}

	#mypage.reservation-list .block .content .box {
		display: block;
	}

	#mypage.reservation-list .line {
		margin-bottom: 0px;
	}
}

/***** 予約詳細 *****/
@media (max-width: 768px) {
	#mypage.reservation-detail .detail-table tr {
		display: flex;
		flex-direction: column;
	}

	#mypage.reservation-detail .detail-table th,
	#mypage.reservation-detail .detail-table td {
		width: 100% !important;
		box-sizing: border-box;
	}

	#mypage.reservation-detail .shipping-flex {
		flex-direction: column;
	}

	#mypage.reservation-detail .shipping-status,
	#mypage.reservation-detail .shipping-address {
		width: 100%;
	}

	#mypage.reservation-detail .train-box {
		flex-direction: column;
	}

	#mypage.reservation-detail .train-label {
		width: 100%;
		padding: 10px;
		border-right: none;
		border-bottom: 1px solid #ccc;
	}

	#mypage.reservation-detail .receipt-form {
		flex-direction: column;
		gap: 15px;
	}

	#mypage.reservation-detail .detail-table .br-none {
		border-right: 1px solid #ccc;
	}
}

/***** 登録情報編集画面 *****/
@media(max-width:768px) {
	#mypage.user-edit .form-row {
		flex-direction: column;
	}

	#mypage.user-edit .form-label {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #eee;
	}

	#mypage.user-edit .btn-back,
	#mypage.user-edit .btn-next {
		text-align: center;
	}
    .slider {
        position: relative;
        height: 45px;
        /* overflow: hidden; */
    }
    h2.circle {
        font-size: 20px;
    }
}