@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;
}

/* ガイド（アコーディオン） */
#xpd-root #xpd-guide {
  border: 1px solid var(--xpd-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--xpd-shadow);
  margin-top: 14px;
  overflow: hidden;
}
#xpd-root #xpd-guide .xpd-guide-block {
  margin: 0;
  padding: 0;
}
#xpd-root #xpd-guide .xpd-accordion {
  border-bottom: 1px solid var(--xpd-border);
  margin: 0;
}
#xpd-root #xpd-guide .xpd-accordion-summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 14px 44px 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
#xpd-root #xpd-guide .xpd-accordion-summary::-webkit-details-marker { display: none; }
#xpd-root #xpd-guide .xpd-accordion-summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 16px;
}
#xpd-root #xpd-guide .xpd-accordion[open] .xpd-accordion-summary::after { content: "−"; }
#xpd-root #xpd-guide .xpd-accordion-body {
  border-top: 1px solid var(--xpd-border);
  padding: 12px 16px 16px;
  line-height: 1.8;
  color: #4a4a4a;
  background: var(--xpd-bg-soft);
  animation: xpd-fade .18s ease-out;
}
#xpd-root #xpd-guide p { margin: 0; }


/* レスポンシブ微調整 */
@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%; }
}

/* スタッフのサイズ選び */
#xpd-root #xpd-staff {
  border: 1px solid var(--xpd-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--xpd-shadow);
  padding: 14px 16px;
  margin-top: 14px;
}
#xpd-root #xpd-staff p { margin: 0; line-height: 1.8; }
#xpd-root #xpd-staff .xpd-note { margin: 6px 0 0; color: #4a4a4a; line-height: 1.7; }
#xpd-root .xpd-staff-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--xpd-border);
}
#xpd-root .xpd-staff-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px dashed var(--xpd-border);
  list-style: none;
}
#xpd-root .xpd-staff-ico { flex: 0 0 auto; display: block; width: 44px; height: 44px; max-width: none; margin: 0; border-radius: 50%; object-fit: cover; }
#xpd-root .xpd-staff-who { flex: 1 1 auto; min-width: 0; line-height: 1.55; }
#xpd-root .xpd-staff-who strong { display: block; font-size: 14px; font-weight: 600; color: #222; }
#xpd-root .xpd-staff-who span { display: block; font-size: 12px; color: #4a4a4a; }
#xpd-root .xpd-staff-ph { font-style: normal; white-space: nowrap; }
#xpd-root .xpd-staff-size {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
#xpd-root .xpd-staff-size strong { display: block; font-size: 22px; font-weight: 600; color: #1a1a1a; }
#xpd-root .xpd-staff-size span { display: block; margin-top: 2px; font-size: 11px; color: #4a4a4a; white-space: nowrap; }
#xpd-root .xpd-staff-chg .xpd-staff-size span { color: #8a3a12; font-weight: 600; }
#xpd-root #xpd-staff .xpd-details { margin-top: 12px; }
#xpd-root .xpd-staff-voice { padding: 12px 0 14px; border-bottom: 1px dashed var(--xpd-border); }
#xpd-root .xpd-staff-voice:last-child { border-bottom: none; padding-bottom: 4px; }
#xpd-root #xpd-staff .xpd-staff-voice-h { font-size: 14px; color: #222; }
#xpd-root .xpd-staff-voice-h strong { font-weight: 600; margin-right: .6em; }
#xpd-root .xpd-staff-meas {
  display: flex;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid var(--xpd-border);
  border-radius: 8px;
  background: #fff;
  font-variant-numeric: tabular-nums;
}
#xpd-root .xpd-staff-meas div { flex: 1 1 0; padding: 5px 0 4px; text-align: center; }
#xpd-root .xpd-staff-meas div + div { border-left: 1px solid var(--xpd-border); }
#xpd-root .xpd-staff-meas dt,
#xpd-root .xpd-staff-meas dd { display: block; float: none; width: auto; }
#xpd-root .xpd-staff-meas dt { margin: 0; font-size: 11px; line-height: 1.4; color: #4a4a4a; }
#xpd-root .xpd-staff-meas dd { margin: 0; font-size: 14px; line-height: 1.5; color: #1a1a1a; }
#xpd-root #xpd-staff .xpd-staff-feat { margin-top: 8px; font-size: 13px; }
#xpd-root #xpd-staff .xpd-staff-usual { margin-top: 4px; font-size: 12px; color: #4a4a4a; line-height: 1.7; }
#xpd-root #xpd-staff .xpd-staff-say {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--xpd-border);
  font-size: 13px;
  line-height: 1.85;
}
#xpd-root .xpd-staff-links { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--xpd-border); }
#xpd-root .xpd-staff-links li { margin: 0; list-style: none; border-bottom: 1px solid var(--xpd-border); }
#xpd-root .xpd-staff-links li:last-child { border-bottom: none; }
#xpd-root .xpd-staff-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  color: #1a1a1a;
  font-size: 13px;
  text-decoration: none;
}
#xpd-root .xpd-staff-links a::after { content: "\203A"; margin-left: 12px; font-size: 18px; line-height: 1; }
#xpd-root .xpd-staff-links a:hover { text-decoration: underline; }