@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
:root {
    --vh: 76.8 * 100dvh;
}
@media all and (max-width: 999px) {
	:root {
		--vh: 68 * 100dvh;
	}
}
@media (min-width: 768px) and (max-width: 999px) {
	:root {
		--vh: 139.3 * 100dvh;
	}
}
html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
	height: 100%;
	width: 100%;
}
#main .wrap {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#main .wrap .section {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}
#main .wrap .section.act {
	opacity: 1;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
}
#main .wrap .section.start {
	opacity: 1;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
	transition: opacity var(--easingCss3) var(--scrollingSpeedNum),clip-path var(--easingCss3) var(--scrollingSpeedNum);
}
/* .fullpage {
	transition: none !important;
	opacity: 0;
}
.fullpage.show {
	opacity: 1;
} */
 body,
 html,
.fullpage,
.fullpage .mainBox,
.fullpage .mainBox .fp-scrollable {
    /* -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
	transform: translateZ(0);
    backface-visibility: hidden;
	clip-path: inset(0 0 0 0);
	overflow: visible !important; */
	
	/* opacity: 0;
	clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); */
}
body {
	/* overflow: clip !important; */
}
.fullpage {
}
.fullpage .mainBox {
	overflow: clip;
	position: relative;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
	overscroll-behavior-y: none;
	/* opacity: 1;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
	transition: opacity var(--easingCss3) var(--scrollingSpeedNum),clip-path var(--easingCss3) var(--scrollingSpeedNum); */
}
.fullpage .mainSec {
	position: relative;
}
.fullpage .mainBox .fp-scrollable {
	position: static;
	overflow: clip;
	overscroll-behavior-y: none;
}
.fullpage .mainBox.act .fp-scrollable {
	overflow-y: scroll;
	/* overscroll-behavior: contain; */
}
.fullpage .mainBox .fp-scrollable::-webkit-scrollbar {
	display: none !important;
}
.fullpage .mainBox .fp-scroller {
	overflow: visible;
	transform: none !important;
	top: 0 !important;
	height: auto !important;
	position: static !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	overscroll-behavior-y: none;
	/* contain: strict; */
	isolation: isolate;
	transform: translateZ(0);
	backface-visibility: hidden;
}
.fullpage .mainBox .iScrollLoneScrollbar {
	display: none !important;
}
#main .mainVisual {
	position: relative;
}
#main .mainVisual .logo {
	margin: -6.4rem 0 0 -16.4rem;
	width: 32.7rem;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 10;
	opacity: 0;
	transition: opacity 1.2s ease .01s;
    
}
#main .mainVisual.transitionNone .logo {
	transition: none;
}
#main .mainVisual.show.act .logo {
	opacity: 1;
}
#main .mainVisual .slider {
	height: 100dvh;
}
#main .mainVisual .slider .slick-list,
#main .mainVisual .slider .slick-track,
#main .mainVisual .slider .slick-slide,
#main .mainVisual .slider .slick-slide > div,
#main .mainVisual .slider .sliderimg {
	height: 100%;
}
#main .mainVisual .slider .sliderimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
	transition: transform linear calc(var(--autoplaySpeedNum) + var(--speedNum) * 2);
	will-change: transform;
}
#main .mainVisual .slider .sliderimg01 img {
	transition: transform linear calc(var(--firstzAutoplaySpeedNum) + var(--autoplaySpeedNum) + var(--speedNum));
}
#main .mainVisual .slider .slick-slide.active .sliderimg01 img {
	transform: scale(1.2);
}
#main .mainVisual .slider .slick-slide .sliderimg02 img {
	transform: scale(1.2) translateX(2%);
}
#main .mainVisual .slider .slick-slide.active .sliderimg02 img {
	transform: scale(1.2) translateX(-2%);
}
#main .mainVisual .slider .slick-slide .sliderimg03 img {
	transform: scale(1.2) translateY(2%);
}
#main .mainVisual .slider .slick-slide.active .sliderimg03 img {
	transform: scale(1.2) translateY(-2%);
}
#main .jsSec {
	/* padding: min(12rem,calc(12 / var(--vh))) 0 min(8rem,calc(8 / var(--vh))); */
	height: 100dvh;
	min-height: 30rem;
	display: flex;
	align-items: center;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
#main .jsSec .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#main .jsSec .bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform linear calc(var(--autoNextNum) - 0s) 0s;
}
#main .jsSec.act .bg img {
	transform: scale(1.1);
}
#main .jsSec.start .bg img {
	transform: scale(1.1);
}
#main .jsSec.transitionNone .bg img {
	/* transition: none; */
}
#main .jsSec .content {
	margin-top: min(4rem,calc(4 / var(--vh)));
	width: 100%;
	position: relative;
}

#main .jsSec .photo {
	width: min(31rem,calc(31 / var(--vh)));
	overflow: clip;
	clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
	transition: clip-path 0.8s ease 0s;
	aspect-ratio: 310 / 420;
}
#main .jsSec.act .photo {
	clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}

#main .jsSec .photo2 {
	width: min(31rem,calc(31 / var(--vh)));
	overflow: clip;
	clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
	transition: clip-path 0.8s ease 0s;
	aspect-ratio: 250 / 420;
}
#main .jsSec.act .photo2 {
	clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}

#main .jsSec .photo3 {
	width: min(31rem,calc(31 / var(--vh)));
	overflow: clip;
	clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
	transition: clip-path 0.8s ease 0s;
	aspect-ratio: 310 / 210;
}
#main .jsSec.act .photo3 {
	clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}

#main .jsSec.transitionNone .photo {
	transition: none;
}
#main .jsSec.transitionNone .photo2 {
	transition: none;
}
#main .jsSec.transitionNone .photo3 {
	transition: none;
}


#main .jsSec .photo img {
	width: calc(500 / 310 * 100%);
	height: 100%;
	object-fit: cover;
	max-width: none;
	transform: translateX(calc(((450 - 500) / 500) * 100%));
	transition: transform 8s linear 0.2s;
}
#main .jsSec.act .photo img {
	transform: none;
}

#main .jsSec .photo2 img {
	width: calc(500 / 310 * 100%);
	height: 100%;
	object-fit: cover;
	max-width: none;
	transform: translateX(calc(((450 - 500) / 500) * 100%));
	transition: transform 8s linear 0.2s;
}
#main .jsSec.act .photo2 img {
	transform: none;
}

#main .jsSec .photo3 img {
	width: calc(500 / 310 * 100%);
	height: 100%;
	object-fit: cover;
	max-width: none;
	transform: translateX(calc(((450 - 500) / 500) * 100%));
	transition: transform 8s linear 0.2s;
}
#main .jsSec.act .photo3 img {
	transform: none;
}

#main .jsSec.transitionNone .photo img {
	transition: none;
}
#main .jsSec.transitionNone .photo2 img {
	transition: none;
}
#main .jsSec.transitionNone .photo3 img {
	transition: none;
}
#main .jsSec .photo h2 {
	color: #000;
	mix-blend-mode: overlay;
}
#main .jsSec .photo2 h2 {
	color: #000;
	mix-blend-mode: overlay;
}
#main .jsSec .photo3 h2 {
	color: #000;
	mix-blend-mode: overlay;
}

#main .jsSec.sec02 .photo h2 {
	color: #888;
	mix-blend-mode: normal;

}
#main .jsSec.sec02 .photo2 h2 {
	color: #888;
	mix-blend-mode: normal;

}
#main .jsSec.sec02 .photo3 h2 {
	color: #888;
	mix-blend-mode: normal;

}
#main .jsSec .titleBox,
#main .jsSec .textBox {
	width: calc((100% - min(31rem,calc(31 / var(--vh)))) / 2);
}
#main .jsSec .titleBox {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}
#main .jsSec h2 {
	position: absolute;
	left: calc((100% - min(39rem,calc(39 / var(--vh)))) / 2 - min(31rem,calc(31 / var(--vh))) + 10rem);
	top: -10rem;
	/* margin: 0 -3.9rem min(6rem,7.8vh) 0; */
	font-weight: 900;
	font-size: max(12px,min(1.4rem,calc(1.4 / var(--vh))));
	letter-spacing: 0.3em;
	transform: translateX(-100px);
	opacity: 0;
	transition: transform 10s ease .25s,opacity 10s ease .25s;
}
#main .jsSec.transitionNone h2 {
	transition: none;
}
#main .jsSec.act h2 {
	opacity: 1;
	transform: none;
}
#main .jsSec h2 .en {
	margin-bottom: min(2.4rem,calc(2.4 / var(--vh)));
	display: block;
	position: relative;
	font-size: max(10px,min(4.5rem,calc(4.5 / var(--vh))));
	letter-spacing: 0.02em;
	color: inherit;
}
#main .jsSec h2 .en::before {
	position: absolute;
	right: 0;
	top: 0;
	color: #000;
	clip-path: inset(0 0 0 calc(100% - 3.9rem));
	content: attr(data-title);
	mix-blend-mode: overlay;
	display: none;
}
#main .jsSec h2 .en span {
	/* clip-path: inset(0 3.9rem 0 0); */
}
#main .jsSec .textBox {
	padding-left: min(8rem,calc(8 / var(--vh)));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
#main .jsSec .textBox .subBox {
	opacity: 0;
	clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
	transition: clip-path 1.2s linear 1.2s, opacity 1.2s linear 1.2s;
}
#main .jsSec.act .textBox .subBox {
	opacity: 1;
	clip-path: polygon(0% 0%, 0% 200%, 200% 0%);
}
#main .jsSec.transitionNone .textBox .subBox {
	transition: none;
}
#main .jsSec .textBox p {
	font-size: max(10px,min(1.3rem,calc(1.3 / var(--vh))));
	letter-spacing: 0.12em;
	line-height: 2.461538;
}
#main .jsSec .textBox p.jp {
	font-family: "Noto Serif JP", serif;
    font-weight: 900 !important;
        margin-left: 5%;
        margin-right: 5%;
}
#main .jsSec .textBox p.en {
	margin-top: min(3.1rem,calc(3.1 / var(--vh)));
	font-size: max(10px,min(1.1rem,calc(1.1 / var(--vh))));
	letter-spacing: 0.08em;
	line-height: 1.63636;
    margin-left: 5%;
        margin-right: 5%;
}
@media all and (max-width: 999px) {
	#main .jsSec .content {
		flex-direction: column;
		align-items: center;
	}
	#main .jsSec .titleBox,
	#main .jsSec .textBox {
		width: auto;
        align-items: center;
        justify-content: center;
	}
	#main .jsSec .titleBox {
		margin-bottom: min(3.9rem,calc(3.9 / var(--vh)));
	}
	#main .jsSec .textBox {
		padding: 0;
	}
	#main .jsSec .textBox p {
		margin: 0;
		text-align: center;
		font-size: max(10px, min(1.1rem, calc(1.1 / var(--vh))));
		letter-spacing: 0.08em;
		line-height: 2.1818;
	}
	#main .jsSec .textBox p.en {
		margin: 0;
		font-size: max(10px, min(1rem, calc(1 / var(--vh))));
		line-height: 2.2;
		letter-spacing: 0.06em;
	}
	#main .jsSec .photo {
		margin-bottom: min(4.7rem,calc(4.7 / var(--vh)));
		width: 25.4rem;/* 16.4rem */
	}
    #main .jsSec .photo2 {
		margin-bottom: min(4.7rem,calc(4.7 / var(--vh)));
		width: 25.4rem;/* 16.4rem */
	}
    #main .jsSec .photo3 {
		margin-bottom: min(4.7rem,calc(4.7 / var(--vh)));
		width: 25.4rem;/* 16.4rem */
	}
	#main .jsSec h2 {
		position: relative;
		left: auto;
		bottom: auto;
		font-size: max(10px,min(1.2rem,calc(1.2 / var(--vh))));
		text-align: center;
		letter-spacing: 0.2em;
		transform: translateX(-20px);
        z-index: 99;
        top: 0rem;
	}
	#main .jsSec h2 .en {
		margin-bottom: min(1.1rem, calc(1.1 / var(--vh)));
		font-size: max(10px, min(3rem, calc(3 / var(--vh))));
	}
	#main .jsSec .photo h2 {
		display: none;
	}
    #main .jsSec .photo2 h2 {
		display: none;
	}
    #main .jsSec .photo3 h2 {
		display: none;
	}
}
@media (min-width: 768px) and (max-width: 999px) {
	#main .jsSec .titleBox {
        margin-bottom: min(9rem, calc(9 / var(--vh)));
    }
	#main .jsSec h2 {
        font-size: max(10px, min(1.7rem, calc(1.7 / var(--vh))));
    }
	#main .jsSec h2 .en {
        margin-bottom: min(1.8rem, calc(1.8 / var(--vh)));
        font-size: max(10px, min(5rem, calc(5 / var(--vh))));
    }
	#main .jsSec .photo {
		margin-bottom: min(9.5rem,calc(9.5 / var(--vh)));
		width: min(33.6rem, calc(33.6 / var(--vh)));;
	}
    #main .jsSec .photo2 {
		margin-bottom: min(9.5rem,calc(9.5 / var(--vh)));
		width: min(33.6rem, calc(33.6 / var(--vh)));;
	}
    #main .jsSec .photo3 {
		margin-bottom: min(9.5rem,calc(9.5 / var(--vh)));
		width: min(33.6rem, calc(33.6 / var(--vh)));;
	}
	#main .jsSec .textBox p {
        font-size: max(10px, min(1.5rem, calc(1.5 / var(--vh))));
        letter-spacing: 0.16em;
        line-height: 2.26;
	}
	#main .jsSec .textBox p.en {
		margin-top: min(3.1rem, calc(3.1 / var(--vh)));
		font-size: max(10px, min(1.2em, calc(1.2 / var(--vh))));
		letter-spacing: 0.1em;
		line-height: 1.6666;
	}
}
@media (max-width: 767px) {
	#main .jsSec .textBox .subBox {
		display: flex;
	}
	#main .jsSec .textBox .subBox p {
		flex-shrink: 0;
		width: 90%;
        line-height: 1.5em;
        text-align: left;
        margin-left: 5%;
        margin-right: 5%;
	}
	#main .jsSec .textBox .subBox p + p {
		margin-left: -100%;
	}
}
@media all and (max-width: 999px) {
	#main .sec01 .content {
		margin-top: min(-0.1rem,calc(-0.1 / var(--vh)));
	}
}
#main .sec02 .content {
	flex-direction: row-reverse;
}
#main .sec02 .titleBox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
#main .sec02 h2 {
	/* margin: 0 0 min(2.8rem,3.6458vh) -3.3rem; */
	text-align: left;
	left: calc(50% + min(31rem,calc(31 / var(--vh))) * 0.5 - 1rem);
	bottom: 1.6rem;
	/*transform: translateX(-80px);
	transition: transform 8s ease .5s,opacity 8s ease .5s;*/
    color: #000;
    font-weight: bold;
    letter-spacing: 0px;
}
#main .sec02 h2 .en {
	letter-spacing: 0;
}
#main .sec02 h2 .en::before {
	clip-path: inset(0 calc(100% - 3.3rem) 0 0);
}
#main .sec02 h2 .en span {
	/* clip-path: inset(0 0 0 3.3rem); */
    color: #000;
    font-weight: bold;
    letter-spacing: 0px;
}
#main .sec02 .textBox {
	margin-bottom: -0.3rem;
	padding: 0 min(7.8rem,calc(7.8 / var(--vh))) 0 0;
	justify-content: flex-end;
	align-items: flex-end;
    color: #000;
}
@media all and (max-width: 999px) {
	#main .sec02 .content {
		margin-top: min(-0.1rem,calc(-0.1 / var(--vh)));
		flex-direction: column;
	}
	#main .sec02 .titleBox {
		align-items: center;
        justify-content: center;
	}
	#main .sec02 h2 {
		text-align: center;
		left: auto;
		bottom: auto;
	}
	#main .sec02 h2 .en {
		letter-spacing: 0.05em;
	}
	#main .sec02 .textBox {
		margin-bottom: 0;
		padding: 0;
		align-items: center;
        justify-content: center;
	}
}
#main .sec03 .titleBox {
    justify-content: flex-start;
    color: #000;
}
#main .sec03 h2 {
	left: calc((100% - min(31rem, calc(31 / var(--vh)))) / 2 - min(31rem, calc(31 / var(--vh))) + 4rem);
    bottom: auto;
    top: 5.3rem;
}
#main .sec03 h2 .en {
	letter-spacing: 0;
}
#main .sec03 .textBox {
    justify-content: flex-end;
	margin-bottom: -0.2rem;
    color: #000;
}
@media all and (max-width: 999px) {
	#main .sec03 .content {
		margin-top: min(-0.1rem,calc(-0.1 / var(--vh)));
	}
	#main .sec03 .titleBox {
		justify-content: center;
	}
	#main .sec03 h2 {
		left: auto;
		bottom: auto;
		top: auto;
	}
	#main .sec03 h2 .en {
		letter-spacing: 0.05em;
	}
	#main .sec03 .textBox {
		margin-bottom: 0;
		justify-content: center;
	}
}
#main .sec04 {
	padding: 0;
	justify-content: center;
	background-color: #F4E7CF;
}
#main .fullpage .sec04 {
	background: none;
}
#main .sec04 .bg {
	background:  #D8D8D8;
}
#main .sec04 .midBox {
	margin: 0 7.2rem 0.5rem 0;
	position: relative;
}
#main .sec04 .midBox .title {
	margin-top: min(-3.4rem,calc(-3.4 / var(--vh)));
	position: absolute;
	top: 50%;
	color: #000;
	font-size: max(10px,min(4rem,calc(4 / var(--vh))));
	font-weight: bold;
    letter-spacing:  0px;
	/* mix-blend-mode: difference; */
}
#main .sec04 .midBox .clipBox.on {
	clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
}
#main .sec04 .midBox .clipBox .title {
	color: #fff;
}
#main .sec04 .midBox .title:first-of-type {
	left: -20.5%;
}
#main .sec04 .midBox .title:last-of-type {
	right: -22.7%;
}
#main .sec04 .clipBox {
	width: 100%;
}
#main .sec04 .pictureBox {
	position: relative;
	isolation: isolate;
}
#main .sec04 .imgList {
	--off: 1.5rem;
	margin: 0 auto;
	width: min(62rem,calc(62 / var(--vh)));
	height: min(55.3rem,calc(55.3 / var(--vh)));
	position: relative;
}
#main .sec04 .imgList li {
	width: min(38rem,calc(38 / var(--vh)));
	position: absolute;
	opacity: 0;
	transition: transform ease 1s,opacity ease 1s;
}
/*----　集合画像位置　-----*/
#main .sec04 .imgList li:nth-child(1) {
	left: min(12rem,calc(12 / var(--vh)));
	top: min(30.0rem,calc(-3.0 / var(--vh)));
	transform: translate(calc(0rem - var(--off)),calc(0rem - var(--off)));
}

#main .sec04 .imgList li:nth-child(2) {
	left: min(0.0rem,calc(0.0 / var(--vh)));
	top: min(10rem,calc(10 / var(--vh)));
	transition-delay: 0.3s;
	transform: translate(calc(var(--off)),calc(0rem - var(--off)));
}

#main .sec04 .imgList li:nth-child(3) {
	right: min(0rem,calc(0 / var(--vh)));
	top: min(10rem,calc(10 / var(--vh)));
	transition-delay: 0.38s;
	transform: translate(calc(0rem - var(--off)),calc(var(--off)));
}

#main .sec04 .imgList li:nth-child(4) {
	transition-delay: 0.5s;
	left: min(12rem,calc(12 / var(--vh)));
	top: min(4.3rem,calc(4.3 / var(--vh)));
	transform: translate(calc(var(--off)),calc(var(--off)));
}

#main .sec04.act .imgList li {
	opacity: 1;
	transform: none;
}
#main .sec04.transitionNone .imgList li {
	transition: none;
}
#main .sec04 .midBox .title {
	transform: translateX(-100px);
	opacity: 0;
	transition: transform ease 8s 1.3s,opacity ease 8s 1.3s;
}
#main .sec04.act .midBox .title {
	opacity: 1;
	transform: none;
}
#main .sec04.transitionNone .midBox .title {
	transition: none;
}
@media all and (max-width: 999px) {
	#main .sec04 {
		padding: min(3rem,calc(3 / var(--vh))) 0 0 0;
	}
	#main .sec04 .midBox {
		margin: 0;
	}
	#main .sec04 .midBox .title {
		margin: 0 0 0 -0.8em;
		left: 50%;
		top: auto;
		font-size: max(10px,min(2.6rem,calc(2.6 / var(--vh))));
		writing-mode: vertical-rl;
		-webkit-writing-mode: tb-rl;
		transform: translateX(-20px);
		transition: transform ease 5s 1.3s,opacity ease 5s 1.3s;
	}
	#main .sec04 .midBox .title:first-of-type {
		left: 50%;
		top: -37.5%;
	}
	#main .sec04 .midBox .title:last-of-type {
		right: auto;
		bottom: -26.5%;
	}
	#main .sec04 .imgList {
		width: min(31.5rem,calc(31.5 / var(--vh)));
		height: min(31.5rem,calc(31.5 / var(--vh)));
	}
	#main .sec04 .imgList li {
		width: min(18.4rem,calc(18.4 / var(--vh)));
	}
	#main .sec04 .imgList li:nth-child(1) {
		left: min(7rem,calc(7 / var(--vh)));
		top: min(0rem,calc(0 / var(--vh)));
	}
	#main .sec04 .imgList li:nth-child(2) {
		left: min(0rem,calc(0 / var(--vh)));
		top: min(10rem,calc(10 / var(--vh)));
	}
	#main .sec04 .imgList li:nth-child(3) {
		right: min(0rem,calc(0 / var(--vh)));
		top: min(10rem,calc(10 / var(--vh)));
	}
	#main .sec04 .imgList li:nth-child(4) {
		left: min(7rem,calc(7 / var(--vh)));
		top: min(5rem,calc(5 / var(--vh)));
	}
}
@media (min-width: 768px) and (max-width: 999px) {
	
	#main .sec04 .midBox {
		--zoom: 2;
	}
	#main .sec04 .midBox .title {
		font-size: max(10px,min(calc(2.6rem * var(--zoom)),calc(2.6 * var(--zoom) / var(--vh))));
	}
	#main .sec04 .midBox .title:first-of-type {
		top: -38%;
	}
	#main .sec04 .midBox .title:last-of-type {
		bottom: -28%;
	}
	#main .sec04 .imgList {
        width: min(calc(29.5rem * var(--zoom)), calc(29.5 * var(--zoom) / var(--vh)));
        height: min(calc(31.5rem * var(--zoom)), calc(31.5 * var(--zoom) / var(--vh)));
    }
	#main .sec04 .imgList li {
		width: min(calc(20.4rem * var(--zoom)),calc(20.4 * var(--zoom) / var(--vh)));
	}
	#main .sec04 .imgList li:nth-child(1) {
		top: min(calc(1.4rem * var(--zoom)),calc(1.4 * var(--zoom) / var(--vh)));
	}
	#main .sec04 .imgList li:nth-child(3) {
		left: min(calc(3.5rem * var(--zoom)),calc(3.4 * var(--zoom) / var(--vh)));
	}
	#main .sec04 .imgList li:nth-child(4) {
		right: min(calc(2.5rem * var(--zoom)),calc(2.5 * var(--zoom) / var(--vh)));
		top: min(calc(0.7rem * var(--zoom)),calc(0.7 * var(--zoom) / var(--vh)));
	}
    #main .sec04 .imgList li:nth-child(5) {
		right: min(calc(5.5rem * var(--zoom)),calc(5.5 * var(--zoom) / var(--vh)));
		top: min(calc(0.7rem * var(--zoom)),calc(0.7 * var(--zoom) / var(--vh)));
	}
    #main .sec04 .imgList li:nth-child(6) {
		right: min(calc(6.5rem * var(--zoom)),calc(6.5 * var(--zoom) / var(--vh)));
		top: min(calc(0.7rem * var(--zoom)),calc(0.7 * var(--zoom) / var(--vh)));
	}
}
#main .sec05 {
	padding: 39rem 0 30.8rem;
	position: relative;
	overflow: clip;
}
#main .sec05 .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	pointer-events: none;
}
#main .sec05 .content {
	position: relative;
}
#main .sec05 .bg::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.15);
}
#main .sec05 .bg .parallax {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% + 20rem);
	transform: translateY(-20rem);
	will-change: unset;
}
#main .mainBox.transitionNone .sec05 .bg .parallax {
	/* transform: translateY(-20rem) translateZ(1); */
}
#main .sec05 .bg img {
	width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    object-position: 0% 50%;
	aspect-ratio: 2844/2408;
}
#main .sec05 .content {
	margin: 0 auto;
	max-width: 112.5rem;
}
#main .sec05 .logo {
	margin-bottom: 17.8rem;
	width: 29.7rem;
	position: relative;
	z-index: 1;
}
#main .sec05.act .logo {
	opacity: 1;
}
#main .sec05.transitionNone .logo {
	transition: none;
}
#main .sec05 .logo .en {
	position: absolute;
    left: 0;
    bottom: -15.5rem;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.05em;
    /* opacity: 0;
    visibility: hidden; */
}
#main .sec05 .logo.visible .en {
	/* opacity: 1;
    visibility: visible;
    transition: all ease 1s 1s; */
}
#main .sec05 .textBox {
	width: 69.1rem;
	position: relative;
	z-index: 1;
}
#main .sec05 .textBox::before {
	width: 107.7rem;
	height: 96.9rem;
	position: absolute;
	left: 5rem;
	top: -23rem;
	background: url(https://www.living-ethos.jp/img/sec05_bg02.png) no-repeat center center / cover;
	content: "";
	z-index: -1;
	pointer-events: none;
}
#main .sec05 .textBox .subBox {
	width: 32.1rem;
}
#main .sec05 .textBox .subBox p {
	font-size: max(14px,1.2rem);
	letter-spacing: 0.06em;
	line-height: 2.166;
}
#main .sec05 .textBox .subBox p:not(:last-child) {
	margin-bottom: 4.2rem;
}
#main .sec05 .textBox .subBox.jp p {
	font-family: "Noto Serif JP", serif;
    font-weight: 900 !important;
}
#main .sec05 .textBox .subBox.en p {
	letter-spacing: 0.06em;
	line-height: 1.833;
}
#main .sec05 .textBox .subBox.en p:not(:last-child) {
	margin-bottom: 6.3rem;
}
#main .sec05 .textBox .subBox.en .text {
	line-height: 2.4rem;
	margin-left: 0.4rem;
}
@media all and (max-width: 999px) {
	#main .sec05 {
		padding: min(18.4rem,calc(18.4 / var(--vh))) 0 min(19rem,calc(19 / var(--vh)));
	}
	#main .sec05 .bg img {
		height: 120%;
		left: 0;
		top: 0;
		object-position: 35% 50%;
	}
	#main .sec05 .content {
		margin: 0 min(3.8rem,calc(3.8 / var(--vh)));
		max-width: inherit;
	}
	#main .sec05 .logo {
		margin: 0 auto min(9.3rem,calc(9.3 / var(--vh)));
		width: min(21.2rem,calc(21.2 / var(--vh)));
	}
	#main .sec05 .logo .en {
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.3rem;
		bottom: min(-4.5rem,calc(-3.5 / var(--vh)));
	}
	#main .sec05 .textBox {
		width: auto;
	}
	#main .sec05 .textBox::before {
		width: 107.7rem;
		height: 96.9rem;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	#main .sec05 .textBox .subBox {
		width: auto;
	}
	#main .sec05 .textBox .subBox p {
		font-size: max(10px,1.1rem);
		letter-spacing: 0.02em;
		line-height: 2;
	}
	#main .sec05 .textBox .subBox p:not(:last-child) {
		margin-bottom: 1.9rem;
	}
	#main .sec05 .textBox .subBox.en p {
		font-size: max(10px,1rem);
		letter-spacing: 0.02em;
		line-height: 2.2;
	}
	#main .sec05 .textBox .subBox.en p:not(:last-child) {
		margin-bottom: 4.2rem;
	}
	#main .sec05 .textBox .subBox.en .text {
		margin-left: 0;
		line-height: 2.2;
		word-break: break-all;
	}
}
@media (min-width: 768px) and (max-width: 999px) {
	#main .sec05 {
        padding: min(24.3rem, calc(24.3 / var(--vh))) 0 min(25.2rem, calc(25.2 / var(--vh)));
    }
	#main .sec05 .content {
		margin: 0 min(7.1rem, calc(7.1 / var(--vh))) 0 min(9.7rem, calc(9.7 / var(--vh)));
	}
	#main .sec05 .logo {
		margin-bottom: min(17rem, calc(17 / var(--vh)));
		width: min(32.7rem, calc(32.7 / var(--vh)));
	}
	#main .sec05 .textBox .subBox:not(:last-child) {
		margin-bottom: 5.5rem;
	}
	#main .sec05 .textBox .subBox p {
		font-size: max(10px,1.4rem);
		line-height: 2.1428;
	}
	#main .sec05 .textBox .subBox.en p {
		font-size: max(10px,1.2rem);
		line-height: 1.6666;
	}
}
@media all and (max-width: 767px) {
	#main .sec05 .textBox .subBox {
		width: 100%;
	}
	#main .sec05 .textBox .subBox + .subBox {
		margin-left: -100%;
	}
}
#main .sec06 .innBox {
	display: flex;
	position: relative;
}
#main .sec06 .toggBox {
	width: 100%;
	flex: 0 0 100%;
	position: relative;
	display: flex;
	overflow: clip;
	transition: clip-path ease 1s;
	--clipWid: 7rem;
	/*height: 76.8rem;*/
	height: max(76.8rem,100vh);
}
#main .sec06 .toggBox.opening,
#main .sec06 .toggBox.closeing {
	pointer-events: none;
}
#main .sec06 .toggBox.close {
	cursor: pointer;
}
#main .sec06 .toggBox.open {
	z-index: 10;
}
#main .sec06 .toggBox01 {
	clip-path: polygon(0% 100%, 50% 100%, 50% 0%, 0% 0%);
}
#main .sec06 .toggBox01.open {
	clip-path: polygon(0% 100%, calc(100% - var(--clipWid)) 100%, calc(100% - var(--clipWid)) 0%, 0% 0%);
}
#main .sec06 .toggBox01.close {
	clip-path: polygon(0% 100%, var(--clipWid) 100%, var(--clipWid) 0%, 0% 0%);
}
#main .sec06 .toggBox + .toggBox {
	margin-left: -100%;
}
#main .sec06 .toggBox02 {
	flex-direction: row-reverse;
	clip-path: polygon(50% 100%, 100% 100%, 100% 0%, 50% 0%);
}
#main .sec06 .toggBox02.open {
	clip-path: polygon(var(--clipWid) 100%, 100% 100%, 100% 0%, var(--clipWid) 0%);
}
#main .sec06 .toggBox02.close {
	clip-path: polygon(calc(100% - var(--clipWid)) 100%, 100% 100%, 100% 0%, calc(100% - var(--clipWid)) 0%);
}
#main .sec06 .bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: transform ease 1s,height ease 1s;
	transform: none;
	z-index: -1;
	/* will-change: transform;
	backface-visibility: hidden; */
}
#main .sec06 .bg::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.23);
	transition: background ease 1s;
	/* will-change: transform;
    backface-visibility: hidden; */
}
#main .sec06 .toggBox01 .bg::after {
	background: rgba(0, 0, 0, 0) linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
#main .sec06 .toggBox02 .bg::after {
	background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
#main .sec06 .bg .parallax {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% + 10rem);
	transform: translateY(-10rem);
	/*height: calc(100% + 20rem);
	transform: translateY(-20rem);*/
}
#main .sec06 .bg img {
	--z: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	/* object-fit: cover;
	transform: scale(1.001); */
	transition: width ease 1s,height ease 1s,left ease 1s,top ease 1s,transform ease 1s;
	max-width: none;
	width: auto;
	/* height: calc(var(--h) / var(--hh) * 100%); */
	height: 100%;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	transform-origin: left center;
	will-change: transform;
	backface-visibility: hidden;
}
#main .sec06 .toggBox.open .bg img {
	transform: translateY(-50%) scale(var(--z));
}
#main .sec06 .bg img.resizing {
	transition: none;
}
#main .sec06 .toggBox01 .bg {
	width: calc(100% - var(--clipWid));
}
#main .sec06 .toggBox01 .bg img {
	left: -19%;
	aspect-ratio: 2740 / 1732;
}
#main .sec06 .toggBox01.open .bg img {
	left: -4.5%;
}
#main .sec06 .toggBox02 .bg {
	left: var(--clipWid);
}
#main .sec06 .toggBox02 .bg img {
	left: 25%;
	transform-origin: right center;
	aspect-ratio: 5480 / 3464;
}
#main .sec06 .toggBox02.open .bg img {
	left: -3%;
}
#main .sec06 .cenTxt {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 1;
	visibility: visible;
	transition: opacity ease .5s,visibility ease .5s;
	display: flex;
	z-index: 11;
	align-items: center;
    justify-content: center;
}
#main .sec06 .cenTxt.close {
	opacity: 0;
	visibility: hidden;
}
#main .sec06 .cenTxt p {
	margin: -3rem -0.3rem 0 0;
	writing-mode: tb-rl;
	direction: ltr;
	-webkit-writing-mode: vertical-rl;
	font-size: max(10px,4.2rem);
	font-weight: 300;
}
#main .sec06 .closeBtn {
	position: absolute;
	right: calc(2.2rem + var(--clipWid));
	top: 2.2rem;
	cursor: pointer;
	width: 1.2rem;
	height: 1.2rem;
	z-index: 10;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity ease .5s,visibility ease .5s;
}
#main .sec06 .toggBox01.closeing .closeBtn {
	transition-delay: .5s;
}
#main .sec06 .open .closeBtn {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
#main .sec06 .closeBtn::before,
#main .sec06 .closeBtn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2rem;
    height: 0.1rem;
    background: rgba(255, 255, 255, 0.8);
}

#main .sec06 .closeBtn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#main .sec06 .closeBtn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#main .sec06 .lBox {
	width: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity ease .5s;
}
#main .sec06 .close .lBox {
	opacity: 0;
}
#main .sec06 .lBox .logo {
	margin-top: -3.1rem;
	width: 36rem;
	height: 32.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	
}
#main .sec06 .lBox .logo::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	/* opacity: 0;
	visibility: hidden;
	transition: opacity ease 1s, visibility ease 1s; */
}
#main .sec06 .lBox .logo::after {
	content: "";
	position: absolute;
	width: 1.2rem;
	left: 50%;
	bottom: 26.5%;
	height: 1.2rem;
	transform: translateX(-50%);
	background: url(https://www.living-ethos.jp/img/sec06_icon01.png) no-repeat center center / contain;
	opacity: 1;
	visibility: visible;
	transition: opacity ease 1s,visibility ease 1s;
}
/* #main .sec06 .open .lBox .logo::before {
	opacity: 1;
	visibility: visible;
} */
#main .sec06 .open .lBox .logo::after {
	opacity: 0;
	visibility: hidden;
}
#main .sec06 .lBox .logo img {
	position: relative;
	width: auto;
	height: 2.9rem;
}
#main .sec06 .rBox {
	width: 50%;
	position: relative;
	box-sizing: border-box;
	padding: 10.5rem 12rem 2rem 13.7rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity ease 1s,visibility ease 1s;
}
#main .sec06 .open .rBox {
	opacity: 1;
	visibility: visible;
}
#main .sec06 .rBox .clipBox {
	opacity: 0;
	clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
	transition: clip-path 1.2s linear,opacity 1.2s linear;
}
#main .sec06 .open .rBox .clipBox {
	opacity: 1;
	clip-path: polygon(0% 0%, 0% 200%, 200% 0%);
}
#main .sec06 .rBox p {
	font-size: max(10px,1.2rem);
	font-weight: 500;
	line-height: 2.1666;
	letter-spacing: 0.04em;
}
#main .sec06 .rBox p.jp {
	font-family: "Noto Serif JP", serif;
}
#main .sec06 .rBox p.en {
	margin-top: 1.3rem;
	font-size: max(10px,1.1rem);
	line-height: 1.6363;
	font-weight: 400;
}
#main .sec06 .rBox .link {
	margin-top: 2.7rem;
}
#main .sec06 .rBox .link a {
	padding: 0;
	display: inline-block;
	position: relative;
	font-size: max(12px,1.2rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.32;
	vertical-align: top;
}
#main .sec06 .rBox .link a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.1rem;
	background: rgba(255,255,255,0.3);
}
#main .sec06 .toggBox02 .closeBtn {
	right: 2.5rem;
    top: 2.3rem;
}
#main .sec06 .toggBox02 .rBox {
	margin-right: -18%;
	padding: 2rem 2rem 11rem 26rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: auto;
}
#main .sec06 .toggBox02 .rBox .subBox {
	display: flex;
}
#main .sec06 .toggBox02 .rBox .dataEnBox {
	display: flex;
}
#main .sec06 .toggBox02 .rBox p {
	width: 64.2%;
}
#main .sec06 .toggBox02 .rBox p.en {
	margin: 0 0 0 1rem;
	width: calc(100% - 1rem - 64.2% - 1px);
}
#main .sec06 .toggBox02 .rBox .link {
	margin-top: 1rem;
}
@media (hover: hover) and (min-width: 1000px) {
	#main .sec06 .bg::after {
		will-change: transform;
		backface-visibility: hidden;
	}
	#main .sec06 .toggBox .closeBtn {
		display: none;
	}
	#main .sec06 .toggBox.open {
		cursor: url(https://www.living-ethos.jp/img/cursor.png) 17 17, auto;
	}
	#main .sec06 .toggBox .closeBtn:hover {
		opacity: 0.5;
	}
	#main .sec06:not(:has(.open,.closeing)) .lBox {
		cursor: pointer;
	}
	#main .sec06:not(:has(.open,.closeing)) .lBox::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		/*background: rgba(0,0,0,0.5);*/
		opacity: 0;
		visibility: hidden;
		transition: opacity ease 1s,visibility ease 1s;
		will-change: transform;
		z-index: -1;	
	}
	#main .sec06:not(:has(.open,.closeing)) .lBox:hover::before {
		opacity: 1;
		visibility: visible;
	}
	#main .sec06:not(:has(.open,.closeing)) .toggBox:has(.lBox:hover) .bg {
		transform: scale(1.1);
	}
}
@media all and (max-width: 999px) {
	#main .sec06 .toggBox {
		--clipWid: 8rem;
		height: calc(640 / 375 * 100vw);
		flex-direction: column;
	}
	#main .sec06 .bg {
		width: 100%;
		height: calc(100% - var(--clipWid));
	}
	#main .sec06 .bg .parallax {
		height: calc(100% + 0rem);
		transform: translateY(-0rem);
		transform: none !important;
	}
	#main .sec06 .toggBox01 .bg {
		width: 100%;
		height: calc(100% - var(--clipWid));
	}
	#main .sec06 .open .bg {
		width: 100%;
		height: calc(100% - var(--clipWid));
	}
	#main .sec06 .toggBox02 .bg {
		width: 100%;
		left: 0;
		top: auto;
		bottom: 0;
		height: calc(100% - var(--clipWid) + 1px);
	}
	#main .sec06 .toggBox02.open .bg {
		height: calc(100% - var(--clipWid) + 1px);
	}
	#main .sec06 .bg::after {
		background: rgba(0, 0, 0, 0.2);
	}
	#main .sec06 .toggBox01 .bg::after {
		background: rgba(0, 0, 0, 0);
	}
	/*#main .sec06 .toggBox01.open .bg::after {
		background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 82.85%);
	}*/
	.enShow #main .sec06 .toggBox01.open .bg::after {
		background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
	}
	#main .sec06 .toggBox02 .bg::after {
		background: rgba(0, 0, 0, 0.2);
	}
	#main .sec06 .toggBox02.open .bg::after {
		background: rgba(0, 0, 0, 0.2);
	}
	#main .sec06 .toggBox01 {
		clip-path: polygon(0% 50%, 100% 50%, 100% 0%, 0% 0%);
	}
	#main .sec06 .toggBox01.open {
		clip-path: polygon(0% calc(100% - var(--clipWid)), 100% calc(100% - var(--clipWid)), 100% 0%, 0% 0%);
	}
	#main .sec06 .toggBox01.close {
		clip-path: polygon(0% var(--clipWid), 100% var(--clipWid), 100% 0%, 0% 0%);
	}
	#main .sec06 .toggBox02 {
		flex-direction: column-reverse;
		clip-path: polygon(0% 100%, 100% 100%, 100% 50%, 0% 50%);
	}
	#main .sec06 .toggBox02.open {
		clip-path: polygon(0% 100%, 100% 100%, 100% var(--clipWid), 0% var(--clipWid));
	}
	#main .sec06 .toggBox02.close {
		clip-path: polygon(0% 100%, 100% 100%, 100% calc(100% - var(--clipWid)), 0% calc(100% - var(--clipWid)));
	}
	#main .sec06 .cenTxt p {
		margin: -0.5rem 0 0 0;
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		font-size: max(10px,3rem);
	}
	#main .sec06 .closeBtn {
		right: 1.2rem;
		top: 1.7rem;
		width: 2.2rem;
		height: 2.2rem;
	}
	#main .sec06 .toggBox01 .bg img {
		left: -52%;
        top: 22%;
        height: 100%;
	}
	#main .sec06 .toggBox01.open .bg img {
		/* left: -76%;
        top: 50%;
        height: 111%; */
		left: -68%;
        top: 44%;
        height: 135%;
		transform: translateY(-50%);
	}
	#main .sec06 .toggBox02 .bg img {
		left: -7%;
        top: 73%;
        height: 80%;
		transform-origin: left center;
    }
	#main .sec06 .toggBox02.open .bg img {
		/* left: -5%;
        top: 51%;
        height: 103%; */
		left: -6.5%;
        top: 52.5%;
        height: 106%;
		transform: translateY(-50%);
    }
	#main .sec06 .lBox {
		width: 100%;
		height: 50%;
		padding: 0;
		opacity: 1;
		transition: opacity ease 1s;
	}
	#main .sec06 .open .lBox {
		opacity: 0;
	}
	#main .sec06 .lBox .logo {
		margin-top: -4.1rem;
		width: auto;
		height: auto;
		opacity: 1;
	}
	#main .sec06 .lBox .logo::before {
		display: none;
	}
	#main .sec06 .lBox .logo::after {
		bottom: -4.3rem;
	}
	#main .sec06 .lBox .logo img {
		height: 2rem;
	}
	#main .sec06 .rBox {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		padding: 8rem 3.2rem;
	}
	#main .sec06 .rBox::before {
		content: "";
		position: absolute;
		left: -11.46%;
		top: 12.5%;
		width: 119.46%;
		height: 60%;
		background: url(https://www.living-ethos.jp/img/sec06_bg04.png) no-repeat center center / contain;
		opacity: 0;
		visibility: hidden;
		transition: opacity ease 1s, visibility ease 1s;
		z-index: -1;
		will-change: opacity;
		backface-visibility: hidden;
	}
	#main .sec06 .open .rBox::before {
		opacity: 1;
		visibility: visible;
	}
	#main .sec06 .rBox .logo {
		margin-bottom: 3.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		transition: opacity ease 2s;
	}
	#main .sec06 .toggBox.opening .lBox .logo,
	#main .sec06 .toggBox.closeing .rBox .logo {
		opacity: 0;
		transition: opacity ease 0.3s;
	}
	#main .sec06 .rBox .logo img {
		height: 2.1rem;
	}
	#main .sec06 .rBox p {
		font-size: max(10px,1rem);
		line-height: 2.2;
		letter-spacing: 0.02em;
		position: relative;
		text-align: center;
	}
	#main .sec06 .rBox p.en {
		margin-top: 0;
		font-size: max(10px,1rem);
		line-height: 2.1;
	}
	#main .sec06 .rBox .link {
		margin-top: 1.8rem;
		text-align: center;
	}
	#main .sec06 .rBox .link a {
		padding: 0;
	}
	#main .sec06 .toggBox02 .closeBtn {
		right: 1.7rem;
		top: calc(1.7rem + var(--clipWid));
	}
	#main .sec06 .toggBox02 .rBox {
		margin-right: 0;
		padding: 7.4rem 2rem 2rem;
		display: block;
		top: var(--clipWid);
		height: calc(100% - var(--clipWid));
	}
	#main .sec06 .toggBox02 .rBox .subBox {
		display: block;
	}
	#main .sec06 .toggBox02 .rBox .dataEnBox {
		display: block;
	}
	#main .sec06 .toggBox02 .rBox .logo {
		margin-bottom: 3.2rem;
	}
	#main .sec06 .toggBox02 .rBox p {
		width: auto;
	}
	#main .sec06 .toggBox02 .rBox p.en {
		margin: 0 1.5rem;
		width: auto;
	}
	#main .sec06 .toggBox02 .rBox .link {
		margin-top: 2rem;
	}
}
@media (min-width: 768px) and (max-width: 999px) {
	#main .sec06 .toggBox {
		/* height: 140rem; */
		height: calc(520 / 375* 100vw);
		--clipWid: 16.4rem;
	}
	#main .sec06 .toggBox > * {
		will-change: transform;
		isolation: isolate;
	}
	#main .sec06 .toggBox01 .bg img {
		left: -66%;
        top: 26%;
        height: 128%;
	}
	#main .sec06 .toggBox01.open .bg img {
		left: -65%;
        top: 52%;
        height: 124%;
	}
	#main .sec06 .toggBox02 .bg img {
		left: -9.5%;
        top: 60.5%;
        height: 113%;
    }
	#main .sec06 .toggBox02.open .bg img {
		left: -8%;
        top: 57.5%;
        height: 115%;
    }
	#main .sec06 .lBox .logo::after {
		width: 2.2rem;
        height: 2.2rem;
		bottom: -6.3rem;
	}
	#main .sec06 .closeBtn {
		width: 2.2rem;
        height: 2.2rem;
	}
	#main .sec06 .lBox .logo img {
		height: 3rem;
	}
	#main .sec06 .cenTxt p {
		font-size: max(10px, 5rem);
	}
	#main .sec06 .rBox {
		padding: 9.6rem 3.1rem;
	}
	#main .sec06 .rBox .logo {
		margin-bottom: 4.5rem;
		display: flex !important;
	}
	#main .sec06 .rBox .logo img {
		height: 2.9rem;
	}
	#main .sec06 .rBox p {
        font-size: max(10px, 1.4rem);
		line-height: 2.142;
	}
	#main .sec06 .rBox p:not(:last-child) {
		margin-bottom: 2rem;
	}
	#main .sec06 .rBox p.en {
		font-size: max(10px, 1.2rem);
		line-height: 1.666;
	}
	#main .sec06 .rBox .link {
		margin-top: 3rem;
	}
	#main .sec06 .rBox .link a {
		font-size: max(10px, 2.1rem);
	}
}
@media all and (max-width: 767px) {
	#main .sec06 .bg {
		will-change: transform;
		backface-visibility: hidden;
	}
	#main .sec06 .bg::after {
		will-change: transform;
		backface-visibility: hidden;
	}
	#main .sec06 .toggBox .dataEnBox {
		display: flex;
	}
	#main .sec06 .toggBox .dataEnBox p {
		flex-shrink: 0;
		width: 100%;
	}
	#main .sec06 .toggBox .dataEnBox p + p {
		margin-left: -100%;
	}
	#main .sec06 .toggBox02 .rBox .dataEnBox {
		display: flex;
	}
	#main .sec06 .toggBox02 .rBox p.en {
		margin: 0 0 0 -100%;
		padding: 0 1.5rem;
		width: 100%;
	}
	#main .sec06 .toggBox .closeBtn {
		right: auto;
		left: 0.7rem;
	}
}
#main .sec07 {
	padding: 11.5rem 0 10.7rem;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    background-color: #F4E7CF;
    
}
#main .sec07 .enTitle {
	width: 4.5rem;
	min-height: 18rem;
	position: absolute;
	left: -0.8rem;
	top: 11.5rem;
	color: #000;
	font-size: 4.5rem;
	line-height: 1;
    letter-spacing: -2px;
	writing-mode: vertical-rl;
	-webkit-writing-mode: tb-rl;
    font-weight: bold;
}
#main .sec07 .content {
	margin: 0 auto;
	padding-left: 2.1rem;
	max-width: 118rem;
	width: 100%;
}
#main .sec07 .photo {
	width: 30rem;
}
#main .sec07 .textBox {
	width: 35rem;
    color: #000;
}
#main .sec07 .textBox .logo {
	margin-bottom: 1.6rem;
	width: 9.1rem;
}
#main .sec07 .textBox .nameBox {
	margin-bottom: 3.5rem;
}
#main .sec07 .textBox .nameBox .name {
	margin-bottom: 0.3rem;
	color: #000;
	font-size: 1.7rem;
	letter-spacing: 0.2em;
}
#main .sec07 .textBox .nameBox .name .jp {
	margin-right: 1.4rem;
    color: #000;
    font-weight: bold;
    letter-spacing: 0px;
}
#main .sec07 .textBox .nameBox .name .en {
	color: #000;
	font-size: 2rem;
	font-weight: 300;
	letter-spacing: 0.04em;
}
#main .sec07 .textBox .nameBox .job {
	color: #000;
	font-size: max(10px,1.2rem);
	font-weight: 300;
	letter-spacing: 0.04em;
}
#main .sec07 .textBox p {
	font-size: max(10px,1.1rem);
	line-height: 2;
}
#main .sec07 .textBox p.jp {
	font-family: "Noto Serif JP", serif;
    font-weight: 900 !important;
	letter-spacing: 0.1em;
}
#main .sec07 .textBox p:not(:last-child) {
	margin-bottom: 2rem;
}
#main .sec07 .textBox p.en {
	color: #000;
	font-size: 10px;
	letter-spacing: 0.01em;
	line-height: 1.6rem;
}
#main .sec07 .slideBox {
	width: 33rem;
}
#main .sec07 .slideBox .slider {
	width: 100%;
}
#main .sec07 .slideBox .slider li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .sec07 .slideBox .link {
	margin-top: 1.9rem;
	text-align: right;
}
#main .sec07 .slideBox .link a {
	font-size: max(10px,1.1rem);
    font-weight: bold;
	letter-spacing: 0.06em;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	vertical-align: top;
    color:  #000;
    
}
#main .sec07 .slideBox .link a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0.1rem;
	background: #999;
}
#main .sec07 address {
	position: absolute;
	right: 3rem;
	bottom: 2.8rem;
	display: block;
	font-size: max(10px,1rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	font-family: "Noto Serif JP", serif;
    
	z-index: 5;
}
@media all and (max-width: 999px) {
	#main .sec07 {
		padding: 16rem 5.5rem 15.4rem;
		min-height: auto;
		position: relative;
		display: block;
        background-color: #F4E7CF;
        
	}
	#main .sec07 .enTitle {
		width: 1em;
		min-height: auto;
		left: -0.6rem;
		top: 15.9rem;
		font-size: 3rem;
	}
	#main .sec07 .content {
		margin: 0;
		padding: 0;
		max-width: inherit;
		width: auto;
	}
	#main .sec07 .photo {
		margin-bottom: 6rem;
		position: relative;
		width: 100%;
	}
	#main .sec07 .photo::before {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 67.924%;
	}
	#main .sec07 .photo img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	#main .sec07 .textBox {
		margin-bottom: 5.6rem;
		width: auto;
	}
	#main .sec07 .textBox .logo {
		margin-bottom: 1.6rem;
		width: 9.05rem;
	}
	#main .sec07 .textBox .nameBox {
		margin-bottom: 3rem;
	}
	#main .sec07 .textBox .nameBox .name {
		margin-bottom: 0.2rem;
	}
	#main .sec07 .textBox .nameBox .name .jp {
		margin-right: 1.2rem;
		letter-spacing: 0px;
        font-weight: bold;
	}
	#main .sec07 .textBox p:not(:last-child) {
		margin-bottom: 0;
	}
	#main .sec07 .textBox p.en {
		line-height: 2.2;
	}
	#main .sec07 .slideBox {
		width: 100%;
	}
	#main .sec07 .slideBox .link {
		margin-top: 1.6rem;
	}
	#main .sec07 .slideBox .link a {
		font-size: max(10px,1rem);
	}
	#main .sec07 address {
		margin-top: 12.6rem;
		position: relative;
		right: auto;
		bottom: auto;
		display: block;
		text-align: center;
	}
}
@media (min-width: 768px) and (max-width: 999px) {
	#main .sec07 {
        padding: 24rem 11.2rem 6rem;
	}
	#main .sec07 .enTitle {
		font-size: max(10px, 6rem);
		left: -0.8rem;
        top: 23.9rem;
	}
	#main .sec07 .photo {
        margin-bottom: 10.9rem;
	}
	#main .sec07 .textBox {
		margin-bottom: 11.8rem;
	}
	#main .sec07 .textBox .logo {
		margin-bottom: 3.6rem;
		width: 14rem;
	}
	#main .sec07 .textBox .logo img {
		width: 100%;
		height: auto;
	}
	#main .sec07 .textBox .nameBox {
		margin-bottom: 5.5rem;
	}
	#main .sec07 .textBox .nameBox .name {
		margin-bottom: 1rem;
		font-size: max(10px, 2.8rem);
	}
	#main .sec07 .textBox .nameBox .name .jp {
		margin-right: 2.2rem;
	}
	#main .sec07 .textBox .nameBox .name .en {
		font-size: max(10px, 3rem);
	}
	#main .sec07 .textBox .nameBox .job {
		font-size: max(10px, 1.6rem);
	}
	#main .sec07 .textBox p {
		font-size: max(10px, 1.4rem);
		line-height: 2.142;
	}
	#main .sec07 .textBox p:not(:last-child) {
        margin-bottom: 2rem;
    }
	#main .sec07 .textBox p.en {
		font-size: max(10px, 1.2rem);
		line-height: 1.666;
	}
	#main .sec07 .slideBox .link {
		margin-top: 3.8rem;
	}
	#main .sec07 .slideBox .link a {
		font-size: max(10px, 2rem);
	}
	#main .sec07 address {
		margin-top: 19.5rem;
		font-size: max(10px,1rem);
	}
}
@media all and (max-width: 767px) {
	#main .sec07 .textBox .dataEnBox {
		display: flex;
	}
	#main .sec07 .textBox  .dataEnBox p {
		flex-shrink: 0;
		width: 100%;
	}
	#main .sec07 .textBox  .dataEnBox p + p {
		margin-left: -100%;
	}
	.enShow #main .sec07 .textBox .nameBox .name .jp {
		display: none;
	}
}
#main .sec08 {
    padding: 17.5rem 0 2.8rem;
    min-height: 66rem;
    position: relative;
    background: #F4E7CF;
}
#main .sec08 .content {
	margin: 0 auto;
	padding: 0 0.6rem 1rem 0;
	max-width: 92rem;
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	position: relative;
	box-sizing: border-box;
}
#main .sec08 .content::after {
	content: "";
	width: 1px;
	height: 100%;
	background: #000;
	position: absolute;
	left: 44%;
	top: 0.5rem;
}
#main .sec08 .rBox {
	width: 40.5rem;
}
#main .sec08 .map {
	width: 40.5rem;
    height: 300px;
}
#main .sec08 .map iframe{
  -webkit-filter: grayscale(100%) contrast(90%) !important; /* Safari/旧Chrome 用 */
          filter: grayscale(100%) contrast(90%) !important; /* 標準 */
  display:block;  /* 行間の空白対策 */
}
#main .sec08 .ttl {
	margin-bottom: 4.7rem;
    color: #000;
    font-weight: bold;
}
#main .sec08 .ttl .en {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 3.4rem;
	font-weight: bold;
}
#main .sec08 .rBox .ttl {
	margin-bottom: 5rem;
}
#main .sec08 .rBox .ttl .en {
	margin-bottom: 0;
}
#main .sec08 .ttl .jp {
	display: block;
	color: #000;
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: 0.2em;
}
#main .sec08 .txtDl {
	margin-bottom: 3.2rem;
}
#main .sec08 .txtDl dt {
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	font-weight: 400;
	color: #000;
}
#main .sec08 .txtDl dt img {
	width: 15.8rem;
}
#main .sec08 .txtDl dd {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.69;
	letter-spacing: 0.09em;
    color: #000;
}
#main .sec08 .txtDl dd .en {
	margin-top: 0.6rem;
	display: block;
	font-size: 1.1rem;
	letter-spacing: 0.01em;
}
#main .sec08 .rBox .txtDl {
	margin-bottom: 3.7rem;
}
#main .sec08 .rBox .txtDl dt {
	margin-bottom: 1.5rem;
}
#main .sec08 .rBox .txtDl dd {
	font-size: 1.3rem;
	line-height: 1.66;
	letter-spacing: 0.08em;
}
#main .sec08 .rBox .txtDl dd .en {
	margin-top: 0.4rem;
}
#main .sec08 .linkList {
	display: flex;
}
#main .sec08 .linkList li {
	margin-left: 0.4rem;
	width: calc( ( 100% - 0.4rem ) / 2);
}
#main .sec08 .linkList li:first-of-type {
	margin-left: 0;
}
#main .sec08 .linkList li a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #4E4E4E;
	font-size: 1.4rem;
	font-weight: 500;
	min-height: 3.1rem;
	letter-spacing: 0.08em;
}
#main .sec08 .linkList li.mail a {
	background: #2F2F2F;
}
#main .sec08 .link a {
	color: #000;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	border-bottom: 0.1rem solid rgba(153, 153, 153, 0.5);
}
#main .sec08 address {
	position: absolute;
	right: 3rem;
	bottom: 2.8rem;
	display: block;
	font-size: max(10px,1rem);
	font-weight: 300;
	letter-spacing: 0.04em;
	font-family: "Noto Serif JP", serif;
	z-index: 5;
}
@media all and (max-width: 999px) {
	#main .sec08 {
    	padding: 9.5rem 5.5rem 2.8rem;
	}
	#main .sec08 .content {
		padding-right: 0;
		flex-direction: column;
		justify-content: flex-start;
	}
	#main .sec08 .content::after {
		display: none;
	}
	#main .sec08 .ttl {
		margin-bottom: 3.7rem;
	}
	#main .sec08 .ttl .en {
		margin-bottom: 0.5rem;
		font-size: 2.8rem;
        font-weight: bold;
        letter-spacing: 0px;
	}
	#main .sec08 .rBox .ttl {
		margin-bottom: 3.5rem;
	}
	#main .sec08 .rBox .ttl .en {
		margin-bottom: 0;
	}
	#main .sec08 .ttl .jp {
		font-size: 1.2rem;
		letter-spacing: 0.2em;
	}
	#main .sec08 .txtDl {
		margin-bottom: 1.7rem;
	}
	#main .sec08 .txtDl dt {
		margin-bottom: 1rem;
		font-size: 1.4rem;
	}
	#main .sec08 .txtDl dt img {
		width: 14.2rem;
	}
	#main .sec08 .txtDl dd {
		font-size: 1.3rem;
		font-weight: 400;
		line-height: 1.69;
		letter-spacing: 0.09em;
	}
	#main .sec08 .txtDl dd .en {
		margin-top: 0;
		font-size: 1rem;
		letter-spacing: 0.01em;
	}
	#main .sec08 .rBox .txtDl {
		margin-bottom: 3.3rem;
	}
	#main .sec08 .rBox .txtDl dt {
		margin-bottom: 1.5rem;
	}
	#main .sec08 .rBox .txtDl dd {
		font-size: 1.2rem;
		line-height: 1.66;
		letter-spacing: 0.08em;
	}
	#main .sec08 .rBox .txtDl dd .en {
		margin-top: 0;	
	}
	#main .sec08 .linkList li {
		margin-left: 0.4rem;
		width: calc( ( 100% - 0.4rem ) / 2);
	}
	#main .sec08 .linkList li:first-of-type {
		margin-left: 0;
	}
	#main .sec08 .linkList li a {
		font-size: 1.2rem;
		font-weight: 500;
		letter-spacing: 0.08em;
	}
	#main .sec08 .link a {
		font-size: 1.1rem;
		letter-spacing: 0.06em;
	}
	#main .sec08 .rBox {
		margin: 7.8rem 0 0;
		padding: 6.5rem 0 0;
		border-left: none;
		border-top: 1px solid rgba(198, 198, 198,0.19);
		width: auto;
	}
    #main .sec08 .map {
		margin: 7.8rem 0 0;
		padding: 6.5rem 0 0;
		border-left: none;
		border-top: 1px solid rgba(198, 198, 198,0.19);
		width: 100%;
        height: 300px;
	}
	#main .sec08 address {
		margin-top: 8.9rem;
		position: relative;
		right: auto;
		bottom: auto;
		display: block;
		text-align: center;
	}
}
@media (min-width: 768px) and (max-width: 999px) {
}
@media all and (max-width: 767px) {
}    
}

.f-col-bk {
    color: #000;
}
.f-col-gly {
    color: #3F3F3F;
    font-weight: 900 !important;
}
.f-w-b{
    font-weight: bold;
}
.f-h {
    font-family:Helvetica;
    font-weight: bold;
}
.f-jp {
    font-family: "Noto Serif JP", serif;
    font-weight: 900 !important;
}
.f-bo {
    font-weight: bold;
}
@media all and (min-width: 767px) {
    .txt-d {
        transform: translateY(25rem);
    }
}