@charset "utf-8";
/*------------------------------------------------------------
	mainVisual
------------------------------------------------------------*/
#main .mainVisual {
	position: relative;
	height: 100dvh;
	overflow: hidden;
}
.mainVisual .scroll {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 200;
    opacity: 1;
    transform: translateX(-50%);
    transition: opacity 1s ease 3s;
    overflow: hidden;
}
.mainVisual .scroll .line {
    width: 10px;
    height: 3.25rem;
    display: block;
    cursor: pointer;
}
.mainVisual .scroll .line i {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    transform: translateX(-50%);
    -webkit-animation: scroll 2s cubic-bezier(1,0,0,1) 1s infinite;
    animation: scroll 2s cubic-bezier(1,0,0,1) 1s infinite;
    animation-fill-mode: none;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes scroll {
	0% {
	 top:-100%;
	}
	50% {
        top: 0;
	}
	100% {
	 top:100%;
	}
 }
 @keyframes scroll {
	0% {
	 top:-100%;
	}
	50% {
        top: 0;
	}
	100% {
	 top:100%;
	}
 }
#main .mainVisual .mainText {
	color: #575353;
	position: absolute;
	right: 0;
	top: 17.6rem;
	width: 100%;
	display: flex;
	z-index: 1;
}
#main .mainVisual .lBox {
	width: 50%;
	padding-right: 5rem;
	display: flex;
	padding-top: 0.5rem;
	justify-content: flex-end;
}
#main .mainVisual .logo {
	position: absolute;
	top: 11.3rem;
	left: calc(50% - 56.6rem);
	z-index: 1;
}
#main .mainVisual .logo a {
	display: block;
}
#main .mainVisual .logo img {
	width: 14.6rem;
}
#main .mainVisual .lBox p {
	color: #403D3D;
	font-size: 2.1rem;
	font-weight: 300;
	letter-spacing: 0.01em;
}
#main .mainVisual .lBox p .txtSpan {
	font-size: 6.5rem;
	line-height: 1;
	letter-spacing: 0.02em;
	margin-left: 2.5rem;
	letter-spacing: 0.02em;
}
#main .mainVisual .lBox .sub {
	max-width: 51.6rem;
	width: 100%;
}
#main .mainVisual .slideTxt {
	max-width: 48rem;
	width: 50%;
	position: relative;
}
#main .mainVisual .slideTxt .textBox {
	position: absolute;
	left: 4.6rem;
	top: 0.3rem;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 1s;
}
#main .mainVisual .slideTxt .textBox.active {
	opacity: 1;
	visibility: visible;
}
#main .mainVisual .slideTxt p {
	color: #403D3D;
	margin-bottom: 2.5rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 2.14;
}
#main .mainVisual .slideTxt p:last-child {
	margin-bottom: 0;
}
#main .mainVisual .slideTxt .en {
	font-size: max(10px,1.1rem);
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: 0;
	max-width: 41.4rem;
	font-family: "Roboto", sans-serif;
}
#main .mainVisual .slideTxt .textBox02 p {
	line-height: 1.785;
	margin-bottom: 1rem;
}
#main .mainVisual .slideTxt .textBox02 p:not(.en) + .en {
	margin-top: 3.3rem;
}
#main .mainVisual .slideTxt .textBox02 .en {
	margin-bottom: 1rem;
}
#main .mainVisual .slide {
	line-height: 0;
}
#main .mainVisual .item {
	height: 100dvh;
	position: relative;
}
#main .mainVisual .photo {
	height: 100%;
}
#main .mainVisual .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .mainVisual .slide .toLeft.active .photo {
	animation: toleft 6s linear forwards;
}
#main .mainVisual .slide .toZoom.active .photo {
	animation: tozoom 6s linear forwards;
}
@media (max-width: 999px) {
	#main .mainVisual .slide .toLeft .photo {
		width: calc(100% + 10rem);
	}
	#main .mainVisual .slide .toLeft.active .photo {
		animation: toleftsp 6s linear forwards;
	}
	#main .mainVisual .slide .toLeft img {
		object-position: center bottom;
	}
}
@keyframes tozoom {
	0% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
	100% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}
@keyframes toleft {
	0% {
		transform: translateX(10%) scale(1.2);
	}
	100% {
		transform: translateX(0) scale(1.2);
	}
}
@keyframes toleftsp {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-10rem);
	}
}
#main .mainVisual .slick-dots {
	position: absolute;
	left: 3rem;
	bottom: 2.5rem;
	display: flex;
	z-index: 10;
}
#main .mainVisual .slick-dots button {
	display: none;
}
#main .mainVisual .slick-dots li {
	margin: 0 1rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.39;
	transition: all 0.3s;
	cursor: pointer;
}
#main .mainVisual .slick-dots li.slick-active {
	opacity: 1;
}

/*------------------------------------------------------------
	imgSecBox
------------------------------------------------------------*/ 
.imgSecBox {
	color: #403D3D;
	padding: 2rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 1.5rem 1.3rem 0;
	min-height: 75rem;
	position: relative;
	z-index: 1;
}
.imgSecBox:after {
	width: calc(50% - 29.3rem);  
	height: 100%;
	background: linear-gradient( to right,rgba(0, 0, 0, 0) 0%, #000 100%);
	position: absolute;  
	opacity: 0.11;
	top: 0;
	right: 0;  
	content: ""; 
}
.imgSecBox .textBox {
	position: relative;
	z-index: 2;
	width: calc(50% + -5rem);
}
.imgSecBox .textBox .sub {
	max-width: 47rem;
	width: 100%;
}
.colorsBox .imgSecBox {
	margin-left: 0;
	margin-right: 0;
}
.imgSecBox h2 {
	margin-bottom: 4.5rem;
	letter-spacing: 0.01em;
	font-size: 1.8rem;
}
.imgSecBox h3 {
	margin-bottom: 10.5rem;
	font-size: 2.3rem;
	font-weight: 500;
	letter-spacing: 0.09em;
}
.imgSecBox h3 .jp {
	line-height: 1.8;
}
.imgSecBox h3 span {
	display: block;
}
.imgSecBox h3 .en {
	margin-top: 1.4rem;
	font-size: 1.4rem;
	letter-spacing: 0;
	color: rgba(64, 61, 61, 0.7);
}
.imgSecBox p {
	margin-bottom: 3.0rem;
	letter-spacing: 0.03em;
	line-height: 2;
}
.imgSecBox p:last-child {
	margin-bottom: 0;
}
.imgSecBox p.en {
	font-size: max(10px,1.0rem);
	color: rgba(64, 61, 61, 0.7);
	letter-spacing: 0;
	line-height: 1.6;
}
#main .featrueBox .imgSecBox .textBox .sub {
	max-width: 34.8rem;
	margin-left: 10.5rem;
} 
#main .featrueBox .imgSecBox::after { 
	opacity: 0.17;
}
#main .featrueBox .imgSecBoxMid::after { 
	opacity: 0.22;
}
#main .featrueBox .imgSecBox02::after { 
	width: calc(100% - 11rem);
	opacity: 0.2;
}
#main .featrueBox h2 {
	margin-bottom: 7rem;
	padding-bottom: 0.5rem;
	font-size: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(64, 61, 61, 0.2);
}
#main .featrueBox .imgSecBox h3 {
	font-size: 2.5rem;
}
#main .featrueBox .imgSecBox p {
	letter-spacing: 0.08em;
	line-height: 2.28;
}
#main .featrueBox .imgSecBox .en {
	letter-spacing: 0;
	font-size: max(10px,1.2rem);
	line-height: 1.67;
}
#main .featrueBox .imgSecBox h3 {
	margin-bottom: 6rem;
}
#main .featrueBox .imgSecBox h3 .en {
	font-size: 1.4rem;
}
#main .featrueBox .imgSecBox:nth-child(2n) {
	justify-content: flex-start;
}
#main .featrueBox .imgSecBox:nth-child(2n) .textBox {
	display: flex;
	justify-content: flex-end;
}
#main .featrueBox .imgSecBox:nth-child(2n) .textBox .sub {
	margin: 0 12.5rem 0 auto;
}
#main .colorsBox .imgSecBox {
	margin-bottom: 0;
	justify-content: flex-start;
}
#main .colorsBox .imgSecBox .textBox {
	display: flex;
	color: #fff;
	justify-content: flex-end;
}
#main .colorsBox .imgSecBox .textBox .sub {
	max-width: 50rem;
}
#main .colorsBox .imgSecBox h2 {
	margin-bottom: 5rem;
	font-size: 6rem;
	font-weight: 100;
	letter-spacing: 0.05em;
}
#main .colorsBox .imgSecBox p {
	letter-spacing: 0.15em;
	margin-bottom: 2rem;
	font-size: 1.7rem;
}
#main .colorsBox .imgSecBox .en {
	font-size: max(10px,1.2rem);
	color: #fff;
	letter-spacing: 0;
	font-weight: 300;
}
/*------------------------------------------------------------
	colorsList
------------------------------------------------------------*/ 
#main .colorsListBox {
	padding-top: 18rem;
	position: relative;
	z-index: 2;
}
#main .colorsList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
}
#main .colorsList02 {
	margin-top: 15rem;
	align-items: flex-start;
}
#main .colorsList li {
	width: 50%;
}
#main .colorsList .title {
	font-size: 2.4rem;
	letter-spacing: 0.03em;
	font-weight: 300;
	text-align: right;
	margin-bottom: 1rem;
}
#main .colorsList li:nth-child(2n) .title {
	text-align: left;
}
#main .colorsList .photo {
	position: relative;
	margin-bottom: 1.3rem;
}
#main .colorsList .item03 {
	width: 55.3%;
}
#main .colorsList .item04 {
	width: 35.7%;
}
#main .colorsList .item01 {
	padding: 0 4% 0 10.3%;
}
#main .colorsList .item01 .photo {
	aspect-ratio: 488 / 651;
}
#main .colorsList .item02 {
	padding: 0 0 0 5.3%;
}
#main .colorsList .item02 .photo {
	aspect-ratio: 611 / 474;
}
#main .colorsList .item03 .photo {
	aspect-ratio: 754 / 503;
}
#main .colorsList .item04 .photo {
	aspect-ratio: 488 / 651;
}
#main .colorsList .textBox p {
	font-size: max(10px,1.3rem);
	margin-bottom: 1.7rem;
	letter-spacing: 0.05em;
	line-height: 1.77;
}
#main .colorsList .textBox p:last-child {
	margin-bottom: 0;
}
#main .colorsList .textBox .en {
	font-size: max(10px,1.2rem);
	font-weight: 300;
	letter-spacing: 0;
	line-height: 1.33;
	color: rgba(64, 61, 61, 0.7);
}
#main .colorsList .item03 .textBox {
	padding-left: 14rem;
}
#main .colorsList .parallaxImg {
	top: -7%;
	height: 114%;
	background-size: 114% auto;
}


/*------------------------------------------------------------
	gallery
------------------------------------------------------------*/
#main .gallery {
	padding: 12rem 0 16.3rem;
}
#main .gallery .headLine01 {
	margin: 0 0 3.6rem 10.3rem;
}
#main .gallery .galleryList {
	display: grid;
	gap: 0.8rem;
}
#main .gallery .item {
	position: relative;
	overflow: hidden;
}
#main .gallery a {
	overflow: hidden;
	display: inline-block;
}
#main .gallery .galleryList img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s;
}
#main .galleryList {
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 16.35vw;
}
#main .gallery .item01 {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
#main .gallery .item02 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
#main .gallery .item03 {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
}
#main .gallery .item04 {
	grid-column: 4 / 5;
	grid-row: 1 / 2;
}
#main .gallery .item05 {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
#main .gallery .item06 {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
}
#main .gallery .item07 {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}
#main .gallery .item08 {
	grid-column: 3 / 5;
	grid-row: 2 / 4;
}

@media (hover: hover) {
	#main .mainVisual .scroll a:hover {
		opacity: 0.5;
	}
	#main .gallery .galleryList a:hover img {
		transform: scale(1.1);
	}
}

@media (max-width: 999px) {
	#main .galleryList {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 12rem;
	}
	#main .gallery .item01 {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}
	#main .gallery .item02 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	#main .gallery .item05 {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
	#main .gallery .item04 {
		grid-column: 2 / 3;
		grid-row: 6 / 7;
	}
	#main .gallery .item03 {
		grid-column: 1 / 2;
		grid-row: 6 / 7;
	}
	#main .gallery .item06 {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
	#main .gallery .item07 {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}
	#main .gallery .item08 {
		grid-column: 1 / -1;
		grid-row: 4 / 6;
	}
}
/*------------------------------------------------------------
	popBox
------------------------------------------------------------*/
.popBox {
	padding: 0 6rem;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100dvh;
	z-index: 1001;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease-in-out;
}
.popBox.visible {
	opacity: 1;
	visibility: visible;
}
.popBox .popClose {
	cursor: pointer;
	width: 2.3rem;
	color: #E6E6E6;
	position: absolute;
	right: 3rem;
	top: 3rem;
	z-index: 1;
	transition: 0.3s;
}
.popCover {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(26, 30, 20, 0.89);
}
.popBox .popInner {
	max-width: 84rem;
	height: 85dvh;
	max-height: 56rem;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}
.popBox .popInner *:not(.slick-dots,.prev,.next) {
	height: 85dvh;
	max-height: 56rem;
}
.popBox .popInner .photo {
	text-align: center;
}
.popBox .popInner .photo img {
	margin: 0 auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.popBox .popInner .slick-dots {
	position: absolute;
	left: 0;
	bottom: -2.8rem;
	width: 100%;
	display: flex;
	justify-content: center;
}
.popBox .popInner .slick-dots button {
	display: none;
}
.popBox .popInner .slick-dots li {
	cursor: pointer;
	margin: 0 0.65rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.39;
}
.popBox .popInner .slick-dots li.slick-active {
	opacity: 1;
}
.popBox .prev,
.popBox .next {
	margin-top: -1.6rem;
	position: absolute;
	top: 50%;
	padding: 1rem;
	cursor: pointer;
	transition: 0.3s;
}
.popBox .popInner .prev img ,
.popBox .popInner .next img {
	height: auto;
	max-height: inherit;
	width: 1.2rem;
}
.popBox .prev {
	left: -5rem;
}
.popBox .next {
	right: -5rem;
}

@media (hover: hover) {
	.popBox .prev:hover,
	.popBox .next:hover,
	.popBox .popClose:hover {
		opacity: 0.5;
	}
}

@media all and (max-width: 999px) {
	.popBox {
		padding: 0 1rem;
	}
	.popBox .popInner {
		max-width: inherit;
		max-height: 28rem;
		height: 55dvh;
	}
	.popBox .popClose {
		right: 2rem;
		top: 2rem;
	}
	.popBox .popInner :not(.slick-dots, .prev, .next) {
		max-height: 28rem;
		height: 55dvh;
	}
	.popBox .prev, .popBox .next {
		top: auto;
		bottom: -4.3rem;
		margin: 0;
	}
	.popBox .prev {
		left: 0;
	}
	.popBox .next {
		right: 0;
	}
	.popBox .popInner .prev img, .popBox .popInner .next img {
		width: 1rem;
	}
}

/*------------------------------------------------------------
	function
------------------------------------------------------------*/ 
#main .function {
	margin-bottom: 5rem;
	min-height: 100dvh;
	height: 100dvh;
}
#main .function .headLine01 {
	margin-bottom: -2.5rem;
	font-size: 5.5rem;
	padding: 0 0 0 7.5rem;
}
#main .function .stickyBox {
	position: sticky;
	top: 0;
	height: 100dvh;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
}
#main .function .scrollBox {
	overflow: hidden;
	height: calc(100% - 9rem);
	margin-left: 1rem;
	margin-bottom: 1rem;
}
#main .function .flexBox {
	display: flex;
	flex-wrap: nowrap;
	width: fit-content;
	height: 100%;
}
#main .function .itemBox {
	margin-right: 1rem;
	flex-shrink: 0;
	width: 90rem;
	position: relative;
}
#main .function .itemBox .bgImg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
#main .function .itemBox .textBox {
	padding: 4.3rem 6.6rem;
	position: relative;
	z-index: 2;
	color: #fff;
}
#main .function .itemBox .textBox p {
	font-size: max(10px,1.3rem);
	letter-spacing: 0.02em;
	line-height: 1.8;
	margin-bottom: 1.4rem;
}
#main .function .itemBox .textBox p:last-child {
	margin-bottom: 0;
}
#main .function .itemBox .textBox .enTxt {
	font-size: max(10px,1.0rem);
	letter-spacing: 0;
	line-height: 1.45;
}
#main .function .itemBox .textBox .number {
	position: absolute;
	top: 2.7rem;
	right: 2.7rem;
	font-size: 1.6rem;
	font-weight: 100;
	letter-spacing: 0;
	margin: 0;
	-webkit-writing-mode : tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 2rem;
	white-space: nowrap;
}
#main .function .itemBox h3 {
	font-size: 2.5rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin-bottom: 3rem;
}
#main .function .itemBox h3 .en {
	margin-top: 0.3rem;
	display: block;
	font-size: 1.4rem;
	letter-spacing: 0;
}
#main .function .itemBox02 .textBox {
	color: #444444;
}
#main .essential  {
	padding: 12.6rem 0 0;
}
#main .bigPhoto {
	aspect-ratio: 2789 / 1108;
	position: relative;
}
#main .bigPhoto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#main .essential .imgBox {
	max-width: 104rem;
	margin: 0 auto;
	padding: 15rem 7rem;
	box-sizing: content-box;
	align-items: flex-start;
}
#main .essential .imgBox .headLine01 {
	font-size: 5.5rem;
	font-weight: 100;
	letter-spacing: 0.03em;
	line-height: 1;
	margin: 0 0.5rem 5.5rem 0;
	text-align: right;
}
#main .essential .imgBox .photo {
	width: 17.6rem;
	margin-left: auto;
}
#main .essential .imgBox .lBox {
	width: 40rem;
	margin: 0rem 11.6rem 0 -5rem;
}
#main .essential .imgBox .rBox {
	flex: 1;
}
#main .essential .imgBox h3 {
	margin-bottom: 3.2rem;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.06em;
}
#main .essential .imgBox h3 .en {
	display: block;
	font-size: 1.4rem;
	letter-spacing: 0;
	margin-top: 1rem;
	color: rgba(64, 61, 61, 0.7);
}
#main .essential .imgBox p {
	margin-bottom: 1.2rem;
	line-height: 2;
	letter-spacing: 0.01em;
}
#main .essential .imgBox .enTxt {
	font-size: max(10px,1.2rem);
	letter-spacing: 0;
	line-height: 1.5;
	color: rgba(64, 61, 61, 0.7);
}
#main .essential .imgBox p:last-child {
	margin-bottom: 0;
}
#main .essential .comLink {
	margin-top: 4rem;
}
#main .situation {
	padding-bottom: 12rem;
	padding-top: 9.5rem;
	position: relative;
}
#main .situation .content02 {
	position: relative;
}
#main .situation .headLine01 {
	position: absolute;
	top: 0rem;
	right: -1.2rem;
	width: 5rem;
	-webkit-writing-mode : tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	letter-spacing: 0.03em;
	font-size: 5.5rem;
}
#main .situation .imgBox {
	margin-bottom: 12.5rem;
	align-items: flex-start;
}
#main .situation .imgBox:last-child {
	margin-bottom: 0;
}
#main .situation .imgBox .photoBox {
	width: 47rem;
	margin-right: 7.5rem;
}
#main .situation .imgBox .textBox {
	flex: 1;
	margin-top: -0.3rem;
}
#main .situation .imgBox .textBox .subBox {
	max-width: 60rem;
}
#main .situation .imgBox h3 {
	margin-bottom: 2.7rem;
}
#main .situation .imgBox h3 .jp {
	display: flex;
	align-items: center;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.1em;
}
#main .situation .imgBox h3 .jp .txtSpan {
	margin: 0.5rem 0 0 2rem;
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0;
}
#main .situation .imgBox h3 .en {
	margin-bottom: 0.5rem;
	display: block;
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0;
}
#main .situation .imgBox p {
	margin-bottom: 1.7rem;
	letter-spacing: 0.02em;
	line-height: 1.785;
}
#main .situation .imgBox .enTxt {
	font-size: max(10px,1.2rem);
	line-height: 1.5;
	letter-spacing: 0;
	color: rgba(64, 61, 61, 0.7);
}
#main .situation .imgBox .greyBox {
	background-color: #F7F7F7;
	padding: 1.3rem 2.6rem 1rem;
	margin-top: 3.3rem;
}
#main .situation .imgBox .greyBox p {
	font-size: max(10px,1.2rem);
	letter-spacing: 0;
	margin-bottom: 1.2rem;
	line-height: 1.5;
}
#main .situation .imgBox .greyBox p:last-child {
	margin-bottom: 0;
}
#main .situation .imgBox .greyBox .txtSpan {
	display: flex;
}
#main .situation .imgBox .greyBox .subSpan {
	min-width: 5.6rem;
	flex-shrink: 0;
	padding-right: 1rem;
}
#main .situation .imgBox .greyBox .enTxt {
	font-size: max(10px,1.1rem);
	font-weight: 300;
	color: rgba(64, 61, 61, 0.7);
}
#main .situation .imgBox .greyBox .enTxt .subSpan {
	padding-right: 0.2rem;
	min-width: inherit;
}
#main .specification {
	padding: 7.2rem 0 22rem;
}
#main .specification .headLine01 {
	font-size: 5.5rem;
	margin-bottom: 4.8rem;
	letter-spacing: 0.03em;
}
#main .specification .imgBox {
	margin-bottom: 2.5rem;
	align-items: flex-start;
}
#main .specification .imgBox h3 {
	width: 58.7rem;
	padding-right: 2rem;
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.458;
}
#main .specification .imgBox h3 .en {
	margin-right: 1.5rem;
	font-size: 2.8rem;
	font-weight: 500;
}
#main .specification .imgBox dl {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#main .specification .imgBox dt {
	width: 11.8rem;
	padding-right: 1rem;
	font-size: 1.6rem;
	font-weight: 500;
}
#main .specification .imgBox dd {
	width: calc(100% - 11.8rem);
	font-size: 1.4rem;
	padding-bottom: 1.7rem;
	letter-spacing: 0.02em;
}
#main .specification .imgBox dd .list {
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0.2rem 0 0 2.7rem;
	gap: 0.5rem;
}
#main .specification .imgBox dd .list li {
	width: 2.3rem;
}
#main .specification .h3Ttl {
	font-size: 2.2rem;
	margin-bottom: 1.7rem;
	font-weight: 400;
	overflow: hidden;
}
#main .specification .h3Ttl span {
	position: relative;
	padding-right: 1.5rem;
	display: inline-block;
}
#main .specification .h3Ttl span:after {
	width: 8888px;  
	height: 1px;
	background-color: rgb(88, 88, 88,0.6);
	position: absolute;  
	top: 50%;
	transform: translateY(-50%);
	left: 100%;  
	content: ""; 
}
#main .variationList {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 0 0 6.7rem -1rem;
}
#main .variationList li {
	text-align: center;
	width: calc((100% - (2rem * 3 + 0.1rem)) / 4);
}
#main .variationList .photo {
	margin: 0 -2.2rem -0.6rem;
	aspect-ratio: 553 / 369;
	position: relative;
}
#main .variationList .photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#main .variationList .ttl {
	font-size: max(10px,1.3rem);
	margin-bottom: 1.3rem;
	position: relative;
}
#main .variationList .ttl .en {
	margin-bottom: 0;
	display: block;
	font-size: 2rem;
}
#main .variationList .comLink {
	width: 16.6rem;
	margin: 0 auto;
}
#main .variationList .comLink a {
	min-height: 3.2rem;
	font-size: max(10px,1.3rem);
	letter-spacing: 0.08em;
}
#main .specification .ulBox {
	overflow: hidden;
	padding-right: 5.9rem;
}
#main .infoList {
	margin-top: -1px;
	padding: 0 0 2.2rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.7rem 7.8rem;
	position: relative;
	border-bottom: 1px solid rgb(54, 33, 22,0.2);
}
#main .infoList li {
	padding-top: 2rem;
	border-top: 1px solid rgb(54, 33, 22,0.2);
	width: calc((100% - 7.8rem) / 2);
}
#main .infoList dt {
	margin-bottom: 0.4rem;
	font-weight: 500;
}
#main .program {
	align-items: center;
	margin: 2.8rem 0 15rem;
}
#main .program h3 {
	font-weight: 500;
	margin-bottom: 1.2rem;
}
#main .program p {
	line-height: 1.785;
}
#main .program .lBox {
	flex: 1;
}
#main .program .chart {
	width: 42.3rem;
	margin: 0 5.9rem 0 2rem;
}
#main .designer {
	padding-top: 1.8rem;
	align-items: flex-start;
}
#main .designer .photoBox {
	width: 30.3rem;
	margin-right: 7.5rem;
}
#main .designer .textBox {
	flex: 1;
	margin-top: -0.3rem;
}
#main .designer .textBox p {
	line-height: 1.928;
}
#main .designer .textBox .ttl {
	margin-bottom: 1.5rem;
}
#main .designer .textBox .name {
	margin-bottom: 1.3rem;
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: 0.07em;
	display: inline-flex;
	align-items: center;
}
#main .designer .textBox .name .en {
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0;
	margin: 0.2rem 0 0 1.5rem;
}
#main .faq {
	padding: 11.5rem 0 12.5rem;
	margin: 0 1rem;
	background-color: #F2F2F0;
}
#main .faq .headLine01 {
	font-size: 5.5rem;
	margin-left: -1rem;
	letter-spacing: 0.03em;
}
#main .faq .headLine01 {
	width: 26.5rem;
	padding-right: 2rem;
}
#main .faq .rBox {
	margin-top: -1.3rem;
	flex: 1;
}
#main .faqList > li {
	border-bottom: 1px solid rgb(54, 33, 22,0.2);
}
#main .faqList dt {
	padding: 2.4rem 4rem 2.4rem 0;
	cursor: pointer;
	font-size: 1.5rem;
	font-weight: 500;
	position: relative;
}
#main .faqList dt:before,
#main .faqList dt:after {
	position: absolute;
	right: 1.8rem;
	top: 50%;
	width: 1rem;
	height: 1px;
	background-color: #707070;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	content: "";
}
#main .faqList dt:after {
	transform: rotate(90deg);
}
#main .faqList dt.on:after {
	transform: rotate(180deg);
	opacity: 0;
}
#main .faqList dd {
	display: none;
	line-height: 1.86;
	padding: 0 5rem 2.2rem 0;
	margin-top: -0.7rem;
}
#main .faqList dd a {
	text-decoration: underline;
}
#main .faqList dd ul {
	margin: 0 0 2rem 2rem;
}
#main .faqList dd li {
	text-indent: 0;
	list-style-type: decimal;
}
#main .contact {
	padding: 1rem 0;
}
#main .contactList {
	display: flex;
	gap: 0 0.3rem;
}
#main .contactList li {
	width: calc((100% - 0.3rem) / 2);
}
#main .contactList a {
	color: #fff;
	display: block;
	aspect-ratio: 1366 / 660;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	overflow: hidden;
}
#main .contactList .photo {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
#main .contactList .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s;
}
#main .contactList .sub {
	position: relative;
	z-index: 1;
}
#main .contactList h3 {
	font-size: 2.2rem;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
}
#main .contactList h3 .en {
	margin-bottom: 2.5rem;
	display: block;
	font-size: 2.2rem;
	letter-spacing: 0.02em;
	font-weight: 400;
	display: block;
}

@media (hover: hover) {
	#main .contactList a:hover .photo img {
		transform: scale(1.1);
	}
	#main .faqList dd a:hover {
		opacity: 0.5;
	}
}

@media all and (max-width: 999px) {
	#main .mainVisual .slick-dots {
		left: 1rem;
		bottom: 2rem;
	}
	#main .mainVisual .mainText {
		display: block;
		top: 11rem;
		padding: 0 1.5rem;
	}
	#main .mainVisual .lBox {
		width: auto;
		margin: 0;
		display: block;
		padding: 0 0 2.8rem;
	}
	#main .mainVisual .lBox .sub {
		max-width: inherit;
	}
	#main .mainVisual .logo {
		width: 8.0rem;
		top: 2rem;
		left: 1.5rem;
	}
	#main .mainVisual .lBox p {
		font-size: 1.5rem;
		padding: 0 1rem 0 2.5rem;
		justify-content: center;
	}
	#main .mainVisual .lBox p .txtSpan {
		font-size: 4.8rem;
		margin-left: 2rem;
		letter-spacing: 0.02em;
	}
	#main .mainVisual .slideTxt .textBox {
		left: 0;
		padding: 1.5rem 2rem 0 2.7rem;
	}
	#main .mainVisual .slideTxt .textBox02 {
		padding-right: 1rem;
		padding-left: 2.6rem;
	}
	#main .mainVisual .slideTxt .textBox02 p {
		letter-spacing: 0.005em;
	}
	/* #main .mainVisual:has(.textBox02.active) .mainText  {
		top: 7.5rem;
	} */
	#main .mainVisual .slideTxt {
		max-width: inherit;
		width: auto;
	}
	#main .mainVisual .slideTxt p {
		font-size: 1.4rem;
		margin-bottom: 1.7rem;
		letter-spacing: 0.05em;
		line-height: 1.78;
	}
	#main .mainVisual .slideTxt .en {
		max-width: inherit;
		font-size: 1rem;
		line-height: 1.6;
	}
	#main .mainVisual .slideTxt .textBox02 p {
		font-size: 1.2rem;
		line-height: 1.7;
		margin-bottom: 1rem;
	}
	#main .mainVisual .slideTxt .textBox02 .en {
		font-size: 0.9rem;
		line-height: 1.3;
	}
	#main .mainVisual .slideTxt .textBox02 p:not(.en) + .en {
		margin-top: 2.3rem;
	}
	.imgSecBox {
		min-height: 59rem;
		align-items: flex-end;
		flex-direction: column;
		margin:0.5rem 0.5rem;
	}
	.imgSecBox::after { 
		right: auto;
		left: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		height: calc(100% - 26.1rem);
		background: linear-gradient(rgba(255, 255, 255, 0) 0%, #d4d2cc 100%, rgba(139, 139, 139, 0.91) 100%, #808080 100%);
	}
	.imgSecBox .textBox {
		width: 100%;
		padding-bottom: 1.4rem;
	}
	.imgSecBox .textBox .sub {
		max-width: inherit;
	}
	.imgSecBox h2 {
		font-size: 1.5rem;
		letter-spacing: 0.01em;
		margin-bottom: 1.7rem;
	}
	.imgSecBox h3 {
		font-size: 1.7rem;
		letter-spacing: 0.03em;
		line-height: 1.764;
		margin-bottom: 1.5rem;
	}
	.imgSecBox h3 .en {
		font-size: 1.2rem;
		line-height: 1.5;
		letter-spacing: 0;
		opacity: 0.7;
		margin-top: 0.2rem;
	}
	.imgSecBox p {
		letter-spacing: 0.01em;
		line-height: 1.833;
	}
	.imgSecBox p:last-child {
		margin-bottom: 0;
	}
	#main .featrueBox .imgSecBox {
		color: #fff;
		justify-content: flex-start;
	}
	#main .featrueBox .imgSecBox::after {
		background: linear-gradient(to top,rgba(0, 0, 0, 0) 0%, #000 100%);
		opacity: 0.3;
		bottom: auto;
		top: 0;
		width: 100% !important;
		height: calc(100% - 14.7rem);
	}
	#main .featrueBox .imgSecBoxMid::after {
		opacity: 0.35;
		height: calc(100% - 8.8rem);
	}
	#main .featrueBox .imgSecBox02::after {
		display: none;
	}
	#main .featrueBox .imgSecBox .textBox {
		position: static;
		padding-top: 10.5rem;
		padding-inline: 0.5rem;
	}
	#main .featrueBox .imgSecBox02 .textBox {
		padding-top: 6rem;
	}
	#main .featrueBox .imgSecBox .textBox .sub {
		max-width: inherit;
		margin: 0;
	}
	#main .featrueBox h2 {
		white-space: nowrap;
		margin: 0;
		position: absolute;
		top: 0rem;
		right: -1rem;
		width: 1.5rem;
		font-size: 1.4rem;
		letter-spacing: 0;
		line-height: 1.21;
		border: none;
		display: block;
		-webkit-writing-mode : tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	#main .featrueBox h2 .num {
		display: inline-block;
		margin-top: 1rem;
	}
	#main .featrueBox .imgSecBox h3 {
		margin-bottom: 1.5rem;
		font-size: 1.7rem;
		letter-spacing: 0.03em;
	}
	#main .featrueBox .imgSecBox h3 .en {
		line-height: 1.5;
		margin-top: 0.9rem;
		font-size: 1.2rem;
		color: #FFFFFF;
		opacity: 0.7;
	}
	#main .featrueBox .imgSecBox p {
		line-height: 1.833;
		letter-spacing: 0.01em;
	}
	#main .featrueBox .imgSecBox:nth-child(2n) .textBox .sub {
		margin: 0;
	}
	#main .featrueBox .imgSecBox02 {
		color: #403D3D;
	}
	#main .featrueBox .imgSecBox02 h3 .en {
		color: #403D3D;
		opacity: 0.7;
	}
	#main .colorsBox .imgSecBox {
		justify-content: center;
	}
	#main .colorsBox .imgSecBox::after {
		display: none;
	}
	#main .colorsBox .imgSecBox .textBox  {
		padding: 0 1rem 2rem;
	}
	#main .colorsBox .imgSecBox .textBox .sub {
		max-width: inherit;
	}
	#main .colorsBox .imgSecBox h2 {
		margin-bottom: 1.5rem;
		font-size: 4.4rem;
		letter-spacing: 0;
	}
	#main .colorsBox .imgSecBox p {
		font-size: 1.5rem;
		margin-bottom: 1.9rem;
		letter-spacing: 0.04em;
		line-height: 1.47;
	}
	#main .colorsBox .imgSecBox .en {
		line-height: 1.67;
		letter-spacing: 0;
	}
	#main .colorsListBox {
		padding-top: 9rem;
	}
	#main .colorsList {
		display: block;
	}
	#main .colorsList li {
		width: auto;
	}
	#main .colorsList .item01 {
		padding: 0 8.2rem 4.7rem 0;
	}
	#main .colorsList .title {
		margin: 0 0.5rem 0.8rem 0;
		font-size: 1.8rem;
		letter-spacing: 0;
	}
	#main .colorsList .item01 .photo {
		aspect-ratio: 283 / 328;
	}
	#main .colorsList .item01 .textBox {
		padding-left: 2.7rem;
		margin-right: -4rem;
	}
	#main .colorsList .textBox p {
		font-size: 1.2rem;
		line-height: 1.833;
		letter-spacing: 0;
	}
	#main .colorsList .item02 {
		padding: 0 0 4rem 3rem;
	}
	#main .colorsList .item02 .photo {
		aspect-ratio: 335 / 204;
	}
	#main .colorsList02 {
		margin-top: 0;
	}
	#main .colorsList .item03 {
		width: auto;
		padding: 0 1.6rem 4.8rem 0;
	}
	#main .colorsList .item03 .photo {
		aspect-ratio: 349 / 191;
	}
	#main .colorsList .item03 .textBox {
		padding-left: 2.3rem;
	}
	#main .colorsList .item04 {
		width: auto;
		padding: 0 5rem;
	}
	#main .colorsList .item04 .photo {
		aspect-ratio: 268 / 298;
	}
	#main .gallery .headLine01 {
		margin: 0 0 2rem 1.6rem;
	}
	#main .gallery {
		padding: 7.3rem 0 9.0rem;
	}
	#main .gallery .galleryList {
		gap: 0.5rem;
	}
	#main .function {
		height: auto;
		min-height: inherit;
		position: relative;
	}
	#main .function .icoBox {
		position: absolute;
		top: 1rem;
		right: 1.5rem;
		z-index: 1;
		display: flex;
		gap: 0 1.5rem;
		align-items: center;
	}
	#main .function .icoBox > div {
		width: 3.8rem;
		cursor: pointer;
	}
	#main .function .icoBox > div img {
		width: 100%;
	}
	#main .function .icoBox .prev.slick-disabled {
		background: url(/client_info/ATAROMA/view/userweb/ext/scen/img/index/prev02_no.png) no-repeat center;
		background-size: 100% auto;
	}
	#main .function .icoBox .prev.slick-disabled img {
		visibility: hidden;
	}
	#main .function .icoBox .next.slick-disabled {
		background: url(/client_info/ATAROMA/view/userweb/ext/scen/img/index/next02_no.png) no-repeat center;
		background-size: 100% auto;
	}
	#main .function .icoBox .next.slick-disabled img {
		visibility: hidden;
	}
	#main .function .headLine01 {
		font-size: 3.6rem;
		padding: 0 0 1.6rem 1.5rem;
		min-height: 6.7rem;
		margin-bottom: -8rem;
	}
	#main .function .scrollBox {
		margin-left: 0.5rem;
	}
	#main .function .itemBox {
		width: 35.5rem;
		margin-right: 0.5rem;
	}
	#main .function .itemBox .textBox {
		padding: 4.5rem 2rem;
	}
	#main .function .itemBox .textBox .number {
		top: 1rem;
		right: 0.8rem;
		font-size: 1.3rem;
		letter-spacing: 0;
		color: #fff;
	}
	#main .function .itemBox02 .textBox .number{
		color: #444;
	}
	#main .function .itemBox h3 {
		font-size: 1.7rem;
		margin-bottom: 2rem;
		letter-spacing: 0.03em;
		line-height: 1.65;
	}
	#main .function .itemBox h3 .en {
		margin-top: 0.8rem;
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	#main .function .itemBox .textBox p {
		font-size: 1.2rem;
		letter-spacing: 0.01em;
		line-height: 1.833;
	}
	#main .essential {
		padding: 4rem 0 0;
	}
	#main .bigPhoto {
		aspect-ratio: 730 / 520;
	}
	#main .essential .imgBox {
		display: block;
		padding: 5rem 0 2rem;
	}
	#main .essential .imgBox .lBox {
		width: auto;
		margin: 0 0 1.2rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	#main .essential .imgBox .headLine01 {
		margin: 0 0 -1.5rem;
		font-size: 3.2rem;
		letter-spacing: 0.03em;
		text-align: left;
	}
	#main .essential .imgBox .photo {
		width: 9.4rem;
		margin: 0 0 0 2rem;
	}
	#main .essential .imgBox h3 {
		margin-bottom: 2.1rem;
		font-size: 1.6rem;
		letter-spacing: 0.02em;
	}
	#main .essential .imgBox h3 .en {
		font-size: 1.2rem;
		letter-spacing: 0;
		margin-top: 0.7rem;
		margin-right: 0;
	}
	#main .essential .imgBox p {
		font-size: 1.3rem;
		line-height: 1.69;
		letter-spacing: 0.01em;
	}
	#main .essential .comLink {
		margin-top: 3.0rem;
	}
	#main .situation {
		padding: 7.4rem 0 2.4rem;
	}
	#main .situation .headLine01 {
		margin-bottom: 2.1rem;
		font-size: 3.3rem;
		text-align: right;
		letter-spacing: 0.03em;
		position: static;
		width: auto;
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		-moz-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
		-o-writing-mode: horizontal-tb;
	}
	#main .situation .imgBox {
		margin-bottom: 7.0rem;
		display: block;
	}
	#main .situation .imgBox .photoBox {
		width: auto;
		margin: 0 -1.5rem 4rem;
	}
	#main .situation .imgBox .photoBox img {
		width: 100%;
	}
	#main .situation .imgBox .textBox .subBox {
		max-width: inherit;
	}
	#main .situation .imgBox h3 {
		margin-bottom: 1.8rem;
	}
	#main .situation .imgBox h3 .en {
		font-size: 1.4rem;
		letter-spacing: 0;
	}
	#main .situation .imgBox h3 .jp {
		letter-spacing: 0.02em;
		font-size: 2rem;
	}
	#main .situation .imgBox h3 .jp .txtSpan {
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	#main .situation .imgBox p {
		font-size: 1.3rem;
		letter-spacing: 0.01em;
		line-height: 1.833;
	}
	#main .situation .imgBox .greyBox {
		margin: 3.1rem -1.5rem 0;
		padding: 1.5rem 1.6rem 1.5rem;
	}
	#main .situation .imgBox .greyBox p {
		font-size: 1.1rem;
		line-height: 1.45;
	}
	#main .situation .imgBox .greyBox .subSpan {
		min-width: 5rem;
	}
	#main .situation .imgBox .greyBox .enTxt {
		font-size: 1rem;
		line-height: 1.4;
	}
	#main .situation .imgBox .greyBox .enTxt .subSpan {
		min-width: 5rem;
	}
	#main .specification {
		padding: 7rem 0 10rem;
	}
	#main .specification .headLine01 {
		font-size: 3.3rem;
		margin: 0 0 2.7rem;
		letter-spacing: 0.03em;
	}
	#main .specification .imgBox {
		margin-bottom: 3.2rem;
		display: block;
	}
	#main .specification .imgBox h3 {
		width: auto;
		padding: 0;
		margin: 0 0 2.5rem;
		font-size: 1.6rem;
		letter-spacing: 0;
	}
	#main .specification .imgBox h3 .en {
		font-size: 2rem;
		margin-right: 0.5rem;
	}
	#main .specification .imgBox dt {
		font-size: 1.3rem;
		letter-spacing: 0.02em;
		width: 10.6rem;
	}
	#main .specification .imgBox dd {
		width: calc(100% - 10.6rem);
		padding-bottom: 1.4rem;
		font-size: 1.3rem;
		letter-spacing: 0.01em;
	}
	#main .specification .imgBox dd .list li {
		width: 2.0rem;
	}
	#main .specification .imgBox dd .list {
		margin-left: 1.3rem;
	}
	#main .specification .h3Ttl {
		font-size: 1.8rem;
		margin-bottom: 0.2rem;
		letter-spacing: 0;
	}
	#main .variationList {
		margin: 0 0 5.8rem 0;
		gap: 4rem 2rem;
	}
	#main .variationList li {
		width: calc((100% - (2rem)) / 2);
	}
	#main .variationList .photo {
		margin: 0 -1.9rem -0.9rem;
	}
	#main .variationList .ttl {
		margin-bottom: 1.2rem;
		font-size: 1.1rem;
	}
	#main .variationList .ttl .en {
		font-size: 1.6rem;
		margin-bottom: -0.2rem;
	}
	#main .variationList .comLink {
		width: auto;
		max-width: 15.2rem;
	}
	#main .specification .ulBox {
		margin-top: 1rem;
		padding: 0;
	}
	#main .infoList {
		padding-bottom: 1.7rem;
		flex-direction: column;
	}
	#main .infoList li {
		padding-top: 1.17rem;
		width: 100%;
	}
	#main .infoList dl {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	#main .infoList dt {
		margin-bottom: 0;
		width: 10.7rem;
		padding-right: 1rem;
		font-size: 1.3rem;
		font-weight: 500;
		letter-spacing: 0.04em;
		line-height: 1.54;
	}
	#main .infoList dd {
		width: calc(100% - 10.7rem);
		font-size: 1.3rem;
		letter-spacing: 0.02em;
		line-height: 1.54;
	}
	#main .program {
		margin: 1.5rem 0 9rem;
		display: block;
	}
	#main .program h3 {
		font-size: 1.3rem;
		margin-bottom: 1rem;
		letter-spacing: 0.04em;
	}
	#main .program .chart {
		width: auto;
		margin: 2rem 0 0;
	}
	#main .program .chart img {
		width: 100%;
	}
	#main .program p {
		font-size: 1.3rem;
		letter-spacing: 0.02em;
		line-height: 1.54;
	}
	#main .designer {
		display: block;
	}
	#main .designer .photoBox {
		margin: 0 0 2.8rem;
		width: auto;
	}
	#main .designer .photoBox img {
		width: 100%;
	}
	#main .designer .textBox p {
		font-size: 1.3rem;
		letter-spacing: 0.01em;
		line-height: 1.7;
	}
	#main .designer .textBox .ttl {
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	#main .faq {
		padding: 6rem 0 10rem;
		margin: 0;
	}
	#main .faq .content {
		display: block;
	}
	#main .faq .headLine01 {
		width: auto;
		padding: 0 0 1.3rem;
		margin: 0;
		font-size: 3.6rem;
		letter-spacing: 0.03em;
	}
	#main .faqList > li {
		border: none;
		position: relative;
	}
	#main .faqList > li:after {
		height: 1px;
		background-color: rgba(54, 33, 32, 0.2);
		position: absolute;  
		bottom: 0;
		right: -0.5rem;
		left: -2rem;  
		content: ""; 
	}
	#main .faqList dt {
		padding: 1.8rem 2rem 1.8rem 0;
		font-size: 1.4rem;
		letter-spacing: 0;
		line-height: 1.45;
		font-weight: 500;
	}
	#main .faqList dt::before, #main .faqList dt::after {
		right: 0.5rem;
	}
	#main .faqList dd {
		margin-top: 0;
		padding-right: 2rem;
	}
	#main .faqList dd ul {
		margin-left: 1.5rem;
	}
	#main .contact {
		padding: 0;
	}
	#main .contactList {
		display: block;
	}
	#main .contactList li {
		margin-bottom: 0.3rem;
		width: auto;
	}
	#main .contactList h3 {
		font-size: 1.8rem;
		letter-spacing: 0.05em;
	}
	#main .contactList h3 .en {
		font-size: 1.5rem;
		letter-spacing: 0.02em;
		margin-bottom: 1.4rem;
	}
	#main .contactList .sub {
		padding-bottom: 1rem;
	}
}

@media (min-width: 1000px) {
	#main .featrueBox .imgSecBox02 .textBox .sub {
		margin-left: 12.5rem;
	}
}



@media all and (min-width: 768px) and (max-width: 999px) {
	html {
		font-size: calc(1000vw / 768);
	}
	body {
		font-size: 2.2rem;
	}
	#main .mainVisual .logo {
		width: 11rem;
		top: 3rem;
    	left: 3rem;
	}
	#main .mainVisual .lBox p {
		padding: 0;
		font-size: 2.3rem;
	}
	#main .mainVisual .lBox p .txtSpan {
		font-size: 7rem;
	}
	#main .mainVisual .slideTxt p {
		margin-bottom: 2.7rem;
		font-size: 2.4rem;
		letter-spacing: 0.07em;
		line-height: 1.875;
	}
	#main .mainVisual .slideTxt .en {
		font-size: 1.5rem;
		letter-spacing: 0;
		line-height: 1.4;
	}
	#main .mainVisual .slideTxt .textBox02 p {
		margin-inline-end: -4rem;
		font-size: 2.2rem;
		line-height: 1.86;
	}
	#main .mainVisual .slideTxt .textBox02 .en {
		font-size: 1.5rem;
		line-height: 1.4;
	}
	#main .mainVisual .lBox {
		width: 50rem;
		margin: 0 auto 1.4rem;
	}
	#main .mainVisual .slideTxt .textBox {
		padding-inline: 0;
		left: 50%;
		min-width: 50rem;
		width: auto;
		transform: translateX(-50%);
	}
	#main .mainVisual .mainText{
		top: 14.3rem;
	}
	.mainVisual .scroll .line {
		height: 4.3rem;
	}
	#main .mainVisual .slick-dots li {
		width: .86rem;
		height: .86rem;
		margin: 0 1.5rem;
	}
	#main .mainVisual .slick-dots {
		right: 1.5rem;
		bottom: 2.5rem;
	}
	.imgSecBox {
		padding: 5rem;
		margin: 1rem;
		min-height: 123.4rem;
	}
	.imgSecBox h2 {
		margin-bottom: 2.4rem;
		font-size: 2.3rem;
	}
	.imgSecBox h3 {
		margin-bottom: 3.5rem;
		font-size: 2.7rem;
	}
	.imgSecBox h3 .en {
		font-size: 1.9rem;
	}
	.imgSecBox p {
		letter-spacing: 0.02em;
		line-height: 1.82;
	}
	.imgSecBox .textBox {
		padding-bottom: 3.8rem;
	}
	#main .featrueBox h2 {
		font-size: 2.7rem;
		width: 3.5rem;
		top: -0.5rem;
		right: -3.5rem;
	}
	#main .featrueBox .imgSecBox h3 {
		font-size: 2.7rem;
		margin-bottom: 3.4rem;
		letter-spacing: 0.03em;
	}
	#main .featrueBox .imgSecBox h3 .en {
		font-size: 1.9rem;
	}
	#main .featrueBox .imgSecBox .textBox {
		padding-top: 16.7rem;
	}
	#main .colorsBox .imgSecBox {
		padding-inline: 2rem;
	}
	#main .colorsBox .imgSecBox h2 {
		margin-bottom: 3rem;
		font-size: 6.5rem;
	}
	#main .colorsBox .imgSecBox p {
		margin-bottom: 4rem;
		font-size: 2.7rem;
		letter-spacing: 0.04em;
	}
	#main .colorsBox .imgSecBox .en {
		font-size: 1.9rem;
		max-width: 50rem;
		letter-spacing: 0;
		line-height: 1.63;
	}
	#main .colorsListBox {
		padding-top: 11.1rem;
	}
	#main .colorsList .item01 {
		padding: 0 17.3rem 7rem 0;
	}
	#main .colorsList .item02 {
		padding: 0 0 8rem 6.5rem;
	}
	#main .colorsList .title {
		margin-bottom: 1.6rem;
		font-size: 3.8rem;
	}
	#main .colorsList .textBox p {
		font-size: 2.2rem;
		line-height: 1.9;
	}
	#main .colorsList .item01 .photo {
		margin-bottom: 3.1rem;
	}
	#main .colorsList .item01 .textBox {
		padding-left: 6.7rem;
	}
	#main .colorsList .item03 {
		padding: 0 3rem 8rem 0;
	}
	#main .colorsList .item04 {
		padding: 0 10rem;
	}
	#main .gallery .headLine01 {
		margin: 0 0 4rem 2.9rem;
	}
	#main .gallery .galleryList {
		gap: 1rem;
		grid-auto-rows: 25.2rem;
	}
	#main .function .scrollBox {
		height: calc(100% - 13rem);
		margin-left: 1rem;
	}
	#main .function .headLine01 {
		padding: 0 0 0 3rem;
		margin-bottom: -8rem;
	}
	#main .function .icoBox > div {
		width: 7.8rem;
	}
	#main .function .icoBox {
		gap: 0 3.5rem;
		right: 3rem;
		top: 1rem;
	}
	#main .function .itemBox .textBox {
		padding: 4.2rem 6rem 4.2rem 5rem;
	}
	#main .function .itemBox .textBox p {
		font-size: 2.2rem;
		letter-spacing: 0.03em;
		line-height: 1.86;
	}
	#main .function .itemBox h3 {
		font-size: 2.7rem;
		margin-bottom: 3rem;
		letter-spacing: 0.05em;
	}
	#main .function .itemBox h3 .en {
		font-size: 1.9rem;
		margin-top: 0;
	}
	#main .function .itemBox .textBox .number {
		font-size: 2.5rem;
		width: 5rem;
		top: 4.8rem;
		right: 1.8rem;
	}
	#main .function {
		margin-bottom: 9.6rem;
	}
	#main .essential .imgBox {
		padding: 7.5rem 7.0rem;
	}
	#main .essential .imgBox .photo {
		width: 17.6rem;
		margin: -3rem 0 1rem 2rem;
	}
	#main .essential .imgBox p {
		margin-bottom: 4.4rem;
		font-size: 2.2rem;
		letter-spacing: .025em;
		line-height: 1.82;
	}
	#main .essential .imgBox h3 {
		font-size: 2.7rem;
		margin-bottom: 3.3rem;
		letter-spacing: 0.03em;
	}
	#main .essential .imgBox h3 .en {
		font-size: 1.9rem;
	}
	#main .essential .imgBox .headLine01 {
		letter-spacing: 0.05em;
		font-size: 6.2rem !important;
	}
	#main .situation {
		padding: 7.4rem 0 2.4rem;
	}
	#main .situation .headLine01 {
		margin:0 6.5rem 4rem;
		font-size: 6.5rem;
	}
	#main .situation .imgBox .photoBox {
		margin: 0 -1rem 7.2rem;
	}
	#main .situation .imgBox .textBox {
		padding: 0 7rem;
	}
	#main .situation .imgBox h3 .jp {
		font-size: 3rem;
		letter-spacing: 0.03em;
	}
	#main .situation .imgBox h3 .jp .txtSpan {
		font-size: 1.9rem;
	}
	#main .situation .imgBox h3 .en {
		margin-bottom: 1.3rem;
		font-size: 2.2rem;
	}
	#main .situation .imgBox p {
		margin-bottom: 4.3rem;
		font-size: 2.2rem;
		letter-spacing: 0.02em;
		line-height: 1.82;
	}
	#main .situation .imgBox h3 {
		margin-bottom: 2.2rem;
	}
	#main .situation .imgBox .greyBox {
		margin: 4rem 0 0;
		padding-bottom: 2.3rem;
	}
	#main .situation .imgBox .greyBox p {
		margin-bottom: 1.6rem;
		font-size: 1.8rem;
		line-height: 1.43;
	}
	#main .situation .imgBox .greyBox .subSpan {
		min-width: 8.4rem;
	}
	#main .situation .imgBox .greyBox .enTxt {
		font-size: 1.8rem;
	}
	#main .situation .imgBox .greyBox .enTxt .subSpan {
		min-width: 9rem;
	}
	#main .specification .content {
		padding: 0 9rem;
	}
	#main .specification .imgBox h3 {
		margin-bottom: 4rem;
		font-size: 3.3rem;
		letter-spacing: 0;
	}
	#main .specification .imgBox h3 .en {
		font-size: 3.5rem;
	}
	#main .specification .imgBox dt {
		font-size: 2.2rem;
		letter-spacing: 0.02em;
		width: 19.4rem;
	}
	#main .specification .imgBox dd {
		font-size: 2.2rem;
		padding-bottom: 2.5rem;
		letter-spacing: 0.01em;
		width: calc(100% - 19.4rem);
	}
	#main .specification .imgBox dd .list li {
		width: 3.6rem;
	}
	#main .specification .imgBox dd .list {
		margin-left: 3rem;
		gap: 0.9rem;
	}
	#main .specification .h3Ttl {
		font-size: 3rem;
	}
	#main .specification .imgBox {
		margin-bottom: 7.2rem;
	}
	#main .variationList .photo {
		margin: 0 -2.4rem -1.5rem;
	}
	#main .variationList {
		margin: 0 -1rem 11.5rem;
		gap: 7.5rem 2rem;
	}
	#main .variationList .ttl {
		margin-bottom: 2rem;
		font-size: 1.8rem;
	}
	#main .variationList .ttl .en {
		font-size: 2.6rem;
	}
	#main .variationList .comLink {
		max-width: 27.5rem;
	}
	#main .variationList .comLink a {
		min-height: 5.8rem;
		font-size: 2.2rem;
		letter-spacing: 0.08em;
	}
	#main .specification .ulBox {
		padding-top: 1rem;
	}
	#main .infoList li {
		padding: 2.5rem 0 1rem;
	}
	#main .infoList li:first-child {
		border-top: none;
	}
	#main .infoList dt {
		width: 19.5rem;
		font-size: 2.2rem;
		letter-spacing: 0.04em;
		line-height: 1.45;
	}
	#main .infoList dd {
		width: calc(100% - 19.5rem);
		font-size: 2.2rem;
		letter-spacing: 0.02em;
		line-height: 1.45;
	}
	#main .program {
		margin: 5rem 0;
	}
	#main .program h3 {
		font-size: 2.5rem;
	}
	#main .program p {
		font-size: 1.9rem;
	}
	#main .program .lBox {
		margin-bottom: 4rem;
	}
	#main .designer {
		padding-top: 4rem;
	}
	#main .designer .photoBox {
		margin-bottom: 4.5rem;
	}
	#main .designer .textBox p {
		font-size: 2.2rem;
		letter-spacing: 0.02em;
		line-height: 1.64;
	}
	#main .designer .textBox .ttl {
		margin-bottom: 1.7rem;
		font-size: 2rem;
	}
	#main .designer .textBox .name {
		margin-bottom: 2.7rem;
		font-size: 2.8rem;
		letter-spacing: 0.07em;
	}
	#main .designer .textBox .name .en {
		margin-left: 2.5rem;
		font-size: 2.2rem;
	}
	#main .faq {
		padding: 12.5rem 0 13.5rem;
	}
	#main .faq .headLine01 {
		padding: 0 7rem 2rem;
		font-size: 7.5rem !important;
		letter-spacing: 0.03em;
	}
	#main .faqList dt {
		padding: 3.8rem 2rem 3.8rem 7rem;
		font-size: 2rem;
	}
	#main .faqList dt::before, #main .faqList dt::after {
		width: 1.9rem;
		right: 1.0rem;
	}
	#main .faq .content {
		padding-right: 3.5rem;
	}
	#main .faqList dd {
		font-size: 2rem;
		padding-left: 7rem;
		padding-right: 7rem;
	}
	#main .contactList h3 {
		font-size: 3rem;
		letter-spacing: 0.05em;
	}
	#main .contactList h3 .en {
		margin-bottom: 2.4rem;
		font-size: 3.1rem;
		letter-spacing: 0.02em;
	}
	#main .mainVisual .slideTxt .textBox02 p:not(.en) + .en {
		margin-top: 3.3rem;
	}
	#main .mainVisual .slideTxt .textBox02 .en {
		margin-bottom: 3rem;
	}
	#main .function .itemBox .bgImg.sp {
		display: none;
	}
	#main .function .itemBox .bgImg.pc {
		display: block !important;
	}
	#main .specification {
		padding-bottom: 12rem;
	}
	#main .function .itemBox {
		margin-right: 1rem;
		width: 74.3rem;
	}
    .popBox .popInner .slick-dots {
        bottom: -4.5rem;
    }

    .popBox .popInner :not(.slick-dots, .prev, .next) {
		max-height: 48rem;
		height: 55dvh;
	}
    .popBox .popInner {
		max-height: 48rem;
		height: 55dvh;
	}
    .popBox .prev, .popBox .next {
		bottom: -7.6rem;
	}
}