/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,pre,form,dl,dt,dd,blockquote,fieldset,input,address{margin:0; padding:0; font-size: 12px; line-height: 18px; color: #666;}
body{font-family: YuGothic,'游ゴシック','DIN Next W01 Regular','ＭＳ Ｐゴシック','MS P Gothic','MS-PGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,arial,helvetica,clean,sans-serif;}
ul{margin: 0;}
li{list-style: none;}
img{vertical-align: top;}
a{color: #666;}

.fl{float: left;}
.fr{float: right;}
.img-ow{margin: 0 auto;}
.switch {visibility: hidden;}
.mt0{margin-top: 0;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt40{margin-top: 40px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.left{float: left;}
.right{float: right;}
a:link{text-decoration: none; color: #666;}
a:visited{color: #666;}
a:hover{color: #999; text-decoration: none;}

header{position: relative;}
header h1{padding-left: 15px;}
header h1 img{width: 220px;}
header .btn_mail{display: none;}
article{padding: 0 15px;}
footer{margin: 10px 0 20px;}
@media only screen and (max-width: 767px) {
	header .headIn{padding: 15px 0;}
	header .toggle{position: absolute; top: 9px; right: 15px; width: 36px; height: 30px;}
	header .toggle a{display: block;}
	header nav{display: none; position: absolute; z-index: 100; width: 100%; clear: both;}
	header nav>li{width: 100%; text-align: center; border-bottom: 1px solid #e9e9e9;}
	header nav>li a{display: block; padding: 12px 0; background-color: #fff;}
	footer .about{display: none;}
	footer .copyright{text-align: center;}
}
@media only screen and (min-width: 768px) {
	header{width: 750px; margin: 0 auto; padding: 40px 0 30px; position: relative;}
	header h1{text-align: center;}
	header h1 img{width: 300px;}
	header .toggle{display: none;}
	header nav{display: none;}
	header .btn_mail{top: 43px; right: 0; display: block; position: absolute;}
	header .btn_mail img{width: 26px;}
	article{width: 750px; margin: 0 auto; padding: 0; margin-top: 20px;}
	footer{width: 750px; margin: 30px auto 80px;}
	footer .about{float: left;}
	footer .copyright{float: right;}
}
@media only screen and (min-width: 992px) {
	a:hover img{opacity: 0.5;}
	header{padding: 60px 0 50px;}
	header,article,footer{width: 950px;}
	header .btn_mail{top: 63px;}
}
@media only screen and (min-width: 1200px) {
	header,article,footer{width: 1070px;}
}


/*instagram*/
.instagram{margin-left: -1%; margin-right: -1%;}
.instagram li{float: left; width: 48%; margin: 0 1% 2%;}
.instagram li img{width: 100%;}
@media only screen and (min-width: 768px) {
	.instagram li{float: left; width: 23%; margin: 0 1% 2%;}	
}
@media only screen and (min-width: 992px) {
	.instagram li{float: left; width: 18%; margin: 0 1% 2%;}
}


/*about*/
.about article{margin-top: 10px; margin-bottom: 30px;}
.about article h1{font-size: 16px; letter-spacing: 0.09em; margin-top: 10px; margin-bottom: 25px;}
.about article h2{margin-bottom: 10px; font-size: 13px; letter-spacing: 0.09em;}
.about article p{margin-top: 5px;}
@media only screen and (min-width: 768px) {
	.about section{text-align: center;}
	.about article h1{margin-bottom: 40px;}
	.about article p{margin-top: 10px;}
}