@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 に修正 */
}


/* --- 共通設定 --- */
.banner-img {
    display: block;
    height: auto;
    width: 100%;       /* 親要素の幅いっぱいに広げる */
    margin: 0 auto;    /* 中央寄せ */
}

/* --- スマートフォン向け（980px未満） --- */
@media screen and (max-width: 979px) {
    .banner-wrapper {
        padding: 0;    /* スマホで横に隙間が欲しい場合はここを調整 */
    }
}

/* --- PC向け（980px以上） --- */
@media screen and (min-width: 980px) {
    /* 画像を包むコンテナ自体の幅を広げる */
    .banner-wrapper {
        max-width: 1200px; /* ここを1000px〜1200pxなど大きく設定 */
        margin: 0 auto;
        padding: 0;        /* 左右のパディングを0にする */
    }

    .banner-img {
        /* コンテナの幅に合わせて最大サイズを指定 */
        max-width: 100%; 
    }
}

/* 見出し (H1-H5) */
h1 {
	font-size: 24px;
	font-weight: bold; /* font-weight: normal; は冗長なので削除 */
	text-align: center;
}
h2 {
    border-bottom: 2px dotted #303030;
    border-left: 4px solid #303030;
    margin: 20px 0 -10px;
    padding: 3px 10px;
    font-size: 18px;
    clear: both;
}
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: 14px;
	margin: -10px 0 0 0;
}
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;
}
ul li {
	font-size: 14px;
}
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: 12px;
}
.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: 0 0 0 10px;
}
.under_line span {
	background: linear-gradient(transparent 50%, #ffa500 50%);
	padding: 0 0.1em;
}
.moji_dot span {
	text-emphasis: circle #4d9bc1;
}

.gray_text {
    color: gray;
    margin: 0px 0px 15px 0px;
    padding: 10px;
    background: #f1f1f1;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
}

/* 太字・強調 */
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 は関連性があるので近くに配置 */
	background: linear-gradient(transparent 0%, #f6ff5fa6 50%);
}
.mark02 {
	font-size: 13px;
}

/* アニメーション */
.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;
}
@keyframes reflection{
	0%{ transform: scale(0) rotate(45deg); opacity: 0; }
	80%{ transform: scale(0) rotate(45deg); opacity: 0.5; }
	81%{ transform: scale(4) rotate(45deg); opacity: 1; }
	100%{ transform: scale(50) rotate(45deg); opacity: 0; }
}
.reflection-base {
    position: relative;
    overflow: hidden;
}
.img-frame {
	border: 1px solid rgba(0, 0, 0, 0.56);
	display: block;
	width: 90%;
	margin: 5px auto 30px auto;
}
/* @keyframes reflection は元のCSSにはないので、別途定義が必要です */
.sub_catch_hikaku {
	width: 100%;
	margin: 0 auto 5px auto;
	display: block;
}
.sub_catch_ranking {
	width: 100%;
	margin: 25px auto -25px auto;
	display: block;
}
/*------------------------------------------------------------------------------------------------------------------------------------------------
 * レイアウト (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;
}

/* メニューアイコン */
.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;
	margin: 15px 0 0 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, .nisa_btn01, .detail_btn01 { /* 共通プロパティをここに記述 */
	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;
}
.nisa_btn {

}
.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: 0 auto 20px;
	font-size: 16px;
	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 {
	padding: 2px 2px;
	margin: 2px 15px;
	font-size: 12px;
}
.btn05_p {
	color: #fff;
	margin: auto;
	font-size: 14px;
	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);
}
.nisa_btn01 {
	text-shadow: 0 2px 2px rgba(0, 0, 0, .3); /* 共通スタイルからの上書き */
	padding: 6px 10px;
	margin: 10px auto;
	font-size: 16px;
	width: 95%;
	background-color: #41890b;
}
.detail_btn {
	border-radius: 5px;
}

/* 共通要素 */
.detail_btn01 {
	text-shadow: 0 2px 2px rgba(0, 0, 0, .3); /* 共通スタイルからの上書き */
	padding: 4px 8px;
	margin: 5px auto;
	width: 77%;
	background-color: #ed2f2f;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 980px) {
	.detail_btn01 {
		font-size: 12px;
	}
}


/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.detail_btn01 {
		font-size: 16px;
	}
}


.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;
	width: 100%;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	border-radius: 10px;
}
.tab-container input[type="radio"] {
	display: none;
}
.tab-label {
	display: inline-block;
	padding: 5px 0;
	background-color: #eaeaea;
	color: #555;
	font-size: 14px;
	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;
	margin: 0 2px;
	border-radius: 10px 10px 0 0;
}
.tab-container input[type="radio"]:last-of-type + .tab-label {
	border-right: none;
}
.tab-container input[type="radio"]:checked + .tab-label {
	background-color: #005b22;
	color: #fff;
	border-bottom-color: #eaeaea;
	border-right-color: #eaeaea;
}
.tab-label:hover {
	background-color: #e0e0e0;
}
.tab-container > .tab-label { /* float を使う前提 */
	width: calc(96% / 3);
	float: left;
}
.tab-container::after {
	content: '';
	display: table;
	clear: both;
}

.tab-content-wrapper {
	border-top: none;
	background-color: #fff;
	height: auto;
}
.tab-content {
	display: none;
	padding: 0;
}
#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: #ffffff;
	line-height: 1.6;
}
.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;
}
h2.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 10px;
	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: 14px;
	text-decoration: underline;
	margin-bottom: 0;
}
.hikaku_text02{
	font-size: 13px;
	text-decoration: underline;
	margin: 0 3px;
}
.hikaku_text03 {
	font-size: 9px;
	text-decoration: underline;
	margin-bottom: 0;
}

/* 比較表（ヨコ・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%;
	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: 0%;
}
.tbl_hikaku th:nth-child(2),
.tbl_hikaku td:nth-child(2) {
	width: 25%;
}
.tbl_hikaku th:nth-child(3),
.tbl_hikaku td:nth-child(3) {
	width: 15%;
}
.tbl_hikaku th:nth-child(4),
.tbl_hikaku td:nth-child(4) {
	width: 15%;
}
.tbl_hikaku th:nth-child(5),
.tbl_hikaku td:nth-child(5) {
	width: 15%;
}
.tbl_hikaku th:nth-child(6),
.tbl_hikaku td:nth-child(6) {
	width: 22%;
}

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

/* テーブルのラッパーコンテナ */
.product-comparison-wrapper-final {
	max-width: 600px !important; /* PCでの希望の最大幅 (6列が収まるように調整) */
	width: 100% !important; /* 親に合わせて伸縮 */
	margin: -25px auto 0px auto !important; /* 中央寄せと上下の余白 */
	padding: 10px !important; /* 個別のパディングを設定 */
	border-radius: 8px !important;
	overflow: hidden !important; /* 確実にスクロールさせないため */
}
.button-container {
	display: flex;             /* ボタンをFlexアイテムとして扱う */
	justify-content: center; /* ボタンを右端に寄せる */
	margin-top: 15px;          /* テーブルとの間にスペース */
	width: 100%;               /* 親要素（product-comparison-wrapper-final）の幅いっぱいに広げる */
}
#toggle-info-button {
	padding: 5px 10px;       /* 内側の余白 */
	color: white;             /* 文字色 */
	border: none;             /* 枠線をなくす */
	border-radius: 5px;       /* 角を丸くする */
	cursor: pointer;          /* カーソルをポインターにする */
	font-size: 12px;          /* フォントサイズ */
	font-weight: bold;        /* 太字 */
	transition: none !important;  /* ホバー時のアニメーション */
	background-color: #444444f0;
}
/* テーブル本体 */
.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;
	width: 90px;
}

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

/* 行ヘッダーth（「国内株式取扱数」「外国株式取扱数」） */
.product-comparison-table-final .product-comparison-row-label-final {
	width: 50% !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-data-cell-final {
	/*display: flex;*/          /* 子要素（画像とテキスト）をFlexアイテムとして配置 */
	align-items: center;    /* 垂直方向の中央揃え */
	gap: 10px;              /* 画像とテキストの間隔を調整（例: 10px） */
	justify-content: flex-start;
	text-align: left; /* text-alignが中央寄せになっていないか確認し、左寄せに強制 */
	width: 100%; 
}

/* データセル内の数値 */
.product-comparison-table-final .product-comparison-count-final {
	font-size: 14px !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: 0 0 0 20px !important; /* 中央寄せと下マージン */
	padding: 0 !important;
}
.product-comparison-icon-final {
	max-width: 40px; /* アイコンの最大幅を調整。必要に応じて変更してください */
	height: auto;
}
/* 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; /* オレンジ系で強調 */
}
.hidden-row {
    display: none; /* 要素を完全に非表示にする */
}
.rank-td {
	display: flex;
	align-items: center;
	font-size: 12px;
}

.company-text {
	color: #000000 !important;
}

/* 各種画像・アイコンのスタイル調整 */
.rank-icon {
	width: 25%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.company-banner {
	width: 90%;
	height: auto;
	display: block;
	margin: 5px auto 0;
}
.mark-icon {
	width: 50%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.mark-icon-ranking {
	width: 24px;
	height: auto;
	display: block;
	margin: 0 15px 0 10px;
}
.point-icon {
	width: 100%;
	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_waku_matsui {
	display: block;
	margin: 10px auto 10px auto;
	width: 70%;
	border: solid 1px;
}
.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: 10px 6px;
	border: 1px solid #c1c1c1;
	background-color: #FEFEEB;
	font-size: 16px;
	font-weight: bold;
	color: #F33;
	line-height: 24px;
	text-align: center;
	margin: 5px 6px 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: -3px 10px 3px 0;
	width: 10%;
}
.best02 h3 img {
	border: none;
	margin: -3px 10px 3px 0;
	width: 10%;
}
.best03 h3 img {
	border: none;
	margin: -3px 10px 3px 0;
	width: 10%;
}
.best04 h3 img {
	border: none;
	margin: -3px 10px 3px 0;
	width: 10%;
}
.best05 h3 img {
	border: none;
	margin: -3px 10px 3px 0;
	width: 10%;
}
.best06 h3 img {
	border: none;
	margin: -3px 10px 3px 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: 18px;
	height: 40px;
	padding: 3px 0 0 15px;
}
.rank02 {
	background: url(/img/parts/ptn02.jpg);
	font-size: 18px;
	height: 40px;
	padding: 3px 0 0 15px;
}
.rank03 {
	background: url(/img/parts/ptn03.jpg);
	font-size: 18px;
	height: 40px;
	padding: 3px 0 0 15px;
}
.rank04, .rank05, .rank06 {
	font-size: 18px;
	height: 40px;
	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;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	h4 {
		height: 30px;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	h4 {
		height: 50px;
	}
}

.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/information.png) no-repeat 0 3px;
	background-size: 26px;
}
.point_review {
	background: url(/img/icon/review.png) no-repeat 0 3px;
	background-size: 26px;
}
.product_p {
	line-height: 28px;
	margin: 20px 10px;
	font-size: 16px;
}
.hidden-review {
    display: none; /* 要素を完全に非表示にする */
}

/* 口コミのアイテム間のスペース調整（任意） */
.review-item {
	margin-bottom: 20px; /* 各口コミの下に余白 */
	margin: 10px;
}

/* ボタンのスタイルは、前のセクションで設定したものがそのまま使えます */
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    width: 100%;
}

#toggle-reviews-button { /* ID名が変わったので注意 */
	padding: 5px 10px;       /* 内側の余白 */
	color: white;             /* 文字色 */
	border: none;             /* 枠線をなくす */
	border-radius: 5px;       /* 角を丸くする */
	cursor: pointer;          /* カーソルをポインターにする */
	font-size: 12px;          /* フォントサイズ */
	font-weight: bold;        /* 太字 */
	transition: none !important;  /* ホバー時のアニメーション */
	background-color: #444444f0;
}

.review-p {
    font-size: 14px; /* 少し小さめのフォントサイズに */
    text-align: left; /* もし右寄せにしたい場合 */
}
.review-icons {
	display: flex; /* アイコンを横並びにするため */
	align-items: center; 
}
.review-author {
	font-size: 14px;
	font-weight: bold;
}
.review-icons img {
	width: 10%;
	margin: 0 5px;
}
.toggle-button { /* IDセレクタからクラスセレクタに変更 */
	padding: 5px 10px;       /* 内側の余白 */
	color: white;             /* 文字色 */
	border: none;             /* 枠線をなくす */
	border-radius: 5px;       /* 角を丸くする */
	cursor: pointer;          /* カーソルをポインターにする */
	font-size: 12px;          /* フォントサイズ */
	font-weight: bold;        /* 太字 */
	transition: none !important;  /* ホバー時のアニメーション */
	background-color: #444444f0;
}
.hidden-content {
    display: none; /* 要素を完全に非表示にする */
}
.col1 h2, .col2 h2, .kobetsu001 h2, .kuchikomi_box h2 {
    font-size: 20px;
    padding: 6px;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    border: none;
}
.green {
    background: #005b22;
}
.feature {
    display: table;
    margin: 0;
    width: 100%;
}
.feature ul {
    padding: 5px 0;
    background: rgb(255, 255, 255);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 51%, rgb(246, 246, 246) 51%, rgb(237, 237, 237) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(255, 255, 255)), color-stop(50%, rgb(255, 255, 255)), color-stop(50%, rgb(246, 246, 246)), color-stop(100%, rgb(237, 237, 237)));
    background: -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(246, 246, 246) 50%, rgb(237, 237, 237) 100%);
    background: -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(246, 246, 246) 50%, rgb(237, 237, 237) 100%);
    background: -ms-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(246, 246, 246) 50%, rgb(237, 237, 237) 100%);
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(246, 246, 246) 50%, rgb(237, 237, 237) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    border-bottom: 1px solid #fff;
}
.feature li {
    position: relative;
    display: table-cell;
    vertical-align: top;
}
.feature li:last-child {
    width: 82%;
}
.feature a {
    color: #333;
}
.feature h3 {
    margin: 0 0 3px 0;
    padding: 0 10px;
    font-size: 16px;
}
.feature p {
    padding: 0 15px 0 10px;
    font-size: 12px;
}
.ranking-text-content {
    margin: 10px auto 16px;
    background: #ebfff3b5;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    width: 95%;
}
.point_koukan01 {
    height: 20px;
    margin: 2px 15px 2px 10px;
}
/*------------------------------------------------------------------------------------------------------------------------------------------------
 * レスポンシブ対応 (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 {
		max-width: none;
	}
	.footer_contents {
		width: 800px;
		margin: 20 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;
	}
	h2.area_title03 {
		font-size: 20px;
	}
	.mark02 {
		font-size: 22px;
	}
	.btn05_p{
		font-size: 18px;
	}
	/* ユーティリティクラスの調整 */
	.text_verysmall {
		font-size: 15px;
		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;
	}
	.hikaku_text03 {
		font-size: 16px;
	}
	.tbl_hikaku th, .tbl_hikaku td {
		font-size: 22px;
	}
	.tbl_hikaku th {
		font-size: 20px;
	}
	.campaig_waku {
		margin-left: 20px;
		margin-right: 20px;
	}
	/* フッターのフォントサイズ調整 */
	.footer_contents .sitename {
		font-size: 20px;
	}
	.footer_contents li {
		font-size: 14px;
	}
	.copylights {
		font-size: 100%;
	}
	address {
		font-size: 90%;
	}
	.tab-label {
		font-size: 20px;
	}
	ul li {
		font-size: 16px;
	}
	/* 既存の .text > img ルールからヘッドバナーに関する部分を削除・修正 */
	/*
	.text > img {
		max-width: 960px;
		margin: 0 auto;
	}
	*/
	/* -------------------------------------
	 * 画像サイズ、配置の調整
	 -------------------------------------*/
	/* product-card 内の画像 */
	.product-image {
		width: 150px;
		flex-shrink: 0;
	}

	/* 比較表内の画像 */
	.rank-icon {
		width: 40px;
		height: auto;
	}
	.company-banner {
		width: 160px;
		height: auto;
	}
	.mark-icon {
		width: 30%;
		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;
	}
	.sub_catch_hikaku {
		width: 70%;
		margin: 0 auto 5px auto;
		display: block;
	}	/* -------------------------------------
	 * その他コンポーネントの調整
	 -------------------------------------*/
	/* product-card のレイアウト調整 */
	.product-card {
		padding: 10px;
	}

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

	/* 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 20px;
		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;
	}
}


/* デスクトップ向け (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;
	}
	.thtd_sp_hidden {
		display: none;
	}
	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;
	}
	.footer_contents li {
		font-size: 10px;
	}
	/* テーブルの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: 450px) {
	td {
		font-size: 14px;
		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;
	}
}

/*ランキングボックス*/
.rankingbox {
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 0px;
    margin-bottom: 50px;
}

.rankingbox_oukan {
    margin: 0;
}

.rankingbox_company {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #f0f9f0; /* 薄い緑色の背景 */
    border: 1px solid #28a745; /* 濃い緑色の枠線 */
    border-radius: 8px;        /* 角を丸くする */
    padding: 10px 15px;        /* 内側に適度な余白を作る */
    margin-bottom: 10px;       /* 下の要素との間隔 */
}

.rankingbox_company h3 {
    margin: 0;
}

#contents #rankingbox_shouken_name {
    font-size: 25px !important;
    margin-top: 10px !important;
    display: inline-block !important;
    line-height: 1.2 !important;
}

/* 1. 枠線のあるコンテナ */
#contents .rankingbox_recommend {
    position: relative;
    border: 1px solid #28a745;
    /* 上下左右にしっかりと余白（padding）をあける */
    padding: 25px 20px 20px 20px !important; 
    margin: 0px 10px 30px 10px; /* 左右の外側にも少し隙間を作る */
    border-radius: 8px;
}

/* 2. タイトルを中央に配置 */
#contents .rankingbox_recommend h4 {
    position: absolute;
    top: -12px;
    /* 中央寄せの黄金比セット */
    left: 50%;
    transform: translateX(-50%); 
    
    background-color: #fff;
    padding: 0 15px; /* 左右の背景白部分を広げて線をしっかり隠す */
    color: #28a745;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap; /* 改行を防ぐ */
    margin: 0;
}

/* 3. 中身のテキスト */
#contents .rankingbox_recommend p {
    margin: 0;
    line-height: 1.6;
    text-align: center; /* テキスト自体は左寄せが見やすいです */
}

/* 親要素：左右のパディングを少し削って、コンテンツ幅を広げる */
.rankingbox_status {
    display: flex;
    align-items: center;
    gap: 15px;           /* 隙間を少し詰めて画像幅を稼ぐ */
    padding: 15px 10px 30px 20px;  /* 左右の余白を10pxに調整 */
}

/* 画像：固定幅をやめて、柔軟に大きくする */
.rankingbox_status img {
    flex: 0 0 45%;       /* 全体の45%を画像が使う（以前より大きくなります） */
    max-width: 180px;    /* ただし、PCなどで大きくなりすぎない上限 */
    height: auto;
    margin: 0;
}

/* リスト：画像に合わせてサイズと間隔を微調整 */
.rankingbox_status ul {
    flex: 1;             /* 残りの55%をテキストが使う */
    margin: 0;
    padding: 0;
}

.rankingbox_status ul li {
    font-size: 17px;     /* 画像を大きくした分、文字をわずかに調整 */
    font-weight: bold;
    line-height: 1.8;
    color: #444;
    white-space: nowrap;
}

/* おすすめポイント全体の枠（「こんな方におススメ」と共通） */
.rankingbox_recommend {
    position: relative;
    border: 1px solid #28a745;
    border-radius: 8px;
    padding: 35px 20px 20px !important;
    margin: 40px 10px 20px;
    background-color: #fff;
}

/* タイトルを中央に固定 */
.rankingbox_recommend h4 {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 0 15px;
    color: #28a745;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

/* 各項目の塊：中身を左詰めに強制 */
.point_item {
    margin-bottom: 25px;
    text-align: left !important;
}

/* ☑とタイトルの行 */
.point_headline {
    font-weight: bold;
    font-size: 17px;
    display: flex;
    align-items: center; /* ☑と文字の上下中央を揃える */
    color: #333;
    margin-bottom: 8px;
}

/* ☑マークの調整 */
.point_title {
    color: #28a745;
    font-size: 20px;
    margin-right: 10px; /* ★ここで☑とタイトルの距離を調整 */
    flex-shrink: 0;     /* アイコンが潰れないように固定 */
}

/* 説明文：★開始地点を揃える最重要設定 */
.point_text {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
    color: #444;
    text-align: left !important;
    
    /* ☑の横幅（約20px）＋ 余白（10px）分、左側をあける */
    padding-left: 30px; 
}


/* 評価ポイントセクション全体の枠 */
.rankingbox_recommend.review_section {
    position: relative;
    border: 1px solid #28a745;
    border-radius: 8px;
    background-color: #fff;
    /* 文字が切れないよう、上下のパディングを適切に取る */
    padding: 35px 0 10px 0 !important; 
    margin: 40px 10px 20px;
    overflow: visible; /* ★文字が切れるのを防ぐためにvisibleに変更 */
}

/* スクロール部分 */
.scroll-wrapper {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 12px;
    padding: 15px 20px 25px; /* 下側に少し余裕を持たせてスクロールしやすく */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

/* カードのデザイン（緑色に変更） */
.review-card {
    flex: 0 0 85%;
    min-width: 85%;
    background-color: #f0f9f0; /* 薄い緑の背景 */
    border: 1px solid #d4edda;  /* 緑系の枠線 */
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    /* ★文字切れを防ぐための最重要設定 */
    white-space: normal !important; 
    height: auto !important; 
    display: block !important;
    scroll-snap-align: center;
}

/* カード内のテキスト */
.review-card p {
    font-size: 14.5px;
    line-height: 1.7;
    margin: 0;
    color: #333;
    text-align: left;
    /* 改行を許可し、溢れたら自動で高さを出す */
    word-wrap: break-word;
    overflow: visible;
}


/* キャンペーン情報独自の調整 */
.campaign_section {
    padding: 35px 20px 25px !important;
    background-color: #ffffff; /* ほんの少しだけ暖色にしてお得感を出す */
    border: 2px solid #28a745; /* ここだけ少し太枠にしても目立ちます */
}

.campaign_content p {
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
    color: #333;
    font-weight: bold;
    text-align: center;
}

/* 3,000ポイントの部分を赤文字で強調 */
.highlight_red {
    color: #e60012;
    font-size: 20px;
    text-decoration: underline;
}
レイアウト：外枠なしで上下に余白を確保 */
.button_section_simple {
    text-align: center;
    margin: 35px 10px 45px;
    padding: 0;
}

/* 「＼WEBで簡単...／」：黒色・洗練されたスタイル */
.button_caption {
    color: #333 !important;      /* 黒色 */
    font-size: 16px !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
    margin-bottom: 0px;
    display: block;
}

/* 巨大な赤いボタン */
.main_button_red {
    /* 鮮やかな赤色のグラデーション */
    background: linear-gradient(to bottom, #ff4b4b, #e60012) !important;
    color: #fff !important;
    padding: 18px 0;
    border-radius: 50px; 
    font-size: 21px; 
    font-weight: bold;
    /* ボタンの厚み（立体感） */
    box-shadow: 0 4px 0 #b3000e !important; 
    transition: 0.2s;
    text-decoration: none !important;
    display: block;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
}

/* ボタンを押した時の沈む動き */
.main_button_red:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #b3000e !important;
}

/* ホバー時の設定 */
.main_button_red:hover {
    color: #fff !important;
    text-decoration: none !important;
    opacity: 0.95;
}


/* 枠外の見出し：上下にしっかりスペースを空ける */
.last_push_title {
    text-align: center;
    color: #28a745;
    font-size: 20px;
    font-weight: bold;
    margin: 50px 0 20px; /* 上のコンテンツと50px離す */
}

/* 枠のデザイン：上の要素としっかり離す */
.last_push_frame {
    position: relative;
    border: 1px solid #28a745 !important;
    border-radius: 12px;
    padding: 45px 20px 25px !important;
    margin: 60px 10px 30px !important;
    background-color: #fff;
}

/* 枠上のタイトル：中央配置 */
.last_push_frame h4 {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    padding: 0 15px;
    color: #28a745;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    margin: 0;
}

/* バナー画像 */
.last_push_banner_center {
    text-align: center;
    margin-bottom: 25px;
}
.last_push_banner_center img {
    width: 95%;
    max-width: 450px;
    height: auto;
}

.last_push_main_title {
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
}

/* ★読みやすさの肝：左寄せと十分な行間 */
.last_push_text_content {
    text-align: left; /* 左揃え */
    margin-top: 10px;
}
.last_push_text_content p {
    font-size: 15px; /* スマホで読みやすい少し大きめの文字 */
    line-height: 1.9; /* 行間を広げて「壁」を解消 */
    color: #444;
    margin-bottom: 25px; /* 段落ごとの隙間をしっかり確保 */
}

/* 強調ボックス：視覚的な休憩ポイント */
.last_push_highlight_box {
    text-align: center;
    background-color: #f2faf3; /* 極めて薄い緑 */
    padding: 18px;
    border-radius: 8px;
    margin: 30px 0;
}
.red_accent {
    color: #e60012;
    font-size: 20px;
    display: block;
    margin-bottom: 5px;
}

.last_push_final_message {
    font-weight: bold;
    color: #222 !important;
    font-size: 15.5px;
    margin-top: 35px;
}

/* ボタンエリア：枠内の導線 */
.last_push_cta_area {
    text-align: center;
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px dashed #ddd;
}

.cta_label {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: bold;
    margin-bottom: 6px !important;
    display: block;
}

.main_button_red_clean {
    background: linear-gradient(to bottom, #ff4b4b, #e60012) !important;
    color: #fff !important;
    padding: 18px 0;
    border-radius: 50px;
    font-size: 21px;
    font-weight: bold;
    box-shadow: 0 4px 0 #b3000e !important;
    text-decoration: none !important;
    display: block;
    width: 100%;
    margin: 0 auto;
}

/* ID「table-scroll-container」内の比較表だけ割合を変更 */
#table-scroll-container .tbl_hikaku th:nth-child(2),
#table-scroll-container .tbl_hikaku td:nth-child(2) {
    width: 23%; /* お好みの割合に調整（例：25%→30%） */
}
#table-scroll-container .tbl_hikaku th:nth-child(3),
#table-scroll-container .tbl_hikaku td:nth-child(3) {
    width: 17%;
}
#table-scroll-container .tbl_hikaku th:nth-child(4),
#table-scroll-container .tbl_hikaku td:nth-child(4) {
    width: 24%;
}
#table-scroll-container .tbl_hikaku th:nth-child(5),
#table-scroll-container .tbl_hikaku td:nth-child(5) {
    width: 16%;
}
#table-scroll-container .tbl_hikaku th:nth-child(6),
#table-scroll-container .tbl_hikaku td:nth-child(6) {
    width: 27%;
}

/* ステータスボックス：背景を薄い緑に変更 */
.style_outline {
    background-color: #f2faf3; /* 他のパーツ（image_467dfe.png等）で使われている薄い緑 */
    border: 1px solid #e0ede2; /* 背景より少しだけ濃い境界線を入れてボヤけを防ぐ */
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 10px;
}

.style_outline ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.style_outline li {
    font-size: 14px;
    line-height: 2.2;
    color: #333 !important; /* 文字色を黒系に戻す */
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e0ede2; /* 区切り線も薄い緑系に */
}

.style_outline li:last-child {
    border-bottom: none;
}

/* 星（★）の色調整 */
.style_outline li span:last-child {
    color: #28a745; /* 星だけはロゴカラーの濃い緑にしてアクセントに */
    letter-spacing: 2px;
}


/* 特定のID内にある、特定のtdタグを太字にしてサイズを調整 */
#table-scroll-container td.fixed01.tbl_hikaku_company_solid {
    font-size: 11px !important;    /* サイズ調整 */
    font-weight: bold !important;  /* ★太字に設定 */
}


/* カード全体：サイトに合わせた薄緑背景 */
.review-card {
    background-color: #f2faf3; /* image_a5f026.png等のパーツと合わせた薄緑 */
    border: 1px solid #e0ede2; /* 背景より少しだけ濃い境界線 */
    border-radius: 12px;
    padding: 24px 20px;
    margin-bottom: 10px;
    box-sizing: border-box;
    min-width: 280px;
}

/* ヘッダー：情報の整理 */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 境界線を少し入れることでヘッダーと本文を視覚的に分ける */
    border-bottom: 1px solid rgba(40, 167, 69, 0.1); 
    padding-bottom: 12px;
    margin-bottom: 22px; /* 本文の上の空白を十分に確保 */
}

.user-main {
    display: flex;
    align-items: center;
}

.user-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #fff; /* アイコン背景を白にして清潔感を出す */
}

.user-name {
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

.post-date {
    font-size: 12px;
    color: #888;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 口コミ本文：太字設定 */
.review-body .review-text {
    font-size: 15px;
    line-height: 1.8;
    color: #222;
    font-weight: bold; /* 太字 */
    margin: 0;
    text-align: left;
}

/* 横スクロールの設定 */
.scroll-wrapper {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 5px 20px;
    -webkit-overflow-scrolling: touch;
}
/* スクロールバーのカスタマイズ（任意） */
.scroll-wrapper::-webkit-scrollbar {
    height: 4px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
    background: #e0ede2;
    border-radius: 10px;
}

/* ここからAIで作成したCSS実験 */
/* ここからAIで作成したCSS実験 */
/* ここからAIで作成したCSS実験 */

@charset "utf-8";

/* ==========================================================
   修正版：画像デザイン完全再現スタイル (Matsui Securities UI)
   全体のバランス調整 ＆ クチコミ横スクロール対応
   ========================================================== */

/* 1. 基本レイアウト */
body {
    background-color: #f5f7f5 !important;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
}

div#contents .rankingbox {
    margin: 30px auto !important;
    background: #ffffff !important;
    border: 1px solid #00813d !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: hidden !important; /* はみ出しをカット */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

/* 2. ヘッダー */
.rankingbox .rankingbox_company {
    background-color: #f0f8f3 !important;
    background-image: radial-gradient(#00813d 0.5px, transparent 0.5px) !important;
    background-size: 8px 8px !important;
    border-bottom: 3px double #00813d !important;
    padding: 15px !important; /* 少しコンパクトに */
    text-align: center !important;
}

#rankingbox_shouken_name {
    font-size: 22px !important; /* バランスを見て調整 */
    color: #00813d !important;
    font-weight: 900 !important;
    margin: 0 !important;
    letter-spacing: 0.05em !important;
}

/* 3. ステータス（画像と星） */
.rankingbox .rankingbox_status {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 15px !important;
}

.rankingbox .rankingbox_status img {
    width: 40% !important; /* 画像が大きすぎたのを修正 */
    max-width: 160px !important;
    border: 1px solid #eee !important;
    border-radius: 4px !important;
}

.style_outline {
    flex: 1 !important;
    background: #ffffff !important;
}

.style_outline ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.style_outline li {
    font-size: 13px !important;
    font-weight: bold !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    border-bottom: 1px solid #eee !important;
}

.style_outline li span:last-child {
    color: #f39c12 !important;
    letter-spacing: 1px !important;
}

/* 4. セクションラベル */
.rankingbox .rankingbox_recommend {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media screen and (max-width: 980px) {
.rankingbox .rankingbox_recommend h4 {
    font-size: 15px !important;
}
}

@media screen and (min-width: 980px) {
.rankingbox .rankingbox_recommend h4 {
    font-size: 25px !important;
}
}

.rankingbox .rankingbox_recommend h4 {
    background: #666 !important;
    color: #ffffff !important;
    padding: 8px 15px !important;
    font-weight: bold !important;
    margin: 0 !important;
    text-align: left !important;
}


/* おすすめ・キャンペーンのラベル色 */
.rankingbox_recommend:nth-of-type(3) h4 { background: #00813d !important; }
.rankingbox .campaign_section h4 { background: #dd7930 !important; }

/* 5. おすすめポイントカード */
.point_content {
    padding: 10px 0 !important;
}

.point_item {
    background: #f9fbf9 !important;
    border: 1px solid #e0ede2 !important;
    border-radius: 6px !important;
    padding: 12px !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.point_item {
	    margin: 10px 15px !important; /* 余白の適正化 */
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.point_item {
	    margin: 15px 15px !important; /* 余白の適正化 */
	}
}

.point_headline {
    color: #00813d !important;
    font-weight: 900 !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.point_headline {
		font-size: 18px !important;
		margin-bottom: 5px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.point_headline {
		font-size: 25px !important;
		margin-bottom: 10px !important;
	}
}

.point_text {
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.point_text {
	    font-size: 15px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.point_text {
	    font-size: 20px !important;
	}
}

.mark01 {
    background: #ffff33 !important;
    color: #000 !important;
    font-weight: bold;
}

/* 6. 利用者の声（横スクロール対応） */
.review_section .scroll-wrapper {
    display: flex !important;
    overflow-x: auto !important; /* 横スクロール有効 */
    white-space: nowrap !important;
    padding: 15px !important;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch; /* iOSスムーズスクロール */
}

/* スクロールバー非表示（任意） */
.review_section .scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.review-card {
    display: inline-block !important;
    flex: 0 0 280px !important; /* 各カードの幅を固定 */
    background: #ffffff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 15px !important;
    white-space: normal !important; /* テキストは折り返す */
    box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.review-card {
	    margin: 0px;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.review-card {
	    margin: 5px;
	}
}

.review-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.user-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
}

.review-text {
    color: #444 !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.review-text {
		line-height: 1.6 !important;
	    font-size: 14px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.review-text {
	    line-height: 1.8 !important;
	    font-size: 16px !important;
	}
}

/* 7. キャンペーンエリア */
.campaign_content {
    margin: 15px !important;
    padding: 15px !important;
    border: 1px dashed #e67e22 !important;
    border-radius: 8px !important;
/*    text-align: center !important;*/
    background: #fff9e6 !important;
}

.campaign_content ul {
    list-style: none;
}

.campaign_content li {
    background: url(/img/icon/check_green.png) left 0px top 3px no-repeat;
    line-height: 24px;
    background-size: 16px;
    padding-left: 20px;
}

.campaign_content p {
    margin: 0 0 0px 0 !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.campaign_content p {
		font-size: 13px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.campaign_content p {
		font-size: 25px !important;
	}
}

.highlight_red {
    color: #c0392b !important;
    font-weight: 900 !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.highlight_red {
		font-size: 20px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.highlight_red {
		font-size: 38px !important;
	}
}

/* 8. CTAボタン */
.button_section_simple {
    text-align: center !important;
    padding-bottom: 30px !important;
}

.button_caption {
    background: #e74c3c !important;
    color: #fff !important;
    padding: 4px 15px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    margin-bottom: -12px !important;
    position: relative !important;
    z-index: 2 !important;
    display: inline-block !important;
}

.main_button_red {
    display: block !important;
    width: 85% !important;
    margin: 0 auto !important;
    padding: 15px 0 !important;
    background: linear-gradient(to bottom, #58d68d, #27ae60) !important;
    color: #ffffff !important;
    border-radius: 50px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 5px 0 #196f3d !important;
    transition: 0.1s !important;
}

.main_button_red:active {
    box-shadow: 0 2px 0 #196f3d !important;
    transform: translateY(3px) !important;
}

/*-----------------------*/
/* 共通 - 全体コンテナ */
.rankingbox_vertical_content {
    background: #fff;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.rankingbox_vertical_content {
	    padding: 15px;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.rankingbox_vertical_content {
	    padding: 30px;
	}
}

/* バナー画像 */
.rankingbox_banner_top {
    margin-bottom: 20px;
    text-align: center;
}

.rankingbox_banner_top img {
    width: 100%;
    height: auto;
    border-radius: 4px;
/*    border: 1px solid #00813d;*/
}

/* 親要素（コンテナ）のスタイル */
.rankingbox_card-gallery {
  display: flex;             /* 横並びにする指定 */
  justify-content: center;   /* 中央揃え（左寄せなら flex-start） */
  gap: 20px;                 /* 画像と画像の間の隙間 */
  padding: 0 20px 20px;             /* 周りの余白 */
  max-width: 1000px;         /* 横幅が広がりすぎないように制限 */
  margin: 0 auto;            /* コンテナ自体を画面中央に配置 */
}

/* 画像自体のスタイル */
.rankingbox_card-gallery img {
  width: 30%;                /* 3つ並ぶように幅を調整（隙間を考慮して33%以下に） */
  height: auto;              /* 縦横比を維持 */
  max-width: 150px;          /* 画像が大きくなりすぎないように上限を設定 */
  object-fit: contain;       /* 画像が見切れないように調整 */
}


/* 共通 - 横並び評価表の構造 */
.rankingbox_status_table_v2 {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.rankingbox_status_table_v2 {
		font-size: 12px;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.rankingbox_status_table_v2 {
		font-size: 20px;
	}
}

/* 共通のカラム設定（4等分） */
.status_grid_header, 
.status_grid_body {
    display: flex;
    width: 100%;
}

.grid_col {
    flex: 1;
    text-align: center;
    padding: 8px 2px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.grid_col:last-child {
    border-right: none;
}

/* ヘッダー行（薄いベージュ） */
.status_grid_header {
    background-color: #f9f5eb; /* 画像に近いベージュ */
    font-weight: bold;
    color: #444;
    border-bottom: 1px solid #ddd;
}

/* ボディ行（データ部分） */
.status_grid_body {
    background-color: #fff;
    min-height: 60px;
}

/* 記号アイコンの装飾 */
.status_icon {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 4px;
}

/* 配色の再現 */
.icon_red { color: #d63384; }    /* 画像のピンクレッド ◎ */
.icon_orange { color: #f39c12; } /* オレンジ ○ */

.status_text {
    font-size: 10px;
    font-weight: bold;
    color: #333;
}




/* ヘッダー外枠：全体にじませる薄い緑の背景 */
.rankingbox_header_custom {
    /* グラデーションの起点を左側の要素（王冠付近）に設定 */
    background: 
        radial-gradient(circle at 15% 50%, rgba(240, 248, 243, 0.4) 0%, rgba(224, 240, 228, 1) 100%), 
        radial-gradient(#00813d 0.6px, transparent 0.6px);
    background-size: 100% 100%, 8px 8px;
    
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    padding: 10px 15px !important; /* 上下パディングを絞って高さを抑える */
    border-bottom: 3px double #00813d !important;
    margin: 0 !important;
}

/* レイアウト設定：横一列＆垂直中央揃え */
.rankingbox_title_flex {
    display: flex !important;
    flex-direction: row !important; /* 横並びを強制 */
    align-items: center !important; /* ★ここが最重要：垂直方向の中央で揃える */
    justify-content: flex-start !important;
    gap: 8px !important; /* 王冠と文字の間隔を微調整 */
    height: 45px !important; /* ヘッダーの高さを固定して安定させる */
}

/* 共通 - 王冠のサイズ調整：文字の高さに合わせる */
.rankingbox_oukan_custom {
    width: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.rankingbox_oukan_custom {
    height: 32px !important; /* ★文字の大きさに合わせて高さを指定 */
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.rankingbox_oukan_custom {
    height: 50px !important; /* ★文字の大きさに合わせて高さを指定 */
	}
}


/* 社名リンクの装飾解除 */
.rankingbox_link_custom {
    text-decoration: none !important;
    display: flex !important; /* リンク自体もフレックスに */
    align-items: center !important;
}

/* 共通 - 社名テキスト：にじみ背景に映える濃い緑 */
.rankingbox_shouken_name_custom {
    font-size: 22px !important; /* 王冠とのバランスが良いサイズ */
    font-weight: 900 !important;
    color: #000000 !important;
    margin: 0 !important;
    line-height: 1 !important; /* 行高を1にして上下の余計な隙間を消す */
    display: inline-block !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    background: none !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.rankingbox_shouken_name_custom {
		font-size: 22px !important; /* 王冠とのバランスが良いサイズ */
		padding: 10px 0px 0px 0px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.rankingbox_shouken_name_custom {
		font-size: 35px !important; /* 王冠とのバランスが良いサイズ */
		padding: 10px 10px 0px 10px !important;
	}
}

/* レイアウト設定：横一列＆垂直中央揃え */
.rankingbox_title_flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* 基本の垂直中央揃え */
    justify-content: flex-start !important;
    gap: 8px !important;
    height: 50px !important; /* 高さを少し広げて余裕を持たせる */
}

/* バナーエリア全体 */
.rankingbox_banner_top {
    text-align: center;
    margin-bottom: 20px;
    background: #fff; /* 背景を白に固定 */
}

/* 共通 - 画像の上に載るテキスト（＼ ／ 形式） */
.banner_top_catch {
    display: block !important;
    font-size: 20px !important;
    font-weight: bold !important;
/*    color: #e20039 !important;*/
    margin: 0 0 10px 0 !important; /* 画像との距離 */
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.banner_top_catch {
	    font-size: 18px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.banner_top_catch {
	    font-size: 30px !important;
	}
}

/* バナー画像そのもの */
.rankingbox_banner_top img {
    width: 100% !important;
    max-width: 250px; /* PCでの広がりすぎ防止 */
    height: auto !important;
/*    border: 1px solid #00813d !important;*/ /* 松井グリーンの枠線 */
    border-radius: 4px !important;
    display: block;
    margin: 0 auto !important;
}


/* カードを相対配置の基準にする */
.review-card {
    position: relative !important;
    white-space: normal !important;
}

/* 日付を右上に絶対配置 */
.post-date {
    position: absolute !important;
    top: 15px !important;   /* 上からの距離 */
    right: 15px !important; /* 右からの距離 */
    font-size: 11px !important;
    color: #bbbbbb !important; /* 目立たない薄いグレー */
}

/* ユーザー情報のヘッダー（日付と重ならないよう右に余白） */
.review-header {
    padding-right: 60px !important; 
    margin-bottom: 12px !important;
}

.highlight_red {
    line-height: 1.2 !important; /* 強調数字は行間を詰め、文字の存在感を出す */
    display: inline-block !important;
    margin: 5px 0 !important;
}

/* --- 全体コンテナ --- */
.button_section_simple {
    text-align: center;
    padding: 20px 10px;
    background: #fff;
}

.cta_container_final {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    position: relative;
}

/* --- 上の吹き出し（緑ベースに書き換え） --- */
.cta_balloon_red {
    display: inline-block;
    position: relative;
    background-color: #00813d !important; /* 証券サイトらしい誠実な緑 */
    color: #ffffff !important;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 900;
    line-height: 1.2;
    z-index: 2; /* ボタンより上 */
    margin-bottom: -10px; /* ボタンのフチに被せる */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    /* 振動アニメーション */
    animation: cta-bounce-mini 2.5s infinite ease-in-out;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.cta_balloon_red {
		font-size: 12px; /* 少し小さくして上品に */
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.cta_balloon_red {
		font-size: 18px; /* 少し小さくして上品に */
	}
}

/* 吹き出しの三角（しっぽ：緑に書き換え） */
.cta_balloon_red::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    /* 吹き出し本体と同じ緑色に変更 */
    border-top: 8px solid #00813d;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

/* 小さめの振動アクション */
@keyframes cta-bounce-mini {
    0%, 100% { transform: translateY(-5px); }
    50% { transform: translateY(-15px); }
}

/* --- 下のメインボタン（赤ベース） --- */
.main_button_green_compact {
    display: block !important;
    margin: 0 auto !important;
    padding: 10px 0 !important;
    /* 赤のグラデーション */
    background: linear-gradient(to bottom, #ff3333, #cc0000) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 50px;
    font-weight: 900;
    /* 立体的な影（暗めの赤） */
    box-shadow: 0 5px 0 #990000 !important;
    position: relative;
    z-index: 1;
    transition: all 0.1s;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.main_button_green_compact {
		width: 82% !important; /* ★サイズをやや絞ってバランスを調整 */
		font-size: 18px !important; /* 文字も少し小さく */
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.main_button_green_compact {
		width: 100% !important; /* ★サイズをやや絞ってバランスを調整 */
		font-size: 30px !important; /* 文字も少し小さく */
	}
}

/* クリック時の沈み込み */
.main_button_green_compact:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #1e8449 !important;
}

/* NISAセクションのカードデザイン */
.nisa_feature_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature_card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.feature_card a {
    text-decoration: none;
    display: block;
    padding: 12px;
}

.card_flex {
    display: flex;
    align-items: center;
    gap: 15px;
}

.card_img img {
    width: 60px;
    height: auto;
    border-radius: 4px;
}

.card_info h3 {
    color: #00813d;
    margin: 0 0 4px 0;
    font-weight: 900;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.card_info h3 {
		font-size: 15px;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.card_info h3 {
		font-size: 20px;
	}
}

.card_info p {
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.card_info p {
		font-size: 12px;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.card_info p {
		font-size: 16px;
	}
}

/* ==========================================================
   クロージングセクション（last_push）専用スタイル
   ========================================================== */

/* --- 1. ヘッダー・見出しエリア：中央揃えを強制 --- */
.last_push_header {
    display: block !important;
    text-align: center !important; /* 子要素を中央へ寄せる */
    width: 100% !important;
    padding: 10px 0 !important;
}

.last_push_title {
    display: inline-block !important;
    font-size: 16px !important;    /* 馴染むように抑制したサイズ */
    font-weight: 900 !important;
    color: #00813d !important;     /* 松井グリーンの統一 */
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1.2 !important;
    border: none !important;
    background: none !important;
}

/* --- 2. 本文テキスト：他パーツと14pxで同期 --- */
.last_push_text_content {
    font-size: 14px !important;    /* 標準サイズに固定 */
    line-height: 1.75 !important;  /* 読みやすさを確保する行間 */
    color: #444 !important;
}

.last_push_text_content p {
    margin-bottom: 1.2em !important; /* 段落間の適切なゆとり */
    text-align: justify;           /* 両端を揃えて清潔感を出す */
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.last_push_text_content p {
	    font-size: 14px !important;    /* pタグ単位でも強制適用 */
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.last_push_text_content p {
	    font-size: 23px !important;    /* pタグ単位でも強制適用 */
	}
}

/* --- 3. 強調パーツ：視認性の最適化 --- */
.last_push_highlight_box {
    background: #f0f8f3 !important; /* 薄いグリーンの背景 */
    border: 1px solid #00813d !important;
    padding: 15px 10px !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
    text-align: center !important;
}

.highlight_main {
    color: #00813d !important;
    font-weight: 900 !important;
    display: block;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.highlight_main {
	    font-size: 16px !important;    /* 本文より一回り大きく強調 */
	}
}

.highlight_main {
    color: #00813d !important;
    font-weight: 900 !important;
    display: block;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.highlight_main {
	    font-size: 16px !important;    /* 本文より一回り大きく強調 */
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.highlight_main {
	    font-size: 35px !important;    /* 本文より一回り大きく強調 */
	}
}

.highlight_sub {
    display: block;
    margin-top: 4px;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.highlight_sub {
	    font-size: 13px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.highlight_sub {
	    font-size: 23px !important;
	}
}

/* マーカー設定 */
.mark01 {
    background: linear-gradient(transparent 65%, rgba(255, 255, 51, 0.7) 0%) !important;
    font-weight: bold !important;
}

/* --- 4. 最終メッセージと外枠 --- */
.last_push_final_message {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #222 !important;
    border-top: 1px dotted #ccc !important;
    padding-top: 15px !important;
    margin-top: 20px !important;
    text-align: center !important;
}

.last_push_frame {
    border: 1px solid #00813d !important;
    border-radius: 12px !important;
    background: #fff !important;
    margin: 30px 0 !important;
}

.last_push_inner {
    padding: 25px 15px !important; /* 内側の余白を均一化 */
}

/* 親要素のFlexbox（左寄せ設定）を完全に上書き・解除する */
.last_push_header_fix {
    display: block !important;       /* 横並び設定を解除 */
    text-align: center !important;    /* 中身を中央揃えにする */
    width: 100% !important;           /* 幅をいっぱいまで広げる */
    margin: 0 !important;
    padding: 10px 0 !important;
    justify-content: center !important; /* 万が一Flexが残っても中央へ */
}

/* 見出し自体のサイズと配置を固定 */
.last_push_title {
    display: inline-block !important; /* 中央寄せを機能させるため */
    font-weight: 900 !important;
    color: #00813d !important;
    margin: 0 auto !important;        /* 左右中央配置 */
    text-align: center !important;
    width: auto !important;
    border: none !important;
    background: none !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.last_push_title {
		font-size: 16px !important;       /* 他の本文(14px)より一回り大きく調整 */
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.last_push_title {
	    font-size: 35px !important;       /* 他の本文(14px)より一回り大きく調整 */
	}
}


/* ID「#tbl_hikaku03」の中にあるテーブルに限定して、最強の優先度で上書き */

#tbl_hikaku03 table.tbl_hikaku {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* 各列の幅（%）指定 */
#tbl_hikaku03 table.tbl_hikaku th:nth-child(1),
#tbl_hikaku03 table.tbl_hikaku td:nth-child(1) { width: 0% !important; }

#tbl_hikaku03 table.tbl_hikaku th:nth-child(2),
#tbl_hikaku03 table.tbl_hikaku td:nth-child(2) { width: 23% !important; }

#tbl_hikaku03 table.tbl_hikaku th:nth-child(3),
#tbl_hikaku03 table.tbl_hikaku td:nth-child(3) { width: 16% !important; }

#tbl_hikaku03 table.tbl_hikaku th:nth-child(4),
#tbl_hikaku03 table.tbl_hikaku td:nth-child(4) { width: 24% !important; }

#tbl_hikaku03 table.tbl_hikaku th:nth-child(5),
#tbl_hikaku03 table.tbl_hikaku td:nth-child(5) { width: 16% !important; }

#tbl_hikaku03 table.tbl_hikaku th:nth-child(6),
#tbl_hikaku03 table.tbl_hikaku td:nth-child(6) { width: 26% !important; }

/* 共通 - テキストサイズの強制調整 */
#tbl_hikaku03 table.tbl_hikaku td.fixed01.tbl_hikaku_company_solid,
#tbl_hikaku03 table.tbl_hikaku td.tbl_hikaku_company_solid {
    line-height: 1.4 !important;
    padding: 10px 4px !important;
    word-break: break-all !important; /* はみ出しを防止 [Image of CSS word-break property] */
    text-align: center !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
#tbl_hikaku03 table.tbl_hikaku td.fixed01.tbl_hikaku_company_solid,
#tbl_hikaku03 table.tbl_hikaku td.tbl_hikaku_company_solid {
    font-size: 13px !important; /* 14pxだとはみ出る場合は12px〜13pxがベスト */
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
#tbl_hikaku03 table.tbl_hikaku td.fixed01.tbl_hikaku_company_solid,
#tbl_hikaku03 table.tbl_hikaku td.tbl_hikaku_company_solid {
    font-size: 20px !important; /* 14pxだとはみ出る場合は12px〜13pxがベスト */
	}
}

/* 1. ヘッダーの外枠（白背景） */
header.sb-slide {
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. 1000pxの幅を強制し、ロゴとPRを左右に飛ばす */
.header_flex_list {
    display: flex !important;
    justify-content: space-between !important; /* ロゴ左・PR右 */
    align-items: center !important;
    width: 100% !important;
    max-width: 1000px !important; /* バナーの幅 */
    margin: 0 auto !important;    /* 中央寄せ */
    padding: 5px!important;
    list-style: none !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.header_flex_list {
		height: 40px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.header_flex_list {
		height: 60px !important;
	}
}

/* 3. 980px以下で消える・ずれる問題を強制解決 */
@media screen and (max-width: 985px) {
    header.sb-slide, 
    #head_area, 
    .header_flex_list, 
    .top_pr {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* 4. 【PR】の文字を確実に出す */
.top_pr {
    display: block !important;
    color: #000 !important; /* 黒で確実に表示 */
    font-weight: bold !important;
    white-space: nowrap !important;
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.top_pr {
	    font-size: 11px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.top_pr {
	    font-size: 18px !important;
	}
}

/* スマホ向け (max-width: 979px) */
@media screen and (max-width: 979px) {
	.logo-img {
	    width: 170px !important;
	}
}

/* PC向け (min-width: 980px) */
@media screen and (min-width: 980px) {
	.logo-img{
	    width: 250px !important;
	}
}