@media (min-width:751px){

html {
font-size: 0.625vw;
}
@media (max-width:1600px){
html {
font-size: 10px;
}
}
@media (max-width:1050px){
html {
font-size: 0.9523vw;
}
}


a {
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

#container{min-width: 105rem;}

.section .inner{
  padding-left: 2.5rem;padding-right: 2.5rem; 
}
.home .section1,
.home .section1 .inner{height: 100vh; max-height: 80vw; min-height: 78rem}

.home .section1 h1.logo{width: 78rem; max-width: 52vw;
  z-index: 10; position:relative;
}
.home .section1 .copy{position:absolute; top: 50%; transform:translateY(-100%);}

.home .col1 h2 .copy1{font-size: 1.8rem}
.home .col1 h2 .copy2{font-size: 2.6rem; margin-top: .3em;}

.home .section1 .image {width: 100%; height: calc(100% - 7rem); margin-top: 3.5rem}
.home .section1 .image img{width: 100%; height:100%; object-fit:cover }

.home .section1 .col1{padding-left:3.8rem; position:relative  }
.home .section1 .col3{ position:relative }
.home .section1 .col1 .copy1{white-space:nowrap }
.home .section1 .col1 .newsletter{position:absolute; bottom: 9rem; }
.home .section1 .concept{position:absolute; bottom: 9rem; padding:0 2.5rem}
.home .section1 .concept h2{font-size:3rem ;margin-bottom: .5em;}

.home .concept h2::before {
width: 1.2em;
border-top: .3rem solid;
margin-bottom: 1.2em;
}

.home .section1 .col1 .blc-form [id^=formbox_screen_subscribe_] {
min-width: 26rem;
}

.home .section2{padding-top: 8.6rem;}
.home .section3{padding-top: 12rem;}
.home .section4{padding-top: 16rem; padding-bottom: 8rem}

.home #info .box-info{
  margin-left: auto;
  min-width: 50%; display: table;
}

.home #info table{margin-top: 6rem;}
.home #info table th{padding-right:3.6em }
.home #info table tr th,
.home #info table tr td{padding-bottom:.5em }
.home #info table tr:first-child th,
.home #info table tr:first-child td{padding-bottom:1.8em }

.home #info .image-info{
  position:absolute;
}
.home #info .image-info img{
  width: 100%;
}

.home #room .plan h2,
.home #room .plan .box-plan{
  width: 85% ;
  min-width: 62rem;
  margin:0 auto;
}
.home #room .plan .box-plan img{
  width: 100% ;
}
.home #room .plan .plan1,
.home #room .plan .plan2{width: 47.5%}


.home #room .spec{align-content:flex-end; margin-bottom:1.5rem}
.home .spec .spec-icon .icon {
width: 9.4rem;
}


.home #photo .splide{
  width: 65%;
  margin-left: 2.5rem;
}
.home #photo .splide__track {
  overflow: visible; 
}
.home #photo .splide:after{
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #F7F3E9;
opacity: .8;
position: absolute;
left: calc(100% + 2rem);
top: 0;
pointer-events: none;
}
.home #photo .splide__pagination {
left: 0;
}


/*btn-reserve*/

.btn-reserve{
  top: auto; bottom:5rem; left: 5rem;
}
.btn-reserve a{
  padding: 0;
  border-radius: 50%;
  text-align:left;
  width: 16rem; height: 16rem;
  display:flex;
  flex-direction:column;
  align-items:center; justify-content:center;
  transition: background-color 0.3s;
}
.btn-reserve a:hover{
  opacity:1; background-color:#D83F2D;
}
.btn-reserve a .title{
  font-size: 2.6rem;margin-top: .3em;
}
.btn-reserve a .title+p{
  font-size: 1.6rem; margin-top: .1em;
}

/*footer*/


footer{padding: 9rem 0 12rem;}
.footer-inner{
  padding-left: 2.5rem;padding-right: 2.5rem; 
}
footer .col1,
footer .col2,
footer .col3{padding-left:3.8rem }

footer .logo {margin-top: .6rem;}
footer .logo img{width:36rem; max-width: 95% }
footer .instagram img{width:3rem;}
footer .instagram {margin-top: 3.8rem; margin-left: 1rem}
footer .footer-link ul{ display:flex;  }
footer .footer-link li{ margin-right: 2em}
footer .footer-info {margin-top: 5rem}
footer .footer-info table{font-size: 1.2rem;}
footer .footer-info th{padding: 0 1em 1em 0;color: #9DA698;font-size:.8em;}
footer .copyright {font-size:.8em;margin-top: 18rem}

footer .newsletter-close{display:none}

/*newsletter*/
.newsletter .newsletter-input{
  margin-top: .4rem; 
}
.blc-form [id^=formbox_screen_subscribe_] {
  width: 75%; min-width: 28rem;
}

/*page*/
.page h1 {
font-size: 4rem;
}
.page .page-link.en2{padding: 3em 0 0;}


/*other*/
.flex {
  display: flex;
}

.flex1 {
  align-items: center;
}

.flex2 {
  flex-direction: row-reverse;
}

.flex3 {
  justify-content: space-between;
}

.col-1{width: 32%; }
.col-2{width: 66%; }
.col-1l{width: 33.33%; }


a .up {
  transition: 0.3s;
  transform: translateY(0);
}

a .up:hover {
  transform: translateY(-3px);
}


.w100 {
  max-width: 100%;
}

.ib{display:inline-block;}

.pc {
  display: block !important;
}

.pc2 {
  display: inline-block !important;
}

.sp {
  display: none !important;
}

.sp2 {
  display: none !important;
}

.sss {
  font-size: 0.7em;
}

.ss {
  font-size: 0.87em;
}

.lll {
  font-size: 1.2em;
}

.ll {
  font-size: 1.1em;
}

.tc {
  text-align: center;
}

.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

}