@charset "UTF-8";

/*-------------------------------------------*/
/*	PC
/*-------------------------------------------*/

@media screen and (min-width:900px) {

  /* =====================
    room_fv
  ===================== */
  
  #room_fv {
    width: calc( 100% - 96px );
    margin: 0 auto;
    position: relative;
  }

  .room_fv_img {
    width: 100%;
    height: 0;
    padding-bottom: 29.8062%;
    position: relative;
    z-index: -1;
  }

  .room_fv_img img {
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .room_fv_ttl {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    position: absolute;
    bottom: 32px;
    left: 32px;
  }

  /* =====================
    border
  ===================== */
 
  .border {
    position: relative;
    padding-top: 48px;
    margin-top: 48px;
  }

  .border::before {
    content: '';
    width: calc( 100vw - 96px );
    height: 1px;
    display: block;
    background: #ccc;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* =====================
    room_detail
  ===================== */

  #room_detail {
    padding-bottom: 24px;
  }
  
  .room_post p {
    font-size: 16px;
  }

  .room_post p.has-text-align-center {
    text-align: center;
    margin: 48px 0;
  }

  .room_post p.has-text-align-center:first-child {
    margin-top: 0;
  }

  .room_post p:not([class]) {
    margin-bottom: 8px;
  }

  .room_post p strong {
    font-weight: 700;
  }

  .room_post h2 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    margin: 48px 0 24px;
    padding-top: 48px;
    padding-left: 20px;
    position: relative;
  }

  .room_post h2::before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    background: var(--color-sub-glod);
    position: absolute;
    top: 52px;
    left: 0;
  }

  .room_post h2::after {
    content: '';
    width: calc( 100vw - 96px );
    height: 1px;
    display: block;
    background: #ccc;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .room_post h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    margin: 24px 0;
  }

  .room_post .wp-block-image {
    margin: 24px 0;
  }

  .room_post .wp-block-image img {
    width: 100% !important;
    height: auto;
  }

  .room_post .wp-block-columns {
    display: flex;
    justify-content: space-between;
    gap: 0 32px;
    margin: 24px 0;
  }

  .room_post .wp-block-columns .wp-block-image {
    margin: 0;
  }

  /* =====================
    room_access
  ===================== */

  #room_access {
    margin-top: 0;
  }

  #room_access .text {
    line-height: 1.45;
  }
  
  /*  access
  ------------------------*/

  .access {
    margin-bottom: 24px;
  }
  
  .access_map {
    width: calc( 100vw - 96px );
    margin: 0 calc( 50% - 50vw + 48px );
    height: 400px;
    margin-bottom: 24px;
    position: relative;
  }

  .access_map iframe {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .access .text {
    text-align: center;
    margin-bottom: 24px;
  }

  /*  detail
  ------------------------*/

  .detail {
    align-items: center;
  }
  
  .detail_text {
    width: 59%;
    padding: 32px 24px;
  }

  .detail_ttl {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    padding-left: 20px;
    margin-bottom: 16px;
    position: relative;
  }

  .detail_ttl::before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    background: var(--color-sub-glod);
    position: absolute;
    top: 4px;
    left: 0;
  }

  .detail_img {
    width: 41%;
    padding: 32px 0;
  }

  .detail_img img {
    width: 283px;
    max-width: 100%;
    margin: 0 auto;
  }

  /*  shop
  ------------------------*/
  
  .shop_ttl {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 24px;
    text-align: center;
  }

  .shop_ttl span {
    display: inline-block;
    padding: 0 24px;
    position: relative;
  }

  .shop_ttl span::before,
  .shop_ttl span::after {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    background: var(--color-sub-glod);
    position: absolute;
    top: 4px;
  }

  .shop_ttl span::before {
    left: 0;
  }

  .shop_ttl span::after {
    right: 0;
  }

  .shop .text {
    text-align: center;
    margin-bottom: 24px;
  }

  .shop_btn {
    align-items: center;
    justify-content: center;
    gap: 0 32px;
    margin-bottom: 48px;
  }

  /*  shop_gallery
  ------------------------*/
  
  .shop_gallery {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 32px;
  }

  .shop_gallery img {
    width: 474px;
    margin: 0 auto;
  }

  .shop_gallery figcaption {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 16px;
    text-align: center;
  }

  /* =====================
    room_reserve
  ===================== */
  
  #room_reserve {
    background: var(--color-sub-glod);
    color: #fff;
    text-align: center;
  }

  #room_reserve .ttl {
    margin-bottom: 10px;
  }

  #room_reserve .text {
    margin-bottom: 24px;
  }

  .btn_reserve {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .btn_reserve a {
    min-width: 560px;
    height: 80px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 100px;    
  }

  .btn_reserve .newtab {
    padding-right: 32px;
  }

  .btn_reserve .newtab::before {
    width: 25px;
    height: 25px;
    background-image: url(../img/common/icon_newtab_b.svg);
  }

  .btn_reserve a:hover {
    color: var(--color-main-glod);
  }

  .btn_reserve a:hover .newtab::before {
    background-image: url(../img/common/icon_newtab.svg);
  }  
  
}

/*-------------------------------------------*/
/*	SP
/*-------------------------------------------*/

@media screen and (max-width:899px) {

  /* =====================
    room_fv
  ===================== */
  
  #room_fv {
    position: relative;
  }

  .room_fv_img {
    width: 100%;
    height: 0;
    padding-bottom: 48%;
    position: relative;
    z-index: -1;
  }

  .room_fv_img img {
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .room_fv_ttl {
    width: 144px;
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    position: absolute;
    bottom: 20px;
    left: 5%;
  }

  /* =====================
    border
  ===================== */
 
  .border {
    position: relative;
    padding-top: 48px;
    margin-top: 48px;
  }

  .border::before {
    content: '';
    width: 90%;
    height: 1px;
    display: block;
    background: #ccc;
    position: absolute;
    top: 0;
    left: 5%;
  }

  /* =====================
    room_detail
  ===================== */

  #room_detail {
    padding-bottom: 24px;
  }
  
  .room_post p {
    font-size: 14px;
  }

  .room_post p.has-text-align-center {
    margin: 48px 0;
    line-height: 1.85;
  }

  .room_post p.has-text-align-center:first-child {
    margin-top: 0;
  }

  .room_post p:not([class]) {
    margin-bottom: 8px;
  }

  .room_post p strong {
    font-weight: 700;
  }

  .room_post h2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    margin: 48px 0 24px;
    padding-top: 48px;
    padding-left: 20px;
    position: relative;
  }

  .room_post h2::before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    background: var(--color-sub-glod);
    position: absolute;
    top: 52px;
    left: 0;
  }

  .room_post h2::after {
    content: '';
    width: 100%;
    height: 1px;
    display: block;
    background: #ccc;
    position: absolute;
    top: 0;
    left: 0;
  }

  .room_post h3 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin: 24px 0;
  }

  .room_post .wp-block-image {
    margin: 24px 0;
  }

  .room_post .wp-block-image img {
    width: 100% !important;
    height: auto;
  }

  .room_post .wp-block-columns {
    display: block;
  }

  /* =====================
    room_access
  ===================== */

  #room_access {
    margin-top: 0;
  }

  #room_access .text {
    line-height: 1.45;
  }
  
  /*  access
  ------------------------*/

  .access {
    margin-bottom: 24px;
  }
  
  .access_map {
    width: 100%;
    height: 335px;
    margin-bottom: 24px;
    position: relative;
  }

  .access_map iframe {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .access .text {
    text-align: center;
    margin-bottom: 24px;
  }

  /*  detail
  ------------------------*/

  .detail {
    display: block;
  }
  
  .detail_text {
    padding: 32px 0;
  }

  .detail_ttl {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    padding-left: 20px;
    margin-bottom: 16px;
    position: relative;
  }

  .detail_ttl::before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    background: var(--color-sub-glod);
    position: absolute;
    top: 4px;
    left: 0;
  }

  .detail_img {
    padding: 32px 0;
  }

  .detail_img img {
    width: 283px;
    max-width: 100%;
    margin: 0 auto;
  }

  /*  shop
  ------------------------*/
  
  .shop_ttl {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 24px;
    text-align: center;
  }

  .shop_ttl span {
    display: inline-block;
    padding: 0 24px;
    position: relative;
  }

  .shop_ttl span::before,
  .shop_ttl span::after {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    background: var(--color-sub-glod);
    position: absolute;
    top: 4px;
  }

  .shop_ttl span::before {
    left: 0;
  }

  .shop_ttl span::after {
    right: 0;
  }

  .shop .text {
    margin-bottom: 24px;
  }

  .shop_btn {
    display: block;
    margin-bottom: 48px;
  }

  .shop_btn .btn {
    margin-bottom: 32px;
  }

  .shop_btn .btn:last-of-type {
    margin-bottom: 0;
  }

  /*  shop_gallery
  ------------------------*/
  
  .shop_gallery {
    display: block;
  }

  .shop_gallery li {
    margin-bottom: 32px;
  }

  .shop_gallery li:last-child {
    margin-bottom: 0;
  }

  .shop_gallery img {
    width: 280px;
    margin: 0 auto;
  }

  .shop_gallery figcaption {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 16px;
    text-align: center;
  }

  /* =====================
    room_reserve
  ===================== */
  
  #room_reserve {
    background: var(--color-sub-glod);
    color: #fff;
    text-align: center;
  }

  #room_reserve .ttl {
    margin-bottom: 10px;
  }

  #room_reserve .text {
    margin-bottom: 24px;
  }

  .btn_reserve {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-align: center;
  }

  .btn_reserve a {
    padding: 16px 48px;
    display: flex;
    align-items: center;
    text-align: left;
    background: #fff;
    border-radius: 100px;    
    word-break: normal;
    overflow-wrap: break-word;
  }

  .btn_reserve .newtab {
    padding-right: 48px;
  }

  .btn_reserve .newtab::before {
    width: 25px;
    height: 25px;
    background-image: url(../img/common/icon_newtab_b.svg);
  }

}