@charset "UTF-8";
/* =====================================================================
   TOP ページ（index.html）専用
   ===================================================================== */

/* ---------- 0. ファーストビューの白スプラッシュ ---------- */
.splash {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: #fff;
	pointer-events: none;
	animation: splashFade .6s ease .5s forwards;
}
@keyframes splashFade {
	to { opacity: 0; visibility: hidden; }
}

/* ---------- 1. イントロ（黒 → 白ロゴ → 白地に黒ロゴ） ---------- */
.intro {
	position: relative;
	height: 100svh;
	min-height: 560px;
	background: var(--colorBeta);
	overflow: hidden;
	transition: background-color 1.5s ease;
}
.intro.isWhite { background: #fff; }
.introLogo {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	opacity: 0;
	transition: opacity 1.5s ease;
}
.introLogo img { width: 280px; height: auto; }
.introLogo .introName { height: 13px; width: auto; }
.introLogo.isVisible { opacity: 1; }
.introLogo.isDark { color: #fff; }
/* 会社名SVGは黒塗りなので、黒背景時は反転 */
.introLogo.isDark .introName { filter: invert(1); }

/* SCROLL キュー（PCのみ） */
.introScroll {
	position: absolute;
	left: 50%;
	bottom: clamp(64px, 8vw, 120px);
	width: 1px;
	height: 50px;
	background: #000;
	transform-origin: 50% 0%;
	opacity: 0;
	animation: heroScroll 2.6s infinite;
	transition: opacity .6s ease;
}
.intro.isWhite .introScroll { opacity: 1; }
@keyframes heroScroll {
	0%   { transform: scaleY(0); transform-origin: 50% 0%; }
	50%  { transform: scaleY(1); transform-origin: 50% 0%; }
	51%  { transform: scaleY(1); transform-origin: 50% 100%; }
	100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

/* ---------- 2. ヒーロースライダー ---------- */
.hero {
	position: relative;
	height: 100svh;
	min-height: 560px;
	background: var(--colorDark);
}
.hero .splide,
.hero .splide__track,
.hero .splide__list,
.hero .splide__slide { height: 100%; }
.hero .splide__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 2枚目は元サイトの位置指定（52% 66%）を踏襲 */
.hero .splide__slide:nth-child(2) img { object-position: 52% 66%; }
.hero .heroSp { display: none; }

/* ---------- 3. カバー画像（各セクション間） ---------- */
.cover {
	position: relative;
	background: var(--colorDark);
	overflow: hidden;
}
.cover img {
	width: 100%;
	height: 551px; /* 元サイトは幅に関わらず 551px 固定（SP は 1:1） */
	object-fit: cover;
	/* パララックス：少し拡大しておき、js/top.js が translateY で動かす（--coverShift） */
	transform: translate3d(0, var(--coverShift, 0px), 0) scale(1.4);
	will-change: transform;
}
.cover img.coverSp { display: none; }
.cover.coverPos80 img { object-position: 50% 80%; }

/* ---------- セクションの上下余白・見出し下の余白（元サイト実測、PC） ----------
   上：カバー画像の下端〜見出し 84px（スペーサー 20 ＋ 64） */
.section { padding: 84px 0; }
.philosophy .sectionTitle { margin-bottom: 70px; }
.news .sectionTitle, .company .sectionTitle { margin-bottom: 80px; }
.news { padding-bottom: 151px; }
.projects { padding-bottom: 77px; }
.recruit { padding: 69px 0 0; }   /* カバー下端〜見出し 69px、ボタン〜COMPANY 見出しは company 側の 84px */
.company { padding-bottom: 136px; }

/* ---------- 4. PHILOSOPHY ---------- */
.philosophy .philosophyBody {
	display: flex;
	align-items: center;
	gap: 2%;
}
.philosophy .philosophyLogo {
	flex: 0 0 49%;
	display: flex;
	justify-content: center;
}
.philosophy .philosophyLogo img { height: 92px; width: auto; }
.philosophy .philosophyLogo .logoSp { display: none; }
.philosophy .philosophyText {
	flex: 0 0 49%;
	font-size: 16px;
}
.philosophy .philosophyText p { line-height: 1.6; }
.philosophy .philosophyText p + p { margin-top: 16px; }
.philosophy .philosophyText .spText { display: none; }

/* ---------- 5. OVERVIEW ---------- */
.overview .overviewLead { margin-bottom: 60px; }

/* 開発事業／運営事業：サークル＋ステートメント本文の2カラム */
.overviewCols {
	--bubbleSize: clamp(220px, 38vw, 520px);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(24px, 5vw, 80px);
}
.overviewCol {
	flex: 0 1 var(--bubbleSize);
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.bubble {
	position: relative;
	width: var(--bubbleSize);
	height: var(--bubbleSize);
	max-width: 100%;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	text-align: center;
	background: center / cover no-repeat;
	opacity: 0;
	transform: translateY(24px) scale(.96);
	transition: transform 1.05s cubic-bezier(.2, .9, .2, 1), opacity 1.05s ease;
}
.bubble.isDev { background-image: url("../images/noise_left.jpg"); }
.bubble.isOps { background-image: url("../images/noise_right.jpg"); }
.overviewCols.isShown .bubble { opacity: 1; transform: none; }
.overviewCols.isShown .isOps { transition-delay: .15s; }
.bubbleInner {
	width: 82%;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .6s ease .7s, transform .6s ease .7s;
}
.overviewCols.isShown .bubbleInner { opacity: 1; transform: none; }
.bubbleTitle {
	font-size: clamp(16px, 1.5vw, 20px);
	font-weight: 600;
	letter-spacing: .05em;
	line-height: 1.3;
}
.bubbleTitle .en {
	display: block;
	margin-top: .35em;
	font-family: var(--fontEnCond);
	font-weight: 700;
	font-size: clamp(11px, .95vw, 13px);
	letter-spacing: .01em;
	font-stretch: condensed;
}
.bubbleList {
	margin: 1.4em 0 0;
	font-size: clamp(11px, .95vw, 13px);
	line-height: 1.75;
	letter-spacing: .02em;
}

/* STATEMENT（サークルの下に常時表示） */
.statement {
	width: 100%;
	margin-top: 48px;
}
.statementHead {
	font-weight: 300;
	font-size: clamp(18px, 1.7vw, 22px);
	letter-spacing: .12em;
	line-height: 1.6;
	margin-bottom: 1em;
}
/* 本文：PC は元サイトどおり1文＝1行（幅が足りなければ自然に折り返す）／SP は続けて表示 */
.statementBody {
	font-size: 13px;
	letter-spacing: .03em;
	line-height: 2;
}
.statementBody p { margin: 0; }
.statementBody .spText { display: none; }

/* ---------- 6. NEWS & INFO ---------- */
/* NEWS / OUR PROJECTS のグリッドは元サイトに合わせて広め（1453px 幅で約 1267px）＋ 間隔 48px */
.news .container,
.projects .container { max-width: 1328px; } /* 内側 1240px（1392px 幅で実測） */
.newsGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}
.newsItem a,
.newsItem .newsDisabled { display: block; }
.newsThumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--colorGray);
}
.newsThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.05s var(--easeOut);
}
.newsMeta {
	display: flex;
	align-items: center;
	gap: .6em;
	margin-top: .6em;
	font-size: 12px;
	line-height: 1;
}
.newsCat {
	font-family: var(--fontEn);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .04em;
	opacity: .8;
}
.newsDate {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .03em;
}
.newsItemTitle {
	margin-top: .35em;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}
.newsComing {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-family: var(--fontEn);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .02em;
}

/* hover：右下から黒い面が滑り込む（PC・マウスのみ） */
@media (hover: hover) and (pointer: fine) {
	.newsThumb::after,
	.projectThumb::after {
		content: "";
		position: absolute;
		z-index: 1;
		top: -40%; left: -40%;
		width: 180%; height: 180%;
		background: rgba(0, 0, 0, .4);
		transform: translate(100%, 100%);
		transition: transform 1.05s var(--easeOut);
		pointer-events: none;
	}
	.newsItem a:hover .newsThumb::after,
	.projectCard a:hover .projectThumb::after { transform: none; }
	.newsItem a:hover .newsThumb img,
	.projectCard a:hover .projectThumb img { transform: scale(1.03); }
}

/* ---------- 7. OUR PROJECTS ---------- */
.projectGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
}
.projectCard { text-align: center; }
.projectCard a { display: block; }
.projectThumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 14px;
}
.projectThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.05s var(--easeOut);
}
.projectTitle {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .02em;
}
.projectCard a:hover .projectTitle { text-decoration: underline; }

/* ---------- 8. RECRUIT ---------- */
.recruit .recruitBtn { margin-top: 39px; text-align: center; } /* 本文下端〜ボタン 39px（実測） */
.recruit .spText { display: none; }

/* ---------- 9. COMPANY OVERVIEW ---------- */
.company .companyList p { line-height: 1.85; }

/* =====================================================================
   SP / tablet（〜899px）
   ===================================================================== */
@media screen and (max-width: 899px) {
	.intro { min-height: 0; }
	.introLogo img { width: 240px; }
	.introLogo .introName { height: 11px; }
	.introScroll { display: none; }

	.hero { min-height: 0; }
	.hero .heroPc { display: none; }
	.hero .heroSp { display: block; }

	.cover img { height: auto; aspect-ratio: 1 / 1; }
	.cover img.coverPc { display: none; }
	.cover img.coverSp { display: block; }

	.philosophy .philosophyBody {
		flex-direction: column;
		gap: 40px;
	}
	.philosophy .philosophyLogo { flex: none; }
	.philosophy .philosophyLogo img { height: 100px; }
	.philosophy .philosophyLogo .logoPc { display: none; }
	.philosophy .philosophyLogo .logoSp { display: block; }
	.philosophy .philosophyText {
		flex: none;
		padding: 0 22px;
		font-size: 15px;
	}
	.philosophy .philosophyText .pcText { display: none; }
	.philosophy .philosophyText .spText { display: block; }

	/* SP：カバー下端〜見出し（元サイト＝スペーサー＋セクション余白 30px） */
	.section { padding: 60px 0; }
	.philosophy { padding-top: 60px; }
	.overview { padding-top: 49px; }
	.news, .projects { padding-top: 40px; }
	.recruit, .company { padding-top: 35px; }
	.news, .projects, .company { padding-bottom: 30px; }
	.recruit { padding-bottom: 30px; }
	.philosophy .sectionTitle { margin-bottom: 40px; }
	.overview .sectionTitle { margin-bottom: 40px; }
	.news .sectionTitle, .projects .sectionTitle { margin-bottom: 55px; }
	.recruit .sectionTitle, .company .sectionTitle { margin-bottom: 45px; }
	.philosophy .philosophyText p + p { margin-top: 0; }
	.recruit .recruitBtn { margin-top: 40px; }
	.overview .overviewLead { margin-bottom: 43px; padding: 0 18px; } /* 左右 43px（実測） */
	.overview .overviewLead p { text-align: left; font-size: 15px; line-height: 1.8; }

	.overviewCols {
		--bubbleSize: min(84vw, 480px);
		flex-direction: column;
		align-items: center;
		gap: 56px;
	}
	.overviewCol { flex: none; width: 100%; max-width: var(--bubbleSize); }
	.bubbleInner { width: 84%; }
	.bubbleTitle { font-size: 19px; }
	.bubbleTitle .en { font-size: 12px; }
	.bubbleList { font-size: 13px; }

	.statement { margin-top: 32px; }
	.statementHead { font-size: clamp(16px, 4.6vw, 19px); letter-spacing: .06em; }
	.statementBody { font-size: 14px; letter-spacing: .04em; text-align: justify; }
	.statementBody .pcText { display: none; }
	.statementBody .spText { display: block; }

	.newsGrid { grid-template-columns: 1fr; gap: 20px; }
	.newsItemTitle { font-size: 13px; }

	.projectGrid { grid-template-columns: 1fr; gap: 20px; }
	.projectTitle { font-size: 14px; }

	.recruit .pcText { display: none; }
	.recruit .spText { display: block; }
	.recruit .recruitBtn { margin-top: 30px; }

	.company .companyList { font-size: 13px; letter-spacing: .01em; }
}

/* tablet（590〜899px）は 2 カラム */
@media screen and (min-width: 590px) and (max-width: 899px) {
	.newsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.projectGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
	.bubble, .bubbleInner, .introLogo, .intro { transition: none !important; }
	.introScroll { animation: none !important; }
}