/* 下層セクション。dw- 接頭辞で主画面のスタイルと分離。 */
.dw-section { position: relative; color: var(--ink); padding: clamp(76px, 9vw, 150px) 0; overflow: clip; scroll-margin-top: 72px; }
.dw-section *, .dw-footer *, .dw-guide-dialog * { box-sizing: border-box; }
.dw-section button, .dw-guide-dialog button { font: inherit; }
.dw-section button, .dw-footer a, .dw-guide-dialog button { -webkit-tap-highlight-color: transparent; }
.dw-section button:focus-visible, .dw-section a:focus-visible, .dw-section summary:focus-visible, .dw-footer a:focus-visible, .dw-guide-dialog button:focus-visible { outline: 3px solid currentColor; outline-offset: 7px; }
.dw-wrap { width: min(100% - clamp(40px, 9vw, 144px), 1360px); margin-inline: auto; }
.dw-section-meta { display: flex; justify-content: space-between; gap: 24px; align-items: start; border-top: 2px solid currentColor; padding-top: 16px; margin-bottom: clamp(44px, 6vw, 92px); font-size: 12px; font-weight: 700; line-height: 1.6; }
.dw-en { font-family: var(--en); font-weight: 400; }
.dw-title { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4.6vw, 67px); line-height: 1.6; letter-spacing: -.035em; margin: 0; overflow-wrap: anywhere; }
.dw-section p { margin-top: 0; }
.dw-section-kicker { font-size: 14px; letter-spacing: .08em; margin-bottom: 28px; }
.dw-mobile-break { display: none; }

/* 大きな文字を主役に、読み物の余白へ切り替える。 */
.dw-manifesto { background: var(--paper); }
.dw-manifesto-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(41px, 7.55vw, 113px); line-height: 1.47; letter-spacing: -.06em; }
.dw-manifesto-title > span { display: block; }
.dw-manifesto-title > span:last-child { padding-left: 28%; }
.dw-handline { position: relative; z-index: 0; white-space: nowrap; }
.dw-handline::after { position: absolute; content: ""; height: .25em; bottom: .04em; left: -.045em; right: -.08em; z-index: -1; background: var(--coral); transform: rotate(-3deg); clip-path: polygon(0 21%, 100% 0, 97% 78%, 2% 100%); }
.dw-manifesto-bottom { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 8%; margin-top: clamp(44px, 8vw, 115px); }
.dw-manifesto-note { justify-self: center; position: relative; width: fit-content; margin: 0; padding: 40px 30px; background: var(--lime); font-family: var(--display); font-size: clamp(23px, 2.8vw, 40px); line-height: 1.65; transform: rotate(-6deg); box-shadow: 6px 8px 0 var(--ink); }
.dw-manifesto-note::before { content: ""; position: absolute; width: 75px; height: 24px; left: 50%; top: -11px; background: var(--mint); transform: translateX(-50%) rotate(9deg); opacity: .93; }
.dw-manifesto-copy { font-size: clamp(14px, 1.2vw, 17px); line-height: 2.15; }
.dw-manifesto-copy p { margin-bottom: 24px; }
.dw-manifesto-copy strong { font-weight: 700; }
.dw-manifesto-close { border-bottom: 2px solid var(--ink); margin: 75px 0 0; padding-bottom: 30px; font-family: var(--display); font-size: clamp(18px, 2.55vw, 37px); line-height: 1.8; text-align: center; }

/* 目的を具体化する、三つの判断。 */
.dw-direction{background:var(--mint)}
.dw-direction-intro{font-size:16px;line-height:2;margin:28px 0 62px!important;max-width:720px}
.dw-decisions{border-top:2px solid var(--ink)}
.dw-decision{position:relative;display:grid;grid-template-columns:110px 1fr 200px;gap:40px;align-items:start;border-bottom:2px solid var(--ink);padding:50px 0}
.dw-decision-number{font-size:58px;line-height:1.1;color:var(--blue)}
.dw-decision-question{font-size:12px;font-weight:700;margin:0 0 12px!important}
.dw-decision h3{font-family:var(--display);font-size:clamp(22px,2.6vw,37px);line-height:1.7;margin-bottom:20px}
.dw-decision h3+p{font-size:15px;line-height:2.1;max-width:620px}
.dw-decision-friend{width:100%;max-height:210px;object-fit:contain;align-self:center;transform:rotate(-9deg)}
.dw-decision:nth-child(2) .dw-decision-friend{transform:rotate(7deg)}
.dw-direction-result{padding-top:65px;display:grid;grid-template-columns:1fr 1.7fr;gap:15px 40px;align-items:center}
.dw-direction-result>.dw-en{grid-column:1/-1;font-size:12px;color:var(--blue)}
.dw-direction-result p:nth-child(2){font-family:var(--display);font-size:clamp(21px,2.2vw,34px);line-height:1.9}
.dw-direction-result strong{font-weight:400}.dw-direction-result p:last-child{font-size:17px;line-height:2;justify-self:end}
.dw-case-story{display:grid;grid-template-columns:1fr 1fr;gap:9%;border-top:2px solid var(--ink);padding-top:42px;margin-top:65px}
.dw-case-story h3{font-family:var(--display);font-size:clamp(28px,3.7vw,54px);line-height:1.65;letter-spacing:-.05em}
.dw-case-story p{font-size:15px;line-height:2.1;margin-bottom:20px}
.dw-case-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:32px 0 20px;border-top:1px solid var(--ink);padding-top:25px}
.dw-case-choices dt{font-family:var(--display);font-size:15px;margin-bottom:10px}.dw-case-choices dd{font-size:13px;line-height:1.9;margin:0}
.dw-case-context{font-size:11px;line-height:1.9;margin-top:28px!important}
@media(max-width:1000px){.dw-decision{grid-template-columns:70px 1fr 120px;gap:20px}.dw-decision-number{font-size:42px}.dw-direction-result{grid-template-columns:1fr}.dw-direction-result p:last-child{justify-self:start}}
@media(max-width:700px){.dw-direction-intro{font-size:14px;margin-bottom:40px!important}.dw-direction-intro br{display:none}.dw-decision{grid-template-columns:45px 1fr;gap:15px;padding:32px 0 120px}.dw-decision-number{font-size:29px}.dw-decision-question{font-size:11px}.dw-decision h3{font-size:22px}.dw-decision h3+p{font-size:14px;line-height:2}.dw-decision-friend{position:absolute;width:120px;height:110px;bottom:8px;right:6px}.dw-direction-result{padding-top:40px}.dw-direction-result p:last-child{font-size:14px}.dw-case-story{grid-template-columns:1fr;gap:25px;margin-top:35px;padding-top:30px}.dw-case-story h3{font-size:30px}.dw-case-story p{font-size:14px}.dw-case-choices{grid-template-columns:1fr;gap:22px}.dw-case-context{font-size:11px}.dw-case-choices dd{font-size:14px}}

/* 制作の違いを、判断と作業の分担で伝える。 */
.dw-comparison{background:var(--paper)}
.dw-comparison-intro{font-size:17px;line-height:2;margin:32px 0 55px!important}
.dw-compare-head,.dw-compare-row{display:grid;grid-template-columns:.65fr 1fr 1.4fr;gap:0}
.dw-compare-head>span{padding:18px 25px;font-size:13px;font-weight:700}.dw-compare-head>span:last-child{background:var(--lavender,#e2daf2);border-radius:25px 25px 0 0}
.dw-compare-row{border-top:1.5px solid var(--ink)}.dw-compare-row:last-child{border-bottom:1.5px solid var(--ink)}
.dw-compare-row>h3{padding:32px 16px 32px 0;font-family:var(--display);font-size:16px;line-height:1.9}.dw-compare-row h3 .dw-en{display:block;color:var(--blue);font-size:25px;margin-bottom:4px}
.dw-compare-row>div{padding:32px 25px}.dw-compare-row>div:last-child{background:var(--lavender,#e2daf2)}.dw-compare-row p{font-size:14px;line-height:2;margin:0}.dw-compare-row strong{font-family:var(--display);font-weight:400;font-size:17px;line-height:1.8;display:block;margin-bottom:12px}
.dw-compare-mobile-label{display:none}.dw-comparison-note{font-size:12px;line-height:1.9;max-width:830px;margin:25px 0 0!important}
.dw-comparison-close{font-size:clamp(18px,2.2vw,30px);line-height:1.9;margin-top:55px!important}.dw-comparison-close strong{font-family:var(--display);font-weight:400}
@media(max-width:700px){.dw-comparison-intro{font-size:14px}.dw-compare-head{display:none}.dw-compare-row{display:grid;grid-template-columns:1fr;padding:25px 0;gap:14px}.dw-compare-row>h3{padding:0;font-size:18px}.dw-compare-row h3 .dw-en{display:inline-block;margin:0 16px 0 0}.dw-compare-row>div{padding:18px 20px;background:rgba(255,255,255,.35)}.dw-compare-mobile-label{display:block;font-size:10px;font-weight:700;margin-bottom:8px}.dw-compare-row strong{font-size:17px}.dw-compare-row p{font-size:14px}.dw-comparison-note{font-size:11px}.dw-comparison-close{font-size:17px}}

/* 住人はカードに閉じ込めず、同じ舞台に立つ。 */
.dw-friends { background: var(--blue); color: var(--paper); padding-bottom: 78px; }
.dw-friends-heading { display: grid; grid-template-columns: 1fr; gap: 28px; }
.dw-friends-heading > p { font-size: clamp(14px, 1.25vw, 17px); line-height: 1.9; margin-bottom: 0; }
.dw-crew-hint { margin: 40px 0 0; text-align: right; font-size: 12px; font-weight: 700; }
.dw-crew-hint span { font-size: 24px; vertical-align: middle; margin-right: 5px; }
.dw-crew-stage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 0; padding-top: 18px; margin-bottom: 32px; }
.dw-crew-member { --crew-lift: 0px; border: 0; border-bottom: 3px solid transparent; color: inherit; background: transparent; cursor: pointer; min-width: 0; padding: 0 6px 15px; position: relative; text-align: center; transition: border-color .2s; }
.dw-crew-member[aria-pressed="true"] { border-color: var(--lime); }
.dw-crew-portrait { display: flex; align-items: end; justify-content: center; height: clamp(150px, 22vw, 320px); transform: translateY(var(--crew-lift)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.dw-crew-portrait img { width: 120%; max-width: 280px; height: 100%; object-fit: contain; object-position: center bottom; }
.dw-crew-dochan .dw-crew-portrait { height: clamp(178px, 26vw, 365px); }
.dw-crew-irori .dw-crew-portrait { height: clamp(143px, 20vw, 295px); }
.dw-crew-yura .dw-crew-portrait { height: clamp(165px, 24vw, 340px); }
.dw-crew-name { display: block; font-family: var(--display); font-size: clamp(17px, 1.7vw, 26px); line-height: 1.8; margin-top: 12px; }
.dw-crew-job { font-size: 11px; display: block; line-height: 1.6; margin-top: 3px; }
.dw-crew-member[aria-pressed="true"] .dw-crew-name { color: var(--lime); }
.dw-crew-bio { color: var(--ink); background: var(--paper); padding: clamp(26px, 4vw, 52px); position: relative; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); min-height: 222px; }
.dw-crew-panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: 40px; align-items: center; }
.dw-crew-panel[hidden] { display: none; }
.dw-bio-role { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.dw-crew-panel h3 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 4vw, 58px); line-height: 1.4; margin: 0; }
.dw-bio-quote { font-family: var(--display); font-size: clamp(17px, 1.75vw, 25px); line-height: 1.65; margin-bottom: 16px; }
.dw-crew-panel > div:last-child > p:last-child { font-size: 14px; line-height: 1.9; margin-bottom: 0; }
.dw-crew-caption, .dw-noscript-crew { font-size: 11px; line-height: 1.7; margin: 18px 0 0; }

/* 制作例は、大きな一枚を見せる展示面。 */
.dw-works { background: var(--lime); }
.dw-works .dw-title { margin-bottom: 58px; }
.dw-case-link { display: block; color: inherit; text-decoration: none; }
.dw-case-masthead { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.dw-case-name { font-size: clamp(39px, 8.1vw, 118px); line-height: 1.1; letter-spacing: -.055em; }
.dw-case-open { display: inline-flex; align-items: center; gap: 16px; flex-shrink: 0; font-weight: 700; font-size: 14px; }
.dw-case-open svg { width: 40px; height: 40px; transition: transform .3s; }
.dw-case-figure { position: relative; margin: 0; background: var(--ink); border: 3px solid var(--ink); box-shadow: 10px 12px 0 var(--ink); transform: rotate(-1.3deg); }
.dw-case-figure > img { display: block; width: 100%; height: auto; aspect-ratio: 1.63; object-fit: cover; object-position: top; }
.dw-case-stamp { position: absolute; right: -15px; bottom: -32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: clamp(100px, 14vw, 190px); aspect-ratio: 1; border-radius: 50%; color: var(--paper); background: var(--blue); border: 2px solid var(--ink); transform: rotate(10deg); text-align: center; }
.dw-case-stamp .dw-en { font-size: clamp(13px, 1.7vw, 25px); line-height: 1.25; }
.dw-case-stamp > span:last-child { font-size: 10px; font-weight: 700; }
.dw-case-caption { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12%; margin-top: 65px; }
.dw-case-caption p { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.9; margin-bottom: 0; }
.dw-case-caption p:first-child { font-weight: 700; }

/* 気分を選び、同じ小さな作品の表現を変える。 */
.dw-playground { background: var(--mint); }
.dw-playground .dw-title { margin-bottom: 66px; }
.dw-playground-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8%; align-items: center; }
.dw-mood-controls > p { font-size: 14px; line-height: 1.95; }
.dw-mood-controls > p:nth-child(2) { font-family: var(--display); font-size: 21px; margin-top: 36px; }
.dw-mood-options { border-bottom: 2px solid var(--ink); }
.dw-mood-option { display: grid; grid-template-columns: 100px 1fr 24px; gap: 10px; align-items: center; width: 100%; padding: 22px 12px; border: 0; border-top: 2px solid var(--ink); background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background .2s, padding .2s; }
.dw-mood-option .dw-en { font-size: 20px; }
.dw-mood-option > span:nth-child(2) { font-size: 13px; font-weight: 700; }
.dw-mood-arrow { font-size: 25px; line-height: 1; transition: transform .2s; }
.dw-mood-option[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.dw-mood-option[aria-pressed="true"] .dw-mood-arrow { transform: rotate(45deg); }
.dw-mood-controls > .dw-mood-note { font-size: 10px; line-height: 1.7; margin: 19px 0 0; }
.dw-mood-demo { --demo-paper: var(--lime); --demo-ink: var(--ink); --demo-accent: var(--coral); position: relative; isolation: isolate; padding: clamp(23px, 3vw, 42px); min-height: 520px; aspect-ratio: .93; color: var(--demo-ink); background: var(--demo-paper); border: 2px solid var(--ink); box-shadow: 9px 10px 0 var(--ink); transform: rotate(3deg); transition: background .5s, color .5s, transform .5s; overflow: hidden; }
.dw-demo-topline, .dw-demo-bottomline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; }
.dw-demo-topline { border-bottom: 1px solid currentColor; padding-bottom: 13px; }
.dw-demo-orbit { position: absolute; z-index: -1; width: 74%; aspect-ratio: 1; border-radius: 50%; top: 21%; right: -35%; background: var(--demo-accent); transition: background .5s, transform .8s, border-radius .6s; }
.dw-demo-title { font-family: var(--display); font-size: clamp(31px, 3.7vw, 56px); line-height: 1.52; letter-spacing: -.065em; margin: 65px -4px 17px 0; position: relative; z-index: 2; }
.dw-demo-copy { font-size: clamp(11px, 1.05vw, 15px); font-weight: 700; line-height: 1.8; position: relative; z-index: 2; max-width: 90%; }
.dw-demo-resident { width: 40%; max-height: 250px; object-fit: contain; position: absolute; bottom: 15px; right: -9px; transform: rotate(-9deg); transition: transform .7s; z-index: 1; }
.dw-demo-bottomline { position: absolute; left: clamp(23px, 3vw, 42px); right: clamp(23px, 3vw, 42px); bottom: 25px; max-width: 63%; }
.dw-demo-arrow { font-size: 44px; line-height: 1; }
.dw-mood-demo[data-active-mood="playful"] { --demo-paper: var(--coral); --demo-ink: var(--ink); --demo-accent: var(--blue); transform: rotate(-2deg); }
.dw-mood-demo[data-active-mood="playful"] .dw-demo-orbit { border-radius: 12%; transform: rotate(22deg); }
.dw-mood-demo[data-active-mood="playful"] .dw-demo-resident { transform: translateY(-18px) rotate(13deg); }
.dw-mood-demo[data-active-mood="calm"] { --demo-paper: var(--paper); --demo-ink: var(--blue); --demo-accent: var(--mint); transform: rotate(0); }
.dw-mood-demo[data-active-mood="calm"] .dw-demo-title { font-family: var(--body); font-weight: 500; letter-spacing: .02em; font-size: clamp(31px, 3.3vw, 48px); }
.dw-mood-demo[data-active-mood="calm"] .dw-demo-orbit { transform: translateX(13%) scale(.82); }
.dw-mood-demo[data-active-mood="calm"] .dw-demo-resident { transform: rotate(0deg) scale(.9); }
.dw-playground-close { margin: 85px 0 0; font-size: clamp(16px, 1.8vw, 25px); line-height: 2; text-align: center; }
.dw-playground-close strong { font-family: var(--display); font-weight: 400; }

/* 質問は、落ち着いて読める紙面へ。 */
.dw-faq { background: var(--paper); }
.dw-faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8%; align-items: start; }
.dw-faq-heading > p:last-child { margin: 24px 0 0; font-size: 14px; }
.dw-faq-list { border-top: 2px solid var(--ink); }
.dw-faq-list details { border-bottom: 2px solid var(--ink); }
.dw-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; padding: 27px 0; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.9; }
.dw-faq-list summary::-webkit-details-marker { display: none; }
.dw-faq-toggle { width: 24px; height: 24px; position: relative; flex-shrink: 0; }
.dw-faq-toggle::before, .dw-faq-toggle::after { position: absolute; content: ""; width: 20px; height: 2px; left: 2px; top: 11px; background: currentColor; transition: transform .2s; }
.dw-faq-toggle::after { transform: rotate(90deg); }
.dw-faq-list details[open] .dw-faq-toggle::after { transform: rotate(0deg); }
.dw-faq-answer { padding: 0 42px 28px 0; }
.dw-faq-answer p { margin-bottom: 0; font-size: 14px; line-height: 2; }
.dw-inline-button { color: var(--blue); border: 0; border-bottom: 1px solid currentColor; padding: 0 0 3px; background: transparent; cursor: pointer; font-size: 13px !important; font-weight: 700 !important; margin-top: 17px; }
.dw-inline-button span { margin-left: 14px; }

/* 最後は、大きな声と一つの導線。 */
.dw-join { background: var(--coral); border-top: 2px solid var(--ink); padding-bottom: 0; }
.dw-join-title { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 8.4vw, 124px); line-height: 1.45; letter-spacing: -.055em; margin: 0; }
.dw-join-title > span { color: var(--paper); padding-left: 7%; }
.dw-join-bottom { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: 4%; align-items: center; min-height: 290px; padding: 45px 28% 55px 0; }
.dw-join-bottom > p { font-weight: 700; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.9; margin: 0; }
.dw-guide-button { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; min-height: 84px; padding: 23px 28px; color: var(--paper); background: var(--ink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--paper); cursor: pointer; text-align: left; font-size: 16px !important; font-weight: 700 !important; transition: transform .2s, box-shadow .2s; }
.dw-guide-button svg { width: 30px; height: 30px; flex-shrink: 0; }
.dw-guide-button:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--paper); }
.dw-join-dochan { position: absolute; width: 29%; height: 135%; object-fit: contain; object-position: center bottom; bottom: -5px; right: -12px; pointer-events: none; }
.dw-footer { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; padding: 32px clamp(20px, 4.5vw, 72px); color: var(--paper); background: var(--ink); }
.dw-footer a { color: inherit; text-decoration: none; }
.dw-footer-wordmark { font-family: var(--en); font-size: 24px; letter-spacing: -.04em; }
.dw-footer p { font-size: 11px; line-height: 1.7; margin: 0; }
.dw-back-top { font-size: 11px; margin-left: auto; display: inline-flex; align-items: center; gap: 17px; padding: 10px 0; }
.dw-back-top span { font-size: 24px; }

/* 受け取り条件は対象noteへ案内し、利用条件はここで読める。 */
.dw-guide-dialog { width: min(680px, calc(100% - 32px)); max-height: calc(100% - 32px); border: 2px solid var(--ink); padding: 0; color: var(--ink); background: var(--paper); box-shadow: 10px 10px 0 var(--blue); font-family: var(--body); }
.dw-guide-dialog::backdrop { background: rgb(24 35 34 / .7); }
.dw-guide-dialog-inner { position: relative; padding: clamp(30px, 6vw, 58px); }
.dw-guide-close { position: absolute; display: grid; place-items: center; top: 13px; right: 13px; width: 40px; height: 40px; border: 1px solid var(--ink); background: var(--lime); cursor: pointer; color: var(--ink); }
.dw-guide-close span { font-size: 30px; line-height: 1; }
.dw-guide-dialog h2 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 4vw, 37px); line-height: 1.6; margin: 0 0 18px; }
.dw-guide-dialog .dw-section-kicker { color: var(--blue); padding-right: 25px; font-size: 11px; }
.dw-guide-intro { font-size: 14px; line-height: 1.9; }
.dw-guide-terms { margin: 28px 0; border-top: 2px solid var(--ink); }
.dw-guide-terms > div { padding: 18px 0; border-bottom: 1px solid var(--ink); }
.dw-guide-terms dt { font-weight: 700; font-size: 13px; margin-bottom: 7px; }
.dw-guide-terms dd { font-size: 14px; line-height: 1.8; margin: 0; }
.dw-guide-pending { font-size: 12px; line-height: 1.8; }
.dw-guide-done { width: 100%; display: flex; justify-content: space-between; gap: 15px; color: var(--paper); background: var(--blue); padding: 18px 22px; border: 2px solid var(--ink); cursor: pointer; margin-top: 25px; font-size: 14px !important; font-weight: 700 !important; }

@media (hover: hover) {
  .dw-crew-member:hover { --crew-lift: -13px; }
  .dw-case-link:hover .dw-case-open svg { transform: translate(4px, -4px); }
  .dw-mood-option:not([aria-pressed="true"]):hover { background: rgb(244 240 229 / .45); padding-left: 18px; }
  .dw-guide-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--paper); }
  .dw-faq-list summary:hover { color: var(--blue); }
}

@media (max-width: 1050px) {
  .dw-section-meta { font-size: 10px; }
  .dw-manifesto-note { padding: 33px 22px; }
  .dw-crew-panel { grid-template-columns: .8fr 1.2fr; gap: 25px; }
  .dw-bio-role { font-size: 10px; }
  .dw-crew-panel > div:last-child > p:last-child { font-size: 12px; }
  .dw-mood-option { grid-template-columns: 88px 1fr 20px; gap: 6px; padding-inline: 8px; }
  .dw-mood-option .dw-en { font-size: 17px; }
  .dw-mood-option > span:nth-child(2) { font-size: 11px; }
  .dw-mood-demo { min-height: 420px; }
  .dw-demo-title { margin-top: 49px; }
  .dw-demo-topline { font-size: 7px; }
  .dw-join-bottom { grid-template-columns: 1fr; gap: 20px; padding-right: 37%; min-height: 300px; }
  .dw-guide-button { max-width: 360px; }
  .dw-join-dochan { width: 34%; height: 117%; }
  .dw-faq-layout { gap: 5%; grid-template-columns: .85fr 1.15fr; }
  .dw-faq-list summary { font-size: 13px; }
}

@media (max-width: 700px) {
  .dw-section { padding-block: 72px; scroll-margin-top: 60px; }
  .dw-wrap { width: calc(100% - 40px); }
  .dw-section-meta { margin-bottom: 39px; gap: 18px; font-size: 9px; }
  .dw-section-meta > span:last-child { max-width: 125px; text-align: right; }
  .dw-title { font-size: clamp(24px, 5.8vw, 39px); line-height: 1.7; letter-spacing: -.045em; }
  .dw-mobile-break { display: block; }
  .dw-manifesto-title { font-size: clamp(29px, 7.5vw, 48px); line-height: 1.7; letter-spacing: -.065em; }
  .dw-manifesto-title > span:last-child { padding-left: 25%; }
  .dw-manifesto-bottom { grid-template-columns: 1fr; gap: 45px; margin-top: 50px; }
  .dw-manifesto-note { justify-self: start; margin-left: 17px; font-size: 23px; padding: 22px 26px; box-shadow: 4px 5px 0 var(--ink); }
  .dw-manifesto-copy { padding-left: 8%; font-size: 14px; line-height: 2.05; }
  .dw-manifesto-copy br { display: none; }
  .dw-manifesto-copy p { margin-bottom: 24px; }
  .dw-manifesto-copy strong br { display: block; }
  .dw-manifesto-close { margin-top: 35px; padding-bottom: 22px; font-size: clamp(16px, 4.2vw, 24px); line-height: 1.8; }
  .dw-friends { padding-bottom: 45px; }
  .dw-friends-heading { gap: 24px; }
  .dw-friends-heading > p { font-size: 13px; }
  .dw-friends .dw-title { font-size: clamp(22px, 5.7vw, 33px); }
  .dw-crew-hint { text-align: left; margin-top: 30px; font-size: 10px; }
  .dw-crew-stage { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 18px; padding-top: 3px; margin-top: 0; margin-bottom: 26px; }
  .dw-crew-member { grid-column: span 2; padding: 0 2px 10px; }
  .dw-crew-member:nth-child(4) { grid-column: 2 / span 2; }
  .dw-crew-member:nth-child(5) { grid-column: 4 / span 2; }
  .dw-crew-portrait, .dw-crew-dochan .dw-crew-portrait, .dw-crew-irori .dw-crew-portrait, .dw-crew-yura .dw-crew-portrait { height: clamp(110px, 31vw, 180px); }
  .dw-crew-dochan .dw-crew-portrait { height: clamp(130px, 35vw, 200px); }
  .dw-crew-name { font-size: 17px; margin-top: 5px; }
  .dw-crew-job { font-size: 11px; }
  .dw-crew-bio { padding: 26px 23px; min-height: 278px; }
  .dw-crew-panel { grid-template-columns: 1fr; gap: 22px; }
  .dw-bio-role { font-size: 10px; margin-bottom: 6px; }
  .dw-crew-panel h3 { font-size: 34px; }
  .dw-bio-quote { font-size: 15px; line-height: 1.8; margin-bottom: 11px; }
  .dw-crew-panel > div:last-child > p:last-child { font-size: 12px; line-height: 1.9; }
  .dw-crew-panel > div:last-child > p:last-child br { display: none; }
  .dw-crew-caption { font-size: 9px; }
  .dw-works .dw-title { margin-bottom: 40px; }
  .dw-case-masthead { flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
  .dw-case-name { font-size: clamp(36px, 11vw, 67px); }
  .dw-case-open { font-size: 11px; gap: 13px; margin-left: auto; }
  .dw-case-open svg { width: 26px; height: 26px; }
  .dw-case-figure { box-shadow: 5px 6px 0 var(--ink); border-width: 2px; }
  .dw-case-figure > img { aspect-ratio: 1.23; }
  .dw-case-stamp { width: 91px; right: -9px; bottom: -26px; gap: 5px; }
  .dw-case-stamp .dw-en { font-size: 12px; }
  .dw-case-stamp > span:last-child { font-size: 8px; }
  .dw-case-caption { grid-template-columns: 1fr; gap: 18px; margin-top: 48px; }
  .dw-case-caption p { font-size: 13px; line-height: 1.95; }
  .dw-playground .dw-title { margin-bottom: 31px; }
  .dw-playground-layout { grid-template-columns: 1fr; gap: 38px; }
  .dw-mood-controls > p { font-size: 13px; }
  .dw-mood-controls > p:nth-child(2) { margin-top: 24px; font-size: 19px; }
  .dw-mood-option { grid-template-columns: 105px 1fr 22px; padding: 19px 12px; }
  .dw-mood-option .dw-en { font-size: 20px; }
  .dw-mood-option > span:nth-child(2) { font-size: 12px; }
  .dw-mood-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--ink)}
  .dw-mood-option{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:16px 10px;border:0;border-right:1px solid var(--ink);min-height:92px}
  .dw-mood-option:last-child{border-right:0}.dw-mood-option .dw-en{font-size:15px}.dw-mood-option>span:nth-child(2){font-size:10px;line-height:1.6}.dw-mood-arrow{display:none}
  .dw-mood-demo { min-height: 420px; width: calc(100% - 12px); margin-inline: auto; aspect-ratio: .9; padding: 25px; box-shadow: 6px 7px 0 var(--ink); }
  .dw-demo-topline { font-size: 8px; }
  .dw-demo-title { font-size: clamp(33px, 8.7vw, 51px); margin-top: 58px; }
  .dw-demo-copy { font-size: 11px; }
  .dw-demo-resident { width: 44%; right: -7px; bottom: 12px; }
  .dw-demo-bottomline { left: 25px; bottom: 24px; font-size: 8px; }
  .dw-mood-demo[data-active-mood="calm"] .dw-demo-title { font-size: clamp(33px, 8.2vw, 48px); }
  .dw-playground-close { margin-top: 51px; font-size: 14px; line-height: 2; }
  .dw-playground-close strong { display: inline-block; }
  .dw-faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .dw-faq-heading .dw-title br { display: none; }
  .dw-section-kicker { font-size: 11px; margin-bottom: 22px; }
  .dw-faq-heading > p:last-child { font-size: 12px; margin-top: 17px; }
  .dw-faq-list summary { font-size: 13px; gap: 16px; padding: 23px 0; }
  .dw-faq-answer { padding: 0 28px 24px 0; }
  .dw-faq-answer p { font-size: 14px; }
  .dw-join { padding-bottom: 0; }
  .dw-join-title { font-size: clamp(30px, 8.5vw, 52px); line-height: 1.65; letter-spacing: -.07em; }
  .dw-join-title > span { padding-left: 4%; }
  .dw-join-bottom { grid-template-columns: 1fr; gap: 20px; min-height: 310px; padding: 35px 0 155px; }
  .dw-join-bottom > p { font-size: 13px; }
  .dw-guide-button { position: relative; z-index: 2; width: 76%; min-height: 70px; padding: 19px 20px; gap: 12px; font-size: 13px !important; box-shadow: 4px 4px 0 var(--paper); }
  .dw-guide-button svg { width: 26px; height: 26px; }
  .dw-join-dochan { width: 48%; height: 73%; right: -19px; }
  .dw-footer { gap: 15px 18px; padding-block: 28px; }
  .dw-footer-wordmark { font-size: 21px; }
  .dw-footer p { width: 100%; order: 3; font-size: 9px; }
  .dw-back-top { font-size: 9px; gap: 10px; }
  .dw-guide-dialog-inner { padding: 53px 25px 28px; }
  .dw-guide-dialog h2 { font-size: 24px; }
  .dw-guide-intro, .dw-guide-terms dd { font-size: 12px; }
  .dw-guide-terms dt { font-size: 12px; }
  .dw-guide-pending { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .dw-section *, .dw-section *::before, .dw-section *::after, .dw-guide-dialog *, .dw-footer * { animation: none !important; transition: none !important; }
}
html[data-motion="off"] .dw-section *, html[data-motion="off"] .dw-section *::before, html[data-motion="off"] .dw-section *::after { animation: none !important; transition: none !important; }

/* 章ごとに異なるパステル。主役のイラストは色を保つ。 */
.dw-manifesto{background:var(--paper)}.dw-manifesto-note{background:var(--peach);box-shadow:6px 8px 0 var(--blue)}.dw-manifesto-note:before{background:var(--lavender)}.dw-handline:after{background:var(--blush)}.dw-direction{background:var(--sky)}.dw-comparison{background:#fbf3e8}.dw-friends{background:var(--lavender);color:var(--ink)}.dw-crew-member[aria-pressed=true]{border-color:var(--blue)}.dw-crew-member[aria-pressed=true] .dw-crew-name{color:var(--blue)}.dw-crew-bio{background:var(--paper)}.dw-works{background:var(--peach)}.dw-case-stamp{background:var(--lavender);color:var(--ink)}.dw-playground{background:var(--blush)}.dw-mood-demo{--demo-paper:var(--sky);--demo-ink:var(--ink);--demo-accent:var(--lavender)}.dw-mood-demo[data-active-mood=playful]{--demo-paper:var(--peach);--demo-ink:var(--ink);--demo-accent:#d0bbdc}.dw-mood-demo[data-active-mood=calm]{--demo-paper:var(--paper);--demo-ink:#405951;--demo-accent:var(--mint)}.dw-join{background:var(--mint)}.dw-join-title>span{color:var(--blue)}.dw-guide-button{box-shadow:6px 6px 0 var(--lavender)}

/* 固定ヘッダーではないため、章リンクの余白はページ側でまとめる。 */
.dw-section{scroll-margin-top:0}
@media(max-width:700px){.dw-section-meta{display:block}.dw-section-meta>span:last-child{display:none}.dw-section-meta>.dw-en{display:block;font-size:10px;line-height:1.7;letter-spacing:.015em}}

/* 利用場面を重なる便箋として見せ、作例は小さな参考に留める。 */
.dw-possibilities-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:end;margin-bottom:64px}
.dw-possibilities .dw-title{margin-bottom:0}
.dw-possibilities-heading>p{font-size:16px;line-height:2.15;padding-bottom:12px}
.dw-usecases{padding:8px 8px 0;isolation:isolate}
.dw-usecase{position:relative;border:1px solid rgba(70,54,80,.28);border-radius:3px 17px 5px 3px;padding:30px 42px 42px;background:#fbf8f0;box-shadow:0 2px 0 #fff8,0 12px 24px -12px #51405b33;margin-bottom:24px}
.dw-usecase:before{content:'';position:absolute;left:23px;top:-8px;width:73px;height:16px;background:#e3daf1c9;transform:rotate(-4deg);box-shadow:0 1px 1px #00000009}
.dw-usecase:nth-child(2){margin-left:4%;margin-right:-8px;background:#e9eef5}
.dw-usecase:nth-child(2):before{background:#f5e0bcd6;left:auto;right:26px;transform:rotate(4deg)}
.dw-usecase:nth-child(3){margin-right:3%;background:#f4e7ed}
.dw-usecase:nth-child(3):before{background:#cfe2d7c9}
.dw-usecase-label{display:flex;align-items:center;gap:24px;padding-bottom:18px;border-bottom:1px dashed #897a9466;margin-bottom:25px;font-size:12px;font-weight:700;line-height:1.5}
.dw-usecase-label .dw-en{font-size:15px;color:var(--blue);white-space:nowrap}
.dw-usecase-content{display:grid;grid-template-columns:1fr 1fr;gap:8%}
.dw-usecase h3{font-family:var(--display);font-size:clamp(23px,2.35vw,35px);letter-spacing:-.04em;line-height:1.65}
.dw-usecase-content p{font-size:15px;line-height:2}
.dw-usecase-example{color:#625876;font-size:12px!important;margin-top:18px!important;line-height:1.9!important}
.dw-expression-note{display:flex;gap:8%;align-items:center;padding:40px 5% 50px}
.dw-expression-note>.dw-en{font-size:clamp(19px,2.6vw,36px);line-height:1.4;color:var(--blue);transform:rotate(-3deg)}
.dw-expression-note>p{font-size:14px;line-height:2.1}
.dw-expression-note strong{font-size:17px}
.dw-case-mini{display:grid;grid-template-columns:135px 1fr 42px;align-items:center;gap:27px;padding:20px 25px;border:1px solid #806d8359;background:#fff8f266;border-radius:5px;max-width:800px;margin-left:auto;transition:background .3s,box-shadow .3s}
.dw-case-mini>img{width:135px;height:112px;object-fit:cover;object-position:top;border:1px solid #88728555;border-radius:2px;transform:rotate(-3deg);box-shadow:2px 4px 8px #47324b18}
.dw-case-mini>span{display:block}
.dw-case-mini small{display:block;font-size:11px;font-weight:700}
.dw-case-mini strong{display:block;font-size:25px;line-height:1.5;margin:3px 0 6px}
.dw-case-mini>span>span{display:block;font-size:11px;line-height:1.8}
.dw-case-mini>svg{width:42px;height:28px}
.dw-case-mini:hover{background:#fff8f2;box-shadow:0 7px 18px #47324b12}
.dw-case-mini>.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){
 .dw-possibilities-heading{grid-template-columns:1fr;gap:24px;margin-bottom:38px}
 .dw-possibilities-heading>p{font-size:14px;line-height:2;padding:0}
 .dw-usecases{padding:6px 2px 0}
 .dw-usecase{padding:25px 22px 29px;margin-bottom:20px}
 .dw-usecase:nth-child(2){margin-left:5px;margin-right:0}
 .dw-usecase:nth-child(3){margin-right:5px}
 .dw-usecase-label{display:block;padding-bottom:14px;margin-bottom:21px}
 .dw-usecase-label .dw-en{display:block;font-size:14px;margin-bottom:7px}
 .dw-usecase-label>span:last-child{font-size:10px}
 .dw-usecase-content{grid-template-columns:1fr;gap:20px}
 .dw-usecase h3{font-size:clamp(19px,5.55vw,30px);line-height:1.8}
 .dw-usecase-content p{font-size:14px}
 .dw-usecase-example{font-size:11px!important}
 .dw-expression-note{display:block;padding:24px 8px 32px}
 .dw-expression-note>.dw-en{display:block;font-size:24px;margin-bottom:24px}
 .dw-expression-note>p{font-size:12px}
 .dw-expression-note strong{font-size:14px}
 .dw-case-mini{grid-template-columns:76px 1fr;gap:17px;padding:18px 16px}
 .dw-case-mini>img{width:76px;height:92px}
 .dw-case-mini strong{font-size:20px}
 .dw-case-mini>span>span{font-size:10px}
 .dw-case-mini>svg{display:none}
}

.dw-guide-back{display:block;margin:20px auto 0;padding:7px 12px;background:transparent;text-decoration:underline;text-underline-offset:5px;font-size:12px}
.dw-guide-done{align-items:center}
.dw-guide-done>.ink-arrow{flex-shrink:0;width:30px}