/* 平安朝風・絵巻と和紙。既存の本文と受付処理を保つ試作テーマ。 */
:root{
  --paper:#fcf6e9;
  --outer:#3f2b49;
  --ink:#302733;
  --muted:#6b5e65;
  --line:#cdbb98;
  --red:#963b30;
  --blue:#f0e8f1;
  --yellow:#c4a563;
  --plum:#54345e;
  --gold:#af8646;
}
body{
  background-color:var(--outer);
  background-image:repeating-linear-gradient(135deg,transparent 0 30px,#ebd5a30a 30px 31px,transparent 31px 61px);
}
::selection{background:#d4b67788;color:#302733}
.paper{
  max-width:960px;
  border-left:3px solid #c6a66b;
  border-right:3px solid #c6a66b;
  background:var(--paper);
  box-shadow:0 0 0 8px #27193250,0 20px 70px #170d2366;
}
.preview-note{background:#302039;color:#fff8ec}
.masthead{margin:0;padding:22px 72px;border-bottom:1px solid #c7a76f;background:#fcf6e9}
.brand{color:var(--plum);font-size:19px;letter-spacing:.12em}
.brand span{color:var(--muted);font-size:10px}
.header-link{border-color:var(--gold);color:var(--plum)}
.hero{
  padding:32px 72px 0;
  background-color:#f9efdb;
  background-image:linear-gradient(#fcf6e920,#fcf6e930),url('assets/heian-washi-v1.webp');
  background-size:cover;
  background-position:center top;
}
.hero-meta{color:var(--plum);font-size:11px;letter-spacing:.13em}
.hero-meta span:last-child{color:#705a6f}
.hero-lead{font-size:22px;letter-spacing:.06em;margin-top:34px;color:#3e2b42;max-width:640px}
.hero-showcase{grid-template-columns:minmax(0,1fr) 252px;gap:38px;margin-top:30px}
.hero-showcase h1{font-size:clamp(45px,5vw,64px);line-height:1.5;letter-spacing:-.055em;color:#44234d}
.hero-showcase .byline{font-size:16px;margin-top:26px}
.title-dot{color:var(--red)}
.hero-cover{width:252px;position:relative;padding:5px;background:#f8e8c9;border:1px solid #b8904d;box-shadow:6px 10px 24px #3e254526}
.hero-cover:after{content:'';position:absolute;inset:-5px;border:1px solid #ad884e66;pointer-events:none}
.hero-cover img{box-shadow:none;border:0}
.hero-actions{margin-top:32px;gap:14px}
.hero-actions>.button{padding:15px 20px}
.primary{background:var(--red);border-color:#8c3028;box-shadow:inset 0 0 0 2px #cfab5d55}
.primary:hover{background:#7b3027}
.secondary{color:var(--plum);border-color:#8b7294;background:#fcf6e9bc}
.secondary:hover{background:#fff9ed}
.hero-foot{color:#5e4c5e;font-size:12px;margin-top:14px}
.hero-emaki{display:grid;justify-items:center;margin:22px auto 0;max-width:380px}
.cast-pair{width:330px}
.cast-names{display:flex;justify-content:space-around;width:330px;max-width:100%;font-family:var(--serif);font-size:12px;letter-spacing:.12em;color:var(--plum);border-bottom:1px solid #b28d536e;padding:4px 0 12px}
.hero-bottom{border-top:0;margin-top:8px;padding:12px 0 18px;color:#534053;font-size:11px}
.contents-nav{padding:22px 72px;border-top:3px double #b99659;border-bottom:3px double #b99659;background:#f5ead4}
.contents-nav a{font-family:var(--serif);font-size:13px;gap:12px}
.contents-nav small{font-size:15px;color:var(--red)}
.section{padding:72px 148px}
.eyebrow{display:inline-block;background:var(--plum);color:#fff8eb;padding:5px 12px;font-size:10px;letter-spacing:.15em;margin-bottom:25px;line-height:1.7}
.section h2{color:var(--plum)}
.intro{background:#fcf6e9}
.intro h2{font-size:34px;border-left:3px solid var(--gold);padding-left:22px;margin-bottom:35px;line-height:1.75}
.prose{font-size:17px;line-height:2}
.scribble-lines{font-size:16px;color:#4b344d}
.scribble-lines p{border-bottom:1px solid #cbb692;padding:12px 0}
.book-making-moment{grid-template-columns:minmax(0,1fr) 155px;gap:22px}
.book-contents{border-top:3px double #ad884b;border-bottom:1px solid #cbb692;padding:26px 0}
.book-contents h3{color:var(--plum)}
.book-contents li{border-color:#dacbb1;font-size:15px}
.book-contents>p{font-size:15px}
.bonus{
  border-top:1px solid #c3a16b;
  border-bottom:1px solid #c3a16b;
  background-color:#f5ead6;
  background-image:linear-gradient(#f8efdfed,#f8efdfed),url('assets/heian-washi-v1.webp');
  background-position:center;
  background-size:cover;
}
.bonus .eyebrow{background:#8d3a32}
.bonus h2{font-size:40px;letter-spacing:.04em}
.section-tag{font-family:var(--serif);font-size:13px;color:#614668}
.bonus-layout{grid-template-columns:210px minmax(0,1fr);gap:32px}
.cover{transform:rotate(-2deg);background:#fbf6e8;padding:7px;border:1px solid #be9b60;box-shadow:4px 8px 16px #74542c1f}
.cover img{box-shadow:none}
.cover figcaption{font-size:10px;padding:6px 0 2px;margin-top:7px;transform:rotate(2deg)}
.bonus-layout .prose{font-size:15px;line-height:1.95}
.bonus blockquote{font-size:17px;border-color:var(--gold);padding-left:14px}
.bonus-end{color:#4d334e;font-size:18px;line-height:1.9}
.application{background:#fffaf0;border-bottom:1px solid #d4c09c}
.application h2{font-size:30px}
.application>p:not(.eyebrow){font-size:15px;line-height:1.95}
.application .fine{font-size:13px!important}
.field label{font-size:14px;color:#4b344d}
input:not([type=checkbox]),textarea{background:#fffdf7;border-color:#b9a88d;border-radius:0}
.privacy-copy{border-top-color:#d1bd99;font-size:13px}
.privacy-copy h3{font-size:14px}
.help{font-size:12px;color:#6e6064}
.check{font-size:13px}
.optional-check{background:#f0e8f0;border-left:2px solid #a78bb0}
.form-notice{border-left-color:#a17b3e;background:#f0e5cf;color:#594729}
.zoom{
  background-color:#f0e8f1;
  background-image:linear-gradient(#efe6f0f0,#efe6f0f0),url('assets/heian-washi-v1.webp');
  background-size:cover;
  background-position:right top;
  border-color:#bda6c2;
}
.zoom h2{font-size:33px;line-height:1.8;letter-spacing:.01em}
.zoom-duration{display:flex;align-items:baseline;gap:15px;color:#57375e;font-family:var(--serif);font-size:14px;margin:17px 0 25px!important;padding:9px 0;border-top:1px solid #c6aecb;border-bottom:1px solid #c6aecb}
.zoom-duration strong{font-family:var(--serif);font-size:31px;line-height:1.45;font-weight:600;letter-spacing:.05em}
.zoom-eligibility{font-size:15px;line-height:1.9;margin:0 0 30px;padding:14px 18px;border-left:3px solid var(--gold);background:#fff9edb3;color:var(--plum)}
.zoom-eligibility strong{font-weight:600}
.zoom-read-confirm{padding:14px 0 18px;margin-bottom:18px;border-bottom:1px solid #c6aecb}
.zoom .prose{font-size:15px;line-height:2}
.zoom-invitation{grid-template-columns:minmax(0,1fr) 160px;gap:22px}
.character-listener{width:160px}
.zoom-invitation .zoom-call{font-size:18px}
.zoom-details{border-color:#aa8fb2}
.zoom-details summary{font-family:var(--serif);font-size:16px;color:var(--plum)}
.reuse{border-color:#c8b4cd}
.next{
  background-color:#4a2d55;
  background-image:linear-gradient(#402349e6,#402349ed),url('assets/heian-washi-v1.webp');
  background-position:center;
  background-size:cover;
  border-top:4px double #c2a367;
  border-bottom:4px double #c2a367;
  color:#fff6e5;
}
.next .eyebrow{background:transparent;color:#e5c98e;border-bottom:1px solid #caa566;padding-left:0;padding-right:0}
.next h2{color:#fff2d2;font-size:30px}
.next-date{color:#f0d69c}
.next-date strong{font-size:68px;letter-spacing:-.04em}
.next p:not(.eyebrow){font-size:15px}
.next .text-link{color:#fff2d2}
.author{background:#f7efdf;padding-top:55px;padding-bottom:40px}
.author h2{font-size:29px}
.author p:not(.eyebrow){font-size:14px;line-height:2}
footer{padding:25px 60px 30px;border-top:3px double #b99659;background:#f3e6ce;color:#5d495d}
footer button{font-size:11px}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#5d3672}
@media(min-width:601px) and (max-width:900px){
  .masthead,.hero{padding-left:48px;padding-right:48px}
  .hero-showcase{grid-template-columns:minmax(0,1fr) 210px;gap:25px}
  .hero-cover{width:210px}
  .hero-showcase h1{font-size:clamp(36px,5.8vw,50px)}
  .section{padding:60px 65px}
  .contents-nav{padding-left:48px;padding-right:48px}
  .bonus-layout{grid-template-columns:190px minmax(0,1fr);gap:25px}
}
@media(max-width:600px){
  .paper{border-width:2px;box-shadow:none}
  .masthead{padding:17px 23px}
  .brand{font-size:16px}
  .hero{padding:25px 23px 0;background-position:62% top}
  .hero-meta{font-size:9px;letter-spacing:.04em}
  .hero-lead{font-size:16px;line-height:1.95;letter-spacing:.01em;margin-top:27px}
  .hero-showcase{grid-template-columns:1fr;gap:25px;margin-top:29px}
  .hero-cover{width:min(215px,100%);grid-row:1}
  .hero-showcase h1{font-size:28px;line-height:1.6;letter-spacing:-.045em}
  .hero-showcase .byline{font-size:13px;margin-top:8px}
  .hero-actions{margin-top:24px;gap:11px}
  .hero-actions>.button{padding:13px 15px;min-height:50px;font-size:13px}
  .hero-foot{font-size:10px;margin-top:14px}
  .hero-emaki{margin-top:20px}
  .cast-pair{width:min(280px,100%)}
  .cast-names{width:280px;font-size:11px;padding-bottom:10px}
  .hero-bottom{margin-top:8px;font-size:9px;gap:8px}
  .contents-nav{padding:17px 23px;column-gap:18px}
  .contents-nav a{font-size:12px;gap:10px}
  .contents-nav small{font-size:14px}
  .section{padding:47px 25px}
  .eyebrow{font-size:9px;padding:4px 10px;margin-bottom:24px}
  .intro h2{font-size:25px;padding-left:15px;border-left-width:2px;line-height:1.8}
  .prose{font-size:16px;line-height:2}
  .scribble-lines{font-size:14px}
  .book-making-moment{display:block}
  .book-contents li,.book-contents>p{font-size:14px}
  .bonus h2{font-size:28px;line-height:1.6;letter-spacing:0}
  .section-tag{font-size:12px;line-height:1.8}
  .bonus-layout{grid-template-columns:1fr;gap:30px}
  .cover{width:195px}
  .bonus-layout .prose{font-size:15px;line-height:2}
  .bonus blockquote{font-size:16px}
  .bonus-end{font-size:16px}
  .application h2{font-size:25px}
  .application>p:not(.eyebrow){font-size:14px}
  .application .fine{font-size:12px!important}
  .privacy-copy{font-size:12px}
  .check{font-size:12px}
  .zoom h2{font-size:26px;line-height:1.8}
  .zoom-duration{font-size:13px;gap:12px;margin:17px 0 25px!important}
  .zoom-duration strong{font-size:28px;white-space:nowrap}
  .zoom-eligibility{font-size:14px;padding:12px 14px}
  .zoom-details summary{font-size:14px}
  .zoom .prose{font-size:15px}
  .zoom-invitation{grid-template-columns:1fr;gap:14px}
  .character-listener{width:140px}
  .zoom-invitation .zoom-call{font-size:17px}
  .next-date strong{font-size:59px}
  .next h2{font-size:25px}
  .next p:not(.eyebrow){font-size:14px}
  .author h2{font-size:25px}
  .author p:not(.eyebrow){font-size:13px}
  footer{padding-left:23px;padding-right:23px}
}