@charset "utf-8";
/*
Theme Name: xoneconsul
Theme URI:
Description: pcbrain
Version: 1.0
Author: pcbrain.co.jp
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500..900&family=Noto+Sans+JP:wght@300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url("css/default.css");
@import url("css/setting.css?20260625");

/*====================
PCを基本設計にする
 - 1025px〜：大型PC
 - 600px～1024px：タブレット
 - 〜599px：スマートフォン縦
====================*/

/*----------------------------------------------------
    基本設定、リンクカラーなど
----------------------------------------------------*/

html {
  font-size: 62.5%;
  height: -webkit-fill-available;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}
body {
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: var(--normal-line-height);
	color: var(--black);
	font-family:"Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-weight: var(--normal-font-weight);
	font-optical-sizing: auto;
	background-color: #FFF;
	min-height: 100vh;
	min-height: -webkit-fill-available;
}
a:link,a:visited {
	color: var(--black);
	text-decoration: none;
}
a:hover {
	color: var(--black);
}
a:active {
	color: var(--black);
}

table{
	border: solid 1px var(--black);
	width: 100%;
}
th,
td{
	border: solid 1px var(--black);
	padding: 25px;
}
th{
	font-weight: 400;
	background: url(./img/bg-lightgreen01.png) repeat;
}
iframe{
	width: 100%;
}



/*----------------------------------------------------
    header ヘッダー
----------------------------------------------------*/

header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9000;
	background: var(--white);
}
header .inner{
	display: flex;
	padding: 17px 55px 15px 50px;
	align-items: flex-start;
	justify-content: space-between;
}
.hdrLogo{
	position: relative;
	z-index: 9999;
}
.hdrLogo a img{
	transition: all 0.4s ease-out;
	width: 100%;
	height: auto;
	max-height: 88px;
	max-width: 142px;
	color: var(--main-color01);
}
.hdrLogo a:hover img{
	opacity: 0.7;
}
header.fixed{
	.hdrLogo a img{
		max-height: 55px;
	}
}
#gNav{
	display: flex;
	align-items: center;
	gap: 4em;
	padding-top: 17px;
}
#gNav ul{
	display: flex;
	gap: 2em;
	font-family: var(--en-font-family);
	font-weight: 700;
}
#gNav .menuBtn{
	cursor: pointer;
	width: 70px;
	height: 18px;
	position: relative;
	z-index: 9999;
	transition: all 0.2s ease-out;
}
#gNav .menuBtn span {
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	background-color: var(--black);
	transition: all 0.4s ease-out;
	transform-origin: left center;
}
#gNav .menuBtn:hover span {
	background-color: var(--gray);
}
#gNav .menuBtn span:nth-of-type(1) {
	top: 2px;
}
#gNav .menuBtn span:nth-of-type(2) {
	top: 17px;
}
#gNav .menuBtn.active span:nth-of-type(1) {
	top: 0;
	transform: rotate(15deg);
}
#gNav .menuBtn.active span:nth-of-type(2) {
	top: 100%;
	transform: rotate(-15deg);
}
#pNav{
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.4s ease-out;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9500;
	width: 100%;
	height: 100dvh;
	background: rgba(255,255,255,.95);
	overflow-y: auto;
}
#pNav.active{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
#pNav ul{
	margin: 0;
	padding: 20px 40px 80px;
	text-align: center;
	font-size: 2.2rem;
	font-family: var(--en-font-family);
	font-weight: 500;
}
#pNav ul li + li{
	margin-top: 25px;
}
#pNav ul ul{
	padding: 0;
	li{
		margin-top: 10px;
		font-size: 1.6rem;
		font-weight: 400;
		+li{
			margin-top: 10px;
		}
	}
}

@media screen and (max-width: 1024px) {
	header .inner{
		padding: 17px 30px 15px 30px;
	}
	.hdrLogo a img{
		max-height: 55px;
	}
}
@media screen and (max-width: 767px) {
	#gNav{
		gap:3em;
	}
	#gNav .menuBtn{
		width: 50px;
	}
	#gNav .menuBtn.active span:nth-of-type(1) {
		transform: rotate(20deg);
	}
	#gNav .menuBtn.active span:nth-of-type(2) {
		transform: rotate(-20deg);
	}
}
@media screen and (max-width: 599px),
screen and (orientation: landscape) and (max-height: 500px) {
	header .inner{
		padding: 12px 20px 10px 20px;
	}
	.hdrLogo a img{
		max-height: 40px;
	}
	header.fixed{
		.hdrLogo a img{
			max-height: 40px;
		}
	}
	#gNav {
		padding-top: 14px;
	}
	#gNav ul{
		display: none;
	}
	#pNav ul {
		padding: 30px 40px 20px 40px;
	}
}
@media screen and (orientation: landscape) and (max-height: 500px) {
	#pNav ul {
		font-size: 2.0rem;
	}
	#pNav ul li + li{
		margin-top: 5px;
	}
}

/*----------------------------------------------------
    footer フッター
----------------------------------------------------*/

footer{
	background: var(--main-color01);
	margin-top: 150px;
}
.l-footer-photo{
	width: 100%;
	aspect-ratio: 32/15;
	img{
		object-fit: cover;
		width: 100%;
	}
}

.l-footer-upper{
	display: flex;
	padding: 100px 50px 100px 100px;
	justify-content: flex-start;
	gap: 270px;
}
#fNav{
	ul{
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 45px 95px;
		width: fit-content;
	}
	a{
		color: var(--white);
		font-family: var(--en-font-family);
		font-size: 1.4rem;
		font-weight: 500;
	}
	a.u-link-underline{
		background-image: linear-gradient(var(--white), var(--white));
	}
}
.l-corpInformation{
	h5,
	address,
	p{
		font-size: 1.4rem;
		font-weight: var(--normal-font-weight);
		color: var(--white);
		line-height: var(--normal-line-height);
	}
	address,
	p{
		margin-top: 10px;
		a{
			color: var(--white);
			text-decoration: none !important;
		}
	}
	ul.infoLink{
		display: flex;
		padding: 0;
		gap: 50px;
		margin-top: 30px;
	}
	ul.infoLink li{
		font-family: var(--en-font-family);
		font-size: 1.4rem;
		font-weight: 600;
		position: relative;
		display: inline-block;
		overflow: hidden;
		&::after,
		&::before{
			position: absolute;
			bottom: 0;
			left: 0;
			content: '';
			height: 1px;
			width: 100%;
			background: var(--gray);
			transition: all 0.8s;
			animation-fill-mode: forwards;
			animation-duration: 0.6s;
		}
		&::after{
			transform: translateX(200%);
		}
		&:hover::before{
			animation-name: transformRightLeftFtr;
			animation-delay: 0s;
		}
		&:hover::after{
			animation-name: transformLeftRightFtr;
  			animation-delay: 0.2s;
		}
		a{
			position: relative;
			color: var(--white);
			padding: 3px 50px 15px 20px;
			line-height: 1;
			display: flex;
			gap: 14px;
			align-items: center;
			transition: all 0.2s ease-out;
		}
		a::after{
			position: absolute;
			font-family: "Material Symbols Outlined";
			background: var(--main-color01);
			font-weight: 200;
			font-size: 2.2rem;
			color: var(--white);
			display: inline-block;
			top:0px;
			right: 20px;
		}
		&.map a::after{
			content: "\e0b2";
		}
		&.contact a::after{
			content: "\e158";
		}
	}
}
@keyframes transformLeftRightFtr {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes transformRightLeftFtr {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(200%);
	}
}

.l-copyRight{
	border-top: solid 1px var(--sub-color01);
	display: flex;
	padding: 50px 50px 50px 100px;
	justify-content: space-between;
	align-items: center;
	font-size: 1.2rem;
	color: var(--white);
}
.ftrLogo img{
	transition: all 0.4s ease-out;
	max-height: 88px;
	width: 100%;
	height: auto;
	color: var(--white);
}
.ftrLogo:hover img{
	opacity: 0.7;
}

@media screen and (max-width: 1024px) {
	.l-footer-upper{
		padding: 50px 30px 50px 30px;
		justify-content: space-between;
		gap: 50px;
	}
	#fNav {
		ul {
			gap: 45px 45px;
		}
	}
	.l-copyRight {
		padding: 30px 30px 30px 30px;
	}
	.ftrLogo img{
		max-height: 55px;
	}
}
@media screen and (max-width: 767px) {
	.l-footer-upper{
		flex-direction: column;
		align-items: center;
	}
	#fNav {
		ul {
			grid-template-columns: repeat(4, auto);
			gap: 30px;
		}
	}
	.l-corpInformation {
		ul.infoLink {
			justify-content: center;
			gap: 20px;
		}
	}
}
@media screen and (max-width: 599px) {
	footer{
		margin-top: 100px;
	}
	.l-footer-upper{
		padding: 50px 20px 50px 20px;
		justify-content: space-between;
		gap: 50px;
	}
	.l-copyRight {
		padding: 30px 20px 30px 20px;
		flex-direction: column;
		gap: 20px;
	}
}


/*----------------------------------------------------
    #pageTitle ヒーロービジュアル/ページタイトル
----------------------------------------------------*/

.pageTitle{
	margin-top: var(--header-height);
	border-bottom: solid 1px var(--gray);
	padding: 90px 60px 10px 60px;
	& .pageName{
		text-align: right;
		color: var(--main-color01);
		font-weight: 500;
		font-size: 3.0rem;
		letter-spacing: .2rem;
		.EN{
			font-family: var(--en-font-family);
			font-weight: 500;
			font-size: 7.0rem;
		}
	}
}

/*---- #top ----*/
#top{
	& .pageTitle{
		padding: 60px 120px 120px 60px;
		background: url(./img/top_title_bg.png) no-repeat right 100px;
		& .catchJP{
			font-weight: 500;
			font-size: 6.6rem;
			letter-spacing: .6rem;
			line-height: 1.35;
			margin-top: 30px;
		}
		@media screen and (max-width: 1400px) {
			& .catchJP{
				font-size: clamp( 2.0rem ,4.4vw ,6.6rem);
			}
		}
		& .catchSubTitle{
			margin-top: 35px;
			font-size: 2.8rem;
			font-weight: 500;
			line-height: 1.8;
		}
	}
}
@media screen and (max-width: 1024px) {
	.pageTitle{
		padding: 30px 30px 10px 30px;
		.pageName{
			font-size: clamp( 2.0rem ,3.0vw ,3.0rem);
			.EN{
				font-size: clamp( 2.0rem ,7.0vw ,6.6rem);
			}
		}
	}
	#top{
		.pageTitle{
			padding: 60px 80px 90px 30px;
			background-size: 30px calc(100% - 70px - 110px);
			.catchSubTitle{
				font-size: 2.4rem;
				line-height: 1.6;
			}
		}
	}
}
@media screen and (max-width: 767px) {
	#top{
		.pageTitle{
			padding: 50px 50px 70px 40px;
			.catchJP{
				font-size: clamp( 2.0rem ,5.4vw ,6.6rem);
				margin-top: 20px;
			}
			.catchSubTitle {
				font-size: clamp( 1.6rem ,3.5vw ,2.4rem);
				margin-top: 20px;
			}
		}
	}
}
@media screen and (max-width: 599px),
screen and (orientation: landscape) and (max-height: 500px) {
	#top{
		.pageTitle{
			padding: 40px 40px 40px 20px;
			background-position: right 30px;
			background-size: 20px calc(100% - 50px - 90px);
		}
	}
	.pageTitle{
		padding: 30px 20px 10px 20px;
	}
}


/*----------------------------------------------------
    #top トップページ
----------------------------------------------------*/
.l-strength{
	border-bottom: solid 1px var(--gray);
	.l-strength-wrap{
		max-width: 1900px;
		margin: 120px 60px;
	}
	.l-strength-tit{
		display: flex;
		flex-direction: column-reverse;
		width: 100%;
		color: var(--main-color01);
		gap: 5px;
		.jp{
			font-size: 3.0rem;
			font-weight: 500;
		}
	}
	.l-strength-text{
		margin-top: 30px;
		line-height: 2.0;
		font-size: 2.5rem;
	}
}
@media screen and (max-width: 1024px) {
	.l-strength{
		.l-strength-wrap{
			margin: 100px 30px;
		}
		.l-strength-text{
			font-size: 2.5rem;
			font-size: 2.8vw;
		}
	}
}
@media screen and (max-width: 767px) {
	.l-strength{
		.l-strength-wrap{
			margin: 60px 30px;
		}
	}
}
@media screen and (max-width: 599px) {
	.l-strength{
		.l-strength-wrap{
			margin: 50px 20px;
		}
		.l-strength-tit{
			.jp{
				font-size: clamp(2.0rem, 5.4vw, 6.6rem);
				font-weight: 500;
			}
		}
		.l-strength-text{
			margin-top: 20px;
			font-size: 1.6rem;
		}
	}
}

.l-projectsSupported{
	margin: 120px 60px 0;
	@media screen and (max-width: 1279px) {
		.is-scroll-on-mobile::before{
			content: "スクロールできます →";
			background-color: var(--black);
			color: var(--white);
			font-size: 1.4rem;
			line-height: 1;
			padding: 2px 5px;
			display: block;
			width: fit-content;
		}
		figure.is-scroll-on-mobile{
			margin-top: 20px;
			overflow-x: scroll;
			white-space: nowrap;
			display: block;
			padding: 0;
			table{
				margin-top: 0;
			}
			img{
				padding: 5px 0;
				width: auto;
				height: auto;
				max-width: 1400px;
				max-height: unset;
			}
		}
	}
}
.l-projectsSupported-count{
	font-size: 3.0rem;
	font-weight: 500;
	margin-top: 20px;
}
.l-projectsSupported-text{
	margin-top: 20px;
}
.l-projectsSupported-subtit{
	font-size: 2.5rem;
	margin-top: 50px;
	margin-bottom: 20px;
	color: var(--main-color01);
	font-weight: 500;
}
.btn + .l-projectsSupported-subtit{
	margin-top: 100px;
}
.l-projectsSupported-list{
	max-width: 2000px;
	margin-top: 20px;
	border: none;
	border-collapse: separate;
	border-spacing: 0px 6px;
	th{
		border: none;
		background: #6daa57;
		color: var(--white);
		font-size: 1.8rem;
		font-size: clamp(1.4rem,1.3vw,2.4rem);
		font-weight: 700;
		padding: 10px 20px;
		white-space: nowrap;
		width: 17%;
	}
	td{
		height: 90px;
		border: none;
		background: #cfd2a7;
		padding: 10px 35px;
		font-weight: 700;
		font-size: 1.6rem;
		font-size: clamp(1.4rem,1.1vw,2.0rem);
		color: #333;
		strong{
			font-weight: 700;
			color: var(--main-color01);
			text-decoration: underline;
			display: block;
		}
	}
	thead{
		th{
			background:var(--main-color01);
			color: var(--white);
			font-size: 1.6rem;
			font-size: clamp(1.4rem,1.3vw,2.4rem);
			font-weight: 700;
			width: unset;
		}
		th:nth-child(2){
			background: #68836b;
		}
	}
}
@media screen and (max-width: 1334px) {
	.l-projectsSupported-list{
		td{
			height: 60px;
			font-size: clamp(1.4rem,1.0vw,1.8rem);
		}
	}
}

.l-topRecommend-wrap{
	border-top: solid 1px var(--gray);
	margin-top: 110px;
	.l-topRecommend-tit{
		margin: 100px 60px 0;
	}
}
.l-topRecommend {
	display: flex;
	flex-wrap: wrap;
	gap: 110px 60px;
	margin: 40px 60px 0;
}
.l-topRecommendItem {
	min-width: 0;
	/*width: calc((100% - 120px) * 4.4 / 16.8);*/
	width: calc((100% - 120px)/3);
	dl{
		margin: 0;
	}
	dt{
		margin: 10px 0 0;
		font-size: 1.7rem;
		font-weight: 500;
		color: var(--main-color01);
		/*
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		*/
	}
	dd{
		margin: 10px 0 0;
		line-height: var(--normal-line-height);
		/*
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		*/
	}
}
/*
.l-topRecommendItem:nth-child(1){
	width: 100% !important;
	height: auto;
	.l-topRecommendItem-img{
		aspect-ratio: unset;
		img{
			display: block;
			&.spblock{
				display: none;
			}
		}
	}
}
*/
.l-topRecommendItem:nth-child(6n+2),
.l-topRecommendItem:nth-child(6n+7) {
	/* 	width: calc((100% - 120px) * 8 / 16.8); */
	width: calc((100% - 120px)/3);
}
.l-topRecommendItem-img{
	width: 100%;
	aspect-ratio: 4/3;
	background: var(--main-color01);
	overflow: hidden;
	margin-bottom: 15px;
	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: all 0.4s ease-out;
		background: var(--white);
	}
}
a .l-topRecommendItem-img img:hover{
		opacity: 0.7;
		transform: scale(1.1);
}

.picLabel{
	background: var(--main-color01);
	color: var(--white);
	font-size: 1.4rem;
	line-height: 1;
	display: inline-block;
	padding: 4px 10px 5px 10px;
}
@media screen and (max-width: 1024px) {
	.l-projectsSupported{
		margin: 100px 30px 0;
	}
	.l-projectsSupported-text{
		font-size: 1.4rem;
		line-height: 1.6;
		margin-top: 10px;
	}
	.l-projectsSupported-list{
		th{
			font-size: 1.5rem;
			padding: 10px;
		}
		td{
			font-size: 1.4rem;
			padding: 10px 30px;
		}
		thead{
			th{
				font-size: 1.4rem;
			}
		}
	}
	.l-topRecommend-wrap{
		margin-top: 80px;
		.l-topRecommend-tit{
			margin: 80px 30px 0;
		}
	}
	.l-topRecommend {
		gap: 80px 40px;
		margin: 40px 30px 0;
	}
	.l-topRecommendItem {
/*		width: calc((100% - 80px) * 4.4 / 16.8); */
		width: calc((100% - 80px)/3);
		dt{
			margin-top: 5px;
			font-size: 1.5rem;
			line-height: 1.5;
		}
		dd{
			margin-top: 5px;
			font-size: 1.4rem;
			line-height: 1.6;
		}
	}
	.l-topRecommendItem:nth-child(6n+2),
	.l-topRecommendItem:nth-child(6n+7) {
	/*	width: calc((100% - 80px) * 8 / 16.8);*/
		width: calc((100% - 80px)/3);

	}
	.picLabel{
			font-size: 1.2rem;
		}
}
@media screen and (max-width: 767px) {
	.l-projectsSupported{
		margin: 60px 30px 0;
	}
	.l-topRecommend-wrap{
		margin-top: 60px;
		.l-topRecommend-tit{
			margin: 60px 30px 0;
		}
	}
	.l-topRecommend {
		margin: 30px 30px 0;
		gap: 60px 30px;
	}
	.l-topRecommendItem {
		width: calc((100% - 30px) / 2);
	}
	.l-topRecommendItem:nth-child(6n+2),
	.l-topRecommendItem:nth-child(6n+7) {
		width: calc((100% - 30px) / 2);
	}
	.l-topRecommendItem:nth-child(3n+2) {
		/*width: 100%;*/
	}	
}
@media screen and (max-width: 599px) {
	.l-projectsSupported{
		margin: 50px 20px 0;
	}
	.l-projectsSupported-count{
		font-size: 2.0rem;
	}
	.l-topRecommend-wrap{
		margin-top: 50px;
		.l-topRecommend-tit{
			margin: 50px 20px 0;
		}
	}
	.l-topRecommend {
		margin: 30px 20px 0;
		gap: 50px 20px;
	}
	.l-topRecommendItem {
		width: 100% !important;
	}
	/*
	.l-topRecommendItem:nth-child(1){
		.l-topRecommendItem-img{
			img{
				display: none;
				&.spblock{
					display: block;
				}
			}
		}
	}
	*/
	.picLabel{
		font-weight: var(--normal-font-weight);
	}
}
@media screen and (orientation: landscape) and (max-height: 500px){
	.l-projectsSupported{
		margin: 50px 20px 0;
	}
	.l-projectsSupported-count{
		font-size: 2.0rem;
	}
	.l-projectsSupported-text{
		font-size: var(--normal-font-size);
		font-weight: var(--normal-font-weight);
		margin-top: 10px;
	}
}

/*----------------------------------------------------
    #company 企業情報
----------------------------------------------------*/

.l-companyLead{
	width: 100%;
	max-width: min(1440px, calc(100% - 120px));
	margin: 0 auto;	
	.l-companyLead-text{
		h2{
			font-size: 5.0rem;
			font-weight: 500;
			line-height: 1.6;
			letter-spacing: 0.08em;
		}
		p{
			font-size: var(--normal-font-size);
			margin-top: 40px;
		}
	}
}
.l-companyPhilosophy{
	width: 100%;
	background: var(--main-color01) url(./img/company_philosophy_bg.png) no-repeat top left / 100% auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 160px;
	padding: 210px 0 60px;
	.l-companyPhilosophy-tit{
		display: flex;
		flex-direction:column-reverse;
		align-items: center;
		gap: 5px;
		span{
			color: var(--white);
		}
		.jp{
			font-size: 3.0rem;
			font-weight: 500;
		}
	}
	.wrap{
		background-color: var(--white);
		margin: 200px 60px 0;
		max-width: 1800px;
		display: flex;
		flex-wrap: wrap;
		padding: 40px;
		gap: 40px;
		.l-companyPhilosophy-item{
			background-color: var(--sub-color02);
			padding: 70px;
			width: calc((100% - 40px)/2);
			&:first-child{
				width: 100%;
			}
			h3{
				display: flex;
				gap: 20px;
				flex-direction: row-reverse;
				align-items: baseline;
				width: fit-content;
				.jp{
					font-size: 2.2rem;
					font: 400;
					color: var(--main-color01);
				}
			}
			.l-companyPhilosophy-item-text {
				margin-top: 50px;
				p,ol li{
					font-size: 2.6rem;
					font-weight: 500;
				}
				ol li{
					list-style: decimal;
					padding: 0 0 0 10px;
					+li{
						margin-top: 25px;
					}
				}
			}
		}
	}
}
.l-companyStance,
.l-companyProfessional{
	display: flex;
	width: 100%;
	padding: 170px 60px 170px 60px;
	.wrap{
		width: 100%;
		max-width: 1620px;
		.wrap{
			margin-top: 90px;
			display: flex;
			gap: 40px;
			justify-content: space-between;
		}
	}
	.l-common-tit{
		display: flex;
		flex-direction: column-reverse;
		width: 100%;
		color: var(--main-color01);
		gap: 5px;
		.jp{
			font-size: 3.0rem;
			font-weight: 500;
		}
	}
	.l-common-img{
		width: 600px;
		height: auto;
	}
	.l-common-text{
		max-width: 720px;
		flex: 1;
		font-size: var(--normal-font-size);
		h3{
			font-size: 4.0rem;
			letter-spacing: 0.08em;
			line-height: 1.5;
		}
		h4{
			font-size: 1.8rem;
			color: var(--main-color01);
			margin-top: 60px;
			font-weight: 500;
		}
		p{
			margin-top: 40px;
		}
	}
}
.l-companyStance{
	justify-content: flex-end;
	.wrap .wrap{
		flex-direction: row-reverse;
	}
}
.l-companyProfessional{	
	justify-content: flex-start;
	background: var(--sub-color02);
	.l-common-text{
		h4 + p{
			margin-top: 10px;
		}
	}
}
.l-companyRecord{
	width: 100%;
	max-width: min(1440px, calc(100% - 120px));
	margin: 0 auto;
	padding: 170px 0 170px 0;
	.l-companyRecord-tit{
		display: flex;
		flex-direction: column-reverse;
		width: 100%;
		color: var(--main-color01);
		gap: 5px;
		.jp{
			font-size: 3.0rem;
			font-weight: 500;
		}
	}
	.l-companyRecord-text{
		margin-top: 90px;
		h3 {
			font-size: 4.0rem;
			letter-spacing: 0.08em;
			line-height: 1.5;
		}
		h4{
			font-size: 2.2rem;
			margin-top: 60px;
			color: var(--main-color01);
		}
		ul{
			margin-top: 30px;
			padding-left: 30px;
		}
		li{
			list-style:disc;
			font-weight: 500;
			font-size: 1.8rem;
			+ li{
				margin-top: 30px;
			}
		}
		p{
			font-size: var(--normal-font-size);
			margin-top: 40px;
		}
	}
	.l-companyRecord-item{
		margin-top: 60px;
		th,td{
			font-size: var(--normal-font-size);
		}
		th{
			white-space: nowrap;
		}
	}
}
.l-companyGroup{
	background:var(--sub-color02) ;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 170px 0 170px 0;
	> .wrap{
		width: 100%;
		max-width: min(1440px, calc(100% - 120px));
		margin: 0 auto;
		.wrap{
			display: flex;
			gap: 40px;
			margin-top: 80px;
			align-items: flex-start;
		}
	}
	.l-companyGroup-tit{
		display: flex;
		flex-direction: column-reverse;
		width: 100%;
		color: var(--main-color01);
		gap: 5px;
		.jp{
			font-size: 3.0rem;
			font-weight: 500;
		}
	}
	.l-companyGroup-text{
		margin-top: 90px;
		h3 {
			font-size: 4.0rem;
			letter-spacing: 0.08em;
			line-height: 1.5;
		}
		p{
			font-size: var(--normal-font-size);
			margin-top: 40px;
		}
	}
	.l-companyGroup-img{
		max-width: calc( 50% - 40px );
		img{
			vertical-align: top;
		}
	}
	.l-companyGroup-list{
		flex: 1;
		padding: 0;
		li{
			padding: 0 30px 45px;
			margin-bottom: 45px;
			border-bottom: dotted 1px var(--black);
			&:last-child{
				margin-bottom: 0;
			}
			h5{
				font-size: 2.0rem;
				font-weight: 500;
				color: var(--main-color01);
			}
			h6{
				font-size: 1.8rem;
				font-weight: 500;
				margin-top: 5px;
			}
			p{
				font-size: var(--normal-font-size);
				margin-top: 5px;
			}
		}
	}
}
.l-companyOverview{
	background:var(--sub-color02) ;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 170px 0 170px 0;
	> .wrap{
		width: 100%;
		max-width: min(1440px, calc(100% - 120px));
		margin: 0 auto;
		.wrap{
			display: flex;
			gap: 40px;
			margin-top: 80px;
			align-items: flex-start;
		}
	}
	.l-companyOverview-tit{
		display: flex;
		flex-direction: column-reverse;
		width: 100%;
		color: var(--main-color01);
		gap: 5px;
		.jp{
			font-size: 3.0rem;
			font-weight: 500;
		}
	}
	.l-companyOverview-item{
		background: var(--white);
		margin-top: 60px;
		th,td{
			font-size: var(--normal-font-size);
		}
		th{
			white-space: nowrap;
		}
		iframe{
			margin-top: 20px;
		}
	}
}
.l-newsArchive{
	margin-top: 170px;
	width: 100%;
	.l-newsArchive-tit{
		max-width: min(1800px, calc(100% - 120px));
		margin: 0 auto;
		font-size: 5.0rem;
		color: var(--main-color01);
		font-family: var(--en-font-family);
		border-bottom: solid 1px var(--gray);
		padding: 0 0 30px 0;
		line-height: 1;
		letter-spacing: .2rem;
	}
	.l-newsArchive-list{
		max-width: min(1440px, calc(100% - 120px));
		margin: 90px auto 0;
		padding: 0;
		li{
			border-bottom: solid 1px var(--silver);
		}
		a{
			display: flex;
			padding: 40px 80px 40px 0;
			align-items: center;
			position: relative;
			transition: all 0.2s ease-out;
		}
		.date,.termWrap,.termName,.tit{
			display: block;
			line-height: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			transition: all 0.2s ease-out;
		}
		.date{
			font-size: 1.4rem;
			font-weight: 500;
			color: var(--gray);
			width: 10em;
		}
		.termWrap{
			width: 10em;
			padding-right: 2em;
		}
		.termName{
			font-size: 1.4rem;
			font-weight: 400;
			max-width: 100%;
			width: fit-content;
			padding: 8px 15px 10px;
			background: var(--sub-color02);
		}
		.tit{
			font-size: var(--normal-font-size);
			font-weight: 400;
			flex: 1;
		}
		.arrow{
			overflow: hidden;
			position: absolute;
			top: 0;
			right: 30px;
			bottom: 0;
			width: 25px;
			margin: auto 0;
			line-height: 1;
			background: var(--silver);
			color: var(--white);
			height: 35px;
			transition: all 0.2s ease-out;
		}
		.arrow:before,
		.arrow:after {
			font-family: "Material Symbols Outlined";
			content: "\e5c8";
			font-weight: 300;
			font-size: 1.4rem;
			padding: 10px 6px;
			position: absolute;
			top: 0;
			right: 0;
			animation-fill-mode: forwards;
			animation-duration: 0.6s;
		}
		.arrow:after {
			transform: translateX(-100%);
		}
		a:hover{
			.arrow{
				background: var(--main-color01);
			}
			.date,.termWrap,.tit{
				opacity: 0.7;
			}
		}
		a:hover .arrow:before {
			animation-name: transformRightLeft;
			animation-delay: 0s;
		}
		a:hover .arrow:after {
			animation-name: transformLeftRight;
			animation-delay: 0.2s;
		}
	}
}

@media screen and (max-width: 1439px) {
	.l-companyStance,
	.l-companyProfessional{
		.wrap .wrap{
			gap: 30px;
			margin-top: 50px;
		}
		.l-common-img{
			width: calc((100% - 40px)* 0.4);
		}
		.l-common-text{
			width: calc((100% - 40px)* 0.6);
			max-width: unset;
			flex:none;
			h3 {
				font-size: clamp(2.0rem, 3.2vw, 4.0rem);
			}
			h4 {
				margin-top: 40px;
			}
		}
	}
}
@media screen and (max-width: 1024px) {
	.l-companyLead{
		max-width: min(1440px, calc(100% - 60px));
		.l-companyLead-text{
			h2{
				font-size: clamp(2.0rem, 5.0vw, 6.6rem);
			}
		}
	}
	.l-companyPhilosophy{
		background: var(--main-color01) url(./img/company_philosophy_bg.png) no-repeat top left / 130% auto;
		margin-top: 100px;
		padding: 150px 0 30px;
		.wrap{
			margin: 150px 30px 0;
			padding: 30px;
			gap: 30px;
			.l-companyPhilosophy-item{
				padding: 30px;
				width: calc((100% - 30px)/2);
				.l-companyPhilosophy-item-text {
					margin-top: 20px;
					p,ol li{
						font-size: clamp(1.8rem, 2.5vw, 3.0rem);
					}
					ol li{
						+li{
							margin-top: 15px;
						}
					}
				}
			}
		}
	}
	.l-companyStance,
	.l-companyProfessional{
		padding: 100px 30px 100px 30px;
	}
	.l-companyRecord{
		max-width: min(1440px, calc(100% - 60px));
		padding: 100px 0 100px 0;
		.l-companyRecord-text{
			margin-top: 60px;
			h3 {
				font-size: clamp(2.5rem, 6.0vw, 4.0rem);
			}
		}
		.l-companyRecord-item{
			margin-top: 60px;
			th,td{
				font-size: 1.6rem;
			}
		}
	}
	.l-companyGroup{
		padding: 100px 0 100px 0;
		> .wrap{
			max-width: min(1440px, calc(100% - 60px));
			.wrap{
				margin-top: 60px;
				flex-direction: column;
			}
		}
		.l-companyGroup-text{
			margin-top: 60px;
			h3 {
				font-size: clamp(2.5rem, 6.0vw, 4.0rem);
			}
		}
		.l-companyGroup-img{
			max-width: 800px;
			margin: 0 auto;
			img{
				vertical-align: top;
			}
		}
	}
	.l-companyOverview{
		padding: 100px 0 100px 0;
		> .wrap{
			max-width: min(1440px, calc(100% - 60px));
			.wrap{
				margin-top: 60px;
				flex-direction: column;
			}
		}
		.l-companyOverview-item{
			th,td{
				font-size: 1.6rem;
			}
		}
	}
	.l-newsArchive{
		.l-newsArchive-tit{
			max-width: min(1800px, calc(100% - 60px));
			font-size: clamp(2.0rem, 6.0vw, 5.0rem);
		}
		.l-newsArchive-list{
			max-width: min(1440px, calc(100% - 60px));
			margin: 50px auto 0;
			a{
				padding: 20px 80px 20px 0;
			}
			.tit{
				font-size: 1.6rem;
			}
			.arrow{
				right: 0;
			}
		}
	}
}
@media screen and (max-width: 767px),
screen and (orientation: landscape) and (max-height: 500px) {
	.l-companyPhilosophy{
		margin-top: 60px;
		padding: 100px 0 30px;
		background: var(--main-color01) url(./img/company_philosophy_bg.png) no-repeat top left / 150% auto;
		.wrap{
			margin: 100px 30px 0;
			.l-companyPhilosophy-item{
				width: 100%;
			}
		}
	}
	.l-companyStance,
	.l-companyProfessional{
		padding: 60px 30px;
		.wrap{
			.wrap{
				flex-direction: column;
			}
		}
		.l-common-img{
			width: 100%;
			img{
				width: 100%;
			}
		}
		.l-common-text{
			width: 100%;
			p{
				margin-top: 20px;
			}
		}
	}
	.l-companyRecord{
		padding: 60px 0;
		.l-companyRecord-text{
			margin-top: 40px;
			p{
				margin-top: 20px;
			}
			h4{
				margin-top: 40px;
			}
			ul{
				margin-top: 20px;
			}
			li + li{
				margin-top: 10px;
			}
		}
		.l-companyRecord-item{
			margin-top: 40px;
		}
	}
	.l-companyGroup{
		padding: 60px 0;
		.l-companyGroup-text {
			margin-top: 40px;
			h3 {
				font-size: clamp(2.5rem, 5.0vw, 4.0rem);
			}
			p{
				margin-top: 20px;
			}
		}
	}
	.l-companyOverview{
		padding: 60px 0;
		.l-companyOverview-item{
			margin-top: 40px;
		}
	}
	.l-newsArchive{
		.l-newsArchive-list{
			a{
				flex-wrap: wrap;
			}
			.date{
				width: 9em;
			}
			.termName {
				padding: 3px 15px 5px;
			}
			.tit{
				width: 100%;
				flex:none;
				margin-top: 15px;
			}
		}

	}
}
@media screen and (max-width: 599px) {
	.l-companyLead{
		max-width: min(1440px, calc(100% - 40px));
		.l-companyLead-text{
			p{
				margin-top: 15px;
			}
		}
	}
	.l-companyPhilosophy{
		background: var(--main-color01) url(./img/company_philosophy_bg.png) no-repeat top left / 250% auto;
		margin-top: 50px;
		padding: 50px 0 15px;
		.wrap{
			margin: 50px 15px 0;
			padding: 15px;
			gap: 15px;
			.l-companyPhilosophy-item{
				padding: 15px;
			}
		}
	}
    .l-companyStance, .l-companyProfessional {
        padding: 50px 20px 50px 20px;
		.wrap .wrap{
			margin-top: 15px;
		}
		.l-common-text{
			h4{
				margin-top: 20px;
			}
			p{
				margin-top: 15px;
			}
		}
    }
	.l-companyRecord{
		max-width: min(1440px, calc(100% - 40px));
		padding: 50px 0 50px 0;
		.l-companyRecord-text{
			margin-top: 30px;
			p {
				margin-top: 15px;
			}
			h4{
				margin-top: 30px;
			}
			ul{
				margin-top: 15px;
				li + li{
					margin-top: 5px;
				}
			}
		}
		.l-companyRecord-item{
			margin-top: 50px;
			th,td{
				display: block;
				padding: 15px;
			}
		}
	}
	.l-companyGroup{
		padding: 50px 0 50px 0;
		>.wrap{
			max-width: min(1440px, calc(100% - 40px));
			.wrap{
				margin-top: 30px;
			}
		}
		.l-companyGroup-text{
			margin-top: 30px;
			p{
				margin-top: 15px;
			}
		}
		.l-companyGroup-list{
			li{
				padding: 0 0 30px;
				margin-bottom: 30px;
			}
		}
	}
	.l-companyOverview{
		padding: 50px 0 50px 0;
		>.wrap{
			max-width: min(1440px, calc(100% - 40px));
			.wrap{
				margin-top: 30px;
			}
		}
		.l-companyOverview-item{
			margin-top: 30px;
			th,td{
				display: block;
				padding: 15px;
			}
		}
	}
	.l-newsArchive{
		.l-newsArchive-tit{
			max-width: min(1800px, calc(100% - 40px));
			padding: 0 0 15px 0;
		}
		.l-newsArchive-list{
			max-width: min(1440px, calc(100% - 40px));
			margin: 20px auto 0;
			.termWrap {
				width: 9em;
				padding-right: 1em;
			}
		}
	}
}

/*----------------------------------------------------
    #contact お問い合わせ
----------------------------------------------------*/

#contact{
	.wysiwyg h2{
		border-bottom: none;
	}
	.telBox{
		font-size: 3.0rem;
	}
}
.wpcf7{
	margin-top: 50px;
	p{
		margin: 0;
	}
	table{
		width: 100%;
		border: none;
	}
	th,td{
		padding: 40px 0;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: dotted 1px var(--black);
		background: none;
		font-size: 1.8rem;
		font-weight: 400;
		text-align: left;
		vertical-align: middle;
		.req{
			font-size: 2.3rem;
			color: var(--red);
			margin-left: 5px;
		}
	}
	th{
		width: 24%;
	}
	.inputWrap{
		display: flex;
		flex-wrap: wrap;
		gap: 30px 40px;
		.w1-1{
			width: 100%;
		}
		.w1-2{
			width: calc((100% - 40px)/2);
		}
		.w2-5{
			width: calc((100% - 40px)/5*2);
		}		
	}
	.subLabel{
		display: block;
		margin-bottom: 10px;
	}
	.wpcf7-not-valid-tip{
		font-size: 1.2rem;
	}
	.wpcf7-not-valid{
		border: solid 1px var(--red) !important;
	}
	input[type="text"],
	input[type="tel"],
	input[type="email"],
	input[type="url"],
	textarea,
	select{
		font-size: 1.8rem;
		font-weight: 400;
		padding: 20px 15px;
		width: 100%;
		border: solid 1px var(--gray);
		vertical-align:bottom;
		background-color: var(--white);
		color: var(--black);
	}
	textarea{
		height: 200px;
	}
	select{
		-webkit-appearance: none;
		appearance: none;
	}
	.wpcf7-form-control-wrap[data-name="your-pref"]{
		display: block;
		position: relative;
	}
	.wpcf7-form-control-wrap[data-name="your-pref"]::after{
		font-family: "Material Symbols Outlined";
		content: "\e5c5";
		font-weight: 300;
		font-size: 5.0rem;
		line-height: 1;
		position: absolute;
		right: 0px;
		top: 5px;
		pointer-events: none;
	}
	::placeholder {
		color: var(--lightgray);
	}
	.privacy-box{
		margin-top: 50px;
		padding: 5px;
		background: var(--sub-color03);
		.inner{
			height: 180px;
			overflow-y: auto;
			padding: 30px 40px;
			scrollbar-color: var(--gray) var(--ts) ;
			> :first-child{
				margin-block-start: 0;
			}
		}
		h3{
			font-size: 1.6rem;
			margin-top: 20px;
			font-weight: 400;
		}
		h3::before{
			content: '○';
			margin-right: 5px;
		}
		p{
			margin-top: 20px;
		}
		a{
			color: var(--main-color01);
			text-decoration: underline;
		}
		ul{
			margin-top: 20px;
		}
		li{
			list-style-type:disc;
			p{
				margin-top: 0;
			}
		}
	}
	.acceptance-box{
		font-weight: 400;
		display: flex;
		justify-content: center;
		margin-top: 50px;
		.wpcf7-list-item label{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;
		}
		input[type="checkbox"] {
			transform: scale(1.8);
			margin: 0;
		}
	}
	.submit-box{
		text-align: center;
		margin-top: 50px;
		input[type="submit"]{
			border: none;
			background:var(--black);
			color: var(--white);
			font-size: 1.8rem;
			padding: 25px 110px;
		}
		input[type="submit"]:disabled{
			background: var(--lightgray);
		}
	}
	.wpcf7-spinner{
		display: none;
		margin: 10px auto 0;
	}
	.submitting .wpcf7-spinner{
		display: block;
	}
}

@media screen and (max-width: 1024px) {
	#contact{
		.telBox span{
			font-size: 2.0rem;
			display: block;
			margin: 0 auto;
		}
		.wp-block-group.is-style-box-lightgreen {
			padding: 30px 20px !important;
			.has-body-1-font-size{
				font-size: 1.6rem !important;
			}
		}
	}
	.wpcf7{
		th,td{
			font-size: 1.6rem;
		}
		th{
			width: 31%;
		}
		.inputWrap{
			gap: 20px;
			.w1-2 {
				width: calc((100% - 20px) / 2);
			}
			.w2-5 {
				width: calc((100% - 20px) / 2);
			}
		}
	}
}
@media screen and (max-width: 767px) {
	.wpcf7{
		th,td{
			display: block;
			padding: 10px !important;
			width: 100%;
		}
		th{
			border-bottom: none;
			text-align: left !important;
			padding-top: 20px !important;
			padding-bottom: 5px !important;
		}
		td{
			padding-top: 0px !important;
			padding-bottom: 20px !important;
		}
		.subLabel{
			margin-bottom: 0;
		}
		.privacy-box{
			margin-top: 30px;
			.inner{
				padding: 15px 20px;
			}
		}
		.acceptance-box,
		.submit-box{
			margin-top: 30px;
		}
	}
}
@media screen and (max-width: 599px),
screen and (orientation: landscape) and (max-height: 500px) {
	#contact{
		.wysiwyg h2{
			font-size: 2.0rem;
			margin-bottom: 0;
			padding: 0;
		}
		.telBox span{
			font-size: 1.6rem;
		}
	}
}

/*----------------------------------------------------
    single シングル
----------------------------------------------------*/

.l-leadBox{
	width: 100%;
	max-width: min(1800px, calc(100% - 120px));
}
.l-leadBox-border{
	border-bottom: solid 1px var(--gray);
	margin-bottom: 110px;
}
.l-leadBox-wrap{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;	
	padding: 0 0 110px 0;
}
.l-leadBox-img{
	width: calc(100% * (600 / 1440));
	aspect-ratio: 4 / 3;
	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.l-leadBox-text{
	width: calc(100% * (760 / 1440));
	&.l-leadBox-noimg{
		width: 100% !important;
	}
	.l-leadBox-info{
		display: flex;
		gap: 30px;
		align-items: center;
		.date{
			font-size: 1.4rem;
			font-weight: 500;
			color: var(--gray);
		}
		.termWrap{
			overflow: hidden;
			text-overflow: ellipsis;
			span {
				font-size: 1.4rem;
				font-weight: 400;
				max-width: 100%;
				display: inline-block;
				line-height: 1;
				padding: 8px 15px 10px;
				background: var(--sub-color02);
				margin: 0 10px 10px 0;
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.l-leadBox-tit{
		font-size: 4.0rem;
		font-weight: 500;
	}
	.l-leadBox-subtit{
		font-size: 2.4rem;
		font-weight: 400;
		margin-top: 40px;
	}
	.l-leadBox-summary p{
		font-size: var(--normal-font-size);
		line-height: var(--normal-line-height);
		margin-top: 40px;
	}
}
.l-relation {
	margin-top: 170px !important;
	.l-relation-tit{
        max-width: min(1800px, calc(100% - 120px));
        margin: 0 auto;
        font-size: 5.0rem;
        color: var(--main-color01);
        font-family: var(--en-font-family);
        border-bottom: solid 1px var(--gray);
        padding: 0 0 30px 0;
        line-height: 1;
        letter-spacing: .2rem;
	}
	.l-relation-list{
		width: 100%;
		max-width: 1440px;
		margin: 70px auto 0;
		display: flex;
		gap: 60px;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 100px 60px;
		li{
			width: calc((100% - 120px) / 3);
		}
		a {
			display: block;
		}
	}
}
@media screen and (max-width: 1680px) {
	.l-relation{
		.l-relation-tit{
			max-width: 100%;
		}
	}
}
@media screen and (max-width: 1024px) {
	.l-leadBox{
		max-width: min(1800px, calc(100% - 60px));
	}
	.l-relation {
		.l-relation-tit{
			font-size: clamp(2.0rem, 7.0vw, 6.6rem);
		}
	}
}
@media screen and (max-width: 767px) {
	.l-leadBox{
		margin-bottom: 60px;
	}
	.l-leadBox-wrap{
		flex-direction: column-reverse;
		gap: 30px;
		padding: 0 0 60px 0;
	}
	.l-leadBox-img,
	.l-leadBox-text{
		width: 100%;
		.l-leadBox-tit{
			font-size: clamp( 2.0rem ,5.5vw ,4.0rem);
			line-height: 1.6;
		}
		.l-leadBox-subtit{
			font-size: clamp( 1.8rem ,5.0vw ,2.5rem);
			font-weight: 500;
		}
		.l-leadBox-subtit br{
			display: none;
		}
		.l-leadBox-subtit,
		.l-leadBox-summary p{
			margin-top: 20px;
		}
	}
	.l-relation {
		margin-top: 100px !important;
		.l-relation-list{
			margin: 50px auto 0;
			gap: 80px 40px;
			li{
				width: calc((100% - 40px) / 2);
			}
		}
	}
}
@media screen and (max-width: 599px),
screen and (orientation: landscape) and (max-height: 500px) {
	.l-leadBox{
		max-width: min(1800px, calc(100% - 40px));
		margin-bottom: 50px;
	}
	.l-leadBox-wrap{
		padding: 0 0 50px 0;
	}
	.l-leadBox-text{
		.l-leadBox-subtit,
		.l-leadBox-summary p{
			margin-top: 15px;
		}
	}
	.l-relation {
		margin-top: 100px !important;
		.l-relation-tit{
			padding: 0 0 10px 0;
		}
		.l-relation-list{
			margin: 30px auto 0;
			gap:50px;
			li{
				width: 100%;
			}
		}
	}
}

/*---- Solution ----*/
ol.solution-method-list{
	li{
		font-weight: var(--normal-font-weight);
		strong{
			font-weight: 400;
		}
		&::marker{
			font-weight: 400;
		}
		+li{
			margin-top: 20px;
		}
	}
}
#solution{
	figure.tbcut + figure{
		margin-top: 10px;
	}
	@media screen and (max-width: 1334px) {
		.is-scroll-on-mobile::before{
			content: "スクロールできます →";
			background-color: var(--black);
			color: var(--white);
			font-size: 1.4rem;
			line-height: 1;
			padding: 2px 5px;
			display: block;
			width: fit-content;
		}
		figure.is-scroll-on-mobile{
			overflow-x: scroll;
			white-space: nowrap;
			display: block;
			img{
				padding: 5px 0;
				width: auto;
				height: auto;
				max-width: unset;
				max-height: 400px;
			}
		}
	}
}
div.solution-ma-project-box{
    padding: 30px;
    text-align: center;
    font-size: 2.0rem;
	p{
		margin-top: 10px !important;
	}
}
div.solution-provide-box .wp-block-column{
	background: url(./img/bg-lightgreen01.png) repeat;
	padding: 30px;
}
div.solution-provide-line .wp-block-column{
	border:  solid 1px var(--silver);
	padding: 30px;
}
div.solution-provide-box .wp-block-column:has(p:empty) ,
div.solution-provide-line .wp-block-column:has(p:empty) {
   background: transparent !important;
   border: none !important;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
}
div.solution-provide-box + div.solution-provide-box,
div.solution-provide-line + div.solution-provide-line{
	margin-top: 0 !important;
}
div.solution-provide-box.wp-block-columns-is-layout-flex,
div.solution-provide-line.wp-block-columns-is-layout-flex{
	gap: 30px;
}
@media screen and (max-width: 767px) {
	div.solution-provide-box.wp-block-columns-is-layout-flex,
	div.solution-provide-line.wp-block-columns-is-layout-flex{
		gap: 20px;
	}
	div.solution-provide-box .wp-block-column{
		padding: 20px;
	}
	div.solution-provide-box .wp-block-list{
		margin-top: 10px;
	}
}

/*---- Teams ----*/
#team .l-leadBox-text {
    width: calc(100% * (840 / 1440));
	.l-leadBox-tit{
		display: flex;
		flex-direction: column-reverse;
		color: var(--main-color01);
	}
	.l-leadBox-subtit{
		font-size: 1.8rem;
	}
	.l-leadBox-summary p{
		font-size: 1.6rem;
	}
	.l-leadBox-team-solution{
		margin-top: 40px;
		h3{
			font-size: 1.6rem;
		}
		ul{
			padding: 0;
			a{
				color: var(--main-color01);
				text-decoration: underline;
				+a{
					margin-left: 15px;
				}
				&:hover{
					text-decoration: none;
				}
			}
		}
	}
}
#team .l-leadBox-img{
    width: calc(100% * (520 / 1440));
	height: 100%;
    aspect-ratio: 520 / 572;
	img{
		object-fit: cover;
		object-position: center top;
	}
}
@media screen and (max-width: 767px) {
	#team .l-leadBox-text {
		width: 100%;
		.l-leadBox-subtit{
			font-size: 1.8rem;
		}
		.l-leadBox-summary p{
			font-size: 1.6rem;
		}
		.l-leadBox-team-solution{
			margin-top: 40px;
			h3{
				font-size: 1.6rem;
			}
			ul{
				padding: 0;
				a{
					color: var(--main-color01);
					text-decoration: underline;
					+a{
						margin-left: 15px;
					}
					&:hover{
						text-decoration: none;
					}
				}
			}
		}
	}
	#team .l-leadBox-img{
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}
}

/*----------------------------------------------------
    archive アーカイブ
----------------------------------------------------*/

.l-taxlist{
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
	margin: 80px auto 0;
	padding: 0;
	width: 100%;
	max-width: min(1800px, calc(100% - 120px));
}
.l-taxlist li{
	display: inline-block;
	font-weight: 500;
	padding: 0 0 10px 0;
	position: relative;
}
.l-taxlist li.taxBtn{
	display: none;
}
.l-taxlist li a{
	transition: width 0.4s ease-out;
}
.l-taxlist li.current-cat a,
.l-taxlist li:hover a{
	color: var(--main-color01);
}
.l-taxlist li::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  display: block;
  width: 0;
  height: 4px;
  background: var(--main-color01);
  border-radius: 50vh;
  transition: width 0.4s ease-out;
}
.l-taxlist li:hover::after {
  width: 100%;
}
.l-taxlist li.current-cat::after {
  width: 100%;
}
.l-archiveList,
.l-relation{
	width: 100%;
	max-width: min(1800px, calc(100% - 120px));
	margin: 70px auto 0;
	ul{
		padding: 0;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 100px 60px;
	}
	.l-archiveListItem{
		width: calc((100% - 180px)/4);
		a{
			display: block;
		}
	}
	.l-archiveListItem-img{
		width: 100%;
		aspect-ratio: 4/3;
		background: var(--main-color01);
		overflow: hidden;
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: all 0.4s ease-out;
			background: var(--white);
		}
		img:hover{
			opacity: 0.7;
			transform: scale(1.1);
		}
	}
	.l-archiveListItem-info{
		margin-top: 30px;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		.l-archiveListItem-date{
			display: inline-block;
			color: var(--gray);
			font-size: 1.4rem;
			margin-right: 10px;
		}
		.l-archiveListItem-cat{
			font-size: 1.4rem;
			font-weight: 400;
			padding: 4px 12px;
			background-color: var(--sub-color02);
		}
	}
	.l-archiveListItem-title{
		margin: 15px 0 0;
		font-weight: 500;
		line-height: var(--normal-line-height);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
	}
	.l-archiveListItem-text {
		margin: 10px 0 0;
		line-height: var(--normal-line-height);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
	}
}

@media screen and (max-width: 1024px) {
	.l-taxlist{
		gap: 30px;
		margin: 60px auto 0;
		max-width: min(1800px, calc(100% - 60px));
	}
	.l-archiveList,
	.l-relation{
		max-width: min(1800px, calc(100% - 60px));
		margin: 50px auto 0;
		ul{
			gap: 80px 40px;
		}
		.l-archiveListItem{
			width: calc((100% - 80px)/3);
		}
		.l-archiveListItem-text {
			margin-top: 5px;
			font-size: 1.4rem;
			line-height: 1.5;
		}
	}

}
@media screen and (max-width: 767px) {
	.l-archiveList,
	.l-relation{
		ul{
			gap: 60px 30px;
		}
		.l-archiveListItem{
			width: calc((100% - 30px)/2);
		}
		.l-archiveListItem-info{
			margin-top: 15px;
		}
		.l-archiveListItem-title{
			margin-top: 10px;
		}
	}
}
@media screen and (max-width: 599px) {
	.l-taxlist{
		max-width: unset;
		margin: 0;
		padding: 0 15px 0 15px;
		background: var(--main-color01);
		gap: unset;
		li{
			padding: 0;
			a{
				padding: 5px 10px;
				display: block;
				background: var(--sub-color02);
			}
			width: 100%;
			&::after{
				content: none;
			}
			&.current-cat{
				opacity: 1 !important;
				height: 39px !important;
				margin-bottom: 15px;
			}
			&.current-cat.cat-all{
				opacity: 0 !important;
				height: 0 !important;
				margin-bottom: 0;
			}
			&.current-cat a{
				background: var(--black);
				color: var(--white);
			}
			&.taxBtn{
				display: block;
				color: var(--white);
				padding: 10px 0;
				position: relative;
				&::before{
					content: "▼";
					position: absolute;
					right: 10px;
					transform: rotate(0deg);
					transition: all 0.4s ease-out;
				}
			}
			&.cat-item{
				height: 0;
				opacity: 0;
				overflow: hidden;
				transition: all 0.4s ease-out;
			}
		}
		&.active{
			li.taxBtn::before{
				transform: rotate(180deg);
			}
			li.cat-item,
			li.current-cat.cat-all{
				opacity: 1 !important;
				height: 39px !important;
				margin-bottom: 1px;
				&:last-child{
					margin-bottom: 15px;
				}
			}
		}
	}
	.l-archiveList,
	.l-relation{
		max-width: min(1800px, calc(100% - 40px));
		ul{
			gap: 50px;
		}
		.l-archiveListItem{
			width: 100%;
		}
		.l-archiveListItem-info{
			margin-top: 15px;
		}
		.l-archiveListItem-title{
			margin-top: 10px;
		}
	}
}

/*---- Solution ----*/
#solution .l-archiveListItem{
	width: calc((100% - 120px)/3);
}
#solution .l-archiveListItem-title{
	font-size: 1.8rem;
	color: var(--main-color01);
	font-weight: 500;
	-webkit-line-clamp: 1;
}
#solution .l-archiveListItem-text {
	-webkit-line-clamp: 2;
	br{
		display: none;
	}
}
@media screen and (max-width: 1024px) {
	#solution .l-archiveListItem{
		width: calc((100% - 80px)/3);
	}
	#solution .l-archiveListItem-title{
		font-size: 1.5rem;
		line-height: 1.5;
	}
}
@media screen and (max-width: 767px) {
	#solution .l-archiveListItem{
		width: calc((100% - 30px)/2);
	}
}
@media screen and (max-width: 599px) {
	#solution .l-archiveListItem{
		width: 100%;
	}
}



/*---- Case ----*/
#case .l-archiveListItem-title{
	font-size: 1.7rem;
	color: var(--main-color01);
	-webkit-line-clamp: 2;
}
@media screen and (max-width: 1024px) {
	#case .l-archiveListItem-title{
		font-size: 1.5rem;
		line-height: 1.5;
	}
}

/*---- Team ----*/

#team{
	.l-archiveListItem-img{
		max-width: 300px;
		aspect-ratio: 300 / 330;
		img{
			background: var(--white);
			object-position: center top;
		}
	}
	.l-archiveListItem-title{
		font-size: 1.8rem;
		color: var(--main-color01);
	}
	.l-archiveListItem-subtit{
		margin: 10px 0 0;
		line-height: 1.6;
		font-weight: 500;
		/*display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;*/
	}
	.l-archiveListItem-text{
		-webkit-line-clamp: 4;
	}
	@media screen and (max-width: 599px) {
		.l-archiveListItem-img{
			max-width: 100%;
			margin: 0 auto;
		}
	}
	/*
	.l-archiveListItem{
		*{
			color: #118841 !important;
		}
		.l-archiveListItem-text{
			font-weight: 400;
		}
	}
		*/
	.l-leadBox-text{
		color: #118841 !important;
		font-weight: 400;
		*{
			color: #118841 !important;
		}
	}
}