@charset "UTF-8";

.main .visual {
  position: relative;
  height: 890px;
}
.main .visual::before {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	background: url(../images/index/bg.webp) no-repeat center bottom / cover;
	position: absolute;
	left: 0;
	top: 0;
	transition: all ease 0.6s +0.6s;
	opacity: 0;
	height: 1200px;
	z-index: -1;
}
.main .visual.active::before {opacity: 1;}
.opening {height: 890px;display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;z-index: 1000;width: 100%;transition: 1s ease all;}
.opening.hide {
	opacity: 0;
	pointer-events: none;
}
.opening::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 10000px;
	background: #f4f4f4;
}
.opening .logo {width: 250px;position: relative;}
.opening .logo img {opacity: 0;transition: all ease 1s;}
.opening .logo .img1 {position: absolute;left: 0;top: 0; }
.opening .logo .img2 {transition-delay: 0.5s;}
.opening.active .logo img {
	opacity: 1;
}
.main .visual .bg {
  position: absolute;
  left: 0;
  top: -120px;
  width: 100%;
  pointer-events: none;
}
.main .visual .bg .mask {
  width: 1650px;
  aspect-ratio: 1;
  clip-path: url(#triangleClip);
  -webkit-clip-path: url(#triangleClip);
  margin: 0;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

/* 画像 */
.main .visual .bg .mask img {
  width: 1650px;
  height: 1101px;
  object-fit: cover;
}

.main .visual .bg .mask-shape {
  transform-box: fill-box;
  transform-origin: 60% 70%;
  transition: transform 1s ease;
  transform: translate(-0.104px, -0.396px) scale(0.077, 0.08) rotate(18.3deg);
}
.main .visual .bg.active .mask-shape {
  transform: translate(0, -0.34px) scale(1) rotate(0);
}
.main .visual > .inner {height: 100%;position: relative;box-sizing: border-box;max-width: 1200px;margin: 0 auto;padding: 10px 0 0 0;display: flex;align-items: start;}

.main .visual .info {margin: 430px 0 0 auto;}
.main .visual .info .copy {
	font-size: 40px;
	letter-spacing: 0.05em;
	position: relative;
	left: 20px;
	transition: all ease 1s;
	opacity: 0;
	line-height: 1.5em;
}
.main .visual.active .info .copy {
    opacity: 1;
    left: 0;
}
.main .visual .info .text {
	font-size: 20px;
	margin-top: 46px;
	left: 20px;
	transition: all ease 1s +0.4s;
	opacity: 0;
	position: relative;
}
.main .visual.active .info .text {
    opacity: 1;
    left: 0;
}
.main .intro {padding-top: 150px;}
.main .intro > .inner {max-width: 1200px;margin: 0 auto;width: 94%;color: #fff;}
.main .intro .fbox {display: flex;justify-content: space-between;}
.main .intro .fbox .info {
}
.main .intro .fbox .info .lead {font-size: 30px;line-height: 1.7em;}
.main .intro .fbox .info .text {font-size: 15px;margin-top: 67px;}
.main .intro .fbox .info .btstyle {margin: 64px 0 0 0;}
.main .intro .fbox .info .btstyle span {padding-left: 30px;}
.main .intro .fbox .style {
	width: 560px;
	margin-top: 60px;
}
.main .intro .fbox .style h2 {
	font-size: 30px;
	line-height: 1.6em;
}
.main .intro .fbox .style ul {
	margin-top: 50px;
	border-bottom: 1px solid #fff;
}
.main .intro .fbox .style ul li {
	border-top: 1px solid #fff;
	padding: 36px 0;
	position: relative;
}
.main .intro .fbox .style ul li .title {
	font-size: 20px;
	line-height: 1.2em;
	border-left: 1px solid #fff;
	padding-left: 10px;
}
.main .intro .fbox .style ul li.ours .title {
	font-size: 25px;
}
.main .intro .fbox .style ul li .title .big {
	font-size: 30px;
	display: inline-block;
	line-height: 1em;
}
.main .intro .fbox .style ul li .title .en {
	display: block;
	font-size: 13px;
	line-height: 1.6em;
	margin-top: 3px;
}
.main .intro .fbox .style ul li .text {
	font-size: 13px;
	margin-top: 16px;
}
.main .intro .fbox .style ul li.ours .text {font-size: 15px;}
.main .intro .fbox .style ul li .mark {
	position: absolute;
	right: 0;
	bottom: 44px;
	width: 126px;
}
.main .intro .fbox .style ul li .mark p {
	font-size: 13px;
	text-align: center;
	margin-bottom: 20px;
}
.main .intro .photo {
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: start;
	width: 1200px;
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 100;
}
.main .intro .photo .img {
	
}
.main .intro .photo .img1 {
	width: 505px;
	height: 480px;
}
.main .intro .photo .img2 {
	width: 642px;
	margin-top: 83px;
	height: 397px;
}
.main .intro .photo .img3 {
	width: 712px;
	margin-top: 55px;
	height: 500px;
}
.main .intro .photo .img4 {
	width: 420px;
	margin-top: 55px;
	height: 324px;
}
.main .instagram {
	margin-top: -270px;
	background: url(../images/index/img_feature.webp) no-repeat center center / cover;
	height: 820px;
}
.main .instagram > .inner {max-width: 1200px;margin: 0 auto;width: 88%;height: 100%;box-sizing: border-box;position: relative;}
.main .instagram .bt_instagram {
	display: flex;
	width: 108px;
	height: 108px;
	background: #83775b;
	position: absolute;
	right: 0;
	bottom: 54px;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
}
.main .instagram .bt_instagram img {width: 48px;}
.main .feature {background: #e1dcd2;padding: 150px 0;}
.main .feature > .inner {max-width: 1200px;margin: 0 auto;width: 94%;}
.main .feature h2 {font-size: 30px;}
.main .feature ul {display: flex;flex-wrap: wrap;margin-top: 60px;gap: 60px 0;}
.main .feature ul li {width: calc(100% / 3);box-sizing: border-box;border-right: 1px solid #000;padding: 0 30px;}
.main .feature ul li:nth-child(3n-2) {
	border-left: 1px solid #000
}
.main .feature ul li .title {font-size: 20px;line-height: 1.5em;}
.main .feature ul li .en {font-size: 13px;margin-top: 6px;line-height: 1.5em;}
.main .feature ul li .text {font-size: 13px;line-height: 1.8em;margin-top: 24px;min-height: 7.2em;}
.main .feature ul li .img {max-width: 275px;width: 90%;margin: 20px auto 0 auto;}
.main .feature .photo {
	margin-top: 160px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: start;
	width: 1200px;
	position: relative;
	left: 50%;
	transform: translate(-50%, 0);
}
.main .feature .photo .img {
	
}
.main .feature .photo .img1 {
	width: 500px;
	height: 686px;
}
.main .feature .photo .img2 {
	width: 635px;
	margin-top: 43px;
	height: 407px;
}
.main .feature .photo .img3 {
	width: 722px;
	height: 393px;
	margin-top: 70px;
}
.main .feature .photo .img4 {
	width: 422px;
	margin-top: -183px;
	height: 320px;
}
.main .feature .photo .img5 {
	width: 722px;
	margin-top: 50px;
	height: 432px;
}
.main .feature .photo .img6 {
	width: 422px;
	margin-top: -273px;
	height: 649px;
}
.main .kbc {
	background: url(../images/index/img_kbc.webp) no-repeat center center / cover;
	padding: 160px 0;
}
.main .kbc > .inner {
	max-width: 1200px;
	margin: 0 auto;
	width: 94%;
}
.main .kbc .lead {
	font-size: 30px;
	line-height: 1.6em;
	letter-spacing: 0.05em;
}
.main .kbc .text {
	font-size: 15px;
	margin-top: 75px;
}
.main .kbc .bt_more {
	font-size: 15px;
	color: #fff;
	width: 310px;
	height: 77px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	padding-left: 26px;
	background: #212d51;
	margin-top: 179px;
}
.main .kbc .bt_more::before {
	content: "";
	display: block;
	width: 21px;
	height: 50px;
	position: absolute;
	left: 32px;
	top: 50%;
	background: url(../images/icon_kbc.webp) no-repeat center center / contain;
	transform: translate(0, -50%);
}

/**************************************************************/
/** SP ********************************************************/
/**************************************************************/
@media screen and (max-width: 767px) {
			    
	.main .visual {
	  position: relative;
	  height: 530px;
	}
	.main .visual::before {
		content: "";
		display: block;
		width: 100%;
		height: 0;
		background: url(../images/index/bg.webp) no-repeat center bottom / cover;
		position: absolute;
		left: 0;
		top: 0;
		transition: all ease 0.6s +0.6s;
		opacity: 0;
		height: 700px;
		z-index: -1;
	}
	.main .visual.active::before {opacity: 1;}
	.opening {height: 390px;display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;z-index: 1000;width: 100%;transition: 1s ease all;}
	.opening.hide {
		opacity: 0;
		pointer-events: none;
	}
	.opening::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 10000px;
		background: #f4f4f4;
	}
	.opening .logo {width: 130px;position: relative;}
	.opening .logo img {opacity: 0;transition: all ease 1s;}
	.opening .logo .img1 {position: absolute;left: 0;top: 0; }
	.opening .logo .img2 {transition-delay: 0.5s;}
	.opening.active .logo img {
		opacity: 1;
	}
	.main .visual .bg {
	  position: absolute;
	  width: 100%;
	  pointer-events: none;
	  left: -7%;
	  top: 0;
	}
	.main .visual .bg .mask {
	  width: 1650px;
	  aspect-ratio: 1;
	  clip-path: url(#triangleClip);
	  -webkit-clip-path: url(#triangleClip);
	  margin: 0 auto;
	  position: relative;
	  left: 50%;
	  transform: translate(-50%, 0) scale(0.45);
	  transform-origin: 50% 0;
	}
	
	/* 画像 */
	.main .visual .bg .mask img {
	  width: 1650px;
	  height: 1101px;
	  object-fit: cover;
	}
	
	.main .visual .bg .mask-shape {
	  transform-box: fill-box;
	  transform-origin: 60% 70%;
	  transition: transform 1s ease;
	  transform: translate(-0.068px, -0.482px) scale(0.086, 0.09) rotate(18.3deg);
	}
	.main .visual .bg.active .mask-shape {
	  transform: translate(0, -0.34px) scale(1) rotate(0);
	}
	.main .visual > .inner {position: relative;box-sizing: border-box;max-width: 1200px;margin: 0 auto;padding: 10px 0 0 0;display: flex;align-items: start;padding: 0 5%;}
	
	.main .visual .info {margin: 198px 0 0 auto;text-align: right;}
	.main .visual .info .copy {
		font-size: 30px;
		letter-spacing: 0.05em;
		position: relative;
		left: 20px;
		transition: all ease 1s;
		opacity: 0;
		line-height: 1.5em;
		margin-right: -20px;
	}
	.main .visual.active .info .copy {
	    opacity: 1;
	    left: 0;
	}
	.main .visual .info .text {
		font-size: 16px;
		margin-top: 16px;
		left: 20px;
		transition: all ease 1s +0.4s;
		opacity: 0;
		position: relative;
	}
	.main .visual.active .info .text {
	    opacity: 1;
	    left: 0;
	}
	.main .intro {padding-top: 0;}
	.main .intro > .inner {max-width: 1200px;margin: 0 auto;width: 90%;color: #fff;}
	.main .intro .fbox {display: block;}
	.main .intro .fbox .info {
	}
	.main .intro .fbox .info .lead {font-size: 22px;line-height: 1.9em;}
	.main .intro .fbox .info .text {font-size: 15px;margin-top: 30px;}
	.main .intro .fbox .info .btstyle {margin: 38px 0 0 0;}
	.main .intro .fbox .info .btstyle span {padding-left: 30px;}
	.main .intro .fbox .style {
		width: auto;
		margin-top: 70px;
	}
	.main .intro .fbox .style h2 {
		font-size: 22px;
		line-height: 1.6em;
	}
	.main .intro .fbox .style ul {
		margin-top: 30px;
		border-bottom: 0.5px solid #fff;
	}
	.main .intro .fbox .style ul li {
		border-top: 0.5px solid #fff;
		padding: 36px 0;
		position: relative;
	}
	.main .intro .fbox .style ul li .title {
		font-size: 18px;
		line-height: 1.2em;
		border-left: 1px solid #fff;
		padding-left: 10px;
		margin-left: 4px;
	}
	.main .intro .fbox .style ul li.ours .title {
		font-size: 18px;
	}
	.main .intro .fbox .style ul li .title .big {
		font-size: 24px;
		display: inline-block;
		line-height: 1em;
	}
	.main .intro .fbox .style ul li .title .en {
		display: block;
		font-size: 11px;
		line-height: 1.6em;
		margin-top: 3px;
	}
	.main .intro .fbox .style ul li .text {
		font-size: 13px;
		margin-top: 16px;
	}
	.main .intro .fbox .style ul li.ours .text {font-size: 15px;margin-top: 33px;}
	.main .intro .fbox .style ul li .mark {
		position: absolute;
		right: 0;
		bottom: auto;
		width: 96px;
		top: 20px;
	}
	.main .intro .fbox .style ul li .mark p {
		font-size: 11px;
		text-align: center;
		margin-bottom: 0px;
	}
	.main .intro .fbox .style ul li .mark .img {
	width: 66px;
	margin: 0 auto;
	}
	.main .intro .photo {
		margin-top: 70px;
		display: block;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: start;
		width: 90vw;
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.main .intro .photo .img {
		
	}
	.main .intro .photo .img1 {
		width: 100%;
		height: auto;
		aspect-ratio: 505 / 480;
	}
	.main .intro .photo .img2 {
		width: 100%;
		margin-top: 30px;
		height: auto;
		aspect-ratio: 642 / 397;
	}
	.main .intro .photo .img3 {
		width: 100%;
		margin-top: 30px;
		height: auto;
		aspect-ratio: 712 / 500;
	}
	.main .intro .photo .img4 {
		width: 100%;
		margin-top: 30px;
		height: auto;
		aspect-ratio: 420 / 324;
	}
	.main .instagram {
		margin-top: -130px;
		background: url(../images/index/img_feature.webp) no-repeat center center / cover;
		height: 450px;
	}
	.main .instagram > .inner {max-width: 1200px;margin: 0 auto;width: 90%;height: 100%;box-sizing: border-box;position: relative;}
	.main .instagram .bt_instagram {
		display: flex;
		width: 88px;
		height: 88px;
		background: #83775b;
		position: absolute;
		right: 0;
		bottom: 32px;
		justify-content: center;
		align-items: center;
		border-radius: 100px;
	}
	.main .instagram .bt_instagram img {width: 40px;}
	.main .feature {background: #e1dcd2;padding: 70px 0;}
	.main .feature > .inner {max-width: 1200px;margin: 0 auto;width: 90%;}
	.main .feature h2 {font-size: 20px;}
	.main .feature ul {display: block;flex-wrap: wrap;margin-top: 30px;border-bottom: 1px solid #000;}
	.main .feature ul li {width: auto;box-sizing: border-box;border: none;border-top: 1px solid #000;padding: 25px 0;}
	.main .feature ul li:nth-child(3n-2) {
		border-left: none;
	}
	.main .feature ul li .title {font-size: 18px;line-height: 1.5em;}
	.main .feature ul li .en {font-size: 11px;margin-top: 6px;line-height: 1.5em;}
	.main .feature ul li .text {font-size: 13px;line-height: 1.8em;margin-top: 16px;min-height: 0;}
	.main .feature ul li .img {max-width: 275px;width: 230px;margin: 20px auto 0 auto;}
	.main .feature .photo {
		margin-top: 70px;
		display: block;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: start;
		width: 90vw;
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.main .feature .photo .img {
		
	}
	.main .feature .photo .img1 {
		width: 100%;
		height: auto;
		aspect-ratio: 500 / 686;
	}
	.main .feature .photo .img2 {
		width: 100%;
		margin-top: 30px;
		height: auto;
		aspect-ratio: 635 / 407;
	}
	.main .feature .photo .img3 {
		width: 100%;
		height: auto;
		margin-top: 30px;
		aspect-ratio: 722 / 383;
	}
	.main .feature .photo .img4 {
		width: 100%;
		margin-top: 30px;
		height: auto;
		aspect-ratio: 422 / 320;
	}
	.main .feature .photo .img5 {
		width: 100%;
		margin-top: 30px;
		height: auto;
		aspect-ratio: 722 / 432;
	}
	.main .feature .photo .img6 {
		width: 100%;
		margin-top: 30px;
		height: auto;
		aspect-ratio: 422 / 649;
	}
	.main .kbc {
		background: url(../images/index/img_kbc.webp) no-repeat center center / cover;
		padding: 120px 0 160px 0;
		position: relative;
	}
	.main .kbc::before {
		content: "";
		background: linear-gradient(to right, #e0e0e0 40%, #e0e0e000 100%);
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.main .kbc > .inner {
		max-width: 1200px;
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	.main .kbc .lead {
		font-size: 20px;
		line-height: 1.6em;
		letter-spacing: 0.05em;
	}
	.main .kbc .text {
		font-size: 13px;
		margin-top: 35px;
		text-shadow: 0 0 2px #fff;
	}
	.main .kbc .bt_more {
		font-size: 15px;
		color: #fff;
		width: 270px;
		height: 66px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		box-sizing: border-box;
		padding-left: 26px;
		background: #212d51;
		margin-top: 70px;
	}
	.main .kbc .bt_more::before {
		content: "";
		display: block;
		width: 17px;
		height: 50px;
		position: absolute;
		left: 27px;
		top: 50%;
		background: url(../images/icon_kbc.webp) no-repeat center center / contain;
		transform: translate(0, -50%);
	}


	
}