/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 750px) {
}

@media (min-width: 751px) {
}


/* ---------------------------------------- common */

#wrapper { font-size: clamp(1.4rem, 2vw, 2rem); }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ---------------------------------------- header */

@media (max-width: 750px) {
	header .inner { width: 100%; }
}

@media (min-width: 751px) {
	header { padding: 0 1.5em; }
	header .inner {
		max-width: 1100px;
		margin: 0 auto;
	}
}

/* ---------------------------------------- mv */

@media (max-width: 750px) {
	#mv img {
		width: 100%;
		max-width: 750px;
		height: auto;
	}
}

@media (min-width: 751px) {
	#mv img {
		width: 100%;
		max-width: 2000px;
		height: auto;
	}
}

/* ---------------------------------------- links */

#links {
	background: rgb(0,138,213);
	background: linear-gradient(90deg, rgba(0,138,213,1) 0%, rgba(1,57,149,1) 100%);
}
#links a { display: inline-block; }
#links a:hover { opacity: .5; }

@media (max-width: 750px) {
	#links { padding: 2.5em 3em; }
	#links .inner ul li:first-child { margin: 0 0 1.5em; }
}

@media (min-width: 751px) {
	#links { padding: 2em 1.5em; }
	#links .inner {
		max-width: 1100px;
		margin: 0 auto;
	}
	#links .inner ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	#links .inner ul li { width: 47.1818%; }
}

/* ---------------------------------------- main-content */

@media (max-width: 750px) {
	#main-content {
		background: #f4fbff;
	}
	#main-content img {
		width: 100%;
		max-width: 750px;
		height: auto;
	}
}

@media (min-width: 751px) {
	#main-content {
		background: #f4fbff url( ../images/pc/main-back.png ) no-repeat top center;
		background-size: auto 100%;
	}
	#main-content .inner {
		max-width: 1250px;
		margin: 0 auto;
	}
	#main-content img {
		width: 100%;
		max-width: 1250%;
		height: auto;
	}
}

/* ---------------------------------------- application */

#application { padding: 5em 5.3333%; }
#application h2 {
	color: #0d3d8a;
	font-size: clamp(2.4rem, 2vw + 1rem, 3.6rem);
	text-align: center;
	font-weight: bold;
	font-style: italic;
	margin: 0 0 1em;
}
#application table {
	width: 100%;
}
#application table th,
#application table td {
	background: #fff;
	line-height: 1.6;
}
#application table th {
	background: #EFF0F1;
	text-align: center;
	font-weight: bold;
}

@media (max-width: 750px) {
	#application table { border-top: 1px #BDC3BF solid; }
	#application table th,
	#application table td {
		display: block;
		width: 100%;
		border-top: none;
		border-left: 1px #BDC3BF solid;
		border-right: 1px #BDC3BF solid;
		border-bottom: 1px #BDC3BF solid;
		padding: 1em;
	}
}

@media (min-width: 751px) {
	#application .inner {
		display: block;
		max-width: 1100px;
		margin: 0 auto;
	}
	#application table th, table td {
		border: 1px #BDC3BF solid;
		text-align: left;
		padding: 1em;
		vertical-align: middle;
	}
	#application table th {
		width: 25%;
	}
}

/* ---------------------------------------- contact */

#contact { 
	background: #fffdd9;
	padding: 5em 5.3333%; 
}

#contact h2 {
	color: #0d3d8a;
	font-size: clamp(2.4rem, 2vw + 1rem, 3.6rem);
	text-align: center;
	font-weight: bold;
	font-style: italic;
	margin: 0 0 1em;
}
#contact table {
	width: 100%;
}
#contact table th,
#contact table td {
	background: #fff;
	line-height: 1.6;
}
#contact table th {
	background: #dbf2ff;
	text-align: center;
	font-weight: bold;
}
#contact table td p + p { margin: .5em 0 0; }

#contact table th .req {
    display: inline-block;
    color: #fff;
    background: #C20017;
    font-size: clamp(1.2rem, 3vw - 1rem, 1.4rem);
    padding: 0.25em 1em;
    margin: 0 0 0 1em;
}

@media (max-width: 750px) {
	#contact table { border-top: 1px #BDC3BF solid; }
	#contact table th,
	#contact table td {
		display: block;
		width: 100%;
		border-top: none;
		border-left: 1px #BDC3BF solid;
		border-right: 1px #BDC3BF solid;
		border-bottom: 1px #BDC3BF solid;
		padding: 1em;
	}
	#contact table th br { display: none; }
	#contact input[type="submit"] {
		width: 72.666%;
		min-width: 240px;
		max-width: 545px;
		aspect-ratio: 545 / 114;
		border: 0;
		background: url(../images/sp/send.png) center center no-repeat;
		background-size: contain;
		text-indent: -9999px;
		-webkit-transition: all .2s;
		-o-transition: all .2s;
		transition: all .2s;
		cursor: pointer;
	}
}

@media (min-width: 751px) {
	#contact .inner {
		display: block;
		max-width: 1100px;
		margin: 0 auto;
	}
	#contact table th, table td {
		border: 1px #BDC3BF solid;
		text-align: left;
		padding: 1em;
		vertical-align: middle;
	}
	#contact table th {
		width: 30%;
		padding: 1em 4em 1em 1em;
		position: relative;
	}
	#contact table th .req {
		position: absolute;
		right: 1em;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#contact input[type="submit"] {
		width: 47.1818%;
		min-width: 240px;
		max-width: 519px;
		aspect-ratio: 519 / 114;
		border: 0;
		background: url(../images/pc/send.png) center center no-repeat;
		background-size: contain;
		text-indent: -9999px;
		-webkit-transition: all .2s;
		-o-transition: all .2s;
		transition: all .2s;
		cursor: pointer;
	}
}

input[type="text"], input[type="password"], input[type="submit"], input[type="email"], input[type="tel"], button, textarea {
	vertical-align: middle;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
	width: 100%;
	border: 1px #ccc solid;
	font-size: clamp( 14px, 1.5vw, 18px );
	line-height: 1.6;
	padding: .5em .75em;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input[type="text"].middle, input[type="password"].middle, input[type="email"].middle, input[type="tel"].middle {
	width: 40%;
}
input[type="text"].short, input[type="password"].short, input[type="email"].short, input[type="tel"].short {
	width: 20%;
}
select {
	border: 1px #ccc solid;
	font-size: clamp( 14px, 1.5vw, 18px );
	line-height: 1.6;
	text-align: center;
	padding: .5em 1em;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
select optgroup option::before {
    content: "";
}
input[type="radio"] {
	-webkit-appearance: radio;
	-moz-appearance: radio;
	appearance: radio;
}

input[type="checkbox"] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
}

.send {
	text-align: center;
	margin: 2.5em 0 0;
}
#contact input[type="submit"]:hover { opacity: .5; }

/* ---------------------------------------- footer */

footer { 
	text-align: center; 
	padding: 4em 0 0; 
}
footer .logo { margin: 0 0 2em; }
footer .logo + p { margin: 0 0 3em; }
footer ul li a {
    display: inline-block;
    color: #008ad4;
    text-decoration: underline;
}
	footer ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		margin: 0 0 4em;
	}
	footer ul li { margin: 0 1em; }
footer .cregit {
	color: #fff;
	background: #013794;
	font-size: clamp(1.2rem, 3vw - 1rem, 1.4rem);
	padding: 10px;
}

@media (max-width: 750px) {
	footer .logo img {
		width: 54%;
		height: auto;
	}
}

@media (min-width: 751px) {
	footer { font-size: clamp(1.4rem, 2vw, 1.6rem); }
	footer .inner {
		display: block;
		max-width: 1100px;
		margin: 0 auto;
	}

}


/* ---------------------------------------- thanks */

#thanks {
	background: #f4fbff;
}
#thanks .inner {
	max-width: 1100px;
	margin: 0 auto;
}
#thanks h2 {
	color: #0d3d8a;
	font-size: clamp(2.4rem, 2vw + 1rem, 3.6rem);
	font-weight: bold;
	font-style: italic;
	text-align: center;
	margin: 0 0 1em;
}
#thanks p {
	text-align: center;
	line-height: 2;
}

@media (max-width: 750px) {
	#thanks { padding: 8em 5.3333%; }
}

@media (min-width: 751px) {
	#thanks { padding: 7em 5.3333%; }
}

/* ---------------------------------------- footbt */

@media (max-width: 750px) {
	#footbt {
		position: fixed;
		bottom: 0;
		left: 0;
	}
	#footbt ul {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	}
	#footbt ul li { width: 50%; }
	#footbt ul li a { display: block; }
}

@media (min-width: 751px) {
	#footbt { display: none !important; }
}