@charset "UTF-8";
/* =============================================================================
   pc
   ========================================================================== */

.sub_page_mv {
   background: url(./../../img/staff-voice/pc/mv@2x.jpg) no-repeat center;
   background-size: cover;
}

article.inner {
	margin: 30px auto;
}


/* nav - #tab */
#tab {
    background: url(./../../img/staff-voice/pc/bg-nav.png) center;
    background-size: 128px 88px;
    padding: 40px 0 40px;
    overflow: hidden;
}
	#tab div.inner {
	    max-width: 1000px;
	    width: 100%;
	    margin-left: -550px;
	    background: #fff;
	    padding: 0 50px 50px;
	    position: relative;
	    left: 50%;
	}
	#tab div.inner:first-child::before {
		content: '';
		display: block;
		position: absolute;
		top: 55px;
	    left: -70px;
		width: 9.364%;
		height: 187px;
		background: url(./../../img/staff-voice/pc/star1.png) right top no-repeat;
		background-size: contain;
	}
	#tab div.inner:last-child::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 60px;
	    right: -80px;
		width: 8.909%;
		height: 164px;
		background: url(./../../img/staff-voice/pc/star2.png) left top no-repeat;
		background-size: contain;
	}

		#tab ul {
			/* padding: 0; */
		}
			#tab li {
			    float:left;
			    margin-top: -10px;
			    max-width: 320px;
			    width: 32%;
			    text-align: center;

			    opacity: .4;
			    -webkit-transition: opacity .25s ease;
			       -moz-transition: opacity .25s ease;
			        -ms-transition: opacity .25s ease;
			         -o-transition: opacity .25s ease;
			            transition: opacity .25s ease;
				cursor: pointer;
			}
			#tab li + li {
			    margin-left: 2%;
			}
			#tab li:hover,
			#tab li.select {
			    opacity: 1;
			}


#content article {
    position: relative;
}
	.hide {
	    display:none;
	}
	.staff_sp {
	    display: none;
	}
	#content .content {
	    background-position: center;
	    background-size: cover;
	}
	#staff1 .content {
	    background-image: url(./../../img/staff-voice/pc/bg-staff1@2x.jpg);
	}
	#staff2 .content {
	    background-image: url(./../../img/staff-voice/pc/bg-staff2@2x.jpg);
	}
	#staff3 .content {
	    background-image: url(./../../img/staff-voice/pc/bg-staff3@2x.jpg);
	}
		.content .inner {
		    max-width: 1100px;
		    width: 110%;
		    margin: auto;
		    padding: 10px 0 40px;
		}
		.content h3 {
		    margin-left: -8px;
		    margin-top: 10px;
		    margin-bottom: 35px;
		}
		.content h4{
			color: #00ccff;
			font-weight: bold;
			font-feature-settings: "palt";
			letter-spacing: 0.7px;
		}
		.content p {
		    margin: 10px auto 25px 0;
			max-width: 610px;
		    width: 55.4%;
		    line-height: 2;
		    text-align: justify;
		}

	.cntxt {
		background: url(./../../img/staff-voice/pc/bg-txt@2x.png) center;
	    background-size: 128px;
	}
		.cntxt .inner {
		    margin: auto;
		    padding: 0 0 70px;
		}
			.cntxt li {
			    float: left;
			    width: 48%;
			    max-width: 480px;
			    line-height: 2;
			    padding: 100px 0 0;
			    background-position: top center;
			    background-size: 90px 98px;
			    background-repeat: no-repeat;
			}
			.cntxt li:nth-child(1) {
			    background-image: url(./../../img/staff-voice/pc/bg-content-01@2x.png);
			}
			.cntxt li:nth-child(2) {
			    background-image: url(./../../img/staff-voice/pc/bg-content-02@2x.png);
			}
			.cntxt li:nth-child(3) {
			    background-image: url(./../../img/staff-voice/pc/bg-content-03@2x.png);
			}

			.cntxt li + li {
				margin-left: 4%;
			}
				.cntxt h4 {
				    margin: 5px auto 15px;
				}




@media screen and (max-width: 1099px) {


	.content .inner {
    width: 100%;
}
.cntxt .inner {
    max-width: none;
    width: 100%;
}

}


@media screen and (max-width: 999px) {


	#tab div.inner {
		margin-left: 0;
	    padding: 0 0 50px;
	    left: auto;
	}

}


/* =============================================================================
   sp
   ========================================================================== */

@media screen and (max-width: 650px) {
	#tab {
    background-size: 20vw;
    padding: 8vw 0 6vw;
}
	#tab div.inner {
    padding: 40px 0;
}
#tab li {
    float: none;
    margin: 0 auto;
    max-width: 560px;
    width: 87.5%;
}
#tab li + li {
    margin: 40px auto 0;
}

.content .inner {
    /* width: 94%;
    margin: auto; */
    padding-bottom: 20px;
}
.content .inner > * {
    max-width: 94%;
    width: 94%;
    margin: auto;
}
.content .inner > img {
    margin-left: 7%;
    margin-top: 20px;
    width: 90%;
}

.content .inner .staff_sp {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.content .inner h3{
	margin-top: 20px;
}

.content .inner h4{
	margin-bottom: 10px;
}
.content .inner p{
	margin-bottom: 20px;
}


#content .content {
    background-position: 30% bottom;
    background: none;
}
.cntxt .inner {
    max-width: none;
    width: 94%;
    padding-bottom: 30px;
}

.cntxt li {
    float: none;
    margin: 0 3% 3em;
    width: 94%;
    max-width: none;
    font-size: 4vw;
}
.cntxt li + li {
    margin-left: 3%;
}

.cntxt p {
    text-align: left;
}
.cntxt p br {
    display: none;
}



}/*　ここまで max-width 640px　*/