/**
 * pas-article.css  EPastorale32 Salon 記事専用チE��インシスチE��
 *
 * 設計思想:
 *   - mg-edition�E�Erevia-ts.com�E�と同じ「テーマ干渉ゼロ」原剁E
 *   - .pas-article > 配下にスコープ固定！Epecificity で固定�E!important 最小限�E�E
 *   - 深紁E#C8101A メイン + 明朝 + 高級感�E�Eastorale32 サイト調 �E�E
 *
 * 設置:
 *   wp-content/themes/{theme}/css/pas-article.css にアチE�EローチE
 *   functions.php ぁEsingle.php で wp_enqueue_style して全記事�Eージで読込
 *
 * 命名規則:
 *   .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 変数�E�Eolor / typography 一允E��琁E��E=== */
.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", "ヒラギノ�E朁EProN", 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);

  /* スコープ確立（聖司 Edit 反映�E��E幁E��イアウト�E親コンチE��任せ！E*/
  font-family:    var(--pas-font-serif);
  color:          var(--pas-text);
  line-height:    1.85;
  font-size:      16px;
  letter-spacing: 0.02em;
  width:          100%;
  word-break:     break-word;
}

/* === 見�EぁE=== */
.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;
}

/* === リスチE=== */
.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);
}

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

/* === コールアウト（注意�E補足・ヒント！E=== */
.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: "⚠"; }

/* === カード（情報ブロチE���E�E=== */
.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;
}

/* === スチE��プ表示 === */
/* .pas-step は wrapper�E�褁E��の .pas-step-item を並べる！E*/
.pas-step {
  margin: 28px 0;
}

/* 吁Estep アイチE���E�番号丸 + 本斁E�E 2 刁Egrid */
.pas-step-item {
  display:        grid;
  grid-template-columns: 56px 1fr;
  column-gap:     18px;
  align-items:    start;
  padding:        20px 0;
  border-bottom:  1px dashed var(--pas-line);
}

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

/* data-step="N" を番号丸として ::before で表示 */
.pas-step-item::before {
  content:         attr(data-step);
  grid-column:     1;
  grid-row:        1 / span 99; /* 番号丸を�E行通す */
  align-self:      start;
  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;
}

/* step-item 冁E�E h3 / p / 子要素を�Eて 1fr 列（番号丸の右�E�に固宁E*/
.pas-step-item > * {
  grid-column: 2;
  margin-left: 0;
  margin-right: 0;
}

.pas-step-item > h3,
.pas-step-item > .pas-step-title {
  margin:      0 0 6px;
  font-size:   1.05rem;
  font-weight: 600;
  color:       var(--pas-text);
  padding:     0;
  background:  none;
  border:      none;
}

.pas-step-item > p {
  margin: 0 0 8px;
}

.pas-step-item > p:last-child:empty {
  display: none; /* WP の空 <p></p> を非表示 */
}

/* 旧 BEM スタイル�E�後方互換�E�E*/
.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;
  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�E�記事末尾の予紁E�ELP 誘導！E=== */
.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-article a.pas-cta__button,
.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:           #ffffff !important;
  font-size:       1rem;
  font-weight:     700;
  text-decoration: none !important;
  border-radius:   999px;
  box-shadow:      var(--pas-shadow);
  transition:      transform .15s, box-shadow .15s;
  letter-spacing:  0.05em;
  text-shadow:     0 1px 2px rgba(0,0,0,.2);
}

.pas-article a.pas-cta__button:hover,
.pas-cta__button:hover {
  transform:  translateY(-2px);
  box-shadow: var(--pas-shadow-lg);
  color:      #ffffff !important;
}

/* === 監修老E��記（記事末尾固定！E=== */
.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);
}

/* === 裁E��英字（区刁E��線！E=== */
.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%; }

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

  .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;
  }
.pas-faq {
  border: 0;
}
.pas-article > ul, .pas-article > ol {
  padding-left: 0;
}
}