@charset "utf-8";
/*--------------------------------------------------

	MAIN VISUAL

--------------------------------------------------*/
#mv .main_container ul {
	display: grid;
	grid-template-columns: 50% 1fr;
  	grid-template-areas:
	  "A A B C"
	  "D D E F"
	  "G G E H";
}
#mv .main_container ul li:nth-child(1) {grid-area: A;}
#mv .main_container ul li:nth-child(2) {grid-area: B;}
#mv .main_container ul li:nth-child(3) {grid-area: C;}
#mv .main_container ul li:nth-child(4) {
	grid-area: D;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: 100%;
}
#mv .main_container ul li:nth-child(4) .content {padding-left: 5vw;}
#mv .main_container ul li:nth-child(4) .content h1 {
	margin-bottom: 3.5%;
	font-weight: 700;
	font-size: 3vw;
	line-height: 1.3;
	letter-spacing: .1em;
}
#mv .main_container ul li:nth-child(4) .content p {
	display: flex;
	align-items: center;
	color: #015FAB;
	font-weight: 700;
	font-size: 1.3vw;
	letter-spacing: .1em;
}
#mv .main_container ul li:nth-child(4) .content p img {width: 16vw;margin-right: 4%;}
#mv .main_container ul li:nth-child(5) {grid-area: E;}
#mv .main_container ul li:nth-child(6) {grid-area: F;}
#mv .main_container ul li:nth-child(7) {display: flex;grid-area: G;}
#mv .main_container ul li:nth-child(7) img {width: 50%;}
#mv .main_container ul li:nth-child(8) {grid-area: H;}
#mv .main_container ul li:nth-child(9) {grid-area: I;}
#mv .about_container {
	padding-top: calc(40px + 60 * ((100vw - 375px) / 1605));
	padding-bottom: calc(40px + 60 * ((100vw - 375px) / 1605));
	background: linear-gradient(90deg, #B7E4FD 10%, #D6E9FA, #E0EDFE, #D6E9FA, #B7E4FD 90% 100%);
}
#mv .about_container .content p {
	margin-bottom: calc(30px + 20 * ((100vw - 375px) / 1605));
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
	line-height: 2;
	letter-spacing: .05em;
	text-align: center;
}
#mv .about_container .content p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 768px ) {
	#mv .main_container ul {
		display: grid;
		grid-template-columns: auto 33.333333%;
		  grid-template-areas:
		  "B A A"
		  "D D C"
		  "F H E"
		  "G G E";
	}
	#mv .main_container ul li:nth-child(4) .content {padding-left: 3vw;}
	#mv .main_container ul li:nth-child(4) .content h1 {margin-bottom: 3%;font-size: 4.5vw;line-height: 1.2;}
	#mv .main_container ul li:nth-child(4) .content p {font-size: 2.4vw;}
	#mv .main_container ul li:nth-child(4) .content p img {width: 29vw;}
}
/*--------------------------------------------------

	代表メッセージ

--------------------------------------------------*/
#message {position: relative;overflow: hidden;}
#message .container figure {position: absolute;right: 0;z-index: 1;width: 37%;}
#message .container figure figcaption {
	position: absolute;
	bottom: 10%;
	left: 0;
	padding: .4em 2.2vw;
	background: linear-gradient(90deg, #9BC6FF, #fff);
	font-size: 1vw;
	letter-spacing: .1em;
}
#message .container .content {width: 60%;}
#message .container .content h3 {margin-bottom: calc(10px + 10 * ((100vw - 375px) / 1605));}
#message .container .content .wrap {margin-bottom: calc(40px + 30 * ((100vw - 375px) / 1605));}
#message .container .content .wrap:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 768px ) {
	#message .container figure {position: relative;width: 100%;margin-bottom: 30px;}
	#message .container figure figcaption {padding: .4em 6vw;font-size: 3vw;}
	#message .container .content {width: 100%;}
}
/*--------------------------------------------------

	事業内容

--------------------------------------------------*/
#business .inner2 {
	width: 95%;
	max-width: calc(1540px + 2 * ((100vw - 375px) / 1605));
	margin-left: auto;
}
#business ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: calc(30px + 30 * ((100vw - 375px) / 1605));
}
#business ul li:nth-child(odd) {background: #CCE2FF;}
#business ul li:nth-child(even) {background: #EBEBEB;}
#business ul li .content {
	padding: 20px;
	padding-top: calc(20px + 30 * ((100vw - 375px) / 1605));
	padding-bottom: calc(20px + 20 * ((100vw - 375px) / 1605));
}
#business ul li:nth-child(odd) .content {background: #CCE2FF;}
#business ul li:nth-child(even) .content {background: #EBEBEB;}
#business ul li .content h3 {
	margin-bottom: calc(20px + 40 * ((100vw - 375px) / 1605));
	font-weight: 700;
	font-size: calc(16px + 6 * ((100vw - 375px) / 1605));
	letter-spacing: .15em;
}
#business ul li .content p {font-size: calc(12px + 1 * ((100vw - 375px) / 1605));}
#business .link_container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(200px + 120 * ((100vw - 375px) / 1605));
	margin: 0 auto;
	padding: calc(10px + 10 * ((100vw - 375px) / 1605));
	padding-right: calc(20px + 10 * ((100vw - 375px) / 1605));
	padding-left: calc(20px + 10 * ((100vw - 375px) / 1605));
	background: #006CFF;
	color: #fff;
}
#business .link_container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: url(../img/business/bg01.webp) no-repeat center / cover;
	transition: opacity .3s ease-in-out;
}
#business .link_container:hover::before {opacity: 1;}
#business .link_container::after {
	content: '';
	position: absolute;
	top: 10px;
	right: 10px;
	width: calc(18px + 2 * ((100vw - 375px) / 1605));
	height: calc(18px + 2 * ((100vw - 375px) / 1605));
	background: url(../img/business/Icon_window.svg) no-repeat top right / 100%;
	transition: .3s;
}
#business .link_container:hover::after {background-size: 80%;}
#business .link_container a {position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;}
#business .link_container h4 {
	margin-bottom: 5px;
	font-weight: 700;
	font-size: calc(15px + 3 * ((100vw - 375px) / 1605));
	letter-spacing: .15em;
}
#business .link_container p {font-size: calc(10px + 2 * ((100vw - 375px) / 1605));}
@media only screen and ( max-width : 1024px ) {
	#business .inner2 {width: 90%;margin: 0 auto;}
	#business ul {grid-template-columns: repeat(2, 1fr);}
	#business ul li figure img{
		height: 200px;
		object-position: center;
		object-fit: cover;
	}
	#business ul li .content {position: relative;z-index: 1;}
}
#business .link_container p {font-size: calc(10px + 2 * ((100vw - 375px) / 1605));}
@media only screen and ( max-width : 500px ) {
	#business ul {grid-template-columns: repeat(1, 1fr);}
}
/*--------------------------------------------------

	SDGs達成に向けた経営方針

--------------------------------------------------*/
#sdgs .subttl_container {margin-bottom: calc(40px + 10 * ((100vw - 375px) / 1605));}
#sdgs .subttl_container dl {display: flex;margin-bottom: calc(20px + 15 * ((100vw - 375px) / 1605));background: #F2F7FF;}
#sdgs .subttl_container dl dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	padding: 15px;
	background: #006CFF;
	color: #fff;
	font-weight: 700;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
	letter-spacing: .15em;
	text-align: center;
}
#sdgs .subttl_container dl dd {padding: 18px 30px;letter-spacing: .05em;}
#sdgs .subttl_container p {font-weight: 400;}
@media only screen and ( max-width : 1024px ) {
	#sdgs .pricelist {overflow-x: scroll;}
	#sdgs .pricelist figure {width: 800px;}
}
/*--------------------------------------------------

	福利厚生

--------------------------------------------------*/
#welfare .container h3 {
	margin-bottom: 15px;
	font-weight: 700;
	font-size: calc(16px + 4 * ((100vw - 375px) / 1605));
}
#welfare .container ul {position: relative;z-index: 1;}
#welfare .container ul li {
	position: relative;
	margin-bottom: 5px;
	padding-left: calc(18px + 7 * ((100vw - 375px) / 1605));
}
#welfare .container ul li:last-child {margin-bottom: 0;}
#welfare .container ul li::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: calc(11px + 3 * ((100vw - 375px) / 1605));
	height: calc(11px + 3 * ((100vw - 375px) / 1605));
	border-radius: 50%;
	background: #006CFF;
}
#welfare .container ul li span {font-size: calc(11px + 3 * ((100vw - 375px) / 1605));}
#welfare .container .contentL {width: 55%;padding: calc(15px + 15 * ((100vw - 375px) / 1605));background: #F2F7FF;}
#welfare .container .contentL figure {max-width: calc(37px + 38 * ((100vw - 375px) / 1605));margin: -1em 0 0 auto;}
#welfare .container .contentR {width: 43%;}
#welfare .container .contentR .wrap {
	margin-bottom: calc(5px + 25 * ((100vw - 375px) / 1605));
	padding: calc(15px + 15 * ((100vw - 375px) / 1605));
}
#welfare .container .contentR .wrap:nth-child(1) {
	background: #F2F7FF url(../img/welfare/img02.svg) no-repeat 88% 50% / calc(47px + 20 * ((100vw - 375px) / 1605));
}
#welfare .container .contentR .wrap:nth-child(2) {
	background: #F2F7FF url(../img/welfare/img03.svg) no-repeat 90% 50% / calc(66px + 30 * ((100vw - 375px) / 1605));
}
#welfare .container .contentR .wrap:nth-child(3) {
	background: #F2F7FF url(../img/welfare/img04.svg) no-repeat 90% 50% / calc(66px + 30 * ((100vw - 375px) / 1605));
}
#welfare .container .contentR .wrap:last-child {margin-bottom: 0;}
#welfare .container .contentR .wrap ul {width: 75%;}
@media only screen and ( max-width : 768px ) {
	#welfare .container .contentL {width: 100%;margin-bottom: 10px;}
	#welfare .container .contentL figure {margin-right: 9%;}
	#welfare .container .contentR {width: 100%;}
	#welfare .container .contentR .wrap {margin-bottom: 10px;}
}
/*--------------------------------------------------

	数字で見る中部物産貿易

--------------------------------------------------*/
#infographics {background: url(../img/repeat_bg.webp) repeat center / contain;}
#infographics ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(10px + 20 * ((100vw - 375px) / 1605));
}
#infographics ul li {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: calc(10px + 10 * ((100vw - 375px) / 1605));
	padding-top: calc(20px + 20 * ((100vw - 375px) / 1605));
	padding-bottom: calc(20px + 20 * ((100vw - 375px) / 1605));
	background: #F2F7FF;
}
#infographics ul li:nth-child(6) {background: #F2F7FF url(../img/infographics/data06.svg) no-repeat 50% 18% / 60%;}
#infographics ul li .content figure {width: 75%;margin: 0 auto calc(20px + 10 * ((100vw - 375px) / 1605));}
#infographics ul li:nth-child(5) .content figure {width: 75%;margin: 0 auto calc(0px + 10 * ((100vw - 375px) / 1605));}
#infographics ul li:nth-child(1) .content figure {width: 95%;}
#infographics ul li:nth-child(4) .content figure {width: 95%;}
#infographics ul li:nth-child(7) .content figure {width: 95%;}
#infographics ul li .content .wrap.flexbox {align-items: baseline;justify-content: center;gap: 0 3px;}
#infographics ul li:nth-child(6) .content .wrap {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));}
#infographics ul li .content p.count {
	color: #006CFF;
	font-weight: 700;
	font-size: calc(16px + 14 * ((100vw - 375px) / 1605));
	text-align: center;
}
#infographics ul li .content p.count span.counter {font-weight: 600;font-size: 2em;}
#infographics ul li .content p.count span.counter.min {font-size: 1.5em;}
#infographics ul li:nth-child(6) .content p.count {margin-bottom: 5px;color: #002B65;}
#infographics ul li:nth-child(6) .content p.count span.nocount {font-size: 1.2em;}
#infographics ul li:nth-child(6) .content p.count span.counter {color: #006CFF;}
#infographics ul li .content p.txt {color: #006CFF;font-size: calc(12px + 4 * ((100vw - 375px) / 1605));text-align: center;}
#infographics ul li:nth-child(5) .content p.txt {line-height: 1.3;}
#infographics ul li .content h3 {
	color: #002B65;
	font-weight: 700;
	font-size: calc(15px + 5 * ((100vw - 375px) / 1605));
	letter-spacing: .2em;
	text-align: center;
}
@media only screen and ( max-width : 1024px ) {
	#infographics ul {grid-template-columns: repeat(2, 1fr);}
	#infographics ul li:nth-child(6) {background-size: 33%;}
}
/*--------------------------------------------------

	募集要項

--------------------------------------------------*/
#application h2.title {text-align: center;}
.ChangeElem_Btn_Content {
	display: flex;
	justify-content: center;
	gap: 60px;
	margin-bottom: 60px;
}
#application p.taC {text-align: center;}
.ChangeElem_Btn_Content button {
	position: relative;
	width: 100%;
	max-width: 242px;
	padding: 1em 0;
	border: 1px solid #ccc;
	background: #fff;
	color: #888;
	font-weight: 700;
	font-size: calc(14px + 6 * ((100vw - 375px) / 1605));
	text-align: center;
	letter-spacing: .15em;
	transition: .3s;
}
.ChangeElem_Btn_Content button.is-active {border-color: #F2F7FF;background: #F2F7FF;color: #111;}
.ChangeElem_Btn_Content button.is-active::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top: 30px solid #F2F7FF;
	border-right: 12.5px solid transparent;
	border-left: 12.5px solid transparent;
}
#application table tr {border-bottom: 1.5px solid #BABABA;}
#application table tr:last-child {border-bottom: 0;}
#application table tr th {position: relative;width: 150px;padding: 20px 0;vertical-align: top;}
#application table tr:last-child th {padding-bottom: 0;}
#application table tr th::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1.5px;
	background: #006CFF;
}
#application table tr:last-child th::before {display: none;}
#application table tr td {position: relative;padding: 20px 5px;vertical-align: middle;}
#application table tr td h5{font-weight: 700;color:rgb(0, 108, 255);}
#application table tr td span.question{font-weight: 700;}
#application table tr:last-child td {padding-bottom: 0;}
#application table tr td p {margin-bottom: calc(20px + 10 * ((100vw - 375px) / 1605));}
#application table tr td p:last-child {margin-bottom: 0;}
#application table tr td ul.square li {position: relative;padding-left: 20px;}
#application table tr td ul.square li::before {content: '■';position: absolute;left: 0;}
@media only screen and ( max-width : 768px ) {
	.ChangeElem_Btn_Content {gap: 15px;margin-bottom: 30px;}
	.ChangeElem_Btn_Content button.is-active::before {
		border-top-width: 20px;
		border-right-width: 10.5px;
		border-left-width: 10.5px;
	}
	#application table tr {border-bottom: none;}
	#application table tr th {display: block;width: 100%;padding: 10px 0;background: #F2F7FF;text-align: center;}
	#application table tr th::before {display: none;}
	#application table tr td {display: block;padding: 20px 10px;}
}