@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
:root {
	--base: #8a5e1b;
	--base-dark: #5c3d0a;
	--gold: #c8922a;
	--gold-light: #f0c060;
	--gold-bg: #fff8ee;
	--red: #e3130e;
	--navy: #1a2550;
	--bg: #f8f3e6;
	--white: #FFFFFF;
	--gray: #f5f5f5;
	--border: #e0d4be;
	--text: #282b45;
	--shadow: 0 4px 20px rgba(0,0,0,0.12);
	--shadow-lg: 0 8px 40px rgba(0,0,0,0.18);
	--shadow-gold: 0 4px 16px rgba(200,146,42,0.25);
	--fs-body: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
	--fs-small: clamp(0.75rem, 0.75rem + 0.15vw, .8rem);
	--fs-regular: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	--fs-medium: clamp(1.2rem, 1rem + 1vw, 2rem);
	--fs-large: clamp(2rem, 1.5rem + 2vw, 3rem);
	--section-gap: 48px;
	--card-pad: 20px;
}

.pcOnly {
	display: inherit;
}
@media screen and (max-width: 640px) {
	.pcOnly {
		display: none;
	}
}

.spOnly {
	display: none;
}
@media screen and (max-width: 640px) {
	.spOnly {
		display: inherit;
	}
}

* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	-webkit-user-select: none;
	-moz-user-select: none;
	 -ms-user-select: none;
	     user-select: none;
	font-size: 2rem;
	color: var(--text);
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	background-color: #eeeeee;
	letter-spacing: 0.05em;
	line-height: 1.8;
	text-align: justify;
	text-justify: inter-ideograph;
	line-break: strict;
	word-break: normal;
}
@media (max-width: 767px) {
	body {
		font-size: 3.8vw;
	}
}

a {
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	text-decoration: none;
	background-color: transparent;
}

*,
::after,
::before {
	-webkit-box-sizing: inherit;
	        box-sizing: inherit;
}

img {
	width: 100%;
	vertical-align: bottom;
}

a:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}

.container {
	max-width: 750px;
	margin: 0 auto;
	padding-bottom: 4em;
}

@media (max-width: 767px) {
	.inner img {
		max-width: 90%;
	}
	.inner2 {
		padding-top: 2em;
	}
}
@media (min-width: 768px) {
	.inner {
		width: 80%;
		margin: auto;
	}
	.inner2 {
		width: 80%;
		margin: auto;
		padding-top: 40px;
	}
}
/* ==============================
   見出し統一スタイル
============================== */
.sec_ttl {
	margin: var(--section-gap) 0 16px 0;
}
@media (max-width: 767px) {
	.sec_ttl {
		margin: 1.5em 0 0.5em 0;
	}
}

.sec_ttl--gold {
	position: relative;
}
.sec_ttl--gold::before {
	content: "";
	display: block;
	height: 3px;
	background: -webkit-gradient(linear, left top, right top, from(var(--gold)), color-stop(var(--gold-light)), to(var(--gold)));
	background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
	border-radius: 2px;
	margin-bottom: 4px;
}

.sec_ttl--mid {
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--text);
	border-left: 4px solid var(--gold);
	padding-left: 12px;
	margin: 24px 0 12px;
}

.sec_ttl--sub {
	font-size: 1.2rem;
	color: #888;
	font-weight: normal;
	margin: 8px 0;
}

.sec_note {
	font-size: 1.1rem;
	color: #888;
	background: var(--gray);
	border-left: 3px solid var(--gold);
	padding: 8px 14px;
	margin: 0 10px 24px;
	line-height: 1.5;
}
@media (max-width: 767px) {
	.sec_note {
		font-size: 3vw;
	}
}

/* ==============================
   ① 選定基準カード
============================== */
.criteria-cards {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 16px;
	padding: 0 10px 24px;
}
@media (max-width: 767px) {
	.criteria-cards {
		gap: 0.5em;
	}
}

.criteria-card {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	background: var(--white);
	border: 1px solid var(--border);
	border-top: 3px solid var(--gold);
	border-radius: 8px;
	padding: 0 var(--card-pad) var(--card-pad);
	-webkit-box-shadow: var(--shadow);
	        box-shadow: var(--shadow);
}
@media (max-width: 767px) {
	.criteria-card {
		padding: 0 0.5em 0.5em;
	}
}
.criteria-card__icon {
	font-size: 6.4rem;
	margin-bottom: 8px;
	text-align: center;
}
@media (max-width: 767px) {
	.criteria-card__icon {
		font-size: 9.6vw;
	}
}
.criteria-card__ttl {
	font-weight: bold;
	color: var(--base-dark);
	margin-bottom: 0.5em;
	background: var(--gold-light);
	padding: 4px 8px;
	border-radius: 0.5em;
	display: block;
	text-align: center;
}
.criteria-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 0.5em;
}
.criteria-card__list li {
	font-size: 1.6rem;
	padding: 3px 0 3px 1.2em;
	position: relative;
}
@media (max-width: 767px) {
	.criteria-card__list li {
		font-size: 3.5vw;
		padding: 3px 0 3px 1em;
	}
}
.criteria-card__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--gold);
	font-weight: bold;
}
.criteria-card__accordion {
	margin-top: 8px;
}

.accordion-btn {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	background: var(--gray);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 1.4rem;
	cursor: pointer;
	width: 100%;
	text-align: left;
	color: var(--text);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
@media (max-width: 767px) {
	.accordion-btn {
		font-size: 3.2vw;
		padding: 6px 0.5em;
	}
}
.accordion-btn:hover {
	background: var(--gold-bg);
}

.accordion-body {
	overflow: hidden;
	max-height: 0;
	padding: 10px 0 0;
	font-size: 1.4rem;
	color: #555;
	line-height: 1.6;
}
@media (max-width: 767px) {
	.accordion-body {
		font-size: 3.2vw;
	}
}

/* ==============================
   ② ランキングカード
============================== */
.rank-card {
	margin: 0 10px 24px;
	border-radius: 10px;
	overflow: hidden;
	-webkit-box-shadow: var(--shadow);
	        box-shadow: var(--shadow);
	background: var(--white);
	border: 1px solid var(--border);
}
.rank-card--1st {
	border: 2px solid var(--gold);
	-webkit-box-shadow: var(--shadow-gold);
	        box-shadow: var(--shadow-gold);
}
.rank-card--1st .rank-card__badge {
	background: linear-gradient(135deg, #c8922a, #f0c060, #c8922a);
	color: #fff;
}
.rank-card--2nd .rank-card__badge {
	background: linear-gradient(135deg, #8a9aa8, #b8c8d4, #8a9aa8);
	color: #fff;
}
.rank-card--3rd .rank-card__badge {
	background: linear-gradient(135deg, #a07048, #c89060, #a07048);
	color: #fff;
}
.rank-card__badge {
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	letter-spacing: 0.1em;
}
.rank-card__inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 1em;
	padding: var(--card-pad);
}
@media (max-width: 480px) {
	.rank-card__inner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
}
.rank-card__logo-link {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	margin: auto;
}
@media (max-width: 480px) {
	.rank-card__logo-link {
		width: 80px;
	}
}
.rank-card__logo {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 4px;
}
.rank-card__info {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	text-align: center;
	width: 100%;
}
.rank-card__name {
	font-weight: bold;
	color: var(--text);
	margin-bottom: 6px;
	line-height: 1.4;
}
.rank-card__stars {
	margin-bottom: 6px;
	font-size: 1.6rem;
}
.rank-card__stars strong {
	color: var(--text);
	font-size: 1.5rem;
}
.rank-card__target {
	color: var(--navy);
	background: var(--gold-light);
	padding: 0.5em 1em;
	margin-bottom: 0.5em;
	line-height: 1.4;
	font-weight: 700;
	display: inline-block;
}
.rank-card__reasons {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
	text-align: left;
	display: inline-block;
}
.rank-card__reasons li {
	padding: 2px 0 2px 1.4em;
	position: relative;
}
.rank-card__reasons li::before {
	content: "●";
	position: absolute;
	left: 0;
	color: var(--gold);
	font-size: 0.7em;
	top: 0.4em;
}
.rank-card__cta-area {
	padding: 0 var(--card-pad) var(--card-pad);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 8px;
}
.rank-card__cta-lead {
	font-size: 1.2rem;
	color: #888;
	text-align: center;
	margin: 0;
}

/* ==============================
   CTA ボタン（役割別）
============================== */
@-webkit-keyframes shiny {
	0% {
		-webkit-transform: scale(0) rotate(25deg);
		        transform: scale(0) rotate(25deg);
		opacity: 0;
	}
	50% {
		-webkit-transform: scale(1) rotate(25deg);
		        transform: scale(1) rotate(25deg);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(50) rotate(25deg);
		        transform: scale(50) rotate(25deg);
		opacity: 0;
	}
}
@keyframes shiny {
	0% {
		-webkit-transform: scale(0) rotate(25deg);
		        transform: scale(0) rotate(25deg);
		opacity: 0;
	}
	50% {
		-webkit-transform: scale(1) rotate(25deg);
		        transform: scale(1) rotate(25deg);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(50) rotate(25deg);
		        transform: scale(50) rotate(25deg);
		opacity: 0;
	}
}
.cta-btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 16px;
	height: 52px;
	line-height: 52px;
	text-align: center;
	text-decoration: none;
	border-radius: 50px;
	font-size: 1.5rem;
	font-weight: bold;
	cursor: pointer;
	overflow: hidden;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cta-btn::after {
	content: "";
	position: absolute;
	top: -100px;
	left: -100px;
	width: 50px;
	height: 50px;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgb(255, 255, 255) 100%, rgba(255, 255, 255, 0) 0%);
	-webkit-animation: shiny 3s ease-in-out infinite;
	        animation: shiny 3s ease-in-out infinite;
}
.cta-btn--main {
	color: #fff;
	background-color: var(--red);
	-webkit-box-shadow: 0 4px 0 #9b0b08;
	        box-shadow: 0 4px 0 #9b0b08;
}
.cta-btn--sub {
	color: #fff;
	background-color: var(--navy);
	-webkit-box-shadow: 0 4px 0 #0e1535;
	        box-shadow: 0 4px 0 #0e1535;
}
.cta-btn--outline {
	color: var(--text);
	background: var(--white);
	border: 2px solid var(--border);
	-webkit-box-shadow: none;
	        box-shadow: none;
}

.cta-lead {
	font-size: 1.2rem;
	color: #888;
	text-align: center;
	margin: 0 0 6px;
}

/* ==============================
   ランキングボックス（詳細セクション）
============================== */
.rank-content-ttl {
	margin-bottom: 20px;
}

.rank-box {
	margin: 0 10px;
	margin-bottom: 32px;
	border-bottom: solid 1px #cfcfcf;
	padding-bottom: 16px;
}
.rank-box--featured {
	border: 2px solid var(--gold);
	border-radius: 10px;
	padding: 16px;
	background: -webkit-gradient(linear, left top, left bottom, from(#fffdf5), to(var(--white)));
	background: linear-gradient(180deg, #fffdf5 0%, var(--white) 100%);
	-webkit-box-shadow: var(--shadow-gold);
	        box-shadow: var(--shadow-gold);
}

.rank-summary {
	font-size: 1.6rem;
	color: var(--navy);
	background: #eef2ff;
	border-left: 4px solid var(--navy);
	padding: 10px 14px;
	margin: 0 0 16px;
	line-height: 1.6;
}
@media (max-width: 767px) {
	.rank-summary {
		font-size: 3.6vw;
	}
}

.rank-box-ttl {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-bottom: 10px;
}

.rank-ico {
	width: 40px;
	margin-right: 15px;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}

.shop-name a {
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--navy);
}
@media (max-width: 767px) {
	.shop-name a {
		font-size: 4vw;
	}
}

.rank-table {
	width: 100%;
	border-collapse: collapse;
	max-width: 700px;
}

.rank-table th,
.rank-table td {
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.2;
	background-color: #FFF;
	width: 33%;
}
@media (max-width: 767px) {
	.rank-table th,
	.rank-table td {
		font-size: 3.6vw;
	}
}

.rank-table th {
	width: 22%;
	background: #c9e2ee;
	font-weight: 600;
	color: var(--text);
	border: 1px solid #b2d1e0;
	padding: 0.7em;
	vertical-align: middle;
}

.rank-table td {
	font-weight: 600;
	border: 1px solid #b2d1e0;
	padding: 0.7em;
	vertical-align: middle;
}

/* ==============================
   強み3項目リスト（1位専用）
============================== */
.strength-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 12px;
	margin: 16px 0;
}

.strength-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 0.5em;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	background: var(--white);
	border: 1px solid var(--border);
	border-left: 4px solid var(--gold);
	border-radius: 6px;
	padding: 14px 16px;
}
.strength-item__num {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	background: var(--gold);
	color: var(--white);
	font-size: 1.6rem;
	font-weight: bold;
	border-radius: 4px;
	padding: 4px 8px;
	line-height: 1.2;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.strength-item__num {
		font-size: 3.2vw;
	}
}
.strength-item__body h4 {
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--base-dark);
	margin: 0 0 6px;
}
.strength-item__body p {
	margin: 0;
	line-height: 1.6;
}

/* ==============================
   ⑤ 口コミカード（3件横並び）
============================== */
.kuchikomi-lead {
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--text);
	text-align: center;
	margin: 0 0 12px;
}

.review-cards {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 0.5em;
	margin-bottom: 1em;
}
@media (max-width: 600px) {
	.review-cards {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
}

.review-card {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1em;
	position: relative;
}
.review-card::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 20px;
	border: 6px solid transparent;
	border-bottom-color: var(--border);
}
.review-card::after {
	content: "";
	position: absolute;
	top: -8px;
	left: 21px;
	border: 5px solid transparent;
	border-bottom-color: var(--white);
}
.review-card__header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}
.review-card__icon {
	font-size: 1.8rem;
}
.review-card__meta {
	font-size: 1.6rem;
	color: #888;
}
.review-card__stars {
	font-size: 1.6rem;
	margin-left: auto;
}
.review-card__text {
	margin: 0;
	color: var(--text);
}

/* ==============================
   よくある質問
============================== */
.faq-section {
	padding: 0 10px;
	margin-bottom: 32px;
}
.faq-section__ttl {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	color: var(--text);
	margin-bottom: 20px;
}

.faq-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 8px;
}

.faq-item {
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	background: var(--white);
}

.faq-question {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 10px;
	width: 100%;
	background: var(--gray);
	border: none;
	padding: 14px 16px;
	font-weight: bold;
	cursor: pointer;
	text-align: left;
	color: var(--text);
	font-size: 1.6rem;
	line-height: 1.4;
}
@media (max-width: 767px) {
	.faq-question {
		font-size: 3.6vw;
	}
}
.faq-question:hover {
	background: var(--gold-bg);
}

.faq-q {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--gold);
	color: var(--white);
	font-weight: bold;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	line-height: 1;
}

.faq-icon {
	margin-left: auto;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	color: var(--gold);
}

.faq-answer {
	overflow: hidden;
	max-height: 0;
	font-size: 1.6rem;
	line-height: 1.7;
	color: var(--text);
	border-top: 1px solid var(--border);
}
@media (max-width: 767px) {
	.faq-answer {
		font-size: 3.6vw;
	}
}
.faq-answer p {
	padding: 14px 16px;
}

/* ==============================
   最終CTA
============================== */
.final-cta {
	text-align: center;
	padding: 32px 10px;
	background: -webkit-gradient(linear, left top, left bottom, from(var(--gold-bg)), to(var(--white)));
	background: linear-gradient(180deg, var(--gold-bg) 0%, var(--white) 100%);
	border-top: 2px solid var(--gold);
	border-bottom: 2px solid var(--gold);
	margin: 32px 0;
}
.final-cta__lead {
	font-size: 1.3rem;
	color: #888;
	margin-bottom: 16px;
}
.final-cta__btn {
	margin-bottom: 12px;
	font-size: 1.6rem;
}

/* ==============================
   比較表
============================== */
.table-scrolling {
	overflow-x: auto;
}

.ranking-table-o {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	overflow: scroll;
}
.ranking-table-o tbody {
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
}
.ranking-table-o tbody th, .ranking-table-o tbody td {
	width: 16.6666666667%;
	min-width: 83.3333333333px;
	padding: 3px 0;
	vertical-align: middle;
	text-align: center;
	line-height: 1.3;
	border: 0.5px #dedede solid;
	font-size: 13px;
}
.ranking-table-o tbody th {
	background: var(--text);
	font-weight: 500;
	left: 0;
	color: #fff;
	z-index: 99999;
	font-weight: 700;
	padding: 0 1em;
}
.ranking-table-o .ranking-table-o-ttl {
	width: 100%;
	height: 50px;
	background-color: #ffa311;
	line-height: 50px;
	text-align: center;
	color: #fff;
	display: block;
	font-weight: bold;
}

.ranking-table-o td {
	background: #fffbfc;
	font-weight: 700;
}

.ranking-table-o img {
	max-height: 200px;
	width: 100px;
	padding: 0 10px;
}

.tbl-th--blank {
	z-index: 1000;
	background: unset !important;
	-webkit-box-shadow: unset !important;
	        box-shadow: unset !important;
	border: unset !important;
}

.tbl-td--logo {
	padding: unset !important;
	-webkit-box-shadow: unset !important;
	        box-shadow: unset !important;
}

.tbl-td--btn {
	padding: unset !important;
	background: unset !important;
	-webkit-box-shadow: unset !important;
	        box-shadow: unset !important;
	border: unset !important;
}

.table-main-btn {
	height: 60px;
}

.td-in {
	position: relative;
	height: 53px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	display: -ms-grid;
	display: grid;
	align-items: center;
	vertical-align: middle;
}

.ranking-table-name td {
	background-color: #cdd7e0;
	white-space: nowrap;
	min-width: 18em;
}

.table-main-btn {
	color: #fff;
	background-color: var(--red);
	cursor: pointer;
	overflow: hidden;
	font-size: 14px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	border-radius: 5px;
	margin: 5px;
	font-weight: 700;
}

.rank-ttl {
	display: block;
	text-decoration: none;
	position: relative;
}

.text-small {
	display: block !important;
	font-size: 12px;
	width: 100%;
	color: #333;
	padding-bottom: 0.8em;
	font-weight: 700;
}

/* ==============================
   イチオシ・クチコミ（既存維持）
============================== */
.ichioshi .ichioshi-ttl {
	margin: 20px 0;
}
.ichioshi .ichioshi-contents {
	background: var(--white);
	border: 1em solid var(--white);
	padding: 2em;
	position: relative;
}
.ichioshi .ichioshi-contents::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 2px solid var(--base);
	pointer-events: none;
}
.ichioshi .ichioshi-contents h4 {
	color: var(--base);
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 0.5em;
}
@media (max-width: 767px) {
	.ichioshi .ichioshi-contents h4 {
		font-size: 1.2em;
	}
}
.ichioshi .ichioshi-contents p {
	margin: 0 auto 1em;
}
.ichioshi .ichioshi-contents p:last-of-type {
	margin-bottom: 0;
}
.ichioshi .ichioshi-contents strong {
	font-weight: bold;
	color: #C00;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffcc66), to(#ffcc66));
	background-image: linear-gradient(#ffcc66, #ffcc66);
	background-repeat: no-repeat;
	background-size: 100% 0.35em;
	background-position: 0 100%;
}

.kuchikomi .kuchikomi-ttl {
	margin: 20px 0;
}

/* ==============================
   評価シンボル（既存維持）
============================== */
.do {
	color: #f00;
	font-size: 3rem;
	position: absolute;
	top: -15%;
	left: 36%;
	z-index: 0;
	opacity: 0.1;
}

.ci {
	color: rgb(231, 232, 42);
	font-size: 3rem;
	position: absolute;
	top: -15%;
	left: 36%;
	z-index: 0;
	opacity: 0.3;
}

.star {
	font-size: 1.2em;
	color: #ff8a00;
}

/* ==============================
   共通パーツ
============================== */
.mt20 {
	margin-top: 20px;
}

.mb20 {
	margin-bottom: 20px;
}

.txt_red {
	color: var(--red);
	font-weight: 700;
}

/* ==============================
   フッター
============================== */
.footer {
	font-size: 16px;
	text-align: center;
	background: var(--text);
	color: #fff;
	padding: 0 0 0;
	margin-top: auto;
}
.footer small {
	font-size: 0.8em;
	padding: 1em;
	display: block;
}

.footer a:link {
	color: #FFF;
}

.footer a:visited {
	color: #FFF;
}

.footer_link {
	margin-bottom: 1em;
}
.footer_link ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
@media screen and (max-width: 540px) {
	.footer_link ul {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
}
.footer_link ul li {
	border-right: 1px solid #FFF;
}
.footer_link ul li:last-of-type {
	border-right: none;
}
.footer_link ul li a {
	padding: 0.5em 1em;
	display: inline-block;
}
@media screen and (max-width: 540px) {
	.footer_link ul li a {
		display: block;
		text-align: left;
		padding: 1em;
	}
}
@media screen and (max-width: 540px) {
	.footer_link ul li {
		border-right: none;
		border-bottom: 1px dotted #FFF;
	}
}

/* ==============================
   MV・注意書き
============================== */
.mv {
	padding: 0 0 0;
}

.top3 {
	background: url("../img/top3_obi.png") no-repeat center center;
}
.top3 figure {
	padding: 1em 2em;
}

.pr {
	text-align: end;
}
.pr em {
	font-size: 1.2rem;
}

.asterisk {
	padding: 1em;
	line-height: 1.3em;
	list-style-type: none;
	font-size: 0.8em;
}

.asterisk li {
	padding-left: 1em;
	text-indent: -1em;
	padding-bottom: 0.5em;
}

.asterisk li:before {
	content: "※";
}

/* ==============================
   レスポンシブユーティリティ
============================== */
@media (min-width: 768px) {
	.pc_none {
		display: none;
	}
	.sp_none {
		display: block;
	}
}
@media (max-width: 767px) {
	.pc_none {
		display: block;
	}
	.sp_none {
		display: none;
	}
}
/* ==============================
   header / info ページ用（既存維持）
============================== */
.header {
	padding: 10px 0;
}

.header-sub {
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 5px;
}
.header-sub span {
	color: #ff7495;
}

.header-main {
	font-size: 23px;
	text-align: center;
	font-weight: bold;
}

.wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	min-height: 100vh;
}

.info_header {
	background: var(--text);
	padding: 1em 0;
	margin-bottom: 0.5em;
	text-align: center;
}
.info_header h1 {
	font-size: 1.5rem;
	color: #FFF;
	font-weight: bold;
}

.pankuzu {
	font-size: 12px;
	margin-bottom: 3em;
	margin-top: 1em;
}
.pankuzu span {
	padding: 0 0.7em;
}

@media screen and (max-width: 767px) {
	.info_content {
		padding: 0 1em;
	}
}
@media screen and (min-width: 768px) {
	.info_content {
		width: 740px;
		margin: 0 auto;
		padding: 0 1rem;
	}
}
.article-block {
	text-align: center;
}

.article-block h2 {
	font-size: 1.5rem;
	color: var(--text);
	margin-bottom: 1em;
	font-weight: bold;
	margin-top: 2em;
}

.article-block h3 {
	font-size: 1.2rem;
	color: var(--text);
	margin-bottom: 1em;
	font-weight: bold;
	margin-top: 2em;
}

.article-block p {
	text-align: justify;
	line-height: 1.6em;
	padding-bottom: 20px;
}