#contents_main {
	max-width: 1200px;
	margin: 0 auto;
}
.title_area {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
/*　htmlで.p50_r,.p50_r,.next50　未使用かもだが　念のため残し　*/
#contents_main .main_column.p50_l {
	width: calc(50% - 8px);
	margin-right: 8px;
	float: left;

}
#contents_main .main_column.p50_r {
	width: calc(50% - 8px);
	margin-left: 8px;
	float: right;
}

@media screen and (max-width: 640px) {
	#contents_main .main_column.p50_l,
	#contents_main .main_column.p50_r {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		float: none;
	}
}

.main_column.next50 {
	clear: both;
}

/* タイトル部分(画像、タイトル、サブタイトル）　表示位置上へ */
.title_l{
	position: relative;  
	margin-top: -3%;    
	margin-left: auto;  
	margin-right: auto;
}

/* event lead文　フォントサイズ大きく、 文字色　濃紺 */
.event_lead{
        font-size: 2.2rem;  color: #02286f;  
}


.lead{
        font-size: 1.1rem;    /* lead文　フォントサイズ大きく */
}


/* 水色背景　リンク帯の設定 広報部テンプレート　コンテンツ広場CSSのtabID 使用 */
/* - contents - */
#tab {
	margin-top: 20px;
}

#tab ul {
	border-top: 6px solid #0080CB;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
			-webkit-box-pack: center;
}

#tab ul li {
	width: 19.84%;
	margin-right: 0.2%;
	margin-bottom: 0.2%;
	text-align: center;
	letter-spacing: 0.01em;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	background-color: #D1EBFA;
}
#tab ul li:nth-child(5n) {
	margin-right: 0;
}

#tab ul li .link_headword::before {
	content: none;
}

#tab ul li>* {
	width: 100%;
}
#tab ul li a {
	display: block;
	color: #0080CB;
	background: none;
	padding: 0;
	font-size: 0.875rem;
	padding: 15px 0;
}

#tab ul li a:hover {
	text-decoration: none;
	opacity: 0.7;
}

@media screen and (max-width: 640px) {
	#tab ul li {
		width: 33.2%;
	}
	#tab ul li:nth-child(3n) {
		margin-right: 0;
	}
	#tab ul li:nth-child(5n) {
		margin-right: 0.2%;
	}
}



.main_column_middle {
	padding: 0;
	border-bottom: 6px solid #ffffff;   /*記事モジュールのブロックの下部の線　白へ　*/
        box-shadow: none;       /*記事モジュールのブロックの影　削除　*/  
}

.index_module {
	overflow: hidden;
	margin-top: 32px;      /*インデックスモジュール上部のmargin*/
	/*padding-bottom: 10px;*/   /*未使用　削除可能か　*/
}
.index_module ul {
	padding: 0 18.5px; /*数値　反映されないが　背景色は反映されるので念のため削除せず*/
	/*border-bottom: 6px solid #0080CB;*/ /*未使用　削除可能か　*/
	/*box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.5);*/ /*未使用　削除可能か　*/
}


/*　インデックスモジュール　*/
/* ------ index_module ------ */


/*　インデックスモジュール３タイル全体　*/
.index_module ul.tile3 {
	width: 100%;
	margin: 0 auto;
	padding: 0 2px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}

/*　インデックスモジュール　各枠一つ分の設定　タイル３　*/
.index_module ul.tile3 li {
	float: none;
	margin-bottom: 15px;  /* 44-> 15 これ以下の場合　縦長画面で上下が近すぎる*/
	padding: 0 4px;
}

.index_module ul.tile3 li a:hover {
	text-decoration: none;
}


/*　サムネイル画像「枠」の設定　タイル３　*/
.index_module ul.tile3 li .image_text .image {
	width: 100%;
	height:0;
	float: none;
	position: relative;
	overflow: visible;            /* hidden->visible */
	border-top: 76px solid transparent;
/*　6->76 各タイルの透明上枠　枠からはみ出た高さ分を枠の太さでカバー*/
	border-right: 6px solid transparent;
	border-left: 6px solid transparent; 
}

/*　サムネイル画像「枠」の設定（マウスオン）　タイル３　*/
.index_module ul.tile3 li a:hover .image_text .image {
	border-top: 70px solid #ffffff;        
/*　6->70 　上の76pxより6px細い幅　マウスオンで少し上に移動し浮き上がるように　枠色を白へ*/
	border-right: 6px solid #ffffff;      /*　0080CB -> FFFFFF、枠色を白へ*/
	border-left: 6px solid #ffffff;       /*　0080CB -> FFFFFF、枠色を白へ*/
}

/*　白い四角　タイル３　全部を消すとデフォルトでグレー四角を表示*/
.index_module ul.tile3 li .image_text .image::before{
	content: "";
	position: absolute;
	top: -70%;                        /* 0 -> -70% 白い四角　縦の位置　*/
	left: -5%;                        /* 0 -> -5% 白い四角　横の位置　*/
	display: block;
	height: 170%;                     /* 100% -> 170%白い四角　表示高さ1.7倍へ　*/
	width: 110%;                      /* 100% -> 110%白い四角　表示幅1.1倍へ　*/
	background: rgba(255,255,255,0.5);  /* 白四角　透明度設定　*/
	z-index: 1;
	opacity: 0;          /* opacity追加　マウスオンしないと　白四角　表示無し　*/
}

/*　白い四角（マウスオン）　タイル３　*/
.index_module ul.tile3 li a:hover .image_text .image::before{
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 1;                         
/* opacity追加　白四角　マウスオンで表示（下のサムネイル画像が淡い色になる）　*/
}

/*　サムネイル画像 設定　タイル３　*/
.index_module ul.tile3 .image_text .image img {
	display: block;
	position: absolute;
	top: 16%;  /* 50%->16% 画像表示枠の中の、サムネイル画像の表示場所指定　*/
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: width 2s linear;
	-moz-transition: width 2s linear;
	-o-transition: width 2s linear;
	transition: width 2s linear;
	width: auto;     /* サムネイル画像の表示　枠の高さを規準　*/
	height: 169%;    /* サムネイル画像の表示　枠の高さの1.69倍　*/
        border-radius: 12px 12px 0px 0px;  /* サムネイル画像の上部　角丸　*/
        box-shadow: 2px -1px 13px -7px rgba(0,0,0,1);       /*リンク画像に影追加　*/
}

/*　サムネイル画像（マウスオン） 設定　インデックスモジュール　*/
.index_module a:hover img {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

/*　タイトル枠の設定　タイル３　センター用　*/
.index_module ul.tile3 .image_text .item_icon {
	text-align: center;
	background-color: #FFFFFF;    /*タイトル枠　背景色　白へ*/
	color: #02286f;                /*タイトル文字　濃紺へ*/ 
	font-size: 1.125rem;            /*タイトルのフォントサイズ　*/
	padding: 7.5px 12px;
	margin: 0 6px 0 6px;
        border: 4px solid #045fae;    /*タイトル枠　枠線　紺色 */
        box-shadow: 0px 10px 10px -7px rgba(0,0,0,0.5);   /*タイトル枠に影追加　*/
}

/*　タイトル枠の設定　タイル３　直轄用　細二重線*/
#lab.index_module ul.tile3 .image_text .item_icon {
	text-align: center;
	background-color: #FFFFFF;    /*タイトル枠　背景色　白へ*/
	color: #02286f;                /*タイトル文字　濃紺へ*/ 
	font-size: 1.025rem;            /*タイトルのフォントサイズ　*/
	padding: 7.5px 12px;
	margin: 0 6px 0 6px;
        border: 4px double #045fae;    /*タイトル枠　枠線　紺色二重線 */
        box-shadow: 0px 10px 10px -7px rgba(0,0,0,0.5);   /*タイトル枠に影追加　*/
}

/*　タイトル枠の設定（マウスオン）　タイル３　*/
.index_module ul.tile3 a:hover .image_text .item_icon,
#lab.index_module ul.tile3 a:hover .image_text .item_icon {
	background:linear-gradient(to right, #42c1dc,#035dad);  /*背景色*/
	color: #FFFFFF;
	font-size: 1.125rem;            /* マウスオンで　タイトル文字大きさ変えず */
        border-top: 4px solid transparent;     /* タイトルの上　透明枠追加 */
	border-right: 4px solid #FFFFFF;     /* タイトルの右　透明枠 */
	border-left: 4px solid  #FFFFFF;    /* タイトルの左　透明枠 */
	border-bottom: 4px solid transparent;   /* タイトルの下の枠追加 */
	margin: 0;
}

/*　ディスクリプションの設定 　タイル３　*/
.index_module ul.tile3 .image_text .description {
	color: #081e48;     /* ディスクリプションの文字色　4D4D4D -> 081e48*/
	font-size: 1rem;     /* ディスクリプションのフォントサイズ　0.75 -> 1 */
	text-align: left;
	padding: 8px 10px 0 10px;   /* ディスクリプションまわりのpadding 上側　38 ->8  */
}

/*　ディスクリプションの設定（マウスオン）　タイル３　*/
.index_module ul.tile3 a:hover .image_text .description {
	padding-top: 2px;      /* ディスクリプションまわりのpadding 　全体32 ->2  */
}

/* tile3 */
.index_module ul.tile3 li {
	width: 33.33%;
	margin-right: 0;
	box-shadow: none;
}
.index_module ul.tile3 .image_text .image {
	padding-bottom: 24.0237%;
}
.index_module ul.tile3 li .image_text .text {
	padding: 0;
}
.index_module ul.tile3 li .image_text .text div.item_icon {
	margin-bottom: 0;
}





/*  4カラム画像  */
.index_module ul.tile4 li .image_text  .image img {      
         box-shadow: 0px 2px 12px -5px rgba(0,0,0,0.5);   /*リンク用画像に影追加　*/
	border-top: 1px solid gray;   /* サムネイル画像の上部　枠線　*/
	border-right: 1px solid gray;   /* サムネイル画像の右側　枠線　*/
	border-left: 1px solid gray;   /* サムネイル画像の左側　枠線　*/
         border-radius: 15px;  /* サムネイル画像の上部　角丸　*/
         margin: 0 auto;
	/* width: auto;     サムネイル画像の表示　枠の高さを規準　*/
	height: 70%;    /* サムネイル画像の表示　枠の高さの1.69倍　*/
}

.index_module ul.tile4 li a:hover {
	text-decoration: none;
}


/*　タイル4　*/
.index_module ul.tile4 li  a:hover .image_text  .image img {
           opacity: 0.5;                         
/* opacity追加　白四角　マウスオンで表示（下のサムネイル画像が淡い色になる）　*/
}

/*　タイトル枠の設定　タイル4　　*/
.index_module ul.tile4 .image_text .item_icon {
	text-align: center;
	background-color: #FFFFFF;    /*タイトル枠　背景色　白へ*/
	color: #02286f;                /*タイトル文字　濃紺へ*/ 
	font-size: 0.9rem;            /*タイトルのフォントサイズ　*/
	padding: 7.5px 12px;
	margin: 0 6px 0 6px;
        border: 4px solid #045fae;    /*タイトル枠　枠線　紺色 */
        box-shadow: 0px 10px 10px -7px rgba(0,0,0,0.5);   /*タイトル枠に影追加　*/
}

/*　タイトル枠の設定（マウスオン）　タイル4　*/
.index_module ul.tile4 a:hover .image_text .item_icon,
#lab.index_module ul.tile3 a:hover .image_text .item_icon {
	background:linear-gradient(to right, #42c1dc,#035dad);  /*背景色*/
	color: #FFFFFF;
	font-size: 0.9rem;            /* マウスオンで　タイトル文字大きさ変えず */
        border-top: 4px solid transparent;     /* タイトルの上　透明枠追加 */
	border-right: 4px solid #FFFFFF;     /* タイトルの右　透明枠 */
	border-left: 4px solid  #FFFFFF;    /* タイトルの左　透明枠 */
	border-bottom: 4px solid transparent;   /* タイトルの下の枠追加 */
	margin: 0;
}

/*　ディスクリプションの設定 　タイル4　*/
.index_module ul.tile4 .image_text .description {
	color: #081e48;     /* ディスクリプションの文字色　4D4D4D -> 081e48*/
	font-size: 1rem;     /* ディスクリプションのフォントサイズ　0.75 -> 1 */
	text-align: left;
	padding: 8px 10px 0 10px;   /* ディスクリプションまわりのpadding 上側　38 ->8  */
}




/*　記事モジュール　*/
/* ------ article_module ------ */

#pamphlet.article_module {
	margin: 0;  /* 25px auto 0 auto*/
	padding: 0 auto;    /*  0 auto 25px auto */
}

/*　問い合わせ高さ位置など　*/
/*パンフレット画像に影　追加　*/
#pamphlet img{
       box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.8);     
}

/*問い合わせ 位置を下へ*/
#toiawase.article_module{
       margin: 150px 0 0 10px;
}



/* 1280px：コンテンツ縮小
------------------------------ */
@media print, screen and (max-width: 1279px) {
	#contents_main {
		margin: 0;
		padding: 0 40px;
		max-width: 1280px;
	}
	.main_column,
	.main_column.bc_circuit {
		margin-left: auto;
		margin-right: auto;
	}
}

/* 979px：コンテンツ縮小
------------------------------ */
@media print, screen and (max-width: 979px) {
	#contents_main {
		margin: 0;
		padding: 0 1rem;
		max-width: 1280px;
	}
  .article_module {
    margin: 1rem auto 0 auto;
    padding: 0 1rem 1rem 1rem;
  }
  h3 {
    min-width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .index_module ul.tile2 li,
  .index_module ul.tile3 li {
    width: 100%;
  }
  .index_module ul.tile1 li .image_text .image,
  .index_module ul.tile2 li .image_text .image,
  .index_module ul.tile3 li .image_text .image {
    max-width: 100%;
  }
}