@charset "UTF-8";


/*	CTA
-----------------------------------------------------*/
#cta{
	max-width: 400px;
	margin: auto;
	padding: 1em 0;
	text-align: center;
}

#cta p{
	font-weight: bold;
	padding: 0 0 5px 0;
	border-bottom: 2px solid #1157a3;
}

#cta a{
	color: #111111;
	text-decoration: none;
}

#cta > div{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
}

#cta > div > div > i{
	font-size: 280%;
}

#cta > div {
	margin: auto;
	align-items: center;
}

#cta > div > div:nth-child(1){
	align-items: center;
	margin-right: 0.5em;
}

#cta > div > div > dl > dt{
	font-size: 240%;
	font-family: 'Roboto', sans-serif;
	text-align: center;
}

#cta > div > div > dl > dd{
	font-size: 90%;
	text-align: center;
	font-weight: bold;
}

/*確認画面*/
.button{
	text-align: center;
}
.errorBox{
	text-align: center;
	background: #f1d5d5;
	border: 5px solid #00ae35;
	clear: both;
	margin: 1em;
	padding: 0.5em;
}

.errorBox p{
	color: #00ae35;
	font-size: 90%;
}

.confirm{
	text-align: center;
	background: #bef7c2;
	border: 5px solid #1d8825;
	clear: both;
	margin: 1em;
	padding: 0.5em;
}

.confirm p{
	color: #1d8825;
	font-size: 90%;
}

.wtn_copyright{
	display: none;
}

/* フォーム本番部分（ここから本番だよ）
【CSSの基本説明】
＃PCやスマホに依存することなくできるパターン
＃テーブルタグは使わない
＃全てdlタグを使う感じ。
----------------------------------------------------- */

/* PCサイズ（画面サイズ769px以上の場合） */
@media screen and (min-width:769px) { 
	/* 実装時には微調整が必要 */
	#mailForm{
		margin: auto;
		width: 100%;
		max-width: 800px;
		padding: 1.5em;
	}
}

/* スマホ・タブレットサイズ（画面サイズ769px以下の場合） */
@media screen and (max-width:769px) { 
	/* 実装時には微調整が必要 */
	#mailForm{
		margin: auto;
		width: 100%;
		padding: 0;
	}
}

/* form以外のタグ部分
----------------------------------------------------- */

/* Hタグ部分 */
#formArea h3{
	color: #00a5a8;
	font-size: 150%;
	line-height: 150%;
	font-weight: 700;
	border-left: 10px solid #00a5a8;
	padding: 0.7em 0.5em 0.5em 0.5em;
	margin: 1em 0;
	background-color: #EFEFEF;
	text-align: left;
}


/* 質問項目部分 */
/* 一旦リセットする */
#formArea dl,
#formArea dt,
#formArea dd{
	margin: 0;
	padding: 0;
}

#formArea > dl > dt,
#formArea > div > div > div > dl > dt{
	width: 100%;
	display: block;
	margin: 0.5em 0;
	font-size: 100%;
	line-height: 100%;
	background: #EDEDED;
	padding: 1.2em 1em;
}

#formArea > dl > dd,
#formArea > div > div > div > dl > dd{
	width: 100%;
	display: block;
	padding: 0.5em 1.0em;
	font-size: 110%;
}

/* DDの入れ子部分（住所など） */
#formArea > dl > dd > dl > dt{
	width: 100%;
	display: block;
	padding: 0;
	font-size: 90%;
	margin-bottom: 0.5em;
}

#formArea > dl > dd > dl > dd{
	margin-bottom: 0.5em;
}


#formArea > dl > dd > dl > dd > p{
	margin-bottom: 0.5em;
}


#formArea p{
	font-size: 80%;
	line-height: 180%;
}

i{
	font-family: 'FontAwesome';
	margin-right: 0.2em;
}


/* 共通部品 
----------------------------------------------------- */

.form10{width: 10%;}
.form20{width: 20%;}
.form25{width: 25%;}
.form30{width: 30%;}
.form40{width: 40%;}
.form50{width: 50%;}
.form60{width: 60%;}
.form70{width: 70%;}
.form80{width: 80%;}
.form90{width: 90%;}
.form100{width: 100%;}


/* 任意・必須・複数選択アイコン */
.hissu,
.nini,
.fukusuu{
	font-size: 12px;
	line-height: 100%;
	font-weight: bold;
	margin-left: 0.5em;
	padding: 0.1em 0.2em 0.2em 0.2em;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.hissu{
	background: #FF0000;
	color: #FFFFFF;
	border: 1px solid #F00;
}

.nini{
	margin-left: 0.5em;
	background: #666666;
	color: #FFFFFF;
	border: 1px solid #666666;
}

.fukusuu{
	margin-left: 0.5em;
	background: #13448f;
	color: #FFFFFF;
	border: 1px solid #13448f;
}


/* フォームの共通部品 
----------------------------------------------------- */
/*書体設定*/
#formArea input[type=text],
#formArea textarea {
	/*font-family: "Lucida Grande", "メイリオ","Meiryo", "30D230E930AE30CE89D230B420Pro20W3", "30e130a430ea30aa", "FF2DFF3320FF3030B430B730C330AF", "Osaka", verdana, arial, sans-serif;*/
}

/*入力共通パーツ*/
#formArea input[type=text] ,
#formArea input[type=text].halfText,
#formArea input[type=date], 
#formArea input[type=time],
#formArea textarea {
	margin: 1%;
	padding: 0.8em;
	background: #e9f1fc;
	border: 1px solid #CCCCCC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	/* これは必ず入れるおまじない */
	box-sizing: border-box;
}

/* 入力パーツ */
#formArea input[type=text] {
	width: 98%;
	font-size: 100%;
}

/* 半分 */
#formArea input[type=text].halfText{
	width: 19%;
	font-size: 100%;

}
/* 日時 */
#formArea input[type=date], 
#formArea input[type=time],
#formArea .halfBox input[type=text] {
	width: 50%;
	font-size: 120%;
	line-height: 180%;
}

/* テキストエリア */
#formArea textarea {
	font-size: 120%;
	line-height: 180%;
	width: 98%;
	height: 200px;
}

/* ラジオボタンとチェックボックス
-------------------------------------------------*/
/*  
普通のラジオボタンやチェックボックスではなく
ボタン風にしたい場合はdisplay: none;にします。
*/

#formArea .labelArea input[type=radio],
#formArea .labelArea input[type=checkbox],
#formArea .labelArea0 input[type=radio],
#formArea .labelArea0 input[type=checkbox]{
	display: none;
}

.labelArea{
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.labelArea img {
	width: 100%;
}

/* PCサイズ（画面サイズ769px以上の場合） */
@media screen and (min-width:769px) { 
	/* 実装時には微調整が必要 */
	#formArea .inputRadio ,
	#formArea .inputCheckBox {
		width: 23%;
	}
}

/* スマホ・タブレットサイズ（画面サイズ769px以下の場合） */
@media screen and (max-width:769px) { 
	/* 実装時には微調整が必要 */
	#formArea .inputRadio ,
	#formArea .inputCheckBox {
		width: 48%;
	}
}

/* ラジオボタン */
#formArea .inputRadio {
	font-weight: bold;
	display: block;		/* ブロックレベル要素化する */ 
	margin: 1%;			/* ボックス外側の余白を指定する */
	/* ボックスの横幅を指定する */
	padding-left: 0;	/* ボックス内左側の余白を指定する */
	padding-right: 0;	/* ボックス内御右側の余白を指定する */
	padding: 0.5em;
	color: #00a5a8;		/* フォントの色を指定 */
	background: #FFFFFF;
	text-align: center;	/* テキストのセンタリングを指定する */
	line-height: auto;	/* 行の高さを指定する */
	cursor: pointer;	/* マウスカーソルの形（リンクカーソル）を指定する */
	border: 2px solid #00a5a8;/* ボックスの境界線を実線で指定する */
	border-radius: 5px;	/* 角丸を指定する */
	box-sizing: border-box;
}

/* チェックボックス */
#formArea .inputCheckBox {
	font-weight: bold;
	display: block;		/* ブロックレベル要素化する */ 
	margin: 1%;			/* ボックス外側の余白を指定する */
	/* ボックスの横幅を指定する */
	padding-left: 0;	/* ボックス内左側の余白を指定する */
	padding-right: 0;	/* ボックス内御右側の余白を指定する */
	padding: 0.5em;
	color: #00a5a8;		/* フォントの色を指定 */
	background: #FFFFFF;
	text-align: center;	/* テキストのセンタリングを指定する */
	line-height: auto;	/* 行の高さを指定する */
	cursor: pointer;	/* マウスカーソルの形（リンクカーソル）を指定する */
	border: 2px solid #00a5a8;/* ボックスの境界線を実線で指定する */
	border-radius: 5px;	/* 角丸を指定する */
	box-sizing: border-box;
}

#formArea input[type="radio"]:checked + label,
#formArea input[type="checkbox"]:checked + label {
	color: #FFF;
	background: #00a5a8;/* マウス選択時の背景色を指定する */
	border: 2px solid #00a5a8;
	color: #ffffff; 	/* マウス選択時のフォント色を指定する */
	transition: all .3s;
}


/* 送信フォーム
----------------------------------------------------- */

#formArea > section#submitBox{
}

#formArea > section#formsubmitBox{
	margin-bottom: 1.5em;
	padding: 0.5em 1em;
	background: #FFFFFF;
}

textarea#privacyPolicyBox{
	width: 98%;
	height: 150px;
	padding: 1em;
	font-size:12px;
	line-height: 180%;
	margin: 0 0 1em 0;
}

.privacyBox{
	display: block;
	text-align: center;
	background: #efbfc6;
	border: 5px solid #e76471;
	padding: 0.5em;
	font-size: 90%;
	line-height: 180%;
	margin: 1em 0;
}

.privacyBox label{
	margin-bottom: 1em;
}

/*送信ボタンのおまじない*/
form input[type=submit] {
	-webkit-appearance: none;
	border-radius: 0;
	border: 0;
}

/* オンのとき */
button#formsubmit,
input#formsubmit[type="submit"],
button#submit{
	border: 0;
	width: 100%;
	font-size: 120%;
	color: #FFF;
	display: block;
	padding: 0.5em;
	margin: 0.5em 0 0.5em 0;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	background: #00ae35;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 50px;
	border-radius: 5px;
	transition: all .3s;
}

/* オンのとき */
input#formsubmit[type="submit"]:hover,
button#submit:hover{
	color: #FFF;
	display: block;
	background: #e76471;
	transition: all .3s;
}


/* オフのとき */
input#formsubmit[type="submit"][disabled]{
	color: #222;
	background: #CCCCCC;
}

/*キャンセルボタンオフのとき */
button#myreset{
	border: 0;
	width: auto;
	font-size: 120%;
	color: #000;
	display: block;
	padding: 0.5em 2.0em;
	margin: auto;
	text-decoration: none;
	text-align: center;
	background: #CCCCCC;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 50px;
	border-radius: 5px;
	transition: all .3s;
}

/* その他
----------------------------------------------------- */
.tokkaBox{
	display: block;
	text-align: left;
	background: #efbfc6;
	border: 1px solid #e76471;
	padding: 0.75em;
	font-size: 90%;
	line-height: 180%;
	margin: 1em 0;
}

/* 検証用
----------------------------------------------------- */
#formArea table{
	margin: 1em 0;
	width: 100%;
	border: 1px #E3E3E3 solid;
	border-collapse: collapse;
	border-spacing: 0;
}

#formArea table th{
	width: 30%;
	padding: 1em;
	border: #E3E3E3 solid;
	border-width: 0 0 1px 1px;
	background: #F5F5F5;
	font-weight: 500;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}