// subpage_setteing
.sp__none {
  display: block;
}
.pc__none {
  display: none;
}
.subcontent {
  & section {
    max-width: 1100px;
    margin: 0 auto;
    width: 97%;
    padding: 80px 0;
  }

  & .flex-st {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
  }

  & .flex {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }

  & img {
    max-width: 100%;
    width: 100%;
  }

  & .ttl {
    // position: relative;
    font-size: 40px;
    margin-bottom: 60px;
    text-align: center;
    line-height: 1.8;

    // &::before {
    //   content: "";
    //   background: url(../images/top/tourism/tourism_ttl_left.png) no-repeat;
    //   width: 104px;
    //   height: 70px;
    //   display: inline-block;
    //   margin-right: 8px;
    // }

    // &::after {
    //   content: "";
    //   background: url(../images/top/tourism/tourism_ttl_right.png) no-repeat;
    //   width: 104px;
    //   height: 70px;
    //   display: inline-block;
    //   margin-left: 8px;
    // }

    & span {
      color: #c9af34;
      font-size: 24px;
    }
  }
}

@media only screen and (max-width: 1040px) {
  .subcontent section {
    padding: 60px 0;
  }
}
@media only screen and (max-width: 767px) {
  .sp__none {
    display: none;
  }
  .pc__none {
    display: block;
  }
  .subcontent section {
    padding: 40px 0;
  }
}

// submainbox
.submainbox {
  padding: 80px 0;
  background: #f7f7f7;

  h2 {
    text-align: center;
    font-size: 40px;
  }
}

@media only screen and (max-width: 1040px) {
}
@media only screen and (max-width: 767px) {
}

// bread_crumbs
.bread__crumb {
  padding: 10px 0;
  width: 100%;

  ol {
    max-width: 1100px;
    margin: 0 auto;
    width: 97%;
    text-align: left;

    li {
      display: inline;
      line-height: 1.4;

      &::after {
        content: ">";
        padding: 0 5px;
        margin: 0 5px;
      }
      &:last-child:after {
        content: "";
      }

      & a {
        color: #020202;
      }

      & a:hover {
        color: #c9af34;
        transition: all 0.7s;
      }
    }
  }
}

@media only screen and (max-width: 1040px) {
}
@media only screen and (max-width: 767px) {
}

// room
.subcontent {
  & .room__intro-bg {
    background: url(../images/subcon/room/room_bg.jpg) no-repeat top center;
    background-size: contain;
    padding-top: 90px;
  }
  & .room__intro {
    &_box {
      background: url(../images/top/features/features_bg.jpg);
      padding: 70px 50px 80px;

      & p {
        font-size: 18px;
      }
    }
    &_list {
      margin-bottom: 80px;
      &-inner {
        & li {
          width: 48%;
        }
      }
    }
  }

  & .amenity__box {
    width: 64%;
    padding: 48px 60px;
  }
  & .about__room {
    width: 35%;
  }

  & .top__greeting-inner_title {
    position: relative;
    &::before {
      content: "";
      background: url(../images/top/link/ttl_icon.png) no-repeat;
      position: absolute;
      width: 23px;
      height: 19px;
      top: -19px;
      -moz-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      left: 50%;
    }
  }

  & .top__greeting_box {
    padding: 0;
  }
  & .top__greeting-listbox {
    justify-content: space-between;

    &.flex {
      justify-content: space-between;
    }
  }

  .about__room {
    // margin-top: 60px;
    // background: #fff;
    padding: 48px 60px;
    // border-radius: 40px 0 40px 0;
    &-ttl,
    &-txt {
      font-size: 18px;
      text-align: center;
      line-height: 2.8;
    }
  }

  .other__bg {
    background: url(../images/subcon/room/room03.jpg) no-repeat;
    // background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
  }

  & .top__tourism-imglist_box {
    &.flex {
      justify-content: center;
    }
    & .top__tourism-imglist {
      width: 25%;
    }
  }

  & .other__list {
    margin-bottom: 80px;

    &-ttl {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 40px;
      color: #fff;
    }

    &-inner {
      // & li {
      //   width: 48%;
      // }
      &-img {
        width: 34%;
      }
      &-txt_box {
        width: 60%;
      }
      &-txt {
        font-size: 16px;
        line-height: 2;
        color: #fff;
        margin-bottom: 30px;

        &-sub {
          font-size: 18px;
          font-weight: 600;
          color: #fff;
          display: block;
          margin-bottom: 10px;
        }
      }
    }
  }

  & .institution__box {
    width: 48%;
    &-ttl {
      font-size: 18px;
      margin-bottom: 16px;
      color: #fff;
    }
    &-list {
      & li {
        line-height: 1.8;
        color: #fff;
      }
    }
  }

  & .top__features-inner_title1 {
    top: 0;
  }

  .room__end-bg {
    max-width: 1820px;
    width: 100%;
    margin: 0 auto;
    background: url(../images/top/features/features_bg.jpg);
  }

  & .room__end {
    margin-top: 250px;

    &-img {
      margin-bottom: 60px;
    }

    &-ttl {
      font-size: 26px;
      margin-bottom: 60px;
    }
    &-txt {
      font-size: 16px;
    }
    &-img_box {
      margin-top: 60px;
    }
    &-list {
      & li {
        width: 32%;
        margin-bottom: 2%;

        &:not(:nth-child(3n)) {
          margin-right: 2%;
        }
      }
    }
  }
}

@media only screen and (max-width: 1600px) {
  .subcontent {
    & .top__features-inner_title img {
      width: 14vw;
    }
  }
}

@media only screen and (max-width: 1040px) {
  // submainbox
  .submainbox {
    padding: 40px 0;
    & h2 {
      font-size: 30px;
    }
  }
  // bread_crumbs
  .bread__crumb {
    & ol {
      & li {
        font-size: 15px;
      }
    }
  }

  .subcontent {
    // subcon_setting
    & .ttl {
      font-size: 24px;
      margin-bottom: 40px;

      & span {
        font-size: 19px;
      }
    }

    // room

    & .room__intro {
      &_box {
        padding: 30px 20px 30px;

        & p {
          font-size: 15px;
        }
      }
      &_list {
        margin-bottom: 40px;
      }
    }

    .top__tourism-inner_title {
      font-size: 24px;
      padding: 0;
      margin-bottom: 48px;
    }

    & .other__list {
      &-ttl {
        font-size: 20px;
        margin-bottom: 26px;
      }
      &-inner {
        & li {
          width: 100%;
        }
        &-img {
          margin-bottom: 20px;
        }
        &-txt {
          font-size: 14px;
        }
      }
    }

    & .room__end {
      margin-top: 230px;

      &-ttl {
        font-size: 20px;
        margin-bottom: 30px;
      }

      &-img {
        margin-bottom: 30px;
      }
    }
  }
}
@media only screen and (max-width: 767px) {
  // submainbox
  .submainbox {
    & h2 {
      font-size: 26px;
    }
  }
  .subcontent {
    // subcon__setting
    & .ttl {
      font-size: 18px;
      margin-bottom: 30px;
    }

    // room
    & .room__intro-bg {
      padding-top: 40px;
    }

    & .room__intro {
      &_list {
        margin-bottom: 20px;
      }
    }
    & .top__greeting-listbox {
      &.flex {
        justify-content: space-between;
      }
    }

    & .amenity__box,
    & .about__room {
      width: 100%;
    }

    & .about__room {
      margin-top: 0;
      background: #fff;
      border-radius: 40px 0 40px 0;
      padding: 42px 30px;

      &-ttl,
      &-txt {
        font-size: 16px;
      }
    }
    & .top__tourism-inner_title1:before,
    & .top__tourism-inner_title1:after {
      background-size: 100%;
    }

    & .top__tourism-inner_title {
      font-size: 20px;
    }

    & .other__list {
      &:last-child {
        margin-bottom: 0;
      }
      &-ttl {
        font-size: 18px;
      }

      &-inner {
        & li {
          font-size: 15px;
        }
      }
    }
    & .room__end {
      margin-top: 170px;

      &-ttl {
        font-size: 18px;
        margin-bottom: 24px;
      }
      &-txt {
        font-size: 14px;
      }

      &-list {
        & li {
          width: 100%;
          margin-bottom: 8%;

          &:not(:nth-child(3n)) {
            margin-right: 0;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 550px) {
  .subcontent {
    & .institution__box {
      width: 100%;
      &-02 {
        margin-top: 20px;
      }
    }
  }
}

.hoge--modifier.hoge--modifier .content {

}


// 下層ページ：お知らせ

.visually-hidden { //確実なスタイル適用のため、 !important を許容
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

// 一覧ページ
.post-list {
  &__item {
    border-bottom: 1px solid #ddd;
    padding-bottom: 2em;
    & + & {
      margin-top: 2em;
    }
    @media (max-width: 767px) {
      font-size: 16px;
    }
  }
  &__date {
    font-weight: bold;
    width: 130px;
    padding-left: 1em;
    @media (max-width: 767px) {
      width: 100%;
      padding-left: 0;
      margin-bottom: 0.5em;
    }
  }
  &__link {
    width: calc(100% - 150px);
    padding-right: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #020202;
    @media (max-width: 767px) {
      width: 100%;
      padding-right: 0;
    }
  }
}


// 詳細ページ（detail）
.post-article {
  &__title {
    font-size: 24px;
    margin-bottom: 1em;
    line-height: 1.4;
  }
  &__date {
    text-align: right;
    margin-bottom: 1.5em;
    letter-spacing: 0.075em;
    line-height: 1.2;
  }
  &__thumb {
    text-align: center;
  }
  &__content {
    margin-top: 2em;
    line-height: 1.8;
  }
}


.post-page-back {
  margin: 60px auto 0;
  width: 100%;
  max-width: 280px;
  @media (max-width: 767px) {
    max-width: 260px;
  }
  &__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c9af34;
    padding-top: 1em;
    padding-bottom: 1em;
    &, &:visited {
      color: #fff;
    }
  }
}

.pagenation-wrapper {
  margin-top: 100px;
}
.pagenation {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  overflow-x: auto;
	li {
		a {
      font-weight: bold;
			display: inline-block;
			color: inherit;
      background-color: #fff;
			border: 2px solid #c9af34;
      padding: 0.3em 0.8em;
			margin: 0 0.5em;
			text-align: center;
			text-decoration: none;
			transition: .4s;
      @media (max-width: 767px) {
        margin: 0 0.2em;
      }
			&:hover, &:active{
				color: #fff;
        background-color: #c9af34;
				font-weight: bold;
        opacity: 1.0;
			}
		}
	}
  .current {
    span {
      font-weight: bold;
      display: inline-block;
      color: inherit;
			background-color: #c9af34;
      border: 2px solid #c9af34;
      color: #fff;
      padding: 0.3em 0.8em;
			margin: 0 0.5em;
      text-align: center;
      text-decoration: none;
      transition: .4s;
      @media (max-width: 767px) {
        margin: 0 0.2em;
      }
    }
  }
  .ellipsis {
    span {
      font-weight: bold;
      display: inline-block;
      color: inherit;
      border: 2px solid transparent;
      color: #c9af34;
      padding: 0.3em 0.8em;
			margin: 0 0.5em;
      text-align: center;
      text-decoration: none;
      transition: .4s;
      @media (max-width: 767px) {
        margin: 0 0.2em;
      }
    }
  }
}