@charset "utf-8";
/* CSS Document */

/*--------------------★★★PC、SP両方に共有★★★---------------------*/

#mainContents .mainImg {
	margin-top: 0px !important;
    margin-bottom: 20px;
}

.mainImg small{
	font-size: 1.2rem;
	margin-top: 5px;
	display: block;
	line-height: 1.2;
}
strong.fs18 {
	font-size: 18px;
}

span.red {
	font-size: 1.2em;
	font-weight: bold;
	color: red;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}
span.orange {
	font-size: 1.2em;
	font-weight: bold;
	color: #E87E15;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}


/*日付*/
.article-date {
	font-weight: 300;
	font-size: 1.5rem;
	color: #999;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 10px;
}


/*目次*/
.mokujiBox {
	font-size: 17px;
	width: 100%;
	box-sizing: border-box;
	margin: 30px 0px 45px 0px;
	padding: 25px 20px;
	border: 2px solid #00006c;
	border-radius: 20px;
	line-height: 1.6;
	background: #fffada;
	position: relative;
}
.mokujiBox ol {
	width: 95%;
	margin: 0 auto;
	padding: 0 5%;
	color: #00006c;
}
.mokujiBox ol li {
	font-weight: bold;
	list-style-type: decimal;
	margin: 0;
	padding: 20px 0;
	position: relative;
}
.mokujiBox ol li:last-child {
	border: none;
	padding: 20px 0 0 0 ;
}

.mokujiBox ol li::before {
	content: counter(my-counter);
	counter-increment: my-counter;
	position: absolute;
	bottom: 0;
	left: -1.5em;
	width: 100%;
	border-bottom: 2px dotted #00006c;
	content: ''; /* 必要なコンテンツなし */
}
.mokujiBox ol li:last-child::before {
	border-bottom: none;
}

  @media screen and (max-width:768px) {
	.mokujiBox ol li::before {
		width: 105%;
	}
	.mokujiBox ol { padding: 0 3% 0 7%; }
  }

.mokujiBox ol li ol {
	margin-top: 5px;
}
.mokujiBox ol li ol li {
	font-weight: normal;
	font-size: 95%;
	list-style-type: decimal;
	margin: 0px;
	padding: 0 !important;
	border: none;
}

.mokujiBox ol li ol li::before {
	content: counter(my-counter);
	counter-increment: my-counter;
	position: absolute;
	bottom: 0;
	left: -1.5em;
	width: 105%;
	border-bottom: none;
	content: '';
  }

.mokujiBox div{
	text-align: center;
	font-weight: bold;
	font-size: 1.8rem;
	color: #00006c;
	margin-bottom: 5%;
	background: #fff;
	border: 2px solid #00006c;
	border-radius: 10px;
	padding: 5px 15px;
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
}
.mokujiBox a{
	color: #00006c;
	text-decoration: none;
}
.mokujiBox a:hover{
	color: #41aafa;
	transition: 0.2s;
}

.mokujiBox #active { color: #41aafa;}

/* 目次の表示・非表示 */
.hidden {
	display: none;
}
  
.mokujiBox div{
	width: max-content;
}

.mokujiBox div button{
	font-size: 16px;
	line-height: 20px;
	border: none;
	color: #41aafa;
	background: none;
	margin-left: 5px;
}
.mokujiBox div button:hover {
	color: #00006c;
	cursor: pointer;
}



/* 目次　リストスタイルなし */

/* 先頭に数字なし */
ol li ol.flat{
	padding: 0;
}
ol li ol.flat li{
	list-style-type: none;
}



/* 先頭に丸数字あり */
.mokujiBox ol li ol.maru_suji li{
	list-style-type: none;
}

.mokujiBox ol li ol.maru_suji li a {
	position: relative;
	z-index: 2; /* リンクを前面に */
}

.mokujiBox ol li ol.maru_suji li:nth-child(1):before,
.mokujiBox ol li ol.maru_suji li:nth-child(2):before,
.mokujiBox ol li ol.maru_suji li:nth-child(3):before,
.mokujiBox ol li ol.maru_suji li:nth-child(4):before,
.mokujiBox ol li ol.maru_suji li:nth-child(5):before{
	position: absolute;
	left:-1.2em;
	top:0;
	z-index: 1;
}

.mokujiBox ol li ol.maru_suji li:nth-child(1):before {
	content: "①";
}
.mokujiBox ol li ol.maru_suji li:nth-child(2):before {
	content: "②";
}
.mokujiBox ol li ol.maru_suji li:nth-child(3):before {
	content: "③";
}
.mokujiBox ol li ol.maru_suji li:nth-child(4):before {
	content: "④";
}
.mokujiBox ol li ol.maru_suji li:nth-child(5):before {
	content: "⑤";
}







/*見出し、キャプション等*/

.caption{
	line-height: 1.2;
	font-weight: bold;
	font-size: 1.6rem;
}
.pageBoxHeading{
    line-height: 1.2;
    font-weight: bold;
    font-size: 1.8rem;
    color: #00006c;
		margin-bottom: 20px;
}

/* colorBox内のタイトルとして */
.colorBoxTit{
		line-height: 1.2;
		font-weight: bold;
		font-size: 2rem;
		color: #00006c;
		margin-top: 20px;
}
/* colorBox内タイトルの1番目だけ上マージンなし */
.colorBox h4.colorBoxTit:first-of-type{ margin-top: 0px;}
.colorBox div.colorBoxTit:first-of-type{ margin-top: 0px;}
.colorBox h4.pageMiniHeading:first-of-type{ margin-top: 0px!important;}


.wLineHeading{
    line-height: 1.2;
    font-weight: bold;
    font-size: 4.4rem;
    color: #00006c;
}
.wLineHeading span{
	font-size: 0.6em;
	display: block;
}

small{ 
	font-size: 1.2rem; 
	display: block;
	line-height: 1.4;
}


picture img{
	width: 100%;
	height: auto;
}

picture.mt_free img{
	display: block;
	width: 100%;
	height: auto;
	margin: 10px 0 0 0;
}



/*あわせて読みたい*/
.relatedArea a {
	box-sizing: border-box;
	position: relative;
	color: #000;
	margin: 2em 0;
	padding: 25px 20px 20px;
	border: solid 3px #ffb03f;
	border-radius: 8px;
	text-decoration: none;
	background: #fff;
	display: flex;
	justify-content: space-between;
}
.relatedArea a:hover {
  opacity: 0.7;
}
.relatedArea a .relatedCopy {
  position: absolute;
  display: inline-block;
  top: -15px;
  left: 20px;
  padding: 7px 25px;
  line-height: 1;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  background: #ffb03f;
  border-radius: 15px;
}

.relatedArea a .relatedImgArea {
	width: 30%;
}
.relatedArea a .relatedImgArea img {
	width: 100%;
}
.relatedArea a .relatedTxtArea {
	width: 68%;
}
.relatedArea a .relatedTxtArea dl {
	margin: 0;
	padding: 0;
}
.relatedArea a .relatedTxtArea dl dt {
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.2;
}
.relatedArea a .relatedTxtArea dl dd {
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 10px 0 0;
	padding: 0;
}

/*まとめ*/
.box_matome {
  padding: 20px;
  background-color: #E6EAF6;
  margin: 0 auto;
}
.box_matome h3 {
  text-align: center;
  margin: 10px 0 30px;
}

/*コラムのまとめ*/
.box_matome_column {
	padding: 30px 20px 30px 20px;
	background-color: #E6EAF6;
	margin: 50px auto 0;
}
.box_matome_column h3 {
	color: #00006c;
	font-size: 1.9rem;
	text-align: center;
	margin: 10px 0 20px 0;
	padding: 0 0 0 0;
}
.box_matome_column h3 span{
	color: #fff;
	font-size: 1.5rem;
	background: #00006c;
	border-radius: 20px;
	padding: 5px 20px;
	display: table;
	margin: 10px auto 0px;
}
.box_matome_column h4 {
	color: #00006c;
	font-size: 1.8rem;
	margin: 20px 0 10px 0;
	border-top: 1px solid #cbcbe5;
	padding: 20px 0 0 0;
}

.box_matome_column ul{
	padding-left: 1.5em;
    margin: 10px 0px 20px 0px;
}
.box_matome_column ul li{
    margin: 5px 0;
	line-height: 1.5;
}



/* フロー */
.flow_area {
	width: 100%;
	margin-bottom: 20px;
}
.flow_box {
	box-sizing: border-box;
	background: #e6f2ff;
	padding: 10px 0;
}

.flow_box dl{
	padding: 2% 3%;
}
.flow_box dt{
	float: left;
	color: #fff;
	background: #00008f;
	padding: 1% 1.5%;
}

.flow_box dd {
	margin-left: 40px;
	line-height: 1.5;
	color: #00008f;
	font-weight: bold;
	font-size: 1.8rem;
}
.flow_box p.blue {
	color: #00008f;
	font-weight: bold;
	font-size: 1.8rem;
}
.bigFont{
	color: #f00;
	font-weight: bold;
	font-size: 3rem;
}

.sankaku {
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top: 30px solid #00008f;
	margin: 30px auto 0;
}


.colorBox dl {
	margin: 30px 0 0;
  }
  .colorBox dl:first-child {
	margin-top: 0;
  }
  .colorBox dl dt {
	line-height: 1.2;
	font-weight: bold;
	font-size: 1.8rem;
	color: #00006c;
  }
  .colorBox dl dt:first-child {
	margin-top: 0;
  }
  .colorBox dl dd {
	line-height: 1.5;
	margin-top: 5px;
  }



/*署名プロフィール*/
.profileArea {
	box-sizing: border-box;
	margin: 30px auto 0;
	background: #eee;
	border: 1px solid #444;
	padding: 20px;
}
.profileTtl p {
	font-weight: bold;
	font-size: 1.8rem;
	color: #fff;
	padding: 10px;
	background: #444;
}
.profileBox {
	margin-top: 20px;
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.profileImg{
	width: 20%;
}
.profileImg img{
	max-width: 140px;
	height: auto;
}
.profileTxt {
    width: 75%;
	padding:0% 0% 0% 4%;
}
.profileAssociation{ font-weight: bold;}
.profileName{
	font-size: 2.0rem;
	margin: 0px 0px 10px 0px;
	font-weight: bold;;
}
.profileName span {	font-size: 2.8rem;}
.profileBox ul {
	padding-left: 20px;
}
.profileBox ul li {
	font-size: 1.5rem;
	line-height: 1.4;
	margin: 10px auto 0;
}
.profileMemo {
	padding: 20px;
	margin-top: 20px;
	background: #fff;
	border-radius: 5px;
}
.profileMemo p {
	font-size: 1.4rem;
	text-align: justify;
	line-height: 1.5;
}
.writer {
	text-align: right;
	padding: 15px 0;
}

/* 監修者 */
.sv{
	margin: 30px auto 0;
	border: 1px solid #444;
	padding: 30px 20px 20px;
	display: flex;
}
.sv_left{
	width: 25%;
	font-size: 26px;
	color: #00006c;
	font-weight: bold;
	text-align: center;
	padding: 5px 0 0 0;
}
.sv_left img{
	margin: 70px 0 0 0;
}

.sv_right{
	width: 75%;
	padding: 0 0 0 2%;
}
.sv_tit{
	font-weight: bold;
	font-size: 18px;
	border-bottom: 1px solid #00006c;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	line-height: 1.4;
}

.sv_tit br{display: none;}

.sv_tit div span{
	font-size: 1.5em;
	margin: 10px 0 0 0;
}

.sv_right dl {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
	font-size: 17px;
}
.sv_right dt {
	width: max-content;
	padding: 1% 0% 1% 0%;
	line-height: 1.4;
}
.sv_right dd {
	width: 75%;
	padding: 1% 0% 1% 0%;
	line-height: 1.4;
}

.svOpen{
	background: #eee;
	padding: 4% 5%;
	margin: 2% 0;
}
.svOpen p{
	margin: 0 0 1em 0;
}
.svOpenButton{ display: none;}
.svOpenButton{ color: #3c6ef0;}







/*colorBox内リスト*/
/*ulリスト*/
.colorBox b{ color: #00006c; font-weight: bold;}
.colorBox ul li{
	font-size: 17px;
    line-height: 1.6;
    margin-top: 10px;
    margin-left: 20px;
}
.colorBox ul li:first-child{margin-top: 0px;}

.colorBox ul li a {
    color: #00006c;
    text-decoration: none;
}
.colorBox ul li a.line{
    color: #00006c;
    text-decoration: underline;
}
.colorBox ul li a:hover{
	color: #41aafa;
	transition: 0.2s;
}



/*olリスト*/
.colorBox ol {
	display: table;
	padding: 0;
}

.colorBox ol{
	counter-reset: item;
	list-style-type: none;
	padding-left: 0;
  }
.colorBox ol ol{
	padding-left: 1em;
	margin-top: 1em;
  }

.colorBox ol li{
	text-indent: -1.3em;
	padding-left: 1.3em;
	padding-bottom: 0.8em;
	line-height: 1.5;
  }
.colorBox ol li:before {
	counter-increment: item;
	content: counter(item)'.';
	/* 以下は自由に装飾... */
	padding-right: .5em;
	font-weight: bold;
	color: #00006c;
  }
.colorBox ol li:last-child{
	padding-bottom: 0.5em;
}

/* olリスト内のULリスト */
.colorBox ol li dl{
	margin-left:1.3em;
	margin-top: 0.8em!important;
}
.colorBox ol li dt{
	float: left;
	color: #00006c;
	font-weight: bold;
}

.colorBox ol li dd {
	margin-left: 1.3em;
	line-height: 1.5;
}



/*ページのまとめ*/
.box_matome_page {
    margin: 30px auto 0;
    padding: 30px;
    background: #e6f2ff;
}

.box_matome_page ol{
	counter-reset: item;
	list-style-type: none;
	padding-left: 0;
  }
  .box_matome_page ol ol{
	padding-left: 0.5em;
	margin:10px 0px 20px 0px;
	
  }
  .box_matome_page li{
	text-indent: -1.3em;
	padding-left: 1.3em;
	line-height: 1.5;
	margin: 10px 0;
  }
  .box_matome_page li:before {
	counter-increment: item;
	content: counter(item)'.';
	/* 以下は自由に装飾... */
	padding-right: .5em;
	font-weight: bold;
	color: #00006c;
  }




/*コンテンツ内数字リスト*/

.listNum ol {
	/*要素の連番（カウンタ）の値をリセットする*/
	counter-reset: li;
	margin: 20px 0; 
}

.listNum li {
	position: relative;
	font-size: 1.8rem;
	padding: 5px 0px 5px 40px;
	margin: 5px 0;
	/*デフォルトのスタイルを非表示にする*/
	list-style: none;
	line-height: 1.2;
	color: #00006c;
	font-weight: bold;
}
.listNum li::before {
	position: absolute;
	top: 0;
	left: 0;
	font-weight: bold;
	color: #fff;
	padding: 5px 10px 5px 10px;
	background: #00008f;
	/*要素の連番（カウンタ）の値を進める*/
	counter-increment: li;
	/*自動連番を付ける関数*/
	content: counter(li);
}

/*リンク*/

a.link_blue { color: #3c6ef0;}
a.link_blue:link{ color: #3c6ef0;}
a.link_blue:hover { opacity: 0.7;}


/* テーブル */

.tbl_01,
.tbl_02{
    font-size: 17px;
    width: 100%;
    border: 2px #666 solid;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    font-weight: bold;
    line-height: 120%;
    margin: 20px 0px 0px 0px;
 }

 .mt5{
	 margin-top: 5px!important;
 }

.tbl_01 th,
.tbl_02 th {
    background: #00006c;
	color: #fff;
}
.tbl_01 td{ background: #fff;}

.tbl_01 th,.tbl_01 td,
.tbl_02 th,.tbl_02 td{
    padding: 10px;
    border: 1px #666 solid;
	vertical-align: middle;
}
.tbl_01 td.mark,
.tbl_02 td.mark {
	background:#41aafa;
	color: #fff;
}
.tbl_01 td.mark_ye {
	background:#fffada;
}
.tbl_01 td.light {
	background:#e6f2ff;
}
.tbl_01 td.num {
	color: #fff;
	background:#00008f;
	vertical-align: middle;
}
.tbl_01 td.total,
.tbl_02 td.total {
	border-top: double #333;
	background: #fffada;
}
.tbl_02 tr:nth-child(2n+1) {background: #e6f2ff!important;}
.tbl_02 tr:nth-child(2n) {background: #fff;}

/* 料金ボックス */
/* 「プロパンガスと都市ガスの料金比較」にて */
#priceM {
	margin: 0 auto 5px;
}
#priceM small{
	display: block;
	text-align: right;
	margin: 0 0 5px 0;
}
#priceR {
	margin: 0 auto 5px;
}
#priceM dl {
	background: #fde2aa;
	text-align: center;
}
#priceM dl dt, #priceR dl dt {
	font-size: 120%;
	font-weight: bold;
	padding: 1%;
}
#priceR dl {
	text-align: center;
	background: #d8e696;
}
#priceM dl dt {
	background: #f8b62d;
}
#priceR dl dt {
	background: #22ac38;
	color: #fff;
}
#priceM dl dd, #priceR dl dd {
	display: initial;
	line-height: 2;
	font-size: 120%;
	font-weight: bold;
	margin: 0 auto;
	padding: 10px;
}
#priceR dl dd span {
	color: red;
}
#priceM p {
	text-align: right;
	font-size: 70%;
	padding: 0;
}
#priceR p {
	text-align: right;
	font-size: 70%;
	padding: 0;
}

/* 料金ボックス */
/* 「適正料金早見表」にて */

table.heikin,
table.kyokai {
	width: 100%;
	border-spacing: 0;
	empty-cells: show;
	margin: 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 3px 0;
}
table.heikin th,
table.kyokai th {
	font-size: 1.2em;
	padding: 5px 0px;
}
table.heikin td,
table.kyokai td {
	padding: 20px 10px;
	line-height: 1.5;
}

table.heikin th{
    background: #f8b62d;
    font-weight: bold;
    text-align: center;
    border: 5px solid #f8b62d;
    
}
table.heikin td{
	text-align: center;
	border: 5px solid #f8b62d;
}
table.heikin td span{
	font-size: 1.5em;
	font-weight: bold;
}

table.kyokai th{
    background: #22ac38;
    font-weight: bold;
    text-align: center;
	color: #fff;
    border: 5px solid #22ac38;
}

table.kyokai td{
	text-align: center;
	border: 5px solid #22ac38;
}
table.kyokai td span{
	font-size: 1.5em;
	color: #ff0000;
	font-weight: bold;
}



dl.note{
	margin: 10px 0 20px 0;
}
dl.note	dt,dl.note dd{
	margin-bottom: 5px;
	line-height: 1.2;
}
dl.note	dt{	float: left;}

dl.note	dd{	margin-left: 1.1em;}


p.kome{
	font-size: 12px !important;
	line-height: 1.4 !important;
  padding-left: 1em;
	margin: 5px 0;
}
p.kome::before {
  content: "※";
  margin-left: -1em;
}
p.kome a{
	font-size: 12px !important;
}


.arrow_bottom{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 0 30px;
	border-color: #00008f transparent transparent transparent;
	margin: 20px auto;
	display: block;
}

/* シンプルボックス */
.box_w{
	margin: 30px auto 0;
    padding: 30px;
    background: #fff;
	border: 1px #00008f solid;
}


/* 豆知識 */
.knowledge {
	width:100%;
	box-sizing:border-box;
	border-radius: 10px;
	padding: 3%;
	margin: 20px 0;
	border: 4px solid #28c400;
	background:#fffada;
}
.knowledge #tit {
	font-size: 2.4rem;
	font-weight: bold;
	color: #28c400;
	border-bottom: 1px solid #28c400;
	padding: 10px 0;
}
.knowledge #tit::before{
	content: "";
	display: inline-block;
    width: 36px;
    height: 36px;
    margin: -3px 0 0 10px;
    background: url("https://www.propane-npo.com/img/column/i_mame.png") no-repeat;
    background-size: contain;
    vertical-align: bottom;
}

.knowledge div.marking{
	margin: 20px auto 0;
    padding: 15px 30px;
    background: #fff;
	border: 1px #28c400 solid;
	border-radius: 8px;
	background: #28c400;
	color: #fff;
}

.knowledge div.marking li{ line-height: 1.5;}

.knowledge ul li{
	line-height: 1.5;
	margin-top: 10px;
    margin-left: 20px;
}
.knowledge ul li:first-child{margin-top: 0px;}


.knowledge .knowledgePrice p {
	float:left;
	box-sizing:border-box;
	font-size:1.2em;
	font-weight:bold;
	background:#fff;
}
	
.knowledge .knowledgePrice p.plus,
.knowledge .knowledgePrice p.kakeru,
.knowledge .knowledgePrice p.equal {
	border:none;
	background:none;
}

.knowledge .knowledgePrice p.plus,
.knowledge .knowledgePrice p.kakeru,
.knowledge .knowledgePrice p.equal,
.knowledge .knowledgePrice p.kihon,
.knowledge .knowledgePrice p.jyuryo,
.knowledge .knowledgePrice p.shiyou,
.knowledge .knowledgePrice p.total { padding:1% 0.5%; margin: 2% 0;}

.knowledge .knowledgePrice p.kihon { border:3px solid #ff2678; color:#ff2678; }
.knowledge .knowledgePrice p.jyuryo { border:3px solid #0084ff; color:#0084ff; }
.knowledge .knowledgePrice p.shiyou { border:3px solid #2ac464; color:#2ac464; }
.knowledge .knowledgePrice p.total { border:3px solid #ffa200; color:#ffa200; }



/* 数式 */
.columnPointArea {
	width:100%;
	box-sizing:border-box;
	padding: 3%;
	background:#e0f5c6;
	margin-top: 20px;
	margin-bottom: 30px;
}
.formulaArea {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	padding: 3%;
	color: #000;
	background:#fff;
	border: 2px solid #28c400;
}

/* マーカー */
.marker_yellow {
    font-weight: 700;
    background-color: #FF9;
    padding: 1px;
    margin-left: 1px;
    margin-right: 1px;
}



/* エリアタブ */
.anchorTab ul{
	width: 100%;
	margin: 20px 0 0 0;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}

.anchorTab ul li {
	width: 19%;
	font-size: 1.8rem;
	margin: 0% 1% 1% 0;
	text-align: center;
	list-style: none;
}
.anchorTab ul li a {
	color: #fff;
    display: block;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 0;
	background: #00006c;
}
.anchorTab ul li a:hover {
	background: #3c6ef0;
	color: #fff;

}


.linkPassLong {
	width: 42%;
    margin: 20px 0 0 auto;
	text-align: center;
	padding: 10px;
	border-radius: 4px;
	background: #00006c;
  }
.linkPassLong a {
	display: block;
	color: #fff;
	text-decoration: none;
  }
.linkPassLong a::after {
	content: "\f105";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #fff;
	margin: 4px;
	text-decoration: none;
  }
.linkPassLong:hover {
	background: #3c6ef0;
  }

/* 相談事例 */

.case_study {

	margin-top: 20px;
	border-left: 5px solid #00006c;
	border-right: 5px solid #00006c;
	border-bottom: 5px solid #00006c;
}
	
.case_study h2 {
	font-size:2.0rem;
	color:#fff;
	background:#00006c;
	text-align:center;
	margin:0 auto;
	padding:10px 0;
}
	
.case_study h3 {
	font-size:1.6rem;
	line-height:18px;
	color:#00006c;
	padding:0 0 10px 0;
}

.case_study_item dl {
	width: 96%;
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;	
}
.case_study_item dt,
.case_study_item dd {
	border-bottom: 1px #666 solid;
}

.case_study_item dt {
	width: 25%;
	padding: 3% 0% 2% 0%;
}
.case_study_item dt img { width: 100%; height: auto;}
.case_study_item dd {
	width: 73%;
	padding: 3% 0% 2% 2%;
}
.case_study_item dd a { 
	margin-top: 10px;
	display: block;
}
.case_study_item dt:last-of-type{border:none;}
.case_study_item dd:last-of-type{border:none;}

/* ボックス型リンクボタン */

.boxLink{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.boxLink > div{
    width: 49%;
    margin: 1% 0% 2% 0%;
    padding: 0% 2% 0% 0%;
    display: flex;
}

.boxLink > div:nth-child(even) { padding:0% 0% 0% 0%;}

.boxLink > div > div{
	width: 100%;
	line-height: 140%;
    background: #fff;
    position: relative;
    padding: 5% 5% 5% 5%;	
    border-top: 10px #00008f solid;
    background: #e6f2ff;
}

.boxLink > div h2 a{
    font-size: 20px;
    font-weight: bold;
    padding: 0% 0% 2% 0%;
    margin: 0% 0% 5% 0%;
    border-bottom: 1px #00008f solid;
    color: #00008f;
    text-decoration: none;
    display: block;
    position: relative;
}
.boxLink > div h2 a:after { 
    position: absolute;
    top: 0;
    right: 0px;
    content: "\f105";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #00008f; 
}
.boxLink > div h2 a:hover{
    color:#3c6ef0;
}




/*====================================================================
アコーディオン
====================================================================*/

/* よくある質問 */

.faq_wrap{
	margin: 40px 0;
}
.faq_tit{
	font-size: 2.2rem;
	text-align: center;
	font-weight: bold;
}
.faq_btn_wrap{text-align: center;}

.faq_btn a{
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	text-decoration: none;
	color: #fff;
	padding: 2% 3%;
	border-radius: 4px;
	background: #FFA41C;
}

.faq_btn a:hover{
	background: #FF8F00;
}


/* アンサーボックス */

.ansBox dl{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin:0 auto;
}

.ansBox dt{
	width: 9%;
	padding: 0;
	margin: 20px 0 0 0;
}
.ansBox dt span{
	color: #fff;
	font-size: 1.8rem;
	background: #ff0078;
	padding: 9px 10px;
	margin:0 0 0 0;
	border-radius: 5px;
	font-weight: bold;
}

.ansBox dd{
	width: 89%;
	padding: 0 0 0 1%;
}



/* 適正価格アコーディオン */

.accordion_wrap{
  margin: 20px 0 10px;
}

.accordion_one {
  width: 100%;
  margin: 0 auto;
}
.accordion_one .accordion_header {
  background: linear-gradient(to bottom, rgba(64,155,211,1) 0%,rgba(47,114,186,1) 100%);
  color: #fff;
  font-size: 21px;
  font-weight: bold;
  padding: 15px 5%;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
  border-top: #2f72ba 1px solid;
}

.accordion_one .accordion_header:hover {
  opacity: .8;
}
.accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 40px;
  height: 40px;
  /* border: 1px solid #fff; */
  margin-top: -20px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}
.accordion_one .accordion_header.stay .i_box {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}
.accordion_one .accordion_header.stay .i_box .one_i {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.accordion_one .accordion_header.stay.open .i_box .one_i {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.accordion_one .accordion_header.stay.open .i_box {
  -webkit-transform: rotate(315eg);
  transform: rotate(315deg);
}
.accordion_one .accordion_header .i_box .one_i:before, .accordion_one .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: #fff;
  border-radius: 10px;
  width: 18px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
}
.accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.accordion_one .accordion_header.stay .i_box .one_i:before {
  content: none;
}
.accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.accordion_one .accordion_header.stay.open .i_box .one_i:before {
  content: "";
}
.accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.accordion_one .accordion_header.stay.open .i_box .one_i:after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.accordion_one .accordion_inner {
  display: none;
  padding: 30px 10px;
  box-sizing: border-box;
}
.accordion_one .accordion_inner.stay {
  display: block;
}

.accordion_one .accordion_inner .box_one {
  /* height: 300px; */
}
.accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}


.link_area{
  width: max-content;
  margin: 20px auto;
  position: relative;
}
.link_area a{
  background:url(https://www.propane-npo.com/img/bt/next.png) top 48% right 3% no-repeat, #f08217;
  background-size: 28px, 100%;
  color: #fff;
  text-decoration: none;
  padding: 10px 50px 10px 20px;
  display: block;
  text-align: center;
  border-radius: 30px;
  transition: 0.1s;
}
.link_area a:hover{
  background:url(https://www.propane-npo.com/img/bt/next.png) top 48% right 3% no-repeat, linear-gradient(to bottom, #ffa752 0%, #f99534 100%);
  background-size: 28px, 100%;
}

.tbl_02 th.title {
  background-color: #e22b2b;
}

#tekisei {
  background-color: #0F9302;
  color: #fff;
}



/*--------------------★★★PCサイト用（1080px以上）★★★---------------------*/


@media screen and (min-width: 1080px) {



}

/*--------------------★★★タブレット★★★---------------------*/
@media (min-width: 768px) and (max-width: 1079px) {

/* フロー */
.flow_box dd { margin-left: 30px;}

/* 監修者 */
.sv_left{ font-size: 20px;}
.sv_tit{ font-size: 17px;}
.sv_right dd { width: 70%;}

}


/*--------------------★★★スマホサイト用（767px以下）★★★---------------------*/
@media screen and (max-width:767px) {

/* 日付 */
.article-date {font-size: 1.2rem;}

.mainImg small{font-size: 1.0rem;}

/* 見出し、キャプション等 */
.wLineHeading{
    line-height: 1.2;
    font-weight: bold;
    font-size: 2.4rem;
    color: #00006c;
}
.wLineHeading span{
	font-size: 0.7em;
	display: block;
}

/* 料金ボックス */
table.heikin th,
table.kyokai th {font-size: 1em;}
table.heikin td,
table.kyokai td {
	padding: 5px 5px;
	line-height: 1.5;
}

/* フロー */
.flow_box dd { margin-left: 25px;}

/* あわせて読みたい */
.relatedArea a .relatedTxtArea dl dt {
	margin-top: 20px;
}
.relatedArea a {display: block;}
.relatedArea a .relatedTxtArea,
.relatedArea a .relatedImgArea{
	width: 100%;
}

/* 署名プロフィール */
.profileImg{
	width: 100%;
	text-align: center;
    padding:0px 0px 15px 0px;
}
.profileTtl p { text-align: center;}

.profileTxt {
	width: 100%;
}
/* 監修者 */
.sv{
	display: block;
}

.sv_left,.sv_right{ 
	width: 100%; 
	display: block;
	padding: 0 0;
}
.sv_right dd { width: 68%;}

.sv_left{font-size: 24px;}

.sv_left img{
	max-width: 139px;
	width: 100%;
	height: auto;
	margin: 15px auto 20px;
	display: block;
}
.sv_tit br{display: block;}






/* 相談事例 */
.case_study h2 { font-size:1.6rem;}

/* ボックス型リンクボタン */
.boxLink > div{
	width: 100%;
	padding: 0% 0% 0% 0%;
}



/* エリアタブ */
.anchorTab ul li {font-size: 1.4rem;}


/* 豆知識 */
.knowledge .knowledgePrice p.kihon {border:1px solid #ff2678; color:#ff2678; }
.knowledge .knowledgePrice p.jyuryo { border:2px solid #0084ff; color:#0084ff; }
.knowledge .knowledgePrice p.shiyou { border:2px solid #2ac464; color:#2ac464; }
.knowledge .knowledgePrice p.total { border:2px solid #ffa200; color:#ffa200; }

.knowledge .knowledgePrice p {font-size:0.8em;}


/* コンテンツ内数字リスト */
.listNum li {font-size: 1.6rem;}

/* コラムのまとめ */
.box_matome_column h3 {line-height: 1.2;}

/* 数式 */
.columnPointArea .formulaArea {font-size: 0.9em;}


}


/*--------------------★★★スマホサイト用（480px以下）★★★---------------------*/
@media screen and (max-width:480px) {

.tbl_01 th,.tbl_01 td,
.tbl_02 th,.tbl_02 td{
	padding: 10px 2px;
	font-size: 12px;
}



/* 監修者 */
.sv_tit{ font-size: 17px;}
.svOpenButton{ display: block;}

}








/* ------------------リニューアルで追加_2025-------------------------- */

/* レイアウト */
section {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 10%;
}
	section:first-of-type {
		padding: 0 0 2%;
	}

section.pd_zero {
	width: 100%;
	margin: 0 auto;
	padding: 0 0 0;
}

	@media screen and (max-width:767px) {
		section,section.pd_zero{ width: 100%;}
		section.full{
		width: 100%;
	}
	}

.bt_forApart{
  width: fit-content;
  margin: 0;
}
.bt_forApart a{
  font-size: 17px;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  padding: 8px 10px 8px 15px;
  display: block;
	background: #1D3879;
	border: 1px solid #1D3879;
}
.bt_forApart a:hover{
  color: #1D3879;
  background: #fff;
	border: 1px solid #1D3879;
  transition: 0.3s;

}
.bt_forApart a:after{
  content: '＞';
  margin: 0 0 0 8px;
}

.bt_forApart.right {
  margin-left: auto;
}
.bt_forApart.left {
  margin-right: auto;
}
.bt_forApart.center {
  margin: 0 auto;
  
}




.page_triangle{
		width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 30px solid #DCE2E9;
    margin: 20px auto;
}


/* related */
.related_post{
    width: 80%;
    position: relative;
    border: 2px solid #99A5C3;
    margin: 40px auto 20px;
    text-align: center;
    font-size: 17px;
    padding: 1em;
}
.related_tit{
    color: #3F568D;
    position: absolute;
    top:-10px;
    left: 10px;
    padding: 0 10px;
    background: #fff;
    font-size: 15px;
}
.related_tit::before{
    content:url(../img/icon_relatedPost.png);
	float: left;
	vertical-align:middle;
    margin: 0 5px 0 0;
}
.related_post a{
    color: #2F83FF;
		line-height: 1.4;
}
.related_post a:hover{
    opacity: 0.5;
    transition: 0.3s;
}


/* 変更事例のタブ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.tabs > label {
  flex: 1 1;
  order: -1;
  position: relative;
  min-width: 70px;
  padding: 1em 1em;
  background-color: #A5AFC9;
  color: #fff;
  text-align: center;
  cursor: pointer;
  font-size: clamp(16px, 3vw, 17px);
  line-height: 1.4;
  font-weight: bold;
  border-bottom: 1px solid #1D3879;
  border-right: 2px solid #fff;
}
.tabs > label:last-of-type{ border-right: none;}

.tabs > label > span {
  font-size: 1.5em;
}

.tabs input {
  display: none;
}

.tabs .content {
  display: none;
  width: 100%;
  padding: 40px 0;
	text-align: center;
}

.tabs input:checked + label {
  background-color: #1D3879;
  color: #fff;
}

.tabs input:checked + label::before {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 9px;
  background-color: #1D3879;
  content: '';
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tabs input:checked + label + .content {
  display: block;
	border-left: 1px solid #1D3879;
	border-right: 1px solid #1D3879;
	border-bottom: 1px solid #1D3879;
}

.tabs_tit{
	font-weight: bold;
	text-align: center;
	font-size: clamp(20px, 3vw, 28px);
	color: #333;
	margin: 0 auto 30px;
}

.hikaku ul{
  display: flex;
  margin: 1em auto;
  justify-content: center;
  font-size: clamp(16px, 3vw, 17px);
}
.hikaku ul li{
  list-style: none;
}
.hikaku_triangle:after { 
  content: "▶";
  margin: 0 0.5em;
  font-size: 1.5em;
  color: #1D3879;
  line-height: 1.5; /* 必要に応じて調整 */
  vertical-align: middle;
}
.hikaku ul li:last-child{
  font-weight: bold;
  color: #E87E15;
}
.hikaku ul li strong{
  font-size: 2em;
}


.hikaku_box dl{
  font-size: clamp(16px, 3vw, 17px);
  border: 1px solid #1D3879;
}
.hikaku_box dl dt,.hikaku_box dl dd{
  padding: 0.5em;
}
.hikaku_box dl dt strong,.hikaku_box dl dd strong{
  font-size: 1.5em;
  font-weight: bold;
}
.hikaku_box dl dt{
  color: #fff;
  background: #1D3879;
}
.hikaku_box dl dd{
  color: #1D3879;
  background: #E9EDF1;
}


/* step */

.step_copy{
	color: #fff;
	font-size: clamp(20px, 3vw, 24px);
	font-weight: bold;
	background: #6C7EA8;
	border-radius: 10px;
	text-align: center;
	padding: 0.5em;
	margin: 0 0 60px 0;
	line-height: 1.4;
	position: relative;
}
.step_copy::after {
	content: "";
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 20px solid #6C7EA8;
}

.step{
    margin: 20px 0 50px;
}
.step h3{
    font-weight: bold;
    color: #1D3879;
    font-size: clamp(14px, 3vw, 17px);
    background: #DCE2E9;
    padding: 0.5em;
    margin: 0.5em 0;
    text-align: center;
    border-radius: 9999px;
}
.step_tit{
    font-weight: bold;
    color: #000;
    font-size: clamp(17px, 3vw, 20px);
    margin: 0 0 0.5em;
    line-height: 1.4;
}

.step ul{
    width: 85%;
    margin: 20px auto 0;
}
.step ul li{
    list-style: none;
    margin: 40px 0;
    clear: both;
    display: flex;
}
.step ul li:last-child{
    margin: 0 0 0 0;
}
.step_item{
    width: 75%;
    margin: 0 0 0 5%;
}
.step ul li > picture{
    width:20%;
}
.step ul li > picture img{
    max-width:110px ;
    height: auto;
    margin: 0 0 0 0;
}


.step_triangle{
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #1D3879; /* ▼の色 */
    margin: 20px auto 20px;
}
.step_done{
    font-size: 17px;
    background: #1D3879;
    color: #fff;
    border-radius: 9999px;
    text-align: center;
    padding: 0.5em 0;
    margin: 0 0 1em;
    font-weight: bold;
}


/* read more */

.readmore {
  position: relative;
  margin: 0 auto;
  padding: 0px 0px 30px;
}

.readmore-content {
  position: relative;
  height: 180px;
  transition: all .4s;
  overflow: hidden;
	z-index: 1;
}

.readmore-content::before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 75px;
  transition: all .4s;
  background: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100% );
	z-index: 2;
}

.readmore-content.is_open:before{
  display: none;
}



/* read more button */
.readmore_wrapper {
  text-align: center;
	margin: 20px 0 0 0;
}

.readmore_bt {
  display: inline-block;
  width: 56px;
  height: 56px;
  background-color: #e5eaf0;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  cursor: pointer;
}

.readmore_bt::before {
  content: '';
  border: solid #1a2e6c;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 6px;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) rotate(45deg);
}

.readmore_label {
  color: #1a2e6c;
  font-size: 14px;
  margin-top: 6px;
}


/* よく読まれている記事 */
.mostRead ul{
    margin: 20px 0;
}

.mostRead ul li{ 
    list-style: none;
		border-bottom:#ccc 1px solid;
		padding: 1em 0;
}
.mostRead ul li a{
    text-decoration: none;
    display: flex;
}
.mostRead ul li a:hover{ opacity: 0.7;}

.mostRead_mv{
    width: 25%;
}
.mostRead_mv img{
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
}

.mostRead_inner{
    width: 80%;
    margin: 0 0 0 10px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 1.5em;
}

.mostRead_tit{
    font-size: clamp(16px, 3vw, 20px);
    text-decoration: none;
    color: #2F83FF;
    display: block;
    margin: 0.5em 0 0 0;
}


.mostRead_comment{
    font-size: clamp(14px, 3vw, 17px);
    text-decoration: none;
    color: #1D3879;
    display: block;
    font-weight: bold;
    margin: -10px 0 0 0;
}

.mostRead_comment::before{
    content: "■";
    font-size: 1.8em;
    margin: 0 3px 0 0;
}


.mostRead_date{
    font-size: 0.8em;
    color: #888;
    font-weight: normal;
    display: block;
    margin: 10px 0 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
}


/* ラベル　user */

.user_kodate {
    width: max-content;
    color: #1D3879;
    padding: 8px 10px 4px 0;
    font-weight: bold;
    border: 1px solid #1D3879;
    font-size: 18px;
}
.user_kodate::before{
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: -5px 10px 0 10px;
    background: url("https://www.propane-npo.com/renewal/img/icon_kodate_blue.png") no-repeat;
    background-size: auto 100%;
    vertical-align: middle;
}


    @media screen and (max-width:767px) {
    .user_kodate {
        width: auto;
        color: #fff;
        padding: 18px 10px 14px 0;
        font-weight: bold;
        border: none;
        font-size: 20px;
        background: #1D3879;
        text-align: center;
    }
    .user_kodate::before{
        content: "";
        display: inline-block;
        width: 25px;
        height: 25px;
        margin: -5px 10px 0 10px;
        background: url("https://www.propane-npo.com/renewal/img/icon_kodate.png") no-repeat;
        background-size: auto 100%;
        vertical-align: middle;
    }

    }


/* ラベル　専用 */

.only_kodate{
	width: max-content;
	color: #fff;
	background: #1D3879;
	padding: 8px 15px;
	font-weight: bold;
	font-size: 18px;;
}
@media screen and (max-width:767px) {
	.only_kodate{	
		margin: 20px auto 0;
	}
}


/* 協会の強み */
.tsuyomi{
  border: 2px solid #1D3879;
  border-radius: 6px;
  margin: 20px auto 5px;
  background: #fff;
  overflow: hidden;
	font-size: clamp(17px, 3vw, 20px);
}

.tsuyomi h2{
  background: #1D3879;
  color: #fff;
  font-weight: bold;
  padding: 0.3em 0;
  line-height: 1.5;
	margin: 0 auto;
	text-align: center;
}

.tsuyomi h2::before{
		content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin: 0 5px 0 0;
    background: url("../img/icon_fire.png") no-repeat;
    background-size: contain;
		vertical-align: middle;
}

.tsuyomi ul{
  margin: 0.7em auto;
  color: #1D3879;
	width: max-content;
	padding: 0 0 0 1em;
}
.tsuyomi ul li{
	padding: 0;
	font-weight: bold;
}
.tsuyomi ul li:last-child {
  margin: 0 0 0 0;
}



/*  */

.kyokai_box {
  border: 2px solid #1D3879;
  border-radius: 6px;
  margin: 20px auto;
  background: #fff;
  overflow: hidden;
}

.kyokai_title {
  background: #1D3879;
  color: #fff;
  font-weight: bold;
  padding: 0.6em 1em;
  display: flex;
  align-items: center;
  font-size: 1.1em;
}

.kyokai_icon {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
}

.kyokai_list {
  list-style: none;
  margin: 1em 1.2em;
  padding: 0;
  color: #1D3879;
  font-size: 1em;
}

.kyokai_list li {
  margin-bottom: 0.6em;
  line-height: 1.5;
}

.kyokai_list li:last-child {
  margin-bottom: 0;
}

.emphasis {
  color: #F9A825; /* オレンジ色 */
  font-weight: bold;
}

.rating {
  color: #F9A825;
  font-weight: bold;
}