:root{
      --hero-photo-image:url("images/01.png");
      /*
       * 下部画像ボックス用です。現在HTML側はコメントアウトしています。
       * 画像が用意できたら、imagesフォルダ内に以下の名前で配置し、
       * PACKAGEセクション内のコメントアウトを外してください。
       *
       * 推奨サイズ
       * 02.png：豆・粉仕上げの写真。横長 1600×900px 以上（できれば 2000px 幅程度）
       * 03.png：ドリップバッグの写真。4:3〜1:1、1200×900px 以上
       * 04.png：ブレンドカードの写真。4:3〜1:1、1200×900px 以上
       *
       * いずれも background-size:cover で中央トリミングされます。
       */
      --package-photo-image:url("images/02.png");
      --card-photo-image:url("images/04.png");
      --dripbag-photo-image:url("images/03.png");
      /* clean white / soft gray / sage green palette */
      --paper:#fffdfa;
      --white:#ffffff;
      --cream:#f4f4f1; /* ほぼグレーの薄い面色 */
      --beige:#ecece7; /* ベージュを抑えたグレージュ */
      --sage:#eef3ec;
      --sage2:#d8e1d5;
      --sage3:#7f927b;
      --lilac:#ffffff; /* 旧サンプル背景。紫味を抜いて白に変更 */
      --bluegray:#eef3ec;
      --craft:#f4f4f1;
      --warm:#f4f4f1;
      --ink:#24201d;
      --muted:#6f675f;
      --muted2:#92877c;
      --line:#dfddd8;
      --line-dark:#c5c0b8;
      --accent:#7f927b;
      --accent2:#7f927b;
      --brown:#4b3f38;
      --navy:#3f4653;
      --shadow:0 18px 50px rgba(64,52,42,.06);
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    html,body{
      margin:0;
      padding:0;
      background:var(--paper);
      color:var(--ink);
      font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Helvetica Neue",Arial,"Hiragino Sans",Meiryo,sans-serif;
      font-weight:400;
      line-height:1.82;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    body{
      background:
        radial-gradient(circle at 12% 0%, rgba(238,243,236,.58), transparent 32%),
        radial-gradient(circle at 100% 8%, rgba(244,244,241,.62), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fffefd 52%, #ffffff 100%);
    }
    button,input,select,textarea{ font:inherit; }
    a{ color:inherit; text-underline-offset:.24em; }

    .site{ min-height:100vh; }
    .topbar{
      position:relative;
      z-index:3;
      display:flex;
      align-items:center;
      justify-content:space-between;
      width:min(1120px,100%);
      margin:0 auto;
      padding:18px 22px 10px;
      color:#4c4640;
      font-size:.82rem;
    }
    .brand{
      letter-spacing:.08em;
      font-weight:700;
    }
    .top-note{ color:var(--muted); font-size:.76rem; }

    .band{
      position:relative;
      width:100%;
      overflow:hidden;
    }
    .band-inner{
      width:min(1120px,100%);
      margin:0 auto;
      padding:74px 22px;
    }
    .band.hero{
      background:
        radial-gradient(circle at 82% 14%, rgba(238,243,236,.58), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.99) 0%, rgba(255,253,250,.96) 52%, rgba(244,244,241,.66) 100%);
    }
    .band.hero:before{
      content:"";
      position:absolute;
      z-index:0;
      inset:0 0 0 auto;
      width:min(56vw,760px);
      background-image:
        linear-gradient(90deg, rgba(255,253,250,.98) 0%, rgba(255,253,250,.72) 26%, rgba(255,253,250,.22) 58%, rgba(255,253,250,.04) 100%),
        var(--hero-photo-image);
      background-size:cover, cover;
      background-position:center right, center;
      background-repeat:no-repeat;
      opacity:.72;
      pointer-events:none;
    }
    /* Section rhythm: white → soft gray → white → pale sage. Bottom ends in white, not beige. */
    .band.examples{
      background:linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
    }
    .band.sample{ background:var(--white); }
    .band.beans{ background:var(--sage); }
    .band.price-delivery{
      background:linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
      border-top:1px solid rgba(70,55,45,.08);
    }
    .band.package{ background:var(--white); border-top:1px solid rgba(70,55,45,.10); }
    .band.finish{
      background:var(--white);
      border-top:1px solid rgba(70,55,45,.10);
    }
    .band.faq-band{ background:#f7faf5; border-top:1px solid rgba(70,55,45,.08); }

    .hero .band-inner{
      position:relative;
      z-index:1;
      min-height:calc(100svh - 54px);
      display:block;
      padding-top:54px;
      padding-bottom:58px;
    }
    .hero-copy{ max-width:660px; }
    .hero-message{ position:relative; }
    .eyebrow{
      display:block;
      margin:0 0 18px;
      color:var(--accent);
      font-size:.72rem;
      font-weight:700;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    h1{
      font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
      font-size:clamp(3.05rem,8.5vw,5.2rem);
      line-height:1.08;
      letter-spacing:-.075em;
      font-weight:500;
      margin:0 0 24px;
      color:var(--ink);
    }
    .no-break{ white-space:nowrap; }
    .lead{
      max-width:560px;
      margin:0 0 24px;
      font-size:1.04rem;
      line-height:1.95;
      color:#3b3631;
      font-weight:500;
    }
    .trial-copy{
      margin:0 0 18px;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.75;
    }
    .small-link{
      display:inline-block;
      color:#554b45;
      font-size:.86rem;
      text-decoration:none;
      border-bottom:1px solid rgba(85,75,69,.42);
      margin:0 0 24px;
    }

    .hero-visual{
      display:none;
    }
    .photo-frame{
      position:relative;
      min-height:340px;
      background:#fff;
      border-top:1px solid rgba(36,32,29,.16);
      border-bottom:1px solid rgba(36,32,29,.16);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .photo-frame img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      object-position:center;
      z-index:1;
    }
    .photo-frame:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        var(--hero-photo-image),
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(243,240,247,.68)),
        repeating-linear-gradient(90deg, rgba(127,146,123,.06) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, rgba(127,146,123,.045) 0 1px, transparent 1px 34px);
      background-size:cover, auto, auto, auto;
      background-position:center;
      background-repeat:no-repeat, repeat, repeat, repeat;
      opacity:1;
    }
    .photo-frame:after{
      content:"COFFEE / WORDS / IMAGE";
      position:absolute;
      z-index:2;
      left:22px;
      bottom:18px;
      right:22px;
      padding-top:14px;
      border-top:1px solid rgba(36,32,29,.22);
      color:#6d6259;
      letter-spacing:.14em;
      font-size:.68rem;
      font-weight:700;
    }
    .visual-caption{
      margin:0;
      padding-left:18px;
      border-left:1px solid var(--line-dark);
      color:var(--muted);
      font-size:.86rem;
      line-height:1.75;
    }

    .input-box{
      margin-top:28px;
      background:#fff;
      border-top:3px solid var(--accent);
      box-shadow:0 18px 42px rgba(58,45,36,.07);
      padding:24px;
      max-width:660px;
    }
    .input-label{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:12px;
      align-items:baseline;
      margin-bottom:13px;
      color:#3b3631;
    }
    .input-label small{
      color:var(--accent);
      font-size:.68rem;
      letter-spacing:.16em;
      font-weight:800;
    }
    .input-label strong{
      font-size:1.02rem;
      line-height:1.45;
    }
    .input-row{
      display:grid;
      grid-template-columns:1fr 210px;
      gap:10px;
      align-items:start;
    }
    input[type="text"],
    textarea{
      width:100%;
      border:1px solid #968879;
      background:#fff;
      padding:16px 15px;
      font-size:.85em;
      outline:none;
      color:#11100e;
      min-height:58px;
    }
input[type="text"]::placeholder,
textarea::placeholder{
  color:#b8b2aa;
  opacity:1;
}
    input[type="text"]:focus,
    textarea:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 2px rgba(127,146,123,.14) inset;
    }
    .request-input{
      min-height:52px;
      height:52px;
      max-height:168px;
      line-height:1.5;
      padding:14px 15px;
      resize:none;
      overflow-y:hidden;
    }
    #btnGen{
      min-height:52px;
      height:52px;
    }
    .btn{
      appearance:none;
      border:1px solid var(--navy);
      padding:14px 18px;
      min-height:52px;
      background:var(--navy);
      color:#fff;
      cursor:pointer;
      font-weight:700;
      letter-spacing:.01em;
      transition:transform .16s ease, opacity .16s ease, background .16s ease;
      text-align:center;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      line-height:1.35;
    }
    .btn:hover{ transform:translateY(-1px); background:#303846; }
    .btn:disabled{ opacity:.56; cursor:wait; transform:none; }
    .btn.secondary,
    .btn.ghost{ background:#fff; color:var(--navy); border:1px solid var(--line-dark); box-shadow:none; }
    .btn.secondary:hover,
    .btn.ghost:hover{ background:#f7f5f1; }
    .chips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:15px;
    }
    .chip{
      border:1px solid var(--line);
      background:#fff;
      color:#50483f;
      padding:8px 11px;
      font-size:.82rem;
      cursor:pointer;
      transition:background .16s ease, border-color .16s ease;
    }
    .chip:before{ content:"＋"; margin-right:5px; color:var(--accent); }
    .chip:hover{ background:#faf7f2; border-color:var(--sage2); }
    .microcopy{
      margin:13px 0 0;
      color:var(--muted);
      font-size:.81rem;
      line-height:1.75;
    }

    .quota-notice{
      display:none;
      margin-top:14px;
      padding:13px 15px;
      border:1px solid #ead4d1;
      background:#fff7f5;
      color:#5b403c;
      font-size:.84rem;
      line-height:1.75;
    }
    .quota-notice.active{ display:block; }
    .knowledge-notice{
      max-width:960px;
      margin:14px auto 0;
      border-color:#cbd9c7;
      background:#f5f8f4;
      color:#445342;
    }
    .knowledge-notice .quota-notice-title{ color:#5f725c; }
    .quota-notice-title{
      display:block;
      margin:0 0 3px;
      color:#6d4a45;
      font-weight:700;
      font-size:.82rem;
    }
    .quota-notice-text{
      margin:0;
      white-space:pre-line;
    }
    .browser-notice{
      margin:12px 0 0;
      color:#6f675f;
      font-size:.78rem;
      line-height:1.65;
      border-top:1px solid var(--line);
      padding-top:10px;
    }

    .input-help,
    .restore-details{
      margin-top:14px;
      border-top:1px solid var(--line);
      padding-top:10px;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.75;
    }
    .input-help > summary,
    .restore-details > summary{
      cursor:pointer;
      list-style:none;
      color:#4b3f38;
      font-weight:700;
    }
    .input-help > summary::-webkit-details-marker,
    .restore-details > summary::-webkit-details-marker{ display:none; }
    .input-help > summary:before,
    .restore-details > summary:before{
      content:"＋";
      margin-right:6px;
      color:var(--accent);
      font-weight:800;
    }
    .input-help[open] > summary:before,
    .restore-details[open] > summary:before{ content:"−"; }
    .input-help p{
      margin:10px 0 0;
      color:var(--muted);
      font-size:.81rem;
      line-height:1.75;
    }
    .restore-details .restore-box{
      margin-top:10px;
    }

    .restore-box{
      display:none;
      margin-top:18px;
      border-top:1px solid var(--line);
      padding-top:14px;
    }
    .restore-box.active{ display:block; }
    .restore-title{
      margin:0 0 8px;
      color:#4b4540;
      font-size:.86rem;
      font-weight:700;
    }
    .restore-note{
      margin:0 0 10px;
      color:var(--muted);
      font-size:.78rem;
      line-height:1.65;
    }
    .restore-list{
      display:grid;
      gap:8px;
    }
    .restore-item{
      border:1px solid var(--line);
      background:#fff;
      color:#3b3631;
      overflow:hidden;
    }
    .restore-item[open]{ background:#fffdfa; border-color:var(--sage2); }
    .restore-item > summary{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
      padding:13px 16px;
      cursor:pointer;
      list-style:none;
      list-style-type:none;
    }
    .restore-item > summary::-webkit-details-marker{ display:none; }
    .restore-item > summary::marker{ content:""; font-size:0; }
    .restore-item > summary:after{
      content:"＋";
      color:var(--accent);
      font-weight:800;
      line-height:1;
    }
    .restore-item[open] > summary:after{ content:"−"; }
    .restore-summary-title{
      display:block;
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      color:var(--ink);
      font-size:.94rem;
      line-height:1.5;
    }
    .restore-title-name{
      font-weight:700;
    }
    .restore-title-meta{
      font-weight:400;
      color:var(--muted);
    }
    .restore-detail-body{
      border-top:1px solid var(--line);
      color:#3f3a35;
      font-size:.94rem;
      line-height:1.75;
    }
    .restore-detail-row{
      display:grid;
      grid-template-columns:84px minmax(0,1fr);
      gap:0;
      border-bottom:1px solid rgba(223,221,216,.72);
    }
    .restore-detail-row:last-of-type{ border-bottom:0; }
    .restore-detail-row b{
      padding:9px 8px 9px 16px;
      color:#4b4540;
      font-weight:700;
      text-align:left;
      white-space:nowrap;
    }
    .restore-detail-row span{
      min-width:0;
      padding:9px 16px 9px 0;
    }
    .restore-load{
      width:100%;
      min-height:42px;
      padding:10px 12px;
      font-size:.82rem;
      border-left:0;
      border-right:0;
      border-bottom:0;
    }
    .restore-cache-note{
      margin:8px 0 0;
      color:#8a8177;
      font-size:.72rem;
      line-height:1.55;
    }
    .created-page-item{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
      border:1px solid var(--line);
      background:#fff;
      padding:13px 14px;
    }
    .created-page-info{ min-width:0; }
    .created-page-name{
      display:block;
      color:var(--ink);
      font-size:.92rem;
      line-height:1.5;
      font-weight:700;
      overflow-wrap:anywhere;
    }
    .created-page-meta{
      display:block;
      margin-top:3px;
      color:var(--muted);
      font-size:.76rem;
      line-height:1.55;
    }
    .created-page-open.btn{
      width:auto;
      min-height:40px;
      padding:9px 13px;
      font-size:.8rem;
      white-space:nowrap;
    }

    .loading,.purchase-loading{ display:none; }
    .loading.active,
    .purchase-loading.active{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:flex-start;
      margin-top:16px;
      padding:2px 0 0;
      color:var(--muted);
    }
    .spinner{
      width:22px;
      height:22px;
      border-radius:50%;
      border:1px solid rgba(111,103,95,.22);
      border-top-color:var(--accent);
      animation:spin .8s linear infinite;
      flex:0 0 auto;
    }
    .loading-message strong,
    .loading-text strong{ display:block; color:#4c4640; font-size:.86rem; line-height:1.45; }
    .loading-message span,
    .loading-text span{ display:block; margin-top:2px; color:#7a7168; font-size:.76rem; line-height:1.55; }
    @keyframes spin{ to{ transform:rotate(360deg); } }

    .section-head{
      display:grid;
      grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
      gap:34px;
      align-items:start;
      margin-bottom:34px;
    }
    .section-kicker{
      margin:0 0 12px;
      color:var(--accent);
      letter-spacing:.16em;
      font-size:.68rem;
      font-weight:800;
      text-transform:uppercase;
    }
    .section-heading{
      font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
      color:var(--ink);
      font-size:clamp(1.8rem,4.5vw,3.1rem);
      line-height:1.26;
      font-weight:500;
      letter-spacing:-.055em;
      margin:0;
    }
    .section-text{
      color:#4b4540;
      margin:0;
      font-size:.98rem;
      line-height:1.92;
    }

    .example-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:0 34px;
  padding:0 12px;

      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.42);
    }
    .example-item{
      padding:18px 0;
      border-top:1px solid var(--line);
      display:grid;
      grid-template-columns:72px 1fr;
      gap:16px;
      align-items:start;
    }
    .example-item:nth-child(-n+2){ border-top:0; }
    .example-item:nth-child(odd){ padding-right:20px; border-right:1px solid var(--line); }
    .example-item:nth-child(even){ padding-left:20px; }
    .example-label{
      display:block;
      color:var(--accent);
      font-size:.68rem;
      letter-spacing:.12em;
      font-weight:800;
    }
    .example-item strong{
      display:block;
      color:#2d2824;
      margin-bottom:4px;
      font-size:.98rem;
    }
    .example-item p{
      margin:0;
      color:var(--muted);
      font-size:.86rem;
      line-height:1.7;
    }



    /* Sample accordion inside WHAT TO TYPE */
    .sample-accordion{
      display:grid;
      gap:10px;
      margin-top:28px;
      border-top:1px solid var(--line-dark);
      border-bottom:1px solid var(--line);
      padding:14px 0;
    }
    .sample-detail{
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 10px 28px rgba(64,52,42,.035);
    }
    .sample-detail[open]{
      background:#fff;
      border-color:var(--line-dark);
    }
    .sample-detail > summary{
      list-style:none;
      cursor:pointer;
      display:grid;
      grid-template-columns:88px minmax(0,1fr) auto;
      gap:14px;
      align-items:center;
      padding:16px 18px;
      color:var(--ink);
    }
    .sample-detail > summary::-webkit-details-marker{ display:none; }
    .sample-detail > summary:after{
      content:"＋";
      color:var(--accent);
      font-weight:800;
      line-height:1;
    }
    .sample-detail[open] > summary:after{ content:"−"; }
    .sample-kind{
      display:block;
      color:var(--accent);
      font-size:.68rem;
      letter-spacing:.12em;
      font-weight:800;
    }
    .sample-summary-title{
      display:block;
      min-width:0;
      color:#2d2824;
      font-weight:800;
      line-height:1.45;
    }
    .sample-summary-note{
      display:block;
      margin-top:2px;
      color:var(--muted);
      font-size:.8rem;
      line-height:1.55;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .sample-detail-body{
      border-top:1px solid var(--line);
      padding:18px;
      background:#fff;
    }
    .sample-request{
      margin:0 0 14px;
      padding:12px 14px;
      background:#fff;
      border-left:3px solid var(--accent);
      color:var(--muted);
      font-size:.83rem;
      line-height:1.75;
    }
    .sample-mini-paper{
      background:#fff;
      border-top:3px solid var(--accent2);
      box-shadow:0 14px 34px rgba(64,52,42,.05);
      padding:20px 20px 22px;
    }
    .sample-mini-name{
      font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
      font-size:1.78rem;
      line-height:1.22;
      letter-spacing:-.055em;
      font-weight:500;
      margin:0 0 4px;
      color:var(--ink);
    }
    .sample-mini-subtitle{
      margin:0;
      color:#687a64;
      font-weight:700;
      font-size:.88rem;
      line-height:1.55;
    }
    .sample-mini-text{
      margin:14px 0 0;
      color:#292623;
      white-space:pre-wrap;
      font-size:.9rem;
      line-height:1.86;
    }
    .sample-mini-meta{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:16px;
      margin-top:16px;
      padding-top:14px;
      border-top:1px solid var(--line);
    }
    .sample-mini-meta strong{
      display:block;
      margin-bottom:5px;
      color:var(--accent2);
      font-size:.72rem;
      letter-spacing:.12em;
      font-weight:800;
    }
    .sample-mini-meta p{
      margin:0;
      color:#3a3632;
      font-size:.82rem;
      line-height:1.68;
    }
    .sample-layout{
      display:grid;
      grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
      gap:42px;
      align-items:start;
    }
    .sample-paper{
      background:rgba(255,255,255,.94);
      padding:28px 28px 30px;
      border-top:3px solid var(--accent2);
      border-bottom:1px solid var(--line);
      box-shadow:0 20px 50px rgba(64,52,42,.06);
    }
    .sample-input{
      margin:0 0 18px;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:10px 0;
      color:#6b625a;
      font-size:.84rem;
    }
    .sample-name{
      font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
      font-size:2.25rem;
      line-height:1.18;
      letter-spacing:-.055em;
      font-weight:500;
      margin:0 0 6px;
    }
    .sample-subtitle{ margin:0; color:#687a64; font-weight:700; font-size:.93rem; }
    .sample-text{ color:#292623; font-size:.94rem; line-height:1.9; margin:18px 0 0; }
    .sample-tags{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
      margin:16px 0 0;
    }
    .sample-tag{
      color:#5f725c;
      background:rgba(242,246,241,.92);
      border:1px solid var(--sage2);
      padding:5px 8px;
      font-size:.78rem;
      line-height:1.35;
    }
    .sample-spec{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
      margin-top:22px;
      padding-top:18px;
      border-top:1px solid var(--line);
    }
    .sample-spec strong{ display:block; font-size:.78rem; letter-spacing:.12em; color:var(--accent2); margin-bottom:5px; }
    .sample-spec p{ margin:0; color:#3a3632; font-size:.86rem; line-height:1.7; }

    .beans-layout,
    .price-layout,
    .delivery-layout,
    .finish-layout{
      display:grid;
      grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
      gap:46px;
      align-items:start;
    }
    .delivery-layout.delivery-layout-no-photos{
      grid-template-columns:minmax(0,880px);
      justify-content:center;
    }
    .text-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:22px;
      color:#394356;
      font-weight:700;
      text-decoration:none;
      border-bottom:1px solid rgba(57,67,86,.38);
      font-size:.92rem;
    }
    .text-link:after{ content:"→"; }
    .ruled-list{ border-top:1px solid var(--line-dark); }
    .ruled-row{
      display:grid;
      grid-template-columns:160px 1fr;
      gap:20px;
      padding:16px 0;
      border-bottom:1px solid var(--line);
      font-size:.92rem;
    }
    .ruled-row strong{ color:#2d2824; }
    .ruled-row span{ color:var(--muted); }
    .price-note{ margin:18px 0 0; color:var(--muted); font-size:.86rem; line-height:1.75; }

    .package-photo,
    .card-photo,
    .dripbag-photo{
      position:relative;
      min-height:330px;
      background:#fff;
      border-top:1px solid rgba(36,32,29,.16);
      border-bottom:1px solid rgba(36,32,29,.16);
      box-shadow:0 18px 42px rgba(52,42,33,.07);
      overflow:hidden;
    }
    .package-photo:before,
    .card-photo:before,
    .dripbag-photo:before{
      content:"";
      position:absolute;
      inset:0;
      background-size:cover, auto, auto, auto;
      background-position:center;
      background-repeat:no-repeat, repeat, repeat, repeat;
    }
    .package-photo:before{
      background-image:
        var(--package-photo-image),
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(246,239,229,.68)),
        repeating-linear-gradient(90deg, rgba(75,63,56,.08) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, rgba(75,63,56,.06) 0 1px, transparent 1px 34px);
    }
    .card-photo:before{
      background-image:
        var(--card-photo-image),
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(238,242,245,.68)),
        repeating-linear-gradient(90deg, rgba(75,63,56,.08) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, rgba(75,63,56,.06) 0 1px, transparent 1px 34px);
    }
    .dripbag-photo:before{
      background-image:
        var(--dripbag-photo-image),
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(246,239,229,.72)),
        repeating-linear-gradient(90deg, rgba(75,63,56,.08) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, rgba(75,63,56,.06) 0 1px, transparent 1px 34px);
    }
    .delivery-photos{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
    .photo-note{ margin:10px 0 0; color:var(--muted); font-size:.78rem; line-height:1.6; }
    .delivery-photo-wide{ grid-column:1 / -1; }
    .photo-frame,
    .package-photo,
    .card-photo,
    .dripbag-photo{
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .package-photo,
    .card-photo,
    .dripbag-photo{
      padding:24px;
    }
    .photo-guide{
      position:relative;
      z-index:2;
      width:min(460px,100%);
      background:rgba(255,253,250,.86);
      border-top:1px solid rgba(36,32,29,.18);
      border-bottom:1px solid rgba(36,32,29,.12);
      padding:18px 18px 16px;
      color:#4b433d;
      backdrop-filter:blur(2px);
      -webkit-backdrop-filter:blur(2px);
    }
    .photo-guide .guide-label{
      display:block;
      color:var(--accent);
      font-size:.66rem;
      letter-spacing:.16em;
      font-weight:800;
      margin-bottom:8px;
    }
    .photo-guide strong{
      display:block;
      color:var(--ink);
      font-size:.96rem;
      line-height:1.55;
      margin-bottom:6px;
    }
    .photo-guide p{
      margin:0;
      color:var(--muted);
      font-size:.78rem;
      line-height:1.7;
    }
    .prompt-box{
      border-top:1px solid var(--line-dark);
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.58);
      padding:14px 0;
      color:var(--muted);
      font-size:.82rem;
      line-height:1.7;
    }
    .prompt-box summary{
      cursor:pointer;
      list-style:none;
      font-weight:700;
      color:#4b3f38;
    }
    .prompt-box summary::-webkit-details-marker{ display:none; }
    .prompt-box summary:after{ content:"＋"; float:right; color:var(--accent); }
    .prompt-box[open] summary:after{ content:"−"; }
    .prompt-box pre{
      white-space:pre-wrap;
      margin:12px 0 0;
      padding:12px 0 0;
      border-top:1px solid var(--line);
      font-family:inherit;
      font-size:.78rem;
      color:#514942;
      line-height:1.72;
    }

    .public-note{
      margin-top:28px;
      padding:18px 0;
      border-top:1px solid var(--line-dark);
      border-bottom:1px solid var(--line);
      color:var(--muted);
      font-size:.88rem;
      line-height:1.8;
    }
    .public-note strong{
      display:block;
      margin-bottom:6px;
      color:var(--ink);
      font-size:.98rem;
    }

    .finish-layout{
      align-items:start;
    }
    .finish .band-inner{
      padding-top:78px;
      padding-bottom:82px;
    }

    .finish-options{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:0;
      border-top:1px solid var(--line-dark);
      border-bottom:1px solid var(--line);
    }
    .finish-option{
      padding:20px 18px;
      border-left:1px solid var(--line);
    }
    .finish-option:first-child{ border-left:0; }
    .finish-option strong{ display:block; margin-bottom:7px; font-size:1rem; }
    .finish-option p{ margin:0; color:var(--muted); font-size:.86rem; line-height:1.7; }
    .finish-shipping-note{
      margin:15px 0 0;
      color:var(--muted);
      font-size:.82rem;
      line-height:1.72;
    }

    .faq-wrap{ max-width:900px; margin:0 auto; }
    .faq-cta{
      margin-top:30px;
      padding:24px 0 0;
      border-top:1px solid var(--line-dark);
      text-align:center;
    }
    .faq-cta p{
      margin:0 0 14px;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.75;
    }
    .faq-cta .btn{
      width:min(360px,100%);
      margin:0 auto;
    }
    .faq details{ border-top:1px solid var(--line); background:transparent; }
    .faq details:last-child{ border-bottom:1px solid var(--line); }
    .faq summary{
      cursor:pointer;
      padding:18px 0;
      font-weight:700;
      list-style:none;
      color:var(--ink);
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      align-items:center;
    }
    .faq summary:after{ content:"＋"; color:var(--accent); font-weight:800; }
    .faq details[open] summary:after{ content:"−"; }
    .faq summary::-webkit-details-marker{ display:none; }
    .details-body{
      border-top:1px solid rgba(222,213,202,.65);
      padding:16px 0 20px;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.8;
    }

    .result{
      display:none;
      background:#ffffff;
      border-top:1px solid var(--line);
    }
    .result .band-inner{ padding-top:70px; padding-bottom:70px; }
    .result-card{
      position:relative;
      max-width:960px;
      margin:0 auto;
      background:#fff;
      border-top:4px solid var(--accent);
      box-shadow:0 22px 54px rgba(64,52,42,.08);
      padding:34px;
    }
    .result-action-card{
      max-width:960px;
      margin:22px auto 0;
      background:#ffffff;
      border:1px solid var(--line);
      box-shadow:0 18px 44px rgba(64,52,42,.045);
      padding:28px 34px 30px;
    }
    .result-utility{
      max-width:960px;
      margin:22px auto 0;
      background:#ffffff;
    }
    .share-section{
      background:#ffffff;
      border:1px solid var(--line);
      box-shadow:0 14px 34px rgba(64,52,42,.035);
      padding:22px 24px 24px;
    }
    .result-header{
      border-bottom:1px solid var(--line);
      padding-bottom:20px;
      margin-bottom:22px;
    }
    .result-title-block{ min-width:0; }
    .result-kicker-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin:0 0 14px;
    }
    .result-kicker-row .section-kicker{ margin:0; }
    .copy-result-btn.btn.ghost{
      width:auto;
      min-height:0;
      padding:0 0 2px;
      border:0;
      border-bottom:1px solid rgba(111,103,95,.35);
      background:transparent;
      color:var(--muted);
      box-shadow:none;
      font-size:.72rem;
      font-weight:700;
      line-height:1.4;
      white-space:nowrap;
      letter-spacing:.03em;
    }
    .copy-result-btn.btn.ghost:hover{
      background:transparent;
      color:var(--ink);
      transform:none;
    }
    .copy-feedback{
      min-height:1.4em;
      margin:-8px 0 8px;
      color:var(--muted);
      font-size:.74rem;
      line-height:1.4;
      text-align:right;
    }
    .blend-name{
      font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
      font-size:clamp(2rem,5vw,3.2rem);
      line-height:1.22;
      letter-spacing:-.055em;
      font-weight:500;
      margin:0 0 8px;
      color:var(--ink);
    }
    .subtitle{ font-size:.98rem; color:#687a64; margin:0; font-weight:700; }
    .main-text{ white-space:pre-wrap; font-size:.98rem; line-height:1.96; color:var(--ink); margin:0 0 18px; }
    .hashtags,.tag-list{ display:flex; flex-wrap:wrap; gap:8px; }
    .hashtags{ margin:12px 0 26px; }
    .hashtag,.taste-tag{
      color:#5f725c;
      background:#f2f6f1;
      border:1px solid var(--sage2);
      padding:6px 9px;
      font-size:.8rem;
    }
    .section{ border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
    .section-title{ font-size:.98rem; font-weight:800; margin:0 0 10px; color:var(--ink); }
    .taste-text{ margin:0; color:var(--ink); line-height:1.8; font-size:.95rem; }
    .tag-list{ margin-top:13px; }
    .price-box{
      border-top:1px solid var(--line-dark);
      border-bottom:1px solid var(--line);
      padding:20px 0 22px;
      margin-top:22px;
    }
    .price-line{
      display:flex;
      align-items:baseline;
      flex-wrap:wrap;
      gap:2px;
      margin-top:2px;
      color:var(--ink);
    }
    .price{ font-size:1.42rem; line-height:1.25; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
    .price-unit{ font-size:.92rem; color:#4b4540; }
    .price-box .price-note{ margin:10px 0 0; color:var(--muted); font-size:.8rem; line-height:1.65; }
    .blend-summary{
      border-top:1px solid var(--line);
      border-bottom:0;
      padding:16px 0 0;
      margin-top:20px;
    }
    .blend-summary-title{ margin:0 0 10px; color:var(--ink); font-size:.98rem; font-weight:800; }
    .blend-summary-list{ display:grid; gap:8px; margin:0; }
    .blend-summary-row{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; color:var(--ink); font-size:.9rem; }
    .blend-summary-row span:first-child{ min-width:0; overflow-wrap:anywhere; }
    .blend-summary-row span:last-child{ font-weight:800; white-space:nowrap; color:#5f725c; }
    .blend-summary-roast{ margin:12px 0 0; color:var(--muted); font-size:.86rem; }
    .blend-detail{ margin-top:10px; overflow:hidden; background:#fff; }
    .blend-detail summary{ cursor:pointer; padding:2px 0 10px; font-weight:700; list-style:none; color:#5f725c; display:inline-block; font-size:.88rem; }
    .blend-detail summary:hover{ text-decoration:underline; }
    .blend-detail summary::-webkit-details-marker{ display:none; }
    .blend-detail-close{ display:none; }
    .blend-detail[open] .blend-detail-open{ display:none; }
    .blend-detail[open] .blend-detail-close{ display:inline; }
    .blend-detail .details-body{ border-top:1px solid var(--line); margin-top:8px; }
    .beans-list{ display:grid; gap:0; border-top:0; }
    .bean-card{ background:#fff; border-bottom:1px solid var(--line); padding:14px 0; }
    .bean-head{ display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; color:var(--ink); font-weight:700; }
    .bean-role{ display:inline-block; margin:0 0 7px; color:#5f725c; font-size:.82rem; line-height:1.5; }
    .bean-reason{ margin:0; color:var(--muted); font-size:.86rem; line-height:1.65; }
    .roast-line{ margin:16px 0 0; color:var(--muted); font-size:.88rem; }
    .purchase{ display:none; margin-top:20px; border-top:1px solid var(--line); padding-top:20px; }
    .purchase.active{ display:block; }
    .radio-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 16px; }
    .radio-row label{ display:flex; align-items:flex-start; gap:8px; border:1px solid var(--line); padding:10px; background:#fff; cursor:pointer; font-size:.9rem; color:var(--ink); line-height:1.45; }
    .purchase-actions{ display:grid; grid-template-columns:1fr; gap:10px; }
    .purchase-link{ display:none; margin-top:18px; border-top:1px solid var(--line); padding:16px 0 0; text-align:center; }
    .purchase-link p{ margin:0 0 12px; color:#6f675f; }
    #purchaseBtn{
      background:var(--accent);
      border-color:var(--accent);
      color:#fff;
      box-shadow:0 10px 24px rgba(127,146,123,.22);
    }
    #purchaseBtn:hover{
      background:#6f826b;
      border-color:#6f826b;
    }
    .prebuy-note{
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:13px 0;
      color:var(--muted);
      font-size:.86rem;
      line-height:1.72;
      margin:18px 0 0;
    }

    .purchase-flow{
      margin:18px 0 0;
      border-top:1px solid var(--line-dark);
    }
    .purchase-step{
      display:grid;
      grid-template-columns:42px minmax(0,1fr);
      gap:12px;
      padding:15px 0;
      border-bottom:1px solid var(--line);
      align-items:start;
    }
    .purchase-step-number{
      width:32px;
      height:32px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--sage);
      color:#5f725c;
      font-size:.73rem;
      font-weight:800;
      letter-spacing:.04em;
    }
    .purchase-step strong{
      display:block;
      margin:1px 0 3px;
      color:var(--ink);
      font-size:.91rem;
      line-height:1.5;
    }
    .purchase-step p{
      margin:0;
      color:var(--muted);
      font-size:.8rem;
      line-height:1.62;
    }
    .restore-purchase-link{
      margin:12px 0 0;
      text-align:center;
    }
    .restore-purchase-link button{
      appearance:none;
      border:0;
      border-bottom:1px solid rgba(95,114,92,.38);
      background:transparent;
      color:#5f725c;
      padding:2px 0;
      cursor:pointer;
      font:inherit;
      font-size:.86rem;
      font-weight:700;
      line-height:1.5;
    }
    .restore-purchase-link button:hover{
      color:var(--ink);
      border-bottom-color:rgba(36,32,29,.42);
    }
    .restore-purchase-link small{
      display:block;
      margin-top:4px;
      color:var(--muted);
      font-size:.74rem;
      line-height:1.55;
    }

    .share-note{
      margin:0 0 12px;
      color:var(--muted);
      font-size:.86rem;
      line-height:1.68;
    }
    .share-actions{
      display:grid;
      grid-template-columns:minmax(0,320px);
      gap:10px;
      align-items:stretch;
    }
    .share-btn{
      min-height:48px;
      font-size:.9rem;
    }
    .retry-section{
      margin-top:16px;
      padding-top:0;
      border-top:0;
      text-align:center;
      background:#ffffff;
    }
    .retry-section .btn{
      min-width:220px;
      background:#ffffff;
    }
    .share-feedback{
      margin:12px 0 0;
      color:var(--muted);
      font-size:.8rem;
      line-height:1.6;
      min-height:1.6em;
    }

    .footer{
      color:#6f675f;
      text-align:center;
      font-size:.78rem;
      padding:28px 12px 36px;
      background:#ffffff;
      border-top:1px solid rgba(227,219,210,.72);
    }
    .footer p{ margin:.3em 0; }
    .footer a{ text-decoration:none; border-bottom:1px solid rgba(111,103,95,.55); }

    @media (max-width: 860px){
      .topbar{ padding:14px 16px 8px; }
      .top-note{ display:none; }
      .band-inner{ padding:58px 18px; }
      .band.hero:before{ display:none; }
      .hero .band-inner{
        min-height:auto;
        display:block;
        padding-top:0;
        padding-bottom:34px;
      }
      .hero-message{
        min-height:310px;
        margin:0 -18px 16px;
        padding:30px 18px 26px;
        display:flex;
        flex-direction:column;
        justify-content:flex-end;
        overflow:hidden;
        border-top:1px solid rgba(36,32,29,.16);
        border-bottom:1px solid rgba(36,32,29,.16);
        box-shadow:var(--shadow);
      }
      .hero-message:before{
        content:"";
        position:absolute;
        inset:0;
        background-image:
          linear-gradient(180deg, rgba(255,253,250,.28) 0%, rgba(255,253,250,.34) 54%, rgba(255,253,250,.46) 100%),
          url("./index_files/01.png"),
          var(--hero-photo-image);
        background-size:auto, cover, cover;
        background-position:center, 72% center, 72% center;
        background-repeat:repeat, no-repeat, no-repeat;
        z-index:0;
opacity: .72;
      }
      .hero-message:after{
        content:"";
        position:absolute;
        inset:0;
        background:
          repeating-linear-gradient(90deg, rgba(127,146,123,.045) 0 1px, transparent 1px 34px),
          repeating-linear-gradient(0deg, rgba(127,146,123,.035) 0 1px, transparent 1px 34px);
        z-index:0;
        pointer-events:none;
      }
      .hero-message > *{
        position:relative;
        z-index:1;
      }
.hero-message .eyebrow{
  margin-bottom:10px;
  text-shadow:0 0 8px rgba(255,255,255,.9);
}

.hero-message h1{
  margin-bottom:16px;
  font-size:clamp(2.25rem,12vw,3.65rem);
  line-height:1.12;
  letter-spacing:-.06em;
  text-shadow:
    0 0 10px rgba(255,255,255,.96),
    0 2px 10px rgba(255,255,255,.82);
}

.lead{
  font-size:.94rem;
  line-height:1.72;
  margin-bottom:0;
  text-shadow:
    0 0 8px rgba(255,255,255,.94),
    0 1px 6px rgba(255,255,255,.78);
}
      .trial-copy{ margin-bottom:14px; }
      .hero-visual{ display:none; }
      .input-box{ margin-top:18px; padding:18px; }
      .input-label{ grid-template-columns:1fr; gap:4px; }
      .input-row{ grid-template-columns:1fr; }
      .btn{ width:100%; }
      .section-head,
      .sample-layout,
      .beans-layout,
      .price-layout,
      .delivery-layout,
      .finish-layout{ grid-template-columns:1fr; gap:24px; }
      .section-head{ margin-bottom:26px; }
      .section-heading{ font-size:clamp(1.85rem,9vw,2.7rem); }
      .example-grid{ grid-template-columns:1fr; }
      .example-item,
      .example-item:nth-child(odd),
      .example-item:nth-child(even){ padding:17px 0; border-right:0; border-top:1px solid var(--line); }
      .example-item:first-child{ border-top:0; }
      .delivery-photos{ grid-template-columns:1fr; }
      .sample-paper{ padding:22px 18px; }
      .sample-spec{ grid-template-columns:1fr; gap:14px; }
      .ruled-row{ grid-template-columns:1fr; gap:4px; }
      .finish-options{ grid-template-columns:1fr; }
      .finish-option{ border-left:0; border-top:1px solid var(--line); padding:17px 0; }
      .finish-option:first-child{ border-top:0; }
      .result-card,
      .result-action-card{ padding:24px 18px; }
      .result-kicker-row{ gap:10px; margin-bottom:12px; }
      .copy-result-btn.btn.ghost{ width:auto; font-size:.7rem; }
      .copy-feedback{ text-align:right; }
      .share-section{ padding:20px 18px 22px; }
      .share-actions{ grid-template-columns:1fr; }
      .radio-row{ grid-template-columns:1fr; }
      .price-box{ grid-template-columns:1fr; }
      .price{ text-align:left; }
      .share-actions{ grid-template-columns:1fr; }
      .restore-item > summary{ padding:12px 14px; }
      .restore-summary-title,
      .restore-detail-body{ font-size:.9rem; }
      .restore-detail-row{ grid-template-columns:76px minmax(0,1fr); }
      .restore-detail-row b{ padding-left:14px; }
      .restore-detail-row span{ padding-right:14px; }
      .created-page-item{ grid-template-columns:1fr; }
      .created-page-open.btn{ width:100%; }
    }

    @media (min-width: 861px){
      .band.examples .band-inner,
      .band.sample .band-inner,
      .band.beans .band-inner,
      .band.price-delivery .band-inner,
      .band.package .band-inner,
      .band.finish .band-inner,
      .band.faq-band .band-inner{ min-height:88svh; display:flex; flex-direction:column; justify-content:center; }
    }


    @media (max-width: 860px){
      .sample-detail > summary{
        grid-template-columns:64px minmax(0,1fr) auto;
        gap:10px;
        padding:14px;
      }
      .sample-summary-note{
        white-space:normal;
      }
      .sample-detail-body{
        padding:14px;
      }
      .sample-mini-paper{
        padding:18px 16px 20px;
      }
      .sample-mini-meta{
        grid-template-columns:1fr;
        gap:12px;
      }
      .sample-mini-name{
        font-size:1.55rem;
      }
    }