@charset "utf-8";
@media screen and (max-width: 1200px) {
 /*--------------------
  main-img
 -------------------*/
  .Column4_1 {
   flex: 0 0 20%;
   max-width: 20%;
  }
  .Column4_3{
   flex: 0 0 80%;
   max-width: 80%;
  }
 .catch-copy {
  /*letter-spacing: 12px;*/
 }
 .side-nav p.phone {
  margin-top: 12%;
 }
 .side-nav h1 {
  margin: 40px auto 60px;
 }
 .side-nav p.phone {
  margin: 20px;
 }
 .side-nav nav li {
  line-height: 1;
  margin-bottom: 28px;
 }
 .translation-btn {
  padding: 12px;
 }
 .header-logo {
  margin: auto 0 auto 40px;
 }
 /*------------------
  #MESSAGE
 ------------------*/
 #MESSAGE h2 {
  margin-top: 140px;
 }
 #MESSAGE p{
  padding: 0 120px;
 }
 #MESSAGE p, #BELIFE p {
    font-size: 20px;
 }
 /*------------------
  #BELIFE
 -------------------*/
 #BELIFE .Column2 {
  padding: 60px 80px 140px 80px;
 }
 #BELIFE .Column2.belife-img {
  padding: 180px 0 140px 80px;
 }
 #BELIFE .section-title p.sub-title {
 margin-bottom: 80px;
 }
}
@media screen and (max-width: 1024px) {
 /* 1024pxまでの幅の場合に適応される */
/*----- 共通 -----*/
 .catch-copy {
  right: 4%;
  /*letter-spacing: 14px;*/
 }
 p {
 font-size: 20px;
 }
/*----- header -----*/
 .main-img h2 {
  font-size: 22px;
 }
 /* side-nav */
 .side-nav h1 {
  width: 90px;
 }
 nav li a {
  font-size: 16px;
 }
.side-nav span {
  font-size: 14px;
 }
 p.phone {
  font-size: 16px;
 }
 /* header-nav */
 .header-nav {
  padding: 16px 40px;
 }
 .header-nav .nav-menu {
  margin: 0 0 0 22px;
 }
 /* side-nav */
 .side-nav h1 {
  margin: 40px auto 40px;
 }
 .side-nav nav li {
  line-height: 1;
  margin-bottom: 18px;
 }
 /*--------------------
  #MESSAGE 
 --------------------*/
 #MESSAGE .ornate {
  width: 40%;
  bottom: 70px;
  left: 90px;
 }
 #MESSAGE .section-title {
  margin-top: 0;
 }
 /*--------------------
  #BELIFE 
 --------------------*/
 #BELIFE .Column2 {
  flex: 0 0 100%;
  max-width: 100%;
 }
 #BELIFE .Column2.belife-img {
  padding: 140px 160px 140px;
 }
 #BELIFE .catch-copy {
  top: 10%;
  right: 20%;
 }
 #BELIFE .Column2 {
  padding: 0 140px 140px;
 }
 /*--------------------
  #MENU
 --------------------*/
 .menu-item .Column3 {
  padding: 20px 40px;
 }
 /*--------------------
  #ACCESS
 --------------------*/
 #ACCESS table {
  font-size: 20px;
 }
 /*--------------------
  #RESERVE
 --------------------*/ 
 #RESERVE .Column2:last-child {
  padding: 0 60px;
 }
 #RESERVE .row .Column2 img:first-child {
  margin-bottom: 80px;
 }
 p.btn-info {
 margin:  10px 0 40px;
 }
 p.btn-info:last-child {
  margin: 10px 0 0;
 } 
}
/* iPad向け 768pxまでの幅の場合に適応される */
@media screen and (max-width: 968px) {
 /*----- none -----*/
 .pc-onry, .s-phone-onry {
  display: none;
 }
 .ipad-none {
  display: none;
 }
 .sp-onry {
  display: block;
 }
 .ipad-onry {
  display: block;
 }
 /*-----  header -----*/
 .catch-copy {
  z-index: 90;
 }
 /* ハンバーガー */
 h1 img {
  width: 35%;
 }
 nav li a {
  font-size: 18px;
 }
 /* hamburger */
 #nav-drawer {
  position: relative;
  padding: 5px 20px 10px;
 }
 .nav-unshown {
  display: none;
 }
 #nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
 }
 #nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px; /*線の太さ*/
  width: 30px; /*長さ*/
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
 }
 #nav-open span:before {
  bottom: -8px;
 }
 #nav-open span:after {
  bottom: -16px;
 }
 #nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
 }
 #nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 230px;
  height: 100%;
  background: url("../img/bg-black.jpg");
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
  padding: 40px 0 0 30px;
 }
 #nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
 }
 #nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, .20);
 }
 .header-logo-menu {
  display: flex;
  display: -moz-flex;
  display: -o-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-direction: row;
  -moz-flex-direction: row;
  -o-flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  background: url("../img/bg-black.jpg");
  height: 80px;
  padding: 20px;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
 }
 .header-logo-menu .logo-erea img {
  width: 20%;
  height: auto;
  margin-right: 50px;
 }
 .logo-erea {
  width: 100%;
  text-align: center;
  margin: 0;
 }
 ul.SmNav li {
  line-height: 1.2;
  margin-bottom: 40px;
 }
 ul.SmNav a {
  font-size: 20px;
  color: #fff;
 }
 ul.SmNav span {
  color: #aaa;
  font-size: 16px;
  letter-spacing: 1px;
 }
 ul.SmNav .phone{
  color: #A49256;
 }
 .sticky-wrapper {
  display: none;
 }
 .translation-btn {
  margin: 0;
  width: 160px;
 }
 .logo-erea .navber-translation-btn {
  position: absolute;
  right: 20px;
  color: #a49256;
  border: solid 1px #a49256;
  padding: 10px 20px;
  font-size: 16px;
 }
 .side-nav {
  font-size: 18px;
 }
 /*----- Column -----*/
 .Column4_3 {
  flex: 100%;
  max-width: 100%;
  padding: 0;
  position: relative;
  }

 /*----- footer -----*/
 footer img {
  width: 15%;
 }
 footer .translation-btn {
  margin: auto;
 }
 /*--------------------
  section-title
 --------------------*/
 .section-title p.sub-title {
  margin-bottom: 80px;
 }
 /*--------------------
  main-img
 --------------------*/
 .catch-copy {
    top: 120px;
    /*right: 670px;*/
  max-width: 110px;
 }
 /*--------------------
  #MESSAGE
 --------------------*/
 #MESSAGE .ornate {
  bottom: 60px;
  left: 90px;
  width: 40%;
 }
 #MESSAGE p {
  padding: 0 90px 40px;
 }
 #MESSAGE .section-title p{
  padding: 0;
 }
 #MESSAGE .sp-onry{
  display: none;
 }
/* #MESSAGE .section-title p.sub-title {
  margin-bottom: 100px;
 }*/
 /*--------------------
  #BELIFE
 --------------------*/
 #BELIFE .Column2.belife-img {
  padding: 140px;
 }
#BELIFE .catch-copy {
    right: 74%;
}
 /*--------------------
  #MENU
 --------------------*/
 .menu-item.row {
  padding: 0 40px;
 }
 .menu-item .Column3 {
  padding: 20px;
 }
 #MENU .container {
  background-size: 34%;
  background-position: 10% 13%, 85% 95%;
 }
 /*---------------------
  #ACCESS
 --------------------*/
 #ACCESS table {
  font-size: 21px;
 }
 /*---------------------
  #RESERVE
 --------------------*/
 #RESERVE .Column2:first-child {
  flex: 60%;
  max-width: 60%;
  padding: 0;
 }
 #RESERVE .Column2:last-child {
  flex: 40%;
  max-width: 40%;
  padding: 0 40px 0 0;
 }
 #RESERVE .Column2:last-child .ipad-onry {
  margin-top: 40px;
 }
 .ornate-box .ornate {
  width: 40%;
  left: 15%;
 }
 p.btn-info {
  font-size: 17px;
  line-height: 1.7;
 }
}
 @media screen and (max-width: 480px) {
 /* 350pxまでの幅の場合に適応される */
 /*---------------------
  共通
 ---------------------*/
 /* header */
 .header-logo-menu {
  height: 70px;
  padding: 16px 0;
 }
 .header-logo-menu .logo-erea img {
  width: 50%;
 }
 .logo-erea i {
  color: #a49256;
  font-size: 24px;
  padding: 10px 0;
 }
 /* hamburger */
 ul.SmNav a {
  font-size: 18px;
 }
 .navber-translation-btn {
  display: none;
 }
 /* text */
 .section-title h2 {
  font-size: 32px;
 }
 p {
  font-size: 16px;
  letter-spacing: 1.5px;
 }
 .catch-copy {
  letter-spacing: 7px;
  padding: 24px 18px;
  max-width: 100px;
  top: 40%;
 }
 /* footer */
 footer img {
  width: 30%;
 }
 footer .nav-menu .row {
  display: inline;
 }
 footer .nav-menu li {
  padding: 0 20px 40px;
 }
 footer .nav-menu li:last-child {
  padding: 0 20px;
 }
 /* ToTOP */
 #ToTOP {
  width: 60px;
 }
 /*--------------------
  main-img
 --------------------*/
 .slider {
  height: 90vh;
 }
 .main-img h2 {
  font-size: 18px;
  top: 20px;
  /*right: 20px;*/
  /*height: 420px;*/
 }
 /*--------------------
  language
 --------------------*/
.language {
  position: absolute;
  bottom: 20px;
  left: 5%;
}

 /*--------------------
  #MESSAGE
 --------------------*/
 #MESSAGE .sp-none {
  display: none;
 }
 #MESSAGE .sp-onry {
  display: block;
 }
 #MESSAGE .ornate {
  bottom: 40px;
  left: 20px;
  width: 60%;
 }
 .message-img {
  padding: 0 8%;
 }
 #MESSAGE p {
  padding: 0 40px 60px;
 }
 #MESSAGE p, #BELIFE p {
  font-size: 16px;
 }
 .naname .sp-none {
  display: none;
 }
 /*---------------------
 #BELIFE
 ---------------------*/
 #BELIFE .Column2.belife-img {
  padding: 140px 40px;
 }
 #BELIFE .Column2 {
  padding: 0 40px 140px;
 }
 #BELIFE .catch-copy {
  top: -80px;
  right: 290px;
  font-size: 18px;
  letter-spacing: 8px;
 }
 /*--------------------
  #MENU
 ---------------------*/
 #MENU {
  padding: 140px 0 0;
 }
 .menu-item.row {
  padding: 0;
 }
 #MENU .Column3{
  flex: 50%;
  max-width: 50%;
 }
 .menu-item .Column3 {
  padding: 14px;
 }
 #MENU .container {
  padding-bottom: 140px;
 }
 #MENU .container {
  background-size: 50%;
  background-position: 15% 7%, 95% 95%;
 }
 #MENU p {
  font-size: 16px;
 }
 /*--------------------
  #ACCESS
 --------------------*/
 #ACCESS th, #ACCESS td {
  display: flex;
  width: 100%;
  padding: 0 40px;
  font-size: 16px;
  letter-spacing: 2px;
 }
 #ACCESS td {
  padding-bottom: 40px;
 }
 /*--------------------
  #RESERVE
 --------------------*/
 #RESERVE .Column2:first-child, #RESERVE .Column2:last-child {
  flex: 0 0 100%;
  max-width: 100%;
 }
 #RESERVE {
  padding: 140px 0;
 }
 #RESERVE .sp-none {
  display: none;
 }
 p.btn-info:last-child {
  margin: 10px 0 80px 0;
 }
 #RESERVE .Column2:last-child {
  padding: 0 40px 0;
 }
 #RESERVE .row .Column2 img:first-child {
  margin-bottom: 40px;
 }
 p.btn-info {
  font-size: 16px;
 }

/*--------------------
  20220908追加--Google翻訳後用--
 --------------------*/
.header-fix {
  height: 70px;
  width:100%;
  position: fixed;
  z-index: 100;
}
.header-logo-menu {
  position: sticky;
}
#nav-content {
  position: absolute;
  width: 100%;
  height: 100vh;
}
#nav-drawer {
  position: unset;
}
.main-img .Column4_3 {
    margin-top: 70px;
}
}


@media screen and (max-width: 380px) {
 .main-img h2 {
  top: 20px;
  /*right: 250px;*/
 }
 .catch-copy {
  letter-spacing: 3px;
 }
 #BELIFE .catch-copy {
  top: 40px;
  right: 250px;
 }
 #BELIFE .Column2.belife-img {
  padding: 220px 40px 140px;
 }
}