@charset "UTF-8";

html{
    scroll-behavior:smooth;
}

.products-main{
    background:linear-gradient(180deg,#f7f8fa 0%,#e4e6eb 100%);
    text-align:left;
}


.products-content{
    padding:70px 20px 100px;
}

.products-layout{
    width:min(1480px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:34px;
    align-items:start;
}

.product-sidebar{
    position:sticky;
    top:96px;
    max-height:calc(100vh - 120px);
    overflow:hidden;
    border:1px solid rgba(0,64,152,.18);
    border-radius:4px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 44px rgba(16,20,28,.10);
}

.product-sidebar-title{
    display:block;
    width:100%;
    margin:0;
    padding:22px 18px;
    border:0;
    background:#004098;
    color:#fff;
    font:inherit;
    font-size:1.8rem;
    font-weight:700;
    text-align:center;
    letter-spacing:.12em;
}

.product-sidebar-title-sub{
    display:none;
}

.product-sidebar-scroll{
    max-height:calc(100vh - 190px);
    overflow:auto;
    padding:12px;
}

.product-sidebar-group + .product-sidebar-group{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid #e2e7ef;
}

.product-sidebar-category,
.product-sidebar-link{
    display:block;
    text-decoration:none;
    border-radius:2px;
    transition:.2s ease;
}

.product-sidebar-category{
    padding:11px 10px;
    color:#004098;
    font-size:1.3rem;
    font-weight:700;
    line-height:1.55;
    background:#eef3f9;
}

.product-sidebar-link{
    margin-top:5px;
    padding:8px 10px;
    color:#333;
    font-size:1.25rem;
    line-height:1.45;
}

.product-sidebar-link:hover,
.product-sidebar-link.is-current{
    background:#004098;
    color:#fff;
}

.products-detail-list{
    min-width:0;
}

.product-category-section{
    scroll-margin-top:100px;
    margin-bottom:80px;
}

.section-heading{
    margin-bottom:28px;
    text-align:left;
}

.section-label{
    display:inline-block;
    margin-bottom:10px;
    color:#007bff;
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:.22em;
}

.section-heading h2{
    margin:0 0 12px;
    color:#004098;
    font-size:clamp(2.5rem,3.2vw,3.8rem);
    line-height:1.35;
    letter-spacing:.08em;
}

.section-heading p{
    margin:0;
    color:#555;
    font-size:1.5rem;
    line-height:1.9;
}

.product-detail-card{
    scroll-margin-top:110px;
    display:grid;
    grid-template-columns:minmax(420px,1.35fr) minmax(320px,.85fr);
    gap:36px;
    align-items:start;
    margin-bottom:34px;
    padding:34px;
    border-radius:4px;
    background:#fff;
    border:1px solid #dfe3ea;
    box-shadow:0 18px 48px rgba(16,20,28,.10);
}

.product-gallery-area{
    min-width:0;
}

.product-main-image{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    aspect-ratio:4 / 3;

    padding:16px;
    border:1px solid #e2e7ef;
    border-radius:2px;
    background:linear-gradient(135deg,#fbfcfe,#eef3f9);
}


.product-main-image img{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
}

.product-thumbnail-list{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.product-thumb-btn{
    padding:8px;
    border:1px solid #dde5f0;
    border-radius:2px;
    background:#fff;
    cursor:pointer;
    text-align:center;
    transition:.2s ease;
}

.product-thumb-btn:hover,
.product-thumb-btn.is-active{
    border-color:#004098;
    box-shadow:inset 0 -3px 0 #004098,0 8px 18px rgba(0,64,152,.12);
}

.product-thumb-btn img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:contain;
    background:#f5f7fb;
    border-radius:0;
}

.product-thumb-btn span{
    display:block;
    margin-top:6px;
    color:#333;
    font-size:1.1rem;
    line-height:1.3;
}

.product-info-area{
    min-width:0;
}

.product-category-name{
    margin:0 0 8px;
    color:#007bff;
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:.12em;
}

.product-info-area h3{
    margin:0 0 14px;
    color:#222;
    font-size:clamp(2.2rem,2.5vw,3.1rem);
    line-height:1.45;
    letter-spacing:.04em;
}

.product-lead{
    margin:0 0 20px;
    color:#333;
    font-size:1.5rem;
    line-height:1.9;
    font-weight:700;
}

.product-spec-table{
    width:100%;
    border-collapse:collapse;
    margin:0 0 22px;
}

.product-spec-table th,
.product-spec-table td{
    padding:14px 0;
    border-top:1px solid #e4eaf2;
    font-size:1.4rem;
    line-height:1.7;
    vertical-align:top;
}

.product-spec-table th{
    width:120px;
    padding-right:18px;
    color:#004098;
    font-weight:700;
    text-align:left;
    white-space:nowrap;
}

.product-spec-table td{
    color:#333;
}

.product-code-list{
    padding:18px;
    border-radius:2px;
    background:#f7f9fc;
    border-left:4px solid #004098;
}

.product-code-list p{
    margin:0 0 8px;
    color:#222;
    font-size:1.4rem;
    font-weight:700;
}

.product-code-list ul{
    margin:0;
    padding-left:1.2em;
}

.product-code-list li{
    color:#333;
    font-size:1.3rem;
    line-height:1.7;
}

.products-contact-box{
    margin-top:30px;
    padding:48px 30px;
    border-radius:4px;
    background:linear-gradient(135deg,#161a22,#004098 58%,#007bff);
    color:#fff;
    text-align:center;
    box-shadow:0 16px 44px rgba(0,64,152,.22);
}

.products-contact-box h2{
    margin:0 0 14px;
    font-size:clamp(2.4rem,4vw,3.4rem);
    line-height:1.4;
    letter-spacing:.06em;
}

.products-contact-box p{
    margin:0 0 26px;
    font-size:1.5rem;
    line-height:1.9;
}


.template-info-box{
    max-width:760px;
    margin:0 auto 28px;
    padding:20px 24px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:4px;
    background:rgba(255,255,255,.12);
    text-align:center;
}

.template-info-title{
    margin:0 0 8px;
    font-size:1.7rem;
    font-weight:700;
    line-height:1.6;
    letter-spacing:.06em;
}

.template-info-text{
    margin:0;
    font-size:1.45rem;
    line-height:1.9;
}

.products-contact-box a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:230px;
    min-height:52px;
    padding:12px 28px;
    border-radius:2px;
    background:#fff;
    color:#004098;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:.08em;
    text-decoration:none;
    transition:.25s ease;
}

.products-contact-box a:hover{
    transform:translateY(-2px);
    opacity:.86;
}


/* sharp / stylish refinement */
.section-heading{
    position:relative;
    padding-left:18px;
    border-left:4px solid #004098;
}

.section-label{
    position:relative;
    padding-bottom:6px;
}

.section-label::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:44px;
    height:2px;
    background:#007bff;
}

.product-detail-card{
    display:grid;
    grid-template-columns:minmax(320px,0.9fr) minmax(500px,1.1fr);
    gap:36px;
    align-items:start;
}

.product-detail-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#004098,#007bff,transparent 68%);
}

.product-sidebar-category{
    border-left:3px solid #004098;
}

.product-sidebar-link:hover,
.product-sidebar-link.is-current{
    border-left:3px solid #007bff;
}

.product-info-area h3{
    padding-bottom:14px;
    border-bottom:1px solid #dfe3ea;
}

@media (max-width:1200px){
    .products-layout{
        grid-template-columns:210px minmax(0,1fr);
        gap:24px;
    }

    .product-detail-card{
        grid-template-columns:1fr;
    }

    .product-main-image{
        min-height:360px;
    }
}

@media (max-width:900px){
    .products-content{
        padding:56px 16px 80px;
    }

    .products-layout{
        display:block;
    }

    .product-sidebar{
        position:sticky;
        top:70px;
        z-index:10;
        width:100%;
        max-height:none;
        margin-bottom:24px;
        overflow:visible;
        border-radius:8px;
        box-shadow:0 12px 34px rgba(16,20,28,.16);
    }

    .product-sidebar-title{
        position:relative;
        min-height:58px;
        padding:12px 52px 12px 18px;
        border-radius:8px;
        font-size:1.6rem;
        text-align:left;
        cursor:pointer;
        letter-spacing:.08em;
    }

    .product-sidebar-title::after{
        content:"";
        position:absolute;
        right:20px;
        top:50%;
        width:10px;
        height:10px;
        border-right:2px solid #fff;
        border-bottom:2px solid #fff;
        transform:translateY(-65%) rotate(45deg);
        transition:transform .2s ease;
    }

    .product-sidebar.is-open .product-sidebar-title{
        border-radius:8px 8px 0 0;
    }

    .product-sidebar.is-open .product-sidebar-title::after{
        transform:translateY(-35%) rotate(225deg);
    }

    .product-sidebar-title-sub{
        display:block;
        margin-top:3px;
        font-size:1.1rem;
        font-weight:500;
        line-height:1.4;
        letter-spacing:.04em;
        opacity:.86;
    }

    .product-sidebar-scroll{
        display:none;
        max-height:min(58vh,460px);
        overflow:auto;
        padding:12px;
        border:1px solid rgba(0,64,152,.18);
        border-top:0;
        border-radius:0 0 8px 8px;
        background:#fff;
        -webkit-overflow-scrolling:touch;
    }

    .product-sidebar.is-open .product-sidebar-scroll{
        display:block;
    }

    .product-sidebar-group{
        display:block;
    }

    .product-sidebar-group + .product-sidebar-group{
        margin-top:12px;
        padding-top:12px;
        border-top:1px solid #e2e7ef;
    }

    .product-sidebar-category,
    .product-sidebar-link{
        margin-top:0;
        white-space:normal;
        border-radius:6px;
    }

    .product-sidebar-category{
        padding:12px 12px;
        background:#eef3f9;
        color:#004098;
        font-size:1.35rem;
    }

    .product-sidebar-link{
        position:relative;
        margin-top:6px;
        padding:11px 12px 11px 28px;
        border:1px solid #e3e9f2;
        background:#fff;
        font-size:1.3rem;
    }

    .product-sidebar-link::before{
        content:"";
        position:absolute;
        left:13px;
        top:50%;
        width:5px;
        height:5px;
        border-radius:50%;
        background:#007bff;
        transform:translateY(-50%);
    }

    .product-sidebar-link:hover,
    .product-sidebar-link.is-current{
        border-left:1px solid #004098;
        background:#004098;
        color:#fff;
    }

    .product-sidebar-link:hover::before,
    .product-sidebar-link.is-current::before{
        background:#fff;
    }

    .product-category-section,
    .product-detail-card{
        scroll-margin-top:145px;
    }

    .product-detail-card{
        padding:24px;
        border-radius:4px;
    }

    .product-thumbnail-list{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media (max-width:600px){

    .products-content{
        padding:44px 12px 64px;
    }

    .product-detail-card{
        padding:16px;
        gap:20px;
        border-radius:4px;
    }

    .product-main-image{
        min-height:260px;
        padding:14px;
        border-radius:2px;
    }

    .product-thumbnail-list{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:9px;
    }

    .product-thumb-btn{
        padding:6px;
        border-radius:2px;
    }

    .product-thumb-btn span{
        font-size:1rem;
    }

    .product-spec-table,
    .product-spec-table tbody,
    .product-spec-table tr,
    .product-spec-table th,
    .product-spec-table td{
        display:block;
        width:100%;
    }

    .product-spec-table tr{
        padding:12px 0;
        border-top:1px solid #e4eaf2;
    }

    .product-spec-table th,
    .product-spec-table td{
        padding:0;
        border-top:0;
    }

    .product-spec-table th{
        margin-bottom:4px;
    }

    .products-contact-box{
        padding:36px 18px;
        border-radius:4px;
    }

    .template-info-box{
        padding:18px 16px;
        text-align:center;
    }

    .template-info-title{
        font-size:1.55rem;
    }

    .template-info-text{
        font-size:1.35rem;
    }
}



/* cover sample images */
.product-cover-samples{
    margin:0 0 22px;
    padding:18px;
    border:1px solid #dfe6f0;
    border-radius:3px;
    background:linear-gradient(180deg,#fff,#f7f9fc);
}

.product-cover-samples-title{
    margin:0 0 14px;
    color:#004098;
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:.06em;
}

.product-cover-sample-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
    gap:14px;
    margin:0;
    padding:0;
    list-style:none;
}

.product-cover-sample-item{
    min-width:0;
}

.product-cover-sample-item figure{
    height:100%;
    margin:0;
    padding:10px;
    border:1px solid #e4eaf2;
    border-radius:3px;
    background:#fff;
    box-shadow:0 8px 18px rgba(16,20,28,.06);
}

.product-cover-sample-item img{
    display:block;
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:contain;
    border:1px solid #eef2f7;
    border-radius:2px;
    background:#f5f7fb;
}

.product-cover-sample-item figcaption{
    margin-top:8px;
    color:#333;
    font-size:1.2rem;
    line-height:1.35;
    font-weight:700;
    text-align:center;
}

.product-cover-samples-note{
    margin:12px 0 0;
    color:#666;
    font-size:1.15rem;
    line-height:1.6;
}

.product-cover-samples-note code{
    padding:0 .3em;
    border-radius:2px;
    background:#eef3f9;
    color:#004098;
    font-family:Consolas,Menlo,monospace;
}

@media (max-width:600px){
    .product-cover-samples{
        padding:14px;
    }

    .product-cover-sample-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .product-cover-sample-item figure{
        padding:8px;
    }

    .product-cover-sample-item figcaption{
        font-size:1.1rem;
    }
}


/* layout update: main image only + cover samples below image */
.product-gallery-area .product-cover-samples{
    margin-top:18px;
    margin-bottom:0;
}
.product-thumbnail-list{
    display:none;
}


/* grouped product variants */
.product-info-area--grouped .product-group-title{
    margin:0 0 18px;
    color:#222;
    font-size:clamp(2.2rem,2.5vw,3.1rem);
    line-height:1.45;
    letter-spacing:.04em;
    padding-bottom:14px;
    border-bottom:1px solid #dfe3ea;
}

.product-info-area--grouped .product-variant{
    padding:0 0 24px;
    margin:0 0 24px;
    border-bottom:1px solid #e4eaf2;
}

.product-info-area--grouped .product-variant:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}

.product-variant-title{
    margin:0 0 12px;
    color:#004098;
    font-size:2rem;
    line-height:1.45;
    letter-spacing:.04em;
}

.product-info-area--grouped .product-lead{
    margin-bottom:16px;
}

.product-info-area--grouped .product-spec-table{
    margin-bottom:16px;
}

.product-info-area--grouped .product-code-list{
    margin-top:0;
}

.product-info-area--grouped .product-code-list li:nth-child(2){
    display:none;
}


/* ==========================================
   商品画像モーダル：矢印・ドットナビ・フリック対応
========================================== */
.product-cover-sample-item img {
  cursor: zoom-in;
  transition: opacity .2s ease, transform .2s ease;
}

.product-cover-sample-item img:hover {
  opacity: .86;
  transform: translateY(-1px);
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .82);
}

.image-lightbox.is-open {
  display: flex;
}

.image-lightbox__inner {
  position: relative;
  width: min(980px, 92vw);
  max-height: 90vh;
}

.image-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(72vh, 720px);
}

.image-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  user-select: none;
  -webkit-user-drag: none;
}

.image-lightbox__caption {
  margin: 12px 0 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .06em;
}

.image-lightbox__counter {
  margin: 4px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  text-align: center;
}

.image-lightbox__close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.image-lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #004098;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  transition: opacity .2s ease, transform .2s ease;
}

.image-lightbox__nav:hover {
  opacity: .86;
  transform: translateY(-50%) scale(1.04);
}

.image-lightbox__nav--prev { left: -24px; }
.image-lightbox__nav--next { right: -24px; }

.image-lightbox__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
}

.image-lightbox__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.image-lightbox__dot.is-active {
  background: #fff;
}

.image-lightbox.is-single .image-lightbox__nav,
.image-lightbox.is-single .image-lightbox__dots,
.image-lightbox.is-single .image-lightbox__counter {
  display: none;
}

@media (max-width: 768px) {
  .image-lightbox {
    padding: 16px;
  }

  .image-lightbox__inner {
    width: 94vw;
  }

  .image-lightbox__stage {
    min-height: 62vh;
  }

  .image-lightbox__img {
    max-height: 68vh;
  }

  .image-lightbox__close {
    top: -42px;
  }

  .image-lightbox__nav {
    width: 42px;
    height: 42px;
    font-size: 26px;
  }

  .image-lightbox__nav--prev { left: 4px; }
  .image-lightbox__nav--next { right: 4px; }
}