@charset "UTF-8";

.mainimg_under {
	
	position: relative;
	height: 39.8rem;
	background-image: url('../img/mainimg_under.webp');
	background-size: cover;
	background-position: center center;
	margin-top: 7.9rem;

}

.mainimg_under .catch1 {

	position: absolute;
	bottom: 5.2rem;
	left:   18.8rem;
	width:  21.8rem;
	height: 29rem;
	padding: 1.8rem;

}

.mainimg_under .catch1:after {
	
	opacity: 0.8;
	position: absolute;
	top:  0;
	left: 0;
	content: "";
	width:  100%;
	height: 100%;
	background: #c96236;

}

.mainimg_under .catch1 img {
	
	position: absolute;
	z-index: 2;
	top: 2.4rem;
	width: 17.8rem;

}

.mainimg_under .catch2 {

	position: absolute;
	top:  13.6rem;
	left: 74.6rem;
	width: 41.2rem;

}

#const {
	
	padding-top:    6.4rem;
	padding-bottom: 11.2rem;
	background: #C1C2BF;

}

#const .inner {

	width:  102rem;
	margin: 0 auto;

}

#const h2 {

	position: relative;
	display: block;
	width:  102rem;
	height: 12.6rem;
	margin-bottom: 5rem;
	padding-top: 0.8rem;
	padding-left: 2.9rem;
	color: #fff;

}

#const h2:before {
	
	opacity: 0.8;
	position: absolute;
	top:  0;
	left: 0;
	content: "";
	width:  100%;
	height: 100%;
	background: #c96236;

}

#const h2 .ja {
	
	position: relative;
	z-index: 3;
	font-family: "fot-chiaro-std", sans-serif;
	font-size: 5.3rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.11em;

}

#const h2 .en {
	
	opacity: 0.5;
	position: relative;
	z-index: 3;
	margin-top: -0.08em;
	margin-left: 1.96em;
	font-family: "futura-pt", sans-serif;
	font-size: 6rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.143em;

}

#const h2 .man {

	position: absolute;
	top:   0;
	right: 2rem;
	z-index: 4;
	width: 12.9rem;
	transform-origin: bottom;
	transition: all 0.15s;

}

#const .line1 {
	
	margin-bottom: 19.4rem;
	padding-left: 0.2rem;
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
	font-size: 2.4rem;
	font-weight: 900;
	color: #c96236;
	letter-spacing: 0.2em;

}

#const .box_wrap {

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	width: 132.8rem;
	margin: 0 auto;

}

#const .box_wrap .box {
	
	width: 40.6%;
	margin-bottom: 14rem;

}

#const .box_wrap .box .img {
	
	position: relative;
	margin-bottom: 1.6rem;
	background: #000;
	
	opacity: 0;
	perspective-origin: left center;
	
}

#const .box_wrap .box.active .img {

	animation: flipLeftAnime 0.6s forwards;

}

@keyframes flipLeftAnime {

  from {
  
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
    
   }
   
  to {
  
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
    
    
  }
  
}

#const .box_wrap .box1 .img {

	padding: 0 13.4rem;

}

#const .box_wrap .box2 .img {

	padding: 0 13.4rem;

}

#const .box_wrap .box3 .img {

	padding: 0 3rem;

}

#const .box_wrap .box4 .img {

	padding: 0 3rem;

}

#const .box_wrap .box5 .img {

	padding: 0 3rem;

}

#const .box_wrap .box6 .img {

	padding: 0 13.4rem;

}

#const .box_wrap .box7 .img {

	padding: 0 3rem;

}

#const .box_wrap .box8 .img {

	padding: 0 3rem;

}

#const .box_wrap .box .img img {

	position: relative;
	z-index: 2;

}

#const .box_wrap .box h3 {

	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
	font-size: 2.4rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	color: #c96236;
	white-space: nowrap;

}

#business {
	
	padding-top:    11.8rem;
	padding-bottom: 9.6rem;
	background: #C1C2BF;

}

#business .inner {

	width:  102rem;
	margin: 0 auto;

}

#business h2 {

	position: relative;
	display: block;
	width:  102rem;
	height: 12.6rem;
	margin-bottom: 5rem;
	padding-top: 0.8rem;
	padding-left: 2.9rem;
	color: #fff;

}

#business h2:before {
	
	opacity: 0.8;
	position: absolute;
	top:  0;
	left: 0;
	content: "";
	width:  100%;
	height: 100%;
	background: #c96236;

}

#business h2 .ja {
	
	position: relative;
	z-index: 3;
	font-family: "fot-chiaro-std", sans-serif;
	font-size: 5.3rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.11em;

}

#business h2 .en {
	
	opacity: 0.5;
	position: relative;
	z-index: 3;
	margin-top: -0.08em;
	margin-left: 1.96em;
	font-family: "futura-pt", sans-serif;
	font-size: 6rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.143em;

}

#business h2 .man {

	position: absolute;
	top:   0;
	right: 2rem;
	z-index: 4;
	width: 12.9rem;
	transform-origin: bottom;
	transition: all 0.15s;

}

#business .line1 {
	
	margin-bottom: 16.6rem;
	padding-left: 0.2rem;
	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
	font-size: 2.4rem;
	font-weight: 900;
	color: #c96236;
	letter-spacing: 0.2em;

}

#business .box_wrap {

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	width: 132.8rem;
	margin: 0 auto;

}

#business .box_wrap .box {
	
	width: 40.6%;
	margin-bottom: 14rem;

}

#business .box_wrap .box .img {
	
	position: relative;
	margin-bottom: 1.6rem;
	background: #000;
	
	opacity: 0;
	perspective-origin: left center;

}

#business .box_wrap .box.active .img {

	animation: flipLeftAnime 0.6s forwards

}

#business .box_wrap .box1 .img {

	padding: 0 16.6rem;

}

#business .box_wrap .box2 .img {

	padding: 0 2.8rem;

}

#business .box_wrap .box3 .img {

	padding: 0 13.4rem;

}

#business .box_wrap .box4 .img {

	padding: 0 2.8rem;

}

#business .box_wrap .box5 .img {

	padding: 0 13.4rem;

}

#business .box_wrap .box6 .img {

	padding: 0 13.3rem;

}

#business .box_wrap .box7 .img {

	padding: 0rem;

}

#business .box_wrap .box8 .img {

	padding: 0 13.2rem;

}

#business .box_wrap .box .img img {

	position: relative;
	z-index: 2;

}

#business .box_wrap .box h3 {

	font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
	font-size: 2.4rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	color: #c96236;
	white-space: nowrap;

}

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

	html {
		
		font-size: 61.8489583%;
		
	}

}


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

	html {
		
		font-size: 61.5234%;
		
	}

}


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

	html {
		
		font-size: 60.5468%;
		
	}

}


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

	html {
		
		font-size: 59.89583%;
		
	}

}


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

	html {
		
		font-size: 59.25%;
		
	}

}


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

	html {
		
		font-size: 58.59375%;
		
	}

}


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

	html {
		
		font-size: 58.2682%;
		
	}

}


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

	html {
		
		font-size: 57.6171%;
		
	}

}


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

	html {
		
		font-size: 56.96614%;
		
	}

}


/* MacBook Pro16 */
@media only screen and (max-width: 1728px) {

	html {
		
		font-size: 56.25%;
		
	}

}


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

	html {
		
		font-size: 55.33854%;
		
	}

}


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

	html {
		
		font-size: 54.375%;
		
	}

}


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

	html {
		
		font-size: 53.3854%;
		
	}

}


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

	html {
		
		font-size: 52.75%;
		
	}

}


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

	html {
		
		font-size: 52.0833%;
		
	}

}


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

	html {
		
		font-size: 51.125%;
		
	}

}


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

	html {
		
		font-size: 50.1302%;
		
	}

}


/* MacBook Pro14 */
@media only screen and (max-width: 1512px) {

	html {
		
		font-size: 49.25%;
		
	}

}


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

	html {
		
		font-size: 48.5026%;
		
	}

}


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

	html {
		
		font-size: 47.526%;
		
	}

}


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

	html {
		
		font-size: 46.875%;
		
	}

}


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

	html {
		
		font-size: 46.223958%;
		
	}

}


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

	html {
		
		font-size: 45.562%;
		
	}

}


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

	html {
		
		font-size: 44.9218%;
		
	}

}


/* 中サイズ */
@media only screen and (max-width: 1366px) {

	html {
		
		font-size: 44.4375%;
		
	}

}


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

	html {
		
		font-size: 43.61979%;
		
	}

}


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

	html {
		
		font-size: 43%;
		
	}

}


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

	html {
		
		font-size: 42.3177%;
		
	}

}


/* MacBook Air */
@media only screen and (max-width: 1280px) {

	html {
		
		font-size: 41.6875%;
		
	}

}


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

	html {
		
		font-size: 41.0156%;
		
	}

}


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

	html {
		
		font-size: 40.375%;
		
	}

}


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

	html {
		
		font-size: 39.71354%;
		
	}

}


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

	html {
		
		font-size: 39.0625%;
		
	}

}


/* iPad Pro11の横 */
@media only screen and (max-width: 1194px) {

	html {
		
		font-size: 38.875%;
		
	}

}


/* iPad 5th Airの横 */
@media only screen and (max-width: 1180px) {

	html {
		
		font-size: 38.4375%;
		
	}

}


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

	html {
		
		font-size: 37.7604%;
		
	}

}


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

	html {
		
		font-size: 37.434895%;
		
	}

}


/* iPad 6th Miniの横 */
@media only screen and (max-width: 1133px) {

	html {
		
		font-size: 36.875%;
		
	}

}


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

	html {
		
		font-size: 36.4583%;
		
	}

}


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

	html {
		
		font-size: 35.8125%;
		
	}

}


/* iPad 9thの横 */
@media only screen and (max-width: 1080px) {

	html {
		
		font-size: 35.8125%;
		
	}

}


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

	html {
		
		font-size: 34.5052%;
		
	}

}


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

	html {
		
		font-size: 34.17968%;
		
	}

}


/* iPadPro */
@media only screen and (max-width: 1024px) {

	html {
		
		font-size: 33.3125%;
		
	}
	
	.mainimg_under {
		
		height: 100rem;
		background-image: url('../img/mainimg_under.webp');
		margin-top: 22rem;

	}

	.mainimg_under .catch1 {

		bottom: 11%;
		left:   3%;
		width:  55.2rem;
		height: 74.4rem;
		padding: 3.6rem;

	}

	.mainimg_under .catch1 img {
		
		z-index: 2;
		top: 4.8rem;
		width: 48rem;

	}

	.mainimg_under .catch2 {

		top:  36%;
		left: 55%;
		width: 77rem;

	}

	#const {
		
		padding-top:    16rem;
		padding-bottom: 2rem;
		
	}

	#const .inner {

		width:  150rem;

	}

	#const h2 {
		
		width:  150rem;
		height: 23rem;
		margin: 0 auto;
		margin-bottom: 12rem;
		padding-top: 3rem;
		padding-left: 2.9rem;

	}

	#const h2 .ja {
		
		font-size: 11rem;
		letter-spacing: 0.06em;

	}

	#const h2 .en {
		
		margin-top: -0.08em;
		margin-left: 1.96em;
		font-size: 9rem;
		letter-spacing: 0.11em;

	}

	#const h2 .man {

		top:   0;
		right: 3rem;
		z-index: 4;
		width: 23.7rem;

	}

	#const .line1 {
		
		margin-bottom: 16.6rem;
		padding-left: 0.2rem;
		font-size: 6.4rem;
		letter-spacing: 0.08em;

	}

	#const .box_wrap {

	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
		width: 88%;

	}

	#const .box_wrap .box {
		
		width: 44.5%;
		margin-bottom: 12rem;

	}

	#const .box_wrap .box .img {
		
		margin-bottom: 6rem;

	}
	
	#const .box_wrap .box1 .img {

		padding: 0 14.6rem;

	}

	#const .box_wrap .box2 .img {

		padding: 0 14.6rem;

	}

	#const .box_wrap .box3 .img {

		padding: 0 1rem;

	}

	#const .box_wrap .box4 .img {

		padding: 0 1rem;

	}

	#const .box_wrap .box5 .img {

		padding: 0 1rem;

	}

	#const .box_wrap .box6 .img {

		padding: 0 16.6rem;

	}

	#const .box_wrap .box7 .img {

		padding: 0 1rem;

	}

	#const .box_wrap .box8 .img {

		padding: 0 1rem;

	}

	#const .box_wrap .box h3 {

		font-size: 7rem;
		letter-spacing: 0.04em;
		white-space: nowrap;

	}
	
	#business {
		
		padding-top:    16rem;
		padding-bottom: 2rem;
		
	}

	#business .inner {

		width:  150rem;

	}

	#business h2 {
		
		width:  150rem;
		height: 23rem;
		margin: 0 auto;
		margin-bottom: 12rem;
		padding-top: 3rem;
		padding-left: 2.9rem;

	}

	#business h2 .ja {
		
		font-size: 11rem;
		letter-spacing: 0.06em;

	}

	#business h2 .en {
		
		margin-top: -0.08em;
		margin-left: 1.96em;
		font-size: 9rem;
		letter-spacing: 0.11em;

	}

	#business h2 .man {

		top:   0;
		right: 3rem;
		z-index: 4;
		width: 23.7rem;

	}

	#business .line1 {
		
		margin-bottom: 16.6rem;
		padding-left: 0.2rem;
		font-size: 6.4rem;
		letter-spacing: 0.08em;

	}

	#business .box_wrap {

	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
		width: 88%;

	}

	#business .box_wrap .box {
		
		width: 44.5%;
		margin-bottom: 12rem;

	}

	#business .box_wrap .box .img {
		
		margin-bottom: 6rem;

	}
	
	#business .box_wrap .box1 .img {

		padding: 0 21.6rem;

	}

	#business .box_wrap .box2 .img {

		padding: 0 1rem;

	}

	#business .box_wrap .box3 .img {

		padding: 0 16.6rem;

	}

	#business .box_wrap .box4 .img {

		padding: 0 1rem;

	}

	#business .box_wrap .box5 .img {

		padding: 0 14.4rem;

	}

	#business .box_wrap .box6 .img {

		padding: 0 14.4rem;

	}

	#business .box_wrap .box7 .img {

		padding: 0rem;

	}

	#business .box_wrap .box8 .img {

		padding: 0 18.2rem;

	}

	#business .box_wrap .box h3 {

		font-size: 7rem;
		letter-spacing: 0.04em;
		white-space: nowrap;

	}

}


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

	html {
		
		font-size: 32.552%;
		
	}

}


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

	html {
		
		font-size: 31.90104%;
		
	}

}


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

	html {
		
		font-size: 31.57552%;
		
	}

}


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

	html {
		
		font-size: 30.937%;
		
	}
	
}


/* iPhone14 ProMaxの横 */
@media only screen and (max-width: 932px) {

	html {
		
		font-size: 30.937%;
		
	}
	
}


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

	html {
		
		font-size: 29.62239%;
		
	}
	
}


/* XRの横 */
@media only screen and (max-width: 896px) {

	html {
		
		font-size: 29.2%;
		
	}
	
}


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

	html {
		
		font-size: 28.64583%;
		
	}
	
}


/* AndroidのＬの横 */
@media only screen and (max-width: 854px) {

	html {
		
		font-size: 27.8125%;
		
	}

}


/* iPhone14 Proの横 */
@media only screen and (max-width: 852px) {

	html {
		
		font-size: 27.75%;
		
	}

}


/* iPhone14の横*/
@media only screen and (max-width: 844px) {

	html {
		
		font-size: 27.5%;
		
	}

}



/* iPad Pro11 */
@media only screen and (max-width: 834px) {

	html {
		
		font-size: 27.125%;
		
	}

}


/* iPad Air */
@media only screen and (max-width: 820px) {

	html {
		
		font-size: 26.687%;
		
	}

}


/* iPhone13 miniの横 */
@media only screen and (max-width: 812px) {

	html {
		
		font-size: 26.437%;
		
	}

}


/* iPad 9th */
@media only screen and (max-width: 810px) {

	html {
		
		
		
	}

}


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

	html {
		
		font-size: 25.7161%;
		
	}

}


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

	html {
		
		font-size: 25%;
		
	}

}


/* iPad 6th Mini */
@media only screen and (max-width: 744px) {

	html {
		
		font-size: 24.25%;
		
	}

}


/* iPhonePlusの横 */
@media only screen and (max-width: 736px) {

	html {
		
		font-size: 23.937%;
		
	}

}


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

	html {
		
		font-size: 23.4375%;
		
	}

}


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

	html {
		
		font-size: 22.75%;
		
	}

}


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

	html {
		
		font-size: 22.1354%;
		
	}

}


/* iPhone8の横 */
@media only screen and (max-width: 667px) {

	html {
		
		font-size: 21.687%;
		
	}

}


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

	html {
		
		font-size: 21.158854%;
		
	}

}


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

	html {
		
		font-size: 20.507%;
		
	}

}


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

	html {
		
		font-size: 20.18229%;
		
	}

}


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

	html {
		
		font-size: 19.53125%;
		
	}

}


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

	html {
		
		font-size: 18.8802%;
		
	}

}


/* iPhone5の横 */
@media only screen and (max-width: 568px) {

	html {
		
		font-size: 18.5%;
		
	}

}


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

	html {
		
		font-size: 17.5781%;
		
	}

}


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

	html {
		
		font-size: 16.927%;
		
	}

}


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

	html {
		
		font-size: 16.276014%;
		
	}

}


/* AndLoidL */
@media only screen and (max-width: 480px) {

	html {
		
		font-size: 15.625%;
		
	}

}


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

	html {
		
		font-size: 14.648%;
		
	}

}


/* Iphone13 Pro Max */
@media only screen and (max-width: 430px) {

	html {
		
		font-size: 14%;
		
	}

}


/* Iphone12 Pro Max */
@media only screen and (max-width: 428px) {

	html {
		
		font-size: 13.93229%;
		
	}

}


/* iPhonePlus */
@media only screen and (max-width: 414px) {

	html {
		
		font-size: 13.5%;
		
	}

}


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

	html {
		
		font-size: 13.02083%;
		
	}

}


/* iPhone14 Pro */
@media only screen and (max-width: 393px) {

	html {
		
		font-size: 12.812%;
		
	}

}


/* iPhone12 Pro */
@media only screen and (max-width: 390px) {

	html {
		
		font-size: 12.687%;
		
	}

}


/* iPhone8 */
@media only screen and (max-width: 375px) {

	html {
		
		font-size: 12.187%;
		
	}

}


/* Galaxy */
@media only screen and (max-width: 360px) {

	html {
		
		font-size: 11.75%;
		
	}

}


/* iPhone5 */
@media only screen and (max-width: 320px) {

	html {
		
		font-size: 10.437%;
		
	}

}