/*
Theme Name: GET UP
Theme URI: https://getup-kz.com/
Author: getupsite project
Description: 株式会社GETUP(福島県福島市) コーポレートサイト用オリジナルテーマ
Version: 1.0.0
Text Domain: getup
*/

  :root{
    --ink:#1a1613;      /* 黒(ややブラウン寄り、真っ黒の高級感を避ける) */
    --paper:#f6efe4;    /* 温かみのあるオフホワイト */
    --red:#c8202c;      /* アクセントの赤(ロゴのTOTAL CAR SERVICEと同系) */
    --red-deep:#8f1620;
    --line:#d8cdb9;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:"Hiragino Sans","Noto Sans JP",sans-serif;
    background:var(--paper);
    color:var(--ink);
  }
  .note{
    background:#fff3cd;
    color:#5a4a1a;
    font-size:13px;
    padding:8px 16px;
    text-align:center;
    border-bottom:1px solid #e2c766;
  }

  /* ===== 共通: スクロールリビール ===== */
  .reveal-up{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);
  }
  .reveal-up.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ===== HERO ===== */
  .hero{
    background:var(--ink);
    color:var(--paper);
    position:relative;
    overflow:hidden;
  }
  .scroll-hint{
    position:absolute;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:#c9bfae;
    font-size:11px;
    letter-spacing:.1em;
    z-index:4;
    opacity:0;
    animation:scrollHintFadeIn .6s ease forwards;
    animation-delay:2.2s;
  }
  .scroll-hint::after{
    content:"";
    width:10px;
    height:10px;
    border-right:2px solid #c9bfae;
    border-bottom:2px solid #c9bfae;
    transform:rotate(45deg);
    animation:scrollHintBounce 1.6s ease-in-out infinite;
  }
  @keyframes scrollHintFadeIn{ to{ opacity:1; } }
  @keyframes scrollHintBounce{
    0%,100%{ transform:rotate(45deg) translate(0,0); }
    50%{ transform:rotate(45deg) translate(4px,4px); }
  }
  .hero-inner{
    max-width:1600px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    position:relative;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:-20%;
    background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size:6px 6px;
    pointer-events:none;
    animation:driftDots 40s linear infinite;
  }
  @keyframes driftDots{
    from{transform:translate(0,0);}
    to{transform:translate(-40px,-40px);}
  }
  .hero-logo{
    display:block;
    width:clamp(200px, 26vw, 340px);
    height:auto;
    margin-bottom:8px;
    z-index:2;
    opacity:0;
    transform:scale(.7);
    transform-origin:left center;
  }
  .hero-copy{
    flex:1 1 380px;
    padding:96px 40px 56px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
    z-index:1;
  }
  .hero-copy .brand{
    color:var(--red);
    font-weight:900;
    letter-spacing:.08em;
    font-size:15px;
    overflow:hidden;
  }
  .hero-copy h1{
    font-size:clamp(28px,4.5vw,46px);
    line-height:1.35;
    margin:0;
    font-weight:900;
    overflow:hidden;
  }
  .hero-copy h1 .line{
    display:block;
    transform:translateY(110%);
  }
  .hero-copy h1 span.hl{
    background:linear-gradient(transparent 60%, var(--red) 60%);
    color:var(--paper);
    background-size:0% 100%;
    background-repeat:no-repeat;
    transition:background-size 1s ease .6s;
  }
  .hero.is-ready h1 span.hl{ background-size:100% 100%; }
  .hero-copy p.sub{
    font-size:15px;
    line-height:1.9;
    color:#d8cdb9;
    margin:0;
    max-width:34em;
  }
  .cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:8px;
  }
  .cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 22px;
    border-radius:6px;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    border:2px solid transparent;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .cta:active{
    transform:scale(.97);
    transition:transform 140ms ease-out;
  }
  .cta.primary{
    background:var(--red);
    color:#fff;
  }
  .cta.primary.pulse{
    animation:pulseGlow 2.6s ease-in-out infinite;
  }
  .cta.primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(200,32,44,.45);
  }
  .cta.secondary{
    border-color:var(--paper);
    color:var(--paper);
  }
  .cta.secondary:hover{
    background:var(--paper);
    color:var(--ink);
    transform:translateY(-2px);
  }
  .cta.ghost{
    border-color:var(--red);
    color:var(--red);
    background:transparent;
  }
  .cta.ghost:hover{
    background:var(--red);
    color:#fff;
    transform:translateY(-2px);
  }
  @keyframes pulseGlow{
    0%,100%{ box-shadow:0 0 0 0 rgba(200,32,44,.5); }
    50%{ box-shadow:0 0 0 8px rgba(200,32,44,0); }
  }
  .hero-manga{
    flex:1 1 340px;
    position:relative;
    min-height:420px;
    z-index:1;
    border-left:6px solid var(--red);
    overflow:hidden;
  }
  .hero-manga .panel{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:contrast(1.05);
  }
  .hero-manga .panel-1{
    transform:scale(1.18);
    opacity:0;
    object-position:72% 40%;
  }
  .hero-manga .panel-2{
    opacity:0;
  }
  .hero-manga .flash{
    position:absolute;
    inset:0;
    background:#fff;
    opacity:0;
    z-index:2;
    pointer-events:none;
  }
  .hero-bubble{
    position:absolute;
    bottom:3%;
    left:3%;
    width:min(440px, 46vw);
    height:min(560px, 66vh);
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(246,239,228,.88);
    backdrop-filter:blur(1px);
    clip-path:polygon(50% 0%, 65% 13%, 85% 15%, 87% 35%, 100% 50%, 87% 65%, 85% 85%, 65% 87%, 50% 100%, 35% 87%, 15% 85%, 13% 65%, 0% 50%, 13% 35%, 15% 15%, 35% 13%);
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));
    opacity:0;
    transform:scale(.3);
    transform-origin:bottom left;
    z-index:3;
  }
  .hero-bubble-text{
    writing-mode:vertical-rl;
    text-orientation:upright;
    color:var(--ink);
    font-weight:900;
    font-size:26px;
    line-height:1.55;
  }
  .hero-bubble-text .tcy{
    text-combine-upright:all;
  }
  .hero-bubble::after{
    content:"";
    position:absolute;
    top:-13px;
    right:26px;
    width:0;
    height:0;
    border-style:solid;
    border-width:0 8px 15px 0;
    border-color:transparent transparent var(--ink) transparent;
  }

  /* hero-manga は .hero-inner が flex-wrap する幅(380px+340px)を下回ると
     単独の横幅基準の箱になり高さはmin-height基準になるため、
     66vhなど縦長基準のサイズだと箱からはみ出して見切れる。
     幅基準のサイズに切り替えて防ぐ。 */
  @media (max-width: 760px){
    .hero-bubble{
      width:min(230px, 58vw);
      height:min(300px, 66vw);
      bottom:4%;
      left:4%;
    }
    .hero-bubble-text{
      font-size:18px;
      line-height:1.5;
    }
  }

  /* ===== 会社の言葉 ===== */
  .voice{
    max-width:760px;
    margin:0 auto;
    padding:128px 24px;
    text-align:center;
  }
  .voice .kicker{
    color:var(--red);
    font-weight:900;
    font-size:22px;
    letter-spacing:.1em;
  }
  .voice blockquote{
    font-size:19px;
    line-height:2;
    margin:20px 0 0;
    font-weight:700;
  }
  .voice-note{
    margin:20px 0 0;
    font-size:12px;
    color:#a99;
  }

  /* ===== 実績 ===== */
  .stats{
    background:var(--ink);
    padding:72px 24px;
    position:relative;
    overflow:hidden;
  }
  .stats > .shop-watermark{
    position:absolute !important;
    top:50%;
    left:0;
    right:0;
    width:100%;
    max-width:none;
    transform:translateY(-50%);
    filter:invert(1);
    opacity:.16;
    pointer-events:none;
    z-index:0;
  }
  .stats-grid{
    max-width:900px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:40px;
    text-align:center;
    position:relative;
    z-index:1;
  }
  .stat-kicker{
    font-size:16px;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--red);
    margin-bottom:10px;
  }
  .stat-num.stat-stars{ color:#e8b84b; letter-spacing:2px; }
  .stat-num{
    font-size:44px;
    font-weight:900;
    color:var(--paper);
  }
  .stat-num .count-up{ color:var(--red); }
  .stat-label{
    font-size:13px;
    color:#a89b84;
    margin-top:6px;
  }
  .stat-link{
    color:var(--red);
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .placeholder-flag{
    display:inline-block;
    margin-top:6px;
    font-size:11px;
    background:#fff3cd;
    color:#7a6114;
    padding:2px 8px;
    border-radius:4px;
  }

  /* ===== 汎用セクション ===== */
  section.block{
    max-width:1200px;
    margin:0 auto;
    padding:64px 24px;
  }
  section.block-gray{
    background:#a29d93;
    box-shadow:0 0 0 100vmax #a29d93;
    clip-path:inset(0 -100vmax);
    position:relative;
    overflow:hidden;
  }
  section.block-gray > .gray-watermark{
    position:absolute !important;
    top:-30px;
    left:0;
    right:0;
    width:78%;
    max-width:none;
    transform:rotate(-8deg) translateX(-8%);
    opacity:.14;
    pointer-events:none;
    z-index:0;
  }
  section.block-gray > *:not(.gray-watermark){ position:relative; z-index:1; }
  section.block-gray .section-lead{ color:#3a3630; }
  section.block-gray .photo-card .photo-caption{ color:#4a4640; }

  section.block-shop{
    background:var(--ink);
    box-shadow:0 0 0 100vmax var(--ink);
    clip-path:inset(0 -100vmax);
    position:relative;
    overflow:hidden;
  }
  section.block-shop > .shop-watermark{
    position:absolute !important;
    top:50%;
    left:0;
    right:0;
    width:100%;
    max-width:none;
    transform:translateY(-50%);
    filter:invert(1);
    opacity:.2;
    pointer-events:none;
    z-index:0;
  }
  section.block-shop > *:not(.shop-watermark){ position:relative; z-index:1; }
  section.block-shop .section-title{ color:var(--paper); }
  section.block-red-wash{
    background:#f5e9e6;
    box-shadow:0 0 0 100vmax #f5e9e6;
    clip-path:inset(0 -100vmax);
  }
  h2.section-title{
    font-size:32px;
    font-weight:900;
    margin:0 0 28px;
    padding-left:16px;
    border-left:7px solid var(--red);
  }
  .card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
  }
  .card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:20px;
    font-size:14px;
    line-height:1.8;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .6s cubic-bezier(.16,.84,.44,1), transform .3s ease;
  }
  .card.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  /* note: カード自体はリンクではないためhoverの浮き上がりは付けない(押せそうに見せない) */
  .card.ph{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#a99;
    background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f1e7d7 10px,#f1e7d7 20px);
    min-height:160px;
    font-size:13px;
  }

  .reason-list{
    display:flex;
    flex-direction:column;
  }
  .reason-row{
    display:flex;
    align-items:flex-start;
    gap:28px;
    padding:30px 0;
    border-top:1px solid var(--line);
  }
  .reason-row:first-child{ border-top:none; padding-top:8px; }
  .reason-num{
    flex:none;
    width:76px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:52px;
    font-weight:900;
    line-height:1;
    color:var(--red);
  }
  .reason-body{ flex:1; padding-top:6px; }
  .reason-title{ margin:0 0 12px; }
  .reason-title span{
    display:inline-block;
    background:var(--ink);
    color:#fff;
    font-weight:900;
    font-size:18px;
    padding:7px 16px;
    border-radius:2px;
  }
  .reason-text{
    margin:0;
    font-size:14px;
    line-height:1.8;
    color:#4a4032;
    max-width:640px;
  }

  .staff-card{
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .staff-grid{
    max-width:760px;
    margin:0 auto;
  }
  .staff-card img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    background:var(--ink);
  }
  .staff-photo{ overflow:hidden; }
  .staff-card .staff-body{ padding:20px; position:relative; z-index:1; }
  .staff-card .staff-name{
    font-size:16px;
    font-weight:900;
    margin:0 0 2px;
  }
  .staff-card .staff-role{
    font-size:12px;
    color:#6b5f4d;
    margin:0 0 12px;
  }
  .staff-card .staff-quote{
    font-size:13px;
    line-height:1.7;
    border-left:3px solid var(--red);
    padding-left:10px;
    margin:0;
  }

  .voice-slider{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
    margin:0 -24px;
    padding-left:24px;
    padding-right:24px;
  }
  .voice-slider .voice-card{
    flex:0 0 auto;
    width:min(320px, 82vw);
    scroll-snap-align:start;
  }
  .voice-card{ display:flex; flex-direction:column; gap:14px; }
  .voice-head{ display:flex; align-items:center; gap:12px; }
  .voice-avatar{
    flex:0 0 auto;
    width:40px; height:40px;
    border-radius:50%;
    background:var(--ink);
    color:var(--paper);
    font-weight:900;
    font-size:15px;
    display:flex; align-items:center; justify-content:center;
  }
  .voice-name{ margin:0; font-weight:900; font-size:14px; }
  .voice-age{
    margin-left:8px;
    font-size:11px;
    font-weight:700;
    color:var(--red);
    background:#f6e2e2;
    padding:2px 8px;
    border-radius:999px;
  }
  .voice-tag{ margin:0; font-size:11px; color:#a99; }
  .voice-text{ margin:0; font-size:13px; line-height:1.8; }

  .photo-card{
    padding:0;
    overflow:hidden;
  }
  .photo-card img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
  }
  .photo-card .photo-caption{
    margin:0;
    padding:14px 16px;
    font-size:13px;
    color:#6b5f4d;
  }

  .service-hero{
    background:var(--ink);
    color:var(--paper);
    border-radius:10px;
    padding:36px 32px;
    margin:22px 0 28px;
    position:relative;
    overflow:visible;
  }
  .service-hero::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:10px;
    overflow:hidden;
    background:linear-gradient(120deg, transparent 60%, rgba(200,32,44,.25));
    pointer-events:none;
  }
  .service-hero-copy{
    position:relative;
    z-index:1;
    max-width:600px;
  }
  .service-hero-watermark{
    position:absolute !important;
    top:0;
    right:0;
    bottom:0;
    width:58%;
    height:100%;
    object-fit:cover;
    border-radius:0 10px 10px 0;
    filter:invert(1);
    opacity:.24;
    pointer-events:none;
    z-index:0;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 28%);
    mask-image:linear-gradient(to right, transparent, #000 28%);
  }
  .service-hero-badge{
    position:absolute;
    top:-22px;
    right:24px;
    width:112px;
    height:112px;
    border-radius:50%;
    background:var(--red);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:15px;
    font-weight:900;
    line-height:1.3;
    transform:rotate(-9deg);
    box-shadow:0 8px 18px rgba(0,0,0,.4);
    border:4px solid var(--paper);
    z-index:2;
  }
  .service-hero-kicker{
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--red);
    margin-bottom:10px;
  }
  .service-hero-title{
    font-size:34px;
    font-weight:900;
    line-height:1.2;
  }
  .service-hero-title .service-hero-sub{
    font-size:16px;
    font-weight:700;
    color:#c9bfa8;
    margin-left:8px;
  }
  .service-hero-text{
    margin:14px 0 0;
    font-size:14px;
    line-height:1.8;
    color:#d8cdb9;
    max-width:520px;
  }
  .service-hero-copy .cta-row{ margin-top:20px; }

  .service-tags-lead{
    margin:0 0 12px;
    font-size:13px;
    color:#a99;
  }

  .services-list-wrap{
    border-radius:10px;
    overflow:hidden;
    background:var(--ink);
    position:relative;
  }
  .services-list{
    display:flex;
    flex-direction:column;
    padding:0;
    margin:0;
    position:relative;
    z-index:1;
  }
  .services-list-watermark{
    position:absolute;
    top:50%;
    right:0;
    width:60%;
    max-width:420px;
    transform:translateY(-50%);
    opacity:.14;
    pointer-events:none;
    z-index:0;
  }
  .services-list li{
    list-style:none;
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 20px;
    font-weight:700;
    font-size:14px;
    color:var(--paper);
    border-top:1px solid rgba(255,255,255,.12);
    position:relative;
    z-index:1;
    opacity:0;
    transform:translateX(48px);
    transition:opacity .5s cubic-bezier(.16,.84,.44,1), transform .5s cubic-bezier(.16,.84,.44,1);
  }
  .services-list li.is-visible{
    opacity:1;
    transform:translateX(0);
  }
  .services-list li:first-child{ border-top:none; }
  .services-list li:nth-child(odd){ background:rgba(255,255,255,.04); }
  .services-list-body{ display:flex; flex-direction:column; gap:2px; }
  .services-list-title{ margin:0; }
  .services-list-sub{
    margin:0;
    font-weight:400;
    font-size:12px;
    color:#c9bfae;
  }
  .services-list-num{
    flex:none;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--red);
    color:var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
  }
  /* note: 一覧項目もリンクではないためhoverは付けない(押せそうに見せない) */

  .section-lead{
    margin:-16px 0 28px;
    font-size:15px;
    font-weight:700;
    color:#6b5f4d;
  }

  .section-note{
    margin:16px 0 0;
    font-size:12px;
    color:#a99;
  }

  .company-table{
    margin:0;
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    background:#fff;
  }
  .company-row{
    display:grid;
    grid-template-columns:140px 1fr;
    border-top:1px solid var(--line);
  }
  .company-row:first-child{ border-top:none; }
  .company-row dt{
    margin:0;
    padding:14px 18px;
    background:#8f8b81;
    font-weight:700;
    font-size:13px;
    color:#fff;
  }
  .company-row dd{
    margin:0;
    padding:14px 18px;
    font-size:14px;
  }
  .company-row dd.ph-text{ color:#a99; }

  .inventory-cta{
    background:#fff;
    border:2px dashed var(--red);
    border-radius:10px;
    padding:28px;
    text-align:center;
    margin-top:32px;
  }
  .inventory-cta p{margin:0 0 14px;font-size:14px;color:#6b5f4d;}

  /* ===== フッターCTA ===== */
  .diagonal-divider{
    height:90px;
    background:var(--ink);
    clip-path:polygon(0 100%, 100% 0%, 100% 100%);
    margin-bottom:-1px;
  }
  .footer-cta{
    background:var(--ink);
    color:var(--paper);
    text-align:center;
    padding:64px 24px;
    position:relative;
    overflow:hidden;
  }
  .footer-cta::before{
    content:"";
    position:absolute;
    inset:-20%;
    background-image:radial-gradient(rgba(200,32,44,0.18) 1px, transparent 1px);
    background-size:8px 8px;
    animation:driftDots 30s linear infinite reverse;
  }
  .footer-cta *{position:relative;z-index:1;}
  .footer-cta img.footer-watermark{
    position:absolute !important;
    top:50%;
    left:0;
    right:0;
    width:100%;
    max-width:none;
    transform:translateY(-50%);
    filter:invert(1);
    opacity:.2;
    pointer-events:none;
    z-index:0;
  }
  .footer-cta h2{font-size:24px;margin:0 0 8px;max-width:720px;margin-left:auto;margin-right:auto;}
  .footer-cta p{color:#c9bfae;margin:0 0 24px;font-size:14px;}
  .contact-info{
    font-size:13px;
    color:#a99;
    margin-top:40px;
  }

  /* ===== フローティングCTA ===== */
  .float-cta{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:50;
    display:flex;
    gap:8px;
    transform:translateY(140%);
    transition:transform .5s cubic-bezier(.16,.84,.44,1);
  }
  .float-cta.show{ transform:translateY(0); }
  .float-cta a{
    box-shadow:0 10px 26px rgba(26,22,19,.35);
  }
  .float-cta .float-cta-tel{
    background:var(--paper);
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
    .reveal-up{opacity:1; transform:none;}
    .hero-copy h1 .line{transform:none;}
    .hero-manga .panel-1{display:none;}
    .hero-manga .panel-2{opacity:1; transform:none;}
    .hero-bubble{opacity:1; transform:none;}
    .card-grid .card, .voice-slider .card, .services-list li{opacity:1; transform:none;}
    /* 押下フィードバックだけは残す(前庭系への負担が小さいため) */
    .cta:active{transform:scale(.97); transition:transform 140ms ease-out !important;}
  }

/* ===== 注文販売ページ 固有スタイル ===== */
    :root {
      --ink: #1a1613;
      --paper: #f6efe4;
      --red: #c8202c;
      --red-deep: #8f1620;
      --line: #d8cdb9;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
      background: var(--paper);
      color: var(--ink);
    }

    .note {
      background: #fff3cd;
      color: #5a4a1a;
      font-size: 13px;
      padding: 8px 16px;
      text-align: center;
      border-bottom: 1px solid #e2c766;
    }

    .backlink {
      display: block;
      text-align: center;
      font-size: 13px;
      padding: 10px 16px;
      background: #efe6d4;
      color: #6b5f4d;
      text-decoration: none;
    }

    .backlink:hover {
      color: var(--red);
    }

    /* ===== 共通: スクロールリビール ===== */
    .reveal-up {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .9s cubic-bezier(.16, .84, .44, 1), transform .9s cubic-bezier(.16, .84, .44, 1);
    }

    .reveal-up.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ===== 汎用セクション ===== */
    section.block {
      max-width: 1200px;
      margin: 0 auto;
      padding: 64px 24px;
    }

    section.block-gray {
      background: #a29d93;
      box-shadow: 0 0 0 100vmax #a29d93;
      clip-path: inset(0 -100vmax);
      position: relative;
      overflow: hidden;
    }

    section.block-gray>.gray-watermark {
      position: absolute !important;
      top: -30px;
      left: 0;
      right: 0;
      width: 78%;
      max-width: none;
      transform: rotate(-8deg) translateX(-8%);
      opacity: .14;
      pointer-events: none;
      z-index: 0;
    }

    section.block-gray>*:not(.gray-watermark) {
      position: relative;
      z-index: 1;
    }

    section.block-gray .section-lead {
      color: #3a3630;
    }

    section.block-shop {
      background: var(--ink);
      color: var(--paper);
      box-shadow: 0 0 0 100vmax var(--ink);
      clip-path: inset(0 -100vmax);
      position: relative;
      overflow: hidden;
    }

    section.block-shop>.shop-watermark {
      position: absolute !important;
      top: 50%;
      left: 0;
      right: 0;
      width: 100%;
      max-width: none;
      transform: translateY(-50%);
      filter: invert(1);
      opacity: .2;
      pointer-events: none;
      z-index: 0;
    }

    section.block-shop>*:not(.shop-watermark) {
      position: relative;
      z-index: 1;
    }

    section.block-shop .section-title {
      color: var(--paper);
    }

    h2.section-title {
      font-size: 32px;
      font-weight: 900;
      margin: 0 0 28px;
      padding-left: 16px;
      border-left: 7px solid var(--red);
    }

    .section-lead {
      margin: -16px 0 28px;
      font-size: 15px;
      font-weight: 700;
      color: #6b5f4d;
    }

    .section-note {
      margin: 16px 0 0;
      font-size: 12px;
      color: #a99;
    }

    .inline-photo {
      display: block;
      width: 100%;
      max-width: 640px;
      border-radius: 8px;
      border: 1px solid var(--line);
      box-shadow: 0 10px 24px rgba(26, 22, 19, .18);
      margin: 0 0 20px;
    }

    .placeholder-flag {
      display: inline-block;
      margin-left: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #8f1620;
      background: #f5e0df;
      padding: 2px 8px;
      border-radius: 999px;
      vertical-align: middle;
    }

    /* ===== CTAボタン ===== */
    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 22px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 14px;
      text-decoration: none;
      border: 2px solid transparent;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .cta:active {
      transform: scale(.97);
      transition: transform 140ms ease-out;
    }

    .cta.primary {
      background: var(--red);
      color: #fff;
    }

    .cta.primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(200, 32, 44, .45);
    }

    .cta.secondary {
      border-color: var(--paper);
      color: var(--paper);
    }

    .cta.secondary:hover {
      background: var(--paper);
      color: var(--ink);
      transform: translateY(-2px);
    }

    .cta.ghost {
      border-color: var(--red);
      color: var(--red);
      background: transparent;
    }

    .cta.ghost:hover {
      background: var(--red);
      color: #fff;
      transform: translateY(-2px);
    }

    /* ===== ヒーロー ===== */
    .oh-hero {
      background: var(--ink);
      color: var(--paper);
      position: relative;
      overflow: hidden;
    }

    .oh-hero-inner {
      max-width: 1600px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
    }

    .oh-hero-copy {
      flex: 1 1 380px;
      padding: 88px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .oh-hero-photo {
      flex: 1 1 380px;
      min-height: 420px;
      position: relative;
      border-left: 6px solid var(--red);
      overflow: hidden;
    }

    .oh-hero-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 70% 30%;
      display: block;
      filter: contrast(1.05);
    }

    .oh-hero h1 {
      font-size: clamp(26px, 3.4vw, 38px);
      font-weight: 900;
      line-height: 1.4;
      margin: 0 0 18px;
    }

    .oh-hero .sub {
      font-size: 15px;
      line-height: 1.9;
      color: #d8cdb9;
      margin: 0 0 32px;
      max-width: 34em;
    }

    .oh-hero .assurance {
      margin: 28px 0 0;
      font-size: 12px;
      color: #a99;
      line-height: 1.8;
    }

    /* ===== 悩みへの共感 ===== */
    .pain-list {
      max-width: 720px;
      margin: 0 auto;
      list-style: none;
      padding: 0;
    }

    .pain-list li {
      position: relative;
      padding: 14px 0 14px 30px;
      font-size: 15px;
      line-height: 1.8;
      border-top: 1px solid var(--line);
    }

    .pain-list li:first-child {
      border-top: none;
    }

    .pain-list li::before {
      content: "・";
      position: absolute;
      left: 0;
      color: var(--red);
      font-weight: 900;
    }

    .pain-list li.answer {
      font-weight: 700;
      color: var(--ink);
      border-top: 2px solid var(--red);
      margin-top: 6px;
      padding-top: 20px;
    }

    .pain-list li.answer::before {
      content: "→";
    }

    /* ===== 理由(4つ) ===== */
    .reason-list {
      display: flex;
      flex-direction: column;
    }

    .reason-row {
      display: flex;
      align-items: flex-start;
      gap: 28px;
      padding: 30px 0;
      border-top: 1px solid var(--line);
    }

    .reason-row:first-child {
      border-top: none;
      padding-top: 8px;
    }

    .reason-num {
      flex: none;
      width: 76px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 52px;
      font-weight: 900;
      line-height: 1;
      color: var(--red);
    }

    .reason-body {
      flex: 1;
      padding-top: 6px;
    }

    .reason-title {
      margin: 0 0 12px;
    }

    .reason-title span {
      display: inline-block;
      background: var(--ink);
      color: #fff;
      font-weight: 900;
      font-size: 18px;
      padding: 7px 16px;
      border-radius: 2px;
    }

    .reason-text {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
      color: #4a4032;
      max-width: 680px;
    }

    /* ===== カード共通 ===== */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
    }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 22px;
      font-size: 14px;
      line-height: 1.8;
    }

    .card h3 {
      margin: 0 0 10px;
      font-size: 16px;
      font-weight: 900;
    }

    .card p {
      margin: 0;
      color: #4a4032;
    }

    .card.cond-must {
      border-top: 4px solid var(--red);
    }

    .card.cond-want {
      border-top: 4px solid #c9a24a;
    }

    .card.cond-none {
      border-top: 4px solid #9a9284;
    }

    /* ===== 流れ(STEP) ===== */
    .flow-list {
      display: flex;
      flex-direction: column;
    }

    .flow-row {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 22px 0;
      border-top: 1px solid var(--line);
    }

    .flow-row:first-child {
      border-top: none;
    }

    .flow-step-num {
      flex: none;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--red);
      font-weight: 900;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.2;
    }

    .flow-body h3 {
      margin: 0 0 6px;
      font-size: 16px;
      font-weight: 900;
    }

    .flow-body p {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
      color: #4a4032;
    }

    /* ===== 料金の仕組み ===== */
    .price-table {
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }

    .price-row {
      display: grid;
      grid-template-columns: 200px 1fr;
      border-top: 1px solid var(--line);
    }

    .price-row:first-child {
      border-top: none;
    }

    .price-row dt {
      margin: 0;
      padding: 16px 18px;
      background: #8f8b81;
      color: #fff;
      font-weight: 700;
      font-size: 13px;
    }

    .price-row dd {
      margin: 0;
      padding: 16px 18px;
      font-size: 14px;
      line-height: 1.8;
    }

    .price-row dd.pending {
      color: #a99;
    }

    .price-note-box {
      margin-top: 20px;
      background: #fff;
      border: 2px dashed var(--red);
      border-radius: 10px;
      padding: 20px 24px;
      font-size: 13px;
      line-height: 1.9;
      color: #4a4032;
    }

    /* ===== 成約事例(プレースホルダー) ===== */
    .case-card {
      background: #fff;
      border: 1px dashed #9a9284;
      border-radius: 10px;
      padding: 26px;
    }

    .case-card dl {
      margin: 14px 0 0;
      font-size: 13px;
      line-height: 2;
    }

    .case-card dt {
      display: inline-block;
      width: 110px;
      color: #8f8b81;
      font-weight: 700;
    }

    .case-card dd {
      display: inline;
      margin: 0;
    }

    /* ===== FAQ ===== */
    .faq-item {
      border-top: 1px solid var(--line);
      padding: 20px 0;
    }

    .faq-item:first-child {
      border-top: none;
    }

    .faq-q {
      margin: 0 0 10px;
      font-weight: 900;
      font-size: 15px;
      display: flex;
      gap: 10px;
    }

    .faq-q span {
      color: var(--red);
      flex: none;
    }

    .faq-a {
      margin: 0;
      font-size: 14px;
      line-height: 1.9;
      color: #4a4032;
      display: flex;
      gap: 10px;
    }

    .faq-a span {
      color: #a99;
      flex: none;
      font-weight: 900;
    }

    /* ===== フッターCTA ===== */
    .diagonal-divider {
      height: 90px;
      background: var(--ink);
      clip-path: polygon(0 100%, 100% 0%, 100% 100%);
      margin-bottom: -1px;
    }

    .footer-cta {
      background: var(--ink);
      color: var(--paper);
      text-align: center;
      padding: 64px 24px;
      position: relative;
      overflow: hidden;
    }

    .footer-cta * {
      position: relative;
      z-index: 1;
    }

    .footer-cta img.footer-watermark {
      position: absolute !important;
      top: 50%;
      left: 0;
      right: 0;
      width: 100%;
      max-width: none;
      transform: translateY(-50%);
      filter: invert(1);
      opacity: .2;
      pointer-events: none;
      z-index: 0;
    }

    .footer-cta h2 {
      font-size: 24px;
      margin: 0 0 8px;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }

    .footer-cta p {
      color: #c9bfae;
      margin: 0 0 24px;
      font-size: 14px;
    }

    .contact-info {
      font-size: 13px;
      color: #a99;
      margin-top: 40px;
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation: none !important;
        transition: none !important;
      }

      .reveal-up {
        opacity: 1;
        transform: none;
      }
    }