@charset "utf-8";

/* header
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.header{
	width: 100%;
	z-index: 9!important;
	margin: 0;
	border-bottom: none;
	position: fixed;
	top: 0;
	}
}
@media print, screen and (min-width: 576px) {
.header{
	width: 100%;
	z-index: 9!important;
	margin: 0;
	border-bottom: none;
	position: fixed;
	top: 0;	
	}
}

/* h1
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.logo {
	width: 250px;
	margin:20px 0 0 15px !important;
	float: left;
	}
}

@media print, screen and (min-width: 768px) {
.logo{padding: 40px 0 0 30px;}
.logo img{width: 329px;}
}

/* link
---------------------------------------------------- */
a:link,a:visited,a:hover,a:active{text-decoration:none; color:#222;}

/* menu
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.menu{
  width: 50px;  
  height: 50px;
	position: fixed;  
	right:10px;
  top: 10px;
	padding:13px 11px 13px 11px;
	background: #222;  
  border-radius: 100px;  
	cursor: pointer;
	z-index: 9999
	}
.menu__line{
  background: #fff;
  display: block;
  height: 2px;
  position: absolute;
  transition:transform .3s;
  width: 28px;
}
  
.menu__line--top{
  top: 16px;
}
.menu__line--center{
  top: 24px;
}
.menu__line--bottom{
  bottom: 16px;
}
.menu__line--top.active{
  width: 30px;
  top: 24px;
	left:10px;
  transform: rotate(45deg);
}
.menu__line--center.active{
  transform:scaleX(0);
}
.menu__line--bottom.active{
  width: 30px;
  top: 24px;
	left:10px;	
  transform: rotate(135deg);
	}
}

@media print, screen and (min-width: 768px) {
.menu{
  height: 80px;
	position: fixed;
	right:20px;
  top: 20px;
  width: 80px;
	padding:30px 18px;
	background: #222;
  border-radius: 100px;
	cursor: pointer;
	z-index: 9999
	}
.menu__line{
  background: #fff;
  display: block;
  height: 2px;
  position: absolute;
  transition:transform .3s;
  width: 45px;
}
.menu__line--center{
  top: 50px;
}
.menu__line--bottom{
  bottom: 38px;
}
.menu__line--top.active{
  width: 40px;	
  top: 40px;
	left:21px;
  transform: rotate(45deg);
}
.menu__line--center.active{
  transform:scaleX(0);
}
.menu__line--bottom.active{
  width: 40px;		
  bottom: 38px;
	left: 21px;	
  transform: rotate(135deg);
	}
}

/* gnav
---------------------------------------------------- */
.gnav{
  background: rgba(246,244,241,1.98);
  display: none;
  height: 100%;
  position: fixed;
  width: 100%;
  z-index: 9;
	top:0;
}
.gnav__wrap{
  align-items:center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.gnav__menu{width: 90%;}
@media print, screen and (min-width: 768px) {.gnav__menu{width: 600px;}}
@media print, screen and (min-width: 992px) {.gnav__menu{width: 800px;}}
@media print, screen and (min-width: 1200px) {.gnav__menu{width: 1000px;}}

.gnav__menu li{list-style: none}
.gnav__menu__item a:hover{color: #f66423;}

.gnav__menu__item a{
	display: block;
  font-size: 20px;
  line-height: 30px;  
  padding: 13px 0;
  text-decoration: none;
  transition: .5s;
	border-bottom: 0px solid #eee;
  text-align: center;
  font-family: 'Zen Maru Gothic', sans-serif;
}

@media print, screen and (min-width: 768px) {
.gnav__menu__item a{
  font-size: 25px;
  line-height: 35px;
  padding: 20px 0;
  text-align: left;  
	}
}

@media print, screen and (min-width: 992px) {
.gnav__menu__item a{
  font-size: 30px;
  line-height: 40px;
	}
}

@media print, screen and (min-width: 768px) {
.gnav__menu__item span{
  color: #f66423;
	font-size: 18px;
  font-family: "Oswald", sans-serif;  
	}
}

/* li
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .li001{width:100% !important; clear: both;}
  .li002{width:100% !important; clear: both;}
  .li003{width:100% !important; clear: both;}
  .li004{width:100% !important; clear: both;}
  .li005{width:100% !important; clear: both;}
  .li006{width:100% !important; clear: both;}
  .li007{width:100% !important; clear: both;}
  .li008{width:100% !important; clear: both;}
  .li009{width:100% !important; clear: both;}
}

@media print, screen and (min-width: 768px) {
  .li001{width:49% !important; float: left !important; clear: both;}
  .li002{width:49% !important; float: right!important;}
  .li003{width:49% !important; float: left !important; clear: both;}
  .li004{width:49% !important; float: right!important;}
  .li005{width:49% !important; float: left !important; clear: both;}
  .li006{width:49% !important; float: right!important;}
  .li007{width:49% !important; float: left !important; clear: both;}
  .li008{width:49% !important; float: right!important;}
}

@media print, screen and (min-width: 992px) {
  .li001{width:60% !important; float: left !important; clear: both;}
  .li002{width:40% !important; float: right!important;}
  .li003{width:60% !important; float: left !important; clear: both;}
  .li004{width:40% !important; float: right!important;}
  .li005{width:60% !important; float: left !important; clear: both;}
  .li006{width:40% !important; float: right!important;}
  .li007{width:60% !important; float: left !important; clear: both;}
  .li008{width:40% !important; float: right!important;}
}

.navi-on a{color:#ff6825;}

/* tel
---------------------------------------------------- */
.mt10{
  padding-top:5px !important;
}
.nav_tel{
  font-family: 'Noto Sans JP', sans-serif;
	color: #fff;
	background:#f66423;  
	display:block;
	text-align:center;
	font-size: 16px;
	padding:10px 0;
	margin: 8px;  
	letter-spacing: 2px;
	border-radius: 100px;
	}
.nav_tel a:link,
.nav_tel a:visited,
.nav_tel a:hover,
.nav_tel a:active{color:#fff}
.nav_tel i{
  font-size:80%;
  margin:0 5px 0 0;
  color:#fff;
  vertical-align: middle;
}