@charset "UTF-8";

header .main_menu li:first-child a {
  color: var(--mClr2);
}

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

	mainvisual_block

-----------------------------------*/
#mainvisual_block {
	width: 100vw;
	height: calc(100vh - 80px);
	position: relative;
	z-index: 1;
}
#mainvisual_block .mv_img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#mainvisual_block .mv_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#mainvisual_block .mv-swiper {
	height: 100%;
}
/* #mainvisual_block .mv-swiper::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
    background-color: rgba(21, 79, 110, 0.5);
	mix-blend-mode: multiply;
	z-index: 2;
} */
#mainvisual_block .mv_img .swiper-slide::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
    background-color: rgba(21, 79, 110, 0.5);
	mix-blend-mode: multiply;
	z-index: 2;
}
#mainvisual_block .mv_txt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	text-align: center;
	font-weight: 700;
	color: var(--tClr2);
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.3));
}
#mainvisual_block .mv_txt .copy {
	font-size: 7.4rem;
	white-space: nowrap;
	margin-bottom: 40px;
}
#mainvisual_block .mv_txt>p {
	font-size: 1.6rem;
	line-height: 2.13;
	width: 660px;
	margin: 0 auto;
}
#mainvisual_block .scroll_box {
	height: 106px;
	width: 22px;
	position:absolute;
	bottom:-42px;
	right:25px;
	animation: arrowmove 1s ease-in-out infinite;
	z-index: 2;
}
@keyframes arrowmove {
	0%{bottom:-32px;}
	50%{bottom:-42px;}
	100%{bottom:-32px;}
}
#mainvisual_block .scroll_box::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 6px;
    width: 1px;
    height: 20px;
    background: #DBDBDB;
    transform: skewX(31deg);
}
#mainvisual_block .scroll_box::after {
	content:"";
	position: absolute;
	top: 0;
	right:0;
	width:1px;
	height: 106px;
    background: #DBDBDB;
}
#mainvisual_block .scroll_txt {
	position: absolute;
	left: 0;
	top: 10px;
	color: var(--tClr2);
	font: 700 11px/1 var(--fEN);
	letter-spacing: 0.01em;
    writing-mode: vertical-rl;
}
@media screen and (max-width: 1000px) {
	#mainvisual_block .mv_txt .copy {
		font-size: 5.8rem;
	}
}
@media screen and (max-width: 840px) {
	#mainvisual_block .mv_txt .copy {
		font-size: 4.6rem;
	}
	#mainvisual_block .mv_txt>p {
		width: 90%;
	}
}
@media screen and (max-width: 640px) {
	#mainvisual_block {
		height: calc(100vh - 107px);
	}
	#mainvisual_block .mv_txt .copy {
		font-size: 3.2rem;
		line-height: 1.4;
	}
	#mainvisual_block .mv_txt>p {
		font-size: 1.4rem;
	}
}
/*-----------------------------------

	base

-----------------------------------*/
#contents section {
	padding: 110px 0;
}
#contents h2 {
	font: 700 1.8rem/1 var(--fJA);
	position: relative;
	margin-bottom: 50px;
	background: url(../img/common/icon_logo.svg) no-repeat left top/45px;
}
#contents h2::before {
	font: 700 6.4rem/1 var(--fEN);
	letter-spacing: 0;
	display: block;
    text-box: trim-both cap alphabetic;
	margin: 0 auto 23px 58px;
}
.more{
	display: block;
	width: 216px;	
	text-align: center;
    background: var(--mClr1) url(../img/common/icon_arrow01_wh.svg) no-repeat calc(100% - 20px) center / 12px;
    color: var(--tClr2)!important;
    padding: 14px 0;
    border-radius: calc(1px / 0);
    border: 2px solid #FFF;
}
@media screen and (max-width: 640px) {
	#contents section {
		padding: 70px 0;
	}
	#contents h2 {
		font: 700 1.5rem/1 var(--fJA);
		margin-bottom: 30px;
		background: url(../img/common/icon_logo.svg) no-repeat left top/30px;
	}
	#contents h2::before {
		font: 700 4.2rem/1 var(--fEN);
		margin: 0 auto 15px 42px;
	}
	/*.more {
		width: 190px;
		background: var(--mClr1) url(../img/common/icon_arrow01_wh.svg) no-repeat calc(100% - 17px) center/12px;
		padding: 17px 0;
		font-size: 1.4rem;
	}*/
}
/*-----------------------------------

	about_block

-----------------------------------*/
#about_block .row_box {
	flex-direction: row-reverse;
	align-items: center;
}
#about_block .about_txt {
	width: 43.33%;
}
#about_block .about_txt h2::before {
	content: "About";
}
#about_block .about_txt .copy {
	font: 700 3.4rem/1.76 var(--fJA);
	margin-bottom: 30px;
}
#about_block .about_txt p {
	line-height: 2.33;
	white-space: pre-line;
	margin-bottom: 50px;
}
#about_block .about_img {
	width: 48.33%;
	filter: drop-shadow(40px 40px 0px rgba(220,231,240,0.28));
}
#about_block .about_img img {
	border-radius: 20px;
}
@media screen and (max-width: 1000px) {
	#about_block .about_txt .copy {
		font: 700 2.8rem/1.76 var(--fJA);
	}
}
@media screen and (max-width: 840px) {
	#about_block .row_box {
		flex-direction: column;
		gap: 50px;
	}
	#about_block .about_txt {
		width: 100%;
	}
	#about_block .about_img {
		width: 100%;
		filter: drop-shadow(30px 30px 0px rgba(220,231,240,0.28));
	}
}
@media screen and (max-width: 640px) {
	#about_block .row_box {
		gap: 30px;
	}
	#about_block .about_txt .copy {
		font: 700 2.4rem/1.76 var(--fJA);
		margin-bottom: 15px;
	}
	#about_block .about_txt p {
		margin-bottom: 20px;
	}
	#about_block .about_img {
		filter: drop-shadow(15px 15px 0px rgba(220,231,240,0.28));
	}
	#about_block .about_img img {
		border-radius: 15px;
	}
}
/*-----------------------------------

	business_block

-----------------------------------*/
#business_block {
	background: var(--bgClr2);
	padding-bottom: 0 !important;
}
#business_block div.row_box {
	align-items: center;
	margin-bottom: 70px;
}
#business_block .business_ttl h2::before {
	content: "Business";
}
#business_block ul {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
}
#business_block ul li {
	aspect-ratio: 50 / 49;
	position: relative;
	z-index: 0;
	overflow: hidden;
}
#business_block ul li::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.5s ease;
	z-index: -1;
}
#business_block ul li:hover::before {
	transform: scale(1.2);
}
#business_block ul li.item01::before {
	background: url(../img/index/business_bg01.jpg) no-repeat center/cover;
}
#business_block ul li.item02::before {
	background: url(../img/index/business_bg02.jpg) no-repeat center/cover;
}
#business_block ul li.item03::before {
	background: url(../img/index/business_bg03.jpg) no-repeat center/cover;
}
#business_block ul li a {
	width: 100%;
	height: 100%;
	padding: 20px 40px;
	color: var(--tClr2);
	display: flex;
}
#business_block ul li a:hover {
	opacity: 1;
}
#business_block ul li a .txt {
	margin-top: auto;
}
#business_block ul li a .ttl,
#business_block ul li a p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#business_block ul li a .ttl {
	font: 700 2.2rem/1.45 var(--fJA);
	margin-bottom: 10px;
	min-height: calc(1.45em * 2);
	-webkit-line-clamp: 2;
	padding: 10px 0 0 68px;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 48px;
}
#business_block ul li.item01 a .ttl {
	background-image: url(../img/index/business_icon01.svg);
}
#business_block ul li.item02 a .ttl {
	background-image: url(../img/index/business_icon02.svg);
}
#business_block ul li.item03 a .ttl {
	background-image: url(../img/index/business_icon03.svg);
}
#business_block ul li a p {
	font: 700 1.5rem/2 var(--fJA);
	min-height: calc(2em * 4);
	-webkit-line-clamp: 4;
}
@media screen and (max-width: 1120px) {
	#business_block ul li a {
		padding: 20px 30px;
	}
	#business_block ul li a .ttl {
		padding: 10px 0 0 58px;
	}
	#business_block ul li a .ttl br {
		display: none;
	}
}
@media screen and (max-width: 1000px) {
	#business_block ul li a .ttl {
		font: 700 1.8rem/1.45 var(--fJA);
		padding: 5px 0 0 50px;
		background-size: 40px;
		margin-bottom: 5px;
	}
	#business_block ul li a p {
		font: 700 1.3rem/2 var(--fJA);
	}
}
@media screen and (max-width: 840px) {
	#business_block div.row_box {
		flex-direction: column;
		align-items: normal;
		gap: 50px;
	}
	#business_block ul {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: 1px;
	}
	#business_block ul li {
		aspect-ratio: 2.5 / 1;
	}
	#business_block ul li a .ttl {
		min-height:40px;
		-webkit-line-clamp: none;
	}
	#business_block ul li a p {
		min-height: calc(2em * 2);
		-webkit-line-clamp: 2;
	}
}
@media screen and (max-width: 640px) {
	#business_block div.row_box {
		margin-bottom: 40px;
		gap: 30px;
	}
	#business_block ul li {
		aspect-ratio: 16 / 9;
	}
	#business_block ul li a .ttl br {
		display: inline;
	}
}
/*-----------------------------------

	company_block

-----------------------------------*/
#company_block {
	background: url(../img/index/company_bg.svg) no-repeat -102px calc(100% - 30px) / 380px;
}
#company_block .company_ttl {
	width: 56%;
}
#company_block .company_ttl h2::before {
	content: "Company";
}
#company_block .company_ttl p {
	font: 700 1.5rem/2 var(--fJA);
	margin-bottom: 50px;
}
#company_block .company_menu {
	width: 41%;
	border-top: 1px solid #E1E1E1;
}
#company_block .company_menu li {
	border-bottom: 1px solid #E1E1E1;
}
#company_block .company_menu li a {
	display: block;
	padding: 30px;
	font: 700 1.8rem/1 var(--fJA);
	background: url(../img/common/icon_arrow01_bk.svg) no-repeat calc(100% - 38px) center/12px;
}
@media screen and (max-width: 840px) {
	#company_block .row_box{
		gap: 50px 0;
	}
	#company_block .company_ttl {
		width: 100%;
	}
	#company_block .company_menu {
		width: 100%;
	}
}
@media screen and (max-width: 640px) {
#company_block {
	background: url(../img/index/company_bg.svg) no-repeat -71px calc(100% - 20px) / 266px;
}
	#company_block .row_box{
		gap: 40px 0;
	}
	#company_block .company_ttl p {
		margin-bottom: 30px;
	}
	#company_block .company_menu li a {
		padding: 20px 10px;
		font: 700 1.6rem/1 var(--fJA);
		background: url(../img/common/icon_arrow01_bk.svg) no-repeat calc(100% - 20px) center/12px;
	}
}
/*-----------------------------------

	works_block

-----------------------------------*/
#works_block {
	background: var(--bgClr3);
}
#works_block div.row_box {
	align-items: center;
	margin-bottom: 40px;
}
#works_block .row_box .works_ttl {
	width: calc(100% - 240px);
}
#works_block .works_ttl h2::before {
	content: "Works";
}
#works_block .works_ttl p {
	font: 700 1.5rem/2 var(--fJA);
}
#works_block .row_box .works_link {
	width: 216px;
}
#works_block ul {
	gap: 40px;
}
#works_block ul li {
	display: flex;
    gap: 60px;
	background: var(--bgClr1);
	width: 100%;
	border: 1px solid #E5E9EE;
	padding: 30px 40px;
	border-radius: 2px;
}
#works_block ul li .imageArea {
	width: 40%;
	/* margin-bottom: 30px; */
}
#works_block ul li .info_box {
	width: 100%;
}
#works_block ul li.has-thumbnail .info_box {
	width: calc(60% - 60px);
}
#works_block ul li:nth-of-type(n+3) {
	display: none;
}
#works_block ul li .wrap{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-align-content: flex-start;
	align-content: flex-start;
	gap: 5px;
	margin-bottom: 10px;
}
#works_block ul li .client {
	font: 700 2rem/1.2 var(--fJA);
	color: var(--mClr2);
}
#works_block ul li .category{
	min-width: 90px;
	min-height: 34px;
	background-color: #1E90FE;
	padding: 2px 5px;
	border-radius: 4px 4px 4px 4px;
	color: #ffffff;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.03em;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;
}
#works_block ul li p {
	font: 700 1.5rem/2 var(--fJA);
}
#works_block .info_box>div {
	margin-bottom: 10px;
}
#works_block .info_box .url {
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
	align-items: baseline;
}
#works_block .info_box .url a {
    font-size: 18px;
}
#works_block .info_box .module {
	line-height: 1.4;
}
#works_block .info_box .module {
	display: flex;
	gap: 0 10px;
}
#works_block .info_box .module .module-cat {
    background-color: #0BB443;
    color: #fff;
	padding: 1px 8px;
    border-radius: 4px;
    font-size: 14px;
}
@media screen and (max-width: 840px) {
	#works_block div.row_box {
		flex-direction: column;
		gap: 50px;
	}
	#works_block .row_box .works_ttl {
		width: 100%;
	}
	#works_block .row_box .works_link {
		width: 100%;
	}
	#works_block ul {
		gap: 20px;
	}
	#works_block ul li {
		width: 100%;
		gap: 20px;
	}
	#works_block ul li.has-thumbnail .info_box {
		width: calc(60% - 20px);
	}
}
@media screen and (max-width: 640px) {
	#works_block div.row_box {
		gap: 30px;
	}
	#works_block ul li {
		display: block;
		padding: 20px;
	}
	#works_block ul li .client {
		font: 700 1.8rem/1.2 var(--fJA);
	}
	#works_block ul li .imageArea {
		width: 100%;
		margin-bottom: 20px;
	}
	#works_block ul li.has-thumbnail .info_box {
		width: 100%;
	}
}
/*-----------------------------------

	news_block

-----------------------------------*/
#news_block .row_box {
	align-items: center;
}
#news_block h2::before {
	content: "News";
}
#news_block .news_list {
	width: 68.33%;
}
#news_block .news_list article {
	border-bottom: 1px solid #E6ECF2;
}
#news_block .news_list article a {
	padding: 30px 20px;
	padding-right: 64px;
	display: flex;
	align-items: center;
	gap: 10px 30px;
	background: url(../img/common/icon_arrow02_bl.svg) no-repeat right center/44px;
}
#news_block .news_list article a time {
	width: 65px;
	font: 500 1.2rem/1 var(--fJA);
	color: #6F828B;
}
#news_block .news_list article a .cat {
	display: block;
	width: 70px;
	text-align: center;
	border: 1px solid var(--mClr2);
	border-radius: 3px;
	color: var(--mClr2);
	font: 700 1.1rem/1 var(--fJA);
	padding: 5px 0;
	text-box: trim-both cap alphabetic;
}
#news_block .news_list article a p {
	width: calc(100% - 195px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 700 1.4rem/1 var(--fJA);
}
@media screen and (max-width: 1000px) {
	#news_block .news_list {
		width: calc(100% - 260px);
	}
}
@media screen and (max-width: 840px) {
	#news_block .row_box {
		flex-direction: column;
		align-items: normal;
		gap: 50px;
	}
	#news_block .news_list {
		width: 100%;
	}
}
@media screen and (max-width: 640px) {
	#news_block .row_box {
		gap: 30px;
	}
	#news_block .news_list article a {
		flex-wrap: wrap;
		gap: 10px 15px;
		background: url(../img/common/icon_arrow02_bl.svg) no-repeat right bottom/35px;
		padding: 20px 0;
		padding-right: 45px;
	}
	#news_block .news_list article a p {
		width: 100%;
	}
}