.handson_title{
	display: block ;
	width: 100% ;

	color: #00477F ;
	font-size: 18px ;
	font-weight: bold ;
	line-height: 40px ;
}


/* テーブル デフォルト */
.handson_tbl{
	border: 1px solid #f1b08d ;
	margin: 5px 0 10px 0 ;
	box-sizing: border-box ;
}
	.handson_tbl th,.handson_tbl td{
		border-right: 1px solid #f1b08d ;
		border-bottom: 1px solid #f1b08d ;
		padding: 4px 10px ;
		vertical-align: middle ;
	}

	.handson_tbl th{
		background: #fcf3e2 ;
		color: #e7793e ;
		text-align: left ;
        width: 15%;
	}
	.handson_tbl td{
		text-align: left ;
	}


	

/*----------*----------*----------*----------*----------*/
/* プログラムページ dl */
dl.handson_dl {
	font-weight: normal;
	color: #333 ;
	margin-bottom: 10px;
	}
		dl.handson_dl dt{
			width: 5.5em;
			float: left ;
			padding-right: 10px;
		}
		dl.handson_dl dd{
			margin-left: 5.5em;/* dtのwidth:と同じ値を設定することでインデントが揃う */
		}

/* プログラムページ dl */
dl.handson_dl2 {
	font-weight: normal;
	color: #333 ;
	margin-bottom: 10px;
	}
		dl.handson_dl2 dt{
			width: 10.5em;
			float: left ;
			padding-right: 10px;
		}
		dl.handson_dl2 dd{
			margin-left: 10.5em;/* dtのwidth:と同じ値を設定することでインデントが揃う */
		}





/*----------*----------*----------*----------*----------*----------*----------*----------*----------*----------*/
.answer_box {
	box-sizing: border-box ;
	padding: 20px 30px ;
	line-height: 1.9 ;
	background: #FFF9CE ;
}

/*----------*----------*----------*----------*----------*----------*----------*----------*----------*----------*/
/* アコーディオンでメッセージを表示 */
/*----------*----------*----------*----------*----------*----------*----------*----------*----------*----------*/
summary {
	border: solid 2px #df7c0a ;
	border-radius: 4px ;
	background: #FFF ;
	cursor: pointer ;
	list-style: none ;
	margin-bottom: 15px ;
	padding: 6px 10px ;

	box-shadow: 2px 2px 0 #c7c7c7 ;
	box-sizing: border-box ;

	position: relative ;

	color: #df7c0a ;
	font-size: 16px ;
	font-weight: bold ;
}

@media not all and (min-width: 768px){
	summary {
		padding: 10px ;
	}
}

summary::-webkit-details-marker {
	display: none;
}
summary:hover, details[open] summary { /* ボックスが開いた時 */
	background: #FFF9CE ;
	color: #df7c0a ;
}

summary::after { /* 十字アイコン設定 */
	content: '\f078' ;
	font-family: FontAwesome ;
	font-size: 20px ;

	position: absolute ;
	top: 50% ;
	right: 15px ;

	transform: translateY(-50%) ;
	transition: transform 0.5s ;
}

details[open] summary::after {
	transform: translateY(-50%) rotate(180deg) ;
}