@charset "utf-8";
/* ==========================================================================

	common style
	
========================================================================== */
body, div, p, ul, li, h1, h2, h3, h4, h5, h6, a {margin:0; padding:0; font-weight:normal; font-family: maru-maru-gothic-csr-stdn, sans-serif;}
a, p, li, ol {color:#535353; white-space: normal;}
a {text-decoration:none; cursor:pointer; -webkit-transition: all 1s;-moz-transition: all 1s;-o-transition: all 1s;transition: all  1s;}
a:hover {color:#cc3366;}
ul {list-style:none;}
iframe {border:none;}
::selection {background: #ECADAE;}
.pc{display: block;}
.sp{ display: none;}
.f_img img{ max-width: 100%; width: 100%; height: auto;}
img{ vertical-align: bottom;}
.fb_iframe_widget > span { vertical-align: baseline !important;}

/* clearfix */
.cfx:after {content:""; display:block; clear:both; height:0; visibility: hidden;}
/* fonts */
.tangerine {font-family: 'Tangerine', cursive;}
.italia {font-family: 'Italianno', cursive;}
.meddon {font-family: 'Meddon', cursive;}
.montserrat{font-family: 'Montserrat', cursive;}
.alice{font-family: 'Alice', serif;}
.ptsans{font-family: 'PT Sans', sans-serif;}
.abril{font-family: 'Abril Fatface', cursive;}
.ptmono{font-family: 'PT Mono', ;}
.oran{font-family: 'Oranienbaum', serif;}
.fredericka{font-family: 'Fredericka the Great', cursive;}
.ryo{font-family: "ryo-display-plusn";}


/* font size */
.f45{ font-size: 45px; line-height: 58px;}
.f42{ font-size: 42px; line-height: 55px;}
.f38{ font-size: 38px; line-height: 50px;}
.f36{ font-size: 36px; line-height: 50px;}
.f32{ font-size: 32px; line-height: 45px;}
.f30{ font-size: 30px; line-height: 45px;}
.f27{ font-size: 27px; line-height: 43px;}
.f26{ font-size: 26px; line-height: 42px;}
.f25{ font-size: 25px; line-height: 41px;}
.f24{ font-size: 24px; line-height: 32px;}
.f21{ font-size: 21px; line-height: 36px;}
.f20{ font-size: 20px; line-height: 36px;}
.f19{ font-size: 19px; line-height: 30px;}
.f18{ font-size: 18px; line-height: 25px;}
.f17{ font-size: 17px; line-height: 30px;}
.f16{ font-size: 16px; line-height: 30px;}
.f15{ font-size: 15px; line-height: 15px;}
.f14{ font-size: 14px; line-height: 18px;}
.f13{ font-size: 13px; line-height: 17px;}
.f12{ font-size: 12px; line-height: 14px;}
.f11{ font-size: 11px; line-height: 20px;}
.f10{ font-size: 10px; line-height: 15px;}

.f8{ font-size: 8px; line-height: 15px;-webkit-transform: scale(0.8);-webkit-transform-origin:0 0;}

.ta_center{ text-align: center;}
.ta_left{ text-align: left;}
.ta_right{ text-align: right;}
.ta_bold{ font-weight: bold;}
.red{ color: #CD1518;}
.pink{ color:#e4007f;}


/* 
 load
---------------------------------- */
#loader { width: 260px; height: 40px; display: none;position: fixed;_position: absolute; top: 50%;left: 50%; margin-top: -20px;margin-left: -130px;  z-index: 99999;}
 #fade {width: 100vw;height: 10000px;display: none; background-color: #FFFFFF; position: absolute; top: 0px; left: 0px; z-index: 99998;}

/* 
 scrollup
---------------------------------- */
#scrollUp {  position: fixed;  bottom: 30px;right: 30px;  width: 60px;  height: 60px; text-align: center;  z-index: 10; color: #f3f2d9; background: #00000f;  font-size: 12px;  line-height: 59px;  border: 1px #f3f2d9 solid;border-radius: 50%;}
#scrollUp:hover { background: #009; color: #FFF; }

/* 
 header
---------------------------------- */
#header{ margin: 0 auto;width: 1024px;display: block;height: 350px;background: url(../img/top-back001.png) no-repeat;background-position: 0px 40px;position: relative;z-index: 999;}
#sp_header{display: none;}
.sp_menu{width: 50px;height: 50px;padding: 2% 2%;cursor: pointer;display: none;}
.sp_overmenu{padding: 5%;width: 100%;height: 100%;background-color:rgba(0,0,0,1);z-index: 5000;letter-spacing: 1px;line-height: 36px;display: none;color: #FFF;position: relative;}
.topimg{float: left;display: block;width: 340px;height: 180px;margin: 75px 0 0 40px;}
#facebook{width: 20px;height: 20px;z-index: 999;position: absolute;margin: 0; bottom: 65px; right: 70px;}
#facebook img{ height: 20px; }
#instagram{width: 20px;height: 20px;z-index: 999;position: absolute;margin: 0; bottom: 65px; right: 96px;}

#menu{ float: left;display: block;height: 300px;width: 160px;padding-left: 41px;}
#siteNav{overflow: visible;margin: 0px;font-size: 14px;margin-top: 80px;} 
#siteNav li{ padding: 2px 0; margin: 0; cursor: pointer; height: 35px;  width: 150px;}
#subNav{float: left;display: block;height: 200px;width: 260px;padding-top: 80px;margin-left: 100px;}
#subNav li{ width: 240px;}
.light img{opacity: 0.6;}
.light:hover img{opacity: 0.9;}

@media screen and (max-width: 1024px) {
	#header { width: 800px; display: block; margin: 0 auto; background-size: contain;}
	.topimg{width: 260px;}
	#menu{ padding-left: 35px;}
	#subNav{ margin:0;}
	#siteNav li{ padding: 0 0 0 15px; width: 120px; margin: 0;}
	#facebook{width: 20px;height: 20px;z-index: 999;position: absolute;margin: 0; bottom: 110px; right: 20px;}

}
@media screen and (max-width: 860px) {
	#header{ display: none;}
	.topimg{ float: none;display: block; width: 65%;height: 150px; margin: 5% 0 0 6%; max-width: 260px;}
	#sp_header{ display: block; }
	.sp_menu{ display: block; position: fixed; top: 0; left: 0;}
	.sp_overmenu{ position: relative;}
	#scrollUp{ color: #FFF; background-color: #FFF;}
	#scrollUp:hover { background: #FFF; color: #FFF; }
}

/* 
 contents
---------------------------------- */
#contents{ width: 940px;margin: 0 auto;display: block;position: relative;top: -50px;z-index: 99;}
#contents li{ float: left; width: 25%; height: 460px;}
#contents li .gaku{ position: absolute; z-index: 100;width: 25%;}
#contents li .gaku img{ width: 100%; max-width: auto; height: auto;}
#contents li .photo{ position: absolute; z-index: 10;width: 25%;}
#contents img{width: 100%;max-width: 250px;height: auto;}
.lightGallery{float: left;background: none;max-width: 250px;width: 100%;}
.lightGallery img{display: inline;}
.lightGallery img :hover　{color: rgba(225,225,225,0.5) !important;}
.none{display: none;}

@media screen and (max-width: 1024px) {
	#contents{ width: 660px;}
}
@media screen and (min-width: 375px) and (max-width: 860px){
	#contents{ margin: 80px auto 0;}
	#contents li{ float: left; width: 25%; height: 350px;}
}
@media screen and (max-width: 375px) {
	#contents{ width: 85%; top: 0; margin: 0 auto;}
	#contents li{ float: left; width: 25%; height: 130px;}
}
/* 
 contents
---------------------------------- */
.top_item{ width: 100%; margin: 0 auto;}
.top_item li{ width: 25%; float: left;}


/* 
 contact
---------------------------------- */
.contact{width: 100%;height: 200px;background-color: #FFF;}
.mail{width: 300px;height: 100%;margin: 10% auto;}
.bottom20{padding-bottom: 20px;}

@media screen and (max-width: 860px) {
	.mail{width: 300px;height: 100%;margin: 20% auto;padding: 10%; box-sizing: border-box;}
	.bottom20{padding-bottom: 0px;}
	
}

/* 
 coming soon
---------------------------------- */
.comingsoon{width: 100%;height: 200px;background-color: #FFF;}
.comingsoon p{ text-align: center; font-size: 20px; color:#0F0F0F; letter-spacing: 1px;}
.mail{width: 300px;height: 100%;margin: 10% auto;}
.bottom20{padding-bottom: 20px;}

@media screen and (max-width: 860px) {
	.mail{width: 300px;height: 100%;margin: 20% auto;padding: 10%; box-sizing: border-box;}
	.bottom20{padding-bottom: 0px;}
	
}

/* 
 footer
---------------------------------- */
#footer{ width: 100%; text-align: center; padding: 5% 0 3%; box-sizing: border-box; font-size: 10px;}

/* 
 news
---------------------------------- */
.news{ width: 940px;margin: 0 auto;display: block;position: relative;top: -50px;z-index: 99;}
.news_box{ width: 80%; max-width: 1024px; height: auto; background-color: #FFF; padding: 5% 0; z-index: 99; margin: 0 auto;}
.news_box li{ margin: 0 0 4% 0; font-size:14px;}
.news_box li .rightbox{ float: left; width: 30%; padding: 0 3%;}
.news_box li .leftbox{ float: left; width: 70%; padding: 1% 3%;}
.news_box li .date{ font-family: 'Alice', serif; display: inline-block; margin: 0 2% 0 0; font-size: 17px;}
.news_box li .category{ font-family: 'Alice', serif; display: inline-block; border: 1px solid #000000; padding: 1% 2%; background: #000000; color: #fff; }

.news_box li .photo_txt{ margin: 20px 0 20px 0; font-size: 12px; line-height: 1.5;}
.news_box li .photo{ width: 100%; border: 5px solid #000; float:left; margin: 10px 0 0 10px;}
.press_title { font-size: 30px; width: 80%; text-align: left; margin: 10% auto 0;}

@media screen and (max-width: 860px) {
	.news{ width: 90%;margin: 0 auto;display: block;position: relative;top: 0px;z-index: 99;}
	.news_box{ width: 90%; max-width: 1024px; height: auto; background-color: #FFF; padding: 5% 0; z-index: 99; margin: 0 auto;}
.news_box li{ margin: 0 0 10% 0; font-size:11px;}
.news_box li span{ border-bottom: 1px dotted #3E3E3E; padding: 0 0 6px 0; line-height: 2.4;}
.news_box li .photo_txt{ margin: 10px 0 10px 0;}
.news_box li .photo{ width: 140px; border: 5px solid #000; float:left; margin: 0;}
.press_title { font-size: 20px; width: 90%; text-align: left; margin: 10% auto 0;}

.news_box li .rightbox{ float: left; width: 100%; padding: 0 3%;}
.news_box li .leftbox{ float: left; width: 90%; padding: 5% 3%;}
.news_box li .date{ font-family: 'Alice', serif; display: inline-block; margin: 0 2% 0 0; font-size: 17px;}
.news_box li .category{ font-family: 'Alice', serif; display: inline-block; border: 1px solid #000000; padding: 1% 2%; background: #000000; color: #fff; }

}

/* 
 about us
---------------------------------- */
.ab_box{ width: 100%;height: auto;background-color: #FFF;padding-top: 10%;padding-bottom: 5%;z-index: 99;}
.news_title{width: 33%;letter-spacing: 2px;float: left;}
.face{width: 100%;height: auto;float: left;padding: 10% 5% 5% 5%;font-family: 'Slabo 27px', serif;}
.face img{max-width: 250px;width: 100%;height: auto;}
.txt_1{width: 60%;height: 50%;margin: 0 auto;padding: 3.5% 2% 2% 2%;float: left;letter-spacing: 1px;line-height: 25px;font-size: 13px;}
.txt_2{width: 100%;height: 30%;margin: 0 auto;padding: 1% 2% 2% 2%;float: left;letter-spacing: 1px;line-height: 25px;font-size: 13px;}
.txt_3{width: 30%;height: 60%;margin: 0 auto;padding: 1% 2% 2% 0%;float: left;letter-spacing: 1px;line-height: 25px;font-size: 13px;}
.txt_4{width: 100%;height: 30%;margin: 0 auto;padding: 2% 2% 3% 2%;float: left;letter-spacing: 1px;line-height: 25px;font-size: 13px;}
.txt_5{width: 30%;height: 50%;margin: 0 auto;padding: 1% 2% 2% 0%;float: left;letter-spacing: 1px;line-height: 25px;font-size: 13px;}
.img_box{width: 65%;height: auto;float: left;padding-left: 3%;}
.img_box2{width: 65%;height: auto;float: left;padding-left: 0%;}

@media screen and (max-width: 1024px) {
	.ab_box{ background-color: #FFF; padding-top: 10%; padding-bottom: 5%;}
	.txt_1{ padding: 3.5% 2% 2% 3%;}
	.txt_3{ width: 60%; padding: 15% 2% 0% 2%;}
	.txt_5{ width: 60%; padding: 15% 0% 0% 5%;}
}
@media screen and (max-width: 767px) {
	.ab_box{ background-color: #FFF; padding-top: 10%; padding-bottom: 5%;}
	.txt_1{ width: 50%; padding: 3.5% 0% 2% 0%; }
	.txt_3{ padding: 5% 2% 0% 2%;}
	.txt_5{ padding: 1%; width: 60%; padding: 4% 0% 0% 8%;}
	.img_box{ width: 30%;}
	.img_box img { width: 100%; height: 100%;}
	.img_box2{ width: 30%;}
	.img_box2 img{ width: 100%; height: 100%;}
}
@media screen and (max-width: 568px) {
@media screen and (max-width: 479px) and (orientation:portrait) {
	.ab_box{ background-color: #FFF; padding-top: 20%; padding-bottom: 10%;}
	.txt_1{ width: 100%; padding: 3.5% 2% 2% 2%;}
	.txt_2{ width: 100%; padding: 2%;}
	.txt_3{ width: 100%; padding: 2%;}
	.txt_5{ width: 100%; padding: 2%;}
	.img_box{ width: 100%;}
	.img_box2{ width: 100%;}
}