@charset "utf-8";
/* CSS Document */

.introduction {
	width:90%;
	margin:0 auto;
}
.guidelines {
	width:70%;
	margin:0 auto;
	border:1px dotted #CCC;
	padding:20px;
	display:table;
}
.guidelines h2{
	font-size:150%;
	display:table-cell;
	vertical-align:middle;
}
.guidelines .small{
	font-size:100%;
	padding-right:5px;
	color:#390;
}
.guidelines ul{
	display:table-cell;
	padding-left:30px;
	border-left:1px solid #CCC;
}
/* dl */
section .dlarea{
	margin:50px 0;
}
section dl{
	display:table;
	width:85%;
	margin:0 auto 20px;
	border-bottom:1px solid#E7E7E7;
}

section dl dt{
	display:table-cell;
	width:20%;
	padding:10px;
	vertical-align:top;
	font-size:135%;
}
section dl dd{
	width:80%;
	display:table-cell;
	padding:10px 20px;
	border-left:1px solid#E7E7E7;
	vertical-align:top;
}
section dl dd ul li{
	padding-left:20px;
	position:relative;
	margin-bottom:10px;
}
section dl dd ul li:before{
	content:"・";
	position:absolute;
	top:0;
	left:0;
}
section .chart{
	display:table;
	width:95%;
	margin:30px auto 0;
}
section .chart .left{
	display:table-cell;
	vertical-align:top;
	padding-top:10px;
	padding-right:20px;
}
section .chart ul li {
	text-indent: -1em;
	margin-left: 1em;
}
section .toiawase{
	margin:10px auto 30px;
	border:1px solid #CCC;
	padding:10px 15px;
	width:95%;
}
section .chart .right {
	display:table-cell;
}
section .chart .right img{
	width:100%;
	max-width:400px;
	margin:0 auto;
}
section .chart .right h2{
	font-size:100%;
	text-align:center;
	margin:10px 0;
	line-height:1.5;
}
section .other {
	margin-top:30px;
	border-top:1px dotted #CCC;
}
section .other h3 {
	font-size:100%;
	font-weight:bold;
	margin-bottom:10px;
}
section .other li {
	font-size:95%;
}
section .bookimg {
	width:15%;
	float:right;
	margin:0 0 10px 10px;
}
section .bookimg img{
	width:100%;
}
@media (min-width:768px){ 
/*-----------------PC---------------------------------*/

}
@media (max-width:767px) {
/*---------------スマホ-------------------------------*/
.guidelines {
	width:95%;
	margin:0 auto;
	border:1px dotted #CCC;
	padding:15px;
	display:table;
}
.guidelines h2{
	font-size:120%;
	display:table-cell;
	vertical-align:middle;
	padding-right:10px;
}
.guidelines ul{
	display:table-cell;
	padding-left:20px;
	border-left:1px solid #CCC;
}
.guidelines ul li{
	text-indent:-1em;
	margin-left:1em;
}
section .chart{
	display:block;
	width:95%;
	margin:10px auto 0;
}
section .chart .left{
	display:block;
	padding:0 0 20px;
}
section .chart ul li {
	
}
section .toiawase{
	margin:10px auto 30px;
	border:1px solid #CCC;
	padding:10px 15px;
	width:95%;
}
section .chart .right {
	display:block;
}
section .chart .right img{
	width:100%;
	max-width:400px;
}
section .chart .right h2{
	font-size:100%;
	text-align:center;
	margin:10px 0 20px;
	line-height:1.5;
}
/* dl */
section .dlarea{
	margin:30px 0;
}
section dl{
	display:block;
	width:95%;
	margin:0 auto 20px;
	border-bottom:1px solid#E7E7E7;
}

section dl dt{
	display:block;
	width:100%;
	padding:5px 10px;
	vertical-align:top;
	background:#E2E2E2;
	border-radius:5px;
	font-size:110%;
}
section dl dd{
	width:100%;
	display:block;
	padding:10px 5px;
	border-left:none;
	vertical-align:top;
}
section .bookimg {
	width:25%;
}
}