@charset "utf-8";
/* ============================================================
   かけつけ屋総本舗 — オリジナルテーマ
   STUDIO版のデザインを再現（実測ベース: PC 1440 / SP 390）
   ============================================================ */

:root{
  --org-a:#ff8400;
  --org-b:#ff4c00;
  --org-grad:linear-gradient(90deg,#ff8400 0%,#ff4c00 100%);
  --ink:#1a1a1a;
  --text:#222;
  --sub:#57585d;
  --line:#e5e5e5;
  --bg-soft:#f6f6f6;
  --footer:#17111f;
  --card:#2d2d2d;
  --font:'Poppins','Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
  --font-lato:'Lato','Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
  --container:1120px;
  --header-h:83px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px;}
body{margin:0;font-family:var(--font);color:var(--text);background:#fff;line-height:1.7;
     font-feature-settings:"palt";-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;vertical-align:bottom;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
.container{width:min(100% - 40px,var(--container));margin-inline:auto;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* 見出し共通 -------------------------------------------------- */
.sec-head{margin-bottom:44px;}
.sec-head__en{font-size:64px;font-weight:600;line-height:1.1;letter-spacing:.01em;color:var(--ink);}
.sec-head__ja{margin-top:6px;font-size:16px;font-weight:400;color:var(--ink);}

/* ボタン ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:14px;padding:19px 34px;border-radius:999px;
     background:var(--org-grad);color:#fff;font-weight:600;font-size:24px;line-height:1;
     box-shadow:0 6px 18px rgba(255,88,0,.28);transition:transform .2s ease,box-shadow .2s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,88,0,.34);}
.btn .arw{width:20px;height:20px;flex:none;}
.btn--sm{font-size:14px;padding:13px 22px;gap:10px;box-shadow:none;}
.btn--sm .arw{width:16px;height:16px;}
.btn--dark{background:#1c1c1c;box-shadow:none;font-size:18px;padding:20px 40px;}
.btn--dark:hover{background:#000;}

/* ヘッダー ---------------------------------------------------- */
.header{position:sticky;top:0;z-index:100;background:#000;}
.header__inner{display:flex;align-items:center;justify-content:space-between;
               height:var(--header-h);padding:0 80px;}
.header__brand{display:flex;align-items:center;gap:20px;color:#fff;}
.header__brand img{width:62px;height:62px;object-fit:contain;}
.header__brand span{font-size:24px;font-weight:800;letter-spacing:.02em;}
.gnav{display:flex;align-items:center;gap:0;background:#fff;border-radius:12px;padding:10px 10px 10px 26px;}
.gnav__list{display:flex;align-items:center;gap:22px;}
.gnav__list a{display:block;text-align:center;padding:4px 6px;}
.gnav__en{display:block;font-size:16px;font-weight:600;color:#1a1a1a;line-height:1.3;}
.gnav__ja{display:block;font-size:10px;font-weight:400;color:var(--sub);}
.gnav__cta{margin-left:26px;}
.hamburger{display:none;width:44px;height:44px;color:#fff;align-items:center;justify-content:center;}
.hamburger span{display:block;width:24px;height:2px;background:#fff;position:relative;}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:#fff;transition:.25s;}
.hamburger span::before{top:-8px;}
.hamburger span::after{top:8px;}
.is-open .hamburger span{background:transparent;}
.is-open .hamburger span::before{top:0;transform:rotate(45deg);}
.is-open .hamburger span::after{top:0;transform:rotate(-45deg);}
.drawer{display:none;}

/* ヒーロー ---------------------------------------------------- */
.hero{position:relative;min-height:1060px;display:flex;align-items:center;
      background:#d9d4cd url(../img/hero-bg.webp) center/cover no-repeat;}
.hero__inner{width:min(100% - 40px,var(--container));margin-inline:auto;padding-block:112px 60px;}
.hero__title{font-size:58px;font-weight:700;line-height:1.4;letter-spacing:.01em;color:var(--ink);}
.hero__title em{display:block;font-style:normal;background:var(--org-grad);
                -webkit-background-clip:text;background-clip:text;color:transparent;}
.hero__pt{margin-top:2px;font-size:38px;font-weight:700;line-height:1.4;
          background:var(--org-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero__lead{margin-top:24px;font-size:18px;font-weight:600;line-height:1.75;color:var(--ink);
            background:rgba(255,255,255,.62);display:table;padding:6px 10px;}
.hero__cta{margin-top:38px;}
.hero__pay{position:absolute;right:80px;bottom:6px;width:293px;}

/* お知らせバー ------------------------------------------------ */
.ticker{background:var(--org-grad);color:#fff;text-align:center;
        font-size:18px;font-weight:700;padding:14px 20px;line-height:1.6;}

/* Concept ----------------------------------------------------- */
.concept{padding:104px 0 70px;}
.concept__inner{display:flex;gap:60px;align-items:flex-start;}
.concept__body{flex:1;min-width:0;}
.concept__label{font-size:12px;color:#666;letter-spacing:.04em;}
.concept__title{margin-top:6px;font-size:50px;font-weight:700;line-height:1.42;color:#222;}
.concept__text{margin-top:34px;max-width:712px;font-size:15px;line-height:2;color:#222;}
.concept__fig{flex:none;width:265px;}
.concept__fig img{width:100%;border-radius:14px;}

/* 危険喚起（1枚画像） ----------------------------------------- */
.danger{padding-bottom:53px;}
.danger img{display:block;width:min(100% - 40px,1020px);margin-inline:auto;}

/* Service ----------------------------------------------------- */
.service{padding:56px 0 96px;}
.service__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 20px;align-items:start;}
.service__group--full{grid-column:1 / -1;}
.service__cat{background:var(--org-b);color:#fafafa;font-size:15px;font-weight:700;
              padding:15px 24px;line-height:1.4;}
.service__list li{display:flex;gap:10px;align-items:flex-start;padding:17px 24px;
                  font-size:15px;line-height:1.6;color:#222;background:#fff;border-bottom:1px solid #eee;}
.service__list li:nth-child(odd){background:#fafafa;}
.service__list .ico{flex:none;width:24px;height:24px;color:var(--org-b);margin-top:-1px;}

/* User Voice -------------------------------------------------- */
.voice{padding:90px 0 96px;background:#f7f7f7;}
.voice__head{display:flex;justify-content:space-between;align-items:flex-start;}
.voice__nav{display:flex;gap:16px;padding-top:36px;}
.voice__nav button{width:56px;height:56px;border-radius:50%;background:#d9d9d9;color:#fff;
                   display:grid;place-items:center;transition:.2s;}
.voice__nav button:last-child{background:var(--org-grad);}
.voice__nav button:hover{opacity:.85;}
.voice__nav svg{width:28px;height:28px;}
.voice__viewport{overflow:hidden;}
.voice__track{display:flex;gap:60px;transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.voice__card{flex:0 0 520px;background:var(--card);color:#fff;border-radius:14px;padding:30px;
             min-height:500px;display:flex;flex-direction:column;}
.voice__quote{width:40px;height:40px;color:var(--org-b);}
.voice__title{margin-top:6px;font-size:24px;font-weight:700;line-height:1.5;}
.voice__text{margin-top:22px;font-size:20px;line-height:1.8;flex:1;}
.voice__meta{display:flex;align-items:center;gap:14px;font-size:15px;}
.voice__meta img{width:60px;height:60px;border-radius:50%;object-fit:cover;}

/* FAQ --------------------------------------------------------- */
.faq{padding:100px 0 110px;background:#f7f7f7;}
.faq__inner{display:flex;gap:66px;align-items:flex-start;}
.faq__head{flex:none;width:320px;}
.faq__list{flex:1;min-width:0;}
.faq__item{border-bottom:1px solid #ddd;}
.faq__q{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:22px 0;}
.faq__mark{font-size:24px;font-weight:700;line-height:1.2;background:var(--org-grad);
           -webkit-background-clip:text;background-clip:text;color:transparent;flex:none;}
.faq__qtext{flex:1;font-size:18px;font-weight:700;color:#353537;line-height:1.5;}
.faq__toggle{flex:none;width:20px;height:20px;color:#2a2a2a;position:relative;margin-top:4px;}
.faq__toggle::before,.faq__toggle::after{content:"";position:absolute;left:2px;top:9px;width:16px;height:2px;background:currentColor;transition:.25s;}
.faq__toggle::after{transform:rotate(90deg);}
.faq__item.is-open .faq__toggle::after{transform:rotate(0);}
.faq__a{display:none;gap:14px;padding:0 0 24px;}
.faq__item.is-open .faq__a{display:flex;}
.faq__amark{font-size:24px;font-weight:700;color:var(--sub);flex:none;line-height:1.2;}
.faq__atext{flex:1;font-size:16px;font-weight:500;color:var(--sub);line-height:1.8;}

/* 会社概要 ---------------------------------------------------- */
.company{padding:24px 0 96px;}
.company__box{background:var(--bg-soft);border-radius:20px;padding:52px 40px 44px;}
.company__label{display:flex;align-items:center;gap:14px;font-family:var(--font-lato);
                font-size:24px;font-weight:700;color:#000;}
.company__label::before{content:"";width:6px;height:26px;background:var(--org-b);}
.company__title{margin:6px 0 30px 20px;font-family:var(--font-lato);font-size:38px;font-weight:700;color:#000;}
.company__table{width:100%;}
.company__table div{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);
                    font-family:var(--font-lato);font-size:16px;color:#111;line-height:1.7;}
.company__table div:last-child{border-bottom:0;}
.company__table dt{flex:none;width:140px;}
.company__table dd{flex:1;margin:0;}

/* Contact ----------------------------------------------------- */
.contact{background:var(--org-grad);background-image:url(../img/contact-bg.jpg);
         background-size:cover;background-position:center;padding:96px 0 104px;color:#fff;}
.contact__inner{display:flex;gap:60px;align-items:flex-start;}
.contact__lead{flex:none;width:340px;}
.contact__title{font-size:64px;font-weight:600;line-height:1.1;}
.contact__sub{margin-top:8px;font-size:16px;}
.contact__copy{margin-top:44px;font-size:36px;font-weight:600;line-height:1.5;}
.contact__hr{margin:26px 0;border:0;border-top:1px solid rgba(255,255,255,.6);}
.contact__telLabel{font-size:26px;font-weight:600;}
.contact__tel{display:inline-block;margin-top:6px;font-size:32px;font-weight:600;letter-spacing:.02em;}
.contact__points{margin-top:26px;display:grid;gap:14px;}
.contact__points li{display:flex;align-items:center;gap:12px;font-size:20px;}
.contact__points .ico{width:16px;height:16px;flex:none;}
.contact__form{flex:1;min-width:0;background:#fff;border-radius:20px;padding:40px;color:#2a2a2a;}

/* フォーム（自前マークアップ / Snow Monkey Forms 共通） -------- */
.f-row{margin-bottom:26px;}
.f-label{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:#2a2a2a;margin-bottom:12px;}
.f-req{background:var(--org-b);color:#fff;font-size:12px;font-weight:500;border-radius:999px;padding:3px 10px;line-height:1.4;}
.f-req--gray{background:#3d3d3d;}
.f-radio{display:flex;flex-direction:column;gap:12px;}
.f-radio label{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;cursor:pointer;}
.f-radio input{width:19px;height:19px;accent-color:var(--org-b);}
.contact__form input[type=text],.contact__form input[type=email],.contact__form input[type=tel],
.contact__form textarea,.smf-form input[type=text],.smf-form input[type=email],
.smf-form input[type=tel],.smf-form textarea{
  width:100%;border:1px solid #d5d5d5;border-radius:8px;padding:16px;font-size:16px;
  font-family:var(--font);color:#2a2a2a;background:#fff;}
.contact__form textarea{resize:vertical;}
.contact__form ::placeholder{color:#b6b6b6;}
.contact__form input:focus,.contact__form textarea:focus{outline:2px solid var(--org-a);outline-offset:1px;border-color:transparent;}
.f-agree{margin-top:34px;text-align:center;font-size:14px;font-weight:500;color:#353537;}
.f-agree a{color:#0371ff;text-decoration:underline;}
.f-agree__check{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:15px;font-weight:500;}
.f-agree__check input{width:20px;height:20px;accent-color:var(--org-b);}
.f-submit{margin-top:26px;text-align:center;}

/* フッター ---------------------------------------------------- */
.footer{background:var(--footer);color:#fff;padding:56px 0 30px;}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;}
.footer__brand{display:flex;align-items:center;gap:16px;}
.footer__brand img{width:60px;height:60px;object-fit:contain;}
.footer__brand span{font-size:28px;font-weight:800;}
.footer__right{text-align:right;}
.footer__nav{display:flex;gap:30px;font-size:15px;justify-content:flex-end;}
.footer__nav a:hover{opacity:.7;}
.footer__pay{margin-top:18px;width:288px;}
.footer__hr{margin:26px 0 14px;border:0;border-top:1px solid rgba(255,255,255,.18);}
.footer__copy{text-align:right;font-size:12px;color:rgba(255,255,255,.85);}

/* 下層ページ -------------------------------------------------- */
.page-head{padding:150px 0 40px;}
.page-head__en{font-size:56px;font-weight:600;color:var(--ink);line-height:1.1;}
.page-head__ja{margin-top:6px;font-size:16px;color:var(--sub);}
.page-body{padding-bottom:110px;font-size:15px;line-height:2;color:#333;}
.page-body h2{margin:44px 0 14px;font-size:20px;font-weight:700;color:#1a1a1a;}
.page-body h3{margin:30px 0 10px;font-size:17px;font-weight:700;}
.page-body p{margin-bottom:16px;}
.page-body ul{margin:0 0 16px;padding-left:1.2em;list-style:disc;}
.page-body li{margin-bottom:6px;}
.page-body a{color:#0371ff;text-decoration:underline;}
.page-note{margin-top:40px;font-size:14px;color:var(--sub);}
.thanks{padding:170px 0 140px;text-align:center;}
.thanks__title{font-size:34px;font-weight:700;line-height:1.5;}
.thanks__text{margin-top:22px;font-size:15px;line-height:2;color:#444;}
.thanks__btn{margin-top:40px;}
.nf{padding:170px 0 140px;text-align:center;}
.nf__code{font-size:88px;font-weight:700;background:var(--org-grad);
          -webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;}
.nf__title{margin-top:14px;font-size:26px;font-weight:700;}
.nf__text{margin-top:18px;font-size:15px;color:#444;}
.nf__btn{margin-top:36px;}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width:1180px){
  .gnav{padding-left:18px;}
  .gnav__list{gap:22px;}
  .hero__pay{right:30px;}
}
@media screen and (max-width:1080px){
  :root{--header-h:72px;}
  .header__inner{padding:0 20px 0 24px;}
  .header__brand img{width:46px;height:46px;}
  .header__brand{gap:12px;}
  .header__brand span{font-size:20px;}
  .gnav,.gnav__cta{display:none;}
  .hamburger{display:flex;}
  .drawer{display:block;position:fixed;inset:var(--header-h) 0 auto;background:#000;color:#fff;
          transform:translateY(-120%);transition:transform .3s ease;z-index:99;padding:10px 24px 30px;}
  .is-open .drawer{transform:translateY(0);}
  .drawer__list li{border-bottom:1px solid rgba(255,255,255,.15);}
  .drawer__list a{display:block;padding:18px 4px;}
  .drawer__en{font-size:17px;font-weight:600;}
  .drawer__ja{font-size:11px;color:#bdbdbd;}
  .drawer__cta{margin-top:22px;display:block;text-align:center;}
  .drawer__cta .btn{width:100%;justify-content:center;font-size:18px;}
  .hero{min-height:760px;}
  .hero__title{font-size:44px;}
  .hero__pt{font-size:28px;}
  .sec-head__en,.contact__title{font-size:52px;}
  .concept__title{font-size:38px;}
  .voice__card{flex-basis:440px;min-height:460px;}
  .contact__inner{flex-direction:column;}
  .contact__lead{width:100%;}
  .contact__form{width:100%;}
  .faq__inner{flex-direction:column;gap:24px;}
  .faq__head{width:100%;}
}
@media screen and (max-width:840px){
  .service__grid{grid-template-columns:1fr;}
  .concept__fig{display:none;}
  .concept__text{max-width:none;}
  .voice__track{gap:24px;}
  .voice__card{flex-basis:min(86vw,420px);padding:26px;min-height:0;}
  .voice__title{font-size:20px;}
  .voice__text{font-size:16px;}
  .footer__top{flex-direction:column;align-items:flex-start;}
  .footer__right{text-align:left;}
  .footer__nav{justify-content:flex-start;flex-wrap:wrap;gap:18px;}
  .footer__copy{text-align:left;}
  .company__table div{flex-direction:column;gap:4px;padding:16px 0;}
  .company__table dt{width:auto;padding-left:0;font-weight:700;}
}
@media screen and (max-width:600px){
  .container{width:calc(100% - 40px);}
  .hero{display:block;min-height:0;padding:46px 0 0;background-position:center top;}
  .hero__inner{padding-block:0 0;}
  .hero__title{font-size:34px;line-height:1.35;}
  .hero__pt{font-size:20px;line-height:1.45;}
  .hero__lead{font-size:15px;margin-top:18px;}
  .hero__cta{margin-top:26px;}
  .hero__cta .btn{font-size:19px;padding:16px 26px;}
  .hero__pay{position:relative;z-index:2;display:block;width:262px;margin:34px auto 0;padding-bottom:18px;}
  .ticker{font-size:17px;text-align:left;padding:18px 20px;}
  .sec-head__en,.contact__title{font-size:40px;}
  .sec-head{margin-bottom:28px;}
  .concept{padding:64px 0 56px;}
  .concept__title{font-size:29px;line-height:1.45;}
  .concept__text{margin-top:24px;font-size:14px;}
  .danger{padding-bottom:56px;}
  .danger img{width:calc(100% - 40px);}
  .service{padding:40px 0 56px;}
  .service__list li{font-size:14px;padding:14px 16px;}
  .service__cat{padding:13px 16px;font-size:14px;}
  .voice,.faq{padding:40px 0 56px;}
  .voice__nav{padding-top:8px;gap:12px;}
  .voice__nav button{width:44px;height:44px;}
  .voice__nav svg{width:22px;height:22px;}
  .faq__qtext{font-size:16px;}
  .company{padding:8px 0 56px;}
  .company__box{padding:32px 20px;border-radius:14px;}
  .company__title{font-size:28px;margin-left:0;}
  .contact{padding:56px 0 64px;}
  .contact__copy{font-size:27px;}
  .contact__tel{font-size:29px;}
  .contact__points li{font-size:17px;}
  .contact__form{padding:24px 18px;border-radius:14px;}
  .footer{padding:40px 0 26px;}
  .footer__brand span{font-size:22px;}
  .footer__pay{width:230px;}
  .page-head{padding:110px 0 26px;}
  .page-head__en{font-size:38px;}
  .thanks,.nf{padding:120px 0 90px;}
}

/* ============================================================
   Snow Monkey Forms の見た目を STUDIO 版に合わせる
   ============================================================ */
.contact__form .smf-form{display:block;}
.contact__form .smf-item{display:block;margin-bottom:26px;}
.contact__form .smf-item__col--label{margin-bottom:12px;}
.contact__form .smf-item__label__text{font-size:15px;font-weight:700;color:#2a2a2a;line-height:1.6;}
.contact__form .kk-req{display:inline-block;margin-left:10px;background:var(--org-b);color:#fff;
                       font-size:12px;font-weight:500;font-style:normal;border-radius:999px;padding:3px 10px;line-height:1.4;
                       vertical-align:2px;}
.contact__form .kk-req--gray{background:#3d3d3d;}
.contact__form .smf-item__description{margin-top:6px;font-size:13px;color:#6b6b6b;}

.contact__form .smf-radio-buttons-control__control,
.contact__form .smf-checkboxes-control__control{display:flex;flex-direction:column;gap:12px;}
.contact__form .smf-radio-button-control,
.contact__form .smf-checkbox-control{display:flex;align-items:center;gap:12px;cursor:pointer;}
.contact__form .smf-radio-button-control__control,
.contact__form .smf-checkbox-control__control{width:19px;height:19px;accent-color:var(--org-b);margin:0;}
.contact__form .smf-radio-button-control__label,
.contact__form .smf-checkbox-control__label{font-size:16px;font-weight:500;color:#2a2a2a;}

.contact__form .smf-text-control__control,
.contact__form .smf-textarea-control__control,
.contact__form .smf-select-control__control{
  width:100%;border:1px solid #d5d5d5;border-radius:8px;padding:16px;font-size:16px;
  font-family:var(--font);color:#2a2a2a;background:#fff;}
.contact__form .smf-textarea-control__control{resize:vertical;}
.contact__form .smf-text-control__control::placeholder,
.contact__form .smf-textarea-control__control::placeholder{color:#b6b6b6;}
.contact__form .smf-text-control__control:focus,
.contact__form .smf-textarea-control__control:focus{outline:2px solid var(--org-a);outline-offset:1px;border-color:transparent;}

/* プライバシーポリシー同意（中央寄せ） */
.contact__form .smf-item.kk-agree{margin-top:34px;text-align:center;}
.contact__form .kk-agree .smf-item__col--label{margin-bottom:14px;}
.contact__form .kk-agree .smf-item__label__text{font-size:14px;font-weight:500;color:#353537;}
.contact__form .kk-agree .smf-item__label__text a{color:#0371ff;text-decoration:underline;}
.contact__form .kk-agree .smf-checkboxes-control__control{align-items:center;}
.contact__form .kk-agree .smf-checkbox-control__label{font-size:15px;}

/* 送信ボタン */
.contact__form .smf-action{margin-top:26px;text-align:center;}
.contact__form .smf-button-control__control{
  display:inline-flex;align-items:center;gap:14px;background:#1c1c1c;color:#fff;border:0;cursor:pointer;
  font-family:var(--font);font-size:18px;font-weight:600;line-height:1;padding:20px 40px;border-radius:999px;
  transition:background .2s ease;}
.contact__form .smf-button-control__control:hover{background:#000;}
.contact__form .smf-button-control__control::after{content:"";width:20px;height:20px;flex:none;
  background:url(../img/arrow.svg) center/contain no-repeat;}
.contact__form .smf-button-control__control[data-action="back"]{background:#8a8a8a;}
.contact__form .smf-button-control__control[data-action="back"]::after{display:none;}

/* エラー表示 */
.contact__form .smf-error-messages{margin-top:8px;color:#d40000;font-size:14px;font-weight:500;}
.contact__form .smf-form--input .smf-item.smf-item--error .smf-text-control__control,
.contact__form .smf-form--input .smf-item.smf-item--error .smf-textarea-control__control{border-color:#d40000;}

/* 完了画面 */
.contact__form .smf-complete-content{font-size:16px;line-height:2;text-align:center;padding:20px 0;}

@media screen and (max-width:600px){
  .contact__form .smf-button-control__control{font-size:17px;padding:18px 32px;}
}

/* SP：ヒーローは写真の上に白抜き文字。暗いスクリムを重ねて可読性を確保 */
@media screen and (max-width:840px){
  .hero{position:relative;}
  .hero::before{content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.56) 42%,rgba(0,0,0,.50) 100%);}
  .hero__inner{position:relative;z-index:1;padding-top:36px;}
  .hero__title{color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);}
  .hero__title em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;}
  .hero__pt{text-shadow:0 2px 10px rgba(0,0,0,.35);}
  .hero__lead{background:none;padding:0;display:block;color:#fff;
              text-shadow:0 1px 8px rgba(0,0,0,.45);}
}