/* CSS Document */
/**********************/
/** 共通パーツ **/
/**********************/
.lpInner { width: 950px; margin: 0 auto;}
.lpInner p { line-height: 1.8;}
.lpCont { padding: 40px 0 60px;}
.lpContBox { padding: 30px; background: #fff;}
@media only screen and (max-width:768px){
  .lpInner { width: 90%;}
  .lpContBox { padding: 30px 20px;}
}


/*タイトル（headline）*/
.headlineBold { color: #000; }
.headlineBold.fcRed { color: #D7000F;}
.headlineBlueBack { background: #008CD6; font-size: 2.8rem; color: #fff; font-weight: 700; text-align: center; padding: 10px 0; margin: 10px 0 40px;}
.headlineOrangeBack { background: #F2750F; font-size: 2.8rem; color: #fff; font-weight: 700; text-align: center; padding: 10px 0; margin: 10px 0 20px;}
.headlineDotted { border-bottom: dotted 1px #231815; font-size: 2.4rem; text-align: center; color: #231815; font-weight: 700; margin: 30px 0 10px;}
.headlineDotted span { color: #46789F; }
.headlineBorder { border: solid 1px #9B9B9B; border-left: none; border-right: none; padding: 15px 0; margin: 100px 0 20px; font-size: 2.3rem; font-weight: 700; color: #0F8CF2;}
.headlineBorder span { display: block; font-size: 1.2rem; text-align: right;}
.headlineBorder span.sup { display: inline-block; font-size: 1.2rem;}
.headlineDoubleLine { width: 70%; margin: 0 auto; border-bottom: double 10px #7EC1F6; font-size: 4.0rem; text-align: center; color: #5B5B5B;}
.headlineBorderLine { border-bottom: solid 3px #0F8CF2; font-size: 3.2rem; font-weight: 700; text-align: center; padding-bottom: 10px; margin-bottom: 20px;}
.lpContBox .headlineBorder:nth-child(1){ margin-top: 0;}
.lpContBox .headlineBorder { border-color: #0F8CF2;}
.borderSeparate { font-size: 2.0rem; font-weight: 700; margin: 60px 0 20px; position: relative;}
.borderSeparate::after { content: ""; display: block; width: 100%; height: 2px; background: linear-gradient(90deg, rgba(15,140,242,1) 0%, rgba(15,140,242,1) 20%, rgba(179,179,179,1) 20%, rgba(179,179,179,1) 100%);;}
.headlineColor { font-size: 1.8rem; font-weight: 500; margin-bottom: 10px;}
.headlineBorderDashed { border-bottom: dashed 1px #231815; font-size: 2.3rem; text-align: center; padding-bottom: 10px; margin: 30px 0 10px;}
@media only screen and (max-width:768px){
  .headlineBorder { font-size: 2.0rem; padding: 10px 0;}
  .headlineBorder span { margin-top: 10px; text-align: left;}
  .headlineBlueBack { font-size: 2.0rem;}
  .headlineOrangeBack { font-size: 2.0rem;}
  p.headlineDoubleLine { font-size: 2.5rem; width: 100%; line-height: 1.3; padding-bottom: 10px;}
  .headlineBorderLine { font-size: 2.4rem;}
  .headlineBorderDashed { font-size: 1.8rem;}
  .headlineBold { font-size: 1.8rem;}
}

/*パーツ*/
.fontS { font-size: 1.2rem;}

.sup {vertical-align: top;}

.areaRead { text-align: center;}

.yellowBox { background: #F9F5D1; padding: 10px; border-radius: 10px; margin-top: 10px;}
.meritBox { width: 60px; height: 60px; border-radius: 50px; color: #fff; font-size: 1.2rem; text-align: center; display: flex; justify-content: center; align-items: center;}
.meritText { font-size: 1.4rem; width: calc(100% - 70px);}
.yellowBoxText { font-size: 1.4rem; line-height: 1.5;}
.colorLp01 { color: #007698;}
.colorLp02 { color: #5876B8;}
.colorLp03 { color: #18B7CD;}
.colorLp04 { color: #39B380;}
.colorLp05 { color: #009B73;}
.colorLp06 { color: #009EAE;}
.colorLp07 { color: #605EA7;}
.colorLp08 { color: #37A0DA;}
.colorLp09 { color: #006FB2;}
.colorLp10 { color: #A56AA8;}
.colorLp11 { color: #58B331;}
.bgColorLp01 { background-color: #007698;}
.bgColorLp02 { background-color: #5876B8;}
.bgColorLp03 { background-color: #18B7CD;}
.bgColorLp04 { background-color: #39B380;}
.bgColorLp07 { background-color: #605EA7;}
.bgColorLp08 { background-color: #37A0DA;}
.bgColorLp10 { background-color: #A56AA8;}
.bgColorLp11 { background-color: #58B331;}
.constructionItem { border-bottom: solid 1px #231815; padding-bottom: 20px; margin-bottom: 20px;}
.caseItem + .caseItem { border-top: solid 1px #231815; padding-top: 20px; margin-top: 20px;}

.daikouArea { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;}
p.daikouTitle { width: 150px; background: #008BD5; padding: 5px; border-radius: 5px; color: #fff; font-size: 1.4rem; line-height: 1.5; text-align: center;}
.daikouText { width: 680px;}

.lpBtn { width: 40%; margin: 20px auto; background: #F99900; box-shadow: 3px 3px 5px #999;}
.lpBtn a { display: block; color: #fff;}
.lpBtn:hover { box-shadow: none; position: relative; top: 3px; opacity: 1;}

@media only screen and (max-width:768px){
  .fontS { font-size: 1.3rem; margin: 10px 0;}
  .areaRead { text-align: left;}
  .areaRead br { display: none;}
  .yellowBox { margin-bottom: 20px; padding: 15px;}
  .meritBox { width: 100%; height: auto; padding: 5px; border-radius: 5px;}
  .meritText { width: 100%;}

  p.daikouTitle { width: 100%;}
  .daikouText { width: 100%;}
  .daikouText br { display: none;}
  .sup {vertical-align: top; font-size: 1.2rem;}
  .lpBtn { width: 90%;}
}


/**********************/
/****** ヘッダー ******/
/**********************/
.pageHeaderTop { height: 175px;}
.lpHeaderArea { width: 100%; padding: 20px 40px; background: url(../images/lp/cloud.png) no-repeat 50% 20px, linear-gradient(90deg, rgba(159,217,246,1) 0%, rgba(0,175,233,1) 100%); box-shadow: 0 0 10px #999; left: 0; top: -100px; z-index: 10;}
.logoArea { width: 300px; margin: 0 auto;}
.lpLogo { width: 200px; position: absolute; top: 20px; left: 20px;}
.lpHeaderTitle { text-align: center; font-size: 4.5rem; font-weight: 700; color: #fff;}
.lpHeaderTitle span { font-size: 1.8rem; padding-left: 10px;}
.lpHeaderArea.fixed  { position: fixed; top: 0; padding: 15px 10px 10px; background-size: 500px, 100%; background-position: 50% 10px; transition: 0.5s;}
.lpHeaderArea.noShadow { box-shadow: none;}
.lpHeaderArea.fixed .logoArea { width: 200px;}
.lpTopNav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 20px; padding-top: 20px;}
.lpHeaderArea.fixed .lpTopNav { padding-top: 10px;}
.lpHeaderArea.fixed .lpHeaderTitle  { font-size: 3.5rem;}
.lpTopNav li + li { border-left: solid 1px #fff; padding-left: 1em;}
.lpTopNav li a { font-size: 1.8rem; font-weight: 700; color: #fff;}
.lpTopNav li a:hover { text-decoration: underline; text-decoration-color: #008BD5; text-underline-offset: 5px; text-decoration-thickness: 2px;}
.stickyBanner { position: fixed; top: 190px; right: 0; background: #F2750F; border-radius: 10px 0 0 10px;}
.stickyBanner a { writing-mode: vertical-rl; text-align: center; font-size: 2.5rem; font-weight: 700; color: #fff; padding: 10px 20px;}
.stickyBanner:hover { opacity: 0.5;}
@media only screen and (max-width:768px){
  .lpHeaderArea { padding: 20px 0; background-size: 360px,100%;}
  .logoArea { width: 200px;}
  .lpLogo { width: 160px; top: 10px; left: 10px;}
  .lpTopNav { gap: 0; padding: 20px 0 0;}
  .lpTopNav li { width: auto; padding: 5px 15px;}
  .lpTopNav li a { font-size: 1.6rem;}
  .lpTopNav li:nth-child(2n - 1) { /*width: 40%;*/}
  .lpTopNav li:nth-child(2n) { border-left: solid 1px #fff; padding-left: 15px;}
  .lpTopNav li:nth-child(n + 3) { border-top: solid 1px #fff;}
  .lpTopNav li:nth-child(3) { display: none; width: 100%; text-align: center; border-left: none;}
  .lpHeaderTitle { font-size: 3.3rem; padding-top: 35px;}
  .lpHeaderTitle span { font-size: 1.6rem; padding-top: 35px;}
  .lpHeaderArea.fixed { padding: 5px 10px 0; background-size: 390px, 100%;}
  .lpHeaderArea.fixed .lpLogo { display: none;}
  .lpHeaderArea.fixed .lpTopNav { padding: 10px;}
  .lpHeaderArea.fixed .lpHeaderTitle { padding: 0;}

  .stickyBanner { position: fixed; top: auto; bottom: 0; right: 0; background: #F2750F; border-radius: 0; width: 100%; z-index: 10;}
  .stickyBanner a { display: block; writing-mode: rl; font-size: 2.0rem; text-align: center;}
  .toTop { bottom: 60px;}

}

/**********************/
/****** フッター ******/
/**********************/
.footerArea { background: url(../images/lp/cloud.png) no-repeat center, linear-gradient(90deg, rgba(252,214,138,1) 0%, rgba(237,108,0,1) 100%);}
.footerLogoArea { text-align: center;}
.footerLogoArea img { width: auto; height: 32px;}
.copyright { margin-top: 10px;}

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

}

/**********************/
/****** LP *****/
/**********************/
.readText { font-size: 2.2rem; font-weight: 700; text-align: center;}
.onesTopService { width: 60%; margin: 0 auto;}
.syamei { height: 55px;}
.aboutTable { width: 60%; margin: 0 auto;}
.aboutTable tr { padding: 0 10px;}
.aboutTable th { width: 20%; font-size: 1.8rem; background: #FCFAEA; border: none; text-align: center; padding: 10px 0;}
.aboutTable td { width: 80%; font-size: 1.6rem; background: #FFFEF2; border: none; padding: 10px;}
.aboutTable tr + tr th { border-top: solid 1px #231815;}
.aboutTable tr + tr td { border-top: solid 1px #231815;}

.energySindanArea { display: flex; flex-wrap: wrap; gap: 20px 0; margin-top: 30px;}
.shindan01 { width: 30%;}
.shindan02 { width: 35%;}
.shindan03 { width: 32%;}
.shindan04 { width: 5%;}
.shindan05 { width: 29%;}
.shindan06 { width: 32%;}
.shindan07 { width: 29%;}

.keywordArea { height: 285px;}
.keywordNavArea {  width: 100%; top: -100px; left: 0; z-index: 9; transition: 0.5s;}
.keywordNav { display: flex; justify-content: space-between; margin: 30px 0 10px;}
.keywordNav li { width: 19%; border-radius: 10px; box-shadow: 2px 2px 3px #999; }
.keywordNav li a { display: block; padding: 20px 15px 20px 0; text-align: center; color: #424242; font-size: 2.0rem; font-weight: 700; position: relative;}
.keywordNav li a::after { content: "▼"; display: block; font-size: 2.0rem; color: #424242; position: absolute; top: 20px; right: 10px;}
.keywordNav li.gas { background: #99DAFC;}
.keywordNav li.air { background: #AEE1FC;}
.keywordNav li.electricity { background: #C3E9FD;}
.keywordNav li.bcp { background: #D9F0FD;}
.keywordNav li.energySaving { background: #EEF7FD;}

.keywordNav li:hover { box-shadow: none; position: relative; top: 3px;}

.keywordNavArea.fixed { position: fixed; top: 113px; background: linear-gradient(90deg, rgba(159,217,246,1) 0%, rgba(0,175,233,1) 100%);  box-shadow: 0 0 10px #999;}
.keywordNavArea.fixed .keywordNav { width: 950px; margin: 0 auto;}
.keywordNavArea.fixed .keywordNav li { width: 20%; box-shadow: none; border-radius: 0;}
.keywordNavArea.fixed .keywordNav li a { font-size: 1.6rem; padding: 10px 15px 10px 0;}
.keywordNavArea.fixed .keywordNav li a::after { top: 10px;}

.gasArea { background: #99DAFC;}
.fukidashiArea { width: 70%; margin: 20px auto;}
.fukidashiArea2 { background: url(../images/lp/fukidashi-back.png) no-repeat center; width: 90%; padding: 10%; background-size: 90%; margin: -5% auto 10px;}
.human { width: 20%;}
.comment { width: 80%;}
.sekouItemArea { gap: 20px 0;}
.sekouItem { width: 270px;}
.sekouItem p { font-size: 1.3rem; margin-top: 10px;}
.sekouItem2 { width: 580px;}
.sekouItem2 p { font-size: 1.3rem; margin-top: 10px;}

.electricityArea { background: #C3E9FD;}
.airArea { background: #AEE1FC;}
.bcpArea { background: #D9F0FD;}
.energySavingArea { background: #EEF7FD;}
.energySavingTable {}
.energySavingTable thead th { background: #008BD5; color: #fff; font-size: 1.4rem; font-weight: 700;}
.energySavingTable tbody th { width: 100px; background: #FBFAF3; font-size: 1.4rem; font-weight: 700; vertical-align: middle;}
.energySavingTable td { font-size: 1.4rem;}
.serviceItem { background: radial-gradient(circle, rgba(249,245,213,1) 20%, rgba(249,245,213,0) 80%);}
.okadama .textArea { width: 37%;}
.okadama .photoArea { width: 60%;}
.okadama .box { border: solid 1px #000; padding: 5px 10px; margin: 10px 0;}
.okadama .box p { font-size: 1.4rem; margin: 0;}

.squareBox { border: solid 1px #000; font-size: 1.8rem; text-align: center; width: 50%; padding: 10px; margin: 0 auto 20px; border-radius: 10px;}

.lpFormArea { width: 90%; margin: 0 auto;}
.lpFormArea dl { display: flex; justify-content: space-between; align-items: flex-start; margin: 10px; padding: 10px;}
.lpFormArea dl + dl { border-top: dashed 1px #999;}
.lpFormArea dl dt { width: 25%;}
.lpFormArea dl dt span { background: #E60012; color: #fff; font-size: 1.2rem; padding: 2px 10px 4px; margin-left: 10px; border-radius: 4px;}
.lpFormArea dl dd { width: 75%;}

@media only screen and (max-width:768px){
  .syamei { width: auto; height: 35px;}
  .readText { font-size: 1.8rem; text-align: left;}
  .readText br { display: none;}

  .onesTopService { width: 80%;}

  .aboutTable { display: block; width: 100%;}
  .aboutTable th { display: block; width: 100%;}
  .aboutTable tr + tr th { border: none; margin-top: 20px;}
  .aboutTable tr + tr td { border: none;}
  .aboutTable td { display: block; width: 100%;}

  .shindan01 { width: 44%;}
  .shindan02 { width: 52%;}
  .shindan03 { width: 48%;}
  .shindan04 { display: none;}
  .shindan05 { width: 41%; margin-right: auto; margin-left: 10px;}
  .shindan06 { width: 48%;}
  .shindan07 { width: 42%; margin-right: auto; margin-left: 10px;}

  .keywordArea { height: 430px;}
  .keywordNav { flex-wrap: wrap; gap: 20px;}
  .keywordNav li { width: 45%;}
  .keywordNav li a { font-size: 1.7rem; padding: 15px 20px;}
  .keywordNav li a::after { font-size: 2.2rem; right: 10px; top: 50%; transform: translateY(-50%);}
  .keywordNavArea.fixed { top: 110px;}
  .keywordNavArea.fixed .keywordNav { width: 100%; gap: 0;}
  .keywordNavArea.fixed .keywordNav li { width: 33.3%;}
  .keywordNavArea.fixed .keywordNav li:nth-child(n + 4) { width: 50%;}
  .keywordNavArea.fixed .keywordNav li a br { display: none;}
  .keywordNavArea.fixed .keywordNav li a::after { top: 50%; font-size: 1.6rem;}
  .fukidashiArea { width: 100%;}
  .fukidashiArea .column3 { width: 48%; margin-top: 0!important;}
  .human { display: none;}
  .comment { width: 100%;}
  .fukidashiArea2 { padding: 0; background-size: 197%; background-position: center 106%;}

  .sekouItem { width: 100%;}

  .energySavingTableArea { overflow-y: scroll;}
  .energySavingTable { width: 200%;}

  .okadama .textArea { width: 100%; order: 2;}
  .okadama .photoArea { width: 100%; order: 1;}

  .squareBox { width: 100%; font-size: 1.6rem;}

  .lpFormArea { width: 100%;}
  .lpFormArea dl { flex-wrap: wrap;}
  .lpFormArea dl dt { width: 100%; margin-bottom: 10px;}
  .lpFormArea dl dd { width: 100%;}
  .lpFormArea .mwform-tel-field input[type="text"] { width: 30%;}

  .gap3 { gap: 20px 0;}
  .w40p { width: 100%;}
  .w20p { width: 50%; margin: 0 auto!important;}
  .w30p { width: 50%; margin: 0 auto!important;}
  .w35p { width: 50%; margin: 0 auto!important;}
}