@charset "utf-8";

/* <link rel="stylesheet" href="./css_document.css" media="all"> */

/*
## form.css
### メールフォームページで使用するスタイル

*/


/* formで使用するスタイル
===================================================================================
*/


body {
}

/* .span**p
--------------------------------------------------
### ◆ パーセント指定

5%～100%まで、5%刻みで幅を指定する。
*/
.span5p {width: 5%;}
.span10p {width: 10%;}
.span15p {width: 15%;}
.span20p {width: 20%;}
.span25p {width: 25%;}
.span30p {width: 30%;}
.span35p {width: 35%;}
.span40p {width: 40%;}
.span45p {width: 45%;}
.span50p {width: 50%;}
.span55p {width: 55%;}
.span60p {width: 60%;}
.span65p {width: 65%;}
.span70p {width: 70%;}
.span75p {width: 75%;}
.span80p {width: 80%;}
.span85p {width: 85%;}
.span90p {width: 90%;}
.span95p {width: 95%;}
.span100p {width: 100%;}

.span50p input[type="text"] {width: 90%;}


/*
### ◆ .tableの基本タグに対する初期設定
`table`タグに、class`.table`を付与した時の、tdやｔｈに対する基本的なタグへのスタイリング
*/

 /*table本体*/
.table {
}
 /*`table`の`th`、`td`全般設定*/
.table th ,
.table td {
	padding: 0.6em 1.0em;
	border: solid 1px #555;
	vertical-align: middle;
}
 /*全てのth*/
.table th {
	font-weight: normal;
}
 /*全てのtd*/
.table td {
	background:#fff;
}

/* thead
--------------------------------------------------
### ◆ thead内部のスタイリング
`thead`タグ内のスタイリング
*/

/*`thead`の中の`th`、`td`共通*/

/*`thead`の中の`th`*/
.table thead th {
	background:#aaa;
	padding: 0.5em 1.0em;
}
/*`thead`の中の`td`*/
.table thead td {
	
}

/* tbody
--------------------------------------------------
### ◆ tbody内部のスタイリング
`tbody`タグ内のスタイリング
*/

/*`tbody`の中の`th`*/
.table tbody th {
	background: #E2F1F5;
	text-align:left;
}
/*`tbody`の中の`td`*/
.table tbody td {
}




/* フォーム部品の初期化
--------------------------------------------------
フォーム部品には、box-sizing: border-box　が適用されないようにし、ブラウザ間での見た目を統一する。
*/

/*初期設定*/
input[type="text"] ,
input[type="file"] ,
input[type="password"] ,
input[type="radio"] ,
input[type="checkbox"] ,
input[type="submit"] ,
textarea ,
select ,
button{
	outline:none;
	margin: 0;
	padding: 0;
}

/*テキスト入力とselectのボックスの共通スタイリング*/
.form_text , input[type="text"] , input[type="password"] ,
.form_file, input[type="file"] ,
.form_select , select ,
.form_textarea-mail_body , textarea
{
	display: inline-block;
	height: 18px; /*.btnと合わせる*/
	padding: 6px 10px; /*.btnと合わせる*/
	border: 1px solid #777;
	margin: 5px 10px 5px 5px;
	background: #fff;
	border-radius: 2px;
	vertical-align: middle;
	box-shadow: inset 1px 1px 2px rgba(50,50,50,0.2);
}

/*一行系の項目の高さ合わせ*/
.form_text , input[type="text"] , input[type="password"] ,
.form_file, input[type="file"]
{
	line-height: normal;
}


/* form部品への個別指定
--------------------------------------------------
*/

/*select*/
select ,
.form_select {
	height: 32px; /*selectはheightを別途上書きで指定*/
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}
/*type="file"*/
.form_file ,
input[type="file"] {
	cursor: pointer;
	box-shadow: none;
}

/*textarea*/
textarea {
	width: 80%;
	min-height: 2.5em;
	resize: vertical;
	overflow: auto;
}

/*フォーム部品と横並びのテキスト位置のズレを調整*/
input[type="radio"] ,
input[type="checkbox"] {
	position:relative;
	top:2px;
	margin-right: 3px;
}

/*ラベルタグのスタイル*/
label {
	display: inline-block;
	cursor: pointer;
	margin-right: 15px;
	padding: 5px;
	margin: 2px;
}

/* .form_mail_body
--------------------------------------------------
### フォーム本文を記入するテキストエリア
ボックスの高さやライン高を指定する。
*/
.form_textarea-mail_body {
	line-height: 1.6;
	min-height: 15em;
}

/* .form_col
--------------------------------------------------
### フォーム部品を横並びにするボックス
*/
.form_col {
	display:block;
	float:left;
}
/* .form_row
--------------------------------------------------
### フォーム部品を縦に仕切るクラス
*/
.form_row {
	width:100%;
	clear:both;
	margin:0 0 10px 0;
}

.form_row:after {
	content: ""; 
	display: block; 
	clear: both;
	zoom:1;
}


/* readonly指定が入った時の指定
--------------------------------------------------
*/
input[readonly],
input[type="text"]:readonly,
input[type="file"]:readonly,
input[type="radio"]:readonly,
input[type="checkbox"]:readonly,
input[type="password"]:readonly,
input[type="submit"]:readonly,
textarea:readonly,
select:readonly,
button:readonly {
	background: #eee;
}


/* disabled指定が入った時の指定
--------------------------------------------------
*/
input[disabled],
input[type="text"]:disabled,
input[type="file"]:disabled,
input[type="radio"]:disabled,
input[type="checkbox"]:disabled,
input[type="password"]:disabled,
input[type="submit"]:disabled,
textarea:disabled,
select:disabled,
button:disabled {
	opacity: 0.6;
}


/* ボタン
--------------------------------------------------
*/

.btn {
    box-sizing: content-box;
    height: 18px;
    padding: 6px 15px;
    margin: 0 0 10px 0;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #f5f5f5;
    border-radius: 3px;
    border: 1px solid #999;
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 1px 2px rgba(55,55,55,0.1);
}
.btn-large {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    padding: 0 3em;
}
.btn-submit {
    background: #66BACE;
    color: #FFF;
    font-weight: bold;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
.btn-submit:hover {
    background: #A8D8E3;
    color: #FFF;
}


/* .btn_area-form
--------------------------------------------------
### フォームのボタン配置エリア
*/
.btn_area-form {
	clear: both;
	margin-top: 10px;
	padding-top: 30px;
	padding-bottom: 40px;
	text-align: center;
}


/* (.btn) .btn_back
--------------------------------------------------
### ◆ 戻るボタンのスタイル
*/
.btn-back {
background: #f2f2f2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWVhZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f2f2f2 0%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f2f2 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f2f2 0%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f2f2 0%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f2f2 0%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#eaeaea',GradientType=0 ); /* IE6-8 */
}
/*戻るボタンのスタイル*/
.btn-back:hover {
background: #ededed; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ededed 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ededed 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ededed 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ededed 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ededed 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
}


/* ◆ アイコンのスタイリング
===================================================================================
## ◆ アイコンの共通事項(icon)

アイコンをHTMLのDOM上に置く場合に必ず付与するclass。  
Font Awesome を使用する場合や、その他画像アイコンを配置する場合でも必ずこのclassを付与する。

また、アイコンのタグは必ず`i`を使用する。

```
<i class="icon"></i>
```

*/
.icon {
	background-position: center center;
	background-repeat: no-repeat;
}




/* form */

label {
    display: inline-block;
    cursor: pointer;
    margin-right: 15px;
    padding: 5px;
    margin: 2px;
}


.form_col {
    display: block;
    float: left;
}

.form_row {
    width: 100%;
    clear: both;
    margin: 0 0 10px 0;
}



/* font */

.f-point-r {
    color: #FF0000;
}

.note-mark {
    color: #ee0000;
    font-weight: bold;
}







.conceptTitle {
	margin-bottom: 30px;
}




/* エラーに関するボックス
============================================================
*/

.box-error {
	padding: 20px;
	border: solid 5px #EE2200;
	margin-bottom: 30px;
}
.box-error h3 {
	color: #EE2200;
	margin-bottom: 20px;
}

.box-error ul {
	list-style: none;
}

/* 個人情報保護に関するボックス
============================================================
*/
.box-privacy {
	background: #ECF7F9;
	padding: 20px;
	border: solid 1px #555;
	margin-bottom: 40px;
}
.box-privacy .row {
	margin-bottom: 0;
}
.box-privacy h3 {
	border-left: solid 7px #06998E;
	padding-left: 10px;
	margin-bottom: 15px;
}
.box-privacy p {
	margin-bottom: 10px;
	text-align: left;
}
.box-privacy label {
	margin-bottom: 0;
}


/* メーカー選択に関するボックス
============================================================
*/

.box-maker_select {
	margin-bottom: 40px;
}
.box-maker_select h3 {
	margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.3;
}

.box-maker_select .row {
	border-top: solid 2px #CCC;
	border-bottom: solid 2px #CCC;
	padding: 13px 0;
}

.maker_select01 /* 選択第1段階　自分で好きなメーカーを選ぶか、お任せか */ {
}
.maker_select01 label {
	display: block;
}
.maker_select02 /* 選択第2段階　メーカー選択 */ {
	padding: 0 15px;
}

/* 本文中のp
============================================================
*/


.wrap p {
	text-align: left;
}

table td p {
	text-align: left;
}



/* リード文
============================================================
*/

.lead-txt {
	margin-bottom: 15px;
}

/* メールフォーム完了の余白取り
============================================================
*/
.end-form {
	margin-bottom: 200px;
}
.end-form p {
	text-align: center;
}

.link-home {
	margin: 20px 0;
	font-size: 150%;
}
.link-home a {
	color: #66BACE;
}
.link-home a:hover {
	opacity: 0.5 ;
}


/* アンケート
============================================================
*/

h3.headline {
    margin: 0.3em 0 0.9em 0;
    padding: 0.3em 0;
    border-bottom: solid 1px #06998E;
    color: #06998E;
    font-size: 1.6em;
}

h4.headline {
    border-left: solid 6px #06998E;
    padding-left: 10px;
    margin-bottom: 0.7em;
}


/* tableで使用するスタイル(スマートフォン)
===================================================================================
*/

@media screen and (max-width: 768px) {
	.form_table {
		border-collapse: collapse;
		width: 100%;
		border-bottom: solid 1px #555;
	}
	/*th、td（全体に対するスタイリング）*/
	.form_table th ,
	.form_table td {
		float: left;
		width: 100%;
		clear: both;
		padding: 15px 5px;
		vertical-align: middle;
		border-bottom: none;
	}
	/*thに対するスタイリング*/
	.form_table tbody th {
		background: #E2F1F5;
		vertical-align: middle;
		font-weight: normal;
	}
}


/* tableで使用するスタイル(スマートフォン)
===================================================================================
*/

@media screen and (max-width: 414px) {
	.inp_comment input {
		width: 80%;
	}
}