<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset: "utf-8";

#modal, #hotel-modal { width: 100%; max-width: 700px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000000001; max-height: 650px; margin: auto; display: none;}
.modal-body { letter-spacing: -.4em; width: 100%; max-width: 700px; line-height: 1; background-color: #fff; position: relative;}
.form-col, .btn-col { display: inline-block; letter-spacing: normal; vertical-align: top;}
.form-col { width: 75%; height: 650px; overflow-y: scroll;}
.form-col .item-name { color: #fff; background-color: #000c70; padding: 7px 15px;}
.form-col label { display: inline-block; width: 20%; vertical-align: middle; line-height: 1.5;}
.form-col .select { position: relative; display: inline-block;}
.form-col .select::after { content:""; width: 10px; height: 10px; border-bottom: 1px solid #000c70; border-right: 1px solid #000c70; position: absolute; top: 27%; right: 10px; transform: rotate(45deg); pointer-events: none;}
.form-col select {border-radius: 5px; border: 1px solid #bbb; padding: 7px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 120px;}
.form-col select::-ms-expand { display: none;} /* IE逕ｨ  */
.form-col input.calendar { border: 0; border-bottom: 1px solid #bbb; width: 170px; padding: 5px; background-image: url(/_shared/images/root/common/ico_form_calendar.png); background-position: left 10px center; background-repeat: no-repeat; text-align: right;}
.form-col .form-item { padding: 15px;}
.form-col .form-item dl { border-bottom: 1px dotted #000; padding: 15px 0;}
.form-col .form-item dl:last-child { padding-bottom: 20px; border-bottom: 0;}
.form-col .form-item dt { font-weight: bold; margin-bottom: 10px;}
.form-col .form-item dd &gt; div { display: inline-block; width: 48%;}
.form-col .form-item dd &gt; div:nth-child(1), .form-col .form-item dd &gt; div:nth-child(2) { margin-bottom: 15px;}
.form-col .form-item dd &gt; div label { width: 42%;}
.btn-col { width: 25%; height: 650px;}
.btn-col .btn-col-inner { height: 100%; display: flex; justify-content: center; align-items: center; background-color: #f0f1f4; padding: 15px;}
.btn-col .btn-col-inner .submit-btn { width: 100%; padding: 7px 10px; background-color: #d54100; color: #fff; text-align: center; border-radius: 5px; border: none; outline: none;}
.btn-col .btn-col-inner .close { position: absolute; top: 8px; right: 8px;}
.btn-col .btn-col-inner .close .close-btn { display: block; width: 25px; height: 25px; position: relative; cursor: pointer;}
.btn-col .btn-col-inner .close .close-btn::before, .btn-col .btn-col-inner .close .close-btn::after { content: ''; display: block; width: 100%; height: 3px; transform: rotate(45deg); transform-origin: 0% 50%; position: absolute; top: calc(14% - 5px); left: 14%; background-color: #c4c4c4;}
.btn-col .btn-col-inner .close .close-btn::after { transform: rotate(-45deg); transform-origin: 100% 50%; left: auto; right: 14%;}

/*繝帙ユ繝ｫ繝｢繝ｼ繝繝ｫ繧ｹ繧ｿ繧､繝ｫ 200910*/
#hotel-modal .form-col label { width: 28%;}
#hotel-modal .form-col .form-item dd &gt; div label { width: 42%;}

#modal-bg { z-index: 100; position: fixed; left: 0; top: 0; width: 100%; height: 100%;background-color: rgba(0,0,0,0.6); display: none;}
.fix-bg { position: fixed; left: 0; right: 0; height: auto; overflow-y: scroll;}

@media(max-width:767px){
  #modal, #hotel-modal { max-height: none; overflow-y: scroll;}
  .modal-body { font-size: 1.4rem;}
  .form-col, .btn-col { display: block;}
  .form-col {width: 100%; height: auto;}
  .form-col .select { width: 55%;}
  .form-col select { width: 100%;}
  .btn-col { width: 100%; height: auto;}
  .btn-col .btn-col-inner { height: auto;}
}

/* 繧ｫ繝ｬ繝ｳ繝繝ｼCSS */
.ui-widget-header { border: 0 !important; background: #144490 !important; color: #fff !important;}
.ui-widget-header .ui-icon { background-image: url("/domestic/area/kyushu/local_oita_cpn/images/ui-icons_888888_256x240.png") !important;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 0 !important; background: #fff !important; color: #333 !important; text-align: center !important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { font-weight: bold !important; color: #fff !important; background: #144490 !important;}
.ui-datepicker-header .ui-state-hover { background: none !important; border: 0 !important;}
.ui-datepicker-calendar .ui-state-hover { background: #d3d3d3 !important;}</pre></body></html>