@charset "UTF-8";

/*==================================================================================================================================
reset
==================================================================================================================================*/

/* html5doctor.com Reset v1.6.1 - http://cssreset.com */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
nav ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

/*----------------------------------------*----------------------------------------
original
----------------------------------------*----------------------------------------*/

*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { word-wrap: break-word; }
audio, canvas, progress, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
a:active, a:hover { outline: 0; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
fieldset { border: 1px solid #ccc; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
table { max-width: 100%; }
li { list-style: none; }

/*----------------------------------------
clearfix
.container .row .eboxは単独でフロート解除
その他でフロート解除したい時は.clearfixを指定
----------------------------------------*/

.clearfix:before, .container:before, .row:before, .row-10:before, .row-20:before, .row-0:before, .ebox:before { content: ""; display: table; }
.clearfix:after, .container:after, .row:after, .ebox:after { clear: both; content: ""; display: table; }

/*==================================================================================================================================
common
==================================================================================================================================*/

/*----------------------------------------*----------------------------------------
container
----------------------------------------*----------------------------------------*/

.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

@media all and (max-width: 767px) {
	.container { width: 100%; }
}

@media screen and (min-width: 768px) {
	.container { width: 960px; }
}

/*----------------------------------------*----------------------------------------
text
----------------------------------------*----------------------------------------*/

section h1 {
	font-size: 3rem;
	margin-bottom: 20px;
	font-weight: normal;
}
p { margin-bottom: 20px; }

/*----------------------------------------*----------------------------------------
button
----------------------------------------*----------------------------------------*/

.btn {
	border: none;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	vertical-align: baseline;
	transition: all .2s linear;
	
}
.btn:hover, .btn:active, .btn:focus { text-decoration: none; }

@media all and (max-width: 767px) {
	.btn {
		padding: 15px 10px;
		width: 100%;
	}
}

@media screen and (min-width: 768px) {
	.btn { padding: 10px 20px; }
}

/*----------------------------------------*----------------------------------------
visible & hidden
----------------------------------------*----------------------------------------*/

.visible-sp, .visible-pc,
.visible-sp-block, .visible-sp-inline, .visible-sp-inline-block,
.visible-pc-block, .visible-pc-inline, .visible-pc-inline-block { display: none !important; }

@media all and (max-width: 767px) {
	.visible-sp { display: block !important; }
	table.visible-sp { display: table; }
	tr.visible-sp { display: table-row !important; }
	th.visible-sp, td.visible-sp { display: table-cell !important; }
	.visible-sp-block { display: block !important; }
	.visible-sp-inline { display: inline !important; }
	.visible-sp-inline-block { display: inline-block !important; }
}

@media screen and (min-width: 768px) {
	.visible-pc { display: block !important; }
	table.visible-pc { display: table; }
	tr.visible-pc { display: table-row !important; }
	th.visible-pc, td.visible-pc { display: table-cell !important; }
	.visible-pc-block { display: block !important; }
	.visible-pc-inline { display: inline !important; }
	.visible-pc-inline-block { display: inline-block !important; }
}

/*----------------------------------------
hidden
----------------------------------------*/

@media all and (max-width: 767px) {
	.hidden-sp { display: none !important; }
}

@media screen and (min-width: 768px) {
	.hidden-pc { display: none !important; }
}

/*==================================================================================================================================
form
==================================================================================================================================*/

/*----------------------------------------*----------------------------------------
composition
----------------------------------------*----------------------------------------*/

html { font-size: 10px; }
body {
	text-align: center;
	font-family: "Open Sans", Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size: 1.5rem;
	line-height: 1.5;
	color: #333;
}

/* シンプル表示の場合 */
@media all and (max-width: 767px) {
	#container {
		padding-bottom: 20px;
		padding-top: 20px;
	}
	#contents { margin-bottom: 20px; }
}
@media screen and (min-width: 768px) {
	#container {
		padding-bottom: 40px;
		padding-top: 40px;
	}
	#contents { margin-bottom: 40px; }
}
/* /シンプル表示の場合 */

/* ボックス表示の場合 */
/*
#container { background: #f2f2f2; }
#contents { background: #fff; }
@media all and (max-width: 767px) {
	#container {
		padding-bottom: 20px;
		padding-top: 20px;
	}
	#contents {
		margin-bottom: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media screen and (min-width: 768px) {
	#container {
		padding-bottom: 40px;
		padding-top: 40px;
	}
	#contents {
		margin-bottom: 40px;
		padding-top: 30px;
		padding-bottom: 30px;
	}
}
*/
/* /ボックス表示の場合 */

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

#header { border-bottom: 1px solid #ccc; background: #0e498f; }

@media all and (max-width: 767px) {
	#header { padding: 10px 0; }
}

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

/*----------------------------------------*----------------------------------------
help
----------------------------------------*----------------------------------------*/

#help { margin-bottom: 20px; }
#help p:last-child { margin-bottom: 0; }

/*----------------------------------------*----------------------------------------
process
----------------------------------------*----------------------------------------*/

#process {
	display: table;
	margin: 0 auto 20px auto;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
}
#process li {
	display: table-cell;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}
#process li + li:before {
	font-family: "FontAwesome";
	content: "\f054";
	color: #ccc;
}
#process .number {
	font-size: 1.3rem;
	background: #ccc;
	text-align: center;
	color: #fff;
	display: inline-block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
#process .is-active { color: #f00; }
#process .is-active .number { background: #f00; }

@media all and (max-width: 767px) {
	#process { width: 100%; }
	#process li { padding: 10px 5px; }
	#process li + li:before { margin-right: 10px; }
	#process .number {
		width: 24px;
		height: 24px;
		line-height: 26px;
		margin-right: 10px;
	}
}

@media screen and (min-width: 768px) {
	#process li { padding: 10px; }
	#process li + li:before { margin-right: 20px; }
	#process .number {
		width: 30px;
		height: 30px;
		line-height: 30px;
		margin-right: 10px;
	}
}

/*----------------------------------------*----------------------------------------
form
----------------------------------------*----------------------------------------*/

th, td {
	text-align: left;
	vertical-align: middle;
}
th { font-weight: normal; }

@media all and (max-width: 767px) {
	table {
		margin: 0 auto 20px;
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
	th, td {
		display: block;
		padding: 10px;
	}
	.ui-datepicker th,
	.ui-datepicker td { display: table-cell; }
}

@media screen and (min-width: 768px) {
	table { margin: 0 auto 40px; }
	th, td {
		padding: 1em;
		border-bottom: 1px solid #ccc;
	}
	tr:nth-child(even) th,
	tr:nth-child(even) td { background: #fafafa; }
	tr:first-child th,
	tr:first-child td { border-top: 1px solid #ccc; }
}

/*----------------------------------------
req
----------------------------------------*/

.req-icon {
	display: inline-block;
	font-weight: normal;
	color: #fff;
	font-size: 1.1rem;
	background: #f00;
	padding: 0 10px;
	white-space: nowrap;
}

@media all and (max-width: 767px) {
	.req-icon {
		margin: 0 5px;
		vertical-align: text-top;
	}
}

@media screen and (min-width: 768px) {
	.req-icon { margin: 0 10px; }
}

/*----------------------------------------
th
----------------------------------------*/

tr.req th { color: #f00; }

@media all and (max-width: 767px) {
	th {
		border-bottom: 1px dotted #ccc;
		border-top: 1px solid #ccc;
		background: #fafafa;
	}
}

@media screen and (min-width: 768px) {
	th {
		white-space: nowrap;
		padding-right: 20px;
	}
}

/*----------------------------------------
td
----------------------------------------*/

td input,
td textarea {
	padding: 2px;
	border: 1px solid #ccc;
}
td input:focus, td textarea:focus {
	background: #fafafa;
	border-color: #ccc;
}
td select { border: 1px solid #ccc; }

@media all and (max-width: 767px) {
	td input,
	td textarea { width: 100%; }
	input.href { width: 75%; }
	td select { width: 100%; }
}

@media screen and (min-width: 768px) {
	td textarea { width: 100%; }
}

/*----------------------------------------
dl
----------------------------------------*/

@media all and (max-width: 767px) {
	td dt, td dd { padding-bottom: 10px; }
	td dt:last-child, td dd:last-child { padding-bottom: 0; }
	td dt {
		float: left;
		margin-right: 10px;
	}
}

@media screen and (min-width: 768px) {
	td dl { display: table; }
	td dt,
	td dd { display: table-cell; }
	td dt { padding-right: 10px; }
	td dd + dt { padding-left: 20px; }
}

/*----------------------------------------
radio
----------------------------------------*/

label input {
	margin-right: 5px;
	vertical-align: baseline;
}

@media all and (max-width: 767px) {
	.radio-group label { display: block; }
	label input { width: auto; }
}

@media screen and (min-width: 768px) {
	.radio-group label + label { margin-left: 20px; }
}

/*----------------------------------------
date
----------------------------------------*/

.ui-datepicker-trigger {
	background: #333;
	border: none;
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	vertical-align: middle;
	position: relative;
}
.ui-datepicker-trigger:before {
	font-family: "FontAwesome";
	content: "\f073";
	margin-right: 10px;
	line-height: 1;
}
.ui-datepicker-trigger:hover { background: #c00; }
.ui-datepicker-trigger:active {
	position: relative;
	top: 1px;
}

@media all and (max-width: 767px) {
	.ui-datepicker-trigger {
		width: 100%;
		margin-top: 10px;
	}
	.ui-datepicker-trigger { padding: 10px; }
}

@media screen and (min-width: 768px) {
	#datepicker,
	#datepicker2,
	#datepicker3 { margin-right: 10px; }
	.ui-datepicker-trigger {
		padding: 0 10px;
		line-height: 26px;
	}
}

/*----------------------------------------
help
----------------------------------------*/

p.help,
p.example,
span.help { font-size: 1.3rem; }
p.example { margin: 5px 0 0 0; }
p.help { margin-bottom: 5px; }
span.help { color: #f60; }

@media all and (max-width: 767px) {
	span.help {
		display: block;
		margin-top: 5px;
	}
	#comment-help {
		display: inline;
		margin-top: 0;
	}
}

/*----------------------------------------*----------------------------------------
	submit
----------------------------------------*----------------------------------------*/

#submit .btn {
	background: #f00;
	color: #fff;
	margin-bottom: 10px;
}
#submit .submit .btn:hover,
#submit .submit .btn:active { background: #f33; }
#submit p {
	font-size: 1.3rem;
	margin-bottom: 0;
}

/*----------------------------------------*----------------------------------------
	reset
----------------------------------------*----------------------------------------*/

#reset {
	text-align: left;
	margin-bottom: 20px;
}
#reset a {
	text-decoration: none;
	color: #333;
	position: relative;
}
#reset a:before {
	font-family: "FontAwesome";
	content: "\f137";
	margin-right: 6px;
}
#reset a:hover { color: #333; }

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

/*----------------------------------------
back_home
----------------------------------------*/

#back_home .btn {
	background: #ccc;
	color: #fff;
	position: relative;
	font-size: 1.3rem;
}
#btn:after {
	content: "\f00d";
	margin-left: 20px;
	line-height: 1;
}
#back_home .btn:hover,
#back_home .btn:active { background: #ccc; }

@media all and (max-width: 767px) {
}

@media screen and (min-width: 768px) {
}

/*----------------------------------------
copyright
----------------------------------------*/

#copyright {
	font-size: 1.3rem;
	border-top: 1px solid #ccc;
	padding: 20px 0;
}

/*----------------------------------------*----------------------------------------
	error_message
----------------------------------------*----------------------------------------*/

#mailform .formError { margin-bottom: 10px; }
#mailform .formErrorContent {
	color: #fff;
	padding: 3px 10px;
	background: #f33;
	font-size: 1.2rem;
	position: relative;
}
#mailform .formErrorContent:after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 20px;
	margin-left: -5px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 5px 0 5px;
	border-color: #f00 transparent transparent transparent;
}
#mailform input.error,
#mailform select.error,
#mailform textarea.error {
	background: #fffafa;
	border-color: #f00;
}

/*----------------------------------------*----------------------------------------
confirm
----------------------------------------*----------------------------------------*/

@media screen and (min-width: 768px) {
	#confirm #process { margin-bottom: 40px; }
	#confirm table { margin-bottom: 20px; }
}

/*----------------------------------------*----------------------------------------
ok
----------------------------------------*----------------------------------------*/

@media screen and (min-width: 768px) {
	#ok { padding: 50px 0; }
}

/*----------------------------------------*----------------------------------------
error
----------------------------------------*----------------------------------------*/

#error { padding: 50px 0; }
#error .title {
	font-size: 3rem;
	color: #f00;
}
#error p {
	color: #f00;
	font-weight: bold;
}
#error .btn {
	background: #f00;
	color: #fff;
	padding: 5px 20px;
}
#error .btn:hover, #error .btn:active { background: #f00; }