@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/






/* ▼レビュー用テーブルのカスタマイズ */
.review-table-1 {
    border: none !important; /* 全体のボーダーをリセット */
    border-color: #ccc;
    border-collapse: collapse;
}

/* テーブルの1列目のスタイル */
.review-table-1 td:first-child,
.review-table-1 th:first-child {
    background: #fafafa;
}

/* 各セルの左と右のボーダーをなくす */
.review-table-1 td,
.review-table-1 th {
    border-left: none !important;
    border-right: none !important;
}



/* ▼メインビジュアルを太字に */
.p-mainVisual__slideTitle {
    font-weight: bold;
}


/* ▼▼　AIレビューの枠線 ▼▼*/
.ai-review-border {
    border: 5px solid #054c09 !important; /* ボーダーの幅、スタイル、色に強制適用 */
    border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */
	padding-top: 0px !important; /* 上方向の内側余白を10pxに設定 */
	background-color: #FAFDF9 !important;
}



/* ▼▼ オススメランキング No1 の枠 ▼▼*/
/*キャプションボックスの色変更*/
.capbox-no1.cap_box {
    --capbox-color:#ffc107;
}
.capbox-no1 .cap_box_content {
    background-color: #fffef5; 
	border: 3px solid #ffc107 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No2 の枠 ▼▼*/
/*キャプションボックスの色変更*/
.capbox-no2.cap_box {
    --capbox-color:#9f9f9f;
}
.capbox-no2 .cap_box_content {
    background-color: #f9f9f9; 
	border: 3px solid #9f9f9f !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No3 の枠 ▼▼*/
/*キャプションボックスの色変更*/
.capbox-no3.cap_box {
    --capbox-color:#C07E66;
}
.capbox-no3 .cap_box_content {
    background-color: #FFFDFD; 
	border: 3px solid #C07E66 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No3 の枠 ▼▼*/
/*【茶色】キャプションボックスの色変更*/
.capbox-brown .cap_box {
    --capbox-color:#C07E66;
}
.capbox-brown .cap_box_content {
    background-color: #FFFDFD; 
	border: 3px solid #C07E66 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}



/* ▼▼ オススメランキング No4 の枠 ▼▼*/
/*キャプションボックスの色変更*/

.capbox-no4 .cap_box {
    --capbox-color:#43a047;
}
.capbox-no4 .cap_box_content {
    background-color: #f8fff8; 
	border: 3px solid #43a047 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No4 の枠 ▼▼*/
/*【緑】キャプションボックスの色変更*/

.capbox-green.cap_box {
    --capbox-color:#43a047;
}
.capbox-green .cap_box_content {
    background-color: #f8fff8; 
	border: 3px solid #43a047 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No5 の枠 ▼▼*/
/*キャプションボックスの色変更*/

.capbox-no5.cap_box {
    --capbox-color:#0693e3;
}
.capbox-no5 .cap_box_content {
    background-color: #f8fcff; 
	border: 3px solid #0693e3 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No5 の枠 ▼▼*/
/*　【青】キャプションボックスの色変更*/

.capbox-blue.cap_box {
    --capbox-color:#0693e3;
}
.capbox-blue .cap_box_content {
    background-color: #f8fcff; 
	border: 3px solid #0693e3 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No6 の枠 ▼▼*/
/*キャプションボックスの色変更*/

.capbox-no6.cap_box {
    --capbox-color:#5fe466;
}
.capbox-no6 .cap_box_content {
    background-color: #fafffa; 
	border: 3px solid #5fe466 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}

/* ▼▼ オススメランキング No6 の枠 ▼▼*/
/*【黄緑】キャプションボックスの色変更*/

.capbox-yellow-green .cap_box {
    --capbox-color:#5fe466;
}
.capbox-yellow-green .cap_box_content {
    background-color: #fafffa; 
	border: 3px solid #5fe466 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}

/* ▼▼ オススメランキング No7 の枠 ▼▼*/
/*キャプションボックスの色変更*/

.capbox-no7.cap_box {
    --capbox-color:#f78da7;
}
.capbox-no7 .cap_box_content {
    background-color: #fffdfd; 
	border: 3px solid #f78da7 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}

/* ▼▼ オススメランキング No7 の枠 ▼▼*/
/* 【ピンク】キャプションボックスの色変更*/

.capbox-pink.cap_box {
    --capbox-color:#f78da7;
}
.capbox-pink .cap_box_content {
    background-color: #fffdfd; 
	border: 3px solid #f78da7 !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No8 の枠 ▼▼*/
/*キャプションボックスの色変更*/

.capbox-no8.cap_box {
    --capbox-color:#ab7bff;
}
.capbox-no8 .cap_box_content {
    background-color: #faf6ff; 
	border: 3px solid #ab7bff !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼ オススメランキング No8 の枠 ▼▼*/
/*　【紫】キャプションボックスの色変更*/

.capbox-purple.cap_box {
    --capbox-color:#ab7bff;
}
.capbox-purple .cap_box_content {
    background-color: #faf6ff; 
	border: 3px solid #ab7bff !important; /* ボーダーの幅、スタイル、色に強制適用 */
	border-radius: 2px !important; /* ボーダーの角を2px丸くすることを強制 */

}


/* ▼▼reCAPTCHA 表示位置変更▼▼ */
.grecaptcha-badge{
    margin-bottom: 90px;
}




/** ▼▼WordPress Popular Postsのデザイン▼▼ **/

ul.wpp-list li {
    position: relative; /* 擬似要素を配置するための基準を設定 */
    display: grid;
    grid-template-rows: auto auto; /* サムネイルとテキストを縦方向に配置 */
    justify-items: center; /* 子要素を中央揃え */
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px dashed #000000;
    counter-increment: wpp-count; /* 各リスト項目でカウンターを1増やす */
}

/* サムネイル画像のスタイル */
ul.wpp-list li img {
    width: 230px; /* サムネイル画像の横幅 */
    height: 121px; /* サムネイル画像の高さ */
    object-fit: cover;
    border-radius: 5px; /* 角丸効果（オプション） */
    transition: all 0.3s ease-in-out; /* ホバー時のスムーズなアニメーション */
}

/* サムネイル画像のみのホバー効果 */
ul.wpp-list li img:hover {
    opacity: 0.7; /* サムネイル画像を半透明にする */
}

/* テキストリンクの通常時のスタイル */
ul.wpp-list li a.wpp-post-title {
    font-size: 14px; /* テキストの文字サイズ */
    color: #333; /* 通常時の文字色 */
    text-decoration: none; /* 下線を削除 */
    transition: color 0.3s ease; /* 文字色の変化をスムーズに */
}

/* テキストリンクのみのホバー効果 */
ul.wpp-list li a.wpp-post-title:hover {
    color: #666; /* マウスオーバー時に文字色をグレーに変更 */
}

/* ランキングカウンター */
ul.wpp-list li::before {
    content: counter(wpp-count); /* カウンターの値を表示 */
    position: absolute; /* サムネイル画像の左上に配置 */
    top: 10px; /* サムネイル画像の上端からの距離 */
    left: 10px; /* サムネイル画像の左端からの距離 */
    font-size: 16px; /* カウンターの文字サイズを大きく調整 */
    font-weight: bold; /* 太字 */
    color: #fff; /* 文字色（白） */
    background-color: #555; /* デフォルトの背景色 */
    padding: 5px 8px; /* 内側の余白 */
    border-radius: 3px; /* 四角形の背景にする */
    z-index: 2; /* サムネイル画像の上に表示 */
}

/* ランキング1〜3位のカウンター背景色変更 */
ul.wpp-list li:nth-child(1)::before {
    background-color: #EFAF00; /* 金色（1位） */
}
ul.wpp-list li:nth-child(2)::before {
    background-color: #9EACB4; /* 銀色（2位） */
}
ul.wpp-list li:nth-child(3)::before {
    background-color: #BA6E40; /* 銅色（3位） */
}

/* ▼▼ボタン色個別設定----------------------------------------------▼▼ */
.btn-amazon {
    --the-btn-color: #f99a0c; /* ボタン背景色 */

}


/* ▼▼非アクティブ ボタン色個別設定----------------------------------------------▼▼ */

.btn-disabled {
    display: inline-block;
    margin: 0 3px;
    background-color: #CCCCCC;
    color: #FFFFFF;
    padding: 8px 10px;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
    cursor: not-allowed;
    opacity: 0.6;
    line-height: 1.6;
}


/* ▼▼ポチップ／インラインボタン色個別設定----------------------------------------------▼▼*/

.-amazon.pochipp-inline__btnwrap>.pochipp-inline__btn{
	 background-color:var(--pchpp-color-amazon)!important;
}

.-rakuten.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-rakuten)!important;
}

.-yahoo.pochipp-inline__btnwrap>.pochipp-inline__btn{
	background-color:var(--pchpp-color-yahoo)!important;
}


.my_font_size11{
    font-size : 11px !important;
}

.-custom.pochipp-inline__btnwrap > .pochipp-inline__btn {
    background-color: var(--pchpp-color-rakuten)!important; /* 楽天色を適用 */
}

.-custom_2.pochipp-inline__btnwrap > .pochipp-inline__btn {
    background-color: var(--pchpp-color-yahoo)!important; /* Yahoo色を適用 */
}




/* ▼▼メルカリのボタンを一番後ろに配置 */
.pochipp-box__btnwrap.-mercari {
    order: 99; /* 他のボタンより大きな値を設定 */
}


/* ▼▼スクロールヒントを出す */

.scroll-hint {
    position: relative;
    overflow-x: auto;
    display: block;
    white-space: nowrap; /* 横スクロール可能にする */
}

.scroll-hint .dataTable {
    width: 100%; /* テーブルの幅を調整 */
}

.scroll-hint-icon {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    z-index: 1;
    pointer-events: none;
}




/* ▼▼▼▼▼▼▼▼▼ table-s-1 (左1列グレー：見出し1行白) */

/* 〇1列目の固定設定〇 */
/* 1列目を固定 */
.table-s-1 tbody td:first-child,
.table-s-1 thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 9;
}

/* 見出し1行目を固定（見出し1番左上のセルを表に表示するため） */
.table-s-1 thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 見出し左上の1セルを固定（見出し1番左上のセルを表に表示するため） */
.table-s-1 thead th:first-child {
  z-index: 11; /* 最前面 */
}

/* 〇1列目の色設定〇 */

/* 1列目のスタイルについて */
.table-s-1 tbody td:first-child,
.table-s-1 thead th:first-child {
  background: #333; /* 1列目の背景をダークグレー (#333) に設定 */
  color: #fff; /* テキスト色を白に設定 */
  border-left: 1px solid transparent; /* 左側の縦線を設定 */
  border-right: 1px solid transparent; /* 右側の縦線を設定 */
	  border-bottom: 1px solid #fff; /* 下側の縦線を設定 */
}

/* 1列目のスタイルについて */
.table-s-1 tbody td:first-child::before,
.table-s-1 thead th:first-child::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1; /* セルの背面に配置 */
  border-left: 1px solid #333; /* 左側の縦線を設定 */
  border-right: 1px solid #333; /* 右側の縦線を設定 */
	border-bottom: 1px solid #fff; /* 下線を設定 */
  left: 1px; /* 左側の線を内側に移動 */
  width: calc(100% - 2px); /* 幅を調整して右側の線も内側に移動 */
	

}

/* 〇1行目の色設定〇 */

/* 見出し1行目の1列目を除外してテキスト色＆背景色を変更 */
.table-s-1 thead th:not(:first-child) {
  background: #fff;   /* 親要素自体の背景を設定 */
  color: #000; /* 優先して赤色に変更 */
}

/* 〇その他の色設定〇 */

/* 見出しの下の線を黒の実線に設定（1列目を除外） */
.table-s-1 thead th:not(:first-child) {
  border-bottom: 1px solid black; /* 1列目以外の見出しセルに黒の実線を設定 */
}

/* テーブル内の左側にグレーの点線を設定 */
.table-s-1 thead th,
.table-s-1 tbody td,
.table-s-1 tfoot th {
  border-left: 1px dotted gray !important; /* 左側の縦線をグレーの点線で設定 */
}

/* 左端と左から2番目の縦線を削除 */
.table-s-1 thead th:first-child,
.table-s-1 tbody td:first-child,
.table-s-1 tfoot th:first-child,
.table-s-1 thead th:nth-child(2),
.table-s-1 tbody td:nth-child(2),
.table-s-1 tfoot th:nth-child(2) {
  border-left: none !important; /* 縦線を削除 */
}

/* 見出し1列目の下の線（橫スクロール対応のため） */
.table-s-1 thead th:first-child::before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #D4D4D4; /* 下側の線をグレーに設定 （横スクロールに対応） */
}





/* 〇table-s-1の勝手な改行を防止する */
.table-s-1 thead th,
.table-s-1 td {
	white-space: nowrap;
}

/* 〇〇 table-s-1: フォントサイズ調整 */
/* スマホ（～599px） */
@media (max-width: 599px) {
	.table-s-1 th,
	.table-s-1 td {
		font-size: 85% !important; /* スマホで85% */
		padding-left: 4px !important; /* 左側のパディングを4pxに設定 */
		padding-top: 2px !important; /* 上下のパディングは適宜調整 */
		padding-right: 2px !important; /* 右側のパディング */
		padding-bottom: 2px !important; /* 下側のパディング */
	}
}

/* タブレット（600px～959px） */
@media (min-width: 600px) and (max-width: 959px) {
	.table-s-1 th,
	.table-s-1 td {
		font-size: 90% !important; /* タブレットで90% */
		padding: 4px !important; /* 必要に応じて調整 */
	}
}

/* PC（960px以上） */
@media (min-width: 960px) {
	.table-s-1 th,
	.table-s-1 td {
		font-size: 100% !important; /* PCで100% */
		padding: 5px !important; /* 必要に応じて調整 */
	}
}




/* 〇〇 table-s-1 クラスを持つテーブル内のテキスト選択を禁止 */
.table-s-1 {
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* 標準ブラウザ */
}







/* ●● テキスト＆写真中央 1行目全体に適用しつつ、1列目は適用しない*/

/* 1行目のスタイル（1列目を除外） */
.row1-text-and-img tr:nth-child(1) td:not(:first-child),
.row1-text-and-img tr:nth-child(1) th:not(:first-child) {
    text-align: center;      /* テキストを中央揃え */
    vertical-align: middle;  /* 垂直方向の中央揃え */
}

/* 1行目の画像に適用（1列目を除外） */
.row1-text-and-img tr:nth-child(1) td:not(:first-child) img,
.row1-text-and-img tr:nth-child(1) th:not(:first-child) img {
    height: 100px;               /* 高さを100pxに固定 */
    width: auto;                 /* アスペクト比を保つため、幅は自動調整 */
    max-width: 100%;             /* 画像の最大幅を100%に設定 */
    box-sizing: border-box;      /* ボックスサイズの計算にボーダーを含める */
}






/* ●● テキスト＆写真中央 2行目全体に適用しつつ、1列目は適用しない*/

/* 2行目のスタイル（1列目を除外） */
.row2-text-and-img tr:nth-child(2) td:not(:first-child) {
    text-align: center;      /* テキストを中央揃え */
    vertical-align: middle;  /* 垂直方向の中央揃え */
}

/* 2行目の画像に適用（1列目を除外） */
.row2-text-and-img tr:nth-child(2) td:not(:first-child) img {
    height: 100px;               /* 高さを100pxに固定 */
    width: auto;                 /* アスペクト比を保つため、幅は自動調整 */
    max-width: 100%;             /* 画像の最大幅を100%に設定 */
    box-sizing: border-box;      /* ボックスサイズの計算にボーダーを含める */
}



/* ▼▼ テキスト＆写真中央 1列目全体に適用する　*/ 
/* ●● テキスト＆写真中央 1列目全体に適用する　*/
/* .col1-text-and-img の1列目の画像に適用 */
.col1-text-and-img tbody td:first-child img,
.col1-text-and-img thead th:first-child img {
    max-width: 80px;       /* 横の最大幅を80pxに制限 */
    max-height: 100px;     /* 縦の最大高さを100pxに制限 */
    width: 100%;           /* 親要素の幅に対して調整 */
    height: 100%;          /* 親要素の高さに対して調整 */
    object-fit: contain;   /* アスペクト比を維持しつつ、範囲内に収める */
    display: block;        /* 不要な余白を防ぐ */
}



/* 1列目のスタイルについて */
.col1-text-and-img tbody td:first-child,
.col1-text-and-img thead th:first-child {
  background: #ebebeb; /* 1列目の背景をダークグレー (#333) に設定 */
  color: #333; /* テキスト色を白に設定 */
  text-align: center;      /* 画像を水平方向に中央配置 */
  vertical-align: middle;  /* 画像を垂直方向に中央配置 */
  border-left: 1px solid transparent; /* 左側の縦線を設定 */
  border-right: 1px solid transparent; /* 右側の縦線を設定 */
	  border-bottom: 1px solid #c9c9c9; /* 下側の縦線を設定 */
}

/* 1列目のスタイルについて */
.col1-text-and-img tbody td:first-child::before,
.col1-text-and-img thead th:first-child::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1; /* セルの背面に配置 */
  border-left: 1px solid #c9c9c9; /* 左側の縦線を設定 */
  border-right: 1px solid #c9c9c9; /* 右側の縦線を設定 */
	border-bottom: 1px solid #c9c9c9; /* 下線を設定 */
  left: 1px; /* 左側の線を内側に移動 */
  width: calc(100% - 2px); /* 幅を調整して右側の線も内側に移動 */
	

}


/* tbody内の1行目すべてのセルにテキスト色＆背景色を変更 */
.row1-s-1 tbody tr:first-child td {
  background: #28BA62 !important;   /* 背景色 */
  color: #fff !important;           /* 文字色 */
  text-align: center;               /* テキストを中央揃え */
  vertical-align: middle;           /* 垂直方向の中央揃え */
}



/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

/* ▼tablepress 行が上に列が左のブラウザの端で固定され、追随してくるようにする*/

/* ヘッダー行を固定 */
.fix_row_col_at_main thead th {
  position: sticky;
  top: 0;
  z-index: 10;

}

/* 1列目を固定 */
.fix_row_col_at_main tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 9;

}

/* 左上の1コマ（1行目と1列目の交差するセル）を常に左上に固定 */
.fix_row_col_at_main thead th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 11; /* 他のセルよりも高い値に設定 */

}


/* テーブルをサイドバーより上に表示させる */
.fix_row_col_at_main {
    position: relative; 
    z-index: 9999; /* 表示したい要素よりも高い値を設定 */
}














/* ●内側のみ縦線・横線を異なるスタイルで表示するクラス */
.border-in-tp td, 
.border-in-tp th {
    border-right: 1px dotted #cccccc; /* 縦線（グレーの1px点線） */
    border-bottom: 3px solid #ffffff; /* 横線（白色の3px実線） */
}

/* 最後の列と最後の行には線を表示しない */
.border-in-tp tr td:last-child, 
.border-in-tp tr th:last-child {
    border-right: none; /* 最後の列には縦線を表示しない */
}

.border-in-tp tr:last-child td {
    border-bottom: none; /* 最後の行には横線を表示しない */
}


/* ●.tp-col1-color クラスが適用されたテーブルの1列目の色変更 */
.tp-col1-color td.column-1 {
    vertical-align: middle;
    background: #dff4e0; /* 薄い緑色 */
}


/* ●.tp-row1-center クラスが適用されたテーブルの1行目を色を変える */
.tp-row1-center .row-1 th, 
.tp-row1-center .row-1 td {
    background: #88cb7f;
}

/* ●.tp-row1-center クラスが適用されたテーブルの1行目を中央揃えにする（1列目は除外） */
.tp-row1-center .row-1 th:not(:first-child), 
.tp-row1-center .row-1 td:not(:first-child) {
    text-align: center;      /* テキストを中央揃え */
    vertical-align: middle;  /* 垂直方向の中央揃え */
}

/* 画像の場合はアスペクト比を保ちつつ高さを128pxに固定 */
.tp-row1-center .row-1 th:not(:first-child) img, 
.tp-row1-center .row-1 td:not(:first-child) img {
    height: 128px;               /* 高さを128pxに固定 */
    width: auto;                 /* アスペクト比を保つため、幅は自動調整 */
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); /* 画像に沿った影を追加 */
    max-width: 100%;             /* 画像の最大幅を100%に設定 */
    box-sizing: border-box;      /* ボックスサイズの計算にボーダーを含める */
}