@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　limited
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.page-ttl{
  position: relative;
  background-image:url(../image/bg_ttl_pc.jpg);  
}
.page-ttl .page-hd {
    bottom: 10vh;
}
.page-ttl::after{
  background: none;
}
.cont-nav{
	background: transparent;
}


.page-ttl .caption{
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-size: 1.2rem; 
  color: #fff;
  text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000,0 0 5px #000;
}



/*--------------------------------------------------------------------------
   Tab
---------------------------------------------------------------------------*/

.tab-nav{
	padding: 70px 0 40px;		
}
.tab-nav ul{
	display: flex;
	justify-content: center;
}
.tab-nav ul li{
	max-width: 400px;
	width:calc(50% - 15px);
	margin: 0 15px;
	padding:10px;
	border: 1px solid #FFF;
	background: rgba(255,255,255,.1);
	font-size: 2.2rem;
	text-align:center;
	color: #FFF;
	cursor: pointer;
	transition:.3s;	
}
.tab-nav ul li:hover,
.tab-nav ul li.current{
	background: rgba(181,146,64,1);
}

.tab-nav ul li span{
  margin: 0 0 0 10px;
}

.tab_bdy {
  display: none;
  transition: all .9s;
}

.tab_bdy.current {
  display: block;
  animation: show .3s;
}




/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#ContentBlack{
  background-color: #161616;
  /* margin-top: 50px; */
}


/* price
-----------------------------------------------------------------*/

.price.sec{
  padding: 15px 0 15px;
  background: rgb(253,252,251);
  background: radial-gradient(circle, rgba(253,252,251,1) 0%, rgba(226,209,195,1) 100%);
  text-align: center;
}





/* intro
-----------------------------------------------------------------*/
.intro{
  position: relative;
  z-index:0;
  padding-bottom: 180px;  
}
.intro-box{
  padding: 260px 0 190px;
  background:url(../image/bg_intro_pc.jpg) no-repeat center center;
  background-size:cover;
  text-align:center;  
}
.intro .txt-lead{
  margin-bottom: 30px;
  font-size: 3.6rem;
  color: #E5AE3A;
  font-weight:500;  
}

.intro .txt{
  font-size: 1.8rem;
  line-height:2.3;
  color: #FFF;  
}

.equipment::after{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,50%);
    display: block;
    content: "";
    width: 226px;
    height: 35px;
    background: url(../image/line_hr.svg) no-repeat;
    background-size: 100% auto;
}

/* view
-----------------------------------------------------------------*/
.view{
  padding: 90px 0 0;
  width: 100%;  
}
.sec h2{
  margin-bottom: 25px;
  text-align: center;  
}
.sec .txt-lead{
  font-size: 3rem;
  color: #FFF;
  letter-spacing: 0.1em;
  text-align: center;    
}
.sec .txt-lead .last2{
    color: #C5A43C
    
}
.view .view-position{
  margin: 45px 0 15px;
  font-size: 2rem;
  color: #FFF;
  letter-spacing: 0.1em;
  text-align: center;   
}
.v-scroll{
  position: relative;
  overflow:hidden;
  height: 447px;  
}
.panoramixImg {
	width: auto;
	max-width: none;
	height: 100%;
	position: absolute;
	margin: auto;
}

.pano {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
.pano .controls a {
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index:50;
	display: block;
}
.pano .controls a.left {
	left: 0;
}
.pano .controls a.right {
	right: 0;
}



/* plan
-----------------------------------------------------------------*/
.plan{
  padding: 60px 0 0;
}
/*
#tab1_bdy .plan{
  background:url(../image/bg_premium_b1_pc.jpg) no-repeat center bottom;  
}

#tab2_bdy .plan{
  background:url(../image/bg_premium_c_pc.jpg) no-repeat center bottom;  
}

#tab3_bdy .plan{
  background:url(../image/bg_premium_i1_pc.jpg) no-repeat center bottom;  
}
*/



.plan .inner{
  max-width: 90%;  
}
.plan .txt-lead{
  margin-bottom: 30px;  
}

.plan h3.caution{
  font-size: 2rem;
  line-height:2; 
  color: #fff;
  margin: 0 auto 1rem;
  text-align: center;
}

.txt{
  font-size: 1.4rem;
  line-height:2; 
  color: #fff;
  margin: 0 0 1rem;
  text-align: center;

}

.plan-box{
  padding: 0px 80px 85px;  
  background: #FFF;
  margin: 50px 0;
}
.plan-box .plan-wrapper{
  max-width: 1300px;
  margin: 0 auto;
}
.plan-box .plan-wrapper:first-child{
  max-width: 1300px;
/*  margin: 0 auto 120px;*/
}
.plan-box .plan-wrapper .txt-area{
  width: 43.85%;
}
.plan-box .plan-wrapper .layout-hd{
  display: flex;  
}
.plan-box .plan-wrapper .layout-hd h3{
  width: 50.176%;
  margin-right: 25px;
  flex-shrink: 0;  
}
.plan-box .txt-space{
  margin-bottom: 25px;
  font-size: 1.5rem;  
}

  .plan-box .txt-space li .bg{
    background: #e5e9f9;
    padding: .4rem 1rem;
    margin: 10px 0;
  }

.plan-box .txt-spec{
  margin-bottom: 30px;
    margin-top: 20px
}
.plan-box .feature{
  margin: 25px 0;  
}
.plan-box .feature span{
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 0 8px;
  background: #414762;
  color: #FFF;
  font-size: 1.8rem;
}
.plan-box .txt-area h4{
  margin-bottom: 30px;
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: 500;
}
.plan-box .plan-wrapper .layout{
  width: 48.92%;  
}
.plan-box .plan-wrapper .layout .ico{
    margin-top: 40px;
    display: block;
}
.plan-box .ceiling {
  /* margin-bottom: 10px; */
  margin-top: -10px;
}
.plan-box .ceiling .txt-area{
  width: 85%;
  /* width: 50%; */
  /* padding-right: 20px;   */
}
.plan-box .ceiling .txt-area .note{
    margin-top: 10px
}

.plan-box .ceiling .txt-box{
  border: 1px solid #414762;
  text-align: center;
  padding: 5px;
}
.plan-box .ceiling .txt-box:nth-of-type(2){
  margin: 10px 0;
}
.plan-box .ceiling .txt-box .txt-small{
  font-size: 1.6rem;
}
.txt-big{
  font-size: 3.9rem;
  font-weight: 400;
}
.color_y{
  color: #A91F24;
}
.plan-box .ceiling .txt-lead{
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 10px;  
}
.plan-box .ceiling .txt{
  font-size: 1.4rem;
  line-height:1.6;  
}
.plan-box .ceiling .pic{
  width: 50%;  
}
.plan-box .marble{
  position: relative;
  padding: 22px 5% 20px;
  background:url(../image/bg_marble_pc.jpg) no-repeat center center;
  background-size:cover;
  color: #FFF;  
}
.plan-box .marble h4{
  margin-bottom: 10px;
  font-size: 2.2rem;  
}
.plan-box .marble .txt{
  font-size: 1.4rem;  
}
.plan-box .marble .caption{
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-size: 1.2rem;  
}

.merit-box{
  padding: 85px 30px 0px;  
  background: #FFF;
}

.merit-box .plus1{
  margin-bottom: 30px;
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}

.merit-box .ceiling .txt-area{
  display: flex;
  justify-content: center;
  width: 1000px;
  margin: auto;
}
.merit-box .ceiling .txt-box{
  border: 1px solid #414762;
  text-align: center;
  padding: 5px;
  width: 30%;
  margin-right: 1%;
}

.merit-box .ceiling .txt-box .txt-small{
  font-size: 1.6rem;
}
.merit-box .ceiling .txt-lead{
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 10px;  
}
.merit-box .note{
    margin-top: 10px;
    text-align: center
}



/* equipment
-----------------------------------------------------------------*/
.equipment{
  position: relative;
  padding: 90px 0 120px;  
}
.equipment .inner > .txt-lead{
  margin-bottom: 85px;  
}
.equipment .cat:nth-child(n+2){
  margin-top: 90px;  
}
.equipment .cat h3{
  margin-bottom: 30px;
  text-align: center;  
}
.equipment .cat h3+.txt{
  margin-bottom: 40px;
  text-align: center;
  font-size: 2rem;
  letter-spacing:0.1em;
  color: #FFF;
  line-height:1.2;  
}
.equipment .item-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width:1200px;
  margin: 0 auto;
  color: #FFF;
}

.equipment .cat > .item-list > li{
  max-width: 287px;
  width: calc((100% - 24px) / 4);
}
.equipment .cat > .item-list > li.wide{
  max-width:590px;
  width: calc(50% - 8px);  
}
.equipment .item-list .pic{
  margin-bottom: 15px; 
}
.equipment .item-list h4{
  margin-bottom: 5px;
  font-size: 1.6rem;
  color: #F2BB3A;
  line-height:1.4;
  font-weight: 500;  
}
.equipment .item-list .txt{
  font-size: 1.4rem;
  line-height:1.5;  
}


/* cat01 */
/* .cat01 .item-list > li:nth-child(n+3){
  margin-top: 40px;  
} */
/* .cat01 .item-list > li:nth-child(2){
  padding-left: 2%; 
} */
/* .cat01 .item-list > li:nth-child(2) dl>div:nth-child(n+2){
  margin-top: 10px;
} */
.cat01 .item-list > li:nth-child(2) dl dt{
  font-size: 1.6rem;
  color: #F2BB3A; 
}
/* .cat01 .item-list > li:nth-child(2) dl .num{
  display: inline-block;
  transform: translateY(3px);
  vertical-align: middle;
  margin-right: 6px;  
} */
.cat01 .item-list > li:nth-child(2) dl dd{
  font-size: 1.4rem;  
}

/* cat02 */
.cat02 .lbox01{
  align-items: flex-end;
}
.cat02 .lbox01 .pic{
  width: 48.65%;
  flex-shrink: 0;
  margin: 0 15px 0 0;  
}
.equipment .cat > .item-list > li.three{
  max-width:384px;
  width: calc(50% - 8px);  
}


/* cat03 */
.equipment .cat03 h3+.txt{
  margin-bottom: 55px; 
}
.cat03 .item-list > li{
  position: relative;
}
.cat03 .item-list > li:nth-child(n+3){
  margin-top: 55px;  
}
.cat03 .item-list .ttl-sub{
  position: absolute;
  left: 0;
  top: -5px;
  transform: translateY(-100%);
  font-size: 2rem;
  color: #F2BB3A;   
}
.cat03 .layout-box .pic{
  width: 59.15%;
  flex-shrink: 0;
  margin: 0 15px 0 0;  
}
/* .cat03 .item-list h4{
  margin-top: -0.2em;
  font-size: 2.6rem;  
}
.cat03 .item-list h5{
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 500;  
} */
.equipment .item-list h4:nth-of-type(2){
  padding-top: 20px;
}

/* cat04 */
.cat04 .item-list .item-list li{
  width: calc(50% - 8px);
}
.cat04 .item-list .item-list li:nth-child(n+3){
  margin-top: 15px;  
}
.cat04 .item-list .item-list h4{
  margin: 5px 0 0;  
}




/* concierge
-----------------------------------------------------------------*/
.concierge{
  padding: 55px 0 35px;  
}
.concierge-box{
  display: flex;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  border:1px solid #FFF;
  background: rgba(255,255,255,.1);
}
.concierge-box .pic{
  width: 44.3%;
}
.concierge-box .txt-area{
  width: 55.7%;
  padding: 10px 3%;
  color: #FFF;  
}
.concierge-box h2{
  margin-bottom: 15px;
  font-size: 2.5rem;
  font-weight: 500;
}
.concierge-box h2+.txt{
  font-size: 1.4rem;
  line-height:1.6;
}
.concierge-box .txt-area dl{
  display: flex;
  justify-content:space-between;
  margin: 15px 0 10px;
  color: #E6AF3A;  
}
.concierge-box .txt-area dl dt{
  border-bottom: 1px solid #FFF;
  padding-bottom: 2px;
  margin-bottom: 5px;
  font-size: 1.5rem;  
}
.concierge-box .txt-area dl dd{
  font-size: 1.1rem;
}
.concierge-box .txt-area dl dd span{
  display: block;  
}
.concierge-box .txt-area dl > div:nth-child(1){
  width: 45%;
}
.concierge-box .txt-area dl > div:nth-child(2),
.concierge-box .txt-area dl > div:nth-child(3){
  width: 24.5%;
}
.concierge-box .txt-area dl > div:nth-child(1) dd{
  display: flex;
  flex-wrap:wrap;
  line-height:1.5;  
}
.concierge-box .txt-area dl > div:first-child dd span{
  width: 50%;  
}
.concierge-box .note{
  font-size: 1.1rem;  
}











/*アンカーリンク調整*/
.anchor{
    padding-top: 110px;
}









.page-ttl .page-hd div{
  max-width: 1550px;
}




/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .page-ttl{
    background-image:url(../image/bg_ttl_sp.jpg); 
  }

  .page-ttl .page-hd{
    bottom: 0;
  }

  .page-ttl .page-hd div{
    width: 70%;
  }
  #Page .page-ttl .page-hd h2{
    margin-bottom: 28px;
  }

  #Page .page-ttl .page-hd h2 img{
    height: auto;
  }


/*--------------------------------------------------------------------------
   Tab
---------------------------------------------------------------------------*/

.tab-nav{
  padding: 50px 0 0;		
}
.tab-nav ul{
  padding: 0 20px;
  justify-content:space-between;
}
.tab-nav ul li{
  width:calc(50% - 5px);
  margin: 0;
  font-size: 1.1rem;
}
.tab-nav ul li span{
  display: block;
  margin: 0;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/


/* intro
-----------------------------------------------------------------*/
  .intro{
    padding-bottom: 80px;  
  }
  .intro-box{
    padding: 100px 0 90px;
    background:url(../image/bg_intro_sp.jpg) no-repeat center center;
    background-size:cover;  
  }
  .intro .txt-lead{
    margin-bottom: 20px;
    font-size: 2.4rem;
    line-height:1.5;  
  }
  
  .intro::after, .equipment::after{
      width: 113px;
      height: 18px;
  }

/* view
-----------------------------------------------------------------*/
  .view{
    padding: 40px 0 0;
    width: 100%;  
  }
  .sec h2{
    margin-bottom: 20px;
  }
  #Page .sec h2 img{
    width: auto;
    height: 20px; 
  }
  .sec .txt-lead{
    font-size: 1.5rem; 
  }
  
  .view .view-position{
    margin: 25px 0 10px;
    font-size: 1.3rem;
  }
  .v-scroll{
    height: 300px;  
  }
  #Page .panoramixImg {
    width: auto;
    max-width: none;
    height: 100%;
  }
  .pano .controls a {
    width: 25px;
  }



/* plan
-----------------------------------------------------------------*/
  .plan{
    padding: 40px 0 0 /*50vw*/;
  }
  
  /*
  #tab1_bdy .plan{
    background:url(../image/bg_premium_b1_sp.jpg) no-repeat center bottom;
    background-size: 100% auto;  
  }
  
  #tab2_bdy .plan{
    background:url(../image/bg_premium_c_sp.jpg) no-repeat center bottom;
    background-size: 100% auto;  
  }
  
  #tab3_bdy .plan{
    background:url(../image/bg_premium_i1_sp.jpg) no-repeat center bottom;  
  }
  */
  
  

  .plan .inner{
    max-width: none;  
  }

  .plan h3.caution{
    font-size: 1.6rem;
    line-height:1.6; 
  }
  .sec .txt-lead{
    font-size: 2rem;
  }
  .sec .txt{
    font-size: 1.3rem;
    line-height:2; 
    text-align: center;
  }

  .plan-box{
    padding: 20px 20px 60px;  
  }
  .plan-box .plan-wrapper{
    display: block;
  }
  .plan-box .plan-wrapper .txt-area{
    width: 100%;
  }
  .plan-box .plan-wrapper .layout-hd{
    display: block;  
  }
  .plan-box .plan-wrapper .layout-hd h3{
    width: 100%;
    margin: 0 0 20px;  
  }
    
  .plan-box .txt-space{
    margin-bottom: 30px;
    font-size: 1.2rem;  
  }

  .plan-box .txt-spec{
    margin-bottom: 15px; 
  }
  .plan-box .feature{
    margin: 15px 0;  
  }
  .plan-box .feature span{
    margin: 0 5px 2px 0;
    padding: 2px 5px;
    font-size: 1rem;
  }
  .plan-box .txt-area h4{
    margin: 30px 0 20px;
    font-size: 1.8rem;
  }
  .plan-box .plan-wrapper .layout{
    width: 100%;  
  }
  .plan-box .plan-wrapper .layout .ico{
    margin-top: 20px;
}
  .plan-box .ceiling {
    display: block;
    margin-bottom: 10px;  
  }
  .plan-box .ceiling .txt-area{
    width: 100%;
    padding-right: 0;  
  }
  .plan-box .ceiling .txt-area .note{
      font-size: 1rem;
}
  .plan-box .ceiling .txt-lead{
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .plan-box .ceiling .txt-box .txt-small{
    font-size: 1.2rem;
  }
  .txt-big{
    font-size: 3rem;
  }
  .plan-box .ceiling .txt{
    margin-bottom: 20px;
    font-size: 1.3rem;
  }
  .plan-box .ceiling .pic{
    width: 90%;
    margin: 0 auto;  
  }
  .plan-box .marble{
    padding: 20px 15px;
    background:url(../image/bg_marble_sp.jpg) no-repeat center center;
    background-size:cover;
  }
  .plan-box .marble h4{
    margin: 0 0 10px;
    font-size: 1.8rem;  
  }
  .plan-box .marble .txt{
    font-size: 1.3rem;  
  }
  .plan-box .marble .caption{
    position: absolute;
    right: 5px;
    bottom: 3px;
    font-size: 1rem;  
  }
    
  .merit-box {
    padding: 20px 30px 0px;
}  
  .merit-box .plus1{
    margin: 0px 0 20px;
    font-size: 1.8rem;
  }
  .merit-box .ceiling .txt-area{
  display:block;
  width: 100%
    
    }
.merit-box .ceiling .txt-box{
  padding: 5px;
  width: 100%;
  margin-bottom: 10px
}

.merit-box .ceiling .txt-box .txt-small{
  font-size: 1.2rem;
}
.merit-box .ceiling .txt-lead{
  font-size: 1.5rem;
  line-height: 1.2;
}
.merit-box .note{
  font-size: 1rem;
  text-align: left;
}



/* equipment
-----------------------------------------------------------------*/
  .equipment{
    padding: 40px 0 60px;  
  }
  .equipment .inner > .txt-lead{
    margin-bottom: 30px;  
  }
  .equipment .cat:nth-child(n+2){
    margin-top: 50px;  
  }
  .equipment .cat h3{
    margin-bottom: 10px;
    text-align: center;  
  }
  #Page  .equipment .cat h3 img{
    width: auto;
    height: 12px; 
  }
  .equipment .cat h3+.txt{
    margin-bottom: 30px;
    font-size: 1.4rem;
    line-height:1.6;  
  }
  .equipment .cat > .item-list > li{
    max-width: none;
    width: calc(50% - 5px);
  }
  .equipment .cat > .item-list > li.wide{
    max-width:none;
    width: 100%;  
  }
   /* .equipment .cat > .item-list > li:nth-child(n+2){
      margin-top: 30px; 
   }   */
  .equipment .item-list h4{
    margin-bottom: 8px;
    font-size: 1.4rem;
    line-height:1.5;  
  }
  .equipment .item-list .txt{
    font-size: 1.2rem;
    line-height:1.5;  
  }


/* cat01 */
  .cat01 .item-list > li:nth-child(n+3){
    margin-top: 30px;  
  }
  .cat01 .item-list > li:nth-child(2){
    padding-left: 0; 
  }
  .cat01 .item-list > li:nth-child(2) dl dt{
    margin-bottom: 3px;
    font-size: 1.4rem;
  }
  .cat01 .item-list > li:nth-child(2) dl .num{
    transform: translateY(2px); 
  }
  .cat01 .item-list > li:nth-child(2) dl dd{
    font-size: 1.2rem;  
  }

/* cat02 */
.cat02 .item-list > li:nth-child(n+3){
  margin-top: 30px;  
}

/* cat03 */
  .equipment .cat03 h3+.txt{
    margin-bottom: 45px; 
  }
  .cat03 .item-list > li:nth-child(n+2){
    margin-top: 30px;  
  }
  .equipment .item-list h4:nth-of-type(2){
    padding-top: 10px;
  }
  .cat03 .item-list .ttl-sub{
    font-size: 1.5rem;   
  }
  .cat03 .layout-box .pic{
    width: 40%;
    flex-shrink: 0;
    margin: 0 10px 0 0;  
  }
  .cat03 .item-list h4{
    font-size: 1.5rem; 
    line-height: 1.2; 
  }
  .cat03 .item-list h5{
    font-size: 1.3rem;
    margin-bottom: 5px;  
  }
  .cat03 .waterflow{
    width: 40%;
    margin: 10px 0 0; 
  }

/* cat04 */
  .cat04 .item-list .item-list li{
    width: calc(50% - 5px);
  }
  .cat04 .item-list > li:nth-child(n+3){
    margin-top: 30px;  
  }



/* concierge
-----------------------------------------------------------------*/
  .concierge{
    padding: 40px 0 20px;  
  }
  .concierge-box{
    display: block;
  }
  .concierge-box .pic{
    width: 100%;
  }
  .concierge-box .txt-area{
    width: 100%;
    padding: 15px;
  }
  .concierge-box h2{
    margin-bottom: 10px;
    font-size: 1.8rem;
  }
  .concierge-box h2+.txt{
    font-size: 1.3rem;
  }
  .concierge-box .txt-area dl{
    flex-wrap:wrap;
    margin: 15px 0;  
  }
  .concierge-box .txt-area dl dt{
    border-bottom: 1px solid #FFF;
    padding-bottom: 2px;
    margin-bottom: 5px;
    font-size: 1.4rem;  
  }
  .concierge-box .txt-area dl dd span{
    display: block;  
  }
  .concierge-box .txt-area dl > div:nth-child(1){
    width: 100%;
    margin-bottom: 15px;
  }
  .concierge-box .txt-area dl > div:nth-child(2),
  .concierge-box .txt-area dl > div:nth-child(3){
    width: calc(50% - 7px);
  }
  .concierge-box .txt-area dl > div:nth-child(1) dd{
    display: flex;
    flex-wrap:wrap;
    line-height:1.5;  
  }
  .concierge-box .txt-area dl > div:first-child dd span{
    width: 50%;  
  }
  .concierge-box .note{
    font-size: 1rem;  
  }


    /*アンカーリンク調整*/
.anchor{
    padding-top:60px;
    margin-top: -100px;
}

.space{
    display: block;
    height: 60px
        
    }

}