@charset "UTF-8";
/*--------------------
ローディング表示
--------------------*/
#loader{
	position: fixed;
	inset: 0;
	display: flex;
	place-items: center;
	justify-content: center;
	background: #fff;
	color: var(--black);
	z-index: 9999;
	font-family: "KoHo", sans-serif;
	transition: all .5s ease 0s;
}
#loader.is-leaving{ opacity:0; pointer-events:none; }
#loader .mark,#loader .ghost{
	letter-spacing: 0.1em;
	font-weight: normal;
	transition: all 1s ease 0s;
}
.mark{
	opacity: 0;
	transform: translateY(8px) scale(.98);
	animation: pop 1s cubic-bezier(.2, .9, .2, 1) forwards;
	font-family: "KoHo", sans-serif;
	transition: all 1s ease 0s;
}
/* グレーの続き（最初は消しておく） */
#loader .ghost .ch{
	color:#b0b3b6;
	opacity: 0;
  	white-space: pre;
	transform: translateY(0.5em);
	transition: opacity .4s ease, transform .4s ease;
	transition-delay: calc(var(--i) * var(--stagger, 0.03s));
	--stagger: 0.06s;
}
/* 表示順（NIPPON → A → CON） */
.row:nth-child(1) .mark{ animation-delay:1s }
.row:nth-child(2) .mark{ animation-delay:1.5s }
.row:nth-child(3) .mark{ animation-delay:2s }

/* 黒表示が終わったら行ごとにグレーを出す */
#loader .row.show .ghost .ch{
	opacity: 1;
	transform: translateY(0);
}
@keyframes pop{ to{opacity:1; transform:none} }

#main-contents{
	visibility: hidden;
	pointer-events: none;
}
#main-contents.show{
	visibility: visible;
	pointer-events: auto;
}
/* PC */
@media screen and (min-width:768px) {
	#loader .mark,#loader .ghost{
		font-size: 38px;
		line-height: 1.316;
	}
}
/* SP */
@media screen and (max-width:767px) {
	#loader .mark,#loader .ghost{
		font-size: 7.47vw;
		line-height: 1.25;
	}
}

/*--------------------
トップイメージ
--------------------*/
#topimg .mv{
	position: relative;
	height: auto;
}
#topimg .slick{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	margin-bottom: 0;
}
#topimg .mv .slick .slick-list,#topimg  .mv .slick .slick-track {
	height: 100%;
}
.mv .slick .slick-slide{
	position: relative;
}
/*
.mv .slick .slick-slide img{
	width: 100%;
	height:100%;
	object-fit: cover;
	display: block;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}
.mv .slick .slick-current img{
	animation: mvZoomOut 8000ms linear forwards;
}
*/
/* ベース：常に 1.08（戻りは即時） */
.mv img{
  transform: scale(1.08);
  transition: none;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
	  object-fit: cover;
  object-position: center 10%; /* ← ここ追加：上寄せ */
}

/* ズーム実行：付いた瞬間 1.08 → 1.00 へ遷移して保持 */
.mv .slick .slick-slide.zooming img{
  transform: scale(1);
  transition: transform 8200ms linear; /* ← ズーム時間(例:7s)。必要なら調整 */
}

/* 退場したスライドは 1.00 を保持（!importantは使わない） */
.mv .slick .slick-slide.was-current img{
  transform: scale(1);
  transition: none;
}


#topimg h1{
	position: absolute;
	z-index: 1;
	color: #fff;
	font-weight: 300;
}

/* PC */
@media screen and (min-width:768px) {
	#topimg .mv{
		margin: 0 60px 0;
		max-height: calc(100vh - 84px);
	}
	#topimg .slick{
		max-height: calc(100vh - 84px);
	}
	#topimg h1{
		top: 35px;
		left: 40px;
		font-size: 18px;
		letter-spacing: 0.8em;
	}
	@keyframes mvZoomOut{
		0%   { transform: scale(1.08); }
		100% { transform: scale(1.00); }
	}
}
/* SP */
@media screen and (max-width:767px) {
	#topimg .mv{
		margin: 0 4vw 0;
		height: calc(100dvh - 12vw);
	}
	#topimg .slick{
		height: calc(100dvh - 12vw);
	}
	#topimg .mv .slick .slick-slide img{
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	#topimg h1{
		top: 5.33vw;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		font-size: 3.73vw;
		letter-spacing: 0.72em;
	}
	@keyframes mvZoomOut{
		0%   { transform: scale(1.1); }
		100% { transform: scale(1.00); }
	}
}

/*--------------------
実績
--------------------*/
#works{
	position: relative;
}
#worksinner{
	overflow: hidden;
}
#works .sub-txt{
	text-align: center;
}
#works .link-btn a{
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: normal;
}
#works .link-btn a::after{
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	vertical-align: middle;
	border-top: 1px solid var(--black);
	border-right: 1px solid var(--black);
	transform: rotate(135deg);
}

/* 共通：GPU合成＆サイズ安定 */
#works .loop{
	display: inline-flex;
	align-items: stretch;
	gap: 27px;                              /* PC既定のギャップ。SPで上書き */
	will-change: transform;
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation: loop-slide var(--dur, 60s) linear infinite;
	-webkit-animation: loop-slide var(--dur, 60s) linear infinite;
	width: max-content;
}
#works .loop.des{
	animation-direction: reverse;           /* 下段は逆走 */
}
#works .loop.middle{
	/* 右流し：%丸めに強い安定版。静的 transform は付けない */
	animation-name: loop-slide-rtl;
	-webkit-animation-name: loop-slide-rtl;
	animation-direction: normal;
	-webkit-animation-direction: normal;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
}
#works .loop .item{
	position: relative;
	flex: 0 0 auto;
}
#works .loop .item a::after{
	content: "";
	width: 100%;
	height: 100%;
	background: #595757;
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all .3s ease 0s;
}
#works .loop .item img{
	display:block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#works .loop .item .txt{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	z-index: 10;
	opacity: 0;
	transition: all .3s ease 0s;
}

/* ==== キーフレーム（1回だけ定義） ==== */
@-webkit-keyframes loop-slide{
  from { -webkit-transform: translate3d(0,0,0); }
  to   { -webkit-transform: translate3d(-50.05%,0,0); }
}
@keyframes loop-slide{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50.05%,0,0); }
}
/* middle 用（右流し：-50.05% → 0%） */
@-webkit-keyframes loop-slide-rtl{
  from { -webkit-transform: translate3d(-50.05%,0,0); }
  to   { -webkit-transform: translate3d(0,0,0); }
}
@keyframes loop-slide-rtl{
  from { transform: translate3d(-50.05%,0,0); }
  to   { transform: translate3d(0,0,0); }
}

/* “ホバー停止”はPCだけ効く（モバイルはタップ停止をJSで） */
@media (hover:hover) and (pointer:fine){
	#works .loop:hover { animation-play-state: paused; -webkit-animation-play-state: paused; }
}
/* 任意停止用（IO/visibilitychange から付与できる） */
#works .loop.is-paused{ animation-play-state: paused !important; -webkit-animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce){
	#works .loop{ animation: none !important; -webkit-animation: none !important; }
}

/* PC */
@media screen and (min-width:768px) {
	#works{
		padding: 55px 0 132px;
	}
	#works .sub-txt{
		font-size: 14px;
		margin-bottom: 30px;
		line-height: 1;
    letter-spacing: 0.18em;
	}
	#works .link-btn a{
		top: -90px;
		width: 600px;
		height: 90px;
		font-size: 34px;
		letter-spacing: 0.06em;
	}
	#works .link-btn a span{
		transition: all .3s ease 0s;
	}
	#works .link-btn a::after{
		top: 60px;
		width: 18px;
		height: 18px;
		transition: all .3s ease 0s;
	}
	#works .link-btn a:hover span{
		padding-top: 10px;
		opacity: .8;
	}
	#works .link-btn a:hover::after{
		top: 70px;
	}
	#works .v-btn { margin-bottom: 45px; }

	#works .loop{
		gap: 27px;
		height: 318px;
	}
	#works .loop .item .image{
		height: 318px;
		width: auto;
		max-width: 450px; 
	}
	#works .loop .item .txt{
		font-size: 16px;
	}
	#works .loop .item .txt::after {
		top: 60px;
		width: 18px;
		height: 18px;
	}
	#works .loop .item a:hover::after{ opacity: 1; }
	#works .loop .item a:hover .txt{ opacity: 1; }
	#works .loop .item a:hover .txt::after {
		position: absolute;
		content: '';
		left: 0;
		right: 0;
		bottom: -15px;
		margin: auto;
		vertical-align: middle;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: rotate(135deg);
	}
	#works .loop.asc{ margin-bottom: 27px; }
}
/* SP */
@media screen and (max-width:767px) {
	#works{
		padding: 8vw 4vw 12vw;
	}
	#works .link-btn a{
		top:-12vw;
		width: 60vw;
		height: 12vw;
		font-size: 4.53vw;
		letter-spacing: 0.06em;
	}
	#works .link-btn a span{
		transition: all .3s ease 0s;
	}
	#works .link-btn a::after{
		top: 6.67vw;
		width: 2.4vw;
		height: 2.4vw;
	}
	#works .sub-txt{
		font-size: 3.73vw;
		margin-bottom: 8vw;
		line-height: 1.75;
		letter-spacing: 0.18em;
	}
	#works .v-btn { margin-bottom: 8vw; }
	#works .v-btn a{ width: 57.33vw; }

	/* SPのループ：inline-flex維持＋箱幅固定でブレ防止 */
	#works .loop{
		gap: 4vw;
		display: inline-flex;
		flex-wrap: nowrap;
		width: max-content;
	}
	#works .loop .item .image{
		height: 57.33vw;
		width: 66.67vw;                        /* ← 等幅（max-widthでなく固定） */
	}
	#works .loop .item .txt{
		font-size: 3.73vw;
		padding: 0 2.13vw;
	}
	#works .loop.asc,#works .loop.middle{ margin-bottom: 4vw; }
	#works .loop.row{ flex-direction: row-reverse; }
	#works .loop .item.is-pressed a:after{ opacity: 1; }
	#works .loop .item.is-pressed .txt{ opacity: 1; }

}

/*--------------------
ビジネス
--------------------*/
#business{
	background: #2A2C31;
}
#business .text-wrap {
	color: #fff;
}
#business .text-wrap .en,
#business .text-wrap .sub-txt {
	line-height: 1;
}
#business .text-wrap .v-btn a {
	border: 1px solid #fff; color: #fff;
}

/* サークル部分 */
#business .box-wrap{ height: auto; }
/* === バブル共通 === */
:root{
  --stripe-w-pc: 8px;      /* PCのストライプ太さ */
  --stripe-w-sp: 1.6vw;    /* SPのストライプ太さ（既存値に合わせた） */
  --stripe-speed: 1s;     /* アニメ速度（既存と同じ） */
}
#business .box{ position: relative; }
#business .box a{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	border-radius:50%;
	color:#fff;
	overflow:hidden;
	border-radius:50%;
	background:linear-gradient(-135deg, rgba(102,100,100,1), rgba(62,58,57,1));
}
#business .box a::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;

  /* 水平ストライプの小タイル（上半分だけ塗り） */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Crect x='0' y='0' width='2' height='1' fill='rgb(42,44,49)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:calc(var(--stripe-w)*2) calc(var(--stripe-w)*2);
  /* 開始値を“単位付き”で宣言（PC=px） */
  background-position-x: 0px;
  background-position-y: 0px;
  transform:rotate(-135deg);
  will-change: background-position-x, background-position-y;
  backface-visibility:hidden;
  animation: stripePos01 var(--stripe-speed) linear infinite;
}
/* 方向違いのアニメーション */
#business .box.num02 a::before{
  transform:rotate(135deg);
  animation-name: stripePos02;
}
#business .box.num03 a::before{
  transform:rotate(135deg);
  animation-name: stripePos03;
}
@keyframes stripePos01{
  from { background-position-x: 0px; background-position-y: 0px; }
  to   { background-position-x: calc(var(--stripe-w) *  2);
         background-position-y: calc(var(--stripe-w) * -2); }
}
@keyframes stripePos02{
  from { background-position-x: 0px; background-position-y: 0px; }
  to   { background-position-x: calc(var(--stripe-w) *  2);
         background-position-y: calc(var(--stripe-w) *  2); }
}
@keyframes stripePos03{
  from { background-position-x: 0px; background-position-y: 0px; }
  to   { background-position-x: calc(var(--stripe-w) * -2);
         background-position-y: calc(var(--stripe-w) * -2); }
}
/* box1 */
#business .box.num01{ z-index: 5; }
#business .box.num01 a{ margin: 0 auto; }
/* box2 */
#business .box.num02{ position: relative; z-index: 0; }
#business .box.num02 a{	background: linear-gradient(135deg,rgba(83, 122, 146, 1) 0%, rgba(0, 0, 1, 1) 100%);}
/* box3 */
#business .box.num03 a{	background: linear-gradient(135deg,rgba(38, 77, 50, 1) 0%, rgba(0, 0, 0, 1) 100%);}

/* テキスト */
#business .box .txt{ position: relative; z-index: 10; }
#business .box .txt .label{ letter-spacing: .06em; font-weight: 400; line-height: 1; }
#business .box .txt h3{ letter-spacing: 0.06em; font-weight: normal; line-height: 1; }
#business .box .txt .logo{  margin: 0 auto; }
#business .box .txt .logo::after {
	position: absolute;
	content: '';
	left: 0;
	right: 0;
	margin: auto;
	vertical-align: middle;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(135deg);
}

/* PC */
@media screen and (min-width:768px) {
	#business{ --stripe-w: var(--stripe-w-pc); }
	#business .inner{
		width: 1120px;
		margin: 0 auto;
		padding: 240px 0 665px;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	#business .text-wrap h2 { margin-bottom: 20px; }
	#business .text-wrap .en { font-size: 18px; margin-bottom: 65px; letter-spacing: 0.06em; }
	#business .text-wrap .sub-txt { margin-bottom: 25px; letter-spacing: 0.18em; }
	#business .text-wrap .v-btn a { margin: unset; }
	#business .text-wrap .v-btn a:hover{ background: #fff; color: var(--black); }

	/* サークル部分 */
	#business .box-wrap{
		width: 740px;
		top: 140px;
		position: absolute;
		right: 0;
	}
	/* === バブル共通 === */
	#business .box a{ width: 396px; height: 396px; }
	.box a:hover{ filter:grayscale(1) brightness(.9); }

	/* box2 */
	#business .box.num02{ position: absolute; bottom: 0; right: 0; }
	/* box3 */
	#business .box.num03{ margin-top: -100px; display: inline-block; }
	#business .box .txt { padding-top: 60px; }
	#business .box .txt .label{ font-size: 20px; margin-bottom: 17px; }
	#business .box .txt h3{ font-size: 32px; margin-bottom: 16px; }
	#business .box .txt .desc{ letter-spacing: 0.18em; height: 85px; }
	#business .box .txt .logo{ width: 155px; }
	#business .box .txt .logo::after { bottom: -25px; width: 16px; height: 16px; }
}
/* SP */
@media screen and (max-width:767px) {
	#business{ --stripe-w: var(--stripe-w-sp); }
	#business .box a::before{
		background-position-x: 0vw;
		background-position-y: 0vw;
	}
	#business .inner{ padding: 12vw 0 25.33vw; }
	#business .text-wrap{ margin-bottom: 8vw; }
	#business .text-wrap h2 { margin-bottom: 2.67vw; }
	#business .text-wrap .en { font-size: 4vw; margin-bottom: 9.33vw; text-align: center; letter-spacing: 0.06em; }
	#business .text-wrap .sub-txt { margin-bottom: 8vw; letter-spacing: 0.18em; line-height: 1.643; text-align: center; }

	/* サークル部分 */
	#business .box-wrap{ padding: 0 6.67vw; }
	/* === バブル共通 === */
	#business .box a{ width: 79.33vw; height: 79.33vw; }
	/* box2 */
	#business .box.num02{ margin-top: -8.27vw; z-index: 4; }
	/* box3 */
	#business .box.num03{ margin-top: -8.27vw; }
	#business .box .txt { padding-top: 5.33vw; }
	#business .box .txt .label{ font-size: 4.8vw; margin-bottom: 2.67vw; }
	#business .box .txt h3{ font-size: 7.47vw; margin-bottom: 4vw; }
	#business .box .txt .desc{ letter-spacing: 0.18em; height: 15.47vw; font-size: 3.2vw; }
	#business .box .txt .logo{ width: 30.93vw; }
	#business .box .txt .logo::after { bottom: -6.67vw; width: 3.73vw; height: 3.73vw; }
}

/*--------------------
オフィス / メンバー
--------------------*/
#office .text-area,
#member .text-area{
	text-align: center;
}
#office .text-area .sub-txt,
#member .text-area .sub-txt {
	letter-spacing: 0.18em;
	line-height: 1.857;
}
#office .image.main img,
#member .image.main img {
	object-fit: cover;
	object-position: center;
}

/* PC */
@media screen and (min-width:768px) {
	#member{ margin-bottom: 120px; }
	#office .inner,
	#member .inner {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
	}
	#office .text-area,
	#member .text-area {
		width: 510px;
		margin: 0 0 0 auto;
		padding: 100px 80px;
	}
	#office .text-area h2,
	#member .text-area h2 { margin-bottom: 30px; }
	#office .text-area .sub-txt,
	#member .text-area .sub-txt { margin-bottom: 45px; }
	#office .text-area .image.sub,
	#member .text-area .image.sub { margin-bottom: 50px; }
	#office .image.main,
	#member .image.main {
		margin: -90px 0 0 calc(50% - 50vw);
		flex: 1;
		height: 750px;
	}

	/* メンバー調整 */
	#member .text-area{ padding: 140px 80px 139px; }
	#member .image.main { margin: -85px calc(50% - 49vw) 0 0 ; }
}
@media screen and (max-width:1215px) {
	#office .image.main { width: 698px; margin: -90px 0 0 0; }
	#member .image.main { width: 698px; margin: -90px 0 0 0; }
}
/* SP */
@media screen and (max-width:767px) {
	#office{ margin-bottom: 10.67vw; }
	#member{ margin-bottom: 11.47vw; }
	#office .text-area,
	#member .text-area{ display:flex; flex-direction:column; }
	#office .text-area h2,
	#member .text-area h2 { margin-bottom: 4vw; order: 2; }
	#office .text-area .sub-txt,
	#member .text-area .sub-txt { margin-bottom: 5.33vw; order: 3; }
	#office .text-area .image.sub,
	#member .text-area .image.sub {
		margin-bottom: 6.67vw;
		width: 68.93vw;
		height: auto;
		order: 1;
	}
	#office .v-btn,#member .v-btn{ order: 4; }
	#office .image.main,
	#member .image.main{
		margin: -9.6vw 0 1.6vw -4vw;
		height: 60vw;
		width: 84vw;
		overflow: hidden;
	}
	#office .image.main img{
    object-position: center top;
    transform: scale(1.2);
    transform-origin: center top;
	}
	/* メンバー調整 */
	#member .inner{ display: flex; flex-direction: column-reverse; }
	#member .image.main { margin: 0 -4vw 1.6vw auto; }
}

/*--------------------
リクルート
--------------------*/
#recruit h2 { text-align: center; }
#recruit .sub-txt { letter-spacing: 0.2em; text-align: center; line-height: 1; }
#recruit .btn-wrap { display: flex; justify-content: center; }
#recruit .btn-wrap .btn a {
	letter-spacing: 0.28em;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
/* PC */
@media screen and (min-width:768px) {
	#recruit {
		background: url(../img/index/recruit_bg.jpg) no-repeat center;
		background-size: cover;
	}
	#recruit .inner {
		padding: 110px 0 70px;
		width: 1200px;
		margin: 0 auto;
	}
	#recruit h2 { margin-bottom: 30px; }
	#recruit .sub{ display: none; }
	#recruit .sub-txt { margin-bottom: 38px; }
	#recruit .v-btn { margin-bottom: 75px; }
	#recruit .btn-wrap .btn { margin: 0 40px; }
	#recruit .btn-wrap .btn a {
		width: 300px;
		height: 45px;
		font-size: 16px;
		letter-spacing: 0.28em;
	}
	#recruit .btn-wrap .btn a:hover{ background: #fff; }
	#recruit .btn-wrap .btn.new { background: var(--red); }
	#recruit .btn-wrap .btn.new a:hover{ border: 1px solid var(--red); color: var(--red); }
	#recruit .btn-wrap .btn.career { background: var(--black); }
	#recruit .btn-wrap .btn.career a:hover{ border: 1px solid var(--black); color: var(--black); }
}
/* SP */
@media screen and (max-width:767px) {
	#recruit .inner { margin: 0 auto; }
	#recruit .ttl-wrap {
		background: url(../img/index/sp_recruit_bg.jpg) no-repeat;
		background-size: cover;
		padding: 28.67vw 0 23.33vw;
		margin-bottom: 6.67vw;
	}
	#recruit h2 { margin-bottom: 1.6vw; }
	#recruit .ttl-wrap .sub{ font-size: 3.43vw; text-align: center; letter-spacing: 0.18em; }
	#recruit .sub-txt { margin-bottom: 5.33vw; font-size: 3.73vw; line-height: 1.643; }
	#recruit .v-btn { margin-bottom: 9.33vw; }
	#recruit .btn-wrap{ margin: 0 5.33vw; justify-content: space-between; }
	#recruit .btn-wrap .btn a {
		width: 41.33vw;
		height: 18.67vw;
		font-size: 3.73vw;
	}
	#recruit .btn-wrap .btn.new { background: var(--red); }
	#recruit .btn-wrap .btn.career { background: var(--black); }
}

/*--------------------

--------------------*/
/* PC */
@media screen and (min-width:768px) {}
/* SP */
@media screen and (max-width:767px) {}