/* 2025-06 fujiwara@imaging */

h1,h2,h3{margin:1em 0;}
ul{
	list-style-type:none;
	padding-left:0;
}
dt{}
dd{margin-left:0;padding-left:0px;margin-bottom:1em;}
.em{font-weight:700;color:#1364ff;}
.pages {width:80%;margin:100px auto 0;}
.pages >*{width:640px;margin:30px auto;}
.form{width:100%;}
.form input[type='email'],
.form input[type='text'],
.form select{
	width:100%;
	line-height:30px;
	border-radius:4px;
	padding:6px;
	border:1px solid #888;
	background-color:#fff;
	font-size:inherit; /* サイズを設定するとselect optionが正しく表示されないことがある */
}
.form input:focus{background-color:white;border:2px solid #0060df;}
.form a.btn_pageaction{
	border-radius:5px;
	min-width:125px;
	height:40px;
	/*line-height:40px;*/
}
.message{display:block;
	background-color:#eee;
	font-weight:500;
	padding:24px;
	border-radius: 6px;
	border: 1px solid #ddd;
}
.message.empty{display:none;}
.message.error{background-color:#eeeeae;}
.message.fatal{background-color: #ffd8d6; color:#a30101;}
.message.success{background-color:#cfc;}
.message.success::before{ 
	content:'\e2e6'; /* check */
	font-family:'Material Icons';
	font-size:28px;
	vertical-align:middle;
}
.message.fatal::before, .message.error::before{
	content:'\e000'; /* 'error'*/
	font-family:'Material Icons';
	font-size:28px;
	vertical-align:middle;
}

/* user entry form */
.entry .pages > * {
  width: 70%;
  margin: 30px auto;
}
.entry .pages > .page> * {
  margin: 0 auto 40px;
}
.entry .form dl{width:100%;display:flex;flex-wrap:wrap;}
.entry .form dt{
	display:inline-block;
	position:relative;
	width:250px; height:50px; overflow:hidden;
	padding:0 0 0 20px;margin:0;
	background-color:#e0e0e0;
	align-content:center;
	border-bottom:1px dotted #444;
}
.entry .form dd{
	display:inline-flex; gap:3px;
	width: calc(100% - 250px); height:50px;
	padding:0 5px;margin:0;
	background-color:#fafafa;
	align-content:center;
	align-items:center;
	border-bottom:1px dotted #444;
}
.entry .form dt.marked:before{
	display: inline-block;
	content: '';
	border-width: 10px;
	border-style: solid;
	border-color: #c00 transparent transparent #c00;
	position: absolute;
	top: 0; left: 0;
}
.entry .form input, .entry .form select {width:calc(100% - 50px);}
.entry .form input[required],
.entry .form select[required]{
	background-color:#fff8f8;
}
.entry .form input.valid[type="text"][required],
.entry .form select.valid[required] {/*requiredで入力済み*/
	background-color: #fff;
}
.entry .form input[required]:focus,
.entry .form select[required]:focus{
	background-color:#fff;
}
.entry .form input + .status,
.entry .form select + .status{
	display:flex;width:32px;height:32px;line-height:32px;
	border-radius:50%;
	overflow:hidden;
	font-family:'Material Icons';
	font-size:20px;
}
.entry .form input:not(.valid) + .status::before,
.entry .form select:not(.valid) + .status::before {
	background-color:#a80f0f;color:white;
	content:'\e645'; /* high priority */
	width: 100%;height: 100%;
	text-align:center;
}
.entry .form input.valid + .status::before,
.entry .form select.valid + .status::before {
	background-color:green;color:white;
	content:'\e876'; /* done */
	width: 100%;height: 100%;
	text-align:center;
}
.entry .form input:not(.valid):not([required]) + .status::before,
.entry .form select:not(.valid):not([required]) + .status::before {
	background-color:#bbb;color:white;
}
.entry .form.submission{
}
.entry .form.submission input[type="checkbox"]{
	width:25px;height:25px;
}
.entry .form .datalabel:not(.optional):after{
/*
	content:'必須';
	display:inline;
	background-color:#c00;
	color:white;
	padding: 1px 5px; margin: 0 10px;
*/
}
.terms{/*規約*/
	width:100%;height:250px;
	padding:1em;margin:10px 0 30px;
	border:1px solid #888;
	overflow:hidden;
}
.terms >*{
	width:100%;height:100%;
	overflow-Y:scroll;
}
.terms .content{border:0;}/*iframe*/
a.btn_pageaction.large{
	width:400px;
	height:65px;
}
a.btn_pageaction.register{}
a.btn_pageaction.cancel{}


.progress .step {
	position:relative;
	display: inline-flex;
	height: 50px;
	background-color: #eee;
	align-items: center;
	padding: 0 25px;

}
.progress .step:not(:first-of-type){padding-left:30px;}
.progress .step::before{/*右向きの▶　50pxの高さのエレメントにアタッチする*/
	display: block;
	width:0; height:0;
	position: absolute;
	top: 0;
	right: -19px;
	content: '';
	border-style: solid;
	border-width: 25px 0 25px 20px;
	border-color: transparent transparent transparent #eee;
}
.progress .step:last-of-type::before{border:none;}
.progress .step.current {background-color:#222;color:white;z-index:2;}
.progress .step.current::before{border-left-color:#222;}