﻿/*-----------------------*/
/* 20240318 試験情報・   */
/* 採用試験の重要情報の  */
/* デザイン              */ 
/*-----------------------*/

/*-----------------------*/
/* 共通                  */
/*-----------------------*/

/* 見出しの下の注意事項 */

div.caution{
	text-align: left;
	font-weight: bold;
	font-size: 100%;
	color: #e8383d;
	padding-bottom: 1em;
	margin-bottom: 1em;
}

/* リストの下の注意事項 */

div.caution2{
	margin-top: -1em;
	margin-left: 1em;
}

/* 見出し：項目 */

h1.normal{ 	
	padding: 0;
	margin: 0 0.25em 1.0em 0.25em;
	text-align: center; 
	color: #2b2b2b;
}


h2.normal{ 
	height-min:2.5em;
	margin-top: 2em;
	padding: 0.5em 0;
	text-align: center;
	background-color: #9dc3e6; 
	border-width: 0; 
	color: #2b2b2b;
}

/* 見出し：小項目 */
h3.normal{
	height-min:2em;
	padding: 0.25em 0 0.25em 1em;
	background-color: #deebf7; 
	color: #2b2b2b;
}

/* 内容 */

dt.kubun{
	padding-left: 1em;
	font-weight: bold;
}

dd.ind_hang{
	text-indent: -1em; 
	padding-left: 1em;
}

dd.ind_hang2{
	text-indent: -3em; 
	padding-left: 3em;
}

dd.ind_normal{
	text-indent: 1em;
}


/* 箇条書き */

li.first{
	list-style-type: none;
	position: relative;
	padding-left: 2em; 
} 

li.first:before {
	content: "■"; 
	position: absolute; 
	left: 0; top: 0;
	 color: #75A9FF;
}

ul.second{
	margin-left: 1em;
	margin-top:-1em;
}

li.second{
	list-style-type: none;
	position: relative;
	padding-left: 2em; 
} 

li.second:before {
	content: "・"; 
	position: absolute; 
	left: 0; top: 0;
	 color: #75A9FF;
}


/* 日程表 */

table.schedule{ 
	margin-top: 2rem;
	border: solid 2px #c9c9c2; 
	border-collapse: collapse; 
	font-size: 100%;
}

th.schedule{ 
	text-align: 
	left; padding: 0.5rem; 
	border: solid 1px;
	border-color: #c9c9c2; 
	background-color: #c6e2ff;
	color: #2b2b2b;
} 

td.schedule{ 
	padding: 0.5rem; 
	border: solid 1px;
	border-color: #c9c9c2;
} 

/* ボタン様式 */

a.btn{
	width: 200px;
	height: 4em;
	line-height: 1.0;
	position: relative;
	display: inline-block;
	padding: 1.5em 2em;
	cursor: pointer;
	user-select: none;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #2b2b2b;
	border: 1px solid #264af4;
}

a.btn-border{
	border-radius: 4px;
	background: #fff;
}

/* ボタンの右の矢印 */
a.btn::after{
	content:"→";
	right: 1em;
	position: absolute;
}


/*-----------------------*/
/* パソコン用            */
/*-----------------------*/

@media screen and (min-width:481px){

	/* ボタン様式 （マウスポインタが重なったとき）*/
	/* スマホでタッチしたときには戻らないのでＰＣのみ */
	a.btn-border:hover{
		background: #e8f1fe;
	}

	/* お知らせ欄の日付と内容を横一列 */
	dt.info{
		padding-left: 2em;
		float: left;
	}

	dd.info {
		padding-left: 12em;
		margin-bottom: 1em;
	}

	div.inner{ 
		display: flex; 
		justify-content: space-between; 
		flex-direction: row;
	}

	div.inner_ind{ 
		display: flex; 
		flex-direction: row;
	}

	div.result{
		padding-right: 2em;
	}

}

/*---------------------*/
/*スマートフォン用     */
/*---------------------*/

@media screen and (max-width: 480px){

	/* 文字を大きくする　　  */
	a.btn{
		font-size: large;
	}
	
	/* ボタンの枠の下にすき間*/
	a.btn-border{
		margin: 0.25em 0;
	}

	/* お知らせ欄の日付の色を変更 */
	dt.info{
		margin-top: 1em;
		padding-left: 1em;
		color: #e8383d;
		font-weight: bold;
	}

	dd.ind_info{
		text-indent: -1em; 
		padding-left: 1em;
	}

	div.button{ 
		width: 100%;
	}

	dl div.button{ 
		width: 100%;
	}

	a.btn-ps{ 
		width: auto;
    		margin-bottom: 0.25em;
	}

	div.inner{ 
		display: flex; 
		flex-direction: column; 
	}

	div.inner_ind{ 
		display: flex; 
		flex-direction: column; 
	}

	div.result{
		padding-bottom: 1em;
	}

	/* 上に戻るボタンを常時表示 */
	a.c-back-to-top.c-back-to-top--square.c-back-to-top--blue{
		position: fixed;
		bottom: 1em;
		right: 1em;
		width: 60px;
		height: 60px;
		background: rgba(255,255,255,0.5);
		border: 2px solid #bbb;
		border-radius: 50%;
		display: inline-block;
		text-decoration: none;
		z-index: 99999;
	}
	a.c-back-to-top.c-back-to-top--square.c-back-to-top--blue::before{
		content: '';
		display: block;
		position: absolute;
		width: 1em;
		height: 1em;
		top: 1.5em;
		left: 1.3em;
		border: 5px solid;
		border-color: #bbb #bbb transparent transparent;
		transform: rotate(-45deg);
	}
	svg.c-back-to-top__icon{
		display: none;
	}
}
