#mv_item {
    position: relative;
}

#mv_item .slide-media {
    height: 100vh;
    position: relative;
}

#mv_item .content{
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    margin: auto;
}

#mv_item .content {
    pointer-events: none;
}

#mv_item .content {
    left: 50%;
    transform: translateX(-50%);
    width: 30vw;
    text-align: center;
}

#mv_logo{
    margin-left: -10px;
    margin-top: 90px;
}

#mv_item .swiper-fade .swiper-slide {
    -webkit-transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, transform !important;
    transition-property: opacity, transform, -webkit-transform !important;
    pointer-events: none;
}

#mv_item .swiper-fade .swiper-slide-active {
    pointer-events: auto;
}

#mv_item　.swiper-button-next, .swiper-button-prev {
    color: var(--main-r);
}

#mv_item .swiper-button-next:after, .swiper-button-prev:after {
    color: var(--main-r)!important;
    font-weight: 700!important;
}

#mv_item .slide {
    display: grid;
    place-content: center;
    height: 100vh;
    padding: 0 8rem;
    text-align: center;
}

#mv_item .slide-media {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#mv_item .slide-media img,
#mv_item .slide-media video{
    -webkit-transition: 7s 1s linear;
    transition: 7s 1s linear;
    -webkit-transform: translateX(-3%) scale(1.1);
    transform: translateX(-3%) scale(1.1);
	height:100%;
	object-fit:cover;
}

#mv_item .slide-title,
#mv_item .slide-text,
#mv_item .slide-link {
    -webkit-animation: 2s var(--easing) both;
    animation: 2s var(--easing) both;
    opacity: 0;
}

#mv_item .slide-title {
    font-size: 6rem;
    line-height: 1.1;
    color: var(--color-theme);
}

#mv_item .slide-text {
    font-size: 1.8rem;
    margin: 4rem 0;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    color: #fff;
}

#mv_item .slide-link {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

#mv_item .slide-button {
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
    color: var(--color-theme);
}

#mv_item .slide-button::before {
    display: inline-block;
    width: 6rem;
    height: 1px;
    margin: -2px 1.6rem 0 0;
    content: "";
    vertical-align: middle;
    background-color: currentColor;
}

#mv_item .swiper-slide[class*=-active] .slide-media img,
#mv_item .swiper-slide[class*=-active] .slide-media video{
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-transform: translateX(3%) scale(1.1);
    transform: translateX(3%) scale(1.1);
}

#mv_item .swiper-slide.anm-started .slide-title,
#mv_item .swiper-slide.anm-started .slide-text,
#mv_item .swiper-slide.anm-started .slide-link {
    -webkit-animation-name: mv02-fadeIn;
    animation-name: mv02-fadeIn;
}

#mv_item .swiper-slide.anm-finished .slide-title,
#mv_item .swiper-slide.anm-finished .slide-text,
#mv_item .swiper-slide.anm-finished .slide-link {
    -webkit-animation-name: mv02-fadeOut;
    animation-name: mv02-fadeOut;
}

@-webkit-keyframes mv02-fadeIn {
    0% {
        -webkit-transform: translateY(6rem);
        transform: translateY(6rem);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes mv02-fadeIn {
    0% {
        -webkit-transform: translateY(6rem);
        transform: translateY(6rem);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes mv02-fadeOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-6rem);
        transform: translateY(-6rem);
        opacity: 0;
    }
}

@keyframes mv02-fadeOut {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-6rem);
        transform: translateY(-6rem);
        opacity: 0;
    }
}

#top_concept h2{
    font-family: "Cormorant-Bold", "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho Pro",serif;
    letter-spacing: 8px;
		margin-bottom:2rem;
}

#top_concept_inner:before{
content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
}

.concept-under{
	position:relative;
}

.concept-under:nth-child(1):before{
	content:"";
	position:absolute;
	right:-10rem;
	top:-50%;
	width:42%;
	height:100%;
	background:url(../images/bg-leaf01.svg) no-repeat center center / contain;
	z-index:-1;
}

.concept-under:nth-child(2):before{
	content:"";
	position:absolute;
	left:-5rem;
	top:-10rem;
	width:30%;
	height:100%;
	background:url(../images/bg-leaf02.svg) no-repeat center center / contain;
	z-index:-1;
}

.concept-under:nth-child(1) .flex-l{
width: calc(58% - 5rem);
}

.concept-under:nth-child(1) .flex-r{
width: calc(42% - 5rem);
}

.concept-under:nth-child(2) .flex-l{
width: calc(55% - 5rem);
}

.concept-under:nth-child(2) .flex-l img{
	object-position: bottom;
}

.concept-under:nth-child(2) .flex-r{
width: calc(45% - 5rem);
}

.concept-under:nth-child(2){
flex-direction: row-reverse;
    margin-top: 15rem;
}

.full-bg{
width: 100%;
    position: relative;
}

.full-bg-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: max-content;
    text-align: center;
}

#top_window .full-bg-text:before, #top_window .full-bg-text:after {
  position: absolute;
  top: 50%;
	transform:translatey(-50%);
  content:'';
  width: 15px;
  height: 150%;
  display: inline-block;
}
#top_window .full-bg-text:before {
  border-left: solid 1px var(--main-r);
  border-top: solid 1px var(--main-r);
  border-bottom: solid 1px var(--main-r);
  left: -3rem;
}
#top_window .full-bg-text:after {
  content: '';
  border-top: solid 1px var(--main-r);
  border-right: solid 1px var(--main-r);
  border-bottom: solid 1px var(--main-r);
  right: -3rem;
}

#window_img,
#modernspace_grid {
	margin-top:-15rem;
position: relative;
}

#window_img img{
	height:100%;
	object-fit:cover;
}

#top_trees_inner,
#top_sophisticated_inner{
    gap: 0;
    align-items: initial;
}

#top_sophisticated_inner{
	flex-direction: row-reverse;
}

#top_trees_inner .flex-l,
#top_sophisticated_inner .flex-l{
    width: 60%;
    height: 40vw;
	position:relative;
}

#top_trees_inner .flex-r,
#top_sophisticated_inner .flex-r{
width: 40%;
    display: flex;
    align-items: center;
	position:relative;
}

.bg-opacity{
position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
}

#top_trees_inner .flex-r .bg-center,
#top_sophisticated_inner .flex-r .bg-center{
    position: initial;
    transform: initial;
    margin: 0 auto;
}

#top_trees_inner .flex-l img,
#top_sophisticated_inner .flex-l img{
    height: 100%;
    object-fit: cover;
}

#modernspace_catch img{
width: 100vw;
    margin: 0 calc(50% - 50vw);
}

#top_compare .sec-title{
    text-align: center;
    margin-bottom: 5rem;
}

.icv__img-b{
	width:auto!important;
}

#top_oukadesign{
	background:url(../images/ouka_design_bg0.png) no-repeat center center / cover;
	width:100%;
	height:100%;
	color:var(--main);
}

#top_oukadesign .sec-title{
	font-size:4.5rem;
}

#top_oukadesign_inner{
	gap:5rem;
}

#top_oukadesign_inner p{
    font-family:"Palatino", "Cormorant-Bolditalic", "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho Pro",serif;
	font-size:2.5rem;
}

#top_oukadesign .flex-l{
	width:calc(35% - 2.5rem);
}

#top_oukadesign .flex-r{
	width:calc(65% - 2.5rem);
}

#top_modernspace .sec-title{
	margin-bottom:3rem;
}

#modernspace_grid img{
	height:100%;
	object-fit:cover;
}

#modernspace_grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 3rem;
grid-row-gap:3rem;
}
.grid01 {
	grid-area: 1 / 1 / 3 / 4;
	border:1px solid var(--main-r);
}
.grid02{
	grid-area: 1 / 4 / 2 / 6;
	border:1px solid var(--main-r);
}
.grid03{
	grid-area: 2 / 4 / 3 / 6;
	border:1px solid var(--main-r);
}

.gallery-flex,
.gallery-flex2{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
}

.gallery-flex img,
.gallery-flex2 img,
#top_aboutouka_inner .flex-l img{
	object-fit:cover;
}

.gallery-flex img,
.gallery-flex2 img{
	aspect-ratio:4 / 4;
}

#top_aboutouka_inner .flex-l img{
	aspect-ratio:4 / 5;
}

.gallery-flex img{
	width:calc(100% / 3 - 0.66666666rem)!important;
}

.gallery-flex2 img{
	width:calc(100% / 2 - 0.5rem)!important;
}

#top_gallery,
#top_aboutouka,
#top_gallery_inner,
#top_aboutouka_inner,
#top_environment_inner{
	position:relative;
}

.bg-img{
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    position: absolute;
    top: 40%;
    left: 0;
}

#top_wabisabi_inner{
    flex-direction:row-reverse;
}

#top_environment_inner{
    flex-direction:row-reverse;
}

#top_aboutouka .bg-img{
    top: 60%;
}

#top_review{
	background:var(--main-r);
	overflow-x:hidden;
}

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

}

@media screen and (max-width:1400px) {
#mv_item .content {
    width: 35vw;
}
.concept-under:nth-child(1) .flex-l {
    width: calc(58% - 2.5rem);
}
.concept-under:nth-child(1) .flex-r {
    width: calc(42% - 2.5rem);
}
}

@media screen and (max-width:1200px) {
#mv_item .content {
    width: 40vw;
}
.concept-under:nth-child(1) .flex-l,
.concept-under:nth-child(1) .flex-r,
.concept-under:nth-child(2) .flex-l,
.concept-under:nth-child(2) .flex-r{
    width: calc(50% - 2.5rem);
}
#top_oukadesign .flex-l {
    width: calc(40% - 2.5rem);
}
#top_oukadesign .flex-r {
    width: calc(60% - 2.5rem);
}
#modernspace_catch{
	margin-bottom:10rem;
	}
}

@media screen and (max-width:960px) {
#top_oukadesign .sec-title {
    font-size: 3.5rem;
}
}

@media screen and (max-width:820px) {
#top_oukadesign .sec-title {
    font-size: 3rem;
}
#mv_item .content {
    width: 50vw;
}
#top_oukadesign_inner p {
    font-size: 2rem;
}
}

@media screen and (max-width:767px) {
#mv_item .slide {
	height:70vh;
}
#mv_item .content {
    width: 70vw;
}
#mv_logo {
    margin-top: 60px;
}
#top_concept h2{
    margin-bottom: 10px;
    line-height: 1;
    font-size: 14px;
	}
.concept-under {
    flex-direction: column-reverse!important;
}
#top_under .over-r{
    flex: 1;
    margin-left: auto;
    width: calc(100% + 2rem)!important;
}
#top_under .over-l{
	flex: 1;
    margin-right: auto;
    width: calc(100% + 2rem)!important;
	}
.concept-under:nth-child(2) {
    margin-top: 7rem;
}
.concept-under:nth-child(1):before {
    top: 50px;
    width: 85%;
}
#window_img, #modernspace_grid {
    margin-top: -3rem;
}
.full-bg-text{
    width: 100%;
	}
#top_window .full-bg-text {
    width: 70%;
}
#top_trees_inner, #top_sophisticated_inner{
	flex-direction:column-reverse;
	}
#top_trees_inner .flex-l, #top_sophisticated_inner .flex-l,
#top_trees_inner .flex-r, #top_sophisticated_inner .flex-r{
	height: 70vw;
	}
#top_oukadesign .sec-title {
    font-size: 2.5rem;
}
#top_oukadesign_inner p {
    font-size: 1.4rem;
}
#top_modernspace .sec-title,
#modernspace_catch{
    margin-bottom: 2rem;
}
#modernspace_catch img{
    object-fit: cover;
    height: 90vw;
	}
#top_oukadesign_inner {
    gap: 3rem;
}
#modernspace_grid {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}
#top_aboutouka .bg-img {
    top: initial;
}
.bg-img{
    top: initial;
    height: 50%;
    width: 100vw;
    object-fit: contain;
    bottom: -25%;
	}
#top_aboutouka_inner .flex-l img {
    aspect-ratio: 4 / 4;
}
.ti-widget.ti-goog .ti-header {
    padding: 0px!important;
}
.quote-wrap {
    padding: 2rem;
}

#top_gallery_inner{
    flex-direction:column-reverse;
}

#top_wabisabi_inner{
    flex-direction:column-reverse;
}

#top_aboutouka_inner{
    flex-direction:column-reverse;
}

#top_environment_inner{
    flex-direction:column-reverse;
}
}