:root {
    --ink:#2c231e;
    --sub:#675d55;
    --paper:#fffaf2;
    --white:#fffdf9;
    --sand:#efe5d8;
    --line:#d9cbbc;
    --accent:#d34e1c;
    --accent-dark:#ad3d18;
    --green:#397148;
}

* { box-sizing:border-box; }

html {
    scroll-behavior:smooth;
    scroll-padding-top:84px;
}

body {
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
    line-break:strict;
    overflow-wrap:anywhere;
}

img { display:block; width:100%; }
a { color:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
p { text-wrap:pretty; }
h1, h2, h3 { text-wrap:balance; }

.wrap {
    width:min(1080px, calc(100% - 48px));
    margin-inline:auto;
}

.skip {
    position:absolute;
    top:-60px;
    left:16px;
    z-index:100;
    padding:10px 14px;
    color:#fff;
    background:var(--ink);
}

.skip:focus { top:12px; }

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    border-bottom:1px solid var(--line);
    background:rgba(255,250,242,.96);
}

.nav {
    display:flex;
    min-height:70px;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.back-link, .brand {
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.back-link { color:var(--sub); }
.back-link:hover { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.brand { font-size:15px; }
.brand span { color:var(--accent-dark); }

.hero {
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
    gap:70px;
    align-items:end;
    padding:92px 0 86px;
}

.status {
    margin:0 0 22px;
    color:var(--sub);
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
}

.status::before {
    display:inline-block;
    width:7px;
    height:7px;
    margin-right:8px;
    border-radius:50%;
    background:var(--green);
    content:"";
}

.status--dev::before { background:var(--accent); }
.status--private::before { background:var(--sub); }

.hero h1 {
    margin:0;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:clamp(52px,8vw,86px);
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.055em;
}

.tagline {
    margin:28px 0 0;
    font-size:clamp(22px,3vw,31px);
    line-height:1.55;
    letter-spacing:-.035em;
}

.title-line { display:block; }

.hero-description {
    max-width:560px;
    margin:22px 0 0;
    color:var(--sub);
    font-size:14px;
    line-height:1.95;
}

.actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:30px;
}

.button {
    display:inline-flex;
    min-height:42px;
    align-items:center;
    padding:9px 15px;
    border:1px solid var(--line);
    color:var(--ink);
    background:transparent;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    transition:color .18s, background-color .18s, border-color .18s;
}

.button-primary { color:#fff; border-color:var(--accent-dark); background:var(--accent-dark); }
.button:hover { border-color:var(--ink); }
.button-primary:hover { color:var(--ink); background:transparent; }

.facts {
    display:grid;
    grid-template-columns:72px 1fr;
    gap:7px 14px;
    margin:30px 0 0;
    padding-top:20px;
    border-top:1px solid var(--line);
    font-size:10px;
    line-height:1.7;
}

.facts dt { color:var(--sub); }
.facts dd { margin:0; }

.browser {
    overflow:hidden;
    border:1px solid var(--line);
    background:var(--white);
}

.browser-bar {
    display:flex;
    gap:6px;
    align-items:center;
    height:31px;
    padding:0 11px;
    border-bottom:1px solid var(--line);
    background:var(--sand);
}

.browser-bar span {
    width:7px;
    height:7px;
    border:1px solid #9c8d80;
    border-radius:50%;
}

.zoom-button {
    display:block;
    width:100%;
    padding:0;
    border:0;
    color:inherit;
    background:var(--white);
    cursor:pointer;
    text-decoration:none;
}

.hero-shot .zoom-button { aspect-ratio:16/11; }
.hero-shot img { height:100%; object-fit:cover; object-position:top; }
.hero-shot--portrait { width:min(100%,340px); justify-self:center; }
.hero-shot--portrait .zoom-button { aspect-ratio:9/16; }
.hero-shot--contain img { object-fit:contain; }
.image-note { margin:10px 0 0; color:var(--sub); font-size:10px; text-align:right; }

.content-section {
    padding:88px 0;
    border-top:1px solid var(--line);
}

.section-grid {
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:62px;
}

.section-label {
    margin:0;
    color:var(--accent-dark);
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.section-content > h2 {
    max-width:760px;
    margin:0;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-size:clamp(29px,4vw,43px);
    font-weight:600;
    line-height:1.45;
    letter-spacing:-.035em;
}

.section-intro {
    max-width:700px;
    margin:22px 0 0;
    color:var(--sub);
    font-size:14px;
    line-height:2;
}

.comparison {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-top:42px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.comparison-block { padding:27px 30px 30px 0; }
.comparison-block + .comparison-block { padding-right:0; padding-left:30px; border-left:1px solid var(--line); }
.comparison-block h3 { margin:0 0 18px; font-size:13px; }
.comparison-block.after h3 { color:var(--accent-dark); }
.steps { margin:0; padding:0; list-style:none; counter-reset:step; }
.steps li { position:relative; padding:11px 0 11px 30px; border-top:1px solid var(--line); color:var(--sub); font-size:12px; line-height:1.7; counter-increment:step; }
.steps li::before { position:absolute; top:12px; left:0; color:var(--accent-dark); font:10px/1.7 Georgia,serif; content:counter(step, decimal-leading-zero); }

.feature-list { margin-top:40px; border-top:1px solid var(--line); }
.feature {
    display:grid;
    grid-template-columns:44px 220px 1fr;
    gap:22px;
    padding:23px 0;
    border-bottom:1px solid var(--line);
}
.feature-no { color:var(--accent-dark); font:11px/1.7 Georgia,serif; }
.feature h3 { margin:0; font-size:15px; line-height:1.7; }
.feature p { margin:0; color:var(--sub); font-size:12px; line-height:1.8; }

.sand-section { background:var(--sand); }
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:42px 28px; margin-top:42px; }
.shot { margin:0; }
.shot .zoom-button { aspect-ratio:16/11; }
.shot img { height:100%; object-fit:cover; object-position:top; }
.shot figcaption { margin-top:14px; }
.shot strong { display:block; font-size:13px; }
.shot p { margin:7px 0 0; color:var(--sub); font-size:11px; line-height:1.75; }
.gallery--three { grid-template-columns:repeat(3,1fr); }
.gallery--portrait { grid-template-columns:repeat(4,1fr); }
.gallery--portrait .shot .zoom-button { aspect-ratio:9/16; }
.gallery--contain img { object-fit:contain; }

.design-note {
    margin-top:42px;
    padding:27px 30px;
    border-left:3px solid var(--accent);
    background:var(--white);
}
.design-note h3 { margin:0 0 10px; font-size:15px; }
.design-note p { margin:0; color:var(--sub); font-size:13px; line-height:1.9; }

.process-list { margin:38px 0 0; padding:0; border-top:1px solid var(--line); list-style:none; counter-reset:process; }
.process-list li { display:grid; grid-template-columns:44px 190px 1fr; gap:22px; padding:20px 0; border-bottom:1px solid var(--line); counter-increment:process; }
.process-list li::before { color:var(--accent-dark); font:11px/1.7 Georgia,serif; content:counter(process, decimal-leading-zero); }
.process-list strong { font-size:13px; line-height:1.7; }
.process-list span { color:var(--sub); font-size:12px; line-height:1.8; }

.plain-list { margin:34px 0 0; padding:0; border-top:1px solid var(--line); list-style:none; }
.plain-list li { padding:14px 0 14px 22px; border-bottom:1px solid var(--line); color:var(--sub); font-size:13px; line-height:1.8; }
.plain-list li::before { display:inline-block; width:22px; margin-left:-22px; color:var(--accent-dark); content:"—"; }

.tech-list { margin:38px 0 0; }
.tech-list div { display:grid; grid-template-columns:190px 1fr; gap:28px; padding:15px 0; border-bottom:1px solid var(--line); }
.tech-list div:first-child { border-top:1px solid var(--line); }
.tech-list dt { font-size:12px; font-weight:700; }
.tech-list dd { margin:0; color:var(--sub); font-size:12px; line-height:1.7; }

.roadmap {
    display:grid;
    grid-template-columns:90px 1fr;
    gap:28px;
    margin-top:37px;
    padding:23px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.roadmap span { color:var(--sub); font-size:10px; font-weight:700; }
.roadmap h3 { margin:0 0 8px; font-size:15px; }
.roadmap p { margin:0; color:var(--sub); font-size:12px; line-height:1.8; }

.page-end { padding:62px 0; color:#f8efe5; background:var(--ink); }
.page-end-grid { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.page-end p { margin:0 0 8px; color:#cdbfb4; font-size:10px; letter-spacing:.1em; }
.page-end h2 { margin:0; font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:26px; font-weight:600; }
.page-end a { padding:11px 16px; border:1px solid #8c7d72; font-size:12px; font-weight:700; text-decoration:none; }
.page-end a:hover { color:var(--ink); background:var(--paper); }

footer { display:flex; justify-content:space-between; gap:20px; padding:27px 0; color:var(--sub); font-size:10px; }
footer a { text-underline-offset:4px; }

.image-dialog {
    width:min(1200px, calc(100% - 32px));
    max-height:calc(100vh - 32px);
    padding:0;
    border:1px solid #6f655e;
    background:var(--paper);
}
.image-dialog::backdrop { background:rgba(34,27,23,.88); }
.dialog-head { display:flex; min-height:48px; align-items:center; justify-content:flex-end; padding:8px; border-bottom:1px solid var(--line); }
.dialog-close { min-width:38px; min-height:32px; border:1px solid var(--line); color:var(--ink); background:transparent; cursor:pointer; }
.dialog-close:hover { background:var(--sand); }
.image-dialog img { max-height:calc(100vh - 98px); object-fit:contain; background:var(--white); }

:focus-visible { outline:3px solid var(--accent-dark); outline-offset:4px; }
/* 内側に描くとリングの隣接色がスクリーンショットそのものになり、画像次第で見えなくなる。
   フォーカス中だけクリップを外し、紙色の余白の上にリングを出す */
.browser:has(.zoom-button:focus-visible) { overflow:visible; }
/* 濃色セクションでは反転させる。焦茶の背景に濃いオレンジだと 2.53:1 しか出ない */
.page-end :focus-visible { outline-color:var(--paper); }

@media (max-width:820px) {
    .wrap { width:min(100% - 32px,1080px); }
    .hero { grid-template-columns:1fr; gap:50px; padding:72px 0; }
    .hero-copy { max-width:650px; }
    .hero-shot { max-width:720px; }
    .section-grid { grid-template-columns:1fr; gap:22px; }
    .feature { grid-template-columns:36px 180px 1fr; }
    .gallery--portrait { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:620px) {
    html { scroll-padding-top:72px; }
    .nav { min-height:62px; }
    .brand { font-size:13px; }
    .title-line { display:inline; }
    .comparison, .gallery { grid-template-columns:1fr; }
    .comparison-block, .comparison-block + .comparison-block { padding:24px 0; border-left:0; }
    .comparison-block + .comparison-block { border-top:1px solid var(--line); }
    .feature { grid-template-columns:30px 1fr; gap:12px; }
    .feature p { grid-column:2; }
    .gallery--three, .gallery--portrait { grid-template-columns:1fr; }
    .gallery--portrait .shot { max-width:320px; }
    .process-list li { grid-template-columns:30px 1fr; gap:12px; }
    .process-list li span { grid-column:2; }
    .tech-list div { grid-template-columns:1fr; gap:7px; }
    .roadmap { grid-template-columns:1fr; gap:10px; }
    .page-end-grid { grid-template-columns:1fr; }
    .page-end a { justify-self:start; }
    footer { flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .button { transition:none; }
}