@charset "UTF-8";

/* CSS Document */

body {
	font-family: 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
	line-height: 0;
	text-align: center;
	color: #000;
	font-size: 1em;
	background: #fff url(../images/back.gif) fixed;
	-webkit-text-size-adjust: 100%;
}

@media all and (-ms-high-contrast:none){
    *::-ms-backdrop, body {font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'MS Pゴシック', 'MS PGothic', sans-serif;}
}

body img { max-width: 100%; height: auto; }

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

#wrapper {
	border-top: 15px solid #00aa3c;
	padding-top: 70px;
	transition: 0.4s ease all;
    animation: fadeIn 2s ease 0s 1 normal;
}

#wrapper * { transition: 0.4s ease all; }
#wrapper p, #wrapper li, #wrapper dt, #wrapper dd, #wrapper th, #wrapper td { line-height: 1.5em; }
#wrapper .txtNote { font-size: 0.85em; margin-left: 1em; text-indent: -1em; }
#wrapper a, #wrapper a:hover { color: #000; text-decoration: none; }

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

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

@media(max-width: 680px) {
	#wrapper { padding-top: 50px; }
}

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


/*
=================================================
	header
=================================================
*/

#header {
	padding: 0 100px;
}

#header p { margin-bottom: 15px; }
#header p a img { border: 1px solid #00aa3c; padding: 5px; }
#header p a:hover img { opacity: 0.9; }
#header h1 { font-size: 2.4em; line-height: 1.4em; letter-spacing: 1px; text-shadow: 3px 3px 3px #ccc; margin-bottom: 3px; }
#header h2 { font-size: 2em; line-height: 1.4em; letter-spacing: 1px; text-shadow: 3px 3px 3px #ccc; }


@media(max-width: 1024px) {
	#header { padding: 0 50px; }
	#header h1 span.l1 { display: block; }
}

@media(max-width: 768px) {
	#header { padding: 0 20px; }
}

@media(max-width: 680px) {
	#header { padding: 0 10px; }
	#header h1 { font-size: 1.6em; letter-spacing: 0; }
	#header h2 { font-size: 1.2em; letter-spacing: 0; }
}

@media(max-width: 400px) {
	#header h1 span.l2 { display: block; }
}


/*
=================================================
	main
=================================================
*/

#contents {
	padding: 40px 100px 70px;
}

#contents h3 { font-size: 1.2em; line-height: 45px; border: 1px solid #000; font-weight: normal; width: 8em; margin: 0 auto 20px; }

#contents #registration { margin-top: 35px; text-align: left; }
#contents #registration #formBox { border-bottom: 1px solid #bbb; margin-top: 3px; }
#contents #registration #formBox li { padding: 20px 0; border-top: 1px solid #bbb; }
#contents #registration #formBox li#mailCheck { padding-top: 0; border-top: none; }
#contents #registration #formBox li dl { display: -webkit-flex; display: flex; align-items: -webkit-flex-start; align-items: flex-start; }
#contents #registration #formBox li dt { background: #000; color: #fff; width: 12em; text-align: center; line-height: 40px; }
#contents #registration #formBox li dd { margin-left: 10px; flex-basis: 100%; line-height: 40px; }
#contents #registration #formBox li dd label, #contents #registration #formBox li dd span { margin-right: 10px; }
#contents #registration #formBox li#formTel dd p { display: inline-block; }
#contents #registration #formBox li dd #support { margin-top: 15px; }
#contents #registration #formBox li dd p { line-height: 40px; font-size: 0.85em; }
#contents #registration #formBox li dd .etcBox p, #contents #registration #formBox li dd #support p { line-height: 1.5em; margin-bottom: 5px; }
#contents #registration #formBox li dd #supportText { line-height: 1.5em; margin-top: 10px; }
#contents #registration #formBox li dd input[type=text] { height: 36px; border: 2px solid #bbb; font-size: 1em; font-weight: bold; background: #eee; padding: 0 8px; }
#contents #registration #formBox li dd textarea { border: 2px solid #e40; font-size: 1em; font-weight: bold; background: #eee; padding: 5px 8px; line-height: 1.5em; }
#contents #registration #formBox li .must dd input { border-color: #e40; }

#contents #registration #formBox li dd .text1 { width: 7em; }
#contents #registration #formBox li dd .text2 { width: 50%; }
#contents #registration #formBox li dd .text3 { width: 90%; }
#contents #registration #formBox li dd .text4 { width: 3em; }

#contents #registration #formBox li.select dd label.selectBox { overflow: hidden; display: block; width: 5.5em; position: relative; background: #eee; float: left; }
#contents #registration #formBox li.select dd.selectL label.selectBox { width: 35em; float: none; }
#contents #registration #formBox li.select dd label.selectBox select {
	width: 100%;
	padding-right: 1em;
	font-weight: bold;
	cursor: pointer;
	text-overflow: ellipsis;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	border: 2px solid #bbb;
	padding: 0 25px 0 10px;
	line-height: 36px;
	font-size: 1em;
}
#contents #registration #formBox li.select dd label.selectBox select::-ms-expand { display: none; }
#contents #registration #formBox li.select dd label.selectBox:before {
	position: absolute;
	top: 1em;
	right: 0.8em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 9px solid #000;
	pointer-events: none;
}
#contents #registration #formBox li.select dd .etcBox { margin-top: 15px; }

/* submit */
#contents #submit { text-align: center; margin-top: 35px; }
#contents #submit input, #contents #submit a { background: #00aa3c; margin: 0 auto; display: block; padding: 0 15px; width: 240px; }
#contents #submit input:hover, #contents #submit a:hover { background: #090; }
#contents #submit li { display: inline-block; }
#contents #submit li:last-child { margin-left: 20px; }

/* error */
#contents #registration #error { text-align: center; margin-bottom: 20px; }
#contents #registration #error li { color: #e40; font-weight: bold; }

/* thanks */
#contents #thanks { padding: 60px 60px 40px; }

/* discontinued */
#contents #discontinued { padding: 20px 0; }
#contents #discontinued p { text-align: justify; margin: 20px 0; line-height: 1.8em; font-size: 1.2em; }
#contents #discontinued p strong { color: #c00; }


@media(max-width: 1024px) {
	#contents { padding: 35px 50px 70px; }
}

@media(max-width: 768px) {
	#contents { padding: 35px 20px 70px; }
}

@media(max-width: 680px) {
	#contents { padding: 30px 10px 40px; }
	#contents #registration { margin-top: 25px; }
	#contents #registration #formBox li { text-align: center; }
	#contents #registration #formBox li dl { display: block; display: block; }
	#contents #registration #formBox li dt { margin: 0 auto 12px; }
	#contents #registration #formBox li dd { margin-left: 0; }
	#contents #registration.check #formBox li dd { line-height: 1.5em; }
	#contents #registration #formBox li dd label, #contents #registration #formBox li dd span { margin: 0 5px; }
	#contents #registration #formBox li dd p { line-height: 1.5em; margin-top: 8px; }
	#contents #registration #formBox li#formTel dd p { display: block; }
	#contents #registration #formBox li.select dd label.selectBox { margin: 0 auto; float: none; }
	#contents #registration #formBox li dd .text2 { width: 90%; }
	/* thanks */
	#contents #thanks { padding: 40px 0 20px; }
	/* discontinued */
	#contents #discontinued { padding: 0; }
}

@media(max-width: 600px) {
	#contents #registration #formBox li.select dd.selectL label.selectBox { width: 96%; }
	/* submit */
	#contents #submit { margin-top: 25px; }
	#contents #submit li { display: block; }
	#contents #submit li:last-child { margin-left: 0; margin-top: 15px; }
}


/*
=================================================
	footer
=================================================
*/

footer {
	background: #eee;
	padding: 40px 100px;
}

#footer { display: -webkit-flex; display: flex; text-align: left; }
#footer h3 { border-right: 1px solid #bbb; padding: 15px 20px 15px 0; line-height: 1.5em; font-size: 1.125em; font-weight: normal; }
#footer #contact { margin-left: 20px; padding: 15px 0; }
#footer dl { margin-bottom: 10px; }
#footer dt { font-size: 1.125em; font-weight: bold; margin-bottom: 2px; }
#footer p#tel, #footer p#email { font-size: 1.5em; line-height: 28px; margin-top: 3px; padding-left: 34px; }
#footer p#tel { background: url(../images/icon_tel.png) left center no-repeat; }
#footer p#email { background: url(../images/icon_email.png) left center no-repeat; margin-top: 5px; }
#footer p#tel span { font-size: 0.6666em; line-height: 1em; }
#footer p a:hover { text-decoration: underline; }

/* logo */
#logo { float: right; width: 145px; }
#logo a { display: block; border: 1px solid #fff; padding: 5px; background: #fff; }
#logo a:hover { border-color: #00aa3c; }

@media(max-width: 1024px) {
	footer { padding: 40px 50px; }
	/* logo */
}

@media(max-width: 768px) {
	footer { padding: 40px 20px; }
	/* logo */
	#logo { float: none; margin: 0 auto 25px; }
}

@media(max-width: 680px) {
	footer { padding: 40px 10px; }
	#footer { display: block; display: block; }
	#footer h3 { border-right: none; border-bottom: 1px solid #bbb; padding: 0 0 5px 0; }
	#footer #contact { margin-left: 0; padding-bottom: 0; }
}

@media(max-width: 400px) {
	#footer p#tel, #footer p#email { background-position: top left; }
	#footer p#tel span { display: block; margin-top: 5px; }

}