@charset "utf-8";
/* CSS Document */

/* ページ全体共通 */
body {
  display: none;
  font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
  font-size: 12px;
  color: #16121a;
  line-height: 2;
  font-weight: 600;
}

.button {
  width: 120px;
  height: 40px;
  margin: 0 auto;
  border: 1px solid #aa8d3e;
}

.button a {
  display: block;/*文字部分以外にもリンクが及ぶようにするため*/
  width: 120px;/*文字部分以外にもリンクが及ぶようにするため*/
  height: 40px;/*文字部分以外にもリンクが及ぶようにするため*/
  line-height: 40px;/*ボタン中央に文字が配置されるようにするため*/
  text-decoration: none;
  font-size: 18px;
  color: #aa8d3e;
  transition: .3s;
}

.button a:hover {
  color: #fff;
  background: rgba(170, 141, 62, .7);
}

/* header */
header {
  position: fixed;
  top:0;
  width: 100%;
  background: rgba(255, 255, 255, .95);
  border-top: 6px solid #aa8d3e;
  z-index: 4;/*keyvisualのslider,spaseの写真より重なり順を上に*/
}

.headerlogo-container, .navitop-container {
  width: 96%;
  margin: 0 auto;
  line-height: 0;
}

.headerlogo-container a {
  transition: .3s;
}

.headerlogo-container a:hover {
  opacity: .7;
}

.headerlogo-container img, #navi_sp  img {
  height: 34px;
  margin: 15px 0;
}

/* navi */
#open_navi, #close_navi {
  float: right;
  font-size: 24px;
  margin: 20px 0;
  color: #aa8d3e;
  cursor: pointer;
  transition: .3s;
}

#open_navi:hover, #close_navi:hover {
  opacity: .7;
}

#navi_sp {
  /* display: none; */
  position: fixed;
  top: 0;
  left: 0;/*初期値はautoなので0指定で打ち消す*/
  right: 0;/*初期値はautoなので0指定で打ち消す*/
  height: 100Vh;
  border-top: 6px solid #aa8d3e;
  background: #27202e;
  opacity: .95;
  transform: translateY(-200%);/*-100%では縦に小さい画面にするとnaviがはみ出して表示されてしまうため*/
  transition: all 1.2s;
}

#navi_sp.shown {
  /* display: block; */
  transform: translateY(0%);
}

.navibottom-container {
  text-align: center;
}

#navi_sp li {
  width: 100%;
  height: 48px;
  font-size: 14px;
  border-top: 1px solid #fff;
}

#navi_sp li:last-child {
  border-bottom: 1px solid #fff;
}

#navi_sp ul a {
  display: block;/*文字部分にもリンクが及ぶようにするため*/
  width: 100%;/*文字部分にもリンクが及ぶようにするため*/
  height: 48px;/*文字部分にもリンクが及ぶようにするため*/
  line-height: 48px;/*ボタン中央に文字が配置されるようにするため*/
  text-decoration: none;
  color: #fff;
  transition: .3s;
}

#navi_sp ul a:hover {
  opacity: 0.5;
}

.call-to-action {
  font-size: 0;
}

#navi_sp .button {
  display: inline-block;
  height: 40px;
  margin-top: 17px;
  font-size: 14px;
}

#navi_sp .button a {
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  background: #aa8d3e;
  color: #fff;
}

#navi_sp .button a:hover {
  background: rgba(0, 0, 0, .7);
  color: #aa8d3e;
}

#navi_sp .contactbutton {
  margin-right: 28px
}

#navi_sp .onlinebutton {
  width: 268px;
}

#navi_sp .onlinebutton a {
  width: 268px;
}

#navi_sp #sns_twitter, #navi_sp #sns_facebook {
  margin-top: 34px;
}

#navi_pc {
  display: none;
}

/* keyvisual */
.keyvisual1, .keyvisual2, .keyvisual3 {
  width: 100%;
  height: 340px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid #aa8d3e;
}

.keyvisual1 {
  background-image: url(../img/photo/keyvisual1.jpg);
}

.keyvisual2 {
  background-image: url(../img/photo/keyvisual2.jpg);
}

.keyvisual3 {
  background-image: url(../img/photo/keyvisual3.jpg);
}

#slider {
  margin-top:70px;
  z-index: 3;
}

#slider .slick-slide{
  margin-right: 6px;
}

/* 各メインコンテンツ共通 */
#menu, #space, #plan {
  padding-bottom: 70px;
  text-align: center;
}

#about, #topics, #information {
  padding: 70px 0;
  text-align: center;
}

#access {
  padding: 40px 0;
  text-align: center;
}

.about-container, .topic-container, .access-container, .information-container {
  width: 96%;
  margin: 0 auto;
}

.menu-text, .space-text, .plan-text {
  width: 96%;
  margin: 0 auto;
}

#menu p, #space p, #plan p, #topics p, #access p, #information p {
  margin-bottom: 26px;
}

.sp-photo {
  width: 100%;
  margin-bottom: 40px;
}

.title {
  display: block;/*画像下の隙間を消す*/
  margin: 0 auto;
  margin-bottom: 26px;
}

.sns-twitter, .sns-facebook {
  display: inline;
  font-size: 24px;
}

.sns-twitter {
  margin-right: 24px;
}

.sns-twitter a, .sns-facebook a {
 color: #fff;
 transition: .3s;
}

.sns-twitter a:hover, .sns-facebook a:hover {
 opacity: 0.5;
}

/* about */
#about {
  background: #fff;
}

/* menu */
#menu {
  background-image: url(../img/background/bg_menu.jpg);
  color: #fff;
}

/* space */
#space {
  background-image: url(../img/background/bg_space.jpg);
}

/* plan */
#plan {
  background-image: url(../img/background/bg_plan.jpg);
  color: #fff;
}
/* topics */
#topics {
  background: #fff;
}

.topic {
  border-top: 1px solid #aa8d3e;
  padding: 26px 0 30px 0;
}

.topic:last-child {
  padding: 26px 0 0 0;/*topic最後だけ下padding30pxをなしに*/
}

.topic time {
  font-size: 10px;
  color: #808080;
}

.topic h1 {
  font-size: 14px;
  margin-bottom: 26px;
}

.topic p {
  text-align: left;
}

/* access */
#access {
  background: #27202e;
  color: #fff;
}

#access .map {
  width: 100%;
}

/* information */
#information {
  background: #fff;
}

#information a {
  text-decoration: none;
  color: inherit;
}

#information a:hover {
  text-decoration: underline;
}

/* bottom-menu */
#bottom-menu {
  background: #fff;
  text-align: center;
}

#bottom-menu li {
  width: 100%;
  height: 48px;
  border-top: 1px solid #27202e;
}

#bottom-menu li:last-child {
  border-bottom: 1px solid #27202e;
}

#bottom-menu a {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-decoration: none;
  color: #16121a;/*他のフォントと同じ*/
  font-size: 14px;
  transition: .3s;
}/* naviと同じ */

#bottom-menu a:hover {
  color: #fff;
  background: #27202e;
}

/* footer */
footer {
  border-bottom: 6px solid #aa8d3e;
  text-align: center;
}

footer a {
  color: inherit;
  transition: .3s;
}

footer a:hover {
  opacity: 0.5;
}

#return_top {
  font-size: 24px;
  padding: 20px 0 10px;
  color: #16121a;
}

footer p {
  line-height: 1;
  padding-bottom: 10px;
  color: #808080;
}

/* 大画面の場合の表示*/

@media (min-width: 550px){

  .header-container, .menu-container, .space-container, .plan-container,.topics-container, .access-information-container2 {
    max-width: 960px;
    min-width: 700px;
    margin: 0 auto;
  }

  #open_navi, .navitop-container, .sp-only, .sp-photo {
    display: none;
  }

  #navi .sns-twitter, #navi .sns-facebook {
    display: none;
  }

  header {
    height: 104px;
  }

  .headerlogo-container {
    margin: 0 0 0 2%;
  }

  .headerlogo-container img {
    width: 34%;
    max-width: 320px;
    min-width: 260px;
    height: auto;
    position: absolute;
    bottom: 0;
    margin: 0 0 14px 0;
  }

  #navi_pc {
    display: block;
    position: relative;
    float: right;
    width: 62%; /*66%*/
    height: 104px;
    border: none;/*消す*/
    background: none;/*消す*/
    margin: 0 2% 0 0;
    transform: translateY(0);
    transition: all 0s;
  }

  .navibottom-container {
    height: 104px;
  }

  #navi_pc ul {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 0 14px 0;
    display: flex;
    justify-content: center;
  }

  #navi_pc li {
    display: inline-block;
    width: 100%;
    height: 10px;
    /* border-top: none; */
    margin-left: 10px;
    font-size: 14px;
  }

  /* #navi_pc li:last-child {
    display: none;
    border-bottom: none;
  } */

  #navi_pc ul a {
    display: block;
    width: 100%;
    height: 10px;
    line-height: 10px;
    text-decoration: none;
    color: #333;
    transition: .3s;
  }

  #navi_pc ul a:hover {
    opacity: 0.5;
  }

  .call-to-action {
    position: absolute;
    bottom: 44px;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  #navi_pc .button {
    display: inline-block;
    width: 25%;
    height: 40px;
    max-width: 120px;
    margin: 0;/*消す?*/
    border: 1px solid #aa8d3e;
    font-size: 14px;
  }

  #navi_pc .button a {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    background: none;/*消す*/
    color: #aa8d3e;
  }

  #navi_pc .button a:hover {
    background: rgba(170, 141, 62, .7);
    color: #fff;
  }

  #navi_pc .contactbutton {
    margin-right: 5px;
  }

  #navi_pc .reservebutton{
    margin-right: 5px;
  }

  #navi_pc .onlinebutton {
    width: 35%;
    max-width: 170px;
  }

  #navi_pc .onlinebutton a {
    width: 100%;
  }

  #navi_sp, #navi_sp.shown {
    display: none;
  }

  /* keyvisual */
  .keyvisual1, .keyvisual2, .keyvisual3 {
    width: 100%;
    /* height: 480px; */
    height: 520px;
  }

  #slider {
    margin-top:110px;
  }

  #navi_pc #sns_twitter, #navi_pc #sns_facebook {
    margin-top: 34px;
  }

  #navi_sp {
    display: none;
  }

  /* about */

  /* menu */
  #menu {
    padding: 0;
  }

  .menu-container {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .menu-photo {
    width: 56%;
    display: flex;
  }

  .menu-text {
    width: 44%;
    padding: 0 12px;
  }

  #menuphoto1, #menuphoto2, #menuphoto3 {
    width: 33%;
    height: 440px;
    background-repeat:no-repeat;
    background-position: 50% 50%;
  }

  #menuphoto1 {
    background-image: url(../img/photo/menu1.jpg);
    margin-right: 3px;
    opacity : 0;
    transform: translateX(-20px);
    transition: all 1s;
  }

  #menuphoto2 {
    background-image: url(../img/photo/menu2.jpg);
    margin-right: 3px;
    opacity : 0;
    transform: translateX(-20px);
    transition: all 1s;
    transition-delay: .5s;
  }

  #menuphoto3 {
    background-image: url(../img/photo/menu3.jpg);
    opacity : 0;
    transform: translateX(-20px);
    transition: all 1s;
    transition-delay: 1s;
  }

  /* space */
  #space {
    padding: 70px 0;
  }

  .space-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }

  .space-photo {
    width: 56%;
    height: 400px;
    position: relative;
    /* border: 1px solid #000; */
  }

  #spacephoto1 {
    width: 90.7%;
    height: 320px;
    position: absolute;
    bottom:0;
    left: 0;
    background-image: url(../img/photo/space1.jpg);
    background-repeat:no-repeat;
    background-position: 50% 50%;
    z-index: 1;/*spaseの写真より重なり順を下に*/
    opacity : 0;
    transform: translateY(20px);
    transition: all 1s;
    transition-delay: .5s;
  }

  #spacephoto2 {
    width: 55.76%;
    max-width: ;
    height: 186px;
    position: absolute;
    top:0;
    right: 0;
    background-image: url(../img/photo/space2.jpg);
    background-repeat:no-repeat;
    background-position: 50% 50%;
    border: 1px solid #fff;
    z-index: 2;/*spaseの写真より重なり順を下に*/
    opacity : 0;
    transform: translateY(20px);
    transition: all 1s;
  }

  .space-text {
    width: 44%;
    padding: 0 12px;
  }

  /* plan */
  #plan {
    padding: 40px 0;
  }

  .plan-photo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 26px;
  }

  #planphoto1, #planphoto2, #planphoto3 {
    width: 32%;
    height: 220px;
    background-repeat:no-repeat;
    background-position: 50% 50%;
  }

  #planphoto1 {
    margin-right: 3px;
    background-image: url(../img/photo/plan1.jpg);
    opacity : 0;
    transform: translateX(-20px);
    transition: all 1s;
  }

  #planphoto2 {
    margin-right: 3px;
    background-image: url(../img/photo/plan2.jpg);
    opacity : 0;
    transform: translateX(-20px);
    transition: all 1s;
    transition-delay: .5s;
  }

  #planphoto3 {
    background-image: url(../img/photo/plan3.jpg);
    opacity : 0;
    transform: translateX(-20px);
    transition: all 1s;
    transition-delay: 1s;
  }

  /* topics */
  .topics-container {
   width: 96%;
 }

 .topic-container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   /* align-items: center; */
 }

 .topic {
   width: 30%;
   border-bottom: 1px solid #aa8d3e;
   padding: 26px 0;
 }

 .topic h1 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .topic p {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
 }
/* access,information */
 .access-information-container1 {
   background: #27202e;
 }
 .access-information-container2 {
   display: flex;
   flex-direction: row;
   /* align-items: center; */
 }

 #access {
   width: 56%;
   padding: 40px 0;
 }

 #information {
   width: 44%;
   padding: 40px 0;
   background: #27202e;
   color: #fff;
   /* display: flex;
   flex-direction: column; */
 }

 .information-container2 {
   /* margin: auto; */
 }

/* bottom-menu */
 #bottom-menu li:first-child {
   border-top: 1px solid #fff;
 }



}