@charset "UTF-8";
/* ==========================================================================
Based On FLOCSS (https://github.com/hiloki/flocss) Structrue
========================================================================== */
/* ==========================================================================
Foundation
========================================================================== */
* {
box-sizing: border-box; }
/* Reset(Normalize)
----------------------------------------------------------------- */
body {
text-size-adjust: 100%;
font-family: Helvetica, Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ⾓ゴProN W3", "モリサワ新ゴR", "Droid Sans", "メイリオ", sans-serif; }
/* Base
----------------------------------------------------------------- */
/* Mixins
----------------------------------------------------------------- */
@media only screen and (max-width: 1040px) {
.css-mqpacker-test {
color: #000; } }
@media only screen and (max-width: 667px) {
.css-mqpacker-test {
color: #fff; } }
/* ==========================================================================
Object
========================================================================== */
/* Component
----------------------------------------------------------------- */
/*
Component Icon
アイコンのスタイル
Weight: -1100
Style guide: icon
*/
.c-icon {
display: block;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: middle;
text-align: center;
text-indent: -100%;
line-height: 0;
letter-spacing: 0;
color: #fff;
background-color: transparent;
background-repeat: no-repeat;
font-weight: normal;
font-size: 0;
border: 0; }
/*
Option: Default
C-Icon のデフォルトスタイル。タイプ指定が必須。タイプ指定がなければ何も表示されない
Weight: -100
Markup: text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
c-text - デフォルトスタイル
Style guide: text.default
*/
/*
Themes
Weight: -700
C-Text のオプション（テーマ）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h1 text. h1 text. h1 text. h1 text. h1 text. h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
c-text--align-left - 左寄せ（デフォルト）
c-text--align-center - 中央寄せ
c-text--align-right - 右寄せ
Style guide: text.align
*/
.c-text--align-left {
text-align: left; }
.c-text--align-center {
text-align: center; }
.c-text--align-right {
text-align: right; }
/*
Weight
Weight: -500
C-Text のオプション（文字のウェイト）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
c-text--weight-normal - 標準（デフォルト）
c-text--weight-bold - 太字
Style guide: text.weight
*/
.c-text--weight-normal {
font-weight: normal; }
.c-text--weight-bold {
font-weight: bold; }
/*
Ellipsis
Weight: -400
C-Text のオプション（省略）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
c-text--ellipsis-false - 省略しない（デフォルト）
c-text--ellipsis-true - 省略する
Style guide: text.ellipsis
*/
.c-text--ellipsis-true {
overflow: hidden;
width: 100%;
white-space: nowrap;
word-break: normal;
word-wrap: normal;
text-overflow: ellipsis; }
/*
Link Underlines
Weight: -300
C-Text のオプション（リンクのアンダーライン）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
c-text--underline-false - アンダーラインなし（デフォルト）
c-text--underline-true - アンダーラインあり
Style guide: text.underline
*/
.c-text--underline-true {
text-decoration: underline; }
/*
Inline
Weight: -200
C-Text のオプション（インライン）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
c-text--inline-false - ブロック表示（デフォルト）
c-text--inline-true - インライン表示
Style guide: text.inline
*/
.c-text--inline-true {
display: inline; }
/*
Size
Weight: -100
C-Text のオプション（文字サイズ）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text.
h2 text. h2 text. h2 text. h2 text. h2 text.
text. text. text. text. text. text. text. text. text. text. text. text. text.
link text. link text. link text. text. text. text. text. text.
b text. b text. b text. b text. b text. b text. b text. b text. text. text. text. text. text.
strong text. strong text. strong text. strong text. strong text. text. text. text. text. text.
label text.
icon txt icon with text. icon with text. icon with text.
span text. span text. span text. span text. span text.
c-text--size-10 - 10px 相当
c-text--size-12 - 12px 相当
c-text--size-14 - 14px 相当（デフォルト）
c-text--size-16 - 16px 相当
c-text--size-18 - 18px 相当
c-text--size-20 - 20px 相当
c-text--size-22 - 22px 相当
c-text--size-24 - 24px 相当
Style guide: text.size
*/
.c-text--size-10 {
font-size: 0.63rem; }
.c-text--size-12 {
font-size: 0.75rem; }
.c-text--size-12--resp {
font-size: 0.75rem; }
@media only screen and (max-width: 667px) {
.c-text--size-12--resp {
font-size: 0.63rem; } }
.c-text--size-14 {
font-size: 0.875rem; }
.c-text--size-14--resp {
font-size: 0.875rem; }
@media only screen and (max-width: 667px) {
.c-text--size-14--resp {
font-size: 0.75rem; } }
.c-text--size-16 {
font-size: 1rem; }
.c-text--size-16--resp {
font-size: 1rem; }
@media only screen and (max-width: 667px) {
.c-text--size-16--resp {
font-size: 0.875rem; } }
.c-text--size-18 {
font-size: 1.13rem; }
.c-text--size-18--resp {
font-size: 1.13rem; }
@media only screen and (max-width: 667px) {
.c-text--size-18--resp {
font-size: 1rem; } }
.c-text--size-20 {
font-size: 1.25rem; }
.c-text--size-20--resp {
font-size: 1.25rem; }
@media only screen and (max-width: 667px) {
.c-text--size-20--resp {
font-size: 1.13rem; } }
.c-text--size-22 {
font-size: 1.38rem; }
.c-text--size-22--resp {
font-size: 1.38rem; }
@media only screen and (max-width: 667px) {
.c-text--size-22--resp {
font-size: 1.25rem; } }
.c-text--size-24 {
font-size: 1.50rem; }
.c-text--size-24--resp {
font-size: 1.5rem; }
@media only screen and (max-width: 667px) {
.c-text--size-24--resp {
font-size: 1.38rem; } }
/*
Text Label
デバイステキストの内部要素（ラベル）のスタイル
Weight: 100
Style guide: text.label
*/
/*
Text Label Types
C-Text のオプション（ラベルタイプ）
Markup: h1 text. h1 text. h1 text. h1 text. h1 text. h2 text. h2 text. h2 text. h2 text. h2 text. h1 text. h1 text. h1 text. h1 text. h1 text.
c-text__link--theme-default - デフォルト
c-text__link--theme-a-a--a - サンプルテーマ a-a--a
c-text__link--theme-a-a--a-underline - サンプルテーマ a-a--a-underline
Style guide: text.link.theme
*/
.c-text__link--theme-a-a--a:link, .c-text__link--theme-a-a--a:visited {
text-decoration: none; }
.c-text__link--theme-a-a--a:hover, .c-text__link--theme-a-a--a:focus {
text-decoration: underline; }
.c-text__link--theme-a-a--a-underline:link, .c-text__link--theme-a-a--a-underline:visited {
text-decoration: underline; }
.c-text__link--theme-a-a--a-underline:hover, .c-text__link--theme-a-a--a-underline:focus {
text-decoration: none; }
.c-text__link--theme-a-a--a {
color: #183561; }
.c-text__link--theme-a-a--a-underline {
color: #009444; }
/*
Textgroup
デバイステキストグループのスタイル
Weight: 300
Style guide: text.group
*/
.c-textgroup {
display: block;
position: relative;
margin: 0;
padding: 0;
list-style: none; }
.c-textgroup__item__bullet {
position: absolute;
top: 0;
left: 0;
vertical-align: middle;
text-align: center; }
/*
Textgroup Default
c-Textgroup のデフォルトスタイル
Markup:
・ textgroup item. textgroup item. textgroup item. textgroup item.
・ nested textgroup item. nested textgroup item. nested textgroup item. ・ nested textgroup item. nested textgroup item. nested textgroup item.
1. textgroup item. textgroup item. textgroup item. textgroup item.
1. nested textgroup item. nested textgroup item. nested textgroup item. 2. nested textgroup item. nested textgroup item. nested textgroup item.
textgroup item. textgroup item. textgroup item. textgroup item.
nested textgroup item. nested textgroup item. nested textgroup item.
nested textgroup item. nested textgroup item. nested textgroup item.
c-textgroup - デフォルトスタイル
Style guide: text.group.default
*/
.c-textgroup__item {
padding-left: 1.6em; }
.c-textgroup__item__bullet {
width: 1.5em; }
/*
Text: Post
CMS から更新されるコンテンツ本文のスタイル
Weight: 300
Style guide: text.post
*/
.c-post {
display: block;
position: relative;
margin: 0;
padding: 0;
text-align: left;
background-color: transparent;
font-style: normal;
font-weight: normal;
border: 0;
color: #000;
font-size: 0.87rem; }
.c-post:before, .c-post:after {
content: "";
display: table; }
.c-post:after {
clear: both; }
.c-post h1, .c-post h2, .c-post h3, .c-post h4, .c-post h5, .c-post h6,
.c-post p, .c-post li, .c-post blockquote, .c-post pre, .c-post hr {
margin: 0;
padding: 0;
line-height: 1.7;
letter-spacing: 0.04em; }
.c-post ul, .c-post ol {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 1.5em; }
.c-post strong, .c-post em, .c-post b, .c-post u, .c-post i, .c-post s, .c-post span, .c-post a {
line-height: 1.7;
letter-spacing: 0.04em; }
.c-post img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
font-size: 0; }
.c-post h1, .c-post h2, .c-post h3, .c-post h4, .c-post h5, .c-post h6,
.c-post p, .c-post ul, .c-post ol {
margin-top: 15px; }
@media only screen and (max-width: 667px) {
.c-post h1, .c-post h2, .c-post h3, .c-post h4, .c-post h5, .c-post h6,
.c-post p, .c-post ul, .c-post ol {
margin-top: 12px; } }
.c-post h1:first-child, .c-post h2:first-child, .c-post h3:first-child, .c-post h4:first-child, .c-post h5:first-child, .c-post h6:first-child,
.c-post p:first-child, .c-post ul:first-child, .c-post ol:first-child {
margin-top: 0; }
.c-post p {
display: block;
font-size: 0.87rem; }
.c-post h2 {
font-size: 1.125rem; }
@media only screen and (max-width: 667px) {
.c-post h2 {
font-size: 1rem; } }
.c-post h3 {
font-size: 1rem; }
@media only screen and (max-width: 667px) {
.c-post h3 {
font-size: 0.9375rem; } }
.c-post h4 {
font-size: 0.9375rem; }
@media only screen and (max-width: 667px) {
.c-post h4 {
font-size: 0.875rem; } }
.c-post h5 {
font-size: 0.875rem; }
@media only screen and (max-width: 667px) {
.c-post h5 {
font-size: 0.8125rem; } }
.c-post h6 {
font-size: 0.75rem; }
@media only screen and (max-width: 667px) {
.c-post h6 {
font-size: 0.6875rem; } }
.c-post blockquote, .c-post pre {
margin-top: 25px; }
.c-post blockquote:first-child, .c-post pre:first-child {
padding-top: 0; }
.c-post blockquote {
padding-left: 15px;
border-left: 3px solid #d0d0d0; }
.c-post pre {
overflow: auto;
max-width: 808px;
padding: 15px;
background: #fff;
border: 1px solid #d8d8d8; }
.c-post strong, .c-post b {
font-weight: bold; }
.c-post em, .c-post i {
font-style: italic;
font-family: 'Times New Roman','ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'ＭＳ Ｐゴシック', serif; }
.c-post u {
text-decoration: underline; }
.c-post s {
text-decoration: line-through; }
.c-post a {
text-decoration: none;
color: #183561;
text-decoration: underline; }
.c-post a:hover, .c-post a:focus {
color: #009444;
text-decoration: underline; }
.c-post hr {
clear: both;
height: 0;
padding-top: 15px;
background: transparent;
border: 0;
border-bottom: 1px solid #cbe4dc; }
.c-post table {
border-spacing: 0;
margin-top: 20px;
border-left: solid 1px #cbe4dc;
border-bottom: solid 1px #cbe4dc; }
.c-post table td {
padding: 10px;
border-top: solid 1px #cbe4dc;
border-right: solid 1px #cbe4dc; }
.c-post table th {
padding: 10px;
background-color: #F5F5F5;
border-top: solid 1px #cbe4dc;
border-right: solid 1px #cbe4dc; }
/*
Post Default
C-Post のデフォルトスタイル
Markup:
h1 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）
h2 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）
h3 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）
h4 見出し
h5 見出し
h6 見出し
p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。
p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。
p 要素の段落。strong 要素。 p 要素の段落。em 要素。 p 要素の段落。b 要素。 p 要素の段落。
p 要素の段落。u 要素。 p 要素の段落。i 要素。 p 要素の段落。s 要素。 p 要素の段落。
p 要素の段落。span 要素。 p 要素の段落。a 要素。 p 要素の段落。
ul 要素のリスト。ul 要素のリスト。ul 要素のリスト。
ul 要素のリスト。ul 要素のリスト。ul 要素のリスト。
ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。
ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。
ol 要素のリスト。ol 要素のリスト。ol 要素のリスト。
ol 要素のリスト。ol 要素のリスト。ol 要素のリスト。
ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。
ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。
h1 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）
h2 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）
h3 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）
h4 見出し
h5 見出し
h6 見出し
p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。
p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。
p 要素の段落。strong 要素。 p 要素の段落。em 要素。 p 要素の段落。b 要素。 p 要素の段落。
p 要素の段落。u 要素。 p 要素の段落。i 要素。 p 要素の段落。s 要素。 p 要素の段落。
p 要素の段落。span 要素。 p 要素の段落。a 要素。 p 要素の段落。
ul 要素のリスト。ul 要素のリスト。ul 要素のリスト。
ul 要素のリスト。ul 要素のリスト。ul 要素のリスト。
ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。
ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。
ol 要素のリスト。ol 要素のリスト。ol 要素のリスト。
ol 要素のリスト。ol 要素のリスト。ol 要素のリスト。
ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。
ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。
Table Heading
Table Description.Table Description. Lorem ipsum Dolor exercitation in adipisicing dolor do nostrud magna pariatur occaecat commodo sint laborum dolore dolor velit voluptate sed laboris eu aute enim dolore officia dolore aute nostrud sit irure Ut amet in cillum veniam cupidatat Duis incididunt sunt ad minim nisi quis consequat enim proident in officia pariatur ad occaecat tempor nulla officia dolore id in enim ea enim labore aliquip ad labore fugiat in consectetur magna ut consequat Ut et ut Duis ea est dolor pariatur irure sed culpa occaecat anim labore aute esse Duis do cillum aute est nulla aliquip Excepteur laborum exercitation officia proident nostrud laboris magna est ex ut in sint deserunt Duis enim ea reprehenderit sunt dolor aute reprehenderit in consequat incididunt Excepteur sit pariatur in dolor do dolor elit tempor reprehenderit dolor id minim fugiat id cillum enim nulla do sed pariatur nulla non eiusmod do culpa sunt dolore aute aliquip nisi qui minim consectetur fugiat esse in sit proident occaecat dolor magna in aute culpa ea aute laboris laborum sed sed nulla laboris et culpa sint aliqua cillum id dolor in dolore quis ad est pariatur est fugiat qui nostrud mollit culpa cillum tempor ut ut eu minim cupidatat enim esse Excepteur occaecat aliquip aliqua eiusmod ea et anim reprehenderit amet aliquip aliqua deserunt cillum veniam tempor sit fugiat incididunt Excepteur ut velit exercitation magna.
Table Heading
Table Description.Table Description. Lorem ipsum Dolor exercitation in adipisicing dolor do nostrud magna pariatur occaecat commodo sint laborum dolore dolor velit voluptate sed laboris eu aute enim dolore officia dolore aute nostrud sit irure Ut amet in cillum veniam cupidatat Duis incididunt sunt ad minim nisi quis consequat enim proident in officia pariatur ad occaecat tempor nulla officia dolore id in enim ea enim labore aliquip ad labore fugiat in consectetur magna ut consequat Ut et ut Duis ea est dolor pariatur irure sed culpa occaecat anim labore aute esse Duis do cillum aute est nulla aliquip Excepteur laborum exercitation officia proident nostrud laboris magna est ex ut in sint deserunt Duis enim ea reprehenderit sunt dolor aute reprehenderit in consequat incididunt Excepteur sit pariatur in dolor do dolor elit tempor reprehenderit dolor id minim fugiat id cillum enim nulla do sed pariatur nulla non eiusmod do culpa sunt dolore aute aliquip nisi qui minim consectetur fugiat esse in sit proident occaecat dolor magna in aute culpa ea aute laboris laborum sed sed nulla laboris et culpa sint aliqua cillum id dolor in dolore quis ad est pariatur est fugiat qui nostrud mollit culpa cillum tempor ut ut eu minim cupidatat enim esse Excepteur occaecat aliquip aliqua eiusmod ea et anim reprehenderit amet aliquip aliqua deserunt cillum veniam tempor sit fugiat incididunt Excepteur ut velit exercitation magna.
Table Heading
Table Description.Table Description. Lorem ipsum Dolor exercitation in adipisicing dolor do nostrud magna pariatur occaecat commodo sint laborum dolore dolor velit voluptate sed laboris eu aute enim dolore officia dolore aute nostrud sit irure Ut amet in cillum veniam cupidatat Duis incididunt sunt ad minim nisi quis consequat enim proident in officia pariatur ad occaecat tempor nulla officia dolore id in enim ea enim labore aliquip ad labore fugiat in consectetur magna ut consequat Ut et ut Duis ea est dolor pariatur irure sed culpa occaecat anim labore aute esse Duis do cillum aute est nulla aliquip Excepteur laborum exercitation officia proident nostrud laboris magna est ex ut in sint deserunt Duis enim ea reprehenderit sunt dolor aute reprehenderit in consequat incididunt Excepteur sit pariatur in dolor do dolor elit tempor reprehenderit dolor id minim fugiat id cillum enim nulla do sed pariatur nulla non eiusmod do culpa sunt dolore aute aliquip nisi qui minim consectetur fugiat esse in sit proident occaecat dolor magna in aute culpa ea aute laboris laborum sed sed nulla laboris et culpa sint aliqua cillum id dolor in dolore quis ad est pariatur est fugiat qui nostrud mollit culpa cillum tempor ut ut eu minim cupidatat enim esse Excepteur occaecat aliquip aliqua eiusmod ea et anim reprehenderit amet aliquip aliqua deserunt cillum veniam tempor sit fugiat incididunt Excepteur ut velit exercitation magna.
<h1>h1 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）</h1>
<h2>h2 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）</h2>
<h3>h3 見出し（HTMLのアウトラインの問題上、本文での使用は非推奨）</h3>
<h4>h4 見出し</h4>
<h5>h5 見出し</h5>
<h6>h6 見出し</h6>
<hr />
<p>p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。</p>
<p>p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。<br />p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。p 要素の段落。</p>
<hr />
<p>p 要素の段落。<strong>strong 要素。</strong>p 要素の段落。<em>em 要素。</em>p 要素の段落。<b>b 要素。</b>p 要素の段落。</p>
<p>p 要素の段落。<u>u 要素。</u>p 要素の段落。<i>i 要素。</i>p 要素の段落。<s>s 要素。</s>p 要素の段落。</p>
<p>p 要素の段落。<span>span 要素。</span>p 要素の段落。<a href="javascript:void(0);">a 要素。</a>p 要素の段落。</p>
<hr />
<ul>
<li>ul 要素のリスト。ul 要素のリスト。ul 要素のリスト。</li>
<li>ul 要素のリスト。ul 要素のリスト。ul 要素のリスト。
<ul>
<li>ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。</li>
<li>ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。ul 要素のリスト（ネスト）。</li>
</ul>
</li>
</ul>
<ol>
<li>ol 要素のリスト。ol 要素のリスト。ol 要素のリスト。</li>
<li>ol 要素のリスト。ol 要素のリスト。ol 要素のリスト。
<ol>
<li>ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。</li>
<li>ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。ol 要素のリスト（ネスト）。</li>
</ol>
</li>
</ol>
c-post - デフォルトスタイル
Style guide: text.post.default
*/
/*
Component Btn
ボタンのスタイル
Weight: -1080
Style guide: btn
*/
.c-btn {
display: block;
overflow: hidden;
position: relative;
width: auto;
margin: 0;
padding: 0;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 1.0;
letter-spacing: 0;
background-color: transparent;
font-weight: normal;
border: 0; }
.c-btn__label {
display: block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 5px 0;
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 1.2;
letter-spacing: 0;
background-color: transparent;
font-weight: normal;
font-size: 0.87em;
border: 0;
cursor: pointer;
appearance: none; }
/*
Btn : Default
C-Btn のデフォルトスタイル
Weight: -100
Markup:
label
c-btn - デフォルトスタイル
Style guide: btn.default
*/
.c-btn {
display: block; }
.c-btn__label {
display: block; }
/*
Btn : Themes
C-Btn のオプション（テーマ）
Weight: -100
Markup:
label
label
c-btn--theme-default - デフォルト
c-btn--theme-a-a--a - サンプルテーマ a-a--a
c-btn--theme-a-b--a - サンプルテーマ a-b--a
c-btn--theme-a-c--a - サンプルテーマ a-c--a
c-btn--theme-b-a--a - サンプルテーマ b-a--a
c-btn--theme-b-b--a - サンプルテーマ b-b--a
c-btn--theme-c-a--a - サンプルテーマ c-a--a
c-btn--theme-d-a--a - サンプルテーマ d-a--a
Style guide: btn.theme
*/
.c-btn--theme-a-a--a {
width: 220px;
margin-left: auto;
margin-right: auto;
background-color: #009444;
border-radius: 4px;
box-shadow: 0px 4px 0px 0px #007200;
margin-bottom: 4px; }
.c-btn--theme-a-a--a > .c-btn__label {
padding: 18px 0 15px;
font-size: 1rem; }
.c-btn--theme-a-a--a:hover {
opacity: 0.8; }
@media only screen and (max-width: 667px) {
.c-btn--theme-a-a--a {
width: 100%; } }
.c-btn--theme-a-b--a {
margin-bottom: 15px;
width: 220px;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
border-style: solid;
border-color: #cbe4dc;
border-width: 1px;
background-color: #fff;
box-shadow: 0px 4px 0px 0px #e3eeea; }
.c-btn--theme-a-b--a:hover {
opacity: 0.8; }
.c-btn--theme-a-c--a {
margin-bottom: 15px;
width: 220px;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
background-color: #a0afb2;
box-shadow: 0px 4px 0px 0px #899ea2; }
.c-btn--theme-a-c--a > .c-btn__label {
padding: 18px 0 15px;
font-size: 1rem; }
.c-btn--theme-a-c--a:hover {
opacity: 0.8; }
@media only screen and (max-width: 667px) {
.c-btn--theme-a-c--a {
width: 100%; } }
.c-btn--theme-b-a--a {
border-radius: 4px;
background-color: #345abb;
box-shadow: 0px 4px 0px 0px #2646aa;
width: 48px;
height: 48px; }
.c-btn--theme-b-a--a > .c-btn__label {
color: #fff; }
@media only screen and (max-width: 667px) {
.c-btn--theme-b-a--a {
width: 30px;
height: 30px; } }
.c-btn--theme-b-a--a:hover {
opacity: 0.9; }
.c-btn--theme-b-b--a {
background-color: #009444;
border-radius: 4px;
box-shadow: 0px 4px 0px 0px #007200;
width: 48px;
height: 48px; }
.c-btn--theme-b-b--a > .c-btn__label {
color: #fff; }
@media only screen and (max-width: 667px) {
.c-btn--theme-b-b--a {
width: 30px;
height: 30px; } }
.c-btn--theme-b-b--a:hover {
opacity: 0.9; }
.c-btn--theme-b-b--a.footer-a-a__twitter {
background-color: #09bbdb;
box-shadow: 0px 4px 0px 0px #3697b5; }
.c-btn--theme-c-a--a {
width: 40px;
height: 40px;
border-radius: 4px;
border-color: #d4e5e8;
border-width: 1px;
border-style: solid;
background-color: #fff; }
.c-btn--theme-c-a--a > .c-btn__label {
color: #009444; }
.c-btn--theme-c-a--a--current {
background-color: #009444; }
.c-btn--theme-c-a--a--current > .c-btn__label {
color: #fff; }
.c-btn--theme-d-a--a {
border-width: 1px;
border-color: #9eaabd;
border-style: solid;
border-radius: 4px;
background-color: #fff; }
.c-btn--theme-d-a--a > .c-btn__label {
padding: 9px 0;
color: #183561; }
.c-btn--theme-d-a--a.disabled {
background-color: #009444; }
.c-btn--theme-d-a--a.disabled > .c-btn__label {
color: #fff; }
.c-btn--theme-d-a--a.active {
background-color: #009444; }
.c-btn--theme-d-a--a.active > .c-btn__label {
color: #fff; }
/*
Btn label
ボタンの内部要素（ラベル）のスタイル
Weight: -100
Style guide: btn.label
*/
/*
Btn Label : Types
C-Btn のオプション（ラベルタイプ）
Markup:
label
label
c-btn__label--type-b-a--a - ラベルタイプ b-a--a
c-btn__label--type-c-a--a - ラベルタイプ c-a--a
Styleguide btn.label.type
*/
.c-btn__label--type-b-a--a, .c-btn__label--type-c-a--a {
overflow: hidden;
padding: 0;
line-height: 0;
text-indent: -100%;
white-space: nowrap;
color: transparent;
background-repeat: no-repeat;
font-size: 0; }
.c-btn__label--type-b-a--a {
width: 64px;
height: 85px;
background-position: 0px 0px;
background-image: url(../img/common/sprite_btn.png); }
@media only screen and (max-width: 667px) {
.c-btn__label--type-b-a--a {
width: 40px;
height: 40px;
background-image: url(../img/common/sprite_btn_retina.png);
background-position: 0px 0px;
background-size: 62.5px 40px; } }
.c-btn__label--type-c-a--a {
width: 30px;
height: 30px;
background-position: -118px -53px;
background-image: url(../img/common/sprite_btn.png); }
@media only screen and (max-width: 667px) {
.c-btn__label--type-c-a--a {
width: 21.5px;
height: 21.5px;
background-image: url(../img/common/sprite_btn_retina.png);
background-position: -41px 0px;
background-size: 62.5px 40px; } }
/*
Btn Label : Themes
C-Btn のオプション（ラベルのテーマ）
Markup:
label
label
c-btn__label--theme-a-a--a - ラベルタイプ a-a--a
c-btn__label--theme-a-a--b - ラベルタイプ a-a--b
c-btn__label--theme-a-a--c - ラベルタイプ a-a--c
c-btn__label--theme-a-a--d - ラベルタイプ a-a--d
Styleguide btn.label.theme
*/
.c-btn__label--theme-a-a--a, .header__nav__btn__label--b {
color: #353535; }
.c-btn__label--theme-a-a--b, .header__nav__btn__label--a {
font-family: 'Montserrat', sans-serif;
color: #009444; }
.c-btn__label--theme-a-a--c {
color: #fff;
font-weight: bold; }
.c-btn__label--theme-a-a--d {
color: #353535;
font-weight: bold; }
/*
Btn Label : Size
C-Btn のオプション（ラベルのサイズ）
Markup:
label
label
c-btn__label--size-10 - 10px 相当
c-btn__label--size-12 - 12px 相当
c-btn__label--size-14 - 14px 相当（デフォルト）
c-btn__label--size-16 - 16px 相当
c-btn__label--size-18 - 18px 相当
c-btn__label--size-20 - 20px 相当
c-btn__label--size-22 - 22px 相当
c-btn__label--size-24 - 24px 相当
Styleguide btn.label.size
*/
.c-btn__label--size-10 {
font-size: 0.63rem; }
.c-btn__label--size-12 {
font-size: 0.75rem; }
.c-btn__label--size-14 {
font-size: 0.87rem; }
.c-btn__label--size-16 {
font-size: 1rem; }
.c-btn__label--size-18 {
font-size: 1.13rem; }
.c-btn__label--size-20, .header__nav__btn__label--a {
font-size: 1.25rem; }
.c-btn__label--size-22 {
font-size: 1.38rem; }
.c-btn__label--size-24 {
font-size: 1.50rem; }
/*
Btn Label : Position
ModBtn のオプション（ラベルの位置）
Markup:
label
c-btn__label--inline-false - インライン、無効
c-btn__label--inline-true - インライン、有効
c-btn__label--absolute-center - 絶対配置、上下左右中央
c-btn__label--absolute-left - 絶対配置、上下中央、左寄せ
c-btn__label--absolute-right - 絶対配置、上下中央、右寄せ
Style guide: btn.label.position
*/
.c-btn__label--inline-true {
display: inline-block;
width: auto; }
.c-btn__label--absolute-center, .c-btn__label--absolute-left, .c-btn__label--absolute-right {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0; }
.c-btn__label--absolute-center {
right: 0;
left: 0;
margin: auto; }
.c-btn__label--absolute-left {
left: 0; }
.c-btn__label--absolute-right {
right: 0; }
/*
Btn Icon
ボタンの内部要素（アイコン）のスタイル
Weight: 200
Style guide: btn.icon
*/
/*
Btn Icon : Position
ModBtn のオプション（アイコンの位置）
Markup:
label
c-btn__icon--inline-left - インライン、左
c-btn__icon--inline-right - インライン、右
c-btn__icon--block-top - ブロック、上
c-btn__icon--block-bottom - ブロック、下
c-btn__icon--absolute-left - 絶対配置、左
c-btn__icon--absolute-right - 絶対配置、右
c-btn__icon--absolute-center - 絶対配置、上下左右中央
Style guide: btn.icon.position
*/
.c-btn__icon--inline-left, .c-btn__icon--inline-right {
display: inline-block; }
.c-btn__icon--inline-left {
margin-right: 5px; }
.c-btn__icon--inline-right {
margin-left: 5px; }
.c-btn__icon--block-top {
margin: 0 auto 5px; }
.c-btn__icon--block-bottom {
margin: 5px auto 0; }
.c-btn__icon--absolute-left, .c-btn__icon--absolute-right, .c-btn__icon--absolute-center {
position: absolute;
top: 0;
bottom: 0;
margin: auto; }
.c-btn__icon--absolute-left {
left: 0; }
.c-btn__icon--absolute-right {
right: 0; }
.c-btn__icon--absolute-center {
left: 0;
right: 0; }
/*
Component Pict
画像やそれに準ずる要素のスタイル
Weight: -1070
Style guide: pict
*/
.c-pict {
display: block;
position: relative;
width: auto;
height: auto;
margin: 0;
padding: 0;
text-align: left;
line-height: 0;
letter-spacing: 0;
background-color: transparent;
font-size: 0;
font-weight: normal;
border: 0; }
.c-pict__src {
display: inline-block;
margin: 0;
padding: 0;
font-size: 0;
border: 0; }
/*
Pict : Default
C-Pict のデフォルトスタイル
Markup:
Weight: -100
c-pict - デフォルトスタイル
Style guide: pict.default
*/
/*
Pict : Aligns
C-Pict のオプション（整列）
Markup:
c-pict--align-left - 左寄せ（デフォルト）
c-pict--align-center - 中央寄せ
c-pict--align-right - 右寄せ
Style guide: pict.align
*/
.c-pict--align-left {
text-align: left; }
.c-pict--align-center {
text-align: center; }
.c-pict--align-right {
text-align: right; }
/*
Pict : Fitting
C-Pict のオプション（サイズのフィット）
Markup:
c-pict__src--fit-none - フィットしない（デフォルト）
c-pict__src--fit-width - 幅にフィット
c-pict__src--fit-height - 高さにフィット
Style guide: pict.fit
*/
.c-pict__src--fit-width {
width: 100%;
height: auto; }
.c-pict__src--fit-height {
width: auto;
height: 100%; }
/*
Component Grid
グリッドのスタイル
Weight: -1040
Style guide: grid
*/
.c-grid, .c-grid-a-a, .c-grid-b-a, .c-grid-c-a {
display: block;
position: relative;
width: auto;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
vertical-align: top;
background-color: transparent;
border: 0; }
.c-grid:before, .c-grid-a-a:before, .c-grid-b-a:before, .c-grid-c-a:before, .c-grid:after, .c-grid-a-a:after, .c-grid-b-a:after, .c-grid-c-a:after {
content: "";
display: table; }
.c-grid:after, .c-grid-a-a:after, .c-grid-b-a:after, .c-grid-c-a:after {
clear: both; }
.c-grid__cell, .c-grid__cell-a, .c-grid-a-a__cell--a, .c-grid-a-a__cell--b, .c-grid-b-a__cell--a, .c-grid-b-a__cell--b, .c-grid-b-a__cell--c, .c-grid-c-a__cell--a, .c-grid-c-a__cell--b, .c-grid-c-a__cell--c, .c-grid-c-a__cell--d {
display: block;
overflow: hidden;
position: relative;
width: auto;
margin: 0;
padding: 0;
text-align: left;
vertical-align: top;
border: 0; }
.c-grid__cell:before, .c-grid__cell-a:before, .c-grid-a-a__cell--a:before, .c-grid-a-a__cell--b:before, .c-grid-b-a__cell--a:before, .c-grid-b-a__cell--b:before, .c-grid-b-a__cell--c:before, .c-grid-c-a__cell--a:before, .c-grid-c-a__cell--b:before, .c-grid-c-a__cell--c:before, .c-grid-c-a__cell--d:before, .c-grid__cell:after, .c-grid__cell-a:after, .c-grid-a-a__cell--a:after, .c-grid-a-a__cell--b:after, .c-grid-b-a__cell--a:after, .c-grid-b-a__cell--b:after, .c-grid-b-a__cell--c:after, .c-grid-c-a__cell--a:after, .c-grid-c-a__cell--b:after, .c-grid-c-a__cell--c:after, .c-grid-c-a__cell--d:after {
content: "";
display: table; }
.c-grid__cell:after, .c-grid__cell-a:after, .c-grid-a-a__cell--a:after, .c-grid-a-a__cell--b:after, .c-grid-b-a__cell--a:after, .c-grid-b-a__cell--b:after, .c-grid-b-a__cell--c:after, .c-grid-c-a__cell--a:after, .c-grid-c-a__cell--b:after, .c-grid-c-a__cell--c:after, .c-grid-c-a__cell--d:after {
clear: both; }
/*
Grid : Default
C-Grid のデフォルトスタイル（カラムの設定がないので使用する際に都度設定する必要がある）
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
c-grid - デフォルトスタイル
Style guide: grid.default
*/
.c-grid__cell-a {
width: 150px !important; }
/*
Grid A-A
C-Grid の二分割スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
c-grid-a-a - 均等二分割スタイル
Style guide: grid.a.a
*/
.c-grid-a-a__cell--a {
float: left;
width: 49.9%; }
.c-grid-a-a__cell--b {
float: right;
width: 49.9%; }
/*
Grid B-A
C-Grid の三分割スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
c-grid-b-a - 均等三分割スタイル
Style guide: grid.b.a
*/
.c-grid-b-a__cell--a {
float: left;
width: 33.3%; }
.c-grid-b-a__cell--b {
float: left;
width: 33.3%; }
.c-grid-b-a__cell--c {
float: right;
width: 33.3%; }
/*
Grid C-A
C-Grid の四分割スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-c-a - 均等四分割スタイル
Style guide: grid.c.a
*/
.c-grid-c-a__cell--a {
float: left;
width: 24.9%; }
.c-grid-c-a__cell--b {
float: left;
width: 25%; }
.c-grid-c-a__cell--c {
float: left;
width: 24.9%; }
.c-grid-c-a__cell--d {
float: right;
width: 25%; }
/*
Grid Ver.2
グリッドのスタイル（`display: table-cell;` 版）
Weight: 100
Style guide: grid.ver2
*/
.c-grid2 {
display: table;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
vertical-align: top;
border: 0;
box-sizing: border-box; }
.c-grid2__cell {
display: table-cell;
position: relative;
width: auto;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
vertical-align: inherit;
border: 0;
box-sizing: border-box; }
/*
Grid2 : Default
C-Grid2 のデフォルトスタイル。内包するグリッドの各カラム幅はコンテンツに応じて自動調整される。
グリッドのセルに内包されている要素の高さを揃えたい場合は `height:100%` を設定し、
`box-sizing:border-box;` を指定している要素の場合は、更に `padding` の設定を解除する（Webkit、Blink 対策）。
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid2 - デフォルトスタイル
Weight: -100
Style guide: grid.ver2.default
*/
/*
Component Grid-Responsive
レスポンシブグリッドのスタイル
Weight: -1040
Style guide: grid-responsive
*/
.c-grid-responsive {
display: block;
box-sizing: border-box;
position: relative;
width: auto;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
vertical-align: top;
background-color: transparent;
border: 0; }
.c-grid-responsive:before, .c-grid-responsive:after {
content: "";
display: table; }
.c-grid-responsive:after {
clear: both; }
.c-grid-responsive__cell {
display: block;
box-sizing: border-box;
overflow: hidden;
position: relative;
width: auto;
margin: 0;
padding: 0;
text-align: left;
vertical-align: top;
border: 0; }
.c-grid-responsive__cell:before, .c-grid-responsive__cell:after {
content: "";
display: table; }
.c-grid-responsive__cell:after {
clear: both; }
@media only screen and (max-width: 667px) {
.c-grid-responsive__cell--drop {
width: 100%;
float: none;
padding-left: 0;
padding-right: 0; } }
/*
Grid-Responsive : Default
Grid-Responsive のデフォルトスタイル（カラムの設定がないので使用する際に都度設定する必要がある）
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
{{!-- カラム落ち --}}
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-responsive - デフォルトスタイル
Style guide: grid-responsive.default
*/
/*
Grid-Responsive : A
Grid-Responsive の 2列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-responsive-a - デフォルトスタイル
Style guide: grid-responsive.a
*/
.c-grid-responsive-a__cell--a {
width: 50%;
float: left; }
.c-grid-responsive-a__cell--b {
width: 50%;
float: left; }
/*
Grid-Responsive : B
Grid-Responsive の 3列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-responsive-b - デフォルトスタイル
Style guide: grid-responsive.b
*/
.c-grid-responsive-b__cell--a {
width: 33.3%;
float: left; }
.c-grid-responsive-b__cell--b {
width: 33.3%;
float: left; }
.c-grid-responsive-b__cell--c {
width: 33.3%;
float: left; }
/*
Grid-Responsive : C
Grid-Responsive の 4列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-responsive-c - デフォルトスタイル
Style guide: grid-responsive.c
*/
.c-grid-responsive-c__cell--a {
width: 25%;
float: left; }
.c-grid-responsive-c__cell--b {
width: 25%;
float: left; }
.c-grid-responsive-c__cell--c {
width: 25%;
float: left; }
.c-grid-responsive-c__cell--d {
width: 25%;
float: left; }
/*
Grid-Responsive : D
C-ResponsiveGridA の 4列 → 2列 スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-responsive-d - デフォルトスタイル
Style guide: grid-responsive.d
*/
.c-grid-responsive-d__cell--a {
width: 25%;
float: left; }
@media only screen and (max-width: 667px) {
.c-grid-responsive-d__cell--a {
width: 50%;
padding-left: 0;
padding-right: 0; } }
.c-grid-responsive-d__cell--b {
width: 25%;
float: left; }
@media only screen and (max-width: 667px) {
.c-grid-responsive-d__cell--b {
width: 50%;
padding-left: 0;
padding-right: 0; } }
.c-grid-responsive-d__cell--c {
width: 25%;
float: left; }
@media only screen and (max-width: 667px) {
.c-grid-responsive-d__cell--c {
width: 50%;
padding-left: 0;
padding-right: 0; } }
.c-grid-responsive-d__cell--d {
width: 25%;
float: left; }
@media only screen and (max-width: 667px) {
.c-grid-responsive-d__cell--d {
width: 50%;
padding-left: 0;
padding-right: 0; } }
/*
Grid-Responsive2
レスポンシブグリッドのスタイル（`display: table-cell;` 版）
Weight: 100
Style guide: grid-responsive.ver2
*/
.c-grid-responsive2 {
display: table;
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
vertical-align: top;
border: 0; }
.c-grid-responsive2__cell {
display: table-cell;
box-sizing: border-box;
position: relative;
width: auto;
height: 100%;
margin: 0;
padding: 0;
text-align: left;
vertical-align: inherit;
border: 0; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2__cell--drop {
display: block;
width: 100%;
float: none;
padding-left: 0;
padding-right: 0; } }
/*
Grid-Responsive2 : Default
Grid-Responsive2 デフォルトスタイル
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
{{!-- カラム落ち --}}
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-responsive2 - デフォルトスタイル
Style guide: grid-responsive.ver2.default
*/
/*
Grid-Responsive2 : A
Grid-Responsive2 の 2列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-responsive2-a - デフォルトスタイル
Style guide: grid-responsive.ver2.a
*/
.c-grid-responsive2-a__cell--a {
width: 50%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-a__cell--a {
width: auto; } }
.c-grid-responsive2-a__cell--b {
width: 50%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-a__cell--b {
width: auto; } }
/*
Grid-Responsive2 : B
Grid-Responsive2 の 3列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-grid-responsive2-b - デフォルトスタイル
Style guide: grid-responsive.ver2.b
*/
.c-grid-responsive2-b__cell--a {
width: 33.3%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-b__cell--a {
width: auto; } }
.c-grid-responsive2-b__cell--b {
width: 33.3%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-b__cell--b {
width: auto; } }
.c-grid-responsive2-b__cell--c {
width: 33.3%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-b__cell--c {
width: auto; } }
/*
Grid-Responsive2 : C
Grid-Responsive2 の 4列 カラム落ち スタイル
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
Style guide: grid-responsive.ver2.c
*/
.c-grid-responsive2-c__cell--a {
width: 25%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-c__cell--a {
width: auto; } }
.c-grid-responsive2-c__cell--b {
width: 25%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-c__cell--b {
width: auto; } }
.c-grid-responsive2-c__cell--c {
width: 25%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-c__cell--c {
width: auto; } }
.c-grid-responsive2-c__cell--d {
width: 25%; }
@media only screen and (max-width: 667px) {
.c-grid-responsive2-c__cell--d {
width: auto; } }
/*
Component Box
ボックスのスタイル
Weight: -1050
Style guide: box
*/
.c-box {
display: block;
position: relative;
width: auto;
margin: 0;
padding: 0;
text-align: left;
background-color: transparent;
border: 0; }
.c-box:before, .c-box:after {
content: "";
display: table; }
.c-box:after {
clear: both; }
.c-box__container {
display: block;
position: relative;
margin: 0;
text-align: left; }
.c-box__container:before, .c-box__container:after {
content: "";
display: table; }
.c-box__container:after {
clear: both; }
/*
Box Default
ComponentBox のデフォルトスタイル
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-box - デフォルトスタイル
Style guide: box.default
*/
/*
Box : Themes
ModBox のオプション（テーマ）
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-box--theme-default - デフォルト
c-box--theme-a-a - テーマ a-a
c-box--theme-a-b - テーマ a-b
c-box--theme-a-c - テーマ a-c
c-box--theme-a-d - テーマ a-d
c-box--theme-a-e - テーマ a-e
c-box--theme-a-f - テーマ a-f
c-box--theme-a-g - テーマ a-g
c-box--theme-a-h - テーマ a-h
c-box--theme-a-i - テーマ a-i
c-box--theme-a-j - テーマ a-j
Style guide: box.theme
*/
.c-box--theme-a-a {
background-color: #fff;
border-top: 4px solid #009444; }
.c-box--theme-a-b {
color: #fff;
background-color: #333; }
.c-box--theme-a-c {
border: 1px solid #e67575;
border-radius: 5px; }
.c-box--theme-a-d {
color: #fff;
background-color: #009444; }
.c-box--theme-a-e {
border-bottom: 1px solid #cbe4dc; }
.c-box--theme-a-f {
border: 1px solid #cbe4dc;
border-radius: 5px; }
.c-box--theme-a-g {
background-color: #effaf3; }
.c-box--theme-a-h {
border: 1px solid #ef8282;
border-radius: 4px; }
.c-box--theme-a-i {
background-color: #fadfdf; }
.c-box--theme-a-j {
border-top: 1px solid #cbe4dc; }
/*
Box : Texture
ModBox のオプション（テクスチャの指定）
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-box--texture-none - デフォルト
c-box--texture-a-a - テクスチャタイプ a-a
c-box--texture-a-b - テクスチャタイプ a-b
Style guide: box.texture
*/
.c-box--texture-a-a {
background-image: url(../../img/bg_dot.png);
background-repeat: repeat;
background-position: 0 0; }
/*
Box Container
ボックスの内部要素（コンテナ）のスタイル
Weight: 100
Style guide: box.container
*/
/*
Box Container : Width
ModBox のオプション（コンテナの幅指定）
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-box__container--width-auto - デフォルト
c-box__container--width-a-a - タイプ a-a
c-box__container--width-b-a - タイプ b-a PC:1040px SP: 左右マージン20px
c-box__container--width-b-b - タイプ b-b PC:800px SP: 左右マージン20px
Style guide: box.container.width
*/
.c-box__container--width-a-a {
width: 100%;
margin: 0 auto; }
.c-box__container--width-b-a {
max-width: 1040px;
margin: 0 auto; }
@media only screen and (max-width: 1024px) {
.c-box__container--width-b-a {
max-width: none;
padding-left: 20px;
padding-right: 20px; } }
.c-box__container--width-b-b {
max-width: 980px;
margin: 0 auto; }
@media only screen and (max-width: 1024px) {
.c-box__container--width-b-b {
max-width: none;
padding-left: 20px;
padding-right: 20px; } }
.c-box__container--width-b-c {
max-width: 710px;
margin: 0 auto; }
@media only screen and (max-width: 1024px) {
.c-box__container--width-b-c {
max-width: none;
padding-left: 20px;
padding-right: 20px; } }
.c-box__container--width-b-d {
max-width: 1040px;
margin: 35px auto 50px; }
@media only screen and (max-width: 1024px) {
.c-box__container--width-b-d {
max-width: none;
padding-left: 20px;
padding-right: 20px; } }
.c-box__container--width-b-e {
margin: 35px auto 50px;
max-width: none;
padding-left: 20px;
padding-right: 20px; }
/*
Box Container : Min Height
ModBox のオプション（コンテナの最小高さ指定）
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
c-box__container--min-height-auto - デフォルト
c-box__container--min-height-a-a - タイプ a-a PC:300px SP: 100px
Style guide: box.container.minheight
*/
.c-box__container--min-height-a-a {
min-height: 300px; }
@media only screen and (max-width: 1024px) {
.c-box__container--min-height-a-a {
min-height: 100px; } }
/*
Component Table
テーブルのスタイル
Weight: -1040
Style guide: table
*/
.c-table-a-a {
display: table;
width: auto;
background-color: transparent;
border-collapse: collapse;
border-style: solid;
border-width: 1px; }
.c-table-a-a__cell--a, .c-table-a-a__cell--b {
display: table-cell;
line-height: 1.5;
letter-spacing: 0.04em;
text-align: left;
word-break: break-all;
word-wrap: break-word;
background-color: transparent;
font-size: 15px;
font-weight: normal;
border-style: solid;
border-width: 1px; }
/*
Table A
C-Table のスタイル
Markup:
Table Heading
Table Description
Table Heading
Table Description
c-table-a-a - スタイル a-a
Style guide: table.a.a
*/
.c-table-a-a__cell--a, .c-table-a-a__cell--b {
padding: 13px 0 10px;
vertical-align: top;
border-color: #ccc;
border-left: 0;
border-right: 0; }
.c-table-a-a {
border-color: #ccc;
border-left: 0;
border-right: 0; }
.c-table-a-a__cell--a {
color: #333; }
.c-table-b-a {
width: 100%;
border-top: 1px solid #ddd;
border-spacing: 0; }
.c-table-b-a > thead > tr > th,
.c-table-b-a > tbody > tr > th,
.c-table-b-a > tfoot > tr > th {
text-align: center;
background-color: #fdedde;
border-bottom: 1px solid #ddd;
padding: 10px 15px; }
@media only screen and (max-width: 667px) {
.c-table-b-a > thead > tr > th,
.c-table-b-a > tbody > tr > th,
.c-table-b-a > tfoot > tr > th {
padding: 10px 5px; } }
.c-table-b-a > thead > tr > td,
.c-table-b-a > tbody > tr > td,
.c-table-b-a > tfoot > tr > td {
border-bottom: 1px solid #ddd;
padding: 20px 15px; }
@media only screen and (max-width: 667px) {
.c-table-b-a > thead > tr > td,
.c-table-b-a > tbody > tr > td,
.c-table-b-a > tfoot > tr > td {
padding: 10px 5px; } }
.c-table-b-a > tbody > tr:nth-of-type(even) {
background-color: #fcfcfc; }
/*
Component Field
フィールドのスタイル
Weight: -1030
Style guide: field
*/
/*
c-textfield
テキストフィールドのスタイル
Weight: 100
Style guide: field.text
*/
.c-textfield {
display: block;
position: relative;
width: auto;
height: auto;
margin: 0;
line-height: 0;
vertical-align: top;
font-size: 0;
border: 0; }
.c-textfield__input, .c-textfield__area {
width: 100%;
display: block;
position: relative;
margin: 0;
padding: 15px 10px 16px 10px;
vertical-align: top;
background-color: #fff;
font-weight: normal;
font-size: 1rem;
border-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #cbe4dc; }
/*
Default
C-Textfield のデフォルトスタイル
Weight: -100
Markup:
c-textfield - デフォルトスタイル
Style guide: field.text.default
*/
.c-textfield {
line-height: 1.0; }
.c-textfield__input {
line-height: 1.0; }
.c-textfield__area {
line-height: 1.5; }
.error-message {
display: block;
font-size: 1rem;
margin-top: .5rem;
color: #f31d00; }
/*
c-togglefield
トグルフィールド（checkbox、radio）のスタイル
Weight: 200
Style guide: field.toggle
*/
.c-checkfield, .c-radiofield {
display: inline-block;
position: relative;
line-height: 1.7; }
.c-checkfield__input, .c-radiofield__input {
position: relative;
vertical-align: middle;
top: -1px; }
.c-checkfield__label, .c-radiofield__label {
display: inline;
padding-left: 5px;
font-size: 14px;
line-height: 1; }
/*
Checkbox
Togglefield のチェックボックススタイル
Markup:
text label
c-checkfield - デフォルトスタイル
Style guide: field.toggle.checkbox
*/
/*
Radio
C-Togglefield のラジオボタンスタイル
Markup:
text label
c-radiofield - デフォルトスタイル
Style guide: field.toggle.radio
*/
/*
c-selectfield
セレクトフィールドのスタイル
Weight: 300
Style guide: field.select
*/
.c-selectfield {
overflow: hidden;
display: inline-block;
position: relative;
border: 0;
padding: 0px;
background-color: #FFF;
width: 100%; }
.c-selectfield::before {
display: block;
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 25px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAICAQAAACM2m15AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCR0KHiZ+KGPlAAAAfElEQVQI13XMoQ3CUBQF0MNnCQbBMQEERBXI+hoM7ECYgAk6AAgMqQbbMapqKpo0RUChIeWpm3ty32h3sPfvjuPZzcR0EE+2QSuRDmAq0QY0YucfvIg1BFDbyHqYWavpmErk/s4PkeoVw2dRWsmRWyq7MvReFuauFopv9QSc8xwkCO+ECQAAAABJRU5ErkJggg==");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 50% auto;
pointer-events: none; }
.c-selectfield__select {
-webkit-appearance: none;
appearance: none;
outline: none;
border-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #cbe4dc;
margin: 0;
padding: 0;
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
font-size: 1rem;
width: 100%;
padding: 15px 20px 15px 5px; }
/*
Default
C-Selectfield のデフォルトスタイル
Weight: -100
Markup:
label-{{modifier_class}}-option-n
label-{{modifier_class}}-option-1
label-{{modifier_class}}-option-2
label-{{modifier_class}}-option-3
c-selectfield - デフォルトスタイル
Style guide: field.select.default
*/
.c-selectfield__select {
line-height: 1.2; }
.c-selectfield__select::-ms-expand {
display: none; }
.c-selectfield__withlabel {
display: flex;
justify-content: flex-end;
align-items: center; }
@media only screen and (max-width: 1024px) {
.c-selectfield__withlabel {
justify-content: flex-start;
font-size: 0.875rem;
margin-top: 0; } }
.c-selectfield__withlabel span {
display: inline-block;
margin-right: 20px; }
@media only screen and (max-width: 1024px) {
.c-selectfield__withlabel .p-block-e-a__item__cell--b {
width: calc(100% - 50px) !important;
font-size: 0.875rem; } }
/*
Component Link
リンクのスタイル
add 191015 ticket#64197
*/
.c-kana-link {
display: flex;
padding-left: 0;
list-style: none;
align-items: center; }
@media only screen and (max-width: 1024px) {
.c-kana-link {
position: relative;
padding: 10px 20px;
background-color: #E8F8F0;
overflow: auto; }
.c-kana-link__title a {
position: relative; }
.c-kana-link__title a:not([href]) {
cursor: default; }
.c-kana-link__title:not(:first-of-type) a {
padding-left: 30px; }
.c-kana-link__title:not(:last-of-type):after {
position: absolute; } }
.c-kana-link.tab {
padding: 10px 20px;
background-color: #E8F8F0;
overflow-x: auto; }
.c-kana-link__item:not(:last-of-type):after {
content: "|";
display: inline-block;
margin: 0 15px;
color: #ddd; }
@media only screen and (max-width: 1024px) {
.c-kana-link__item:not(:last-of-type):after {
display: inline; } }
.c-kana-link__item:last-of-type {
padding-right: 20px; }
.c-kana-link__item a, .c-kana-link__item span {
text-decoration: none;
cursor: pointer; }
@media only screen and (max-width: 1024px) {
.c-kana-link__item a, .c-kana-link__item span {
font-size: 14px; } }
.c-kana-link__item a[href], .c-kana-link__item span {
color: #183561; }
.c-kana-link__item span:hover, .c-kana-link__item a[href]:hover {
color: #009444; }
.c-kana-link__item.disabled {
color: #ddd; }
.c-kana-link-wrap {
position: relative; }
.c-kana-link-wrap ::-webkit-scrollbar {
display: none; }
.c-kana-link-txt {
position: absolute;
right: 0px;
bottom: -20px;
padding-right: 17px;
font-size: 12px;
color: #009444;
background: url(../img/swipe-left.svg) right center/contain no-repeat; }
@media only screen and (min-width: 667px) {
.c-kana-link-txt {
display: none; } }
.c-dl {
display: flex;
flex-wrap: wrap;
margin-top: 0;
color: #000; }
.c-dl__dt {
padding: 10px 0;
width: 150px;
margin-bottom: 5px;
background-color: #effaf3;
text-align: center; }
@media only screen and (max-width: 1024px) {
.c-dl__dt {
font-size: 13px;
width: 50%; } }
.c-dl__dd {
width: calc(100% - 150px);
margin-left: 0;
margin-bottom: 5px;
padding: 10px 30px; }
@media only screen and (max-width: 1024px) {
.c-dl__dd {
width: 50%;
padding: 10px 10px;
text-align: left;
font-size: 13px; } }
_:lang(x)::-ms-backdrop, .c-search__btn {
padding: 15px 0 !important; }
.c-search {
display: flex;
align-items: center;
margin-bottom: 30px; }
@media only screen and (max-width: 1024px) {
.c-search {
display: block; } }
.c-search__btn {
width: 270px;
padding: 18px 0 15px;
margin-left: 0;
margin-bottom: 0;
margin-right: 30px;
font-size: 1rem;
cursor: pointer; }
@media only screen and (max-width: 1024px) {
.c-search__btn {
width: 140px;
padding: 3px 0;
font-size: 12px; } }
.c-search__btn input {
display: inline-block;
font-weight: bold;
width: auto; }
.c-search__btn .c-icon--type-g-a--a {
display: inline-block;
margin-right: 0;
background: url(../../img/common/sprite_search.png) center center/contain no-repeat; }
@media only screen and (max-width: 1024px) {
.c-search__btn .c-icon--type-g-a--a {
max-width: 15px; } }
.c-search__btn.selected {
background-color: #F5FCF6; }
.c-search__btn.selected .c-icon--type-g-a--a {
display: inline-block;
margin-right: 0;
background: url(../../img/common/sprite_search_selected.png) center center/contain no-repeat; }
.c-search__selected span {
display: inline-block;
font-size: 14px; }
@media only screen and (max-width: 1024px) {
.c-search__selected span {
display: block;
margin-top: 20px;
font-size: 12px; } }
.c-search__selected span.selected-tag {
padding: 7px 10px;
margin-right: 10px;
color: #183561;
border: 1px solid #183561;
border-radius: 5px; }
@media only screen and (max-width: 1024px) {
.c-search__selected span.selected-tag {
display: inline-block;
margin-top: 7px;
padding: 5px 20px; } }
.c-search__selected span.selected-tag .tag-after {
display: inline-block;
margin-left: 10px;
vertical-align: text-bottom;
cursor: pointer; }
.c-search-modal {
display: none; }
.c-search-modal.active {
display: block; }
.c-search-modal .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998; }
.c-search-modal .modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 1000px;
max-height: 80%;
width: 100%;
height: 100%;
padding: 30px 20px 100px;
background-color: #fff;
z-index: 999; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal {
max-width: 100%;
max-height: 100%; } }
.c-search-modal .modal__close {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
padding: 0;
background-color: #E3E3E3;
border: none; }
.c-search-modal .modal__close:before, .c-search-modal .modal__close:after {
content: '';
display: block;
top: 50%;
left: 50%;
height: 2px;
width: 35px;
background-color: #000; }
.c-search-modal .modal__close:before {
transform: rotate(-45deg) translate(2px, 3px); }
.c-search-modal .modal__close:after {
transform: rotate(45deg) translate(2px, -3px); }
.c-search-modal .modal__title {
margin: 0;
margin-bottom: 20px;
font-weight: bold; }
.c-search-modal .modal .tab {
height: auto;
margin-bottom: 0px; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab a {
min-height: 25px; } }
.c-search-modal .modal .tab-content {
height: 100%; }
.c-search-modal .modal .tab-content__scroll {
height: calc(100% - 100px);
overflow-y: scroll; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-content__scroll {
font-size: 14px;
height: calc(100% - 52px); } }
.c-search-modal .modal .tab-content__scroll.sm {
height: calc(100% - 160px); }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-content__scroll.sm {
margin-top: 30px;
height: calc(100% - 143px); } }
.c-search-modal .modal .tab-form {
height: 100%; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form ::-webkit-scrollbar {
width: 15px; }
.c-search-modal .modal .tab-form ::-webkit-scrollbar-track {
background: #eee; }
.c-search-modal .modal .tab-form ::-webkit-scrollbar-thumb {
background: #ddd; } }
.c-search-modal .modal .tab-form input[type="checkbox"] {
display: none; }
.c-search-modal .modal .tab-form input[type="checkbox"] ~ label {
position: relative;
padding-left: 25px;
color: #183561;
width: 100%;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
.c-search-modal .modal .tab-form input[type="checkbox"] ~ label:before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
display: block;
width: 14px;
height: 14px;
border: 1px solid #94a3b7;
border-radius: 3px; }
.c-search-modal .modal .tab-form input:checked ~ label:before {
content: '';
background-color: #94a3b7; }
.c-search-modal .modal .tab-form input:checked ~ label:after {
content: '';
position: absolute;
top: 42%;
left: 5px;
transform: rotate(-45deg) translateY(-50%);
height: 4px;
width: 8px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff; }
.c-search-modal .modal .tab-form__row {
padding: 30px 0 0;
border-bottom: 1px solid #cbe4dc; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__row {
padding: 20px 0 0; } }
.c-search-modal .modal .tab-form__category label {
display: inline-block;
margin-bottom: 30px; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__category label {
margin-bottom: 20px; } }
.c-search-modal .modal .tab-form__title {
padding-left: 20px; }
.c-search-modal .modal .tab-form__title .label {
display: inline-block;
width: 23%;
margin-right: 1%;
margin-bottom: 20px; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__title .label {
width: 48%;
font-size: 12px; } }
.c-search-modal .modal .tab-form__title .label label {
display: inline-block; }
.c-search-modal .modal .tab-form__item .label {
display: inline-block;
width: 49%;
padding-right: 10px;
margin-bottom: 15px; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__item .label {
width: 100%; } }
.c-search-modal .modal .tab-form__anchor {
position: relative;
padding-left: 20px; }
.c-search-modal .modal .tab-form__anchor:before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #009444; }
.c-search-modal .modal .tab-form__anchor:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #fff; }
.c-search-modal .modal .tab-form__btn {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
display: flex;
justify-content: center;
margin-top: 20px;
background-color: #fff;
z-index: 5; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__btn {
width: 100%;
padding-top: 15px;
bottom: 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } }
.c-search-modal .modal .tab-form__btn label {
width: 220px;
margin-left: 15px;
margin-right: 15px; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__btn label {
width: 150px; } }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__btn label input {
padding: 12px 0 10px; } }
.c-search-modal .modal .tab-form__btn .p-block-c-j__btn__submit {
margin-bottom: 15px; }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__btn .p-block-c-j__btn__submit {
margin-bottom: 20px; } }
@media only screen and (max-width: 1024px) {
.c-search-modal .modal .tab-form__btn .p-block-c-j__btn__reset {
margin-bottom: 20px; } }
/* ==========================================================================
Layout
========================================================================== */
/* Header
----------------------------------------------------------------- */
/*
Layout
レイアウト
Weight: -1500
Style guide: layout
*/
/*
Layout Header
ヘッダー
Weight: -400
Style guide: layout.header
*/
/*
Layout Header Default
Header のデフォルトスタイル
Weight: -100
Markup:
header - デフォルトスタイル
Style guide: layout.header.a
*/
.header {
width: 100%;
height: 116px;
padding-top: 15px;
padding-bottom: 19px; }
@media only screen and (max-width: 1024px) {
.header {
padding-top: 9px;
padding-bottom: 9px;
height: 59px; } }
.header__container {
max-width: 1040px;
margin-left: auto;
margin-right: auto; }
@media only screen and (max-width: 1024px) {
.header__container {
max-width: none; } }
.header__container.js-ui-menu--opened .header__nav {
display: block; }
.header__logo {
float: left;
width: 180px;
margin-left: 0.96154%;
margin-top: 8px; }
@media only screen and (max-width: 1024px) {
.header__logo {
width: 100px;
margin-top: 2px;
margin-left: 10px; } }
.header__nav {
float: left;
width: 72.59615%;
margin-left: calc(13.84615% - 60px);
margin-top: 18px; }
@media only screen and (max-width: 1024px) {
.header__nav {
display: none;
float: none;
width: 100%;
margin-left: 0;
margin-top: 30px;
position: absolute;
left: 0;
top: 0;
z-index: 15; } }
.header__nav__grid {
float: left;
width: 100%;
height: 48px; }
@media only screen and (max-width: 1024px) {
.header__nav__grid {
display: block;
height: auto; } }
.header__nav__grid__cell {
float: left; }
@media only screen and (max-width: 1024px) {
.header__nav__grid__cell {
float: none;
display: block;
height: auto;
margin-top: 30px; } }
.header__nav__grid__cell.hidden-pc {
display: none; }
@media only screen and (max-width: 1024px) {
.header__nav__grid__cell.hidden-pc {
display: block; } }
.header__nav__grid__cell--b {
margin-left: 11.01695%; }
@media only screen and (max-width: 1024px) {
.header__nav__grid__cell--b {
margin-left: 0; } }
.header__nav__grid__cell--c {
margin-left: 11.86441%; }
@media only screen and (max-width: 1024px) {
.header__nav__grid__cell--c {
margin-left: 0; } }
.header__nav__grid__cell--d {
margin-left: 11.86441%; }
@media only screen and (max-width: 1024px) {
.header__nav__grid__cell--d {
margin-left: 0; } }
.header__nav__grid__cell--e {
margin-left: 6.77966%; }
@media only screen and (max-width: 1024px) {
.header__nav__grid__cell--e {
margin-left: 0; } }
.header__nav__btn {
height: 100%; }
.header__nav__btn:hover {
opacity: 0.8; }
.header__nav__btn__label--a {
height: auto;
padding: 0;
font-weight: bold; }
.header__nav__btn__label--b {
height: auto;
padding: 0;
margin-top: 5px;
font-size: 0.75rem; }
@media only screen and (max-width: 1024px) {
.header__nav__btn__label--b {
font-size: 0.625rem; } }
.header__nav__btn--current {
border-bottom: 1px solid #009444;
padding-bottom: 10px; }
@media only screen and (max-width: 1024px) {
.header__nav__btn--current {
border: none;
padding-bottom: 0; } }
.header__search {
float: right;
width: 14.42308%;
margin-top: 13px; }
@media only screen and (max-width: 1024px) {
.header__search {
width: 104px;
margin-right: 10px;
margin-top: 1px; } }
.header__search__btn {
width: 100%;
margin-bottom: 0; }
.header__search__btn__label {
color: #262626;
padding: 15px 0 15px; }
@media only screen and (max-width: 1024px) {
.header__search__btn__label {
padding: 9px 0 8px;
font-size: 0.625rem; } }
.header__menu {
float: right;
width: 14.42308%;
margin-top: 18px; }
@media only screen and (min-width: 1025px) {
.header__menu {
display: none; } }
@media only screen and (max-width: 1024px) {
.header__menu {
width: 35px;
margin-right: 10px;
margin-top: 1px; } }
.header__menu__btn {
display: inline-block;
width: 35px;
height: 31px; }
.header__menu__btn__label {
display: inline-block;
position: absolute;
left: 8px;
width: 18px;
height: 2px;
background-color: #fff; }
.header__menu__btn__label:nth-of-type(1) {
top: 11px; }
.header__menu__btn__label:nth-of-type(2) {
top: 16px; }
.header__menu__btn__label:nth-of-type(3) {
bottom: 8px; }
.header__close {
display: none; }
@media only screen and (max-width: 1024px) {
.header__close {
position: absolute;
right: 18px;
top: 8px;
z-index: 15; } }
.header.js-ui-scroll-follower--followed {
position: fixed;
height: 85px;
top: 0;
left: 0;
z-index: 10;
padding-top: 12px;
padding-bottom: 13px;
border-bottom: 1px solid #cfe6e9;
z-index: 20; }
@media only screen and (max-width: 1024px) {
.header.js-ui-scroll-follower--followed {
height: 59px;
padding-top: 7px;
padding-bottom: 9px; } }
.header.js-ui-scroll-follower--followed .header__logo {
width: 140px;
margin-top: 4px; }
@media only screen and (max-width: 1024px) {
.header.js-ui-scroll-follower--followed .header__logo {
width: 100px; } }
.header.js-ui-scroll-follower--followed .header__nav {
margin-top: 2px; }
@media only screen and (max-width: 1024px) {
.header.js-ui-scroll-follower--followed .header__nav {
margin-top: 30px; } }
.header.js-ui-scroll-follower--followed .header__search {
margin-top: 0px; }
@media only screen and (max-width: 1024px) {
.header.js-ui-scroll-follower--followed .header__search {
margin-top: 1px; } }
@media only screen and (max-width: 1024px) {
.header.js-ui-scroll-follower--followed .header__menu {
margin-top: 1px; } }
@media only screen and (max-width: 1024px) {
.js-ui-menu__wrapper {
display: none;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.95);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10; } }
.js-ui-scroll-follower-range {
display: block;
position: absolute;
overflow: hidden;
top: 50px;
width: 1px;
height: 1px;
background: 0 0; }
.p-block-anchor {
display: block;
overflow: hidden;
position: absolute;
top: -85px;
width: 1px;
height: 1px;
background-color: transparent;
z-index: 99; }
/* Main
----------------------------------------------------------------- */
/*
Layout Main
メイン
Weight: -300
Style guide: layout.main
*/
/*
Layout Main Default
Main のデフォルトスタイル
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
main - デフォルトスタイル
Style guide: layout.main.a
*/
.main {
width: 64.42308%;
float: left; }
@media only screen and (max-width: 667px) {
.main {
width: 100%; } }
/* Side
----------------------------------------------------------------- */
/*
Layout Side
サイド
Weight: -200
Style guide: layout.side
*/
/*
Layout Side Default
Side のデフォルトスタイル
Weight: -100
Markup:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
label
side - デフォルトスタイル
Style guide: layout.side.a
*/
.side {
width: 30.76923%;
float: right; }
@media only screen and (max-width: 667px) {
.side {
width: 100%; } }
/* Footer
----------------------------------------------------------------- */
/*
Layout Footer
フッター
Weight: -100
Style guide: layout.footer
*/
/*
Layout Footer : A-A
Footer SNS
Weight: -100
Markup:
footer-a-a - デフォルトスタイル
Style guide: layout.footer.a.a
*/
.footer-a-a__grid {
width: 106px;
margin-left: auto;
margin-right: auto; }
@media only screen and (max-width: 667px) {
.footer-a-a__grid {
width: 66px; } }
.footer-a-a__grid__cell--a {
overflow: visible;
float: left;
margin-right: 5px; }
@media only screen and (max-width: 667px) {
.footer-a-a__grid__cell--a {
margin-right: 3px; } }
.footer-a-a__grid__cell--b {
overflow: visible;
float: right;
margin-left: 5px; }
@media only screen and (max-width: 667px) {
.footer-a-a__grid__cell--b {
margin-left: 3px; } }
.footer-a-a__facebook__icon {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto; }
.footer-a-a__twitter__icon {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto; }
/*
Layout Footer : A-B
Footer Banner
Weight: -100
Markup:
footer-a-b - デフォルトスタイル
Style guide: layout.footer.a.b
*/
.footer-a-b__grid__cell {
width: 24%;
margin-left: 0.5%;
margin-right: 0.5%;
margin-top: 10px;
float: left; }
@media only screen and (max-width: 667px) {
.footer-a-b__grid__cell {
margin-top: 6px; }
.footer-a-b__grid__cell:nth-child(odd) {
float: left;
width: 48.92857%;
margin-right: 1.07143%;
margin-left: 0; }
.footer-a-b__grid__cell:nth-child(even) {
float: right;
width: 48.92857%;
margin-left: 1.07143%;
margin-right: 0; } }
.footer-a-b__pict img {
border: 1px solid #dce3e4;
border-radius: 4px; }
/*
Layout Footer : A-C
Footer
Weight: -100
Markup:
{{> 'layout.footer.a.a' modifier_class='footer-a-a'}}
{{> 'layout.footer.a.b' modifier_class='footer-a-b'}}
© 2016 bushiroad creative
footer-a-c - デフォルトスタイル
Style guide: layout.footer.a.c
*/
.footer-a-c {
margin-top: 128px;
padding-top: 45px; }
@media only screen and (max-width: 667px) {
.footer-a-c {
margin-top: 59px;
padding-top: 21px; } }
.footer-a-c__sns {
margin-bottom: 40px; }
@media only screen and (max-width: 667px) {
.footer-a-c__sns {
margin-bottom: 15px; } }
.footer-a-c__banner {
margin-bottom: 50px; }
@media only screen and (max-width: 667px) {
.footer-a-c__banner {
margin-bottom: 25px; } }
.footer-a-c__copy {
font-family: 'Montserrat', sans-serif;
padding-top: 42px;
padding-bottom: 40px; }
@media only screen and (max-width: 667px) {
.footer-a-c__copy {
padding-top: 20px;
padding-bottom: 20px; } }
.footer-a-c__copy__link {
color: #fff;
text-decoration: none; }
.footer-a-c__copy__sep {
display: inline-block;
margin: 0 15px; }
/* Project
----------------------------------------------------------------- */
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0; }
.slick-list:focus {
outline: none; }
.slick-list.dragging {
cursor: pointer;
cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slick-track {
position: relative;
left: 0;
top: 0;
display: block; }
.slick-track:before, .slick-track:after {
content: "";
display: table; }
.slick-track:after {
clear: both; }
.slick-loading .slick-track {
visibility: hidden; }
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none; }
[dir="rtl"] .slick-slide {
float: right; }
.slick-slide img {
display: block; }
.slick-slide.slick-loading img {
display: none; }
.slick-slide.dragging img {
pointer-events: none; }
.slick-initialized .slick-slide {
display: block; }
.slick-loading .slick-slide {
visibility: hidden; }
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent; }
.slick-arrow.slick-hidden {
display: none; }
/* Slider */
.slick-loading .slick-list {
background: #fff url("./ajax-loader.gif") center center no-repeat; }
/* Icons */
@font-face {
font-family: "slick";
src: url("../fonts/slick.eot");
src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal; }
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none; }
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none; }
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1; }
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25; }
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: white;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-prev {
left: -25px; }
[dir="rtl"] .slick-prev {
left: auto;
right: -25px; }
.slick-prev:before {
content: "←"; }
[dir="rtl"] .slick-prev:before {
content: "→"; }
.slick-next {
right: -25px; }
[dir="rtl"] .slick-next {
left: -25px;
right: auto; }
.slick-next:before {
content: "→"; }
[dir="rtl"] .slick-next:before {
content: "←"; }
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px; }
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%; }
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer; }
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1; }
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: #009444;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before {
color: #009444;
opacity: 0.75; }
/*
Project
プロジェクト
Weight: 0
Style guide: project
*/
/*
Project Block
プロジェクト独自のブロック
Style guide: project.block
*/
.js-img-center.crop {
width: 100%;
height: auto; }
/*
Project Block : A-A
TOP トピックスアイテム
Markup:
p-block-a-a - デフォルトスタイル
Style guide: project.block.a.a
*/
.p-block-a-a__link:hover .p-block-a-a__title {
color: #009444;
text-decoration: underline; }
.p-block-a-a__pict {
margin-bottom: 20px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-a-a__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
@media only screen and (max-width: 667px) {
.p-block-a-a__pict {
margin-bottom: 15px; } }
.p-block-a-a__box__icon {
float: left; }
@media only screen and (max-width: 667px) {
.p-block-a-a__box__icon {
font-size: 0.75rem; } }
.p-block-a-a__box__date {
color: #353535;
float: right; }
@media only screen and (max-width: 667px) {
.p-block-a-a__box__date {
font-size: 0.875rem; } }
.p-block-a-a__title {
color: #183561;
margin-top: 30px;
font-size: 1.25rem; }
@media only screen and (max-width: 667px) {
.p-block-a-a__title {
margin-top: 13px;
font-size: 1rem; } }
/*
Project Block : A-B
TOP 商品アイテム
Markup:
p-block-a-b - デフォルトスタイル
Style guide: project.block.a.b
*/
.p-block-a-b__link:hover .p-block-a-b__title {
color: #009444;
text-decoration: underline; }
.p-block-a-b__pict {
margin-bottom: 15px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-a-b__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
@media only screen and (max-width: 667px) {
.p-block-a-b__pict {
margin-bottom: 8px; } }
.p-block-a-b__name {
color: #353535; }
.p-block-a-b__title {
color: #183561;
margin-top: 15px;
font-size: 1.25rem; }
@media only screen and (max-width: 667px) {
.p-block-a-b__title {
margin-bottom: 10px;
font-size: 1rem; } }
/*
Project Block : A-C
TOPページ ３カラムブロック
Markup:
{{> 'project.block.a.b' modifier_class='p-block-a-b'}}
{{> 'project.block.a.b' modifier_class='p-block-a-b'}}
{{> 'project.block.a.b' modifier_class='p-block-a-b'}}
{{> 'project.block.a.b' modifier_class='p-block-a-b'}}
{{> 'project.block.a.b' modifier_class='p-block-a-b'}}
{{> 'project.block.a.b' modifier_class='p-block-a-b'}}
p-block-a-c - デフォルトスタイル
Style guide: project.block.a.c
*/
.p-block-a-c--topics {
margin-bottom: 40px; }
@media only screen and (max-width: 667px) {
.p-block-a-c--topics {
margin-bottom: 50px; } }
.p-block-a-c__head {
margin-bottom: 45px; }
@media only screen and (max-width: 667px) {
.p-block-a-c__head {
margin-bottom: 20px; } }
.p-block-a-c__head__label--a {
font-size: 2.5rem; }
@media only screen and (max-width: 667px) {
.p-block-a-c__head__label--a {
font-size: 1.56rem; } }
@media only screen and (max-width: 667px) {
.p-block-a-c__head__label--b {
font-size: 0.625rem; } }
.p-block-a-c__grid__cell {
float: left; }
.p-block-a-c__grid__cell:nth-child(1) {
float: left;
width: 30.76923%; }
@media only screen and (max-width: 667px) {
.p-block-a-c__grid__cell:nth-child(1) {
width: auto;
float: none; } }
.p-block-a-c__grid__cell:nth-child(2) {
float: left;
width: 30.76923%;
margin-left: 3.84615%; }
@media only screen and (max-width: 667px) {
.p-block-a-c__grid__cell:nth-child(2) {
width: auto;
float: none;
margin-left: 0;
margin-top: 38px; } }
.p-block-a-c__grid__cell:nth-child(3) {
float: right;
width: 30.76923%; }
@media only screen and (max-width: 667px) {
.p-block-a-c__grid__cell:nth-child(3) {
width: auto;
float: none;
margin-top: 38px; } }
.p-block-a-c__label {
margin-bottom: 60px; }
.p-block-a-c__label > .c-btn__label {
margin: 0 auto; }
.p-block-a-c__btn {
margin-top: 50px; }
@media only screen and (max-width: 667px) {
.p-block-a-c__btn {
margin-top: 30px; } }
/*
Project Block : A-D
TOP ニュースアイテム
Markup:
p-block-a-d - デフォルトスタイル
Style guide: project.block.a.d
*/
.p-block-a-d__head {
margin-bottom: 45px; }
@media only screen and (max-width: 667px) {
.p-block-a-d__head {
margin-bottom: 25px; } }
.p-block-a-d__head__label--a {
font-size: 2.5rem; }
@media only screen and (max-width: 667px) {
.p-block-a-d__head__label--a {
font-size: 1.56rem; } }
@media only screen and (max-width: 667px) {
.p-block-a-d__head__label--b {
font-size: 0.625rem; } }
.p-block-a-d__item {
padding-bottom: 10px;
margin-bottom: 10px;
display: table;
width: 100%; }
.p-block-a-d__item__name {
width: 130px;
display: table-cell; }
@media only screen and (max-width: 667px) {
.p-block-a-d__item__name {
width: 100%;
display: block;
font-weight: bold; } }
.p-block-a-d__item__title {
display: table-cell; }
@media only screen and (max-width: 667px) {
.p-block-a-d__item__title {
display: block; } }
.p-block-a-d__btn {
margin-top: 20px; }
/*
Project Block : A-E
TOP Twitter
Markup:
p-block-a-e - デフォルトスタイル
Style guide: project.block.a.e
*/
.p-block-a-e__head {
margin-bottom: 45px; }
@media only screen and (max-width: 667px) {
.p-block-a-e__head {
margin-bottom: 25px; } }
.p-block-a-e__head__label--a {
font-size: 2.5rem; }
@media only screen and (max-width: 667px) {
.p-block-a-e__head__label--a {
font-size: 1.56rem; } }
@media only screen and (max-width: 667px) {
.p-block-a-e__head__label--b {
font-size: 0.625rem; } }
.p-block-a-e__container {
width: 100%;
text-align: center;
border: 1px solid #cbe4dc; }
.p-block-a-e__container iframe#twitter-widget-0 {
text-align: center;
margin-left: auto;
margin-right: auto; }
@media only screen and (max-width: 768px) and (min-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
.p-block-a-e__container iframe#twitter-widget-0 {
width: 341px !important; } }
@media only screen and (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2) {
.p-block-a-e__container iframe#twitter-widget-0 {
width: 372px !important; } }
@media only screen and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
.p-block-a-e__container iframe#twitter-widget-0 {
width: 320px !important; } }
/*
Project Block : A-F
TOP Google Map
Markup:
丸ノ内線「中野坂上駅」下車徒歩1分
p-block-a-f - デフォルトスタイル
Style guide: project.block.a.f
*/
.p-block-a-f #canvas_wrapper {
max-width: 100%;
margin: auto; }
.p-block-a-f #canvas_wrapper img {
max-width: none; }
.p-block-a-f #map-view {
height: 300px;
width: 100%; }
.p-block-a-f__link__icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 11px; }
/*
Project Block : A-G
TOP Company 詳細
Markup:
p-block-a-g - デフォルトスタイル
Style guide: project.block.a.g
*/
.p-block-a-g__item {
border-bottom: 1px solid #d2dfe0;
padding-top: 10px;
padding-bottom: 15px; }
.p-block-a-g__item__title {
width: 26.53061%;
float: left; }
@media only screen and (max-width: 667px) {
.p-block-a-g__item__title {
float: none;
width: 100%; } }
.p-block-a-g__item__text {
width: 73.46939%;
float: left; }
@media only screen and (max-width: 667px) {
.p-block-a-g__item__text {
float: none;
width: 100%;
margin-left: 0; } }
.p-block-a-g__policy {
padding-top: 10px;
padding-bottom: 15px; }
.p-block-a-g__policy__link {
padding-left: 15px; }
.p-block-a-g__policy__link:before {
border-bottom: 4px solid transparent;
border-left: 6px solid #183561;
border-top: 4px solid transparent;
content: "";
left: 2px;
position: absolute;
top: 17px; }
/*
Project Block : A-H
TOP Contact
Markup:
ブシロードクリエイティブに関するお問い合わせは、メールまたはフォームからお気軽にご連絡ください。
support@bushiroad-creative.com
営業時間：土日祝、年末年始除く、10:00～18:00
p-block-a-h - デフォルトスタイル
Style guide: project.block.a.h
*/
.p-block-a-h {
margin-top: 40px;
padding-bottom: 40px; }
@media only screen and (max-width: 667px) {
.p-block-a-h {
margin-top: 50px;
padding-bottom: 50px; } }
.p-block-a-h__head {
margin-bottom: 45px; }
@media only screen and (max-width: 667px) {
.p-block-a-h__head {
margin-bottom: 25px; } }
.p-block-a-h__head__label--a {
font-size: 2.5rem; }
@media only screen and (max-width: 667px) {
.p-block-a-h__head__label--a {
font-size: 1.56rem; } }
@media only screen and (max-width: 667px) {
.p-block-a-h__head__label--b {
font-size: 0.625rem; } }
.p-block-a-h__text--a {
margin-bottom: 10px;
font-size: 1rem; }
.p-block-a-h__text--b {
margin-bottom: 10px;
font-size: 1rem; }
.p-block-a-h__text--c {
margin-bottom: 10px;
font-size: 1rem; }
.p-block-a-h__btn {
margin-top: 30px; }
/*
Project Block : A-I
緊急事態ボックス
Markup:
p-block-a-i - デフォルトスタイル
Style guide: project.block.a.i
*/
.p-block-a-i {
display: table;
width: 100%;
height: 70px;
margin-bottom: 40px; }
@media only screen and (max-width: 667px) {
.p-block-a-i {
height: auto;
display: block;
margin-bottom: 20px; } }
.p-block-a-i__cell--a {
display: table-cell;
width: 167px;
vertical-align: middle;
border-radius: 4px 0 0 4px; }
@media only screen and (max-width: 667px) {
.p-block-a-i__cell--a {
display: block;
width: auto;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px 4px 0 0; } }
.p-block-a-i__cell--b {
display: table-cell;
vertical-align: middle;
padding: 15px 20px; }
@media only screen and (max-width: 667px) {
.p-block-a-i__cell--b {
display: block;
width: auto; } }
.p-block-a-i__head {
font-size: 1rem; }
@media only screen and (max-width: 667px) {
.p-block-a-i__head {
font-size: 0.875rem; } }
.p-block-a-i__date {
float: left;
margin-right: 22px;
font-size: 0.875rem; }
@media only screen and (max-width: 667px) {
.p-block-a-i__date {
float: none;
margin-bottom: 5px;
font-size: 0.75rem;
margin-top: 10px; } }
@media only screen and (max-width: 667px) {
.p-block-a-i__date:first-child {
margin-top: 0px; } }
.p-block-a-i__text {
overflow: hidden;
font-size: 0.875rem; }
@media only screen and (max-width: 667px) {
.p-block-a-i__text {
font-size: 0.75rem; } }
/*
Project Block : A-J
波背景実装
Markup:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbb
p-block-a-j - デフォルトスタイル
Style guide: project.block.a.j
*/
.p-block-a-j__top {
width: 100%; }
@media only screen and (max-width: 667px) {
.p-block-a-j__top {
display: none; } }
.p-block-a-j__top__src {
width: 100%; }
.p-block-a-j__container {
padding-top: 60px;
padding-bottom: 60px; }
@media only screen and (max-width: 667px) {
.p-block-a-j__container {
padding-top: 30px;
padding-bottom: 40px; } }
.p-block-a-j__bottom {
width: 100%; }
@media only screen and (max-width: 667px) {
.p-block-a-j__bottom {
display: none; } }
.p-block-a-j__bottom__src {
width: 100%;
vertical-align: bottom; }
/*
Project Block : A-K
TOPページ 2カラムブロック1
Markup:
{{> 'project.block.a.d' modifier_class='p-block-a-d'}}
{{> 'project.block.a.e' modifier_class='p-block-a-e'}}
{{> 'project.block.a.g' modifier_class='p-block-a-g'}}
{{> 'project.block.a.f' modifier_class='p-block-a-f'}}
p-block-a-k - デフォルトスタイル
Style guide: project.block.a.k
*/
.p-block-a-k--news {
margin-top: 40px;
padding-bottom: 40px; }
@media only screen and (max-width: 667px) {
.p-block-a-k--news {
margin-top: 50px;
padding-bottom: 50px; } }
.p-block-a-k__head {
margin-bottom: 45px; }
@media only screen and (max-width: 667px) {
.p-block-a-k__head {
margin-bottom: 25px; } }
.p-block-a-k__head__label--a {
font-size: 2.5rem; }
@media only screen and (max-width: 667px) {
.p-block-a-k__head__label--a {
font-size: 1.56rem; } }
@media only screen and (max-width: 667px) {
.p-block-a-k__head__label--b {
font-size: 0.625rem; } }
.p-block-a-k__grid__cell {
float: left; }
.p-block-a-k__grid__cell:nth-child(1) {
float: left;
width: 47.11538%; }
@media only screen and (max-width: 667px) {
.p-block-a-k__grid__cell:nth-child(1) {
width: auto;
float: none; } }
.p-block-a-k__grid__cell:nth-child(2) {
float: right;
width: 47.11538%; }
@media only screen and (max-width: 667px) {
.p-block-a-k__grid__cell:nth-child(2) {
width: auto;
float: none;
margin-top: 38px; } }
/*
Project Block : A-L
TOP スライダー
Markup:
p-block-a-l - デフォルトスタイル
Style guide: project.block.a.l
*/
.p-block-a-l {
margin-bottom: 60px; }
@media only screen and (max-width: 667px) {
.p-block-a-l {
margin-bottom: 35px; } }
.p-block-a-l.js-wideslider {
box-sizing: content-box;
width: 100%;
text-align: left;
position: relative;
overflow: hidden;
padding-bottom: 29px; }
@media only screen and (max-width: 667px) {
.p-block-a-l.js-wideslider {
padding-bottom: 23px; } }
.p-block-a-l.js-wideslider ul,
.p-block-a-l.js-wideslider ul li {
float: left;
display: inline;
overflow: hidden; }
.p-block-a-l.js-wideslider ul {
margin: 0;
padding: 0; }
.p-block-a-l.js-wideslider ul li {
border-radius: 4px; }
.p-block-a-l.js-wideslider ul li img {
width: 100%;
border-radius: 4px;
display: none; }
.p-block-a-l .wideslider_base {
top: 0;
position: absolute; }
.p-block-a-l .wideslider_wrap {
top: 0;
position: absolute;
overflow: hidden; }
.p-block-a-l .slider_prev,
.p-block-a-l .slider_next {
top: 0;
position: absolute;
z-index: 10;
cursor: pointer;
opacity: 1 !important;
background-color: rgba(255, 255, 255, 0.5); }
.p-block-a-l .slider_prev:hover,
.p-block-a-l .slider_next:hover {
background-color: rgba(255, 255, 255, 0.6); }
@media only screen and (max-width: 1024px) {
.p-block-a-l .slider_prev,
.p-block-a-l .slider_next {
display: none; } }
.p-block-a-l .slider_prev .arrow {
position: absolute;
right: -25px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
display: block;
overflow: hidden;
background: transparent url(../img/prev.png) no-repeat right center; }
.p-block-a-l .slider_next .arrow {
position: absolute;
left: -25px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
display: block;
overflow: hidden;
background: transparent url(../img/next.png) no-repeat left center; }
.p-block-a-l .pagination {
bottom: 0px;
left: 0;
width: 100%;
text-align: center;
position: absolute;
z-index: 9; }
.p-block-a-l .pagination a {
margin: 0 5px;
width: 8px;
height: 8px;
border-radius: 4px;
display: inline-block;
overflow: hidden;
background: #d4e0e1;
opacity: 1 !important; }
.p-block-a-l .pagination a.active {
background: #009444; }
.p-block-a-l .wideslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden; }
.p-block-a-l .wideslider ul {
display: inline-block;
overflow: hidden; }
/*
Project Block : A-M
プライズ スライダー
Markup:
p-block-a-m - デフォルトスタイル
Style guide: project.block.a.l
*/
.p-block-a-m {
margin-bottom: 20px; }
@media only screen and (max-width: 667px) {
.p-block-a-m {
margin-bottom: 35px; } }
.p-block-a-m.js-wideslider {
box-sizing: content-box;
width: 100%;
text-align: left;
position: relative;
overflow: hidden;
padding-bottom: 29px; }
@media only screen and (max-width: 667px) {
.p-block-a-m.js-wideslider {
padding-bottom: 23px; } }
.p-block-a-m.js-wideslider ul,
.p-block-a-m.js-wideslider ul li {
float: left;
display: inline;
overflow: hidden; }
.p-block-a-m.js-wideslider ul {
margin: 0;
padding: 0; }
.p-block-a-m.js-wideslider ul li {
border-radius: 4px; }
.p-block-a-m.js-wideslider ul li img {
width: 100%;
border-radius: 4px;
display: none; }
.p-block-a-m .wideslider_base {
top: 0;
position: absolute; }
.p-block-a-m .wideslider_wrap {
top: 0;
position: absolute;
overflow: hidden; }
.p-block-a-m .slider_prev,
.p-block-a-m .slider_next {
top: 0;
position: absolute;
z-index: 10;
cursor: pointer;
opacity: 1 !important;
background-color: rgba(255, 255, 255, 0.5); }
.p-block-a-m .slider_prev:hover,
.p-block-a-m .slider_next:hover {
background-color: rgba(255, 255, 255, 0.6); }
@media only screen and (max-width: 1024px) {
.p-block-a-m .slider_prev,
.p-block-a-m .slider_next {
display: none; } }
.p-block-a-m .slider_prev .arrow {
position: absolute;
right: -25px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
display: block;
overflow: hidden;
background: transparent url(../img/prev.png) no-repeat right center; }
.p-block-a-m .slider_next .arrow {
position: absolute;
left: -25px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
display: block;
overflow: hidden;
background: transparent url(../img/next.png) no-repeat left center; }
.p-block-a-m .pagination {
bottom: 0px;
left: 0;
width: 100%;
text-align: center;
position: absolute;
z-index: 9; }
.p-block-a-m .pagination a {
margin: 0 5px;
width: 8px;
height: 8px;
border-radius: 4px;
display: inline-block;
overflow: hidden;
background: #d4e0e1;
opacity: 1 !important; }
.p-block-a-m .pagination a.active {
background: #db3c14; }
.p-block-a-m .wideslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden; }
.p-block-a-m .wideslider ul {
display: inline-block;
overflow: hidden; }
/*
Project Block : B-A
Topics リスト
Markup:
p-block-b-a - デフォルトスタイル
Style guide: project.block.b.a
*/
.p-block-b-a {
min-height: 300px; }
.p-block-b-a__item {
padding-bottom: 30px;
margin-bottom: 32px; }
.p-block-b-a__item:last-child {
margin-bottom: 0; }
.p-block-b-a__item__link:hover .p-block-b-a__item__title {
color: #009444;
text-decoration: underline; }
.p-block-b-a__item__cell--a {
float: left;
width: 30.76923%; }
@media only screen and (max-width: 667px) {
.p-block-b-a__item__cell--a {
float: none;
width: auto;
margin-bottom: 15px; } }
.p-block-b-a__item__cell--b {
float: right;
width: 64.42308%; }
@media only screen and (max-width: 667px) {
.p-block-b-a__item__cell--b {
float: none;
width: auto; } }
.p-block-b-a__item__pict {
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-b-a__item__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-b-a__item__date {
color: #262626;
float: left;
margin-top: 2px;
font-size: 1.125rem;
font-family: 'Montserrat', sans-serif; }
@media only screen and (max-width: 667px) {
.p-block-b-a__item__date {
font-size: 1rem; } }
.p-block-b-a__item__icon {
float: left;
margin-left: 20px; }
.p-block-b-a__item__icon:first-child {
margin-left: 0px; }
@media only screen and (max-width: 667px) {
.p-block-b-a__item__icon {
margin-left: 5px; } }
.p-block-b-a__item__product-icon {
display: table;
margin: -0.4em 0 0.6em 0;
font-size: 0.7rem; }
.p-block-b-a__item__title {
clear: left;
color: #183561;
margin-top: 20px;
font-size: 1.25rem; }
@media only screen and (max-width: 667px) {
.p-block-b-a__item__title {
font-size: 1rem; } }
.p-block-b-a__item__text {
margin-top: 20px;
color: #353535;
width: 100%;
overflow: hidden;
height: 2.625rem; }
@media only screen and (max-width: 667px) {
.p-block-b-a__item__text {
font-size: 0.875rem; } }
.p-block-b-a__item__dl {
margin-top: 20px; }
@media only screen and (max-width: 667px) {
.p-block-b-a__item__dl {
font-size: 0.875rem; } }
.p-block-b-a__item .no-tag {
margin-top: 0px; }
/*
Project Block : B-B
TOPICS 詳細タイトル
Markup:
9/7（水）21時より「おにいちゃんねる」公式ニコニコ生放送第3回『生おにいちゃんねる～みんなで広げようお兄ちゃんの輪～』放送決定！
p-block-b-b - デフォルトスタイル
Style guide: project.block.b.b
*/
.p-block-b-b {
padding-bottom: 20px;
margin-bottom: 30px; }
.p-block-b-b__date {
float: left;
font-family: 'Montserrat', sans-serif;
font-size: 1.25rem; }
@media only screen and (max-width: 667px) {
.p-block-b-b__date {
font-size: 1rem; } }
.p-block-b-b__icon {
float: left;
margin-left: 20px; }
.p-block-b-b__icon:first-child {
margin-left: 0px; }
.p-block-b-b__title {
color: #353535;
margin-top: 20px;
font-size: 1.5rem; }
@media only screen and (max-width: 667px) {
.p-block-b-b__title {
font-size: 1rem; } }
.p-block-b-b__head img {
width: 100%; }
.p-block-b-b__dl {
margin: 30px 0 80px; }
.p-block-b-b .no-tag {
margin-top: 0px; }
/*
Project Block : B-C
TOPICS よく読まれている記事、新着記事
Markup:
p-block-b-c - デフォルトスタイル
Style guide: project.block.b.c
*/
.p-block-b-c {
border-radius: 4px;
margin-top: 25px; }
.p-block-b-c__head {
padding: 18px; }
.p-block-b-c__head__icon {
margin-right: 10px;
display: inline-block;
float: left;
top: 3px; }
@media only screen and (max-width: 667px) {
.p-block-b-c__head__icon {
margin-right: 5px;
top: 0; } }
.p-block-b-c__head__label {
font-size: 1.25rem;
vertical-align: middle;
overflow: hidden; }
@media only screen and (max-width: 667px) {
.p-block-b-c__head__label {
font-size: 0.875rem; } }
.p-block-b-c__item {
padding: 18px;
border-top: 1px solid #cbe4dc; }
.p-block-b-c__item:first-child {
border-top: 1px solid #cbe4dc; }
.p-block-b-c__item__link {
color: #183561;
text-decoration: none; }
.p-block-b-c__item__link:hover .p-block-b-c__item__title {
color: #009444;
text-decoration: underline; }
.p-block-b-c__item__pict {
float: left;
width: 39.00709%;
margin-right: 4.96454%;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-b-c__item__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-b-c__item__title {
overflow: hidden; }
/*
Project Block : B-D
TOPICS 関連記事
Markup:
p-block-b-d - デフォルトスタイル
Style guide: project.block.b.d
*/
.p-block-b-d {
margin-top: 70px; }
@media only screen and (max-width: 667px) {
.p-block-b-d {
margin-top: 18px; } }
.p-block-b-d__head {
padding: 18px; }
.p-block-b-d__head__icon {
margin-right: 0px;
float: left;
top: 2px; }
@media only screen and (max-width: 667px) {
.p-block-b-d__head__icon {
margin-right: 5px; } }
.p-block-b-d__head__label {
overflow: hidden;
font-size: 1.125rem; }
@media only screen and (max-width: 667px) {
.p-block-b-d__head__label {
font-size: 0.875rem; } }
.p-block-b-d__container {
margin-bottom: 40px; }
@media only screen and (max-width: 667px) {
.p-block-b-d__container {
margin-bottom: 20px; } }
.p-block-b-d__items {
width: 100%; }
@media only screen and (max-width: 667px) {
.p-block-b-d__items {
display: block; } }
.p-block-b-d__item {
padding-top: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #cbe4dc; }
.p-block-b-d__item:nth-child(odd) {
float: left;
padding-right: 20px;
width: 50%;
border-right: 1px solid #cbe4dc; }
@media only screen and (max-width: 667px) {
.p-block-b-d__item:nth-child(odd) {
display: block;
width: 100%;
padding-right: 0;
border-right: 0 none; } }
.p-block-b-d__item:nth-child(even) {
float: right;
padding-left: 20px;
width: 50%; }
@media only screen and (max-width: 667px) {
.p-block-b-d__item:nth-child(even) {
display: block;
width: 100%;
padding-left: 0;
border-left: 0 none; } }
@media only screen and (max-width: 667px) {
.p-block-b-d__item {
border-bottom: 1px solid #cbe4dc;
padding-bottom: 15px;
padding-top: 15px; } }
.p-block-b-d__item:nth-child(3), .p-block-b-d__item:nth-child(4) {
border-top: 1px solid #cbe4dc; }
.p-block-b-d__item__link {
color: #183561;
text-decoration: none; }
.p-block-b-d__item__link:hover .p-block-b-d__item__title {
color: #009444;
text-decoration: underline; }
.p-block-b-d__item__pict {
float: left;
width: 41.2699%;
margin-right: 6.34921%;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-b-d__item__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-b-d__item__title {
overflow: hidden;
color: #183561; }
@media only screen and (max-width: 667px) {
.p-block-b-d__btn {
margin-bottom: 40px; } }
/*
Project Block : B-E
TOPICS バナー
Markup:
p-block-b-e - デフォルトスタイル
Style guide: project.block.b.e
*/
.p-block-b-e {
margin-bottom: 30px; }
@media only screen and (max-width: 667px) {
.p-block-b-e {
margin-bottom: 25px; } }
.p-block-b-e__item {
margin-top: 20px; }
@media only screen and (max-width: 667px) {
.p-block-b-e__item {
margin-top: 16px; } }
.p-block-b-e__item:first-child {
margin-top: 0; }
.p-block-b-e__item img {
border-radius: 4px; }
/*
Project Block : B-F
TOPICS 2カラムレイアウト
Markup:
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
p-block-b-f - デフォルトスタイル
Style guide: project.block.b.f
*/
.p-block-b-f {
margin-top: 50px; }
@media only screen and (max-width: 667px) {
.p-block-b-f {
margin-top: 20px; } }
.p-block-b-f__cell--main {
width: 64.42308%;
float: left; }
@media only screen and (max-width: 667px) {
.p-block-b-f__cell--main {
width: 100%; } }
.p-block-b-f__cell--main.full {
max-width: 980px;
width: 100%;
margin-left: auto;
margin-right: auto;
float: none; }
.p-block-b-f__cell--side {
width: 30.76923%;
float: right; }
@media only screen and (max-width: 667px) {
.p-block-b-f__cell--side {
width: 100%; } }
/*
Project Block : B-G
TOPICS 詳細SNS
Markup:
{{> 'project.block.f.c' modifier_class='p-block-f-c'}}
p-block-b-g - デフォルトスタイル
Style guide: project.block.b.g
*/
.p-block-b-g {
margin-top: 28px;
border-top: 1px solid #cbe4dc; }
@media only screen and (max-width: 667px) {
.p-block-b-g {
border-top: none; } }
/*
Project Block : B-H
TOPICS タブ
Markup:
p-block-b-h - デフォルトスタイル
Style guide: project.block.b.h
*/
.p-block-b-h {
display: table;
border-bottom: 1px solid #009444;
width: 100%;
height: 100%;
table-layout: fixed;
margin-bottom: 50px; }
@media only screen and (max-width: 667px) {
.p-block-b-h {
margin-bottom: 20px; } }
.p-block-b-h__cell {
display: table-cell;
width: 25%;
height: 100%;
padding-right: 3px;
padding-left: 3px; }
.p-block-b-h__cell:first-child {
padding-right: 6px;
padding-left: 0px; }
.p-block-b-h__cell:last-child {
padding-right: 0;
padding-left: 6px; }
.p-block-b-h__cell.w-per-34 {
width: 34%; }
.p-block-b-h__cell.w-per-50 {
width: 50%; }
.p-block-b-h__btn {
border-top: 1px solid #cbe4dc;
border-left: 1px solid #cbe4dc;
border-right: 1px solid #cbe4dc;
border-radius: 4px 4px 0 0;
background-color: #FFF;
height: 100%;
min-height: 45px; }
.p-block-b-h__btn.sm {
min-height: 25px; }
@media only screen and (max-width: 1024px) {
.p-block-b-h__btn.sm span {
font-size: 0.875rem; } }
.p-block-b-h__btn__label {
color: #009444;
padding-top: 14px;
padding-bottom: 14px;
font-weight: bold;
font-size: 1.125rem; }
@media only screen and (max-width: 667px) {
.p-block-b-h__btn__label {
font-size: 0.675rem;
padding-top: 9px;
padding-bottom: 9px; } }
.p-block-b-h__btn--current {
border-top-color: #009444;
border-left-color: #009444;
border-right-color: #009444;
background-color: #009444; }
.p-block-b-h__btn--current .p-block-b-h__btn__label {
color: #fff; }
.p-block-b-h + .filter > .c-selectfield__withlabel {
margin-top: -30px; }
@media only screen and (max-width: 667px) {
.p-block-b-h + .filter > .c-selectfield__withlabel {
margin-top: 0px; } }
/*
Project Block : C-A
PRODUCT リストアイテム
Markup:
p-block-c-a - デフォルトスタイル
Style guide: project.block.c.a
*/
.p-block-c-a__link:hover .p-block-c-a__title {
color: #009444;
text-decoration: underline; }
.p-block-c-a__pict {
margin-bottom: 15px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-c-a__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-c-a__title {
color: #183561; }
/*
Project Block : C-B
PRODUCT リスト
Markup:
{{> 'project.block.c.a' modifier_class='p-block-c-a'}}
{{> 'project.block.c.a' modifier_class='p-block-c-a'}}
{{> 'project.block.c.a' modifier_class='p-block-c-a'}}
{{> 'project.block.c.a' modifier_class='p-block-c-a'}}
{{> 'project.block.c.a' modifier_class='p-block-c-a'}}
{{> 'project.block.c.a' modifier_class='p-block-c-a'}}
p-block-c-b - デフォルトスタイル
Style guide: project.block.c.b
*/
.p-block-c-b {
margin-top: -45px; }
.p-block-c-b__cell {
width: 22.69231%;
float: left;
margin-left: 3.07692%;
margin-top: 45px; }
.p-block-c-b__cell:nth-child(4n+1) {
margin-left: 0;
clear: left; }
@media only screen and (max-width: 667px) {
.p-block-c-b__cell {
width: 47.143%;
margin-left: 0; }
.p-block-c-b__cell:nth-child(3n+1) {
clear: none; }
.p-block-c-b__cell:nth-child(odd) {
float: left;
clear: both; }
.p-block-c-b__cell:nth-child(even) {
float: right; } }
/*
Project Block : C-C
PRODUCT 詳細 見出し
Markup:
ラブライブ！サンシャイン!! フルグラフィックペンポーチ 花丸
p-block-c-c - デフォルトスタイル
Style guide: project.block.c.c
*/
.p-block-c-c {
margin-top: 35px; }
@media only screen and (max-width: 667px) {
.p-block-c-c {
margin-top: 20px; } }
.p-block-c-c__head {
font-size: 1.5rem;
margin-bottom: 20px; }
@media only screen and (max-width: 667px) {
.p-block-c-c__head {
font-size: 1rem;
margin-bottom: 15px; } }
.p-block-c-c__item__title {
float: left;
width: 28.57143%; }
.p-block-c-c__item__text {
float: left;
width: 71.42857%; }
/*
Project Block : C-D
PRODUCT 詳細 画像の切替
Markup:
ラブライブ！サンシャイン!! Aqoursメンバーのイラストを使用したフルグラフィックペンポーチです！
p-block-c-d - デフォルトスタイル
Style guide: project.block.c.d
*/
.p-block-c-d {
width: 100%;
margin-top: 27px; }
@media only screen and (max-width: 667px) {
.p-block-c-d {
margin-top: 15px; } }
.p-block-c-d__cell--a {
float: left;
width: 61.53846%; }
@media only screen and (max-width: 667px) {
.p-block-c-d__cell--a {
display: block;
width: 100%; } }
.p-block-c-d__cell--b {
float: right;
width: 33.65385%; }
@media only screen and (max-width: 667px) {
.p-block-c-d__cell--b {
display: block;
width: 100%;
padding-left: 0; } }
.p-block-c-d__cell--main {
width: 61.53846%;
float: left; }
@media only screen and (max-width: 667px) {
.p-block-c-d__cell--main {
width: 100%; } }
.p-block-c-d__cell--side {
width: 33.65385%;
float: right; }
@media only screen and (max-width: 667px) {
.p-block-c-d__cell--side {
width: 100%;
margin-top: 50px; } }
.p-block-c-d__image {
width: 100%;
height: 480px;
position: relative;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-c-d__image img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-c-d__arrow-navigation {
margin-top: 33%;
position: absolute;
display: block;
color: transparent;
background-repeat: no-repeat;
font-size: 0;
width: 30px;
height: 30px;
background-position: center;
cursor: pointer; }
.p-block-c-d__arrow-navigation:hover {
opacity: 0.5; }
.p-block-c-d .arrow-right {
right: 0;
background-image: url(../img/arrow-r.png); }
.p-block-c-d .arrow-left {
background-image: url(../img/arrow-l.png); }
@media only screen and (max-width: 667px) {
.p-block-c-d__thumb {
margin-top: 10px;
width: 100%;
overflow: auto; } }
@media only screen and (max-width: 667px) {
.p-block-c-d__thumb__container {
width: 1430px; } }
.p-block-c-d__thumb .img-selected {
border: 3px solid #009444; }
.p-block-c-d__thumb__item {
float: left;
margin-right: 2.85714%;
margin-bottom: 10px;
height: 60px;
width: 22.85714%;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-c-d__thumb__item img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
@media only screen and (max-width: 667px) {
.p-block-c-d__thumb__item {
width: 80px;
margin-right: 10px; } }
.p-block-c-d__thumb__item a {
display: block;
height: 100%;
width: 100%;
overflow: hidden; }
.p-block-c-d__thumb__item:nth-child(4n) {
margin-right: 0; }
@media only screen and (max-width: 667px) {
.p-block-c-d__thumb__item:nth-child(4n) {
margin-right: 10px; } }
@media only screen and (max-width: 667px) {
.p-block-c-d__thumb__item:last-child {
margin-right: 0; } }
/*
Project Block : C-E
PRODUCT 詳細 見出し
Markup:
ラブライブ！サンシャイン!! Aqoursメンバーのイラストを使用したフルグラフィックペンポーチです！
bushiroad create
p-block-c-e - デフォルトスタイル
Style guide: project.block.c.e
*/
.p-block-c-e {
background-color: #FFF; }
@media only screen and (max-width: 667px) {
.p-block-c-e {
margin-top: 0px; } }
.p-block-c-e__head {
margin-bottom: 25px; }
@media only screen and (max-width: 667px) {
.p-block-c-e__head {
margin-top: 15px;
margin-bottom: 15px; } }
.p-block-c-e__items {
display: table;
width: 100%;
border-radius: 4px;
border-top: 1px solid #cbe4dc;
border-right: 1px solid #cbe4dc; }
.p-block-c-e__item {
width: 100%;
display: table-row; }
.p-block-c-e__item__title {
width: 20%;
display: table-cell;
padding: 15px;
background-color: #f2f6f7;
border-left: 1px solid #cbe4dc;
border-bottom: 1px solid #cbe4dc;
font-weight: bold; }
@media only screen and (max-width: 667px) {
.p-block-c-e__item__title {
width: 33.92857%; } }
.p-block-c-e__item__text {
width: 80%;
display: table-cell;
padding: 15px;
border-left: 1px solid #cbe4dc;
border-bottom: 1px solid #cbe4dc; }
.p-block-c-e__text {
margin-top: 10px; }
/*
Project Block : C-F
PROSDUCT 2カラムレイアウト
Markup:
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
x
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああ
p-block-c-f - デフォルトスタイル
Style guide: project.block.c.f
*/
.p-block-c-f__close {
position: absolute;
right: 35px;
top: 25px; }
.p-block-c-f__cell--main {
width: 64.42308%;
float: right; }
@media only screen and (max-width: 667px) {
.p-block-c-f__cell--main {
width: 100%; } }
.p-block-c-f__cell--main.full {
width: 100%; }
.p-block-c-f__cell--side {
width: 30.76923%;
float: left; }
@media only screen and (max-width: 667px) {
.p-block-c-f__cell--side {
background-color: #fff;
position: fixed;
float: none;
top: 0;
left: -150%;
width: 100%;
height: 100%;
padding-top: 25px;
padding-bottom: 20px;
overflow: auto;
z-index: 50; } }
/*
Project Block : C-G
PRODUCT ボタン
Markup:
商品を絞り込む
p-block-c-g - デフォルトスタイル
Style guide: project.block.c.g
*/
.p-block-c-g {
width: 113px;
margin-left: 0; }
.p-block-c-g__icon {
margin-right: 4px; }
.p-block-c-g__label {
padding: 7px 0;
font-size: 0.625rem; }
/*
Project Block : C-H
PRODUCT バナーSNS
Markup:
p-block-c-h - デフォルトスタイル
Style guide: project.block.c.h
*/
.p-block-c-h {
margin-top: 30px; }
@media only screen and (max-width: 667px) {
.p-block-c-h {
margin-top: 0;
margin-bottom: 20px; } }
.p-block-c-h__banner {
padding: 15px;
border-radius: 4px;
background-color: #f2f6f7; }
.p-block-c-h__banner img {
border: 1px solid #cddde1;
border-radius: 4px; }
.p-block-c-h__sns {
margin-top: 30px;
margin-bottom: 30px; }
@media only screen and (max-width: 667px) {
.p-block-c-h__sns {
position: static;
text-align: center;
margin-top: 15px;
bottom: auto; } }
.p-block-c-h__sns__tw {
display: inline-block; }
.p-block-c-h__sns__fb {
display: inline-block; }
.p-block-c-h__sns__fb .fb_iframe_widget > span {
vertical-align: baseline !important; }
.p-block-c-h__sns__store {
margin-top: 55px;
font-size: 1.5rem;
font-weight: bold;
border-bottom: 1px solid #dcdcdc; }
/*
Project Block : C-I
PRODUCT 検索
Markup:
p-block-c-i - デフォルトスタイル
Style guide: project.block.c.i
*/
.p-block-c-i {
display: block;
margin-top: 8px; }
@media only screen and (max-width: 667px) {
.p-block-c-i {
margin-top: 8px; } }
.p-block-c-i:first-child {
margin-top: 0; }
.p-block-c-i__checkbox {
display: none; }
.p-block-c-i__checkbox + .p-block-c-i__checkbox__label {
width: 100%;
border-radius: 4px;
padding: 10px 10px;
border: 1px solid #9eaabd;
background-color: #FFF;
color: #183561;
cursor: pointer;
font-size: 0.875rem; }
.p-block-c-i__checkbox:checked + .p-block-c-i__checkbox__label {
background-color: #6f92b6;
color: #fff; }
.p-block-c-i__checkbox:disabled + .p-block-c-i__checkbox__label {
cursor: default;
background-color: #FFF;
color: #bababa;
border-color: #bababa; }
/*
Project Block : C-J
PRODUCT 検索タイトル部分
Markup:
p-block-c-j - デフォルトスタイル
Style guide: project.block.c.j
*/
.p-block-c-j {
display: block;
margin-top: 25px; }
@media only screen and (max-width: 667px) {
.p-block-c-j {
margin-top: 0;
padding-left: 20px;
padding-right: 20px; } }
.p-block-c-j__head {
background-color: #e8f8f0;
text-align: center;
padding-bottom: 15px;
padding-top: 13px;
margin-bottom: 30px;
border-radius: 4px; }
@media only screen and (max-width: 667px) {
.p-block-c-j__head {
text-align: left;
padding-top: 0;
padding-bottom: 0;
background-color: transparent;
margin-bottom: 22px; } }
.p-block-c-j__head__icon--a {
display: inline-block;
margin-right: 12px; }
@media only screen and (max-width: 667px) {
.p-block-c-j__head__icon--a {
display: none; } }
.p-block-c-j__head__icon--b {
display: inline-block;
margin-right: 18px; }
@media only screen and (min-width: 668px) {
.p-block-c-j__head__icon--b {
display: none; } }
.p-block-c-j__head__label {
display: inline-block;
font-size: 1rem;
font-weight: bold; }
@media only screen and (max-width: 667px) {
.p-block-c-j__head__label {
font-size: 0.75rem; } }
.p-block-c-j__head:after {
content: "";
position: absolute;
left: 50%;
right: auto;
bottom: -12px;
margin-left: -6px;
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #e8f8f0 transparent transparent transparent; }
@media only screen and (max-width: 667px) {
.p-block-c-j__head:after {
content: none;
display: none; } }
.p-block-c-j__youtube {
width: 100%;
height: auto; }
.p-block-c-j__youtube__item {
position: relative;
width: 100%;
padding-top: 56.25%;
margin-top: 0; }
.p-block-c-j__youtube__item__frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.p-block-c-j__box {
margin-bottom: 53px; }
@media only screen and (max-width: 667px) {
.p-block-c-j__box {
margin-bottom: 38px; } }
.p-block-c-j__box__head {
margin-bottom: 8px; }
.p-block-c-j__box__head__icon {
float: left;
top: 6px;
margin-right: 8px; }
@media only screen and (max-width: 667px) {
.p-block-c-j__box__head__icon {
top: 3px;
margin-right: 6px; } }
.p-block-c-j__box__head__label {
font-weight: bold;
font-size: 1rem; }
@media only screen and (max-width: 667px) {
.p-block-c-j__box__head__label {
font-size: 0.75rem; } }
.p-block-c-j__box__head__label--b {
font-weight: bold;
font-size: 1rem;
padding-bottom: 3px;
border-bottom: 1px solid #ddd; }
@media only screen and (max-width: 667px) {
.p-block-c-j__box__head__label--b {
font-size: 0.75rem; } }
.p-block-c-j__box__head__label--c {
font-weight: bold;
margin-bottom: 10px; }
@media only screen and (max-width: 667px) {
.p-block-c-j__box__head__label--c {
float: left;
width: 33.9%; } }
.p-block-c-j__box__head__label--d {
font-weight: bold;
font-size: 1rem;
padding-bottom: 3px;
margin-bottom: 15px; }
@media only screen and (max-width: 667px) {
.p-block-c-j__box__head__label--d {
font-size: 0.75rem; } }
.p-block-c-j__box__head__label--e {
font-weight: bold;
font-size: 1rem;
padding-bottom: 3px;
margin-bottom: 22px;
border-bottom: 1px solid #ddd; }
@media only screen and (max-width: 667px) {
.p-block-c-j__box__head__label--e {
font-size: 0.75rem; } }
.p-block-c-j__btn__submit {
width: 100%;
margin-bottom: 12px; }
@media only screen and (max-width: 667px) {
.p-block-c-j__btn__submit > .c-btn__label {
font-size: 0.875rem; } }
.p-block-c-j__btn__reset {
width: 100%; }
.p-block-c-j__btn__reset > .c-btn__label {
padding: 18px 0 15px;
font-size: 1rem; }
@media only screen and (max-width: 667px) {
.p-block-c-j__btn__reset > .c-btn__label {
font-size: 0.875rem; } }
.p-block-c-j__region {
margin-top: 0;
margin-bottom: 30px;
padding-left: 0; }
.p-block-c-j__region__pref {
display: inline-block;
margin-bottom: 8px;
color: #757575;
white-space: nowrap; }
.p-block-c-j__region__pref__separator {
display: inline-block;
text-align: center; }
@media only screen and (max-width: 667px) {
.p-block-c-j__region__pref__separator {
width: 20%; } }
.p-block-c-j__region__pref__separator:nth-child(5n) {
display: none; }
@media only screen and (max-width: 1024px) {
.p-block-c-j__region__pref__separator:nth-child(5n) {
display: inline-block; } }
@media only screen and (max-width: 667px) {
.p-block-c-j__region__pref__separator:nth-child(5n) {
display: inline-block; } }
.p-block-c-j__region__pref__separator:last-child {
display: none; }
@media only screen and (max-width: 667px) {
.p-block-c-j__region__pref {
width: 30%; }
.p-block-c-j__region__pref__separator:nth-child(4n) {
display: none; } }
.p-block-c-j__region:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden; }
@media only screen and (max-width: 667px) {
.p-block-c-j__region {
float: left;
width: 66%;
margin-top: 0; } }
/*
Project Block : C-K
PRODUCT 取り扱い店舗モーダルダイアログ
Markup:
p-block-c-k - デフォルトスタイル
Style guide: project.block.c.k
*/
.p-block-c-k__modal__body {
min-height: 200px;
max-height: 694px;
overflow: auto; }
@media only screen and (max-width: 1024px) {
.p-block-c-k__modal__body {
max-height: none;
height: 100%; } }
.p-block-c-k__modal__btn {
background-color: #e3e3e3;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0; }
.p-block-c-k__modal__dialog {
width: calc(100% - 80px);
max-width: 900px;
position: fixed;
top: 100px;
left: 50%;
z-index: 30;
opacity: 1;
visibility: hidden;
display: none;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
outline: 0; }
@media only screen and (max-width: 1024px) {
.p-block-c-k__modal__dialog {
width: 100%;
height: 100%;
max-width: none;
top: 0;
left: -100%;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none; } }
.p-block-c-k__modal__title {
display: none; }
@media only screen and (max-width: 1024px) {
.p-block-c-k__modal__title {
display: block;
margin-top: -17px; } }
.p-block-c-k__modal__close {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color: #e3e3e3;
padding: 10px;
z-index: 50; }
@media only screen and (max-width: 1024px) {
.p-block-c-k__modal__close {
width: auto;
height: auto;
top: 10px;
right: 10px;
background: none; } }
.p-block-c-k__modal__map {
text-align: center; }
.p-block-c-k__modal__icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
width: 11px; }
@media only screen and (max-width: 1024px) {
.p-block-c-k__modal__icon {
display: block;
margin: auto; } }
/*
Project Block : D-A
NEWS リスト
Markup:
p-block-d-a - デフォルトスタイル
Style guide: project.block.d.a
*/
.p-block-d-a__item {
padding-bottom: 20px;
margin-bottom: 20px; }
.p-block-d-a__item:last-child {
margin-bottom: 0; }
.p-block-d-a__item__link:hover .p-block-d-a__item__title {
color: #009444;
text-decoration: underline; }
.p-block-d-a__item__date {
color: #262626;
font-family: 'Montserrat', sans-serif;
font-size: 1.125rem; }
@media only screen and (max-width: 667px) {
.p-block-d-a__item__date {
font-size: 1rem; } }
.p-block-d-a__item__title {
color: #183561;
margin-top: 15px;
font-size: 1.25rem; }
@media only screen and (max-width: 667px) {
.p-block-d-a__item__title {
font-size: 1.125rem; } }
/*
Project Block : D-B
NEWS 詳細タイトル
Markup:
ブシロードクリエイティブのサイトが公開されました。
p-block-d-b - デフォルトスタイル
Style guide: project.block.d.b
*/
.p-block-d-b {
padding-bottom: 20px;
margin-bottom: 30px;
margin-top: 50px; }
@media only screen and (max-width: 667px) {
.p-block-d-b {
margin-top: 20px; } }
.p-block-d-b__date {
float: left;
font-family: 'Montserrat', sans-serif;
font-size: 1.125rem; }
@media only screen and (max-width: 667px) {
.p-block-d-b__date {
font-size: 1rem; } }
.p-block-d-b__icon {
float: left;
margin-left: 20px; }
.p-block-d-b__title {
color: #353535;
margin-top: 20px;
font-size: 1.5rem; }
@media only screen and (max-width: 667px) {
.p-block-d-b__title {
font-size: 1rem; } }
/*
Project Block : E-A
問い合わせ テーブル
Markup:
label-c-selectfield-option-n
label-c-selectfield-option-1
label-c-selectfield-option-2
label-c-selectfield-option-3
p-block-e-a - デフォルトスタイル
style guide: project.block.e.a
*/
.p-block-e-a {
margin-bottom: 50px; }
@media only screen and (max-width: 667px) {
.p-block-e-a {
margin-bottom: 20px; } }
.p-block-e-a__item {
display: table;
width: 100%;
padding-top: 12px;
padding-bottom: 12px; }
.p-block-e-a__item__cell--a {
width: 27.44807%;
display: table-cell;
vertical-align: middle; }
@media only screen and (max-width: 667px) {
.p-block-e-a__item__cell--a {
width: 100%;
display: block;
margin-bottom: 10px; } }
.p-block-e-a__item__cell--b {
display: table-cell;
width: 72.55193%; }
@media only screen and (max-width: 667px) {
.p-block-e-a__item__cell--b {
width: 100%;
display: block; } }
.p-block-e-a__item__text {
font-size: 1rem;
font-weight: bold;
display: inline-block; }
.p-block-e-a__item__required {
color: #f31d00;
font-weight: bold;
margin-left: 10px;
display: inline-block; }
/*
Project Block : E-B
問い合わせ テキスト
Markup:
サービスや会社情報など、ブシロードクリエイティブについて、お気軽にご連絡ください。
p-block-e-b - デフォルトスタイル
style guide: project.block.e.b
*/
.p-block-e-b {
margin-bottom: 20px; }
.p-block-e-b__text {
line-height: 2; }
/*
Project Block : E-C
問い合わせ テーブル
Markup:
サンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキストサンプルサンプルテキストテキスト
p-block-e-c - デフォルトスタイル
style guide: project.block.e.c
*/
.p-block-e-c {
margin-bottom: 50px; }
@media only screen and (max-width: 667px) {
.p-block-e-c {
margin-bottom: 30px; } }
.p-block-e-c__item {
display: table;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #cbe4dc; }
.p-block-e-c__item__cell--a {
width: 27.44807%;
display: table-cell;
vertical-align: middle; }
@media only screen and (max-width: 667px) {
.p-block-e-c__item__cell--a {
width: 100%;
display: block;
margin-bottom: 10px; } }
.p-block-e-c__item__cell--b {
display: table-cell;
width: 72.55193%; }
@media only screen and (max-width: 667px) {
.p-block-e-c__item__cell--b {
width: 100%;
display: block; } }
.p-block-e-c__item__cell--b > p {
line-height: 2; }
.p-block-e-c__item__text {
font-size: 1rem;
font-weight: bold;
display: inline-block; }
.p-block-e-c__item__required {
color: #f31d00;
font-weight: bold;
margin-left: 10px;
display: inline-block; }
/*
Project Block : E-D
問い合わせ ボタン２つ
Markup:
p-block-e-d - デフォルトスタイル
style guide: project.block.e.d
*/
.p-block-e-d {
width: 455px;
margin-left: auto;
margin-right: auto; }
@media only screen and (max-width: 667px) {
.p-block-e-d {
width: 100%; } }
.p-block-e-d__cell--a {
width: 220px;
float: left; }
@media only screen and (max-width: 667px) {
.p-block-e-d__cell--a {
float: none;
width: auto; } }
.p-block-e-d__cell--b {
width: 220px;
float: right; }
@media only screen and (max-width: 667px) {
.p-block-e-d__cell--b {
width: auto;
float: none; } }
/*
Project Block : E-E
問い合わせ 確認テキスト
Markup:
確認
以下の内容で送信いたします。よろしければ送信ボタンを押してください。
p-block-e-e - デフォルトスタイル
style guide: project.block.e.e
*/
.p-block-e-e {
margin-bottom: 20px; }
.p-block-e-e__head {
font-weight: bold;
color: #46cce4;
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center; }
@media only screen and (max-width: 667px) {
.p-block-e-e__head {
font-size: 1.25rem; } }
.p-block-e-e__text {
font-size: 1rem;
line-height: 2; }
@media only screen and (max-width: 667px) {
.p-block-e-e__text {
font-size: 0.875rem;
line-height: 1.5; } }
/*
Project Block : F-A
ページャー
Markup:
p-block-f-a - デフォルトスタイル
Style guide: project.block.f.a
*/
.p-block-f-a {
margin-top: 50px; }
.p-block-f-a__container {
text-align: center; }
.p-block-f-a__btn {
display: inline-block; }
.p-block-f-a__btn:hover {
opacity: 0.8; }
.p-block-f-a__btn__icon {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; }
.p-block-f-a__btn__label {
padding: 0;
line-height: 38px;
font-size: 1.375rem;
font-family: 'Montserrat', sans-serif; }
.p-block-f-a__btn--current {
background-color: #009444; }
.p-block-f-a__btn--current .p-block-f-a__btn__label {
color: #fff; }
/*
Project Block : F-B
下層見出し
Markup:
p-block-f-b - デフォルトスタイル
Style guide: project.block.f.b
*/
.p-block-f-b {
padding-top: 25px;
margin-bottom: 45px; }
@media only screen and (max-width: 667px) {
.p-block-f-b {
padding-top: 23px;
padding-bottom: 20px;
margin-bottom: 27px; } }
.p-block-f-b__head {
font-size: 2.5rem; }
@media only screen and (max-width: 667px) {
.p-block-f-b__head {
font-size: 1.56rem; } }
@media only screen and (max-width: 667px) {
.p-block-f-b__text {
font-size: 0.625rem; } }
.p-block-f-b__bottom {
padding-top: 20px;
width: 100%; }
@media only screen and (max-width: 667px) {
.p-block-f-b__bottom {
display: none; } }
.p-block-f-b__bottom__src {
width: 100%;
vertical-align: bottom; }
/*
Project Block : F-C
SNS
Markup:
p-block-f-c - デフォルトスタイル
Style guide: project.block.f.c
*/
.p-block-f-c {
margin-top: 17px;
text-align: right; }
@media only screen and (max-width: 667px) {
.p-block-f-c {
border-top: 1px solid #cbe4dc;
border-bottom: 1px solid #cbe4dc;
text-align: center;
padding-top: 15px;
padding-bottom: 15px; } }
.p-block-f-c__tw {
display: inline-block; }
.p-block-f-c__fb {
display: inline-block; }
.p-block-f-c__fb .fb_iframe_widget > span {
vertical-align: baseline !important; }
/*
Project Block : F-D
パンくず
Markup:
p-block-f-d - デフォルトスタイル
style guide: project.block.f.d
*/
.p-block-f-d {
padding: 8px 0;
background: #f5fcf6;
border-top: 1px solid #cfe6e9;
border-bottom: 1px solid #cfe6e9; }
@media only screen and (max-width: 667px) {
.p-block-f-d {
width: 100%; } }
.p-block-f-d__container {
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap; }
.p-block-f-d__nav__items {
padding: 0; }
.p-block-f-d__nav__item {
display: inline;
font-size: 0.75rem; }
@media only screen and (max-width: 667px) {
.p-block-f-d__nav__item {
font-size: 0.625rem; } }
.p-block-f-d__nav__item:after {
content: '';
position: relative;
display: inline-block;
width: 5px;
height: 5px;
vertical-align: middle;
top: 0px;
margin-left: 7px;
margin-right: 7px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg); }
.p-block-f-d__nav__item:last-child:after {
content: none; }
.p-block-f-d__nav__item__link {
font-size: 0.75rem; }
@media only screen and (max-width: 667px) {
.p-block-f-d__nav__item__link {
font-size: 0.625rem; } }
/*
Project Block : F-E
検索メニュー
Markup:
p-block-f-e - デフォルトスタイル
style guide: project.block.f.e
*/
.p-block-f-e__box {
border-bottom: 1px solid #bac9cb;
padding-bottom: 18px;
margin-bottom: 18px; }
.p-block-f-e__box__head {
color: #009444;
font-size: 1.25rem;
float: left;
margin-right: 27px;
margin-top: 6px; }
@media only screen and (max-width: 667px) {
.p-block-f-e__box__head {
margin-right: 13px; } }
.p-block-f-e__box__list {
overflow: hidden; }
.p-block-f-e__box__list__item {
padding: 10px 0; }
/*
Project Block : F-F
検索メニュー開閉
Markup:
p-block-f-f - デフォルトスタイル
style guide: project.block.f.f
*/
.p-block-f-f {
position: fixed;
top: 0;
right: -30%;
box-sizing: border-box;
width: 30%;
height: 100%;
text-align: left;
font-size: 13px;
background: #e7f1f2;
z-index: 30;
padding: 35px 40px 40px;
overflow: auto; }
@media only screen and (max-width: 1024px) {
.p-block-f-f {
right: -380px;
width: 380px; } }
@media only screen and (max-width: 667px) {
.p-block-f-f {
right: -100%;
width: 100%; } }
.p-block-f-f__close {
position: absolute;
right: 35px;
top: 25px; }
#js-overlay {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: -1;
transition: 0.3s;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden; }
#js-overlay.block {
z-index: 20;
opacity: 1;
visibility: visible; }
#js-overlay-android {
display: none;
width: 100%;
height: 100%;
display: none;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 20;
visibility: hidden; }
/*
Project Block : F-G
ページトップ
Markup:
p-block-f-g - デフォルトスタイル
style guide: project.block.f.g
*/
.p-block-f-g {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 30; }
.p-block-f-g.up {
bottom: 140px; }
@media only screen and (max-width: 667px) {
.p-block-f-g.up {
bottom: 90px; } }
/*
Project Block : F-H
検索メニュー開閉
Markup:
p-block-f-h - デフォルトスタイル
style guide: project.block.f.h
*/
.p-block-f-h {
margin-bottom: 30px; }
.p-block-f-h__icon {
margin-right: 18px;
display: inline-block; }
.p-block-f-h__text {
display: inline-block; }
/*
Project Block : G-C
PRIZE リストアイテム
Markup:
テスト作品
p-block-g-c - デフォルトスタイル
Style guide: project.block.c.a
*/
.p-block-g-c__link:hover .p-block-g-c__title {
color: #db3c14;
text-decoration: underline; }
.p-block-g-c__pict {
margin-bottom: 15px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF;
border: none; }
.p-block-g-c__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-g-c__title {
color: #183561; }
/*
Project Block : H-A
PRIZE リストアイテム
Markup:
ラブライブ！サンシャイン！！
1件～12件（全14件）
p-block-h-a - デフォルトスタイル
Style guide: project.block.h.a
*/
.p-block-h-a__link:hover .p-block-h-a__title {
color: #db3c14;
text-decoration: underline; }
.p-block-h-a__pict {
margin-bottom: 15px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-h-a__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-h-a__title {
color: #183561; }
/*
Project Block : H-B
PRIZE リスト
Markup:
ラブライブ！サンシャイン！！
1件～12件（全14件）
p-block-h-b - デフォルトスタイル
Style guide: project.block.h.b
*/
.p-block-h-b {
margin-top: -45px; }
.p-block-h-b__cell {
width: 22.11538%;
float: left;
margin-left: 3.84615%;
margin-top: 45px; }
.p-block-h-b__cell:nth-child(4n+1) {
margin-left: 0;
clear: left; }
@media only screen and (max-width: 667px) {
.p-block-h-b__cell {
width: 47.143%;
margin-left: 0; }
.p-block-h-b__cell:nth-child(4n+1) {
clear: none; }
.p-block-h-b__cell:nth-child(odd) {
float: left;
clear: both; }
.p-block-h-b__cell:nth-child(even) {
float: right; } }
.p-block-h-b__text {
margin-top: 45px; }
.p-block-h-b__title {
color: #009444;
border-bottom: 1px solid #009444;
padding: 15px 0 6px !important;
font-size: 18px;
font-weight: normal;
border-top: 85px solid transparent;
margin-top: -85px; }
@media only screen and (max-width: 1024px) {
.p-block-h-b__title {
border-top: 59px solid transparent;
margin-top: -59px; } }
/*
Project Block : H-C
PRIZE リストアイテム
Markup:
p-block-h-c - デフォルトスタイル
Style guide: project.block.c.a
*/
.p-block-h-c__link:hover .p-block-h-c__title {
color: #db3c14;
text-decoration: underline; }
.p-block-h-c__link.no-image {
padding: 10px 15px;
border-radius: 5px;
border: 1px solid #324561; }
.p-block-h-c__pict {
margin-bottom: 15px;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF;
border: none; }
.p-block-h-c__pict img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-h-c__title {
color: #183561; }
/*
Project Block : H-D
PRIZE 一覧トップ画像
Markup:
ラブライブ！サンシャイン！！
1件～12件（全14件）
p-block-h-d - デフォルトスタイル
Style guide: project.block.h.d
*/
.p-block-h-d {
width: 100%;
margin-top: 27px; }
@media only screen and (max-width: 667px) {
.p-block-h-d {
margin-top: 15px; } }
.p-block-h-d__cell--a {
display: block;
width: 100%; }
.p-block-h-d__image {
width: 100%;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF;
border: none; }
.p-block-h-d__image img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
.p-block-h-d__banner {
margin-bottom: 50px; }
@media only screen and (max-width: 1024px) {
.p-block-h-d__banner {
margin-bottom: 30px; } }
@media only screen and (max-width: 667px) {
.p-block-h-d__thumb {
margin-top: 10px;
width: 100%;
overflow: auto; } }
@media only screen and (max-width: 667px) {
.p-block-h-d__thumb__container {
width: 1430px; } }
.p-block-h-d__thumb__item {
float: left;
margin-right: 2.85714%;
margin-bottom: 10px;
height: 60px;
width: 22.85714%;
overflow: hidden;
border-radius: 4px;
border: 1px solid #cbe4dc;
text-align: center;
background-color: #FFF; }
.p-block-h-d__thumb__item img {
position: absolute;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%; }
@media only screen and (max-width: 667px) {
.p-block-h-d__thumb__item {
width: 80px;
margin-right: 10px; } }
.p-block-h-d__thumb__item a {
display: block;
height: 100%;
width: 100%;
overflow: hidden; }
.p-block-h-d__thumb__item:nth-child(4n) {
margin-right: 0; }
@media only screen and (max-width: 667px) {
.p-block-h-d__thumb__item:nth-child(4n) {
margin-right: 10px; } }
@media only screen and (max-width: 667px) {
.p-block-h-d__thumb__item:last-child {
margin-right: 0; } }
/* Utility
----------------------------------------------------------------- */
/*
Utility
ユーティリティ
Weight: 0
Style guide: utility
*/
/*
Margin
`margin` 調整のためのユーティリティ（例は、最小値と最大値のみ表示。5px 単位で設定可能）
Markup:
u-margin-top5 - 上に 5px のマージン
u-margin-right5 - 右に 5px のマージン
u-margin-bottom5 - 下に 5px のマージン
u-margin-left5 - 左に 5px のマージン
u-margin-top50 - 上に 50px のマージン
u-margin-right50 - 右に 50px のマージン
u-margin-bottom50 - 下に 50px のマージン
u-margin-left50 - 左に 50px のマージン
u-margin-top5- - 上に 5px のネガティブマージン
u-margin-right5- - 右に 5px のネガティブマージン
u-margin-bottom5- - 下に 5px のネガティブマージン
u-margin-left5- - 左に 5px のネガティブマージン
u-margin-top50- - 上に 5p0x のネガティブマージン
u-margin-right50- - 右に 50px のネガティブマージン
u-margin-bottom50- - 下に 50px のネガティブマージン
u-margin-left50- - 左に 50px のネガティブマージン
u-margin-center - ボックスの水平中央寄せ
Style guide: utility.margin
*/
.u-margin-top0 {
margin-top: 0px !important; }
.u-margin-top0- {
margin-top: 0px !important; }
.u-margin-left0 {
margin-left: 0px !important; }
.u-margin-left0- {
margin-left: 0px !important; }
.u-margin-bottom0 {
margin-bottom: 0px !important; }
.u-margin-bottom0- {
margin-bottom: 0px !important; }
.u-margin-right0 {
margin-right: 0px !important; }
.u-margin-right0- {
margin-right: 0px !important; }
.u-margin-top5 {
margin-top: 5px !important; }
.u-margin-top5- {
margin-top: -5px !important; }
.u-margin-left5 {
margin-left: 5px !important; }
.u-margin-left5- {
margin-left: -5px !important; }
.u-margin-bottom5 {
margin-bottom: 5px !important; }
.u-margin-bottom5- {
margin-bottom: -5px !important; }
.u-margin-right5 {
margin-right: 5px !important; }
.u-margin-right5- {
margin-right: -5px !important; }
.u-margin-top10 {
margin-top: 10px !important; }
.u-margin-top10- {
margin-top: -10px !important; }
.u-margin-left10 {
margin-left: 10px !important; }
.u-margin-left10- {
margin-left: -10px !important; }
.u-margin-bottom10 {
margin-bottom: 10px !important; }
.u-margin-bottom10- {
margin-bottom: -10px !important; }
.u-margin-right10 {
margin-right: 10px !important; }
.u-margin-right10- {
margin-right: -10px !important; }
.u-margin-top15 {
margin-top: 15px !important; }
.u-margin-top15- {
margin-top: -15px !important; }
.u-margin-left15 {
margin-left: 15px !important; }
.u-margin-left15- {
margin-left: -15px !important; }
.u-margin-bottom15 {
margin-bottom: 15px !important; }
.u-margin-bottom15- {
margin-bottom: -15px !important; }
.u-margin-right15 {
margin-right: 15px !important; }
.u-margin-right15- {
margin-right: -15px !important; }
.u-margin-top20 {
margin-top: 20px !important; }
.u-margin-top20- {
margin-top: -20px !important; }
.u-margin-left20 {
margin-left: 20px !important; }
.u-margin-left20- {
margin-left: -20px !important; }
.u-margin-bottom20 {
margin-bottom: 20px !important; }
.u-margin-bottom20- {
margin-bottom: -20px !important; }
.u-margin-right20 {
margin-right: 20px !important; }
.u-margin-right20- {
margin-right: -20px !important; }
.u-margin-top25 {
margin-top: 25px !important; }
.u-margin-top25- {
margin-top: -25px !important; }
.u-margin-left25 {
margin-left: 25px !important; }
.u-margin-left25- {
margin-left: -25px !important; }
.u-margin-bottom25 {
margin-bottom: 25px !important; }
.u-margin-bottom25- {
margin-bottom: -25px !important; }
.u-margin-right25 {
margin-right: 25px !important; }
.u-margin-right25- {
margin-right: -25px !important; }
.u-margin-top30 {
margin-top: 30px !important; }
.u-margin-top30- {
margin-top: -30px !important; }
.u-margin-left30 {
margin-left: 30px !important; }
.u-margin-left30- {
margin-left: -30px !important; }
.u-margin-bottom30 {
margin-bottom: 30px !important; }
.u-margin-bottom30- {
margin-bottom: -30px !important; }
.u-margin-right30 {
margin-right: 30px !important; }
.u-margin-right30- {
margin-right: -30px !important; }
.u-margin-top35 {
margin-top: 35px !important; }
.u-margin-top35- {
margin-top: -35px !important; }
.u-margin-left35 {
margin-left: 35px !important; }
.u-margin-left35- {
margin-left: -35px !important; }
.u-margin-bottom35 {
margin-bottom: 35px !important; }
.u-margin-bottom35- {
margin-bottom: -35px !important; }
.u-margin-right35 {
margin-right: 35px !important; }
.u-margin-right35- {
margin-right: -35px !important; }
.u-margin-top40 {
margin-top: 40px !important; }
.u-margin-top40- {
margin-top: -40px !important; }
.u-margin-left40 {
margin-left: 40px !important; }
.u-margin-left40- {
margin-left: -40px !important; }
.u-margin-bottom40 {
margin-bottom: 40px !important; }
.u-margin-bottom40- {
margin-bottom: -40px !important; }
.u-margin-right40 {
margin-right: 40px !important; }
.u-margin-right40- {
margin-right: -40px !important; }
.u-margin-top45 {
margin-top: 45px !important; }
.u-margin-top45- {
margin-top: -45px !important; }
.u-margin-left45 {
margin-left: 45px !important; }
.u-margin-left45- {
margin-left: -45px !important; }
.u-margin-bottom45 {
margin-bottom: 45px !important; }
.u-margin-bottom45- {
margin-bottom: -45px !important; }
.u-margin-right45 {
margin-right: 45px !important; }
.u-margin-right45- {
margin-right: -45px !important; }
.u-margin-top50 {
margin-top: 50px !important; }
.u-margin-top50- {
margin-top: -50px !important; }
.u-margin-left50 {
margin-left: 50px !important; }
.u-margin-left50- {
margin-left: -50px !important; }
.u-margin-bottom50 {
margin-bottom: 50px !important; }
.u-margin-bottom50- {
margin-bottom: -50px !important; }
.u-margin-right50 {
margin-right: 50px !important; }
.u-margin-right50- {
margin-right: -50px !important; }
.u-margin-center {
margin-left: auto !important;
margin-right: auto !important; }
/*
Padding
`padding` 調整のためのユーティリティ（例は、最小値と最大値のみ表示。5px 単位で設定可能）
Markup:
u-padding-top5 - 上に 5px のパディング
u-padding-right5 - 右に 5px のパディング
u-padding-bottom5 - 下に 5px のパディング
u-padding-left5 - 左に 5px のパディング
u-padding-top50 - 上に 50px のパディング
u-padding-right50 - 右に 50px のパディング
u-padding-bottom50 - 下に 50px のパディング
u-padding-left50 - 左に 50px のパディング
Style guide: utility.padding
*/
.u-padding-top0 {
padding-top: 0px !important; }
.u-padding-left0 {
padding-left: 0px !important; }
.u-padding-bottom0 {
padding-bottom: 0px !important; }
.u-padding-right0 {
padding-right: 0px !important; }
.u-padding-top5 {
padding-top: 5px !important; }
.u-padding-left5 {
padding-left: 5px !important; }
.u-padding-bottom5 {
padding-bottom: 5px !important; }
.u-padding-right5 {
padding-right: 5px !important; }
.u-padding-top10 {
padding-top: 10px !important; }
.u-padding-left10 {
padding-left: 10px !important; }
.u-padding-bottom10 {
padding-bottom: 10px !important; }
.u-padding-right10 {
padding-right: 10px !important; }
.u-padding-top15 {
padding-top: 15px !important; }
.u-padding-left15 {
padding-left: 15px !important; }
.u-padding-bottom15 {
padding-bottom: 15px !important; }
.u-padding-right15 {
padding-right: 15px !important; }
.u-padding-top20 {
padding-top: 20px !important; }
.u-padding-left20 {
padding-left: 20px !important; }
.u-padding-bottom20 {
padding-bottom: 20px !important; }
.u-padding-right20 {
padding-right: 20px !important; }
.u-padding-top25 {
padding-top: 25px !important; }
.u-padding-left25 {
padding-left: 25px !important; }
.u-padding-bottom25 {
padding-bottom: 25px !important; }
.u-padding-right25 {
padding-right: 25px !important; }
.u-padding-top30 {
padding-top: 30px !important; }
.u-padding-left30 {
padding-left: 30px !important; }
.u-padding-bottom30 {
padding-bottom: 30px !important; }
.u-padding-right30 {
padding-right: 30px !important; }
.u-padding-top35 {
padding-top: 35px !important; }
.u-padding-left35 {
padding-left: 35px !important; }
.u-padding-bottom35 {
padding-bottom: 35px !important; }
.u-padding-right35 {
padding-right: 35px !important; }
.u-padding-top40 {
padding-top: 40px !important; }
.u-padding-left40 {
padding-left: 40px !important; }
.u-padding-bottom40 {
padding-bottom: 40px !important; }
.u-padding-right40 {
padding-right: 40px !important; }
.u-padding-top45 {
padding-top: 45px !important; }
.u-padding-left45 {
padding-left: 45px !important; }
.u-padding-bottom45 {
padding-bottom: 45px !important; }
.u-padding-right45 {
padding-right: 45px !important; }
.u-padding-top50 {
padding-top: 50px !important; }
.u-padding-left50 {
padding-left: 50px !important; }
.u-padding-bottom50 {
padding-bottom: 50px !important; }
.u-padding-right50 {
padding-right: 50px !important; }
/*
Border
`border` 調整のためのユーティリティ
Markup:
u-border-none-top - 上のボーダーを解除
u-border-none-right - 右のボーダーを解除
u-border-none-bottom - 下のボーダーを解除
u-border-none-left - 左のボーダーを解除
u-border-a-a-top - 上に 1px (`#000`) のボーダー
u-border-a-a-right - 右に 1px (`#000`) のボーダー
u-border-a-a-bottom - 下に 1px (`#000`) のボーダー
u-border-a-a-left - 左に 1px (`#000`) のボーダー
Style guide: utility.border
*/
.u-border-none-top {
border-top: 0 !important; }
.u-border-a-a-top {
border-top: 1px solid #000 !important; }
.u-border-none-left {
border-left: 0 !important; }
.u-border-a-a-left {
border-left: 1px solid #000 !important; }
.u-border-none-bottom {
border-bottom: 0 !important; }
.u-border-a-a-bottom {
border-bottom: 1px solid #000 !important; }
.u-border-none-right {
border-right: 0 !important; }
.u-border-a-a-right {
border-right: 1px solid #000 !important; }
/*
Positions
`position` 調整のためのユーティリティ（例は、最小値と最大値のみ表示。5px 単位で設定可能）
Markup:
u-position-top5 - 上に 5px の移動
u-position-right5 - 右に 5px の移動
u-position-bottom5 - 下に 5px の移動
u-position-left5 - 左に 5px の移動
u-position-top50 - 上に 50px の移動
u-position-right50 - 右に 50px の移動
u-position-bottom50 - 下に 50px の移動
u-position-left50 - 左に 50px の移動
u-position-top5- - 上に -5px の移動
u-position-right5- - 右に -5px の移動
u-position-bottom5- - 下に -5px の移動
u-position-left5- - 左に -5px の移動
u-position-top50- - 上に -50px の移動
u-position-right50- - 右に -50px の移動
u-position-bottom50- - 下に -50px の移動
u-position-left50- - 左に -50px の移動
Style guide: utility.position
*/
.u-position-top0 {
top: 0px !important; }
.u-position-top0- {
top: 0px !important; }
.u-position-left0 {
left: 0px !important; }
.u-position-left0- {
left: 0px !important; }
.u-position-bottom0 {
bottom: 0px !important; }
.u-position-bottom0- {
bottom: 0px !important; }
.u-position-right0 {
right: 0px !important; }
.u-position-right0- {
right: 0px !important; }
.u-position-top5 {
top: 5px !important; }
.u-position-top5- {
top: -5px !important; }
.u-position-left5 {
left: 5px !important; }
.u-position-left5- {
left: -5px !important; }
.u-position-bottom5 {
bottom: 5px !important; }
.u-position-bottom5- {
bottom: -5px !important; }
.u-position-right5 {
right: 5px !important; }
.u-position-right5- {
right: -5px !important; }
.u-position-top10 {
top: 10px !important; }
.u-position-top10- {
top: -10px !important; }
.u-position-left10 {
left: 10px !important; }
.u-position-left10- {
left: -10px !important; }
.u-position-bottom10 {
bottom: 10px !important; }
.u-position-bottom10- {
bottom: -10px !important; }
.u-position-right10 {
right: 10px !important; }
.u-position-right10- {
right: -10px !important; }
.u-position-top15 {
top: 15px !important; }
.u-position-top15- {
top: -15px !important; }
.u-position-left15 {
left: 15px !important; }
.u-position-left15- {
left: -15px !important; }
.u-position-bottom15 {
bottom: 15px !important; }
.u-position-bottom15- {
bottom: -15px !important; }
.u-position-right15 {
right: 15px !important; }
.u-position-right15- {
right: -15px !important; }
.u-position-top20 {
top: 20px !important; }
.u-position-top20- {
top: -20px !important; }
.u-position-left20 {
left: 20px !important; }
.u-position-left20- {
left: -20px !important; }
.u-position-bottom20 {
bottom: 20px !important; }
.u-position-bottom20- {
bottom: -20px !important; }
.u-position-right20 {
right: 20px !important; }
.u-position-right20- {
right: -20px !important; }
.u-position-top25 {
top: 25px !important; }
.u-position-top25- {
top: -25px !important; }
.u-position-left25 {
left: 25px !important; }
.u-position-left25- {
left: -25px !important; }
.u-position-bottom25 {
bottom: 25px !important; }
.u-position-bottom25- {
bottom: -25px !important; }
.u-position-right25 {
right: 25px !important; }
.u-position-right25- {
right: -25px !important; }
.u-position-top30 {
top: 30px !important; }
.u-position-top30- {
top: -30px !important; }
.u-position-left30 {
left: 30px !important; }
.u-position-left30- {
left: -30px !important; }
.u-position-bottom30 {
bottom: 30px !important; }
.u-position-bottom30- {
bottom: -30px !important; }
.u-position-right30 {
right: 30px !important; }
.u-position-right30- {
right: -30px !important; }
.u-position-top35 {
top: 35px !important; }
.u-position-top35- {
top: -35px !important; }
.u-position-left35 {
left: 35px !important; }
.u-position-left35- {
left: -35px !important; }
.u-position-bottom35 {
bottom: 35px !important; }
.u-position-bottom35- {
bottom: -35px !important; }
.u-position-right35 {
right: 35px !important; }
.u-position-right35- {
right: -35px !important; }
.u-position-top40 {
top: 40px !important; }
.u-position-top40- {
top: -40px !important; }
.u-position-left40 {
left: 40px !important; }
.u-position-left40- {
left: -40px !important; }
.u-position-bottom40 {
bottom: 40px !important; }
.u-position-bottom40- {
bottom: -40px !important; }
.u-position-right40 {
right: 40px !important; }
.u-position-right40- {
right: -40px !important; }
.u-position-top45 {
top: 45px !important; }
.u-position-top45- {
top: -45px !important; }
.u-position-left45 {
left: 45px !important; }
.u-position-left45- {
left: -45px !important; }
.u-position-bottom45 {
bottom: 45px !important; }
.u-position-bottom45- {
bottom: -45px !important; }
.u-position-right45 {
right: 45px !important; }
.u-position-right45- {
right: -45px !important; }
.u-position-top50 {
top: 50px !important; }
.u-position-top50- {
top: -50px !important; }
.u-position-left50 {
left: 50px !important; }
.u-position-left50- {
left: -50px !important; }
.u-position-bottom50 {
bottom: 50px !important; }
.u-position-bottom50- {
bottom: -50px !important; }
.u-position-right50 {
right: 50px !important; }
.u-position-right50- {
right: -50px !important; }
/*
Width
`width` 調整のためのユーティリティ（数値指定は 25px 単位で設定可能）
Markup:
u-width-auto - auto に指定
u-width-fit - 100% に指定
u-width-25 - 25px に指定
u-width-500 - 500px に指定
Style guide: utility.width
*/
.u-width-auto {
width: auto !important; }
.u-width-fit {
width: 100% !important; }
.u-width-25 {
width: 25px !important; }
.u-width-50 {
width: 50px !important; }
.u-width-75 {
width: 75px !important; }
.u-width-100 {
width: 100px !important; }
.u-width-125 {
width: 125px !important; }
.u-width-150 {
width: 150px !important; }
.u-width-175 {
width: 175px !important; }
.u-width-200 {
width: 200px !important; }
.u-width-225 {
width: 225px !important; }
.u-width-250 {
width: 250px !important; }
.u-width-275 {
width: 275px !important; }
.u-width-300 {
width: 300px !important; }
.u-width-325 {
width: 325px !important; }
.u-width-350 {
width: 350px !important; }
.u-width-375 {
width: 375px !important; }
.u-width-400 {
width: 400px !important; }
.u-width-425 {
width: 425px !important; }
.u-width-450 {
width: 450px !important; }
.u-width-475 {
width: 475px !important; }
.u-width-500 {
width: 500px !important; }
/*
Height
`height` 調整のためのユーティリティ（数値指定は 25px 単位で設定可能）
Markup:
u-height-auto - auto に指定
u-height-fit - 100% に指定
u-height-25 - 25px に指定
u-height-500 - 500px に指定
Style guide: utility.height
*/
.u-height-auto {
height: auto !important; }
.u-height-fit {
height: 100% !important; }
.u-height-25 {
height: 25px !important; }
.u-height-50 {
height: 50px !important; }
.u-height-75 {
height: 75px !important; }
.u-height-100 {
height: 100px !important; }
.u-height-125 {
height: 125px !important; }
.u-height-150 {
height: 150px !important; }
.u-height-175 {
height: 175px !important; }
.u-height-200 {
height: 200px !important; }
.u-height-225 {
height: 225px !important; }
.u-height-250 {
height: 250px !important; }
.u-height-275 {
height: 275px !important; }
.u-height-300 {
height: 300px !important; }
.u-height-325 {
height: 325px !important; }
.u-height-350 {
height: 350px !important; }
.u-height-375 {
height: 375px !important; }
.u-height-400 {
height: 400px !important; }
.u-height-425 {
height: 425px !important; }
.u-height-450 {
height: 450px !important; }
.u-height-475 {
height: 475px !important; }
.u-height-500 {
height: 500px !important; }
/*
Float
`float` 設定のためのユーティリティ
Markup:
div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
u-float-left - 左フロート
u-float-right - 右フロート
u-float-none - フロートを解除
Style guide: utility.float
*/
.u-float-left {
float: left !important; }
.u-float-right {
float: right !important; }
.u-float-none {
float: none !important; }
/*
Clear
`float` 解除のためのユーティリティ
Markup:
div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lobortis purus. Duis ullamcorper sapien et porttitor facilisis. Nullam ac diam non massa cursus dignissim a tristique sem. Cras sit amet arcu lectus. Etiam vitae velit nisi. Suspendisse tristique semper euismod. Aenean a mauris eleifend, feugiat ante vel, molestie ipsum.
u-clear-left - 左フロートをクリア
u-clear-right - 右フロートをクリア
u-clear-both - 両方のフロートをクリア
Style guide: utility.clear
*/
.u-clear-left {
clear: left !important; }
.u-clear-right {
clear: right !important; }
.u-clear-both {
clear: both !important; }
/*
ZIndex
`z-index` 調整のためのユーティリティ（5 単位で設定可能）
Markup:
u-z-index-0 - 重なり順 0
u-z-index-25 - 重なり順 25
u-z-index-50 - 重なり順 50
Style guide: utility.zindex
*/
.u-z-index-0 {
z-index: 0 !important; }
.u-z-index-5 {
z-index: 5 !important; }
.u-z-index-10 {
z-index: 10 !important; }
.u-z-index-15 {
z-index: 15 !important; }
.u-z-index-20 {
z-index: 20 !important; }
.u-z-index-25 {
z-index: 25 !important; }
.u-z-index-30 {
z-index: 30 !important; }
.u-z-index-35 {
z-index: 35 !important; }
.u-z-index-40 {
z-index: 40 !important; }
.u-z-index-45 {
z-index: 45 !important; }
.u-z-index-50 {
z-index: 50 !important; }
/*
Vertical Align
縦方向の整列のためのユーティリティ
Markup:
u-valign-top - 上揃え
u-valign-middle - 中央揃え
u-valign-bottom - 下揃え
Style guide: utility.align
*/
.u-valign-top {
vertical-align: top !important; }
.u-valign-middle {
vertical-align: middle !important; }
.u-valign-bottom {
vertical-align: bottom !important; }
/*
Box Sizing
ボックスモデル調整のためのユーティリティ
Markup:
u-border-box-true - ボーダーボックス（`width`、`height` に `padding` を含む）
u-content-box-true - コンテントボックス（`width`、`height` に `padding` を含まない）
Style guide: utility.sizing
*/
.u-border-box-true {
box-sizing: border-box !important; }
.u-content-box-true {
box-sizing: content-box !important; }
/*
Hide (Responsive)
media queryを用いた非表示制御のユーティリティ
Markup:
u-hide-landscape-over - スマホ`横`サイズ` + 1px 以上`は非表示
u-hide-landscape-under - スマホ`横`サイズ`以下`は非表示
Style guide: utility.hide
*/
@media only screen and (min-width: 668px) {
.u-hide-landscape-over {
display: none !important; } }
@media only screen and (max-width: 667px) {
.u-hide-landscape-under {
display: none !important; } }
/*# sourceMappingURL=styles.css.map */
Google Mapを開く
