@charset "UTF-8";


/*　基本仕様
-------------------------------------------------------------------*/
/*

・PCとスマホと共通となる部品は基本的にstyle.cssでまとめる
・あとはデバイス毎に切り分けておく。

*/

.gothic{
	font-family: 'Noto Sans JP', sans-serif;
}

.off{
	display: none;
}

.datepicker {
	width: 200px;
}

.entryBody{
	margin-bottom: 1em;
}

/*	【HTML基本情報】
	HTMLの基本的な書き方。PCとSPは共通で使えるところは使う。
-------------------------------------------------------------------*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: auto;
	font: inherit;
	vertical-align: baseline;
}


img{
	/*画像下の空白を埋める為のおまじない*/
	vertical-align: bottom;
}

ul{list-style: none;}

body{
	/*font-family: Yu Gothic, Meiryo, Verdana, Arial, Helvetica, sans-serif;*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: relative;
}

h1, h2, h3, h4, h5, h6, dt{
	font-family: 'Noto Sans JP', sans-serif;
}


/*	【ヘッダー+フッダー情報】
	ヘッダーとフッターの基本の色情報
	補足や入れ子は各CSSで補填
-------------------------------------------------------------------*/
div#wrap{
	width: 100%;
	border-top: 3px solid #CC0000;
}

.red{
	color: red;
}

footer{
	background: #efe8d4;
}

header{
	font-size: 14px;
	line-height: 180%;
	font-weight: 700;
	text-align: ccenter;
}

header h1{
	padding-top: 1em;
	text-align: center;
}

header figure{
	max-width: 800px;
	margin: auto;
	padding: 1em;
}

article{
	max-width: 780px;
	margin: auto;
	padding: 1em;
}


header img{
	width: 100%;
}

#formArea dl {
	padding-bottom: 1em;
}

#formArea dt {
    width: 100%;
    display: block;
    margin: 0.5em 0;
    font-size: 100%;
    line-height: 150%;
    background: #EDEDED;
    padding: 1.0em 1em;
	font-weight: 700;
}

#formArea p {
    padding: 0.5em 1em;
}

.mini{
	font-size: 80%;
}

#formArea ul{
	margin: 0;
	padding: 0;
	padding: 0.2em;
}

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

.formhalf li{
	width: 50%;
}

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

.textL{
	text-align: left;
}

/* 任意・必須・複数選択アイコン */
.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;
}

th,td{
	font-size: 80%;
}

/* テーブル 
----------------------------------------------------- */
/* PCサイズ（画面サイズ769px以上の場合） */
@media screen and (min-width:769px) { 
	table.outline{
		margin: 1em 0;
		width: 100%;
		border: 1px #E3E3E3 solid;
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	table.outline th{
		width: 25%;
		padding: 1em;
		border: #E3E3E3 solid;
		border-width: 0 0 1px 1px;
		background: #F5F5F5;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
	}

	table.outline td {
		padding: 1em;
		border: 1px #E3E3E3 solid;
		border-width: 0 0 1px 1px;
		font-weight: 500;
		text-align: left;
	}

}

/* スマホ・タブレットサイズ（画面サイズ769px以下の場合） */
@media screen and (max-width:769px) { 
	table.outline{
		margin: 1em 0;
		width: 100%;
		border: 1px #E3E3E3 solid;
		border-bottom: 0;
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	table.outline th{
		display: block;
		width: 100%;
		padding: 1em;
		border: #E3E3E3 solid;
		border-width: 0 0 1px 0px;
		background: #F5F5F5;
		font-weight: 500;
		text-align: center;
	}

	table.outline td{
		display: block;
		width: 100%;
		padding: 1em;
		border: 1px #E3E3E3 solid;
		border-width: 0 0 1px 0;
		font-weight: 500;
		text-align: left;
	}
	
}

/* フォームの共通部品 
----------------------------------------------------- */
/*書体設定*/
#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=number],
#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;
	font-size: 100%;
}

/* 入力パーツ */
#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;
}