@charset "UTF-8";
html{
	font-size: 10px;
	font-family: 'ヒラギノUD角ゴ W3 JIS2004', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	scroll-behavior: smooth;
	
	*{
		color: #4D4D4D;
	}
}

body {
	font-size: 1.6rem;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	min-height: 100vh;
}

body *{
	box-sizing: border-box;
}

a{
	text-decoration: none;
}

h1,h2,h3{
	margin: 0;
	padding: 0;
}
/*** 表示設定 ***/
.pc_hidden{
	display: none !important;
}
.phone_hidden{
	display: block;
}

.text_right{
	text-align: right;
}
/********************************************************
ヘッダー
*********************************************************/
#main_header{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
	background-color: #FFFFFF;
}
#header_menu_area{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 1200px;
	margin: 0 auto;
}

.header_logo_block{
	float: left;
	
	img{
		vertical-align: bottom;
	}
}

.header_title_block{
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
	font-weight: 600;
	color: #6D6D6D;
	margin-right: 160px;
	vertical-align:bottom;
	
	h1{
		font-size: 2.3rem;
	}
	div{
		font-size: 1.4rem;
	}
}

.header_menu_block{
	font-size: 1.2rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.header_menu_block >a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100%;
	padding-top: 6px;
	font-size: 1.2rem;
	font-weight: 600;
	color: white;
	
	&:hover{
		opacity: 0.6;
	}
	&:visited{
		color: white;
	}
	
	&:first-child{
		background-color: #DE0505;
	}
	&:nth-child(2){
		background-color: #5CB5AA;
	}
	&:nth-child(3){
		background-color: #E77400;
	}
}

.header_under_line{
	clear: both;
	width: 100%;
	height: 4px;
	background-color: #DE0505;
}


/***　ハンバーガーナビメニュー ***/
nav.phone_header_btn {
	width: 64px;
	height: 100%;
	transition: all 0.6s;
	color: #000;
	position: relative;
	z-index: 99;
}
nav.phone_header_btn ul {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	width: calc(100% + 300px);
	margin: 4px 0 0 -300px;
	padding: 60px 0 60px 0;
	background-color: white;
	z-index: 99998;
	box-shadow: -2px 2px 3px 0px rgba(222, 222, 222, 1);
	border-radius: 0 0 0 30px;
	transition: 0.5s;
}

/* このクラスを、jQueryで付与・削除する */
nav.phone_header_btn.active ul{
	visibility: visible;
	opacity: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
nav.phone_header_btn ul li {
	position: relative;
	font-size: 1.6rem;
	font-weight: 600;
	list-style-type: none;
	padding: 15px 10% 15px 10%;
	width: 100%;
	border-bottom: 1px solid #DFDFDF;
	border-image: linear-gradient(to right, #FFF 10%, #DFDFDF 10%, #DFDFDF 90%,#FFF 90%);
	border-image-slice: 1;
	box-sizing: border-box;
}
/* 最初のライン設定 */
nav.phone_header_btn ul li:first-child {
	border-top: 1px solid #DFDFDF;
	border-image: linear-gradient(to right, #FFF 10%, #DFDFDF 10%, #DFDFDF 90%,#FFF 90%);
	border-image-slice: 1;
}
/* 最終ライン設定 */
nav.phone_header_btn ul li:last-child {
}

nav.phone_header_btn ul li:hover{
	background-color: #BFBFBF;
	
	a,label{
		color:#fff;
	}

	label::before{
		color:#FFF;
		border-color: #FFF;
	}
}

nav.phone_header_btn ul li a {
	display: block;
	color: #6D6D6D;
	/*padding: 10px 0;*/
	text-decoration: none;
}


.navToggle {
	display: block;
	position: relative;
	cursor: pointer;
	text-align: center;
	width: 100%;
	height: 100%;
}
.navToggle span {
	display: block;
	position: absolute;
	/* .navToggleに対して */
	width: 34px;
	border-bottom: solid 3px #DE0505;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	left: 16px;
}
.navToggle span:nth-child(1) {
	top: 20px;
}
.navToggle span:nth-child(2) {
	top: 30px;
}
.navToggle span:nth-child(3) {
	top: 40px;
}

/***　メニュータップ後のアクション　***/
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
	top: 30px;
	left: 16px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
	top: 30px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*****************************************************************/



/***　アコーディオンメニュー ***/
.menu_sub_toggle {
	display: none;
}
.menu_sub_Label{
	display: block;
	width: 100%;
	color: #6D6D6D;
	cursor: pointer;
	
	&::before{		/*タイトル横*/
		content: "＋";
		display: flex;
		justify-content: center;
		align-items: center;
		color: #6D6D6D;
		width: 1.8rem;
		height: 1.8rem;
		border: solid 1px #6D6D6D;
		border-radius: 50%;
		position: absolute;
		top: 12px;
		right: 20px;
	}
}
.menu_sub_content {
	max-height: 0;
	font-size: 1.5rem;
	font-weight: 300;
	transition: all 1s ease-out;
	overflow: hidden;
}
.menu_sub_toggle:checked + .menu_sub_Label + .menu_sub_content {	/*開閉時*/
	max-height: 100vh;
}
.menu_sub_toggle:checked + .menu_sub_Label::before{
	content: "-";
}
div.menu_sub_content >div >a{
	padding: 8px 0 8px 12px !important;
	
	&:hover{
		color: #6D6D6D !important;
		background-color: #F0F0F0;
	}
}
div.menu_sub_content >div:first-child{
	padding-top: 4px;
}
/*****************************************************************/


/*パンくず*/
.breadcrumb_block{
	box-shadow: 0px 3px 6px rgba(222, 222, 222, 1);
	
	div{
		width: 1100px;
		margin: 0 auto;
		padding: 21px 0 7px 0;
		font-size: 1.2rem;
		color: #6D6D6D;
	}
	a{
		color: #6D6D6D;
	}
}







/********************************************************
フッター
*********************************************************/
#main_footer{
	background-color: #6D6D6D;
	padding: 20px 0;
	margin-top: 80px;
}

.footer_block{
	width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer_company{
	font-size: 1.6rem;
	font-weight: 600;
	color: #FFFFFF;
}
.footer_policy a{
	font-size: 1.2rem;
	color: #FFFFFF;

	&:visited{
		color: #FFFFFF;
	}

	&:hover{
		opacity: 0.7;
	}
}




/********************************************************
To top
*********************************************************/
#totop{
	position: fixed;
	bottom: 50px;
	right: 50px;
	
	&:hover{
		opacity: 0.7;
		cursor: pointer;
	}
}

















/********************************************************
メインコンテンツ
*********************************************************/
#main_contents{
	
}
.index_top_block{
	width: 1300px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin: 0 auto;
	position: relative;
}

/*インデックスムービングブロック*/
.index_moving_block{
	width: 1300px;
	background-color: #DE0505;
	animation: widthchange 1s 0.5s ease-in-out both;
	z-index: 2;
	text-align: center;
}
@keyframes widthchange{
	0% {
		width: 1300px;
	}
	100% {
		width: 100%;
	}
}
.index_top_main{
	position: relative;
	opacity: 0;
	width: 0;
	z-index: 1;
	writing-mode: vertical-rl;
	animation: fadeIn 1s 0.5s ease-in-out both;
}
@keyframes fadeIn{
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 100%;
	}
}
.index_moving_title{
	color: #FFFFFF;
	font-size: 3.4rem;
	font-weight: 600;
	margin-top: 36px;
	padding-bottom: 15px;
	border-bottom: 4px solid;
	border-image: linear-gradient(to right, transparent 46%, #FFF 46%, #FFF 54%,transparent 54%);
	border-image-slice: 1;
}
.index_moving_text{
	color: #FFFFFF;
	font-size: 1.6rem;
	font-weight: 600;
	margin-top: 15px;
}
.index_moving_paper{
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0 20px;
	padding: 30px 0;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	z-index: 3;
	animation: fadeOut 1s 0.5s ease-in-out both;
	
	div:first-child{
		display: flex;
		align-items: flex-end;
	}
}
@keyframes fadeOut{
	0% {
		margin-right: 0;
		opacity: 1;
	}
	80% {
		margin-right: 76%;
		opacity: 0;
	}
	100% {
		margin-right: 100%;
		opacity: 0;
		display: none;
	}
}

/*インデックスヘルプ*/
.index_top_help{
	background-color: #DE0505;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 8px 120px 8px 18px;
	writing-mode: horizontal-tb;
	transform: translateY(-24px);
	opacity: 0;
	border-radius: 5px;
	animation: help_slidedown 1s 0.5s ease-in-out both;
	vertical-align: middle;
	cursor: pointer;
	
	img{
		margin-right: 8px;
		vertical-align: middle;
	}
	
}
.modal_title{
	color: #FFF !important;
	font-size: 1.4rem;
	font-weight: 600;
}
@keyframes help_slidedown{
	0% {
		opacity: 0;
		transform: translateY(-24px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.helpmessage_block{
	display: none;
	position: fixed;
	width: 680px;
	padding: 12px 20px;
	top: 50%; /* 縦方向の中央に配置 */
	left: 50%; /* 横方向の中央に配置 */
	transform: translate(-50%, -50%); /* 完全に中央に配置するための補正 */
	z-index: 1000;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 600;
	background-color: #DE0505;
	border-radius: 5px;
	
	img{
		margin-right: 8px;
		margin-bottom: 4px;
		vertical-align: middle;
	}
	
	video{
		display: block;
		width: 100%;
		margin: 6px auto;
	}
	
}
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒色 */
	z-index: 999; /* モーダルウィンドウよりも前面に表示 */
}

.display_block{
	display: block;
}
#closeModal{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 2.2rem;
	color: #DE0505;
	background-color: white;
	top: 14px;
	right: 20px;
	cursor: pointer;
}


/*
.helpmessage_block{
	display: none;
	font-size: 1.6rem;
	font-weight: 300;
	color: #6D6D6D;
	width: 300px;
	margin-top: 6px;
	padding: 18px 8px 12px 21px;
	background-color: #FFFFFF;
	border-radius: 5px;
}
.index_top_help.help_message{
	right: 96px;
	padding: 8px 18px 12px 18px;
}
.index_top_help.help_message div.helpmessage_block{
	display: block;
}
*/

/*インデックスセレクトブロック*/
.index_select_block{
	width: 1108px;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 50px;
}
.index_select_category{
	display: block;
	font-size: 1.6rem;
	font-weight: 600;
	color: #6D6D6D;
	padding: 5px 0 5px 12px;
	border-radius: 5px 5px 0px 0px;
}
.index_select_intoggle{
	color: #FFFFFF;
	background-color: #E77400;
}
.index_select_outtoggle{
	color: #FFFFFF;
	background-color: #72A1C7;
}
.select_in{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 15px 0 28px 0;
	border-top: solid 1px #E77400;
	
	a{
		color: #6D6D6D;
		font-size: 1.1rem;
		font-weight: 600;
		line-height: 120%;
	}
	img{
		margin-bottom: 4px;
	}
	
	div{
		width: 170px;
		height: 111px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 3px;
		border: solid 1px #E77400;
		border-radius: 5px;
		text-align: center;
	}
	div:hover{
		background-color: #FFF0E1;
	}
}
.select_out{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 15px 0 28px 0;
	border-top: solid 1px #72A1C7;

	a{
		color: #6D6D6D;
		font-size: 1.1rem;
		font-weight: 600;
		line-height: 120%;
	}
	img{
		margin-bottom: 4px;
	}

	div{
		width: 144px;
		height: 111px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 3px;
		border: solid 1px #72A1C7;
		border-radius: 5px;
		text-align: center;
	}
	div:hover{
		background-color: #E8F4FD;
	}
}

.index_procedure_block{
	width: 1108px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	div{
		position: relative;
	}
	div:hover{
		opacity: 0.7;
	}
	img{
		vertical-align: bottom;
	}
	p{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding-top: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.5rem;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
	}
}


/********************************************************
扶養に入れたいとき
*********************************************************/
.in_category{
	width: 1108px;
	margin: 0 auto;
}
.in_title{
	padding: 26px 0;
	background-color: #E77400;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 600;
	color: #FFFFFF;
}
.in_item{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 24px;
	
	div{
		width: 170px;
		height: 116px;
		border: solid 1px #E77400;
		border-radius: 5px;
	}
	img{
		margin-bottom: 8px;
	}
}
.in_item div a{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 120%;
	color: #6D6D6D;
	padding-top: 3px;
	
	img{
		vertical-align: bottom;
	}

	&:hover{
		border-radius: 5px;
		background-color: #FFF0E1;
	}
}

.in_item_block{
	width: 1108px;
	margin: 0 auto;
	margin-top: 140px;

	*{
		color: #373737;
	}
}
.in_item_title{
	font-size: 2rem;
	font-weight: 600;
	color: #FFFFFF;
	text-align: center;
	padding: 11px 0;
	background-color: #E77400;
}
.in_get_flow_text{
	margin-top: 34px;
	margin-bottom: 34px;
	text-align: center;
}
.in_item_chartmap{
	box-shadow: 0px 3px 6px #E9E9E9;
	margin-bottom: 65px;

	img{
		vertical-align: bottom;
	}
}

.chart_result_block{
	width: 750px;
	margin: 0 auto;
}
label.chart_result{
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 10px 0;
	margin: 15px 0;
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
	border: solid 3px;
	border-radius: 10px;
	cursor: pointer;
	box-sizing: border-box;
	box-shadow: 0px 2px 3px #00000029;
}

input.chart_sub_toggle{
	display: none;
}
.chart_sub_content {
	max-height: 0;
	opacity: 0;
	font-size: 1.5rem;
	font-weight: 300;
	overflow: hidden;
	transition: all 0.2s ease-out;
}
.chart_sub_toggle:checked + .chart_result + .chart_sub_content {
	/*開閉時*/
	max-height: 100%;
	opacity: 1;
}
label.chart_result span{
	display: inline-block;
	color: #FFFFFF;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	text-align: center;
	margin: 0 2px;
}
.chart_color_A{
	color: #2EA7E0;
	border-color: #2EA7E0;
	fill: #2EA7E0;
	
	span{
		background-color: #2EA7E0;
	}
	label&:hover{
		background-color: #2EA7E029;
	}
}
.chart_color_B{
	color: #8FB01F;
	border-color: #8FB01F;
	fill: #8FB01F;

	span{
		background-color: #8FB01F;
	}
	label&:hover{
		background-color: #8FB01F29;
	}
}
.chart_color_C{
	color: #E4427F;
	border-color: #E4427F;
	fill: #E4427F;

	span{
		background-color: #E4427F;
	}
	label&:hover{
		background-color: #E4427F29;
	}
}
.chart_color_D{
	color: #9056C9;
	border-color: #9056C9;
	fill: #9056C9;

	span{
		background-color: #9056C9;
	}
	label&:hover{
		background-color: #9056C929;
	}
}
.chart_color_E{
	color: #D9A62F;
	border-color: #D9A62F;
	fill: #D9A62F;

	span{
		background-color: #D9A62F;
	}
	label&:hover{
		background-color: #D9A62F29;
	}
}
.chart_color_F{
	color: #00A43D;
	border-color: #00A43D;
	fill: #00A43D;

	span{
		background-color: #00A43D;
	}
	label&:hover{
		background-color: #00A43D29;
	}
}
.chart_color_G{
	color: #3367A3;
	border-color: #3367A3;
	fill: #3367A3;

	span{
		background-color: #3367A3;
	}
	label&:hover{
		background-color: #3367A329;
	}
}
.chart_color_H{
	color: #EB615C;
	border-color: #EB615C;
	fill: #EB615C;

	span{
		background-color: #EB615C;
	}
	label&:hover{
		background-color: #EB615C29;
	}
}

.side_marker_title{
	border-left: solid 8px;
	padding-left: 8px;
	font-size: 2rem;
	font-weight: 600;
	margin: 26px 0;
}
.color_orange{
	border-color: #E77400;
}
.chart_back_color_area{
	padding: 22px 15px;
	margin-bottom: 32px;
	
	p{
		align-items: baseline;
		font-size: 1.8rem;
		font-weight: 600;
	}
	img{
		vertical-align: top;
		align-items: center;
		margin-right: 5px;
	}
}
.backcolor_A{
	background-color: #2EA7E01A;
}
.backcolor_B{
	background-color: #8FB01F1A;
}
.backcolor_C{
	background-color: #E4427F1A;
}
.backcolor_D{
	background-color: #9056C91A;
}
.backcolor_E{
	background-color: #D9A62F1A;
}
.backcolor_F{
	background-color: #00A43D1A;
}
.backcolor_G{
	background-color: #3367A31A;
}
.backcolor_H{
	background-color: #EB615C1A;
}

.text_underline{
	text-decoration: underline;
}
.text_lead{
	font-size: 1.4rem;
	margin-bottom: 18px;
}
.lead_bold{
	display: inline-block;
	margin: 14px 0 8px 0;
}
.bold{
	font-weight: 600;
}
.text_green{
	color: #408010;
}


.separat_line{
	width: 100%;
	height: 1px;
	background-color: #707070;
	margin: 25px 0;
}


.attention_block{
	color: #373737;
	font-size: 1.8rem;
	font-weight: 600;
	text-align: center;
	vertical-align: center;
	
	img{
		vertical-align: bottom;
		margin-right: 6px;
		margin-bottom: 4px;
	}
}

.arrow_block{
	width: 100%;
	padding: 14px 0;
	text-align: center;
	
	span{
		display: inline-block;
		width: 15px;
		height: 15px;
		border: 2px solid;
		border-color:  transparent transparent #373737 #373737;
		transform: rotate(-45deg);
	}
}
.form_block{
	width: 360px;
	padding: 10px 0;
	margin: 0 auto;
	margin-bottom: 46px;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
	border: 2px solid;
	border-radius: 5px;
	box-shadow: 0px 3px 6px #00000029;
	
	&:hover{
		filter: brightness(1.3);
	}
}

.submission_block{
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
}
.submission_white_box{
	width: 90%;
	padding: 16px;
	margin: 10px auto;
	background-color: #FFFFFF;
}
.submission_text{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 1.6rem;
	font-weight: 300;
	margin: 12px 0;
	
	div:first-child{
		width: 170px;
		margin: 0 14px;
		text-wrap: nowrap;
		flex-shrink: 0;
		border: solid 1px white;
	}
}
.last_margin{
	margin-bottom: 130px;
}



.before_chart_block{
	width: 360px;
	margin: 0 auto;
	margin-bottom: 32px;
	text-align: center;
}
.before_chart_title{
	font-size: 2.4rem;
	font-weight: 600;
	margin-bottom: 18px;
}
.before_chart_attention_block{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px 0;
	border: 2px solid #DE0505;
	border-radius: 5px;
	box-shadow: 0px 3px 6px #00000029;
	
	&:hover{
		filter: brightness(1.3);
		background-color: #DE050525;
	}
}
.no_hover:hover{
	filter: brightness(1.0);
	background-color: #FFF;
}
.before_chart_text{
	font-size: 1.8rem;
	font-weight: 600;
	color: #DE0505;
	text-align: center;
}

.applicable_block{
	position: relative;
	background-color: #FFE92445;
	padding: 32px 16px 18px 16px;
	margin-bottom: 32px;
}
.applicable_attention{
	position: absolute;
	top: -14px;
	left: 16px;
	padding: 4px 15px;
	background-color: #DE0505;
	font-size: 1.8rem;
	font-weight: 600;
	color: white;
	vertical-align: bottom;
	
	img{
		vertical-align: bottom;
		margin-right: 4px;
		margin-bottom: 2px;
	}
}
.applicable_title{
	font-size: 1.8rem;
	font-weight: 600;
	color: #DE0505;
	margin: 4px 0;
}
.applicable_text{
	font-size: 1.4rem;
	color: #DE0505;
	margin-bottom: 6px;
}

.chart_marriage_text{
	font-size: 1.6rem;
	margin-bottom: 64px;
}

.text_14{
	font-size: 1.4rem;
}
span.text_indent{
	display: inline-block;
	text-indent: -1em;
	margin-left: 1em;
}
.other_form_block{
	width: 540px;
	padding: 10px 0;
	margin: 0 auto;
	margin-bottom: 46px;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
	border: 2px solid;
	border-radius: 5px;
	box-shadow: 0px 3px 6px #00000029;

	&:hover{
		filter: brightness(1.3);
	}
}
.in_other_attention{
	margin-top: 40px;
}
.chart_in_other_text{
	width: 520px;
	margin: 0 auto;
	font-size: 1.8rem;

	span{
		font-weight: 600;
		color: #DE0505;
	}
}
.chart_in_other_text ul{
	padding-left: 10px;
}
.chart_in_other_text ul li{
	font-weight: 600;
	list-style-type: none; /*点を非表示*/
	position: relative; /*基準位置*/
	padding-left: 0.6em;
	margin: 12px 0;
	
	&:before {
		border-radius: 50%; /*丸くする*/
		width: 1.4rem; /*点の幅*/
		height: 1.4rem; /*点の高さ*/
		display: block;
		position: absolute; /*絶対配置*/
		left: -0.8rem; /*点の位置*/
		top: 0.4rem; /*点の位置*/
		content: "";
		background: #E77400; /*点の色*/
	}
	a {
		text-decoration: underline;
	}
	&:hover{
		opacity: 0.7;
	}
}
.chart_in_abroad_text{
	font-size: 1.6rem;
	margin-top: 60px;
	margin-bottom: 30px;

	span{
		font-weight: 600;
		color: #DE0505;
	}
}

a.anchor{
	display: block;
	padding-top: 120px;
	margin-top: -120px;
}

svg{
	width: 14px;
	height: 9px;
	margin-left: 12px;
}

.chart_out_other_text{
	width: 520px;
	margin: 0 auto;
	font-size: 1.8rem;

	span{
		font-weight: 600;
		color: #DE0505;
	}
}
.chart_out_other_text ul{
	padding-left: 10px;
}
.chart_out_other_text ul li{
	font-weight: 600;
	list-style-type: none; /*点を非表示*/
	position: relative; /*基準位置*/
	padding-left: 0.6em;
	margin: 12px 0;

	&:before {
		border-radius: 50%; /*丸くする*/
		width: 1.4rem; /*点の幅*/
		height: 1.4rem; /*点の高さ*/
		display: block;
		position: absolute; /*絶対配置*/
		left: -0.8rem; /*点の位置*/
		top: 0.4rem; /*点の位置*/
		content: "";
		background: #E77400; /*点の色*/
	}
}
/********************************************************
家族の扶養を外したいとき
*********************************************************/
.out_category{
	width: 1108px;
	margin: 0 auto;
}
.out_title{
	padding: 26px 0;
	background-color: #72A1C7;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 600;
	color: #FFFFFF;
}
.out_item{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 24px;

	div{
		width: 144px;
		height: 116px;
		border: solid 1px #72A1C7;
		border-radius: 5px;
	}
	img{
		margin-bottom: 8px;
	}
}
.out_item div a{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 120%;
	color: #6D6D6D;
	padding-top: 3px;

	img{
		vertical-align: bottom;
	}

	&:hover{
		border-radius: 5px;
		background-color: #E8F4FD;
	}
}


.out_item_block{
	width: 1108px;
	margin: 0 auto;
	margin-top: 140px;

	*{
		color: #373737;
	}
}
.out_item_title{
	font-size: 2rem;
	font-weight: 600;
	color: #FFFFFF;
	text-align: center;
	padding: 11px 0;
	margin-bottom: 34px;
	background-color: #72A1C7;
}


.chart_sub_content_out {
	font-size: 1.5rem;
	font-weight: 300;
	overflow: hidden;
}
.chart_color_out{
	color: #72A1C7;
	border-color: #72A1C7;

	span{
		background-color: #2EA7E01A;
	}
}
.text_red{
	color: #DE0505;
}
.backcolor_out{
	background-color: #72A1C71A;
}



/********************************************************
手続きページ
*********************************************************/

.main_contents_block{
	width: 1108px;
	margin: 0 auto;
	line-height: 180%;
}
div.procedure_block{
	line-height: 180%;
	font-size: 1.8rem;
}
h1.procedure_title_block{
	display: block;
	width: 100%;
	padding: 27px 0;
	font-size: 2.4rem;
	font-weight: 600;
	color: white;
	text-align: center;
}

.procedure_attention{
	font-size: 1.6rem;
	margin: 52px 0;
	vertical-align: baseline;
	
	img{
		float: left;
		vertical-align: bottom;
	}
}

.procedure_sidebar_title{
	font-size: 2.4rem;
	font-weight: 600;
	padding-left: 7px;
	margin-bottom: 32px;
	border-left: solid 11px;
}

span.procedure_dragon{
	font-weight: 600;
	color: #005C83;
}

h2.procedure_subtitle_block{
	display: block;
	width: 100%;
	padding: 11px 0;
	font-size: 2rem;
	font-weight: 600;
	color: white;
	text-align: center;
	margin: 0 auto;
	margin-top: 110px;
	margin-bottom: 32px;
}

/*テーブルボーダー調整*/
table,
th,
td {
	border: 1px solid #373737;
}
table{
	width: 100%;
	border-spacing: 0;
	overflow-x: auto;
	
	margin-bottom: 27px;
}
tbody {
	white-space: nowrap;
}
th{
	white-space: nowrap;
}
th,
td {
	padding: 8px 15px;
	border-top-width: 0;
	border-left-width: 0;
	word-break:break-word;
}
td:nth-child(2){
	text-align: center;
}
th:last-child,
td:last-child {
	border-right-width: 0;
}
tbody tr:last-child th,
tbody tr:last-child td {
	border-bottom-width: 0;
}


.procedure_notes{
	font-size: 1.4rem;
	line-height: 180%;
	margin-top: 10px;
}
.procedure_indent{
	text-indent: -1em;
	margin-left: 1em;
}
.margin_top_long{
	margin-top: 110px;
}
h2.margin_top_short,
.margin_top_short{
	margin-top: 58px;
}
.margin_top_veryshort{
	margin-top: 28px;
}
.procedure_link_block{
	margin-top: 30px;
}
.procedure_main_link{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	
	div:first-child{
		margin-right: 24px;
	}
	a{
		color: blue;
		text-decoration: underline;
	}
}

.procedure_link{
	margin-top: 12px;
	
	a{
		color: blue;
		text-decoration: underline;
	}
}

.procedure_last_notes{
	line-height: 200%;
	padding: 32px 8px;
	margin-top: 130px;
	text-align: center;
	background-color: #005C831A;
}

.procedure_notes_flex_block{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-left: 1em;
	text-indent: 0;
	
	div:first-child{
		text-indent: -1em;
		white-space: nowrap;
		padding-left: 1em;
	}
	div:last-child{
		width: 100%;
		padding-left: 1em;
	}
}

.address_block_margin{
	margin-top: 18px;
}

/*住所変更　色設定*/
.text_address_color{
	color: #215787;
}
.back_address_color{
	background-color: #215787;
}
.side_address_color{
	border-color: #215787;
}

table.table_address_color{
	thead{
		background-color: #005C832B;
	}
	th{
		color: #215787;
	}
}

/*給付金　色設定*/
.text_benefits_color{
	color: #C13932;
}
.back_benefits_color{
	background-color: #C13932;
}
.side_benefits_color{
	border-color: #C13932;
}

/*マイナ保険証　色設定*/
.text_mynumber_color{
	color: #9C7399;
}
.back_mynumber_color{
	background-color: #9C7399;
}
.side_mynumber_color{
	border-color: #9C7399;
}

/*お問い合わせ　色設定*/
.text_contact_color{
	color: #E77400;
}
.back_contact_color{
	background-color: #E77400;
}
.side_contact_color{
	border-color: #E77400;
}

/*よくある質問　色設定*/
.text_faq_color{
	color: #5CB5AA;
}
.back_faq_color{
	background-color: #5CB5AA;
}
.side_faq_color{
	border-color: #5CB5AA;
}



.contact_intro{
	font-size: 2rem;
	text-align: center;
	margin-top: 160px;
	margin-bottom: 68px;
}
.faq_link_box_block{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	margin-top: 60px;
}
.faq_link_box{
	width: 360px;
	height: 86px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border: solid 2px #5CB5AA;
	border-radius: 5px;
	font-size: 1.8rem;
	font-weight: 600;
	color: #5CB5AA;
	text-align: center;
	margin-right: 15px;
	
	&:hover{
		background-color: #5CB5AA22;
	}
}

span.my_q{
	font-size: 2rem;
	display: inline-block;
	text-align: center;
	width: 38px;
	height: 38px;
	margin-right: 14px;
	color: white;
	border-radius: 50%;
	background-color: #2EA7E0;
	padding-top: 5px;
}

span.my_a{
	font-size: 2rem;
	display: inline-block;
	text-align: center;
	width: 38px;
	height: 38px;
	margin-right: 14px;
	margin-bottom: 12px;
	color: white;
	border-radius: 50%;
	background-color: #E4427F;
	padding-top: 5px;
}
.qa_answer{
	font-size: 2rem;
}
.qa_text{
	width: calc(100% - 52px);
	margin-left: 52px;
}
.qa_last_block{
	margin-bottom: 120px;
}

/*マイナ保険証*/
.mynumber_attention{
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	margin-top: 48px;
}

.mynumber_card_block{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	width: 800px;
	margin: 0 auto;
	margin-top: 44px;
	
	div:hover{
		opacity: 0.7;
	}
}
.have_card{
	color: white;
	font-weight: 600;
	text-align: center;
	background-color: #8FB01F;
	border-radius: 3px;
	padding: 11px 80px;
}
.mynumber_card_about{
	font-size: 1.8rem;
}
.side_have_card_color{
	border-color: #8FB01F;
}
.have_card_color{
	color: #8FB01F;
}
.have_card_text{
	font-size: 1.6rem;
	text-indent: -1em;
	padding-left: 1em;
	margin: 18px 0;
}
.no_card{
	color: white;
	font-weight: 600;
	text-align: center;
	background-color: #DE0505;
	border-radius: 3px;
	padding: 28px 40px;
}
.no_card_notes{
	font-size: 1.4rem;
	text-indent: -3em;
	padding-left: 3em;
	line-height: 160%;
	margin-top: 18px;
}
.side_no_card_color{
	border-color: #DE0505;
}
.no_card_color{
	color: #DE0505;
}
.mynumber_list_block{
	width: 800px;
	margin: 0 auto;
	margin-top: 38px;
	background-color: #9C73991A;
	padding: 35px 68px;
	
	li{
		list-style: none;
		margin: 10px;
	}
}

.mynumber_step_block{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 44px;
}
.mynumber_step{
	width: 96px;
	height: 96px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #9C7399;
	background-color: #9C739933;
	border-radius: 50%;
	font-size: 1.3rem;
	margin-right: 24px;
}
.step_number{
	display: inline-block;
	vertical-align: middle;
	color: #9C7399;
	font-size: 3rem;
	margin-left: 4px;
}
.step_red_bold{
	font-size: 1.8rem;
	color: #DE0505;
	font-weight: 600;
}
.step_bold{
	font-size: 1.8rem;
	font-weight: 600;
}
.step_text{
	width: calc(100% - 120px);
	margin-left: 120px;
}


.mynumber_line{
	height: 1px;
	background-color: #707070;
	margin: 32px 0;
}


a.jump_anchor{
	display: block;
	padding-top: 20px;
	margin-top: -20px;
}
.list_link{
	display: block;
	color: #9C7399;
	width: 100%;
	height: 100%;
	
	&:hover{
		filter: brightness(0.6);
	}
}

.procedure_notes_indent{
	text-indent: -3em;
	padding-left: 3em;
}

.benefits_attention_block{
	text-align: center;
	font-weight: 600;
	text-indent: -1.8em;
	padding-left: 2em;
}

/********************************************************
*********************************************************
スマホ対応
*********************************************************
*********************************************************/
@media (any-hover: none){
	/*** 表示設定 ***/
	.pc_hidden{
		display: block !important;
	}
	.phone_hidden{
		display: none;
	}
	
	/********************************************************
	ヘッダー
	*********************************************************/
	#main_header{
		box-shadow: 0px 3px 6px 0px rgba(200,200,200,0.3)
	}
	#header_menu_area{
		width: 100%;
	}
	.header_logo_block img{
		height: 44px;
		margin-left: 6px;
	}
	.header_title_block{
		margin-right: 8px;
		margin-bottom: 6px;
		
		h1{
			font-size: 1.1rem;
			line-height: 140%;
		}
	}
	.header_menu_block >a{
		position: fixed;
		font-size: 1.4rem;
		font-weight: 600;
		width: 50%;
		height: auto;
		padding: 18px 0;
		font-size: 1.4rem;
		bottom: 0;

		&:nth-child(1){
			display: none;
		}
		&:nth-child(2){
			left: 0;
		}
		&:nth-child(3){
			left: 50%;
		}
		
		&:hover{
			opacity: 1;
		}
	}
	.header_under_line{
		clear: both;
		width: 100%;
		height: 4px;
		background-color: #DE0505;
	}
	
	/***　ハンバーガーナビメニュー ***/
	nav.phone_header_btn {
		width: 44px;
	}
	nav.phone_header_btn ul {
		width: 100vw;
		margin: 4px 0 0 calc(-100vw + 100%);
		box-shadow: none;
		border-radius: 0;
	}
	nav.phone_header_btn ul::after{
		content: "";
		display: block;
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		background-color: white;
		z-index: -1;
	}
	.navToggle {
		background-color: #DE0505;
	}
	.navToggle span {
		width: 30px;
		border-bottom: solid 3px #FFFFFF;
		left: 7px;
	}
	.navToggle span:nth-child(1) {
		top: 11px;
	}
	.navToggle span:nth-child(2) {
		top: 21px;
	}
	.navToggle span:nth-child(3) {
		top: 31px;
	}
	/***　メニュータップ後のアクション　***/
	.navToggle.active span:nth-child(1) {
		top: 21px;
		left: 7px;
	}
	/* 2番目と3番目のspanを45度に */
	.navToggle.active span:nth-child(2),
	.navToggle.active span:nth-child(3) {
		top: 21px;
	}
	nav.phone_header_btn ul li:hover{
		background-color: #FFFFFF;

		a,label{
			color:#6D6D6D;
		}

		label::before{
			color:#6D6D6D;
			border-color: #6D6D6D;
		}
	}
	

	div.breadcrumb_block div, div.breadcrumb_block a{
		font-size: 0.8rem !important;
		padding-top: 15px;
		padding-left: 2%;
	}
	/********************************************************
	フッター
	*********************************************************/
	#main_footer{
		/*position: fixed;
		z-index: 98;
		bottom: 0;*/
		width: 100%;
		padding: 0;
		margin-bottom: 57px;
	}

	.footer_block{
		width: 100%;
		line-height: 120%;
		display: block;
		text-align: center;
		padding: 12px 0 8px 0;
	}
	.footer_company{
		margin-bottom: 8px;
	}
	
	#totop{
		right: 6px;
		bottom: 65px;
		text-align: right;
		
		img{
			width: 78%;
		}
	}
	/********************************************************
	メインコンテンツ
	*********************************************************/
	#main_contents{
	}
	.index_top_block{
		width: 100%;
		display: block;
		overflow: hidden;
	}
	
	/*インデックスムービングブロック*/
	.index_moving_block{
		position: absolute;
		top: 0;
		width: 100%;
		animation: heightchange 1s 0.5s ease-in-out both;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	@keyframes heightchange{
		0% {
			height: 582px;
		}
		100% {
			height: 230px;
		}
	}
	.index_moving_title{
		font-size: 2.4rem;
		margin-top: 0;
		padding-bottom: 9px;
	}
	.index_moving_text{
		font-size: 1.4rem;
		margin-top: 9px;
	}
	.index_top_main{
		padding-top: 230px;
		width: 100%;
		animation: fadeIn2 1s 0.5s ease-in-out both;
		overflow: hidden;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	@keyframes fadeIn2{
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	.index_moving_paper{
		width: 160%;
		height: 80%;
		margin-left: -30%;
		margin-top: 10%;
		overflow: hidden;

		div:first-child{
			display: flex;
			align-items: flex-start;
		}
		div:nth-child(2){
			display: flex;
			align-items: flex-end;
		}
		img{
			transform: scale(0.8);
		}
	}

	/*インデックスヘルプ*/
	.index_top_help{
		font-size: 1.2rem;
		padding-right: 25px;
		transform: translateY(0px);
		animation: fadeIn2 1s 0.5s ease-in-out both;
	}
	.helpmessage_block{
		width: 94%;
	}
	
	
	
	
/*
	.helpmessage_block{
		display: none;
		font-size: 1.4rem;
		width: 100%;
	}
	.index_top_help.help_message{
		right: 0;
	}
*/
	
	
	/*インデックスセレクトブロック*/
	.index_select_block{
		width: 100%;
		margin-top: 44px;
		margin-bottom: 10px;
		position: relative;
	}

	.index_select_category{
		display: block;
		padding: 0 2%;
		margin: 0 auto;
	}
	.select_in{
		padding-right: 2%;
		padding-left: 2%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		border-top: none;
		margin-bottom: 10px;
		
		div{
			width: 28%;
			margin: 12px auto;
		}
	}
	.select_out{
		padding-right: 2%;
		padding-left: 2%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		border-top: none;
		
		div{
			width: 28%;
			margin: 12px auto;
		}
	}
	.nodisplay{
		visibility: hidden;
	}
	.index_procedure_block{
		width: 100%;
		flex-direction: column;
		
		div{
			width: 94%;
			margin: 12px auto;
		}
		img{
			width: 100%;
		}
	}
	
	
	
/********************************************************
扶養に入れたいとき
*********************************************************/
	
	.in_category{
		width: 100%;
	}
	.in_title{
		font-size: 2rem;
	}
	.in_item{
		width: 94%;
		margin: 0 auto;
		margin-top: 24px;
		display: flex;
		flex-wrap: wrap;;

		div{
			width: 109px;
			margin-bottom: 12px;
		}
	}
	
	.in_item_block{
		width: 96%;
		margin: 0 auto;
		margin-top: 100px;
	}

	.in_item_title{
		font-size: 1.8rem;
	}
	
	.in_item_chartmap{
		width: 100%;
		overflow: scroll;
	}

	.chart_result_block{
		width: 94%;
	}
	label.chart_result{
		font-size: 1.8rem;
	}
	.before_chart_block{
		width: 100%;
	}
	.form_block{
		width: 100%;
	}
	
	.side_marker_title{
		font-size: 1.8rem;
	}
	.submission_white_box{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.submission_text{
		display: block;
		
		div:first-child{
			width: 100%;
			margin: 0;
		}
	}
	
	
	
	.chart_in_other_text{
		width: 94%;
	}

/********************************************************
	家族の扶養を外したいとき
********************************************************/

	.out_category{
		width: 100%;
	}
	.out_title{
		font-size: 2rem;
	}
	.out_item{
		width: 94%;
		margin: 0 auto;
		margin-top: 24px;
		display: flex;
		flex-wrap: wrap;;

		div{
			width: 109px;
			margin-bottom: 12px;
			line-height: 100%;
		}
	}
	.chart_out_other_text{
		width: 94%;
	}

	.out_item_block{
		width: 96%;
		margin: 0 auto;
		margin-top: 100px;
	}

	.out_item_title{
		font-size: 1.8rem;
	}

	.last_margin{
		margin-bottom: 80px;
	}
/********************************************************
手続きページ
*********************************************************/

	.main_contents_block{
		width: 100%;
		box-sizing: border-box;
		
		>div{
			width: 94%;
			margin-left: 3%;
			box-sizing: border-box;
		}
	}
	.procedure_sidebar_title{
		font-size: 2rem;
	}

	.procedure_attention{
		line-height: 120%;
	}

	table{
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	
	div.address_table_block{
		width: 100%;
		overflow: auto;
		margin-left: 0;
		padding-left: 3%;
	}
	
	div.procedure_indent{
		text-indent: 0;
	}
	
	h2.procedure_subtitle_block{
		font-size: 1.8rem;
		width: 96%;
		padding: 4px;
	}
	
	.procedure_link{
		word-wrap: break-word;
	}
	
	.benefits_img img{
		width: 100%;
	}
	
	
	.contact_link_box_block{
		display: block;
		
		div{
			margin-bottom: 20px;
		}
	}
	div.procedure_notes_flex_block{
		display: block;
		margin-left: 0;
		
		div{
			margin-left: 0;
		}
		div:first-child{
			text-indent: -2em;
			padding-left: 2em;
			white-space: normal;
		}
		div:nth-child(2){
			visibility: hidden;
			padding-left: 2em;
			&:after{
				visibility: visible;
			content: " ⇓ ";
			}
		}
		div:last-child{
			padding-left: 2em;
			white-space: normal;
		}
	}
	svg{
		margin-left: 8px;
	}
	
	div.procedure_block{
		font-size: 1.6rem;
	}
	.procedure_last_notes{
		text-align: left;
	}
	
	.procedure_attention img{
		margin-right: 8px;
		margin-bottom: 24px;
	}

	div.in_get_flow_text{
		width: 75%;
		margin: 30px auto;
	}
	
	.procedure_main_link{
		display: block;
		word-wrap: break-word;
		
		div:first-child{
			font-weight: 600;
		}
	}

	.mynumber_card_block{
		display: block;
		
		div{
			margin: 25px auto;
		}
	}
	.have_card{
		padding: 11px 0px;
	}
	.no_card{
		padding: 25px 0px;
	}
	.mynumber_list_block{
		padding: 20px;
		
		ul{
			padding-left: 0;
		}
		li{
			text-indent: -1em;
			padding-left: 1em;
			margin: 15px 0px;
		}
	}
	.mynumber_step_block{
		display: block;
	}
	
	span.my_q,span.my_a{
		display: block;
		margin-right: 100%;
	}
	.qa_text{
		margin-left: 0;
		width: 100%;
	}
	.qa_last_block{
		margin-bottom: 0px;
	}
	
	.faq_link_box_block{
		display: block;
		
		a{
			display: block;
			margin: 24px 0px;
		}
	}
	
	
	
}/*スマホ対応閉じ*/