@charset "utf-8";
/* 各ページののCSS */

.line_img{
    text-align: center;
    margin: 6% 0 10% 0;
}
.line_img_1_top{
    width: 60%;
}
.line_img_1_top:hover{
    background: #fff;
    transition: 0.6s;
    opacity: 0.8;
}



/*コンセプト*/
.concept_area{
    width: 100%;
    box-shadow: 6px 6px 4px #ccc;
}
.concept_frex{
    display: flex;
}
.concept_text_area{
    width: 50%;
    padding: 3%;
    background: #9b9b9b;
    transform: translateX(1px);
}
.concept_text_top{
    font-size: 2.4rem;
    font-weight: bold;
}
.concept_text_center{
    font-size: 1.3rem;
    margin: 1% 0;
    color: #fff;
    font-weight: bold;
}
.concept_text_bottom{
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: #fff;
}
.concept_img_area{
    width: 60%;
}
.concept_img{
    width: 100%;
    height: 100.5%;
    transform: translateY(-2px);
}


#greeting {
    margin: 16% 4% 0 4%;
}
.greeting-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 8% auto;
    width: 80%;
}
.greeting-area_2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 8% auto;
    width: 80%;
}
.greeting-area_block {
    width: 46%;
}
.concept_img_4{
    margin-top: 4%;
    width: 56vh;
}
.greeting-img {
    width: 50%;
}
.greeting-img img {
    animation: fluidrotate 30s ease 0s infinite;
}
.greeting-content {
    width: 40%;
}
.heading01 {
    position: relative;
    font-weight: normal;
    font-size: 5vw;
    letter-spacing: 0.1em;
    padding: 0 0 20px 0;
    line-height: 1;
}
#greeting .heading01 span.en {
    width: 100%;
    left: 3em;
    margin-left: 4rem;
}
.heading01 span.en {
    top: 1.5em;
    left: 2em;
    font-size: 3vw;
}
.heading01 span {
    position: absolute;
}
#greeting .heading01 span.jp {
    left: 8em;
}
.heading01 span.jp {
    top: 7em;
    left: 5.5em;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.2vw;
}
.greeting-area p {
    margin: 0 0 30px 0;
}

.greeting-lead {
    font-size: 1.2rem;
}
.fadeDownTrigger, .smoothTrigger {
    opacity: 0;
}
.greeting-area p {
    margin: 0 0 30px 0;
}
.fadeDownTrigger, .smoothTrigger {
    opacity: 0;
}
.smooth {
    animation-name: smoothAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transform-origin: left;
    opacity: 0;
}
.greeting-area p {
    margin: 0 0 30px 0;
}
.greeting-area .txt-r {
    text-align: right;
}
.greeting-area p {
    margin: 0 0 30px 0;
    line-height: 1.6;
}
.border{
    border: solid #9b9b9b 1px;
    margin-bottom: 1.4rem;
}




/*家造りの流れ*/
.title_area{
    text-align: center;
    margin: 4.6% 0 0 0;
}
h4{
    margin: 2% 0 3% 0;
    font-size: 1.6rem;
    font-weight: 400;
}
.border_top{
    width: 80%;
    margin: 2% auto;
    border: solid 1px #ccc;
}

.building_area{
    width: 100%;
    margin: 8% 0;
}
.building_flex{
    display: flex;
    align-items: center;
    margin: 6% 2% 3%;
}
.building_flex_ex{
    display: flex;
    align-items: center;
    margin: 4% 2% 6%;
    padding: 0 8%;
    gap: 6%;
}
.box_01_ex{
    text-align: left;
}
.box_01{
    width: 30%;
}
.box_text_flex{
    display: flex;
    align-items: baseline;
}
.box_text_flex_2{
    display: flex;
    align-items: center;
}
.box_number{
    font-size: 3rem;
    color: #5075ab;
}
.box_number_ex{
    font-size: 4rem;
    color: #5075ab;
}
.box_text{
    width: 100%;
    text-align: left;
    margin: 0 0 0 2%;
}
.box_number_sub{
    color: #5075ab;
}
.box_arrow{
    width: 5%;
    text-align: center;
}
.box_arrow_ex{
    text-align: center;
}
.building_img_1 {
    width: 100%;
    height: 18vw;
}
.building_img_1_ex{
    width: 50%;
    height: auto;
}
.arrow_r_img{
    width: 50%;
}
.arrow_r_img_ex{
    width: 4%;
}
.border_dashed{
    border: dashed  1px  #9b9b9b;
    width: 80%;
    margin: 2% auto;
}
.building_heart{
    width: 30%;
}


/*会社概要*/
#main-area {
    text-align: center;
}
.company_area{
    margin: 12% 0;
}
.border_solid{
    border: solid 1px #9b9b9b;
    width: 80%;
    margin: 6% auto;
}
.orange_color{
    color: #eb591a;
    font-weight: bold;
    margin: 4% 0;
}
.company_img_flex{
    display: flex;
    justify-content: center;
    gap: 0.5%;
    margin-bottom: 0.5%;
}
.company_img_1{
    width: 30%;
}
.company_text{
    margin: 4% 0;
}
table th{
    padding : 20px 10px;
    color: #000;
}
  
table td{
    padding : 20px 20px;
    color: #000;
}
table{
    width: 80%;
    margin: auto;
    color: #000;
    border:solid 1px #aaaaaa;
}
tbody{
    width: 100%;
    text-align: left;
}
.td_left{
    width: 30%;
}
.td_right{
    width: 70%;
}
.odd{
    background: #EEF7FF;
}
.even{
    background: #fff;
}


/*受賞歴*/
.awards_area{
    margin: 10% 0;
}
.awards_flex{
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
.awards_text_2{
    text-align: left;
    width: 50%;
}
.awards_img_1_top{
    width: 16%;
}
.border_solid_2 {
    border: solid 1px #9b9b9b;
    width: 70%;
    margin: 2% auto;
    opacity: 0.4;
}


/*採用情報*/
.recruit_area_1{
    width: 100%;
    padding: 4%;
    margin: 6% 0;
    background: #F2F2F2;
}
.recruit_img_1_top {
    width: 74%;
    height: 40rem;
    object-fit: cover;
    transform: translate(0%, 0%);
}
.recruit_area_1_flex{
    display: flex;
    text-align: left;
}
.recruit_area_h2{
    color: blue;
    font-weight: bold;
    font-size: 3.6rem;
    padding: 4% 0 0;
}
.recruit_area_1_text{
    padding: 4%;
}
.recruit_area_h2 {
    font-size: 2.6rem;
}
.recruit_area_2_h2_small{
    font-size: 2rem;
    color: blue;
    font-weight: bold;
}
.border_solid_3 {
    border: solid 1px #9b9b9b;
    width: 90%;
    margin: 2% 0 0 4%;
    opacity: 0.4;
}
.recruit_area_2{
    width: 80%;
    margin: 6% auto;
}
.recruit_area_2_flex{
    display: flex;
    
}
.recruit_area_2_h2{
    color: blue;
    font-weight: bold;
    font-size: 3.6rem;
    text-align: left;
}
.recruit_area_2_2_h2{
    font-size: 2.8rem;
}
.recruit_2_text_area{
    text-align: left;
}
.border_solid_4 {
    border: solid 1px #9b9b9b;
    width: 48%;
    opacity: 0.4;
}
.recruit_img_daiku3{
    width: 32%;
    margin: 6%;
    object-fit: cover;
}
.recruit_area_3{
    width: 80%;
    margin: auto;
    background: #eb591a;
    background:url("../img/images/daiku_4.png") no-repeat center;
    background-size: cover;
}
.recruit_3_text_area{
    text-align: left;
}
.recruit_img_title1{
    width: 50%;
}
.recruit_img_title2{
    width: 50%;
}
.recruit_area_3_text{
    width: 50%;
    margin: 6% 0;
}
.recruit_center_area{
    max-width: 100%;   
}
.recruit_center_img{
    width: 100%;
    margin: 10% 0;
}
.recruit_area_4{
    width: 88%;
    margin: auto;
}
.recruit_area_4_flex{
    width: 100%;
    display: flex;
    text-align: left;
    padding: 3% 0;
    margin-top: 4%;
}
.recruit_area_4_flex_reverse{
    width: 100%;
    display: flex;
    text-align: left;
    padding: 3% 0;
    margin-top: 4%;
}
.recruit_area_4_h2{
    color: blue;
    font-weight: bold;
    font-size: 4.6rem;
    text-align: left;
    margin: 0 4%;
}
.recruit_en{
    font-size: 2rem;
    font-weight: bold;
}
.border_solid_5{
    border: solid 1.6px #000;
    width: 88%;
    opacity: 0.8;
    margin: 1.6% 0;
}
.recruit_4_text_area{
    width: 88%;
}
.recruit_img_area_4{
    width: 50%;
    margin-right: 4%;
}
.recruit_text_area_4{
   width: 50%;
}
.recruit_detail{
    width: 90%;
    margin: 8% auto;
    background: #F2F2F2;
    text-align: left;
    padding-bottom: 4%;
}
.recruit_detail_h2{
    color: blue;
    font-weight: bold;
    font-size: 2.6rem;
    text-align: left;
    padding: 4% 0 0 10%;
}
.recruit_detail_img{
    width: 10%;
    margin: 0 0 3% 10%;
}
.recruit_contact_area{
    width: 100%;
    margin-top: 8%;
}
.recruit_contact_area_1{
    position: relative;
    width: 100%;
    height: 34vh;
    margin: auto;
    background:url("../img/images/recruit_contact_area.png") no-repeat center;
    background-size: contain;
}
.recruit_click_img {
    width: 46%;
    position: absolute;
    bottom: 16%;
    left: 16%;
}
.recruit_click_img:hover{
    opacity: 0.6;
    transition: 0.6s;
}

/*リフォーム*/
.reform_area{
    width: 100%;
    padding: 8vh 0;
}
.reform_area_h2{
    color: #6B5B4B;
    font-size: 4rem;
    margin: 8% 0 0;
}
.reform_area_h3{
    color: #6B5B4B;
    font-size: 1.6rem;
    margin: 3% 0;
}
.reform_border_solid{
    border: solid 1px #6B5B4B;
    width: 60%;
    margin: 4% auto;
    opacity: 0.4;
}
.bf_area{
    width: 60%;
    margin: auto;
}
.reform_concept_area{
    width: 70%;
    margin: auto;
}
.reform_concept_title{
    display: flex;
    border: #6B5B4B;
    background: #6B5B4B;
}
.reform_icon{
    width: 3%;
    margin: 0 3%;
}
.reform_concept_text{
    font-size: 1.6rem;
    color: #fff;
    margin-left: 4%;
    font-weight: bold;
}
.reform_text_area{
    text-align: left;
    margin: 4% 0;
}
.reform_banner_img{
    margin: 4.6% 0;
}
.reform_banner_2_img{
    margin: 4.6% 0 1.2% 0;
}
.reform_technology_area{
    margin: 4% auto;
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 4%;
}
.reform_technology_img{
    width: 20vw;
}
.technology_text{
    text-align: left;
    display: inline-block;
}
.renovation_area{
    width: 100%;
    margin: 16% auto;
}
.reform_renovation_img{
    width: 80%;
}
.renovation_ba_img{
    margin-top: 6%;
}
.reform_contact_area_1{
    position: relative;
    width: 100%;
    height: 34vh;
    margin: auto;
    background:url("../img/images/reform_contact_click_img.png") no-repeat center;
    background-size: contain;
}

/*施工事例*/

/* タブの表示・非表示 */

[data-tab-content]{
    display: none
  }
  
  [data-tab-content].active{
    display: block;
  }

  
  /* section同士の余白 */
  section.someTabs {
      margin-bottom: 40px;
      border-bottom: solid 1px #eee;
      padding-bottom: 30px;
  }
  section.someTabs:last-child {
      margin: 0;
      padding: 0;
      border: none;
  }
  /* タブの中身のpタグの余白 */
  .tabs__content p {
      margin-bottom: 10px;
  }
  .tabs__content p:last-child {
      margin-bottom: 0;
  }
  
  /* タブの見出し */
  nav.tabs__nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      width: 70%;
      gap: 2%;
      padding: 0;
      margin: 6% auto;
      border: none;
  }
  .tabs__item{
    border: 2px solid #94A6AE;
    border-radius: 10px;
  }
  .tabs__body{
    width: 88%;
    margin: auto;
  }
  .tabs__body_flex{
    display: flex;
    gap: 2%;
    margin: 8% 0 2%;
  }
  .tabs_area {
    font-size: 1rem;
    width: 100%;
}
  .tabs_click_img {
    width: 96%;
    height: auto;
    object-fit: cover;
}
  

  a.tabs__item {
      display: inline-block;
      width: calc(94%/4);
      text-align: center;
      transition: all 0.2s ease;
      padding: 0;
      line-height: 4vw;
      text-decoration: none;
      background: #FFF;
      box-shadow: 0 7px 34px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 20%);
  }
  a.tabs__item.active {
      background: linear-gradient( 45deg , #94A6AE, #94A6AE);
      color: #FFF;
      font-weight: bold;
  }
  a.tabs__item.active:hover{
    background: #EEF7FF;
    opacity: 0.9;
    color: #000;
    transition: 1s;
  }

  
  /* 表示のアニメーション */
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
    }
  }
  .tabs__content.active {
      animation: fadeIn 0.7s ease 0s 1 normal;
  }
  .tabs_click_img:hover{
    background: #fff;
    opacity: 0.6;
    transition: 0.6s;
  }


.height_area{
    /*height: 148vh;*/
}
.title_area_1_1 {
    text-align: center;
    margin: 6% 0 4% 0;
}
/*スライダー*/

  .slider-thumbnail .swiper-slide {
    opacity: .5;
    transition: opacity .5s;
    width: calc(100% / 3);
  }
  .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
  }
  /* レイアウトのためのスタイル */
  .swiper {
    max-width: 70%;
    width: 100%;
  }

.construction_area{
    width: 80%;
    height: 100%;
    margin: 6% auto;
    text-align: left;
}
.construction_h5{
    font-weight: 400;
    font-size: 1.8rem;
}
.construction_h3{
    font-weight: 500;
    margin: 1% 0 2% 0;
}
.construction_img_area{
    display: flex;
    width: 100%;
    gap: 1%;
}
.construction_img_area_1{
    width: 49%;
    height: 200%;
}
.construction_img_area_2{
    width: 49%;
}
.construction_img_1{
    height: 41.8vw;
    object-fit: cover;
}


/*プライバシーポリシー*/
.privacy_height_area{
    width: 70%;
    margin: 10% auto;
}
.privacy_h2{
    text-align: left;
    font-size: 1.6rem;
    color: #7A4E24;
    border-bottom: 1px solid #6CB369;
    width: 70%;
}
.privacy_text{
    font-size: 1rem;
    text-align: left;
    margin-top: 2%;
}
.president_text{
    text-align: right;
}
.privacy_area{
    margin-top: 10%;
}
.privacy_h3{
    text-align: left;
    font-size: 1.2rem;
    color: #7A4E24;
}

.text_h3_red{
    text-align: left;
    color: red;
    margin: 3% 0 0 1%;
}




@media screen and (max-width:1060px) {
    #pc-nav ul {
        font-size: 0.8rem;
    }
}




@media screen and (max-width:768px) {
    #g-nav.panelactive {
        height: 113vh;
    }
    #g-nav ul {
        top: 55%;
        left: 50%;
        font-size: 1rem;
    }
    .concept_area {
        box-shadow: 0 0 0 #ccc;
    }
    .concept_frex {
        display: block;
    }
    .concept_text_area {
        width: 100%;
    }
    .concept_img_area {
        width: 100%;
    }
    .greeting-content {
        width: 100%;
    }
    .greeting-img{
        width: 100%;
    }
    .greeting-area_2 {
        flex-direction: column-reverse;
    }
    .contact_rihgt {
        text-align: center;
    }
    .tel_number {
        text-align: center;
    }
    .tel_time {
        text-align: center;
    }
    .recruit_area_1 {
        margin: 6% 0;
    }
    .recruit_img_1_top {
        width: 76%;
        height: 22rem;
        object-fit: cover;
        transform: translate(0%, 8%);
    }
    .recruit_area_2_h2 {
        font-size: 2.6rem;
    }
    .recruit_img_daiku3 {
        margin: 6% 6% 6% 0;
        object-fit: contain;
    }
    .recruit_area_2_2_h2 {
        font-size: 1.5rem;
    }
    .recruit_area_1_text {
        font-size: 0.7rem;
    }
    .recruit_en {
        font-size: 1.4rem;
    }
    .recruit_click_img {
        width: 57%;
        position: absolute;
        bottom: 32%;
        left: 8%;
    }



    .tabs_h3{
        font-size: 0.8rem;
    }
    .tabs_text{
        font-size: 0.8rem;
    }

    .height_area {
        height: auto;
    }
    .swiper {
        max-width: 100%;
        width: 100%;
    }

    .privacy_height_area {
        width: 80%;
        text-align: left;
        margin: 10% auto;
    }
}