@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Cinzel|Marcellus);
/* 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-size:100%;font-family: 'Forum', cursive;;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight:300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background:#ffffff;
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

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


/* ヘッダー
------------------------------------------------------------*/
#header{
	text-align: center;
}

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

}

#mainnav a{
	color: #000;font-family: 'Forum', cursive;
}

#mainImg{
  display:block;
   max-width: 100%; 
    height:auto;
text-align:center;
		}

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


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	text-align: center;
	font-size: 12px;
}


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

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{
	font-family: 'Forum', cursive;
	width: 60%;
	margin: 20px auto ;
	font-size: 20px;
	font-weight:normal;
	text-align: center;
	background: url(../images/border.png) repeat-x 0 50%;
	background-size: 1px 1px;
}

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

/* index
------------------------------------------------------------*/
.inner{
	width: 95%;
	margin: 0 auto;
     padding:20px 0 20px 30px ;
}

.inner p{
max-width:100%;
height:auto;
	margin: 0 auto;
     }

.innerp1{
	width: 600px;
height:auto;
margin: 0 auto;
padding-left:150px;
line-height:2.5em;
}

.innerp2{
	width: 600px;
height:auto;
margin: 0 auto;
padding-left:150px;
line-height:2em;
font-size: 90%;
}


.innerL{
	width: 80%;
height:auto;
	margin: 0 auto;
	padding-bottom: 30px;
}



.innerL img {
width:auto;
    height:auto;
    max-width:30%;
    max-height:30%;
  float: left;
padding: 20px 20px 50px 150px;
}


.right {
  width: 45%;
  float: left;
height:auto;
  margin: 0 auto;
  padding: 60px 0px 60px 40px;
 line-height:2em;
}


.innerR{
	width: 80%;
height:auto;
	margin: 0 auto;
padding-bottom: 30px;

}


.innerR img {
  float: right;
width:auto;
    height:auto;
    max-width:30%;
    max-height:30%;
height:auto;
margin:0 auto;
padding: 60px 150px 60px 0px;
}

.left {
  width: 40%;
height:auto;
  float: left;
  margin: 0 auto;
 padding: 90px 0px 10px 120px;
 line-height:2em;
} 

/* exhibition 
------------------------------------------------------------*/
.flyer{
   width: 80%; 
    height:300px;
	margin:0 auto;

}


.flyer img {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
  float: left;
padding-left:40px;
}

.f_right {
max-width:50%;
height:auto;
display:block;
float: left;
} 

.f_right p {
max-width:100%;
height:auto;
padding:30px 20px 20px 90px;
display:block;
float: left;
line-height:3em;
}

#container h2{
	font-family: 'Forum', cursive;
	width: 60%;
	margin: 20px auto ;
	font-size: 20px;
	font-weight:normal;
	text-align: center;
	background: url(../images/border.png) repeat-x 0 50%;
	background-size: 1px 1px;
}

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

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

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

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


.oneyear{
width:890px;
height:10px;
margin:0 auto;
display:block;
border-bottom:1px solid #808080;
clear:both;
margin-bottom:20px;
}




/* atelier 
------------------------------------------------------------*/



#masongallery {
max-width:70%;
height:auto;
margin:0 auto;
clear:both;
padding:50px 0 50px 50px;
position: relative;
}


.masonitem {
width:120px;
height:auto;
display:block;
position: absolute;
}


.masonitem img{
margin:0px;
width:116px;
height:auto;
}





<!-- 
.masonry {
max-width:80%;
height:auto;
margin:0 auto;
clear:both;
padding:50px 0 50px 50px;
position:relative;
display:block;
}

 -->

.category{
display:block;
   max-width: 60%; 
    height:auto;
margin:0 auto;
padding-top:30px;
}


.category img {
  float: left;
}

.category p {
width:600px;
}

.c_right {
  margin: 0 0 0 50px;
float:left;
} 

.w-category{
   max-width: 60%; 
    height:auto;
margin:0 auto;
padding:30px 0;

}


.w-category img {
  float: left;
max-width: 30%; 
padding:30px 0;
}

.w_right {
  margin: 0 ;
float:left;
max-width:600px;
height:auto;
padding-left:20px;
} 

.w_right p {
max-width:600px;
height:auto;
background-image : url('../workshop/mizutama.png');
background-repeat: repeat;
  filter: 				alpha(opacity=70);
    -moz-opacity:		0.7;
    opacity:			0.7;
padding:30px;

}

/* salon
------------------------------------------------------------*/
.salon  {
max-width:80%;
  height:auto;
  margin:0 auto;
padding:0;
display:block;
}

.salon  p{
font-size:12pt;
text-align:center;
}

.salon2  {
max-width:80%;
  height:auto;
  margin:0 auto;
display:block;
}

.course1  {
width:480px;
  height:auto;
  margin:0 auto;
float:left;
padding:10px 0 0 20px;
display:block;
}

.course1 h1{
  max-width:100%;
  height:auto;
  text-align:center;
  background-color:#b4ada9;
  font-size:120%;
 color:#ffffff;
  margin:0 auto;
letter-spacing:0.5em;
  font-family: 'Forum', cursive;
line-height:2.5em;
}




.course2{
 max-width:100%;
  height:280px;
  margin:0 auto;
padding:10px 20px 10px 10px;
  float: left;
background-color:#e6eae6;
display:block;
}

.course2 p{
  background-color:#ffffff;
text-align:center;

}

.course2 p.p1{
  width:210px;
  height:40px;
   background-color:#e6c0c0;
line-height:2.5em;
font-size:12pt;
  }

.course2 p.p2{
padding-top:10px;
  font-size:12pt;
height:220px;
  }

#container {
  width: 100%;
height:auto;
  margin: 0 auto;   /*中央寄せ*/

}

#container_m {
  width: 100%;
height:auto;
  margin: 0 auto;   /*中央寄せ*/

}


#course{
max-width:80%;
  height:auto;
  margin:0 auto;
display:block;
padding:20px;
  }


.attention{
width:540px;
height:150px;
float:left;
font-size:11pt;
padding-left:10%;
display:block;
  }


.ticket{
width:280px;
height:180px;
background-color:#dbebc4;
padding:20px 20px 20px 20px;
float:left;
clear:both:
margin:0 auto;
  }

div.ticket p {
  font-size:12pt;
}

.salonleft {
color:#ffffff;
  width: 200px;
height:auto;
  float:left;
  padding: 30px;

background-color:#b4ada9;
line-height:1.5;
 }   

.salonright {
  width: 500px;
margin:0 auto;
height:auto;
  float:left;
   padding: 0 0 80px 30px;
font-size: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;
}







/* SEC02 Gallery
------------------------------------------------------------*/


#gallery li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}

#gallery img{
	width: 100%;
	height: auto;
}












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

@media only screen and (min-width: 1200px){
	.inner{
		width: 1024px;
	}
	}




@media only screen and (min-width: 800px){
	body{
		font-size:14px;
	}
	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

	#mainnav li{
		display: inline-block;
		padding: 50px 50px;
		font-size: 18px;
letter-spacing:0.1em;
	}
	
	/* 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;
	}
	
  #footer{
		padding: 30px 10px 70px 0;
	}
}


@media only screen and (min-width: 641px){
	.col2 li{
		width: 60%;
		vertical-align: top;
	}
	.col2 li:first-child{
		width: 35%;
		padding-right: 4%;
	}


}



@media only screen and (max-width: 640px){

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

.inner{
width: 90%;
	}

.innerp1{
padding:0;
margin:0 auto;
display:block;
float:none;
}

.innerp2{
padding:0;
margin:0 auto;
display:block;
float:none;
font-size:80%;
}

.innerL{
		width: 94%;
	}

.innerL img{
max-width: 70%;
       float:none;
	display:block;
	margin:0 auto;
padding:0;
			}

.innerL p {
   margin: 0 auto;
  padding: 10px;
}
.right {
  margin: 0 auto;
  padding: 10px;
float:center;
width:90%;
} 

.innerR{
		width: 94%;
	}

.innerR img{
     max-width: 70%;
       float:none;
	display:block;
	margin:0 auto;
padding:0;
			}

.innerR p {
    margin: 0 auto;
  padding: 10px;
}
.left {
  margin: 0;
  padding: 10px;
float:center;
width:90%;
} 

.category{
width: 95%;
z-index:-500
}


.category img {
      display:block;
           float:none;
	margin:0 auto 10px;
width: 80%;
}

.category p {
   margin: 0 auto;
  padding: 10px;
}

.c_right {
  margin: 0;
  padding: 10px 10px 20px 20px;
float:center;
width:90%;
} 

.w-category{
width: 95%;
z-index:-500;
height:auto;
padding:0;
}


.w-category img {
      display:block;
           float:none;
	margin:0 auto ;
max-width:90%;
}

.w_right {
  margin: 0;
  padding: 10px 10px 20px 20px;
float:center;
width:90%;
} 

.w_right p {
   margin: 0 auto;
  max-width:95%;
padding:10px;
}

.masonry {
max-width:95%;
height:auto;
margin:0 auto;
clear:both;
padding:0;
display:block;
}

#masongallery {
max-width:95%;
height:auto;
margin:0 auto;
clear:both;
padding:0;
position:relative;
display:block;
}

.masonitem {
max-width:33%;
height:auto;
margin:0 auto;
}


.masonitem img {
max-width:97%;
margin:0 auto;
height:auto;
}

.salon  {
max-width:100%;
  height:auto;
  margin:0 auto;
padding:10px;
text-allign:left;
}


.course1  {
max-width:95%;
  height:auto;
  margin:0 auto;
float:left;
padding:10px 0 0 20px;
}

.course1 h1{
  max-width:100%;
  height:auto;
  text-align:center;
  background-color:#b4ada9;
 color:#ffffff;
  margin:0 auto;
letter-spacing:0.5em;
  font-family: 'Forum', cursive;
line-height:2.5em;
}




.course2{
max-width:100%;
  height:auto;
  margin:0 auto;
display:block;
float:none;

padding:10px 0 10px 10px;
  background-color:#e6eae6;
}

.course2 p{
  background-color:#ffffff;
text-align:center;
display:block;
float:none;
}

.course2 p.p1{
  max-width:70%;
  height:auto;
  margin:0 auto;
   background-color:#e6c0c0;
padding:0 10px 0;
  }

.course2 p.p2{
 max-width:70%;
padding:10px;
height:auto;
  margin:0 auto;
  }



#course{
max-width:100%;
  height:auto;
  margin:0 auto;
padding:20px;
  }


.attention{
max-width:100%;
height:auto;
margin:0 auto;
padding:10px;
  }


.ticket{
max-width:100%;
height:auto;
background-color:#dbebc4;
padding:20px;
margin:0 auto;

  }



.salonleft {
background-color:#b4ada9;
max-width:100%;
font-weight:bold;
font-size:120%;
height:auto;
margin:20px 0;
 padding: 40px 50px;
display:block;
float:none;
text-align:center;
line-height:2;
 }   



.salonright {
  max-width: 100%;
height:auto;
display:block;
float:none;
margin:0 10px;
padding:30px 20px 0 0;
font-size:120%;
 }  


/* exhibition 
------------------------------------------------------------*/
.flyer{
   max-width: 100%; 
height:200px;
    }


.flyer img {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 float:none;
margin:0 auto;
max-width: 60%; 
padding:0;
display:block;
}

.f_right {
float:none;
marin:0 auto;
display:block;
max-width:95%;
} 

.f_right p {
max-width:95%;
padding:0 0 20px 20px;
line-height:2em;
}

#container h2{
	font-family: 'Forum', cursive;
	width: 60%;
	margin: 10px auto ;
	font-size: 20px;
	font-weight:normal;
	text-align: center;
	background: url(../images/border.png) repeat-x 0 50%;
	background-size: 1px 1px;
}

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

	.col3 li{
		line-height: 1.7;
	}
	.col3 img{
		margin: 0 auto;
	}
	.col3 .img{
		padding: 30px;
		margin-bottom: 20px;
	}
	#gallery li{
		float: none;
		width: 100%;
	}

#container_m {
  width: 100%;
height:auto;
  margin: 0 auto;   /*中央寄せ*/
display:block;
position:relative;
		padding-top: 90px;
		z-index: -100;
}


#container {
  width: 100%;
height:auto;
  margin: 0 auto;   /*中央寄せ*/
}

#container h3 {
max-width:90%;
font-family: 'Forum', cursive;
font-size: 16px;
font-weight:normal;
padding:10px 20px 0 20px;
}




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


}



@media only screen and (max-width: 799px){
	#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: 35px;
		width: auto !important;
              	}

  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);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		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 25px;
		border-bottom: 1px solid #ccc;
		color: #000;
		letter-spacing:0.1em;

	}

	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 5px;
		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);
	}
	#mainImg{
		padding-top: 60px;
		z-index: -100;
	}

#container {
position:relative;
		padding-top: 90px;
		z-index: -100;
  width: 100%;
  margin: 0 auto;   /*中央寄せ*/
}

	.col3 li{
		margin: 50px auto 0 auto;
		display: block;
	}
	section{
		padding-top: 50px;
	}
	section h2{
		margin: 0 auto 20px;
	}
	section h2 span {
		padding: 0 30px;
	}
	}