@charset "utf-8";

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

.header{background: #fff}

/* h1
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.logo {
	width: 220px;
	margin:18px 0 17px 10px !important;
	float: left;
	}
}

@media print, screen and (min-width: 768px) {
.logo{padding: 31px 0 23px 10px; display: inline-block;}
.logo img{width: 270px;}
}
@media print, screen and (min-width: 992px) {
.logo{padding: 28px 0 19px 25px; display: inline-block;}
.logo img{width: 387px;}
}


@media only screen and (max-width: 767px) {
.header_info_01, .header_info_02, .header_info_03{display: none;}
}

@media print, screen and (min-width: 768px) {
.header_info_01{
  position:absolute;
  top:23px;
  right:395px;
  }
.header_info_02{
  position:absolute;
  top:23px;
  right:350px;
  }
.header_info_03{
  position:absolute;
  top:18px;
  right:115px;
  }
}


/* menu
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.menu{
  width: 50px;  
  height: 50px;
	position: fixed;  
	right:0px;
  top: 0px;
	padding:15px 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:0px;
  top: 0px;
  width: 80px;
	padding:30px 18px;
	background: #222;
	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);
	}
}

/* wide_menu
---------------------------------------------------- */
@media print, screen and (min-width: 768px) { .wide_menu{ padding:0 0 0 10%;}}
@media print, screen and (min-width: 1400px) {.wide_menu{ padding:0 0 0 15%;}}
@media print, screen and (min-width: 1600px) {.wide_menu{ padding:0 0 0 12%;}}

/* group
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.g_02{
  margin-bottom: 20px;
	}
}

@media print, screen and (min-width: 768px) {
.gnav-box{
	display: block;
	margin-bottom: 30px;
	}
.g_01{
	display: block;  
	float: left !important;
	width: 50% !important;
	}
.g_02{
	float: right !important;
	width: 50% !important;
	}
}

/* gnav
---------------------------------------------------- */
.gnav{
  background: #222;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9;
	top:0;
  right:0;
}

@media only screen and (max-width: 767px) {
.gnav{
  overflow-y: auto;
  }
}

@media print, screen and (min-width: 768px) {
.gnav{
  width: 80%;
  }
}
@media print, screen and (min-width: 992px) {
.gnav{
 width: 70%;
  }
}
@media print, screen and (min-width: 1200px) {
.gnav{
 width: 60%;
  }
}
@media print, screen and (min-width: 1600px) {
.gnav{
  width: 40%;
  }
}

@media only screen and (max-width: 767px) {
  .gnav__wrap{
    display: block;        /* flexやめる */
    height: auto;          /* 100%やめる */
    position: relative;    /* absoluteやめる */
    padding: 80px 0 40px;  /* 上下に余白 */
  }
}

@media print, screen and (min-width: 768px) {
.gnav__wrap{
  align-items:center;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
  }
}

.gnav__menu{width: 100%; text-align: center;}
@media print, screen and (min-width: 768px) {.gnav__menu{width: 100%; margin-bottom: 10px;}}

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

/* link
---------------------------------------------------- */
.gnav__menu__item a:link,
.gnav__menu__item a:visited{text-decoration:none; color:#fff}
.gnav__menu__item a:hover,
.gnav__menu__item a:active{text-decoration:none; color:#d0aa4e}

.navi-on a{color:#d0aa4e !important;}

@media only screen and (max-width: 767px) {
.gnav__menu__item a{
	display: block;
  font-size: 15px;
  padding: 5px 0;
  text-decoration: none;
  transition: .5s;
  text-align: center;
  border-bottom: 1px solid #666;
  }
}

@media print, screen and (min-width: 768px) {
.gnav__menu__item a{
	display: block;  
  font-size: 17px;
  line-height: 19px;  
  padding: 10px 0;
  text-decoration: none;
  transition: .5s;  
  text-align: left;
	}
}
@media print, screen and (min-width: 992px) {
.gnav__menu__item a{
  font-size: 20px;
  line-height: 19px;  
  padding: 12px 0;
	}
}

@media only screen and (max-width: 767px) {
.gnav__menu__item a span{
  display: none;
  }
}
@media print, screen and (min-width: 768px) {
.gnav__menu__item a span{
  font-size: 10px;
  }
}

/*.gnav__menu__item a:before{
	font-family: "Font Awesome 5 Free";
	content:" \f111";
	float: left;
	font-weight: bold;
	color: #fff;
	font-size: 10px;
	padding: 1px 20px 0 0;
}*/

/* tel
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.nav_tel{
	color: #fff;
	background:#d0aa4e;  
	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}
}

@media print, screen and (min-width: 768px) {
.nav_tel{
	color: #fff;
	display:block;
	text-align:left;
	font-size: 24px;
	margin: 0 0 0 0;
	letter-spacing: 2px;
  }
}
/*.nav_tel i{
  font-size:15px;
  top:-5px !important;
  margin:0 5px 0 0;
  color:#d0aa4e;
  vertical-align: middle;
}*/