.span1{
	display: inline-block;
}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
.dispatch header {
	position: relative;
    padding: 0px;
}

.dispatch header h2{
	white-space: nowrap;
}

.dispatch header .block {
	position: relative;
	width        : 40%;
	height       : 350px;
	background   : linear-gradient(to left, #6091d3, #0059b3);
	z-index: 2;
}

.dispatch header img{
	position: relative;
	right: 0px;
	width: 60%;
	height: 350px;
    z-index: 1;
}

.dispatch header .block h2 {
	margin-top: 12%;
	margin-left: 21%;
	color: #ffffff;
	font-size: 300%;
	letter-spacing:1.5em;
}

.dispatch header .block h3 {
	margin-left: 32%;
	color: #ffffff;
	font-size: 100%;
	letter-spacing:1.5em;
}

#dispatch h2 {
	left: 0;
	right: 0;
	margin: auto;
	bottom: 23%;
	color:#ffffff;
	text-shadow: 0px 0px 5px #000000, 0px 0px 20px #000000, 0px 0px 40px #000000, 0px 0px 60px #000000, 0px 0px 80px #000000, 0px 0px 100px #000000;
}

#dispatch h2 .absolute {
	position: absolute;
}

#dispatch .relative img {
	margin: 0 auto;
    margin-bottom: 15px;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.dispatch #contents .headtext h3{
	border: none; 
	text-align: center;
}

.dispatch #contents .headtext .yeartext{
	text-align: left;
	padding-left: 10%;
	margin-bottom: 10px;
}

.dispatch #contents .headtext p{
	border: none; 
	text-align: right;
	padding-right: 10%;
}

.dispatch #contents .graybox {
	position: relative;
	padding: 0.5em 1em;
    margin: 0 auto;
	margin-bottom: 3%;
    font-weight: bold;
	background:#F5F5DC;
	color: #000;
    width: 78%;
}

.dispatch #contents .graybox img {
    width: 1%;
    height: 25%;
	padding-top: 0.9%;
}

.dispatch #contents .graybox h2 {
    font-size: 200%;
    margin-bottom: 10px;
}

.dispatch #contents .graybox h3 {
    border-bottom: none;
    margin-bottom: 10px;
}

.dispatch #contents .graybox p {
    border-bottom: 1px dashed #999;
    padding-bottom: 1%;
    margin-bottom: 2%;
}

.dispatch #contents .graybox .education p{
    border-bottom:none;
}

/*ta1テーブル*/
.dispatch .ta1 {
	width: 80%;
	table-layout: fixed;
    margin: 0 auto;
	margin-bottom: 30px;
	background: #ffffff;	/*背景色*/
}

.dispatch .ta1, .ta1 td, .ta1 th {
	border-bottom: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
	word-break: break-all;
	font-size: 120%;
}

.dispatch .ta1 td{
    border-left: none;
}

/*左側ボックス*/
.dispatch .ta1 th {
	width: 60%;	/*幅*/
	text-align: left;
	font-weight: normal;
}

/*ta2テーブル*/
.dispatch .ta2 {
	width: 80%;
	table-layout: fixed;
    margin: 0 auto;
	margin-bottom: 30px;
	background: #ffffff;	/*背景色*/
	border: 1px solid #ccc;
}

.dispatch .ta2, .ta2 td, .ta2 th {
	border-bottom: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
	word-break: break-all;
	font-size: 120%;
	border-right: 1px solid #ccc;
}

.dispatch .ta2 th {
	font-weight: normal;
	position: relative;
	background:#F5F5DC;
}

.dispatch .ta2 th:before {
	content: '';                /* 擬似要素に実体を持たせる */
	width: 100%;                /* 二重線の下の線になる要素の幅を指定する */
	height: 1px;                /* 線を表示させるために1pxだけ高さを入れる */
	border-bottom: 1px solid #ccc;   /* 二重線の下の線になる一本線の枠線をひく*/
	position: absolute;         /* 二重線の下の線の位置を自由に動かせるようにする */
	left: 0px;                 	/* 二重線の下の線の位置を、内側の線の左に揃える */
	bottom: 10%;
}

.dispatch .ta2 .th3 {
	width: 13%;
}

.dispatch .ta2 .th4 {
	width: 15%;
}

.dispatch .ta2 .th5 {
	width: 13%;
}

.dispatch .ta2 td {
	text-align: center;
}


.dispatch .refine-flex {
	display: flex;
	justify-content: center;
}

.dispatch .refine-flex h3 {
	text-align: left;
}

.absolute {
    position: absolute;
}

@media screen and (max-width:1024px) {
	.span1 {
		display: inline;
	}

	.span2 {
		display: inline-block;
	}

	/*ヘッダー
	---------------------------------------------------------------------------*/
	.dispatch header .block {
		width        : 40%;
		height       : 250px;
	}

	.dispatch header img {
		right: 0px;
		width: 60%;
		height: 250px;
	}

	.dispatch header .block h2 {
		margin-top: 14%;
		margin-left: 15%;
		font-size: 300%;
		letter-spacing:0.5em;
	}

	.dispatch header .block h3 {
		margin-left: 17%;
		font-size: 100%;
		letter-spacing:1.5em;
	}
	
	#dispatch .relative img {
		height: 100px;
	}

	#dispatch h2 {
		font-size: 230%;
        bottom: 23%;
	}

	.dispatch #contents h3 {
		padding-left: 0;
	}

	.dispatch #contents .graybox {
        width: 77%
    }

	.dispatch .ta2 .th2 {
		width: 23%;
	}

	.dispatch .ta2 .th3 {
		width: 11%;
	}
	
	.dispatch .ta2 .th4 {
		width: 13%;
	}
	
	.dispatch .ta2 .th5 {
		width: 11%;
	}
}

@media screen and (max-width:800px) {
	.span2 {
		display: inline;
	}

	.span3 {
		display: inline-block;
	}

	/*ヘッダー
	---------------------------------------------------------------------------*/
	/*ヘッダーブロック*/
	.dispatch header .block {
		width        : 40%;
		height       : 280px;
	}

	.dispatch header img {
		right: 0px;
		width: 60%;
		height: 280px;
	}

	.dispatch header .block h2 {
		margin-top: 27%;
		margin-left: 14%;
		font-size: 250%;
		letter-spacing:0.5em;
	}

	.dispatch header .block h3 {
		margin-left: 18%;
		font-size: 100%;
		letter-spacing:1.0em;
	}
	
	#dispatch .relative img {
		height: 80px;
	}

	#dispatch h2 {
		font-size: 230%;
        bottom: 15%;
	}

	.dispatch #contents .graybox {
        width: 90.7%;
    }

	.dispatch #contents table {
		width: 95%;
	}
	
	.dispatch .ta2 .th1 {
		width: 31%;
	}

	.dispatch .ta2 .th3 {
		width: 12%;
	}
	
	.dispatch .ta2 .th4 {
		width: 14%;
	}
	
	.dispatch .ta2 .th5 {
		width: 11%;
	}

}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px) {
	.span3 {
		display: inline;
	}

	.span4 {
		display: inline-block;
	}

	/*ヘッダー
	---------------------------------------------------------------------------*/
	/*ヘッダーブロック*/
	.dispatch header {
		position: relative;
		padding: 0px;
	}

	.dispatch header h2{
		white-space: nowrap;
	}

    .dispatch header .block h3 {
		margin-left: 18%;
		color: #ffffff;
		font-size: 100%;
		letter-spacing:0.5em;
	}

	.dispatch header .block {
		position: relative;
		width        : 40%;
		height       : 150px;
		background   : linear-gradient(to left, #6091d3, #0059b3);
		z-index: 2;
	}

	.dispatch header img{
		position: relative;
		right: 0px;
		width: 60%;
		height: 150px;
		z-index: 1;
	}

	.dispatch header .block h2 {
		margin-top: 30%;
		margin-left: 13%;
		color: #ffffff;
		font-size: 180%;
		letter-spacing:0.5em;
	}

    #dispatch .relative img {
		height: 80px;
	}
	
	#dispatch .relative h2 {
		font-size: 230%;
        bottom: 25%;
	}

	.dispatch #contents .headtext .yeartext{
		font-size: 110%;
		padding-left: 3%;
	}

	.dispatch #contents .headtext p{
		padding-right: 3%;
	}

    .dispatch #contents .graybox h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .dispatch #contents .graybox h3 {
        font-size: 150%;
        margin-bottom: 10px;
    }

    .dispatch #contents .graybox {
        width: 88.5%;
		margin-bottom: 5%;
    }

    .dispatch #contents h2 span{
        font-size: 20px;
    }

	.dispatch .ta1{
		width: 94%;
	}

	.dispatch .ta1 th {
		width: 61%;	/*幅*/
	}

	.table-scroll {
        overflow: auto;
		width: 94.5%;
		padding-left: 3%;
    }

	.dispatch #contents .ta2 {
		width: 150%;
	}

	.dispatch #contents .ta2 td {
		font-size: 90%;
	}

	.dispatch .ta2 .th1 {
		width: 68%;
	}

	.dispatch .ta2 .th2 {
		width: 44%;
	}

	.dispatch .ta2 .th3 {
		width: 30%;
	}
	
	.dispatch .ta2 .th4 {
		width: 34%;
	}
	
	.dispatch .ta2 .th5 {
		width: 30%;
	}
}