@charset "utf-8";

:root {
	/* base */
	--cts-gutter: clamp(8vw, -2.212rem + 8.91vw, 3.3854166666666665vw);/*375-768*/
	--cts-width: 1785px;

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;      
	/* Noto Sans JP
	100 to 900
	*/

	/* color */
	--color-white-1: #FFFFFF;
	--color-gray-1: #EDECEB;
	--color-blue-1: #3718A4;
	--color-blue-2: #3252F6;
	--color-blue-3: #1E6BFF;
	--color-blue-4: #778CF9;
	--color-blue-5: #6E74EB;
	--color-blue-6: #898EFE;
	--color-blue-7: #CDD3E1;
	--color-blue-8: #528EFC;
	--color-blue-9: #EDF2FF;
	--color-blue-10: #091F8F;
	--color-blue-11: #6E74EE;
	--color-purple-1: #F6E5F5;
	--color-purple-2: #E0D8FD;
	--color-red-1: #EB4859;
	--color-red-2: #F5A8B0;
	--color-red-3: #A71A28; 
	--color-black-1: #000000;
	--color-black-2: #312929;
}

/* LP共通汎用
____________________*/
body {
	padding-right: 0 !important;
	overflow: visible !important;
}
#container a, #container a span {
    color: inherit;
    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-size: var(--cts-font-size);
	font-family: var(--dp-font-jp);
	letter-spacing: 0.05em;
	color: var(--color-white1);
	position: relative;
	z-index: 1;
}
.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-1);
}
.contents__wrap {
	padding-bottom: 11.458333333333332vw;
	position: relative;
	z-index: 1;
}
.contents__wrap .lp-bg {
	width: 100vw;
	height: 100vh;
	background: url(../../gamepc/img/houkaistarrail/bg-pc.webp) no-repeat left top/cover;
	position: fixed;
	top: 0;
	left: 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;
}
.ttl-h2 {
	margin-inline: auto;
}
@media (max-width: 768px) {/*375-768*/
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	.contents__wrap {
		padding-bottom: 16vw;
	}
	.contents__wrap .lp-bg {
		background: url(../../gamepc/img/houkaistarrail/bg-sp.webp) repeat-y left top / 100%;
	}
}
/* mv
____________________*/
.contents--mv {
	width: 100%;
	position: relative;
	z-index: 1;
}
.contents--mv img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
/* nav
____________________*/
.lp-nav {
    position: sticky;
    top: 2.604166666666667vw;
    width: auto; 
    max-width: 10.9375vw;
    margin-top: 1.5625vw;
    margin-left: auto;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
}

.lp-menu-btn {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%; 
    height: auto;
}

.lp-menu-btn img {
    width: 100%; /* 親の .lp-menu-btn の幅いっぱいに表示 */
    height: auto;
    display: block;
}

/* メニューの背景兼外枠（初期状態は非表示） */
.lp-menu-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* 暗めの背景色（お好みで調整） */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* アニメーション用の設定 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* activeクラスがついた時に表示 */
.lp-menu-wrapper.active {
    opacity: 1;
    visibility: visible;
}

/* メニューリストのスタイル */
.lp-menu {
    list-style: none;
    padding: 0;
    text-align: center;
}

.lp-menu li {
    margin: 1.5625vw 0;
}

.lp-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    display: block;
    transition: color 0.3s;
}

.lp-menu a:hover {
    color: var(--color-blue-6);
}
@media (max-width: 768px) {/*375-768*/
	.lp-nav {
		width: 16.8vw;
		max-width: inherit;
	}
	.lp-menu li {
		margin: 5.333333333333334vw 0;
	}
	.lp-menu a {
		font-size: 1.75rem;
	}
}
/* intro
____________________*/
.contents--intro {
	width: 100%;
	padding-top: 7.03125vw;
	position: relative;
	z-index: 2;
}
.intro-txt-block {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2.083333333333333vw;
	position: relative;
	z-index: 3;
}
.intro-txt-block::before,
.intro-txt-block::after {
	content: "";
	width: 11.915625vw;
	height: 3.6505208333333337vw;
	position: relative;
}
.intro-txt-block::before {
	background: url(../../gamepc/img/houkaistarrail/check-purple-left.webp) no-repeat center center/contain;
}
.intro-txt-block::after {
	background: url(../../gamepc/img/houkaistarrail/check-purple-right.webp) no-repeat center center/contain;
}
.intro-txt {
	color: var(--color-blue-1);
	font-size: 1.3541666666666667vw;
	font-weight: 900;
	text-align: center;
	line-height: 1.8;
	text-shadow: 0px 0px 0.4166666666666667vw var(--color-white-1);
}
@media (max-width: 768px) {/*375-768*/
	.contents--intro {
		padding-top: 16vw;
	}
	.intro {
		padding-inline: 2.666666666666667vw;
	}
	.intro-txt-block {
		gap: 1.3333333333333335vw;
	}
	.intro-txt-block::before, .intro-txt-block::after {
		width: 16.770666666666667vw;
		height: 5.1386666666666665vw;
	}
	.intro-txt {
		font-size: 3.4666666666666663vw;
	}
}
/* line-up
____________________*/
.contents--line-up {
	padding-top: 9.375vw;
	position: relative;
	z-index: 2;
}
.line-up .ttl-h2 {
	width: 38.59375vw;
}
.line-up-flex {
	display: flex;
	position: relative;
	gap: 2.604166666666667vw;
	margin-top: 4.6875vw;
}
.line-up-flex .desk {
	width: 27.34375vw;
	position: relative;
}
.line-up-flex .desk img {
	display: block;
	position: sticky;
	top: 5.208333333333334vw;
	left: 0;
}
/* コンテナ全体 */
.tab-container {
	width: 100%;
}
/* ボタンのグループ */
.tab-button-group {
	display: flex;
	justify-content: center;
	gap: 3.125vw;
}
/* タブの基本スタイル */
.tab-label {
	display: block;
	width: 16.145833333333336vw;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	border-bottom: none;
	border-radius: 9999px;
	transition: all 0.2s ease;
	outline: none;
	position: relative;
}
.tab-label::before,
.tab-label::after {
	content: none;
	width: 2.675520833333333vw;
	height: 1.3916666666666666vw;
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.tab-label::before {
	background: url(../../gamepc/img/houkaistarrail/arrow-white-left.webp) no-repeat center center/contain;
	left: 0.8333333333333334vw;
}
.tab-label::after {
	background: url(../../gamepc/img/houkaistarrail/arrow-white-right.webp) no-repeat center center/contain;
	right: 0.8333333333333334vw;
}
.tab-label.is-active::before,
.tab-label.is-active::after {
	content: "";
}
.tab-label[data-tab="tab1"] {
	background-color: var(--color-blue-2);
	box-shadow: 0 0.78125vw 0 var(--color-blue-10);
}
.tab-label[data-tab="tab2"] {
	background: var(--color-red-1);
	box-shadow: 0 0.78125vw 0 var(--color-red-3);
}
.tab-label .tab-line {
	width: calc(100% - 0.5208333333333333vw);
    height: calc(100% - 0.5208333333333333vw);
	border-radius: 9999px;
	display: flex;
	justify-content: center;
	align-items: center;
    margin: 0.26041666666666663vw;
    box-sizing: border-box;
    padding-block: 0.8854166666666666vw;
}
.tab-label[data-tab="tab1"] .tab-line {
    border: 1px solid var(--color-blue-4);
}
.tab-label[data-tab="tab2"] .tab-line {
    border: 1px solid var(--color-red-2);
}
.tab-label:hover {
	transform: translateY(0.78125vw);
	box-shadow: 0 0 0 currentColor;
}
.tab-label[data-tab="tab1"].is-active {
	box-shadow: none !important;
	transform: translateY(0.78125vw);
	
}
.tab-label[data-tab="tab2"].is-active {
	box-shadow: none !important;
	transform: translateY(0.78125vw);
}
.intel {
	width: 8.231770833333334vw;
}
.amd {
	width: 6.027604166666666vw;
}
.tab-content-group {
	position: relative;
	margin-top: 1.8229166666666667vw;
}
.tab-content {
	display: none;
}
.tab-content.is-active {
	display: block;
	animation: fadeIn 0.4s ease forwards;
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}
.tab-note {
	color: var(--color-blue-1);
	font-size: 0.9375vw;
	font-weight: 500;
	text-align: center;
	margin-top: 2.604166666666667vw;
}
.model-item-wrap {
	display: flex;
	flex-direction: column;
	gap: 3.125vw;
}
.model-item {
	color: var(--color-black-2);
	background: var(--color-white-1);
	padding: 2.604166666666667vw;
	border-radius: 1.8229166666666667vw;
	box-sizing: border-box;
	position: relative;
}
.model-item::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0.78125vw;
	transform: rotate(2deg);
	background: #EE841F;
	background: linear-gradient(0deg,rgba(247, 170, 44, 1) 0%, rgba(238, 132, 31, 1) 100%);
	border-radius: 1.8229166666666667vw;
	box-shadow: 0.3125vw 0.3125vw 0px var(--color-black-2);
}
.model-chatch-block {
	border-bottom: 2px solid var(--color-black-2);
	padding-bottom: 0.5208333333333333vw;
}
.model-catch {
	font-size: 1.25vw;
	font-weight: 900;
	line-height: 1.5;
}
.model-name {
	font-size: 1.25vw;
	font-weight: 900;
	line-height: 1.5;
	margin-top: 1.0416666666666665vw;
}
.model-spec {
	font-size: 0.9375vw;
	font-weight: 700;
	line-height: 1.5;
	margin-top: 0.5208333333333333vw;
}
.model-item-inner-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5625vw;
	margin-top: 0.5208333333333333vw;
}
.model-price {
	font-size: 1.25vw;
	font-weight: 700;
}
.model-price .tax {
	font-size: 0.9375vw;
}
.model-link {
	color: var(--color-black-2);
	font-size: 1.1458333333333333vw;
	font-weight: 700;
	width: 16.71875vw;
	height: 3.6979166666666665vw;
	background: url(../../gamepc/img/houkaistarrail/bg-line-up-btn.webp) no-repeat center center/cover;
	border-radius: 9999px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0.3125vw 0.3125vw 0px var(--color-black-2);
	transition: all 0.1s ease-in-out;
    text-decoration: none;
}
.model-link:hover {
    box-shadow: 0px 0px 0px var(--color-black-2);   
    transform: translate(0.3125vw, 0.3125vw);
}
@media (max-width: 768px) {/*375-768*/
	.contents--line-up {
		padding-top: 13.333333333333334vw;
	}
	.line-up .ttl-h2 {
		width: 68.98933333333332vw;
	}
	.line-up-flex {
		flex-direction: column;
		gap: 8vw;
		margin-top: 8vw;
	}
	.line-up-flex .desk {
		width: 53.333333333333336vw;
		margin-inline: auto;
	}
	.line-up-flex .desk img {
		position: relative;
		top: inherit;
	}
	.tab-button-group {
		gap: 6.133333333333333vw;
	}
	.tab-label[data-tab="tab1"] {
		box-shadow: 0 2.1333333333333333vw 0 var(--color-blue-10);
	}
	.tab-label[data-tab="tab2"] {
		box-shadow: 0 2.1333333333333333vw 0 var(--color-red-3);
	}
	.tab-label[data-tab="tab1"].is-active {
		transform: translateY(2.1333333333333333vw);
	}
	.tab-label[data-tab="tab2"].is-active {
		transform: translateY(2.1333333333333333vw);
	}
	.tab-label {
		width: 34.66666666666667vw;
	}
	.tab-label .tab-line {
        width: calc(100% - 1.6vw);
        height: calc(100% - 1.6vw);
        margin: 0.8vw;
        padding-block: 2.4vw;
	}
	.tab-label::before, .tab-label::after {
		width: 5.613333333333333vw;
		height: 2.9199999999999995vw;
	}
	.tab-label::before {
		left: 1.6vw;
	}
	.tab-label::after {
		right: 1.6vw;
	}
	.intel {
		width: 17.274666666666665vw;
	}
	.amd {
		width: 12.650666666666666vw;
	}
	.tab-note {
		font-size: 2.666666666666667vw;
		margin-top: 5.333333333333334vw;
	}
	.model-item-wrap {
		gap: 12vw;
	}
	.model-item {
		padding: 5.333333333333334vw 2.666666666666667vw 8vw;
		border-radius: 5.333333333333334vw;
	}
	.model-item::after {
		border-radius: 5.333333333333334vw;
		left: 2.666666666666667vw;
		transform: rotate(3deg);
	}
	.model-chatch-block {
		border-bottom-width: 1px;
	}
	.model-catch {
		font-size: 4.266666666666667vw;
	}
	.model-name {
		font-size: 4.266666666666667vw;
	}
	.model-spec {
		font-size: 3.4666666666666663vw;
	}
	.model-item-inner-flex {
		flex-direction: column;
		gap: 5.333333333333334vw;
	}
	.model-price {
		font-size: 6.666666666666667vw;
		margin-left: auto;
	}
	.model-price .tax {
		font-size: 4.533333333333333vw;
	}
	.model-link {
		font-size: 4.533333333333333vw;
		width: 66.4vw;
		height: 14.933333333333335vw;
	}
}
/* special-design
____________________*/
.contents--special-design {
	padding-top: 6.25vw;
	position: relative;
	z-index: 2;
}
.special-design {
	max-width: inherit;
	padding-inline: 0;
}
.special-design .ttl-h2 {
	width: 68.82916666666667vw;
}
.special-design-catch-block {
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.083333333333333vw;
    position: relative;
    z-index: 3;
	margin-top: 4.947916666666666vw;
}
.special-design-catch-block::before, .special-design-catch-block::after {
    content: "";
    width: 12.538020833333333vw;
    height: 2.509895833333333vw;
    position: relative;
}
.special-design-catch-block::before {
    background: url(../../gamepc/img/houkaistarrail/check-purple-left-long.webp) no-repeat center center / contain;
}
.special-design-catch-block::after {
	background: url(../../gamepc/img/houkaistarrail/check-purple-right-long.webp) no-repeat center center / contain;
}
.special-design-catch-block .special-design-catch {
	color: var(--color-blue-1);
    font-size: 2.34375vw;
    font-weight: 900;
    text-align: center;
    line-height: 1.8;
    text-shadow: 0px 0px 0.4166666666666667vw var(--color-white-1);
}
.swiper-slide .slide-ttl-block {
	padding: 0.5208333333333333vw 1.0416666666666665vw;
	background: var(--color-purple-1);
	border-radius: 1.40625vw 1.40625vw 0 0;
	position: relative;
	z-index: 1;
}
.swiper-slide .slide-ttl-block .ttl-deco {
	width: 8.840104166666666vw;
}
.swiper-slide .case-block {
	padding: 2.34375vw 0 0;
	position: relative;
}
.swiper-slide .case-block .case {
	position: relative;
	z-index: 3;
}
.swiper-slide .slide-illust,
.swiper-slide .thunder-1,
.swiper-slide .thunder-2 {
    opacity: 0;
    visibility: hidden;
    /* transform-originをbottomにすると、より「せり上がる」感じが出ます */
    transform-origin: bottom center;
}
.swiper-slide .case-block .slide-illust {
	position: absolute;
	z-index: 2;
}
.swiper-slide .case-block .slide-illust.Illust-1 {
	width: 15.364583333333334vw;
    top: -2.604166666666667vw;
    left: 3.125vw;
}
.swiper-slide .case-block .slide-illust.Illust-2 {
    width: 20.625vw;
    top: -10.520833333333334vw;
    left: 11.979166666666668vw;
}
.swiper-slide .case-block .slide-illust.Illust-3 {
    width: 15.052083333333332vw;
    top: -6.510416666666667vw;
    left: 11.979166666666668vw;
}
.swiper-slide .case-block .thunder-1 {
    width: 3.5171875vw;
    position: absolute;
    top: 12.5vw;
    left: 3.6458333333333335vw;
}
.swiper-slide .case-block .thunder-2 {
	width: 4.153645833333333vw;
	position: absolute;
    top: 7.291666666666667vw;
    right: 2.604166666666667vw;
}
/* swiper */
.special-design-all {
	padding-top: 10.46875vw;
	margin-top: -6.25vw;
	overflow-x: hidden;
}
.swiper-container-wrapper {
	width: 100%;
	overflow: visible;
	position: relative;
}
.swiper {
	width: 100%;
	max-width: 100vw;
	margin: 0 auto;
	overflow: visible !important;
	position: relative;
}
.swiper-wrapper {
	display: flex;
	align-items: flex-end; 
}
.swiper-slide {
	width: 39.739583333333336vw;
	background: url(../../gamepc/img/houkaistarrail/bg-line-up.webp) no-repeat left top/cover;
	border: 0.20833333333333334vw solid var(--color-blue-1);
	border-radius: 1.5625vw;
	transition: transform 0.4s ease;
	transform-origin: bottom center;
	flex-shrink: 0;
	position: relative;
	box-shadow: 0.3125vw  0.3125vw 0px var(--color-blue-1);
	margin-bottom:  0.3125vw;
}
.swiper-slide-active {
	transform: scale(1);
}
.swiper-slide-prev,
.swiper-slide-next {
	transform: scale(0.8) !important;
}
.swiper-button-prev,
.swiper-button-next {
	width: 7.708333333333334vw;
	height: 7.708333333333334vw;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}
.swiper-button-prev::after,
.swiper-button-next::after {
	content: "";
}
.swiper-button-prev img,
.swiper-button-next img {
	width: 100%;
	height: auto;
}
.swiper-button-prev {
	left: calc(50% - (39.739583333333336vw / 2) - 4.166666666666666vw);
}
.swiper-button-next {
	right: calc(50% - (39.739583333333336vw / 2) - 4.166666666666666vw);
}
.water-cooled-head-wrap {
	width: 58.802083333333336vw;
	height: 37.864583333333336vw;
	background: url(../../gamepc/img/houkaistarrail/bg-cat.webp) no-repeat center center/contain;
	margin: 5.989583333333334vw auto 0;
	padding: 7.03125vw 5.208333333333334vw 0;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
.water-cooled-head-inner-flex {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 6.197916666666667vw;
}
.water-cooled-head-block .water-cooled-head {
	width: 16.09375vw;
}
.water-cooled-head-block figcaption {
	color: var(--color-blue-1);
	font-size: 1.25vw;
	font-weight: 700;
	text-align: center;
	line-height: 1.8;
	margin-top: 5.208333333333334vw;
}
.water-cooled-head-desk-block {
	width: 22.8125vw;
}
.water-cooled-head-wrap .arrows-wrap {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.625vw;
	position: absolute;
	top: 37%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
.water-cooled-head-wrap .arrows-wrap .arrows {
	width: 3.125vw;
}
@media (max-width: 768px) {/*375-768*/
	.contents--special-design {
		padding-top: 24vw;
	}
	.special-design .ttl-h2 {
		width: 96.8vw;
	}
	.special-design-catch-block {
		margin-top: 8vw;
		gap: 2.1333333333333333vw;
	}
	.special-design-catch-block::before, .special-design-catch-block::after {
		width: 20.99733333333333vw;
		height: 6.432vw;
	}
	.special-design-catch-block::before {
		background: url(../../gamepc/img/houkaistarrail/check-blue-left-sp.webp) no-repeat center center/contain;
	}
	.special-design-catch-block::after {
		background: url(../../gamepc/img/houkaistarrail/check-blue-right-sp.webp) no-repeat center center/contain;
	}
	.special-design-catch-block .special-design-catch {
		font-size: 3.4666666666666663vw;
	}
	/* swiper */
	.swiper-slide {
		width: 70.13333333333334vw;
		border-radius: 5.333333333333334vw;
		border-width: 2px;
	}
	.swiper-slide .slide-ttl-block {
		padding: 1.0666666666666667vw 2.666666666666667vw;
		border-radius: 5.066666666666666vw 5.066666666666666vw 0 0;
	}
	.swiper-slide .slide-ttl-block .ttl-deco {
		width: 15.543999999999999vw;
	}
	.swiper-slide .case-block {
		padding-top: 6.666666666666667vw;
	}
	.swiper-slide .case-block .slide-illust.Illust-1 {
		width: 29.333333333333332vw;
		top: -4vw;
		left: 5.333333333333334vw;
	}
	.swiper-slide .case-block .slide-illust.Illust-2 {
		width: 36.266666666666666vw;
		top: -16vw;
        left: 16vw;
	}
	.swiper-slide .case-block .slide-illust.Illust-3 {
		width: 26.666666666666668vw;
        top: -9.333333333333334vw;
        left: 21.333333333333336vw;
	}
	.swiper-slide .case-block .thunder-1 {
		width: 23.31px;
		top: 26.666666666666668vw;
		left: 5.333333333333334vw;
	}
	.swiper-slide .case-block .thunder-2 {
		width: 27.52px;
		top: 10.666666666666668vw;
		right: 4vw;
	}
	.swiper-button-prev, .swiper-button-next {
		width: 17.773333333333337vw;
		height: 17.773333333333337vw;
	}
	.swiper-button-prev {
		left: calc(50% - (52vw / 2) - 21.333333333333336vw);
	}
	.swiper-button-next {
		right: calc(50% - (52vw / 2) - 21.333333333333336vw);
	}
	.water-cooled-head-wrap {
		width: 94.13333333333334vw;
		height: 60.53333333333333vw;
		padding: 9.333333333333334vw 8vw 0;
		margin: 6.666666666666667vw auto 0;
	}
	.water-cooled-head-inner-flex {
		gap: 1.3333333333333335vw;
	}
	.water-cooled-head-block .water-cooled-head {
		width: 26.666666666666668vw;
	}
	.water-cooled-head-block figcaption {
		font-size: 2.933333333333333vw;
		letter-spacing: 0;
		margin-top: 2.666666666666667vw;
	}
	.water-cooled-head-desk-block {
		width: 39.46666666666667vw;
	}
	.water-cooled-head-wrap .arrows-wrap {
		gap: 1.3333333333333335vw;
		top: 32%;
	}
	.water-cooled-head-wrap .arrows-wrap .arrows {
		width: 4.8vw;
	}
}
/* bonus
____________________*/
.contents--bonus {
	padding-top: 11.979166666666668vw;
	position: relative;
	z-index: 2;
}
.contents--bonus .face {
	position: absolute;
	z-index: 3;
}
.contents--bonus .face.part-1 {
    width: 12.1875vw;
    top: 32.8125vw;
    right: 6.145833333333333vw;
}
.contents--bonus .face.part-2 {
	width: 12.1875vw;
    top: 117.70833333333333vw;
    left: 7.291666666666667vw;
}
.contents--bonus .face.part-3 {
	width: 10.416666666666668vw;
	top: 149.47916666666669vw;
	right: 7.8125vw;
}
.bonus {
	max-width: 94.27083333333334vw;
}
.bonus .ttl-h2 {
	width: 33.47604166666667vw;
}
.bonus-item-wrap {
	margin-top: 6.770833333333333vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 4.947916666666666vw 2.504166666666667vw;
}
.bonus-item {
	width: 100%;
	max-width: 55.46875vw;
	background: #8C90DB;
	background: linear-gradient(0deg, rgba(140, 144, 219, 1) 0%, rgba(184, 195, 219, 1) 100%);
	border: 0.5208333333333333vw solid var(--color-blue-6);
	border-radius: 1.5625vw;
	box-sizing: border-box;
	border-radius: 1.5625vw;
	position: relative;
}
.bonus-item:nth-of-type(2),
.bonus-item:nth-of-type(3) {
	max-width: 37.864583333333336vw;
}
.bonus-item::before {
	content: "";
    background: var(--color-blue-9);
    border: 0.5208333333333333vw solid var(--color-blue-9);
    border-radius: 1.5625vw;
    width: calc(100% + 2.083333333333333vw);
    height: calc(100% + 2.083333333333333vw);
    position: absolute;
    top: -1.0416666666666665vw;
    left: -1.0416666666666665vw;
    z-index: -2;
}
.bonus-item::after {
    content: "";
    position: absolute;
    top: -30px;
    left: -30px;
    border-radius: 30px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    background: linear-gradient(to bottom, #FCF368, #BDFCB4, #61F8E3);
    transform: translate(20px, 20px);
    z-index: -3;
}
.bonus-item .heart-small {
	width: 1.875vw;
	height: 1.5104166666666667vw;
	z-index: 5;
	position: absolute;
}
.bonus-item .heart-small.part-1 {
	right: 3.125vw;
    top: -0.26041666666666663vw;
}
.bonus-item .heart-small.part-2 {
	top: -1.5625vw;
    right: 0.78125vw;
	/* z-index: -1; */
}
.bonus-item .heart-small.part-3 {
    top: -3.3854166666666665vw;
    right: 3.6458333333333335vw;
}
.bonus-item .bonus-ttl-block {
	padding: 1.0416666666666665vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--color-blue-6);
	position: relative;
	z-index: 5;
}
.ttl-block-inner .ttl-h3 {
	color: var(--color-white-1);
	font-size: 1.8229166666666667vw;
	font-weight: 900;
	line-height: 1.5;
}
.ttl-block-inner .ttl-h3 .large {
	font-size: 1.75em;
	position: relative;
    bottom: -0.2vw;
}
.ttl-block-inner .ttl-note {
	color: var(--color-white-1);
	font-size: 1.25vw;
	font-weight: 700;
	line-height: 1.7;
	margin-top: 0.5208333333333333vw;
}
.deco-heart {
	width: 4.0625vw;
}
.bonus-img-block {
	padding: 2.604166666666667vw;
	box-sizing: border-box;
}
.bonus-img {
	width: 100%;
	margin-inline: auto;
}
.stand {
	max-width: 46.875vw;
}
.keycap {
	max-width: 34.739583333333336vw;
}
.rubber-cable {
	max-width: 30.9375vw;
}
.wallpaper {
	max-width: 39.6875vw;
}
.pointer {
	max-width: 31.093749999999996vw;
}
.serial {
	max-width: inherit;
}
.txt-rendering {
	color: var(--color-white-1);
	font-size: 0.9375vw;
	font-weight: 700;
	width: fit-content;
	position: relative;
	margin-top: 1.8229166666666667vw;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.5208333333333333vw;
	cursor: pointer;
}
.txt-rendering .arrow-rendering {
	width: 2.34375vw;
	height: 2.34375vw;
	background: var(--color-blue-11);
	border-radius: 50%;
	position: relative;
	transition: transform 0.3s ease;
}
.txt-rendering .arrow-rendering::before {
    content: "";
    width: 1.3307291666666667vw;
    height: 0.6921875vw;
    background: url(../../gamepc/img/houkaistarrail/arrow-white.webp) no-repeat center center/contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.txt-rendering:hover .arrow-rendering {
    transform: scale(1.2);
}
.item-note {
	color: var(--color-white-1);
	font-size: 0.9375vw;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
	margin-top: 1.5625vw;
}
.bonus-item:nth-of-type(3) .item-note {
	margin-top: 4.6vw;
}
.face-sp-wrap {
	display: none;
}
@media (max-width: 768px) {/*375-768*/
	.contents--bonus {
		padding-top: 21.333333333333336vw;
	}
	.contents--bonus .face {
		display: none;
	}
	.bonus .ttl-h2 {
		width: 59.66400000000001vw;
	}
	.bonus-item-wrap {
		margin-top: 14.666666666666666vw;
		gap: 10.666666666666668vw;
	}
	.bonus-item {
		border-radius: 1.3333333333333335vw;
		max-width: inherit;
	}
	.bonus-item:nth-of-type(2), .bonus-item:nth-of-type(3) {
		max-width: inherit;
	}
	.bonus-item::before {
		content: "";
		border-width: 2.666666666666667vw;
		border-radius: 2.666666666666667vw;
		width: calc(100% + 8vw);
		height: calc(100% + 8vw);
		top: -4vw;
		left: -4vw;
	}
	.bonus-item::after {
		top: -8vw;
		left: -8vw;
		border-radius: 2.666666666666667vw;
		width: calc(100% + 8vw);
		height: calc(100% + 8vw);
	}
	.bonus-item .bonus-ttl-block {
		padding: 2.666666666666667vw;
	}
	.ttl-block-inner .ttl-h3 {
		font-size: 4vw;
	}
	.ttl-block-inner .ttl-note {
		font-size: 2.666666666666667vw;
	}
	.bonus-img-block {
		padding: 4vw;
	}
	.deco-heart {
		width: 8.799999999999999vw;
	}
	.bonus-item .heart-small {
		width: 3.2vw;
		height: 2.666666666666667vw;
	}
	.bonus-item .heart-small.part-1 {
		right: 4vw;
		top: -1.3333333333333335vw;
	}
	.bonus-item .heart-small.part-2 {
		top: -7.199999999999999vw;
		right: -0.5333333333333333vw;
		z-index: -1;
	}
	.bonus-item .heart-small.part-3 {
		top: -10.666666666666668vw;
		right: 5.333333333333334vw;
	}
	.stand {
		max-width: 70.93333333333334vw;
	}
	.keycap {
		max-width: 78.93333333333334vw;
	}
	.rubber-cable {
		max-width: 70.93333333333334vw;
	}
	.wallpaper {
		max-width: 65.60000000000001vw;
	}
	.pointer {
		max-width: 56.266666666666666vw;
	}
	.txt-rendering {
		font-size: 2.666666666666667vw;
		margin-top: 4vw;
	}
	.txt-rendering .arrow-rendering {
		width: 5.866666666666666vw;
		height: 5.866666666666666vw;
	}
	.txt-rendering .arrow-rendering::before {
		width: 3.221333333333334vw;
		height: 1.6746666666666667vw;
	}
	.item-note {
		font-size: 2.666666666666667vw;
		margin-top: 2.666666666666667vw;
	}
	.face-sp-wrap {
		display: flex;
		justify-content: center;
		gap: 3.4666666666666663vw;
		margin-top: 13.333333333333334vw;
	}
	.face-sp-wrap .face-sp {
		width: 17.866666666666667vw;
		position: relative;
		z-index: 2;
		transform-origin: center bottom;
        animation: comical-bounce 3s ease-in-out infinite;
        animation-delay: calc(var(--delay, 0) * 1s);
	}
	.face-sp-wrap .face-sp:nth-of-type(1) {
		width: 21.333333333333336vw;
		top: -3.4666666666666663vw;
	}
	@keyframes comical-bounce {
        0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
        5% { transform: translateY(-10px) scale(1.1, 0.9) rotate(5deg); }
        10% { transform: translateY(0) scale(0.9, 1.1) rotate(-5deg); }
        15% { transform: translateY(-5px) scale(1.05, 0.95) rotate(2deg); }
        20% { transform: translateY(0) scale(1) rotate(0); }
        /* 20%以降100%まで静止させることで、「時々動く」感じを出します */
    }
}
/* contents--special-contents
____________________*/
.contents--special-contents {
	padding-top: 15.104166666666666vw;
	position: relative;
	z-index: 2;
}
.special-contents .ttl-h2 {
	width: 63.378125vw;
}
.special-contents-block {
	width: 54.6875vw;
	background: url(../../gamepc/img/houkaistarrail/bg-panel-pc.webp) repeat-y left top/100% , var(--color-gray-1);
	padding: 3.90625vw 2.083333333333333vw 6.510416666666667vw;
	margin: 6.510416666666667vw auto 0;
	border-radius: 1.0416666666666665vw;
	box-sizing: border-box;
	position: relative;
}
.special-contents-block::before {
	content: "";
	width: 100%;
	height: 100%;
	border: 1.0416666666666665vw solid var(--color-white-1);
	border-radius: 1.0416666666666665vw;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.special-contents-block .ttl-h3 {
	color: var(--color-blue-3);
	font-size: 2.864583333333333vw;
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
	position: relative;
	z-index: 3;
}
.special-contents-block .special-contents-block-inner {
	position: relative;
	z-index: 3;
	margin-top: 3.125vw;
}
.special-contents-block .special-contents-block-inner .panel {
	width: 28.697916666666668vw;
	position: absolute;
	left: -4.427083333333334vw;
	top: 0;
	z-index: 3;
}
.special-contents-block .special-contents-block-inner .txt-block {
	width: 25.260416666666668vw;
	margin-left: auto;
	position: relative;
	z-index: 3;
}
.special-contents-txt {
	color: var(--color-black-2);
	font-size: 1.3020833333333335vw;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.1em;
}
.special-contents-note {
	color: var(--color-black-2);
	font-size: 0.9895833333333333vw;
	font-weight: 700;
	line-height: 1.7;
	margin-top: 1.5625vw;
}
.shop-wrap {
	background: var(--color-white-1);
	border: 0.15625vw solid var(--color-blue-3);
	padding: 1.5625vw;
	margin-top: 3.3854166666666665vw;
	position: relative;
	z-index: 3;
	box-sizing: border-box;
}
.shop-ttl-block {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.8854166666666666vw;
	position: relative;
	z-index: 3;
}
.shop-ttl-block::before,
.shop-ttl-block::after {
	content: "";
	width: 5.694791666666667vw;
	height: 1.1401041666666667vw;
	position: relative;
}
.shop-ttl-block::before {
	background: url(../../gamepc/img/houkaistarrail/check-blue-left.webp) no-repeat center center/contain;
}
.shop-ttl-block::after {
	background: url(../../gamepc/img/houkaistarrail/check-blue-right.webp) no-repeat center center/contain;
}
.shop-ttl-block .ttl-h4 {
	color: var(--color-blue-3);
	font-size: 1.5625vw;
	line-height: 1;
}
.shop-list {
	width: fit-content;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.0416666666666665vw;
	text-align: center;
	margin: 1.3020833333333335vw auto 0;
}
.shop-list li {
	color: var(--color-blue-3);
	font-size: 1.1458333333333333vw;
	font-weight: 700;
    text-align: left;
}
@media (max-width: 768px) {/*375-768*/
	.contents--special-contents {
		padding-top: 10.666666666666668vw;
	}
	.special-contents .ttl-h2 {
		width: 96.62933333333334vw;
	}
	.special-contents {
		padding-inline: 0;
	}
	.special-contents-block {
		width: 83.73333333333333vw;
		margin-top: 12vw;
		padding: 9.333333333333334vw 5.333333333333334vw 30px;
	}
	.special-contents-block::before {
		border-width: 2.666666666666667vw;
	}
	.special-contents-block .ttl-h3 {
		font-size: 5.333333333333334vw;
	}
	.special-contents-block .special-contents-block-inner {
		margin-top: 5.333333333333334vw;
	}
	.special-contents-block .special-contents-block-inner .txt-block {
		width: 35.199999999999996vw;
	}
	.special-contents-block .special-contents-block-inner .panel {
        width: 51.2vw;
        left: -13.333333333333334vw;
        top: 2.666666666666667vw;
	}
	.special-contents-txt {
		font-size: 3.4666666666666663vw;
	}
	.special-contents-note {
		font-size: 2.933333333333333vw;
		margin-top: 0;
		letter-spacing: 0.1em;
	}
	.shop-wrap {
		margin-top: 8vw;
		padding: 5.333333333333334vw 2.1333333333333333vw;
	}
	.shop-ttl-block {
		gap: 2.1333333333333333vw;
	}
	.shop-ttl-block::before, .shop-ttl-block::after {
		width: 21.8vw;
		height: 4.362666666666667vw;
	}
	.shop-ttl-block .ttl-h4 {
		font-size: 3.4666666666666663vw;
	}
	.shop-list {
		width: 100%;
		margin-top: 4vw;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		gap: 2.666666666666667vw;
	}
	.shop-list li {
		width: calc(50% - 2.1333333333333333vw);
		font-size: 2.666666666666667vw;
	}
}
/* gallery
____________________*/
.contents--gallery {
	padding-top: 18.75vw;
	position: relative;
	z-index: 2;
}
.gallery .ttl-h2 {
	width: 35.32760416666667vw;
}
.movie-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.604166666666667vw 10.416666666666668vw;
	margin-top: 4.947916666666666vw;
}
.movie-wrap .movie-block {
	width: 33.33333333333333vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.movie-wrap .movie-block:nth-of-type(1) {
	width: 100%;
	max-width: inherit;
}
.movie-wrap .movie-block-inner {
	width: 100%;
	max-width: 33.33333333333333vw;
	aspect-ratio: 16 / 9;
}
.movie-wrap .movie-block-inner iframe  {
	width: 100%;
	height: 100%;
}
.movie-ttl {
	color: var(--color-blue-1);
	font-size: 1.3020833333333335vw;
	font-weight: 900;
	line-height: 1.5;
	margin-top: 1.5625vw;
}
@media (max-width: 768px) {/*375-768*/
	.contents--gallery {
		padding-top: 29.333333333333332vw;
	}
	.gallery .ttl-h2 {
		width: 80.88000000000001vw;
	}
	.movie-wrap {
		flex-direction: column;
		margin-top: 13.333333333333334vw;
		gap: 8vw;
	}
	.movie-wrap .movie-block {
		width: 100%;
	}
	.movie-wrap .movie-block-inner {
		max-width: 320px;
	}
	.movie-ttl {
		font-size: 5.333333333333334vw;
		margin-top: 2.666666666666667vw;
	}
}
/* profile
____________________*/
.contents--profile {
	padding-top: 11.458333333333332vw;
	position: relative;
	z-index: 2;
}
.profile .ttl-h2 {
	width: 31.657812500000006vw;
}
.profile-wrap {
	width: 54.6875vw;
	background: var(--color-purple-2);
	border: 0.15625vw solid var(--color-blue-1);
	box-sizing: border-box;
	padding: 3.6458333333333335vw 3.125vw;
	margin: 4.947916666666666vw auto 0;
	position: relative;
	z-index: 1;
}
.profile-wrap .profile-txt-block {
	max-width: 27.083333333333332vw;
	position: relative;
}
.profile-txt {
    color: var(--color-blue-1);
    font-size: 1.3020833333333335vw;
    font-weight: 700;
    line-height: 1.9;
}
.profile-txt:nth-of-type(n+2) {
	margin-top: 1em;
}
.profile-img {
    width: 44.166666666666664vw;
    position: absolute;
    top: -6.354166666666666vw;
    right: -19.791666666666664vw;
    z-index: 2;
}
.link-btn-block {
	width: 31.25vw;
	margin: 7.552083333333333vw auto 0;
}
.link-btn-block .link-btn {
	color: var(--color-white-1);
	font-size: 1.3020833333333335vw;
	font-weight: 700;
	text-align: center;
	display: block;
	border: 0.20833333333333334vw solid var(--color-white-1);
	border-radius: 9999px;
	background: url(../../gamepc/img/houkaistarrail/bg-official-btn.webp) no-repeat center center/cover ,var(--color-blue-3);
	box-shadow: 0 0.4166666666666667vw 0 #7CFFF7;
    position: relative;
    top: 0;
    transition: all 0.15s ease-out;
}
.link-btn-block .link-btn:hover {
    top: 0.4166666666666667vw;
    box-shadow: none;
}
.link-btn-block .link-btn:active {
    top: 0.4166666666666667vw;
    box-shadow: 0 0 0 #7CFFF7;
}
.link-btn-block .link-btn .link-btn-inner {
	display: block;
	border: 2px solid var(--color-blue-8);
	border-radius: 9999px;
	padding-block: 1.3020833333333335vw;
	margin: 0.26041666666666663vw;
	box-sizing: border-box;
}
.profile-logo {
	width: 29.166666666666668vw;
	margin: 4.166666666666666vw auto 0;
}
.lp-copy {
	color: var(--color-blue-1);
	font-size: 1.1458333333333333vw;
	font-weight: 700;
	text-align: center;
	margin: 4.166666666666666vw auto 0;
}
@media (max-width: 768px) {/*375-768*/
	.contents--profile {
		padding-top: 37.333333333333336vw;
		overflow: hidden;
	}
	.profile .ttl-h2 {
		width: 72.48vw;
		position: relative;
		z-index: 3;
	}
	.profile-wrap {
		width: 83.73333333333333vw;
		padding: 24vw 4.533333333333333vw 10.666666666666668vw;
		margin: 56.00000000000001vw auto 0;
	}
	.profile-wrap .profile-txt-block {
		max-width: inherit;
	}
	.profile-img {
		width: 123.46666666666665vw;
		top: -72vw;
		left: 62%;
		transform: translateX(-50%);
	}
	.profile-txt {
		font-size: 4.266666666666667vw;
		letter-spacing: 0;
	}
	.link-btn-block {
		width: 83.73333333333333vw;
		margin-top: 21.333333333333336vw;
	}
	.link-btn-block .link-btn {
		font-size: 4vw;
		border: 3px solid var(--color-white-1);
	}
	.link-btn-block .link-btn .link-btn-inner {
		padding-block: 12px;
		border: 1px solid var(--color-blue-8);
		margin: 0.8vw;
	}
	.profile-logo {
		width: 84.26666666666667vw;
		margin-top: 8vw;
	}
	.lp-copy {
		font-size: 2.933333333333333vw;
		margin-top: 9.333333333333334vw;
	}
}
/* modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 表示クラス */
.modal-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
position: relative;
    /* 横幅の最大値を 800px に制限 */
    width: 90%;
    max-width: 800px; 
    background: none !important;
    /* 縦方向も画面からはみ出さないようにガード */
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content img {
/* コンテナの幅（最大800px）に合わせる */
    width: 100%;
    height: auto;
    /* 縦長の画像の場合に画面を突き抜けないようにする */
    max-height: 90vh;
    object-fit: contain; 
    display: block;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* 閉じるボタン（右上の×） */
.modal-close {
    position: absolute;
    top: -45px;
    right: -45px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.modal-close::before,
.modal-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    background-color: #fff;
}
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 768px) {
    .modal-close {
        top: -50px;
        right: 0;
    }
}