@charset "UTF-8";
/* mixin
**********************************************************************/
/* hannari*/
/* media query */
/* setting
**********************************************************************/
/* mixin
**********************************************************************/
/* hannari*/
/* media query */
@font-face {
  font-family: 'Hannari';
  src: url("../wf/Hannari.eot?") format("eot"), url("../wf/Hannari.woff") format("woff"), url("../wf/Hannari.ttf") format("truetype"); }
.flex, .form_colmn ul, .news_column ul li {
  -webkit-display: box;
  -moz-display: box;
  -ms-display: box;
  display: box;
  -webkit-display: flexbox;
  -moz-display: flexbox;
  -ms-display: flexbox;
  display: flexbox;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  display: flex; }

.flex_between, #main_area_top .reserve_block, .info_block {
  -webkit-display: box;
  -moz-display: box;
  -ms-display: box;
  display: box;
  -webkit-display: flexbox;
  -moz-display: flexbox;
  -ms-display: flexbox;
  display: flexbox;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between; }

.flex_wrap, .contents_area ul {
  -webkit-display: box;
  -moz-display: box;
  -ms-display: box;
  display: box;
  -webkit-display: flexbox;
  -moz-display: flexbox;
  -ms-display: flexbox;
  display: flexbox;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.flex_center {
  -webkit-display: box;
  -moz-display: box;
  -ms-display: box;
  display: box;
  -webkit-display: flexbox;
  -moz-display: flexbox;
  -ms-display: flexbox;
  display: flexbox;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-box-pack: center;
  box-pack: center;
  -webkit-flex-pack: center;
  -moz-flex-pack: center;
  -ms-flex-pack: center;
  flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center; }

.flex_right {
  -webkit-display: box;
  -moz-display: box;
  -ms-display: box;
  display: box;
  -webkit-display: flexbox;
  -moz-display: flexbox;
  -ms-display: flexbox;
  display: flexbox;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  display: flex;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-box-pack: end;
  box-pack: end;
  -webkit-flex-pack: end;
  -moz-flex-pack: end;
  -ms-flex-pack: end;
  flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  justify-content: flex-end; }

.flex_between_wrap {
  -webkit-display: box;
  -moz-display: box;
  -ms-display: box;
  display: box;
  -webkit-display: flexbox;
  -moz-display: flexbox;
  -ms-display: flexbox;
  display: flexbox;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -ms-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.fade, .form_colmn ul li a, .form_colmn ul li.btn_reserve_sub a:hover, .searchBtn, .searchBtn:hover, .contents_area ul li a .name_block, .contents_area ul li a .name_block p, .contents_area ul li a:hover .name_block, .contents_area ul li a:hover .name_block p, .btn_list a, .btn_list a:hover, .bn_column ul li a .bn_cell .img_box, .bn_column ul li a .bn_cell .img_box:hover {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s; }

.cover_w, .bn_column ul li a .bn_cell .img_box img {
  position: relative;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.cover_h {
  position: relative;
  width: auto;
  height: 100%;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

/* top
**********************************************************************/
@media all and (max-width: 1024px) {
  #header_area {
    height: 50px; } }

#main_area_top {
  width: 100%;
  height: auto;
  background-position: center center;
  background-size: cover;
  position: relative;
  top: 0px; }
  #main_area_top h1 {
    font-family: "Hannari";
    color: #FFF;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    writing-mode: tb-rl;
    font-size: 24px;
    text-shadow: 0px 1px 7px #000000;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -10px; }
    @media all and (max-width: 1024px) {
      #main_area_top h1 {
        display: none; } }
  #main_area_top .reserve_area {
    position: absolute;
    width: 100%;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5); }
    @media all and (max-width: 1024px) {
      #main_area_top .reserve_area {
        display: none; } }
  #main_area_top .reserve_block {
    width: 1100px;
    margin: 14px auto 13px; }
    #main_area_top .reserve_block h2 {
      width: 122px;
      height: auto;
      color: #FFF;
      border: #CCC solid 1px;
      text-align: center;
      padding: 23px 0 20px; }
    @media all and (-ms-high-contrast: none) {
      #main_area_top .reserve_block *::-ms-backdrop, #main_area_top .reserve_block h2 {
        padding: 26px 0 17px; } }

.form_colmn {
  width: 740px;
  padding: 2px 0 0; }
  .form_colmn ul {
    padding: 8px 0 0; }
    .form_colmn ul li {
      margin: 0 13px 0 0; }
      .form_colmn ul li a {
        color: #FFF;
        display: block;
        padding: 5px 0; }
      @media all and (-ms-high-contrast: none) {
        .form_colmn ul li *::-ms-backdrop, .form_colmn ul li a {
          padding: 8px 0 2px; } }
      .form_colmn ul li.btn_reserve_sub {
        background-image: url(../images/bg_btn.jpg);
        width: 95px;
        text-align: center;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        border-radius: 4px; }
        .form_colmn ul li.btn_reserve_sub a {
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -ms-border-radius: 4px;
          border-radius: 4px; }
          .form_colmn ul li.btn_reserve_sub a:hover {
            background-color: rgba(253, 128, 5, 0.3); }
      .form_colmn ul li.txt_reserve_sub {
        font-size: 93%; }
        .form_colmn ul li.txt_reserve_sub a:hover {
          color: #fd8005; }

/* top form
**********************************************************************/
.checkDate {
  border: 0;
  padding: 4px;
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  border: solid 1px #ccc;
  width: 160px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin: 0;
  background-color: #FFF;
  background-image: url(../images/icon_cal.png);
  background-repeat: no-repeat;
  background-position: 96% center; }

.checkDatey {
  border: 0;
  padding: 4px;
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  border: solid 1px #ccc;
  width: 50px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
  margin: 1px; }

.checkDatem {
  border: 0;
  padding: 4px;
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  border: solid 1px #ccc;
  width: 50px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
  margin: 1px; }

.checkDated {
  border: 0;
  padding: 4px;
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  border: solid 1px #ccc;
  width: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
  margin: 1px; }

.checkAccom {
  border: 0;
  padding: 2px 2px;
  font-family: Arial, sans-serif;
  border: solid 1px #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin: 0;
  text-align: center; }

.ninzuCell {
  padding: 0 0 0 16px;
  color: #FFF; }

.ninzu {
  border: 0;
  padding: 4px;
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  border: solid 1px #ccc;
  width: 50px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin: 0; }

.checkRoomCell {
  padding: 0 0 0 5px;
  color: #FFF; }
  .checkRoomCell select {
    border: 0;
    padding: 2px 2px;
    font-family: Arial, sans-serif;
    border: solid 1px #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    margin: 0; }

.checkRoom {
  border: 0;
  padding: 2px 2px;
  font-size: 1.1em;
  font-family: Arial, sans-serif;
  border: solid 1px #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin: 0 10px 0 0; }

.searchBtn489ban div {
  margin: 0 8px;
  width: 207px;
  height: 26px;
  background-image: url(../images/bg_btn.jpg);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px; }

.searchBtn {
  width: 207px;
  height: 26px;
  font-family: "貂ｸ譏取悃", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  color: #FFF;
  border: none;
  cursor: pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background-image: url(../images/icon_megane_w.png);
  background-repeat: no-repeat;
  background-position: 75px center;
  background-color: rgba(253, 128, 5, 0); }
  .searchBtn:hover {
    background-color: rgba(253, 128, 5, 0.3); }

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .searchBtn {
    height: 21px;
    padding: 5px 0 0;
    background-position: 75px 5px; } }
.shukusho {
  font-size: 92.4%; }

.white {
  color: #FFF;
  padding: 0 10px 0 3px; }
  .white a {
    color: #FFF; }

/* top contents
**********************************************************************/
.title_area_top {
  width: 100%;
  height: 150px;
  text-align: center;
  background-image: url(../images/line_gold.jpg), url(../images/hana.png), url(../images/bg_copy.jpg);
  background-repeat: repeat-x, no-repeat, repeat;
  background-position: top center, center 25px, top center; }
  .title_area_top h2 {
    font-size: 316%;
    line-height: 1.1em;
    font-family: "Hannari";
    padding: 82px 0 0; }
  @media all and (max-width: 1024px) {
    .title_area_top {
      height: auto;
      background-position: top center, center center, top center; }
      .title_area_top h2 {
        padding: 16px 0 10px;
        font-size: 20px; } }

.contents_area ul li {
  width: 50%;
  height: 480px;
  overflow: hidden;
  position: relative; }
  @media all and (max-width: 1024px) {
    .contents_area ul li {
      height: 145px; } }
  .contents_area ul li a {
    display: block;
    width: 100%;
    height: 480px;
    color: #FFF; }
    .contents_area ul li a .img_box {
      width: 100%;
      height: 480px;
      background-position: center;
      background-size: cover;
      position: absolute;
      -webkit-transition: transform 2s linear;
      -moz-transition: transform 2s linear;
      -ms-transition: transform 2s linear;
      transition: transform 2s linear; }
      @media all and (max-width: 1024px) {
        .contents_area ul li a .img_box {
          height: 145px; } }
    .contents_area ul li a .room {
      background-image: url(../../top/images/c_room.jpg); }
    .contents_area ul li a .spa {
      background-image: url(../../top/images/c_spa.jpg); }
    .contents_area ul li a .meals {
      background-image: url(../../top/images/c_meals.jpg); }
    .contents_area ul li a .gallery {
      background-image: url(../../top/images/c_gallery.jpg); }
    .contents_area ul li a .name_block {
      width: 80px;
      height: 300px;
      background-color: rgba(0, 0, 0, 0.4);
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -40px; }
      .contents_area ul li a .name_block p {
        font-size: 270%;
        -webkit-writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -ms-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        writing-mode: tb-rl;
        line-height: 1em;
        letter-spacing: 0.2em;
        padding: 22px;
        position: relative;
        height: 256px; }
      @media all and (-ms-high-contrast: none) {
        .contents_area ul li a .name_block *::-ms-backdrop, .contents_area ul li a .name_block p {
          padding: 22px 22px 22px 15px; } }
      .contents_area ul li a .name_block .arrow {
        text-align: center;
        position: absolute;
        bottom: 16px;
        left: 24px; }
      @media all and (max-width: 1024px) {
        .contents_area ul li a .name_block {
          width: 38px;
          height: 110px;
          margin-top: -55px;
          margin-left: -19px; }
          .contents_area ul li a .name_block p {
            font-size: 16px;
            padding: 10px; }
          .contents_area ul li a .name_block .arrow {
            bottom: 3px;
            left: 11px; }
            .contents_area ul li a .name_block .arrow img {
              width: 16px;
              height: auto; } }
    .contents_area ul li a:hover .img_box {
      -webkit-transition: transform 4s linear;
      -moz-transition: transform 4s linear;
      -ms-transition: transform 4s linear;
      transition: transform 4s linear;
      -webkit-transform: scale(1.3);
      -moz-transform: scale(1.3);
      -ms-transform: scale(1.3);
      transform: scale(1.3); }
    .contents_area ul li a:hover .name_block {
      background-color: rgba(0, 0, 0, 0.6); }
      .contents_area ul li a:hover .name_block p {
        color: #fd8005; }

/* top contents
**********************************************************************/
.info_area {
  background: #000;
  background-repeat: no-repeat, repeat;
  background-image: url(../images/bg_ttl.png), url(../images/bg_01.jpg);
  background-position: center 55px;
  padding: 50px 0; }
  .info_area h2 {
    color: #FFF;
    text-align: center;
    font-size: 277%;
    line-height: 0.6em; }
    .info_area h2 .en {
      font-size: 14px; }
  @media all and (max-width: 1024px) {
    .info_area {
      background-size: 90%;
      background-position: center 20px;
      padding: 30px 0; }
      .info_area h2 {
        font-size: 24px;
        padding: 0; }
        .info_area h2 .en {
          font-size: 10px; } }

.info_block {
  width: 1100px;
  height: auto;
  margin: 0 auto;
  padding: 10px 0 0; }
  @media all and (max-width: 1024px) {
    .info_block {
      width: auto;
      display: block;
      padding: 0 10px 0; } }

.news_column {
  max-width: 790px;
  height: auto;
  margin: 20px 0 0;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  background-image: url(../images/bg_02.jpg); }
  .news_column h3 {
    text-align: center;
    font-size: 200%;
    margin: 20px 20px 0 20px;
    padding: 0 0 13px;
    line-height: 1em;
    border-bottom: #000 dotted 1px; }
  .news_column ul {
    padding: 0 20px; }
    .news_column ul li {
      padding: 20px 0 0;
      line-height: 1.5em; }
    .news_column ul .date {
      width: 80px; }
    .news_column ul p {
      max-width: 670px;
      font-size: 116%; }
    .news_column ul a {
      color: #000;
      border-bottom: #666 dotted 1px; }
      .news_column ul a:hover {
        color: #fd8005;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        transition: 0.3s; }
  @media all and (max-width: 1024px) {
    .news_column {
      margin: 8px 0 0;
      padding: 1px 0; }
      .news_column h3 {
        font-size: 20px;
        margin: 10px 10px 0 10px;
        padding: 0 0 5px; }
      .news_column ul {
        padding: 0 10px; }
        .news_column ul li {
          display: block;
          padding: 15px 0 0; }
        .news_column ul p {
          font-size: 108%; } }

.btn_list {
  width: 280px;
  height: auto;
  text-align: center;
  margin: 20px auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background-image: url(../images/bg_btn.jpg); }
  .btn_list a {
    display: block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    color: #FFF;
    font-size: 139%;
    line-height: 1em;
    padding: 10px 0 8px; }
    .btn_list a:hover {
      background-color: rgba(253, 128, 5, 0.3); }

.bn_column {
  width: 280px;
  height: auto; }
  .bn_column ul li {
    padding: 20px 0 0; }
    .bn_column ul li a .bn_cell {
      width: 280px;
      height: 150px;
      background-color: #fd8005;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      border-radius: 8px;
      position: relative; }
      .bn_column ul li a .bn_cell .img_box {
        width: 280px;
        height: 150px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        border-radius: 8px;
        overflow: hidden; }
        .bn_column ul li a .bn_cell .img_box:hover {
          opacity: 0.7; }
      .bn_column ul li a .bn_cell h4 {
        position: absolute;
        top: 10px;
        left: 12px;
        color: #FFF;
        font-family: "Hannari";
        font-size: 154%;
        line-height: 1.2em;
        text-shadow: 0px 1px 3px #000000; }
      .bn_column ul li a .bn_cell .arrow {
        position: absolute;
        bottom: 12px;
        right: 12px; }
  @media all and (max-width: 1024px) {
    .bn_column {
      width: auto; }
      .bn_column ul li {
        padding: 10px 0 0; }
        .bn_column ul li a .bn_cell {
          width: auto;
          height: 100px; }
          .bn_column ul li a .bn_cell .img_box {
            width: 100%;
            height: 100px; } }