/*=============================
=== header
============================*/
/**  header**/
.header_container{
	display: flex;
	justify-content: space-between;
	height:40px;
	padding:0 20px;
}

.header_center{
	font-size:1.0rem;
	align-self: center;
}


/*=============================
=== next revision
============================*/
.revision-banner {
	border:none;
	width: 100%;
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banner-red {
	background-color: #fcf0f1;
	border-left: 5px solid var(--red);
}

.banner-blue {
	background-color: #f0f1fc;
	border-left: 5px solid #151d7d;
}

.revision-banner-text {
    font-weight: bold;
	font-size: 0.70rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.banner-text-red {
	color: var(--red);
}

.banner-text-blue {
	color: #151d7d;
}

.revision-banner-arrow {
    font-size: 1rem;
    font-weight: bold;

}



 /*============================
 serarch input
============================*/
.search_area{
	padding:5% 20px 2% 20px;
	background-color:rgba(227, 227, 226,1);
	margin-bottom:10px;
}

.search_stop_container{
	display:flex;
	align-items:center;
}

.search_time_container{
	display:flex;
	align-items:center;
	flex-grow: 1;
}

.serach_title{
	position: absolute;
	margin-left: 4px;
}

.serach_title > span{
	font-size: 0.8rem;
	color:#818181;
}

.search_input{
	flex-grow: 1;
}

.search_input > input{
	font-size:1.0rem;
	padding:0 0 0 45px;
	width: calc(100% - 2.1rem);
	border:none;
	background-color: #fff;
	border-radius:10px 10px 0 0;
	height:1.7rem;
}

.search_input_icon{
	width: 0px;
	position:relative;
	right:25px;
	top:0px;
	border: none;
	background-color: transparent;
	cursor: pointer;
}

.search_input_icon > span{
	cursor:pointer;
	font-size:0.9rem;
	color:#bcbcbc;
}


.exchange_button{
	position: relative;
	top:4px;
}

.exchange_button > img{
	height: 90%;
	width: auto;
	cursor: pointer;
}

.set_now_button{
	background-color: var(--red);
	color:#fff;
	border:none;
	border-radius:10px;
	height:1.7rem;
	width: 100%;
	height: 100%;
	font-size: 0.7rem;
	line-height: 0.72rem
}

.select_container{
	width: 100%;
	margin-top:20px;;
	display:flex; gap:2%;
}

.select_container > div{
	width: 49%;
}

.select_container > div > select:focus {
  outline: none;
}

.select_container > div > select{
	font-size: 1.0rem;
	width: 100%;
	height: 1.7rem;
	border:none;
	border-radius:5px;
	font-size: 0.95rem;
	background-color: #fff;
}

.suggest_area{
	position: relative;
	height:auto;
	overflow: auto;
	overflow: visible;
	margin-top:1px;
	width: calc(100% + 0px);
	height:0px;
	z-index:101;
}

.suggest_text{
	padding: 5px 10px;
	background-color: #fff;
	border: 1px solid #c8c8c8;
	border-top: none;
	cursor: pointer;
	border-radius:5px;
	display:block;
	z-index:100;
	cursor: pointer;
}

.suggest_text:hover{
	background-color:var(--red);
	color:#fff;
}

.serach_btn{
	width:100%;
	background-color:var(--brown);
	color:#fff;
	border:none;
	border-radius:10px;
	padding:0.3rem 0;
	font-size:1.2rem
}

#major_btn1{
	touch-action: none;
}
#major_btn2{
	touch-action: none;
}

#major_btn3{
	touch-action: none;
}

#major_btn4{
	touch-action: none;
}

.jr-btn{
	cursor:pointer;
	text-align: center;
	padding:5px 0;
	font-size:0.9rem;
	width: calc(50% - 2px);
	background-color: var(--red);
	color:#fff;
	border-radius: 0 0  0 10px;
}

.meitetu-btn{
	cursor:pointer;
	text-align: center;
	padding:5px 0;
	font-size:0.9rem;
	width: calc(50% - 2px);
	background-color: var(--red);
	color:#fff;
	border-radius: 0 0  10px 0 ;
}

/*============================
===  target
============================*/
.target_header{
	display: flex;
	align-items:flex-end;
	border-bottom: 4px solid rgba(227, 227, 226,1);
}

.target_cricle_img{
	height: 0.8rem;
	vertical-align:-6px;
	padding-right:5px
}

.target_title{
	font-size: 1rem;
	line-height: 1rem	
}

.target_txt_margin{
	margin: 10px 5px;
}

.target_txt_margin  > div {
	font-size:0.65rem;
}


/*============================
===  result
============================*/
.result_header{
	background-color: rgba(227, 227, 226,1);
	padding:10px;
	margin: 10px 0;
	border-radius:5px
}

.result_destination{
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 1rem;
}

.result_destination > div{
	font-size:0.7rem;
}

.result_destination > div > img{
	height: 18px;
	margin:auto 14px
}

.info_container {
	max-width: 400px; 
}

.info_row {
	display: flex;
	gap: 5px;
}

.info_key {
	width: 60px; 
	text-align: right; 
	font-size:0.6rem;
}

.info_separator {
	width: 10px; 
	text-align: center;
	font-size:0.6rem;
}

.info_value {
	flex-grow: 1; 
	font-size:0.7rem;
}



/*============================
===  result price table (標準表示 / 650px以上)
============================*/
.commuter_table {
	width: 100%;
	border-collapse: collapse; /* 罫線を重ねて表示 */
	border: 1px solid #ccc; /* テーブル全体の枠線 */
	font-size: 14px;
	line-height: 1.5;
}

/* セル（td）の基本的なスタイル */
td {
	padding: 10px 15px;
	border-left: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.header_row .price_header { 
	background-color: #f0f0f0; /* 薄いグレーの背景 */
	font-weight: bold;
	text-align: center; /* 中央揃え */
	border-bottom: 1px solid #ccc;
}

.category, 
.type {   
	background-color: #f9f9f9; /* やや薄い背景 */
	font-weight: bold;
	text-align: left; /* 左揃え */
	vertical-align: middle; /* 垂直方向中央揃え */
}

tr.second_row .price_data_no_rowspan { 
	font-weight: normal;
	text-align: right; 
	background-color: transparent; 
}

.price_data {
	text-align: right; 
	font-weight: normal;
	font-size:0.7rem;
}



/*==================================================
  result price モバイル表示（Max-width: 650px以下）用CSS (カード形式)
====================================================*/
@media screen and (max-width: 650px) {
	commuter_table, commuter_table > thead, commuter_table > tbody {
		display: block;
		width: 100%;
		border: none;
	}
	.commuter_table > thead {
		display: none;
	}
	
	.card_group tr td {
		display: block; 
	}
	.card_group tr, .card_group td {
		border: none;
	}
	
	.card_group {
		margin-bottom: 20px;
		padding: 0;
		border: 1px solid #ddd;
		display: grid;
		grid-template-columns: 1fr 1fr; /* 左右に2つの列を作成 */
	}
	
	.card_group::before {
		content: attr(data-header);
		display: block;
		grid-column: 1 / span 2; /* 2列全体に広げる */
		background-color: #333;
		color: white;
		padding: 5px 10px;
		font-size: 1.1em;
		font-weight: bold;
		text-align: center;
	}

	.card_group tr {
		width: auto;
		margin-top: 1px;
		border-top: 1px solid #eee;
		padding: 0;
		display: flex; /* tdを縦積みで制御 */
		flex-direction: column;
	}

	.card_group tr::before {
		content: attr(data-subheader); 
		display: block;
		background-color: #f8f8f8;
		padding: 5px 10px;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
	}
	
	.card_group tr:nth-child(even) { 
		border-left: 1px solid #ddd;
		border-right: none;
	}
	.card_group tr:nth-child(odd) { 
		border-right: 1px solid #ddd;
		border-left: none;
	}

	.card_group .price_data {
		position: relative;
		text-align: right; 
		border-bottom: 1px dashed #eee;
		font-weight: normal; 
		padding: 8px 15px; 
		flex-shrink: 0;	
	}
	
	.card_group td.category, 
	.card_group td.type {
		display: none; 
	}
	
	.card_group .price_data[data-label]::before {
		content: attr(data-label) ": ";
		position: absolute;
		left: 1px;
		top: 50%;
		transform: translateY(-50%); 
		width: 30%; 
		font-weight: normal;
		text-align: right;
		color: #555;
	}
	
	.mobile_margin{
		margin:0 5px;
	}
}

/*==================================================
  result txt
====================================================*/
.explanation{
	margin: 1rem 0rem;
}

.explanation > span{
	font-size:0.65rem;
}

.explanation > a {
	font-size:0.65rem;
	text-decoration: none;
	color:var(--red);
	font-weight: bold;
}

.inquiry{
	margin: 1rem 0;
}

.inquiry_border{
	border:1px solid #ccc;
	padding:10px
}

.inquiry_flex{
	display: flex;
}

.inquiry_img_warpper{
	margin:0 10px;
}

.inquiry_img_warpper > img{
	height: 2rem;
}

.inquiry_txt{
	padding-top:10px;
	font-size:0.65rem;
}