/* **************#top************* */

#top {
	padding: 0;
	margin: 0 auto;
	/*width: 100vw;*/
 	height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat:no-repeat;
}

@media screen and (max-width: 640px) {
  #top {
	background-position: center;
	/*width: 100vw;*/
 	height: 100vh;
  }
}

#top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

#top .data {
	position:absolute;
	bottom: 0;
	margin: 0 auto;
	width:100%;
}

@media screen and (max-width: 640px) {
#top .data {
	position:absolute;
	bottom: 0;
	margin: 0 auto;
	width:100%;
}
}

/* **************#data_menu************* */

#data_menu {
	padding: 0;
	margin: 0 auto;
	max-width: 1140px;
}

@media screen and (max-width: 640px) {
#data_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

#data_menu .dit {
	padding: 0;
	margin: 0 auto;
	width:100%;
}

@media screen and (max-width: 640px) {
#data_menu .dit {
	padding: 0;
	margin: 0 auto;
	width:90%;
}
}

#data_menu .dit h2 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 500;
	font-size:300%;
	line-height:1.6em;	
	background-image:url(image);
	max-height: 100%;
	text-align:center;
	letter-spacing:3px;
	margin-bottom: 10%;
	text-shadow: #FFFFFF 2px 2px 0px, #FFFFFF -2px 2px 0px,
             #FFFFFF 2px -2px 0px, #FFFFFF -2px -2px 0px;
}

@media screen and (max-width: 1640px) {
#data_menu .dit h2 {
	font-size:268%;
	margin-bottom: 8%;
}
}

@media screen and (max-width: 640px) {
#data_menu .dit h2 {
	font-size:128%;
	line-height:1.4em;
	letter-spacing:2px;
	margin-bottom: 3%;
	text-align: left;
	text-shadow: #FFFFFF 1px 1px 0px, #FFFFFF -1px 1px 0px,
             #FFFFFF 1px -1px 0px, #FFFFFF -1px -1px 0px;
}
}

#data_menu .dit h2 span {
	font-size: 90%;
}

#data_menu .dits {
	-js-display: flex;
	display: flex;
	 flex: 1;
	margin:0 auto 1% auto;
	align-items: stretch;
	justify-content: stretch;
}

@media screen and (max-width: 640px) {
#data_menu .dits  {
	margin:0 auto 0 auto;
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
}

#data_menu .dits h2 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 500;
	font-size:144%;
	line-height:1.6em;	
	background-image:url(image);
	max-height: 100%;
	text-align:center;
	letter-spacing:2px;
	margin-bottom: 5%;
}

#data_menu .dits h2 span {
	font-size: 90%;
}

@media screen and (max-width: 640px) {
#data_menu .dits h2 {
	font-size:114%;
	margin-bottom: 3%;
}
}

#data_menu .dits h3 {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 144%;
	line-height:1.6em;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	letter-spacing:5px;
	color: #4C9CD5;
	margin-bottom: 5%;
}

#data_menu .dits p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.8em;
	text-align:left;
	background-image:url(image);
	max-height: 100%;
}

@media screen and (max-width: 680px) {
#data_menu .dits p {
	font-size:88%;
	line-height:1.6em;
}
}

#data_menu .dits section {
	width:98%;
	margin: 0 1% 0 1%;
	background-position: center;
	/*background-color: rgba(0,0,0,0.7);*/
}

@media screen and (max-width: 640px) {
#data_menu .dits section {
	margin:0 auto;
	width:100%;
}
}

#data_menu .dits section a {
	display:block;
	/*background-color: rgba(0,0,0,0.7);*/
}

#data_menu .dits section a:hover{
/*  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";*/
  text-decoration:none;
	/*background-color: rgba(255,255,255,0);*/
}

#data_menu .free {
	background-color: rgba(19,54,86,0.9);
}
#data_menu .free a:hover{
	background-color: rgba(255,110,0,0.9);
}

#data_menu .free h2 {
	color: #FFFFFF;
}

#data_menu .free p {
	color: #FFFFFF;
}

#data_menu .s_pack {
	background-color: rgba(76,156,213,0.9);
	
	
}
#data_menu .s_pack a:hover{
	background-color: rgba(255,110,0,0.9);
}

#data_menu .s_pack h2 {
	color: #FFFFFF;
}

#data_menu .s_pack p {
	color: #FFFFFF;
}

#data_menu .topics {
	background-color: rgba(255,255,255,1);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#data_menu .txt {
	margin: 0 auto;
	width: 90%;
	padding: 10% 5%;
}

@media screen and (max-width: 640px) {
#data_menu .txt {
	width: 90%;
	padding: 5% 5%;
	}
}

/* **************#menus************* */

#menus {
	padding: 0;
	margin: 0 auto;
 	-js-display: flex;
	display: flex;
	background-color: rgba(255,255,255,0.8);
}

@media screen and (max-width: 640px) {
	#menus {
	padding: 0;
	width:100%;
	}
}

#menus h2 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 500;
	font-size:144%;
	line-height:2em;	
	background-image:url(image);
	max-height: 100%;
	text-align:center;
	letter-spacing:2px;
	margin-bottom: 5%;
	color: #FFFFFF;
}

#menus h2 span {
	font-size: 90%;
}

@media screen and (max-width: 640px) {
#menus h2 {
	font-size:114%;
	margin-bottom: 3%;
}
}

#menus h3 {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
	font-weight: normal;
	line-height:1.6em;
	text-align: center;
	background-image:url(image);
	max-height: 100%;
	margin-bottom: 1%;
}

#menus p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.8em;
	text-align:left;
	background-image:url(image);
	max-height: 100%;
	color: #FFFFFF;
}

@media screen and (max-width: 640px) {
#menus p {
	font-size:88%;
	line-height:1.6em;
}
}

#menus .fa {
	display: inline;
}

/* **************#menus_menu************ */

#menus_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}

@media screen and (max-width: 640px) {
#menus_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

#menus_menu .dit {
	-js-display: flex;
	display: flex;
	 flex: 1;
	margin:0 auto;
	align-items: stretch;
	justify-content: stretch;
}

@media screen and (max-width: 640px) {
#menus_menu .dit  {
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
}

#menus_menu .dit section {
	width:100%;
	text-align: center;
	background: linear-gradient(-45deg, rgba(19,54,86,0.9),rgba(76,156,213,0.9)) fixed;
  background-size: cover;
	
}

@media screen and (max-width: 640px) {
#menus_menu .dit section {
	width:100%;
	border-bottom: 1px solid #EFEFEF;
}
}

#menus_menu .dit section a {
	display:block;
	
}

#menus_menu .dit section a:hover{
  text-decoration:none;
	background: linear-gradient(-45deg, rgba(76,156,213,0.9),rgba(19,54,86,0.9)) fixed;
}

#menus_menu .txt {
	margin: 0 auto;
	width: 80%;
	padding: 15% 10%;
}

@media screen and (max-width: 1440px) {
#menus_menu .txt {
	width: 90%;
	padding: 10% 5%;
	}
}

@media screen and (max-width: 640px) {
#menus_menu .txt {
	width: 90%;
	padding: 5% 5%;
	}
}

/* **************#access************* */

#access {
	padding: 0;
	margin: 0 auto;
 	-js-display: flex;
	display: flex;
	background-color: rgba(255,255,255,0.8);
}

@media screen and (max-width: 640px) {
	#access {
	padding: 10% 0 0 0;
	width:100%;
	}
}

#access h2 {
	font-family: 'Noto Sans Japanese', serif;
	font-weight: 500;
	font-size: 128%;
	color:#FFFFFF;
	background-image:url(image);
	max-height: 100%;
	text-align: center;
	margin-bottom: 3%;
}

@media screen and (max-width: 640px) {
#access h2 {
	font-size:128%;
	text-align: center;
	margin-bottom: 10%;
}
}

#access h3 {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	font-weight: normal;
	line-height:1.8em;
	text-align: center;
	background-image:url(image);
	max-height: 100%;
	margin-bottom: 1%;
}

#access p {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.8em;
	text-align: center;
	background-image:url(image);
	max-height: 100%;
}

@media screen and (max-width: 640px) {
#access p {
	font-size:88%;
	line-height:1.6em;
}
}

#access .fa {
	display: inline;
}

#access table {
	width: 100%;
	margin:0 auto 3% auto;
	padding: 0;
	border-collapse: collapse;
}

#access table a:link{
	text-decoration: underline;
	color: #22B0C7;
}

#access table a:visited {
	text-decoration: underline;
	color: #22B0C7;
}

#access table a:hover{
	text-decoration: none;
	color: #FFA600;
}

#access table a:active {
	text-decoration: underline;
	color: #22B0C7;
}

#access table th {
	margin:0;
	padding: 10px 30px 10px 0px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.8em;
	vertical-align: top;
	text-align: left;
	font-weight: normal;
	background-image:url(image);
	max-height: 100%;
	word-break: keep-all;
	border-bottom:1px solid #EFEFEF;
}

#access table td {
	margin:0;
	padding: 10px 0px 10px 0px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:100%;
	line-height:1.8em;
	text-align:left;
	vertical-align: top;
	background-image:url(image);
	max-height: 100%;
	border-bottom:1px solid #EFEFEF;
}

@media screen and (max-width: 640px) {
#access table tr{
        display: block;
        /*margin-bottom: 1.2em;*/
		padding:0;
    }
#access table th,
#access table td{
        display: list-item;
		list-style:none;
        border: none;
		font-size:88%;
		line-height:1.6em;
    }
#access table th{
	padding:1% 0;
	background: rgba(76,156,213,0.9);
	text-align:center;
	color:#FFFFFF;
	width:100%;
}
#access table td{
	padding:5% 0;
	}
}

/* **************#access_menu************ */

#access_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}

@media screen and (max-width: 640px) {
#access_menu {
	padding: 0;
	margin: 0 auto;
	width:100%;
}
}

#access_menu .dit {
	-js-display: flex;
	display: flex;
	 flex: 1;
	margin:0 auto;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 640px) {
#access_menu .dit  {
 -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
}

#access_menu .dit section {
	width:100%;
}

@media screen and (max-width: 640px) {
#access_menu .dit section {
	width:100%;
}
}

#access_menu .txt {
	margin: 0 auto;
	padding: 5%;	
}

#access_menu .accessmap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
#access_menu .accessmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% ;
    height: 100% ;
}