@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;
  --black-1: #000;

  /* font-size */
  --font-1: clamp(0.6875rem, 0.324vw + 0.609rem, 1rem); /* 最小: 11px / 可変: 0.324vw + 9.741px / 最大: 16px */
  --font-2: clamp(0.71875rem, 0.421vw + 0.620rem, 1.125rem) /* 最小: 11.5px / 可変: 0.421vw + 9.922px / 最大: 18px */;
  --font-3: clamp(0.6875rem, 0.583vw + 0.550rem, 1.25rem); /* 最小: 11px / 可変: 0.583vw + 8.803px / 最大: 20px */
  --font-4: clamp(0.8125rem, 0.453vw + 0.706rem, 1.25rem); /* 最小: 13px / 可変: 0.453vw + 11.294px / 最大: 20px */
  --font-5: clamp(1.0625rem, 0.324vw + 0.986rem, 1.375rem); /* 最小: 17px / 可変: 0.324vw + 15.786px / 最大: 22px */
  --font-6: clamp(0.9375rem, 0.583vw + 0.801rem, 1.5rem); /* 最小: 15px / 可変: 0.583vw + 12.816px / 最大: 24px */
  --font-7: clamp(1.5625rem, 1.618vw + 1.183rem, 3.125rem); /* 最小: 25px / 可変: 1.618vw + 18.932px / 最大: 50px */
  --font-8: 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;
}
.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-8);
  line-height: 1.5;
  text-align: center;
}
.ttl-h3 {
  font-weight: var(--font-bold);
  font-size: var(--font-7);
  line-height: 1.5;
}
.txt-l {
  font-size: var(--font-4);
  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-1);
  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;
}

@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.625rem, 0.647vw + 0.473rem, 1.25rem);
  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-3);
  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-4);
  font-weight: var(--font-bold);
  text-align: center;
  line-height: 2;
}
@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-4);
  font-weight: var(--font-bold);
  line-height: 1.5;
}
.model-name {
  font-size: var(--font-4);
  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-1);
  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-5);
  font-weight: var(--font-bold);
  line-height: 1;
  white-space: nowrap;
}
.tax {
  font-size: var(--font-1);
}
.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-4);
  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: repeat(1, minmax(0, 1fr));
}
.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-4);
  font-weight: var(--font-bold);
  text-align: center;
  margin-top: clamp(1.25rem, 0.971vw + 1.022rem, 2.1875rem);
}
.case-detail-wrap {
  display: grid;
  grid-template-columns: 753fr 484fr;
  grid-auto-rows: auto;
  gap: clamp(1.875rem, 1.942vw + 1.420rem, 3.75rem);
  margin-top: clamp(1.875rem, 3.236vw + 1.116rem, 5rem);
}
.detail-img {
  align-self: start; /* または center, end */
  height: auto;
}

.case-design-slider-block {
  position: relative;
  width: 100%;
}

.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;
}

.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.9375rem, 1.295vw + 0.618rem, 1.875rem);
}

.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);
}
@media (max-width: 768px) {/*375-768*/
  .desgin .main-txt {
    text-align: left;
  }
  .case-detail-wrap {
        grid-template-columns: 1fr;
  }
}
/* bonus
____________________*/
.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:nth-of-type(n+2) {
  margin-top: clamp(4.375rem, 6.472vw + 2.882rem, 10.625rem);
}
.bonus-item .txt-block {
  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: -7.1875rem;
}
.bonus-txt {
  font-size: var(--font-4);
  font-weight: var(--font-bold);
}
.bonus-number {
  font-size: var(--font-6);
}
.ttl-jp {
  font-size: var(--font-4);
  font-weight: var(--font-bold);
  line-height: 1;
  margin-top: 0.25em;
}
.bonus-item-img-block {
  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-1);
  font-weight: var(--font-medium);
  margin-top: clamp(1rem, 1.036vw + 0.757rem, 2rem);
}
@media (max-width: 768px) {/*375-768*/
  .bonus-item {
    flex-direction: column;
    align-items: center;
  }
  .bonus-item .txt-block {
    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;
  }
  .ttl-jp {
    text-align: center;
  }
  .bonus-item-inner {
    flex-direction: column;
  }
  .mt0-sp {
    margin-top: 0;
  }
  .bonus-item-img-block picture {
    width: 100%;
  }
}
/* profile
____________________*/
.contents--profile {
  padding-top: clamp(5.625rem, 5.502vw + 4.336rem, 10.9375rem);
  padding-bottom: clamp(2.8125rem, 4.207vw + 1.826rem, 6.875rem);
	width: 100%;
	position: relative;
	z-index: 1;
}
.profile-logo {
  margin-inline: auto;
}
.profile-txt {
  font-size: clamp(0.8125rem, 0.194vw + 0.767rem, 1rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.9;
}
.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-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: 824px;
  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);
}

.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);
  border-top: 4px solid var(--white-1);
  border-right: 4px solid var(--white-1);
  margin: auto;
}

.modal-prev::before { transform: rotate(-135deg); }
.modal-next::before { transform: rotate(45deg); }

/* ------------------------------------
 * ページネーション (●)
 * ------------------------------------ */
.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;
}