@charset "utf-8";
@import url("index.css");

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.textbase {
	display: flex;
}
.textfrm {
	margin: 10px auto 10px auto;
	text-align: left;
}
#errmsg {
	margin: 5px auto 5px auto;
	color: red;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: left;
}

#contact_base {
	margin: 10px 0px;
}

#contactpnl {
	margin: 20px auto 20px auto;
	text-align: left;
}
#contactpnl .itembase {
	display: flex;
}
#contactpnl dl,
#msg_base {
	display: flex;
	align-items: flex-start;
}
#contactpnl dl {
	height: 2.5em;
}
#contactpnl dl dt,
#msg_base dt {
	box-sizing: border-box;
	padding: 0 5px 0 5px;
	width: 12em;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: left;
}
#contactpnl dd,
#contactpnl .cmt,
#msg_base dd {
	padding: 0 5px 0 5px;
	width: 2em;
	font-size: 1.0rem;
	font-weight: normal;
	text-align: right;
}
#contactpnl .cmt {
	padding-top: 2px;
}
#contactpnl .req {
	padding: 0 3px;
	width: 3em;
	border-radius: 5px;
	color: #fff;
	background-color: #ffc0cb;
	font-size: 0.8rem;
	font-weight: normal;
}
#contactpnl .any {
	padding: 0 3px;
	width: 3em;
	border-radius: 5px;
	color: #000;
	background-color: #f8e58c;
	font-size: 0.8rem;
	font-weight: normal;
}

#contactpnl .inpt,
#contactpnl textarea {
	/* 2em + padding */
	width: calc(20em + 2em + 10px);
}
#contactpnl textarea {
	margin-left: calc(2em + 10px);	/*	.cmt幅分	*/
	height: 10em;
}
#contactpnl .inpthalf {
	width: 10em;
}

.dspcation {
	/* req 3em + dt 12em + cmt 2em */
	padding-left: 17em;
	color: red;
	font-size: 1.1rem;
	text-align: left;
}

#inptbasepnl {
	display: flex;
}
#inptbase {
	margin: 0 auto;
	width: auto;
}
#chkplcy {
	width: auto;
}

#confirmbtn {
    padding: 6px 12px;
    border: 2px solid #000066;
    border-radius: 5%;
    font-size: 2rem;
    text-align: center;
    cursor: pointer;
    background: #000066;
    color: #ffffff;
    line-height: 1em;
    transition: .3s;
    box-shadow: 3px 3px 3px #666666;
}
#confirmbtn:active {
    background: #000066;
    color: #ffffff;
}
#confirmbtn:hover {
    color: #000066;
    background: #ffffff;
    box-shadow: none;
}
#confirmbtn:disabled {
	border: 1px solid #c0c0c0;
    color: #a9a9a9;
    background: #ffffff;
    cursor:not-allowed;
    box-shadow: none;
	transform: translate(-3px, -3px);
}