@charset "utf-8";


/*PC・タブレット・スマホ共通設定*/
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定*/
/*---------------------------------------------------------------------------*/
html,body {min-height: 100%;}
body {
	/* margin: 100px; 
	padding-left: 100px;
	padding-right: 100px; */
	padding: 0% 4% 0% 4%;
	color: #666;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 14px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	/* -webkit-text-size-adjust: none; */
    -webkit-text-size-adjust: 100%;
	background: #faf9f9;	/*背景色（古いブラウザ用）*/
	/*background: linear-gradient(#25b1d9 50px, #fff 150px);
        /*トップページ以外の背景設定。画面の上から150pxまでが#25b1d9で、そこからすぐ#fffの白色に切り替える内容。*/
}
body#top {
/*background: linear-gradient(#ee1426 50px, #fff 450px);	トップページの背景設定。画面の上から450pxまでが#25b1d9で、そこからすぐ#fffの白色に切り替える内容。*/
background-color: #faf9f9;	/*トップページの背景設定。画面の上から450pxまでが#25b1d9で、そこからすぐ#fffの白色に切り替える内容。*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}


ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
	padding-left: 0px;
	padding-bottom: 0px;}


ol {padding-left: 40px;padding-bottom: 15px;}
/* img {border: none;max-width: 100%;height: auto;vertical-align: middle;} */
	img{
		border: none;
		height: 100%;
		vertical-align: middle; /* デフォルトはbottom */
		padding: 15px 10px;	 
		}
		/* ヘッダロゴ画像(UPのトップページ以外）　*/
		.logo-img{
			border: none;
			height: 60px;
			vertical-align: bottom;
			padding: 10px 20px;	
		}
		/*　お辞儀画像 */


table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
/* iframe {width: 100%;} */
/* iframe {padding-left: 40px;} mordal画面がずれるので削除*/

/*リンク（全般）設定*/
/*---------------------------------------------------------------------------*/
a {
	color: #666;	/*リンクテキストの色*/
}
a:hover {
	color: #25b1d9;	/*マウスオン時の文字色*/
}

/*コンテナー（ホームページを囲む一番外側のブロック*/
/*---------------------------------------------------------------------------*/
#container {
	width: 90%;			/*ブロックの幅を画面の80%にする設定。*/
	max-width: 1000px;	/*上のwidth指定の追加設定。幅1000pxを最大幅に設定し、それ以上広げない。*/
	margin: 0 auto;		/*HP画面の左右中央に表示させる設定*/
}

/*ヘッダー（ロゴが入った最上段のブロック）*/
/*---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	clear: both;
	/*margin-bottom: 10px;*/
	color: #fff;		/*文字色*/
	padding: 5px 20px;	/*上下、左右への余白*/
	background: #0f8ff7;	/*背景色*/

}


/*　ヘッダの背景の街並み画像 */
.full {
	position: relative;
	margin-top: 10px;
	/*margin-bottom: 20px; */
	width: 100%;
    height: 42px;
	background: url("../images/osaka.svg" ) repeat-x;
	 object-fit: cover; 
  }

/* トップページのロゴ部分　
   重ねるボックスの設定 */
.layer-in{
	/* ボックス配置指定 */
	position: absolute;
	top: 0;
	left: 0;
  }
  
  /* ロゴの基本設定 */
  .layer-img{
	height: 60px;
	width: auto;
  }


.mm {
	fill: #1b03f0;
	opacity: 1;

}

.mm:hover {
	fill: #fcbdcb;
	opacity: 0.3;
}




/*メニュー*/
/*---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#menubar {
	text-align: center;	/*文字をセンタリング*/
}
/*メニュー１個あたりの設定*/
#menubar li {
	display: inline;	/*横並びにする設定*/
}
#menubar li a {
	text-decoration: none;
	padding: 15px 30px;	/*各メニュー内の余白。上下に15px、左右に30pxあけるという意味。*/
	color: #fff;	/*文字色*/
}
/*マウスオン時の設定*/
#menubar li a:hover {
	background: url(../images/icon_arrow1) no-repeat center top;	/*矢印アイコンを出す設定。矢印が不要ならここは丸ごと削除する。*/
	
}
/*---------------------------------------------------------------------------*/


/*コンテンツ（見出しバーや文字などが入っているブロック）*/
/*---------------------------------------------------------------------------*/
#contents {
	background: #fff;	/*背景色*/
	padding: 3%;		/*ボックス内の余白*/
}
/*コンテンツのh2タグの設定*/
#contents h2 {
	font-size: 20px;	/*文字サイズ*/
	clear: both;
	margin-bottom: 15px;
	color: #666;		/*文字色*/
	padding: 1px 1px;	/*上下、左右への余白*/
	background: #ffffff;	/*背景色*/
	border: 1px solid #0f8ff7;	/*枠線の幅、線種、色*/
}
/*コンテンツのh3タグの設定*/
#contents h3 {
	clear: both;
	margin-bottom: 15px;
	padding: 3px 20px;	/*上下、左右への余白*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*コンテンツのh4タグの設定*/
#contents h4 {
	text-align: right;
	font-weight: normal;

}

/*コンテンツのp(段落)タグ設定*/
#contents p {
	padding: 0px 20px 14px;	/*上、左右、下への余白*/
}
#contents h2 + p,
#contents h3 + p {
	margin-top: -5px;
}
/*---------------------------------------------------------------------------*/



/*フッター(ページ最下部のcopyrightのパーツ)設定*/
/*---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;	/*文字をセンタリング*/
	padding: 0px 0px;	/*左から、上下、左右への余白*/
}
footer a {
	text-decoration: none;
	border: none;
}
footer .pr {
	display: block;
}
/*---------------------------------------------------------------------------*/

.footer2 {
	font-size: 10pt;
	text-align: center;
	clear: both;
	/*margin-bottom: 10px;*/
	color: #fff;		/*文字色*/
	padding: 5px 20px;	/*上下、左右への余白*/
	background: #0f8ff7;	/*背景色*/

}


/*テーブル*/
/*---------------------------------------------------------------------------
/*tテーブルブロック設定*/
.ta1 {
	width: 100%;
	margin-bottom: 15px;
}
.ta1, .ta1 td, .ta1 th {
	border: 2px solid #000;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;			/*テーブル内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #000;	/*背景色*/
	color: #fff;	/*文字色*/ 
}
/*テーブルの左側ボックス*/
.ta1 th {
	width: 30%;	/*幅*/
	text-align: center;	/*センタリング*/
}
/*-テーブルここまで-------------------------------------------------------------*/


/* flexboxの設定 全国がん登録実務・溯り等のメニュー部分に使用*/
/*---------------------------------------------------------------------------*/
 .flex_box {
    background-color:#ffffff;    /* 背景色指定 */
    padding:  1px;              /* 内側余白指定 */
    display: flex;               /* 横並び */
    justify-content:center;	    /* センタリング */
    align-items: center;         /* センタリング */
    flex-wrap: wrap;             /* 折り返す */
}
 
/* flexboxの設定ここまで */
/*---------------------------------------------------------------------------*/
 


/* 画像サイズ自動調整 */
/*---------------------------------------------------------------------------*/
.example img{
    max-width: 100%;
	margin-left: 30px;
    height: auto;
}
/*---------------------------------------------------------------------------*/



/*ページトップの設定*/
/*---------------------------------------------------------------------------*/

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #25b1d9;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    
    border-top: 3px solid #25b1d9;
    border-right: 3px solid #25b1d9;
    
    /*border-top: 3px solid #000;
    border-right: 3px solid #000; */
    transform: translateY(20%) rotate(-45deg);
    
    
}
/*---------------------------------------------------------------------------*/


/*その他*/
/*---------------------------------------------------------------------------*/
.look {background: #e5e5e5;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color: #25b1d9;}
.pr {font-size: 10px;}



/*画面幅480px以下の設定
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* @media screen and (max-width:480px){

 /*   html,main{ */
 /*       padding: 4%; */
 /*   } */

/*コンテナー（ホームページを囲む一番外側のブロック）*/
/*---------------------------------------------------------------------------*/
/* #container {
/*	width: 100%;	/*ブロックの幅を画面の100%にする設定。*/
/* }

/*メニュー*/
/*---------------------------------------------------------------------------*/
/* #menubar li a {*/
/*	padding: 15px 10px;	/*各メニュー内の余白。上下に15px、左右に10pxあけるという意味。*/
/* }*/

/*トップページ内「更新情報・お知らせ」ブロック*/
/* ---------------------------------------------------------------------------*/
/* #new h2.open {*/
/* 	background: #25b1d9 url(../images/btn_minus.png) no-repeat right center/34px 34px;
/* }*/
/* #new h2.close {*/
/* 	background: #25b1d9 url(../images/btn_plus.png) no-repeat right center/34px 34px;/* 
/*}*/

/*テーブル*/
/*---------------------------------------------------------------------------*/
/*tテーブルブロック設定*/
/* .ta1, .ta1 td, .ta1 th { */
/* 	padding: 5px;			/*テーブル内の余白*/
/* } */
/* } */


/*　マウスオン時のフィルター　*/
  .imgfilter {
	transition: 0.4s ease;
  }
  /* ホバー時のエフェクト */
  .imgfilter:hover {
	 /* filter:sepia(90%); */
	 filter:sepia(50%);
	  opacity: 30%;
  }



/* ジャンプするサンプル */
/* class="keyframe7 animation"を指定 */
/* https://mugenweb-note.com/web/css/keyframes-sample */
  .animation{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
	width: 128px;
  }
  
  .keyframe7 {
	animation-name: jump;
	animation-duration: .6s;
  }
  
  @keyframes jump{
	0%   { transform:translate(0%, 60px) rotateX(50deg); }
	100% { transform:translate(0%, 0%); }
  }

/* リセットCSS */
* {
	list-style: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  


/* 質問欄の▽　*/
  	.arrow {
		margin-bottom: 10px;
		font-size: 20px;
		position: relative;
		display: block;
		width: 1em;
		height: 1em;
		border-bottom: 0.2em solid #39a9d6;
		border-right: 0.2em solid #39a9d6;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
    	transition: all 0.2s;
	}

	.arrow.active {
		transform: rotate(225deg);
    	transition: all 0.2s;
	}



  /* チェックボックスの□を消す */
   /* 	input[type=radio] {
		display: none;  ラジオボタンの□を非表示にする
	} */

	input[type=checkbox] {
		 display: none;  /*チェックボックスの□を非表示にする */
		
		}

  /* ラベル k1 */
	.label_k1 {
		/*google font --weightは実質、htmlで指定*/
		font-family: "Zen Maru Gothic", serif;
		font-weight: 500;
		font-style: normal;

		font-size: 12px;
		display: block; /*ブロックレベル要素化する */
		float: left; /* 要素の左寄せ・回り込を指定する */
		margin: 5px; /* ボックス外側の余白を指定する */
		width: auto; /* ボックスの横幅を指定する default:100 */
		height: 27px; /* ボックスの高さを指定する 45 */
		padding-left: 5px; /* ボックス内左側の余白を指定する */
		padding-right: 5px; /* ボックス内御右側の余白を指定する */
		color: #006DD9; /* フォントの色を指定 */
		text-align: center; /* テキストのセンタリングを指定する */
		overflow-wrap: break-word;
		line-height: 25px; /* 行の高さを指定する 45 */ 
		cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
		border: 1px solid #006DD9;/* ボックスの境界線を実線で指定する */
		border-radius: 5px; /* 角丸を指定する */
 	 }
  	input:checked + .label_k1 {
		color: #faf9f9; /* フォントの色を指定 */
		background-color: #006DD9;
 	 }

  /* ラベル k2 */
	  .label_k2 {
		/*google font --weightは実質、htmlで指定*/
		font-family: "Zen Maru Gothic", serif;
		font-weight: 500;
		font-style: normal;

		font-size: 12px;
		display: block; /*ブロックレベル要素化する */
		float: left; /* 要素の左寄せ・回り込を指定する */
		margin: 5px; /* ボックス外側の余白を指定する */
		width: auto; /* ボックスの横幅を指定する default:100 */
		height: 27px; /* ボックスの高さを指定する 45 */
		padding-left: 5px; /* ボックス内左側の余白を指定する */
		padding-right: 5px; /* ボックス内御右側の余白を指定する */
		color: #037e4f; /* フォントの色を指定 */
		text-align: center; /* テキストのセンタリングを指定する */
		line-height: 25px; /* 行の高さを指定する 45 */
		cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
		border: 1px solid #037e4f;/* ボックスの境界線を実線で指定する */
		border-radius: 5px; /* 角丸を指定する */
 	 }
  	input:checked + .label_k2 {
		color: #faf9f9; /* フォントの色を指定 */
		background-color: #037e4f;
 	 }

  /* ラベル k3 */
	  .label_k3 {
		/*google font --weightは実質、htmlで指定*/
		font-family: "Zen Maru Gothic", serif;
		font-weight: 500;
		font-style: normal;

		font-size: 12px;
		display: block; /*ブロックレベル要素化する */
		float: left; /* 要素の左寄せ・回り込を指定する */
		margin: 5px; /* ボックス外側の余白を指定する */
		width: auto; /* ボックスの横幅を指定する default:100 */
		height: 27px; /* ボックスの高さを指定する 45 */
		padding-left: 5px; /* ボックス内左側の余白を指定する */
		padding-right: 5px; /* ボックス内御右側の余白を指定する */
		color: #f76679; /* フォントの色を指定 */
		text-align: center; /* テキストのセンタリングを指定する */
		line-height: 25px; /* 行の高さを指定する 45 */
		cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
		border: 1px solid #f76679;/* ボックスの境界線を実線で指定する */
		border-radius: 5px; /* 角丸を指定する */
 	 }
  	input:checked + .label_k3 {
		color: #faf9f9; /* フォントの色を指定 */
		background-color: #f76679;
 	 }

 /* 質問欄全体をクリック範囲に　*/
		dt {
			cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
			}	

 /* 回答欄の非表示　*/
		dd {
			display: none;
 		} 


/* containerの色変更　--本番不要*/
	 .bgcolor{
		background-color: #c8e9f3;
		border-radius: 5px; /* 角丸を指定する */
	 }



/* tagマーク */
	  .css-tag{
		display: inline-block;
		position: relative;
		margin: 0 15px 0 0;
		padding: 0;
		width: 18px;
		height: 16px;
		background: #000;
	  }
	  .css-tag:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 4px;
		height: 4px;
		margin-top: -2px;
		border-radius: 50%;
		background: #fff;
	  }
	  .css-tag:after{
		display: block;
		content: "";
		position: absolute;
		top: 0;
		left: 100%;
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-left-color: #000;
	  }



 /* ボーダーライン　*/
hr{
  background-color: #f0f0f0;
  margin-left: 0px;
  width: 80%;
  float: center;
}

/* ボーダーライン　*/
hr.border1 {
	border-top: 20px double #a8eaf3;
}

.border3{
	background-color: #0f8ff7;
	margin-left: 0px;
	width: 100%;
	float: center;
	border-top: 2px double #0f8ff7;
	opacity: 0.25;
}


/* #### FAQ　質問と回答の区切り部分 ####*/
.borderline{
	border-bottom: 1px solid #125fd3;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
}

/* ####　続きを読む部分で隠しておく(検索でひっかけるために内容は記載しておく） ####*/
.hidden_area{
	display:none;
}

/*#### FLEX BOX #### */
.FlexArea { 	/*質問欄Flex範囲*/
	display: flex;
	flex-wrap:wrap;
	min-width: 220px;
	border-radius: 6px;
	padding: 5px;
	flex-direction:row;
	background: #e0eaf8;
	justify-content:center;	    /* 中央寄せ */
    align-items: stretch;         /* 立幅をそろえる */
	align-content: center;	
	padding: 10px;
  }

  .FlexArea .FlexBox {		/*FlexBox部分*/
		/*google font --weightは実質、htmlで指定*/
		font-family: "Zen Maru Gothic", serif;
		font-weight: 500;
		font-style: normal;

	display: flex;
	flex-wrap:wrap ;
	flex-grow: 1;
	width: 24%; /*200px;  24% */
	max-width: 320px;
	min-width: 200px;
	border: 1px solid #0f8ff7;
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
	color: #000;
	font-size: 13px;
	text-align: left;
	margin: 5px;
	padding: 10px;
	overflow: hidden;
  }


.FlexBox_C {		/*FlexBox内のタイトル部分*/
	/*GoogleFont*/
	font-family: "Dosis", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;

	flex-wrap:wrap ;
	width: 100%;
	height: 60px;
	background: #bbdbf5;
	border-radius: 6px;
	color: #0f8ff7; /*#0509fa;*/
	font-size: 14px;
	text-align: left;
	margin: 3px;
	padding: 3px;
	overflow: hidden;
  }
  .FlexBox_CA {		/*FlexBox内のタイトル部分*/
	/*GoogleFont*/
	font-family: "Dosis", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;

	flex-wrap:wrap ;
	background: #ccffcc;
	border-radius: 6px;
	color: #03aa43;
	font-size: 14px;
	text-align: left;
	margin: 3px;
  }

  .FlexBox .FlexBox_D {		/*FlexBox内のtag置き場*/
	align-self: flex-end;
	height:120px;
	width: 100%;
	flex-wrap:wrap ;
	background: #ffffff;
	/* border: 1px solid #ee0808;
	border-radius: 6px;*/
}

  .FlexBox_S {		/*modalウィンドウの質問者情報欄*/
		/*google font --weightは実質、htmlで指定*/
		font-family: "Zen Maru Gothic", serif;
		font-weight: 500;
		font-style: normal;


	flex-wrap:wrap ;
	height: auto;
	border: 1px solid #0f8ff7;
	border-radius: 6px;
	color: #0a0a0a;
	background: #ffffff;
	font-size: 12px;
	text-align: left;
	margin: 5px;
	padding: 3px;
  }

  .FlexBox_T {		/*modalウィンドウの回答情報欄*/
		/*google font --weightは実質、htmlで指定*/
		font-family: "Zen Maru Gothic", serif;
		font-weight: 500;
		font-style: normal;

	flex-wrap:wrap ;
	height: auto;
	/* width:fit-content; */
	border: 1px solid #04cc0e;
	border-radius: 6px;
	color: #0a0a0a;
	background: #ffffff;
	font-size: 12px;
	text-align: left;
	margin: 5px;
	padding: 3px;
  }


  .FlexBox_TA {		/*続き・回答はこちらをクリック*/
	flex-wrap:wrap ;
	height: auto;
	width:fit-content;
	color: #04cc0e;;
	border: 1px solid #04cc0e;
	border-radius: 6px;
	background: #ffffff;
	font-size: 14px;
	padding: 3px;
	}


	.tsuduki {		/*続き・回答ボタン*/
    	width: 70%;
		height: 40px;
		padding: 10px;
		margin:auto;
    	background-color: rgb(124, 186, 245);
		border-radius: 6px;
    	text-align: center;
		transition: 0.4s ease;
		}
	.tsuduki a {		/*続き・回答ボタンの文字*/
		font-size: 14px;
		color: #f8f8f8;
		text-decoration:none;
		}
	.tsuduki:hover {		/*続き・回答ボタン*/
		opacity: 30%;
		}


 /* ###### modal ####*/
  /* https://dubdesign.net/download/html-css/modal-window/#google_vignette  */

  .modal-wrapper {
	z-index: 999;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20px 10px;
	text-align: center;
  }
  
  .modal-button {
	  color: #4f96f6;
	  background-color: #eeeeee;
	  font-weight: bold;
	  text-align: center;
	  cursor :pointer;
	  transition: all 0.3s;
	  display: block;
	  margin-top: 40px;
	  margin-bottom: 1px;
	  padding: 12px 2px;
	  max-width:300px;
	  text-decoration: none;
  }
  
  .modal-button:active {
	/*ボタンを押したとき*/
	-webkit-transform: translateY(2px);
	transform: translateY(2px);/*下に動く*/
  
  }
  
  /*アイコンを表示*/
  .modal-button:after {
  font-family: "Font Awesome 5 Free";
	content: "\f2d0";
	  padding-left: 8px;
  }
  
  /*ラベルホバー時*/
  .modal-button:hover {
	color: #FFFFFF;
	background-color: #4f96f6;
	transition: .6s;
  }
  
  .modal-wrapper:not(:target) {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
  }
  
  .modal-wrapper:target {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s, visibility .4s;
  }
  
  .modal-wrapper::after {
	display: inline-block;
	height: 100%;
	margin-left: -.05em;
	vertical-align: middle;
	content: ""
  }
  
  .modal-wrapper .modal-window {
	box-sizing: border-box;
	display: inline-block;
	z-index: 20;
	position: relative;
	width: 100%;
	max-width: 600px;
	padding: 10px 30px 25px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 0 30px rgba(0, 0, 0, .6);
	vertical-align: middle;
  }
  .modal-wrapper .modal-window .modal-content {
	max-height: 90vh;
	overflow-y: auto;
	text-align: left
  }
  
  /* 質問部分 */
  .modal_title {
		/*google font --weightは実質、htmlで指定*/
		font-family: "Zen Maru Gothic", serif;
		font-weight: 500;
		font-style: normal;

	font-size: 14px;
	line-height: 1.5;
	  position: relative;
	/*  overflow: hidden; */
	overflow-y: auto;
	padding: 10px;
  }

  
  .modal-content p {
	font-size: 14px;
	margin: 10px 0 0 0;
	padding: 10px;
  }
  
  .modal-overlay {
	z-index: 10;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .8)
  }
  
  .modal-wrapper .modal-close {
	z-index: 20;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 35px;
	color: #95979c !important;
	font-size: 30px;
	font-weight: 700;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	text-indent: 0
  }
  
  .modal-wrapper .modal-close:hover {
	color: #2b2e38 !important
  }
  


/*　参考　https://benri-no1.com/list/　*/

  .list15 {
	margin: 2em 10px;
	padding: 1em;
	border: dashed 2px #ffc3c3;
	border-radius: 8px;
	background: #fff6e6;
	box-shadow: 0 0 0 10px #fff6e6;
  }
  .list15-title {
	position: relative;
	font-size: 1.3em;
	padding: 4px 0 4px 12px;
	color: #ee8992;
	font-weight:bold;
	text-align: center;
  }
  .list15 ul,.list15 ol {
	position: relative;
	margin: 0;
	padding: 0 0.5em 0 0.5em;
	color: #ee8992;
	border: none;
	list-style-type: none;
  }
  .list15 ol {
	counter-reset: number;
  }
  .list15 ul li,.list15 ol li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px #ffc3c3;
  }
  .list15 ul li:before {
	position: absolute;
	font-family: FontAwesome;
	content: "\f14a";
	left : 0.5em;
	color: #ee8992;
  }
  .list15 ol li:before {
	display: inline-block;
	position: absolute;
	font-family: "Quicksand", sans-serif;
	content: counter(number);
	counter-increment: number;
	left: 0.5em;
	width: 22px;
	height: 22px;
	border-radius: 20%;
	background: #ee8992;
	color: white;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 22px;
  }
  .list15 ul li:last-of-type,.list15 ol li:last-of-type{
	border-bottom: none;
  }

/* blue */
  .listB {
	margin: 2em 10px;
	padding: 1em;
	border: dashed 2px #bbdbf5;
	border-radius: 8px;
	background: #e0eaf8;
	box-shadow: 0 0 0 10px #e0eaf8;
  }
  .listB-title {
	position: relative;
	font-size: 1.3em;
	padding: 4px 0 4px 12px;
	color: #468df8;
	font-weight:bold;
	text-align: center;
  }
  .listB ul,.listB ol {
	position: relative;
	margin: 0;
	padding: 0 0.5em 0 0.5em;
	color: #468df8;
	border: none;
	list-style-type: none;
  }
  .listB ol {
	counter-reset: number;
  }
  .listB ul li,.listB ol li {
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px #bbdbf5;
  }
  .listB ul li:before {
	position: absolute;
	font-family: FontAwesome;
	content: "\f14a";
	left : 0.5em;
	color: #bbdbf5;
  }
  .listB ol li:before {
	display: inline-block;
	position: absolute;
	font-family: "Quicksand", sans-serif;
	content: counter(number);
	counter-increment: number;
	left: 0.5em;
	width: 22px;
	height: 22px;
	border-radius: 20%;
	background: #468df8;
	color: white;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	line-height: 22px;
  }
  .listB ul li:last-of-type,.listB ol li:last-of-type{
	border-bottom: none;
  }



  /* ########## pagenationの設定 ########## */
.pagination {
	margin-top: 3em;
	display: flex;
	justify-content: center;
	font-size: 21px;
  }

  .pagination li {
	margin-right: 1.5em;
  }

  .pagination li:not(:first-child, :last-child) {
	text-decoration: none;
  }
  
  .pagination li a {
	text-decoration: none;
  }
  
  .pagination .active {
	text-decoration: none;
	background: #0f8ff7;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	color: #faf9f9;
	font-size:15px;
	text-align: center;
	line-height: 30px;
  }
  
  .pagination .active a {
	color: #fcfbfb;
  }