@charset "UTF-8";
@import "../../include/css/common.sp.css";

/* ---------------------------------------------------------
	CSS Document title
--------------------------------------------------------- */

#title {
	margin-bottom: 30px;
}

/* ---------------------------------------------------------
	CSS Document course
--------------------------------------------------------- */

#course {
	margin: 0 20px 20px;
	text-align: left;
}

#course .guidetext, #form .guidetext {
	text-align: center;
	margin-bottom: 10px;
	font-size: 5vmin;
}

#course h3 {
	margin-bottom: 10px;
	text-align: center;
	font-weight: normal;
	font-size: 5vmin;
}

#course .th {
	display: none;
}

#course .td {
	display: table;
	width: 100%;
	border-collapse: collapse;
	font-size: 3vmin;
}

#course .td dl {
	display: table-row;
	width: 100%;
}

#course .td dt {
	display: table-cell;
	vertical-align: middle;
	width: 7em;
	border: solid 1px #d6d6d5;
	background: #f3f3f2;
	text-align: center;
}

#course .td dd {
	display: table-cell;
	vertical-align: middle;
	padding: 5px;
	padding-left: 10px;
	border: solid 1px #d6d6d5;
}

#course .td dd span {
	color: #cb0101;
}

/* ---------------------------------------------------------
	CSS Document form
--------------------------------------------------------- */

#form {
	margin: 0 20px 40px;
	text-align: left;
}

#form h3 {
	margin-top: 30px;
	margin-bottom: 10px;
	text-align: center;
	font-weight: normal;
	font-size: 5vmin;
}

#form .table {
	margin-bottom: 25px;
	padding: 25px 20px;
	background: #f4eeeb;
	text-align: left;
}

#form dl:not(:last-of-type) {
	margin-bottom: 20px;
}

#form dt {
	margin-bottom: 10px;
	line-height: 18px;
}

#form dt em {
	display: inline-block;
	vertical-align: 2px;
	height: 18px;
	margin-left: 5px;
	padding: 0 4px;
	background: #b92765;
	font-size: 13px;
	line-height: 16px;
	color: #fff;
}

#form dd {
	font-size: 0;
}

#form dd a {
	margin-left: 8px;
	font-size: 3vmin;
}

#form dd div {
	margin-top: 10px;
}

#form dd .mark {
	margin-right: 10px;
	font-size: 16px;
}

#form dd select + .mark {
	display: inline-block;
	vertical-align: top;
	width: 30px;
	margin-right: 0;
	padding-left: 5px;
	font-size: 14px;
	line-height: 50px;
}

#form dd.birth select {
	padding: 0 0 0 10px;
	background: #fff;
	text-align: center;
}

/* ---------------------------------------------------------
	CSS Document width
--------------------------------------------------------- */

#form .w90 {
	width: calc(36% - 30px);
}

#form .w80 {
	width: calc(32% - 30px);
}

#form .w120,
#form .w48 {
	width: calc(50% - 3px);
}

#form .w120:first-of-type,
#form .w48:first-of-type {
	margin-right: 6px;
}

#form .w50,
#form .w300,
#form .w190,
#form .w100 {
	width: 100%;
}

/* ---------------------------------------------------------
	CSS Document form > kiyaku
--------------------------------------------------------- */

#form .kiyaku {
	margin-bottom: 40px;
}

#form .kiyaku .overflow {
	height: 403px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 20px;
	padding: 25px;
	border: solid 1px #c8c8c8;
}

#form .kiyaku h3 {
	margin-top: 0;
	margin-bottom: 15px;
}

#form .kiyaku pre {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 14px;
	line-height: 1.8;
	word-wrap: break-word;
	white-space: pre-wrap;
	color: #2f2b29;
}

#form .kiyaku .print {
	text-align: right;
}

#form .kiyaku .print a {
	display: inline-block;
	vertical-align: top;
	height: 32px;
	padding: 0 15px;
	border-radius: 5px;
	background: #eee8e5;
	text-decoration: none;
	font-size: 15px;
	line-height: 32px;
	color: #2f2b29;
}

#form .kiyaku .print a:before {
	display: inline-block;
	vertical-align: top;
	content: '';
	width: 18px;
	height: 32px;
	margin-right: 5px;
	background: url(../images/ico_print.png) no-repeat left / 18px auto;
}

/* ---------------------------------------------------------
	CSS Document form > agreement
--------------------------------------------------------- */

#form .agreement {
	margin-bottom: 20px;
	padding: 20px 20px 10px;
	background: #f3f3f2;
	font-size: 15px;
}

#form .agreement input {
	display: inline-block;
	vertical-align: -3px;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	-webkit-appearance: checkbox;
	appearance: checkbox;
}

#form .agreement label {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 30px);
	margin-bottom: 10px;
}

/* ---------------------------------------------------------
	CSS Document form > btn
--------------------------------------------------------- */

#form p {
	margin-bottom: 30px;
	font-size: 3vmin;
}

#form p a:after {
	display: inline-block;
	vertical-align: top;
	content: '';
	width: 14px;
	height: 24px;
	margin-left: 7px;
	background: url(../../include/images/ico_external.png) no-repeat left / 100% auto;
}

#form .btn {
	text-align: center;
}

#form .btn input {
	width: 280px;
	height: 60px;
	border: 0;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #f18931;
	background: -moz-linear-gradient(top,  #f18931 0%, #e1655e 100%);
	background: -webkit-linear-gradient(top,  #f18931 0%,#e1655e 100%);
	background: linear-gradient(to bottom,  #f18931 0%,#e1655e 100%);
	font-size: 22px;
	color: #fff;
}
#form input[type=checkbox] {
	display: inline-block;
	vertical-align: -3px;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	-webkit-appearance: checkbox;
	appearance: checkbox;
}

.msg-warning {
	background: #fcc;
	padding: 1em;
	text-align: left;
	margin: 1em 20px;
}