@charset "utf-8";
/* CSS Document */
html{
	overflow:auto;
	min-width:1000px;}
	
body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-image:url(../images/bg.png);
	overflow-x:hidden;
	margin:0;
	min-width:1000px;
	position:relative;}
	
#header{
	width:100%;
	background:url(../images/header.jpg) repeat-x;
	height: 166px;}

#logo{
	width:100%;
	max-width:1000px;
	margin:auto;
	height: 166px;
	text-align: center;}

#logo img{
	width: 45%;}

h1{
	font-size: 10px;
	text-align: left;
	margin-top:3px;}

#main{
	margin:auto;
	width:1000px;
	background-color:#FFFFD0;
	padding:0 0 10px;
	position:relative;}
	

a{
	text-decoration:none;}
	



/*contents01-------------------------------*/
.contents01{
	margin:100px auto;}

.contents01_title{
	font-size:2em;
	font-weight:bolder;
	color:#009045;
	text-align:center;}

.contents01_block_title{
	font-size:1.3em;
	font-weight:bolder;
	text-align:center;}
	
.content01_box{
	display: flex;
	align-items:stretch;
	flex-wrap: wrap;
	justify-content:space-around;
	margin:auto;
	width:700px;}
	
.content01_box_block{
	width:50%;
	margin:auto;
	text-align:center;}
	
.content01_box_block_text{
	text-align:justify;}	
	
.content01_box_block img{
	text-align:center;}	

/*contents02-------------------------------*/
.contents02{
	margin:100px auto;
	text-align:center}

.contents02_text{
	width:400px;
	border:solid 2px #66FFFF;
	border-radius:20px;
	padding:10px;
	margin:auto;
	text-align:left;}	


/*contents03-------------------------------*/
.contents03_list_green{
	width:700px;
	margin:auto;
	position: relative;}

.contents03_list_yellow{
	width:700px;
	margin:auto;
	position: relative;}
	
.contents03_list_blue{
	width:700px;
	margin:auto;
	position: relative;}

	
.contents03_list_title{
	font-size:1.2em;
	font-weight:bold;
	margin:auto 50px;:}
	
.u_line_green{
	border-bottom:solid 2px #8AC43F;}	

.u_line_yellow{
	border-bottom:solid 2px #FFCC66;}

.u_line_blue{
	border-bottom:solid 2px #7AE6DE;}

.contents03_list_green::before{
	content: "";
	position: absolute;
	width:30px;
	height:100%;;
	top:0;
	left:0;
	background-color:#8AC43F;}
	
.contents03_list_yellow::before{
	content: "";
	position: absolute;
	width:30px;
	height:100%;;
	top:0;
	left:0;
	background-color:#FFCC66;}
	
.contents03_list_blue::before{
	content: "";
	position: absolute;
	width:30px;
	height:100%;;
	top:0;
	left:0;
	background-color:#7AE6DE;}			

.c03_list{
	list-style:square;
	margin:20px 30px;
	line-height:1.7em;
	color:fff;}

/*contents04-------------------------------*/
.toi{
	margin:100px auto ;}

.toi_button{
	font-size:1.2em;
	font-weight:bold;
	width:300px;
	border-radius:20px;
	background-color:#e57300;
	color:#fff;
	padding:5px 10px;
	text-align:center;
	margin:100px auto ;}

.toi_button:hover{
	opacity:.5;}	
	
#foot{
	width:100%;
	text-align:center;
	background:url(../images/footer_bg.jpg) repeat-x;
	height: 226px;
	padding-top: 20px;}
	
.p_f1{
	margin:0 auto 8px;}

.p_f2{
	
	margin-top:40px;}
	
/*上に戻る-----------------------*/	
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #69b5bc;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
	
	
/*kai-logo--------------------------------*/		
.kai-logo {
	width:150px;
	margin:0px auto ;}
	
.kai-logo img {
	width: 100%;
	height:auto}	
	
@media screen and (max-width:1024px){


@media screen and (max-width: 768px){
/*contents01-------------------------------*/
.content01_box{
	width:90%}
	
.content01_box_block{
	width:100%;
	margin:auto;}	
	
/*contents03-------------------------------*/	
.contents03_list_green,.contents03_list_yellow,.contents03_list_blue{
	width:90%;}	

}
@media screen and (max-width: 480px){

html{
	min-width:1px;}
body{
	overflow-x:visible;
	position:static;
	min-width:1px;
	margin:2%;
	width:96%;}
	
#header{
	height:auto;}

#main{
	width:100%;
	padding:0 0 10%;}


.contents_top{
	margin:20% auto 10%;}

.contents_top img{
	max-height:14vw;}


/*contents02-------------------------------*/
.contents02 img{
	width:90%;
	height:auto;}	

.contents02_text{
	width:90%;}	

/*contents03-------------------------------*/
.03_list{
	margin:10px 0px 10px 30px;
	padding-left:30px;}

/*contents04-------------------------------*/
.toi_button{
	width:80%;
	font-size:1em;}


#foot{
	height:auto;
	padding:5% 1%;
	font-size:0.8em;
	width:98%;}

.spacer{
	display:none;}



}