@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){
  /*必要ならばここにコードを書く*/
}


/* スマホでもフッターウィジェットを表示する */
@media (max-width: 768px){
  .footer-widgets {
    display: block !important;
  }
  .footer-widget-area {
    display: block !important;
  }
}

/* ページ送りナビ 前の記事（左）に「古い記事」ラベルを追加 */
.prev-post-title::before {
    content: "古い記事";
    display: block;
    font-size: 0.75em;
    color: #666;
    margin-bottom: 4px;
}

/* ページ送りナビ 次の記事（右）に「新しい記事」ラベルを追加 */
.next-post-title::before {
    content: "新しい記事";
    display: block;
    font-size: 0.75em;
    color: #666;
    margin-bottom: 4px;
}


/* 記事上部にシンプルな前後ナビを追加 にて文字色とセンタリングを指定 (ここから) */
.simple-prev-next {
    display: flex;
    justify-content: center; /* 全体を中央寄せ */
    gap: 4em; /* ←→ の間にスペースを作る（4文字相当） */
    font-size: 0.9em;
    margin-bottom: 20px;
}

.simple-prev-next .prev a,
.simple-prev-next .next a {
    text-decoration: none;
    color: inherit;
}

.simple-prev-next a {
    color: -webkit-link !important;
    text-decoration: underline;
}

.simple-prev-next a:visited {
    color: -webkit-visited-link !important;
}
/* 記事上部にシンプルな前後ナビを追加 にて文字色とセンタリングを指定 (ここまで) */



/* 大きい画像を高さ500pxで表示してスクロールする */
.scrollable-box {
  max-height: 500px;
  overflow-y: auto;
}


/* ---------------------------------- */
/* スマホ版Rinker の仕掛け (ここから) */

/* ================================
   PC版との切り替えCSS
   ================================ */
@media screen and (max-width: 768px) {
  .yyi-rinker-contents { display: none !important; }
}

@media screen and (min-width: 769px) {
  .rinker-mobile { display: none !important; }
}

/* ================================
   スマホ版Rinker 全体ラッパー
   ================================ */
.rinker-mobile {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* ================================
   横スクロール外側コンテナ
   ================================ */
.rinker-mobile .rinker-scroll-wrapper {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: auto; /* 慣性なし（ピタッと止まる） */
  padding-left: 10px; /* 最初のカードの入りを整える */
  padding-right: 0;
  box-sizing: border-box;

  /* スクロールバー完全非表示 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.rinker-mobile .rinker-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* ================================
   カード本体（1枚）
   ================================ */
.rinker-mobile .rinker-card {
  width: 85%; /* 見切れ15%を安定させる */
  background: #fff;
  border-radius: 0; /* カードの丸みは不要 */
  padding: 0; /* 内側余白ゼロで情報密度UP */
  margin-right: 6px; /* 控えめな外側余白 */
  box-sizing: border-box;
  flex-shrink: 0; /* 横スクロールで潰れない */

  /* 極薄シャドウ（存在を感じさせないレベル） */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ================================
   画像エリア
   ================================ */
.rinker-mobile .rinker-image-wrap {
  margin: 10px 0; /* 画像の呼吸を保つ黄金比 */
}

.rinker-mobile .rinker-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center; /* 上下均等トリミング */
}

/* ================================
   タイトル（商品名）
   ================================ */
.rinker-mobile .rinker-title {
  font-size: 0.92em;
  font-weight: 500; /* 情報の芯を残す */
  color: #000; /* 完全な黒で視認性と誠実さ */
  line-height: 1.15; /* 情報密度を上げた最適値 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 2行制限 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

/* ================================
   ボタン共通
   ================================ */
.rinker-mobile .rinker-btn {
  width: 75%;
  font-size: 0.92em;
  border-radius: 6px; /* 控えめで押しやすい丸み */
  margin: 6px auto;
  display: block;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;

  /* ラベルは折り返しOK（誠実） */
  white-space: normal;
  word-break: break-word;
  line-height: 1.25;

  /* 極薄シャドウ（カードより少しだけ濃い） */
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}

/* ================================
   ボタン色（PC版と同じ色を踏襲）
   ================================ */
.rinker-mobile .rinker-btn-amazon {
  background: #ff9900;
  color: #fff;
}

.rinker-mobile .rinker-btn-rakuten {
  background: #bf0000;
  color: #fff;
}

.rinker-mobile .rinker-btn-yahoo {
  background: #2d7df6;
  color: #fff;
}

.rinker-mobile .rinker-btn-url1,
.rinker-mobile .rinker-btn-url2,
.rinker-mobile .rinker-btn-url3,
.rinker-mobile .rinker-btn-url4 {
  background: #666;
  color: #fff;
}

/* スマホ版Rinker の仕掛け (ここまで) */
/* ---------------------------------- */