@charset "UTF-8";

/* ====================================
 共通スタイル
 ==================================== */
:root {
	--dark-red: #701C29;
	--dark-orange: #985D01;
	--table-gray: #d9d9d9;
	--table-light-gray: #ececec;
	--mochiy-pop: "mochiy-pop", sans-serif;
	--shuei-gothic: "dnp-shuei-gothic-gin-std", sans-serif;
	--zen-kaku-gothic: "zen-kaku-gothic-new", sans-serif;
}

dl,
dd,
dt {
	margin: 0;
	padding: 0;
}

.mochiy {
	font-family: var(--mochiy-pop);
	font-weight: 400;
	font-style: normal;
}

.z-gothic {
	font-family: var(--zen-kaku-gothic);
	font-weight: 500;
	font-style: normal;
}

.s-gothic,
.lineup__title {
	font-family: var(--shuei-gothic);
	font-weight: 600;
	font-style: normal;
}

/* シリーズの比較 */
.compare {
	padding-block: 4rem 6rem;
}

/* シリーズの比較・コピー */
.compare__copy {
	text-align: center;
	font: 700 1.5rem/1.8 var(--shuei-gothic);
}

/* シリーズの比較・説明 */
.compare__series {
	display: grid;
	inline-size: min(100%, 1040px);
	gap: 2rem calc(40 / 1040 *100%);
	margin-top: 4rem;

	dl {
		text-align: center;
		padding: 1.2rem 1.5rem 1.5rem 1.5rem;
	}

	dt {
		font-size: 1.8rem;
		font-weight: 700;
		line-height: 1;
	}

	dd {
		font: 700 1.5rem var(--zen-kaku-gothic);
		margin-top: 1rem;
		padding-top: 1.5rem;
	}
}

.compare__series dd {
	border-top: 1px solid #707070;
}

.compare__series--pro {
	--pro-series: #ddd1cc;
	border: 2px solid var(--pro-series);

	dl {
		background: var(--pro-series);
	}
}

.compare__series--with {
	--with-series: #e8e1cc;
	border: 2px solid var(--with-series);

	dl {
		background: var(--with-series);
	}
}

.compare__series--text {
	padding: 1em;
	line-height: 1.7;
	font-size: 1.2rem;
	font-weight: 500;
}

/* シリーズの比較・比較表 */
.compare__container {
	padding-top: 4rem;
}

.compare__table {
	inline-size: 100%;
	text-align: center;
	margin-top: 5rem;
}

/* 比較表・サイズ設定 */
[data-series] {
	inline-size: 37%;
}

.compare__body--header {
	inline-size: 26%;
	padding: 1rem 0.6em;
}

.compare__body--row {
	block-size: 6.5rem;
}

/* 比較表・ヘッダー */
.compare__header [data-series] {
	color: #fff;
	font-size: 1.2rem;
	border-radius: 20px 20px 0 0;
	padding-block: 2.3em 0.45em;
	position: relative;

	span {
		font-size: 2.8rem;
		line-height: 1.2;
		font-family: var(--mochiy-pop);
	}
}

.compare__header [data-series="pro"] {
	background: var(--dark-red);
}

.compare__header [data-series="with"] {
	background: var(--dark-orange);
	border-left: 2px solid #fff;
}

.compare__header--image {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	--size: 6.5rem;
	inline-size: var(--size);
	block-size: var(--size);
}

/* 比較表・データセル */
.compare__body--header {
	font-size: 1.2rem;

	span {
		font-weight: 400;
	}
}

.compare__body tr:nth-of-type(odd) th {
	background: var(--table-light-gray);
}

.compare__body tr:nth-of-type(even) {
	th {
		background: var(--table-gray);
	}

	td {
		background: var(--table-light-gray);
	}
}

.compare__body--row td {
	font-size: 1.2rem;
	font-weight: 700;
	padding: 1rem 0.4em;
}

.compare__body--row[data-type="star"] td {
	font-size: 1.8rem;
	word-break: break-all;
}

.compare__body--row[data-type="check"] td {
	font-size: 2rem;
}

.compare__body--row :nth-child(1 of td) {
	color: var(--dark-red);
}

.compare__body--row :nth-child(2 of td) {
	color: var(--dark-orange);
	border-left: 2px solid #959595;
}

.compare__body--row td:has(.small-text) {
	line-height: 1.2;
}

.small-text {
	font-size: 1.2rem;
}

small {
	display: block;
	margin-top: 0.5em;
	font-size: 1.2rem;
	font-weight: 400;
	color: #000;
}

.font-gray {
	color: #959595;
}

.font-black {
	color: #000;
	font-size: 1.2rem;
	font-weight: 400;
}

/* ラインアップ */
.lineup {
	background: #E8E8E8;
	padding-block: 6rem;
}

.lineup__container {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 1.5rem;
	margin: 3rem auto 0;
}

.lineup__title {
	font-size: 1.8rem;
	text-align: center;
}

.lineup__sub-title {
	font-size: 1.5rem;
	font-weight: 700;
	padding: 0.25rem 1rem;
	color: #fff;
	text-align: center;
	border-radius: 20px 20px 0 0;

	span {
		font-size: 2rem;
		font-family: var(--mochiy-pop);
	}
}

.lineup__pro .lineup__sub-title {
	background: var(--dark-red);
}

.lineup__with .lineup__sub-title {
	background: var(--dark-orange);
}

.lineup__list {
	background: #fff;
	border-radius: 0 0 20px 20px;
}

.lineup__item {
	text-align: center;
	padding-block: 2rem;
}

/* ラインアップ・proシリーズ */
.lineup__pro .lineup__list {
	display: grid;
	grid-template-columns: 1fr;
}

.lineup__item--image {
	aspect-ratio: 1/ 1;
	max-inline-size: 200px;
	margin-inline: auto;
}

.lineup__item--title {
	font-size: 1.6rem;
	font-weight: 700;
}

.lineup__item--text {
	font-size: 1.4rem;
}

.lineup__item--anchor {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 0.4em;
	font-size: 1.2rem;
	inline-size: fit-content;
	color: #fff;
	background: #535353;
	border: 1px solid #535353;
	padding: 0.45em 1em;
	margin: 1em auto 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.lineup__item--anchor svg {
	inline-size: 0.6em;
	block-size: 1em;
	align-self: center;
}

.lineup__item--anchor::after {
	content: '';
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover: hover) and (pointer: fine) {
	.lineup__item--anchor:hover {
		background: #fff;
		color: #000;
		text-decoration: none;
	}
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width <768px) {

	.compare__series--pro,
	.compare__series--with {
		display: flex;
	}

	.compare__series dl {
		min-inline-size: 150px;
		align-content: center;
	}

	.compare__series-text {
		flex: 1 0;
	}

	/* ラインアップ */
	.lineup__container {
		max-inline-size: 600px;
	}

	.lineup__list {
		padding-inline: 5%;
	}

	.lineup__item {
		display: grid;
		grid-template-columns: 0.8fr 1fr;
		column-gap: 5%;
	}

	.lineup__item:not(:first-of-type) {
		border-top: 1px solid #959595;
	}

	.lineup__item--inner {
		align-self: center;
	}
}

/* ====================================
	PC&タブレット専用スタイル
===================================== */
@media print,
screen and (width >=768px) {

	/* シリーズの比較 */
	.compare {
		padding-block: 10rem 20rem;
	}

	/* シリーズの比較・コピー */
	.compare__copy {
		font-size: 2.5rem;
	}

	/* シリーズの比較・説明 */
	.compare__series {
		justify-content: center;
		grid-template-columns: 1fr 1fr;
		margin: 10rem auto 0;

		dl {
			padding: 2rem 2rem 3rem 2rem;
		}

		dt {
			font-size: 3rem;
		}

		dd {
			font-size: 2.7rem;
			margin-top: 1.5rem;
			padding-top: 2rem;
		}
	}

	.compare__series dd {
		border-top: 1px solid #707070;
	}

	.compare__series--pro {
		--pro-series: #ddd1cc;
		border: 2px solid var(--pro-series);

		dl {
			background: var(--pro-series);
		}
	}

	.compare__series--with {
		--with-series: #e8e1cc;
		border: 2px solid var(--with-series);

		dl {
			background: var(--with-series);
		}
	}

	.compare__series--text {
		padding: 2rem 2.5rem;
		line-height: 1.7;
		font-size: 2.3rem;
		font-weight: 500;
	}

	/* シリーズの比較・比較表 */
	.compare__container {
		padding-top: 10rem;
	}

	/* 比較表・サイズ設定 */
	[data-series] {
		inline-size: 37.5%;
	}

	.compare__body--header {
		inline-size: 25%;
	}

	.compare__body--row {
		block-size: 15rem;
	}

	/* 比較表・ヘッダー */
	.compare__header [data-series] {
		font-size: 2.5rem;
		border-radius: 30px 30px 0 0;

		span {
			font-size: 7rem;
			line-height: 1.2;
		}
	}

	.compare__header [data-series="with"] {
		border-left: 2px solid #fff;
	}

	.compare__header--image {
		--size: 12.5rem;
	}

	/* 比較表・データセル */
	.compare__body--header {
		font-size: 2.3rem;
	}

	.compare__body--row td {
		font-size: 2.7rem;
		padding: 1rem 0.4em;
	}

	.compare__body--row[data-type="star"] td {
		font-size: 4.5rem;
		letter-spacing: 0.125em;
	}

	.compare__body--row[data-type="check"] td {
		font-size: 4rem;
	}

	.compare__body--row :nth-child(2 of td) {
		border-left: 2px solid #959595;
	}

	.small-text {
		font-size: 2.3rem;
	}

	small {
		margin-top: 0.5em;
		font-size: 1.5rem;
	}

	.font-black {
		font-size: 2.3rem;
	}

	/* ラインアップ */
	.lineup {
		padding-block: 10rem;
	}

	.lineup__container {
		grid-template-columns: 3fr 1fr;
		column-gap: 2%;
		margin-top: 8rem;
	}

	.lineup__title {
		font-size: 4rem;
	}

	.lineup__sub-title {
		font-size: 1.8rem;
		font-weight: 700;
		padding: 0.5rem 1rem;
		color: #fff;
		text-align: center;
		border-radius: 30px 30px 0 0;

		span {
			font-size: 4rem;
		}
	}

	.lineup__list {
		padding-block: 3rem;
		border-radius: 0 0 30px 30px;
	}

	.lineup__item {
		padding: 0 2rem;
	}

	.lineup__item:not(:first-of-type) {
		border-left: 1px solid #959595;
	}

	/* ラインアップ・proシリーズ */
	.lineup__pro .lineup__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.lineup__item--title {
		font-size: 2.7rem;
	}

	.lineup__item--text {
		font-size: 2rem;
	}

	.lineup__item--anchor {
		font-size: 1.7rem;
	}
}

/* ====================================
	タブレット専用スタイル
===================================== */
@media print,
screen and (768px <=width <1024px) {

	/* シリーズの比較 */
	.compare {
		padding-block: 8rem 16rem;
	}

	/* シリーズの比較・説明 */
	.compare__series {
		margin-top: 8rem;

		dl {
			padding: 1.6rem 1.6rem 2.4rem 1.6rem;
		}

		dt {
			font-size: 2.4rem;
		}

		dd {
			font-size: 1.8rem;
			margin-top: 1.2rem;
			padding-top: 1.5rem;
		}
	}

	.compare__series--text {
		padding: 1.6rem 2rem;
		font-size: 1.8rem;
	}

	/* シリーズの比較・比較表 */
	.compare__container {
		padding-top: 8rem;
	}

	/* 比較表・サイズ設定 */
	.compare__body--row {
		block-size: 12rem;
	}

	/* 比較表・ヘッダー */
	.compare__header [data-series] span {
		font-size: 5rem;
	}

	/* 比較表・データセル */
	.compare__body--header {
		font-size: 1.8rem;
	}

	.compare__body--row td {
		font-size: 2.4rem;
	}

	.compare__body--row[data-type="star"] td {
		font-size: 3.5rem;
	}

	.compare__body--row[data-type="check"] td {
		font-size: 3.5rem;
	}

	.small-text {
		font-size: 1.8rem;
	}

	/* ラインアップ */
	.lineup {
		padding-block: 8rem;
	}

	.lineup__title {
		font-size: 3.6rem;
	}

	.lineup__sub-title span {
		font-size: 3rem;
	}

	.lineup__list {
		border-radius: 0 0 30px 30px;
	}

	.lineup__item--title {
		font-size: 2rem;
	}

	.lineup__item--text {
		font-size: 1.6rem;
	}

	.lineup__item--anchor {
		font-size: 1.5rem;
	}
}