/**
* @license
*
* noc-net.noc-soumu:
* author: ings Co,.Ltd.
* version: 1.0.0
*/
@charset "utf-8";
/*
mod-icon
アイコンのスタイル
Weight: -1100
Style guide: icon
*/
.mod-icon {
display: block;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: middle;
text-align: center;
text-indent: -100%;
line-height: 0;
letter-spacing: 0;
color: #fff;
background-color: transparent;
background-repeat: no-repeat;
font-weight: normal;
font-size: 0;
border: 0;
}
/*
Default
ModIcon のデフォルトスタイル。タイプ指定が必須。タイプ指定がなければ何も表示されない
Weight: -100
Markup: h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
mod-text - デフォルトスタイル
Style guide: text.option.default
*/
/*
Option: Themes
Weight: -100
ModText のオプション（テーマ）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h1 text. h1 text. h1 text. h1 text. h1 text. h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
mod-text--text-indent - text-indent 1em
Style guide: text.option.text-indent
*/
.mod-text--text-indent {
text-indent: -1em;
padding-left: 1em;
}
/*
Option: Aligns
ModText のオプション（整列）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
mod-text--align-left - 左寄せ（デフォルト）
mod-text--align-center - 中央寄せ
mod-text--align-right - 右寄せ
mod-text--align-justify - 均等割り付け
Style guide: text.option.align
*/
.mod-text--align-left {
text-align: left !important;
}
.mod-text--align-center {
text-align: center !important;
}
.mod-text--align-right {
text-align: right;
}
.mod-text--align-justify {
text-align: justify;
}
/*
Option: letter-spacing
ModText のオプション（カーニング）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
mod-text--letter-spacing-14 - -0.14em
mod-text--letter-spacing-11 - -0.11em
mod-text--letter-spacing-10 - -0.1em
mod-text--letter-spacing-9 - -0.09em
mod-text--letter-spacing-8 - -0.08em
mod-text--letter-spacing-7 - -0.07em
mod-text--letter-spacing-6 - -0.06em
mod-text--letter-spacing-5 - -0.05em
mod-text--letter-spacing-4 - -0.04em
mod-text--letter-spacing-3 - -0.03em
mod-text--letter-spacing-2 - -0.02em
mod-text--letter-spacing-1 - -0.01em
mod-text--letter-spacing--2 - +2px
mod-text--letter-spacing--01 - +0.1em
Style guide: text.option.align
*/
.mod-text--letter-spacing-14 {
letter-spacing: -0.14em !important;
}
.mod-text--letter-spacing-11 {
letter-spacing: -0.11em !important;
}
.mod-text--letter-spacing-10 {
letter-spacing: -0.1em !important;
}
.mod-text--letter-spacing-9 {
letter-spacing: -0.09em !important;
}
.mod-text--letter-spacing-8 {
letter-spacing: -0.08em !important;
}
.mod-text--letter-spacing-7 {
letter-spacing: -0.07em !important;
}
.mod-text--letter-spacing-6 {
letter-spacing: -0.06em !important;
}
.mod-text--letter-spacing-5 {
letter-spacing: -0.05em !important;
}
.mod-text--letter-spacing-4 {
letter-spacing: -0.04em !important;
}
.mod-text--letter-spacing-3 {
letter-spacing: -0.03em !important;
}
.mod-text--letter-spacing-2 {
letter-spacing: -0.02em !important;
}
.mod-text--letter-spacing-1 {
letter-spacing: -0.01em !important;
}
.mod-text--letter-spacing--2 {
letter-spacing: 2px !important;
}
.mod-text--letter-spacing--01 {
letter-spacing: 0.1em !important;
}
/*
Option: Ellipsis
ModText のオプション（省略）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
mod-text--ellipsis-false - 省略しない（デフォルト）
mod-text--ellipsis-true - 省略する
Style guide: text.option.ellipsis
*/
.mod-text--ellipsis-true {
overflow: hidden;
width: 100%;
white-space: nowrap;
word-break: normal;
word-wrap: normal;
text-overflow: ellipsis;
}
/*
Option: Link Underlines
ModText のオプション（リンクのアンダーライン）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
mod-text--underline-false - アンダーラインなし（デフォルト）
mod-text--underline-true - アンダーラインあり
Style guide: text.option.underline
*/
.mod-text--underline-true {
text-decoration: underline;
}
/*
Option: Inline
ModText のオプション（インライン）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
mod-text--inline-false - ブロック表示（デフォルト）
mod-text--inline-true - インライン表示
Style guide: text.option.inline
*/
.mod-text--inline-true {
display: inline;
}
/*
Option: Size
ModText のオプション（文字サイズ）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
mod-text--size-12to10 - レスポンシブスタイル PC 12px SP10px 相当
mod-text--size-14to12 - レスポンシブスタイル PC 14px SP11px 相当
mod-text--size-14to11 - レスポンシブスタイル PC 14px SP12px 相当
mod-text--size-13to11 - レスポンシブスタイル PC 13px SP11px 相当
mod-text--size-12to14 - レスポンシブスタイル PC 12px SP14px 相当
mod-text--size-16to14 - レスポンシブスタイル PC 16px SP14px 相当
mod-text--size-18to14 - レスポンシブスタイル PC 16px SP14px 相当
mod-text--size-18to15 - レスポンシブスタイル PC 16px SP15px 相当
mod-text--size-16to12 - レスポンシブスタイル PC 16px SP12px 相当
mod-text--size-16to20 - レスポンシブスタイル PC 24px SP20px 相当
mod-text--size-20to12 - レスポンシブスタイル PC 20px SP12px 相当
mod-text--size-20to13 - レスポンシブスタイル PC 20px SP13px 相当
mod-text--size-20to14 - レスポンシブスタイル PC 20px SP14px 相当
mod-text--size-20to15 - レスポンシブスタイル PC 20px SP15px 相当
mod-text--size-20to16 - レスポンシブスタイル PC 20px SP16px 相当
mod-text--size-20to24 - レスポンシブスタイル PC 20px SP24px 相当
mod-text--size-23to15 - レスポンシブスタイル PC 23px SP15px 相当
mod-text--size-24to20 - レスポンシブスタイル PC 24px SP20px 相当
mod-text--size-30to20 - レスポンシブスタイル PC 30px SP20px 相当
mod-text--size-34to20 - レスポンシブスタイル PC 34px SP20px 相当
mod-text--size-34to18 - レスポンシブスタイル PC 34px SP18px 相当
mod-text--size-36to18 - レスポンシブスタイル PC 36px SP18px 相当
mod-text--size-33to17 - レスポンシブスタイル PC 33px SP17px 相当
mod-text--size-40to28 - レスポンシブスタイル PC 40px SP28px 相当
mod-text--size-45to35 - レスポンシブスタイル PC 45px SP35px 相当
mod-text--size-40to22 - レスポンシブスタイル PC 40px SP22px 相当
mod-text--size-24to15 - レスポンシブスタイル PC 24px SP15px 相当
mod-text--size-24to13 - レスポンシブスタイル PC 24px SP13px 相当
mod-text--size-28to16 - レスポンシブスタイル PC 28px SP16px 相当
mod-text--size-26to12 - レスポンシブスタイル PC 26px SP12px 相当
mod-text--size-30to18 - レスポンシブスタイル PC 30px SP18px 相当
mod-text--size-24to12 - レスポンシブスタイル PC 24px SP12px 相当
mod-text--size-24to14 - レスポンシブスタイル PC 24px SP14px 相当
mod-text--size-22to13 - レスポンシブスタイル PC 22px SP13px 相当
mod-text--size-18to12 - レスポンシブスタイル PC 18px SP12px 相当
mod-text--size-18to13 - レスポンシブスタイル PC 18px SP13px 相当
mod-text--size-18to11 - レスポンシブスタイル PC 18px SP11px 相当
mod-text--size-17to11 - レスポンシブスタイル PC 17px SP11px 相当
mod-text--size-16to11 - レスポンシブスタイル PC 16px SP11px 相当
mod-text--size-15to11 - レスポンシブスタイル PC 15px SP11px 相当
mod-text--size-17to10 - レスポンシブスタイル PC 17px SP10px 相当
mod-text--size-12to8 - レスポンシブスタイル PC 12px SP8px 相当
mod-text--size-14to10 - レスポンシブスタイル PC 14px SP10px 相当
mod-text--size-28to14 - レスポンシブスタイル PC 28px SP14px 相当
mod-text--size-22to14 - レスポンシブスタイル PC 22px SP14px 相当
mod-text--size-16to13 - レスポンシブスタイル PC 16px SP13px 相当
mod-text--size-18to13 - レスポンシブスタイル PC 18px SP13px 相当
mod-text--size-19to14 - レスポンシブスタイル PC 19px SP14px 相当
mod-text--size-28to24 - レスポンシブスタイル PC 28px SP24px 相当
mod-text--size-22to18 - レスポンシブスタイル PC 22px SP18px 相当
mod-text--size-23to16 - レスポンシブスタイル PC 23px SP16px 相当
mod-text--size-24to16 - レスポンシブスタイル PC 24px SP16px 相当
mod-text--size-26to16 - レスポンシブスタイル PC 24px SP16px 相当
mod-text--size-10 - 10px 相当
mod-text--size-11 - 11px 相当
mod-text--size-12 - 12px 相当
mod-text--size-13 - 13px 相当
mod-text--size-14 - 14px 相当（デフォルト）
mod-text--size-16 - 16px 相当
mod-text--size-17 - 17px 相当
mod-text--size-15 - 15px 相当
mod-text--size-18 - 18px 相当
mod-text--size-20 - 20px 相当
mod-text--size-22 - 22px 相当
mod-text--size-23 - 23px 相当
mod-text--size-24 - 24px 相当
mod-text--size-30 - 30px 相当
mod-text--size-34 - 34px 相当
mod-text--size-36 - 36px 相当
mod-text--size-38 - 38px 相当
Style guide: text.option.size
*/
.mod-text--size-12to10 {
font-size: 0.858rem !important;
}
.mod-text--size-14to12 {
font-size: 1rem !important;
}
.mod-text--size-14to11 {
font-size: 1rem !important;
}
.mod-text--size-13to11 {
font-size: 0.929rem !important;
}
.mod-text--size-12to14 {
font-size: 0.858rem !important;
}
.mod-text--size-16to14 {
font-size: 1.143rem !important;
}
.mod-text--size-18to11 {
font-size: 1.286rem !important;
}
.mod-text--size-17to11 {
font-size: 1.215rem !important;
}
.mod-text--size-16to11 {
font-size: 1.143rem !important;
}
.mod-text--size-15to11 {
font-size: 1.072rem !important;
}
.mod-text--size-18to14 {
font-size: 1.286rem !important;
}
.mod-text--size-18to15 {
font-size: 1.286rem !important;
}
.mod-text--size-16to12 {
font-size: 1.143rem !important;
}
.mod-text--size-16to20 {
font-size: 1.143rem !important;
}
.mod-text--size-20to12 {
font-size: 1.429rem !important;
}
.mod-text--size-20to13 {
font-size: 1.429rem !important;
}
.mod-text--size-20to15 {
font-size: 1.429rem !important;
}
.mod-text--size-20to24 {
font-size: 1.429rem !important;
}
.mod-text--size-23to15 {
font-size: 1.643rem !important;
}
.mod-text--size-22to13 {
font-size: 1.572rem !important;
}
.mod-text--size-24to13 {
font-size: 1.715rem !important;
}
.mod-text--size-24to14 {
font-size: 1.715rem !important;
}
.mod-text--size-24to20 {
font-size: 1.715rem !important;
}
.mod-text--size-26to12 {
font-size: 1.858rem !important;
}
.mod-text--size-26to16 {
font-size: 1.858rem !important;
}
.mod-text--size-28to16 {
font-size: 2rem !important;
}
.mod-text--size-30to18 {
font-size: 2.143rem !important;
}
.mod-text--size-36to18 {
font-size: 2.572rem !important;
}
.mod-text--size-33to17 {
font-size: 2.358rem !important;
}
.mod-text--size-34to18 {
font-size: 2.429rem !important;
}
.mod-text--size-45to35 {
font-size: 3.215rem !important;
}
.mod-text--size-40to22 {
font-size: 2.858rem !important;
}
.mod-text--size-40to28 {
font-size: 2.858rem !important;
}
.mod-text--size-24to12 {
font-size: 1.715rem !important;
}
.mod-text--size-30to20 {
font-size: 2.143rem !important;
}
.mod-text--size-34to20 {
font-size: 2.429rem !important;
}
.mod-text--size-14to13 {
font-size: 1rem !important;
}
.mod-text--size-24to15 {
font-size: 1.715rem !important;
}
.mod-text--size-18to12 {
font-size: 1.286rem !important;
}
.mod-text--size-18to13 {
font-size: 1.286rem !important;
}
.mod-text--size-17to10 {
font-size: 1.215rem !important;
}
.mod-text--size-12to8 {
font-size: 0.858rem !important;
}
.mod-text--size-14to10 {
font-size: 1rem !important;
}
.mod-text--size-20to14 {
font-size: 1.429rem !important;
}
.mod-text--size-28to14 {
font-size: 2rem !important;
}
.mod-text--size-54to24 {
font-size: 3.858rem !important;
}
.mod-text--size-22to14 {
font-size: 1.572rem !important;
}
.mod-text--size-20to16 {
font-size: 1.429rem !important;
}
.mod-text--size-16to13 {
font-size: 1.143rem !important;
}
.mod-text--size-18to13 {
font-size: 1.286rem !important;
}
.mod-text--size-19to14 {
font-size: 1.358rem !important;
}
.mod-text--size-28to24 {
font-size: 2rem !important;
}
.mod-text--size-22to18 {
font-size: 1.572rem !important;
}
.mod-text--size-23to16 {
font-size: 1.643rem !important;
}
.mod-text--size-24to16 {
font-size: 1.715rem !important;
}
.mod-text--size-10 {
font-size: 0.715rem !important;
}
.mod-text--size-11 {
font-size: 0.786rem !important;
}
.mod-text--size-12 {
font-size: 0.858rem !important;
}
.mod-text--size-13 {
font-size: 0.929rem !important;
}
.mod-text--size-14 {
font-size: 1rem !important;
}
.mod-text--size-15 {
font-size: 1.072rem !important;
}
.mod-text--size-16 {
font-size: 1.143rem !important;
}
.mod-text--size-17 {
font-size: 1.215rem !important;
}
.mod-text--size-18 {
font-size: 1.286rem !important;
}
.mod-text--size-20 {
font-size: 1.358rem !important;
}
.mod-text--size-22 {
font-size: 1.429rem !important;
}
.mod-text--size-23 {
font-size: 1.643rem !important;
}
.mod-text--size-24 {
font-size: 1.715rem !important;
}
.mod-text--size-28 {
font-size: 2rem !important;
}
.mod-text--size-30 {
font-size: 2.143rem !important;
}
.mod-text--size-34 {
font-size: 2.429rem !important;
}
.mod-text--size-36 {
font-size: 2.572rem !important;
}
.mod-text--size-38 {
font-size: 2.715rem !important;
}
/*
mod-text__label
デバイステキストの内部要素（ラベル）のスタイル
Weight: 100
Style guide: text.label
*/
/*
Option: Label Types
ModText のオプション（ラベルタイプ）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text. h2 text. h2 text. h2 text. h2 text. h2 text. h1 text. h1 text. h1 text. h1 text. h1 text.
mod-text__link--theme-default - デフォルト
mod-text__link--theme-default--a - デフォルト
mod-text__link--theme-default--underline - デフォルト + アンダーライン
mod-text__link--theme-a-a--a - サンプルテーマ a-a--a
mod-text__link--theme-a-a--a-underline - サンプルテーマ a-a--a-underline
mod-text__link--theme-a-a--b - テキスト赤 下線なし
mod-text__link--theme-a-a--c - テキスト黒 下線なし hover透過
mod-text__link--theme-a-a--d - テキスト黒 下線なし hover透過 右矢印アイコン
mod-text__link--theme-a-a--e - テキスト赤 下線なしから下線あり
mod-text__link--theme-a-a--f - テキスト黒 下線なし hover透過
mod-text__link--theme-a-a--g - テキスト黒 下線なし hover透過
mod-text__link--theme-a-a--h - テキスト黒 下線なし hover透過
mod-text__link--theme-a-a--i - テキスト白 下線なし hover透過
mod-text__link--theme-a-a--j - テキスト白 下線なし hover透過
Style guide: text.link.theme
*/
.mod-text__link--theme-default--a {
color: #dc1e28;
}
.mod-text__link--theme-default--underline:link,
.mod-text__link--theme-default--underline:visited {
text-decoration: none;
}
.mod-text__link--theme-default--underline:hover,
.mod-text__link--theme-default--underline:focus {
text-decoration: underline !important;
}
.mod-text__link--theme-a-a--a:link,
.mod-text__link--theme-a-a--b:link,
.mod-text__link--theme-a-a--a:visited,
.mod-text__link--theme-a-a--b:visited {
text-decoration: none;
}
.mod-text__link--theme-a-a--a:hover,
.mod-text__link--theme-a-a--b:hover,
.mod-text__link--theme-a-a--a:focus,
.mod-text__link--theme-a-a--b:focus {
text-decoration: underline;
}
.mod-text__link--theme-a-a--a-underline:link,
.mod-text__link--theme-a-a--b-underline:link,
.mod-text__link--theme-a-a--a-underline:visited,
.mod-text__link--theme-a-a--b-underline:visited {
text-decoration: underline;
}
.mod-text__link--theme-a-a--a-underline:hover,
.mod-text__link--theme-a-a--b-underline:hover,
.mod-text__link--theme-a-a--a-underline:focus,
.mod-text__link--theme-a-a--b-underline:focus {
text-decoration: none;
}
.mod-text__link--theme-a-a--c:link,
.mod-text__link--theme-a-a--i:link,
.mod-text__link--theme-a-a--c:visited,
.mod-text__link--theme-a-a--i:visited {
text-decoration: none;
}
.mod-text__link--theme-a-a--c:hover,
.mod-text__link--theme-a-a--i:hover,
.mod-text__link--theme-a-a--c:focus,
.mod-text__link--theme-a-a--i:focus {
text-decoration: none;
opacity: 0.7;
}
.mod-text__link--theme-a-a--a {
color: #000;
}
.mod-text__link--theme-a-a--a-underline {
color: #dc1e28;
}
.mod-text__link--theme-a-a--b {
color: #dc1e28;
}
.mod-text__link--theme-a-a--b:hover {
text-decoration: none;
}
.mod-text__link--theme-a-a--b-underline {
color: #dc1e28;
}
.mod-text__link--theme-a-a--c {
color: #000;
}
.mod-text__link--theme-a-a--e {
color: #dc1e28;
text-decoration: none;
}
.mod-text__link--theme-a-a--e:hover {
text-decoration: underline;
}
.mod-text__link--theme-a-a--f {
color: #333;
font-weight: bold;
}
.mod-text__link--theme-a-a--f:link,
.mod-text__link--theme-a-a--f:visited {
text-decoration: none;
}
.mod-text__link--theme-a-a--f:hover,
.mod-text__link--theme-a-a--f:focus {
text-decoration: none;
color: #999;
}
.mod-text__link--theme-a-a--g {
color: #fff;
text-decoration: none;
}
.mod-text__link--theme-a-a--h {
color: #333;
text-decoration: none;
}
.mod-text__link--theme-a-a--h:link,
.mod-text__link--theme-a-a--h:visited {
text-decoration: none;
}
.mod-text__link--theme-a-a--h:hover,
.mod-text__link--theme-a-a--h:focus {
text-decoration: none;
color: #fff;
}
.mod-text__link--theme-a-a--h {
color: #000;
}
.mod-text__link--theme-a-a--i {
color: #fff;
}
.mod-text__link--theme-a-a--j {
color: #fff;
}
.mod-text__link--theme-a-a--j:link,
.mod-text__link--theme-a-a--j:visited {
text-decoration: none;
}
.mod-text__link--theme-a-a--j:hover,
.mod-text__link--theme-a-a--j:focus {
text-decoration: none;
}
/*
mod-textgroup
デバイステキストグループのスタイル
Weight: 300
Style guide: text.group
*/
.mod-textgroup,
.mod-textgroup-a-a {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.mod-textgroup__item__bullet,
.mod-textgroup-a-a__item__bullet {
position: absolute;
top: 0;
left: 0;
vertical-align: middle;
text-align: center;
}
/*
Default
ModTextgroup のデフォルトスタイル
Markup:
・ textgroup item. textgroup item. textgroup item. textgroup item.
・ nested textgroup item. nested textgroup item. nested textgroup item. ・ nested textgroup item. nested textgroup item. nested textgroup item.
1. textgroup item. textgroup item. textgroup item. textgroup item.
1. nested textgroup item. nested textgroup item. nested textgroup item. 2. nested textgroup item. nested textgroup item. nested textgroup item.
textgroup item. textgroup item. textgroup item. textgroup item.
nested textgroup item. nested textgroup item. nested textgroup item.
nested textgroup item. nested textgroup item. nested textgroup item.
mod-textgroup - デフォルトスタイル
Style guide: text.group.default
*/
.mod-textgroup__item {
padding-left: 1.6em;
*zoom: 1;
}
.mod-textgroup__item__bullet {
width: 1.5em;
}
/*
Default
ModTextgroup のデフォルトスタイル
Markup:
※1 textgroup item. textgroup item. textgroup item. textgroup item.
※1 nested textgroup item. nested textgroup item. nested textgroup item. ※2 nested textgroup item. nested textgroup item. nested textgroup item.
mod-textgroup-a-a - デフォルトスタイル
Style guide: text.group.a.a
*/
.mod-textgroup-a-a__item {
padding-left: 2.6em;
*zoom: 1;
}
.mod-textgroup-a-a__item__bullet {
width: 2.5em;
}
/*
mod-btn
ボタンのスタイル
Weight: -1080
Style guide: btn
*/
.mod-btn {
display: block;
overflow: hidden;
position: relative;
width: auto;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 1;
letter-spacing: 0;
background-color: transparent;
font-weight: normal;
border: 0;
*font-size: 0;
}
.mod-btn__label {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
margin: 0 auto;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 1.2;
letter-spacing: 0;
background-color: transparent;
font-weight: normal;
font-size: 0.87em;
border: 0;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.mod-btn--theme-a-a--a:hover,
.mod-btn--theme-a-a--b:hover,
.mod-btn--theme-a-a--c:hover,
.mod-btn--theme-a-a--d:hover,
.mod-btn--theme-a-a--e:hover {
opacity: 0.7;
}
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*
Default
ModBtn のデフォルトスタイル
Weight: -100
Markup:
label
mod-btn - デフォルトスタイル
Style guide: btn.option.default
*/
.mod-btn {
display: block;
}
.mod-btn__label {
display: block;
}
/*
Option: Themes
ModBtn のオプション（テーマ）
Weight: -100
Markup:
label
label
mod-btn--theme-default - デフォルト
mod-btn--theme-a-a--a - サンプルテーマ a-a--a
mod-btn--theme-a-a--b - サンプルテーマ a-a--b
mod-btn--theme-a-a--c - サンプルテーマ a-a--c
mod-btn--theme-a-a--d - サンプルテーマ a-a--d
mod-btn--theme-a-a--e - サンプルテーマ a-a--e
mod-btn--theme-a-a--f - サンプルテーマ a-a--f
Style guide: btn.option.theme
*/
.mod-btn--theme-a-a--a,
.mod-btn--theme-a-a--b,
.mod-btn--theme-a-a--c,
.mod-btn--theme-a-a--e {
padding: 10px;
}
.mod-btn--theme-a-a--a {
background-color: #E74C3C;
border-radius: 4px;
padding: 0;
}
.mod-btn--theme-a-a--a:hover {
text-decoration: none;
}
.mod-btn--theme-a-a--b {
padding: 6px 20px 6px 10px;
background-color: #f9f4eb;
border-radius: 4px;
color: #fd5209;
text-decoration: none;
background-image: url("../images/common/icon_yajirushi001_pc.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.mod-btn--theme-a-a--c {
background-color: #fff;
border-radius: 4px;
border: 2px solid #222;
color: #222;
padding: 20px 0;
background-image: url("../images/top/icon_yajirushi002_pc.png");
background-repeat: no-repeat;
background-position: 97% 50%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.mod-btn--theme-a-a--c:hover {
text-decoration: none;
}
.mod-btn--theme-a-a--d {
background-color: #f2f2f2;
padding: 12px 20px;
background-image: url("../images/common/icon_yajirushi002_sp.png");
background-repeat: no-repeat;
background-position: 97% 50%;
-webkit-background-size: 11px auto;
background-size: 11px auto;
color: #000;
}
.mod-btn--theme-a-a--d:hover {
text-decoration: none;
}
.mod-btn--theme-a-a--e {
background-color: #3a3a3a;
padding: 12px 20px;
color: #fff;
background-image: url("../images/common/icon_yajirushi003_sp.png");
background-repeat: no-repeat;
background-position: 97% 50%;
-webkit-background-size: 11px auto;
background-size: 11px auto;
}
.mod-btn--theme-a-a--e:hover {
text-decoration: none;
}
.mod-btn--theme-a-a--f {
pointer-events: none;
}
/*
mod-btn__label
ボタンの内部要素（ラベル）のスタイル
Weight: 100
Style guide: btn.label
*/
/*
Option: Label Types
ModBtn のオプション（ラベルタイプ）
Markup:
label
label
Weight: -100
mod-btn__label--type-a-a--a - ラベルタイプ a-a--a
mod-btn__label--type-a-a--b - ラベルタイプ a-a--b
mod-btn__label--type-a-a--c - ラベルタイプ a-a--c
Style guide: btn.label.type
*/
.mod-btn__label--type-a-a--a,
.mod-btn__label--type-a-a--b {
overflow: hidden;
padding: 0;
line-height: 0;
text-indent: -100%;
white-space: nowrap;
color: transparent;
background-repeat: no-repeat;
font-size: 0;
}
.mod-btn__label--type-a-a--a,
.mod-btn__label--type-a-a--b {
background-image: url("../images/common/sprite_btn.png");
}
.mod-btn__label--type-a-a--a {
width: 84px;
height: 14px;
background-position: 0px -32px;
}
.mod-btn__label--type-a-a--a:hover,
.mod-btn__label--type-a-a--a:focus {
background-position: 0px -16px;
}
.mod-btn__label--type-a-a--a--current {
cursor: default;
background-position: 0px 0px;
}
.mod-btn__label--type-a-a--a--current:hover,
.mod-btn__label--type-a-a--a--current:focus {
background-position: 0px 0px;
}
.mod-btn__label--type-a-a--b {
width: 42px;
height: 7px;
background-position: -43px 0px;
-webkit-background-size: 85px 39px;
background-size: 85px 39px;
}
.mod-btn__label--type-a-a--b:hover,
.mod-btn__label--type-a-a--b:focus {
background-position: 0px -32px;
}
.mod-btn__label--type-a-a--b--current {
cursor: default;
background-position: 0px -24px;
}
.mod-btn__label--type-a-a--b--current:hover,
.mod-btn__label--type-a-a--b--current:focus {
background-position: 0px -24px;
}
/*
Option: Label Position
ModBtn のオプション（ラベルの位置）
Markup:
label
mod-btn__label--inline-false - インライン、無効
mod-btn__label--inline-true - インライン、有効
mod-btn__label--absolute-center - 絶対配置、上下左右中央
mod-btn__label--absolute-left - 絶対配置、上下中央、左寄せ
mod-btn__label--absolute-right - 絶対配置、上下中央、右寄せ
Style guide: btn.label.position
*/
.mod-btn__label--inline-true {
display: inline-block;
width: auto;
}
.mod-btn__label--absolute-center,
.mod-btn__label--absolute-left,
.mod-btn__label--absolute-right {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
.mod-btn__label--absolute-center {
right: 0;
left: 0;
margin: auto;
}
.mod-btn__label--absolute-left {
left: 0;
}
.mod-btn__label--absolute-right {
right: 0;
}
/*
mod-btn__icon
ボタンの内部要素（アイコン）のスタイル
Weight: 200
Style guide: btn.icon
*/
/*
Option: Icon Position
ModBtn のオプション（アイコンの位置）
Markup:
label
mod-btn__icon--inline-left - インライン、左
mod-btn__icon--inline-right - インライン、右
mod-btn__icon--block-top - ブロック、上
mod-btn__icon--block-bottom - ブロック、下
mod-btn__icon--absolute-left - 絶対配置、左
mod-btn__icon--absolute-right - 絶対配置、右
mod-btn__icon--absolute-center - 絶対配置、上下左右中央
Style guide: btn.icon.position
*/
.mod-btn__icon--inline-left,
.mod-btn__icon--inline-right {
display: inline-block;
}
.mod-btn__icon--inline-left {
margin-right: 5px;
}
.mod-btn__icon--inline-right {
margin-left: 5px;
}
.mod-btn__icon--block-top {
margin: 0 auto 5px;
}
.mod-btn__icon--block-bottom {
margin: 5px auto 0;
}
.mod-btn__icon--absolute-left,
.mod-btn__icon--absolute-right,
.mod-btn__icon--absolute-center {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.mod-btn__icon--absolute-left {
left: 0;
}
.mod-btn__icon--absolute-right {
right: 0;
}
.mod-btn__icon--absolute-center {
left: 0;
right: 0;
}
/*
mod-pict
画像やそれに準ずる要素のスタイル
Weight: -1070
Style guide: pict
*/
.mod-pict {
display: block;
position: relative;
width: auto;
height: auto;
margin: 0;
padding: 0;
text-align: left;
line-height: 0;
letter-spacing: 0;
background-color: transparent;
font-size: 0;
font-weight: normal;
border: 0;
}
.mod-pict__src {
display: inline-block;
margin: 0;
padding: 0;
font-size: 0;
border: 0;
*display: inline;
*zoom: 1;
}
/*
Default
ModPict のデフォルトスタイル
Markup:
Weight: -100
mod-pict - デフォルトスタイル
Style guide: pict.option.default
*/
/*
Option: Aligns
ModPict のオプション（整列）
Markup:
mod-pict--align-left - 左寄せ（デフォルト）
mod-pict--align-center - 中央寄せ
mod-pict--align-right - 右寄せ
mod-pict--table-center - 中央寄せ(table)
Style guide: pict.option.align
*/
.mod-pict--align-left {
text-align: left;
}
.mod-pict--align-center {
text-align: center;
}
.mod-pict--align-right {
text-align: right;
}
/*
Option: Fitting
ModPict のオプション（サイズのフィット）
Markup:
mod-pict__src--fit-none - フィットしない（デフォルト）
mod-pict__src--fit-width - 幅にフィット
mod-pict__src--fit-height - 高さにフィット
Style guide: pict.option.fit
*/
.mod-pict__src--fit-width {
width: 100%;
height: auto;
}
.mod-pict__src--fit-height {
width: auto;
height: 100%;
}
/*
mod-grid
グリッドのスタイル
Weight: -1060
Style guide: grid
*/
.mod-grid,
.mod-grid-a-a,
.mod-grid-b-a,
.mod-grid-c-a {
display: block;
position: relative;
width: auto;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
vertical-align: top;
background-color: transparent;
border: 0;
*zoom: 1;
}
.mod-grid:before,
.mod-grid-a-a:before,
.mod-grid-b-a:before,
.mod-grid-c-a:before,
.mod-grid:after,
.mod-grid-a-a:after,
.mod-grid-b-a:after,
.mod-grid-c-a:after {
content: "";
display: table;
}
.mod-grid:after,
.mod-grid-a-a:after,
.mod-grid-b-a:after,
.mod-grid-c-a:after {
clear: both;
}
.mod-grid__cell,
.mod-grid-a-a__cell--a,
.mod-grid-a-a__cell--b,
.mod-grid-b-a__cell--a,
.mod-grid-b-a__cell--b,
.mod-grid-b-a__cell--c,
.mod-grid-c-a__cell--a,
.mod-grid-c-a__cell--b,
.mod-grid-c-a__cell--c,
.mod-grid-c-a__cell--d {
display: block;
overflow: hidden;
position: relative;
width: auto;
margin: 0;
padding: 0;
text-align: left;
vertical-align: top;
border: 0;
*zoom: 1;
}
.mod-grid__cell:before,
.mod-grid-a-a__cell--a:before,
.mod-grid-a-a__cell--b:before,
.mod-grid-b-a__cell--a:before,
.mod-grid-b-a__cell--b:before,
.mod-grid-b-a__cell--c:before,
.mod-grid-c-a__cell--a:before,
.mod-grid-c-a__cell--b:before,
.mod-grid-c-a__cell--c:before,
.mod-grid-c-a__cell--d:before,
.mod-grid__cell:after,
.mod-grid-a-a__cell--a:after,
.mod-grid-a-a__cell--b:after,
.mod-grid-b-a__cell--a:after,
.mod-grid-b-a__cell--b:after,
.mod-grid-b-a__cell--c:after,
.mod-grid-c-a__cell--a:after,
.mod-grid-c-a__cell--b:after,
.mod-grid-c-a__cell--c:after,
.mod-grid-c-a__cell--d:after {
content: "";
display: table;
}
.mod-grid__cell:after,
.mod-grid-a-a__cell--a:after,
.mod-grid-a-a__cell--b:after,
.mod-grid-b-a__cell--a:after,
.mod-grid-b-a__cell--b:after,
.mod-grid-b-a__cell--c:after,
.mod-grid-c-a__cell--a:after,
.mod-grid-c-a__cell--b:after,
.mod-grid-c-a__cell--c:after,
.mod-grid-c-a__cell--d:after {
clear: both;
}
/*
Default
ModGrid のデフォルトスタイル（カラムの設定がないので使用する際に都度設定する必要がある）
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
mod-grid - デフォルトスタイル
Style guide: grid.option.default
*/
/*
Variations
ModGrid の二分割スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
mod-grid-a-a - 均等二分割スタイル
Style guide: grid.option.a.a
*/
.mod-grid-a-a__cell--a {
float: left;
width: 49.9%;
}
.mod-grid-a-a__cell--b {
float: right;
width: 49.9%;
}
/*
Variations
ModGrid の三分割スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
mod-grid-b-a - 均等三分割スタイル
Style guide: grid.option.b.a
*/
.mod-grid-b-a__cell--a {
float: left;
width: 33.3%;
}
.mod-grid-b-a__cell--b {
float: left;
width: 33.3%;
}
.mod-grid-b-a__cell--c {
float: right;
width: 33.3%;
}
/*
Variations
ModGrid の四分割スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-grid-c-a - 均等四分割スタイル
Style guide: grid.option.c.a
*/
.mod-grid-c-a__cell--a {
float: left;
width: 24.9%;
}
.mod-grid-c-a__cell--b {
float: left;
width: 25%;
}
.mod-grid-c-a__cell--c {
float: left;
width: 24.9%;
}
.mod-grid-c-a__cell--d {
float: right;
width: 25%;
}
/*
mod-grid2
グリッドのスタイル（`display: table-cell;` 版）。ie8+
Weight: 100
Style guide: grid.ver2
*/
.mod-grid2 {
display: table;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
vertical-align: top;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mod-grid2__cell {
display: table-cell;
position: relative;
width: auto;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
vertical-align: inherit;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*
Default
ModGrid2 のデフォルトスタイル。内包するグリッドの各カラム幅はコンテンツに応じて自動調整される。
グリッドのセルに内包されている要素の高さを揃えたい場合は `height:100%` を設定し、
`box-sizing:border-box;` を指定している要素の場合は、更に `padding` の設定を解除する（Webkit、Blink 対策）。
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-grid2 - デフォルトスタイル
Weight: -100
Style guide: grid.ver2.option.default
*/
/*
mod-grid3
グリッドのスタイル（`display: flex;` 版）。ie10+、Android 4.4+。
Weight: 200
Style guide: grid.ver3
*/
.mod-grid3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: start;
align-content: flex-start;
position: relative;
width: 100%;
height: auto;
margin: 0;
padding: 0;
list-style: none;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mod-grid3__cell {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: 1;
flex-basis: 1;
position: relative;
width: auto;
height: auto;
margin: 0;
padding: 0;
text-align: left;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*
Default
ModGrid3 のデフォルトスタイル。内包するグリッドの各カラム幅はコンテンツに応じて自動調整される。
ie10 のみ均等にするために、`.mod-grid3__cell` に対して `flex-basis: 100%` などと指定する必要があるが、
方向を `column`、`column-reverse` に設定した際にコンテンツが潰れてしまうバグがあるため利用には注意する。
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-grid3 - デフォルトスタイル
Weight: -100
Style guide: grid.ver3.option.default
*/
/*
Option: Direction
ModGrid3 のオプション（配置方向）
Weight: -75
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
mod-grid3--direction-row - 左から右（デフォルト）
mod-grid3--direction-row-reverse - 右から左
mod-grid3--direction-column - 上から下
mod-grid3--direction-column-reverse - 下から上
Style guide: grid.ver3.option.direction
*/
.mod-grid3--direction-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.mod-grid3--direction-row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.mod-grid3--direction-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mod-grid3--direction-column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
/*
Option: Wrap
ModGrid3 のオプション（折り返し）
Weight: -50
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
mod-grid3--wrap-false - 折り返しを禁止（デフォルト）
mod-grid3--wrap-true - 折り返しを許可
mod-grid3--wrap-true-reverse - 折り返しを許可
Style guide: grid.ver3.option.wrap
*/
.mod-grid3--wrap-false {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.mod-grid3--wrap-true {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mod-grid3--wrap-true-reverse {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
/*
Option: Align
ModGrid3 のオプション（整列）
Weight: -25
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
mod-grid3--align-start - 横配置の場合左揃え、立て配置の場合上揃え（デフォルト）
mod-grid3--align-center - 中央揃え
mod-grid3--align-end - 横配置の場合右揃え、立て配置の場合下揃え
mod-grid3--align-space-between - 等間隔
mod-grid3--align-space-around - 等間隔（初めと最後の要素の前後にも余白追加される）
Style guide: grid.ver3.option.align
*/
.mod-grid3--align-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.mod-grid3--align-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
.mod-grid3--align-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end;
}
.mod-grid3--align-space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
}
.mod-grid3--align-space-around {
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
}
/*
mod-responsive-grid
レスポンシブグリッドのスタイル
Weight: -1055
Style guide: responsive-grid
*/
.mod-responsive-grid {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: auto;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
vertical-align: top;
background-color: transparent;
border: 0;
*zoom: 1;
}
.mod-responsive-grid:before,
.mod-responsive-grid:after {
content: "";
display: table;
}
.mod-responsive-grid:after {
clear: both;
}
.mod-responsive-grid__cell {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: auto;
margin: 0;
padding: 0;
text-align: left;
vertical-align: top;
border: 0;
*zoom: 1;
}
.mod-responsive-grid__cell:before,
.mod-responsive-grid__cell:after {
content: "";
display: table;
}
.mod-responsive-grid__cell:after {
clear: both;
}
/*
Default
ModResponsiveGrid のデフォルトスタイル（カラムの設定がないので使用する際に都度設定する必要がある）
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
{{!-- カラム落ち --}}
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid - デフォルトスタイル
Style guide: responsive-grid.option.default
*/
/*
Variations
ModResponsiveGridA の 2列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid-a - デフォルトスタイル
Style guide: responsive-grid.option.a
*/
.mod-responsive-grid-a__cell--a {
width: 50%;
float: left;
}
.mod-responsive-grid-a__cell--b {
width: 50%;
float: left;
}
/*
Variations
ModResponsiveGrid の 3列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid-b - デフォルトスタイル
Style guide: responsive-grid.option.b
*/
.mod-responsive-grid-b__cell--a {
width: 33.3%;
float: left;
}
.mod-responsive-grid-b__cell--b {
width: 33.3%;
float: left;
}
.mod-responsive-grid-b__cell--c {
width: 33.3%;
float: left;
}
/*
Variations
ModResponsiveGrid の 4列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid-c - デフォルトスタイル
Style guide: responsive-grid.option.c
*/
.mod-responsive-grid-c__cell--a {
width: 25%;
float: left;
}
.mod-responsive-grid-c__cell--b {
width: 25%;
float: left;
}
.mod-responsive-grid-c__cell--c {
width: 25%;
float: left;
}
.mod-responsive-grid-c__cell--d {
width: 25%;
float: left;
}
/*
Variations
ModResponsiveGridA の 4列 → 2列 スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid-d - デフォルトスタイル
Style guide: responsive-grid.option.d
*/
.mod-responsive-grid-d__cell--a {
width: 25%;
float: left;
}
.mod-responsive-grid-d__cell--b {
width: 25%;
float: left;
}
.mod-responsive-grid-d__cell--c {
width: 25%;
float: left;
}
.mod-responsive-grid-d__cell--d {
width: 25%;
float: left;
}
/*
mod-responsive-grid2
レスポンシブグリッドのスタイル（`display: table-cell;` 版）
Weight: 100
Style guide: responsive-grid.ver2
*/
.mod-responsive-grid2 {
display: table;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
vertical-align: top;
border: 0;
}
.mod-responsive-grid2__cell {
display: table-cell;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: auto;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
vertical-align: inherit;
border: 0;
}
/*
Default
ModResponsive Grid2 デフォルトスタイル
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
{{!-- カラム落ち --}}
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid2 - デフォルトスタイル
Style guide: responsive-grid.ver2.options.default
*/
/*
Variations
ModResponsiveGrid2 の 2列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid2-a - デフォルトスタイル
Style guide: responsive-grid.ver2.options.a
*/
.mod-responsive-grid2-a__cell--a {
width: 50%;
}
.mod-responsive-grid2-a__cell--b {
width: 50%;
}
/*
Variations
ModResponsiveGrid2 の 3列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid2-b - デフォルトスタイル
Style guide: responsive-grid.ver2.options.b
*/
.mod-responsive-grid2-b__cell--a {
width: 33.3%;
}
.mod-responsive-grid2-b__cell--b {
width: 33.3%;
}
.mod-responsive-grid2-b__cell--c {
width: 33.3%;
}
/*
Variations
ModResponsiveGrid2 の 4列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid2-c - デフォルトスタイル
Style guide: responsive-grid.ver2.options.c
*/
.mod-responsive-grid2-c__cell--a {
width: 25%;
}
.mod-responsive-grid2-c__cell--b {
width: 25%;
}
.mod-responsive-grid2-c__cell--c {
width: 25%;
}
.mod-responsive-grid2-c__cell--d {
width: 25%;
}
/*
Variations
ModResponsiveGrid2 の 5列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid2-d - デフォルトスタイル
Style guide: responsive-grid.ver2.options.d
*/
.mod-responsive-grid2-d__cell--a {
width: 20%;
}
.mod-responsive-grid2-d__cell--b {
width: 20%;
}
.mod-responsive-grid2-d__cell--c {
width: 20%;
}
.mod-responsive-grid2-d__cell--d {
width: 20%;
}
.mod-responsive-grid2-d__cell--e {
width: 20%;
}
.mod-responsive-grid2-d__cell--it {
width: 35%;
}
/*
Variations
ModResponsiveGrid2 の 7列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-responsive-grid2-f - デフォルトスタイル
Style guide: responsive-grid.ver2.options.f
*/
.mod-responsive-grid2-f__cell--a {
width: 14.3%;
}
.mod-responsive-grid2-f__cell--b {
width: 14.3%;
}
.mod-responsive-grid2-f__cell--c {
width: 14.3%;
}
.mod-responsive-grid2-f__cell--d {
width: 14.3%;
}
.mod-responsive-grid2-f__cell--e {
width: 14.3%;
}
.mod-responsive-grid2-f__cell--f {
width: 14.3%;
}
.mod-responsive-grid2-f__cell--g {
width: 14.2%;
}
/*
mod-box
ボックスのスタイル
Weight: -1050
Style guide: box
*/
.mod-box {
display: block;
position: relative;
width: auto;
margin: 0;
padding: 0;
text-align: left;
background-color: transparent;
border: 0;
*zoom: 1;
}
.mod-box:before,
.mod-box:after {
content: "";
display: table;
}
.mod-box:after {
clear: both;
}
.mod-box__container {
display: block;
position: relative;
margin: 0;
text-align: left;
*zoom: 1;
}
.mod-box__container:before,
.mod-box__container:after {
content: "";
display: table;
}
.mod-box__container:after {
clear: both;
}
/*
Default
ModBox のデフォルトスタイル
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-box - デフォルトスタイル
Style guide: box.option.default
*/
/*
Option: Themes
ModBox のオプション（テーマ）
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-box--theme-default - デフォルト
mod-box--theme-a-a--a - テーマ a-a--a
mod-box--theme-a-a--b - テーマ a-a--b
mod-box--theme-a-a--c - テーマ a-a--c
mod-box--theme-a-a--d - テーマ a-a--d
mod-box--theme-a-a--e - テーマ a-a--e
mod-box--theme-a-a--f - テーマ a-a--f
mod-box--theme-a-a--g - テーマ a-a--g
mod-box--theme-a-a--h - テーマ a-a--h
mod-box--theme-a-a--i - テーマ a-a--i
Style guide: box.option.theme
*/
.mod-box--theme-a-a--a {
background-color: #3a3a3a;
}
.mod-box--theme-a-a--a-tr {
background-color: transparent;
}
.mod-box--theme-a-a--b {
background-color: #fff;
}
.mod-box--theme-a-a--c {
background-color: #e80;
}
.mod-box--theme-a-a--d {
background-color: #b36600;
}
.mod-box--theme-a-a--e {
background-color: #f9f4eb;
}
.mod-box--theme-a-a--f {
background-color: #fff5d3;
}
.mod-box--theme-a-a--g {
border-radius: 4px;
}
.mod-box--theme-a-a--h {
background-color: #f5f5f5;
}
.mod-box--theme-a-a--i {
background-color: #f2f2f2;
}
/*
Option: Texture
ModBox のオプション（テクスチャの指定）
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-box--texture-none - デフォルト
mod-box--texture-a-a - テクスチャタイプ a-a
Style guide: box.option.texture
*/
.mod-box--texture-a-a {
background-image: url("data:image/png;base64,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");
background-repeat: repeat;
background-position: 0 0;
}
/*
mod-box__container
ボックスの内部要素（コンテナ）のスタイル
Weight: 100
Style guide: box.container
*/
/*
Option: Container Width
ModBox のオプション（コンテナの幅指定）
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
mod-box__container--width-auto - デフォルト
mod-box__container--width-a-a - タイプ a-a
mod-box__container--width-max-1000 - タイプ max-1000px
mod-box__container--width-max-1000-fit - タイプ max-960px（PC スマホ以下の場合、左右に余白なし）
mod-box__container--width-max-972 - タイプ max-972px
mod-box__container--width-max-880 - タイプ max-880px
mod-box__container--width-max-740 - タイプ max-740px
Style guide: box.container.width
*/
.mod-box__container--width-a-a {
width: 100%;
margin: 0 auto;
}
.mod-box__container--width-max-1000 {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-1000-fit {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-972 {
width: 972px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-880 {
width: 880px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-740 {
width: 740px;
margin-left: auto;
margin-right: auto;
}
/*
mod-table
テーブルのスタイル
Weight: -1040
Style guide: table
*/
.mod-table-a-a,
.mod-table-c-a,
.mod-table-d-a {
display: table;
width: auto;
background-color: transparent;
border-collapse: collapse;
border-style: solid;
border-width: 1px;
}
.mod-table-a-a__cell--a,
.mod-table-a-a__cell--b,
.mod-table-a-a__cell--c,
.mod-table-a-a__cell--d,
.mod-table-a-a__cell--e,
.mod-table-a-a__cell--f,
.mod-table-c-a__cell--a,
.mod-table-c-a__cell--b,
.mod-table-c-a__cell--c,
.mod-table-c-a__cell--d,
.mod-table-c-a__cell--e,
.mod-table-c-a__cell--f,
.mod-table-c-a__cell--g,
.mod-table-d-a__cell--a,
.mod-table-d-a__cell--b,
.mod-table-d-a__cell--c,
.mod-table-d-a__cell--d,
.mod-table-d-a__cell--e,
.mod-table-d-a__cell--f {
display: table-cell;
line-height: 1.5;
letter-spacing: 0.04em;
text-align: left;
word-break: break-all;
word-wrap: break-word;
background-color: transparent;
font-weight: normal;
border-style: solid;
border-width: 1px;
}
/*
Variations
ModTable のスタイル
Markup:
Table Heading
Table Description
Table Heading
Table Description
Table Heading
Table Description
mod-table-a-a - スタイル a-a
Style guide: table.a.a
*/
.mod-table-a-a__cell--a,
.mod-table-a-a__cell--b,
.mod-table-a-a__cell--c,
.mod-table-a-a__cell--d,
.mod-table-a-a__cell--e,
.mod-table-a-a__cell--f {
border: 0;
color: #000;
}
.mod-table-a-a__cell--a,
.mod-table-a-a__cell--c,
.mod-table-a-a__cell--e {
padding: 30px 15px 30px 15px;
vertical-align: middle;
font-weight: 700;
background-color: #eee;
width: 30.952380952380953%;
border-bottom: 1px solid #ddd;
}
.mod-table-a-a__cell--b,
.mod-table-a-a__cell--d,
.mod-table-a-a__cell--f {
padding: 15px;
vertical-align: middle;
font-weight: normal;
background-color: #fff;
padding: 15px;
width: 80.95238095238095%;
border-bottom: 1px solid #ddd;
}
.mod-table-a-a {
width: 100%;
border: 0;
}
.mod-table-a-a__cell--a {
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.mod-table-a-a__cell--b {
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.mod-table-a-a__cell--c {
border-left: 1px solid #ddd;
}
.mod-table-a-a__cell--d {
border-right: 1px solid #ddd;
}
.mod-table-a-a__cell--e {
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.mod-table-a-a__cell--f {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd !important;
}
/*
Variations
ModTable のスタイル
Markup:
Table Heading
Table Heading
Table Heading
Table Heading
Table Description
Table Description
Table Heading
Table Description
Table Description
mod-table-c-a - スタイル c-a
Style guide: table.c.a
*/
.mod-table-c-a__cell--a,
.mod-table-c-a__cell--b,
.mod-table-c-a__cell--c,
.mod-table-c-a__cell--d,
.mod-table-c-a__cell--e,
.mod-table-c-a__cell--f,
.mod-table-c-a__cell--g {
border: 0;
color: #000;
}
.mod-table-c-a__cell--a,
.mod-table-c-a__cell--e {
padding: 14px 5px;
vertical-align: middle;
font-weight: 700;
text-align: center;
width: 31.182795698924732%;
}
.mod-table-c-a__cell--b {
padding: 16px 5px;
vertical-align: middle;
text-align: center;
font-weight: normal;
width: 34.40860215053764%;
}
.mod-table-c-a__cell--c,
.mod-table-c-a__cell--d,
.mod-table-c-a__cell--f,
.mod-table-c-a__cell--g {
padding: 14px 5px;
vertical-align: middle;
font-weight: normal;
text-align: center;
width: 34.40860215053764%;
}
.mod-table-c-a {
width: 100%;
border: 0;
}
.mod-table-c-a__cell--b {
background-color: #6c6c6c;
border: 2px solid #fff;
color: #fff;
}
.mod-table-c-a__cell--d {
background-color: #f4f4f4;
border: 2px solid #fff;
}
.mod-table-c-a__cell--e {
background-color: #ececec;
border: 2px solid #fff;
}
.mod-table-c-a__cell--f {
background-color: #218ac7;
border: 2px solid #fff;
color: #fff;
}
.mod-table-c-a__cell--g {
background-color: #d2ecfb;
border: 2px solid #fff;
}
/*
Variations
ModTable のスタイル
Markup:
CASE01
業種
： 製薬会社
企業規模
： ●●●●人
月額800,000円
mod-table-d-a - スタイル d-a
Style guide: table.d.a
*/
.mod-table-d-a__cell--a,
.mod-table-d-a__cell--b,
.mod-table-d-a__cell--c,
.mod-table-d-a__cell--d,
.mod-table-d-a__cell--e,
.mod-table-d-a__cell--f {
border: 0;
color: #000;
}
.mod-table-d-a__cell--a {
background-color: #1b2f5c;
border-left: 2px solid #1b2f5c;
border-right: 2px solid #1b2f5c;
text-align: center;
padding: 5px;
vertical-align: middle;
}
.mod-table-d-a__cell--b,
.mod-table-d-a__cell--d {
padding: 15px 10px 10px 10px;
vertical-align: middle;
font-weight: normal;
background-color: #fff;
}
.mod-table-d-a__cell--c,
.mod-table-d-a__cell--e {
padding: 10px;
vertical-align: middle;
font-weight: normal;
background-color: #fff;
}
.mod-table-d-a__cell--f {
padding: 10px;
vertical-align: middle;
font-weight: normal;
background-color: #fff;
}
.mod-table-d-a {
width: 100%;
border: 0;
}
.mod-table-d-a__cell--b {
border-left: 2px solid #1b2f5c;
width: 27.659574468085108%;
}
.mod-table-d-a__cell--c {
width: 72.3404255319149%;
border-right: 2px solid #1b2f5c;
}
.mod-table-d-a__cell--d {
border-right: 2px solid #1b2f5c;
border-left: 2px solid #1b2f5c;
border-bottom: 2px solid #1b2f5c;
padding-top: 0;
}
.mod-table-d-a__cell--e {
border-left: 2px solid #1b2f5c;
}
.mod-table-d-a__cell--f {
border-right: 2px solid #1b2f5c;
}
/*
mod-field
フィールドのスタイル
Weight: -1030
Style guide: field
*/
/*
mod-textfield
テキストフィールドのスタイル
Weight: 100
Style guide: field.text
*/
.mod-textfield {
display: inline-block;
position: relative;
width: auto;
height: auto;
margin: 0;
padding: 0;
line-height: 0;
vertical-align: top;
font-size: 0;
border: 0;
*zoom: 1;
}
.mod-textfield__input,
.mod-textfield__area {
display: inline-block;
position: relative;
margin: 0;
padding: 10px;
vertical-align: top;
letter-spacing: 0.04em;
background-color: #fff;
font-weight: normal;
font-size: 1rem;
border: 1px solid transparent;
border-radius: 0;
}
.mod-textfield__input:hover,
.mod-textfield__area:hover,
.mod-textfield__input:focus,
.mod-textfield__area:focus {
border: 1px solid transparent;
}
.mod-textfield__input:focus,
.mod-textfield__area:focus {
border-color: #16ac60;
background-color: #ffe5dd;
}
/*
Default
ModTextfield のデフォルトスタイル
Weight: -100
Markup:
mod-textfield - デフォルトスタイル
Style guide: field.text.default
*/
.mod-textfield__input {
line-height: 1;
}
.mod-textfield__area {
line-height: 1.5;
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
}
/*
Option: Themes
ModTextfield のオプション（テーマ）
Weight: -100
Markup:
mod-textfield--theme-default - デフォルト
mod-textfield--theme-a-a--a - a-a--a
Style guide: field.text.option.theme
*/
.mod-textfield--theme-a-a--a > .mod-textfield__input,
.mod-textfield--theme-a-a--a > .mod-textfield__area {
color: #000;
background-color: transparent;
border-color: #ccc !important;
}
.mod-textfield--theme-a-a--a > .mod-textfield__input:focus,
.mod-textfield--theme-a-a--a > .mod-textfield__area:focus {
background-color: #ffe5dd;
}
/*
mod-togglefield
トグルフィールド（checkbox、radio）のスタイル
Weight: 200
Style guide: field.toggle
*/
.mod-checkfield,
.mod-radiofield {
display: inline-block;
overflow: hidden;
position: relative;
line-height: 0;
background-color: transparent;
background-repeat: no-repeat;
cursor: pointer;
*font-size: 0;
*display: inline;
*zoom: 1;
}
.mod-checkfield__field,
.mod-radiofield__field {
display: block;
position: absolute;
top: -100%;
left: -150%;
outline: none;
}
/*
Checkbox
ModTogglefield のチェックボックススタイル（JavaScript の実装が必須。`.js-mod-checkfield`、`.js-mod-checkfield__field` を付与する）
Markup:
text label
mod-checkfield - デフォルトスタイル
Style guide: field.toggle.check.default
*/
.mod-checkfield {
width: 18px;
height: 18px;
background-position: -20px -20px;
background-image: url("../images/common/sprite_field.png");
}
.mod-checkfield--js-hover {
width: 18px;
height: 18px;
background-position: 0px -20px;
}
.mod-checkfield--js-checked {
width: 20px;
height: 18px;
background-position: -22px 0px;
}
.mod-checkfield--js-checked-hover {
width: 20px;
height: 18px;
background-position: 0px 0px;
}
/*
Radio
ModTogglefield のラジオボタンスタイル（JavaScript の実装が必須。`.js-mod-radiofield`、`.js-mod-radiofield__field` を付与する）
Markup:
text label
mod-radiofield - デフォルトスタイル
Style guide: field.toggle.radio.default
*/
.mod-radiofield {
width: 18px;
height: 18px;
background-position: -20px -40px;
background-image: url("../images/common/sprite_field.png");
}
.mod-radiofield--js-hover {
width: 18px;
height: 18px;
background-position: 0px -40px;
}
.mod-radiofield--js-checked {
width: 18px;
height: 18px;
background-position: -44px -20px;
}
.mod-radiofield--js-checked-hover {
width: 18px;
height: 18px;
background-position: -44px 0px;
}
/*
mod-selectfield
セレクトフィールドのスタイル
Weight: 300
Style guide: field.select
*/
.mod-selectfield {
display: block;
position: relative;
line-height: 0;
background-color: #f1f1f1;
cursor: pointer;
*zoom: 1;
}
.mod-selectfield__field {
display: block;
position: absolute;
top: -100px;
left: -9999%;
}
.mod-selectfield__label {
display: block;
position: relative;
min-height: 1em;
margin: 0;
padding: 10px 50px 10px 10px;
vertical-align: top;
line-height: 1;
letter-spacing: 0.04em;
font-weight: normal;
font-size: 15px;
border: 0;
}
.mod-selectfield__arrow {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 35px;
height: 100%;
margin: 0;
padding: 0;
background-color: #34495e;
*_height: 35px;
}
.mod-selectfield__arrow__icon {
position: absolute;
top: 50%;
left: 50%;
margin-left: -8px;
*zoom: 1;
}
.mod-selectfield__options {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
width: 100%;
height: auto;
margin: 0;
padding: 0;
list-style: none;
}
.mod-selectfield__options__item {
display: block;
margin: 0;
padding: 10px;
vertical-align: top;
line-height: 1;
letter-spacing: 0.04em;
background-color: #f1f1f1;
font-weight: normal;
font-size: 15px;
cursor: pointer;
}
/*
Default
ModSelectfield のデフォルトスタイル（JavaScript の実装が必須。`.js-mod-selectfield`、`.js-mod-selectfield__label`、`.js-mod-selectfield__field`、`.js-mod-selectfield__arrow`、`.js-mod-selectfield__arrow__icon` を付与する）
Weight: -100
Markup:
label-{{modifier_class}}-option-noselect
label-{{modifier_class}}-option-1
label-{{modifier_class}}-option-2
label-{{modifier_class}}-option-3
label-{{modifier_class}}-option-noselect
label-{{modifier_class}}-option-1
label-{{modifier_class}}-option-2
label-{{modifier_class}}-option-3
mod-selectfield - デフォルトスタイル
Style guide: field.select.default
*/
.mod-selectfield__label--js-hover {
color: #fff;
background-color: #a9a9a9;
}
.mod-selectfield__options__item--js-hover {
background-color: #d9d9d9;
}
.mod-selectfield__options__item--js-selected {
color: #fff;
background-color: #a9a9a9;
}
/*
Option: Themes
ModSelectfield のオプション（テーマ。例外的に子孫セレクタによって設定する）
Weight: -100
Markup:
label-mod-selectfield-option-noselect
label-mod-selectfield-option-1
label-mod-selectfield-option-2
label-mod-selectfield-option-3
label-mod-selectfield-option-noselect
label-mod-selectfield-option-1
label-mod-selectfield-option-2
label-mod-selectfield-option-3
mod-selectfield--theme-default - デフォルト
mod-selectfield--theme-a-a - テーマ a-a
Style guide: field.select.theme
*/
.mod-selectfield--theme-a-a {
background-color: #fff;
}
.mod-selectfield--theme-a-a .mod-selectfield__options__item {
background-color: #fff;
}
.mod-selectfield--theme-a-a .mod-selectfield__options__item--js-hover {
background-color: #e6e6e6;
}
.mod-selectfield--theme-a-a .mod-selectfield__options__item--js-selected {
color: #fff;
background-color: #a9a9a9;
}
/*
block-accordion
サイトを構成するレイアウトブロック（アコーディオン）
Weight: 0
Style guide: block.accordion
*/
/*
Variations
フッタメニュー・アコーディオン（SP 版）
Markup:
block-accordion-a-a - デフォルトスタイル
Style guide: block.accordion.a.a
*/
.block-accordion-a-a__btn {
color: #222;
background-color: #fff;
padding: 15px 20px;
background-image: url("../images/common/icon_open001_sp.png");
background-repeat: no-repeat;
background-position: 97% 50%;
-webkit-background-size: 30px auto;
background-size: 30px auto;
}
.block-accordion-a-a__btn:hover {
opacity: 0.7;
}
.block-accordion-a-a__list__container {
display: none;
}
.block-accordion-a-a__list__item {
border-bottom: 1px solid #fff;
}
.block-accordion-a-a__list__item:last-child {
border-bottom: 0;
}
.block-accordion-a-a .active {
background-image: url("../images/common/icon_close001_sp.png");
}
/*
Variations
よくある質問・アコーディオン
Markup:
問題や課題が具体的でなくとも、まずはご相談ください。
まずは簡単なアドバイスをいたします。※基本、無料となります。
block-accordion-b-a - デフォルトスタイル
Style guide: block.accordion.b.a
*/
.block-accordion-b-a__question__cell1 {
width: 5.5%;
padding: 8px;
vertical-align: middle;
}
.block-accordion-b-a__question__cell2 {
width: 89.5%;
padding: 8px 8px 8px 0;
vertical-align: middle;
}
.block-accordion-b-a__question__cell3 {
vertical-align: middle;
width: 5%;
}
.block-accordion-b-a__question__container:hover {
opacity: 0.7;
}
.block-accordion-b-a__answer {
display: none;
}
.block-accordion-b-a__answer__container {
padding: 10px 0 15px 0;
}
.block-accordion-b-a__answer__description {
line-height: 1.65;
}
.block-accordion-b-a__answer__cell1 {
width: 5.5%;
padding: 8px;
}
.block-accordion-b-a__answer__cell2 {
width: 89.5%;
padding: 8px 8px 8px 0;
}
.block-accordion-b-a__answer__cell3 {
width: 5%;
}
.block-accordion-b-a__icon {
background-image: url("../images/top/icon_open002_pc.png");
background-repeat: no-repeat;
background-position: 97% 50%;
-webkit-background-size: 50px auto;
background-size: 50px auto;
display: block;
width: 50px;
height: 50px;
margin: auto;
}
.block-accordion-b-a .active .block-accordion-b-a__icon {
background-image: url("../images/top/icon_close002_pc.png");
}
/*
block-bar
サイトを構成するレイアウトブロック（バー）
Weight: 0
Style guide: block.bar
*/
/*
Variations
SP header logo,contact,menu,
Markup:
block-bar-a-a - デフォルトスタイル
Style guide: block.bar.a.a
*/
.block-bar-a-a {
height: 55px;
background-color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
-webkit-box-shadow: 0 0 9px rgba(0,0,0,0.15);
box-shadow: 0 0 9px rgba(0,0,0,0.15);
/* Toggle Button */
}
.block-bar-a-a__container__wrap {
display: table;
width: 100%;
}
.block-bar-a-a__logo__container {
display: table-cell;
width: 40.33333333333333%;
vertical-align: middle;
height: 55px;
}
.block-bar-a-a__logo__pic {
width: 80px;
height: auto;
}
.block-bar-a-a__logo__btn {
text-align: left;
}
.block-bar-a-a__description__container {
display: table-cell;
width: 25%;
vertical-align: middle;
height: 55px;
}
.block-bar-a-a__tel__container {
display: table-cell;
width: 17.333333333333336%;
vertical-align: middle;
height: 55px;
}
.block-bar-a-a__tel__pic {
width: 45px;
height: auto;
}
.block-bar-a-a__tel__btn {
text-align: right;
}
.block-bar-a-a__mail__container {
display: table-cell;
width: 17.333333333333336%;
vertical-align: middle;
height: 55px;
}
.block-bar-a-a__mail__pic {
width: 45px;
height: auto;
}
.block-bar-a-a__mail__btn {
text-align: right;
}
.block-bar-a-a__menu__container {
display: table-cell;
width: 13.333333333333334%;
}
.block-bar-a-a #nav-toggle {
display: none;
}
.block-bar-a-a #nav-toggle span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #192c59;
left: 0;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
border-radius: 2px;
}
.block-bar-a-a #nav-toggle div {
position: relative;
}
.block-bar-a-a #nav-toggle span:nth-child(1) {
top: 0;
}
.block-bar-a-a #nav-toggle span:nth-child(2) {
top: 8px;
}
.block-bar-a-a #nav-toggle span:nth-child(3) {
top: 17px;
}
.block-bar-a-a .block-navi-f-a__menu {
display: none;
}
.block-bar-a-a #global-nav {
/* 開いてないときは画面外に配置 */
width: 100%;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
margin-bottom: 45px;
}
.block-bar-a-a .open .block-navi-f-a__menu {
display: block;
}
.block-bar-a-a .open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
.block-bar-a-a .open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.block-bar-a-a .open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-ms-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/*
Variations
PCフッターリンク-サービス一覧
Markup:
block-bar-b-a - デフォルトスタイル
Style guide: block.bar.b.a
*/
.block-bar-b-a__title {
margin-bottom: 16px;
}
.block-bar-b-a__list {
display: table;
margin-left: auto;
margin-right: auto;
}
.block-bar-b-a__list__item {
display: inline-block;
border-right: 1px solid #000;
}
.block-bar-b-a__list__item:last-child {
border-right: none;
}
.block-bar-b-a__label {
padding: 0 15px;
color: #000;
}
.block-bar-b-a__label:hover {
opacity: 0.7;
}
/*
Variations
PCフッターバー
Markup:
Copyrightc NOC Outsourcing & Consulting Inc.
block-bar-c-a - デフォルトスタイル
Style guide: block.bar.c.a
*/
.block-bar-c-a__grid2__cell-a {
width: 12.345679012345679%;
}
.block-bar-c-a__grid2__cell-b {
width: 87.65432098765432%;
vertical-align: middle;
}
/*
Variations
PCフッターリンク-ＮＯＣコーポレートサイトリンク
Markup:
block-bar-d-a - デフォルトスタイル
Style guide: block.bar.d.a
*/
.block-bar-d-a__title {
margin-bottom: 16px;
}
.block-bar-d-a__list {
display: table;
margin-left: auto;
margin-right: auto;
}
.block-bar-d-a__list__item {
display: inline-block;
border-right: 1px solid #fff;
}
.block-bar-d-a__list__item:last-child {
border-right: none;
}
.block-bar-d-a__label {
padding: 0 15px;
color: #fff;
}
.block-bar-d-a__label:hover {
opacity: 0.7;
}
/*
Variations
PC bottom header logo,contact,navi,
Markup:
block-bar-e-a - デフォルトスタイル
Style guide: block.bar.e.a
*/
.block-bar-e-a__header__navi {
background-color: #FFD10F;
}
.block-bar-e-a__header__subnavi--general_affairs,
.block-bar-e-a__header__subnavi--labor {
display: none;
background: #fd5209;
z-index: 100;
width: 100%;
position: absolute;
}
.block-bar-e-a__header__subnavi_open {
display: block;
}
.block-bar-e-a__logo {
margin-top: 5px;
}
.block-bar-e-a__contact {
float: right;
}
.block-bar-e-a__tel {
float: right;
}
.block-bar-e-a__grid-a {
padding: 15px 0;
}
.block-bar-e-a__cell--a-a {
width: 50%;
}
.block-bar-e-a__cell--a-b {
width: 50%;
}
.block-bar-e-a__cell--b-a {
width: 24%;
}
.block-bar-e-a__cell--b-b {
width: 76%;
padding-top: 8px;
}
/*
Variations
PC bottom title
Markup:
入金・未入金管理、違算調査の手間の削減
売上・売掛金管理サービス
block-bar-f-a - デフォルトスタイル
Style guide: block.bar.f.a
*/
.block-bar-f-a {
width: 100%;
background: #fff url("../images/bottom/bg_002_pc.jpg") no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
height: 180px;
}
.block-bar-f-a.lcm {
background: #fff url("../images/bottom/bg_001_pc.png") no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
padding-bottom: 30px;
}
.block-bar-f-a__text {
font-size: 1.429rem !important;
text-align: center;
color: #333;
padding-top: 40px;
}
.block-bar-f-a__text--b {
font-size: 1.429rem !important;
text-align: center;
color: #333;
padding-top: 40px;
}
.block-bar-f-a__text--c {
font-size: 1.429rem !important;
text-align: center;
color: #333;
padding-top: 20px;
}
.block-bar-f-a__title {
font-size: 2.715rem !important;
text-align: center;
color: #333;
padding-top: 15px;
}
/*
block-field
サイトを構成するレイアウトブロック（フィールド）
Weight: 0
Style guide: block.field
*/
/*
Variations
ブロック定義サンプル
Markup:
block-field-a-a - デフォルトスタイル
Style guide: block.field.a.a
*/
.block-field-a-a__field {
display: block;
width: 100%;
}
.block-field-a-a__field > .mod-textfield__input,
.block-field-a-a__field .mod-textfield__area {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
.block-field-a-a__field > .mod-textfield__area {
height: 120px;
}
/*
block-field
サイトを構成するレイアウトブロック（フィールド）
Weight: 0
Style guide: block.field
*/
.block-field-b-a .search-field {
position: relative;
padding: 15px 0;
text-align: center;
white-space: nowrap;
}
.block-field-b-a .search-field__container {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 310px;
position: relative;
padding-right: 65px;
font-size: 0;
}
.block-field-b-a .search-field__field {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
margin: 0;
padding: 11px;
line-height: 16px;
vertical-align: top;
letter-spacing: 0.04em;
background-color: #fff;
font-weight: normal;
font-size: 11px;
border: 1px solid #969696;
border-radius: 3px;
height: 50px;
}
.block-field-b-a .search-field__field::-webkit-input-placeholder {
color: #666;
}
.block-field-b-a .search-field__field::-moz-placeholder {
color: #666;
}
.block-field-b-a .search-field__field:-ms-input-placeholder {
color: #666;
}
.block-field-b-a .search-field__field:placeholder-shown {
color: #666;
}
.block-field-b-a .search-field__field:hover,
.block-field-b-a .search-field__field:focus {
border-color: #007ee0;
}
.block-field-b-a .search-field__button {
display: block;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 55px;
height: 50px;
margin: 0 0 0 10px;
padding: 0;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 16px;
letter-spacing: 0;
color: transparent;
background-color: #1480dc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABA0lEQVR4AWJwL/AB9FIGGA4DYRRmEARg7QE2c4bF7k02J1jW3mA3PUv1BlENRS+QXqKqoS2qaDVg+sKb+pHfpE308Rlmnq/TSSY3nHMGfIEc7IDjmHPesKsiZQlYAjVcT4JCyrYgGPZUqf+bJfA5gwxYEHHMOO9TAqMJU1E8gc+2YjPPdZ9UExai9O8XFOlIdAtNuBclGxAmoltpQpkoIIxEtx5ih2/qDpUz/AsIM3mGgz/l57yH/HV7502xXe6y7XiXLUjBDLy0CpWvzQbUoAI5JYa9OWiyAu+qsCuQvII1pRfw3UtI6Qeogc8YxA8LKf0BMoteQkonQngcQhiDKTiA3yuwOYujbmiR9gAAAABJRU5ErkJggg==");
background-position: 50% 50%;
background-repeat: no-repeat;
font-size: 14px;
font-weight: normal;
border: 0;
border-radius: 3px;
cursor: pointer;
}
.block-field-b-a .search-field__button:hover,
.block-field-b-a .search-field__button:focus {
background-color: #1272c4;
}
.block-field-c-a .search-field {
position: relative;
padding: 15px 0;
text-align: center;
white-space: nowrap;
}
.block-field-c-a .search-field__container {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 310px;
position: relative;
padding-right: 65px;
font-size: 0;
}
.block-field-c-a .search-field__field {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
margin: 0;
padding: 11px;
line-height: 16px;
vertical-align: top;
letter-spacing: 0.04em;
background-color: #fff;
font-weight: normal;
font-size: 11px;
border: 1px solid #969696;
border-radius: 3px;
}
.block-field-c-a .search-field__field::-webkit-input-placeholder {
color: #666;
}
.block-field-c-a .search-field__field::-moz-placeholder {
color: #666;
}
.block-field-c-a .search-field__field:-ms-input-placeholder {
color: #666;
}
.block-field-c-a .search-field__field:placeholder-shown {
color: #666;
}
.block-field-c-a .search-field__field:hover,
.block-field-c-a .search-field__field:focus {
border-color: #007ee0;
}
.block-field-c-a .search-field__button {
display: block;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 55px;
height: 40px;
margin: 0 0 0 10px;
padding: 0;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 16px;
letter-spacing: 0;
color: transparent;
background-color: #1480dc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABA0lEQVR4AWJwL/AB9FIGGA4DYRRmEARg7QE2c4bF7k02J1jW3mA3PUv1BlENRS+QXqKqoS2qaDVg+sKb+pHfpE308Rlmnq/TSSY3nHMGfIEc7IDjmHPesKsiZQlYAjVcT4JCyrYgGPZUqf+bJfA5gwxYEHHMOO9TAqMJU1E8gc+2YjPPdZ9UExai9O8XFOlIdAtNuBclGxAmoltpQpkoIIxEtx5ih2/qDpUz/AsIM3mGgz/l57yH/HV7502xXe6y7XiXLUjBDLy0CpWvzQbUoAI5JYa9OWiyAu+qsCuQvII1pRfw3UtI6Qeogc8YxA8LKf0BMoteQkonQngcQhiDKTiA3yuwOYujbmiR9gAAAABJRU5ErkJggg==");
background-position: 50% 50%;
background-repeat: no-repeat;
font-size: 14px;
font-weight: normal;
border: 0;
border-radius: 3px;
cursor: pointer;
}
.block-field-c-a .search-field__button:hover,
.block-field-c-a .search-field__button:focus {
background-color: #1272c4;
}
/*
Variations
ブロック定義サンプル
Markup:
block-field-a-a - デフォルトスタイル
Style guide: block.field.a.a
*/
.block-field-a-a__field {
display: block;
width: 100%;
}
.block-field-a-a__field > .mod-textfield__input,
.block-field-a-a__field .mod-textfield__area {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
font-size: 1rem;
}
.block-field-a-a__field > .mod-textfield__area {
height: 120px;
}
/*
Variations
検索フォーム（A）
Markup:
block-field-b-a - デフォルトスタイル
Style guide: block.field.b.a
*/
/*
Variations
検索フォーム（B）
Markup:
block-field-c-a - デフォルトスタイル
Style guide: block.field.c.a
*/
.block-field-c-a .search-field_sp_footer {
padding: 0 15px;
position: fixed;
bottom: 0;
z-index: 10000;
width: 100%;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block-field-c-a .search-field_sp_close {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABk0lEQVRIicWXQVLCMBSGv+Loum44gHfwCMKGPRzDG+T1CsJwCw4gbmXFHVwDMqNbdBEXJDTWlrwWqP/MPwOkeV/nJS+8JOh0DfSBB+AeuANSN/YJvAFL4AV4Br6VcSuVAgJsAKv0u5uT/omm1AhY1QAWvXIx1LoCpicAi566mFHo7IxQ71kMPr4A1HtSBR1eEOo9LEJTYN0CeO1YdBz4EehWpeKM6joWADco6tQYY40xjccDbxyTgQbqVRY8Nl7iQQfoxfKTJMnhs4hgjDl8N8YgIqXPHlEf4FXxhlZEbCif2lAiot1kC6hxDhfhDaF+ndnVmFAKrwm1wM6Xk1rWWtVvGqlTXVzT4ppr4zgmiyZQESndcErwAuCpCdSPNYSPO8A8thZhbWZZ9qtuRYQsy0qfPaI57I+vbewtfWqbjgc+HJmw75HqlkRT5+mivb/FDSVNYBuNQGXzN7kgtLL1gX9s9jy89fY21IjTNtyamg19qBTIUNR54K2bc/QKozpmyC9tPfJL260b+yC/tM2dv2IBfwBG1P5ShKBc9wAAAABJRU5ErkJggg==");
-webkit-background-size: 15px 15px;
background-size: 15px 15px;
background-repeat: no-repeat;
width: 15px;
height: 15px;
position: absolute;
top: 15px;
left: 0;
}
.block-field-c-a .search-field_sp_open {
display: block;
overflow: hidden;
margin: 0 0 0 10px;
padding: 0;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 16px;
letter-spacing: 0;
color: transparent;
background-color: #1480dc;
background-position: 50% 50%;
background-repeat: no-repeat;
font-weight: normal;
border: 0;
border-radius: 3px 3px 0 0;
cursor: pointer;
width: 43px;
height: 34px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB3UlEQVR4AcXWA4xdQRTG8d7athmrblBbsZ3GdRvUdpzajVXbcWrbXNvWf3GTycmb5Lx5b3a/5Lc+O9/1bTZ39aKIqqurm2M2juI1skH4zPc4illoHs64sC2+CJ+gyUcsdC4gFm6NU3DJcbR2KmAsfhe2pOMn0mDLbbR2LXAaMtnYhCFiTw3BemRA5mTUBRhaDJn76CUHRJFuuAOZBdoC4dn+GWYeoqVtSJRogasw8wHNtQXmwEwaumuGjRJdkQwzs7QFjsHMBs2gxNxamDmiLfAGZoY4FugPM6+0BbIRJkMxZMV8EsJkagtUIMyPGAu8Q5gKbYHEpt4DzzydAy+0BY54ugoOawvMhJk0dIvDfWC6tkCA93G+E75FEM2zYD5k7qOH4llwGzJzXZ6GRyGTjc0YJRYejo1Ih8yhWN4HLsCWPPxELmy5gBaxvBG1wAG4ZD+aN/yfrTiHtq7vhFPxGJo8xhRjdivCvMZwbQFZIsBE7MNjpCEbaXiMPZiAQMydgZlsLFIXcCCLt8VLmKnCbrTwVUCWGIpMyDxAL1nAV4l5qITMf0wSBbyV2IZIKcXyxijQHLdgy24x5KVEd/xCpOSIAW8lxqAIMkWWIS8llkDmrGXAW4llSEAuTqFTDX3YGKlfSfEnAAAAAElFTkSuQmCC");
-webkit-background-size: 16px 16px;
background-size: 16px 16px;
position: fixed;
right: 15px;
bottom: -34px;
z-index: 10000;
}
/*
block-form
サイトを構成するレイアウトブロック（フォーム）
Weight: 0
Style guide: block.form
*/
/*
Variations
お問い合わせフォーム
Markup:
block-form-a-a - デフォルトスタイル
Style guide: block.form.a.a
*/
.block-form-a-a__label__label {
font-weight: bold;
}
.block-form-a-a__label__tag {
display: inline-block;
color: #fff;
background-color: #dc1e28;
padding: 2px 7px;
float: right;
}
.block-form-a-a__textarea {
width: 100%;
}
.block-form-a-a .mod-textfield__input {
width: 220px;
height: 28px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 1;
padding: 0;
}
.block-form-a-a .mod-textfield__area {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block-form-a-a__error {
padding-top: 7px;
}
/*
block-layout
サイトを構成するレイアウトブロック（レイアウト）
Weight: 0
Style guide: block.layout
*/
/*
Variations
コンテンツレイアウト（調度半分+余白）
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
block-layout-a-a - デフォルトスタイル
Style guide: block.layout.a.a
*/
.block-layout-a-a__cell-a {
width: 47.91666666666667%;
margin-right: 4.166666666666666%;
float: left;
}
.block-layout-a-a__cell-b {
float: right;
width: 47.91666666666667%;
}
/*
Variations
構造:float（３カラム カラム落ち：真ん中の左右に余白あり）
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
block-layout-b-a - デフォルトスタイル
Style guide: block.layout.b.a
*/
.block-layout-b-a__cell--b {
margin-right: 5%;
margin-left: 5%;
width: 30%;
}
.block-layout-b-a__cell--a {
width: 30%;
}
.block-layout-b-a__cell--c {
width: 30%;
}
.block-layout-b-a__cell--a:nth-child(2) {
margin-right: 5%;
margin-left: 5%;
width: 30%;
}
/*
block-list
サイトを構成するレイアウトブロック（リスト）
Weight: 0
Style guide: block.list
*/
/*
Variations
ブロック定義サンプル
Markup:
block-list-a-a - デフォルトスタイル
Style guide: block.list.a.a
*/
/*
block-navi
サイトを構成するレイアウトブロック（ナビ）
Weight: 0
Style guide: block.navi
*/
.block-navi-j-a__label:hover {
opacity: 0.7;
}
/*
Variations
汎用ボタン-問い合わせ
Markup:
block-navi-a-a - デフォルトスタイル
Style guide: block.navi.a.a
*/
.block-navi-a-a__container {
padding: 15px;
}
.block-navi-a-a__btn__mail {
margin-bottom: 10px;
}
.block-navi-a-a__btn__tel:hover {
opacity: 0.7;
}
/*
Variations
汎用ボタン-お客様の事例
Markup:
総務・庶務の安定運用を実現
経営コンサルティング会社 A社
従業員数：約400名
提供サービス：総務・庶務
block-navi-b-a - デフォルトスタイル
Style guide: block.navi.b.a
*/
.block-navi-b-a__btn:hover {
opacity: 0.7;
}
.block-navi-b-a__icon {
position: absolute;
bottom: 0;
right: 0;
}
.block-navi-b-a__icon__pict {
max-width: 65px;
height: auto;
}
.block-navi-b-a__title {
margin-top: 17px;
margin-bottom: 8px;
}
.block-navi-b-a__company {
margin-bottom: 6px;
}
.block-navi-b-a__member {
margin-bottom: 6px;
}
.block-navi-b-a__service {
margin-bottom: 6px;
}
/*
Variations
汎用ボタン-総務アウトソーシングブログ
Markup:
総務とは？その仕事内容と役割とは？ 必要なスキルとともに
block-navi-c-a - デフォルトスタイル
Style guide: block.navi.c.a
*/
.block-navi-c-a__btn:hover {
opacity: 0.7;
}
.block-navi-c-a__pict__container {
float: left;
width: 35.483870967741936%;
padding-right: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block-navi-c-a__text {
font-weight: bold;
float: left;
width: 64.51612903225806%;
color: #000;
}
/*
Variations
フッタナビ SP-2
Markup:
block-navi-d-a - デフォルトスタイル
Style guide: block.navi.d.a
*/
.block-navi-d-a__btn:hover {
opacity: 0.7;
}
.block-navi-d-a__list__item {
border-bottom: 1px solid #fff;
}
.block-navi-d-a__list__item:last-child {
border-bottom: 0;
}
/*
Variations
ページトップへ
Markup:
block-navi-e-a - デフォルトスタイル
Style guide: block.navi.e.a
*/
.block-navi-e-a .page-top {
display: none;
margin: 0;
padding: 0;
}
.block-navi-e-a .page-top p {
margin: 0;
padding: 0;
position: fixed;
right: 40px;
bottom: 40px;
}
.block-navi-e-a .move-page-top {
display: block;
cursor: pointer;
text-decoration: none;
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.block-navi-e-a .move-page-top img {
width: 55px;
height: auto;
}
/*
Variations
インライン・ナビゲージョン - メインメニュー（SP用）
Markup:
block-navi-f-a - デフォルトスタイル
Style guide: block.navi.f.a
*/
.block-navi-f-a__menu__item {
width: 100%;
border-bottom: 1px solid #dbdbdb;
}
.block-navi-f-a__menu__item:first-child {
border-top: 1px solid #dbdbdb;
}
.block-navi-f-a__menu__item:last-child {
border-bottom: 0;
}
.block-navi-f-a__cell--a {
width: 90%;
background: #fff;
vertical-align: middle;
}
.block-navi-f-a__cell--b {
width: 10%;
background: #fff;
vertical-align: middle;
}
.block-navi-f-a__btn--a {
font-weight: bold;
text-align: left;
padding: 17px 16px;
}
.block-navi-f-a__btn--b {
position: relative;
}
.block-navi-f-a__btn__close {
text-align: center;
}
.block-navi-f-a__btn__change {
width: 30px;
height: 30px;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-image: url("../images/icon_open001_sp.png");
-webkit-background-size: 30px 30px;
background-size: 30px 30px;
background-repeat: no-repeat;
}
.block-navi-f-a__text--a {
display: block;
text-align: left;
padding: 17px 16px;
font-weight: bold;
}
.block-navi-f-a__text--b {
width: 30px;
height: 30px;
position: absolute;
top: 10px;
right: 10px;
}
.block-navi-f-a__grid {
background-color: #f6f6f6;
color: #1c305c;
}
.block-navi-f-a__grid:hover {
text-decoration: none;
color: #fff;
background-color: #151b28;
}
.block-navi-f-a__submenu__item {
border-bottom: 1px solid #dbdbdb;
padding: 0;
}
.block-navi-f-a__submenu__item__link {
display: block;
padding: 10px 0 10px 30px;
background: #fff;
background-image: url("../images/icon_yajirushi002_sp.png");
background-repeat: no-repeat;
background-position: 97% 50%;
-webkit-background-size: 11px auto;
background-size: 11px auto;
}
.block-navi-f-a__submenu__item__link:hover {
background-color: #151b28;
background-image: url("../images/icon_yajirushi003_sp.png");
color: #fff;
}
.block-navi-f-a__submenu__item:last-child {
border: none;
}
.block-navi-f-a__more--a,
.block-navi-f-a__more--b {
display: none;
border-top: 1px solid #dbdbdb;
}
.block-navi-f-a__pict--a {
width: 17.5px;
height: 13px;
padding-left: 5px;
}
.submenu-a_open .block-navi-f-a__more--a {
display: block;
}
.submenu-b_open .block-navi-f-a__more--b {
display: block;
}
.submenu-a_open .block-navi-f-a__btn__change {
background-image: url("../images/icon_close001_sp.png");
background-color: #fff;
}
.submenu-b_open .block-navi-f-a__btn__change {
background-image: url("../images/icon_close001_sp.png");
background-color: #fff;
}
/*
Variations
PC bottom navi
Markup:
block-navi-g-a - デフォルトスタイル
Style guide: block.navi.g.a
*/
.block-navi-g-a__grid {
height: 8px;
}
.block-navi-g-a__cell {
width: 20%;
}
.block-navi-g-a__cell--a { width: 20%;}
.block-navi-g-a__cell--b { width: 20%;}
.block-navi-g-a__cell--c { width: 20%;}
.block-navi-g-a__cell--d { width: 20%;}
.block-navi-g-a__cell--e { width: 20%;}
span.blank { background: url(../images/icon-external.png) no-repeat right top; padding-right: 20px; }
.block-navi-g-a__text--a,
.block-navi-g-a__text--b,
.block-navi-g-a__text--c,
.block-navi-g-a__text--d {
font-size: 1.143rem !important;
}
.block-navi-g-a__text--e {
font-size: 1.143rem !important;
}
.block-navi-g-a__text__link--a,
.block-navi-g-a__text__link--b,
.block-navi-g-a__text__link--c,
.block-navi-g-a__text__link--d,
.block-navi-g-a__text__link--e,
.block-navi-g-a__text__link--f {
padding: 15px 0;
display: block;
}
.block-navi-g-a__text__link--b:hover,
.block-navi-g-a__text__link--c:hover {}
.block-navi-g-a__text__inner--a,
.block-navi-g-a__text__inner--b,
.block-navi-g-a__text__inner--c,
.block-navi-g-a__text__inner--d,
.block-navi-g-a__text__inner--e {
display: block;
border-left: 1px solid #333;
}
.mod-responsive-grid2-d__cell--it .block-navi-g-a__text__inner--a {
border-right: none;
border-left: 1px solid #333;
}
.mod-responsive-grid2-d__cell--it .block-navi-g-a__text__inner--b {
border-right: 1px solid #333;
border-left: 1px solid #333;
}
.mod-responsive-grid2-d__cell--it .block-navi-g-a__text__inner--c {
border-right: 1px solid #333;
border-left: none;
}
.mod-responsive-grid2--it {
display: flex;
height: auto;
}
.block-navi-g-a__text__inner--b:hover,
.block-navi-g-a__text__inner--b:focus {
text-decoration: none;
opacity: 0.7;
}
.block-navi-g-a__text__inner--f {
display: block;
border-left: 1px solid #333;
border-right: 1px solid #333;
}
.block-navi-g-a__text__current {
color: #999;
}
.block-navi-g-a__pict--a {
padding: 5px 0 0 5px;
}
.changebg {
background-image: url("../images/bottom/bg_002.png");
background-position: bottom center;
background-repeat: no-repeat;
}
/*
Variations
PC bottom subnavi
Markup:
block-navi-h-a - デフォルトスタイル
Style guide: block.navi.h.a
*/
.block-navi-h-a {
margin: 0 auto;
}
.block-navi-h-a__grid--a {
padding: 10px;
width: 83%;
margin: 0 auto;
}
.block-navi-h-a__grid--b {
padding: 8px;
width: 63%;
margin: 0 auto;
}
.block-navi-h-a__cell--a-a {
width: 25.3%;
padding-right: 1.3%;
}
.block-navi-h-a__cell--a-b {
width: 25.4%;
padding-right: 1.4%;
}
.block-navi-h-a__cell--a-c {
width: 25.3%;
padding-right: 1.3%;
}
.block-navi-h-a__cell--a-d {
width: 24%;
}
.block-navi-h-a__cell--b-a {
width: 32%;
padding-right: 2%;
}
.block-navi-h-a__cell--b-b {
width: 32%;
padding-right: 2%;
}
.block-navi-h-a__cell--b-c {
width: 32%;
}
.block-navi-h-a__text--a {
text-align: center;
padding: 8px 0;
}
.block-navi-h-a__text__link--a {
display: block;
}
.block-navi-h-a__text__link--a:hover {
background: #ff9263;
}
#general_affairs--a .block-navi-h-a__cell--a-a .block-navi-h-a__text__link--a,
#general_affairs--b .block-navi-h-a__cell--a-b .block-navi-h-a__text__link--a,
#general_affairs--c .block-navi-h-a__cell--a-c .block-navi-h-a__text__link--a,
#labor--a .block-navi-h-a__cell--b-a .block-navi-h-a__text__link--a {
background: #fd5209;
}
/*
Variations
パンくずリスト
Markup:
block-navi-i-a - デフォルトスタイル
Style guide: block.navi.i.a
*/
.block-navi-i-a {
padding: 20px 0 0 0;
}
.block-navi-i-a__nav__items {
padding: 0;
}
.block-navi-i-a__nav__item {
display: inline-block;
padding-left: 8px;
padding-right: 18px;
}
.block-navi-i-a__nav__item__link {
color: #333;
text-decoration: none;
}
.block-navi-i-a__nav__item__link1:hover {
color: #ff9263;
}
.block-navi-i-a__nav__item:after {
content: '';
display: block;
position: absolute;
width: 8px;
height: 8px;
right: 0;
top: 50%;
margin-top: -4px;
border-top: 1px solid #000;
border-right: 1px solid #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.block-navi-i-a__nav__item:first-child {
padding-left: 0;
}
.block-navi-i-a__nav__item:last-child {
padding-right: 0;
}
.block-navi-i-a__nav__item:last-child:after {
content: none;
}
/*
Variations
共通パーツ - フッターバナー
Markup:
block-navi-j-a - デフォルトスタイル
style guide: block.navi.j.a
*/
/*
block-table
サイトを構成するレイアウトブロック（特殊な表組み）
Weight: 0
Style guide: block.table
*/
/*
Variations
テーブル
Markup:
block-table-a-a - デフォルトスタイル
Style guide: block.table.a.a
*/
/*
block-widget
サイトを構成するレイアウトブロック（ヴィジェット）
Weight: 0
Style guide: block.widget
*/
/*
Variations
ヴィジェット・A - mainvisual
Markup:
block-widget-a-a - デフォルトスタイル
Style guide: block.widget.a.a
*/
.block-widget-a-a {
background-image: url("../images/top/img001_pc.png");
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
.block-widget-a-a__info__container {
margin-top: 20px;
}
.block-widget-a-a__lead__logo__container {
float: left;
width: 68.89999999999999%;
}
.block-widget-a-a__lead {
color: #000;
margin-bottom: 17px;
}
.block-widget-a-a .block-navi-a-a {
float: right;
width: 31.1%;
}
.block-widget-a-a__type {
margin-top: 50px;
}
.block-widget-a-a__type__container {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.block-widget-a-a__type__item {
display: inline-block;
margin-right: 5px;
margin-bottom: 20px;
vertical-align: middle;
font-weight: bold;
}
.block-widget-a-a__type__br {
display: none;
}
.block-widget-a-a__main__lead {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
width: 100%;
line-height: 1.3;
text-align: center;
font-size: 3.858rem !important;
}
.block-widget-a-a__grid2 {
max-width: 1000px;
width: 100%;
margin: 50px 0 50px 0;
}
.block-widget-a-a__grid2__container {
margin: 0 200px;
padding: 0px;
}
.block-widget-a-a__grid2__cell__a {
width: 20%;
padding-right: 2%;
}
.block-widget-a-a__grid2__cell__b {
width: 20%;
padding-right: 2%;
}
.block-widget-a-a__grid2__cell__c {
width: 20%;
padding-right: 2%;
}
.block-widget-a-a__grid2__cell__d {
width: 20%;
padding-right: 2%;
}
.block-widget-a-a__grid2__cell__e {
width: 20%;
padding-right: 2.2%;
}
.block-widget-a-a__grid2__cell__f {
width: 20%;
padding-right: 2.2%;
}
.block-widget-a-a__grid2__sp {
width: 100%;
margin: 10px 0 20px 0;
}
.block-widget-a-a__grid2__sp__container {
margin: 0;
padding: 0;
}
.block-widget-a-a__grid2__sp__cell__a {
width: 192px;
}
.block-widget-a-a__grid2__sp__cell__b {
width: 12px;
}
.block-widget-a-a__grid2__sp__cell__c {
width: 192px;
}
.block-widget-a-a__grid2__sp__cell__d {
width: 12px;
}
.block-widget-a-a__grid2__sp__cell__e {
width: 192px;
}
.block-widget-a-a__pict__link:hover {
opacity: 0.7;
}
.block-widget-a-a__icon {
position: absolute;
top: -30px;
left: -110px;
}
@media only screen and (max-width: 768px){
.block-widget-a-a__grid2__container {
margin: 0 100px;
padding: 0px;
}
}
/*
Variations
ヴィジェット・B - NOCのリモート総務
Markup:
コスト削減・効率化しながら
NOCのリモート総務
block-widget-b-a - デフォルトスタイル
Style guide: block.widget.b.a
*/
.block-widget-b-a {
background-image: url("../images/top/bg001_pc.png");
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 220px;
}
.block-widget-b-a__text--a {
margin-top: 30px;
}
.block-widget-b-a__text--b {
margin-bottom: 15px;
}
.block-widget-b-a__btn {
width: 280px;
margin: 0 auto;
}
.block-widget-b-a__btn__label {
padding: 15px 0;
}
/*
Variations
ヴィジェット・C - 見出しとコンテンツ
Markup:
block-widget-c-a - デフォルトスタイル
Style guide: block.widget.c.a
*/
/*
Variations
ヴィジェット・D - 主要サービスブロック
Markup:
庶務業務全般（文書管理・メール室運営・受付・電話応対）や、請求書管理など、幅広くご支援いたします。
block-widget-d-a - デフォルトスタイル
Style guide: block.widget.d.a
*/
.block-widget-d-a__pict__container {
margin-bottom: 15px;
}
.block-widget-d-a__list {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.block-widget-d-a__btn {
text-decoration: none;
}
.block-widget-d-a__tag {
background-color: #f9f4eb;
border-radius: 4px;
padding: 6px 10px;
color: #333;
}
/*
Variations
ヴィジェット・D-B - 主要サービスブロックアンカー
Markup:
block-widget-d-b - デフォルトスタイル
Style guide: block.widget.d.b
*/
.block-widget-d-b__label {
margin-bottom: 20px;
}
.block-widget-d-b__container {
float: left;
width: 32%;
margin-right: 2%;
}
.block-widget-d-b__container:last-child {
margin-right: 0;
}
.block-widget-d-b__btn {
text-decoration: none;
}
.block-widget-d-b__tag {
background-color: #f9f4eb;
border-radius: 4px;
padding: 6px 10px;
color: #333;
}
/*
Variations
ヴィジェット・D-C - 主要サービスブロック
Markup:
block-widget-d-c - デフォルトスタイル
Style guide: block.widget.d.c
*/
.block-widget-d-c__container__titlle {
float: left;
border-left: solid 5px #fd5209;
margin-bottom: 15px;
padding-left: 15px;
}
.block-widget-d-c__list {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.block-widget-d-c__btn {
text-decoration: none;
}
.block-widget-d-c__tag {
background-color: #fff5cf;
border-radius: 4px;
padding: 6px 10px;
color: #333;
}
/*
Variations
ヴィジェット・E - 主要サービスブロック2カラム
Markup:
block-widget-e-a - デフォルトスタイル
Style guide: block.widget.e.a
*/
.block-widget-e-a-grid__first {
margin-bottom: 40px;
}
.block-widget-e-a-grid__cell {
float: left;
width: 32%;
margin-right: 2%;
}
.block-widget-e-a-grid__cell:last-child {
margin-right: 0;
}
/*
Variations
ヴィジェット・F - こんな事でお悩みではないでしょうか？
Markup:
総務担当者が退職 してしまう派遣社員の入れ替わりが激しく 、業務に支障が出ている会社全体のコスト削減 を言われているが、どうしたらいいかわからない紙文化のため、申請・管理が手間
オフィス機器や資材のメンテナンス が面倒アウトソーシングを利用しているが、改善提案がなく、リアクションも遅い
block-widget-f-a - デフォルトスタイル
Style guide: block.widget.f.a
*/
.block-widget-f-a {
width: 970px;
margin: 0 auto;
}
.block-widget-f-a__container {
background-color: #fff;
padding: 40px 30px 35px 60px;
border-radius: 19px;
}
.block-widget-f-a__group {
margin-bottom: 0px;
}
.block-widget-f-a__item {
font-weight: 700 !important;
padding: 10px 0 10px 50px;
background-image: url("../images/top/icon_check001_pc.png");
background-repeat: no-repeat;
background-position: 10px center;
}
.block-widget-f-a__text__marker {
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #f1ea33));
background: linear-gradient(transparent 60%, #f1ea33 60%);
font-size: 1.715rem !important;
}
.block-widget-f-a__text__result {
width: 684px;
margin: 0 auto;
}
/*
Variations
ヴィジェット・G - NOCの総務アウトソーシングの特長
Markup:
弊社は創業時からバックオフィスの総合アウトソーシングをご提供しています。
総務に特化した運用責任者（スーパーバイザー）は、常にお客様側からプロジェクトを管理しています。
属人化している業務を見える化し、マニュアル化することで平準化します。
これまでご契約いただいた案件のうち、継続率は95.9％。またお客様へ実施したアンケートでは、業務品質・スキルへの満足が86％、接客態度についての満足度は100％でした。
「リモート総務」のように、総務業務をトータルでサポートできるサービスを展開しています。
またこれまでの経験から、業務改善に関する様々なアドバイスも行っています。
block-widget-g-a - デフォルトスタイル
Style guide: block.widget.g.a
*/
.block-widget-g-a__grid--a {
background-color: #fff5d3;
padding: 20px 40px;
margin-bottom: 20px;
}
.block-widget-g-a__cell--a-a {
width: 70%;
vertical-align: middle;
padding-right: 50px;
}
.block-widget-g-a__cell--a-b {
width: 22%;
vertical-align: middle;
}
.block-widget-g-a__cell--b-a {
width: 16.923076923076923%;
padding-right: 3.076923076923077%;
}
.block-widget-g-a__cell--b-b {
width: 83.07692307692308%;
}
.block-widget-g-a__text--a {
font-size: 1.858rem !important;
}
.block-widget-g-a__text--b {
padding-top: 20px;
font-size: 1.858rem !important;
}
.block-widget-g-a__text--c {
margin-top: 20px;
}
/*
Variations
ヴィジェット・G-B - NOCの総務アウトソーシングの特長
Markup:
コスト削減を図るにあたり、まず、ビジネスをコアかノンコアに分類し、業務プロセスの可視化が必要です。次に、業務プロセスごとに、その必要性や共有可能性について検討します。共有可能な業務プロセスについては、極力標準化を図り、業務プロセスのダブリの解消やシステムの有効活用を検討します。このとき、不要なプロセスを担当している社員の配置換えを検討するケースも出てきます。社員の配置換えについては、素養の有りなしはともかくモチベーションにも考慮する必要があります。なぜ配置換えになるのか、上長はしっかりと説明する必要があります。終身雇用を前提にした事前説明なき人事権の発動は、一歩間違えると個人の問題ではなくその周辺の社員にも影響がでるためです。
NOCのサービス
複数回にわたるヒアリングやアンケートを実施し、業務項目の洗い出し、稼働工数、人員数、業務フローなど多岐にわたる調査を行い、業務のボトルネックや不必要な部分を見つけていきます。
block-widget-g-b - デフォルトスタイル
Style guide: block.widget.g.b
*/
.block-widget-g-b__grid--a {
margin-bottom: 20px;
}
.block-widget-g-b__cell--b-a {
width: 9%;
padding-right: 2%;
}
.block-widget-g-b__cell--b-b {
width: 80%;
padding-top: 1.5%;
}
.block-widget-g-b__cell--b-c {
border-radius: 10px;
background-color: #fff5d3;
padding: 30px;
}
.block-widget-g-b__cell--b-d {
border-radius: 10px;
background-color: #f1f1f1;
padding: 30px;
}
.block-widget-g-b__text--a {
font-size: 1.858rem !important;
}
.block-widget-g-b__text--b {
font-size: 1.858rem !important;
}
.block-widget-g-b__text--c {
margin-top: 20px;
}
.block-widget-g-b__text--d {
color: #838383;
}
/*
Variations
ヴィジェット・H - シンプル（汎用）NOCの経理アウトソーシングを導入されたお客様の事例
Markup:
総務・庶務の安定運用を実現
経営コンサルティング会社 A社
従業員数：約400名
提供サービス：総務・庶務
受付業務の効率化と品質向上の実現
外資系メーカー B社
従業員数：約2,000名
提供サービス：受付
メール室運用の標準化を達成
システム開発会社 C社
従業員数：約1000名
提供サービス：メールルーム
メール室の月間の稼働時間40%削減
外資系金融 R社様
従業員数：約300名
提供サービス：メールルーム
総務BPOセンターの効率化とコスト削減を両立
コンサルティング会社 Q社様
従業員数：約2,000名
提供サービス：総務BPO
分社化した子会社の総務部をスムーズに立ち上げ
外資系製薬会社 S社様
従業員数：約900名
提供サービス：総務BPO
block-widget-h-a - デフォルトスタイル
Style guide: block.widget.h.a
*/
.block-widget-h-a-grid__cell {
float: left;
width: 30%;
margin-right: 5%;
}
.block-widget-h-a-grid__cell:last-child {
margin-right: 0;
}
/*
Variations
ヴィジェット・I - 経理アウトソーシングブログ
Markup:
block-widget-i-a - デフォルトスタイル
Style guide: block.widget.i.a
*/
.block-widget-i-a__grid {
margin-bottom: 40px;
}
.block-widget-i-a__grid:last-child {
margin-bottom: 0;
}
.block-widget-i-a__grid__cell {
float: left;
width: 31%;
margin-right: 3.5%;
}
.block-widget-i-a__grid__cell:last-child {
margin-right: 0;
}
.block-widget-i-a__label {
margin: 0 auto 0;
}
/*
Variations
ヴィジェット・J - 共通パーツ 問い合わせブロック
Markup:
総務業務のアウトソーシングに関する
block-widget-j-a - デフォルトスタイル
Style guide: block.widget.j.a
*/
.block-widget-j-a {
background-image: url("../images/common/bg001_pc.jpg");
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
.block-widget-j-a__grid2__cell:first-child {
padding-right: 30px;
vertical-align: middle;
}
.block-widget-j-a__grid2__cell:last-child {
padding-left: 30px;
vertical-align: middle;
}
.block-widget-j-a__tel__label {
display: inline-block;
}
.block-widget-j-a__tel__label:hover {
opacity: 0.7;
}
.block-widget-j-a__contact__label {
background-color: #ea602b;
text-align: center;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block-widget-j-a__contact__label__pic {
margin-right: 30px;
display: inline-block;
max-width: 400px;
}
.block-widget-j-a__contact__label:hover {
opacity: 0.7;
}
/*
Variations
ヴィジェット・K - サービス詳細メニュー
Markup:
メール室運営サービス
メール室の運営は軽作業と思われがちで、実際の業務がブラックボックス化していることが多々あります。それらの課題を解消し、業務の見える化・マニュアル化を実現します。また、配布遅延や郵便物の紛失など、リスク回避のための体制構築とセキュリティを意識したサービスをご提供いたします。
主な対象業務
●管理関連
・郵便、発送物管理 ・資材、備品管理 ・切手、印紙管理 など
●業務関連
・郵便物受取、差出対応 ・社内便回収、配布 ・国内外宅配便受取、配布
・資料の封入、封緘 ・バイク便対応 など
block-widget-k-a - デフォルトスタイル
Style guide: block.widget.k.a
*/
.block-widget-k-a__cell--a {
float: left;
width: 32%;
margin-right: 4%;
}
.block-widget-k-a__cell--b {
float: left;
width: 64%;
}
.block-widget-k-a__cell__btn {
width: 120px;
float: right;
}
.block-widget-k-a__pict--a {
width: 320px;
}
/*
Variations
ヴィジェット・K-B - LP こんな事でお悩みではないでしょうか？
Markup:
block-widget-k-b - デフォルトスタイル
Style guide: block.widget.k.b
*/
.block-widget-k-b__cell--a {
width: 22%;
vertical-align: bottom;
}
.block-widget-k-b__item {
padding: 0 0 0 17px;
background-image: url("../images/top/bg003.png");
background-repeat: no-repeat;
background-position: left center;
margin: 0 0 10px 0;
height: 60px;
}
.block-widget-k-b__item:last-child {
margin: 0;
}
.block-widget-k-b__item__inner {
background-color: #fff;
border-radius: 10px;
background-image: url("../images/top/icon_check001_pc.png");
background-repeat: no-repeat;
background-position: 15px center;
padding: 14px 15px 0 50px;
height: 44px;
display: inline-block;
}
.block-widget-k-b__text__marker {
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #f1ea33));
background: linear-gradient(transparent 60%, #f1ea33 60%);
font-size: 1.572rem !important;
}
.block-widget-k-b__pict--a {
width: 180px;
}
.block-widget-k-b__pict--b {
width: 799px;
}
/*
Variations
ヴィジェット・K-C - サービス詳細メニュー
Markup:
労働力提供の対価である「給料」の適切な把握と支払いが困難になる
各部署で勤怠管理をすることはできますが、企業全体で働く社員一人ひとりがどのような労働を提供しているかを把握できなくなり「給料」の適切な把握と支払いが困難になります。
block-widget-k-c - デフォルトスタイル
Style guide: block.widget.k.c
*/
.block-widget-k-c__container {
border-radius: 10px;
display: -webkit-box;
height: 100%;
}
.block-widget-k-c__cell--a {
float: left;
width: 20%;
margin-right: 0%;
background-color: #fff5d3;
border-radius: 10px 0px 0px 10px;
}
.block-widget-k-c__cell--b {
float: left;
width: 80%;
}
.block-widget-k-c__pict {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/*
Variations
ヴィジェット・K-D - サービス詳細メニュー
Markup:
block-widget-k-d - デフォルトスタイル
Style guide: block.widget.k.d
*/
.block-widget-k-d__container {
border-radius: 10px;
display: -webkit-box;
height: 100%;
}
.block-widget-k-d__cell--a {
float: left;
width: 30%;
}
.block-widget-k-d__cell--b {
float: left;
width: 70%;
}
.block-widget-k-d__pict {
max-width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/*
Variations
ヴィジェット・K-E - サービス詳細メニュー
Markup:
メール室 + 他のサービスとの組み合わせ
メール室における待機時間を有効活用するために庶務サービスなどを組合わせてご利用いただくことが可能です。
block-widget-k-e - デフォルトスタイル
Style guide: block.widget.k.e
*/
.block-widget-k-e__container {
border-radius: 10px;
display: -webkit-box;
height: 100%;
}
.block-widget-k-e__cell--a {
float: left;
width: 20%;
margin-right: 0%;
}
.block-widget-k-e__cell--b {
float: left;
width: 80%;
}
.block-widget-k-e__pict {
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/*
Variations
ヴィジェット・K-F - サービス詳細メニュー
Markup:
文書管理のよくあるお悩み①
文書の電子化をするのが大変！そんな時間がとれない！
アウトソーシングで作業時間を削減
アウトソーシングすれば、スキャニングからシステム運用まで対応が可能ですので、従業員の方は力を入れたい業務に集中することが可能です。例えば、文書管理システムにおいて1日3時間割いているとすれば、20日で「60時間」、200日で「600時間」にもなります。文書管理システムだけで、こんなに時間を使いたくないと考える企業も多いのではないでしょうか？
block-widget-k-f - デフォルトスタイル
Style guide: block.widget.k.f
*/
.block-widget-k-f__container {
border-radius: 10px;
display: -webkit-box;
height: 100%;
}
.block-widget-k-f__cell__item {
background: #f8b53a;
border-radius: 20px;
padding: 3px;
text-align: center;
width: 80%;
margin: 0 auto;
}
.block-widget-k-f__cell__text {
font-weight: 700 !important;
text-align: center;
}
.block-widget-k-f__cell--a {
padding: 30px;
float: left;
width: 36%;
margin-right: 0%;
background-color: #fff5d3;
border-radius: 10px 0px 0px 10px;
}
.block-widget-k-f__cell--b {
float: left;
width: 64%;
}
.block-widget-k-f__pict {
text-align: center;
margin: 0 auto;
max-width: 60%;
}
/*
Variations
ヴィジェット・K-F - サービス詳細メニュー
Markup:
・従業員数が多く、計算が煩雑。
・専門性を持った従業員がおらず、育てる人的時間的余裕もない。
・法改正に対応している人的時間的余裕がない。
・給与計算に時間がとられ、本質的に必要な業務ができていない。
・給与計算のために、複数の従業員を専門的に雇っており、多額の人件費が発生している。
block-widget-k-g - デフォルトスタイル
Style guide: block.widget.k.g
*/
.block-widget-k-g__container {
border-radius: 10px;
display: -webkit-box;
height: 100%;
}
.block-widget-k-g__cell--a {
padding: 30px;
float: left;
width: 30%;
margin-right: 0%;
background-color: #fff5d3;
border-radius: 10px;
}
.block-widget-k-g__cell--b {
float: left;
width: 70%;
padding: 0 0 0 30px;
}
.block-widget-k-g__pict {
text-align: center;
margin: 0 auto;
max-width: 60%;
}
/*
Variations
ヴィジェット・M - アウトソーサーの価格に関する記事
Markup:
block-widget-m-a - デフォルトスタイル
Style guide: block.widget.m.a
*/
.block-widget-m-a__grid__cell--a {
width: 45%;
padding-right: 10%;
}
.block-widget-m-a__grid__cell--b {
width: 45%;
}
/*
Variations
ヴィジェット・M-B - NOCが労務管理のすべてをお請けいたします！
Markup:
block-widget-m-b - デフォルトスタイル
Style guide: block.widget.m.b
*/
.block-widget-m-b__grid__cell--a {
width: 48%;
padding-right: 2%;
}
.block-widget-m-b__grid__cell--b {
width: 48%;
}
/*
Variations
ヴィジェット・P - bottom (サービスの特徴 3clm)
Markup:
大手ファストフード店の売上管理や大手通信系商社の請求書発送、入金管理などさまざまな業種のお客様の売上・売掛金管理を支援してきた実績とノウハウを活かし、貴社に合わせたサービス体制をご提案することが可能です。
売上・売掛金管理に関連するその他の経理業務、請求書発行、入金・回収管理などの業務と合わせて依頼でき、トータルでの効率化・コスト削減を支援いたします。
経理経験者が業務を担当するため、ミスや手戻りを最小限に留めます。また、会社ごとにある仕訳ルールをしっかり理解して業務を行います。
block-widget-p-a - デフォルトスタイル
Style guide: block.widget.p.a
*/
.block-widget-p-a__cell--a {
width: 34.9%;
padding-right: 4.7%;
}
.block-widget-p-a__cell--b {
width: 34.9%;
padding-right: 4.7%;
}
.block-widget-p-a__cell--c {
width: 30.2%;
}
.block-widget-p-a__pict--a {
max-width: 250px;
margin: 0 auto;
padding-bottom: 20px;
}
/*
Variations
ヴィジェット・Q - bottom (この企業におすすめ)4列
Markup:
block-widget-q-a - デフォルトスタイル
Style guide: block.widget.q.a
*/
.block-widget-q-a__cell--a-a {
width: 50%;
}
.block-widget-q-a__cell--a-b {
width: 50%;
}
.block-widget-q-a__cell__wrap {
position: relative;
width: 100%;
height: 100%;
padding: 100% 0 0;
}
.block-widget-q-a__cell__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../images/bottom/bg_001.png");
background-repeat: no-repeat;
-webkit-background-size: contain;
background-size: contain;
}
.block-widget-q-a__cell--b-a,
.block-widget-q-a__cell--b-c {
width: 44%;
vertical-align: middle;
}
.block-widget-q-a__cell--b-b {
width: 6%;
height: 10px;
}
.block-widget-q-a__cell--b-d {
width: 6%;
height: 10px;
}
.block-widget-q-a__text--a {
text-align: center;
font-size: 1.572rem !important;
padding-top: 80px;
}
.block-widget-q-a__text--b {
text-align: center;
font-size: 1.572rem !important;
}
.block-widget-q-a__text--c {
text-align: center;
font-size: 1.572rem !important;
padding-top: 65px;
}
.block-widget-q-a__text--d {
text-align: center;
font-size: 1.572rem !important;
}
.block-widget-q-a__text--e {
text-align: center;
font-size: 1.429rem !important;
padding-top: 70px;
}
.block-widget-q-a__text--f {
text-align: center;
font-size: 1.429rem !important;
}
/*
Variations
ヴィジェット・Q-B - bottom (この企業におすすめ)3列
Markup:
block-widget-q-b - デフォルト3列スタイル
Style guide: block.widget.q.b
*/
.block-widget-q-b {
max-width: 800px;
margin: 0 auto;
}
.block-widget-q-b__cell {
margin: 0 auto 0;
}
.block-widget-q-b__cell--a-a {
width: 240px;
margin-right: 3.75%;
float: left;
}
.block-widget-q-b__cell--a-a:last-child {
margin-right: 0;
}
.block-widget-q-b__cell__wrap {
position: relative;
padding: 100% 0 0;
}
.block-widget-q-b__cell__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("../images/bottom/bg_001.png");
background-repeat: no-repeat;
-webkit-background-size: contain;
background-size: contain;
}
.block-widget-q-b__text--a {
text-align: center;
font-size: 1.429rem !important;
padding-top: 90px;
}
.block-widget-q-b__text--b {
text-align: center;
font-size: 1.429rem !important;
}
.block-widget-q-b__text--c {
text-align: center;
font-size: 1.429rem !important;
padding-top: 75px;
}
.block-widget-q-b__text--d {
text-align: center;
font-size: 1.429rem !important;
}
/*
Variations
ヴィジェット・S - bottom (その他の経理アウトソーシングサービス)
Markup:
block-widget-s-a - デフォルトスタイル
Style guide: block.widget.s.a
*/
.block-widget-s-a__cell__a {
width: 17%;
padding-right: 1%;
}
.block-widget-s-a__cell__b {
width: 32%;
padding-right: 1%;
}
.block-widget-s-a__cell:last-child {
width: 16%;
padding-right: 0;
}
.block-widget-s-a__link:hover .block-widget-s-a__text--a {
opacity: 0.5;
}
.block-widget-s-a__text--a {
border: 2px solid #333;
padding: 15px;
background-image: url("../images/bottom/arrow_001_pc.png");
background-repeat: no-repeat;
background-position: right center;
font-size: 1.143rem !important;
}
.block-widget-s-a__text--b {
border: 2px solid #838383;
padding: 15px;
background-image: url("../images/bottom/arrow_002_pc.png");
background-repeat: no-repeat;
background-position: right center;
font-size: 1.143rem !important;
}
/*
Variations
ヴィジェット・S - bottom (財務トップ サービス詳細)
Markup:
block-widget-s-c - デフォルトスタイル
Style guide: block.widget.s.c
*/
.block-widget-s-c__cell {
width: 34%;
padding-right: 2%;
}
.block-widget-s-c__cell:last-child {
width: 32%;
padding-right: 0;
}
.block-widget-s-c__link:hover .block-widget-s-a__text--a {
opacity: 0.5;
}
.block-widget-s-c__text--a {
border: 2px solid #333;
padding: 15px;
background-image: url("../images/bottom/arrow_001_pc.png");
background-repeat: no-repeat;
background-position: right center;
font-size: 1.429rem !important;
}
/*
Variations
ヴィジェット・N - 経理アウトソーシングのメリットとデメリットとして思われていること
Markup:
法律改正のたびに
毎年改正される可能性がある税法や社会保険の内容を詳しく理解する必要がなくなります。アウトソーサーが最新の情報にもとづいて処理を行います。
経理担当人員の増減を
業務そのものを切り出すため、管理職の方が実務担当者の勤怠・教育・採用などの管理をする必要がなくなります。また業務の繁閑に合わせた人員調整なども管理する必要がなくなります。
ルーティン業務の代行
売上と伝票の付け合わせや経費精算、売掛金買掛金チェックなど定期的に発生し、かつ面倒な業務を代わりに処理してもらえます。
処理に時差ができる
業務そのものを切り出すため、管理職の方が実務担当者の勤怠・教育・採用などの管理をする必要がなくなります。また業務の繁閑に合わせた人員調整なども管理する必要がなくなります。
イレギュラー対応ができない
業務そのものを切り出すため、管理職の方が実務担当者の勤怠・教育・採用などの管理をする必要がなくなります。また業務の繁閑に合わせた人員調整なども管理する必要がなくなります。
ノウハウが溜まらない
業務そのものを切り出すため、管理職の方が実務担当者の勤怠・教育・採用などの管理をする必要がなくなります。また業務の繁閑に合わせた人員調整なども管理する必要がなくなります。
block-widget-n-a - デフォルトスタイル
Style guide: block.widget.n.a
*/
.block-widget-n-a__grid__cell--a {
width: 53%;
padding-right: 6%;
}
.block-widget-n-a__grid__cell--b {
width: 47%;
}
.block-widget-n-a__grid__cell--c {
width: 19.51219512195122%;
padding-right: 2.439024390243902%;
padding-top: 5px;
}
.block-widget-n-a__grid__cell--d {
width: 78.04878048780488%;
}
.block-widget-n-a__grid__cell--e {
width: 19.51219512195122%;
padding-right: 2.439024390243902%;
padding-top: 5px;
}
.block-widget-n-a__grid__cell--f {
width: 78.04878048780488%;
}
.block-widget-n-a__title__text {
font-weight: bold;
}
.block-widget-n-a__title--a {
background-color: #f26700;
color: #fff;
padding: 12px 0;
font-size: 1.572rem !important;
}
.block-widget-n-a__title--b {
background-color: #6c6c6c;
color: #fff;
font-weight: bold;
padding: 12px 0;
font-size: 1.572rem !important;
}
.block-widget-n-a__box--a {
background-color: #fff5cf;
padding: 30px;
background-image: url("../images/common/img0014-8_pc.png");
background-position: top center;
background-repeat: no-repeat;
}
.block-widget-n-a__box--b {
background-color: #ddd;
padding: 30px;
background-image: url("../images/common/img0014-9_pc.png");
background-position: top center;
background-repeat: no-repeat;
}
.block-widget-n-a__box--c {
border: 2px solid #f26700;
background-color: #fff;
padding: 10px;
font-weight: bold;
}
.block-widget-n-a__text--a {
font-weight: bold;
}
.block-widget-n-a__text--b {
font-weight: bold;
margin-top: 15px;
}
/*
Variations
ヴィジェット・O - bottom (text + img + img)
Markup:
会計ソフトやERPシステムを導入していても、実際は導入前と比べても業務量が変わらなかった、逆に手間が増えたなどのケースが多々あります。特に売掛金管理業務は売上データと入金データの消しこみ作業、違算調査に多くの工数がかかります。NOCの売上・売掛金管理サービスは、会計入力から入金確認、消しこみ作業（違算調査）などを代行し、お客様の業務量を削減するサービスです。
block-widget-o-a - デフォルトスタイル
Style guide: block.widget.o.a
*/
.block-widget-o-a__pict {
max-width: 800px;
margin: 40px auto 20px;
}
.block-widget-o-a__pict--a {
float: left;
margin: 0 auto;
}
.block-widget-o-a__pict--b {
float: left;
margin-left: 20px;
}
/*
Variations
ヴィジェット・O-B - bottom (text + img)
Markup:
block-widget-o-b - デフォルトスタイル
Style guide: block.widget.o.b
*/
.block-widget-o-b__pict {
max-width: 800px;
margin: 0px auto 4em;
}
.block-widget-o-b__pict--a {
margin: 0 auto;
}
/*
helper
レイアウトのためのヘルパー
Weight: 10000
Style guide: helper
*/
/*
Margin
`margin` 調整のためのヘルパー（例は、最小値と最大値のみ表示。5px 単位で設定可能）
Weight: -100
Markup:
helper--margin-top5 - 上に 5px のマージン
helper--margin-right5 - 右に 5px のマージン
helper--margin-bottom5 - 下に 5px のマージン
helper--margin-left5 - 左に 5px のマージン
helper--margin-top50 - 上に 50px のマージン
helper--margin-right50 - 右に 50px のマージン
helper--margin-bottom50 - 下に 50px のマージン
helper--margin-left50 - 左に 50px のマージン
helper--margin-top5- - 上に 5px のネガティブマージン
helper--margin-right5- - 右に 5px のネガティブマージン
helper--margin-bottom5- - 下に 5px のネガティブマージン
helper--margin-left5- - 左に 5px のネガティブマージン
helper--margin-top50- - 上に 5p0x のネガティブマージン
helper--margin-right50- - 右に 50px のネガティブマージン
helper--margin-bottom50- - 下に 50px のネガティブマージン
helper--margin-left50- - 左に 50px のネガティブマージン
hepler--margin-top0to10 - 上に 0-10 のレスポンシブ・マージン
hepler--margin-right0to10 - 右に 0-10 のレスポンシブ・マージン
hepler--margin-bottom0to10 - 下に 0-10 のレスポンシブ・マージン
hepler--margin-left0to10 - 左に 0-10 のレスポンシブ・マージン
hepler--margin-top10to5 - 上に 10-5 のレスポンシブ・マージン
hepler--margin-right10to5 - 右に 10-5 のレスポンシブ・マージン
hepler--margin-bottom10to5 - 下に 10-5 のレスポンシブ・マージン
hepler--margin-left10to5 - 左に 10-5 のレスポンシブ・マージン
hepler--margin-top5to10 - 上に 5-10 のレスポンシブ・マージン
hepler--margin-right5to10 - 右に 5-10 のレスポンシブ・マージン
hepler--margin-bottom5to10 - 下に 5-10 のレスポンシブ・マージン
hepler--margin-left5to10 - 左に 5-10 のレスポンシブ・マージン
hepler--margin-top15to10 - 上に 15-10 のレスポンシブ・マージン
hepler--margin-right15to10 - 右に 15-10 のレスポンシブ・マージン
hepler--margin-bottom15to10 - 下に 15-10 のレスポンシブ・マージン
hepler--margin-left15to10 - 左に 15-10 のレスポンシブ・マージン
helper--margin-top20to10 - 上に 20-10 のレスポンシブ・マージン
helper--margin-right20to10 - 右に 20-10 のレスポンシブ・マージン
helper--margin-bottom20to10 - 下に 20-10 のレスポンシブ・マージン
helper--margin-left20to10 - 左に 20-10 のレスポンシブ・マージン
helper--margin-top20to15 - 上に 20-15 のレスポンシブ・マージン
helper--margin-right20to15 - 右に 20-15 のレスポンシブ・マージン
helper--margin-bottom20to15 - 下に 20-15 のレスポンシブ・マージン
helper--margin-left20to15 - 左に 20-15 のレスポンシブ・マージン
helper--margin-top30to20 - 上に 30-20 のレスポンシブ・マージン
helper--margin-right30to20 - 右に 30-20 のレスポンシブ・マージン
helper--margin-bottom30to20 - 下に 30-20 のレスポンシブ・マージン
helper--margin-left30to20 - 左に 30-20 のレスポンシブ・マージン
helper--margin-top60to30 - 上に 60-30 のレスポンシブ・マージン
helper--margin-right60to30 - 右に 60-30 のレスポンシブ・マージン
helper--margin-bottom60to30 - 下に 60-30 のレスポンシブ・マージン
helper--margin-left60to30 - 左に 60-30 のレスポンシブ・マージン
helper--margin-top40to15 - 上に 40-15 のレスポンシブ・マージン
helper--margin-right40to15 - 右に 40-15 のレスポンシブ・マージン
helper--margin-bottom40to15 - 下に 40-15 のレスポンシブ・マージン
helper--margin-left40to15 - 左に 40-15 のレスポンシブ・マージン
helper--margin-top40to20 - 上に 40-20 のレスポンシブ・マージン
helper--margin-right40to20 - 右に 40-20 のレスポンシブ・マージン
helper--margin-bottom40to20 - 下に 40-12 のレスポンシブ・マージン
helper--margin-left40to20 - 左に 40-20 のレスポンシブ・マージン
helper--margin-top60to40 - 上に 60-40 のレスポンシブ・マージン
helper--margin-right60to40 - 右に 60-40 のレスポンシブ・マージン
helper--margin-bottom60to40 - 下に 60-40 のレスポンシブ・マージン
helper--margin-left60to40 - 左に 60-40 のレスポンシブ・マージン
helper--margin-top60to35 - 上に 60-35 のレスポンシブ・マージン
helper--margin-right60to35 - 右に 60-35 のレスポンシブ・マージン
helper--margin-bottom60to35 - 下に 60-35 のレスポンシブ・マージン
helper--margin-left60to35 - 左に 60-35 のレスポンシブ・マージン
helper--margin-top50to35 - 上に 50-35 のレスポンシブ・マージン
helper--margin-right50to35 - 右に 50-35 のレスポンシブ・マージン
helper--margin-bottom50to35 - 下に 50-35 のレスポンシブ・マージン
helper--margin-left50to35 - 左に 50-35 のレスポンシブ・マージン
helper--margin-top15to20 - 上に 15-20 のレスポンシブ・マージン
helper--margin-right15to20 - 右に 15-20 のレスポンシブ・マージン
helper--margin-bottom15to20 - 下に 15-20 のレスポンシブ・マージン
helper--margin-left15to20 - 左に 15-20 のレスポンシブ・マージン
helper--margin-top30to40 - 上に 30-40 のレスポンシブ・マージン
helper--margin-right30to40 - 右に 30-40 のレスポンシブ・マージン
helper--margin-bottom30to40 - 下に 30-40 のレスポンシブ・マージン
helper--margin-left30to40 - 左に 30-40 のレスポンシブ・マージン
helper--margin-top30to15 - 上に 30-15 のレスポンシブ・マージン
helper--margin-right30to15 - 右に 30-15 のレスポンシブ・マージン
helper--margin-bottom30to15 - 下に 30-15 のレスポンシブ・マージン
helper--margin-left30to15 - 左に 30-15 のレスポンシブ・マージン
helper--margin-top30to25 - 上に 30-25 のレスポンシブ・マージン
helper--margin-right30to25 - 右に 30-25 のレスポンシブ・マージン
helper--margin-bottom30to25 - 下に 30-25 のレスポンシブ・マージン
helper--margin-left30to25 - 左に 30-25 のレスポンシブ・マージン
helper--margin-top55to0 - 上に 55-0 のレスポンシブ・マージン
helper--margin-right55to0 - 右に 55-0 のレスポンシブ・マージン
helper--margin-bottom55to0 - 下に 55-0 のレスポンシブ・マージン
helper--margin-left55to0 - 左に 55-0 のレスポンシブ・マージン
helper--margin-top40to0 - 上に 40-0 のレスポンシブ・マージン
helper--margin-right40to0 - 右に 40-0 のレスポンシブ・マージン
helper--margin-bottom40to0 - 下に 40-0 のレスポンシブ・マージン
helper--margin-left40to0 - 左に 40-0 のレスポンシブ・マージン
helper--margin-top0to40 - 上に 0-40 のレスポンシブ・マージン
helper--margin-right0to40 - 右に 0-40 のレスポンシブ・マージン
helper--margin-bottom0to40 - 下に 0-40 のレスポンシブ・マージン
helper--margin-left0to40 - 左に 0-40 のレスポンシブ・マージン
helper--margin-top40to30 - 上に 40-30 のレスポンシブ・マージン
helper--margin-right40to30 - 右に 40-30 のレスポンシブ・マージン
helper--margin-bottom40to30 - 下に 40-30 のレスポンシブ・マージン
helper--margin-left40to30 - 左に 40-30 のレスポンシブ・マージン
helper--margin-top70to35 - 上に 70-35のレスポンシブ・マージン
helper--margin-right70to35 - 右に 70-35のレスポンシブ・マージン
helper--margin-bottom70to35 - 下に 70-35のレスポンシブ・マージン
helper--margin-left70to35 - 左に 70-35のレスポンシブ・マージン
helper--margin-top75to40 - 上に 75-40のレスポンシブ・マージン
helper--margin-right75to40 - 右に 75-40のレスポンシブ・マージン
helper--margin-bottom75to40 - 下に 75-40のレスポンシブ・マージン
helper--margin-left75to40 - 左に 75-40のレスポンシブ・マージン
helper--margin-top20to30 - 上に 20-30 のレスポンシブ・マージン
helper--margin-right20to30 - 右に 20-30 のレスポンシブ・マージン
helper--margin-bottom20to30 - 下に 20-30 のレスポンシブ・マージン
helper--margin-left20to30 - 左に 20-30 のレスポンシブ・マージン
helper--margin-top130to40 - 上に 130-40 のレスポンシブ・マージン
helper--margin-right130to40 - 右に 130-40 のレスポンシブ・マージン
helper--margin-bottom130to40 - 下に 130-40 のレスポンシブ・マージン
helper--margin-left130to40 - 左に 130-40 のレスポンシブ・マージン
helper--margin-top85to40 - 上に 85-40 のレスポンシブ・マージン
helper--margin-right85to40 - 右に 85-40 のレスポンシブ・マージン
helper--margin-bottom85to40 - 下に 85-40 のレスポンシブ・マージン
helper--margin-left85to40 - 左に 85-40 のレスポンシブ・マージン
helper--margin-top80to20 - 上に 80-20 のレスポンシブ・マージン
helper--margin-right80to20 - 右に 80-20 のレスポンシブ・マージン
helper--margin-bottom80to20 - 下に 80-20 のレスポンシブ・マージン
helper--margin-left80to20 - 左に 80-20 のレスポンシブ・マージン
helper--margin-top80to40 - 上に 80-40 のレスポンシブ・マージン
helper--margin-right80to40 - 右に 80-40 のレスポンシブ・マージン
helper--margin-bottom80to40 - 下に 80-40 のレスポンシブ・マージン
helper--margin-left80to40 - 左に 80-40 のレスポンシブ・マージン
helper--margin-top80to35 - 上に 80-35 のレスポンシブ・マージン
helper--margin-right80to35 - 右に 80-35 のレスポンシブ・マージン
helper--margin-bottom80to35 - 下に 80-35 のレスポンシブ・マージン
helper--margin-left80to35 - 左に 80-35 のレスポンシブ・マージン
helper--margin-top130to50 - 上に 130-50 のレスポンシブ・マージン
helper--margin-right130to50 - 右に 130-50 のレスポンシブ・マージン
helper--margin-bottom130to50 - 下に 130-50 のレスポンシブ・マージン
helper--margin-left130to50 - 左に 130-50 のレスポンシブ・マージン
helper--margin-center - ボックスの水平中央寄せ
Style guide: helper.options.margin
*/
.helper--margin-top0 {
margin-top: 0px !important;
}
.helper--margin-top0- {
margin-top: 0px !important;
}
.helper--margin-left0 {
margin-left: 0px !important;
}
.helper--margin-left0- {
margin-left: 0px !important;
}
.helper--margin-bottom0 {
margin-bottom: 0px !important;
}
.helper--margin-bottom0- {
margin-bottom: 0px !important;
}
.helper--margin-right0 {
margin-right: 0px !important;
}
.helper--margin-right0- {
margin-right: 0px !important;
}
.helper--margin-top5 {
margin-top: 5px !important;
}
.helper--margin-top5- {
margin-top: -5px !important;
}
.helper--margin-left5 {
margin-left: 5px !important;
}
.helper--margin-left5- {
margin-left: -5px !important;
}
.helper--margin-bottom5 {
margin-bottom: 5px !important;
}
.helper--margin-bottom5- {
margin-bottom: -5px !important;
}
.helper--margin-right5 {
margin-right: 5px !important;
}
.helper--margin-right5- {
margin-right: -5px !important;
}
.helper--margin-top10 {
margin-top: 10px !important;
}
.helper--margin-top10- {
margin-top: -10px !important;
}
.helper--margin-left10 {
margin-left: 10px !important;
}
.helper--margin-left10- {
margin-left: -10px !important;
}
.helper--margin-bottom10 {
margin-bottom: 10px !important;
}
.helper--margin-bottom10- {
margin-bottom: -10px !important;
}
.helper--margin-right10 {
margin-right: 10px !important;
}
.helper--margin-right10- {
margin-right: -10px !important;
}
.helper--margin-top15 {
margin-top: 15px !important;
}
.helper--margin-top15- {
margin-top: -15px !important;
}
.helper--margin-left15 {
margin-left: 15px !important;
}
.helper--margin-left15- {
margin-left: -15px !important;
}
.helper--margin-bottom15 {
margin-bottom: 15px !important;
}
.helper--margin-bottom15- {
margin-bottom: -15px !important;
}
.helper--margin-right15 {
margin-right: 15px !important;
}
.helper--margin-right15- {
margin-right: -15px !important;
}
.helper--margin-top20 {
margin-top: 20px !important;
}
.helper--margin-top20- {
margin-top: -20px !important;
}
.helper--margin-left20 {
margin-left: 20px !important;
}
.helper--margin-left20- {
margin-left: -20px !important;
}
.helper--margin-bottom20 {
margin-bottom: 20px !important;
}
.helper--margin-bottom20- {
margin-bottom: -20px !important;
}
.helper--margin-right20 {
margin-right: 20px !important;
}
.helper--margin-right20- {
margin-right: -20px !important;
}
.helper--margin-top25 {
margin-top: 25px !important;
}
.helper--margin-top25- {
margin-top: -25px !important;
}
.helper--margin-left25 {
margin-left: 25px !important;
}
.helper--margin-left25- {
margin-left: -25px !important;
}
.helper--margin-bottom25 {
margin-bottom: 25px !important;
}
.helper--margin-bottom25- {
margin-bottom: -25px !important;
}
.helper--margin-right25 {
margin-right: 25px !important;
}
.helper--margin-right25- {
margin-right: -25px !important;
}
.helper--margin-top30 {
margin-top: 30px !important;
}
.helper--margin-top30- {
margin-top: -30px !important;
}
.helper--margin-left30 {
margin-left: 30px !important;
}
.helper--margin-left30- {
margin-left: -30px !important;
}
.helper--margin-bottom30 {
margin-bottom: 30px !important;
}
.helper--margin-bottom30- {
margin-bottom: -30px !important;
}
.helper--margin-right30 {
margin-right: 30px !important;
}
.helper--margin-right30- {
margin-right: -30px !important;
}
.helper--margin-top35 {
margin-top: 35px !important;
}
.helper--margin-top35- {
margin-top: -35px !important;
}
.helper--margin-left35 {
margin-left: 35px !important;
}
.helper--margin-left35- {
margin-left: -35px !important;
}
.helper--margin-bottom35 {
margin-bottom: 35px !important;
}
.helper--margin-bottom35- {
margin-bottom: -35px !important;
}
.helper--margin-right35 {
margin-right: 35px !important;
}
.helper--margin-right35- {
margin-right: -35px !important;
}
.helper--margin-top40 {
margin-top: 40px !important;
}
.helper--margin-top40- {
margin-top: -40px !important;
}
.helper--margin-left40 {
margin-left: 40px !important;
}
.helper--margin-left40- {
margin-left: -40px !important;
}
.helper--margin-bottom40 {
margin-bottom: 40px !important;
}
.helper--margin-bottom40- {
margin-bottom: -40px !important;
}
.helper--margin-right40 {
margin-right: 40px !important;
}
.helper--margin-right40- {
margin-right: -40px !important;
}
.helper--margin-top45 {
margin-top: 45px !important;
}
.helper--margin-top45- {
margin-top: -45px !important;
}
.helper--margin-left45 {
margin-left: 45px !important;
}
.helper--margin-left45- {
margin-left: -45px !important;
}
.helper--margin-bottom45 {
margin-bottom: 45px !important;
}
.helper--margin-bottom45- {
margin-bottom: -45px !important;
}
.helper--margin-right45 {
margin-right: 45px !important;
}
.helper--margin-right45- {
margin-right: -45px !important;
}
.helper--margin-top50 {
margin-top: 50px !important;
}
.helper--margin-top50- {
margin-top: -50px !important;
}
.helper--margin-left50 {
margin-left: 50px !important;
}
.helper--margin-left50- {
margin-left: -50px !important;
}
.helper--margin-bottom50 {
margin-bottom: 50px !important;
}
.helper--margin-bottom50- {
margin-bottom: -50px !important;
}
.helper--margin-right50 {
margin-right: 50px !important;
}
.helper--margin-right50- {
margin-right: -50px !important;
}
.helper--margin-top0to10 {
margin-top: 0px !important;
}
.helper--margin-left0to10 {
margin-left: 0px !important;
}
.helper--margin-bottom0to10 {
margin-bottom: 0px !important;
}
.helper--margin-right0to10 {
margin-right: 0px !important;
}
.helper--margin-top10to5 {
margin-top: 10px !important;
}
.helper--margin-left10to5 {
margin-left: 10px !important;
}
.helper--margin-bottom10to5 {
margin-bottom: 10px !important;
}
.helper--margin-right10to5 {
margin-right: 10px !important;
}
.helper--margin-top5to10 {
margin-top: 5px !important;
}
.helper--margin-left5to10 {
margin-left: 5px !important;
}
.helper--margin-bottom5to10 {
margin-bottom: 5px !important;
}
.helper--margin-right5to10 {
margin-right: 5px !important;
}
.helper--margin-top15to10 {
margin-top: 15px !important;
}
.helper--margin-left15to10 {
margin-left: 15px !important;
}
.helper--margin-bottom15to10 {
margin-bottom: 15px !important;
}
.helper--margin-right15to10 {
margin-right: 15px !important;
}
.helper--margin-top20to10 {
margin-top: 20px !important;
}
.helper--margin-left20to10 {
margin-left: 20px !important;
}
.helper--margin-bottom20to10 {
margin-bottom: 20px !important;
}
.helper--margin-right20to10 {
margin-right: 20px !important;
}
.helper--margin-top20to15 {
margin-top: 20px !important;
}
.helper--margin-left20to15 {
margin-left: 20px !important;
}
.helper--margin-bottom20to15 {
margin-bottom: 20px !important;
}
.helper--margin-right20to15 {
margin-right: 20px !important;
}
.helper--margin-top30to20 {
margin-top: 30px !important;
}
.helper--margin-left30to20 {
margin-left: 30px !important;
}
.helper--margin-bottom30to20 {
margin-bottom: 30px !important;
}
.helper--margin-right30to20 {
margin-right: 30px !important;
}
.helper--margin-top60to30 {
margin-top: 60px !important;
}
.helper--margin-left60to30 {
margin-left: 60px !important;
}
.helper--margin-bottom60to30 {
margin-bottom: 60px !important;
}
.helper--margin-right60to30 {
margin-right: 60px !important;
}
.helper--margin-top40to15 {
margin-top: 40px !important;
}
.helper--margin-left40to15 {
margin-left: 40px !important;
}
.helper--margin-bottom40to15 {
margin-bottom: 40px !important;
}
.helper--margin-right40to15 {
margin-right: 40px !important;
}
.helper--margin-top40to20 {
margin-top: 40px !important;
}
.helper--margin-left40to20 {
margin-left: 40px !important;
}
.helper--margin-bottom40to20 {
margin-bottom: 40px !important;
}
.helper--margin-right40to20 {
margin-right: 40px !important;
}
.helper--margin-top60to40 {
margin-top: 60px !important;
}
.helper--margin-left60to40 {
margin-left: 60px !important;
}
.helper--margin-bottom60to40 {
margin-bottom: 60px !important;
}
.helper--margin-right60to40 {
margin-right: 60px !important;
}
.helper--margin-top60to35 {
margin-top: 60px !important;
}
.helper--margin-left60to35 {
margin-left: 60px !important;
}
.helper--margin-bottom60to35 {
margin-bottom: 60px !important;
}
.helper--margin-right60to35 {
margin-right: 60px !important;
}
.helper--margin-top50to35 {
margin-top: 50px !important;
}
.helper--margin-left50to35 {
margin-left: 50px !important;
}
.helper--margin-bottom50to35 {
margin-bottom: 50px !important;
}
.helper--margin-right50to35 {
margin-right: 50px !important;
}
.helper--margin-top15to20 {
margin-top: 15px !important;
}
.helper--margin-left15to20 {
margin-left: 15px !important;
}
.helper--margin-bottom15to20 {
margin-bottom: 15px !important;
}
.helper--margin-right15to20 {
margin-right: 15px !important;
}
.helper--margin-top30to40 {
margin-top: 30px !important;
}
.helper--margin-left30to40 {
margin-left: 30px !important;
}
.helper--margin-bottom30to40 {
margin-bottom: 30px !important;
}
.helper--margin-right30to40 {
margin-right: 30px !important;
}
.helper--margin-top30to25 {
margin-top: 30px !important;
}
.helper--margin-left30to25 {
margin-left: 30px !important;
}
.helper--margin-bottom30to25 {
margin-bottom: 30px !important;
}
.helper--margin-right30to25 {
margin-right: 30px !important;
}
.helper--margin-top55to0 {
margin-top: 55px !important;
}
.helper--margin-left55to0 {
margin-left: 55px !important;
}
.helper--margin-bottom55to0 {
margin-bottom: 55px !important;
}
.helper--margin-right55to0 {
margin-right: 55px !important;
}
.helper--margin-top30to15 {
margin-top: 30px !important;
}
.helper--margin-left30to15 {
margin-left: 30px !important;
}
.helper--margin-bottom30to15 {
margin-bottom: 30px !important;
}
.helper--margin-right30to15 {
margin-right: 30px !important;
}
.helper--margin-top0to40 {
margin-top: 0px !important;
}
.helper--margin-left0to40 {
margin-left: 0px !important;
}
.helper--margin-bottom0to40 {
margin-bottom: 0px !important;
}
.helper--margin-right0to40 {
margin-right: 0px !important;
}
.helper--margin-top20to0 {
margin-top: 20px !important;
}
.helper--margin-left20to0 {
margin-left: 20px !important;
}
.helper--margin-bottom20to0 {
margin-bottom: 20px !important;
}
.helper--margin-right20to0 {
margin-right: 20px !important;
}
.helper--margin-top40to0 {
margin-top: 40px !important;
}
.helper--margin-left40to0 {
margin-left: 40px !important;
}
.helper--margin-bottom40to0 {
margin-bottom: 40px !important;
}
.helper--margin-right40to0 {
margin-right: 40px !important;
}
.helper--margin-top40to30 {
margin-top: 40px !important;
}
.helper--margin-left40to30 {
margin-left: 40px !important;
}
.helper--margin-bottom40to30 {
margin-bottom: 40px !important;
}
.helper--margin-right40to30 {
margin-right: 40px !important;
}
.helper--margin-top70to35 {
margin-top: 70px !important;
}
.helper--margin-left70to35 {
margin-left: 70px !important;
}
.helper--margin-bottom70to35 {
margin-bottom: 70px !important;
}
.helper--margin-right70to35 {
margin-right: 70px !important;
}
.helper--margin-top75to40 {
margin-top: 75px !important;
}
.helper--margin-left75to40 {
margin-left: 75px !important;
}
.helper--margin-bottom75to40 {
margin-bottom: 75px !important;
}
.helper--margin-right75to40 {
margin-right: 75px !important;
}
.helper--margin-top20to30 {
margin-top: 20px !important;
}
.helper--margin-left20to30 {
margin-left: 20px !important;
}
.helper--margin-bottom20to30 {
margin-bottom: 20px !important;
}
.helper--margin-right20to30 {
margin-right: 20px !important;
}
.helper--margin-top130to40 {
margin-top: 130px !important;
}
.helper--margin-left130to40 {
margin-left: 130px !important;
}
.helper--margin-bottom130to40 {
margin-bottom: 130px !important;
}
.helper--margin-right130to40 {
margin-right: 130px !important;
}
.helper--margin-top85to40 {
margin-top: 85px !important;
}
.helper--margin-left85to40 {
margin-left: 85px !important;
}
.helper--margin-bottom85to40 {
margin-bottom: 85px !important;
}
.helper--margin-right85to40 {
margin-right: 85px !important;
}
.helper--margin-top80to20 {
margin-top: 80px !important;
}
.helper--margin-left80to20 {
margin-left: 80px !important;
}
.helper--margin-bottom80to20 {
margin-bottom: 80px !important;
}
.helper--margin-right80to20 {
margin-right: 80px !important;
}
.helper--margin-top80to35 {
margin-top: 80px !important;
}
.helper--margin-left80to35 {
margin-left: 80px !important;
}
.helper--margin-bottom80to35 {
margin-bottom: 80px !important;
}
.helper--margin-right80to35 {
margin-right: 80px !important;
}
.helper--margin-top80to40 {
margin-top: 80px !important;
}
.helper--margin-left80to40 {
margin-left: 80px !important;
}
.helper--margin-bottom80to40 {
margin-bottom: 80px !important;
}
.helper--margin-right80to40 {
margin-right: 80px !important;
}
.helper--margin-top130to50 {
margin-top: 130px !important;
}
.helper--margin-left130to50 {
margin-left: 130px !important;
}
.helper--margin-bottom130to50 {
margin-bottom: 130px !important;
}
.helper--margin-right130to50 {
margin-right: 130px !important;
}
.helper--margin-top0to20 {
margin-top: 0px !important;
}
.helper--margin-left0to20 {
margin-left: 0px !important;
}
.helper--margin-bottom0to20 {
margin-bottom: 0px !important;
}
.helper--margin-right0to20 {
margin-right: 0px !important;
}
.helper--margin-center {
margin-left: auto !important;
margin-right: auto !important;
}
/*
Padding
`padding` 調整のためのヘルパー（例は、最小値と最大値のみ表示。5px 単位で設定可能）
Weight: -99
Markup:
helper--padding-top5 - 上に 5px のパディング
helper--padding-right5 - 右に 5px のパディング
helper--padding-bottom5 - 下に 5px のパディング
helper--padding-left5 - 左に 5px のパディング
helper--padding-top50 - 上に 50px のパディング
helper--padding-right50 - 右に 50px のパディング
helper--padding-bottom50 - 下に 50px のパディング
helper--padding-left50 - 左に 50px のパディング
helper--padding-top0to10 - 上に 0-10 のレスポンシブ・パディング
helper--padding-right0to10 - 右に 0-10 のレスポンシブ・パディング
helper--padding-bottom0to10 - 下に 0-10 のレスポンシブ・パディング
helper--padding-left0to10 - 左に 0-10 のレスポンシブ・パディング
helper--padding-top10to5 - 上に 10-5 のレスポンシブ・パディング
helper--padding-right10to5 - 右に 10-5 のレスポンシブ・パディング
helper--padding-bottom10to5 - 下に 10-5 のレスポンシブ・パディング
helper--padding-left10to5 - 左に 10-5 のレスポンシブ・パディング
helper--padding-top15to10 - 上に 15-10 のレスポンシブ・パディング
helper--padding-right15to10 - 右に 15-10 のレスポンシブ・パディング
helper--padding-bottom15to10 - 下に 15-10 のレスポンシブ・パディング
helper--padding-left15to10 - 左に 15-10 のレスポンシブ・パディング
helper--padding-top20to10 - 上に 20-10 のレスポンシブ・パディング
helper--padding-right20to10 - 右に 20-10 のレスポンシブ・パディング
helper--padding-bottom20to10 - 下に 20-10 のレスポンシブ・パディング
helper--padding-left20to10 - 左に 20-10 のレスポンシブ・パディング
helper--padding-top20to15 - 上に 20-15 のレスポンシブ・パディング
helper--padding-right20to15 - 右に 20-15 のレスポンシブ・パディング
helper--padding-bottom20to15 - 下に 20-15 のレスポンシブ・パディング
helper--padding-left20to15 - 左に 20-15 のレスポンシブ・パディング
helper--padding-top30to20 - 上に 30-20 のレスポンシブ・パディング
helper--padding-right30to20 - 右に 30-20 のレスポンシブ・パディング
helper--padding-bottom30to20 - 下に 30-20 のレスポンシブ・パディング
helper--padding-left30to20 - 左に 30-20 のレスポンシブ・パディング
helper--padding-top35to20 - 上に 35-20 のレスポンシブ・パディング
helper--padding-right35to20 - 右に 35-20 のレスポンシブ・パディング
helper--padding-bottom35to20 - 下に 35-20 のレスポンシブ・パディング
helper--padding-left35to20 - 左に 35-20 のレスポンシブ・パディング
helper--padding-top30to25 - 上に 30-25 のレスポンシブ・パディング
helper--padding-right30to25 - 右に 30-25 のレスポンシブ・パディング
helper--padding-bottom30to25 - 下に 30-25 のレスポンシブ・パディング
helper--padding-left30to25 - 左に 30-25 のレスポンシブ・パディング
helper--padding-top35to25 - 上に 35-25 のレスポンシブ・パディング
helper--padding-right35to25 - 右に 35-25 のレスポンシブ・パディング
helper--padding-bottom35to25 - 下に 35-25 のレスポンシブ・パディング
helper--padding-left35to25 - 左に 35-25 のレスポンシブ・パディング
helper--padding-top35to30 - 上に 35-30 のレスポンシブ・パディング
helper--padding-right35to30 - 右に 35-30 のレスポンシブ・パディング
helper--padding-bottom35to30 - 下に 35-30 のレスポンシブ・パディング
helper--padding-left35to30 - 左に 35-30 のレスポンシブ・パディング
helper--padding-top50to20 - 上に 50-20 のレスポンシブ・パディング
helper--padding-right50to20 - 右に 50-20 のレスポンシブ・パディング
helper--padding-bottom50to20 - 下に 50-20 のレスポンシブ・パディング
helper--padding-left50to20 - 左に 50-20 のレスポンシブ・パディング
helper--padding-top40to30 - 上に 40-30 のレスポンシブ・パディング
helper--padding-right40to30 - 右に 40-30 のレスポンシブ・パディング
helper--padding-bottom40to30 - 下に 40-30 のレスポンシブ・パディング
helper--padding-left40to30 - 左に 40-30 のレスポンシブ・パディング
helper--padding-top40to10 - 上に 40-10 のレスポンシブ・パディング
helper--padding-right40to10 - 右に 40-10 のレスポンシブ・パディング
helper--padding-bottom40to10 - 下に 40-10 のレスポンシブ・パディング
helper--padding-left40to10 - 左に 40-10 のレスポンシブ・パディング
helper--padding-top40to20 - 上に 40-20 のレスポンシブ・パディング
helper--padding-right40to20 - 右に 40-20 のレスポンシブ・パディング
helper--padding-bottom40to20 - 下に 40-20 のレスポンシブ・パディング
helper--padding-left40to20 - 左に 40-20 のレスポンシブ・パディング
helper--padding-top60to20 - 上に 60-20 のレスポンシブ・パディング
helper--padding-right60to20 - 右に 60-20 のレスポンシブ・パディング
helper--padding-bottom60to20 - 下に 60-20 のレスポンシブ・パディング
helper--padding-left60to20 - 左に 60-20 のレスポンシブ・パディング
helper--padding-top60to25 - 上に 60-25 のレスポンシブ・パディング
helper--padding-right60to25 - 右に 60-25 のレスポンシブ・パディング
helper--padding-bottom60to25 - 下に 60-25 のレスポンシブ・パディング
helper--padding-left60to25 - 左に 60-25 のレスポンシブ・パディング
helper--padding-top60to30 - 上に 60-30 のレスポンシブ・パディング
helper--padding-right60to30 - 右に 60-30 のレスポンシブ・パディング
helper--padding-bottom60to30 - 下に 60-30 のレスポンシブ・パディング
helper--padding-left60to30 - 左に 60-30 のレスポンシブ・パディング
helper--padding-top60to40 - 上に 60-40 のレスポンシブ・パディング
helper--padding-right60to40 - 右に 60-40 のレスポンシブ・パディング
helper--padding-bottom60to40 - 下に 60-40 のレスポンシブ・パディング
helper--padding-left60to40 - 左に 60-40 のレスポンシブ・パディング
helper--padding-top70to35 - 上に 70-35のレスポンシブ・パディング
helper--padding-right70to35 - 右に 70-35のレスポンシブ・パディング
helper--padding-bottom70to35 - 下に 70-35のレスポンシブ・パディング
helper--padding-left70to35 - 左に 70-35のレスポンシブ・パディング
helper--padding-top80to40 - 上に 80-40のレスポンシブ・パディング
helper--padding-right80to40 - 右に 80-40のレスポンシブ・パディング
helper--padding-bottom80to40 - 下に 80-40のレスポンシブ・パディング
helper--padding-left80to40 - 左に 80-40のレスポンシブ・パディング
helper--padding-top80to30 - 上に 80-30のレスポンシブ・パディング
helper--padding-right80to30 - 右に 80-30のレスポンシブ・パディング
helper--padding-bottom80to30 - 下に 80-30のレスポンシブ・パディング
helper--padding-left80to30 - 左に 80-30のレスポンシブ・パディング
helper--padding-top80to20 - 上に 80-20のレスポンシブ・パディング
helper--padding-right80to20 - 右に 80-20のレスポンシブ・パディング
helper--padding-bottom80to20 - 下に 80-20のレスポンシブ・パディング
helper--padding-left80to20 - 左に 80-20のレスポンシブ・パディング
helper--padding-30to20 - 全体に 30-20 のレスポンシブ・パディング
helper--padding-top30to0 - 上に 30-0 のレスポンシブ・パディング
helper--padding-right30to0 - 右に 30-0 のレスポンシブ・パディング
helper--padding-bottom30to0 - 下に 30-0 のレスポンシブ・パディング
helper--padding-left30to0 - 左に 30-0 のレスポンシブ・パディング
helper--padding-top30to15 - 上に 30-15 のレスポンシブ・パディング
helper--padding-right30to15 - 右に 30-15 のレスポンシブ・パディング
helper--padding-bottom30to15 - 下に 30-15 のレスポンシブ・パディング
helper--padding-left30to15 - 左に 30-15 のレスポンシブ・パディング
helper--padding-top30to10 - 上に 30-10 のレスポンシブ・パディング
helper--padding-right30to10 - 右に 30-10 のレスポンシブ・パディング
helper--padding-bottom30to10 - 下に 30-10 のレスポンシブ・パディング
helper--padding-left30to10 - 左に 30-10 のレスポンシブ・パディング
helper--padding-top40to15 - 上に 40-15 のレスポンシブ・パディング
helper--padding-right40to15 - 右に 40-15 のレスポンシブ・パディング
helper--padding-bottom40to15 - 下に 40-15 のレスポンシブ・パディング
helper--padding-left40to15 - 左に 40-15 のレスポンシブ・パディング
helper--padding-top10to0 - 上に 10-0 のレスポンシブ・パディング
helper--padding-right10to0 - 右に 10-0 のレスポンシブ・パディング
helper--padding-bottom10to0 - 下に 10-0 のレスポンシブ・パディング
helper--padding-left10to0 - 左に 10-0 のレスポンシブ・パディング
Style guide: helper.options.padding
*/
.helper--padding-top0 {
padding-top: 0px !important;
}
.helper--padding-left0 {
padding-left: 0px !important;
}
.helper--padding-bottom0 {
padding-bottom: 0px !important;
}
.helper--padding-right0 {
padding-right: 0px !important;
}
.helper--padding-top5 {
padding-top: 5px !important;
}
.helper--padding-left5 {
padding-left: 5px !important;
}
.helper--padding-bottom5 {
padding-bottom: 5px !important;
}
.helper--padding-right5 {
padding-right: 5px !important;
}
.helper--padding-top10 {
padding-top: 10px !important;
}
.helper--padding-left10 {
padding-left: 10px !important;
}
.helper--padding-bottom10 {
padding-bottom: 10px !important;
}
.helper--padding-right10 {
padding-right: 10px !important;
}
.helper--padding-top15 {
padding-top: 15px !important;
}
.helper--padding-left15 {
padding-left: 15px !important;
}
.helper--padding-bottom15 {
padding-bottom: 15px !important;
}
.helper--padding-right15 {
padding-right: 15px !important;
}
.helper--padding-top20 {
padding-top: 20px !important;
}
.helper--padding-left20 {
padding-left: 20px !important;
}
.helper--padding-bottom20 {
padding-bottom: 20px !important;
}
.helper--padding-right20 {
padding-right: 20px !important;
}
.helper--padding-top25 {
padding-top: 25px !important;
}
.helper--padding-left25 {
padding-left: 25px !important;
}
.helper--padding-bottom25 {
padding-bottom: 25px !important;
}
.helper--padding-right25 {
padding-right: 25px !important;
}
.helper--padding-top30 {
padding-top: 30px !important;
}
.helper--padding-left30 {
padding-left: 30px !important;
}
.helper--padding-bottom30 {
padding-bottom: 30px !important;
}
.helper--padding-right30 {
padding-right: 30px !important;
}
.helper--padding-top35 {
padding-top: 35px !important;
}
.helper--padding-left35 {
padding-left: 35px !important;
}
.helper--padding-bottom35 {
padding-bottom: 35px !important;
}
.helper--padding-right35 {
padding-right: 35px !important;
}
.helper--padding-top40 {
padding-top: 40px !important;
}
.helper--padding-left40 {
padding-left: 40px !important;
}
.helper--padding-bottom40 {
padding-bottom: 40px !important;
}
.helper--padding-right40 {
padding-right: 40px !important;
}
.helper--padding-top45 {
padding-top: 45px !important;
}
.helper--padding-left45 {
padding-left: 45px !important;
}
.helper--padding-bottom45 {
padding-bottom: 45px !important;
}
.helper--padding-right45 {
padding-right: 45px !important;
}
.helper--padding-top50 {
padding-top: 50px !important;
}
.helper--padding-left50 {
padding-left: 50px !important;
}
.helper--padding-bottom50 {
padding-bottom: 50px !important;
}
.helper--padding-right50 {
padding-right: 50px !important;
}
.helper--padding-top0to10 {
padding-top: 0px !important;
}
.helper--padding-left0to10 {
padding-left: 0px !important;
}
.helper--padding-bottom0to10 {
padding-bottom: 0px !important;
}
.helper--padding-right0to10 {
padding-right: 0px !important;
}
.helper--padding-top10to5 {
padding-top: 10px !important;
}
.helper--padding-left10to5 {
padding-left: 10px !important;
}
.helper--padding-bottom10to5 {
padding-bottom: 10px !important;
}
.helper--padding-right10to5 {
padding-right: 10px !important;
}
.helper--padding-top15to10 {
padding-top: 15px !important;
}
.helper--padding-left15to10 {
padding-left: 15px !important;
}
.helper--padding-bottom15to10 {
padding-bottom: 15px !important;
}
.helper--padding-right15to10 {
padding-right: 15px !important;
}
.helper--padding-top20to10 {
padding-top: 20px !important;
}
.helper--padding-left20to10 {
padding-left: 20px !important;
}
.helper--padding-bottom20to10 {
padding-bottom: 20px !important;
}
.helper--padding-right20to10 {
padding-right: 20px !important;
}
.helper--padding-top20to15 {
padding-top: 20px !important;
}
.helper--padding-left20to15 {
padding-left: 20px !important;
}
.helper--padding-bottom20to15 {
padding-bottom: 20px !important;
}
.helper--padding-right20to15 {
padding-right: 20px !important;
}
.helper--padding-top30to20 {
padding-top: 30px !important;
}
.helper--padding-left30to20 {
padding-left: 30px !important;
}
.helper--padding-bottom30to20 {
padding-bottom: 30px !important;
}
.helper--padding-right30to20 {
padding-right: 30px !important;
}
.helper--padding-top30to25 {
padding-top: 30px !important;
}
.helper--padding-left30to25 {
padding-left: 30px !important;
}
.helper--padding-bottom30to25 {
padding-bottom: 30px !important;
}
.helper--padding-right30to25 {
padding-right: 30px !important;
}
.helper--padding-top35to25 {
padding-top: 35px !important;
}
.helper--padding-left35to25 {
padding-left: 35px !important;
}
.helper--padding-bottom35to25 {
padding-bottom: 35px !important;
}
.helper--padding-right35to25 {
padding-right: 35px !important;
}
.helper--padding-top35to20 {
padding-top: 35px !important;
}
.helper--padding-left35to20 {
padding-left: 35px !important;
}
.helper--padding-bottom35to20 {
padding-bottom: 35px !important;
}
.helper--padding-right35to20 {
padding-right: 35px !important;
}
.helper--padding-top35to30 {
padding-top: 35px !important;
}
.helper--padding-left35to30 {
padding-left: 35px !important;
}
.helper--padding-bottom35to30 {
padding-bottom: 35px !important;
}
.helper--padding-right35to30 {
padding-right: 35px !important;
}
.helper--padding-top50to20 {
padding-top: 50px !important;
}
.helper--padding-left50to20 {
padding-left: 50px !important;
}
.helper--padding-bottom50to20 {
padding-bottom: 50px !important;
}
.helper--padding-right50to20 {
padding-right: 50px !important;
}
.helper--padding-top40to30 {
padding-top: 40px !important;
}
.helper--padding-left40to30 {
padding-left: 40px !important;
}
.helper--padding-bottom40to30 {
padding-bottom: 40px !important;
}
.helper--padding-right40to30 {
padding-right: 40px !important;
}
.helper--padding-top40to10 {
padding-top: 40px !important;
}
.helper--padding-left40to10 {
padding-left: 40px !important;
}
.helper--padding-bottom40to10 {
padding-bottom: 40px !important;
}
.helper--padding-right40to10 {
padding-right: 40px !important;
}
.helper--padding-top40to20 {
padding-top: 40px !important;
}
.helper--padding-left40to20 {
padding-left: 40px !important;
}
.helper--padding-bottom40to20 {
padding-bottom: 40px !important;
}
.helper--padding-right40to20 {
padding-right: 40px !important;
}
.helper--padding-top60to20 {
padding-top: 60px !important;
}
.helper--padding-left60to20 {
padding-left: 60px !important;
}
.helper--padding-bottom60to20 {
padding-bottom: 60px !important;
}
.helper--padding-right60to20 {
padding-right: 60px !important;
}
.helper--padding-top60to25 {
padding-top: 60px !important;
}
.helper--padding-left60to25 {
padding-left: 60px !important;
}
.helper--padding-bottom60to25 {
padding-bottom: 60px !important;
}
.helper--padding-right60to25 {
padding-right: 60px !important;
}
.helper--padding-top60to30 {
padding-top: 60px !important;
}
.helper--padding-left60to30 {
padding-left: 60px !important;
}
.helper--padding-bottom60to30 {
padding-bottom: 60px !important;
}
.helper--padding-right60to30 {
padding-right: 60px !important;
}
.helper--padding-top60to40 {
padding-top: 60px !important;
}
.helper--padding-left60to40 {
padding-left: 60px !important;
}
.helper--padding-bottom60to40 {
padding-bottom: 60px !important;
}
.helper--padding-right60to40 {
padding-right: 60px !important;
}
.helper--padding-top70to35 {
padding-top: 70px !important;
}
.helper--padding-left70to35 {
padding-left: 70px !important;
}
.helper--padding-bottom70to35 {
padding-bottom: 70px !important;
}
.helper--padding-right70to35 {
padding-right: 70px !important;
}
.helper--padding-top80to40 {
padding-top: 80px !important;
}
.helper--padding-left80to40 {
padding-left: 80px !important;
}
.helper--padding-bottom80to40 {
padding-bottom: 80px !important;
}
.helper--padding-right80to40 {
padding-right: 80px !important;
}
.helper--padding-top80to30 {
padding-top: 80px !important;
}
.helper--padding-left80to30 {
padding-left: 80px !important;
}
.helper--padding-bottom80to30 {
padding-bottom: 80px !important;
}
.helper--padding-right80to30 {
padding-right: 80px !important;
}
.helper--padding-top80to20 {
padding-top: 80px !important;
}
.helper--padding-left80to20 {
padding-left: 80px !important;
}
.helper--padding-bottom80to20 {
padding-bottom: 80px !important;
}
.helper--padding-right80to20 {
padding-right: 80px !important;
}
.helper--padding-top30to0 {
padding-top: 30px !important;
}
.helper--padding-left30to0 {
padding-left: 30px !important;
}
.helper--padding-bottom30to0 {
padding-bottom: 30px !important;
}
.helper--padding-right30to0 {
padding-right: 30px !important;
}
.helper--padding-top30to10 {
padding-top: 30px !important;
}
.helper--padding-left30to10 {
padding-left: 30px !important;
}
.helper--padding-bottom30to10 {
padding-bottom: 30px !important;
}
.helper--padding-right30to10 {
padding-right: 30px !important;
}
.helper--padding-top30to15 {
padding-top: 30px !important;
}
.helper--padding-left30to15 {
padding-left: 30px !important;
}
.helper--padding-bottom30to15 {
padding-bottom: 30px !important;
}
.helper--padding-right30to15 {
padding-right: 30px !important;
}
.helper--padding-top40to15 {
padding-top: 40px !important;
}
.helper--padding-left40to15 {
padding-left: 40px !important;
}
.helper--padding-bottom40to15 {
padding-bottom: 40px !important;
}
.helper--padding-right40to15 {
padding-right: 40px !important;
}
.helper--padding-top10to0 {
padding-top: 10px !important;
}
.helper--padding-left10to0 {
padding-left: 10px !important;
}
.helper--padding-bottom10to0 {
padding-bottom: 10px !important;
}
.helper--padding-right10to0 {
padding-right: 10px !important;
}
.helper--padding-30to20 {
padding: 30px;
}
/*
Border
`border` 調整のためのヘルパー
Weight: -98
Markup:
helper--border-none-top - 上のボーダーを解除
helper--border-none-right - 右のボーダーを解除
helper--border-none-bottom - 下のボーダーを解除
helper--border-none-left - 左のボーダーを解除
helper--border-a-a-top - 上に 1px (`#000`) のボーダー
helper--border-a-a-right - 右に 1px (`#000`) のボーダー
helper--border-a-a-bottom - 下に 1px (`#000`) のボーダー
helper--border-a-a-left - 左に 1px (`#000`) のボーダー
helper--border-a-b-top - 上に 1px (`#eee`) のボーダー
helper--border-a-b-right - 右に 1px (`#eee`) のボーダー
helper--border-a-b-bottom - 下に 1px (`#eee`) のボーダー
helper--border-a-b-left - 左に 1px (`#eee`) のボーダー
helper--border-a-c-all - 全体に 1px (`#ddd`) のボーダー
helper--border-a-c-top - 上に 1px (`#ddd`) のボーダー
helper--border-a-c-right - 右に 1px (`#ddd`) のボーダー
helper--border-a-c-bottom - 下に 1px (`#ddd`) のボーダー
helper--border-a-c-left - 左に 1px (`#ddd`) のボーダー
Style guide: helper.options.border
*/
.helper--border-none-top,
.helper--border-a-a-top,
.helper--border-a-b-top,
.helper--border-a-c-top,
.helper--border-a-c-all,
.helper--border-none-left,
.helper--border-a-a-left,
.helper--border-a-b-left,
.helper--border-a-c-left,
.helper--border-none-bottom,
.helper--border-a-a-bottom,
.helper--border-a-b-bottom,
.helper--border-a-c-bottom,
.helper--border-none-right,
.helper--border-a-a-right,
.helper--border-a-b-right,
.helper--border-a-c-right {
_zoom: 1;
}
.helper--border-none-top {
border-top: 0 !important;
}
.helper--border-a-a-top {
border-top: 1px solid #000 !important;
}
.helper--border-a-b-top {
border-top: 1px solid #eee !important;
}
.helper--border-a-c-top {
border-top: 1px solid #ddd !important;
}
.helper--border-a-c-all {
border: 1px solid #ddd !important;
}
.helper--border-none-left {
border-left: 0 !important;
}
.helper--border-a-a-left {
border-left: 1px solid #000 !important;
}
.helper--border-a-b-left {
border-left: 1px solid #eee !important;
}
.helper--border-a-c-left {
border-left: 1px solid #ddd !important;
}
.helper--border-a-c-all {
border: 1px solid #ddd !important;
}
.helper--border-none-bottom {
border-bottom: 0 !important;
}
.helper--border-a-a-bottom {
border-bottom: 1px solid #000 !important;
}
.helper--border-a-b-bottom {
border-bottom: 1px solid #eee !important;
}
.helper--border-a-c-bottom {
border-bottom: 1px solid #ddd !important;
}
.helper--border-a-c-all {
border: 1px solid #ddd !important;
}
.helper--border-none-right {
border-right: 0 !important;
}
.helper--border-a-a-right {
border-right: 1px solid #000 !important;
}
.helper--border-a-b-right {
border-right: 1px solid #eee !important;
}
.helper--border-a-c-right {
border-right: 1px solid #ddd !important;
}
.helper--border-a-c-all {
border: 1px solid #ddd !important;
}
/*
Position
`position` 調整のためのヘルパー（例は、最小値と最大値のみ表示。5px 単位で設定可能）
Weight: -97
Markup:
helper--position-top5 - 上に 5px の移動
helper--position-right5 - 右に 5px の移動
helper--position-bottom5 - 下に 5px の移動
helper--position-left5 - 左に 5px の移動
helper--position-top50 - 上に 50px の移動
helper--position-right50 - 右に 50px の移動
helper--position-bottom50 - 下に 50px の移動
helper--position-left50 - 左に 50px の移動
helper--position-top5- - 上に -5px の移動
helper--position-right5- - 右に -5px の移動
helper--position-bottom5- - 下に -5px の移動
helper--position-left5- - 左に -5px の移動
helper--position-top50- - 上に -50px の移動
helper--position-right50- - 右に -50px の移動
helper--position-bottom50- - 下に -50px の移動
helper--position-left50- - 左に -50px の移動
helper--position-top20to10 - 上に 20-10 の移動（レスポンシブ）
helper--position-right20to10 - 右に 20-10 の移動（レスポンシブ）
helper--position-bottom20to10 - 下に 20-10 の移動（レスポンシブ）
helper--position-left20to10 - 左に 20-10 の移動（レスポンシブ）
Style guide: helper.options.position
*/
.helper--position-top0 {
top: 0px !important;
}
.helper--position-top0- {
top: 0px !important;
}
.helper--position-left0 {
left: 0px !important;
}
.helper--position-left0- {
left: 0px !important;
}
.helper--position-bottom0 {
bottom: 0px !important;
}
.helper--position-bottom0- {
bottom: 0px !important;
}
.helper--position-right0 {
right: 0px !important;
}
.helper--position-right0- {
right: 0px !important;
}
.helper--position-top5 {
top: 5px !important;
}
.helper--position-top5- {
top: -5px !important;
}
.helper--position-left5 {
left: 5px !important;
}
.helper--position-left5- {
left: -5px !important;
}
.helper--position-bottom5 {
bottom: 5px !important;
}
.helper--position-bottom5- {
bottom: -5px !important;
}
.helper--position-right5 {
right: 5px !important;
}
.helper--position-right5- {
right: -5px !important;
}
.helper--position-top10 {
top: 10px !important;
}
.helper--position-top10- {
top: -10px !important;
}
.helper--position-left10 {
left: 10px !important;
}
.helper--position-left10- {
left: -10px !important;
}
.helper--position-bottom10 {
bottom: 10px !important;
}
.helper--position-bottom10- {
bottom: -10px !important;
}
.helper--position-right10 {
right: 10px !important;
}
.helper--position-right10- {
right: -10px !important;
}
.helper--position-top15 {
top: 15px !important;
}
.helper--position-top15- {
top: -15px !important;
}
.helper--position-left15 {
left: 15px !important;
}
.helper--position-left15- {
left: -15px !important;
}
.helper--position-bottom15 {
bottom: 15px !important;
}
.helper--position-bottom15- {
bottom: -15px !important;
}
.helper--position-right15 {
right: 15px !important;
}
.helper--position-right15- {
right: -15px !important;
}
.helper--position-top20 {
top: 20px !important;
}
.helper--position-top20- {
top: -20px !important;
}
.helper--position-left20 {
left: 20px !important;
}
.helper--position-left20- {
left: -20px !important;
}
.helper--position-bottom20 {
bottom: 20px !important;
}
.helper--position-bottom20- {
bottom: -20px !important;
}
.helper--position-right20 {
right: 20px !important;
}
.helper--position-right20- {
right: -20px !important;
}
.helper--position-top25 {
top: 25px !important;
}
.helper--position-top25- {
top: -25px !important;
}
.helper--position-left25 {
left: 25px !important;
}
.helper--position-left25- {
left: -25px !important;
}
.helper--position-bottom25 {
bottom: 25px !important;
}
.helper--position-bottom25- {
bottom: -25px !important;
}
.helper--position-right25 {
right: 25px !important;
}
.helper--position-right25- {
right: -25px !important;
}
.helper--position-top30 {
top: 30px !important;
}
.helper--position-top30- {
top: -30px !important;
}
.helper--position-left30 {
left: 30px !important;
}
.helper--position-left30- {
left: -30px !important;
}
.helper--position-bottom30 {
bottom: 30px !important;
}
.helper--position-bottom30- {
bottom: -30px !important;
}
.helper--position-right30 {
right: 30px !important;
}
.helper--position-right30- {
right: -30px !important;
}
.helper--position-top35 {
top: 35px !important;
}
.helper--position-top35- {
top: -35px !important;
}
.helper--position-left35 {
left: 35px !important;
}
.helper--position-left35- {
left: -35px !important;
}
.helper--position-bottom35 {
bottom: 35px !important;
}
.helper--position-bottom35- {
bottom: -35px !important;
}
.helper--position-right35 {
right: 35px !important;
}
.helper--position-right35- {
right: -35px !important;
}
.helper--position-top40 {
top: 40px !important;
}
.helper--position-top40- {
top: -40px !important;
}
.helper--position-left40 {
left: 40px !important;
}
.helper--position-left40- {
left: -40px !important;
}
.helper--position-bottom40 {
bottom: 40px !important;
}
.helper--position-bottom40- {
bottom: -40px !important;
}
.helper--position-right40 {
right: 40px !important;
}
.helper--position-right40- {
right: -40px !important;
}
.helper--position-top45 {
top: 45px !important;
}
.helper--position-top45- {
top: -45px !important;
}
.helper--position-left45 {
left: 45px !important;
}
.helper--position-left45- {
left: -45px !important;
}
.helper--position-bottom45 {
bottom: 45px !important;
}
.helper--position-bottom45- {
bottom: -45px !important;
}
.helper--position-right45 {
right: 45px !important;
}
.helper--position-right45- {
right: -45px !important;
}
.helper--position-top50 {
top: 50px !important;
}
.helper--position-top50- {
top: -50px !important;
}
.helper--position-left50 {
left: 50px !important;
}
.helper--position-left50- {
left: -50px !important;
}
.helper--position-bottom50 {
bottom: 50px !important;
}
.helper--position-bottom50- {
bottom: -50px !important;
}
.helper--position-right50 {
right: 50px !important;
}
.helper--position-right50- {
right: -50px !important;
}
.helper--position-top20to10 {
top: 20px !important;
}
.helper--position-left20to10 {
left: 20px !important;
}
.helper--position-bottom20to10 {
bottom: 20px !important;
}
.helper--position-right20to10 {
right: 20px !important;
}
/*
Width
`width` 調整のためのヘルパー（数値指定は 25px 単位で設定可能）
Weight: -96
Markup:
helper--width-auto - auto に指定
helper--width-fit - 100% に指定
helper--width-25 - 25px に指定
helper--width-500 - 500px に指定
Style guide: helper.options.width
*/
.helper--width-auto {
width: auto !important;
}
.helper--width-fit {
width: 100% !important;
}
.helper--width-25 {
width: 25px !important;
}
.helper--width-50 {
width: 50px !important;
}
.helper--width-75 {
width: 75px !important;
}
.helper--width-100 {
width: 100px !important;
}
.helper--width-125 {
width: 125px !important;
}
.helper--width-150 {
width: 150px !important;
}
.helper--width-175 {
width: 175px !important;
}
.helper--width-200 {
width: 200px !important;
}
.helper--width-225 {
width: 225px !important;
}
.helper--width-250 {
width: 250px !important;
}
.helper--width-275 {
width: 275px !important;
}
.helper--width-300 {
width: 300px !important;
}
.helper--width-325 {
width: 325px !important;
}
.helper--width-350 {
width: 350px !important;
}
.helper--width-375 {
width: 375px !important;
}
.helper--width-400 {
width: 400px !important;
}
.helper--width-425 {
width: 425px !important;
}
.helper--width-450 {
width: 450px !important;
}
.helper--width-475 {
width: 475px !important;
}
.helper--width-500 {
width: 500px !important;
}
/*
Height
`height` 調整のためのヘルパー（数値指定は 25px 単位で設定可能）
Weight: -95
Markup:
helper--height-auto - auto に指定
helper--height-fit - 100% に指定
helper--height-25 - 25px に指定
helper--height-500 - 500px に指定
Style guide: helper.options.height
*/
.helper--height-auto {
height: auto !important;
}
.helper--height-fit {
height: 100% !important;
}
.helper--height-25 {
height: 25px !important;
}
.helper--height-50 {
height: 50px !important;
}
.helper--height-75 {
height: 75px !important;
}
.helper--height-100 {
height: 100px !important;
}
.helper--height-125 {
height: 125px !important;
}
.helper--height-150 {
height: 150px !important;
}
.helper--height-175 {
height: 175px !important;
}
.helper--height-200 {
height: 200px !important;
}
.helper--height-225 {
height: 225px !important;
}
.helper--height-250 {
height: 250px !important;
}
.helper--height-275 {
height: 275px !important;
}
.helper--height-300 {
height: 300px !important;
}
.helper--height-325 {
height: 325px !important;
}
.helper--height-350 {
height: 350px !important;
}
.helper--height-375 {
height: 375px !important;
}
.helper--height-400 {
height: 400px !important;
}
.helper--height-425 {
height: 425px !important;
}
.helper--height-450 {
height: 450px !important;
}
.helper--height-475 {
height: 475px !important;
}
.helper--height-500 {
height: 500px !important;
}
/*
Float
`float` 設定のためのヘルパー
Weight: -94
Markup:
div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
helper--float-left - 左フロート
helper--float-right - 右フロート
helper--float-none - フロートを解除
Style guide: helper.options.float
*/
.helper--float-left {
float: left !important;
}
.helper--float-right {
float: right !important;
}
.helper--float-none {
float: none !important;
}
/*
Clear
`float` 解除のためのヘルパー
Weight: -93
Markup:
div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
helper--clear-left - 左フロートをクリア
helper--clear-right - 右フロートをクリア
helper--clear-both - 両方のフロートをクリア
Style guide: helper.options.clear
*/
.helper--clear-left {
clear: left !important;
}
.helper--clear-right {
clear: right !important;
}
.helper--clear-both {
clear: both !important;
}
/*
ZIndex
`z-index` 調整のためのヘルパー（5 単位で設定可能）
Weight: -92
Markup:
helper--z-index-0 - 重なり順 0
helper--z-index-25 - 重なり順 25
helper--z-index-50 - 重なり順 50
Style guide: helper.options.zindex
*/
.helper--z-index-0 {
z-index: 0 !important;
}
.helper--z-index-5 {
z-index: 5 !important;
}
.helper--z-index-10 {
z-index: 10 !important;
}
.helper--z-index-15 {
z-index: 15 !important;
}
.helper--z-index-20 {
z-index: 20 !important;
}
.helper--z-index-25 {
z-index: 25 !important;
}
.helper--z-index-30 {
z-index: 30 !important;
}
.helper--z-index-35 {
z-index: 35 !important;
}
.helper--z-index-40 {
z-index: 40 !important;
}
.helper--z-index-45 {
z-index: 45 !important;
}
.helper--z-index-50 {
z-index: 50 !important;
}
/*
Vertical Align
縦方向の整列のためのヘルパー
Weight: -91
Markup:
helper--valign-top - 上揃え
helper--valign-middle - 中央揃え
helper--valign-bottom - 下揃え
Style guide: helper.options.valign
*/
.helper--valign-top {
vertical-align: top !important;
}
.helper--valign-middle {
vertical-align: middle !important;
}
.helper--valign-bottom {
vertical-align: bottom !important;
}
/*
Box Sizing
ボックスモデル調整のためのヘルパー
Weight: -90
Markup:
helper--border-box-true - ボーダーボックス（`width`、`height` に `padding` を含む）
helper--content-box-true - コンテントボックス（`width`、`height` に `padding` を含まない）
Style guide: helper.options.boxsizing
*/
.helper--border-box-true {
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.helper--content-box-true {
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important;
}
/*
Hide (Responsive)
media queryを用いた非表示制御のヘルパー
Weight: -89
Markup:
helper--hide-landscape-over - スマホ`横`サイズ` + 1px 以上`は非表示
helper--hide-landscape-under - スマホ`横`サイズ`以下`は非表示
helper--hide-tablet-other - タブレット`横`サイズ`以外`は非表示
Style guide: helper.options.responsive
*/
/*
es5lib-ui
JavaScript の UI 実装の記述サンプル (ES5 版)
Weight: 20000
Style guide: es5lib-ui
*/
/*
Tab
タブコンテンツモジュール
Weight: 100
Style guide: es5lib-ui.tab
*/
/*
localstrage
LocalStroge によるタブ復元
Markup:
es5lib/ui/tab - タブコンテンツモジュール
Style guide: es5lib-ui.tab.localstorage
*/
/*
location.hash
location.hash の値によるタブ復元
Markup:
es5lib/ui/tab - タブコンテンツモジュール
Style guide: es5lib-ui.tab.locationhash
*/
/*
Accordion
アコーディオンモジュール
Weight: 200
Style guide: es5lib-ui.accordion
*/
/*
single
単体のアコーディオン
Weight: -100
Markup:
es5lib/ui/accordion - アコーディオンモジュール
Style guide: es5lib-ui.accordion.single
*/
/*
linked
リストを利用した連携
Markup:
es5lib/ui/accordion - アコーディオンモジュール
Style guide: es5lib-ui.accordion.linked
*/
/*
Smoothscroll
スムーズスクロールモジュール
Weight: 300
Style guide: es5lib-ui.smoothscroll
*/
/*
smoothscroll
アンカーリンクへの設定例
Markup:
スムーズスクロールリンク
スムーズスクロールターゲット
es5lib/ui/smoothscroll - スムーズスクロールモジュール
Style guide: es5lib-ui.smoothscroll.default
*/
/*
Scrollfollower
スクロール追従モジュール
Weight: 400
Style guide: es5lib-ui.scrollfollower
*/
/*
followed top or bottom
上辺、下辺への追従
Weight: -100
Markup:
es5lib/ui/scrollfollower - スクロール追従モジュール
Style guide: es5lib-ui.scrollfollower.default
*/
.js-es5lib-sample-scroll-follower--followed-a {
position: fixed;
top: 0;
z-index: 1000;
width: auto;
}
.js-es5lib-sample-scroll-follower--followed-b {
position: fixed;
bottom: 0;
z-index: 1000;
width: auto;
}
/*
anchor links
アンカーリンクによるカレント表示
Markup:
es5lib/ui/scrollfollower - スクロール追従モジュール
Style guide: es5lib-ui.scrollfollower.current
*/
.js-es5lib-sample-scroll-follower--followed-c {
position: fixed;
top: 0;
z-index: 1000;
width: auto;
}
.js-es5lib-sample-scroll-follower--current {
color: #f00;
}
/*
scope
特定効果範囲の指定
Markup:
es5lib/ui/scrollfollower - スクロール追従モジュール
Style guide: es5lib-ui.scrollfollower.effectscope
*/
.js-es5lib-sample-scroll-follower--followed-d {
position: fixed;
top: 0;
z-index: 1000;
width: auto;
}
.js-es5lib-sample-scroll-follower--effect-scope {
background-color: #999;
}
/*
NewsTicker
ニュースティッカーモジュール
Weight: 500
Style guide: es5lib-ui.newsticker
*/
/*
NewsTicker
ニュースティッカー
Markup:
ニュースティッカーのアイテム1
ニュースティッカーのアイテム2 ニュースティッカーのアイテム2
ニュースティッカーのアイテム3 ニュースティッカーのアイテム3 ニュースティッカーのアイテム3
es5lib/ui/NewsTicker - スクロール追従モジュール
Style guide: es5lib-ui.newsticker.default
*/
/*
es5lib-thirdparties
JavaScript の サードパティーのプラグインの呼び出し方法 (ES5 版)
Weight: 30000
Styleguide es5lib-thirdparties
*/
/*
Facebook
Facebook のプラグイン
Weight: 100
Style guide: es5lib-thirdparties.facebook
*/
/*
Facebook Like Button
Facebook Like Button の呼び出し方法。`js/app.facebook.js` パラメーターの詳細は を確認して下さい。
Markup:
fb-like - デフォルトのスタイル
Styleguide es5lib-thirdparties.facebook.like
*/
/*
Facebook Follow Button
Facebook Follow Button の呼び出し方法。`js/app.facebook.js` パラメーターの詳細は を確認して下さい。
Markup:
fb-follow - デフォルトのスタイル
Styleguide es5lib-thirdparties.facebook.follow
*/
/*
Facebook like Box
Facebook like Box の呼び出し方法。`js/app.facebook.js` パラメーターの詳細は を確認して下さい。
Markup:
fb-like-box - デフォルトのスタイル
Styleguide es5lib-thirdparties.facebook.likebox
*/
/*
Facebook Comments
Facebook Comments の呼び出し方法。`js/app.facebook.js` パラメーターの詳細は を確認して下さい。
Markup:
fb-comments - デフォルトのスタイル
Styleguide es5lib-thirdparties.facebook.comments
*/
/*
Facebook Embedded Posts
Facebook Embedded Posts の呼び出し方法。`js/app.facebook.js` の実装が必要。パラメーターの詳細は を確認して下さい。
Markup:
fb-post - デフォルトのスタイル
Styleguide es5lib-thirdparties.facebook.embeddedposts
*/
/*
Twitter
Twitter のプラグイン
Weight: 200
Style guide: es5lib-thirdparties.twitter
*/
/*
Twitter Tweet
「ツイート」ボタンの呼び出し方法。`js/app.twitter.js` の実装が必要。パラメーターの詳細は を確認して下さい。
Markup: ツイート
twitter-share-button - デフォルトのスタイル
Styleguide es5lib-thirdparties.twitter.tweet
*/
/*
Hatena
Hatena のプラグイン
Weight: 300
Style guide: es5lib-thirdparties.hatena
*/
/*
Hatena Bookmark
はてなブックマークボタンの呼び出し方法。`js/app.hatenabookmark.js` の実装が必要。パラメーターの詳細は を確認して下さい。
Markup: はてなブックマーク
hatena-bookmark-button - デフォルトのスタイル
Styleguide es5lib-thirdparties.hatena.bookmark
*/
/*
Google
Google のプラグイン
Weight: 400
Style guide: es5lib-thirdparties.google
*/
/*
Google Plus
「Google +1」ボタンの呼び出し方法。`js/app.googleplus.js` の実装が必要。パラメーターの詳細は を確認して下さい。
Markup:
g-plusone - デフォルトのスタイル
Styleguide es5lib-thirdparties.google.plus
*/
/*
Google Maps
GoogleMapsAPI の呼び出し方法。`js/app.googlemapapi.js` の実装が必要。`data-js-googlemap-latlan` で緯度経度を指定し、`data-js-googlemap-address` で住所を指定する。`data-js-googlemap-autoload="true"` を指定することで自動的にマップが表示される。
Markup:
