@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

label:has(input:focus-visible) {
	outline: 2px solid var(--cyan);
}

.close_column {
	position: absolute;
	width: 2rem;
	height: 2rem;
	top: 0.5rem;
	right: 1rem;
	border-radius: 100%;
	background: #959595 url('/aquos/assets/common/images/icon-close-w.svg') no-repeat center center / 50%;
}

.nodisplay {
	display: none !important;
}

.result-wrap {
	display: none;
}

.page-header .link-wrap {
	text-align: right;
}

.page-header .btn-has-arrow-left {
	margin-left: auto;
}

.btn-has-arrow-left::after {
	content: "";
}

.page-header {
	padding: 2rem 0 2rem;
}

.result-header,
.result-body {
	position: relative;
}

.result-header {
	border-top: solid 1px #d0d0d0;
	border-bottom: solid 1px #d0d0d0;
}

.main-title {
	font-size: 2.6rem;
	font-weight: 700;
}

.td-column {
	border-left: solid 1px #d0d0d0;
	border-right: solid 1px #d0d0d0;
}

.prod-header-column-container {
	display: inline-block;
	vertical-align: bottom;
	background-color: #fff;
	scroll-snap-type: x mandatory;
}

.td-column .row {
	display: flex;
	/* height: 3.5rem; */
}

.td-column .row.category-row {
	background: #f5f5f5;
}

.prod-header-column-container .row {
	height: 60vw;
}

.prod-header-column-container .column {
	height: inherit;
	padding: 0.6rem;
}

.prod-header-column-container .column,
.td-column .row .column {
	flex-shrink: 0;
	width: 40vw;
	text-align: center;
	background: #fff;
	position: relative;
}

.prod-header-column-container .column,
.td-column .row.category-row .column {
	background: #f5f5f5;
	border: none;
}

.prod-header-column-container .column {
	border-right: solid 1px #d0d0d0;
}

.td-column {
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
}

.list-options li {
	position: relative;
}

.option-title {
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 0.5em;
}

.option-title2 {
	font-size: 2rem;
	margin-bottom: 2em;
	text-align: center;
}

.option-label {
	cursor: pointer;
	padding: 0.3em 0 0.3em 2em;
	background: url('/aquos/lineup/common/images/check-off.svg') no-repeat left 0.6rem center / 1.8rem auto;
	font-weight: 400;
}

.option-label:has(:checked) {
	background-image: url('/aquos/lineup/common/images/check-on.svg');
	font-weight: 500;
}

.list-options input[type="checkbox"] {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

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

.list-options li:not(:first-child) {
	margin-top: 0.5em;
}

.btn-clear {
	margin-top: 3rem;
	text-align: center;
}

.btn-option-clear {
	border-bottom: solid 1px #000;
}

.btn-update {
	margin-top: 2rem;
	text-align: center;
}

.results-info {
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;
}

.new {
	padding: 0 0.2em;
	background: #e6000d;
	color: #fff;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
}

.prod-name {
	font-size: 1.8rem;
	font-weight: bold;
	text-decoration: underline;
}

.row:not(.category-row)::before {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	margin-top: -9vw;
	background: #f5f5f5;
	font-size: 1.4rem;
	border-left: solid 1px #d0d0d0;
	border-top: 1px solid #d1d1d1;
}

.row.ondisplay:not(.category-row)::before {
	background: #ffe69c;
}

.row[data-row-name="size"]::before {
	content: "画面サイズ";
}

.row[data-row-name="gaikei"]::before {
	content: "外形寸法";
}

.row[data-row-name="mass"]::before {
	content: "本体質量";
}

.row[data-row-name="year"]::before {
	content: "発売年";
}

.row[data-row-name="power"]::before {
	content: "消費電力";
}

.row[data-row-name="nenkan"]::before {
	content: "年間消費電力量";
}

.row[data-row-name="interface"]::before {
	content: "インターフェイス";
}

.row[data-row-name="pixels"]::before {
	content: "画素数";
}

.row[data-row-name="tuner"]::before {
	content: "チューナー";
}

.row[data-row-name="panel"]::before {
	content: "パネル";
}

.row[data-row-name="processor"]::before {
	content: "画像処理エンジン（プロセッサー）";
}

.row[data-row-name="contrast"]::before {
	content: "明暗表現・高コントラスト技術";
}

.row[data-row-name="hdr"]::before {
	content: "HDR";
}

.row[data-row-name="highcolor"]::before {
	content: "広色域";
}

.row[data-row-name="doublespeed"]::before {
	content: "倍速技術";
}

.row[data-row-name="speaker"]::before {
	content: "音声総合出力/スピーカー";
}

.row[data-row-name="dokuji"]::before {
	content: "独自スピーカーシステム";
}

.row[data-row-name="usb"]::before {
	content: "USBハードディスク対応";
}

.row[data-row-name="net"]::before {
	content: "ネット動画サービス対応";
}
.row[data-row-name="google_cast"]::before {
	content: "Google Cast 対応";
}
.row[data-row-name="apple_airplay"]::before {
	content: "Apple AirPlay 対応";
}
.row[data-row-name="lan"]::before {
	content: "無線LAN対応";
}

.row[data-row-name="voicecontrol"]::before {
	content: "音声操作";
}

.row[data-row-name="stand"]::before {
	content: "回転式スタンド";
}

.row[data-row-name="twoscreens"]::before {
	content: "2画面機能";
}

.row[data-row-name="aquos_ai"]::before {
	content: "AQUOS AI";
}

.page-footer {
	padding-top: 8rem;
}

.page-footer .btn-has-arrow-left {
	margin-inline: auto;
}

.count {
	display: inline-block;
	margin: 0 0.5em;
	font-size: 1.5em;
}

.user_s .row {
	display: none;
}

.user_s .row.ondisplay {
	display: flex;
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover: hover) and (pointer: fine) {

	/* メインエリア：外部リンク */
	.link-hikaku:hover {
		text-decoration: none;
	}

	.btn-clear .hovering {
		border-bottom: solid 1px transparent;
	}

	.btn-update .hovering {
		background: #535353;
		color: #fff;
		border: solid 1px #fff;
	}
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width <1080px) {
	.td-column .row {
		/* height: 9vw; */
	}

	.prod-header-column-container .row {
		height: 60vw;
	}

	.prod-img {
		padding: 2vw 6vw 0;
	}

	.modal-container::-webkit-scrollbar {
		width: 1rem;
	}

	.modal-container::-webkit-scrollbar-track {
		background-color: transparent;
	}

	.modal-container::-webkit-scrollbar-thumb {
		border: 0.4rem solid transparent;
		background-color: #000;
		background-clip: content-box;
	}

	.modal {
		display: none;
	}

	.main-navi {
		position: sticky;
		top: 0;
		z-index: 11;
	}

	.btn-search-options {
		inline-size: 100%;
		font-size: 1.8rem;
		font-weight: 500;
		background: #f5f5f5;
		text-align: right;
	}

	.btn-option-menu {
		display: inline-block;
		inline-size: 100%;
		font-size: 1.5rem;
		font-weight: 500;
		padding: 0.75em 1em;
		box-shadow: 0px 0.3rem 0.6rem #0000004d;
	}

	.result-wrap {
		width: 100%;
	}

	.result-container {
		margin-top: -2.4rem;
	}

	.result-wrap .base-width {
		padding: 0;
	}

	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 11;
		background: rgba(0, 0, 0, 0.6);
		padding: 4rem 5%;
		display: flex;
		justify-content: center;
	}

	.modal[aria-hidden="false"] {
		display: block;
	}

	.micromodal-slide[aria-hidden="false"] .modal-overlay {
		animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
	}

	.btn-modal-close {
		inline-size: 3rem;
		block-size: 3rem;
		position: absolute;
		top: 0.8rem;
		right: 0.8rem;
	}

	.btn-modal-close::before {
		content: "";
		display: block;
		inline-size: 2rem;
		block-size: 2rem;
		background: url('/aquos/assets/common/images/icon-close-w.svg') no-repeat center center/contain;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.micromodal-slide .modal-container,
	.micromodal-slide .modal-overlay {
		will-change: transform;
	}

	.modal-container {
		inline-size: 100%;
		background-color: #fff;
		overflow-y: auto;
	}

	.option-item-wrap {
		max-inline-size: 120rem;
		margin-inline: auto;
		padding: 3rem 5%;
	}

	.option-item:not(:first-of-type) {
		margin-top: 6.25vw;
	}

	.btn-option-update {
		padding: 0.5em 1em;
		font-size: 1.8rem;
		background: #fff;
		border: solid 1px #707070;
	}

	.results-info {
		padding-top: 1em;
	}

	.td-column {
		/*スクロールバー非表示（IE・Edge）*/
		-ms-overflow-style: none;
		/*スクロールバー非表示（Firefox）*/
		scrollbar-width: none;
	}

	.td-column::-webkit-scrollbar {
		display: none;
	}

	.result-header {
		margin-top: 5vw;
	}

	.prod-left .category {
		font-size: 3.5vw;
		padding-top: 5vw;
	}

	.prod-header-column-container .column {
		padding: 5vw 1vw;
		height: 100%;
	}

	.prod-header-column-container .column,
	.td-column .row .column {
		border-right: 1px solid #d0d0d0;
		padding-top: 1vw;
		width: 36vw;
	}

	.result-body {
		border-bottom: 1px solid #d0d0d0;
	}

	.prod-right {
		padding: 2.5vw 0;
	}

	.list-prod-link span {
		padding: 0 2.5vw;
		border: 1px solid #000;
		font-size: 4vw;
	}

	.row:not(.category-row)::before {
		border-right: 1px solid #d0d0d0;
		font-weight: bold;
		height: 9vw;
		padding-top: 1.25vw;
		font-size: 4vw;
	}

	.option-title2.tt {
		display: none;
	}

	.close_column {
		width: 5vw;
		height: 5vw;
		top: 1.25vw;
		right: 2.5vw;
	}

	.prod-name {
		font-size: 4vw;
	}

	.item p {
		font-size: 4vw;
	}

	.new {
		font-size: 3.5vw;
	}

	.row[data-row-name="kanso"] {
		height: 15vw;
	}

	.row[data-row-name="kanso"] .column {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.option-item2 {
		margin-top: 5.5rem;
	}

	.btn-option-update {
		padding: 0.5em 1em;
		font-size: 1.8rem;
		background: #535353;
		color: #fff;
		border: solid 1px #707070;
	}
}

/* ====================================
	PC&タブレット
===================================== */
@media print,
screen and (width >=768px) {
	#resultInfo .btn-option-clear {
		border: none;
		color: #fff;
		background: #000;
		border-radius: 10rem;
		font-size: 1.5rem;
		padding: 0 1rem;
		margin-left: 2rem;
	}
}

/* ====================================
	PC専用スタイル
===================================== */
@media print,
screen and (width >=1080px) {
	.scroll-fix-wrap.passed .result-header-container {
		position: fixed;
		z-index: 10;
		top: -0.7rem;
	}

	.scroll-fix-wrap.passed.passed-bottom .result-header-container {
		position: absolute;
	}

	.result-header-container {
		width: 100%;
		position: absolute;
		top: -0.7rem;
		z-index: 10;
	}

	.btn-update {
		display: none;
	}

	.sp-only {
		display: none;
	}

	.prod-img {
		padding: 7%;
	}

	.scroll-fix-wrap {
		margin-top: 2rem;
	}

	.btn-update button {
		border: 1px solid #000;
		padding: 1rem 1rem;
		background: #fff;
	}

	.row:not(.category-row)::before {
		margin-top: -3.5rem;
		width: calc(100% - 1px);
		height: 3.5rem;
		padding-top: 0.6rem;
		font-size: 1.4rem;
		font-weight: bold;
	}

	.prod-header-column-container .column,
	.td-column .row .column {
		width: 50%;
	}

	.main-wrap {
		display: flex;
		justify-content: space-between;
	}

	.btn-modal-close {
		display: none;
	}

	.page-header {
		padding: 2rem 0 4rem;
	}

	.main-title {
		font-size: 3.6rem;
	}

	.main-navi {
		inline-size: 26rem;
	}

	.main-navi-inner {
		padding-bottom: 6rem;
		background: #f5f5f5;
	}

	.btn-search-options {
		display: none;
	}

	.base-width-pc,
	.base-width {
		max-inline-size: 120rem;
		margin-inline: auto;
	}

	.option-item {
		padding: 1.5em 1em;
	}

	.option-item2 {
		padding: 4.5rem 1em;
		border-top: 0.4rem solid #fff;
	}

	.option-title {
		font-size: 1.8rem;
	}

	.results-info {
		font-size: 2rem;
	}

	.result-wrap {
		flex: 1 0;
		width: 100%;
		min-width: 72rem;
		margin-left: 5rem;
	}

	.scroll-fix-wrap {
		position: sticky;
		top: 0;
	}

	.result-header-container {
		font-size: 1.2rem;
		background-color: #fff;
		position: sticky;
		top: 0;
	}

	.outer-base-width {
		padding-inline: 1.5%;
	}

	.base-width-pc,
	.base-width {
		max-inline-size: 120rem;
		margin-inline: auto;
	}

	.bdr-top-wh {
		border-top: solid 2px #fff;
	}

	.result-header,
	.result-body {
		margin-right: 4rem;
	}

	.result-body {
		border-bottom: 1px solid #d0d0d0;
	}

	.prod-header-column-container .row {
		position: relative;
	}

	.prod-header-column-container .row {
		height: 30rem;
		scroll-snap-type: x mandatory;
	}

	.prod-header-column-container .column,
	.td-column .row .column {
		width: 18.5rem;
		border-right: solid 1px #d0d0d0;
	}

	.prod-header-column-container .column {
		height: inherit;
		padding: 1.5rem 1.5rem 0 1.5rem;
	}

	.result-body .td-column .row .column {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.prod-name {
		font-size: 2.4rem;
		margin-bottom: 12%;
	}

	.list-prod-link {
		margin-top: 0.8rem;
	}

	.list-prod-link span {
		border: 1px solid #000;
		padding: 0 0.5rem;
	}

	.category-row {
		height: 3.5rem;
	}

	/* NEXT/PREV */
	.side-scroll-btn {
		width: 4rem;
		height: 4rem;
		background-repeat: no-repeat;
		background-position: left 0.5em center;
		background-size: auto 3rem;
		cursor: pointer;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
	}

	.side-scroll-btn {
		display: none;
	}

	.side-scroll-btn.hovering {
		opacity: 0.6;
	}

	#resultPrev {
		background-image: url('/assets/common/images/chevron-left-solid.svg');
		left: -4rem;
	}

	#resultNext {
		background-image: url('/assets/common/images/chevron-right-solid.svg');
		right: -4rem;
	}

	.page-footer {
		padding-left: 31rem;
		padding-right: 4rem;
	}
}

@keyframes mmfadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes mmfadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}