html, body{
	-webkit-font-smoothing: antialiased;
    letter-spacing: 0.08em;
    height: 100%;
    margin: 0 auto;
	max-width: 100%;
	overflow-x: clip;
	background-color: #807866;
	color: #000;
}
html{
	font-size: 62.5%;
}
body{
	font-feature-settings: "palt";
	margin: 0;
}
img{
	width: 100%;
	vertical-align: top;
}
/*-----------invew motion-----------*/
.inview.faderight {
    opacity: 0;
	transition: 1.3s cubic-bezier(0.45, 0, 0.55, 1);
    transform: translateX(24px);
}
.inview.faderight.active {
    opacity: 1;
    transform: translateX(0px);
}
.inview.fadein {
    opacity: 0;
    transition-duration: 1.8s;
    transition-delay: 500ms;
}
.inview.fadein.active {
    opacity: 1;
}
.inview.fadeleft {
    opacity: 0;
    transform: translateX(-24px);
	transition: 0.6s cubic-bezier(0.61, 1, 0.88, 1)
}
.inview.fadeleft.active {
    opacity: 1;
    transform: translateX(0px);
}
.inview.fadeup {
    opacity: 0;
    transition-delay: 300ms;
	transition: 1.5s cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateY(15px);
}
.inview.fadeup.active {
    opacity: 1;
    transform: translateX(0px);
}
/*-----------typewriter-----------*/
.text-animation_01 span, .text-animation_02 span {
    opacity: 0;
}
.text-animation_01 span:last-child::after {
    content: "|";
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.text-animation_02 span:last-child::after {
    content: "|";
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.target {
    transition: 1.8s clip-path cubic-bezier(0.61, 1, 0.88, 1);
}
.target img {
    width: 100%;
}
.animeLeft {
    clip-path: inset(0 100% 0 0);
}
.target.active {
    clip-path: inset(0 0 0 0);
}
/*-----------contents-----------*/
.sp-only {
    display: none;
}
.container{
	width: calc(100% - 20vw);
    margin: 13vw 10vw 0;
}
.top_pc{
	position: relative;
	width: 100%;
}
.logo_pc{
	position: absolute;
	width: 65%;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.logo_pc img.fadeup{
	transition-delay: 0.3s;
}
.logo_text{
	margin: 0.6em 0 0;
	text-align: center;
	color: #1d140a;
    font-size: clamp(1rem, 3vw, 3.5rem);
}
.logo_text .fadeup{
	transition-delay: 0.8s;
}
.p1_flex{
	display: flex;
	justify-content: center;
    align-items: center;
	gap: 4%;
}
.p1_text{
	color: #d9d2c6;
	line-height: 2.3em;
	font-size: clamp(0.9rem, 2vw, 1.6rem);
}
.p1_img{
	position: relative;
	width: 40%;
}
.scroll-frame {
  overflow: hidden;
  height: auto;
}
.scroll_img {
  display: flex;
  width: 200%;
}
.scroll_img img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;	
}
.p2_grid{
	max-width: 93%;
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
	margin: 0 auto;
}
.p2_img_left{
	position: relative;
	display:grid;
	place-items:center;
}
.p2_img_right{
	justify-content: center;
    display: grid;
    grid-template-rows: auto auto;
    gap: 2vw;
	align-content:center;
}
.p2_img_right img:nth-child(1){
	width: 55%;
	transform: translate(2vw, 1vh);
}
.p2_img_right img:nth-child(2){
	width: 40%;
	justify-self: end;
    transform: translateX(-3vw);
}
.p3_grid{
	max-width: 93%;
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
	margin: 0 auto;
}
.p3_img_left{
	width: 75%;
	display:grid;
    justify-self: center;
    align-content: center;
}
.p3_img_right{
	justify-content: center;
    display: grid;
    grid-template-rows: auto auto;
    gap: 2vw;
	align-content:center;
}
.p3_img_right img:nth-child(1){
	width: 100%;
}
.p3_img_right img:nth-child(2){
	width: 100%;
	justify-self: end;
}
.text-animation_01{
	margin-top: 1em;
	font-size: clamp(0.9rem, 2vw, 1.6rem);
	color: #d9d2c6;
}
.p4_full{
	position: relative;
	width: 80%;
	max-width: 80%;
	margin: 0 auto;
}
.p5_grid{
	max-width: 90%;
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
	margin: 0 auto;
}
.p5 .scroll-frame{
	position: relative;
}
.p5_img_left{
	width: 75%;
	display:grid;
    justify-self: center;
    align-content: center;
}
.p5_img_right{
	justify-content: center;
    display: grid;
    grid-template-rows: 1fr 1fr;
	align-content:center;
}
.p5_img_right p.text-animation_02{
	width: 100%;
	font-size: clamp(0.9rem, 2vw, 1.6rem);
	color: #d9d2c6;
	text-align: center;
	align-content: center;
}
.p5_img_right img{
	width: 90%;
	justify-self: center;
}
.p6_grid{
	max-width: 97%;
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
	margin: 0 auto;
}
.p6_img_left{
    display: grid;
    grid-template-rows: auto 1fr;
}
.p6_img_left img:nth-child(1){
	width: 100%;
}
.p6_img_left span{
	position: relative;
	width: 60%;
    justify-self: end;
    margin: -2vw 3vw 0 auto;
}
.p6_img_right{
	position: relative;
	display: flex;
	width: 100%;
}
.p7_grid{
	max-width: 96%;
	display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4vw;
	margin: 0 auto;
}
.p7_img_left{
	width: 100%;
	display:grid;
    justify-self: center;
    align-content: center;
}
.p7_img_right{
	justify-content: center;
    display: grid;
    grid-template-rows: auto auto;
    gap: 2vw;
	align-content:center;
}
.p7_img_right img:nth-child(1){
	width: 70%;
}
.p7_img_right img:nth-child(2){
	width: 82%;
	justify-self: end;
}
.p8_grid{
	max-width: 88%;
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
	margin: 0 auto;
}
.p8_img_left{
	width: 100%;
}
.p8_img_right{
	position: relative;
}
.p9_grid{
	max-width: 80%;
	display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3vw;
	margin: 0 auto;
}
.p9_img_left{
	width: 100%;
}
.p9_img_right{
    display: grid;
    grid-template-rows: auto auto;
	justify-content: center;
	align-content:center;
}
.p9_img_right{
	width: 98%;
}
.p9_img_right.sp-only{
		display: none;
	}
.p10_grid{
	max-width: 90%;
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw;
	margin: 0 auto;
}
.p10_img_left{
	width: 75%;
    justify-self: center;
    align-content: center;
}
.p10_img_right{
	justify-content: center;
    display: grid;
    grid-template-rows: auto auto;
	align-content:center;
}
.p10_img_right img:nth-child(1){
	position: relative;
	width: 64%;
	margin: -2vw auto 0 2vw;
	z-index: 2;
}
.p10_img_right img:nth-child(2){
	position: relative;
	width: 61%;
    justify-self: end;
	margin-top: -2vw;
	z-index: 1;
}
.p11_full{
	width: 80%;
	max-width: 80%;
	margin: 0 auto;
}
.credit{
	color: #1d140a;
	font-size: clamp(0.6rem, 1vw, 1.15rem);
	width: 80%;
    margin: 5em auto 3vh;
}
.p11.container{
	margin-bottom: 13vh;
}
.footer{
	width: 773px!important;
}

/*------------MODAL COMMON-----------*/
.modalWrap{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.7));
	z-index: 1;
	opacity: 0;
	transition: z-index 5ms 380ms ease, opacity 380ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.modalWrap.modal-open{
	opacity: 1;
	transition: z-index 5ms ease, opacity 420ms 5ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.modal_text{
	position: absolute;
    bottom: 3em;
    width: calc(100% - 4em);
    margin: 0 2em;
	line-height: 1.8em;
	font-size: clamp(1rem, 2vw, 1.3rem);
}
.look_btn.is-open{
	transform: rotate(45deg);
}
.look_btn{
	position: absolute;
	bottom: 3vh;
	right: 2vw;
	width: 0.71875vw;
    height: 0.71875vw;
	color: #fff;
	cursor: pointer;
	z-index: 10;
	transition: transform 0.6s ease;;
}
.look_btn:before{
	width: 1px;
    height: 20px;
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate3d(-50%, -50%, 0);
	background-color: #fff;
}
.look_btn:after{
	width: 20px;
    height: 1px;
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate3d(-50%, -50%, 0);
	background-color: #fff;
}
.look_btn.is-open:before,
.look_btn.is-open:after{
	background-color: #000;
}
/*MODAL EACH*/
.btn2.look_btn:before,
.btn2.look_btn:after,
.btn3.look_btn:before,
.btn3.look_btn:after{
	background-color: #000;
}
.btn6.look_btn:before{
	width: 1.5px;
}
.btn6.look_btn:after{
	height: 1.5px;
}
@media screen and (max-width:768px) {
	.sp-only{
		display: block;
	}
	.pc-only{
		display: none;
	}
	.top_sp{
		width: 100%;
		position: relative;
	}
	.logo_sp{
		width: auto;
		position: absolute;
		top: 24%;
		left: 5vw;
	}
	.logo_sp img{
		width: 40%;
	}
	.logo_text{
		margin: 0;
		text-align: left;
	}
	.container{
		width: calc(100% - 8.5vw);
		margin: 13vw 4.25vw 0;
	}
	.p1{
		margin-top: 10vw;
	}
	.p1_flex{
		display: block;
	}
	.p1_img{
		 width: 100%;
	}
	.p1_text{
		position: relative;
		margin: -15vw 0 0 5vw;
		font-size: 1.2rem;
	}
	.modal1 .modal_text{
		bottom: 8em;
	}
	.p2_grid{
		 display: block;
		max-width: 100%;
	}
	.p2_img_left{
		width: 80%;
	}
	.p2_img_right img:nth-child(1) {
		width: 50%;
		transform: translate(0vw, 3vh);
	}
	.p2_img_right img:nth-child(2) {
		width: 45%;
		margin-top: -25vw;
		transform: translateX(0vw);
	}
	.p3_grid{
		max-width: 100%;
		display: block;
	}
	.p3_img_left {
		width: 50%;
	}
	.text-animation_01{
		font-size: 1.2rem;
	}
	.p3_img_right{
		margin-top: 10vw;
	}
	.p4{
		margin-top: 10vw;
	}
	.p4_full{
		max-width: 100%;
		width: 100%;
	}
	.p5{
		margin-top: 10vw;
	}
	.p5_grid{
		display: block;
		max-width: 100%;
	}
	.p5_img_right{
		grid-template-rows: auto auto;
	}
	.p5_img_right p.text-animation_02{
		font-size: 1.2rem;
		text-align: left;
		margin-left: 5vw;
	}
	.p5_img_right{
		margin-top: 10vw;
		gap: 5vw;
	}
	.p5_img_right img{
		width: 65%;
		justify-self: end;
		margin-right: 4vw;
	}
	.p6_grid{
		display: block;
		max-width: 100%;
	}
	.p6_img_right span{
		width: 55%;
		margin: -5vw 3vw 0 auto;
	}
	.p6_img_right{
		margin-top: 3vw;
		width: 80%;
	}
	.p7{
		margin-top: 10vw;
	}
	.p7_grid{
		display: block;
		max-width: 100%;
	}
	.p7_img_right{
		gap: 5vw;
		margin-top: 5vw;
	}
	.p7_img_right img:nth-child(1) {
		justify-self: end;
		width: 60%;
		margin-right: 7vw;
	}
	.p7_img_right img:nth-child(2) {
		width: 70%;
		justify-self: center;
	}
	.p8_grid{
		display: block;
		max-width: 100%;
	}
	.p8_img_left{
		margin-bottom: 5vw;
	}
	.p9_grid{
		display: block;
		max-width: 100%;
	}
	.p9_img_left{
		width: 60%;
		margin: 0 auto;
	}
	.p9_img_right.pc-only{
		display: none;
	}
	.p9_img_right.sp-only{
		display: flex;
		margin: 5vw -4.25vw 0 auto;
		gap: 2vw;
	}
	.p9_img_right img:nth-child(1),
	.p9_img_right img:nth-child(2){
		width: 45%;
	}
	.p10_grid{
		display: block;
		max-width: 100%;
	}
	.p10_img_left{
		width: 100%;
	}
	.p10_img_right{
		gap: 0;
	}
	.p10_img_right img:nth-child(1) {
		width: 60%;
		margin: 8vw auto 0 0;
	}
	.p10_img_right img:nth-child(2) {
		width: 74%;
		margin-top: -8vw;
		z-index: 1;
	}
	.p11{
		margin-top: 10vw;
	}
	.p11_full {
		width: 100%;
		max-width: 100%;
	}
	.credit{
		width: 100%;
		font-size: 1rem;
		margin: 2em 0 1vh 4.25vw;
	}
	/*-------------modal-------------------*/
	.modal_text{
		font-size: 1.2rem;
	}
	.look_btn {
		right: 6vw;
		bottom: 2.3vh;
	}
	.look_btn:before{
		height: 15px;
	}
	.look_btn:after{
		width: 15px;
	}
	.footer{
		width: 100%!important;
	}
}