@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------------------------------------------------------------------------------------------------
 * 共通スタイル (Global Styles)
 * - 全体的なフォント、基本要素（p, h1-h5, img, ul, ol）の共通設定
 * - ユーティリティクラス（テキストサイズ、配置、装飾）
 ------------------------------------------------------------------------------------------------------------------------------------------------*/

html > * {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 基本要素のスタイル */
p {
	font-size: 18px; /* bodyの基本サイズ(16px)と異なる点に注意 */
	line-height: 1.7em;
	margin: 0;
}

table {
	text-align: center;
	clear: both;
	width: 100%;
	margin: 13px auto 0px;
	border-collapse: collapse;
	border: 1px solid rgba(128, 128, 128, 0.37); /* 8080805e を rgba に修正 */
}

img {
	max-width: 100%;
	margin: 0 auto;
}

/* 見出し (H1-H5) */
h1 {
	font-size: 24px;
	font-weight: bold; /* font-weight: normal; は冗長なので削除 */
	text-align: center;
}
h2 {
	border-bottom: 3px dotted #626262;
	border-left: 4px solid #000000;
	margin: 0px 0 14px;
	padding: 3px 10px;
	font-size: 20px;
	clear: both;
	text-align: initial;
}
h4 {
	/* display, margin-block-start/end, unicode-bidi はブラウザのデフォルトスタイルなので、
		特に上書きの必要がなければ削除を検討。ここではtext-alignだけ残す。 */
	text-align: left;
	/* font-weight: bold; はデフォルトなので削除検討 */
}
h5 {
	text-align: center;
	padding: 0; /* padding:0px 0px; を簡潔に */
	font-size: 16px;
}
h6 {
	text-align: center;
	padding: 0; /* padding:0px 0px; を簡潔に */
	font-size: 14px;
	margin: 5px 0 0 0;
}
.text_comment {
	font-size: 0.8em;
	vertical-align: top;
}

/* リスト (UL, OL) */
ul {
	padding: 0;
	list-style: none;
}
ol {
	margin: 0 0 0 20px;
	padding: 0;
}
ol li {
	margin: 0 0 0 5px;
}
ol li figure {
	display: inline-block;
}
ol li dl {
	display: inline-block;
	margin: 0 0 0 10px;
}
ol li dt {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0 0 10px;
}
ol li dd {
	margin: 0;
}

/* ユーティリティクラス（テキスト関連）*/
.text_verysmall {
	font-size: 10px;
}
.text_verysmall_hikaku {
	font-size: 10px;
}
.text_small {
	font-size: 14px;
}
.text_right {
	display: block;
	text-align: right;
}
.text_left { /* 元のCSSにはなかったが、text_right との対比で追加 */
	display: block;
	text-align: left;
	margin: -5px 0 10px 10px;
}
.text_left_hikaku { /* 元のCSSにはなかったが、text_right との対比で追加 */
	display: block;
	text-align: left;
	margin: 0px 0 10px 10px;
}
.under_line span {
	background: linear-gradient(transparent 50%, #ffa500 50%);
	padding: 0 0.1em;
}
.moji_dot span {
	text-emphasis: circle #4d9bc1;
}

/* 太字・強調 */
strong { /* HTMLのstrongタグに直接適用 */
	font-weight: bold;
	color: #ed2f2f;
}
/* strong_black はクラス名として修正 (HTML側もspanなどの要素にクラスを適用する) */
.strong_black { /* 元の strong_black を CSSセレクタとして有効なクラス名に修正 */
	color: #3f3d3d;
	font-weight: bold;
}
/* strong_r も同様に修正 */
.strong_r { /* 元の strong_r を CSSセレクタとして有効なクラス名に修正 */
	color: #E8551F;
	font-weight: bold;
}
.mark01 { /* mark01 と mark02 は関連性があるので近くに配置 */
	font-weight: bold;
	background: linear-gradient(transparent 50%, #f6ff5f 50%);
}
.mark02 {
	font-size: 12px;
}

/* アニメーション */
.reflection {
	background-color: #fff;
	height: 100%;
	width: 30px;
	top: -180px;
	left: 0;
	position: absolute;
	border-radius: 4px;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflection 3s ease-in-out infinite;
	/* ベンダープレフィックスはAutoprefixerで自動付与されるのが理想。
		手動で書く場合は、最新のブラウザ対応状況を確認して必要最小限にする。
		ここでは元の記述を残す。 */
	-webkit-transform: rotate(45deg);
	-webkit-animation: reflection 3s ease-in-out infinite;
	-moz-transform: rotate(45deg);
	-moz-animation: reflection 3s ease-in-out infinite;
	-ms-transform: rotate(45deg);
	-ms-animation: reflection 3s ease-in-out infinite;
	-o-transform: rotate(45deg);
	-o-animation: reflection 3s ease-in-out infinite;
}
.img-frame {
	border: 1px solid rgba(0, 0, 0, 0.56);
	display: block;
	width: 90%;
	margin: 5px auto 30px auto;
}
/* @keyframes reflection は元のCSSにはないので、別途定義が必要です */


/*------------------------------------------------------------------------------------------------------------------------------------------------
 * レイアウト (Layout)
 * - 全体構造 (#wrap, #contents, #top_nav) の設定
 * - フッターのスタイル
 * - メディアクエリによるレスポンシブ対応
 ------------------------------------------------------------------------------------------------------------------------------------------------*/

#wrap {
	width: 100%;
	height: 100%;
	position: relative;
}

#contents {
	position: relative;
	width: 40vw; /* PC環境のデフォルト値 */
	margin: 0 auto;
	background: #fff;
	box-shadow: 0px 0px 3px #bbb;
}

#top_nav {
	width: 700px; /* デフォルト値 */
}

/* メニューアイコン */
.menu_icon {
	background: #f1f1f1;
}
.menu_icon span {
	display: block;
}


/* フッター */
#footer {
	clear: both;
	padding: 0;
	background-color: #b6f1ce;
	box-shadow: 2px 0 3px #b5b5b5;
	/* behavior: url(/PIE.htc); はIE8以前の古いプロパティなので削除推奨 */
	font-size: 14px;
}
.footer_contents{
	text-align: center;
	padding:10px 0 10px 0;
}
.copylights {
	display: block;
	padding: 10px 0;
	text-align: center;
	font-size: 90%;
	background: #fff;
}
address {
	margin: 0 0 20px 0;
	text-align: center;
	font-size: 85%;
	background: #f8f8f8;
}

/*------------------------------------------------------------------------------------------------------------------------------------------------
 * コンポーネント (Components)
 * - ボタン、タブ、テーブル、ランキング、フォームなど、再利用可能なUI要素
 ------------------------------------------------------------------------------------------------------------------------------------------------*/

.navigation-catch-image{
	width: 100%;
	height: auto;
	display: block;
	margin: 5px auto;
}
/* ボタン */
/* 各ボタンの共通スタイルをまとめる */
.btn01, .btn02, .btn03, .btn04, .btn05, .btn06, .button04 { /* 共通プロパティをここに記述 */
	display: block;
	position: relative;
	border-radius: 5px; /* btn06は10pxなので、個別に上書き */
	color: #fff;
	/* -webkit-transition: none; は削除推奨 */
	transition: none;
	box-shadow: 0 3px 3px #6c6464; /* btn02, button04 は #bbb なので個別に上書き */
	overflow: hidden;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

/* 各ボタンの色 */
.btn01, .btn02, .btn03, .btn04, .btn05, .button04 {
	background-color: #ed2f2f;
}
.btn06 {
	background-color: #ff7b00;
	border-radius: 10px; /* 共通スタイルからの上書き */
}

/* 各ボタンの個別スタイル */
.btn01 {
	line-height: 52px;
	padding: 10px 10px;
	width: 75%;
	margin: 0px auto 5px auto;
	padding: 2px 2px; /* ここでpaddingを2pxに上書き */
}
.btn01_p {
	color: #fff;
	margin: 0 auto;
	font-size: 15px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.btn02 {
	line-height: 11px;
	box-shadow: 0 3px 0 #bbb; /* 共通スタイルからの上書き */
	padding: 12px 10px;
	width: 80%;
	margin: 10px auto 10px;
}
.btn02 .btn02_p {
	color: #fff
	margin: 0 auto;
	font-size: 16px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.btn03 {
	text-shadow: 0 2px 2px rgba(0, 0, 0, .3); /* 共通スタイルからの上書き */
	padding: 6px 10px;
	margin: 10px auto;
	font-size: 18px;
	width: 60%;
}

.btn04 {
	line-height: 52px;
	padding: 10px 10px;
	width: 50%;
	padding: 2px 2px; /* ここでpaddingを2pxに上書き */
	margin: 5px auto 5px auto;
}
.btn04_p {
	color: #fff;
	margin: auto;
	font-size: 12px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.btn05 {
	line-height: 52px;
	padding: 2px 2px; /* ここでpaddingを5px 2pxに上書き */
	margin: 2px 10px;
}
.btn05_p {
	color: #fff;
	margin: auto;
	font-size: 12px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.btn06 {
	line-height: 52px;
	padding: 0 2px;
	width: auto;
	margin: 0 2px 0 0;
	padding: 5px 2px; /* ここでpaddingを5px 2pxに上書き */
}
.btn06_p{
	color: #fff;
	margin: 0 auto;
	font-size: 15px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

.koshiki_btn02 a {
	color: #fff;
	font-size: 16px;
}
.koshiki_btn03 {
	margin-top: 0;
	margin-bottom: 10px;
}
.button04 { /* btn02とほぼ同じなので、可能であればbtn02に統合を検討 */
	display: block;
	position: relative;
	background-color: #ed2f2f;
	border-radius: 4px;
	color: #fff;
	line-height: 19px;
	transition: none;
	box-shadow: 0 3px 0 #bbb;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	padding: 12px 10px;
	overflow: hidden;
	width: 72%;
	margin: 30px auto 30px;
}

/* タブ */
.container { /* .tab-container と似ているが、別途定義 */
	background-color: #fff;
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	max-width: 600px;
	width: 100%;
}
.tab-container {
	background-color: #fff;
	border-radius: 10px;
	width: 100%;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	border: 2px solid rgba(0, 0, 0, 0.29); /* 0000004a を rgba に修正 */
}
.tab-container input[type="radio"] {
	display: none;
}
.tab-label {
	display: inline-block;
	padding: 8px 10px;
	background-color: #f8f8f8;
	color: #555;
	font-size: 1.1em;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	border-bottom: 2px solid #e0e0e0;
	text-align: center;
	flex-grow: 1;
	position: relative;
	z-index: 1;
	border-right: 2px solid #e0e0e0;
}
.tab-container input[type="radio"]:last-of-type + .tab-label {
	border-right: none;
}
.tab-container input[type="radio"]:checked + .tab-label {
	background-color: #388c73;
	color: #fff;
	border-bottom-color: #388c73;
	border-right-color: #388c73;
}
.tab-label:hover {
	background-color: #e0e0e0;
}
.tab-container > .tab-label { /* float を使う前提 */
	width: calc(100% / 3);
	float: left;
}
.tab-container::after {
	content: '';
	display: table;
	clear: both;
}

.tab-content-wrapper {
	overflow: hidden;
	border: 1px solid #e0e0e0;
	border-top: none;
	border-radius: 0 0 8px 8px;
	background-color: #fff;
}
.tab-content {
	display: none;
	padding: 0;
	height: 150px;
}
#tab1-radio:checked ~ .tab-content-wrapper #tab1-content,
#tab2-radio:checked ~ .tab-content-wrapper #tab2-content,
#tab3-radio:checked ~ .tab-content-wrapper #tab3-content {
	display: block;
}

.tab-content h2 {
	color: #ffffff;
	margin: 0 auto;
	border: 4px solid #ffffff;
	padding: 2px 0 0 0;
}
.tab-content p {
	color: #333;
	line-height: 1.6;
	margin-bottom: 10px;
}
.tab-content ul {
	list-style-type: disc;
	margin-left: 20px;
	color: #333;
}
.tab-content table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
}
.tab-content th, .tab-content td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}
.tab-content th {
	background-color: #f2f2f2;
	color: #333;
}

/* プロダクトカード */
.product-card {
	display: flex;
	gap: 5px;
	background-color: #fff;
	padding: 0;
	border-radius: 10px;
	max-width: 700px;
	width: 100%;
	margin: 5px auto;
}
/* product-card内の`b`タグのスタイル調整（もしあれば）*/
.product-card b {
	font-weight: bold;
	color: #333; /* あるいは強調したい色 */
}
.product-image {
	width: 25%;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	margin: 5px;
}
.product-details {
	flex-grow: 1;
	color: #333;
}
.product-details h2 {
	margin-top: 0;
	margin-bottom: 10px;
	color: #333;
}
.product-details p {
	margin-bottom: 8px;
	color: #333;
	line-height: 1.6;
}

/* テーブル（個別定義）*/
.pickup_table01{
	margin: 10px auto;
	border: 2px solid rgba(128, 128, 128, 0.37);
}
.pickup_table01 th{
	text-align: center;
	border: none;
	font-size: 16px;
}
.pickup_table01 td {
	text-align: left;
	border: none;
}
.pickup_table01 img{
	max-width: 90%;
	margin: 0 5px 5px 5px;
}

/* 比較表 (導入部) */
.text {
	width: 100%;
	margin: 0 auto;
	padding: 0 5px 0 5px;
}
.hikaku_point {
	border-radius: 30px;
	margin: 0.5em 0em 0em;
}
.hikaku_point_box {
	padding: 0.5em 1em 0;
	background-color: #fefeeb;
	margin: 0.5em auto 0em;
}
.hikaku_point_li {
	position: relative;
	padding-left: 25px;
	text-align: left;
}
.hikaku_point_p {
	font-size: 15px;
	margin: auto auto 12px;
	line-height: 1.8;
}

/* 比較表 (本体) */
.th_hikaku {
	background-color: rgba(0, 255, 104, 0.08);
}
.th_hikaku_ranking {
	background-color: rgba(0, 255, 104, 0.08);
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 18px;
	padding: 2px 2px 2px 2px;
}
.frame_text {
	font-size: 14px;
	text-decoration: underline;
	margin: 10px auto 0;
}
.hikaku_p {
	margin-bottom: 0px;
	font-size: 10px;
}
.td_hikaku {
	border: 1px solid #cccccc;
}
.td_hikaku_ranking{
	border: 1px solid #cccccc;
	font-size: 16px;
}
h1.area_title03 {
	margin: 20px auto 20px auto;
	color: #000000;
	background: rgba(238, 238, 242, 0.64);
	width: 95%;
	box-shadow: 0px 0px 0px 5px #045623;
	padding: 10px 0px;
	font-size: 18px;
}
.arrow02 {
	width: 0px;
	margin: 12px auto 0;
	border-style: solid;
	border-width: 30px 150px 0 150px;
	border-color: #045623 transparent transparent transparent;
	animation: flash 1s infinite;
	animation-direction: alternate;
	animation-play-state: running;
}

/* 比較表（ヨコ・4位）- スクロールなし */
.hikaku_scroll, .hikaku_scroll02, .hikaku_scroll03, .hikaku_no_scroll {
	overflow: auto;
	max-width: 100%;
	height: 100%;
}
.hikaku_no_scroll table {
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}
.hikaku_no_scroll table th {
	font-size: 12px;
	background-color: #ebfff3;
}
.hikaku_no_scroll table td {
	padding: 2px;
	height: 55px;
	border: 1px solid #cccccc;
	font-size: 16px;
}
.hikaku_no_scroll table td img {
	margin: 5px 0 0 0;
}
.tab_height {
	height: 66px;
}
.tbl_hikaku_ranking_solid {
	border-left: 1px solid #ccc;
	border-right: none;
}
.fixed01, .fixed02 {
	position: sticky;
	left: 0;
}
.tbl_hikaku_company_solid {
	border-left: 1px solid #ccc ;
	width: 25%;
}

.tab_height02 {
	height: 45px;
}
.hikaku_text01 {
	font-size: 12px;
	text-decoration: underline;
	margin-bottom: 0;
}
.hikaku_text02{
	font-size: 13px;
	text-decoration: underline;
	margin: 0 3px;
}

/* 比較表（ヨコ・4位）※スクロール型 */
.scroll-instruction {
	text-align: center;
	font-size: 0.9em;
	color: #333;
	margin: 10px 0 0 0;
	background-color: #f4f4f4;
	padding: 0;
	border-radius: 5px;
}
.table-wrapper {
	max-width: 800px;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 8px;
}
.table-scroll-container {
	overflow-x: visible;
	position: relative;
	padding-bottom: 0px;
	margin-bottom: 0px;
}
.tbl_hikaku {
	width: 100%;
	min-width: 370px;
	border-collapse: collapse;
	table-layout: fixed;
}
.tbl_hikaku th,
.tbl_hikaku td {
	padding: 5px 0;
	text-align: center;
	border: 1px solid #e0e0e0;
	box-sizing: border-box;
	vertical-align: middle;
}
.tbl_hikaku th {
	background-color: #ebfff3;
	font-weight: bold;
	font-size: 12px;
}
.tbl_hikaku td {
	background-color: #fff;
}
.sticky-column {
	position: sticky;
	left: 0;
	background-color: #fefefe;
	z-index: 2;
	border-right: 2px solid #ccc;
}
.tbl_hikaku thead th.sticky-column {
	z-index: 3;
}
.tbl_hikaku th:first-child,
.tbl_hikaku td:first-child {
	width: 8%;
	padding: 2px 7px;
	line-height: 1.2;
}
.tbl_hikaku th:nth-child(2),
.tbl_hikaku td:nth-child(2) {
	width: 18%;
}
.tbl_hikaku th:nth-child(3),
.tbl_hikaku td:nth-child(3) {
	width: 18%;
}
.tbl_hikaku th:nth-child(4),
.tbl_hikaku td:nth-child(4) {
	width: 18%;
}
.tbl_hikaku th:nth-child(5),
.tbl_hikaku td:nth-child(5) {
	width: 18%;
}
.tbl_hikaku th:nth-child(6),
.tbl_hikaku td:nth-child(6) {
	width: 18%;
}

/* style.css の任意の場所（既存の .tbl_hikaku の後などが望ましい）に追記 */

.product-comparison-wrapper-final,
.product-comparison-wrapper-final *,
.product-comparison-wrapper-final *::before,
.product-comparison-wrapper-final *::after {
	box-sizing: border-box !important; /* 全ての要素にボーダーボックスモデルを適用 */
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5 !important; /* 基本的な行の高さ */
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important; /* フォントファミリーの再定義 */
	color: #333 !important; /* 基本的な文字色 */
	vertical-align: baseline !important; /* 画像などインライン要素の余分なスペース対策 */
}

/* テーブルのラッパーコンテナ */
.product-comparison-wrapper-final {
	max-width: 600px !important; /* PCでの希望の最大幅 (6列が収まるように調整) */
	width: 100% !important; /* 親に合わせて伸縮 */
	margin: 0px auto 0px auto !important; /* 中央寄せと上下の余白 */
	background-color: #fff !important;
	padding: 10px !important; /* 個別のパディングを設定 */
	border-radius: 8px !important;
	overflow: hidden !important; /* 確実にスクロールさせないため */
}

/* テーブル本体 */
.product-comparison-table-final {
	width: 100% !important; /* ★重要★ 幅を確実に100%に */
	border-collapse: collapse !important;
	table-layout: fixed !important; /* 列幅を固定 */
	border: 1px solid #ddd !important; /* 全体の枠線 */
	font-size: 0.85rem !important; /* 基本フォントサイズ */
}

/* ヘッダーthとデータtdの基本スタイル */
.product-comparison-table-final th,
.product-comparison-table-final td {
	padding: 8px 5px !important; /* ★重要★ パディングを確実に設定 */
	text-align: center !important; /* ★重要★ 中央寄せを確実に */
	border: 1px solid #e0e0e0 !important; /* ★重要★ ボーダーを確実に設定 */
	vertical-align: middle !important; /* 垂直方向の中央揃え */
	line-height: 1.3 !important; /* 行の高さ */
	font-size: inherit !important; /* 親からフォントサイズを継承 */
	color: inherit !important; /* 親から文字色を継承 */
}

/* ヘッダーthの共通スタイル */
.product-comparison-table-final th {
	background-color: #f1f1f1 !important;
	font-weight: bold !important;
}

/* 1列目: 「証券会社」のth（左上のセル） */
.product-comparison-table-final .product-comparison-header-label-final {
	width: 75px !important;
	min-width: 120px !important;
	background-color: ##f1f1f1 !important;
	font-size: 14px !important;
}

/* 行ヘッダーth（「国内株式取扱数」「外国株式取扱数」） */
.product-comparison-table-final .product-comparison-row-label-final {
	width: 120px !important;
	min-width: 120px !important;
	text-align: center !important;
	background-color: #f0f8ff !important;
}

/* 会社名のヘッダーth (SBI証券, 楽天証券など) */
.product-comparison-table-final .product-comparison-company-header-final {
	width: calc((100% - 120px) / 5) !important; /* 残りの幅を5等分 */
	min-width: 112px !important; /* (680-120)/5 = 112px */
}

/* データセル */
.product-comparison-table-final .product-comparison-data-cell-final {
	background-color: #fff !important;
	min-height: 70px !important; /* セルの最小高さを確保（コンテンツ量が少ない場合も） */
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important; /* 要素間の隙間 */
}

/* データセル内の数値 */
.product-comparison-table-final .product-comparison-count-final {
	font-size: 16px !important; /* 数値を強調 */
	font-weight: bold !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* データセル内の補足テキスト */
.product-comparison-table-final .product-comparison-detail-final {
	font-size: 0.75em !important; /* 小さな説明 */
	color: #666 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* データセル内の評価アイコン */
.product-comparison-table-final .product-comparison-icon-final {
	width: 30px !important; /* アイコンのサイズ */
	height: auto !important;
	display: block !important;
	margin: 2px auto 5px !important; /* 中央寄せと下マージン */
	padding: 0 !important;
}

/* SBI証券の強調スタイル */
.product-comparison-table-final .product-comparison-sbi-highlight-final {
	background-color: #fffacd !important; /* 明るい黄色 */
	color: #333 !important; /* 文字色を読みやすく */
	border-color: #ffcc00 !important; /* ボーダー色も強調 */
	font-weight: bold !important;
}
.product-comparison-table-final .product-comparison-sbi-highlight-final.product-comparison-company-header-final { /* SBIヘッダーの強調 */
	background-color: #ffeb3b !important; /* より濃い黄色 */
	color: #333 !important;
}
.product-comparison-table-final .product-comparison-sbi-highlight-final .product-comparison-count-final { /* SBIの数値強調 */
	color: #333 !important; /* オレンジ系で強調 */
}

/* 各種画像・アイコンのスタイル調整 */
.rank-icon {
	width: 50%;
	height: auto;
	display: block;
	margin: 5px auto;
}
.company-banner {
	width: 90%;
	height: auto;
	display: block;
	margin: 5px auto;
}
.mark-icon {
	width: 30%;
	height: auto;
	display: block;
	margin: 5px auto;
}
.hikaku_scroll02_top_solid { /* 元々 display: none; のCSSはそのまま残すか、削除を検討 */
	display: none;
}


/* ランキング */
.box01 {
	margin: 0 0 50px 0;
	background: #fff;
	border: 3px solid #ededed;
	/* border-radius: 10px 10px; */ /* コメントアウトされているのでそのまま */
}
.box_waku {
	margin: 0 10px 10px;
}
.box02 {
	text-align: center;
}
.flex_frame {
	display: flex;
	flex-direction: column; /* ★デフォルト（スマホ）は縦並びにする★ */
	width: 100%;
	align-items: center; /* 子要素を中央揃えにする */
}

/* .flex_frame 内の img のスタイル調整 */
.flex_frame img {
	/* HTMLのwidth="40%" style="margin: 5px;" をCSSで制御 */
	width: 60%; /* ★スマホでの画像の幅を調整（例: 80%）★ */
	height: auto;
	margin: 0 auto 10px auto;
}

/* .flex_frame 内の右側の div のスタイル調整 */
.flex_frame > div { /* 直接の子のdivにスタイルを適用 */
	width: 100%; /* スマホでは残りのコンテンツを幅いっぱいに広げる */
	text-align: center; /* div内の要素を中央寄せにする場合 */
}

.img_waku01 {
	display: block;
	margin: 10px auto 10px auto;
	width: 70%;
}
.img_waku02 {
	display: block;
	margin: 10px auto;
	width: 70%;
}
.img_waku03 {
	display: block;
	margin: 0 2px 2px 0;
	width: 15%;
	vertical-align: middle;
}
.box-banner-img {
	width: 60%;
	margin: 0 auto;
	display: block;
}
.box-campaign-img{
	max-width: 70%;
	margin: 0 auto;
	display: block;
}
.point_osusume {
	border-radius: 30px;
	margin: 0.5em 0em 0em;
}
.point_detail_hikaku {
	padding: 10px;
	background-color: #ebfff3;
	margin: 0.5em auto;
}
.li_check {
	position: relative;
	padding-left: 25px;
	text-align: left;
}
.li_check:before {
	content: "";
	position: absolute;
	top: .35em;
	left: 6px;
	-webkit-transform: rotate(50deg);
	-ms-transform: rotate(50deg);
	transform: rotate(50deg);
	width: 3px;
	height: 7px;
	border-right: 2px solid #189f00;
	border-bottom: 2px solid #189f00;
}
.li_check:after {
	content: "";
	position: absolute;
	top: .2em;
	left: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #189f00;
	border-radius: 2px;
}
.point01 {
	font-size: 15px;
	margin: auto auto 12px;
	line-height: 1.8;
}
.text_center_cta {
	display: block;
	text-align: center;
	margin: 10px 0 5px 0;
}
/* li { list-style-type:none; } は共通スタイルで記述済み */
.flex { /* flex_frame と機能が重複。どちらかに統一を検討 */
	display: flex;
}
.flex .image {
	width: 30px; /* ★画像の幅に合わせてfigureの幅を調整（例：20px） */
	height: 30px; /* ★画像の高さに合わせてfigureの高さを調整（例：20px） */
	flex-shrink: 0; /* ★figureが縮まないように固定 */
	margin: 0;
	padding: 0 5px 0 0; /* 右のパディングは維持 */
	overflow: hidden;
	position: relative;
	/* display: flex; /* figureをFlexboxコンテナにして、画像が中央に来るようにする場合 */
	/* justify-content: center; */
	/* align-items: center; */
}
.flex .image img {
	width: 100%; /* ★親のfigureに合わせて100%に */
	height: 100%; /* ★親のfigureに合わせて100%に */
	object-fit: contain; /* ★画像がアスペクト比を保ちつつ、枠内に収まるように */
	display: block; /* ブロック要素に */
	margin: 0; /* 親のfigureで余白を制御するため0に */
	flex-shrink: 0; /* ★画像自体も縮まないように念のため指定 */
}
.flex .image_ranking {
	width: 15%;
	margin: 0;
	padding: 0 ;
	overflow: hidden;
	position: relative;
}
.p_ranking{
	width: 80%;
	font-size: 14px;
}
.flex .text {
	margin: 0 0 0 20px;
	padding: 0;
}
.balloon2 {
	position: relative;
	display: inline-block;
	margin: 20px 0 20px 0;
	padding: 0;
	min-width: 120px;
	width: 100%;
	color: #555;
	font-size: 16px;
	background: #ffd8a1;
	box-sizing: border-box;
}
.balloon2:before {
	content: "";
	position: absolute;
	bottom: -24px;
	left: 50%;
	margin-left: -15px;
	border: 12px solid transparent;
	border-top: 12px solid #ffd8a1;
	z-index: 2;
}
.balloon2:after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: 50%;
	margin-left: -17px;
	border: 14px solid transparent;
	z-index: 1;
}
.balloon2 p {
	margin: 0;
	padding: 0;
}
.t_space {
	margin: 5px 3px 20px 3px;
	padding: 0px;
	/* border-bottom: 1px solid #d1d1d1; */ /* コメントアウトされているのでそのまま */
}
.campaig_waku {
	padding: 20px 10px;
	border: 1px solid #c1c1c1;
	background-color: #FEFEEB;
	font-size: 125%;
	font-weight: bold;
	color: #F33;
	line-height: 24px;
	text-align: center;
	margin: 10px;
	border-radius: 5px;
}
.product_p{
	line-height: 1.7em;
	margin: 5px 20px 5px;
}
.product_ul{
	margin: 0 auto 20px auto;
	/* background-color: #ffd17c; */
	padding: 10px 0;
	border-top: dotted;
	border-bottom: dotted;
}
.rank_title {
	text-align: center;
	margin: 15px 0px;
	padding: 6px;
	background-color: #388c73;
}
.rank_title01 {
	font-size: 20px;
	color: #ffffff;
}
.best01, .best02, .best03, .best04, .best05, .best06, .best07, .best08, .best09, .best10 {
	width: 100%;
	margin: 20px 0;
	padding: 0 0 10px;
}
.best01 {
	border-color: #eeda2e;
	border-style: solid;
	border-width: 1px;
	margin: 20px 0 30px;
}
.best02 {
	border-color: #ededed;
	border-style: solid;
	border-width: 1px;
	margin: 20px 0 30px;
}
.best03 {
	border-color: #ddacac;
	border-style: solid;
	border-width: 1px;
	margin: 20px 0 30px;
}
.best04, .best05, .best06, .best07, .best08, .best09, .best10 {
	border-color: #adadad;
	border-style: solid;
	border-width: 1px;
	margin: 20px 0 30px;
}
.best01 h3 img {
	border: none;
	margin: 0px 10px 10px 0;
	width: 10%;
}
.best02 h3 img {
	border: none;
	margin: 0px 10px 10px 0;
	width: 10%;
}
.best03 h3 img {
	border: none;
	margin: 0px 10px 10px 0;
	width: 10%;
}
.best04 h3 img {
	border: none;
	margin: 0px 10px 10px 0;
	width: 10%;
}
.best05 h3 img {
	border: none;
	margin: 0px 10px 10px 0;
	width: 10%;
}
.best06 h3 img {
	border: none;
	margin: 0px 10px 10px 0;
	width: 10%;
}
.best01 h3 a {
	text-decoration: underline;
}
.best02 h3 a {
	text-decoration: underline;
}
.best03 h3 a {
	text-decoration: underline;
}
.best04 h3 a {
	text-decoration: underline;
}
.best05 h3 a {
	text-decoration: underline;
}
.best06 h3 a {
	text-decoration: underline;
}
.rank01 {
	background: url(/img/parts/ptn01.jpg);
	font-size: 24px;
	height: 50px;
	padding: 3px 0 0 15px;
}
.rank02 {
	background: url(/img/parts/ptn02.jpg);
	font-size: 24px;
	height: 50px;
	padding: 3px 0 0 15px;
}
.rank03 {
	background: url(/img/parts/ptn03.jpg);
	font-size: 24px;
	height: 50px;
	padding: 3px 0 0 15px;
}
.rank04, .rank05, .rank06 {
	font-size: 24px;
	height: 50px;
	padding: 3px 0 0 15px;
}
/* rank-title-inner (画像とテキストを横並びにするFlexboxコンテナ) */
.rank-title-inner {
	display: flex; /* Flexboxを有効に */
	justify-content: center; /* 水平方向の中央寄せ */
	align-items: center; /* 垂直方向の中央寄せ */
	gap: 8px; /* 画像とテキストの間の隙間 (任意) */
	width: 100%; /* 親のh3の幅いっぱいに広げる */
	/*border-bottom: 1px dotted #ccc; /* 1pxの点線、色は灰色（#ccc） */
}

/* rank-title-icon (ランキング画像) */
.rank-title-icon {
	width: 30px; /* ★画像の固定幅を調整 */
	height: auto; /* ★高さは自動 */
	flex-shrink: 0; /* 縮まないようにする */
	margin: 0; /* 余白をリセット */
}

.heading-21 {
	position: relative;
	border-bottom: 5px solid #4f4f4f;
	color: #333333;
	margin-bottom: 15px;
}

.heading-21::before,
.heading-21::after {
	position: absolute;
	/* left: 30px; ★この行を削除またはコメントアウト */
	left: 50%; /* ★中央寄せの基準を50%に */
	transform: translateX(-50%); /* ★要素自身の幅の半分だけ左にずらして完全に中央寄せ */
	bottom: -15px;
	width: 30px;
	height: 15px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
}

.heading-21::before {
	background-color: #4f4f4f;
}

.heading-21::after {
	bottom: -8px; /* before より少し上に配置して枠を作る */
	background-color: #fff;
}

.t_space h3 {
	font-size: 30px;
	margin: 8px 0 5px;
	text-align: center;
}
h4 {
	margin: 20px 0 5px 10px;
	padding: 4px 0 0 30px;
	font-size: 16px;
	height: 30px;
}

.t_space p.point03 {
	margin: 5px 0 10px 5px;
	font-size: 16px;
	text-align: left;
}
.point_light {
	background: url(/img/icon/light-30.png) no-repeat;
}
.point_speech {
	background: url(/img/icon/speech_bubble-48.png) no-repeat 0 3px;
	background-size: 30px;
}
.footer_contents {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
.footer_contents .groupname {
	margin: 0 0 0 0;
	padding: 0;
	border-bottom: 1px dotted #333;
	font-size: 95%;
	font-weight: bold;
	color: #ffffff;
}
.footer_contents .mokuji_waku {
	float: left;
	text-align: left;
		padding: 0 0 0 10px;
		margin: 0;
}
.footer_contents li {
	margin: 5px 0 0 0;
	padding: 0 10px 0px 0;
	font-size: 12px;
	list-style: none;
}
.footer_contents .sitename {
	font-size: 110%;
	font-weight: bold;
	padding: 0 0 5px 0;
}
.footer_contents .groupname {
	margin: 0 0 0 0;
	padding: 0;
	border-bottom: 1px dotted #333;
	font-size: 95%;
	font-weight: bold;
	color: #000000;
}
/*------------------------------------------------------------------------------------------------------------------------------------------------
 * レスポンシブ対応 (Responsive Design)
 * - メディアクエリによるブレイクポイントごとの調整
 ------------------------------------------------------------------------------------------------------------------------------------------------*/

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	/* -------------------------------------
	 * 全体レイアウトの調整
	 -------------------------------------*/
	#contents {
		width: 800px; /* PCでのコンテンツの固定幅を設定 (例: 960px) */
		margin: 0 auto;
		overflow-x: hidden; /* PCでははみ出さないように */
	}

	/* ナビゲーションやフッターの幅もPC向けに調整が必要な場合 */
	#top_nav {
		width: 960px;
		max-width: none;
	}
	.footer_contents {
		width: 800px;
		margin: 0 auto;
	}

	/* -------------------------------------
	 * フォントサイズ調整
	 -------------------------------------*/
	body {
		font-size: 15px;
	}
	p {
		font-size: 15px;
	}
	h1 {
		font-size: 32px;
	}
	h2 {
		font-size: 20px;
	}
	h3 {
		font-size: 24px;
	}
	h4 {
		font-size: 18px;
		margin-left: 20px;
	}
	h5 {
		font-size: 18px;
	}
	h6 {
		font-size: 16px;
	}
	h1.area_title03 {
		font-size: 20px;
	}
	.mark02 {
		font-size: 14px;
	}
	.btn05_p{
		font-size: 18px;
	}
	/* ユーティリティクラスの調整 */
	.text_verysmall {
		font-size: 12px;
		margin: -5px 0 0 25px;
	}
	.text_verysmall_hikaku {
		font-size: 12px;
		margin: 5px 0 0 5px;
	}
	.text_small {
		font-size: 16px;
	}
	.point01 {
		font-size: 16px;
	}
	.p_ranking {
		font-size: 16px;
	}
	.spDescName .spListTitleMark div {
		font-size: 18px;
	}
	.md_mark {
		font-size: 16px;
	}
	.comment_type {
		font-size: 18px;
	}
	.box_voice_txt {
		font-size: 14px;
	}
	.hikaku_point_p {
		font-size: 16px;
	}
	.th_hikaku_ranking {
		font-size: 20px;
	}
	.td_hikaku_ranking {
		font-size: 18px;
	}
	.hikaku_text01 {
		font-size: 18px;
	}
	.hikaku_text02 {
		font-size: 14px;
	}
	.tbl_hikaku th, .tbl_hikaku td {
		font-size: 16px;
	}
	.tbl_hikaku th {
		font-size: 14px;
	}
	.campaig_waku {
		margin-left: 20px;
		margin-right: 20px;
	}
	/* フッターのフォントサイズ調整 */
	.footer_contents .sitename {
		font-size: 20px;
	}
	.footer_contents li {
		font-size: 12px;
	}
	.copylights {
		font-size: 100%;
	}
	address {
		font-size: 90%;
	}

	/* 既存の .text > img ルールからヘッドバナーに関する部分を削除・修正 */
	/*
	.text > img {
		max-width: 960px;
		margin: 0 auto;
	}
	*/
	/* -------------------------------------
	 * テーブルのスクロールなし表示
	 -------------------------------------*/
	.scroll-instruction {
		display: none;
	}
	.table-scroll-container {
		overflow-x: visible;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.tbl_hikaku {
		min-width: auto;
	}

	/* テーブルの列幅をPC向けに調整 */
	.tbl_hikaku th:first-child,
	.tbl_hikaku td:first-child {
		min-width: 180px;
	}
	.tbl_hikaku th:nth-child(2),
	.tbl_hikaku td:nth-child(2),
	.tbl_hikaku th:nth-child(3),
	.tbl_hikaku td:nth-child(3),
	.tbl_hikaku th:nth-child(4),
	.tbl_hikaku td:nth-child(4) {
		width: 100px;
		min-width: 100px;
	}
	.tbl_hikaku th:nth-child(5),
	.tbl_hikaku td:nth-child(5) {
		width: auto;
		min-width: 300px;
	}

	/* sticky-column のボーダーを再確認（スクロールがなくなっても見た目が適切か） */
	.sticky-column {
		border-right: 2px solid #ccc;
	}

	/* -------------------------------------
	 * 比較表のテキスト調整
	 -------------------------------------*/
	.hikaku_text01 {
		font-size: 13px;
	}
	.tbl_hikaku th:first-child,
	.tbl_hikaku td:first-child {
		width: 10%;
	}
	.tbl_hikaku th:nth-child(2),
	.tbl_hikaku td:nth-child(2) {
		width: 18%;
	}
	.tbl_hikaku th:nth-child(3),
	.tbl_hikaku td:nth-child(3) {
		width: 18%;
	}
	.tbl_hikaku th:nth-child(4),
	.tbl_hikaku td:nth-child(4) {
		width: 18%;
	}
	.tbl_hikaku th:nth-child(5),
	.tbl_hikaku td:nth-child(5) {
		width: 18%;
	}
	.tbl_hikaku th:nth-child(6),
	.tbl_hikaku td:nth-child(6) {
		width: 18%;
	}
	/* -------------------------------------
	 * 画像サイズ、配置の調整
	 -------------------------------------*/
	/* product-card 内の画像 */
	.product-image {
		width: 150px;
		flex-shrink: 0;
	}

	/* 比較表内の画像 */
	.rank-icon {
		width: 40px;
		height: auto;
	}
	.company-banner {
		width: auto;
		height: 31px;
	}
	.mark-icon {
		width: 25%;
		height: auto;
	}

	/* ランキングセクションのバナー画像 */
	.flex_frame {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 20px;
	}

	.flex_frame img {
		width: 300px;
		height: auto;
		flex-shrink: 0;
		margin: 0;
	}

	.flex_frame > div {
		flex-grow: 1;
		width: auto;
		max-width: 500px;
		flex-basis: 500px;
	}

	/* .balloon2 の位置調整（PCで左寄せ） */
	.balloon2 {
		margin: 20px 0 20px 0;
	}
	.img-frame{
		width: 50%;
		margin: 5px auto 30px auto;
	}
	.img_waku01 {
		display: block;
		margin: 10px auto 10px auto;
		width: 50%;
	}
	.img_waku02 {
		width: 50%;
	}
	.best01 h3 img {
		width: 5%;
	}
	.best02 h3 img {
		width: 5%;
	}
	.best03 h3 img {
		width: 5%;
	}
	.best04 h3 img {
		width: 5%;
	}
	.best05 h3 img {
		width: 5%;
	}
	/* -------------------------------------
	 * ヘッドバナーの横並び配置
	 -------------------------------------*/
	.head-banner-wrapper {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 0;
		max-width: 960px;
		margin: 0 auto 20px auto;
	}

	.head-banner-wrapper img {
		display: block;
		height: 290px;
		object-fit: cover;
	}

	.head-banner-wrapper img[src="/img/item/head_bannerB01.jpg"] {
		width: auto;
	}

	.head-banner-side-image {
		width: auto;
	}
	.navigation-catch-image {
		max-width: 400px;
		width: 100%;
		height: auto;
		display: block;
		margin: 10px auto;
	}
	.head-banner-wrapper a {
		display: block;
		max-width: 30%;
		height: 230px;
		width: auto;
	}
	/* -------------------------------------
	 * その他コンポーネントの調整
	 -------------------------------------*/
	/* product-card のレイアウト調整 */
	.product-card {
		padding: 10px;
	}

	/* タブコンテナの幅調整 */
	.tab-container {
		max-width: 960px;
		margin: 10px auto;
		display: block;
		border: none !important;
		padding: 0;
		overflow: visible;
		box-shadow: none !important;
	}

	/* タブのラジオボタンとラベルをPCで非表示にする */
	.tab-container input[type="radio"],
	.tab-container .tab-label {
		display: none;
	}

	/* タブコンテンツラッパーをFlexboxコンテナにし、横並びにする */
	.tab-content-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-start;
		overflow: visible;
		padding: 0;
		border: none !important;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none !important;
	}

	/* 各タブコンテンツを常に表示し、PC向けに調整 */
	.tab-content {
		display: block !important;
		flex-basis: calc(33% - 20px);
		max-width: 300px;
		width: 100%;
		padding: 0;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 15px;
		overflow: visible !important;
		height: 260px;
		border: 5px solid #388c73;
	}

	/* 各タブコンテンツ内の h2 のスタイルを調整 (背景色、ボーダーなど) */
	.text {
		counter-reset: section-counter;
	}

	/* 各タブコンテンツ内の h2 のスタイルを調整 (背景色、ボーダーなど) */
	.tab-content h2 {
		background-color: #388c73;
		color: #ffffff;
		border: none;
		text-align: center;
		border-radius: 8px 8px 0 0;
		counter-increment: section-counter;
		position: relative;
		padding-left: 50px;
		text-align: left;
	}

	/* 〇囲み数字の表示 (疑似要素) */
	.tab-content h2::before {
		content: counter(section-counter);
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1.2em;
		font-weight: bold;
		color: #388c73;
		background-color: #ffffff;
		border: 2px solid #ffffff;
		border-radius: 50%;
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}
	/* product-card のマージンを調整 (tab-content が padding を持つため) */
	.tab-content .product-card {
		margin: 0;
		max-width: 100%;
	}

	/* product-card レイアウトのPC向け調整 (画像の下に文章) */
	.product-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
		max-width: 100%;
		margin: 0 auto;
	}

	.product-image {
		width: 100%;
		max-width: 200px;
		height: 90px;
		object-fit: contain;
		margin: 0 auto;
	}

	.product-details {
		flex-grow: 0;
		padding-left: 0;
		text-align: left;
		width: 100%;
	}

	/* リストマーカーの最終調整 (PC向け) */
	.product-details ol {
		list-style-type: decimal !important;
		padding-left: 20px !important;
		margin-left: 0 !important;
	}
	.product-details ol li {
		list-style-type: decimal !important;
	}
	.product-details ol li ul {
		list-style-type: disc !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
	.product-details ol li ul li {
		list-style-type: disc !important;
	}

	/* product-details 内の ol li の調整 */
	.product-details ol li span.mark01 {
		display: inline;
	}
	/* product-details 内の `<b>` タグと `<br>` の調整 */
	.product-details br {
		display: none;
	}
	.product-details b {
		display: inline;
	}
	.comment_type {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: flex-start;
		gap: 20px;
		padding: 20px;
	}

	.box_voice {
		width: calc(33% - 20px);
		flex-basis: auto;
		max-width: 300px;
		
		/* ★★★ ここを追加・修正：PCで画像とテキストを縦並びにするFlexbox設定 ★★★ */
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		/* ★★★ ここまで追加・修正 ★★★ */
	}
	/* box_voice 内の画像とテキストのレイアウト調整（PC向け） */
	.box-voice-image-col {
		width: 100%;
		height: auto;
		text-align: center;
		margin: 0;
	}
	.box_voice_img img {
		height: 60px;
		margin: 0 auto;
	}
	.box_voice_profile {
		font-size: 13px;
		margin: 5px 0;
	}

	.box-voice-text-col {
		flex-grow: 1;
		padding-left: 0;
		text-align: left;
	}
	.box_voice_txt {
		font-size: 15px;
		margin: 0;
	}
	.btn03 {
		text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
		padding: 10px 15px;
		width: 50%;
		margin: 10px auto;
		font-size: 18px;
	}
	.product_p {
		margin: 5px 70px 20px;
		font-size: 18px;
	}
	.product_ul {
		margin: 0 auto 20px auto;
		font-size: 18px;
	}
	.product-comparison-table-final {
		font-size: 15px !important;
	}
	.balloon2:before {
		bottom: -20px;
	}
	.best01 .ranking-content-flex, /* best01, best02 など全ての best0x に対応させる */
	.best02 .ranking-content-flex,
	.best03 .ranking-content-flex,
	.best04 .ranking-content-flex,
	.best05 .ranking-content-flex {
		display: flex !important; /* !important で強制的に適用 */
		flex-direction: row !important; /* !important で強制的に適用 */
		justify-content: center !important;
		align-items: flex-start !important;
		gap: 30px !important;
		margin: 20px;
	}

	/* 画像とテキストブロックの幅も再定義 */
	.best01 .ranking-content-flex .img_waku01,
	.best02 .ranking-content-flex .img_waku01,
	.best03 .ranking-content-flex .img_waku01,
	.best04 .ranking-content-flex .img_waku01,
	.best05 .ranking-content-flex .img_waku01 {
		width: 40% !important;
		max-width: 300px !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}

	.best01 .ranking-content-flex .ranking-text-content,
	.best02 .ranking-content-flex .ranking-text-content,
	.best03 .ranking-content-flex .ranking-text-content,
	.best04 .ranking-content-flex .ranking-text-content,
	.best05 .ranking-content-flex .ranking-text-content {
		width: 60% !important;
		max-width: 500px !important;
	}

	/* product_p のPCでのマージンも再定義 */
	.best01 .ranking-text-content .product_p,
	.best02 .ranking-text-content .product_p,
	.best03 .ranking-text-content .product_p,
	.best04 .ranking-text-content .product_p,
	.best05 .ranking-text-content .product_p {
		margin: 0 0 10px 0 !important;
		font-size: 16px !important;
	}
	.product-comparison-wrapper-final{
		max-width: 760px !important;
	}
	.footer_contents .mokuji_waku {
		padding: 0 0 0 130px;
	}
}


/* デスクトップ向け (max-width: 979px) - タブレットとモバイルの間のサイズ */
@media screen and (max-width: 979px) {
	#top_nav {
		width: 700px;
	}
	#contents {
		width: 700px;
	}
	.tbl_hikaku_company_solid {
		width: 150px;
	}
}

/* タブレット向け (max-width: 767px) */
@media screen and (max-width: 767px) {
	#contents {
		width: 90%;
		max-width: 700px;
		overflow-x: hidden; /* ★追加: コンテンツからはみ出さないように */
	}
	#top_nav {
		width: 90%;
		max-width: 700px;
	}
	.footer_contents {
		width: 540px;
	}
	.footer_contents .sitename {
		font-size: 16px;
	}
	.footer_contents li {
		font-size: 12px;
	}

	/* テーブルのth/tdのフォントサイズ調整 */
	th {
		font-size: 14px;
	}
	td {
		font-size: 18px;
		margin: 0;
	}
	/* 比較表のth */
	.th_hikaku, .th_hikaku2 {
		font-size: 12px;
		padding: 2px;
	}
	/* right_table の th/td */
	.right_table th {
		font-size: 12px;
		padding: 0;
	}
	.right_table td {
		font-size: 12px;
		padding: 0 0 1px;
	}
	.tbl_hikaku_company_solid {
		width: 100px;
	}
}

/* スマホ向け (max-width: 479px) */
@media screen and (max-width: 479px) {
	#contents {
		width: 100%;
		overflow-x: hidden; /* ★追加: コンテンツからはみ出さないように */
	}
	#top_nav {
		width: 100%;
	}
	.footer_contents {
		width: 100%;
	}
	.footer_contents .sitename {
		font-size: 14px;
	}
	/* テーブルのthフォントサイズ調整 */
	th {
		font-size: 12px;
	}
	/* 比較表のth */
	.th_hikaku, .th_hikaku2 {
		font-size: 12px;
		padding: 2px;
	}
	/* right_table の th/td */
	.right_table th {
		font-size: 12px;
		padding: 0;
	}
	.right_table td {
		font-size: 12px;
		padding: 0 0 1px;
	}
	.tbl_hikaku_company_solid {
		width: 100px;
	}
	/* 検索フォームボタン */
	.form_btn {
		width: 28vw;
		height: 10vw;
	}
	.head-banner-side-image {
		display: none;
	}
}

/* スマホ向け (max-width: 400px) - 特定のtdフォントサイズ調整 */
@media screen and (max-width: 400px) {
	td {
		font-size: 12px;
		margin: 0;
	}
}

/* 画像装飾のメディアクエリ */
/* min-widthベースで記載し、小さいものから大きいものへ上書き */
.img_first {
	/* max-widthやheightのデフォルト設定があればここに記述 */
}
@media screen and (min-width: 376px) {
	.img_first{
		max-width: 160px !important;
		height: 110px !important;
	}
}
@media screen and (min-width: 415px) {
	.img_first{
		max-width: 190px !important;
		height: 130px !important;
	}
}
@media screen and (min-width: 480px) {
	.img_first{
		max-width: 300px !important;
		height: 180px !important;
	}
}