sw-Br

/src/assets/css/namespace/sitewide/_Br.scss

<br>タグに指定をして、改行をブレイクポイントごとにコントロールします。

常に改行
されます

ブレイクポイント（md）以降に改行
されます。

ブレイクポイント（md）以降は改行
されません。

.l-Wrapper
  p.sw-Text 常に改行
    br
    | されます
  p.sw-Text ブレイクポイント（`md`）以降に改行
    br.sw-BrShowMd
    | されます。
  p.sw-Text ブレイクポイント（`md`）以降は改行
    br.sw-HideMd
    | されません。

sw-Button

/src/assets/css/namespace/sitewide/_Button.scss

ボタンのデフォルトスタイルです。

aタグボタン aタグボタン

.l-Wrapper
  a.sw-Button(href="#") aタグボタン
  a.sw-Button.-disabled(href="#" tabindex="-1") aタグボタン
  button.sw-Button#foo(type="button") buttonタグボタン
  button.sw-Button(disabled type="button") buttonタグボタン
  input.sw-Button(type="button" value="inputボタン")
  input.sw-Button(type="button" value="inputボタン" disabled)

.-fullを追加すると横幅100%になります。

デフォルト横幅100%

.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button.-full(href="#") 横幅100%

.-autoを追加すると横幅はなりゆきになります。

デフォルト横幅なりゆき

.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button.-auto(href="#") 横幅なりゆき

.sw-Button_Moreを追加すると矢印が付きます。

デフォルト矢印付きボタン

.l-Wrapper
  a.sw-Button(href="#") デフォルト
  a.sw-Button(href="#")
    | 矢印付きボタン
    svg.sw-Button_More(role="img")
      use(xlink:href="/assets/svg/sprite.svg#right-arrow1")

sw-Caption

/src/assets/css/namespace/sitewide/_Caption.scss

画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。

ベーシックなスタイルです。

.l-Wrapper
  figure.sw-Caption
    img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
    figcaption.sw-Caption_Text 画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。

sw-Caption.-center

/src/assets/css/namespace/sitewide/_Caption.scss

.-centerでキャプションをセンタリングします。

.l-Wrapper
  figure.sw-Caption.-center
    img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
    figcaption.sw-Caption_Text 画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。

sw-Caption_Text.-center

/src/assets/css/namespace/sitewide/_Caption.scss

.-centerでキャプションをセンタリングします。

.l-Wrapper
  figure.sw-Caption
    img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
    figcaption.sw-Caption_Text.-center 画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。

sw-Caption_Text.-right

/src/assets/css/namespace/sitewide/_Caption.scss

.-rightでキャプションを右揃えにします。

.l-Wrapper
  figure.sw-Caption
    img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
    figcaption.sw-Caption_Text.-right画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。

sw-Delimiter

/src/assets/css/namespace/sitewide/_Delimiter.scss

途中で改行をさせたくないフレーズやキーワードに指定します。囲まれた範囲（Delimiter）がまとまって改行されます。

テキストは基本的にスペースや役物を基準に改行されますが、この部分はまとめて改行されます。ここは通常のテキストです。

.l-Wrapper
  p.sw-Text テキストは基本的にスペースや役物を基準に改行されますが、
    span.sw-Delimiter この部分はまとめて改行されます。
    | ここは通常のテキストです。

sw-Dialog

/src/assets/css/namespace/sitewide/_Dialog.scss

A11yに対応したダイアログ（モーダル）です。複数のダイアログを使う場合はdata-a11y-dialog-show="sw-Dialog1"とid="sw-Dialog1"の値をsw-Dialog2やsw-Dialog3のように連番で指定してください。最大で10個まで対応しています。メインコンテンツに#mainを指定、ダイアログはそのID要素と兄弟関係になるようにしてください。幅と高さはブレイクポイントごとに固定されています。

.l-Wrapper#main
  button.sw-Dialog_Link(data-a11y-dialog-show="sw-Dialog1") ダイアログ1を開く
  br
  button.sw-Dialog_Link(data-a11y-dialog-show="sw-Dialog2") ダイアログ2を開く

.sw-Dialog_Dialog#sw-Dialog1
  .sw-Dialog_Overlay(tabindex="-1" data-a11y-dialog-hide)
  dialog.sw-Dialog_Content(aria-labelledby="dialog-title1" aria-describedby1="dialogDescription")
    .sw-Dialog_Inner
      .sw-Dialog_Head
        button.sw-Dialog_Close(type="button" data-a11y-dialog-hide aria-label="この画面を閉じる")
          svg.sw-Dialog_CloseIcon(role="img")
            use(xlink:href="/assets/svg/sprite.svg#close1")
      .sw-Dialog_Body
        h3#dialog-title1 ダイアログ1のタイトル
        p#dialogDescription1 ダイアログ1の概要
        p `aria-labelledby`と`aria-describedby`で、タイアログのタイトルと概要を紐づけています。

.sw-Dialog_Dialog#sw-Dialog2
  .sw-Dialog_Overlay(tabindex="-1" data-a11y-dialog-hide)
  dialog.sw-Dialog_Content(aria-labelledby="dialog-title2" aria-describedby="dialogDescription2")
    .sw-Dialog_Inner
      .sw-Dialog_Head
        button.sw-Dialog_Close(type="button" data-a11y-dialog-hide aria-label="この画面を閉じる")
          svg.sw-Dialog_CloseIcon(role="img")
            use(xlink:href="/assets/svg/sprite.svg#close1")
      .sw-Dialog_Body
        h3#dialog-title2 ダイアログ2のタイトル
        p#dialogDescription2 ダイアログ2の概要
        p とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。とても長いコンテンツの例です。

sw-Divider

/src/assets/css/namespace/sitewide/_Divider.scss

<hr>のような区切り記号を使って、分割・グルーピングします。

テキストです。

.l-Wrapper
  p.sw-Text テキストです。
  hr.sw-Divider
  p.sw-Text テキストです。

sw-FormCheckbox

/src/assets/css/namespace/sitewide/_FormCheckbox.scss

type="checkbox"のデフォルトスタイルです。

チェックボックスチェックボックス1 チェックボックス2チェックボックス2チェックボックス2

fieldset.l-Wrapper
  legend.sw-FormLabel チェックボックス

  input.sw-FormCheckbox(type="checkbox" id="checkbox1" name="checkbox1" value="0")
  label(for="checkbox1")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス1

  input.sw-FormCheckbox(type="checkbox" id="checkbox2" name="checkbox1" value="1")
  label(for="checkbox2")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス2チェックボックス2チェックボックス2

必須項目のエラー表示。

名前（必須） チェックボックス3 チェックボックス4

いずれかを選択してください

fieldset.l-Wrapper
  legend.sw-FormLabel
    | 名前
    em.sw-FormLabel_RequireA （必須）

  input.sw-FormCheckbox.-error(type="checkbox" id="checkbox3" name="checkbox1" value="0")
  label(for="checkbox3")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス3

  input.sw-FormCheckbox.-error(type="checkbox" id="checkbox4" name="checkbox1" value="1")
  label(for="checkbox4")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス4

  p.sw-FormHelp
    strong いずれかを選択してください

非活性状態。

チェックボックスチェックボックス5

fieldset.l-Wrapper
  legend.sw-FormLabel チェックボックス

  input.sw-FormCheckbox(type="checkbox" id="checkbox5" name="checkbox5" value="0" disabled)
  label(for="checkbox5")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#checkbox1")
    span チェックボックス5

sw-FormHelp

/src/assets/css/namespace/sitewide/_FormHelp.scss

エラーメッセージです。

名前

名前を入力してください

.l-Wrapper
  label.sw-FormLabel(for="form-help1") 名前
  input.sw-FormInput.-error(id="form-help1" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")
  p.sw-FormHelp
    strong 名前を入力してください

sw-FormInput

/src/assets/css/namespace/sitewide/_FormInput.scss

<input>タグのデフォルトスタイルです。

名前

.l-Wrapper
  label.sw-FormLabel(for="input1") 名前
  input.sw-FormInput(id="input1" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

typeとautocompleteの使用例。

.l-Wrapper
  input.sw-FormInput(id="input2" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")
  input.sw-FormInput(id="input3" type="text" name="nameKana" autocomplete="name" placeholder="例）ヤマダ タロウ")
  input.sw-FormInput(id="input4" type="email" name="email" autocomplete="email" placeholder="例）example@gmail.com")
  input.sw-FormInput(id="input5" type="tel" name="tel" autocomplete="tel" placeholder="例）0120-117-117")
  input.sw-FormInput(id="input6" type="number" name="postalCode" autocomplete="postal-code" placeholder="例）105-0011")

必須項目のエラー表示。

名前（必須）

名前を入力してください

.l-Wrapper
  label.sw-FormLabel(for="input7")
    | 名前
    em.sw-FormLabel_RequireA （必須）
  input.sw-FormInput.-error(id="input7" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")
  p.sw-FormHelp
    strong 名前を入力してください

非活性状態。

名前

.l-Wrapper
  label.sw-FormLabel(for="input8") 名前
  input.sw-FormInput(id="input8" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎" disabled)

sw-FormLabel

/src/assets/css/namespace/sitewide/_FormLabel.scss

フォーム要素のラベルです。labelとlegendのどちらでも使用可能です。レイアウトは別のラップ要素で指定してください。

名前

.l-Wrapper
  label.sw-FormLabel(for="form-label1") 名前
  input.sw-FormInput(id="form-label1" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

必須項目1。

名前（必須）

.l-Wrapper
  label.sw-FormLabel(for="form-label2")
    | 名前
    em.sw-FormLabel_RequireA （必須）
  input.sw-FormInput(id="form-label2" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

必須項目2。

名前必須

.l-Wrapper
  label.sw-FormLabel(for="form-label3")
    | 名前
    em.sw-FormLabel_RequireB 必須
  input.sw-FormInput(id="form-label3" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

注意事項。

名前必須入力時の注意事項

.l-Wrapper
  label.sw-FormLabel(for="form-label4")
    | 名前
    em.sw-FormLabel_RequireB 必須
    small.sw-FormLabel_Note 入力時の注意事項
  input.sw-FormInput(id="form-label4" type="text" name="name" autocomplete="name" placeholder="例）山田 太郎")

sw-FormRadio

/src/assets/css/namespace/sitewide/_FormRadio.scss

type="radio"のデフォルトスタイルです。

ラジオボタンラジオボタン1 ラジオボタン2ラジオボタン2ラジオボタン2

fieldset.l-Wrapper
  legend.sw-FormLabel ラジオボタン

  input.sw-FormRadio(type="radio" id="radio1" name="radio1" value="0" checked)
  label(for="radio1")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン1

  input.sw-FormRadio(type="radio" id="radio2" name="radio1" value="1")
  label(for="radio2")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン2ラジオボタン2ラジオボタン2

必須項目のエラー表示。

ラジオボタン（必須） ラジオボタン3 ラジオボタン4

いずれかを選択してください

fieldset.l-Wrapper
  legend.sw-FormLabel
    | ラジオボタン
    em.sw-FormLabel_RequireA （必須）

  input.sw-FormRadio.-error(type="radio" id="radio3" name="radio2" value="0")
  label(for="radio3")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン3

  input.sw-FormRadio.-error(type="radio" id="radio4" name="radio2" value="1")
  label(for="radio4")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン4

  p.sw-FormHelp
    strong いずれかを選択してください

非活性状態。

ラジオボタンラジオボタン5

fieldset.l-Wrapper
  legend.sw-FormLabel ラジオボタン

  input.sw-FormRadio(disabled type="radio" id="radio5" name="radio3" value="0")
  label(for="radio5")
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#radio1")
    span ラジオボタン5

sw-FormSelect

/src/assets/css/namespace/sitewide/_FormSelect.scss

<select>タグのデフォルトスタイルです。

都道府県

.l-Wrapper
  label.sw-FormLabel(for="prefecture1")
    | 都道府県
  .sw-FormSelect
    select(name="prefecture1")
      option(value="0") 選択してください
      option(value="1") 北海道
      option(value="2") 秋田
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#select1")

必須項目のエラー表示。

都道府県（必須）

都道府県を選択してください

.l-Wrapper
  label.sw-FormLabel(for="prefecture2")
    | 都道府県
    em.sw-FormLabel_RequireA （必須）
  .sw-FormSelect.-error
    select(name="prefecture2")
      option(value="0") 選択してください
      option(value="1") 北海道
      option(value="2") 秋田
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#select1")
  p.sw-FormHelp
    strong 都道府県を選択してください

非活性状態。

都道府県

.l-Wrapper
  label.sw-FormLabel(for="prefecture3")
    | 都道府県
  .sw-FormSelect.is-disabled
    select(name="prefecture3" disabled)
      option(value="0") 選択してください
      option(value="1") 北海道
      option(value="2") 秋田
    svg(role="img")
      use(xlink:href="/assets/svg/sprite.svg#select1")

sw-FormTextarea

/src/assets/css/namespace/sitewide/_FormTextarea.scss

<textarea>のデフォルトスタイルです。

お問い合わせ内容

.l-Wrapper
  label.sw-FormLabel(for="textarea1") お問い合わせ内容
  textarea.sw-FormTextarea(id="textarea1" name="textarea1" placeholder="例）お問い合わせ内容")

高さを出したバリエーション。

お問い合わせ内容

.l-Wrapper
  label.sw-FormLabel(for="textarea2") お問い合わせ内容
  textarea.sw-FormTextarea.-large(id="textarea2" name="textarea2" placeholder="例）お問い合わせ内容")

必須項目のエラー表示。

お問い合わせ内容（必須）

お問い合わせ内容を入力してください

.l-Wrapper
  label.sw-FormLabel(for="textarea3")
    | お問い合わせ内容
    em.sw-FormLabel_RequireA （必須）
  textarea.sw-FormTextarea.-error(id="textarea3" name="textarea3" placeholder="例）お問い合わせ内容")
  p.sw-FormHelp
    strong お問い合わせ内容を入力してください

非活性状態。

お問い合わせ内容

.l-Wrapper
  label.sw-FormLabel(for="textarea4") お問い合わせ内容
  textarea.sw-FormTextarea(id="textarea4" name="textarea4" placeholder="例）お問い合わせ内容" disabled)

sw-Heading2

/src/assets/css/namespace/sitewide/_Heading2.scss

<h2>で使用する見出しです。

見出し2

.l-Wrapper
  h2.sw-Heading2 見出し2

sw-Heading3

/src/assets/css/namespace/sitewide/_Heading3.scss

<h3>で使用する見出しです。

見出し3

.l-Wrapper
  h3.sw-Heading3 見出し3

sw-Heading4

/src/assets/css/namespace/sitewide/_Heading4.scss

<h4>で使用する見出しです。

見出し4

.l-Wrapper
  h4.sw-Heading4 見出し4

sw-Heading5

/src/assets/css/namespace/sitewide/_Heading5.scss

<h5>で使用する見出しです。

見出し5

.l-Wrapper
  h5.sw-Heading5 見出し5

sw-ImageCenter

/src/assets/css/namespace/sitewide/_ImageCenter.scss

画像をセンタリングします。

.l-Wrapper
  p.sw-ImageCenter
    img(src="https://placehold.jp/300x200.png" alt="")

sw-Label

/src/assets/css/namespace/sitewide/_Label.scss

インラインで表示するラベルコンポーネントです。

spanタグのラベルです。 labelタグのラベルです。aタグのラベルです。

.l-Wrapper
  span.sw-Label spanタグのラベルです。
  label.sw-Label labelタグのラベルです。
  a.sw-Label(href="#") aタグのラベルです。

sw-Lead

/src/assets/css/namespace/sitewide/_Lead.scss

リード文（コンテンツの冒頭に登場するコンテンツを簡潔に表した文章）のスタイルです。他の文章と区別するためだけに利用し、<strong>の重要性や深刻性、<em>の強調（アクセント）、<h2>のような見出しとしての意味はありません。

◯◯◯は××に優れており、今まで多くのお客さまにご愛用いただいているロングセラー商品です。

△△の強みを生かした□□を使用しており、発売以来、日々改良を重ねております。

.l-Wrapper
  p.sw-Lead
    b ◯◯◯は××に優れており、今まで多くのお客さまにご愛用いただいているロングセラー商品です。
  p.sw-Text △△の強みを生かした□□を使用しており、発売以来、日々改良を重ねております。

sw-Link

/src/assets/css/namespace/sitewide/_Link.scss

テキストリンクのデフォルトスタイルです。

テキストリンクです。

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

sw-LinkDownload

/src/assets/css/namespace/sitewide/_LinkDownload.scss

ファイルをダウンロードするためのリンクであることを示す場合に使います。

テキストリンクです。

ファイルをダウンロードする

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

  p.sw-Text
    a.sw-LinkDownload(href="#")
      | ファイルをダウンロードする
      svg.sw-LinkDownload_Icon(role="img")
        use(xlink:href="/assets/svg/sprite.svg#download1")

sw-LinkExternal

/src/assets/css/namespace/sitewide/_LinkExternal.scss

外部リンクであることを示す場合に使います。

テキストリンクです。

外部リンクを開く

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

  p.sw-Text
    a.sw-LinkExternal(href="#")
      | 外部リンクを開く
      svg.sw-LinkExternal_Icon(role="img")
        use(xlink:href="/assets/svg/sprite.svg#external1")

sw-LinkMore

/src/assets/css/namespace/sitewide/_LinkMore.scss

クリックを促すようなテキストリンクに使います。

テキストリンクです。

詳しく見る

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

  p.sw-Text
    a.sw-LinkMore(href="#")
      | 詳しく見る
      svg.sw-LinkMore_Icon(role="img")
        use(xlink:href="/assets/svg/sprite.svg#right-arrow1")

sw-LinkNote

/src/assets/css/namespace/sitewide/_LinkNote.scss

注釈へのリンクです。<sup>タグの子要素として指定します。

○○¹を使っています。

.l-Wrapper
  p.sw-Text ○○
    sup.sw-Sup
      a.sw-LinkNote(href="#") 1
    | を使っています。

  p.sw-Text(lang="en") ○○
    sup.sw-Sup
      a.sw-LinkNote(href="#") 1
    | を使っています。

sw-LinkPdf

/src/assets/css/namespace/sitewide/_LinkPdf.scss

リンク先がPDFであることを示す場合に使います。

テキストリンクです。

PDFをダウンロードする

.l-Wrapper
  p.sw-Text
    a.sw-Link(href="#") テキストリンクです。

  p.sw-Text
    a.sw-LinkPdf(href="#")
      | PDFをダウンロードする
      svg.sw-LinkPdf_Icon(role="img")
        use(xlink:href="/assets/svg/sprite.svg#pdf1")

sw-ListBracketOrder

/src/assets/css/namespace/sitewide/_ListBracketOrder.scss

括弧で囲んだ順序リストです。

リストです。リストです。リストです。リストです。
リストです

.l-Wrapper
  ol.sw-ListBracketOrder
    li リストです。リストです。リストです。リストです。
    li リストです

リストを2から始める場合はstart属性をstart="2"のように指定します。CSSで表示する順序も属性値によって変更されます。

リストです。リストです。リストです。リストです。
リストです

.l-Wrapper
  ol.sw-ListBracketOrder(start="2")
    li リストです。リストです。リストです。リストです。
    li リストです

sw-ListNote

/src/assets/css/namespace/sitewide/_ListNote.scss

注釈用のリストです。米印やアスタリスクが表示されます。

1つ目の注釈です1つ目の注釈です1つ目の注釈です1つ目の注釈です1つ目の注釈です
2つ目の注釈です

This is the first comment. This is the first comment. This is the first comment.
This is the second comment.

.l-Wrapper
  ul.sw-ListNote
    li 1つ目の注釈です1つ目の注釈です1つ目の注釈です1つ目の注釈です1つ目の注釈です
    li 2つ目の注釈です

  div(lang="en")
    ul.sw-ListNote
      li This is the first comment. This is the first comment. This is the first comment.
      li This is the second comment.

sw-ListNoteOrder

/src/assets/css/namespace/sitewide/_ListNoteOrder.scss

注釈用のリストです。米印やアスタリスクが表示されます。

注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
注釈です。

This is an annotation. This is an annotation. This is an annotation.
This is an annotation.

.l-Wrapper
  ol.sw-ListNoteOrder
    li 注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
    li 注釈です。

  div(lang="en")
    ul.sw-ListNoteOrder
      li This is an annotation. This is an annotation. This is an annotation.
      li This is an annotation.

リストを2から始める場合はstart属性をstart="2"のように指定します。CSSで表示する順序も属性値によって変更されます。

注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
注釈です。

This is an annotation. This is an annotation. This is an annotation.
This is an annotation.

.l-Wrapper
  ol.sw-ListNoteOrder(start="2")
    li 注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
    li 注釈です。

  div(lang="en")
    ol.sw-ListNoteOrder(start="2")
      li This is an annotation. This is an annotation. This is an annotation.
      li This is an annotation.

sw-ListOrder

/src/assets/css/namespace/sitewide/_ListOrder.scss

入れ子に対応した順序リストです。

入れ子に対応した順序リストです。入れ子に対応した順序リストです。
入れ子に対応した順序リストです。
1. 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
2. 入れ子に対応した順序リストです。

.l-Wrapper
  ol.sw-ListOrder
    li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
    li 入れ子に対応した順序リストです。
      ol.sw-ListOrder_Child
        li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
        li 入れ子に対応した順序リストです。

リストを2から始める場合はstart属性をstart="2"のように指定します。CSSで表示する順序も属性値によって変更されます。

入れ子に対応した順序リストです。入れ子に対応した順序リストです。
入れ子に対応した順序リストです。
1. 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
2. 入れ子に対応した順序リストです。

.l-Wrapper
  ol.sw-ListOrder(start="2")
    li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
    li 入れ子に対応した順序リストです。
      ol.sw-ListOrder_Child
        li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
        li 入れ子に対応した順序リストです。

sw-ListUnorder

/src/assets/css/namespace/sitewide/_ListUnorder.scss

順序をもたない並列なリストです。

リストです。
リストです。
- リストです。
- リストです。

.l-Wrapper
  ul.sw-ListUnorder
    li リストです。
    li リストです。
      ul.sw-ListUnorder_Child
        li リストです。
        li リストです。

sw-Map

/src/assets/css/namespace/sitewide/_Map.scss

Google Mapsをレスポンシブ対応させます。デフォルトで16:9で表示されます。

マップにキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Map
    .sw-Map_Map.
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25933.98363493959!2d139.745433!3d35.658581000000005!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1505663238967" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    p.sw-Map_Text マップにキャプション（短い説明文）をつけます。

キャプションを中央揃えにします。

マップにキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Map
    .sw-Map_Map.
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25933.98363493959!2d139.745433!3d35.658581000000005!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1505663238967" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    p.sw-Map_Text.-center マップにキャプション（短い説明文）をつけます。

キャプションを右揃えにします。

マップにキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Map
    .sw-Map_Map.
      <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25933.98363493959!2d139.745433!3d35.658581000000005!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1505663238967" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    p.sw-Map_Text.-right マップにキャプション（短い説明文）をつけます。

sw-ObjectFit

/src/assets/css/namespace/sitewide/_ObjectFit.scss

置換要素（img、video、picture、srcsetタグなど）を親要素のサイズに応じてトリミングや拡大縮小をして表示します。

ポリフィルは「object-fit-polyfill」を使用しています。

object-positionはvariantで変更できます（デフォルトは50% 50%）。 Usageにもある通り、data-object-position="center top"のようにカスタムデータ属性でも設定が必要です。指定順はクラス名とカスタムデータ属性値ともにX軸 Y軸です。

クラス名	X軸	Y軸
`.-leftTop`	left	top
`.-centerTop`	center	top
`.-rightTop`	right	top
`.-leftCenter`	left	center
`.-centerCenter`	center	center
`.-rightCenter`	right	center
`.-leftBottom`	left	bottom
`.-centerBottom`	center	bottom
`.-rightBottom`	right	bottom

.l-Flex
  .l-Flex_Item(class="-1/2" style="height: 200px;")
    img.sw-ObjectFit(src="https://unsplash.it/800/600/" alt data-object-fit="cover")
  .l-Flex_Item(class="-1/2" style="height: 200px;")
    img.sw-ObjectFit(src="https://unsplash.it/400/600/" alt data-object-fit="contain")
  .l-Flex_Item(class="-1/2" style="height: 200px;")
    img.sw-ObjectFit.-centerTop(src="https://unsplash.it/600/400/" alt data-object-fit="none" data-object-position="center top")
  .l-Flex_Item(class="-1/2" style="height: 200px;")
    img.sw-ObjectFit(src="https://unsplash.it/600/200/" alt data-object-fit="scale-down")

sw-Sup

/src/assets/css/namespace/sitewide/_Sup.scss

登録商標（アールマーク）や著作権（マルシーマーク）、注釈リンク（※1）などに使う上付き文字です。

登録商標^®です。

注釈^※1です。

.l-Wrapper
  p.sw-Text 登録商標
    sup.sw-Sup ®
    | です。
  p.sw-Text 注釈
    sup.sw-Sup: a(href="#") ※1
    | です。

sw-Table

/src/assets/css/namespace/sitewide/_Table.scss

ベーシックなテーブルです。

ヘッダー・ボディ・フッターといった、行の役割が分かっている場合は<thead>、<tbody>、<tfoot>タグを使って意味を明確にします。
<th>タグは見出しセルになりますが、その見出しセルがどの行や列に対応しているかを明確にするためにscope属性を指定します。scope="row"で同じ行の見出しであることを示し、scope="col"で同じ列の見出しであることを示します。
colspan属性とrowspan属性で複数のセルを結合することができますが、極力控えるようにします。セルの結合はUAが解釈することが難しい機能で、特にスクリーンリーダーなどでうまく情報が伝えられない恐れがあります。1つの複雑なテーブルではなく、複数のシンプルなテーブルにできないか検討してください。

Table Header	Table Header	Table Header
Table Header	Table Data	Table Data
Table Header	Table Data	Table Data

.l-Wrapper
  table.sw-Table
    thead
      tr
        th(scope="col") Table Header
        th(scope="col") Table Header
        th(scope="col") Table Header
    tbody
      tr
        th(scope="row") Table Header
        td Table Data
        td Table Data
      tr
        th(scope="row") Table Header
        td Table Data
        td Table Data

sw-TableWide

/src/assets/css/namespace/sitewide/_TableWide.scss

横幅の広いテーブルで使用します。
テキストは自動的に改行されず、画面幅に収まりきらなくなると横スクロールで表示するようになります。
改行は<br>で指定してください。

thead Table Header	thead Table Header	thead Table Header	thead Table Header
tbody Table Header	tbody Table Data	tbody Table Data	tbody Table Data
tbody Table Header	tbody Table Data	tbody Table Data	tbody Table Data
tbody Table Header	tbody Table Data	tbody Table Data	tbody Table Data

.l-Wrapper
  .sw-TableWide
    table.sw-Table
      thead
        tr
          th(scope="col") thead Table Header
          th(scope="col") thead Table Header
          th(scope="col") thead Table Header
          th(scope="col") thead Table Header
      tbody
        tr
          th(scope="row") tbody Table Header
          td tbody Table Data
          td tbody Table Data
          td tbody Table Data
        tr
          th(scope="row") tbody Table Header
          td tbody Table Data
          td tbody Table Data
          td tbody Table Data
        tr
          th(scope="row") tbody Table Header
          td tbody Table Data
          td tbody Table Data
          td tbody Table Data

sw-Text

/src/assets/css/namespace/sitewide/_Text.scss

基本のテキストスタイルです。

この書生というのは時々我々を捕えて煮て食うという話である。

しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。

どこで生れたかとんと見当がつかぬ。

.l-Wrapper
  p.sw-Text この書生というのは時々我々を捕えて煮て食うという話である。
  .sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。
  p.sw-Text どこで生れたかとんと見当がつかぬ。

sw-TextEmphasis

/src/assets/css/namespace/sitewide/_TextEmphasis.scss

<em>で使われるようなスタイルです。アクセントをつけたい単語や短い文章で使用し、強調や重要性を示しません。

30%OFFのため、お買い得です！（30%OFFであることを特に伝えたい）

30%OFFのため、お買い得です！（お買い得であることを特に伝えたい）

.l-Wrapper
  p.sw-Text
    em.sw-TextEmphasis 30%OFFのため、
    | お買い得です！
    small （30%OFFであることを特に伝えたい）
  p.sw-Text 30%OFFのため、
    em.sw-TextEmphasis お買い得です！
    small （お買い得であることを特に伝えたい）

sw-TextImportant

/src/assets/css/namespace/sitewide/_TextImportant.scss

<strong>で使われるようなスタイルです。重要性や緊急性・深刻性があることを示します。

30%OFFのため、お買い得です！

使用上の注意をよく読み、用法・用量を守って正しくお使い下さい。

.l-Wrapper
  p.sw-Text
    strong.sw-TextImportant 30%OFFのため、お買い得です！
  p.sw-Text
    strong.sw-TextImportant 使用上の注意をよく読み、用法・用量を守って正しくお使い下さい。

sw-TextSecondary

/src/assets/css/namespace/sitewide/_TextSecondary.scss

<p>や<small>で使われるようなテキストスタイルです。補足的・副次的な意味合いを持たせる場合に使います。

通常の文章です

補足的な文章です

.l-Wrapper
  p.sw-Text 通常の文章です
  p.sw-TextSecondary 補足的な文章です

sw-Title

/src/assets/css/namespace/sitewide/_Title.scss

ページタイトルです。

ページタイトル

.l-Wrapper
  h1.sw-Title ページタイトル

sw-Video

/src/assets/css/namespace/sitewide/_Video.scss

Youtubeなどの動画をレスポンシブ対応させます。デフォルトで16:9で表示されます。

動画にキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Video
    .sw-Video_Video.
      <iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>
    p.sw-Video_Text 動画にキャプション（短い説明文）をつけます。

キャプションを中央揃えにします。

動画にキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Video
    .sw-Video_Video.
      <iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>
    p.sw-Video_Text.-center 動画にキャプション（短い説明文）をつけます。

キャプションを右揃えにします。

動画にキャプション（短い説明文）をつけます。

.l-Wrapper
  .sw-Video
    .sw-Video_Video.
      <iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>
    p.sw-Video_Text.-right 動画にキャプション（短い説明文）をつけます。

ID

Category

Namespace

All Colors

sw-Br

sw-Button

sw-Caption

sw-Caption.-center

sw-Caption_Text.-center

sw-Caption_Text.-right

sw-Delimiter

sw-Dialog

sw-Divider

sw-FormCheckbox

sw-FormHelp

sw-FormInput

sw-FormLabel

sw-FormRadio

sw-FormSelect

sw-FormTextarea

sw-Heading2

見出し2

sw-Heading3

見出し3

sw-Heading4

見出し4

sw-Heading5

見出し5

sw-ImageCenter

sw-Label

sw-Lead

sw-Link

sw-LinkDownload

sw-LinkExternal

sw-LinkMore

sw-LinkNote

sw-LinkPdf

sw-ListBracketOrder

sw-ListNote

sw-ListNoteOrder

sw-ListOrder

sw-ListUnorder

sw-Map

sw-ObjectFit

sw-Sup

sw-Table

sw-TableWide

sw-Text

sw-TextEmphasis

sw-TextImportant

sw-TextSecondary

sw-Title

ページタイトル

sw-Video