/* ==========================================================
   うさぎ薬局 新卒採用LP — Base Styles
   ========================================================== */

:root{
  --blue:       #246aba;
  --blue-600:   #1f5ea3;
  --blue-700:   #184c85;
  --blue-050:   #eef4fb;
  --blue-100:   #dceafb;
  --blue-200:   #b7d1f0;
  --orange:     #ee7700;
  --orange-600: #d76a00;
  --orange-050: #fff5eb;
  --orange-100: #ffe6cc;
  --ink:        #1a2130;
  --ink-2:      #46536a;
  --ink-3:      #7a879e;
  --line:       #e6ebf3;
  --paper:      #ffffff;
  --paper-2:    #f7f9fd;
  --paper-3:    #f0f5fb;

  --shadow-sm:  0 1px 2px rgba(20,40,80,.05), 0 2px 6px rgba(20,40,80,.04);
  --shadow-md:  0 4px 16px rgba(20,40,80,.06), 0 12px 40px rgba(20,40,80,.06);
  --shadow-lg:  0 12px 40px rgba(20,40,80,.10), 0 24px 80px rgba(20,40,80,.08);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --container: 1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  line-height: 1.7;
  letter-spacing: .02em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit}

/* ---- Utility ---- */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.16em;font-weight:600;
  color:var(--blue);
  text-transform: uppercase;
}
.eyebrow::before{
  content:"";width:24px;height:1.5px;background:var(--blue);border-radius:2px;
}
.section-title{
  font-size: clamp(28px,4vw,44px);
  font-weight: 800;
  line-height:1.35;
  letter-spacing:.01em;
  margin: 12px 0 8px;
  color: var(--ink);
}
.section-title .accent{color:var(--orange)}
.section-title .accent-b{color:var(--blue)}
.section-sub{
  color: var(--ink-2);
  font-size: 15px;
  max-width: 720px;
}
.section-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;
  background:var(--blue);color:#fff;font-weight:800;font-size:18px;
  box-shadow: 0 6px 16px rgba(36,106,186,.28);
  font-family: "Inter","Noto Sans JP",sans-serif;
  letter-spacing: 0;
}

/* ---- Header ---- */
.header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.header.is-scrolled{ border-bottom-color: var(--line); box-shadow: var(--shadow-sm);}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height: 72px;
  max-width: var(--container);
  margin-inline:auto; padding-inline: 24px;
}
.header-logo{display:flex;align-items:center;gap:10px}
.header-logo img{transition: opacity .2s}
.header-logo:hover img{opacity: .82}
.header-nav{display:flex;gap:28px;align-items:center}
.header-nav a{font-size:14px;font-weight:600;color:var(--ink-2);transition:color .18s}
.header-nav a:hover{color:var(--blue)}

/* Mobile burger */
.header-burger{
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: transparent;
  margin-left: auto; margin-right: 8px;
}
.header-burger span{
  display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .28s, opacity .28s;
}
body.nav-open .header-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.nav-open .header-burger span:nth-child(2){ opacity: 0; }
body.nav-open .header-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.header-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:999px;
  background:var(--orange);color:#fff;font-weight:700;font-size:14px;
  box-shadow: 0 6px 18px rgba(238,119,0,.28);
  transition: transform .2s, box-shadow .2s;
}
.header-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(238,119,0,.36)}
.header-cta svg{width:16px;height:16px}

@media (max-width: 900px){
  .header-inner{ height: 64px; padding-inline: 20px; }
  .header-burger{ display: inline-flex; order: 2; }
  .header-nav{
    position: fixed; inset: 64px 0 auto 0;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(16px);
    padding: 24px 24px 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .32s;
  }
  body.nav-open .header-nav{
    transform: translateY(0); opacity: 1; pointer-events: auto;
  }
  .header-nav a{
    padding: 16px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    color: var(--ink);
  }
  .header-nav a:last-child{ border-bottom: none; }
  .header-cta{ order: 3; padding: 10px 16px; font-size: 13px; }
  .header-cta svg{ width: 14px; height: 14px; }
  .header-logo img{ height: 28px !important; }
}
@media (max-width: 420px){
  .header-cta { padding: 10px 14px; }
  .header-cta span, .header-cta { font-size: 12px; }
}

/* ---- Hero ---- */
.hero{
  position:relative;
  padding: 148px 0 120px;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(36,106,186,.10), transparent 60%),
    radial-gradient(800px 500px at -10% 40%, rgba(238,119,0,.06), transparent 65%),
    linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 64px;
  align-items:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding: 8px 14px;border-radius:999px;
  background: var(--blue-050); color: var(--blue);
  font-size: 12px; font-weight: 700; letter-spacing:.14em;
  margin-bottom: 24px;
}
.hero-eyebrow .dot{width:6px;height:6px;background:var(--orange);border-radius:50%}
.hero h1{
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: .005em;
  margin: 0 0 24px;
  color: var(--ink);
}
.hero h1 .b{color:var(--blue)}
.hero h1 .o{color:var(--orange)}
.hero h1 .u{
  background: linear-gradient(transparent 62%, rgba(238,119,0,.22) 62%);
  padding: 0 .1em;
}
.hero-lead{
  font-size: 17px; color: var(--ink-2); max-width: 520px;
  margin: 0 0 36px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:44px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding: 16px 28px;border-radius:999px;
  font-weight:700;font-size:15px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{
  background:var(--blue);color:#fff;
  box-shadow: 0 10px 24px rgba(36,106,186,.32);
}
.btn-primary:hover{background:var(--blue-600);transform:translateY(-2px);box-shadow: 0 14px 30px rgba(36,106,186,.42)}
.btn-accent{
  background:var(--orange);color:#fff;
  box-shadow: 0 10px 24px rgba(238,119,0,.30);
}
.btn-accent:hover{background:var(--orange-600);transform:translateY(-2px)}
.btn-ghost{
  background:#fff;color:var(--ink);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}

.hero-meta{
  display:flex;gap: 40px;padding-top: 32px;border-top:1px solid var(--line);
}
.hero-meta-item{
  display:flex;flex-direction:column;gap:4px;
}
.hero-meta-num{
  font-family:"Inter","Noto Sans JP",sans-serif;
  font-size: 28px; font-weight:800; color:var(--blue); letter-spacing:0;
}
.hero-meta-num .o{color:var(--orange)}
.hero-meta-label{font-size:12px;color:var(--ink-3);letter-spacing:.08em}

/* Hero right — geometric illustration */
.hero-art{
  position: relative;
  aspect-ratio: 1/1;
  max-width: 480px;
  margin-left:auto;
}

/* Hero C (default) */
.hero.hero-c{
  padding: 148px 0 100px;
  background: #fff;
  background:
    radial-gradient(1000px 500px at 90% 10%, rgba(238,119,0,.06), transparent 60%),
    radial-gradient(700px 400px at -5% 60%, rgba(36,106,186,.05), transparent 65%),
    #fff;
}
.hero-c-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-c-copy .hero-eyebrow{ margin-bottom: 20px; }
.hero-c-tag{
  color: var(--orange);
  font-size: 0.6em;
  display: block;
  margin-bottom: 10px;
  letter-spacing: .06em;
  font-weight: 800;
}
.hero-c-visual{ position: relative; padding: 24px 24px 40px 0; }
.hero-c-bg{
  position: absolute;
  inset: -24px -24px auto auto;
  width: 70%;
  aspect-ratio: 3/4;
  background: var(--orange-050);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.hero-c-ph{ position: relative; z-index: 1; }
.hero-c-badge{
  position: absolute;
  bottom: 0; left: -24px;
  z-index: 2;
  background: #fff;
  padding: 16px 20px;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line);
}

@media (max-width: 960px){
  .hero{padding: 108px 0 72px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-art{max-width: 360px;margin: 0 auto}
  .hero-meta{gap:20px 24px;flex-wrap:wrap}
  .hero-c{padding: 108px 0 80px}
  .hero-c-grid{grid-template-columns: 1fr; gap: 48px}
  .hero-c-visual{ max-width: 480px; margin: 0 auto; padding: 24px 24px 32px 0; }
}
@media (max-width: 560px){
  .hero{padding: 96px 0 56px}
  .hero-lead{ font-size: 15px }
  .hero-eyebrow{ font-size: 11px; padding: 6px 12px }
  .hero-ctas{ flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 32px; }
  .btn{ justify-content: center; padding: 14px 22px; font-size: 14px; }
  .hero-meta{
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
    padding-top: 24px;
  }
  .hero-meta-num{ font-size: 22px }
  .hero-c-tag{ font-size: 0.5em }
  .hero-c-visual{ padding: 20px 20px 32px 0 }
  .hero-c-badge{ bottom: -12px; left: -12px; padding: 12px 16px }
  .hero-c-badge > div:first-child{ width: 36px !important; height: 36px !important; }
}

/* ---- Section base ---- */
section.block{ padding: 120px 0; position: relative; }
section.block.tint{ background: var(--paper-2); }
section.block.tint-blue{ background: linear-gradient(180deg, #f2f7fd 0%, #eaf2fb 100%); }
section.block .container{ position: relative; z-index: 1; }
.section-head{ margin-bottom: 56px; display:flex; align-items:flex-end; justify-content:space-between; gap:32px;flex-wrap:wrap}
.section-head-left{ max-width: 720px; }
.section-head-right{ color: var(--ink-3); font-size: 13px; letter-spacing:.08em}

@media (max-width: 720px){
  section.block{padding: 80px 0}
  .section-head{margin-bottom:36px}
}

/* ---- Cards ---- */
.card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform .3s, box-shadow .3s;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-icon{
  width: 52px;height:52px;border-radius: 14px;
  display:flex;align-items:center;justify-content:center;
  background: var(--blue-050); color:var(--blue);
  margin-bottom: 20px;
}
.card-icon svg{width:26px;height:26px}
.card-icon.orange{ background: var(--orange-050); color: var(--orange); }
.card-icon.green{ background: #eaf7ee; color:#2f9e5c; }
.card-icon.purple{ background: #f0edfa; color:#6a52c9; }
.card-title{ font-size: 18px; font-weight: 700; margin: 0 0 8px; line-height: 1.5;}
.card-title .b{color: var(--blue)}
.card-title .o{color: var(--orange)}
.card-body{ font-size: 14px; color: var(--ink-2); line-height: 1.75;}

/* Placeholder image */
.ph{
  width:100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, #eef2f7 0 8px, #f5f7fa 8px 16px);
  border: 1.5px dashed #cbd5e6;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  color: var(--ink-3);
  font-size: 13px; gap: 6px;
  text-align: center;
  padding: 20px;
}
.ph svg{width:32px;height:32px;opacity:.5}
.ph small{font-size:11px;letter-spacing:.06em}

/* Fade in on scroll */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity: 1; transform: none;}

/* Footer */
.footer{
  background: #0f2038;
  color: #cfd8e6;
  padding: 80px 0 40px;
  font-size: 14px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer h4{ color:#fff; font-size:13px; letter-spacing:.14em; font-weight:700; margin: 0 0 16px;text-transform:uppercase}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer a{color:#9fb0c8;font-size:14px;transition:color .2s}
.footer a:hover{color:#fff}
.footer-bottom{padding-top:24px;display:flex;justify-content:space-between;color:#6b7d95;font-size:12px}
@media(max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;gap:32px} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr;gap:28px} .footer{padding: 56px 0 32px} }

/* ====================================================
   Responsive grid overrides for inline-styled sections
   ==================================================== */

/* Tablet: 3-col → 2-col, 5-col → 2-col-ish, 4-col → 2-col */
@media (max-width: 900px){
  /* All grid-2/3/4/5 col children in .block sections */
  section.block .container > .reveal[style*="grid-template-columns"],
  section.block .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Special: keep 2-col main hero-like layouts as 1fr on tablet */
  section.block .container > .reveal[style*="repeat(3,1fr)"],
  section.block .container > div[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 5-col career grid -> 2 cols */
  section.block .container > .reveal[style*="repeat(5,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 4-col training2 -> 2 cols */
  section.block .container > .reveal[style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 2fr 1fr / 1.1fr 1fr etc. */
  section.block .container > .reveal[style*="1.1fr"],
  section.block .container > .reveal[style*="2fr 1fr"],
  section.block .container > .reveal[style*="grid-template-columns: 2fr"],
  section.block .container > .reveal[style*="grid-template-columns:2fr"] {
    grid-template-columns: 1fr !important;
  }
  /* section-head */
  .section-head{ flex-direction: column; align-items: flex-start; }
  .section-head-right{ align-self: flex-start; }
  /* No.1 hero row inside Strength: 1fr 1fr → 1fr */
  section.block .container .reveal[style*="1fr 1fr"][style*="align-items:center"],
  section.block .container .reveal[style*="1fr 1fr"][style*="align-items: center"]{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* 3-step process → 1 col with rotated arrows */
  .step-row{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .step-arrow{ transform: rotate(90deg); height: 24px; }
  /* Entry CTA 3-col */
  #entry .reveal[style*="repeat(3"] { grid-template-columns: 1fr !important; }
}

/* Phone: everything to single column */
@media (max-width: 640px){
  section.block{ padding: 64px 0 !important; }
  section.block .container > .reveal[style*="grid-template-columns"],
  section.block .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  section.block .container > .reveal[style*="repeat(5,1fr)"],
  section.block .container > .reveal[style*="repeat(4,1fr)"],
  section.block .container > .reveal[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .section-title{ font-size: 26px !important; }
  .card{ padding: 24px !important; border-radius: 20px }
  .card-title{ font-size: 16px }
  .card-body{ font-size: 13.5px }

  /* No.1 大文字を縮小 */
  section.block .card[style*="padding:\"48px 40px\""],
  section.block .card[style*="padding: \"48px 40px\""],
  section.block div[style*="padding:\"48px 40px\""],
  section.block div[style*="padding: \"48px 40px\""]{
    padding: 32px 24px !important;
  }
  section.block div[style*="fontSize:96"],
  section.block div[style*="fontSize: 96"]{
    font-size: 64px !important;
  }
  /* Section head heading */
  .section-head .section-num{ width: 40px; height: 40px; font-size: 16px; }
  /* Section-head-right e.g. 96% satisfaction */
  .section-head-right div[style*="fontSize:24"]{ font-size: 18px !important }
  .section-head-right div[style*="fontSize:36"], .section-head-right span[style*="fontSize:36"]{ font-size: 26px !important }
  /* Story bridge */
  #story .reveal{ padding: 24px !important; gap: 16px !important; }
  #story .reveal > div[style*="minWidth:260"]{ min-width: unset !important; }
  #story .reveal > div:last-child{ width: 100% }
  #story .reveal > div:last-child .btn{ width: 100%; justify-content: center }
  /* Bar chart (change section) */
  section#change .card > div[style*="height:180"]{
    height: 140px !important;
    gap: 16px !important;
    padding: 0 !important;
  }
  section#change .card > div[style*="height:180"] > div[style*="fontSize:22"]{
    font-size: 16px !important;
  }
  section#change .card > div[style*="height:180"] div[style*="fontSize:28"]{
    font-size: 22px !important;
  }
  /* Long horizontal internship dates: 2 cols on mobile */
  #internship .card > div[style*="grid-template-columns:\"1fr 1fr\""],
  #internship .card > div[style*="grid-template-columns: \"1fr 1fr\""]{
    grid-template-columns: 1fr 1fr !important;
  }
  /* Entry final CTA */
  #entry h2{ font-size: 26px !important; }
  #entry .reveal[style*="padding:\"24px 32px\""],
  #entry .reveal[style*="padding: \"24px 32px\""]{
    padding: 20px !important;
    flex-direction: column;
    gap: 16px !important;
  }

  /* Hero art (spacing) */
  .hero-art{ max-width: 300px }

  /* Bring vertical rhythm down */
  h1{ line-height: 1.28 !important }
  .hero h1{ font-size: 32px !important }

  /* Container padding */
  .container{ padding-inline: 20px }

  /* Section-head reveal margin-bottom */
  .section-head{ margin-bottom: 28px }
}

/* Ultra-small (iPhone SE etc.) */
@media (max-width: 380px){
  .hero h1{ font-size: 28px !important; }
  .section-title{ font-size: 22px !important; }
  .container{ padding-inline: 16px }
}

/* Footer logo — place on white pill so brand colors remain */
.footer-logo{
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 10px 18px;
  border-radius: 12px;
}
.footer-logo img{ height: 28px; }