@charset "utf-8";

:root {
	/* base */
	--cts-gutter: 30px;
	--cts-width: 1000px;

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;
	/* Noto Sans JP
	Noto Sans JP Thin 100
	Noto Sans JP Light 300
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 600
	*/
	--dp-font-en: "Roboto", sans-serif;
	/* Roboto
	Roboto Bold 700 Italic
	*/
	--cts-font: century-gothic, sans-serif;
	/* Century Gothic Pro Italic
	font-weight: 400;
	font-style: italic;
	*/

	--dp-h1-size: clamp(24px,calc(1.159rem + 1.45vw),36px);
	--dp-h2-size: clamp(20px,calc(1.023rem + .97vw),28px);
	--dp-h3-size: clamp(18px,calc(.955rem + .73vw),24px);
	--dp-h4-size: clamp(16px,calc(.886rem + .48vw),20px);
	--dp-p-l-size: clamp(14px,calc(.818rem + .24vw),16px);/* 本文 Large */
	--dp-p-note-size: clamp(10px,calc(.597rem + .12vw),11px);/* 本文 Notes */
	--dp-price-s-size: clamp(16px,calc(.886rem + .48vw),20px);/* 価格 Small */
	--dp-price-tax-s-size: clamp(12px,calc(.693rem + .24vw),14px);/* 円・税 Small */

	--cts-font-size: clamp(12px,calc(.693rem + .24vw),14px);/* DP-Medium */
	--cts-font-ls: .025em;/*letter-spacing*/
	--cts-font-ls-02: .05em;

	/* color */
	--dp-color: #004da1;
	--dp-color-price: #e43344;
	--cts-color: #02012F;

}


/* LP共通汎用
____________________*/
#container {
	width: 100%;
	margin: auto;
}
.column2R #main {
	float: none;
	width: auto;
}
.breadCrumb {
	margin: 0 auto !important;
}
.pagetop {
	display: none;
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}
figure {
	margin: 0;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
.sp {
	display: none;
}
#s_container {
	font-family: var(--dp-font-jp);
	width: 100%;
	margin: 10px auto 0;
}
.contentsWrap {
	width: 100%;
	color: var(--cts-color);
	font-size: var(--cts-font-size);
}
.contentsWrap img {
	max-width: 100%;
}
.clearfix:after, #nav1:after, #nav2:after, #nav3:after, #container:after, #contents:after, #footerNav:after {
	content: none !important;
}

@media (max-width: 479px) {
	#container {
		margin-bottom: 0 !important;
	}
	.leadSection.clearfix {
		display: none;
	}
}


/* コンテンツ
____________________*/
.contentsWrap {
	background: url(../5info/img/galleria_gigacrysta/bg.jpg) fixed;
	background-size: cover;
}
.contents {
	padding-block-start: clamp(80px,calc(2.727rem + 9.7vw),160px);
	padding-block-end: clamp(100px,calc(4.972rem + 5.45vw),145px);
}
.contents__inner {
	width: clamp(300px,100%,calc(var(--cts-width) +  var(--cts-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--cts-gutter);
	box-sizing: border-box;
}
.contents__ttl {
	text-align: center;
}
.contents__subttl {
	margin-block-start: 70px;
	font-size: 25px;
	font-family: var(--cts-font);
	font-weight: 400;
	font-style: italic;
	text-align: center;
	letter-spacing: var(--cts-font-ls-02);
	line-height: 1.12;
}
.contents__subttl-inner {
	position: relative;
	display: inline-block;
	padding-inline: 70px;
	text-align: center;
}
.contents__subttl-inner::before,
.contents__subttl-inner::after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	top: 0;
	background: #2AC5FF;
	transform: rotate(40deg);
}
.contents__subttl-inner::before {
	left: 0;
}
.contents__subttl-inner::after {
	right: 0;
}
.__dp-h2--jp {
	display: inline-block;
	font-size: var(--dp-h2-size);
	font-weight: 600;
	transform: skewX(-10deg);
}
.__dp-h2--en {
	font-size: var(--dp-h2-size);
	font-family: var(--dp-font-en);
	font-weight: 700;
	font-style: italic;
	letter-spacing: var(--cts-font-ls-02);
}
.__dp-h3--en {
	font-size: var(--dp-h3-size);
	font-weight: 700;
	font-style: italic;
	letter-spacing: var(--cts-font-ls-02);
}
.link__inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: clamp(5px,0.236rem + 0.38vw,8px);
	padding-inline: clamp(25px,0.737rem + 2vw,40px);
	background: var(--dp-color);
	font-size: var(--dp-p-l-size);
	text-decoration: none;
	letter-spacing: var(--cts-font-ls);
	box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
}
.link__inner::before {
	position: absolute;
	content: "";
	width: 150%;
	height: 100%;
	top: 0;
	left: -168%;
	background: #00a2e6;
	transform: skewX(-18deg);
	opacity: .3;
	z-index: -1;
}
.link__inner::after {
	content: "";
	position: absolute;
	top: calc(50% - 3px);
	right: 17px;
	width: 6px;
	height: 6px;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-color: #fff;
	transform: rotate(-45deg);
}
.link--over::before {
	animation: link-over ease-out .4s both;
}
.link--out::before {
	animation: link-out ease-in .4s both;
}
@keyframes link-over {
	0% {
		left: -168%;
	}
	100% {
		left: -18%;
	}
}
@keyframes link-out {
	0% {
		left: -18%;
	}
	100% {
		left: 168%;
	}
}
.__dp_price,
.__dp_tax {
	color: #e43344;
	letter-spacing: var(--cts-font-ls-02);
}
.__dp_price {
	font-size: var(--dp-price-s-size);
	font-weight: 600;
}
.__dp_tax {
	font-size: var(--dp-price-tax-s-size);
}


/* mv
____________________*/
.contents--mv {
	width: 100%;
	padding: 0;
}
.contents--mv img {
	width: 100%;
	padding: 0;
}


/* logospace
____________________*/
.contents--logospace {
	padding-block: clamp(25px,0.409rem + 5.77vw,70px);
	padding-inline: var(--cts-gutter);
}
.logospace__box {
	text-align: center;
}


/* lineup
____________________*/
.contents--lineup {
	background: url(../5info/img/galleria_gigacrysta/bg_lineup.jpg) repeat-y;
	color: #fff;
	padding-block-end: clamp(100px,3.686rem + 12.82vw,200px);
}
.lineup__box {
	display: flex;
	gap: clamp(15px,0.553rem + 1.92vw,30px);
	max-width: 940px;
	align-items: flex-end;
	margin-block-start: clamp(20px,0.994rem + 1.28vw,30px);
	margin-inline: auto;
}
.lineup__box + .lineup__box {
	margin-block-start: clamp(60px,1.731rem + 3.85vw,70px);
}
.lineup__box--img-left {
	flex-direction: row-reverse;
}
.lineup__detail {
	flex-grow: 1;
	padding-block-end: 25px;
}
.lineup__number {
	padding-inline-start: clamp(12px,0.673rem + 0.38vw,15px);
	font-size: clamp(19px,1.034rem + 0.77vw,25px);
	font-family: var(--cts-font);
	font-weight: 400;
	font-style: italic;
	color: #2AC5FF;
	letter-spacing: .015em;
	line-height: 1.25;
}
.lineup__box--img-left .lineup__number {
	text-align: right;
}
.lineup__catch {
	margin-block-start: clamp(10px,0.497rem + 0.64vw,15px);
	background: #fff;
	transform: skewX(-25deg);
}
.lineup__box--img-left .lineup__catch {
	text-align: right;
}
.lineup__catch--02 {
	width: 55%;
	margin-block-start: 5px;
}
.lineup__catch-inner {
	display: inline-block;
	padding-inline: clamp(12px,0.673rem + 0.38vw,15px);
	font-size: clamp(15px,0.835rem + 0.51vw,18px);
	font-weight: 600;
	color: var(--dp-color);
	letter-spacing: .015em;
	transform: skewX(25deg);
}
.linueup__name  {
	margin-block-start: clamp(15px,0.809rem + 0.64vw,20px);
	font-size: clamp(15px,0.861rem + 0.38vw,18px);
	font-weight: 500;
}
.lineup__spec-list {
	--spec-border-w: clamp(10px,0.522rem + 0.51vw,14px);
	position: relative;
	display: flex;
	margin-block-start: 5px;
	padding-inline-start: calc(var(--spec-border-w) + .5em);
}
.lineup__spec-list::before {
	content: "";
	position: absolute;
	width: var(--spec-border-w);
	height: 2px;
	top: 50%;
	left: 0;
	background: #2AC5FF;
	transform: translateY(-50%);
}
.lineup__spec-item {
	letter-spacing: .03em;
}
.lineup__spec-item:first-child {
	margin-inline-end: .5em;
}
.lineup__spec-item:first-child::after {
	content: "/";
	margin-inline-start: .5em;
}
.lineup__spec-list--parts .lineup__spec-item:first-child::after {
	content: none;
}
.lineup__flexbox {
	margin-block-start: 15px;
	display: flex;
	align-items: flex-end;
	gap: clamp(15px,0.553rem + 1.92vw,30px);
}
.lineup__price {
	font-size: var(--dp-price-s-size);
	font-weight: 600;
	letter-spacing: var(--cts-font-ls-02);
}
.lineup__tax {
	font-size: var(--dp-price-tax-s-size);
	letter-spacing: var(--cts-font-ls-02);
}
.link__bg-white {
	border: 1px solid var(--dp-color);
	background: #fff;
	color: var(--dp-color);
}
.link__bg-white.link__inner {
	margin-block-start: 0;
	margin-inline: auto;
	border: 1px solid var(--dp-color);
	background: #fff;
	color: var(--dp-color);
}
.link__bg-white.link__inner::before {
	background: #0078c4;
	opacity: .1;
}
.link__bg-white.link__inner::after {
	border-color: var(--dp-color);
}
.lineup__description-box {
	--description-padding: 80;
	max-width: 940px;
	margin-block: 25px clamp(75px,2.764rem + 9.62vw,150px);
	margin-inline: auto;
	background: #fff;
	color: var(--dp-color);
	text-align: center;
	padding-block: calc(var(--description-padding) * 1px);
}
.description__ttl {
	position: relative;
	display: inline-block;
	background: var(--dp-color);
	padding-block: 6px;
	padding-inline: 3em;
	font-size: var(--dp-price-s-size);
	color: #fff;
	letter-spacing: var(--cts-font-ls-02);
}
.description__ttl::before {
	content: "";
	position: absolute;
	width: 2px;
	height: calc(var(--description-padding) * 1px);
	top: calc(var(--description-padding) * -1px);
	left: 50%;
	background: var(--dp-color);
	transform: translateX(-50%);
}
.description__detail {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(10px,0.497rem + 0.64vw,15px);
	margin-block-start: clamp(20px,0.994rem + 1.28vw,30px);
}
.description__detail-txt {
	font-size: var(--dp-p-l-size);
	font-weight: 600;
	text-align: left;
	letter-spacing: .015em;
}
.description__detail-img-wrap {
	padding-block: 2em;
	padding-inline: 25px 40px;
	border: 2px solid var(--dp-color);
	box-shadow: 4px 4px 0px #00000029;
}
.description__detail-img-box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.25em;
}
.description__detail-img-pointer {
	position: absolute;
	top: 21.5px;
	left: 0;
	animation: boundIcon 3s cubic-bezier(.12,0,.39,0) infinite;
}
@keyframes boundIcon {
	0% {
		top: 21.5px;
	}
	5% {
		top: 27.5px;
	}
	15% {
		top: 21.5px;
	}
	100% {
		top: 21.5px;
	}
}
.description__detail-img-box figcaption {
	font-size: var(--dp-p-l-size);
	text-align: left;
	line-height: 1.3;
}
.description__txt {
	margin-block-start: clamp(20px,0.994rem + 1.28vw,30px);
	font-size: var(--dp-p-l-size);
	letter-spacing: .015em;
}
.description__note {
	margin-block-start: 10px;
	letter-spacing: .015em;
}
.description__link-box {
	display: inline-block;
	margin-block-start: 2.5em;
}


/* wallpaper
____________________*/
.contents--wallpaper {
	padding-block: clamp(50px,1.33rem + 8.97vw,120px);
	background: url(../5info/img/galleria_gigacrysta/bg_wallpaper.jpg) no-repeat;
	background-size: cover;
}
.wallpaper {
	widows: clamp(300px,100%,calc(1100px + var(--cts-gutter) * 2));
}
.wallpaper__box {
	padding-block: clamp(40px,1.731rem + 3.85vw,70px);
	background: #fff;
}
.wallpaper__lead {
	font-size: var(--dp-p-l-size);
	text-align: center;
}
.wallpaper__list {
	display: flex;
	justify-content: center;
	gap: clamp(30px,1.362rem + 2.56vw,50px);
	margin-block-start: clamp(25px,1.306rem + 1.28vw,35px);
}
.wallpaper__download-box {
	margin-block-start: clamp(15px,0.732rem + 1.03vw,23px);
	text-align: center;
}
.wallpaper__download {
	position: relative;
	display: inline-block;
	padding-block: 7px;
	padding-inline: 3em;
	background: #00A2E6;
	font-size: var(--dp-p-l-size);
	text-decoration: none;
	letter-spacing: .015em;
}
.wallpaper__download:hover {
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}
@keyframes hover-flash {
	0% {
		opacity: .3;
	}
	100% {
		opacity: .85;
	}
}
.wallpaper__download img {
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}


/* features
____________________*/
.contents--features {
	padding-block-end: clamp(100px,3.686rem + 12.82vw,200px);
}
.features__contents_subttl {
	text-align: center;
}
.features__detail {
	margin-block-start: clamp(30px,1.362rem + 2.56vw,50px);
}
.features__detail + .features__detail {
	margin-block-start: clamp(50px,1.33rem + 8.97vw,120px);
}
.features__ttl {
	font-weight: 400;
}
.features__ttl-inner {
	display: block;
	font-size: clamp(30px,1.05rem + 2.56vw,45px);
	color: #435AC0;
	letter-spacing: var(--cts-font-ls);
}
.features__ttl-inner-nobr {
	display: inline-block;
}
.features__subttl {
	font-size: var(--dp-h4-size);
	letter-spacing: var(--cts-font-ls);
	line-height: 1;
}
.features__inner {
	position: relative;
	margin-block-start: 5px;
	padding-block-end: clamp(15px,0.809rem + 0.64vw,20px);
	padding-inline-start: clamp(30px,1.362rem + 2.56vw,50px);
}
.features__inner::before {
	content: "";
	position: absolute;
	width: 2px;
	height: 100%;
	left: clamp(13px,0.633rem + 0.9vw,20px);
	background: #435AC0;
}
.features__img {
	box-shadow: 0px 3px 6px #00000029;
}
.features__txt {
	margin-block-start: clamp(15px,0.809rem + 0.64vw,20px);
	font-size: var(--dp-p-l-size);
}


/* gigacrysta
____________________*/
.contents--gigacrysta {
	padding-block-start: clamp(30px,1.362rem + 2.56vw,50px);
	background: linear-gradient(180deg, #02012F 0%, #011E60 100%);
}
.gigacrysta {
	position: relative;
	text-align: center;
}
.gigacrysta__txt {
	position: relative;
	top: -4em;
	font-size: clamp(15px,0.772rem + 0.51vw,18px);
	color: #fff;
}
.gigacrysta__link-box {
	max-width: 240px;
	margin-inline: auto;
}





/* モバイル
____________________*/
@media (max-width: 479px) {
	#s_container {
		margin: auto;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}

	.logospace__box {
		max-width: 80vw;
		margin-inline: auto;
	}
	.contents__ttl {
		max-width: 70vw;
		margin-inline: auto;
	}
	.contents__subttl {
		font-size: clamp(18px,0.946rem + 0.9vw,25px);
	}
	.contents__subttl-inner {
		padding-inline: clamp(45px,2.171rem + 3.21vw,70px);
	}
	.lineup__box {
		display: block;
	}
	.lineup__detail {
		padding-block-end: 0;
	}
	.lineup__catch {
		max-width: 80vw;
	}
	.lineup__img-box {
		max-width: 65vw;
		margin-block-start: 15px;
		margin-inline: auto;
	}
	.linueup__name {
		text-align: center;
	}
	.lineup__spec-list {
		width: fit-content;
		margin-inline: auto;
	}
	.lineup__flexbox {
		flex-direction: column;
		align-items: center;
	}
	.lineup__link-box .link__bg-white.link__inner {
		width: 65vw;
	}
	.lineup__description-box {
		--description-padding: 40;
		padding-inline: 15px;
	}
	.description__ttl {
		padding-inline: 1.5em;
	}
	.description__detail {
		display: block;
	}
	.description__detail-txt {
		text-align: center;
	}
	.description__detail-img-wrap {
		margin-block-start: 15px;
		padding-inline: clamp(25px, -7.871rem + 47.17vw, 100px) clamp(1px,-9.246rem + 46.54vw,75px);
	}
	.description__detail-img-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
	.description__detail-img-box figcaption {
		margin-block-start: 10px;
		margin-inline-start: auto;
		text-align: left;
	}
	.wallpaper__box {
		padding-inline: 15px; 
	}
	.wallpaper__list {
		flex-direction: column;
	}
	.features__ttl-inner-nobr {
		display: block;
	}
	.gigacrysta__txt {
		top: -2.5em;
	}
}


/* fade
____________________*/
.fade {
	opacity: 0;
	transform: translateY(50px);
	transition: all .5s ease;
}
.fade.fadeShow {
	transform: translateY(0);
	opacity: 1;
}
.fade--bg::after {
	opacity: 0;
	transform: translateX(-100px);
	transition: all 1.3s ease;
}
.fade--bg.fadeShow::after {
	transform: translateX(0);
	opacity: 1;
}
.fade--chart {
	transform: scale(0);
	transition: all 1s ease;
}
.fade--chart.fadeShow {
	transform: scale(1);
}