@charset "utf-8";
/* 選択中の画像 */
  
#case01-1:checked ~ .case-main .photo01-1,
#case01-2:checked ~ .case-main .photo01-2,
#case01-3:checked ~ .case-main .photo01-3,
#case01-4:checked ~ .case-main .photo01-4,

#case02-1:checked ~ .case-main .photo02-1,
#case02-2:checked ~ .case-main .photo02-2,
#case02-3:checked ~ .case-main .photo02-3,
#case02-4:checked ~ .case-main .photo02-4,

#case03-1:checked ~ .case-main .photo03-1,
#case03-2:checked ~ .case-main .photo03-2,
#case03-3:checked ~ .case-main .photo03-3,
#case03-4:checked ~ .case-main .photo03-4,

#case04-1:checked ~ .case-main .photo04-1,
#case04-2:checked ~ .case-main .photo04-2,
#case04-3:checked ~ .case-main .photo04-3,
#case04-4:checked ~ .case-main .photo04-4,

#case05-1:checked ~ .case-main .photo05-1,
#case05-2:checked ~ .case-main .photo05-2,
#case05-3:checked ~ .case-main .photo05-3,
#case05-4:checked ~ .case-main .photo05-4,

#case06-1:checked ~ .case-main .photo06-1,
#case06-2:checked ~ .case-main .photo06-2,
#case06-3:checked ~ .case-main .photo06-3,
#case06-4:checked ~ .case-main .photo06-4,
#case06-5:checked ~ .case-main .photo06-5,

#case07-1:checked ~ .case-main .photo07-1,
#case07-2:checked ~ .case-main .photo07-2,
#case07-3:checked ~ .case-main .photo07-3,
#case07-4:checked ~ .case-main .photo07-4,

#case08-1:checked ~ .case-main .photo08-1,
#case08-2:checked ~ .case-main .photo08-2,
#case08-3:checked ~ .case-main .photo08-3,
#case08-4:checked ~ .case-main .photo08-4,
#case08-5:checked ~ .case-main .photo08-5,

#case09-1:checked ~ .case-main .photo09-1,
#case09-2:checked ~ .case-main .photo09-2,
#case09-3:checked ~ .case-main .photo09-3,
#case09-4:checked ~ .case-main .photo09-4,

#case10-1:checked ~ .case-main .photo10-1,
#case10-2:checked ~ .case-main .photo10-2,
#case10-3:checked ~ .case-main .photo10-3,
#case10-4:checked ~ .case-main .photo10-4,
#case10-5:checked ~ .case-main .photo10-5,

#case11-1:checked ~ .case-main .photo11-1,
#case11-2:checked ~ .case-main .photo11-2,
#case11-3:checked ~ .case-main .photo11-3,
#case11-4:checked ~ .case-main .photo11-4,

#case12-1:checked ~ .case-main .photo12-1,
#case12-2:checked ~ .case-main .photo12-2,
#case12-3:checked ~ .case-main .photo12-3,
#case12-4:checked ~ .case-main .photo12-4,

#case13-1:checked ~ .case-main .photo13-1,
#case13-2:checked ~ .case-main .photo13-2,
#case13-3:checked ~ .case-main .photo13-3,
#case13-4:checked ~ .case-main .photo13-4
{
  opacity: 1;
  visibility: visible;
}

.case-description > div {
  display: none;
}

#case01-1:checked ~ .case-description .description01-1 {
  display: block;
}

#case01-2:checked ~ .case-description .description01-2 {
  display: block;
}

#case01-3:checked ~ .case-description .description01-3 {
  display: block;
}

#case01-4:checked ~ .case-description .description01-4 {
  display: block;
}
/*-------case02------*/
#case02-1:checked ~ .case-description .description02-1 {
  display: block;
}

#case02-2:checked ~ .case-description .description02-2 {
  display: block;
}

#case02-3:checked ~ .case-description .description02-3 {
  display: block;
}

#case02-4:checked ~ .case-description .description02-4 {
  display: block;
}
 /*-------case03------*/
#case03-1:checked ~ .case-description .description03-1 {
  display: block;
}

#case03-2:checked ~ .case-description .description03-2 {
  display: block;
}

#case03-3:checked ~ .case-description .description03-3 {
  display: block;
}

#case03-4:checked ~ .case-description .description03-4 {
  display: block;
}

   /*-------case04------*/
   #case04-1:checked ~ .case-description .description04-1 {
      display: block;
    }
    
    #case04-2:checked ~ .case-description .description04-2 {
      display: block;
    }
    
    #case04-3:checked ~ .case-description .description04-3 {
      display: block;
    }
  
    #case04-4:checked ~ .case-description .description04-4 {
      display: block;
    }

       /*-------case05------*/
#case05-1:checked ~ .case-description .description05-1 {
  display: block;
}

#case05-2:checked ~ .case-description .description05-2 {
  display: block;
}

#case05-3:checked ~ .case-description .description05-3 {
  display: block;
}

#case05-4:checked ~ .case-description .description05-4 {
  display: block;
}

   /*-------case06------*/
   #case06-1:checked ~ .case-description .description06-1 {
      display: block;
    }
    
    #case06-2:checked ~ .case-description .description06-2 {
      display: block;
    }
    
    #case06-3:checked ~ .case-description .description06-3 {
      display: block;
    }
  
    #case06-4:checked ~ .case-description .description06-4 {
      display: block;
    }

    #case06-5:checked ~ .case-description .description06-5 {
      display: block;
    }

     /*-------case07------*/
   #case07-1:checked ~ .case-description .description07-1 {
      display: block;
    }
    
    #case07-2:checked ~ .case-description .description07-2 {
      display: block;
    }
    
    #case07-3:checked ~ .case-description .description07-3 {
      display: block;
    }
  
    #case07-4:checked ~ .case-description .description07-4 {
      display: block;
    }
       /*-------case08------*/
   #case08-1:checked ~ .case-description .description08-1 {
      display: block;
    }
    
    #case08-2:checked ~ .case-description .description08-2 {
      display: block;
    }
    
    #case08-3:checked ~ .case-description .description08-3 {
      display: block;
    }
  
    #case08-4:checked ~ .case-description .description08-4 {
      display: block;
    }

    #case08-5:checked ~ .case-description .description08-5 {
      display: block;
    }
         /*-------case09------*/
   #case09-1:checked ~ .case-description .description09-1 {
      display: block;
    }
    
    #case09-2:checked ~ .case-description .description09-2 {
      display: block;
    }
    
           /*-------case10------*/
   #case10-1:checked ~ .case-description .description10-1 {
    display: block;
  }
  
  #case10-2:checked ~ .case-description .description10-2 {
    display: block;
  }
  
  #case10-3:checked ~ .case-description .description10-3 {
    display: block;
  }

  #case10-4:checked ~ .case-description .description10-4 {
    display: block;
  }

  #case10-5:checked ~ .case-description .description10-5 {
    display: block;
  }
         /*-------case11------*/
         #case11-1:checked ~ .case-description .description11-1 {
          display: block;
        }
        
        #case11-2:checked ~ .case-description .description11-2 {
          display: block;
        }
        
        #case11-3:checked ~ .case-description .description11-3 {
          display: block;
        }
      
        #case11-4:checked ~ .case-description .description11-4 {
          display: block;
        }
    
        #case11-5:checked ~ .case-description .description11-5 {
          display: block;
        }

   /*-------case12------*/
   #case12-1:checked ~ .case-description .description12-1 {
    display: block;
  }
  
  #case12-2:checked ~ .case-description .description12-2 {
    display: block;
  }
  
  #case12-3:checked ~ .case-description .description12-3 {
    display: block;
  }

  #case12-4:checked ~ .case-description .description12-4 {
    display: block;
  }
 /*-------case13------*/
 #case13-1:checked ~ .case-description .description13-1 {
  display: block;
}

#case13-2:checked ~ .case-description .description13-2 {
  display: block;
}

#case13-3:checked ~ .case-description .description13-3 {
  display: block;
}

#case13-4:checked ~ .case-description .description13-4 {
  display: block;
}
    /*------ページネーション------*/
    .Pagination{
      padding-bottom: 40px;
      text-align: center;
      align-items: center;
    }
    .pagination .pagination-number{
        color: #333;
        font-size: 1rem;
        text-align: center;
        text-decoration: none;
        position: relative;
        padding: 0 6px 8px;
        margin: 0 15px;
      }
     .pagination .current{
      border-bottom: solid 1px #333;
     }
     .pagination a::after{
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 0;
      height: 1px;
      background-color: #333;
      transition: .3s;
     }
     .pagination a:hover::after{
      width: 100%;
     }
     .pagination a:hover{
      color: #eb6100;
     }
     .cases-back a{ 
      color: rgb(102,102,102);
      font-size: 0.8rem;
     }
     .cases-back a::after{
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 0;
      height: 1px;
      background-color: rgb(102,102,102);
      transition: .3s;
     }
     .cases-back a:hover::after{
      width: 100%;
     }
     .cases-back a{
      text-decoration: none;
      position: relative;
      padding: 0 6px 8px;
      margin: 0 15px;
     }
     .cases-back{
      color: rgb(102,102,102);
      text-align: center;
      padding-bottom: 40px;
     }
     /*-------------パンクズリスト------------*/
  .breadcrumb{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
  }
  @media screen and (max-width:767px) {
    .breadcrumb{
      padding-right: 0;
    }
  }
  .breadcrumb-arrow{
  display: inline-block;
  vertical-align: middle;
  color: #eb6100;
  line-height: 1;
  position: relative;
  width: 10px;
  height: 10px;
  transform: translateX(-25%) rotate(45deg);
}

.breadcrumb-arrow::before, .breadcrumb-arrow::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}

.breadcrumb-arrow::before {
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}

.breadcrumb-arrow::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}
.tec-back a{
    color: #777;
}
.breadcrumb-text{
    display: flex;
    column-gap: 1rem;
    align-items: center;
}
.breadcrumb-text span{
    font-size: 0.8rem;
}

@media screen and (max-width:959px) {
  .breadcrumb{
    margin-bottom: 2rem;
  }
}

 /*=======加工事例ページ---------*/
  /* =========================================
   PROCESSING CASES
========================================= */

.processing-cases {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}


/* =========================================
   各CASE
========================================= */

.case-item {
  padding-bottom: 90px;
  margin-bottom: 90px;
  scroll-margin-top: 120px;
}


/* CASEタイトル */

.case-title {
  margin-bottom: 25px;
}
 
.case-tittle h2 {
  font-size: 2rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.06em;
  margin-top: 5rem;
  margin-bottom: 1rem;
  line-height: 200%;
  position: relative;
  border-bottom: none;
}
.case-tittle h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgb(020, 078, 148);
}
.case-tittle h2::before {
  position: absolute;
  content: "";
  background: rgb(038, 140, 197);
  height: 3px;
  bottom: 0;
  width: 20%;
  left: 0;
  z-index: 1;
}
.case-number{
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: #7a858c;
}
@media screen and (max-width:428px) {
  .case-tittle h2{
      line-height: 120%;
      padding-bottom: 0.5rem
    }
}
.sp-size{
  font-size: 1.6rem;
}
@media screen and (max-width:428px) {
  .sp-size{
    font-size: 1.1rem;
  }
}
/* =========================================
   ギャラリー
========================================= */

.case-gallery {
  width: 100%;
}


/* radio */

.case-gallery > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


/* =========================================
   メイン画像
========================================= */

.case-main {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff;
  max-width: 850px;
  margin: 0 auto;
}


.case-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}


.case-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media screen and (max-width:1279px) {
  .case-photo img{
      width: 80%;
      max-width: 700px;
      margin: 0 auto;
  }
}
@media screen and (max-width:767px) {
  .case-photo img{
      width: 100%;
  }
}

.cases-layout {
padding-left: 20px;
padding-right: 20px;
}
@media screen  and (max-width:767px){
  .cases-layout{
    padding-left: 0;
    padding-right: 0;
  }
}
.cases-main {
  flex: 1;
  min-width: 0;
}