/* ===============================
   Font
================================ */
@font-face {
  font-family: "A1mincho";
  src: url("/assets/font/A-OTF-A1MinchoStd-Bold.otf") format("opentype");
}

/* ===============================
   Base
================================ */
html {
  overflow-y: scroll;
}

#top {
  width: 100%;
  margin: 0;
}

/* ===============================
   Button
================================ */
.content_btn {
  font-family: var(--font_jp_txt);
  font-size: 10px;
  width: 150px;
  height: 40px;
  border-radius: 4px;
  margin-top: 60px;
}

.content_btn a {
  border: 1px solid var(--border_txt);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.content_btn a:hover {
  opacity: 0.6;
}

.content_btn p {
  text-align: center;
}

/* ===============================
   Top Visual
================================ */
.top_img_area {
  position: relative;
  height: 70vh;
}

.top_img_area .slick-list,
.top_img_area .slick-track {
  height: 100% !important;
}

.slider_top {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.04);
}

.top_img {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.top_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.top_banner {
  position: absolute;
  bottom: 10%;
  left: 5%;
  font-family: var(--font_jp_ttl);
  color: #fff;
}

.top_banner h3 {
  font-size: 17px;
  font-weight: normal;
}

.top_banner p {
  font-size: 12px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.top_banner a {
  color: #fff;
  font-size: 12px;
}

/* ===============================
   Membership Button block
================================ */
.top_membership_btn {
  width: 300px;
  height: 40px;
  margin: 60px auto 0;
  max-width: 300px;
}

.top_membership_btn a {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fcolor);
  border-radius: 3px;
  color: var(--bgcolor1);
  letter-spacing: 0.2em;
  font-size: 10px;
}

/* ===============================
   Divider
================================ */
.section_border {
  width: 80%;
  margin: 6rem auto 0;
  height: 1px;
  background-color: var(--border_txt);
}

/* ===============================
   Text Area
================================ */
.top_txtarea {
  height: 40%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.top_ttl {
  font-family: var(--font_en_ttl);
  font-weight: 400;
  font-size: 1.5rem; /* !important削除 */
  width: fit-content;
  margin: 0 auto;
  padding-top: 60px;
  padding-bottom: 1px;
  text-align: center;
  color: var(--fcolor);
  border-bottom: 1px solid var(--border_txt);
}

.top_txtarea h3 {
  font-family: var(--font_jp_ttl);
  color: var(--fcolor);
  line-height: 175%;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  width: 100%;
  margin-top: 40px;
}

.top_txtarea .en_ttl {
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
}

/* ===============================
   Content Blocks
================================ */
.concept_area {
  margin-top: 40px;
}

.content_single,
.content_img_top {
  width: 100%;
}

.content_single img,
.content_img_top img,
.content_img_bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content_img_bottom {
  width: 85%;
  aspect-ratio: 1/1;
  margin: 30px auto 0;
}

.content_txtarea {
  width: 85%;
  margin: 40px auto 0;
}

.content_sub_ttl {
  width: fit-content;
  height: fit-content;
  font-size: 12px; /* !important削除 */
  font-family: var(--font_en_txt);
  color: var(--fcolor);
  font-weight: 400;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--border_txt);
}

.content_ttl {
  height: 100%;
  margin-top: 20px;
  font-size: 1.6rem; /* !important削除 */
  line-height: 170%;
  font-family: var(--font_jp_ttl);
  font-weight: 400;
  color: var(--fcolor);
}

.content_txt {
  height: 100%;
  margin-top: 20px;
  font-size: 1.2rem; /* !important削除 */
  line-height: 170%;
  font-family: var(--font_jp_txt);
}

  @media screen and (min-width:768px){
    .top_txtarea h3{
        font-size: 18px !important;
    }
    .top_txtarea .en_ttl {
        width: 80%;
        padding-left: 10%;
        padding-right: 10%;
    }
    .top_img_area{
        height: 70vh;
    }
    .top_ttl{
        font-size: 18px !important;
    }
    .top_banner h3{
        font-size: 20px;
    }
    .top_banner p{
        font-size: 12px;
        margin-bottom: 20px;
    }
    .top_membership_btn{
        width: 300px;
        height: 42px;
    }
    .top_membership_btn a{
        font-size: 12px;
    }
    .content_img_top{
        aspect-ratio: 1/1.1;
        width: 62%;
    }
    .content_single{
        aspect-ratio: 1.455/1;
        width: 100%;
    }
    .tb_img_none{
        display: none;
    }
    .content_img_area{
        margin-top: 80px;
    }

    .content_img_bottom{
        aspect-ratio: 1 / 1.438;
        width: 31%;
    }
    .content_img_area{
        display: flex;
        flex-wrap: wrap;
        align-items:end;
    }
    .content_img_top{
        margin-top: 0;
    }
    .content_img_reverse .content_img_top{
        order: 2;
    }
    .access_area{
        margin-top: 80px;
    }
    .content_sub_ttl{
        font-size: 14px !important;
    }
    .content_ttl{
        font-size: 18px !important;
        margin-top: 30px;
    }
    .content_txt{
        font-size: 14px !important;
        margin-top: 30px;
    }

    .picture_slide{
        margin-top: 80px;
    }
    .section_border{

        margin-top: 40px;
    }
    .map{
        margin-top: 100px;
    }
    .content_btn a p{
        font-size: 12px;
    }
  }
  @media screen and (min-width:1024px){
    .top_ttl{
        padding-top: 100px;
        font-size:1.7647vw !important;
    }
    .top_membership_btn{
        margin-top: 80px;
    }
.top_area{
max-height: none;
height: auto;
}
.top_img_area{
    height: 85vh;
    max-height: 1080px;
}
.top_txtarea h3 {
    font-size:1.6vw !important;
    margin-top: 40px;
}
.top_banner h3{
    font-size: 26px;
    font-weight: normal;
}
.top_banner p{
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 20px;
}
.top_banner a{
    color: #fff;
    font-size: 16px;
}
.content_sub_ttl {
    font-size: 1.17vw !important;
}
.content_ttl {
    font-size:1.47vw !important;
    margin-top: 40px;
}
.content_ttl.en{
    font-size: 26px !important;
    line-height: 150%;
}
.arrow{
    margin-top: 40px;
}
.content_ttl{
    height: auto;
}
.content_txt{
    height:auto;
    line-height: 200%;
    font-size:  1.03vw !important;

}
.content_btn a{
    border: 1px solid var(--border_txt);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content_single{
    aspect-ratio: 1/0.701 ;
}
.concept_wrap,.clubhouse_wrap,.stay_wrap,.bar_wrap,.spa_wrap,.access_wrap{

    width: 90%;
    margin: 0 auto;
    max-width: 1500px;
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;

}
.content_img_area{
    width: 56%;
}
.picture_slide {
    margin-top: 100px;
}
.concept_txtarea{
    width: 31%;
}
.concept_area{
    margin-top: 120px;
}
.content_img_area{
    margin: 0;
}
.content_txtarea {
    width: 31%;
    margin: 0 auto;
}
.clubhouse_txtarea{
    order: 1;
}
.content_img_reverse{
    order: 2;
}
.clubhouse_area,.stay_area,.spa_area,.bar_area{
    margin-top: 100px;
}
.stay_txtarea{
    width: 31%;
    margin: 0 auto;
    margin-top: 40px;
}
.access_img{
    width: 45%;
}
.access_txtarea{
    width: 49%;
}
.content_btn{
  width: 200px;
    font-size: 12px !important;
}
.map{
    width: 100%;
    height:550px;
  }
  }
  @media screen and (min-width:1360px){
    .top_banner{
        left: 7%;
    }
    .top_membership_btn{
        width: 340px;
        height: 48px;
        margin: 0 auto;
        margin-top: 100px;
        max-width: 300px;
    }
    .top_membership_btn a{
        font-size: 12px;
    }
    .top_ttl {
        font-size:24px !important;
    }
    .top_txtarea h3{
        font-size:21px !important;
    }
    .content_sub_ttl{
        font-size:16px !important;
    }
    .content_ttl{
        font-size:20px !important;
    }
    .content_txt{
        font-size: 14px !important;
    }

  }