@charset "utf-8";
@import url('/vc/zara-kenpo/css/common_smart.css'); /* 共通クラス */
/*==================================================================================================

基本設定（480px以下）

==================================================================================================*/
/*
body設定など/vc/kenpo/css/common_smart.cssに共通属性セレクタとして設定
*/
/*########################################################################################

サイト全体枠

########################################################################################*/

/*########################################################################################

ヘッダー

########################################################################################*/
/*-----------------------------------------------------------------------------
■┓ヘッダー全体枠
┗┛
-----------------------------------------------------------------------------*/
.header_wrap .header_title {
	padding-left: 16px;
}
.header_wrap h1 a {
	font-size: 24px;
}
/*########################################################################################

サイトトップ（index.jsp用レイアウト）

########################################################################################*/
/*--------------
SP版サイトトップ用イメージ、キャッチコピー
----------------------------------------------------------*/
.top_catch_sp h1 span {
	font-size: 16px;
	font-size: 1.6rem;
		top: 8px;
		right: 8px;
}
/*-----------------------------------------------------------------------------
■┓各システムへリンク
┗┛
-----------------------------------------------------------------------------*/
section.sys_link ul {
		flex-flow: wrap;
	margin-left: -16px;
	padding: 0 16px;
	width: calc(100% + 32px);
}
section.sys_link ul li {
	font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;
	width: 100% ;
}
section.sys_link ul li img {
	display: none;
}
section.sys_link ul li a {
	background: #ffeaea;
	border-bottom: 1px solid rgba(0, 0, 0, .3);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
	color: #333;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 500;
	padding: 16px;
	position: relative;
	text-align: center;
	text-decoration: none;
}
section.sys_link ul li a:hover {
	opacity: .6;
}
section.sys_link ul li a::after {
	border-right: 3px solid #ff7f7f;
	border-bottom: 3px solid #ff7f7f;
	content: "";
	display: block;
	position: absolute;
		top: calc(50% - 4px);
		right: 10px;
	transform: rotate(-45deg);
	width: 6px;
	height: 6px;
}
section.sys_link ul li a.howto,
section.sys_link ul li a.application {
	display: none;
}
section.sys_link ul li a span {
	display: block;
}
/*-----------------------------------------------------------------------------
■┓インフォーメーションエリア
┗┛
-----------------------------------------------------------------------------*/
/*----------------------------
こんな時はどうする？のお知らせ枠
.wtd_info
----------------------------------------------------------*/
.situation_block {
	padding: 0;
}
.situation_block ul li div {
	font-size: 14px;
	font-size: 1.4rem;
	padding: 0 8px;
}

/*########################################################################################

セカンダリページ

########################################################################################*/
/*----------------------------
パンくずリスト
----------------------------------------------------------*/
nav#breadcrumbs{
	font-size: 10px;
	margin: 0 8px 16px 0;
}
nav#breadcrumbs a {
	padding: .3em 0 .3em .5em;
}
/*----------------------------
健保からのお知らせ
----------------------------------------------------------*/
#info_kenpo .icon_list span {
	font-size: 10px;
	font-size: 1.0rem;
	letter-spacing: 0;
	padding: 4px 8px;
}
/*----------------------------
こんな時はどうする？
----------------------------------------------------------*/
.wtd_menu section {
	height: auto;
}
.wtd_menu section h1 {
	width: 100%;
}
.wtd_menu section h1+div {
	width: 100%;
}
.wtd_menu section h1 a {
	border-bottom: none;
	border-left: 16px solid transparent;
		justify-content: flex-start;
	padding-left: 8px;
}
.wtd_menu section h1 a::before {
	border: 6px solid transparent;
	position: absolute;
		bottom: calc(50% - 6px);
		left: 4px;
}
.wtd_menu section ul {
	padding: 16px 24px;
}
.wtd_menu section ul::before {
	border: none;
}

/* classごとのカラー設定 */
/* 扶養家族が増ふえたとき（減ったとき） */
.wtd_menu section.wtd_menu_1 h1 a {
	border-left-color: #ffe8d1;
}
.wtd_menu section.wtd_menu_1 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #ffbf7f;
}
/* 保険証をなくしたとき */
.wtd_menu section.wtd_menu_2 h1 a {
	border-left-color: #ffff7f;
}
.wtd_menu section.wtd_menu_2 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #cc3;
}
/* 出産したとき */
.wtd_menu section.wtd_menu_3 h1 a {
	border-left-color: #bfff7f;
}
.wtd_menu section.wtd_menu_3 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #9c6;
}
/* 病気やケガをしたとき */
.wtd_menu section.wtd_menu_4 h1 a {
	border-left-color: #7fffbf;
}
.wtd_menu section.wtd_menu_4 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #3bd387;
}

/* 医療費が高額になったとき */
.wtd_menu section.wtd_menu_5 h1 a {
	border-left-color: #a3ffff;
}
.wtd_menu section.wtd_menu_5 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #3da9a9;
}

/* 病院で立て替え払いをしたとき */
.wtd_menu section.wtd_menu_6 h1 a {
	border-left-color: #99ccff;
}
.wtd_menu section.wtd_menu_6 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #3e76ae;
}

/* 退職後も当組合に加入したい */
.wtd_menu section.wtd_menu_7 h1 a {
	border-left-color: #adadff;
}
.wtd_menu section.wtd_menu_7 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #7f7fff;
}

/* 交通事故等にあったとき（第三者行為） */
.wtd_menu section.wtd_menu_8 h1 a {
	border-left-color: #d3a8ff;
}
.wtd_menu section.wtd_menu_8 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #bf7fff;
}

/* 雇用形態が変わったとき */
.wtd_menu section.wtd_menu_9 h1 a {
	border-left-color: #ffa8d3;
}
.wtd_menu section.wtd_menu_9 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #ff7fbf;
}

/* 健康診断のご案内 */
.wtd_menu section.wtd_menu_10 h1 a {
	border-left-color: #ffadad;
}
.wtd_menu section.wtd_menu_10 h1 a::before {
	border-bottom-color: transparent;
	border-left-color: #ff7f7f;
}

/*----------------------------
各種申請書
----------------------------------------------------------*/
/* 申請書提出先テーブル */
.submit_tbl th {
	display: none;
}
.submit_tbl td {
	padding: 0;
	display: block;
}
.submit_tbl td::before {
	background: #efefef;
	color: #000;
	content: attr(data-label);
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.5em;
	margin-bottom: 0.5em;
	padding: 3px 10px;
}
.submit_tbl td:nth-child(odd)::before {
	background: #444;
	color: #fff;
}
.submit_tbl td ol {
	margin: 10px;
}
.submit_tbl .submit_address {
	margin: 10px;
}
/*----------------------------
健保のしくみ
> 保険証としてのマイナンバーカード利用(guide_13.jsp)
----------------------------------------------------------*/
.mynumber .point_photo {
	margin-top: 1em;
}
.mynumber .side_photo {
	display: block;
}
.mynumber .mynum_contact_free .mynum_contact_tit,
.mynumber .mynum_contact_free2 .mynum_contact_tit,
.mynumber .link_box p.other_tel {
	font-size: 14px;
	font-size: 1.4rem;
}
.mynumber .mynum_contact_free .hour_tit:not(:first-of-type),
.mynumber .mynum_contact_free2 > div:not(:first-of-type) {
	margin-left: 0;
}

/*----------------------------
お問い合わせフォーム
----------------------------------------------------------*/
.name_width {
	width: 100%;
}
.name_width input {
	margin-right: 1em;
	width: calc(100% - 1em);
}
.tel_width input[type="text"],
.email_width input[type="text"] {
	width: 100%;
}
.email_conf1_width input[type="text"] {
	width: 100%;
}
.email_conf2_width input[type="text"] {
	width: calc(100% - 30px); /* @マーク分のwidthをマイナス */
}

/*########################################################################################

フッター

########################################################################################*/

/*----------------------------
ページのトップへ（#totop）
----------------------------------------------------------*/
.page_top a:hover { /* タップした時のhoverのカラーをリセット */
	background: #fff;
	opacity: 1;
}

/*########################################################################################

汎用クラス

########################################################################################*/
/*--------------
テーブルスタイル
----------------------------------------------------------*/
table.guide_tbl th,
table.guide_tbl td {
	display: block;
	width: 100%;
}
table.guide_tbl th {
	text-align: left;
}
table.guide_tbl th.title {
	display: none;
}
table.guide_tbl th div::before,
table.guide_tbl td div::before {
	color: #000;
	content: attr(data-label);
	display: block;
	font-weight: normal;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.3em;
	white-space: pre;
}
table.company_contact {
	border-left: 1px solid #ccc;
}
table.company_contact th,
table.company_contact td {
	display: block;
	width: 100%;
}
table.company_contact th {
	background: #202020;
	color: #fff;
}
table.provision_tbl td.provision_title {
	vertical-align: top;
}