@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-mobile-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 85%;
  flex-shrink: 0;
  margin-right: 6px;
  padding: 0;
  background: #fff;

  /* 枠線（上下左右すべて確実に出る） */
  outline: 1px solid #bbb;
  outline-offset: 0;

  /* 影（PC版の雰囲気を残す） */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}



/* ================================
   画像エリア
   ================================ */
.rinker-mobile .rinker-image-wrap {
  width: 40%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
/*  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-buttons .rinker-btn-url1 {
  background: #4072B3 !important;
  color: #fff !important;
}

.rinker-mobile .rinker-buttons .rinker-btn-url2 {
  background: #00b7ce !important;
  color: #fff !important;
}

.rinker-mobile .rinker-buttons .rinker-btn-url3 {
  background: #6f63ad !important;
  color: #fff !important;
}

.rinker-mobile .rinker-buttons .rinker-btn-url4 {
  background: #63ad87 !important;
  color: #fff !important;
}



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



/* 左側：画像エリアを固定幅に */
.rinker-mobile .rinker-image-wrap {
  width: 40%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
}

/* 右側：タイトル＋ボタンの塊を伸びる側に */
.rinker-mobile .rinker-title,
.rinker-mobile .rinker-btn {
  width: 100%;
}

/* タイトルの余白を少し整える */
.rinker-mobile .rinker-title {
  margin: 8px 8px 4px 0;
}

/* ボタンは右カラム内で縦積み */
.rinker-mobile .rinker-btn {
  width: 80%;
  margin-left: 0;
}


/* 左：画像エリア */
.rinker-mobile .rinker-image-wrap {
  width: 40%;
  padding: 8px;
  box-sizing: border-box;
}

/* 右：タイトル＋ボタン群 */
.rinker-mobile .rinker-content {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 8px;
  box-sizing: border-box;
}

/* タイトルは上に */
.rinker-mobile .rinker-title {
  margin-bottom: 8px;
}

/* ボタンは右カラム内で縦積み */
.rinker-mobile .rinker-btn {
  width: 100%;
  margin-left: 0;
}


/* ボタン群を横並びに */
.rinker-mobile .rinker-buttons {
  display: flex;
  flex-direction: row;
  gap: 6px; /* ボタン間の余白 */
  flex-wrap: wrap; /* はみ出す場合は折り返し */
}

/* ボタンは横並びの中で均等に */
.rinker-mobile .rinker-buttons .rinker-btn {
  flex: 1;
  margin: 0;
  text-align: center;
}



@media screen and (max-width: 768px) {
  .rinker-mobile .rinker-buttons {
    display: block;
  }
  .rinker-mobile .rinker-buttons .rinker-btn {
    width: 100%;
    margin: 6px 0;
  }
}
@media screen and (min-width: 769px) {
  .rinker-mobile .rinker-buttons {
    display: flex;
    flex-direction: row;
    gap: 6px;
  }
  .rinker-mobile .rinker-buttons .rinker-btn {
    flex: 1;
    margin: 0;
  }
}

.rinker-mobile .rinker-btn {
  font-size: 12px !important; /* ← 今より少し小さく */
}

.rinker-mobile .rinker-mobile-card {
  box-shadow: inset 0 0 0 1px #bbb !important;
}