/* =========================
   ジャンルTOP-TOPボタン
   ========================= */
   :root{
      --row-border:#bdbdbd;
      --text:#333;
      --muted:#666;
      --bar-bg:#f3f3f3;
      --pill:#f5f5f5;
      --border:#2b2b2b;
      --bar-bg:#f3f3f3;
      --range1: linear-gradient(90deg,#43A047,#9CCC65);
      --rangeN: linear-gradient(90deg,#bdbdbd,#e0e0e0);
      --grid: rgba(0,0,0,.08);
      --zero: rgba(0,0,0,.35);
      --bubble-border:#7e7e7e;
      --pill:#333;
      --accent:#c62828;
        --panel-border:#5b5b5b;
      --bar-gray:#d9d9d9;
      --bar-top1: linear-gradient(90deg,#6aa61a,#8ac23a);
      --btn-grad: linear-gradient(90deg,#d60000,#ff8a00);
      --line:#3b3b3b;
      --muted:#666;
      --soft:#e9e9e9;
      --soft2:#f3f3f3;
      --yellow:#f2d24b;        /* レーダー塗り */
      --yellow-stroke:#c9aa2d;
      --grid2:#bdbdbd;
    }
    .p-mainVisual__slide{
      max-width: 1000px;
      margin: 0 auto
    }
.genretop-button-relative {
	position: relative;
	text-align: center;
}
.p-mainVisual__textLayer>.p-blogParts{
  position: absolute;
    bottom: -8%;
}
.genretop-button-area {
	display: flex;
	gap: 40px;
	position: absolute;
	bottom: 80px;
	left: 28px;
}
.genretop-button-area a.genretop-button {
	padding: 12px;
	width: 260px;
	min-width: 30%;
}
.genretop-button-area .genretop-button-arrow {
	position: relative;
}
.genretop-button-area .genretop-button-arrow:after {
	content: "";
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	display: inline-block;
	position: absolute;
	right: 24px;
}
.genretop-button-area .icon-crown::before {
    content: "";
    display: inline-block;
    width: 80%;
    margin: auto;
    aspect-ratio: 1 / 1;
    background: url('/cardloan/wp-content/themes/swell_child/images/crown1.svg') no-repeat center / contain;
}
.genretop-button-area .icon-star::before {
    content: "";
    display: inline-block;
    width: 80%;
    margin: auto;
    aspect-ratio: 1 / 1;
    background: url('/cardloan/wp-content/themes/swell_child/images/pic-star.svg') no-repeat center / contain;
}
.genretop-button-area .icon_fuki {
	min-width: 28px;
}
.genretop-button-area .swell-block-button .swell-block-button__link[data-has-icon] {
	gap: 1.2em;
}
.genretop-button-area .red_ {
	--the-btn-color: #eab724;
	--the-btn-color2: #f58600;
	--the-solid-shadow: #c05500;
}
@media(max-width: 959px) {
  .p-mainVisual__textLayer>.p-blogParts{
    position: relative;
    bottom: -50%;
  }
	.genretop-button-area {
		gap: 0;
		left: 0;
		bottom: 14px;
		width: 100%;
	}
	.genretop-button-area a.genretop-button {
		padding: 10px;
		width: 220px;
	}
	.genretop-button-area a.genretop-button .genretop-txt {
		font-size: 14px;
	}
	.genretop-button-area .icon_fuki {
		min-width: 24px;
	}
}
@media(max-width: 599px) {
	.genretop-button-area {
		bottom: 10px;
	}
    .genretop-button-area a.genretop-button {
		width: 160px;
		padding: 6px 20px 6px 6px;
	}
	.genretop-button-area .genretop-button-arrow:after {
		right: 8px;
	}
	.genretop-button-area a.genretop-button .genretop-txt {
		font-size: 12px;
	}
	.genretop-button-area .swell-block-button .swell-block-button__link[data-has-icon] {
		gap: 1.2em;
	}
	.genretop-button-area .icon_fuki {
		min-width: 20px;
	}
}
/* =========================
   ジャンルTOP-診断機能
   ========================= */
.genre-shindan {
	padding: 24px 0;
}
.genre-shindan .genre-shindan_form {
	position: static;
	background: #fff;
	border: 3px solid #333;
	border-top: none;
}
.genre-shindan input,
.genre-shindan .sp,
.genre-shindan .point .sp-txt {
	display: none;
}
.genre-shindan .genre-shindan-title {
	position: relative;
	background-color: var(--color_main);
	color: #fff;
    font-size: 1.4em;
	padding: 16px;
	text-align: center;
	font-weight: bold;
	line-height: 1.4em;
	border-radius: 12px 12px 0 0;
}
.genre-shindan .genre-shindan-title-icon {
    display: flex;
    align-items: center;
    gap: 24px;
	position: relative;
	width: fit-content;
	place-self: center;
}
.genre-shindan .genre-shindan-title-icon::after {
    content: "";
    display: inline-block;
    width: 50px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/karireru-shindan.svg') no-repeat center / contain;
	position: absolute;
	right: -64px;
}
.genre-shindan dl {
    padding: 12px 32px;
    font-weight: bold;
}
.genre-shindan dl dt {
	position: relative;
	color: #333;
	padding: 8px 10px;
	font-size: 20px;
	line-height: 1.2em;
	text-align: center;
	border-bottom: 2px solid #333;
}
.genre-shindan dl dt:before {
    display: inline-block;
    padding: 2px 4px;
    margin-right: 4px;
}
.genre-shindan .use dt:before {
	content: "Q1";
}
.genre-shindan .age dt:before {
	content: "Q2";
}
.genre-shindan .date dt:before {
	content: "Q3";
}
.genre-shindan .point dt:before {
	content: "Q4";
}
.genre-shindan dd {
	padding: 12px 24px;
}
.genre-shindan dd label {
	cursor: pointer;
}
.genre-shindan .use dd {
	display: flex;
	justify-content: center;
	gap: 40px;
}
.genre-shindan .age dd,
.genre-shindan .point dd {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}
.genre-shindan .point dd {
	justify-content: flex-start;
	padding: 12px 0px 12px 24px;
}
.genre-shindan .date dd {
	padding: 12px 120px;
}
.genre-shindan .use dd label {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 6px 24px;
	border: 2px solid #333;
	border-radius: 50px;
	text-align: center;
	line-height: normal;
}
.genre-shindan .date dd {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.genre-shindan .date dd div {
	display: flex;
	gap: 24px;
	justify-content: center;
}
.genre-shindan .age dd label,
.genre-shindan .date dd label,
.genre-shindan .point dd label {
	display: flex;
	width: 100%;
	gap: 20px;
	align-items: center;
	border: 2px solid #333;
	border-radius: 50px;
	padding: 12px 24px;
	text-align: center;
	max-height: 61px;
}
.genre-shindan .age dd label {
	width: 30%;
	flex: 1 1 32%;
}
.genre-shindan .point dd label {
	width: 31%;
}
.genre-shindan .use dd label:before,
.genre-shindan .age dd label:before,
.genre-shindan .date dd label:before,
.genre-shindan .point dd label:before {
	content: "";
	width: 16px;
	height: 16px;
	display: block;
	border: 1px solid #333;
	border-radius: 50px;
}
.genre-shindan .use dd label:hover:before,
.genre-shindan .age dd label:hover:before,
.genre-shindan .date dd label:hover:before,
.genre-shindan .point dd label:hover:before {
	background-color: #fed400;
}
.genre-shindan .use dd .fs-small {
	font-size: 14px;
}
.genre-shindan .point .speed,
.genre-shindan .point .secret,
.genre-shindan .point .beginner,
.genre-shindan .point .company,
.genre-shindan .point .rate,
.genre-shindan .point .apron,
.genre-shindan .point .lady,
.genre-shindan .point .yen {
	display: flex;
	gap: 6px;
	align-items: center;
}
.genre-shindan .point .speed:before {
	content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/icon-speed.svg') no-repeat center / contain;
}
.genre-shindan .point .secret:before {
	content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/icon-secret.svg') no-repeat center / contain;
}
.genre-shindan .point .beginner:before {
	content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/icon-beginner.svg') no-repeat center / contain;
}
.genre-shindan .point .company:before {
	content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/icon-company.svg') no-repeat center / contain;
}
.genre-shindan .point .rate:before {
	content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/icon-rate.svg') no-repeat center / contain;
}
.genre-shindan .point .apron:before {
	content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/icon-apron.svg') no-repeat center / contain;
}
.genre-shindan .point .lady:before {
	content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/icon-lady.svg') no-repeat center / contain;
}
.genre-shindan .point .yen:before {
	content: "";
    display: block;
    width: 40px;
    aspect-ratio: 1 / 1;
    background:url('/cardloan/wp-content/themes/swell_child/images/icon-yen.svg') no-repeat center / contain;
}
.genre-shindan .result-button-area {
	margin-top: 12px;
}
.genre-shindan .swl-inline-icon:after {
	background: #333;
	width: 83%;
}
.genre-shindan .icon_fuki {
	align-items: normal;
}

.genre-shindan dd label:has(input[type="radio"]:checked):before {
	background-color: #fed400;
}
.genre-shindan .age,
.genre-shindan .date,
.genre-shindan .point {
	display: none;
}
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="use"]:checked) .use,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="age"]:checked) dl.age,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="date"]:checked) dl.date {
	display: none;
}
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="use"]:checked) .age,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="age"]:checked) .date,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="date"]:checked) .point {
	display: block;
}

.genre-shindan .speed-link,
.genre-shindan .secret-link,
.genre-shindan .beginner-link,
.genre-shindan .company-link,
.genre-shindan .rate-link,
.genre-shindan .apron-link,
.genre-shindan .lady-link,
.genre-shindan .yen-link {
	display: none;
}
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="0"]:checked) .speed-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="1"]:checked) .secret-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="2"]:checked) .beginner-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="3"]:checked) .company-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="4"]:checked) .rate-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="5"]:checked) .apron-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="6"]:checked) .lady-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="7"]:checked) .yen-link {
	display: block;
}
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="0"]:checked) .no-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="1"]:checked) .no-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="2"]:checked) .no-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="3"]:checked) .no-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="4"]:checked) .no-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="5"]:checked) .no-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="6"]:checked) .no-link,
.genre-shindan .genre-shindan_form:has(input[type="radio"][name="point"][value="7"]:checked) .no-link {
	display: none;
}

@media(max-width: 959px) {
	.genre-shindan .sp {
		display: block;
	}
	.genre-shindan .genre-shindan-title-icon {
		gap: 12px;
    }
	.genre-shindan dl {
		padding: 12px;
	}
	.genre-shindan dl dt {
		font-size: 16px;
    }
	.genre-shindan dl dd {
		font-size: 13px;
    }
	.genre-shindan dd {
		padding: 6px 0;
	}
	.genre-shindan dd span {
		width: 100%;
		justify-content: left;
	}
	.genre-shindan dd div {
		width: auto;
		margin: auto;
	}
	.genre-shindan .use dd label:before,
    .genre-shindan .age dd label:before {
		width: 14px;
		height: 14px;
    }
	.genre-shindan .date dd label:before,
	.genre-shindan .point dd label:before {
		width: 14px;
		height: 12px;
    }
	.genre-shindan .use dd {
		flex-direction: column;
		gap: 12px;
		padding: 12px 24px;
    }
	.genre-shindan .use dd .fs-small {
		font-size: 12px;
    }
	.genre-shindan .use dd label {
		gap: 12px;
		padding: 6px 12px;
    }
    .genre-shindan .date dd {
		gap: 12px;
    }
	.genre-shindan .date dd div {
		gap: 8px;
		width: 100%;
	}
	.genre-shindan .age dd label,
    .genre-shindan .date dd label,
    .genre-shindan .point dd label {
		gap: 4px;
		padding: 6px 4px 6px 8px;
		min-height: 40px;
    }
	.genre-shindan .date dd {
		padding: 12px 8px;
	}
	.genre-shindan .age dd {
		gap: 10px;
	}
	.genre-shindan .point dd {
		justify-content: center;
		gap: 12px;
		padding: 12px 0;
	}
	.genre-shindan .age dd label {
	    width: 45%;
    }
	.genre-shindan .point dd label {
	    width: 48%;
    }
	.genre-shindan .result-button-area {
		margin-top: 6px;
	}
}
@media(max-width: 569px) {
	.genre-shindan .point .sp-txt {
		display: block;
	}
	.genre-shindan .date .fs-sp-small,
	.genre-shindan .point .fs-sp-small {
		font-size: 11px;
		line-height: 1.2;
	}
	.genre-shindan .point dd label {
		gap: 4px;
	}
	.genre-shindan .point .speed:before,
	.genre-shindan .point .secret:before,
	.genre-shindan .point .beginner:before,
	.genre-shindan .point .company:before,
	.genre-shindan .point .rate:before,
	.genre-shindan .point .apron:before,
	.genre-shindan .point .lady:before,
	.genre-shindan .point .yen:before {
		width: 20px;
	}
}
@media(max-width: 398px) {
	.genre-shindan .point dd label:before {
		width: 12px;
		height: 12px;
    }
	.genre-shindan .point .speed,
	.genre-shindan .point .secret,
	.genre-shindan .point .beginner,
	.genre-shindan .point .company,
	.genre-shindan .point .rate,
	.genre-shindan .point .apron,
	.genre-shindan .point .lady,
	.genre-shindan .point .yen {
		gap: 4px;
		width: auto;
	}
}
/* =========================
   ジャンルTOP-クチコミ件数
   ========================= */
.reviews-number {
	display: flex;
	gap: 32px;
	justify-content: center;
	margin: 56px 0;
	align-items: end;
}
.reviews-number .number-area {
	display: flex;
	gap: 12px;
	align-items: end;
}
.reviews-number .number-area div {
	font-size: 40px;
	display: flex;
	gap: 12px;
	align-items: end;
}
.reviews-number .number {
	padding: 8px 20px;
	border: 1px solid #333;
	border-radius: 8px;
}
.reviews-number .txt {
	font-size: 20px;
}
@media(max-width: 959px) {
	.reviews-number {
	    gap: 12px;
	    margin: 40px 0;
		align-items: flex-start;
    }
	.reviews-number .number-area {
		flex-direction: column;
		gap: 8px;
	}
	.reviews-number img {
		width: 70px;
	}
	.reviews-number .number-area div {
	    font-size: 30px;
	    gap: 8px;
    }
	.reviews-number .number {
	    padding: 4px 12px;
    }
	.reviews-number .txt {
	    font-size: 16px;
    }
}
@media(max-width: 599px) {
	.reviews-number .number-area {
		gap: 4px;
	}
	.reviews-number img {
		width: 50px;
	}
    .reviews-number .number-area div {
	    font-size: 16px;
	    gap: 4px;
		font-weight: bold;
    }
	.reviews-number .number {
	    padding: 4px 8px;
    }
	.reviews-number .txt {
	    font-size: 14px;
    }
}

/* =========================
   ジャンルTOP-最新のPICKUP口コミ
   ========================= */
.pickup-reviews-area {
	margin: 0 120px;
}
.pickup-reviews-area h2 {
	margin-bottom: 16px;
}
.pickup-reviews-area .pickup-reviews-contents {
	gap: 32px;
}
.pickup-reviews-area .reviews-area {
	width: 74%;
	display: flex;
	flex-direction: column;
	gap: 46px;
	padding: 24px 66px 0 0;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 700px;
	direction: rtl;
}
.pickup-reviews-area .reviews-area .reviews {
	position: relative;
	border: 1px solid #333;
	border-radius: 8px;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	direction: ltr;
}
.pickup-reviews-area .reviews-area .reviews .reviews-title-txt {
	font-size: 20px;
}
.pickup-reviews-area .reviews-area .reviews:before,
.pickup-reviews-area .reviews-area .reviews:after {
	content: "";
	position: absolute;
}
.pickup-reviews-area .reviews-area .reviews:before {
	right: 30px;
	bottom: -30px;
	border-style: solid;
    border-color: transparent transparent #333 transparent;
    border-width: 0 30px 30px 0;
	rotate: 180deg;
}
.pickup-reviews-area .reviews-area .reviews:after {
	right: 31px;
	bottom: -28px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    border-width: 0 28px 28px 0;
	rotate: 180deg;
    z-index: 10;
}
.pickup-reviews-area .reviews-area .reviews .good-tag {
	color: #fff;
	font-size: 20px;
	background: linear-gradient(100deg,#2f7737 0%,var(--color_main) 100%);
	width: 120px;
	text-align: center;
	position: absolute;
	top: -8px;
}
.pickup-reviews-area .reviews-area .reviews .bad-tag {
	color: #fff;
	font-size: 20px;
	background: linear-gradient(100deg,#132e8e 0%,#2a81b8 100%);
	width: 120px;
	text-align: center;
	position: absolute;
	top: -8px;
}
.pickup-reviews-area .reviews-area .reviews .icon-person {
	position: absolute;
	right: -60px;
	bottom: -16px;
}
.pickup-reviews-area .reviews .reviews-info .tag {
	margin: 0 12px;
	font-size: 14px;
	width: auto;
}
.pickup-reviews-area .reviews .reviews-info .tag-txt {
	border-radius: 50px;
	color: #fff;
	padding: 4px 8px;
	background-color: #333;
}
.pickup-reviews-area .reviews .reviews-info .personal {
	width: 62%;
	text-align: right;
}
.pickup-reviews-area .karireru {
	width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	gap: 12px;
}
.pickup-reviews-area .karireru .karireru-txt {
	text-align: center;
}
@media (max-width: 959px) {
	.pickup-reviews-area {
		margin: 0 60px;
	}
    .pickup-reviews-area .pickup-reviews-contents {
		flex-direction: column;
		align-items: center;
	}
	.pickup-reviews-area .reviews-area {
		width: 100%;
		height: 600px;
	}
	.pickup-reviews-area .reviews-area .reviews .reviews-title-txt {
	    font-size: 16px;
    }
	.pickup-reviews-area .reviews .reviews-txt {
	    font-size: 16px;
    }
	.pickup-reviews-area .reviews-area .reviews .good-tag,
	.pickup-reviews-area .reviews-area .reviews .bad-tag {
		font-size: 16px;
	}
	.pickup-reviews-area .reviews .reviews-info .personal {
		display: flex;
		flex-direction: column;
	}
	.pickup-reviews-area .reviews .reviews-info .tag {
		margin: 0;
	}
	.pickup-reviews-area .reviews .reviews-info .tag-txt {
		padding: 2px 6px;
	}
	.pickup-reviews-area .karireru {
		width: 100%;
		flex-direction: unset;
		gap: 24px;
		justify-content: center;
	}
}
@media (max-width: 596px) {
	.pickup-reviews-area .reviews-area .reviews .reviews-title-txt {
		font-size: 14px;
	}
	.pickup-reviews-area .reviews-area {
		padding: 24px 12px 0 8px;
	}
	.pickup-reviews-area .reviews .reviews-txt {
		font-size: 14px;
	}
	.pickup-reviews-area .reviews-area .reviews {
		padding: 18px 10px 12px 10px;
		gap: 8px;
	}
	.pickup-reviews-area .reviews-area .reviews .star_area .star {
        width: 16px;
		height: 16px;
	}
	.pickup-reviews-area .reviews-area .reviews .icon-person {
		width: 54px;
		right: -12px;
		bottom: -40px;
	}
	.pickup-reviews-area .reviews .reviews-info .personal {
		width: 64%;
	}
    .pickup-reviews-area .reviews .reviews-info .personal span {
		font-size: 12px;
		text-align: right;
	}
	.pickup-reviews-area {
		margin: 0;
	}
	.pickup-reviews-area .reviews .reviews-info .tag {
		font-size: 12px;
	}
	.pickup-reviews-area .reviews-area .reviews:before {
		right: 45px;
		bottom: -22px;
		border-width: 0 22px 22px 0;
	}
	.pickup-reviews-area .reviews-area .reviews:after {
		right: 46px;
		bottom: -20px;
		border-width: 0 24px 24px 0;
	}
}
/* =========================
   ジャンルTOP-おすすめの口コミ・評価順テーブル
   ========================= */
.recommend-area h2 {
	margin-top: 32px;
	margin-bottom: 32px;
}
.recommend-area .border {
    border-left: 2px solid #333;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
	width: 100%;
}
.recommend-area figure {
	justify-items: center;
}
.recommend-area .vendor_tab .vendor_tab_body {
	background-color: unset;
}
.recommend-area .tab_box_content {
	padding: 32px;
}
.recommend-area .recommend-table .sp-400 {
	display: none;
}
.recommend-area .recommend-table {
	justify-items: center;
	filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 4px);
	background-color: #fff;
	border-radius: 24px;
	width: 100%;
	--swl-cell1-width: 120px;
}
.recommend-area .recommend-table .border-none {
	border-left: none;
	border-top: none;
}
.recommend-area .recommend-table tr:last-child th,
.recommend-area .recommend-table tr:last-child td {
	border-bottom: none;
}
.recommend-area .recommend-table .round-left {
	border-radius: 24px 0 0 0;
}
.recommend-area .recommend-table .round-right {
	border-radius: 0 24px 0 0;
}
.recommend-area .recommend-table .round-left-b {
	border-radius: 0 0 0 24px;
}
.recommend-area .recommend-table .round-right-b {
	border-radius: 0 0 24px 0;
}
.recommend-area .recommend-table .bk-color {
	background-color: #efefef;
}
.recommend-area .recommend-table tr {
	border-bottom: 2px solid #b3b3b3;
}
.recommend-area .recommend-table tr:last-child {
	border-bottom: none;
}
.recommend-area .recommend-table tr th,
.recommend-area .recommend-table tr td {
	border-right: 2px solid #b3b3b3;
}
.recommend-area .recommend-table tr th:last-child,
.recommend-area .recommend-table tr td:last-child {
	border-right: none;
}
.recommend-area table .td-center {
	text-align: center;
}
.recommend-area .recommend-table .star_area {
	justify-content: center;
}
.recommend-area .swl-cell-bg[data-icon="doubleCircle"] {
	--cell-icon-color: #d10014;
}
.recommend-area .swl-cell-bg[data-icon="circle"] {
	--cell-icon-color: #e8641a;
}
.recommend-area .swl-cell-bg[data-icon="triangle"] {
	--cell-icon-color: #3fa34d;
}
.recommend-area .recommend-table tr th:nth-of-type(1) {
    border-right: 2px solid #f2d840;
}
.recommend-area .recommend-table tr td:nth-of-type(1) {
	border-right: 2px solid #f2d840;
}
.recommend-area .recommend-table tr:last-child td:nth-of-type(1) {
	border-bottom: 2px solid #f2d840;
}
.recommend-area .recommend-table tr th:nth-of-type(2) {
	background-color: #f7e352;
	border-right: 2px solid #f2d840;
	border-top: 2px solid #f2d840;
}
.recommend-area .recommend-table tr td:nth-of-type(1) {
	background-color: #fffbe6;
}
.recommend-area .recommend-table .fs {
	font-size: 14px;
}
.recommend-area .vendor_tab .vendor_tab_btn{
  flex: 0 1 33%;
}
@media (max-width: 959px) {
	.recommend-area .tab_box_content {
	    padding: 16px;
    }
	.recommend-area .vendor_tab .vendor_tab_btn.is-active:before {
		height: 8px;
	}
    .recommend-area .border {
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
	.recommend-area .vendor_tab .vendor_tab_body_inner {
		border-radius: 0;
	}
	.recommend-area .recommend-table {
		--swl-cell1-width: 86px;
		filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 2px);
	}
	.recommend-area .recommend-table td {
		font-size: 14px;
	}
	.recommend-area .recommend-table .fs {
	    font-size: 12px;
    }
	.recommend-area .recommend-table .star_area .star {
		width: 14px;
		height: 14px;
	}
	.recommend-area .recommend-table .swell-block-button .swell-block-button__link {
		padding: 6px 10px;
	}
	.recommend-area .recommend-table .swell-block-button span {
		font-size: 11px;
	}
}
@media (max-width: 596px) {
	.recommend-area .tab_box_content {
		padding: 0;
	}
	.recommend-area .vendor_tab .vendor_tab_btn {
		font-size: 12px;
	}
	.recommend-area .vendor_tab .vendor_tab_body_inner {
		padding: 1.6em .5em;
	}
	.recommend-area .recommend-table {
		--swl-cell1-width: 70px;
	}
	.recommend-area .recommend-table .sp-400 {
	    display: block;
    }
	.recommend-area .recommend-table .star_area .star {
		width: 12px;
		height: 12px;
	}
	.recommend-area .recommend-table .star_area .review_val {
		font-size: 14px;
	}
	.recommend-area .recommend-table .star_area {
		gap: 2px;
	}
	.recommend-area .recommend-table .fs {
	    font-size: 10px;
    }
	.recommend-area .recommend-table td {
		font-size: 12px;
	}
	.recommend-area .recommend-table th,
	.recommend-area .recommend-table td {
		padding: 4px 2px;
		line-height: 1.4;
	}
}
@media (max-width: 500px) {
	.recommend-area .recommend-table .swell-block-button span {
		line-height: 1.2;
	}
	.recommend-area .recommend-table {
		--swl-cell1-width: 46px;
	}
}
/* =========================
   ジャンルTOP-3つのポイントエリア
   ========================= */
.points-area-bg {
	background-color: #fffff5 !important;
	justify-items: center;
}
.points-area {
	display: flex;
	flex-direction: column;
	gap: 20px ;
	width: 800px;
	max-width: 100%;
}
.points-area .points-accordion {
	width: 800px;
	max-width: 100%;
}
.points-area .title-font {
    color: #2f7737;
	font-size: 30px;
	padding: 4px 6px;
}
.points-area .fs-h2 {
	width: fit-content;
	place-self: center;
	margin-bottom: 0;
}
.points-area .karireru-points-icon:after {
    content: "";
    display: inline-block;
    width: 100px;
	height: 100px;
    aspect-ratio: 1 / 1;
    background: url('/cardloan/wp-content/themes/swell_child/images/karirerukun-blue.svg') no-repeat center / contain;
    position: absolute;
	top: 14px;
	left: -116px;
}
.points-area .points-q {
	color: var(--color_main);
	padding: 4px;
}
@media (max-width: 959px) {
	.points-area .karireru-points-icon:after {
		width: 80px;
		height: 80px;
		top: 34px;
		left: -80px;
    }
	.points-area .points-accordion {
	    width: 540px;
    }
}
@media (max-width: 599px) {
	.points-area-bg {
	    padding: 20px 16px;
    }
	.points-area {
		gap: 10px;
	}
	.points-area .points-accordion {
	    width: 440px;
    }
	.points-area .fs-h2 {
	    font-size: 16px;
    }
	.points-area .title-font {
		padding: 4px;
	}
	.points-area .karireru-points-icon:after {
		width: 60px;
		height: 60px;
		top: 28px;
		left: -54px;
    }
}
@media (max-width: 460px) {
    .points-area .points-accordion {
	    width: 350px;
    }
}
/* TOP5&レーダーチャート */
.genre_top5{
  background-color: var(--bar-bg);
  padding: 1rem 1rem;
}
.genere_top5inner{
      position: relative;
    }
.post-type-archive-genre .l-content{
    justify-content: center;
}
.rankTabs {
  --border: #bfbfbf;
  --text: #727272;
  --activeText: #333;
  --marker: #fff159;
  --bg: #fff;
  --radius: 999px;
  --tabH: 44px;
    position: relative;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.rankTabs__wrap {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden; /* 角丸維持 */
}

/* ★ デフォルトで横スクロール可能にしておく（スマホで確実に効かせる） */
.rankTabs__rail {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: var(--tabH);

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-right: 44px; /* scroll→表示のための余白 */
}
.rankTabs__rail::-webkit-scrollbar { display: none; }

.rankTabs__tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  padding: 0 18px;

  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
  position: relative;

  /* ★ これが無いと「幅を縮めて収めよう」としてスクロール不要になる時がある */
  flex: 0 0 auto;
}

.rankTabs__label { position: relative; z-index: 1; }

.rankTabs__tab.is-active { color: var(--activeText); }
.rankTabs__tab.is-active .rankTabs__label::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  height: 0.62em;
  bottom: -0.05em;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);    
    display: inline-block;
    height:3em;
    aspect-ratio: 80 / 30;
    z-index: -1;
    background-color: rgba(243,255,0,0.75);
    mask:  url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2030%22%3E%20%3Cpath%20d%3D%22M38.44.18c1.45-.35%202.8-.14%204.16.14.69.14%201.24.81%201.64%202.14.54%201.84.93%203.84%201.16%205.98.06.51.05%201.06.06%201.59.02.79-.14%201.38-.44%201.76-.32.41-.64.79-.98%201.09-.58.51-1.18.94-1.77%201.41-.17.14-.35.27-.52.42-.04.04-.1.17-.09.24.01.2.1.23.17.23.16%200%20.31-.01.47-.05.99-.22%201.98-.44%202.96-.67.73-.17%201.45-.39%202.18-.56.7-.17%201.41-.3%202.11-.47q1.05-.255%202.1-.54c.55-.14%201.09-.3%201.63-.44%201.09-.28%202.18-.52%203.27-.81%201.06-.28%202.13-.62%203.19-.92.6-.17%201.19-.31%201.79-.47.62-.17%201.24-.36%201.87-.54.49-.14.98-.31%201.48-.44%201.06-.28%202.13-.54%203.19-.82.67-.18%201.35-.41%202.02-.57.73-.18%201.46-.31%202.19-.46.99-.2%201.98-.42%202.97-.57.89-.13%201.78-.17%202.67-.25H78c.22.02.41.21.55.59.15.41.3.82.42%201.27.42%201.51.73%203.14.93%204.87.05.4.08.81.09%201.22.04%201.33-.08%201.54-.65%201.6-.94.1-1.88.21-2.82.38-.89.15-1.77.37-2.65.56-.7.15-1.41.29-2.11.46-.65.15-1.3.32-1.95.49-.7.19-1.4.39-2.1.58-.52.14-1.04.26-1.56.42-1.01.3-2.02.62-3.03.91-1.04.29-2.08.54-3.11.83-.62.17-1.24.37-1.87.55-.49.14-.99.28-1.48.41-.65.16-1.3.3-1.95.46-.7.18-1.4.39-2.1.57-.49.13-.99.26-1.48.37-.7.16-1.41.3-2.11.47-.75.17-1.51.36-2.26.54-.7.17-1.4.33-2.11.49-.94.22-1.87.44-2.81.64-.75.16-1.51.3-2.27.46-.81.17-1.61.37-2.42.55-.68.16-1.35.32-2.03.47-.99.22-1.98.45-2.96.66-.75.16-1.51.29-2.27.46-.75.17-1.51.36-2.26.54-.73.17-1.46.33-2.18.49-.91.2-1.82.45-2.73.59-1.15.17-2.29.47-3.44.54-.69.04-1.14-.57-1.49-1.82-.54-1.92-.92-3.98-1.13-6.2-.02-.23-.02-.47-.03-.7-.04-.82.12-1.38.44-1.7.31-.31.63-.59.95-.84%201.51-1.19%203.04-2.18%204.57-3.17%201.31-.84%202.62-1.65%203.93-2.48.2-.13.4-.3.59-.46.02-.02.05-.11.04-.13-.02-.08-.05-.22-.08-.22-.16-.03-.31-.06-.47-.01-1.06.3-2.13.61-3.19.92-.96.27-1.92.53-2.88.81-.85.26-1.71.54-2.56.83-.83.28-1.65.59-2.48.9-1.06.39-2.12.75-3.17%201.21-1.72.75-3.43%201.54-5.15%202.36-.97.46-1.94.97-2.9%201.52-.73.42-1.47.84-2.17%201.54-.28.28-.51.1-.7-.4-.13-.36-.26-.73-.38-1.13-.48-1.71-.82-3.56-1-5.56-.03-.29-.04-.58-.05-.88-.01-.58.09-1.07.33-1.31.38-.38.76-.78%201.16-1.05.93-.63%201.85-1.24%202.79-1.76a50%2050%200%200%201%205.37-2.55c1.36-.55%202.72-1.14%204.09-1.65%201.19-.44%202.38-.8%203.57-1.19.93-.31%201.86-.62%202.79-.91.57-.18%201.14-.32%201.71-.47.52-.14%201.04-.26%201.56-.41.65-.18%201.3-.39%201.94-.56.49-.14.99-.26%201.48-.37.73-.16%201.46-.29%202.19-.45.83-.18%201.66-.38%202.5-.56.21-.05.42-.07.63-.11l1.25-.24c.23-.04.47-.08.7-.11.52-.09%201.04-.18%201.56-.26.29-.04.57-.07.86-.1.68-.05%201.36-.1%201.95-.14Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    -webkit-mask: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2030%22%3E%20%3Cpath%20d%3D%22M38.44.18c1.45-.35%202.8-.14%204.16.14.69.14%201.24.81%201.64%202.14.54%201.84.93%203.84%201.16%205.98.06.51.05%201.06.06%201.59.02.79-.14%201.38-.44%201.76-.32.41-.64.79-.98%201.09-.58.51-1.18.94-1.77%201.41-.17.14-.35.27-.52.42-.04.04-.1.17-.09.24.01.2.1.23.17.23.16%200%20.31-.01.47-.05.99-.22%201.98-.44%202.96-.67.73-.17%201.45-.39%202.18-.56.7-.17%201.41-.3%202.11-.47q1.05-.255%202.1-.54c.55-.14%201.09-.3%201.63-.44%201.09-.28%202.18-.52%203.27-.81%201.06-.28%202.13-.62%203.19-.92.6-.17%201.19-.31%201.79-.47.62-.17%201.24-.36%201.87-.54.49-.14.98-.31%201.48-.44%201.06-.28%202.13-.54%203.19-.82.67-.18%201.35-.41%202.02-.57.73-.18%201.46-.31%202.19-.46.99-.2%201.98-.42%202.97-.57.89-.13%201.78-.17%202.67-.25H78c.22.02.41.21.55.59.15.41.3.82.42%201.27.42%201.51.73%203.14.93%204.87.05.4.08.81.09%201.22.04%201.33-.08%201.54-.65%201.6-.94.1-1.88.21-2.82.38-.89.15-1.77.37-2.65.56-.7.15-1.41.29-2.11.46-.65.15-1.3.32-1.95.49-.7.19-1.4.39-2.1.58-.52.14-1.04.26-1.56.42-1.01.3-2.02.62-3.03.91-1.04.29-2.08.54-3.11.83-.62.17-1.24.37-1.87.55-.49.14-.99.28-1.48.41-.65.16-1.3.3-1.95.46-.7.18-1.4.39-2.1.57-.49.13-.99.26-1.48.37-.7.16-1.41.3-2.11.47-.75.17-1.51.36-2.26.54-.7.17-1.4.33-2.11.49-.94.22-1.87.44-2.81.64-.75.16-1.51.3-2.27.46-.81.17-1.61.37-2.42.55-.68.16-1.35.32-2.03.47-.99.22-1.98.45-2.96.66-.75.16-1.51.29-2.27.46-.75.17-1.51.36-2.26.54-.73.17-1.46.33-2.18.49-.91.2-1.82.45-2.73.59-1.15.17-2.29.47-3.44.54-.69.04-1.14-.57-1.49-1.82-.54-1.92-.92-3.98-1.13-6.2-.02-.23-.02-.47-.03-.7-.04-.82.12-1.38.44-1.7.31-.31.63-.59.95-.84%201.51-1.19%203.04-2.18%204.57-3.17%201.31-.84%202.62-1.65%203.93-2.48.2-.13.4-.3.59-.46.02-.02.05-.11.04-.13-.02-.08-.05-.22-.08-.22-.16-.03-.31-.06-.47-.01-1.06.3-2.13.61-3.19.92-.96.27-1.92.53-2.88.81-.85.26-1.71.54-2.56.83-.83.28-1.65.59-2.48.9-1.06.39-2.12.75-3.17%201.21-1.72.75-3.43%201.54-5.15%202.36-.97.46-1.94.97-2.9%201.52-.73.42-1.47.84-2.17%201.54-.28.28-.51.1-.7-.4-.13-.36-.26-.73-.38-1.13-.48-1.71-.82-3.56-1-5.56-.03-.29-.04-.58-.05-.88-.01-.58.09-1.07.33-1.31.38-.38.76-.78%201.16-1.05.93-.63%201.85-1.24%202.79-1.76a50%2050%200%200%201%205.37-2.55c1.36-.55%202.72-1.14%204.09-1.65%201.19-.44%202.38-.8%203.57-1.19.93-.31%201.86-.62%202.79-.91.57-.18%201.14-.32%201.71-.47.52-.14%201.04-.26%201.56-.41.65-.18%201.3-.39%201.94-.56.49-.14.99-.26%201.48-.37.73-.16%201.46-.29%202.19-.45.83-.18%201.66-.38%202.5-.56.21-.05.42-.07.63-.11l1.25-.24c.23-.04.47-.08.7-.11.52-.09%201.04-.18%201.56-.26.29-.04.57-.07.86-.1.68-.05%201.36-.1%201.95-.14Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
}

.rankTabs__panels { margin-top: 2rem; }
.rankTabs__panel { padding: 1rem 1rem;border: var(--border_main);border-radius: 10px; background-color: #fff;}
.rankTabs__panel:has(.panel_speed){
  background: #fff;
}
.rankTabs__hint {
  position: absolute;
  top: 12vw;
  right: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: #8a8a8a;
  letter-spacing: 0.02em;
  pointer-events: none;
  background: rgba(255,255,255,0.85);
  padding: 2px 6px;
  border-radius: 999px;
  align-items: center;
  display: none; /* JSで必要時だけ表示 */
}
.rankTabs__hint img{
    margin-left: 0.5rem;
}
.fuwafuwa-yoko {
  animation: fuwafuwa-yoko 3s infinite ease-in-out;
}

@keyframes fuwafuwa-yoko {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(15px); /* 右に15px動く */
  }
}

.rankTabs__fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
  display: none; /* JSで必要時だけ表示 */
}

/* PCは5つ均等割りでスクロール不要にする */
@media (min-width: 769px) {
  .rankTabs__rail {
    overflow-x: visible;
    padding-right: 0;
  }
  .rankTabs__tab {
    flex: 1 1 0;
    padding: 0 10px;
  }
  .rankTabs__hint,
  .rankTabs__fade {
    display: none !important;
  }
}

.rankTabs__tab:focus-visible {
  outline: 3px solid rgba(0, 120, 212, 0.35);
  outline-offset: -3px;
}
.rankTabs__panel .flex-wrap{
    justify-content: space-between;
    padding-top: 1rem;
}

.rank_wrap{
  display: flex;

}
.rankTabs__panel .flex{
  /* flex: 1; */
}
.panel-all-inner{
    display: flex;
    flex: 3;
}
.panel-allbox{
    margin-left: 1rem;
}
.crownnum{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-right: 1rem;
    font-weight: 500;
}
.panel-all .check_list.points li{
      background-color: #fafafa;
}
/* =========================
   chart
   ========================= */

.chartWrap {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	position: relative;
}
.chartWrap .chart-container {
	position: relative;
	width: 100%;
	padding-top: 100%;
}
.chartWrap .chart-container svg {
	position: absolute;
	top: 1%;
	left: 1%;
	width: 98%;
	height: 98%;
}

.chartWrap .label-text {
	position: absolute;
	text-align: center;
	font-size: 14px;
	transform: translate(-50%, -50%);
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
}
.chartWrap .label-text .num{
	display: block;
	font-size: 1.2em;
}

.chartWrap .center-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		line-height: 1.4;
		pointer-events: none;
}
.chartWrap .center-text .title{
  font-size: 12px;margin: 0;
}
.chartWrap .center-text .date{
	 font-size:2rem;
	 font-weight: bold;
	 margin: 0;
}
.chartWrap{
      width: 80%;
}
.data_chartarea{
  display: flex;
  gap: 10px;
}
.data_chartarea{
  border-bottom: none;
}
.chartWrap .chart-container{
      padding-top: 80%;
}
.data_chartarea{
  display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--color_gray1);
    padding-bottom: 0.6rem;
  }
.data_chartarea-last{
  border-bottom: none;
}
.data_chartarea .date_area ul{
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}
.rankTabs__panel .chart_area{
 flex: 0.7;
 margin-top: -3rem;
}
.chartWrap .center-text .title {
  font-size: 12px;
}
.chartWrap .center-text .date{
  font-size: 1.6rem;
}
@media(max-width: 480px) {
	.chartWrap {
		width: 90%;
	}
	.chartWrap .label-text {
	  font-size: 12px;
	  white-space: normal;
	  width: 70px;
	}
}
@media (max-width: 1000px){
  .rankTabs__panel .chart_area{
        margin-top: -2rem;
  }
}
@media (max-width: 768px){
  .data_chartarea{
    flex-direction: column-reverse;
  }
  .data_chartarea .date_area ul{
    margin-top: 1rem;
  }
    .rankTabs__panel .chart_area{
    margin-top: -1rem;
  }
  .panel-all-inner{
    flex: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }
  .rank_wrap{
    flex-direction: column;
  }
  .panel-allbox{
    flex: 1;
  }
  .crownnum img{
    display: block;
    margin: 0 auto;
  }
  .rankTabs__panel .cta_button_area{
    flex: 1;
    margin-top: 1rem;
  }
  .compare_area .compare_area_ranking .compare_area_list li a{
    min-width: 202px;
  }
  .review_val5::before{
    width: 60px;
  }   
}
@media (max-width: 480px){
  .data_chartarea .chartWrap{
    width: 80%;
  }
}
/* スピードのグラフ */
.panel_speed{
      max-width: 920px;
    }

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

    /* PC: 5カラム */
    .speed_row{
      display:grid;
      grid-template-columns: 30px 300px 100px 1.2fr 28px; /* rank | bar | time | product | arrow */
      align-items:center;
      column-gap: 14px;
      min-height: 68px;
      border-top: 1px solid var(--row-border);
      position:relative;
    }
    .speed_row:first-child{ border-top:0; }

    .speed_rank{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      flex-direction:column;
    }
    .speed_rank .crown2{ font-size:18px; line-height:1; }
    .speed_rank .num{ font-weight:700; }

    .barwrap{
      position:relative;
      height: 22px;
      background: var(--bar-bg);
      overflow:hidden;
    }
    .bar{
      position:absolute;
      inset:0 auto 0 0;
      width: 0%;
      background: linear-gradient(90deg, #bdbdbd, #e0e0e0); /* デフォはグレー */
      transition: width .35s ease;
    }

    /* 1位だけ緑 */
    .speed_row[data-rank="1"] .bar{
      background: linear-gradient(90deg, #43A047, #9CCC65);
    }

    .speed_time{
      font-weight:700;
      color:var(--text);
      display:flex;
      align-items:center;
      gap:2px;
      white-space:nowrap;
    }
    .speed_time small{ font-weight:600; color:var(--muted); }
    .speed_time .accent{ color:#d32f2f; }

    .product{
      text-align:right;
      font-weight:700;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .speed_arrow{
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background:#2b2b2b;
      display:grid;
      place-items:center;
    }
    .speed_arrow::before{
      content:"›";
      color:#fff;
      font-size:18px;
      line-height:1;
      transform: translateX(1px);
      margin-bottom: 2px;
    }

    /* 1位用 吹き出し */
    .bubble{
      display:inline-flex;
      align-items:center;
      gap:2px;
      padding:2px 10px;
      border: 2px solid #7e7e7e;
      background:#fff;
      font-weight:800;
      position:relative;
      margin-left: 10px;
      align-items: baseline;
    }
    .bubble::before{
      content:"";
      position:absolute;
      left:-10px;
      top:50%;
      transform:translateY(-50%);
      width:0; height:0;
      border-top:8px solid transparent;
      border-bottom:8px solid transparent;
      border-right:10px solid #7e7e7e;
    }
    .bubble::after{
      content:"";
      position:absolute;
      left:-7px;
      top:50%;
      transform:translateY(-50%);
      width:0; height:0;
      border-top:7px solid transparent;
      border-bottom:7px solid transparent;
      border-right:9px solid #fff;
    }
    .bubble .big_t{
        font-size: 1.6rem;
    }
    /* スマホ */
    @media (max-width: 768px){
      .speed_row{
        grid-template-columns: 1fr 34px;
        grid-template-areas:
          "head arrow"
          "bar  bar";
        row-gap: 10px;
        padding: 10px 0;
        min-height: auto;
      }

      .speed_rank{ grid-area: head; flex-direction:row; justify-content:flex-start; gap:10px; padding-left: 6px; }
      .speed_rank .num{ font-size:14px; }

      .product{ grid-area: head; text-align:left; font-size:14px; font-weight:800;margin-left: 5rem;}

      .speed_head{
        grid-area: head;
        display:flex;
        align-items:center;
        gap:10px;
        min-width: 0;
      }
      .speed_head .product{ flex:1; min-width:0; }

      .speed_arrow{ grid-area: arrow; justify-self:end; margin-right: 6px; }

      .barwrap{ grid-area: bar; height: 18px; margin: 0 6px; }

      .speed_time{
        position:absolute;
        right: 40px;
        top: 12px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 12px;
        gap: 2px;
      }
      .speed_time:has(.bubble){
        background: none;
        border: none;
        top: 0;
      }
      .bubble{
        padding: 4px 6px;
      }
      .bubble .big_t{
        font-size: 1.0rem;
      }
      
    }
    /* 低金利 */    
    .rankTabs__panel:has(.rate_panel){
      background-color: #fff;
    }

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

    /* Desktop layout: [左:順位+画像+商品名] [中央:レンジバー(+目盛)] [右:吹き出し] */
    .rate_panel .row{
      display:grid;
      grid-template-columns: 160px 1fr 190px;
      gap: 14px;
      align-items:center;
      padding: 12px 0px;
      border-top: 1px solid var(--row-border);
    }
    .rate_panel .row:first-child{ border-top:0; }

    .rate_panel .meta{
      display:grid;
      grid-template-columns: 30px 120px;
      gap: 10px;
      align-items:center;
      min-width:0;
    }

    .rate_panel .rank{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    .rate_panel .rank .crown{ font-size:18px; line-height:1; }
    .rate_panel .rank .num{ font-weight:900; font-size:18px; }

    .rate_panel .thumb{
      width: 100%;
      display: block;
    }
    .rate_panel .thumb figure{
      display: block;
    width: 100%;
    margin: 0
    }
    .rate_panel .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

    .rate_panel .name{
      font-weight:800;
      font-size: 13px;
      line-height: 1.2;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    /* chart with axis */
    .rate_panel .chart{
      position:relative;
      display:grid;
      grid-template-rows: 18px 54px; /* axis labels row + bar row */
      gap: 6px;
      padding: 0 10px;
      --ticks: 6;
      --zeroPct: 0;
    }

    .rate_panel .axis{
      position:relative;
      height: 18px;
      overflow: visible;
    }
    .rate_panel .axis .tick{
      position:absolute;
      top: 0;
      transform: translateX(-50%);
      font-size: 12px;
      color: var(--muted);
      white-space:nowrap;
      user-select:none;
    }
    .rate_panel .axis .tick.zero{ font-weight:800; color: var(--text); }

    .rate_panel .plot{
      position:relative;
      height: 54px;
      display:flex;
      align-items:center;
      background:
        repeating-linear-gradient(
          to right,
          var(--grid2) 0,
          var(--grid2) 1px,
          transparent 1px,
          transparent calc(100%/var(--ticks))
        );
      border-radius: 8px;
    }

    .rate_panel .plot::before{
      content:"";
      position:absolute;
      left: calc(var(--zeroPct) * 1%);
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--zero);
      transform: translateX(-1px);
      pointer-events:none;
      z-index: 10;
    }

    .rate_panel .lane{
      position:relative;
      width:100%;
      height: 18px;
      background: var(--bar-bg);
      border-radius: 999px;
      overflow:hidden;
    }

    .rate_panel .range{
      position:absolute;
      top:0; bottom:0;
      left:0;
      width:0;
      border-radius: 999px;
      min-width: 6px;
    }

    .rate_panel .row[data-rank="1"] .range{ background: var(--range1); }
    .rate_panel .row:not([data-rank="1"]) .range{ background: var(--rangeN); }

    .rate_panel .bubble{
      position:relative;
      border: 2px solid var(--bubble-border);
      background:#fff;
      padding: 10px 2px;
      display:flex;
      align-items:center;
      justify-content: center;
      gap: 8px;
      min-height: 40px;
    }
    .rate_panel .bubble::before{
      content:"";
      position:absolute;
      left:-12px;
      top:50%;
      transform:translateY(-50%);
      width:0; height:0;
      border-top:10px solid transparent;
      border-bottom:10px solid transparent;
      border-right:12px solid var(--bubble-border);
    }
    .rate_panel .bubble::after{
      content:"";
      position:absolute;
      left:-9px;
      top:50%;
      transform:translateY(-50%);
      width:0; height:0;
      border-top:9px solid transparent;
      border-bottom:9px solid transparent;
      border-right:11px solid #fff;
    }

    .rate_panel .pill{
      background: var(--pill);
      color:#fff;
      font-weight:800;
      border-radius: 999px;
      padding: 2px 10px;
      font-size: 12px;
      letter-spacing:.02em;
      white-space:nowrap;
    }

    .rate_panel .rangeText{
      font-weight:900;
      font-size: 20px;
      color: var(--accent);
      white-space:nowrap;
    }
    .rate_panel .rangeText .pct{ font-size: .65em; margin-left:2px; }
    .rate_panel .rangeText .sep{ color: var(--muted); font-weight:800; margin: 0 6px; }

    /* Mobile */
    @media (max-width: 720px){
      .rate_panel .row{ grid-template-columns: 1fr; gap: 10px; }
      .rate_panel .meta{ grid-template-columns: 30px 1fr; }
      .rate_panel .name{ font-size: 14px;margin-left: 1rem; }

      .rate_panel .bubble{ justify-content:space-between;padding: 4px 4px; }
      .rate_panel .bubble::before, .rate_panel .bubble::after{ display:none; }
      .rate_panel .rangeText{ font-size: 22px; }

      .rate_panel .chart{ grid-template-rows: 16px 42px; }
      .rate_panel .axis{ height: 16px; }
      .rate_panel .axis .tick{ font-size: 11px; }
      .rate_panel .plot{ height: 42px; }
      .rate_panel .lane{ height: 16px; }
      .rate_panel .rank .crown{
            font-size: 10px;
      }.rate_panel .rank .num {
        font-size: 16px;
      }
      .lowrate_box{
        display: flex;
      }
      .rate_panel .thumb{
            width: 30%;
      }
    }
/* バレない */
.panel-secret .cta_button_area{
  display: block;
  margin-left: 2rem;
}
.panel-secret .panel-all-inner{
  justify-content: space-between;
}
.panel-secret .reason{
  margin-top: 1rem;
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.panel-secret .reason span{
  background: var(--activeText);
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 16px;
}
.panel-secret .reason p{
  margin-top: 0.6rem;
  margin-bottom: 1rem;
}
@media (max-width: 768px){
  .panel-secret .cta_button_area{
    display: flex;
    justify-content: right;
    width: 100%;
    margin-top: -0.4rem;
  }
  .panel-secret  .cta_button_area [class*=is-style-btn_] {
    margin: 0 0;
  }
  .panel-secret .reason{
    margin-top: 0;
  }
}
/* ===== 無利息期間Panel ===== */
.interest-panel .interest-list{
  list-style:none;
  margin:0;
  padding:0;
}
.interest-panel .interest-row{
  display:grid;
  grid-template-columns: 30px 110px 1fr;
  grid-template-areas:
    "rank thumb top"
    "rank thumb period";
  gap: 0px 8px;
  padding: 10px 10px;
  border-top: 1px solid var(--row-border);
  align-items:start;
}
.interest-panel .interest-row:first-child{ border-top:0; }

.interest-panel .interest-rank{ grid-area: rank; }
.interest-panel .interest-thumb{ grid-area: thumb; }
.interest-panel .interest-top{ grid-area: top; }
.interest-panel .interest-periodline{ grid-area: period; }

/* ===== Rank ===== */
.interest-panel .interest-rank{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap: 6px;
  padding-top: 4px;
}
.interest-panel .interest-rank .rank{
  font-weight:900;
  font-size: 14px;
  color:#111;
}
.interest-panel .crown{ font-size: 18px; line-height:1; }
.interest-panel .crown--gold{ color:#d6a600; }
.interest-panel .crown--silver{ color:#9a9a9a; }
.interest-panel .crown--bronze{ color:#b66a2c; }
.interest-panel .crown--red{ color:#d33a2c; }

/* ===== Thumb ===== */
.interest-panel .interest-thumb{
  width: 100px;
  height: 100px;
  border: 1px solid #cfcfcf;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.interest-panel .interest-thumb img{
  width:100%;
  height:auto;
  object-fit:cover;
}

/* ===== Top (name/company + btn) ===== */
.interest-panel .interest-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-width:0;
}
.interest-panel .interest-body{
  min-width:0;
}
.interest-panel .interest-name{
  font-weight:900;
  font-size: 16px;
  line-height:1.2;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.interest-panel .interest-company{
  font-size: 11px;
  font-weight:700;
  color: var(--muted);
  margin-top: 3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* ===== CTA Button ===== */
.interest-panel .interest-cta{
  display:flex;
  justify-content:flex-end;
  flex: 0 0 auto;
}
.interest-panel .interest-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 18px;
  min-width: 150px;
  border-radius: 999px;
  border: 2px solid #111;
  color:#fff;
  font-weight:900;
  font-size: 13px;
  text-decoration:none;
  background: var(--btn-grad);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.15);
}
.interest-panel .interest-btn .ext{
  display:inline-grid;
  place-items:center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(255,255,255,.15);
  font-weight:900;
}
/* ===== Period line (bar left + pill right) ===== */
.interest-panel .interest-periodline{
  position:relative;
  display:flex;
  align-items:center;
  gap: 12px;
  margin: -10px 0 0.4rem 0;
}
/* left: vertical line + bar */
.interest-panel .interest-plot{
  position:relative;
  flex: 1 1 auto;
  height: 22px;
  display:flex;
  align-items:center;
  padding-left: 14px; /* for vertical line */
  max-width: 520px;
}
.interest-panel .interest-plot::before{
  content:"";
  position:absolute;
  left: 6px;
  top: -10px;
  bottom: -10px;
  width: 2px;
  background:#777;
}
.interest-panel .interest-bar{
  height: 22px;
  width: var(--barW, 120px); /* JSが上書きする想定 */
  background: var(--bar-gray);
}
/* right: pill */
.interest-panel .interest-pill{
  margin-left:auto;
  flex: 0 0 auto;
  max-width: 55%;
}
.interest-panel .interest-period{
  display:inline-block;
  padding: 6px 12px;
  border: 2px solid #d6d6d6;
  border-radius: 999px;
  background:#fff;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
  color:#111;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.interest-panel .interest-period .day{ font-weight: 900; }
.interest-panel .mininote{ font-size: 12px; font-weight: 900; margin-left:2px; }
/* ===== 1位 special =====*/
.interest-panel .interest-row.is-top .interest-plot{
  max-width: none;
}
.interest-panel .interest-row.is-top .interest-bar{
  width: 100% ;
  background: var(--bar-top1);
}
.interest-panel .interest-row.is-top .interest-pill{ display:none; }

/* Center label from data-interest */
.interest-panel .interest-row.is-top .interest-periodline::after{
  content: attr(data-interest);
  position:absolute;
  left:0; right:0;
  top: 50%;
  transform: translateY(-50%);
  text-align:center;
  color:#fff;
  font-weight:900;
  font-size:14px;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* ===== Mobile (添付デザイン寄せ) =====
  上段：rank thumb 右ブロック（name/company + btn下）
  下段：期間バー（左）＋期間ピル（右）
*/
@media (max-width: 720px){
  .interest-panel .interest-row{
    grid-template-columns: 30px 90px 1fr;
    grid-template-areas:
      "rank thumb top"
      "period period period";
    gap: 2px 8px;
    padding: 6px 0px;
  }
  .interest-panel .interest-thumb{
    width: 90px;
    height: 90px;
  }
  /* 右ブロックを縦積み：会社名→会社→ボタン */
  .interest-panel .interest-top{
    flex-direction:column;
    align-items:flex-start;
    gap: 8px;
  }
  .interest-panel .interest-cta{
    justify-content:flex-start;
    width:100%;
  }
  .interest-panel .interest-btn{
    min-width: 160px;
    padding: 10px 14px;
  }
  /* 下段の期間行 */
  .interest-panel .interest-periodline{
    margin-top: 8px;
    gap: 10px;
  }
  /* 左バーは短めに、右ピルは右寄せ */
  .interest-panel .interest-plot{
    max-width: none;
    width: 55%;
    /* flex: 0 0 55%; */
  }
  /* スマホはピルが短いので文字を少し小さく */
  .interest-panel .interest-period{
    font-size: 12.5px;
  }
  .interest-panel .cta_button_area [class*=is-style-btn_]{
    margin: 0;
  }
}
.karireru-announce{
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
}
.karireu-fuki{
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 300px;
    margin-bottom: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #fff;
    color: var(--activeText);
    margin-left: 6rem;
}
.karireu-fuki::before{
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-color: #fff;
    clip-path: polygon(0 0, 60% 0, 50% 100%);
    content: '';
}
.karireru-announce figure{
  text-align: center;
}
@media (max-width: 720px){
  .karireu-fuki{
    margin-left: 2rem;
  }
  .karireru-announce figure img{
    width: 40%
  }
}
/* ボタン */
.icon-crown::before{
  content: "";
    display: inline-block;
    width: 70%;
    margin: auto;
    aspect-ratio: 1 / 1;
    background: url(/cardloan/wp-content/themes/swell_child/images/crown1.svg) no-repeat center / contain;
    
}
/*  */

.rc-wrap{
  max-width: 980px;
  margin: 18px auto;
  padding: 0 10px;
}

/* ===== 左スクロールバー =====
  scroll要素を rtl にすると scrollbar が左に来ることが多い（主要ブラウザ）
  中身は inner で ltr に戻す
*/
.rc-scroll{
  max-height: 78vh;
  overflow-y: auto;
  padding: 10px;            /* 余白は inner で付ける */
}
.rc-scroll--left{
  direction: rtl;        /* ★ここがポイント */
}
.rc-scroll-inner{
  direction: ltr;        /* 中身は通常通り */
  padding-left: 6px;     /* 左にスクロールバーが来るので内側余白 */
  padding-right: 2px;
}
/* ===== カード ===== */
.rc-card{
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 12px 12px 10px;
  margin-bottom: 14px;
}

/* ===== head（①） ===== */
.rc-head{
  display:grid;
  grid-template-columns: 74px 1fr 34px;
  gap: 10px;
  align-items:start;
}

.rc-thumb{
  width: 74px;
  height: 74px;
  border: 1px solid #d0d0d0;
  overflow:hidden;
  background:#fff;
}
.rc-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.rc-titlebox{ min-width:0; }
.rc-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rc-company{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rc-rating{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-top: 6px;
}
.rc-stars{
  display:inline-flex;
  gap: 2px;
  font-size: 14px;
  line-height:1;
}
.star.is-on{ color:#f2b800; }
.star.is-off{ color:#cfcfcf; }
.rc-score{
  font-weight: 900;
  font-size: 14px;
  color:#222;
}
.rc-arrow{
  justify-self:end;
  align-self:center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  text-decoration:none;
  color:#111;
  display:grid;
  place-items:center;
}
.rc-arrow-icon{
  font-size: 28px;
  line-height:1;
}
/* ===== body（PCは左右、スマホは縦） ===== */
.rc-body{
  display:grid;
  grid-template-columns: 0.8fr 1fr;   /* 左口コミ / 右チャート */
  gap: 12px;
  margin-top: 10px;
  align-items:stretch;
}
/* ===== ③ 口コミ ===== */
.rc-review{
 background-color: var(--color_base);
  padding: 10px;
  /* display:grid; */
  /* grid-template-columns: 210px 1fr; */
  gap: 10px;
  min-height: 160px;
}
.rc-user{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.rc-user-icn{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #e6e6e6;
  display:grid;
  place-items:center;
  font-weight: 900;
  color:#555;
  flex: 0 0 auto;
}
.rc-user-name{
  font-weight: 900;
  font-size: 14px;
}
.rc-user-note{
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.rc-tags{ margin-top: 6px; }
.rc-tag{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #3aa63a;
  color:#fff;
  font-size: 11px;
  font-weight: 900;
}
.rc-user-kv{
  margin-top: 8px;
  font-size: 11px;
  color:#333;
  font-weight: 700;
  display:grid;
  gap: 3px;
}
.rc-mini-stars{
  margin-top: 8px;
  font-size: 12px;
  display:inline-flex;
  gap: 2px;
}
.rc-review-text{
  margin:0;
  font-size: 12px;
  line-height: 1.55;
  color:#222;
  background: var(--soft2);
  border: 1px dashed #e0e0e0;
  padding: 10px;
  min-height: 92px;
}
.rc-review-foot{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.rc-more{
  border: 1px solid #d0d0d0;
  background:#fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
}
.rc-more .plus{
  display:inline-grid;
  place-items:center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  margin-left: 6px;
  background:#f0f0f0;
}
.rc-date{
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  white-space:nowrap;
}
/* ===== ② チャート ===== */
.rc-chart{
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 6px;
  min-height: 160px;
}
.rc-chart-inner{
  width: 100%;
  max-width: 420px;
}
.rc-radar{
  width: 100%;
  height: auto;
  display:block;
}
/* SVGの文字はテーマの影響を受けやすいので強制 */
.rc-radar text{
  font-size: 11px !important;  /* 10〜12で好み */
  font-weight: 700;
  fill: #333;
}
/* ===== Mobile: 並び順 ①→②→③ ===== */
@media (max-width: 720px){
  .rc-body{
    grid-template-columns: 1fr;
  }
  .rc-chart{ order: 1; }
  .rc-review{ order: 2; }

  .rc-review{
    grid-template-columns: 1fr;
  }
}
.tab_notes{
  font-size: 10px;
    text-align: right;

}