@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


header {
  width:80%;
  margin:0 auto;
}
.globalnav-wrap {
  font-size:16px;
  color:#fff;
  background:#333;
  display:flex;
  justify-content:space-between; 
}
.globalnav {
  .dropdown-btn {
    position:relative;
    display:inline-block;
    padding:20px;
    cursor:pointer;
    &:hover {
      background:#666;
    }
  }
  .dropdown {
    z-index:1000;
    background:#666;
    position:absolute;
    left:0;
    top:55px;
    width:200px;
    padding:10px 20px;
    display:none;
    li {
      display:inline-block;
      margin:10px 0;
      a {
        color:#fff;
      }
    }
  }
  .nav-button-wrap,
  .open {
    display:block;
  }
  .close {
    display:block;
  }
}
@media screen and (max-width: 768px) {
  header {
    position:relative;
    width:100%;
  }
  .nav-button-wrap {
    display:block;
    position:absolute;
    right:0px;
    top:0px;
    z-index:1000;
    cursor: pointer;
    padding:15px;
    height:53px;
  }
  .globalnav {
    display:none;
    .close {
      display:none;
    }
  }
  .globalnav-wrap.open .globalnav {
    display:block;
    padding:40px 20px 0;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    li {
      display:block;
    }
    li:hover {
      background:transparent;
    }
    .dropdown {
      display:block;
      position:static;
      background:transparent;
    }
  }