@charset "utf-8"; /* 外部CSSファイルの文字コードを指定する */

/* ************************************************************************************************
ファイル名: module.css
概要: コンテンツエリアで使用するモジュールの設定
作成日: 2019.11.11
更新日: 2019.11.11
************************************************************************************************ */
/* content=========================================================================================
[1] トップページ個別設定
[2] 第二階層以下で使用する共通設定
[3] 「メンテナンス情報」ページ個別設定
[4] 「API利用方法」　ページ個別設定
[5] 「活用事例集」ページ個別設定
[6] 「お問い合わせ」ページ個別設定
[7] 「gBizINFOについて」ページ個別設定
[8] 「サイトマップ」ページ個別設定
[9] 「関連掲載記事」ページ個別設定
[10] 「よくある質問」ページ個別設定
[11] 「出典元」ページ個別設定
================================================================================================ */


/* [1] トップページ個別設定
================================================================================================ */

/* 1024px以上　PC */
/* 全体の横幅を固定 */
.top-container .about-site,
.top-container .info-inner,
.top-container .inner-link,
.top-container .release-area{
	width: 1000px;
	margin: auto auto;
}

/* タブレット・スマホ */
@media (max-width:1024px){
	/* 全体の横幅 */
	/* 横幅の余白は個別に設定 */
	.top-container .about-site,
	.top-container .info-inner,
	.top-container .inner-link,
	.top-container .release-area{
		box-sizing: border-box;
		margin: auto 0px;
		max-width: 1000px;
		width: 100%;
	}
}

.top-container .top-image-area li{
	margin: 0;
	padding-left: 0;
	text-indent: 0;
}

.top-container .top-image-area ul{
	list-style: none;
}

/* TOP画像表示エリア設定 */
.top-container .top-image-area {
	background: url("../images/building_back_image.png") center no-repeat;
	background-size: cover;
	position: relative;
	padding: 80px 0 0;
}
/* スマホ */
@media (max-width:768px) {
	/* TOP画像表示エリア設定 */
	.top-container .top-image-area {
		padding: 0;
	}
}

/* タブレット */
@media (max-width:1024px) {
	.top-container .corp-search-wrap{
		background-color: rgba(29,58,139,.8);
		width: 100%;
		z-index: 1;
	}
}
/* スマホ */
@media (max-width:768px) {
	.top-container .corp-search-wrap{
		background-color: rgba(29,58,139,.7);
		padding: 20px 0 0 0;
	}
}

/* TOP画像エリアの表示設定 */
.top-container .top-search-area,
.top-container .top-search-area-dl{
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1000px;
	padding: 20px 42px 20px;
	position: relative;
	width: 100%;
	z-index: 1;
}

/* タブレット */
@media (max-width:1024px) {
	/* TOP画像エリアの表示設定 */
	.top-container .top-search-area {
		box-sizing: border-box;
		max-width: initial;
		padding: 20px 40px 40px;
		text-align: center;
		z-index: 2;
	}

	.top-container .top-search-area-dl {
		box-sizing: border-box;
		max-width: initial;
		padding: 20px 0px 40px;
		text-align: center;
		z-index: 2;
	}
}
/* スマホ */
@media (max-width:768px) {
	/* TOP画像エリア全体の表示設定 */
	.top-container .top-search-area {
		margin: 0;
		padding: 0px 10px 40px;
		position: relative;
		text-align: center;
		width: 100%;
		z-index: 1;
	}
}

/* TOP画面エリア背景のラインと画像設定:PCのみで表示 */
.top-container .top-image-back{
	background-color: rgba(29,58,139,.85);
	height: 233px;
	left: 0;
	position: absolute;
	top: 80px;
	text-align: left;
	width: 100%;
	z-index: 1;
}

.top-container .top-image-back img {
	float: left;
	padding: 0;
	margin: 0 0 0 7%;
	width: 486.72px;
}

/* 法人データ検索エリア */
.top-container .corp-search {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.top-container .corp-search h2,
.top-container .corp-search p,
.top-container .corp-search a,
.top-container .corp-search label{
	color: #fff;
}

.top-container .corp-search h2#content-top {
	font-size: 3.2rem;
	border-bottom: none;
}

.top-container .corp-search h2#content-top:after {
	border-bottom: none;
}

/* スマホ */
@media (max-width:768px) {
	.top-container .corp-search h2#content-top {
		font-size: 1.8rem;
		margin: 0 0 5px;
		padding: 0;
	}
}

.top-container .corp-search dl p,
.top-container .corp-search dl label{
	border-bottom: none;
	font-size: 1.4rem;
}
/* スマホ */
@media (max-width:768px) {
	.top-container .corp-search dl p {
		padding: 0;
		margin: 0 0 5px;
	}
}

/* テキスト入力エリア */
.top-container .search-text-area {
	text-align: left;
	padding: 0;
}

.top-container .search-text-area p{
	margin: 0 0 5px;
	padding: 0;
}

.top-container .text-area {
	background-color: #fff;
	height: 34px;
	width: 300px;
}

.top-container .search-text-area {
	display: inline-block;
}

.top-container .search-text-area dl{
	margin: 0;
}

.top-container dt{
	display: inline-block;
}

/* タブレット */
@media (max-width:1024px) {
	.top-container .search-text-area {
		text-align: center;
	}
	
	.top-container .corp-search p{
		text-align: left;
	}
}

/* 検索ボタンエリア */
.top-container .seach-button {
	background-color: #ccc;
    height: 34px;
	margin: 0 0 0 15px;
	vertical-align: middle;
}
/* 768px以下　スマホ */
@media (max-width:768px) {
	/* 検索ボタンエリア */
	.top-container .seach-button {
		margin: 0 0 0 1.0rem;
	}
}

.top-container .search-text-area img{
	height: 100%;
}

/* ダウンロード API利用方法エリア */
.top-container .add-info-area {
    margin: 20px 0 20px;
	width: 100%;
}

/* タブレット */
@media (max-width:1024px) {
	.top-container .add-info-area {
		box-sizing: border-box;
		padding: 0px 10px 60px;
		margin: 0;
		width: 100%;
	}
}

.top-container .add-info-area ul {
	margin: 0;
	padding: 0;
}

.top-container .add-info-area li {
	float: left;
	padding: 0 5% 0 0;
	width: 30%;
}
.top-container .add-info-area li:last-child {
	padding: 0;
}

.top-container .add-info-area img{
	background-color: #fff;
	margin: 2px 15px 2px 2px;
	width: 58px;
}

.top-container .add-info-area li a {
	align-items: center;
	background-color: #696969;
	display: flex;
	font-size: 1.8rem;
	text-decoration: none;
}

.top-container .add-info-area li a:hover {
	background-color: #797979;
}

/* メンテナンス情報 */
.top-container .maint-area{
	background-color: #F5F5F5;
}

/* タブレットのみ余白の表示 */
@media (min-width:768px) and (max-width:1024px) {
	.top-container .maint-area{
		margin: 40px 0 0 0;
	}
}

.top-container .info-inner {
	box-sizing: border-box;
	padding: 40px 0px 25px;
}
/* タブレット */
@media (max-width:1024px) {
	.top-container .info-inner {
		box-sizing: border-box;
		padding: 40px 10px 25px;
	}
}
/* スマホ */
@media (max-width:768px) {
	.top-container .info-inner {
		box-sizing: border-box;
		padding: 10px 10px 5px;
	}
}
 
.top-container .title {
	border-bottom: solid .2rem #C6C6C6;
	box-sizing: border-box;
	display: block;
	position: relative;
	margin: 0 0 15px;
	vertical-align: bottom;
}

.top-container .title h2 {
	border-bottom: none;
	display: inline;
	margin: 0;
	padding: 0;
	position: static;
}
.top-container .title h2:after {
	border-bottom: none;
	bottom: 0;
    content: none;
	display: inline;
	position: static;
	width: 100%;
}

.top-container .title p {
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.top-container .title2{
    margin: 0 0 15px;
	position: relative;
}

.top-container .title2 p {
	float: right;
	margin: 0;
	padding: 0;
}

.top-container .info-inner h2:after {
	bottom: -.2rem;
	border-bottom: .2rem solid #347ab6;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	width: 20%;
}

/** INFOエリア **/
/* リリースエリア */
/* 全体の横幅を固定 */
.top-container .info-area .release-area{
	margin: auto;
	width: 1000px;
}

/* タブレット以下 */
@media (max-width:1024px){
	/* 全体の横幅 */
	.top-container .info-area .release-area{
		margin: auto 0;
		padding: 0 10px;
		width: 100%;
	}
}

.top-container .info-area .release-area ul {
	margin: 40px 0 25px;
	padding: 0;
}
.top-container .info-area .release-area li a {
	display: block;
}

.top-container .info-area .release-area li {
	float: left;
	padding: 0 0 0 20px;
	text-indent: 0;
	width: 15%;
}
/* 1024px以下　タブレット */
@media (max-width:1024px) {
	.top-container .info-area .release-area li {
		padding: 0 0 1.5rem 5%;
		width: 30%;
	}
}
/* スマホ */
@media (max-width:768px) {
	.top-container .info-area .release-area li {
		float: none;
		padding: 0;
		width: 100%;
	}
}

.top-container .info-area .release-area li:first-child {
	padding-left: 0;
}
/* 1024px以下　スマホ・タブレット */
@media (max-width:1024px) {
	.top-container .info-area .release-area li:nth-child(4) {
		padding-left: 0px;
	}
}

.top-container .info-area .release-area img {
	width: 100%;
}

.top-container .info-area .release-area p {
	color: #fff;
	display: table-cell;
	line-height: 2.0rem;
	padding: 0 2.0rem;
	text-align: center;
	vertical-align: middle;
}

.top-container .info-area .release-area li{
	list-style: none;
	margin: 0;
	padding-bottom: 10px;
}

.top-container .info-area .release-area a{
	text-decoration: none;
}

.top-container .info-area .release-area .release-area1{
	background-color: #00597B;
	height: 20.0rem;
	width: 100%;
}
/* スマホ */
@media (max-width:768px) {
	.top-container .info-area .release-area .release-area1{
		height: 5.6rem;
		width: 100%;
	}
	
	.top-container .info-area .release-area .release-area1:after{
		content: "";
		display: block;
		clear: both;
	}
}
.top-container .info-area .release-area li a:hover .release-area1{
	background-color: #1a79a4;
}

.top-container .info-area .release-area img {
	height: 8.0rem;
	margin-top: 2.0rem;
	vertical-align: bottom;
}
/* スマホ */
@media (max-width:768px) {
	.top-container .info-area .release-area img {
		height: 5.6rem;
		margin-top: 0rem;
	}
}

.top-container .info-area .release-area .list-text-area {
	display: table;
	height: 10.0rem;
	width: 100%;
}
/* スマホ */
@media (max-width:768px) {
	.top-container .info-area .release-area .image-area{
		float: left;
		width: 20%;
	}
	
	.top-container .info-area .release-area .list-text-area{
		align-items: center;
		display: flex;
		float: right;
		height: 5.6rem;
		width: 80%;
	}
	
	.top-container .info-area .release-area p{
		padding: 0;
		margin: 0;
	}
}




/* サイトについて */
/* サイトについてと、関連サイト・関連リンク共通設定 */

/* タブレット以下 */
@media (max-width:1024px) {
	.top-container .about-site{
		padding: 0 10px;
	}
}

.top-container .about-site p{
	font-size: 1.4rem;
	margin: 0;
}

.top-container .inner-link h2,
.top-container .about-site-inner h2{
	border-bottom: none;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 0 0 10px;
}

.top-container .inner-link h2{
	margin: 0 0 20px;
}

.top-container .inner-link h2:after,
.top-container .about-site-inner h2:after{
	border-bottom: none;
}

.top-container .about-site-inner{
	border: solid .12rem #858585;
	padding: 1.6rem;
}

/* 関連サイト・関連リンク */
.top-container .inner-link{
	padding: 0 10px;
}

.top-container .external-link-area{
	background-color: #F5F5F5;
}

.top-container .external-link {
	margin: 5.0rem auto 0 auto;
	padding: 3.0rem 0;
	width: 800px;
}

.top-container .external-link a{
	text-decoration: underline;
}

/* 1024px以下　スマホ・タブレット */
@media (max-width:1024px) {
	.top-container .external-link {
		width: auto;
	}
}

.top-container .external-link-area li{
	text-indent: 0;
	padding: 0;
	margin: 0 0 5px;
}

.top-container .external-link-area ul{
	list-style: none;
}

.top-container .external-link li a {
	align-items: center;
	display: inline-flex;
}

.top-container .external-link img{
	padding: 0 5px 0 0;
	width: 22px;
}

/* PC・タブレット　2列に表示させる */
@media (min-width:768px) {
	.top-container .external-link ul:after {
		content: "";
		display: block;
		clear: both;
	}

	.top-container .external-link li {
		float: left;
		width: 50%;
	}
}


/* [2] 第二階層以下で使用する共通設定
================================================================================================ */
/* リストの中央ぞろえ */
.container .list-center{
	text-align: center;
}


/* 「トップページ」、下位ページ共通設定 */
/* データリスト定義 */
.container .system_information-container dt,
.top-container .info dt{
	padding: 0 0 10px ;
}

.container .data_additional_information-container dl dt,
.top-container dl.in-line dt{
	float: left;
}

.container .data_additional_information-container dl dd,
.top-container dl.in-line dd{
	margin-left: 16rem;
	margin-bottom: 10px;
}
/* スマホ */
@media (max-width:768px){
	.container .data_additional_information-container dl dt,
	.top-container dl.in-line dt{
		float: none;
	}
	
	.container .data_additional_information-container dl dd,
	.top-container dl.in-line dd{
        margin-bottom: 10px;
		margin-left: 0;
	}
}

.container .information-container dl dl,
.top-container dl.news dl{
	margin: 0;
}

.container .information-container dl > dt,
.top-container dl.news > dt{
	padding: 0 0 10px;
}

.container .information-container dl > dd,
.top-container dl.news > dd{
	padding: 0 0 15px;
}

.container .information-container dl dl dt,
.top-container dl.news dl dt{
	float: left;
}

.container .information-container dl dl dd,
.top-container dl.news dl dd{
	margin-left: 16rem;
}


/* [3] 「メンテナンス情報」ページ個別設定
================================================================================================ */
.system_information-container dl{
	padding: 0 0 10px;
}

/* [4] 「API利用方法」　ページ個別設定
================================================================================================ */
/* API利用方法エリア */
.api-container ul.tab-lab{
	margin: 0;
	padding: 0;
}

.api-container li.tab_li,
.api-container .tab-lab li{
	margin: 0;
	padding-left: 0;
    text-indent: 0;
}
.api-container .tab-lab a:hover,
.api-container .tab-lab a:focus{
	background-color: #eee;
    color: #6d6d6d;
}

.api-container .tab-lab li.active a:hover,
.api-container .tab-lab li.active a:focus{
	background-color: #1a79a4;
    color: #fff;
    border: solid 1px #00597B;
}
.api-container .top_cont ul.tab-lab li{
    display: inline-block;
	list-style: none;
}
.api-container .top_cont ul li.hide{
	display: none;
}
.api-container .top_cont .cont_nav{
	position: relative;
	z-index: 2;
}
.api-container .top_cont .cont_nav li{
	background-color: #fff;
}

.api-container .top_cont .cont_nav li.active{
    background: #00597B;
}
.api-container .top_cont .cont_nav li.active a{
	border: solid 1px #00597B;
}
.api-container .top_cont .cont_nav li a{
    color: #6d6d6d;
	display: block;
    font-size: 1.4rem;
	text-decoration: none;
    padding: 10px 20px;
    border: solid 1px #6d6d6d;
}

.api-container .top_cont .cont_nav li.active a{
	color:#fff;
}

.api-container .cont_box{
	position: relative;
}

.api-container .cont_box ul.content{
    list-style: none;
    padding-left: 0;
    text-align: left ;
}

.api-container .cont_box ul li.tab_li{
	padding: 40px 0 0;
	width: 100%;
}

.api-container table{
	width: 100%;
}

.api-container tr td:nth-of-type(1),
.api-container tr th:nth-of-type(1){
	width: 295px;
}

/* [5] 「活用事例集」ページ個別設定
================================================================================================ */
.example-container .box-parents{
	display: block;
    margin: 30px auto;
	max-width: 60%;
}
/* タブレット以下 */
@media (max-width:1024px){
	.example-container .box-parents{
		max-width: 600px;
		width: 100%;
	}
}

.example-container img{
	margin-bottom: 50px;
}

.example-container table{
	width: 100%;
    margin: 0px auto 15px;
}

.example-container table th{
    text-align: left;
	width: 15%;
    border: 1px solid #696969;
    padding: 10px 20px;
}
.example-container table td{
    padding: 10px 20px;
}
/* スマホ以下 */
@media (max-width:768px){
    .example-container table th,
    .example-container table td{
        border-bottom: none;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .example-container table tr:last-child td{
        border-bottom: 1px solid #696969;
    }
}


/* [6] 「お問い合わせ」ページ個別設定
================================================================================================ */
.inquiry-container .inquiry-parent .inquiry-box1{
	float: left;
	width: 48%;
}

.inquiry-container .inquiry-parent .inquiry-box2{
	float: right;
	width: 48%;
}

.inquiry-container .inquiry-parent > hr{
	display: none;
	padding: 0;
}

/* タブレット以下 */
@media (max-width:1024px){
	.inquiry-container .inquiry-parent .inquiry-box1,
	.inquiry-container .inquiry-parent .inquiry-box2{
		float: none;
		margin: 0 0 15px;
		width: 100%;
	}
	.inquiry-container .inquiry-parent > hr {
		border: 1px #fff solid;
		display: inline;
		padding: 24px 0 0;
	}
}

.inquiry-container .inquiry-parent .inquiry-button {
	display: block;
    padding: 4% 0;
	text-align: center;
}

.inquiry-container .inquiry-parent .inquiry-button a{
	border: solid 2px #347ab6;
	padding: 10px;
	text-decoration: none;
}

/* ページ最下部の余白調整 */
.inquiry-container{
	padding: 0 0 15px;
}

/* タブレット以下 */
@media (max-width:1024px){
	.inquiry-container{
		padding: 0;
	}
}


/* [7] 「gBizINFOについて」ページ個別設定
================================================================================================ */
/* 全体の横幅を固定 */
.info-container .link-list{
	margin: auto;
	width: 1000px;
}

/* タブレット以下 */
@media (max-width:1024px){
	/* 全体の横幅 */
	.info-container .link-list{
		margin: auto 0;
		padding: 0;
		width: 100%;
	}
}

.info-container .link-list ul {
	margin: 0 0 25px;
	padding: 0;
}
.info-container .link-list li a {
	display: block;
}

.info-container .link-list li {
	float: left;
	padding: 0 0 0 2.5%;
	text-indent: 0;
	width: 18%;
}
/* スマホ */
@media (max-width:768px) {
	.info-container .link-list li {
		float: none;
		padding: 0;
		width: 100%;
	}
}

.info-container .link-list li:first-child {
	padding-left: 0;
}

.info-container .link-list img {
	width: 100%;
}

.info-container .link-list p {
	color: #fff;
	display: table-cell;
	line-height: 2.0rem;
	padding: 0 2.0rem;
	text-align: center;
	vertical-align: middle;
}

.info-container .link-list li{
	list-style: none;
}

.info-container .link-list a{
	text-decoration: none;
}

.info-container .link-list .release-area1{
	background-color: #00597B;
	height: 20.0rem;
	width: 100%;
}
/* スマホ */
@media (max-width:768px) {
	.info-container .link-list .release-area1{
		height: 5.6rem;
		width: 100%;
	}
	
	.info-container .link-list .release-area1:after{
		content: "";  /* 新しい要素を作る */
		display: block;  /* ブロックレベル要素に */
		clear: both;
	}
}
.info-container .link-list li a:hover .release-area1{
	background-color: #1a79a4;
}

.info-container .link-list img {
	height: 8.0rem;
	margin-top: 2.0rem;
	vertical-align: bottom;
}
/* スマホ */
@media (max-width:768px) {
	.info-container .link-list img {
		height: 5.6rem;
		margin-top: 0rem;
	}
}

.info-container .link-list .list-text-area {
	display: table;
	height: 10.0rem;
	width: 100%;
}
/* スマホ */
@media (max-width:768px) {
	.info-container .image-area{
		float: left;
		width: 20%;
	}
	
	.info-container .link-list .list-text-area{
		align-items: center;
		display: flex;
		float: right;
		height: 5.6rem;
		width: 80%;
	}
	
	.info-container .link-list p{
		padding: 0;
		margin: 0;
	}
}


/* [8] 「サイトマップ」ページ個別設定
================================================================================================ */
.sitemap-container li{
    padding-left: 0;
	text-indent: 0;
}

.sitemap-container ul{
	list-style: none;
}

.sitemap-container li:before{
	content: url("../images/arrow.svg");
	display: inline-block;
	padding-right: 5px;
	width: 10px;
}

.sitemap-container li ul{
	margin: 10px 0 0 16px;
}

.sitemap-container .column-inner{
	float: left;
	width: 33.33%;
}
/* スマホ */
@media (max-width:768px) {
	.sitemap-container .column-inner{
		float: none;
		width: 100%;
	}
}


/* [9] 「関連掲載記事」ページ個別設定
================================================================================================ */
.related-container li{
	list-style: none;
}

.related-container dl dd{
	padding: 0 0 15px;
}

.related-container dl{
    margin: 0;
	padding: 0;
}


/* [10] 「よくある質問」ページ個別設定
================================================================================================ */
.faq-container li{
	margin: 25px 0 0px;
	padding-left: 0;
	text-indent: 0;
}

.faq-container ul{
	list-style: none;
	margin: 0;
}

.faq-container dl dt:before,
.faq-container dl dd:before{
	margin-right: 5px;
}

#a-area1,
#a-area2,
#a-area3,
#a-area4,
#a-area5,
#a-area6,
#a-area7,
#a-area8,
#a-area9,
#a-area10{
	counter-reset: my-badass-counter;
}

.faq-container dl dt:before{
	content: "Q" counter(my-badass-counter);
	counter-increment: my-badass-counter;
}

.faq-container dl dd:before{
	content: "A" counter(my-badass-counter);
}

.faq-container dl dt{
	font-weight: bold;
	margin: 0 0 10px;
}

/* [11] 「出典元」ページ個別設定
================================================================================================ */
.resource-container dl,
.resource-container dt,
.resource-container dd {
	box-sizing: border-box;
}

.resource-container dl {
	background: #eee;
	border: 1px solid #696969;
	border-top: none;
}

.resource-container dt,
.resource-container dd {
	border-top: 1px solid #696969;
	padding: 10px 10px 0px 10px;
}

.resource-container dt {
	float: left;
	width: 44%;
}
/* スマホ */
@media (max-width:768px) {
	.resource-container dt {
		float: none;
        padding: 10px;
		width: 100%;
	}
}

.resource-container dd {
	background: #fff;
	border-left: 1px solid #696969;
	margin-left: 44%;
	padding-bottom: 10px;
	word-break : break-all;
}
/* スマホ */
@media (max-width:768px) {
	.resource-container dd {
		border-left: none;
		margin-left: 0;
	}
}

.resource-container dd:after {
	content: '';
	display: block;
	clear: both;
}