@charset "UTF-8";

/* フォント */

.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* --- Reset & Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    /* font-family: 'Helvetica Neue', sans-serif; */
    font-size: 62.5%;
}
img{
    width: 100%;
    height: auto;
}
video{
  width: 100%;
  height: auto;
}

.nav-sp{
    display: none;
}
@media screen and (max-width : 768px ){
    .nav-sp{
        display:block
    }
}
/*---------
全体レイアウト
------------*/
html {
    font-size: 62.5%;
    font-family:"Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴシック", "游ゴシック",YuGothic, Arial, "メイリオ", Meiryo, Helvetica, system-ui;
    color: #1a1a1a;
    background-color: #fff;
    line-height: 1.8;
    position: relative;
    scroll-behavior: smooth;
    word-break: break-word;
    font-weight: 400;
    z-index: auto;
  }
  body {
    font-size: 1.4rem;
    position: relative;
    width: 100%;
    padding-bottom: 0;
    z-index: auto;
    /* chrome safari opera */
    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      min-height: 100%;
    }
  }
  
  img{
    font-size: 0;
    line-height: 0;
    vertical-align: bottom;
  }
  
  iframe{
    width: 100%;
    height: auto;
    border: 0;
  }
  
  a{
    color: #1a1a1a;
    text-decoration: none;
    cursor: pointer;
  }
  
  button{
    /* color: #1a1a1a; */
    cursor: pointer;
  }
  
  .is-pc{
    @include mq(sp) {
      display: none!important;
    }
  }
  .is-sp{
    @include mq(tb) {
      display: none!important;
    }
  }
  :root {
    --c-font: #1a1a1a;
    --c-font-sub: #666;
    --c-font-footer: #505050;
    --c-main: #505f6a;
    --c-sub: #8d7567;
    --c-accent: #b6c5c5;
    --c-border: #707070;
    --c-gray: #eaeaea;
    --c-white: #fff;
    --c-body: #fff;
    --c-bg: #f5f5f5;
    --c-link: #747474;
    --c-tab: #DEDEDE;
    --c-card: #D6D6D6;
    --w-unit: 15px;
    --w-pc: 1200px;
    --w-L: 1000px;
    --w-M: 900px;
    --w-S: 600px;
}
.wrapWidth{
  width: 100%;
  margin: 0 auto;
}
.boxWidth{
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
}
.contWidth{
  width: 96%;
  max-width: 1080px;
  margin: 0 auto;
}
.flex-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
h3{
  font-size: clamp(3rem, 3.9vw, 3.5rem);
  font-weight: 700;
  text-align: center;
  line-height: normal;
  line-height: 1;
  letter-spacing: 0.5rem;
  /* margin-bottom: clamp(2rem, 5.3vw ,7rem); */
  margin-bottom: clamp(2rem, 1.3vw ,5rem);
}
h3 span{
  font-size: 70%;
  font-weight: 500;
}
span.br{
  display: inline-block;
  font-size: 100%;
}
.forSp{
  display: none !important;
}
@media screen and (max-width : 768px ){
.forPc{
  display: none !important;
}
.forSp{
  display: block !important;
}
h3 span{
  font-size: 56%;
  /* font-weight: 500; */
}
}

/* ////////////PADDING等共通//////////// */
#landWrap, #refWrap, #lineupWrap{
  /* padding-top: clamp(6rem, 16vw ,12rem);
  padding-bottom: clamp(9rem, 24vw ,18rem); */
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 12vw, 9rem);
}




  /* --- Header --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.16));
    z-index: 100;
}
.header-nav-inner{
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.3s;
}
.header-nav-inner .header-logo{
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    z-index: 300
}
.header .header-nav-inner .header-logo h1 a{
    width: 280px;
    display: inline-block;
}
.header .header-nav-inner .header-logo h1 a img{
    width: 100%;
}

header.header .header-btn{
    position: absolute;
    right: 80px;
    /* right: 0px; */
    top: 0;
    height: 100%;
    display: flex;
    gap: 1px;
    color: #fff;
}
header.header .header-btn li span{
    font-size: 11px;
}
ul.header-btn .header-item a{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    line-height: 1.4;
    font-size: 1.1rem;
    /* width: 70px; */
    width: 70px;
    height: 100%;
    color: #fff;
    background-color: #505f6a;
    border: 2px solid #505f6a;
    padding: 5px;
    transition: 0.5s;
}
ul.header-btn .header-item{
    background-color: #505F6A;
}
ul.header-btn .header-soudan a{
    background-color: #8D7567;
    border: 2px solid #8D7567;
}
ul.header-btn .header-item img{
  width: 24px;
}
.nav-pc{
    display: none;
}
.nav .nav-item a{
    font-size: 14px;
}
.nav .nav-item a span {
    display: none;
}


@media screen and (min-width : 1200px ){
    header.header .header-btn{
        right: 0px;
    }
    .nav{
        height: 100%;
        display: flex;
        align-items: center;
        margin-right: 380px;
    }
    .nav-list{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
    }
}
@media screen and (max-width : 1199px ){
    .nav.nav-open .nav-list{
        display: block;
        height: 100%;
        padding: 20px 15px 100px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .nav-btn{
        position: absolute;
        display: block;
        cursor: pointer;
        width: 80px;
        height: 80px;
        z-index: 300;
        top: 0;
        right: 0;
        background-color: #fff;
    }
    .nav .nav-item a span {
        font-size: 1.4rem;
        display: block;
        color: #fff;
    }
    .ham{
        position: relative;
        width: 25px;
        margin-inline: auto;
        color: #000;
    }
    .ham::after{
        color: #1a1a1a;
        content: "";
        width: 40px;
        height: 20px;
        background-image: url(../img/menu.svg);
        background-repeat: no-repeat;
        background-size: 40px auto;
        position: absolute;
        top: 52px;
        left: -7px;
        display: block;
        font-size: 1em;
    }
    .ham .ham-line{
        position: absolute;
        left: 50%;
        width: 25px;
        height: 3px;
        background-color: #000;
        transition: all 0.6s;
        transform: translateX(-50%);
    }
    .ham .ham-line-1 {
        top: 20px;
    }
    .ham .ham-line-2 {
        top: 30px;
    }
    .ham .ham-line-3 {
        top: 40px;
    }
}


@media (min-width: 768.1px) {
    .header .header-nav-inner .header-logo {
    left: 15px;
    }
    ul.header-btn .header-item a{
        width: 88px;
    }
    .nav-pc{
        display: block;
    }
}

@media screen and (max-width : 520px ){
    .header .header-nav-inner .header-logo h1 a {
        width: 80px;
        display: block;
    }
    }
    

/* ハンバーガー */

  .nav.nav-open{
    position: fixed;
    height: calc(100vh - 80px);
    display: block;
    opacity: 1;
    z-index: 300;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    /* IE, Edge 対応 */
    scrollbar-width: none;
    /* Firefox 対応 */
    &::-webkit-scrollbar {
      /* Chrome, Safari 対応 */
      display: none;
    }
    .nav-list{
      display: block;
      height: 100%;
      padding: 20px 15px 100px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: none;
      /* IE, Edge 対応 */
      scrollbar-width: none;
      /* Firefox 対応 */
      &::-webkit-scrollbar {
        /* Chrome, Safari 対応 */
        display: none;
      }
    }
  }

  .nav-open .ham-line-1 {
    transform: translateX(-50%) rotate(45deg);
    top: 30px;
  }

  .nav-open .ham-line-2 {
    width: 0;
    left: 50%;
  }

  .nav-open .ham-line-3 {
    transform: translateX(-50%) rotate(-45deg);
    top: 30px;
  }

  .nav-open .ham::after{
    background-image: url('../img/close.svg');
  }


@media (min-width: $pcwidth) {
  .nav{
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 380px;
  }
  .nav-list{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    .nav-item{
      a {
        font-size: 1.2rem;
        font-weight: 600;
        padding: .8em .5em;
        display: block;
        color: #1a1a1a;
        position:relative;

        span{
          display: none;
        }
      }

    }
  }
}
/* ハンバーガー終わり */

/* ナビゲーション */
@media (max-width: 1200px) {
    .nav {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        height: 0;
        background-color: #1a1a1a;
        transition: all 0.6s;
        z-index: -100;
        opacity: 0;
        overflow: hidden;
    
    
        .nav-list {
          padding: 20px 15px;
          width: 100%;
          height: 0;
          background-color: #000;
          margin-left: auto;
          display: none;
        }
    
        .nav-item {
          background-color: #000;
          a {
            font-size: 1.2rem;
            /* font-weight: 600; */
            padding: .8em .5em;
            display: block;
            color: #b6c5c5;
            position:relative;
            &::after {
              right: 1.5em;
              top: 50%;
              position: absolute;
              content: '';
              display: block;
              width: 10px;
              height: 10px;
              border-top: 2px solid #fff;
              border-right: 2px solid #fff;
              -webkit-transform: translateY(-50%) rotate(45deg);
              transform: translateY(-50%) rotate(45deg);
            }
            span{
              font-size: 1.4rem;
              display: block;
              color: #fff;
            }
          }
        }
        //.navItem
      }
      //.nav
}


/* FOOTER START */
.footer .container{
    padding: 0 15px;
}
.footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}
@media (min-width: 768.1px) {
    .footer .footer-grid {
        grid-template-columns: 1fr 340px 100px;
    }
}
@media (max-width: 768px) {
    .footer .footer-grid {
        text-align: center;
    }
}
.mt30 {
    margin-top: 30px;
}
.mt10 {
    margin-top: 10px;
}


.footer .footer-logo {
    width: min(100%, 270px);
}
@media (max-width: 768px) {
    .footer .footer-logo {
        margin-inline: auto;
    }
}



.footer .footer-menu {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 768.1px) {
    .footer .footer-menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}


.footer .copy {
    margin-top: 60px;
    color: var(--c-white);
    font-size: 1.2rem;
    text-align: center;
    padding: 20px 15px 80px;
    background: var(--c-font);
}
@media (min-width: 768.1px) {
    .footer .copy {
        padding: 20px 15px;
    }
}


/* FOOTER END */



/* /////////////////////////////////////////////////////////////////// */
/* //////////////////////// TOP VIEW //////////////////////// */
/* /////////////////////////////////////////////////////////////////// */
#contents {
  /* margin-top: 80px; */
    width: 100%;
    height: calc(100vh - 80px);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#contents img.topView{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.contentsWrap{
  position: absolute;
  color: var(--c-white);
  z-index: 2;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.8));
  width: min(100%, 500px);
  font-weight: 500;
  bottom: calc(0px + 40%);
  right: 5%;
}
.contentsWrap .contentsTitle{
  font-size: clamp(4rem, 6vw, 6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .8rem;
}
.contentsWrap .contentsTxt{
  font-size: clamp(1.4rem, 2.3vw, 2.3rem);
  letter-spacing: 0.02em;
  position: relative;
  line-height: 2;
  margin-top: 1em;
}

/* min-width 768px */
.contentsWrap{
  /* bottom: calc(80px + 10%); 
    right: 30px;*/
  /* bottom: calc(0px + 10%); */
}
.contentsWrap02{
  position: absolute;
  z-index: 2;
  /* width: min(100%, 500px); */
  bottom: calc(0px + 10%);
  right: 5%;
}

.contentsWrap02 .contentsBnr img {
  width: clamp(13rem, 29vw ,17rem);
  height: auto;
  /* display: block; */
}
/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){
  .contentsWrap{
    width: min(100%, 350px);
      top: 10%;
      left: 50%;
      /* text-align: center; */
      transform: translateX(-50%);
      padding-left: 15px;
      padding-right: 15px;
  }
  .contentsWrap .contentsTitle{
    font-size: clamp(4rem, 6vw, 5rem);
    line-height: 1.7;
    letter-spacing: .8rem;
  }
  .contentsWrap .contentsTxt{
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    letter-spacing: 0.02em;
    position: relative;
    line-height: 2;
    margin-top: 1em;
  }
  .contentsWrap02{
    bottom: calc(0px + 43%);
    right: 5%;
  }
}

/* /////////////////////////////////////////////////////////////////// */
/* //////////////////////// titleWrap //////////////////////// */
/* /////////////////////////////////////////////////////////////////// */
/* #titleWrap h2{
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 700;
  text-align: center;
}
#titleWrap h2 span{
  font-size: 70%;
}
#titleWrap p.titleTxt{
  font-size: clamp(1.6rem, 1.6vw, 1.8rem);
  text-align: center;
} */
#titleWrap{
/* padding-bottom: clamp(9rem, 24vw, 18rem); */
padding-bottom: clamp(4rem, 14vw, 9rem);
}
#titleWrap h2{
font-size: clamp(2.2rem, 3vw, 3rem);
font-weight: 700;
letter-spacing: 0.5rem;
text-align: center;
background-color: #343e51;
color: #fff;
}
#titleWrap h2 div{
width: 40rem;
margin: 0 auto;
}
.titleSub{
  background-color: #7ea8b6;
}
.titleSub p{
  text-align: center;
  font-size: clamp(2rem, 2vw, 2.2rem);
  letter-spacing: 0.1rem;
  color: #fff;
}
.titleMerit{
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 4vw ,4rem);
  margin-bottom: clamp(.8rem, 2.1vw ,2rem);
  /* width: 70%; */
}
.titleMerit div{
  padding: 0 1rem;
}
.landMerit{
  padding: 0 1rem;
  margin-top: clamp(1.5rem, 4vw ,4rem);
  margin-bottom: clamp(.8rem, 2.1vw ,2rem);
}
.strengthWrap{
  margin-top: clamp(2rem, 5.3vw ,4rem);
}
.strengthWrap ul{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}
.strengthWrap ul li{
  border: 1px solid #333C50;
  /* margin: 1rem; */
  width: 32%;
}
.strengthNo{
  width: 100%;
  background-color: #333C50;
  display: flex;
}
.strengthNo img{
  padding: 1rem;
  width: 40%;
  margin: 0 auto;
}
.strengthTxt{
  width: 100%;
  text-align: center;
  font-size: clamp(1.4rem, 1.8vw ,2rem);
  padding: 1rem;
}
.highlight{
    background: linear-gradient(transparent 60%, yellow 60%);  
}
/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){
  #titleWrap h2 div{
    width: clamp(30rem, 90%, 40rem);
    margin: 0 auto;
    }
    .titleSub p{
      text-align: center;
      font-size: clamp(1.6rem, 1vw, 2.2rem);
      letter-spacing: 0.1rem;
      font-weight: 500;
    }
    .titleMerit div{
      padding: 0 0rem;
    }
    
    .strengthWrap ul{
      display: block;
    }
    .strengthWrap ul li{
      width: 100%;
      display: flex;
      align-items: center;
      /* border: 1px solid #333C50; */
      margin: 1rem 0;
    }
    .strengthNo{
      width: 20%;
      /* background-color: #333C50; */
      display: block;
    }
    .strengthNo img{
      width: 100%;
      max-width: 10rem;
      padding: 1rem;
    }

    .strengthTxt{
      width: 80%;
      text-align: center;
      padding: 0;
      font-size: clamp(1.6rem, 3vw ,2rem);
    }
}
.rsvBtn a{
  width: 80%;
  display: block;
  max-width: 450px;
  margin: 0 auto;
  padding: 1rem 0;
  text-align: center;
  background-color: #cb6d37;
  border: #cb6d37 solid 2px;
  border-radius: 5rem;
  position: relative;
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  color: #fff;
  margin-top: clamp(2rem, 5.3vw ,3rem);
}
.rsvBtn .moreArrow::after{
  content: '';
  position: absolute;
  right: 5%;
  width: 1rem;
  height: 100%;
  bottom: 0%;
  background-image: url(../img/rsvbtnArrow01.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* ホバー時 */
.rsvBtn a:hover{
  background-color: #fff;
  color: #cb6d37;
  transition: .5s;
}
.rsvBtn a:hover .moreArrow::after {
  background-image: url(../img/rsvbtnArrow05.svg);
  transition: .5s;
}
/* .rsvBtn .moreArrow{
  position: absolute;
    display: inline-block;
    padding: 0 0 0 16px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    right: 26px;
    top: calc(50% + 1px);
}
.rsvBtn .moreArrow::after,
.rsvBtn .moreArrow::before{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.rsvBtn .moreArrow::before{

  left: 3px;
  width: 18px;
  height: 1px;
  background: #1A1A1A;
}
.rsvBtn .moreArrow::after{
  left: 13px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #1A1A1A;
    border-right: 1px solid #1A1A1A;
    transform: rotate(45deg);
} */
/* ホバー時 */
/* .rsvBtn a:hover{
  background-color: #fff;
  color: #b8c4c4;
  transition: .5s;
} */
/* .rsvBtn a:hover .moreArrow::before {
  background: #b8c4c4;
  transition: .5s;
}

.rsvBtn a:hover .moreArrow::after {
  border-top: 1px solid #b8c4c4;
  border-right: 1px solid #b8c4c4;
  transition: .5s;
} */
/* ////// トップのボタン ////// */
.rsvBtnTop a{
  width: 80%;
  display: block;
  max-width: 450px;
  margin: 0 auto;
  padding: 1rem 0;
  text-align: center;
  background-color: #333c50;
  border: #333c50 solid 2px;
  position: relative;
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: 0.4rem;
}
.rsvBtnTop .moreArrow::after{
  content: '';
  position: absolute;
  right: 5%;
  width: 1rem;
  height: 100%;
  bottom: 0%;
  background-image: url(../img/rsvbtnArrow01.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* ホバー時 */
.rsvBtnTop a:hover{
  background-color: #fff;
  color: #333c50;
  transition: .5s;
}
.rsvBtnTop a:hover .moreArrow::after {
  background-image: url(../img/rsvbtnArrow04.svg);
  transition: .5s;
}

.meritTitleh3{
  margin-top: clamp(6rem, 16vw ,8rem);
  margin-bottom: clamp(1rem, 2.6vw ,2rem);
}
.meritBox{
  display: flex;
  justify-content: space-around;
  align-items: stretch; /* 追加：子要素の高さを揃える */
  margin-bottom: clamp(5rem, 13vw ,9rem);
}
.meritPoint{
  width: 32%;
  display: flex;
  flex-direction: column; /* 子要素（画像＋テキスト）を縦に積む */
}
.meritimgWrap{
  position: relative;
  display: flex;
  bottom: -1px;
}
.meritimgWrap .number{
  position: absolute;
  width: 20%;
  bottom: -15%;
  right: 40%;
}
.meritText{
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #fff;
  background-color: #505050;
  padding: 13% 4% 5%;
  text-align: center;
  letter-spacing: .06rem;
  flex-grow: 1; /*  必要に応じて高さを伸ばす（特に背景を下まで回したいとき） */
}
span.meritTitle{
  font-size: 140%;
}
/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){
  .meritBox{
    flex-wrap: wrap;
    /* justify-content: space-between; */
    justify-content: center;
  }
  .meritPoint{
    width: 45%;
    min-width: 300px;
    padding: 0 5px;
    display: flex;
    flex-direction: column; /* 子要素（画像＋テキスト）を縦に積む */
  }
  .meritText{
    font-size: clamp(1.4rem, 2vw, 1.6rem);
  }
}


/* /////////////////////////////////////////////////////////////////// */
/* //////////////////////// landWrap //////////////////////// */
/* /////////////////////////////////////////////////////////////////// */
#landWrap{
  background-color: #e9e2d7;
  /* padding-top: clamp(6rem, 16vw ,12rem); */
}

#landWrap .placeMap{
  aspect-ratio: 16 / 9;
  max-width: 1080px;
  width: 95%;
  height: auto;
  margin: 0 auto;
}
#landWrap .placeMap iframe{
  width: 100%;
  height: 100%;
}
#landWrap h3.subtitle{
  margin-bottom: clamp(0.3rem, 2vw ,3rem);
  margin-top: clamp(1rem, 2.5vw ,3rem) ;
}
.locationBox{
  display: flex;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.locationBox .locBox01,
.locationBox .locBox02{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 50%;
}

.locationBox .locBox{
  width: 49%;
  font-size: clamp(1.2rem, 1vw, 1.4rem);
}
.locationBox .locBox03{
  width: 50%;
  display: flex;
  justify-content: space-around;
}
.locationBox .locBox04{
  display: none;
}
.locBox.locLong{
  width: 100%;
}
.locBox p{
  line-height: 1.4;
  margin: 3% 0 5%;
}

.mapBox{
  display: flex;
  justify-content: space-between;
  /* gap: 20px; */
}
.mapBox div{
  width: 50%;
  min-width: 350px;
  margin: 0 auto;
  /* padding: .5%; */
}
.mapBox div:nth-child(1){
  padding-right: 1%;
}
.mapBox div:nth-child(2){
  padding-left: 1%;
}

/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){
  #landWrap .placeMap{
    aspect-ratio: 3 / 4;
    max-width: 600px;
  }
.locationBox{
  display: block;
}
.locationBox .locBox01,
.locationBox .locBox02{
  width: 100%;
  margin: 0 auto;
}
.locBox02{
  display: none;
}
.locBox04{
  display: flex !important;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

}

.locationBox .locBox{
  width: 49%;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
}
.locationBox .locBox03{
  width:  100%;
}
.locBox.locLong{
  width:  100%;
}
.locBox p{
  /* line-height: 1.4; */
  margin: 1% 0 5%;
}
.locBox03 .locBox p{
  /* line-height: 1.4; */
  margin: 0.5% 0 2.5%;
}
.mapBox div{
  width: 100%;
}
.mapBox div:nth-child(1){
  padding-right: 0%;
  padding-bottom: 2%;
}
.mapBox div:nth-child(2){
  padding-left: 0%;
}

}

/* /////////////////////////////////////////////////////////////////// */
/* //////////////////////// refWrap //////////////////////// */
/* /////////////////////////////////////////////////////////////////// */
/* #refWrap h3{
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 700;
  text-align: center;
}
#refWrap h3 span{
  font-size: 70%;
} */
#refWrap{
  background-color: #d4ccc2;
}
h4{
  font-size: clamp(2.4rem, 3.1vw, 3rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.8rem;
  /* margin-bottom: clamp(2rem, 5.3vw ,5rem); */
}
.refTitle{
  width: 50%;
  min-width: 390px;
  margin: 0 auto;
  text-align: center;
  font-weight: 500;
  margin-top: clamp(3.2rem, 8.5vw ,4rem);
}
.refTitle p{
  font-size: clamp(1.4rem, 3vw, 1.6rem);
}
.spec{
  line-height: 2;
  text-align: center;
  font-weight: 500;
  border-top: 1px #1a1a1a solid;
  border-bottom: 1px #1a1a1a solid;
  margin-top: clamp(1rem, 2.6vw ,2rem);
  margin-bottom: clamp(1rem, 2.6vw ,2rem);
  /* margin-bottom: clamp(2rem, 5.3vw ,3rem); */
  padding: 0.5rem 0;
}
.refPrice{
  font-weight: 500;
  display: flex;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 1rem;
  align-items: center;
}
.addPrice{
  display: flex;
}
.plus::after{
    content: "+";
    font-size: clamp(2.4rem, 2vw, 3rem);
    color: #333;
    margin: 1rem;
    align-items: center;
    display: flex;
}
.landPrice, .buildPrice{
  /* border: 1px #1a1a1a solid; */
  background-color: #fff;
  padding: 0 2rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-size: clamp(1.4rem, 2vw, 1.8rem);

}
.refpriceBox{
  width: 70%;
  display: flex;
  justify-content: right;
  padding-right: 3rem;
}

.setPrice{
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  width: 30%;
  line-height: 1.3;
}
.setPrice span{
  font-size: 70%;
  font-weight: 500;
}
.caption{
  font-size: clamp(1rem, 1vw, 1.2rem);
  text-align: center;
  line-height: 1.3;
}
#refWrap .recommend{
  text-align: center;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 500;
}
#refWrap .pricerefBox{
  width: 60%;
  min-width: 300px;
  margin: 0 auto;
  margin-top: clamp(1rem, 2.6vw ,2rem);
  margin-bottom: clamp(1rem, 2.6vw ,2rem);
}

.madoriBox div{
  width: 49%;
  margin-top: clamp(3rem, 8vw ,5rem);
}
/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){
  h4{
    /* text-align: left; */
    letter-spacing: 0.8rem;
    margin: 0 auto;
    /* margin-bottom: clamp(2rem, 5.3vw ,5rem); */
    width: 96%;
  }
  h4 .brSp{
    display: inline-block;
  }
  .refTitle{
    /* width: 50%;
    min-width: 390px;
    margin: 0 auto;
    text-align: left;
    font-weight: 500; */
  }
  .madoriBox{
    margin-top: clamp(3rem, 8vw ,5rem);
  }
  .madoriBox div{
    min-width: 300px;
    width: 80%;
    margin: 0 auto;
  }
  .refTitle{
    width: 96%;
    max-width: 500px;
    min-width: 360px;
    text-align: left;
  }
  .refTitle p{
    margin-top: .5rem;
  }
  .spec, .refPrice{
    text-align: left;
    padding: 0 0%;
    width: 96%;
    margin: 0 auto;
    margin-top: clamp(1rem, 2.6vw ,2rem);
    margin-bottom: clamp(1rem, 3.3vw ,3rem);
  }
  .spec{
    line-height: normal;
    padding: 0.5rem 0;
  }
  .refPriceSp{
    display: flex;
    width: 92%;
    margin: 0 auto;
  }
  .refPriceSp .forSp{
    width: 40%;
    padding-right: 2%;
  }
  .caption{
    text-align: left;
    text-align: justify;
    width: 96%;
    margin: 0 auto;
  }
  #refWrap .pricerefBox{
    width: 70%;
  }
  
}
.point01{
  margin-top: clamp(2rem, 5.3vw ,4rem);
}
.point01 .pointTitle,
.point02 .pointTitle{
  /* font-size: clamp(1.4rem, 2vw, 1.8rem); */
  font-size: clamp(1.6rem, 2vw, 1.8rem);
  text-align: center;
  font-weight: 400;
  letter-spacing: .4rem;
  padding: 0.7rem 0;
  color: #fff;
  background-color: #55707c;
}
.point01 ul{
  margin: 0 auto;
  width: 35%;
  min-width: 350px;
  font-weight: 500;
  margin-top: clamp(1.5rem, 4vw ,3rem);
  margin-bottom: clamp(1.5rem, 4vw ,3rem);
}
.point01 ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.3rem;
  letter-spacing: .1rem;
  font-size: 1.8rem;
  font-size: clamp(1.6rem, 2vw, 1.8rem);
}

.point01 ul li::before{
  content: url(/img/check.svg);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1em;
  /* height: 1em;
  border: 1px solid #1a1a1a;
  box-sizing: border-box; */
}
.point02 .pointBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: clamp(2rem, 5.3vw, 4.5rem);
  margin-bottom: clamp(2rem, 5.3vw, 4.5rem);
}
.point02 .videoBox{
  width: 49%;
}
.point02 .videomt{
  margin-top: clamp(1.5rem, 4vw ,3rem);
}
.pointDetail{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: clamp(1rem, 4vw ,1.5rem);
  /* margin-bottom: clamp(1.5rem, 4vw ,3rem); */
}
.pointDetail div{
  width: 10%;
  max-width: 38px;
  /* padding-right: 1rem; */
  padding-right: .1rem;
  /* padding: 0 3rem; */
}
.pointDetail div.no01{
  width: 10%;
  /* max-width: 45px; */
  padding-right: 1.1rem;

  /* padding: 0 3rem; */
}
.pointDetail p{
  width: 85%;
  font-size: clamp(1.5rem, 1.9vw, 1.7rem);
  font-weight: 500;
}
.point02 .caption{
  text-align: start;
  margin-top: 3rem;
}
/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){
  .point02 .pointBox{
    display: block;
  }
  .point02 .videoBox{
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
  }
  .point01 ul{
    margin: 0 auto;
    width: 85%;
    min-width: 350px;
  }
}

/* /////////////////////////////////////////////////////////////////// */
/* //////////////////////// lineupWrap //////////////////////// */
/* /////////////////////////////////////////////////////////////////// */
#lineupWrap{
  background-color: #ced9d9;
}
#lineupWrap h3{
  /* font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 700;
  text-align: center;
  line-height: normal; */
  margin-bottom: clamp(1rem, 2vw ,3rem);
}
#lineupWrap h3 span{
  /* font-size: 70%; */
}
#lineupWrap .ikkatsu{
  max-width: 40rem;
  width: 90%;
  margin: 0 auto;
  margin-bottom: clamp(1rem, 2vw ,3rem);
}
#lineupWrap .kukakuPic03{
  padding-bottom: clamp(2rem, 3vw ,5rem);
}
#lineupWrap h4{
  /* margin-bottom: clamp(1rem, 2.5vw, 2.5rem); */
  letter-spacing: 0.3rem;
}
#lineupWrap .lineupRefpic{
  padding: 5rem 0;
}
#lineupWrap .lineupSpec{
  text-align: center;
  margin-top: clamp(1rem, 2.6vw ,4rem);
}
#lineupWrap .lineupSpec img{
  width: clamp(120px, 25%, 150px);
}
#lineupWrap .lineupSpec.spec02 img{
  width: clamp(200px, 40%, 240px);
}
#lineupWrap .lineupSpec.spec03 img{
  width: clamp(320px, 50%, 360px);
}
#lineupWrap .lineupSpec p{
  font-size: clamp(1.4rem, 14vw, 1.6rem);
  margin-top: clamp(1.5rem, 4vw ,2rem);
  margin-bottom: clamp(1.5rem, 4vw ,2rem);
}
.lineupPrice{
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  /* width: 30%; */
  line-height: 1.3;
}
.lineupPrice span{
  font-size: 60%;
  font-weight: 400;
}

#lineupWrap .madori01{
  display: flex;
  justify-content: center;
}

.vrBtn a{
  width: 80%;
  display: block;
  max-width: 450px;
  margin: 0 auto;
  padding: 1rem 0;
  /* text-align: left; */
  text-align: center;
  background-color: #94252A;
  border: #94252A solid 2px;
  border-radius: 10px;
  position: relative;
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  padding-right: 3%;
}

.vrBtn .vrArrow::after{
  content: '';
  position: absolute;
  right: 3%;
  width: 2rem;
  height: 100%;
  bottom: 0%;
  background-image: url(../img/vrArrow01.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* ホバー時 */
.vrBtn a:hover{
  background-color: #fff;
  color: #94252A;
  transition: .5s;
}
.vrBtn a:hover .vrArrow::after {
  background-image: url(../img/vrArrow02.svg);
  transition: .5s;
}


/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){
  #lineupWrap .lineupSpec{
    text-align: left;
    text-align: justify;
  }
  #lineupWrap .lineupSpec p{
    width: 96%;
    margin: 0 auto;
  }
  #lineupWrap .lineupSpec img{
    width: clamp(120px, 25%, 150px);
    margin: 2%;
  }
  #lineupWrap .lineupSpec p{
    font-size: clamp(1.4rem, 3vw, 1.6rem);
  }
  .lineupPrice{
    font-size: clamp(2.4rem, 3.1vw, 3rem);
    font-weight: 700;
    width: 96%;
    margin: 0 auto;
    line-height: 1.3;
  }
  .lineupPrice span{
    font-size: 60%;
    font-weight: 400;
  }
}

/* /////////////////////////////////////////////////////////////////// */
/* //////////////////////// jibunWrap //////////////////////// */
/* /////////////////////////////////////////////////////////////////// */
#jibunWrap {
  margin-top: clamp(6rem, 16vw, 10rem);
}
#jibunWrap .jibunimgLogo{
  width: clamp(200px, 20%, 220px);
  margin: 0 auto;
  position: relative;
  /* position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%); */
  /* width: 50%;  */
  /* 適宜サイズ調整。％にするとレスポンシブ対応しやすい */
  /* max-width: 100%; */
  /* height: auto; */
}
#jibunWrap .jibunimgHouse{
  margin-top: -20%;
}
#jibunWrap .slider{
  margin-top: clamp(3rem, 8vw, 4rem);
  margin-bottom: clamp(3rem, 8vw, 4rem);

}
#jibunWrap .sliderTitle{
  width: clamp(7rem, 10%, 10rem);
  margin: 0 auto;
}
#jibunWrap .sliderBox{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: clamp(2.5rem, 6.6vw ,3rem);
}
#jibunWrap .sliderBox .slideImg{
  flex: 2;
  padding: 0 1%;
}
#jibunWrap .sliderBox .slideTxt{
  flex: 3;
  font-weight: 500;
  /* font-size: clamp(1.6rem, 2vw ,1.8rem); */
  font-size: 1.6rem;
}
#jibunWrap .sliderBox .slideTxt span{
  font-size: 140%;
  font-weight: 700;
  letter-spacing: 0.1rem;
}

/* /// Slider /// */
/* スライダー */
.slick-prev, .slick-next {
  display: block !important;
}
.slide-arrow {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
/* background-color: #00404F; */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
/* border-radius: 50%; */
}
.prev-arrow {
background-image: url(../img/slider_arrowL.svg);
/* left: 0px; */
left: -5%;
}
.next-arrow {
background-image: url(../img/slider_arrowR.svg);
/* right: 0px; */
right: -5%;
}
#lineupWrap .prev-arrow {
  background-image: url(../img/slider_arrowL.svg);
  /* left: 0px; */
  left: 0%;
  }
#lineupWrap .next-arrow {
  background-image: url(../img/slider_arrowR.svg);
  /* right: 0px; */
  right: 0%;
  }
.slick-dots li button:before
{
  font-family: 'slick';
  font-size: 40px;
  line-height: 15px;
}
/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){
  /* #jibunWrap .jibunimgLogo{
    display: none;
  }
  #jibunWrap .jibunimgLogoSp{
    display: block;
  width: clamp(240px, 20%, 270px);
  margin: 0 auto;
  } */
  #jibunWrap .jibunimgLogo{
  width: clamp(240px, 20%, 270px);
  }
  #jibunWrap .sliderBox{
    display: block;
    padding: 0 3%;
    text-align: justify;
  }
  #jibunWrap .sliderBox .slideImg{
    max-width: 400px;
    margin: 0 auto;
  }
  .slide-arrow {
    width: 30px;
    height: 30px;
    }
  #jibunWrap .sliderBox .slideTxt{
    margin-bottom: 1rem;
  }
}

/* /////////////////////////////////////////////////////////////////// */
/* //////////////////////// rsvForm //////////////////////// */
/* /////////////////////////////////////////////////////////////////// */
/* ////////// mailform.css ///////// */
form#mail_form dl dt span.required {
	color: #d9534f;
    font-size: 70%;
	/* border: 1px solid #d43f3a; */
}

form#mail_form dl dt span.optional {
	color: #337ab7;
    font-size: 70%;
	/* border: 1px solid #2e6da4; */
}
form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
	display: block;
	color: #ff0000;
	margin-top: 5px;
}

/* ///////////////////////////// */
#rsvForm{
  padding-top:  clamp(6rem, 30vw, 12rem);
}
#rsvForm input,
#rsvForm select,
#rsvForm textarea {
  border: 2px solid #dfe2e5;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* #rsvForm .radio-group input {
  width: 2rem;
  height: 2rem;
} */
#rsvForm .privacy-title{
  font-weight: bold;
}
#rsvForm span.requiredRed{
    color: #D80000;
  font-size:80%;
  padding-left: .5rem;
}
/* チェックボックスボタンだけサイズ変更 */
#rsvForm input[type="checkbox"] {
  width: 20px;
  height: auto;
}
.privacy-section{
  pointer-events: auto;
}
input[type="checkbox"] {
  display: inline-block; /* 必ず表示されていること */
  visibility: visible;
  appearance: auto;
}


#rsvForm form div {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

#rsvForm label {
  margin-bottom: 4px;
  font-weight: bold;
}
/* ラジオボタン横並び */
#rsvForm .radio-inline {
  display: flex;
  /* gap: 20px; */
}

#rsvForm .radio-inline label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
}

/* ラジオボタン横並びの見た目改善 */
/* #rsvForm .radio-group {
  display: flex;
} */

/* #rsvForm .radio-group label {
  display: flex;
  align-items: center;
  gap: 4px;
} */
#rsvForm label[for] {
  cursor: text;
}
button[type="submit"]{
  width: 80%;
  max-width: 400px;
  padding: 1rem 0;
  font-size: 1.6rem;
  margin: 0 auto;
  background-color: #1a1a1a;
  color: #fff;
  text-align: center;
  letter-spacing: 1.5rem;
}
button[type="submit"]:hover{
  background-color: #999;
  transition: 0.5s;
}
#form_submit_button {
  border: none !important;
}
div.contactBtn{
  width: 80%;
  max-width: 400px;
  padding: 1rem 0;
  font-size: 1.6rem;
  margin: 0 auto;
  background-color: #1a1a1a;
  color: #fff;
  text-align: center;
  letter-spacing: 1.5rem;
}
div.contactBtn:hover{
  background-color: #999;
  transition: 0.5s;
}
/* 個人情報セクション */
.privacy-section {
  /* font-size: 16px; */
  /* line-height: 1.6; */
}

.privacy-title {
  /* font-weight: bold; */
  margin-bottom: 0.5em;
}

.requiredRed {
  /* color: red; */
  font-size: 0.9em;
  margin-left: 0.5em;
}

.privacy-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  font-weight: bold;
}

.privacy-check input[type="checkbox"] {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  accent-color: #000; /* 対応ブラウザでチェック色変更可 */
}


.privacy-note {
  font-size: 0.9em;
  color: #666;
}

.privacy-note a {
  color: #007bff;
  text-decoration: underline;
}

/* =================== width 768px以下 ================== */
@media screen and (max-width : 768px ){}

/* THANKS PAGE */
#thanks{
  font-size: 1.8rem;
}
#thanks .thanksBg{
  background-color: #e9e2d7;
}
#thanks .thanksBox{
  /* background-color: #fff; */
  padding: 5rem 0 ;
}
#thanks h2{
  font-weight: 500;
  font-size: 130%;
}
#thanks a{
  transition: 0.5s;
}
#thanks a:hover{
  color: #aaa;
}