/**
* @license
*
* cobalt:
* 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: LineHeight
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--line-height-default - デフォルト
mod-text--line-height-normal - ブラウザの標準状態
mod-text--line-height-narrow - 狭め
mod-text--line-height-wide - 広め
Style guide: text.option.line-height
*/
.mod-text--line-height-default {
line-height: 1.5;
}
.mod-text--line-height-normal {
line-height: normal;
}
.mod-text--line-height-narrow {
line-height: 1.2;
}
.mod-text--line-height-wide {
line-height: 1.7;
}
/*
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-16to13 - レスポンシブスタイル PC 16px SP13px 相当
mod-text--size-18to14 - レスポンシブスタイル PC 18px 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-20to14 - レスポンシブスタイル PC 20px SP14px 相当
mod-text--size-20to15 - レスポンシブスタイル PC 20px SP15px 相当
mod-text--size-20to13 - レスポンシブスタイル PC 20px SP13px 相当
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-24to14 - レスポンシブスタイル PC 24px SP14px 相当
mod-text--size-28to16 - レスポンシブスタイル PC 28px SP16px 相当
mod-text--size-28to24 - レスポンシブスタイル PC 28px SP24px 相当
mod-text--size-26to12 - レスポンシブスタイル PC 26px SP12px 相当
mod-text--size-30to18 - レスポンシブスタイル PC 30px SP18px 相当
mod-text--size-29to17 - レスポンシブスタイル PC 29px SP17px 相当
mod-text--size-24to12 - レスポンシブスタイル PC 24px SP12px 相当
mod-text--size-24to14 - レスポンシブスタイル PC 24px SP14px 相当
mod-text--size-22to13 - レスポンシブスタイル PC 22px SP13px 相当
mod-text--size-22to18 - レスポンシブスタイル PC 22px SP18px 相当
mod-text--size-18to12 - レスポンシブスタイル PC 18px SP12px 相当
mod-text--size-18to13 - レスポンシブスタイル PC 18px SP13px 相当
mod-text--size-18to11 - レスポンシブスタイル PC 18px SP11px 相当
mod-text--size-19to14 - レスポンシブスタイル PC 19px SP14px 相当
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-12to11 - レスポンシブスタイル PC 12px SP8px 相当
mod-text--size-12to8 - レスポンシブスタイル PC 12px SP8px 相当
mod-text--size-14to10 - レスポンシブスタイル PC 14px SP10px 相当
mod-text--size-20to14 - レスポンシブスタイル PC 20px SP14px 相当
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 相当
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-12to11 {
font-size: 0.858rem !important;
}
.mod-text--size-16to14 {
font-size: 1.143rem !important;
}
.mod-text--size-16to13 {
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-19to14 {
font-size: 1.358rem !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-23to15 {
font-size: 1.643rem !important;
}
.mod-text--size-22to13 {
font-size: 1.572rem !important;
}
.mod-text--size-22to18 {
font-size: 1.572rem !important;
}
.mod-text--size-23to14 {
font-size: 1.643rem !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-28to16 {
font-size: 2rem !important;
}
.mod-text--size-28to24 {
font-size: 2rem !important;
}
.mod-text--size-30to18 {
font-size: 2.143rem !important;
}
.mod-text--size-29to17 {
font-size: 2.072rem !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-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__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 - テキスト赤 下線なしから下線あり
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--c:visited {
text-decoration: none;
}
.mod-text__link--theme-a-a--c:hover,
.mod-text__link--theme-a-a--c: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-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;
padding: 5px 0;
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;
}
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
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 {
color: #fff;
background-color: #a79060;
border: 1px solid #a79060;
padding: 7px 10px;
}
.mod-btn--theme-a-a--a:hover {
color: #a79060;
background-color: #fff;
text-decoration: none;
}
.mod-btn--theme-a-a--b {
color: #fff;
background-color: #da969f;
border-radius: 5px;
border: 1px solid #da969f;
padding: 7px 10px;
}
.mod-btn--theme-a-a--b:hover {
color: #da969f;
background-color: #fff;
text-decoration: none;
}
.mod-btn--theme-a-a--c {
color: #fff;
background-color: #452700;
border-radius: 5px;
border: 1px solid #452700;
padding: 7px 10px;
}
.mod-btn--theme-a-a--c:hover {
color: #452700;
background-color: #fff;
text-decoration: 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-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
Style guide: box.option.theme
*/
.mod-box--theme-a-a--a {
background-color: #fff;
}
.mod-box--theme-a-a--b {
background-color: #a79060;
}
.mod-box--theme-a-a--c {
background-color: #452700;
}
.mod-box--theme-a-a--d {
background-color: #da969f;
}
.mod-box--theme-a-a--e {
background-color: #000;
}
/*
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
mod-box--texture-a-b - テクスチャタイプ a-b
mod-box--texture-a-c - テクスチャタイプ a-c
mod-box--texture-a-d - テクスチャタイプ a-d
mod-box--texture-a-e - テクスチャタイプ a-e
mod-box--texture-a-f - テクスチャタイプ a-f
mod-box--texture-a-g - テクスチャタイプ a-g
mod-box--texture-a-h - テクスチャタイプ a-h
mod-box--texture-a-i - テクスチャタイプ a-i
Style guide: box.option.texture
*/
.mod-box--texture-a-a {
background-image: url("../images/_common/bg_repeat_a_a.png");
background-repeat: repeat;
background-position: 0 0;
}
.mod-box--texture-a-b {
background-image: url("../images/_common/bg_item_a_a.svg");
background-repeat: repeat;
background-position: 0 0;
}
.mod-box--texture-a-c {
background-image: url("../images/_common/bg_item_a_b.svg");
background-repeat: repeat;
background-position: 0 0;
}
.mod-box--texture-a-d {
background-image: url("../images/_common/bg_repeat_a_b.png");
background-repeat: repeat;
background-position: 0 0;
}
.mod-box--texture-a-e {
background-image: url("../images/_common/bg_item_b_a.svg");
background-repeat: repeat;
background-position: 0 0;
}
.mod-box--texture-a-f {
background-image: url("../images/_common/bg_item_d_a.svg"), url("../images/_common/bg_item_d_b.svg");
background-position: 0 0, 100% 0, 0 100%, 100% 100%;
background-repeat: no-repeat;
}
.mod-box--texture-a-g {
border-width: 42px 42px;
border-style: solid;
border-color: transparent;
border-image-source: url("../images/_common/lead_b_c.svg");
border-image-slice: 52;
border-image-width: 42px;
border-image-outset: 0;
border-image-repeat: repeat;
}
.mod-box--texture-a-h {
background-image: url("../images/_common/bg_item_e_a.svg"), url("../images/_common/bg_item_e_b.svg");
background-position: 0 0, 100% 100%, 0 0, 0 0;
background-repeat: no-repeat;
-webkit-background-size: 60% 60%;
background-size: 60%;
}
.mod-box--texture-a-i {
background-image: url("../images/_common/bg_repeat_a_c.png");
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-900 - タイプ max-900px
mod-box__container--width-max-1000 - タイプ max-1000px
mod-box__container--width-max-1000-padding15to30 - タイプ max-1000px (padding15px-30px)
mod-box__container--width-max-900-fit - タイプ max-1000px（PC スマホ以下の場合、左右に余白なし）
mod-box__container--width-max-1000-fit - タイプ max-1000px（PC スマホ以下の場合、左右に余白なし）
mod-box__container--width-max-1158 - タイプ max-1158px
mod-box__container--width-max-1100-fit - タイプ max-1100px（PC スマホ以下の場合、左右に余白なし）
mod-box__container--width-max-1400-fit - タイプ max-1338px（PC スマホ以下の場合、左右に余白なし）
mod-box__container--width-max-980-fit - タイプ max-1000px（PC スマホ以下の場合、左右に余白なし）
mod-box__container--width-max-980 - タイプ max-980px
Style guide: box.container.width
*/
.mod-box__container--width-a-a {
width: 100%;
margin: 0 auto;
}
.mod-box__container--width-max-900 {
width: 900px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-1000 {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-1000-padding15to30 {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-900-fit {
width: 900px;
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-1158 {
width: 1158px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-1100-fit {
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-1400-fit {
width: 1400px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-980-fit {
width: 980px;
margin-left: auto;
margin-right: auto;
}
.mod-box__container--width-max-980 {
width: 980px;
margin-left: auto;
margin-right: auto;
}
/*
mod-table
テーブルのスタイル
Weight: -1040
Style guide: table
*/
.mod-table-a-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 {
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;
}
/*
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", 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
アコーディオン
Markup:
お見積もりの目安を教えてください。
『伯爵と妖精 あまい罠には気をつけて 』
妖精と話ができる少女リディアは、妖精博士ルビ：フェアリードクター として伯爵エドガー でも元強盗 に雇われ、屋敷に通うようになった。すぐに口説き文句を口にするエドガーに振り回されていたある日、彼女は公園で不吉な妖精霧男 ルビ：フォグマン に似た大男に襲われる。なんとか無事屋敷に戻ると、ちょうどひとりの女性がリディアを訪ねてきていた。聞けば、なんと男爵の令嬢が霧男に連れ去られたかもしれないというのだ！
block-accordion-a-a - デフォルトスタイル
Style guide: block.accordion.a.a
*/
.block-accordion-a-a__area {
display: -ms-grid;
display: grid;
gap: 2rem 1rem;
-ms-grid-columns: (minmax(200px, 1fr))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
margin: 0;
padding: 0;
}
.block-accordion-a-a__area li {
list-style: none;
}
.block-accordion-a-a__title {
position: relative;
cursor: pointer;
font-size: 1rem;
font-weight: normal;
margin: 0;
padding: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.block-accordion-a-a__title::after {
font-size: 1.5rem;
content: "+";
position: absolute;
top: 0;
right: 0;
}
.block-accordion-a-a__title.close::after {
content: "-";
right: 0;
}
.block-accordion-a-a__title:hover {
opacity: 0.5;
}
.block-accordion-a-a__box {
display: none;
margin: 0;
}
/*
block-bar
サイトを構成するレイアウトブロック（バー）
Weight: 0
Style guide: block.bar
*/
/*
Variations
フッターバー
Markup:
block-bar-a-a - デフォルトスタイル
Style guide: block.bar.a.a
*/
.block-bar-a-a {
width: 100%;
max-width: 100%;
height: auto;
margin: 0 auto;
background-color: #000;
border-top: 5px solid #a79060;
}
.block-bar-a-a__container {
padding-top: 30px;
padding-bottom: 30px;
}
.block-bar-a-a__copyright {
font-size: 0.858rem;
padding: 10px;
text-align: center;
color: #fff;
}
/*
Variations
ヘッダー
Markup:
block-bar-b-a - デフォルトスタイル
Style guide: block.bar.b.a
*/
.block-bar-b-a {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 2001;
}
.block-bar-b-a__border {
width: 100%;
height: auto;
background-color: #000;
border-bottom: 5px solid #a79060;
}
.block-bar-b-a__container {
text-align: center;
margin: 0 auto;
}
.block-bar-b-a__button:hover {
opacity: 0.7;
}
.block-bar-b-a__grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 20px 0 20px;
}
.block-bar-b-a__grid__cell--a {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
padding-right: 10px;
}
.block-bar-b-a__grid__cell--b {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.block-bar-b-a__grid__cell--c {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.block-bar-b-a__pict {
width: 150px;
}
.block-bar-b-a__hamburger {
display: block;
position: relative;
z-index: 1000;
right: 0;
top: 0;
width: 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.block-bar-b-a__hamburger span {
display: block;
position: absolute;
width: 30px;
height: 2px;
left: 6px;
background: #fff;
-webkit-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.block-bar-b-a__hamburger span:nth-child(1) {
top: 10px;
}
.block-bar-b-a__hamburger span:nth-child(2) {
top: 20px;
}
.block-bar-b-a__hamburger span:nth-child(3) {
top: 30px;
}
.block-bar-b-a__hamburger.is-active span:nth-child(1) {
top: 20px;
left: 6px;
background: #fff;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.block-bar-b-a__hamburger.is-active span:nth-child(2),
.block-bar-b-a__hamburger.is-active span:nth-child(3) {
top: 20px;
background: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*
Variations
トップへボタン
Markup:
block-bar-c-a - デフォルトスタイル
Style guide: block.bar.c.a
*/
.block-bar-c-a {
z-index: 2000;
}
.block-bar-c-a__page-top {
display: none;
margin: 0;
padding: 0;
}
.block-bar-c-a__page-top p {
margin: 0;
padding: 0;
position: fixed;
right: 16px;
bottom: 16px;
}
.block-bar-c-a__move-page-top {
width: 20px;
height: 20px;
display: block;
cursor: pointer;
padding: 10px;
background-color: #eda2ac;
border-radius: 5px;
text-decoration: none;
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.block-bar-c-a__move-page-top:hover {
background-color: #a79060;
}
.block-bar-c-a__move-page-top__img {
width: 20px;
height: auto;
vertical-align: middle;
}
/*
block-layout
サイトを構成するレイアウトブロック（レイアウト）
Weight: 0
Style guide: block.layout
*/
/*
Variations
タブコンテンツレイアウト
Markup:
作品紹介
復刊Cobalt『伯爵と妖精』特集
『伯爵と妖精 』特別ギャラリー
アニメ『伯爵と妖精』
お知らせ
block-layout-a-a - デフォルトスタイル
Style guide: block.layout.a.a
*/
.block-layout-a-a__container {
width: 100%;
}
.block-layout-a-a__tab {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-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;
margin: 0;
padding: 0;
}
.block-layout-a-a__tab__item {
display: contents;
margin: 0;
-ms-flex-item-align: end;
align-self: flex-end;
}
.block-layout-a-a__button {
width: 100%;
height: auto;
padding: 10px;
vertical-align: middle;
color: #000;
background: #ddd;
border-radius: 15px 15px 0 0;
}
.block-layout-a-a__button:hover {
color: #a79060;
background: #fff;
}
.block-layout-a-a__button__label {
font-size: 16px;
font-weight: bold;
}
.block-layout-a-a__contents {
background: #fff;
padding: 20px;
-webkit-animation: 1s displayAnime;
animation: 1s displayAnime;
}
.block-layout-a-a .js-ui-tab__navi--theme-active {
color: #a79060;
background-color: #fff;
border-radius: 15px 15px 0 0;
}
@-webkit-keyframes displayAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes displayAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*
Variations
登場人物コンテンツレイアウト
Markup:
block-layout-a-b - デフォルトスタイル
Style guide: block.layout.a.b
*/
.block-layout-a-b__contents {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
-ms-grid-rows: (1fr)[2];
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.block-layout-a-b__contents__card-a {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
grid-area: 1/2/3/3;
}
.block-layout-a-b__contents__card-a-name-main {
position: absolute;
width: 150px;
z-index: 100;
top: 50%;
right: -5%;
}
.block-layout-a-b__contents__card-a-name-sav {
position: absolute;
width: 200px;
z-index: 100;
top: 75%;
left: 0;
}
.block-layout-a-b__contents__card-a-pict {
width: 420px;
margin: 0 auto;
}
.block-layout-a-b__contents__card-b {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
grid-area: 1/1/2/2;
}
.block-layout-a-b__contents__card-b-name {
position: absolute;
width: 120px;
z-index: 100;
bottom: 12%;
}
.block-layout-a-b__contents__card-b-pict {
width: 240px;
margin: 0 auto;
}
.block-layout-a-b__contents__card-c {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
grid-area: 1/3/2/4;
}
.block-layout-a-b__contents__card-c-name {
position: absolute;
width: 120px;
z-index: 100;
bottom: 12%;
}
.block-layout-a-b__contents__card-c-pict {
width: 240px;
margin: 0 auto;
}
.block-layout-a-b__contents__card-d {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: end;
grid-area: 2/1/3/2;
}
.block-layout-a-b__contents__card-d-name {
position: absolute;
width: 120px;
z-index: 100;
bottom: 0;
}
.block-layout-a-b__contents__card-d-pict {
width: 240px;
margin: 0 auto;
}
.block-layout-a-b__contents__card-e {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: end;
grid-area: 2/3/3/4;
}
.block-layout-a-b__contents__card-e-name {
position: absolute;
width: 120px;
z-index: 100;
bottom: 0;
}
.block-layout-a-b__contents__card-e-pict {
width: 240px;
margin: 0 auto;
}
/*
Variations
特別ギャラリーコンテンツレイアウト
Markup:
出典：
出典：
出典：
block-layout-a-c - デフォルトスタイル
Style guide: block.layout.a.c
*/
.block-layout-a-c__contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.block-layout-a-c__contents__list__item {
padding-bottom: 40px;
}
.block-layout-a-c__contents__list__item:nth-of-type(4) {
top: -100px;
}
.block-layout-a-c__contents__list__item:nth-of-type(5) {
top: -140px;
}
.block-layout-a-c__contents__list__item:last-child {
padding-bottom: 0;
}
.block-layout-a-c__card--a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.block-layout-a-c__card--b {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.block-layout-a-c__card__item--a {
width: 80%;
padding: 10px;
}
.block-layout-a-c__card__item--b {
width: 20%;
padding-left: 10px;
padding-bottom: 40px;
}
.block-layout-a-c__card__item--c {
width: 70%;
padding: 10px;
}
.block-layout-a-c__card__item--d {
width: 30%;
padding-right: 10px;
padding-bottom: 40px;
}
.block-layout-a-c__card__item--e {
width: 60%;
padding: 10px;
}
.block-layout-a-c__card__item--f {
width: 50%;
padding-left: 10px;
padding-bottom: 140px;
}
.block-layout-a-c__card__item--g {
width: 60%;
padding: 10px;
}
.block-layout-a-c__card__item--i {
width: 40%;
padding-right: 10px;
padding-bottom: 240px;
}
.block-layout-a-c__card__item--j {
width: 55%;
padding: 10px;
}
.block-layout-a-c__card__item--k {
width: 40%;
padding-left: 10px;
padding-bottom: 80px;
}
.block-layout-a-c__text--a {
font-size: 16px;
text-align: left;
}
.block-layout-a-c__text--b {
font-size: 16px;
text-align: right;
}
.block-layout-a-c__pict {
padding: 10px;
filter: drop-shadow(5px 5px 5px #aaa);
}
/*
block-list
サイトを構成するレイアウトブロック（リスト）
Weight: 0
Style guide: block.list
*/
/*
Variations
人物紹介
Markup:
ポール・ファーマン
要請を専門に描いている画家。リディアたちの仲間で、夢見がちな性格。
ユリシス
エドガーの宿敵・プリンスの側近。リディアを上回る妖精博士の力を持つ
カールトン教授
リディアの父親で、ロンドン大学の博物学教授。娘と亡き妻を深く愛している
トムキンス
アシェンバート伯爵家に仕える執事。妖精メロウの血を引いている
block-list-a-a - デフォルトスタイル
Style guide: block.list.a.a
*/
.block-list-a-a__grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block-list-a-a__grid__cell-a {
width: calc(20% - 20px / 2);
}
.block-list-a-a__grid__cell-b {
width: calc(80% - 20px / 2);
padding-left: 10px;
}
.block-list-a-a__list__item {
margin-bottom: 20px;
}
.block-list-a-a__list__item:last-child {
margin-bottom: 0;
}
.block-list-a-a__description {
font-size: 16px;
}
/*
Variations
既刊紹介
Markup:
block-list-a-b - デフォルトスタイル
Style guide: block.list.a.b
*/
.block-list-a-b__list {
display: -ms-grid;
display: grid;
gap: 2rem 3rem;
-ms-grid-columns: (minmax(150px, auto))[auto-fit];
grid-template-columns: repeat(auto-fit, minmax(150px, auto));
margin: 0;
padding: 0;
}
.block-list-a-b__pict {
border: 2px solid #a79060;
}
.block-list-a-b__number {
font-size: 40px;
color: #fff;
text-align: right;
}
.block-list-a-b__number__label {
text-shadow: 0 3px 3px #bcab86;
}
.block-list-a-b__button {
width: 100%;
}
.block-list-a-b__button:hover {
opacity: 0.7;
}
/*
Variations
MV-お知らせ
Markup:
block-list-a-c - デフォルトスタイル
Style guide: block.list.a.c
*/
.block-list-a-c__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: end;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 10px 10px;
background: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0.9)));
background: linear-gradient(to left, rgba(255,255,255,0.3), rgba(255,255,255,0.9));
border-top: 2px solid #a79060;
border-bottom: 2px solid #a79060;
}
.block-list-a-c__content__item:nth-child(1) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
overflow: scroll;
max-height: 85px;
}
.block-list-a-c__content__item:nth-child(2) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.block-list-a-c__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.block-list-a-c__list__item {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-bottom: 5px;
}
.block-list-a-c__list__item:last-child {
padding-bottom: 0;
}
.block-list-a-c__flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.block-list-a-c__flex__column {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.block-list-a-c__title {
width: 80px;
background: #a79060;
padding: 3px 8px;
}
.block-list-a-c__title__label {
font-size: 17px;
font-weight: bold;
color: #fff;
text-align: center;
}
.block-list-a-c__date {
min-width: 50px;
font-size: 17px;
font-weight: bold;
color: #000;
text-align: right;
padding-right: 10px;
}
.block-list-a-c__lead {
font-size: 17px;
color: #000;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
position: relative;
line-height: 1.5em;
text-decoration: none;
word-wrap: break-word;
}
.block-list-a-c__lead:hover {
color: #eda2ac;
}
.block-list-a-c__button {
width: 100px;
padding: 2px 10px;
color: #fff;
background: #eda2ac;
border-radius: 25px;
}
.block-list-a-c__button:hover {
background: #a79060;
}
.block-list-a-c__button__label {
font-size: 14px;
font-weight: bold;
vertical-align: middle;
text-align: center;
}
.block-list-a-c__button__icon {
display: inline-block;
width: 14px;
height: 13px;
padding-right: 3px;
padding-bottom: 3px;
background-image: url("../images/_common/item_d_a.svg");
background-repeat: no-repeat;
vertical-align: middle;
}
/*
Variations
お知らせ
Markup:
タイトルが入ります。タイトルが入ります。タイトルが入ります。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ...
タイトルが入ります。タイトルが入ります。タイトルが入ります。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ...
タイトルが入ります。タイトルが入ります。タイトルが入ります。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れ...
block-list-a-d - デフォルトスタイル
Style guide: block.list.a.d
*/
.block-list-a-d__title {
width: 440px;
margin: 0 auto 20px;
}
.block-list-a-d__title__label {
text-align: center;
}
.block-list-a-d__content {
overflow-y: scroll;
scroll-behavior: smooth;
max-height: 300px;
border: 5px solid #ddd;
background-color: #fff;
margin: 0 40px;
padding: 40px 60px;
}
.block-list-a-d__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.block-list-a-d__list__item {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
padding-top: 40px;
}
.block-list-a-d__list__item:first-child {
padding-top: 0;
}
.block-list-a-d__flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.block-list-a-d__flex__column:nth-child(1) {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 15%;
}
.block-list-a-d__flex__column:nth-child(2) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
}
.block-list-a-d__flex__date {
min-width: 100px;
font-size: 27px;
font-weight: bold;
color: #959595;
text-align: left;
padding-right: 10px;
}
.block-list-a-d__flex__description {
padding: 10px 0 0;
}
.block-list-a-d__flex__description__label {
font-size: 18px;
line-height: 1.7;
}
.block-list-a-d__flex__lead {
font-size: 27px;
font-weight: bold;
color: #eda2ac;
}
/*
Variations
A-E - クレジット
Markup:
block-list-a-e - デフォルトスタイル
Style guide: block.list.a.e
*/
.block-list-a-e__container {
width: 60%;
margin: 0 auto;
}
.block-list-a-e__list__item {
padding: 10px 0;
border-bottom: 3px dotted #452700;
}
.block-list-a-e__list__item:first-child {
border-top: 3px dotted #452700;
}
.block-list-a-e__description {
font-size: 16px;
font-weight: bold;
text-align: center;
color: #452700;
}
/*
block-navi
サイトを構成するレイアウトブロック（ナビ）
Weight: 0
Style guide: block.navi
*/
/*
Variations
トップナビゲーション
Markup:
block-navi-a-a - デフォルトスタイル
Style guide: block.navi.a.a
*/
.block-navi-a-a__pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block-navi-a-a__pagination__container {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border-right: 2px solid #a79060;
}
.block-navi-a-a__pagination__container:last-child {
border-right: 0;
}
.block-navi-a-a__button {
padding: 0 10px;
color: #fff;
}
.block-navi-a-a__button__label {
font-size: 14px;
word-break: keep-all;
}
.block-navi-a-a__button:hover {
color: #a79060;
}
.block-navi-a-a__button:not(a) {
color: #aaa;
pointer-events: none;
}
.block-navi-a-a__button.is-active {
color: #a79060;
}
/*
Variations
追従ナビゲーション
Markup:
block-navi-a-b - デフォルトスタイル
Style guide: block.navi.a.b
*/
.block-navi-a-b__menu {
position: fixed;
top: -100px;
right: 0;
z-index: 9999;
width: 100%;
background-color: #000;
display: block;
-webkit-transition: 0.8s;
transition: 0.8s;
}
.block-navi-a-b__menu ul {
padding: 10px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block-navi-a-b__menu ul li {
width: 20%;
text-align: center;
list-style: none;
}
.block-navi-a-b__menu ul li a {
color: #fff;
font-size: 12px;
text-decoration: none;
}
.block-navi-a-b__menu ul li a:hover {
color: #fff;
}
/*
Variations
固定ナビゲーション
Markup:
block-navi-a-c - デフォルトスタイル
Style guide: block.navi.a.c
*/
.block-navi-a-c__menu ul {
padding: 10px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block-navi-a-c__menu ul li {
width: 23%;
list-style: none;
}
.block-navi-a-c__button__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 50px;
color: #fff;
background: #000;
border-radius: 30px;
font-size: 16px;
}
.block-navi-a-c__button:not(a) {
color: #aaa;
pointer-events: none;
opacity: 0.5;
}
.block-navi-a-c__button:hover {
pointer-events: auto;
opacity: 0.7;
}
.block-navi-a-c__frame-a {
background: #a79060;
background: linear-gradient(135deg, transparent 5px, #a79060 0) top left, linear-gradient(-135deg, transparent 5px, #a79060 0) top right, linear-gradient(-45deg, transparent 5px, #a79060 0) bottom right, linear-gradient(45deg, transparent 5px, #a79060 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.block-navi-a-c__frame-b {
margin: 2px;
background: #000;
background: linear-gradient(135deg, transparent 4px, #000 0) top left, linear-gradient(-135deg, transparent 4px, #000 0) top right, linear-gradient(-45deg, transparent 4px, #000 0) bottom right, linear-gradient(45deg, transparent 4px, #000 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.block-navi-a-c__frame-c {
margin: 3px;
background: #a79060;
background: linear-gradient(135deg, transparent 3px, #a79060 0) top left, linear-gradient(-135deg, transparent 3px, #a79060 0) top right, linear-gradient(-45deg, transparent 3px, #a79060 0) bottom right, linear-gradient(45deg, transparent 3px, #a79060 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.block-navi-a-c__frame-d {
margin: 1px;
background: #000;
background: linear-gradient(135deg, transparent 2px, #000 0) top left, linear-gradient(-135deg, transparent 2px, #000 0) top right, linear-gradient(-45deg, transparent 2px, #000 0) bottom right, linear-gradient(45deg, transparent 2px, #000 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
/*
Variations
ヴィジェット・A-D - 人物ボタン
Markup:
『伯爵と妖精』
『伯爵と妖精』
block-navi-a-d - デフォルトスタイル
Style guide: block.navi.a.d
*/
.block-navi-a-d__button__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 5px 0;
color: #fff;
background: #000;
border-radius: 30px;
font-size: 1rem;
}
.block-navi-a-d__button:hover {
opacity: 0.7;
}
.block-navi-a-d__button:not(a) {
pointer-events: none;
}
.block-navi-a-d__frame-a {
background: #a79060;
background: linear-gradient(135deg, transparent 5px, #a79060 0) top left, linear-gradient(-135deg, transparent 5px, #a79060 0) top right, linear-gradient(-45deg, transparent 5px, #a79060 0) bottom right, linear-gradient(45deg, transparent 5px, #a79060 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.block-navi-a-d__frame-b {
margin: 2px;
background: #000;
background: linear-gradient(135deg, transparent 4px, #000 0) top left, linear-gradient(-135deg, transparent 4px, #000 0) top right, linear-gradient(-45deg, transparent 4px, #000 0) bottom right, linear-gradient(45deg, transparent 4px, #000 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
/*
Variations
ハンバーガーボタンナビゲーション
Markup:
block-navi-a-e - デフォルトスタイル
Style guide: block.navi.a.e
*/
.block-navi-a-e__hamburger {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
color: #fff;
background: rgba(0,0,0,0.9);
text-align: center;
width: 100%;
pointer-events: none;
opacity: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.6s;
transition: all 0.6s;
}
.block-navi-a-e__hamburger.is-active {
opacity: 1;
display: block;
pointer-events: auto;
-webkit-transform: translateY(16%);
-ms-transform: translateY(16%);
transform: translateY(16%);
}
.block-navi-a-e__container {
border-bottom: 2px solid #a79060;
}
.block-navi-a-e__pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.block-navi-a-e__pagination__container {
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
border-bottom: 1px solid #999;
}
.block-navi-a-e__pagination__container:last-child {
border-bottom: 0;
}
.block-navi-a-e__button {
padding: 20px;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.block-navi-a-e__button__icon {
display: inline-block;
width: 8px;
height: 14px;
padding-right: 10px;
background-image: url("../images/_common/item_d_d.svg");
background-repeat: no-repeat;
vertical-align: middle;
}
.block-navi-a-e__button__label {
font-size: 16px;
text-align: left;
}
.block-navi-a-e__button:hover {
color: #a79060;
background: #ddd;
}
.block-navi-a-e__button:not(a) {
color: #aaa;
pointer-events: none;
}
.block-navi-a-e__button.is-active {
color: #a79060;
}
/*
Variations
ヴィジェット・A-D - 吹き出しアイテム
Markup:
大人気イラストレーター・高星麻子さんによる『伯爵と妖精』のイラストコーナー。谷先生のコメントも付いた、至れり尽くせりの豪華ギャラリーとなっています!!
block-navi-a-f - デフォルトスタイル
Style guide: block.navi.a.f
*/
.block-navi-a-f__balloon {
position: relative;
padding: 30px;
border-radius: 40px;
text-align: center;
color: #fff;
letter-spacing: 0.2em;
font-size: 14px;
background-color: #da969f;
margin-top: 20px;
}
.block-navi-a-f__balloon:before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
left: 50%;
top: -30px;
margin-left: -15px;
border: 15px solid transparent;
border-bottom: 20px solid #da969f;
}
.block-navi-a-f__label {
font-size: 1.2rem;
}
/*
block-widget
サイトを構成するレイアウトブロック（ヴィジェット）
Weight: 0
Style guide: block.widget
*/
/*
Variations
ヴィジェット・A - MV
Markup:
block-widget-a-a - デフォルトスタイル
Style guide: block.widget.a.a
*/
.block-widget-a-a {
background: #fff;
}
.block-widget-a-a__info {
position: absolute;
width: 70%;
z-index: 100;
bottom: 10px;
}
/*
Variations
ヴィジェット・A-B - lead
Markup:
物語の舞台は19世紀イギリスヴィクトリア朝の時代。産業革命により飛躍的に経済が発展したことで、人々の生活は豊かになった。そしていつしか人間は妖精が隣人だった一昔前のことなど忘れ去り、妖精はお伽話の中だけの存在となっていた。妖精博士フェアリードクター 」として生活を送っていた。仕事の依頼を待つもろくなものはなく、町の人々には変わり者扱いされる日々。そんなある日、父と共に復活祭イースター を過ごすために乗り込んだ船の上でとある陰謀に巻き込まれ、船室に潜んでいた謎の青年・エドガーに助け出される。彼を警戒しつつも妖精博士として依頼を受けたことから、エドガーを取り巻く壮大な事件の数々に巻き込まれていくことになる。
block-widget-a-b - デフォルトスタイル
Style guide: block.widget.a.b
*/
.block-widget-a-b__title {
width: 444px;
height: 80px;
}
.block-widget-a-b__frame {
background-image: url("../images/_common/lead_b_a.png");
background-repeat: no-repeat;
background-position: 0 0;
-webkit-background-size: cover;
background-size: cover;
padding: 40px 50px 40px;
-webkit-box-shadow: 0 0 50px 0 rgba(158,73,22,0.3) inset;
box-shadow: 0 0 50px 0 rgba(158,73,22,0.3) inset;
}
.block-widget-a-b__lead {
padding: 30px 50px;
font-size: 18px;
letter-spacing: normal;
line-height: 2;
}
/*
Variations
ヴィジェット・A-C - announce
Markup:
block-widget-a-c - デフォルトスタイル
Style guide: block.widget.a.c
*/
.block-widget-a-c {
padding: 10px;
}
.block-widget-a-c__lead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
margin: 0 auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block-widget-a-c__lead__pict {
padding: 40px;
}
/*
Variations
ヴィジェット・A-D - 伯爵と妖精 紳士淑女のための愛好者読本
Markup:
原作とアニメの魅力、ギュギュッと濃縮！
block-widget-a-d - デフォルトスタイル
Style guide: block.widget.a.d
*/
.block-widget-a-d {
padding: 10px;
}
.block-widget-a-d__sav {
width: 100%;
margin: 0 auto;
padding: 0 0 20px;
}
.block-widget-a-d__sav__text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font-weight: bold;
}
.block-widget-a-d__sav__text:before,
.block-widget-a-d__sav__text:after {
content: url("../images/_common/item_d_e.svg");
position: relative;
top: 0;
display: inline-block;
}
.block-widget-a-d__sav__text:before {
left: 0;
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.block-widget-a-d__sav__text:after {
top: 3px;
right: 0;
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.block-widget-a-d__title {
margin: 0 0 20px;
}
.block-widget-a-d__title__label {
padding: 20px 0;
border-top: 2px solid #a79060;
border-bottom: 2px solid #a79060;
}
.block-widget-a-d__description {
font-size: 18px;
line-height: 1.9;
font-weight: bold;
}
.block-widget-a-d__flex {
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: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.block-widget-a-d__flex__column:nth-child(1) {
width: 300px;
-webkit-box-flex: 0.5;
-ms-flex-positive: 0.5;
flex-grow: 0.5;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin: 0 auto;
padding-right: 40px;
}
.block-widget-a-d__flex__column:nth-child(2) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.block-widget-a-d__pict {
margin: 0 auto;
}
/*
Variations
ヴィジェット・A-E - CONTENTS エリア
Markup:
ストーリー はじめての人でもわかりやすい、『伯爵と妖精』のあらすじを紹介しています！
アシェンバート伯爵家 登場人物設定画の間 アニメファン必見！藤井まき作画監督による、秘蔵の豪華設定画をとくとご覧あれ！
イラストギャラリー 高星麻子
大人気イラストレーター・高星麻子さんによる『伯爵と妖精』のイラストコーナー。谷先生のコメントも付いた、至れり尽くせりの豪華ギャラリーとなっています!!
小説「伯爵と妖精ふたりはまだ奇跡を知らない 」 谷 瑞恵
大人気イラストレーター・高星麻子さんによる『伯爵と妖精』のイラストコーナー。谷先生のコメントも付いた、至れり尽くせりの豪華ギャラリーとなっています!!
block-widget-a-e - デフォルトスタイル
Style guide: block.widget.a.e
*/
.block-widget-a-e__title {
width: 400px;
margin: 0 auto;
}
.block-widget-a-e__contents {
width: calc(100% - 100px);
margin: 0 auto;
}
.block-widget-a-e__contents__label {
padding: 0 0 10px;
text-align: center;
}
.block-widget-a-e__contents__title {
color: #452700;
font-size: 28px;
font-weight: bold;
text-align: center;
}
.block-widget-a-e__contents__read {
width: calc(100% - 100px);
margin: 0 auto;
padding: 10px 0 0;
text-align: center;
}
.block-widget-a-e__bar:before {
content: "";
display: inline-block;
position: absolute;
top: -15px;
right: 0;
width: 49px;
height: 32px;
background-image: url("../images/_common/item_c_c.svg");
-webkit-background-size: contain;
background-size: contain;
vertical-align: middle;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.block-widget-a-e__bar:after {
content: "";
display: inline-block;
position: absolute;
top: -15px;
left: 0;
width: 49px;
height: 32px;
background-image: url("../images/_common/item_c_c.svg");
-webkit-background-size: contain;
background-size: contain;
vertical-align: middle;
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.block-widget-a-e__bar__border {
width: calc(100% - 100px);
margin: 0 auto;
padding: 0;
border-bottom: 3px dotted #452700;
}
.block-widget-a-e__speech {
position: absolute;
width: calc(50% - 10px);
left: 20px;
z-index: 100;
}
.block-widget-a-e__flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 auto 0;
}
.block-widget-a-e__flex__column:nth-child(1) {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 40%;
margin: 150px auto 0;
}
.block-widget-a-e__flex__column:nth-child(2) {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
width: 40%;
margin: 0 auto 0;
}
.block-widget-a-e__pict {
background-color: #fff;
padding: 20px;
}
.block-widget-a-e__pict__src {
border: 2px solid #a79060;
}
/*
Variations
ヴィジェット・A-F - 製品情報
Markup:
block-widget-a-f - デフォルトスタイル
Style guide: block.widget.a.f
*/
.block-widget-a-f {
background-color: #fff;
border-top: 3px solid #a79060;
border-bottom: 3px solid #a79060;
}
.block-widget-a-f__container {
padding: 0 0 20px;
}
.block-widget-a-f__title {
width: auto;
margin: 0 auto;
padding: 0 0 20px;
}
.block-widget-a-f__pict {
text-align: center;
margin: 0 auto;
}
.block-widget-a-f__gradients {
background: -webkit-linear-gradient(90deg, #fff 10%, #a79060 30%, #a79060 70%, #fff 90%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(10%, #fff), color-stop(30%, #a79060), color-stop(70%, #a79060), color-stop(90%, #fff));
background-image: linear-gradient(90deg, #fff 10%, #a79060 30%, #a79060 70%, #fff 90%);
}
.block-widget-a-f__gradients__label {
font-family: "こぶりなゴシック Std", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-size: 19px;
font-weight: bold;
color: #fff;
text-align: center;
}
.block-widget-a-f__label {
font-size: 38px;
}
.block-widget-a-f__item {
position: absolute;
width: auto;
bottom: -15%;
left: 0;
z-index: 10;
}
.block-widget-a-f__button {
width: 80%;
margin: 0 auto;
padding: 0 0 20px;
}
/*
Variations
ヴィジェット・A-G - お詫びと購入者へのお知らせ
Markup:
電子書籍『【合本版】伯爵と妖精 ２』宣伝告知の誤表示に関するお詫びと購入者へのお知らせ
各電子書店において、1月25日より配信を開始いたしました『【合本版】伯爵と妖精 ２』の宣伝告知内容に誤りがありました。コバルト文庫公式ホームページの『伯爵と妖精 完結10年記念特設サイト』および、コバルト編集部公式Xにて、当該書籍には、特典として、谷瑞恵先生による書き下ろし新作短編2作を収録しているとの告知をしておりましたが、正しくは、過去に発表された単行本未収録の短編でした。
収録されている短編は以下の通りです。
・ 「ファーストキスの贈り物」（初出：雑誌『Cobalt』2012年夏フェア全員サービス「ありがとサマー2012BOOK」）・ 「もう少し、やさしい夢のなかで」（初出：雑誌『Cobalt』2012年11月号 定期購読特典）
誤った告知を掲載したことにより、お客様にご迷惑をおかけしましたことを深くお詫びいたします。また、特設サイトの告知はすでに修正しております。
2024年2月28日
block-widget-a-g - デフォルトスタイル
Style guide: block.widget.a.g
*/
.block-widget-a-g__box {
padding: 0 15px;
margin: 130px auto 0;
}
.block-widget-a-g__box__container {
border: 1px solid #000;
padding: 20px;
}
.block-widget-a-g__title {
padding-right: 14px;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.block-widget-a-g__title--a {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.block-widget-a-g__label {
font-size: 16px;
}
/*
Variations
ヴィジェット・Ｂ - 復刊Cobalt『伯爵と妖精 特集』モーダルウィンドウ
Markup:
完結10年記念特設サイトの特別企画、【復刊Cobalt『伯爵と妖精』特集 ～あまい言葉にご用心！～】 を大公開！ リディアとエドガー、二人の愛の物語に登場した名言を、いくつか抜粋してご紹介！ 気になる場面の詳細は、ぜひ書籍にてご確認ください！
block-widget-b-a - デフォルトスタイル
Style guide: block.widget.b.a
*/
.block-widget-b-a__read {
padding: 0 40px;
}
.block-widget-b-a__read__text {
font-size: 22px;
color: #969696;
}
.block-widget-b-a__read__text__emphasis {
font-size: 27px;
font-weight: bold;
color: #eda2ac;
}
.block-widget-b-a__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.block-widget-b-a__list__item {
width: calc((100% - 50px) / 2);
margin-bottom: 30px;
padding: 10px;
list-style: none;
}
.block-widget-b-a__list__item__box {
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.block-widget-b-a__list__item__text {
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 0 10px;
}
.block-widget-b-a__button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.block-widget-b-a__button:hover {
opacity: 0.7;
}
.block-widget-b-a__text {
font-weight: bold;
}
.block-widget-b-a__text--a {
display: inline-block;
margin: 0 auto;
font-size: 38px;
font-weight: bold;
text-align: left;
white-space: nowrap;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
color: #eda2ac;
}
.block-widget-b-a__text--b {
display: inline-block;
margin: 0 auto;
font-size: 32px;
font-weight: bold;
text-align: left;
white-space: nowrap;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
color: #eda2ac;
}
.block-widget-b-a__text--c {
display: inline-block;
margin: 0 auto;
font-size: 20px;
font-weight: bold;
text-align: left;
white-space: nowrap;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
color: #eda2ac;
}
.block-widget-b-a__text--d {
display: inline-block;
margin: 0 auto;
font-size: 24px;
font-weight: bold;
text-align: left;
white-space: nowrap;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
color: #eda2ac;
}
.block-widget-b-a__pict {
width: 240px;
height: 320px;
margin: 0 auto;
}
.block-widget-b-a__modal {
display: none;
width: 100%;
height: 100vh;
position: fixed;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
z-index: 99999;
left: 0;
top: 0;
}
.block-widget-b-a__modal__bg {
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.block-widget-b-a__flex {
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: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block-widget-b-a__flex__column:nth-child(1) {
min-width: 415px;
-webkit-box-flex: 0.8;
-ms-flex-positive: 0.8;
flex-grow: 0.8;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin: 0 auto;
padding-right: 20px;
}
.block-widget-b-a__flex__column:nth-child(2) {
-webkit-box-flex: 3;
-ms-flex-positive: 3;
flex-grow: 3;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.block-widget-b-a__detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.block-widget-b-a__detail__column {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.block-widget-b-a__description {
font-size: 16px;
line-height: 1.7;
}
.block-widget-b-a__description__label {
font-size: 18px;
font-weight: bold;
color: #eda2ac;
}
/*
Variations
ヴィジェット・C - モーダルウィンドウ
Markup:
01 『伯爵と妖精 あいつは優雅な大悪党』 リディアは、妖精が見えて、彼らと話ができる女の子。父に会うためロンドン行きの船に乗った彼女は、突然現れた若い男に誘拐されてしまう。エドガーと名乗るその男は、自分は伯爵だと言い、彼の身分を明かすための宝剣探しをリディアに依頼する。胡散臭いと思いながらも、彼と契約してしまうリディア。一方ちまたでは凶悪な強盗事件が噂になっていた。犯人の特徴はエドガーに似ていて…⁉
『伯爵と妖精 あいつは優雅な大悪党』 リディアは、妖精が見えて、彼らと話ができる女の子。父に会うためロンドン行きの船に乗った彼女は、突然現れた若い男に誘拐されてしまう。エドガーと名乗るその男は、自分は伯爵だと言い、彼の身分を明かすための宝剣探しをリディアに依頼する。胡散臭いと思いながらも、彼と契約してしまうリディア。一方ちまたでは凶悪な強盗事件が噂になっていた。犯人の特徴はエドガーに似ていて…⁉
block-widget-c-a - デフォルトスタイル
Style guide: block.widget.c.a
*/
.block-widget-c-a__container {
padding: 40px;
background: #fff;
border-radius: 50%;
}
.block-widget-c-a__container__b {
padding: 40px;
background: #fff;
border-radius: 10px;
}
.block-widget-c-a__close {
position: absolute;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
background-color: #ddd;
border-radius: 15px;
}
.block-widget-c-a__close:hover {
background: #a79060;
}
.block-widget-c-a__close__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
color: #fff;
}
.block-widget-c-a__modal {
display: none;
width: 100%;
height: 100vh;
position: fixed;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
z-index: 99999;
left: 0;
top: 0;
}
.block-widget-c-a__modal__bg {
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.block-widget-c-a__modal__container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 760px;
}
.block-widget-c-a__modal__container__b {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 1000px;
}
.block-widget-c-a__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 10px;
}
.block-widget-c-a__title__number {
min-width: calc(10% - 3px);
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
font-size: 24px;
font-weight: bold;
}
.block-widget-c-a__title__label {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-size: 16px;
font-weight: bold;
}
.block-widget-c-a__description {
font-size: 16px;
line-height: 1.7;
}
.block-widget-c-a__button {
width: 60%;
color: #fff;
background: #eda2ac;
border-radius: 25px;
margin: 0 auto;
}
.block-widget-c-a__button:hover {
background: #a79060;
}
.block-widget-c-a__button__label {
font-size: 18px;
font-weight: bold;
padding: 10px 0;
}
.block-widget-c-a__flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.block-widget-c-a__flex__column:nth-child(1) {
min-width: 240px;
-webkit-box-flex: 0.8;
-ms-flex-positive: 0.8;
flex-grow: 0.8;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin: 0 auto;
}
.block-widget-c-a__flex__column:nth-child(2) {
-webkit-box-flex: 3;
-ms-flex-positive: 3;
flex-grow: 3;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
padding-right: 20px;
}
.block-widget-c-a__detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.block-widget-c-a__detail__column {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.block-widget-c-a__pict {
width: 100%;
margin: 0 auto;
}
.block-widget-c-a__frame-a {
background: #a79060;
background: linear-gradient(135deg, transparent 15px, #a79060 0) top left, linear-gradient(-135deg, transparent 15px, #a79060 0) top right, linear-gradient(-45deg, transparent 15px, #a79060 0) bottom right, linear-gradient(45deg, transparent 15px, #a79060 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.block-widget-c-a__frame-b {
margin: 5px;
background: #fff;
background: linear-gradient(135deg, transparent 13px, #fff 0) top left, linear-gradient(-135deg, transparent 13px, #fff 0) top right, linear-gradient(-45deg, transparent 13px, #fff 0) bottom right, linear-gradient(45deg, transparent 13px, #fff 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.block-widget-c-a__frame-c {
margin: 5px;
background: #a79060;
background: linear-gradient(135deg, transparent 11px, #a79060 0) top left, linear-gradient(-135deg, transparent 11px, #a79060 0) top right, linear-gradient(-45deg, transparent 11px, #a79060 0) bottom right, linear-gradient(45deg, transparent 11px, #a79060 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.block-widget-c-a__frame-d {
margin: 2px;
background: #fff;
background: linear-gradient(135deg, transparent 10px, #fff 0) top left, linear-gradient(-135deg, transparent 10px, #fff 0) top right, linear-gradient(-45deg, transparent 10px, #fff 0) bottom right, linear-gradient(45deg, transparent 10px, #fff 0) bottom left;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
/*
Variations
ヴィジェット・D - Twitterアイテム周り
Markup:
block-widget-d-a - デフォルトスタイル
Style guide: block.widget.d.a
*/
.block-widget-d-a__button {
display: block;
width: 660px;
margin: 0 auto;
pointer-events: auto;
}
.block-widget-d-a__button:hover {
opacity: 0.7;
}
.block-widget-d-a__item {
position: relative;
display: block;
width: 792px;
height: 54px;
margin: 0 auto;
background-image: url("../images/_common/item_c_b.svg");
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
top: -27px;
}
.block-widget-d-a__head-border {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block-widget-d-a__head-border:before,
.block-widget-d-a__head-border:after {
content: "";
height: 2px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: #a79060;
}
.block-widget-d-a__head-border:before {
margin-right: 1rem;
}
.block-widget-d-a__head-border:after {
margin-left: 1rem;
}
.block-widget-d-a__lead {
padding: 15px 0 20px;
border-bottom: 2px solid #a79060;
}
.block-widget-d-a__lead__label {
font-size: 18px;
font-weight: bold;
text-align: center;
}
.block-widget-d-a__twitter {
display: block;
width: 40%;
margin: 0 auto;
padding: 20px 0 0;
}
.block-widget-d-a__follow {
margin: 0 auto 10px;
padding: 10px 0;
background-color: #1d9bf0;
color: #fff;
border-radius: 5px;
}
.block-widget-d-a__follow__label {
font-size: 16px;
font-weight: bold;
text-align: center;
}
.block-widget-d-a__tweet {
margin: 10px auto;
text-align: center;
}
/*
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-top0to5 - 上に 0-5 のレスポンシブ・マージン
hepler--margin-right0to5 - 右に 0-5 のレスポンシブ・マージン
hepler--margin-bottom0to5 - 下に 0-5 のレスポンシブ・マージン
hepler--margin-left0to5 - 左に 0-5 のレスポンシブ・マージン
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-top50to20 - 上に 50-20 のレスポンシブ・マージン
helper--margin-right50to20 - 右に 50-20 のレスポンシブ・マージン
helper--margin-bottom50to20 - 下に 50-20 のレスポンシブ・マージン
helper--margin-left50to20 - 左に 50-20 のレスポンシブ・マージン
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-top0to5 {
margin-top: 0px !important;
}
.helper--margin-left0to5 {
margin-left: 0px !important;
}
.helper--margin-bottom0to5 {
margin-bottom: 0px !important;
}
.helper--margin-right0to5 {
margin-right: 0px !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-top50to20 {
margin-top: 50px !important;
}
.helper--margin-left50to20 {
margin-left: 50px !important;
}
.helper--margin-bottom50to20 {
margin-bottom: 50px !important;
}
.helper--margin-right50to20 {
margin-right: 50px !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-top35to15 - 上に 35-15 のレスポンシブ・パディング
helper--padding-right35to15 - 右に 35-15 のレスポンシブ・パディング
helper--padding-bottom35to15 - 下に 35-15 のレスポンシブ・パディング
helper--padding-left35to15 - 左に 35-15 のレスポンシブ・パディング
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-top40to25 - 上に 40-25 のレスポンシブ・パディング
helper--padding-right40to25 - 右に 40-25 のレスポンシブ・パディング
helper--padding-bottom40to25 - 下に 40-25 のレスポンシブ・パディング
helper--padding-left40to25 - 左に 40-25 のレスポンシブ・パディング
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-top50to35 - 上に 50-35 のレスポンシブ・パディング
helper--padding-right50to35 - 右に 50-35 のレスポンシブ・パディング
helper--padding-bottom50to35 - 下に 50-35 のレスポンシブ・パディング
helper--padding-left50to35 - 左に 50-35 のレスポンシブ・パディング
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-top35to15 {
padding-top: 35px !important;
}
.helper--padding-left35to15 {
padding-left: 35px !important;
}
.helper--padding-bottom35to15 {
padding-bottom: 35px !important;
}
.helper--padding-right35to15 {
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-top50to35 {
padding-top: 50px !important;
}
.helper--padding-left50to35 {
padding-left: 50px !important;
}
.helper--padding-bottom50to35 {
padding-bottom: 50px !important;
}
.helper--padding-right50to35 {
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-top40to25 {
padding-top: 40px !important;
}
.helper--padding-left40to25 {
padding-left: 40px !important;
}
.helper--padding-bottom40to25 {
padding-bottom: 40px !important;
}
.helper--padding-right40to25 {
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-pc-under - スマホ`横`サイズ`以下`は非表示
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:
