@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Cinzel|Marcellus);
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,500,700&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Forum');
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{
font-color:#202020;
font-size: 140%;
font-family: 游明朝, YuMincho,"Noto Serif JP",serif;
font-weight:500;
}
img,abbr,acronym,fieldset{border:0;}


body{	font:16px/1.9 Century, "游明朝", YuMincho,"Noto Serif JP",serif,"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	font-weight:400;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background:#ffffff;
}



a{
      color: #000;
	text-decoration: none;
}

a:hover, .active{ color: #339999; }



a:active, a:focus,input:active, input:focus{outline:0;}


/* ヘッダー
------------------------------------------------------------*/


#container {
  width: 95%;
height:auto;
  margin: 0 auto;   /*中央寄せ*/
padding-top:20px;
  
}



#container2 {
  width: 80%;
height:auto;
  margin: 0 auto;   /*中央寄せ*/
padding-top:100px;
  
}


#container h1{
	font-size: 140%;
	text-align: center;
}

#container h2 span {
	background: #fff;
	padding: 0 40px;
       margin:0 auto;
      clear:both;
}

#container h3 {
font-family: 'Forum', cursive;
font-size:  140%;
padding:30px 0 0 50px;
font-weight:normal;
}



#header h1{
	padding-top: 10px;
padding-left:10%;

}


#mainnav a{
	color: #000;
	font-family: "游明朝", YuMincho,"Noto Serif JP",serif, "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif ;
}

#mainImg{
padding-top:50px;
  display: block;
     margin:0 auto;
  }


/* フッター
------------------------------------------------------------*/
#footer{
display:block;
	clear: both;
	text-align: right;
	font-size: 6px;
letter-spacing:0.1em;
}

#footer p{
	color: silver;
}



/* 共通
------------------------------------------------------------*/

img{
	max-width: 100%;
	height: auto;
}
img2{
	max-width: 100%;
	height: auto;
       margin:0 auto;
}




section{
	clear:both;
	margin: 30px 0;
padding-left:10px;
}

section h2{
		width: 60%;
	margin: 20px auto ;
	font-size: 20px;
	font-weight:normal;
	text-align: center;
	background: url(../image/border.png) repeat-x 0 50%;
	background-size: 1px 1px;
}

section h2 span {
	background: #fff;
	padding: 0 40px;
       margin:0 auto;
      clear:both;
}

/* index
------------------------------------------------------------*/

#frame1 {
     width: 100%; 
     height:auto;
margin:0 auto;
    }



#frame1 h1 {
   line-height: 2;
   text-align:left;
margin:0 0 10px;
}




.move {
      line-height:1.3;
margin-bottom:20px;
}



.f1_left {
     margin:0 auto;
        }



.f1_right  {
     height:auto;
    width:100%;
margin:0 auto;
font-size: 11pt;
}

.f1_right p {
   line-height: 2;
   text-align:left;
  padding:0 20px;
}

#frame2 {
      max-width: 90%;
    margin: 0 auto;
    text-align: center;
    }

#frame2 h1{
 display: inline-block;
    text-align: left;
    }




#frame2 p{
 display: inline-block;
    text-align: left;
letter-spacing: 1.2px;
    }


#frame2 p.small{
font-size:10pt;
    }




#frame3 {
     width: 100%; 
     height:auto;
margin:0px 0 20px;
clear:both;
border-top: 1px solid #ccc;
padding-top:30px;
    }











.link {
width:100px;
height:100px:
}

.link img{
width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}






















.clear { clear:both; }  
.clear hr { display:none; }  

.border{
max-width:70%;
height:20px;
margin:0 auto;
display:block;
border-bottom:1px solid #808080;
clear:both;
padding-top:20px;
padding-bottom:20px;
}


#block{
     width: 90%; 
 margin-right: auto;
  margin-left : auto;
 display: flex;              
    flex-wrap: wrap;
    align-content:stretch;
flex-direction:row;
  }



.m_menu {
  position: relative;
margin:0 auto;
  }

.m_menu a {
  position: absolute;
  width: 80%;
    left: 10%; 
    top: calc(50% - 25px); 
    text-align: center;
     color: black;
 font-weight:bold;
letter-spacing: 2px;
  background: rgba(255, 255, 255, 0.6);
  }


.m_menu a:hover{
 	opacity:0.5;
     color: gray;

}


.m_menu img {
  width: 180px;
height:120px;
filter:drop-shadow(5px 5px 5px #c0c0c0);
padding: 10px 10px 0px;

  }

.m_menu img:hover{
 	opacity:0.9;

}

.block2{
    background:#e8e8e8;
 width: auto;
padding: 10px;
margin:0 auto;
 display: flex;            
    flex-wrap: wrap;
    align-content:stretch;
flex-direction:row;
  }

.block3{
 width: auto;
padding: 10px;
margin:0 auto;
 display: flex;            
    flex-wrap: wrap;
    align-content:stretch;
flex-direction:row;
  }



.o_menu{
  position: relative;
margin:0 auto;
      }

.o_menu a {
  position: absolute;
  width: 90%;
    left: 5%; 
    top: calc(40% - 5px); 
    text-align: center;
   font-size: 16px;
  color: black;
 font-weight:bold;
letter-spacing: 1.5px;
line-height:1.2;
  background: rgba(255, 255, 255, 0.6);
  }




.o_menu a:hover{
 	     color: gray;
		opacity:0.5;
}


.o_menu img {
  width: 120px;
height:86px;
padding: 10px 5px 0px;
filter:drop-shadow(5px 5px 5px #c0c0c0);

  }

.o_menu img:hover{
opacity:0.9;
 	}



#block_kure{
     width: 80%; 
 margin-right: auto;
  margin-left : auto;
 display: flex;              
    flex-wrap: wrap;
    align-content:stretch;
flex-direction:row;
margin-top:40px;
    }

.paper {
  position: relative;
margin:0 auto;
position: abusolute;
margin-bottom:20px;
  }


.paper span {
 left: 7%; 
position:absolute;
color:gray;
width:80%;
line-height:2;
    top: calc(50% - 15px); 
    text-align: center;
 font-weight:bold;
  background: rgba(255, 255, 255, 0.9);

  }



.paper img {
  max-width: 130px;
height:auto;
padding: 10px 10px 0px;

  }


p.small{
line-height: 150%;
margin:0 auto;
font-size:10pt;
}



.split{
    display: table;
    width: 100%; 
 
}

.split-item{
    display: table-cell;
width:auto;
    }

/*maintainence用*/
.split-left{
      position: relative;
background:#e8e8e8;

}
.split-left__inner{
position: fixed;
width:15%;
    
}




.split-right__inner{
    height: auto;
padding-top:30px;
padding-left:30%;
width:65%;

}

.split-right__inner h1{
font-size: 140%;
line-height:1.5;
}


.split-right__inner a{ color: #339999; }

.split-right__inner p.center{
text-align:center;
font-size:14pt;
}

.rinen{
width:85%;
padding:20px;
background: rgba(212, 220, 211, 0.61);
  }

.split-right__inner2 p.indent{
padding-left:2em;
text-indent:-1em;
padding-bottom:0.7em ;
  }

.kakaku{
  background: rgba(212, 220, 211, 0.61);
    padding: 15px 40px;
  border-radius: 10px;
width:50%;
margin:0 20px;
}     


p.zei{
font-size:10pt;
line-height:150%;
padding-left:2em;
} 




.split-left2{
      position: relative;

}
.split-left__inner2{
position: fixed;
width:40%;
    
}

.split-left__inner2 img{
max-width:90%;
height:auto;
    
}



.split-right__inner2{
    height: auto;
padding-top:30px;
padding-left:50%;

}


.tuketashi{
 width:80%;
    padding: 15px 20px;
margin-left:20px;
  background: rgba(236, 236, 236);
}






.tuketashi p.bun{
padding:10pt 2em  0;
font-size:11pt;
}





.hitokoto{
 width:70%;
  background: rgba(212, 220, 211, 0.61);
  margin: 0 auto;
  padding: 25px 40px;
  border-radius: 10px;
}

.hitokoto-circle1{
  font-size: 16px;
  line-height: 1.5;
  position: absolute;
  margin-top: -37px;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle1:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:before{
  content: "";
  position: absolute;
  top: 100%;
  margin-left: -12px;
  border: 5px solid transparent;
  border-top: 10px solid #4caf50;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.hitokoto-circle2{
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  margin-top: -37px;
  margin-left: 40px;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto p{
  margin: 0;
  padding: 0;
}

.online img{
max-width:35%;
height:auto;
}

hr.dot {
	border-top: 1px dashed #8c8b8b;
}
















/* SEC03 PROJECT
------------------------------------------------------------*/
/* RESPONSIVE 設定
------------------------------------------------------------*/

/*pc用*/
@media only screen and (min-width:1024px) {




	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

	#header{
		position: fixed;
		width: 100%;
		z-index: 500;
	}
	

	#headerWrap{
		position: relative;
	border-bottom: 1px solid #cccccc;
padding-bottom:30px;
background: #fff;
	}

#mainnav  { padding-top:20px;  }

#mainnav li{
		display: inline-block;
		padding: 20px 30px 0px;
		font-size: 16px;
line-height:1;
letter-spacing:0.1em;
	}

#mainnav li a:hover, .active{ color: #339999; }

.pc { display: block !important; }
.sp { display: none !important; }



#header h1{
	padding-top: 40px;
padding-left:10%;
 display: inline;
float:left;
}
	
  #footer{  display:block;
	  padding: 30px 10px 70px 0; 
clear:both;	}

#container{
margin:0 auto;
padding-top:170px;
z-index: -100;

}

#container2 {
padding-top:150px;
   
}




.f1_left {
     clear: both;
	  float: left;
        width:45%;
}



.f1_right  {
 float: right;
    height:auto;
    width:50%;
margin:0 30px 30px;

}

.f1_right p {
   line-height: 2;
   text-align:left;
font-size: 110%;
    margin:0px 0 70px;
}









#frame3 {
clear:both;
float:center;
margin-top:30px;
border-top: 1px solid #ccc;
padding-top:70px;
    }

#frame3 h1 {
padding-left:20px;
    }

#block{
     width: 700px; 
  }








hr {  margin-top:20px; }


}



/*tablet用*/
@media only screen and (min-width:640px) and (max-width:1023px) {

	


#container{
margin:0 auto;
padding-top:150px;
z-index: -100;

}

  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

	#header{
position: fixed;
		width: 100%;
		z-index: 500;
	}
	
	#headerWrap{
		position: relative;
	border-bottom: 1px solid #cccccc;
padding-bottom:30px;
background: #fff;
	}


#mainnav  { padding-top:30px; 
padding-left:  20px; }

#mainnav li{
		display: inline-block;
		padding-left:  20px;
		letter-spacing:0.1em;
	}



	#mainnav li a{
		position: relative;
		display:block;
		color: #000;
		letter-spacing:0.1em;

	}


#mainnav li a:hover, .active{ color: #339999; }

.pc { display: block !important; }
.sp { display: none !important; }



	
	
	/* SEC03 */
	.col3{
		text-align: center;
	}

	.col3 li{
		display: inline-block;
		width: 28%;
		padding: 0 2.5% 50px;
		margin-bottom: 0;
		vertical-align: top;
		text-align: left;
	}

 .split{
        display: block;
    }

.split-item{
    display: block;
margin:0 auto;
    width: 100%; 

    }

.split-left__inner{
        position: inherit;
        width: auto;
    }
.split-right__inner{
    height: auto;
padding:3% 3% 10%;
width:90%;
margin:0 auto;
}

.split-left__inner2{
        position: inherit;
        width: auto;
    }
.split-right__inner2{
    height: auto;
padding:3% 3% 10%;
}















.o_menu{
  position: relative;
margin:0 auto;
      }

.o_menu a {
   position: absolute;
  width: 90%;
    left: 5%; 
    top: calc(30% - 3px); 
    text-align: center;
 font-weight:bold;
letter-spacing: 0.5px;
line-height:1.2;
font-size: 90%;
  background: rgba(255, 255, 255, 0.6);
  }



.o_menu img {
  width: 100px;
height:60px;
object-fit: cover;
padding: 2px 2px 0px;
filter:drop-shadow(5px 5px 5px #c0c0c0);

  }

.online img{
max-width:60%;
}



#container2 {
		padding-top: 130px;

   }

.block2{
width:100%;
  }





#header h1{
	padding-top: 30px;
padding-left:5%;
 display: inline;
float:left;
}
	
  #footer{  display:block;
		padding: 30px 10px 70px 0;
	}

hr {  margin-top:20px; }





}


/*スマホ用*/

@media screen and (max-width:639px) {
body{
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
width:100%;
line-height:1.8;
    }




	#header{
		position: fixed;
		width: 100%;
		z-index: 500;
	}
	
	#headerWrap{
		position: relative;
		width: 100%;
		height: 70px;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}


#header h1{
       padding-top: 10px;
	padding-left:30px;
}

#header h1 img{
		margin-top: 3px;
		max-height: 25px;
padding-top: 10px;
		width: auto !important;
              	}

#mainImg{
padding-top: 0px;
z-index: -100;
  display:block;
   max-width: 100%; 
margin-top:20px;
text-align:center;
		}

#mainImg img{
    height:auto;
    max-width:100%;
 margin: 0px auto;
  }

  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 60%;
  	left: 50%;
  	width: 18px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #000;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 18px;
  	height: 2px;
  	background: #000;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

.pc { display: none !important; }
.sp { display: block !important; }

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		left: 0;
		top: 0;
		z-index: 100;
  
	}

	#mainnav{
		position: absolute;
		top: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav ul{
              
		border-bottom: 1px solid #ccc;
		background: #fff;
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 35px;
		border-bottom: 1px solid #ccc;
		color: #000;
		letter-spacing:0.1em;

	}

	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 15px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

#footer{
z-index: 1000;
display:block;
	clear: both;
	padding-top: 600px;
text-align: center;

}

#footer p{
	font-size: 10px;
letter-spacing:0.1em;
color: white;
}

#container {
		padding-top: 90px;
		z-index: -100;
    margin: 0 auto;
 width:95%; 
}

#container2 {
		padding-top: 85px;
		z-index: -100;
  margin: 0 auto; 
width:95%;
   }





#frame1 h1 {
   line-height: 2;
margin:0 auto;
width:100%;
padding:30px 0px;
}



#block{
     width: 100%; 

  }



#block_kure{
     width: 100%; 
margin-top:20px;
    }


#frame2 {
      max-width: 100%;
        }

#frame2 h1{
margin-bottom:30px;
width:95%;
    }









.move {
   line-height: 1.6;
   margin:20px 0 10px;
font-size:140%;
max-width:95%;

}

.m_menu {
  position: relative;
margin:0 auto;
padding:2px;  
  }

.m_menu a {
   position: absolute;
  width: 80%;
    left: 10%; 
    top: calc(30% - 5px); 

   font-size: 13px;

    }




.m_menu img {
width: 140px;
height:80px;
object-fit: cover;
padding: 2px 1px 0px;
  }





.o_menu{
  position: relative;
margin:0 auto;
      }

.o_menu a {
    top: calc(40% - 5px); 
   font-size: 12px;
 letter-spacing: 1.5px;

  }



.o_menu img {
  width: 100px;
height:60px;
object-fit: cover;
padding: 2px 2px 0px;
filter:drop-shadow(5px 5px 5px #c0c0c0);

  }


.split{
        display: block;
    }

.split-item{
    display: block;
margin:0 auto;
    width: 100%; 
    }

.split-left__inner{
        position: inherit;
        width: auto;
    }

.split-right__inner{
margin:0 auto;
    height: auto;
padding:3% 0% 0%;
width:95%;
}


.split-left__inner2{
        position: inherit;
        width: auto;
    }

.split-right__inner2{
    height: auto;
padding:3% 0% 0%;
}

.split-left__inner2 img{
max-width:100%;
    
}





.split-right__inner p.center{
text-align:left;
font-size:11pt;
line-height:1.4;
}




.rinen{
width:80%;
margin:0 auto;
line-height:1.8;
  }




.hitokoto{
 width:85%;
  background: rgba(212, 220, 211, 0.61);
  margin:0 auto;
  padding: 25px 30px;
  border-radius: 10px;
}

.paper {
margin-bottom:0px;
  }


.paper span {
 left: 6%; 
position:absolute;
    top: calc(40% - 5px); 
   font-size: 11px;
 line-height: 2;
width:90%;
  background: rgba(255, 255, 255, 0.9);

  }



.paper img {
  max-width: 70px;
height:auto;
padding: 5px 5px 0px;

  }


.tuketashi{
 width:85%;
margin-left:5px;
}

.tuketashi p.bun{
padding:10pt 5pt 0;
font-size:100%;
padding-left:1em;
text-indent:0;

}



.kakaku{
      padding: 15px 40px;
width:70%;
margin:0 auto;
} 

p.zei{
font-size:10pt;
line-height:150%;
padding-left:2em;
} 

p.small{
font-size:100%;
}

.online img{
max-width:95%;
}



	}