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

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

/************************************************************************************************************
** 
** 【忘れがち注意】
** CSSをちゃんと設定していても反映されない場合があるときは、左端に半角スペースがあることが原因
** その場合はTabで置き換えると治る！！
** 
************************************************************************************************************/



























/* ==========================================================
 * 実験中
 * ========================================================== */






.mobile-sidebar-ranking-h2 {
	text-align: center;
    margin-left: 8vw;
	font-size: 32px !important; 
	color: #FFF;
}





#bottom-info-dev {
	display: none;
}

a.tag-cloud-link {
    background-color: #444;
}



/********************************************************
** スマホ時のサイドバーの設定
********************************************************/

#sidebar-menu-input:checked ,#sidebar-menu-content {
	background-image: linear-gradient(to right, #1e3b5f, #3c8a9e);
    background-color: #1e3b5f;
}
#slide-in-sidebar {
    background-image: linear-gradient(to right, #1e3b5f, #3c8a9e);
    background-color: #1e3b5f;
}
/* スライドインサイドバー内の文字とリンク色をクールホワイトにする */
#slide-in-sidebar,
#slide-in-sidebar a,
#sidebar-menu-content,
#sidebar-menu-content a,
#slide-in-sidebar .widget-title,
#sidebar-menu-content .widget-title {
    color: #e6ebf0;
    text-decoration: none;
}

/* ついでにホバー時の色も設定（白） */
#slide-in-sidebar a:hover,
#sidebar-menu-content a:hover {
    color: #FFFFFF;
}


/********************************************************
** PCでdisplay：noneする場合（max-width: 768px）
********************************************************/

@media screen and (min-width: 1024px) {
	.titlelogo {
		display: none;
	}
	.sp-amazon-banner {
		display: none;
	}
}

/* ウィジェットのキャッチフレーズ */
.cat-title {
    font-size: 0.8em;
    padding: 0.2em 0.6em 0.6em;
}

/* PC用のamazonバナーの設置 */
a.custom-navi-img.custom-navi-banner {
    padding-top: 8px;
    padding-left: 8px;
}
/* スマホ用のamazonバナーの設置 */
.sp-amazon-banner img {
    height: 40px;
    width: auto;
    padding-left: 1em;
    margin-top: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/********************************************************
** メニュー（ナビゲーションバー）まわりの設定
********************************************************/

/* 1. ナビゲーションバー全体のレイアウト */
#navi-in {
    /* 画像とメニューを横並び（Flex）にする */
    display: flex !important;
    align-items: center;
    width: 100%;
    max-width: 100%;
    
    /* バー全体の背景（青グラデーション） */
    background-image: linear-gradient(to right, #1e3b5f, #3c8a9e) !important;
    background-color: #1e3b5f !important;
    
    position: relative;
    padding: 0; /* Cocoonのデフォルト余白を削除 */
}

/* 2. 画像エリア（左側固定・グラデーション背景が見える） */
.custom-header-images {
    display: flex;
    align-items: center;
    
    /* ロゴとバナーを均等に配置してバランスを取る（中央寄せ効果） */
    justify-content: space-around; 
    
    /* 幅を固定（ここを基準に三角がつきます） */
    width: 380px; 
    flex-shrink: 0; /* 縮小禁止 */
    
    /* 高さ調整 */
    align-self: stretch;
    
    /* 背景は透明（親のグラデーションを見せる） */
    background: transparent;
    
    position: relative;
    z-index: 10;
}

/* バナー（2つ目の画像）だけ左側に自動余白を入れて右へ押す */
.custom-header-images .custom-navi-banner {
    margin-left: auto; /* 右に押しやる */
    margin-right: auto; /* 左にも押しやる（結果的に中央付近になる） */
}

/* 3. 画像とメニューの間の「三角」（色は提供コードのまま#0d1217） */
.custom-header-images::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    
    /* 画像エリアの右外側(-40px)に配置 */
    right: -40px; 
    width: 40px; 
    height: 100%;
    
    /* 三角の色（メニューと同じ色で斜めにカットするデザイン） */
    background-color: #0d1217; 
    
    /* 形状：右下直角の三角（◢） */
    clip-path: polygon(100% 0, 100% 100%, 0% 100%);
    
    z-index: 5; /* メニュー背景より上に表示 */
    pointer-events: none;
}

/* 4. メニューエリア（横スクロール・黒背景） */
/* .menu-pc は navi.php で指定されているクラス */
#navi-in .menu-pc {
    flex-grow: 1; /* 残りの幅を全て使う */
    
    /* 背景色（黒） */
    background-color: #0d1217;
    
    /* 横スクロール設定 */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    
    /* ★重要：三角(40px)の分だけメニューを右にずらす */
    margin-left: 40px;
    
    /* メニューリストのデフォルト余白削除 */
    padding-left: 0 !important;
}

/* 5. メニュー項目の余白調整 */
#navi-in .menu-pc > .menu-item {
    flex-shrink: 0;
}

/* 最初のメニュー項目（リンク）の左余白削除 */
#navi-in .menu-pc > .menu-item:first-child > a {
    padding-left: 0;
}

/* 6. 画像・ロゴのスタイル */
.custom-header-images .custom-navi-img {
    /* ★修正：Flexboxで配置制御するため、paddingによる余白は削除 */
    padding: 0;
    display: block;
    text-decoration: none;
    background: none;
    transition: opacity 0.3s;
}
.custom-header-images .custom-navi-img:hover {
    opacity: 0.8;
}

/* バナーなどの標準画像サイズ */
.custom-header-images .custom-navi-img img {
    height: 40px; 
    /* ★修正：比率がおかしくなるのを防ぐ */
    width: auto !important; 
    vertical-align: middle;
    margin: 0;
    border: none;
    box-shadow: none;
}

/* タイトルロゴのオーバーラップ設定 */
.custom-header-images .custom-navi-logo img {
    height: 56px;  /* 飛び出させる分大きく */
    /* ★修正：比率崩れ防止とCocoonの制限解除 */
    width: auto !important;
    max-width: none !important;
    margin-top: -8px; /* 上に引き上げる */
    margin-left: 16px;
    margin-right: 16px;
    position: relative;
    z-index: 100;
}

/* 7. スクロールバーのカスタマイズ */
#navi-in .menu-pc::-webkit-scrollbar {
    height: 8px; 
}
#navi-in .menu-pc::-webkit-scrollbar-track {
    background: #0d1217; 
    border-radius: 4px;
}
#navi-in .menu-pc::-webkit-scrollbar-thumb {
    background: #3e5463; 
    border-radius: 4px;
}
#navi-in .menu-pc::-webkit-scrollbar-thumb:hover {
    background: #5a7585;
}
/* Firefox用 */
#navi-in .menu-pc {
    scrollbar-color: #3e5463 #0d1217; 
    scrollbar-width: thin;
}

/* 8. モバイル表示の調整（必要に応じて） */
@media screen and (max-width: 1023px) {
    .custom-header-images {
        display: none;
    }
    #navi-in .menu-pc {
        margin-left: 0;
    }
}


/************************************************************************************************************
** 
** ランキングウィジェット
** 基本が横で、モバイルサイドバー（縦）で一部上書き
** 
************************************************************************************************************/

/* ==========================================================
 * 1. 背景・レイアウト共通設定
 * ========================================================== */
.slider-bg-wrapper {
  width: 99.6vw;
  @media screen and (max-width: 1023px){
    width: 100vw;
  }
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding-top: 12px; 
  padding-bottom: 20px; 
}

.slider-bg-wrapper .slider-waku {
  max-width: 1500px !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px;
  padding-right: 15px;
}

/* スライダーリスト設定 */
.slider-list.simple-list-mode {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  padding-top: 40px !important; 
  box-sizing: border-box;
}

/* リストアイテム */
.slider-list .slider-group-item.single-article-item {
  flex: 0 0 200px; 
  min-width: 200px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  position: relative; 
  overflow: visible !important;
  z-index: 1;
}

/* 画像枠設定（背景白・枠線） */
.slider-list .single-article-item .top-slider-banner {
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden; 
  position: relative; 
  padding-top: 100%; 
  line-height: 0;
  background-color: #fff; 
}

/* 画像本体設定（中央配置・幅制限解除） */
.slider-list .single-article-item .top-slider-banner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  margin: 0 auto !important;
  max-width: none !important; /* 幅制限解除 */
}




/* ==========================================================
 * 2. ランキングバッジ設定
 * ========================================================== */

/* --- バッジ枠（テキストのコンテナ） --- */
.ranking-badge {
  position: absolute;
  left: 50%;            
  transform: translateX(-50%);
  
  /* 全順位共通サイズ */
  width: 64px; 
  height: 64px; 
  top: -42px; 
  
  /* リセット */
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  
  /* テキスト配置 */
  display: flex; 
  justify-content: center;
  align-items: flex-end; 
  padding-bottom: 6px; /* 数字の位置 */
  
  /* 文字色は常に白 */
  color: #ffffff !important; 
  font-family: Arial, sans-serif; 
  font-weight: 900; 
  font-size: 1.4em;
  
  /* ★修正：数字の影を滑らかにして見やすくする */
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 5px rgba(0,0,0,0.4);

  z-index: 20; 
}

/* --- 王冠背景（画像）の基本設定 --- */
.ranking-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 文字の下に配置 */
  
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;

  /* ★デフォルト画像（5位〜10位用）: crown5.svg */
  background-image: url("/images/crown5.svg");

  /* ★修正：王冠の下にぼやーっとした影をつけて区別させる */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}


/* --- 1位：crown1.svg --- */
.ranking-badge.rank-1::before {
  background-image: url("/images/crown1.svg");
}

/* --- 2位：crown2.svg --- */
.ranking-badge.rank-2::before {
  background-image: url("/images/crown2.svg");
}

/* --- 3位：crown3.svg --- */
.ranking-badge.rank-3::before {
  background-image: url("/images/crown3.svg");
}

/* --- 4位：crown4.svg --- */
.ranking-badge.rank-4::before {
  background-image: url("/images/crown4.svg");
}


/* --- リンク領域の調整 --- */
.ranking-badge-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block; 
    position: absolute; 
    width: 100%;
    height: 0; 
    top: 0;
    left: 0;
    z-index: 21;
}
.ranking-badge-link:hover .ranking-badge {
    opacity: 0.9;
    transform: translateX(-50%) scale(1.1);
    transition: transform 0.2s ease;
}

/* ==========================================================
 * 3. 価格・オーバーレイ設定
 * ========================================================== */
.overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px 5px;
  box-sizing: border-box;
  z-index: 1;
}

.price-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nesage-badge {
  background-color: #e53935;
  color: #fff;
  font-weight: bold;
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}
.nesage-badge small {
  font-size: 0.7em;
  margin-left: 1px;
}

.overlay-price {
  color: #ffeb3b;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1;
  white-space: nowrap;
}
.overlay-price small {
  font-size: 0.7em;
  margin-left: 1px;
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================
 * 4. スマホ・その他調整
 * ========================================================== */
@media screen and (max-width: 480px) {
  .slider-list .slider-group-item.single-article-item {
    flex: 0 0 150px;
    min-width: 150px;
  }
  .nesage-badge { font-size: 0.8em; }
  .overlay-price { font-size: 1.0em; }
  
  /* スマホでのバッジ微調整 */
  .ranking-badge {
      width: 50px; 
      height: 50px;
      top: -25px; 
      padding-bottom: 10px;
      font-size: 1.0em;
  }
  
  /* スマホの時だけ矢印ボタンを非表示 */
  .slider-prev, 
  .slider-next {
      display: none !important;
  }
}

/* 不要な要素を非表示 */
.overlay-title, .article-title-area, .article-title-link,
.slider-list .single-article-item .group-title-area,
.slider-list .single-article-item .group-link-area {
    display: none !important;
}

/* ==========================================================
 * ここから縦型★★★ランキングリスト設定
 * ========================================================== */


/* --- ランキングウィジェット全体の設定 --- */
#navi-menu-content {
    padding: 0 1em;
    background: #FFF;
    color: #000000;
}

/* --- 1. 背景・レイアウト共通設定 --- */
.slider-bg-wrapper.vertical-ranking-list {
  width: 99.6vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding-top: 12px; 
  padding-bottom: 20px; 
}
@media screen and (max-width: 1023px){
	.slider-bg-wrapper.vertical-ranking-list {
		/* width: 100vw; --- */
		width: 92vw;
		margin-bottom: -1.8em;
	}
}

.slider-bg-wrapper.vertical-ranking-list .slider-waku {
  padding-left: 24px;
  padding-right: 24px;
}

/* --- 2. 縦リスト特有の設定 --- */
.vertical-ranking-list .vertical-list.simple-list-mode {
  display: flex;
  flex-direction: column; 
  flex-wrap: nowrap;
  gap: 36px; 
  padding-top: 36px; 
  box-sizing: border-box;
  overflow: visible !important;
}

/* リストアイテム */
.vertical-ranking-list .vertical-item.single-article-item {
	flex: 0 0 auto;
	min-width: 100%;
	width: 100%; 
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
	position: relative; 
	overflow: visible !important;
	z-index: 1;
	list-style: none !important;
}

/* 画像枠設定 */
.vertical-ranking-list .vertical-item .top-slider-banner {
  border: 1px solid #eee;
  border-radius: 5px;
  overflow: hidden; 
  position: relative; 
  padding-top: 100%; 
  line-height: 0;
  background-color: #fff; 
}

/* 画像本体設定 */
.vertical-ranking-list .vertical-item .top-slider-banner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  margin: 0 auto !important;
  max-width: none !important;
}

/* --- 3. サイドバーでの幅リセット --- */
.sidebar .widget_custom_html div.slider-bg-wrapper.vertical-ranking-list,
.sidebar div.slider-bg-wrapper.vertical-ranking-list {
  width: auto !important; 
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important; 
  overflow: hidden !important;
}

.sidebar .widget_custom_html .vertical-ranking-list .slider-waku,
.sidebar .vertical-ranking-list .slider-waku {
  padding-left: 10px !important;
  padding-right: 10px !important;
  max-width: 100% !important; 
}

@media screen and (max-width: 480px) {
  .sidebar .widget_custom_html div.slider-bg-wrapper.vertical-ranking-list,
  .sidebar div.slider-bg-wrapper.vertical-ranking-list {
    width: auto !important;
    margin-left: 0 !important;
  }
}

/* --- 4. ランキングバッジ設定 --- */
.ranking-badge {
  position: absolute;
  left: 50%;            
  transform: translateX(-50%);
  width: 64px; 
  height: 64px; 
  top: -42px; 
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex; 
  justify-content: center;
  align-items: flex-end; 
  padding-bottom: 6px; 
  color: #ffffff !important; 
  font-family: Arial, sans-serif; 
  font-weight: 900; 
  font-size: 1.4em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 5px rgba(0,0,0,0.4);
  z-index: 20; 
}

/* 王冠画像設定（※背景画像のURL指定はPHP側に移動しました） */
.ranking-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

/* リンク領域 */
.ranking-badge-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block; 
  position: absolute; 
  width: 100%;
  height: 0; 
  top: 0;
  left: 0;
  z-index: 21;
}
.ranking-badge-link:hover .ranking-badge {
  opacity: 0.9;
  transform: translateX(-50%) scale(1.1);
  transition: transform 0.2s ease;
}

/* --- 5. 価格・オーバーレイ設定 --- */
.overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px 5px;
  box-sizing: border-box;
  z-index: 1;
}

.price-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nesage-badge {
  background-color: #e53935;
  color: #fff;
  font-weight: bold;
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
}
.nesage-badge small {
  font-size: 0.7em;
  margin-left: 1px;
}

.overlay-price {
  color: #ffeb3b;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1;
  white-space: nowrap;
}
.overlay-price small {
  font-size: 0.7em;
  margin-left: 1px;
  color: rgba(255, 255, 255, 0.9);
}

/* --- 6. スマホ・その他調整 --- */
@media screen and (max-width: 480px) {
  .vertical-ranking-list .nesage-badge { font-size: 0.8em; }
  .vertical-ranking-list .overlay-price { font-size: 1.0em; }
  
  .ranking-badge {
      width: 60px; 
      height: 60px;
      top: -30px; 
      padding-bottom: 8px;
      font-size: 1.2em;
  }
}

.vertical-ranking-list .overlay-title, 
.vertical-ranking-list .article-title-area, 
.vertical-ranking-list .article-title-link,
.vertical-ranking-list .vertical-item .group-title-area,
.vertical-ranking-list .vertical-item .group-link-area {
    display: none !important;
}






/*//////////////////////////////////////////////////////////////////////////////////////////
//　ヘッダとフッターにアニメーションｊｓを挿入
//////////////////////////////////////////////////////////////////////////////////////////*/

/* 1. Canvasの基本設定 (ヘッダー/フッターより手前、メインより奥) */
#snow-canvas {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* * z-indexを -1 (最背面) から 1 (中層) に変更します。
     * これにより、背景(z-index:0)の「上」に表示されます。
     */
    z-index: 1; 
    pointer-events: none; /* クリック操作を妨げない */
    background-color: transparent;
}

/* 2. ヘッダーとフッター (z-index: 0 = 背景層) */
/* * ヘッダーとフッターに position: relative を指定し、
 * z-index: 0 を明示的に設定します。
 * これらはCanvas(z-index: 1)の「下」になります。
 */
body #header,
body #header-container,
.header-container,
body #footer {
    position: relative; /* z-indexを有効にするため */
    z-index: 0; /* 背景層 */
    
    /* ↓ 以下はユーザー様が設定した背景（変更不要）*/
    background-image: linear-gradient(to right, #1e3b5f, #3c8a9e);
    background-color: #1e3b5f;
}

/* 3. メインコンテンツとその他のエリア (z-index: 2 = 最前面) */
/* * メインコンテンツとナビゲーションを
 * z-index: 2 に設定し、Canvas(z-index: 1)の「上」に配置します。
 * これにより、Canvasがメイン部分を隠します。
 */
body #main,
body #navi { /* グローバルナビなども対象に含める */
    position: relative; /* z-indexを有効にするため */
    z-index: 2; /* 最前面 */
    
    /* * サイトの背景色（例: 白）を指定し、不透明にします。
     * この色がCanvasを隠す「フタ」になります。
     */
    background-color: #ffffff; 
}







/* ＰＲラベルを左から右に */
.pr-label-s {
    top: 3px;
    left: initial;
    right: 3px;
}

/* フッターのマウスホバーを白から黒に */
#footer a:not(.sns-button):hover {
    background-color: rgba(50, 50, 50, 0.9);
}





/* ==========================================================
 * スマホ表示時のモバイルヘッダー
 * ========================================================== */
.mobile-header-menu-buttons {
	color: #FFFFFF;
}



/* ====================================================== */
/* 関連商品（関連記事）のレイアウトを記事一覧と同じに */
/* ====================================================== */
/********縦列３カードを６列に*******/

/***  隙間の統一  ***/
.rect-vertical-card-4 .related-list {
    column-gap: 0.5%;
}
/***  PCの場合６×１列に  ***/
.rect-vertical-card-4 .related-entry-card-wrap {
    width: 16.25%;
	border-radius: 6px;
}
.related-list .related-entry-card-wrap:nth-child(n + 7) {
    display: none;
}
/* タブレットの場合４×１列に */
@media screen and (max-width: 1023px) {
.rect-vertical-card-4 .related-entry-card-wrap {
	width: 24.62%;
	border-radius: 6px;
}
.related-list .related-entry-card-wrap:nth-child(n + 5) {
    display: none;
}
}
/* スマホの場合２×２列に */
@media screen and (max-width: 767px) {
.rect-vertical-card-4 .related-entry-card-wrap {
	width: 49.75%;
	border-radius: 6px;
}
.related-list .related-entry-card-wrap:nth-child(n + 5) {
    display: none;
}
}

/* ====================================================== */
/* ここまで～関連商品（関連記事）のレイアウトを記事一覧と同じに */
/* ====================================================== */




/* ====================================================== */
/* 新着記事の経過時間に応じて記事一覧の背景色を変更 */
/* ====================================================== */

/* 15分以内の新着記事 (最も目立つ色) */
.entry-card.new-post-15m {
	background: linear-gradient(315deg, #d0b1ed, transparent 30%); /* 紫グラデ */
	border: 2px solid #d0b1ed;
	box-shadow: 0 0 5px rgba(255, 0, 0, 0.3); /* 強い影 */
	transition: background-color 0.5s ease;
	border-radius: 6px;
}

/* 15分超〜1時間以内の新着記事 (元の設定を流用) */
.entry-card.new-post-1h {
	background: linear-gradient(315deg, #ffcccc, transparent 20%); /* 赤グラデ */
	border: 2px solid #ffcccc;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
	transition: background-color 0.5s ease;
	border-radius: 6px;
}

/* 1時間超〜3時間以内の新着記事 (やや目立つ色) */
.entry-card.new-post-3h {
	background: linear-gradient(315deg, #fff5bf, transparent 20%); /* 赤グラデ */
	border: 2px solid #fff5bf;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	transition: background-color 0.5s ease;
	border-radius: 6px;
}

.ect-3-columns .entry-card-wrap {
    padding: 0px;
}
.entry-card {
    padding: 7px;
}

/* ====================================================== */
/* ここまで　～　新着記事の経過時間に応じて記事一覧の背景色を変更 */
/* ====================================================== */




/************* 個別記事下部の投稿者名の欄を非表示 *************/
.footer-meta {
    display: none;
}
/************* 個別記事下部の投稿者名の欄を非表示 *************/





/************* 個別記事の通常のタイトルh1位置の色々を非表示 *************/
.article-header.entry-header > .entry-categories-tags {
    display: none;
}
.article-header.entry-header > .entry-title {
    display: none;
}
/************* 個別記事の通常のタイトルh1位置の色々を非表示 *************/



/************* 個別記事の商品タイトルh1の調整 *************/

/* まずh1タイトル全体の調整 */
.amazon-item-title, .product-item-title a {
	text-decoration: none;
	color: black;
    font-size: 1.15em;
    padding: 0.5em 0;
}
@media screen and (max-width: 768px) {
	.amazon-item-title, .product-item-title a {
		font-size: inherit;
	}
}
/* notboldで太字を解除 */
.notbold a {
	font-weight: initial;
}
/* ＰＣ以外のh1タイトル表示部分の改行幅を狭く */
.nopc.notbold {
	margin-bottom: 0;
}
/* ＰＣ以外のh1タイトル表示部分の文字を小さく */
.nopc.notbold h1 {
    font-size: 1.1em;
}
/************* 個別記事の商品タイトルh1の調整 *************/

/*
.amazon-item-content.product-item-content.cf .nosm.notb.notbold .amazon-item-maker.product-item-maker{
    padding: 0.15em 0;
}
*/

/* --- レスポンシブデザイン用のメディアクエリ --- */
/* スマートフォンでの調整（max-width: 768px） */
@media screen and (max-width: 768px) {
	.wp-block-list.is-style-icon-list-check.has-list-style{
		padding-left: 0.5em;
		text-align: left;
        margin-bottom: 0.5em;
	}
}


.hr-kobetsu01 {
    margin: 2em 0.5em;
}

.wp-block-cocoon-blocks-micro-balloon-2 {
	margin: 0 auto;
}

.article .micro-bottom.micro-balloon {
    margin: 3px auto 1em;
}

.choisema {
	width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Amazonで価格を確認の基本的なスタイル */
        .cart-button , .blogranking-button {
            transition: all 0.1s ease-in-out;
            cursor: pointer;
            user-select: none;
            /* キラッと光るエフェクトのために必要 */
            position: relative; 
            overflow: hidden; 
            /* キラッと光るエフェクトのために必要 */
			border: none;
			background-color: #f8d742;
			color: #000000;
			border-radius: 40px;
			padding: 10px 10px;
			font-size: 16px;
			display: inline-block;
			text-align: center;
			width: 100%;
			text-decoration: none;
 			margin-bottom: 20px;
        }
@media screen and (min-width: 1024px) {
        .cart-button , .blogranking-button {
			padding: 8px 10px;
        }
    }
        .cart-button:hover {
			background-color: #f6ce3d;
			color: inherit; 
        }

        /* ブログランキングで応援の基本的なスタイル */
        .blogranking-button {
			background-color: #f0a737;
 			margin-bottom: 0;
        }
        .blogranking-button:hover {
			background-color: #ec8b27;
			color: inherit; 
        }

        /* クリック時にわずかに沈む効果 */
        .cart-button:active,
        .blogranking-button:active {
            transform: translateY(1px);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
        }



        /* -------------------- 💡 キラッと光るアニメーション -------------------- */
        
        /* 1. キラッと光るアニメーション（左から右へ移動）の定義 */
        /* アニメーション周期10秒のうち、最初の25%で光を通過させ、残り75%は待機時間とする */
        @keyframes shine {
            /* 0% ~ 25% (光の通過) */
            0% {
                transform: skewX(-20deg) translateX(-100%); /* 左端から開始 */
            }
            25% { 
                transform: skewX(-20deg) translateX(150%); /* 右端まで移動 */
            }
            
            /* 25.1% ~ 100% (ディレイ/待機) */
            /* 光を右端の外側で待機させ、ボタンに表示されないようにする */
            25.1% { 
                transform: skewX(-20deg) translateX(150%);
                opacity: 0;
            }
            100% {
                transform: skewX(-20deg) translateX(150%);
                opacity: 0;
            }
        }

        /* 2. ボタンの擬似要素に光のグラデーションを設定 */
        .cart-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 9999px; /* ボタンと同じ角丸を適用 */
            
            /* 光のグラデーション（白く透過した部分）を作成 */
            background: linear-gradient(
                90deg, 
                transparent, 
                rgba(255, 255, 255, 0.5), 
                transparent
            );
            
            /* 3. アニメーションの適用 */
            /* アニメーションの実行時間を10秒に設定 */
            animation: shine 10s infinite; 
            transform: skewX(-20deg) translateX(-100%);
        }








/* ---- 4つ画像グループスライダーのスタイル ---- */

/* スライダーリストの基本設定 */
.slider-list {
    display: flex; /* Flexboxを維持 */
    overflow-x: scroll; /* 横スクロールを維持 */
    margin: 0;
    padding: 0;
    overflow-y: hidden; /* 縦のスクロールバーを非表示にする */
    list-style: none; /* リストの点を非表示 */
}

/* スクロールバーの高さと色調整（ＰＣ） */
/* スクロールバーの高さを調整 */
.top-slider ul::-webkit-scrollbar { /* .top-slider ul も .slider-list と同じ要素を指すため統合 */
    height: 5px; /* 適切な高さに調整 */
}
/* スクロールバーの背景色を透明にする */
.top-slider ul::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* 色を半透明に */
	border-radius: 3px;    /* 角を丸める */
}
/* マウスオーバー時のスクロールバーの表示 */
.top-slider ul:hover::-webkit-scrollbar {
    height: 5px; /* マウスオーバー時の高さを調整 */
}
/* マウスオーバー時のボタンのスタイル */
.top-slider ul:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5); /* 色を半透明に */
}


/* 各スライドグループのコンテナ（li要素） */
.slider-group-item {
    min-width: 320px; /* PCでの最小幅（グループの幅） */
    margin: 0px 1vh 0px 2vh; /* 既存のマージンを再適用 */
    padding: 0;
    box-sizing: border-box; /* パディングやボーダーを幅に含める */
    background-color: #f8f8f8; /* デフォルトの背景色 */
    border-radius: 8px; /* 角を丸くする */
    overflow: hidden; /* コンテナからはみ出す要素を隠す */
    display: flex; /* 子要素を縦に並べる */
    flex-direction: column; /* 子要素を縦に並べる */
}
/* スライダーの最初のアイテムだけ左マージンを0に設定 */
.slider-list .slider-group-item:first-child {
    margin-left: 0 !important; /* 左マージンを0 */
}
/* スライダーの最後のアイテムの右マージンを0に設定 */
.slider-list .slider-group-item:last-child {
    margin-right: 0 !important; /* 右マージンを0 */
}





/* グループのタイトルエリア */
.group-title-area {
    text-align: center;
    padding: 10px 5px 5px; /* 上部に余白、下部に少なめ */
    font-weight: bold;
    font-size: 1.1em;
    background-color: inherit; /* 親要素の背景色を継承 */
/*    border-bottom: 1px solid rgba(0,0,0,0.1);  タイトルと画像の間に薄い区切り線 */
}
.group-title-area .group-title-link {
    text-decoration: none; /* 下線を非表示 */
    color: #333; /* 文字色 */
    display: block; /* リンクエリア全体をクリック可能に */
}
.group-title-area .group-title-link:hover {
    color: #007bff; /* ホバー時の色 */
}

/* 4つの画像を配置するGridコンテナ */
.slider-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    grid-template-rows: repeat(2, 1fr);     /* 2行 */
    gap: 10px; /* 画像間の隙間 */
    width: 100%; /* 親要素の幅いっぱいに */
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    overflow: hidden; /* コンテナからはみ出す画像を隠す */
/*    border: 1px solid #ddd;  グループ全体にボーダー */
    padding: 5px; /* ボーダー内側の余白 */
    box-sizing: border-box;
    background-color: inherit; /* 親要素の背景色を継承 */
    flex-grow: 1; /* 残りの高さを埋めるようにする */
}

/* グループ内の各画像コンテナ */
.slider-grid-container .top-slider-banner {
    width: 100%;
    height: 100%;
    display: flex; /* 画像を中央揃えにするため */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 画像がはみ出さないように */
    margin: 0 !important; /* 親からのマージンをリセット */
    padding: 0 !important; /* 親からのパディングをリセット */
	background-color: #FFFFFF; /* ここを追加または修正して背景色を白に */
}

/* グループ内の画像のスタイル */
.slider-grid-container .top-slider-banner img {
    width: 100%; /* 親要素 (top-slider-banner) の幅いっぱいに */
    height: auto; /* 高さは自動調整 */
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    object-fit: contain; /* 画像がコンテナを埋めるようにトリミング */
    border: none; /* グループ全体にボーダーがあるので、個別のボーダーはなし */
    /* transitionやhover効果は既存のtop-slider-banner imgのスタイルが継承されます */
}

/* 各グループの下に表示されるリンク（「さらに見る」ボタン）のスタイル */
.group-link-area {
    text-align: center;
    padding: 10px 0; /* 上下左右のパディング調整 */
    background-color: inherit; /* 親要素の背景色を継承 */
}
.group-list-link {
    display: inline-block;
    padding: 5px 10px;
    background-color: #007bff; /* ボタンの色を青に変更 */
    border: 1px solid #007bff; /* ボーダーも青に */
    border-radius: 5px;
    text-decoration: none;
    color: #fff; /* 文字色を白に */
    font-size: 0.9em;
    transition: background-color 0.3s ease; /* ホバー効果 */
}
.group-list-link:hover {
    background-color: #0056b3; /* ホバー時の色を濃い青に */
    color: #fff;
}


/* --- 各グループの背景色設定 (nth-child) --- */
/* slider-group-item の nth-child を使用して色を割り当てます */
/* 8つのグループに対応するように設定します */

.slider-list .slider-group-item:nth-child(1) { background-color: #ffe0b2; } /* 淡いオレンジ */
.slider-list .slider-group-item:nth-child(2) { background-color: #c8e6c9; } /* 淡い緑 */
.slider-list .slider-group-item:nth-child(3) { background-color: #bbdefb; } /* 淡い青 */
.slider-list .slider-group-item:nth-child(4) { background-color: #f8bbd0; } /* 淡いピンク */
.slider-list .slider-group-item:nth-child(5) { background-color: #d1c4e9; } /* 淡い紫 */
.slider-list .slider-group-item:nth-child(6) { background-color: #fff9c4; } /* 淡い黄 */
.slider-list .slider-group-item:nth-child(7) { background-color: #b2ebf2; } /* 淡い水色 */
.slider-list .slider-group-item:nth-child(8) { background-color: #f0f4c3; } /* 淡いレモン */


/* 矢印ボタンの基本スタイル */
/*** 矢印ボタンを重ねて表示させるために親要素にrelativeを追加  ***/
.top-slider {
	position: relative; /*** 矢印ボタンを重ねて表示させるために親要素にrelativeを追加  ***/
}
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(255 255 255 / 75%);
    color: black;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 2;
    height: 100px;
    width: 45px;
    text-align: center;
    box-shadow: 0 1px 3px #888;
}
.slider-prev {
	left: 0;
}
.slider-next {
	right: 0;
}


/* トップスライダーの既存スタイル (top-slider ul の設定と重複する箇所は .slider-list に統合) */
/* .top-slider ul の既存スタイルは .slider-list にて定義されているため、ここでは .top-slider-banner img のみ残します */
.top-slider-banner img { /* これは .slider-grid-container .top-slider-banner img と重複するため、後に調整 */
    max-width: 150px; /* この設定は .slider-grid-container .top-slider-banner img にて上書きされる可能性あり */
    height: 150px;
    border: solid 1px #ccc;
    object-fit: contain; /* object-fit: cover に変更されているため、この行は古い可能性 */
    transition: border 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;	
}
.top-slider-banner img:hover {
    filter: brightness(1.2);
    box-shadow: 2px 2px 4px rgba(0,0,0,.3);
    border-color: #ccc;
    transform: scale(1.1);
	overflow-y: hidden; /* 縦のスクロールバーを非表示にする */
}
.hideimg {
  display: none;
}


/* --- レスポンシブデザイン用のメディアクエリ --- */
/* スマートフォンでの調整（max-width: 768px） */
@media screen and (max-width: 768px) {
    .slider-group-item {
        min-width: 200px; /* スマホでのグループの最小幅を調整 */
    }
    .slider-grid-container {
        gap: 3px; /* スマホでの画像間の隙間を調整 */
        padding: 3px; /* スマホでのパディング調整 */
    }
    .group-link-area {
        margin-top: 8px;
        padding-bottom: 8px;
    }
    .group-title-area {
        padding: 8px 3px 3px; /* スマホでのタイトルエリアのパディング調整 */
        font-size: 1em;
    }
}













/* ==========================================================
 * 各記事の「Amazonの情報」部分
 * ========================================================== */
.amazon-item-snippet .label-box-label {
    font-size: 1.2em;
	padding-left: 4em;
}
@media screen and (max-width: 768px) {
.amazon-item-snippet .label-box-label {
    padding-left: initial;
}
}

.amazon-item-snippet .cocoon-block-label-box.not-nested-style>.box-content {
    line-height: 1.8em;
	width: 90%;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 768px) {
.amazon-item-snippet .cocoon-block-label-box.not-nested-style>.box-content {
	width: initial;
    margin-left: initial;
    margin-right: initial;
}
}

.cocoon-block-label-box.not-nested-style {
    padding: 10px 0;
}










/* 個別記事レビュー★の表示部分調整 */
.rating-star {
/*    color: #f5bc55;
    font-size: 1.2em;
	*/
    letter-spacing: -0.12em;
}
.star-rate a {
	text-decoration: none; /* 下線を非表示にする */
}
.black-color a {
	color: black;
}

.rating-star .rating-number {
    letter-spacing: initial;
}


/* 個別記事のh1下のカテゴリーとタグの表示部分 */
.kiji_cat_tag{
	padding: 0 0 0.5em 0.5em;
}
.entry-categories-tags {
	margin-bottom: initial;
}

/* 個別記事のチャートの表示部分 */
.am-chart {
    margin-bottom: 2.4em;
}

/* 個別記事の商品説明の表示部分 */
#kobetsu-kiji #article-body {
	text-align: left;
	font-weight: bold;
}
#kobetsu-kiji #article-body .setsumei-gen {
	font-weight: initial;
}










/************************************
** スマホ、タブレット、ＰＣでの非表示
************************************/

/* ＰＣ表示でdisplay：noneする場合 */
@media screen and (min-width: 1024px) {
	.swiper-container {
		display: none;
	}
	.swiper-pagination {
		display: none;
	}
	#myPlotSp {
		display: none;
	}
	.nopc {
		display: none;
	}
}

/* タブレットでdisplay：noneする場合（max-width: 1023px） */
@media screen and (max-width: 1023px) {
	.amazon-item-thumb {
		display: none;
	}
	#myPlot {
		display: none;
	}
	.notb {
		display: none;
	}
	.swiper-button-next{/* スマホ、タブレットで個別記事にある画像スワイプ＜＞ボタンを非表示 */
		display: none;
	}
	.swiper-button-prev{/* スマホ、タブレットで個別記事にある画像スワイプ＜＞ボタンを非表示 */
		display: none;
	}
}

/* スマートフォンでdisplay：noneする場合（max-width: 768px） */
@media screen and (max-width: 768px) {
	.amazon-item-thumb {
		display: none;
	}
	#myPlot {
		display: none;
	}
	.nosm {
		display: none;
	}
	.swiper-button-next{/* スマホ、タブレットで個別記事にある画像スワイプ＜＞ボタンを非表示 */
		display: none;
	}
	.swiper-button-prev{/* スマホ、タブレットで個別記事にある画像スワイプ＜＞ボタンを非表示 */
		display: none;
	}
}



/* サムネイル画像のスクロール追従スタイル - PC表示のみ */
@media screen and (min-width: 1024px) {
    .amazon-item-thumb.product-item-thumb {
        position: sticky;
        top: 20px; /* ヘッダーや他の要素との隙間を考慮して調整 */
        align-self: flex-start; /* Flexアイテムとして上部に固定 */
        width: 30%; /* 親要素に対する相対的な幅 */
        max-width: 500px; /* 必要に応じて最大幅を設定 */
        height: auto; /* 高さは内容に合わせて自動調整 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* 画像を上部に揃える */
        background: none; /* 不要な背景色を削除 */
        color: inherit;
        padding: 0; /* 不要なパディングを削除 */
		top: 5rem; /* 不要なパディングを削除 */
    }

    .amazon-item-thumb.product-item-thumb img {
        width: 100%;
        height: auto;
        object-fit: contain;
/*		border: 1px solid #ddd; */
        box-sizing: border-box; /* パディングとボーダーを幅に含める */
    }
    .amazon-item-thumb-link {
        display: block;
        width: 100%;
    }
}















.hr-001 {
	border-top: 1px solid #e6e3e3;
	margin: 10px 10px 1.5em;
}

.tag-saiyasune999 , .tag-saiyasune365 , .tag-saiyasune180 , .tag-saiyasune90 {
	background-color: #8ed1fc;
	margin-left: 1em;
	padding: 0 1em;
	border-radius: 100px;
}

.tag-saiyasune999 {
	background-color: #f39800;
}



/* linker右側価格表示エリア */
.product-item-price {
    /* padding: 1em 0 0; */
}

.nesage-percent {
    font-weight: bold;
    font-size: 1.4em;
    color: #CC0C38;
    margin-right: 0.3em;
}

.item-price {
    font-weight: bold;
    font-size: 2.4em;
    line-height: 1.4em;
    color: #000;
}

/* linker右側説明文エリア */
.product-item-description {
    text-align: left;
}












/* linkerテスト */
/* linkerテスト */
/* linkerテスト */

.product-item-admin {
	bottom: initial;
}

.product-item-thumb a:first-child {
	height: 500px;
	display: grid; /* 縦横中央揃え */
	place-items: center; /* 縦横中央揃え */
}

.booklink-image *, .kaerebalink-image *, .tomarebalink-image *, .product-item-thumb * {
	width: 500px;
	max-height: 500px;
	object-fit: contain;
	background-color: #FFF;
	border: none;
/*  border: 1px solid #ddd; */
}



.booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box {
	padding: unset;
	width: unset;
	border: none;
    box-sizing: border-box;
    position: relative;
}

/* 画像ホバー関係 */
.image-content {
	left: 0;
	max-width: 100%;
	height: 500px;
}

/* PCサムネ表示  */
.booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
	width: 100%;
}


/* Lサイズサムネ限定  */
.pis-l .si-thumb {
    width: 96px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}


.pis-l figure.product-item-thumb {
	flex: 1;
}

.swatchimages {
    border: none;
}

@media screen and (min-width: 769px) {
	.pis-l.product-item-box {
		display: flex;
	}
}
/* モバイル処理２～ＰＣ以外（768pxより小さかったら）  */
@media screen and (max-width: 768px) {
	.booklink-image *, .kaerebalink-image *, .tomarebalink-image *, .product-item-thumb * {
		width: 100%;
	}
	.product-item-thumb a:first-child {
		height: auto;
		border: none;
	}
}










/* カテゴリーとアーカイブウィジェットの行間を小さく
.widget_categories ul li a {
	padding: 2px 0;
}
.widget_archive ul li a {
	padding: 2px 0;
}
 */




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

          /*margin: 0 1em 0 1em;*/
	
	
	
} /*834px以下ここまで*/
.top-slider2 ul{
	display: flex;
	overflow-x: hidden; /* 画像の親要素に対してoverflow-yを非表示にする */
	margin: 0;	
	padding: 0;
	overflow-y: hidden; /* 画像の親要素に対してoverflow-yを非表示にする */
}
.top-slider2 li{
    margin: 0px 1vh 0px 2vh;
    padding: 0;
    list-style: none;
}
.top-slider-banner2 {
	margin-top: auto;
	margin-bottom: auto;
}
.top-slider-banner2 img {
	max-width: 100px;
	height: auto;
	border: solid 1px #ccc;
	object-fit: cover;
	transition: border 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;	
}
.top-slider-banner2 img:hover {
    filter: brightness(1.2);
    box-shadow: 2px 2px 4px rgba(0,0,0,.3);
    border-color: #ccc;
    transform: scale(1.1);
	overflow-y: hidden; /* 縦のスクロールバーを非表示にする */
}
.hideimg {
  display: none;
}

/*↑ ヘッダーバナーまわり ↑*/







#header-in {width: 100%;} /* * * ヘッダを画面幅（いっぱい）に * * */
#navi-in {width: 100%;} /* * * ヘッダメニューも画面幅（いっぱい）に * * */
/* #footer-in {width: 100%;} /* * * フッターを画面幅（いっぱい）に * * */



/* ヘッダーメニューのスクロールに関するCSSの基本設定 */
/* PC/モバイル共通の機能 */
#navi .navi-in .menu-pc, #navi-menu-content .menu-drawer {
  overflow-x: auto; /* 横スクロールを許可 */
  white-space: nowrap; /* メニュー項目が折り返さないようにする */
  display: flex; /* メニュー項目を横並びにするため */
  flex-wrap: nowrap;
  width: 100%;
/*  padding-bottom: 5px;  スクロールバー分のスペース */
  
  touch-action: pan-x; /* モバイルでは横方向のネイティブスクロールを許可し、慣性も有効にする */
  -ms-touch-action: pan-x;
  
  cursor: grab; /* 通常時のカーソル */
  -webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
}


/* PCのJavaScriptでのみ使用されるクラス */
.is-dragging {
  cursor: grabbing;
  user-select: none; /* テキスト選択を防止 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* PCのデフォルトのスクロールバーの見た目を定義 */
/* PCの一般的な高さは5pxに固定し、CLSを防止 */
@media screen and (min-width: 1024px) {
  #navi .navi-in .menu-pc::-webkit-scrollbar {
    height: 5px !important; /* PCでのスクロールバーの高さ。!importantで強制適用 */
  }

  #navi .navi-in .menu-pc::-webkit-scrollbar-thumb {
    background-color: #cccccc !important; /* ← PCでの通常時のツマミの色を#ccccccに */
    border-radius: 5px;
  }

  #navi .navi-in .menu-pc::-webkit-scrollbar-track { /* セレクタを簡略化 */
    background-color: #f4f5f7 !important; /* ← PCでの通常時のトラック色を#f4f5f7に */
    border-radius: 4px;
  }
	
  #navi .navi-in .menu-pc:hover::-webkit-scrollbar-thumb {
      background-color: #999999 !important; /* ← PCでのマウスオーバー時のツマミの色を濃いめに調整 */
  }
}

/* モバイル（画面幅1023px以下）でのみ適用されるスクロールバースタイル */
@media screen and (max-width: 1023px) {
  #navi .navi-in .menu-pc::-webkit-scrollbar,
  #navi-menu-content .menu-drawer::-webkit-scrollbar {
    height: 4px !important; /* モバイルでのスクロールバーの高さ。!importantで強制適用 */
  }

  #navi .navi-in .menu-pc::-webkit-scrollbar-thumb,
  #navi-menu-content .menu-drawer::-webkit-scrollbar-thumb {
    background-color: #cccccc !important; /* ← モバイルでのツマミの色を#ccccccに */
    border-radius: 4px;
  }

  #navi .navi-in .menu-pc::-webkit-scrollbar-track,
  #navi-menu-content .menu-drawer::-webkit-scrollbar-track {
    background-color: #f4f5f7 !important; /* ← モバイルでのトラック色を#f4f5f7に */
    border-radius: 4px;
  }
	
	
#navi-menu-content .menu-drawer {
    display: block;
}
	
	
}























/* * * ヘッダ（タイトル画像）周り * * */
.header-in {
    display: flex;
    flex-direction: row; /* タイトルロゴの右に並ぶよう設定変更 */
    justify-content: flex-start; /* タイトルロゴの右に並ぶよう設定変更 */
    align-items: center; /* 上下の高さ調整 */
}
.titlelogo {
	margin-top: auto;
	margin-bottom: auto;
	min-width: 200px;
	max-width: 400px; /* 仮の値。要調整 */
}
.logo-image {
    padding: 10px 0;
}

.titlelogomigi {
	width: 100%;
    min-width: 200px;
    margin-top: auto;
    margin-bottom: auto;
}

.titlelogomigi .search-box {
    margin: 0 1em 0 0.5em;
	padding: 10px 0;

}
/*834px以下*/
@media screen and (max-width: 834px){
.header-in {
    flex-wrap: wrap;
}
.titlelogomigi .search-box {
	margin: 0 1em 0 1em;
}
} /*834px以下ここまで*/

/* * * ヘッダ（タイトル画像）周り ここまで * * */


/* * * ヘッダメニュー周り  * * */

/* モバイルメニュー背景色 */
.mobile-header-menu-buttons {
	background-color: #2c6295;
}

.header-container .navi-in > ul li {
    display: block;
    width: 180px;
    height: 48px;
    padding: 0 10px;
    position: relative;
}
/* PC表示の場合のみpadding-top: 10px */
@media screen and (min-width: 1024px) {
	.header-container .navi-in > ul li {
		padding-top: 10px;
	}
}



.header-container .navi-in > .menu-header{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
/* * * ヘッダメニュー周り ここまで * * */






/* * * インデックスミドルの設定変更（24個目に表示） * * */
.ect-3-columns > *, .fpt-3-columns > * {
    width: 100%;
}
/* * * インデックスミドルの設定変更（24個目に表示） ここまで * * */



/* * * トップページなどの一覧表示関係 * * */
/* サムネの上に画像と文字を重ねる */
.samunenoue_oya {
	position: relative;
}
/* ↑サムネの上に画像と文字を重ねる↑ */
.samunenoue1 {
	position: absolute;
    right: -2px;
    bottom: -4em;
    z-index: 2;
    background-color: transparent;
    width: 72px;
}






/* ↑サムネの上に画像と文字を重ねる↑ */





/* 割引％（ギザ丸）関連 */
.gizamaru {
	display: block;
    height: 0em;
    line-height: 1em;
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	rotation: 20deg;
	position: relative;
/*	top: -2.8em;	*/
    top: -2.22em;
    left: 0%;
	text-decoration: none;
    text-align: center;
	color: #FFFF00;
	font-weight: bold;
	text-shadow: 0 0 6px #646464, 0 0 6px #646464;
	-moz-transition: -moz-transform 0.3s ease;
	-webkit-transition: -webkit-transform 0.3s ease;
}

.gizamaru em {
    font-style: initial;
    font-size: 1.1em;
}


.nanpaa {
	position:absolute;
	left:50%;
    transform: translate(-45%, -30%);
}
/* ↑割引％（ギザ丸）関連↑ */





/* 参考・激安価格とｐｔ */
.sankou_price {
    line-height: 1em;
    color: #565955;
}
.uchikeshinaname {
    position: relative;
    text-shadow: 3px 3px 0 #ffffff, -3px 3px 0 #ffffff, 3px -3px 0 #ffffff, -3px -3px 0 #ffffff;
    z-index: 2;
}
.uchikeshinaname::after {
    content: '';
    transform: rotate(7deg);
    width: 100%;
    border-top: 3px solid #ff0000;
    position: absolute;
    top: 50%;
    left: 0;
}
.sankou-price-kakaku {
	text-decoration: line-through;
    color: #565955;
}

.gekiyasu_price {
	font-weight: bold;
	font-size: 1.6em;
    line-height: 1.4em;
    color: #ff0000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ff0000;
	z-index: 2;
	padding-left: 0.2em;
  /* 2. 白い縁 (外側の縁) を text-shadow で追加 (3倍の太さ) */
    text-shadow:
        3px 3px 0 #ffffff,   /* 右下 */
        -3px 3px 0 #ffffff,  /* 左下 */
        3px -3px 0 #ffffff,  /* 右上 */
        -3px -3px 0 #ffffff; /* 左上 */
    
    z-index: 2;
    padding-left: 0.2em;
}

.amazon_point_space {
    line-height: initial;
}

.column-left-kakaku .amazon_point{
    font-size: 1rem;
	color: #B12704;
	padding: 0.5em 1em;	
}
@media screen and (max-width: 834px) {
	.column-left-kakaku {
		text-align: center;
	}
}




.amazon_point {
    font-size: 14px;
    color: #B12704;
    padding: 0.5em 1em;
}




.kobetsu-main {
    line-height: 1.8em;
}

.product-item-snippet{
	font-size: 1rem;
}
/* スマートフォンなど狭い画面での調整 */
@media screen and (max-width: 834px) {
	.wp-block-cocoon-blocks-label-box-1.label-box.block-box.not-nested-style.cocoon-block-label-box {
	font-size: 0.9rem;
	}
}
.column-left-kakaku, .column-left-bunseki {
	margin-left: 3em;
}
/* スマートフォンなど狭い画面での調整 */
@media screen and (max-width: 834px) {
	.column-left-kakaku {
		margin-left: 0;
	}
	.column-left-bunseki {
		margin-left: 0;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}
}


/* ↑参考・激安価格とｐｔ↑ */

/* * * ↑トップページなどの一覧表示関係↑ * * */






/* スクロールバーの高さと色調整（ＰＣ） */
/* スクロールバーの高さを調整 */
.top-slider ul::-webkit-scrollbar {
    height: 5px; /* 適切な高さに調整 */
}
/* スクロールバーの背景色を透明にする */
.top-slider ul::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* 色を半透明に */
	border-radius: 3px;    /* 角を丸める */
}
/* マウスオーバー時のスクロールバーの表示 */
.top-slider ul:hover::-webkit-scrollbar {
    height: 5px; /* マウスオーバー時の高さを調整 */
}
/* マウスオーバー時のボタンのスタイル */
.top-slider ul:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5); /* 色を半透明に */
}
/* ↑スクロールバーの高さと色調整（ＰＣ）↑ */


/***  矢印ボタンを重ねて表示させるために親要素にrelativeを追加  ***/
.top-slider {
	position: relative; /***  矢印ボタンを重ねて表示させるために親要素にrelativeを追加  ***/
}
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(255 255 255 / 75%);
    color: black;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 2;
    height: 100px;
    width: 45px;
    text-align: center;
    box-shadow: 0 1px 3px #888;
}
.slider-prev {
	left: 0;
	
}
.slider-next {
	right: 0;
}
/***  矢印ボタンを重ねて表示させるために親要素にrelativeを追加  ***/


/*トップスライダー*/
.top-slider ul{
	display: flex;
	overflow-x: scroll;
	margin: 0;	
	padding: 0;
	padding-bottom: 1em;
	overflow-y: hidden; /* 画像の親要素に対してoverflow-yを非表示にする */
}
.top-slider li{
    margin: 0px 1vh 0px 2vh;
    padding: 0 8px;
    list-style: none;
}
.top-slider-banner img {
    max-width: 150px;
    height: 150px;
    object-fit: contain;
    transition: border 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;	
}
.top-slider-banner img:hover {
    filter: brightness(1.2);
    box-shadow: 2px 2px 4px rgba(0,0,0,.3);
    border-color: #ccc;
    transform: scale(1.1);
	overflow-y: hidden; /* 縦のスクロールバーを非表示にする */
}
.hideimg {
  display: none;
}
/*↑トップスライダー↑*/





/***  PC通常の記事一覧を縦列３カードを６列に  ***/
.ect-3-columns .entry-card-wrap {
	width: 16.25%;
	border-radius: 6px;
}
/* タブレット通常の記事一覧の場合４列に */
@media screen and (max-width: 1023px) {
  .ect-3-columns .entry-card-wrap {
	width: 24.62%;
	border-radius: 6px;
}
}
/* スマホ通常の記事一覧の場合２列に */
@media screen and (max-width: 767px) {
  .ect-3-columns .entry-card-wrap {
	width: 49.75%;
	border-radius: 6px;
}
}
/********ここまで　PC通常の記事一覧を縦列３カードを６列にに*******/




/*記事一覧の画像サイズ調整*/
.entry-card img {
  /* アスペクト比の指定 */
  aspect-ratio:   16 / 16;
  /* 画像を切り取る */
    object-fit: contain;
}
/*↑記事一覧の画像サイズ調整↑*/

/*関連記事（2x4）の画像サイズ調整*/
.rect-vertical-card .related-entry-card-thumb img {
    aspect-ratio: 16 / 16;
    object-fit: contain;
}
/*↑関連記事（2x4）の画像サイズ調整↑*/

/*人気記事一覧（cocoon）の画像サイズ調整*/
.entry-card img {
  /* アスペクト比の指定 */
  aspect-ratio:   16 / 16;
  /* 画像を切り取る */
    object-fit: contain;
}
/*↑人気記事一覧（cocoon）の画像サイズ調整↑*/
.card-thumb img {
    width: 100%;
    aspect-ratio: 16 / 16;
    object-fit: contain;
}

/* 画像がデカ過ぎる場合の対処 */
.content-in .main .entry-content .section img {
    max-width: 100%;
    max-height: 200px;
    height: auto;
}
/* ↑画像がデカ過ぎる場合の対処↑ */



/* 管理者モードPV表示 */
.entry-card .admin-pv {
    margin: 0.4em 0 0.4em;
    font-size: 0.6em;
}
/* ↑管理者モードPV表示↑ */



/* 記事一覧のh2タイトル */
.entry-card-title {
    font-size: 16px;
    margin: 0.4em 0 0.3em 0;
    line-height: 1.2;
    -webkit-line-clamp: 3;
}
/* ↑記事一覧のh2タイトル↑ */




/* ○分前＆超新着関連 */
.entry-date {
    /* 投稿日時の基本スタイル */
    font-size: 14px; /* フォントサイズ */
    color: #666; /* 文字色 */
}
/* ラベルのスタイル */
.newmark {
    margin-left: 5px; /* ラベルの左マージン */
}
/* 各時間帯のスタイル */
.newmark-hoyahoya {
    color: #9c27b0; /* 1時間前: 赤 */
    font-weight: bold; /* 太字 */
}
.newmark-supernew, .newmark-new {
    color: #e91e63; /* 1時間前: 赤 */
    font-weight: bold; /* 太字 */
}
.newmark-subnew {
    color: #ff5722; /* 4時間前、8時間前: オレンジ */
    font-weight: bold; /* 太字 */
}
.newmark-halfday, .newmark-1day, .newmark-2day {
    color: #3f51b5; /* 12時間前、24時間前: 青 */
    font-weight: bold; /* 太字 */
}
/* ↑○分前＆超新着関連↑ */



/* entry-card（記事一覧表示）の微調整関係 */
.ect-vertical-card .entry-card-wrap .entry-card-content {
	/* height: 100%; */
	height: auto;
}
.e-card-info {
/*  justify-content: flex-end; */
    justify-content: flex-start;
}
.ect-vertical-card .entry-card-wrap .entry-card-meta {
    /* padding-top: 5px; */
    padding-top: initial;
}
/* ↑entry-card（記事一覧表示）の微調整関係↑ */




/* 子テーマの style.css に記述 */

/* PCのみ表示 */
.amazon-item-box .sp-only {
    display: none;
}

/* スマホのみ表示 */
@media (max-width: 767px) { /* スマホのブレイクポイントに合わせる */
    .amazon-item-box .pc-only {
        display: none;
    }
    .amazon-item-box .sp-only {
        display: block; /* もしくは flex など、親要素のレイアウトに合わせて */
    }

    /* Swiperコンテナの幅調整（必要であれば） */
    .my-amazon-swiper-container {
        width: 100%; /* 親要素の幅いっぱいに */
        margin: 0 auto;
        padding-bottom: 25px; /* ページネーション分の余白 */
    }

    /* Swiperの画像がはみ出さないように */
    .my-amazon-swiper-container img {
        max-width: 100%;
        height: auto;
    }

    /* Swiperページネーションの調整 */
    .my-amazon-swiper-container .swiper-pagination {
        position: absolute;
        bottom: 0px; /* 位置を調整 */
        left: 0;
        width: 100%;
        text-align: center;
    }
}

/* その他の調整（必要であれば） */
/* Swiperが有効な場合の画像のfigureの高さなど */
.amazon-item-box.enable-swiper .amazon-item-thumb {
    /* PC表示の高さに影響しないよう、スマホ時のみ調整 */
    height: auto;
    overflow: hidden;
}

/* PC時の画像の横幅がSwiperで固定されているため、調整 */
/* Medium画像 (160px) を基準にしていた場合など */
.amazon-item-box .pc-only img.amazon-item-thumb-image {
    width: auto; /* 元の画像の幅を維持 */
    height: auto; /* 元の画像の高さを維持 */
    max-width: 100%; /* 親要素からはみ出さないように */
}






/* ==========================================================
 * モバイル・フッターボタンの共有ボタン設定
 * ========================================================== */

/* はてぶ */
.share-menu-content .hatebu-button,
/* mastodon */
.share-menu-content .mastodon-button,
/* bluesky */
.share-menu-content .bluesky-button,
/* misskey */
.share-menu-content .misskey-button,
/* Pinterest */
.share-menu-content .pinterest-button,
/* linkedin */
.share-menu-content .linkedin-button,
/* pocket */
.share-menu-content .pocket-button,
/* コメント */
.share-menu-content .comment-button {
  display: none;
}
[class*=bc-brand-color] .copy-button {
    --cocoon-sns-color: var(--cocoon-pocket-color);
}
.share-menu-content .sns-share-buttons a {
    width: 80%;
}
.sns-buttons a {
    font-size: 60px;
    height: 120px;
}
.share-menu-content {
    top: 30%;
}
.share-menu-content {
    top: 25%;
}













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

/********  モバイルフッターメニューの色変更  *********/
	.mobile-footer-menu-buttons {
		color: #e6ebf0;
		background-color: #0d1217;
			/* 右上(100% 0%)を中心とした円形グラデーション */
			/* 色1: 右上のハイライト（くすんだ青灰色） */
			/* 色2: 中間のダークブルー */
			/* 色3: 全体のベースとなる深い黒に近い青 */
			background-image: radial-gradient(
				circle at 100% 0%, 
				#3e5463 0%, 
				#18232e 50%, 
				#0d1217 100%
			);
	}
	.mobile-menu-buttons .menu-icon {
		color: #e6ebf0;
	}
	.mobile-menu-buttons .menu-caption {
		color: #e6ebf0;
	}
/********  ここまで　モバイルフッターメニューの色変更  *********/
	
	
	
}



/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	
	
	
/* * * トップページなどの一覧表示関係　差分 * * */
/* サムネの上に画像と文字を重ねる　差分 */
.samunenoue1 {
	right: 0px;
/*  bottom: -2em;*/
    bottom: -3.8em;
/*  width: 66px;*/
    width: 64px;
}	
/* ↑サムネの上に画像と文字を重ねる　差分↑ */
	
/* 割引％（ギザ丸）関連　差分 */
.gizamaru {
	top: -2.3em;
}
.gizamaru span {
	width: 2.6em;
	height: 2.6em;
}	
.gizamaru em {
	font-size: 1em;
}
	
/* ↑割引％（ギザ丸）関連　差分↑ */	
		
/* 参考・激安価格とｐｔ差分 */
.uchikeshinaname::after {
    content: '';
    transform: rotate(7deg);
    width: 100%;
    border-top: 3px solid #ff0000;
    position: absolute;
    top: 50%;
    left: 0;
}
.gekiyasu_price {
	font-size: 1.6em;
	padding-left: initial;
}
.amazon_point{
    padding-left: initial;
}
/* ↑参考・激安価格とｐｔ差分↑ */
/* * * ↑トップページなどの一覧表示関係　差分↑ * * */	
	
	
	
	
	
}

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