@charset "UTF-8";

/*---------------------------
共通
---------------------------*/

/* Tab */
@media screen and (max-width: 1120px) {}

/* sp */
@media only screen and (max-width: 768px) {}



/*---------------------------
共通
---------------------------*/
#main-wrap {
  width:100%;
  margin:auto;
  background-color: #fff;
}

.main-section {
  padding:72px 0;
  max-width: 1120px;
  margin: 0 auto;
}

.back-pale {
  background:#f0fff7;
  width: 100%;
}

.eyebrow{
  margin:0 0 10px;
  /* color:rgba(190, 162, 92, 1); */
  color: #376a5b;
  font-family:"Cinzel",serif;
  font-size:28px;
  font-weight:400;
  line-height:1.15;
}

h1,h2,p{
  margin-top:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-width:310px;
  height:54px;
  /* padding:0 28px; */
  border:1px solid #34332d;
  border-radius:999px;
  background:#fff;
  font-size:17px;
  letter-spacing:.04em;
  transition:.2s ease;
  cursor:pointer;
}

.btn:after{
  content:"→";
  font-family: Arial,sans-serif;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.1)
}

#main-wrap .btn-clear{
  background: rgba(255, 255, 255, 0);
  color: #333;
}

#main-wrap .btn-gold{
  border: none;
  background:linear-gradient(0deg, rgba(158, 137, 62, 1) 0%, rgba(190, 162, 92, 1) 100%);
  color:#fff;
}

@media(max-width:1024px){
  .main-section{
    padding:54px 0;
    max-width:680px;
  }
}

@media(max-width:768px){
  body:before{
    height:7px;
  }
  #main-wrap h1{
    font-size: 6vw;
    width: 100%;
    line-height: 1.5;
  }
  #main-wrap .txt{
    font-size: 3.3vw;
    width: 100%;
  }
  .main-section{
    padding:45px 0;
    width:calc(100% - 30px);
  }
  .eyebrow{
    font-size:20px;
  }
  .btn{
    width:100%;
    height: 3em;
    min-width:0;
    font-size:15px;
  }
}

/*---------------------------
メリット
---------------------------*/
.merit{
  text-align:center;
  padding-top:100px;
  padding-bottom:62px;
}

.merit h1{
  margin:18px 0 58px;
  font-size:30px;
  font-weight:500;
  letter-spacing:.08em;
  width: 100%;
}

.merit-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:45px;
}

.merit-item{
  min-height:280px;
  padding:14px 35px;
  border-left:0.3px solid #aaa;
}

.merit-item:last-child{
  border-right:0.3px solid #aaa;
}

.number{
  display:block;
  margin-bottom:10px;
  /* color:rgba(190, 162, 92, 1); */
  color: #376a5b;
  font-family:"Cinzel",serif;
  font-size:25px;
  line-height:1;
}

.merit-item h3{
  margin:0 0 20px;
  font-size:25px;
  color: #333;
  font-weight:580;
  line-height:1.65;
}

.merit-item p{
  margin:0;
  font-size:14px;
  line-height:1.9;
}

@media(max-width:1024px){
  .merit{
    padding:7vw 0;
  }
  .merit h1{
    margin-bottom:35px;font-size:24px
  }
  .merit-grid{
    grid-template-columns:1fr 1fr;gap:30px 0
  }
  .merit-item:nth-child(2){
    border-right:0.3px solid #aaa;
  }
  .merit-item{
    min-height:250px;
    padding:12px 22px
  }
}

@media(max-width:768px){
  .merit{
    text-align:left;
    padding-top:52px;
  }
  .merit h1{
    text-align:center;
    font-size:21px;
    line-height:1.7;
  }
  .merit .eyebrow{
    text-align:center;
  }
  .merit-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 5vw 0;
    text-align: center;
  }
  .merit-item{
    /* min-height:0;
    padding:25px 8px 25px 72px;
    border:0;
    border-top:1px solid #aaa;
    position:relative; */
    width: 100%;
    min-height: 110px;
    box-sizing: border-box;
    padding: 10px;
  }
  .number{
    font-size: 5vw;
  }
  .merit-item h3{
    font-size:5vw;
    margin-bottom:0.7em;
  }
  .merit-item p{
    font-size:3vw;
  }
}

/*---------------------------
ギャラリー
---------------------------*/
.gallery{
  display:grid;
  grid-template-columns:270px minmax(0,1fr) 275px;
  gap:22px;
  align-items:stretch;
}

.gallery-grid{
  padding-top:4px;
  /* margin-right: 50px; */
}

.gallery-grid h1{
  margin:34px 0 20px;
  font-size:30px;
  font-weight:500;
  line-height:1.55;
}

.gallery-grid .txt{
  font-size:15px;
  line-height:1.9;
}

.gallery .btn{
  width:100%;
  /* max-width: calc(270px - 56px); */
  min-width:0;
  margin-top:15px;
}

.gallery-grid .btn+.btn{
  margin-top:12px;
}

/* .gallery-main{
  min-height:460px;
} */

.gallery-sub{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:22px;
}

.gallery img{
  object-fit: cover;
  height: 100%;
}

@media(max-width:1024px){
  .gallery{
    display: block;
  }
  .gallery h1{
    margin: 0.7em 0;
  }
  .gallery-main{
    margin-bottom: 2vw;
    aspect-ratio: 1.5;
  }
  .gallery-sub{
    display: grid;
    grid-template-rows: unset;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
  }

  .gallery-grid{
    display:block;
  }
  .gallery-copy h2{
    margin:20px 0 12px;
    font-size:26px
  }
  .gallery-copy .btn{
    width:100%;
    min-width:0;
    margin-right:0;
  }
  .gallery-main{
    min-height:0;
    /* aspect-ratio:1.15; */
    margin-top:28px;
  }
  .gallery-side{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    margin-top:12px;
  }
  .gallery-side img{
    aspect-ratio:1.35;
  }
}
/*---------------------------
モデルルーム
---------------------------*/
.mr-head{
  display:grid;
  grid-template-columns:1fr 310px;
  gap:42px;
  align-items:end;
  margin-bottom:42px;
}

.model-room h1{
  margin:16px 0 14px;
  font-size:29px;
  font-weight:500;
  width: 100%;
}

.model-room .txt{
  margin:0;
  font-size:15px;
  line-height: 1.9;
}

.mr-cta{
  display:grid;
  gap:12px;
}

.mr-cta .btn{
  width:100%;
  min-width:0;
}

.mr-image{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.mr-image img{
  aspect-ratio:1.5/1;
  object-fit: cover;
}

@media(max-width:1024px){
}

@media(max-width:768px){
  .mr-head{
    display: block;
    margin-bottom: 5vw;
  }
  .mr-cta, .mr-copy{
    margin-bottom: 5vw;
  }
  .mr-image{
    display: grid;
    grid-template-columns:unset;
    grid-template-rows: 1fr 1fr;
    gap: 2vw;
  }
  .mr-image img{
    aspect-ratio: 2/1;
  }
}

/*---------------------------
プラン＆価格
---------------------------*/
.plan-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:85px;
  align-items:center;
}

.plan-copy h1{
  margin:20px 0 18px;
  font-size:31px;
  font-weight:500;
  line-height:1.55;
  width: 100%;
}

.plan-copy .txt{
  margin-bottom:4px;
  font-size:15px;
  line-height: 1.9;
}

.note{
  font-size:0.7em;
}

.plan-copy .btn{
  display:flex;
  width:320px;
  margin-top:12px
}

.plan-card{
  display:grid;
  grid-template-columns:1fr 165px;
  min-height:380px;
  padding:48px 36px;
  border:4px double #7d786f;
  background:#fff;
  align-items:center;
}

.type{
  font-size:25px;
  text-transform:uppercase;
  color: #376a5b;
  font-family: "Cinzel", serif;
  font-weight: bold;
}

.spec{
  display:grid;
  /* grid-template-columns:auto 1fr; */
  gap:14px 25px;
  margin-top:28px;
  font-size:15px;
  vertical-align: baseline;
}

.spec dt:before{
  content:"■";
  margin-right:5px;
  font-size:10px;
}

.spec dd{
  margin:0 0 10px;
  font-size:27px;
}

.spec .price{
  color:#bc1c21;
  font-size: 35px;
}

.unit{
  font-size:.7em;
  margin-left:4px;
}

.floorplan{
  object-fit:contain;
}

.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:5;
  transform:translate(-50%,25px);
  padding:14px 24px;
  border-radius:4px;
  background:var(--green);
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:.25s;
}
.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

@media(max-width:1024px){
  .model-head,.plan-grid{
    grid-template-columns:1fr;
    gap:26px;
  }
  .model-actions{
    grid-template-columns:1fr 1fr;
  }
  .plan-card{
    max-width:600px;
  }
  .plan-copy .btn{
    max-width:100%;
  }
}

@media(max-width:768px){
  .plan .btn{
    width: 100%;
  }
}

/* sp */

 /* @media(max-width:900px){
  .gallery-grid{
    grid-template-columns:1fr 1fr
  }
  .gallery-copy{
    grid-column:1/-1
  }
  .gallery-copy .btn{
    width:auto;
    min-width:290px;
    margin-right:8px
  }
  .gallery-main{
    min-height:360px
  }
  .gallery-side{
    gap:12px;
  }
  
} */

@media(max-width:560px){  
  
  .model h2{
    font-size:24px;
    line-height:1.6;
  }
  .model-head{
    margin-bottom:26px;
  }
  .model-actions{
    grid-template-columns:1fr;
  }
  .model-images{
    display:block;
  }
  .model-images img{
    margin-top:12px;
    aspect-ratio:1.25;
  }
  .plan-copy h2{
    font-size:25px;
  }
  .plan-card{
    grid-template-columns:1fr 120px;
    min-height:0;
    padding:30px;
  }
  .type{
    font-size:20px;
  }
  .spec{
    gap:10px;
    font-size:13px;
  }
  .spec dd{
    font-size:5.5vw;
  }
  .spec .price{
    font-size: 7vw;
  }
}

/*---------------------------
下層ページボタン
---------------------------*/
#content-btn{
  background: url(../img/index/bg_info.jpg);
}
#content-btn p{
  color: white;
  text-align: center;
  width: 100%;
}
#content-btn .eyebrow{
  color: #376a5b;
  font-size: 42px;
  width: 100%;
  text-align: center;
  padding-top: 1em;
  margin-bottom: -0.5em;
}

.content-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.content-item{
  aspect-ratio: 1.5;
  position: relative;
}

.content-item:first-child{background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/index/img_concept.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.content-item:nth-child(2){background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/index/img_location.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.content-item:nth-child(3){background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/index/img_access.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.content-item:nth-child(4){background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/index/gallery_sub2.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.content-item:nth-child(5){background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/index/img_quality.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.content-item:nth-child(6){background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/index/img_lifestyle.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}
.content-item:last-child{background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/index/img_redevelopment.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;}

.content-item:hover{
  opacity: 0.8;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transform: scale(1.03);
}
.con-eyeblow{
  font-family: "Cinzel", serif;
  font-size: 16px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.con-ttl{
  line-height: 1.5;
  font-size: 22px;
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translate(-50%, 0%);
}

@media(max-width:1024px){
  .content-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.8vw;
  }
}

@media(max-width:768px){
  #content-btn .eyebrow{
    font-size: 28px;
    margin-bottom: -1em;
  }
  .con-eyeblow{
    font-size: 2.7vw;
    top: 25%;
  }
  .con-ttl{
    font-size: 3.5vw;
    bottom: 25%;
  }
}