@charset "UTF-8";

/*
 * Renewal compatibility copy of css/responsive-new.css.
 * Legacy rem values are fixed to px at 1rem = 16px.
 * See docs/renewal-legacy-css/README.md before editing or rolling back.
 */

/* ====================================================================
	IpadPro 1024px > 
==================================================================== */

/* ---------------------------------------------------
	Top
--------------------------------------------------- */

@media only screen and (max-width: 1024px) {
	.pc {
		display: none !important;
	 }
	 
	 .sp {
		display: block !important;
	 }

	 #introduction .business1 {
		padding: 70px 0 140px;
	 }

	 #introduction .business2 {
		padding: 20px 0 160px;
	 }

	 #introduction .business3 .imgArea {
		margin-top: 0;
	 }

	 #introduction .business4 {
		padding: 140px 0 200px;
	 }

	 #header #spMenu a {
		font-size: 22.4px;
	 }

	 #mv .top .sns {
		right: 6%;
	 }

	 #recruitment .info {
		width: 44%;
	 }


}



/* ====================================================================
	Ipad 768px > 
==================================================================== */

/* ---------------------------------------------------
	Top
--------------------------------------------------- */

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


	#introduction .business2 {
		padding: 20px 0 100px;
	}

	#introduction .business3 .imgArea {
		margin-top: 0;
	}

	#recruitment .img {
		width: 40%;
		margin-top: 0px;
	}

	#recruitment .info {
		width: 58%;
	}

	#mind .img {
		width: 50%;
	}

	#mind .info {
		width: 48%;
	}

	#mind .btn img, #about .btn img {
		max-height: 53px;
		max-width: 100%;
	}

	#introduction .business3 {
		padding: 0px 0 50px;
	}

	#introduction .business4 {
		padding: 120px 0 160px;
	}

	#recruitment .sub {
		font-size: 38.4px;
	}

	#header #spMenu a {
		font-size: 19.2px;
	}

	#mv .top .sns {
		width: 70px;
		right: 4%;
	}

	#introduction .business3 .item33 {
		left: 40px;
    	width: 24%;
	}

	#introduction .business4 .item43 {
		left: 20px;
		width: 29%;
	}

	#header .hInfo {
		padding-right: 20px;
		box-sizing: border-box;
	}

	
}


/* ====================================================================
	Smartphone 600px > 
==================================================================== */

/* ---------------------------------------------------
	Top
--------------------------------------------------- */

@media only screen and (max-width: 600px) {
	.onlySp {
		display: block !important;
	}

	#header .hInfo {
		display: none;
	}

	#header .logo {
		width: 60%;
	}

	#header.trigger .logo {
		width: 56%;
	}

	#header #spNav {
		width: 18%;
	}

	#mv .vision {
		width: 70%;
		padding: 10px 0;
	}

	#catch {
		padding: 30px 0;
	}

	#catch .ttl {
		margin: 0 auto 20px;
	}

	#news {
		padding: 100px 0 20px;
	}

	#news .box .item1 {
		top: -36px;
		height: 36px;
	}

	#news .box .item2 {
		top: -57px;
    	height: 60px;
	}

	#news .text {
		width: 100%;
	}

	#news .btn {
		width: 100%;
		text-align: right;
	}

	#news .box {
		padding: 10px 20px;
	}

	#introduction .business1::after {
		border-width: 4vh 0 0 100vw;
	}

	#introduction .business1 {
		padding: 50px 0 100px;
	}

	#introduction .business2::after {
		border-width: 0 0 5vh 100vw;
	}

	#introduction .business2 {
		padding: 20px 0 80px;
	}

	#introduction .business4::after {
		border-width: 0 100vw 5vh 0;
	}

	#introduction .business3 {
		padding: 30px 0 40px;
	}

	#introduction .business4 {
		padding: 80px 0 100px;
	}

	#recruitment .info {
		width: 100%;
	}

	#recruitment .img {
		width: 70%;
		margin: 40px auto;
	}

	#recruitment .sub {
		font-size: 32px;
	}

	#mind .info {
		width: 100%;
	}

	#mind .img {
		width: 90%;
		margin: 40px auto;
	}

	#mind .btn img, #about .btn img {
		max-height: 43px;
	}

	#about .img {
		width: 100%;
		margin-bottom: 30px;
	}

	#about .info {
		width: 100%;
	}

	#recruitment .recruitImg2 {
		margin: 0;
	}

	#about {
		background-size: 200% 100%;
	}

	#header.show #spMenu ul li.goToTop {
		width: 100%;
	}

	#header.show #spMenu ul li.goToTop a {
		font-size: 24px;
	}

	#header.show #spMenu ul li.goToTop a span {
		font-size: 16px;
	}

	#header.show #spMenu ul li {
		width: 100%;
	}

	#header #nav li a {
		font-size: 16px;
	}

	#header #nav .sns .ig {
		width: 30px;
	}

	#header #nav .sns .fb {
		width: 30px;
	}

	#mv .top .sns {
		width: 50px;
		right: 1%;
	}

	#mv .top .sns .follow {
		font-size: 9.6px;
	}

	#introduction .business1 .item7 {
		top: -20px;
		left: -20px;
	}

	#introduction .business1 .item8 {
		top: -40px;
		right: -20px;
	}

	#introduction .business1 .item10 {
		right: 70px;
    	width: 26%;
	}

	#introduction .business1 .item9 {
		left: -30px;
	}

	#introduction .business1 .item12 {
		bottom: 4px;
		width: 28%;
	}

	#introduction .business2 .item24 {
		bottom: 0px;
		left: 6px;
		width: 27%;
	}

	#introduction .business3 .item25 {
		top: -30px;
		left: -25px;
	}

	#introduction .business3 .item33 {
		bottom: 3px;
		left: 10px;
	}

	#introduction .business3 .item31 {
		width: 10%;
	}

	#introduction .business4 .item34 {
		top: -30px;
		left: -30px;
	}

	#introduction .business4 .item35 {
		top: -30px;
		right: 33%;
	}

	#introduction .business4 .item36 {
		top: -10px;
	}

	#introduction .business4 .item37 {
		top: 14%;
	}

	#introduction .business4 .item39 {
		top: -30px
	}

	#introduction .business4 .item40 {
		top: 0px;
	}

	#introduction .business4 .item43 {
		bottom: 0px;
		left: 10px;
		width: 28%;
	}

	#header.trigger + #mv .top .sns {
		width: 48px;
		right: 0%;
	}

	#header.trigger + #mv .top .sns .follow {
		font-size: 8px;
	}

	#about {
		padding: 70px 0;
		background: url(../img-renew/aboutBg-sp.png) no-repeat;
		background-size: 100% auto;
		object-fit: cover;
	 }
	
	 #mv .ttl {
		width: 90%;
		padding: 0;
	 }

	 #catch .desc {
		font-size: 12.8px;
	 }

	 #introduction .business1 .item12 {
		left: 2px;
	 }

	 #introduction .business3 .item26 {
		top: -30px;
		left: 8%;
		width: 30%;
	 }




}