@neos21/neos-normalize/neos-normalize.scss

/*! Neo's Normalize http://neo.s21.xrea.com/ */


// ==================================================
// SCSS 変数定義
// ==================================================

$nn-grey-bg     : #f2f4f6 !default;
$nn-grey-border : #d2d4d6 !default;
$nn-green-bg    : #dfe !default;
$nn-green-border: #0da !default;
// サンセリフ (ゴシック体)
//  1. 英字   … Mac     iOS         … -apple-system, BlinkMacSystemFont,
//  2. 英字   … Mac     iOS         … "Helvetica Neue",
//  3. 英字   … Mac Win iOS Android … Helvetica, (= Arial on Windows, Roboto on Android)
//  4. 和英   … Mac Win             … YuGothic, "Yu Gothic", (With @font-face)
//  5. 和英   … Mac     iOS         … "Hiragino Sans", "Hiragino Kaku Gothic ProN",
//  6. 和英   …     Win             … Meiryo,
//  7. 全般   …                     … sans-serif,
//  8. 絵文字 … Mac     iOS         … "Apple Color Emoji",
//  9. 絵文字 …     Win             … "Segoe UI Emoji", "Segoe UI Symbol",
// 10. 絵文字 …             Android … "Noto Color Emoji"
$nn-sans-serif  : -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
// セリフ (明朝体)
//  1. 英字   … Mac Win iOS Android … Georgia, (= Noto Serif on Android)
//  2. 和英   … Mac Win             … YuMincho, "Yu Mincho",
//  3. 和英   … Mac     iOS         … "Hiragino Mincho ProN",
//  4. 和英   …     Win             … "HGS明朝E",
//  5. 全般   …                     … serif
$nn-serif       : Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "HGS明朝E", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
// モノスペース (等幅)
//  1. 和英   …     Win       [Mod] … MeiryoKe_Gothic,
//  2. 和英   … Mac                 … Osaka-mono,
//  3. 和英   …     Win             … "MS Gothic",
//  4. 英字   … Mac Win iOS Android … "Courier New",
//  5. 全般   …                     … monospace
$nn-monospace   : MeiryoKe_Gothic, Osaka-mono, "MS Gothic", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;


/* ==================================================
 * ページ全体
 * ================================================== */

/* Yu Gothic Medium : Windows Full Name → Windows PostScript Name */
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: bold;
}

/* 変数定義 */
:root {
  // SCSS 変数と同じ値にする
  --nn-sans-serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, YuGothic, "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --nn-serif: Georgia, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "HGS明朝E", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --nn-monospace: MeiryoKe_Gothic, Osaka-mono, "MS Gothic", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 全ての要素のボックスサイズの計算方法を border-box にする */
*,
::before,
::after {
  box-sizing: border-box;
}

/* ページ全体のスタイルを設定する */
html {
  font-family: $nn-sans-serif;
  /* 常に縦スクロールバーを表示する */
  overflow-y: scroll;
  cursor: default;
  /* Chrome で下線部の文字切れを調整する */
  text-decoration-skip-ink: none;
  /* iOS でフォントサイズの調整を避ける */
  -webkit-text-size-adjust: 100%;
  /* iOS で下線部の文字切れを調整する */
  -webkit-text-decoration-skip: objects;
  /* iOS で慣性スクロールを有効にする */
  -webkit-overflow-scrolling: touch;
}

/* ページの基準となるスタイルを設定する */
body {
  margin: 0;
  line-height: 1.7;
  overflow-wrap: break-word;
  /* IE で overflow-wrap が効かないため指定する */
  word-wrap: break-word;
}

/* IE でブロック要素として扱われない要素を設定しておく */
details, main {
  display: block;
}


/* ==================================================
 * マージン関連
 * ================================================== */

/* 上下のマージンを設定する */
h1, h2, h3, h4, h5, h6, p, hr, dl, dt, dd, ol, ul,
address, details, blockquote, figure, figcaption, fieldset, form, pre, summary, table {
  margin: 0 0 1rem;
}

/* 左マージンを追加する */
dd, li, blockquote, figure {
  margin-left: 2.5em;
}

/* 下マージンをなくす : 入れ子のリスト・子要素のマージンと親要素のパディングとの衝突回避 */
ol ol, ol ul,
ul ol, ul ul,
blockquote > :last-child,
fieldset > :last-child,
pre > :last-child {
  margin-bottom: 0;
}

/* リストの左パディングをなくす */
ol, ul {
  padding: 0;
}


/* ==================================================
 * フォント関連
 * ================================================== */

/* 見出しサイズを調整する */
h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.7em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.2em;
}

/* 見出し5・6は通常サイズ・等幅フォントの要素は IE でフォントサイズが小さくなるのを直す */
h5, h6,
code, kbd, samp, var {
  font-size: 1em;
}

/* 太字にする */
caption, dt, em, th {
  font-weight: bold;
}

/* 斜体にしない */
address, dfn, em, var {
  font-style: normal;
}

/* 等幅フォントにする */
pre, code, kbd, samp, var, textarea {
  font-family: $nn-monospace;
}

/* フォーム部品のフォントは親要素から継承させる */
button, input, optgroup, select {
  /* 要素の余白をなくす */
  margin: 0;
  font-family: inherit;
  font-size: inherit;
}

/* テキストエリアはフォントサイズのみ親要素から継承させる */
textarea {
  margin: 0;
  font-size: inherit;
}

/* 注釈のサイズを調整する */
small {
  font-size: .8em;
}

/* 下付き文字・上付き文字のサイズ・位置を調整する */
sub, sup {
  position: relative;
  font-size: .75em;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}


/* ==================================================
 * 個別スタイル設定
 * ================================================== */

/* 引用ブロック */
blockquote {
  border: 1px solid $nn-green-border;
  border-radius: 4px;
  padding: 1em;
  background: $nn-green-bg;
}

/* 等幅ブロック */
pre {
  border: 1px solid $nn-grey-border;
  border-radius: 4px;
  padding: 1em;
  background: $nn-grey-bg;
  overflow: auto;
  overflow-wrap: normal;
  /* IE・Edge 向け */
  word-wrap: normal;
  word-break: keep-all;
  white-space: pre;
}

/* テーブル */
table {
  border-collapse: collapse;
}

/* テーブルセル */
td, th {
  border: 1px solid $nn-grey-border;
  padding: .25em .5em;
}

/* テーブル見出し */
th {
  text-align: center;
  background: $nn-grey-bg;
}

/* 水平線 */
hr {
  border: 0;
  border-bottom: 1px solid $nn-grey-border;
}

/* フォームグループ */
fieldset {
  border: 1px solid $nn-grey-border;
  border-radius: 4px;
}

/* 図表 */
figure {
  border-left: .5em solid $nn-grey-border;
  padding-left: 1em;
}

/* 要約 */
summary {
  cursor: pointer;
}

/* 略語・定義 */
abbr[title], dfn[title] {
  /* IE・Edge 向け */
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
}

/* コード */
:not(pre) > code,
:not(pre) > samp,
:not(pre) > kbd,
:not(pre) > var {
  margin: 0 .25em;
  border: 1px solid $nn-grey-border;
  border-radius: 4px;
  padding: .1em .25em;
  background: $nn-grey-bg;
}

/* 引用 */
q {
  quotes: "“" "”" "‘" "’";
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

/* 隣接するテキストを上揃えにする */
button, input, select, textarea {
  vertical-align: top;
}

/* チェックボックスとラジオボタンは隣接するテキストを垂直中央揃えにする */
[type="checkbox"], [type="radio"] {
  vertical-align: middle;
}

/* Mac でのボタン類の表示仕様を揃える */
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}