@charset "utf-8";

/*------------------------------*/
/* ページ固有設定*/
/*------------------------------*/

/* ヘッダー中央ロゴ */
.main_center_logo {
	position: absolute;
	top:100px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	height:40%;
	max-height: 600px;
	min-height: 150px;
	width: auto;
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.main_center_logo {
		top:80px;
	}
}

/* スマホ */
@media only screen and (max-width:599px) {
	.main_center_logo {
		top:50px;
	}
}

/*------------------------------*/
/* アニメーション部 */
/*------------------------------*/
:root {
  --cycle: 1s; /* 1ターンの時間 */
}

/* 共通設定 */
.logo-animated {
  opacity: 0;
  animation-duration: var(--cycle);
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

/* 各ロゴにアニメーション名を指定 */
.logo-2 { animation-name: logo2Fade; }
.logo-3 { animation-name: logo3Fade; }
.logo-4 { animation-name: logo4Fade; }

/* ロゴ2：ターン1〜4まで表示 */
@keyframes logo2Fade {
  0%, 20%   { opacity: 0; }
  20%, 80%  { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* ロゴ3：ターン2〜4まで表示 */
@keyframes logo3Fade {
  0%, 40%   { opacity: 0; }
  40%, 80%  { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/* ロゴ4：ターン3〜4まで表示 */
@keyframes logo4Fade {
  0%, 60%   { opacity: 0; }
  60%, 80%  { opacity: 1; }
  80%, 100% { opacity: 0; }
}

/*------------------------------*/
/* ヘッダー装飾 */
.header_top_item {
	background-color: #5bb431;
	margin-left:auto;
	margin-right:auto;
	width:80%;
	max-width:400px;
	height:20px;
}

/*------------------------------*/
/* 上にスライド */
.slide_up_30 {
	transform: translateY(-30px);
	-webkit-transform: translateY(-30px);
	transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

/*------------------------------*/
/* 会社概要ボタン */
.company_button {
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #5bb431;
	color: #fff;
	font-size: 1rem;
	text-align: center;
	overflow: hidden;
}

.company_button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: #aadd77;
	transition: 0.3s;
}

.company_button:hover::before {
	left: 0;
}

.company_button span {
	position: relative;
	z-index: 1;
}

/*------------------------------*/
/* コンテンツタイトル */
.section_title_band {
	width: 100%;
	padding: 10px;
	background: linear-gradient(to right, #5bb431 0%, #5bb431 25%, #5bb431 30%, #ffffff 70%, #ffffff 100%);
	color: #ffffff;
	font-weight: bold;
}

/*------------------------------*/
/* 右下固定背景 (ワイヤーフレームビル画像) */
.background_frame_bg_rb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/image/wireframe_building_no.png');
	background-image: url('/image/wireframe_building.webp');
	background-position: right bottom;
	background-size: 80%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: 0;
}

/*------------------------------*/
/* 事業内容セクション */
.business_section {
	position: relative;
	width: 100%;
	display: flex;
}

/* 左ボックス */
.biz_left_box {
	width: 70%;
	height: 350px;
	transform: translateY(-50px);
}

/* 右ボックス */
.biz_right_box {
	width: 45%;
	height: 150px;
	background-color: #fff;
	position: absolute;
	right: 0;
	bottom: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	z-index: 1;
}

/* タブレット */
@media only screen and (max-width:1024px) {
	.biz_left_box {
		width: 80%;
	}
	.biz_right_box {
		width: 60%;
	}
}

/* スマホ */
@media only screen and (max-width:599px) {
	.biz_left_box {
		width: 90%;
	}
	.biz_right_box {
		width: 70%;
		height: 170px;
	}
}

/*------------------------------*/
/* 左ボックス内のSVG */
.business_left_svg {
	position: absolute;
	left:20px;
	top:20px;
	z-index: 1;
	width:100%;
	max-width: 150px;
}

/* 右上の三角形装飾 */
.top_right_triangle {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background-color: #5bb431;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
  user-select: none;
}

/*------------------------------*/
/* 採用情報枠 */
.recruit_frame {
	background-image: url('/image/recruit_frame_bg_no.png');
	background-image: url('/image/recruit_frame_bg.webp');
	background-size: 50% auto;
	background-position: right bottom;
	background-repeat: no-repeat;
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.recruit_frame {
		background-size: 65% auto;
	}
}
/* スマホ */
@media only screen and (max-width:599px) {
	.recruit_frame {
		background-size: 80% auto;
	}
}

/*------------------------------*/
/* 採用情報ボタン */
.recruit_button {
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #5bb431;
	color: #fff;
	font-size: 1rem;
	text-align: center;
	overflow: hidden;
}

.recruit_button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: #aadd77;
	transition: left 0.3s;
}

.recruit_button:hover::before {
	left: 0;
}

.recruit_button span {
	position: relative;
	z-index: 1;
}

/*------------------------------*/
/* 採用情報テキスト */
.recruit_text_svg {
	width: 100%;
	max-width: 500px;
	height:auto;
}
/* タブレット */
@media only screen and (max-width:1024px) {
	.recruit_text_svg {
		max-width: 400px;
	}
}
/* スマホ */
@media only screen and (max-width:599px) {
	.recruit_text_svg {
		max-width: 250px;
	}
}

/*------------------------------*/
/* 固定背景 */
.index_bottom_image {
	background-image: url('/image/index_bottom_bg_no.png');
	background-image: url('/image/index_bottom_bg.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* フッターロゴSVG */
.index_bottom_logo {
	position: absolute;
	top:200px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 60%;
	height:auto;
	max-width: 500px;
}

/*------------------------------*/
/* グリッドアニメーション */
.pixel_art_frame {
	position: relative;
}
.pixel_overlay {
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display: grid;
	grid-template-columns: repeat(20, 1fr); /* 10列 */
	grid-template-rows: repeat(1, 1fr); /* 10行 */
}
.pixel_art_sel {
	overflow: hidden;
}
.pixel_art_sel_inner {
	background-color:rgba(255,255,255,1);
	width:100%;
	height:100%;
}

.pixel_art_animation_l {
	animation: animation_l 0.3s linear forwards; /* 時間指定 */
}
@keyframes animation_l {
	100% {
		transform: translateX(calc(-100% - 1px));
		-webkit-transform: translateX(calc(-100% - 1px));
	}
}

.pixel_art_animation_r {
	animation: animation_r 0.3s linear forwards; /* 時間指定 */
}
@keyframes animation_r {
	100% {
		transform: translateX(calc(100% + 1px));
		-webkit-transform: translateX(calc(100% + 1px));
	}
}