:root{
    --orange:#FA6601;          /* primary */
    --orange-light:#ED8B2E;    /* accent / arrows / active nav */
    --green:#6BA03C;
    --green-dark:#4F7C2E;
    --ink:#26384D;             /* section headings (navy) */
    --ink-hero:#2D2318;        /* page hero heading */
    --body:#5A544D;
    --muted:#8C857B;
    --cream1:#FFFDF8;
    --cream2:#FBF6EE;
    --cream3:#FEF9F1;
    --line:#ECE1D2;
    --gutter:clamp(10px,2.5vw,32px);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;scrollbar-gutter:stable;scroll-padding-top:clamp(68px,7vw,100px);}
  body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
       -webkit-font-smoothing:antialiased;color:var(--body);background:#fff;line-height:1.6;overflow-x:hidden;}
  img{max-width:100%;height:auto;}
  a{text-decoration:none;color:inherit;}
  .container{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--gutter);}

  /* ---------- placeholder / image box ---------- */
  .ph{position:relative;overflow:hidden;border-radius:14px;display:flex;align-items:center;justify-content:center;}
  .ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
  .ph.contain>img{object-fit:contain;}
  .ph.plain{background:transparent;border:none;}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;
       font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s;}
  .btn:hover{opacity:.9;}
  .btn-primary{background:var(--orange);color:#fff;}
  .btn-outline{background:#fff;border:2px solid var(--orange);color:var(--orange);}
  .arrow{font-size:16px;line-height:1;}

  /* ---------- eyebrow / heading ---------- */
  .eyebrow{display:flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(15px,calc(var(--fvw,1vw)*1.5),18px);}
  .eyebrow svg{width:26px;height:26px;flex:none;}
  .sec-head{color:var(--ink);font-weight:900;line-height:1.45;letter-spacing:.5px;}

  /* ====================== HEADER ====================== */
  /* 追従ヘッダー：最上部では背景透明、スクロールすると白背景になる（is-scrolled をJSで付与） */
  .site-header{position:fixed;top:0;left:0;width:100%;z-index:40;background:transparent;
               transition:background-color .3s ease,box-shadow .3s ease;}
  .site-header.is-scrolled{background:#fff;box-shadow:0 4px 16px rgba(38,56,77,.08);}
  /* SPでメニューを開いている間も白背景（ドロワーと地続きに見せる） */
  .site-header:has(#nav.open){background:#fff;}
  /* 最上部でもナビのリンク／ボタンに0.5秒カーソルを置いたら白背景（JSで is-hovered を付与）。
     一度白くなったらヘッダー領域からカーソルが出るまで維持する */
  .site-header.is-hovered{background:#fff;box-shadow:0 4px 16px rgba(38,56,77,.08);}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
                height:clamp(68px,7vw,100px);}
  .logo{display:block;height:clamp(40px,4vw,56px);}
  /* SP: ガターが 9px まで詰まりロゴが画面端に寄りすぎるため、少し左余白を足す */
  @media(max-width:640px){ .logo{margin-left:8px;} }
  .logo img{height:100%;width:auto;max-width:none;object-fit:contain;display:block;}
  .nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);}
  .nav-links{display:flex;align-items:center;gap:clamp(10px,1.3vw,24px);}
  .nav-links a{font-weight:500;font-size:14px;color:#48433d;white-space:nowrap;position:relative;padding-bottom:4px;}
  .nav-links a:hover{color:var(--orange);}
  .nav-links a.active{color:var(--orange-light);}
  .nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--orange-light);border-radius:2px;}
  .nav-cta{height:52px;padding:0 22px;font-size:14px;}
  .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
              border:none;background:transparent;cursor:pointer;padding:0;}
  .nav-toggle span{display:block;width:26px;height:2.5px;background:#3a352f;border-radius:2px;transition:transform .25s,opacity .25s;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  /* ====================== PAGE HERO (下層ページ共通) ====================== */
  /* クリーム〜オレンジのグラデーション。下端は楕円で大きくカーブする。 */
  .page-hero{position:relative;overflow:hidden;padding-bottom:clamp(40px,6vw,90px);}
  .page-hero::before{content:"";position:absolute;left:50%;top:-46%;transform:translateX(-50%);
                     width:150%;height:150%;border-radius:50%;z-index:0;
                     background:radial-gradient(120% 90% at 78% 28%,#FCD9B4 0%,#FDE7CF 32%,#FEF3E6 58%,#FFFDFA 82%);}
  .page-hero .container{position:relative;z-index:1;}
  .page-hero-inner{padding-top:clamp(120px,13vw,178px);}
  .breadcrumb{color:#8C806B;font-weight:700;font-size:clamp(14px,calc(var(--fvw,1vw)*1.2),18px);margin-bottom:clamp(40px,6vw,74px);}
  .breadcrumb a:hover{color:var(--orange);}
  .page-eyebrow{color:#E67E22;font-weight:700;font-size:clamp(15px,calc(var(--fvw,1vw)*1.4),20px);letter-spacing:.14em;margin-bottom:14px;}
  .page-title{color:var(--ink-hero);font-weight:900;font-size:clamp(34px,calc(var(--fvw,1vw)*5),64px);line-height:1.2;letter-spacing:.02em;}
  .page-lead{color:var(--body);font-size:clamp(14px,calc(var(--fvw,1vw)*1.2),17px);line-height:2;margin-top:clamp(18px,2vw,26px);max-width:760px;}

  /* ---------- ヒーローとコンテンツの境目の波（Figma: Group 188.svg） ----------
     元データは 1920×243。preserveAspectRatio="none" で横幅に追従させる。
     一番手前のベタ塗り部分は currentColor なので、.hero-divider の color を
     直下のコンテンツ背景色に合わせて各ページで指定する。 */
  .hero-divider{position:absolute;left:0;bottom:-1px;width:100%;
                height:12.66vw;min-height:46px;max-height:243px;
                z-index:3;display:block;pointer-events:none;color:#FEFDFC;}

  /* ====================== generic section ====================== */
  .band{width:100%;}
  .bg-cream1{background:var(--cream1);}
  .bg-cream2{background:var(--cream2);}
  .bg-cream3{background:var(--cream3);}
  .sec{padding-block:clamp(48px,7vw,84px);}
  .sec-eyebrow{color:var(--orange);font-weight:700;font-size:clamp(14px,calc(var(--fvw,1vw)*1.3),17px);letter-spacing:.12em;margin-bottom:12px;}
  .sec h2{color:var(--ink);font-weight:900;font-size:clamp(24px,calc(var(--fvw,1vw)*3.2),40px);line-height:1.45;}
  .sec .sec-lead{color:var(--body);font-size:clamp(14px,calc(var(--fvw,1vw)*1.1),16px);line-height:2;margin-top:16px;}

  /* ===== CTA BANNER ===== */
  .ctaband{padding:0;}
  .cta-wrap{width:100%;background:linear-gradient(116deg,#FF8B00 34.5%,#FF7F00 87.8%);}
  .cta-inner{max-width:1504px;margin:0 auto;display:flex;align-items:center;gap:clamp(16px,2.4vw,46px);position:relative;
             padding:clamp(35px,5vw,51px) var(--gutter);flex-wrap:wrap;}
  .cta-illust{width:clamp(200px,15.6vw,300px);height:auto;aspect-ratio:1;flex:none;border-radius:18px;background:transparent;border-color:rgba(255,255,255,.55);margin-right:clamp(0px,.6vw,12px);}
  /* 見出しは Figma どおり必ず2行に保つ。1行分の幅（12文字 × 見出しの font-size = 3.4fvw）を
     最低幅として確保し、収まらない画面幅では flex-wrap でボタンを次の行へ送る。 */
  .cta-body{flex:1 1 0%;min-width:min(100%,clamp(240px,calc(var(--fvw,1vw)*36.6),562px));color:#fff;}
  .cta-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--orange);font-weight:900;
             font-size:16px;border-radius:999px;padding:9px 22px;margin-bottom:16px;}
  .cta-badge svg{width:20px;height:20px;}
  .cta-body h2{font-weight:900;font-size:clamp(26px,calc(var(--fvw,1vw)*3),46px);line-height:1.35;color:#fff;}
  .cta-body p{font-size:clamp(15px,calc(var(--fvw,1vw)*1.3),17px);line-height:1.9;margin-top:16px;color:#fff;}
  /* 本文の改行はブラウザの折り返しに任せる（widthに対して中途半端な位置で切れるのを防ぐ） */
  .cta-body p br{display:none;}
  /* margin-inline:auto は「ボタンが次の行に折り返されたとき」だけ効く（同じ行では
     .cta-body が flex-grow で余白を吸うため無効）＝改行時のみ中央寄せになる。 */
  .cta-btn{flex:none;background:#fff;color:var(--ink);font-weight:900;font-size:clamp(18px,calc(var(--fvw,1vw)*1.8),22px);border-radius:999px;
           padding:22px 36px;display:flex;align-items:center;gap:18px;box-shadow:0 10px 24px rgba(0,0,0,.12);
           margin-inline:auto;}
  .cta-btn .clip{width:34px;height:34px;color:var(--orange);flex:none;}
  .cta-btn .chev{color:#C9BFAE;font-size:22px;}

  /* ===== FOOTER ===== */
  .footer{position:relative;width:100%;background:#fdf9f9;}
  .footer-bg{position:relative;width:100%;aspect-ratio:1920/237;z-index:0;display:block;}
  .footer-inner{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:clamp(56px,8vw,108px) var(--gutter) clamp(40px,5vw,64px);display:flex;gap:clamp(30px,5vw,60px);flex-wrap:wrap;}
  .footer-brand{flex:1 1 360px;max-width:520px;}
  .footer-logo{width:300px;max-width:80%;height:64px;margin-bottom:24px;}
  .footer-brand .tag{color:var(--orange);font-weight:900;font-size:clamp(20px,calc(var(--fvw,1vw)*2.2),24px);margin-bottom:18px;}
  .footer-brand .lead{color:var(--body);font-size:15px;line-height:1.9;margin-bottom:26px;}
  .footer-brand .btn{background:var(--orange);color:#fff;height:74px;padding:0 40px;font-size:18px;border-radius:999px;}
  .footer-brand .btn .clip{width:30px;height:30px;}
  .footer-col{flex:1 1 180px;min-width:160px;}
  .footer-col h4{color:var(--ink);font-weight:900;font-size:18px;letter-spacing:1px;border-bottom:2px solid var(--orange);
                 padding-bottom:8px;display:inline-block;margin-bottom:14px;}
  .footer-col ul{list-style:none;}
  .footer-col li{padding:11px 0;border-bottom:1px solid #EAE6DF;color:var(--body);font-size:15px;}
  .footer-col li:hover{color:var(--orange);}
  .footer-bottom{position:relative;z-index:2;background:#e0b79b;}
  .footer-bottom .inner{max-width:1400px;margin:0 auto;min-height:64px;display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);
                        color:var(--body);font-size:14px;padding:14px var(--gutter);flex-wrap:wrap;}
  .footer-bottom .sep{color:#D8D2C8;}
  .footer-bottom .inner a:hover{color:var(--orange);text-decoration:underline;}

  /* ====================== RESPONSIVE ====================== */
  @media(max-width:1180px){
    .nav-toggle{display:flex;}
    .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
         background:#fff;padding:0 24px;box-shadow:0 18px 30px rgba(0,0,0,.12);
         max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .28s ease,opacity .2s,padding .28s;}
    .nav.open{max-height:640px;opacity:1;pointer-events:auto;padding:8px 24px 20px;}
    .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%;}
    .nav-links a{padding:15px 4px;border-bottom:1px solid #efe9df;font-size:15px;}
    .nav-links a.active::after{display:none;}
    .nav-cta{width:100%;height:54px;margin-top:16px;}
  }
  @media(max-width:880px){
    .cta-inner{flex-direction:column;text-align:center;align-items:center;}
    .cta-body{min-width:0;}
    .cta-illust{width:min(300px,80vw);margin-right:0;}
    .cta-illust{width:min(300px,80vw);margin-right:0;}
  }
  @media(max-width:640px){
    body{--gutter:9px;}
    /* SPでもラベルを必ず1行に保つ。画面幅に応じて文字・アイコン・余白を詰める。 */
    .cta-btn{width:100%;justify-content:center;white-space:nowrap;
             font-size:clamp(13px,4.1vw,17px);
             gap:clamp(8px,2.5vw,12px);
             padding:18px clamp(12px,4vw,22px);}
    .cta-btn .clip{width:clamp(22px,7vw,28px);height:auto;}
    .cta-btn .chev{font-size:clamp(16px,5vw,20px);}
    .footer-brand .btn{width:100%;justify-content:center;}
    .page-hero::before{top:-20%;height:120%;}
  }

  /* ===== CONTACT PAGE ===== */
  /* 幅 1920px のデザインを基準に、1920px 時に実寸が一致する vw 値 + clamp() で可変。 */

  /* --- 共通の内側カラム（デザイン上のコンテンツ幅 1252px） --- */
  .narrow{width:100%;max-width:1252px;margin-inline:auto;}

  /* --- ページヒーロー（写真背景。サイズ・文字位置は company.html と同じ指定に揃える） --- */
  .page-hero{background:#FEFCFB;padding-bottom:clamp(34px,4.6vw,88px);}
  .page-hero::before{display:none;}          /* テンプレートの楕円グラデーションを無効化 */
  .page-hero .hero-divider{color:#fff;}   /* 直下 .tabs-band の背景色に合わせる */
  .hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden;
              clip-path:polygon(0 0,100% 0,100% 87%,89% 100%,0 100%);}
  .hero-photo img{position:absolute;top:0;right:0;height:100%;width:64%;object-fit:cover;object-position:center bottom;display:block;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 14%,rgba(0,0,0,.55) 26%,#000 42%);
            mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 14%,rgba(0,0,0,.55) 26%,#000 42%);}
  .hero-photo::after{content:"";position:absolute;inset:0;
    background:linear-gradient(94deg,rgba(254,252,251,.9) 0%,rgba(254,252,251,.55) 30%,rgba(254,252,251,0) 50%);}
  .page-hero-inner{padding-top:clamp(112px,10.2vw,150px);position:relative;z-index:3;}
  .page-hero .breadcrumb{margin-bottom:clamp(46px,6.5vw,96px);}
  .page-hero .page-eyebrow{letter-spacing:.16em;margin-bottom:16px;}
  .page-title{font-size:clamp(34px,calc(var(--fvw,1vw)*4.6),66px);letter-spacing:.01em;}
  .page-lead{font-size:clamp(14px,calc(var(--fvw,1vw)*1.42),20px);line-height:1.75;
             margin-top:clamp(20px,2.4vw,34px);max-width:none;}

  /* --- ページ内タブ（よくある質問／お問い合わせ） ---
     選択中のタブと、その下に伸びるオレンジのラインを地続きに見せる「見出しタブ」形式。
     タブバーの寸法はパネルの scroll-margin-top と共有しており、
     contact.html#contact のようなハッシュ付きリンクで着地したときも
     追従ヘッダーの直下にタブバーが見える位置で止まる。 */
  body{--tab-pad:clamp(24px,2.6vw,50px);--tab-h:clamp(44px,3.44vw,66px);}
  #faq,#contact{scroll-margin-top:calc(var(--tab-pad) + var(--tab-h) + 3px);}
  .tabs-band{background:#fff;padding-top:var(--tab-pad);}
  .tabs{
    position:relative;
    display:flex;align-items:flex-end;justify-content:center;
    gap:clamp(4px,.31vw,6px);
    padding-bottom:3px;              /* 旧 border-bottom:3px 分の高さを維持 */
  }
  /* タブ下のラインは両端を背景（白）へフェードさせ、線の始点・終点を目立たせない */
  .tabs::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:linear-gradient(90deg,
      rgba(250,102,1,0) 0%,
      rgba(250,102,1,1) 14%,
      rgba(250,102,1,1) 86%,
      rgba(250,102,1,0) 100%);
  }
  .tab{
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-family:inherit;font-weight:700;
    background:#FBF4EB;color:var(--muted);
    border:1px solid var(--line);border-bottom:none;
    border-radius:clamp(8px,.63vw,12px) clamp(8px,.63vw,12px) 0 0;
    height:var(--tab-h);padding:0 clamp(18px,2.29vw,44px);
    font-size:clamp(14px,calc(var(--fvw,1vw)*.94),18px);
    letter-spacing:.02em;white-space:nowrap;
    transition:background-color .22s,color .22s,border-color .22s;
  }
  .tab:hover{background:#FFF3E7;color:var(--orange);}
  .tab[aria-selected="true"]{
    background:linear-gradient(180deg,#F3710A 0%,#F05E02 100%);
    color:#fff;border-color:var(--orange);
  }
  .tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;}

  /* --- FAQ セクション --- */
  .faq-sec{background:#fff;padding-top:clamp(40px,4.3vw,82px);padding-bottom:clamp(56px,6.7vw,129px);}
  .faq-cat{
    display:flex;align-items:center;
    color:#EA5B00;font-weight:900;letter-spacing:.02em;
    font-size:clamp(19px,calc(var(--fvw,1vw)*1.36),26px);
    margin-bottom:clamp(12px,1.2vw,23px);
  }
  .faq-cat::before{
    content:"";flex:none;
    width:clamp(4px,.31vw,6px);height:clamp(24px,1.88vw,36px);
    background:var(--orange);border-radius:1px;
    margin-right:clamp(14px,1.15vw,22px);
  }
  .faq-group + .faq-group{margin-top:clamp(30px,2.55vw,49px);}
  .faq-item{
    background:#fff;border:1px solid #EFE4D7;
    border-radius:clamp(8px,.63vw,12px);
    margin-bottom:clamp(7px,.68vw,13px);
    overflow:hidden;
  }
  .faq-item:last-child{margin-bottom:0;}
  .faq-item > summary{
    list-style:none;cursor:pointer;position:relative;
    display:flex;align-items:center;
    min-height:clamp(50px,4.4vw,84px);
    padding:clamp(12px,1.1vw,17px) clamp(44px,3.8vw,74px) clamp(12px,1.1vw,17px) clamp(16px,1.7vw,32px);
    color:var(--ink);font-weight:700;line-height:1.55;
    font-size:clamp(14px,calc(var(--fvw,1vw)*1.02),19px);
    transition:background .2s;
  }
  .faq-item > summary::-webkit-details-marker{display:none;}
  .faq-item > summary:hover{background:#FFFAF4;}
  .faq-item > summary:focus-visible{outline:2px solid var(--orange);outline-offset:-3px;}
  .faq-icon{
    position:absolute;top:50%;right:clamp(16px,1.8vw,35px);transform:translateY(-50%);
    width:clamp(13px,.94vw,18px);height:clamp(13px,.94vw,18px);flex:none;
  }
  .faq-icon::before,.faq-icon::after{
    content:"";position:absolute;top:50%;left:0;
    width:100%;height:clamp(2px,.13vw,2.5px);margin-top:calc(clamp(2px,.13vw,2.5px) / -2);
    background:var(--orange);border-radius:2px;transition:transform .25s ease;
  }
  .faq-icon::after{transform:rotate(90deg);}
  .faq-item[open] .faq-icon::after{transform:rotate(0deg);}
  .faq-a{
    padding:0 clamp(16px,1.7vw,32px) clamp(18px,1.6vw,30px);
    color:var(--body);line-height:2;
    font-size:15px;
    border-top:1px solid #F5EDE3;padding-top:clamp(16px,1.4vw,26px);
  }
  .faq-a > p + p{margin-top:clamp(10px,.83vw,16px);}
  .faq-a .faq-note{
    color:var(--muted);
    font-size:clamp(13px,calc(var(--fvw,1vw)*.94),18px);
    line-height:1.9;
  }

  /* --- お問い合わせセクション --- */
  .contact-sec{background:#FCF8F3;padding-top:clamp(48px,4.85vw,93px);padding-bottom:clamp(48px,4.2vw,80px);}
  .contact-head{text-align:center;}
  .faq-sec .contact-head{margin-bottom:clamp(30px,3.4vw,66px);}
  .contact-eyebrow{
    color:var(--orange);font-weight:700;letter-spacing:.18em;
    font-size:clamp(13px,calc(var(--fvw,1vw)*.94),18px);
  }
  .contact-head h2{
    color:var(--ink);font-weight:700;line-height:1.25;
    font-size:clamp(28px,calc(var(--fvw,1vw)*3.02),58px);
    margin-top:clamp(12px,1.25vw,24px);
  }
  .contact-div{
    display:flex;align-items:center;justify-content:center;
    gap:clamp(4px,.42vw,8px);margin-top:clamp(14px,1.4vw,27px);
  }
  .contact-div i{
    display:block;background:var(--orange);border-radius:50%;
    width:clamp(4px,.36vw,7px);height:clamp(4px,.36vw,7px);
  }
  .contact-div b{
    display:block;background:var(--orange);border-radius:999px;
    width:clamp(28px,2.7vw,52px);height:clamp(3px,.31vw,6px);
  }
  .contact-lead{
    color:var(--body);font-size:clamp(15px,calc(var(--fvw,1vw)*1.35),26px);line-height:1.8;
    margin-top:clamp(14px,1.4vw,27px);
  }

  /* --- フォームカード ---
     部品はデザイン（1920px 基準）の 2/3 スケール。
     ただし文字サイズの下限は可読性を優先し、入力欄は iOS の自動ズームを避けて 16px を保つ。 */
  .cform{
    width:100%;max-width:812px;margin:clamp(20px,2.13vw,41px) auto 0;
    background:#fff;border-radius:clamp(10px,.83vw,16px);
    box-shadow:0 10px 28px rgba(120,90,60,.07);
    padding:clamp(20px,2.13vw,41px) clamp(16px,2.29vw,44px) clamp(22px,2.53vw,49px);
  }
  .field + .field{margin-top:clamp(16px,1.87vw,36px);}
  .field > label{
    display:flex;align-items:center;flex-wrap:wrap;gap:clamp(6px,.52vw,10px);
    color:var(--ink);font-weight:700;line-height:1.4;
    font-size:clamp(14px,calc(var(--fvw,1vw)*.9),17px);
  }
  .req,.opt{
    display:inline-flex;align-items:center;justify-content:center;
    height:clamp(20px,1.39vw,27px);padding:0 clamp(7px,.63vw,12px);
    border-radius:clamp(4px,.28vw,5px);
    font-size:clamp(11px,calc(var(--fvw,1vw)*.63),12px);font-weight:700;line-height:1;letter-spacing:.02em;
  }
  .req{background:#EE5F0B;color:#fff;}
  .opt{background:#E5DDD2;color:#64605B;}
  .field input,.field select,.field textarea{
    display:block;width:100%;font-family:inherit;color:var(--ink);
    background:#fff;border:1px solid #EFE9E4;
    border-radius:clamp(5px,.35vw,7px);
    font-size:clamp(16px,calc(var(--fvw,1vw)*.9),17px);
    margin-top:clamp(8px,1vw,19px);
    transition:border-color .2s,box-shadow .2s;
  }
  .field input,.field select{
    height:clamp(42px,3.4vw,65px);
    padding:0 clamp(12px,1.6vw,31px);
  }
  .field textarea{
    height:clamp(110px,7.87vw,151px);
    padding:clamp(11px,1.07vw,20px) clamp(12px,1.6vw,31px);
    line-height:1.8;resize:vertical;
  }
  .field input::placeholder,.field textarea::placeholder{color:#B7B4B1;}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(250,102,1,.12);
  }
  .field select{
    appearance:none;-webkit-appearance:none;color:#8E8B87;cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%238C857B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l8 8 8-8'/></svg>");
    background-repeat:no-repeat;
    background-position:right clamp(12px,.77vw,15px) center;
    background-size:clamp(10px,.6vw,11px) auto;
    padding-right:clamp(28px,2.13vw,41px);
  }
  .field select.filled{color:var(--ink);}
  .field .hint{
    color:#A19D9B;line-height:1.6;
    font-size:clamp(11px,calc(var(--fvw,1vw)*.77),15px);
    margin-top:clamp(6px,.67vw,13px);
  }
  /* .field input の共通指定が type="hidden" にも当たって枠が出てしまうため打ち消す */
  .cform input[type="hidden"]{display:none;}
  /* input を持たない項目（ラジオ群・カレンダー）は fieldset + legend で組む。
     legend は .field > label と同じ見た目に揃える。 */
  .field-fs{border:none;min-width:0;}
  .field-fs > legend{
    display:flex;align-items:center;flex-wrap:wrap;gap:clamp(6px,.52vw,10px);
    color:var(--ink);font-weight:700;line-height:1.4;
    font-size:clamp(14px,calc(var(--fvw,1vw)*.9),17px);
  }
  .field-fs > legend .sub{
    color:var(--muted);font-weight:500;
    font-size:clamp(11px,calc(var(--fvw,1vw)*.69),13px);
  }
  .field-error{
    display:none;color:#D6482A;font-weight:700;line-height:1.6;
    font-size:clamp(11px,calc(var(--fvw,1vw)*.69),13px);
    margin-top:clamp(6px,.55vw,11px);
  }
  .field-error.show{display:block;}

  /* --- お問い合わせ種別（ラジオカード） --- */
  .radio-row{
    display:flex;flex-wrap:wrap;
    gap:clamp(8px,.7vw,13px);
    margin-top:clamp(8px,1vw,19px);
  }
  .radio-opt{
    flex:1 1 clamp(190px,13.3vw,253px);position:relative;
    display:flex;align-items:center;gap:clamp(8px,.55vw,11px);cursor:pointer;
    background:#fff;border:2px solid #EFE9E4;
    border-radius:clamp(6px,.49vw,9px);
    padding:clamp(11px,1vw,19px) clamp(12px,1.07vw,20px);
    color:var(--body);font-weight:700;line-height:1.5;
    font-size:clamp(14px,calc(var(--fvw,1vw)*.83),16px);
    transition:border-color .2s,background-color .2s,color .2s;
  }
  .radio-opt input{position:absolute;width:1px;height:1px;opacity:0;}
  .radio-dot{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:clamp(17px,.97vw,19px);height:clamp(17px,.97vw,19px);
    border:2px solid #DED7CE;border-radius:50%;background:#fff;
    transition:border-color .2s;
  }
  .radio-dot::after{
    content:"";width:52%;height:52%;border-radius:50%;background:var(--orange);
    transform:scale(0);transition:transform .18s ease;
  }
  .radio-opt:hover{border-color:#F5C79A;}
  .radio-opt:has(input:checked){border-color:var(--orange);background:#FFF6EE;color:var(--ink);}
  .radio-opt:has(input:checked) .radio-dot{border-color:var(--orange);}
  .radio-opt:has(input:checked) .radio-dot::after{transform:scale(1);}
  .radio-opt:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:3px;}

  /* --- 「無料農場分析」選択時のみ表示する追加項目 --- */
  .field-extra{
    margin-top:clamp(16px,1.87vw,36px);
    background:#FFF8EF;border:2px dashed #F3B876;
    border-radius:clamp(8px,.7vw,13px);
    padding:clamp(15px,1.47vw,28px) clamp(13px,1.4vw,27px) clamp(16px,1.6vw,31px);
  }
  .field-extra + .field{margin-top:clamp(16px,1.87vw,36px);}
  /* cf7.css の `.cform p{margin:0}` に打ち消されないよう `.cform` を付けて詳細度を上げる */
  .field-extra-label,
  .cform .field-extra-label{
    display:flex;align-items:center;gap:clamp(6px,.42vw,8px);
    color:#D2660A;font-weight:900;letter-spacing:.04em;line-height:1.5;
    font-size:clamp(11px,calc(var(--fvw,1vw)*.69),13px);
    margin-bottom:clamp(16px,1.6vw,30px);
  }
  .field-extra-label svg{width:clamp(15px,.9vw,17px);height:auto;flex:none;}

  /* --- 訪問希望日カレンダー --- */
  .cal{
    width:100%;max-width:clamp(260px,20vw,384px);
    background:#fff;border:1px solid #EFE9E4;
    border-radius:clamp(8px,.55vw,11px);
    padding:clamp(10px,.83vw,16px);
    margin-top:clamp(8px,.83vw,16px);
  }
  .cal-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;margin-bottom:clamp(6px,.55vw,11px);
  }
  .cal-nav{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:clamp(28px,1.6vw,31px);height:clamp(28px,1.6vw,31px);
    border:1px solid var(--line);border-radius:50%;background:#fff;
    color:var(--orange);cursor:pointer;font-family:inherit;line-height:1;
    font-size:clamp(14px,calc(var(--fvw,1vw)*.83),16px);
    transition:background-color .2s,border-color .2s,opacity .2s;
  }
  .cal-nav:hover:not(:disabled){background:#FFF3E7;border-color:#F5C79A;}
  .cal-nav:disabled{opacity:.3;cursor:default;}
  .cal-nav:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
  .cal-title{
    color:var(--ink);font-weight:900;letter-spacing:.02em;
    font-size:clamp(13px,calc(var(--fvw,1vw)*.83),16px);
  }
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(2px,.14vw,3px);}
  .cal-dow{
    text-align:center;color:var(--muted);font-weight:700;line-height:2.4;
    font-size:clamp(10px,calc(var(--fvw,1vw)*.55),11px);
  }
  .cal-day{
    position:relative;display:flex;align-items:center;justify-content:center;
    aspect-ratio:1/1;border:none;background:transparent;cursor:pointer;
    border-radius:clamp(5px,.35vw,7px);font-family:inherit;font-weight:700;
    color:var(--ink);font-size:clamp(11px,calc(var(--fvw,1vw)*.63),12px);
    transition:background-color .18s,color .18s;
  }
  .cal-dow.sun,.cal-day.sun{color:#DC5B4B;}
  .cal-dow.sat,.cal-day.sat{color:#4E7FB5;}
  .cal-day.empty{visibility:hidden;pointer-events:none;}
  .cal-day:hover:not(:disabled):not(.is-sel){background:#FFF3E7;}
  .cal-day:disabled{color:#D6D2CC;cursor:default;}
  .cal-day.is-today{box-shadow:inset 0 0 0 2px #F5C79A;}
  .cal-day.is-sel,.cal-day.is-sel.sun,.cal-day.is-sel.sat{background:var(--orange);color:#fff;}
  .cal-day:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
  .cal-day .rank{
    position:absolute;top:-2px;right:-2px;
    display:flex;align-items:center;justify-content:center;
    width:clamp(13px,.77vw,15px);height:clamp(13px,.77vw,15px);
    border-radius:50%;background:var(--ink);color:#fff;
    font-size:clamp(9px,calc(var(--fvw,1vw)*.45),9px);font-weight:900;line-height:1;
  }
  .cal-legend{
    display:flex;align-items:center;gap:clamp(5px,.28vw,6px);
    color:var(--muted);line-height:1.6;
    font-size:clamp(10px,calc(var(--fvw,1vw)*.55),11px);
    margin-top:clamp(8px,.7vw,13px);padding-top:clamp(8px,.7vw,13px);
    border-top:1px dashed var(--line);
  }
  .cal-legend .dot{
    flex:none;border-radius:50%;background:var(--orange);
    width:clamp(8px,.42vw,8px);height:clamp(8px,.42vw,8px);
  }
  .cal-picked{display:flex;flex-wrap:wrap;gap:clamp(5px,.35vw,7px);margin-top:clamp(9px,.83vw,16px);}
  .cal-picked:empty{display:none;}
  .cal-chip{
    display:inline-flex;align-items:center;gap:clamp(6px,.42vw,8px);
    background:#FFF3E7;border:1px solid #F5C79A;border-radius:999px;
    color:#C55A05;font-weight:700;line-height:1;
    font-size:clamp(11px,calc(var(--fvw,1vw)*.63),12px);
    padding:clamp(6px,.45vw,9px) clamp(8px,.55vw,11px) clamp(6px,.45vw,9px) clamp(9px,.7vw,13px);
  }
  .cal-chip b{color:var(--ink);}
  .cal-chip button{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:clamp(15px,.83vw,16px);height:clamp(15px,.83vw,16px);
    border:none;border-radius:50%;background:#F1CCA9;color:#8A4A05;
    cursor:pointer;font-family:inherit;line-height:1;
    font-size:clamp(10px,calc(var(--fvw,1vw)*.52),10px);
    transition:background-color .2s;
  }
  .cal-chip button:hover{background:#E8B384;}
  .cal-chip button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

  .cform-submit{
    display:flex;align-items:center;justify-content:center;
    gap:clamp(9px,1.07vw,21px);
    width:100%;max-width:629px;
    margin:clamp(20px,1.93vw,37px) auto 0;
    height:clamp(48px,3.43vw,66px);
    border:none;border-radius:999px;cursor:pointer;
    background:linear-gradient(90deg,#F05E02 0%,#F3710A 100%);
    color:#fff;font-family:inherit;font-weight:700;letter-spacing:.05em;
    font-size:clamp(15px,calc(var(--fvw,1vw)*1),19px);
    box-shadow:0 7px 16px rgba(240,94,2,.22);
    transition:opacity .2s,transform .2s;
  }
  .cform-submit:hover{opacity:.92;}
  .cform-submit:active{transform:translateY(1px);}
  .cform-submit .circ{
    display:flex;align-items:center;justify-content:center;flex:none;
    width:clamp(19px,1.25vw,24px);height:clamp(19px,1.25vw,24px);
    border-radius:50%;background:#fff;color:#F0620A;
    font-size:clamp(11px,calc(var(--fvw,1vw)*.69),13px);line-height:1;padding-left:2px;
  }
  /* 送信ボタンとの間隔。cf7.css の `.cform p{margin:0}` に打ち消されないよう詳細度を上げる */
  .cform-note,
  .cform .cform-note{
    text-align:center;color:#858383;line-height:1.7;
    font-size:clamp(11px,calc(var(--fvw,1vw)*.77),15px);
    margin-top:clamp(16px,1.6vw,30px);
  }

  /* --- 電話問い合わせボックス（フォームカードと同じ 2/3 スケール・同じ幅に揃える） --- */
  .tel-box{
    width:100%;max-width:812px;
    margin:clamp(20px,1.84vw,35px) auto 0;
    background:#FEF4EA;border-radius:clamp(10px,.83vw,16px);
    padding:clamp(20px,2.2vw,43px) clamp(14px,1.33vw,27px) clamp(24px,2.87vw,55px);
    text-align:center;
  }
  .tel-title{
    color:#2F2C29;font-weight:700;line-height:1.5;
    font-size:clamp(14px,calc(var(--fvw,1vw)*.9),17px);
  }
  .tel-num{
    display:inline-flex;align-items:center;
    gap:clamp(6px,.77vw,15px);
    color:#F15A00;font-weight:700;letter-spacing:.01em;line-height:1;
    font-size:clamp(24px,calc(var(--fvw,1vw)*2.07),40px);
    margin-top:clamp(13px,1.33vw,25px);
  }
  .tel-num img{
    width:clamp(20px,1.7vw,33px);height:auto;flex:none;display:block;
  }
  .tel-hours{
    display:inline-block;
    background:#F7EADD;color:#8A8378;border-radius:999px;
    font-size:clamp(11px,calc(var(--fvw,1vw)*.77),15px);line-height:1;
    padding:clamp(6px,.55vw,11px) clamp(12px,1.32vw,25px);
    margin-top:clamp(12px,1.33vw,25px);
  }

  /* --- CONTACT PAGE レスポンシブ --- */
  @media(max-width:820px){
    .hero-photo img{width:88%;}
    .hero-photo::after{background:linear-gradient(180deg,rgba(254,252,251,.72) 0%,rgba(254,252,251,.68) 62%,rgba(254,252,251,.25) 100%),
                                  linear-gradient(96deg,rgba(254,252,251,.92) 0%,rgba(254,252,251,.6) 30%,rgba(254,252,251,.1) 62%);}
  }
  @media(max-width:640px){
    .hero-photo{clip-path:polygon(0 0,100% 0,100% 92%,82% 100%,0 100%);}
    .faq-item > summary{padding-right:44px;}
    .faq-icon{right:16px;}
    /* 見出しが長く2行になるため、SPでは少しだけ文字を詰める（640px時は28pxのまま＝段差なし） */
    .contact-sec .contact-head h2{font-size:clamp(23px,6.6vw,28px);}
    .cform{border-radius:10px;padding:16px 14px 18px;}
    .field + .field{margin-top:16px;}
    .field > label{gap:6px;}
    .cform-submit{max-width:100%;}
    .tel-box{padding:20px 12px 22px;}
    .tel-num{flex-wrap:nowrap;}
    /* タブは 2 等分して画面幅に収める */
    .tab{flex:1;min-width:0;padding:0 8px;font-size:13px;}
    /* 追加項目ブロックは余白を詰め、カレンダーは全幅に */
    .field-extra{padding:14px 11px 15px;}
    .field-extra + .field{margin-top:16px;}
    .cal{max-width:100%;padding:8px;}
  }

/* FAQ内 比較テーブル（Web経営診断 vs 無料農場分析） */
.faq-table{width:100%;max-width:640px;margin-top:14px;border-collapse:collapse;font-size:14px;line-height:1.7;}
.faq-table th,.faq-table td{border:1px solid #EADFCC;padding:10px 14px;text-align:left;vertical-align:top;}
.faq-table thead th{background:#FBF3E6;font-weight:700;color:#3c3428;}
.faq-table tbody th{background:#FFFBF4;font-weight:700;white-space:nowrap;color:#3c3428;}
.faq-table td{background:#fff;color:#5a5142;}
@media(max-width:640px){.faq-table{font-size:13px;}.faq-table th,.faq-table td{padding:8px 10px;}}
.faq-table-btn{width:100%;min-height:42px;padding:8px 12px;font-size:13px;white-space:normal;text-align:center;line-height:1.5;}
@media(max-width:640px){.faq-table-btn{font-size:12px;padding:7px 8px;min-height:38px;}}

/* ==== 共通: 中途半端な改行の防止（1〜2文字だけの行送りをなくす） ====
   非対応ブラウザでは無視され従来表示のまま（プログレッシブエンハンスメント） */
h1,h2,h3,h4,h5,h6{
  text-wrap:balance;        /* 行を均等に折り返し、末尾に数文字だけ残さない */
  word-break:auto-phrase;   /* 文節単位で改行（Chrome系） */
}
p,li,dt,dd,figcaption,blockquote,summary{
  text-wrap:pretty;         /* 最終行が極端に短くならないよう調整 */
}
button,.cta-btn,.nav-cta{text-wrap:balance;}

/* --- tablet (641〜980px): フッターに左右の余白を追加（全ページ共通・2026-08-27） --- */
@media(min-width:641px) and (max-width:980px){
  .footer-inner{padding-inline:calc(var(--gutter) + 24px);}
}