@charset "UTF-8";

/*____________________________________________________________________________

  SITE TITLE: fascinate
  株式会社FASCINATE 専用CSS PC
____________________________________________________________________________*/

/* ============================
   Product Detail Scoped Style
   ============================ */
#xpd-root {
  --xpd-border: #e7e7ea;
  --xpd-muted: #74767a;
  --xpd-ink: #1a1a1a;
  --xpd-bg-soft: #fafafa;
  --xpd-shadow: 0 2px 12px rgba(0,0,0,.04);
  color: var(--xpd-ink);
  font-size: 14px;
  margin: 28px 0;
}

#xpd-root h2 {
  font-size: 18px;
  margin: 0 0 10px;
  color: #4a4a4a;
  letter-spacing: .02em;
}
#xpd-root h3 {
  font-size: 16px;
  margin: 18px 0 8px;
  font-weight: 700;
  letter-spacing: .01em;
}

#xpd-root .xpd-note {
  margin: -2px 0 8px;
  font-size: 12px;
  color: var(--xpd-muted);
}

/* 商品仕様 (dl) */
#xpd-root .xpd-spec {
  margin: 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--xpd-border);
  border-radius: 12px;
  box-shadow: var(--xpd-shadow);
  display: flex;
  flex-wrap: wrap;
}
#xpd-root .xpd-spec dt {
  /* float: left; */
  width: 38%;
  clear: left;
  padding: 6px 0;
  font-weight: 600;
  color: #222;
  display: flex;
  border-bottom: 1px dashed var(--xpd-border);
}
#xpd-root .xpd-spec dd {
  /* margin-left: 38%; */
  padding: 6px 0 6px 2%;
  border-bottom: 1px dashed var(--xpd-border);
  width: 60%;
}
#xpd-root .xpd-spec dd:last-of-type {/* border-bottom: none; */}

/* 商品説明（本文） */
#xpd-root #xpd-description p { line-height: 1.8; }

/* details / summary（続きを読む） */
#xpd-root .xpd-details {
  margin-top: 8px;
  border: 1px dashed var(--xpd-border);
  border-radius: 10px;
  background: var(--xpd-bg-soft);
}
#xpd-root .xpd-summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 10px 14px;
  color: #111;
  font-size: 13px;
  user-select: none;
}
#xpd-root .xpd-summary::-webkit-details-marker { display: none; }
#xpd-root .xpd-summary::after {
  content: "＋";
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 700;
}
#xpd-root .xpd-details[open] .xpd-summary::after { content: "－"; }

#xpd-root .xpd-body {
  padding: 8px 14px 12px;
  animation: xpd-fade .18s ease-out;
}
@keyframes xpd-fade {
  from { opacity:.4; transform: translateY(-2px); }
  to   { opacity:1;  transform: translateY(0); }
}

/* サイズ感（dlをリスト風に） */
#xpd-root .xpd-fit-dl {
  margin: 10px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
#xpd-root .xpd-fit-dl dt {
  font-weight: 600;
  position: relative;
  padding-left: 1.2em;
  color: #222;
  width: 38%;
  justify-content: start;
  align-items: start;
}
#xpd-root .xpd-fit-dl dt::before {
  content: "・"; /* リスト風マーカー */
  position: absolute;
  left: 0;
  color: #444;
}
#xpd-root .xpd-fit-dl dd {
  margin: 0 0 1em 2%;
  color: #555;
  line-height: 1.6;
  float: none;
  width: 60%;
}

/* 各セクション共通枠 */
#xpd-root #xpd-fit,
#xpd-root #xpd-model-notes,
#xpd-root #xpd-description {
  border: 1px solid var(--xpd-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--xpd-shadow);
  padding: 14px 16px;
  margin-top: 14px;
}

/* レスポンシブ微調整 */
@media (max-width: 560px) {
  #xpd-root .xpd-spec dt,#xpd-root .xpd-fit-dl dt { width: 100%; }
  #xpd-root .xpd-spec dd,#xpd-root .xpd-fit-dl dd { width: 100%; }
}