@charset "UTF-8";

/* ============================================================
   令和8年度 スタートアップ等を活用した価格転嫁・賃上げ支援事業
   サイト公開に関するお知らせ（ソーリーページ）
   ※カラー・タイポグラフィ・ボタン形状は同事業LPのトークンを継承
   ============================================================ */

:root{
  --bg:#fff;
  --bg-card:#fff;
  --ink:#17324e;
  --brand:#1d6fbf;
  --cta:#f0821e;
  --cta-ink:#fff;
  --cta-shadow:0 6px 16px rgba(240,130,30,.32);
  --line:#d4e2ef;
  --radius-s:12px; --radius-l:18px; --radius-btn:40px;
  --font-body:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic Medium','Yu Gothic',Meiryo,sans-serif;
  --header-bg:rgba(255,255,255,.92);
  --hero-bg:linear-gradient(115deg,#e8f3fd 0%,#f4faff 55%,#dff0fc 100%);
  --hero-ink:#14355c;
  --card-shadow:0 4px 16px rgba(20,60,110,.07);
  --contact-blue:#1771a6;
  --footer-bg:#14355c;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.8;font-size:15px;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
/* フォーカスリングは、下地の色に応じてコントラストが確保できる色に切り替える */
a:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.btn:focus-visible{outline-color:#14355c}
.contact-link:focus-visible,.tel-num:focus-visible{outline-color:#fff}
.container{max-width:1120px;margin:0 auto;padding:0 28px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sp{display:none}
.wide{display:none}
@media(max-width:860px){
  .container{padding:0 20px}
  .sp{display:inline}
}
/* .wide＝ボタンが3列になる幅でのみ有効な改行 */
@media(min-width:1080px){ .wide{display:inline} }
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--header-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);height:68px;display:flex;align-items:center}
.header-inner{width:100%;padding:0 40px;display:flex;flex-direction:column;gap:3px}
/* 縦フレックスの子なので、指定しないとロゴのクリック領域が画面幅いっぱいに広がる */
.header-logo{display:block;width:fit-content}
.header-logo img{height:24px;width:auto}
.header-jigyo{font-size:16px;font-weight:900;color:var(--ink);line-height:1.3;white-space:nowrap}
.header-jigyo span{display:inline-block}
main{padding-top:68px}
@media(max-width:860px){
  .site-header{position:static;height:auto;padding:10px 0}
  main{padding-top:0}
  .header-inner{padding:0 20px;gap:5px}
  .header-logo img{height:20px}
  .header-jigyo{font-size:13px;white-space:normal}
}

/* ---------- 淡いブルーの面（heroとお知らせを1つの面としてつなぐ） ---------- */
.hero-field{background:var(--hero-bg)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:72px 0 0}
.hero-arrows{position:absolute;right:-40px;bottom:-140px;width:92%;max-width:none;z-index:0;opacity:.85;pointer-events:none}
/* min-height は .hero-visual img の max-height に依存（400 − .hero上padding72 ＋ 上端の余白16） */
.hero-inner{position:relative;z-index:1;min-height:344px}
.hero-left{position:relative;z-index:2;max-width:660px;padding-bottom:56px}
.nendo{font-size:14px;font-weight:700;color:var(--brand);letter-spacing:.08em;margin-bottom:2px}
.jigyo{font-size:clamp(19px,2.4vw,28px);font-weight:900;line-height:1.5;color:var(--hero-ink)}
.notice-head{font-size:clamp(27px,4.4vw,48px);font-weight:900;line-height:1.4;letter-spacing:.02em;color:var(--hero-ink);margin-top:22px}
.hero-visual{position:absolute;right:16px;bottom:0;z-index:1}
.hero-visual img{width:auto;max-height:400px}
@media(max-width:860px){
  .hero{padding:36px 0 0}
  .hero-arrows{width:160%;right:-14%;bottom:-60px}
  .hero-inner{min-height:0}
  .hero-left{max-width:none;padding-bottom:28px}
  .notice-head{margin-top:16px}
  .hero-visual{position:static;display:flex;justify-content:flex-end;margin-top:-34px;margin-right:-6px}
  .hero-visual img{max-height:340px}
}

/* ---------- お知らせ本文 ---------- */
.notice{padding:0 0 84px}
.notice-card{background:var(--bg-card);border-radius:var(--radius-l);box-shadow:var(--card-shadow);padding:56px 64px}
.notice-body{max-width:760px;margin:0 auto}
/* word-break:auto-phrase は文節単位で改行する（非対応ブラウザは通常の禁則処理にフォールバック） */
.notice-body p{font-size:clamp(15px,1.5vw,17px);line-height:2.1;word-break:auto-phrase}
.notice-body p + p{margin-top:14px}
@media(max-width:860px){
  .notice{padding:28px 0 56px}
  .notice-card{padding:32px 20px;border-radius:var(--radius-s)}
  .notice-body p{line-height:2}
  .notice-body p + p{margin-top:12px}
}

/* ---------- ボタン群 ---------- */
/* minmax(0,1fr)：1fr のままだとラベルの min-content 幅にグリッドが押し広げられる */
.notice-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.btn{display:flex;align-items:center;gap:13px;text-decoration:none;padding:15px 26px;border-radius:var(--radius-btn);transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-icon{width:25px;height:25px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-text{display:flex;flex-direction:column}
.btn-label{font-size:15px;font-weight:900;line-height:1.4;word-break:auto-phrase}
.btn-note{font-size:12px;font-weight:700;line-height:1.5;margin-top:3px;word-break:auto-phrase}
.btn-arrow{font-size:10px;margin-left:auto;transition:transform .2s ease}
.btn:hover .btn-arrow{transform:translateX(3px)}
.btn-blue{background:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(29,111,191,.3)}
.btn-primary{background:var(--cta);color:var(--cta-ink);box-shadow:var(--cta-shadow)}
/* 3列は、補足表記（PDF／容量・別タブ）が1行に収まる幅から */
@media(min-width:1080px){
  .notice-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px;padding-top:36px}
  .btn{justify-content:center;padding:16px 24px}
  .btn-arrow{margin-left:0}
}

/* ---------- お問い合わせ帯 ---------- */
.sec-contact{background:var(--contact-blue);color:#fff;padding:72px 0 74px}
.contact-inner{text-align:center}
.contact-head{font-size:clamp(18px,2.6vw,30px);font-weight:700;letter-spacing:.06em;line-height:1.5;word-break:auto-phrase}
.contact-links{display:flex;justify-content:center;margin-top:34px}
.contact-link{position:relative;display:flex;align-items:center;justify-content:center;gap:13px;width:100%;max-width:520px;background:#fff;color:var(--contact-blue);border-radius:var(--radius-s);padding:29px 62px;text-decoration:none;font-size:17px;font-weight:900;box-shadow:0 4px 14px rgba(6,45,75,.18);transition:transform .2s ease,box-shadow .2s ease}
.contact-link:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(6,45,75,.24)}
.contact-link .ci{width:30px;height:30px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-link .arw{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.contact-link:hover .arw{transform:translate(3px,-50%)}
.contact-office{margin-top:32px;font-size:13.5px;font-weight:700;letter-spacing:.04em;word-break:auto-phrase}
.contact-tel{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 22px;margin-top:18px}
.tel-label{background:#fff;color:var(--contact-blue);border-radius:var(--radius-btn);padding:11px 26px;font-size:13.5px;font-weight:900;white-space:nowrap}
.tel-num{color:#fff;text-decoration:none;font-size:clamp(28px,4.2vw,34px);font-weight:900;letter-spacing:.02em;line-height:1.2}
.tel-hours{text-align:left;line-height:1.6}
.tel-hours .h-main{display:block;font-size:14px;font-weight:700}
.tel-hours .h-sub{display:block;font-size:11.5px;opacity:.9}
@media(max-width:860px){
  .sec-contact{padding:52px 0 56px}
  .contact-head{font-size:17px;letter-spacing:.02em}
  .contact-links{margin-top:26px}
  .contact-link{padding:18px 50px 18px 22px;font-size:15px}
  .contact-tel{flex-direction:column;gap:12px}
  .tel-hours{text-align:center}
}

/* ---------- footer ---------- */
.site-footer{background:var(--footer-bg);color:#fff;padding:56px 0 0}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:18px;padding-bottom:46px;text-align:center}
.footer-logo{background:#fff;padding:14px 22px;border-radius:8px}
.footer-logo img{width:100%;max-width:300px;height:auto}
.footer-name{font-size:16px;font-weight:700;line-height:1.9;opacity:.92}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding:20px 0;text-align:center}
.copy{font-size:12px;opacity:.55}
@media(max-width:860px){
  .site-footer{padding-top:44px}
  .footer-inner{gap:16px;padding-bottom:36px}
  .footer-logo{padding:12px 16px}
  .footer-name{font-size:14.5px}
}

/* ---------- print ---------- */
/* 背景色を印刷しない既定のままだと、白文字の連絡先が白紙に消えるため色を強制する */
@media print{
  .site-header{position:static}
  main{padding-top:0}
  .sec-contact,.site-footer,.btn,.tel-label{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hero-arrows,.hero-visual{display:none}
  .notice-card{box-shadow:none;border:1px solid var(--line)}
}