@charset "utf-8";

/* ================================
  E&C 2021-10-13

  Edited: 2021-10-27
  MB→PC min-width:768px
================================ */

@import url(https://fonts.googleapis.com/css2?family=Bad+Script&display=swap);

/* --------------------------------
  basic
-------------------------------- */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  font-family: Roboto, Helvetica, Arial, YuGothic, "Yu Gothic Medium", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  font-size: 16px;
  font-feature-settings: "palt";
  color: #000;
  letter-spacing: .05em;
  background-color: #fff;
}

html,
body,
h1,
h2,
h3,
h4,
p,
table,
th,
td,
dd,
nav ul,
nav li,
footer ul,
footer li,
figcaption,
figure {
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4 {
  line-height: 1.3;
}

ul {
  padding: 10px 0 0 18px;
  margin: 0;
  list-style: disc;
}

ul li {
  padding: 0;
  margin: 0 0 10px;
  line-height: 1.4;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

nav ul li {
  padding: 0;
  margin: 0;
}

nav ul a {
  text-decoration: none;
}

p {
  padding: 10px 0 0;
  margin: 0;
  line-height: 1.5;
  text-align: justify;
  text-justify: inter-ideograph;
}

i {
  margin-right: 6px;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

a {
  color: #231815;
  transition: all .3s ease;
}

a img {
  text-decoration: none;
  border: none;
  outline: 0;
  transition: all .3s ease;
}

br {
  letter-spacing: 0;
}

figcaption {
  padding-top: 3px;
  font-size: 12px;
  text-align: left;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

footer {
  padding-top: 40px;
}

small {
  display: block;
  padding: 10px 0;
  margin: 0;
  font-size: 11px;
  text-align: center;
}

label {
  cursor: pointer;
}

input,
textarea,
select {
  font: 100%;
}

input[type="button"],
input[type="submit"] {
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
  appearance: none;
}

input::placeholder,
textarea::placeholder {
  font-size: 16px;
}

sup,
sub {
  position: relative;
  height: 0;
  line-height: 1;
  vertical-align: baseline;
}

sup {
  bottom: 1ex;
}

sub {
  top: .5ex;
}

@media screen and (max-width: 767px) {
  a:active,
  a:active img {
    opacity: 60%;
  }

  p br:not(.mbOn) {
    display: none;
  }

  p br.all {
    display: block;
  }
}

@media screen and (min-width: 768px), print {
  a[href^="tel:"] {
    text-decoration: none;
    pointer-events: none;
    cursor: default;
  }

  a:hover,
  a:hover img {
    opacity: 60%;
  }

  figcaption {
    padding-top: 5px;
    text-align: right;
  }
}

/* --------------------------------
  etc
-------------------------------- */

.inlineBlk { display: inline-block; }

.taC { text-align: center !important; }
.taR { text-align: right !important; }
.taL { text-align: left !important; }

.fRed { color: #e50012; }
.fEng { font-family: "Bad Script", cursive; }
.fS { font-size: .8em; }
.fM { font-size: 1.2em; }
.fL { font-size: 1.5em; }

.wkDot {
  padding: 0 10px 10px;
  margin: 10px 0 0;
  font-size: .9em;
  border: 1px dotted #333;
}

/* 三点リーダ */
.ellipsis {
  display: inline-block;
  padding: 0 2px;
  font-family: "MS UI Gothic", sans-serif;
}

/* マーカー */
.marker {
  position: relative;
  display: inline;
  background-image: linear-gradient(90deg, #ff6, #ff6);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 30%;
  transition: all 1s ease-in-out;
}

.marker.inview {
  background-size: 100% 30%;
}

/* flex */
.flexSec,
.flexSecSb {
  display: flex;
  flex-wrap: wrap;
}

.flexSecSb {
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  table.tblRes th,
  table.tblRes td {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media screen and (min-width: 768px), print {
  .pcFlexSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* ページ送り */
.pagenavi {
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 5%;
  text-align: center;
}

.pagenavi span {
  padding: 2px 5px;
  margin: 0 10px 0 0;
  clear: left;
  background-color: #fff;
}

.pagenavi span.current {
  color: #909090;
  border-color: #cfcfcf;
}

.pagenavi a {
  padding: 2px 5px;
  margin: 0 10px 0 0;
  color: #e60012;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #e60012;
}

.pagenavi span.extend {
  background-color: transparent;
}

.pagenavi .last {
  margin-right: 0;
}

@media print, screen and (max-width: 767px) {
  .pagenavi .pages {
    display: block;
    margin: 0 0 10px;
    text-align: center;
  }
}

@media screen and (min-width: 768px), print {
  .pagenavi {
    padding-bottom: 40px;
  }
}

/* --------------------------------
  common
-------------------------------- */

/* 背面スクロール対策 */
html.bodyFixed,
body.bodyFixed {
  overflow: hidden;
}

#wrap {
  overflow: hidden;
}

.secBox {
  padding-top: 20px;
  padding-bottom: 20px;
}

.conteSp,
.conteSpFix {
  padding-right: 5%;
  padding-left: 5%;
}

#egTpl {
  padding-bottom: 40px;
}

@media screen and (min-width: 768px), print {
  .secBox {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media screen and (min-width: 1200px), print {/* 調整 */
  .conteSpFix {
    width: 1100px;
    padding-right: 0;
    padding-left: 0;
    margin: 0 auto;
  }
}

/* 見出し
-------------------------------- */

.secTit {
  padding-bottom: 15px;
  line-height: 1.4em;
  text-align: center;
}

.secTit .line {
  position: relative;
  display: inline-block;
  padding: 0 0 15px;
  margin: 0 auto;
}

.secTit .line::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  content: "";
  background-image: repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  backface-visibility: hidden;
}

#pgTit {
  padding: 10px 5px;
  line-height: 1.4;
  text-align: center;
  background: #e50012;
}

#pgTit h1 {
  padding: 0;
  margin: 0 auto;
  font-size: 26px;
  line-height: normal;
  color: #fff;
}

#pgTit .parentCate {
  display: inline-block;
  padding: 3px .8em;
  margin: 0 auto 5px;
  font-size: 14px;
  line-height: normal;
  background-color: #333;
  border-radius: 100vh;
}

#pgTit .childCate {
  display: block;
  line-height: 1.4;
}

@media screen and (min-width: 768px), print {
  .secTit {
    padding-bottom: 30px;
    font-size: 32px;
  }

  .secTit .line {
    padding: 0 20px 15px;
  }

  #pgTit h1 {
    font-size: 32px;
  }
}

/* リードテキスト 中央配置
-------------------------------- */
@media screen and (min-width: 768px), print {
  .readBox {
    padding-bottom: 20px;
    text-align: center;
  }

  .readBox .inner {
    display: inline-block;
    text-align: left;
  }
}

/* ページ上部アンカーリンク一覧
-------------------------------- */
#ancNav {
  padding: 20px 5% 0;
  margin: 0;
  list-style: none;
}

#ancNav li {
  display: flex;
  align-items: center;
  margin: 10px 0 0;
  font-size: 14px;
  color: #fff;
  background-color: #333;
  border-radius: 6px;
}

#ancNav li:first-child {
  margin-top: 0;
}

#ancNav li a {
  position: relative;
  display: block;
  width: 100%;
  padding: .5em 3em .5em 1em;
  color: #fff;
  text-decoration: none;
}

#ancNav li a::after {
  position: absolute;
  top: 50%;
  right: 20px;
  display: inline-block;
  width: 10px;
  height: 10px;
  content: "";

  /* margin: 0 0 1px 5px; */
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-60%) rotate(45deg);
}

@media screen and (min-width: 768px), print {
  #ancNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    max-width: 1100px;
    padding: 40px 0 20px;
    margin: 0 auto;
  }

  #ancNav li {
    width: 48%;
    margin: 0 0 20px;
  }

  #ancNav.pcCol3 li {
    width: 32%;
  }
}

/* swiper 共通調整
-------------------------------- */
.swiper-pagination {
  position: inherit;
  padding: 10px;
  text-align: center;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 5px;
}

.swiper-pagination-bullet-active {
  background: #000;
}

/* bxslider 調整
-------------------------------- */
.bx-wrapper .bx-controls-direction a {
  z-index: 999;
}

/* スマホ表示の時に横スクロール
-------------------------------- */
.scrollGuideballoon {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  margin: 0 0 15px;
  font-size: 13px;
  color: #555;
  background: #ececee;
}

.scrollGuideballoon::before {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -7px;
  content: "";
  border: 7px solid transparent;
  border-top: 15px solid #ececee;
}

.scrollGuideballoon span {
  display: block;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .scrollBox {
    padding-top: 10px;
  }

  .scrollBox figure {
    padding-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .scrollBox figure img {
    max-width: initial;
  }
}

@media screen and (min-width: 768px), print {

  .scrollGuideballoon { display: none; }

  .scrollBox figure {
    display: block;
    text-align: center;
  }

  .scrollBox figure img {
    margin: 0 auto;
  }
}

/* --------------------------------
  header
-------------------------------- */

header {
  position: fixed;
  z-index: 999;
  width: 100%;
  padding: 10px 4%;
  background: rgb(255 255 255 / 90%);
  transition: .5s;
}

header .iconBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header h1 {
  padding: 0;
}

header h1 img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 140px;
  height: auto;
}

header .iconBox nav {
  width: 68%;
  text-align: right;
}

header .iconBox nav img {
  width: 25%;
  max-width: 50px;
  height: auto;
}

main {
  display: block;
  margin-top: 62px;
}

@media screen and (min-width: 768px), print {
  header {
    padding: 10px 2%;
  }

  header h1 {
    width: 290px;
  }

  header h1 img {
    max-width: 280px;
  }

  header .iconBox nav img {
    width: auto;
    max-width: 190px;
    height: 50px;
  }

  main {
    margin-top: 75px;
  }
}

@media screen and (min-width: 870px) {/* 調整 */
  header {
    padding: 10px 4%;
  }

  header .iconBox nav a {
    margin-left: 15px;
  }
}

/* ボタン
-------------------------------- */
.btnBox {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: .5em 1em;
  margin: 5px 2%;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #333;
  border-radius: 6px;
}

@media screen and (min-width: 768px), print {
  .btn {
    padding: .3em 1em;
  }
}

/* ボタン調整 */
header .iconBox .mkMail {
  background-color: #e50012;
  border-radius: 6px;
}

.btn.mf {
  padding: 0;
  font-size: 18px;
}

.btn.mf img {
  width: auto;
  height: 50px;
}

@media screen and (max-width: 767px) {/* 調整 */

  header .iconBox nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }

  header .iconBox nav a {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    border-radius: 6px;
  }

  header .iconBox nav img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
  }
}

@media screen and (min-width: 768px), print {
  header .iconBox a {
    display: inline-block;
  }

  #reform .btn.mf {
    padding: 0 10px;
  }
}

/* バナー
-------------------------------- */
.bnrBoxBg {
  padding: 30px 5% 20px;
  margin-bottom: 20px;
  text-align: center;
  background-color: #f5f3e9;
}

.bnrBoxBg a {
  display: inline-block;
  margin: 0 auto 10px;
}

@media screen and (min-width: 768px), print {
  .bnrBoxBg {
    padding: 30px 4% 20px;
  }

  .bnrBoxBg a {
    width: 48%;
    max-width: 420px;
    margin: 0 1% 10px;
  }

  .bnrBoxBg a img {
    width: 100%;
  }
}

/* --------------------------------
  footer
-------------------------------- */

#ftrNav {
  position: fixed;
  right: 10px;
  bottom: 0;
  z-index: 999;
  display: flex;
  width: 60px;
  text-align: right;
}

#ftrNav a {
  display: block;
  width: 60px;
  padding: 5px 5px 0;
  background: rgb(255 255 255 / 80%);
}

/* ================================
  index
================================ */

/* トップスライダー調整
-------------------------------- */
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  /* Center slide text vertically */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-align: center;
  background: #fff;
}

.swiper-slide img {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  object-fit: cover;
}

@media screen and (min-width: 768px), print {
  .swiper-container {
    width: 92%;
    margin: 0 auto;
  }

  #topSwiper {
    padding-top: 20px;
  }
}

/* topNewsBox
-------------------------------- */
#topNewsBox .btnBox a.btn {
  width: 46%;
}

#topNewsBox dl {
  padding-top: 5px;
}

#topNewsBox dt {
  display: inline-block;
  width: 170px;
  padding: 2px 1em;
  margin-bottom: 5px;
  font-size: .8em;
  text-align: center;
  background-color: #f5f3e9;
  border-radius: 100vh;
}

#topNewsBox .grp {
  margin-bottom: 15px;
}

.fbClr {
  color: #fff;
  background-color: #1877f2;
}

@media screen and (min-width: 768px), print {
  #topNewsBox {
    padding-bottom: 20px;
    text-align: center;
  }

  #topNewsBox .inner {
    display: inline-block;
    text-align: left;
  }

  #topNewsBox .grp {
    display: flex;
  }

  #topNewsBox dt {
    margin-right: 10px;
  }

  #topNewsBox .btnBox a.btn {
    width: auto;
  }
}

/* topCateInto
-------------------------------- */
#topCateInto {
  background: url(../img/index/bg_sky.jpg) no-repeat center bottom;
  background-size: contain;
}

#topCateIntoList {
  padding: 20px 0 10px;
}

#topCateIntoList .menu {
  position: relative;
  z-index: 100;
  width: 100%;
  max-width: 400px;
  height: 50px;
  margin: 0 auto;
  *zoom: 1;
}

#topCateIntoList .menu > li {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #333;
  border-radius: 6px;
}

#topCateIntoList .menu > li a {
  display: block;
  padding: 0 10px;
  color: #fff;
}

#topCateIntoList .menu > li a:active {
  color: #999;
}

#topCateIntoList ul.menu__second-level {
  z-index: 1;
  visibility: hidden;
  background: rgb(0 0 0 / 90%);
  border-radius: 6px;
  opacity: 0%;
}

#topCateIntoList .menu > li:hover {
  background: #333;
  transition: all .5s;
}

#topCateIntoList .menu__second-level li {
  border-top: 1px solid #111;
}

#topCateIntoList .menu__second-level.close {
  display: none;
}

/* 下矢印 */
#topCateIntoList .init-bottom::after {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0 0 15px;
  content: "";
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

#topCateIntoList .init-bottom {
  text-align: center;
}

/* floatクリア */
#topCateIntoList .menu::before,
#topCateIntoList .menu::after {
  display: table;
  content: " ";
}

#topCateIntoList .menu::after {
  clear: both;
}

#topCateIntoList .menu > li.menu__single {
  position: relative;
}

#topCateIntoList li.menu__single ul.menu__second-level {
  position: absolute;
  top: 40px;
  width: 100%;
  background: #000;
  transition: all .2s ease;
}

#topCateIntoList li.menu__single:hover ul.menu__second-level {
  top: 50px;
  visibility: visible;
  opacity: 100%;
}

#topCateInto .grp {
  padding: 0 0 10px;
  margin: 0 auto 20px;
  background-color: #f5f3e9;
}

#topCateInto .grp dd h2 {
  padding: 8px 5px;
  font-size: 20px;
  text-align: center;
  background-color: rgb(231 231 219 / 90%);
}

#topCateInto .grp dd h2::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  content: "";
  border-bottom: 32px solid transparent;
  border-left: 32px solid #bfbfa7;
}

#topCateInto #reform.grp dd h2 { color: #bf2f62; }
#topCateInto #reform.grp dd h2::before { border-left: 32px solid #bf2f62; }
#topCateInto #rental.grp dd h2 { color: #247f6a; }
#topCateInto #rental.grp dd h2::before { border-left: 32px solid #247f6a; }
#topCateInto #pv.grp dd h2 { color: #24477f; }
#topCateInto #pv.grp dd h2::before { border-left: 32px solid #24477f; }
#topCateInto #newhome.grp dd h2 { color: #488626; }
#topCateInto #newhome.grp dd h2::before { border-left: 32px solid #488626; }
#topCateInto #btob.grp dd h2 { color: #5e3274; }
#topCateInto #btob.grp dd h2::before { border-left: 32px solid #5e3274; }
#topCateInto #energy.grp dd h2 { color: #df7603; }
#topCateInto #energy.grp dd h2::before { border-left: 32px solid #df7603; }
#topCateInto #realestate.grp dd h2 { color: #533737; }
#topCateInto #realestate.grp dd h2::before { border-left: 32px solid #533737; }

#topCateInto .grp dd {
  position: relative;
  z-index: 5;
  padding: 0 0 15px;
  margin: -20px 15px 20px;
  background: rgb(255 255 255 / 60%);
  box-shadow: 1px 2px 5px rgb(0 0 0 / 20%);
}

#topCateInto .grp dd p {
  padding: 10px 15px 0;
  line-height: 1.4;
}

#topCateInto .grp .btn {
  font-size: 14px;
}

#topCateInto .grp dd.rssBox {
  padding: 16px 0;
  background-color: #f1f1df;
  border-top: 1px dotted #333;
}

#topCateInto .grp dd.rssBox .mkTxt {
  position: absolute;
  display: inline-block;
  padding: .3em 1em .3em .8em;
  margin: -22px 0 0 -10px;
  font-size: 12px;
  background: #85b200;
  border-radius: 0 100vh 100vh 0;
  box-shadow: 1px 2px 5px rgb(0 0 0 / 20%);
}

#topCateInto .grp dd.rssBox .mkTxt::before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: "";
  border-top: 10px solid #333;
  border-left: 10px solid transparent;
}

#topCateInto .grp dd.rssBox p {
  padding-top: 5px;
  font-size: 14px;
}

#topCateInto .grp dd.rssBox .fDate {
  display: block;
  padding: 5px 15px 0;
  font-size: .8em;
  text-align: right;
}

@media print, screen and (min-width: 601px) {
  #topCateInto .grpBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #topCateInto .grp {
    margin: 0 auto 25px;
  }
}

@media print, screen and (min-width: 601px) and (max-width: 960px) {/* 表示調整 */
  #topCateInto .grp {
    width: 48%;
  }
}

@media print, screen and (min-width: 961px) and (max-width: 1240px) {/* 表示調整 */
  #topCateInto .grp {
    width: 31.3%;
  }
}

@media screen and (min-width: 1241px) {/* 表示調整 */
  #topCateInto .grp {
    width: 23%;
    margin: 0 1% 25px;
  }
}

/* topInfoBox
-------------------------------- */
#topInfoBox .box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 5%;
  background-color: #e50012;
}

#topInfoBox .box dl {
  display: inline-block;
  width: 70%;
  padding: 0 0 5px;
  margin: 0 0 0 auto;
  background: rgb(255 255 255 / 80%);
}

#topInfoBox .box dt {
  padding: 15px 5px 5px;
  font-size: 20px;
  color: #e50012;
  text-align: center;
}

#topInfoBox .box dt b {
  display: inline-block;
  padding: 0 5px 5px;
  border-bottom: 2px dotted #e50012;
}

#topInfoBox .box dd {
  padding: 0 15px 10px;
}

#topInfoBox .box dd a {
  display: inline-block;
}

#topInfoBox #member.box {
  background: url(../img/index/topinfoimg_member.jpg) no-repeat 0 center #e50012;
  background-size: cover;
}

#topInfoBox #company.box {
  background: url(../img/index/topinfoimg_company.jpg) no-repeat 0 center #e50012;
  background-size: 50% auto;
}

#topInfoBox #jobs.box {
  background: url(../img/index/topinfoimg_jobs.jpg) no-repeat 0 center #5f3329;
  background-size: auto 100%;
}

@media screen and (min-width: 768px), print {
  #topInfoBox .box {
    flex-shrink: 0;
    width: 33.3%;
    padding: 60px 20px;
  }

  #topInfoBox .box dl {
    margin-right: auto;
    margin-left: auto;
  }

  #topInfoBox #member.box {
    background-size: cover;
  }

  #topInfoBox #company.box {
    background-position: center center;
    background-size: cover;
  }

  #topInfoBox #jobs.box {
    background-size: cover;
  }
}

/* --------------------------------
  gNav
-------------------------------- */
#gNav {
  position: fixed;
  top: 0;
  right: -90%;
  z-index: 10000;
  width: 90%;
  height: 100vh;
  padding: 10vh 1em 5vh;
  overflow-y: scroll;
  color: #efefef;
  background-color: rgb(231 231 219 / 90%);

  /* transition: .3s; */
}

#gNav .nav li {
  /* メニューテキスト位置をリスト内中心に */
  width: 100%;
  font-weight: bold;
  text-align: left;
}

#gNav .nav li a {
  position: relative;
  display: block;
  padding: .6em;
  border-bottom: 1px #999 solid;
}

#gNav .nav li a::before {
  right: 3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

#gNav .nav li a::before,
#gNav .nav li a::after {
  position: absolute;
  top: 0;
  right: .6em;
  bottom: 0;
  margin: auto;
  vertical-align: middle;
  content: "";
}

#gNav .nav li li a {
  font-size: 87.5%;
  font-weight: normal;
  background-color: rgb(255 255 255 / 60%);
}

#gNav .nav .tab-content li:last-child a {
  border-bottom: none;
}

#gNav .clsBtn {
  position: absolute;
  top: 1em;
  right: 1em;
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.clsBtn::before,
.clsBtn::after {
  position: absolute;
  top: calc(14% - 5px);
  left: 14%;
  display: block;
  width: 100%;
  height: 3px;
  content: "";
  background: #000;
  transform: rotate(45deg);
  transform-origin: 0 50%;

  /* バツ線の長さ */

  /* バツ線の太さ */
}

.clsBtn::after {
  right: 14%;
  left: auto;
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
}

#gNav input {
  position: absolute;
  z-index: -1;
  opacity: 0%;
}

/* Accordion styles */
.tabs {
  overflow: hidden;
  border-top: none;
  border-bottom: 1px #999 solid;
}

.tab {
  width: 100%;
  overflow: hidden;
}

.tab-label {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: .6em;
  color: #231815;
  cursor: pointer;

  /* Icon */
}

.tab-label::before {
  right: 3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: all .35s;
  transform: rotate(45deg);
}

.tab-label::before,
.tab-label::after {
  position: absolute;
  top: 0;
  right: .6em;
  bottom: 0;
  margin: auto;
  vertical-align: middle;
  content: "";
}

.tab-content {
  max-height: 0;
  color: #333;
  transition: all .35s;
}

.tab-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: .75em;
  cursor: pointer;
  background: #2c3e50;
}

#gNav input:checked + .tab-label::before {
  transform: rotate(135deg);
}

#gNav input:checked ~ .tab-content {
  max-height: 100vh;
}

.nvBg {
  color: #fff;
}
.nvBg.reform { background-color: #bf2f62; }
.nvBg.rental { background-color: #247f6a; }
.nvBg.btob { background-color: #5e3274; }
.nvBg.energy { background-color: #df7603; }
.nvBg.pv { background-color: #24477f; }
.nvBg.newhome { background-color: #488626; }
.nvBg.realestate { background-color: #533737; }
.nvBg.reform + .nvSideBg { border-left: 10px solid #bf2f62; }
.nvBg.rental + .nvSideBg { border-left: 10px solid #247f6a; }
.nvBg.btob + .nvSideBg { border-left: 10px solid #5e3274; }
.nvBg.energy + .nvSideBg { border-left: 10px solid #df7603; }
.nvBg.pv + .nvSideBg { border-left: 10px solid #24477f; }
.nvBg.newhome + .nvSideBg { border-left: 10px solid #488626; }
.nvBg.realestate + .nvSideBg { border-left: 10px solid #533737; }

#gNav.open {
  position: fixed;
  right: 0;
}

@media screen and (min-width: 768px), print {
  #gNav {
    width: 32%;
  }
}

/* --------------------------------
  カテゴリーページ上部ナビ
-------------------------------- */
.nav-wrap {
  position: relative;
}

.scroll-nav {
  width: 100%;
  overflow-x: auto;
  background: #333;
  -webkit-overflow-scrolling: touch;
}

/* スクロールバー調整 */
.scroll-nav::-webkit-scrollbar {
  height: 7px;
}

.scroll-nav::-webkit-scrollbar-thumb {
  background: rgb(131 131 131 / 80%);
  border-radius: 3px;
}

.scroll-nav::-webkit-scrollbar-track {
  background: rgb(100 100 100 / 50%);
}

.scroll-nav ul {
  display: flex;
  align-items: center;
  min-width: 840px;
  height: 35px;
  padding: 0;
  padding-right: 20px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 34px;
  list-style: none;
}

#cateNav .scroll-nav ul {
  border-bottom: 1px solid #6f6f6f;
}

#cateNav.line2 .scroll-nav { height: 70px; }

.scroll-nav ul li {
  flex: 1 0 auto;
  float: left;
  width: auto;
  min-width: max-content;
  max-width: 25%;
  padding: 0;
  margin: 0;
  text-align: center;
}

.scroll-nav ul li + li {
  box-sizing: border-box;
  border-left: 1px solid #6f6f6f;
}

.scroll-nav ul li:active {
  background: #000; /* マウスホバー時の背景色 */
}

.scroll-nav ul li a {
  display: block;
  padding: 0 8px;
  color: #fff;
  text-decoration: none;
}

.next-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  min-height: 35px;
  padding-left: 5px;
  line-height: 35px;
  color: #000;
  background: rgb(255 255 255 / 80%);
}

#cateNav.line2 .next-btn {
  line-height: 70px;
}

@media screen and (min-width: 960px), print {/* 調整 */
  .scroll-nav ul {
    padding: 0;
  }

  .scroll-nav ul li {
    width: 14.2%;
  }

  .scroll-nav ul.col6 li {
    width: 16.6%;
  }

  .scroll-nav ul li a {
    display: block;
    padding: 0;
    color: #fff;
    text-decoration: none;
  }

  .next-btn {
    display: none; /* 右側の固定部分を非表示 */
  }
}

/* --------------------------------
  breadcrumbSec
-------------------------------- */
#breadcrumbSec ol {
  padding: 20px 5%;
  margin: 0;
  list-style: none;
}

#breadcrumbSec li {
  display: inline;
  font-size: 12px;
  color: #a7a7a7;
}

#breadcrumbSec li::after {
  padding: 0 .2em;
  color: #555;
  content: ">";
}

#breadcrumbSec li:last-child::after {
  content: "";
}

#breadcrumbSec li a {
  color: #000;
  text-decoration: none;
}

#breadcrumbSec li a:hover {
  text-decoration: underline;
}

/* --------------------------------
 カテゴリートップRSS
-------------------------------- */
#cateBlogRss {
  padding: 30px 5% 20px;
  background-color: #ececee;
}

#cateBlogRss .tit {
  margin-bottom: 15px;
  font-size: 20px;
}

#cateBlogRss ul.rssSec {
  padding: 0;
  margin: 0;
  list-style: none;
}

#cateBlogRss ul.rssSec li {
  padding: 5px 0 10px;
}

#cateBlogRss ul.rssSec li a {
  text-decoration: none;
}

#cateBlogRss ul.rssSec li .box {
  display: flex;
}

#cateBlogRss .blogListImg {
  flex-shrink: 0;
  width: 77px;
  margin-right: 10px;
}

#cateBlogRss .blogListImg img {
  border: 1px solid #fff;
}

#cateBlogRss .blogListTxt p {
  padding-top: 0;
  font-size: 15px;
  line-height: 1.3;
}

#cateBlogRss time {
  display: block;
  padding-top: 5px;
  font-size: .8em;
  text-align: right;
  text-decoration: none;
}

@media screen and (min-width: 768px), print {
  #cateBlogRss ul.rssSec {
    display: flex;
    justify-content: space-between;
  }

  #cateBlogRss ul.rssSec li {
    width: 30%;
  }
}

/* --------------------------------
  施工例トップ（タブ切替え）
-------------------------------- */
.tabNav {
  position: relative;
  border-bottom: 5px solid #e60012;
}

.tabMenu {
  display: flex;
  width: 100%;
  padding: 0 20px 0 0;
  margin: 0;
  overflow-x: auto;
}

.tabMenu li {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 48px;
  padding: 0;
  margin: 0 5px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
  list-style: none;
  cursor: pointer;
  background: #afa68b;
  border-radius: 6px 6px 0 0;
}

.tabMenu li:last-child {
  margin-right: 0;
}

.tabMenu li.selected {
  background: #e60012;
}

.tabMenu li:hover {
  background: #e60012;
  transition: all .3s ease;
}

#reform .tabMenu li {/* 調整 */
  min-width: auto;
  padding: 0 10px;
  white-space: nowrap;
}

.tab_panel {
  height: 0;
  overflow: hidden;
  opacity: 0%;
}

.tab_panel.is-show {
  height: auto;
  overflow: hidden;
  opacity: 100%;
  transition: opacity .4s ease-in-out;
}

.tabNav .nextBtn {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 48px;
  padding-left: 5px;
  line-height: 48px;
  color: #000;
  background: rgb(255 255 255 / 80%);
}

.tab_panel_container {
  background-color: #f5f3e9;
}

.tab_panel .secTit {
  padding-top: 30px;
}

.tab_panel .noDataBox {
  margin-bottom: 30px;
}

.egData {
  padding: 20px 5%;
}

a.epBox {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  text-decoration: none;
  background-color: #fff;
}

a.epBox dl {
  padding: 0;
  margin: 0;
}

.epBox img {
  width: 100px;
  height: 100px;
  margin-right: 4%;
}

.epBox .epSubtit {
  position: relative;
  width: 65%;
  padding: 10px 18px 10px 0;
  font-size: 90%;
  font-weight: normal;
  line-height: 1.4;
}

.epBox .epSubtit::after {
  position: absolute;
  top: 42%;
  right: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 0 1px 5px;
  content: "";
  border-right: 2px solid #e60012;
  border-bottom: 2px solid #e60012;
  transform: rotate(-45deg);
}

.epBox p.btn {
  display: inline-block;
  padding: .5em 1em;
  margin: 0 2% 5px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #333;
  border-radius: 6px;
}

@media screen and (max-width: 767px) {
  .epBox dl {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .epBox dt {
    margin-right: 10px;
  }

  .epBox .epSubtit {
    display: flex;
    align-items: center;
  }
}

@media screen and (min-width: 768px), print {
  .tab_panel {
    text-align: center;
  }

  /* スクロールバー */
  .tabMenu::-webkit-scrollbar {
    height: 5px;
  }

  /* スクロールバー背景 */
  .tabMenu::-webkit-scrollbar-track {
    background-color: #e60012;
  }

  .tabMenu::-webkit-scrollbar-thumb {
    background: #333;
  }

  .tabMenu {
    padding: 0 5%;
  }

  .tabMenu li {
    width: auto;
    font-size: 13px;
  }

  .egData {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    margin: 0 auto;
  }

  a.epBox {
    width: 200px;
    height: auto;
    padding: 0 0 10px;
    margin: 0 10px 40px;
    text-align: left;
  }

  .epBox img {
    width: 200px;
    height: 200px;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .epBox .epSubtit {
    width: 90%;
    padding: 0 18px 0 0;
    margin: 0 5%;
    font-size: 14px;
  }

  .epBox .epSubtit::after {
    top: 10px;
  }

  .epBox p.btn {
    margin: 0 30px 20px;
  }
}

/* タブ内リンク */
dl.eglistAnc {
  padding: 0;
  margin: 10px 4%;
  font-size: 13px;
  text-align: center;
  background-color: #fff;
  border-radius: 6px;
}

dl.eglistAnc dt {
  padding: 5px 10px;
  margin: 0;
  border-bottom: 1px dotted #333;
}

dl.eglistAnc dd {
  padding: 5px;
  margin: 0;
}

dl.eglistAnc dd a {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  text-decoration: none;
  border: 1px solid #aaa;
  border-radius: 6px;
}

@media screen and (min-width: 768px), print {
  dl.eglistAnc {
    display: flex;
    align-items: center;
  }

  dl.eglistAnc dt {
    border-right: 1px dotted #333;
    border-bottom: none;
  }

  dl.eglistAnc dd a {
    padding: 2px 1em;
  }
}

/* --------------------------------
  施工例詳細
-------------------------------- */

/* 見出し btob realestate */
#egTitBalloon {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  text-align: left;
  background: #fff;
  border: solid 3px #000;
}

#egTitBalloon::before {
  position: absolute;
  bottom: -24px;
  left: 50%;
  z-index: 2;
  margin-left: -15px;
  content: "";
  border: 12px solid transparent;
  border-top: 12px solid #fff;
}

#egTitBalloon::after {
  position: absolute;
  bottom: -30px;
  left: 50%;
  z-index: 1;
  margin-left: -17px;
  content: "";
  border: 14px solid transparent;
  border-top: 14px solid #000;
}

@media screen and (min-width: 768px), print {
  #egTitBalloon {
    width: 70%;
    padding: 10px 20px;
    margin: 0 auto;
    text-align: center;
  }

  #egTitBalloon .inner {
    display: inline-block;
    text-align: left;
  }
}

/* --------------------------------
  施工例詳細
  リフォーム 新築住宅
-------------------------------- */
.egConte {
  padding: 20px 0 0;
}

#egTit {
  text-align: center;
}

#egTit .tit {
  position: relative;
  padding: 20px;
  line-height: 1.4;
  text-align: left;
}

#egTit .tit::before,
#egTit .tit::after {
  position: absolute;
  width: 30px;
  height: 30px;
  content: "";
}

#egTit .tit::before {
  top: 0;
  left: 0;
  border-top: 2px solid #333;
  border-left: 2px solid #333;
}

#egTit .tit::after {
  right: 0;
  bottom: 0;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
}

@media screen and (min-width: 768px), print {
  .egConte {
    padding: 40px 0 0;
  }

  #egTit .tit {
    display: inline-block;
    padding: 30px;
    margin: 0 auto;
  }
}

/* ご要望 */
.egConte .titTag {
  display: inline-block;
  padding: 0;
}

.egConte .titTag .tit {
  font-size: 1.17em;
  line-height: normal;
}
.egConte #reqBox .titTag .tit { color: #008c8c; }
.egConte #voiceBox .titTag .tit { color: #e50012; }

.egConte .titTag .fEng {
  display: inline-block;
  margin-left: 8px;
  font-size: .8em;
  font-weight: normal;
  color: #999;
}

.egConte #reqBox p {
  font-size: 20px;
  font-weight: bold;
}

@media screen and (min-width: 768px), print {
  #reqBox.secBox {
    padding-top: 0;
  }

  .egConte #reqBox p {
    font-size: 32px;
  }
}

.egConte #pointBox.secBox {
  padding-bottom: 50px;
  background-color: #f5f3e9;
}

.egConte .ptMsgImg img {
  width: 100%;
  max-width: 300px;
}

@media screen and (min-width: 768px), print {
  .egConte #pointBox {
    text-align: center;
  }

  .egConte #pointBox .inner {
    display: inline-block;
    text-align: left;
  }

  .egConte .ptMsgImg {
    margin-bottom: 10px;
  }
}

/* 施工データ */
.egConte #dataBox dl {
  position: relative;
  padding: 10px 10px 0;
  margin: 2em 0;
  border: 3px solid #008c8c;
}

.egConte #dataBox dt {
  position: absolute;
  top: -26px;
  left: -3px;
  display: inline-block;
  height: 25px;
  padding: 2px 9px;
  font-size: 16px;
  line-height: 25px;
  color: #fff;
  background: #008c8c;
}

.egConte #dataBox dd {
  padding: 0;
  margin: 0;
}

.egConte #dataBox dd table {
  width: 100%;
}

.egConte #dataBox dd th,
.egConte #dataBox dd td {
  display: block;
  width: 100%;
  text-align: left;
}

.egConte #dataBox dd th {
  padding: 5px 0;
  font-size: 14px;
  color: #008c8c;
  background-color: #f5f3e9;
}

.egConte #dataBox dd th .tit {
  display: inline-block;
  padding: 5px 10px 0;
  border-bottom: 1px dotted #008c8c;
}

.egConte #dataBox dd td {
  padding: 5px 10px;
  background-color: #f5f3e9;
  border-bottom: 10px solid #fff;
}

/* 施工前後 */
.baEq {
  padding: 20px 5%;
  margin: 10px 0 0;
  text-align: center;
  background-color: #ececee;
}

.baEq .txtBox {
  display: inline-block;
  min-width: 120px;
  max-width: 100%;
  padding: 7px 10px;
  margin: 10px auto 20px;
  background: #fff;
}

.baEq .txtBox p {
  padding: 0;
  margin: 0;
  text-align: left;
}

.baEq ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#baBox .baEq li {
  color: #008c8c;
}

#baBox .baEq li:first-child {
  position: relative;
  padding: 0;
  margin-bottom: 20px;
  color: #333;
}

#baBox .baEq li:first-child::before {
  position: absolute;
  bottom: -32px;
  left: 48%;
  content: "";
  border: 12px solid transparent;
  border-top: 12px solid #555;
}

#baBox .baEq li h4 {
  font-family: "Bad Script", cursive;
  font-size: 24px;
  font-weight: normal;
}

#baBox .baEq li p {
  padding-top: 5px;
  text-align: center;
}

#baBox .baEq li p img {
  margin: 0 auto;
}

/*#baBox .baEq li:not(:first-child) p img {
  border: 5px solid #008c8c;
}*/

#baBox .baEq h4 {
  font-family: "Bad Script", cursive;
  font-size: 24px;
  font-weight: normal;
}

#baBox .flex-box {
  display: flex;
  justify-content: center;
}

#baBox .flex-item {
  margin: 0 20px;
}

@media screen and (min-width: 768px), print {
  /* 施工データ */
  .egConte #dataBox dl {
    padding-bottom: 5px;
  }

  .egConte #dataBox dd th,
  .egConte #dataBox dd td {
    display: table-cell;
    width: auto;
    border-bottom: 5px solid #fff;
  }

  .egConte #dataBox dd th {
    width: 18%;
  }

  .egConte #dataBox dd th .tit {
    display: block;
    padding: 0 10px;
    border-right: 1px dotted #008c8c;
    border-bottom: none;
  }

  .egConte #dataBox dd td {
    padding: 10px 15px;
  }

  /* 施工前後 */
  .baEq ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 960px;
    margin: 0 auto;
  }

  #baBox .baEq li {
    width: 45%;
  }

  #baBox .baEq li:first-child {
    width: 45%;
    margin-right: 10%;
    margin-bottom: 5px;
  }

  #baBox .baEq li:first-child::before {
    right: -15%;
    bottom: 40%;
    left: auto;
    transform: rotate(-90deg);
  }

  #baBox .baEq li img {
    width: 100%;
    max-width: 420px;
  }
}

/* お客様の声
-------------------------------- */
#voiceBox p {
  padding: 15px 5px;
  border-top: 1px dotted #333;
  border-bottom: 1px dotted #333;
}

/* お問合せ他
-------------------------------- */
.guideBtnBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 20px 4% 40px;
}

.guideBtnBox .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}

@media screen and (max-width: 767px) {
  .guideBtnBox .btn {
    width: 90%;
  }
}

/* egIconList
-------------------------------- */
#egIconList {
  padding: 10px 10px 15px;
  background-color: #f5f3e9;
  border: 3px dotted #fff;
}

#egIconList .tit {
  margin-top: -20px;
  font-size: 13px;
}

#egIconList ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#egIconList li {
  display: inline-block;
  padding: 5px;
  margin: 0;
  font-size: 13px;
}

#egIconList li a {
  display: block;
  padding: 3px 8px;
  color: #4b4545;
  text-decoration: none;
  background-color: #e4e4d4;
  border-radius: 6px;
}

#egIconList li a.ck {
  color: #333;
  background-color: #fff;
}

/* lightcaseギャラリー */
.photoGallery .firstImg {
  margin-bottom: 15px;
  background-color: #ececee;
}

.photoGallery .glPos p {
  text-align: left;
}

.photoGallery ul,
.photoGallery li {
  padding: 0;
  margin: 0;
}

.photoGallery ul {
  display: flex;
  flex-wrap: wrap;
  font-size: 0;
  list-style: none;
}

.photoGallery li {
  width: 30%;
  padding-top: 15px;
  margin-right: 5%;
  font-size: 16px;
}

.photoGallery li a {
  position: relative;
  display: inline-block;
  border: 3px solid #333;
}

.photoGallery li a::before {
  position: absolute;
  right: -8px;
  bottom: 5px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0 0 0 4px;
  font-family: "Font Awesome 5 Free", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: #fff;
  content: "\f00e";
  background-color: #333;
}

.photoGallery .galleryBox p {
  padding: 0;
  font-size: .8em;
}

.photoGallery li:nth-of-type(3n) {
  margin-right: 0;
}

@media screen and (min-width: 768px), print {
  .photoGallery .firstImg {
    position: relative;
    width: 100%;
    max-width: 750px;
    height: 563px;
    margin: 0 auto 15px;
  }

  .photoGallery .firstImg img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    max-height: 563px;
    transform: translate(-50%, -50%);
  }

  .photoGallery li a:hover {
    opacity: 60%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1179px), print {/* 調整 */
  .photoGallery .galleryBox {
    text-align: center;
  }

  .photoGallery .galleryBox p {
    text-align: center;
  }

  .photoGallery ul {
    justify-content: center;
  }

  .photoGallery li,
  .photoGallery li:nth-of-type(3n) {
    width: 10.2%;
    margin-right: 1%;
  }

  .photoGallery li:last-child {
    margin-right: 0;
  }
}

@media screen and (min-width: 1180px) {/* 調整 */
  .photoGallery {
    display: flex;
    justify-content: space-between;
    width: 1133px;
    margin: 0;
  }

  .photoGallery .galleryBox {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-left: 20px;
  }

  .photoGallery .glPos {
    width: auto;
  }

  .photoGallery ul {
    width: 363px;
    margin: 0;
  }

  .photoGallery li:nth-of-type(3n) {
    margin-right: 0;
  }

  .photoGallery li a img {
    width: 100px;
    height: 75px;
  }
}

/* --------------------------------
  関連リンク
-------------------------------- */
#relateBox {
  position: relative;
  padding-top: 30px;
}

#relateBox .titBox {
  position: absolute;
  top: 0;
  left: 50%;
  width: 90%;
  max-width: 320px;
  padding: 10px 10px 0;
  color: #fff;
  background-color: #333;
  border-radius: 6px;
  transform: translateX(-50%);
}

#relateBox .titBox .line {
  padding: 0 10px 15px;
  font-size: 18px;
  font-weight: normal;
}

#relateBox .bgBox {
  padding: 40px 0 0;
  color: #fff;
  background-color: #333;
}

#relateBox .secTit .line::after {
  background-image: repeating-linear-gradient(135deg, #ccc, #ccc 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 1px, transparent 2px, transparent 5px);
}

#relateBox .egData {
  position: relative;
  z-index: 10;
}

@media screen and (min-width: 768px), print {
  #relateBox .egData {
    padding-bottom: 0;
  }
}

/* --------------------------------
  絞り込み条件
-------------------------------- */

/* アコーディオン */
.accBox {
  width: 100%;
  padding: 10px 0;
  margin: 0;
  background-color: #333;
  border-radius: 6px;
}

.accBox dt,
.accBox dd {
  box-sizing: border-box;
}

.accBox dt {
  position: relative;
  padding: 5px 40px 5px 10px;
  margin: 0 10px;
  color: #fff;
  cursor: pointer;
}

.accBox .underMark {
  position: absolute;
  top: 50%;
  right: 15px;
  margin: 0;
  font-size: 28px;
  color: #fff;
  border-radius: 10px;
  transform: translateY(-50%);
}

.accBox .underMark span {
  display: block;
  transition: all .25s ease;
}

.accBox .on span {
  transform: rotate(90deg);
}

.accBox dd {
  display: none;
  padding: 10px;
  margin: 0 10px 10px;
  background-color: #fff;
  border-radius: 6px;
}

.accBox dd p {
  padding: 10px 0 0;
  margin: 0;
}

/* 絞り込み条件 */
.filterBox {
  margin: 0 5% 20px;
}

.filterBox ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.filterBox li {
  width: 48%;
  padding: 5px 0;
  margin: 0 1%;
}

.filterBox li label {
  display: block;
  padding: 3px 0;
  font-size: 14px;
}

@media screen and (min-width: 768px), print {
  .filterBox ul {
    display: flex;
    justify-content: center;
  }

  .filterBox li {
    display: inline-block;
    width: auto;
  }
}

/* --------------------------------
  連絡先
-------------------------------- */
.infoBtnBox {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infoBtnBox li {
  padding: 0;
  margin: 20px 0 0;
  border-radius: 6px;
}

.infoBtnBox li:nth-of-type(1) {
  border: 1px solid #333;
}

.infoBtnBox li:nth-of-type(2) {
  background-color: #e50012;
}

.infoBtnBox li a {
  display: block;
  padding: 5px 0;
  text-align: center;
}

.infoBtnBox li img {
  width: 100%;
  max-width: 190px;
  height: auto;
}

@media screen and (min-width: 768px), print {
  .infoBtnBox {
    font-size: 0;
    text-align: center;
  }

  .infoBtnBox li {
    display: inline-block;
    margin: 0 20px;
    font-size: 16px;
  }

  /* .infoBtnBox li:nth-of-type(1) {
  border: 0px;
  } */
  .infoBtnBox li a {
    padding: 10px 30px;
  }
}

/* --------------------------------
  優先調整
-------------------------------- */
@media screen and (max-width: 767px) {
  .pcOn {
    display: none;
  }
}

@media screen and (min-width: 768px), print {
  .mbOn {
    display: none;
  }
}

/* --------------------------------
  メインカテゴリー色変更
-------------------------------- */

/* 色変更 リフォーム */
#reform header .iconBox .mkMail,
#reform #pgTit,
#reform .btn.mf { background-color: #bf2f62; }
#reform .fCateClr { color: #bf2f62; }

/* 色変更 介護福祉フォーム */
#rental header .iconBox .mkMail,
#rental #pgTit,
#rental .btn.mf { background-color: #247f6a; }
#rental .fCateClr { color: #247f6a; }

/* 色変更 店舗・工場・事務所 */
#btob header .iconBox .mkMail,
#btob #pgTit,
#btob .btn.mf { background-color: #5e3274; }
#btob .fCateClr { color: #5e3274; }

/* 色変更 エネルギー事業 */
#energy header .iconBox .mkMail,
#energy #pgTit,
#energy .btn.mf { background-color: #df7603; }
#energy .fCateClr { color: #df7603; }

/* 色変更 太陽光発電・蓄電池 */
#pv header .iconBox .mkMail,
#pv #pgTit,
#pv .btn.mf { background-color: #24477f; }
#pv .fCateClr { color: #24477f; }

/* 色変更 新築住宅 */
#newhome header .iconBox .mkMail,
#newhome #pgTit,
#newhome .btn.mf { background-color: #488626; }
#newhome .fCateClr { color: #488626; }

/* 色変更 不動産 */
#realestate header .iconBox .mkMail,
#realestate #pgTit,
#realestate .btn.mf { background-color: #533737; }
#realestate .fCateClr { color: #533737; }

/* 上ズレ */
@media all and (-ms-high-contrast: none) {
  h2,
  h3,
  h4,
  h5,
  time,
  th,
  td,
  .fIE,
  #ancNav,
  #gNav,
  .wkDot,
  #cateNav,
  #pgTit,
  .btn,
  .parentCate,
  .assistiveDeviceList dt,
  #dataBox dt { font-family: "メイリオ", Meiryo, sans-serif; }
}

/* --------------------------------
  印刷調整
-------------------------------- */
@media print {
  header {
    position: static;
  }
}

[v-cloak] {
  display: none;
}

/* loading */
.sk-fading-circle {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-fading-circle .sk-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sk-fading-circle .sk-circle::before {
  display: block;
  width: 15%;
  height: 15%;
  margin: 0 auto;
  content: "";
  background-color: #e50012;
  border-radius: 100%;
  animation: sk-circlefadedelay 1.2s infinite ease-in-out both;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

.sk-fading-circle .sk-circle2 {
  transform: rotate(30deg);
}

.sk-fading-circle .sk-circle3 {
  transform: rotate(60deg);
}

.sk-fading-circle .sk-circle4 {
  transform: rotate(90deg);
}

.sk-fading-circle .sk-circle5 {
  transform: rotate(120deg);
}

.sk-fading-circle .sk-circle6 {
  transform: rotate(150deg);
}

.sk-fading-circle .sk-circle7 {
  transform: rotate(180deg);
}

.sk-fading-circle .sk-circle8 {
  transform: rotate(210deg);
}

.sk-fading-circle .sk-circle9 {
  transform: rotate(240deg);
}

.sk-fading-circle .sk-circle10 {
  transform: rotate(270deg);
}

.sk-fading-circle .sk-circle11 {
  transform: rotate(300deg);
}

.sk-fading-circle .sk-circle12 {
  transform: rotate(330deg);
}

.sk-fading-circle .sk-circle2::before {
  animation-delay: -1.1s;
}

.sk-fading-circle .sk-circle3::before {
  animation-delay: -1s;
}

.sk-fading-circle .sk-circle4::before {
  animation-delay: -.9s;
}

.sk-fading-circle .sk-circle5::before {
  animation-delay: -.8s;
}

.sk-fading-circle .sk-circle6::before {
  animation-delay: -.7s;
}

.sk-fading-circle .sk-circle7::before {
  animation-delay: -.6s;
}

.sk-fading-circle .sk-circle8::before {
  animation-delay: -.5s;
}

.sk-fading-circle .sk-circle9::before {
  animation-delay: -.4s;
}

.sk-fading-circle .sk-circle10::before {
  animation-delay: -.3s;
}

.sk-fading-circle .sk-circle11::before {
  animation-delay: -.2s;
}

.sk-fading-circle .sk-circle12::before {
  animation-delay: -.1s;
}

@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0%;
  }

  40% {
    opacity: 100%;
  }
}

@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0%;
  }

  40% {
    opacity: 100%;
  }
}