@charset "UTF-8";
/* === /precontact/ 用CSS === */
/* ---------------------------------------------------------
 　■ PC用CSS（671px～）
--------------------------------------------------------- */
@media screen and (min-width: 671px), print {
  #container .inner {
    margin: 40px auto 100px;
  }
	.ttl-line {
		margin-top: 30px;
	}
	#precontact ul.cf li div.btn {
		display: table;
		margin: 0 auto;
		background: #E6F1FD;
		border-radius: 30px;
		width: 300px;
		height: 60px;
		text-align: center;
		-webkit-box-shadow: 0 3px 2px #456C93;
		box-shadow: 0 3px 2px #456C93;
	}
	#precontact ul.cf {
		display: flex;
    justify-content: center;
    column-gap: 60px;
		padding: 0;
	}
	#precontact ul.cf li div.btn:hover{
		background: #9FBCDC;
	}
	#precontact ul.cf li div.btn a{
		font-size: 15rem;
		text-decoration: none;
		color: #023894;
		font-weight: bold;
		padding: 0 10px 0;
		vertical-align: middle;
		display: table-cell;
	}
	#precontact ul.cf li div.btn a span{
		background: url(/images/faq_arrow_rt.png) left center no-repeat;
		display: inline-block;
		padding: 3px 0 0 25px;
	}
	#precontact ul.cf li.contact div.btn {
			background: #003260;
			-webkit-box-shadow: 0 3px 2px #002346;
			box-shadow: 0 3px 2px #002346;
	}
	#precontact ul.cf li.contact div.btn a{
		color: #FFFFFF;
	}
	#precontact ul.cf li.contact div.btn a span{
		background: url(/images/faq_contact_ico.png) left center no-repeat;
		-webkit-background-size: auto 16px;
		-moz-background-size: auto 16px;
		background-size: auto 16px;
		padding: 0 0 0 40px;
	}
	#precontact ul.cf li.contact div.btn:hover{
		background: #084175;
	}


	/* ページ上部 */
	p.txt-top {
		line-height: 1.8;
	}
  
  /* ガス関連事業者様 */
	.contactInfo-Box{
		background-color: #ebebeb;
		padding: 20px;
	}
	.contactInfo-Box.contactInfo-table-wrap {
		margin-top: 40px;
		padding-bottom: 12px;
	}
	.contactInfo-Box > table {
		width: 100%;
	}
	.contactInfo-Box > table > thead th {
		font-size: 18rem;
	}
	.contactInfo-Box .inner-table {
		border-collapse: collapse;
		width: 100%;
	}
	.contactInfo-Box .inner-table colgroup col:nth-child(1) {
		width: 23%;
	}
	.contactInfo-Box .inner-table colgroup col:nth-child(2) {
		width: 57%;
	}
	.contactInfo-Box .inner-table colgroup col:nth-child(3) {
		width: 20%;
	}
	.contactInfo-Box .inner-table thead th {
		text-align: center;
		font-size: 15rem;
		font-weight: bold;
		border-bottom: 1px solid #000;
		padding: 24px 16px 8px;
	}
	.contactInfo-Box .inner-table tbody th {
		text-align: center;
		font-size: 15rem;
		font-weight: bold;
		padding: 30px 16px;
		border-bottom: 1px solid #000;
	}
	.contactInfo-Box .inner-table tbody td {
		border-bottom: 1px solid #000;
		font-weight: bold;
	}
	.contactInfo-Box .inner-table tbody .tel {
		text-align: center;
	}
	.contactInfo-Box .inner-table tbody tr:last-child th {
		border-bottom: none;
	}
	.contactInfo-Box .inner-table tbody tr:last-child td {
		border-bottom: none;
	}

	/* 各お問い合わせ */
	.contactInfo-Box-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		margin-top: 40px;
	}
	.contactInfo-Box-list .contactInfo-Box {
		display: flex;
    flex-direction: column;
		justify-content: space-between;
	}
	.contactInfo-Box-list dt {
		font-size: 18rem;
		font-weight: bold;
	}
	.contactInfo-Box-list dd{
		font-weight: bold;
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 24px 0 0;
	}
	.contactInfo-Box-list dd span:first-child{
		width: 13em;
	}
}
  /* === (min-width: 671px) MQここまで === */
/* ---------------------------------------------------------
 　■ SP用CSS（～670px）
--------------------------------------------------------- */
@media screen and (max-width: 670px) {
	.ttl-line {
		margin-top: 25px;
	}
	#precontact ul.cf {
		display: block;
		padding: 0;
	}
	#precontact ul.cf li + li{
		margin-top: 10px;
	}
	#precontact ul.cf li div.btn {
		display: table;
		margin: 0 auto;
		background: #E6F1FD;
		border-radius: 20px;
		width: 90%;
		height: 40px;
		text-align: center;
		-webkit-box-shadow: 0 3px 2px #456C93;
		box-shadow: 0 3px 2px #456C93;
  }
	#precontact ul.cf li div.btn a{
		font-size: 12rem;
		text-decoration: none;
		color: #023894;
		padding: 2px 10px 0;
		vertical-align: middle;
		display: table-cell;
	}
	#precontact ul.cf li div.btn a span{
		background: url(/images/faq_arrow_rt.png) left center no-repeat;
		display: inline-block;
		padding: 0 0 0 15px;
	}
	#precontact ul.cf li.contact div.btn {
			background: #003260;
			-webkit-box-shadow: 0 3px 2px #002346;
			box-shadow: 0 3px 2px #002346;
  }
	#precontact ul.cf li.contact div.btn a{
		color: #FFFFFF;
	}
	#precontact ul.cf li.contact div.btn a span{
		background: url(/images/faq_contact_ico.png) left center no-repeat;
		-webkit-background-size: auto 100%;
		-moz-background-size: auto 100%;
		background-size: auto 100%;
		padding: 0 0 0 30px;
	}

	 /* ガス関連事業者様 */
	 .contactInfo-Box{
			background-color: #ebebeb;
			padding: 16px;
		}
		.contactInfo-Box > table {
			width: 100%;
		}
		.contactInfo-Box > table > thead th {
			font-size: 18rem;
		}
		.contactInfo-table-wrap {
			margin-top: 30px;
		}

	.contactInfo-Box .inner-table colgroup col {
		width: 100%;
	}

	.contactInfo-Box .inner-table thead {
		display: none;
	}

	.contactInfo-Box .inner-table tbody th {
		font-size: 15rem;
		font-weight: normal;
		padding: 24px 0 16px;
		display: flex;
		column-gap: 30px;
	}
	.contactInfo-Box .inner-table tbody tr:not(:first-child) th {
		border-top: 1px solid #000;
		padding: 34px 0 16px;
	}
	.contactInfo-Box .inner-table tbody th::before {
		content: attr(data-label);
		flex-shrink: 0;
		width: 5em;
		font-weight: bold;
	}
	.contactInfo-Box .inner-table tbody td {
		font-size: 15rem;
		display: flex;
		column-gap: 30px;
		padding: 0 0 16px;
	}
	.contactInfo-Box .inner-table tbody td::before {
		content: attr(data-label);
		flex-shrink: 0;
		width: 5em;
		font-weight: bold;
	}

	/* 各お問い合わせ */
	.contactInfo-Box-list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 30px;
		margin-top: 30px;
	}
	.contactInfo-Box-list .contactInfo-Box {
		display: flex;
    flex-direction: column;
		justify-content: space-between;
	}
	.contactInfo-Box-list dt {
		font-size: 18rem;
		font-weight: bold;
	}
	.contactInfo-Box-list dd{
		font-weight: bold;
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 24px 0 0;
	}
	.contactInfo-Box-list dd span:first-child{
		width: 13em;
	}

} /* === (max-width: 670px) MQここまで === */