@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"); }
@font-face {
  font-family: 'honokamin';
  src: url("../wf/honokamin.woff") format("woff"), url("../wf/honokamin.woff") format("woff2"), url("../wf/honokamin.eot") format("eot"), url("../wf/honokamin.ttf") format("truetype"); }
.flex, .info_column {
  -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, .info_box, .map_box ul, .traffic_box .ttl_column, .bus_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 {
  -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, .access_time 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-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; }

.flex_reverse {
  -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-direction: reverse;
  -moz-box-direction: reverse;
  -ms-box-direction: reverse;
  box-direction: reverse;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.flex_reverse_between {
  -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-direction: reverse;
  -moz-box-direction: reverse;
  -ms-box-direction: reverse;
  box-direction: reverse;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -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; }

.fade, .car_box .link_column ul li a:hover, .traffic_box .link_column ul li a:hover {
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s; }

.cover_w {
  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%); }

.glow {
  text-shadow: 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 10px #ffffff, 0px 0px 8px #ffffff, 0px 0px 8px #ffffff, 0px 0px 8px #ffffff, 0px 0px 4px #ffffff, 0px 0px 4px #ffffff, 0px 0px 4px #ffffff; }

/* spa header
***********************************************************************/
#head_c {
  position: relative; }

#header_area {
  background-image: url(../../access/images/main.jpg); }

#mobile_header {
  position: fixed;
  width: 100%;
  background-color: #FFF;
  top: 0px; }

/* spa contents
**********************************************************************/
.info_box {
  border-top: #666 solid 2px;
  border-bottom: #666 solid 2px;
  margin: 30px 0 0;
  padding: 15px 0 30px; }

.info_column {
  width: 48%; }

.icon_side {
  padding: 0 3px 0 0; }

.txt_side {
  padding: 5px 0 0; }
  .txt_side p {
    font-size: 131%;
    line-height: 1.5em; }
  .txt_side .tsuiki {
    line-height: 1.4em;
    padding: 10px 0 0 10px; }

@media all and (max-width: 768px) {
  .access_area {
    padding: 10px; } }

.access_block {
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  padding: 0 0 70px; }

@media all and (max-width: 768px) {
  .gmap iframe {
    width: 100%;
    height: 300px; } }

.map_box {
  padding: 40px 0 0; }
  .map_box ul li {
    line-height: 0em; }
  @media all and (max-width: 768px) {
    .map_box {
      padding: 10px 0 0; }
      .map_box ul {
        display: block; }
        .map_box ul li {
          padding: 0 0 10px; }
          .map_box ul li img {
            width: 100%;
            height: auto; } }

.access_time {
  padding: 40px 0 0; }
  .access_time ul li {
    padding: 0 0px 0 0;
    position: relative; }
    .access_time ul li.txt_time {
      width: 400px; }
    .access_time ul li ul {
      display: block;
      padding: 60px 0 0 95px; }
      .access_time ul li ul li {
        font-size: 124%;
        line-height: 1.4em;
        padding: 3px 0; }
        .access_time ul li ul li::before {
          content: "■"; }
    .access_time ul li h3 {
      position: absolute;
      top: -38px; }
  @media all and (max-width: 768px) {
    .access_time ul li img {
      width: 100%;
      height: auto; }
    .access_time ul li.txt_time {
      width: auto; }
    .access_time ul li.photo {
      width: 48%; }
    .access_time ul li ul {
      padding: 50px 0 10px 70px; } }

.car_box {
  position: relative; }
  .car_box h3 {
    border-bottom: #666 dotted 1px;
    padding: 40px 0 5px; }
  .car_box .flow {
    padding: 20px 0 0; }
  .car_box .link_column {
    width: 300px;
    height: auto;
    position: absolute;
    top: 240px;
    right: 0px; }
    .car_box .link_column ul li {
      font-size: 108%;
      line-height: 1.3em; }
      .car_box .link_column ul li a {
        color: #3333ff;
        background-repeat: no-repeat;
        background-image: url(../images/arrow03.png);
        background-position: 0 9px;
        padding: 4px 0 4px 12px;
        display: block; }
        .car_box .link_column ul li a:hover {
          color: #FF9000; }
    .car_box .link_column p {
      font-size: 108%;
      line-height: 1.4em;
      padding: 10px 0 0; }
  @media all and (max-width: 768px) {
    .car_box .flow {
      padding: 10px 0 0; }
      .car_box .flow img {
        width: 100%;
        height: auto; }
    .car_box .link_column {
      width: auto;
      position: relative;
      top: auto;
      right: auto; } }

.traffic_box {
  position: relative; }
  .traffic_box .ttl_column {
    border-bottom: #666 dotted 1px;
    padding: 40px 0 5px; }
    .traffic_box .ttl_column p {
      line-height: 1.4em;
      font-size: 108%; }
  .traffic_box .flow {
    padding: 20px 0 0; }
  .traffic_box .link_column ul {
    display: table; }
    .traffic_box .link_column ul li {
      font-size: 108%;
      line-height: 1.3em;
      display: table-cell;
      vertical-align: middle;
      padding: 0 20px 0 0; }
      .traffic_box .link_column ul li a {
        color: #3333ff;
        background-repeat: no-repeat;
        background-image: url(../images/arrow03.png);
        background-position: 0 9px;
        padding: 4px 0 4px 12px;
        display: block; }
        .traffic_box .link_column ul li a:hover {
          color: #FF9000; }
  @media all and (max-width: 768px) {
    .traffic_box .ttl_column {
      display: block;
      padding: 20px 0 5px; }
      .traffic_box .ttl_column h3 {
        padding: 0 0 5px; }
    .traffic_box .flow {
      padding: 10px 0 0; }
      .traffic_box .flow img {
        width: 100%;
        height: auto; }
    .traffic_box .link_column ul {
      display: block; }
      .traffic_box .link_column ul li {
        display: block; }
        .traffic_box .link_column ul li a {
          margin: 0 0 0 20px; } }

.bus_area {
  background-color: #e94620;
  width: 100%;
  padding: 0 0 10px; }

.bus_bg {
  border-bottom: #FFF solid 10px; }

.bus_block {
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
  padding: 5px 0 0px; }
  @media all and (max-width: 768px) {
    .bus_block {
      display: block;
      padding: 5px 10px 0; }
      .bus_block .img_box img {
        width: 100%;
        height: auto; } }

.bus_detail {
  color: #FFF;
  padding: 30px 0 30px 30px; }
  .bus_detail p {
    font-size: 131%;
    line-height: 1.3em;
    padding: 0 0 5px;
    font-weight: 600; }
  .bus_detail .tsuiki {
    font-size: 93%;
    font-weight: 600; }
  @media all and (max-width: 768px) {
    .bus_detail {
      padding: 10px 0 10px 0; } }