/* 紹介LP専用。原則 .p-invitation 配下。フローティングのみ .follow_bnr_invitation */

/* サイトのリセット／html rem を外し、モックと同じブラウザ初期値から当てる。
   SVGは属性（fill/stroke/width）を残すため対象外。 */
.p-invitation,
.p-invitation *:not(:is(svg, svg *)),
.p-invitation *::before,
.p-invitation *::after {
  all: revert;
}

  .p-invitation{
    --accent-1:#FF0000;
    --accent-2:#EA5923;
    --accent-grad-h:linear-gradient(90deg,var(--accent-1),var(--accent-2));
    --accent-grad-v:linear-gradient(180deg,var(--accent-1),var(--accent-2));
    --ink:#000000;
    --ink-soft:#303C3C;
    --line:#CCCCCC;
    --muted:#B6B6B6;
    --surface:#FFFFFF;
    --surface-alt:#F6F6F4;
    --card-bg:#303C3C;
    --card-fg:#FFFFFF;
    --band-gray:#E5E5E2;
    --shadow:0 30px 60px -30px rgba(0,0,0,.28);
    color-scheme:light;
  }
  /* このページはDr.トレーニングのブランド配色比率（白60%が前提）を厳密に守る
     実ページ想定のため、閲覧環境のダーク/ライト設定に関わらず常にライト配色で固定する。 */

  .p-invitation *,.p-invitation *::before,.p-invitation *::after{box-sizing:border-box;}
  .p-invitation{
    margin:0;background:var(--surface);color:var(--ink);
    font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
    word-break:normal;overflow-wrap:normal;text-align:left;
    isolation:isolate;overflow-x:clip;
  }
  .p-invitation a{color:inherit;}
  .p-invitation img,.p-invitation svg{display:block;max-width:100%;}
  .p-invitation .en{font-family:"Helvetica Neue",Arial,sans-serif;}
  .p-invitation .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  @media (prefers-reduced-motion:no-preference){ .p-invitation{scroll-behavior:smooth;} }
  @media (max-width:560px){ .p-invitation .wrap{padding:0 20px;} }

  .p-invitation .mockup-bar{background:var(--card-bg);color:var(--card-fg);font-size:11px;letter-spacing:.04em;text-align:center;padding:7px 12px;}
  .p-invitation .mockup-bar b{color:var(--accent-2);font-weight:700;}

  /* ---- header ---- */
  .p-invitation .site-header{position:sticky;top:0;z-index:40;background:var(--surface);border-bottom:1px solid var(--line);}
  .p-invitation .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;max-width:1180px;}
  .p-invitation .logo{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1;}
  .p-invitation .logo .word{display:flex;align-items:baseline;gap:2px;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:22px;}
  .p-invitation .logo .word .dot{color:var(--accent-1);}
  .p-invitation .logo .tag{font-size:9px;letter-spacing:.14em;color:var(--ink-soft);margin-top:3px;font-family:"Helvetica Neue",Arial,sans-serif;}
  .p-invitation .nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:700;}
  .p-invitation .nav a{text-decoration:none;color:var(--ink);white-space:nowrap;}
  .p-invitation .nav a:hover{color:var(--accent-1);}
  .p-invitation .header-cta{flex:none;background:var(--accent-grad-h);color:#fff;font-weight:700;font-size:14px;padding:15px 24px;text-decoration:none;white-space:nowrap;}
  .p-invitation .burger{display:none;flex-direction:column;gap:4px;width:34px;height:34px;border:0;background:transparent;cursor:pointer;flex:none;}
  .p-invitation .burger span{display:block;width:22px;height:2px;background:var(--ink);margin:0 auto;}
  .p-invitation #menu-toggle{position:absolute;opacity:0;pointer-events:none;}
  .p-invitation .menu-overlay{
    position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.94);color:#fff;
    display:flex;flex-direction:column;padding:20px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  .p-invitation #menu-toggle:checked ~ .menu-overlay{opacity:1;visibility:visible;transform:translateY(0);}
  .p-invitation .menu-overlay-top{display:flex;justify-content:space-between;align-items:center;}
  .p-invitation .menu-close{background:transparent;border:0;color:#fff;font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer;letter-spacing:.05em;}
  .p-invitation .menu-nav{margin-top:34px;display:flex;flex-direction:column;}
  .p-invitation .menu-nav a{text-decoration:none;color:#fff;padding:16px 4px;border-top:1px solid #292929;font-size:16px;font-weight:700;}
  .p-invitation .menu-nav a:last-child{border-bottom:1px solid #292929;}
  .p-invitation .menu-cta{margin-top:28px;text-align:center;background:var(--accent-grad-h);color:#fff;font-weight:700;font-size:14px;padding:16px;text-decoration:none;}

  /* ---- hero ---- */
  /* コンテンツ幅(1180)超ではMV幅を止め中央揃え（左余白だけ広がって右寄りに見えるのを防ぐ） */
  .p-invitation .hero{position:relative;overflow:hidden;background:var(--surface);}
  .p-invitation .hero-grid{
    display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:640px;
    max-width:1216px;width:100%;margin:0 auto;
  }
  .p-invitation .hero-copy{
    display:flex;flex-direction:column;justify-content:center;
    padding:56px 32px;
  }
  .p-invitation .hero h1{margin:0 0 22px;font-size:clamp(24px,3.1vw,40px);font-weight:800;line-height:1.5;}
  .p-invitation .hero h1 .line{white-space:nowrap;}
  @media (max-width:700px){ .p-invitation .hero h1 .line{white-space:normal;} }
  .p-invitation .hero p{margin:0;font-size:15.5px;color:var(--ink-soft);line-height:1.9;}
  .p-invitation .hero-photo{position:relative;overflow:hidden;background:linear-gradient(200deg,#dcdcdc,#efefef 55%,#e2e2e2);}
  .p-invitation .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block;}
  .p-invitation .hero-photo .bolt{position:absolute;background:var(--accent-grad-h);}
  .p-invitation .hero-photo .bolt1{width:150%;height:5%;top:20%;left:-25%;transform:rotate(-10deg);opacity:.9;}
  .p-invitation .hero-photo .bolt2{width:150%;height:2%;top:34%;left:-25%;transform:rotate(-10deg);opacity:.45;}
  .p-invitation .hero-photo .cap{position:absolute;left:16px;bottom:16px;font-size:10px;letter-spacing:.06em;color:rgba(0,0,0,.45);background:rgba(255,255,255,.75);padding:4px 8px;}
  .p-invitation .hero-photo .glow{position:absolute;right:-10%;top:-10%;width:60%;height:60%;background:radial-gradient(circle,rgba(255,0,0,.14),transparent 65%);pointer-events:none;}

  @media (max-width:900px){
    .p-invitation .nav{display:none;}
    .p-invitation .burger{display:inline-flex;}
    .p-invitation .hero-grid{grid-template-columns:1fr;min-height:0;}
    .p-invitation .hero-copy{padding:40px 20px;max-width:none;}
    .p-invitation .hero-photo{aspect-ratio:4/3;}
    .p-invitation .header-cta{display:none;}
  }
  @media (max-width:420px){
    .p-invitation .site-header .wrap{height:64px;}
    .p-invitation .logo .word{font-size:18px;}
  }

  /* ---- section shell ---- */
  .p-invitation section{padding:80px 0;}
  .p-invitation .eyebrow{display:block;font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent-2);margin-bottom:8px;}
  .p-invitation h2.section-title{margin:0 0 30px;font-size:clamp(20px,3vw,26px);font-weight:800;text-wrap:balance;}
  @media (max-width:600px){ .p-invitation section{padding:56px 0;} }

  /* ---- benefit card ---- */
  .p-invitation .benefit-section{padding:0 0 84px;margin-top:-40px;position:relative;z-index:2;}
  .p-invitation .benefit-card{box-shadow:var(--shadow);border-radius:20px;overflow:hidden;border:1px solid var(--line);}
  .p-invitation .benefit-card-head{background:var(--surface);text-align:center;padding:26px 20px 22px;border-bottom:1px solid var(--line);}
  .p-invitation .benefit-card-head .shared-headline{margin:0;font-size:clamp(18px,2.6vw,22px);font-weight:800;}
  .p-invitation .benefit-card-head .shared-headline .hl{color:var(--accent-1);}
  .p-invitation .benefit-card-head .shared-sub{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft);}
  .p-invitation .benefit-card-body{display:grid;grid-template-columns:340px 1fr;}
  .p-invitation .benefit-side{background:#000000;color:var(--card-fg);padding:36px 32px;display:flex;flex-direction:column;}
  .p-invitation .benefit-side .who{font-size:14px;font-weight:700;padding-bottom:14px;margin-bottom:24px;border-bottom:2px solid var(--accent-1);display:inline-flex;gap:8px;align-items:baseline;}
  .p-invitation .benefit-side .who .sub{font-size:12px;color:#bbb;font-weight:500;}
  .p-invitation .benefit-side .item-label{font-size:13px;color:#ccc;margin-bottom:6px;}
  .p-invitation .benefit-side .item-value{font-size:38px;font-weight:800;color:var(--accent-1);line-height:1;}
  .p-invitation .benefit-side .pill{
    margin-top:24px;align-self:flex-start;display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
    padding:8px 14px;font-size:12.5px;font-weight:700;border-radius:999px;
  }
  .p-invitation .benefit-main{background:var(--surface);padding:36px 40px;}
  .p-invitation .benefit-main .who{
    font-size:14px;font-weight:700;color:var(--ink);padding-bottom:14px;margin:0 0 24px;
    border-bottom:2px solid var(--accent-1);display:inline-flex;gap:8px;align-items:baseline;
  }
  .p-invitation .benefit-main .who .sub{font-size:12px;color:var(--ink-soft);font-weight:500;}
  .p-invitation .price-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
  .p-invitation .price-item{flex:1;min-width:150px;}
  .p-invitation .price-item .label{font-size:13px;color:var(--ink-soft);margin-bottom:6px;}
  .p-invitation .price-item .was{font-size:14px;color:var(--muted);text-decoration:line-through;margin-right:8px;}
  .p-invitation .price-item .now{font-size:clamp(24px,4vw,30px);font-weight:800;color:var(--accent-1);}
  .p-invitation .price-plus{flex:none;font-size:22px;color:var(--line);font-weight:300;}
  .p-invitation .benefit-main .note{margin:22px 0 0;font-size:12px;color:var(--ink-soft);}

  .p-invitation .cta-band-gray{background:var(--band-gray);padding:96px 0;margin-top:36px;}
  .p-invitation .cta-outline-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;}
  .p-invitation .cta-band-gray .microcopy{font-size:12.5px;color:var(--ink-soft);text-align:center;}
  .p-invitation .cta-outline{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--surface);color:var(--ink);border:2px solid var(--accent-1);
    font-weight:800;font-size:15px;padding:18px 32px;border-radius:999px;text-decoration:none;
    text-align:center;
  }
  .p-invitation .cta-outline svg{color:var(--accent-1);flex:none;}
  .p-invitation .cta-outline:hover{background:var(--accent-1);color:#fff;}
  .p-invitation .cta-outline:hover svg{color:#fff;}

  @media (max-width:760px){
    .p-invitation .benefit-card-body{grid-template-columns:1fr;}
    .p-invitation .cta-band-gray{padding:56px 0;}
    .p-invitation .cta-outline{padding:16px 24px;font-size:14px;white-space:normal;}
  }

  /* ---- recommend (こんな方におすすめです) ---- */
  .p-invitation .recommend-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  .p-invitation .check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
  .p-invitation .check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;}
  .p-invitation .check-list svg{flex:none;margin-top:2px;color:var(--accent-1);}

  .p-invitation .persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .p-invitation .persona-card{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.08);}
  .p-invitation .persona-card img{width:100%;height:100%;object-fit:cover;display:block;}

  @media (max-width:900px){
    .p-invitation .recommend-grid{grid-template-columns:1fr;gap:36px;}
  }
  @media (max-width:480px){
    .p-invitation .persona-grid{grid-template-columns:1fr 1fr;gap:8px;}
  }

  /* ---- flow (ご紹介の流れ) ---- */
  .p-invitation .flow-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 0;align-items:start;text-align:center;}
  .p-invitation .flow-item{padding:0 14px;position:relative;}
  .p-invitation .flow-item .icon{
    width:84px;height:84px;border-radius:50%;background:var(--surface-alt);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--ink);
  }
  .p-invitation .flow-arrow{position:absolute;top:42px;right:-6px;color:var(--muted);}
  .p-invitation .flow-item:last-child .flow-arrow{display:none;}
  .p-invitation .flow-item .step-en{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--accent-1);margin-bottom:8px;}
  .p-invitation .flow-item h3{font-size:15.5px;font-weight:800;margin:0 0 10px;text-wrap:balance;}
  .p-invitation .flow-item p{font-size:12.5px;color:var(--ink-soft);margin:0;text-wrap:balance;}

  @media (max-width:760px){
    .p-invitation .flow-row{grid-template-columns:1fr 1fr;gap:36px 16px;}
    .p-invitation .flow-arrow{display:none;}
  }
  @media (max-width:420px){
    .p-invitation .flow-row{grid-template-columns:1fr;gap:32px;}
  }

  /* ---- dark feature section ---- */
  .p-invitation .feature-section{background:var(--card-bg);color:var(--card-fg);}
  .p-invitation .feature-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start;}
  .p-invitation .feature-eyebrow{font-size:14px;font-weight:800;color:#fff;margin:0 0 18px;}
  .p-invitation .feature-title{font-size:clamp(22px,3vw,32px);font-weight:800;line-height:1.55;margin:0 0 24px;text-wrap:balance;}
  .p-invitation .feature-body{font-size:14.5px;color:#b9b9b9;line-height:2;}
  .p-invitation .feature-list{display:flex;flex-direction:column;}
  .p-invitation .feature-row{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:center;padding:26px 0;border-top:1px solid rgba(255,255,255,.14);}
  .p-invitation .feature-row:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
  .p-invitation .feature-num{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:26px;color:var(--accent-1);}
  .p-invitation .feature-row h3{margin:0 0 8px;font-size:15.5px;font-weight:800;}
  .p-invitation .feature-row p{margin:0;font-size:12.5px;color:#a8a8a8;}

  @media (max-width:900px){
    .p-invitation .feature-grid{grid-template-columns:1fr;gap:40px;}
  }
  @media (max-width:560px){
    .p-invitation .feature-row{grid-template-columns:36px 1fr;}
    .p-invitation .feature-num{font-size:20px;}
  }

  /* ---- final cta ---- */
  .p-invitation .final-cta{background:var(--accent-grad-h);color:#fff;text-align:center;padding:100px 0 108px;}
  .p-invitation .final-cta h2{font-size:clamp(22px,3.2vw,32px);font-weight:800;margin:0 0 40px;line-height:1.6;text-wrap:balance;}
  .p-invitation .cta-solid{
    display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--ink);
    font-weight:800;font-size:15.5px;padding:19px 40px;text-decoration:none;border-radius:8px;
    text-align:center;
  }
  .p-invitation .cta-solid svg{color:var(--accent-1);flex:none;}
  .p-invitation .cta-solid:hover{background:#000;color:#fff;}
  .p-invitation .cta-solid:hover svg{color:#fff;}
  @media (max-width:560px){
    .p-invitation .final-cta{padding:64px 0 72px;}
    .p-invitation .cta-solid{padding:16px 28px;font-size:14px;}
  }

  /* ---- notice card ---- */
  .p-invitation .notice-section{padding:64px 0;}
  .p-invitation .notice-card{border:1px solid var(--line);border-radius:14px;padding:28px 30px;background:var(--surface);}
  .p-invitation .notice-card .notice-head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin:0 0 18px;}
  .p-invitation .notice-card .notice-head .icon{
    width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
    display:flex;align-items:center;justify-content:center;font-size:12px;font-style:italic;font-family:Georgia,"Times New Roman",serif;
  }
  .p-invitation .notice-card ul{margin:0;padding-left:1.2em;font-size:13px;color:var(--ink-soft);line-height:1.9;}
  .p-invitation .notice-card li{margin-bottom:10px;}
  .p-invitation .notice-card li:last-child{margin-bottom:0;}
  .p-invitation .notice-card li ul{margin-top:8px;margin-bottom:0;}
  .p-invitation .notice-card b{color:var(--ink);font-weight:700;}
  .p-invitation .notice-card a{color:var(--ink);text-decoration:underline;}
  @media (max-width:560px){
    .p-invitation .notice-card{padding:22px 18px;}
  }

  /* ---- footer ---- */
  .p-invitation .site-footer{background:#000000;color:#fff;padding:32px 0;border-top:1px solid rgba(255,255,255,.14);}
  .p-invitation .footer-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#8a8a8a;gap:12px;flex-wrap:wrap;}
  .p-invitation .footer-row a{color:#fff;text-decoration:none;margin-left:20px;}
  @media (max-width:560px){
    .p-invitation .footer-row{flex-direction:column;align-items:flex-start;}
    .p-invitation .footer-row a{margin-left:0;margin-right:16px;}
  }

.p-invitation a {
  text-decoration: none;
}
.p-invitation .cta-outline,
.p-invitation .cta-solid {
  text-decoration: none;
}

/* フローティングは .p-invitation 外。
   fillButton クラスは付けない（共通JSが .fillButton と .fillButton_bg を
   並び順でペアにするため、ヘッダー「求人情報」が点滅する）。 */
.follow_bnr.follow_bnr_invitation .follow_bth .follow_invite_btn {
  display: block;
  width: 465px;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
}
.follow_bnr.follow_bnr_invitation .follow_bth .follow_invite_btn_img {
  display: block;
  width: 465px;
  height: auto;
  max-width: 100%;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .follow_bnr.follow_bnr_invitation {
    box-sizing: border-box;
    min-width: 515px; /* 465 + padding 25*2 */
  }
  .follow_bnr.follow_bnr_invitation .follow_intro {
    white-space: nowrap;
  }
}
@media screen and (max-width: 767px) {
  .follow_bnr.follow_bnr_invitation .follow_bth .follow_invite_btn {
    width: calc(85% - 5rem);
  }
  .follow_bnr.follow_bnr_invitation .follow_bth .follow_invite_btn_img {
    width: 100%;
    max-width: 465px;
  }
}