@charset "UTF-8";
/* ==========================================================================
   base.css — リセットと要素の基本スタイル
   サイト非依存レイヤー。HISPRO 固有の記述を含めないこと。
   ========================================================================== */

*,
*::before,
*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* sticky ヘッダー＋グローバルメニューの分だけアンカー位置をずらす */
  scroll-padding-top:calc(var(--header-height) + 56px);
}
/* 480px 以下ではグローバルメニューが2行に折り返して背が高くなるため、
   ずらす量も増やす。合わせないとジャンプリンクの着地点が
   メニューの下に潜り込み、飛んだ先の見出しが見えなくなる（site.css の同幅を参照） */
@media (max-width:480px){
  html{ scroll-padding-top:calc(var(--header-height) + 84px); }
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;          /* 和文の下限 */
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}

h1,h2,h3,h4,h5,h6,p,figure,dl,dd{ margin:0; }
h1,h2,h3,h4,h5,h6{ font-weight:600; }

ul,ol{ margin:0; padding:0; list-style:none; }

a{
  color:inherit;
  text-decoration:none;
}
a:hover{ color:var(--brand-green-dark); }

img{
  display:block;
  max-width:100%;
  height:auto;
}

table{ border-collapse:collapse; }

/* --- フォーカス表示は消さない ------------------------------------------- */
:focus-visible{
  outline:2px solid var(--brand-green-dark);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.on-dark-surface :focus-visible,
.hero :focus-visible,
.phead :focus-visible,
.gmenu :focus-visible,
footer :focus-visible{
  outline-color:var(--brand-green);
}

/* --- 本文へスキップ ------------------------------------------------------ */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--canvas);
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  padding:12px 18px;
  border:1px solid var(--hairline-strong);
  border-radius:0 0 var(--r-md) 0;
}
.skip-link:focus{
  left:0;
}

/* --- hidden 属性 ---------------------------------------------------------
   ブラウザ既定の [hidden]{display:none} は「作者スタイル」に負ける。
   .doc-row のように display を持つコンポーネントは、JS で hidden を付けても
   消えずに残ってしまう。ここは強制指定が要る数少ない正当な場面。
   個々のコンポーネントに .foo[hidden] を書いて回る方式は、
   新しいコンポーネントを足すたびに書き忘れるため採らない。            */
[hidden]{ display:none !important; }

/* --- スクリーンリーダー専用 ---------------------------------------------- */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --- 散文ブロック --------------------------------------------------------
   和文の可読性: 行間 1.8 / 段落幅 42em / 字下げは使わず段落間の余白で区切る */
.prose{
  max-width:var(--prose-width);
  font-size:16px;
  line-height:1.8;
  color:var(--charcoal);
}
.prose > * + *{ margin-top:1em; }

/* 散文の中のリスト。ul,ol の list-style:none（上の全体指定）を打ち消す */
.prose ul,
.prose ol{ margin-left:1.6em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-top:var(--sp-4); }

/* .prose の中のリンクは書き忘れても体裁が付くようにする。
   実際の指定は components.css の .link-inline と共通 */

/* --- 動きを減らす設定への対応 -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}