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

	MAIN VISUAL

--------------------------------------------------*/
#mv {position: relative;height: 1080px;background: url("../img/mv/bg.jpg") no-repeat center / cover;}
#mv figure {
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%,50%);
	width: 100%;
	max-width: 629px;
}
@media only screen and ( max-width : 1024px ) {
	#mv {height: 70rem;}
}
@media only screen and ( max-width : 768px ) {
	#mv {margin-top: 6rem;height: 31rem;}
	#mv figure {max-width: 30rem;}
}

#slider {position: relative;height: 300px;}
#slider {background-image: url(../img/mv/slide.jpg);background-size: auto 300px;
	animation: bgscroll 30s linear infinite; height: 300px;}
@-webkit-keyframes bgscroll {
	0% {background-position: 0 0;}
	100% {background-position: 1800px 0;}
}
@keyframes bgscroll {
	0% {background-position: 0 0;}
	100% {background-position: 1800px 0;}
}
@media only screen and ( max-width : 768px ) {
	#slider {position: relative;height: 150px;}
	#slider {background-size: auto 150px;height:150px;}
	@-webkit-keyframes bgscroll {
		0% {background-position: 0 0;}
		100% {background-position: 900px 0;}
	}
	@keyframes bgscroll {
		0% {background-position: 0 0;}
		100% {background-position: 900px 0;}
	}
}

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

	MESSAGE

--------------------------------------------------*/
.enjapan {max-width: 300px; margin: 40px auto 0;}
.enjapan a:hover{opacity: 0.7;}
#ms .flexbox {align-items: flex-start;flex-direction: row-reverse;}
#ms .flexbox figure {position: relative;width: 47%;text-align: right;}
#ms .flexbox figcaption {position: absolute;right: 0;bottom: 2rem;}
#ms .txtbox {width: 50%;}
#ms .txtbox .title {margin-bottom: 3rem;text-align: left;}
#ms .txtbox .title span {display: inline;margin: 0 1.5rem 0 0;}
#ms .txtbox h3 {margin-bottom: 5rem;line-height: 1.8;}
#ms .txtbox h3 span {color: #0C9790;}
#ms .txtbox ul {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding-left: 114px;
}
#ms .txtbox ul::before {
	content: '企業様への';
	position: absolute;
	top: 10px;
	left: 0;
}
#ms .txtbox ul:nth-of-type(2) {margin-bottom: 5rem;}
#ms .txtbox ul:nth-of-type(2)::before {content: 'スタッフへの';}
#ms .txtbox li {
	width: auto;
	margin: 0 0 10px 5px;
	padding: 1rem 2rem;
	background: #E8F8F7;
	color: #0C9790;
	text-align: center;
}
@media only screen and ( max-width : 1024px ) {
	#ms .flexbox figure {width: 100%;}
	#ms .txtbox h3 {margin-bottom: 2.5rem;}
	#ms .txtbox {width: 100%;margin-bottom: 3rem;}
	#ms .txtbox ul,
	#ms .txtbox ul:nth-of-type(2) {justify-content: space-between;margin-bottom: 2rem;padding-left: 0;}
	#ms .txtbox ul::before {
		display: block;
		position: initial;
		width: 100%;
		margin-bottom: 1rem;
		text-align: center;
	}
	#ms .txtbox li {width: 49.5%;margin: 0;}
	#ms .txtbox li:nth-of-type(1) {width: 100%;margin-bottom: 5px;}
}
/*-------------------------------------------------

	infomation

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

	engage

--------------------------------------------------*/
#engage_wiget .mynavi2025 {
	max-width: 300px;
	text-align: center;
	margin: 100px auto;
}
#engage_wiget .container {max-width: 600px;margin: 50px auto 0;}
#engage-contributions-widget-wrapper {
	position: relative;
	width: 100% !important;
	padding-top: 56.25%;
}
#engage-contributions-widget-wrapper iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
#engage_wiget h2{
	text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #0c9790;
    margin: 60px 0;
}

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

	about

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

#about {padding-bottom: 0;}
#about h3 a {
	text-align: center;
	font-size: 1.3em;
	color: #00534f;
	text-decoration: underline;
	margin-bottom: 70px;
}
#about h3 a::hover{
	cursor: pointer;
	opacity: 0.4;
}
#about h2 {text-align: center;}
#about dl {
	display: flex;
	flex-wrap: wrap;
	max-width: 500px;
	margin: 0 auto;
}
#about dl dt {width: 30%;}
#about dl dd {width: 62%;margin-bottom: 2rem;}
@media only screen and ( max-width : 768px ) {
	#about section {padding-top: 8rem;}
	#about .content {margin: 0 -2rem;}
	#about ul li {margin-bottom: 3rem;font-size: 1.6rem;}
	#about ul li h3 {font-size: 2rem;}
	#about dl {margin: 0 0 0 -2rem;border-bottom: none;}
	#about dl:nth-child(2) {margin-bottom: 0;}
	#about dl dt {
		display: block;
		position: relative;
		width: 100%;
		padding: 0 0 1rem 5rem;
	}
	#about dl dd {display: block;width: 100%;padding-left: 5rem;}
	.mapbox {padding: 0 2rem;}
	.map {margin-bottom: 3rem;}
}
/*-------------------------------------------------

	COMPANY DATA

--------------------------------------------------*/
#comp li {width: 49%;margin-bottom: 2rem;}
#comp p {
	margin-top: 40px;
	text-align: center;
	line-height: 2;
}
#comp p a {
	display: inline-block;
	text-align: center;
	color: #0E9790;
	text-decoration: underline;
	font-size: 1.4em;
}
#comp p a:hover{color: #02fff2;}
#comp p span {display: block;text-align: center;}
#comp .sdgs {
	margin: 50px auto;
	max-width: 600px;
}
#comp .sdgs figure figcaption{
	text-align: center;
}
@media only screen and ( max-width : 768px ) {
	#comp li {width: 100%;}
	#comp li:last-child {margin-bottom: 0;}
}
/*-------------------------------------------------

	WORK STYLE

--------------------------------------------------*/
#work h3 {
	position: relative;
	margin-bottom: 15px;
	font-weight: 700;
	font-size: 1.8rem;
	text-align: center;
}
#work h3::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform: translate(-50%,50%);
	z-index: -1;
	width: 0;
	height: 1px;
	background: #707070;
	transition: all 2s;
}
#work h3.isActive:after {width: 100%;}
#work h3 span {position: relative;padding: 0 10px;background: #fff;}
#work ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
#work li {width: 23%;}
#work .flexbox {margin-top: 45px;}
#work .flexbox ul {width: 48.5%;}
#work .flexbox li {width: 47%;}
#work .flexbox li:nth-of-type(1) {width: 100%;}
@media only screen and ( max-width : 768px ) {
	#work li {width: 48.5%;margin-bottom: 15px;}
	#work .flexbox {margin-top: 30px;}
	#work .flexbox ul {width: 100%;}
	#work .flexbox ul:nth-of-type(1) {margin-bottom: 3rem;}
	#work .flexbox li {width: 48.5%;}
}
/*-------------------------------------------------

	Twitter

--------------------------------------------------*/
#twitter .inner {max-width: 600px;}
#twitter h2 {margin-bottom: 60px;text-align: center;}
#twitter h2 span {
	display: inline-block;
	position: relative;
	padding: 0 50px;
	color: #0C9790;
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1.6;
	text-align: center;
}
#twitter h2 span:before,
#twitter h2 span:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 60px;
	height: 2px;
	background-color: #000;
}
#twitter h2 span:before {left:-30px;transform: rotate(75deg);}
#twitter h2 span:after {right: -30px;transform: rotate(-75deg);}
#twitter .flexbox {margin-top: 60px;}
#twitter .flexbox ul {width: 48.5%;}
#twitter .flexbox li a {max-width: 100px; }
@media only screen and ( max-width : 768px ) {
	#twitter h2 {margin-bottom: 40px;}
	#twitter h2 span {padding: 0 30px;font-size: 1.8rem;}
}

@media only screen and ( max-width : 500px ) {
	#twitter h2 span {padding: 0 20px;font-size: 1.6rem;}
}
/*-------------------------------------------------

	INTERVIEW

--------------------------------------------------*/
#itv .inner {max-width: 1390px;}
#itv .flexbox {justify-content: center;}
#itv .itvbox {position: relative;width: 23rem;margin: 0 15px 15px;}
#itv .txtbox {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 1.5rem 1rem 1rem;
	background: #0C9790;
	color: #fff;
}
#itv .txtbox h3 {margin-bottom: 2rem;font-weight: 700;font-size: 1.4rem;}
#itv .txtbox h3 span {margin-right: 1rem;font-size: 2.15em;}
#itv .txtbox a {
	position: relative;
	max-width: 14rem;
	margin-left: auto;
	padding: 1rem 2rem;
	border: 1px solid #fff;
	color: #fff;
	font-size: 1.4rem;
}
#itv .txtbox a::before {
	content: "";
	position: absolute;
	right: 1rem;
	bottom: 50%;
	transform: translate(0,50%) rotate(-45deg);
	width: 5px;
	height: 5px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transition: .3s;
}
#itv .txtbox a:hover {background: #fff;color: #0C9790;}
#itv .txtbox a:hover::before {border-color: #0C9790;}
#itv .ikusei {
	max-width: 700px;
	margin: 60px auto;
}
#itv .ikusei a:hover{
	opacity: 0.4;
}
#itv .embedarea {display:flex;flex-wrap:wrap;padding:50px 0px 0px 0px;max-width: 1390px;margin:0 auto;}
#itv .embedarea .inner {width:33.3333%;padding:0px 5px;}
#itv .embedarea .inner iframe {width:100%!important;min-width:auto!important;max-width:auto!important;}
/*
#itv .video {
  width: 50%;margin:0 auto;
  aspect-ratio: 16 / 9;
}
#itv .video iframe {
  width: 100%;
  height: 100%;
}
*/
@media only screen and ( max-width : 1024px ) {
	#itv .inner {max-width: 500px;}
	#itv .flexbox {justify-content: space-between;}
	#itv .itvbox {width: 48.5%;margin: 0 0 15px;}
	#itv .embedarea {max-width: 500px;}
	#itv .embedarea .inner {width:50%;}
}
@media only screen and ( max-width : 768px ) {
	#itv .txtbox h3 {font-size: 1rem;}
	#itv .embedarea {padding:20px 0px 0px 0px;}
	#itv .embedarea .inner {width:100%;}
}
@media only screen and ( max-width : 500px ) {
	#itv .txtbox a {padding: 1rem;}
}
/*-------------------------------------------------

	REQUIREMENTS

--------------------------------------------------*/
.ChangeElem_Btn_Content {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.ChangeElem_Btn_Content::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #000;
}
.ChangeElem_Btn_Content button {
	position: relative;
	width: 49%;
	margin-bottom: 2rem;
	padding: 2rem 0;
	border: 1px solid #000;
	background: #eee;
	color: #374A49;
	font-weight: 700;
	font-size: 1.8rem;
}
.ChangeElem_Btn_Content button.is-active {
    background: #fff;
    padding-bottom: 4rem;
    margin-bottom: 0;
    border-bottom: none;
}
.tab_content table {
	border-collapse: inherit;
	padding: 60px 6vw;
	border: 1px solid #000;
	border-top: none;
}
.tab_content th {
	width: 20%;
	border-bottom: 1px solid #707070;
	font-weight: 700;
	font-size: 2rem;
}
.tab_content td {padding: 2.5rem 0;border-bottom: 1px solid #707070;}
.tab_content tr:first-child th,
.tab_content tr:first-child td {padding-top: 0;}
.tab_content tr:last-child th,
.tab_content tr:last-child td {padding-bottom: 0;border-bottom: none;}
.tab_content h5 {font-weight: 700;}
.tab_content p {margin-bottom: 30px;}
.tab_content p:last-child {margin-bottom: 0;}
.tab_content p.txt {margin-top: 30px;}
.tab_content ul li {position: relative;padding-left: 15px;}
/*.tab_content ul li::before {
	content: '・';
	position: absolute;
	top: 0;
	left: 0;
}*/
@media only screen and ( max-width : 1024px ) {
	.ChangeElem_Btn_Content button {font-size: 1.4rem;}
}
@media only screen and ( max-width : 768px ) {
	.ChangeElem_Btn_Content button {
		width: 100%;
		margin-bottom: 15px;
		padding: 1.5rem 0;
		font-size: 1.6rem;
	}
	.ChangeElem_Btn_Content button::before {
		content: "";
		position: absolute;
		right: 2rem;
		left: inherit;
		bottom: 50%;
		transform: translate(0,50%) rotate(-45deg);
		width: 9px;
		height: 9px;
		border-left: 3px solid #0C9790;
		border-bottom: 3px solid #0C9790;
	}
	.ChangeElem_Btn_Content button.is-active {
		padding-bottom: 15px;
		margin-bottom: 15px;
		border-bottom: 1px solid #000;
		outline: 5px solid #0C9790;
		outline-offset: -5px;
	}
	.tab_content table {padding: 10px;}
	.tab_content th {
		display: block;
		width: 100%;
		padding: 10px 0;
		font-size: 1.4rem;
	}
	.tab_content tr:last-child th {padding-bottom: 10px;border-bottom: 1px solid #707070;}
	.tab_content td {display: block;padding: 20px 0;}
	.tab_content tr:first-child td {padding-top: 20px;}
	.tab_content p {margin-bottom: 20px;}
	.tab_content p.txt {margin-top: 20px;}
}
@media only screen and ( max-width : 500px ) {
	.ChangeElem_Btn_Content button {padding: 15px 0;}
}
.line_block {max-width: 300px;margin: 50px auto 0;}
/*-------------------------------------------------

	ENTRY

--------------------------------------------------*/
#entry .title span:nth-child(2) {margin-top: 10px;}
#entry .content {border: 1px solid #707070;background: #fff;padding: 5rem 1rem;}
#entry table {
	max-width: 1080px;
	margin: 0 auto 3rem;
	border-collapse: inherit;
	border-spacing: 0 1rem;
}
#entry th {
	width: 36%;
	background: #0C9790;
	color: #fff;
	text-align: center;
	vertical-align: middle;
}
#entry td {
	overflow: hidden;
	border: 1px solid #0C9790;
	border-radius: 0 5px 5px 0;
	vertical-align: middle;
}
#entry input[type="text"],
#entry input[type="tel"],
#entry input[type="email"],
#entry textarea {
	width: 100%;
	padding: 2rem 4rem;
	border: none;
	background: #fff;
	font-size: 1.4rem;
	vertical-align: text-top;
	resize: vertical;
}
::placeholder {color: #ccc;}
#entry input:focus,
#entry select:focus {outline: none;}
.stbox {position: relative;width: 100%;}
.stbox::after {
	content: '';
	position: absolute;
	top: 20px;
	right: 15px;
	transform: rotate(-45deg);
	width: 10px;
	height: 10px;
	border-left: 3px solid #0C9790;
	border-bottom: 3px solid #0C9790;
}
.stbox select {
	width: 100%;
	padding: 2rem 4rem;
	border: none;
	background: #fff;
	font-size: 1.4rem;
	cursor: pointer;
}
.check {display: none;}
.check + label {
	display: table;
	position: relative;
	margin: 0 auto 4rem;
    padding-left: 4.5rem;
	font-kerning: 500;
    cursor: pointer;
}
.check + label::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 50%;
	transform: translate(0,50%);
    width: 30px;
    height: 30px;
    border: 1px solid #0C9790;
	background: #fff;
}
.check:checked + label::before {background: #fff;}
.check:checked + label::after {
	content: "";
	display: block;
	position: absolute;
	left: 10px;
	bottom: 50%;
	transform: translate(0,50%) rotate(-45deg);
	width: 9px;
	height: 4px;
	border-left: 3px solid #000;
	border-bottom: 3px solid #000;
	border-radius: 0;
}
.check + label a {display: inline;color: #0C9790;text-decoration: underline;}
input[type="submit"].submit,
input[type="button"].submit,
button.submit {border-radius: 5rem;}
.submit {
	display: block;
	width: 100%;
	max-width: 40rem;
	margin: 0 auto;
	padding: 2rem 0;
	border: 2px solid #0C9790;
	background: #0C9790;
	color: #fff;
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
	transition: .3s;
}
.submit:hover {background-color: #fff;color: #0C9790;}
@media only screen and ( max-width : 768px ) {
	#entry table {margin-bottom: 2rem;border-spacing: 0;}
	#entry .content {padding: 5rem 2rem;}
	#entry th {
		display: block;
		width: 100%;
		padding: 10px 15px;
		border-radius: 5px 5px 0 0;
		text-align: left;
	}
	#entry td {
		display: block;
		width: 100%;
		margin-bottom: 1rem;
		border-radius: 0 0 5px 5px;
	}
	#entry tr:last-child td {margin-bottom: 0;}
	#entry input[type="text"], 
	#entry input[type="tel"], 
	#entry input[type="email"], 
	#entry textarea,
	.stbox select {padding: 2rem;}
	.check + label {padding-left: 3.5rem;}
	.check + label::before {width: 20px;height: 20px;}
	.check:checked + label::after {left: 5px;}
	.submit {max-width: 100%;}
}
@media only screen and ( max-width : 500px ) {
	#entry .content {padding: 1rem;}
}
/* ------------------------------------------------------------

　   FORM

--------------------------------------------------------------*/
.form {display: block;padding-top: 15rem;}
.form h4 {text-align: center;line-height: 1.8;margin-bottom: 4rem;}
.form .submit {margin: 0 auto;}
.error .errorbox {margin-bottom: 8rem;}
.error .error_messe {color: #C41000;text-align: center;}
#entry.confirm table {margin-bottom: 3rem;}
#entry.confirm th {font-weight: 700;}
#entry.confirm td {padding: 2rem;}
.complete p {margin-bottom: 4rem;text-align: center;}
@media only screen and ( max-width : 768px ) {
	#entry.confirm td {border-bottom: 1px solid #000;}
}