@charset "UTF-8";
/* 東和商事 採用サイト / style.css */

  :root{
    --accent:#1663B5; --sec-pad:132px; --fcta:flex;
    /* ヒーロー背景イラストの高さ（横幅は縦横比 1802:873 から自動）。
       イラストは左42%が透明なので、この値を上げるほど絵が左＝見出しへ寄ります。
       見出しとぶつからない上限が 32vw / 560px です。 */
    --hero-art-h:clamp(300px,32vw,560px);
    --hero-copy-pb:clamp(96px,15vh,150px);  /* ヒーローのコピー下の余白 */
    --cta-illust-h:clamp(190px,26vh,330px);
  }
  *,*::before,*::after{ box-sizing:border-box; }
  body{
    margin:0; background:#FAFAF8; color:#16202C;
    font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
    font-size:16px; line-height:1.95; font-feature-settings:"palt" 1;
    -webkit-font-smoothing:antialiased; overflow-wrap:anywhere; line-break:strict;
  }
  h1,h2,h3,h4,p,figure,dl,dd,ol,ul{ margin:0; }
  ul,ol{ padding:0; list-style:none; }
  img,svg{ max-width:100%; height:auto; display:block; }
  a{ color:#0B3774; text-decoration:none; transition:color .22s cubic-bezier(.22,.61,.36,1), opacity .22s; }
  a:hover{ color:var(--accent); }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  /* ══════════════ ヘッダー / グローバルナビ ══════════════
     1080px以上＝ピル型の横並びナビ、1080px未満＝ハンバーガー＋ドロワー。
     ドロワーは position:fixed ですが、ピルに backdrop-filter が掛かっていると
     そこが包含ブロックになり画面外へずれるため、開いている間だけ解除しています。 */
  [data-header]{
    position:fixed; inset:0 0 auto 0; z-index:120;
    padding:13px clamp(16px,3vw,40px);
    transition:transform .38s cubic-bezier(.22,.61,.36,1);
  }
  [data-header-pill]{
    max-width:1280px; margin-inline:auto;
    display:flex; align-items:center; gap:16px;
    background:rgba(255,255,255,.74);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
            backdrop-filter:saturate(160%) blur(18px);
    border:1px solid rgba(11,55,116,.05); border-radius:999px;
    padding:7px 10px 7px 18px;
    box-shadow:0 3px 16px rgba(11,55,116,.05);
    transition:background-color .3s, box-shadow .3s;
  }
  [data-header-scrolled] [data-header-pill]{ background:rgba(255,255,255,.92); box-shadow:0 6px 24px rgba(11,55,116,.1); }
  [data-header-logo]{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  [data-header-logo] img{ width:104px; height:auto; }
  [data-header-badge]{
    font-family:Outfit,sans-serif; font-size:9.5px; font-weight:600; letter-spacing:.16em;
    color:var(--accent); border:1px solid rgba(46,123,214,.35); border-radius:999px;
    padding:3px 9px 2px; white-space:nowrap;
  }
  [data-header-entry]{
    flex-shrink:0; display:inline-flex; align-items:center; gap:9px;
    background:#0B3774; color:#fff; border-radius:999px; padding:10px 18px;
    font-size:12.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  }
  [data-header-entry]:hover{ background:var(--accent); color:#fff; }
  [data-header-entry-bar]{ width:16px; height:1px; background:currentColor; }
  [data-nav-toggle]{
    display:none; flex-shrink:0; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; width:46px; height:46px; border:0; background:none; padding:0; cursor:pointer; font:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  [data-bar]{
    display:block; width:20px; height:1.5px; background:#0B3774; border-radius:2px;
    transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s;
  }
  [data-nav-open] [data-bar]:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
  [data-nav-open] [data-bar]:nth-child(2){ opacity:0; }
  [data-nav-open] [data-bar]:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

  [data-gnav]{ margin-left:auto; display:flex; align-items:center; gap:2px; }
  [data-gnav] > a{
    padding:9px 15px; border-radius:999px;
    font-size:13px; font-weight:500; color:#16202C; white-space:nowrap;
  }
  [data-gnav] > a:hover{ background:#EAF3FC; color:#0B3774; }
  [data-gnav] > a[aria-current="page"]{ background:#EAF3FC; color:#0B3774; font-weight:700; }
  [data-gnav-title], [data-gnav-en], [data-gnav-foot]{ display:none; }
  [data-nav-backdrop]{ display:none; }

  /* ── 1080px未満：ハンバーガー＋ドロワー ── */
  @media (max-width:1079px){
    [data-nav-toggle]{ display:flex; }
    [data-header-entry]{ display:none; }
    [data-nav-open] [data-header-pill]{
      background:#fff; box-shadow:0 6px 24px rgba(11,55,116,.12);
      /* ↓ 解除しないとドロワーの position:fixed がピル基準になる */
      -webkit-backdrop-filter:none; backdrop-filter:none;
    }

    [data-nav-backdrop]{
      display:block; position:fixed; inset:0; z-index:115;
      background:rgba(11,55,116,.32);
      -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
      opacity:0; visibility:hidden; touch-action:none;
      transition:opacity .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s;
    }
    [data-nav-open] [data-nav-backdrop]{ opacity:1; visibility:visible; transition-delay:0s; }

    [data-gnav]{
      position:fixed; left:12px; right:12px; top:var(--nav-top,80px);
      margin:0 auto; max-width:440px;
      flex-direction:column; align-items:stretch; gap:0;
      background:#fff; border-radius:22px; padding:14px 20px 20px;
      box-shadow:0 26px 64px rgba(11,55,116,.24), 0 2px 10px rgba(11,55,116,.08);
      max-height:calc(100dvh - var(--nav-top,80px) - 16px);
      overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
      opacity:0; transform:translateY(-10px); visibility:hidden;
      transition:opacity .3s cubic-bezier(.22,.61,.36,1),
                 transform .3s cubic-bezier(.22,.61,.36,1),
                 visibility 0s linear .3s;
    }
    [data-nav-open] [data-gnav]{ opacity:1; transform:none; visibility:visible; transition-delay:0s; }

    [data-gnav-title]{
      display:block; font-family:Outfit,sans-serif; font-size:10px; font-weight:500;
      letter-spacing:.22em; color:#93A1B5; padding:0 6px 12px;
    }
    [data-gnav] > a{
      display:flex; align-items:baseline; gap:12px;
      padding:16px 6px; border-radius:0;
      font-size:15px; font-weight:700; color:#0B3774;
      border-top:1px solid rgba(11,55,116,.08);
      opacity:0; transform:translateY(8px);
      transition:opacity .32s cubic-bezier(.22,.61,.36,1), transform .32s cubic-bezier(.22,.61,.36,1);
    }
    [data-gnav] > a:hover{ background:transparent; color:var(--accent); }
    [data-gnav] > a[aria-current="page"]{ background:transparent; color:var(--accent); }
    [data-gnav] > a[aria-current="page"]::before{
      content:''; flex-shrink:0; align-self:center;
      width:5px; height:5px; border-radius:50%; background:var(--accent); margin-left:-11px;
    }
    [data-gnav-en]{
      display:block; margin-left:auto;
      font-family:Outfit,sans-serif; font-size:9.5px; font-weight:500; letter-spacing:.14em; color:#93A1B5;
    }
    [data-gnav-foot]{
      display:grid; gap:10px; margin-top:18px; padding-top:18px;
      border-top:1px solid rgba(11,55,116,.08);
      opacity:0; transform:translateY(8px);
      transition:opacity .32s cubic-bezier(.22,.61,.36,1), transform .32s cubic-bezier(.22,.61,.36,1);
    }
    [data-gnav-tel]{
      display:flex; flex-direction:column; gap:2px; align-items:center;
      background:#EAF3FC; border-radius:14px; padding:13px 16px; text-align:center;
    }
    [data-gnav-tel-num]{ font-family:Outfit,sans-serif; font-size:22px; font-weight:500; letter-spacing:.02em; color:#0B3774; line-height:1.2; }
    [data-gnav-tel-note]{ font-size:10.5px; font-weight:500; color:#55657A; }
    [data-gnav-cta]{
      display:flex; align-items:center; justify-content:center; gap:12px;
      background:#0B3774; color:#fff; border-radius:14px; padding:16px;
      font-size:14.5px; font-weight:700;
    }
    [data-gnav-cta]:hover{ background:var(--accent); color:#fff; }
    [data-gnav-cta-bar]{ width:18px; height:1px; background:currentColor; }

    /* 開いたときだけ、上から順に出す */
    [data-nav-open] [data-gnav] > a,
    [data-nav-open] [data-gnav-foot]{ opacity:1; transform:none; }
    [data-nav-open] [data-gnav] > a:nth-of-type(1){ transition-delay:.04s }
    [data-nav-open] [data-gnav] > a:nth-of-type(2){ transition-delay:.07s }
    [data-nav-open] [data-gnav] > a:nth-of-type(3){ transition-delay:.10s }
    [data-nav-open] [data-gnav] > a:nth-of-type(4){ transition-delay:.13s }
    [data-nav-open] [data-gnav] > a:nth-of-type(5){ transition-delay:.16s }
    [data-nav-open] [data-gnav] > a:nth-of-type(6){ transition-delay:.19s }
    [data-nav-open] [data-gnav-foot]{ transition-delay:.22s }

    /* メニューを開いている間は追従CTAを引っ込める */
    [data-nav-open] [data-floating-cta]{ opacity:0; pointer-events:none; }
  }

  @media (max-width:1079px) and (prefers-reduced-motion: reduce){
    [data-gnav], [data-gnav] > a, [data-gnav-foot], [data-nav-backdrop]{ transition-duration:.01s !important; transition-delay:0s !important; }
    [data-gnav] > a, [data-gnav-foot]{ transform:none !important; }
  }

  /* ══ ヒーロー背景イラスト ══
     背景を透過済みのWebP/PNG を右下ぞろえで置いています。
     左側は絵そのものが透明なのでマスク不要。上端はパネルが切れるため、
     フェードでセクションのグラデーションへ溶かしています。 */
  [data-hero-art]{
    position:absolute; right:0; bottom:0; z-index:1; pointer-events:none;
    height:var(--hero-art-h); aspect-ratio:1802/873;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 17%);
            mask-image:linear-gradient(180deg,transparent 0,#000 17%);
  }
  [data-hero-art] picture{ display:block; height:100%; }
  [data-hero-art] img{ width:100%; height:100%; object-fit:cover; object-position:right bottom; }

  @keyframes towaMarquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
  @keyframes towaPhotoLoop{ from{transform:translateX(0)} to{transform:translateX(calc(-50% - 10px))} }
  @keyframes towaFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
  @keyframes towaScroll{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
  @media (prefers-reduced-motion: reduce){ *{animation:none !important} }
  /* インラインで書けない箇所のみ：レスポンシブ調整 */
  @media (max-width:899px){
    :root{ --hero-copy-pb:calc(var(--hero-art-h) + 32px); }
    #top a, #entry > div > div > a{ flex:1 1 100% !important; justify-content:center !important; }
    #career > div > div[data-reveal]:first-of-type{ grid-template-columns:1fr !important; gap:32px !important; }
    #story div[data-reveal]{ grid-template-columns:1fr !important; gap:28px !important; }
    [data-career-illust]{ max-width:400px !important; }
  }
  @media (max-width:719px){
    :root{ --sec-pad:78px; --hero-art-h:clamp(230px,58vw,300px); --hero-copy-pb:calc(var(--hero-art-h) + 28px); --cta-illust-h:clamp(150px,20vh,210px); }
    [data-header]{ padding:10px 12px; }
    [data-header-pill]{ gap:10px; padding:7px 8px 7px 14px; }
    [data-header-logo] img{ width:96px; }
    [data-header-badge]{ display:none; }
    #about div[data-reveal], #story div[data-reveal], #message div[data-reveal], #requirements div[data-reveal],
    #reason > div > div[data-reveal]:first-of-type, #location > div > div[data-reveal]:first-of-type,
    #career > div > div[data-reveal]:first-of-type, #workplace > div > div[data-reveal]:first-of-type{
      grid-template-columns:1fr !important; gap:28px !important;
    }
    #requirements dl > div{ grid-template-columns:1fr !important; gap:2px !important; padding:16px 2px !important; }
    #voice article{ grid-template-columns:92px minmax(0,1fr) !important; gap:14px !important; }
    #voice article > div:last-child{ padding:22px 20px !important; }
    #achievement li{ grid-template-columns:1fr auto !important; gap:4px 12px !important; padding:18px 2px !important; }
    #achievement li > span:nth-child(2){ grid-column:1 / -1; order:2; }
    #story div[data-reveal] > div:first-child{ order:-1; }
    [data-career-illust]{ max-width:320px !important; }
    #workplace ol{ gap:0 20px !important; }
  }

  /* ══ 下層ページ共通パーツ ══
     トップページ（index.html）はインライン style で組んでいますが、
     下層ページは同じ型を何度も使うため、ここにクラスとしてまとめています。 */
  .pg-head{ background:linear-gradient(176deg,#F8FCFF 0%,#E6F2FC 58%,#D6E9FA 100%); padding:clamp(122px,15vh,172px) 0 clamp(48px,7vw,84px); }
  .pg-in{ max-width:1240px; margin-inline:auto; padding-inline:clamp(24px,4vw,56px); }
  .pg-in.narrow{ max-width:920px; }
  .pg-sec{ padding:clamp(62px,8vw,112px) 0; }
  .pg-sec.tight{ padding:clamp(44px,6vw,76px) 0; }
  .pg-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.04em; color:#55657A; margin-bottom:26px; }
  .pg-crumb a{ color:#55657A; }
  .pg-crumb a:hover{ color:var(--accent); }
  .pg-crumb span[aria-hidden]{ color:rgba(11,55,116,.35); }
  .pg-en{ font-family:Outfit,sans-serif; font-weight:500; font-size:clamp(28px,3.4vw,40px); line-height:1.1; letter-spacing:.01em; color:#0B3774; }
  .pg-ja{ margin-top:8px; font-size:12px; letter-spacing:.1em; color:#626D7B; }
  .pg-title{ font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:clamp(26px,4.2vw,50px); line-height:1.5; letter-spacing:.01em; color:#0B3774; text-wrap:pretty; }
  .pg-lead{ margin-top:24px; max-width:640px; font-size:13.5px; line-height:2.2; color:#3F5169; }
  .pg-2col{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:start; }
  .pg-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(16px,2vw,24px); }
  .pg-card{ background:#fff; border:1px solid rgba(11,55,116,.07); border-radius:6px; padding:32px 28px 30px; }
  .pg-card h3{ font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:18px; line-height:1.7; color:#0B3774; margin-bottom:12px; }
  .pg-card p{ font-size:13.5px; line-height:2.05; color:#55657A; }
  .pg-num{ font-family:Outfit,sans-serif; font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--accent); margin-bottom:10px; }
  .pg-dl{ border-top:1px solid rgba(11,55,116,.1); }
  .pg-dl > div{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; padding:22px 4px; border-bottom:1px solid rgba(11,55,116,.1); }
  .pg-dl dt{ font-size:13px; font-weight:700; color:#0B3774; }
  .pg-dl dd{ font-size:14px; line-height:2.1; color:#3F5169; }
  .pg-btn{ display:inline-flex; align-items:center; gap:14px; background:#0B3774; color:#fff; border-radius:999px; padding:15px 26px; font-size:13.5px; font-weight:700; white-space:nowrap; }
  .pg-btn.ghost{ background:#fff; color:#0B3774; border:1px solid rgba(11,55,116,.14); }
  .pg-qa summary{ display:flex; gap:16px; align-items:baseline; cursor:pointer; list-style:none; padding:22px 4px; font-size:15px; font-weight:700; line-height:1.8; color:#16202C; }
  .pg-qa summary::-webkit-details-marker{ display:none; }
  .pg-qa summary::after{ content:''; flex-shrink:0; margin-left:auto; width:9px; height:9px; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:translateY(-3px) rotate(45deg); transition:transform .28s cubic-bezier(.22,.61,.36,1); }
  .pg-qa[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
  .pg-qa summary > span:first-child{ font-family:Outfit,sans-serif; font-size:15px; font-weight:500; color:var(--accent); flex-shrink:0; }
  .pg-qa > div{ padding:0 4px 26px 35px; }
  .pg-qa > div p{ font-size:13.5px; line-height:2.2; color:#55657A; }
  @media (max-width:899px){
    /* インライン style で列を上書きしている箇所があるため !important */
    .pg-2col.wide, .pg-school-top{ grid-template-columns:1fr !important; gap:32px !important; }
  }
  @media (max-width:719px){
    .pg-2col{ grid-template-columns:1fr !important; gap:26px !important; }
    .pg-dl > div{ grid-template-columns:1fr; gap:2px; padding:16px 2px; }
    .pg-qa > div{ padding-left:4px; }
    .pg-qa summary{ font-size:14.5px; }
  }

  /* hover states（インライン style に勝たせるため !important） */
  .hv3:hover{ background:var(--accent) !important }
  .hv4:hover{ background:#fff !important }
  .hv5:hover{ background:#0B3774 !important; color:#fff !important; border-color:#0B3774 !important }
  .hv6:hover{ transform:translateY(-6px) !important; box-shadow:0 18px 42px rgba(11,55,116,.1) !important }
  .hv7:hover{ color:#0B3774 !important }
  .hv8:hover{ background:#EAF3FC !important }
  .hv9:hover{ color:#fff !important }