@charset "UTF-8";
/* CSS Document */

/*==============================*/
/* リンク設定 */
/*==============================*/
#philosophy,
#message,
#member{
	scroll-margin-top: 120px;
}

/*==============================*/
/* Philosophy */
/*==============================*/
div.philosophy{
	display: flex;
	flex-direction: row-reverse; -webkit-flex-direction: row-reverse;
	align-items: center;
	gap: 56px;
	margin-bottom: 72px;
}

	 /* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.philosophy{
			align-items: flex-start;
			gap: 32px;
			margin-bottom: 64px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.philosophy{
			flex-direction: column-reverse;
			gap: 24px;
			margin-bottom: 56px;
		}
	}


/*---------------------------------
   img
---------------------------------*/
div.philosophy figure{
	flex: 1 1 45%;
}
div.philosophy figure img{
	border-radius: 16px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.philosophy figure{
			width: 100%;
			flex: none;
		}
		div.philosophy figure img{
			object-fit: cover;
			width: 100%;
			height: 200px;
			aspect-ratio: 4 / 2;
			border-radius: 12px;
		}
	}


/*---------------------------------
   Content
---------------------------------*/
div.philosophy div{
	position: relative;
	flex: 1 1 55%;
	min-width: 0;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.philosophy div{
			width: 100%;
			flex: none;
		}
	}

/*-- 
------------------------- */
div.philosophy div h3{
	margin-bottom: 25px;
	color: #000;
	font-size: 29px;
	font-weight: 700;
	line-height: 1.414em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.philosophy div h3{
			margin-bottom: 16px;
			font-size: 24px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.philosophy div h3{
			margin-bottom: 16px;
			font-size: 23px;
			line-height: 1.5em;
		}
	}

/*-- Text
------------------------- */
div.philosophy div p{
	font-size: 15px;
	line-height: 1.618em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.philosophy div p{
			font-size: 14px;
			line-height: 1.618em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.philosophy div p{
			font-size: 14px;
			line-height: 1.7em;
		}
	}



/*==============================*/
/*  */
/*==============================*/

/*-- 
------------------------- */
div.philosophyBox ul{
	display: flex;
	gap: 56px;
	margin-bottom: 40px;
}
div.philosophyBox ul li{
	position: relative;
	width: calc(calc(100% - 56px * 2) / 3);
	padding: 23px 0 19px 0;
	background: #FFFFFF;
	box-shadow: 0px 0px 10px 0px rgba(153,153,153,0.4);
	border-radius: 5px;
	color: #000;
	font-size: 27px;
	font-weight: 700;
	font-family: "Inter", sans-serif;
	line-height: 1.3em;
	letter-spacing: 0.03em;
	text-align: center;
}
div.philosophyBox ul li:not(:last-child)::before{
	position: absolute; bottom: 50%; right: -36px;
	content: "×";
	color: #46403B;
	font-size: 28px;
	font-weight: 300;
	transform: translateY(50%);
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.philosophyBox ul{
			gap: 44px;
			margin-bottom: 40px;
		}
		div.philosophyBox ul li{
			width: calc(calc(100% - 44px * 2) / 3);
			padding: 16px 0 12px 0;
			font-size: 24px;
		}
		div.philosophyBox ul li:not(:last-child)::before{
			position: absolute; bottom: 50%; right: -33px;
			font-size: 24px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.philosophyBox ul{
			flex-direction: column;
			gap: 36px;
			margin-bottom: 40px;
		}
		div.philosophyBox ul li{
			width: 100%;
			padding: 20px 0 16px 0;
			font-size: 24px;
		}
		div.philosophyBox ul li:not(:last-child)::before{
			position: absolute; bottom: -34px; right: 50%;
			font-size: 24px;
			transform: translateY(0%);
			transform: translateX(50%);
		}
	}


/*-- 
------------------------- */
div.philosophyBox p{
	margin-bottom: 40px;
	color: #000;
	text-align: center;
	font-size: 17px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
	}

/*-- 
------------------------- */
div.philosophyBox dl{
	display: flex;
	align-items: center;
	padding: 56px 64px;
	background: #F5F7F8 url("/common/img/share/bg-texture.webp");
	border-radius: 5px;
	gap: 48px;
}
div.philosophyBox dl dt{
	width: 288px;
	color: #000;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3em;
}
div.philosophyBox dl dd{
	flex: 1;
	font-size: 15px;
	line-height: 1.618em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.philosophyBox dl{
			padding: 44px 56px;
			gap: 28px;
		}
		div.philosophyBox dl dt{
			width: 188px;
			font-size: 20px;
		}
		div.philosophyBox dl dd{
			font-size: 14px;
			line-height: 1.7em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.philosophyBox dl{
			flex-direction: column;
			padding: 32px 24px;
			gap: 0px;
		}
		div.philosophyBox dl dt{
			width: 100%;
			margin-bottom: 14px;
			font-size: 20px;
			text-align: center;
		}
		div.philosophyBox dl dd{
			flex: none;
			font-size: 14px;
			line-height: 1.7em;
		}
	}


/*==============================*/
/* Message */
/*==============================*/
div.message{
	display: flex;
	gap: 60px;
}

	 /* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.message{
			align-items: flex-start;
			gap: 32px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.message{
			flex-direction: column-reverse;
			gap: 28px;
		}
	}


/*---------------------------------
   img
---------------------------------*/
div.message figure{
	flex: 1 1 45%;
}
div.message figure img{
	border-radius: 16px;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.message figure{
			width: 100%;
			flex: none;
		}
		div.message figure img{
			object-fit: cover;
			width: 100%;
			height: 200px;
			aspect-ratio: 4 / 2;
			border-radius: 12px;
		}
	}


/*---------------------------------
   Content
---------------------------------*/
div.message div{
	position: relative;
	flex: 1 1 55%;
	min-width: 0;
	padding-top: 16px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.message div{
			width: 100%;
			flex: none;
			padding-top: 0px;
		}
	}

/*-- 
------------------------- */
div.message div h3{
	margin-bottom: 25px;
	color: #000;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.414em;
}
div.message div h3 span{
	display: inline-block;
	color:  #14BBC7;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.48em;
	vertical-align: baseline;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.message div h3{
			font-size: 26px;
			line-height: 1.414em;
		}
		div.message div h3 span{
			font-size: 24px;
			line-height: 1.414em;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.message div h3{
			margin-bottom: 16px;
			font-size: 23px;
			line-height: 1.414em;
		}
		div.message div h3 span{
			font-size: 23px;
			line-height: 1.414em;
		}
	}

/*-- Text
------------------------- */
div.message div p{
	font-size: 15px;
	line-height: 1.68em;
}
div.message div p.presidentName{
	color: #000;
	text-align: right;
	font-size: 20px;
	font-weight: 600;
}
div.message div p.presidentName small{
	display: block;
	font-size: 14px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.message div p{
			font-size: 14px;
			line-height: 1.7em;
		}
		div.message div p.presidentName{
			font-size: 19px;
			font-weight: 600;
		}
	}



/*==============================*/
/* Member */
/*==============================*/
div.member{
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
div.member dl{
	display: flex;
	flex-direction: column;
	width: calc(calc(100% - 24px * 3) / 4);
}
div.member dl dt{
	order: 2;
	color: #000;
	font-weight: 600;
	font-size: 21px;
	font-family: "Inter", sans-serif;
	text-align: center;
	line-height: 1.3em;
}
div.member dl dt small{
	display: block;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.3em;
}
div.member dl dd{
	order: 1;
	margin-bottom: 16px;
}

div.member dl dd img{ border-radius: 10px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.member{
			gap: 24px;
		}
		div.member dl{
			width: calc(calc(100% - 24px * 2) / 3);
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.member{ gap: 16px;}
		div.member dl{ width: calc(calc(100% - 16px * 1) / 2);}
	}