@charset "utf-8";

@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width:920px){

	.pc{display:none!important;}
	.sp{display:block!important;}
	
	
/*header
----------------------------------------------------*/
	header .contents{
		position:relative;
		height:100px!important;
		width:90%;
	}
	header .contents img{
		width:60px!important;
		
	}
	header .contents h1.mainTtl{
		position:absolute;
		top:10px;
		left:70px;
		padding-top:0.5em;
		z-index:9;
		font-size:15px;
		color:#000;
	}
	header .contents h3.subTtl{
		position:absolute;
		top:35px;
		left:70px;
		padding-top:0.5em;
		z-index:9;
		font-size:15px;
		color:#000;
	}
	header div.rightSide{
		position:absolute;
		top:30px;
		right:5px;
		color:#000;
		text-align:right;
		font-size:10px;
	}
	
	header .contents h2.mainTtlEng{
		position:absolute;
		top:30px;
		left:100px;
		padding-top:0.5em;
		z-index:9;
		font-size:13px;
		color:#000;
	}
	header .contents h2.subTtlEng{
		position:absolute;
		top:10px;
		left:100px;
		padding-top:0.5em;
		z-index:9;
		font-size:13px;
		color:#000;
	}
	
/*globaNav
----------------------------------------------------*/
	#mddNav {
		display:none;
	}
	
/*humbergerMenu
----------------------------------------------------*/
	#nav-drawer {
		position: relative;
		display:block;
	}
	.nav-unshown {
		display:none;
	}
	#nav-open {
		display: inline-block;
		width: 30px;
		height: 22px;
		vertical-align: middle;
	}
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: #000;
		display: block;
		content: '';
		cursor: pointer;
	}
	#nav-open span:before {
		bottom: -8px;
	}
	#nav-open span:after {
		bottom: -16px;
	}
	#nav-close {
		display: none;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;
		transition: .3s ease-in-out;
	}
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 90%;
		max-width: 330px;
		height: 100%;
		background: #fff;
		transition: .3s ease-in-out;
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);
		font-size:20px;
		text-align:left;
		padding-left:2em;
	}
	#nav-input:checked ~ #nav-close {
		display: block;
		opacity: .5;
	}
	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
	#nav-content p.langBtn{
		font-size:16px;;
		color:#000;
		padding:2px;
		font-size:14px;
		width:100%;
		margin-bottom:10px;
		margin-top:10px;
	}
	#nav-content p.langBtn:hover{
		cursor:pointer;
	}
	#nav-content p span{
		font-size:16px;;
		color:#fff;
		border-radius:10px;
		background:#087642;
		padding:1px;
		font-size:14px;
		width:80px;
		text-align:center;
		margin-left:0.5em;
	}
	#nav-content > ul {
		margin: 0 auto;
		width: 100%;
		height: 45px;
		text-align: left;
	}
	#nav-content > ul > li {
		width: 100%;
		box-sizing: border-box;
		font-size:16px;
	}
	#nav-content > ul > li > ul >li {
		padding-left:1em;
		height:40px;
		margin-bottom:10px;
	}
	#nav-content > ul > li > ul >li a {
		height: 40px;
		font-weight: bold;
		line-height: 20px;
		display: block;
		transition: all 0.2s linear;
		text-decoration: none;
		color: #000;
	}
	#nav-content > ul > li > ul >li:hover a {
		background:#087642;
		color:#fff;
	}
	#nav-content > ul > li > a {
		height: 40px;
		font-weight: bold;
		line-height: 20px;
		display: block;
		transition: all 0.2s linear;
		text-decoration: none;
		color: #000;
	}
	#nav-content > ul > li:hover > a {
		background:#087642;
		color:#fff;
	}
	#contactOpen {
		display:none;
	}
	
/*mordal window
----------------------------------------------------*/
	.modal{
		display: none;
		height: 90vh;
		position: fixed;
		top: 0;
		width: 100%;
		z-index:9999;
	}
	.modal__bg{
		background: rgba(0,0,0,0.8);
		height: 100vh;
		position: absolute;
		width: 100%;

	}
	.modal__content{
		background: #fff;
		padding: 20px;
		width: 80%;
		height:100vh;
		overflow-y:scroll;
	}
	.modal__content h2{
		padding-top:1em;
		margin-bottom:20px;
	}
	.modal__content p{
		margin-bottom:1em;
	}
	.modal__content dt{
		display:block;
		}
	.modal__content dd{
		display:block;
	}
	
/*sec01
----------------------------------------------------*/
	#sec01{
		padding: 0;
		font-size:16px;
		color:#000;
	}
	.bg-slider {
		height:50vh;
		background-position:center center;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bg-slider img{
		width:20%
	}
	#sec01 .contents{
	margin:0 auto;
	padding-right:1em;
	}
	#sec01 .contents h2{
		margin:1em 0 1em 0;
	}
	#sec01 .contents p{
		margin-bottom:1.2em;
		font-size:16px;
		padding:10px;
		width:100%!important;
	}
	#sec01 .contents{
		margin:0 auto;
		width:100%;
	}
	h1.ttl{
		clear:both;
		font-weight:bold;
		margin:0 10px 0 10px;
		padding: 0.25em 0;
		color: #333;
		border-bottom: solid 3px #ddd;
		position: relative;
	}
	h1.ttl:after {
		position: absolute;
		content: " ";
		display: block;
		border-bottom: solid 3px #333;
		bottom: -3px;
		width: 20%;
	}
	#sec01 .contents ul{
		margin:10px 0 0 10px;
		font-size:10px;
	}
	#sec01 .contents dl{
		margin:10px 0 0 20px;
		width:95%;
		font-size:12px;
	}
	#sec01 .contents dt{
		margin:0;
		padding:0;
		width: 150px;
		color:#000;
		font-weight:600;
	}
	#sec01 .contents dd{
		margin:0;
		padding-left:2em;
	}
	#sec01 .contents dd a{
		text-decoration:underline;
		color:#087642;
	}
	#sec01 .contents dd a:hover{
		text-decoration:underline;
		color:#087642;
		transition: all 0.2s ease-out;
	}
	.map-wrapperSmart{
		width:100vw;
		margin:0 auto;
		position:relative;
	}
	#mapSmart{
		width:1200px;
	}
	
/*flexbox style
----------------------------------------------------*/
	*{
		box-sizing:border-box;
	}
	.flexbox{
		display:flex;
		flex-direction:row;
		width:100%;
		height:auto;
		padding:5px;
	}
	.box-item{
		width:50%;
		text-align:left;
		margin-right:10px;
		padding:15px 10px;
		font-size:14px;
	}
	.box-item h3{
		border-bottom:1px dotted #000;
		color:#000;
		font-size:12px;
		font-weight:bold;
		margin-top:1em;
	}
	#sec01 .contents dl.linkStyle{
		margin:15px 0 0 5px;
		width:100%;
	}
	#sec01 .contents dl.linkStyle dt{
		margin:0;
		padding:0;
		width: 100%;
		color:#000;
		font-weight:600;
		font-size:12px;
	}
	#sec01 .contents dl.linkStyle dd{
		margin:0;
		padding:0;
		font-size:12px;
	}
	#sec01 .contents dl.linkStyle dd a{
		text-decoration:underline;
		color:#0510fa;
	}
	#sec01 .contents dl.linkStyle dd a:hover{
		text-decoration:underline;
		color:#0510fa;
		transition: all 0.2s ease-out;
	}
	.curLink{
		width:45%;
		padding:8px;
		border-radius:20px;
		background:#087642;
		color:#fff;
		font-size:13px;
		position:absolute;
		right:0;
		bottom:0;
		text-align:center;
		z-index:2;
	}	
	#sec01 .contents ul.commonList{
	list-style: none;
	clear:both;
	}
	#sec01 .contents ul.commonList li {
		background: url(../images/icon_common_list.png) no-repeat left 0.55em;
		padding-left: 12px;
		width:98%;
		font-size:14px;
		font-weight:600;
	}
	#sec01 .contents .boxList img{
		padding:10px;
	}
	#sec01 .contents .boxList p.detailTxt{
		margin:0;
		padding:0;
		font-size:14px;
	}
	#sec01 .contents .boxList p{
		margin:10px 0 10px 10px;
		font-size:16px;
	}
	#sec01 .contents h3.topicTtl {
		margin-top:1em;
		padding: 1rem 2rem;
		color: #fff;
		background:#087642;
	}
	#sec01 .contents .boxList dl{
		border-bottom:dotted 1px #333;
		padding-bottom:1em;
	}
	#sec01 .contents .boxList dt{
		font-size:18px;
		width:100%;
	}
	#sec01 .contents .boxList dd{
		margin:0;
		padding:0;
		font-size:16px;
		clear:both;
	}
	#sec01 .contents .boxList dd a{
		color:#000;
		text-decoration:underline;
	}
	#sec01 .contents .boxList dd a:hover{
		color:#087642;
		text-decoration:none;
		opacity:1.0;
	}
	
/*sec02
----------------------------------------------------*/
	#sec02 .contents{
		width:90%;
		margin:0 auto;
	}
	.tab-group{
		display: flex;
		justify-content: center;
		color:#eee;
		width:100%;
		font-weight:bold;
		font-size:14px;
	}
	.tab-group02{
		display: flex;
		justify-content: center;
		color:#eee;
		width:100%;
		font-weight:bold;
		font-size:14px;
	}
	.tab-group03{
		display: block;
		justify-content: center;
		color:#eee;
		width:100%;
		font-weight:bold;
		font-size:14px;
	}
	ul#sublinks {
		position: static;
		display: block;
	}
	ul#sublinks li {
		flex-grow: 1;
		padding:5px;
		list-style:none;
		text-align:center;
		cursor:pointer;
		margin-top:10px;
	}
	ul#sublinks li > a {
		border: 2px solid rgb(240,240,240);
		/*border-radius:10px;*/
		background-color:rgb(63,72,204);
		/*background-color:#087642;*/
		color: rgb(255,255,255);
		font-weight: bold;
		display: block;
		text-decoration: none;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
		width:100%;
	}	
	.tab{
		flex-grow: 1;
		padding:5px;
		list-style:none;
		text-align:center;
		cursor:pointer;
		margin-bottom:10px;
	}
	li.tab:hover{
		text-decoration:underline;
	}
	.panel-group{
		height:auto;
	}
	.panel-group dl{
		margin:0;
		border-bottom: dotted 1px #d2d2d2;
		width:100%;
		font-size:14px;
		padding:5px;
	}
	.panel-group dl:last-child{
		border-bottom:none;
	}
	.panel-group dt{
		margin:0;
		padding:0;
		float: none;
		width: 120px;
		color:#000;
	}
	.panel-group dd{
		margin:0;
		padding:0px 0px 10px 1em;
		clear:both;
	}
/*obsplan setting
----------------------------------------------------*/
	#sec02 .contents table {
		margin:0 auto;
		width: 100%;
	}

	#sec02 .contents table.datalist th{
		border: 1px solid gray;
		background-color: silver;
		border-radius:2px;
		box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	}

	#sec02 .contents table.datalist th > div{
		text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		font-size:10pt;
	}

	#sec02 .contents table.datalist th > div > a{
		text-decoration: underline;
		cursor: pointer;
	}

	#sec02 .contents table.datalist td{
		width : calc(100% / 7 - 15px);
		border:1px solid silver;
		border-radius: 1px;
		box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
		padding: 2px;
		text-align: center;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
		font-weight: normal;
		font-size: 9pt;
		color:dimgray;
		background-color:white;
	}

	#sec02 .contents table.datalist td > a{
		color:steelblue;
		font-weight:bold;
		text-decoration:none;
		cursor: pointer;
	}
	#sec02 .contents table.datalist td > a:hover{
		text-decoration:underline;
	}

	#sec02 .contents table.datalist td:first-child{
		background-color: pink;
	}
	#sec02 .contents table.datalist td:nth-child(7){
		background-color: lavender;
	}
	#sec02 .contents table.datalist tr:nth-child(2) td{
		color:black;
	}

	#sec02 .contents div.caltbl {
		height:350px;
		width: 100%;
		float:none;
		margin:20px 5px 10px 5px;
	}

	#sec02 .contents input[name="prv"] {
		float:left;
		vertical-align: middle;
		height: 25px;
	}
	#sec02 .contents select[name="year"] {
		height: 25px;
		width: 80px;
		float:left;
		vertical-align: middle;
		margin: 0px 10px;
		padding: 0px;
	}
	#sec02 .contents div#datelbl {
		height: 30px;
		float:left;
		vertical-align: middle;
		margin: 0px 10px;
		padding: 0px;
	}
	#sec02 .contents input[name="nxt"] {
		float:left;
		vertical-align: middle;
		height: 25px;
	}


/*dataAccess.html dl setting
-------------------------------------------*/
	.panel h3{
		font-size:16px;
	}
	.panel-group dl.dataAccess{
		font-size:14px;
	}

	.panel-group dl.dataGeeAccess dt {
		background: url(../images/icon_common_list.png) no-repeat left 0.55em;
		padding-left: 12px;
		width:100%;
		margin-top:1em;
		font-weight:600;
	}
	.panel-group dl.dataGeeAccess dd{
		margin:30px 0 10px 0;
		padding:0;
		width:100%;
		line-height:1.6em;
	}
	.panel .dotBox .flexbox{
		display:flex;
		flex-direction:column;
		width:100%;
		height:auto;
		min-height:150px;
	}
	.panel .dotBox .box-item{
		width:100%;
		text-align:left;
		margin-right:5px;
		padding:5px 10px;
		font-size:15.5px;
		min-height:150px;
	}
	.panel .dotBox .box-item .geeImgBox{
		display:block;
		margin:0 auto;
		text-align:center!important;
	}

/*version_history setting
----------------------------------------------------*/
	.scroll {
		overflow-x: auto;
	}
	.verhis, .verguide {
		min-width: 768px;
		margin: 0 10px 50px;
	}

/*summary setting
----------------------------------------------------*/
	ul#update li {
		font-size: 13px;
		margin-bottom: 1.0em;
	}
	ul#reffaq li {
		font-size: 12px;
	}

/*sec03
----------------------------------------------------*/
	#sec03{
		padding:30px 0 60px 0;
		background:#eee;
	}
	
	#sec03 .contents{
		width:100%;
		margin:0 auto;
	}

	#sec03 .box_left{
		display:block;
		width:100%;
		height:100%;
		border:2px solid #ddd;
		background:#fff;
		box-shadow:1px 1px 1px #333;
		margin-bottom:10px;
	}
	#sec03 .box_left:nth-child(n+1){
		display:block;
		width:100%;
		margin-right:7px;
		border:2px solid #ddd;
		background:#fff;
		box-shadow:1px 1px 1px #333;
		margin-bottom:10px;
	}
	#sec03 .box_left p,
	#sec03 .box_right p{
		padding:20px;
	}
	#sec03 .box_left img,
	#sec03 .box_right img{
		width:60%;
		height:auto;
		margin:0 auto;
		padding:20px 20px 20px 20px;
		display:block;
	}

/*sec05
----------------------------------*/
	.sec05{
		padding: 10px 0 0 0;
		color:#000;
	}

	.sec05 h4{
		padding-left:1em;
		font-size:16px;
	}

	.sec05 .contents{
		margin:0 auto;
		width:94%;
	}

	*{
		box-sizing:border-box;
	}

	.sec05 .contents .flexbox{
		display:flex;
		flex-direction:column;
		width:100%;
		height:auto;
		min-height:150px;
	}
	.sec05 .contents .box-item{
		width:100%;
		text-align:left;
		margin-right:5px;
		padding:5px 10px;
		font-size:18px;
		min-height:150px;
	}
	.sec05 .box_left{
		width:100%;
		height:auto!important;
	}

/*footer
----------------------------------------------------*/
	footer{
		padding:0;
		height:auto;
	}
	footer .contents{
		margin:0 auto;
		width:100%;
	}
	footer ul{
		margin-bottom:10px;
		text-align:center;
	}
	footer ul li{
		display:block;
		width:100%;
		color:#000;
		font-size:12px;
	}
	footer ul li:first-child{
		margin:0;
	}
	footer ul li ul li:nth-child(n+1){
		float:none;
		margin:0;
	}
	footer ul li a:link{
		color:#000;
		text-decoration:none;
	}
	footer ul li a:visited {
		color:#000;
		text-decoration:none;
	}
	footer ul li a:hover {
		/*color:#0510fa;*/
		color:#087642;
		text-decoration:underline;
	}
/*page top
----------------------------------------------------*/
	div#pageTop {
		text-align: center;
		cursor: pointer;
		color:#fff;
		margin:0;
		background:#333;
		font-size:12px;
	}


/*faqstyle_v3.css
----------------------------------------------------*/
	ul#faq_list {
		position: relative;
		top: 0px;
		left: 0px;
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	ul#faq_list h3 {
		font-size: 18pt;
		letter-spacing: 0.2em;
		border-left: 10px solid rgb(0, 128, 128);
		border-bottom: 1px solid rgb(0, 128, 128);
		padding-left: 10px;
		margin:1em 0 1em 0;
		clear:both;
	}
	ul#faq_list li {
		position: relative;
		margin-bottom: 10px;
		padding: 0px;
		font-size: 16pt;
		border: 1px solid gray;
		border-radius: 3px;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
		background-image: url('/images/icon_link.png');
		background-repeat: no-repeat;
		background-position: 99% 50%;
		transition: 0.1s;
		width:100%;
		height:auto;
	}
	ul#faq_list li > a > div {
		position: absolute;
		top: 3px;
		left: 5px;
		width: 50px;
		border-radius: 3px;
		color: rgb(253,123,0);
		padding: 5px;
		margin: 0px 0px;
		vertical-align: middle;
		font-size: 16pt;
		border: 2px solid rgb(253,123,0);
		text-align: center;
		transition: 0.1s;
	}
	ul#faq_list li a {
		position: relative;
		top: 0px;
		left: 0px;
		padding: 10px 50px 10px 90px;
		text-decoration: none;
		display: block;
		width: calc(100% - 140px);
		height: 100%;
		color: rgb(50, 50, 50);
	}
	ul#faq_list li:hover {
		background-color: rgb(223,234,243);
	}
	ul#faq_list li:hover a {
		text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	}
	ul#faq_list li:hover > a > div {
		background-color: rgb(253,123,0);
		color: rgb(255,255,255);
	}
	ul#faq_list li:active {
		box-shadow: 0px 0px 2px rgba(0,0,0,0.4) inset;
	}
	div#faqwrapper {
		display:flex;
	}

	div#lside {
		width:100%;
		font-size: 10pt;
		border: 1px solid rgb(0,0,0);
		border-radius: 3px;
		padding: 3px;
		margin-top:1em;
	}
	div#lside > ul#faq_menu {
		width: 100%;
		list-style-type: none;
		padding: 0px;
		margin: 0px;

	}
	div#lside h3 {
		position: relative;
		border: 1px solid black;
		color: rgb(0,0,0);
		padding-left: 30px;
		border-radius: 3px;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
		transition: 0.1s;
		cursor: pointer;
		clear:both;
		font-size:24px;
	}
	div#lside h3 span {
		display: block;
		position: absolute;
		height: 2px;
		width: 12px;
		top: calc(50% - 2px);
		left: 10px;
		background-color: rgba(0,0,0,1.0);
		border-radius: 2px;
		opacity: 1.0;
		-weblit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	div#lside h3 span:nth-child(1) {
		width: 0px;
		-weblit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	div#lside h3.close span:nth-child(1) {
		width: 12px;
		-weblit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	ul#faq_menu li {
		position: relative;
		margin-bottom: 2px;
		padding: 0px;
		font-size: 16px;
		width: 95%;
		padding-left:5%;
		height:50px;
		transition: 0.1s;
		display:none;
	}
	ul#faq_menu li > a > div {
		display: none;
	}
	ul#faq_menu li a {
		position: relative;
		top: 0px;
		left: 0px;
		padding: 2px;
		text-decoration: none;
		display: block;
		width: calc(100% - 6px);
		height: 100%;
		color: rgb(50, 50, 50);
	}
	ul#faq_menu li:hover {
		text-decoration: underline;
	}
	ul#faq_menu li:hover > a > div {
		background-color: rgb(253,123,0);
		color: rgb(255,255,255);
	}
	ul#faq_menu li:active {
		box-shadow: 0px 0px 2px rgba(0,0,0,0.4) inset;
	}

	div#rside {
		margin-left: 10px;
		width: calc(100% - 380px);
	}
/*geeページ設定
----------------------------------------------------*/
	iframe{
		width:100%;
		height:400px;
	}
	.geeTab-group{
		display: flex;
		flex-direction: column;
		justify-content: center;
		color:#eee;
		width:100vw;
	}

	.mapComment{
		position:absolute;
		top:400px;
		left:20px;
		z-index:9999;
		font-size:80%;
		font-weight:bold;
		width:150px;
		background:#fff;
		padding:5px;
	}

	ul.listSpJmap{
		display:block;
		margin:0 auto 30px auto;
	}
	ul.listSpJmap li{
		float:left;
		width : -webkit-calc(100% / 3) ;
		  width : calc(100% / 3) ;
		background:#7cdc92;
		border-left:2px solid #fff;
		margin-bottom:2px;
		text-align:center;
		font-weight:bold;
		color:#333;
	}
	ul.listSpJmap li:nth-child(4n){
		margin-left:0;
	}
	ul.listSpJmap li a:link{
		color:#000;
		text-decoration:none;
	}
	ul.listSpJmap li a:visited {
		color:#000;
		text-decoration:none;
	}
	ul.listSpJmap li a:hover {
		color:#fff;
		text-decoration:underline;
	}
	.nonLink{
		background:#555!important;
	}
}