/* グローバル */
:root {
  /* レイアウト */
  --body-padding-inline: 5svw;

  /* カラー */
  --color-base: #f2f2f0;
  --color-white: #fff;
  --color-black: #212121;
  --color-green: #388e3c;

  /* フォント */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
}

#topics main {
  color: var(--color-black);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: var(--font-weight-medium);
  font-optical-sizing: auto;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
  :root {
    --body-padding-inline: 40px;
  }
}

/* アイキャッチ */
.eyecatch {
  background: #e2e2e2;
}

.eyecatch img {
  aspect-ratio: 2 / 1;
  display: flex;
  height: auto;
  width: 100%;
}

/* 記事本文 */
.body {
  padding-block: 20px 0;
  padding-inline: var(--body-padding-inline);
}

:is(#topics .body) h1:not([class]) {
  color: var(--color-black);
  font-size: 32px;
  font-weight: var(--font-weight-light);
  -webkit-font-smoothing: auto;
  line-height: 1.5;
}

:is(#topics .body) h2:not([class]) {
  border-top: 3px solid var(--color-base);
  color: var(--color-black);
  font-size: 24px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  margin-inline: calc(0px - var(--body-padding-inline));
  padding-top: 30px;
  padding-inline: var(--body-padding-inline);
}

:is(#topics .body) * + h2:not([class]) {
  margin-top: 30px;
}

:is(#topics .body) h3:not([class]) {
  --border-width: 2px;
  border-bottom: var(--border-width) solid var(--color-base);
  color: var(--color-black);
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  padding-bottom: 15px;
  position: relative;
}

:is(#topics .body) h3:not([class])::after {
  background: var(--color-green);
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--border-width);
  width: 20%;
}

:is(#topics .body) * + h3:not([class]) {
  margin-top: 25px;
}

:is(#topics .body) p:not([class]) {
  color: var(--color-black);
  font-size: 14px;
  line-height: 2.2;
}

:is(#topics .body) *:not(p) + p:not([class]) {
  margin-top: 15px;
}

:is(#topics .body) p + p:not([class]) {
  margin-top: 10px;
}

:is(#topics .body) a:not([class]) {
  color: var(--color-black);
  text-decoration: underline;
  transition: color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  :is(#topics .body) a:not([class]):hover {
    color: var(--color-green);
  }
}

@media screen and (min-width: 768px) {
  .body {
    padding-block: 40px 60px;
  }

  :is(#topics .body) h1:not([class]) {
    font-size: 36px;
  }

  :is(#topics .body) h2:not([class]) {
    font-size: 28px;
    padding-top: 40px;
  }

  :is(#topics .body) * + h2:not([class]) {
    margin-top: 60px;
  }

  :is(#topics .body) h3:not([class]) {
    font-size: 21px;
  }

  :is(#topics .body) * + h3:not([class]) {
    margin-top: 40px;
  }

  :is(#topics .body) p:not([class]) {
    font-size: 16px;
    line-height: 2;
  }

  :is(#topics .body) *:not(p) + p:not([class]) {
    margin-top: 20px;
  }

  :is(#topics .body) p + p:not([class]) {
    margin-top: 15px;
  }
}

/* ホテル画像 */
.hotel-images {
  margin-top: 20px;
  width: 100%;
}

.hotel-image {
  background: #e2e2e2;
  position: relative;
}

.hotel-image img {
  aspect-ratio: 880 / 480;
  display: flex;
  height: auto;
  width: 100%;
}

.hotel-image-caption {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  color: var(--color-white);
  font-size: 12px;
  line-height: 1.3;
  padding-block: 10px 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  width: 100%;
}

@media screen and (min-width: 768px) {
  .hotel-images {
    margin-top: 40px;
  }

  .hotel-image-caption {
    font-size: 16px;
    padding-block: 30px 15px;
  }
}

/* サウナ情報 */
.hotel-info {
  align-items: flex-start;
  display: grid;
  gap: 20px;
  margin-top: 10px;
}

.sauna-detail tr {
  display: grid;
  grid-template-columns: 30% 1fr;
}

.sauna-detail :is(th, td) {
  align-items: center;
  border-bottom-width: 1px;
  display: grid;
  font-size: 14px;
  padding: 10px 5px;
  word-break: keep-all;
}

.sauna-detail th {
  border-bottom-color: var(--color-green);
  line-height: 1.5;
  color: var(--color-green);
}

.sauna-detail td {
  border-bottom-color: var(--color-base);
  line-height: 2;
  word-break: break-all;
}

.recommended {
  background: linear-gradient(90deg, #86d67c, #61d92d);
  padding: 0 5px 5px;
}

.recommended-heading {
  --icon-size: 18px;
  align-items: center;
  color: var(--color-white);
  display: grid;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  gap: 5px;
  grid-template-columns: auto var(--icon-size);
  justify-content: center;
  line-height: 1.3;
  padding-block: 10px;
}

.recommended-heading::after {
  aspect-ratio: 1 / 1;
  background: currentColor;
  content: '';
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 19.2501H6.41671V7.33341L12.8334 0.916748L13.9792 2.06258C14.0862 2.16953 14.174 2.31466 14.2427 2.498C14.3115 2.68133 14.3459 2.85703 14.3459 3.02508V3.34591L13.3375 7.33341H19.25C19.7389 7.33341 20.1667 7.51675 20.5334 7.88341C20.9 8.25008 21.0834 8.67786 21.0834 9.16675V11.0001C21.0834 11.107 21.0681 11.2216 21.0375 11.3438C21.007 11.4661 20.9764 11.5806 20.9459 11.6876L18.1959 18.1501C18.0584 18.4556 17.8292 18.7154 17.5084 18.9292C17.1875 19.1431 16.8514 19.2501 16.5 19.2501ZM8.25004 17.4167H16.5L19.25 11.0001V9.16675H11L12.2375 4.12508L8.25004 8.11258V17.4167ZM6.41671 7.33341V9.16675H3.66671V17.4167H6.41671V19.2501H1.83337V7.33341H6.41671Z" /></svg>');
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: cover;
  height: auto;
  width: 100%;
}

.recommended-body {
  background: var(--color-white);
  display: grid;
  gap: 5px;
  padding: 10px 15px;
}

:is(#topics .body) .recommended-body p:not([class]) {
  font-size: 14px;
  line-height: 2;
  margin-top: 0 !important;
}

.recommended-body strong {
  color: var(--color-green);
  font-weight: var(--font-weight-bold);
}

@media screen and (min-width: 768px) {
  .hotel-info {
    gap: 30px;
    grid-template-columns: 60% 1fr;
    margin-top: 20px;
  }

  .sauna-detail :is(th, td) {
    font-size: 16px;
    padding: 10px;
  }

  .recommended-heading {
    --icon-size: 22px;
    font-size: 18px;
  }
}

/* CTAボタン */
.reserve {
  --shadow-offset: 6px;
  display: block;
  margin-top: 30px;
  position: relative;
  transition: translate 0.15s ease;
  z-index: 1;
}

.reserve::before {
  content: '';
  background: #16641a;
  border-radius: 9999px;
  position: absolute;
  top: var(--shadow-offset);
  left: 0;
  transition: top 0.15s ease;
  height: 100%;
  width: 100%;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  .reserve:hover {
    translate: 0 6px;
  }

  .reserve:hover::before {
    top: 0;
  }
}

.reserve-label {
  background: var(--color-white);
  border: 2px solid var(--color-green);
  border-radius: 9999px;
  color: var(--color-green);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  margin-inline: auto;
  padding: 3px 10px;
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  width: max-content;
  z-index: 1;
}

.reserve-title {
  --icon-size: 16px;
  align-items: center;
  background: var(--color-green);
  border-radius: 9999px;
  color: var(--color-white);
  display: grid;
  gap: 10px;
  grid-template-columns: auto var(--icon-size);
  justify-content: center;
  font-size: 21px;
  line-height: 1.5;
  padding-block: 30px;
  transition: filter 0.15s ease;
}

.reserve-title::after {
  aspect-ratio: 1 / 1;
  background: currentColor;
  content: '';
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6.68748 18.3332L5.20831 16.854L12.0625 9.99984L5.20831 3.14567L6.68748 1.6665L15.0208 9.99984L6.68748 18.3332Z" /></svg>');
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: cover;
  height: auto;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .reserve:hover .reserve-title {
    filter: brightness(0.95);
  }
}

@media screen and (min-width: 768px) {
  .reserve {
    margin-top: 40px;
  }

  .reserve-label {
    font-size: 16px;
    padding: 5px 15px;
  }

  .reserve-title {
    --icon-size: 20px;
    gap: 15px;
    font-size: 24px;
    padding-block: 40px;
  }
}

/* ホテル詳細 */
.hotel-detail {
  background: #effcf0;
  margin-top: 30px;
  padding: 20px;
}

.hotel-detail-heading {
  border-bottom: 1px solid var(--color-green);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  padding-bottom: 5px;
}

.hotel-detail-main {
  display: grid;
  gap: 10px;
  padding-top: 15px;
}

.hotel-detail-item {
  --icon-size: 20px;
  align-items: center;
  display: grid;
  font-size: 14px;
  gap: 8px;
  grid-template-columns: var(--icon-size) 1fr;
  line-height: 1.5;
}

.hotel-detail-item::before {
  aspect-ratio: 1 / 1;
  background: var(--color-green);
  content: '';
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: cover;
  height: auto;
  width: 100%;
}

.hotel-detail-item[data-icon='tel']::before {
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16.625 17.5C14.8889 17.5 13.1736 17.1215 11.4792 16.3646C9.78472 15.6076 8.24306 14.5347 6.85417 13.1458C5.46528 11.7569 4.39236 10.2153 3.63542 8.52083C2.87847 6.82639 2.5 5.11111 2.5 3.375C2.5 3.125 2.58333 2.91667 2.75 2.75C2.91667 2.58333 3.125 2.5 3.375 2.5H6.75C6.94444 2.5 7.11806 2.56597 7.27083 2.69792C7.42361 2.82986 7.51389 2.98611 7.54167 3.16667L8.08333 6.08333C8.11111 6.30556 8.10417 6.49306 8.0625 6.64583C8.02083 6.79861 7.94444 6.93056 7.83333 7.04167L5.8125 9.08333C6.09028 9.59722 6.42014 10.0938 6.80208 10.5729C7.18403 11.0521 7.60417 11.5139 8.0625 11.9583C8.49306 12.3889 8.94444 12.7882 9.41667 13.1563C9.88889 13.5243 10.3889 13.8611 10.9167 14.1667L12.875 12.2083C13 12.0833 13.1632 11.9896 13.3646 11.9271C13.566 11.8646 13.7639 11.8472 13.9583 11.875L16.8333 12.4583C17.0278 12.5139 17.1875 12.6146 17.3125 12.7604C17.4375 12.9063 17.5 13.0694 17.5 13.25V16.625C17.5 16.875 17.4167 17.0833 17.25 17.25C17.0833 17.4167 16.875 17.5 16.625 17.5Z" /></svg>');
}

.hotel-detail-item[data-icon='pin']::before {
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 10.0001C10.4583 10.0001 10.8507 9.83689 11.1771 9.5105C11.5035 9.18411 11.6667 8.79175 11.6667 8.33341C11.6667 7.87508 11.5035 7.48272 11.1771 7.15633C10.8507 6.82994 10.4583 6.66675 10 6.66675C9.54168 6.66675 9.14932 6.82994 8.82293 7.15633C8.49654 7.48272 8.33334 7.87508 8.33334 8.33341C8.33334 8.79175 8.49654 9.18411 8.82293 9.5105C9.14932 9.83689 9.54168 10.0001 10 10.0001ZM10 18.3334C7.7639 16.4306 6.09376 14.6633 4.98959 13.0313C3.88543 11.3994 3.33334 9.88897 3.33334 8.50008C3.33334 6.41675 4.00348 4.75703 5.34376 3.52091C6.68404 2.2848 8.23612 1.66675 10 1.66675C11.7639 1.66675 13.316 2.2848 14.6563 3.52091C15.9965 4.75703 16.6667 6.41675 16.6667 8.50008C16.6667 9.88897 16.1146 11.3994 15.0104 13.0313C13.9063 14.6633 12.2361 16.4306 10 18.3334Z" /></svg>');
}

.hotel-detail-item[data-icon='train']::before {
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3.33334 12.9167V5.00008C3.33334 4.26397 3.52432 3.67717 3.90626 3.23966C4.2882 2.80216 4.79168 2.46883 5.41668 2.23966C6.04168 2.0105 6.75348 1.85772 7.55209 1.78133C8.3507 1.70494 9.16668 1.66675 10 1.66675C10.9167 1.66675 11.7813 1.70494 12.5938 1.78133C13.4063 1.85772 14.1146 2.0105 14.7188 2.23966C15.3229 2.46883 15.7986 2.80216 16.1458 3.23966C16.4931 3.67717 16.6667 4.26397 16.6667 5.00008V12.9167C16.6667 13.7362 16.3854 14.4272 15.8229 14.9897C15.2604 15.5522 14.5695 15.8334 13.75 15.8334L15 17.0834V17.5001H13.3333L11.6667 15.8334H8.33334L6.66668 17.5001H5.00001V17.0834L6.25001 15.8334C5.43057 15.8334 4.73959 15.5522 4.17709 14.9897C3.61459 14.4272 3.33334 13.7362 3.33334 12.9167ZM5.00001 8.33342H9.16668V5.83342H5.00001V8.33342ZM10.8333 8.33342H15V5.83342H10.8333V8.33342ZM7.08334 13.3334C7.44445 13.3334 7.74307 13.2154 7.97918 12.9792C8.21529 12.7431 8.33334 12.4445 8.33334 12.0834C8.33334 11.7223 8.21529 11.4237 7.97918 11.1876C7.74307 10.9515 7.44445 10.8334 7.08334 10.8334C6.72223 10.8334 6.42362 10.9515 6.18751 11.1876C5.9514 11.4237 5.83334 11.7223 5.83334 12.0834C5.83334 12.4445 5.9514 12.7431 6.18751 12.9792C6.42362 13.2154 6.72223 13.3334 7.08334 13.3334ZM12.9167 13.3334C13.2778 13.3334 13.5764 13.2154 13.8125 12.9792C14.0486 12.7431 14.1667 12.4445 14.1667 12.0834C14.1667 11.7223 14.0486 11.4237 13.8125 11.1876C13.5764 10.9515 13.2778 10.8334 12.9167 10.8334C12.5556 10.8334 12.257 10.9515 12.0208 11.1876C11.7847 11.4237 11.6667 11.7223 11.6667 12.0834C11.6667 12.4445 11.7847 12.7431 12.0208 12.9792C12.257 13.2154 12.5556 13.3334 12.9167 13.3334Z" /></svg>');
}

.hotel-detail-item[data-icon='car']::before {
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 15.8334V16.6667C5 16.9029 4.92014 17.1008 4.76042 17.2605C4.60069 17.4202 4.40278 17.5001 4.16667 17.5001H3.33333C3.09722 17.5001 2.89931 17.4202 2.73958 17.2605C2.57986 17.1008 2.5 16.9029 2.5 16.6667V10.0001L4.25 5.00008C4.33333 4.75008 4.48264 4.54869 4.69792 4.39591C4.91319 4.24314 5.15278 4.16675 5.41667 4.16675H14.5833C14.8472 4.16675 15.0868 4.24314 15.3021 4.39591C15.5174 4.54869 15.6667 4.75008 15.75 5.00008L17.5 10.0001V16.6667C17.5 16.9029 17.4201 17.1008 17.2604 17.2605C17.1007 17.4202 16.9028 17.5001 16.6667 17.5001H15.8333C15.5972 17.5001 15.3993 17.4202 15.2396 17.2605C15.0799 17.1008 15 16.9029 15 16.6667V15.8334H5ZM4.83333 8.33341H15.1667L14.2917 5.83341H5.70833L4.83333 8.33341ZM6.25 13.3334C6.59722 13.3334 6.89236 13.2119 7.13542 12.9688C7.37847 12.7258 7.5 12.4306 7.5 12.0834C7.5 11.7362 7.37847 11.4411 7.13542 11.198C6.89236 10.9549 6.59722 10.8334 6.25 10.8334C5.90278 10.8334 5.60764 10.9549 5.36458 11.198C5.12153 11.4411 5 11.7362 5 12.0834C5 12.4306 5.12153 12.7258 5.36458 12.9688C5.60764 13.2119 5.90278 13.3334 6.25 13.3334ZM13.75 13.3334C14.0972 13.3334 14.3924 13.2119 14.6354 12.9688C14.8785 12.7258 15 12.4306 15 12.0834C15 11.7362 14.8785 11.4411 14.6354 11.198C14.3924 10.9549 14.0972 10.8334 13.75 10.8334C13.4028 10.8334 13.1076 10.9549 12.8646 11.198C12.6215 11.4411 12.5 11.7362 12.5 12.0834C12.5 12.4306 12.6215 12.7258 12.8646 12.9688C13.1076 13.2119 13.4028 13.3334 13.75 13.3334Z" /></svg>');
}

.hotel-detail-item[data-icon='parking']::before {
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 17.5V2.5H10.8333C12.2222 2.5 13.4028 2.98611 14.375 3.95833C15.3472 4.93056 15.8333 6.11111 15.8333 7.5C15.8333 8.88889 15.3472 10.0694 14.375 11.0417C13.4028 12.0139 12.2222 12.5 10.8333 12.5H8.33333V17.5H5ZM8.33333 9.16667H11C11.4583 9.16667 11.8507 9.00347 12.1771 8.67708C12.5035 8.35069 12.6667 7.95833 12.6667 7.5C12.6667 7.04167 12.5035 6.64931 12.1771 6.32292C11.8507 5.99653 11.4583 5.83333 11 5.83333H8.33333V9.16667Z" /></svg>');
}

.hotel-detail-item[data-icon='link']::before {
  mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.16666 14.1666H5.83332C4.68054 14.1666 3.69791 13.7603 2.88541 12.9478C2.07291 12.1353 1.66666 11.1527 1.66666 9.99992C1.66666 8.84714 2.07291 7.8645 2.88541 7.052C3.69791 6.2395 4.68054 5.83325 5.83332 5.83325H9.16666V7.49992H5.83332C5.13888 7.49992 4.5486 7.74297 4.06249 8.22908C3.57638 8.7152 3.33332 9.30547 3.33332 9.99992C3.33332 10.6944 3.57638 11.2846 4.06249 11.7708C4.5486 12.2569 5.13888 12.4999 5.83332 12.4999H9.16666V14.1666ZM6.66666 10.8333V9.16658H13.3333V10.8333H6.66666ZM10.8333 14.1666V12.4999H14.1667C14.8611 12.4999 15.4514 12.2569 15.9375 11.7708C16.4236 11.2846 16.6667 10.6944 16.6667 9.99992C16.6667 9.30547 16.4236 8.7152 15.9375 8.22908C15.4514 7.74297 14.8611 7.49992 14.1667 7.49992H10.8333V5.83325H14.1667C15.3194 5.83325 16.3021 6.2395 17.1146 7.052C17.9271 7.8645 18.3333 8.84714 18.3333 9.99992C18.3333 11.1527 17.9271 12.1353 17.1146 12.9478C16.3021 13.7603 15.3194 14.1666 14.1667 14.1666H10.8333Z" /></svg>');
}

@media screen and (min-width: 768px) {
  .hotel-detail {
    padding: 30px;
  }
}