@charset "UTF-8";
/* ----------------------------
[ 製品ページ: CSS settings ]
+ TOP slider -> HOMEと共通 関連ファイル: common.scss(css), common_script.js
+ introduction
+ 製品リスト
+ テーブル, テーブル下キャプション
+ 印字事例
+ FEATURE
------------------------------- */
@media screen and (min-width: 769px),
print {
  #breadcrumb {
    position: relative;
    z-index: 2;
  }

  /*デザイン変更：スライダーとの重なりを調整*/
  #page #main_contents {
    margin-top: -35px;
    padding-top: 0;
  }
}

/* ---------- 製品ページ - introduction ---------- */
.product-post-introduction {
  margin-bottom: 64px;
  text-align: center;
}

@media (max-width: 768px) {
  .product-post-introduction {
    margin-bottom: calc((64 / var(--max-content-width)) * 100vw);
  }
}

.product-post-introduction p {
  font-size: clamp(1rem, calc(0.909rem + 0.39vw), 1.25rem);
  font-weight: 900;
  line-height: 1.8;
  color: var(--dark-charcoal);
}

@media (max-width: 768px) {
  .product-post-introduction p {
    text-align: left;
  }
}

.product-post-ttl {
  margin-bottom: clamp(24px, calc(1.297rem + 0.86vw), 32px);
  font-size: clamp(1.5rem, calc(1.095rem + 1.73vw), 2.5rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--navy);
}

@media (max-width: 768px) {
  .product-post-ttl {
    text-align: left;
  }
}

/* ---------- 製品 ---------- */
.product-specifications {
  margin-bottom: 8px;
}

@media (max-width: 1300px) {
  .product-specifications {
    width: 100%;
    padding-bottom: 40px;
    overflow-x: auto;
    scrollbar-color: gray #f1f1f1;
    scrollbar-height: thin;
    scrollbar-width: thin;
  }
}

.products-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  column-gap: 32px;
  margin-bottom: 72px;
  list-style: none;
}

@media (max-width: 1300px) {
  .products-list {
    justify-content: flex-start;
    column-gap: 0;
    margin-bottom: 16px;
  }
}

.products-list-item {
  max-width: 440px;
}

@media (max-width: 1300px) {
  .products-list-item {
    flex-shrink: 0;
    max-width: none;
  }
}

.products-list-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: bottom;
}

.products-list-img figcaption {
  padding-top: clamp(24px, calc(1.297rem + 0.86vw), 32px);
  border-top: 3px solid var(--navy);
  text-align: center;
}

.products-list-img span {
  display: block;
  font-size: clamp(0.875rem, calc(0.723rem + 0.65vw), 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--dark-charcoal);
}

.products-list-img strong {
  font-size: clamp(1.75rem, calc(1.319rem + 1.84vw), 2.8125rem);
  font-weight: 900;
  line-height: 1;
  color: var(--navy);
}

/* ---------- TABLE ---------- */
table.table-specification {
  width: 100%;
}

table.table-specification thead th {
  font-size: clamp(1.375rem, calc(1.299rem + 0.32vw), 1.5625rem);
  text-align: center;
  color: var(--navy);
}

table.table-specification tbody {
  border-top: 1px solid #656565;
}

table.table-specification tbody tr {
  border-bottom: 1px solid #656565;
}

table.table-specification tbody th,
table.table-specification tbody td {
  padding: clamp(8px, calc(0.297rem + 0.86vw), 16px);
  font-size: clamp(0.9375rem, calc(0.828rem + 0.37vw), 1.125rem);
  color: var(--dark-charcoal);
}

table.table-specification tbody th {
  text-align: left;
}

table.table-specification tbody th:first-child {
  padding-left: 0;
}

table.table-specification tbody td {
  text-align: center;
}

table.table-specification tbody td:nth-child(even) {
  background-color: #fff;
}

table.table-specification .col-1,
table.table-specification .col-2,
table.table-specification .col-3,
table.table-specification .col-4 {
  width: 25%;
}

@media (max-width: 1300px) {
  table.table-specification thead {
    display: none;
  }

  table.table-specification th,
  table.table-specification td {
    min-width: 264px;
  }
}

.product-specification-notes p {
  font-size: clamp(0.875rem, calc(0.774rem + 0.43vw), 1.125rem);
}

/* ---------- slider - 印字事例 ---------- */
.printing-example {
  max-width: 1920px;
  margin: auto;
}

.printing-example-item img {
  border-radius: 6px;
}

.printing-example-label {
  font-size: clamp(0.8125rem, calc(0.762rem + 0.22vw), 0.9375rem);
  font-weight: 400;
  text-align: center;
  color: var(--dark-charcoal);
}

/* ---------- FEATURE ---------- */
.feature-item {
  display: flex;
  flex-direction: row;
  column-gap: 96px;
  margin-bottom: 48px;
  padding: 40px 64px;
  background-color: #fff;
  border-bottom: 1px solid #3b97b6;
}

@media (max-width: 768px) {
  .feature-item {
    flex-direction: column;
    padding: 32px 16px;
    margin-bottom: 24px;
  }
}

.feature-txt p {
  font-size: clamp(1rem, calc(0.899rem + 0.43vw), 1.25rem);
  line-height: 1.7;
  color: var(--dark-charcoal);
}
.feature-txt p + p {
  margin-top: 20px;
}

.feature-ttl {
  margin-bottom: clamp(24px, calc(1.297rem + 0.86vw), 32px);
  font-size: clamp(1.5rem, calc(1.247rem + 1.08vw), 2.125rem);
  line-height: 1.3;
  color: var(--navy);
}

.icon-round-txt {
  display: inline-block;
  padding: 8px;
  background-color: #fff;
  border: 1px solid var(--dark-charcoal);
  border-radius: 4px;
  font-size: clamp(0.875rem, calc(0.723rem + 0.65vw), 1.25rem);
  color: var(--dark-charcoal);
}

.feature-img {
  flex-shrink: 0;
  width: 35.38%;
}

@media (max-width: 768px) {
  .feature-img {
    width: 100%;
    margin-top: 24px;
  }
}

.feature-img figure {
  margin-bottom: 16px;
}

.feature-img figure:last-child {
  margin-bottom: 0;
}

.feature-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: top;
}

/* クリックして画像を拡大 */
.click-to-scaleup,
.js-close {
  display: block;
  margin: 8px auto;
  font-size: 0.8rem;
  text-decoration: underline 1px solid var(--black);
  cursor: pointer;
  transition: color ease .3s;
}

@media (hover: hover) {

  .click-to-scaleup:hover,
  .click-to-scaleup:focus-within,
  .js-close:hover,
  .js-close:focus-within {
    color: var(--brother-blue);
  }
}

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity ease .25s, visibility ease .25s;
}

.popup.is-active {
  opacity: 1;
  visibility: visible;
}

.popup-inner {
  width: 90%;
  max-width: 960px;
  max-height: 90%;
  background-color: #fff;
  text-align: center;
  overflow-y: auto;
}

.popup-img-wrap {
  margin: 8px;
}

.popup-img-wrap img {
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: top;
}