@charset "utf-8";
/* ==========================================================================
   大福屋 — respons.css
   ※ WPテーマではテーマ/プラグイン側CSSと詳細度が競合するため、
     @media 内のプロパティには原則 !important を付与する（社内ルール）
   ========================================================================== */

/* ==========================================================
   〜1440px : FV（査定カードを細くして中央の写真を見せる）
   ========================================================== */
@media screen and (max-width:1440px){
  .fv{ padding:0 !important; }   /* 下の各幅の section{padding-block} を打ち消す */
  .fv__in{ padding-right:4% !important; gap:28px !important; }
  .fv__card{ flex-basis:340px !important; padding:44px 30px 34px !important; }
  .fv__card-ttl{ font-size:36px !important; }
}

/* ==========================================================
   〜1180px : ラップ幅の詰め
   ========================================================== */
@media screen and (max-width:1180px){
  :root{ --gut:20px !important; }
  .hd__nav{ gap:16px !important; font-size:13px !important; }
  .hd__logo b{ font-size:23px !important; }
  .hd__shop{ padding-inline:16px !important; }
}

/* ==========================================================
   〜1024px : タブレット
   ========================================================== */
@media screen and (max-width:1024px){
  section{ padding-block:66px !important; }
  section.tight{ padding-block:48px !important; }

  .hd__nav{ display:none !important; }
  .hd__burger{
    display:flex !important; flex-direction:column !important; justify-content:center !important;
    gap:6px !important; width:44px !important; height:44px !important; margin-left:auto !important;
    order:9 !important;
  }
  .hd__burger span{
    display:block !important; width:24px !important; height:2px !important;
    background:var(--ink) !important; margin-inline:auto !important; transition:transform .3s, opacity .3s !important;
  }
  .hd__burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg) !important; }
  .hd__burger.is-open span:nth-child(2){ opacity:0 !important; }
  .hd__burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) !important; }
  .hd__cta{ margin-left:auto !important; }
  .hd__cta .btn--line{ display:none !important; }
  /* backdrop-filter があると中の position:fixed（ドロワー）がヘッダーの高さに閉じ込められるため外す */
  .hd{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:#fff !important;
       border-top:3px solid var(--gold) !important; }
  .hd__burger em{ display:block !important; font-style:normal !important; font-size:9px !important; font-weight:700 !important;
                  letter-spacing:.12em !important; line-height:1 !important; color:var(--ink) !important; margin-top:1px !important; }
  .hd__burger{ height:48px !important; gap:5px !important; margin-left:10px !important; }
  .hd__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg) !important; }
  .hd__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) !important; }

  .drawer{
    display:block !important; position:fixed !important; inset:var(--head-h) 0 0 0 !important;
    background:#fff !important; z-index:99 !important; overflow-y:auto !important;
    padding:28px 20px 120px !important;
    transform:translateY(-12px) !important; opacity:0 !important; pointer-events:none !important;
    transition:opacity .28s ease, transform .28s ease !important;
  }
  .drawer.is-open{ opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  .drawer ul{ display:grid !important; gap:0 !important; }
  .drawer li{ border-bottom:1px solid var(--line-2) !important; }
  .drawer a{ display:flex !important; align-items:center !important; justify-content:space-between !important;
             padding:17px 4px !important; font-size:15.5px !important; font-weight:600 !important; }
  .drawer a::after{ content:"›" !important; color:var(--gold) !important; font-size:18px !important; }
  .drawer .drawer__cta{ display:grid !important; gap:12px !important; margin-top:26px !important; }
  .drawer .drawer__cta a{ justify-content:center !important; padding:12px 20px !important; font-size:16px !important; }
  .drawer .drawer__cta a::after{ content:none !important; }
  body.is-locked{ overflow:hidden !important; }

  /* FV：カードは見出しの下へ回し、写真は全面に */
  .fv__media{ left:0 !important; right:0 !important; }
  .fv__in{ flex-direction:column !important; align-items:flex-start !important; padding:56px var(--gut) 60px !important; }
  .fv__card{ flex:none !important; width:100% !important; max-width:520px !important; }

  .catnav{ margin-top:-32px !important; }
  .catnav__grid{ grid-template-columns:repeat(4,1fr) !important; }

  .reasons{ grid-template-columns:1fr !important; gap:38px !important; }
  .methods{ grid-template-columns:1fr !important; }
  .results{ grid-template-columns:repeat(3,1fr) !important; }
  .flow{ grid-template-columns:repeat(2,1fr) !important; gap:26px 22px !important; }
  .flow li:nth-child(2n)::after{ display:none !important; }
  .voices{ grid-template-columns:1fr !important; }
  .gallery{ grid-template-columns:repeat(4,1fr) !important; }
  .shoplinks,
  .shoplinks--4,
  .shoplinks--5{ grid-template-columns:repeat(2,1fr) !important; }

  .shop{ grid-template-columns:1fr !important; }
  .shop__map{ min-height:260px !important; order:2 !important; }
  .shop__map iframe{ min-height:260px !important; }
  .shop__b{ padding:28px 24px !important; }

  .sec-head h2{ font-size:27px !important; }
  .cta h2{ font-size:27px !important; }
  .phead h1{ font-size:30px !important; }
  .prose h2{ font-size:23px !important; }

  .ft__top{ grid-template-columns:1fr 1fr !important; gap:32px !important; }
  .ft__logo{ grid-column:1 / -1 !important; }
}

/* ==========================================================
   〜767px : スマートフォン
   ========================================================== */
@media screen and (max-width:767px){
  :root{ --head-h:62px !important; --gut:18px !important; }
  body{ font-size:15px !important; padding-bottom:74px !important; }

  section{ padding-block:52px !important; }
  section.tight{ padding-block:40px !important; }

  .hd__logo b{ font-size:21px !important; }
  .hd__logo{ display:grid !important; grid-template-columns:auto auto !important; justify-content:start !important;
             align-items:baseline !important; gap:0 6px !important; line-height:1.15 !important; }
  .hd__catch{ display:block !important; grid-column:1 / -1 !important; font-size:10px !important; font-weight:700 !important;
              letter-spacing:.06em !important; color:var(--gold-2) !important; margin-bottom:2px !important; }
  .hd__logo span{ display:inline !important; font-size:8.5px !important; letter-spacing:.16em !important; }
  .hd__shop{ min-height:38px !important; padding:4px 12px !important; font-size:12px !important; gap:4px !important;
             border-width:1.5px !important; }
  .hd__shop-l{ display:none !important; }
  .hd__shop-s{ display:inline !important; }
  .hd__pin{ display:inline-block !important; width:9px !important; height:9px !important; border:2px solid currentColor !important;
            border-radius:50% 50% 50% 0 !important; transform:rotate(-45deg) !important; margin:-2px 2px 0 0 !important; }
  .hd__cta .btn--sm{ min-height:38px !important; padding:4px 12px !important; font-size:12px !important; }

  /* Hero */
  /* FV：縦長（9:16）の写真を背景に、画像の中ほどに見出し・バッジを重ねる。査定カードは画像の下
     写真は上側 56vw を切って短くしている（img を元の高さ 177.78vw のまま上へ 56vw ずらす）。
     .fv__copy を短くして、査定カードを写真の下端にあえて重ねている（ユーザー指定 145.78vw） */
  .fv__media{ left:0 !important; right:0 !important; bottom:auto !important; height:calc(177.78vw - 56vw) !important; aspect-ratio:auto !important; overflow:hidden !important; }
  .fv__media img{ position:absolute !important; left:0 !important; top:-56vw !important; width:100% !important; height:177.78vw !important; }
  .fv__in{ min-height:0 !important; padding:calc(177.78vw * .40 - 56vw) var(--gut) 44px !important; gap:28px !important; }
  .fv__copy{ min-height:calc(145.78vw * .60 - 28px) !important; width:100% !important; }
  .fv__eyebrow{ font-size:11px !important; padding:5px 12px !important; letter-spacing:.08em !important; }
  .fv h1{ margin-top:10px !important; }
  .fv__line{ font-size:22px !important; margin-top:8px !important; padding:.08em .3em .1em !important; box-shadow:0 2px 10px rgba(26,26,26,.06) !important; }
  .fv__sub{ margin-top:18px !important; font-size:14px !important; line-height:1.95 !important; font-weight:500 !important; }
  .fv__sub span{ background:rgba(255,255,255,.92) !important; }
  .fv__badges{ gap:10px !important; margin-top:30px !important; justify-content:center !important; width:100% !important; }
  .fv__badge{ width:98px !important; height:98px !important; }
  .fv__badge svg{ inset:-14px !important; width:calc(100% + 28px) !important; height:calc(100% + 28px) !important; }
  .fv__badge text{ font-size:17px !important; }
  .fv__badge-in{ font-size:15.5px !important; }
  .fv__badge::before{ transform:translate(4px, 4px) !important; }
  .fv__card{ padding:34px 22px 26px !important; outline-offset:4px !important; max-width:none !important; }
  .fv__card-lead{ font-size:15px !important; }
  .fv__card-ttl{ font-size:32px !important; }
  .fv__card-sub{ font-size:14.5px !important; }
  .fv__btn{ min-height:54px !important; font-size:16px !important; }

  /* Buttons */
  .btn{ min-height:56px !important; font-size:15.5px !important; padding:12px 22px !important; }
  .btn-row{ display:grid !important; grid-template-columns:1fr !important; gap:11px !important; }
  .btn-row .btn{ width:100% !important; }

  /* Category nav */
  .catnav{ margin-top:-26px !important; }
  .catnav__grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .catnav__card .t{ padding:11px 6px 13px !important; }
  .catnav__card .t b{ font-size:14.5px !important; }

  /* Sections */
  .sec-head{ margin-bottom:30px !important; }
  .sec-head h2{ font-size:22px !important; }
  .sec-head p{ font-size:14px !important; margin-top:11px !important; }
  .ttl-en{ font-size:10.5px !important; letter-spacing:.22em !important; }

  .reason{ padding:38px 22px 26px !important; }
  .reason__no{ width:46px !important; height:46px !important; font-size:17px !important; top:-20px !important; left:22px !important; }
  .reason h3{ font-size:18px !important; }

  .results{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .result__b{ padding:11px 12px 14px !important; }
  .result__n{ font-size:13px !important; }
  .result__p{ font-size:17px !important; }

  .flow{ grid-template-columns:1fr !important; gap:12px !important; }
  .flow li{ display:grid !important; grid-template-columns:auto 1fr !important; gap:4px 16px !important;
            text-align:left !important; padding:20px !important; }
  .flow li::after{ display:none !important; }
  .flow__img{ grid-row:1 !important; grid-column:1 / -1 !important; margin:-20px -20px 12px !important; }
  .flow .s{ grid-row:2 / 4 !important; grid-column:1 !important; align-self:center !important;
            writing-mode:vertical-rl !important; letter-spacing:.14em !important; }
  .flow h3{ grid-row:2 !important; grid-column:2 !important; margin:0 0 6px !important; font-size:17px !important; }
  .flow p{ grid-row:3 !important; grid-column:2 !important; font-size:13.5px !important; }

  .method__h b{ font-size:20px !important; }
  .method__b{ padding:20px 20px 22px !important; }
  .method__f{ padding:0 20px 22px !important; }

  .cta{ padding-block:48px !important; }
  .cta__sup{ font-size:13px !important; }
  .cta h2{ font-size:22px !important; }
  .cta p{ font-size:14px !important; }
  .cta__tel a{ font-size:22px !important; }

  .tags{ gap:8px !important; }
  .tags li{ font-size:12.5px !important; padding:7px 14px !important; }

  .voice{ padding:24px 20px 22px !important; }
  .voice__img{ margin:-24px -20px 18px !important; }
  .voice h3{ font-size:17px !important; }

  .faq summary{ font-size:15px !important; padding:18px 36px 18px 0 !important; }
  .faq summary::after{ top:25px !important; }
  .faq .a{ font-size:14px !important; padding:0 36px 22px 0 !important; }

  .shop__b h3{ font-size:22px !important; }
  .shop__b h3 small{ font-size:12.5px !important; }
  .shop dl{ grid-template-columns:76px 1fr !important; font-size:14px !important; }
  .shop__btns .btn{ width:100% !important; }

  /* 下層 */
  .phead{ padding-block:44px 40px !important; }
  .phead h1{ font-size:24px !important; }
  .phead p{ font-size:14px !important; margin-top:12px !important; }
  .crumbs ol{ font-size:11px !important; }
  .prose h2{ font-size:20px !important; margin:38px 0 16px !important; padding-left:12px !important; }
  .prose h3{ font-size:17.5px !important; }
  .prose p{ font-size:14.5px !important; line-height:1.95 !important; }

  .brandgrid{ grid-template-columns:repeat(2,1fr) !important; }
  .brandgrid li{ font-size:13px !important; padding:12px 8px !important; }
  .pointcard{ padding:20px !important; }
  .pointcard h3{ font-size:17px !important; }
  .pointcard--img{ grid-template-columns:1fr !important; gap:14px !important; padding:14px 16px 20px !important; }
  .gallery{ grid-template-columns:repeat(3,1fr) !important; gap:7px !important; }
  .steplist li{ grid-template-columns:44px 1fr !important; gap:14px !important; padding:20px 0 !important; }
  .steplist li::before{ font-size:21px !important; }
  .steplist h3{ font-size:17px !important; }
  .steplist--img li{ grid-template-columns:44px 1fr !important; gap:12px 14px !important; align-items:start !important; }
  .steplist--img li::before{ grid-row:1 !important; grid-column:1 !important; align-self:start !important; }
  .steplist--img .step__img{ grid-row:1 !important; grid-column:2 !important; }
  .steplist--img li > div{ grid-row:2 !important; grid-column:2 !important; }
  .shoplinks,
  .shoplinks--4,
  .shoplinks--5{ grid-template-columns:1fr !important; gap:11px !important; }
  .shoplink{ padding:16px 18px !important; }
  .shoplink b{ font-size:16px !important; }

  .tbl th,.tbl td{ display:block !important; width:auto !important; }
  .tbl th{ border-bottom:0 !important; padding:12px 14px !important; font-size:13px !important; }
  .tbl td{ padding:12px 14px 18px !important; }

  /* Footer */
  .ft{ padding-top:44px !important; }
  .ft__top{ grid-template-columns:1fr !important; gap:28px !important; padding-bottom:32px !important; }
  .ft__bottom{ flex-direction:column !important; gap:10px !important; }

  /* 固定CTA */
  .fixcta{
    display:grid !important; position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important;
    z-index:120 !important; grid-template-columns:1fr 1fr !important; gap:1px !important;
    background:rgba(0,0,0,.12) !important; box-shadow:0 -4px 18px rgba(0,0,0,.14) !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
  }
  .fixcta a{
    display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
    height:66px !important; font-size:14.5px !important; font-weight:700 !important; letter-spacing:.02em !important;
  }
  .fixcta a small{ font-size:10px !important; font-weight:500 !important; opacity:.9 !important; letter-spacing:.06em !important; }
  .fixcta .t{ background:var(--yellow) !important; color:var(--ink) !important; }
  .fixcta .l{ background:var(--line-green) !important; color:#fff !important; }
}

/* ==========================================================
   〜380px : 小型端末
   ========================================================== */
@media screen and (max-width:380px){
  .fv__line{ font-size:19.5px !important; }
  .fv__badge{ width:90px !important; height:90px !important; }
  .fv__badge-in{ font-size:14.5px !important; }
  .sec-head h2{ font-size:20px !important; }
  .catnav__grid{ gap:8px !important; }
  .results{ gap:9px !important; }
  .fixcta a{ font-size:13.5px !important; }
}