@charset "UTF-8";
@media screen and (max-width: 600px) {
  html {
    font-size: 14px;
  }
  /* wrapper */
  #wrapper {
    min-width: 300px;
  }
  /* top */
  #top {
    height: auto;
  }
  #top #main {
    position: static;
    transform: none;
    width: 88%;
    height: auto;
    padding-top: 40px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  #top #main #logo {
    width: 82px;
    padding: 0;
    margin-right: 5px;
    display: block;
    order: 2;
  }
  #top #main #logo img {
    min-width: auto;
  }
  #top #main #navi {
    width: 70%;
    padding: 0;
    order: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  #top #main #navi nav ul {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-feature-settings: "vkrn";
    font-size: 0.9em;
    line-height: 2.4;
    margin-right: auto;
  }
  #top #main #navi p {
    margin-top: auto;
    margin-left: 0.5em;
    width: 100px;
  }
  #top #main #main_photo {
    width: 100%;
    margin-top: 6em;
    padding: 0;
    order: 3;
  }
  #top #main #main_photo img {
    min-width: auto;
  }
  #top #news {
    width: 100%;
    position: static;
    text-align: center;
    padding: 1em 5%;
    border-radius: 0;
  }
  /* 下層ヘッダー */
  header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: static;
    transform: none;
    width: 88%;
    height: auto;
    padding-top: 40px;
    margin: 0 auto;
  }
  header #layer_logo {
    position: static;
    width: 70px;
    margin-right: 5px;
    display: block;
    order: 2;
  }
  header #navi {
    width: 70%;
    padding: 0;
    order: 1;
    text-align: left;
    position: static;
  }
  header #navi nav ul {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-feature-settings: "vkrn";
    font-size: 0.9em;
    line-height: 2.4;
    width: auto;
    display: block;
    margin-right: auto;
  }
  /* 下層コンテンツ */
  main {
    width: 100%;
    padding: 5em 0;
    position: relative;
  }
  #layer_title {
    width: auto;
    position: static;
  }
  #layer_title h2 {
    text-align: center;
    font-size: 1.2em;
    letter-spacing: 0.15em;
  }
  #layer_title h2 span {
    padding: 0.7em 2em;
  }
  #contents {
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
  /* catch */
  #contents #catch {
    height: 20em;
    display: flex;
    align-items: center;
  }
  #contents #catch h2 {
    display: block;
    margin: 0 auto;
    font-size: 1.4em;
    letter-spacing: 0.3em;
    text-align: center;
  }
  /* introduction */
  #contents #introduction {
    padding-top: 5em;
    height: auto;
    margin-bottom: 7em;
    width: 90%;
  }
  #contents #introduction p {
    text-align: justify;
    margin: 0 auto;
    font-size: 1.1em;
  }
  #stay #contents #introduction, #rental #contents #introduction {
    padding-top: 5em;
    height: auto;
  }
  #contents .yoyaku_button {
    text-align: center;
    margin: 5em auto 0;
    width: auto;
    font-size: 1.1em;
  }
  #contents .madori {
    display: block;
  }
  #contents .madori img {
    width: 90%;
    display: block;
    margin: 0 auto 3em;
  }
  #contents .madori img:last-child {
    margin-bottom: 0;
  }
  #contents .photo_block {
    display: block;
    margin: 7em 0;
  }
  #contents .photo_block .w50 {
    width: 100%;
    margin-bottom: 2em;
  }
  #contents .photo_block .w100 {
    width: 100%;
    margin-bottom: 2em;
  }
  /* about slide */
  #about #slide {
    position: relative;
    margin: 7em auto;
    width: 100%;
  }
  /* other_text */
  #contents .other_text {
    display: block;
    margin-bottom: 6em;
    font-size: 1em;
  }
  #contents .other_text h3.left {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2em;
  }
  #contents .other_text .right {
    width: 100%;
  }
  #contents .other_text .right p {
    margin-bottom: 2em;
  }
  /* outline */
  #contents .outline {
    display: block;
    font-size: 1em;
    margin-bottom: 2.5em;
    padding-bottom: 2.5em;
    border-bottom: 1px solid #7e7b78;
  }
  #contents .outline h3.left {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2em;
  }
  #contents .outline .right {
    width: 100%;
    text-align: left;
  }
  #contents .outline .right p {
    margin-bottom: 2em;
  }
  #contents .outline .right p:last-child {
    margin-bottom: 0;
  }
  #contents .outline .right .caption {
    font-size: 0.8em;
    line-height: 1.8;
  }
  #contents .outline .right .button {
    margin-top: 1em;
  }
  /* contents article */
  #article #recent_list {
    padding: 5em 0 3em;
  }
  #article #recent_list h2 {
    margin-bottom: 3em;
    font-size: 1.1em;
  }
  #article #recent_list ul li a {
    padding-bottom: 2em;
    margin-bottom: 2em;
    display: block;
  }
  #article #recent_list ul li .date {
    width: 12em;
    font-size: 1.1em;
  }
  #article #recent_list ul li h3 {
    width: auto;
    margin-right: auto;
    font-size: 1.1em;
  }
  #article #recent_list ul li h3 span {
    font-size: 0.8em;
    display: inline-block;
    margin-left: 1em;
  }
  #article #recent_list ul li .place {
    display: none;
  }
  #article .archive_accordion li .accordion_icon {
    font-size: 1em;
  }
  #article #archive_list li .inner {
    display: none;
    margin-top: 3em;
    margin-bottom: 3em;
  }
  #article #archive_list li .inner .year_list {
    margin-bottom: 3em;
    display: block;
  }
  #article #archive_list li .inner .year_list .cat_title {
    width: 100%;
    font-size: 1.1em;
    margin-bottom: 2em;
  }
  #article #archive_list li .inner .year_list ul {
    width: 100%;
  }
  #article #archive_list li .inner .year_list ul li a {
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
    display: block;
  }
  #article #archive_list li .inner .year_list .date {
    width: 100%;
    font-size: 1.1em;
  }
  #article #archive_list li .inner .year_list h3 {
    width: auto;
    font-size: 1.1em;
  }
  /* single */
  #single #layer_title {
    display: none;
  }
  #single article {
    padding-top: 0;
  }
  #single article #category {
    margin-bottom: 3em;
    font-size: 1em;
  }
  #single article h1 {
    font-size: 1.4em;
  }
  #single article #detail {
    font-size: 1.1em;
  }
  #single article #detail h3 {
    margin-bottom: 0.7em;
  }
  #single article #detail img {
    margin-bottom: 2em;
    margin-top: 2em;
    width: 100%;
  }
  /* footer */
  #footer {
    width: 90%;
    padding: 3em 0;
    margin: 0 auto;
    text-align: left;
  }
  #footer footer {
    display: block;
  }
  #footer footer #banner {
    margin-right: auto;
    text-align: center;
    font-size: 1em;
    margin-bottom: 2em;
  }
  #footer footer #info {
    margin: 2em auto;
    font-size: 0.8em;
    line-height: 1.6;
  }
  #footer footer #sns {
    font-size: 0.8em;
    line-height: 1.7;
  }
}