@charset "utf-8";

/* common */
.contentContainer img {
	vertical-align: top;
}

.fontNotoSansJp, .contentContainer {font-family: 'Noto Sans Japanese';}
.fontJinsNextLight {font-family: jins_next_ttlight;}
.fontJinsNextRegular {font-family: jins_next_ttregular;}
.fontJinsNextMedium {font-family: jins_next_ttmedium;}
.fontJinsNextBold {font-family: jins_next_ttbold;}

/* content */

/* reset css */
.main_wrap {
	width: 100%;
	margin: 0 auto;
	background: white;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500;
	line-height: 1.8;
	color: #000000;
	font-size: 16px;
	overflow: hidden;
	/* background: url(../img/bg_kv.png)no-repeat top -85px center / 1650px; */
}
/* @media screen and (max-width: 1440px) {
	.main_wrap {
		background: url(../img/bg_kv.png)no-repeat top -4vw center / 115%;
	}
} */
.main_wrap * {
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin-block-start: 0;
	margin-block-end: 0;
}
.main_wrap nav ul, .main_wrap nav, .main_wrap ul, .main_wrap li {
    list-style:none;
	padding-inline-start: 0;
	margin-block-start: 0;
    margin-block-end: 0;
	line-height: 1.8;
}
.main_wrap p {
	line-height: 1.8;
}
.main_wrap button {
    padding-block: 0;
    padding-inline: 0;
    border-width: 0;
}
.main_wrap sup {
	font-size: 50%;
    vertical-align: super;
}
.main_wrap a {
	opacity: 1;
	transition: 0.3s;
	text-decoration: none;
}
.main_wrap a:hover {
	opacity: 0.6;
	cursor: pointer;
}
.main_wrap img {
	display: block;
	width: 100%;
}

/* original common */
:root {
  --bold: 700;
  --semibold: 600;
  --medium: 500;
  --regular: 400;
  --light: 300;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
.h1_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.max_w {
	width: calc(100% - 250px);
	max-width: 1000px;
	margin: 0 auto;
}

/* fadein */
.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition: all 1s ease;
}
.fadein.show {
	opacity: 1;
	transform: translateY(0);
}

#quality-section, #uv-section, #optical-section, #physical-section, #ar-section {
	padding-top: 100px;
	margin-top: -100px;
}

/* kv */
.kv {
	width: 100%;
	padding: 90px 0 0;
}
.kv h2 {
	width: calc(100% - 230px);
	max-width: 1030px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	margin: 0 auto 30px;
	font-size: 55px;
	font-weight: bold;
	letter-spacing: -11%;
	line-height: 1.6;
}
.kv h2 span {
	width: 100%;
	display: inline-block;
}
.reveal {
    mask-image: radial-gradient(circle, black 0%, rgba(0,0,0,0.05) 60%);
	mask-repeat: repeat;
  	mask-position: left center;
	mask-size: 100%;
    animation: open 2.4s forwards;
}
@keyframes open {
  0% { mask-size: 50%;}
  5% { mask-size: 50%;}
  50% { mask-size: 130%;}
  100% { mask-size: 200%;}
}

.kv .kv_lead {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 50px;
	font-size: 20px;
	font-weight: var(--semibold);
}
.kv .kv_lead.mb {
	margin-bottom: 1.8rem;
}
.kv .max_w {
	position: relative;
}
.kv .scroll_rel {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.kv .scroll_down {
	position: absolute;
	right: 0;
	top: 0;
	height: 250px;
	writing-mode: vertical-rl;
	font-family: jins_next_ttregular;
	font-size: 14px;
	text-align: right;
	transform: rotate(180deg);
}
.kv .scroll_down p {
	position: relative;
	padding-left: 3px;
	border-left: 2px solid rgba(0, 0, 0, 0.2);
	animation: wiggle 2s ease-in-out infinite;
}
@keyframes wiggle {
	0%   { transform: translateY(0); }
	15%  { transform: translateY(-5px); }
	30%  { transform: translateY(0); }
}
.kv .scroll_down p::after {
	content: "";
	position: absolute;
	top: 0;
	left: -2px;
	width: 2px;
	padding-top: 12%;
	background: black;
	animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
	0% {
		top: 85%;
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		top: 0;
		opacity: 0;
	}
}

/* anchor link */
ul.anc_links {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 120px;
}
ul.anc_links li {
	position: relative;
	border-bottom: 1px solid #000000;
}
ul.anc_links li::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 24px;
	width: 32px;
	padding-top: 32px;
	background: url(../img/icon_arrow_down.png)no-repeat center / contain;
	transition: 0.2s;
	pointer-events: none;
}
ul.anc_links li:hover:after {
	top: 55%;
}
ul.anc_links li:first-of-type {
	border-top: 1px solid #000000;
}
ul.anc_links li a {
	width: 100%;
	display: block;
	padding: 30px 0;
}
ul.anc_links li a span {
	display: inline-flex;
	align-items: center;
	font-family: jins_next_ttregular;
	vertical-align: middle;
	width: 10%;
	font-size: 12px;
}
@media screen and (max-width: 1440px) {
	.kv h2 {
		font-size: 3.9vw;
		/* margin-bottom: 6%; */
	}
	.kv .scroll_down {
		right: 30px;
	}
}

/* point */
.point {
	width: 100%;
	position: relative;
	margin-bottom: 120px;
}
.abs_ttl {
	position: absolute;
	font-family: jins_next_ttregular;
	font-size: 120px;
	writing-mode: vertical-rl;
}
.abs_ttl span {
	display: inline-block;
}
.abs_ttl._top {
	top: -20px;
	left: calc(50% - 796px);
}
.point h2 {
	font-weight: bold;
	font-size: 32px;
}
.point h2 span {
	font-family: jins_next_ttregular;
	font-size: 12px;
}
.point h3 {
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 10px;
}
.sub_txt {
	font-weight: var(--regular);
}
.point .sub_txt._01 {
	margin-bottom: 55px;
}
ul.point_list_txt {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 120px;
}
ul.point_list_txt li {
	display: flex;
	width: 32%;
	aspect-ratio: 320 / 388;
	background: #F8F8F8;
	padding: 80px 20px 20px;
}
ul.point_list_txt li > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	width: 100%;
}
ul.point_list_txt h4 {
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 9.7%;
}
.point_list_txt ._img {
	max-width: 72px;
	margin: 0 auto 9.7%;
}
.point_list_txt ._txt {
	width: 100%;
	font-size: 14px;
}
.point .sub_txt._02 {
	margin-bottom: 32px;
}
.point .sub_txt._03 {
	margin-bottom: 32px;
}
.point ._002 .sub_txt._03 {
	margin-bottom: 120px;
}
.point_02_img {
	width: 51.7%;
	margin-bottom: 120px;
}
.point_03_img {
	width: 80%;
	margin-bottom: 120px;
	border-radius: min(10px, 2.5vw);
	overflow: hidden;
}
.point_table {
	width: 100%;
	border-radius: 12px;
	border: 1px solid #cccccc;
	border-spacing: 0;
	margin-bottom: 40px;
}
.point_table th {
	font-size: 16px;
	font-weight: bold;
	text-align: left;
}
.point_table td {
	font-size: 14px;
	font-weight: var(--regular);
}
.point_table th, .point_table td {
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	padding: 20px;
}
._003 .point_table th, ._003 .point_table td {
	width: calc(100% / 4);
}
.point_table tr:last-of-type th, .point_table tr:last-of-type td {
	border-bottom: none;
}
.point_table tr th:last-of-type, .point_table tr td:last-of-type {
	border-right: none;
}
.point_table tr th:first-of-type {
	padding-left: 30px;
	border-right: 1px solid #cccccc;
}
.point_04_img {
	width: 51.7%;
	margin-bottom: 120px;
}
._005 .point_table {
	margin-bottom: 40px;
}
._005 .point_table tr, ._005 .point_table td {
	width: calc(100% / 3);
}
._movie {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
}
.abs_ttl._bottom {
	bottom: 0px;
	right: calc(50% - 767px);
}
@media screen and (max-width: 1440px) {
	.abs_ttl._top {
		left: -76px;
	}
	.abs_ttl._bottom {
		right: -48px;
	}
}
@media screen and (max-width: 1280px) {
	.point_list_txt ._img {
		width: 20%;
		max-width: none;
		margin-bottom: min(2%, 28px);
	}
	ul.point_list_txt h4 {
		margin-bottom: min(2%, 28px);
	}
	ul.point_list_txt {
		flex-wrap: wrap;
		row-gap: 20px;
	}
	ul.point_list_txt li {
		width: 49%;
		padding: 5%;
		aspect-ratio: auto;
	}
}

/* service */
.service {
	width: 100%;
	margin-bottom: 120px;
}
.service h2 {
	font-family: jins_next_ttregular;
	font-size: 120px;
	line-height: 1;
}
.service h3 {
	font-size: 32px;
	font-weight: bold;
}
.service .sub_txt {
	margin-bottom: 34px;
}
.service ul.point_list_txt {
	margin-bottom: 0;
}
.service ul.point_list_txt li {
	width: 24.2%;
	aspect-ratio: 240 / 365;
	padding: 35px 30px 30px;
}
.br1080 {
	display: none;
}
@media screen and (max-width: 1280px) {
	.service .point_list_txt ._img {
		width: 30%;
	}
	.service ul.point_list_txt {
		flex-wrap: wrap;
		row-gap: 20px;
	}
	.service ul.point_list_txt li {
		width: 49%;
		padding: 5%;
	}
	.service ul.point_list_txt li._short {
		aspect-ratio: auto;
	}
	.service ul.point_list_txt li._long {
		aspect-ratio: auto;
	}
}
@media screen and (max-width: 1230px) {
	.br1080 {
		display: block;
	}
}

/* everything_is_here */
.everything_is_here {
	width: 100%;
	background: #000000;
	color: #ffffff;
	text-align: center;
	padding: 40px 0 60px;
}
.everything_is_here h2 {
	font-family: jins_next_ttregular;
	font-size: 28px;
}
.everything_is_here ._txt {
	font-size: 14px;
	margin-bottom: 40px;
}
.everything_is_here ._img {
	display: block;
	width: 43.6%;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	/* original common */
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.max_w {
		width: 90%;
		max-width: none;
	}
	.main_wrap {
		font-size: 3.5vw;
		/* background: url(../img/s_bg_kv.png) no-repeat top -20vw center / 100%; */
	}
	#quality-section, #uv-section, #optical-section, #physical-section, #ar-section {
		padding-top: 50px;
		margin-top: -50px;
	}

	/* kv */
	.kv {
		padding: 19% 0 0;
    }
	.kv h2 {
		width: 90%;
		font-size: 9vw;
		margin-bottom: 5%;
		line-height: 1.3;
	}
	.kv .max_w {
		/* padding-bottom: 20%; */
		width: 100%;
	}
	.kv .kv_lead {
		font-size: 3.5vw;
		width: 90%;
		padding-bottom: 10%;
	}
	.kv .scroll_down {
		top: -40vw;
		right: 5vw;
		height: 32vw;
		padding-top: 5px;
		font-size: 2.5vw;
		padding-left: 0;
	}

	/* anchor link */
	ul.anc_links {
		padding-bottom: 20%;
	}
	ul.anc_links li::after {
		right: 0;
		width: 5%;
		padding-top: 5%;
	}
	ul.anc_links li:hover:after {
		top: 50%;
	}
	ul.anc_links li a {
		padding: 5% 0;
	}
	ul.anc_links li a span {
		width: 12.5%;
		font-size: 3vw;
	}

	/* point */
	.point {
		margin-bottom: 19%;
	}
	.abs_ttl {
		font-size: 15vw;
		position: unset;
		writing-mode: unset;
		line-height: 1;
	}
	.point h2 {
		font-size: 6vw;
	}
	.point h3 {
		width: 90%;
		margin: 0 auto 2%;
		font-size: 4vw;
	}
	ul.point_list_txt h4 {
		font-size: 3.5vw;
	}
	.point .sub_txt._01 {
		margin-bottom: 12%;
	}
	ul.point_list_txt {
		margin-bottom: 15%;
	}
	ul.point_list_txt li {
		width: 48%;
		aspect-ratio: 167 / 239;
		padding: 5.7%;
	}
	.point_list_txt ._txt {
		font-size: 2.8vw;
	}
	.point_list_txt ._img {
		width: 43%;
		max-width: none;
		margin: 0 auto 7%;
	}
	ul.point_list_txt h4 {
		font-size: 3.5vw;
		margin-bottom: 5%;
	}
	.point_02_img {
		width: 100%;
		margin-bottom: 15%;
	}
	._003.max_w {
		width: 100%;
	}
	.point .sub_txt._03 {
		margin-bottom: 15%;
	}
	.point ._003 h2, ._003 .sub_txt, .point_03_img {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	.point_03_img {
		border-radius: 2.5vw;
		margin-bottom: 12%;
	}
	.point_table th, .point_table td {
		font-size: min(14px, 3.5vw);
	}
	.table_wrap {
		padding: 0 5% 6%;
		overflow-x: auto;
		/* overflow-scrolling: touch; */
		margin-bottom: 5%;

		-webkit-overflow-scrolling: touch; /* iOS, Safari */
		scrollbar-width: none; /* Firefox */
	}
	.table_wrap::-webkit-scrollbar {
		display: none; /* Chrome, Edge, Safari */
	}
	.table_scrollbar_rel {
		position: relative;
	}
	.custom-scrollbar-track {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		height: 4px;
		background: #F1F1F1;
		border-radius: 50vw;
		z-index: 5;
	}
	.custom-scrollbar-thumb {
		left: 0;
		position: absolute;
		height: 4px;
		width: 10px;
		background: #CCCCCC;
		border-radius: 50vw;
		cursor: grab;
		z-index: 6;
		pointer-events: auto;
	}
	.point_table {
		width: 1000px;
		margin: 0;
		padding: 0;
	}
	.point_04_img {
		width: 100%;
		margin-bottom: 15%;
	}
	._005.max_w {
		width: 100%;
	}
	.point ._005 h2, ._005 .sub_txt, ._005 ._movie {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	._005 .point_table {
		width: 750px;
		margin-bottom: 0;
	}
	.abs_ttl._bottom {
		position: relative;
		width: 120%;
		left: -3.6%;
		line-height: 0.53;
	}

	/* service */
	.service {
		margin-bottom: 15%;
	}
	.service h2 {
		font-size: 15vw;
		margin-bottom: 5%;
	}
	.service h3 {
		line-height: 1.5;
		font-size: 6vw;
		margin-bottom: 2%;
	}
	.service .point_list_txt ._img {
		width: 60%;
	}
	.service ul.point_list_txt {
        margin-bottom: 0;
	}
	.service ul.point_list_txt li {
		width: 48%;
		padding: 5.7%;
	}
	.service ul.point_list_txt li._short {
		aspect-ratio: 167 / 260;
	}
	.service ul.point_list_txt li._long {
		aspect-ratio: 167 / 300;
	}


	/* everything is here */
	.everything_is_here {
		padding: 13.3% 0 20.5%;
	}
	.everything_is_here h2 {
		font-size: 7.3vw;
		line-height: 1;
	}
	.everything_is_here ._txt {
		font-size: 3.5vw;
		margin-bottom: 9.1%;
	}
	.everything_is_here ._img {
		width: 100%;
	}
}