`タグが使われるようなメインコンテンツのスタイルです。 * sidebar...`

`タグが使われるようなサイドバーのスタイルです。 * section...`

`要素を使うようなセクションの余白を管理します。 * * COMPONENT * wrapper...最大幅を指定します。 * layout...汎用的なレイアウトオブジェクトです。グリッドレイアウトなどに使用できます。 * media...画像とテキストが横並びになるオブジェクトです。テキストを画像に回り込みさせます。 * flag...画像とテキストが横並びになるオブジェクトです。縦方向の指定ができます。 * list-unstyled...`

`タグのスタイルです。ロゴやグローバルナビゲーションのレイアウトを含むことはできますが、コンポーネント自体はobject/projectレイヤーで定義します。 ```block

logo

``` */ .l-header { position: fixed; z-index: 2; width: 100%; padding: 1.5rem 30px; -webkit-transition: all .3s ease; transition: all .3s ease; } .l-header.fixed { background-color: rgba(0, 0, 0, .9); } @media screen and (max-width: 767px) { .l-header { height: 60px; padding: .5rem 0; background-color: rgba(0, 0, 0, .9); } } /* #Footer -------------------------------------------------------------------------- */ /*doc --- title: footer name: footer categories: [layout] --- ``タグ直下にある`

`タグのスタイルです。コピーライトやナビゲーションのレイアウトを含むことはできますが、コンポーネント自体はobject/projectレイヤーで定義します。 ```block ``` */ .l-footer { padding: 6rem 0; background-color: #222; } @media screen and (max-width: 767px) { .l-footer { padding: 3rem 0; } } /* #Main -------------------------------------------------------------------------- */ /*doc --- title: main name: main categories: [layout] --- `

`タグのスタイルです。ドキュメントのメインコンテンツを示し、ドキュメント内で1つしか記述できません。

タグや

タグなどの中に入れることはできません。取り扱いの難しいタグなので、使わないという選択をするのもいいでしょう。 ```block

``` */ /* #Content -------------------------------------------------------------------------- */ /*doc --- title: content name: content categories: [layout] --- `

`タグが使われるようなメインコンテンツのスタイルです。ナビゲーションやバナーなどのレイアウトを含むことはできますが、コンポーネント自体はobject/projectレイヤーで定義します。 ```block

``` */ /* #Sidebar -------------------------------------------------------------------------- */ /*doc --- title: sidebar name: sidebar categories: [layout] --- `

`タグが使われるようなサイドバーのスタイルです。ナビゲーションやバナーなどのレイアウトを含むことはできますが、コンポーネント自体はobject/projectレイヤーで定義します。 ```block

``` */ /* #Section -------------------------------------------------------------------------- */ /*doc --- title: section name: section categories: [layout] --- `

`タグを使うようなセクションの余白（`margin`）を管理します。コンポーネント単位での余白はobject/utility/_margin.scssで管理をします。サイズはデフォルトで3つ、最大で5つとします。 1. tiny(optional) 2. small 3. medium(default) 4. large 5. huge(optional) Modifierなしをmedium、変更する場合にはModifierを指定します。 ```block

見出し2

``` */ /* ============================================================================= #Object ========================================================================== */ /** * Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、 * 拡張性などによって、4つのレイヤーにわけられます。 * それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。 * 1. Component（`c-`） * 2. Project（`p-`） * 3. Scope(`s-`) * 4. Utility（`u-`） * * ランディングページのようにページ特有のスタイルを多く含む場合は、 * ページ専用のCSSファイルを作成することもできます。 * ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、 * プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。 */ /* ----------------------------------------------------------------------------- #Component -------------------------------------------------------------------------- */ /** * Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。 * OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。 * また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。 * 例えばgridやmediaといったレイアウトパターンが該当します。 * プレフィックス（接頭辞）として`c-`をつけます。 */ /* #Wrapper -------------------------------------------------------------------------- */ /*doc --- title: wrapper name: wrapper categories: [component] --- 横幅を制限するオブジェクトです。 Modifierは以下のとおりです。 * 左右の余白を追加 `--small`, `--medium`, `--large` ```block

c-wrapper

c-wrapper c-wrapper--medium

c-wrapper u-8of12

``` */ .c-wrapper { width: 100%; max-width: 1200px; margin-right: auto; margin-left: auto; } .c-wrapper--small { padding-right: 7.5px; padding-left: 7.5px; } .c-wrapper--medium { padding-right: 15px; padding-left: 15px; } .c-wrapper--large { padding-right: 30px; padding-left: 30px; } /* #Layout -------------------------------------------------------------------------- */ /*doc --- title: layout name: layout categories: [component] --- 汎用的なレイアウトオブジェクトです。`width`の変更はUtilityレイヤーで指定します。 Modifierは以下のとおりです。 * ガターの追加 `--small`, `--medium`, `--large` * text-alignの変更 `--middle`, `--bottom` * 配置を反転 `--reverse` * `.c-layout__item`のカラム幅をまとめて指定 `--colx`, `--colxandx` ```block

c-layout__item u-8of12-md

c-layout__item u-4of12-md

c-layout--rev c-layout__item u-8of12-md

c-layout--rev c-layout__item u-4of12-md

c-layout--center c-layout__item u-8of12-md

c-layout__item c-layout--col2-sm c-layout--col3-md

c-layout__item u-8of12-md

c-layout__item u-4of12-md

``` */ .c-layout { font-size: 0; display: block; margin: 0; padding: 0; list-style-type: none; } .c-layout__item { font-size: medium; font-size: 1rem; display: inline-block; width: 100%; vertical-align: top; } /** * ガターを3つのパリエーションから選択します。 */ .c-layout--small { margin-left: -7.5px; } .c-layout--small > .c-layout__item { padding-left: 7.5px; } .c-layout--medium { margin-left: -15px; } .c-layout--medium > .c-layout__item { padding-left: 15px; } .c-layout--large { margin-left: -30px; } .c-layout--large > .c-layout__item { padding-left: 30px; } /** * 垂直位置を2つのパリエーションから選択します（デフォルトは`top`）。 */ .c-layout--middle > .c-layout__item { vertical-align: middle; } .c-layout--bottom > .c-layout__item { vertical-align: bottom; } /** * 要素を中央配置にします（デフォルトは`left`）。 */ .c-layout--center { text-align: center; } .c-layout--center > .c-layout__item { text-align: left; } /** * 要素を右端寄せにします（デフォルトは`left`）。 */ .c-layout--right { text-align: right; } .c-layout--right > .c-layout__item { text-align: left; } /** * `.c-layout__item`のカラム数をまとめて指定します。 */ .c-layout--col2 > .c-layout__item { width: 50%; } @media screen and (min-width: 375px) { .c-layout--col2-xs > .c-layout__item { width: 50%; } } @media screen and (min-width: 400px) { .c-layout--col2-sm > .c-layout__item { width: 50%; } } @media screen and (min-width: 768px) { .c-layout--col2-md > .c-layout__item { width: 50%; } } @media screen and (min-width: 1000px) { .c-layout--col2-lg > .c-layout__item { width: 50%; } } @media screen and (min-width: 1200px) { .c-layout--col2-xl > .c-layout__item { width: 50%; } } .c-layout--col3 > .c-layout__item { width: 33.33333%; } @media screen and (min-width: 375px) { .c-layout--col3-xs > .c-layout__item { width: 33.33333%; } } @media screen and (min-width: 400px) { .c-layout--col3-sm > .c-layout__item { width: 33.33333%; } } @media screen and (min-width: 768px) { .c-layout--col3-md > .c-layout__item { width: 33.33333%; } } @media screen and (min-width: 1000px) { .c-layout--col3-lg > .c-layout__item { width: 33.33333%; } } @media screen and (min-width: 1200px) { .c-layout--col3-xl > .c-layout__item { width: 33.33333%; } } .c-layout--col4 > .c-layout__item { width: 25%; } @media screen and (min-width: 375px) { .c-layout--col4-xs > .c-layout__item { width: 25%; } } @media screen and (min-width: 400px) { .c-layout--col4-sm > .c-layout__item { width: 25%; } } @media screen and (min-width: 768px) { .c-layout--col4-md > .c-layout__item { width: 25%; } } @media screen and (min-width: 1000px) { .c-layout--col4-lg > .c-layout__item { width: 25%; } } @media screen and (min-width: 1200px) { .c-layout--col4-xl > .c-layout__item { width: 25%; } } .c-layout--col2and10 > .c-layout__item:nth-child(odd) { width: 16.66667%; } .c-layout--col2and10 > .c-layout__item:nth-child(even) { width: 83.33333%; } @media screen and (min-width: 375px) { .c-layout--col2and10-xs > .c-layout__item:nth-child(odd) { width: 16.66667%; } .c-layout--col2and10-xs > .c-layout__item:nth-child(even) { width: 83.33333%; } } @media screen and (min-width: 400px) { .c-layout--col2and10-sm > .c-layout__item:nth-child(odd) { width: 16.66667%; } .c-layout--col2and10-sm > .c-layout__item:nth-child(even) { width: 83.33333%; } } @media screen and (min-width: 768px) { .c-layout--col2and10-md > .c-layout__item:nth-child(odd) { width: 16.66667%; } .c-layout--col2and10-md > .c-layout__item:nth-child(even) { width: 83.33333%; } } @media screen and (min-width: 1000px) { .c-layout--col2and10-lg > .c-layout__item:nth-child(odd) { width: 16.66667%; } .c-layout--col2and10-lg > .c-layout__item:nth-child(even) { width: 83.33333%; } } @media screen and (min-width: 1200px) { .c-layout--col2and10-xl > .c-layout__item:nth-child(odd) { width: 16.66667%; } .c-layout--col2and10-xl > .c-layout__item:nth-child(even) { width: 83.33333%; } } .c-layout--col3and9 > .c-layout__item:nth-child(odd) { width: 25%; } .c-layout--col3and9 > .c-layout__item:nth-child(even) { width: 75%; } @media screen and (min-width: 375px) { .c-layout--col3and9-xs > .c-layout__item:nth-child(odd) { width: 25%; } .c-layout--col3and9-xs > .c-layout__item:nth-child(even) { width: 75%; } } @media screen and (min-width: 400px) { .c-layout--col3and9-sm > .c-layout__item:nth-child(odd) { width: 25%; } .c-layout--col3and9-sm > .c-layout__item:nth-child(even) { width: 75%; } } @media screen and (min-width: 768px) { .c-layout--col3and9-md > .c-layout__item:nth-child(odd) { width: 25%; } .c-layout--col3and9-md > .c-layout__item:nth-child(even) { width: 75%; } } @media screen and (min-width: 1000px) { .c-layout--col3and9-lg > .c-layout__item:nth-child(odd) { width: 25%; } .c-layout--col3and9-lg > .c-layout__item:nth-child(even) { width: 75%; } } @media screen and (min-width: 1200px) { .c-layout--col3and9-xl > .c-layout__item:nth-child(odd) { width: 25%; } .c-layout--col3and9-xl > .c-layout__item:nth-child(even) { width: 75%; } } .c-layout--col4and8 > .c-layout__item:nth-child(odd) { width: 33.33333%; } .c-layout--col4and8 > .c-layout__item:nth-child(even) { width: 66.66667%; } @media screen and (min-width: 375px) { .c-layout--col4and8-xs > .c-layout__item:nth-child(odd) { width: 33.33333%; } .c-layout--col4and8-xs > .c-layout__item:nth-child(even) { width: 66.66667%; } } @media screen and (min-width: 400px) { .c-layout--col4and8-sm > .c-layout__item:nth-child(odd) { width: 33.33333%; } .c-layout--col4and8-sm > .c-layout__item:nth-child(even) { width: 66.66667%; } } @media screen and (min-width: 768px) { .c-layout--col4and8-md > .c-layout__item:nth-child(odd) { width: 33.33333%; } .c-layout--col4and8-md > .c-layout__item:nth-child(even) { width: 66.66667%; } } @media screen and (min-width: 1000px) { .c-layout--col4and8-lg > .c-layout__item:nth-child(odd) { width: 33.33333%; } .c-layout--col4and8-lg > .c-layout__item:nth-child(even) { width: 66.66667%; } } @media screen and (min-width: 1200px) { .c-layout--col4and8-xl > .c-layout__item:nth-child(odd) { width: 33.33333%; } .c-layout--col4and8-xl > .c-layout__item:nth-child(even) { width: 66.66667%; } } .c-layout--col5and7 > .c-layout__item:nth-child(odd) { width: 41.66667%; } .c-layout--col5and7 > .c-layout__item:nth-child(even) { width: 58.33333%; } @media screen and (min-width: 375px) { .c-layout--col5and7-xs > .c-layout__item:nth-child(odd) { width: 41.66667%; } .c-layout--col5and7-xs > .c-layout__item:nth-child(even) { width: 58.33333%; } } @media screen and (min-width: 400px) { .c-layout--col5and7-sm > .c-layout__item:nth-child(odd) { width: 41.66667%; } .c-layout--col5and7-sm > .c-layout__item:nth-child(even) { width: 58.33333%; } } @media screen and (min-width: 768px) { .c-layout--col5and7-md > .c-layout__item:nth-child(odd) { width: 41.66667%; } .c-layout--col5and7-md > .c-layout__item:nth-child(even) { width: 58.33333%; } } @media screen and (min-width: 1000px) { .c-layout--col5and7-lg > .c-layout__item:nth-child(odd) { width: 41.66667%; } .c-layout--col5and7-lg > .c-layout__item:nth-child(even) { width: 58.33333%; } } @media screen and (min-width: 1200px) { .c-layout--col5and7-xl > .c-layout__item:nth-child(odd) { width: 41.66667%; } .c-layout--col5and7-xl > .c-layout__item:nth-child(even) { width: 58.33333%; } } /** * 要素を右から配置させます（HTMLの記述を反転させた状態でレイアウトされます）。 */ .c-layout--reverse { text-align: left; direction: rtl; } .c-layout--reverse > .c-layout__item { text-align: left; direction: ltr; } @media screen and (min-width: 375px) { .c-layout--reverse-xs { text-align: left; direction: rtl; } .c-layout--reverse-xs > .c-layout__item { text-align: left; direction: ltr; } } @media screen and (min-width: 400px) { .c-layout--reverse-sm { text-align: left; direction: rtl; } .c-layout--reverse-sm > .c-layout__item { text-align: left; direction: ltr; } } @media screen and (min-width: 768px) { .c-layout--reverse-md { text-align: left; direction: rtl; } .c-layout--reverse-md > .c-layout__item { text-align: left; direction: ltr; } } @media screen and (min-width: 1000px) { .c-layout--reverse-lg { text-align: left; direction: rtl; } .c-layout--reverse-lg > .c-layout__item { text-align: left; direction: ltr; } } @media screen and (min-width: 1200px) { .c-layout--reverse-xl { text-align: left; direction: rtl; } .c-layout--reverse-xl > .c-layout__item { text-align: left; direction: ltr; } } /* #Media -------------------------------------------------------------------------- */ /*doc --- title: media name: media categories: [component] --- 画像とテキストを横並びにするオブジェクトです。 `c-flag`オブジェクトと違うのは、縦方向の指定ができないこと、（デフォルトで）テキストが画像に回り込みすることです。 Modifierは以下のとおりです。 * 余白の変更 `--small`, `--large` * 配置を反転 `--reverse` HTMLは画像・テキストの順番で記述して、Modifierでレイアウトを変更します。 ```block

画像・テキストの順番でマークアップします。

画像・テキストの順番でマークアップします。.c-media--reverseを指定すると画像が右側になります。

``` */ .c-media { display: block; margin: 0; padding: 0; } .c-media:after { display: block; clear: both; content: ''; } .c-media__image { float: left; margin: 0; margin-right: 15px; padding: 0; } .c-media__image > img { display: block; } .c-media__body { display: block; margin: 0; padding: 0; } .c-media__body > :last-child { margin-bottom: 0; } /** * 要素間の余白を変更します。 */ .c-media--small > .c-media__image { margin-right: 7.5px; } .c-media--large > .c-media__image { margin-right: 30px; } /** * 横並びになった要素を右から左の順番でレイアウトします。 */ .c-media--reverse > .c-media__image { float: right; margin-right: 0; margin-left: 15px; } .c-media--reverse.c-media--small > .c-media__image { margin-left: 7.5px; } .c-media--reverse.c-media--large > .c-media__image { margin-left: 30px; } @media screen and (min-width: 375px) { .c-media--reverse-xs > .c-media__image { float: right; margin-right: 0; margin-left: 15px; } .c-media--reverse-xs.c-media--small > .c-media__image { margin-left: 7.5px; } .c-media--reverse-xs.c-media--large > .c-media__image { margin-left: 30px; } } @media screen and (min-width: 400px) { .c-media--reverse-sm > .c-media__image { float: right; margin-right: 0; margin-left: 15px; } .c-media--reverse-sm.c-media--small > .c-media__image { margin-left: 7.5px; } .c-media--reverse-sm.c-media--large > .c-media__image { margin-left: 30px; } } @media screen and (min-width: 768px) { .c-media--reverse-md > .c-media__image { float: right; margin-right: 0; margin-left: 15px; } .c-media--reverse-md.c-media--small > .c-media__image { margin-left: 7.5px; } .c-media--reverse-md.c-media--large > .c-media__image { margin-left: 30px; } } @media screen and (min-width: 1000px) { .c-media--reverse-lg > .c-media__image { float: right; margin-right: 0; margin-left: 15px; } .c-media--reverse-lg.c-media--small > .c-media__image { margin-left: 7.5px; } .c-media--reverse-lg.c-media--large > .c-media__image { margin-left: 30px; } } @media screen and (min-width: 1200px) { .c-media--reverse-xl > .c-media__image { float: right; margin-right: 0; margin-left: 15px; } .c-media--reverse-xl.c-media--small > .c-media__image { margin-left: 7.5px; } .c-media--reverse-xl.c-media--large > .c-media__image { margin-left: 30px; } } /* #Flag -------------------------------------------------------------------------- */ /*doc --- title: flag name: flag categories: [component] --- 画像とテキストを横並びにするオブジェクトです。縦方向の指定ができます。 Modifierは以下のとおりです。 * 余白の変更 `--small`, `--large` * vertical-alignの変更 `--middle`, `--bottom` * 配置を反転 `--reverse` * 横並びからブロック `--stack` HTMLは画像・テキストの順番で記述して、Modifierでレイアウトを変更します。ブレイクポイントは`stack`のみ`max-width`が指定されています。 ```block

画像とテキストを横並びにするオブジェクトです。
余白サイズ、垂直方向、要素の配置順の反転の指定ができます。

画像とテキストを中央揃え、mdから画像を右側に反転させます。

md未満で横並びから縦にレイアウトさせます。

``` */ .c-flag { display: table; width: 100%; margin: 0; padding: 0; } .c-flag__image { display: table-cell; width: 1px; margin: 0; padding: 0; padding-right: 15px; vertical-align: top; } .c-flag__image > img { max-width: none; } .c-flag__body { display: table-cell; width: auto; margin: 0; padding: 0; vertical-align: top; } .c-flag__body > :last-child { margin-bottom: 0; } /** * 垂直位置を2つのパリエーションから選択します（デフォルトは`top`）。 */ .c-flag--middle > .c-flag__image, .c-flag--middle > .c-flag__body { vertical-align: middle; } .c-flag--bottom > .c-flag__image, .c-flag--bottom > .c-flag__body { vertical-align: bottom; } /** * 要素間の余白を変更します。 */ .c-flag--small > .c-flag__image { padding-right: 7.5px; } .c-flag--large > .c-flag__image { padding-right: 30px; } /** * 横並びになった要素を右から左の順番でレイアウトされます（right to left）。 */ .c-flag--reverse { text-align: left; direction: rtl; } .c-flag--reverse > .c-flag__image, .c-flag--reverse > .c-flag__body { text-align: left; direction: ltr; } .c-flag--reverse > .c-flag__image { padding-right: 0; padding-left: 15px; } .c-flag--reverse.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 7.5px; } .c-flag--reverse.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 30px; } @media screen and (min-width: 375px) { .c-flag--reverse-xs { text-align: left; direction: rtl; } .c-flag--reverse-xs > .c-flag__image, .c-flag--reverse-xs > .c-flag__body { text-align: left; direction: ltr; } .c-flag--reverse-xs > .c-flag__image { padding-right: 0; padding-left: 15px; } .c-flag--reverse-xs.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 7.5px; } .c-flag--reverse-xs.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 30px; } } @media screen and (min-width: 400px) { .c-flag--reverse-sm { text-align: left; direction: rtl; } .c-flag--reverse-sm > .c-flag__image, .c-flag--reverse-sm > .c-flag__body { text-align: left; direction: ltr; } .c-flag--reverse-sm > .c-flag__image { padding-right: 0; padding-left: 15px; } .c-flag--reverse-sm.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 7.5px; } .c-flag--reverse-sm.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 30px; } } @media screen and (min-width: 768px) { .c-flag--reverse-md { text-align: left; direction: rtl; } .c-flag--reverse-md > .c-flag__image, .c-flag--reverse-md > .c-flag__body { text-align: left; direction: ltr; } .c-flag--reverse-md > .c-flag__image { padding-right: 0; padding-left: 15px; } .c-flag--reverse-md.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 7.5px; } .c-flag--reverse-md.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 30px; } } @media screen and (min-width: 1000px) { .c-flag--reverse-lg { text-align: left; direction: rtl; } .c-flag--reverse-lg > .c-flag__image, .c-flag--reverse-lg > .c-flag__body { text-align: left; direction: ltr; } .c-flag--reverse-lg > .c-flag__image { padding-right: 0; padding-left: 15px; } .c-flag--reverse-lg.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 7.5px; } .c-flag--reverse-lg.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 30px; } } @media screen and (min-width: 1200px) { .c-flag--reverse-xl { text-align: left; direction: rtl; } .c-flag--reverse-xl > .c-flag__image, .c-flag--reverse-xl > .c-flag__body { text-align: left; direction: ltr; } .c-flag--reverse-xl > .c-flag__image { padding-right: 0; padding-left: 15px; } .c-flag--reverse-xl.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 7.5px; } .c-flag--reverse-xl.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 30px; } } /** * 横並びから縦にレイアウトされます。 */ .c-flag--stack { display: block; } .c-flag--stack > .c-flag__image, .c-flag--stack > .c-flag__body { display: block; width: 100%; } .c-flag--stack > .c-flag__image { margin-bottom: 15px; padding-right: 0; padding-left: 0; } .c-flag--stack > .c-flag__image > img { max-width: 100%; } .c-flag--stack.c-flag--small > .c-flag__image { margin-bottom: 7.5px; } .c-flag--stack.c-flag--large > .c-flag__image { margin-bottom: 30px; } @media screen and (max-width: 374px) { .c-flag--stack-xs { display: block; } .c-flag--stack-xs > .c-flag__image, .c-flag--stack-xs > .c-flag__body { display: block; width: 100%; } .c-flag--stack-xs > .c-flag__image { margin-bottom: 15px; padding-right: 0; padding-left: 0; } .c-flag--stack-xs > .c-flag__image > img { max-width: 100%; } .c-flag--stack-xs.c-flag--small > .c-flag__image { margin-bottom: 7.5px; } .c-flag--stack-xs.c-flag--large > .c-flag__image { margin-bottom: 30px; } } @media screen and (max-width: 399px) { .c-flag--stack-sm { display: block; } .c-flag--stack-sm > .c-flag__image, .c-flag--stack-sm > .c-flag__body { display: block; width: 100%; } .c-flag--stack-sm > .c-flag__image { margin-bottom: 15px; padding-right: 0; padding-left: 0; } .c-flag--stack-sm > .c-flag__image > img { max-width: 100%; } .c-flag--stack-sm.c-flag--small > .c-flag__image { margin-bottom: 7.5px; } .c-flag--stack-sm.c-flag--large > .c-flag__image { margin-bottom: 30px; } } @media screen and (max-width: 767px) { .c-flag--stack-md { display: block; } .c-flag--stack-md > .c-flag__image, .c-flag--stack-md > .c-flag__body { display: block; width: 100%; } .c-flag--stack-md > .c-flag__image { margin-bottom: 15px; padding-right: 0; padding-left: 0; } .c-flag--stack-md > .c-flag__image > img { max-width: 100%; } .c-flag--stack-md.c-flag--small > .c-flag__image { margin-bottom: 7.5px; } .c-flag--stack-md.c-flag--large > .c-flag__image { margin-bottom: 30px; } } @media screen and (max-width: 999px) { .c-flag--stack-lg { display: block; } .c-flag--stack-lg > .c-flag__image, .c-flag--stack-lg > .c-flag__body { display: block; width: 100%; } .c-flag--stack-lg > .c-flag__image { margin-bottom: 15px; padding-right: 0; padding-left: 0; } .c-flag--stack-lg > .c-flag__image > img { max-width: 100%; } .c-flag--stack-lg.c-flag--small > .c-flag__image { margin-bottom: 7.5px; } .c-flag--stack-lg.c-flag--large > .c-flag__image { margin-bottom: 30px; } } @media screen and (max-width: 1199px) { .c-flag--stack-xl { display: block; } .c-flag--stack-xl > .c-flag__image, .c-flag--stack-xl > .c-flag__body { display: block; width: 100%; } .c-flag--stack-xl > .c-flag__image { margin-bottom: 15px; padding-right: 0; padding-left: 0; } .c-flag--stack-xl > .c-flag__image > img { max-width: 100%; } .c-flag--stack-xl.c-flag--small > .c-flag__image { margin-bottom: 7.5px; } .c-flag--stack-xl.c-flag--large > .c-flag__image { margin-bottom: 30px; } } /* #List-unstyled -------------------------------------------------------------------------- */ /*doc --- title: list-unstyled name: list-unstyled categories: [component] --- `

リスト1
- リスト1.1
  - リスト1.1.1
  - リスト1.1.2
- リスト1.2
リスト2
リスト3

リスト1
1. リスト1.1
  1. リスト1.1.1
  2. リスト1.1.2
2. リスト1.2
リスト2

リスト1
- リスト1.1
- リスト1.2

th1	th2	th3
td1	td2	td3

`と`aria-hidden="true"`でマークアップをします。意味を伝えたいアイコンは`aria-label=""`でマークアップします。テキスト全体を読み上げたときに違和感が出ないようにします。テキストを表示できない場合は`.u-sr-only`でテキストをマークアップします（非表示のままスクリーンリーダーには読み上げられます）。 ```block

ホーム

``` */ @font-face { font-family: 'iconfont'; font-weight: normal; font-style: normal; src: url('../font/iconfont.eot'); src: url('../font/iconfont-1.eot') format('eot'), url('../font/iconfont.woff') format('woff'), url('../font/iconfont.ttf') format('truetype'), url('../font/iconfont.svg') format('svg'); } /* `p-icon p-icon--icon-name`のようなマルチクラスで指定します。 */ .p-icon:before { font-family: 'iconfont'; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; position: relative; top: -.1em; display: inline-block; vertical-align: middle; text-decoration: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; } .p-icon--external:before { content: ''; } .p-icon--home:before { content: ''; } .p-icon--linkedin:before { content: ''; } /* アイコンのModifer */ /* #Button -------------------------------------------------------------------------- */ /*doc --- title: button name: button categories: [project] --- ボタンコンポーネントです。 Modifierは以下のとおりです。 * 100%表示 `--full` * 真円 `--circle` * 楕円 `--pill`, `--pill-right`, `--pill-center`, `--pill-left` ```block

p-button p-button--full

``` */ .p-button { font-family: inherit; font-size: inherit; line-height: 1; display: inline-block; margin: 0; padding: 1rem 3rem; cursor: pointer; -webkit-transition: all .3s ease; transition: all .3s ease; text-align: center; text-decoration: none; color: inherit; border: 1px solid #fff; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .p-button:hover, .p-button:active, .p-button:focus { text-decoration: none; opacity: .5; color: #fff; } .p-button:disabled, .p-button.is-disabled { pointer-events: none; opacity: .5; } .p-button--full { width: 100%; } .p-button--circle { border-radius: 50%; } /** * カプセル状の錠剤のような形をしたボタンコンポーネントです。 */ .p-button--pill { border-radius: 3em; } .p-button--pill-right { border-radius: 0 3em 3em 0; } .p-button--pill-center { border-radius: 0; } .p-button--pill-left { border-radius: 3em 0 0 3em; } /* #Breadcrumb -------------------------------------------------------------------------- */ /*doc --- title: breadcrumb name: breadcrumb categories: [project] --- パンくずリストのコンポーネントです。横幅を超えると、折り返さず省略されます。 ```block ``` */ .p-breadcrumb { overflow: hidden; margin: 0; padding-left: 0; list-style-type: none; white-space: nowrap; text-overflow: ellipsis; } .p-breadcrumb__item { display: inline-block; } .p-breadcrumb__item:last-child { display: inline; } .p-breadcrumb__link { display: inline-block; } /* 2つ目以降のリストの前に`>`を表示する。 */ .p-breadcrumb__item:not(:first-of-type):before { margin: 0 .5em; content: '\003E'; } /* #Label -------------------------------------------------------------------------- */ /*doc --- title: label name: label categories: [project] --- インラインでメッセージを表示するコンポーネントです。 ```block

タグ名

``` */ .p-label { font-size: .8em; line-height: 1; display: inline-block; padding: .5em; text-align: center; white-space: nowrap; color: #fff; background-color: #222; } /* #Badge -------------------------------------------------------------------------- */ /*doc --- title: badge name: badge categories: [project] --- 投稿数のような数値を表示するバッジコンポーネントです。 ```block 1 10 100 ``` */ .p-badge { font-size: .8em; line-height: 2em; display: inline-block; min-width: 2em; min-height: 2em; padding: 0 .25em; text-align: center; vertical-align: top; white-space: nowrap; color: #fff; border-radius: 50%; background-color: #222; } /* #Box -------------------------------------------------------------------------- */ /*doc --- title: box name: box categories: [project] --- 画像やテキストなどを縦に並べるコンポーネントです。ラベルはデフォルトで右上に配置されます。Modifierで以下のように変更できます。 - 右下 `.p-box__labels--right-bottom` - 左上 `.p-box__labels--left-top` - 左下 `.p-box__labels--left-bottom` ```block

ラベル1
ラベル2

見出し

文章

``` */ .p-box { display: block; } .p-box:after { display: block; clear: both; content: ''; } .p-box__image { position: relative; display: block; } .p-box__image > img { width: 100%; max-width: none; } .p-box__labels { position: absolute; top: 0; right: 0; padding-left: 0; list-style-type: none; } .p-box__labels:after { display: block; clear: both; content: ''; } .p-box__labels--right-bottom { top: auto; bottom: 0; } .p-box__labels--left-top { right: auto; left: 0; } .p-box__labels--left-bottom { top: auto; right: auto; bottom: 0; left: 0; } .p-box__label { float: left; } .p-box__content { display: block; padding: 0; } .p-box__content > :first-child { margin-top: 0; } .p-box__content > :last-child { margin-bottom: 0; } /* #Card -------------------------------------------------------------------------- */ /*doc --- title: card name: card categories: [project] --- カードタイプのコンポーネントです。 ```block

Card Object

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat illo autem, possimus obcaecati numquam sunt ut quas, repellat cum aspernatur voluptatem, a explicabo! Facilis sed quos, nisi rerum placeat ad?

list1
list2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, est.

Card Object

list1
list2

``` */ .p-card { margin: 0 0 7.5px; padding: 0; list-style-type: none; border: 1px solid #ddd; border-radius: 3px; } .p-card__head { padding: 15px; } .p-card__head > :last-child { margin-bottom: 0; } .p-card__body { padding: 15px 15px; } .p-card__body > :last-child { margin-bottom: 0; } .p-card__foot { padding: 15px; border-top: 1px solid #ddd; } .p-card__foot > :last-child { margin-bottom: 0; } .p-card__image, .p-card__image-top, .p-card__image-bottom { width: 100%; max-width: none; } .p-card__head, .p-card__image-top { border-radius: 2px 2px 0 0; } .p-card__foot, .p-card__image-bottom { border-radius: 0 0 2px 2px; } .p-card__list { margin: 0; padding: 0; list-style-type: none; } .p-card__list-item { padding: 15px; border-top: 1px solid #ddd; } .p-card__list-link { display: block; margin: -15px; padding: 15px; } /* ----------------------------------------------------------------------------- #Scope -------------------------------------------------------------------------- */ /** * ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、 * ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、 * ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。 * 例えばブログページのスタイルとして_blog.scssを作成します。 * このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。 * もし、このレイヤーで同じパターンが3箇所で使われていたら、 * ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。 * プレフィックス（接頭辞）として`s-`をつけます。 */ /* #Blog -------------------------------------------------------------------------- */ /** * ブログページのスタイルです。 */ /* ----------------------------------------------------------------------------- #Utility -------------------------------------------------------------------------- */ /** * Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。 * コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。 * `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、 * pxよりもemや%で指定することを推奨します。 * 確実にスタイルを適応させるために`!important`を使用します。 * プレフィックス（接頭辞）として`u-`をつけます。 */ /* ----------------------------------------------------------------------------- #Text -------------------------------------------------------------------------- */ /*doc --- title: text name: text categories: [utility] --- テキストのスタイルを指定する汎用クラスです。 ```block

font-weight 300

font-weight 400

font-weight 700

先頭の1文字目を1文字分字下げします。

2行目以降の1文字目を1文字分字下げします。
2行目以降の1文字目を1文字分字下げします。

テキストを折り返させません。横幅を超えても、このテキストは折り返さずに表示されます。

テキストを折り返させます。長文になっても、このテキストは必ず折り返して表示されます。

テキストを両端揃え（均等割り付け）させます。通常のテキストと文字間が違うのが分かると思います。

記述した通りに表示します。

abcdEFGH すべての英単語を小文字で表示します。

abcdEFGH すべての英単語を大文字で表示します。

abcdEFGH 英単語の先頭を大文字で表示します。

abcdEFGH スモールキャップ（小文字と同じ高さで作られた大文字）で表示します。

abcdEFGH 縦書きで表示します。

abcdEFGH 英文も縦書きにする場合はModifierを指定します。

text-decoration underline

text-align right

text-align center

text-align left

vertical-align top

vertical-align middle

vertical-align bottom

``` */ /* font-weightを指定します。 */ .u-text-light { font-weight: 300 !important; } .u-text-normal { font-weight: 400 !important; } .u-text-bold { font-weight: 700 !important; } /* 先頭の1文字目を1文字分字下げします。 */ .u-text-indent { text-indent: 1em !important; } /* 2行目以降の1文字目を1文字分字下げします。 */ .u-text-note { margin-left: 1em !important; text-indent: -1em !important; } /* テキストを改行させません。 */ .u-text-nowrap { white-space: nowrap !important; } /* テキストを改行させます。 */ .u-text-breakword { word-wrap: break-word !important; overflow-wrap: break-word !important; } /* テキストを両端揃えさせます。 */ .u-text-justify { text-align: justify !important; text-justify: inter-ideograph !important; } /* 記述した通りに表示します。 */ .u-text-none { text-transform: none !important; } /* すべての英単語を小文字にします。 */ .u-text-lowercase { text-transform: lowercase !important; } /* すべての英単語を大文字にします。 */ .u-text-uppercase { text-transform: uppercase !important; } /* 英単語の先頭を大文字にします。 */ .u-text-capitalize { text-transform: capitalize !important; } /* スモールキャップ（小文字と同じ高さで作られた大文字）にします。 */ .u-text-smallcaps { font-variant: small-caps !important; } /* 縦書きにします。 */ .u-text-vertical { -ms-writing-mode: tb-rl !important; -webkit-writing-mode: vertical-rl !important; writing-mode: vertical-rl !important; text-orientation: mixed !important; } /* 英文も縦書きにする場合はModifierを指定します。 */ .u-text-vertical--upright { text-orientation: upright !important; } /* テキスト下線 */ .u-text-underline { text-decoration: underline !important; } .u-text-right { text-align: right !important; } .u-text-center { text-align: center !important; } .u-text-left { text-align: left !important; } .u-text-top { vertical-align: top !important; } .u-text-middle { vertical-align: middle !important; } .u-text-bottom { vertical-align: bottom !important; } /* #Align -------------------------------------------------------------------------- */ /*doc --- title: align name: align categories: [utility] --- 画像などを左右や中央に配置します。 ```block

``` */ .u-align-left { display: block !important; margin-right: auto !important; margin-left: 0 !important; } .u-align-center { display: block !important; margin-right: auto !important; margin-left: auto !important; } .u-align-right { display: block !important; margin-right: 0 !important; margin-left: auto !important; } /* #Margin -------------------------------------------------------------------------- */ /*doc --- title: margin name: margin categories: [utility] --- マージンで余白の管理をします。常に下方向にだけ余白をとります。 `

`要素を使うようなセクションの余白はlayout/_section.scssで管理します。 * `.u-mb`は常に余白をとります。 * `.u-mb-gain`はあるブレイクポイント以上で余白を指定します。 * `.u-mb-lose`はあるブレイクポイント以上で余白を無くします。サイズのバリエーションは最大で5つ、通常は3つとします。 1. `tiny`(optional) 2. `small` 3. `medium` 4. `large` 5. `huge`(optional) ```block

Lorem ipsum

``` */ /* 常に余白を指定するクラス。 */ .u-mb-small { margin-bottom: .5em !important; } @media screen and (min-width: 768px) { .u-mb-small { margin-bottom: 1em !important; } } .u-mb-medium { margin-bottom: 1em !important; } @media screen and (min-width: 768px) { .u-mb-medium { margin-bottom: 2em !important; } } .u-mb-large { margin-bottom: 2em !important; } @media screen and (min-width: 768px) { .u-mb-large { margin-bottom: 4em !important; } } /* ブレイクポイント以上で余白を指定するクラス。 */ .u-mb-gain-small { margin-bottom: 0 !important; } @media screen and (min-width: 768px) { .u-mb-gain-small { margin-bottom: 1em !important; } } .u-mb-gain-medium { margin-bottom: 0 !important; } @media screen and (min-width: 768px) { .u-mb-gain-medium { margin-bottom: 2em !important; } } .u-mb-gain-large { margin-bottom: 0 !important; } @media screen and (min-width: 768px) { .u-mb-gain-large { margin-bottom: 4em !important; } } /* ブレイクポイント以上で余白を無くすクラス。 */ .u-mb-lose-small { margin-bottom: .5em !important; } @media screen and (min-width: 768px) { .u-mb-lose-small { margin-bottom: 0 !important; } } .u-mb-lose-medium { margin-bottom: 1em !important; } @media screen and (min-width: 768px) { .u-mb-lose-medium { margin-bottom: 0 !important; } } .u-mb-lose-large { margin-bottom: 2em !important; } @media screen and (min-width: 768px) { .u-mb-lose-large { margin-bottom: 0 !important; } } /* #Display -------------------------------------------------------------------------- */ /*doc --- title: display name: display categories: [utility] --- 表示非表示を切り替えます。改行位置のコントロールもできます。 ```block

$-md以降は非表示になります。

$-md以降は表示されます。

基本はなりゆきでウィンドウサイズが狭くなると、ここから改行されます。

$-md以降になると、ここから改行されます。

``` */ .u-dn { display: none !important; } @media screen and (min-width: 375px) { .u-dn-xs { display: none !important; } } @media screen and (min-width: 400px) { .u-dn-sm { display: none !important; } } @media screen and (min-width: 768px) { .u-dn-md { display: none !important; } } @media screen and (min-width: 1000px) { .u-dn-lg { display: none !important; } } @media screen and (min-width: 1200px) { .u-dn-xl { display: none !important; } } .u-db { display: block !important; } @media screen and (min-width: 375px) { .u-db-xs { display: block !important; } } @media screen and (min-width: 400px) { .u-db-sm { display: block !important; } } @media screen and (min-width: 768px) { .u-db-md { display: block !important; } } @media screen and (min-width: 1000px) { .u-db-lg { display: block !important; } } @media screen and (min-width: 1200px) { .u-db-xl { display: block !important; } } .u-di { display: inline !important; } @media screen and (min-width: 375px) { .u-di-xs { display: inline !important; } } @media screen and (min-width: 400px) { .u-di-sm { display: inline !important; } } @media screen and (min-width: 768px) { .u-di-md { display: inline !important; } } @media screen and (min-width: 1000px) { .u-di-lg { display: inline !important; } } @media screen and (min-width: 1200px) { .u-di-xl { display: inline !important; } } .u-dib { display: inline-block !important; } @media screen and (min-width: 375px) { .u-dib-xs { display: inline-block !important; } } @media screen and (min-width: 400px) { .u-dib-sm { display: inline-block !important; } } @media screen and (min-width: 768px) { .u-dib-md { display: inline-block !important; } } @media screen and (min-width: 1000px) { .u-dib-lg { display: inline-block !important; } } @media screen and (min-width: 1200px) { .u-dib-xl { display: inline-block !important; } } /* #Width -------------------------------------------------------------------------- */ /*doc --- title: width name: width categories: [utility] --- レスポンシブに対応した`width`プロパティを指定する汎用クラスです。 @see - [trumps.width.scss](https://github.com/csswizardry/frcss/blob/master/_trumps.widths.scss) ```block

c-layout__item u-8of12-md

c-layout__item u-4of12-md

c-layout--rev c-layout__item u-8of12-md

c-layout--rev c-layout__item u-4of12-md

c-layout--center c-layout__item u-8of12-md

``` */ .u-1of12 { width: 8.33333% !important; } .u-2of12 { width: 16.66667% !important; } .u-3of12 { width: 25% !important; } .u-4of12 { width: 33.33333% !important; } .u-5of12 { width: 41.66667% !important; } .u-6of12 { width: 50% !important; } .u-7of12 { width: 58.33333% !important; } .u-8of12 { width: 66.66667% !important; } .u-9of12 { width: 75% !important; } .u-10of12 { width: 83.33333% !important; } .u-11of12 { width: 91.66667% !important; } .u-12of12 { width: 100% !important; } @media screen and (min-width: 375px) { .u-1of12-xs { width: 8.33333% !important; } .u-2of12-xs { width: 16.66667% !important; } .u-3of12-xs { width: 25% !important; } .u-4of12-xs { width: 33.33333% !important; } .u-5of12-xs { width: 41.66667% !important; } .u-6of12-xs { width: 50% !important; } .u-7of12-xs { width: 58.33333% !important; } .u-8of12-xs { width: 66.66667% !important; } .u-9of12-xs { width: 75% !important; } .u-10of12-xs { width: 83.33333% !important; } .u-11of12-xs { width: 91.66667% !important; } .u-12of12-xs { width: 100% !important; } } @media screen and (min-width: 400px) { .u-1of12-sm { width: 8.33333% !important; } .u-2of12-sm { width: 16.66667% !important; } .u-3of12-sm { width: 25% !important; } .u-4of12-sm { width: 33.33333% !important; } .u-5of12-sm { width: 41.66667% !important; } .u-6of12-sm { width: 50% !important; } .u-7of12-sm { width: 58.33333% !important; } .u-8of12-sm { width: 66.66667% !important; } .u-9of12-sm { width: 75% !important; } .u-10of12-sm { width: 83.33333% !important; } .u-11of12-sm { width: 91.66667% !important; } .u-12of12-sm { width: 100% !important; } } @media screen and (min-width: 768px) { .u-1of12-md { width: 8.33333% !important; } .u-2of12-md { width: 16.66667% !important; } .u-3of12-md { width: 25% !important; } .u-4of12-md { width: 33.33333% !important; } .u-5of12-md { width: 41.66667% !important; } .u-6of12-md { width: 50% !important; } .u-7of12-md { width: 58.33333% !important; } .u-8of12-md { width: 66.66667% !important; } .u-9of12-md { width: 75% !important; } .u-10of12-md { width: 83.33333% !important; } .u-11of12-md { width: 91.66667% !important; } .u-12of12-md { width: 100% !important; } } @media screen and (min-width: 1000px) { .u-1of12-lg { width: 8.33333% !important; } .u-2of12-lg { width: 16.66667% !important; } .u-3of12-lg { width: 25% !important; } .u-4of12-lg { width: 33.33333% !important; } .u-5of12-lg { width: 41.66667% !important; } .u-6of12-lg { width: 50% !important; } .u-7of12-lg { width: 58.33333% !important; } .u-8of12-lg { width: 66.66667% !important; } .u-9of12-lg { width: 75% !important; } .u-10of12-lg { width: 83.33333% !important; } .u-11of12-lg { width: 91.66667% !important; } .u-12of12-lg { width: 100% !important; } } @media screen and (min-width: 1200px) { .u-1of12-xl { width: 8.33333% !important; } .u-2of12-xl { width: 16.66667% !important; } .u-3of12-xl { width: 25% !important; } .u-4of12-xl { width: 33.33333% !important; } .u-5of12-xl { width: 41.66667% !important; } .u-6of12-xl { width: 50% !important; } .u-7of12-xl { width: 58.33333% !important; } .u-8of12-xl { width: 66.66667% !important; } .u-9of12-xl { width: 75% !important; } .u-10of12-xl { width: 83.33333% !important; } .u-11of12-xl { width: 91.66667% !important; } .u-12of12-xl { width: 100% !important; } } .u-wf { width: 100% !important; } @media screen and (min-width: 375px) { .u-wf-xs { width: 100% !important; } } @media screen and (min-width: 400px) { .u-wf-sm { width: 100% !important; } } @media screen and (min-width: 768px) { .u-wf-md { width: 100% !important; } } @media screen and (min-width: 1000px) { .u-wf-lg { width: 100% !important; } } @media screen and (min-width: 1200px) { .u-wf-xl { width: 100% !important; } } .u-wa { width: auto !important; } @media screen and (min-width: 375px) { .u-wa-xs { width: auto !important; } } @media screen and (min-width: 400px) { .u-wa-sm { width: auto !important; } } @media screen and (min-width: 768px) { .u-wa-md { width: auto !important; } } @media screen and (min-width: 1000px) { .u-wa-lg { width: auto !important; } } @media screen and (min-width: 1200px) { .u-wa-xl { width: auto !important; } } /* #Offset -------------------------------------------------------------------------- */ /*doc --- title: offset name: offset categories: [utility] --- レスポンシブに対応した`margin-right`プロパティを指定する汎用クラスです。 ```block

c-layout__item u-4of12-md u-offset1of12-md

c-layout__item u-4of12-md

``` */ .u-offset1of12 { margin-right: 8.33333% !important; } .u-offset2of12 { margin-right: 16.66667% !important; } .u-offset3of12 { margin-right: 25% !important; } .u-offset4of12 { margin-right: 33.33333% !important; } .u-offset5of12 { margin-right: 41.66667% !important; } .u-offset6of12 { margin-right: 50% !important; } .u-offset7of12 { margin-right: 58.33333% !important; } .u-offset8of12 { margin-right: 66.66667% !important; } .u-offset9of12 { margin-right: 75% !important; } .u-offset10of12 { margin-right: 83.33333% !important; } .u-offset11of12 { margin-right: 91.66667% !important; } .u-offset12of12 { margin-right: 100% !important; } @media screen and (min-width: 375px) { .u-offset1of12-xs { margin-right: 8.33333% !important; } .u-offset2of12-xs { margin-right: 16.66667% !important; } .u-offset3of12-xs { margin-right: 25% !important; } .u-offset4of12-xs { margin-right: 33.33333% !important; } .u-offset5of12-xs { margin-right: 41.66667% !important; } .u-offset6of12-xs { margin-right: 50% !important; } .u-offset7of12-xs { margin-right: 58.33333% !important; } .u-offset8of12-xs { margin-right: 66.66667% !important; } .u-offset9of12-xs { margin-right: 75% !important; } .u-offset10of12-xs { margin-right: 83.33333% !important; } .u-offset11of12-xs { margin-right: 91.66667% !important; } .u-offset12of12-xs { margin-right: 100% !important; } } @media screen and (min-width: 400px) { .u-offset1of12-sm { margin-right: 8.33333% !important; } .u-offset2of12-sm { margin-right: 16.66667% !important; } .u-offset3of12-sm { margin-right: 25% !important; } .u-offset4of12-sm { margin-right: 33.33333% !important; } .u-offset5of12-sm { margin-right: 41.66667% !important; } .u-offset6of12-sm { margin-right: 50% !important; } .u-offset7of12-sm { margin-right: 58.33333% !important; } .u-offset8of12-sm { margin-right: 66.66667% !important; } .u-offset9of12-sm { margin-right: 75% !important; } .u-offset10of12-sm { margin-right: 83.33333% !important; } .u-offset11of12-sm { margin-right: 91.66667% !important; } .u-offset12of12-sm { margin-right: 100% !important; } } @media screen and (min-width: 768px) { .u-offset1of12-md { margin-right: 8.33333% !important; } .u-offset2of12-md { margin-right: 16.66667% !important; } .u-offset3of12-md { margin-right: 25% !important; } .u-offset4of12-md { margin-right: 33.33333% !important; } .u-offset5of12-md { margin-right: 41.66667% !important; } .u-offset6of12-md { margin-right: 50% !important; } .u-offset7of12-md { margin-right: 58.33333% !important; } .u-offset8of12-md { margin-right: 66.66667% !important; } .u-offset9of12-md { margin-right: 75% !important; } .u-offset10of12-md { margin-right: 83.33333% !important; } .u-offset11of12-md { margin-right: 91.66667% !important; } .u-offset12of12-md { margin-right: 100% !important; } } @media screen and (min-width: 1000px) { .u-offset1of12-lg { margin-right: 8.33333% !important; } .u-offset2of12-lg { margin-right: 16.66667% !important; } .u-offset3of12-lg { margin-right: 25% !important; } .u-offset4of12-lg { margin-right: 33.33333% !important; } .u-offset5of12-lg { margin-right: 41.66667% !important; } .u-offset6of12-lg { margin-right: 50% !important; } .u-offset7of12-lg { margin-right: 58.33333% !important; } .u-offset8of12-lg { margin-right: 66.66667% !important; } .u-offset9of12-lg { margin-right: 75% !important; } .u-offset10of12-lg { margin-right: 83.33333% !important; } .u-offset11of12-lg { margin-right: 91.66667% !important; } .u-offset12of12-lg { margin-right: 100% !important; } } @media screen and (min-width: 1200px) { .u-offset1of12-xl { margin-right: 8.33333% !important; } .u-offset2of12-xl { margin-right: 16.66667% !important; } .u-offset3of12-xl { margin-right: 25% !important; } .u-offset4of12-xl { margin-right: 33.33333% !important; } .u-offset5of12-xl { margin-right: 41.66667% !important; } .u-offset6of12-xl { margin-right: 50% !important; } .u-offset7of12-xl { margin-right: 58.33333% !important; } .u-offset8of12-xl { margin-right: 66.66667% !important; } .u-offset9of12-xl { margin-right: 75% !important; } .u-offset10of12-xl { margin-right: 83.33333% !important; } .u-offset11of12-xl { margin-right: 91.66667% !important; } .u-offset12of12-xl { margin-right: 100% !important; } } /* #Percent -------------------------------------------------------------------------- */ /*doc --- title: percent name: percent categories: [utility] --- `width`プロパティを5%刻みで指定する汎用クラスです。おもに`.c-table--fixed`と一緒に指定します。 ```block

th1	th2	th3
td1	td2	td3

``` */ .u-percent5 { width: 5% !important; } .u-percent10 { width: 10% !important; } .u-percent15 { width: 15% !important; } .u-percent20 { width: 20% !important; } .u-percent25 { width: 25% !important; } .u-percent30 { width: 30% !important; } .u-percent35 { width: 35% !important; } .u-percent40 { width: 40% !important; } .u-percent45 { width: 45% !important; } .u-percent50 { width: 50% !important; } .u-percent55 { width: 55% !important; } .u-percent60 { width: 60% !important; } .u-percent65 { width: 65% !important; } .u-percent70 { width: 70% !important; } .u-percent75 { width: 75% !important; } .u-percent80 { width: 80% !important; } .u-percent85 { width: 85% !important; } .u-percent90 { width: 90% !important; } .u-percent95 { width: 95% !important; } .u-percent100 { width: 100% !important; } /* #Sr-only -------------------------------------------------------------------------- */ /*doc --- title: sr-only name: sr-only categories: [utility] --- 要素を非表示にさせますが、スクリーンリーダーには読み上げられます。 ```block

``` */ .u-sr-only { position: absolute !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } /*# sourceMappingURL=common.css.map */