@charset "UTF-8";
/* CSS Document */
/*--------------------★★★PC、SP両方に共有★★★---------------------*/
html {
  scroll-behavior: smooth;
  font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  color: #333;
  font-size: 62.5%; /* font-sizeは16pxの62.5%の10px */
}
body {
  font-size: 1.7rem;
} /*font-size : 17px と同等*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
p {line-height: 1.6;}
.clearfix:before {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  display: block;
}
.width1080 {
  box-sizing: border-box;
  margin: 0 auto;
}


.width_cta {
  width: 90%;
  box-sizing: border-box;
  margin: 0 auto;
  display: block;
}

.topWrap {
  width: 1080px;
  margin: 0 auto;
}

/*pageTop====================================================================*/
#pageTop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 2%;
  background: #3c6ef0;
  opacity: 0.6;
  border-radius: 50%;
  z-index: 333;
}
#pageTop a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#pageTop a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}





/*wrap====================================================================*/
.wrap {
  background: #fff;
  margin: 150px auto 0;
}


/*pnkz====================================================================*/
#pnkz {
  padding: 6px 0 8px;
  background: #fff;
}
#pnkz ul {
  display: flex;
  margin: 0 auto;
}
#pnkz ul li {
  list-style: none;
  font-size: 1.4rem;
  margin-right: 5px;
}
#pnkz ul li a {
  text-decoration: none;
  color: #00006c;
}
#pnkz ul li a:hover {
  color: #3c6ef0;
}
#pnkz ul li a::after {
  text-decoration: none;
  content: "\f105";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #333;
  margin-left: 5px;
}
#contentsArea {
  display: flex;
  justify-content: space-between;
}
/*side====================================================================*/
#sideContents {
  /* position: -webkit-sticky;
  position: sticky; */
  width: 25%;
  height: 100%;
}
.sideCta {
  color: #fff;
  margin: 0 auto 10px;
  background: #00006c;
}
.sideCta .sideCtaTtl {
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  color: #fff;
}
.sideCta .telArea {
  text-align: center;
  margin: 5px auto 0;
}
.sideCta .telArea a {
  color: #ffbe00;
  font-weight: bold;
  text-decoration: none;
}
.sideCta .telInfo ul {
  text-align: center;
  margin: 5px auto 0;
  list-style: none;
}
.sideCta .telInfo li {
  list-style: none;
  line-height: 1.6;
  color: #fff;
}
.sideCta .telInfo li span {
  color: #333;
  margin-right: 5px;
  padding: 3px;
  background: #bbf8ff;
}
.sideCta .telInfo li:last-child span {
  background: #ffa0a0;
}
.sideCta .btnArea ul li {
  position: relative;
  overflow: hidden;
  font-size: 2rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 4px;
  margin: 10px auto 0;
  background: #28c400;
  cursor: pointer;
}
.sideCta .btnArea ul li::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
  -webkit-animation: shine 5s infinite;
  animation: shine 5s infinite;
}
.sideCta .btnArea ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 4px;
  padding: 20px;
}
.sideCta .btnArea ul li a:hover {
  background: #2ddc00;
}
.sideBnrArea div {
  margin-top: 10px;
}
.sideBtnArea {
	margin-top: 20px;
	box-sizing: border-box;
}
.sideBtnArea div.ttl {
	box-sizing: border-box;
	color: #fff;
	list-style: none;
	font-weight: bold;
	margin-top: 15px;
	padding: 12px 15px 8px;
  background: #00006c;
	border-top: 3px solid #ccc;
	border-right: 3px solid #ccc;
	border-left: 3px solid #ccc;
}
.sideBtnArea div.ttl:first-child {
	margin-top: 0;
	background: #41aafa;
	border-top: 3px solid #41aafa;
	border-right: 3px solid #41aafa;
	border-left: 3px solid #41aafa;
}
.sideBtnArea ul {
	box-sizing: border-box;
	border-right: 3px solid #ccc;
	border-bottom: 3px solid #ccc;
	border-left: 3px solid #ccc;
}
.sideBtnArea .sideMain ul {
	box-sizing: border-box;
	border-right: 3px solid #41aafa;
	border-bottom: 3px solid #41aafa;
	border-left: 3px solid #41aafa;
}
.sideBtnArea ul li {
  position: relative;
  width: 100%;
	font-weight: bold;
	font-size: 1.6rem;
  list-style: none;
  text-decoration: none;
	margin-top: 0;
	color: #00006c;
  background: #fff;
	border-top: 1px solid #ccc;
}
.sideBtnArea .sideMain ul li {
	color: #41aafa;
	border-top: 1px solid #41aafa;
}


.sideBtnArea ul li a {
  display: block;
  text-decoration: none;
  color: #00006c;
  padding: 12px;
}
.sideBtnArea ul li a:hover {
  background: #c8d2ff;
}
.sideBtnArea ul li a.active {
  background: #c8d2ff;
}
.sideBtnArea ul li a::after {
  position: absolute;
  top: 30%;
  right: 10px;
  content: "\f105";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #00006c;
}
.sideBtnArea .sideMain ul li a:hover {
  background: #d2ecff;
}
.sideBtnArea .sideMain ul li a.active {
  background: #d2ecff;
}

.sideBtnArea .sideMain ul li a::after {
  color: #41aafa;
}
.sideBtnArea ul li span {
  display: inline-block;
  color: #fff;
  width: 40%;
  text-align: center;
  margin-right: 2px;
  padding: 5px 1px;
}
.sideBtnArea img:hover {
	opacity: 0.5;
}
/*maincontents================================================================*/
#mainContents {
  border-top: 10px solid #00006c;
  background: #fff;
}
#mainContents .mainImg {
  margin-top: 20px;
}
#mainContents .box {
	margin-top: 60px;
}
.pageTitle {
  font-family: "Hiragino Kaku Gothic Std", "Hiragino Kaku Gothic StdN", "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  font-weight: bold;
	line-height: 1.4;
}
#description, .pageCopy {
  line-height: 1.6;
  margin-top: 20px;
  font-weight: 700;
}
.pageCopy span {
  font-weight: bold;
}
.pageHeading {
  color: #fff;
  line-height: 1.2;
  margin: 1em 0 1em;
  padding: 14px 10px 10px 15px;
  font-size: clamp(22px, 3vw, 36px);
  background: #5977c3;
}
.pageSubHeading {
  color: #000;
  line-height: 1.2;
  margin: 1em 0 1em;
  padding: 0.5em;
  border-left: 10px solid #2EA7E0;
  font-size: 20px;
  display: flex;
  align-items: center;
}
.pageSubHeadingUnderline {
  line-height: 1.2;
  margin-top: 20px;
  padding: 0 0 5px;
  border-bottom: 3px solid #ff0000;
}

.pageMiniHeading{
    line-height: 1.2;
    font-weight: bold;
    margin-top: 20px;
    color: #00006c;
}

.pageMicroHeading{
    line-height: 1.2;
    font-weight: bold;
    margin-top: 20px;
    color: #41aafa;
}

/*linkPass================================================================*/
.linkPass {
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  background: #00006c;
}
.linkPass a {
  display: block;
  color: #fff;
  text-decoration: none;
}
.linkPass a::after {
  content: "\f105";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #fff;
  margin: 4px;
  text-decoration: none;
}
.linkPass:hover {
  background: #3c6ef0;
}
.colorBox {
  margin: 30px auto 0;
  padding: 30px;
  background: #e6f2ff;
}
.outlineBtn {
  position: relative;
  width: 100%;
  outline: 1px solid rgb(255, 255, 255);
  outline-offset: -6px;
}
.outlineBtn p a {
  display: block;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
	text-align: center;
  padding: 30px 20px;
}
.outlineBtn p a::after {
  position: absolute;
  right: 20px;
  content: "\f138";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #fff;
}
.outlineBtn:hover {
  opacity: 0.7;
}
.ctaArea {
  margin: 50px auto 0;
  background: #00006c;
}
.ctaArea .ctaTtl {
  font-weight: bold;
  color: #fff;
}

.ctaArea .ctaTtl span.house,
.ctaArea .ctaTtl span.apaman{
  font-size: 0.8em;
  color: #fff;
  border-radius: 15px;
  margin: 0 5px 0 0;
  font-weight: bold;
  padding: 5px 15px;
}


.ctaArea .ctaTtl span.house{
  background: #ff0078;
}

.ctaArea .ctaTtl span.apaman{
  background: #ff0000;
}

.ctaArea .btnArea ul {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
}
.ctaArea .btnArea ul li {
  box-sizing: border-box;
  width: 48%;
  border-radius: 4px;
  list-style: none;
  text-align: center;
  background: #fff;
}
.ctaArea .btnArea ul li a {
  display: block;
  text-decoration: none;
  padding: 15px 0;
}
.ctaArea .btnArea ul li.tel {
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 4px;
  background: #FFA41C;
  cursor: pointer;
}
#contentsArea .ctaArea .btnArea ul li.tel::before{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
  -webkit-animation: shine 5s infinite;
  animation: shine 5s infinite;
}

.ctaArea .btnArea ul li.tel a {
  border: 3px solid #FFA41C;
  color: #000;
  border-radius: 4px;
}
.ctaArea .btnArea ul li.tel a:hover {
  border: 3px solid #FF8F00;
  background: #FF8F00;
  color: #000;
}
.ctaArea .btnArea ul li.mail {
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 4px;
  background: #28c400;
  cursor: pointer;
}
.ctaArea .btnArea ul li.mail::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 70%);
  -webkit-animation: shine 5s infinite;
  animation: shine 5s infinite;
}
.ctaArea .btnArea ul li.mail a {
  color: #fff;
  border-radius: 4px;
  border: 3px solid #28c400;
}
.ctaArea .btnArea ul li.mail a:hover {
  border: 3px solid #2ddc00;
  background: #2ddc00;
}

/* ctaの開閉 */
.ctaInfo{
  width: 49%;
  float: left;
  text-align: center;
  color: #fff;
  margin: 5px 0;
  line-height: 1.5;
  padding: 0 1% 0 0;
}

.ctaInfo span#day1{
color: #000;
font-size: 1.2rem;
margin-right: 5px;
padding: 3px;
background: #bbf8ff;
}
.ctaInfo span#day2{
color: #000;
font-size: 1.2rem;
margin-right: 5px;
padding: 3px;
background: #ffa0a0;
}

@media screen and (max-width:767px) {
.ctaInfo{
    font-size: 1.4rem;}
}




/*sns================================================================*/
#snsContents {
	text-align: center;
  margin: 0 auto;
  padding: 30px 0;
}


/*--------------------★★★PCサイト用（1080px以上）★★★---------------------*/
@media screen and (min-width: 1080px) {
  .spNone {
    display: inline !important;
  }
  .spOn {
    display: none;
  }
  .width1080 {
    width: 1080px;
  }
  .topWrap {
    width: 1080px;
    margin: 0 auto;
}
  
  /*pageTop================================================================*/
  #pageTop {
    bottom: 10%;
  }

  

  /*wrap====================================================================*/
  .wrap {
    margin: 150px auto 0;
  }
  /*pnkz====================================================================*/
  #pnkz ul {
    width: 1080px;
  }
  /*contentsArea====================================================================*/
  #contentsArea {
    width: 1080px;
    margin: 30px auto 0;
		padding-bottom: 30px;
  }
  /*side====================================================================*/
  #sideContents {
    top: 120px;
  }
  .sideCta {
    padding: 20px;
  }
  .sideCta .sideCtaTtl {
    font-size: 1.8rem;
  }
  .sideCta .telArea a {
    font-size: 3rem;
  }
  .sideCta .telInfo li {
    font-size: 1.6rem;
  }
  .sideCta .telInfo li span {
    font-size: 1.3rem;
  }
	.sideBtnArea div.ttl {
		font-size: 1.8rem;
	}
  .sideBtnArea ul li {
  }
  /*maincontents================================================================*/
  #mainContents {
    width: 66.666%;
    padding: 30px 0 50px;
  }
  #mainContents .pageTitle {

    
		font-size: 4rem;
		margin-top: 20px;
  }
  .category .pageTitle {
		font-size: 4rem;
		color: #fff;
		padding: 10px;
		background: #00006c;
  }


  .pageSubHeadingUnderline {
    font-size: 2.1rem;
  }
  .pageMiniHeading {
    font-size: 2.1rem;
  }
  .pageMicroHeading {
    font-size: 1.8rem;
  }
  /*linkPass================================================================*/
	.linkPass {
    width: 45%;
    margin: 20px 0 0 auto;
  }
  .outlineBtn {
    width: 350px;
    height: 86px;
    margin: 30px auto;
    background: url(https://www.propane-npo.com/renewal/img/outlineBtn.png) no-repeat;
  }
  .outlineBtn p a {
    font-size: 2.5rem;
  }
  .ctaArea {
    padding: 20px 30px;
  }
  .ctaArea .ctaTtl {
    text-align: center;
    font-size: 2.1rem;
  }
  .ctaArea .btnArea ul li {
    font-size: 2.1rem;
  }
	
	
	.anchorLink {
		padding-top: 40px;
		margin-top: -40px;
	}
	

  
}
/*--------------------★★★タブレット★★★---------------------*/
@media (min-width: 768px) and (max-width: 1079px) {
  .spNone {
    display: inline !important;
  }
  .spOn {
    display: none;
  }
  .width1080 {
    width: 94%;
  }

  .topWrap {
    width: 90%;
    margin: 0 auto;
  }
  img {
    width: 100%;
  }



  /*pageTop====================================================================*/
  #pageTop {
    bottom: 30%;
  }

  
  /*wrap====================================================================*/
  .wrap {
    margin: 150px auto 0;
  }
  /*pnkz====================================================================*/
  #pnkz ul {
    width: 94%;
  }
  /*contentsArea====================================================================*/
  #contentsArea {
    width: 94%;
    margin: 30px auto 0;
		padding-bottom: 30px;
  }
  /*side====================================================================*/
  #sideContents {
    top: 110px;
  }
  .sideCta {
    padding: 10px;
  }
  .sideCta .sideCtaTtl {
    font-size: 1.5rem;
  }
  .sideCta .telArea a {
    font-size: 2rem;
  }
  .sideCta .telArea img {
    width: 13%;
  }
  .sideCta .telInfo li {
    font-size: 1.4rem;
  }
  .sideCta .telInfo li span {
    font-size: 1.1rem;
  }
	.sideBtnArea div.ttl {
		font-size: 1.5rem;
	}
  .sideBtnArea ul li span {
    display: block;
    width: 90%;
    padding: 2px 1px;
  }
  .sideBtnArea ul li {
    font-size: 1.3rem;
  }
  /*maincontents================================================================*/
  #mainContents {
    width: 66.666%;
    padding: 30px 20px 50px;
  }
  .pageTitle {
    font-size: 2.5rem;
  }
  .category .pageTitle {
    font-size: 2.5rem;
		color: #fff;
		padding: 10px;
		background: #00006c;
  }

  .pageSubHeadingUnderline {
    font-size: 1.7rem;
  }
  /*linkPass================================================================*/
	.linkPass {
    width: 55%;
    margin: 20px 0 0 auto;
  }
  .outlineBtn {
    width: 50%;
    height: auto;
    margin: 30px auto;
    background: url(https://www.propane-npo.com/renewal/img/outlineBtn.png) no-repeat;
  }
  .outlineBtn p a {
    font-size: 1.8rem;
  }
  .ctaArea {
    padding: 15px;
  }
  .ctaArea .ctaTtl {
    text-align: center;
    font-size: 1.8rem;
  }
  .ctaArea .btnArea ul li {
    font-size: 1.8rem;
  }

  

}
/*--------------------★★★スマホサイト用（767px以下）★★★---------------------*/
@media screen and (max-width:767px) {
  .spNone {
    display: none;
  }
  .spOn {
    display: inline !important;
  }
  .width1080 {
    display: block;
    width: 90%;
  }
  .topWrap {
    width: 90%;
    margin: 0 auto;
}

  img {
    width: 100%;
  }

 
  /*pageTop====================================================================*/
  #pageTop {
    display: none;
    /*bottom: 18%;*/
  }
  /*header==================================================================*/

  #mobileHead ul.contactLink {
    display: flex;
    justify-content: space-between;
    position: absolute;
    right: 16%;
    width: 20%;
    margin-top: 8px;
  }

  #mobileHead ul.contactLink li {
    box-sizing: border-box;
    width: 100%;
    list-style: none;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    margin-right: 5px;
    background: #FFA41C;
  }
  #mobileHead ul.contactLink li:last-child {
    background: #28c400;
  }
  #mobileHead ul.contactLink li a {
    display: block;
    color: #fff;
    padding: 10px 0;
    text-decoration: none;
  }
  #mobileHead ul.contactLink li#mobileTel a {
    color: #000;
  }

  
  
  /*wrap====================================================================*/
  .wrap {
    display: flex;
    flex-direction: column;
    margin: 150px auto 0;
  }
  /*pnkz====================================================================*/
  #pnkz ul {
    width: 90%;
    margin: 0 auto;
  }
  #pnkz ul li {
    margin-top: 5px;
    font-size: 1.2rem;
  }

  /*contentsArea====================================================================*/
  #contentsArea {
    width: 94%;
    margin: 10px auto 0;
    padding-bottom: 30px;
  }
  /*side====================================================================*/
  #sideContents {
    display: none;
  }
  /*maincontents================================================================*/
  #mainContents {
    width: 100%;
    margin: 0 auto;
    padding: 5px 0 30px;
    border: none;
  }
  .pageTitle {
    font-size: 2.8rem;
  }

	.linkPass {
    width: 74%;
    margin: 20px auto 0;
  }
  .outlineBtn {
    width: 60%;
    height: auto;
    margin: 30px auto;
    border-radius: 4px;
    background: url(https://www.propane-npo.com/renewal/img/outlineBtn_sp.png) no-repeat;
  }
  .outlineBtn span {
    display: none;
  }
  .ctaArea {
    padding: 5%;
  }
  .ctaArea .ctaTtl {
    text-align: center;
    font-size: 1.7rem;
  }
  .ctaArea .btnArea ul li {
    font-size: 1.8rem;
  }
  .ctaArea .btnArea ul li a {
    font-weight: bold;
  }

  
  /*FixedBanner==================================================================*/
  .fixedBanner {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }
	/*
  .side-open .fixedBanner {
    bottom: -300px;
  }
	*/
}