/*---------------------------------
	imageFrame start
---------------------------------*/
.imageFrame{
	position: relative;
	width: 90%;
	margin-inline:auto;
	padding-top: calc(100% / 4 * 3);
	overflow: hidden;
}

.imageFrame--ratio4to3{
	padding-top: calc(100% / 4 * 3);
}

.imageFrame--ratio5to3{
	padding-top: calc(100% / 5 * 3);
}

.imageFrame--ratio8to5{
	padding-top: calc(100% / 8 * 5);
}


.imageFrame img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.25s;
}

a:hover .imageFrame img{
	transform: scale(1.1);
}

/*---------------------------------
	imageFrame end
---------------------------------*/

/*---------------------------------
	nColumsContents start
---------------------------------*/
.nColumsContents{
	--gapX: 2em;
	--gapY: 3em;
	--col: 2;
	--pd: 1em;
	--border: 2px;
	list-style: none;
	display: flex;
	align-items: stretch;
	justify-content:center;
	flex-wrap: wrap;
	gap: var(--gapY) var(--gapX);
	padding: 0;
	margin: 0;
}

.nColumsContents_item{
	width: calc((100% - var(--gapX) * (var(--col) - 1)  - 1px) / var(--col));
	border: 2px solid #058188;
	padding: 1em;
	border-radius: 1.5em;
}

@media(min-width: 1025px){
	.nColumsContents--pcCol4{
		--col: 4;
	}
	
	.nColumsContents--pcCol3{
		--col: 3;
	}
	
	.nColumsContents--pcCol2{
		--col: 2;
	}
	
	.nColumsContents--pcCol1{
		--col: 1;
	}
}

@media(max-width: 1024px) and (min-width: 601px){
	.nColumsContents{
		--col: 2;
	}
	
	.nColumsContents--tbCol4{
		--col: 4;
	}
	
	.nColumsContents--tbCol3{
		--col: 3;
	}
	
	.nColumsContents--tbCol2{
		--col: 2;
	}
	
	.nColumsContents--tbCol1{
		--col: 1;
	}
}

@media(max-width: 600px){
	.nColumsContents{
		--col: 1;
	}
	
	.nColumsContents--spCol4{
		--col: 4;
	}
	
	.nColumsContents--spCol3{
		--col: 3;
	}
	
	.nColumsContents--spCol2{
		--col: 2;
	}
	
	.nColumsContents--spCol1{
		--col: 1;
	}
	.nColumsContents{
		--gapX: 1em;
		--gapY: 1.5em;
	}
	
	
	.nColumsContents_item{
		padding: 0.5em;
		border-radius: 1.25em;
	}
}

.nColumsContents_itemLink,
.nColumsContents_itemLink:hover{
	display: block;
	text-decoration: none;
	color: inherit;
}

/*---------------------------------
	nColumsContents end
---------------------------------*/

/*----------------------------------
	employee_benefits_title start
---------------------------------*/

.employee_benefits_title{
	border: none !important;
	background: transparent !important;
	text-align: center;
	width: 100%;
	padding: 0.5em !important;
	margin-bottom: 0 !important;
	font-size: 135%;
	color:#058188;
}

.employee_benefits_text{
	color:#333;
}

@media(600px >= width){
	.employee_benefits_title{
		font-size: 105%;
		padding: 0em !important;
	}

}

/*----------------------------------
	employee_benefits_title end
---------------------------------*/

/*--------------------------------
	mw start
---------------------------------*/
.mw-960{
	margin-inline: auto;
	max-width: 960px;

	width:95%;
}


.mw-1000{
	max-width:1000px;
	width:90%;
}

.mw-1100{
	max-width:1100px;
	width:90%;
}

.mw-1200{
	max-width:1200px;
	width:90%;
}

/*----------------------------------
	mw end
---------------------------------*/


/*---------------------------------
	gridTable start
---------------------------------*/
.gridTable{
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	border-spacing: 0;
}

@media(max-width: 1024px){
	.gridTable--tbScroll{
		display: block;
		width: auto;
		min-width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	
	.gridTable--tbScroll tbody {
		width: 100%;
		display: table;
	}
}

@media(max-width: 600px){
	.gridTable--spScroll{
		display: block;
		width: auto;
		min-width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	
	.gridTable--spScroll tbody {
		width: 100%;
		display: table;
	}
	
	.gridTable--responsive{
		
		tr{
			display:flex;
			flex-wrap:wrap;
			
			> *{
				display:block;
				width:100%;
			}
		}
		
	
	}
}

.gridTable th,
.gridTable td{
	padding: 0.75em 0.5em;
	vertical-align: top;
}

.gridTable th,
.gridTable td{
	border: 2px solid #058188;
}

.gridTable th{
	color: #FFF;
	background-color: #058188;
	border-color:#FFF #058188 #FFF #FFF
}

.gridTable td{
	background-color:#FFF;
	color: #333;
}


@media(max-width: 600px){
	.gridTable th{
		color: #FFF;
		background-color: #058188;
		border-color:#058188
	}

}

/*---------------------------------
	gridTable end
---------------------------------*/

/*--------------------------------
	contents--bs-border-box
----------------------------------*/
.contents--bs-border-box *{
  box-sizing: border-box;
  
}
/*----------------------------------
	contents--bs-border-box
-------------------------------------*/

/*--------------------------------
	voice-contents	start
----------------------------------*/
.voice-contents {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap:0 1em;
}

.voice-contents--Itemimage {
	height: 100%;
	display: flex !important;
	justify-content: center;
	margin: 0;
	
	>img{
		width: auto !important;
		height: 100%;
	}
}

.voice-contents > .nameplate > ul:first-of-type {
	width: 100%;
	font-weight: 600;
	position: absolute;
	display: flex;
}

.voice-contents,
.voice-contents > .nameplate,
.voice-contents > .nameplate > div.interview_radiobutton,
.voice-contents > .nameplate + [class *= "staff_"] {
	position: relative;
}


.nameplate_wapper{
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}


.nameplate input[type="radio"],
.nameplate input[type="checkbox"] { 
  display: none !important;
}

.nameplate:has( :checked )::before,
.nameplate > input:checked + div.interview_radiobutton::before,
.nameplate > input:checked ~ div.interview_radiobutton::after {
	  display: none;
}


.nameplate > div.interview_radiobutton::before,
.nameplate > div.interview_radiobutton::after{
	background-color: #fff;
	content: '';
	width: 2px;
	height: 1.2em;
	display: block;
	position: absolute;
	z-index: 10;
}

.nameplate > input:checked ~ div.interview_radiobutton::before {
	background-color: #058188;
	z-index: 7;
}

.nameplate::after {
	background: #058188;
	content: '';
	border-radius: 50%;
	border: 1px solid #058188;
	position: absolute;
}

.nameplate input + div,
.nameplate:has( :checked ) > div:last-child {
    display: block;
}
	
.nameplate > div:last-child,
.nameplate input:checked + div {
	display: none;
}

.nameplate:has( :checked ) {
	z-index: 13;
}

.nameplate:has( :checked )::after {
	background: #fff;
}

.nameplate + [class *= "staff_"] {
	height: 0;
	opacity: 0;
	transform: translateY(-10px);
	transition: transform .5s, opacity .5s;
}

.nameplate:has( :checked ) + [class *= "staff_"] {
	height: auto;
	opacity: 1;
	transform: none;
}

.nameplate:has( :checked ) + [class *= "staff_"] {
	padding: 3em 1.25em 3em 1.25em;
}

.interview_Wapper{
	background-color: #fff;
	position: relative;
	z-index: 10;
	width:100%;
}

.interview_radiobutton{
	width: 100% !important;
	color: #058188;
	background-color: #fff;
}

.nameplate > div.interview_radiobutton::after {
	transition: rotate .3s;
}

.nameplate > div.interview_radiobutton::before,
.nameplate:has( :checked ) > div.interview_radiobutton::after {
	rotate: 90deg;
}


.nameplate + [class*="staff_"] {
	border-bottom-left-radius: 1.5em;
	border-bottom-right-radius: 1.5em;
}

.interview_faq {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.interview_question {

	font-weight:bold;
	color:#058188;
		
	&:before{
		position: absolute;
		top: -.1em;
		left: .5em;
		content: 'Q';
	}
}

.interview_answer {

	&:before{
		position: absolute;
		top: -.2em;
		left: .5em;
		content: 'A';
		width: 1em;
		height: 1em;
		font-size: 20px;
		font-weight: 600;
		display: block;
		text-align: center;
	}
}

.interview_flow_title {
	color: #058188;
	background: transparent !important;
	border: none !important;
	font-size: 110%;
	margin-bottom: 1em !important;
}

.interview_flow_image {
	width: 100%;
	margin: 0;
	
	>img{
		width:100%;
	}
}


@media (width > 750px ) {

	.voice-contents--Item.profile {
		width: calc((100% - (1em * 4)) / 5);
		position: relative;
		overflow: hidden;
		border-top-left-radius: 1em;
		border-top-right-radius: 1em;
	}

	.voice-contents--Itemimage {
		display: flex;
		justify-content: center;
		width: auto;
		height: 275px;
		margin: 0;
		
		>img{
			width: auto !important;
			height: 100%;
		}
	}

	.voice-contents .nameplate {
		position: absolute;
		top: 280px;
		margin-top: calc( ( 30px * 2 ) * -1 );
		width: calc((100% - (1em * 4)) / 5);
		
		&.staff_01{
			left:0;
		}
		
		&.staff_02{
			left: calc( ( ( ( 100% - (1em * 4)) / 5) + 1em ) * 1 );
		}
		
		&.staff_03{
			left: calc( ( ( ( 100% - (1em * 4)) / 5) + 1em ) * 2 );
		}
		
		&.staff_04{
			left: calc( ( ( ( 100% - (1em * 4)) / 5) + 1em ) * 3 );
		}
		
		&.staff_05{
			left: calc( ( ( ( 100% - (1em * 4)) / 5) + 1em ) * 4 );
		}
	}

	.nameplate.staff_01::after {
		z-index: 1;
	}
	
	.nameplate.staff_02::after {
		z-index: 2;
	}
	
	.nameplate.staff_03::after {
		z-index: 3;
	}
	
	.nameplate.staff_04::after {
		z-index: 4;
	}
	
	.nameplate.staff_05::after {
		z-index: 5;
	}


	.nameplate:hover {
		cursor: pointer;
	}
	
	.nameplate,
	.nameplate + [class *= "staff_"] {
		position: relative;
	}

	.voice-contents .nameplate::before {
		content: '';
		background: #f0f0f0;
		width: calc( 100% + 1em );
		height: 60px;
		position: absolute;
		display: block;
	}

	.voice-contents .nameplate:has(:checked)::before {
		background: transparent;
	}

	.nameplate:has(:checked) {
		top: calc( 310px + ( 0.75em * 2 ) );
	}

	.voice-contents .nameplate > ul:first-of-type {
		height: calc( 250px - ( 0.75em * 2 ) );
		color: #fff;
		text-shadow: 1px 1px 0 rgba( 51, 51, 51, .25 ), -1px 1px 0 rgba( 51, 51, 51, .25 ), 1px -1px 0 rgba( 51, 51, 51, .25 ), -1px -1px 0 rgba( 51, 51, 51, .25 );
		top: calc( ( 245px - ( 0.75em * 2 ) ) * -1 );
		justify-content: end;
		align-items: end;
		padding-right: 10px;
		padding-bottom: 5px;
	}
	
	.voice-contents .nameplate:has(:checked) > ul:first-of-type {
		height: calc( 295px - ( 0.75em * 2 ) );
		top: calc( ( 295px - ( 0.75em * 2 ) ) * -1 );
	}


	.nameplate > ul:first-of-type > li {
		padding-bottom: 20px;
	}

	.nameplate_wapper{
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.nameplate_name{
		border: none !important;
		background: transparent !important;
		text-align: right;
		width: 40%;
		padding: 0 !important;
		margin-bottom: 0 !important;
		font-size: 135%;
	}

	.nameplate_years{
		text-align: right;
		width: 100%;
	  	padding-right: 0.25em;
	}

	.nameplate::after {
		width: 2.5em;
		height: 2.5em;
		top: -.8em;
		left: calc( 100% - 2em );
		z-index:15
	}

	.interview_radiobutton{
		width: 100% !important;
		height: 35px;
		text-align: center;
		padding: 5px 0;
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
		color: #058188;
		background-color: #fff;
	}


	.nameplate > div.interview_radiobutton::before,
	.nameplate > div.interview_radiobutton::after {
		top: -0.1em;
		left: calc( 100% - 0.7em );
	}

	.nameplate > input:checked ~ div.interview_radiobutton::before {
		top: -0.1em;
		left: calc( 100% - 0.7em );
	}

	.interview_text {
		font-size: 110%;
		position: relative;
	}

	.interview_faq_qa {
		border: .1em solid #058188;
		position: relative;
		padding: 15px;
		margin-top: 30px;
		width: 48%;
	}

	.interview_question {
		padding: 0 .5em 0 2em;
		position: absolute;
		top: -.8em;
		margin-right: 1em;
		display: inline-block;
		background:#FFF;
	}

	.interview_answer {
		position: relative;
		z-index: 1;
		padding-left: 2.25em;
		margin-top: 1em;
		margin-left: 0;
	}
}


@media (750px >= width) {
	.voice-contents{
		display:flex;
	}

	.voice-contents--Item.profile {
		width: calc( 100% / 3 ) !important;
		z-index: 1;
		
		border-radius: 1em;
	}
	
	.voice-contents--Itemimage {
	  & > img {
	    width: 100% !important;
	    height: auto;
	    border-top-left-radius: 1em;
	    border-bottom-left-radius: 1em;
	    object-fit: cover;
	  }
	}
	
	.voice-contents .nameplate {
		width: 100% !important;
		margin-top: -100px;
		height: 100px;
		position: relative;
		border-radius: 1em;
	}
	
	.voice-contents > .profile,
	.voice-contents > .nameplate,
	.voice-contents > .nameplate > ul:first-of-type {
		height: 100px;
	}
	
	.voice-contents > .nameplate > ul:first-of-type {
		border: 2px solid #058188;
		border-radius: 1.5em;
		overflow: hidden;
		z-index: 20;
	}
	
	.voice-contents > .nameplate > ul:first-of-type li {
		width: 100%;
	    color: #058188;
	    padding: 10px 10px 25px calc( 100% / 3 + 15px );
	}
	
	.voice-contents > .nameplate:has( :checked ) > ul:first-of-type > li {
		width: 100%;
		padding-top: calc( 10px + .1em );
        padding-left: calc( 15px + .05em );
	}
	
	.nameplate_name{
		border: none !important;
		background: transparent !important;
		width: 100% !important;
		padding: 0 !important;
		margin-bottom: 0 !important;
		font-size: 125%;
	}
	
	.nameplate_years{
		width: 100% !important;
	}

	.nameplate:has( :checked )::before {
		display: none;
	}

	.nameplate::after {
		width: 2.5em;
		height: 2.5em;
		top: calc( 100% - 3em );
		left: calc( 100% - 3em );
	}

	.nameplate:has( :checked )::after {
		left: calc( 100% - 3em );
	}


	.nameplate:has( :checked ) > ul:first-of-type {
		border: none;
	}


	.nameplate > ul:first-of-type > li > h3 {
		font-size: 1.25em;
	}

	.nameplate > ul:first-of-type > li > div > br {
		display: none;
	}

	.nameplate > div.interview_radiobutton {
		height: 100px;
		padding: 5px 0;
		border-radius: 1.5em; 
		position: relative;
	}

	.nameplate:has( :checked ) > div.interview_radiobutton {
		height: 100px;
		padding: 5px 0;
		border-top-left-radius: 0; 
		border-bottom-left-radius: 0; 
		position: relative;
	}

	.nameplate > div.interview_radiobutton > * {
        float: right;
		text-align: center;
		position: relative;
		top: calc( 100% - 1.5em );
		margin-right: 4em;
	}

	.nameplate:has( :checked ) > div.interview_radiobutton > * {
		margin-right: 4em;
	}

	.nameplate > div.interview_radiobutton::before,
	.nameplate > div.interview_radiobutton::after {
		top: calc( 100% - 2.33em );
		left: calc( 100% - 1.75em );
	}

	.nameplate > input:checked ~ div.interview_radiobutton::before {
		top: calc( 100% - 2.33em );
        left: calc( 100% - 1.75em );
	}

	.nameplate + [class *= "staff_"] {
		padding-top: 35px !important;
		margin-top: -50px;
	}

	.nameplate:has( :checked ) > div.interview_radiobutton,
	.nameplate:has( :checked ) > ul:first-of-type {
		width: calc( ( 100% / 3 ) * 2 ) !important;
		position: absolute;
		right: 0;
	}

	.nameplate:has( :checked ) > ul:first-of-type > li {
		width: 100% !important;
	}

	.nameplate:has( :checked ) + [class *= "staff_"] {
		margin-top: -10px;
	}

	.staff_01 {
		order: 1;
	}

	.staff_02 {
		order: 2;
	}

	.staff_03 {
		order: 3;
	}

	.staff_04 {
		order: 4;
	}

	.staff_05 {
		order: 5;
	}

	.interview_faq_qa {
		width: 100% !important;
	}

	.interview_faq_qa + .interview_faq_qa {
		margin-top: 10px;
	}
	
	.interview_faq_qa > .interview_answer {
		margin-top: -.5em;
		margin-left:0;
	}
	
	.interview_faq_qa > .interview_question{
		padding-left: 1.5em;
	}
	
	.interview_faq_qa > .interview_answer {
		padding-left: 2.25em;
	}
	
	.interview_faq_qa > .interview_question::before {
		position: relative;
		top: 0em;
		left: -1.2em;
	}
	
	.interview_faq_qa > .interview_answer::before {
		position: relative;
		top: .8em;
		left:-1.75em;
	}
}

/*---------------------------------
	contents-Inner start
---------------------------------*/
.contents-Inner {
  width: 90%;
  margin-inline: auto;
  max-width: 960px;
  padding: 2em 0 2em;
}

/*---------------------------------
	contents-Inner end
---------------------------------*/
/*---------------------------------
	buttons start
---------------------------------*/
.buttons{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1em 1.5em;
	font-size: 100%;
	margin: 0;
	padding: 0;
}

.buttons--alignLeft{
	justify-content: flex-start;
}

.buttons--vertically{
	flex-direction: column;
	align-items: center;
}

@media(max-width: 1024px) and (min-width: 601px){
	.buttons--tbAlignLeft{
		justify-content: flex-start;
	}
}

@media(max-width: 600px){
	.buttons--spAlignLeft{
		justify-content: flex-start;
	}
}

.buttons--gapNarrow{
	gap: 0.5em 1em;
}

.buttons a{
	text-decoration: none;
}

.buttons input{
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	box-sizing: border-box;
	cursor: pointer;
}

.buttons input::-webkit-search-decoration{
	display: none;
}

.buttons input::focus{
	outline-offset: -2px;
}

/*---------------------------------
	buttons end
---------------------------------*/

/*---------------------------------
	standardButton start
---------------------------------*/
.standardButton{
	--standardButtonBgColor: #058188;
	--standardButtonActiveBgColor: #FFF;
	--standardButtonTextColor: #FFF;
	--standardButtonActiveTextColor: #058188;
	--standardButtonBorderColor: #058188;
	--standardButtonBorderWidth: 2px;
	--standardButtonPaddingX: 1.5em;
	--standardButtonPaddingY: 0.75em;
	display: block;
	width: 15em;
	max-width: 100%;
	min-width: 10em;
	padding: var(--standardButtonPaddingY) var(--standardButtonPaddingX);
	color: var(--standardButtonTextColor);
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	background-color: var(--standardButtonBgColor);
	border:  var(--standardButtonBorderWidth) solid var(--standardButtonBorderColor);
	outline: none !important;
	transition: background-color 0.25s, color 0.25s;
	border-radius: 3em;
}

.standardButton:hover{
	color: var(--standardButtonActiveTextColor);
	text-decoration: none;
	background-color: var(--standardButtonActiveBgColor);
}

.standardButton--small{
	--standardButtonPaddingX: 1.5em;
	--standardButtonPaddingY: 0.5em;
	font-size: 90%;
}

.standardButton--x{
	--standardButtonTextColor: #FFF;
	--standardButtonBgColor: #000;
	--standardButtonActiveTextColor: #000;
	--standardButtonActiveBgColor: #FFF;
	--standardButtonBorderColor: #000;
}

.standardButton--facebook{
	--standardButtonTextColor: #FFF;
	--standardButtonBgColor: #1877f2;
	--standardButtonActiveTextColor: #1877f2;
	--standardButtonActiveBgColor: #FFF;
	--standardButtonBorderColor: #1877f2;
}

.standardButton--line{
	--standardButtonTextColor: #FFF;
	--standardButtonBgColor: #06c655;
	--standardButtonActiveTextColor: #06c655;
	--standardButtonActiveBgColor: #FFF;
	--standardButtonBorderColor: #06c655;
}

.standardButton--instagram{
	position: relative;
	padding: calc(var(--standardButtonPaddingY) + var(--standardButtonBorderWidth)) calc(var(--standardButtonPaddingX) + var(--standardButtonBorderWidth));
	background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
	color: #FFF;
	border: none;
}

.standardButton--instagram:before{
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - (var(--standardButtonBorderWidth) * 2));
	height: calc(100% - (var(--standardButtonBorderWidth) * 2));
	background-color: #FFF;
	visibility: hidden;
	opacity: 0;
	transition: all 0.25s;
}

.standardButton--instagram:hover:before{
	visibility: visible;
	opacity: 1;
}

.standardButton--instagram:hover span{
	position: relative;
	background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

@media(600px >= width){
	.standardButton{
		width:400px;
	}
}

@media(width > 600px){
	.standardTable3_colgroup--title{
		width: 20%;
	}

	.standardTable3_colgroup--text{
		width: 80%;
	}
}
/*---------------------------------
	standardButton end
---------------------------------*/