@charset "utf-8";
   
/*=============================
 common
 ==============================*/ 


/* pc */
.section {
   max-width: 1440px;
   height: auto;
   margin: 0 auto;
}

/* pc */
   
/*=============================
 main
==============================*/ 
/* article__header */
.article__header {
   padding: 100px 5% 0;
   background-color: var(--primary-bg);
}   
   
h2 {
   font-size: 2.8rem;
   font-weight: 500;
   line-height: 1;
}   
  
.h2__en {
   font-size: 1.1rem;
   font-style: Bold;
   color: var(--primary-blue);
   line-height: 1;
   margin-top: 8px;
}  
  
.h2__enLarge {
   color:rgba(178,207,243,0.3);
   font-size: 7rem;
   font-weight: 600;
   line-height: 1;
   margin-top: 30px;
}  

/* article header pc */
@media screen and (min-width: 769px) {
   .article__header {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
   }

   h2 {
      font-size: 4rem;
      font-weight: 500;
      line-height: 1;
   }   

   .h2__en {
      font-size: 10rem;
      font-weight: 700;
      color: var(--secondary-blue);
      line-height: 1;
   }   

   .h2__enLarge {
      position: absolute;
      font-size: 20rem;
      font-weight: 700;
      line-height: 1;
      top: 300px;
      left: 50%;
      transform: translate(-50%, 0)
   }
}
/* pc 769px */

/* business */
.section--pagebusiness {
   padding: 70px 0;
}

.pagebusiness__caption {
   font-size: 1.4rem;
   line-height: 1.7;
   padding: 30px 5% 70px;
   text-align: center;
}

.pagebusiness__txt {
   margin-top: 15px;
}

.pageSectionTitle__name {
   font-size: 2.8rem;
   font-weight: 500;
   line-height: 1;
}

.pageSectionTitle__en {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--primary-blue);
   line-height: 1;
   margin-top: 8px;
}

.pageSectionTitle {
   margin-top: 65px;
   text-align: center;
}

.tabPC {
   display: none;
}

/* ここからtab*/
.content_area {
   padding: 0 5%;
   margin: 0 auto;
}

.tab-container {
   display: flex;
   flex-wrap: nowrap;
   column-gap: 0.5em;
   margin-top: 30px;
}

.tab {
   font-size: 1.4rem;
   font-weight: 500;
   text-align:center;
   width: calc(100% / 3);
   padding: 10px 0;
   background-color: lightblue;
   cursor: pointer;
   border-radius: 50% 50% 0 0;
}

.tab.active {
   background-color: var(--primary-blue);
   color: #fff;
}

.content {
  display: none; /*必須*/
  background-color: var(--secondary-bg);
  padding: 50px 5%;
}

.content.show {
  display: block; /*必須*/
  background-color: var(--secondary-bg);
  padding: 50px 5%;
}

.tab__img {
   width: 71.5%;
   margin: 0 auto;
}

.tab__topic {
   color: #1D6CC9;
   font-size: 2rem;
   line-height: 1.6;
   margin-top: 40px;
   text-align: center;
}

.tab__txt {
   font-size: 1.4rem;
   line-height: 1.7;
   margin-top: 20px;
}


/* business pc */
@media screen and (min-width: 769px) {  
   .section--pagebusiness {
      max-width: 1440px;
      margin: 0 auto;
   }

   .tabPC {
      display: block;
      padding: 50px 7%;
   }

   .content_area {
      display: none;
   }

   .business__caption {
      font-size: 1.6rem;
      line-height: 1.7;
      margin-top: 0;
      text-align: center;
   }   
   
   .spBr__bu {
      display: none;
   }

   .pageSectionTitle {
      padding: 30px 7% 70px;
      text-align: left;
   }

   .pageSectionTitle__name {
      font-size: 3.6rem;
      font-weight: 500;
      line-height: 1;
   }

   .pageSectionTitle__en {
      display: block;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--primary-blue);
      line-height: 1;
      margin-top: 10px;
   }
   
   .tab-contents {
      display: flex;
      background-color: var(--secondary-bg);
      margin-bottom: 40px;
      border-radius: 24px;
      overflow: hidden;
   }

   .tab-item {
      width: 80px;
      background-color: var(--primary-blue);
      color: #fff;
      font-size: 1.8rem;
      font-weight: bold;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .tab__items {
      display: flex;
      padding: 63px 7% 75px;
      align-items: flex-start;
      justify-content: space-between;
   }

   .tab__img {
      width: 410px;
      margin: 0 auto;
      border-radius: 15px;
   }

   .tabItems__box {
      width: 43%;
      display: flex;
      flex-direction: column;
   }

   .tab__topic {
      color: #1D6CC9;
      font-size: 2.8rem;
      line-height: 1.8;
      margin-top: 0;
   }

   .tab__txt {
      font-size: 1.8rem;
      line-height: 1.7;
      margin-top: 63px;
   }
}

/* pc 769px */

/* business__container */
.business__container {
   background-image: url(../images/buisiness_back.jpeg) ;
   background-repeat: no-repeat;
   background-size: cover;
   background-color: rgba(255,255,255,0.5);
   background-blend-mode: lighten;
   padding: 90px 5% 110px;
}

.section--plastering,
.section--civilEngineering {
   padding: 35px 4% 53px;
   background-color: #fff;
}

.section--civilEngineering {
   margin-top: 80px;
}

.pageSectionTitle__small {
   text-align: center;
}

.pagebusiness__topic {
   margin-top: 35px;
   font-size: 1.4rem;
   padding: 0 12.5% 30px;
}

.plastering__box,
.civilEngineering__box {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   text-align: center;
   justify-content: space-between;
   column-gap: 20px;
   row-gap: 27px;
}

.plastering__Item,
.civilEngineering__Item {
   width: 45%;
}

/* business__container pc */
@media screen and (min-width: 769px) {  
   .business__container {
      padding: 250px 7% 300px;
   }

   .section--plastering,
   .section--civilEngineering {
      padding: 100px 13%;
   } 

   .section--civilEngineering {
      margin-top: 150px;
   }

   .plasteringTitle__box {
      display: flex;
      justify-content: space-between;
   }
   
   .pageSectionTitle__small {
      /* width: 840px; */
      display: block;
   }

   .pagebusiness__topic {
      width: 560px;
      margin-top: 0;
      font-size: 1.6rem;
      line-height: 1.8;
      padding: 0 1% 67px 0;
   }

   .plastering__box,
   .civilEngineering__box {
      width: 100%;
      text-align: center;
      justify-content: space-between;
      column-gap: 50px;
      row-gap: 60px;
   }

   .plastering__Item,
   .civilEngineering__Item {
      width: 28%;
   }

   .item__txt {
      font-size: 1.6rem;
      margin-top: 10px;
   }
}
   
/* pc 769px */