@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.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.searchform {
  line-height: 1;
  position: relative;
  margin: 2em 0;
}
 
.searchfield {
  box-sizing: border-box;
  width: 100%;
  padding: .75em;
  border: 1px solid #bbb;
  border-radius: 4px;
  background-color: #efefef;
}
 
.searchsubmit {
  position: absolute;
  top: 50%;
  right: .75em;
  display: block;
  padding: 0;
  cursor: pointer;
  transform: translateY(-50%);
  color: #000;
  border: none;
  background: transparent;
}
 
.searchsubmit:hover {
  opacity: .6;
}

/*プルダウン表示設定*/
.performance-type {
    display: block !important;
    visibility: visible !important;
}
/*年と月のプルダウン左右表示設定*/
.search-container {
    display: flex;
}

.year
.month {
    flex: 1;
    margin-right: 10px; /* 適宜調整 */
}

/*--------------------------------------
表のデザインを変更
--------------------------------------*/
/*--- 表全体(table) ---*/
table.gekkanpiano {
    border-bottom: 1px solid #e6e6e6; /* 表の一番下の線 */
    border-top: none;
    border-left: none;
    border-right: none;
}
/*--- ヘッダーセル(th) ---*/
table.gekkanpiano th {
    border-radius: 10px 10px 0 0; /* 丸み（※ヘッダーセルが縦の場合は削除）*/
    padding: 1.2em .7em; /* 余白（上下　左右） */
    background-color: #8fbbea; /* 背景色 */
    color: #fff; /* 文字の色 */
    letter-spacing: 0.15em; /* 文字の間隔 */
    text-align: center; /* 中央揃え */
    border: none; /* 線削除 */
}
/*--- 行（横方向）(tr) ---*/
table.gekkanpiano tr {
    text-align:center; /* 中央揃え */
}
table.gekkanpiano tr:not(:last-child) { /* 最後の行以外に適用 */
    border-bottom: 1px solid #e6e6e6; /* 下線 */
}
/*--- ヘッダーセル以外のセル(td) ---*/
table.gekkanpiano td {
    padding: 1em 2em; /* 余白（上下　左右） */
    border:none; /* 線を削除 */
}
table.gekkanpiano td:last-child { /* 最後のセルのみ適用 */
    border-right: 1px solid #e6e6e6; /* 右線 */
}
table.gekkanpiano td:not(last-child) { /* 最後のセル以外に適用 */
    border-left: 1px solid #e6e6e6; /* 左線 */
}

/*--------------------------------------
星の表示設定
--------------------------------------*/
.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

/*--------------------------------------
P表紙画像センタリング
--------------------------------------*/
.P-imageurl {
    text-align: center;
  }

/*--------------------------------------
アクションボタン
--------------------------------------*/
.buttons-container {
    display: flex;
    justify-content: space-between;
}

button.simplefavorite-button {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    position: relative;
    cursor: pointer;
    background: transparent;
    border: 1px solid;
    color: #afa9aa;
    font-size: 13px;
    border-radius: 20px;
    padding: 3px 13px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    margin-right: 10px;
}

/*--------------------------------------
お気に入りページボタン
--------------------------------------*/

.star-button {
    display: inline-block;
    width: 50px;       /* ボタンの幅 */
    height: 50px;      /* ボタンの高さ */
    line-height: 50px; /* テキストの垂直位置を中央に */
    background-color: #ffd900; /* 背景色 */
    border: none;
    border-radius: 50%; /* 正円にする */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s; /* ホバー時のアニメーション */
    text-decoration: none; /* リンクの下線を消す */
　 opacity: 1;
}

.star-icon {
    font-size: 24px;
    color: white;      /* アイコンの色 */
}

.star-button:hover {
    opacity: 0.7;
}

/*--------------------------------------
固定ページ日付非表示
--------------------------------------*/
.page .date-tags {
display: none;
}

/*
* 新着記事一覧ショートコード用
*/
.news-list .news-list-inner {
 padding: 20px 5px;
 border: 2px solid #f5f5f5;
}
.archive .news-list .news-list-inner {
 background: #fff;
 padding: 20px;
}
.news-list ul {
 list-style: none;
 margin: 0 0 20px;
}
.news-list li {
 padding: 10px;
 border-bottom: 1px solid #ddd;
}
.news-list a {
 color: #333;
 text-decoration-line: none;
}
.news-list a:hover {
 opacity: 0.6;
}
.news-list a.wp-block-button__link {
 color: #fff;
}
.news-list a.wp-block-button__link:hover {
 color: #F87474;
}
.news-list .news_date {
 margin: 0;
 font-size: 14px;
}
.news-list .news_title {
 margin: 0;
 font-size: 18px;
 line-height: 30px;
 padding-top: 10px;
 padding-bottom: 10px;
}


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

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

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