@charset "utf-8";

/*************************************************
 * Description: 共通CSS
 * Package: site
 * Author: Japan Electronic Industrial Arts Co.Ltd.
 * Update: 2019/02/
 * Notes: 
*************************************************/
/*
	レイアウトフレーム構造
	
	[1].frame_outer
		[2]└#headertopcolumn
		[2]└#header_wrap
			[3]└header
		[2]└#container
			[3]└#topcolumn
			[3]└#middlecolumn
				[4]└#leftcolumn
				[4]└#three_main_column/#two_maincolumn_left/#two_maincolumn_right/#one_maincolumn
				[4]└#rightcolumn
			[3]└#bottomcolumn
		[2]└#footer_wrap
			[3]└footer
		[2]└#footerbottomcolumn
*/



/*************************************************
 *
 * レイアウトフレーム
 *
*************************************************/

/* ==============================================
 * メインフレーム
=============================================== */
.frame_outer {
	width: 100%;
	min-width: 320px;/*閲覧デバイス最小幅*/
}

#headertopcolumn {}
#header_wrap {
	background-color: #f8f8f8;
}
#header_wrap header {
	max-width: 1280px;
	margin: 0 auto;
}

#container {}
#container #topcolumn {/*max-width指定は各内包ブロックに委ねる*/}
#container #middlecolumn {}
#container #middlecolumn #leftcolumn {}
#container #middlecolumn #three_main_column {}
#container #middlecolumn #two_maincolumn_left {}
#container #middlecolumn #two_maincolumn_right {}
#container #middlecolumn #one_maincolumn {}
#container #middlecolumn #rightcolumn {}
#container #bottomcolumn {/*max-width指定は各内包ブロックに委ねる*/}

#footer_wrap {}
#footer_wrap footer {}
#footerbottomcolumn {}

/* 中央カラム共通 */
.main_column {}
/* 左右カラム共通 */
.side_column {}


/* ==============================================
 * .undercolumn（ページ要素）
=============================================== */
/* こちらは基本未定義。ページによって必要な場合のみ適宜そちらで定義する */
.undercolumn {}
.undercolumn .page_head {}
.undercolumn .page_body {}


/* ==============================================
 * section
=============================================== */
.main_column .section {
}
.main_column .section + .section {
}
.main_column .section_head {
}
.main_column .section_body {
}
.main_column .section_body + .section_body {
	/* section_bodyを上下連続配置したい場合、隣接するsection_bodyの上下余白が倍になってしまうので連続するsection_bodyの上余白を0にリセットしてバランスを取る。 */
	padding-top: 0;
}
.main_column .section_foot {
}


/* ==============================================
 * 各デバイス（Sphone, Tablet, PC）ごとのフレーム定義
=============================================== */
@media ( max-width: 767px ) {
	
	/* #topcolumn
	----------------------------------------------- */
	#topcolumn {
		padding-top: 50px;
	}
	
	/* #middlecolumn
	----------------------------------------------- */
	#middlecolumn {
		padding-top: 20px;/*70px;/*50px;*/
		padding-bottom: 0px;
	}
	
	/* .section
	----------------------------------------------- */
	.main_column .section {
		padding: 0;
	}
	.main_column .section + .section {
		margin-top: 0;
	}
	.main_column .section_head {
		padding: 0;
	}
	.main_column .section_body {
		padding: 20px;
	}
	
	/* ページ.udercolumn直下配置のブロック */
	.undercolumn + .section {
		margin-top: 20px;
	}
	
	/* トップページ用
	----------------------------------------------- */
	body.LC_Page_Index #middlecolumn {
	}
	body.LC_Page_Index #middlecolumn .section {
		padding: 0 20px;
	}
	body.LC_Page_Index #middlecolumn .section + .section {
		margin-top: 50px;
	}
	body.LC_Page_Index #middlecolumn .undercolumn + .section {
		margin-top: 50px;
	}
	body.LC_Page_Index #middlecolumn .section_body {
		padding: 0;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	
	/* #topcolumn
	----------------------------------------------- */
	#topcolumn {
		padding-top: 112px;
	}
	
	/* #middlecolumn
	----------------------------------------------- */
	#middlecolumn {
		padding-top: 30px;/*140px;/*112px;*/
		padding-bottom: 0px;
	}
	/* 例外ページをオーバーライド 
	body.LC_Page_Products_List #middlecolumn,
	body.LC_Page_Products_Detail #middlecolumn {
		padding-top: 0;
	}
	*/
	
	/* .section
	----------------------------------------------- */
	.main_column .section {
	}
	.main_column .section + .section {
		margin-top: 20px;
	}
	.main_column .section_head {
		padding: 0;
	}
	.main_column .section_body {
		padding: 30px;
	}
	
	/* ページ.udercolumn直下配置のブロック */
	.undercolumn + .section {
		margin-top: 30px;
	}
	
	/* トップページ用
	----------------------------------------------- */
	body.LC_Page_Index #middlecolumn {
		padding-bottom: 30px;
	}
	body.LC_Page_Index #middlecolumn .section {
		padding: 0 30px;
	}
	body.LC_Page_Index #middlecolumn .section + .section {
		margin-top: 50px;
	}
	body.LC_Page_Index #middlecolumn .undercolumn + .section {
		margin-top: 50px;
	}
	body.LC_Page_Index #middlecolumn .section_body {
		padding: 0;
	}
}
@media ( min-width: 980px ) {
	
	/* #topcolumn
	----------------------------------------------- */
	#topcolumn {
		padding-top: 80px;
	}
	
	/* #middlecolumn
	----------------------------------------------- */
	#middlecolumn {
		padding-top: 60px;/*180px;/*80px;*/
		padding-bottom: 80px;
	}
	/* 例外ページをオーバーライド 
	body.LC_Page_Products_List #middlecolumn,
	body.LC_Page_Products_Detail #middlecolumn {
		padding-top: 0;
	}
	*/
	
	/* .section
	----------------------------------------------- */
	.main_column .section {
		/* コンテンツ最大幅を定義するがもしブラウザ幅いっぱいに背景を敷き詰めるようなデザインの部位がある場合は適宜オーバーライドして調整すること。 */
		max-width: 1680px;
		margin: 0 auto;
		box-sizing: content-box;
		padding-left: 40px;
		padding-right: 40px;
	}
	.main_column .section + .section {
		margin-top: 50px;
	}
	.main_column .section_head {
		padding: 0;
	}
	.main_column .section_body {
		padding: 0;
	}
	
	/* ページ.udercolumn直下配置のブロック */
	.undercolumn + .section {
		margin-top: 50px;
	}
	
	/* トップページ用
	----------------------------------------------- */
	body.LC_Page_Index #middlecolumn {
		padding-top: 0;
		padding-bottom: 50px;
	}
	body.LC_Page_Index #middlecolumn .section {
	}
	body.LC_Page_Index #middlecolumn .section + .section {
		margin-top: 7%;
	}
	body.LC_Page_Index #middlecolumn .undercolumn + .section {
		margin-top: 7%;
	}
	body.LC_Page_Index #middlecolumn .section_body {
		padding: 0;
	}
}
@media ( min-width: 1680px ) {
	body.LC_Page_Index #middlecolumn .section + .section {
		margin-top: 120px;
	}
}




/* ==============================================
 * section OOCSS
=============================================== */

/* sectionフィットOOCSS
-----------------------------------------------
 * section_body内のコンテンツが、内容が背景色を敷き詰めて画面いっぱいに広げたいコンテンツであったり、レスポンシブテーブル、動画、といった
 * 余白なく領域全体にフィットさせたいデザインの場合、.sectionに.section-fitを併設することで余白をリセット。
 * 余白リセットはスマホ時のみ（768px未満）で効くものとしている。タブレット・PCでは余白を残すべきコンテンツが多いのでそうしている。
 * もし動画などタブレット・PCもフィットさせたい場合はその都度padding定義をオーバーライドするか、下記の.section-fit-allを使う。
 */
@media ( max-width: 767px ) {
	.main_column .section-fit {
		padding: 0;
	}
}
.main_column .section-fit-all {
	/* 動画や商品プロモーションなどデバイスを問わず常にフィットさせたい場合 */
	padding: 0;
}

/* section内直下コンテンツの不要marginリセット
----------------------------------------------- 
 * .section_bodyにはデバイスごとに統一された余白を提供できるようにpaddingを定義しているが、包含されるコンテンツによってはその要素自体がmarginをもっているケースがある。
 * その際.section_bodyの最上部や最下部に余分な余白が発生してしまうのでそのmarginを強制的に除去しておく。
 * ※.section_bodyからみて孫要素がmarginを持っていて余白リセットが効かない場合は適宜そちらで余白制御をする。
 * ※.section_body直下にform要素がありその中の要素がmarginを持つ場合は当然余白リセットは効かないのでその倍も適宜調整。（※section-fitする場合は問題ない）
 * ※もしこの余白リセットをしたくない場合は適宜そちらで余白制御をする。
*/
.main_column .section_body > *:first-child {
	margin-top: 0 !important;
}
.main_column .section_body > *:last-child {
	margin-bottom: 0 !important;
}






/*************************************************
 *
 * ヘッダー
 *
*************************************************/
/* frame
----------------------------------------------- */
header {
}
header #header_wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 99;
}
#header_wrap .wrap {
	display: flex;
	justify-content: space-between;
	height: 100%;
}
#header_wrap .wrap .box1 {}
#header_wrap .wrap .box2 {}
#header_wrap .wrap .box3 {}

/* .header_logo
----------------------------------------------- */
#header_wrap .wrap .header_logo {
	height: 100%;
	display: flex;
	align-items: center;
}
#header_wrap .wrap .header_logo a {
	display: block;
	width: 100%;
}
#header_wrap .wrap .header_logo img {
	max-width: 100%;
	height: auto;
}

/* nav
----------------------------------------------- */
#header_wrap .wrap .box2 nav {
	height: 100%;
}
#header_wrap .wrap .box2 ul {
	height: 100%;
	display: flex;
	align-items: center;
}
#header_wrap .wrap .box2 li {
	flex: 0 0 auto;
}
#header_wrap .wrap .box2 li a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 1em;
	font-size: 15px;
	color: inherit;
}

/* .nav_toggle
----------------------------------------------- */
#header_wrap .nav_toggle {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	cursor: pointer;
}
#header_wrap .nav_toggle .btn_burger {
	width: 40px;
	height: 40px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding: 5px;
	box-sizing: border-box;
	position: relative;
}
#header_wrap .nav_toggle .btn_burger span {
	display: block;
	width: 100%;
	height: 1px;
	background-color: #666;
	position: relative;
	transition: .3s;
}
#header_wrap .nav_toggle .btn_burger span:before,
#header_wrap .nav_toggle .btn_burger span:after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #666;
	position: absolute;
	top: 0;
	left: 0;
	transition: .3s;
}
#header_wrap .nav_toggle .btn_burger span:before {
	transform: translate3d(0,-6px,0) rotate(0);
}
#header_wrap .nav_toggle .btn_burger span:after {
	transform: translate3d(0,6px,0) rotate(0);
}
/* .nav_toggle.is-opened */
#header_wrap .nav_toggle.is-opened .btn_burger span {
	background: transparent;
}
#header_wrap .nav_toggle.is-opened .btn_burger span:before {
	transform: translate3d(0,0,0) rotate(405deg);
}
#header_wrap .nav_toggle.is-opened .btn_burger span:after {
	transform: translate3d(0,0,0) rotate(135deg);
}

@media ( max-width: 767px ) {
	#header_wrap {
		height: auto;
	}
	#header_wrap .wrap {
		flex-flow: row wrap;
	}
	#header_wrap .wrap .box1 {
		width: 100%;
		height: 50px;
		padding: 8px;
		box-sizing: border-box;
	}
	#header_wrap .wrap .box2 {
		width: 100%;
	}
	#header_wrap .wrap .box3 {
		display: none;
	}
	/* .header_logo */
	#header_wrap .wrap .header_logo {
		width: 200px;
		margin: 0 auto;
	}
	#header_wrap .wrap .header_logo img {
	}
	/* ..nav_toggle */
	#header_wrap .nav_toggle {
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#header_wrap .nav_toggle .btn_burger {
		width: 40px;
		height: 40px;
	}
	/* nav */
	#header_wrap .wrap .box2 {
		display: none;
		padding: 15px 20px;
		height: auto;
		background-color: #f8f8f8;
		/* ページを伸縮させず浮かせる */
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0 8px 8px rgba(0,0,0,0.2);
		border-top: solid 1px #ddd;
	}
	#header_wrap .wrap .box2 nav {
		height: auto;
	}
	#header_wrap .wrap .box2 ul {
		flex-flow: column;
	}
	#header_wrap .wrap .box2 li {
		width: 100%;
	}
	#header_wrap .wrap .box2 li + li {
		margin-top: 5px;
	}
	#header_wrap .wrap .box2 li a {
		height: 40px;
		background-color: #fff;
		border: solid 1px #ddd;
		border-radius: 20px;
	}
	/* .nav_toggle */
	#header_wrap .nav_toggle {
		visibility: visible;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	#header_wrap {
		height: auto;
	}
	#header_wrap .wrap {
		flex-flow: row wrap;
	}
	#header_wrap .wrap .box1 {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
	}
	#header_wrap .wrap .box2 {
		width: 100%;
		background: #f0f0f0;
	}
	#header_wrap .wrap .box3 {
		display: none;
	}
	/* .header_logo */
	#header_wrap .wrap .header_logo {
		width: 250px;
		margin: 0 auto;
	}
	#header_wrap .wrap .header_logo img {
	}
	/* nav */
	#header_wrap .wrap .box2 ul {
		justify-content: center;
	}
	#header_wrap .wrap .box2 li a {
		height: 50px;
	}
}
@media ( min-width: 980px ) {/* 980px以上共通。後で1280px未満・以上それぞれを定義 */
	#header_wrap {
		height: 80px;
	}
	/* .header_logo */
	#header_wrap .wrap .header_logo {
		padding-left: 15px;
	}
	/* nav */
	#header_wrap .wrap .box2 li a {
		height: 40px;
	}
	#header_wrap .wrap .box2 li a:hover {
		text-decoration: none;
	}
	#header_wrap .wrap .box2 li a span {
		position: relative;
	}
	#header_wrap .wrap .box2 li a span:after {
		content: "";
		display: block;
		width: calc(100% + 10px);
		height: 1px;
		position: absolute;
		bottom: -3px;
		left: -5px;
		background-color: #000;
		transform-origin: left bottom;
		transform: scaleX(0);
		transition: .3s;
	}
	#header_wrap .wrap .box2 li a:hover span:after {
		transform: scaleX(1);
	}
}
@media ( min-width: 980px ) and ( max-width: 1279px ) {
	#header_wrap .wrap .box1 {
		flex: 0 0 auto;
		width: 300px;
	}
	#header_wrap .wrap .box2 {
		flex: 1 1 auto;
		padding-right: 15px;
	}
	#header_wrap .wrap .box3 {
		display: none;
	}
	#header_wrap .wrap .box2 ul {
		justify-content: flex-end;
	}
}
@media ( min-width: 1280px ) {
	#header_wrap .wrap .box1,
	#header_wrap .wrap .box3 {
		flex: 0 0 auto;
		width: 340px;/* .box2をセンタリングするため同じ幅を定義 */
	}
	#header_wrap .wrap .box2 {
		flex: 1 1 auto;
	}
	#header_wrap .wrap .box2 ul {
		justify-content: center;
	}
}


/*************************************************
 *
 * フッター
 *
*************************************************/
footer {
	background-color: #000;
	color: #fff;
	border-top: solid 1px #fff;
}
footer .copyright {
	text-align: center;
	font-size: 12px;
}
@media ( max-width: 767px ) {
	footer {
		padding: 10px 20px;
	}
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
	footer {
		padding: 20px 30px;
	}
}
@media ( min-width: 980px ) {
	footer {
		padding: 20px 40px;
	}
}


/*************************************************
 *
 * テキスト
 *
*************************************************/
html {
}
body {
	background-color: #fff;
	color: #000;
	font-size: 14px;
	line-height: 1.5;
	font-family: Helvetica, Arial, Roboto, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
h1,h2,h3,h4,h5 {
	line-height: 1.2;
	font-weight: normal;
}

/* リンクテキスト
----------------------------------------------- */
a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
a:link {
	color: #39c;
	text-decoration: none;
	outline: none;
}
a:visited {
	color: #39c;
	text-decoration: none;
}
a:hover,
a:active {
	text-decoration: underline;
}

/* 他テキスト
----------------------------------------------- */
/* 注意 */
.attention {
	color: #c00;/*赤文字*/
}
.attention2 {
	color: #235282;/*エラーの印象を促す赤文字以外を使いたい場面*/
}
/* 強調1 */
.st {
	font-weight: bold;
}
/* 強調2 */
.big {
	font-size: 15px;
}
/* 小文字 */
.mini {
	font-size: 90%;
}
/* ポイント */
.point {
	color: #c00;
	font-weight: normal;
}
/* 会員氏名 */
.user_name {
	font-weight: bold;
}

/* フォント
----------------------------------------------- */
.eisuu {/*英数字用*/
	font-family: 'Arial';
}
.mincho {/*明朝系*/
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.gothic_sawa {
	font-family: 'Sawarabi Gothic', sans-serif;
}
.en {
	font-family: "Georgia";
}



/*************************************************
 *
 * フォーム部品
 *
*************************************************/
input,
select,
textarea {
	box-sizing: border-box;
	background-color: #fff;
	border: solid 1px #c0c0c8;
	outline: none;
	/**/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* フォーカス時 */
input:focus,
select:focus,
textarea:focus {
	border-color: #69c !important;
	box-shadow: 0 0 4px rgba(102,153,204,0.3) !important;
	background-color: #fff !important;
}
input[type="radio"]:focus,
input[type="checkbox"]:focus {
}

/* 入力エラーinvalid時 */
input:invalid,
select:invalid,
textarea:invalid {
	box-shadow: none;
}

/* 送信ボタン */
input[type="submit"],
input[type="image"] {
	border: none;
	outline: none;
}

/* プレースホルダー文字色 */
::-moz-placeholder {
	color: #444;
}
::-webkit-input-placeholder {
	color: #aaa;
}
:-ms-input-placeholder {
	color: #aaa;
}

/* ==============================================
 * .ecp_checkbox
=============================================== */
label.ecp_checkbox {
	position: relative;
	padding-left: 28px;/* !important;*/
	line-height: 2;
}
label.ecp_checkbox + label.ecp_checkbox {
	margin-left: 1em;
}
label.ecp_checkbox input[type="checkbox"] {
	display: none !important;
}
label.ecp_checkbox input[type="checkbox"] + .cb_icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 28px;
}
label.ecp_checkbox input[type="checkbox"] + .cb_icon:before {
	font-family: "Ionicons";
	content: "\f372";
	color: #666;
	transition: .3s;
}
label.ecp_checkbox input[type="checkbox"]:checked + .cb_icon:before {
	content: "\f373";
	color: #0082bf;
}
label.ecp_checkbox:hover input[type="checkbox"] + .cb_icon:before {
	color: #0082bf;
}
/* アイコンtype_b */
label.ecp_checkbox input[type="checkbox"] + .cb_icon.type_b:before {
	content: "\f372";
}
label.ecp_checkbox input[type="checkbox"]:checked + .cb_icon.type_b:before {
	content: "\f374";
	color: #0082bf;
}
label.ecp_checkbox:hover input[type="checkbox"] + .cb_icon.type_b:before {
	color: #0082bf;
}
label.ecp_checkbox input[type="checkbox"] + .cb_icon.type_b:after {
	/* 背景色が敷かれている中でアイコンが透過だと見えづらいのでアイコンの形にそって白い背景を合成しておく */
	content: "";
	width: 20px;
	height: 20px;
	display: block;
	background-color: #fff;
	border-radius: 2px;
	position: absolute;
	left: 1px;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}

/* ==============================================
 * .ecp_radio
=============================================== */
label.ecp_radio {
	position: relative;
	padding-left: 25px;/* !important;*/
	line-height: 2;
}
label.ecp_radio + label.ecp_radio {
	margin-left: 1em;
}
label.ecp_radio input[type="radio"] {
	display: none !important;
}
label.ecp_radio input[type="radio"] + .rb_icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 23px;
}
label.ecp_radio input[type="radio"] + .rb_icon:before {
	font-family: "Ionicons";
	content: "\f3a6";
	color: #999;
	transition: .3s;
}
label.ecp_radio input[type="radio"]:checked + .rb_icon:before {
	content: "\f3a7";
	color: #0082bf;
}
label.ecp_radio:hover input[type="radio"] + .rb_icon:before {
	color: #0082bf;
}
/* .joint_cell内のecp_radio */
.joint_cell label.ecp_radio {
	padding-left: 0;
	display: inline-block;
	width: 23px;
	height: 23px;
	line-height: 1;
}
.joint_cell label.ecp_radio .rb_icon {
	position: static;
	transform: trasnlateY(0);
}

/* ==============================================
 * .ecp_select
=============================================== */
label.ecp_select {
}
label.ecp_select .input_item {/*ecp_form_validで無くても共通にしたいので.input_itemが必要*/
	position: relative;
}
label.ecp_select .input_item:after {
	font-family: "Ionicons";
	content: "\f20e";
	display: flex;
	justify-content: center;
	align-items: center;
	width: 26px;
	height: calc(100% - 2px);
	font-size: 16px;
	position: absolute;
	top: 1px;
	right: 1px;
	border-radius: 0 4px 4px 0;
	pointer-events: none;
	background-color: #eee;
}
label.ecp_select select {
	/*
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	*/
	padding-right: 30px;
	box-sizing: border-box;
	margin: 0;
}

/* ==============================================
 * .ecp_file 画像アップロード
=============================================== */
label.ecp_file {
}
label.ecp_file input[type="file"] {
	display: none;
}
label.ecp_file .input_file,
label.ecp_file .file_upload_btn {
	display: inline-block;
	vertical-align: middle;
	font-size: 15px;
	padding: 0.5em 1em;
	border-radius: 4px;
	cursor: pointer;
	transition: .3s;
}
label.ecp_file .input_file {
	font-weight: bold;
	background-color: #ddd;
}
label.ecp_file .input_file:hover {
	background-color: #eee;
}
label.ecp_file .file_upload_btn {
	background-color: #ffa500;
	color: inherit;
	margin-left: 7px;
}
label.ecp_file .file_upload_btn:hover {
	text-decoration: none;
	filter: brightness(1.1);
}
label.ecp_file .file_upload_btn.hidden {
	visibility: hidden;
	opacity: 0;
}
/* アップロード済み */
.file_uploaded {
}
.file_uploaded img {
	max-width: 100%;
	height: auto;
}
@media ( max-width: 767px ) {
	.file_uploaded {
		text-align: center;
	}
	.file_uploaded img + a {
		margin-top: 10px;
	}
}


/* ==============================================
 * form_basic
=============================================== */
.form_basic label {
	font-size: 15px;
}
.form_basic input,
.form_basic select,
.form_basic textarea {
	font-size: 15px;
	border-radius: 4px;
	padding: 6px;
}
.form_basic textarea {
	height: 6em;
	max-width: 100% !important;
}

/* フォームに添えるコメント */
.form_basic .input_comment {
	display: inline-block;
	padding: 3px 6px;
}

@media ( max-width: 767px ) {
	/* iOSだとフォームフォーカス時にフォントサイズが16px未満だとビューポートを拡大してズームされてしまうのでやむなく16px */
	.form_basic input,
	.form_basic select,
	.form_basic textarea {
		font-size: 16px;
	}
}


/* ==============================================
 * .ecp_form_valid 201812
=============================================== */
.ecp_form_valid {
	overflow: hidden;
}

/* th 必須ステータス */
.ecp_form_valid th .status {
	display: inline-block;
	float: right;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.1em;
	width: 3em;
	height: 1.9em;
	border-radius: 3px;
	overflow: hidden;
 	/*position: relative;*/
}
/* 立体感（いささか古く見えるので没）
.ecp_form_valid th .status:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0px -7px 11px -5px rgba(30,30,30,0.2) inset;
}
*/
.ecp_form_valid th .status .inner {
	width: 100%;
	height: 100%;
	transition: .3s;
	opacity: 1;
}
.ecp_form_valid th .status .inner span {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.ecp_form_valid th .status .inner span:nth-child(1) {
	background-color: #d00;
}
.ecp_form_valid th .status .inner span:nth-child(2) {
	background-color: #42bf00;
}
/* 必須→OK切替え*/
.ecp_form_valid th.complete_field .status .inner {
	transform: translateY(-100%);
}
.ecp_form_valid th.complete_field .status .inner span {
	animation: th_complete .3s forwards;
}
@keyframes th_complete {
	0% {
		filter: brightness(2);
	}
	100% {
		filter: brightness(1);
	}
}


/* .ecp_form_group */
.ecp_form_valid .ecp_form_group {
}

/* .input_item */
.ecp_form_valid .input_item {
	position: relative;/*バルン基点*/
	display: inline-block;
	max-width: 100%;/*スマホなどフォームがはみ出すのを防ぐ目的*/
}

/* スペーサー*/
.ecp_form_valid .input_item.spacer:before {
	content: "";
	display: inline-block;
	margin-left: 5px;

}

/* 支払い方法等やむなくtableの外に組まなければならない場合のほか、textareaを幅100%にしたい場合などblock化*/
.ecp_form_valid .input_item.block {
	display: block;
	width: 100%;
}

/* .ecp_form_group > label ※スタンダードテキスト入力等々 */
.ecp_form_valid .ecp_form_group:not(.horizontal) {
}
.ecp_form_valid .ecp_form_group:not(.horizontal) > label {
	/*
	 * labelごとに幅MACで縦並べさせたいのでblockとするのがベストだと思うが入力フォームの右側に余白があったとして、そこをクリックしてもlabelなのでフォーカスが入ってしまう。
	 * それでもいいのかもしれないが少し奇妙にも思えるので、力技だがpointer-eventsをオフしておき（中の要素でautoに戻す）対処してみた。
	 * またblockにすることでtextareaを幅100%にすることも可能となるので、これでいきたい。
	 */
	display: block;
	pointer-events: none;
}
.ecp_form_valid .ecp_form_group:not(.horizontal) > label > * {
	pointer-events: auto;
}
.ecp_form_valid .ecp_form_group:not(.horizontal) > label + label {
	margin-top: 10px;
}
.ecp_form_valid .ecp_form_group.horizontal > label {
	display: inline-block;
}
.ecp_form_valid .ecp_form_group.horizontal > label + label {
	margin-left: 10px;
}

/* .ecp_form_group > .input_item > label ※ラジオボタン、チェックボックス */
.ecp_form_valid .ecp_form_group:not(.horizontal) > .input_item > label {
	display: block;
	margin-left: 0;
}
.ecp_form_valid .ecp_form_group.horizontal > .input_item > label {
	display: inline-block;
}
.ecp_form_valid .ecp_form_group.horizontal > .input_item > label + label {
	margin-left: 1em;
}

/* labelの前後にフォームをつなぐ記号・文字を括ったspanとの余白 */
.ecp_form_valid .ecp_form_group label + span {
	margin-left: 5px;
}
.ecp_form_valid .ecp_form_group span + label {
	margin-left: 5px;
}

/* 固定レイアウト： 入力要素2分割（ハーフ） horizontal.half */
.ecp_form_valid .ecp_form_group.horizontal.half {
	max-width: 600px;/*フル幅MAXを指定*/
	display: flex;
	justify-content: space-between;
}
.ecp_form_valid .ecp_form_group.horizontal.half > label {
	flex: 1 1 auto;
	width: calc((100% - 15px) / 2);
}
.ecp_form_valid .ecp_form_group.horizontal.half > label .input_item {
	display: block;
}
.ecp_form_valid .ecp_form_group.horizontal.half > label .input_item input {
	width: 100%;
}

/* 固定レイアウト： 入力要素フル幅 label.full */
.ecp_form_valid .ecp_form_group label.full {
	max-width: 600px;/*フル幅MAXを指定*/
}
.ecp_form_valid .ecp_form_group label.full .input_item {
	display: block;
}
.ecp_form_valid .ecp_form_group label.full .input_item input,
.ecp_form_valid .ecp_form_group label.full .input_item textarea {
	width: 100%;
}

/* inputs */
.ecp_form_valid .input_item input,
.ecp_form_valid .input_item select,
.ecp_form_valid .input_item textarea {
}

/* デバッグ中の目印 
.ecp_form_valid .input_item.is-finished {
	box-shadow: 0 0 3px #0f0;
}
.ecp_form_valid .input_item.is-unfinished {
	box-shadow: 0 0 3px #f00;
}
*/

/* 入力フォームのエラー効果 */
.ecp_form_valid .effect_error {
	border: solid 1px #d00;
	box-shadow: 0 0 3px #f00;
}

/* バルン */
.bln {
	display: none;/* jsがform要素に.ecp_form_validを付ける前に一瞬表示されてしまうのでそれまで非表示 */
}
.ecp_form_valid .bln {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-height: 2em;
	font-size: 14px;
	line-height: 1.2;
	/*white-space: nowrap;*/
	vertical-align: middle;
	padding: 0.3em 1em;
	box-sizing: border-box;
	padding-right: 0.5em;
	border-radius: 1em;
	background-color: #666;
	color: #fff;
	filter: drop-shadow(3px 5px 3px rgba(0,0,0,0.2));
	pointer-events: none;
	position: absolute;
	bottom: 100%;
	left: 0;
	transform: translateY(5px);
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	z-index: 9;
	/* iOS Safariでたまにバルンがつぶれてしまう現象あり→効果無しだった
	-webkit-backface-visibility: hidden;
	*/
}
/* バルンくちばし */
.ecp_form_valid .bln:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 1em;
	display: block;
	width: 0;
	height: 0;
	border-top: solid 5px #666;
	border-left: solid 5px transparent;
	border-right: solid 5px transparent;
	border-bottom: solid 5px transparent;
}
.ecp_form_valid .bln.is-active {
	opacity: 0.9;
	visibility: visible;
	transform: translateY(-6px);
	pointer-events: auto;
	cursor: pointer;
}
.ecp_form_valid .bln:hover {
	opacity: 1;
}
/* バルンcloseボタン */
.ecp_form_valid .bln:after {
	font-family: "Ionicons";
	content: "\f128";
	font-size: 110%;
	color: #fff;
	margin-left: 5px;
	opacity: 0;
	transition: .3s;
}
.ecp_form_valid .bln.is-active:hover:after {
	opacity: 1;
}
/* ガイドバルン */
.ecp_form_valid .bln.bln_guide {
	background-color: #235282;
}
.ecp_form_valid .bln.bln_guide:before {
	border-top-color: #235282;
}
/* エラーバルン */
.ecp_form_valid .bln.bln_error {
	background-color: #d00;
}
.ecp_form_valid .bln.bln_error:before {
	border-top-color: #d00;
}

/* 入力情報表示 */
#valid_infoarea {
	position: fixed;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 90px;
	height: 90px;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: #f8f8f8;
	border: solid 1px #ccc;
	font-size: 13px;
	box-shadow: 0 5px 5px rgba(0,0,0,.15);
	transition: 0.3s;
	opacity: 0;
	visibility: hidden;
	z-index: 9;
}
#valid_infoarea .remain {
	font-size: 150%;
}
#valid_infoarea.is-enabled {
	opacity: 1;
	visibility: visible;
}
#valid_infoarea.is-complete {
	background-color: #fff;
	border-color: #42bf00;
	border-width: 2px;
}
#valid_infoarea.is-complete .remain {
}
@media ( max-width: 979px ) {
	#valid_infoarea {
		display: block;
		width: 100%;
		height: auto;
		padding: 10px;
		text-align: center;
		font-size: 12px;
		border-radius: 0;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(0);
		border: none;
		background-color: #555;
		color: #fff;
	}
	#valid_infoarea.is-complete {
		background-color: #555;
		color: #fff;
	}
	#valid_infoarea p {
		display: inline-block;
	}
	#valid_infoarea p + p {
		margin-left: 0.5em;
	}
	#valid_infoarea .remain {
		font-size: 100%;
	}
}

/* iPhoneSEサイズだとカナ入力が改行されてしまうので微調整 */
@media ( max-width: 375px ) {
	input[name^="kana"] {
		width: 100px;
	}
}





/*************************************************
 *
 * その他
 *
*************************************************/
.inline {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}





/* ==============================================
 * modal 画像拡大表示
=============================================== */
/* .modal
----------------------------------------------- */
.modal {
	transition: .3s;
}
.modal:hover {
	filter: brightness(1.05);
}

/* 拡大表示エリア
----------------------------------------------- */
.modal_ele {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: hsla(0,0%,100%,0.9);
	padding: 40px;
	box-sizing: border-box;
	z-index: 99;
	transition: .3s;
	opacity: 0;
	visibility: hidden;
}
.modal_ele .content {
	border: solid 1px #ddd;
	position: relative;
	cursor: pointer;
}
.modal_ele .content:after {
	font-family: "Ionicons";
	content: "\f404";
	position: absolute;
	top: 0;
	right: 0;
	font-size: 30px;
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border-radius: 50%;
	width: 1em;
	height: 1em;
	color: #666;
	border: solid 1px #666;
	transform: translate(50%,-50%);
	transition: .3s;
	opacity: 0;
}
.modal_ele .content:hover:after {
	opacity: 1;
}
.modal_ele .content img {
	max-width: 100%;
	height: auto;
}
.modal_ele.is-active {
	opacity: 1;
	visibility: visible;
}







/*************************************************
 *
 * xxx
 *
*************************************************/

/* ==============================================
 * xxx
=============================================== */

/* xxx
----------------------------------------------- */

/*
@media ( max-width: 767px ) {
}
@media ( min-width: 768px ) and ( max-width: 979px ) {
}
@media ( min-width: 980px ) {
}
*/