/* ===============================================
   パンくずリストのレイアウト
================================================== */
@media (max-width: 646px) {
  .breadcrumb {
      padding-left:0;
  }
}

/* ===============================================
   材質／メッキ&カラー のレイアウト
================================================== */
.mat-sub{
  font-size: 0.7rem;
  text-align: center;
}

.material {
  margin: 0;
  padding: 0;
  font-weight: 450;
}

.products-page .breadcrumb + .sec-title {
  display: block;
  width: 100%;
  margin: clamp(22px, 4vw, 34px) 0 12px !important;
  text-align: center;
  line-height: 1.08;
}

.products-page .breadcrumb + .sec-title::before {
  display: none;
}

.products-page .sec-title > .sub {
  display: block;
  margin-bottom: 10px;
  line-height: 1.5;
}

.products-page .material {
  text-align: center;
  margin: 0 auto clamp(28px, 4vw, 42px);
  color: #1f2d44;
  font-weight: 650;
}

.mat-fin {
  --label-width: auto;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  font-weight: 450;
  width: fit-content;
  max-width: 100%;
}

.mat-fin .mat-item {
  display: grid;
  align-items: start;
  text-align: left;
  column-gap: 0.6rem;
}

.mat-fin .label {
  white-space: nowrap;
  text-align: right;
  font-weight: 550;
}

.mat-fin .value {
  min-width: 0;
}

@media (min-width: 544px) {
  .mat-fin {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 40px;
    row-gap: 10px;
    justify-content: center;
    margin: 0 auto;
  }

  .mat-fin .mat-item {
    grid-template-columns: var(--label-width) auto;
    width: fit-content;
  }

  .mat-fin .value {
    white-space: nowrap;
  }
}

@media (max-width: 543px) {
  .products-page .breadcrumb + .sec-title {
    margin-bottom: 18px !important;
  }

  .products-page .breadcrumb + .sec-title:has(.product-title-paren) {
    margin-bottom: 26px !important;
  }

  .mat-fin {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 5px;
    width: fit-content;
    max-width: min(340px, calc(100% - 40px));
    margin: 0 auto clamp(30px, 8vw, 42px);
  }

  .mat-fin .mat-item {
    grid-template-columns: var(--label-width) minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: baseline;
    width: 100%;
    line-height: 1.5;
  }

  .mat-fin .label {
    color: #0b1f3f;
    font-weight: 700;
  }

  .mat-fin .value {
    white-space: normal;
    overflow-wrap: anywhere;
    color: #1f2d44;
    font-weight: 600;
  }
}

@media (max-width: 600px) {
  .mat-fin {
    font-size: 0.95rem;
  }
}

/* =========================================
   ●カラーの特殊色表現
========================================= */

.color-chip.black { color: var(--black); }
.color-chip.yellow { color: var(--yellow); }
.color-chip.red { color: var(--red); }
.color-chip.blue { color: var(--blue); }
.color-chip.lightblue { color: var(--lightblue); }
.color-chip.pink { color: var(--pink); }
.color-chip.orange { color: var(--orange); }
.color-chip.green { color: var(--green); }
.color-chip.brown { color: var(--brown); }
.color-chip.peachgold { color: var(--peachgold); }
.color-chip.beige { color: var(--beige); }
.color-chip.navyblue { color: var(--navyblue); }
.color-chip.gray { color: var(--gray); }

/*白色(縁付き)*/
.color-chip.white {
  color: var(--white);
  text-shadow:
    0 0 2px rgba(0,0,0,0.35);
}

/*金色(光沢付き)*/
.color-chip.gold {
  background: linear-gradient(
    45deg,
    #B67B03 0%,
    #DAAF08 40%,
    #FEE9A0 55%,
    #DAAF08 70%,
    #B67B03 100%
  );
  -webkit-background-clip: text;
  color: transparent;
}

/* 銀色(光沢付き)*/
.color-chip.silver {
  background: linear-gradient(
   45deg,
   #757575 0%,
   #9E9E9E 38%,
   #E8E8E8 55%,
   #9E9E9E 72%,
   #757575 100%
  );
  -webkit-background-clip: text;
  color: transparent;
}

/* 銅色(光沢付き)*/
.color-chip.bronze {
  background: linear-gradient(
    45deg,
    #6E3F16 0%,
    #9A6229 38%,
    #E0B07A 55%,
    #9A6229 72%,
    #6E3F16 100%
  );
  -webkit-background-clip: text;
  color: transparent;
}

/* 黒色(光沢付き)*/
.color-chip.blackshine {
  background: linear-gradient(
    45deg,
    #0a0a0a 0%,
    #1a1a1a 28%,
    #3f3f3f 44%,
    #cfcfcf 48%,
    #e6e6e6 50%,
    #cfcfcf 54%,
    #353535 66%,
    #1a1a1a 84%,
    #0a0a0a 100%
  );
  -webkit-background-clip: text;
  color: transparent;
}

/* クリア表現*/
 /*背景市松模様を描くスペース確保*/
 .color-chip {
   position: relative;
   width: 1.4em;
   height: 1.5em;
   font-size: 1.1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }

 /*島松模様のデザイン*/
 .color-chip.clear .checker {
   position: absolute;
   inset: 0;
   background: repeating-linear-gradient(
     45deg,
     #d8d8d8,
     #d8d8d8 0.15em,
     #fff 0.15em,
     #fff 0.3em
   );
 }

 /*透明感の表現*/
 .color-chip.clear .dot {
   position: relative;
   color: rgba(230, 240, 250, 0.55);
   -webkit-text-stroke: 0.5px rgba(170, 190, 210, 0.7);
 }


/* =========================================
   ●カラーホバー時、色名表示
========================================= */
.tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.9em;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.color-chip:hover .tooltip {
  opacity: 1;
}

.hover-parent {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 543px) {

  .color-chip::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.9em;
    height: 1px;
    background: #2196f3;
  }
}

/* =========================================
   サイズ表デザイン・レイアウト
========================================= */

.size-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.size-block h4 {
  text-align: center;
  margin: 5px;
  margin-top: 0;
  transform: scale(0.9);

}

@media (max-width: 470px) {
  .size-block h4 {
    margin-bottom: -5px;
    transform: scale(0.85);
  }
}

.size-list {
  display: flex;
  overflow-x: auto;
  overflow-y: visible;
  justify-content: flex-start;
  width: 100%;
}

.size-list .header-col {
  text-align: left !important; 
}

@media (max-width: 470px) {
  .size-list {
    width: 100%;
    margin: 0 auto;
  }
}

.size-table {
  display: inline-table;
  flex: 0 0 auto;
  border-collapse: collapse;
  font-size: 0.95rem;
  width: max-content;
  max-width: none;
  min-width: 100px;
  margin-inline: auto;
}

.size-table th,
.size-table td {
  white-space: nowrap;
  border: 1px solid #ccc;
  padding: 0.1rem 0.7rem;
  text-align: center;
}

@media (max-width: 470px) {
  .size-table {
    font-size: 0.88rem;
  }

  .size-table th,
  .size-table td {
    padding: 0.08rem 0.62rem;
  }
}

.size-table th {
  background: #f5f7fa;
  font-weight: 600;
}

.size-table tr.highlight td {
  background: #f0f6ff;
}

/* =========================================
   商品写真・商品図面・サイズ表のレイアウト
========================================= */

.product-group {
  width: fit-content;
  margin: 40px auto 40px;
}

.product-group-margin-top {
  margin-top: 50px;
}

.product-pattern {
  text-align: left;
  width: fit-content;
  margin: 0;
  margin-bottom: -15px;
}

.product-pattern::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #2196f3;
  margin-right: 8px;
  transform: translateY(3px);
}

.product-part{
  text-align: left;
  width: fit-content;
  margin: 0;
  margin-bottom: -10px;
}

.images {
  display: flex;
  gap: clamp(22px, 4vw, 56px);
  row-gap: 22px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.images:has(> :nth-child(2):last-child) {
  gap: clamp(34px, 5vw, 70px);
}

.image-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: center;
}



@media (max-width: 470px) {
  .image-block img {
    width: 80%;
    height: auto;
  }

  .images {
    gap: 18px;
  }
}

.image-block img.photo-img,
.image-block img.drawing-img {
  max-height: 200px;
  max-width: 200px;
  margin-top: 35px;
}

.images .image-block img.size-svg-img {
  width: 340px;
  max-width: 340px;
}

.products-page .images .image-block img.size-svg-img[src*="/reinforcement-hardware/"],
.products-page .images .image-block img.size-svg-img[src*="/mini-brackets/"],
.products-page .images .image-block img.size-svg-img[src*="/viola-brackets/"] {
  width: min(340px, calc(100vw - 120px));
  max-width: min(340px, calc(100vw - 120px));
  max-height: 200px;
  padding: 18px 28px;
  box-sizing: content-box;
  background: #fff;
  object-fit: contain;
}

@media (max-width: 470px) {
  .products-page .images .image-block img.size-svg-img[src*="/reinforcement-hardware/"],
  .products-page .images .image-block img.size-svg-img[src*="/mini-brackets/"],
  .products-page .images .image-block img.size-svg-img[src*="/viola-brackets/"] {
    width: min(300px, calc(100vw - 76px));
    max-width: min(300px, calc(100vw - 76px));
    padding: 16px 18px;
  }
}


@media (max-width: 472px) {
  .image-block img.photo-img {
    margin-top: 20px;
  }
}

@media (max-width: 472px) {
  .image-block img.drawing-img {
    margin-top: 0;
  }
}


.images-sizelist-gap {
  gap: 20px;  
}

/* =========================================
    商品写真・商品図面をクリック時拡大
========================================= */

.zoom-note {
  margin-top: 5px;
  font-size: 0.68rem;
  color: #666;
  line-height: 1.2;
  letter-spacing: 0.2px;
  opacity: 0.85;
}

@media (min-width: 544px) {
  .js-zoom-open {
    cursor: zoom-in;
  }
}

.zoom-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

.zoom-modal.active {
  display: flex;
}

.zoom-content {
  position: relative;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  box-sizing: border-box;
  cursor: grab;

  max-width: 90vw;
  max-height: 75vh;

  user-select: none;
}

.zoom-content img {
  display: block;
  width: auto;
  height: auto;

  max-width: min(800px, calc(90vw - 40px));
  max-height: min(500px, calc(75vh - 40px));

  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.zoom-content.is-resized img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* 閉じるボタン */
.zoom-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.zoom-resize-handle {
  position: absolute;
  right: 1px;
  bottom: -6px;
  width: 40px;
  height: 40px;
  cursor: nwse-resize;
}

.zoom-resize-handle::after {
  content: "⇔";
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 20px;
  color: #666;
  transform: rotate(45deg);
}

@media (max-width: 544px) {
  .zoom-note {
    display: none;
  }
}

/* =========================================
   材質表レイアウト
========================================= */
.product-detail-block {
  width: 100%;
  text-align: center;
}

.product-detail-wrap {
  display: inline-block;
  text-align: left;
  max-width: 100%;
  margin-top: 40px;
}

.product-detail-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: -40px;
}

.product-detail-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #2196f3;
  margin-right: 8px;
  transform: translateY(3px);
}

.product-detail-list {
  overflow-x: auto;
  overflow-y: visible;
  margin-top: 20px;
}

@media (max-width: 470px) {

 .product-detail-wrap {
   display: block;
 }

  .product-detail-list {
    width: 97vw;
    margin-left: calc(50% - 48.5vw);
    transform: scale(0.9);
  }
}

.product-detail-table {
  display: block;
  border-collapse: collapse;
  font-size: 0.95rem;
  width: max-content;
  max-width: 100%;
  margin: 16px auto 0;
}

.product-detail-table td {
  white-space: nowrap;
  border: 0;                     /* 一旦全部消す */
  border-bottom: 1px solid #ccc; /* 下線だけ残す */
  padding: 0.2rem 0.9rem;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}

/* ① 先頭行だけ（A1セルに文字が入ってる場合）*/
.product-detail-list .header-row {
  font-weight: 600;
}

/* ② 先頭行＋先頭列（A1セルに文字が入ってない場合）*/
.product-detail-list .header-cross {
  font-weight: 600;
}

.product-detail-list .header-col {
  text-align: left !important; 
}

/* ===============================================
   カタログボタンのレイアウト
================================================== */

.catalog-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 2rem auto 1.5rem;
  padding: 0.6rem 1.2rem;
  background: #003d73 !important;
  color: #fff !important;
  border-radius: 6px;
  text-align: center;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 600;
  transition: background 0.25s;
}

.catalog-btn:hover {
  background: #005fa3;
}