@charset "utf-8";

body {
  background-color: #fafafa;
}

#id_maincontrol_block {
  background-color: #fafafa;
  width: 70%;
  height: auto;
  margin: auto;
  padding-top: calc(80 / 1600 * 100vw);
}
#id_maincontrol_block_child {
  width: 70%;
  margin: auto;
}

.header, .header .site-name-text {
  color: #000;
}
#header {
  background-color: #ffcc00;
}
.header-container-in.hlt-top-menu {
  background-color: #ffcc00;
}

/* footer設定 */
#footer {
  background-color: #ffcc00;
  width: 70%;
  margin: auto;
}

#id_footer_alltext {
  width: 60%;
  height: 100%;
  margin: auto;
  background-color: #ffcc00;
  font-size: 13px;
  margin-top: 20px;
}

#id_footer_detail_block {
  display: flex;
  align-items: center;
  margin: auto;
}

#id_footer_name {
  margin: 20px 0px;
}

#id_footer_detail_left {
  width: 65%;
  height: auto;
  margin: 10px 0px;
}

#id_footer_detail_right {
  width: 35%;
  height: auto;
  margin: 10px 0px;
}

#id_footer_copyright {
  text-align: center;
  margin: 20px 0px;
  font-weight: bold;
}

input[type="date"] {
  border: 2px solid #333;
  font-size: 18px;
  padding: 5px;
}

select[name="your-time"] option {
  font-size: 16px;
}

select[name="your-time"] option:disabled {
  color: red;
  text-decoration: line-through;
}

/* 🔹 PC用（デフォルト）カレンダーと時間選択を横並びに */
#datetimepicker-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* カレンダーのデザイン調整 */
#datepicker {
  width: 300px;
  font-size: 14px;
}

/* 時間選択リストのデザイン */
.ui-timepicker-list {
  list-style: none;
  padding: 5px;
  margin: 0;
  width: 120px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  z-index: 1000;
  max-height: 200px; /* 🔹 スクロール可能にする */
  overflow-y: auto;
  display: none;
}

.ui-timepicker-list li {
  padding: 5px;
  cursor: pointer;
  transition: background 0.2s;
}

.ui-timepicker-list li:hover {
  background: #ddd;
}

.ui-timepicker-list li.selected {
  background: #fff32f;
  color: black;
}


/* ラジオボタンを横並びにする */
.radio-container p {
  display: flex;
  justify-content: left; /* 中央寄せ */
  align-items: center;
  gap: 20px; /* ラベル間の間隔 */
  flex-wrap: nowrap; /* 折り返さない */
  flex-direction: row;
  margin: 10px 0px;
}

/* ラジオボタンのスタイル */
.radio-container label {
  display: flex;
  align-items: center;
  gap: 8px; /* ラジオボタンとテキストの間隔 */
  white-space: nowrap; /* テキストの折り返し防止 */
}

/* ラジオボタンを大きくしてクリックしやすく */
.radio-container input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
}

.radio-container input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: currentColor;
}



label {
  display: block; /* 🔹 ラベルをブロック要素にする（改行される） */
  margin-bottom: 10px; /* 🔹 ラベルと入力欄の間に適度な余白をつける */
}

input,
textarea,
select {
  width: 100%; /* 🔹 入力欄の幅を統一（必要に応じて調整） */
  padding: 8px; /* 🔹 入力欄の余白 */
  box-sizing: border-box; /* 🔹 幅を padding と border を含めたサイズに */
}

/* フォーム全体のスタイルを調整（必要に応じて） */
#form_request, #form_reservation, #form_inquiry {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 5px; /* 🔹 各要素の間に10pxの隙間 */
}
form br {
  display: none;
}

::placeholder {
  color: #bbb; /* 🔹 グレー */
  font-style: italic; /* 🔹 斜体にする */
  font-size: 14px; /* 🔹 文字サイズ */
  opacity: 1; /* 🔹 薄くならないように調整 */
}

.custom-error {
  color: red;
  font-size: 12px;
  margin-left: 5px;
}

/* スマホでも横並びにする */
@media screen and (max-width: 834px) {
  .radio-container p {
    flex-direction: row !important; /* 🔹 スマホでも横並びを維持 */
  }
  #id_footer_alltext {
    display: block;
    width: 70%;
    height: 150%;
    font-size: 11px;
    margin-top: 10px;
  }

  #id_footer_name {
    margin: 0px 0px;
  }
  #id_footer_detail_block {
    display: block;
    width: 100%;
    margin: auto;
  }
  #id_footer_detail_left {
    width: 100%;
    height: auto;
    margin: 10px 0px;
  }
  #id_footer_detail_right {
    width: 100%;
    height: auto;
    margin:10px 0px;
    margin-bottom: 20px;
  }
  #id_footer_copyright {
    height: 80px;
    text-align: center;
    margin:10px 0px;
    font-weight: bold;
  }
}




/* 🔹 スマホ対応 (max-width: 834px) */
@media screen and (max-width: 834px) {
  #id_maincontrol_block {
    width: 100%;
  }
  #id_maincontrol_block_child {
    width: 100%;
  }
  
  /* footer設定 */
  #footer {
    width: 100%;
  }

  #datetimepicker-container {
    align-items: flex-start;
    gap: 10px;
  }

  .ui-datepicker-inline {
    margin: auto;
    width: 100%;
  }
  

  #datetimepicker-container {
    flex-direction: column; /* 縦並び */
    align-items: center;
  }

  #datepicker {
    width: 100%; /* 幅を調整 */
    margin:auto;
    max-width: 300px;
  }

  .ui-timepicker-list {
    position: relative;
    width: 100%;
    max-width: 300px;
    top:2px;
  }

  .ui-timepicker-list li {
    text-align: center;
    width: 100%;
  }
}