@charset "utf-8";
	body{
		margin: 0;
		Padding: 0;
	}
	.header_image {
		top: 180px;
		width: 100%;
	}
	.header_image img{
		width: 100%;
		height: 200px;
		scale: 100%;
		text-align: center;
		object-fit: cover;
		position: relative;
	}
	.header_text{
		position: absolute;
		top: 220px;
		left: 120px;
		width: 500px;
	}
	.header_span_text{
		color: #fff;
		font-size: 40px;
		font-weight: bold;
		font-family: YuGothic,'Yu Gothic',sans-serif;;
	}

	.news-list{
		list-style: none outside;
		margin: 0;
		padding: 0;
	}
	.news-list .item a{
		display: flex;
		flex-wrap: wrap;
		flex-wrap: nowrap;
		text-decoration: none;
		color: #333;
		border-bottom: 1px solid #CCC;
		padding: 20px 20px;
	}
	.news-list .item:first-child a{
		border-top: 1px solid #CCC;
	}
	.news-list .item .date{
		margin: 0;
		min-width: 120px;
		font-size: 16px;
		color: #999;
		padding: 0 20px 0 0;
	}
	.news-list .item .title{
		margin: 0;
		width: 100%;
	}
	.news-list .item a:hover .title{
		color: #00F;
	}
	  
	@media screen and (max-width: 767px){
		.news-list .item a{
			flex-wrap: wrap;
		}
		.news-list .item .date{
			min-width: 100px;
		}
		.news-list .item .title{
			margin-top: 10px;
		}
	}

	/* スマホ用メニュー表示制御 */
	#menubar-s {display: none;}
	/* スマホ用アイコン表示制御*/
	#menubar_hdr {display: none;}

	/* イメージ */
	.image {
		margin: 0 auto;
		display: flex;
		margin: 0 auto;
		padding: 0 3%;
	}
	.image img{
		position: relative;
		z-index: 1;
		width: 94%;
		max-width: 960px;
		list-style-type: none; 
    	height: auto;
	}

	/* コンテンツ */
	---------------------------------------------------------------------------*/
	#contents {
		clear: both;overflow: hidden;
		background: #fff;	/*背景色*/
		padding: 3%;	/*ボックス内の余白*/
		box-shadow: 0px 0px 50px rgba(0,0,0,0.5);
	}

	/*mainコンテンツ
	---------------------------------------------------------------------------*/
	#main {
		float: center;
		width: 100%;
	}
	#main .contents_box_parent {
		width: 100%;
		height: auto;
	}
	#main .contents_box_child {
		max-width:960px;
		width: 78.8%;
		margin: 0 auto;
		/*left: 50.0%;*/
		/*transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);*/
		background: rgba(255, 255, 255);
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
		/*display: flex;*/
		display:block;
		list-style-type: none;
	}
	#main .contents_box_contents table{
		border-style:hidden ;
		
	}
	#main .contents_box_contents table td{
		font-family: YuGothic,'Yu Gothic',sans-serif;
	}
	/*１カラム利用時の設定*/
	.c1 #main {
		float: none;
		width: auto;
	}
	img {
		width: 98%;
		/*max-width: 960px;*/
		/*padding: .5rem;*/
		display: flex; 
		align-items:center;
		position: relative;
		display: inline-block;
	}
	/*h2タグの設定*/
	#main h2 {
		clear: both;
		margin-bottom: 20px;
		font-size: 18px;
		letter-spacing: 0.1em;
		color: rgb(0, 124, 240);
		background: #ffffff;
		background: linear-gradient(#ffffff, #ffffff); /* グラデーション */
		padding: 5px 15px;
		border-bottom: 4px solid #000000;	/* 下線 */
	}
	/*h3タグの設定*/
	#main h3 {
		clear: both;
		margin-bottom: 20px;	/*見出しの下にとるスペース*/
		font-size: 18px;	/*文字サイズ*/
		color: rgb(0, 124, 240);
		background: #fff;	/*背景色（古いブラウザだとここの色のみが出ます）*/
		background: linear-gradient(#FFF, #eee);	/*グラデーション*/
		padding: 4px 15px;		/*上下、左右への余白*/
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	}
	/*段落タグ設定*/
	#main p {
		padding: 0px 20px 15px;	/*上、左右、下への余白*/
	}
	#main h2 + p,
	#main h3 + p {
		margin-top: -10px;
	}
	#main section+section {
		margin-top: 50px;
	}

	/*SERVICEページの各ブロック
	---------------------------------------------------------------------------*/
	/*各ボックスの設定*/
	#main .list {
		position: relative;overflow: hidden;
		margin-bottom: 20px;	/*上下ボックス間の余白*/
		padding: 20px;		/*ボックス内の余白。ここを変更する際は、下の「#main .list a」のpaddingとmarginの数字も合わせる。*/
		border: 1px solid #dcdcdc;	/*枠線の幅、線種、色*/
		background: #fff;	/*背景色（古いブラウザ用）*/
		background: linear-gradient(#FFF, #e3e3e3);	/*背景グラデーション*/
		box-shadow: 0px 0px 0px 1px #fff inset;	/*内側の影。右へ・下へ・ぼかし幅・距離・色を設定*/
		color: #333;	/*文字色*/
	}
	#main .list a {
		text-decoration: none;display: block;overflow: hidden;
		padding: 20px;	/*ボックス内の余白。ここを変更する際は、上の「#main .list」のpaddingの数字も合わせる。*/
		margin: -20px;	/*ボックス内の余白。ここを変更する際は、上の「#main .list」のpaddingの数字も合わせる。マイナス記号は外さないように。*/
		color: #333;	/*文字色*/
	}
	/*マウスオン時の背景色*/
	#main .list a:hover {
		background: #fff;	/*背景色*/
	}
	/*リンクを貼った際に出る「→」マーク*/
	#main .list a::before {
		content: "→";	/*出力する文字。変更しても構いませんが機種依存文字は化けるので使わないで下さい。*/
		font-size: 12px;	/*文字サイズ*/
		display: block;
		position: absolute;
		right: 10px;	/*ボックスの右から10pxの場所に配置*/
		bottom: 10px;	/*ボックスの下から10pxの場所に配置*/
		width: 30px;	/*幅*/
		line-height: 30px;	/*高さ*/
		text-align: center;
		background: #ccc;	/*背景色（古いブラウザ用）*/
		background: rgba(0,0,0,0.2);	/*背景グラデーション。0,0,0は黒の事で、0.3は透明度30%の事。*/
		color: #fff;	/*文字色*/
	}
	/*マウスオン時の「→」マーク*/
	#main .list a:hover::before {
		background: #49b1cb;	/*背景色*/
	}
	/*ボックス内のh4タグ設定*/
	#main .list h4 {
		padding-left: 10px;	/*枠線とテキストとの間の余白*/
		border-bottom: 1px solid #CCC;	/*下側の線の幅、線種、色*/
		border-left: 3px solid #49b1cb;	/*左側の線の幅、線種、色*/
		margin-bottom: 0.5em;
		color: #49b1cb;	/*文字色*/
	}
	/*ボックス内のp(段落)タグ設定*/
	#main .list p {
		padding: 0px;
	}
	/*ボックス内の画像*/
	#main .list figure {
		float: left;	/*左に回り込み*/
		width: 30%;		/*画像幅*/
		background: #FFF;	/*画像の背景色。ここでは枠線と画像の間の色になります。*/
		padding: 1%;			/*余白。ここに上の行で設定した背景色が出ます。*/
		border: 1px solid #CCC;	/*枠線の幅、線種、色*/
		margin-right: 10px;		/*画像右側に空ける余白*/
	}
	/*マウスオン時のボックス内の写真設定。ボックスにoption2スタイルが指定された場合の画像の設定。*/
	.list.option2 a:hover figure img,
	.list.option2 figure img {
		opacity: 0.3 !important;	/*半透明にする設定*/
	}
	@media screen and (max-width: 768px) {
		.news-list .item .date{
			margin: 0;
			min-width: 120px;
			font-size: 10px;
			color: #999;
			padding: 0 20px 0 0;
		}
		.news-list .item .title{
			margin: 0;
			width: 90%;
		}
		#header h2{
		font-size: 15px;
		}
		#main {
			float: center;
			width: 100%;
		}
		#main .contents_box_child {
			max-width:768px;
			width: 78.8%;
			margin: 0 auto;
			background: rgba(255, 255, 255);
			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
			display:block;
			list-style-type: none;
		}
		.span_text{
			color: #414141;
			font-size: 8px;
			font-family: YuGothic,'Yu Gothic',sans-serif;
		}
		.span_text p{
			color: #414141;
			font-size: 8px;
			font-family: YuGothic,'Yu Gothic',sans-serif;
		}
		#main h2 {
			clear: both;
			font-family: YuGothic,'Yu Gothic',sans-serif;
			margin-bottom: 10px;
			font-size: 10px;
			letter-spacing: 0.1em;
			color: #af0336;
			background: #ffffff;
			background: linear-gradient(#ffffff, #ffffff); /* グラデーション */
			position: relative;
			padding: 1rem .5rem;
		  }
		#main h3 {
			clear: both;
			font-family: YuGothic,'Yu Gothic',sans-serif;
			margin-bottom: 20px;
			font-size: 10px;
			letter-spacing: 0.1em;
			color: #af0336;
			background: #ffffff;
			background: linear-gradient(#ffffff, #ffffff); /* グラデーション */
			position: relative;
			padding: 1rem .5rem;
		}
		#main .contents_box_contents table th{
			font-family: YuGothic,'Yu Gothic',sans-serif;
			font-size: 5px;
		}
		#main .contents_box_contents table td{
			font-family: YuGothic,'Yu Gothic',sans-serif;
			font-size: 7px;
			height: 30px;
		}
		.header_image img{
			width: 100%;
			height: 100px;
			scale: 100%;
			text-align: center;
			object-fit: cover;
			position: relative;
		}
		.header_text{
			position: absolute;
			max-width: 300px;
			width: 100%;
			top: 95px;
			left: 40px;
		}
		.header_span_text{
			color: #fff;
			font-size: 20px;
			font-weight: bold;
			font-family: YuGothic,'Yu Gothic',sans-serif;;
		}
	}
	/*ページの上部へ「↑」ボタン
---------------------------------------------------------------------------*/
@keyframes scroll {
	0% {opacity: 0;}
	100% {opacity: 1;}
	}
	body .nav-fix-pos-pagetop a {display: none;}
	body.is-fixed-pagetop .nav-fix-pos-pagetop a {
		display: block;text-decoration: none;
		z-index: 100;
		text-align: center;
		width: 50px;	/*幅*/
		line-height: 50px;	/*高さ*/
		position: fixed;
		bottom: 100px;	/*下から１００pxの場所に配置*/
		right: 5%;		/*右から5%の場所に配置*/
		background: #000;	/*背景色（古いブラウザ用）*/
		background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事で0.6は透明度60%の事。*/
		color: #fff;	/*文字色*/
		border: 1px solid #fff;	/*枠線の幅、線種、色*/
		animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
		animation-duration: 1S;	/*アニメーションの実行時間*/
		animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
	}
	/*マウスオン時*/
	body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
		background: #999;	/*背景色*/
	}