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

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

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

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

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

.youtube-red{color: #Ff0000}

/* ===============================================
   アフィリエイトリンク共通スタイル
=============================================== */

/* 共通リスト整形 */
ul.kaerebatextlink,
ul.kaerebatextlink li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.kaerebatextlink li {
  margin-bottom: 0.35em;
}

/* 共通ボタンスタイル */
a[href*="soundhouse.co.jp"],
a[href*="ishibashi.co.jp"],
a[href*="ikebe-gakki.com"],
a[href*="amazon.co.jp"],
a[href*="rakuten.co.jp"],
a[href*="shopping.yahoo.co.jp"],
a[href*="youtube.com"],
a[href*="mercari.com"] {
  display: inline-block;
  padding: 0.35em 0.8em;
  margin-bottom: 0.4em;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  border: 1px solid #eee;
  transition: all 0.18s ease;
  line-height: 1.5;
}

/* アイコン共通 */
a[href*="soundhouse.co.jp"]::before,
a[href*="ishibashi.co.jp"]::before,
a[href*="ikebe-gakki.com"]::before,
a[href*="amazon.co.jp"]::before,
a[href*="rakuten.co.jp"]::before,
a[href*="shopping.yahoo.co.jp"]::before,
a[href*="youtube.com"]::before,
a[href*="mercari.com"]::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.4em;
  vertical-align: middle;
}

/* ===============================================
   ショップ別カラー（楽器店は塗り、他は白）
=============================================== */

/* サウンドハウス */
a[href*="soundhouse.co.jp"] { background: #6c3578; color: #fff; border: none; }
a[href*="soundhouse.co.jp"]::before { content: "\f001"; color: #fff; }

/* イシバシ */
a[href*="ishibashi.co.jp"] { background: #b30000; color: #fff; border: none; }
a[href*="ishibashi.co.jp"]::before { content: "\f001"; color: #fff; }

/* イケベ */
a[href*="ikebe-gakki.com"] { background: #990000; color: #fff; border: none; }
a[href*="ikebe-gakki.com"]::before { content: "\f001"; color: #fff; }

/* Amazon / 楽天 / Yahoo / YouTube / メルカリ (白背景) */
a[href*="amazon.co.jp"], a[href*="rakuten.co.jp"], a[href*="shopping.yahoo.co.jp"], 
a[href*="youtube.com"], a[href*="mercari.com"] { background: #fff; color: #333; }

a[href*="amazon.co.jp"]::before { content: "\f270"; font-family: "Font Awesome 5 Brands"; color: #e68a00 !important; }
a[href*="rakuten.co.jp"]::before { content: "\f02b"; color: #bf4d4d !important; }
a[href*="shopping.yahoo.co.jp"]::before { content: "\f290"; color: #d86666 !important; }
a[href*="youtube.com"]::before { content: "\f167"; font-family: "Font Awesome 5 Brands"; color: #ff0000 !important; }
a[href*="mercari.com"]::before { content: "\f49e"; color: #e06633 !important; }

/* ホバー処理（共通） */
a[href*="soundhouse.co.jp"]:hover { background: #7a4ba0; opacity: 0.9; }
a[href*="ishibashi.co.jp"]:hover { background: #d33333; }
a[href*="ikebe-gakki.com"]:hover { background: #cc3333; }
a[href*="amazon.co.jp"]:hover, a[href*="rakuten.co.jp"]:hover, a[href*="shopping.yahoo.co.jp"]:hover,
a[href*="youtube.com"]:hover, a[href*="mercari.com"]:hover { background: #f9f9f9; border-color: #ccc; }

/* 既存アイコン非表示 */
i.fab.fa-youtube { display: none; }

/* ===============================================
   モバイル最適化（100%幅 ＋ 中央揃え）
=============================================== */
@media (max-width: 600px) {
  /* リスト自体の余白調整 */
  ul.kaerebatextlink {
    display: flex;
    flex-direction: column;
    align-items: center; /* リスト項目を中央に */
  }
  
  ul.kaerebatextlink li {
    width: 100%;
    text-align: center;
  }

  a[href*="soundhouse.co.jp"],
  a[href*="ishibashi.co.jp"],
  a[href*="ikebe-gakki.com"],
  a[href*="amazon.co.jp"],
  a[href*="rakuten.co.jp"],
  a[href*="shopping.yahoo.co.jp"],
  a[href*="youtube.com"],
  a[href*="mercari.com"] {
    display: flex;
    justify-content: center; /* 文字を中央へ */
    align-items: center;
    width: 100%;
    max-width: 400px; /* 広がりすぎ防止（お好みで） */
    margin-left: auto;
    margin-right: auto;
    padding: 0.6em 1em;
    font-size: 0.95rem;
  }
}

/* =======================================
   TablePress レスポンシブ対応＆横スクロール
======================================= */

/* テーブルをラッパーで自動スクロール */
.tablepress {
  display: block;                     /* ブロック表示で横スクロール可能に */
  overflow-x: auto;                   /* 横スクロール有効 */
  -webkit-overflow-scrolling: touch;  /* iOS慣性スクロール */
  max-width: 100%;                     /* 親幅に合わせる */
  margin-bottom: 1em;                 /* 下に余白 */
}

/* セルの見やすさ向上 */
.tablepress th,
.tablepress td {
  padding: 6px 10px;
  border: 1px solid #ccc;
  text-align: left;
  word-wrap: break-word;              /* 長い文字は折り返す */
  white-space: normal;                /* 改行を有効にする */
}

/* ヘッダーの背景色 */
.tablepress th {
  background-color: #f2f2f2;
}

/* 小さい画面用の調整 */
@media (max-width: 600px) {
  .tablepress th,
  .tablepress td {
    padding: 4px 6px;                 /* スペースを少し減らす */
    font-size: 14px;                  /* 文字を少し小さく */
  }
}