@charset "utf-8";

:root {
	/* base */
	--cts-gutter: clamp(2.625rem, 1.832rem + 1.98vw, 4.0625rem);;/*375-768*/
	--cts-width: 1430px;

	/* font-family */
	--dp-font-jp: "Noto Sans JP", sans-serif;
  
  /* color */
  --white-1: #FFF;
  --gray-1: #999;
  --gray-2: #D4D4D4;
  --black-1: #000;

  /* font-size */
  --font-16-11: clamp(0.6875rem, 0.324vw + 0.609rem, 1rem); /* 最小: 11px / 可変: 0.324vw + 9.741px / 最大: 16px */
  --font-18-11: clamp(0.71875rem, 0.421vw + 0.620rem, 1.125rem) /* 最小: 11.5px / 可変: 0.421vw + 9.922px / 最大: 18px */;
  --font-20-11: clamp(0.6875rem, 0.583vw + 0.550rem, 1.25rem); /* 最小: 11px / 可変: 0.583vw + 8.803px / 最大: 20px */
  --font-20-13: clamp(0.8125rem, 0.453vw + 0.706rem, 1.25rem); /* 最小: 13px / 可変: 0.453vw + 11.294px / 最大: 20px */
  --font-22-17: clamp(1.0625rem, 0.324vw + 0.986rem, 1.375rem); /* 最小: 17px / 可変: 0.324vw + 15.786px / 最大: 22px */
  --font-24-15: clamp(0.9375rem, 0.583vw + 0.801rem, 1.5rem); /* 最小: 15px / 可変: 0.583vw + 12.816px / 最大: 24px */
  --font-35-16: clamp(1rem, 1.230vw + 0.712rem, 2.1875rem);/* 最小: 16px (1rem) / 可変: 1.230vw + 11.388px / 最大: 35px (2.1875rem) */
  --font-35-20: clamp(1.25rem, 0.971vw + 1.022rem, 2.1875rem);/* 最小: 20px (1.25rem) / 可変: 0.971vw + 16.359px / 最大: 35px (2.1875rem) */
  --font-50-25: clamp(1.5625rem, 1.618vw + 1.183rem, 3.125rem); /* 最小: 25px / 可変: 1.618vw + 18.932px / 最大: 50px */
  --font-60-26: clamp(1.625rem, 2.201vw + 1.109rem, 3.75rem); /* 最小: 26px (1.625rem) / 可変: 2.201vw + 17.748px / 最大: 60px (3.75rem) */
  --font-60-32: clamp(2rem, 1.812vw + 1.575rem, 3.75rem); /* 最小: 32px / 可変: 1.812vw + 25.210px / 最大: 60px */

  /* font-weight */
  --font-regular: 400; /* Regular */
  --font-medium: 500; /* Medium */
  --font-bold: 700; /* Bold  */
  --font-black: 900; /* Black */
}

/* LP共通汎用
____________________*/
html {
  scroll-behavior: smooth;
}
body {
	padding-right: 0 !important;
	overflow: visible !important;
}
* {
  box-sizing: border-box;
}
#container a, #container a span {
    color: inherit;
    text-decoration: none;
}
.pagetop {
	display: none;	
}

figure {
	margin: 0;
	text-align: center;
}
img {
  width: 100%;
  height: auto;
	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%;
	margin-inline: auto;
	font-size: var(--cts-font-size);
	font-family: var(--dp-font-jp);
  font-weight: 400;
	letter-spacing: 0.05em;
  padding-bottom: clamp(3.125rem, 3.236vw + 2.366rem, 6.25rem);
}
.contents__wrap img {
	max-width: 100%;
	vertical-align: bottom;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}
/* コンテンツ
____________________*/
.contents__wrap {
	position: relative;
	z-index: 1;
}
.contents__wrap .lp-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.contents {
    padding-top: clamp(4.375rem, 4.531vw + 3.312rem, 8.75rem);
}
.contents__inner {
	width: 100%;
	max-width: var(--cts-width);
	margin-inline: auto;
	padding-inline: var(--cts-gutter);
	position: relative;
}
/* 見出し */
.ttl-h2 {
  font-weight: var(--font-bold);
  font-size: var(--font-60-32);
  line-height: 1.5;
  text-align: center;
}
.ttl-h3 {
  font-weight: var(--font-bold);
  font-size: var(--font-50-25);
  line-height: 1.5;
}
.txt-l {
  font-size: var(--font-20-13);
  font-weight: var(--font-bold);
  line-height: 1.9;
  letter-spacing: 0;
  margin-top: clamp(0.9375rem, 1.618vw + 0.558rem, 2.5rem);
}
.txt-m {
  font-size: var(--font-16-11);
  line-height: 1.9;
  letter-spacing: 0.02em;
  margin-top: 1em;
}
/* ボタンの外枠 */
.btn-wrap {
  width: 100%;
  max-width: 444px;
  margin: clamp(4.375rem, 3.236vw + 3.617rem, 7.5rem) auto 0;
}
.btn-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 
  clamp(1rem, 0.13vw + 0.97rem, 1.125rem) 
  clamp(1.125rem, 0.13vw + 1.095rem, 1.25rem)
  clamp(1rem, 0.13vw + 0.97rem, 1.125rem) 
  clamp(1.125rem, 0.13vw + 1.095rem, 1.25rem);
  color: #0068b5;
  border: 2px solid #0068b5;
  text-decoration: none;
  font-size: clamp(0.75rem, 0.259vw + 0.689rem, 1rem);
  font-weight: bold;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;
  transition: color 0.4s ease;
}
/* ホバー背景アニメーション（::before） */
.btn-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 102%;
  background-color: #0068b5; /* ホバー時の背景色 */
  z-index: -1;
  /* 横幅のスケールを0にする */
  transform: scaleX(0);
  /* ホバーアウト時：右側を基準にして左から右へ縮む */
  transform-origin: right center;
  transition: transform 0.4s ease;
}
/* ホバー時の挙動 */
.btn-link:hover {
  color: #ffffff; /* ホバー時の文字色 */
}
.btn-link:hover::before {
  /* ホバーイン時：左側を基準にして左から右へ伸びる */
  transform-origin: left center;
  transform: scaleX(1);
}
.btn-link .arrow {
  position: absolute;
  top: 50%;
  right: clamp(0.625rem, 0.647vw + 0.473rem, 1.25rem);
  width: 8px;
  height: 8px;
  border-top: 2px solid #0068b5;
  border-right: 2px solid #0068b5;
  transform: translateY(-50%) rotate(45deg);
  transition: border-color 0.4s ease, right 0.3s ease;
}
.btn-link:hover .arrow {
  border-color: #ffffff;
  right: 16px;
}
.center {
  text-align: center !important;
}
.left {
  text-align: left !important;
}
.right {
  text-align: right !important;
}
.mt0 {
  margin-top: 0 !important;
}
.pt0 {
  padding-top: 0;
}
@media (max-width: 768px) {/*375-768*/
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}
/* mv
____________________*/
.contents--mv {
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
  padding-top: 0;
}
.contents--mv .ttl-h1 img {
	width: 100%;
	height: auto;
}
/* lp-nav
____________________*/
.contents__wrap .lp-nav {
  position: sticky;
  top: 20px;
  left: 20px;
  z-index: 10;
  margin-top: clamp(1.25rem, 2.913vw + 0.568rem, 4.0625rem);
}
.contents__wrap .lp-nav .lp-nav-list {
  width: 100%;
  max-width: 714px;
  padding: clamp(0.0625rem, 0.647vw - 0.089rem, 0.6875rem) clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--white-1);
  border-radius: 9999px;
  border: 1px solid var(--gray-1);
}
.lp-nav-link {
  color: var(--gray-1);
  font-size: var(--font-20-11);
  font-weight: var(--font-bold);
  line-height: 1.8;
  transition: color 0.6s ease;
}
.lp-nav-link.is-active {
  color: var(--black-1);
}
@media (max-width: 768px) {/*375-768*/
  .contents__wrap .lp-nav .lp-nav-list {
    width: 80%;
  }
}
/* intro
____________________*/
.contents--intro {
	width: 100%;
  padding-top: clamp(2.1875rem, 4.207vw + 1.201rem, 6.25rem);
	position: relative;
	z-index: 1;
}
.intro-txt {
  font-size: var(--font-20-13);
  font-weight: var(--font-bold);
  text-align: center;
  line-height: 2;
}
.intro-note {
  font-size: var(--font-16-11);
  font-weight: var(--font-medium);
  line-height: 1.8;
  text-align: center;
  margin-top: 1em;
}
@media (max-width: 768px) {/*375-768*/

}
/* line-up
____________________*/

.line-up-grid {
  display: grid;
  grid-template-columns: 487fr 758fr;
  gap: min(2.604vw, 3.125rem);
  margin-top: clamp(0.9375rem, 2.265vw + 0.404rem, 3.125rem);
  position: relative;
}
.no-image .line-up-grid {
  grid-template-columns: 1fr;
}
.line-up-grid .model-image {
  position: relative;
}
.line-up-grid .model-image img {
  position: sticky;
  top: min(4.688vw, 5.625rem);
  left: 0;
}
.line-up-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.485vw + 0.511rem, 1.09375rem);
}
.line-up-wrap.single {
  display: block;
  max-width: 758px;
  margin-inline: auto;
  margin-top: clamp(1.25rem, 2.589vw + 0.643rem, 3.75rem);
}
.line-up-item {
  color: var(--black-1);
  padding: 
  clamp(0.625rem, 0.324vw + 0.549rem, 0.9375rem) 
  clamp(1.25rem, 4.531vw + 0.188rem, 5.625rem) 
  clamp(0.625rem, 0.971vw + 0.397rem, 1.5625rem) 
  clamp(0.9375rem, 1.942vw + 0.482rem, 2.8125rem);
  display: block;
  background: var(--white-1);
  border: 1px solid var(--black-1);
  position: relative;
  transition: background-color 0.3s ease;
}
:is(a.line-up-item):hover {
  background: #f5f5f5;
}
.no-image .line-up-item {
  padding: 
    clamp(0.625rem, 0.324vw + 0.549rem, 0.9375rem) 
    clamp(0.9375rem, 1.942vw + 0.482rem, 2.8125rem)
    clamp(0.625rem, 0.971vw + 0.397rem, 1.5625rem) 
    clamp(0.9375rem, 1.942vw + 0.482rem, 2.8125rem);
}
.line-up-item-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  border-bottom: 1px solid var(--black-1);
  padding-bottom: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
}
.model-catch {
  font-size: var(--font-20-13);
  font-weight: var(--font-bold);
  line-height: 1.5;
}
.model-name {
  font-size: var(--font-20-13);
  font-weight: var(--font-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
  min-width: 0;
  max-width: 100%;
}
.no-image .model-name {
  margin-top: 0;
}
.inner-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.625rem;
  margin-top: 0.625rem;
}
.no-image .inner-flex {
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.625rem, 0.647vw + 0.473rem, 1.25rem);
}
.no-image .txt-block {
  width: 70%;
  max-width: 580px;
}
.three-more .txt-block {
  width: 70%;
  max-width: 580px;
}
.spec {
  font-size: var(--font-16-11);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  margin-top: clamp(0.625rem, 0.324vw + 0.549rem, 0.9375rem);
}
:is(a.line-up-item) .spec {
  width: 75%;
  margin-top: 0;
}
.price {
  font-size: var(--font-22-17);
  font-weight: var(--font-bold);
  line-height: 1;
  white-space: nowrap;
}
.tax {
  font-size: var(--font-16-11);
}
.link-btn-block {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.three-more .link-btn-block {
  width: 45%;
  max-width: 469px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 5px;
}
.no-image .btn-link {
  padding-block: 13px;
}
.three-more .btn-link {
    width: calc(50% - 2.5px);
}
:is(a.line-up-item) .arrow {
  width: clamp(2rem, 0.841vw + 1.803rem, 2.8125rem);
  height: clamp(2rem, 0.841vw + 1.803rem, 2.8125rem);
  border: clamp(0.0625rem, 0.07vw + 0.046rem, 0.125rem) solid var(--black-1);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
}
:is(a.line-up-item) .arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 45%; /* 回転後の見た目の中心バランスを調整 */
  width: 25%;  /* 円の大きさに合わせて自動縮小されるパーセント指定 */
  height: 25%;
  border-top: clamp(0.0625rem, 0.07vw + 0.046rem, 0.125rem) solid var(--black-1);
  border-right: clamp(0.0625rem, 0.07vw + 0.046rem, 0.125rem) solid var(--black-1);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* tab */
.tab-container {
  margin: clamp(1.25rem, 2.589vw + 0.643rem, 3.75rem) auto 0;
}
.tab-container.no-image {
  max-width: 920px;
}
.tab-container.three-more {
  max-width: 1157px;
}
.tab-menu {
  display: flex;
  gap: clamp(0.5625rem, 1.359vw + 0.244rem, 1.875rem);
}
.tab-item {
  cursor: pointer;
  padding: clamp(0.75rem, 0.647vw + 0.598rem, 1.375rem) clamp(0.9375rem, 0.971vw + 0.71rem, 1.875rem);
  font-weight: bold;
  color: var(--white-1);
  background: var(--gray-1);
  border-radius: 10px 10px 0 0;
  flex-grow: 1;
  transition: flex-grow 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              background 0.3s ease, 
              color 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

.tab-item.active {
  flex-grow: 7.7; 
}
.tab-item:nth-of-type(1).active {
  background: var(--black-1);
}
.tab-item:nth-of-type(2).active {
  color: var(--white-1);
  background: var(--black-1);
}
.ttl-cpu {
	font-size: clamp(1rem, 0.583vw + 0.863rem, 1.5625rem);
	font-weight: 900;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
	z-index: 1;
}
.ttl-cpu::before{
	content: "";
	display: inline-block;
	width: clamp(10px, 0.78vw, 15px);
  height: clamp(10px, 0.78vw, 15px);
	border-top: solid 3px var(--white-1);
	border-right: solid 3px var(--white-1);
	transform: rotate(45deg);
}
.txt-cpu {
  font-size: clamp(0.6875rem, 0.324vw + 0.612rem, 1rem);
}
.tab-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.no-image .txt-cpu {
  font-size: clamp(0.6875rem, 0.324vw + 0.612rem, 1rem);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13ch;
}

/* active時の解除設定 */
.no-image .active .txt-cpu {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.tab-content-wrapper {
  position: relative;
  min-width: 0;
}

/* 非アクティブ時は非表示にして領域を折りたたむ */
.tab-content {
  display: none;
  opacity: 0;
}

/* アクティブ時は表示してフェードインを実行 */
.tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 768px) {/*375-768*/
  .tab-container > .model-image {
    width: 58%;
    margin: 0 auto 5.3vw;
  }
  .line-up-grid {
    grid-template-columns: 100%;
    gap: 0;
  }
  .tab-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .tab-item .txt-cpu {
    display: none;
    letter-spacing: 0;
  }
  .tab-item.active .txt-cpu {
    display: block;
    margin-top: 5px;
  }
  .inner-flex {
    align-items: flex-start;
    flex-direction: column;
  }
  .no-image .txt-block {
    width: 100%;
  }
  .link-btn-block {
    width: 100%;
  }
  .three-more .link-btn-block {
    width: 100%;
    flex-direction: column;
  }
  .three-more .btn-link {
    width: 100%;
  }
  .line-up-item .arrow {
    top: 50%;
  }
  :is(a.line-up-item) .arrow {
    top: inherit;
    bottom: 0;
  }
  .price {
    text-align: right;
  }
}
/* desgin
____________________*/
.desgin .main-txt {
  font-size: var(--font-20-13);
  font-weight: var(--font-medium);
  line-height: 2;
  text-align: center;
  margin-top: clamp(1.25rem, 1.294vw + 0.947rem, 2.5rem);
}
.case-design-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.3125rem, 1.942vw + -0.143rem, 2.1875rem);
  margin-top: clamp(1.25rem, 3.236vw + 0.492rem, 4.375rem);
}

.case-design-wrap:has(> :nth-child(1):last-child) {
  justify-content: center;
  grid-template-columns: minmax(0, 300px);
}
.case-design-wrap:has(> :nth-child(2):last-child) {
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
}

.case-design-item {
  padding: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
  transition: background-color 0.2s;
}
.design-note {
  font-size: var(--font-20-13);
  font-weight: var(--font-bold);
  text-align: center;
  margin-top: clamp(1.25rem, 0.971vw + 1.022rem, 2.1875rem);
}

.case-design-slider-block {
  position: relative;
  width: 90%;
  margin-inline: auto;
}
.collab-name {
  font-size: var(--font-35-16);
  font-weight: var(--font-black);
  text-align: center;
}
.case-design-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.case-design-slides {
  display: flex;
  transition: transform 0.3s ease-in-out;
  width: 100%;
}

.case-design-slider .case-design-item {
  width: 100%;
  min-width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
}

.case-design-slider .case-design-item img {
  max-width: 100%;
  height: auto;
  display: block;
}

.case-design-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: clamp(0.625rem, 0.324vw + 0.549rem, 0.9375rem);
}

.case-design-dot {
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.case-design-dot.is-active {
  background-color: #333; /* アコモデーションに合わせて調整してください */
  transform: scale(1.1);
}

/* 全体を囲む親要素 (ボタンの基準位置 + 余白確保) */
.case-detail-slider-wrapper {
  position: relative;
  width: 100%;
  /* 左右にボタンが収まる余白を確保 (ボタンの幅に合わせて調整してください) */
  padding: 0 50px;
  margin-top: clamp(1.875rem, 3.236vw + 1.116rem, 5rem);
  box-sizing: border-box;
}

/* スライド画像などを切り抜く枠 */
.case-detail-slider-container {
  position: relative;
  overflow: hidden; /* コンテンツ部分だけを切り抜く */
  width: 100%;
}

/* 横並びトラック */
.case-detail-slides {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}

.case-detail-wrap {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ----------------------------------------------------
* ボタンの位置調整 (overflow: hidden の外側の余白部分に配置)
* ---------------------------------------------------- */
.case-detail-slider-wrapper .slider-prev,
.case-detail-slider-wrapper .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 左ボタンをコンテンツの外側（余白エリア）に設置 */
.case-detail-slider-wrapper .case-detail-prev {
  left: -15px; 
}

/* 右ボタンをコンテンツの外側（余白エリア）に設置 */
.case-detail-slider-wrapper .case-detail-next {
  right: -15px; 
}

.case-detail-wrap {
  display: grid;
  grid-template-columns: 753fr 484fr;
  grid-auto-rows: auto;
  gap: clamp(1.875rem, 1.942vw + 1.420rem, 3.75rem);
}
.detail-img {
  align-self: start; /* または center, end */
  height: auto;
}
.case-detail-slider-wrapper .ttl-h3 {
  line-height: 1;
}
.case-detail-slider-wrapper .txt-l {
  margin-top: clamp(0.9375rem, 0.971vw + 0.71rem, 1.875rem);
}
@media (max-width: 768px) {/*375-768*/
  .desgin .main-txt {
    text-align: left;
  }
  .case-detail-wrap {
        grid-template-columns: 1fr;
  }
  /* 子要素がちょうど3個のとき */
  .case-design-wrap.multiple:has(> :nth-child(3):last-child) {
    /* 2列にして、全体を中央寄せ */
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }

  /* 3番目の要素（2行目の1個）だけ横幅いっぱいにして中央配置にする場合 */
  /* ※要素の幅を他の2個と同じサイズに保ちたい場合は下記を指定します */
  .case-design-wrap.multiple:has(> :nth-child(3):last-child) > :nth-child(3) {
    grid-column: 1 / -1; /* 1行ぶち抜き */
    justify-self: center; /* その中で中央寄せ */
    width: 100%;
    max-width: calc(50% - (clamp(0.3125rem, 1.942vw + -0.143rem, 2.1875rem) / 2)); /* 上の2個と同じサイズに維持 */
  }
  .case-detail-slider-wrapper {
    padding: 0 35px; /* スマホでは左右余白を少し縮める */
  }
  .case-detail-slider-wrapper .slider-prev, .case-detail-slider-wrapper .slider-next {
    top: 13%;
  }
  .case-detail-slider-wrapper .case-detail-prev {
    left: 0;
  }
  .case-detail-slider-wrapper .case-detail-next {
    right: 0;
  }
}
/* bonus
____________________*/
/* 特典スライダーの全体ラッパー */
.bonus-slider-wrapper {
  position: relative;
  width: 100%;
  padding: 0 50px; /* 左右に矢印ボタンが入る余白を確保 */
  margin-top: clamp(1.25rem, 9.061vw - 0.874rem, 10rem);
  box-sizing: border-box;
}

/* スライド画像を切り抜く枠 */
.bonus-slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* スライドを横並びにするトラック */
.bonus-wrap {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}

/* 各特典アイテム（100%幅で固定） */
.bonus-item {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ----------------------------------------------------
* ボタンの位置調整・表示制御
* ---------------------------------------------------- */
.bonus-slider-wrapper .slider-prev,
.bonus-slider-wrapper .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block; /* 共通の display:none を上書き */
}

.bonus-slider-wrapper .bonus-prev {
  left: -15px;
}

.bonus-slider-wrapper .bonus-next {
  right: -15px;
}

.bonus-slider-wrapper .slider-prev::before,
.bonus-slider-wrapper .slider-next::before {
  border-color: #333; /* 背景色に合わせて調整してください */
}

/* ドットインジケーター */
.bonus-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
}

.bonus-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

.bonus-dot.is-active {
  background: #333;
}
.bonus-wrap:nth-of-type(n+2) {
  margin-top: clamp(4.375rem, 6.472vw + 2.882rem, 10.625rem);
}
.bonus-item {
  display: flex;
  justify-content: space-between;
  gap: 1em;
}

.bonus-item .txt-block {
  width: 48.5%;
  padding-left: 7.1875rem;
}
.bonus-ttl-set {
  position: relative;
}
.bonus-ttl-set .bonus-icon {
  width: clamp(1.875rem, 3.883vw + 0.964rem, 5.625rem);
  position: absolute;
  top: 0;
  left: clamp(-6.25rem, -4.531vw - 0.812rem, -1.875rem);
}
.bonus-txt {
  font-size: var(--font-20-13);
  font-weight: var(--font-bold);
}
.bonus-number {
  font-size: var(--font-24-15);
}
.ttl-jp {
  font-size: var(--font-20-13);
  font-weight: var(--font-bold);
  line-height: 1;
  margin-top: 0.25em;
}
.ttl-jp .nuber {
  font-size: clamp(0.8125rem, 0.712vw + 0.646rem, 1.5rem);
} 
.bonus-item-img-block {
  width: 55.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.9375rem, 1.942vw + 0.482rem, 2.8125rem) clamp(0.9375rem, 0.971vw + 0.710rem, 1.875rem);
  position: relative;
  z-index: 1;
}
.bonus-item-img-block.wallpaper {
  width: clamp(18.125rem, 24.272vw + 12.436rem, 41.5625rem);
}
.bonus-item-img-block .bonus-item-deco {
  width: clamp(1rem, 0.906vw + 0.788rem, 1.875rem);
  height: clamp(1rem, 0.906vw + 0.788rem, 1.875rem);
  display: block;
  position: absolute;
  z-index: 2;
}
.bonus-item-img-block .bonus-item-deco:nth-of-type(1) {
  border-top: 1px solid var(--white-1);
  border-left: 1px solid var(--white-1);
  top: 0;
  left: 0;
}
.bonus-item-img-block .bonus-item-deco:nth-of-type(2) {
  border-top: 1px solid var(--white-1);
  border-right: 1px solid var(--white-1);
  top: 0;
  right: 0;
}
.bonus-item-img-block .bonus-item-deco:nth-of-type(3) {
  border-bottom: 1px solid var(--white-1);
  border-left: 1px solid var(--white-1);
  bottom: 0;
  left: 0;
}
.bonus-item-img-block .bonus-item-deco:nth-of-type(4) {
  border-bottom: 1px solid var(--white-1);
  border-right: 1px solid var(--white-1);
  bottom: 0;
  right: 0;
}
.bonus-item-inner {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 0.841vw + 0.553rem, 1.5625rem);
}
.bonus-note {
  font-size: var(--font-16-11);
  font-weight: var(--font-medium);
  line-height: 1.7;
  margin-top: clamp(1rem, 1.036vw + 0.757rem, 2rem);
}

/* 全体ラッパー（左右ボタンの入る余白を確保） */
.led-detail-slider-wrapper {
  position: relative;
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  margin-top: clamp(3.125rem, 3.236vw + 2.367rem, 6.25rem);
}

/* 画像切り抜きエリア */
.led-detail-slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* 横移動トラック */
.led-detail-slides {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}
.led-detail-wrap {
  display: grid;
  /* 左列：484fr、右列：569fr */
  grid-template-columns: 1fr 1.2fr;
  /* 左側の各行の高さを「中身の要素サイズぴったり」に可変固定 */
  grid-template-rows: min-content min-content;
  grid-template-areas:
    "txt    image"
    "switch image";
  /* 間隔の調整 */
  row-gap: 24px;    /* テキストとスイッチの間の距離 */
  column-gap: 160px; /* 左右（テキスト側と画像側）の距離 */
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* 矢印ボタンの位置調整・初期設定 */
.led-detail-slider-wrapper .slider-prev,
.led-detail-slider-wrapper .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

.led-detail-slider-wrapper .led-detail-prev {
  left: -15px;
}

.led-detail-slider-wrapper .led-detail-next {
  right: -15px;
}

.led-detail-slider-wrapper .slider-prev::before,
.led-detail-slider-wrapper .slider-next::before {
  border-color: #333; /* 背景色に合わせて変更可 */
}

/* ドットインジケーター */
.led-detail-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
}

.led-detail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

.led-detail-dot.is-active {
  background: #333;
}
/* 各ブロックの指定 */
.led-detail-wrap .txt-block {
  grid-area: txt;
  /* 高さ調整に影響を与えるため余計な margin-bottom をリセット */
  margin-bottom: 0; 
}

.image-block {
  grid-area: image;
  /* 画像エリアが縦2行分を確実に占有するように指定 */
  grid-row: 1 / span 2;
  padding-right: 3.125vw;
}

/* 画像が親要素からはみ出さないように設定 */
.image-block img {
  width: 100%;
  height: auto;
  display: block;
}
/* スイッチ全体 */
.switch-wrap {
  grid-area: switch;
  align-self: start; /* 上揃え */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.led-note {
	font-size: clamp(0.6875rem, 0.324vw + 0.612rem, 1rem);
	font-weight: var(--font-medium);
	line-height: 1;
}
.switch {
	position: relative;
	display: inline-block;
	width: clamp(6.875rem, 1.294vw + 6.572rem, 8.125rem);
  height: clamp(2.3125rem, 0.518vw + 2.191rem, 2.8125rem);
  margin-top: clamp(0.625rem, 0.324vw + 0.549rem, 0.9375rem);
}
.txt-switch {
	color: var(--color-white1);
	font-size: 0.625vw;
	line-height: 1;
	letter-spacing: 0.1em;
}
/* inputは非表示 */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
/* スイッチの背景部分 */
.switch-btn {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: var(--gray-1);
	transition: 0.4s ease;
	border-radius: 9999px;
	border: 1px solid var(--color-white-1);
}

/* 丸いノブ */
.switch-btn:before {
	position: absolute;
	content: "";
	height: clamp(1.75rem, 0.388vw + 1.659rem, 2.125rem);
  width: clamp(1.75rem, 0.388vw + 1.659rem, 2.125rem);
	right: clamp(0.375rem, 0.129vw + 0.345rem, 0.5rem);
	bottom: 5px;
	background-color: white;
	transition: 0.4s ease;
	border-radius: 50%;
}

/* ON のとき（左へ移動） */
.switch input:checked + .switch-btn {
	background-color: var(--black-1);
}
.switch input:checked + .switch-btn:before {
	transform: translateX(clamp(-4.8125rem, -0.453vw - 4.269rem, -4.375rem));
}
@media (max-width: 768px) {/*375-768*/
  .bonus-slider-wrapper {
    padding: 0;
  }
  .bonus-slider-wrapper .slider-prev, .bonus-slider-wrapper .slider-next {
    top: 58%;
  }
  .bonus-slider-wrapper .bonus-prev {
    left: -30px;
  }
  .bonus-slider-wrapper .bonus-next {
    right: -30px;
  }
  .bonus-item {
    flex-direction: column;
    align-items: center;
  }
  .bonus-item .txt-block {
    width: 100%;
    padding-left: 0;
  }
  .bonus-ttl-set {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bonus-ttl-set .bonus-icon {
    position: relative;
    top: inherit;
    left: inherit;
  }
  .bonus-txt {
    text-align: center;
    margin-top: 0.5em;
  }
  .bonus .ttl-h3 {
    text-align: center;
  }
  .ttl-jp {
    text-align: center;
  }
  .bonus .txt-m {
    text-align: center;
  }
  .bonus-item-inner {
    flex-direction: column;
  }
  .mt0-sp {
    margin-top: 0;
  }
  .bonus-item-img-block picture {
    width: 100%;
    margin-inline: auto;
  }
  .led-detail-wrap {
    /* 1列に変更 */
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    
    /* 上から txt → image → switch の順にエリアを再定義 */
    grid-template-areas:
      "txt"
      "image"
      "switch";

    /* 余白の調整 */
    row-gap: 30px;
    column-gap: 0;
  }
  .switch-wrap {
    align-items: center;
  }
  /* スマホの時は縦複数行の跨ぎ(span 2)を解除する */
  .image-block {
    grid-row: auto;
    padding-right: 0;
  }
  .led-detail-slider-wrapper {
    padding: 0;
  }
  .led-detail-slider-wrapper .led-detail-prev {
    left: -30px;
  }
  .led-detail-slider-wrapper .led-detail-next {
    right: -30px;
  }
}
/* special-contents
____________________*/
.bg-wrap {
  width: 100%;
  padding: clamp(1.875rem, 1.942vw + 1.42rem, 3.75rem) clamp(1.25rem, 5.178vw + 0.037rem, 6.25rem) clamp(1.25rem, 3.883vw + 0.339rem, 5rem);
  background: var(--gray-2);
  border-radius: clamp(0.9375rem, 0.647vw + 0.786rem, 1.5625rem);
}
.grid-container {
  display: grid;
  grid-template-columns: 454fr 490fr;
  grid-template-rows: 438fr 223fr;
  gap: clamp(1.875rem, 3.236vw + 1.117rem, 5rem) clamp(1.875rem, 5.178vw + 0.662rem, 6.875rem);
  min-height: 400px;
  
  /* PCでの配置（左側に縦長、右側に上下2つ） */
  grid-template-areas:
    "left right-top"
    "left right-bottom";
  margin-top: clamp(1.25rem, 1.294vw + 0.947rem, 2.5rem);
}
.grid-container:nth-of-type(n+2) {
  margin-top: clamp(3.125rem, 3.236vw + 2.366rem, 6.25rem);
}
/* 各要素へのエリア名割り当て */
.item-left {
  grid-area: left;
}

.item-right-top {
  grid-area: right-top;
}

.item-right-bottom {
  grid-area: right-bottom;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.panel-img {
  width: 100%;
  display: block;
}
.cp-catch {
  font-size: var(--font-24-15);
  font-weight: var(--font-black);
  line-height: 1.7;
}
.cp-catch .txt-xl {
  font-size: var(--font-35-20);
}
.special-contents .txt-l {
  margin-top: clamp(1.25rem, 0.647vw + 1.098rem, 1.875rem);
}
.cp-note {
  font-size: var(--font-16-11);
  font-weight: var(--font-medium);
  line-height: 2.2;
  margin-top: clamp(1.25rem, 0.971vw + 1.022rem, 2.1875rem);
}
.scroll-block {
  height: 9em;
  overflow-y: auto;
  margin-top: clamp(0.625rem, 0.971vw + 0.397rem, 1.5625rem); 
}
.shop-list-wrap {
  background: var(--white-1);
  border: 1px solid var(--black-1);
  padding: clamp(0.9375rem, 0.647vw + 0.786rem, 1.5625rem) clamp(0.625rem, 0.647vw + 0.473rem, 1.25rem);
}
.shop-list-wrap .ttl-h3 {
  font-size: var(--font-16-11);
  font-weight: var(--font-bold);
  line-height: 1;
  text-align: center;
}
.shop-list {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 0.324vw + 0.549rem, 0.9375rem);
}
.shop-list li {
  font-size: var(--font-16-11);
  line-height: 1.4;
  font-weight: var(--font-bold);
}
.shop-list + .shop-list-2 {
  margin-top: clamp(0.9375rem, 0.324vw + 0.862rem, 1.25rem);
}
.shop-list-2 {
  font-size: var(--font-16-11);
  font-weight: var(--font-bold);
  line-height: 1.7;
  width: 100%;
  max-width: 430px;
  display: grid;
  grid-template-columns: 95fr 325fr;
  margin-inline: auto;
}
.shop-list-2:nth-of-type(n+2) {
  margin-top: clamp(0.9375rem, 0.324vw + 0.862rem, 1.25rem);
}
.shop-list-2 dt {
  padding-right: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
}
.shop-list-2 dd {
  padding-left: clamp(0.3125rem, 0.324vw + 0.236rem, 0.625rem);
  position: relative;
}
.shop-list-2 dd::before {
  content: "";
  width: clamp(0.125rem, 0.065vw + 0.11rem, 0.1875rem);
  height: 100%;
  background: var(--black-1);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media (max-width: 768px) {/*375-768*/
  .grid-container {
    /* 1列に変更 */
    grid-template-columns: 1fr;
    /* 行の高さ指定を自動に（コンテンツに応じる） */
    grid-template-rows: auto;
    min-height: auto;
    /* 上から: 右上 → 左 → 右下 の順に1列に配置 */
    grid-template-areas:
      "right-top"
      "left"
      "right-bottom";
  }
  /* スマホ表示時に各ブロックの高さ・最小高さを確保したい場合（必要に応じて調整） */
  .item {
    min-height: 150px;
  }
  .panel-img {
    width: 64%;
    margin-inline: auto;
  }
  .shop-list-2 {
    grid-template-columns: 120fr 305fr;
  }
}
/* profile
____________________*/
.profile-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 1.618vw + 2.121rem, 4.0625rem);
}
.profile-wrap:has(> :nth-child(1):last-child) {
  justify-content: center;
  grid-template-columns: minmax(0, 1fr);
  max-width: 910px;
  margin-inline: auto;
}
.profile-wrap:has(> :nth-child(2):last-child) {
  justify-content: center;
  grid-template-columns: repeat(2, 1fr);
}

/* スライダー用コンテナ */
.profile-slider-container {
  position: relative;
  width: 100%;
}

/* 矢印ボタン共通スタイル */
.slider-prev,
.slider-next {
  display: none; /* 初期状態は非表示 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(1.25rem, 2.589vw + 0.643rem, 3.75rem);
  height: clamp(1.25rem, 2.589vw + 0.643rem, 3.75rem);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
}

.slider-prev::before,
.slider-next::before {
  content: '';
  display: block;
  width: clamp(1.5rem, 2.33vw + 0.955rem, 3.75rem);
  height: clamp(1.5rem, 2.33vw + 0.955rem, 3.75rem);
  /* border-top: 4px solid var(--gray-1, #fff);
  border-right: 4px solid var(--gray-1, #fff); */
  background: url(../../gamepc/img/icon/arrow-next.webp) no-repeat center center/contain;
  margin: auto;
}

.slider-next::before {
  /* transform: rotate(45deg); */
}

.slider-prev::before {
  transform: rotate(-180deg);
}

/* 矢印ボタン（初期状態では非表示） */
.slider-btn {
  display: none;
}
.progile-thumbnail {
  width: clamp(12.5rem, 3.236vw + 11.742rem, 15.625rem);
  display: block;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
}
.profile-logo {
  display: block;
  margin: clamp(1.5625rem, 0.647vw + 1.411rem, 2.1875rem) auto 0;
}
.profile-txt {
  font-size: clamp(0.8125rem, 0.194vw + 0.767rem, 1rem);
  font-weight: 700;
  line-height: 1.9;
  margin-top: clamp(1.5625rem, 0.647vw + 1.411rem, 2.1875rem);
}
.profile-wrap:has(> :nth-child(1):last-child) .profile-txt {
  text-align: center;
}
.profile .btn-wrap {
  margin-top: clamp(2.5rem, 0.647vw + 2.348rem, 3.125rem);
}
.sns-link-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.8125rem, 0.324vw + 0.737rem, 1.125rem);
  margin-top: clamp(2.1875rem, 1.294vw + 1.884rem, 3.4375rem);
}
.sns-link {
  width: clamp(2.875rem, 1.165vw + 2.602rem, 4rem);
  display: block;
  transition: transform 0.3s ease;
}
.sns-link:hover {
  transform: scale(1.2);
}
.lp-copy {
  text-align: center;
  margin-top: clamp(2.5rem, 4.531vw + 1.437rem, 6.875rem);
}
@media (max-width: 768px) {/*375-768*/
  .profile {
    padding-inline: 0;
  }
  /* スライダー化時のスタイルの修正 */
  .profile-wrap.is-slider {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 2.5rem; /* カード間の余白 */
    
    /* 左右に余白を設けることで、最初と最後のカードも中央に寄ります */
    padding: 0 calc(50% - 40%); /* 画面幅に応じた計算、または padding: 0 10%; などでもOK */
    
    scrollbar-width: none; /* スクリーンバー非表示 */
  }

  .profile-wrap.is-slider::-webkit-scrollbar {
    display: none;
  }

  .profile-wrap.is-slider .profile-item {
    /* 幅を指定 (例: 画面の80%幅) */
    flex: 0 0 100%;
    /* センタリング設定 */
    scroll-snap-align: center;
    scroll-snap-stop: always; /* 1枚ずつピタッと止まるようにする */
  }
  /* スライダー化している場合のみ矢印を表示＆位置調整 */
  .profile-slider-container:has(.profile-wrap.is-slider) .slider-prev,
  .profile-slider-container:has(.profile-wrap.is-slider) .slider-next {
    display: block;
    top: 14%;
  }
  .profile-slider-container:has(.profile-wrap.is-slider) .slider-prev {
    left: 5%;
  }
  .profile-slider-container:has(.profile-wrap.is-slider) .slider-next {
    right: 5%;
  }
  .profile-txt {
    text-align: left;
  }
}

/* modal
____________________*/
.modal-open {
  cursor: pointer;
}

/* ------------------------------------
 * モーダル全体スタイル（フェードイン・フェードアウト対応）
 * ------------------------------------ */
.image-modal {
  display: flex;             /* 常に flex にしておく */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* 透過の黒 */
  z-index: 9999;
  justify-content: center;
  align-items: center;

  /* アニメーション用の初期状態（透明・非表示） */
  opacity: 0;
  visibility: hidden;
  /* 0.4秒かけてゆっくりフェード（秒数は 0.5s などでお好みで調整可） */
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* 表示状態（ふわっと現れる） */
.image-modal.is-active {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------------
 * 閉じるボタン (top:0; right:0; 角丸なし)
 * ------------------------------------ */
.modal-close-btn {
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(3.75rem, 5.113vw + 1.831rem, 8.6875rem);
  height: clamp(3.75rem, 5.113vw + 1.831rem, 8.6875rem);
  background-color: #555;
  border: none;
  border-radius: 0;
  cursor: pointer;
  z-index: 10001;
  transition: background-color 0.2s;
}

.modal-close-btn:hover {
  background-color: #777;
}

/* ✕印 */
.modal-close-btn::before,
.modal-close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(2.5rem, 2.589vw + 1.893rem, 5rem);
  height: 0;
  border-top: 3px solid #fff;
}

.modal-close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ------------------------------------
 * モーダルコンテンツ & スライダー構造
 * ------------------------------------ */
.modal-contents {
  position: relative;
  width: 85%;
  max-width: 724px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal-slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.modal-slides {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease-in-out;
}

.modal-slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

/* ------------------------------------
 * 左右矢印ボタン
 * ------------------------------------ */
.modal-prev,
.modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(1.25rem, 2.589vw + 0.643rem, 3.75rem);
  height: clamp(1.25rem, 2.589vw + 0.643rem, 3.75rem);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10000;
  padding: 0;
}

.modal-prev {
  left: clamp(-4.375rem, -4.531vw + 1.062rem, 0rem);
}
.modal-next {
  right: clamp(-4.375rem, -4.531vw + 1.062rem, 0rem);
}

/* 擬似要素（::before）を画像に変更 */
.modal-prev::before,
.modal-next::before {
  content: '';
  display: block;
  width: clamp(1.5rem, 2.33vw + 0.955rem, 3.75rem);
  height: clamp(1.5rem, 2.33vw + 0.955rem, 3.75rem);
  margin: auto;
  
  /* 背景画像の設定 */
  background-image: url('../../gamepc/img/icon/arrow-next-w.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* prev（前へ）は画像を180度回転させて左向きにする */
.modal-prev::before {
  transform: rotate(180deg); 
  /* 左右反転にする場合はこちらでも可能です： transform: scaleX(-1); */
}

/* next（次へ）は回転不要（標準の向き） */
.modal-next::before {
  transform: none;
}

/* ------------------------------------
 * ページネーション (●)
 * ------------------------------------ */
.modal-pagination {
  position: absolute;
  bottom: -30px;
  display: flex;
  gap: 10px;
  z-index: 10000;
}

.modal-dot {
  width: 12px;
  height: 12px;
  background-color: rgba(153, 153, 153, 1);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
}

.modal-dot.is-active {
  background-color: #fff;
}