@charset "UTF-8";
/*===================================
共通
===================================*/
body {
  margin: 0;
  color: #0B0B0B;
  font-size: 1.6em;
  position: relative; }
  @media (max-width: 767px) {
    body {
      font-size: 1.4em; } }

li {
  list-style: none; }

.min_ft {
  font-family: "Noto Serif JP", serif; }

._fw01 {
  font-weight: bold; }

._fw02 {
  font-weight: normal; }

@media (min-width: 1081px) {
  ._tx1 {
    font-size: 20px; } }
@media (min-width: 768px) and (max-width: 1081px) {
  ._tx1 {
    font-size: 18px; } }
@media (max-width: 767px) {
  ._tx1 {
    font-size: 16px; } }

@media (min-width: 1081px) {
  ._tx2 {
    font-size: 40px; } }
@media (min-width: 768px) and (max-width: 1081px) {
  ._tx2 {
    font-size: 30px; } }
@media (max-width: 767px) {
  ._tx2 {
    font-size: 20px; } }

._tx3 {
  font-size: 21px; }
  @media (max-width: 767px) {
    ._tx3 {
      font-size: 12px; } }

._tx4 {
  font-size: 32px; }
  @media (max-width: 767px) {
    ._tx4 {
      font-size: 14px; } }

@media (min-width: 1081px) {
  ._tx5 {
    font-size: calc(25px + (40 - 25)*(100vw - 1080px)/(1940 - 1080)); } }
@media (min-width: 768px) and (max-width: 1081px) {
  ._tx5 {
    font-size: 30px; } }
@media (max-width: 767px) {
  ._tx5 {
    font-size: 20px; } }

@media (min-width: 1081px) {
  ._tx6 {
    font-size: 20px; } }
@media (min-width: 768px) and (max-width: 1081px) {
  ._tx6 {
    font-size: 18px; } }
@media (max-width: 767px) {
  ._tx6 {
    font-size: 14px; } }

@media (min-width: 1081px) {
  ._tx7 {
    font-size: calc(40px + (70 - 40)*(100vw - 1080px)/(1940 - 1080)); } }
@media (min-width: 768px) and (max-width: 1081px) {
  ._tx7 {
    font-size: 35px; } }
@media (max-width: 767px) {
  ._tx7 {
    font-size: 28px; } }

._tx8 {
  font-size: calc(11px + (20 - 11)*(100vw - 768px)/(1940 - 768)); }
  @media (max-width: 767px) {
    ._tx8 {
      font-size: 14px; } }

@media (min-width: 1081px) {
  ._tx9 {
    font-size: calc(70px + (100 - 70)*(100vw - 1080px)/(1940 - 1080)); } }
@media (min-width: 768px) and (max-width: 1081px) {
  ._tx9 {
    font-size: 50px; } }
@media (max-width: 767px) {
  ._tx9 {
    font-size: 45px; } }

._tx10 {
  font-size: 28px; }
  @media (max-width: 767px) {
    ._tx10 {
      font-size: 18px; } }

._tx11 {
  font-size: 20px; }
  @media (min-width: 1081px) {
    ._tx11 {
      font-size: 28px; } }

._tx12 {
  font-size: 18px; }
  @media (max-width: 767px) {
    ._tx12 {
      font-size: 12px; } }

._tx13 {
  font-size: 30px; }
  @media (max-width: 767px) {
    ._tx13 {
      font-size: 20px; } }

._pd01 {
  padding: 0 20px; }

._pdt01 {
  padding-top: 60px; }

._pdl02 {
  padding-left: 20px; }
  @media (min-width: 1081px) {
    ._pdl02 {
      padding-left: calc(20px + (96 - 20)*(100vw - 1080px)/(1940 - 1080)); } }

._mga {
  margin: 0 auto; }

._mga01 {
  margin: 100px auto 0; }
  @media (max-width: 767px) {
    ._mga01 {
      margin: 40px auto 0; } }

._mga02 {
  margin: calc(70px + (137 - 70)*(100vw - 1080px)/(1940 - 1080)) auto; }
  @media (min-width: 768px) and (max-width: 1081px) {
    ._mga02 {
      margin: 50px 0; } }

._mga03 {
  margin: calc(70px + (110 - 70)*(100vw - 1080px)/(1940 - 1080)) auto; }
  @media (min-width: 768px) and (max-width: 1081px) {
    ._mga03 {
      margin: 50px 0; } }
  @media (max-width: 767px) {
    ._mga03 {
      margin: 24px auto; } }

._mga04 {
  margin: 165px auto 0; }
  @media (max-width: 767px) {
    ._mga04 {
      margin: 40px auto 0; } }

._mga05 {
  margin: 80px auto 0; }
  @media (max-width: 767px) {
    ._mga05 {
      margin: 24px auto 0; } }

._mga06 {
  margin: 64px auto 0; }

._mga07 {
  margin: 40px auto 0; }
  @media (max-width: 767px) {
    ._mga07 {
      margin: 24px auto 0; } }

._mga08 {
  margin: 137px auto 0; }
  @media (max-width: 767px) {
    ._mga08 {
      margin: 40px auto 0; } }

._mga09 {
  margin: 137px auto 0; }
  @media (max-width: 767px) {
    ._mga09 {
      margin: 80px auto 0; } }

._mga10 {
  margin: 80px auto 0; }
  @media (min-width: 1081px) {
    ._mga10 {
      margin: 100px auto 0; } }

._mga11 {
  margin: calc(100px + (280 - 100)*(100vw - 1080px)/(1940 - 1080)) auto; }
  @media (min-width: 768px) and (max-width: 1081px) {
    ._mga11 {
      margin: 50px 0; } }
  @media (max-width: 767px) {
    ._mga11 {
      margin: 24px auto; } }

._mgt01 {
  margin-top: 100px; }
  @media (min-width: 768px) and (max-width: 1081px) {
    ._mgt01 {
      margin-top: 50px; } }
  @media (max-width: 767px) {
    ._mgt01 {
      margin-top: 43px; } }

._mgt02 {
  margin-top: 48px; }
  @media (min-width: 768px) and (max-width: 1081px) {
    ._mgt02 {
      margin-top: 30px; } }
  @media (max-width: 767px) {
    ._mgt02 {
      margin-top: 24px; } }

._mgt03 {
  margin-top: 36px; }
  @media (max-width: 767px) {
    ._mgt03 {
      margin-top: 24px; } }

._mgt04 {
  margin-top: 10px; }
  @media (max-width: 767px) {
    ._mgt04 {
      margin-top: 24px; } }

._mgt05 {
  margin-top: 24px; }
  @media (max-width: 767px) {
    ._mgt05 {
      margin-top: 11px; } }

._mgt06 {
  margin-top: 64px; }

@media (min-width: 1081px) {
  ._mgt07 {
    margin-top: 32px; } }
@media (min-width: 768px) and (max-width: 1081px) {
  ._mgt07 {
    margin-top: 25px; } }
@media (max-width: 767px) {
  ._mgt07 {
    margin-top: 18px; } }

._mgt08 {
  margin-top: 40px; }
  @media (max-width: 767px) {
    ._mgt08 {
      margin-top: 24px; } }

._mgt09 {
  margin-top: calc(35px + (64 - 35)*(100vw - 1080px)/(1940 - 1080)); }
  @media (max-width: 767px) {
    ._mgt09 {
      margin-top: 24px; } }

@media (min-width: 1081px) {
  ._mgt10 {
    margin-top: calc(35px + (64 - 35)*(100vw - 1080px)/(1940 - 1080)); } }

._mgt11 {
  margin-top: 10px; }
  @media (max-width: 767px) {
    ._mgt11 {
      margin-top: 5px; } }

._mgt12 {
  margin-top: 60px; }
  @media (max-width: 767px) {
    ._mgt12 {
      margin-top: 40px; } }

._mgb01 {
  margin-bottom: 40px; }
  @media (min-width: 768px) and (max-width: 1081px) {
    ._mgb01 {
      margin-bottom: 18px; } }
  @media (max-width: 767px) {
    ._mgb01 {
      margin-bottom: 24px; } }

._mgb02 {
  margin-bottom: 24px; }
  @media (min-width: 1081px) {
    ._mgb02 {
      margin-bottom: 0; } }

._mgb03 {
  margin-bottom: 8px; }

._mgb04 {
  margin-bottom: 20px; }

._mgr01 {
  margin-right: 30px; }
  @media (max-width: 767px) {
    ._mgr01 {
      margin-right: 10px; } }

._mgr02 {
  margin-right: 40px; }
  @media (max-width: 767px) {
    ._mgr02 {
      margin-right: 0; } }

._mgr03 {
  margin-right: 30px; }
  @media (max-width: 767px) {
    ._mgr03 {
      margin-right: 36xpx; } }

._mgla {
  margin-left: auto; }

._mgl01 {
  margin-left: 55px; }
  @media (max-width: 767px) {
    ._mgl01 {
      margin-left: 15px; } }

._mgl02 {
  margin-left: 20px; }

._mgl03 {
  margin-left: 60px; }
  @media (max-width: 767px) {
    ._mgl03 {
      margin-left: 25px; } }

._mgl04 {
  margin-left: 38px; }
  @media (min-width: 768px) and (max-width: 1081px) {
    ._mgl04 {
      margin-left: 30px; } }
  @media (max-width: 767px) {
    ._mgl04 {
      margin-left: 20px; } }

._mgl05 {
  margin-left: auto; }

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

._lh01 {
  line-height: 2; }

._lh02 {
  line-height: 1; }

._clwhite {
  color: #FCFCFC; }

._clblack {
  color: #0B0B0B; }

._txtc {
  text-align: center; }

._pc {
  display: none; }
  @media (min-width: 1081px) {
    ._pc {
      display: block; } }

._sp {
  display: flex !important; }
  @media (min-width: 1081px) {
    ._sp {
      display: none !important; } }

._dblock {
  display: block; }

._wh01 {
  width: fit-content; }

._wh02 {
  width: 100%; }
  @media (min-width: 1081px) {
    ._wh02 {
      width: 80%; } }

._brpc {
  display: block; }
  @media (max-width: 767px) {
    ._brpc {
      display: none; } }

._brsp {
  display: none; }
  @media (max-width: 767px) {
    ._brsp {
      display: block; } }

.right {
  right: 0; }

.left {
  left: 0; }

/* ==========================
  フローティングバナー（追従バナー）
========================== */
.floating {
  display: inline-block;
  background-image: url("../img/_floating.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 243px;
  height: 160px; }
  @media (max-width: 767px) {
    .floating {
      width: 160px;
      height: 100px; } }
  .floating:hover {
    background-image: url("../img/_floatinghover.svg"); }

.bl_floatingBanner {
  position: fixed;
  bottom: 60px;
  right: 40px;
  max-width: 100%;
  z-index: 10; }
  @media (max-width: 767px) {
    .bl_floatingBanner {
      bottom: 30px;
      right: 20px; } }

.bl_floatingBanner_img {
  display: block;
  transition: 0.3s; }

.bl_floatingBanner_close {
  width: 15px;
  height: 15px;
  position: absolute;
  right: 0;
  top: 0px;
  cursor: pointer; }

.bl_floatingBanner_close span:nth-of-type(1) {
  position: absolute;
  top: 7px;
  right: 0;
  width: 15px;
  height: 2px;
  background-color: #559A6E;
  transform: rotate(45deg); }

.bl_floatingBanner_close span:nth-of-type(2) {
  position: absolute;
  top: 0;
  right: 7px;
  width: 2px;
  height: 15px;
  background-color: #559A6E;
  transform: rotate(45deg); }

/*　左の動き　*/
.bl_floatingBanner {
  animation: LeftAnime 0.5s forwards; }

@keyframes LeftAnime {
  from {
    opacity: 0;
    transform: translateX(300px); }
  to {
    opacity: 1;
    transform: translateX(0); } }
.bl_floatingBanner.js-close {
  animation: RightAnime 0.5s forwards; }

@keyframes RightAnime {
  from {
    opacity: 1;
    transform: translateX(0); }
  to {
    opacity: 1;
    transform: translateX(300px); } }
/*===================================
タブ
===================================*/
#tab_menu {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0 0 32px; }

#tab_menu li {
  padding: 4px 34px 4px 16px;
  margin: 0 1px 0 0;
  text-align: center;
  list-style: none;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.5s;
  line-height: 1;
  margin-right: 17px; }
  #tab_menu li:hover {
    color: #FCFCFC; }
  @media (max-width: 767px) {
    #tab_menu li {
      padding: 4px 8px;
      margin-right: 8px;
      font-size: 13px; } }

#tab_menu li:last-child {
  margin-right: 0; }

#tab1 {
  border: solid 1px #BF9D58;
  color: #BF9D58; }
  #tab1:hover {
    background: #BF9D58; }

.tab1::before {
  border-top: solid 1px #BF9D58;
  border-right: solid 1px #BF9D58; }

#tab2 {
  border: solid 1px #346F6D;
  color: #346F6D; }
  #tab2:hover {
    background: #346F6D; }

.tab2::before {
  border-top: solid 1px #346F6D;
  border-right: solid 1px #346F6D; }

#tab3 {
  border: solid 1px #9B2739;
  color: #9B2739; }
  #tab3:hover {
    background: #9B2739; }

.tab3::before {
  border-top: solid 1px #9B2739;
  border-right: solid 1px #9B2739; }

#tab4 {
  border: solid 1px #62427C;
  color: #62427C; }
  #tab4:hover {
    background: #62427C; }

.tab4::before {
  border-top: solid 1px #62427C;
  border-right: solid 1px #62427C; }
  
  #tab5 {
  border: solid 1px #1e419a;
  color: #1e419a; }
  #tab5:hover {
    background: #1e419a; }

.tab5::before {
  border-top: solid 1px #1e419a;
  border-right: solid 1px #1e419a; }

#tab_menu .selected:first-child {
  background: #BF9D58; }

#tab_menu .selected:nth-child(2) {
  background: #346F6D; }

#tab_menu .selected:nth-child(3) {
  background: #9B2739; }

#tab_menu .selected:last-child {
  background: #62427C; }

#tab_menu .selected {
  color: #fff; }
  #tab_menu .selected::before {
    border-top: solid 1px #fff;
    border-right: solid 1px #fff; }

/*===================================
ボタン
===================================*/
._btn {
  display: flex;
  align-items: center;
  padding: 16px 52px;
  width: fit-content;
  background-color: #559A6E;
  border-radius: 4px;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.16);
  transition: 0.4s ease-out; }
  @media (max-width: 767px) {
    ._btn {
      padding: 18px 28px; } }
  ._btn::after {
    content: "";
    background-image: url("../img/top/arrow01.svg");
    background-repeat: no-repeat;
    margin-top: 3px;
    width: 11px;
    height: 17px;
    display: block;
    margin-left: 20px; }
  ._btn:hover {
    background-color: #284B35; }

/*===================================
slick
===================================*/
.slick-prev {
  left: 10px; }
  @media (max-width: 767px) {
    .slick-prev {
      left: 0; } }

.slick-next {
  right: 10px; }
  @media (max-width: 767px) {
    .slick-next {
      right: 0; } }

.slick-prev, .slick-next {
  width: 40px;
  height: 40px; }
  @media (max-width: 767px) {
    .slick-prev, .slick-next {
      width: 20px;
      height: 20px; } }

/*===================================
モーダルウィンドウ
===================================*/
.modal {
  width: fit-content;
  margin: 0 auto;
  display: block; }

/*===================================
施工実績　カテゴリー
===================================*/
._categorywrap {
  width: 46%; }
  @media (min-width: 768px) and (max-width: 1081px) {
    ._categorywrap {
      margin-top: 64px; } }

@media (min-width: 1081px) {
  ._categorywrap:nth-child(2n) {
    margin-left: calc(35px + (88 - 35)*(100vw - 1080px)/(1940 - 1080)); } }

@media (min-width: 1081px) {
  ._categorywrap:nth-child(3), ._categorywrap:nth-child(4) {
    margin-top: 90px; } }

@media (min-width: 768px) and (max-width: 1081px) {
  ._categoryinner {
    width: 530px;
    margin: 0 auto; } }
@media (max-width: 767px) {
  ._categoryinner {
    width: 75%;
    margin: 0 auto; } }

.category-name_achievement {
  position: absolute;
  display: inline-block; }
  @media (max-width: 767px) {
    .category-name_achievement {
      top: 35px; } }
  .category-name_achievement span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%); }
    @media (max-width: 767px) {
      .category-name_achievement span {
        width: 24px; } }

.circle_01 {
  width: 118px;
  height: 118px;
  border-radius: 50%; }
  @media (max-width: 767px) {
    .circle_01 {
      width: 65px;
      height: 65px; } }

.circle_02 {
  width: 100px;
  height: 100px;
  border-radius: 50%; }
  @media (max-width: 767px) {
    .circle_02 {
      width: 65px;
      height: 65px;
      top: 5px; } }

/*===================================
ページナビゲーション
===================================*/
.wp-pagenavi {
  margin: 60px auto;
  width: fit-content; }
  .wp-pagenavi a {
    color: #000; }

.wp-pagenavi .page {
  display: inline-block;
  text-align: center;
  width: 42px;
  line-height: 42px;
  border: solid 1px #333;
  border-radius: 21px;
  margin: auto 6px;
  transition: 0.3s ease-out; }

.wp-pagenavi .page:hover {
  background: #EEF5F0; }

.wp-pagenavi .current {
  display: inline-block;
  text-align: center;
  width: 42px;
  line-height: 42px;
  color: #fff;
  background: #333;
  border: solid 1px #333;
  border-radius: 21px;
  margin: auto 6px; }

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .extend,
.wp-pagenavi .first,
.wp-pagenavi .last {
  line-height: 42px;
  margin: auto 8px;
  transition: 0.3s ease-out; }

.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover,
.wp-pagenavi .first:hover,
.wp-pagenavi .last:hover {
  color: #13c3ac; }

/*===================================
ページトップボタン
===================================*/
#page-top {
  bottom: 10px;
  right: 10px;
  position: fixed;
  margin-bottom: 15px; }

#page-top a {
  display: block;
  width: 50px;
  height: 50px;
  background-color: #c5d920;
  text-align: center;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  line-height: 50px; }
  @media (max-width: 767px) {
    #page-top a {
      width: 40px;
      height: 40px;
      font-size: 20px;
      line-height: 40px; } }

/*===================================
下層ページ共通パーツ
===================================*/
.common_inner__01 {
  position: relative;
  padding: 30px; }
  @media (max-width: 767px) {
    .common_inner__01 {
      padding: 10px; } }
  @media (min-width: 1081px) {
    .common_inner__01 ._hd03 {
      font-size: 28px; } }
  @media (min-width: 768px) and (max-width: 1081px) {
    .common_inner__01 ._hd03 {
      font-size: 20px; } }
  @media (max-width: 767px) {
    .common_inner__01 ._hd03 {
      font-size: 16px; } }
  @media (max-width: 767px) {
    .common_inner__01 .inner_01 {
      flex-wrap: wrap; } }
  .common_inner__01::before {
    background-color: #f4f4f6;
    content: "";
    position: absolute;
    top: 0;
    left: 30%;
    bottom: 0;
    right: 0;
    z-index: -1; }

.common_inner__02 {
  position: relative;
  padding: 30px; }
  @media (max-width: 767px) {
    .common_inner__02 {
      padding: 10px; } }
  .common_inner__02::before {
    background-color: #f4f4f6;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 30%;
    z-index: -1; }
  @media (min-width: 1081px) {
    .common_inner__02 ._hd03 {
      font-size: 28px; } }
  @media (min-width: 768px) and (max-width: 1081px) {
    .common_inner__02 ._hd03 {
      font-size: 20px; } }
  @media (max-width: 767px) {
    .common_inner__02 ._hd03 {
      font-size: 16px; } }
  @media (max-width: 767px) {
    .common_inner__02 .inner_02 {
      flex-wrap: wrap-reverse; } }