﻿/*
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
外部参照cssファイル  ファイル名：route.css
作成日：2012/1/23　更新日：2020/2  
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
. ---class属性	(複数設定可)
# ---id属性	(ページ内一意、アンカー指定可)
*/

/*====================================*/
/*基本枠				 */
/*====================================*/
body {
	width:100%;
	font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
	margin:0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

div.contents {
	width: 90%;
	position: relative;
	max-width: 1200px;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	padding-top: 60px;
}

/*====================================*/
/*ヘッダ				  */
/*====================================*/
.site-header{
	z-index: 9999;
	background-color: rgba(255,255,255,0.92);/*白の透過*/
	display: flex;
	position: fixed;
	width: 100%;
	height:40px;
	padding: 20px 0 0 0;/*上右下左*/
	border-bottom:solid 1px #2762A2;
	justify-content: center;
}
/* chrome safari opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .site-header {
    }
}
/* Firefox */
@-moz-document url-prefix() {
    .site-header {
    }
}
/* IE */
_:-ms-lang(x)::-ms-backdrop, .site-header {
}

div.global-menu {
	width: 90%;
	position: relative;/*相対位置*/
	max-width: 1200px;
	margin:0;
	padding: 0;
	display: flex;
	justify-content: space-between;   
}

/*ヘッダロゴ*/
.header-logo img{
	height: 30px;
	width: auto;
	margin-top:0;
}

/*ナビゲーション*/
nav{
	align-items: center;/*上下中央*/
	text-align: center;
}
nav ul{
	margin: 0 ;
	padding: 0 ;
}

nav li{
	list-style: none;
	display: inline-block;
	vertical-align: middle;
	padding: 0px ;
	position: relative;/*サブメニュープルダウン 基準位置 */
}

nav li:not(:last-child){ /*最後の要素以外に右線を付ける*/
/*	border-right:2px solid #ddd;*/
}

nav a{
	text-decoration: none;
	color:#2762A2;
	display:block;
	padding: 0px 10px 2px 10px ;/*上右下左*/
	border-bottom:2px solid #ddd;
}
nav a.current{
	color: #00B0F0;
	border-bottom: 2px solid #00B0F0;
}
nav a:hover{
	color:#159CD3;
	border-bottom:2px solid #159CD3;
}

/*サブメニュープルダウン */
nav ul li ul{
	display: none; 
	position: absolute;  /*絶対配置 */
}

nav ul li:hover ul {
	display: block;      /*マウスポインタが載っている項目の内部にあるリストを表示 */
}

nav ul li ul li a{
	display: block;
	padding: 6px 10px 4px 10px ;/*上右下左*/
	background: #F0EFFE;
}

/*====================================*/
/*パンくずリスト				  */
/*====================================*/
.breadcrumbs {
	clear:both;  /*回り込み解除*/
	border-top	 :solid 0px #2762A2;
	border-bottom:solid 0px #2762A2;
	padding:10px 0;
	font-size: 0.8em;  /*ブラウザ基準16pt 1em*/
  }

/*パンくずリスト：リンク設定*/
.breadcrumbs a {
	 text-decoration:none;		/*文字の装飾:装飾なし*/
}
.breadcrumbs a:link	{color:#2762A2;}
.breadcrumbs a:visited {color:#2762A2;}
.breadcrumbs a:hover   {
	 text-decoration:underline;		/*文字の装飾:下線*/
	 color:#159CD3;
}
ol.breadcrumbs_list {
	list-style-type: none;
	padding-left:0;
	margin:0;
}
.breadcrumbs_list li {
	display: inline-block;/*横に並ぶように*/
	list-style: none;
}
.breadcrumbs_list li:after { /*最後の要素以外に右線を付ける*/
	content: '>';/* >を表示*/
	padding: 0 0.2em;
	color: #2762A2;
}
.breadcrumbs_list li:last-child:after {
	content: none;
}

/*====================================*/
/*TOP画像				  */
/*====================================*/
/*枠*/
.top-image-container {
	position: relative;
}

/*画像*/
.top-image {
}
.top-image img {
	width: 100%;
}

/*画像内文字*/
.top-image-text {
	position: absolute;
	bottom: 20px;
	right: 20px;
	padding: 15px;
/*	background-color: rgba(255,255,255,0.6);/*白の透過*/
	background-color: rgba(0,0,0,0.5);/*黒の透過*/
	font-size: 1.2em; /*ブラウザ基準16pt 1em*/;
	font-weight: bold;
	line-height: 240%;
/*フェードイン表示*/
    opacity: 0;/*透明度 0:透明・非表示*/
    animation: fadein 2s ease forwards;/*名前animation-name アニメーションの時間animation-duration　アニメーションの進行速度animation-timing-function　終了時状態forwards*/
	animation-delay: 0.3s;
}

/*フェードイン表示*/
.fade-in {
    opacity: 0;/*透明度 0:透明・非表示*/
    animation: fadein 6s ease forwards;/*名前animation-name アニメーションの時間animation-duration　アニメーションの進行速度animation-timing-function　終了時状態forwards*/
/*	color:#000000;*/
	color:#fff;
	line-height: 160%;
}
@keyframes fadein {
    100% {  opacity: 1;}/*終了時状態*/
}
 
/*アニメーション遅延*/
.text1 {animation-delay: 0.3s;}
.text2 {animation-delay: 1.2s;}
.text3 {animation-delay: 1.5s;}

/*右寄せボタン*/
.box-right {text-align:right;}

.more-button {
	display: inline-block;
	border: solid 2px #fff;
	padding: 2px 10px;
	margin-top:10px;
}
.more-button a {
	 text-decoration:none;		/*文字の装飾:装飾なし*/
}
.more-button a:link  	{color:#fff;}
.more-button a:visited	{color:#fff;}
.more-button a:hover  	{color:#159CD3;}

a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

/*====================================*/
/*本文枠				  */
/*====================================*/
/*大枠*/
div#main-contents-container {
	clear: both; /*回り込み解除*/
	margin: auto;
	max-width: 100%;
	min-height: calc(100vh - 350px);
	border: 0px solid #2762A2;
}

/*本文枠*/
div#main-contents {
	background-color: #F5F8FF;
	max-width: 100%;
	margin: auto;/*中央寄せ*/
    padding: 10px;
	text-align: left;
	line-height: 180%;
}

/*====================================*/
/*本文				  */
/*====================================*/
/*本文-リンク設定*/
#main-contents a {
	 text-decoration:none;		/*文字の装飾:装飾なし*/
	 text-decoration:underline;		/*文字の装飾:下線*/
  	 color:#000080;
}
#main-contents a:link	{color:#000080;}
#main-contents a:visited {color:#000080;}
#main-contents a:hover   {
	 text-decoration:underline;		/*文字の装飾:下線*/
	 color:#159CD3;
}

/*本文-見出し*/
#main-contents h1,h2,h3,h4 {
	max-width: 80%;
	margin: 10px auto;
	padding: 5px 3px 3px 3px;	/*上右下左*/
/*	background-image: url("/img/bg3.jpg");*/
	background: -moz-linear-gradient(left, #fff,#898BFC );
	background: -webkit-linear-gradient(left, #fff,#898BFC );
	background: linear-gradient(to right, #fff,#898BFC );
	border-top:solid 0px #2762A2;
	border-bottom:solid 1px #2762A2;
	border-left:solid 4px #2762A2;
	border-right:solid 0px #2762A2;
}

/*本文-小見出し*/
#main-contents h1.sub,h2.sub,h3.sub,h4.sub {
	max-width: calc(80% - 20px);
	margin: 10px auto;
	padding: 5px 3px 3px 3px;	/*上右下左*/
	border-top:solid 0px #2762A2;
	border-bottom:solid 1px #2762A2;
	border-left:solid 4px #2762A2;
	border-right:solid 0px #2762A2;
}

/*本文-段落a*/
p.a {
	max-width: calc(80% - 20px);
	margin: 20px auto;
	font-size: 1em;  /*ブラウザ基準16pt 1em*/
}

div.a {
	max-width: calc(80% - 20px);
	margin: 20px auto;
	font-size: 1em;  /*ブラウザ基準16pt 1em*/
}

/*リスト（矢印マーク）*/
ul.list {
	 margin-top:0px;	
	 list-style:url(/img/arrow033_06.gif);
	 line-height: 140%;
}

/*水色テーブル*/
table.mizu {
	width: 100%;
	border-spacing: 5px;
	font-size: 1em;  /*ブラウザ基準16pt 1em*/
	line-height: 130%;
	margin-left:auto;
	margin-right:auto;
}
table.mizu td {
	padding: 5px;	/*上右下左*/
	font-size: 1em;  /*ブラウザ基準16pt 1em*/
	line-height: 130%;
}
td.mizu-title {
	background:#DEE8FA;
	text-align:center; 
}

/*水色テーブル2 haken*/
table.mizu2 {
	width: 100%;
	border-collapse: collapse;
	border:1px solid #333;
	border-spacing: 5px;
	font-size: 12.0pt;	/*12.0pt xx-small x-small small medium large x-large xx-large*/
	line-height: 130%;
}
table.mizu2 td {
	border-collapse: collapse;
	border:1px solid #333;
	padding: 5px;	/*上右下左*/
	font-size: 12.0pt;	/*12.0pt xx-small x-small small medium large x-large xx-large*/
	line-height: 130%;
   	text-align:center; 
}
col.col1 {
	width: 240px;
	}

/*地図表示用（汎用）*/
iframe {
	border:none;
}
img {
	border:none;
}

/*====================================*/
/*文字修飾			*/
/*====================================*/
/* 赤文字 */
.font-color-red {
	color: #ff0000;
}
/* 強調文字 */
.font-bold-20 {
	font-weight:bold;;
	font-size: 2em;  /*ブラウザ基準16pt 1em*/
}
.font-bold-18 {
	font-weight:bold;;
	font-size: 1.8em;  /*ブラウザ基準16pt 1em*/
}
.font-bold-16 {
	font-weight:bold;;
	font-size: 1.6em;  /*ブラウザ基準16pt 1em*/
}
.font-bold-14 {
	font-weight:bold;;
	font-size: 1.4em;  /*ブラウザ基準16pt 1em*/
}
.font-bold-12 {
	font-weight:bold;;
	font-size: 1.2em;  /*ブラウザ基準16pt 1em*/
}
/* 小文字 */
.font-bold-08 {
	font-size: 0.85em;  /*ブラウザ基準16pt 1em*/
}
.font-bold-06 {
	font-size: 0.6em;  /*ブラウザ基準16pt 1em*/
}

/*====================================*/
/*ナビゲーションボタン			*/
/*====================================*/
#page_top{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	background: #961818;
	opacity: 0.6;
}

#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}

#page_top a::after{
	content: "\0bb";
	font-size: 45px;
	font-weight: bold;
	transform: rotate( -90deg );
	color: #fff;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 6px;
	left: 0;
	margin: auto;
	text-align: center;
}

/*====================================*/
/*フッタ				  */
/*====================================*/
.site-footer{
	clear: both; /*回り込み解除*/;
	background: #666666;
	margin: 0;
	padding: 20px 5px;
}

div.footer-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;/*均等配置*/;
	max-width: 70rem;
	margin: auto;
	color: #fff;
	font-size: 0.85em;  /*ブラウザ基準16pt 1em*/
}

/*サイトマップリスト*/
ul.sitemaplist li{
	 list-style:url(/img/arrow012_05.gif);
	 line-height: 160%;
}
ul.sitemaplist li.none {/*空白行*/
	list-style: none;
	height: 1.6em;
}
ul.sitemaplist a{
	text-decoration: none;
	color: #fff;
}
ul.sitemaplist a:hover{
	color: #fff;
	border-bottom: 2px solid #fff;
}

/*段落1*/
ul.sitemaplist li img {
	vertical-align: top;
	width: 120px;
	margin-left:0.5em;
}

/*コピーライト*/
.copyright{
	color: #fff;
	font-size: 0.8em; /*ブラウザ基準16pt 1em*/;
	text-align: center;
	border-top: solid 0.5px #C0C0C0;
	padding: 10px 0;
}

