@charset "UTF-8";
@font-face {
  font-family: "iconfont";
  src: url("../font/iconfont.eot");
  src: url("../font/iconfont.eot?#iefix") format("eot"), url("../font/iconfont.woff") format("woff"), url("../font/iconfont.ttf") format("truetype"), url("../font/iconfont.svg#iconfont") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/* #base
   -------------------------------------------------------------------------- */
/**
 * 1. `width`と`height`に`margin`と`border`を含めます。
 */
html {
  box-sizing: border-box;
  /* 1 */
}

*,
*:before,
*:after {
  box-sizing: inherit;
  /* 1 */
}

/**
 * 1. ドキュメントのルートフォントサイズを指定します（`rem`で参照）。
 * 2. ブレイクポイントごとにルートフォントサイズを変更します。
 */
html {
  font-size: 87.5%;
  /* 1 */
  line-height: 1.6;
}

@media print, screen and (min-width: 768px) {
  html {
    font-size: 87.5%;
    /* 2 */
  }
}

@media print, screen and (min-width: 1024px) {
  html {
    font-size: 87.5%;
    /* 2 */
  }
}

/**
 * 1. できる限り禁則処理が実行されるようにします。
 * 2. Chrome、Safari、FireFoxのフォントレンダリングを合わせます。
 * 3. フォントの持っているカーニング情報を使用します。
 */
body {
  color: #000;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  word-wrap: break-word;
  /* 1 */
  overflow-wrap: break-word;
  /* 1 */
  -webkit-font-smoothing: subpixel-antialiased;
  /* 2 */
  -moz-osx-font-smoothing: auto;
  /* 2 */
  -webkit-font-kerning: normal;
          font-kerning: normal;
  /* 3 */
}

/**
 * マージンをリセットします。
 */
figure {
  margin: 0;
}

/**
 * ブロック要素の上下のマージンをリセットします。
 */
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset,
pre {
  margin-top: 0;
  margin-bottom: 0;
}

/**
 * iOSのSafariとChromeで、`text-decoration: underline;`の罫線が
 * グリフやディセンダで途切れないようにします。
 * https://css-tricks.com/almanac/properties/t/text-decoration-skip/
 */
a {
  -webkit-text-decoration-skip: none;
}

/**
 * `dt`と`dd`の左端を揃えます。
 */
dd {
  margin-left: 0;
}

code,
kbd,
samp {
  font-family: Consolas, Menlo, Courier, monospace;
  font-size: 1em;
}

/**
 * 日本語では斜体を使用しないためリセットします。
 */
[lang="ja"] i, [lang="ja"]
cite, [lang="ja"]
em, [lang="ja"]
address, [lang="ja"]
dfn {
  font-style: normal;
}

/**
 * フルードイメージにします。
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/**
 * IEのimgとobject要素でもSVGをフルードイメージにします。
 * See: https://hail2u.net/blog/webdesign/max-width-and-svg-on-ie11-and-below.html
 */
[src$=".svg"],
[data$=".svg"] {
  width: 100%;
}

/**
 * キーボードでアクセスできない要素のフォーカス表示を消します。
 * Credit: https://github.com/suitcss/base
 */
[tabindex="-1"]:focus {
  outline: none !important;
}

/**
 * IE10以降の`input[type="text"]`で入力内容の消去機能を非表示にします。
 */
[type="text"]::-ms-clear {
  visibility: hidden;
}

/**
 * IE10以降の`input[type="password"]`でマスクの一時的解除機能を非表示にします。
 */
[type="password"]::-ms-reveal {
  visibility: hidden;
}

/**
 * IEとEdgeはスピンボタンに未対応のため、ChromeとFireFoxで非表示にします。
 */
[type="number"]::-webkit-outer-spin-button,
[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

/**
 * .sw- (SiteWide)...サイト共通の汎用的なModule（リストやボタンなどの場所を選ばないもの）
 * .st- (Structure)...サイト共通の構造的なModule（ヘッダーやフッター、カテゴリーごとの大枠のレイアウト、グリッドシステムやコンポーネンの余白など）
 * .wisywig- (WISYWIG)...WISYWIG（ウィジウィグ）で入力した要素に対するスタイル
 * .home- (HomePage)...ホームページ（サイトトップページ）
 * .top- (TopPage)...カテゴリートップページ
 * .sub- (SubPage)...カテゴリー下層ページ
 * .products- (Products)...製品情報
 * .news- (News)...ニュース
 * .company- (Company)...会社案内・企業情報
 * .recruit- (Recruit)...採用情報ページ
 * .csr- (CorporateSocialResponsibility)...企業の社会的責任
 * .faq- (FrequentlyAskedQuestions)...よくある質問
 * .inquiry- (Inquiry)...お問い合わせ
 * .ir- (InvestorRelations)...投資家向け情報
 * .results- (Results)...検索結果ページ
 * .sitemap- (Sitemap)...サイトマップページ
 */
/*
---
name: Tab
category: SiteWide
tag: [Link, Icon]
---

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

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

p
  span.sw-Tab_Icon(aria-hidden="true")
    a.sw-LinkDown(href="#") 詳しく見る
```
*/
.sw-LinkDown {
  color: #000;
  text-decoration: none;
}

.sw-LinkDown:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-Tab_Icon:before {
  content: "\EA07";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1em;
}

[lang="ja"] .sw-Tab_Icon:before,
[lang^="zh"] .sw-Tab_Icon:before {
  position: relative;
  top: -0.05em;
  right: 0.25em;
}

/*
---
name: Blank
category: SiteWide
tag: [Link, Icon]
---

外部リンク

```jade


p
  span.sw-Blank_Icon(aria-hidden="true")
    a.sw-Blank(href="#") 詳しく見る

```
*/
.sw-Blank {
  color: #000;
  text-decoration: none;
}

.sw-Blank:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-Blank_Icon:after {
  content: "\EA06";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1em;
  color: #0082ca;
  margin-left: 10px;
}

[lang="ja"] .sw-Blank_Icon:after,
[lang^="zh"] .sw-Blank_Icon:after {
  position: relative;
  top: -0.05em;
}

/*
---
name: Button
category: SiteWide
tag: [Button, Link, Form]
---

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

```jade
a.sw-Button(href="#") aタグボタン

button.sw-Button(type="button") butotnタグボタン

a.sw-Link-Button(href="#") aタグボタン

```
*/
.sw-Button {
  padding: 15px 80px;
  border: none;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
}

.sw-Button:hover {
  background: #d1f0fe;
  color: #000;
}

.sw-Dl-Button {
  padding: 15px 15px 15px 40px;
  border: none;
  background: #0082ca;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}

.sw-Dl-Button:before {
  content: "\EA09";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1.25em;
  position: absolute;
  top: 35%;
  left: 15px;
}

.sw-Dl-Button:hover {
  background-color: #80c1e5;
  color: #fff;
}

.sw-Link-Button {
  position: relative;
  font-size: 14px;
  padding: 15px;
  height: 60px;
  background: #f6f6f6;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  text-align: center;
  padding: 20px 0 10px 0;
}

.sw-Link-Button:hover {
  background: #d1f0fe;
  color: #000;
}

.sw-Link-Button.icon1 {
  padding: 10px 0 10px 15px;
  text-align: left;
}

.sw-Link-Button.icon2 {
  padding: 20px 0 10px 35px;
  text-align: left;
}

.sw-MemberIcon {
  position: absolute;
  top: 0;
  right: 7px;
  bottom: 0;
  margin: auto;
  width: 34.5px;
  height: 34px;
}

@media print, screen and (min-width: 1024px) {
  .sw-MemberIcon {
    right: 8px;
    width: 37px;
    height: 37px;
  }
}

.sw-mb-40 {
  margin-bottom: 20px;
}

@media print, screen and (min-width: 1024px) {
  .sw-mb-40 {
    margin-bottom: 40px;
  }
}

.sw-ButtonWrapper {
  margin: 40px auto;
  text-align: center;
}

.sw-Dl-ButtonWrapper {
  margin: 40px auto;
  text-align: center;
  width: 80%;
}

/*
---
name: sw-Caption
category: SiteWide
tag: Image
---

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

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

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

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

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

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

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

`.sw-Caption-center`でコンポーネント自体をセンタリングします。

```jade
figure.sw-Caption.sw-Caption-center
  img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
  figcaption.sw-Caption_Text 画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。
```
*/
/**
 * 1. キャプションの最小幅です。
 *    画像が指定幅以下になってもキャプションの幅はそれ以上小さくなりません。
 */
.sw-Caption {
  display: table;
  min-width: 100px;
  /* 1 */
}

/**
 * 1. キャプションは常に画像の下に配置します
 */
.sw-Caption_Text {
  display: table-caption;
  margin-top: 0.5em;
  font-size: 0.85em;
  line-height: 1.4;
  caption-side: bottom;
  /* 1 */
}

/**
 * コンポーネント自体をセンタリングします。
 */
.sw-Caption-center {
  margin-right: auto;
  margin-left: auto;
}

/**
 * テキストをセンタリングします。
 */
.sw-Caption_Text-center {
  text-align: center;
}

/**
 * テキストを右揃えにします。
 */
.sw-Caption_Text-right {
  text-align: right;
}

/*
---
name: Delimiter
category: SiteWide
tag: Text
---

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

```jade
p テキストは基本的にスペースや役物を基準に改行されますが、
  span.sw-Delimiter この部分はまとめて改行されます。
  | ここは通常のテキストです。
```
*/
.sw-Delimiter {
  display: inline-block;
}

.sw-Dialog {
  overflow: hidden;
  visibility: hidden;
  height: 0;
}

.sw-Dialog.sw-Dialog-open {
  overflow: visible;
  visibility: visible;
  height: auto;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.sw-Dialog_Inner {
  width: 90%;
  margin: 25px auto 0;
  padding: 25px;
  background-color: #f6f6f6;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
}

@media print, screen and (min-width: 1024px) {
  .sw-Dialog_Inner {
    padding: 50px;
    width: 80%;
    max-width: 1000px;
  }
}

.sw-Dialog_ButtonArea {
  margin-top: 10px;
  display: block;
  margin-left: -20px;
  font-size: 0;
}

.sw-Dialog_Button {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding-left: 20px;
  font-size: 1rem;
}

.sw-Dialog_Cancel {
  display: inline-block;
  margin: 0;
  padding: 0.75em 2em;
  border: none;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  color: inherit;
  font-family: inherit;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background: transparent;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  width: 100%;
  padding: 15px 8px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.sw-Dialog_Cancel[type=button], .sw-Dialog_Cancel[type=reset], .sw-Dialog_Cancel[type=submit] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sw-Dialog_Cancel:hover, .sw-Dialog_Cancel:active, .sw-Dialog_Cancel:focus {
  text-decoration: none;
}

.sw-Dialog_Cancel:focus {
  outline-width: 0;
  box-shadow: 0 0 5px 2px #1589ee;
}

.sw-Dialog_Cancel:focus:not(.focus-ring) {
  outline-width: 0;
  box-shadow: none;
}

.sw-Dialog_Cancel:disabled, .sw-Dialog_Cancel-disabled {
  opacity: 0.5;
  border-color: #ddd;
  background-color: #ddd;
  cursor: not-allowed;
}

.sw-Dialog_Cancel-disabled {
  pointer-events: none;
}

@media print, screen and (min-width: 1024px) {
  .sw-Dialog_Cancel {
    font-weight: bold;
  }
}

.sw-Dialog_Ok {
  display: inline-block;
  margin: 0;
  padding: 0.75em 2em;
  border: none;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  color: inherit;
  font-family: inherit;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background: transparent;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  width: 100%;
  padding: 15px 8px;
  color: #fff;
  background-color: #0082ca;
  border-color: #0082ca;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.sw-Dialog_Ok[type=button], .sw-Dialog_Ok[type=reset], .sw-Dialog_Ok[type=submit] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sw-Dialog_Ok:hover, .sw-Dialog_Ok:active, .sw-Dialog_Ok:focus {
  text-decoration: none;
}

.sw-Dialog_Ok:focus {
  outline-width: 0;
  box-shadow: 0 0 5px 2px #1589ee;
}

.sw-Dialog_Ok:focus:not(.focus-ring) {
  outline-width: 0;
  box-shadow: none;
}

.sw-Dialog_Ok:disabled, .sw-Dialog_Ok-disabled {
  opacity: 0.5;
  border-color: #ddd;
  background-color: #ddd;
  cursor: not-allowed;
}

.sw-Dialog_Ok-disabled {
  pointer-events: none;
}

@media print, screen and (min-width: 1024px) {
  .sw-Dialog_Ok {
    font-weight: bold;
  }
}

/*
---
name: Divider
category: SiteWide
tag: Text
---

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

```jade
p.st-Text テキストです。
hr.sw-Divider
p.st-Text テキストです。
```
*/
.sw-Divider {
  box-sizing: inherit;
  display: block;
  width: 100%;
  height: auto;
  margin: 16px auto;
  border: 0;
  border-top: 1px solid #e5e5e5;
}

/*
---
name: FormCheckbox
category: SiteWide
tag: Form
---

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

```jade
input.sw-FormCheckbox(type="checkbox" id="checkbox1" checked)
label(for="checkbox1") チェックボックス
br
input.sw-FormCheckbox(type="checkbox" id="checkbox2")
label(for="checkbox2") チェックボックス
br
input.sw-FormCheckbox(disabled type="checkbox" id="checkbox3")
label(disabled for="checkbox3") チェックボックス
```
*/
.sw-FormCheckbox {
  /* デフォルトのチェックボックスを非表示にする。 */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  overflow: hidden;
  padding: 0;
  clip: rect(0, 0, 0, 0);
}

.sw-FormCheckbox + label {
  position: relative;
  display: inline-block;
  padding-left: 1.25em;
  cursor: pointer;
}

.sw-FormCheckbox + label:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  border: 1px solid #767676;
  border-radius: 3px;
  vertical-align: text-bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

.sw-FormCheckbox:focus + label:before {
  border-color: #1589ee;
  box-shadow: 0 0 5px 2px #1589ee;
}

.sw-FormCheckbox:focus:not(.focus-ring) + label:before {
  border-color: #767676;
  box-shadow: none;
}

.sw-FormCheckbox:checked + label:before {
  border: 0;
  background-image: url("/wp-content/themes/amsega/assets/img/SiteWide/Icon/FormCheckbox_on.svg");
}

.sw-FormCheckbox:disabled,
.sw-FormCheckbox + label[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/*
---
name: FormInput
category: SiteWide
tag: Form
---

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

```jade
input.sw-FormInput(type="input" placeholder="デフォルト")

label.sw-FormInput_TextTop(for="input1") inputタグの説明です
input.sw-FormInput(type="input" name="email" autocomplete="email" id="input1" placeholder="example@gmail.com")

input.sw-FormInput(type="input" name="name" autocomplate="name" id="input2" placeholder="山田 太郎")
label.sw-FormInput_TextTop(for="input2") inputタグの説明です

input.sw-FormInput(disabled type="input" placeholder="disabled")
```
*/
.sw-FormInput {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 1em;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  font-size: 16px;
  vertical-align: middle;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-right: 10px;
  margin-top: 10px;
  box-shadow: 1px 1px 6px -3px #9e9e9e inset;
  /**
   * Normalize.cssのリセットをします。
   */
}

@media print, screen and (min-width: 768px) {
  .sw-FormInput {
    width: 63%;
    margin-top: 0;
  }
}

.sw-FormInput[type="search"] {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sw-FormInput::-webkit-input-placeholder {
  color: #767676;
  font-size: 0.85em;
}

.sw-FormInput:-ms-input-placeholder {
  color: #767676;
  font-size: 0.85em;
}

.sw-FormInput::placeholder {
  color: #767676;
  font-size: 0.85em;
}

.sw-FormInput:focus {
  outline-width: 0;
  border-color: #1589ee;
  box-shadow: 0 0 5px 2px #1589ee;
}

.sw-FormInput:disabled {
  opacity: 0.5;
  background-color: #ddd;
  cursor: not-allowed;
}

.sw-FormInput_TextTop {
  display: inline-block;
  margin-bottom: 0.25em;
}

.sw-FormInput_TextBottom {
  display: inline-block;
  margin-top: 0.25em;
}

/*
---
name: FormRadio
category: SiteWide
tag: Form
---

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

```jade
input.sw-FormRadio(type="radio" id="radio1" name="radio1" checked)
label(for="radio1") ラジオボタン
br
input.sw-FormRadio(type="radio" id="radio2" name="radio1")
label(for="radio2") ラジオボタン
br
input.sw-FormRadio(disabled type="radio" id="radio3" name="radio3")
label(disabled for="radio3") ラジオボタン
```
*/
.sw-FormRadio {
  /* デフォルトのラジオボタンを非表示にする。 */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  overflow: hidden;
  padding: 0;
  clip: rect(0, 0, 0, 0);
}

.sw-FormRadio + label {
  display: inline-block;
  position: relative;
  padding-left: 1.25em;
  cursor: pointer;
}

.sw-FormRadio + label:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  border: 1px solid #767676;
  border-radius: 50%;
  vertical-align: text-bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

.sw-FormRadio:focus + label:before {
  border-color: #1589ee;
  border-radius: 50%;
  box-shadow: 0 0 5px 2px #1589ee;
}

.sw-FormRadio:focus:not(.focus-ring) + label:before {
  border-color: #767676;
  box-shadow: none;
}

.sw-FormRadio:checked + label:before {
  border: 0;
  background-image: url("/wp-content/themes/amsega/assets/img/SiteWide/Icon/FormRadio_on.svg");
}

.sw-FormRadio:disabled,
.sw-FormRadio + label[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/*
---
name: FormSelect
category: SiteWide
tag: Form
---

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

```jade
.sw-FormSelect
  select
    option(value="default") 選択してください
    option(value="hokkaido") 北海道
    option(value="akita") 秋田

.sw-FormSelect.is-disabled
  select(disabled)
    option(value="default") 選択してください
    option(value="hokkaido") 北海道
    option(value="akita") 秋田
```
*/
.sw-FormSelect {
  position: relative;
  /* Firefox Hack */
  /* IE10以上 */
  /* IE9ではデフォルトの矢印アイコンを表示する。 */
}

.sw-FormSelect:before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  width: 99%;
  width: calc(100% - 6px);
  margin: auto;
  box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sw-FormSelect:after {
  content: "";
  position: absolute;
  top: 0;
  right: 1em;
  bottom: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  background-image: url("/wp-content/themes/amsega/assets/img/SiteWide/Icon/FormSelect.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.sw-FormSelect.is-disabled:after {
  opacity: 0.5;
}

.sw-FormSelect > select {
  width: 100%;
  height: 2.5em;
  padding: 0 3em 0 1em;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: 1px 1px 6px -3px #9e9e9e inset;
}

.sw-FormSelect > select:focus {
  outline-width: 0;
}

.sw-FormSelect > select.focus-ring:focus {
  border-color: #1589ee;
  box-shadow: 0 0 5px 2px #1589ee;
}

.sw-FormSelect > select:disabled {
  opacity: 0.5;
  background-color: #ddd;
  cursor: not-allowed;
}

.sw-FormSelect > select {
  text-indent: 0.01px;
  text-overflow: "";
}

.sw-FormSelect > select::-ms-expand {
  display: none;
}

.sw-FormSelect:not(:target):after {
  background-image: none\9;
}

.sw-FormSelect > select:not(:target) {
  padding-right: 0\9;
}

/*
---
name: FormTextarea
category: SiteWide
tag: Form
---

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

```jade
textarea.sw-FormTextarea(placeholder="テキストエリアです")

label.sw-FormTextarea_TextTop(for="textarea1") テキストエリアの説明
textarea.sw-FormTextarea(id="textarea1" placeholder="テキストエリアです")

textarea.sw-FormTextarea(id="textarea2" placeholder="テキストエリアです")
label.sw-FormTextarea_TextTop(for="textarea2") テキストエリアの説明

textarea.sw-FormTextarea.sw-FormTextarea-large(id="textarea3" placeholder="テキストエリアです")

textarea.sw-FormTextarea(disabled id="textarea4" placeholder="テキストエリアです")
```
*/
.sw-FormTextarea {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 7em;
  margin: 0;
  padding: 0.5em 1em;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  font-size: 16px;
  background-color: #fff;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: 1px 1px 6px -3px #9e9e9e inset;
}

.sw-FormTextarea::-webkit-input-placeholder {
  color: #767676;
  font-size: 0.85em;
}

.sw-FormTextarea:-ms-input-placeholder {
  color: #767676;
  font-size: 0.85em;
}

.sw-FormTextarea::placeholder {
  color: #767676;
  font-size: 0.85em;
}

.sw-FormTextarea:focus {
  outline-width: 0;
  border-color: #1589ee;
  box-shadow: 0 0 5px 2px #1589ee;
}

.sw-FormTextarea:disabled {
  opacity: 0.5;
  background-color: #ddd;
  cursor: not-allowed;
}

.sw-FormTextarea-large {
  height: 14em;
}

.sw-FormTextarea_TextTop {
  display: inline-block;
  margin-bottom: 0.25rem;
}

.sw-FormTextarea_TextBottom {
  display: inline-block;
  margin-top: 0.25rem;
}

/*
---
name: Hide
category: SiteWide
tag: Text
---

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

```jade
p 常に改行
  br
  | されます
p ブレイクポイント以降は改行
  br.sw-HideMd
  | されません
```
*/
.sw-Hide {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .sw-HideMd {
    display: none;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-HideLg {
    display: none;
  }
}

@media print, screen and (min-width: 1440px) {
  .sw-HideXl {
    display: none;
  }
}

/*
---
name: HomeCaution
category: SiteWide
tag: [Link, Icon]
---

ホームのナビゲーションアイコン

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

p
  a.sw-HomeCaution(href="#") 重要なお知らせ
    span.sw-HomeCaution_Icon(aria-hidden="true")
```
*/
.sw-HomeCaution {
  color: #000;
  text-decoration: none;
}

.sw-HomeCaution:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-HomeCaution_Icon:before {
  content: "\EA01";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 2em;
  color: #0082ca;
  margin-right: 10px;
  margin-bottom: 10px;
}

[lang="ja"] .sw-HomeCaution_Icon:before,
[lang^="zh"] .sw-HomeCaution_Icon:before {
  position: relative;
}

/*
---
name: HomeNews
category: SiteWide
tag: [Link, Icon]
---

ホームのナビゲーションアイコン

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

p
  a.sw-HomeNews(href="#") All.Net情報
    span.sw-HomeNews_Icon(aria-hidden="true")
```
*/
.sw-HomeNews {
  color: #000;
  text-decoration: none;
}

.sw-HomeNews:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-HomeNews_Icon:before {
  content: "\EA03";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 2.5em;
  color: #0082ca;
  margin-right: 10px;
}

[lang="ja"] .sw-HomeNews_Icon:before,
[lang^="zh"] .sw-HomeNews_Icon:before {
  position: relative;
}

/*
---
name: sw-ImageCenter
category: SiteWide
tag: Image
---

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

```jade
img.sw-ImageCenter(src="https://placehold.jp/300x200.png" alt="")
```
*/
.sw-ImageCenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.sw-ImportantNews {
  background: #fff7f7;
  border: 3px solid #f31515;
  padding: 40px 15px;
  text-align: center;
  margin: 20px 15px;
}

@media print, screen and (min-width: 1024px) {
  .sw-ImportantNews {
    margin: 20px 0;
  }
}

.sw-ImportantNews p {
  line-height: 2;
}

/*
---
name: Label
category: SiteWide
tag: [Text, Link, Form]
---

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

```jade
span.sw-Label-new new
span.sw-Label.sw-Label-video ビデオ
span.sw-Label.sw-Label-prize プライズ
span.sw-Label.sw-Label-kids キッズ
span.sw-Label.sw-Label-medal メダル
span.sw-Label.sw-Label-other その他
span.sw-Label.sw-Label-basis 基盤
span.sw-Label.sw-Label-data 参考資料
span.sw-Label.sw-Label-shinka シンカ


```
*/
.sw-Label-new {
  background: #f24747;
  font-size: 14px;
  border-radius: 3px;
  padding: 0px 5px;
  height: 22px;
  color: #fff;
  margin-right: 10px;
}

.sw-Label {
  border-radius: 3px;
  padding: 2px 5px;
  color: #fff;
  margin-right: 5px;
  font-size: 11px;
  width: 70px;
  display: inline-block;
  text-align: center;
}

.sw-Label-video {
  background: #f48a8a;
}

.sw-Label-prize {
  background: #40b19b;
}

.sw-Label-kids {
  background: #df880c;
}

.sw-Label-medal {
  background: #0b95ce;
}

.sw-Label-other {
  background: #8c8c8c;
}

.sw-Label-basis {
  background: #9769bd;
}

.sw-Label-data {
  background: #6ca04a;
}

.sw-Label-shinka {
  background: #d76ea9;
}

.sw-Label-contents {
  border: 1px solid #dcdcdc;
  background: #fff;
  color: #000;
  display: inline-block;
  font-weight: bold;
}

/*
---
name: Lead
category: SiteWide
tag: Text
---

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

```jade
p.st-Lead
  b.sw-Lead ◯◯◯は××に優れており、今まで多くのお客さまにご愛用いただいているロングセラー商品です。
p.st-Text △△の強みを生かした□□を使用しており、発売以来、日々改良を重ねております。
```
*/
.sw-Lead {
  font-weight: 700;
  font-size: 1.28571rem;
  color: #000;
}

/*
---
name: Link
category: SiteWide
tag: Link
---

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

```jade
p
  a.sw-Link(href="#") テキストリンクです。
```
*/
.sw-Link {
  color: #000;
  text-decoration: underline;
}

.sw-Link:hover {
  color: #fd9827;
  text-decoration: underline;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #fd9827;
  text-decoration: none;
}

/*
---
name: LinkDown
category: SiteWide
tag: [Link, Icon]
---

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

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

p
  span.sw-LinkDown_Icon(aria-hidden="true")
    a.sw-LinkDown(href="#") 詳しく見る
```
*/
.sw-LinkDown {
  color: #000;
  text-decoration: none;
}

.sw-LinkDown:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-LinkDown_Icon:before {
  content: "\EA07";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1em;
  color: #ccc;
}

[lang="ja"] .sw-LinkDown_Icon:before,
[lang^="zh"] .sw-LinkDown_Icon:before {
  position: relative;
  top: -0.05em;
  right: 0.25em;
}

/*
---
name: LinkDownload
category: SiteWide
tag: [Link, Icon]
---

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

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

p
  a.sw-LinkDownload(href="#") ファイルをダウンロードする
    span.sw-LinkDownload_Icon(aria-hidden="true")
```
*/
.sw-LinkDownload {
  color: #000;
  text-decoration: none;
}

.sw-LinkDownload:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-LinkDownload_Icon:before {
  content: "\EA09";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1.25em;
}

[lang="ja"] .sw-LinkDownload_Icon:before,
[lang^="zh"] .sw-LinkDownload_Icon:before {
  position: relative;
  top: -0.2em;
  right: 0.25em;
}

/*
---
name: LinkMore
category: SiteWide
tag: [Link, Icon]
---

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

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

p
  span.sw-LinkMore_Icon(aria-hidden="true")
    a.sw-LinkMore(href="#") 詳しく見る

```
*/
.sw-LinkMore {
  color: #000;
  text-decoration: none;
}

.sw-LinkMore:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-LinkMore_Icon:after {
  content: "\EA0A";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1em;
  color: #0082ca;
  margin-left: 10px;
}

[lang="ja"] .sw-LinkMore_Icon:after,
[lang^="zh"] .sw-LinkMore_Icon:after {
  position: relative;
  top: -0.05em;
}

/*
---
name: LinkNote
category: SiteWide
tag: Link
---

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

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

p(lang="en") ○○
  sup
    a.sw-LinkNote(href="#") 1
  | を使っています。
```
*/
.sw-LinkNote {
  color: #000;
  text-decoration: underline;
}

.sw-LinkNote:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-LinkNote:before {
  content: "※";
  margin-left: 0.25em;
}

[lang^="en"] .sw-LinkNote:before,
[lang^="zh-cn"] .sw-LinkNote:before {
  content: "*";
}

/*
---
name: LinkPdf
category: SiteWide
tag: [Link, Icon]
---

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

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

p
  a.sw-LinkPdf(href="#") PDFをダウンロードする
    span.sw-LinkPdf_Icon(aria-hidden="true")
```
*/
.sw-LinkPdf {
  color: #000;
  text-decoration: none;
}

.sw-LinkPdf:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-LinkPdf_Icon:before {
  content: "\EA04";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1.75em;
  padding-right: 10px;
  color: #b22e2d;
}

[lang="ja"] .sw-LinkPdf_Icon:before,
[lang^="zh"] .sw-LinkPdf_Icon:before {
  position: relative;
  top: -0.2em;
  left: 0.25em;
}

/*
---
name: LinkSearch
category: SiteWide
tag: [Link, Icon]
---

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

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

p
  a.sw-LinkSearch(href="#") 外部リンクを開く
    span.sw-LinkSearch_Icon(aria-hidden="true")
```
*/
.sw-LinkSearch {
  color: #000;
  text-decoration: none;
}

.sw-LinkSearch:hover {
  color: #fd9827;
  text-decoration: underline;
}

.sw-LinkSearch_Icon:after {
  content: "\EA05";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1em;
  color: #0082ca;
}

[lang="ja"] .sw-LinkSearch_Icon:after,
[lang^="zh"] .sw-LinkSearch_Icon:after {
  position: relative;
}

/*
---
name: ListBracketOrder
category: SiteWide
tag: List
---

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

```jade
ol.sw-ListBracketOrder
  li リストです。リストです。リストです。リストです。
  li リストです
```

リストを2から始める場合は`.sw-ListBracketOrder-from2`のように指定します。2~10まで対応しています。CSSが正常に読み込めなかった場合でも意味が変わらないように`start`属性も指定します。

```jade
ol.sw-ListBracketOrder.sw-ListBracketOrder-from2(start="2")
  li リストです。リストです。リストです。リストです。
  li リストです
```
*/
.sw-ListBracketOrder {
  margin-left: 2em;
  padding-left: 0;
  list-style-type: none;
  counter-reset: bracketOrder 0;
}

.sw-ListBracketOrder > li {
  position: relative;
  counter-increment: bracketOrder;
}

.sw-ListBracketOrder > li:before {
  content: "(" counter(bracketOrder) ")";
  position: absolute;
  top: 0;
  left: -2em;
}

.sw-ListBracketOrder-from2 {
  counter-reset: bracketOrder 1;
}

.sw-ListBracketOrder-from3 {
  counter-reset: bracketOrder 2;
}

.sw-ListBracketOrder-from4 {
  counter-reset: bracketOrder 3;
}

.sw-ListBracketOrder-from5 {
  counter-reset: bracketOrder 4;
}

.sw-ListBracketOrder-from6 {
  counter-reset: bracketOrder 5;
}

.sw-ListBracketOrder-from7 {
  counter-reset: bracketOrder 6;
}

.sw-ListBracketOrder-from8 {
  counter-reset: bracketOrder 7;
}

.sw-ListBracketOrder-from9 {
  counter-reset: bracketOrder 8;
}

.sw-ListBracketOrder-from10 {
  counter-reset: bracketOrder 9;
}

/*
---
name: ListIcon
category: SiteWide
tag: [Link, Icon, List]
---

アイコンリストです。

```jade
ul.sw-ListIcon
  li リストです。
  li リストです。
```
*/
.sw-ListIcon {
  padding-left: 0;
  list-style-type: none;
}

.sw-ListIcon > li {
  padding: 10px 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-height: 50px;
}

.sw-ListIcon > li img {
  float: left;
  margin-right: 10px;
  max-width: 30px;
}

.sw-ListIcon > li img.img-c {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.sw-ListIcon > li p {
  overflow: hidden;
  margin-top: 3px;
}

.sw-ListIcon > li p span {
  font-weight: bold;
}

.sw-ListIcon > li:before {
  content: "\EA02";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1em;
  color: #0082ca;
  margin: 6px 5px 0 10px;
}

[lang="ja"] .sw-ListIcon > li:before,
[lang^="zh"] .sw-ListIcon > li:before {
  position: relative;
}

.sw-link:before{
  content: "\EA02";
  font-family: "iconfont";
  color: #0082ca;
  font-size: 10px;
  margin-top: 5px;
}
/*
---
name: ListNote
category: SiteWide
tag: List
---

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

```jade
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-ListNote {
  margin-left: 1.5em;
  padding-left: 0;
  font-size: 0.85em;
  list-style-type: none;
}

[lang="en"] .sw-ListNote,
.sw-ListNote [lang="zh-cn"] {
  margin-left: 1em;
}

.sw-ListNote > li {
  position: relative;
}

.sw-ListNote > li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: -1.5em;
}

[lang="en"] .sw-ListNote > li:before,
[lang="zh-cn"] .sw-ListNote > li:before {
  content: "*";
  left: -1em;
}

/*
---
name: ListNoteOrder
category: SiteWide
tag: List
---

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

```jade
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から始める場合は`.sw-ListNoteOrder-from2`のように指定します。2~10まで対応しています。CSSが正常に読み込めなかった場合でも意味が変わらないように`start`属性も指定します。

```jade
ol.sw-ListNoteOrder.sw-ListNoteOrder-from2(start="2")
  li 注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。注釈です。
  li 注釈です。

div(lang="en")
  ol.sw-ListNoteOrder.sw-ListNoteOrder-from2(start="2")
    li This is an annotation. This is an annotation. This is an annotation.
    li This is an annotation.
```
*/
.sw-ListNoteOrder {
  margin-left: 2em;
  padding-left: 0;
  font-size: 0.85em;
  list-style-type: none;
  counter-reset: noteOrder 0;
}

[lang="en"] .sw-ListNoteOrder,
.sw-ListNoteOrder [lang="zh-cn"] {
  margin-left: 1.5em;
}

.sw-ListNoteOrder > li {
  position: relative;
  counter-increment: noteOrder;
}

.sw-ListNoteOrder > li:target {
  background-color: lightgray;
}

.sw-ListNoteOrder > li:before {
  content: "※" counter(noteOrder);
  position: absolute;
  top: 0;
  left: -2em;
}

[lang="en"] .sw-ListNoteOrder > li:before,
[lang="zh-cn"] .sw-ListNoteOrder > li:before {
  content: "*" counter(noteOrder);
  left: -1.5em;
}

.sw-ListNoteOrder-from2 {
  counter-reset: noteOrder 1;
}

.sw-ListNoteOrder-from3 {
  counter-reset: noteOrder 2;
}

.sw-ListNoteOrder-from4 {
  counter-reset: noteOrder 3;
}

.sw-ListNoteOrder-from5 {
  counter-reset: noteOrder 4;
}

.sw-ListNoteOrder-from6 {
  counter-reset: noteOrder 5;
}

.sw-ListNoteOrder-from7 {
  counter-reset: noteOrder 6;
}

.sw-ListNoteOrder-from8 {
  counter-reset: noteOrder 7;
}

.sw-ListNoteOrder-from9 {
  counter-reset: noteOrder 8;
}

.sw-ListNoteOrder-from10 {
  counter-reset: noteOrder 9;
}

/*
---
name: ListOrder
category: SiteWide
tag: List
---

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

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

リストを2から始める場合は`.sw-ListOrder-from2`のように指定します。2~10まで対応しています。CSSが正常に読み込めなかった場合でも意味が変わらないように`start`属性も指定します。

```jade
ol.sw-ListOrder.sw-ListOrder-from2(start="2")
  li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
  li 入れ子に対応した順序リストです。
    ol
      li 入れ子に対応した順序リストです。入れ子に対応した順序リストです。
      li 入れ子に対応した順序リストです。
```
*/
.sw-ListOrder {
  display: table;
  padding-left: 0;
  list-style-type: none;
  counter-reset: order;
  margin-bottom: 10px;
}

.sw-ListOrder li {
  display: table-row;
  counter-increment: order;
}

.sw-ListOrder li:before {
  content: counters(order, "-") ".";
  display: table-cell;
  text-align: right;
  white-space: nowrap;
  color: #0082ca;
  padding: 5px;
}

.sw-ListOrder ol {
  padding-left: 0;
  list-style-type: none;
  counter-reset: order;
}

.sw-ListOrder-from2 {
  counter-reset: order 1;
}

.sw-ListOrder-from3 {
  counter-reset: order 2;
}

.sw-ListOrder-from4 {
  counter-reset: order 3;
}

.sw-ListOrder-from5 {
  counter-reset: order 4;
}

.sw-ListOrder-from6 {
  counter-reset: order 5;
}

.sw-ListOrder-from7 {
  counter-reset: order 6;
}

.sw-ListOrder-from8 {
  counter-reset: order 7;
}

.sw-ListOrder-from9 {
  counter-reset: order 8;
}

.sw-ListOrder-from10 {
  counter-reset: order 9;
}

/*
---
name: ListUnorder
category: SiteWide
tag: List
---

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

```jade
ul.sw-ListUnorder
  li リストです。
  li リストです。
    ul.sw-ListUnorder_Child
      li リストです。
      li リストです。
```
*/
.sw-ListUnorder {
  margin-left: 1.5em;
  margin-bottom: 10px;
  padding-left: 0;
  list-style-type: none;
}

.sw-ListUnorder > li {
  position: relative;
  padding: 5px 0;
}

.sw-ListUnorder > li:before {
  content: "";
  display: block;
  position: absolute;
  top: 13px;
  left: -1em;
  width: 6px;
  height: 6px;
  border: 3px solid #0082ca;
}

.sw-ListUnorder_Child {
  padding-left: 0;
  list-style-type: none;
}

.sw-ListUnorder_Child > li {
  position: relative;
  margin-left: 1.5em;
}

.sw-ListUnorder_Child > li:before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5em;
  left: -1em;
  width: 6px;
  height: 6px;
  border: 1px solid #000;
  background-color: #fff;
}

.sw-NewList {
  padding-left: 0;
  list-style-type: none;
  overflow: hidden;
}

@media print, screen and (min-width: 1024px) {
  .sw-NewList {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}

.sw-NewList > li {
  padding: 10px;
  width: 100%;
  vertical-align: top;
}

@media print, screen and (min-width: 1024px) {
  .sw-NewList > li {
    width: 49%;
  }
}

.sw-NewList > li:before {
  margin: 15px 5px 0 10px;
}

/*
---
name: Map
category: SiteWide
tag: ThirdPartyComponent
---

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

```jade
.sw-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>
```
*/
.sw-Map {
  display: block;
  overflow: hidden;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.sw-Map > *,
.sw-Map iframe,
.sw-Map embed,
.sw-Map object,
.sw-Map video {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

.pop-Area {
  background: #f6f6f6;
  padding: 10px;
  text-align: center;
}

.pop-Area p {
  text-align: center;
  padding-top: 10px;
}

.pop-Area2 {
  background: #b2d9ef;
  padding: 10px;
  text-align: center;
}

.pop-Area2 p {
  text-align: center;
  padding-top: 10px;
}

.thumbnail {
  width: 100%;
  height: 240px;
  margin: 0;
  padding: 0;
  display: table;
  table-layout: fixed;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  border: 1px solid #dcdcdc;
}

.image {
  max-width: 100%;
  max-height: 240px;
  height: auto;
  vertical-align: bottom;
}

.sw-Newpop-title {
  padding-top: 10px;
}

.sw-Newpop-title span {
  font-size: 12px;
}

@media print, screen and (min-width: 1024px) {
  .sw-Newpop-title span {
    font-weight: bold;
  }
}

.sw-History_list {
  margin-top: -20px;
}

.sw-History_list ul {
  list-style: none;
  display: inline;
}

.sw-History_list li {
  background: #f6f6f6;
  border-bottom: 1px solid #fff;
}

.sw-History_list li a {
  display: block;
  padding: 20px;
}

.sw-History_list li a:hover {
  color: #000;
}

.sw-History_list li:hover {
  background: #e3e3e3;
}

.sw-History_list li:hover .sw-History_title {
  font-weight: bold;
  color: #000;
}

.sw-History_list .sw-Date {
  float: none;
  width: 100%;
}

@media print, screen and (min-width: 1024px) {
  .sw-History_list .sw-Date {
    float: left;
    width: 34%;
  }
}

.sw-History_list .sw-Date span.date {
  margin-right: 5px;
  font-size: 12px;
}

.sw-History_list .sw-History_title {
  overflow: hidden;
}

/*
---
name: Search
category: SiteWide
tag: From
---

検索エリアのスタイル

*/
.sw-Search {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 20px 12px;
  text-align: center;
}

.sw-Search label {
  font-weight: bold;
  margin-right: 20px;
  font-size: 16px;
}

.sw-Search label:before {
  content: "";
  width: 35px;
  height: 25px;
  background: url(/wp-content/themes/amsega/assets/img/SiteWide/Icon/iconSearch.png) no-repeat;
  display: inline-block;
  background-size: contain;
  vertical-align: middle;
}

.sw-Search_button {
  color: #fff;
  background-color: #0082ca;
  border-radius: 10px;
  padding: 13px 20px;
  margin-top: 10px;
}

@media print, screen and (min-width: 768px) {
  .sw-Search_button {
    margin-top: 0;
  }
}

/*
---
name: Show
category: SiteWide
tag: Text
---

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

```jade
p 常に改行
  br
  | されます
p ブレイクポイント以降は改行
  br.sw-Hide.sw-ShowMd
  | されます
```
*/
.sw-Show {
  display: block;
}

@media print, screen and (min-width: 768px) {
  .sw-ShowMd {
    display: block;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-ShowLg {
    display: block;
  }
}

@media print, screen and (min-width: 1440px) {
  .sw-ShowXl {
    display: none;
  }
}

/*
---
name: Sup
category: SiteWide
tag: Text
---

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


```jade
p.st-Text 登録商標
  sup.sw-Sup ®
  | です。
p.st-Text 注釈
  sup.sw-Sup: a(href="#") ※1
  | です。
```
*/
.sw-Sup {
  font-size: 0.85em;
  position: static;
  vertical-align: super;
}

/*
---
name: sw-Tab
category: SiteWide
tag: InteractiveComponent
---

タブコンポーネントです。タブは2つの想定です。

```jade
.sw-Tab
  ul.sw-Tab_List
    li.sw-Tab_Item
      a.sw-Tab_Link(href="#category-order")
        span.sw-Tab_Icon(aria-hidden="true")
        | カテゴリー別
        span.sw-Tab_Delimiter 表示
    li.sw-Tab_Item
      a.sw-Tab_Link(href="#syllabary-order")
        span.sw-Tab_Icon(aria-hidden="true")
        | 50音順
        span.sw-Tab_Delimiter 表示
  .sw-Tab_Content#category-order
    p コンテンツ1
  .sw-Tab_Content#syllabary-order
    p コンテンツ2
```
*/
.sw-Tab_List {
  display: block;
  padding: 0 10px;
  list-style-type: none;
  border-bottom: 2px solid #0082ca;
  font-size: 0;
}

@media print, screen and (min-width: 1024px) {
  .sw-Tab_List {
    padding: 0 15px;
  }
}

.sw-Tab_Item {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  font-size: 1rem;
}

.sw-Tab_Item:before {
  content: "\EA07";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1.25em;
  color: #ccc;
}

@media print, screen and (min-width: 1024px) {
  .sw-Tab_Item:before {
    font-size: 1.5em;
  }
}

[lang="ja"] .sw-Tab_Item:before,
[lang^="zh"] .sw-Tab_Item:before {
  position: relative;
  top: 2.5em;
  left: 1em;
}

@media print, screen and (min-width: 1024px) {
  [lang="ja"] .sw-Tab_Item:before,
  [lang^="zh"] .sw-Tab_Item:before {
    top: 1.9em;
  }
}

.sw-Tab_Item:nth-of-type(1) {
  padding-right: 6px;
}

.sw-Tab_Item:nth-of-type(2) {
  padding-left: 6px;
}

.sw-Tab_Item.focus-ring {
  outline-width: 0;
}

@media print, screen and (min-width: 1024px) {
  .sw-Tab_Item:nth-of-type(1) {
    padding-right: 8px;
  }
  .sw-Tab_Item:nth-of-type(2) {
    padding-left: 8px;
  }
}

.sw-Tab_Link {
  display: block;
  padding: 13px 26px 13px 36px;
  color: inherit;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid #dcdcdc;
}

@media print, screen and (min-width: 1024px) {
  .sw-Tab_Link {
    padding: 16px 26px 16px 36px;
    font-size: 1.28571rem;
  }
}

.sw-Tab_Item[aria-expanded="false"] .sw-Tab_Link {
  border-color: #dcdcdc;
  background-color: #f6f6f6;
}

.sw-Tab_Item[aria-expanded="true"] .sw-Tab_Link {
  border-color: #0082ca;
  color: #fff;
  background-color: #0082ca;
}

.sw-Tab_Link:hover {
  text-decoration: none;
}

.sw-Tab_Link:focus {
  outline-width: 0;
}

.sw-Tab_Item.focus-ring .sw-Tab_Link {
  box-shadow: 0 0 5px 2px #1589ee;
}

.sw-Tab_Delimiter {
  display: block;
}

@media print, screen and (min-width: 1024px) {
  .sw-Tab_Delimiter {
    display: inline;
  }
}

.sw-Tab_Content[aria-hidden="false"] {
  display: block;
  overflow: auto;
  visibility: visible;
  height: auto;
  padding: 34px 0 0;
}

@media print, screen and (min-width: 1024px) {
  .sw-Tab_Content[aria-hidden="false"] {
    padding-top: 24px;
  }
}

.sw-Tab_Content[aria-hidden="true"] {
  display: block;
  overflow: hidden;
  visibility: hidden;
  height: 0;
  padding: 0;
}

/*
---
name: Table
category: SiteWide
tag: List
---

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

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

```jade
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-Table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sw-Table td.gray {
  padding: 15px 20px;
  border: 2px solid #fff;
  background-color: #f6f6f6;
}

.sw-Table thead th {
  color: #fff;
  border-bottom: 5px solid #fff;
}

.sw-Table th {
  border: 2px solid #fff;
  background-color: #0082ca;
  padding: 10px 20px;
  text-align: left;
}

.sw-Table td.blue {
  color: #fff;
  background-color: #0082ca;
  border: 2px solid #fff;
  width: 25%;
}

.sw-Table td.blue a {
  display: block;
  color: #fff;
  padding: 15px 20px;
}

.sw-Table td.blue:hover {
  background-color: #80c1e5;
}

.sw-Table_mt20 {
  margin-top: 20px;
}

.sw-Table_mt30 {
  margin-top: 30px;
}

/*
---
name: TableManual
category: SiteWide
tag: List
---

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

```jade
.sw-TableManual
  table.sw-Table
    thead
      tr
        th(scope="col") thead Table Header
        th(scope="col") thead Table Header
    tbody
      tr
        td tbody Table Data
        td.blue tbody Table Data
      tr
        td tbody Table Data
        td.blue tbody Table Data
      tr
        td tbody Table Data
        td.blue tbody Table Data
```
*/
.sw-TableManual {
  overflow: auto;
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 0.75em 100%, 0.75em 100%;
}

.sw-TableManual table {
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: local;
}

.sw-TableManual th {
  background: #8c8c8c;
}

.sw-TableManual th.manual {
  background: #0b95ce;
}

.sw-TableManual th.service {
  background: #f48a8a;
}

.sw-TableManual th.parts {
  background: #40b19b;
}

.sw-TableManual th.file {
  background: #8c8c8c;
}

.sw-TableManual th.process {
  background: #df880c;
}

.sw-TableManual th,
.sw-TableManual td {
  white-space: nowrap;
}

/*
---
name: TableWide
category: SiteWide
tag: List
---

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

```jade
.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.row(scope="row") tbody Table Header
        td tbody Table Data
        td tbody Table Data
        td tbody Table Data
      tr
        th.row(scope="row") tbody Table Header
        td tbody Table Data
        td tbody Table Data
        td tbody Table Data
      tr
        th.row(scope="row") tbody Table Header
        td tbody Table Data
        td tbody Table Data
        td tbody Table Data
```
*/
.sw-TableWide {
  overflow: auto;
  width: 100%;
  background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, transparent 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, transparent 75%) 100% center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 0.75em 100%, 0.75em 100%;
}

.sw-TableWide table {
  width: 100%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 0.75em) 0 0/2em 100%, linear-gradient(to right, rgba(255, 255, 255, 0), #fff 0.75em) right/2em 100%;
  background-repeat: no-repeat;
  background-attachment: local;
}

.sw-TableWide th {
  background: #0082ca;
}

.sw-TableWide th,
.sw-TableWide td {
  white-space: nowrap;
}

.sw-Table th.row {
  color: #fff;
  padding: 15px 20px;
  background-color: #8c8c8c;
}

/*
---
name: TextBig
category: SiteWide
tag: Text
---

大きな文字

```jade
p.st-Text 通常の文章です
p.sw-TextBig 大きな文字


```
*/
.sw-TextBig {
  font-size: 20px;
}

/*
---
name: TextextCenter
category: SiteWide
tag: Text
---

文字をセンタリング


```jade
p.st-Text 通常の文章です
p.st-extCenter センタリング文字
```
*/
.sw-TextCenter {
  margin: 10px auto;
  text-align: center;
  font-size: 12px;
}

/*
---
name: TextEmphasis
category: SiteWide
tag: Text
---

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

```jade
p.st-Text
  em.sw-TextEmphasis 30%OFFのため、
  | お買い得です！
  small （30%OFFであることを特に伝えたい）
p.st-Text 30%OFFのため、
  em.sw-TextEmphasis お買い得です！
  small （お買い得であることを特に伝えたい）
```
*/
.sw-TextEmphasis {
  font-weight: 700;
  font-style: normal;
}

/*
---
name: TextImportant
category: SiteWide
tag: Text
---

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

```jade
p.st-Text
  strong.sw-TextImportant 30%OFFのため、お買い得です！
p.st-Text
  strong.sw-TextImportant 使用上の注意をよく読み、用法・用量を守って正しくお使い下さい。
```
*/
.sw-TextImportant {
  color: #f31515;
}

/*
---
name: TextSecondary
category: SiteWide
tag: Text
---

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

```jade
p.st-Text 通常の文章です
p.st-SmallText.sw-TextSecondary 補足的な文章です
```
*/
.sw-TextSecondary {
  font-size: 0.85em;
}

/*
---
name: Video
category: SiteWide
tag: ThirdPartyComponent
---

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

```jade
.sw-Video.
  <iframe width="560" height="315" src="https://www.youtube.com/embed/1OKZOV-iLj4"></iframe>
```
*/
.sw-Video {
  display: block;
  overflow: hidden;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.sw-Video_Item,
.sw-Video iframe,
.sw-Video embed,
.sw-Video object,
.sw-Video video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
---
name: Block
category: Structure
tag: Layout
---

見出しや画像などを含んだブロック同士の余白を指定します。

```jade
.st-Block
  p.test-Box .st-Block
.st-Block
  p.test-Box .st-Block
```

```jade
.st-Text
  p .st-Text
.st-Block
  p.test-Box .st-Block
.st-Block
  p.test-Box .st-Block
.st-Text
  p .st-Text
```
*/
.st-Block {
  overflow: hidden;
}

.st-Block + .st-Block,
:not(.st-Block) + .st-Block {
  margin-top: 60px;
}

/*
---
name: Breadcrumb
category: Structure
tag: Navigation
---

ベーシックなパンくずリストです。`<ol>`タグで指定します。
```jade
ol.st-Breadcrumb
  li.st-Breadcrumb_Item
    a.st-Breadcrumb_Link(href="/") ホーム
  li.st-Breadcrumb_Item
    a.st-Breadcrumb_Link(href="#") カテゴリ名
  li.st-Breadcrumb_Item ページ名
```
*/
.st-Breadcrumb_bg {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-Breadcrumb_bg {
    display: block;
    background: #0082ca;
    color: #fff;
    padding: 5px 0;
  }
  .st-Breadcrumb_bg a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
  }
  .st-Breadcrumb_bg a:hover {
    color: white;
    text-decoration: none;
  }
}

.st-Breadcrumb {
  overflow: hidden;
  padding-left: 0;
  font-size: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style-type: none;
}

.st-Breadcrumb_Item {
  display: inline-block;
  font-size: 1rem;
  font-size: 0.85rem;
}

.st-Breadcrumb_Item:last-child {
  display: inline;
}

.st-Breadcrumb_Item:not(:first-of-type):before {
  content: ">";
  margin: 0 0.5em;
}

.st-Breadcrumb_Link {
  color: #000;
  text-decoration: underline;
  display: inline-block;
}

.st-Breadcrumb_Link:hover {
  color: #fd9827;
  text-decoration: underline;
}

.st-Content {
  padding: 0 15px;
  margin-bottom: 40px;
}

@media print, screen and (min-width: 1024px) {
  .st-Content {
    float: right;
    width: 74%;
    padding: 0;
    margin-bottom: 80px;
  }
}

.st-TopContent {
  padding: 0 15px;
  margin-bottom: 40px;
}

@media print, screen and (min-width: 1024px) {
  .st-TopContent {
    padding: 0;
    margin-bottom: 80px;
  }
}

/*
---
name: ContentBody
category: Structure
tag: Layout
---

メインコンテンツエリア内のメイン部分の余白を管理します。

```jade
.st-ContentBody
  h2.st-Heading2 .st-Heading2
  p.st-Text .st-Text
  p.st-Text .st-Text
```
*/
.st-ContentBody {
  margin-bottom: 40px;
}

.st-ContentBody > :last-child {
  margin-bottom: 0;
}

/*
---
name: ContentFoot
category: Structure
tag: Layout
---

メインコンテンツエリア内のフッター部分の余白を管理します。

```jade
footer.st-ContentFoot
  h2.st-Heading2 .st-Heading2
  p.st-Text .st-Text
  p.st-Text .st-Text
```
*/
.st-ContentFoot {
  margin-bottom: 40px;
}

.st-ContentFoot > :last-child {
  margin-bottom: 0;
}

/*
---
name: ContentHead
category: Structure
tag: Layout
---

メインコンテンツエリア内のヘッダー部分の余白を管理します。

```jade
header.st-ContentHead
  h2.st-Heading2 .st-Heading2
  p.st-Text .st-Text
  p.st-Text .st-Text
```
*/
.st-ContentHead {
  margin-bottom: 40px;
}

.st-ContentHead > :last-child {
  margin-bottom: 0;
}

.st-Copyright {
  padding: 14px 15px;
  text-align: center;
  background-color: #0082ca;
}

@media print, screen and (min-width: 1024px) {
  .st-Copyright {
    padding: 9px 15px;
  }
}

.st-Copyright_Text {
  font-size: 0.85714rem;
  line-height: 1;
  color: #fff;
}

@media print, screen and (min-width: 1024px) {
  .st-Copyright_Text {
    font-size: 0.85714rem;
  }
}

/*
---
name: Footer
category: Structure
tag: Global
---
*/
@media print, screen and (min-width: 1024px) {
  .st-GlobalNav {
    display: none !important;
  }
}

.st-GlobalNav_Button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 15px 15px 15px 65px;
  border: none;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-weight: bold;
  font-size: 1.07143rem;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  background: transparent;
  background-color: #0082ca;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.st-GlobalNav_Button[type=button], .st-GlobalNav_Button[type=reset], .st-GlobalNav_Button[type=submit] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-GlobalNav_Button:hover, .st-GlobalNav_Button:active, .st-GlobalNav_Button:focus {
  text-decoration: none;
}

.st-GlobalNav_Button:focus {
  outline-width: 0;
  box-shadow: 0 0 5px 2px #1589ee;
}

.st-GlobalNav_Button:focus:not(.focus-ring) {
  outline-width: 0;
  box-shadow: none;
}

.st-GlobalNav_ButtonHumberger {
  position: absolute;
  top: 0;
  left: 23px;
  bottom: 0;
  width: 20px;
  height: 14px;
  margin: auto;
}

.st-GlobalNav_ButtonArrow:before {
  content: "\EA07";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  color: #fff;
}

.st-GlobalNav_Button[aria-expanded="true"] .st-GlobalNav_ButtonArrow:before {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.st-GlobalNav_Sidebar {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Sidebar {
    display: block;
    float: left;
    width: 25%;
    margin-bottom: 120px;
    padding-right: 30px;
  }
}

.st-GlobalNav_Items {
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Items {
    border: 1px solid #dcdcdc;
    border-radius: 3px;
  }
}

.st-GlobalNav_Item + .st-GlobalNav_Item {
  border-top: 1px solid #dcdcdc;
}

.st-GlobalNav_Link {
  position: relative;
  display: block;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4;
  color: #000;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 12px 42px 12px 65px;
}

.st-GlobalNav_Link:hover {
  text-decoration: underline;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Link {
    display: block;
    height: auto;
    padding: 15px 10px 15px 53px;
    overflow: visible;
    visibility: visible;
    font-size: .9rem;
    line-height: 1.5;
    font-weight: normal;
  }
  .st-GlobalNav_Item:first-child .st-GlobalNav_Link {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
  }
  .st-GlobalNav_Item:last-child .st-GlobalNav_Link {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }
  .st-GlobalNav_Link:hover, .st-GlobalNav_Link.st-GlobalNav_Link-current {
    margin-top: -1px;
    margin-right: -1px;
    margin-left: -1px;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom-width: 0;
  }
  .st-GlobalNav_Link:hover {
    color: #0082ca;
    background-color: #d1f0fe;
  }
  .st-GlobalNav_Link.st-GlobalNav_Link-current {
    color: #fff;
    background-color: #0082ca;
  }
  .st-GlobalNav_Link.st-GlobalNav_Link-current.prize img.st-GlobalNav_CategoryIcon{
    display: none;
  }
  .st-GlobalNav_Link.st-GlobalNav_Link-current.prize{
    background-image:url(/wp-content/themes/amsega/assets/img/SiteWide/Icon/pz-pop-white.png);
    background-repeat: no-repeat;
    background-color: #0082ca;
    background-size: 35px;
    background-position: 10px;
  }
  .st-GlobalNav_Link.st-GlobalNav_Link-current:after {
    content: "";
    position: absolute;
    top: 0;
    right: -7px;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-width: 5.5px 0 5.5px 7px;
    border-color: transparent transparent transparent #0082ca;
  }
  a.st-GlobalNav_Link.st-GlobalNav_Link-current .st-Label{
 color: #fff;
  border: 1px solid #fff;
  /* line-height: 2; */
  }
}

.st-GlobalNav_CategoryIcon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

.st-GlobalNav_Item:nth-of-type(1) .st-GlobalNav_CategoryIcon {
  width: 37px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Item:nth-of-type(1) .st-GlobalNav_CategoryIcon {
    left: 8px;
    width: 42px;
  }
}

.st-GlobalNav_Item:nth-of-type(2) .st-GlobalNav_CategoryIcon {
  width: 39.5px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Item:nth-of-type(2) .st-GlobalNav_CategoryIcon {
    left: 8px;
    width: 42px;
  }
}

.st-GlobalNav_Item:nth-of-type(3) .st-GlobalNav_CategoryIcon {
  left: 22px;
  width: 26px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Item:nth-of-type(3) .st-GlobalNav_CategoryIcon {
    left: 14px;
    width: 31px;
  }
}

.st-GlobalNav_Item:nth-of-type(4) .st-GlobalNav_CategoryIcon {
  left: 21.5px;
  width: 32.5px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Item:nth-of-type(4) .st-GlobalNav_CategoryIcon {
    left: 16px;
    width: 33px;
  }
}

.st-GlobalNav_Item:nth-of-type(5) .st-GlobalNav_CategoryIcon {
  left: 23.5px;
  width: 23px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Item:nth-of-type(5) .st-GlobalNav_CategoryIcon {
    left: 17px;
    width: 26px;
  }
}

.st-GlobalNav_Item:nth-of-type(6) .st-GlobalNav_CategoryIcon {
  left: 22px;
  width: 26.5px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Item:nth-of-type(6) .st-GlobalNav_CategoryIcon {
    left: 15px;
    width: 29px;
  }
}

.st-GlobalNav_Item:nth-of-type(7) .st-GlobalNav_CategoryIcon {
  left: 18px;
  width: 34px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Item:nth-of-type(7) .st-GlobalNav_CategoryIcon {
    left: 12px;
    width: 35px;
  }
}

.st-GlobalNav_Item:nth-of-type(8) .st-GlobalNav_CategoryIcon {
  left: 22px;
  width: 26px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_Item:nth-of-type(8) .st-GlobalNav_CategoryIcon {
    left: 16px;
    width: 27px;
  }
}

.st-GlobalNav_ArrowIcon:before {
  content: "\EA0A";
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: absolute;
  top: 0;
  right: 15px;
  bottom: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  color: #0082ca;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_ArrowIcon:before {
    display: none;
  }
}

.st-GlobalNav_MemberIcon {
  position: absolute;
  top: 0;
  right: 42.5px;
  bottom: 0;
  margin: auto;
  width: 34.5px;
  height: 34px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_MemberIcon {
    right: 8px;
    width: 37px;
    height: 37px;
  }
}

/*
---
name: Grid
category: Structure
tag: Layout
---

標準的なグリッドシステムです。カラムごとに任意の値を指定したい場合に使います。
カラム間の余白は幅を`$st-grid-column-gap`で統一しています。

以下のような指定ができます。

- `.st-Grid_Item-8of12` カラム数の指定。
- `.st-Grid-reverse` カラムの反転。
- `.st-Grid-center` カラムのセンタリング。
- `.st-Grid-middle` カラムの垂直配置。

```jade
.st-Grid
  .st-Grid_Item.st-Grid_Item-8of12Md
    .test-Box One<br>1/1 → 8/12
  .st-Grid_Item.st-Grid_Item-4of12Md
    .test-Box Two<br>1/1 → 4/12
```

```jade
.st-Grid.st-Grid-reversMd
  .st-Grid_Item.st-Grid_Item-8of12Md
    .test-Box One<br>1/1 → 8/12
  .st-Grid_Item.st-Grid_Item-4of12Md
    .test-Box Two<br>1/1 → 4/12
```

```jade
.st-Grid.st-Grid-centerMd
  .st-Grid_Item.st-Grid_Item-8of12Md
    .test-Box One<br>1/1 → 8/12
```
*/
.st-Grid {
  margin-left: -15px;
  padding-left: 0;
  list-style-type: none;
  display: block;
  font-size: 0;
}

@media print, screen and (min-width: 768px) {
  .st-Grid {
    margin-left: -30px;
  }
}

.st-Grid_Item {
  display: inline-block;
  width: 100%;
  padding-left: 15px;
  font-size: medium;
  font-size: 1rem;
  vertical-align: top;
}

@media print, screen and (min-width: 768px) {
  .st-Grid_Item {
    padding-left: 30px;
  }
}

.st-Grid_Item-1of12 {
  width: 8.33333%;
}

.st-Grid_Item-2of12 {
  width: 16.66667%;
}

.st-Grid_Item-3of12 {
  width: 25%;
}

.st-Grid_Item-4of12 {
  width: 33.33333%;
}

.st-Grid_Item-5of12 {
  width: 41.66667%;
}

.st-Grid_Item-6of12 {
  width: 50%;
}

.st-Grid_Item-7of12 {
  width: 58.33333%;
}

.st-Grid_Item-8of12 {
  width: 66.66667%;
}

.st-Grid_Item-9of12 {
  width: 75%;
}

.st-Grid_Item-10of12 {
  width: 83.33333%;
}

.st-Grid_Item-11of12 {
  width: 91.66667%;
}

.st-Grid_Item-12of12 {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .st-Grid_Item-1of12Md {
    width: 8.33333%;
  }
  .st-Grid_Item-2of12Md {
    width: 16.66667%;
  }
  .st-Grid_Item-3of12Md {
    width: 25%;
  }
  .st-Grid_Item-4of12Md {
    width: 33.33333%;
  }
  .st-Grid_Item-5of12Md {
    width: 41.66667%;
  }
  .st-Grid_Item-6of12Md {
    width: 50%;
  }
  .st-Grid_Item-7of12Md {
    width: 58.33333%;
  }
  .st-Grid_Item-8of12Md {
    width: 66.66667%;
  }
  .st-Grid_Item-9of12Md {
    width: 75%;
  }
  .st-Grid_Item-10of12Md {
    width: 83.33333%;
  }
  .st-Grid_Item-11of12Md {
    width: 91.66667%;
  }
  .st-Grid_Item-12of12Md {
    width: 100%;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grid_Item-1of12Lg {
    width: 8.33333%;
  }
  .st-Grid_Item-2of12Lg {
    width: 16.66667%;
  }
  .st-Grid_Item-3of12Lg {
    width: 25%;
  }
  .st-Grid_Item-4of12Lg {
    width: 33.33333%;
  }
  .st-Grid_Item-5of12Lg {
    width: 41.66667%;
  }
  .st-Grid_Item-6of12Lg {
    width: 50%;
  }
  .st-Grid_Item-7of12Lg {
    width: 58.33333%;
  }
  .st-Grid_Item-8of12Lg {
    width: 66.66667%;
  }
  .st-Grid_Item-9of12Lg {
    width: 75%;
  }
  .st-Grid_Item-10of12Lg {
    width: 83.33333%;
  }
  .st-Grid_Item-11of12Lg {
    width: 91.66667%;
  }
  .st-Grid_Item-12of12Lg {
    width: 100%;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grid_Item-1of12Xl {
    width: 8.33333%;
  }
  .st-Grid_Item-2of12Xl {
    width: 16.66667%;
  }
  .st-Grid_Item-3of12Xl {
    width: 25%;
  }
  .st-Grid_Item-4of12Xl {
    width: 33.33333%;
  }
  .st-Grid_Item-5of12Xl {
    width: 41.66667%;
  }
  .st-Grid_Item-6of12Xl {
    width: 50%;
  }
  .st-Grid_Item-7of12Xl {
    width: 58.33333%;
  }
  .st-Grid_Item-8of12Xl {
    width: 66.66667%;
  }
  .st-Grid_Item-9of12Xl {
    width: 75%;
  }
  .st-Grid_Item-10of12Xl {
    width: 83.33333%;
  }
  .st-Grid_Item-11of12Xl {
    width: 91.66667%;
  }
  .st-Grid_Item-12of12Xl {
    width: 100%;
  }
}

/**
 * 要素の垂直位置を真ん中寄せ。
 */
.st-Grid-middle > .st-Grid_Item {
  vertical-align: middle;
}

@media print, screen and (min-width: 768px) {
  .st-Grid-middleMd > .st-Grid_Item {
    vertical-align: middle;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grid-middleLg > .st-Grid_Item {
    vertical-align: middle;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grid-middleXl > .st-Grid_Item {
    vertical-align: middle;
  }
}

/**
 * 要素の垂直位置を下寄せ。
 */
.st-Grid--bottom > .st-Grid_Item {
  vertical-align: bottom;
}

@media print, screen and (min-width: 768px) {
  .st-Grid-bottomMd > .st-Grid_Item {
    vertical-align: bottom;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grid-bottomLg > .st-Grid_Item {
    vertical-align: bottom;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grid-bottomXl > .st-Grid_Item {
    vertical-align: bottom;
  }
}

/**
 * 要素を中央寄せ、要素内は左寄せ。
 */
.st-Grid-center {
  text-align: center;
}

.st-Grid-center > .st-Grid_Item {
  text-align: left;
}

@media print, screen and (min-width: 768px) {
  .st-Grid-centerMd {
    text-align: center;
  }
  .st-Grid-centerMd > .st-Grid_Item {
    text-align: left;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grid-centerLg {
    text-align: center;
  }
  .st-Grid-centerLg > .st-Grid_Item {
    text-align: left;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grid-centerXl {
    text-align: center;
  }
  .st-Grid-centerXl > .st-Grid_Item {
    text-align: left;
  }
}

/**
 * 要素を右寄せ、要素内は左寄せ。
 */
.st-Grid-right {
  text-align: right;
}

.st-Grid-right > .st-Grid_Item {
  text-align: left;
}

@media print, screen and (min-width: 768px) {
  .st-Grid-rightMd {
    text-align: right;
  }
  .st-Grid-rightMd > .st-Grid_Item {
    text-align: left;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grid-rightLg {
    text-align: right;
  }
  .st-Grid-rightLg > .st-Grid_Item {
    text-align: left;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grid-rightXl {
    text-align: right;
  }
  .st-Grid-rightXl > .st-Grid_Item {
    text-align: left;
  }
}

/**
 * 要素の反転。
 */
.st-Grid-reverse {
  text-align: left;
  direction: rtl;
}

.st-Grid-reverse > .st-Grid_Item {
  text-align: left;
  direction: ltr;
}

@media print, screen and (min-width: 768px) {
  .st-Grid-reversMd {
    text-align: left;
    direction: rtl;
  }
  .st-Grid-reversMd > .st-Grid_Item {
    text-align: left;
    direction: ltr;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grid-reverseLg {
    text-align: left;
    direction: rtl;
  }
  .st-Grid-reverseLg > .st-Grid_Item {
    text-align: left;
    direction: ltr;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grid-reverseXl {
    text-align: left;
    direction: rtl;
  }
  .st-Grid-reverseXl > .st-Grid_Item {
    text-align: left;
    direction: ltr;
  }
}

/*
---
name: Grids
category: Structure
tag: Layout
---

バリエーションの豊富なグリッドシステムです。親要素（`.st-Grids`）にクラスを追加することで、1/2や1/3のような均等なカラムや、8/12と4/12のようなカラムの指定ができます。

カラム間の余白は幅を`$st-grids-column-gap`、高さを`$st-grids-row-gap`で統一しています。

`.st-Grids`同士が同じ階層にある場合（`.st-Grids + .st-Grids`）には`.st-Grids`の間に余白がつきます。

以下のような指定ができます。

- `.st-Grids-col2`のように1/2から1/5までの均等なカラム指定。
- `.st-Grids-col8to4`のように1/12と11/12から5/12と7/12、7/12と5/12から11/12と1/12までの合計10パターンのカラム指定。
- `.st-Grids-col2Md`のように`Md`、`Lg`、`Xl`を追加してブレイクポイントの指定。
- `.st-Grids-middle`のようにカラムの垂直位置を中央揃え。
- `.st-Grids-noGap`でカラム間のガターを0にする。
- `.st-Grids-narrow`でカラム間のガターを最小にする。

### 均等なカラム指定。

```jade
.st-Grids.st-Grids-col2Md
  .st-Grids_Item
    .test-Box One<br>1/1 → 1/2
  .st-Grids_Item
    .test-Box Two<br>1/1 → 1/2

.st-Grids.st-Grids-col2.st-Grids-col3Md
  .st-Grids_Item
    .test-Box One<br>1/2 → 1/3
  .st-Grids_Item
    .test-Box Two<br>1/2 → 1/3
  .st-Grids_Item
    .test-Box Three<br>1/2 → 1/3
  .st-Grids_Item
    .test-Box Four<br>1/2 → 1/3
```

### 8/12と4/12と4/12と8/12のカラム指定。

```jade
.st-Grids.st-Grids-col8to4Md
  .st-Grids_Item
    .test-Box One<br>1/1 → 8/12
  .st-Grids_Item
    .test-Box Two<br>1/1 → 4/12

.st-Grids.st-Grids-col4to8Md
  .st-Grids_Item
    .test-Box One <br>1/1 → 4/12
  .st-Grids_Item
    .test-Box Two<br>1/1 → 8/12
```

### 8/12と4/12のカラム指定かつ、`md`以上で要素を反転。

```jade
.st-Grids.st-Grids-col8to4Md.st-Grids-reversMd
  .st-Grids_Item
    .test-Box One<br>1/1 → 8/12
  .st-Grids_Item
    .test-Box Two<br>1/1 → 4/12
```

### カラムの垂直位置を中央揃え。

```jade
.st-Grids.st-Grids-middleMd.st-Grids-col2Md
  .st-Grids_Item
    .test-Box One<br>1/1 → 6/12<br>.st-Grids-middle<br>.st-Grids-middle
  .st-Grids_Item
    .test-Box Two<br>1/1 → 6/12
```

### カラム間のガターを0にします。

```jade
.st-Grids.st-Grids-col3Md.st-Grids-noGap
  .st-Grids_Item
    .test-Box One<br>1/1 → 1/3
  .st-Grids_Item
    .test-Box Two<br>1/1 → 1/3
  .st-Grids_Item
    .test-Box Three<br>1/1 → 1/3
```

### カラム間のガターを最小にします。

```jade
.st-Grids.st-Grids-col3Md.st-Grids-narrow
  .st-Grids_Item
    .test-Box One<br>1/1 → 1/3
  .st-Grids_Item
    .test-Box Two<br>1/1 → 1/3
  .st-Grids_Item
    .test-Box Three<br>1/1 → 1/3
```
*/
.st-Grids, .st-Grids-middle, .st-Grids-bottom {
  margin-left: -15px;
  padding-left: 0;
  list-style-type: none;
  display: block;
  font-size: 0;
  /* 同じ階層にある`.st-Grids`同士の間に余白を入れます。 */
}

@media print, screen and (min-width: 768px) {
  .st-Grids, .st-Grids-middle, .st-Grids-bottom {
    margin-left: -30px;
  }
}

.st-Grids:not(:first-of-type), .st-Grids-middle:not(:first-of-type), .st-Grids-bottom:not(:first-of-type) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids:not(:first-of-type), .st-Grids-middle:not(:first-of-type), .st-Grids-bottom:not(:first-of-type) {
    margin-top: 30px;
  }
}

.st-Grids_Item {
  display: inline-block;
  width: 100%;
  padding-left: 15px;
  font-size: medium;
  font-size: 1rem;
  vertical-align: top;
}

@media print, screen and (min-width: 768px) {
  .st-Grids_Item {
    padding-left: 30px;
  }
}

/* 1 Column */
.st-Grids_Item:nth-of-type(n+2) {
  margin-top: 15px;
}

/* 2 Columns */
.st-Grids-col2 > .st-Grids_Item {
  width: 50%;
  /**
   * いったんすべての`margin-top`をリセットします。
   * `:nth-of-type(n+1)`は1つ目以降のすべての要素に適応されます。
   * リセット後に対象となる要素に`margin-top`を指定します。
   */
}

.st-Grids-col2 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col2 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-col2Md > .st-Grids_Item {
    width: 50%;
  }
  .st-Grids-col2Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col2Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col2Lg > .st-Grids_Item {
    width: 50%;
  }
  .st-Grids-col2Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col2Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col2Xl > .st-Grids_Item {
    width: 50%;
  }
  .st-Grids-col2Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col2Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

/* 3 Columns */
.st-Grids-col3 > .st-Grids_Item {
  width: 33.33333%;
}

.st-Grids-col3 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col3 > .st-Grids_Item:nth-of-type(n+4) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-col3Md > .st-Grids_Item {
    width: 33.33333%;
  }
  .st-Grids-col3Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col3Md > .st-Grids_Item:nth-of-type(n+4) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col3Lg > .st-Grids_Item {
    width: 33.33333%;
  }
  .st-Grids-col3Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col3Lg > .st-Grids_Item:nth-of-type(n+4) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col3Xl > .st-Grids_Item {
    width: 33.33333%;
  }
  .st-Grids-col3Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col3Xl > .st-Grids_Item:nth-of-type(n+4) {
    margin-top: 30px;
  }
}

/* 4 Columns */
.st-Grids-col4 > .st-Grids_Item {
  width: 25%;
}

.st-Grids-col4 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col4 > .st-Grids_Item:nth-of-type(n+5) {
  margin-top: 15px;
}



@media print, screen and (min-width: 768px) {
  .st-Grids-col4Md > .st-Grids_Item {
    width: 25%;
  }
  .st-Grids-col4Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col4Md > .st-Grids_Item:nth-of-type(n+5) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col4Lg > .st-Grids_Item {
    width: 25%;
  }
  .st-Grids-col4Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col4Lg > .st-Grids_Item:nth-of-type(n+5) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col4Xl > .st-Grids_Item {
    width: 25%;
  }
  .st-Grids-col4Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col4Xl > .st-Grids_Item:nth-of-type(n+5) {
    margin-top: 30px;
  }
}

/* 5 Columns */
.st-Grids-col5 > .st-Grids_Item {
  width: 20%;
}

.st-Grids-col5 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col5 > .st-Grids_Item:nth-of-type(n+6) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-col5Md > .st-Grids_Item {
    width: 20%;
  }
  .st-Grids-col5Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col5Md > .st-Grids_Item:nth-of-type(n+6) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col5Lg > .st-Grids_Item {
    width: 20%;
  }
  .st-Grids-col5Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col5Lg > .st-Grids_Item:nth-of-type(n+6) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col5Xl > .st-Grids_Item {
    width: 20%;
  }
  .st-Grids-col5Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col5Xl > .st-Grids_Item:nth-of-type(n+6) {
    margin-top: 30px;
  }
}

/**
 * カラム間のガターを0にします。
 */
.st-Grids-noGap {
  margin-left: 0;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-noGap {
    margin-left: 0;
  }
}

.st-Grids-noGap > .st-Grids_Item {
  padding-left: 0;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-noGap > .st-Grids_Item {
    padding-left: 0;
  }
}

/**
 * カラム間のガターを最小にします。
 */
.st-Grids-narrow {
  margin-left: -1px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-narrow {
    margin-left: -1px;
  }
}

.st-Grids-narrow > .st-Grids_Item {
  padding-left: 1px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-narrow > .st-Grids_Item {
    padding-left: 1px;
  }
}

/**
 * 要素の垂直位置を真ん中寄せ。
 */
.st-Grids-middle > .st-Grids_Item {
  vertical-align: middle;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-middleMd > .st-Grids_Item {
    vertical-align: middle;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-middleLg > .st-Grids_Item {
    vertical-align: middle;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-middleXl > .st-Grids_Item {
    vertical-align: middle;
  }
}

/**
 * 要素の垂直位置を下寄せ。
 */
.st-Grids-bottom > .st-Grids_Item {
  vertical-align: bottom;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-bottomMd > .st-Grids_Item {
    vertical-align: bottom;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-bottomLg > .st-Grids_Item {
    vertical-align: bottom;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-bottomXl > .st-Grids_Item {
    vertical-align: bottom;
  }
}

/**
 * `.st-Grids_Item`の表示順を逆にします。
 * A,B → B,A
 */
.st-Grids-reverse {
  text-align: left;
  direction: rtl;
}

.st-Grids-reverse > .st-Grids_Item {
  text-align: left;
  direction: ltr;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-reversMd {
    text-align: left;
    direction: rtl;
  }
  .st-Grids-reversMd > .st-Grids_Item {
    text-align: left;
    direction: ltr;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-reverseLg {
    text-align: left;
    direction: rtl;
  }
  .st-Grids-reverseLg > .st-Grids_Item {
    text-align: left;
    direction: ltr;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-reverseXl {
    text-align: left;
    direction: rtl;
  }
  .st-Grids-reverseXl > .st-Grids_Item {
    text-align: left;
    direction: ltr;
  }
}

/* 1/12 11/12, 11/12 1/12 */
.st-Grids-col1to11 > .st-Grids_Item:nth-of-type(odd) {
  width: 8.33333%;
}

.st-Grids-col1to11 > .st-Grids_Item:nth-of-type(even) {
  width: 91.66667%;
}

.st-Grids-col1to11 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col1to11 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

.st-Grids-col11to1 > .st-Grids_Item:nth-of-type(odd) {
  width: 91.66667%;
}

.st-Grids-col11to1 > .st-Grids_Item:nth-of-type(even) {
  width: 8.33333%;
}

.st-Grids-col11to1 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col11to1 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-col1to11Md > .st-Grids_Item:nth-of-type(odd) {
    width: 8.33333%;
  }
  .st-Grids-col1to11Md > .st-Grids_Item:nth-of-type(even) {
    width: 91.66667%;
  }
  .st-Grids-col1to11Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col1to11Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col11to1Md > .st-Grids_Item:nth-of-type(odd) {
    width: 91.66667%;
  }
  .st-Grids-col11to1Md > .st-Grids_Item:nth-of-type(even) {
    width: 8.33333%;
  }
  .st-Grids-col11to1Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col11to1Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col1to11Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 8.33333%;
  }
  .st-Grids-col1to11Lg > .st-Grids_Item:nth-of-type(even) {
    width: 91.66667%;
  }
  .st-Grids-col1to11Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col1to11Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col11to1Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 91.66667%;
  }
  .st-Grids-col11to1Lg > .st-Grids_Item:nth-of-type(even) {
    width: 8.33333%;
  }
  .st-Grids-col11to1Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col11to1Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col1to11Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 8.33333%;
  }
  .st-Grids-col1to11Xl > .st-Grids_Item:nth-of-type(even) {
    width: 91.66667%;
  }
  .st-Grids-col1to11Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col1to11Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col11to1Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 91.66667%;
  }
  .st-Grids-col11to1Xl > .st-Grids_Item:nth-of-type(even) {
    width: 8.33333%;
  }
  .st-Grids-col11to1Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col11to1Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

/* 2/12 10/12, 10/12 2/12 */
.st-Grids-col2to10 > .st-Grids_Item:nth-of-type(odd) {
  width: 16.66667%;
}

.st-Grids-col2to10 > .st-Grids_Item:nth-of-type(even) {
  width: 83.33333%;
}

.st-Grids-col2to10 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col2to10 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

.st-Grids-col10to2 > .st-Grids_Item:nth-of-type(odd) {
  width: 83.33333%;
}

.st-Grids-col10to2 > .st-Grids_Item:nth-of-type(even) {
  width: 16.66667%;
}

.st-Grids-col10to2 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col10to2 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-col2to10Md > .st-Grids_Item:nth-of-type(odd) {
    width: 16.66667%;
  }
  .st-Grids-col2to10Md > .st-Grids_Item:nth-of-type(even) {
    width: 83.33333%;
  }
  .st-Grids-col2to10Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col2to10Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col10to2Md > .st-Grids_Item:nth-of-type(odd) {
    width: 83.33333%;
  }
  .st-Grids-col10to2Md > .st-Grids_Item:nth-of-type(even) {
    width: 16.66667%;
  }
  .st-Grids-col10to2Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col10to2Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col2to10Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 16.66667%;
  }
  .st-Grids-col2to10Lg > .st-Grids_Item:nth-of-type(even) {
    width: 83.33333%;
  }
  .st-Grids-col2to10Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col2to10Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col10to2Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 83.33333%;
  }
  .st-Grids-col10to2Lg > .st-Grids_Item:nth-of-type(even) {
    width: 16.66667%;
  }
  .st-Grids-col10to2Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col10to2Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col2to10Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 16.66667%;
  }
  .st-Grids-col2to10Xl > .st-Grids_Item:nth-of-type(even) {
    width: 83.33333%;
  }
  .st-Grids-col2to10Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col2to10Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col10to2Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 83.33333%;
  }
  .st-Grids-col10to2Xl > .st-Grids_Item:nth-of-type(even) {
    width: 16.66667%;
  }
  .st-Grids-col10to2Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col10to2Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

/* 3/12 9/12, 9/12 3/12 */
.st-Grids-col3to9 > .st-Grids_Item:nth-of-type(odd) {
  width: 25%;
}

.st-Grids-col3to9 > .st-Grids_Item:nth-of-type(even) {
  width: 75%;
}

.st-Grids-col3to9 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col3to9 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

.st-Grids-col9to3 > .st-Grids_Item:nth-of-type(odd) {
  width: 75%;
}

.st-Grids-col9to3 > .st-Grids_Item:nth-of-type(even) {
  width: 25%;
}

.st-Grids-col9to3 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col9to3 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-col3to9Md > .st-Grids_Item:nth-of-type(odd) {
    width: 25%;
  }
  .st-Grids-col3to9Md > .st-Grids_Item:nth-of-type(even) {
    width: 75%;
  }
  .st-Grids-col3to9Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col3to9Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col9to3Md > .st-Grids_Item:nth-of-type(odd) {
    width: 75%;
  }
  .st-Grids-col9to3Md > .st-Grids_Item:nth-of-type(even) {
    width: 25%;
  }
  .st-Grids-col9to3Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col9to3Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col3to9Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 25%;
  }
  .st-Grids-col3to9Lg > .st-Grids_Item:nth-of-type(even) {
    width: 75%;
  }
  .st-Grids-col3to9Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col3to9Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col9to3Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 75%;
  }
  .st-Grids-col9to3Lg > .st-Grids_Item:nth-of-type(even) {
    width: 25%;
  }
  .st-Grids-col9to3Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col9to3Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col3to9Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 25%;
  }
  .st-Grids-col3to9Xl > .st-Grids_Item:nth-of-type(even) {
    width: 75%;
  }
  .st-Grids-col3to9Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col3to9Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col9to3Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 75%;
  }
  .st-Grids-col9to3Xl > .st-Grids_Item:nth-of-type(even) {
    width: 25%;
  }
  .st-Grids-col9to3Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col9to3Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

/* 4/12 8/12, 8/12 4/12 */
.st-Grids-col4to8 > .st-Grids_Item:nth-of-type(odd) {
  width: 33.33333%;
}

.st-Grids-col4to8 > .st-Grids_Item:nth-of-type(even) {
  width: 66.66667%;
}

.st-Grids-col4to8 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col4to8 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

.st-Grids-col8to4 > .st-Grids_Item:nth-of-type(odd) {
  width: 66.66667%;
}

.st-Grids-col8to4 > .st-Grids_Item:nth-of-type(even) {
  width: 33.33333%;
}

.st-Grids-col8to4 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col8to4 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-col4to8Md > .st-Grids_Item:nth-of-type(odd) {
    width: 33.33333%;
  }
  .st-Grids-col4to8Md > .st-Grids_Item:nth-of-type(even) {
    width: 66.66667%;
  }
  .st-Grids-col4to8Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col4to8Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col8to4Md > .st-Grids_Item:nth-of-type(odd) {
    width: 66.66667%;
  }
  .st-Grids-col8to4Md > .st-Grids_Item:nth-of-type(even) {
    width: 33.33333%;
  }
  .st-Grids-col8to4Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col8to4Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col4to8Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 33.33333%;
  }
  .st-Grids-col4to8Lg > .st-Grids_Item:nth-of-type(even) {
    width: 66.66667%;
  }
  .st-Grids-col4to8Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col4to8Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col8to4Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 66.66667%;
  }
  .st-Grids-col8to4Lg > .st-Grids_Item:nth-of-type(even) {
    width: 33.33333%;
  }
  .st-Grids-col8to4Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col8to4Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col4to8Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 33.33333%;
  }
  .st-Grids-col4to8Xl > .st-Grids_Item:nth-of-type(even) {
    width: 66.66667%;
  }
  .st-Grids-col4to8Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col4to8Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col8to4Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 66.66667%;
  }
  .st-Grids-col8to4Xl > .st-Grids_Item:nth-of-type(even) {
    width: 33.33333%;
  }
  .st-Grids-col8to4Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col8to4Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

/* 5/12 7/12, 7/12 5/12 */
.st-Grids-col5to7 > .st-Grids_Item:nth-of-type(odd) {
  width: 41.66667%;
}

.st-Grids-col5to7 > .st-Grids_Item:nth-of-type(even) {
  width: 58.33333%;
}

.st-Grids-col5to7 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col5to7 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

.st-Grids-col7to5 > .st-Grids_Item:nth-of-type(odd) {
  width: 58.33333%;
}

.st-Grids-col7to5 > .st-Grids_Item:nth-of-type(even) {
  width: 41.66667%;
}

.st-Grids-col7to5 > .st-Grids_Item:nth-of-type(n+1) {
  margin-top: 0;
}

.st-Grids-col7to5 > .st-Grids_Item:nth-of-type(n+3) {
  margin-top: 15px;
}

@media print, screen and (min-width: 768px) {
  .st-Grids-col5to7Md > .st-Grids_Item:nth-of-type(odd) {
    width: 41.66667%;
  }
  .st-Grids-col5to7Md > .st-Grids_Item:nth-of-type(even) {
    width: 58.33333%;
  }
  .st-Grids-col5to7Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col5to7Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col7to5Md > .st-Grids_Item:nth-of-type(odd) {
    width: 58.33333%;
  }
  .st-Grids-col7to5Md > .st-Grids_Item:nth-of-type(even) {
    width: 41.66667%;
  }
  .st-Grids-col7to5Md > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col7to5Md > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Grids-col5to7Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 41.66667%;
  }
  .st-Grids-col5to7Lg > .st-Grids_Item:nth-of-type(even) {
    width: 58.33333%;
  }
  .st-Grids-col5to7Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col5to7Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col7to5Lg > .st-Grids_Item:nth-of-type(odd) {
    width: 58.33333%;
  }
  .st-Grids-col7to5Lg > .st-Grids_Item:nth-of-type(even) {
    width: 41.66667%;
  }
  .st-Grids-col7to5Lg > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col7to5Lg > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 1440px) {
  .st-Grids-col5to7Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 41.66667%;
  }
  .st-Grids-col5to7Xl > .st-Grids_Item:nth-of-type(even) {
    width: 58.33333%;
  }
  .st-Grids-col5to7Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col5to7Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
  .st-Grids-col7to5Xl > .st-Grids_Item:nth-of-type(odd) {
    width: 58.33333%;
  }
  .st-Grids-col7to5Xl > .st-Grids_Item:nth-of-type(even) {
    width: 41.66667%;
  }
  .st-Grids-col7to5Xl > .st-Grids_Item:nth-of-type(n+1) {
    margin-top: 0;
  }
  .st-Grids-col7to5Xl > .st-Grids_Item:nth-of-type(n+3) {
    margin-top: 30px;
  }
}

/*
---
name: st-Header
category: Structure
tag: Global
---
*/
.st-Header {
  background-color: #fff;
}

.st-Header_Inner {
  max-width: 1000px;
  margin: auto;
  padding: 3px 15px 10px;
  font-size: 0;
}

@media print, screen and (min-width: 1024px) {
  .st-Header_Inner {
    padding: 19px 0;
  }
}

.st-Header_Site {
  display: inline-block;
  width: calc(100% - 45px);
  vertical-align: middle;
  font-size: 1rem;
}

.st-Header_Site:after {
  content: "";
  display: block;
  clear: both;
}

@media print, screen and (min-width: 1024px) {
  .st-Header_Site {
    width: calc(100% - 66px);
    vertical-align: top;
  }
}

.st-Header_Brand {
  display: inline-block;
  width: 45px;
  vertical-align: middle;
  font-size: 1rem;
}

@media print, screen and (min-width: 1024px) {
  .st-Header_Brand {
    width: 66px;
    vertical-align: top;
  }
}

.st-Header_SiteImage {
  width: 125px;
}

@media print, screen and (min-width: 1024px) {
  .st-Header_SiteImage {
    width: 165px;
    float: left;
  }
}

.st-Header_SiteText {
  margin-top: 4px;
  font-size: 0.64286rem;
  line-height: 1.195;
  letter-spacing: 0.03em;
}

@media print, screen and (min-width: 1024px) {
  .st-Header_SiteText {
    float: left;
    margin-left: 18px;
    font-size: 1.07143rem;
  }
}

.st-Header_BrandImage {
  width: 100%;
}

/*
---
name: Heading2
category: Structure
tag: Layout
---

h2相当の見出し自身の余白を指定します。

```jade
h2
p.st-Text .st-Text
p.st-Text .st-Text
```
*/
h1 {
  font-size: 1.6em;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1;
}

h1 span {
  font-size: 13px;
  font-weight: normal;
  line-height: 1.2;
}
@media print, screen and (min-width: 768px) {
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
    line-height: 1.2;
  }
}
/*
---
name: Heading2
category: Structure
tag: Layout
---

h2相当の見出し自身の余白を指定します。

```jade
h2
p.st-Text .st-Text
p.st-Text .st-Text
```
*/
h2 {
  margin-bottom: 25px;
  font-size: 24px;
  border-bottom: #0082ca 4px solid;
  padding-bottom: 15px;
  margin-top: 20px;
 /* display: flex; */
 position: relative;
}

@media print, screen and (min-width: 768px) {
  h2 {
    margin-bottom: 30px;
    margin-top: 40px;
  }
}

h2:nth-of-type(1) {
  margin-top: 0;
}
/* h2 span{
flex: 1;
} */
.st-Select{
right: 0;
bottom: 15px;
}
@media print, screen and (min-width: 768px) {
  .st-Select{
    position: absolute;
}
}

   .st-Select select {

    /* styling */
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
    font-size: 14px;

    /* reset */

    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
   select.pzpop {
    background-image:
      linear-gradient(45deg, transparent 50%, #0082ca 50%),
      linear-gradient(135deg, #0082ca 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      calc(100% - 15px) calc(1em + 2px),
      calc(100% - 10px) calc(1em + 2px),
      calc(100% - 2.2em) 0.5em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
  }

  select.pzpop:focus {
    background-repeat: no-repeat;
    border-color: #0082ca;
    outline: 0;
  }



/* .st-Select select {
	width: 100%;
	padding: 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #dcdcdc;
	border-radius: 3px;
	background: #fff;

} */

/*
---
name: Heading3
category: Structure
tag: Layout
---

h3相当の見出し自身の余白を指定します。

```jade
h3.st-Heading3 .st-Heading3
p.st-Text .st-Text
p.st-Text .st-Text
```
*/
h3 {
  margin: 20px 0;
  background: url("/wp-content/themes/amsega/assets/img/Structure/h3_icon.png") no-repeat;
  background-size: 5px 100%;
  padding-left: 20px;
}

/*
---
name: Heading4
category: Structure
tag: Layout
---

h4相当の見出し自身の余白を指定します。

```jade
h4.st-Heading4 .st-Heading4
p.st-Text .st-Text
p.st-Text .st-Text
```
*/
.st-Heading4 {
  background: url(/wp-content/themes/amsega/assets/img/Structure/h4_bg.jpg) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/*
---
name: Heading5
category: Structure
tag: Layout
---

h5相当の見出し自身の余白を指定します。

```jade
h5.st-Heading5 .st-Heading5
p.st-Text .st-Text
p.st-Text .st-Text
```
*/
.st-Heading5 {
  margin-bottom: 20px;
  border-bottom: 1px solid #f6f6f6;
  font-size: 18px;
}

.st-Heading5 span {
  font-size: 12px;
}

/*
---
name: Home
category: Structure
tag: Layout
---

サイトトップページ（ホームページ）のワイヤーフレームのような大枠のレイアウトです。

```jade
```
*/
/*
---
name: Lead
category: Structure
tag: Layout
---

リード文自身の余白を指定します。

```jade
p.st-Lead
  b.sw-Lead .st-Lead
p.st-Text .st-Text
p.st-Text .st-Text
```
*/
.st-Lead {
  margin-bottom: 24px;
}

/*
---
name: PageHead
category: Structure
tag: Layout
---

下層ページのヘッダー部分。

```jade
header.st-PageHead
  h2.st-Heading2 .st-Heading2
  p.st-Text .st-Text
  p.st-Text .st-Text
```
*/
.st-PageHead {
  margin-bottom: 40px;
  background: url(/wp-content/themes/amsega/assets/img/Structure/bg.png) no-repeat 100% 100%;
  color: #fff;
  background-size: cover;
  text-align: center;
  padding: 15px 0;
}

@media print, screen and (min-width: 1024px) {
  .st-PageHead {
    padding: 30px 0;
  }
}

.st-TopHead {
  margin-bottom: 40px;
  background: url(/wp-content/themes/amsega/assets/img/Structure/bg.png) no-repeat;
  background-size: cover;
  text-align: center;
  padding: 15px;
}

@media print, screen and (min-width: 1024px) {
  .st-TopHead {
    padding: 20px 0;
  }
}

/*
---
name: Section2
category: Structure
tag: Layout
---

h2相当の見出しをラップするセクションの余白を指定します。

```jade
p.st-Text .st-Text
section.st-Section2
  h2.st-Heading2 .st-Heading2
  p.st-Text .st-Text
  p.st-Text .st-Text
section.st-Section2
  h2.st-Heading2 .st-Heading2
  p.st-Text .st-Text
```
*/
.st-Section2 + .st-Section2,
:not(.st-Section2) + .st-Section2 {
  margin-top: 50px;
}

.st-Section2 > :last-child {
  margin-bottom: 0;
}

/*
---
name: Section3
category: Structure
tag: Layout
---

h3相当の見出しをラップするセクションの余白を指定します。

```jade
p.st-Text .st-Text
section.st-Section3
  h3.st-Heading3 .st-Heading3
  p.st-Text .st-Text
  p.st-Text .st-Text
section.st-Section3
  h3.st-Heading3 .st-Heading3
  p.st-Text .st-Text
```
*/
.st-Section3 + .st-Section3,
:not(.st-Section3) + .st-Section3 {
  margin-top: 30px;
}

.st-Section3 > :last-child {
  margin-bottom: 0;
}

/*
---
name: Section4
category: Structure
tag: Layout
---

h4相当の見出しをラップするセクションの余白を指定します。

```jade
p.st-Text .st-Text
section.st-Section4
  h4.st-Heading4 .st-Heading4
  p.st-Text .st-Text
  p.st-Text .st-Text
section.st-Section4
  h4.st-Heading4 .st-Heading4
  p.st-Text .st-Text
```
*/
.st-Section4 + .st-Section4,
:not(.st-Section4) + .st-Section4 {
  margin-top: 30px;
}

.st-Section4 > :last-child {
  margin-bottom: 0;
}

/*
---
name: Section5
category: Structure
tag: Layout
---

h5相当の見出しをラップするセクションの余白を指定します。

```jade
p.st-Text .st-Text
section.st-Section5
  h5.st-Heading5 .st-Heading5
  p.st-Text .st-Text
  p.st-Text .st-Text
section.st-Section5
  h5.st-Heading5 .st-Heading5
  p.st-Text .st-Text
```
*/
.st-Section5 + .st-Section5,
:not(.st-Section5) + .st-Section5 {
  margin-top: 30px;
}

.st-Section5 > :last-child {
  margin-bottom: 0;
}

/*
---
name: PageHead
category: Structure
tag: Layout
---

下層ページのヘッダー部分。

```jade
header.st-PageHead
  h2.st-Heading2 .st-Heading2
  p.st-Text .st-Text
  p.st-Text .st-Text
```
*/
.st-SideNav ul {
  padding: 0;
  list-style: none;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
}

.st-SideNav li {
  border-bottom: 1px solid #dcdcdc;
  padding: 10px 20px;
}

.st-SideNav li:last-child {
  border-bottom: none;
}

.st-Sitemap {
  padding: 22px 15px;
  background-color: #f6f6f6;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap {
    padding: 24px 15px;
  }
}

.st-Sitemap .sw-Blank_Icon:after {
  font-size: 0.57143rem;
}

.st-Sitemap_Items {
  padding-left: 0;
  list-style-type: none;
  font-size: 0;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Items {
    text-align: center;
  }
}

.st-Sitemap_Item {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  font-size: 1rem;
}

.st-Sitemap_Item:nth-of-type(even) {
  padding-left: 15px;
}

.st-Sitemap_Item:nth-of-type(n+3) {
  margin-top: 10px;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Item {
    width: auto;
  }
  .st-Sitemap_Item:nth-of-type(even) {
    padding-left: 0;
  }
  .st-Sitemap_Item:nth-of-type(n+3) {
    margin-top: 0;
  }
  .st-Sitemap_Item + .st-Sitemap_Item {
    margin-left: 28px;
  }
}

.st-Sitemap_Link {
  font-size: 0.85714rem;
  line-height: 1.4;
  color: #000;
  text-decoration: none;
}

.st-Sitemap_Link:hover {
  text-decoration: underline;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Link {
    font-size: 0.85714rem;
  }
}

/*
---
name: SmallText
category: Structure
tag: Layout
---

補足情報などのテキストの余白を指定します。

```jade
p.st-Text .st-Text
.st-SmallText
  small .st-SmallText
.st-SmallText
  small .st-SmallText
```
*/
.st-SmallText + .st-SmallText,
:not(.st-SmallText) + .st-SmallText {
  margin-top: 10px;
}

/*
---
name: Sub
category: Structure
tag: Layout
---

カテゴリーサブページ（下層ページ）のワイヤーフレームのような大枠のレイアウトです。

```jade
```
*/
/*
---
name: Text
category: Structure
tag: Layout
---

通常のテキストの余白を指定します。

```jade
p.st-Text .st-Text
.st-Text .st-Text
p.st-Text .st-Text
```
*/
.st-Text + .st-Text,
:not(.st-Text) + .st-Text {
  margin-top: 16px;
}

.st-bold {
  font-weight: bold;
  line-height: 1.8;
}

.st-red {
  color: #f31515;
  line-height: 1.8;
}

.st-red_bold {
  font-weight: bold;
  color: #f31515;
  line-height: 1.8;
}

/*
---
name: Top
category: Structure
tag: Layout
---

カテゴリートップページのワイヤーフレームのような大枠のレイアウトです。

```jade
```
*/
.st-HeddingTop {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-self: start;
}
.st-HeddingTop .st-Label{
width: 55px ;
text-align: center;
}
@media print, screen and (min-width: 1024px) {
  .st-HeddingTop {
    padding: 12px 0;
    flex-direction: row;
    align-items: center;
  }
  .st-HeddingTop .st-Label{
    width: 100px ;

    }
}

.st-HeddingTop span {
  font-weight: normal;
}

.st-TopNav_box {
  color: #000;
  background: #fff;
  border-radius: 3px;
}
@media print, screen and (min-width: 1024px) {
  .st-TopNav_box{
  height: 215px;
  }
}

.st-TopNav_box .st-thumbnail img {
  height: 50px;
  margin: 10px auto;
}
.st-TopNav_box .st-thumbnail img.ufo{
  height: 50px;
}
.st-TopNav_box .st-thumbnail img.e-site{
  margin: 19px auto;
}
.st-TopNav_box .st-thumbnail img.pz-pop{
  height: 50px;
  margin: 20px auto;
}

@media print, screen and (min-width: 1024px) {
  .st-TopNav_box .st-thumbnail img {
    margin: 25px auto;
    height: 90px;
  }
  .st-TopNav_box .st-thumbnail img.ufo{
    height: 90px;
    margin: 15px auto;
  }
  .st-TopNav_box .st-thumbnail img.pz-pop{
    height: 80px;
    margin: 40px auto;
  }
}

.st-TopNav_box a {
  padding: 15px;
  display: block;
}

@media print, screen and (min-width: 1024px) {
  .st-TopNav_box a {
    padding: 23px 15px;
  }
}

.st-TopNav_box a.long {
  padding: 5px 0 6px;
}

@media print, screen and (min-width: 1024px) {
  .st-TopNav_box a.long {
    padding: 10px;
  }
}

.st-TopNav_box:hover {
  text-decoration: none;
  background-color: #d0f0ff;
}

.st-TopNav_box:hover .st-TopNav_Text {
  color: #0082ca;
}

.st-TopNav_box .st-TopNav_Text {
  font-size: 12px;
  font-weight: bold;
}

@media print, screen and (min-width: 1024px) {
  .st-TopNav_box .st-TopNav_Text {
    font-size: 15px;
  }
}

.st-TopNav_box .st-TopNav_Text span {
  font-size: 10px;
}

@media print, screen and (min-width: 1024px) {
  .st-TopNav_box .st-TopNav_Text span {
    font-size: 12px;
  }
}

.st-TopNav_box .st-blank {
  margin-top: -8px;
  line-height: 1.2;
}

@media print, screen and (min-width: 1024px) {
  .st-TopNav_box .st-blank {
    margin-top: -13px;
  }
}

.st-Membars {
  position: relative;
}

.st-MembarsIcon {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 35px;
}
.st-Navlabel{
  position: absolute;
  top: 5px;
  left: 5px;
}
.st-Label{
  border: 1px solid #FF7801;
  color: #FF7801;
  border-radius: 3px;
  font-size: 10px;
  padding: 2px 5px;
  margin-right: 10px;
}
.st-Label.prize{
  border: 1px solid #008E5D;
  color: #008E5D;
}

@media print, screen and (min-width: 1024px) {
  .st-MembarsIcon {
    width: 55px;
  }
  .st-Navlabel{
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .st-Label{

    font-size: 12px;
    padding: 2px 10px 0;
  }
}
.st-GlobalNav_Items .st-Label{
  padding: 1px 10px 0;
  display: inline-block;
  margin-bottom: 3px;
}

.st-BlankIcon {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 15px;
}

.st-TopNews,.st-TopPrize {
  margin-top: 0;
  overflow-y: scroll;
  height: 315px;
}

.st-TopNews ul {
  list-style: none;
  margin-left: -40px;
}

.st-TopNews li{
  background: #f6f6f6;
  border-bottom: 1px solid #fff;
}

.st-TopNews li a {
  display: block;
  padding: 20px;
}

.st-TopNews li a:hover {
  color: #000;
  background: #e3e3e3;

}
.st-TopNews li a:hover .sw-TopNews_title{
  font-weight: bold;
}

.st-TopNews .sw-Date {
  float: none;
  width: 100%;
}

.st-TopPrize_item{
  padding: 20px;
  background: #f6f6f6;
  border-bottom: 1px solid #fff;
}
a:hover .st-TopPrize_item{
  background: #e3e3e3;
}
a:hover .sw-TopNews_title{
  font-weight: bold;
  color: #000;
}
a:hover .sw-Date{
 color: #000;
}

@media print, screen and (min-width: 1024px) {
  .st-TopNews .sw-Date {
    float: left;
    width: 26%;
  }
  .st-TopPrize .sw-Date {
    float: left;
    width: 10%;
  }
}

.st-TopNews .sw-Date span.date {
  margin-right: 10px;
  font-size: 12px;
}

.st-TopNews .st-TopNews_title {
  overflow: hidden;
}

.st-Logo_newsbtn {
  display: inline-block;
  border: 1px solid #f6f6f6;
  padding: 15px;
  width: 100%;
  background: url("/wp-content/themes/amsega/assets/img/SiteWide/Icon/linGts.svg") no-repeat 99%;
  background-size: 15px;
}

@media print, screen and (min-width: 1024px) {
  .st-Logo_newsbtn {
    padding: 5px;
  }
}

.st-Logo_newsbtn img {
  float: left;
  margin-right: 10px;
}

.st-Logo_newsbtn h5 {
  padding: 0;
  float: left;
  margin-right: auto;
}

@media print, screen and (min-width: 1024px) {
  .st-Logo_newsbtn h5 {
    padding: 13px 0;
  }
}

.st-Logo_newsbtn .st-LogoMore {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-Logo_newsbtn .st-LogoMore {
    display: block;
    text-align: right;
    padding: 17px 40px 0 0;
  }
}

.st-Logo_newsbtn:hover {
  background: #d0f0ff url("/wp-content/themes/amsega/assets/img/SiteWide/Icon/linGts.svg") no-repeat 99%;
  background-size: 15px;
  color: #000;
}

.st-Logo_newsbtn:hover .st-LogoMore {
  color: #000;
}

.st-BottomNews {
  overflow-y: scroll;
  height: 150px;
}

.st-BottomNews ul {
  margin-left: -30px;
  list-style: none;
}

.st-BottomNews li span {
  font-size: 12px;
}

.st-BottomNews::-webkit-scrollbar,
.st-TopNews::-webkit-scrollbar,
.st-TopPrize::-webkit-scrollbar {
  width: 5px;
}

.st-BottomNews::-webkit-scrollbar-track,
.st-TopNews::-webkit-scrollbar-track,
.st-TopPrize::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ccc;
}

.st-BottomNews::-webkit-scrollbar-thumb,
.st-TopNews::-webkit-scrollbar-thumb,
.st-TopPrize::-webkit-scrollbar-thumb {
  background-color: #0082ca;
  border-radius: 10px;
}

.st-MoreRekative {
  position: relative;
}

.sw-ReadMore {
  border: 1px solid #dcdcdc;
  border-radius: 30px;
  padding: 15px;
  text-align: center;
  width: 80%;
  margin: 25px auto 0;
}

.sw-ReadMore a {
  display: inline-block;
}

@media print, screen and (min-width: 1024px) {
  .sw-ReadMore {
    border: none;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: right;
    margin: 0 auto 0;
  }
}

.sp {
  display: block;
}

@media print, screen and (min-width: 1024px) {
  .sp {
    display: none;
  }
}

/*
---
name: Wrapper
category: Structure
tag: Global
---
*/
.st-Wrapper {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
}

.st-Wrapper:after {
  content: "";
  display: block;
  clear: both;
}

.test-Box {
  padding: 2rem;
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #aaa;
}

/*
---
name: Area
category: WISYWIG
tag: Block
---

WISYWIG（ウィジウィグ）で入力した要素に対するスタイル。

```jade
.wisywig-Area
```
*/
.wisywig-Area > :first-child {
  margin-top: 0;
}

.wisywig-Area > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    color: #000 !important;
    /* Black prints faster: http://www.sanbeiji.com/archives/953 */
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/**
 * 印刷時のスタイル。
 */
@media print {
  .sw-TableScroll td,
  .sw-TableScroll th {
    white-space: inherit;
  }
}

/**
 * 印刷時とハイコントラストモード（IEとEdge）が有効なときのスタイル。
 */
@media screen and (-ms-high-contrast: active), print {
  .sw-FormCheckbox {
    position: static;
    width: auto;
    height: auto;
    margin: auto;
  }
  .sw-FormCheckbox + label {
    padding-left: 0;
  }
  .sw-FormCheckbox + label:before {
    display: none;
  }
  .sw-FormRadio {
    position: static;
    width: auto;
    height: auto;
    margin: auto;
  }
  .sw-FormRadio + label {
    padding-left: 0;
  }
  .sw-FormRadio + label:before {
    display: none;
  }
  .sw-FormSelect > select {
    -webkit-appearance: menulist;
       -moz-appearance: menulist;
            appearance: menulist;
  }
}