html {
  scroll-behavior: smooth;
}

#TOP > div:has(#htlContents) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#htlContents {
  margin: 0!important;
  min-width: unset;
  max-width: unset;
}

#htlContents, .travel__tab.travel__tab--top-page, #htlMainContent {
  width: 100%!important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#RthCustomizeW * {
  word-break: auto-phrase;
}

:root {
  --spacing: 0.25rem;
  --fs40: 40px;
  --color-cyan-400: oklch(78.9% 0.154 211.53);
  --color-sky-200: oklch(90.1% 0.058 230.902);
  --color-sky-400: oklch(71.5% 0.143 215.221);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-lime-300: oklch(89.7% 0.196 126.665);
}

#RthCustomizeW img {
  max-width: 100%;
  object-fit: cover;
}

#RthCustomizeW section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#RthCustomizeW .container {
  width: 100%;
  max-width: 950px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* MARK: CUSTOMS
*/

.top_nav {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.top_nav>a {
  display: table-cell;
  text-align: center;
  border-inline: 1px solid #ccc;
  text-decoration: none;
  font-weight: 600;
  color: #000;
}

.top_nav>a:hover {
  /* background: var(--color-sky-400);
  color: #fff; */
  opacity: 0.3;
  color: #000;
  text-decoration: none;
}

.top_nav>a>div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 12px;
}

.top_nav>a>div>small {
  font-weight: 900;
  font-size: 10px;
}

.bottom_2color {
  width: 90%;
  position: relative;
}

.bottom_2color::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(150%);
  height: 12px;
  background: linear-gradient(to right, var(--color-cyan-400) 25%, var(--color-lime-300) 25%, var(--color-lime-300) 50%, var(--color-cyan-400)  50%, var(--color-cyan-400)  75%, var(--color-lime-300) 75%, var(--color-lime-300) 100%)
}

.category-nav {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.category-nav > a {
  border: 1px solid #ccc;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  gap: 4px;
  position: relative;
}

.category-nav > a::after {
  content: "";
  width: 9px;
  height: 9px;
  background: #000;
  position: absolute;
  right: 4px;
  clip-path: polygon(0 15%, 50% 55%, 100% 15%, 100% 35%, 50% 75%, 0 35%);
}

.category-nav > a:hover {
  background-color: var(--color-sky-400);
  opacity: 0.6;
  color: #000;
  text-decoration: none;
}

.category-nav > a > span {
  font-size: 7px;
}

.square {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 34px;
  margin-left: 72px;
  position: relative;
  font-weight: bold;
}

.square > span {
  font-size: 20px;
}

.square::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: var(--color-sky-400);
  position: absolute;
  top: 0;
  transform: translateX(calc(-100% - 10px));
}

.type {
  width: 100%;
  scroll-margin-top: 85px;
}

.type h2{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding-block: 20px;
  background: linear-gradient(to top, var(--color-sky-200), #fff);
  position: relative;
  margin-bottom: 20px;
}

.type h2::before, .type h2::after {
  content: "";
  width: 100%;
  display: block;
  border-bottom: 1px dotted var(--color-neutral-500);
  position: absolute;
  bottom: 12px;
}

.type h2::after {
  width: 72px;
  border-bottom: 2px solid var(--color-cyan-400);
  left: 50%;
  transform: translate(-50%);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.card {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 20px;
}

.card .square {
  font-size: 16px;
  margin: 0;
  flex-direction: row;
  gap: 0;
  justify-content: start;
  align-items: center;
}

.card .square::before {
  background-color: #000;
  scale: 0.5;
  position: relative;
  transform: translateX(0);
}

.card > div:nth-child(2) {
  max-width: 560px;
  border-radius: 8px;
  overflow: hidden;
  top: 0;
}

.card > div:nth-child(3) {
  width: min-content;
  flex-grow: 1;
  font-size: 12px;
  color: var(--color-neutral-500);
  align-self: flex-end;
  display: flex;
  flex-direction: column;
}

.card > div:nth-child(3) > div:first-child {
  display: inline-block;
  margin-bottom: 32px;
}

.card > div:nth-child(3) > div:first-child::after {
  content: "";
  display: block;
  width: 90%;
  height: 1.5px;
  background-color: var(--color-neutral-500);
  transform: translateY(24px);
}

.card > div:nth-child(3) > div:first-child ul li {
  margin-left: 1em;
}

.card > div:nth-child(3) > div:first-child ul li::before {
  content: "※";
  position: absolute;
  transform: translateX(-100%);
}

.card > div:nth-child(3) > table {
  margin-bottom: 40px;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
}

.card > div:nth-child(3) table th {
  width: 100px;
  color: var(--color-sky-400);
}

.card > div:nth-child(3) > table td span{
  font-size: 8px;
}

.card > div:nth-child(3) > div {
  display: flex;
  gap: 2px;
}

.card > div:nth-child(3) > div > div{
  flex: 1;
  font-size: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card > div:nth-child(3) > div > div::before{
  content: "";
  width: 100%;
  aspect-ratio: 1/1;
  background-size: contain;
  height: auto;
  background-repeat: no-repeat;
  background-position: center;
}

.card > div:nth-child(3) > div > div::after{
  font-size: 8px;
}

.lg::before {
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/476f3537f33f3dccd2223635cd6b19d0ca8a5e01.47.9.26.3.jpg");
}

.lg::after {
  content: "LGスタイラー";
}

.wifi::before {
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/e03631b1924c9e6a5de3c814736e7a3ca6007f3e.47.9.26.3.jpg");
}

.wifi::after {
  content: "LGスタイラー";
}

.power::before {
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/bd5a72e9d79a2616727f6a80a5a5ca0722adf713.47.9.26.3.jpg");
}

.power::after {
  content: "コンセント 付ベッド";
}

.mattress::before {
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/8df54515fdca3a82ffdf132e0468dad2e3cb55a2.47.9.26.3.jpg");
}

.mattress::after {
  content: "高反発 マットレス";
}

.france::before {
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/b09012ede73e060de373e8b1b303e7ef25ce3b8c.47.9.26.3.jpg");
}

.france::after {
  content: "フランス ベッド";
}

.air-purifier::before {
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/8cecfa8ed8d366a479c1991a087dfc324f9b3d54.47.9.26.3.jpg");
}

.air-purifier::after {
  content: "加湿空気 清浄機";
}

.bathroom::before {
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/22ac7f9347d913db1ead3e9e1b686c3a84a858e4.47.9.26.3.jpg");
}

.bathroom::after {
  content: "バストイレ別";
}

.box {
  border: 2px solid var(--color-cyan-400);
  width: 100%;
  padding: 8px 20px 28;
  color: var(--color-cyan-400);
}

.box h3 {
  text-align: center;
  padding: 40px 0;
  margin-bottom: 32px;
  position: relative;
}

.box h3::after {
  content: "";
  display: block;
  width: 90%;
  height: 2px;
  background-color: var(--color-cyan-400);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.box p {
  font-size: 12px;
  font-weight: 600;
  line-height: 200%;
}

.footer-nav {
  display: flex;
  gap: 20px;
  padding-inline: 48px;
  width: 100%;
}

.footer-nav > a {
  flex: 1;
  border: 1px solid var(--color-neutral-300);
  padding: 30px 12px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.footer-nav > a::before {
  content: "";
  display: block;
  width: 25px;
  height: 25px;
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/5be1036a3f443be593b148053e6a11503338267e.47.9.26.3.jpg") no-repeat center;
  background-size: contain;
  flex-shrink: 0;
  border-radius: 50%;
}

.footer-nav > a > span, .footer-btn-group > a > span {
  width: 100%;
  text-align: center;
}

.footer-nav > a:hover {
  /* background: var(--color-sky-400);
  color: #fff; */
  opacity: 0.3;
  color: #000;
  text-decoration: none;
}

/* .footer-nav > a:hover::before {
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/e06cfc68fcc234a3cd0f5de17a1326ac52b6ed65.47.9.26.3.jpg") no-repeat center;
  background-size: contain;
} */

.footer-btn-group {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
}

.footer-btn-group > a {
  width: 120px;
  padding: 10px 8px;
  display: flex;
  background-color: var(--color-cyan-400);
  align-items: center;
  color: #fff;
}

.footer-btn-group > a::before {
  content: "";
  width: 10px;
  height: 10px;
  background: url("https://img.travel.rakuten.co.jp/share/image_up/182463/LARGE/e06cfc68fcc234a3cd0f5de17a1326ac52b6ed65.47.9.26.3.jpg") no-repeat center;
  background-size: contain;
  border-radius: 50%;
  flex-shrink: 0;
}

.footer-btn-group > a:hover {
  /* background: var(--color-neutral-300);
  color: var(--color-sky-400); */
  opacity: 0.3;
  color: #fff;
  text-decoration: none;
}

/* MARK: TAIL WIND
*/
.w-full {
  width: 100%;
}

.h-15 {
  height: calc(var(--spacing) * 15);
}

.w-45 {
  width: calc(var(--spacing) * 45);
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.shrink {
  flex-shrink: 0;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.absolute {
  position: absolute;
}

.top-37 {
  top: calc(var(--spacing) * 37);
}

.left-24 {
  left: calc(var(--spacing) * 24);
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.gap-6 {
  gap: calc(var(--spacing) * 6);
}

.gap-8 {
  gap: calc(var(--spacing) * 8);
}

.gap-10 {
  gap: calc(var(--spacing) * 10);
}

.gap-12 {
  gap: calc(var(--spacing) * 12);
}

.gap-20 {
  gap: calc(var(--spacing) * 20);
}

.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}

.mt-15 {
  margin-top: calc(var(--spacing) * 15);
}

.mt-18 {
  margin-top: calc(var(--spacing) * 18);
}

.mt-26 {
  margin-top: calc(var(--spacing) * 26);
}

.mb-18 {
  margin-bottom: calc(var(--spacing) * 18);
}

.p-12 {
  padding: calc(var(--spacing) * 12);
}

.pt-11 {
  padding-top: calc(var(--spacing) * 11);
}

.pb-12 {
  padding-bottom: calc(var(--spacing) * 12);
}

.pb-17 {
  padding-bottom: calc(var(--spacing) * 17);
}

.px-12 {
  padding-inline: calc(var(--spacing) * 12);
}

.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}

.text-xs {
  font-size: 12px;
  line-height: 1em;
}

.text-xl {
  font-size: 20px;
  line-height: 1em;
}

.text-3xl {
  font-size: 32px;
  line-height: 1em;
}

.text-7xl {
  font-size: 72px;
  line-height: 1em;
}

.text-\(length\:--fs40\) {
  font-size: var(--fs40);
  line-height: 1em;
}

.leading-7 {
  line-height: 28px;
}

.text-nowrap {
  text-wrap: nowrap;
}

.bold {
  font-weight: bold;
}

.text-white {
  color: white;
}

.text-neutral-500 {
  color: var(--color-neutral-500);
}

.border-4 {
  border-width: 4px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-neutral-300 {
  border-color: var(--color-neutral-300)
}

.border-cyan-400 {
  border-color: var(--color-cyan-400)
}

.border-black {
  border-color: #000;
}

.border-solid {
  border-style: solid;
}





section.container {
  display: block;
}