@charset "UTF-8";

/*共通*/
.flex { display: flex; }

.l-main {
  overflow: hidden;
}



/*個別*/
.sec-Mv {}

.BukkenPoint {
  background: url(../img/top/sokyu_bg.jpg) no-repeat center center / cover;
  color: #fff;
  overflow: hidden;
  margin: 0 0 90px;
}
.BukkenPoint ul.flex {
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: min(1.2vw, 15px);
  letter-spacing: 0.12em;
  line-height: 1.3;
}
.BukkenPoint span { display: inline-block; }
.BukkenPoint .palt { margin: 0 -0.4em; }
.BukkenPoint .pc-fs150 { font-size: 150%; }
.BukkenPoint .pc-fs175 { font-size: 175%; }
.BukkenPoint .pc-fs200 { font-size: 200%; }

.BukkenPoint ul.flex li {
  padding: 2em 3em;
  position: relative;
}
.BukkenPoint ul.flex li:not(:first-child)::before {
  content: "";
  display: block;
  width: 1px;
  height: 9em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(7.5deg);
  left: 0;
  background: #B49A83;
  background: linear-gradient(0deg, rgba(180, 154, 131, 1) 0%, rgba(231, 214, 172, 1) 50%, rgba(180, 154, 131, 1) 100%);
}

.sec-BukkenContents {}
.contents-Menu-Wrap {
  overflow: hidden;
}
.contents-Menu-Wrap [class^="link-"] {
  display: block;
  position: relative;
  aspect-ratio: 2/1;
  margin: 0 0 25px;
}
.contents-Menu-Wrap [class^="link-"]::after {
  content: "";
  display: block;
  width: 14.28571429%;
  aspect-ratio: 2/7;
  background: rgba(153, 135, 112, 10);
  background: linear-gradient(0deg, rgba(153, 135, 112, 0.9) 0%, rgba(228, 203, 172, 0.9) 100%);
  position: absolute;
  top: 0;
}
.contents-Menu-Wrap .link-left::after {
  right: -4%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.contents-Menu-Wrap .link-right::after {
  left: -4%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.contents-Menu-Wrap .img-box {
  position: absolute;
  top: 0;
  aspect-ratio: 2/0.9655;
  height: 100%;
  transition: all ease 0.5s;
}
.contents-Menu-Wrap .link-left .img-box { left: 0; }
.contents-Menu-Wrap .link-right .img-box { right: 0; }
/*画像設定*/
.contents-Menu-Wrap .link-location .img-box { background: url(../img/top/m-location.jpg) no-repeat center center / cover; }
.contents-Menu-Wrap .link-design .img-box { background: url(../img/top/m-design.jpg) no-repeat center center / cover; }
.contents-Menu-Wrap .link-plan .img-box { background: url(../img/top/m-plan.jpg) no-repeat center center / cover; }
.contents-Menu-Wrap .link-quality .img-box { background: url(../img/top/m-quality.jpg) no-repeat center center / cover; }

.contents-Menu-Wrap .txt-box {
  position: absolute;
  width: 84%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}
.contents-Menu-Wrap .link-right .txt-box { align-items: flex-end; }
.contents-Menu-Wrap .txt-box .page-ttl {
  display: inline-block;
  background: linear-gradient(0deg, #998770 0%, #e4cbac 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Cinzel', serif;
  font-size: min(4vw, 50px);
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.contents-Menu-Wrap .read-more {
  font-size: min(1.2vw, 15px);
  letter-spacing: 0.2em;
  text-align: center;
  padding: 1.5em 0;
  width: 16em;
  position: relative;
  box-sizing: border-box;
}
.contents-Menu-Wrap .read-more::before,
.contents-Menu-Wrap .read-more::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #B49A83;
  background: linear-gradient(90deg, rgba(180, 154, 131, 1) 0%, rgba(231, 214, 172, 1) 50%, rgba(180, 154, 131, 1) 100%);
  position: absolute;
  left: 0;
}
.contents-Menu-Wrap .read-more::before { top: 0; }
.contents-Menu-Wrap .read-more::after { bottom: 0; }
.contents-Menu-Wrap .read-more span {
  font-family: 'Cinzel', serif;
  position: relative;
  width: 100%;
  display: block;
}
.contents-Menu-Wrap .read-more span::after {
  content: "";
  display: block;
  width: 0.6em;
  aspect-ratio: 1/1;
  border-top: 1px solid #b89f8a;
  border-right: 1px solid #b89f8a;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(45deg);
  transition: all ease 0.3s;
}

.contents-Menu-Wrap .cap_R { right: 11%; text-align: right; }
.contents-Menu-Wrap .cap_L { left: 11%; text-align: left; }


.contents-Menu-Wrap [class^="link-"]:hover .img-box { opacity: .7; }
.contents-Menu-Wrap .link-left:hover .img-box { left: -3%; }
.contents-Menu-Wrap .link-right:hover .img-box { right: -3%; }
.contents-Menu-Wrap [class^="link-"]:hover .read-more span::after { right: 5px; }




/*---------------------------
PC・TABのみ
---------------------------*/
@media only screen and (min-width: 769px) and (max-width: 1024px) {}

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

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

  .BukkenPoint {
    background: url(../img/top/sokyu_bg_sp.jpg) no-repeat center center / cover;
    margin: 0 0 40px;
  }
  .BukkenPoint ul.flex {
    flex-wrap: wrap;
    font-size: 15px;
  }
  .BukkenPoint [class^="pc-fs"] { font-size: unset; }
  .BukkenPoint .sp-fs125 { font-size: 125%; }
  .BukkenPoint .sp-fs150 { font-size: 150%; }
  .BukkenPoint .sp-fs200 { font-size: 200%; }

  .BukkenPoint ul.flex li {
    padding: 1em;
    width: 100%;
  }
  .BukkenPoint ul.flex li:not(:first-child)::before {
    width: 100%;
    height: 1px;
    top: 0;
    transform: none;
    left: 0;
    background: #B49A83;
    background: linear-gradient(90deg, rgba(180, 154, 131, 1) 0%, rgba(231, 214, 172, 1) 50%, rgba(180, 154, 131, 1) 100%);
  }
  .BukkenPoint ul.flex li:nth-child(3) {
    width: 44.5%;
    min-height: 60px;
  }
  .BukkenPoint ul.flex li:nth-child(4) {
    width: 55.5%;
    min-height: 60px;
    line-height: 1.6;
  }
  .BukkenPoint ul.flex li:nth-child(4)::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: #B49A83;
    background: linear-gradient(0deg, rgba(180, 154, 131, 1) 0%, rgba(231, 214, 172, 1) 50%, rgba(180, 154, 131, 1) 100%);
  }

  .contents-Menu-Wrap {
    overflow: visible;
  }
  .contents-Menu-Wrap [class^="link-"] {
    aspect-ratio: 750/650;
    margin: 40px 0 20px;
  }
  .contents-Menu-Wrap [class^="link-"]::after {
    width: 75%;
    aspect-ratio: 565/77;
    background: linear-gradient(90deg, rgba(153, 135, 112, 0.9) 0%, rgba(228, 203, 172, 0.9) 100%);
    top: auto;
    bottom: 0;
  }
  .contents-Menu-Wrap .link-left::after {
    left: 0;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
  .contents-Menu-Wrap .link-right::after {
    left: auto;
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background: linear-gradient(-90deg, rgba(153, 135, 112, 0.9) 0%, rgba(228, 203, 172, 0.9) 100%);
  }
  .contents-Menu-Wrap .img-box {
    aspect-ratio: 750/650;
    width: 100%;
    height: auto;
  }
  /*画像設定*/
  .contents-Menu-Wrap .link-location .img-box { background: url(../img/top/m-location_sp.jpg) no-repeat center center / cover; }
  .contents-Menu-Wrap .link-design .img-box { background: url(../img/top/m-design_sp.jpg) no-repeat center center / cover; }
  .contents-Menu-Wrap .link-plan .img-box { background: url(../img/top/m-plan_sp.jpg) no-repeat center center / cover; }
  .contents-Menu-Wrap .link-quality .img-box { background: url(../img/top/m-quality_sp.jpg) no-repeat center center / cover; }

  .contents-Menu-Wrap .txt-box {
    width: 100%;
    top: 0;
    left: 0;
    transform: none;
    gap: 0;
    align-items: center!important;
  }
  .contents-Menu-Wrap .txt-box .page-ttl {
    font-size: 30px;
    padding: 0.75em;
  }
  .contents-Menu-Wrap .read-more {
    font-size: 12px;
    padding: 1.25em 0;
    margin: 0 auto;
  }

  .contents-Menu-Wrap .cap_R { right: 5px; }
  .contents-Menu-Wrap .cap_L { left: 5px; }

  .contents-Menu-Wrap [class^="link-"]:hover .img-box { opacity: 1; }
  .contents-Menu-Wrap .link-left:hover .img-box { left: 0; }
  .contents-Menu-Wrap .link-right:hover .img-box { right: 0; }
  .contents-Menu-Wrap [class^="link-"]:hover .read-more span::after { right: 10px; }




}