@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; /* 右側の固定部分を非表示 */
    }
    }

/* 福井弁カード */
.card-wrap{

}
/* 標準語・福井弁ラベル */
.tokyo, .fukui{
color: #fff;
font-weight: bold;
padding: 5px 10px;
margin-right: 10px;
font-size: 16px;
line-height: 3rem;
border-radius: 5px;
}
.tokyo {
background-color: blue;
}
.fukui {
background-color: red;
}
.audiojs{
margin-left: 10px;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}