/* header
---------------------------*/
body:not(.home) .header {
  position: fixed;
  /* height: 104px; */
  /* height: 65px; */
  z-index: 100;
}

@media (max-width: 1024px) {
  body:not(.home) .header {
    /* height: 76px; */
    /* height: 65px; */
  }
}

.header {
  background: #fff;
  width: 100%;
}

.header__wrapper {
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  margin: 0 auto;
  top: 0;
  left: 0;
  background: #fff;
  position: relative;
}


.header__wrapper__logo {
  margin: 0;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.header__wrapper__logo a {
  line-height: 1;
  /* margin: 0 0 24px 0; */
  margin: 0;
  display: block;
}

.header__wrapper__logo a img {
  margin-right: 24px;
  vertical-align: middle;
}

/* .header__wrapper__logo a span {
  font-size: 20px;
  white-space: nowrap;
  font-weight: bold;
  position: relative;
  padding-left: 30px;
} */
.header__wrapper__logo span {
  font-size: 14px;
  white-space: nowrap;
  font-weight: 100;
  position: relative;
  padding-left: 30px;
}
/* .header__wrapper__logo a span::before {
  position: absolute;
  content: '';
  background: url(../image/icon_cart.png) no-repeat;
  background-size: contain;
  width: 27px;
  height: 27px;
  left: 0;
  bottom: 0;
} */
.header__wrapper__logo span::before {
  position: absolute;
  content: '';
  background: url(../image/icon_cart.png) no-repeat;
  background-size: contain;
  width: 24px;
  height: 24px;
  left: 0;
  /* bottom: 0; */
}
.header__wrapper__logo span::after {
  content: '';
  background: url(../image/icon_window.png) no-repeat;
  background-size: contain;
  position: absolute;
  width: 15px;
  height: 12px;
  top: 50%;
  transform: translateY(-50%);
  right: -20px;
}



.header__wrapper__btn {
  width: 40px;
  height: 60px;
  background: none;
  display: block;
  border: none;
}

.header__wrapper__btn span {
  position: relative;
  display: block;
  height: 2px;
  background: #707070;
  transition: all .3s;
}

.header__wrapper__btn span:before, .header__wrapper__btn span:after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background: #707070;
  transition: all .3s;
}

.header__wrapper__btn span:before {
  top: -10px;
}

.header__wrapper__btn span:after {
  bottom: -10px;
}

.header__wrapper__btn:focus {
  outline-color: transparent;
}


.header__wrapper__btn__label {
  transform: translate(-4px, 60%);
  margin: 0;
  white-space: nowrap;
}


.header__wrapper__gnav__sub__ul {
  list-style: none;
}

.header__wrapper__gnav__sub__ul > li {
  line-height: normal;
}

.header__wrapper__gnav__sub__ul > li:not(:last-child) {
  margin-right: 32px;
}

.header__wrapper__gnav__sub__ul > li a:hover {
  opacity: .8;
}

.header__wrapper__gnav__sub__ul > li a:hover figure {
  opacity: .8;
}


.header__wrapper__gnav__sub__ul__li--store a {
  position: relative;
  padding-right: 22px;
  padding-left: 34px;
}

.header__wrapper__gnav__sub__ul__li--store a:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background: url(https://www.kawajun.co.jp/wp/wp-content/themes/kawajun/assets/css/img/icon_cart.png) no-repeat center/contain;
}

.header__wrapper__gnav__sub__ul__li--store a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  background: url(https://www.kawajun.co.jp/wp/wp-content/themes/kawajun/assets/css/img/icon_window.png) no-repeat center/contain;
}

.header__wrapper__gnav__sub__ul__li--contact a {
  position: relative;
  padding-left: 34px;
}

.header__wrapper__gnav__sub__ul__li--contact a:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  background: url(https://www.kawajun.co.jp/wp/wp-content/themes/kawajun/assets/css/img/icon_mail.png) no-repeat center/contain;
}

.header__wrapper__gnav__sub__ul__li--corporate a {
  position: relative;
  padding-left: 14px;
}

.header__wrapper__gnav__sub__ul__li--corporate a:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 4px;
  border-color: transparent transparent transparent #000;
}




@media (min-width: 1024px) {
  .header__wrapper__gnav__main {
    /* height: 859px; */
    /* height: calc(100vh - 191px); */
    /*height: 100vh;*/
  }

}


.header__wrapper__gnav__main__ul {
  list-style: none;
  padding: 0 20px;
}


.header__wrapper__gnav__main__ul > li {
  /* border-bottom: 1px solid #707070; */
  transition: .3s;
}

/*.header__wrapper__gnav__main__ul li a:hover {
  background: #E3E3E3;
}*/

.header__wrapper__gnav__main__ul a {
  font-size: 16px;
  margin: auto;
  display: block;
  /* padding: 20px 16px 16px; */
  padding: 16px;
  border-bottom: 1px solid #707070;
  text-align: left;

}
.header__wrapper__gnav__main__ul #activities__menu a {
  padding-left: 32px;
  font-size: 16px;
}
#activities__btn {
  position: relative;
}
.activities__arrow {
  position: absolute;
  width: 7px;
  height: 7px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 22px;
  right: 20px;
  transition: .2s;

}
.collapsed .activities__arrow{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.is-openMenu .header__wrapper__btn span {
  background: transparent;
}

.is-openMenu .header__wrapper__btn span:before {
  top: 0;
  transform: rotate(45deg);
}

.is-openMenu .header__wrapper__btn span:after {
  top: 0;
  transform: rotate(-45deg);
}

.is-openMenu .header__wrapper__gnav__main {
  right: 0;
}

select#lang {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
  position: fixed;
  right: 150px;
  top: 22px;
  position: absolute;
}

/*.header__wrapper__menu {
  display: flex;
}*/


.onlineshop {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 15px;
  right:150px;
  top: 20px;
  position: absolute;
  width: 210px;
  height: 33px;
}

.onlineshop:hover a .a{
  display: none;
}

.onlineshop a .b{
  display: none;
  margin-top: 2px;
  }
  
.onlineshop:hover a .b{
  display: block;
  }

 .onlineshop img {
  max-width: 100%;
  }
 .onlineshop .sub {
   position: absolute;
   width: calc(100% - 40px);
   top: 100%;
   left: 20px;
   background: #eeece6;
   display: none;
  }
 .onlineshop .sub  a {
   display: block;
   text-align: center;
   line-height: 2;
   border-bottom:1px solid #fff;
  }
.onlineshop:hover .sub {display: block;}

.open-search.on{background: none!important;}
.open-search.on:before,
.open-search.on:after{position: absolute; content: ''; width: 70%; left: 15%; height: 3px; top: 50%; margin-top: -1.5px;background: #fff;transform: rotate(45deg);-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);}
.open-search.on:after{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);}
.top-search{position: relative;display: none;padding-right: 50px;}
.top-search[rel="absolute"]{position: absolute; top: 100%; right: 0; z-index: 100; width: 100%;max-width: 320px;}
.top-search .text{width: 100%; height: 44px; line-height: 44px; border: 0;background: #fff; padding: 0 10px;color: #999;}
.top-search .text.focus{color: #333;}
.top-search .btn{position: absolute; right: 0; top: 0; height: 100%; width: 50px;background-repeat: no-repeat;background-position: center center;}

.header .open-search{position: absolute;right: 0; top: 0;width: 5.3125em;height:5.3125em; background: url(../images/search_btn.png) no-repeat center; cursor: pointer; }
.header .top-search{position: absolute;right: 0; top: 100%; background-color: #fff; width: 100%;max-width: 400px;display: none;padding-right: 50px;box-shadow: 0 0 10px 0 #888;}
.header .top-search .btn{position: absolute;right: 0;top: 0;height: 100%;width: 50px;background-repeat: no-repeat;background-position: center center; background-image: url(../images/search_btn_h.png); background-color:#000;cursor: pointer;}
.header .open-search.on:before,
.header .open-search.on:after{width: 40%; left: 30%;background-color: rgba(0,0,0,1);}

@media (min-width: 1024px) {
  .header__wrapper {
    padding: 5px 20px;
  }
  .header__wrapper__menu {flex: 0 0 60%;}
  .header__wrapper__btn {display: none;}
  .header__wrapper__gnav__sub {margin-top: 10px;}
  .header__wrapper__gnav__sub__ul {display: flex;}
  .header__wrapper__gnav__main__ul {display: flex;justify-content: flex-end;padding:0;}
  .header__wrapper__gnav__main__ul a {padding-left:35px;padding-right:35px;border-bottom: 0;}
  .header__wrapper__gnav__main__ul .header__wrapper__gnav__main__ul__li ul {position: absolute;top:100%;background: #fff;}
  .header__wrapper__gnav__main__ul .header__wrapper__gnav__main__ul__li ul a {padding: 10px 35px;}
  /*.collapsed .activities__arrow {display: none;}*/
}
@media (min-width: 1600px) {
	.header__wrapper__menu {flex: 0 0 70%;}
}

@media (min-width: 1824px) {
  .header__wrapper {
    /* padding: 15px 2.5%; */
  }
  /*.header__wrapper__gnav__main__ul {
    padding: 0 10%;
  }*/
}

@media (max-width:1600px) {
  .header__wrapper__gnav__main__ul a {padding-left:25px;padding-right:25px;}
  .activities__arrow {right: 10px;}
  .header__wrapper__gnav__main__ul .header__wrapper__gnav__main__ul__li ul a {padding:10px 25px;}
}
@media (max-width:1024px) {

  .header__wrapper__gnav__main {
    max-width: 279px;
  }
  .header .open-search{width:2.4em; height: 2.4em; top: 50%;margin-top: -1.2em; right: 20%;}
  .header .open-menu{width:2.4em; height: 2.4em; right: 0;}
  .header .open-menu i{width: 60%; left: 20%;background-color: rgba(0,0,0,1);}
  .header .open-search.on:before, .header .open-search.on:after {width: 70%;left:16%;}
}
@media (max-width: 1024px) {
  .header__wrapper {
    padding: 0 10px;
    justify-content: space-between;
  }
  .news__wrapper > .row {
    padding: 5% 0;
  }
  .header__wrapper__logo a {
    margin: 0;
    /* display: flex;
    flex-direction: column; */
  }
  .header__wrapper__logo a img {
    margin-right: 12px;
  }
  .header__wrapper__logo a span {
    /* font-size: 18px; */
  }
  .header__wrapper__btn {
    position: relative;
  }
  .header__wrapper__btn span {
    background: #fff;
  }
  .header__wrapper__btn span:before, .header__wrapper__btn span:after {
    background: #fff;
  }
  .header__wrapper__btn:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -50%;
    right: -50%;
    bottom: 0;
    margin: auto;
    width: calc(100% + 24px);
    height: 100%;
    background: #000;
  }

  .header__wrapper__btn__label {
    color: #fff;
  }
  .header__wrapper__gnav__main {
    max-width: none;
    margin-top: 76px;
    background: rgba(255, 255, 255, 1);
  }
  .header__wrapper__gnav__main {
    margin-top: 60px;
    position: absolute;
    top: 0;
    right: -100%;
    transition: all .5s;
    background: #fff;
    z-index: 101;
    max-width: 279px;
    width: 100%;
  }
  .header__wrapper__gnav__main__ul {
    overflow-y: scroll;
    height: 100vh;
  }
  .header__wrapper__gnav__main__ul {
    max-width: none;
    padding: 0;
  }
  select#lang {
    margin: 30px auto 0;
    position: unset;
    top: unset;
    right: unset;
  }
}
@media (max-width: 330px) {
  .header__wrapper__logo a img {
    width: 93px;
  }
}