/*
 * ドラEVER AI面接コンテンツ 共通スタイル（チラシ風）
 * 目的: 求職者には「使ってみたい」、企業には「掲載したい」と感じてもらうため、
 *       折込チラシのような強い見出し・ベタ塗りの色面・バッジ・吹き出しで要点を一目で伝える。
 * 方針: 色つきの枠線（ボーダー）で囲むカードは使わない。区切りは色面・余白・影で表現する。
 * doraever.jp へ組み込む際は、このファイルをそのまま読み込めば同じ見た目になる。
 */
:root {
  --corp: #1E50A2;      /* ドラEVER コーポレートカラー */
  --corp-d: #16386E;
  --corp-dd: #0E2550;
  --corp-l: #EAF0F9;
  --corp-l2: #D6E2F3;
  --ink: #1B2A44;
  --gray: #5D6B84;
  --yellow: #FFD83A;    /* チラシの目立たせ色 */
  --yellow-l: #FFF3B8;
  --red: #E5352B;
  --orange: #E8871E;
  --white: #fff;
  --burst: polygon(50.0% 0.0%,55.4% 9.4%,62.9% 1.7%,65.7% 12.1%,75.0% 6.7%,75.0% 17.5%,85.4% 14.6%,82.5% 25.0%,93.3% 25.0%,87.9% 34.3%,98.3% 37.1%,90.6% 44.6%,100.0% 50.0%,90.6% 55.4%,98.3% 62.9%,87.9% 65.7%,93.3% 75.0%,82.5% 75.0%,85.4% 85.4%,75.0% 82.5%,75.0% 93.3%,65.7% 87.9%,62.9% 98.3%,55.4% 90.6%,50.0% 100.0%,44.6% 90.6%,37.1% 98.3%,34.3% 87.9%,25.0% 93.3%,25.0% 82.5%,14.6% 85.4%,17.5% 75.0%,6.7% 75.0%,12.1% 65.7%,1.7% 62.9%,9.4% 55.4%,0.0% 50.0%,9.4% 44.6%,1.7% 37.1%,12.1% 34.3%,6.7% 25.0%,17.5% 25.0%,14.6% 14.6%,25.0% 17.5%,25.0% 6.7%,34.3% 12.1%,37.1% 1.7%,44.6% 9.4%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* ---------- ヘッダー ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--white); box-shadow: 0 2px 10px rgba(14,37,80,.10); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 12px; }
.site-header img { height: 28px; width: auto; }
.header-nav { display: flex; gap: 6px; }
.header-nav a { text-decoration: none; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--corp-l); color: var(--corp); white-space: nowrap; }
.header-nav a.strong { background: var(--corp); color: var(--white); }

/* ---------- 共通パーツ ---------- */
.mark { background: linear-gradient(transparent 58%, var(--yellow) 58%); padding: 0 2px; }
.big-num { font-family: "Arial Black", "Hiragino Kaku Gothic StdN", sans-serif; font-weight: 900; }
/* 爆発フキダシ（ギザギザのバッジ） */
.burst { position: relative; display: grid; place-items: center; text-align: center; clip-path: var(--burst); background: var(--red); color: var(--white); font-weight: 900; line-height: 1.15; }
.burst > span { display: block; }
.burst.yellow { background: var(--yellow); color: var(--corp-dd); }
/* リボン見出し */
.ribbon { display: inline-block; position: relative; background: var(--yellow); color: var(--corp-dd); font-weight: 900; font-size: 15px; padding: 6px 22px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); letter-spacing: .04em; }
.ribbon.blue { background: var(--corp); color: var(--white); }
.sec { padding: 56px 0; position: relative; }
.sec-title { font-size: clamp(26px, 6.4vw, 44px); line-height: 1.3; font-weight: 900; margin: 12px 0 10px; letter-spacing: .01em; }
.sec-lead { font-size: 16px; color: var(--gray); margin: 0 0 24px; max-width: 720px; }
/* 吹き出し（ベタ塗り＋三角しっぽ） */
.bubble { position: relative; background: var(--white); color: var(--ink); border-radius: 18px; padding: 12px 16px; font-weight: 700; font-size: 15px; line-height: 1.5; box-shadow: 0 6px 18px rgba(14,37,80,.18); }
.bubble::after { content: ""; position: absolute; width: 18px; height: 18px; background: inherit; transform: rotate(45deg); }
.bubble.tail-r::after { right: -7px; top: 50%; margin-top: -9px; }
.bubble.tail-b::after { bottom: -7px; left: 40px; }
.bubble.tail-d::after { bottom: -7px; right: 56px; }  /* 下向き: 吹き出しを人物の頭上に置くとき用 */
.bubble.tail-l::after { left: -7px; top: 50%; margin-top: -9px; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 900; font-size: 16px; padding: 15px 26px; border-radius: 999px; min-height: 52px; text-align: center; line-height: 1.35; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.btn::after { content: "›"; font-size: 22px; line-height: 1; }
.btn-yellow { background: var(--yellow); color: var(--corp-dd); }
.btn-blue { background: var(--corp); color: var(--white); }
.btn-red { background: var(--red); color: var(--white); }
.btn-white { background: var(--white); color: var(--corp); }
.btn-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.note { font-size: 12px; color: var(--gray); line-height: 1.7; margin: 14px 0 0; }

/* ---------- フッター ---------- */
.site-footer { background: var(--corp-dd); color: rgba(255,255,255,.85); padding: 26px 0 30px; font-size: 12px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 10px; }
.site-footer img { height: 26px; width: auto; align-self: flex-start; }
.site-footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }