.message {
  width: 92%;
  max-width: 700px;
  margin: 60px auto 30px auto;
  padding: 1em;
  line-height: 1.6em;
  font-size: 14px;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .message {
    font-size: 16px;
  }
}
.message p {
  margin: 0;
  line-height: 1.7em;
  text-align: justify;
  text-justify: distribute;
}
.message b {
  margin: 0 .3em;
  padding: 0 .3em;
  background-color: hsl(0, 100%, 95%);
  display: inline-block;
}
.message .note {
  color: #444;
  font-size: .8em;
  line-height: 1.7em;
  margin: .8em 0;
}

/* フォーム項目内のエラーメッセージ */
.sub_message {
  color: red;
}

/* 文字数カウント用 */
.letter-count {
  font-size: .8em;
  text-align: right;
}



form {
  margin-bottom: 0;
}
.form {
  width: 92%;
  max-width: 700px;
  margin: 0 auto 50px auto;
  padding-top: 2em;
}
form p,
.form p {
  line-height: 1.7em;
}

form dl,
.form dl {
  line-height: 2em;
  margin-bottom: 80px;
}
form dt,
form dd,
.form dt,
.form dd {
  width: 100%;
}
form dt,
.form dt {
  /* color: hsl(130, 56%, 46%); */
  font-size: .9em;
  font-weight: bold;
  margin: 0 0 .4em 0; 
}
form dt span,
.form dt span {
  margin-left: 1em;
  /* background-color: hsl(0, 56%, 46%); */
  color: white;
  border-radius: .4em;
  padding: 0 .3em;
  line-height: 1.5em;
}
form .dt-in-dd,
.form .dt-in-dd {
  color: hsl(130, 56%, 46%);
  font-size: .8em;
}
form dd,
.form dd {
  margin: 0 0 1.8em 0;
}
form dd p,
.form dd p {
  color: #777;
  font-size: .8em;
  line-height: 1.7em;
  margin: .8em 0;
}
form dd span.w8,
.form dd span.w8 {
  display: inline-block;
  width: 8em;
}
form dd .notice {
  color: red !important;
}

/* ライブ配信ZoomURL等設定ページ */
form dd div.mt5,
.form dd div.mt5 {
  margin-top: .5em;
}

/* フォーム登録内容 */
.registered {
  margin: 0.5em 0;
  font-size: 1.2em;
  padding: 0.5em;
}

/* フォーム項目の中の項目 */
.inner-list {
  width: 90%;
  margin: 1em auto;
  padding: .5em;
  box-sizing: border-box;
  background-color: hsl(130, 56%, 98%);
  border-radius: .5em;
}
.inner-list dt,
.inner-list dd {
  margin: 0;
}


input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=number] {
  box-sizing: border-box;
  padding: .6em .8em;
  outline: none;
  font-size: 16px;
  border: 1px solid #CCC;
  border-radius: .3em;
}
input[type=number] {
  margin-right: .5em;
}
input:focus {
  background-color: hsl(224, 100%, 95%);
}
input:read-only {
  background-color: transparent;
  border: none;
}

input.short {
  width: 8em;
  margin-right: 1em;
}
input.middle {
  width: 16em;
}
input.long {
  width: 100%;
  max-width: 600px;
}

/* 会員情報編集や出展者情報編集の住所欄とFAQ編集ページのカテゴリ名のみ */
input.mt5 {
  margin-top: .5em;
}

/* 〒マークとinputの間のマージン */
input.ml5 {
  margin-left: .5em;
}


/* 事務局ページの会員情報一覧のテキスト検索のみ */
input.semi-short {
  width: 9em;
  margin-left: 1em;
}

/* 来場者アンケートの満足度5段階評価で使用 */
input[type=range].satisfaction {
  -webkit-appearance: none;
  width: 100%;
  height: 16px;
  background-color: #DDD;
  border-radius: 8px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .3s;
  transition: all .3s;
}
input[type=range].satisfaction:hover {
  opacity: 1;
}
input[type=range].satisfaction:focus {
  outline: none;
}
input[type=range].satisfaction::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background-color: #4CAF50;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
input[type=range].satisfaction::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background-color: #4CAF50;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
input[type=range].range1::-webkit-slider-thumb {
  background-color: hsl(54, 39%, 49%);
}
input[type=range].range1::-moz-range-thumb {
  background-color: hsl(54, 39%, 49%);
  background-color: hsl(76, 39%, 49%);
}
input[type=range].range2::-webkit-slider-thumb {
  background-color: hsl(76, 39%, 49%);
}
input[type=range].range2::-moz-range-thumb {
  background-color: hsl(76, 39%, 49%);
}
input[type=range].range3::-webkit-slider-thumb {
  background-color: hsl(122, 39%, 49%);
}
input[type=range].range3::-moz-range-thumb {
  background-color: hsl(122, 39%, 49%);
}
input[type=range].range4::-webkit-slider-thumb {
  background-color: hsl(160, 39%, 49%);
}
input[type=range].range4::-moz-range-thumb {
  background-color: hsl(160, 39%, 49%);
}
input[type=range].range5::-webkit-slider-thumb {
  background-color: hsl(184, 39%, 49%);
}
input[type=range].range6::-moz-range-thumb {
  background-color: hsl(184, 39%, 49%);
}

input[type=range].satisfaction + div {
  text-align: center;
}
.range-note {
  display: flex;
  justify-content: space-between;
}
.range-note span {
  font-size: .8em;
  color: #666;  
}
.range-note span:first-child i {
  margin-right: .5em;
}
.range-note span:last-child i {
  margin-left: .5em;
}


label {
  margin-right: 2em;
  display: inline-block;
  line-height: 2em;
}
label.block {
  display: block;
  margin-bottom: 1em;
  line-height: 1em;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: .5em;
}

select {
  outline: none;
  height: 2.2em;
	width: 18em;
  padding: 0 .5em;
  border: 1px solid #CCC;
  border-radius: .3em;
  margin-bottom: .5em;
}
select:focus {
  background-color: hsl(224, 100%, 95%);
}
select.invalid {
  background-color: hsl(4, 100%, 95%);
}

textarea {
  box-sizing: border-box;
  width: 100%;
  height: 10em;
  padding: .6em .8em;
  margin-bottom: 2em;
  outline: none;
  font-size: 16px;
  border: 1px solid #CCC;
  border-radius: .3em;
  resize: vertical;
}
textarea:focus {
  background-color: hsl(224, 100%, 95%);  
}
textarea.alert {
  background-color: hsl(4, 100%, 95%);  
}

/* 来場者アンケートの満足度で使用 */
.comment-block {
  box-sizing: border-box;
  background-color: hsl(130, 56%, 98%);
  border: 1px solid hsl(130, 56%, 68%);
  border-radius: .3em;
  padding: 1em;
  margin: .5em 0 2em 0;
}
.comment-block-title {
  padding: .5em;
  font-weight: bold;
  color: hsl(130, 87%, 25%);
}
.comment-block .rate {
  width: 100%;
  display: flex;
}
.comment-block .rate input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: -1; 
}
.comment-block .rate label {
  box-sizing: border-box;
  width: 20%;
  font-size: 40px;
  text-align: center;
  margin: 0;
  color: hsl(60, 3%, 87%);
}
.comment-block .rate label.on {
  color: hsl(50, 100%, 50%);
}
.comment-block .rate-text {
  margin-top: .5em;
  text-align: center;
}
.comment-block textarea {
  margin-top: 2em;
  height: 8em;
}


button,
a.button,
span.button {
  font-family: 'Varela Round', 'Kosugi Maru', sans-serif;
  font-weight: bold;
  box-sizing: border-box;
  color: white;
  border-radius: 2em;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  transition: all .3s;
}
button.block {
  display: block;
  margin: 1.5em auto;
  padding: .5em 1em;
  width: 12em;
}
button.block.wide {
  width: 20em;
  max-width: 100%;
}
a.button.block,
span.button.block {
  display: block;
  width: 12em;
  text-align: center;
  margin: 1.5em auto;
  padding: .5em 1em;
  line-height: 1.15em;
}
button.inline,
a.button.inline,
span.button.inline {
  display: inline-block;
  margin: .5em;
  padding: 0 1em;
  font-size: .8em;
  line-height: 1.8em;
  vertical-align: middle;
}
button.inline.text-medium,
a.button.inline.text-medium,
span.button.inline.text-medium {
  font-size: 1em;
}

button:disabled {
  background-color: #777 !important;
  border: 1px solid #888 !important;
  cursor: not-allowed !important;
}

/*
  blue = データベース処理（申し込みやダウンロードなど）
  orange = キャンセル・戻る
  red = 削除
  green = それ自体には処理が生じない（ページ遷移やフォーム展開、検索など）
*/
button.blue,
a.button.blue,
span.button.blue {
  background-color: hsl(224, 100%, 65%);
  border: 1px solid hsl(224, 100%, 65%);
}
button.blue:hover,
a.button.blue:hover,
span.button.blue:hover {
  background-color: hsl(224, 100%, 75%);
}
button.orange,
a.button.orange,
div.button.orange,
span.button.orange:hover {
  background-color: hsl(17, 100%, 65%);
  border: 1px solid hsl(17, 100%, 65%);
}
button.orange:hover,
a.button.orange:hover,
div.button.orange:hover,
span.button.orange:hover {
  background-color: hsl(17, 100%, 75%);
}
button.red,
a.button.red,
span.button.red {
  background-color: hsl(0, 100%, 46%);
  border: 1px solid hsl(0, 100%, 46%);
}
button.red:hover,
a.button.red:hover,
span.button.red:hover {
  background-color: hsl(0, 100%, 55%);
}
button.green,
a.button.green,
div.button.green,
span.button.green {
  background-color: hsl(130, 56%, 56%);
  border: 1px solid hsl(130, 56%, 56%);
}
button.green:hover,
a.button.green:hover,
span.button.green:hover {
  background-color: hsl(130, 56%, 66%);
}
button.gray,
span.button.gray {
  background-color: hsl(120, 1%, 65%);
  border: 1px solid hsl(120, 1%, 65%);
}
button.gray:hover,
span.button.gray:hover {
  border: 1px solid hsl(120, 1%, 75%);
}

button i,
a.button i,
span.button i {
  margin-right: .5em;
}

div.button {
  display: inline-block;
  box-sizing: border-box;
  width: 10em;
  text-align: center;
  padding: .4em 1em;
  line-height: 1.15em;
  color: white;
  border-radius: 2em;
  cursor: pointer;
}
div.button.block {
  display: block;
  margin: 1em auto;
}
div.button.gray {
  background-color: hsl(120, 1%, 65%);
  border: 1px solid hsl(120, 1%, 65%);
  cursor: normal;
  font-size: .8em;
  color: white;
  cursor: default;
}
div.button.block.gray + p {
  font-size: .8em;
  text-align: center;
}

button + p.under-button,
.button + p.under-button {
  text-align: left;
  font-size: .8em;
  width: 92%;
  max-width: 700px;
  margin: 0 auto 4em;
}

.revise-button {
  text-align: center;
}



/* 申し込みのお子さまラジオボタンと注意事項 */
.child-radio {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid hsl(34, 100%, 85%);
  background-color: hsl(34, 100%, 97%);
  box-shadow: 0 0 3px hsl(34, 100%, 85%);
  border-radius: 1em;
  padding: .7em;
  margin-bottom: 1em;
  cursor: pointer;
  transition: all .3s;
}
.child-radio:hover {
  background-color: hsl(34, 100%, 85%);
}
.child-radio.gray {
  border: 2px solid hsl(30, 2%, 82%);
  background-color: hsl(30, 2%, 92%);
  box-shadow: 0 0 3pxhsl(30, 2%, 82%);
  cursor: default;
}
.child-radio .notice {
  color: hsl(0, 63%, 45%);
  font-size: .8em;
}


/* ホームのお知らせ */
.layout1 {
  background-color: hsl(327, 94%, 96%);
  color: hsl(327, 77%, 43%);
  font-family: 'Shippori Mincho B1', serif;
}
.layout2 {
  background-color: hsl(50, 94%, 94%);
  color: hsl(80, 77%, 35%);
}
.layout-example {
  padding: .5em 1em;
}

/* パスワード表示用（仮登録＆マイページ編集） */
.password-input-box {
  position: relative;
}
.display-label {
  position: absolute;
  right: 4px;
  top: 4px;
  font-size: 1.4em;
  display: block;
  width: 1.4em;
  line-height: 1.4em;
  margin: 0;
  text-align: center;
  border-radius: .3em;
  background-color: hsl(59, 86%, 81%);
  transition: all .3s;
}
.display-label .display-on {
  display: none;
}
.display-label .display-off {
  display: inline;
}
.display-label.on {
  background-color: transparent;
}
.display-label.on .display-on {
  display: inline;
}
.display-label.on .display-off {
  display: none;
}
.display-button {
  display: none;
}


.hidden_form {
  margin: 1em 0 4em 0;
  padding: .5em;
  display: none;
}
.hidden_form .hidden_form {
  background-color: white;
}
.hidden_form.on {
  display: block;
}
.hidden_form_buttons {
  margin-top: 1em;
}
.hidden_form div:nth-child(n + 1) {
  margin-top: .5em;
}

input[name="accompany_display"] {
	margin-bottom: .5em;
}
input[name="accompany_display"]:read-only {
	background-color: #EEE;
	border: 1px solid #AAA;
}

.faq-categories .hidden_form,
.faqs .hidden_form {
  text-align: left;
  margin: .7em;
}


/* 担当者の追加用 */
#pic2,
#pic3 {
  visibility: hidden;
  height: 0;
}
#pic2.on,
#pic3.on {
  visibility: visible;
  height: auto;
}

/* スケジュール */
.discription-box {
  margin: 2em 1em;
  padding: 1em;
  line-height: 2em;
  text-align: center;
}
.blank-time {
  display: inline-block;
  line-height: 1.5em;
  text-align: center;
  width: 6em;
  color: black;
  margin-right: 1em;
  border-radius: 1em;
}
.blank-time.selectable {
  border: 1px solid hsl(130, 56%, 76%);
  background-color: hsl(130, 56%, 86%);
}
.blank-time.selected {
  color: white;
  border: 1px solid hsl(130, 56%, 76%);
  background-color: hsl(130, 56%, 50%);
}
.blank-time.disabled {
  border: 1px solid hsl(0, 0%, 85%);
  background-color: hsl(0, 0%, 75%);
}


label.date-label {
  width: 10em;
  margin: 1em;
  text-align: center;
  line-height: 2em;
  color: black;
  border: 1px solid hsl(130, 56%, 76%);
  border-radius: 1em;
  background-color: hsl(130, 56%, 86%);
}
label.date-label input[type="checkbox"] {
  display:none;
}
label.date-label:has(>input:checked) {
  color: white;
  background-color: hsl(130, 56%, 56%);
}
label.date-label:has(>input:disabled) {
  border: 1px solid hsl(0, 0%, 85%);
  background-color: hsl(0, 0%, 75%);
}

.time-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 3em 0 5em 0;
}
label.time-label {
  width: 30%;
  margin: .8%;
  text-align: center;
  line-height: 1.5em;
  color: black;
  border: 1px solid hsl(130, 56%, 76%);
  border-radius: 1em;
  background-color: hsl(130, 56%, 86%);
}
label.time-label:nth-child(6n + 4),
label.time-label:nth-child(6n + 5),
label.time-label:nth-child(6n + 6) {
  margin-bottom: 1em;
}
input[type="checkbox"].time {
  display:none;
}
label.time-label:has(>input.time:checked) {
  color: white;
  background-color: hsl(130, 56%, 56%);
}
label.time-label:has(>input:disabled) {
  border: 1px solid hsl(0, 0%, 85%);
  background-color: hsl(0, 0%, 75%);
}

.tool-tip {
  position: absolute;
  width: 6em;
  line-height: 3em;
  text-align: center;
  background-color: hsla(0, 0%, 100%, .9);
}


/* スケジュール開始時刻入力 */
.first_heading,
.first_list,
.second_heading,
.second_list {
  display: none;
}
.time_list {
  list-style-type: none;
  line-height: 2em;
  padding: 0;
}
.time_list li {
  margin-bottom: .5em;
}
.time_list .time_list_title {
  background-color: rgb(250, 250, 160);
  display: inline-block;
  width: 4em;
  text-align:center;
  border-radius: .5em;
  margin-right: .5em;
}
.time_list_title,
.time_list_data,
.time_copy_button {
  display: none;
}
.time_select {
  display: inline;
  width: 4em;
}
.duplicate_message {
  display: none;
  margin-left: 5em;
  color: red;
}
.duplicate_message.on {
  display: block;
}

/* ドラッグ&ドロップエリア */
.drop_area {
  width: 100%;
  height: 200px;
  padding: 1em;
  box-sizing: border-box;
  border: 1px solid #AAA;
  background-color: #EEE;
}
.drop_area.on {
  background-color:hsl(80, 100%, 90%);
}
.upload_file {
  visibility: hidden;
}


@media screen and (min-width: 768px){
  label.time-label {
    width: 15%;
    margin: .5% .5% 1em .5%;
  }
  button + p.under-button,
  .button + p.under-button {
    text-align: center;
  }
}