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

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

body {
	font-family:-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN","Yu Gothic", "Meiryo", sans-serif;
	color: #333;
	line-height: 1.5;
	background: #fff;
	font-size: 16px;
	-moz-user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
	-khtml-user-select:none;
	-khtml-user-drag:none;	
	user-select:none;/*コピペ禁止*/
}

/*強調*/
strong {
	color: #E8551F;
}

strong_y {
	font-weight: bold;
	/*color: #ee0000;*/
	/*color: #ff3d0a;*/
	/*background-color: #ff6;*/
	background: linear-gradient(180deg,#fff 0%,#fff 10%,#ff6 10%,#fff 100%);
}

.blue_marker {
    color: #276ba0;
    background: linear-gradient(transparent 70%, #ffff688f 30%);
}

hr {
	border-bottom: 1px solid #d5d5d5;
	margin: 0 0 15px 0;
}

p.red_point {
    font-size: 12px;
    background: linear-gradient(transparent 70%, #fdfd008f 70%);
    font-weight: bold;
    color: red;
    margin: 5px auto;
    display: inline;
}

span.red_point {
    font-size: 18px;
    background: linear-gradient(transparent 70%, #fdfd008f 70%);
    font-weight: bold;
    color: red;
    margin: 5px auto;
}

/*-円枠（青）-*/
.blue_point {
	display: inline-block;
	background-color: #0c74bc;
	color: white;
	font-weight: bold;
	border-radius: 9999px;
	padding: 6px 10px;
	font-size: 13px;
	text-align: center;
	line-height: 1.4;
	margin: 7px 0;
}

/*-円枠（緑）-*/
.green_point {
	display: inline-block;
	background-color: #017e2a;
	color: white;
	font-weight: bold;
	border-radius: 9999px;
	padding: 6px 7px;
	font-size: 13px;
	text-align: center;
	line-height: 1.4;
	margin: 7px 0;
}

/*-円枠（グレー）-*/
.gray_point {
	display: inline-block;
	background-color: #818181;
	color: white;
	font-weight: bold;
	border-radius: 9999px;
	padding: 6px 11px;
	font-size: 12px;
	text-align: center;
	line-height: 1.4;
	margin: 7px 0;
}

p.yohaku {
	margin: 1.1em 0;
}

/*リスト表示*/
li {
	list-style: none;
}

/*リンク*/
a {
	color: #000;
}



a.block {
    display: block;
}

span.red_y {
    color: #E8551F;
    font-weight: bold;
    font-size: 15px;
    background: linear-gradient(transparent 60%, #ffff0c8f 60%);
}

/*文字寄せ
---------------------------------------*/
/*右寄せ*/
.txt_right {
	text-align: right;
}
/*左寄せ*/
.txt_left {
	text-align: left;
}

.tbl_top_left {
	float: left;
}

.tbl_top_right {
	float: right;
	vertical-align: bottom;
	margin: 0;
	padding: 12px 0 0 0;
}

/*文字サイズ調整
---------------------------------------*/
/*小さく*/
.txt_small {
	font-size: 12px;
}

.text_small {
	font-size: 12px;
}

.text_11 {
	font-size: 11px;
}

.txt_middle {
	font-size: 14px;
}

.text_center {
    text-align: center;
}

/*文字サイズ調整*/
.text_verysmall {
	font-size: 10px;
}

.gray_text,.gray_text02,.gray_text03 {
	color: gray;
	padding: 5px;
	margin: 2.5em 0 0;
	background: #f1f1f1;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
}

.gray_text {
	margin: 5px 0px;
}

@media screen and (max-width: 979px) {
.gray_text02 {
	margin: 5px 0px;
}
}

@media screen and (max-width: 979px) {
.gray_text03 {
	margin: -45px 0 20px;
}
}

.yellow_text {
	margin: 0px;
	padding: 8px;
	background: #FFFFCC;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	width: 100%;
}
.green_text {
	margin: 0px;
	padding: 8px;
	background: #CCFFCC;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	width: 100%;
    font-size: 15px;
}

.gold_text {
	margin: 0px;
	padding: 8px;
	background: #fff6e0cc;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
	width: 100%;
}

.white_text {
color: #fff;
}


.yellow_marker {
	background: linear-gradient(180deg,#fff 0%,#fff 10%,#ff6 10%,#fff 100%);
}

.font01 {
    margin: 5px 0;
    font-size: 13px;
}

/*文章内
--------------------------------------------*/
.yohaku{
	padding: 0 10px;
	width: 100%;
	margin: 0 auto;
}

.text_link{
	text-decoration: underline;
	color: #1a0dab;
}

.yajirushi {
	margin: -25px 0 0 0;
    font-size: 24px;
    font-weight: bold;
	color:#333;
    text-align: center;
}

.padding3{
	padding: 0 0 3px 0;
}

/*注釈
-------------------------------------*/
/*背景色（灰色）*/
.annotation_gray {
	padding: 10px;
	font-size: 12px;
	background: #f1f1f1;
	border: 1px solid #e1e1e1;
	border-radius: 4px;
}

.hosoku_left{
	text-align: left;
	font-size: 10px;
	margin: 0;
	padding: 0px 0px 0px 0px;
	background-color: #fff;
}

.hosoku_right {
	display: block;
	text-align: right;
	margin: 0;
	padding: 0px 0px 0px 0px;
	background-color: #fff;
}


/*見出し背景色
---------------------------------------*/
.orange {
	background: #F90;
}

.red {
	color: #E5293C;
}

.green {
	background: #53AD5C;
}

.blue {
	background: #3683C9;
}

.pink {
	background: #F2719A;
}

.yellow {
	background: #F7B210;
}

.navy {
	background: #2c5575;
}

/*テーブルセル色変更（trに付与）
---------------------------------------*/
/*背景色黄色*/
.cell_yellow {
	background: #FAFFB5;
}

/*背景色オレンジ色*/
.cell_orange {
	background: #FCEDC3;
}

/*Clearfix*/
.cf {
	content: "";
	display: block;
	clear: both;
}

img {
	vertical-align: bottom;
}

.img_sentence{
	max-width: 400px;
}

.none_img{
	width: 90%;
}

/*比較表
-------------------------------------------------*/
.text {
	width: 100%;
	margin: 0 auto;
	padding: 0 5px;
}
.text_amazon {
	font-size: 13px;
}

.frame_text {
    font-size: 12px;
    text-decoration: underline;
    margin: 2px auto;
}

.frame_text02 {
	font-size: 11px;
	margin-top: 5px;
}

p.frame_text03 {
    font-size: 17px;
    font-weight: bold;
}

/*ランキング
-------------------------------------------------*/
.best01,.best02,.best03,.best04,.best05,.best06,.best07,.best08,.best09,.best10 {
	padding: 2px 0 0 46px;
	line-height: 44px;
}

.best99 {
	padding: 2px 0 0 0px;
	line-height: 44px;
}

/*1位表示*/
.best01 {
	background: url(/img/items/best1.gif) no-repeat;
	background-size: 40px;
}
/*2位表示*/
.best02 {
	background: url(/img/items/best2.gif) no-repeat;
	background-size: 40px;
}
/*3位表示*/
.best03 {
	background: url(/img/items/best3.gif) no-repeat;
	background-size: 40px;
}
/*4位表示*/
.best04 {
	background: url(/img/items/best4.gif) no-repeat;
	background-size: 40px;
}
/*5位表示*/
.best05 {
	background: url(/img/items/best5.gif) no-repeat;
	background-size: 40px;
}
/*6位表示*/
.best06 {
	background: url(/img/items/best6.gif) no-repeat;
	background-size: 40px;
}
/*7位表示*/
.best07 {
	background: url(/img/items/best7.gif) no-repeat;
	background-size: 40px;
}
/*8位表示*/
.best08 {
	background: url(/img/items/best8.gif) no-repeat;
	background-size: 40px;
}
/*9位表示*/
.best09 {
	background: url(/img/items/best9.gif) no-repeat;
	background-size: 40px;
}
/*10位表示*/
.best10 {
	background: url(/img/items/best10.gif) no-repeat;
	background-size: 40px;
}

/*以降*/
.best99 {
	background-size: 1px;
}
/*リストアイコン
---------------------------------------------------*/
.li_icon li{
	margin: 0 0 5px 0;
	padding: 2px 0 0 26px;
	height: 24px;
}
.inspection{
	background: url(/img/items/inspection-24.png) no-repeat;
}
.bank {
	background: url(/img/items/bank-24.png) no-repeat;
}
.attention {
	background: url(/img/items/attention-24.png) no-repeat;
}
.search {
	background: url(/img/items/search-24.png) no-repeat;
}
.bank_robbery {
	background: url(/img/items/bank_robbery-24.png) no-repeat;
}
.queen {
	background: url(/img/items/queen_gb-24.png) no-repeat;
}
.ffine_print {
	background: url(/img/items/fine_print-24.png) no-repeat;
}

/*-----------------------------------------
レイアウト
---------------------------------------------*/
#wrap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

/*---------------------------------------------
ヘッダー
-----------------------------------------------*/
header {
/*	position: fixed;*/
/*	-webkit-backface-visibility: hidden;*/
	position: relative;
	width: 100%;
	height: 35px;
	background: #fff;
	z-index: 100;
}

h1 img {
	max-width: 100%;
}

h1#logo {
    margin-right: 60%;
}

@media screen and (max-width: 979px) {
h1#logo {
    margin-right: 30%;
}
}

#head_area {
	position: relative;
}

#head_area::after {
	content: "";
	display: block;
	clear: both;
}

/*ナビゲーション
--------------------------------------------*/
#top_nav {
	background: #fff;
	border-top: 1px solid #e8e8e8;
	border-bottom: 2px solid #330600;
	box-sizing: border-box;
	margin: 0 auto;
	width: 1100px;
}

@media screen and (max-width: 979px) {
#top_nav {
    width: 700px;
}
}

@media screen and (max-width: 767px) {
#top_nav {
    width: 90%;
    max-width: 700px;
}
}

@media screen and (max-width: 479px) {
#top_nav  {
    width: 100%;
}
}

#top_nav::after {
	content: "";
	display: block;
	clear: both;
}

#top_nav ul {
	display: table;
	table-layout: fixed;
	width: 100%;
}

#top_nav li {
	display:table-cell;
	height: 35px;
	font-size: 10px;
	text-align: center;
	border-right: 1px solid #d1d1d1;
	box-shadow: 1px 0px 0 #fff;
	text-shadow: 1px 1px 1px #fff;
	vertical-align: middle;
	box-sizing: border-box;
}

#top_nav li a {
	display: block;
	/*padding: 3px 0;*//*iOSで高さが変わる…*/
}

.t_nav {
	padding: 3px 0 3px 20px;
}

.icon01 {
	background: url(/img/items/icon_ranking.png) no-repeat;
	background-size: 16px;
}

.icon02 {
	background: url(/img/items/icon_soku.png) no-repeat;
	background-size: 16px;
}

.icon03 {
	background: url(/img/items/search-24.png) no-repeat;
	background-size: 16px;
}

/*#top_nav li:last-child {
	border-right: none;
	box-shadow: none;
}*/

#top_nav li:first-child {
	width: 65%;
	border-left: 1px solid #d1d1d1;
}

#top_nav li:last-child {
	width: 10%;
}

/*PR表記*/
#top_nav li.top_pr{
	color: #676767;
	font-size: 13px;
}


/*---------------------------------------------
コンテンツ
-----------------------------------------------*/
#contents {
	margin: 0 auto 20px auto;
	width: 1100px;
}

@media screen and (max-width: 979px) {
#contents {
    width: 700px;
}
}

@media screen and (max-width: 767px) {
#contents {
    width: 90%;
    max-width: 700px;
}
}

@media screen and (max-width: 479px) {
#contents {
    width: 100%;
}
}


/* =========================================
   フッター大外枠 (#footer)
========================================= */
#footer {
    clear: both;
    padding: 30px 0 0 0;
    background-color: #041a2f47;
    box-shadow: 2px 0 3px #b5b5b5;
    font-size: 14px;
}

/* =========================================
   コンテンツエリア (コラム一覧など)
========================================= */
.footer_contents {
    width: 1300px;
    margin: 0 auto;
    padding: 0 0 30px 40px;
    overflow: hidden;
}

.footer_contents a {
    color: #333;
    text-decoration: none;
}

.footer_contents a:hover {
    text-decoration: underline;
}

.footer_contents .sitename {
    font-size: 110%;
    font-weight: bold;
    padding: 0 0 5px 0;
}

.footer_contents .groupname {
    margin: 0;
    padding: 0;
    border-bottom: 1px dotted #333;
    font-size: 95%;
    font-weight: bold;
}

.mokuji_waku {
    float: left;
}

/* コラムリストのレイアウト（横並び） */
.footer_contents .mokuji_container {
	overflow: hidden;
    margin-top: 5px;
}

.footer_contents .mokuji_waku {
    margin: 0 20px 0 5px;
    padding: 0 20px;
    list-style: none;
    float: left;
}

.footer_contents li {
    margin: 5px 0 0 0;
    padding: 0 10px 0 0;
    font-size: 80%;
}

/* =========================================
   フッター下部エリア (メニュー・コピーライト)
========================================= */
#footer footer {
    padding: 20px 0;
    background: #041a2f;
    color: #fff;
    text-align: center;
}

.foot_menu {
    margin: 0 0 10px 0;
}

/* メニューを横並びかつ中央揃えに */
.foot_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.foot_menu li a {
    color: #fff;
    text-decoration: underline;
}

.foot_menu li a:hover {
    text-decoration: none;
}

#copy {
    margin: 10px 0;
    font-size: 0.9em;
}

#footer footer .powered-logo {
    width: 12em;
}

/* 以前のCSSにあったその他クラス（必要であれば） */
.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;
}

address a {
    color: #039;
}

/* =========================================
   レスポンシブデザイン (スマホ・タブレット対応)
========================================= */
@media screen and (max-width: 767px) {
    .footer_contents {
        width: 540px;
    }
    .footer_contents .sitename {
        font-size: 16px;
    }
    .footer_contents li {
        font-size: 12px;
    }
}

@media screen and (max-width: 479px) {
    .footer_contents {
        width: 100%;
        padding: 0 20px 30px 20px;
        box-sizing: border-box;
    }
    .footer_contents .sitename {
        font-size: 14px;
    }
    .footer_contents li {
        font-size: 10px;
    }
}



/* =========================================
   ヘッドバナー
========================================= */
.head_banner_img {
	display: block;
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0 auto;
}


/* =========================================
   TOP3ランキング
========================================= */
.content_top3 *,
.content_top3 *::before,
.content_top3 *::after {
	box-sizing: border-box;
}

section.content_top3 {
	margin: 0 auto 20px;
	padding: 0 5px;
}

.content_top3 strong {
	color: inherit;
	font-size: inherit;
}

.content_top3 img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: middle;
}

.content_top3_title {
	position: relative;
	margin: 15px auto 8px;
	padding-top: 10px;
	color: #082743;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-align: center;
}

.content_top3_title::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 34px;
	height: 3px;
	border-radius: 999px;
	background: #c89c37;
	content: "";
	transform: translateX(-50%);
}

.content_top3_title span {
	margin-left: 4px;
	color: #c89c37;
}

.top3_tab_input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.top3_tabs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	overflow: hidden;
	border: 1px solid #5d7895;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: #efefef;
}

.top3_tabs label {
	display: grid;
	min-height: 42px;
	place-items: center;
	padding: 8px 12px;
	color: #082743;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	cursor: pointer;
}

.top3_tab_input_corporate:checked ~ .top3_tabs label[for="top3_corporate"],
.top3_tab_input_sole:checked ~ .top3_tabs label[for="top3_sole"] {
	background: #082743;
	color: #fff;
}

.top3_panels {
	border: 1px solid #5d7895;
	background: #f5f4ef;
}

.top3_panel {
	display: none;
}

.top3_tab_input_corporate:checked ~ .top3_panels .top3_panel_corporate,
.top3_tab_input_sole:checked ~ .top3_panels .top3_panel_sole {
	display: block;
}

.top3_list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.top3_item {
	overflow: hidden;
	border-bottom: 1px solid #d8d2c3;
	background: #f7f6f1;
}

.top3_item:last-child {
	border-bottom: 0;
}

.top3_item_bar {
	display: flex;
	align-items: center;
	padding: 3px 10px;
	background: #fbf8f0;
}

img.top3_rank_icon {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	margin-right: 8px;
}

.top3_card_title {
	flex: 1;
	color: #111;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.top3_card_title a {
	color: inherit;
	text-decoration: underline;
}

.top3_item_body {
	padding: 10px;
	background: #fff;
}

.top3_item_main {
	display: grid;
	grid-template-columns: 125px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
}

.top3_product {
	display: grid;
	place-items: center;
	min-height: 78px;
}

.top3_card_img {
	margin: 5px 0;
}

.top3_answer {
	min-width: 0;
}

.top3_answer > strong {
	color: #e5331d;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.65;
	background: linear-gradient(transparent 62%, #fff35a 62%);
}

.top3_answer p {
	font-size: 14px;
}

span.red_under {
	background: linear-gradient(to bottom, transparent 60%, #fff94f 60%);
	color: #ff0000;
	font-weight: bold;
}

.top3_fee {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	margin-top: 10px;
	overflow: hidden;
	border: 1px solid #ddd1b5;
	background: #fffdf8;
	min-height: 42px;
}

.top3_fee dt {
	display: grid;
	place-items: center;
	padding: 6px 5px;
	background: #f2ead7;
	color: #082743;
	font-size: 11px;
	font-weight: 800;
}

.top3_fee dd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 6px;
	padding: 6px 10px;
	color: #333;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

.top3_fee dd strong {
	font-size: 14px;
	font-weight: 800;
}

.top3_fee dd small {
	font-size: 11px;
	font-weight: 500;
}

.content_top3 span.strong2 {
	color: #ff0000;
	font-size: 12px;
	font-weight: 700;
}
span.strong2 {
	color: #ff0000;
	font-weight: bold;
}
/* =========================================
   スマート絞り込み付き 法人カード比較表
========================================= */
.smart_card_compare,
.smart_card_compare *,
.smart_card_compare *::before,
.smart_card_compare *::after {
	box-sizing: border-box;
}

.smart_card_compare {
	width: 100%;
	margin: 40px auto 32px;
	color: #142c40;
	padding: 0 5px;
}

.smart_card_compare button,
.smart_card_compare a {
	font: inherit;
}

.smart_card_compare button {
	-webkit-appearance: none;
	appearance: none;
}

.smart_card_compare strong {
	color: inherit;
}

.smart_card_compare img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
}

.smart_card_compare [hidden] {
	display: none !important;
}

.compare_heading {
	position: relative;
	margin: 0 0 12px;
	padding-top: 9px;
	text-align: center;
}

.compare_heading::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 34px;
	height: 3px;
	border-radius: 999px;
	background: #c89c37;
	content: "";
	transform: translateX(-50%);
}

.compare_eyebrow {
	margin: 0 0 1px;
	color: #c89c37;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.compare_heading h2 {
	margin: 0;
	color: #082743;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.025em;
}

.compare_filters {
	position: relative;
	padding: 6px 7px 4px;
	background: linear-gradient(90deg,rgba(200, 156, 55, 0.09) 0,rgba(8, 39, 67, 0.035) 42%,rgba(8, 39, 67, 0.012) 100%);
}

.compare_filter_row {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	min-height: 44px;
}

.compare_filter_row + .compare_filter_row {
	border-top: 1px solid rgba(8, 39, 67, 0.08);
}

.compare_filter_label {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 7px 3px;
	background: transparent;
	color: #082743;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.25;
	text-align: left;
}

.compare_choices {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	gap: 5px 4px;
	padding: 6px 3px 6px 5px;
}

.compare_choices button {
	min-height: 29px;
	margin: 0;
	padding: 5px 9px;
	border: 1px solid rgba(8, 39, 67, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	color: #30495e;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color 140ms ease,
		border-color 140ms ease,
		color 140ms ease,
		box-shadow 140ms ease;
}

/* PCだけに追加する細かな絞り込みは、スマホでは選択肢を絞る */
.compare_choices .compare_pc_only_choice {
	display: none;
}

.compare_choices button.is-active {
	border-color: #082743;
	background: #082743;
	color: #fff;
	box-shadow: 0 2px 5px rgba(8, 39, 67, 0.16);
}

.compare_choices .compare_brand_choice {
	display: grid;
	width: 48px;
	min-width: 48px;
	padding: 4px 6px;
	place-items: center;
}

.compare_brand_choice img {
	width: auto;
	max-width: 38px;
	height: auto;
	max-height: 17px;
	object-fit: contain;
}

.compare_choices .compare_brand_choice.is-active {
	border-color: #c89c37;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(200, 156, 55, 0.24);
}

.compare_choices button:focus-visible {
	outline: 3px solid rgba(200, 156, 55, 0.48);
	outline-offset: 1px;
}

.compare_result_bar {
	display: flex;
	min-height: 42px;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 3px 5px;
}

.compare_result_bar p {
	margin: 0;
	color: #647383;
	font-size: 11px;
	font-weight: 700;
}

.compare_result_bar strong {
	margin: 0 2px;
	color: #cf3d35;
	font-size: 17px;
	font-weight: 800;
}

.compare_result_bar button {
	margin: 0;
	padding: 4px 1px;
	border: 0;
	border-bottom: 1px solid #9ca8b2;
	background: transparent;
	color: #5b6d7b;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
}

.compare_result_bar button:focus-visible {
	outline: 2px solid #c89c37;
	outline-offset: 2px;
}

.compare_empty {
	margin: 0;
	padding: 22px 14px;
	border: 1px solid #d7e0e6;
	border-radius: 10px;
	background: #f4f7f9;
	color: #647383;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.compare_table {
	display: flex;
	width: 100%;
	overflow: hidden;
	border: 1px solid #082743;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(8, 39, 67, 0.08);
}

.compare_labels,
.compare_item {
	display: grid;
	grid-template-rows:
		44px
		133px
		74px
		52px
		58px
		62px
		76px
		90px
		82px
		76px;
}

.compare_labels {
	position: relative;
	z-index: 2;
	width: 62px;
	flex: 0 0 62px;
	border-right: 1px solid #082743;
	box-shadow: 3px 0 7px rgba(8, 39, 67, 0.06);
}

.compare_label {
	display: grid;
	min-width: 0;
	place-items: center;
	padding: 3px;
	border-bottom: 1px solid #d7e0e6;
	background: #edf2f5;
	color: #082743;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
}

.compare_label:first-child {
	background: #082743;;
	color: #fff;
}

.compare_label:nth-child(2),
.compare_label:nth-child(4),
.compare_label:nth-child(6),
.compare_label:nth-child(8) {
	background: #f8fafb;
}

.compare_label:last-child {
	border-bottom: 0;
}

.compare_viewport {
	width: calc(100% - 62px);
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-color: #c89c37 #e8edf0;
	scrollbar-width: thin;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}

.compare_viewport::-webkit-scrollbar {
	display: block;
	height: 10px;
}

.compare_viewport::-webkit-scrollbar-track {
	background: #e8edf0;
}

.compare_viewport::-webkit-scrollbar-thumb {
	border: 2px solid #e8edf0;
	border-radius: 999px;
	background: #c89c37;
}

.compare_viewport::-webkit-scrollbar-thumb:hover {
	background: #a97d20;
}

.compare_viewport.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.compare_viewport:focus-visible {
	outline: 3px solid rgba(200, 156, 55, 0.48);
	outline-offset: -3px;
}

.compare_items {
	--smart-card-compare-visible-columns: 3;
	display: flex;
	width: 100%;
	min-width: 100%;
	align-items: stretch;
}

.compare_item {
	min-width: 0;
	flex: 0 0 calc(100% / var(--smart-card-compare-visible-columns));
	border-right: 1px solid #d7e0e6;
	scroll-snap-align: start;
}

.compare_item:last-child {
	border-right: 0;
}

.compare_cell {
	display: flex;
	min-width: 0;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 5px 4px;
	border-bottom: 1px solid #d7e0e6;
	background: #fff;
	color: #333;
	text-align: center;
	overflow-wrap: anywhere;
	font-size: 13px;
}

.compare_cell:nth-child(2),
.compare_cell:nth-child(4),
.compare_cell:nth-child(6),
.compare_cell:nth-child(8) {
	background: #fbfcfd;
}

.compare_cell:last-child {
	border-bottom: 0;
}

.compare_rank {
	padding: 2px;
	background: #fbf8f0;
}

.compare_rank_display {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
}

.compare_rank_icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.compare_rank_number {
	display: inline-flex;
	min-width: 35px;
	height: 27px;
	align-items: baseline;
	justify-content: center;
	gap: 1px;
	padding: 2px 5px;
	border-radius: 999px;
	background: #082743;
	color: #fff;
	line-height: 1;
}

.compare_rank_number strong {
	font-size: 15px;
	font-weight: 800;
}

.compare_rank_number small {
	font-size: 8px;
	font-weight: 800;
}

.compare_product {
	padding: 5px 4px;
}

.compare_product a {
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.compare_image {
	display: grid;
	width: 100%;
	height: 61px;
	place-items: center;
}

.compare_image img {
	width: auto;
	max-width: 82px;
	max-height: 58px;
	object-fit: contain;
}

.compare_card_name {
	display: -webkit-box;
	overflow: hidden;
	color: #000;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.35;
	text-decoration: underline;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.compare_fit {
	align-items: flex-start;
	padding-top: 8px;
}

.compare_fit p {
	margin: auto 0;
	overflow: hidden;
	color: #333;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.compare_brands {
	flex-wrap: wrap;
	align-content: center;
	gap: 5px 3px;
	padding: 5px 3px;
}

.compare_brand_logo {
	width: auto;
	max-width: 42px;
	height: auto;
	max-height: 26px;
	object-fit: contain;
}

.compare_fee,
.compare_rate,
.compare_bonus,
.compare_campaign {
	flex-direction: column;
	gap: 3px;
}

.compare_fee strong,
.compare_rate strong,
.compare_bonus strong,
.compare_campaign strong {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.compare_fee small,
.compare_rate small,
.compare_bonus small,
.compare_campaign small {
	display: -webkit-box;
	overflow: hidden;
	font-size: 9px;
	font-weight: 600;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.compare_rate.is-emphasis strong,
.compare_bonus strong,
.compare_campaign strong {
	color: #ff0000;
}

.compare_rate_mark {
	width: 27px;
}

.compare_dash {
	color: #9ba6ae;
	font-size: 15px;
	font-weight: 700;
}

.compare_actions {
	flex-direction: column;
	gap: 5px;
	padding: 7px 5px;
}

.compare_button {
	display: grid;
	width: 100%;
	min-height: 30px;
	place-items: center;
	padding: 5px 2px;
	border-radius: 5px;
	font-size: 9px;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
}

.compare_button_official {
	border: 1px solid #ad2c26;
	background: #cf3d35;
	color: #fff !important;
	box-shadow: 0 2px 4px rgba(130, 34, 29, 0.18);
}

.compare_button_detail {
	border: 1px solid #082743;
	background: #fff;
	color: #082743;
}

.compare_button:focus-visible {
	outline: 3px solid rgba(200, 156, 55, 0.55);
	outline-offset: 1px;
}

.compare_scroll_hint {
	margin: 7px 0 0;
	color: #72808c;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: center;
}

.compare_scroll_hint span {
	margin: 0 4px;
	color: #c89c37;
	font-size: 12px;
}


.compare_bonus {
	padding: 6px 4px;
}

.compare_bonus_logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 5px 6px;
	width: 100%;
}

.compare_bonus_logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 48px;
	max-height: 22px;
	object-fit: contain;
}

/* ロゴが4個以上あるアメックス用 */
.compare_bonus_logos.is-many {
	gap: 4px 5px;
}

.compare_bonus_logos.is-many .compare_bonus_logo {
	max-width: 36px;
	max-height: 26px;
}


@media (max-width: 359px) {
	.smart_card_compare {
		padding: 0 3px;
	}

	.compare_filter_row {
		grid-template-columns: 58px minmax(0, 1fr);
	}

	.compare_choices {
		gap: 4px;
		padding: 6px 5px;
	}

	.compare_choices button {
		padding-right: 7px;
		padding-left: 7px;
		font-size: 9px;
	}

	.compare_labels {
		width: 58px;
		flex-basis: 58px;
	}

	.compare_viewport {
		width: calc(100% - 58px);
	}

	.compare_label {
		font-size: 9px;
	}

	.compare_image img {
		max-width: 72px;
	}

	.compare_card_name,
	.compare_fee strong,
	.compare_rate strong,
	.compare_bonus strong,
	.compare_campaign strong {
		font-size: 9.5px;
	}

}

@media (hover: hover) {
	.compare_choices button:hover {
		border-color: #082743;
	}

	.compare_button_official:hover {
		background: #ad2c26;
	}

	.compare_button_detail:hover {
		background: #082743;
		color: #fff !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.compare_choices button {
		transition: none;
	}

	.compare_viewport {
		scroll-behavior: auto;
	}
}






/* =========================================
   PC表示の最適化（980px以上）
   ・比較表は最大5案件を同時表示
   ・絞り込みは2列で俯瞰しやすく
========================================= */
@media screen and (min-width: 980px) {
	/* TOP3 */
	.content_top3 {
		display: none;
	}

	/* 比較セクション全体 */
	.smart_card_compare {
		margin-top: 56px;
		margin-bottom: 48px;
	}

	.compare_heading {
		margin-bottom: 20px;
		padding-top: 12px;
	}

	.compare_heading::before {
		width: 48px;
		height: 4px;
	}

	.compare_eyebrow {
		margin-bottom: 2px;
		font-size: 12px;
	}

	.compare_heading h2 {
		font-size: 28px;
		line-height: 1.3;
	}

	/* PCは条件を一覧しやすい2列パネルにする */
	.compare_filters {
		display: grid;
		gap: 10px;
		padding: 14px;
		border: 1px solid #d8e0e6;
		border-radius: 12px;
		background:
			linear-gradient(135deg, rgba(200, 156, 55, 0.1), rgba(8, 39, 67, 0.035)),
			#f8fafb;
	}

	.compare_filter_row {
		grid-template-columns: 100px minmax(0, 1fr);
		min-height: 62px;
		overflow: hidden;
		border: 1px solid rgba(8, 39, 67, 0.11);
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.9);
	}

	.compare_filter_row + .compare_filter_row {
		border-top: 1px solid rgba(8, 39, 67, 0.11);
	}

	.compare_filter_row_feature {
		grid-column: 1 / -1;
	}

	.compare_filter_label {
		padding: 10px 12px;
		border-right: 1px solid #e0e6ea;
		background: #eef3f6;
		font-size: 13px;
		text-align: center;
		justify-content: center;
	}

	.compare_choices {
		gap: 7px;
		padding: 10px;
	}

	.compare_choices button {
		min-height: 36px;
		padding: 7px 12px;
		font-size: 12px;
	}

	.compare_choices .compare_pc_only_choice {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.compare_choices .compare_brand_choice {
		width: 58px;
		min-width: 58px;
		padding: 6px 8px;
	}

	.compare_brand_choice img {
		max-width: 45px;
		max-height: 20px;
	}

	.compare_result_bar {
		min-height: 54px;
		padding: 10px 4px 7px;
	}

	.compare_result_bar p {
		font-size: 13px;
	}

	.compare_result_bar strong {
		font-size: 22px;
	}

	.compare_result_bar button {
		font-size: 12px;
	}

	/* 5案件表示でも文字が詰まりすぎない寸法 */
	.compare_table {
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(8, 39, 67, 0.1);
	}

	.compare_labels,
	.compare_item {
		grid-template-rows:
			48px
			145px
			82px
			58px
			66px
			68px
			72px
			84px
			98px
			88px;
	}

	.compare_labels {
		width: 88px;
		flex-basis: 88px;
	}

	.compare_viewport {
		width: calc(100% - 88px);
	}

	.compare_label {
		padding: 7px 5px;
		font-size: 13px;
		line-height: 1.35;
	}

	.compare_cell {
		padding: 7px 6px;
		font-size: 13px;
		line-height: 1.45;
	}

	.compare_rank_display {
		width: 46px;
		height: 46px;
	}

	.compare_rank_icon {
		width: 44px;
		height: 44px;
	}

	.compare_product {
		padding: 5px 7px;
		padding-top: 10px;
	}

	.compare_product a {
		gap: 8px;
	}

	.compare_image {
		height: 76px;
	}

	.compare_image img {
		max-width: 112px;
		max-height: 72px;
	}

	.compare_card_name {
		font-size: 12.5px;
		line-height: 1.4;
		-webkit-line-clamp: 5;
	}

	.compare_fit {
		padding: 10px 8px;
	}

	.compare_fit p {
		font-size: 12.5px;
		line-height: 1.4;
		-webkit-line-clamp: 4;
	}

	.compare_brands {
		gap: 6px 5px;
	}

	.compare_brand_logo {
		max-width: 48px;
		max-height: 28px;
	}

	.compare_fee,
	.compare_rate,
	.compare_bonus,
	.compare_campaign {
		gap: 5px;
	}

	.compare_fee strong,
	.compare_rate strong,
	.compare_bonus strong,
	.compare_campaign strong {
		font-size: 13px;
		line-height: 1.4;
	}

	.compare_fee small,
	.compare_rate small,
	.compare_bonus small,
	.compare_campaign small {
		font-size: 10px;
		line-height: 1.4;
	}

	.compare_bonus_logo {
		max-width: 52px;
		max-height: 24px;
	}

	.compare_bonus_logos.is-many .compare_bonus_logo {
		max-width: 42px;
		max-height: 24px;
	}

	.compare_actions {
		gap: 7px;
		padding: 9px 8px;
	}

	.compare_button {
		min-height: 34px;
		padding: 7px 5px;
		font-size: 11px;
	}

	.compare_scroll_hint {
		margin-top: 9px;
		font-size: 11px;
	}

}


/* =========================================
   絞り込み結果と連動する詳細ボックス v5
   ・おすすめポイント3つを常時表示
   ・PCは1カード1列でコンパクトに表示
   ・スマホは読みやすさを保ちながら縦長を抑制
========================================= */
.compare_details {
	--detail-navy: #333;
	--detail-gold: #c89c37;
	--detail-red: #c7352e;
	--detail-text: #333;
	--detail-muted: #5d7182;
	--detail-line: #e1e8ed;
	--detail-surface: #f7f9fa;
	margin: 36px 0 0;
	color: var(--detail-text);
}

.compare_details_heading {
	position: relative;
	margin: 0 0 35px;
	padding-top: 11px;
	text-align: center;
}

.compare_details_heading::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: var(--detail-gold);
	content: "";
	transform: translateX(-50%);
}

.compare_details_heading p {
	margin: 0 0 2px;
	color: var(--detail-gold);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.08em;
}

.compare_details_heading h2 {
	margin: 0;
	color: var(--detail-navy);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.compare_detail_list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	margin: 0;
}

.compare_detail_card {
	overflow: hidden;
	border: 1px solid #c9d5dd;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 7px 20px rgba(8, 39, 67, 0.09);
	scroll-margin-top: 64px;
}

.compare_detail_card[hidden] {
	display: none;
}

.compare_detail_header {
	display: grid;
	min-height: 58px;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	border-bottom: 1px solid var(--detail-line);
	background: linear-gradient(90deg, #fbf7ed 0 56px, #fff 56px 100%);
	box-shadow: inset 0 4px 0 var(--detail-navy);
}

.compare_detail_header > span {
	display: grid;
	width: 56px;
	height: 58px;
	place-items: center;
	border-right: 1px solid var(--detail-line);
}

.compare_detail_header h3 {
	margin: 0;
	padding: 11px 13px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	color: #000;
	text-decoration: underline;
}

.compare_detail_intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	padding: 16px 14px;
	background: linear-gradient(180deg, #fff, #fafcfd);
	text-align: center;
}

.compare_detail_image {
	display: grid;
	width: 100%;
	height: 92px;
	place-items: center;
	grid-row: 2;
}

.compare_detail_image img {
	width: auto;
	max-width: 132px;
	height: auto;
	max-height: 84px;
	object-fit: contain;
}

.compare_detail_intro_text {
	min-width: 0;
	grid-row: 1;
}

.compare_detail_intro strong {
	display: block;
	color: var(--detail-navy);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.55;
}

.compare_detail_intro p {
	max-width: 560px;
	margin: 5px auto 0;
	color: #40586b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.65;
}

/* 最初に見せるカードの強み3つ */
.compare_detail_points {
	margin: 0 5px 16px;
	overflow: hidden;
	padding: 0;
	border: 1px solid #cbd8e0;
	border-radius: 9px;
	background: #fff;
}

.compare_detail_points h4,
.compare_detail_business_info h4,
.compare_detail_reward_info h4 {
	position: relative;
	margin: 0;
	padding-left: 12px;
	color: var(--detail-navy);
	font-size: 14.5px;
	font-weight: 800;
	line-height: 1.45;
}

.compare_detail_points h4::before,
.compare_detail_business_info h4::before,
.compare_detail_reward_info h4::before {
	position: absolute;
	top: 0.1em;
	bottom: 0.1em;
	left: 0;
	width: 4px;
	border-radius: 999px;
	background: var(--detail-gold);
	content: "";
}

.compare_detail_points h4 {
	padding: 9px 12px;
	background: var(--detail-navy);
	color: #fff;
}

.compare_detail_points h4::before {
	display: none;
}

.compare_detail_points ul {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 2px 12px;
	list-style: none;
}

.compare_detail_points li {
	display: grid;
	grid-template-columns: 23px minmax(0, 1fr);
	align-items: start;
	gap: 9px;
	padding: 6px 4px;
	color: var(--detail-text);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.55;
}

.compare_detail_points li + li {
	border-top: 1px solid var(--detail-line);
}

.compare_detail_point_icon {
	display: grid;
	width: 23px;
	height: 23px;
	place-items: center;
	margin-top: 0.05em;
	border-radius: 50%;
	background: var(--detail-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

/* 年会費・還元率などの基本6項目 */
.compare_detail_keyfacts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid var(--detail-line);
	border-bottom: 1px solid var(--detail-line);
	background: var(--detail-surface);
}

.compare_detail_keyfacts > div {
	display: grid;
	min-width: 0;
	align-content: center;
	gap: 4px;
	padding: 5px 11px;
	border-bottom: 1px solid var(--detail-line);
}

.compare_detail_keyfacts > div:nth-child(odd) {
	border-right: 1px solid var(--detail-line);
}

.compare_detail_keyfacts > div:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.compare_detail_keyfacts dt,
.compare_detail_keyfacts dd {
	margin: 0;
}

.compare_detail_keyfacts dt {
	color: var(--detail-muted);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
}

.compare_detail_keyfacts dd {
	color: var(--detail-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

.compare_detail_keyfacts dd > strong {
	display: block;
	font-size: 14.5px;
	font-weight: 800;
}

.compare_detail_keyfacts dd > small {
	display: block;
	margin-top: 2px;
	color: var(--detail-muted);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.45;
}

.compare_detail_brand_logos {
	display: flex;
	min-height: 26px;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 7px;
}

.compare_detail_brand_logos img {
	width: auto;
	max-width: 44px;
	height: auto;
	max-height: 26px;
	object-fit: contain;
}

/* 追加カード・ETC情報 */
.compare_detail_business_info {
	padding: 16px 14px 14px;
	background: #fff;
}

.compare_detail_info_rows {
	margin: 10px 0 0;
	border-top: 1px solid var(--detail-line);
	border-bottom: 1px solid var(--detail-line);
	background: #fafcfd;
}

.compare_detail_info_rows > div {
	display: grid;
	min-height: 44px;
	grid-template-columns: 102px minmax(0, 1fr);
	align-items: stretch;
}

.compare_detail_info_rows > div + div {
	border-top: 1px solid var(--detail-line);
}

.compare_detail_info_rows dt,
.compare_detail_info_rows dd {
	display: flex;
	height: auto;
	align-items: center;
	margin: 0;
	padding: 9px 10px;
	line-height: 1.5;
}

.compare_detail_info_rows dt {
	background: #eef3f6;
	color: #536a7c;
	font-size: 11.5px;
	font-weight: 800;
}

.compare_detail_info_rows dd {
	color: var(--detail-navy);
	font-size: 12.5px;
	font-weight: 700;
}

/* ポイント還元情報 */
.compare_detail_reward_info {
	margin: 0 14px 14px;
	padding: 12px 14px;
	border-left: 4px solid var(--detail-gold);
	background: #fff9ed;
}

.compare_detail_reward_info h4 {
	padding-left: 0;
}

.compare_detail_reward_info h4::before {
	display: none;
}

.compare_detail_reward_heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.compare_detail_reward_info > strong {
	display: block;
	margin-top: 8px;
	color: #bd2f28;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.55;
}

.compare_detail_reward_logos {
	display: flex;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 5px 8px;
}

.compare_detail_reward_logos img {
	width: auto;
	max-width: 52px;
	height: auto;
	max-height: 24px;
	object-fit: contain;
}

/* 詳細条件・付帯サービス */
.compare_detail_more {
	margin: 0 14px 14px;
	overflow: hidden;
	border-top: 1px solid #cbd7df;
	border-bottom: 1px solid #cbd7df;
	background: #fff;
}

.compare_detail_more summary {
	position: relative;
	display: flex;
	min-height: 48px;
	align-items: center;
	padding: 12px 50px 12px 13px;
	background: #f0f5f8;
	color: var(--detail-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}

.compare_detail_more summary::-webkit-details-marker {
	display: none;
}

.compare_detail_more summary::after {
	position: absolute;
	top: 50%;
	right: 12px;
	display: grid;
	width: 26px;
	height: 26px;
	place-items: center;
	border-radius: 50%;
	background: var(--detail-navy);
	color: #fff;
	content: "+";
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	transform: translateY(-50%);
}

.compare_detail_more[open] summary {
	border-bottom: 1px solid var(--detail-line);
	background: #eaf1f5;
}

.compare_detail_more[open] summary::after {
	content: "−";
}

.compare_detail_more summary:focus-visible {
	outline: 3px solid rgba(200, 156, 55, 0.45);
	outline-offset: -3px;
}

.compare_detail_more_body {
	padding: 0 12px 12px;
}

.compare_detail_more_rows {
	margin: 0;
}

.compare_detail_more_rows > div {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	align-items: stretch;
	border-bottom: 1px solid #e0e7ec;
}

.compare_detail_more_rows dt,
.compare_detail_more_rows dd {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 10px 6px;
	font-size: 12.5px;
	line-height: 1.6;
}

.compare_detail_more_rows dt {
	color: #526a7c;
	font-weight: 800;
}

.compare_detail_more_rows dd {
	color: var(--detail-text);
	font-weight: 650;
}

.compare_detail_emoney_logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}

.compare_detail_emoney_logos img {
	width: 54px;
	height: 36px;
	border: 1px solid #dbe3e8;
	border-radius: 5px;
	background: #fff;
	object-fit: contain;
}

.compare_detail_benefits {
	margin-top: 12px;
	padding: 12px;
	border: 1px solid #eee2c6;
	border-radius: 9px;
	background: #fcf9f1;
}

.compare_detail_benefits h5 {
	margin: 0 0 7px;
	color: var(--detail-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
}

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

.compare_detail_benefits li {
	position: relative;
	padding-left: 17px;
	color: #314b61;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
}

.compare_detail_benefits li + li {
	margin-top: 5px;
}

.compare_detail_benefits li::before {
	position: absolute;
	top: 0.68em;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--detail-gold);
	content: "";
}

.compare_detail_benefits p {
	margin: 0;
	color: var(--detail-muted);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
}

/* キャンペーン */
.compare_detail_campaign {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	align-items: stretch;
	margin: 0 14px 14px;
	overflow: hidden;
	border-left: 4px solid var(--detail-gold);
	background: #fbf7ee;
}

.compare_detail_campaign > span {
	display: grid;
	min-height: 64px;
	place-items: center;
	padding: 7px;
	border-right: 1px solid #e8dcc0;
	background: transparent;
	color: var(--detail-navy);
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
}

.compare_detail_campaign > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 9px 11px;
}

.compare_detail_campaign strong {
	color: #b52f28;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.45;
}

.compare_detail_campaign small {
	color: var(--detail-muted);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1.45;
}

.compare_detail_actions {
	display: block;
	padding: 0 14px 17px;
}

.compare_detail_actions .compare_button {
	width: 100%;
	min-height: 50px;
	padding: 11px 14px;
	border-radius: 999px;
	font-size: 14.5px;
	line-height: 1.4;
	box-shadow: 0 4px 10px rgba(130, 34, 29, 0.22);
}

@media (hover: hover) {
	.compare_detail_more summary:hover {
		background: #e7eff4;
	}

	.compare_detail_title_link:hover {
		color: #9b7019 !important;
	}
}

@media screen and (max-width: 359px) {
	.compare_detail_intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 7px;
		padding: 14px 11px;
	}

	.compare_detail_image {
		width: 100%;
		height: 78px;
	}

	.compare_detail_image img {
		max-width: 118px;
		max-height: 68px;
	}

	.compare_detail_intro strong {
		font-size: 14px;
	}

	.compare_detail_intro p,
	.compare_detail_points li {
		font-size: 12.5px;
	}

	.compare_detail_info_rows > div,
	.compare_detail_more_rows > div {
		grid-template-columns: 90px minmax(0, 1fr);
	}

	.compare_detail_campaign {
		grid-template-columns: 74px minmax(0, 1fr);
	}
}

/* PCは横幅を使うが、縦の余白は増やしすぎない */
@media screen and (min-width: 980px) {
	.compare_details {
		margin-top: 48px;
	}

	.compare_details_heading {
		margin-bottom: 48px;
	}

	.compare_details_heading p {
		font-size: 12px;
	}

	.compare_details_heading h2 {
		font-size: 28px;
	}

	.compare_detail_list,
	.compare_detail_list.is-single {
		max-width: 900px;
		margin-right: auto;
		margin-left: auto;
		gap: 26px;
	}

	.compare_detail_list.is-single .compare_detail_card:not([hidden]) {
		width: 100%;
		max-width: 900px;
	}

	.compare_detail_card {
		border-radius: 16px;
		box-shadow: 0 9px 26px rgba(8, 39, 67, 0.1);
	}

	.compare_detail_header {
		min-height: 62px;
		grid-template-columns: 62px minmax(0, 1fr);
		background: linear-gradient(90deg, #fbf7ed 0 62px, #fff 62px 100%);
	}

	.compare_detail_header > span {
		width: 62px;
		height: 62px;
	}

	.compare_detail_header h3 {
		padding: 12px 17px;
		font-size: 20px;
	}

	.compare_detail_intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 20px 24px 18px;
	}

	.compare_detail_image {
		width: 100%;
		height: 175px;
	}

	.compare_detail_image img {
		max-width: 225px;
		max-height: 150px;
	}

	.compare_detail_intro strong {
		font-size: 18px;
		line-height: 1.5;
	}

	.compare_detail_intro p {
		margin-top: 7px;
		font-size: 14.5px;
		line-height: 1.65;
	}

	.compare_detail_points {
		margin: 0 24px 18px;
		padding: 0;
	}

	.compare_detail_points h4,
	.compare_detail_business_info h4,
	.compare_detail_reward_info h4 {
		font-size: 16px;
	}

	.compare_detail_points ul {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin: 0;
		padding: 9px 16px;
	}

	.compare_detail_points li {
		min-height: 0;
		grid-template-columns: 25px minmax(0, 1fr);
		gap: 18px;
		padding: 9px 4px;
		font-size: 14px;
		line-height: 1.55;
	}

	.compare_detail_points li + li {
		border-top: 1px solid var(--detail-line);
		border-left: 0;
	}

	.compare_detail_point_icon {
		width: 25px;
		height: 25px;
	}

	.compare_detail_keyfacts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.compare_detail_keyfacts > div,
	.compare_detail_keyfacts > div:nth-child(odd),
	.compare_detail_keyfacts > div:nth-last-child(-n + 2) {
		min-height: 82px;
		padding: 12px 16px;
		border-right: 1px solid var(--detail-line);
		border-bottom: 1px solid var(--detail-line);
	}

	.compare_detail_keyfacts > div:nth-child(3n) {
		border-right: 0;
	}

	.compare_detail_keyfacts > div:nth-last-child(-n + 3) {
		border-bottom: 0;
	}

	.compare_detail_keyfacts dt {
		font-size: 11.5px;
	}

	.compare_detail_keyfacts dd {
		font-size: 14px;
	}

	.compare_detail_keyfacts dd > strong {
		font-size: 15.5px;
	}

	.compare_detail_keyfacts dd > small {
		font-size: 11px;
	}

	.compare_detail_business_info {
		padding: 18px 24px 16px;
	}

	.compare_detail_info_rows {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: 11px;
	}

	.compare_detail_info_rows > div,
	.compare_detail_info_rows > div + div {
		min-width: 0;
		grid-template-columns: 88px minmax(0, 1fr);
		border-top: 0;
		border-right: 1px solid var(--detail-line);
	}

	.compare_detail_info_rows > div:last-child {
		border-right: 0;
	}

	.compare_detail_info_rows dt,
	.compare_detail_info_rows dd {
		height: auto;
		padding: 10px;
	}

	.compare_detail_info_rows dt {
		font-size: 11.5px;
	}

	.compare_detail_info_rows dd {
		font-size: 12.5px;
		line-height: 1.55;
	}

	.compare_detail_reward_info,
	.compare_detail_more,
	.compare_detail_campaign {
		margin-right: 24px;
		margin-left: 24px;
	}

	.compare_detail_reward_info {
		padding: 14px 16px;
	}

	.compare_detail_reward_info > strong {
		font-size: 14.5px;
	}

	.compare_detail_more summary {
		min-height: 52px;
		padding: 13px 56px 13px 16px;
		font-size: 14.5px;
	}

	.compare_detail_more_body {
		padding: 0 16px 14px;
	}

	.compare_detail_more_rows > div {
		grid-template-columns: 170px minmax(0, 1fr);
	}

	.compare_detail_more_rows dt,
	.compare_detail_more_rows dd {
		padding: 11px 8px;
		font-size: 13.5px;
	}

	.compare_detail_benefits li,
	.compare_detail_benefits p {
		font-size: 13px;
	}

	.compare_detail_campaign {
		grid-template-columns: 110px minmax(0, 1fr);
	}

	.compare_detail_campaign > span {
		font-size: 12px;
	}

	.compare_detail_campaign strong {
		font-size: 14.5px;
	}

	.compare_detail_campaign small {
		font-size: 11.5px;
	}

	.compare_detail_actions {
		padding: 0 24px 22px;
		text-align: center;
	}

	.compare_detail_actions .compare_button {
		max-width: 430px;
		min-height: 52px;
		margin: 0 auto;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.compare_detail_more summary {
		transition: none;
	}
}


/* =========================================
   絞り込み結果と連動する注釈ボックス
========================================= */
.compare_annotations {
	--annotation-preview-height: 145px;
	position: relative;
	margin: 12px 0 30px;
	overflow: hidden;
	border: 1px solid #e3e3e3;
	background: #fff;
	color: #888;
}

.compare_annotations[hidden],
.compare_annotations_more[hidden] {
	display: none;
}

.compare_annotations_body {
	max-height: var(--annotation-preview-height);
	overflow: hidden;
	padding: 8px 9px;
}

.compare_annotation_item,
.compare_annotation_common {
	margin: 0;
	color: #8b8b8b;
	font-size: 10px;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.compare_annotation_item + .compare_annotation_item {
	margin-top: 2px;
}

.compare_annotation_item strong {
	color: #777;
	font-size: inherit;
	font-weight: 700;
}

.compare_annotation_common {
	margin-bottom: 3px;
}

.compare_annotations_more {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	height: 72px;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0),
			rgba(255, 255, 255, 0.94) 58%,
			#fff 100%
		);
	pointer-events: none;
	font-size: 13px;
}

.compare_annotations_toggle {
	min-width: 112px;
	min-height: 36px;
	padding: 3px 15px;
	border: 0;
	border-radius: 999px;
	background: #aaa;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
	pointer-events: auto;
	transition:
		background-color 150ms ease,
		transform 150ms ease;
}

.compare_annotations_toggle:hover {
	background: #919191;
	transform: translateY(-1px);
}

.compare_annotations_toggle:focus-visible {
	outline: 3px solid rgba(200, 156, 55, 0.6);
	outline-offset: 2px;
}

/* 続きを読むを押した後 */
.compare_annotations.is-expanded .compare_annotations_body {
	max-height: none;
}

.compare_annotations.is-expanded .compare_annotations_more {
	position: static;
	height: auto;
	padding: 9px 0 12px;
	background: #fff;
}

/* スマホ */
@media screen and (max-width: 760px) {
	.compare_annotations {
		margin: 10px 0 24px;
	}

	.compare_annotations_body {
		padding: 7px;
	}

	.compare_annotation_item,
	.compare_annotation_common {
		font-size: 9.5px;
		line-height: 1.65;
	}

	.compare_annotations_toggle {
		min-width: 108px;
		min-height: 35px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.compare_annotations_toggle {
		transition: none;
	}

	.compare_annotations_toggle:hover {
		transform: none;
	}
}



/* 詳細ボックス下部の注釈 */
.compare_detail_annotation {
	margin: -3px 14px 16px;
	padding: 10px 2px 0;
	border-top: 1px solid #e1e6ea;
	color: #7b8791;
}

.compare_detail_annotation p {
	margin: 0;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.compare_detail_annotation strong {
	color: #65737f;
	font-size: inherit;
	font-weight: 700;
}

@media screen and (min-width: 980px) {
	.compare_detail_annotation {
		margin-right: 24px;
		margin-bottom: 20px;
		margin-left: 24px;
		padding-top: 11px;
	}

	.compare_detail_annotation p {
		font-size: 11px;
		line-height: 1.75;
	}
}


/* SMCCの国際ブランドテキスト */
.compare_brand_text {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: anywhere;
}

.compare_detail_brand_text {
	font-size: 12px;
	text-align: left;
}

@media screen and (min-width: 980px) {
	.compare_brand_text {
		font-size: 11.5px;
	}

	.compare_detail_brand_text {
		font-size: 13px;
	}
}

/* =====================================================
   フッター 法人カードコラム
===================================================== */

.footer_column_area {
	width: 100%;
	max-width: 1300px;
	margin: 30px auto 10px;
	padding: 25px 20px;
	box-sizing: border-box;
	border-top: 1px solid #ddd;
}

.footer_column_title {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.footer_column_list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 25px;
}

.footer_column_category {
	margin: 0 0 10px;
	padding-bottom: 7px;
	border-bottom: 2px solid #333;
	font-size: 14px;
	font-weight: bold;
	color: #333;
}

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

.footer_column_box li {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.6;
}

.footer_column_box a {
	color: #555;
	text-decoration: none;
}

.footer_column_box a:hover {
	color: #d33;
	text-decoration: underline;
}


/* PCのみ表示 */
@media screen and (max-width: 767px) {
	.footer_column_area {
		display: none;
	}
}

.main_visual img {
	display: block;
	width: 100%;
	height: auto;
}

/*---------------------------------------------
PCサイドコンテンツ
-----------------------------------------------*/
/* PCのみ表示 */
@media screen and (max-width: 979px) {
	.pc_frame01 {
		display: block;
	}
}

@media screen and (min-width: 980px) {
	.pc_frame01 {
		display: flex;
		align-items: flex-start;
		gap: 22px;
	}
	.left-contents {
		width: calc(100% - 272px);
		margin: 0;
	}
}
.biz_sidebar {
	width: 270px;
	flex: 0 0 270px;
}



/* =========================================
   PCサイドバー 2026-09
========================================= */
@media screen and (max-width: 979px) {
    .biz_sidebar {
        display: none;
    }
}

@media screen and (min-width: 980px) {
    .biz_sidebar {
        display: block;
        width: 270px;
        flex: 0 0 270px;
        font-size: 13px;
        color: #222;
    }

    .biz_sidebar_sticky {
        position: static;
    }

    .biz_side_box {
        margin: 0 0 16px;
        border: 1px solid #d9dee5;
        background: #fff;
        box-shadow: 0 1px 2px rgba(12, 35, 58, 0.04);
    }

    .biz_side_heading {
        padding: 12px 14px 10px;
        border-bottom: 1px solid #e6e9ed;
        border-top: 3px solid #173a5e;
	height: 58px;
    }

    .biz_side_heading h2 {
        margin: 2px 0 0;
        padding: 0;
        border: 0;
        background: none;
        color: #172b3f;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 700;
        text-align: left;
    }

    .biz_side_kicker {
        display: block;
        color: #778493;
        font-size: 9px;
        line-height: 1.2;
        letter-spacing: .12em;
        font-weight: 700;
    }

    .biz_side_category_nav {
        display: block;
    }

    .biz_side_category_link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 13px;
        border-bottom: 1px solid #edf0f2;
        text-decoration: none;
        background: #fff;
        transition: background .15s ease;
    }

    .biz_side_category_link:hover,
    .biz_side_category_link.is-current {
        background: #f4f7fa;
    }

    .biz_side_category_link.is-current {
        box-shadow: inset 3px 0 0 #173a5e;
    }

    .biz_side_category_link span {
        min-width: 0;
    }

    .biz_side_category_link strong {
        display: block;
        margin: 0 0 2px;
        color: #0000ee;
        font-size: 13px;
        line-height: 1.3;
	text-decoration: underline;
	font-weight: normal;
    }

    .biz_side_category_link b {
        color: #718096;
        font-size: 20px;
        line-height: 1;
        font-weight: 400;
    }

    .biz_side_compare_link {
        display: block;
        margin: 10px 12px 12px;
        padding: 9px 10px;
        border: 1px solid #173a5e;
        color: #173a5e;
        background: #fff;
        text-align: center;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
    }

    .biz_side_compare_link:hover {
        color: #fff;
        background: #173a5e;
    }

    .biz_side_card_list {
        padding: 0 12px;
    }

    .biz_side_card {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 0;
        border-bottom: 1px solid #edf0f2;
    }

    .biz_side_card:last-child {
        border-bottom: 0;
    }

    .biz_side_card_image {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .biz_side_card_image img {
        display: block;
        width: 72px;
        height: auto;
        max-height: 58px;
        object-fit: contain;
    }

    .biz_side_card_body h3 {
        margin: 0 0 4px;
        padding: 0;
        border: 0;
        background: none;
        font-size: 13px;
        line-height: 1.45;
        text-align: left;
	font-weight: normal;
    }

    .biz_side_card_body h3 a {
        color: #0000ee;
        text-decoration: underline;
    }

    .biz_side_card_body p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin: 0 0 4px;
        color: #333;
        font-size: 13px;
        line-height: 1.45;
    }

    .biz_side_stat_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid #edf0f2;
    }

    .biz_side_stat_grid > div {
        padding: 12px 8px;
        text-align: center;
        border-right: 1px solid #edf0f2;
        border-bottom: 1px solid #edf0f2;
    }

    .biz_side_stat_grid > div:nth-child(2n) {
        border-right: 0;
    }

    .biz_side_stat_grid > div:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .biz_side_stat_grid strong {
        display: block;
        margin: 0 0 2px;
        color: #173a5e;
        font-size: 20px;
        line-height: 1;
    }

    .biz_side_stat_grid span {
        display: block;
        color: #68727c;
        font-size: 9px;
        line-height: 1.35;
    }

    .biz_side_data_note {
        margin: 0;
        padding: 10px 12px 12px;
        color: #69727c;
        font-size: 10px;
        line-height: 1.6;
    }

    /* カテゴリ別一覧ページ */
    .biz_category_intro {
        margin: 20px 0 18px;
        padding: 18px 20px;
        border-top: 3px solid #173a5e;
        border-bottom: 1px solid #d9dee5;
        background: #f8fafc;
    }

    .biz_category_intro .biz_category_label {
        margin: 0 0 5px;
        color: #7b8794;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .1em;
    }

    .biz_category_intro h2 {
        margin: 0 0 8px;
        padding: 0;
        border: 0;
        background: none;
        color: #142c44;
        font-size: 24px;
        line-height: 1.35;
        text-align: left;
    }

    .biz_category_intro p {
        margin: 0;
        color: #515d68;
        font-size: 13px;
        line-height: 1.75;
    }
}


/* =========================================
   PC 2カラム調整 v3
   flex幅計算とgapが重複して本文が縮む問題を修正
========================================= */
@media screen and (min-width: 980px) {
    .pc_frame01 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 270px;
        column-gap: 22px;
        align-items: start;
        width: 100%;
    }

    .pc_frame01 .left-contents {
        width: auto;
        min-width: 0;
        margin: 0;
    }

    .pc_frame01 .biz_sidebar {
        width: 270px;
        min-width: 0;
        margin-top: 56px;
    }

    /* TOP(index04)は比較見出しとサイドバーの開始位置を揃える */
    .pc_frame01_top .biz_sidebar {
        margin-top: 56px;
    }

    /* 2カラム内では比較表が親幅を超えないように固定 */
    .pc_frame01 .smart_card_compare,
    .pc_frame01 .compare_table,
    .pc_frame01 .compare_filters,
    .pc_frame01 .compare_details {
        max-width: 100%;
        box-sizing: border-box;
    }

    .pc_frame01 .compare_viewport {
        min-width: 0;
    }
}

/* =========================================
   カテゴリ別LP：比較表をPCで5案件表示
   ・対象カードはすべて横スクロール内に表示
   ・index04は従来どおり3案件表示
========================================= */
@media screen and (min-width: 980px) {
    .biz_category_page .compare_items {
        --smart-card-compare-visible-columns: 5;
    }
}


/* =========================================
   会計ソフト絞り込み
========================================= */
.compare_accounting_choices {
	align-items: center;
}

.compare_choices .compare_accounting_choice {
	display: grid;
	width: 74px;
	min-width: 74px;
	min-height: 34px;
	padding: 4px 6px;
	place-items: center;
	border-radius: 8px;
	background: #fff;
}

.compare_accounting_choice img {
	display: block;
	width: 100%;
	max-width: 64px;
	height: 24px;
	object-fit: contain;
}

.compare_choices .compare_accounting_choice.is-active {
	border-color: #c89c37;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(200, 156, 55, 0.24);
}

@media screen and (min-width: 980px) {
	.compare_choices .compare_accounting_choice {
		width: 104px;
		min-width: 104px;
		min-height: 42px;
		padding: 5px 8px;
	}

	.compare_accounting_choice img {
		max-width: 90px;
		height: 31px;
	}
}