@charset "utf-8";
/* CSS Document */
/* ============== サイドの余白 ============== */
.title,.contents,.breadcrumb {
  width: min(90%, 1440px);
  margin-inline: auto;
}
/* ============== 本文 ここから ============== */
/*  見出し  */
.title {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  margin: clamp(80px, 10.6vw, 210px) auto clamp(40px, 6.6vw, 120px);
}
.title h1 {
  font-size: clamp(1.4rem, 2.0vw, 2.0rem);
  font-weight: normal;
}
.title>p {
  font-size: clamp(2.2rem, 4.0vw, 4.0rem);
  font-weight: normal;
  margin-bottom: clamp(8px, 1.8vw, 20px);
  line-height: 35px;
}
/*　パンくず　*/
.breadcrumb {
  margin-bottom: 8px;
}
/*  メイン画像 */
.top-pic {
  max-width: 1400px;
  margin-inline: auto;
}
/*  データと図面 */
.date-wrap {
  margin-bottom: 60px;
  display: flex;
  flex-flow: row wrap;
}
.date-list {
  position: relative;
  text-align: left;
  font-size: 1.8rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 40px 34px 0;
}
.date-list::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 1px;
  background-color: #333;
  bottom: -10px;
  left: 0;
}
/*  ギャラリーの一覧  */
.contents {
  margin: 60px auto 80px;
}
.gallery, .column {
  display: flex;
  flex-flow: column nowrap;
  row-gap: 30px;
}
/*  ギャラリーの画像　スクロールしたらフェードインする　ここから  */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.fadeUpTrigger{
    opacity: 0;
}
/*  ギャラリーの画像　スクロールしたらフェードインする　ここまで  */
/*  一覧に戻るボタン  */
.back-Btn {
  width: min(100%, 380px);
  border: solid 1px #333;
  padding: 18px 0;
  display: block;
  outline: none;
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  text-align: center;
  margin: clamp(80px, 8vw, 100px) auto 0;
}
/* ============== TAB(600px)レスポンシブ ============== */
@media only screen and (min-width:600px) {
  /*  データと図面  */
  .date-list {
    font-size: 2.0rem;
    margin: 0 20px 60px 15px;
  }
  .date-list::after {
    top: 32px;
    width: 172px;
  }
  .floorplan-pic {
    margin-left: 90px;
    max-width: 600px;
  }
  /*  ギャラリーの一覧  */
  .gallery {
    flex-flow: row wrap;
    justify-content: space-between;
    max-width: 1020px;
    margin: 0 auto;
    row-gap: 60px;
  }
  .item {
    width: 46%;
  }
  .x2 {
    width: 100%;
    max-width: 1320px;
  }
  .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 46%;
  }
  .column>.item {
    width: fit-content;
  }
  /*  一覧に戻るボタン  */
  .back-Btn {
	  position: relative;
    transition: all .2s linear;
  }
  .back-Btn:hover {
    background-color:#333;
    color:#fff;
    opacity: 1;
  }
  /*矢印と下線の形状*/
  .back-Btn::before{
    content:"";
      /*絶対配置で下線の位置を決める*/
    position: absolute;
    top:50%;
    right:-52px;
      /*下線の形状*/
    width:74px;
    height:0.5px;
    background-color:#333;
    /*アニメーションの指定*/
    transition: all .2s linear;
  }
   /*hoverした際の移動*/
  .back-Btn:hover::before{
    right:-73px;
  }
}
  /* ============== PC(1025px)レスポンシブ ============== */
@media only screen and (min-width:1024px) {
  .contents {
    margin: 100px auto 150px;
  }
  /*  データと図面  */
  .date-wrap {
    max-width: 1020px;
    margin: 0 auto 100px;
  }
  .date-list {
    font-size: 3.2rem;
  }
  .date-list::after {
    top: 46px;
    width: 300px;
  }
  .floorplan-pic {
    margin-left: 160px;
  }
}
@media only screen and (min-width:1900px) {
  /*  データと図面、ギャラリーの一覧  */
  .date-wrap {
    max-width: 1320px;
  }
  .gallery {
    max-width: 1320px;
    row-gap: 80px;
  }
  .floorplan-pic {
    max-width: 800px;
  }
}