.visible-tablet {
  display: none;
}

.hidden-tablet {
  display: table-row;
}

.visible-sp {
  display: none;
}

.main-pic.visible-sp {
  display: none;
}

.visible-sp {
  display: none;
}

.main-pic.hidden-sp {
  display: block;
}

.drawer-button {
  display: none;
}

.drawer-nav {
  display: none;
}

@media screen and (max-width: 768px) {
  .visible-tablet {
    display: table-row;
  }

  .hidden-tablet {
    display: none;
  }

  .visible-sp {
    display: block;
  }

  .hidden-sp {
    display: none;
  }

  .main-pic.visible-sp {
    display: block;
  }

  .main-pic.hidden-sp {
    display: none;
  }

  /* ====================
  // base
  // ==================== */
  #wrapper {
    min-width: 100%;
  }

  #wrapper * {
    box-sizing: border-box;
  }

  /* ====================
  // back top button
  // ==================== */
  .button .general-btn {
    font-size: 14px;
  }

  .button .general-btn::after {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translate(0, -50%);
  }

  /* ====================
  // header
  // ==================== */
  #header {
    width: 100%;
    height: auto;
    float: none;
  }

  #header .inner {
    width: 100%;
    height: auto;
    padding: 12px 16px;
    position: relative;
  }

  #siteLogo {
    margin: 0;
    height: auto;
    float: none;
  }

  #siteLogo a {
    display: block;
    height: auto;
    float: none;
  }

  #siteLogo a img {
    width: 100%;
  }

  #hMenu {
    display: none;
  }

  .web-bnr {
    padding: 10px;
  }

  /* ====================
  // drawer nav
  // ==================== */

  body.is-drawer-visible {
    overflow: hidden;
  }

  .drawer-button {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 58px;
    height: 58px;
    background: inherit;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
  }

  .drawer-button > img{
    width: 30px;
    height: 30px;
  }

  .drawer-close {
    top: 10px;
  }

  .drawer-nav {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100vh;
    background: #605b68;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-100%, 0);
    z-index: 99;
    transition: all 0.3s ease;
  }

  .is-drawer-visible .drawer-nav {
    transform: translate(0, 0);
  }

  .drawer-nav .inner {
    box-sizing: border-box;
    padding: 16px 24px;
    height: 100%;
    display: flex;
    flex-flow: column;
  }

  .drawer-logo {
    margin-bottom: 60px;
    width: 180px;
  }

  .drawer-logo img {
    width: 100%;
  }

  .drawer-menu {
    display: flex;
    flex-flow: column;
    gap: 20px;
    margin: 0;
  }

  .drawer-menu li a {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
  }

  .drawer-sub-menu {
    display: flex;
    flex-flow: column;
    gap: 18px;
    margin: auto 0 0;
  }

  .drawer-sub-menu li {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
  }

  .drawer-sub-menu li img {
    margin: 0;
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  .drawer-sub-menu li > a {
    margin: 0;
    width: calc(50% - 5px);
  }

  /* ====================
  // gNav
  // ==================== */
  #gNav {
    display: none;
  }

  /* ====================
  // heading
  // ==================== */
  #wrapper h2.heading02 {
    margin-bottom: 40px;
    font-weight: 700;
  }

  #wrapper h2.heading02 img {
    width: 100%;
  }


  /* ====================
  // main-pic
  // ==================== */
  .main-pic img {
    width: 100%;
  }

  .web-bnr img {
    width: 100%;
  }

  /* ====================
  // box common
  // ==================== */
  div.box1-inner, div.box2-inner, div.box3-inner, div.box4-inner, div.box5-inner {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ====================
  // box1
  // ==================== */
  .room {
    margin-bottom: 80px;
    width: 100%;
  }

  .room_m {
    width: 100%;
    padding-right: 0;
  }

  .room_m img {
    width: 100%;
  }

  .shousaibt {
    margin: 20px auto 40px;
    padding: 0;
    width: 150px;
  }

  .room_pic {
    width: 100%;
    padding-left: 0;
  }

  .room_pic ul {
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    flex-flow: row wrap;
    gap: 16px 10px;
  }

  .room_pic ul li:nth-child(n) {
    padding-right: 0;
    float: none;
    width: calc(50% - 5px);
  }

  .room_pic ul li img {
    width: 100%;
    margin-bottom: 6px;
  }

  .room_pic ul li p {
    margin: 0;
    text-align: center;
  }

  .box_comment {
    margin: 0;
  }

  .box_comment .ttl_rcm {
    width: 100%;
    padding: 16px 16px 13px;
    float: none;
    font-size: 16px;
    font-weight: 700;
  }

  .box_comment .comment {
    width: 100%;
    padding: 0;
    float: none;
  }

  .box_comment .comment p {
    margin: 0;
    padding: 16px;
  }

  .box_comment .comment p:before {
    margin: 0;
    border-right: 10px solid #094f8f;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0) rotate(-90deg);
  }

  /* ====================
  // box2
  // ==================== */
  .box_icon {
    margin-bottom: 40px;
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
  }

  .box_icon img {
    margin: 0;
    width: calc(25% - 8px * 3 / 4);
    height: auto;
  }

  .box_icon br {
    display: none;
  }

  .l_safety {
    margin: 0;
    display: flex;
    flex-flow: column;
    gap: 20px;
  }

  div.box2 .l_safety > div {
    margin: 0;
    width: 100%;
  }

  div.box2 .l_safety > div img {
    margin-bottom: 10px;
  }

  div.box2 .l_safety > div p {
    margin: 0;
    font-size: 14px;
  }

  /* ====================
  // box3
  // ==================== */
  ul#location {
    margin: 40px 0 0;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
  }

  ul#location li {
    margin: 0;
    float: none;
    width: calc(50% - 5px);
  }

  ul#location li img {
    margin-bottom: 6px;
    width: 100%;
  }

  #locationname {
    width: 100%;
  }

  /* ====================
  // box4
  // ==================== */
  .box4 img {
    width: 100%;
  }

  /* ====================
  // box5
  // ==================== */
  table.outline-tb th {
    width: 30%;
  }

  table.outline-tb td {
    width: 70%;
  }

  /* ====================
  // footer
  // ==================== */
  #footer {
    float: none;
  }

  #footer .inner {
    width: 100%;
  }

  ul#fNav {
    margin-bottom: 20px;
    width: 100%;
    font-size: 14px;
    display: flex;
    flex-flow: column;
    align-items: start;
    gap: 4px;
  }

  #footer .inner {
    height: auto;
    padding-bottom: 20px;
  }

  #footer .inner > img {
    width: 100%;
  }

  #footer .footer-info {
    width: 100%;
  }

  .footer-info__text01 {
    font-size: 18px;
    font-weight: 700;
  }

  .footer-info__image-group {
    margin-bottom: 30px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 20px;
  }

  .footer-info__image-group img {
    width: 100%;
  }

  .footer-info__image-group img:nth-child(2),
  .footer-info__image-group a {
    width: calc(50% - 14px);
  }

  .footer-info__text02 {
    font-size: 12px;
    text-align: center;
  }

  #footer .copy {
    font-size: 10px;
  }
}