/**
 * pas-article.css — Pastorale32 Salon 記事専用デザインシステム
 *
 * 設計思想:
 *   - mg-edition（crevia-ts.com）と同じ「テーマ干渉ゼロ」原則
 *   - .pas-article > 配下にスコープ固定（specificity で固定・!important 最小限）
 *   - 深紅 #C8101A メイン + 明朝 + 高級感（Pastorale32 サイト調 ）
 *
 * 設置:
 *   wp-content/themes/{theme}/css/pas-article.css にアップロード
 *   functions.php か single.php で wp_enqueue_style して全記事ページで読込
 *
 * 命名規則:
 *   .pas-{block} / .pas-{block}__{element} / .pas-{block}--{modifier}
 *
 * 2026-05-01 初版 / シオン書込
 */

/* === Web Font 読込 === */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Marcellus&display=swap');

/* === CSS 変数（color / typography 一元管理） === */
.pas-article {
  --pas-red:        #C8101A;
  --pas-red-dark:   #8B0D15;
  --pas-red-light:  #DC1A28;
  --pas-gold:       #C9A961;
  --pas-gold-soft:  #E5D4A4;
  --pas-bg:         #FFFFFF;
  --pas-bg-soft:    #FAF7F2;
  --pas-text:       #2A2A2A;
  --pas-text-soft:  #5C5C5C;
  --pas-line:       #E5DDD3;
  --pas-line-soft:  #F2EDE6;

  --pas-font-serif: "Noto Serif JP", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", serif;
  --pas-font-deco:  "Marcellus", "Noto Serif JP", serif;

  --pas-radius:    6px;
  --pas-radius-lg: 12px;
  --pas-shadow:    0 2px 8px rgba(40, 20, 20, 0.08);
  --pas-shadow-lg: 0 4px 16px rgba(40, 20, 20, 0.12);

  /* スコープ確立 */
  font-family:    var(--pas-font-serif);
  color:          var(--pas-text);
  line-height:    1.85;
  font-size:      16px;
  letter-spacing: 0.02em;
  background:     var(--pas-bg);
  max-width:      720px;
  margin:         0 auto;
  padding:        24px 20px 80px;
  word-break:     break-word;
}

/* === 見出し === */
.pas-article h1,
.pas-article > h2,
.pas-article > h3,
.pas-article > h4 {
  font-family:    var(--pas-font-serif);
  color:          var(--pas-text);
  line-height:    1.5;
  font-weight:    600;
  letter-spacing: 0.04em;
}

.pas-article h1 {
  font-size:      1.75rem;
  text-align:     center;
  margin:         24px 0 32px;
  padding-bottom: 24px;
  border-bottom:  1px solid var(--pas-line);
}

.pas-article > h2 {
  font-size:    1.45rem;
  margin:       48px 0 20px;
  padding:      14px 0 14px 18px;
  position:     relative;
  border-left:  4px solid var(--pas-red);
  background:   var(--pas-bg-soft);
}

.pas-article > h3 {
  font-size:     1.2rem;
  margin:        32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--pas-gold-soft);
}

.pas-article > h4 {
  font-size: 1.05rem;
  margin:    24px 0 12px;
  color:     var(--pas-red-dark);
}

.pas-article > h2::before {
  content:        "";
  position:       absolute;
  left:           -4px;
  top:            -2px;
  bottom:         -2px;
  width:          4px;
  background:     linear-gradient(180deg, var(--pas-red-light) 0%, var(--pas-red) 50%, var(--pas-red-dark) 100%);
}

/* === 段落 === */
.pas-article > p {
  margin: 0 0 1.4em;
  color:  var(--pas-text);
}

.pas-article > p strong {
  color:       var(--pas-red-dark);
  font-weight: 600;
}

/* === リスト === */
.pas-article > ul,
.pas-article > ol {
  margin:        16px 0 24px;
  padding-left:  1.5em;
}

.pas-article > ul > li,
.pas-article > ol > li {
  margin-bottom: 8px;
  line-height:   1.85;
}

.pas-article > ul > li::marker {
  color: var(--pas-gold);
}

.pas-article > ol > li::marker {
  color:       var(--pas-red);
  font-weight: 600;
}

/* === リンク === */
.pas-article a {
  color:           var(--pas-red-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition:      color .15s;
}

.pas-article a:hover {
  color: var(--pas-red);
}

/* === 引用 === */
.pas-article blockquote {
  margin:      24px 0;
  padding:     20px 24px;
  background:  var(--pas-bg-soft);
  border-left: 4px solid var(--pas-gold);
  font-style:  italic;
  color:       var(--pas-text-soft);
}

/* === 画像 === */
.pas-article img {
  max-width:    100%;
  height:       auto;
  border-radius: var(--pas-radius);
  display:      block;
  margin:       24px auto;
}

/* === コールアウト（注意・補足・ヒント） === */
.pas-callout {
  margin:        28px 0;
  padding:       20px 24px;
  background:    var(--pas-bg-soft);
  border-left:   4px solid var(--pas-gold);
  border-radius: 0 var(--pas-radius) var(--pas-radius) 0;
}

.pas-callout__title {
  font-weight:    600;
  color:          var(--pas-red-dark);
  margin:         0 0 8px;
  font-size:      1rem;
  display:        flex;
  align-items:    center;
  gap:            8px;
}

.pas-callout__title::before { content: "💡"; }

.pas-callout__body {
  margin:       0;
  font-size:    0.95rem;
  line-height:  1.75;
}

.pas-callout--note    { border-left-color: var(--pas-gold); }
.pas-callout--note .pas-callout__title::before { content: "📝"; }

.pas-callout--warning { border-left-color: var(--pas-red); background: #FFF5F5; }
.pas-callout--warning .pas-callout__title { color: var(--pas-red); }
.pas-callout--warning .pas-callout__title::before { content: "⚠"; }

/* === カード（情報ブロック） === */
.pas-card {
  margin:        28px 0;
  padding:       24px 28px;
  background:    var(--pas-bg);
  border:        1px solid var(--pas-line);
  border-radius: var(--pas-radius-lg);
  box-shadow:    var(--pas-shadow);
}

.pas-card__title {
  margin:        0 0 12px;
  font-size:     1.1rem;
  font-weight:   600;
  color:         var(--pas-red-dark);
  font-family:   var(--pas-font-serif);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--pas-line-soft);
}

.pas-card__body {
  margin:    0;
  font-size: 0.95rem;
  line-height: 1.8;
}

.pas-card-grid {
  display:        grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:            16px;
  margin:         28px 0;
}

.pas-card-grid > .pas-card {
  margin: 0;
}

/* === ステップ表示 === */
.pas-step {
  display:        grid;
  grid-template-columns: 56px 1fr;
  gap:            18px;
  align-items:    flex-start;
  padding:        20px 0;
  border-bottom:  1px dashed var(--pas-line);
}

.pas-step:last-child {
  border-bottom: none;
}

.pas-step__num {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  background:      linear-gradient(135deg, var(--pas-red-light) 0%, var(--pas-red) 50%, var(--pas-red-dark) 100%);
  color:           #fff;
  font-family:     var(--pas-font-deco);
  font-size:       1.4rem;
  font-weight:     400;
  border-radius:   50%;
  box-shadow:      var(--pas-shadow);
  flex-shrink:     0;
}

.pas-step__body {
  margin: 0;
}

.pas-step__title {
  margin:      0 0 6px;
  font-size:   1.05rem;
  font-weight: 600;
  color:       var(--pas-text);
}

.pas-step__desc {
  margin:    0;
  font-size: 0.95rem;
  color:     var(--pas-text-soft);
  line-height: 1.75;
}

/* === FAQ === */
.pas-faq {
  margin:        28px 0;
  border:        1px solid var(--pas-line);
  border-radius: var(--pas-radius-lg);
  overflow:      hidden;
}

.pas-faq__item {
  border-bottom: 1px solid var(--pas-line);
}

.pas-faq__item:last-child {
  border-bottom: none;
}

.pas-faq__q {
  padding:     16px 20px;
  background:  var(--pas-bg-soft);
  font-weight: 600;
  color:       var(--pas-red-dark);
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin:      0;
  font-size:   1rem;
}

.pas-faq__q::before {
  content:     "Q.";
  font-family: var(--pas-font-deco);
  color:       var(--pas-red);
  font-size:   1.1rem;
  flex-shrink: 0;
}

.pas-faq__a {
  padding:     16px 20px;
  background:  var(--pas-bg);
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  margin:      0;
  font-size:   0.95rem;
  line-height: 1.85;
}

.pas-faq__a::before {
  content:     "A.";
  font-family: var(--pas-font-deco);
  color:       var(--pas-gold);
  font-size:   1.1rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* === CTA（記事末尾の予約・LP 誘導） === */
.pas-cta {
  margin:        48px 0 32px;
  padding:       32px 28px;
  background:    linear-gradient(135deg, #FAF7F2 0%, #F2EDE6 100%);
  border:        1px solid var(--pas-gold-soft);
  border-radius: var(--pas-radius-lg);
  text-align:    center;
  box-shadow:    var(--pas-shadow);
  position:      relative;
  overflow:      hidden;
}

.pas-cta::before {
  content:    "";
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     3px;
  background: linear-gradient(90deg, var(--pas-red-dark) 0%, var(--pas-red) 50%, var(--pas-red-light) 100%);
}

.pas-cta__lead {
  margin:      0 0 18px;
  font-size:   1.1rem;
  font-weight: 600;
  color:       var(--pas-text);
  line-height: 1.6;
}

.pas-cta__button {
  display:         inline-block;
  padding:         14px 36px;
  background:      linear-gradient(135deg, var(--pas-red-light) 0%, var(--pas-red) 50%, var(--pas-red-dark) 100%);
  color:           #fff;
  font-size:       1rem;
  font-weight:     600;
  text-decoration: none;
  border-radius:   999px;
  box-shadow:      var(--pas-shadow);
  transition:      transform .15s, box-shadow .15s;
  letter-spacing:  0.05em;
}

.pas-cta__button:hover {
  transform:  translateY(-2px);
  box-shadow: var(--pas-shadow-lg);
  color:      #fff;
}

/* === 監修者表記（記事末尾固定） === */
.pas-supervisor {
  margin:        48px 0 0;
  padding:       20px 24px;
  background:    var(--pas-bg-soft);
  border-top:    1px solid var(--pas-gold-soft);
  text-align:    left;
}

.pas-supervisor__label {
  margin:         0 0 6px;
  font-size:      0.78rem;
  letter-spacing: 0.2em;
  color:          var(--pas-gold);
  font-family:    var(--pas-font-deco);
  text-transform: uppercase;
}

.pas-supervisor__name {
  margin:      0;
  font-size:   0.95rem;
  font-weight: 600;
  color:       var(--pas-text);
}

/* === 装飾英字（区切り線） === */
.pas-divider {
  text-align:  center;
  margin:      48px 0;
  position:    relative;
  font-family: var(--pas-font-deco);
  font-size:   1.2rem;
  color:       var(--pas-gold);
  letter-spacing: 0.3em;
}

.pas-divider::before,
.pas-divider::after {
  content:    "";
  position:   absolute;
  top:        50%;
  width:      30%;
  height:     1px;
  background: var(--pas-gold-soft);
}

.pas-divider::before { left: 5%; }
.pas-divider::after  { right: 5%; }

/* === レスポンシブ（モバイル） === */
@media (max-width: 768px) {
  .pas-article {
    font-size: 15px;
    padding:   16px 14px 60px;
  }

  .pas-article h1 {
    font-size: 1.45rem;
    margin:    16px 0 24px;
  }

  .pas-article > h2 {
    font-size: 1.25rem;
    margin:    36px 0 16px;
    padding:   12px 0 12px 14px;
  }

  .pas-article > h3 {
    font-size: 1.1rem;
    margin:    24px 0 12px;
  }

  .pas-step {
    grid-template-columns: 44px 1fr;
    gap:                   12px;
  }

  .pas-step__num {
    width:    40px;
    height:   40px;
    font-size: 1.2rem;
  }

  .pas-cta {
    padding: 24px 18px;
  }

  .pas-cta__lead {
    font-size: 1rem;
  }

  .pas-cta__button {
    padding:   12px 28px;
    font-size: 0.95rem;
  }
}