:root {
      --black: #121212;
      --dark: #171717;
      --silver: #C9CDD2;
      --red: #D32F2F;
      --bg: #F4F5F6;
      --text: #33373A;
      --note: #6D7378;
      --white: #FFFFFF;
      --line: rgba(18, 18, 18, .12);
      --max: 1120px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background: var(--white);
      font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      line-height: 1.8;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3, .lead, .btn, summary { word-break: auto-phrase; text-wrap: balance; }
    h1, h2, h3, p { margin: 0; }
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--red);
      font-size: 13px;
      font-weight: 700;
    }
    .eyebrow::before {
      content: "";
      width: 44px;
      height: 2px;
      background: var(--red);
      transform: skewX(-28deg);
    }
    .section { position: relative; padding: 96px 0; overflow: hidden; }
    .section-title {
      margin-top: 12px;
      color: var(--black);
      font-size: 38px;
      line-height: 1.25;
      font-weight: 800;
    }
    .lead {
      margin-top: 20px;
      max-width: 680px;
      font-size: 18px;
      color: #3E4246;
    }
    .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 14px 22px;
      border: 1px solid var(--black);
      background: var(--black);
      color: var(--white);
      font-weight: 800;
      line-height: 1.2;
      transition: transform .18s ease, background .18s ease, color .18s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn.secondary { background: transparent; color: var(--black); }
    .btn.red { background: var(--red); border-color: var(--red); }
    .ruled {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .slash {
      position: absolute;
      width: 2px;
      height: 220px;
      background: var(--red);
      transform: rotate(38deg);
      opacity: .8;
      z-index: 0;
      pointer-events: none;
    }
    .measure {
      position: absolute;
      width: 360px;
      height: 54px;
      background-image: repeating-linear-gradient(90deg, rgba(18,18,18,.25) 0 2px, transparent 2px 24px);
      opacity: .12;
      z-index: 0;
      pointer-events: none;
    }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(18,18,18,.1);
    }
    .header-inner {
      max-width: 1320px;
      margin: 0 auto;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .logo img { width: 184px; height: 46px; object-fit: contain; object-position: left center; }
    .nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 700; color: #2B2E31; }
    .header-actions { display: flex; align-items: center; gap: 10px; }
    .tel { font-weight: 800; color: var(--black); white-space: nowrap; }
    .header-cta {
      padding: 10px 16px;
      background: var(--red);
      color: var(--white);
      font-size: 14px;
      font-weight: 800;
    }
    .hero {
      width: 100%;
      min-height: 760px;
      background:
        linear-gradient(90deg, rgba(244,245,246,.96) 0%, rgba(244,245,246,.9) 43%, rgba(244,245,246,.18) 68%),
        var(--bg);
      position: relative;
      overflow: hidden;
    }
    .hero-inner {
      max-width: 1360px;
      min-height: 760px;
      margin: 0 auto;
      padding: 96px 24px 72px;
      display: grid;
      grid-template-columns: 45% 55%;
      align-items: center;
      gap: 36px;
      position: relative;
      z-index: 1;
    }
    .hero-copy { position: relative; z-index: 2; }
    .hero h1 {
      margin-top: 20px;
      color: var(--black);
      font-size: 56px;
      line-height: 1.12;
      font-weight: 900;
      /* 33.Chrome ＝ クローム金属質感＋光沢スイープ（純CSS） */
      background: linear-gradient(101deg, #3f4448 0%, #8d9398 16%, #e9edf0 33%, #ffffff 41%, #b4babe 53%, #51565b 69%, #cdd2d6 83%, #ffffff 92%, #3f4448 100%);
      background-size: 230% auto;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: chromeSweep 6.5s linear infinite;
    }
    @keyframes chromeSweep { from { background-position: 0% center; } to { background-position: -230% center; } }
    .hero-visual::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
      clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 13%);
      background: linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 62%);
      animation: photoSheen 6.5s ease-in-out infinite;
    }
    @keyframes photoSheen {
      0%, 18% { transform: translateX(-65%); opacity: 0; }
      40% { opacity: 1; }
      62% { transform: translateX(65%); opacity: 1; }
      78%, 100% { transform: translateX(65%); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero h1 { animation: none; background-position: 22% center; }
      .hero-visual::after { animation: none; opacity: 0; }
    }
    .hero .sub {
      margin-top: 24px;
      max-width: 560px;
      font-size: 18px;
      color: #2E3235;
    }
    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 28px;
    }
    .hero-tags span {
      padding: 6px 10px;
      border: 1px solid rgba(18,18,18,.18);
      background: rgba(255,255,255,.72);
      font-size: 13px;
      font-weight: 800;
      color: var(--black);
    }
    .hero-visual {
      position: relative;
      min-height: 540px;
      margin-right: -24px;
    }
    .hero-visual img.hero-photo {
      width: 100%;
      height: 580px;
      object-fit: cover;
      clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 13%);
      border-left: 8px solid var(--red);
    }
    .hero-visual .grid-deco {
      position: absolute;
      right: 5%;
      bottom: -8%;
      width: 310px;
      opacity: .26;
      mix-blend-mode: multiply;
    }
    .hero .slash { left: 50%; top: 18%; }
    .hero .measure { left: 6%; bottom: 80px; }
    .worry-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      margin-top: 42px;
      background: var(--line);
      border: 1px solid var(--line);
    }
    .worry-item {
      min-height: 210px;
      padding: 28px 22px;
      background: var(--white);
    }
    .worry-item img { width: 42px; height: 42px; object-fit: contain; margin-bottom: 24px; }
    .worry-item h3 { color: var(--black); font-size: 20px; line-height: 1.35; }
    .worry-item p { margin-top: 12px; font-size: 15px; color: var(--note); }
    .promise {
      background: var(--dark);
      color: var(--white);
    }
    .promise .section-title, .promise .lead { color: var(--white); }
    .promise-panel {
      margin-top: 42px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border: 1px solid rgba(255,255,255,.18);
    }
    .promise-block {
      padding: 34px;
      min-height: 260px;
      background: rgba(255,255,255,.04);
    }
    .promise-block + .promise-block { border-left: 1px solid rgba(255,255,255,.18); }
    .promise-block .label { color: var(--silver); font-size: 13px; font-weight: 800; }
    .promise-block h3 { margin-top: 12px; color: var(--white); font-size: 28px; line-height: 1.3; }
    .promise-block p { margin-top: 16px; color: rgba(255,255,255,.78); }
    .proof-layout {
      margin-top: 44px;
      display: grid;
      grid-template-columns: 36% 1fr;
      gap: 44px;
      align-items: start;
    }
    .proof-numbers {
      border-left: 6px solid var(--red);
      padding-left: 24px;
    }
    .proof-numbers strong {
      display: block;
      color: var(--black);
      font-size: 88px;
      line-height: .9;
      font-weight: 900;
    }
    .proof-numbers span { display: block; margin-top: 16px; color: var(--note); font-weight: 700; }
    .badge-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .badge {
      border: 1px solid var(--line);
      background: var(--white);
      padding: 18px;
    }
    .badge img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
    .badge h3 { margin-top: 16px; color: var(--black); font-size: 20px; }
    .badge p { margin-top: 8px; font-size: 14px; color: var(--note); }
    .proof-media {
      margin-top: 36px;
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 20px;
      align-items: end;
    }
    .proof-media figure {
      margin: 0;
      position: relative;
    }
    .proof-media img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      border-radius: 8px;
    }
    .proof-media figcaption {
      margin-top: 10px;
      color: var(--note);
      font-size: 13px;
    }
    .profile-card {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 18px;
      align-items: center;
      padding: 18px;
      border: 1px solid var(--line);
      background: var(--white);
    }
    .profile-card img {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      aspect-ratio: 1 / 1;
    }
    .profile-card h3 { color: var(--black); font-size: 19px; line-height: 1.4; }
    .profile-card p { margin-top: 6px; color: var(--note); font-size: 14px; line-height: 1.65; }
    .cases {
      background: var(--bg);
    }
    .case-feature {
      margin-top: 46px;
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 34px;
      align-items: end;
    }
    .case-feature img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 8px;
    }
    .case-caption {
      background: var(--white);
      border-top: 4px solid var(--red);
      padding: 30px;
      margin-left: -80px;
      position: relative;
      z-index: 1;
    }
    .case-caption h3 { color: var(--black); font-size: 26px; }
    .case-caption p { margin-top: 12px; color: var(--note); }
    .case-small {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: 28px;
    }
    .case-small article { background: var(--white); }
    .case-small img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px 8px 0 0; }
    .case-small h3 { padding: 18px 20px 4px; color: var(--black); font-size: 20px; }
    .case-small p { padding: 0 20px 20px; color: var(--note); font-size: 14px; }
    .voice-row {
      margin-top: 42px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .voice {
      padding-top: 28px;
      border-top: 1px solid var(--line);
    }
    .voice img {
      width: 92px;
      height: 92px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid var(--bg);
    }
    .voice blockquote {
      margin: 18px 0 0;
      color: var(--black);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.55;
    }
    .voice p { margin-top: 12px; color: var(--note); font-size: 14px; }
    .service-table {
      margin-top: 42px;
      border-top: 1px solid var(--line);
    }
    .service-row {
      display: grid;
      grid-template-columns: 260px 1fr 220px;
      gap: 24px;
      padding: 26px 0;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }
    .service-row h3 { color: var(--black); font-size: 22px; }
    .service-row p { color: var(--note); }
    .service-row strong { color: var(--red); font-size: 14px; }
    .service-photos {
      margin-top: 34px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .service-photo {
      position: relative;
      overflow: hidden;
      background: var(--black);
      border-radius: 8px;
    }
    .service-photo img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      opacity: .88;
      transition: transform .22s ease;
    }
    .service-photo:hover img { transform: scale(1.02); }
    .service-photo div {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 28px 24px 22px;
      color: var(--white);
      background: linear-gradient(180deg, rgba(18,18,18,0), rgba(18,18,18,.88));
    }
    .service-photo h3 { color: var(--white); font-size: 22px; }
    .service-photo p { margin-top: 6px; color: rgba(255,255,255,.76); font-size: 14px; }
    .steps {
      background: var(--dark);
      color: var(--white);
    }
    .steps .section-title, .steps .lead { color: var(--white); }
    .step-list {
      margin-top: 46px;
      display: grid;
      gap: 0;
      border-top: 1px solid rgba(255,255,255,.18);
    }
    .step {
      display: grid;
      grid-template-columns: 130px 1fr;
      gap: 28px;
      padding: 28px 0;
      border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .step .num {
      color: var(--red);
      font-size: 56px;
      line-height: 1;
      font-weight: 900;
    }
    .step h3 { color: var(--white); font-size: 24px; }
    .step p { margin-top: 8px; color: rgba(255,255,255,.72); }
    .flow-visual {
      margin-top: 38px;
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 28px;
      align-items: center;
      padding: 22px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.05);
    }
    .flow-visual img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 8px;
    }
    .flow-visual h3 { color: var(--white); font-size: 26px; line-height: 1.35; }
    .flow-visual p { margin-top: 12px; color: rgba(255,255,255,.72); }
    .faq-list {
      margin-top: 42px;
      border-top: 1px solid var(--line);
    }
    details {
      border-bottom: 1px solid var(--line);
      padding: 22px 0;
    }
    summary {
      cursor: pointer;
      color: var(--black);
      font-size: 19px;
      font-weight: 800;
      list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    details p { margin-top: 14px; max-width: 760px; color: var(--note); }
    .final-cta {
      background: var(--black);
      color: var(--white);
      padding: 92px 0;
      position: relative;
      overflow: hidden;
    }
    .final-cta .wrap {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: center;
    }
    .final-cta h2 { color: var(--white); font-size: 40px; line-height: 1.25; }
    .final-cta p { margin-top: 18px; color: rgba(255,255,255,.76); max-width: 680px; }
    .final-cta .btn.secondary { color: var(--white); border-color: rgba(255,255,255,.6); }
    .footer {
      background: #0B0B0B;
      color: rgba(255,255,255,.72);
      padding: 48px 0;
      font-size: 14px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .footer strong { color: var(--white); font-size: 18px; }
    .footer dl {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 8px 18px;
      margin: 0;
    }
    .footer dt { color: rgba(255,255,255,.48); }
    .footer dd { margin: 0; }
    @media (max-width: 960px) {
      .nav { display: none; }
      .hero-inner { grid-template-columns: 1fr; padding-top: 70px; }
      .hero-copy { max-width: 680px; }
      .hero-visual { margin-right: 0; min-height: auto; }
      .hero-visual img.hero-photo { height: auto; aspect-ratio: 16 / 10; }
      .worry-grid, .badge-row, .voice-row { grid-template-columns: 1fr 1fr; }
      .proof-layout, .proof-media, .case-feature, .final-cta .wrap { grid-template-columns: 1fr; }
      .case-caption { margin-left: 0; }
      .service-row { grid-template-columns: 1fr; gap: 8px; }
    }
    @media (max-width: 768px) {
      .section { padding: 68px 0; }
      .wrap, .header-inner { padding-left: 18px; padding-right: 18px; }
      .header-actions .tel { display: none; }
      .logo img { width: 150px; height: 38px; }
      .hero, .hero-inner { min-height: auto; }
      .hero h1 { font-size: 36px; }
      .section-title, .final-cta h2 { font-size: 30px; }
      .lead, .hero .sub { font-size: 16px; }
      .btns, .btn { width: 100%; }
      .worry-grid, .badge-row, .case-small, .voice-row, .promise-panel, .service-photos, .flow-visual, .footer-grid { grid-template-columns: 1fr; }
      .promise-block + .promise-block { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
      .proof-numbers strong { font-size: 64px; }
      .step { grid-template-columns: 72px 1fr; gap: 18px; }
      .step .num { font-size: 42px; }
      .footer dl { grid-template-columns: 1fr; }
    }
  
/* ZOROYA fixed pages / WordPress migration support */
.zoroya-sub-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.zoroya-sub-nav a,.wp-page-links a{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line,rgba(0,0,0,.14));border-radius:999px;padding:.55em 1em;font-weight:700;font-size:13px;background:rgba(255,255,255,.72)}
.zoroya-sub-nav a[aria-current="page"]{background:var(--ink,#222);color:#fff;border-color:var(--ink,#222)}
.wp-page-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.page-main{background:var(--bg,#f7f3ed);color:var(--body,#333);min-height:60vh}
.page-hero{padding:clamp(76px,10vw,132px) 0 clamp(44px,7vw,82px);border-bottom:1px solid var(--line,rgba(0,0,0,.12));background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.28))}
.page-hero .section-inner,.page-section .section-inner,.zoroya-final .section-inner{width:min(1120px,calc(100% - 44px));margin:0 auto}
.page-hero h1{font-size:clamp(32px,5vw,56px);margin:.18em 0 .28em}
.page-hero p{max-width:42em;color:var(--muted,var(--body,#555));font-size:clamp(15px,1.8vw,18px)}
.page-section{padding:clamp(58px,8vw,100px) 0;border-bottom:1px solid var(--line-soft,var(--line,rgba(0,0,0,.08)))}
.page-section h2{font-size:clamp(25px,3.4vw,40px);margin-bottom:24px}
.zoroya-sub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.zoroya-sub-card{background:var(--paper,#fff);border:1px solid var(--line,rgba(0,0,0,.12));border-radius:12px;padding:24px;box-shadow:0 18px 44px -34px rgba(0,0,0,.34)}
.zoroya-sub-card h3{font-size:clamp(19px,2vw,24px);margin-bottom:10px}
.zoroya-sub-card p,.zoroya-sub-card li{color:var(--muted,var(--body,#555));font-size:15px}
.zoroya-sub-card ul{margin:12px 0 0;padding-left:1.25em}
.zoroya-flow{display:grid;gap:14px;counter-reset:flow}
.zoroya-flow li{list-style:none;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:rgba(255,255,255,.58);border:1px solid var(--line,rgba(0,0,0,.12));padding:18px;border-radius:10px}
.zoroya-flow li::before{counter-increment:flow;content:counter(flow,decimal-leading-zero);font-weight:800;color:var(--accent,#9a6a33);font-family:inherit}
.zoroya-info{display:grid;grid-template-columns:180px 1fr;gap:0;border-top:1px solid var(--line,rgba(0,0,0,.12));background:rgba(255,255,255,.5)}
.zoroya-info dt,.zoroya-info dd{margin:0;padding:14px 16px;border-bottom:1px solid var(--line,rgba(0,0,0,.12))}
.zoroya-info dt{font-weight:800;color:var(--ink,#222)}
.zoroya-faq{display:grid;gap:14px}
.zoroya-faq details{background:var(--paper,#fff);border:1px solid var(--line,rgba(0,0,0,.12));border-radius:10px;padding:18px 20px}
.zoroya-faq summary{cursor:pointer;font-weight:800;color:var(--ink,#222)}
.zoroya-faq p{margin-top:12px;color:var(--muted,var(--body,#555))}
.zoroya-form-slot{background:var(--paper,#fff);border:1px dashed var(--accent,#9a6a33);border-radius:12px;padding:26px}
.zoroya-final{padding:clamp(56px,8vw,94px) 0;background:var(--ink,#222);color:#fff}
.zoroya-final h2{color:#fff}
.zoroya-final p{color:rgba(255,255,255,.78);max-width:40em}
.zoroya-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
@media (max-width:768px){
  .zoroya-sub-grid,.zoroya-info{grid-template-columns:1fr}
  .zoroya-info dt{padding-bottom:4px;border-bottom:0}
  .zoroya-info dd{padding-top:4px}
  .page-hero .section-inner,.page-section .section-inner,.zoroya-final .section-inner{width:min(100% - 28px,1120px)}
}