/* 共通要素 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  /* 青みがかった白背景 */
  background-color: #f5faff;
  /* 縦方向オーバースクロールを禁止 */
  /* overscroll-behavior-y: none; */
}

/* フォント等継承させたい要素をbodyにて記述 */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
}
/* buttonやinputなどのフォーム要素にもbodyのフォントを継承させる */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/*
  header, main, footer等や、
  btn, btn-◯◯等の複数バリエーションを用意するスタイルを
  大きな塊としてネスト形式で記述
*/
/* header */
header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  border-bottom: 1px solid #ccc;
  box-shadow: 0px 0px 1px 1px #bbb;
  height: 64px;
  max-height: 64px;
  background-color: #fff;
  nav {
    height: 100%;
  }
  .wrap-listItems {
    list-style: none;
    text-align: center;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-areas: "space logo humburger";
    padding: 0 8px;
    height: 100%;
  }
  li:has(.header-imgLogo) {
    grid-area: logo;
  }
  .header-imgLogo {
    display: inline-block;
  }
  .header-imgLogo img {
    width: auto;
    height: 52px;
  }
  li:has(.header-open-trigger) {
    grid-area: humburger;
    text-align: right;
  }

  .header-open-trigger {
    border: none;
    background-color: transparent;
    box-shadow: none;
    color: #2471a3;
    cursor: pointer;
    padding: 0;
    .fa-bars {
      width: 40px;
      height: 40px;
    }
  }
}

/* humburger(dialog) */
.humburger {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin-left: auto;
  border: none;
  width: 50vw;
  height: 100vh;
  max-height: 100vh;
}
.humburger[open] {
  animation: slideIn 0.3s ease-out forwards;
}
.humburger[open]::backdrop {
  opacity: 0.5;
  animation: fadeIn 0.3s ease-out forwards;
}
.humburger nav {
  height: 100%;
}
.humburger ul {
  list-style: none;
  border-collapse: collapse;
  height: calc(100% - 64px);
  background-color: #f5faff;
  overflow-y: auto;
}
.humburger-header {
  align-items: center;
  justify-content: end;
  display: flex;
  border-bottom: 1px solid #ccc;
  padding: 0 8px;
  height: 64px;
  background-color: #fff;
}

.header-close-trigger {
  border: none;
  background-color: transparent;
  box-shadow: none;
  color: #2471a3;
  cursor: pointer;
  padding: 0;
  .fa-xmark {
    width: 40px;
    height: 40px;
  }
}
ul .nav-item {
  border-bottom: 1px solid #ccc;
}
.nav-item button {
  padding: 4px 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* アニメーション定義 */
/* 右側100%の位置から、本来の「0」の位置へ移動 */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes fadeIn {
  from {
    background-color: transparent;
  }
  to {
    background-color: #333;
    opacity: 0.5;
  }
}

/*
  FAE（フローティング要素）
  画面左下に表示させる要素
*/
.element-floating {
  position: fixed;
  right: 12px;
  bottom: 24px;
  z-index: 2;
  margin: auto auto 0 0;
  border: 1px solid #666;
  border-radius: 4px;
  height: fit-content;
  box-shadow: 0 2px 4px #0000004d;
}
.alert {
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

.alert-error {
  background-color: #fce4e4;
  color: #c0392b;
  border: 1px solid #f5c6cb;
}

/* main,container */
main,
.container {
  margin-top: 64px;
  /* padding: 1.5rem 0; */
  /* トップ要素イメージ画像 */
  .system-image {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
  }
  .system-image img {
    grid-area: stack;
    width: 100%;
    height: auto;
    /* aspect-ratio: 4 / 3; */
  }
  .system-image .shade {
    grid-area: stack;
    width: 100%;
    height: 100%;
    /* 背景色#000と透明度20%を一度に指定 */
    background-color: #00000033;
  }
  .system-image h1 {
    align-self: end;
    justify-self: start;
    grid-area: stack;
    padding: 32px 0 12px 12px;
    width: 90%;
    background-color: #2471a3b3;
    color: #fff;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
  /* 内容ul */
  .sections {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 16px 0;
    padding: 0 8px;
    gap: 16px;
  }
  /* 共通要素 */
  /* 各セクションごとのタイトル */
  section h2 {
    margin-bottom: 4px;
    border-left: 8px double #2471a3;
    padding-left: 4px;
  }
  /* セクション内pタグ、部屋カード、支払方法オプション */
  section p,
  article:is(.room-card, .payment-options) {
    padding: 0 8px;
  }

  /* 料金表 */
  .explanation-status {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }
  .explanation-status label:has(.badge-occupied,.badge-cleaning,.badge-not-available) {
    margin-left: 14px;
  }
  .explanation-status span {
    height: 20px;
  }
  .pricing-table {
    margin: 16px 0;
    border-collapse: collapse;
    border: 3px solid #ddd;
    width: 100%;
  }

  .pricing-table th,
  .pricing-table td {
    /* text-align: left; */
    padding: 8px 6px;
    border: 1px solid #ddd;
    font-size: 0.95em;
  }

  .pricing-table th {
    text-align: center;
    border-bottom: 3px solid #ddd;
    background-color: #2080bc;
    color: #fff;
    font-weight: 700;
  }

  .center-alighned {
    text-align: center;
  }

  .right-alighned {
    text-align: right;
  }

  .roomName-andStatus {
    align-items: center;
    display: flex;
    gap: 4px;
  }

  .badge {
    align-items: center;
    justify-content: center;
    display: inline-flex;
    border-width: 1px;
    border-style: solid;
    border-color: #ddd;
    border-radius: 10px;
    padding: 4px;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 0.5rem;
    &.badge-occupied {
      background-color: #bd2042;
    }
    &.badge-not-occupied {
      background-color: #20bd5c;
    }
    &.badge-cleaning {
      background-color: #ffcc29;
      color: #555;
    }
    &.badge-not-available {
      background-color: #999;
    }
  }

  /* 本アプリの強みセクション */
  .wrap-strength-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .strength-points {
    border-radius: 4px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 2px 4px #0000001a;
  }
  /* .strength-points h3{
    
  } */
  .wrap-explanation {
    align-items: center;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    min-height: 96px;
  }
  .wrap-explanation svg {
    width: 48px;
    height: 48px;
    color: #2471a3;
  }

  /* 利用特典セクション */
  .benefits .benefits-image {
    margin: 0 auto;
    width: 100%;
  }
  .benefits-image img {
    width: 100%;
    height: auto;
  }

  /* 各部屋の情報セクション（カルーセル） */
  .wrap-carousel {
    display: grid;
    grid-template-areas: "stack";
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    overflow: hidden;
  }
  .wrap-carousel .carousel {
    /* align-self: center;
    justify-self: center; */
    grid-area: stack;
    list-style: none;
    display: flex;
    /* overflow: hidden; */
    transition: transform 0.4s ease-in-out;
  }
  .carousel li {
    /*
      親要素の大きさを超えないように縮まる
      デフォルトスタイル処理を無効化
    */
    flex-shrink: 0;
    width: 100%;
  }
  .room-card {
    display: flex;
    flex-direction: column;
  }
  .room-card-action {
    margin-top: auto;
    padding-top: 12px;
    text-align: center;
  }
  .room-card .room-image {
    margin: 0 auto;
    width: 90%;
  }
  .room-image img {
    width: 100%;
    /* height: auto; */
    aspect-ratio: 4 / 3;
  }
  .room-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    border-collapse: collapse;
    border: 3px solid #ddd;
  }

  .room-card dl :is(dt, dd) {
    border: 1px solid #ddd;
    padding: 8px;
  }
  .room-card dl dt {
    background-color: #2080bc;
    color: #fff;
    font-weight: 700;
  }
  .room-card dl dd {
    background-color: #fff;
  }
  .room-card dl .network-speed {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .network-speed label {
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .network-speed label::after {
    content: "：";
  }

  /* 支払方法セクション */
  .payment-options .real-money {
    list-style: none;
    padding-left: 24px;
  }
  .payment-options ul:not(.real-money) {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 16px;
    gap: 8px;
  }
  .payment-options ul:not(.real-money) li {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #2471a3; */
    border-radius: 4px;
    padding: 4px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px #0000001a;
  }
  .payment-options ul li svg {
    color: #2471a3;
    width: 48px;
    height: 48px;
  }
  .payment-options ul li span {
    font-size: 1.1rem;
    font-weight: 600;
  }
}

/* footer */
footer {
  /* 内包要素が多い場合はstickyは画面占有率を高める */
  /* position: sticky;
  right: 0;
  bottom: 0;
  left: 0; */
  /* text-align: center; */
  border-top: 1px solid #ccc;
  box-shadow: 0px 0px 1px 1px #bbb;
  padding: 1rem;
  background-color: #ecf0f1;
  color: #5f6c8d;
  font-size: 0.75rem;
  ul {
    list-style: none;
    text-align: left;
  }
  a {
    color: #2471a3;
    text-decoration: none;
  }
  .footer-imgLogo {
    margin: 0 auto;
    width: 35%;
  }
  .footer-imgLogo img {
    width: 100%;
    height: auto;
  }
  .copyright {
    text-align: center;
  }
}

/* h1~h6のh系タグ */
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 1.2rem;
}
h3 {
  font-size: 1.1rem;
}

/* 文字装飾用span */
.red-character {
  color: #f00;
}

/* buttonのスタイル一覧 */
.btn {
  display: inline-block;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  &:not(:is(header *, .humburger *, .btn-occupied)):active {
    transform: scale(0.95);
  }
  &.btn-primary {
    border-radius: 0px;
    background-color: #3498db;
    color: #fff;
  }
  &.btn-secondary {
    border-radius: 0px;
    background-color: #95a5a6;
    color: #fff;
  }
  &.btn-floating {
    padding: 4px 8px;
    background-color: #2471a3;
    color: #fff;
    font-size: 1.1rem;
  }
  &.btn-occupied {
    padding: 8px 16px;
    min-width: 296px;
    background-color: #95a5a6;
    color: #ddd;
    font-size: 1.1rem;
    opacity: 0.45;
    cursor: no-drop;
  }
  &.btn-reserve {
    padding: 8px 16px;
    min-width: 296px;
    background-color: #3498db;
    color: #fff;
  }
  &:is(.btn-before, .btn-after) {
    grid-area: stack;
    z-index: 1;
    /* text-align: center; */
    border: 1px solid #666;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    background-color: #eee;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
  }
  &.btn-before {
    align-self: center;
    justify-self: start;
  }
  &.btn-after {
    align-self: center;
    justify-self: end;
  }
  &:disabled {
    background-color: #95a5a6; 
    color: #333;
    cursor: not-allowed;
  }
}
.businessHours{
  padding: 5px;
}