:root{
  --ivory:#FAF6F1; --greige:#E9DFD6; --plum:#4A2C3A; --rose:#D9705F;
  --gold:#C8A96A; --ink:#2E2328; --gray:#3A3A3A;
  /* PCの左右パネル（pc-frame.css）の色 */
  --pcf-col:560px; --pcf-ink:#4A2C3A; --pcf-accent:#D9705F; --pcf-line:#C8A96A; --pcf-mark:#F3DAD2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#F3ECE6;
  color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8;
  overflow-x:hidden;
}
.lp{max-width:560px;margin:0 auto;background:var(--ivory);box-shadow:0 0 40px rgba(74,44,58,.08)}
.part{position:relative;display:block}
.part img{display:block;width:100%;height:auto}
.hit{position:absolute;display:block;border-radius:999px;color:transparent;font-size:1px;overflow:hidden}
.hit:focus-visible{outline:3px solid var(--plum);outline-offset:2px}

.note{padding:28px 7% 32px;background:var(--ivory);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.note h2{font-weight:400;font-size:18px;color:var(--plum);margin-bottom:8px;word-break:keep-all;text-wrap:balance;line-break:strict}
.note p{font-size:15px;color:var(--gray)}
.note .todo{margin-top:6px;color:var(--rose)}

.sample{position:relative;padding:30px 7% 32px;text-align:center;background:var(--ivory);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.sample-lead{font-size:18px;line-height:1.7;color:var(--plum);letter-spacing:.04em;margin-bottom:6px;word-break:keep-all;text-wrap:balance}
.sample p:not(.sample-lead){font-size:14px;line-height:1.8;color:var(--gray)}
.free{margin:0;padding:6px 7% 22px;text-align:center;font-size:15px;line-height:1.7;color:var(--plum);background:#FBF6F2}
.free.dark{background:var(--plum);color:#fff;padding-top:0;margin-top:-1px}
.qa-more{padding:0 6% 30px;background:var(--greige);margin-top:-1px}
.qa-more p{position:relative;border-radius:16px;padding:12px 16px 12px 44px;font-size:15px;line-height:1.75}
.qa-more span{position:absolute;left:16px;top:10px;font-size:20px;line-height:1.4}
.qa-more .q{background:var(--plum);color:#fff;margin-right:18%}
.qa-more .q span{color:var(--rose)}
.qa-more .a{background:#fff;color:var(--ink);margin:12px 0 0 12%}
.qa-more .a span{color:var(--plum)}
.float small{display:block;font-size:11px;opacity:.9;letter-spacing:.02em;margin-top:1px}
.pc-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(46,35,40,.55)}
.pc-modal[hidden]{display:none}
.pc-box{position:relative;width:min(420px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--ivory);border-radius:20px;padding:30px 28px 26px;text-align:center;box-shadow:0 20px 50px rgba(46,35,40,.3);border-top:3px solid var(--gold)}
.pc-close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:26px;line-height:1;color:var(--plum);cursor:pointer;padding:6px}
.pc-label{font-size:13px;color:var(--rose);letter-spacing:.06em}
.pc-box h2{font-weight:400;font-size:20px;line-height:1.6;color:var(--plum);margin:6px 0 14px;word-break:keep-all}
.pc-box img{display:block;width:200px;height:200px;margin:0 auto 14px;border-radius:10px;border:1px solid var(--greige)}
.pc-box ol{text-align:left;font-size:14px;color:var(--ink);padding-left:1.4em;margin:0 auto 10px;max-width:300px}
.pc-alt{font-size:12.5px;color:var(--gray);text-align:left;line-height:1.7;margin-bottom:14px}
.pc-alt strong{color:var(--plum);font-weight:600}
.pc-copy{display:inline-block;font:inherit;font-size:13px;color:var(--plum);background:#fff;border:1px solid var(--gold);border-radius:999px;padding:8px 18px;cursor:pointer}
.pc-copy:hover{background:var(--greige)}
.foot{padding:28px 7% 110px;text-align:center;background:var(--plum);color:#fff}
.foot .small{font-size:12px;opacity:.85;margin-top:4px}
.foot .legal-link{display:inline-block;padding:12px 4px;color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot .legal-link:focus-visible{outline:3px solid #fff;outline-offset:2px}

.float{
  position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);
  width:min(92vw,520px);padding:14px 0;text-align:center;
  background:var(--rose);color:#fff;text-decoration:none;font-size:17px;letter-spacing:.04em;
  border-radius:999px;box-shadow:0 6px 18px rgba(74,44,58,.25);
  transition:transform .35s ease;z-index:10;
}
.float.show{transform:translate(-50%,0)}

.part img{opacity:1}
.js .part:not(#fv) img{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .part.in:not(#fv) img{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .part:not(#fv) img{opacity:1;transform:none;transition:none}
  .float{transition:none}
}