@charset "utf-8";
@import url('common.css');
@import url('amime.css');
@import url('button.css');
@import url('slick-theme.css');
@import url('slick.css');


/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
TOP PAGE
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/



/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
PCページレイアウト
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */


@media all and (min-width: 1025px) {


/* visu */


#visu{
	position: relative;
	vertical-align:middle;
	width:100%;
	height:100vh;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:center;
}


#visu div.txt{
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	top: 30vh;
	left: 7vw;
	z-index:1000;
	text-align:left;
}

#visu div.txt div.copy{
	display:inline-block;
	margin:0 0 0 0;
	padding:10px 20px;
	font-size:var(--font-24);
	font-weight:700;
	line-height:1;
	color: var(--color-WH);
	background: var(--color-sub);
	letter-spacing: 5px;
}

#visu div.txt h2{
	margin:1.5vw 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-70);
	font-weight:600;
	line-height:1.5;
	letter-spacing: 3px;
	color:var(--color-WH);
}

#visu p{
	margin:1.5vw 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-17);
	font-weight:500;
	line-height:2.2;
	letter-spacing: 1px;
	color:var(--color-WH);
}

#visu div.swiper{
	position: relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#visu div.swiper div.bg{
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	z-index:1;
	bottom:-6px;
	right:0;
}

#visu div.swiper div.bg img{
	width:20vw;
}


.swiper-slide-active .swiper-slide__item,
.swiper-slide-duplicate-active .swiper-slide__item,
.swiper-slide-prev .swiper-slide__item {
  animation: zoomanime 8s linear 0s normal both;
}

@keyframes zoomanime {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.swiper-slide img {
  width: 100%;
  height: 100vh;
	object-fit: cover;
}


.Home-Firstview__scroll {
	align-items: baseline;
	color: #fff;
	display: flex;
	font-size: var(--font-18);
	gap: 16px;
	left: 97%;
	bottom:1px;
	line-height: 1;
	position: absolute;
	transform: rotate(90deg) translate(-50%);
	transform-origin: 0 0;
	z-index: 10;
}

.Home-Firstview__scroll:after {
    animation: scrollLine 2s var(--ease-outquart) both infinite;
    background: currentColor;
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 1px;
    width: 184px;
}

:root {
    --ease-outquart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

@keyframes scrollLine {
0% {
    clip-path: inset(0 0 0 0);
}
50% {
    clip-path: inset(0 0 0 100%);
}
50.1% {
    clip-path: inset(0 100% 0 0);
}
100% {
    clip-path: inset(0 0 0 0);
}
}



#yakusoku{
	position:relative;
	vertical-align:middle;
	width:100%;
	margin:0 0 0 0;
	padding:120px 0 170px 0;
	text-align:center;
	background: var(--color-main);
}

#yakusoku p{
	position:relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:center;
	font-size:var(--font-17);
	font-weight:500;
	line-height:2.2;
	color:var(--color-WH);
	letter-spacing: 2px;
}

#yakusoku h2{
	position:relative;
	display:inline-block;
	margin:0 0 0 0;
	padding:0 30px;
	text-align:center;
	font-size:var(--font-50);
	font-weight:900;
	line-height:1;
	color:var(--color-WH);
	letter-spacing: 2px;
	background: var(--color-main);
	z-index:1;
}

#yakusoku h2 span{
	color:var(--color-sub);
}

#yakusoku h2 span span{
	font-size:var(--font-70);
}

#yakusoku ul{
	width:calc(90% - 9vw);
	max-width:calc(1200px - 9vw);
	position:relative;
	margin:-25px auto 0 auto;
	padding:70px 0 60px 9vw;
	text-align: left;
	font-size:var(--font-24);
	font-weight:500;
	line-height:2.2;
	color:var(--color-WH);
	letter-spacing: 2px;
	border:1px solid #FFF;
	list-style-type:none;
	border-radius: 20px;
}

#yakusoku ul li{
	margin:0 0 0 0;
	padding:0 0 0 50px;
	background: url(../images/icon01.png) no-repeat 0 10px;
}


#apartment{
	position:relative;
	vertical-align:middle;
	width:100%;
	margin:0 0 0 0;
	padding:100px 0 100px 0;
	text-align:center;
}

#apartment a {
	color: var(--color-BL);
	text-decoration: none;
}


#apartment h2{
	margin:0 0 0 0;
	padding:0 0;
	text-align:center;
	font-size:var(--font-32);
	font-weight:700;
	line-height:1;
	letter-spacing: 2px;
	z-index:1;
}

#apartment p{
	margin:30px 0 0 0;
	padding:0 0;
	text-align:center;
	font-size:var(--font-17);
	font-weight:400;
	line-height:1.5;
	letter-spacing: 2px;
	z-index:1;
}

#apartment div.block{
	position:relative;
	vertical-align:middle;
	width:90%;
	max-width:1200px;
	margin:0 auto 0 auto;
	padding:60px 0 60px 0;
	text-align:center;
	display: flex;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
}

#apartment div.block div.ph{
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#apartment div.block h3{
	margin:20px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-21);
	font-weight:600;
	line-height:1;
	letter-spacing: 1px;
	text-align:left;
}

#apartment div.block h3 span.danshi{
	display:inline-block;
	margin:0 10px 0 0;
	padding:8px 15px;
	font-size:70%;
	font-weight:500;
	line-height:1;
	letter-spacing: 0;
	background: #3399FF;
	color:#fff;
}

#apartment div.block h3 span.joshi{
	display:inline-block;
	margin:0 10px 0 0;
	padding:8px 15px;
	font-size:70%;
	font-weight:500;
	line-height:1;
	letter-spacing: 0;
	background: #FF99cc;
	color:#fff;
}

#apartment div.block p{
	margin:15px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-16);
	font-weight:400;
	line-height:1;
	letter-spacing: 1px;
	text-align:left;
}




#apartment a div.linkBtn{
	width:100%;
	display:inline-block;
	position: relative;
	margin:50px 0 0 0;
	padding:15px 0 18px 0;
	font-size:var(--font-16);
	font-weight:500;
	line-height:1;
	letter-spacing: 1px;
	color:var(--color-main);
	background:var(--color-WH);
	position: relative;
	overflow: hidden;
	outline: none;
	transition: ease .2s;
	border:1px solid var(--color-main);
}

#apartment a:hover div.linkBtn {
	color:var(--color-WH);
	background:var(--color-main);
}

#apartment a div.linkBtn::after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 2px var(--color-main);
	border-right: solid 2px var(--color-main);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	color:var(--color-main);
}

#apartment  a:hover div.linkBtn::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 2px var(--color-WH);
	border-right: solid 2px var(--color-WH);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	color:var(--color-WH);
}

}






/* ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
SPページレイアウト
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ */

@media all and (max-width: 1024px) {



/* visu */


#visu{
	position:relative;
	vertical-align:middle;
	width:100%;
	height:100vh;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:center;
}


#visu div.txt{
	position: absolute;
	margin:0 0 0 0;
	padding:0 10vw 0 0;
	top: 35vh;
	left: 5vw;
	z-index:1000;
	text-align:left;
}

#visu div.txt div.copy{
	display:inline-block;
	margin:0 0 0 0;
	padding:10px 20px;
	font-size:var(--font-14);
	font-weight:700;
	line-height:1;
	color: var(--color-WH);
	background: var(--color-sub);
	letter-spacing: 3px;
}

#visu div.txt h2{
	margin:5vw 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-30);
	font-weight:600;
	line-height:1.5;
	letter-spacing: 3px;
	color:var(--color-WH);
}

#visu p{
	margin:5vw 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-13);
	font-weight:600;
	line-height:1.8;
	letter-spacing: 0;
	color:var(--color-WH);
}




@media screen and (min-width: 768px) and (max-width: 1024px) {

#visu div.txt div.copy{
	display:inline-block;
	margin:0 0 0 0;
	padding:10px 20px;
	font-size:var(--font-24);
	font-weight:700;
	line-height:1;
	color: var(--color-WH);
	background: var(--color-sub);
	letter-spacing: 5px;
}

#visu div.txt h2{
	margin:20px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-50);
	font-weight:600;
	line-height:1.4;
	letter-spacing: 1px;
	color:var(--color-WH);
}

#visu p{
	margin:20px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-16);
	font-weight:600;
	line-height:1.8;
	letter-spacing: 0;
	color:var(--color-WH);
}
}




#visu div.swiper{
	position: relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#visu div.swiper div.bg{
	position: absolute;
	margin:0 0 0 0;
	padding:0 0 0 0;
	z-index:1;
	bottom:-6px;
	right:0;
}

#visu div.swiper div.bg img{
	width:30vw;
}


.swiper-slide-active .swiper-slide__item,
.swiper-slide-duplicate-active .swiper-slide__item,
.swiper-slide-prev .swiper-slide__item {
  animation: zoomanime 8s linear 0s normal both;
}

@keyframes zoomanime {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.swiper-slide img {
  width: 100%;
  height: 100vh;
	object-fit: cover;
}

.Home-Firstview__scroll {
	align-items: baseline;
	color: #fff;
	display: flex;
	font-size: var(--font-13);
	gap: 15px;
	left: 97%;
	bottom:10px;
	line-height: 1;
	position: absolute;
	transform: rotate(90deg) translate(-50%);
	transform-origin: 0 0;
	z-index: 10;
}

.Home-Firstview__scroll:after {
    animation: scrollLine 2s var(--ease-outquart) both infinite;
    background: currentColor;
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 1px;
    width: 80px;
}

:root {
    --ease-outquart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

@keyframes scrollLine {
0% {
    clip-path: inset(0 0 0 0);
}
50% {
    clip-path: inset(0 0 0 100%);
}
50.1% {
    clip-path: inset(0 100% 0 0);
}
100% {
    clip-path: inset(0 0 0 0);
}
}


#yakusoku{
	position:relative;
	vertical-align:middle;
	width:100%;
	margin:0 0 0 0;
	padding:60px 0 60px 0;
	text-align:center;
	background: var(--color-main);
}

#yakusoku p{
	position:relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:center;
	font-size:var(--font-16);
	font-weight:500;
	line-height:2.2;
	color:var(--color-WH);
	letter-spacing: 1px;
}

#yakusoku h2{
	position:relative;
	display:inline-block;
	margin:0 0 0 0;
	padding:0 20px;
	text-align:center;
	font-size:var(--font-40);
	font-weight:900;
	line-height:1;
	color:var(--color-WH);
	letter-spacing: 2px;
	background: var(--color-main);
	z-index:1;
}

#yakusoku h2 span{
	color:var(--color-sub);
}

#yakusoku h2 span span{
	font-size:var(--font-50);
}

#yakusoku ul{
	width:calc(90% - 8vw);
	position:relative;
	margin:-20px auto 0 auto;
	padding:40px 3vw 20px 5vw;
	text-align: left;
	font-size:var(--font-15);
	font-weight:500;
	line-height:1.5;
	color:var(--color-WH);
	letter-spacing: 1px;
	border:1px solid #FFF;
	list-style-type:none;
	border-radius: 10px;
}

#yakusoku ul li{
	margin:0 0 0 0;
	padding:0 0 10px 25px;
	background: url(../images/icon01.png) no-repeat 0 5px;
	background-size: 18px auto;
}





#apartment{
	position:relative;
	vertical-align:middle;
	width:100%;
	margin:0 auto 0 auto;
	padding:60px 0 60px 0;
	text-align:center;
}

#apartment a {
	color: var(--color-BL);
	text-decoration: none;
}


#apartment h2{
	margin:0 0 0 0;
	padding:0 0;
	text-align:center;
	font-size:var(--font-30);
	font-weight:700;
	line-height:1;
	letter-spacing: 2px;
	z-index:1;
}

#apartment p{
	margin:20px 0 0 0;
	padding:0 0;
	text-align:center;
	font-size:var(--font-15);
	font-weight:400;
	line-height:1.5;
	letter-spacing: 1px;
	z-index:1;
}

#apartment div.block{
	position:relative;
	width:90%;
	margin:0 auto 0 auto;
	padding:0 0 0 0;
}

#apartment div.block a{
	display:block;
	width:86%;
	margin:30px 0 0 0;
	padding:7%;
	border:1px solid var(--color-Gdd);
	border-radius: 10px;

}

#apartment div.block div.ph{
	width:100%;
	margin:0 5% 0 0;
	padding:0 0 0 0;
}

#apartment div.block div.ph img{
	width:100%;
}

#apartment div.block div.txt{
	width:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#apartment div.block h3{
	margin:15px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-18);
	font-weight:600;
	line-height:1;
	letter-spacing: 1px;
	text-align:left;
}

#apartment div.block h3 span.danshi{
	display:inline-block;
	margin:0 10px 0 0;
	padding:8px 15px;
	font-size:70%;
	font-weight:500;
	line-height:1;
	letter-spacing: 0;
	background: #3399FF;
	color:#fff;
}

#apartment div.block h3 span.joshi{
	display:inline-block;
	margin:0 10px 0 0;
	padding:8px 15px;
	font-size:70%;
	font-weight:500;
	line-height:1;
	letter-spacing: 0;
	background: #FF99cc;
	color:#fff;
}

#apartment div.block p{
	margin:10px 0 0 0;
	padding:0 0 0 0;
	font-size:var(--font-14);
	font-weight:400;
	line-height:1.6;
	letter-spacing: 1px;
	text-align:left;
}




#apartment a div.linkBtn{
	width:100%;
	display:inline-block;
	position: relative;
	margin:20px 0 0 0;
	padding:13px 0 13px 0;
	font-size:var(--font-14);
	font-weight:500;
	line-height:1;
	letter-spacing: 1px;
	color:var(--color-main);
	background:var(--color-WH);
	position: relative;
	overflow: hidden;
	outline: none;
	transition: ease .2s;
	border:1px solid var(--color-main);
}

#apartment a:hover div.linkBtn {
	color:var(--color-WH);
	background:var(--color-main);
}

#apartment a div.linkBtn::after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 0;
	border-top: solid 2px var(--color-main);
	border-right: solid 2px var(--color-main);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	color:var(--color-main);
}

#apartment  a:hover div.linkBtn::after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: solid 2px var(--color-WH);
	border-right: solid 2px var(--color-WH);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	color:var(--color-WH);
}

}