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

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

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

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

logo

``` */ .l-header { height: 84px; width: 100%; max-width: 100vw; 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; position: fixed; top: 0; z-index: 999; } @media screen and (max-width: 767px) { .l-header { width: 100vw; } } @media screen and (max-width: 399px) { .l-header { min-width: 340px; } } /* #Footer -------------------------------------------------------------------------- */ /*doc --- title: footer name: footer categories: [layout] --- ``タグ直下にある`

`タグのスタイルです。コピーライトやナビゲーションのレイアウトを含むことはできますが、コンポーネント自体はobject/projectレイヤーで定義します。 ```block ``` */ .l-footer { height: 84px; width: 100%; max-width: 100vw; 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; } @media screen and (max-width: 399px) { .l-footer { min-width: 340px; } } /* #Main -------------------------------------------------------------------------- */ /*doc --- title: main name: main categories: [layout] --- `

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

タグや

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

``` */ .l-main { -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 5.2rem; width: 100vw; } @media screen and (max-width: 767px) { .l-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 8.2em; } } @media screen and (max-width: 399px) { .l-main { min-width: 340px; padding-top: 8.4em; } } .l-main__left__hero { position: relative; } @media screen and (max-width: 767px) { .l-main__left__hero { position: inherit; } } .l-main__left__hero__pic img { height: 800px; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: -5em 50%; object-position: -5em 50%; } @media screen and (max-width: 399px) { .l-main__left__hero__pic img { -o-object-position: -20em 50%; object-position: -20em 50%; } } .l-main__left__hero__badge { position: absolute; top: 15%; left: 85%; } @media screen and (max-width: 767px) { .l-main__left__hero__badge { position: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 5rem; } } @media screen and (max-width: 399px) { .l-main__left__hero__badge { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .l-main__right { display: -ms-grid; display: grid; grid-auto-rows: 800px 1fr; } @media screen and (max-width: 767px) { .l-main__right { display: 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: 960px; margin-right: auto; margin-left: auto; } .c-wrapper--small { padding-right: 0.85rem; padding-left: 0.85rem; } .c-wrapper--medium { padding-right: 1.7rem; padding-left: 1.7rem; } .c-wrapper--large { padding-right: 3.4rem; padding-left: 3.4rem; } /* #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 { display: block; margin: 0; padding: 0; font-size: 0; list-style-type: none; } .c-layout__item { display: inline-block; width: 100%; font-size: medium; font-size: 1rem; vertical-align: top; } /** * ガターを3つのパリエーションから選択します。 */ .c-layout--small { margin-left: -0.85rem; } .c-layout--small > .c-layout__item { padding-left: 0.85rem; } .c-layout--medium { margin-left: -1.7rem; } .c-layout--medium > .c-layout__item { padding-left: 1.7rem; } .c-layout--large { margin-left: -3.4rem; } .c-layout--large > .c-layout__item { padding-left: 3.4rem; } /** * 垂直位置を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: 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: 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: 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: 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: 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: 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: 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: 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 { content: ""; display: block; clear: both; } .c-media__image { float: left; margin: 0; margin-right: 1.7rem; 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: 0.85rem; } .c-media--large > .c-media__image { margin-right: 3.4rem; } /** * 横並びになった要素を右から左の順番でレイアウトします。 */ .c-media--reverse > .c-media__image { float: right; margin-right: 0; margin-left: 1.7rem; } .c-media--reverse.c-media--small > .c-media__image { margin-left: 0.85rem; } .c-media--reverse.c-media--large > .c-media__image { margin-left: 3.4rem; } @media screen and (min-width: 400px) { .c-media--reverse-sm > .c-media__image { float: right; margin-right: 0; margin-left: 1.7rem; } .c-media--reverse-sm.c-media--small > .c-media__image { margin-left: 0.85rem; } .c-media--reverse-sm.c-media--large > .c-media__image { margin-left: 3.4rem; } } @media screen and (min-width: 768px) { .c-media--reverse-md > .c-media__image { float: right; margin-right: 0; margin-left: 1.7rem; } .c-media--reverse-md.c-media--small > .c-media__image { margin-left: 0.85rem; } .c-media--reverse-md.c-media--large > .c-media__image { margin-left: 3.4rem; } } @media screen and (min-width: 1000px) { .c-media--reverse-lg > .c-media__image { float: right; margin-right: 0; margin-left: 1.7rem; } .c-media--reverse-lg.c-media--small > .c-media__image { margin-left: 0.85rem; } .c-media--reverse-lg.c-media--large > .c-media__image { margin-left: 3.4rem; } } @media screen and (min-width: 1200px) { .c-media--reverse-xl > .c-media__image { float: right; margin-right: 0; margin-left: 1.7rem; } .c-media--reverse-xl.c-media--small > .c-media__image { margin-left: 0.85rem; } .c-media--reverse-xl.c-media--large > .c-media__image { margin-left: 3.4rem; } } /* #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: 1.7rem; 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: 0.85rem; } .c-flag--large > .c-flag__image { padding-right: 3.4rem; } /** * 横並びになった要素を右から左の順番でレイアウトされます（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: 1.7rem; } .c-flag--reverse.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 0.85rem; } .c-flag--reverse.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 3.4rem; } @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: 1.7rem; } .c-flag--reverse-sm.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 0.85rem; } .c-flag--reverse-sm.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 3.4rem; } } @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: 1.7rem; } .c-flag--reverse-md.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 0.85rem; } .c-flag--reverse-md.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 3.4rem; } } @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: 1.7rem; } .c-flag--reverse-lg.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 0.85rem; } .c-flag--reverse-lg.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 3.4rem; } } @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: 1.7rem; } .c-flag--reverse-xl.c-flag--small > .c-flag__image { padding-right: 0; padding-left: 0.85rem; } .c-flag--reverse-xl.c-flag--large > .c-flag__image { padding-right: 0; padding-left: 3.4rem; } } /** * 横並びから縦にレイアウトされます。 */ .c-flag--stack { display: block; } .c-flag--stack > .c-flag__image, .c-flag--stack > .c-flag__body { width: 100%; display: block; } .c-flag--stack > .c-flag__image { margin-bottom: 1.7rem; 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: 0.85rem; } .c-flag--stack.c-flag--large > .c-flag__image { margin-bottom: 3.4rem; } @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 { width: 100%; display: block; } .c-flag--stack-sm > .c-flag__image { margin-bottom: 1.7rem; 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: 0.85rem; } .c-flag--stack-sm.c-flag--large > .c-flag__image { margin-bottom: 3.4rem; } } @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 { width: 100%; display: block; } .c-flag--stack-md > .c-flag__image { margin-bottom: 1.7rem; 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: 0.85rem; } .c-flag--stack-md.c-flag--large > .c-flag__image { margin-bottom: 3.4rem; } } @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 { width: 100%; display: block; } .c-flag--stack-lg > .c-flag__image { margin-bottom: 1.7rem; 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: 0.85rem; } .c-flag--stack-lg.c-flag--large > .c-flag__image { margin-bottom: 3.4rem; } } @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 { width: 100%; display: block; } .c-flag--stack-xl > .c-flag__image { margin-bottom: 1.7rem; 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: 0.85rem; } .c-flag--stack-xl.c-flag--large > .c-flag__image { margin-bottom: 3.4rem; } } /* #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"; src: url("../font/iconfont.eot"); src: url("../font/iconfont.eot?#iefix") format("eot"), url("../font/iconfont.woff") format("woff"), url("../font/iconfont.ttf") format("truetype"), url("../font/iconfont.svg#iconfont") format("svg"); font-weight: normal; font-style: normal; } /* `p-icon p-icon--icon-name`のようなマルチクラスで指定します。 */ .p-icon:before { font-family: "iconfont"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; top: -0.1em; display: inline-block; vertical-align: middle; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; text-decoration: none; text-transform: none; speak: none; } .p-icon--home: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 { display: inline-block; margin: 0; padding: 0.75em; border: none; border-radius: 3px; color: inherit; font-family: inherit; font-size: inherit; line-height: 1; text-align: center; text-decoration: none; background: transparent; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .p-button:hover, .p-button:active, .p-button:focus { text-decoration: none; } .p-button:disabled, .p-button.is-disabled { opacity: 0.5; pointer-events: none; } .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; white-space: nowrap; text-overflow: ellipsis; list-style-type: none; } .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 { content: "\003E"; margin: 0 0.5em; } /* #Label -------------------------------------------------------------------------- */ /*doc --- title: label name: label categories: [project] --- インラインでメッセージを表示するコンポーネントです。 ```block

タグ名

``` */ .p-label { display: inline-block; padding: 0.5em; color: #fff; font-size: 0.8em; line-height: 1; text-align: center; white-space: nowrap; background-color: #2b70ba; } /* #Badge -------------------------------------------------------------------------- */ /*doc --- title: badge name: badge categories: [project] --- 投稿数のような数値を表示するバッジコンポーネントです。 ```block 1 10 100 ``` */ .p-badge { display: inline-block; min-width: 2em; min-height: 2em; padding: 0 0.25em; border-radius: 50%; color: #fff; font-size: 0.8em; line-height: 2em; text-align: center; vertical-align: top; white-space: nowrap; background-color: #2b70ba; } /* #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 { content: ""; display: block; clear: both; } .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 { content: ""; display: block; clear: both; } .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 0.85rem; padding: 0; border: 1px solid #ddd; border-radius: 3px; list-style-type: none; } .p-card__head { padding: 1.7rem; } .p-card__head > :last-child { margin-bottom: 0; } .p-card__body { padding: 1.7rem 1.7rem; } .p-card__body > :last-child { margin-bottom: 0; } .p-card__foot { padding: 1.7rem; border-top: 1px solid #ddd; } .p-card__foot > :last-child { margin-bottom: 0; } .p-card__image, .p-card__image-top, .p-card__image-bottom { max-width: none; width: 100%; } .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: 1.7rem; border-top: 1px solid #ddd; } .p-card__list-link { display: block; margin: -1.7rem; padding: 1.7rem; } .p-header { color: #fff; background-color: rgba(54, 54, 54, 0.7); padding: 0 5em; } .p-header .spView { display: none; } @media screen and (max-width: 399px) { .p-header .pcView { display: none; } .p-header .spView { display: block; margin-left: -1em; } } .p-header input { display: none; } .p-header ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; } .p-header ul li { margin: 1rem; font-size: 16px; } .p-header ul li a { border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #fff; text-decoration: none; } .p-header ul li a:hover { color: coral; -webkit-transition: 80ms; transition: 80ms; } @media screen and (max-width: 767px) { .p-header { /* * Just a quick hamburger */ /* * Transform all the slices of hamburger * into a crossmark. */ /* * But let's hide the middle one. */ /* * Ohyeah and the last one should go the other direction */ /* * Make this absolute positioned * at the top left of the screen */ /* * And let's slide it in from the left */ } .p-header input { display: block; } .p-header #menuToggle { display: block; position: relative; top: 5px; left: 10px; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .p-header #menuToggle a { text-decoration: none; color: #232323; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .p-header #menuToggle a:hover { color: tomato; } .p-header #menuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; } .p-header #menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; -webkit-transform-origin: 4px 0px; transform-origin: 4px 0px; -webkit-transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); transition: background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); } .p-header #menuToggle span:first-child { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } .p-header #menuToggle span:nth-last-child(2) { -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; } .p-header #menuToggle input:checked ~ span { opacity: 1; -webkit-transform: rotate(45deg) translate(-2px, -1px); transform: rotate(45deg) translate(-2px, -1px); background: #232323; } .p-header #menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; -webkit-transform: rotate(0deg) scale(0.2, 0.2); transform: rotate(0deg) scale(0.2, 0.2); } .p-header #menuToggle input:checked ~ span:nth-last-child(2) { -webkit-transform: rotate(-45deg) translate(0, -1px); transform: rotate(-45deg) translate(0, -1px); } .p-header #menu { display: block; position: absolute; width: 300px; margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: #ededed; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: translate(45%, 0); transform: translate(45%, 0); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); } .p-header #menu li { padding: 10px 0; font-size: 22px; } .p-header #menuToggle input:checked ~ ul { -webkit-transform: translate(-35%, 0%); transform: translate(-35%, 0%); } } .p-footer { color: #fff; background-color: #363636; } .p-footer ul { 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; list-style: none; } .p-footer ul li { -webkit-box-sizing: border-box; box-sizing: border-box; } .p-footer ul li:nth-child(1) { padding-left: 3em; } .p-footer ul li:nth-child(2) { padding-right: 2.9em; padding-left: 4.6em; } /* ----------------------------------------------------------------------------- #Scope -------------------------------------------------------------------------- */ /** * ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、 * ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、 * ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。 * 例えばブログページのスタイルとして_blog.scssを作成します。 * このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。 * もし、このレイヤーで同じパターンが3箇所で使われていたら、 * ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。 * プレフィックス（接頭辞）として`s-`をつけます。 */ /* #Blog -------------------------------------------------------------------------- */ /** * ブログページのスタイルです。 */ .s-blog { position: relative; height: -webkit-max-content; height: -moz-max-content; height: max-content; } .s-blog::before { content: url('data:image/svg+xml;utf-8,\a '); position: absolute; top: 5%; left: -5%; } .s-blog ul li { list-style: none; padding: 2.5em; } .s-blog ul li iframe { background: none; } .s-about { margin: 10em; padding: 3em; font-size: 1.2rem; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; position: relative; } @media screen and (max-width: 767px) { .s-about { font-size: 1.8em; margin: 5em 3em; } } @media screen and (max-width: 399px) { .s-about { margin: 5em 0.5em; } } .s-about::before { content: url('data:image/svg+xml;utf-8,\a '); position: absolute; top: -30%; } .s-about::after { content: url('data:image/svg+xml;utf-8,\a '); position: absolute; right: 7%; bottom: -30%; } .s-about p { padding: 2em; } @media screen and (max-width: 399px) { .s-about p { padding: 0.5em; } } .s-garelly { background-color: #363636; width: 100vw; } .s-garelly h2 { width: 100%; padding: 5rem; margin-right: 10rem; text-align: end; } .s-garelly > div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 75%; padding-bottom: 5rem; padding-left: 5rem; padding-right: 1rem; } @media screen and (max-width: 767px) { .s-garelly > div { width: 100%; padding-right: 5rem; } } .s-garelly > div picture { display: -webkit-box; display: -ms-flexbox; display: flex; height: 270px; width: 20%; margin: 1.2em; } @media screen and (max-width: 767px) { .s-garelly > div picture { display: block; width: 100%; height: auto; } } .s-garelly > div picture img { max-width: 100%; -o-object-fit: cover; object-fit: cover; } .s-contact { margin: 10em; padding: 3em; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; position: relative; font-size: 1.2rem; } @media screen and (max-width: 767px) { .s-contact { font-size: 1.8em; margin: 10em 3em; } } @media screen and (max-width: 399px) { .s-contact { margin: 10em 1em; } } .s-contact::before { content: url('data:image/svg+xml;utf-8,\a '); position: absolute; top: -20%; } @media screen and (max-width: 1199px) { .s-contact::before { top: -15%; } } .s-contact::after { content: url('data:image/svg+xml;utf-8,\a '); position: absolute; right: 7%; bottom: -20%; } @media screen and (max-width: 1199px) { .s-contact::after { bottom: -15%; } } .s-contact dl { padding: 2em; } @media screen and (max-width: 399px) { .s-contact dl { padding: 0.5em; } } .s-contact dl dt { font-weight: bold; font-size: 1.2em; } .s-contact dl dd ul { margin-top: 1em; } /* ----------------------------------------------------------------------------- #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 600

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

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

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

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

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

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

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

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

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

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

abcdEFGH 縦書きで表示します。

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

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: 600 !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 { -webkit-writing-mode: vertical-rl !important; -ms-writing-mode: tb-rl !important; writing-mode: vertical-rl !important; text-orientation: mixed !important; } /* 英文も縦書きにする場合はModifierを指定します。 */ .u-text-vertical--upright { text-orientation: upright !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-left: 0 !important; margin-right: auto !important; } .u-align-center { display: block !important; margin-right: auto !important; margin-left: auto !important; } .u-align-right { display: block !important; margin-left: auto !important; margin-right: 0 !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: 0.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: 0.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: 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: 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: 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: 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: 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: 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: 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: 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; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; padding: 0 !important; clip: rect(0, 0, 0, 0) !important; } .u-zoom:hover { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); -webkit-transition: 0.2s; transition: 0.2s; } #loading { width: 100vw; height: 100vh; -webkit-transition: all 1s; transition: all 1s; background: #373940; position: fixed; top: 0; left: 0; z-index: 9999; } .loaded { opacity: 0; visibility: hidden; } .socket { width: 200px; height: 200px; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -100px; } .hex-brick { background: #ABF8FF; width: 30px; height: 17px; position: absolute; top: 5px; animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } .h2 { transform: rotate(60deg); -webkit-transform: rotate(60deg); } .h3 { transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .gel { height: 30px; width: 30px; transition: all .3s; -webkit-transition: all .3s; position: absolute; top: 50%; left: 50%; } .center-gel { margin-left: -15px; margin-top: -15px; animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; } .c1 { margin-left: -47px; margin-top: -15px; } .c2 { margin-left: -31px; margin-top: -43px; } .c3 { margin-left: 1px; margin-top: -43px; } .c4 { margin-left: 17px; margin-top: -15px; } .c5 { margin-left: -31px; margin-top: 13px; } .c6 { margin-left: 1px; margin-top: 13px; } .c7 { margin-left: -63px; margin-top: -43px; } .c8 { margin-left: 33px; margin-top: -43px; } .c9 { margin-left: -15px; margin-top: 41px; } .c10 { margin-left: -63px; margin-top: 13px; } .c11 { margin-left: 33px; margin-top: 13px; } .c12 { margin-left: -15px; margin-top: -71px; } .c13 { margin-left: -47px; margin-top: -71px; } .c14 { margin-left: 17px; margin-top: -71px; } .c15 { margin-left: -47px; margin-top: 41px; } .c16 { margin-left: 17px; margin-top: 41px; } .c17 { margin-left: -79px; margin-top: -15px; } .c18 { margin-left: 49px; margin-top: -15px; } .c19 { margin-left: -63px; margin-top: -99px; } .c20 { margin-left: 33px; margin-top: -99px; } .c21 { margin-left: 1px; margin-top: -99px; } .c22 { margin-left: -31px; margin-top: -99px; } .c23 { margin-left: -63px; margin-top: 69px; } .c24 { margin-left: 33px; margin-top: 69px; } .c25 { margin-left: 1px; margin-top: 69px; } .c26 { margin-left: -31px; margin-top: 69px; } .c27 { margin-left: -79px; margin-top: -15px; } .c28 { margin-left: -95px; margin-top: -43px; } .c29 { margin-left: -95px; margin-top: 13px; } .c30 { margin-left: 49px; margin-top: 41px; } .c31 { margin-left: -79px; margin-top: -71px; } .c32 { margin-left: -111px; margin-top: -15px; } .c33 { margin-left: 65px; margin-top: -43px; } .c34 { margin-left: 65px; margin-top: 13px; } .c35 { margin-left: -79px; margin-top: 41px; } .c36 { margin-left: 49px; margin-top: -71px; } .c37 { margin-left: 81px; margin-top: -15px; } .r1 { animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2 { animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3 { animation-name: pulse; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } .r1 > .hex-brick { animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .2s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .2s; } .r2 > .hex-brick { animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .4s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .4s; } .r3 > .hex-brick { animation-name: fade; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: .6s; -webkit-animation-name: fade; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: .6s; } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes fade { 0% { background: #ABF8FF; } 50% { background: #90BBBF; } 100% { background: #ABF8FF; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes fade { 0% { background: #ABF8FF; } 50% { background: #389CA6; } 100% { background: #ABF8FF; } } /*# sourceMappingURL=common.css.map */