html {
  -webkit-overflow-scrolling: touch;
}
body {
  font-family: 'Yu Gothic', 'Helvetica', sans-serif;
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
}

/* @media screen and (min-width: 1600px) {
    .container:not(.is-max-desktop):not(.is-max-widescreen) {
        max-width: none;
    }
} */
@media screen and (min-width: 769px) {
  .app-simple-input {
      max-width: 800px;
      min-width: 800px;
  }
}
.section {
  padding: unset;
}

body {
  position: relative;
  width: -webkit-fill-available;

  .expandable-section {
    z-index: 2;
  }
  .footer {
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    min-width: 100%;
    z-index: 3;

    .button.is-rounded {
      padding-left: .8rem;
      padding-right: .8rem;

      .icon {
        transform: translateY(6px);
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .btn-text {
        font-size: 8px;
        font-weight: bold;
        position: absolute;
        top: 5px;
        text-align: center;
      }
    }
  }
  .footer.is-small {
    position: fixed;
  }
}

@media screen and (min-width: 1024px) {
  html {
    overflow-y: auto;
    body {
      max-height: 100vw;
    }
  }
}

.header {
  .hero-body {
    position: relative;
    padding-left: 0;

    .title_area {
      z-index: 4;
    }
    .lang_select_area {
      position: absolute;
      top: -40px;
      right: 5px;
      z-index: 4;
    }  
  }
}
@media screen and (max-width: 768px) {
  .header {
    .hero-body {
      .title_area {
        z-index: unset;
      }
      .lang_select_area {
        z-index: unset;
      }
    }
  }
}

html {
  .header {
    .title, .subtitle {
      white-space: nowrap;
    }    
  }
}

#main {
  position: relative;
  padding-bottom: 60px;
  width: 100%;
}

.app-search-region {
  width: 50%;
  margin-left: 20px; /* 7em + 1.5em */
  padding-top: 5px;
  /* border: solid 1px silver;
  background-color: rgba(32, 178, 170, 0.7); */
}
.app-action-footer {
  position: absolute;
  /* bottom: 0; */
  bottom: -53px;
  left: 0;
  margin-left: -1px;
  width: calc(100% + 2px);
  height: 60px; /* 帯の高さを調整 */
}
.app-level-flex-only.level {
  display: flex;
}

.app-level-flex-only .level-item,
.app-level-flex-only .level-right,
.app-level-flex-only .level-left {
  display: flex;
  margin-top: 0px;
}

/* モーダルダイアログデザイン */
.modal-card-head {
  height: 10px;
}

.modal-card-title {
  font-size: unset;
}

.modal-card-body {
  min-height: 120px;
  font-size: 1.5rem;
  padding-top: 25px;
  padding-left: 45px;
}
#modal_mess, #modal_mess_alert, #modal_sub_mess, #modal_sub_mess_alert {
  white-space: pre-line;
}
#modal_sub_mess, #modal_sub_mess_alert {
  margin-top: 18px;
  font-size: 18px;
}
#modal_sub_mess:empty, #modal_sub_mess_alert:empty {
  display: none;
}
.modal-card-foot {
  height: 60px;
}

/* スクロールバーデザイン */
::-webkit-scrollbar {
  width: 16px;
  height: 20px;
}
::-webkit-scrollbar-track {
  background-color: rgba(120, 170, 210,0.3);
  border-radius: 100px;
}
::-webkit-scrollbar-thumb {
  background: #78aad2;
  border-radius: 100px;
  width: 130px;
}
/* フィールドデザイン */
.field-label-horizontal {
  width: 121px;
}
.field-center-vertical {
  min-height: 40px;
  /* transform: translateY(25%); */
}
.field-center-horizontal {
  padding-left: 5px;
}
.field-center-horizontal:has(select) {
  width: 180px;
}
.field-range {
  display: flex !important;
}

.input[type="date"] {
  width: unset;
}

.input[type="month"] {
  width: unset;
}

.input:read-only {
  background-color: #eeeeee;
}

.input.p-postal-code {
  width: unset;
}

/* フィールドの横並び */
.column.is-horizontal {
  display:flex !important;
}
.column.is-horizontal .field-label {
  flex: 1 !important;
align-items: center !important;				/* 横並びに並んでいるアイテムの縦位置を中央にする */
}
.column.is-horizontal .field-body {
  flex: 2 !important;
align-items: center !important;				/* 横並びに並んでいるアイテムの縦位置を中央にする */
}
.column.is-horizontal .field:not(:last-child) {
  margin-right: 10px !important;
}
/* ボタン型ラジオボタンの設定 */
/* Hide the default radio button */
input[type="radio"] {
  display: none;
}
input[type="radio"]:disabled,
input[type="radio"]:disabled + label {
  pointer-events: none;
}


/* Custom radio button style */
input[type="radio"] + label {
  display: inline-block;
  background-color: #fff;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px 20px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

/* Checked radio button style */
input[type="radio"]:checked + label {
  background-color: #3273dc;
  color: #fff;
}

/* Hover effect */
input[type="radio"] + label:hover {
  background-color: #3273dc;
  color: #fff;
}

input[type="radio"] + label + input[type="radio"] + label {
  margin-left: 10px;
}

/* Select2の設定 */
.select2-container {
  width: unset !important;
  min-width: -webkit-fill-available;
}
/* RemoveAllの×ボタンを非表示にする */
.select2-selection__clear {
  display: none;
}
.select2-container--default .select2-selection--multiple.select2-selection--clearable {
  padding-right: unset !important;
}
/* ドロップダウンの高さを少し大きくする */
.app-select2 .select2-results__options {
  max-height: 300px !important; /* リストの最大高さを設定 */
  overflow-y: auto;  /* 高さが超える場合にスクロールバーを表示 */
}
/* Select2の選択された要素と削除ボタンのスタイルを調整 */
.select2-container .select2-selection__choice,
.select2-container .select2-selection__choice__remove {
  font-size: 0.9rem;
}

/* 選択された要素のスタイルを変更 */
.select2-container .select2-selection__choice {
  border: 1px solid #48c78e !important; /* 枠線の色を変更 */
  background-color: #48c78e !important; /* 背景色を変更 */
  color: #fff !important; /* テキスト色を変更 */
}
/* 選択された時に非表示となるtextareaの幅設定を固定とする */
.select2-search__field {
  width: 100% !important;
}
/* マウスオーバー時のスタイル変更 */
.select2-container .select2-selection__choice:hover {
  background-color: #48c78e !important; /* マウスオーバー時の背景色を変更 */
}

/* 削除ボタンのスタイルを変更 */
.select2-container .select2-selection__choice__remove {
  color: #fff !important; /* 削除ボタンのテキスト色を変更 */
  cursor: pointer !important; /* マウスカーソルをポインターに変更 */
  border-right: unset !important;
}

/* 削除ボタンがマウスオーバーされたときのスタイル変更 */
.select2-container .select2-selection__choice__remove:hover {
  background-color: #48c78e !important; /* マウスオーバー時の背景色を変更 */
  color: #fff !important; /* マウスオーバー時のテキスト色を変更 */
}

/* Select2の選択ボックスにハイライトを追加 */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #3273dc !important; /* カーソルが入ったときの枠線の色を設定 */
  box-shadow: 0 0 0 1px #3273dc, 0 0 0 3px rgba(50, 115, 220, 0.2); /* フォーカス時の枠を追加 */
  outline: 0; /* フォーカス時のアウトラインを非表示にする */
}

/* Select2のドロップダウンリストの選択アイテムのスタイルを変更 */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #48c78e !important; /* Bulmaのis-successの背景色を設定 */
  color: #fff !important; /* テキスト色を設定 */
}

/* Select2のドロップダウンリストの空行の高さを設定 */
.select2-results__option {
  height: 2em;
}

/* テキストエリアのマージン調整 */
textarea {
  margin-bottom: 15px;
}

/* 画像プレビュー(ファイル選択) */
/* 画像プレビューの表示サイズ(大枠) */
.drop-preview-container {
  position: relative;
  margin-bottom: 0px;
  width: 320px;
  height: 320px;
}

/* 画像プレビューの表示部分 */
.drop-preview-area {
  width: 100%;
  height: 100%;
  border: 2px dashed #ccc;
  border-radius: 5px;
  text-align: center;
  position: absolute;
  left: 0;
}

.drop-preview-area.hover {
  border-color: #333;
}

.file-input {
  display: none;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  display: none;
}

.button-container {
  height: 0px;
  position: relative;
}

@media screen and (max-width: 768px) {
  .field.app_message .label {
      display: none;
  }
}

/* メッセージ表示領域 */
.app_message {
  position: absolute;
  width: 20em;
  padding-top: 3px;
  margin-top: -20px;
}

.field-body {
  display: unset;
}

.app_message .help {
  left: 5px;
  color: var(--validation-message);
}
.field .help {
  padding-left: 3px;
  margin-left: 1px;
  padding-top: 6px;
}
/* input_text, label_text直後のメッセージ領域 */
input + .app_message {
  margin-top: -10px;
}
input + .app_message .help {
  color: var(--validation-message2);
}

.field:not(:last-child), .label:not(:last-child) {
  margin-bottom: 0;
}
.field:last-child.app_message {
  height: 0;
}
.tabs li {
  min-width: 100px;
  margin-right: 10px;
}

.info {
  position: relative;
}

td.info::after {
  position: absolute;
  top: 15px;
  right: 15px;
}

.info::after {
  content: "i";
  font-size: 85%;
  margin-right: 5px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: 2px;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5;
  border-radius: 50%;
  background: #4287f5;
  color: #FFF;
  font-weight: bold;
}

/* 吹き出し本体 - 枠線付きの吹き出し */
.balloon{
  position: absolute;
  width: fit-content;
  padding: 15px;
  background-color: #fff399;
  border: 2px solid #fee555;
  border-radius: 10px;         /* 角丸を指定 */
  word-break: keep-all;
}
/* 三角アイコン - 枠線付きの吹き出し */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 15px;
  border-right: 15px solid #fee555;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 15px;
  border-right: 15px solid #fff399;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.tooltip_container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
.tooltip:hover,
.tooltip:hover::before,
.tooltip:hover::after {
  visibility: hidden !important;
  opacity: 0 !important;
}
.tooltip {
  visibility: hidden;
  opacity: 0;
}
/* スクロール表 */
.scrollbar {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  .inner {
      height: 1px;
  }
}
.scrollbox {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
}

/* bad, alert(仮置) */
.bad input,.bad select,.bad textarea {
  border: 1px solid var(--alert-border-color);
  -webkit-box-shadow: 0 0 4px -2px var(--alert-bg-color);
  box-shadow: 0 0 4px -2px var(--alert-bg-color);
  position: relative;
  left: 0;
  -moz-animation: .7s 1 shake linear;
  -webkit-animation: 0.7s 1 shake linear
}
.item .alert {
  float: left;
  margin: 0 0 0 15px;
  padding: 3px 10px;
  color: #FFF;
  border-radius: 4px 5px 5px 4px;
  background-color: var(--alert-bg-color);
  position: relative;
  height: fit-content;
  width: fit-content;
  top: 5px;
  left: -15px;
  opacity: 0;
  z-index: 1;
  -webkit-transition: 0.15s ease-out;
  transition: 0.15s ease-out
}

.item .alert::after {
  content: '';
  display: block;
  height: 0;
  width: 0;
  border-color: var(--alert-bg-color) transparent transparent transparent;
  border-style: solid;
  border-width: 10px 5px 0 5px;
  position: absolute;
  left: 5px; /* 左端に配置 */
  top: -10px; /* 上向き矢印 */
  transform: rotate(180deg);
}

.item.bad .alert {
  left: 0;
  opacity: 1
}

.text-shadow {
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.S02Reserve {
  .contents {
    .event_title {
      display: block;
      margin-top: 15px;
      font-size: 1.1rem;
      padding-bottom: 5px; /* アンダーラインとテキストの間にスペースを追加 */
      background-image: linear-gradient(to right, #D2B48C calc(100% - 20%), rgba(210, 180, 140, 0) 100%); /* 右側へ徐々にかすれるアンダーライン */
      background-size: 100% 4px;
      background-repeat: no-repeat;
      background-position: 0 100%;
    }
    .event_area {
      display: grid;
      grid-auto-rows: min-content;
    }
    .event_guidance {
      font-size: 1rem;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .event_image {
      /* max-height: 190px; */
      width: 100%;
      object-fit: cover;
      border-radius: 30px; /* 角を丸くする */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 浮き出るような表現 */
    }
  }
}