@charset "UTF-8";

* { outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font: inherit;font-size: 100%;vertical-align: baseline;}
strong { font-weight: bold }
html { line-height: 1 }
ol, ul { list-style: none }
table {width: 100%;border-collapse: collapse;border-spacing: 0;}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle }
q, blockquote { quotes: none }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none }
a img { border: none; -webkit-transition: .6s; -o-transition: .6s; transition: .6s }
a:hover { text-decoration: none }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block }
body {word-break: break-all;-webkit-text-size-adjust: 100%;}
img { vertical-align: top }
body > span[style*="visibility: hidden"] { display: none !important }
main {display: block;max-width: 710px;margin: auto;padding: 0 15px;}
button { background: none; border: none }
button:focus { outline: none }
input[type="submit"],
input[type="button"],
button { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; background: none }
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
button::-webkit-search-decoration { display: none }
input[type="submit"]::focus,
input[type="button"]::focus,
button::focus { outline-offset: -2px }
b { font-weight: bold }
select {-moz-appearance: none;-webkit-appearance: none;appearance: none;border-radius: 0;border: 0;margin: 0;padding: 0;background: none transparent;vertical-align: middle;font-size: inherit;color: inherit;box-sizing: border-box;}
select::-ms-expand { display: none }
@-moz-document url-prefix() { .form select { -moz-appearance: none; text-indent: 0.01px; text-overflow: '' } }
p { margin: 30px auto }
body {font-family: YakuHanJP, '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic', '游ゴシック Medium', 'Yu Gothic Medium', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-size: 14px;font-weight: 500;line-height: 1.75;color: #333;}
select { cursor: pointer }
a { color: #b91111 }

/*= HEADER ===========================================================*/
header { border-bottom: 1px solid #2C344C; margin-bottom: 40px; padding: 0 15px }
#hd-a {grid-area: a;padding-right: 20px;}
#hd-b { grid-area: b }
#hd-c {grid-area: c;}
#hd-inner { max-width: 854px; margin: auto; display: grid; grid-template-areas: "a b" "a c"; grid-template-columns: auto 1fr }
#hd-logo i { font-size: 40px }
#hd-logo {display: block;text-decoration: none;background: #2C344C;color: #fff;text-align: center;padding: 25px 4px 10px;}
#hd-logo-txt { font-size: 10px; line-height: 1; font-weight: normal; margin: 0 auto 5px }
#hd-logo_ribbon { position: absolute; width: 0; bottom: 0; border-style: solid; border-color: #2c344c; border-width: 0 calc(67px / 2) 6px calc(67px / 2); border-bottom-color: transparent }
#hd-logo_wrap { position: relative; width: 67px; padding: 0 0 6px; overflow: hidden; margin-bottom: -10px }
#hd-logo_wrap::after {content: "";position: absolute;right: 3px;top: 0;bottom: 1px;border-right: 1px solid #B7A353;z-index: 1;}
#hd-logo_wrap::before {content: "";position: absolute;left: 3px;top: 0;bottom: 1px;border-left: 1px solid #B7A353;z-index: 1;}
#hd-ttl {font-size: 26px;line-height: 1.3;margin: 0 0 0;font-weight: bold;}
.hd-subttl {margin: 22px 0 0;font-size: 14px;line-height: 1.5;}
.hd-subttl:first-letter { color: #BA2F2D }
/*= HEADER ===========================================================*/



/*= FOOTER ===========================================================*/
footer {background: #2C344C;color: #fff;text-align: center;padding: 10px 15px;font-size: 10px;margin-top: 60px;}
/*= FOOTER ===========================================================*/



/*= ADMIN HEADER ===========================================================*/
#hd-admin #hd-inner {grid-template: "a b b e" auto "a c d e" auto / auto auto 1fr auto;}
#hd-d { grid-area: d; padding-left: 20px }
#hd-e { grid-area: e }
#hd-logout i { display: block; font-size: 1.8em; color: #75787A }
#hd-logout { display: flex; height: calc(100% - 22px); text-align: center; font-size: 12px; align-items: center; text-decoration: none; color: inherit; margin-top: 22px }
#hd-logout-str { display: block; margin-top: 5px }
#hd-menu a { display: block; text-decoration: none; color: inherit; position: relative; padding-left: 10px }
#hd-menu a::before {content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%) rotate(45deg);border: 1px solid #b91111;width: 4px;height: 4px;border-bottom: none;border-left: none;}
#hd-menu li { height: 100%; display: flex; align-items: center }
#hd-menu { height: 100% }
/*= ADMIN HEADER ===========================================================*/



/*= CALENDAR ============================================================*/
#calendar {min-height: 100px;position: relative;margin-bottom: 60px;}
#calendar-control { display: flex; align-items: center; margin-bottom: 10px }
#calendar-date > * { vertical-align: middle }
#calendar-date {text-align: center;font-size: 18px;padding: 0 10px;}
#calendar-next::before {content: "";position: absolute;top: 50%;left: calc(50% - 2px);border: 1px solid #a83534;width: 6px;height: 6px;transform: translate(-50%, -50%) rotate(225deg);border-top: none;border-right: none;}
#calendar-prev, #calendar-next { border: 1px solid #ccc; width: 20px; height: 20px; border-radius: 20px; position: relative; cursor: pointer }
#calendar-prev.disable { opacity: .3 !important; pointer-events: none !important }
#calendar-prev::before {content: "";position: absolute;top: 50%;left: calc(50% + 2px);border: 1px solid #a83534;width: 6px;height: 6px;transform: translate(-50%, -50%) rotate(45deg);border-top: none;border-right: none;}
#calendar-table del {display: flex;align-items: center;justify-content: center;background: #F2F2F2;margin: 10px 7px;box-shadow: 0 0 4px 0 #ccc inset;min-height: 40px;font-size: 19px;color: #2b344b;cursor: not-allowed;border-radius: 4px;position: relative;}
#calendar-table tbody tr { border-bottom: 1px solid #DADCE0; background: #FAFAFA }
#calendar-table tr > * { text-align: center; position: relative; }
#calendar-table {vertical-align: middle;font-size: 10px;font-weight: normal;line-height: 1;table-layout: fixed;overflow: hidden;}
.calendar_kizami_selectable #calendar-table del {opacity: 0;}
#calendar.loading::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(img/loader.gif) #fff center no-repeat; z-index: 1 }
.cal-selectable_waku {--height: 40px;--margin: 10px;display: flex;align-items: center;justify-content: center;background: #fff;margin: var(--margin) 7px;box-shadow: 0 0 4px 0 #ccc;min-height: var(--height);font-size: 19px;color: #2b344b;cursor: pointer;border-radius: 4px;position: relative;text-indent: -999999px;transition: .6s;}
.cal-selectable_waku.selected, .cal-selectable_waku:hover { border: 1px solid #B7A353 }
.cal-selectable_waku.selected::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;background: #2b344b;border-radius: 9999px;}
.cal-selectable_waku::before {content: "";width: 14px;height: 14px;border: 1px solid #2b344b;border-radius: 9999px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.calendar_kizami_selectable .cal-selectable_waku.selected {position: absolute;top: 0;left: 0;right: 0;height: calc( ( var(--height) + var(--margin) * 2 ) * ( var(--riyoujikan) / 30 ) - var(--margin) * 2 + ( 1px * ( var(--riyoujikan) / 30 - 1 ) ) );z-index: 1;}
#calendar-table del::before {content: "×";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #B5B3B3;font-size: 21px;}
.cal-time_column > span { display: block; text-align: left }
.cal-time_column { font-size: 14px; line-height: 1.3; background: #fff; padding: 8px 0 8px 10px; white-space: nowrap }
.calendar-date { display: block; font-size: 20px; font-weight: bold }
.calendar-day { font-size: 12px; display: block; margin-bottom: 5px }
.calendar-day_inner { display: block; background: #2C344C; color: #fff; padding: 7px 0 4px; border-radius: 4px 4px 0 0; margin-left: 2px }
.calendar-head-wave { padding: 0 .3em }
.calendar-timehead i { color: #B8A556; vertical-align: middle; margin-right: 3px }
.calendar-timehead {font-size: 12px;line-height: 1.5;width: 62px;white-space: nowrap;}
#calendar-table thead th {border-bottom: 4px solid #2c344c;}
#calendar-table thead th.calendar-sat {border-color: #0F3568;}
.calendar-sat .calendar-day_inner {background: #0F3568;}
#calendar-table thead th.calendar-sun {border-color: #770020;}
.calendar-sun .calendar-day_inner {background: #770020;}
#calendar-table tr > .calendar-waku-sat {background: #F2FBFD;}
#calendar-table tr > .calendar-waku-holiday {background: #FCF1F2;}
.calendar-waku-sat .cal-selectable_waku {color: #003567;}
.calendar-waku-sat .cal-selectable_waku::before {border-color: #003567;}
.yotei_nasi_column {position: absolute;left: 7px;right: 7px;z-index: 1;cursor: pointer;display: block;align-items: center;justify-content: center;background: #fff;box-shadow: 0 0 4px 0 #ccc;font-size: 11px;color: #2b344b;border-radius: 4px;padding: 10px 3px;}
.yotei_nasi_column:hover {border: 1px solid #B7A353;}
.cal-spacer {display: block;margin: 10px 7px;min-height: 40px;pointer-events: none;}
.yotei_nasi_column.selected, .yotei_nasi_column:hover {border: 1px solid #B7A353;padding: 9px 2px;}
.yotei_nasi_column.selected::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;background: #2b344b;border-radius: 9999px;}
.yotei_nasi_column::before {content: "";width: 14px;height: 14px;border: 1px solid #2b344b;border-radius: 9999px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.form-thedate_field {text-align: center;display: block;}
/*= CALENDAR ============================================================*/



/*= FORM ============================================================*/
#form ::placeholder {color: #ccc;}
#form .error_msg { font-size: 12px; padding: 0 15px; border: none; margin-top: 10px }
#form input, #form select, #form textarea, .form select {font-family: inherit;font-size: 16px;font-weight: normal;line-height: 1.75;padding: 10px 15px;width: 100%;border: 1px solid #CDCDCD;background: #fff;}
#form input.form-error-field, #form select.form-error-field, #form textarea.form-error-field { border-width: 2px; border-color: #f33 }
#form input[type="checkbox"], #form input[type="radio"] {display: inline-block;width: auto;cursor: pointer;}
#form, .form {margin: 60px auto;overflow: hidden;}
#form-buttons { text-align: center; margin: 30px auto }
#form-field_reminder-repeater { display: flex; justify-content: flex-start; align-items: center; white-space: nowrap }
#form-submit {background: #16561C;color: #fff;font-family: inherit;font-size: 17px;font-weight: bold;padding: 20px 120px;border-radius: 10px;transition: all ease .2s;}
#form-submit:hover {background: #24992f;}
#thedate, #form #thedate, #end_thedate, #form #end_thedate {border: none;background: none;text-align: center;font-size: 16px;font-weight: bold;color: #b91111;pointer-events: none;padding: 11px;width: 11em;}
#thedate.form-error-field, #form #thedate.form-error-field { border-color: #f33 }
.error_msg { color: #f33; border: 1px solid; padding: 10px 50px; display: table; margin: auto }
.error_msg::before { content: "\f071"; font-family: 'Font Awesome 5 Free'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; color: #f33; margin-right: 5px }
.form-customers_info_head { border-top: 2px solid #2C344C; padding-top: 10px; font-size: 16px; font-weight: bold }
.form-customers_info_head-icon { color: #baa358; margin-right: 5px; font-size: 1.2em; vertical-align: middle }
.form-customers_info_head-str { vertical-align: middle }
.form-customers_info_head-str2 { vertical-align: middle; font-size: 12px; font-weight: normal; margin-left: 1em }
.form-field_reminder-timing {display: table-row;}
.form-field_reminder-timing_del { cursor: pointer }
.form-notice {display: block;font-size: 13px;color: #666;margin-top: 3px;}
.form-required::after {content: "*";color: #b91111;vertical-align: middle;}
.form-row + .form-row, script + .form-row, #cft {margin-top: 15px;}
.form-row { border: 1px solid #CDCDCD; background: #FAFAFA; padding: 15px 15px 20px }
.form-row-body {margin-top: 5px;}
.form-row-head { font-size: 16px }
.form-submit-icon { font-weight: bold; color: #B7A353; margin-right: 10px; position: relative }
.form-submit-icon::after {content: "";position: absolute;top: 1px;left: 1px;right: 1px;bottom: 1px;background: #fff;z-index: 0;border-radius: 9999px;}
.form-submit-icon::before { z-index: 1; position: relative }
.form-thedate:not(body) { border: 1px solid #CDCDCD }
.form-thedate:not(body) { border: 1px solid #CDCDCD; padding: 0; background: none }
.form-thedate:not(body).form-error-field { border-width: 2px; border-color: #f33 }
.form-thedate_body:not(body) { margin: 0 }
.form-thedate_head:not(body) { background: #2C344C; color: #fff; font-size: 16px; font-weight: bold; padding: 6px 10px }
.form-thedate_head:not(body)::before { display: none }
.form-thedate_icon { color: #B4A153; margin-right: 8px }
#form-submit.loading {background: rgb(36 153 47 / .3);position: relative;}
#form-submit.loading::before {content: "";position: absolute;display: block;top: 0;left: 0;right: 0;bottom: 0;background: url(./img/loader.gif) center/180px 180px no-repeat;z-index: 99999;}
#form-submit.loading i {opacity: .3;}
#form-error {padding: 0 20px;font-size: 16px;font-weight: normal;line-height: 1.75;background: #f33;color: #fff;text-align: center;opacity: .7;cursor: pointer;}
#form-success {padding: 0 20px;font-size: 16px;font-weight: normal;line-height: 1.75;background: #4caf50;color: #fff;text-align: center;opacity: .7;cursor: pointer;}
#form-smtpsuccess {padding: 0 20px;font-size: 16px;font-weight: normal;line-height: 1.75;background: #4c52af;color: #fff;text-align: center;opacity: .7;cursor: pointer;}
.required_field.form-error-field {border: 2px solid #f33;padding: 1em 1em 0;margin-bottom: 0;}
.custom_field_radiobtn {color: #ccc;min-width: 5.5em;border: 1px solid #eee;border-radius: 4px;background: #fff;font-weight: bold;line-height: 1.3;text-align: center;padding: 10px;cursor: pointer;box-shadow: 0 0 10px #d1d1d1;transition: all ease .3s;}
:checked + .custom_field_radiobtn, .custom_field_radiobtn:hover {border-color: #B7A253;color: #373737;}
.custom_field_wrap input[type="radio"] {display: none !important;}
.custom_field_wrap {display: flex;flex-wrap: wrap;margin-bottom: -1em;}
#form.loading {pointer-events: none;opacity: .5;}
#form.loading::after {content: "";position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: url(img/loader.gif) center no-repeat;z-index: 1;}
.custom_field_wrap > label {margin: 0 1em 1em 0;}
.form-field label {cursor: pointer;}
#event_list_table tr {opacity: 1;transition: all ease .6s;}
#event_list_table tr.deleting {opacity: 0;}
#event_list_wrap {position: relative;}
#event_list_wrap.loading::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #fff;opacity: .3;}
#event_list_wrap.loading::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url(/css/img/loader.gif) center no-repeat;}
#custom_field_wrap > .form-field + .form-field {margin-top: 30px;}
#custom_field_wrap .form-field {display: block;}
.custom_field_add span {display: inline-block;text-align: left;text-indent: -99999vw;overflow: hidden;width: 20px;height: 20px;border: 2px solid #888;border-radius: 9999px;background: #fff;position: relative;cursor: pointer;}
.custom_field_add span::before {content: "";position: absolute;top: 2px;left: calc(50% - 1px);width: 2px;bottom: 2px;background: #888;}
.custom_field_add span::after {content: "";position: absolute;left: 2px;top: calc(50% - 1px);height: 2px;right: 2px;background: #888;}
.custom_field_add {text-align: center;margin-top: 30px;}
.event_cancel button {font-size: 10px;white-space: nowrap;border: 1px solid #888;background: #fff;line-height: 1;padding: 3px 5px;border-radius: 4px;cursor: pointer;}
.event_list_table-cancel {width: 10px;}
.event_cancel {display: table;margin: auto;}
.il_field { width: 5em !important; margin: 0 1em !important }
.datetime_field {width: 11em !important;}
/*= FORM ============================================================*/



/*= COMMON ============================================================*/
body.loading { position: relative;}
body.loading::after {content: "";position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: url(img/loader.gif) rgb(255 255 255 / 70%) center no-repeat;z-index: 999999;}

main > :first-child { margin-top: 0 !important }
#error_msg { color: #f33; border: 1px solid; padding: 30px; text-align: center }
#event_list_table td {padding: 5px 10px;text-align: justify;vertical-align: top;}
#event_list_table thead th {background: #2C344C;color: #fff;font-size: 14px;font-weight: bold;line-height: 1.4;padding: 3px 10px;white-space: nowrap;}
#event_list_table tr:nth-child(odd) { background: #FAFAFA }
#event_list_table { border: 1px solid #CDCDCD }
#msg { color: #b91111; border: 1px solid; padding: 30px 60px; font-size: 16px }
#msg::before {content: "\f071";font-family: 'Font Awesome 5 Free';font-weight: 900;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;margin-right: 15px;font-size: 1.3em;}
#select_calendar { border: 1px solid #CDCDCD; width: 100%; padding: 10px 50px 10px 15px; background: #FAFAFA; font-size: 14px }
#select_calendar_wrap { position: relative }
#select_calendar_wrap::after {content: "";position: absolute;top: 50%;right: 21px;width: 0;height: 0;border: 5px solid #2C344C;border-width: 5px 5px 0 5px;border-color: #2C344C transparent transparent transparent;transform: translateY(-50%);pointer-events: none;z-index: 1;}
#select_calendar_wrap::before {content: "";position: absolute;top: 50%;right: 15px;width: 20px;height: 20px;background: #FFFFFF;border: 1px solid #CDCDCD;transform: translateY(-50%);border-radius: 3px;pointer-events: none;}
.brown { color: #B7A353 !important }
.btn-white { display: inline-block; border: 1px solid #E8E8E8; font-size: 14px; font-weight: normal; line-height: 1; white-space: nowrap; text-decoration: none; color: #333; padding: 11px 14px 11px 22px; position: relative; transition: all ease .3s }
.btn-white::before {content: "";position: absolute;top: 50%;left: 6px;transform: translateY(-50%) rotate(45deg);border: 1px solid #C14443;border-bottom: none;border-left: none;width: 6px;height: 6px;}
.btn-white:hover { opacity: .5 }
.btn_back { background: #9E9E9E; color: #fff; font-family: inherit; font-size: 18px; padding: 20px 120px; border-radius: 10px; transition: all ease .2s }
.btn_back:hover { background: #adadad }
.btns3 > * { margin: 10px }
.btns3 { display: flex; justify-content: center; align-items: center }
.center { text-align: center !important }
.disable { opacity: .3 !important; pointer-events: none !important }
.event_list_table-comment {width: calc(100% / 7)}
.event_list_table-company {width: auto;}
.event_list_table-email {width: calc(100% / 7)}
.event_list_table-end {width: 20em;}
.event_list_table-name {width: auto;}
.event_list_table-tel {width: calc(100% / 7)}
.event_list_table-timestamp {width: calc(100% / 7)}
.hd_topline { border-top: 2px solid #2C344C; padding-top: 5px; font-size: 16px; font-weight: bold; margin: 30px 0 }
.hd_ttl { font-size: 26px; font-weight: bold; line-height: 1.4; margin: 60px auto 30px }
.hidden { display: none !important }
.loading-icon { background: url(./img/loader.gif) center no-repeat; display: inline-block; width: 100px; height: 100px }
.red { color: #b91111 !important}
.spacer-100 { height: 100px }
.spacer-50 { height: 50px }
.spacer-80 { height: 80px }
.spacer-20 { height: 20px }
.tbl_pagelist a { text-decoration: none }
.tbl_pagelist a:hover { text-decoration: underline }
.tbl_pagelist td { font-size: 12px; font-weight: bold; vertical-align: middle; width: 10px; white-space: nowrap; padding: 0 10px }
.tbl_pagelist th { font-size: 14px; vertical-align: middle; padding: 10px 10px }
.tbl_pagelist tr:nth-child(odd) { background: #FAFAFA }
.tbl_pagelist { border: 1px solid #CDCDCD }
.tbl_pagelist_copy { cursor: pointer }
.tbl_pagelist_copy:hover { text-decoration: underline }
.tbl_pagelist_edit { cursor: pointer }
.tbl_pagelist_edit:hover { text-decoration: underline }
.tbl_result tr + tr { border-top: 1px solid #DADCE0 }
.word {display: inline-block !important;}
.fp {font-size: 16px;font-weight: normal;line-height: 1.75;text-align: justify;}
.fp > section {margin: 60px 0;}
.fp h1 {font-size: 28px;font-weight: bold;line-height: 1.2;margin: 60px 0 10px;}
.fp ul {list-style: disc;padding-left: 1.5em;}
.fp li:nth-child(n+2) {margin-top: 30px;}
.fp h2 {font-size: 18px;font-weight: bold;margin: 40px 0 10px;}
.left { text-align: left !important }
.right { text-align: right !important }
.mt0 {margin-top: 0px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt90 {margin-top: 90px !important;}
.mt100 {margin-top: 100px !important;}
.mt110 {margin-top: 110px !important;}
.mt120 {margin-top: 120px !important;}
.mt130 {margin-top: 130px !important;}
.mt140 {margin-top: 140px !important;}
.mt150 {margin-top: 150px !important;}
.mt160 {margin-top: 160px !important;}
.mt170 {margin-top: 170px !important;}
.mt180 {margin-top: 180px !important;}
.mt190 {margin-top: 190px !important;}
.mt200 {margin-top: 200px !important;}
.mb0 {margin-bottom: 0px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}
.mb110 {margin-bottom: 110px !important;}
.mb120 {margin-bottom: 120px !important;}
.mb130 {margin-bottom: 130px !important;}
.mb140 {margin-bottom: 140px !important;}
.mb150 {margin-bottom: 150px !important;}
.mb160 {margin-bottom: 160px !important;}
.mb170 {margin-bottom: 170px !important;}
.mb180 {margin-bottom: 180px !important;}
.mb190 {margin-bottom: 190px !important;}
.mb200 {margin-bottom: 200px !important;}
.ml0 {margin-left: 0px !important;}
.mr0 {margin-right: 0px !important;}
/*= COMMON ============================================================*/

#fn { background: #000; color: #fff; font-size: 14px; line-height: 1.5; padding: 0; display: flex; justify-content: space-between; align-items: center; margin: 0 auto 30px }
#fn-accont-menu a { display: block; color: #fff; text-decoration: none; padding: 5px 15px }
#fn-accont-menu { display: block; position: absolute; top: 100%; right: 0; height: 0; background: #000; color: #fff; text-decoration: none; overflow: hidden; min-width: 100%; text-align: center; white-space: nowrap }
#fn-account > i { padding: 5px 0 5px 10px }
#fn-account { display: flex; align-items: center; position: relative }
#fn-account-username { cursor: pointer; padding: 5px 10px }
#fn-account:hover #fn-accont-menu { height: auto }
#fn-accoutn-logout:hover { background: #f33 }
#fn-accoutn-setname:hover { background: #009688 }
#fn-public-link { color: #fff; text-decoration: none }
#fn-public-link:hover { text-decoration: underline }
#fn-sitetitle { padding: 5px 10px }
#reminder-timing_add { cursor: pointer; background: #4CAF50; color: #fff; padding: 0 15px; border-radius: 5px }
#reminder-timing_preview {display: table;border-collapse: collapse;font-size: 16px;margin-top: 10px;}
#select_calendar_errormsg { color: #f33; border: 1px solid; padding: 15px 30px; text-align: center; margin-top: 10px }
#signin-btns > li { margin: 30px 0 }
#signin-btns {max-width: 240px;margin: auto;}
.g-signin2 { display: flex; justify-content: center; align-items: center }
.information_table td { border: 1px solid #888; padding: 10px; text-align: center }
.information_table th { border: 1px solid #888; padding: 10px; text-align: center; background: #000; color: #fff }
.information_table {max-width: 820px;margin: auto;table-layout: fixed;}
.signin-btns_btn { display: block; background: #f44242; color: #fff; text-decoration: none; padding: 12px 40px; min-width: 240px; text-align: center; transition: all ease .3s }
.signin-btns_btn:hover { background: #fe6969 }
.tbl_result th {width: 10em;background: #FAFAFA;}
.tbl_result tr > * {font-size: 16px;padding: 17px 16px;}
.tbl_result {margin: 40px auto 60px;border: 1px solid #CDCDCD;}
#hd-user_name {position: relative;}
#hd-user_name-field {position: absolute;top: calc(100% - 10px);left: 10px;background: #fafafa;padding: 30px;border: 1px solid;}
#hd-user_name-field input {font-family: inherit;padding: 5px 10px;margin-right: 10px;}
#hd-user_name-field-submit {background: #16561c;color: #fff;border-radius: 5px;padding: 5px 10px;font-family: inherit;}
#hd-user_name-field-close {position: absolute;top: 5px;right: 5px;width: 20px;height: 20px;cursor: pointer;}
#hd-user_name-field-close::before, #hd-user_name-field-close::after {content: "";position: absolute;top: calc(50% - 1px);left: 4px;right: 4px;height: 1px;background: #888;}
#hd-user_name-field-close::before {transform: rotate(45deg);}
#hd-user_name-field-close::after {transform: rotate(-45deg);}
#hd-user_name-field-success {background: #4CAF50;padding: 0px 10px;font-size: 14px;font-weight: normal;line-height: 1.75;color: #Fff;margin: 10px auto 0;}
#hd-user_name-field-error {background: #f33;padding: 0px 10px;font-size: 14px;font-weight: normal;line-height: 1.75;color: #Fff;margin: 10px auto 0;}
.custom_field_del {width: 30px;cursor: pointer;margin: auto;border: 1px solid #888;border-radius: 4px;font-size: 10px;text-align: center;background: #fff;transition: .15s;}
.btn_yes_no {display: flex;justify-content: center;}
.btn_yes_no button {color: #fff;border: 2px solid #fff;border-radius: 0;-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);box-shadow: 0 5px 10px rgba(0, 0, 0, .1);margin: 0 20px;padding: 5px 20px;min-width: 10em;text-align: center;}
.btn_yes {background: #f33;}
.btn_no {background: #888;}
#cancel.loading {position: relative;opacity: .7;}
#cancel.loading::before {content: "";position: absolute;display: block;top: 0;left: 0;right: 0;bottom: 0;background: url(./img/loader.gif) center/420px 420px no-repeat;z-index: 99999;}

.notification_area {position: fixed;top: 0;left: 0;right: 0;}
.btns4 {margin-bottom: 0 !IMPORTANT;display: flex;justify-content: flex-end;}
.btn-tab {border: 1px solid #cdcdcd;border-bottom: none;text-decoration: none;color: inherit;padding: 0 10px;transition: .3s;border-radius: 8px 8px 0 0;}
.tbl_pagelist_current {width: 1em;padding: 10px 0 10px 10px !important;}
.form-notice ul {list-style: disc;padding-left: 1.5em;margin-top: 10px;}
.form-notice li + li {margin-top: 10px;}
.form-select_wrapper {position: relative;}
.form-select_wrapper::after {content: '<>';font: 17px "Consolas", monospace;color: #333;transform: rotate(90deg) translateX(-50%);right: 11px;top: 50%;padding: 0 0 2px;border-bottom: 1px solid #999;position: absolute;pointer-events: none;}
select::-ms-expand {display: none;}
#form select {padding-right: 45px;}
#reminder-timing_tani {box-sizing: content-box !important;width: 2.5em !important;}
.popup {text-decoration: underline;color: #33f;cursor: pointer;}
.popup:hover {text-decoration: none;}
.modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgb(0 0 0 / 70%);display: flex;justify-content: center;align-items: center;padding: 20px;cursor: pointer;opacity: 0;pointer-events: none;transition: .6s;}
.modal.active {opacity: 1;pointer-events: auto;}
.modal img {max-width: 100%;max-height: 100%;}
.tbl_pagelist_calname, .tbl_pagelist_current {cursor: pointer;}
#calendar_setting {border-top: 4px solid #DADCE0;padding: 20px 0 0;margin-top: 50px;}
.btn_copy {display: inline-block;border: 1px solid #2b344b;border-radius: 3px;font-size: 12px;line-height: 1;padding: 3px 10px;cursor: pointer;}
.hd_setting {position: relative;display: table;margin: 80px 0 20px;font-size: 20px;font-weight: bold;padding: 0 20px 0 0;}
.hd_setting::after {content: "";position: absolute;top: 50%;border-bottom: 3px double #888;left: 100%;right: -9999px;}
#calendar_setting #form label {font-weight: bold;}
#custom_field_wrap2 {background: #fff;border-radius: 10px;}
#custom_field_wrap2 thead th {font-weight: bold;}
#custom_field_wrap2 tr > * {padding: 10px;border: 1px solid #ccc;}
#custom_field_wrap2 tr > *:not(:last-child):not(:first-child) {vertical-align: top;}
#calendar_setting main {max-width: 1024px;}
#custom_field_wrap2 tbody tr > :first-child {text-align: center;}
.custom_field_del:hover {background: #d33;color: #fff;border-color: #d33;}
.form_table {background: #e9fad5;margin: 20px 0;border-radius: 10px;}
.form_table th {padding: 20px 0 20px 20px;font-size: 16px;width: 10px;white-space: nowrap;vertical-align: top;}
.form_table td {padding: 20px;}
#reminder-timing_value {width: auto !important;margin-left: 1em;}
.reminder-timing_preview-ttl {margin: 20px 0 0 !important;}
.form-field_reminder-timing > * {display: table-cell;}
.form-field_reminder-timing_del {width: 10px !important;white-space: nowrap;color: #B10B04;font-size: 14px;}
.form-field_reminder-timing_del:hover {color: #d33;}
.form-simekiri-wrap > span {display: block;padding: 20px;}
.form-simekiri-wrap > span + span {border-top: 1px solid #ccc;}
#start_time, #close_time {width: 5em !important;text-align: center;}
#kizami_min {width: 5em !important;text-align: center;}
#buffer_before, #buffer {width: 5em !important;text-align: center;}
input:checked + .check_stylish .check_stylish-off {color: #fff;background: #fff;}
input:checked + .check_stylish .check_stylish-on {color: #fff;}
.check_stylish .check_stylish-off {color: #000;position: relative;}
.check_stylish .check_stylish-on {color: #fff;position: relative;}
.check_stylish-inner {display: flex;position: relative;background: #fff;}
.check_stylish {display: inline-block;border: 1px solid #cdcdcd;border-radius: 4px;overflow: hidden;vertical-align: middle;width: 100px;height: 29px;background: #EEEEEE;position: relative;transition: .3s;cursor: pointer;}
.check_stylish-inner > span {padding: 2px 15px;transition: .3s;}
.holiday_fields-row {display: block;}
.holiday_fields-row:not(:last-child) {margin-bottom: 15px;}
.check_stylish-inner::before {content: "外す";position: absolute;top: 0;left: 0;bottom: 0;width: 50%;background: #eee;transition: .3s;display: flex;align-items: center;justify-content: center;}
input:checked + .check_stylish .check_stylish-inner::before {left: 50%;background: #3f536a;}
.check_stylish::before {content: "外す";display: flex;height: 100%;justify-content: center;align-items: center;padding: 0 50% 0 0;}
.check_stylish.check_stylish-onoff::before {content: "無効";}
.check_stylish div {position: absolute;top: 3px;right: 3px;bottom: 3px;width: 18px;border: 1px solid #cdcdcd;background: #fff;border-radius: 4px;transition: .3s;width: 45%;}
input:checked + .check_stylish {background: #3F536A;color: #fff;}
input:checked + .check_stylish::before {content: "含む";padding: 0 0 0 50%;}
input:checked + .check_stylish.check_stylish-onoff::before {content: "有効";}
input:checked + .check_stylish div {right: 49px;border-color: #3f536a;}
.holiday_fields-row input {display: none !important;}
.form-field_reminder-timing_del::after {content: "削除";}
.form-field_reminder-timing_value::before {content: "・";}
.form-field_reminder-timing_del > i {margin-right: 8px;}
.form-field_reminder-timing_value {padding-right: 30px;}
.holiday_fields .check_stylish::before {content: "平日";}
.holiday_fields input:checked + .check_stylish::before {content: "休日";}
.yoyakugo_list li::after {content: "\f0c5";font-family: "Font Awesome 5 Free";display: inline-block;margin-left: 0.5em;}
.yoyakugo_list li {cursor: pointer;position: relative;min-width: 45%;padding-left: 1.5em;margin: 0 0 15px !important;font-size: 16px;}
.yoyakugo_list li:hover {text-decoration: underline;}
.yoyakugo_list-alert::before {content: "コピーしました";font-size: 12px;}
.yoyakugo_list-alert {position: absolute;bottom: 100%;left: 20px;background: #888;border-radius: 4px;color: #fff;padding: 2px 10px;line-height: 1;}
.yoyakugo_list {display: flex;flex-wrap: wrap;padding: 0 !important;list-style: none !important;}
.yoyakugo_list li::before {content: "・";font-weight: bold;position: absolute;left: 0;}

#progress.loading::after {
  content: "";
  display: block;
  background: url(img/loader.gif) center/120px 120px no-repeat;
  width: 30px;
  height: 30px;
}

.success {color:#3d3;}

.new_release {
  width: 1024px;
  padding: 0 15px;
  margin: auto;
  text-align: right;
}

.new_release a {
  display: inline-block;
  border: 1px solid;
  border-radius: 4px;
  padding: 0 10px;
  text-decoration: none;
  font-size: 12px;
}

#normal_field_setting .check_stylish::before {
  content: "無効";
}

#normal_field_setting input:checked + .check_stylish::before {
  content: "有効";
}



@media ( max-width: 768px ) {
  #fn-account-username { font-size: 10px }
  #fn-sitetitle { font-size: 10px }
  #public-url { display: grid; grid-template-areas:"head head" "url copy" }
  #public-url_head { grid-area: head; border-bottom: none }
  #public-url_url { grid-area: url; border-left: 1px solid; font-size: 14px; line-height: 1.5; padding: 5px }
  #public_url_copy { grid-area: copy; height: 100%; font-size: 14px; line-height: 1.5 }
  .pc-only { display: none !important }
}



@media ( max-width: 710px ) {
  #calendar-table del { margin: 5px 3px; min-height: 30px }
  .cal-selectable_waku { --height: 30px;--margin: 5px;margin-left: 3px;margin-right: 3px;}
  .cal-selectable_waku.selected::after { width: 7px; height: 7px }
  .cal-selectable_waku::before { width: 10px; height: 10px }
  .cal-time_column { font-size: 2vw; padding: 4px 0 4px 10px }
  .calendar-date { font-size: 4vw }
  .calendar-day { font-size: 10px }
  .calendar-timehead { font-size: 2vw; width: auto }
  .tbl_result tr > * { padding: 10px 15px; min-height: 1em; box-sizing: content-box }
  .tbl_result, .tbl_result * { display: block; width: auto !important; max-width: none !important }
}



@media ( max-width: 425px ) {
  #form-submit { padding: 15px; width: 100% }
  #msg {padding: 15px 20px;}
  .form-thedate_field {display: flex;align-items: center;flex-wrap: wrap;}
  .form-thedate_field > * {width: 100% !important;}
}



@media ( max-width: 375px ) {
  #thedate, #form #thedate { font-size: 11px }
}





#smtpcheck:not(:checked) + * {
  display: none;
}

.tbl_normal_field {
  width: auto;
}

.tbl_normal_field tr > *:nth-child(n+2) {
  padding-left: 1em;
}

.tbl_normal_field tbody tr > * {
  padding-top: 1em;
  text-align: center;
}

.tbl_normal_field tbody tr > *:first-child {
  text-align: right;
}

.pagenavi a {
  color: #2c344c;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  border: 1px solid;
  text-decoration: none;
  padding: 5px 20px 5px 40px;
  border-radius: 5px;
  position: relative;
  transition: .3s;
}

.pagenavi a i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.pagenavi a:hover {
  background: #2c344c;
  color: #fff;
  border-color: #2c344c;
}

.pagenavi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#form-error * {
  margin: 0 auto !important;
  border: none !important;
  color: #fff !important;
  padding: 0 !IMPORTANT;
}

#smtp_test.loading {
  opacity: .3;
  pointer-events: none;
}

.form-testmail {
  display: flex;
  align-items: center;
}

#smtp_test {
  background: #33f;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  transition: .3s;
  margin-left: 10px;
}

#smtp_test:hover {
  background: #66f;
}

.form-testmail .form-field {
  flex-grow: 1;
}

.select_box {appearance: auto !important;border: 1px solid;font-size: 18px;padding: 10px;width: 100%;}

.custom_field_test {
  display: table;
  width: 100%;
}

.custom_field_test-row {
  display: table-row;
}

.custom_field_test-row > * {
  display: table-cell;
}

.custom_field_test-number img {
  width: 10px;
  opacity: 0.3;
  vertical-align: middle;
  margin-right: 8px;
  cursor: grab;
}

.custom_field_test-number {
  padding-right: 5px;
  width: 15px;
}

.custom_field_test-add span {display: inline-block;text-align: left;text-indent: -99999vw;overflow: hidden;width: 20px;height: 20px;border: 2px solid #888;border-radius: 9999px;background: #fff;position: relative;cursor: pointer;}
.custom_field_test-add span::before {content: "";position: absolute;top: 2px;left: calc(50% - 1px);width: 2px;bottom: 2px;background: #888;}
.custom_field_test-add span::after {content: "";position: absolute;left: 2px;top: calc(50% - 1px);height: 2px;right: 2px;background: #888;}
.custom_field_test-add {text-align: center;margin-top: 30px;}

.custom_field_test-type select {
  vertical-align: baseline;
}

.custom_field_test_del {width: 30px;cursor: pointer;margin: auto;border: 1px solid #888;border-radius: 4px;font-size: 10px;text-align: center;background: #fff;transition: .15s;}
.custom_field_test_del:hover {background: #d33;color: #fff;border-color: #d33;}

.cft_checkbox_wrap {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.cft_checkbox_wrap label {
  width: 100%;
  cursor: pointer;
  user-select: none;
}

.custom_field_checkboxbtn {
  display: inline-block;
  vertical-align: middle;
}

.cft_checkbox_wrap input {
  vertical-align: middle;
  margin-right: 10px;
}

.cft_checkbox_wrap.required_field.form-error-field {
  padding-bottom: 1em;
}