@charset "utf-8";
@import url("menu_pc.css");
/* CSS Document */



@media screen and (max-width : 768px) {
	
	#header{
		padding: 5px 0 5px;
		height: 70px;
		background-color: #fff;
		position: fixed;
	}
	#header .wrap.flex{
		display: block;
	}
	#header .h_logo{
		width: 80px;
		padding-top: 10px;
		margin: 0 0 0 0;
	}
	#header .h_logo01{
		display: none;
	}
	#header .h_logo02{
		display: block;
	}



.drawer {
  width: 300px;
  height: 100%;
  background: rgba(255,255,255,.9);
  padding: 50px 0;
  -webkit-transform: translateX(1000px);
  transform: translateX(1000px);
  -webkit-transition: ease 0.5s;
  transition: ease 0.5s;
  position: absolute;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999
}
	.drawer ul{
	}
	.drawer li{
		border-bottom: #DBDBDB 1px solid;
	}
.drawer li ul {
  margin: 0
}

.drawer.action {
  width: 275px;
	max-width: 100%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.drbtn {
  position: absolute;
  top: 12px;
  right: 10px;

  width: 50px;
  height: 50px;
  color: #5c6b80;
  -webkit-transition: ease 0.5s;
  transition: ease 0.5s;
  cursor: pointer;
  font-size: 10px;

  z-index: 10000
}

.drbtn.action {

	top: 7px;
}
	.drbtn  p{
		display: block;
		bottom: 0;
		width: 100%;
		font-size: 1rem;
		font-weight: bold;
		color: #006CC9;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.drbtn p::after {
	content: "MENU";
	display:block;
	position: absolute;
	bottom: 5px;
	width: 100%;
		text-align: center;
	}
.drbtn.action p::after {
	content: "CLOSE";
	bottom: -5px;
	}

.hambarg {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 2px;
  width: 29px;
  background: #000;
  -webkit-transition: ease 0.5s;
  transition: ease 0.5s
}

.hambarg:nth-child(1) {
  top: 20%;
  left: 50%
}

.hambarg:nth-child(2) {
  top: 32%;
  left: 50%
}

.hambarg:nth-child(3) {
  top: 44%;
  left: 50%
}

	.drbtn.action .hambarg{
		/*width: 20px;*/
	}
.drbtn.action .hambarg:nth-child(1) {
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg)
}

.drbtn.action .hambarg:nth-child(2) {
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0
}

.drbtn.action .hambarg:nth-child(3) {
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg)
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  z-index: 2;
}

#overlay.active {
  visibility: visible;
  background: rgba(0, 0, 0, .5);
  opacity: 1
}

.md-btn:hover {
  background-color: #6e6e6e
}
	
	.child{
		display: none;
	}

	#header{
		box-shadow: none;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 2;
	}
	#header #menu{
		width: 100%;
		padding: 5px 4% 5px;
		background-image: url("../images/bar.png");
		background-position: top center;
		background-repeat: repeat-x;
	}
	#header #menu ul{
		display: block;
	}
	#header #menu ul li .tab{
		display: none;
	}
	#header #menu li a{
		font-size: 1.6rem;
		color: #0B308E;
	}

	#header #menu ul li:not(.h_mail){
		padding: 21px 0 18px;
	}
	#header #menu .h_mail{
		border: none;
		padding: 40px 0 0;
	}
	#header #menu .h_mail a{
		width: 100%;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 60px;
		box-shadow: 0 3px 6px rgba(0,0,0,.16);
		padding: 0;
		font-size: 1.4rem;
	}
	#header #menu .h_mail a::before{
		width: 22px;
		height: 17px;
		margin-right: 19px;
		position: relative;
		top: 1px;
	}
	#header #menu ul li.h_privacy{
		border:none;
		padding: 40px 0 18px;
	}
	#header #menu .h_privacy a{
		font-size: 1.2rem;
	}
	#header .h_yoyaku{
		position: static;
		width: 100%;
		margin: 50px 0;
	}
	.mv_nav{
		display: none;
	}
	#header.is-show{
		display: none;
	}
	#menu .f_add_box{
		margin: 15px auto auto;
		width: 100%;
	}
	#menu .f_add_box .tellink a{
		color: #000;
	}
	.gmap_link a{
		color: #fff;
	}
	.f_add{
		font-size: 1.4rem;
	}
	#menu .f_open{
		font-size: 1.4rem;
		margin-top: 15px;
	}
	#header #menu ul.f_sns{
		display: flex;
		justify-content: center;
	}
	#header #menu ul.f_sns li{
		width: 40px;
		border: none;
	}
	#header #menu ul.f_sns li + li{
		margin-left: 15px;
	}
}

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


	
}