/*! world-atelier — /studio/ (サイト制作). Loaded after studio.css.
    A lit workroom: near-white paper carrying a fine dot grid, with the house's
    own three colours thinned to pastel and laid down as large organic areas —
    a bleeding circle, a blob, floating capsules, thin diagonals, and the unit's
    name cut off by the bottom edge in outline. Full saturation is kept for the
    small things only (the call to action, the rails, the prices), which is what
    holds it to the brand. Light theme — data-theme="light" on body flips the
    chrome (vq.css); the footer stays dark, as everywhere.
    Gradients, strokes and type only: no images, no CSS 3D, no clip-path
    (Safari/Edge), and no data: backgrounds (CSP img-src 'self'). */
body[data-world="atelier"]{
  --ground:#F7F7F8;--raise:#FFFFFF;
  --ink:#131A2B;--ink-mid:#4E5872;--ink-dim:#545F7B;--ink-faint:#646F8B;
  --line:rgba(19,26,43,.10);--line-firm:rgba(19,26,43,.20);
  --acc:#2E7BFF;--acc-line:rgba(46,123,255,.40);--acc-glow:rgba(46,123,255,.14);--tint:#FF6B6B;
  --coral:#FF6B6B;
  --p-pink:#FFDED9;--p-sky:#D9E6FF;--p-lav:#E7E0FF;--p-mint:#D4F3EE;
  background-color:#F7F7F8;
  /* The dot grid the whole room sits on. It tiles with the page; the footer
     paints its own opaque ground over it. */
  background-image:radial-gradient(rgba(19,26,43,.105) 1.25px,transparent 1.35px);
  background-size:21px 21px;background-position:-1px -1px;
  /* PC は横に広く（2026-10-15 仕様45。/records/ と同じ考え方）：中身は最大 1400px、
     1440px の画面で左右 80px 前後（中身 1280px）。--pad はヘッダーとフッターも読む。 */
  --shell:1400px;
}
@media (min-width:1001px){body[data-world="atelier"]{--pad:clamp(56px,5.6vw,80px)}}
body[data-world="atelier"] main{--grad:linear-gradient(100deg,#2E7BFF 0%,#7A5CFF 48%,#FF6B6B 100%)}

/* ── Surfaces ───────────────────────────────────────────────────────
   Paper on paper: white, separated by shadow rather than by line. .prose is
   deliberately NOT in this list — a paragraph given a card ground turns into a
   white box on a near-white page (the Studio 07 mistake). */
body[data-world="atelier"] :is(.card,.work,.plan,.step,.faq details,.form-wrap,.vq-form-msg,.vq-noscript){
  background:#FFFFFF;border-color:var(--line);border-radius:20px;
  box-shadow:0 1px 2px rgba(19,26,43,.03),0 16px 38px rgba(19,26,43,.06)}
body[data-world="atelier"] :is(.card,.work):hover{border-color:rgba(46,123,255,.28);
  box-shadow:0 2px 5px rgba(19,26,43,.04),0 30px 62px rgba(19,26,43,.11);transform:translateY(-6px)}
/* The rail becomes a short tab hanging from the top edge, not a full band. */
body[data-world="atelier"] .card .rail{left:clamp(22px,2.3vw,30px);right:auto;width:40px;height:4px;border-radius:0 0 4px 4px}
body[data-world="atelier"] .plan .pick{color:#FFFFFF}
body[data-world="atelier"] .tags li{background:rgba(19,26,43,.04);color:var(--ink-dim);border-color:var(--line)}
body[data-world="atelier"] .work-seo{color:#D9463C;background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.42)}
body[data-world="atelier"] .work-shot{background:#EEF0F4}
body[data-world="atelier"] .prose{color:var(--ink-mid)}
body[data-world="atelier"] :is(input,select,textarea){background:#FFFFFF;border-color:var(--line-firm);color:var(--ink);border-radius:12px}
body[data-world="atelier"] :is(input,select,textarea):focus{background:#FFFFFF;border-color:var(--acc)}
body[data-world="atelier"] .lbl{color:var(--ink-dim)}
body[data-world="atelier"] .lbl b{color:var(--coral)}
/* The shell's error text (#FFC9C5) is drawn for a dark ground; on white it is
   1.46:1. Same red family, taken down to the AA floor (6.57:1 on the card). */
body[data-world="atelier"] .vq-form-msg[data-state="error"]{color:#B42318;border-color:rgba(180,35,24,.45)}

/* Full saturation, kept for the small things. The call to action is coral, the
   one warm note on a cool page — the header's own CTA keeps the house gradient. */
body[data-world="atelier"] :is(.btn,.submit){
  background:linear-gradient(100deg,#FF8B87 0%,#FF6B6B 56%,#FF7FA4 100%);color:var(--ink);
  box-shadow:0 14px 32px rgba(255,107,107,.32)}
body[data-world="atelier"] :is(.btn,.submit):hover{filter:brightness(1.04);transform:translateY(-2px)}
body[data-world="atelier"] .btn-ghost{background:#FFFFFF;border-color:rgba(19,26,43,.14);color:var(--ink);
  box-shadow:0 6px 18px rgba(19,26,43,.05)}
body[data-world="atelier"] .btn-ghost:hover{border-color:var(--acc);color:var(--acc);background:#FFFFFF}

/* ── Section furniture ───────────────────────────────────────────────
   縦を詰める（2026-10-15 仕様45）：節の上下の余白は PC 64px ずつ・スマホ 40px ずつ（同業のプロの
   中央値 83/75px の合計に合わせた幅）。見出しの飾り（番号・英字の見出し・中抜きの大きな節の名前）は外した。 */
body[data-world="atelier"] .sec{padding-top:clamp(40px,4.45vw,64px);padding-bottom:clamp(40px,4.45vw,64px)}
body[data-world="atelier"] .sec h2{margin:0 0 clamp(20px,1.7vw,24px);font-size:clamp(26px,3vw,42px);letter-spacing:-.03em}
body[data-world="atelier"] .sec-lede{margin:-8px 0 clamp(18px,1.7vw,24px);font-size:clamp(14px,1.2vw,15.5px);line-height:1.85}
body[data-world="atelier"] .sec h2,body[data-world="atelier"] .sec-lede{position:relative;z-index:1}

/* Pastel keeps drifting down the page: one large soft area and one small
   capsule per section, so no band of it is plain paper. */
body[data-world="atelier"] .sec{overflow:visible;overflow-x:clip}
/* ^ Down the page the pastel may drift from one section into the next; across
   it, nothing may reach past the screen. The hollow section names (.sec-ghost,
   removed 2026-10-15; the pastel shapes still overhang the same way) ran wider than a phone, and body{overflow-x:hidden} does not stop a touch
   browser from widening its layout to fit them: at 375px the page was laid
   out 528px wide and slid sideways (found 2026-10-07). clip cuts the x axis
   only and makes no scroll container, so the sticky header is unaffected. */
body[data-world="atelier"] .sec>.shell{position:relative;z-index:1}
body[data-world="atelier"] .sec::after{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(600px,48vw);aspect-ratio:1.06}
body[data-world="atelier"] .sec:nth-of-type(3n+1)::after{right:-14%;top:4%;
  border-radius:58% 42% 46% 54%/46% 54% 46% 54%;
  background:linear-gradient(150deg,rgba(217,230,255,.92),rgba(231,224,255,.5))}
body[data-world="atelier"] .sec:nth-of-type(3n+2)::after{left:-17%;bottom:0;
  border-radius:44% 56% 60% 40%/56% 44% 58% 42%;
  background:linear-gradient(140deg,rgba(255,222,217,.9),rgba(255,240,238,.45))}
body[data-world="atelier"] .sec:nth-of-type(3n)::after{right:-18%;bottom:2%;
  border-radius:52% 48% 38% 62%/40% 58% 42% 60%;
  background:linear-gradient(160deg,rgba(231,224,255,.85),rgba(212,243,238,.45))}
body[data-world="atelier"] .sec::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:72px;height:25px;border-radius:100px}
body[data-world="atelier"] .sec:nth-of-type(4n+1)::before{left:1.5%;top:9%;background:var(--p-pink);transform:rotate(-25deg)}
body[data-world="atelier"] .sec:nth-of-type(4n+2)::before{right:4%;top:11%;background:var(--p-sky);transform:rotate(19deg)}
body[data-world="atelier"] .sec:nth-of-type(4n+3)::before{left:2.5%;bottom:11%;background:var(--p-lav);transform:rotate(31deg)}
body[data-world="atelier"] .sec:nth-of-type(4n)::before{right:2%;bottom:13%;background:var(--p-mint);transform:rotate(-13deg)}
@media (max-width:1280px){body[data-world="atelier"] .sec::before{display:none}}

/* ── Hero ───────────────────────────────────────────────────────────
   The composition of direction A — the name enormous on the left, the real
   work large on the right — drawn in the softer vocabulary. */
.w-hero--at{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(28px,3vw,40px);overflow:hidden}
.w-hero--at .w-grid{grid-template-columns:minmax(0,1fr) minmax(0,.94fr);align-items:center;
  position:relative;z-index:1}
/* The circle the work sits on, running off the right edge. */
.at-orb{position:absolute;z-index:0;pointer-events:none;right:-15vw;top:-24%;
  width:min(1020px,72vw);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(158deg,#FFE6E2 0%,#EDE7FF 46%,#D9E7FF 100%)}
.at-blob{position:absolute;z-index:0;pointer-events:none;left:-13%;bottom:-30%;
  width:min(560px,46vw);aspect-ratio:1.12;
  border-radius:58% 42% 46% 54%/44% 52% 48% 56%;
  background:linear-gradient(140deg,rgba(255,214,207,.92),rgba(255,238,235,.55))}
@media (prefers-reduced-motion: no-preference){
  .at-orb{animation:at-drift 26s ease-in-out infinite alternate}
  .at-blob{animation:at-drift2 31s ease-in-out infinite alternate}
}
@keyframes at-drift{to{transform:translate3d(-14px,12px,0)}}
@keyframes at-drift2{to{transform:translate3d(16px,-10px,0)}}
/* Thin lines cutting across, and a handful of capsules floating on the paper. */
.at-rays,.at-caps{position:absolute;inset:0;z-index:0;pointer-events:none}
.at-rays i{position:absolute;height:1.5px;border-radius:2px;transform:rotate(-32deg)}
.at-rays i:nth-child(1){left:-3%;top:24%;width:36%;background:linear-gradient(90deg,transparent,#7FB0FF,transparent)}
.at-rays i:nth-child(2){left:9%;bottom:16%;width:25%;background:linear-gradient(90deg,transparent,#FFA3B6,transparent)}
.at-rays i:nth-child(3){right:1%;top:6%;width:22%;background:linear-gradient(90deg,transparent,#6FDCD1,transparent)}
.at-caps i{position:absolute;border-radius:100px;transform:rotate(-26deg)}
.at-caps i:nth-child(1){left:5%;top:13%;width:56px;height:19px;background:#FFC7C0}
.at-caps i:nth-child(2){left:41%;top:5%;width:36px;height:13px;background:#B9D5FF}
.at-caps i:nth-child(3){right:9%;bottom:15%;width:64px;height:21px;background:#D3C8FF}
.at-caps i:nth-child(4){left:1.5%;bottom:34%;width:28px;height:28px;border-radius:50%;background:#A6EFE5;transform:none}

.at-name{margin:4px 0 0;font-family:'Fraunces',serif;font-weight:600;font-style:italic;
  font-size:clamp(74px,9.4vw,136px);line-height:.88;letter-spacing:-.045em;
  padding-right:.06em;color:var(--ink)}
.at-name::after{content:"";display:inline-block;width:.1em;height:.1em;border-radius:50%;
  background:var(--coral);margin-left:.05em;vertical-align:baseline}
/* Two lines, two weights of colour: the reference sets the first in navy and
   the second in bright blue, and the hierarchy is carried by colour alone. */
.at-catch{margin:clamp(12px,1.8vh,20px) 0 16px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;font-weight:800;
  font-size:clamp(25px,2.9vw,40px);line-height:1.24;letter-spacing:-.03em}
.w-hero--at .crumb{margin-bottom:14px}
.w-hero--at .w-lede{margin-bottom:22px}
.at-catch span,.at-catch em{display:block}
.at-catch span{color:var(--ink)}
.at-catch em{font-style:normal;color:var(--acc)}

/* The work, large and slightly over the right edge; the proof floats off it. */
.at-plate{position:relative;z-index:1;width:min(108%,660px);margin:0 -4% 0 auto}
.at-plate .shot{border-radius:26px;overflow:hidden;background:#FFFFFF;
  box-shadow:0 32px 72px rgba(19,26,43,.16),0 6px 16px rgba(19,26,43,.05)}
.at-plate .shot img{width:100%;height:auto;display:block}
.at-plate figcaption{display:flex;flex-wrap:wrap;gap:3px 12px;justify-content:flex-end;
  margin-top:16px;padding-right:4%;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.11em;
  color:var(--ink-dim);text-align:right}
.at-plate figcaption b{font-weight:400;color:var(--ink)}
.at-proof{position:absolute;left:-34px;bottom:44px;z-index:2;margin:0;max-width:15em;
  background:#FFFFFF;border-radius:16px;padding:15px 19px;
  box-shadow:0 18px 44px rgba(19,26,43,.14),0 2px 6px rgba(19,26,43,.05);
  font-size:12.5px;line-height:1.7;color:var(--ink)}
.at-proof b{display:block;margin-bottom:5px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:500;letter-spacing:.16em;color:var(--coral)}

/* ── Cards, laid out wide (2026-10-15 仕様45) ─────────────────────────
   PC では札を横に並べる：こんなときに 5 列・公開の日に渡すもの 4 列・オプション 4 列。
   札の中も詰める（番号の飾りは外した）。 */
body[data-world="atelier"] .card{padding:24px clamp(18px,1.7vw,24px) 22px}
body[data-world="atelier"] .card h3{margin-bottom:8px;font-size:clamp(17px,1.35vw,19px);line-height:1.42}
body[data-world="atelier"] .card p{line-height:1.8}
body[data-world="atelier"] .card .note{margin-top:6px}
body[data-world="atelier"] .g5{grid-template-columns:repeat(5,minmax(0,1fr))}
body[data-world="atelier"] #launch .g4,body[data-world="atelier"] .opts{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-world="atelier"] .plan .price{margin-bottom:14px}
body[data-world="atelier"] .plan ul{gap:4px}
body[data-world="atelier"] .notes{display:flex;flex-wrap:wrap;gap:0 2em;margin-top:14px}
body[data-world="atelier"] .notes .note{margin:0}
body[data-world="atelier"] .sub-h{margin:clamp(28px,3vw,40px) 0 16px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;font-weight:800;
  font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;color:var(--ink)}
body[data-world="atelier"] .opts .plan h3{margin-bottom:6px}
body[data-world="atelier"] .opts .plan .price{font-size:clamp(24px,2.2vw,30px);margin-bottom:10px}
body[data-world="atelier"] .step{padding:20px 20px 18px}
body[data-world="atelier"] .step b{font-size:22px;margin-bottom:10px}
/* よくある質問は PC で 2 列（開いた問いだけが伸びる） */
body[data-world="atelier"] .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 14px}
body[data-world="atelier"] .faq summary{padding:16px 22px}
/* 相談の節は PC で横に：左に見出しと一言、右にフォーム */
@media (min-width:1001px){
  body[data-world="atelier"] #contact .shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    grid-template-rows:auto 1fr;column-gap:clamp(32px,3.4vw,56px);align-items:start}
  body[data-world="atelier"] #contact h2{grid-column:1;grid-row:1}
  body[data-world="atelier"] #contact .sec-lede{grid-column:1;grid-row:2;margin:0}
  body[data-world="atelier"] #contact .form-wrap{grid-column:2;grid-row:1/span 2}
}
body[data-world="atelier"] .form-wrap{padding:clamp(20px,2.4vw,32px)}
body[data-world="atelier"] .fields{gap:14px}
body[data-world="atelier"] .submit{margin-top:20px}
@media (max-width:1180px){
  body[data-world="atelier"] .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-world="atelier"] #launch .g4,body[data-world="atelier"] .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body[data-world="atelier"] .g5,body[data-world="atelier"] #launch .g4,body[data-world="atelier"] .opts,
  body[data-world="atelier"] .faq{grid-template-columns:minmax(0,1fr)}
}

/* ── 03 Work, hung as plates ───────────────────────────────────────── */
body[data-world="atelier"] #works .grid.g2{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,28px)}
/* 制作例は、ほかの札と同じ白い札にする（2026-10-16 見直し）。絵は札の上の端いっぱいに置き、文は札の内側に余白をとって置く。
   前は「白い札」と「余白 2px の文」が組み合わさり、文が札の端に付いて、はみ出して見えた。 */
body[data-world="atelier"] .work{padding:0;grid-template-rows:auto 1fr;align-content:start;overflow:hidden;position:relative}
body[data-world="atelier"] .work-shot{border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
body[data-world="atelier"] .work-body{padding:clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px) clamp(20px,2vw,26px);position:static;display:flex;flex-direction:column}
body[data-world="atelier"] .work-body .work-link{margin-top:auto;padding-top:4px}
body[data-world="atelier"] .work-role{margin-bottom:10px;align-self:flex-start}
body[data-world="atelier"] .work-seo{align-self:flex-start}
body[data-world="atelier"] .work-body h3{margin-bottom:8px;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.02em}
body[data-world="atelier"] .work p{margin-bottom:10px}
/* 依頼主の正式な名前は、見出しの下の小さな1行に（見出しの折り返しで「様）」だけが残らないように） */
body[data-world="atelier"] .work-org{display:block;margin-top:4px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-dim)}
body[data-world="atelier"] .tags{margin-bottom:10px}
/* A card may end on one link (こんなときに 05 points to /system/): visible, and tall enough to press. */
body[data-world="atelier"] .card .note a{display:inline-flex;align-items:center;min-height:44px;color:#1E5FD0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(30,95,208,.45)}   /* small type on white: the house blue is 3.9:1 there, this one 5.8:1 */
@media (max-width:900px){body[data-world="atelier"] #works .grid.g2{grid-template-columns:1fr}}
/* 制作例の札は、絵も文も含めて札全体を押せる（2026-10-16。ユーザー「リンクがその文字の部分しかない」） */
body[data-world="atelier"] .work{cursor:pointer}
body[data-world="atelier"] .work-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:20px}
body[data-world="atelier"] .work-link:focus-visible{outline:none}
body[data-world="atelier"] .work-link:focus-visible::after{outline:2px solid #1E5FD0;outline-offset:-2px}
body[data-world="atelier"] .work:hover .work-link{text-decoration:underline;text-underline-offset:3px}

/* ── 04 The eight ranges, drawn ─────────────────────────────────────
   Carried over unchanged in substance: each tile is a small real piece of
   work, drawn in CSS, so the range is shown rather than named. */
/* PC は 8 枚を 1 列に、タブレットは 4 列、スマホは 2 列（2026-10-15 仕様45。スマホで 2,707px あった節を詰める） */
.rgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
@media (max-width:1180px){.rgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rart{margin:0;display:flex;flex-direction:column;gap:8px}
.rart-art{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);display:block;border-radius:14px}
.rart figcaption{display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap}
.rart strong{font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--ink)}
.rart i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--ink-dim)}
.rart-art::after{content:"";position:absolute;inset:0;background:rgba(247,247,248,.16);opacity:1;transition:opacity .4s}
.rart:hover .rart-art::after{opacity:0}
.a-min{background:#FAFAF8}
.a-min::before{content:"";position:absolute;left:16%;right:16%;top:62%;height:1px;background:#111}
.a-min i{position:absolute;left:16%;top:calc(62% - 13px);width:9px;height:9px;border-radius:50%;background:#111}
.a-edi{background:#F4F1E9}
.a-edi b{position:absolute;left:9%;top:4%;font-family:'Fraunces',serif;font-weight:600;font-size:78px;line-height:1;color:#15130F}
.a-edi i{position:absolute;right:9%;top:22%;width:34%;height:1px;background:#15130F;box-shadow:0 9px 0 rgba(21,19,15,.55),0 18px 0 rgba(21,19,15,.35),0 27px 0 rgba(21,19,15,.2)}
.a-edi em{position:absolute;left:9%;bottom:9%;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.2em;color:#6B655A}
.a-lux{background:radial-gradient(120% 100% at 50% 0%,#1B1710,#080705)}
.a-lux::before{content:"";position:absolute;inset:11px;border:1px solid transparent;
  background:linear-gradient(140deg,#8A6B2E,#F0DCA8 42%,#8A6B2E 76%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.a-lux b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-style:italic;
  font-weight:600;font-size:56px;background:linear-gradient(140deg,#8A6B2E,#F5E3B4 48%,#8A6B2E);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.a-bold{background:#FFE500;border-color:#111}
.a-bold::before{content:"";position:absolute;inset:9px;border:5px solid #111}
.a-bold b{position:absolute;left:12%;top:34%;font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:40px;line-height:.9;
  letter-spacing:-.05em;color:#111;text-transform:uppercase}
.a-bold i{position:absolute;right:14%;bottom:16%;width:34px;height:34px;background:#111}
.a-imm{background:radial-gradient(90% 90% at 30% 20%,#241C4A,#08070F)}
.a-imm b,.a-imm i,.a-imm em{position:absolute;left:50%;top:50%;width:56%;height:44%;border:1px solid rgba(180,200,255,.5);
  background:linear-gradient(140deg,rgba(122,92,255,.34),rgba(34,211,196,.10));margin:-22% 0 0 -28%}
.a-imm b{transform:translate(-16px,-14px) skewY(-7deg)}
.a-imm i{transform:skewY(-7deg);border-color:rgba(200,215,255,.75)}
.a-imm em{transform:translate(16px,14px) skewY(-7deg);opacity:.5}
.a-mot{background:linear-gradient(100deg,#07131B,#0C2530)}
.a-mot::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,211,196,.9),transparent);filter:blur(1px)}
.a-mot b,.a-mot i,.a-mot em{position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border-right:3px solid #22D3C4;border-top:3px solid #22D3C4;transform:rotate(45deg)}
.a-mot b{right:22%;opacity:1}.a-mot i{right:36%;opacity:.55}.a-mot em{right:50%;opacity:.25}
.a-typ{background:#EFEDE7}
.a-typ b{position:absolute;left:-4%;top:-30%;font-family:'Fraunces',serif;font-weight:600;font-size:170px;line-height:1;color:#111;letter-spacing:-.06em}
.a-typ em{position:absolute;right:8%;bottom:10%;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.24em;color:#111}
.a-jpn{background:#F5F1E8}
.a-jpn::before{content:"";position:absolute;right:16%;top:16%;width:52%;aspect-ratio:1;border-radius:50%;background:#B32424}
.a-jpn b{position:absolute;left:14%;top:14%;bottom:14%;writing-mode:vertical-rl;font-family:'Noto Serif JP',serif;font-weight:700;
  font-size:34px;letter-spacing:.16em;color:#15130F}
.a-jpn i{position:absolute;left:9%;top:12%;bottom:12%;width:1px;background:rgba(21,19,15,.45)}

@media (max-width:960px){
  .w-hero--at .w-grid{grid-template-columns:1fr}
  .at-plate{width:100%;margin:0 auto}
  .at-plate figcaption{justify-content:flex-start;text-align:left;padding-right:0}
  .at-proof{position:static;margin:16px 0 0;max-width:none}
  .at-orb{right:-34vw;top:auto;bottom:4%;width:min(700px,92vw)}
  .at-caps i:nth-child(3){display:none}
}
@media (max-width:620px){
  /* Narrow screens lose most of the colour to the edges, so the two large
     shapes are enlarged rather than scaled down with the viewport. */
  .at-orb{right:-42vw;bottom:1%;width:min(560px,124vw)}
  .at-blob{left:-26%;bottom:-14%;width:min(430px,88vw)}
  body[data-world="atelier"] .sec::after{width:min(470px,88vw)}
  .at-name{font-size:clamp(56px,15vw,80px)}
  .at-catch{margin:10px 0 10px;font-size:clamp(20px,6.1vw,26px)}
  .at-catch span,.at-catch em{display:inline}
  html[lang="en"] .at-catch span{margin-right:.26em}
  .w-hero--at{padding-top:20px;padding-bottom:20px}
  body[data-world="atelier"] .tags{gap:5px}
  body[data-world="atelier"] .tags li{padding:3px 9px;font-size:11px}
  body[data-world="atelier"] .plan .price{margin-bottom:10px}
  body[data-world="atelier"] .plan .foot{margin-top:10px;padding-top:8px}
  .at-proof b{display:inline;margin-right:8px}
  .rart-art{aspect-ratio:16/10}
  body[data-world="atelier"] .opts .plan{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline}
  body[data-world="atelier"] .opts .plan p:not(.price){grid-column:1/-1}
  body[data-world="atelier"] .opts .plan .price{margin:0 0 8px}
  .w-hero--at .crumb{margin-bottom:10px}
  .w-hero--at .w-lede{margin-bottom:14px;line-height:1.85}
  .w-hero--at .hero-cta{gap:10px}
  .w-hero--at .hero-cta :is(.btn,.btn-ghost){padding:13px 20px}
  .w-hero--at .w-grid{gap:18px}
  .at-plate .shot{border-radius:18px}
  .at-plate figcaption{margin-top:10px}
  /* 実績の一言は、PC と同じく絵の下の端に重ねる（スマホの最初の画面を詰める） */
  .at-proof{position:relative;left:auto;bottom:auto;margin:-15% 10px 0;padding:9px 13px;font-size:12px;line-height:1.6}
  .at-proof b{margin-bottom:2px}
  .at-caps i:nth-child(1),.at-caps i:nth-child(2){display:none}
  .a-typ b{font-size:130px}.a-edi b{font-size:60px}.a-lux b{font-size:44px}.a-jpn b{font-size:28px}.a-bold b{font-size:32px}
  /* 札・料金・流れ・フォームを詰める */
  body[data-world="atelier"] .card{padding:20px 18px 18px}
  body[data-world="atelier"] .plan li{line-height:1.65}
  body[data-world="atelier"] .steps{gap:8px}
  body[data-world="atelier"] .step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:6px;padding:14px 16px}
  body[data-world="atelier"] .step b{grid-row:1/span 2;margin:2px 0 0}
  body[data-world="atelier"] .step strong{margin-bottom:2px}
  body[data-world="atelier"] .faq summary{padding:14px 18px;gap:12px}
  body[data-world="atelier"] .faq .a{padding:0 18px 18px 48px}
  body[data-world="atelier"] .form-wrap{padding:18px}
  body[data-world="atelier"] .fields{gap:12px}
  body[data-world="atelier"] :is(input,select){padding:11px 14px}
  body[data-world="atelier"] .lbl{margin-bottom:6px}
}
/* PC の 8 列の世界観の札は小さいので、絵の字も縮める */
@media (min-width:1181px){
  .a-typ b{font-size:130px}.a-edi b{font-size:58px}.a-lux b{font-size:44px}.a-jpn b{font-size:28px}.a-bold b{font-size:30px}
}
/* ボタンの下の1行（押したあとに何が起きるか）と、札の頭の値段（人の真似のレビューで、文末の値段が読まれなかった） */
.at-reply{margin:12px 0 0;font-size:13px;color:var(--ink-dim)}
body[data-world="atelier"] #services .card p strong{display:block;margin-bottom:2px}