header{ width: 100%;}
header .headerWrap{ width: 90%; margin: 0 5%; /*display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;*/ height: 120px; padding: 20px 0 16px; box-sizing: border-box;}
header .headerWrap::after{ content:""; display:block; clear:both;}
header .logoArea{ width: 430px; float: left;}
header .logoArea::after{ content:""; display:block; clear:both;}
header .logoArea .logo{ width: 70px; margin-right: 20px; float: left;}
header .logoArea .logo img{ width: 70px;}
header .logoArea h1{ font-size: 30px; margin: 0; float: left;}
header .logoArea h1 strong{ font-size: 14px; font-weight: normal; display: block;}
header .wrapNavi{ float: right; height: 77px;}

/*-- ナビ --*/
header .wrapNavi #humberger{ display: none;}
header .wrapNavi #navi ul{ margin-top: 40px; box-sizing: border-box;}
header .wrapNavi #navi ul::after{ content:""; display:block; clear:both;}
header .wrapNavi #navi ul li{ float: left; margin-right: 2.9vw; font-size: 16px;}
header .wrapNavi #navi ul li.yt{ width: 30px; margin: 5px 20px 0 0;}
header .wrapNavi #navi ul li.yt img{ width: 30px;}
header .wrapNavi #navi ul li.insta{ width: 30px; margin: 5px 0 0;}
header .wrapNavi #navi ul li.insta img{ width: 30px;}
header .wrapNavi #navi ul li a{ position: relative; display: inline-block; color: #3E3A39; text-decoration: none;}
header .wrapNavi #navi ul li a::after{
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #3E3A39;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
header .wrapNavi #navi ul li a:hover{ text-decoration: none;}
header .wrapNavi #navi ul li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
header .wrapNavi #navi ul li.yt a::after,
header .wrapNavi #navi ul li.insta a::after{ content: none;}

@media screen and (min-width:768px) {
header .wrapNavi #navi{ display: block !important;}
}

@media screen and (max-width: 767px){
	
header{ width: 100%; background: #FFF; position: fixed; z-index: 1000;}
header .headerWrap{ width: 90%; margin: 0 5%; height: 100%; padding: 30px 0 10px; box-sizing: border-box; position: relative;}
header .headerWrap::after{ content:""; display:block; clear:both;}
header .logoArea{ width: auto; float: none;}
header .logoArea::after{ content:""; display:block; clear:both;}
header .logoArea .logo{ width: 30px; margin-right: 4%; float: left;}
header .logoArea .logo img{ width: 30px;}
header .logoArea h1{ font-size: 20px; margin: 0; float: left;}
header .logoArea h1 strong{ font-size: 10px; font-weight: normal; display: block; position: absolute; top: 10px; left: 0;}
header .wrapNavi{ float: none; height: auto;}
	
/*-- ナビ --*/
header .wrapNavi #humberger{ display: block; width: 30px; height: 30px; position: absolute; z-index: 101; right: 0; top: 28px; transition: top 0.5s; cursor: pointer;}
header .wrapNavi #humberger.fixed{ position: fixed; right: 5%; top: 28px;}
header .wrapNavi #humberger.active{ position: fixed; right: 5%; top: 28px;}
header .wrapNavi #humberger span{ display: block; background: #439DB9; height: 3px; width: 100%; position: absolute; transition: all 0.5s; top: calc(50% - 1px); left:0}
header .wrapNavi #humberger span:nth-child(2){ transform: translateY(-10px);}
header .wrapNavi #humberger span:nth-child(3){ transform: translateY(10px);}
header .wrapNavi #humberger.active span:nth-child(1){ left: 50%; width: 0; }
header .wrapNavi #humberger.active span:nth-child(2){ transform: rotate(225deg) translateY(0);}
header .wrapNavi #humberger.active span:nth-child(3){ transform: rotate(-225deg) translateY(0);}
header .wrapNavi #navi{ position: fixed; overflow: scroll; top: 0; left: 0; width: 100%; height: 100vh; background: #ffffff; z-index: 100; display: none;}
header .wrapNavi #navi .innerNavi{ display: flex !important; justify-content: center; align-items: center; height: auto; min-height: 80%; width: auto; padding: 5% 10% 10%;}
header .wrapNavi #navi ul{ width: 90%; padding: 0; margin: 0 auto; box-sizing: border-box; }
header .wrapNavi #navi ul li{ width: 100%; float: none; margin: 0 0 10%; font-size: 16px; text-align: center;}
header .wrapNavi #navi ul li.yt{ width: 30px; margin: 0 auto 10%;}
header .wrapNavi #navi ul li.yt img{ width: 30px;}
header .wrapNavi #navi ul li.insta{ width: 30px; margin: 0 auto;}
header .wrapNavi #navi ul li.insta img{ width: 30px;}
header .wrapNavi #navi ul li:last-child{ margin-bottom: 0;}
header .wrapNavi #navi ul li a{ display: block; transition: opacity 0.5s; color: #3E3A39; text-decoration: none; font-size: 20px; font-weight: bold; margin: 0 auto; width: 100%;}
header .wrapNavi #navi ul li a::after{ content: none;}
header .wrapNavi #navi ul li a:hover{ color: #439DB9; text-decoration: none;}
}