:root{
    --paper:#f7f6f1;
    --panel:#eeefe7;
    --ink:#141812;
    --ink2:#222820;
    --mute:#2b312a;
    --moss:#1f3b26;
    --hair:rgba(20,24,18,.42);
    --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
    --num:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{background:var(--paper)}
  body{
    background:var(--paper);color:var(--ink);
    font-family:var(--jp);font-size:15.5px;font-weight:500;line-height:1.85;
    
    max-width:34rem;margin:0 auto;padding:0 24px 40px;
  }
  h1,h2,h3{font-weight:600;letter-spacing:.02em}
  .en{font-family:var(--num);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;font-weight:600;color:var(--mute)}
  .n{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

  /* header */
  .top{display:flex;justify-content:space-between;align-items:center;padding:28px 0 0}
  .top .mark{font-size:22px;font-weight:500;color:var(--moss)}
  .title{padding:48px 0 32px}
  .title h1{font-size:30px;line-height:1.35;font-weight:500}
  .title .lead{margin-top:14px;font-size:15.5px;color:var(--ink2);max-width:28em;text-wrap:pretty}

  /* photo */
  .bleed{margin:0 -24px}
  .bleed img{display:block;width:100%;height:auto}
  .cap{display:flex;justify-content:space-between;padding:10px 0 0;font-size:12.5px;font-weight:500;color:var(--ink2);letter-spacing:.06em}

  /* plan */
  .plan{margin-top:56px;padding-top:18px;border-top:1px solid var(--ink)}
  .plan .idx{display:flex;justify-content:space-between;align-items:baseline}
  .plan .idx .en{color:var(--moss)}
  .plan .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:10px}
  .plan h2{font-size:22px;line-height:1.35}
  .price{text-align:right;white-space:nowrap;line-height:1}
  .price .n{font-size:34px;font-weight:600;color:var(--ink)}
  .price .u{font-size:14px;font-weight:600;margin-left:2px}
  .price .s{display:block;font-size:12px;font-weight:500;color:var(--ink2);margin-top:8px;letter-spacing:.1em}
  .plan .desc{margin-top:18px;font-size:15px}
  .plan .desc + .desc{margin-top:6px}

  /* example panel */
  .ex{margin-top:24px;background:var(--panel);padding:18px 18px 16px}
  .ex .exhead{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--ink);font-weight:500;letter-spacing:.1em;padding-bottom:10px;border-bottom:1px solid var(--hair)}
  .ex .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:8px}
  .ex .col h3{font-size:12px;font-weight:500;color:var(--moss);letter-spacing:.2em;margin:10px 0 4px}
  .ex ul{list-style:none}
  .ex li{font-size:14px;color:var(--ink);font-weight:500;padding:4px 0;line-height:1.7}
  .ex li + li{border-top:1px solid var(--hair)}
  .ex .thumb{margin:10px 0 2px;aspect-ratio:4/3;overflow:hidden}
  .ex .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .ex.one .cols{grid-template-columns:1fr}
  .ex .thumb.wide{aspect-ratio:3/2;margin:12px 0 4px}
  .ex.one .exhead{display:block}
  .ex.one .exhead span{display:block}
  .ex.one li{display:inline}
  .ex.one li + li{border:0}
  .ex.one li + li::before{content:"／";color:var(--ink2);margin:0 .5em}

  .fine{margin-top:14px;font-size:13.5px;font-weight:500;color:var(--ink2);line-height:1.8}
  .lead,.intro,.desc,.fine,.note,.ask,.order p,.who{word-break:auto-phrase;line-break:strict;text-wrap:pretty}
  .clause{display:inline-block}
  .ex li{word-break:auto-phrase;line-break:strict}
  @media (max-width:560px){
    .plan .head{display:block}
    .plan .head .price{text-align:left;margin-top:8px}
    .plan .head .price .s{text-align:left}
    .ex .cols{grid-template-columns:1fr;gap:0}
    .ex.one li{display:inline-block}
    .fine br,.ask br,.order p br{display:none}
  }

  /* summary table */
  .sum{margin-top:64px;padding-top:18px;border-top:1px solid var(--ink)}
  .sum h2{font-size:13.5px;letter-spacing:.2em;color:var(--ink);font-weight:500}
  .sum table{width:100%;border-collapse:collapse;margin-top:14px}
  .sum td{padding:11px 0;border-bottom:1px solid var(--hair);vertical-align:top;font-size:14.5px;font-weight:500}
  .sum td:last-child{text-align:right;white-space:nowrap}
  .sum td small{display:block;font-size:12.5px;font-weight:500;color:var(--ink2)}
  .sum .n{font-size:18px;font-weight:600}

  /* order */
  .order{margin-top:56px;padding:22px 0 0;border-top:1px solid var(--ink)}
  .order h2{font-size:13.5px;letter-spacing:.2em;color:var(--ink);font-weight:500}
  .order p{margin-top:10px;font-size:15px}
  .ask{margin-top:14px;font-size:15px}
  .who{margin-top:4px;font-size:13.5px;font-weight:500;color:var(--ink2)}
  .line{display:flex;gap:20px;align-items:center;margin-top:18px}
  .qr{width:112px;height:112px;flex:none;background:#fff;padding:6px}
  .btn{display:inline-block;padding:10px 22px;border:1.5px solid var(--moss);color:var(--moss);text-decoration:none;font-size:14.5px;font-weight:600;letter-spacing:.08em}
  .url{margin-top:8px;font-family:var(--num);font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.02em}
  .hint{margin-top:2px;font-size:12.5px;font-weight:500;color:var(--ink2)}
  .credit{margin-top:56px;font-size:13.5px;font-weight:500;color:var(--ink2)}
  .credit b{font-weight:500;color:var(--ink)}

  footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center}
  footer .mark{font-size:18px;color:var(--moss)}

  /* 印刷・PDF */
  @media print{
    @page{margin:14mm 12mm}
    html,body{background:#fff}
    body{max-width:none;padding:0;font-size:10.5pt}
    .sum,.order,.ex,.credit,figure,.cap,footer{break-inside:avoid;page-break-inside:avoid}
    .plan .head{break-after:avoid;page-break-after:avoid}
    .plan{break-inside:avoid;page-break-inside:avoid}
    .plan{break-before:page;page-break-before:always}
    .title{padding:56px 0 30px}
    .ex .thumb img{max-height:52mm}
    .ex .thumb{aspect-auto:initial}
    .plan .head,.plan .idx,.ex .col,.sum table,.sum tr,.line{break-inside:avoid;page-break-inside:avoid}
    .plan h2,.sum h2,.order h2{break-after:avoid;page-break-after:avoid}
    .idx{break-after:avoid;page-break-after:avoid}
    .cap{break-before:avoid;page-break-before:avoid}
    .bleed{margin:0}
    .bleed img{max-height:118mm;object-fit:cover}
    .plan{margin-top:24px}
    .order,.sum{margin-top:26px}
    .order .line{margin-top:12px}
    .qr{width:96px;height:96px}
    .credit{margin-top:18px}
    footer{margin-top:16px}
    a{color:inherit;text-decoration:none}
  }