@charset "UTF-8";

/*------------------------
    TOP
-------------------*/
section{
 background: #fff;
}


/*-----------------*/
#mvSlider{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 overflow: hidden;
}
#mvSlider::after{
 content: "";
 display: block;
 background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 100%);
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1000;
}
#mvSlider .slick-slide{
 width: 100%;
 height: 100vh;
}
#mvSlider picture img{
 object-fit: cover;
 width: 100%;
 height: 100%;
}
@media screen and (max-width: 768px) {/* SP */
#mvSlider{
 height: 100dvh;
}
#mvSlider::after{
 background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
 
}

}/*-SP only-*/
/*-----------------*/
#mv{
 background: none;
	position: relative;
 display: flex;
 justify-content: center;
 align-items: flex-end;
 height: 100vh;
 padding: 0;
 margin-bottom: 80vh;
}
#mv::after{
 content: "";
 display: block;
 background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.38) 100%);
 width: 100%;
 height: 80vh;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1;
}
#mv h2{
 margin: 0;
 color: #fff;
 font-size: 80px;
 line-height: 1.125;
 text-align: left;
 white-space: nowrap;
 z-index: 1;
}
#mv h3{
 margin-top:20px;
 color: #fff;
 font-size: 24px;
}
#mv p{
 position: relative;
 margin-top: 40px;
 padding-left: 21px;
 height: 50px;
 color: #fff;
 font-size: 10px;
 text-transform: uppercase;
 line-height: 1;
}
#mv p::before{
 content: "";
 display: block;
 background: #fff;
 opacity: .3;
 width: 1px;
 height: 50px;
 position: absolute;
 top: 0;
 left: 0;
}
#mv p::after {
 content: "";
 display: block;
 background-color: #fff;
 width: 1px;
 height: 50px;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 animation: scroll 2s infinite;
}
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

@media screen and (max-width: 768px) {/*SP MV*/
#mv{
 height: 100dvh;
 margin-bottom: 20vh;
}
#mv::after{
 height: calc(20vh + 16vh);
 top: calc(100% - 16vh);
}

#mv h2{
 font-size:62px;
 line-height: 1.2;
}
#mv h3{
 font-size: 24px;
}

}/*-SP only-*/

/****/
#topConcept{
 /*background: linear-gradient(to bottom,  rgba(255,255,255,0.38) 0%,rgba(255,255,255,.74) 100%);*/
 background: none;
text-align: center;
 position: sticky;
 top: 0;
 z-index: 0;
}
#topConcept .inner{
 display: flex;
 flex-flow: column;
 justify-content: center;
 align-items: center;
 height: 100vh;
}
#topConcept h2{
 margin-bottom: 65px;
 font-size: 32px;
 text-align: center;
}
#topConcept p{
 text-align: center;
 line-height: 2.56;
}

#topConceptImgs{
 position: relative;
 padding-bottom: 630px;
 z-index: -1;
}
#topConceptImgs::before{
 content: "";
 display: block;
 background: linear-gradient(to bottom,  rgba(255,255,255,0.38) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%);
 width: 100%;
 height: calc(100% + 100vh);
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: -1;
}
 .ph01{
 width: calc(654/1440*100vw);
 margin: 0;
}
 .ph02{
 width: calc(320/1440*100vw);
 margin: -15.42vw 0 0 auto;
}
 .ph03{
 width: calc(300/1440*100vw);
 margin: 7.15vw 0 0 45.41vw;
}
 .ph04{
 width: calc(393/1440*100vw);
 margin: -10.625vw 0 0 0;
}
 .ph05{
 width: calc(452/1440*100vw);
 margin: 0 40px 0 auto;
}
 .ph06{
 width: calc(387/1440*100vw);
 margin: 0 0 0 80px;
}

@media screen and (max-width: 768px) {/* SP #topConcept */
#topConcept .inner{
 height: 100vh;
 height: 100dvh;
 padding-top: 80px;
 width: 91.5%;
}
#topConcept h2{
 /*margin-top: 10vh;*/
 margin-bottom:50px;
 font-size: 32px;
 text-align: center;
}
#topConcept p{
 font-size:min(4.0vw,16px) ;
}

 #topConceptImgs::before{
 height: calc(100% + 100dvh);
}
 .ph01{
 width: calc(310/390*100vw);
 margin: 0;
}
 .ph02{
 width: calc(160/390*100vw);
 margin: 30.7vw 0 0 auto;
}
 .ph03{
 width: calc(230/390*100vw);
 margin: 30.7vw auto 0;
}
 .ph04{
 width: calc(210/390*100vw);
 margin: 30.7vw 0 0 0;
}
 .ph05{
 width: calc(180/390*100vw);
 margin: 30.7vw 0px 0 auto;
}
 .ph06{
 width: calc(310/390*100vw);
 margin: 30.7vw 0 0 0px;
}

}/*-SP only-*/
/*----------------------------------------------*/
#topNews::before{
 content: "";
 display: block;
 background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 width: 100%;
 height:630px;
 position: absolute;
 bottom: 100%;
 left: 0;
}
#topNews{
 position: relative;
 background: url("../images/top_news_bg.png") no-repeat left top/cover;
}
.newsSlider .slick-list{
 overflow: visible;
}
@media screen and (min-width: 769px) {
 #topNews .inner2.pcFlex h2{
  position: relative;
  width:21.875%; 
 padding-top: 195px;
  z-index: 1;
 }
 #topNews .inner2.pcFlex h2::before{
  content: "";
  display: block;
  background: url("../images/top_news_bg_ttl.png") no-repeat right top/cover;
  width: calc(100% + 5vw);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
 }
 #topNews .inner2.pcFlex .sliderWrap{
 width: 78.125%;
 padding-top: 195px;
 padding-bottom: 205px;
 }
}/*-PC only-*/
@media screen and (min-width: 1422px){
 #topNews .inner2.pcFlex h2::before{
  width: calc(100% + ((100vw - 1280px)/2));
 }
}/**/
.newsSlider .slick-slide{
 margin-right: 20px;
 background: #fff;
}
.newsSlider figure{
 margin: 0;
}
.newsSlider figure img{
 object-fit: cover;
 width: 100%;
 height: 100%;
 aspect-ratio:333/222;
}
.newsSlider .slick-slide .date{
 padding: 30px 30px 0;
 font-size: 12px;
 line-height: 1;
}
.newsSlider .slick-slide h3{
 padding: 26px 30px;
 font-size: 14px;
 line-height: 1.7;
}

@media screen and (max-width: 768px) {/* SP #topNews */
#topNews::before{
 background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%);
 height:35.5vh;
}
#topNews{
 position: relative;
 background: url("../images/top_news_bg.png") no-repeat left top/cover;
 padding-top: 150px;
 padding-bottom: 110px;
}
 .newsSlider{
  margin: 0 -10px;
 }
.newsSlider .slick-slide{
 margin:0 10px;
}

}/*-SP only-*/

/*----------------------------------------------*/
#topPlan{
 padding: 250px 0;
}
@media screen and (min-width: 769px) {/*PC PLAN*/
 #topPlan .pcGrid{
  display: grid;
grid-template-columns: 21.875% 78.125%;
grid-template-rows:auto;
  
 }
#topPlan .pcGrid h2 { grid-area: 1 / 1 / 2 / 2; 
 }
#topPlan .pcGrid .planBox:nth-of-type(1){ grid-area: 1 / 2 / 2 / 3;}
#topPlan .pcGrid .planBox:nth-of-type(2){ grid-area: 2 / 2 / 3 / 3; }
 
 .planBox{
  align-items: flex-start;
 }
 .planBox + .planBox{
  margin-top: 100px;
 }
 .planBox .planSlider{
  width: 260px;
 }
.planSlider figure img{
 object-fit: cover;
 width: 100%;
 height: 100%;
 aspect-ratio:260/404;
}
 .planBox .txts{
  width:67.3%;
 }
}/*-PC only-*/
.planBox .txts .pcFlex{
 border-bottom: 1px #C9C9C9 solid;
 padding-bottom: 31px;
 margin-bottom: 30px;
 align-items: center;
}
.planBox h3{
 font-size: 24px;
}
.planBox .price{
 font-size: 12px;
 line-height: 1.1;
}
.planBox .price span{
 margin-right: 18px;
 font-size: 24px;
}
.planBox p{
 font-size: 14px;
 line-height: 1.78;
}
.planBox p + p {
 margin-top: 30px;
}
.planBox .note{
 margin-top: 20px;
}
.planBox .btnWrap .btn{
 margin: 0;
}

#topPlan .option{
 margin-top: 100px;
}
#topPlan .option h3{
 margin-bottom: 40px;
 font-size: 24px;
}
@media screen and (min-width: 769px) {
 .option .pcFlex{
  gap:78px 0;
 }
 .option .pcFlex dl{
  width: 29.3%;
  max-width: 375px;
 }
 .option .pcFlex ul{
  width: 100%;
 }
}/*-PC only-*/
.option dl{}
.option dt{
 display: flex;
 justify-content: space-between;
 border-bottom: 1px #C9C9C9 solid;
 padding: 0 0 14px;
 margin-bottom: 25px;
 font-family: "Josefin Sans", sans-serif;
 line-height: 1.1;
}
.option dt span{
 font-family:YuGothic,"游ゴシック","Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
 font-weight: 500;
}
.option dd{
 display: flex;
 justify-content: space-between;
 font-size: 14px;
 font-weight: 500;
 line-height: 2.1;
}
.option dd span{
 font-family: "Josefin Sans", sans-serif;
 font-weight: 400;
}
.option .pcFlex ul li{
 margin-bottom: 0;
}
@media screen and (max-width: 768px) {/* SP PLAN */
#topPlan{
 padding: 187px 0 150px;
}
 #topPlan h2{
  margin-bottom: 38px;
 }
 .planBox + .planBox{
  margin-top: 80px;
 }
.planSlider figure img{
 object-fit: cover;
 width: 100%;
 height: 100%;
 aspect-ratio:330/230;
}
 .planBox .txts{
  margin-top: 40px;
 }
.planBox .txts .pcFlex{
 padding-bottom: 26px;
 margin-bottom: 30px;
}
.planBox h3{
 margin-bottom: 25px;
}
.planBox .btnWrap .btn{
 max-width: none;
}
 
#topPlan .option{
 margin-top:80px;
}
#topPlan .option h3{
 position: relative;
 margin-bottom: 40px;
 border: 1px var(--gray) solid;
 padding: 22px 20px 18px;
 font-size: 16px;
 cursor: pointer;
}
 #topPlan .option h3::before,
 #topPlan .option h3::after{
  content: "";
  display: block;
  background: var(--gray);
  width: 10px;
  height: 1px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin: auto; 
  transition: 0.2s ease-in-out; 
 }
 #topPlan .option h3::after{
  -webkit-transform: rotate(90deg);
transform: rotate(90deg);}
 #topPlan .option h3.active::after{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
 }
 .option .accBox{
  display: none;
 }
 .option dl + dl{
  margin-top: 55px;
 }
 .option dd{
  font-size: 13px;
 }
 .option dd span{
  font-size: 13px;
 }
 .option .pcFlex ul{
  margin-top: 70px;
 }
}/*-SP only-*/

/*----------------------------------------------*/
.wideMovie{
 position: relative;
 z-index: 1;
 overflow: hidden;
 height: 600px;
}
.wideMovie video{object-fit: cover;
 width: 100%;
 height: 100%;
 aspect-ratio:1440/600;}

@media screen and (max-width: 768px) {/* SP */
.wideMovie{
 height: 400px;
}
.wideMovie video{object-fit: cover;
 width: 100%;
 height: 100%;
 aspect-ratio:390/400;}

}/*-SP only-*/

/*----------------------------------------------*/
#topGallery{
 background: url("../images/top_news_bg.png") no-repeat left top/cover;
 padding-top: 250px;
}

@media screen and (min-width: 769px) {
 #topGallery .pcGrid{
  display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
  gap:9px 9px;
 }
 #topGallery .pcGrid figure:nth-of-type(1){}
  #topGallery .pcGrid figure:nth-of-type(1) { grid-area: 1 / 1 / 2 / 2; }
 #topGallery .pcGrid figure:nth-of-type(2) { grid-area: 1 / 2 / 2 / 3; }
 #topGallery .pcGrid figure:nth-of-type(3){ grid-area: 2 / 2 / 3 / 3; }
 #topGallery .pcGrid figure:nth-of-type(4) { grid-area: 2 / 1 / 3 / 2; }
 #topGallery .pcGrid figure:nth-of-type(5) { grid-area: 3 / 1 / 4 / 2; }
 #topGallery .pcGrid figure:nth-of-type(6){ grid-area: 3 / 2 / 4 / 3; }
}/*-PC only-*/
#topGallery > figure{
 margin-top: 250px;
}
@media screen and (max-width: 768px) {/* SP #topGallery */

#topGallery{
 padding-top: 150px;
}
 #topGallery .pcGrid figure{
  margin-bottom: 5px;
 }
#topGallery > figure{
 margin-top: 150px;
}
}/*-SP only-*/

/*----------------------------------------------*/
#topStudio{
 padding-top: 250px;
 padding-bottom: 220px;
 overflow: hidden;
}
@media screen and (min-width: 769px) {
 #topStudio .pcFlex{
  align-items: flex-start;
 }
 #topStudio .pcFlex .txts{
  position: relative;
  width: 33.5%;
  max-width: 428px;
  z-index: 2;
 }
 #topStudio .pcFlex .imgs::before{
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  right: 100%;
  top: -1px;
  width: 500%;
  height: calc(100% + 1px);
  z-index: 1;
  
 }
 #topStudio .pcFlex .imgs{
  width: 53%;
  max-width: 673px;
  padding-right: 21.25%;
 }
}/*-PC only-*/

#topStudio h3{
 margin-bottom: 35px;
}
#topStudio .txts p{
 line-height: 1.8;
}
#topStudio .imgs .slick-list{
 overflow: visible;
}
#topStudio .imgs figure{
 margin-right: 10px;
}
#topStudio .imgs figure img{
 object-fit: cover;
 width: 100%;
 height: 100%;
 aspect-ratio:390/550;
}

@media screen and (max-width: 768px) {/* SP */
#topStudio{
 padding-top: 150px;
 padding-bottom: 150px;
}
 #topStudio .txts {
  padding-bottom: 50px;
 }
}/*-SP only-*/

/*----------------------------------------------*/
#topFlow figure img{
  object-fit: cover;
 width: 100%;
 height: 100%;
}
#topFlow h2{
  display: flex;
  flex-flow: column;
  align-items: flex-start;
 justify-content: center;
  height: 100%;
 margin: 0;
 z-index: 1;
  position: absolute;
  top: 0;
}
/*
#topFlow h2::before{
  content: "";
  display: block;
  background: url("../images/top_flow_img.jpg") no-repeat left center/cover;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  z-index: -1;
 }*/
@media screen and (min-width: 769px) {
 #topFlow{
  position: sticky;
  top: 0;
  z-index: 0;
 background: var(--Lgray);
  width: 100%;
  height: 800px;
 }
 #topFlow figure{
  width: 42%;
  max-width: 600px;
  height: 800px;
 }
 #topFlow h2{
  left: 5vw;
 }
 /*#topFlow h2::before{
  width: calc(100% + 5vw);
	 height: 800px;
	 top:0
 }*/

 #flow{
  background: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: -800px;
  height: 800px;
 }
 #flow ol{
 background: var(--Lgray);
  width: 46.73vw;
  max-width: 673px;
  margin: 0 0 0 auto;
 }
}/*-PC only-*/
@media screen and (min-width: 1422px) {
 #topFlow h2{
  left: calc((100vw - 1280px)/2);
 }
}/*-PC only-*/

#flow{
 z-index: 1;
}

#flow ol li{
 position: relative;
 padding: 50px 0 42px 93px;
}
#flow ol li + li{
 border-top: 1px #C9C9C9 solid;
}
#flow ol li .num{
 position: absolute;
 top: 50px;
 left: 0;
 font-size: 20px;
 line-height: 1;
}
#flow ol li h3{
 margin-bottom: 20px;
 font-size: 18px;
}
#flow ol li p{
 font-size: 14px;
 line-height: 1.7;
}

@media screen and (max-width: 768px) {/* SP #topFlow */
 #topFlow figure{
  height: 102.56vw;
 }
 #topFlow h2{
  padding: 0 7.7%;
 }
 #flow{
 background: var(--Lgray);
  width: auto;
  max-width: none;
 }
#flow  ol{
 width: 84.6%;
 margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 100px;
 }
#flow ol li{
 padding: 60px 0 50px 50px;
}
#flow ol li .num{
 top: 60px;
 left: 0;
}
#flow ol li h3{
 font-size: 18px;
}
}/*-SP only-*/

/*----------------------------------------------*/
#topAccess{
 padding-top: 250px;
 padding-bottom: 247px;
}
@media screen and (min-width: 769px) {

 #topAccess .pcFlex >*{
  width: 46.875%;
  max-width: 600px;
 }
 #topAccess .map{
  height: 392px;
 }
}/*-PC only-*/
#topAccess .map iframe{
 object-fit: cover;
 width: 100%;
 height: 100%;
 filter: grayscale(1);
}
#topAccess .txts h3{
 line-height: 1;
 margin-bottom: 50px;
}
#topAccess .txts dl{
 display: flex;
 flex-flow: row wrap;
 gap:40px 0;
}
#topAccess .txts dl dt{
 width: 100px;
 font-size: 14px;
 font-weight: 500;
 line-height: 1.7;
}
#topAccess .txts dl dd{
 width: calc(100% - 100px);
 font-size: 14px;
 line-height: 1.7;
}
#topAccess .pcFlex + .pcFlex{
 margin-top: 80px;
}
#topAccess .pcFlex >dl dt{
 border-bottom: 1px #C9C9C9 solid;
 padding: 0 0 20px;
 margin-bottom: 40px;
 font-size: 14px;
 font-weight: 500;
 line-height: 1.3;
}
#topAccess .pcFlex >dl dd{
 font-size: 14px;
 line-height: 1.7;
}
#topAccess .pcFlex >dl dd p{
 margin-top: 1.7em;
 font-size: 14px;
 line-height: 1.7;
}
#topAccess .pcFlex >dl dd + dt{
 margin-top: 78px;
}
#topAccess .pcFlex >dl dd a{
 text-decoration: underline;
}
#topAccess .pcFlex >dl dd a:hover{
 text-decoration: none;
}


@media screen and (max-width: 768px) {/* SP #topAccess */
 #topAccess{
 padding-top: 150px;
 padding-bottom: 150px;
}
#topAccess .map{
 height: 55.28vw;
 margin-bottom: 40px;
}
#topAccess .txts h3{
 margin-bottom: 38px;
}
#topAccess .txts dl dt{
 width: 80px;
}
#topAccess .txts dl dd{
 width: calc(100% - 80px);
}
#topAccess .pcFlex + .pcFlex{
 margin-top: 60px;
}
 #topAccess .pcFlex >dl + dl{
  margin-top: 60px;
 }
#topAccess .pcFlex >dl dt{
 padding: 0 0 20px;
 margin-bottom: 25px;
}
#topAccess .pcFlex >dl dd + dt{
 margin-top: 60px;
}

}/*-SP only-*/

/*----------------------------------------------*/
@media screen and (min-width: 769px) {

}/*-PC only-*/

@media screen and (max-width: 768px) {/* SP */

}/*-SP only-*/