@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; }
  .rinker-mobile .rinker-buttons {
    display: block;
  }
  .rinker-mobile .rinker-buttons {
    width: 100%;
    margin: 6px 0;
  }
}

@media screen and (min-width: 769px) {
  .rinker-mobile { display: none !important; }
  .rinker-mobile .rinker-buttons {
    display: flex;
    flex-direction: row;
    gap: 6px;
  }
  .rinker-mobile .rinker-buttons {
    flex: 1;
    margin: 0;
  }
}

/* ================================
   スマホ版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;
  box-shadow: inset 0 0 0 1px #bbb !important;
}


/* ================================
   画像エリア
   ================================ */
.rinker-mobile .rinker-image-wrap {
  width: 40%;
  margin: 0 auto;
  padding: 8px;
  box-sizing: border-box;
  height: 100%;	
  overflow: hidden;
  border-radius: 8px;
  text-align: center;
}

.rinker-mobile .rinker-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center center; /* トリミング 値の順番は左右 上下 */	
}



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

  margin: 0 auto;
	
}



/* ================================
   タイトル（商品名）
   ================================ */
.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;
  width: 100%;
  margin: 8px 8px 4px 0;
}


/* ================================
   ボタン共通
   ================================ */
.rinker-mobile .rinker-btn {
  width: 100%;
  margin-left: 0; /* ←ボタン縦積みのため横に並ぶものがない。だから意味をなさないけど保険で設定しておく */
   font-size: 12px;
  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;
  color: #fff;
}

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

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

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


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



/* -------------------------------------------------------------- */
/* Rinker(PC表示用) 画像が無い時にダミー画像を差し込む (ここから) */

/* .yyi-rinker-image が空のときにダミー画像を表示 */
.yyi-rinker-image:empty {
  width: 128px !important;
  height: 128px !important;
  background: url("https://nagan.blog/hopewreck/item-space/common-use/rinker_no_img.jpg")
              center / cover no-repeat !important;
  border-radius: 4px;
}

/* Rinker(PC表示用) 画像が無い時にダミー画像を差し込む (ここまで) */
/* -------------------------------------------------------------- */


/* ------------------------------------------------ */
/* Rinker(PC表示用) タイトルリンクを消す (ここから) */

.yyi-rinker-title a {
  pointer-events: none;
  cursor: default;
  text-decoration: none !important;
  color: inherit !important;
}

/* Rinker(PC表示用) タイトルリンクを消す (ここまで) */
/* ------------------------------------------------ */



/**/
.yyi-rinker-image {
  width: 175px !important;
  height: 175px !important;
  background-size: cover !important;
  background-position: center !important;
}
/**/



/* PC版Rinker画像ボックスを完全に上書き */
.yyi-rinker-contents .yyi-rinker-image {
  width: 175px !important;
  height: 175px !important;
  min-width: 175px !important;
  min-height: 175px !important;
  max-width: 175px !important;
  max-height: 175px !important;
	

  display: block !important; /* Rinkerのflexを無効化 */
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
	
}

.yyi-rinker-contents .yyi-rinker-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.yyi-rinker-image:empty {
  background-image: url("https://nagan.blog/hopewreck/item-space/common-use/rinker_no_img.jpg") !important;
  background-size: contain !important; /* ここで contain を指定 */
}





.yyi-rinker-contents .yyi-rinker-image {
  width: 175px !important;
  height: 175px !important;
  min-width: 175px !important;
  min-height: 175px !important;
  max-width: 175px !important;
  max-height: 175px !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
}

.yyi-rinker-contents .yyi-rinker-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: auto;
}

.yyi-rinker-image:empty {
  background-image: url("https://nagan.blog/hopewreck/item-space/common-use/rinker_no_img.jpg") !important;
  background-size: contain !important;
}

/* PC版Rinker画像枠の flex を完全に無効化 */
.yyi-rinker-contents .yyi-rinker-image {
  display: block !important;
}



/* 最終決定 */
.yyi-rinker-contents .yyi-rinker-image {
  width: 175px !important;
  height: 175px !important;
  min-width: 175px !important;
  min-height: 175px !important;
  max-width: 175px !important;
  max-height: 175px !important;

  display: block !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.yyi-rinker-image:empty {
  background-image: url("https://nagan.blog/hopewreck/item-space/common-use/rinker_no_img.jpg") !important;
  background-size: contain !important;
}


/* PC版Rinker：右側の上下センタリング */
.yyi-rinker-contents .yyi-rinker-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* ←上下センタリング */
  height: 175px !important; /* 画像と高さを揃える */
  padding: 0 10px !important; /* 左右に少し余白 */
  box-sizing: border-box;
}

/* タイトルとボタン群の間に余白をつける */
.yyi-rinker-contents .yyi-rinker-title {
  margin-bottom: 12px !important; /* ←ここで距離を調整 */
}

/* ボタン群（ul）のデフォルト余白を消す */
.yyi-rinker-contents .yyi-rinker-links {
  margin: 0 !important;
  padding: 0 !important;
}



/* ウェルカム広告 ここから始まるよー */

/* ============================================
   ウエルカム広告（welcomeblock）最終版 CSS
   ============================================ */

/* --------------------------------------------
   0. 初期状態（絶対にチラ見えさせない）
   -------------------------------------------- */
.welcomeblock-container {
    display: none;              /* 初期は完全非表示（描画しない） */
    opacity: 0;                 /* フェードイン用 */
    transition: opacity 0.4s ease;
    pointer-events: none;       /* 非表示時はクリック不可 */

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background: rgba(0, 0, 0, 0.65);
    padding: 12px 0;
}

/* --------------------------------------------
   1. 表示状態（JS が付ける）
   -------------------------------------------- */
.welcomeblock-show {
    display: block !important;  /* inline-style を上書き */
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------
   2. フェードアウト（閉じるとき）
   -------------------------------------------- */
.welcomeblock-container.welcomeblock-fadeout {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
}

/* --------------------------------------------
   3. × ボタン
   -------------------------------------------- */
.welcomeblock-close-btn {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 28px;
    height: 28px;

    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 20px;
    line-height: 28px;
    text-align: center;

    border-radius: 50%;
    cursor: pointer;
    z-index: 10000;
    backdrop-filter: blur(2px);
}

/* --------------------------------------------
   4. 横スクロール帯
   -------------------------------------------- */
.welcome-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    padding: 10px 12px;
    scrollbar-width: none;
}
.welcome-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* --------------------------------------------
   5. カード群（横並び）
   -------------------------------------------- */
.welcome-scroll-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    min-width: max-content !important;
}

/* カード幅（スマホ/PC） */
.welcome-scroll-inner > * {
    flex: 0 0 260px;
    max-width: 260px;
	align-self: flex-start;
}
@media (min-width: 768px) {
    .welcome-scroll-inner > * {
        flex: 0 0 320px;
        max-width: 320px;
    }
}

/* --------------------------------------------
   6. Cocoon の暴れ対策（横幅制御）
   -------------------------------------------- */
.welcome-scroll-inner > * * {
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal !important;
}

.welcome-scroll-inner .blogcard,
.welcome-scroll-inner .entry-card,
.welcome-scroll-inner .wp-block-group,
.welcome-scroll-inner .wp-block-columns,
.welcome-scroll-inner .wp-block-column {
    max-width: 100% !important;
    overflow: hidden;
}

/* --------------------------------------------
   7. ヘッダーとの重なり調整
   -------------------------------------------- */
#header-container {
    position: relative;
    z-index: 1;
}


/* --------------------------------------------
   自作ブログカード、cocoon風にする ここから
   -------------------------------------------- */

.my-blogcard a {
  text-decoration: none;
  color: inherit;
}

.my-blogcard-waku p {
  margin: 0 0 2px;
  line-height: 1.4;
}

.my-blogcard {
  margin-left: auto;
  margin-right: auto;	
  border: 1px solid #8DC7AF;
  text-decoration: none;
  background: #F7FFFF;
  max-width: 90%;
}

.my-blogcard:hover {
  cursor: pointer;
  box-shadow: 0 10px 20px -5px gray; 
  transform: translateY(-4px); 
  background: #E4F5EC;
  transition-duration: 0.5s;
}

.my-blogcard-waku {
  margin: 13px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.my-blogcard-main {
  display: flex;
}


.my-blogcard-desc {
  color: #555;
  font-size: 13px;
  padding-top: 8px;	
}

.my-blogcard-thumb {
  width: 160px;
  height: 90px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.my-blogcard-content {
  /* padding: 10px; */
  padding-left: 10px;
  flex: 1;
}

.my-blogcard-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 16px;
}

.my-blogcard-date {
  color: #666;
}

.my-blogcard-left {
  display: flex;
  align-items: center;
}

.my-blogcard-right {
  text-align: right;
}

.my-blogcard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  font-size: 16px;
  color: #666;
}


.my-blogcard-favicon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

@media screen and (max-width: 834px){
    .my-blogcard-waku {
      margin: 16px;
    }

    .my-blogcard {
     max-width: 100%;
    }

    .my-blogcard-content {
      padding-left: 11px;
    }
	
	.my-blogcard-desc {
	  font-size: 12px;
      padding-top: 0px;	
    }

    .my-blogcard-thumb {
      width: 120px;
      height: 68px;
    }
	
	.my-blogcard-title {
      font-size: 13px;
    }

    .my-blogcard-footer {
      margin-top: 7px;
      font-size: 14px;
    }
}


@media screen and (max-width: 599px){
    .my-blogcard-waku p {
      margin: 0 0 1px;
      line-height: 1.2;
    }
	
    .my-blogcard-waku {
      margin: 12px;
    }

    .my-blogcard {
     max-width: 100%;
    }

    .my-blogcard-content {
      padding-left: 10px;
    }
	
	.my-blogcard-desc {
	  font-size: 12px;
      padding-top: 0px;	
    }

    .my-blogcard-thumb {
      width: 120px;
      height: 68px;
    }
	
	.my-blogcard-title {
      font-size: 13px;
    }

    .my-blogcard-footer {

      display: block;
      margin-top: 7px;
      font-size: 14px;
    }
}


/* --------------------------------------------
   自作ブログカード、cocoon風にする ここまで
   -------------------------------------------- */


/*---------------------------------------
  タイトル下のボックスメニュー ここから
  ---------------------------------------*/

.box-menu{
  background: transparent;  /* 背景を透明にする */  
  #border: 1px solid #F8F8F8;
  #border-radius: 0px;
  box-shadow: none;  /* 枠線のシャドウを消す */   
  padding: 0;
  min-height: 0;
}

.box-menu:hover{
  box-shadow:none;
}

.box-menu-icon img{
  transition:0.3s all;
}

.box-menu-icon img:hover{
  transform:scale(1.3,1.3);
  transition:0.8s all;
}

.box-menu-label,
.box-menu-description{
  display: none;
}

.box-menu-icon *{   
  margin: 0;
  max-width: 100%;
  max-height: 300px;
}

/* PC（600px以上） */
@media screen and (min-width: 600px){
  .wwa .box-menu{
    width: 15%;
  }
}

@media screen and (min-width: 600px){
  .wwa .box-menu{
    margin-right: 1%;
  }
}

@media screen and (min-width: 600px){
  .box-menu:last-child{
    margin-right: 0px;
  }
}


/* ----------------------------------------------------
   スマホ表示時のボックスメニュー最適化（なが〜ン仕様）
   ----------------------------------------------------
   ・画像を欠けさせずに高さだけ抑えるための縮小処理
   ・画像内に文字があるためトリミングは不可
   ・スマホ時のみ 70% に縮小してファーストビュー改善
   ・PC（600px以上）には影響しない
---------------------------------------------------- */
@media screen and (max-width: 599px){

  /* 親のレイアウト制御（2列化 & 余白ゼロ） */
  .box-menus.no-icon {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 子要素（ボックス） */
  .box-menu {
    width: 39% !important;
    min-width: 160px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    line-height: 0 !important;
    height: auto !important;
  }

  /* picture の行間を殺す（今回の決定打） */
  .box-menu picture {
    display: block !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 画像 */
  .box-menu-icon img {
    width: 90% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    line-height: 0 !important;
  }

  /* ラベルと説明（空白ノード対策） */
  .box-menu-label,
  .box-menu-description {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }
}


/* ボックスメニュー　センタリング */
/*
.box-menu:first-child{
  margin-left: auto;
}
.box-menu:last-child{
  margin-right: auto;
}
*/

/* スマホのボックスメニューを確実に中央寄せする（完全版） */
@media screen and (max-width: 599px){

  /* 親を中央寄せ（あなたの既存コードを補強） */
  .box-menus.no-icon {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* 子要素の余計な margin を完全に殺す */
  .box-menu {
    margin: 0 !important;
  }

  /* flex の auto margin を無効化（今回の決定打） */
  .box-menu:first-child,
  .box-menu:last-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* スマホのボックスメニューを確実に中央寄せ（wwa版） */
@media screen and (max-width: 599px){

  /* 親を flex 中央寄せ */
  .box-menus.wwa {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* 子要素の余計な margin を完全に殺す */
  .box-menu {
    margin: 0 !important;
  }

  /* auto margin の悪影響を完全に無効化 */
  .box-menu:first-child,
  .box-menu:last-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/*---------------------------------------
  タイトル下のボックスメニュー ここまで
  ---------------------------------------*/