@charset "UTF-8";
@import url("common.css?v=1.3");

/*----------------------------------------------------
Loading
----------------------------------------------------*/
.loading {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
}
.loading_logo {
	width: 24rem;
	opacity: 0;
	transform: scale(0.95);
}
.loading_logo img {
	display: block;
	width: 100%;
	height: auto;
}
.loading_logo.is-show {
	opacity: 1;
	transform: scale(1);
	transition:
		opacity 0.8s ease,
		transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.loading.is-hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.8s ease,
		visibility 0s linear 0.8s;
}
/*----------------------------------------------------
Progress
----------------------------------------------------*/
.scroll_progress {
	position: fixed;
	top: 65%;
	right: 6%;
	width: 1px;
	height: 180px;
	transform: translateY(-50%);
	z-index: 100;
}
.scroll_progress_line {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background: #373737;
	transition: background 0.3s ease;
}
.scroll_progress_dot {
	position: absolute;
	top: 0;
	left: 50%;
	width: 6px;
	height: 9px;
	border-radius: 100vh;
	background: #373737;
	transform: translate(-50%, 0);
	transition:
		transform 0.1s linear,
		background 0.3s ease;
}
.scroll_progress.is-white .scroll_progress_line {
	background: #fff;
}
.scroll_progress.is-white .scroll_progress_dot {
	background: #fff;
}

@media screen and (max-width: 640px) {
	.scroll_progress {
		top: 75%;
		right: 4%;
	}
}

/*----------------------------------------------------
Header
----------------------------------------------------*/
.header {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 10;
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0s;
}
.header.is-hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.6s;
}
.header .cont_w {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 90%;
	max-width: 1000px;
	padding-top: 3rem;
}
.head_nav {
	display: flex;
	flex-wrap: wrap;
	width: 180px;
	gap: 5%;
}
.head_nav li {
	width: 45%;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	margin-bottom: 1rem;
}
.head_nav li:nth-child(1) {
	order: 1;	
}
.head_nav li:nth-child(2) {
	order: 3;	
}
.head_nav li:nth-child(3) {
	order: 5;	
}
.head_nav li:nth-child(4) {
	order: 2;	
}
.head_nav li:nth-child(5) {
	order: 4;	
}
.head_nav a {
	padding-bottom: 2px;
	background-image: linear-gradient(#373737, #373737);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: 0 1px;
	transition: background-size 0.3s;
}
.head_nav a:hover {
  background-position: bottom left;
  background-size: 100% 1px;
}

.head_logo {
	width: 64px;
}
.sub_header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 3rem 0;
	z-index: 9;
	display: flex;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity 0.4s ease;
}

.sub_header.is-show {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.sub_header :is(h1, .site-logo) {
	text-align: center;
	width: 300px;
}
.sub_header img {
	width: 100%;
}

@media screen and (max-width: 640px) {
	.header .cont_w {
		padding-top: 1.5rem;
	}
}
@media screen and (max-width: 480px) {
	.sub_header {
		padding: 2rem 0;	
	}
	.sub_header :is(h1, .site-logo) {
		width: 200px;
	}
}

/*----------------------------------------------------
MV
----------------------------------------------------*/
body.loading-active .mv * {
	animation: none !important;
}
.mv {
	position: relative;
	margin-top: 38rem;
	margin-bottom: 8rem;
	z-index: 20;
	pointer-events: none;
}
.mv_catch {
	display: flex;
	justify-content: flex-start;
	position: fixed;
	width: 100%;
	margin-top: calc(-7rem - 58px);
	z-index: 1;
}
.mv_catch.clear {
    position: absolute;
    margin-top: 0;
}

.mv_catch h2 {
	overflow: hidden;
	width: 0%;
	animation: mv-catch 1.5s 0.4s ease-in-out forwards;
}
.mv_catch_svg {
	position: relative;
}
.mv_catch_svg img {
	width: 396px;
}
.catch-normal {
	position: relative;
	z-index: 1;
}
.catch-white {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	clip-path: inset(0 100% 0 0);
}
.mv_catch.is-white .catch-white {
	opacity: 1;
}
.mv_catch.is-white .catch-normal {
	opacity: 0;
}
@keyframes mv-catch {
	0% {
		width: 0%;
	}
	50% {
		width: 50%;
	}
	100% {
		width: 100%;
	}
}

.mv_container {
    position: sticky;
    top: 16rem;
    width: 100%;
    aspect-ratio: 1.6 / 1;
	z-index: 0;
	pointer-events: auto;
}
.mv_container.is-end {
    position: relative;
}
.slider_area {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
	border-radius: 10rem;
	background: #efefef;
}
.slider_item {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    animation: sliderAnime 24s linear infinite 0s;
}
.slider_item:nth-child(2) {
    animation-delay: 8s;
}
.slider_item:nth-child(3) {
    animation-delay: 16s;
}
.slider_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mv_overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 74, 123, 0.4);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 0.5s;
}
.mv_overlay.is-show {
	opacity: 1;
}
@keyframes sliderAnime {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        animation-timing-function: ease-out;
    }
    20% {
        opacity: 1;
        transform: scale(1.1);
    }
    40%,
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}
.mv_lead {
	position: relative;
	z-index: 1;
	padding-bottom: 20rem;
}
.mv_lead_svg {
	position: relative;
	width: 320px;
	max-width: 100%;
}
.mv_lead_svg img {
	display: block;
	width: 100%;
	height: auto;
}
.lead-black {
	position: relative;
	z-index: 1;
}
.lead-white {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	filter: brightness(0) invert(1);
	pointer-events: none;
	clip-path: inset(0 100% 0 0);
}

@media screen and (max-width: 1200px) {
	.mv_container {
		aspect-ratio: 1.3 / 1;
	}
}
@media screen and (max-width: 1000px) {
	.mv_container {
		aspect-ratio: 1.1 / 1;
	}
}
@media screen and (max-width: 800px) {
	.mv_container {
		aspect-ratio: 1 / 1.1;
	}
	.slider_area {
		border-radius: 7rem;
	}
}
@media screen and (max-width: 640px) {
	.mv {
		margin-top: 32rem;
	}
	.mv_catch_svg img {
		width: 360px;
	}
	.mv_container {
		aspect-ratio: 1 / 1.3;
	    top: 12rem;
	}
}
@media screen and (max-width: 480px) {
	.mv {
		margin-bottom: 8rem;
	}
	.head_logo {
		width: 56px;
	}
	.mv_catch_svg img {
		width: 280px;
	}
	.mv_container {
		aspect-ratio: 1 / 1.6;
	}
	.slider_area {
		border-radius: 4rem;
	}
	.mv_lead_svg {
		width: 230px;
	}

}

/*----------------------------------------------------
News
----------------------------------------------------*/
.news {
	margin-bottom: 10rem;
}

.news_wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.news_wrap ul {
	order: 2;
	width: calc(100% - 150px);
}
.news_wrap ul li {
	border-bottom: dotted 1px #373737;
}
.news_wrap ul li a {
	padding: 2rem 0;
	display: flex;
	align-items: flex-start;
	letter-spacing: 0.1em;
}
.news_wrap ul li a span {
	font-size: 1.2rem;
	line-height: 1.4;
	width: 90px;
	display: inline-block;
	margin-right: 1.5rem;
	font-weight: 300;
}
.news_wrap ul li a p {
	width: calc(100% - 90px);
	font-size: 1.4rem;
	line-height: 1.4;
	transform: translateY(-2px);
	position: relative;
	padding-right: 3.2rem;
	box-sizing: border-box;
	color: transparent;
	background: linear-gradient(to right, #888 50%, #373737 50%) 100%;
	background-clip: text;
	background-size: 200% 100%;
}
.news_wrap ul li a:hover p {
	background-position: 0 100%;
	transition: background-position 1s;
}
.news_wrap ul li a p::after {
	content: url("../img/arrow.svg");
	position: absolute;
	width: 12px;
	top: calc(50% - 8px);
	right: 1.5rem;
	transition : all 500ms;
}
.news_wrap ul li a:hover p::after {
	right: 1rem;	
}

.news_wrap div {
	order: 1;
	width: 100px;
}
@media screen and (max-width: 640px) {
	.news_wrap {
		display: block;
	}
	.news_wrap ul, .news_wrap div {
		width: 100%;
	}
	.news_wrap ul {
		margin-bottom: 3rem;
	}
	.news_wrap ul li a {
		padding: 1.5rem 0;	
	}
	.news_wrap div {
		text-align: center;
	}
}
@media screen and (max-width: 480px) {
	.news {
		margin-bottom: 5rem;
	}
	.news_wrap ul li a span {
		width: 80px;
	}
}

/*----------------------------------------------------
IV
----------------------------------------------------*/
.iv {
	width: 100%;
	aspect-ratio: 2.4 / 1;
	position: relative;
	margin-bottom: 10rem;
}
.iv01,
.iv02,
.iv03 {
	position: absolute;
	overflow: hidden;
	border-radius: 2.6rem;
}
.iv01 {
	width: 34.6%;
	left: 0;
	top: 15%;
	aspect-ratio: 2.2 / 1;
}

.iv02 {
	width: 19.5%;
	left: 41.6%;
	bottom: 0;
	aspect-ratio: 1 / 1.58;
}

.iv03 {
	width: 28%;
	top: 0;
	right: 0;
	aspect-ratio: 1 / 1;
}
.iv01 img,
.iv02 img,
.iv03 img {
	width: 100%;
	height: 115%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: -10%;
}
.iv_circle {
	position: absolute;
	width: 9%;
	top: 17.5%;
	left: 55.5%;
	animation: rotation 15s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 480px) {
	.iv {
		aspect-ratio: 1 / 1.26;
		margin-bottom: 8rem;
	}
	.iv01,
	.iv02,
	.iv03 {
		border-radius: 1.6rem;
	}
	.iv01 {
		width: 70%;
		left: 24%;
		top: 0;
	}
	.iv02 {
		width: 40.8%;
		top: 38.5%;
		left: 0;
		bottom: inherit;
	}
	.iv03 {
		width: 49.3%;
		top: inherit;
		right: 0;
		bottom:0
	}
	.iv_circle {
		width: 23%;
		top: 30.4%;
		left: 26.6%;
	}
	
}


/*----------------------------------------------------
Sub link
----------------------------------------------------*/
.sub_link {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10rem;
}
.sub_link div {
	width: 44.5%;
	text-align: right;
}
.sub_link div b {
	font-size: 2rem;
	font-weight: 500;
	display: block;
	text-align: left;
	margin-bottom: 4rem;
}
.sub_link div img {
	width: 100%;
	border-radius: 2.6rem;
	margin-bottom: 3rem;
}
.sub_link div p {
	font-size: 1.4rem;
	line-height: 1.8;
	text-align: justify;
	margin-bottom: 4rem;
}

@media screen and (max-width: 1000px) {
	.sub_link div b {
		font-size: 2.2vw;
		margin-bottom: 3rem;
	}
}
@media screen and (max-width: 640px) {
	.sub_link div b {
		font-size: 1.8rem;
	}
	.sub_link div b br.pc_none {
		display: block;
	}
}
@media screen and (max-width: 480px) {
	.sub_link {
		display: block;
	}
	.sub_link.cont {
		width: 85%;
	}
	.sub_link div {
		width: 100%;
		margin-bottom: 5rem;
	}
	.sub_link div b {
		margin-bottom: 2rem;
	}
	.sub_link div img {
		border-radius: 1.6rem;
		width: 90%;
		margin: 0 auto 2rem;
	}
	.sub_link div p {
		margin-bottom: 2rem;	
	}
}


/* Branded first-visit loading sequence: original wordmark only. */
body.loading-active { overflow: hidden; }
.loading {
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.loading_logo {
  width: 24rem;
  opacity: 1;
  transform: none;
}
.loading_logo.is-show {
  opacity: 1;
  transform: none;
  transition: none;
}
.loading_wordmark {
  width: 100%;
  overflow: hidden;
}
.loading_logo .loading_wordmark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(5px);
}
.loading_logo.is-show .loading_wordmark img {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  transition: opacity 0.15s ease 0.08s, transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, clip-path 0.72s steps(6, end) 0.08s;
}
.loading.is-hide {
  opacity: 1;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.68s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.68s;
}
@media (max-width: 480px) {
  .loading_logo { width: min(62vw, 230px); }
}
@media (prefers-reduced-motion: reduce) {
  .loading_logo .loading_wordmark img {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }
  .loading.is-hide {
    opacity: 0;
    transform: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
}


/* Linked Company / Business images and mobile spacing. */
.sub_link_image {
  display: block;
  overflow: hidden;
  border-radius: 2.6rem;
  margin-bottom: 3rem;
}
.sub_link div .sub_link_image img {
  margin-bottom: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.sub_link_image:hover img {
  transform: scale(1.025);
  opacity: 0.92;
}
.sub_link_image:focus-visible {
  outline: 2px solid #004a7b;
  outline-offset: 4px;
}
@media (max-width: 480px) {
  .news { margin-bottom: 8rem; }
  .sub_link_image {
    width: 90%;
    margin: 0 auto 2rem;
    border-radius: 1.6rem;
  }
  .sub_link div .sub_link_image img {
    width: 100%;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sub_link div .sub_link_image img { transition: opacity 0.2s ease; }
  .sub_link_image:hover img { transform: none; }
}

/* MV catch reveal width matches the artwork */
.mv_catch h2 {
    --mv-catch-reveal-width: 396px;
}
@keyframes mv-catch {
    0% { width: 0; }
    100% { width: var(--mv-catch-reveal-width); }
}
@media screen and (max-width: 640px) {
    .mv_catch h2 { --mv-catch-reveal-width: 360px; }
}
@media screen and (max-width: 480px) {
    .mv_catch h2 { --mv-catch-reveal-width: 280px; }
}