@charset "utf-8";

/*-----------------------------------------------------------------------------
|
|■┓input  textarea  select
|┗┛
-----------------------------------------------------------------------------*/
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],/* inputで指定すると、radio、checkboxも変更されてしまうためtypeで指定 */
textarea,
select {
	-webkit-appearance: none;/* iPad用のデザイン初期化　selectの▼非表示 */
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
	border: 1px solid #999;
	border-radius: 0;
	box-shadow: inset 1px 3px 9px -8px rgba(0,0,0,0.5);
	font-family: inherit;
	font-size: inherit;
	margin-top: 6px;
	margin-bottom: 6px;
	max-width: 100%;
	outline: none;
	padding: 4px 8px;
}
/* input */
input:-webkit-autofill { /* オートフィルでの背景色を上書き フォーカスが外れた時のため */
	-webkit-box-shadow: 0 0 0 1000px white inset;
}
/* input type="number" */
input[type="number"]::-webkit-inner-spin-button { /* スピンボタン非表示 */
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] { /* スピンボタン非表示 */
	-moz-appearance: textfield;
}
/* input:focus select:focus */
input:focus,
textarea:focus,
select:focus {
	background-color: #fffff0;
}

/* input type="radio" */
input[type="radio"] {
	display: none;
}
input[type="radio"] + label {
	display: inline-block;
	margin-right: 0.8em;
	padding: 3px 3px 3px 22px;
	position: relative;
}
input[type="radio"] + label::before,
input[type="radio"] + label::after {
	content: "";
	display: block;
	position: absolute;
	transition: all .2s;
}
input[type="radio"] + label::before {
	background: #f4f4f4;
	border: 1px solid #ccc;
	border-radius: 14px;
	top: 0.5em;
	left: 0;
	width: 14px;
	height: 14px;
}
input[type="radio"] + label::after {
	border-radius: 50%;
	top: calc(0.5em + 3px);
	left: 3px;
	width: 10px;
	height: 10px;
	opacity: 0;
}
input[type="radio"] + label:hover::before {
	background: #fff;
}
input[type="radio"]:checked + label::before {
	background: #fff;
	border: 1px solid #f60;
}
input[type="radio"]:checked + label::after {
	background: #f60;
	opacity: 1;
}

/* input type="checkbox" */
input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label {
	display: inline-block;
	margin-right: 0.8em;
	padding: 3px 3px 3px 22px;
	position: relative;
}
input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after {
	content: "";
	display: block;
	position: absolute;
	transition: all .2s;
}
input[type="checkbox"] + label::before {
	background: #f4f4f4;
	border: 1px solid #ccc;
	border-radius: 3px;
	top: 0.5em;
	left: 0;
	width: 14px;
	height: 14px;
}
input[type="checkbox"] + label::after {
	border-left: 2px solid #f60;
	border-bottom: 2px solid #f60;
	top: calc(0.5em + 4px);
	left: 3px;
	width: 8px;
	height: 4px;
	opacity: 0;
	transform: rotate(-45deg) scale(.5);
}
input[type="checkbox"] + label:hover::before {
	background: #fff;
}
input[type="checkbox"]:checked + label::before {
	background: #fff;
	border: 1px solid #f60;
}
input[type="checkbox"]:checked + label::after {
	transform: rotate(-45deg) scale(1);
	opacity: 1;
}

/* select */
select::-ms-expand {
	display: none;
}
select {
	background-color: #fff;
	background-image: url(/vc/base/usr/docs/images/select_arrow.svg);
	background-position: right 5px top 50%;
	background-repeat: no-repeat;
	background-size: 10px 7px;
	cursor: pointer;
	max-width: 100%;
	padding-right: 20px;
}

/* input:disabled select:disabled */
input[type="radio"]:disabled + label,
input[type="checkbox"]:disabled + label,
select:disabled {
	color: #999;
	cursor: default !important;
}
input[type="radio"]:disabled + label::before,
input[type="checkbox"]:disabled + label::before {
	background-color: #fff;
	border-color: #ddd;
}
select:disabled {
	background-image: url(/vc/base/usr/docs/images/select_arrow_disabled.svg);
	border-color: #ccc;
}

/* input.btn_ */
input.btn_submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #f60;
	background-image: url(/vc/base/usr/docs/images/ic_arrow@2x.png);
	background-repeat: no-repeat;
	background-size: 16px 13px;
	border: none;
	border-radius: 4px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	height: 48px;
	min-width: 168px;
	padding: 0 16px 0 28px;
	line-height: 1.3;
	transition: all .2s;
}
input.btn_submit.btn_next {
	background-position: 48px calc(50% + 1px);
}
input.btn_submit.btn_next_eng {
	background-position: 24px calc(50% + 1px);
}
input.btn_submit.btn_contact {
	background-position: 32px calc(50% + 1px);
}
input:hover.btn_submit {
	opacity: .6;
	transition: .2s;
}

/* a.btn_ */
a.btn_submit,
a.btn_back,
a.btn_close {
	border-radius: 4px;
	display: flex;
		align-items: center;
		justify-content: center;
	line-height: 1.3;
	transition: all .2s;
}
a.btn_submit {
	background-color: #f60;
	color: #fff !important;
	height: 48px;
	min-width: 168px;
	padding: 0 16px;
}
a.btn_back,
a.btn_close {
	background: #ddd !important;
	color: #000 !important;
	font-size: 14px;
	font-size: 1.4rem;
	height: 40px;
	min-width: 128px;
	padding: 0 16px;
}
a.btn_submit span,
a.btn_back span,
a.btn_close span {
	display: block;
	position: relative;
}
a.btn_submit span {
	padding-left: 24px;
}
a.btn_back span {
	padding-left: 16px;
}
a.btn_close span {
	padding-left: 22px;
}
a.btn_submit span::before,
a.btn_back span::before,
a.btn_close span::before {
	content: "";
	font-size: 0;
	line-height: 0;
	display: block;
	position: absolute;
}
a.btn_submit span::before {
	background: url(/vc/base/usr/docs/images/ic_arrow@2x.png) no-repeat 0 0;
	background-size: 16px 13px;
	width: 16px;
	height: 13px;
	left: 0;
	top: calc(50% - 6px);
}
a.btn_back span::before {
	background: url(/vc/base/usr/docs/images/ic_back@2x.png) no-repeat 0 0;
	background-size: 6px 11px;
	width: 6px;
	height: 11px;
	left: 0;
	top: calc(50% - 5px);
}
a.btn_close span::before {
	background: url(/vc/base/usr/docs/images/ic_x@2x.png) no-repeat 0 0;
	background-size: 15px 12px;
	width: 15px;
	height: 12px;
	left: 0;
	top: calc(50% - 5px);
}
a:hover.btn_submit,
a:hover.btn_back,
a:hover.btn_close {
	opacity: .6;
	text-decoration: none !important;
	transition: .2s;
}
a.btn_submit.btn_form {
	background: #000080;
}
/*-----------------------------------------------------------------------------
|
|■┓コンテンツ部分
|┗┛
-----------------------------------------------------------------------------*/
/*----------------------------
共通
----------------------------------------------------------*/
.caption {
	color: #f00;
	font-size: 18px;
	font-size: 1.8rem;
}
/* 入力エリア */
.input_area {
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-top: 24px;
	padding: 40px;
}
.input_area .input_area_bottom {
	margin-top: 24px;
}
/* reminderForm.jsp用 */
.input_area .input_address {
	border: 1px solid #bbb;
	border-radius: 4px;
	box-shadow: none;
	padding: 8px;
}
/* reminderSelect.jsp用 */
.input_area .input_ck + label {
	font-size: 18px;
	font-size: 1.8rem;
}
.input_area input[type="checkbox"].input_ck + label::before {
	background: #fff;
	top: 0.55em;
}
.input_area input[type="checkbox"].input_ck + label::after {
	top: calc(0.55em + 4px);
}
.input_area input[type="checkbox"].input_ck + label:hover::before {
	background: #f4f4f4;
}
.input_area input[type="checkbox"].input_ck:checked + label:hover::before {
	background: #fff;
}
/* カレンダーアイコン追加 */
.calendar_wrap {
	display: flex;
		align-items: center;
		flex-wrap: wrap;
}
.calendar {
	white-space: nowrap;
}
.calendar img {
	vertical-align: middle !important;
	margin-left: 8px;
	cursor: pointer;
	transition: .3s;
}
.calendar img:hover {
	opacity: .6;
	transition: .3s;
}
.wave_dash {
	padding: 0 16px;
}
/* 表示されるカレンダーのサイズ（フォントサイズに依存） */
#ui-datepicker-div {
	font-size: 16px;
	font-size: 1.6rem;
}
/* ご注意枠 */
.caution_box {
	background: #ffebeb;
	border: 1px solid #fbb;
	border-radius: 4px;
	box-shadow: 0 0 4px 4px #fff; /* グレー背景内に配置した時用 */
	margin-top: 24px;
	padding: 20px 24px 24px 24px;
}
.submit_area + .caution_box {
	margin-top: 32px;
}
.caution_box .caution_ttl {
	color: #f00;
	font-size: 18px;
	font-size: 1.8rem;
	margin-bottom: 4px;
}
.caution_box .caution_ttl::before {
	content: "\f06a";
	font-family: FontAwesome;
	margin-right: 4px;
}
.caution_box.inline_block { /* 幅100%だと大きい時 */
	display: inline-block;
}
.caution_box.mt_minus1em { /* 上部の margin が大きい時 */
	margin-top: -1em;
}

/* 「次へ」「問い合わせフォームはこちら」「問い合わせる」ボタンwrap */
.btn_forward {
	display: flex;
	margin-top: 48px;
}
.btn_forward.f_center {
	justify-content: center;
}
.btn_forward.submit_cnenter_250px {
	justify-content: flex-start;
	width: calc(50% + 125px);
}
.btn_forward.submit_cnenter_250px .btn_submit {
	margin-left: auto;
}
/* 「戻る」「閉じる」ボタンwrap */
.btn_recession {
	display: flex;
	margin-top: 48px;
}
.btn_recession.f_center { /* ボタンをセンタリング */
		justify-content: center;
}
.btn_recession .btn_back + .btn_close {
	margin-left: 24px;
}

/* メール入力箇所 */
.mail_set {
	display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	max-width: 640px;
}
/* ▼G172アマゾンジャパン対応▼ */
.mail_set.amazon {
		justify-content: flex-start;
	max-width: 100%;
}
.mail_set.amazon .input_address {
	width: 90%;
}
.mail_set.amazon > div:first-child {
	display: flex;
		align-items: center;
		justify-content: center;
}
.mail_set.amazon > div:first-child > span {
	display: flex;
		align-items: center;
		justify-content: center;
	width: 10%;
}
/* ▲G172アマゾンジャパン対応▲ */
.mail_set > div {
	margin: 8px 0; /* 「次へ」ボタンが2段目に行った時の隙間 */
}
.mail_set > div:first-child {
	flex-basis: 464px;
	height: 48px;
}
.mail_set .input_name {
	font-size: 14px;
	font-size: 1.4rem;
}
.mail_set .input_address {
	margin: 0;
	width: 100%;
	height: 100%;
}
.mail_set .btn_forward {
	display: flex;
	/*margin-top: 0;*/
}
/* 「>」付のリンク */
a.arrow_link_m,
a.arrow_link_l {
	display: inline-block;
	line-height: 1.4;
	position: relative;
}
a.arrow_link_m {
	padding-left: 16px;
}
a.arrow_link_l {
	font-size: 18px;
	font-size: 1.8rem;
	padding-left: 18px;
}
a.arrow_link_m::before,
a.arrow_link_l::before {
	display: block;
	font-family: FontAwesome;
	content: "\f054";
	margin-right: 4px;
	position: absolute;
		top: 3px;
		left: 2px;
}
a.arrow_link_m::before {
	font-size: 14px;
	font-size: 1.4rem;
}
a.arrow_link_l::before {
	font-size: 16px;
	font-size: 1.6rem;
}
input[type="text"].input_date,
input[type="text"].input_money {
	width: 128px;
	text-align: center;
}

/*----------------------------
箱２つのタイプ（.box_type）
----------------------------------------------------------*/
.box_type h3 {
	background: #888;
	border-radius: 4px 4px 0 0;
	color: #fff;
	/*
	font-weight: bold;
	*/
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.2;
	padding: 16px;
	text-align: center;
}
.box_type h3 .h3_sub_txt {
	font-size: 14px;
	font-size: 1.4rem;
	padding-top: 4px;
}
.box_type .reminder_way {
	margin-top: 40px;
}
.box_type .input_area {
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin-top: 0;
}
.box_type .mail_set {
	margin-top: 24px;
}


/*----------------------------
ノーマルタイプ（.normal_way）
----------------------------------------------------------*/
.normal_type h3 {
	/*
	background: #888;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 1.2;
	margin: 48px 0 24px;
	padding: 16px;
	*/
	background-color: #888;
	border-radius: 4px;
	color: #fff;
	font-size: 20px;
	font-size: 2.0rem;
	margin: 80px 0 .5em;
	padding: 16px 16px;

}
.normal_type h4 {
	/*
	border-bottom: solid 3px #ddd;
	font-size: 18px;
	font-size: 1.8rem;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 1.4;
	margin: 2em 0 .5em;
	padding: 8px 0;
	position: relative;
	*/
	border-bottom: solid 3px #ddd;
	font-size: 20px;
	font-size: 2.0rem;
	margin: 56px 0 .5em;
	padding: 8px 0;
	position: relative;
}
.normal_type h4::after {
	border-bottom: solid 3px #888;
	bottom: -3px;
	content: " ";
	display: block;
	position: absolute;
	width: 20%;
}

.normal_type h3 + h4 {
	/*
	margin-top: -0.5em;
	*/
	margin-top: 0;
}

/* reminderForm.jsp G92用 */
.comment_area_arrow {
	padding-top: 56px;
	position: relative;
}
.comment_area_arrow::before {
	font-family: FontAwesome;
	font-size: 20px;
	font-size: 2.0rem;
	content: "\f063";
	position: absolute;
		top: 8px;
		left: 88px;
}

/*----------------------------
各健保お問い合わせフォームテーブル（.normal_tbl）
----------------------------------------------------------*/
#vc_style table.normal_tbl {
	width: auto;
}
#vc_style table.normal_tbl th,
#vc_style table.normal_tbl td {
	border: 1px solid #ccc;
	padding: 16px;
	vertical-align: middle;
}
#vc_style table.normal_tbl th {
	background: #efefef;
	text-align: left;
	white-space: nowrap;
}
#vc_style table.normal_tbl td {
	background-color: #fff;
}
#vc_style table.normal_tbl td .name_width_flex {
	display: flex;
		flex-wrap: wrap;
}
#vc_style table.normal_tbl td.noborder_lr {
	border-left: none;
	border-right: none;
}
.name_width input {
	margin-right: 1em;
	width: 200px;
}
#vc_style .contact_sub_txt {
	color: #f00;
	font-size: 14px;
	font-size: 1.4rem;
}
input[type="tel"] {
	width: 240px;
}
#vc_style .zipcode {
	width: 100px !important;
}
#vc_style .address {
	max-width: 460px;
	width: 100%;
}
.email_conf {
	display: flex;
	flex-wrap: wrap;
}
.email_conf1_width {
	width: auto;
}
.email_width input[type="text"] {
	width: 400px;
}
.email_conf1_width input[type="text"],
.email_conf2_width input[type="text"] {
	width: 185px;
}
.email_conf2_width {
	display: flex; /* @マーク横並び用 */
	width: auto;
}
.email_conf2_width_contents {
	display: flex;
	width: 100%;
}
.email_conf2_width .mark{
	display: flex;
		align-items: center;
		justify-content: center;
	width: 30px;
	height: 40px; /* input[type="text"]の高さ */
}
#vc_style a.send_email {
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 5px;
	color: #666;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
	margin: .25em 0;
	padding: 4px 8px;
	width: 155px;
}
#vc_style a.send_email::before {
	content: "\f0e0";
	font-family: "FontAwesome";
	padding-right: 4px;
}
#vc_style a.send_email:hover {
	opacity: .7;
	text-decoration: none;
}
/* 各健保お問い合わせ完了 */
#vc_style .error_list {
	color: #ccc;
}
#vc_style h4.contact_us {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 1.5em 0 .5em;
	padding-left: 16px;
	position: relative;
}
#vc_style h4.contact_us::before {
	content: "\f054";
	font-family: FontAwesome;
	font-size: 12px;
	font-weight: normal;
	position: absolute;
		top: 4px;
		left: 0;
}
.catch_copy {
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
}
/* 文字サンプル */
.pass_code {
	border-top: 1px solid #ddd;
	margin-top: 2em;
	padding: 1em 0 0 0;
}

/*----------------------------
お問い合わせ結果ページ
----------------------------------------------------------*/
.ff_mincho {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* ログインへ */
.page_transition {
	margin-top: 64px;
	display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
}
.page_transition > div {
	margin-bottom: 16px;
	width: 49%;
}
.page_transition a.btn_transition {
	border: 1px solid #1c81e5;
	border-radius: 2px;
	color: #1c81e5 !important;
	display: flex;
		align-items: center;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.2;
	padding: 14px 28px 17px 24px;
	text-align: left;
	transition: .3s;
}
.page_transition a.btn_transition::before {
	content: "\f0a9";
	display: inline-block;
	font-family: FontAwesome;
	margin: 4px 8px 0 0;
}
.page_transition a:hover.btn_transition {
	background-color: #1c81e5;
	color: #fff !important;
	text-decoration: none !important;
}
/* ボタンが1つの場合 */
.page_transition.one_column {
	justify-content: center;
}
.page_transition.one_column > div {
	width: auto;
}
.page_transition.one_column a.btn_transition {
	display: inline-flex;
		justify-content: center;
	min-width: 200px;
}