@charset "utf-8";

/* -------------------------------------------------------- fv */
#fv .kv{ width: 70%; height: auto; }

/* -------------------------------------------------------- hatarakigai */
#hatarakigai{ padding: 0 0 30px; }
#hatarakigai .txt-content .txt{ margin-bottom: 50px; text-align: center; }
#hatarakigai .txt-content .txt strong{ font-size: clamp(20px,1.5vw,22px); }
#hatarakigai .txt02{ margin: 0; padding: 60px 0; font-size: 18px; text-align: center; line-height: 2; }
#hatarakigai .txt02 strong{ color: #000; }
#hatarakigai .txt03{ padding: 50px 0 0; text-align: left; }

.hatarakigai{ background: #F4F4F4; padding: 60px 20px 30px; }

.hatarakigai01 ul { display: flex; justify-content: center; align-items: flex-start; gap: 3%; flex-wrap: wrap; margin: 0; }
.hatarakigai01 li { text-align: center; }
.hatarakigai01 li.operator{ padding-top: 50px; }

.hatarakigai02{ padding: 60px 3% 30px; }

.logic { width: 190px; height: 190px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-weight: bold; font-size: 16px; line-height: 1.4; text-align: center; margin: 0 auto 30px; padding: 20px; }
.logic p{ margin: 0; font-size: 19px; }
.logic-main { background: var(--main-color); box-shadow: 0 0 0 13px #F7D5D8; color: #fff; font-size: 18px; }
.logic-ball { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; font-size: 15px; padding: 20px; }
.logic-white { background: #fff; box-shadow: 0 0 0 13px #FAFAFA; }
.logic-gray { background: #DCE2E0; box-shadow: 0 0 0 13px #EBEFEE; }

.logic-equal, .logic-plus { font-size: 40px; font-weight: 300; margin: 0; padding: 0; }

.logic-text p { font-size: 17px; margin-bottom: 10px; }
.logic-text p:first-of-type{ font-size: 14px; }
.logic-text p strong{ color: #000; }
.logic-text p.flow{ color: #9F9F9F; }
.logic-text strong { font-size: 17px; }

.label { padding: 12px 18px; color: #fff; font-size: 17px; font-weight: bold; }
.label-red { background: var(--main-color); }

.hatarakigai-theory { display: flex; justify-content: center; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.theory-right { width: 45%; }
.theory-left { width: 50%; max-width: 530px; background: #fff; padding: 70px 30px 30px; position: relative; }
.theory-title { font-size: clamp(13px,1.3vw,18px); font-weight: bold; background: #000; color: #fff; display: inline-block; padding: 10px 25px; margin-bottom: 30px; position: absolute; top: -23px; left: 50%; transition: translate; transform: translate(-50%,0); width: 80%; text-align: center; }

.factor { margin-bottom: 70px; }
.factor:last-of-type{ margin: 0; }
.factor-type { font-weight: bold; font-size: 22px; margin-bottom: 10px; }
.factor-type.red { color: #FE1828; }
.factor-desc { font-size: 17px; margin-bottom: 15px; }
.factor-items { font-size: 17px; background: #f0f0f0; margin: 0; padding: 12px; line-height: 1.8; font-weight: bold; }

.relation-label { font-size: 23px; font-weight: bold; margin-bottom: 10px; text-align: center; }


/* -------------------------------------------------------- company */
#company{ background: var(--bg-color); padding: 100px 0 70px; }
#company .s-ttl{ margin-bottom: 60px; }
#company .txt02{ margin: 0; padding: 70px 0 0; font-size: 22px; text-align: center; }

#company .flex-left .txt { text-align: left; margin: 0; }
#company .flex-left .txt strong { font-size: clamp(16px,2vw,22px); }
#company .flex { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
#company .flex-left { flex: 1; min-width: 300px; }
#company .flex-right { flex: 1; min-width: 300px; text-align: center; }
#company .flex-right img{ mix-blend-mode: multiply; }
#company .relation-label { font-size: clamp(16px,2vw,22px); font-weight: bold; margin-bottom: 30px; text-align: center; }

.company-list { list-style: none; padding: 0; margin: 35px 0 0; display: flex; flex-direction: column; gap: 25px; }
.company-list li { background: #fff; border-radius: 10px; padding: 25px 30px; }
.company-list-ttl { font-size: clamp(16px,2vw,22px); font-weight: bold; margin-bottom: 0; color: #000; }



/* -------------------------------------------------------- effective */
#effective{ background: #fff; }


/* -------------------------------------------------------- library */
#library { background: #fff; padding: 0 0 110px; }

.library-list { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin: 0 0 55px; padding: 0; list-style: none; }
.library-list li { box-shadow: 0 0 25px rgba(0,0,0,0.1); width: calc(100% / 3 - 30px); /* height: 510px; */ box-sizing: border-box; transition: box-shadow 0.3s ease; }
.library-list li:hover { box-shadow: 0 0 35px rgba(0,0,0,0.25); }
.library-list li a { text-decoration: none; color: #000; display: block; height: 100%; }
.library-list img{ width: 100%; height: auto; }

.library-list .text-content{ padding: 20px; background: #fff; }
.library-list .data { display: flex; align-items: center; gap: 15px; font-size: 12px; margin-bottom: 15px; }
.library-list .cat { background: #00c6da; color: #fff; padding: 5px 20px; font-size: 12px; }
.library-list .day { color: #555; font-size: 13px; }
.library-list .txt{ font-size: 14px; }
.library-list-ttl { font-size: 16px; font-weight: 500; line-height: 1.6; margin-bottom: 12px; font-family: 'Noto-Sans-JP-Medium'; }




/* ------------------------------------- mobile --------------------------------------- */
@media only screen and (max-width: 960px) {
	
/* -------------------------------------------------------- fv */
	#fv::before{ height: 94%; }
	#fv .kv { position: initial; width: 100vw; max-width: initial; margin: 0 calc(50% - 50vw); }

/* -------------------------------------------------------- hatarakigai */
	#hatarakigai { padding: 0 0 30px; }
	#hatarakigai .txt-content .txt { margin-bottom: 30px; text-align: left; }
	#hatarakigai .txt-content .txt strong { font-size: 17px; }
	#hatarakigai .txt02 { padding: 40px 0; font-size: 15px; text-align: left; }
	#hatarakigai .txt03 { margin: 0; padding: 40px 0 0; font-size: 14px; }

	.hatarakigai { padding: 40px 5% 20px; }
	.hatarakigai01 ul{ gap: 0; justify-content: flex-start; align-items: center; }
	.hatarakigai01 li.parent{ width: 80%; margin: 0 0 40px; }
	.hatarakigai01 li.parent .logic{ margin: 0; }
	.hatarakigai01 li.child{ width: 45%; }
	.hatarakigai01 li.operator { padding-top: 0; }

	.logic { width: 200px; height: 200px; font-size: 15px; padding: 15px; margin: 0 auto 20px; }
	.logic-white { width: 130px; height: 130px; box-shadow: 0 0 0 8px #FAFAFA; }
	.logic-gray { width: 130px; height: 130px; box-shadow: 0 0 0 8px #EBEFEE; }
	
	.logic p { font-size: 14px; }
	.logic-main { font-size: 16px; }
	.logic-text p { font-size: 12px; margin-bottom: 8px; }
	.logic-text p:first-of-type { font-size: 11px; }
	.logic-text strong { font-size: 10px; }
	.label { padding: 8px 15px; font-size: 12px; }
	
	.logic-equal, .logic-plus{ font-size: 30px; }

	.hatarakigai02 { padding: 40px 5% 20px; }
	.hatarakigai-theory { flex-direction: column; gap: 30px; }
	.theory-left { width: 100%; max-width: 100%; padding: 65px 20px 30px; }
	.theory-title { font-size: 17px; width: 90%; padding: 8px 10px; }
	.factor { margin-bottom: 40px; }
	.factor-type { font-size: 20px; }
	.factor-desc, .factor-items { font-size: 15px; }
	.theory-right { width: 100%; margin: 0 auto; text-align: center; }
	.theory-right img { max-width: 100%; height: auto; }
	
	.relation-label{ font-size: 20px; }
	

/* -------------------------------------------------------- company */
	#company{ padding:50px 0;}
	#company .s-ttl{ margin-bottom: 30px; }
	#company .flex{ flex-direction: column-reverse; gap: 10px; }
	#company .flex-left .txt strong { font-size: 17px; }
	
	#company .txt{font-size:14px;margin-bottom:25px;text-align:left;}
	#company .relation-label{font-size:15px;}
	#company img{width:100%;height:auto;}
	
	#company .txt02{ margin: 0; padding: 30px 0 0; }
	#company .txt02 strong{ font-size: 17px;}
	
	.company-list{ margin: 25px 0 0; gap: 15px; }
	.company-list li{padding:20px 15px;}
	.company-list-ttl{font-size:17px;margin-bottom:10px;}


/* -------------------------------------------------------- library */
	#library{ padding: 40px 0; }
	#library .s-ttl{ margin-bottom: 30px; }
	
	.library-list { flex-direction: column; gap: 20px; }
	.library-list li { width: 100%; height: initial; }
	.library-list-ttl { font-size: 15px; }
	.library-list .txt { font-size: 13px; }



}