@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

    .nav-wrap {
      position: relative;
    }
    .scroll-nav {
      width: 100%;
      background: #555; /* メニューの背景色 */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; /* 慣性スクロール */
    }
    .scroll-nav ul {
      max-width: 1060px; /* メニューの最大幅 */
      min-width: 770px; /* メニューの最小幅 */
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      list-style: none;
      padding-right: 25px; /* 右側の固定分余白を空ける */
    }
    .scroll-nav ul li {
      float: left;
      width: 110px; /* メニューの個別の幅 */
      text-align: center;
    }
    .scroll-nav ul li:hover {
      background: #222; /* マウスホバー時の背景色 */
    }
    .scroll-nav ul li a {
      display: inline-block;
      color: #fff; /* メニューの文字色 */
      text-decoration: none;
    }
    .next-btn { /* 右側に固定する部分 */
      position: absolute;
      top: 0;
      right: 0;
      width: 25px; /* 固定部分の幅 */
      height: 40px; /* メニューの高さに合わせる */
      line-height: 40px;
      background: #fff;
      color: #555;
    }
    @media only screen and (min-width: 771px) { /* PCサイズでの指定 */
    .scroll-nav ul {
      padding: 0;
    }
    .scroll-nav ul li {
      width: 14.2%; /* メニューの個別の幅 */
    }
    .next-btn {
      display: none; /* 右側の固定部分を非表示 */
    }
    }

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

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

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

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

/************************************
** レスポンシブ広告　ダブルレクタングル用
https://lets-hack.tech/affiliate/adsense-double-responsive/
************************************/

@media (max-width: 480px) {
  .up480 {
    display: none;
  }
}

@media (min-width: 480px) {
  .col {
    float: left;
    margin-bottom: 2%;
  }

  .col2-wrap>.col:nth-child(odd) {
    margin-right: 2%;
  }

  .col2-wrap>.col {
    width: 49%;
  }
}

.col2-wrap {
  margin: 0 0 1em;
}

.col {
  width: auto;
  margin-left: 0;
  background-color: transparent;
  text-align: -webkit-center;
  text-align: center;
}