@charset "utf-8";

:root {
	/* base */
	--cts-gutter: clamp(30px, -2.1875rem + 8.75vw, 65px);/*375-768*/
	--cts-width: 1510px;

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;      
	/* Zen Kaku Gothic New
	Medium 500
	Bold 700
	*/

	/* color */
	--color-white-1: #FFFFFF;
	--color-gray-1: #EFEFEF;
	--color-gray-2: #ECECEC;
	--color-gray-3: #E3E3E3;
	--color-gray-4: #E6E6E6;
	--color-gray-5: #A3A3A3;
	--color-gray-6: #727272;
	--color-gray-7: #D6D6D6;
	--color-gray-8: #C5C5C5;
	--color-gray-9: #484848;
	--color-black-1: #000000;
	--color-black-2: #262626;
	--color-blue-1: #004DA0;
	--color-blue-2: #001E60;
	--color-blue-3: #00A2E6;
}

/* LP共通汎用
____________________*/
body {
	padding-right: 0 !important;
	overflow: visible !important;
}
#container a, #container a span {
    color: inherit;
    text-decoration: none;
}
.pagetop {
	display: none;	
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}
figure {
	margin: 0;
	text-align: center;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
.l-header {
    width: 100%;
    background: #fff;
    position: relative;
}
.c-breadcrumb--gray {
	display: flex;
	align-items: center;
}
.bnr_link_win11_wrap {
    margin: 0 auto;
}
.bnr_link_win11 img {
    transition: opacity 0.3s;
    width: 300px;
}
.bnr_link_win11 img:hover {
	opacity: 0.75;
}
.BreadcrumbList_wrap {
	background: #fff;
	position: relative;
    z-index: 2;
}
.footer-wrap {
    background: #fff;
    position: relative;
    z-index: 2;
}
@media screen and (max-width: 1280px) {
    .l-header {
        z-index: 10;
    }
}
@media screen and (min-width: 768px), print and (min-width: 768px) {
	.c-breadcrumb__list.u-pc-width,
	.bnr_link_win11_wrap.u-pc-width {
		padding-inline: 30px;
	}
	.bnr_link_win11_wrap.u-pc-width {
		width: auto;
	}
}
@media screen and (max-width: 1000px) {
	.c-breadcrumb--gray {
		display: inherit;
	}
	.bnr_link_win11_wrap {
		width: 100%;
		margin: 10px auto 0 !important;
		padding-block-end: 10px;
	}
	.bnr_link_win11 {
		width: 100%;
		margin-top: 0;
		text-align: center;
	}
}
.contents__wrap {
	width: 100%;
	background: var(--cts-color1);
	margin-inline: auto;
	font-family: var(--dp-font-jp);
	letter-spacing: 0.05em;
	color: var(--color-black-2);
}
.contents__wrap img {
	max-width: 100%;
	vertical-align: bottom;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}
.flash:hover {
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}
@keyframes hover-flash {
	0% {
		opacity: .3;
	}
	100% {
		opacity: .85;
	}
}

/* コンテンツ
____________________*/
::selection {
	color: var(--color-white-1);
	background-color: var(--color-blue-2);
}
.contents__wrap {
	/* margin-bottom: 100px; */
	background: var(--color-gray-1);
	position: relative;
	z-index: 1;
}
.contents__wrap::before {
	content: "";
	width: clamp(11.1875rem, 25.502vw + 5.207rem, 35.8125rem);
	height: clamp(20.8125rem, 47.379vw + 9.704rem, 66.5625rem);
	background: url(../../../contents/ai-pc-new/img/deco-1.webp) no-repeat right top/contain;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
.contents__inner {
	width: 100%;
	max-width: var(--cts-width);
	margin-inline: auto;
	padding-inline: var(--cts-gutter);
	box-sizing: border-box;
	position: relative;
}
.txt-block {
	padding-left: clamp(1.5625rem, 1.294vw + 1.259rem, 2.8125rem);
	position: relative;
}
.txt-block::before {
	content: "";
	width: clamp(0.375rem, 0.259vw + 0.314rem, 0.625rem);
	height: 100%;
	background: var(--color-blue-2);
	position: absolute;
	top: 0;
	left: 0;
}
.recommended-block + .txt-block,
.txt-block + .txt-block {
	margin-top: clamp(5.9375rem, 4.531vw + 4.875rem, 10.3125rem);
}
.ttl-h2 {
	font-size: clamp(1.125rem, 1.424vw + 0.791rem, 2.5rem);
	font-weight: 700;
	line-height: 1.4;
	text-shadow:
/* 上下左右 */
     5px  0px 0 #efefef, -5px  0px 0 #efefef,
     0px  5px 0 #efefef,  0px -5px 0 #efefef,
    /* 斜め（4隅） */
     4px  4px 0 #efefef, -4px  4px 0 #efefef,
     4px -4px 0 #efefef, -4px -4px 0 #efefef,
    /* 隙間を埋めるための中間数値 */
     5px  2px 0 #efefef, -5px  2px 0 #efefef,
     5px -2px 0 #efefef, -5px -2px 0 #efefef,
     2px  5px 0 #efefef, -2px  5px 0 #efefef,
     2px -5px 0 #efefef, -2px -5px 0 #efefef;
}
.ttl-h2 + .txt-normal {
	margin-top: 3em;
}
.txt-normal {
	font-size: clamp(0.75rem, 0.259vw + 0.689rem, 1rem);
	font-weight: 500;
	line-height: 1.7;
	margin-top: 1em;
	text-shadow:
	/* 上下左右 */
     5px  0px 0 #efefef, -5px  0px 0 #efefef,
     0px  5px 0 #efefef,  0px -5px 0 #efefef,
    /* 斜め（4隅） */
     4px  4px 0 #efefef, -4px  4px 0 #efefef,
     4px -4px 0 #efefef, -4px -4px 0 #efefef,
    /* 隙間を埋めるための中間数値 */
     5px  2px 0 #efefef, -5px  2px 0 #efefef,
     5px -2px 0 #efefef, -5px -2px 0 #efefef,
     2px  5px 0 #efefef, -2px  5px 0 #efefef,
     2px -5px 0 #efefef, -2px -5px 0 #efefef;
}
.gray {
	color: var(--color-gray-6);
}
.contents__wrap .deco {
	width: clamp(10.0625rem, 26.149vw + 3.929rem, 35.3125rem);
	position: absolute;
	z-index: 0;
}
.contents__wrap .deco.area-1,
.contents__wrap .deco.area-3,
.contents__wrap .deco.area-5,
.contents__wrap .deco.area-7 {
	left: 0;
}
.contents__wrap .deco.area-2,
.contents__wrap .deco.area-4,
.contents__wrap .deco.area-6 {
	right: 0;
}
.contents__wrap .deco.area-1 {
	top: clamp(86.25rem, -1.942vw + 89.204rem, 88.125rem);
}
.contents__wrap .deco.area-2 {
	top: clamp(163.125rem, -51.133vw + 282.916rem, 162.5rem);
}
.contents__wrap .deco.area-3 {
	top: clamp(272.25rem, 16.181vw + 243.325rem, 296.875rem);
}
.contents__wrap .deco.area-4 {
	top: clamp(336.875rem, 36.893vw + 293.220rem, 372.5rem);
}
.contents__wrap .deco.area-5 {
	bottom: 354.375rem;
}
.contents__wrap .deco.area-6 {
	bottom: clamp(228.125rem, -28.479vw + 262.311rem, 255.625rem);
}
.contents__wrap .deco.area-7 {
	bottom: clamp(166.25rem, -18.123vw + 203.003rem, 183.75rem);
}
@media (max-width: 768px) {/*375-768*/
.pc {
	display: none !important;
}
.sp {
	display: block !important;
}

.contents__wrap {
	padding-bottom: 0;
}
}
/* mv
____________________*/
.contents--mv {
	background: var(--color-blue-1);
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.contents--mv .ttl-h1 {
	position: relative;
	z-index: 1;
	width: 100%;
}
.contents--mv .ttl-h1 img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
/* intro
____________________*/
.contents--intro {
	padding-top: clamp(3.75rem, 5.825vw + 2.384rem, 9.375rem);
	width: 100%;
	position: relative;
	z-index: 1;
}
.txt-xl {
	font-size: clamp(2.5rem, 2.589vw + 1.893rem, 5rem);
	font-weight: 700;
	line-height: 1;
}
.txt-xl + .ttl-h2 {
	margin-top: 1em;
}
.intro-card-wrap {
	width: 100%;
	display: flex;
	gap: clamp(2.625rem, -1.812vw + 4.799rem, 4.375rem);
	margin-top: clamp(5.3125rem, 3.883vw + 4.402rem, 9.0625rem);
}
.intro-card {
	width: 50%;
	padding: clamp(1.875rem, 0.647vw + 1.723rem, 2.5rem);
	background: var(--color-white-1);
	border-radius: 13px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* ↓アニメーションを滑らかにするための設定を追加 */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.intro-card:hover {
	transform: translateY(-8px); /* 上方向に8px移動 */
	box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2); /* （お好みで）影を少し強調すると浮き出た感じが強まります */
}
.intro-card .intro-card-icon {
	width: clamp(4.5625rem, 3.042vw + 3.849rem, 7.5rem);
	position: absolute;
	left: 50%;
    top: clamp(-5.9375rem, -2.589vw - 2.830rem, -3.4375rem);
	transform: translateX(-50%);
	z-index: 2;
}
.intro-card .ttl-h3 {
	font-size: clamp(1.125rem, 0.453vw + 1.019rem, 1.5625rem);
	font-weight: 700;
	line-height: 1.4;
}
.intor-card-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px 30px;
	margin-top: clamp(0.9375rem, 0.971vw + 0.747rem, 1.875rem);
}
.intor-card-list li {
	font-size: clamp(0.75rem, 0.259vw + 0.689rem, 1rem);
	font-weight: 500;
	line-height: 1.4;
	position: relative;
}
.intor-card-list li::before {
	content: "●";
}
@media (max-width: 768px) {/*375-768*/
	.intro-card-wrap {
		width: 100%;
		flex-direction: column;
	}
	.intro-card {
		width: 100%;
	}
}
/* about
____________________*/
.contents--about {
	padding-top: clamp(5.625rem, 8.738vw + 3.578rem, 14.0625rem);
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.about-wrap {
	width: 100%;
	position: relative;
	z-index: 2;
}
.about-wrap .about-wrap-left {
	width: 68.4%;
	position: relative;
	z-index: 2;
}
.recommended-block {
	width: 100%;
	padding: 
		clamp(1.875rem, 0.647vw + 1.723rem, 2.5rem)   /* 上 */
		clamp(0.9375rem, 1.618vw + 0.558rem, 2.5rem) /* 左右 */
		0.9375rem;
	margin-top: clamp(3.75rem, 1.618vw + 3.371rem, 5.3125rem);
	background: var(--color-white-1);
	border-radius: 13px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
	position: relative;
	z-index: 2;
}
.recommended-block .ttl-h3 {
	font-size: clamp(1.125rem, 0.453vw + 1.019rem, 1.5625rem);
	font-weight: 700;
	text-align: center;
}
.recommended-point-list {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 10px;
	margin-top: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
}
.recommended-point {
	padding: 
		clamp(0.6875rem, 0.518vw + 0.566rem, 1.1875rem)
		clamp(0rem, 0.324vw - 0.076rem, 0.3125rem);
	display: flex;
	align-items: center;
	gap: clamp(0.375rem, 0.259vw + 0.314rem, 0.625rem);	
}
.recommended-point:nth-of-type(n+3) {
	border-top: 1px solid var(--color-gray-5);
}
.recommended-point--icon {
	width: clamp(2.6875rem, 0.583vw + 2.551rem, 3.25rem);
}
.txt-recommended-point {
	font-size: clamp(0.75rem, 0.259vw + 0.689rem, 1rem);
	font-weight: 500;
	line-height: 1.5;
}
.contents--about .about-img {
	width: 29%;
    position: absolute;
    right: 3.5%;
    top: 12vw;
    z-index: 1;
}
.contents--about .about-img.ai {
	width: 26.7%;
    position: absolute;
    right: 4.5%;
    top: 12vw;
    z-index: 1;
}
/* アニメーション用追加CSS */
.contents--about .about-img img {
	display: block;
	width: 100%;
	height: auto;
	will-change: transform; /* アニメーションのパフォーマンス向上 */
}
@media (max-width: 768px) {/*375-768*/
	.about-wrap .about-wrap-left {
		width: 100%;
	}
	.about-wrap .about-img {
		display: none;
	}
	.recommended-point-list {
		grid-template-columns: 1fr;
	}
	.recommended-point:nth-of-type(2) {
		border-top: 1px solid var(--color-gray-5);
	}
	.contents--about .about-img,
	.contents--about .about-img.ai {
		top: 7vw;
	}
}
/* benchmark
____________________*/
.contents--benchmark {
	padding-top: clamp(3.75rem, 0.971vw + 3.522rem, 4.6875rem);
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.benchmark-block .ttl-h3 {
	font-size: clamp(1.125rem, 0.453vw + 1.019rem, 1.5625rem);
	font-weight: 700;
	line-height: 1.7;
}
.benchmark-item-wrap {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.6875rem, 0.388vw + 0.597rem, 1.0625rem);
    margin-top: clamp(1.5625rem, 1.942vw + 1.107rem, 3.4375rem);
	padding-block: 4px;
}
.benchmark-item {
	width: clamp(11.8125rem, 9.191vw + 9.658rem, 20.6875rem);
    background: var(--color-white-1);
	padding: 
	clamp(1.25rem, 0.971vw + 1.022rem, 2.1875rem)
	clamp(0.875rem, 1.683vw + 0.481rem, 2.5rem)
	clamp(1.25rem, 1.294vw + 0.947rem, 2.5rem);
    border-radius: 13px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    position: relative;
}
.benchmark-tag {
	color: var(--color-blue-2);
	font-size: clamp(1.125rem, 0.453vw + 1.019rem, 1.5625rem);
	font-weight: 700;
	line-height: 1;
	width: clamp(5.875rem, 2.654vw + 5.253rem, 8.4375rem);
	height: clamp(2rem, 0.841vw + 1.803rem, 2.8125rem);
	border: 2px solid var(--color-blue-2);
	border-radius: 9999px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.llm-name {
	font-size: clamp(0.875rem, 0.388vw + 0.784rem, 1.25rem);
	font-weight: 700;
	line-height: 1;
	margin-top: clamp(0.625rem, 0.324vw + 0.549rem, 0.9375rem);
}
.llm-features {
	font-size: clamp(0.75rem, 0.259vw + 0.689rem, 1rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	padding: 
		clamp(0.875rem, 0.388vw + 0.784rem, 1.25rem)
		clamp(0.4375rem, 0.518vw + 0.316rem, 0.9375rem);
	margin-top: clamp(0.625rem, 0.647vw + 0.473rem, 1.25rem);
	background: var(--color-gray-7);
}
.uses-block {
	border: 1px solid var(--color-gray-5);
	padding: 
		0.625rem
		clamp(0.625rem, 0.647vw + 0.473rem, 1.25rem)
		clamp(0.9375rem, 0.324vw + 0.861rem, 1.25rem);
	margin-top: clamp(1.25rem, 0.647vw + 1.098rem, 1.875rem);
}
.uses-block .ttl-h4 {
	font-size: clamp(0.75rem, 0.388vw + 0.659rem, 1.125rem);
	font-weight: 700;
	line-height: 1;
	text-align: center;
}
.uses-list {
	display: flex;
	flex-direction: column;
	gap: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
	margin-top: 15px;
}
.uses-list li {
	font-size: clamp(0.5625rem, 0.453vw + 0.456rem, 1rem);
	font-weight: 500;
	letter-spacing: 0;
	position: relative;
}
.uses-list li::before {
	content: "・";
}
@media (max-width: 768px) {/*375-768*/
	.benchmark {
		padding-right: 0;
	}
	.benchmark-block .ttl-h3 {
		padding-right: var(--cts-gutter);
	}
	.benchmark .txt-normal {
		padding-right: var(--cts-gutter);
	}
}
/* line-up
____________________*/
.contents--line-up {
	padding-top: clamp(5.625rem, 8.738vw + 3.578rem, 14.0625rem);
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.contents--line-up .deco-img {
	width: 30vw;
	position: absolute;
	z-index: 1;
}
.line-up-wrap {
	position: relative;
    z-index: 2;
}
.line-up-wrap .ttl-h3 {
	font-size: clamp(1.125rem, 0.453vw + 1.019rem, 1.5625rem);
	font-weight: 700;
	line-height: 1;
}
.line-up-category-block {
	margin-top: 25px;
}
.line-up-category-block:nth-of-type(n+2) {
	margin-top: clamp(2.5rem, 1.942vw + 2.045rem, 4.375rem);
}
.line-up-category-block .ttl-h4 {
	color: var(--color-gray-6);
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
}
/* ベースのスタイル */
.line-up-item-wrap {
	width: 100%;
    max-width: 1284px;
    display: flex; /* Flexboxに変更 */
    flex-wrap: nowrap; /* 折り返さない（デフォルト値なので省略可） */
    gap: clamp(0.5625rem, 0.971vw + 0.335rem, 1.5rem);
    margin-top: 20px;
}
.line-up-item {
	width: clamp(14.6875rem, 4.401vw + 13.656rem, 18.9375rem);
	background: var(--color-white-1);
	padding: 
		clamp(1.5625rem, 0.324vw + 1.486rem, 1.875rem)
		clamp(1.25rem, 0.971vw + 1.023rem, 2.1875rem);
	border-radius: 13px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.line-up-item .catch {
	font-size: clamp(0.8125rem, 0.194vw + 0.767rem, 1rem);
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	display: block;
	padding-left: clamp(0.375rem, 0.130vw + 0.344rem, 0.5rem);
}
.line-up-item .catch::before {
	content: "";
	width: clamp(0.125rem, 0.065vw + 0.110rem, 0.1875rem);
	height: 100%;
	background: var(--color-blue-2);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.model-name {
	font-size: clamp(0.8125rem, 0.194vw + 0.767rem, 1rem);
	font-weight: 700;
	margin-top: 10px;
}
.model-img-block {
	width: 100%;
	position: relative;
	z-index: 1;
	padding-top: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
	margin-top: clamp(0.9375rem, 0.971vw + 0.710rem, 1.875rem);
}
.model-img-block:not(:has(.txt-size)) {
	padding-top : 0;
}
.model-img-block .txt-size  {
	font-size: clamp(0.5rem, 0.194vw + 0.455rem, 0.6875rem);
	font-weight: 700;
	line-height: 1;
	padding: 
		clamp(0.25rem, 0.130vw + 0.219rem, 0.375rem)
		clamp(0.375rem, 0.130vw + 0.344rem, 0.5rem);
	background: var(--color-gray-2);
	border-radius: 9999px;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.txt-size-number {
	font-size: clamp(0.8125rem, 0.324vw + 0.736rem, 1.125rem);
}
.model-img-block .model-img {
	width: 70%;
	display: block;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}
.model-price {
	font-size: clamp(1.125rem, 0.194vw + 1.079rem, 1.3125rem);
	font-weight: 700;
	line-height: 1;
	margin-top: 15px;
}
.tax {
	font-size: clamp(0.6875rem, 0.130vw + 0.657rem, 0.8125rem);
}
.spec-list {
	margin-top: 10px;
	margin-bottom: 0.69vw;
}
.spec-list li {
	font-size: clamp(0.6875rem, 0.259vw + 0.627rem, 0.9375rem);
	letter-spacing: 0;
	border-top: 1px solid var(--color-gray-4);
	padding-block: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
}
.model-link-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.552vw;
    margin-top: auto;
}

/* Base Styles (デフォルト：青) */
.model-link {
    /* 初期状態（青背景・白テキスト・白矢印・青ボーダー） */
    --bg-color: var(--color-blue-1);
    --text-color: #fff;
    --border-color: var(--color-blue-1);
    --arrow-color: #fff;

    /* ホバー時（薄い青背景・白テキスト・白矢印） */
    --hover-bg-color: #0062ca; /* 薄い青（必要に応じて色コードを変更してください） */
    --hover-text-color: #fff;
    --hover-arrow-color: #fff;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.8em 1em;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: clamp(0.6875rem, 0.259vw + 0.627rem, 0.9375rem);
    text-decoration: none;
    overflow: hidden;
    transition: color 0.3s ease;
    z-index: 1;
}

/* 矢印 (くの字) */
.model-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2em;
	width: clamp(0.46875rem, 0.08vw + 0.45rem, 0.703125rem);
	height: clamp(0.46875rem, 0.08vw + 0.45rem, 0.703125rem);
    border-top: 2px solid var(--arrow-color);
    border-right: 2px solid var(--arrow-color);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 0.3s ease;
    z-index: 2;
}

/* ホバー時の背景描画アニメーション (左から右) */
.model-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hover-bg-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: -1;
}

/* --- カラーバリエーション --- */

/* Black (黒背景・白テキスト・白矢印・黒ボーダー ➔ hover: 濃いグレー背景・白テキスト・白矢印) */
.model-link.black {
    --bg-color: #000;
    --text-color: #fff;
    --border-color: #000;
    --arrow-color: #fff;

    --hover-bg-color: #333; /* 濃いグレー */
    --hover-text-color: #fff;
    --hover-arrow-color: #fff;
}

/* White (白背景・黒テキスト・黒矢印・黒ボーダー ➔ hover: 薄いグレー背景・黒テキスト・黒矢印) */
.model-link.white {
    --bg-color: #fff;
    --text-color: #000;
    --border-color: #000;
    --arrow-color: #000;

    --hover-bg-color: #e5e5e5; /* 薄いグレー */
    --hover-text-color: #000;
    --hover-arrow-color: #000;
}

/* --- ホバー状態 --- */
.model-link:hover {
    color: var(--hover-text-color);
    --arrow-color: var(--hover-arrow-color);
}

.model-link:hover::before {
    transform: scaleX(1);
}

@media (max-width: 768px) {/*375-768*/
	.line-up {
		padding-right: 0;
	}
}
/* ai-demo
____________________*/
.contents--ai-demo {
	padding-top: clamp(3.125rem, 0.647vw + 2.973rem, 3.75rem);
	position: relative;
	z-index: 1;
}
#ai-demo-root .aid-card {
	width: 100%;
	max-width: inherit;
	border-color: var(--color-gray-6);
}
.ai-head {
    padding-left: 25px !important;
    position: relative;
}
.ai-head::before {
    content: "";
    width: clamp(0.375rem, 0.259vw + 0.314rem, 0.625rem);
    height: 100%;
    background: var(--color-blue-2);
    position: absolute;
    top: 0;
    left: 0;
}
.txt-ai-head {
	font-size: clamp(0.75rem, 0.259vw + 0.689rem, 1rem);
	font-weight: 500;
	line-height: 1.7;
}
.txt-ai-head:nth-of-type(n+2) {
	margin-top: 0.5em !important;
}
.txt-ai-head.bold {
	font-weight: 700;
}
#ai-demo-root .aid-prompt-btns {
	gap: clamp(0.375rem, 1.553vw + 0.011rem, 1.875rem);
	margin-top: 20px;
}
#ai-demo-root .aid-prompt-btn {
	width: 100%;
	max-width: 198px;
	color: var(--color-black-2);
	font-size: 0.875rem;
	text-align: center;
	border-color: var(--color-black-2);
}
#ai-demo-root .aid-prompt-btn[aria-pressed="true"] {
	background: var(--color-blue-2);
	border-color: var(--color-blue-2);
}
#ai-demo-root .aid-prompt-btn:hover {
	background: var(--color-gray-2);
    border-color: var(--color-blue-2);
	color: var(--color-blue-2);
}
#ai-demo-root .aid-prompt-btn[aria-pressed="true"]:hover {
	background: var(--color-blue-2);
	color: var(--color-white-1);
}
#ai-demo-root .aid-prompt-box {
	background: var(--color-gray-1);
}
#ai-demo-root .aid-prompt-label {
	color: var(--color-gray-6);
	font-size: clamp(0.75rem, 0.129vw + 0.720rem, 0.875rem);
	font-weight: 500;
	line-height: 1;
	margin-bottom: 0.5em;
}
#aid-prompt-text {
	color: var(--color-black-2);
	font-size: clamp(0.75rem, 0.129vw + 0.720rem, 0.875rem);
	font-weight: 500;
	line-height: 1.7;
}
#ai-demo-root .aid-tier-label {
	color: var(--color-gray-5);
	font-size: clamp(0.75rem, 0.129vw + 0.720rem, 0.875rem);
}
#ai-demo-root .aid-tier-btn {
	color: var(--color-black-2);
	border-color: var(--color-gray-6);
}
#ai-demo-root .aid-tier-btn[aria-pressed="true"] {
	background: var(--color-blue-2);
	border-color: var(--color-blue-2);
}
#ai-demo-root .aid-tier-btn[aria-pressed="true"]:hover {
	color: var(--color-white-1);
	background: var(--color-blue-2);
	border-color: var(--color-blue-2);
}
#ai-demo-root .aid-tier-btn:hover {
    border-color: var(--color-black-2);
    color: var(--color-black-2);
    background: var(--color-gray-2);
}
#ai-demo-root .aid-tier-btn .aid-grade {
	color: var(--color-black-2);
}
#ai-demo-root .aid-side-label {
	color: var(--color-gray-5);
	font-size: clamp(0.75rem, 0.129vw + 0.720rem, 0.875rem);
}
/* ラッパー要素 */
#ai-demo-root .aid-select-wrap {
    position: relative;
    width: 100%;
}

/* セレクトボックス本体 */
#ai-demo-root .aid-side-select {
    width: 100%;
    font-size: 0.8rem;
    border: 1px solid var(--color-gray-6);
    background: var(--color-white-1);
    color: var(--aid-text);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none !important;
}
/* くの字矢印 */
#ai-demo-root .aid-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: clamp(0.3125rem, 0.051vw + 0.3rem, 0.46875rem);
    height: clamp(0.3125rem, 0.051vw + 0.3rem, 0.46875rem);
    /* 下向きの「くの字」にするため border-bottom と border-right に指定 */
    border-bottom: 2px solid var(--color-gray-6);
    border-right: 2px solid var(--color-gray-6);
    /* 回転させて上下中央に配置 */
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none; /* クリックを通過させる */
}
#ai-demo-root .aid-panel {
	border-color: var(--color-gray-6);
}
#ai-demo-root .aid-panel-head {
	background: var(--color-gray-1);
}
#ai-demo-root .aid-gpu-name {
	color: var(--color-black-2);
	font-size: 0.8rem;
}
#ai-demo-root .aid-gpu-sub {
	font-size: 0.812rem;
	font-weight: 500;
	color: var(--color-black-2);
}
#ai-demo-root .aid-gpu-bench {
    font-size: 0.812rem;
	font-weight: 500;
    color: var(--color-black-2);
}
img.bench-icon {
    vertical-align: text-bottom;
    margin-right: 0.3em;
}
#ai-demo-root .aid-bench-tag {
	color: var(--color-black-2);
	font-size: 0.687rem;
	font-weight: 500;
	background: none;
}
#ai-demo-root .aid-footnote {
	color: var(--color-black-2);
	font-size: 0.812rem;
	font-weight: 500;
}
#ai-demo-root .aid-run-btn {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    background: var(--color-blue-2);
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;
    margin-inline: auto;
    display: block;
    /* アニメーションのスムーズさを設定（移動・色変化などを0.3秒で滑らかに） */
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
#ai-demo-root .aid-disclosure {
	border: none;
}
#ai-demo-root .aid-disclosure summary {
	color: var(--color-blue-2);
	font-size: 1rem;
}
/* varm-graph
____________________*/
.contents--varm {
	padding-top: clamp(5rem, 4.531vw + 3.938rem, 9.375rem);
	position: relative;
	z-index: 1;
}
.varm-graph {
	background: var(--color-white-1);
	padding: 
		clamp(1.875rem, 0.971vw + 1.647rem, 2.8125rem)
		clamp(1.25rem, 2.589vw + 0.643rem, 3.75rem)
		clamp(1.875rem, 0.324vw + 1.799rem, 2.1875rem);
    border-radius: 13px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
}
.varm-graph .ttl-h3 {
	font-size: clamp(1.125rem, 0.453vw + 1.019rem, 1.5625rem);
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
}
.varm-graph .txt-normal {
	text-align: center;
}
.description-flex-wrap {
	width: 100%;
	background: var(--color-gray-1);
	display: flex;
	padding: clamp(0.9375rem, 0.647vw + 0.786rem, 1.5625rem);
	margin-top: clamp(1.25rem, 0.647vw + 1.098rem, 1.875rem);
}
.description-flex-inner {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.txt-description {
	font-size: clamp(0.75rem, 0.259vw + 0.689rem, 1rem);
	font-weight: 500;
	line-height: 1.7;
}
.txt-description .navy {
	color: var(--color-blue-2);
}
.graph {
	width: 100%;
	margin-top: clamp(1.875rem, 0.324vw + 1.799rem, 2.1875rem);
}
.graph-note {
	font-size: clamp(0.6875rem, 0.324vw + 0.612rem, 1rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.05em;
	text-align: center;
	width: 100%;
	border-top: 1px solid var(--color-gray-6);
	padding-top: clamp(0.9375rem, 0.971vw + 0.710rem, 1.875rem);
	margin-top: clamp(0.9375rem, 0.324vw + 0.862rem, 1.25rem);
}
@media (max-width: 768px) {/*375-768*/
	.varm-graph .txt-normal {
		text-align: left;
	}
	.description-flex-wrap {
		flex-direction: column;
	}
	.description-flex-inner {
		width: 100%;
	}
	.description-flex-inner:nth-of-type(2) {
		margin-top: 1em;
	}
}
/* features
____________________*/
.contents--features {
	padding-top: clamp(6.25rem, 8.414vw + 4.280rem, 14.375rem);
	padding-bottom: clamp(2.8125rem, 6.796vw + 1.219rem, 9.375rem);
	position: relative;
	z-index: 1;
}
.features-item-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 
		clamp(1.5rem, 0.712vw + 1.333rem, 2.1875rem)
		clamp(1.5rem, 1.294vw + 1.197rem, 2.75rem);
	margin-top: clamp(2.1875rem, 1.294vw + 1.884rem, 3.4375rem);
}
.features-item {
	width: calc(50% - clamp(1.5rem, 0.712vw + 1.333rem, 2.1875rem));
	padding: 
	clamp(1.875rem, 0.971vw + 1.647rem, 2.8125rem)
	clamp(1.25rem, 1.294vw + 0.947rem, 2.5rem);
    background: var(--color-white-1);
    border-radius: 13px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.inner-txt-block {
	padding-left: clamp(1rem, 0.777vw + 0.818rem, 1.75rem);
    position: relative;
}
.inner-txt-block::before {
    content: "";
    width: 5px;
    height: 100%;
    background: var(--color-gray-6);
    position: absolute;
    top: 0;
    left: 0;
}
.features-item .point-tag {
	color: var(--color-white-1);
	font-size: clamp(0.6875rem, 0.453vw + 0.581rem, 1.125rem);
	font-weight: 700;
	background: var(--color-blue-2);
	padding: 0.25rem clamp(0.4375rem, 0.324vw + 0.362rem, 0.75rem);
    display: inline-block;
}
.features-item .ttl-h3 {
	font-size: clamp(1.125rem, 0.453vw + 1.019rem, 1.5625rem);
	font-weight: 700;
	line-height: 1.7;
	margin-top: clamp(0.625rem, 0.324vw + 0.549rem, 0.9375rem);
}
.features-item .txt-normal {
	letter-spacing: 0.02em;
	text-shadow: none;
}
@media (max-width: 768px) {/*375-768*/
	.features-item-wrap {
		flex-direction: column;
	}
	.features-item {
		width: 100%;
	}
}
/* faq
____________________*/
.contents--faq {
	padding-top: clamp(1.25rem, 0.971vw + 1.022rem, 2.1875rem);
	padding-bottom: clamp(2.8125rem, 2.913vw + 2.129rem, 5.625rem);
	background: var(--color-gray-3);
	position: relative;
	z-index: 3;
}
.faq .ttl-h2 {
	text-shadow: none;
}
/* 2カラムレイアウト（PC・タブレット用） */
.faq-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2列 */
	gap: 0 26px;
	align-items: start;
	margin-top: clamp(1.25rem, 0.647vw + 1.098rem, 1.875rem);
}

/* 個々のFAQアイテム */
.faq-item {
	border-top: 1px solid var(--color-gray-5);
	overflow: hidden;
}
.faq-item:nth-last-of-type(1),
.faq-item:nth-last-of-type(2) {
	border-bottom: 1px solid var(--color-gray-5);
}
/* Question (ボタン部分) */
.faq-question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 
		clamp(1.25rem, 0.388vw + 1.159rem, 1.625rem)
		clamp(0.625rem, 0.647vw + 0.473rem, 1.25rem)
		clamp(1.25rem, 0.388vw + 1.159rem, 1.625rem)
		clamp(0.9375rem, 2.265vw + 0.407rem, 3.125rem);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: clamp(0.8125rem, 0.388vw + 0.721rem, 1.1875rem);
	font-weight: bold;
	line-height: 1.5;
	transition: background-color 0.2s ease;
}

.faq-question:hover {
	background-color: var(--color-gray-2);
}

/* ⊕ / ⊖ アイコンをCSSで作る */
.faq-icon {
	position: relative;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	margin-left: 12px;
	border: 2px solid var(--color-black-2);
	border-radius: 50%;
}

/* プラス記号（横線と縦線） */
.faq-icon::before,
.faq-icon::after {
	content: "";
	position: absolute;
	background-color: var(--color-black-2);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 横線 */
.faq-icon::before {
	width: 16px;
	height: 2px;
}

/* 縦線 */
.faq-icon::after {
	width: 2px;
	height: 16px;
}

/* 展開（open）時のアイコン設定：縦線を回転・透明にしてマイナス（⊖）にする */
.faq-item.is-open .faq-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

/* Answer (開閉エリア) の高さアニメーション */
.faq-answer {
	display: grid;
	grid-template-rows: 0fr; /* 初期状態は高さ0 */
	transition: grid-template-rows 0.3s ease-out;
}

/* 展開時 */
.faq-item.is-open .faq-answer {
	grid-template-rows: 1fr; /* コンテンツに応じた高さに自動調整 */
}

.faq-answer-inner {
	overflow: hidden;
	font-size: clamp(0.8125rem, 0.194vw + 0.767rem, 1rem);
	line-height: 2;
	margin-left: clamp(0.9375rem, 2.265vw + 0.407rem, 3.125rem);
	margin-right: clamp(0.9375rem, 2.913vw + 0.254rem, 3.75rem);
	transition: padding 0.3s ease-out;
}

/* 展開時のみ内側に上下パディングを付与 */
.faq-item.is-open .faq-answer-inner {
	padding-top: clamp(1.25rem, 0.324vw + 1.174rem, 1.5625rem);
	padding-bottom: clamp(1.25rem, 0.647vw + 1.098rem, 1.875rem);
	border-top: 1px solid var(--color-gray-5);
}
/* ブロック全体：中央配置 */
.link-btn-block {
	max-width: 573px;
	width: 100%;
	margin: clamp(2.5rem, 3.236vw + 1.741rem, 5.625rem) auto 0;
}

/* ボタン基本スタイル */
.link-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 
		clamp(0.8125rem, 0.971vw + 0.585rem, 1.75rem)
		clamp(0.9375rem, 0.324vw + 0.862rem, 1.25rem);
	border-radius: 5px;
	background-color: var(--color-blue-1); /* 基本の青 */
	color: var(--color-white-1);
	font-size: clamp(0.8125rem, 0.777vw + 0.630rem, 1.5625rem);
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
}

/* 右側の「くの字」矢印 */
.link-btn::after {
	content: "";
	position: absolute;
	right: clamp(0.9375rem, 0.971vw + 0.710rem, 1.875rem);
	top: 50%;
	width: clamp(0.5625rem, 0.647vw + 0.411rem, 1.1875rem);
	height: clamp(0.5625rem, 0.647vw + 0.411rem, 1.1875rem);
	border-top: 2px solid var(--color-white-1);
	border-right: 2px solid var(--color-white-1);
	transform: translateY(-50%) rotate(45deg); /* くの字を作成 */
	transition: transform 0.3s ease;
	z-index: 2;
}

/* ホバー時に左から伸びる薄い青の背景 */
.link-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0062ca; /* 少し薄い青 */
	transform: scaleX(0);      /* 最初は横幅0 */
	transform-origin: left;    /* 左端を起点にする */
	transition: transform 0.4s ease;
	z-index: -1;               /* テキストの背後に配置 */
}

/* ホバー時の動作 */
.link-btn:hover::before {
	transform: scaleX(1);      /* 横幅を100%に広げる */
}

/* （お好みで）ホバー時に矢印を少し右に動かす場合 */
.link-btn:hover::after {
	transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 767px) {
	.faq-grid {
			grid-template-columns: 1fr;
	}
}
/* other
____________________*/
.contents--other {
	padding-top: clamp(2.1875rem, 4.207vw + 1.201rem, 6.25rem);
	padding-bottom: clamp(2.1875rem, -4.207vw + 7.236rem, 6.25rem);
	position: relative;
	z-index: 3;
}

.custom-slider-wrapper {
	position: relative;
	max-width: 1236px;
	margin: 0 auto;
	padding: 0 48px;
	box-sizing: border-box;
}

.custom-slider {
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	background-color: #ffffff;
}

.slider-track {
	display: flex;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}

.slide-item {
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
}

/* カードレイアウト (PC: 2カラム) */
.slide-card {
	display: flex;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	box-sizing: border-box;
}

/* 画像ブロック */
.slide-media {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f0eafb 0%, #edf3fe 100%);
	box-sizing: border-box;
}

.slide-media img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* コンテンツブロック */
.slide-content {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px 32px;
	text-align: center;
	box-sizing: border-box;
}

.slide-title {
	margin: 0 0 8px;
	font-size: clamp(2rem, 1.165vw + 1.727rem, 3.125rem);
	font-weight: 700;
	color: #222222;
	line-height: 1.2;
}
.slide-title.small {
	zoom: 0.9;
}
.slide-subtitle {
	margin: 0 0 20px;
	font-size: clamp(1rem, 1.682rem + 5.09vw, 1.7rem);
	font-weight: 700;
	color: #333333;
	line-height: 1.4;
}

.slide-description {
	margin: 0 0 28px;
	font-size: clamp(1rem, 0.881rem + 0.51vw, 1.125rem);
	line-height: 1.75;
	color: #555555;
	text-align: left;
}

.slide-action {
	width: 100%;
	display: flex;
	justify-content: center;
}

.slide-btn {
    display: inline-block;
    width: 100%;
    max-width: 297px;
    padding: 15px 15px;
    background-color: var(--color-blue-3);
    color: var(--color-white-1);
    font-size: clamp(1rem, 0.881rem + 0.51vw, 1.125rem);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border-radius: 2px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* 伸びる背景がはみ出ないようにマスク */
    isolation: isolate; /* z-indexのレイヤー順序をボタン内に閉じる */
    transition: background-color 0.2s ease;
}

/* ホバー時に左から描画される背景層 */
.slide-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    /* 元色(#00A2E6)の上に白透過を乗せて少し明るく薄い青にする指定 */
    /* 明確な色コードを指定したい場合は #33B5EB 等に変更可能です */
    background-color: rgba(255, 255, 255, 0.25);
    transform: scaleX(0);
    transform-origin: left center; /* 左端から右へ伸ばす */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* ホバー時のアニメーション実行 */
.slide-btn:hover::before {
    transform: scaleX(1);
}

.slide-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.2em;
    width: clamp(0.46875rem, 0.08vw + 0.45rem, 0.703125rem);
    height: clamp(0.46875rem, 0.08vw + 0.45rem, 0.703125rem);
    border-top: 2px solid var(--color-white-1);
    border-right: 2px solid var(--color-white-1);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 0.3s ease;
    z-index: 2; /* 背景(z-index: 1)の上に矢印を表示 */
}
/* PC 矢印ボタン */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 2;
}

.slider-arrow::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-top: 3px solid var(--color-gray-9);
    border-right: 3px solid var(--color-gray-9);
}

.slider-arrow-prev {
	left: 12px;
}
.slider-arrow-prev::before {
	transform: rotate(-135deg);
	margin-left: 4px;
}

.slider-arrow-next {
	right: 12px;
}
.slider-arrow-next::before {
	transform: rotate(45deg);
	margin-right: 4px;
}

.slider-arrow:disabled {
	opacity: 0.2;
	cursor: default;
}

/* ドットインジケーター */
.slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.slider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color-gray-8);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.slider-dot.is-active {
	background-color: var(--color-blue-3);
	transform: scale(1.1);
}

.other .ttl-h2 {
	text-align: center;
	margin-top: clamp(5.625rem, 2.913vw + 4.942rem, 8.4375rem);
}
.bnr-wrap {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 
	clamp(0.625rem, 0.841vw + 0.428rem, 1.4375rem)
	clamp(0.6875rem, 1.100vw + 0.429rem, 1.75rem);
	margin-top: clamp(2.5rem, 3.883vw + 1.589rem, 6.25rem);
}
/* スマホ対応 (SP: 1カラム化) */
@media (max-width: 768px) {
	.custom-slider-wrapper {
		padding: 0;
	}

	.slide-card {
		flex-direction: column;
		min-height: auto;
	}

	.slide-media {
		flex: none;
		width: 100%;
	}

	.slide-content {
		flex: none;
		width: 100%;
		padding: 28px 20px 32px;
	}

	.slide-subtitle {
		font-size: 0.95rem;
		margin-bottom: 16px;
	}

	.slide-description {
		font-size: 0.8125rem;
		margin-bottom: 24px;
	}

	.slide-btn {
		max-width: 100%;
	}

	/* SP時は矢印を非表示にしてドットを中心に操作 */
	.slider-arrow {
		display: none;
	}

	.bnr-wrap {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* スクロールバー */
.line-up-item-wrap,
.benchmark-item-wrap {
	overflow-x: auto !important;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;

	/* --- Firefox など標準規格用 --- */
	/* thin（細め）に指定すると、標準ブラウザでも矢印ボタンが非表示になります */
	scrollbar-color: var(--color-gray-5) transparent;
	scrollbar-width: thin; 
}
.line-up-item-wrap > * {
    /* 1. 絶対に縮ませない */
    flex-shrink: 0 !important;
    
    /* 2. 最小幅を強制確保する（例: 250px や calc指定など） */
    min-width: 280px !important; 
    
    /* 3. 上限幅の解除 */
    max-width: none !important;
}
/* --- WebKit系（Chrome, Edge, Safari） --- */

/* スクロールバー全体の高さ */
.line-up-item-wrap::-webkit-scrollbar,
.benchmark-item-wrap::-webkit-scrollbar {
	height: 5px;
}

/* ★ 左右の矢印アイコン（ボタン）を非表示にする設定 */
.line-up-item-wrap::-webkit-scrollbar-button,
.benchmark-item-wrap::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

/* 背景（トラック）を透明にする */
.line-up-item-wrap::-webkit-scrollbar-track,
.benchmark-item-wrap::-webkit-scrollbar-track {
	background: transparent;
}

/* つまみ（サム）のみ表示 */
.line-up-item-wrap::-webkit-scrollbar-thumb,
.benchmark-item-wrap::-webkit-scrollbar-thumb {
	background-color: var(--color-gray-5, #ccc);
}

/* つまみホバー時 */
.line-up-item-wrap::-webkit-scrollbar-thumb:hover,
.benchmark-item-wrap::-webkit-scrollbar-thumb:hover {
	background-color: #666;
}

/* トップに戻るボタンの基本スタイル */
.pagetop {
    position: fixed;
    bottom: clamp(1.875rem, 0.971vw + 1.647rem, 2.8125rem);
    right: clamp(1.25rem, 4.854vw + 0.112rem, 5.9375rem);
    z-index: 99;
    
    /* PCサイズ */
	width: clamp(4rem, 0.971vw + 3.772rem, 4.9375rem);
	height: clamp(4rem, 0.971vw + 3.772rem, 4.9375rem);
    
    /* 丸枠のデザイン */
    border: 1px solid var(--color-black-2);
    border-radius: 50%;
    background-color: var(--color-gray-2);
    cursor: pointer;
    outline: none;
    padding: 0;
    
    /* 中央寄せ設定 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* フェードイン・アウトアニメーション */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* スクロール時に付与するクラス（表示状態） */
.pagetop.is-show {
    opacity: 1;
    visibility: visible;
}

/* CSSのborderで作る上向き「くの字」矢印 */
.pagetop__arrow {
    display: block;
    width: clamp(1.1875rem, 0.259vw + 1.127rem, 1.4375rem);
    height: clamp(1.1875rem, 0.259vw + 1.127rem, 1.4375rem);
    border-top: 2px solid var(--color-black-2);
    border-left: 2px solid var(--color-black-2);
    transform: rotate(45deg);
    margin-top: clamp(0.25rem, 0.129vw + 0.22rem, 0.375rem);
}

/* ホバー時の挙動（任意：少し薄くする等） */
.pagetop:hover {
    transform: translateY(-6px); /* 上に6px移動（お好みの移動量に調整してください） */
}
.c-headline {
	display: none;
}
.c-headline__h2 {
	display: none;
}