.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;
}

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



form {
	margin-bottom: 0;
}
form.inline {
	display: inline;
}
.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 {
	font-size: .9em;
	font-weight: bold;
	margin: 0 0 .4em 0; 
}
form dt span,
.form dt span {
	margin-left: 1em;
	color: white;
	border-radius: .4em;
	padding: 0 .3em;
	line-height: 1.5em;
}
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 .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.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].satisfaction + div {
	text-align: center;
}


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;
	font-size: 16px;
}
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;
}
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;
}


/* スケジュール */
.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%);
}


.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);
}


/* ドラッグ&ドロップエリア */
.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;
	}
}