/* =========================================================
   PC Frame v1
   スマホ幅のLPを中央に置き、PCの左右の余白に
   ブランド名・キャッチ・ナビ・トップへ戻るを出す部品。
   幅 1180px 未満（スマホ・タブレット・小さいPC）では出ない。
   色や幅は :root の --pcf-* を LP ごとに上書きする。
   ========================================================= */
:root{
  --pcf-col:560px;            /* 中央のLPの幅（.lp の max-width と同じにする） */
  --pcf-ink:#4A2C3A;          /* 文字・トップへ戻るの円 */
  --pcf-accent:#D9705F;       /* 英字ラベル・矢印 */
  --pcf-line:#C8A96A;         /* キャッチの上下の罫線・バッジの円 */
  --pcf-mark:#F3DAD2;         /* 右のコピーの強調の帯 */
  --pcf-pad:clamp(32px,3.2vw,64px);
  --pcf-font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --pcf-latin:"Helvetica Neue",Arial,sans-serif;
  --pcf-badge-font:Georgia,"Times New Roman",serif;
}

.pcf{display:none}

@media (min-width:1180px){
  .pcf{display:block}

  .pcf-side{
    position:fixed;top:0;bottom:0;z-index:5;
    width:calc((100vw - var(--pcf-col)) / 2);
    padding:var(--pcf-pad);
    display:flex;flex-direction:column;
    color:var(--pcf-ink);font-family:var(--pcf-font);
  }
  .pcf-left{left:0}
  .pcf-right{right:0;align-items:flex-end;text-align:right}

  /* 左上：英字のブランド名（2行まで） */
  .pcf-label{
    font-family:var(--pcf-latin);font-size:13px;font-weight:500;
    letter-spacing:.22em;line-height:1.95;color:var(--pcf-accent);
  }

  /* 左中央：罫線ではさんだキャッチ */
  .pcf-catch{
    margin:auto 0;width:100%;max-width:430px;
    padding:clamp(28px,4.5vh,52px) 0;
    border-top:1px solid var(--pcf-line);border-bottom:1px solid var(--pcf-line);
  }
  .pcf-catch p{
    font-size:clamp(22px,1.9vw,34px);font-weight:400;
    line-height:1.75;letter-spacing:.06em;word-break:keep-all;
  }

  /* 左：ページの目次（任意。置くとキャッチの下に並ぶ） */
  .pcf-left:has(.pcf-index) .pcf-catch{margin:auto 0 clamp(18px,3vh,36px)}
  .pcf-index{margin:0 0 auto}
  .pcf-index ol{list-style:none;margin:0;padding:0}
  .pcf-index a{
    display:flex;align-items:baseline;gap:14px;padding:clamp(3px,.6vh,6px) 0;
    font-size:14px;letter-spacing:.06em;line-height:1.6;
    color:var(--pcf-ink);text-decoration:none;opacity:.62;
    transition:opacity .25s ease;
  }
  .pcf-index a span{
    flex:none;width:2.2em;font-family:var(--pcf-latin);
    font-size:11.5px;letter-spacing:.14em;color:var(--pcf-accent);
  }
  .pcf-index a::after{
    content:"";align-self:center;height:1px;width:0;
    background:var(--pcf-line);transition:width .3s ease;
  }
  .pcf-index a:hover{opacity:1}
  .pcf-index a.is-current{opacity:1}
  .pcf-index a.is-current::after{width:40px}

  /* 左下・右下：英字の一言 */
  .pcf-tag{
    font-family:var(--pcf-latin);font-size:12.5px;font-weight:500;
    letter-spacing:.24em;line-height:1.6;
  }

  /* 右上：円のバッジ */
  .pcf-badge{
    width:clamp(120px,9vw,172px);aspect-ratio:1;
    border:1px solid var(--pcf-line);border-radius:50%;
    display:grid;place-items:center;
  }
  .pcf-badge span{
    display:block;transform:rotate(10deg);
    font-family:var(--pcf-badge-font);font-style:italic;
    font-size:clamp(22px,1.7vw,32px);line-height:1.05;text-align:center;
  }

  /* 右中央：コピー（最後の行を帯で強調） */
  .pcf-copy{
    margin-top:auto;
    font-size:clamp(22px,1.9vw,34px);font-weight:400;
    line-height:1.95;letter-spacing:.06em;word-break:keep-all;
  }
  .pcf-copy mark{
    background:var(--pcf-mark);color:inherit;padding:.06em .25em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }

  /* 右：ページ内ナビ */
  .pcf-nav{margin:32px 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
  .pcf-nav a{font-size:14px;letter-spacing:.08em;color:var(--pcf-ink);text-decoration:none}
  .pcf-nav a span{color:var(--pcf-accent);margin-right:.5em}
  .pcf-nav a:hover{color:var(--pcf-accent)}

  /* 右下：一言＋トップへ戻る */
  .pcf-foot{display:flex;align-items:center;gap:16px}
  .pcf-top{
    width:64px;height:64px;flex:none;
    border:1px solid var(--pcf-ink);border-radius:50%;
    display:grid;place-items:center;
    color:var(--pcf-ink);text-decoration:none;font-size:22px;
    transition:background .25s ease,color .25s ease;
  }
  .pcf-top:hover{background:var(--pcf-ink);color:#fff}

  .pcf a:focus-visible{outline:2px solid var(--pcf-accent);outline-offset:4px}
}

/* 背の低い画面ではバッジを省いて詰まりを防ぐ */
@media (min-width:1180px) and (max-height:680px){
  .pcf-badge{display:none}
  .pcf-catch{padding:20px 0}
  .pcf-catch p{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .pcf-top,.pcf-index a,.pcf-index a::after{transition:none}
}