/*==================================================
TOP
==================================================*/
.TOP {
  width: 100%;/* 幅を100%に設定 */
  height: 85svh;/* 高さをビューポート高さに設定 */
  background-size: cover;/* 背景画像を要素全体にフィットさせる */
  background-position: center;/* 背景画像の位置を中央に設定 */
  object-fit: cover;/* 画像を要素全体にフィットさせる */
}


.logoCenter {
  width: 100%;
  height: 85svh;
  position: relative;
}

/* トップロゴのスタイル設定 */
.TOPlogo {
  width: 70%;/* 幅を30%に設定 */
  height: auto;
  position: absolute;/* 絶対位置に設定 */
  top: 50%;/* 上から50%の位置に設定 */
  left: 50%;/* 左から50%の位置に設定 */
  transform: translate(-50%, -50%);/* 要素を中央に配置 */
  margin: auto;
}

.rectBOX {
  width: 100%;
  height: 15svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 横にはみ出した部分を隠す */
}

.rectobject {
  height: 10svh;
  overflow: hidden;
  /* 念のため */
}

.rectobject img {
  height: 10svh;
  /* 高さを固定 */
  width: auto;
  /* 横幅は比率で自動 */
  display: block;
  /* 画像下の余白を消す */
  object-fit: cover;
  /* coverやcontainは使わない */
  object-position: left center;
  /* 左寄せ配置 */
}

.brownBack {
  background-color: #41230c;
}

.OcherBack {
  background-color: #fbf4d6;
}

/*========== #NEWS 最新情報 ==========*/
#NEWS .LinkBtn {
  margin: 100px 0;
}

/*========== #CONCEPT コンセプト ==========*/
#CONCEPT {
  width: 100%;
  height: auto;
  background-color: #41230c;
}
#CONCEPT p {
  color: #ffffff;
}


/*========== #BEST moon'sベスト ==========*/
#BEST {
  width: 100%;
  height: auto;
}
.slideritme {
  width: 100%;
  height: auto;
}





/*========== #GALLERY ギャラリー ==========*/
#GALLERY {
  width: 100%;
  height: auto;
}

.breadList {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadList div {
  position: relative;
  /* 要素の位置を相対位置に設定 */
  width: calc(100%/2);
  height: auto;
}

.imgWrap {
  position: relative;
  display: inline-block;
}
.imgWrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  background: url("../img/gallery/WhiteSquare.png") no-repeat center/contain;
  /* 重ねたい画像 */
}
.BrownSquare {
  position: relative;
  display: inline-block;
}
.BrownSquare::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  background: url("../img/gallery/BrownSquare.png") no-repeat center/contain;
  /* 重ねたい画像 */
}


/*========== #CONTACT コンタクト ==========*/
#CONTACT .contactText {
  padding-top: 100px;
  padding-bottom: 50px;
}

.car {
  width: 90%;
  height: auto;
  margin: auto;
  padding: 0 0 100px 0;
  text-align: right;
}
.car img {
  width: 35%;
  height: auto;
}


/*========== フッター前　画像 ==========*/
.endImg {
  width: 100%;
  /* 幅を100%に設定 */
  height: 85svh;
  /* 高さをビューポート高さに設定 */
  position: relative;
  /* 要素の位置を相対位置に設定 */
  background-image: url("../img/endSP.jpg");
  /* 背景画像を設定 */
  background-size: cover;
  /* 背景画像を要素全体にフィットさせる */
  background-position: center;
  /* 背景画像の位置を中央に設定 */
  object-fit: cover;
  /* 画像を要素全体にフィットさせる */
}

.endImg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 0.3;
}

/* エンドロゴのスタイル設定 */
.endImglogo {
  width: 70%;
  /* 幅を30%に設定 */
  position: absolute;
  /* 絶対位置に設定 */
  top: 50%;
  /* 上から50%の位置に設定 */
  left: 50%;
  /* 左から50%の位置に設定 */
  transform: translate(-50%, -50%);
  /* 要素を中央に配置 */
  margin: auto;
}




/*==================================================
タブレット画面
==================================================*/
@media screen and (min-width:700px)and (max-width:1079px) {
  .TOPlogo {width: 60%;}

  .car {
  width: 60%;
  height: auto;
  margin: auto;
  padding: 0 0 100px 0;
  text-align: right;
  }
  .car img {
    width: 25%;
    height: auto;
  }
}

/*==================================================
パソコン画面
==================================================*/
@media screen and (min-width:1080px)and (max-width:1499px) {
  .TOPlogo {width: 40%;}
  /*========== #NEWS Flex フレックス ==========*/
  #NEWS .wideAdjustment {
    width: 85%;
  }
  #NEWS .largeTopSpace, #NEWS .smallSpace, #NEWS .largeSpace {
    padding: 0px;
  }
  #NEWS .LinkBtn {
    margin: 0px;
  }
  .pcFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:100px 0;
  }
  #NEWS .InstagramImg, #NEWS .block {
    width: 45%;
  }
  #NEWS .block {
    display: block;
    height:100%;
  }
  #NEWS .block .smallSpace, .block p {
    padding-bottom: 50px;
  }
  #NEWS .adjustment {
    align-items: center;
    width: 80%;
  }

  #NEWS .button {
    width: 100%;
    margin: auto;
  }

  /*========== #BEST moon'sベスト ==========*/
  .bread {
    width: 50%;
    height: auto;
    margin:auto;
  }
  /*========== #GALLERY ギャラリー ==========*/
  .breadList div {width: calc(100%/4);}

  /*========== #CONTACT コンタクト ==========*/
  .car {
    width: 60%;
    height: auto;
    margin: auto;
    padding: 0 0 100px 0;
    text-align: right;
  }
  .car img {
    width: 30%;
    height: auto;
  }

  /*========== フッター前　画像 ==========*/
  .endImg {
    background-image: url("../img/endPC.jpg");
    /* 背景画像を設定 */
  }
  /* エンドロゴのスタイル設定 */
  .endImglogo {
    width: 40%;
  }

}

/*==================================================
パソコン大画面
==================================================*/
@media screen and (min-width:1500px) {
  .TOPlogo {width: 35%;}
/*========== #NEWS Flex フレックス ==========*/
  #NEWS .wideAdjustment {
    width: 85%;
  }
  #NEWS .largeTopSpace, #NEWS .smallSpace, #NEWS .largeSpace {
    padding: 0px;
  }
  #NEWS .LinkBtn {
    margin: 0px;
  }
  .pcFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:100px 0;
  }
  #NEWS .InstagramImg, #NEWS .block {
    width: 45%;
  }
  #NEWS .block {
    display: block;
    height:100%;
  }
  #NEWS .block .smallSpace, .block p {
    padding-bottom: 50px;
  }
  #NEWS .adjustment {
    align-items: center;
    width: 80%;
  }

  #NEWS .button {
    width: 100%;
    margin: auto;
  }

  /*========== #BEST moon'sベスト ==========*/
  .bread {
    width: 50%;
    height: auto;
    margin:auto;
  }

  /*========== #GALLERY ギャラリー ==========*/
  .breadList div {width: calc(100%/5);}

  /*========== #CONTACT コンタクト ==========*/
  .car {
    width: 50%;
    height: auto;
    margin: auto;
    padding: 0 0 100px 0;
    text-align: right;
  }
  .car img {
    width: 30%;
    height: auto;
  }

  /*========== フッター前　画像 ==========*/
  .endImg {
    background-image: url("../img/endPC.jpg");
    /* 背景画像を設定 */
  }
  /* エンドロゴのスタイル設定 */
  .endImglogo {
    width: 35%;
  }

}