/* ツギガミ 紹介サイト。CSP で inline style を禁じているので、見た目はすべてここに置く。 */
  :root{
    --sumi:#131D38; --sumi-2:#1B2A50; --ai:#22335E;
    --washi:#F1ECE0; --washi-2:#E9E2D2; --paper:#FBF9F3;
    --gold:#E3A12E; --gold-deep:#B9801C;
    --ink:#20273A; --muted:#6A7082; --line:#DAD2BF;
    --maxw:1080px; --read:680px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"Zen Kaku Gothic New",system-ui,sans-serif;color:var(--ink);background:var(--washi);line-height:1.9;-webkit-font-smoothing:antialiased;font-size:16px}
  /* washi: one seamless tile laid over the whole page; scrolls with the paper */
  body{position:relative}
  body::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:url(washi.webp) 0 0/50% auto repeat;mix-blend-mode:multiply;opacity:.3;-webkit-mask:url(washi-mask.png) 37% 0/83% auto repeat;mask:url(washi-mask.png) 37% 0/83% auto repeat}
  .m{font-family:"Shippori Mincho B1",serif}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
  a{color:inherit;text-decoration:none}
  img{max-width:100%}

  /* ── type scale ── */
  h1{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:clamp(39px,7.6vw,74px);line-height:1.32;letter-spacing:.02em}
  h2{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:clamp(27px,4.4vw,40px);line-height:1.5;letter-spacing:.015em;color:var(--sumi)}
  h3{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:19px;color:var(--sumi)}
  .kicker{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:13px;letter-spacing:.22em;color:var(--gold-deep)}
  .lead{max-width:var(--read);color:var(--muted);font-size:17px;margin-top:20px}
  p{max-width:var(--read)}

  /* ── buttons ── */
  .btn{display:inline-block;font-weight:700;font-size:15px;padding:14px 28px;border-radius:2px;transition:background .15s,color .15s,border-color .15s}
  .btn-gold{background:var(--gold);color:#271A05}
  .btn-gold:hover{background:var(--gold-deep);color:#fff}
  .btn-line{border:1px solid rgba(255,255,255,.4);color:#fff}
  .btn-line:hover{border-color:var(--gold);color:var(--gold)}
  .btn-ink{border:1px solid var(--sumi);color:var(--sumi)}
  .btn-ink:hover{background:var(--sumi);color:var(--washi)}

  /* ── header ── */
  header{position:sticky;top:0;z-index:50;background:rgba(241,236,224,.9);backdrop-filter:blur(8px)}
  /* kasane-tsugi: one sheet edge in 紅, uneven width, barely waving */
  header::after{content:"";position:absolute;left:0;right:0;top:100%;height:4px;pointer-events:none;
    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 4' preserveAspectRatio='none'><path fill='%23AF375B' d='M0,0H1000V2.6C700,3.6 450,2.2 200,3.2C120,3.5 50,2.8 0,3Z'/></svg>") 0 0/100% 100% no-repeat}
  .nav{display:flex;align-items:center;gap:24px;max-width:var(--maxw);margin:0 auto;padding:13px 26px}
  .nav img{height:32px;width:auto}
  .nav .links{margin-left:auto;display:flex;align-items:center;gap:26px}
  .nav .links a{font-size:14px;color:var(--sumi-2);font-weight:500}
  .nav .links a:hover{color:var(--gold-deep)}
  .nav .links a.btn{padding:9px 18px;color:#271A05}
  @media(max-width:720px){ .nav .links a.plain{display:none} }

  /* ── section rhythm ── */
  .sec{padding:104px 0}
  /* seams: every section top is cut on the same gentle rising-right diagonal and laid over the one before */
  :root{--sl:4.5vw}
  .sec{position:relative;margin-top:calc(var(--sl) * -1);padding-top:calc(104px + var(--sl));clip-path:polygon(0 var(--sl),100% 0,100% 100%,0 100%)}
  .sec-dark{background:var(--sumi);color:#EAE7DE}
  .sec-dark h2{color:#fff}
  .sec-dark .lead{color:#B9C0D2}
  .sec-paper{background:var(--washi)}
  .sec-paper2{background:var(--washi-2)}
  .hl{color:var(--sumi);background:linear-gradient(transparent 62%, rgba(227,161,46,.45) 62% 92%, transparent 92%)}

  /* ── hero: orange sky + backlit navy mountain = the logo, made literal ── */
  .hero{background:#19223D url(navy-washi.webp) 0 0/200% auto repeat;color:#fff;overflow:hidden;--mh:150px}
  .hero-band{position:relative;padding:120px 0 148px}
  .hero-img{position:absolute;inset:0;background:url(hero.jpg) center 22%/cover no-repeat;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--mh)*.66),60% calc(100% - var(--mh)*.5),30% calc(100% - var(--mh)*.82),0 calc(100% - var(--mh)*.45))}
  .hero-band .in{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:2}
  .hero .kicker{color:#fff;display:inline-flex;align-items:center;gap:12px;text-shadow:0 1px 10px rgba(0,0,0,.55)}
  .hero .kicker::before{content:"";width:30px;height:1px;background:var(--gold)}
  .hero h1{margin:24px 0 0;max-width:14ch;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4)}
  .hero-mtn{position:absolute;left:0;bottom:0;width:100%;height:var(--mh);z-index:1;display:block;pointer-events:none}
  .hero-body .in{max-width:var(--maxw);margin:0 auto;padding:30px 26px 104px}
  .hero .sub{max-width:40ch;color:#C3CADC;font-size:clamp(16px,2.1vw,19px)}
  .hero .act{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
  .anim{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.2,1) .05s forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){ .anim{animation:none;opacity:1;transform:none} }
  @media(max-width:720px){ .hero{--mh:116px} .hero-band{padding:92px 0 120px} .hero-body .in{padding-bottom:80px} }

  /* ── problem: joined strips, not cards ── */
  .joins{margin-top:52px;border-top:1px solid var(--line)}
  .join{display:grid;grid-template-columns:72px 1fr;gap:8px 26px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line)}
  .join .idx{font-family:"Shippori Mincho B1",serif;font-size:34px;font-weight:600;color:var(--gold-deep);line-height:1}
  .join h3{margin-bottom:6px}
  .join p{color:var(--muted);font-size:15px}
  @media(max-width:620px){ .join{grid-template-columns:1fr;gap:4px} .join .idx{font-size:26px} }

  /* ── cycle: diagram + flows ── */
  .cyc{display:grid;grid-template-columns:.92fr 1fr;gap:46px;margin-top:52px;align-items:center}
  @media(max-width:860px){ .cyc{grid-template-columns:1fr;gap:30px} }
  .cyc img{width:100%;height:auto;display:block;border-radius:8.2%/9.4%;box-shadow:0 20px 50px rgba(19,29,56,.14)}
  .flow + .flow{margin-top:26px}
  .flow-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .flow-h b{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:16px;color:var(--sumi);display:inline-flex;align-items:center;gap:9px}
  .flow-h b::before{content:"";width:12px;height:12px;border-radius:2px}
  .flow-h.navy b::before{background:var(--sumi)}
  .flow-h.gold b::before{background:var(--gold)}
  .flow-h span{color:var(--muted);font-size:13px}
  .step{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
  .step:first-of-type{border-top:0}
  .step .n{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:17px;color:#fff;background:var(--sumi);width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
  .step.g .n{background:var(--gold);color:#271A05}
  .step h3{font-size:16.5px;margin-bottom:2px}
  .step p{font-size:14.5px;color:var(--muted)}
  .loop{margin-top:34px;font-family:"Shippori Mincho B1",serif;font-size:17px;color:var(--sumi);text-align:center}
  .loop em{font-style:normal;color:var(--gold-deep)}

  /* ── why (dark) ── */
  .why-q{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:clamp(24px,3.6vw,34px);line-height:1.62;max-width:18ch;margin-top:22px;color:#fff}
  .why-q .g{color:var(--gold)}
  .why .lead{margin-top:28px}
  .why-tex{position:absolute;inset:0;opacity:.09;background:url(hero.jpg) center/cover;mix-blend-mode:screen;pointer-events:none}

  /* ── features: distinct, not card grid ── */
  .feats{margin-top:52px;display:grid;gap:0}
  .feat{display:grid;grid-template-columns:52px 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--line)}
  .feat:last-child{border-bottom:1px solid var(--line)}
  .feat .gl{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%}
  .feat h3{margin-bottom:5px}
  .feat p{color:var(--muted);font-size:15px}

  /* ── audience ── */
  .aud{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:50px;background:var(--line);border:1px solid var(--line)}
  @media(max-width:620px){ .aud{grid-template-columns:1fr} }
  .aud > div{background:var(--paper);padding:34px}
  .aud .who{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:22px;color:var(--sumi)}
  .aud .role{color:var(--gold-deep);font-size:13px;letter-spacing:.1em;margin:4px 0 16px}
  .aud ul{list-style:none;display:grid;gap:10px}
  .aud li{position:relative;padding-left:20px;color:var(--muted);font-size:15px}
  .aud li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}

  /* ── pricing ── */
  .pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
  .pill{border:1px solid var(--sumi);color:var(--sumi);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:700}
  .ptable{width:100%;border-collapse:collapse;margin-top:34px;background:var(--paper);border:1px solid var(--line)}
  .ptable th,.ptable td{text-align:left;padding:17px 22px;border-bottom:1px solid var(--line);font-size:15px}
  .ptable th{background:var(--sumi);color:#fff;font-family:"Shippori Mincho B1",serif;font-weight:600}
  .ptable td.amt{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:20px;color:var(--sumi);white-space:nowrap}
  .ptable tr:last-child td{border-bottom:0}
  .fine{color:var(--muted);font-size:13px;margin-top:14px}

  /* ── vision / about (dark) ── */
  .about{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start}
  @media(max-width:820px){ .about{grid-template-columns:1fr;gap:30px} }
  .about .body p{color:#C3CADC;font-size:15.5px;margin-top:16px;max-width:none}
  .vq{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:22px;line-height:1.72;color:#fff}
  .vq .g{color:var(--gold)}
  .vmeta{margin-top:22px;border-top:1px solid rgba(255,255,255,.14)}
  .vmeta div{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14px;color:#AEB6CA;display:flex;justify-content:space-between;gap:16px}
  .vmeta b{color:#fff;font-weight:700}

  /* ── final cta ── */
  .final{background:var(--sumi);color:#fff;text-align:center;position:relative;overflow:hidden}
  .final h2{color:#fff;max-width:20ch;margin:0 auto}
  .final .lead{margin:22px auto 0;color:#C3CADC}
  .final .act{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}

  /* ── footer ── */
  footer{background:#0E1730;color:#8A93AC;padding:40px 0}
  footer .row{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
  footer .bk{font-family:"Shippori Mincho B1",serif;color:#fff;font-size:18px;letter-spacing:.14em}
  footer a{color:#8A93AC;font-size:14px}
  footer a:hover{color:var(--gold)}
  footer .sp{margin-left:auto;font-size:12.5px;color:#59627C}

  /* ── production additions ── */
  .kicker + h2{margin-top:14px}
  .sec-dark .kicker{color:var(--gold)}
  .rel{position:relative}
  .ptable .r{text-align:right}
  .marks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;margin-top:38px;max-width:760px}
  @media(max-width:620px){ .marks{grid-template-columns:1fr} }
  .marks li{position:relative;padding-left:22px;color:var(--ink);font-size:15.5px}
  .marks li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}

  /* ── contact form ── */
  .cform{max-width:560px;margin:64px auto 0;text-align:left;border-top:1px solid rgba(255,255,255,.16);padding-top:44px}
  .cform h3{color:#fff;font-size:22px;margin-bottom:22px}
  .cform label{display:block;font-size:14px;color:#C3CADC;margin-top:18px}
  .cform input,.cform textarea{display:block;width:100%;margin-top:7px;padding:12px 14px;font:inherit;font-size:16px;color:#fff;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);border-radius:2px}
  .cform textarea{resize:vertical;min-height:132px;line-height:1.7}
  .cform input:focus-visible,.cform textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
  .cform button{margin-top:28px;border:0;cursor:pointer;font-family:inherit}
  .cform button:disabled{opacity:.55;cursor:default}
  .cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .cnote{font-size:13px;color:#8F98B0;margin-top:16px;max-width:none}
  .cstatus{font-size:15px;margin-top:14px;min-height:1.9em;max-width:none}
  .cstatus.ok{color:#BFE0A8}
  .cstatus.ng{color:#F2B8A2}
  a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}