:root{ --bg:#000; --fg:#f2f0ea; --muted:#8a8a86; --line:#232320; }
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.8; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

header{position:sticky; top:0; z-index:10; background:rgba(0,0,0,0.85); backdrop-filter:blur(6px);}
header .wrap{display:flex; justify-content:space-between; align-items:center; height:80px;}
.logo{font-weight:600; letter-spacing:0.12em; font-size:14px; text-transform:uppercase;}
nav{display:flex; gap:36px;}
nav a{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg);}
nav a:hover{color:var(--muted);}

.hero{position:relative; height:100vh; min-height:640px; display:flex; align-items:flex-end;}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.75;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, #000 0%, rgba(0,0,0,0.1) 55%, rgba(0,0,0,0.55) 100%);}
.hero .wrap{position:relative; z-index:1; padding-bottom:90px; width:100%;}
.hero .eyebrow{font-size:12px; letter-spacing:0.2em; color:var(--muted); text-transform:uppercase; margin-bottom:24px;}
.hero h1{font-size:clamp(36px,6.5vw,76px); font-weight:700; letter-spacing:-0.01em; text-transform:uppercase; line-height:1.05;}
.hero .jp{color:var(--muted); font-size:14px; margin-top:24px; max-width:440px; letter-spacing:0.03em;}
.arrow-link{display:inline-block; margin-top:44px; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; border-bottom:1px solid var(--fg); padding-bottom:4px;}
.arrow-link:hover{opacity:0.55;}

section{padding:140px 0; border-top:1px solid var(--line);}
section.tight{padding:110px 0;}
.section-head{margin-bottom:72px;}
.section-head .eyebrow{font-size:12px; letter-spacing:0.2em; color:var(--muted); text-transform:uppercase;}
.section-head h2{font-size:clamp(28px,4vw,44px); font-weight:700; text-transform:uppercase; margin-top:18px; letter-spacing:-0.01em;}
.section-head p{color:var(--muted); max-width:460px; margin-top:22px; font-size:14px; line-height:1.9;}

.grid2{display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center;}
.grid2.rev{grid-template-columns:0.9fr 1.1fr;}
.grid2.rev .imgbox{order:2;}
.imgbox{background:#0d0d0b; aspect-ratio:4/5; overflow:hidden;}
.imgbox img{width:100%; height:100%; object-fit:cover; display:block;}
.imgbox.render img{object-fit:contain; background:#0d0d0b;}
.imgbox.landscape{aspect-ratio:16/10;}
.imgbox.landscape img{object-position:center top;}
.specs{list-style:none; margin-top:32px; font-size:13px; color:var(--muted);}
.specs li{padding:14px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; letter-spacing:0.02em;}
.specs li b{color:var(--fg); font-weight:500;}

.about-copy{max-width:620px;}
.about-copy p{color:var(--muted); font-size:14.5px; line-height:2.0; margin-bottom:26px;}
.about-copy p.closing{color:var(--fg); font-style:italic; margin-top:40px;}

.rows{border-top:1px solid var(--line);}
.row{display:flex; justify-content:space-between; align-items:baseline; padding:32px 0; border-bottom:1px solid var(--line);}
.row h3{font-size:16px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;}
.row p{color:var(--muted); font-size:13px; max-width:380px; text-align:right;}

footer{border-top:1px solid var(--line); padding:60px 0; color:var(--muted); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; text-align:center;}

@media (max-width:760px){
  .grid2, .grid2.rev{grid-template-columns:1fr;}
  .grid2.rev .imgbox{order:0;}
  nav{display:none;}
  .row{flex-direction:column; gap:8px;}
  .row p{text-align:left;}
}

/* ---- Journal（SEO記事セクション）: 読みやすさ優先、世界観は最小限で継承 ---- */
.journal-head{padding:180px 0 80px; border-top:none;}
.journal-head .eyebrow{font-size:12px; letter-spacing:0.2em; color:var(--muted); text-transform:uppercase;}
.journal-head h1{font-size:clamp(32px,5vw,52px); font-weight:700; text-transform:uppercase; margin-top:18px; letter-spacing:-0.01em;}
.journal-head p{color:var(--muted); max-width:520px; margin-top:22px; font-size:14px; line-height:1.9;}

.article-list{border-top:1px solid var(--line);}
.article-card{display:block; padding:36px 0; border-bottom:1px solid var(--line);}
.article-card .cat{font-size:11px; letter-spacing:0.15em; color:var(--muted); text-transform:uppercase;}
.article-card h3{font-size:20px; font-weight:600; margin-top:10px; letter-spacing:0.01em;}
.article-card p{color:var(--muted); font-size:13px; margin-top:10px; max-width:640px; line-height:1.8;}
.article-card:hover h3{color:var(--muted);}

/* 記事本文（prose）: 本文だけ行間広め・文字色をやや落として長文でも読みやすく */
.prose{max-width:680px; margin:0 auto; padding:160px 32px 0;}
.prose .eyebrow{font-size:12px; letter-spacing:0.2em; color:var(--muted); text-transform:uppercase;}
.prose h1{font-size:clamp(28px,4.5vw,44px); font-weight:700; margin-top:20px; line-height:1.3; letter-spacing:-0.01em;}
.prose .meta{color:var(--muted); font-size:12px; margin-top:18px; letter-spacing:0.05em;}
.prose .lead{color:var(--muted); font-size:16px; margin-top:32px; line-height:1.9;}
.prose h2{font-size:22px; font-weight:600; margin-top:56px; margin-bottom:18px; letter-spacing:0.01em;}
.prose p{font-size:15px; line-height:2.0; margin-bottom:22px; color:#d8d6cf;}
.prose img{width:100%; display:block; margin:40px 0; background:#0d0d0b;}
.prose ul, .prose ol{margin:0 0 22px 22px; color:#d8d6cf; font-size:15px; line-height:1.9;}

.funnel-cta{margin:80px 0 0; padding:48px 40px; border:1px solid var(--line); text-align:center;}
.funnel-cta p{color:var(--muted); font-size:13px; margin-bottom:20px;}
.funnel-cta .arrow-link{margin-top:0;}