@charset "EUC-JP";

section.join {
	max-width:900px;
	margin:0 auto;
	background-color:white;
	border-radius:.2em;
	padding:2em;
	padding-bottom:5em;
}

section.join form > ul {
	margin:1em 0;
}

.join .buttons {
	margin:2em 0;
	text-align:center;
}

.join .error {
	position:relative;
	margin:1.5em 0;
	border:1px solid red;
	border-radius:.2em;
	background-color:#fee;
	padding:.5em;
	padding-top:2.1em;
	color:red;
}
.join .error::before {
	content:"エラーを確認してください";
	display:inline-block;
	position:absolute;
	top:.5em;
	left:.4em;
	font-size:.9em;
	background-color:red;
	border-radius:.2em;
	color:white;
	padding:0 .4em;
	line-height:1.5;
	margin-right:.5em;
}

/* 入力フォーム */
.join.input ul.category > li {
	position:relative;
	padding:.8em 0;
	border-bottom:1px dotted silver;
}
.join.input ul.category > li:first-child {
	border-top:1px dotted silver;
}
.join.input button.category {
	background-color:steelblue;
}
.join.input button.delete {
	padding:.5em .8em;
	background-color:#aaa;
}
.join.input button.delete:hover {
	opacity:.5;
}
.join.input ul.category .per {
	padding:.5em;
}
#get-url {
	margin-top:.3em;
}


/* ************************************************ */
/* 確認画面 */
/* ************************************************ */
.join.check form label {
	position:absolute;
	display:inline-block;
	top:1.3em;
	left:0;
	font-weight:bold;
	font-size:1em;
	padding:0 .5em;
	border-bottom:1px dashed silver;
}
.check-list > li {
	position:relative;
	padding:1.5em;
	padding-top:3.5em;
	border-bottom:1px solid silver;
}
.check-list > li:last-child {
	border:none;
}
.check-list .input {
	overflow:hidden;
	text-overflow:ellipsis;
}
.join.check #i-category {
}
.join.check #i-category > li:not(:last-child) {
	padding-bottom:1em;
	margin-bottom:1em;
	border-bottom:1px dotted silver;
}
.join.check .tree {
	display:flex;
	flex-flow:row wrap;
}
.join.check .tree > li {
	margin-right:.5em;
}
.join.check .tree > li:not(:last-child) {
	font-size:.85em;
	color:#aaa;
}
.join.check .tree > li:not(:last-child):after {
	content:">";
	color:#999;
	margin-left:.3em;
}
.join.check .tree > li:last-child {
	color:steelblue;
	width:100%;
	margin-top:.1em;
}
.join.check .tree .per {
	font-size:.95em;
	color:#888;
}
.join.check .tree .per::before { content:"("; }
.join.check .tree .per::after { content:")"; }
.join.check #cancel {
	margin-left:1em;
	background-color:#ddd;
	color:#666;
}
.join.check #cancel:hover {
	background-color:#eee;
}
div.recaptcha {
	text-align:center;
	padding:0 .5em;
}
div.recaptcha > div {
	display:inline-block;
}
.join p.recaptcha {
	margin:.5em auto;
	font-size:.9em;
	color:#999;
	text-align:center;
}
	

/* ************************************************ */
/* 完了画面 */
/* ************************************************ */
.join.done .id {
	color:steelblue;
	font-style:italic;
	margin:0 .3em;
}
.join.done ol {
	list-style:disc inside;
}
.join.done ol li {
	padding:.3em 0;
}


/* ************************************************ */
/* スマホ対応 */
/* ************************************************ */
@media screen and (max-width: 600px) {


section.join {
	padding:0;
	padding-bottom:1em;
}
section.join form > ul {
	border-width:1px 0;
	margin-top:0;
}
section.join h1 {
	font-size:1.4em;
	padding:1em .3em 0;
}
.join.input ul.category button.category {
	width:100%;
	margin-bottom:.5em;
}
.join.input ul.category button.delete {
	position:absolute;
	bottom:.8em;
	right:0;
}

.check-list > li {
	padding-left:0;
	padding-right:0;
}

}