<style>
  /* ベース */
  body {
    margin: 0;
    padding: 0;
    background: #f2f2f2;
    touch-action: manipulation;
    font-family: "M PLUS Rounded 1c", sans-serif;
  }
  .m-plus-rounded-1c-regular {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
}

  /* ── 見出し & 導入文 ── */
  #head {
    font-size: 1.75rem;
    padding: 0.8rem;
    text-align: center;
    color: #222;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  .red { color: #ff0000; }

  .donyu {
    max-width: 900px;
    margin: 10px auto;
    padding: 1rem 1.25rem;
    background: rgba(255,255,255,0.9);
    border-radius: 0px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
  }
  .donyu p { margin-top: 0.75rem; }

  h2 { padding: 0 0.25rem; }

  /* ── 検索コントロール：３列＋ボタンは下１行、ラベルがselect上に ── */
  #search-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "ci-label co-label ad-label"
      "ci-input co-input ad-input"
      "btn btn btn";
    gap: 8px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  /* 各ラベル */
  #search-controls label[for="checkin-date"]   { grid-area: ci-label; margin: 0; font-size: 14px; }
  #search-controls label[for="checkout-date"]  { grid-area: co-label; margin: 0; font-size: 14px; }
  #search-controls label[for="adult-num"]      { grid-area: ad-label; margin: 0; font-size: 14px; }

  /* 各セレクト */
  #search-controls select#checkin-date         { grid-area: ci-input; padding: 8px; }
  #search-controls select#checkout-date        { grid-area: co-input; padding: 8px; }
  #search-controls select#adult-num            { grid-area: ad-input; padding: 8px; }

  /* ボタン */
  #search-controls button#search-btn           { 
    grid-area: btn;
    font-size: 18px;
    padding: 12px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    margin:10px auto;
  }
  #search-controls button#search-btn:hover {
    background-color: #333;
  }

  /* ── 地図 & 吹き出し非表示アイコン ── */
  #map {
    width: 100%;
    height: 400px;
  }
  .gm-style-iw-chr,
  .gm-style-iw-ch,
  .gmnoprint {
    display: none;
  }

  /* ── ホテルリスト ── */
  .hotel-listing-container {
    padding: 0px;
    box-sizing: border-box;
  }
  .hotel-listing {
    background: #fff;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .hotel-image img {
    width: 100%;
    display: block;
    height: auto;
  }
  .hotel-name {
    font-size: 20px;
    padding: 8px;
    font-weight: bold;
  }
  .hotel-spec {
    padding: 0 8px 8px;
    font-size: 14px;
    color: #555;
  }
  .geo-distance {
    padding: 6px;
    background: #ffffe0;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
  }
  .price-reservation-block {
    padding: 10px 8px;
    background: #f8f8f8;
    text-align: center;
    font-size: 14px;
  }
  .price-label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .price-total {
    font-size: 22px;
    font-weight: bold;
    color: #cc0000;
  }
  .remaining-rooms {
    padding: 4px 0 0;
    text-align: center;
    color: #cc0000;
    font-weight: bold;
  }

  /* ── キラーンボタン ── */
  .reservation-info {
    display: block;
    position: relative;
    padding: 0.5em;
    background-color: #0cb901;
    border-radius: 50px;
    margin: 0px 10px 10px 10px;
    font-weight: bold;
    font-size: 18px;
    max-width: 1000px;
    color: #fff;
    text-align: center;
    overflow: hidden;
    transition: 300ms;
  }
  .reservation-info::before {
    content: '';
    position: absolute;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    animation: shinyshiny 2.5s ease-in-out infinite;
  }
  .reservation-info a {
    color: #fff;
    text-decoration: none;
  }
  .reservation-info:hover {
    transform: translateY(3px);
  }
  @keyframes shinyshiny {
    0%   { transform: scale(0) rotate(45deg); opacity: 0; }
    80%  { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81%  { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
  }

  /* ── キラーンボタン 赤── */
  .reserve-info {
    display: block;
    position: relative;
    padding: 0.5em;
    background-color: #e60012;
    border-radius: 50px;
    margin: 10px 10px 10px;
    font-weight: bold;
    font-size: 18px;
    max-width: 1000px;
    color: #fff;
    text-align: center;
    overflow: hidden;
    transition: 300ms;
  }
  .reserve-info::before {
    content: '';
    position: absolute;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    animation: shinyshiny 2.5s ease-in-out infinite;
  }
  .reserve-info a {
    color: #fff;
    text-decoration: none;
  }
  .reserve-info:hover {
    transform: translateY(3px);
  }
  @keyframes shinyshiny {
    0%   { transform: scale(0) rotate(45deg); opacity: 0; }
    80%  { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81%  { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
  }
  
   /* ── キラーンボタン オレンジ── */
  .hotel-detail-info {
    display: block;
    position: relative;
    padding: 0.5em;
    background-color: #ffa500;
    border-radius: 50px;
    margin: 0px 10px 10px 10px;
    font-weight: bold;
    font-size: 18px;
    max-width: 1000px;
    color: #fff;
    text-align: center;
    overflow: hidden;
    transition: 300ms;
  }
  .hotel-detail-info::before {
    content: '';
    position: absolute;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    animation: shinyshiny 2.5s ease-in-out infinite;
  }
  .hotel-detail-info a {
    color: #fff;
    text-decoration: none;
  }
  .reservation-info:hover {
    transform: translateY(3px);
  }
  @keyframes shinyshiny {
    0%   { transform: scale(0) rotate(45deg); opacity: 0; }
    80%  { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81%  { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
  }


  /* ── ホテル情報テーブル ── */
  .hotel-info-table {
    padding: 8px;
  }
  .hotel-info-table table {
    width: 100%;
    border-collapse: collapse;
  }
  .hotel-info-table td {
    border: 1px solid #ccc;
    padding: 6px;
    font-size: 16px;
    text-align: center;
  }
  .star {
    color: #FBB03B;
    font-size: 18px;
  }
  .bsif-check{
    padding: 8px;
  }

  /* ── メッセージ & ローディング ── */
  .hotel-null,
  .gps-null {
    text-align: center;
    padding: 20px;
    font-size: 16px;
  }
  #loading {
    text-align: center;
    font-size: 16px;
    padding: 10px;
  }

  /* ── スマホ向け ── */
  @media (max-width: 767px) {
    #map { height: 400px; }
    #search-controls {
      gap: 4px;
      padding: 8px;
    }
    .hotel-name { font-size: 18px; }
    .hotel-spec,
    .price-label,
    .geo-distance {
      font-size: 14px;
    }
    .remaining-rooms { font-size: 16px; }
    .price-total { font-size: 20px; }
    .hotel-info-table td {
      padding: 4px;
      font-size: 16px;
    }
  }

  /* ── 滑らかスクロール ── */
  html {
    scroll-behavior: smooth;
  }

  /* ── フローティング「地図へ戻る」ボタン ── */
  .back-to-map {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: #000;
    color: #fff;
    padding: 8px;
    border-radius: 24px;
    text-decoration: none;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  .back-to-map:hover {
    background: #0056b3;
  }
 
   /* ── 固定ページ ── */ 
.l-mainContent__inner>.post_content {
    margin: 1em 0;
}

.w-pageTop, .w-singleBottom, .w-singleTop {
margin: 1em 0;
}
   /* ── topページ ── */ 
.top #content {
padding-top: 0em!important;
}
.w-frontTop {
margin:0.5em 1.5em;
padding-top: 1.5em;
}
.c-widget+.c-widget {
margin-top: 0.5em;
}
</style>