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

/* ホームのカード設定 */
.my-entry-card-long-thumb{
float: left;
margin-top: 3px;
position: relative;
}
.my-entry-card-long-thumb img{
width: 200px;
max-height: 150px;
object-fit: cover;
}

.home .my-entry-card-hello .title, .home .my-entry-card-long .title{
font-size: 0.9em;
font-weight: bold;
color: var(--list-entry-title-color);
padding: 0.4em 0;
}
/*480px以下*/
@media screen and (max-width: 480px){
.my-entry-card-long-thumb{
margin-right: 10px;
}
.my-entry-card-long-thumb img{
width: 130px;
max-height: 150px;
object-fit: cover;
}
}
/* こんにちはの文字設定 */
/* 世界の言葉のルビ */
.slug-hello .ruby, .slug-thank .ruby, .slug-love .ruby{
font-size: 0.8em;
}
/* 世界の言葉は太字 */
.slug-hello .word, .slug-thank .word, .slug-love .word{
font-weight: bold;
}
rt{
/*font-size: 0.5em;*/
}
.word{
font-size: 1.1em;
}
.pn{
background-color: #e6e6e6;
font-size: 0.8em;
display: inline;
}
.pn:before{
content: "[ ";
}
.pn:after{
content: " ]";
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}