@charset "utf-8";

/* -------------------------------------------------------- fv */
#fv{ padding: 0 0 130px; }
#fv .kv{ width: 55%; height: auto; }

/* -------------------------------------------------------- sv */
#sv { position: relative; background: #fff; padding: 80px 0; overflow: hidden; }
#sv .pic { position: relative; width: 100%; }
#sv .pic img:first-child { width: 100%; height: auto; display: block; }
#sv .pic img:last-child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 455px; height: auto; max-width: 90%; z-index: 2; }

.sv-content { text-align: center; padding-top: 60px; position: relative; z-index: 3; }
.sv-content h3 { font-size: 30px; line-height: 2; margin-bottom: 25px; }
.sv-content .sv-en { margin-bottom: 30px; font-family: 'Gilroy-Bold'; font-size: 20px; }
.sv-content .txt { font-size: 16px; line-height: 2; color: #000; max-width: 800px; margin: 0 auto; }


/* -------------------------------------------------------- satisfaction */
#job-satisfaction { background: var(--bg-color); padding: 100px 0 70px; position: relative; overflow: hidden; text-align: center; }
#job-satisfaction .flex{ display: flex; align-items: center; }
#job-satisfaction .item { mix-blend-mode: multiply; width: 60%; height: auto; margin-left: -10%; }

#job-satisfaction .text-content { padding-right: 2%; width: 50%; max-width: 500px; text-align: left; }
#job-satisfaction .s-ttl { margin-bottom: -50px; }
#job-satisfaction .txt { margin-bottom: 30px; }
#job-satisfaction .btn-content { text-align: left; }


/* -------------------------------------------------------- business */
#business { padding: 50px 0; }
#business .flex{ display: flex; align-items: center; justify-content: space-between; }
#business .pic{ padding: 0 0 60px; }

#business .txt-content{ width: 50%; }

.pic { overflow: hidden; position: relative; width: 100%; }
.pic-slider{ animation: scrollX 40s linear infinite; display: flex; align-items: center; width: 120%; position: relative; left: 50%; transform: translate(-50%,0); }
.pic-slider .item{ min-width: 365px; margin: 0 20px; }
.pic-slider .item:nth-of-type(odd){ margin-top: 60px; }
.pic-slider img{ width: 100%; height: auto; }


/* -------------------------------------------------------- features */
#features{ padding: 70px 0 60px; }

.feature{ position: relative; margin: 0 0 60px; }
.feature:last-of-type{ margin: 0; }

.feature .flex{ display: flex; align-items: center; justify-content: space-between; }
.feature:nth-of-type(odd) .flex{ flex-direction: row-reverse; }

.feature .txt-content{ width: 45%; margin: 100px 0 0; }
.feature .note{ padding-right: 30px; background: url(../images/common/icn_05.svg) right center no-repeat; color: #1CADC7!important; }
.feature figure{ width: 52%; display: block; position: relative; }

.feature:before,
.feature figure:before{ z-index: -1; position: absolute; content: ""; right: 0; bottom: 0; width: 100%; height: 80%; background: var(--bg-color); }
.feature:before{ width: 50vw; }
.feature:nth-of-type(odd):before{ right: initial; left: 0; }

.feature02 figure{ padding: 0 0 25px; }
.feature02 img{ position: relative; left: 35px; bottom: 15px; }


/* -------------------------------------------------------- number */
#number{ padding: 60px 0; }

.number-list { display: flex; justify-content: space-between; gap: 20px; list-style: none; margin: 40px 0 0; padding: 0; }
.number-list li { background: var(--bg-color); flex: 1; border-radius: 20px; padding: 40px 20px; text-align: center; }
.number-list-ttl { font-size: 16px; font-weight: bold; margin-bottom: 20px; }
.number-list p { font-size: 16px; margin-bottom: 10px; line-height: 1; }
.number-list p strong { font-size: 36px; color: var(--main-color); font-weight: bold; margin: 0 3px; }
.number-list small { font-size: 13px; color: #333; }


/* -------------------------------------------------------- message */
#message{ padding: 60px 0 130px; }
#message .s-ttl{ margin-bottom: 85px; }
#message .bg{ position: relative; }

.main-message{ display: flex; align-items: center; justify-content: space-between; padding: 0 0 20px; }
.main-message .txt-content{ width: 50%; }
.main-message figure{ position: relative; width: 50%; margin-left: -9%; }
.main-message figure img{ width: 100%; height: auto; }

#message .bg:before,
.main-message figure:before{ z-index: -1; position: absolute; content: ""; height: 650px; left: 0; transform: translate(0,-50%); background: var(--bg-color); }
#message .bg:before{ width: 30vw; top: 44.5%; }
.main-message figure:before{ width: 70%; top: 50%; }

.other-list { display: flex; justify-content: space-between; gap: 30px; list-style: none; padding: 0; margin: 80px 0 0; }
.other-list li { flex: 1; }
.other-list a { display: block; text-align: center; text-decoration: none; color: #000; transition: opacity 0.3s ease; }
.other-list a:hover { opacity: 0.8; }
.other-list img { width: 100%; height: auto; display: block; margin-bottom: 15px; }
.other-list-ttl { font-size: 16px; font-weight: bold; position: relative; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.other-list-ttl .arrow { display: inline-block; width: 8px; height: 8px; border-top: 1px solid var(--main-color); border-right: 1px solid var(--main-color); transform: rotate(45deg); margin-left: 4px; }



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

	.btn-B{ margin: 0 auto; }


/* -------------------------------------------------------- sv */
	#sv { padding: 40px 0; }
	#sv .pic img:first-child{ width: 140%; max-width: initial; margin-left: -16%; }
	#sv .pic img:last-child { width: 45%; }
		
	.sv-content{ padding-top: 30px; }
	.sv-content h3 { font-size: 17px; margin-bottom: 20px; text-align: left; }
	.sv-content .sv-en { font-size: 14px; margin-bottom: 20px; line-height: 2; }
	.sv-content .txt { font-size: 16px; text-align: left; line-height: 2.5; }
	
	
/* -------------------------------------------------------- satisfaction */
	#job-satisfaction { padding: 40px 0; }
	#job-satisfaction .item { width: 85%; margin: 0 auto;  }
	
	#job-satisfaction .s-ttl{ margin-bottom: 0; }
	
	#job-satisfaction .flex{ flex-direction: column; }
	#job-satisfaction .text-content { margin: 0 auto; width: 90%; padding: 0; text-align: center; }
	#job-satisfaction .txt{ margin-bottom: 15px; }
	

/* -------------------------------------------------------- business */
	#business{ padding: 40px 0; }
	#business .s-ttl::after{ transform: translate(-50%,0); }
	#business .pic{ padding: 0 0 30px; text-align: center; }
	#business .flex{ flex-direction: column; }
	#business .btn-content{ width: 100%; }
	
	#business .txt-content{ width: 100%; }

	.pic-slider .item{ min-width: 150px; margin: 0 10px; }
	.pic-slider .item:nth-of-type(odd){ margin-top: 30px; }


/* -------------------------------------------------------- features */
	#features{ padding: 0 0 40px; }

	.feature{ position: relative; margin: 20px 0 45px; }
	.feature:before,
	.feature:nth-of-type(odd)::before{ bottom: 0; width: 95%; height: 80%; }
	.feature:before{ left: initial; right: 0;}
	.feature:nth-of-type(odd)::before{ left: 0; }
	
	.feature .flex,
	.feature:nth-of-type(odd) .flex{ flex-direction: column-reverse; }
	.feature figure::before{ display: none; }
	
	.feature .txt-content{ width: 100%; margin: 25px 0 0; }
	.feature .note{ padding-right: 20px; background-size: 14px; font-size: 11px; }
	.feature figure{ width: 80%; margin: 0 auto; }
	
	.feature02 .txt-content{ margin-bottom: 30px; }
	.feature02 img{ left: 19px; bottom: 0; }


/* -------------------------------------------------------- number */
	#number { padding: 0 0 60px; }
	
	.number-list { flex-direction: column; gap: 20px; margin: 0; }
	.number-list li { padding: 20px 15px; border-radius: 10px; }
	.number-list-ttl { font-size: 19px; margin-bottom: 15px; }
	.number-list p { margin: 0; font-size: 22px; }
	.number-list p strong { font-size: 38px; }
	.number-list small { font-size: 14px; }

/* -------------------------------------------------------- message */
	#message{ padding: 0 0 60px; }
	#message .s-ttl{ flex-direction: column; margin-bottom: 65px; }
	
	#message .bg:before{ width: 50vw; height: 54%; top: 21.5%; }

	.main-message{ flex-direction: column; padding: 0 0 30px; }
	.main-message figure{ width: 95vw; }
	.main-message figure:before{ display: none; }
	.main-message .txt-content{ width: 100%; padding: 35px 0 0; }

	.other-list { flex-direction: column; gap: 20px; margin-top: 20px; }
	.other-list li { width: 100%; }
	.other-list img { margin-bottom: 10px; }
	.other-list-ttl { font-size: 20px; }
	.other-list-ttl .arrow { width: 10px; height: 10px; border-width: 1.5px; }


}