/* ============================================================
   RITCHIE WORKS — 下層ページ共通スタイル (ritchie.css)
   Service / About / Contact テンプレートから読み込まれます
   ============================================================ */
:root{
  --ink:#101114;--surface:#17181d;--line:rgba(234,232,225,.13);
  --grid:rgba(234,232,225,.04);--paper:#eae8e1;--muted:#87898f;--blue:#3d5bf5;
  --disp:"Archivo",sans-serif;--jp:"Zen Kaku Gothic New",sans-serif;
  --serif:"Shippori Mincho",serif;--mono:"Space Mono",monospace;
}
body.ritchie-page{padding:0 !important;margin:0 !important}
.ritchie-page *{margin:0;padding:0;box-sizing:border-box}
body.ritchie-page{
  background:var(--ink);color:var(--paper);font-family:var(--jp);
  font-size:15px;line-height:1.9;letter-spacing:.03em;overflow-x:hidden;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:88px 88px;
}
body.ritchie-page::after{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05;animation:rw-grain 8s steps(6) infinite;
}
@keyframes rw-grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-2%,2%)}
  40%{transform:translate(2%,-1%)}60%{transform:translate(-1%,-2%)}80%{transform:translate(1%,2%)}
}
.ritchie-page ::selection{background:var(--blue);color:var(--paper)}
.ritchie-page a{color:inherit;text-decoration:none}
.ritchie-page img{max-width:100%;display:block}

/* ---------- パーツ ---------- */
.rw-stk{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;background:var(--blue);color:#fff;padding:5px 12px;text-transform:uppercase;transform:rotate(-2deg)}
.rw-stk.alt{background:var(--paper);color:var(--ink);transform:rotate(1.5deg)}
.rw-chip{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--blue);border:1px solid rgba(61,91,245,.5);padding:3px 10px;text-transform:uppercase}
.rw-tape{position:relative}
.rw-tape::before{content:"";position:absolute;top:-9px;left:24px;width:88px;height:20px;background:rgba(234,232,225,.14);transform:rotate(-3deg);z-index:3;backdrop-filter:blur(1px)}
.rw-btn{font-family:var(--mono);font-size:12px;letter-spacing:.2em;border:1px solid var(--paper);padding:15px 34px;display:inline-block;transition:.3s;cursor:pointer;background:none;color:var(--paper)}
.rw-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- ヘッダー / フッター ---------- */
body.admin-bar .rw-header{top:32px}
.rw-header{position:fixed;top:0;left:0;right:0;z-index:9000;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(24px,5vw,120px);color:var(--paper);background:linear-gradient(to bottom,rgba(16,17,20,.9),rgba(16,17,20,0))}
.rw-logo{font-family:var(--disp);font-weight:800;font-stretch:113%;font-size:15px;letter-spacing:.13em}
.rw-logo i{font-style:normal;color:var(--blue)}
.rw-nav{display:flex;gap:clamp(14px,2.6vw,36px)}
.rw-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;opacity:.7;transition:.25s;text-transform:uppercase}
.rw-nav a:hover{opacity:1}
.rw-nav a.on{opacity:1;color:var(--blue)}
.rw-footer{border-top:1px solid var(--line);padding:22px clamp(24px,5vw,120px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.17em;color:var(--muted)}
.rw-barcode{display:flex;align-items:flex-end;gap:2px;height:22px}
.rw-barcode i{display:block;background:var(--muted);width:2px;height:100%}
.rw-barcode i:nth-child(3n){width:4px}
.rw-barcode i:nth-child(4n){height:70%}
.rw-barcode i:nth-child(5n){width:1px}

/* ---------- ページ見出し / セクション ---------- */
.rw-page-hero{padding:150px clamp(24px,5vw,120px) 0}
.rw-crumb{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);margin-bottom:22px}
.rw-crumb em{font-style:normal;color:var(--blue)}
.rw-page-title{font-family:var(--disp);font-weight:900;font-stretch:72%;font-size:clamp(64px,16vw,220px);line-height:.86;letter-spacing:.005em;text-transform:uppercase}
.rw-page-title .outline{color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.rw-page-lead{font-family:var(--serif);font-size:clamp(15px,2vw,21px);letter-spacing:.08em;line-height:2.2;max-width:640px;margin-top:32px}
.rw-sec{padding:clamp(64px,10vh,128px) clamp(24px,5vw,120px)}
.rw-sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(36px,6vh,64px)}
.rw-sec-head .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--blue)}
.rw-sec-head h2{font-family:var(--disp);font-weight:900;font-stretch:75%;font-size:clamp(30px,5vw,60px);text-transform:uppercase;letter-spacing:.01em;line-height:1}
.rw-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rw-reveal.in{opacity:1;transform:none}

/* ---------- SERVICE ---------- */
.rw-svc-list{border-top:1px solid var(--line)}
.rw-svc-item{display:grid;grid-template-columns:3fr 5fr 4fr;gap:clamp(20px,3.6vw,48px);padding:clamp(32px,5vh,52px) 0;border-bottom:1px solid var(--line);align-items:start}
.rw-svc-item .sno{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--blue);display:block;margin-bottom:10px}
.rw-svc-item h3{font-family:var(--disp);font-weight:900;font-stretch:76%;font-size:clamp(24px,4vw,42px);text-transform:uppercase;line-height:1.05}
.rw-svc-item .jp{font-size:12px;color:var(--muted);letter-spacing:.1em;display:block;margin-top:8px}
.rw-svc-item .desc{font-size:13px;color:var(--muted);line-height:2}
.rw-svc-item .desc b{color:var(--paper);font-weight:700}
.rw-svc-item .fit{border:1px solid var(--line);padding:18px 20px}
.rw-svc-item .fit .fl{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--blue);display:block;margin-bottom:10px;text-transform:uppercase}
.rw-svc-item .fit li{list-style:none;font-size:12px;color:var(--muted);padding:5px 0;border-bottom:1px dashed var(--line)}
.rw-svc-item .fit li:last-child{border-bottom:none}
.rw-flow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin-top:56px}
.rw-flow .fc{padding:22px 20px;border-right:1px solid var(--line)}
.rw-flow .fc:last-child{border-right:none}
.rw-flow .fn{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--blue);display:block;margin-bottom:8px}
.rw-flow h4{font-weight:700;font-size:14px;letter-spacing:.08em;margin-bottom:6px}
.rw-flow p{font-size:11.5px;color:var(--muted);line-height:1.85}
.rw-price{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);line-height:2}
.rw-price em{font-style:normal;color:var(--blue)}

/* ---------- ABOUT ---------- */
.rw-ab-inner{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,5vw,68px);align-items:start;margin-bottom:clamp(52px,8vh,96px)}
.rw-ab-photo{aspect-ratio:4/5;background:radial-gradient(100% 100% at 30% 20%,#262b3d,#17181d 70%);border:1px solid var(--line);position:relative;background-size:cover;background-position:center}
.rw-ab-photo::after{content:"PORTRAIT / RITCHIE";position:absolute;bottom:13px;left:15px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--paper);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.rw-ab-text h3{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.6vw,27px);letter-spacing:.1em;line-height:1.9;margin:20px 0 22px}
.rw-ab-text p{color:var(--muted);font-size:13.5px;max-width:56ch;margin-bottom:16px}
.rw-proc{border-top:1px solid var(--line)}
.rw-proc li{list-style:none;display:flex;gap:22px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--line)}
.rw-proc .pn{font-family:var(--mono);font-size:10px;color:var(--blue);letter-spacing:.2em;flex-shrink:0}
.rw-proc .pt{font-weight:700;font-size:14px;letter-spacing:.08em;flex-shrink:0;min-width:12em}
.rw-proc .pd{font-size:12.5px;color:var(--muted)}
.rw-tl{border-top:1px solid var(--line)}
.rw-tl li{list-style:none;display:flex;gap:22px;padding:15px 0;border-bottom:1px solid var(--line)}
.rw-tl .ty{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.14em;min-width:5em;flex-shrink:0}
.rw-tl .td{font-size:13px;letter-spacing:.05em}

/* ---------- CONTACT ---------- */
.rw-ct-wrap{display:grid;grid-template-columns:6fr 6fr;gap:clamp(36px,6vw,80px);align-items:start}
.rw-ct-left h2{font-family:var(--disp);font-weight:900;font-stretch:74%;font-size:clamp(48px,9vw,128px);line-height:.94;text-transform:uppercase;margin:20px 0 26px}
.rw-ct-left h2 .outline{color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.rw-ct-left p{color:var(--muted);max-width:40ch;margin-bottom:32px;font-size:13.5px}
.rw-social{border-top:1px solid var(--line)}
.rw-social a{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--muted);transition:.3s}
.rw-social a:hover{color:var(--blue)}
.rw-social a span:last-child{color:var(--paper)}
.rw-form{border:1px solid var(--line);padding:clamp(22px,3vw,38px)}
.rw-form .fl{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--blue);text-transform:uppercase;display:block;margin-bottom:8px}
.rw-form .field{margin-bottom:22px}
.rw-form input[type=text],.rw-form input[type=email],.rw-form input[type=tel],.rw-form input[type=url],.rw-form textarea,.rw-form select{
  width:100%;background:var(--surface);border:1px solid var(--line);color:var(--paper);
  font-family:var(--jp);font-size:14px;padding:12px 15px;letter-spacing:.04em;
}
.rw-form input:focus,.rw-form textarea:focus,.rw-form select:focus{outline:none;border-color:var(--blue)}
.rw-form textarea{resize:vertical;min-height:120px}
/* Contact Form 7 のチェックボックスをチップ型に */
.rw-form .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:8px}
.rw-form .wpcf7-checkbox .wpcf7-list-item{margin:0}
.rw-form .wpcf7-checkbox label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);padding:8px 13px;cursor:pointer;color:var(--muted);
  transition:.25s;user-select:none;display:inline-block;
}
.rw-form .wpcf7-checkbox label:hover{border-color:var(--blue);color:var(--blue)}
.rw-form .wpcf7-checkbox label:has(input:checked){border-color:var(--blue);color:var(--blue)}
.rw-form .wpcf7-checkbox input{position:absolute;opacity:0;width:0;height:0}
.rw-form .wpcf7-list-item-label{pointer-events:none}
.rw-form input[type=submit],.rw-form .rw-submit{
  width:100%;background:var(--paper);color:var(--ink);border:none;
  font-family:var(--mono);font-size:13px;letter-spacing:.2em;padding:17px;cursor:pointer;transition:.3s;margin-top:6px;
}
.rw-form input[type=submit]:hover{background:var(--blue);color:#fff}
.rw-form .wpcf7-not-valid-tip{font-size:11px;color:#e06a6a;font-family:var(--mono);letter-spacing:.06em;margin-top:6px;display:block}
.rw-form .wpcf7-response-output{border:1px solid var(--blue) !important;color:var(--paper);font-size:12px;padding:12px 15px;margin:18px 0 0 !important;font-family:var(--mono);letter-spacing:.06em}
.rw-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted);margin-top:13px;line-height:1.8}

/* ---------- レスポンシブ ---------- */
@media (max-width:860px){
  .rw-svc-item{grid-template-columns:1fr}
  .rw-flow{grid-template-columns:1fr 1fr}
  .rw-flow .fc{border-bottom:1px solid var(--line)}
  .rw-ab-inner{grid-template-columns:1fr}
  .rw-ab-photo{max-width:360px}
  .rw-ct-wrap{grid-template-columns:1fr}
  .rw-proc li,.rw-tl li{flex-wrap:wrap;gap:8px 18px}
  .rw-proc .pt{min-width:0}
}
@media (max-width:520px){.rw-flow{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .ritchie-page *{animation:none!important;transition:none!important}
  .rw-reveal{opacity:1;transform:none}
  body.ritchie-page::after{animation:none}
}


/* ============================================================
   WORK 一覧・詳細（v2で追加）
   ============================================================ */
/* カテゴリフィルター */
.rw-cat-index{margin-top:48px;border-top:1px solid var(--line)}
.rw-cat-index li{list-style:none;display:flex;align-items:baseline;gap:22px;padding:20px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:padding-left .3s}
.rw-cat-index li:hover{padding-left:14px}
.rw-cat-index .cn{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--blue);min-width:3.4em}
.rw-cat-index h3{font-family:var(--disp);font-weight:900;font-stretch:76%;font-size:clamp(26px,5vw,54px);text-transform:uppercase;letter-spacing:.01em;line-height:1.1;flex-shrink:0;min-width:4.6em}
.rw-cat-index .jp{font-size:11.5px;color:var(--muted);letter-spacing:.1em}
.rw-cat-index .arrow{margin-left:auto;font-family:var(--mono);color:var(--muted);transition:.3s}
.rw-cat-index li:hover .arrow{color:var(--blue);transform:translateX(6px)}
.rw-cat-index li.on h3{color:var(--blue)}
.rw-cat-index li.on .arrow{color:var(--blue)}

/* 作品カード（左右交互の特集形式） */
.rw-feat{display:grid;grid-template-columns:7fr 5fr;gap:clamp(22px,4vw,52px);align-items:center;padding:clamp(48px,8vh,88px) 0;border-bottom:1px solid var(--line)}
.rw-feat.alt{grid-template-columns:5fr 7fr}
.rw-feat.alt .fi{order:2}
.rw-feat .fi{aspect-ratio:16/10;background:var(--surface);border:1px solid var(--line);position:relative;overflow:hidden}
.rw-feat .th{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rw-feat:hover .th{transform:scale(1.04)}
.rw-feat:hover .fi{border-color:var(--blue)}
.rw-feat .cap{position:absolute;top:13px;left:15px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--paper);text-shadow:0 1px 4px rgba(0,0,0,.6);z-index:2}
.rw-feat .fm .no{font-family:var(--disp);font-weight:900;font-stretch:72%;font-size:clamp(44px,7vw,96px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--muted);display:block;margin-bottom:16px}
.rw-feat:hover .fm .no{-webkit-text-stroke-color:var(--blue)}
.rw-feat .fm h3{font-weight:700;font-size:clamp(17px,2.2vw,24px);letter-spacing:.05em;line-height:1.65;margin:14px 0 10px}
.rw-feat .fm p{font-size:12.5px;color:var(--muted);max-width:42ch;margin-bottom:16px;line-height:1.95}
.rw-feat .fm .more{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);transition:color .3s}
.rw-feat:hover .more{color:var(--blue)}
.rw-feat.rw-hide{display:none}
.rw-wfoot{padding-top:clamp(36px,6vh,60px);text-align:center}
.rw-wfoot p{font-family:var(--serif);font-size:clamp(13.5px,1.7vw,17px);letter-spacing:.12em;color:var(--muted);line-height:2.2}
.rw-empty{padding:60px 0;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted)}

/* グラデ（アイキャッチ未設定時の代替） */
.rw-g1{background:radial-gradient(120% 120% at 20% 15%,#2a3050,#17181d 60%)}
.rw-g2{background:radial-gradient(120% 120% at 80% 20%,#40321e,#17181d 62%)}
.rw-g3{background:radial-gradient(130% 130% at 25% 80%,#1d3a34,#17181d 62%)}
.rw-g4{background:radial-gradient(130% 130% at 75% 75%,#3a1e2c,#17181d 62%)}
.rw-g5{background:radial-gradient(130% 130% at 50% 20%,#23345c,#17181d 65%)}

/* 詳細ページ */
.rw-dgrid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(28px,5vw,64px);align-items:start}
.rw-spec{position:sticky;top:110px;border:1px solid var(--line)}
.rw-spec .row{display:flex;padding:15px 18px;border-bottom:1px solid var(--line);gap:16px}
.rw-spec .row:last-child{border-bottom:none}
.rw-spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--blue);min-width:5.5em;flex-shrink:0;text-transform:uppercase}
.rw-spec .v{font-size:13px;letter-spacing:.04em;line-height:1.7}
.rw-dhero{aspect-ratio:16/9;border:1px solid var(--line);margin-bottom:30px;background-size:cover;background-position:center;background-color:var(--surface)}
/* 投稿本文のスタイル */
.rw-content{max-width:64ch}
.rw-content p{color:var(--muted);font-size:13.5px;margin-bottom:20px;line-height:2.1}
.rw-content h2{font-family:var(--serif);font-weight:600;font-size:clamp(18px,2.2vw,25px);letter-spacing:.08em;margin:40px 0 18px;line-height:1.8;color:var(--paper)}
.rw-content h3{font-weight:700;font-size:15.5px;letter-spacing:.06em;margin:32px 0 14px;color:var(--paper)}
.rw-content img{border:1px solid var(--line);margin:26px 0;height:auto}
.rw-content figure{margin:26px 0}
.rw-content figure img{margin:0}
.rw-content figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);margin-top:8px}
.rw-content ul,.rw-content ol{padding-left:1.4em;margin-bottom:20px;color:var(--muted);font-size:13.5px}
.rw-content li{margin-bottom:6px}
.rw-content a{color:var(--blue);border-bottom:1px solid rgba(61,91,245,.4)}
.rw-content blockquote{border-left:2px solid var(--blue);padding-left:18px;margin:26px 0;color:var(--muted);font-family:var(--serif)}
.rw-content .wp-block-image{margin:26px 0}
.rw-nextnav{display:flex;justify-content:space-between;gap:20px;margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.rw-nextnav a{font-family:var(--mono);font-size:12px;letter-spacing:.17em;color:var(--muted);transition:.3s}
.rw-nextnav a:hover{color:var(--blue)}

@media (max-width:860px){
  .rw-feat,.rw-feat.alt{grid-template-columns:1fr}
  .rw-feat.alt .fi{order:0}
  .rw-dgrid{grid-template-columns:1fr}
  .rw-spec{position:static}
  .rw-cat-index h3{font-size:clamp(22px,7vw,34px)}
}


/* 作品詳細：本文内の表の余白調整 */
.rw-content table{width:100%;border-collapse:collapse;margin:28px 0}
.rw-content table th,
.rw-content table td{padding:20px 12px;vertical-align:middle;border-color:var(--line)}

/* スマホ：ヘッダーに背景を敷いて本文との重なりを解消 */
@media (max-width:860px){
  .rw-header{background:rgba(16,17,20,.92);backdrop-filter:blur(6px)}
}