﻿@charset "utf-8";
/* *** カレンダー *** */
.calendar_table {
	width: 100%;
	margin: auto;
	margin-top: 20px;
	table-layout: fixed;
	border-spacing: 0;
	border: 1px solid #ddd;
}

/* *****カレンダーヘッダーstyle ***** */
.calendar_table tbody th {
	padding-bottom: 4px;
	color: #303333;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 19px;
	font-weight: normal;
}
.calendar_table tbody tr:first-child{
	background: #e6f3fb;
}
.calendar_table th.sunday {
	color: #d50f61;
}
.calendar_table th.saturday {
	color: #006bb3;
}
.calendar_table tbody tr:first-child th{
	padding-top: 10px;
	border-left: 1px solid #cecece;
}
.calendar_table tbody tr:first-child th:first-child{
	border-left: 0px;
}

/* *****カレンダーコンテンツstyle ***** */
.calendar_table td {
	/*height: 120px;*/
	height: 95px;
	border-top: 1px solid #cecece;
	border-left: 1px solid #cecece;
	position: relative;
}
.calendar_table.tr_max td {
	height: 80px;
}
.calendar_table td:first-child {
	border-left: 0;

}
.calendar_table tr:last-child td {
	/*border-bottom: 1px solid #cecece;*/

}
.calendar_table .calendar_date {
	/*width: 40px;
	height: 40px;*/
	border: none;

	text-align: center;
	color: #303333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", sans-serif;
	/*font-size: 25.5px;
	line-height: 40px;*/

	/*position: absolute;
	top: 4px;
	left: 4px;*/

	display: block;
	position: relative;
	font-size: 15px;
	width: 20px;
	height: 20px;
	line-height: normal;
	top: 0px;

}
.calendar_table td.sunday .calendar_date {
	color: #d50f61;
}
.calendar_table td.saturday .calendar_date {
	color: #006bb3;
}
.calendar_table td.national_holiday .calendar_date {
	color: #d50f61;
}

/* *****カレンダーアイコンstyle ***** */
.placement{
	position: absolute;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.placement img{
	width: 100%;
	vertical-align: middle;
}

/*************************************************************************************/
/*ヘッダーテーブル*/

.table_header-line{
	border: 1px solid #cdcdcd;
    border-bottom: 0px;
}

.table_header{
	max-width: 1080px;
    width: 100%;
	/*width: calc(100% - 17px);*/
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
	border-bottom: 1px solid #cecece;
}

.table_header.total_fee{
	border-bottom:0px;
}
.table_header thead th{
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #7f7f80;
	padding: 0px 10px;
	padding-top: 10px;
	padding-bottom: 6px;
    border-right: 1px solid #cecece;
}
.table_header thead th:last-child{
	border-right: 0px;
}

/* *** 入力テーブル *** */
.input_table {
	width: 100%;
	max-width: 1080px;
	/*margin: auto;*/
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
}
.input_table td {
	color: #221814;
	padding: 0px 15px;
	font-size: 18px;
	text-align: center;
	height: 65px;

	position: relative;
	border-top: 1px solid #cecece;
    border-left: 1px solid #cecece;
}
.input_table tbody tr:first-child td{
	border-top: 0px;
}
.input_table td:first-child{
	border-left: 0px;
}

.sort_img{
	width: 14px;
	margin-left: 5px;
}

/* *** スクロール関係 *** */
.scroll_bar_hidden{
	width: calc(100% + 17px);
	overflow-y: scroll;
	overflow-x: hidden;
	box-sizing: initial;
}

.table_scroll_box{
    max-width: 1080px;
    overflow-x: hidden;
    overflow-y: hidden;
    border: 1px solid #cecece;
    border-top: 0px;

}

/*サイズ&テキスト位置*/
table.table_header thead tr th:nth-child(1),table.input_table tbody tr td:nth-child(1){	width: 30%; }
table.table_header thead tr th:nth-child(2),table.input_table tbody tr td:nth-child(2){	width: 11%; }
table.table_header thead tr th:nth-child(3),table.input_table tbody tr td:nth-child(3){	width: 11%; }
table.table_header thead tr th:nth-child(4),table.input_table tbody tr td:nth-child(4){	width: 15.26%; }
table.table_header thead tr th:nth-child(5),table.input_table tbody tr td:nth-child(5){	width: 13%; }
table.table_header thead tr th:nth-child(6),table.input_table tbody tr td:nth-child(6){	width: 13%; }
table.input_table tbody tr td:nth-child(1){	text-align: left; }
table.input_table tbody tr td:nth-child(2){	text-align: right; }
table.input_table tbody tr td:nth-child(3){	text-align: right; }
table.input_table tbody tr td:nth-child(4){	text-align: right; }
table.input_table tbody tr td:nth-child(5){	text-align: right; }
table.input_table tbody tr td:nth-child(6){	text-align: right; }

/*入力関係*/
table.input_table input{
	max-width: 80px;
	width: 100%;
    height: 40px;
    border: 1px solid #cecece;
    margin-right: 10px;
    padding: 5px;
    font-size: 17px;
    text-align: right;
    color: #221814;
}

.err{
	border: 2px solid #e5001f !important;
}

/*合計金額*/
.table_header-line.total_fee{
	border: 0;
	border-top: 0px;
	border-left: 1px solid transparent;
    border-right: 1px solid #cecece;
}

table.table_header.total_fee thead tr th:nth-child(1),
table.table_header.total_fee thead tr th:nth-child(2),
table.table_header.total_fee thead tr th:nth-child(3),
table.table_header.total_fee thead tr th:nth-child(4){
	border-right: 1px solid transparent;
}

table.table_header.total_fee thead tr th:nth-child(6){
	color: #221814;
    padding: 15px 5px;
    font-size: 17px;
	position: relative;
    text-align: right;
}
table.table_header.total_fee thead tr th:nth-child(6) span{
	color:#7f7f80;
	font-size: 15px;
	position: absolute;
    left: 10px;
}
.total_hr{
	border: 0;
    border-top: 1px solid #cecece;
    position: absolute;
    left: 0;
    bottom: -1px;
    /*width: calc(100% + 17px);*/
    width: 100%;
}


/*****************************************************************************************************/
/*マイページtable*/

table.table_header.my_page thead tr th:nth-child(1),table.input_table.my_page tbody tr td:nth-child(1){ width: auto; }
table.table_header.my_page thead tr th:nth-child(2),table.input_table.my_page tbody tr td:nth-child(2){ width: 30%; }
table.table_header.my_page thead tr th:nth-child(3),table.input_table.my_page tbody tr td:nth-child(3){ width: auto; }
table.table_header.my_page thead tr th:nth-child(4),table.input_table.my_page tbody tr td:nth-child(4){ width: auto; }
table.input_table.my_page tbody tr td:nth-child(1){	text-align: center; }
table.input_table.my_page tbody tr td:nth-child(2){	text-align: center; }
table.input_table.my_page tbody tr td:nth-child(3){	text-align: center; }
table.input_table.my_page tbody tr td:nth-child(4){	text-align: center; }

table.input_table.my_page input.yen{
	max-width: 200px;
	width: 100%;
}

/* IE表示用のCSS　*/
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
    .selector {
        property: value;
    }
	/* IE向けのCSS～START */
	.table_scroll_box{
		box-sizing:content-box;
	}
	.placement{
		transform:translate(-50%, 0%);
		top: 18px;
	}
	/* IE向けのCSS～END */
}


/* ＊＊＊＊＊＊＊＊＊＊＊　2020/09/30 マイページ金額入力欄非表示（状況に応じてコメントアウトしてください。）＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　 */
/*table.table_header.my_page thead tr th:nth-child(2), table.input_table.my_page tbody tr td:nth-child(2) {
	display: none !important;
}*/


/*マッチング*/
.track_group_contents{
	display: flex;
	flex-direction: column;
	height: 100%;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}

.track_group_icon{
    display: block;
    width: 95%;
    border-radius: 10px;
    color: #fff;
    text-align: left;
    padding: 1px 8px;
    line-height: normal;
    font-size: 12px;
	margin: 3px 0px;
}

.track_group_icon.icon_kumiai{
    background: #00a1d5;
}
.track_group_icon.icon_charter{
	background: #f5a4a4;
}

@media (max-width: 1366px){

}

@media screen and (max-width: 1080px) {
	.table_scroll_box{
		width: 100%;
		padding-right: 0px;
	}
	table.input_table input{ /*台数入力で使用しています。*/
		max-width: 57px;
		font-size: 16px;
		height: 35px;
	}
	.table_scroll_box{
		width: 100%;
    	padding-right: 0px;
	}
	.scroll_bar_hidden{
		width: 100%;
	}
	.table_header,
	.total_hr{
		width: 100%;
	}
	table.input_table.my_page input.yen{
		width: 75%;
	}
	.table_header thead th{
		font-size: 14px;
		padding: 5px;
	}
	.input_table td{
		font-size: 16px;
		height: 50px;
	}
	.calendar_table .calendar_date{
		font-size: 20px;
		top: -3px;
	}
	.calendar_table tbody tr:first-child th {
    	padding-top: 4px;
	    font-size: 16px;
    }

	table.table_header.total_fee thead tr th:nth-child(6) span{
		position: static;
    	display: block;
    	text-align: left;
	}
}

@media screen and (max-width: 810px){
	.input_table td{
		padding: 0px 5px;
	}
}

@media screen and (max-width: 768px) {
	.calendar_padding_box{
		padding: 20px;
	}
	.input_table td{
		/*font-size: 16px;*/
		font-size: 14.5px;
	}
	table.table_header thead tr th:nth-child(1), table.input_table tbody tr td:nth-child(1){
		/*width: 30%;*/
		width: 22%;
	}
	.calendar_table .calendar_date{
		font-size: 19px;
		height: 26px;
		line-height: 26px;
	}
	.calendar_table .calendar_date{
		top: 0px;
	}
}

@media screen and (max-width: 480px) {
	.calendar_table .calendar_date{
		font-size: 16px;
	}
	.calendar_table td{
		height: 90px;
	}
	.placement{
		top: 60%;
	    left: 48%;
	}

	table.input_table input{
		width: 60%;
		height: 30px;
		font-size: 13px;
		margin-right: 5px;
	}
	.input_table td{
		font-size: 14px;
		padding: 0px 5px;
	}
	.table_header thead th{
		font-size: 15px;
		padding: 0px 5px;
	}

	table.table_header thead tr th:nth-child(1), table.input_table tbody tr td:nth-child(1){
		width: 15%;
	}


	/* *** table横並びstyle *** */
	.table_scroll_box{
		border: 0px;
	}
	.smart_table {
	    width: 100% !important;
  	}
	.smart_table tr {
		width: 100% !important;
		display: block;
	    margin-top: 8px;
	}
	.smart_table td,
	.smart_table th {
		display: block !important;
		text-align: left !important;
		width: 100% !important;
		height: auto;
		padding: 0;
	    font-size: 15px;
		background: #fff;
		border: 1px solid #cecece;
		border-bottom: 0px;
	}
	.smart_table td:first-child,
	.smart_table th:first-child {
		height: auto;
		line-height: 30px;
	}
	.smart_table td:last-child{
		border-bottom: 1px solid #cecece;
	}
	.input_table.smart_table tbody tr:first-child td {
    	border: 1px solid #cecece;
		border-bottom: 0px;
	}
	.input_table.smart_table tbody tr:first-child td:last-child{
		border-bottom: 1px solid #cecece;
	}
	.input_table.smart_table td:first-child{
		border-left: 1px solid #cecece;
	}

	.smart_table tr.color_first td{ background: #fff9b0;}
	.smart_table tr.color_second td{ background: #fadce8;}
	.smart_table tr.color_third td{ background: #d4ebea;	}
	.smart_table tr.color_four td{ background: #fdebd1;	}
	.smart_table tr.color_five td{ background: #dcddfa;	}

	.smart_table tr td:before,
	.smart_table tr th:before {
		content: attr(data-label);
		float: left;
		width: calc(40% - 8px);
		text-align: center;
		padding: 2px;

		line-height: 1;
		position: absolute;
		top: 50%;
		left: 21%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.smart_table tr td span,
	.smart_table tr th p {
		float: right;
		width: calc(60% - 8px);
		text-align: left;
		border-left: 1px solid #cecece;
		background: #fff;
		padding: 5px;
		font-size: 16px;
	}
	.smart_table tr td.td_input span span{
		float: unset;
	    border-left: 0px;
	    width: auto;
	    background: unset;
	    padding: 0px;
	}
	table.table_header.total_fee thead tr th:nth-child(1),
	table.table_header.total_fee thead tr th:nth-child(2),
	table.table_header.total_fee thead tr th:nth-child(3),
	table.table_header.total_fee thead tr th:nth-child(4),
	table.table_header.total_fee thead tr th:nth-child(5){
		display: none !important;
	}
	table.table_header.total_fee thead tr th:nth-child(6){
		padding: 0px;
    	border: 0px;
	}
	table.table_header.total_fee thead tr th:nth-child(6) p{
		padding: 5px;
		border: 1px solid #cecece;
	}
	.total_hr{
		display: none;
	}
	table.table_header.total_fee thead tr th:nth-child(6) p span{
		display: inline-block;
	}


	/* CLEAR FIX */
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	* html .clearfix             { zoom: 1; } /* IE6 */
	*:first-child+html .clearfix { zoom: 1; } /* IE7 */


}

@media screen and (max-width: 375px) {

}

@media screen and (max-width: 360px) {

}

@media screen and (max-width: 320px) {
	.table_header thead th{
		font-size: 13px;
	}
	.input_table td{
		font-size: 13px;
	}
	table.input_table input{
		font-size: 12px;
	}
}
