@charset "UTF-8";

@media screen and (max-width: 768px) {
	body {
		font-size:1.4em !important;
	}
	
	.img-auto{
		width:100%;
		height:auto;
	}
	.img-50{
		width:50%;
		height:auto;
	}
	.sp-none{display:none;}
	.ib{ display:inline-block;}
	.f-left-sp{text-align: left !important;}
	.f-center-sp{text-align: center !important;}
	
	.fs-32{font-size: 2rem;}
	.fs-60{font-size: 5rem;}
	
	/*font*/
	
	/*margin*/

	/*padding*/

	/*====================================
	 default 
	====================================*/
	main{
		overflow: auto;
	}
	.container{
		width:90%;
		margin:0 5%;
		padding: 50px 0;
	}

	/*====================================
	 HEADER
	====================================*/
	h1{
		top: 20px;
		left: 20px;
		position: absolute;
		z-index: 1;
	}
	h1 img{
		width: 120px;
	}

	/*====================================
	 MAIN
	====================================*/
	.main{
		background: none;
	}
	.main .container{
		padding: 0;
		width: 100%;
		margin: 0;
		background: #fdd9bc;
	}
	.main::before{
		height: 50px;
		bottom: -50px;
		background: url("../images/wave_04_sp.png") no-repeat center top;
		background-size: 100% 50px;
	}
	.main h2{
		margin: 0;
		top: 0;
	}
	.main .cta-btn{
		margin: 0 20px;
	}
	/*====================================
	 contents
	====================================*/
	h2{
		font-size: 2.8rem;
		margin-bottom: 15px;
		letter-spacing: 0;
	}
	.sub span{
		font-size: 2rem;
	}
	h3{
		font-size: 2.6rem;
		letter-spacing: 0;
	}
	/*cta*/
	.cta{
		padding: 40px 0;
	}
	/*cta*/
	.cta .container{
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.cta .cta-box{
		padding: 15px 10px;
		width: calc(90% - 20px);
	}
	.cta-box::before{
		width: 56px;
		height: 38px;
		background-size: 56px auto;
		top: -20px;
	}
	.cta::after{
		background:url("../images/wave_03_sp.png") no-repeat center center;
		background-size: auto 50px;
		height: 50px;
	}
	.cta h2{
		margin:10px auto;
		font-size: 2rem;
		letter-spacing: 0;
	}
	.cta h2 .prezent{
		padding: 0.25rem 0.5rem;
		font-size: 3rem;
	}
	.cta-btn{

	}
	.cta-btn img{
		width: 90%;
		height: auto;
	}
	
	/*reason*/
	.reason::before,
	.step::before,
	.voice::before{
		font-size: 9rem;
	}
	/*results*/
	.results-ttl{
		margin-bottom: 20px;
		padding: 10px;
	}
	.logos{
		overflow-x: hidden;
		margin: 0 -5%;
	}
	.logos ul li img{
		width: 130px;
		height: auto;
	}

	/*about*/
	.about .container{
		padding: 50px 0 20px;
	}
	.about-ttl{
		margin: 0 auto 30px;
		padding: 20px;
		width: calc(100% - 0px);
		font-size: 1.5rem;
		text-align: left;
	}
	.about-ttl h2{
		line-height: 1;
	}
	.about-ttl figure{
		margin: -4rem auto 1rem;
		text-align: center;
	}
	.about-ttl figure img{
		width: 130px;
		height: auto;
	}
	.about ul{
		margin-top: 30px;
	}
	.about li h3{
		margin: -3rem auto 1rem;
		padding: 0.5rem;
		font-size: 1.5rem;
	}
	.about li:nth-of-type(1),
	.about li:nth-of-type(3){
		padding: 10px;
	}
	.about li:nth-of-type(1) img,
	.about li:nth-of-type(3) img{
		margin-top: 5px;
		width: 100px;
	}
	.about-under .container{
		padding: 20px 0 0;
	}
	.about-under h2{
		margin-bottom: 10px;
	}
	.about-under::before{
		clip-path: polygon(0 0, 0% 100%, 100% 100%);
		height: 50px;
	}
	.about-under::after{
		clip-path: polygon(100% 0, 0% 100%, 100% 100%);
		height: 50px;
	}
	.about-under::before,
	.about-under::after{
		top: -50px;
	}
	.about-under figure{
		margin-top: 15px;
	}
	/*reason*/
	.reason-img::before{
		background-size: 72px;
		left: -10px;
	}
	.reason-img::after{
		background-size: 72px;
		right: -10px;
	}
	.reason-img::before,
	.reason-img::after{
		width: 72px;
		height: 109px;
		bottom: 5rem;
	}
	.reason h2::before{
		width:50px;
		height:36px;
		background-size: 50px auto;
		top: -105px;
	}
	.reason h2 span{
		font-size: 4.5rem;
	}
	.reason li::before,
	.reason li::after{
		width: 100%;
		height: 50px;
	}
	.reason li:nth-child(odd)::before{
		top: -50px;
		background: url("../images/wave_01_sp.png") no-repeat center top;
		background-size: 100% 50px;
	}
	.reason li:nth-child(even)::before{	
		background: url("../images/wave_02_sp.png") no-repeat center top;
		background-size: 100% 50px;
	}
	.reason li:nth-child(even){
		padding: 70px 0;
	}
	.reason li:last-child{
		padding: 0 0 30px;
	}
	.reason-wrap{
		margin: 0 5%;
		width: 90%;
	}
	.reason li:nth-child(even) .reason-wrap::before,
	.reason li:nth-child(odd) .reason-wrap::before{
		content: none;
	}
	.reason-ttl{
		justify-content:space-between;
	}
	.reason figure img{
		width: 140px;
		margin:0;
	}
	.reason h3{
		font-size: 2.4rem;
	}
	.reason h3 .num{
		font-size: 1.6rem;
	}
	.reason .marker{
		font-size: 3.5rem;
	}
	/*step*/
	.step .swiper{
		width: 100%;
	}
	.step .container{
		padding: 50px 0 0px;
	}
	.step-box{
		width: calc(100% - 40px);
		margin: 0 auto;
		padding: 20px;
		text-align: left;
	}
	.step-num{
		margin: 0 auto 15px;
		width: 34px;
		height: 34px;
		font-size: 2rem;
	}
	.step-ttl{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20px;
	}
	.step-box figure img{
		width: 70px;
	}
	.step-box h3{
		margin: 0 0 0 20px;
		text-align: left;
	}
	.step-box .num{
		margin: 0 0 1rem;
		font-size: 1.4rem;
	}
	/*mendan*/
	.mendan p{
		font-size: 1.5rem;
	}
	.mendan ul{
		gap:10px;
	}
	.mendan figure{
		padding: 2rem;
	}
	.mendan img{
		width: 100%;
	}
	.mendan h3{
		padding: 2rem 1rem;
		font-size: 2rem;
	}
	/*voice*/
	.voice .container{
		padding: 50px 0 20px;
	}

	/*swiper*/
	.voice .swiper-box{
		padding-bottom: 30px;
	}
	.voice .slider-thumbnail .swiper-wrapper{
		width: calc(100% - 0px);
		margin: 15px 0 0;
		padding: 0;
	}
	#sana .slider-thumbnail .swiper-wrapper .swiper-slide p{
		padding: 10px 5px;
		background: url("../images/arrow-down-white.png") no-repeat right 0.5rem center rgba(254,244,219,0);
		background-size: 8px auto;	
		border-radius:6px;
		width: calc(100% - 10px);
	}
	#sana .slider-thumbnail .swiper-wrapper .swiper-slide.swiper-slide-thumb-active p {
		background: url("../images/arrow-down-black.png") no-repeat right 0.5rem center rgba(254,244,219,1);
		background-size: 8px auto;	
	}
	.voice .swiper.voiceblock{
		padding: 50px 0 0;
	}
	.voice-box{
		padding: 20px;
	}
	.voice-ttl{
		margin-bottom: 20px;
		display: block;
	}
	.voice-ttl figure{
		margin: -70px 0 20px;
		text-align: center;
		position: relative;
		z-index: 1;
	}
	.voice-ttl figure img{
		width: 100px;
		height: auto;
	}
	.voice-ttl h3{
		font-size: 2.4rem;
		margin-bottom: 10px;
		text-align: center;
	}
	.voice-ttl h3 span{
		font-size: 1.6rem;
	}
	#sana .swiper-button-next, #sana .swiper-button-prev{
		width: 40px;
		height: 40px;
	}
	#sana .swiper-button-next{
		right: 5px;
	}
	#sana .swiper-button-prev{
		left:5px;
	}
	#sana .swiper-button-next::after, #sana .swiper-button-prev::after{
		font-size: 1.3rem;
	}
	/*mendan*/
	.mendan{
		background-size: 220px auto;
	}

	/*contact*/
	.form .container{
		padding: 50px 0 0;
	}

	/*====================================
	 FOOTER
	====================================*/
	/*footer*/
	footer{
		padding: 2rem 0;
		font-size: 1.2rem;
	}
	footer .container{
		width:94%;
	}
	footer figure{
		width: 70%;
		margin: 2rem auto;
	}
	footer .copy{
		font-size: 1.1rem;
	}

	#scrollUp {
		bottom:13rem;
		right: 0;
	}
	#scrollUp img{
		width:50px;
	}
	.btm-bnr{
		overflow-x: hidden;
		width: 100%;
		padding: 0 0 10px;
		background: rgba(0,0,0,0);
	}
	.btm-bnr .container {
		max-width: 90%;
		width: 90%;
		padding: 0;
		display: block;
	}
	.btm-bnr p{
		margin: 0 auto;
		text-align: center;
	}
	.btm-bnr p img{
		width: 90%;
	}
	.btm-bnr .cta-btn{
		margin: 0 auto;
		width: 100%;
	}
	.finger {
		right: -10px;
		bottom: 4px;
	}
	.finger img{
		width: 80px;
	}

.job {
	padding: 40px 0;
}
.job_title {
	font-size: 22px;
	width: 90%;
	padding: 6px 0;
}
.job_layout {
	width: 90%;
	flex-wrap: wrap;
	margin-top: 0px;
}
.job_content {
	width: 49%;
	padding: 16px 0;
	border-radius: 14px;
	margin-top: 20px;
}
.job_content_title {
	font-size: 14px;
	line-height: 1.4;
}
.job_content_img {
	margin-top: 10px;
	padding: 10px 0;
}
.job_content_img img {
	width: 100%;
}
.job_type {
	font-size: 15px;
	margin-top: 10px;
}
.job_area {
	margin-top: 6px;
	padding-top: 6px;
	font-size: 14px;
}
.job_money {
	margin-top: 20px;
}
.job_money_top {
	font-size: 16px;
	letter-spacing: 0.5em;
	padding: 0;
}
.job_money_under {
	font-size: 26px;
}
.job_money_under_small {
	font-size: 14px;
}
.job_comment {
	width: 92%;
	margin-top: 14px;
}
.job_comment_img {
	width: 20px;
}
.job_comment_text {
	font-size: 13px;
}
.job_link {
	border-radius: 14px;
	padding: 4px 0;
	margin-top: 20px;
}
.job_link_btn {
	width: 94%;
	border-radius: 20px;
	margin-top: 20px;
}
.job_link_btn a {
	font-size: 18px;
	padding: 10px 0;
}
}