/* ==========================
   Base
========================== */

body{

  font-family:
    "Noto Sans JP",
    sans-serif;

  margin:0;

  color:#222;

  background:#ededed;

  line-height:1.8;
}

a{

  color:#333;

  text-decoration:none;
}

img{

  max-width:100%;

  display:block;
}


/* ==========================
   Header
========================== */

.header{

  background:
    linear-gradient(
      135deg,
      #191919 0%,
      #2c2c2c 100%
    );

  padding:40px 50px;

  color:#fff;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);
}

.header-inner{

  max-width:1400px;

  margin:0 auto;

  display:flex;

  align-items:center;

  gap:40px;
}

.site-logo{

  width:180px;

  height:auto;

  flex-shrink:0;
}

.header-title-wrap{

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.header-sub{

  font-size:11px;

  letter-spacing:5px;

  color:#b7b7b7;

  margin-bottom:10px;

  text-transform:uppercase;
}

.header h1{

  margin:0;

  font-size:24px;

  font-weight:300;

  letter-spacing:3px;

  line-height:1.2;
}


/* ==========================
   Search
========================== */

.search-area{

  max-width:1400px;

  margin:40px auto 20px;

  padding:0 30px;
}

#search{

  width:100%;

  box-sizing:border-box;

  padding:18px 20px;

  border:1px solid #ddd;

  border-radius:6px;

  background:white;

  font-size:16px;
}


/* ==========================
   Works List
========================== */

.works-grid{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(340px,1fr)
    );

  gap:35px;

  max-width:1400px;

  margin:0 auto;

  padding:20px 30px 60px;
}


/* ==========================
   Card
========================== */

.card{

  background:#fff;

  border-radius:2px;

  border:1px solid #e1e1e1;

  box-shadow:none;

  transition:.2s;
}

.card:hover{

  opacity:.97;
}

.card img{

  width:100%;

  height:320px;

  object-fit:cover;
}

.card-body{

  padding:25px;
}

.card h2{

  margin:8px 0 15px;

  font-size:20px;

  font-weight:500;

  line-height:1.5;
}

.card p{

  color:#666;

  font-size:14px;
}


/* ==========================
   Case No
========================== */

.case-no{

  color:#999;

  letter-spacing:3px;

  font-size:12px;

  font-weight:700;
}

.product-code{

  font-size:12px;

  font-weight:700;

  color:#999;

  margin-bottom:10px;
}


/* ==========================
   Detail
========================== */

.detail-container{

  background:#fff;

  padding:60px;

  border:none;
}

.case-detail-no{

  color:#666;

  letter-spacing:3px;

  font-size:13px;

  margin-bottom:10px;

  font-weight:700;
}

.detail-container h1{

  margin:0 0 30px;

  font-size:36px;

  font-weight:400;

  line-height:1.5;
}

.hero-image{

  width:100%;

  max-height:700px;

  object-fit:cover;

  border-radius:0;

  box-shadow:none;

  display:block;
}

.comment{

  margin:40px 0;
}


/* ==========================
   Product Table
========================== */

.product-table{

  width:100%;

  border-collapse:collapse;

  background:white;

  margin-bottom:50px;
}

.product-table th,
.product-table td{

  padding:14px;

  border:1px solid #ddd;

  text-align:left;
}

.product-table th{

  background:#f2f2f2;
}


/* ==========================
   Gallery
========================== */

.gallery{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(280px,1fr)
    );

  gap:20px;
}

.gallery-image{

  cursor:zoom-in;
}

.gallery-image:hover{

  filter:brightness(96%);
}


/* ==========================
   Lightbox
========================== */

.lightbox{

  display:none;

  position:fixed;

  inset:0;

  background:
    rgba(0,0,0,.92);

  z-index:9999;

  justify-content:center;

  align-items:center;
}

.lightbox.active{

  display:flex;
}

#lightbox-image{

  max-width:92%;

  max-height:92%;

  object-fit:contain;

  touch-action:none;
}

#lightbox-close{

  position:absolute;

  top:20px;

  right:30px;

  color:white;

  font-size:50px;

  cursor:pointer;

  line-height:1;
}

.lightbox-nav{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  background:none;

  border:none;

  color:white;

  font-size:60px;

  cursor:pointer;

  z-index:10000;
}

#prev-btn{

  left:30px;
}

#next-btn{

  right:30px;
}
.lightbox{
  touch-action:none;
}

#lightbox-image{
  touch-action:none;
}

/* ==========================
   Mobile
========================== */

@media (max-width:768px){

  .header-inner{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;
  }

  .site-logo{

    width:140px;
  }

  .header h1{

    font-size:28px;
  }

}


.detail-container{

  max-width:1200px;

  margin:40px auto;

  padding:60px;

  background:#fff;
}

.load-more-wrap{

  text-align:center;

  padding:20px 0 80px;
}

#load-more{

  background:#222;

  color:white;

  border:none;

  padding:16px 50px;

  font-size:14px;

  letter-spacing:2px;

  cursor:pointer;

  transition:.3s;
}

#load-more:hover{

  background:#444;
}
.footer{

  text-align:center;

  padding:60px 20px;

  color:#888;

  font-size:11px;

  letter-spacing:3px;

  text-transform:uppercase;
}
#lightbox{

  touch-action: pan-y;
}

#lightbox-image{

  touch-action: pan-y;
}


.lightbox{

  touch-action:none;
}

#lightbox-image{

  touch-action:none;

  -webkit-user-select:none;
  user-select:none;

  -webkit-touch-callout:none;
}