html, body {
	font-size : 100%;
	font-style : normal;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	line-height : 120%;
	color : #333333;
	text-align : center;
	margin : 0;
	padding : 0;
}

div#header {
	margin : 0;
	width : 100%;
	height : 92px;
	text-align : center;
	background-image : url("images/header-margin.jpg");
	background-repeat : repeat-x;
}

div#header div {
	margin : auto;
	max-width: 1028px;
	width : 100%;
	height : 92px;
	background-image : url("images/header.jpg");
	background-repeat: no-repeat;
}

div#footer {
	border-bottom : solid 4px #8cbd3f;
	margin : 48px auto;
}

div#container  {
	margin : auto;
	/* width : 97vw; */
	max-width: 900px;
	text-align : left;
}

div#title {
	margin : auto;
	margin : 24px 0px 0px 0px;
	text-align : left;
	padding : 0px 0px 6px 12px;
	border-bottom : solid 4px #b4e169;
	font-size : 13pt;
	font-weight : bold;
}

div.message {
	margin: 8px 24px 8px 12px;
	color : #990000;
	font-weight : bold;
}

div#back-button {
	margin : 36px auto 0px auto;
}

div.back {
	background-image : url("images/button-history-back.jpg");
	background-repeat : no-repeat;
	width : 150px;
	height : 42px;
	border : 0;
	margin:auto;
}

/*--------------------------------------*/
/*top.aspで使用*/
/*--------------------------------------*/
.akisearch-bt {
	background:url('images/button_aki_search.jpg') no-repeat 0 40%;
	font-size:100%;
	font-weight:bold;
	border:0 none;
	width:152px;
	height:155px;
	cursor:pointer;
	}

.shisetuannai-bt {
	background:url('images/button_shisetsu_annai.jpg') no-repeat 0 40%;
	font-size:100%;
	font-weight:bold;
	border:0 none;
	width:152px;
	height:155px;
	cursor:pointer;
	}
	
.haikei2-bt {
	background:url('images/haikei_2.jpg') no-repeat 0 40%;
	font-size:100%;
	font-weight:bold;
	border:0 none;
	width:150px;
	height:40px;
	cursor:pointer;
	margin: 0 10px;
	color:#FFFFFF;
	}

#navi {
	text-align:center;
	margin: 0 auto 40px auto;
	max-width: 550px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	}
#navi input {
	margin-top:50px;
}
#navi img {
	margin: 0px 20px;
	}	
#overview {
	display: flex;
	justify-content: center;
	text-align: center;
}
.f-red { color:#FF3300;	}

.top-message {
	max-width:700px;
	margin:0px auto 10px auto;
	padding: 0 25px;
	text-align:left;
	font-size : 80%;
	}

#new {
	text-align:center;
	max-width:800px;
	margin:0px auto 15px auto;
	padding:0 0 5px 0;
	border-bottom:solid #b4e169 3px;
	}

#new ul {
	margin:10px;
	padding:0px ;
	text-align:left;
	list-style-image:url('../image/05.gif');
	}

#new ul li {
	margin-left:10px ;
	}

#new h3 {
	margin:0px;
	text-align:left;
	position:relative;
	border-bottom:2px solid #b4e169;
	background:url('new-title_bg.gif') no-repeat 2% 50%;; padding-left:80px; padding-right:0; padding-top:8px; padding-bottom:8px
	}

#new h2 {
	margin:0px;
	text-align:left;
	position:relative;
	border-bottom:3px solid #b4e169;
	}

#new a.new-bt{
	font-size:85%;
	padding:0 5px;
	background: #f5dc67 ;
	border:solid #ceb300 2px;
	position:absolute;
	top:8px;
	right:0px;
	}

.kiyaku-message {
	text-align:center;
	font-size : 80%;
	margin:auto 20px;
	}


/*---contents---*/

#conts {
	max-width: 900px;
	width:100%;
	margin: 0 auto;
	border-top:1px solid #fff;
	background:url('bg-gray2.gif') repeat-x top;
	text-align:center
	}

#conts-body {
	width:100%;
	margin: 20px auto;
	text-align:left;
	}

#conts-body p{
	margin: 7px 0;
	}
	
/*ページタイトル*/
#conts .title{
	color:#2e1b0a;
	font-size:105%;
	margin: 5px 0 0 0;
	padding: 8px 0 2px 10px;
	float:left;
	}

#conts .usertools{
	color:#333333;
	text-align:right;
	font-size:90%;
	margin: 5px 0 0 0;
	padding: 2px 0 2px 10px;
	line-height:100%;
	height : 30px;
	}

.message {
	display:block;
	border-top: solid #b4e169 4px;
	padding: 7px 0 2px 10px;
	color:#990000;
	margin-bottom:15px;
	text-align:left;
	}
/*トップへなどのボタンエリア*/

.button-area {
	text-align:center;
	padding: 15px 0px 15px 0px;
	}
	
.button-area input {margin: 0px 10px;}
.button-area img {margin: 0px 10px;}

/* 利用規約 */
#kiyaku-wapper{
	text-align:center;
}
#kiyaku-body{
	text-align:left;
	width:95%;
	margin:auto;
}

#kiyaku-body .wrap{
}

#kiyaku-body h4{
	color:#20b2aa;
	font-weight:bold;
	margin-bottom:2px;
}

#kiyaku-body p{
	margin-left:20px;
}

#koumoku1{
	margin-left:1rem;
	width: calc(100% - 1rem);
	display: flex;
	flex-direction: row;
}
#koumoku1 > div:first-child{
	width:120px;
	margin-bottom:3px;
}
#koumoku1 > div > div{
	margin-bottom:6px;
}
#koumoku1 > div > div > div:not(:first-child){
	padding-left:1rem;
}

#koumoku2{
	margin-left:20px;
	width: 90%;
}
#koumoku2 dt {
	float:left;
	clear:left;
	width:30px;
	padding-bottom:10px;
}
#koumoku2 dd {
	float:left;
	max-width: 670px;
    
}

#koumoku2ex{
	margin-left:20px;
	border:solid 1px #4169e1;
	width:90%;
	max-width:700px;
	padding:1px;
	display: flex;
	flex-wrap: wrap;
}
#koumoku2ex > div{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}
#koumoku2ex > div:first-child{
	width:100%;
	margin:6px 0;
	display: flex;
	justify-content: flex-start;
	font-weight: bold;
}
#koumoku2ex > div > div {
	width: 100%;
	display: flex;
	flex-direction: row;
	margin-left:6px;
}
#koumoku2ex > div > div > div{
	margin-bottom:6px;
}
#koumoku2ex > div > div > div:first-child{
	width: 200px;
}


#koumoku3{
	margin-left:1rem;
	width: calc(100% - 1rem);
	display: flex;
	flex-wrap: wrap;
}
#koumoku3 > div{
	display: flex;
	flex-direction: row;
	margin-bottom: 6px;
}
#koumoku3 > div > div:nth-child(1){
	width: 360px;
}

#kiyaku-toi{
	margin:30px auto;
	border:solid 1px #909090;
	max-width:350px;
	padding:1px;
	display: flex;
	justify-content: flex-start;
}
#kiyaku-toi > div{
	margin:10px;
	display: flex;
	flex-direction: column;
}
#kiyaku-toi > div:nth-child(1){
	margin:10px 20px;;
}
#kiyaku-toi > div > div:not(:last-child){
	margin-bottom: 5px;
}


@media screen and (max-width: 700px) {
	#koumoku1{
		flex-direction: column;
	}
	#koumoku2ex > div > div{
		flex-direction: column;
	}
	#koumoku2ex > div > div > div:not(:first-child){
		margin-left: 1rem;
	}
	#koumoku3 > div {
		flex-direction: column;
		width: 100%;
	}
	#koumoku3 > div > div:nth-child(1){
		width: 100%;
	}
	#koumoku3 > div > div:nth-child(2){
		margin-left:1rem;
	}
}
@media screen and (max-width: 500px) {
	div#header div {
		margin:10 0px;
		background-image : none;
		font-size:1.6rem;
		font-weight: bold;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	div#header div::before {
		display: block;
		padding:15px 0;
		content:"山都町教育・";
	}
	div#header div::after {
		content:"体育施設空き状況";
	}
}
@media screen and (max-width: 230px) {
	div#header div {
		font-size:1.2rem;
		font-weight: bold;
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	div#header div::before {
		padding:10px 0;
	}
}