/* ================================================================
   style_commission.css — Live2D ご依頼ページ専用スタイル
   読み込み順: css/style.css → css/style_commission.css
   ================================================================ */



/* ─── 受付状況バナー ──────────────────────────── */
.status-banner {
  margin: 0 2.8rem 2.5rem;
  border-radius: 12px;
  padding: 1.2rem 1.8rem;
  display: flex; align-items: flex-start; gap: 1rem;
  border: 1.5px solid;
}
.status-limited {
  background: #ffffff;
  border-color: red;
}
.status-icon {
  font-size: 1.4rem; flex-shrink: 0;
  color: red; margin-top: .05rem;
}
.status-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem; letter-spacing: .18em; text-transform: uppercase;
  color: red; margin-bottom: .35rem;
}
.status-text {
  font-size: .95rem; line-height: 1.8; color: var(--text);
  color: rgb(0, 0, 0)
}
.strike-blue {
  color: blue;
  text-decoration: line-through;
}
.status-text strong { color: red; font-weight: 600; }

/* ─── セクションラベル ────────────────────────── */
.section-label {
  padding: .4rem 2.8rem 1.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text);
  display: flex; align-items: center; gap: .9rem;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ─── お問い合わせブロック ────────────────────── */
.contact-block {
  padding: 0 2.8rem 3rem;
  display: flex; flex-direction: column; gap: 1rem;
}

/* 1枚にまとめたコンタクトカード */
.contact-card-simple {
  background: var(--white);
  border: 1px solid var(--border); border-radius: 12px;
  border-left: 4px solid var(--blue);
  padding: 1.4rem 1.8rem;
}
.contact-desc {
  font-size: .95rem; line-height: 1.9; color: var(--text);
  margin-bottom: 1.1rem;
}
.contact-info-rows {
  display: flex; flex-direction: column; gap: .55rem;
}
.contact-info-row {
  display: flex; align-items: center; gap: 1rem;
}
.contact-info-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; font-weight: 600; color: var(--text);
  width: 90px; flex-shrink: 0;
}
.contact-info-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: .95rem; font-weight: 500; color: var(--text);
  overflow-wrap: anywhere; 
  min-width: 0;
}

/* ─── 受付・お断りグリッド ────────────────────── */
.accept-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; padding: 0 2.8rem 3rem;
}
.accept-col {
  border-radius: 14px; overflow: hidden;
  background: var(--white);
  border: 1.5px solid var(--border);
  /* 左の太線アクセント */
  border-left-width: 5px;
}
.accept-ok { border-left-color: #2ecc87; }
.accept-ng { border-left-color: #ff4f4f; }

.accept-col-header {
  padding: 1rem 1.4rem .9rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
}
.accept-ok .accept-col-header { background: #f0faf6; border-bottom-color: #c3eed9; }
.accept-ng .accept-col-header { background: #fff5f5; border-bottom-color: #ffd0d0; }

/* 大きな○✕マーク（1個だけ） */
.accept-mark-large {
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.accept-mark-large.ok { color: #2ecc87; }
.accept-mark-large.ng { color: #ff4f4f; }

.accept-col-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .95rem; font-weight: 600; color: var(--text);
}

.accept-list {
  list-style: none; padding: 1rem 1.4rem 1.2rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.accept-list li {
  font-size: .92rem; font-weight: 500; color: var(--text);
  line-height: 1.4;
}
.accept-list li p {
  font-size: .8rem; color: var(--muted);
  line-height: 1.6; margin-top: .18rem; font-weight: 400;
}

/* ─── 区切り線 ────────────────────────────────── */
.divider {
  margin: 0 2.8rem 3rem;
  display: flex; align-items: center; gap: 1.2rem;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.divider-inner {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text);
  display: flex; align-items: center; gap: .5rem;
}
.divider-inner::before { content: '◈'; font-size: .8rem; color: var(--blue); }

/* ─── 詳細セクション ──────────────────────────── */
.detail-section {
  padding: 0 2.8rem 4rem;
  display: flex; flex-direction: column; gap: 16px;
}
.detail-card {
  background: var(--white);
  border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden;
}
.detail-card-caution {
  border-color: #ffd0a0;
  background: #fffbf5;
}
.detail-card-header {
  padding: 1rem 1.6rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
  background: #fafbff;
}
.detail-card-caution .detail-card-header {
  background: #fff5e6; border-bottom-color: #ffd0a0;
}
.detail-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .9rem; font-weight: 600; flex-shrink: 0;
}
.caution-icon { background: #e67e22; }
.detail-card-header h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-weight: 600; color: var(--text);
}
.detail-card-body {
  padding: 1.4rem 1.8rem;
}
.detail-card-body > p {
  font-size: .92rem; line-height: 1.85; color: var(--text);
  margin-bottom: 1rem;
}
.detail-note {
  font-size: 1rem; color: #ff0000;
  margin-top: .6rem;
}

/* 料金テーブル */
.price-table {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin-bottom: 1.4rem;
}
.price-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.2rem; gap: 1rem;
  border-bottom: 1px solid var(--border);
}
.price-row:last-child { border-bottom: none; }
.price-row:nth-child(even) { background: #fafbff; }
.price-label { font-size: .9rem; color: var(--text); }
.price-label p{ font-size: .9rem; color: var(--muted); }
.price-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem; font-weight: 600;
  color: var(--blue); white-space: nowrap;
}

/* 支払いブロック */
.payment-block {
  border-top: 1px solid var(--border);
  padding-top: 1.2rem; margin-top: .2rem;
}
.payment-block img{
  max-width: 100%;
  height: auto;
}
.payment-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .88rem; font-weight: 600; color: var(--text);
  margin-bottom: .7rem;
}

/* リスト */
.detail-list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.detail-list li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .92rem; line-height: 1.7; color: var(--muted);
}
.detail-list li::before {
  content: '▸';
  color: var(--blue); font-size: .75rem;
  flex-shrink: 0; margin-top: .28rem;
}

/* フロー */
.flow-list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 1.6rem;
}
.flow-list li {
  display: flex; gap: 1.2rem;
  padding-bottom: 1.4rem;
  position: relative;
}
.flow-list li:last-child { padding-bottom: 0; }
.flow-list li:not(:last-child)::before {
  content: '';
  position: absolute; left: 19px; top: 40px;
  width: 2px; height: calc(100% - 28px);
  background: var(--border);
}
.flow-num {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 600;
  position: relative; z-index: 1;
}
.flow-content strong {
  display: block; font-size: .95rem; font-weight: 600;
  color: var(--text); margin-bottom: .2rem; margin-top: .55rem;
}
.flow-content p {
  font-size: .85rem; color: var(--muted); line-height: 1.7;
}

/* ご用意いただきたい内容 */
.inquiry-checklist {
  border-top: 1px solid var(--border);
  padding-top: 1.3rem;
}
.inquiry-checklist-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: .95rem; font-weight: 700; color: var(--text);
  margin-bottom: .8rem;
}
.inquiry-list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: .45rem;
}
.inquiry-list li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .9rem; line-height: 1.7; color: var(--text);
}
.inqury-details {
  color: var(--muted);
  font-size: 0.85rem; 
}
.inquiry-list li::before {
  content: '□';
  color: var(--blue); font-size: .8rem;
  flex-shrink: 0; margin-top: .2rem;
}

/* ─── レスポンシブ ────────────────────────────── */
@media (max-width: 768px) {
  .page-hero        { padding: 2rem 1rem 1.5rem; }
  .status-banner    { margin: 0 1rem 2rem; }
  .section-label    { padding: .4rem 1rem 1rem; }
  .contact-block    { padding: 0 1rem 2rem; }
  .accept-grid      { grid-template-columns: 1fr; padding: 0 1rem 2rem; }
  .divider          { margin: 0 1rem 2rem; }
  .detail-section   { padding: 0 1rem 3rem; }
  .contact-info-label { width: 80px; }

  .price-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .price-value {
    width: 100%;
    text-align: left;
    margin-top: 4px;
  }
}