@charset "UTF-8";



.contact-page__hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 56px;
  padding: 90px 40px 86px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.contact-page__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-30);
  opacity: .6;
  pointer-events: none;
}
/* 背景の細いライン */
.contact-page__hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.contact-page__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

/* CONTACT */
.contact-page__eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1;
}

/* 左右のライン */
.contact-page__eyebrow::before,
.contact-page__eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

/* タイトル */
.contact-page__hero h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

/* 説明文 */
.contact-page__hero p:not(.contact-page__eyebrow) {
  max-width: 620px;
  margin: 24px auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.04em;
}


/* ========================================
   Tablet
======================================== */

@media (max-width: 768px) {

  .contact-page__hero {
    margin-bottom: 42px;
    padding: 70px 24px 66px;
  }

  .contact-page__hero h1 {
    font-size: 34px;
  }

  .contact-page__hero p:not(.contact-page__eyebrow) {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.9;
  }

}


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

@media (max-width: 500px) {

  .contact-page__hero {
    margin-bottom: 36px;
    padding: 58px 20px 56px;
  }

  .contact-page__eyebrow {
    gap: 12px;
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: 0.24em;
  }

  .contact-page__eyebrow::before,
  .contact-page__eyebrow::after {
    width: 20px;
  }

  .contact-page__hero h1 {
    font-size: 29px;
    letter-spacing: 0.1em;
  }

  .contact-page__hero p:not(.contact-page__eyebrow) {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.9;
  }

}





/* ===========================================================
   Product Detail
   Base Layout
=========================================================== */

.product-detail{
    display:grid;
    grid-template-columns:350px minmax(0,1fr);
    gap:60px;

    max-width:1100px;
    margin:60px auto 100px;
    padding: 100px 50px;

    align-items:start;
    border: 4px solid var(--color-primary-light-70);
    border-radius: 40px;
}

.product-detail>div{
    min-width:0;
}

.product-detail > div:first-child{

    position:sticky;
    top:30px;
}
/* ===========================================================
   Main Image
=========================================================== */

.product-main-image{

    display:block;

    width:100%;
    max-width:350px;

    height:350px;

    margin:0 auto;

    object-fit:contain;

    padding:28px;

    border:1px solid rgba(0,0,0,.06);
    border-radius:22px;

    background:
        radial-gradient(circle at center,
        rgba(255,255,255,.82) 0%,
        rgba(255,255,255,.18) 100%);

    box-shadow:0 15px 45px rgba(0,0,0,.06);

    transition:.35s;
}

.product-main-image:hover{

    transform:scale(1.02);
}


/* ===========================================================
   Thumbnail
=========================================================== */

.product-thumbs{

    width:350px;
    max-width:100%;

    margin:18px auto 0;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;
}

.product-thumbs img{

    width:100%;
    height:72px;

    object-fit:contain;

    padding:10px;

    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;

    background:#fff;

    cursor:pointer;

    transition:.25s;
}

.product-thumbs img:hover{

    border-color:var(--color-primary);

    transform:translateY(-3px);

    box-shadow:0 10px 30px rgba(0,0,0,.10);
}

.shop-badge{
    color: var(--color-primary);
    background-color: var(--color-text-almost-white);
    border-radius: 50px;
    padding: 3px 20px;
}

.product-header{
    margin: 8px 0 30px;
}

.product-header h1{
    margin:0 0 18px;
    font-size: 25px;
}

.product-price-area{
    text-align: right;
    padding-right: 15px;
    border-bottom: 1px solid var(--color-neutral-surface);
}

.product-price{
    color: var(--color-primary);
    font-size: 35px;
}

.product-price small{
    font-size: 15px;
    color: var(--color-neutral-surface);
}

.product-stock-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:110px;
    height:40px;
    padding:0 18px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
}

/*====================================
 商品情報カード
====================================*/

.product-spec-card{
    margin-top:32px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 14px 36px rgba(0,0,0,.05);
}

.product-spec-title{
    padding:18px 24px;
    background:#f8fafc;
    border-bottom:1px solid rgba(0,0,0,.06);
    font-size:18px;
    font-weight:700;
    color:#222;
    text-align: center;
}

.product-spec-list{
    padding:10px 24px;
}

.product-spec-item{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:24px;
    align-items:start;
    padding:18px 0;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.product-spec-item:last-child{
    border-bottom:none;
}

.product-spec-item span{
    font-size:14px;
    font-weight:600;
}

.product-spec-item strong{
    color:#222;
    font-size:15px;
    font-weight:700;
    line-height:1.8;
}

.product-spec-item small{
    display:block;
    margin-top:6px;
    color:#888;
    font-size:12px;
    font-weight:400;
}

/*====================================
 商品説明
====================================*/

.product-description-card{
    margin-top:34px;
    padding:34px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    box-shadow:0 14px 36px rgba(0,0,0,.05);
}

.product-description-card h2{
    margin:0 0 22px;
    font-size:22px;
    font-weight:700;
    color:#222;
}

.product-description-body{
    color:#555;
    line-height:2.1;
    font-size:15px;
}

/*====================================
 レスポンシブ
====================================*/

@media(max-width:768px){

    .product-spec-item{
        grid-template-columns:1fr;
        gap:6px;
    }

    .product-price-area{
        align-items:flex-start;
    }

    .product-description-card{
        padding:24px;
    }
.product-detail{
    padding: 50px 20px;
}
}
/* ===========================================================
   Stock
=========================================================== */

.product-stock{

    display:flex;

    justify-content:flex-end;
    align-items:center;

    gap:12px;

    margin-top:20px;

    font-size:15px;
}

.product-stock__label{

    color:#666;

    font-weight:600;
}

.product-stock__status{

    display:inline-flex;

    align-items:center;

    padding:5px 18px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}


/* 30個以上 */

.stock-high{

    color:#228b4e;

    background:#eaf8ef;
}


/* 10〜29個 */

.stock-middle{

    color:#c97a00;

    background:#fff3dd;
}


/* 1〜9個 */

.stock-low{

    color:#d44a4a;

    background:#ffeaea;
}


/* 売り切れ */

.stock-out{

    color:#666;

    background:#efefef;
}


/* ===========================================================
   Error
=========================================================== */

.shop-error{

    max-width:1200px;

    margin:30px auto;

    padding:18px 22px;

    border-left:5px solid #d44a4a;

    border-radius:10px;

    background:#fff3f3;

    color:#b12121;

    font-size:14px;

    line-height:1.8;
}


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

.shop-card{

    margin-top:34px;

    padding:34px;

    border:1px solid rgba(0,0,0,.06);

    border-radius:22px;

    background:#fff;

    box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.shop-card h2{

    margin:0 0 20px;

    color:#222;

    font-size:22px;

    font-weight:700;
}

.shop-muted{

    color:#888;

    font-size:13px;

    line-height:1.8;
}



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

.shop-order-notice{
    position:relative;
    overflow:hidden;
}

.shop-order-notice::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:100%;
    background:var(--color-primary);
}

.shop-order-notice h2{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
    color:#222;
    font-size:22px;
    font-weight:700;
}

.shop-order-notice h2::before{
    content:"!";
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--color-primary);
    color:#fff;
    font-size:14px;
    font-weight:700;
}

.shop-order-notice__body{
    color:#555;
    font-size:15px;
    line-height:2.1;
}


/* ===========================================================
   Form
=========================================================== */

.shop-field{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.shop-label{
    color:#222;
    font-size:15px;
    font-weight:700;
}


/* ===========================================================
   Select
=========================================================== */

.shop-field select{

    width:100%;
    max-width:220px;

    height:54px;

    padding:0 18px;

    border:1px solid rgba(0,0,0,.12);
    border-radius:12px;

    background:#fff;

    font-size:15px;

    transition:.25s;
}

.shop-field select:hover{
    border-color:var(--color-primary);
}

.shop-field select:focus{
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px var(--color-primary-10);
}


/* ===========================================================
   Cart Button
=========================================================== */

.shop-btn{

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;
    height:58px;

    margin-top:26px;

    border: 3px solid var(--color-primary);
    border-radius:14px;

    background:var(--color-primary);

    color: var(--color-text-white);

    font-size:16px;
    font-weight:700;
    letter-spacing:.06em;

    cursor:pointer;

    transition:.3s;
}

.shop-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(0,0,0,.16);
    color: var(--color-primary);
    background: var(--color-text-white);
}

.shop-btn:active{

    transform:translateY(0);
}


/* ===========================================================
   Product Info
=========================================================== */

.product-detail>div:last-child>p strong{

    color:#222;

    font-weight:700;
}


/* ===========================================================
   Download / Shipping Area
=========================================================== */

.product-detail>div:last-child>p span{

    display:block;

    color:#777;

    font-size:13px;

    line-height:1.8;
}


/* ===========================================================
   Quantity Note
=========================================================== */

.shop-field .shop-muted{

    margin-top:2px;

    color:#888;

    font-size:13px;
}


/* ===========================================================
   Image Animation
=========================================================== */

.product-main-image,
.product-thumbs img{

    user-select:none;
}

.product-thumbs img:active{

    transform:scale(.97);
}


/* ===========================================================
   Responsive
=========================================================== */

@media (max-width:1200px){

.product-detail {
    margin: 60px 20px 100px;
}

}
@media (max-width:1100px){

    .product-detail{

        gap:45px;
    }

    .product-main-image{

        height:560px;
    }

}

@media (max-width: 960px){

    .product-detail > div:first-child{
        position: static;
        top: auto;
    }

}
@media (max-width:960px){

    .product-detail{

        grid-template-columns:1fr;

        gap:40px;

        margin:45px 20px 80px;
    }

    .product-main-image{

        height:520px;
    }

    .product-detail h1{

        font-size:34px;
    }

    .product-price{

        font-size:38px;
    }

}


@media (max-width:768px){

    .product-detail{

        margin:35px 16px 70px;
    }

    .product-main-image{

        height:420px;

        padding:30px;

        border-radius:18px;
    }

    .product-thumbs{

        grid-template-columns:repeat(4,1fr);

        gap:10px;
    }

    .product-thumbs img{

        height:72px;

        padding:8px;
    }

    .product-detail h1{

        margin:14px 0 18px;

        font-size:30px;

        line-height:1.45;
    }

    .product-price{

        font-size:34px;
    }

    .product-detail>div:last-child>p{

        flex-direction:column;

        gap:4px;

        padding:14px 0;

        font-size:14px;
    }

    .shop-card{

        padding:26px;
    }

    .shop-order-notice h2{

        font-size:19px;
    }

    .shop-btn{

        height:54px;

        font-size:15px;
    }

}


@media (max-width:500px){

    .product-detail{

        margin:28px 14px 60px;

        gap:30px;
    }

    .product-main-image{

        height: 250px;

        padding:22px;
    }

    .product-thumbs{

        grid-template-columns:repeat(4,1fr);

        gap:8px;
    }

    .product-thumbs img{

        height:62px;
    }

    .shop-badge{

        font-size:10px;

        padding:5px 12px;
    }

    .product-detail h1{

        font-size:25px;
    }

    .product-price{

        font-size:30px;
    }

    .product-price small{

        font-size:12px;
    }

    .product-detail>div:last-child>div:not(.shop-card){

        margin-top: 0px;

        padding-top: 0px;

        font-size:14px;

        line-height:2;
    }

    .shop-card{

        padding:22px;

        border-radius:18px;
    }

    .shop-order-notice h2{

        font-size:18px;
    }

    .shop-order-notice__body{

        font-size:14px;

        line-height:2;
    }

    .shop-field select{

        max-width:100%;
    }

    .shop-btn{

        height:52px;

        font-size:14px;
    }

}