@charset "UTF-8";
/*!
* zeroichi_lp - common.css
*
*/
/*
reset
--------------------
*/
* {
box-sizing: border-box;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
th {
text-align: left;
}
b, th, dt, optgroup, strong {
font-weight: 700;
}
h1,
h2,
h3,
h4,
h5,
h6,
dt {
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-weight: 700;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
cursor: pointer;
}
/*
base
--------------------
*/
/* thanks: https://speakerdeck.com/tacamy/modanri-ben-yu-huontozhi-ding */
@font-face {
font-family: 'PGYuGothic';
font-weight: normal;
src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
}
@font-face {
font-family: 'PGYuGothic';
font-weight: bold;
src: local("YuGothic-Bold"), local("Yu Gothic");
}
html {
font-size: 1rem;
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-weight: 300;
}
body {
background-color: #fff;
color: #333;
line-height: 1.75;
}
/*
note: Underline of Link
wysiwyg(リッチテキスト)の適用範囲内のみ、リンクにcolorやtext-decorationを指定することは、適切ではありません。スタイルの優先度が、その装飾を必要としないモジュールよりも、高くなってしまうことを回避するためです。
It is not appropriate to specify color or text-decoration for the link only within the scope of wysiwyg (rich text). This is to avoid that the priority of the style will be higher than the module that does not require that decoration.
--------------------
*/
a {
color: #2283cc;
text-decoration: underline;
}
a:hover, a:focus {
color: #73b0e1;
text-decoration: none;
}
h1,
h2 {
margin: 2em 0 1em;
}
h3,
h4,
h5,
h6 {
margin: 2em 0 .5em;
}
pre,
code {
margin: 0;
}
p,
pre,
blockquote {
margin: 0 0 1em;
}
ul,
ol {
margin: 0 0 1em;
padding-left: 1.25em;
}
li {
margin: 0 0 .5em;
}
li > ul,
li > ol {
margin: .5em 0;
}
dl {
margin: 0 0 1em;
}
dt {
margin: 0 0 .5em;
}
dd {
margin: 0 0 1em 2em;
}
dd:last-child {
margin-bottom: 0;
}
img {
border: 0 none;
}
/*
note: Font Families in Form
日本では、フォームの入力フィールドにサンセリフフォントを指定する傾向があります。 これは、入力フォームに適用される標準フォントが、OSによって大きく異なるためです。
In Japan, there is a tendency to specify sans-serif fonts in the form input fields. This is because standard fonts applied to input fields vary greatly depending on the OS.
--------------------
*/
textarea,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"] {
font-size: 1em;
font-family: '-apple-system', 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
font-weight: 300;
}
input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"] {
line-height: 1;
}
textarea {
line-height: 1.5;
}
select {
font-family: '-apple-system', 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
font-weight: 300;
line-height: 1;
}
/*doc
---
title: l-document
name: document
category: layout-document
---
ドキュメント全体を包括する。
このテーマでは特にスタイルを定義していないが、ユーティリティクラスの重要度を上げるためのid="document"はこの包括ブロックに指定されている。
``` example
(all document)
```
*/
/*doc
---
title: l-document-inner
name: document-01-inner
category: layout-document
---
ユーティリティクラス .container-expand や、オフキャンバス等の画面全体に影響する演出の影響を受けないよう、幅を制限している。
.container-expand を使用する予定がない場合や、他のライブラリ等と干渉する場合は、この要素は削除してもかまわない。
``` example
```
*/
.l-document-inner {
overflow: hidden;
max-width: 100%;
}
/*doc
---
title: l-container
name: container
category: layout-container
---
デバイスに応じて適切に本文幅を調整するコンテナブロック。
/\_scss/\_config_advance.scss の「$container-max-widths」の定義を参照する。
``` example
```
*/
.l-container {
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
.l-container:before, .l-container:after {
content: "";
display: table;
}
.l-container:after {
clear: both;
}
@media (min-width: 768px) {
.l-container {
max-width: 700px;
}
}
@media (min-width: 1000px) {
.l-container {
max-width: 960px;
}
}
@media (min-width: 1280px) {
.l-container {
max-width: 1200px;
}
}
/*
.l-containerが二重になった場合の対策
*/
@media (min-width: 414px) {
.l-container .l-container {
padding-left: 0;
padding-right: 0;
}
}
/*doc
---
title: l-container-fluid
name: container-01-fluid
category: layout-container
parent: container
---
コンテナブロックの最大幅の制限を行わない。
``` example
```
*/
.l-container-fluid {
max-width: none;
}
/*doc
---
title: l-container-sm
name: container-02-sm
category: layout-container
parent: container
---
コンテナブロックの最大幅が通常よりも狭くなる。
/\_scss/\_config_advance.scss の「$container-max-widths-sm」の定義を参照する。
``` example
```
*/
@media (min-width: 768px) {
.l-container-sm {
max-width: 700px;
}
}
@media (min-width: 1000px) {
.l-container-sm {
max-width: 960px;
}
}
/*doc
---
title: l-container-full-md
name: container-03-full-md
category: layout-container
parent: container
---
(breakpoint)が md 以下のときにコンテナ余白を打ち消す。モバイル端末での幅100%表示等に使用する。
``` example
```
*/
@media (max-width: 999.9px) {
.l-container-full-md {
padding-left: 0;
padding-right: 0;
}
}
/*doc
---
title: l-f-row
name: f-01-row
category: layout-grid-flex
---
flexboxによるグリッドのグループを作成する。
余白・段組の仕様を変更したい場合は /\_scss/config\_advance.css の各変数を調整すること。
``` example
l-f-col-4-lg
l-f-col-4-lg
l-f-col-4-lg
```
*/
.l-f-row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
margin-left: -10px;
margin-right: -10px;
}
/*doc
---
title: l-f-row-(size)
name: f-01-row-01-size
category: layout-grid-flex
parent: f-01-row
---
flexboxによるグリッドで余白が異なるグループを作成する。
(size)は0, sm, md, lg に対応している。
``` example
l-f-row-0
l-f-row-0
l-f-row-0
l-f-row-sm
l-f-row-sm
l-f-row-sm
l-f-row-lg
l-f-row-lg
l-f-row-lg
```
*/
.l-f-row-0 {
margin-left: 0;
margin-right: 0;
}
.l-f-row-0 .l-f-col {
padding-left: 0;
padding-right: 0;
}
.l-f-row-sm {
margin-left: -5px;
margin-right: -5px;
}
.l-f-row-sm .l-f-col {
padding-left: 5px;
padding-right: 5px;
}
.l-f-row-lg {
margin-left: -20px;
margin-right: -20px;
}
.l-f-row-lg .l-f-col {
padding-left: 20px;
padding-right: 20px;
}
/*doc
---
title: l-f-col
name: f-02-col
category: layout-grid-flex
---
flexboxによるグリッドのセルを作成する。このクラス単独では余白のみ確保する。
*/
.l-f-col {
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
/*doc
---
title: l-f-col-(column)-(breakpoint)
name: f-02-col-01-column-breakpoint
category: layout-grid-flex
parent: f-02-col
---
flexboxによるグリッドのセルを、ウィンドウ幅が(breakpoint)よりも大きくなったときに、(column) / 12の幅で配置する。
(breakpoint)の指定がない場合は、常にその幅となる。
このテーマでは、(column)は3, 4, 6のみ、(breakpoint)はsm, md, lgのみ対応している。
``` example
l-f-col-3-sm
l-f-col-3-sm
l-f-col-3-sm
l-f-col-3-sm
l-f-col-3-md
l-f-col-3-md
l-f-col-3-md
l-f-col-3-md
l-f-col-4-lg
l-f-col-4-lg
l-f-col-4-lg
l-f-col-6-lg
l-f-col-6-lg
l-f-col-6-lg
l-f-col-6-lg
```
*/
@media (min-width: 414px) {
.l-f-col-3-sm {
width: 25%;
}
.l-f-col-4-sm {
width: 33.33333333%;
}
.l-f-col-6-sm {
width: 50%;
}
}
@media (min-width: 768px) {
.l-f-col-3-md {
width: 25%;
}
.l-f-col-4-md {
width: 33.33333333%;
}
.l-f-col-6-md {
width: 50%;
}
}
@media (min-width: 1000px) {
.l-f-col-3-lg {
width: 25%;
}
.l-f-col-4-lg {
width: 33.33333333%;
}
.l-f-col-6-lg {
width: 50%;
}
}
/*doc
---
title: l-row
name: 01-row
category: layout-grid-float
---
floatによるグリッドのグループを作成する。余白・段組の仕様を変更したい場合は /\_scss/config\_advance.css の各変数を調整すること。
命名規則を他のCSSフレームワークと同様にしたい場合は以下を調整すること。
- /\_scss/lauout/\_grid\_float.css
- /\_scss/mixin/mixin.css の make-row(), make-grid-columns()
``` example
l-col-4-lg
l-col-4-lg
l-col-4-lg
```
*/
.l-col {
position: relative;
min-height: 1px;
}
.l-col-1, .l-col-2, .l-col-3, .l-col-4, .l-col-5, .l-col-6, .l-col-7, .l-col-8, .l-col-9, .l-col-10, .l-col-11, .l-col-12 {
float: left;
}
.l-col-1 {
width: 8.33333%;
}
.l-col-2 {
width: 16.66667%;
}
.l-col-3 {
width: 25%;
}
.l-col-4 {
width: 33.33333%;
}
.l-col-5 {
width: 41.66667%;
}
.l-col-6 {
width: 50%;
}
.l-col-7 {
width: 58.33333%;
}
.l-col-8 {
width: 66.66667%;
}
.l-col-9 {
width: 75%;
}
.l-col-10 {
width: 83.33333%;
}
.l-col-11 {
width: 91.66667%;
}
.l-col-12 {
width: 100%;
}
.l-col-0-pull {
right: auto;
}
.l-col-1-pull {
right: 8.33333%;
}
.l-col-2-pull {
right: 16.66667%;
}
.l-col-3-pull {
right: 25%;
}
.l-col-4-pull {
right: 33.33333%;
}
.l-col-5-pull {
right: 41.66667%;
}
.l-col-6-pull {
right: 50%;
}
.l-col-7-pull {
right: 58.33333%;
}
.l-col-8-pull {
right: 66.66667%;
}
.l-col-9-pull {
right: 75%;
}
.l-col-10-pull {
right: 83.33333%;
}
.l-col-11-pull {
right: 91.66667%;
}
.l-col-12-pull {
right: 100%;
}
.l-col-0-push {
left: auto;
}
.l-col-1-push {
left: 8.33333%;
}
.l-col-2-push {
left: 16.66667%;
}
.l-col-3-push {
left: 25%;
}
.l-col-4-push {
left: 33.33333%;
}
.l-col-5-push {
left: 41.66667%;
}
.l-col-6-push {
left: 50%;
}
.l-col-7-push {
left: 58.33333%;
}
.l-col-8-push {
left: 66.66667%;
}
.l-col-9-push {
left: 75%;
}
.l-col-10-push {
left: 83.33333%;
}
.l-col-11-push {
left: 91.66667%;
}
.l-col-12-push {
left: 100%;
}
.l-col-0-offset {
margin-left: 0%;
}
.l-col-1-offset {
margin-left: 8.33333%;
}
.l-col-2-offset {
margin-left: 16.66667%;
}
.l-col-3-offset {
margin-left: 25%;
}
.l-col-4-offset {
margin-left: 33.33333%;
}
.l-col-5-offset {
margin-left: 41.66667%;
}
.l-col-6-offset {
margin-left: 50%;
}
.l-col-7-offset {
margin-left: 58.33333%;
}
.l-col-8-offset {
margin-left: 66.66667%;
}
.l-col-9-offset {
margin-left: 75%;
}
.l-col-10-offset {
margin-left: 83.33333%;
}
.l-col-11-offset {
margin-left: 91.66667%;
}
.l-col-12-offset {
margin-left: 100%;
}
@media (min-width: 375px) {
.l-col-1-xs, .l-col-2-xs, .l-col-3-xs, .l-col-4-xs, .l-col-5-xs, .l-col-6-xs, .l-col-7-xs, .l-col-8-xs, .l-col-9-xs, .l-col-10-xs, .l-col-11-xs, .l-col-12-xs {
float: left;
}
.l-col-1-xs {
width: 8.33333%;
}
.l-col-2-xs {
width: 16.66667%;
}
.l-col-3-xs {
width: 25%;
}
.l-col-4-xs {
width: 33.33333%;
}
.l-col-5-xs {
width: 41.66667%;
}
.l-col-6-xs {
width: 50%;
}
.l-col-7-xs {
width: 58.33333%;
}
.l-col-8-xs {
width: 66.66667%;
}
.l-col-9-xs {
width: 75%;
}
.l-col-10-xs {
width: 83.33333%;
}
.l-col-11-xs {
width: 91.66667%;
}
.l-col-12-xs {
width: 100%;
}
.l-col-0-xs-pull {
right: auto;
}
.l-col-1-xs-pull {
right: 8.33333%;
}
.l-col-2-xs-pull {
right: 16.66667%;
}
.l-col-3-xs-pull {
right: 25%;
}
.l-col-4-xs-pull {
right: 33.33333%;
}
.l-col-5-xs-pull {
right: 41.66667%;
}
.l-col-6-xs-pull {
right: 50%;
}
.l-col-7-xs-pull {
right: 58.33333%;
}
.l-col-8-xs-pull {
right: 66.66667%;
}
.l-col-9-xs-pull {
right: 75%;
}
.l-col-10-xs-pull {
right: 83.33333%;
}
.l-col-11-xs-pull {
right: 91.66667%;
}
.l-col-12-xs-pull {
right: 100%;
}
.l-col-0-xs-push {
left: auto;
}
.l-col-1-xs-push {
left: 8.33333%;
}
.l-col-2-xs-push {
left: 16.66667%;
}
.l-col-3-xs-push {
left: 25%;
}
.l-col-4-xs-push {
left: 33.33333%;
}
.l-col-5-xs-push {
left: 41.66667%;
}
.l-col-6-xs-push {
left: 50%;
}
.l-col-7-xs-push {
left: 58.33333%;
}
.l-col-8-xs-push {
left: 66.66667%;
}
.l-col-9-xs-push {
left: 75%;
}
.l-col-10-xs-push {
left: 83.33333%;
}
.l-col-11-xs-push {
left: 91.66667%;
}
.l-col-12-xs-push {
left: 100%;
}
.l-col-0-xs-offset {
margin-left: 0%;
}
.l-col-1-xs-offset {
margin-left: 8.33333%;
}
.l-col-2-xs-offset {
margin-left: 16.66667%;
}
.l-col-3-xs-offset {
margin-left: 25%;
}
.l-col-4-xs-offset {
margin-left: 33.33333%;
}
.l-col-5-xs-offset {
margin-left: 41.66667%;
}
.l-col-6-xs-offset {
margin-left: 50%;
}
.l-col-7-xs-offset {
margin-left: 58.33333%;
}
.l-col-8-xs-offset {
margin-left: 66.66667%;
}
.l-col-9-xs-offset {
margin-left: 75%;
}
.l-col-10-xs-offset {
margin-left: 83.33333%;
}
.l-col-11-xs-offset {
margin-left: 91.66667%;
}
.l-col-12-xs-offset {
margin-left: 100%;
}
}
@media (min-width: 414px) {
.l-col-1-sm, .l-col-2-sm, .l-col-3-sm, .l-col-4-sm, .l-col-5-sm, .l-col-6-sm, .l-col-7-sm, .l-col-8-sm, .l-col-9-sm, .l-col-10-sm, .l-col-11-sm, .l-col-12-sm {
float: left;
}
.l-col-1-sm {
width: 8.33333%;
}
.l-col-2-sm {
width: 16.66667%;
}
.l-col-3-sm {
width: 25%;
}
.l-col-4-sm {
width: 33.33333%;
}
.l-col-5-sm {
width: 41.66667%;
}
.l-col-6-sm {
width: 50%;
}
.l-col-7-sm {
width: 58.33333%;
}
.l-col-8-sm {
width: 66.66667%;
}
.l-col-9-sm {
width: 75%;
}
.l-col-10-sm {
width: 83.33333%;
}
.l-col-11-sm {
width: 91.66667%;
}
.l-col-12-sm {
width: 100%;
}
.l-col-0-sm-pull {
right: auto;
}
.l-col-1-sm-pull {
right: 8.33333%;
}
.l-col-2-sm-pull {
right: 16.66667%;
}
.l-col-3-sm-pull {
right: 25%;
}
.l-col-4-sm-pull {
right: 33.33333%;
}
.l-col-5-sm-pull {
right: 41.66667%;
}
.l-col-6-sm-pull {
right: 50%;
}
.l-col-7-sm-pull {
right: 58.33333%;
}
.l-col-8-sm-pull {
right: 66.66667%;
}
.l-col-9-sm-pull {
right: 75%;
}
.l-col-10-sm-pull {
right: 83.33333%;
}
.l-col-11-sm-pull {
right: 91.66667%;
}
.l-col-12-sm-pull {
right: 100%;
}
.l-col-0-sm-push {
left: auto;
}
.l-col-1-sm-push {
left: 8.33333%;
}
.l-col-2-sm-push {
left: 16.66667%;
}
.l-col-3-sm-push {
left: 25%;
}
.l-col-4-sm-push {
left: 33.33333%;
}
.l-col-5-sm-push {
left: 41.66667%;
}
.l-col-6-sm-push {
left: 50%;
}
.l-col-7-sm-push {
left: 58.33333%;
}
.l-col-8-sm-push {
left: 66.66667%;
}
.l-col-9-sm-push {
left: 75%;
}
.l-col-10-sm-push {
left: 83.33333%;
}
.l-col-11-sm-push {
left: 91.66667%;
}
.l-col-12-sm-push {
left: 100%;
}
.l-col-0-sm-offset {
margin-left: 0%;
}
.l-col-1-sm-offset {
margin-left: 8.33333%;
}
.l-col-2-sm-offset {
margin-left: 16.66667%;
}
.l-col-3-sm-offset {
margin-left: 25%;
}
.l-col-4-sm-offset {
margin-left: 33.33333%;
}
.l-col-5-sm-offset {
margin-left: 41.66667%;
}
.l-col-6-sm-offset {
margin-left: 50%;
}
.l-col-7-sm-offset {
margin-left: 58.33333%;
}
.l-col-8-sm-offset {
margin-left: 66.66667%;
}
.l-col-9-sm-offset {
margin-left: 75%;
}
.l-col-10-sm-offset {
margin-left: 83.33333%;
}
.l-col-11-sm-offset {
margin-left: 91.66667%;
}
.l-col-12-sm-offset {
margin-left: 100%;
}
}
@media (min-width: 768px) {
.l-col-1-md, .l-col-2-md, .l-col-3-md, .l-col-4-md, .l-col-5-md, .l-col-6-md, .l-col-7-md, .l-col-8-md, .l-col-9-md, .l-col-10-md, .l-col-11-md, .l-col-12-md {
float: left;
}
.l-col-1-md {
width: 8.33333%;
}
.l-col-2-md {
width: 16.66667%;
}
.l-col-3-md {
width: 25%;
}
.l-col-4-md {
width: 33.33333%;
}
.l-col-5-md {
width: 41.66667%;
}
.l-col-6-md {
width: 50%;
}
.l-col-7-md {
width: 58.33333%;
}
.l-col-8-md {
width: 66.66667%;
}
.l-col-9-md {
width: 75%;
}
.l-col-10-md {
width: 83.33333%;
}
.l-col-11-md {
width: 91.66667%;
}
.l-col-12-md {
width: 100%;
}
.l-col-0-md-pull {
right: auto;
}
.l-col-1-md-pull {
right: 8.33333%;
}
.l-col-2-md-pull {
right: 16.66667%;
}
.l-col-3-md-pull {
right: 25%;
}
.l-col-4-md-pull {
right: 33.33333%;
}
.l-col-5-md-pull {
right: 41.66667%;
}
.l-col-6-md-pull {
right: 50%;
}
.l-col-7-md-pull {
right: 58.33333%;
}
.l-col-8-md-pull {
right: 66.66667%;
}
.l-col-9-md-pull {
right: 75%;
}
.l-col-10-md-pull {
right: 83.33333%;
}
.l-col-11-md-pull {
right: 91.66667%;
}
.l-col-12-md-pull {
right: 100%;
}
.l-col-0-md-push {
left: auto;
}
.l-col-1-md-push {
left: 8.33333%;
}
.l-col-2-md-push {
left: 16.66667%;
}
.l-col-3-md-push {
left: 25%;
}
.l-col-4-md-push {
left: 33.33333%;
}
.l-col-5-md-push {
left: 41.66667%;
}
.l-col-6-md-push {
left: 50%;
}
.l-col-7-md-push {
left: 58.33333%;
}
.l-col-8-md-push {
left: 66.66667%;
}
.l-col-9-md-push {
left: 75%;
}
.l-col-10-md-push {
left: 83.33333%;
}
.l-col-11-md-push {
left: 91.66667%;
}
.l-col-12-md-push {
left: 100%;
}
.l-col-0-md-offset {
margin-left: 0%;
}
.l-col-1-md-offset {
margin-left: 8.33333%;
}
.l-col-2-md-offset {
margin-left: 16.66667%;
}
.l-col-3-md-offset {
margin-left: 25%;
}
.l-col-4-md-offset {
margin-left: 33.33333%;
}
.l-col-5-md-offset {
margin-left: 41.66667%;
}
.l-col-6-md-offset {
margin-left: 50%;
}
.l-col-7-md-offset {
margin-left: 58.33333%;
}
.l-col-8-md-offset {
margin-left: 66.66667%;
}
.l-col-9-md-offset {
margin-left: 75%;
}
.l-col-10-md-offset {
margin-left: 83.33333%;
}
.l-col-11-md-offset {
margin-left: 91.66667%;
}
.l-col-12-md-offset {
margin-left: 100%;
}
}
@media (min-width: 1000px) {
.l-col-1-lg, .l-col-2-lg, .l-col-3-lg, .l-col-4-lg, .l-col-5-lg, .l-col-6-lg, .l-col-7-lg, .l-col-8-lg, .l-col-9-lg, .l-col-10-lg, .l-col-11-lg, .l-col-12-lg {
float: left;
}
.l-col-1-lg {
width: 8.33333%;
}
.l-col-2-lg {
width: 16.66667%;
}
.l-col-3-lg {
width: 25%;
}
.l-col-4-lg {
width: 33.33333%;
}
.l-col-5-lg {
width: 41.66667%;
}
.l-col-6-lg {
width: 50%;
}
.l-col-7-lg {
width: 58.33333%;
}
.l-col-8-lg {
width: 66.66667%;
}
.l-col-9-lg {
width: 75%;
}
.l-col-10-lg {
width: 83.33333%;
}
.l-col-11-lg {
width: 91.66667%;
}
.l-col-12-lg {
width: 100%;
}
.l-col-0-lg-pull {
right: auto;
}
.l-col-1-lg-pull {
right: 8.33333%;
}
.l-col-2-lg-pull {
right: 16.66667%;
}
.l-col-3-lg-pull {
right: 25%;
}
.l-col-4-lg-pull {
right: 33.33333%;
}
.l-col-5-lg-pull {
right: 41.66667%;
}
.l-col-6-lg-pull {
right: 50%;
}
.l-col-7-lg-pull {
right: 58.33333%;
}
.l-col-8-lg-pull {
right: 66.66667%;
}
.l-col-9-lg-pull {
right: 75%;
}
.l-col-10-lg-pull {
right: 83.33333%;
}
.l-col-11-lg-pull {
right: 91.66667%;
}
.l-col-12-lg-pull {
right: 100%;
}
.l-col-0-lg-push {
left: auto;
}
.l-col-1-lg-push {
left: 8.33333%;
}
.l-col-2-lg-push {
left: 16.66667%;
}
.l-col-3-lg-push {
left: 25%;
}
.l-col-4-lg-push {
left: 33.33333%;
}
.l-col-5-lg-push {
left: 41.66667%;
}
.l-col-6-lg-push {
left: 50%;
}
.l-col-7-lg-push {
left: 58.33333%;
}
.l-col-8-lg-push {
left: 66.66667%;
}
.l-col-9-lg-push {
left: 75%;
}
.l-col-10-lg-push {
left: 83.33333%;
}
.l-col-11-lg-push {
left: 91.66667%;
}
.l-col-12-lg-push {
left: 100%;
}
.l-col-0-lg-offset {
margin-left: 0%;
}
.l-col-1-lg-offset {
margin-left: 8.33333%;
}
.l-col-2-lg-offset {
margin-left: 16.66667%;
}
.l-col-3-lg-offset {
margin-left: 25%;
}
.l-col-4-lg-offset {
margin-left: 33.33333%;
}
.l-col-5-lg-offset {
margin-left: 41.66667%;
}
.l-col-6-lg-offset {
margin-left: 50%;
}
.l-col-7-lg-offset {
margin-left: 58.33333%;
}
.l-col-8-lg-offset {
margin-left: 66.66667%;
}
.l-col-9-lg-offset {
margin-left: 75%;
}
.l-col-10-lg-offset {
margin-left: 83.33333%;
}
.l-col-11-lg-offset {
margin-left: 91.66667%;
}
.l-col-12-lg-offset {
margin-left: 100%;
}
}
@media (min-width: 1280px) {
.l-col-1-xl, .l-col-2-xl, .l-col-3-xl, .l-col-4-xl, .l-col-5-xl, .l-col-6-xl, .l-col-7-xl, .l-col-8-xl, .l-col-9-xl, .l-col-10-xl, .l-col-11-xl, .l-col-12-xl {
float: left;
}
.l-col-1-xl {
width: 8.33333%;
}
.l-col-2-xl {
width: 16.66667%;
}
.l-col-3-xl {
width: 25%;
}
.l-col-4-xl {
width: 33.33333%;
}
.l-col-5-xl {
width: 41.66667%;
}
.l-col-6-xl {
width: 50%;
}
.l-col-7-xl {
width: 58.33333%;
}
.l-col-8-xl {
width: 66.66667%;
}
.l-col-9-xl {
width: 75%;
}
.l-col-10-xl {
width: 83.33333%;
}
.l-col-11-xl {
width: 91.66667%;
}
.l-col-12-xl {
width: 100%;
}
.l-col-0-xl-pull {
right: auto;
}
.l-col-1-xl-pull {
right: 8.33333%;
}
.l-col-2-xl-pull {
right: 16.66667%;
}
.l-col-3-xl-pull {
right: 25%;
}
.l-col-4-xl-pull {
right: 33.33333%;
}
.l-col-5-xl-pull {
right: 41.66667%;
}
.l-col-6-xl-pull {
right: 50%;
}
.l-col-7-xl-pull {
right: 58.33333%;
}
.l-col-8-xl-pull {
right: 66.66667%;
}
.l-col-9-xl-pull {
right: 75%;
}
.l-col-10-xl-pull {
right: 83.33333%;
}
.l-col-11-xl-pull {
right: 91.66667%;
}
.l-col-12-xl-pull {
right: 100%;
}
.l-col-0-xl-push {
left: auto;
}
.l-col-1-xl-push {
left: 8.33333%;
}
.l-col-2-xl-push {
left: 16.66667%;
}
.l-col-3-xl-push {
left: 25%;
}
.l-col-4-xl-push {
left: 33.33333%;
}
.l-col-5-xl-push {
left: 41.66667%;
}
.l-col-6-xl-push {
left: 50%;
}
.l-col-7-xl-push {
left: 58.33333%;
}
.l-col-8-xl-push {
left: 66.66667%;
}
.l-col-9-xl-push {
left: 75%;
}
.l-col-10-xl-push {
left: 83.33333%;
}
.l-col-11-xl-push {
left: 91.66667%;
}
.l-col-12-xl-push {
left: 100%;
}
.l-col-0-xl-offset {
margin-left: 0%;
}
.l-col-1-xl-offset {
margin-left: 8.33333%;
}
.l-col-2-xl-offset {
margin-left: 16.66667%;
}
.l-col-3-xl-offset {
margin-left: 25%;
}
.l-col-4-xl-offset {
margin-left: 33.33333%;
}
.l-col-5-xl-offset {
margin-left: 41.66667%;
}
.l-col-6-xl-offset {
margin-left: 50%;
}
.l-col-7-xl-offset {
margin-left: 58.33333%;
}
.l-col-8-xl-offset {
margin-left: 66.66667%;
}
.l-col-9-xl-offset {
margin-left: 75%;
}
.l-col-10-xl-offset {
margin-left: 83.33333%;
}
.l-col-11-xl-offset {
margin-left: 91.66667%;
}
.l-col-12-xl-offset {
margin-left: 100%;
}
}
@media (min-width: 1600px) {
.l-col-1-xxl, .l-col-2-xxl, .l-col-3-xxl, .l-col-4-xxl, .l-col-5-xxl, .l-col-6-xxl, .l-col-7-xxl, .l-col-8-xxl, .l-col-9-xxl, .l-col-10-xxl, .l-col-11-xxl, .l-col-12-xxl {
float: left;
}
.l-col-1-xxl {
width: 8.33333%;
}
.l-col-2-xxl {
width: 16.66667%;
}
.l-col-3-xxl {
width: 25%;
}
.l-col-4-xxl {
width: 33.33333%;
}
.l-col-5-xxl {
width: 41.66667%;
}
.l-col-6-xxl {
width: 50%;
}
.l-col-7-xxl {
width: 58.33333%;
}
.l-col-8-xxl {
width: 66.66667%;
}
.l-col-9-xxl {
width: 75%;
}
.l-col-10-xxl {
width: 83.33333%;
}
.l-col-11-xxl {
width: 91.66667%;
}
.l-col-12-xxl {
width: 100%;
}
.l-col-0-xxl-pull {
right: auto;
}
.l-col-1-xxl-pull {
right: 8.33333%;
}
.l-col-2-xxl-pull {
right: 16.66667%;
}
.l-col-3-xxl-pull {
right: 25%;
}
.l-col-4-xxl-pull {
right: 33.33333%;
}
.l-col-5-xxl-pull {
right: 41.66667%;
}
.l-col-6-xxl-pull {
right: 50%;
}
.l-col-7-xxl-pull {
right: 58.33333%;
}
.l-col-8-xxl-pull {
right: 66.66667%;
}
.l-col-9-xxl-pull {
right: 75%;
}
.l-col-10-xxl-pull {
right: 83.33333%;
}
.l-col-11-xxl-pull {
right: 91.66667%;
}
.l-col-12-xxl-pull {
right: 100%;
}
.l-col-0-xxl-push {
left: auto;
}
.l-col-1-xxl-push {
left: 8.33333%;
}
.l-col-2-xxl-push {
left: 16.66667%;
}
.l-col-3-xxl-push {
left: 25%;
}
.l-col-4-xxl-push {
left: 33.33333%;
}
.l-col-5-xxl-push {
left: 41.66667%;
}
.l-col-6-xxl-push {
left: 50%;
}
.l-col-7-xxl-push {
left: 58.33333%;
}
.l-col-8-xxl-push {
left: 66.66667%;
}
.l-col-9-xxl-push {
left: 75%;
}
.l-col-10-xxl-push {
left: 83.33333%;
}
.l-col-11-xxl-push {
left: 91.66667%;
}
.l-col-12-xxl-push {
left: 100%;
}
.l-col-0-xxl-offset {
margin-left: 0%;
}
.l-col-1-xxl-offset {
margin-left: 8.33333%;
}
.l-col-2-xxl-offset {
margin-left: 16.66667%;
}
.l-col-3-xxl-offset {
margin-left: 25%;
}
.l-col-4-xxl-offset {
margin-left: 33.33333%;
}
.l-col-5-xxl-offset {
margin-left: 41.66667%;
}
.l-col-6-xxl-offset {
margin-left: 50%;
}
.l-col-7-xxl-offset {
margin-left: 58.33333%;
}
.l-col-8-xxl-offset {
margin-left: 66.66667%;
}
.l-col-9-xxl-offset {
margin-left: 75%;
}
.l-col-10-xxl-offset {
margin-left: 83.33333%;
}
.l-col-11-xxl-offset {
margin-left: 91.66667%;
}
.l-col-12-xxl-offset {
margin-left: 100%;
}
}
.l-row {
margin-left: -10px;
margin-right: -10px;
}
.l-row:before, .l-row:after {
content: "";
display: table;
}
.l-row:after {
clear: both;
}
.l-row .l-col {
padding-left: 10px;
padding-right: 10px;
}
/*doc
---
title: l-row-(size)
name: 01-row-01-size
category: layout-grid-float
parent: 01-row
---
floatによるグリッドで余白が異なるグループを作成する。
(size)は0, sm, md, lg に対応している。
``` example
l-row-0
l-row-0
l-row-0
l-row-sm
l-row-sm
l-row-sm
l-row-lg
l-row-lg
l-row-lg
```
*/
.l-row-0 {
margin-left: 0;
margin-right: 0;
}
.l-row-0:before, .l-row-0:after {
content: "";
display: table;
}
.l-row-0:after {
clear: both;
}
.l-row-0 .l-col {
padding-left: 0;
padding-right: 0;
}
.l-row-sm {
margin-left: -5px;
margin-right: -5px;
}
.l-row-sm:before, .l-row-sm:after {
content: "";
display: table;
}
.l-row-sm:after {
clear: both;
}
.l-row-sm .l-col {
padding-left: 5px;
padding-right: 5px;
}
.l-row-lg {
margin-left: -20px;
margin-right: -20px;
}
.l-row-lg:before, .l-row-lg:after {
content: "";
display: table;
}
.l-row-lg:after {
clear: both;
}
.l-row-lg .l-col {
padding-left: 20px;
padding-right: 20px;
}
/*doc
---
title: l-col
name: 02-col
category: layout-grid-float
---
floatによるグリッドのセルを作成する。このクラス単独では余白のみ確保する。
*/
/*doc
---
title: l-col-(column)-(breakpoint)
name: 02-col-01-column-breakpoint
category: layout-grid-float
parent: 02-col
---
floatによるグリッドのセルを、ウィンドウ幅が(breakpoint)よりも大きくなったときに、(column) / 12の幅で配置する。
(breakpoint)の指定がない場合は、常にその幅となる。
このテーマでは、(column)は1 - 12、(breakpoint)は標準のブレークポイント を参照。
### スマートフォン(default)、低解像度タブレットまたはスマートフォン横回転(sm)、XGA以上(lg)でレイアウトを変更する代表的な例
``` example
l-col-12
l-col-12
l-col-12
```
### iPhone SEまたは拡大UI(default)、iPhone 8(xs)、iPhone 8 Plus(sm)間でレイアウトを変更する例
``` example
l-col-12
l-col-12
l-col-12
```
*/
/*doc
---
title: l-col-(column)-(breakpoint)-(push or pull)
name: 02-col-02-column-breakpoint-push
category: layout-grid-float
parent: 02-col
---
グリッドのセルの開始位置をずらす。pushは右、pullは左にずれる。
組み合わせるとfloatのグリッドでもセルの左右入れ替えができる。
このテーマでは、(column)は1 - 12、(breakpoint)はxs, sm, md, lg, xl, xxlに対応している。
``` example
l-col-6-lg
l-col-4-lg
l-col-8-lg
```
*/
/*doc
---
title: badge
name: badge
category: module-badge
---
新着アイコンなどに使用する、バッジを表示する。英数字のみが入ることが前提となっている。
``` example
Badge
```
*/
.badge {
overflow: hidden;
display: inline-block;
padding: 1em .5em .25em;
border-radius: 0 0 0.25rem 0.25rem;
background: #fff;
color: #333;
border: 1px solid #bbb;
font-size: .8em;
font-family: "Helvetica", "Roboto", "-apple-system", "Open Sans", "Arial", sans-serif;
font-weight: 300;
letter-spacing: .1em;
text-align: center;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
/*doc
---
title: badge-(color)
name: badge-01-color
category: module-badge
parent: badge
---
バッジの色を変更する。(color)はカラーの設定 を参照。
``` example
First
Second
Third
Info
Important
```
*/
.badge-first {
color: #fff;
border-color: #49d;
background-color: #49d;
}
.badge-second {
color: #fff;
border-color: #444;
background-color: #444;
}
.badge-third {
color: #fff;
border-color: #49B070;
background-color: #49B070;
}
.badge-info {
color: #fff;
border-color: #49B070;
background-color: #49B070;
}
.badge-important {
color: #fff;
border-color: #e33050;
background-color: #e33050;
}
/*doc
---
title: box
name: box
category: module-box
---
ブロック要素を網掛けで囲んで、箱状に強調する。
``` example
box_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
```
*/
.box {
position: relative;
margin-bottom: 20px;
padding: 20px;
border: 2px solid transparent;
background-color: #eaeaea;
border-radius: 0.25rem;
}
.box:before, .box:after {
content: "";
display: table;
}
.box:after {
clear: both;
}
@media (min-width: 768px) {
.box {
padding: 30px;
}
}
@media (min-width: 1280px) {
.box {
margin-bottom: 30px;
}
}
.box p:last-child,
.box ul:last-child,
.box ol:last-child,
.box dl:last-child {
margin-bottom: 0;
}
/*doc
---
title: box-(color)
name: box-01-color
category: module-box
parent: box
---
箱の色を変更する。(color)はカラーの設定 を参照。
``` example
box-first_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-second_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-third_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-info_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-important_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
```
*/
.box-first {
background-color: #d5ecfa;
}
.box-second {
background-color: #eaeaea;
}
.box-third {
background-color: #d5f0e1;
}
.box-info {
background-color: #d5f0e1;
}
.box-important {
background-color: #ffe9ee;
}
/*doc
---
title: box-outline
name: box-02-outline
category: module-box
parent: box
---
箱を網掛けではなく、罫線にする。同時に(color)を指定すると罫線の色が変わる。
``` example
box-outline_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-first_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-second_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-third_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-info_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
box-important_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この書生というのは時々我々を捕えて煮て食うという話である。
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
```
*/
.box-outline {
background-color: #fff;
border-color: #bbb;
}
.box-outline.box-first {
border-color: #73b0e1;
}
.box-outline.box-second {
border-color: #777;
}
.box-outline.box-third {
border-color: #70bc8d;
}
.box-outline.box-info {
border-color: #70bc8d;
}
.box-outline.box-important {
border-color: #e75f77;
}
/*doc
---
title: btn
name: btn
category: module-btn
---
リンク、インライン要素、フォームのボタン要素をボタン状に表示する。
.disabled または disabled="disabled"が付与されていると、反応しない見た目となる（クリックはできるので注意）。
``` example
btn
btn
btn
btn
btn
btn
```
*/
.btn {
position: relative;
display: inline-block;
color: #333;
font-size: 1rem;
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-weight: 300;
background-color: #fff;
border: 1px solid transparent;
padding: 0.375em 1em;
text-align: center;
line-height: 1.25;
border-radius: 0.25rem;
vertical-align: middle;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
transition: .3s all;
margin-left: 10px;
margin-right: 10px;
}
a.btn {
text-decoration: none;
}
a.btn:hover, a.btn:focus {
text-decoration: none;
}
.btn:hover, .btn.hover, .btn:focus, .btn.focus, .btn:active, .btn.active {
color: #333;
background-color: #eaeaea;
text-decoration: none;
}
.btn.disabled, .btn:disabled, fieldset[disabled] .btn {
cursor: default;
opacity: .65;
}
.btn.disabled:hover, .btn.disabled.hover, .btn.disabled:focus, .btn.disabled.focus, .btn.disabled:active, .btn.disabled.active, .btn:disabled:hover, .btn:disabled.hover, .btn:disabled:focus, .btn:disabled.focus, .btn:disabled:active, .btn:disabled.active, fieldset[disabled] .btn:hover, fieldset[disabled] .btn.hover, fieldset[disabled] .btn:focus, fieldset[disabled] .btn.focus, fieldset[disabled] .btn:active, fieldset[disabled] .btn.active {
background-color: transparent;
}
a:hover .btn, a:focus .btn, a:active .btn {
color: #333;
background-color: #eaeaea;
text-decoration: none;
}
.btn img {
width: auto;
height: 1.25em;
vertical-align: middle;
}
.btn .fa {
vertical-align: middle;
}
.btn .fa:before {
font-size: 1.25em;
}
a.btn.disaabled,
fieldset[disabled] a.btn {
pointer-events: none;
}
/*doc
---
title: btn-(color)
name: btn-01-color
category: module-btn
parent: btn
---
ボタンの色を変更する。(color)はカラーの設定 を参照。
``` example
btn-first
btn-first
btn-second
btn-second
btn-third
btn-third
btn-info
btn-info
btn-important
btn-important
```
*/
.btn-first {
color: #fff;
background-color: #49d;
border-color: transparent;
}
.btn-first:hover, .btn-first:focus, .btn-first:active, .btn-first.active {
color: #fff;
background-color: #2283cc;
border-color: transparent;
}
.btn-first.disabled, .btn-first:disabled, fieldset[disabled] .btn-first {
opacity: .8;
}
.btn-first.disabled:hover, .btn-first.disabled.hover, .btn-first.disabled:focus, .btn-first.disabled.focus, .btn-first:disabled:hover, .btn-first:disabled.hover, .btn-first:disabled:focus, .btn-first:disabled.focus, fieldset[disabled] .btn-first:hover, fieldset[disabled] .btn-first.hover, fieldset[disabled] .btn-first:focus, fieldset[disabled] .btn-first.focus {
color: #fff;
background-color: #49d;
border-color: transparent;
}
a:hover .btn-first, a:focus .btn-first, a:active .btn-first {
color: #fff;
background-color: #2283cc;
border-color: transparent;
}
.btn-second {
color: #fff;
background-color: #444;
border-color: transparent;
}
.btn-second:hover, .btn-second:focus, .btn-second:active, .btn-second.active {
color: #fff;
background-color: #000;
border-color: transparent;
}
.btn-second.disabled, .btn-second:disabled, fieldset[disabled] .btn-second {
opacity: .8;
}
.btn-second.disabled:hover, .btn-second.disabled.hover, .btn-second.disabled:focus, .btn-second.disabled.focus, .btn-second:disabled:hover, .btn-second:disabled.hover, .btn-second:disabled:focus, .btn-second:disabled.focus, fieldset[disabled] .btn-second:hover, fieldset[disabled] .btn-second.hover, fieldset[disabled] .btn-second:focus, fieldset[disabled] .btn-second.focus {
color: #fff;
background-color: #444;
border-color: transparent;
}
a:hover .btn-second, a:focus .btn-second, a:active .btn-second {
color: #fff;
background-color: #000;
border-color: transparent;
}
.btn-third {
color: #fff;
background-color: #49B070;
border-color: transparent;
}
.btn-third:hover, .btn-third:focus, .btn-third:active, .btn-third.active {
color: #fff;
background-color: #229644;
border-color: transparent;
}
.btn-third.disabled, .btn-third:disabled, fieldset[disabled] .btn-third {
opacity: .8;
}
.btn-third.disabled:hover, .btn-third.disabled.hover, .btn-third.disabled:focus, .btn-third.disabled.focus, .btn-third:disabled:hover, .btn-third:disabled.hover, .btn-third:disabled:focus, .btn-third:disabled.focus, fieldset[disabled] .btn-third:hover, fieldset[disabled] .btn-third.hover, fieldset[disabled] .btn-third:focus, fieldset[disabled] .btn-third.focus {
color: #fff;
background-color: #49B070;
border-color: transparent;
}
a:hover .btn-third, a:focus .btn-third, a:active .btn-third {
color: #fff;
background-color: #229644;
border-color: transparent;
}
.btn-info {
color: #fff;
background-color: #49B070;
border-color: transparent;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
color: #fff;
background-color: #229644;
border-color: transparent;
}
.btn-info.disabled, .btn-info:disabled, fieldset[disabled] .btn-info {
opacity: .8;
}
.btn-info.disabled:hover, .btn-info.disabled.hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info:disabled:hover, .btn-info:disabled.hover, .btn-info:disabled:focus, .btn-info:disabled.focus, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info.hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus {
color: #fff;
background-color: #49B070;
border-color: transparent;
}
a:hover .btn-info, a:focus .btn-info, a:active .btn-info {
color: #fff;
background-color: #229644;
border-color: transparent;
}
.btn-important {
color: #fff;
background-color: #e33050;
border-color: transparent;
}
.btn-important:hover, .btn-important:focus, .btn-important:active, .btn-important.active {
color: #fff;
background-color: #d70022;
border-color: transparent;
}
.btn-important.disabled, .btn-important:disabled, fieldset[disabled] .btn-important {
opacity: .8;
}
.btn-important.disabled:hover, .btn-important.disabled.hover, .btn-important.disabled:focus, .btn-important.disabled.focus, .btn-important:disabled:hover, .btn-important:disabled.hover, .btn-important:disabled:focus, .btn-important:disabled.focus, fieldset[disabled] .btn-important:hover, fieldset[disabled] .btn-important.hover, fieldset[disabled] .btn-important:focus, fieldset[disabled] .btn-important.focus {
color: #fff;
background-color: #e33050;
border-color: transparent;
}
a:hover .btn-important, a:focus .btn-important, a:active .btn-important {
color: #fff;
background-color: #d70022;
border-color: transparent;
}
.btn-twitter {
color: #fff;
background-color: #1da1f2;
border-color: transparent;
}
.btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active {
color: #fff;
background-color: #1da1f2;
border-color: transparent;
}
.btn-twitter.disabled, .btn-twitter:disabled, fieldset[disabled] .btn-twitter {
opacity: .8;
}
.btn-twitter.disabled:hover, .btn-twitter.disabled.hover, .btn-twitter.disabled:focus, .btn-twitter.disabled.focus, .btn-twitter:disabled:hover, .btn-twitter:disabled.hover, .btn-twitter:disabled:focus, .btn-twitter:disabled.focus, fieldset[disabled] .btn-twitter:hover, fieldset[disabled] .btn-twitter.hover, fieldset[disabled] .btn-twitter:focus, fieldset[disabled] .btn-twitter.focus {
color: #fff;
background-color: #1da1f2;
border-color: transparent;
}
a:hover .btn-twitter, a:focus .btn-twitter, a:active .btn-twitter {
color: #fff;
background-color: #1da1f2;
border-color: transparent;
}
.btn-facebook {
color: #fff;
background-color: #3B5998;
border-color: transparent;
}
.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active {
color: #fff;
background-color: #3B5998;
border-color: transparent;
}
.btn-facebook.disabled, .btn-facebook:disabled, fieldset[disabled] .btn-facebook {
opacity: .8;
}
.btn-facebook.disabled:hover, .btn-facebook.disabled.hover, .btn-facebook.disabled:focus, .btn-facebook.disabled.focus, .btn-facebook:disabled:hover, .btn-facebook:disabled.hover, .btn-facebook:disabled:focus, .btn-facebook:disabled.focus, fieldset[disabled] .btn-facebook:hover, fieldset[disabled] .btn-facebook.hover, fieldset[disabled] .btn-facebook:focus, fieldset[disabled] .btn-facebook.focus {
color: #fff;
background-color: #3B5998;
border-color: transparent;
}
a:hover .btn-facebook, a:focus .btn-facebook, a:active .btn-facebook {
color: #fff;
background-color: #3B5998;
border-color: transparent;
}
.btn-instagram {
color: #fff;
background-color: #00b900;
border-color: transparent;
background-size: 110%;
background-position: 50% 50%;
background-image: -moz-linear-gradient(45deg, #f89738 0%, #e02870 34%, #a02da4 67%, #aa17a7 100%);
background-image: -webkit-linear-gradient(45deg, #f89738 0%, #e02870 34%, #a02da4 67%, #aa17a7 100%);
background-image: linear-gradient(45deg, #f89738 0%, #e02870 34%, #a02da4 67%, #aa17a7 100%);
}
.btn-instagram:hover, .btn-instagram:focus, .btn-instagram:active, .btn-instagram.active {
color: #fff;
background-color: #00b900;
border-color: transparent;
}
.btn-instagram.disabled, .btn-instagram:disabled, fieldset[disabled] .btn-instagram {
opacity: .8;
}
.btn-instagram.disabled:hover, .btn-instagram.disabled.hover, .btn-instagram.disabled:focus, .btn-instagram.disabled.focus, .btn-instagram:disabled:hover, .btn-instagram:disabled.hover, .btn-instagram:disabled:focus, .btn-instagram:disabled.focus, fieldset[disabled] .btn-instagram:hover, fieldset[disabled] .btn-instagram.hover, fieldset[disabled] .btn-instagram:focus, fieldset[disabled] .btn-instagram.focus {
color: #fff;
background-color: #00b900;
border-color: transparent;
}
a:hover .btn-instagram, a:focus .btn-instagram, a:active .btn-instagram {
color: #fff;
background-color: #00b900;
border-color: transparent;
}
.btn-line {
color: #fff;
background-color: #00b900;
border-color: transparent;
}
.btn-line:hover, .btn-line:focus, .btn-line:active, .btn-line.active {
color: #fff;
background-color: #00b900;
border-color: transparent;
}
.btn-line.disabled, .btn-line:disabled, fieldset[disabled] .btn-line {
opacity: .8;
}
.btn-line.disabled:hover, .btn-line.disabled.hover, .btn-line.disabled:focus, .btn-line.disabled.focus, .btn-line:disabled:hover, .btn-line:disabled.hover, .btn-line:disabled:focus, .btn-line:disabled.focus, fieldset[disabled] .btn-line:hover, fieldset[disabled] .btn-line.hover, fieldset[disabled] .btn-line:focus, fieldset[disabled] .btn-line.focus {
color: #fff;
background-color: #00b900;
border-color: transparent;
}
a:hover .btn-line, a:focus .btn-line, a:active .btn-line {
color: #fff;
background-color: #00b900;
border-color: transparent;
}
.btn-youtube {
color: #fff;
background-color: #e62117;
border-color: transparent;
}
.btn-youtube:hover, .btn-youtube:focus, .btn-youtube:active, .btn-youtube.active {
color: #fff;
background-color: #e62117;
border-color: transparent;
}
.btn-youtube.disabled, .btn-youtube:disabled, fieldset[disabled] .btn-youtube {
opacity: .8;
}
.btn-youtube.disabled:hover, .btn-youtube.disabled.hover, .btn-youtube.disabled:focus, .btn-youtube.disabled.focus, .btn-youtube:disabled:hover, .btn-youtube:disabled.hover, .btn-youtube:disabled:focus, .btn-youtube:disabled.focus, fieldset[disabled] .btn-youtube:hover, fieldset[disabled] .btn-youtube.hover, fieldset[disabled] .btn-youtube:focus, fieldset[disabled] .btn-youtube.focus {
color: #fff;
background-color: #e62117;
border-color: transparent;
}
a:hover .btn-youtube, a:focus .btn-youtube, a:active .btn-youtube {
color: #fff;
background-color: #e62117;
border-color: transparent;
}
/*doc
---
title: btn-inverse
name: btn-03-inverse
category: module-btn
parent: btn
---
ボタンの文字色と背景色を反転する。
.btn-outline と同時に使用すると、罫線のみの状態で反転する。
``` example
btn-inverse
btn-inverse
btn-outline + btn-inverse
btn-outline + btn-inverse
```
*/
.btn-inverse {
color: #fff;
background-color: rgba(255, 255, 255, 0.25);
border-color: transparent;
}
.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active {
color: #fff;
background-color: rgba(255, 255, 255, 0.4);
border-color: transparent;
}
.btn-inverse.disabled, .btn-inverse:disabled, fieldset[disabled] .btn-inverse {
opacity: .8;
}
.btn-inverse.disabled:hover, .btn-inverse.disabled.hover, .btn-inverse.disabled:focus, .btn-inverse.disabled.focus, .btn-inverse:disabled:hover, .btn-inverse:disabled.hover, .btn-inverse:disabled:focus, .btn-inverse:disabled.focus, fieldset[disabled] .btn-inverse:hover, fieldset[disabled] .btn-inverse.hover, fieldset[disabled] .btn-inverse:focus, fieldset[disabled] .btn-inverse.focus {
color: #fff;
background-color: rgba(255, 255, 255, 0.25);
border-color: transparent;
}
a:hover .btn-inverse, a:focus .btn-inverse, a:active .btn-inverse {
color: #fff;
background-color: rgba(255, 255, 255, 0.4);
border-color: transparent;
}
.btn-inverse.btn-outline {
color: #fff;
background-color: transparent;
border-color: rgba(255, 255, 255, 0.8);
}
.btn-inverse.btn-outline:hover, .btn-inverse.btn-outline:focus, .btn-inverse.btn-outline:active, .btn-inverse.btn-outline.active {
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
border-color: #fff;
}
.btn-inverse.btn-outline.disabled, .btn-inverse.btn-outline:disabled, fieldset[disabled] .btn-inverse.btn-outline {
opacity: .8;
}
.btn-inverse.btn-outline.disabled:hover, .btn-inverse.btn-outline.disabled.hover, .btn-inverse.btn-outline.disabled:focus, .btn-inverse.btn-outline.disabled.focus, .btn-inverse.btn-outline:disabled:hover, .btn-inverse.btn-outline:disabled.hover, .btn-inverse.btn-outline:disabled:focus, .btn-inverse.btn-outline:disabled.focus, fieldset[disabled] .btn-inverse.btn-outline:hover, fieldset[disabled] .btn-inverse.btn-outline.hover, fieldset[disabled] .btn-inverse.btn-outline:focus, fieldset[disabled] .btn-inverse.btn-outline.focus {
color: #fff;
background-color: transparent;
border-color: rgba(255, 255, 255, 0.8);
}
a:hover .btn-inverse.btn-outline, a:focus .btn-inverse.btn-outline, a:active .btn-inverse.btn-outline {
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
border-color: #fff;
}
/*doc
---
title: btn-outline
name: btn-02-outline
category: module-btn
parent: btn
---
ボタンを罫線のみの見た目にする。背景色は $body-bg ではなく transparent なので注意。
.btn-(color) と同時に使用することが前提となっており、罫線の色が変わる。
``` example
btn-first
btn-first
btn-second
btn-second
btn-third
btn-third
btn-info
btn-info
btn-important
btn-important
```
*/
.btn-outline {
box-shadow: none;
}
.btn-outline.btn-first {
color: inherit;
background-color: transparent;
border-color: #49d;
}
.btn-outline.btn-first:hover, .btn-outline.btn-first:focus, .btn-outline.btn-first:active, .btn-outline.btn-first.active {
color: #fff;
background-color: #49d;
border-color: transparent;
}
.btn-outline.btn-first.disabled, .btn-outline.btn-first:disabled, fieldset[disabled] .btn-outline.btn-first {
opacity: .8;
}
.btn-outline.btn-first.disabled:hover, .btn-outline.btn-first.disabled.hover, .btn-outline.btn-first.disabled:focus, .btn-outline.btn-first.disabled.focus, .btn-outline.btn-first:disabled:hover, .btn-outline.btn-first:disabled.hover, .btn-outline.btn-first:disabled:focus, .btn-outline.btn-first:disabled.focus, fieldset[disabled] .btn-outline.btn-first:hover, fieldset[disabled] .btn-outline.btn-first.hover, fieldset[disabled] .btn-outline.btn-first:focus, fieldset[disabled] .btn-outline.btn-first.focus {
color: inherit;
background-color: transparent;
border-color: #49d;
}
a:hover .btn-outline.btn-first, a:focus .btn-outline.btn-first, a:active .btn-outline.btn-first {
color: #fff;
background-color: #49d;
border-color: transparent;
}
.btn-outline.btn-second {
color: inherit;
background-color: transparent;
border-color: #444;
}
.btn-outline.btn-second:hover, .btn-outline.btn-second:focus, .btn-outline.btn-second:active, .btn-outline.btn-second.active {
color: #fff;
background-color: #444;
border-color: transparent;
}
.btn-outline.btn-second.disabled, .btn-outline.btn-second:disabled, fieldset[disabled] .btn-outline.btn-second {
opacity: .8;
}
.btn-outline.btn-second.disabled:hover, .btn-outline.btn-second.disabled.hover, .btn-outline.btn-second.disabled:focus, .btn-outline.btn-second.disabled.focus, .btn-outline.btn-second:disabled:hover, .btn-outline.btn-second:disabled.hover, .btn-outline.btn-second:disabled:focus, .btn-outline.btn-second:disabled.focus, fieldset[disabled] .btn-outline.btn-second:hover, fieldset[disabled] .btn-outline.btn-second.hover, fieldset[disabled] .btn-outline.btn-second:focus, fieldset[disabled] .btn-outline.btn-second.focus {
color: inherit;
background-color: transparent;
border-color: #444;
}
a:hover .btn-outline.btn-second, a:focus .btn-outline.btn-second, a:active .btn-outline.btn-second {
color: #fff;
background-color: #444;
border-color: transparent;
}
.btn-outline.btn-third {
color: inherit;
background-color: transparent;
border-color: #49B070;
}
.btn-outline.btn-third:hover, .btn-outline.btn-third:focus, .btn-outline.btn-third:active, .btn-outline.btn-third.active {
color: #fff;
background-color: #49B070;
border-color: transparent;
}
.btn-outline.btn-third.disabled, .btn-outline.btn-third:disabled, fieldset[disabled] .btn-outline.btn-third {
opacity: .8;
}
.btn-outline.btn-third.disabled:hover, .btn-outline.btn-third.disabled.hover, .btn-outline.btn-third.disabled:focus, .btn-outline.btn-third.disabled.focus, .btn-outline.btn-third:disabled:hover, .btn-outline.btn-third:disabled.hover, .btn-outline.btn-third:disabled:focus, .btn-outline.btn-third:disabled.focus, fieldset[disabled] .btn-outline.btn-third:hover, fieldset[disabled] .btn-outline.btn-third.hover, fieldset[disabled] .btn-outline.btn-third:focus, fieldset[disabled] .btn-outline.btn-third.focus {
color: inherit;
background-color: transparent;
border-color: #49B070;
}
a:hover .btn-outline.btn-third, a:focus .btn-outline.btn-third, a:active .btn-outline.btn-third {
color: #fff;
background-color: #49B070;
border-color: transparent;
}
.btn-outline.btn-info {
color: inherit;
background-color: transparent;
border-color: #49B070;
}
.btn-outline.btn-info:hover, .btn-outline.btn-info:focus, .btn-outline.btn-info:active, .btn-outline.btn-info.active {
color: #fff;
background-color: #49B070;
border-color: transparent;
}
.btn-outline.btn-info.disabled, .btn-outline.btn-info:disabled, fieldset[disabled] .btn-outline.btn-info {
opacity: .8;
}
.btn-outline.btn-info.disabled:hover, .btn-outline.btn-info.disabled.hover, .btn-outline.btn-info.disabled:focus, .btn-outline.btn-info.disabled.focus, .btn-outline.btn-info:disabled:hover, .btn-outline.btn-info:disabled.hover, .btn-outline.btn-info:disabled:focus, .btn-outline.btn-info:disabled.focus, fieldset[disabled] .btn-outline.btn-info:hover, fieldset[disabled] .btn-outline.btn-info.hover, fieldset[disabled] .btn-outline.btn-info:focus, fieldset[disabled] .btn-outline.btn-info.focus {
color: inherit;
background-color: transparent;
border-color: #49B070;
}
a:hover .btn-outline.btn-info, a:focus .btn-outline.btn-info, a:active .btn-outline.btn-info {
color: #fff;
background-color: #49B070;
border-color: transparent;
}
.btn-outline.btn-important {
color: inherit;
background-color: transparent;
border-color: #e33050;
}
.btn-outline.btn-important:hover, .btn-outline.btn-important:focus, .btn-outline.btn-important:active, .btn-outline.btn-important.active {
color: #fff;
background-color: #e33050;
border-color: transparent;
}
.btn-outline.btn-important.disabled, .btn-outline.btn-important:disabled, fieldset[disabled] .btn-outline.btn-important {
opacity: .8;
}
.btn-outline.btn-important.disabled:hover, .btn-outline.btn-important.disabled.hover, .btn-outline.btn-important.disabled:focus, .btn-outline.btn-important.disabled.focus, .btn-outline.btn-important:disabled:hover, .btn-outline.btn-important:disabled.hover, .btn-outline.btn-important:disabled:focus, .btn-outline.btn-important:disabled.focus, fieldset[disabled] .btn-outline.btn-important:hover, fieldset[disabled] .btn-outline.btn-important.hover, fieldset[disabled] .btn-outline.btn-important:focus, fieldset[disabled] .btn-outline.btn-important.focus {
color: inherit;
background-color: transparent;
border-color: #e33050;
}
a:hover .btn-outline.btn-important, a:focus .btn-outline.btn-important, a:active .btn-outline.btn-important {
color: #fff;
background-color: #e33050;
border-color: transparent;
}
/*doc
---
title: btn-(size)
name: btn-04-size
category: module-btn
parent: btn
---
ボタンのサイズを変える。(size)は、 sm, lg, xl, xxl に対応している。
``` example
default
btn-sm
btn-lg
btn-xl
btn-xxl
```
*/
.btn-sm {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.875rem;
border-radius: 0.125rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.btn-sm img {
height: 1em;
}
.btn-sm .fa:before {
font-size: 1em;
}
.btn-lg {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
/* font-size: 1.125rem; */
border-radius: 0.25rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.btn-lg img {
height: 1.5em;
}
.btn-lg .fa:before {
font-size: 1.5em;
}
.btn-xl {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1.5rem;
border-width: 2px;
border-radius: 0.375rem;
padding-left: 3rem;
padding-right: 3rem;
}
.btn-xl img {
height: 1.5em;
}
.btn-xl .fa:before {
font-size: 1.5em;
}
.btn-xxl {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 1.5rem;
border-width: 2px;
border-radius: 0.375rem;
padding-left: 3rem;
padding-right: 3rem;
}
.btn-xxl img {
height: 1.5em;
}
.btn-xxl .fa:before {
font-size: 1.5em;
}
@media (min-width: 1000px) {
.btn-xxl {
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 2rem;
border-width: 2px;
border-radius: 0.5rem;
padding-left: 5rem;
padding-right: 5rem;
}
}
/*doc
---
title: btn-flat
name: btn-05-flat
category: module-btn
parent: btn
---
ボタンの影を表示しない。
.btn-(color) と同時に使用しなかった場合、テキストのみを表示する。
``` example
btn-flat
btn-flat
btn-flat
btn-flat
btn-flat
btn-flat
btn-flat
btn-flat
```
*/
.btn-flat {
box-shadow: none;
}
/*doc
---
title: btn-block
name: btn-06-block
category: module-btn
parent: btn
---
ボタンを中央に寄せたブロック要素として表示する。幅は100%ではなく、一般的に考えられる幅を最大値とする。
### 補足：ボタンの余白
.btn-block, .btn-round, .btn-square では、.btn のpaddingの初期値を上書きする必要があるため、意図的にクラスを追加して優先度を上げている。
### note: Padding in button
In .btn-block, .btn-round, .btn-square, need to override the default padding of .btn. For this reason, intentionally add classes to increase priority.
``` example
btn-block
btn-block
btn-block
btn-block
btn-block
```
*/
.btn-block {
display: block;
width: 100%;
max-width: 240px;
margin: 0 auto;
}
.btn-block.btn {
padding-left: .5rem;
padding-right: .5rem;
}
.btn-block.btn-sm {
max-width: 180px;
}
.btn-block.btn-lg {
max-width: 320px;
}
.btn-block.btn-xl {
max-width: 640px;
}
.btn-block.btn-xxl {
max-width: 960px;
}
/*doc
---
title: btn-round
name: btn-07-round
category: module-btn
parent: btn
---
ボタンを正円で表示する。幅を超えるようなテキストを入れることはできない。
``` example
R
R
R
R
R
```
*/
.btn-round {
overflow: hidden;
width: 2.25em;
height: 2.25em;
line-height: 2.25em;
border-radius: 50%;
}
.btn-round.btn {
padding: 0;
}
.btn-round.btn img {
transform: translate(0, -0.1em);
}
.btn-round.btn .fa {
transform: translate(0, -0.1em);
}
.btn-round.btn-sm {
width: 2em;
height: 2em;
line-height: 2em;
}
.btn-round.btn-lg {
width: 2.375em;
height: 2.375em;
line-height: 2.375em;
}
.btn-round.btn-lg img {
transform: translate(0, -0.125em);
}
.btn-round.btn-lg .fa {
transform: translate(0, -0.125em);
}
.btn-round.btn-xl {
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
}
.btn-round.btn-xl img {
transform: translate(0, -0.15em);
}
.btn-round.btn-xl .fa {
transform: translate(0, -0.15em);
}
.btn-round.btn-xxl {
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
}
.btn-round.btn-xxl img {
transform: translate(0, -0.15em);
}
.btn-round.btn-xxl .fa {
transform: translate(0, -0.15em);
}
@media (min-width: 1000px) {
.btn-round.btn-xxl {
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
}
}
/*doc
---
title: btn-square
name: btn-08-square
category: module-btn
parent: btn
---
ボタンを正方形で表示する。幅を超えるようなテキストを入れることはできない。
``` example
R
R
R
R
R
```
*/
.btn-square {
overflow: hidden;
width: 2.25em;
height: 2.25em;
line-height: 2.25em;
}
.btn-square.btn {
padding: 0;
border-radius: 0.25rem;
}
.btn-square.btn img {
transform: translate(0, -0.1em);
}
.btn-square.btn .fa {
transform: translate(0, -0.1em);
}
.btn-square.btn-sm {
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 0.125rem;
}
.btn-square.btn-lg {
width: 2.375em;
height: 2.375em;
line-height: 2.375em;
border-radius: 0.25rem;
}
.btn-square.btn-lg img {
transform: translate(0, -0.125em);
}
.btn-square.btn-lg .fa {
transform: translate(0, -0.125em);
}
.btn-square.btn-xl {
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
border-radius: 0.375rem;
}
.btn-square.btn-xl img {
transform: translate(0, -0.15em);
}
.btn-square.btn-xl .fa {
transform: translate(0, -0.15em);
}
.btn-square.btn-xxl {
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
border-radius: 0.375rem;
}
.btn-square.btn-xxl img {
transform: translate(0, -0.15em);
}
.btn-square.btn-xxl .fa {
transform: translate(0, -0.15em);
}
@media (min-width: 1000px) {
.btn-square.btn-xxl {
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
border-radius: 0.5rem;
}
}
/*doc
---
title: checkbox
name: checkbox
category: module-checkbox
---
チェックボックスとラベルをインライン表示する。input要素ではなく、包括している要素にクラスを付与する（ほとんどの場合、label要素となる）。
余白・レイアウト等は utility > .p や component > .form で指定する。
is-error を同時に使用するとエラーがあったときの表示となる。
``` example
```
*/
.checkbox {
display: inline-block;
}
.checkbox.is-error, .is-error > .checkbox {
color: #d70022;
}
.checkbox input[type="checkbox"] {
display: inline-block;
margin: 0;
vertical-align: middle;
-webkit-transform: translate(0, -10%);
-ms-transform: translate(0, -10%);
transform: translate(0, -10%);
}
/*doc
---
title: dfn
name: dfn
category: module-dfn
---
巨大な単語と、それを補足するテキストをインライン表示する。(breakpoint)が sm 以上でインライン表示となる。
このテーマでは使用していない。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
There is no name yet.
```
*/
@media (min-width: 414px) {
.dfn {
display: table;
}
}
.dfn .dfn-header {
display: block;
margin: 0;
padding-bottom: .25em;
font-size: 3em;
font-weight: 300;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
line-height: 1;
white-space: nowrap;
}
@media (min-width: 414px) {
.dfn .dfn-header {
display: table-cell;
padding-bottom: 0;
padding-right: .4em;
vertical-align: middle;
}
}
.dfn .dfn-contents {
display: table-cell;
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
padding-top: 0.5em;
}
@media (min-width: 414px) {
.dfn .dfn-contents {
display: table-cell;
vertical-align: bottom;
}
}
/*doc
---
title: input
name: input
category: module-input
---
テキスト入力を即す欄を表示する。要素に直接クラスを付与する（ほとんどの場合、input要素、textarea要素となる）。
余白・レイアウト等は utility > .m や component > .form で指定する。
is-error を同時に使用するとエラーがあったときの表示となる。
``` example
```
*/
.input {
padding: .375rem .5rem;
background: #fff none;
border: 1px solid #bbb;
color: #333;
border-radius: 0.125rem;
vertical-align: middle;
}
.input.is-error, .is-error .input {
background-color: #ffe9ee;
border-color: #e33050;
color: #d70022;
}
/*doc
---
title: input-(size)
name: input-01-size
category: module-input
parent: input
---
テキスト入力を即す欄の全体のサイズを変更する。(size)は sm, lg に対応している。
``` example
```
*/
.input-sm {
padding: .25rem;
font-size: 0.875rem;
}
.input-lg {
padding: .5rem .5rem;
/* font-size: 1.125rem; */
}
/*doc
---
title: label
name: label
category: module-label
---
カテゴリー名などに使用する、小さなラベルを表示する。a要素にも指定できる。
``` example
吾輩は猫である。名前はまだ無い。label label(link) どこで生れたかとんと見当がつかぬ。
```
*/
.label {
display: inline-block;
min-width: 3em;
margin-right: .5em;
padding: .3rem .75em .25rem;
-webkit-transform: translate(0, -0.125rem);
-ms-transform: translate(0, -0.125rem);
transform: translate(0, -0.125rem);
background-color: #888;
font-size: 0.75rem;
color: #fff;
text-align: center;
line-height: 1;
vertical-align: middle;
}
a.label {
color: #fff;
text-decoration: none;
}
/*doc
---
title: label-(color)
name: label-01-color
category: module-label
parent: label
---
ラベルの色を変更する。(color)はカラーの設定 を参照。
``` example
吾輩は猫である。名前はまだ無い。label-first label-first(link) どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。label-second label-second(link) どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。label-third label-third(link) どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。label-info label-info(link) どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。label-important label-important(link) どこで生れたかとんと見当がつかぬ。
```
*/
.label-first {
background-color: #49d;
}
.label-second {
background-color: #444;
}
.label-third {
background-color: #49B070;
}
.label-info {
background-color: #49B070;
}
.label-important {
background-color: #e33050;
}
/*doc
---
title: label-inverse
name: label-03-inverse
category: module-label
parent: label
---
ラベルの文字色をbody要素の文字色、背景色をbody要素の背景色にする。
.label-(color) と同時に使用すると、文字色が指定した色になる。
``` example
```
*/
.label-inverse {
color: #333;
background-color: #fff;
}
a.label-inverse {
color: #333;
}
.label-inverse.label-first {
color: #2283cc;
}
a.label-inverse.label-first {
color: #2283cc;
}
.label-inverse.label-second {
color: #333;
}
a.label-inverse.label-second {
color: #333;
}
.label-inverse.label-third {
color: #229644;
}
a.label-inverse.label-third {
color: #229644;
}
.label-inverse.label-info {
color: #229644;
}
a.label-inverse.label-info {
color: #229644;
}
.label-inverse.label-important {
color: #d70022;
}
a.label-inverse.label-important {
color: #d70022;
}
/*doc
---
title: label-round
name: label-04-round
category: module-label
parent: label
---
ラベルが小判型になる。
``` example
吾輩は猫である。名前はまだ無い。label-first label-first(link) どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。label-second label-second(link) どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。label-third label-third(link) どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。label-info label-info(link) どこで生れたかとんと見当がつかぬ。
吾輩は猫である。名前はまだ無い。label-important label-important(link) どこで生れたかとんと見当がつかぬ。
```
*/
.label-round {
border-radius: 1em;
padding-left: 1em;
padding-right: 1em;
}
/*doc
---
title: list
name: list
category: module-list
---
シンプルなリストを表示する。このクラス単独では整列のみ行う。
リストの子要素にクラスを付与することができない場合は、 /\_scss/config\_advance.css の変数 $list-item, $list-children のセレクタを変更すること。
``` example
あいうえおかきくけ10さしすせ
あいうえおかきく
あいうえお
あいうえおかきくけ10さしすせそたちつて20
あいうえお
あいうえおかきくけ10さしすせそたちつて20
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
あいうえおかきくけ10
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
あいうえおかきくけ10
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
```
*/
.list {
margin: 0;
padding: 0;
list-style-type: none;
}
.list-item {
position: relative;
margin: 0;
line-height: 1.5;
}
.list-children {
margin: 0;
list-style-type: none;
}
/*doc
---
title: list-vertical
name: list-01-vertical
category: module-list
parent: list
---
階層構造を持ったリストを表示する。階層が深くなるごとに文字が小さくなる。
リスト先頭のシェブロンは /\_scss/mixin/mixin.css の chevron()を参照。
``` example
あいうえおかきくけ10さしすせ
あいうえおかきく
あいうえお
あいうえおかきくけ10さしすせそたちつて20
あいうえお
あいうえおかきくけ10さしすせそたちつて20
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20
あいうえおかきくけ10
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのは
あいうえおかきくけ10
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえ
あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
```
*/
.list-vertical .list-item {
margin-top: .75em;
margin-bottom: .75em;
padding-left: 1.25em;
position: relative;
}
.list-vertical .list-item:before, .list-vertical .list-item:after {
content: "";
position: absolute;
width: .4em;
height: 1px;
background-color: #333;
}
.list-vertical .list-item:before {
top: 55%;
margin-left: -1px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.list-vertical .list-item:after {
top: 55%;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.list-vertical .list-item:before {
top: .7em;
left: .5em;
}
.list-vertical .list-item:after {
top: .7em;
left: .5em;
}
.list-vertical .list-children {
padding-left: 0;
}
.list-vertical .list-children .list-item {
font-size: .9em;
}
/*doc
---
title: list-horizontal
name: list-02-horizontal
category: module-list
parent: list
---
水平に並列するリストを表示する。階層構造を持たせたり、長いテキストを表示することはできない。
``` example
あいうえおかきくけ10さしすせ
あいうえおかきく
あいうえお
あいうえおかきくけ
```
*/
.list-horizontal {
letter-spacing: -.4em;
}
.list-horizontal .list-item {
display: inline-block;
padding-right: 1em;
letter-spacing: normal;
}
.list-horizontal .list-item:before {
display: inline-block;
content: "";
width: 1px;
height: 1.125em;
margin-right: 1em;
background-color: #bbb;
vertical-align: middle;
}
.list-horizontal .list-item:first-child:before {
display: none;
}
.list-horizontal .list-item:last-child {
padding-right: 0;
}
/*doc
---
title: object
name: object
category: module-object
---
インラインフレームなどの埋め込みオブジェクトを表示する。要素自体ではなく、包括している要素にクラスを付与する。
このクラス単独ではそのままのサイズで表示する。
``` example
VIDEO
```
*/
.object {
overflow: hidden;
position: relative;
display: block;
background-color: #000;
width: 100%;
}
.object:before {
display: block;
content: "";
}
.object iframe,
.object embed,
.object object,
.object video {
display: block;
margin: 0 auto;
}
/*doc
---
title: object-square
name: object-01-square
category: module-object
parent: object
---
埋め込みオブジェクトを正方形にトリミングして表示する。別途、幅を指定する必要がある。
``` example
```
*/
/*doc
---
title: object-(ratio-x)to(ratio-y)
name: object-02-ratio
category: module-object
parent: object
---
埋め込みオブジェクトを指定した縦横比で表示する。別途、幅を指定する必要がある。
(ratio-x)to(ratio-y)は 3to2, 4to3, 16to9, ogimage(1.91:1), 21to9 に対応している。
``` example
VIDEO
VIDEO
VIDEO
VIDEO
VIDEO
```
*/
.object-square iframe,
.object-square embed,
.object-square object,
.object-square video,
.object-3to2 iframe,
.object-3to2 embed,
.object-3to2 object,
.object-3to2 video,
.object-4to3 iframe,
.object-4to3 embed,
.object-4to3 object,
.object-4to3 video,
.object-16to9 iframe,
.object-16to9 embed,
.object-16to9 object,
.object-16to9 video,
.object-ogimage iframe,
.object-ogimage embed,
.object-ogimage object,
.object-ogimage video,
.object-21to9 iframe,
.object-21to9 embed,
.object-21to9 object,
.object-21to9 video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.object-square:before {
padding-top: 100%;
}
.object-3to2:before {
padding-top: 66.66667%;
}
.object-4to3:before {
padding-top: 75%;
}
.object-16to9:before {
padding-top: 56.25%;
}
.object-ogimage:before {
padding-top: 52.35602%;
}
.object-21to9:before {
padding-top: 42.85714%;
}
/*doc
---
title: radio
name: radio
category: module-radio
---
ラジオボタンとラベルをインライン表示する。input要素ではなく、包括している要素にクラスを付与する（ほとんどの場合、label要素となる）。
余白・レイアウト等は utility > .p や component > .form で指定する。
is-error を同時に使用するとエラーがあったときの表示となる。
``` example
```
*/
.radio {
position: relative;
display: inline-block;
}
.radio.is-error, .is-error > .radio {
color: #d70022;
}
.radio input[type="radio"] {
display: inline-block;
margin: 0;
vertical-align: middle;
-webkit-transform: translate(0, -15%);
-ms-transform: translate(0, -15%);
transform: translate(0, -15%);
}
/*doc
---
title: select
name: select
category: module-select
---
セレクトボックスをインライン表示する。select要素ではなく、包括している要素にクラスを付与する。
余白・レイアウト等は utility > .p や component > .form で指定する。
is-error を同時に使用するとエラーがあったときの表示となる。
リスト先頭のシェブロンは /\_scss/mixin/mixin.css の chevron()を参照。
``` example
月を選択...
2017年
2016年
2015年
月を選択...
2017年
2016年
2015年
```
*/
.select {
display: inline-block;
position: relative;
}
.select:before, .select:after {
content: "";
position: absolute;
width: .4em;
height: 1px;
background-color: #333;
}
.select:before {
top: 55%;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.select:after {
top: 55%;
margin-right: -1px;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.select:before, .select:after {
font-size: 1.25em;
}
.select:before {
right: .85em;
z-index: 3;
}
.select:after {
right: .5em;
z-index: 4;
}
.select select {
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 1rem;
color: #333;
width: 100%;
padding: .5em 3em .5em 1em;
background-color: transparent;
border: 1px solid #bbb;
vertical-align: middle;
border-radius: 0.25rem;
outline: none;
z-index: 2;
}
.select select:focus {
background-color: #eaeaea;
}
.select.is-error, .is-error > .select {
background-color: #ffe9ee;
}
.select option {
outline: none;
}
/*doc
---
title: select-(size)
name: select-01-size
category: module-select
parent: select
---
テキスト入力を即す欄の全体のサイズを変更する。(size)は sm, lg に対応している。
``` example
月を選択...
2017年
2016年
2015年
月を選択...
2017年
2016年
2015年
```
*/
.select-sm select {
font-size: 0.875rem;
padding: .5em 3em .5em 1em;
}
.select-lg select {
/* font-size: 1.125rem; */
padding: .75em 3em .75em 1em;
}
/*doc
---
title: table
name: table
category: module-table
---
表組を整形する。このクラス単独では整列のみ行う。
(breakpoint)が sm 以下のときに表組を解除する。
幅は常に100%、セル内の文字は常に左寄せとなる。寄せ方向を変更したい場合は utility > .line-(direction) を使用する。
``` example
吾輩は猫である
名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫
である名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
```
*/
.table {
display: block;
max-width: 100%;
background-color: #fff;
border: 0 none;
}
@media (min-width: 768px) {
.table {
display: table;
}
}
.table thead,
.table tbody,
.table tfoot {
display: block;
}
@media (min-width: 768px) {
.table thead,
.table tbody,
.table tfoot {
display: table-row-group;
}
}
.table th,
.table td {
display: block;
width: 100%;
line-height: 1.5;
border: 0 none;
padding: 0 0 .5rem;
vertical-align: top;
}
@media (min-width: 768px) {
.table th,
.table td {
display: table-cell;
width: auto;
padding-left: .5em;
padding-right: .5em;
}
}
.table th:first-child,
.table td:first-child {
padding-left: 0;
}
.table th:last-child,
.table td:last-child {
padding-right: 0;
}
.table tr {
display: block;
border: 0 none;
}
@media (min-width: 768px) {
.table tr {
display: table-row;
}
}
.table thead {
border-bottom: 1px solid #bbb;
}
.table thead th {
text-align: center;
vertical-align: bottom;
}
/*doc
---
title: table-(ratio-first)to(ratio-second)to(ratio-third)
name: table-01-ratio
category: module-table
parent: table
---
2列または3列の表を (ratio) / 12 の比率で表示する。
(ratio-first)to(ratio-second)to(ratio-third)は 3to9, 4to8, 3to3to6 に対応している。
``` example
吾輩は猫である
名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である
名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
```
*/
@media (min-width: 768px) {
.table-3to9 tr th,
.table-3to9 tr td {
width: 75%;
}
}
@media (min-width: 768px) {
.table-3to9 tr th:first-child,
.table-3to9 tr td:first-child {
width: 25%;
}
}
@media (min-width: 768px) {
.table-4to8 tr th,
.table-4to8 tr td {
width: 66.66667%;
}
}
@media (min-width: 768px) {
.table-4to8 tr th:first-child,
.table-4to8 tr td:first-child {
width: 33.33333%;
}
}
@media (min-width: 768px) {
.table-3to3to6 tr th,
.table-3to3to6 tr td {
width: 25%;
}
}
@media (min-width: 768px) {
.table-3to3to6 tr th:last-child,
.table-3to3to6 tr td:last-child {
width: 50%;
}
}
/*doc
---
title: table-justify
name: table-02-justify
category: module-table
parent: table
---
列数、内容にかかわらず、セルを均等な幅にする。
``` example
吾輩は猫である名前はまだ無い。どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前は
まだ無い。どこで生れたか
とんと見当がつかぬ。
何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。
吾輩は猫である
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所で
```
*/
@media (min-width: 768px) {
.table-justify {
width: 100%;
table-layout: fixed;
}
}
/*doc
---
title: table-01
name: table-11-01
category: module-table
parent: table
---
表組のタイプ1。
### 補足：表組の命名
サイトによりデザインが大きく異なるため、.table-bordered, .table-striped などの見た目をそのまま表すクラスは使用していない。
``` example
吾輩は猫である
名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫
である名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
```
*/
.table-01 {
width: 100%;
border-top: 1px solid #bbb;
border-left: 1px solid #bbb;
}
.table-01 th,
.table-01 td {
border-bottom: 1px solid #bbb;
border-right: 1px solid #bbb;
padding: .5em;
}
.table-01 th:first-child,
.table-01 td:first-child {
padding-left: .5em;
}
.table-01 th:last-child,
.table-01 td:last-child {
padding-right: .5em;
}
/*doc
---
title: table-02
name: table-12-02
category: module-table
parent: table
---
表組のタイプ2。
``` example
吾輩は猫である
名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫
である名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
```
*/
.table-02 {
width: 100%;
}
.table-02 th,
.table-02 td {
border-bottom: 1px solid #bbb;
padding-top: 1em;
padding-bottom: .5em;
}
/*doc
---
title: title
name: title
category: module-title
---
コンポーネント内で使用できる、装飾見出しを作成する。div要素・p要素でも使用できる。
このクラス単独では初期化のみ行うため、title-(type)クラスを付与する必要がある。
上下余白は .m-(direction)-(size) で別途指定する。
*/
.title {
margin: 0;
padding: 0;
background: transparent none;
border: 0 none;
color: inherit;
text-align: inherit;
line-height: 1.5;
border-radius: 0;
}
.title:before, .title:after {
display: none;
}
/*doc
---
title: title-01
name: title-01
category: module-title
parent: title
---
``` example
これはh1要素です
これはp要素です
```
*/
.title-01 {
font-size: 2.5rem;
font-weight: 300;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
text-align: center;
}
/*doc
---
title: title-02
name: title-02
category: module-title
parent: title
---
``` example
これはh2要素です
これはp要素です
```
*/
.title-02 {
max-width: 640px;
margin-left: auto;
margin-right: auto;
padding-bottom: 1.5rem;
border-bottom: 1px solid #333;
font-size: 2rem;
font-weight: 300;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
text-align: center;
}
/*doc
---
title: title-03
name: title-03
category: module-title
parent: title
---
``` example
これはh3要素です
これはp要素です
```
*/
.title-03 {
font-size: 1.5rem;
font-weight: 700;
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
/*doc
---
title: title-04
name: title-04
category: module-title
parent: title
---
``` example
これはh4要素です
これはp要素です
```
*/
.title-04 {
font-size: 1.25rem;
font-weight: 700;
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
/*doc
---
title: title-05
name: title-05
category: module-title
parent: title
---
``` example
これはh5要素です
これはp要素です
```
*/
.title-05 {
/* font-size: 1.125rem; */
font-weight: 700;
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
/*doc
---
title: title-06
name: title-06
category: module-title
parent: title
---
``` example
これはh6要素です
これはp要素です
```
*/
.title-06 {
font-size: 1rem;
font-weight: 700;
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
/*doc
---
title: title-(type)-(a-z)
name: title-11-type-a-z
category: module-title
parent: title
---
基本見出しの派生スタイル。(type)が 02 であれば、02の派生。
### title-02-a
``` example
これはh2要素です
```
### title-02-b
テキストの前後にボーダーが入るため、短文が前提となる。
``` example
これはh2要素です
```
### title-03-a
テキストの前にボーダーが入るため、短文が前提となる。
``` example
これはh3要素です
```
*/
.title-02-a {
font-size: 2rem;
font-weight: 300;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
text-align: center;
}
.title-02-b {
font-size: 2rem;
font-weight: 300;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
text-align: center;
}
.title-02-b:before, .title-02-b:after {
position: relative;
top: -.1em;
display: inline-block;
content: "";
width: 1em;
height: 1px;
background: #333;
vertical-align: middle;
}
@media (min-width: 414px) {
.title-02-b:before, .title-02-b:after {
width: 2em;
}
}
.title-02-b:before {
margin-right: .5em;
}
@media (min-width: 414px) {
.title-02-b:before {
margin-right: 1em;
}
}
.title-02-b:after {
margin-left: .5em;
}
@media (min-width: 414px) {
.title-02-b:after {
margin-left: 1em;
}
}
.title-03-a {
font-size: 1.5rem;
font-weight: 300;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
}
.title-03-a:before {
position: relative;
top: -.1em;
display: inline-block;
content: "";
width: 2em;
height: 1px;
background: #333;
vertical-align: middle;
margin-right: .25em;
}
/*doc
---
title: thumbnail
name: thumbnail
category: module-thumbnail
---
一覧ページ、記事中で縮小された画像を表示する。要素自体ではなく、包括している要素にクラスを付与する。
このクラス単独ではそのままのサイズで表示する。幅が制限されていると、そのサイズを超えないよう画像が縮小される。
``` example
```
*/
.thumbnail {
overflow: hidden;
position: relative;
display: inline-block;
background: #fff;
border: 1px solid #bbb;
vertical-align: bottom;
}
.thumbnail img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/*doc
---
title: thumbnail-round
name: thumbnail-01-round
category: module-thumbnail
parent: thumbnail
---
画像を正円にトリミングして表示する。
横長の画像では、上下に余白ができるため、 thumbnail-vertical を併用すること。
``` example
```
*/
/*doc
---
title: thumbnail-square
name: thumbnail-02-square
category: module-thumbnail
parent: thumbnail
---
画像を正方形にトリミングして表示する。
横長の画像では、上下に余白ができるため、 thumbnail-vertical を併用すること。
``` example
```
*/
.thumbnail-round,
.thumbnail-square {
width: 100%;
height: 0;
padding-bottom: 100%;
}
.thumbnail-round img,
.thumbnail-square img {
position: absolute;
top: 50%;
left: 50%;
width: 102%;
max-width: none;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.thumbnail-round {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 50%;
}
/*doc
---
title: thumbnail-(ratio-x)to(ratio-y)
name: thumbnail-03-ratio
category: module-thumbnail
parent: thumbnail
---
画像を指定した縦横比で、かつトリミングして表示する。別途、幅を指定する必要がある。
(ratio-x)to(ratio-y)は 3to2, 4to3, 16to9, ogimage(1.91:1), 21to9 に対応している。
指定した比率を超える超横長の画像だった場合は、上下に余白ができる。
``` example
```
*/
.thumbnail-3to2,
.thumbnail-4to3,
.thumbnail-16to9,
.thumbnail-ogimage,
.thumbnail-21to9 {
width: 100%;
height: 0;
}
.thumbnail-3to2 img,
.thumbnail-4to3 img,
.thumbnail-16to9 img,
.thumbnail-ogimage img,
.thumbnail-21to9 img {
position: absolute;
top: 50%;
left: 50%;
width: 102%;
max-width: none;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.thumbnail-3to2 {
padding-bottom: 66.66667%;
}
.thumbnail-4to3 {
padding-bottom: 75%;
}
.thumbnail-16to9 {
padding-bottom: 56.25%;
}
.thumbnail-ogimage {
padding-bottom: 52.35602%;
}
.thumbnail-21to9 {
padding-bottom: 42.85714%;
}
/*doc
---
title: thumbnail-vertical
name: thumbnail-04-vertical
category: module-thumbnail
parent: thumbnail
---
thumbnail-round, thumbnail-square, thumbnail-(ratio-x)to(ratio-y) を使用したときに、幅ではなく高さを基準にトリミングする。
``` example
```
*/
.thumbnail-vertical img {
width: auto;
max-width: none;
height: 102%;
}
/*doc
---
title: alert
name: alert
category: component-alert
---
システム上のお知らせや警告文を表示する。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
```
*/
.alert {
padding: 10px;
background-color: #eaeaea;
}
/*doc
---
title: alert-(color)
name: alert-01-color
category: component-alert
parent: alert
---
システム上のお知らせや警告文の色を変更する。 info, important に対応している。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
```
*/
.alert-info {
background-color: #d5f0e1;
}
.alert-important {
background-color: #ffe9ee;
}
/*doc
---
title: balloon
name: balloon
category: component-balloon
---
アイコンがある会話吹き出しを表示する。吹き出しのはみ出し部分はピクセルで指定すること。
``` example
```
*/
.balloon {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 20px;
}
@media (min-width: 414px) {
.balloon {
margin-bottom: 30px;
}
}
@media (min-width: 1000px) {
.balloon {
margin-bottom: 40px;
}
}
.balloon .balloon-header {
margin: 0;
padding: 0 15px 0 0;
width: 75px;
}
@media (min-width: 414px) {
.balloon .balloon-header {
width: 100px;
}
}
@media (min-width: 768px) {
.balloon .balloon-header {
padding-right: 30px;
border-radius: 0.25rem;
}
}
@media (min-width: 1000px) {
.balloon .balloon-header {
width: 150px;
}
}
.balloon .balloon-header .thumbnail {
border: 0 none;
}
.balloon .balloon-caption {
margin-top: .5em;
text-align: center;
line-height: 1.25;
font-size: 0.875rem;
font-weight: 700;
}
.balloon .balloon-contents {
position: relative;
flex: 1;
width: auto;
padding: 10px;
color: #333;
border: 1px solid #bbb;
background-color: #fff;
border-radius: 0.25rem;
}
@media (min-width: 768px) {
.balloon .balloon-contents {
padding: 20px;
border-radius: 0.25rem;
}
}
.balloon .balloon-contents:before {
position: absolute;
content: '';
border-color: transparent;
border-style: solid;
border-width: 7px;
border-right-color: #bbb;
top: 20px;
left: -15px;
}
@media (min-width: 768px) {
.balloon .balloon-contents:before {
border-width: 15px;
left: -30px;
}
}
.balloon .balloon-contents:after {
position: absolute;
content: '';
border-color: transparent;
border-style: solid;
border-width: 7px;
border-right-color: #fff;
top: 20px;
left: -13px;
}
@media (min-width: 768px) {
.balloon .balloon-contents:after {
border-width: 15px;
left: -28px;
}
}
/*doc
---
title: balloon-r
name: balloon-1-r
category: component-balloon
parent: balloon
---
アイコンと吹き出しが逆になる。
``` example
```
*/
.balloon-r {
flex-direction: row-reverse;
}
.balloon-r .balloon-header {
padding-left: 15px;
padding-right: 0;
}
@media (min-width: 768px) {
.balloon-r .balloon-header {
padding-left: 30px;
}
}
.balloon-r .balloon-contents:before {
left: auto;
right: -15px;
border-left-color: #bbb;
border-right-color: transparent;
}
@media (min-width: 768px) {
.balloon-r .balloon-contents:before {
left: auto;
right: -30px;
}
}
.balloon-r .balloon-contents:after {
left: auto;
right: -13px;
border-left-color: #fff;
border-right-color: transparent;
}
@media (min-width: 768px) {
.balloon-r .balloon-contents:after {
left: auto;
right: -28px;
}
}
/*doc
---
title: balloon-(color)
name: balloon-2-color
category: component-balloon
parent: balloon
---
吹き出しに色を付ける。
``` example
```
*/
.balloon-first .balloon-caption {
color: #2283cc;
}
.balloon-first .balloon-contents {
background-color: #d5ecfa;
border-color: #49d;
}
.balloon-first .balloon-contents:before {
border-right-color: #49d;
}
.balloon-first .balloon-contents:after {
border-right-color: #d5ecfa;
}
.balloon-first.balloon-r .balloon-contents:before {
border-left-color: #49d;
border-right-color: transparent;
}
.balloon-first.balloon-r .balloon-contents:after {
border-left-color: #d5ecfa;
border-right-color: transparent;
}
.balloon-second .balloon-caption {
color: #333;
}
.balloon-second .balloon-contents {
background-color: #eaeaea;
border-color: #444;
}
.balloon-second .balloon-contents:before {
border-right-color: #444;
}
.balloon-second .balloon-contents:after {
border-right-color: #eaeaea;
}
.balloon-second.balloon-r .balloon-contents:before {
border-left-color: #444;
border-right-color: transparent;
}
.balloon-second.balloon-r .balloon-contents:after {
border-left-color: #eaeaea;
border-right-color: transparent;
}
.balloon-third .balloon-caption {
color: #229644;
}
.balloon-third .balloon-contents {
background-color: #d5f0e1;
border-color: #49B070;
}
.balloon-third .balloon-contents:before {
border-right-color: #49B070;
}
.balloon-third .balloon-contents:after {
border-right-color: #d5f0e1;
}
.balloon-third.balloon-r .balloon-contents:before {
border-left-color: #49B070;
border-right-color: transparent;
}
.balloon-third.balloon-r .balloon-contents:after {
border-left-color: #d5f0e1;
border-right-color: transparent;
}
.balloon-info .balloon-caption {
color: #229644;
}
.balloon-info .balloon-contents {
background-color: #d5f0e1;
border-color: #49B070;
}
.balloon-info .balloon-contents:before {
border-right-color: #49B070;
}
.balloon-info .balloon-contents:after {
border-right-color: #d5f0e1;
}
.balloon-info.balloon-r .balloon-contents:before {
border-left-color: #49B070;
border-right-color: transparent;
}
.balloon-info.balloon-r .balloon-contents:after {
border-left-color: #d5f0e1;
border-right-color: transparent;
}
.balloon-important .balloon-caption {
color: #d70022;
}
.balloon-important .balloon-contents {
background-color: #ffe9ee;
border-color: #e33050;
}
.balloon-important .balloon-contents:before {
border-right-color: #e33050;
}
.balloon-important .balloon-contents:after {
border-right-color: #ffe9ee;
}
.balloon-important.balloon-r .balloon-contents:before {
border-left-color: #e33050;
border-right-color: transparent;
}
.balloon-important.balloon-r .balloon-contents:after {
border-left-color: #ffe9ee;
border-right-color: transparent;
}
/*doc
---
title: backtotop
name: backtotop
category: component-backtotop
---
ページ先頭へ戻るナビゲーションを提供するコンポーネント。画面左下に絶対配置される。
ボタン内のアイコンの位置は別途調整すること。
``` example
```
*/
.backtotop {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 98;
}
@media (min-width: 1000px) {
.backtotop {
right: 50%;
margin-right: -480px;
-webkit-transform: translate(1.5rem, 0);
-ms-transform: translate(1.5rem, 0);
transform: translate(1.5rem, 0);
}
}
@media (min-width: 1280px) {
.backtotop {
margin-right: -600px;
}
}
.backtotop .btn {
position: absolute;
right: 0;
bottom: 0;
}
/*doc
---
title: block
name: block
category: component-block
---
新着情報など、サイト内で配置が不定となる可能性があるコンポーネントを表示する。必ず他のパーツを含む。
``` example
```
*/
.block {
position: relative;
}
.block .block-header {
position: relative;
padding: 0 0 30px;
}
.block .block-header:before, .block .block-header:after {
content: "";
display: table;
}
.block .block-header:after {
clear: both;
}
.block .block-footer {
position: relative;
padding: 30px 0 0;
}
.block .block-footer:before, .block .block-footer:after {
content: "";
display: table;
}
.block .block-footer:after {
clear: both;
}
.block .block-title a {
color: #333;
}
.block .block-subtitle {
margin: .5rem 0 0;
font-size: 0.75rem;
color: #888;
text-align: center;
letter-spacing: .1rem;
}
.block .block-text {
margin: 1.5rem 0 0;
text-align: center;
}
.block .block-link {
margin: 0;
text-align: center;
}
/*doc
---
title: blockarea
name: blockarea
category: component-blockarea
---
.blockが連続して複数配置される可能性がある場合に、.blockを包括する領域。
```
```
*/
.blockarea:before, .blockarea:after {
content: "";
display: table;
}
.blockarea:after {
clear: both;
}
/*doc
---
title: card
name: card
category: component-card
---
新着情報のエントリー繰り返し部分などに使用する、カード状のコンポーネントを表示する。
必ずcard-(type)クラスを付与する。
*/
.card {
position: relative;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
color: #333;
}
.card .card-thumb {
overflow: hidden;
position: relative;
display: block;
height: 0;
padding-bottom: 75%;
background: #000;
z-index: 2;
}
.card .card-object {
position: absolute;
top: 50%;
left: 50%;
width: 101%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.card .card-inner {
display: block;
position: relative;
height: 100%;
}
.card > a {
color: #333;
text-decoration: none;
transition: .3s all;
}
.card > a:hover, .card > a:focus {
color: #333;
text-decoration: none;
}
.card .card-header,
.card .card-contents {
padding-left: 10px;
padding-right: 10px;
font-size: 0.875rem;
line-height: 1.5;
word-break: break-word;
}
.card .card-header:before, .card .card-header:after,
.card .card-contents:before,
.card .card-contents:after {
content: "";
display: table;
}
.card .card-header:after,
.card .card-contents:after {
clear: both;
}
@media (min-width: 768px) {
.card .card-header,
.card .card-contents {
padding-left: 20px;
padding-right: 20px;
}
}
.card .card-header {
padding-top: 5px;
padding-bottom: 5px;
z-index: 3;
}
.card .card-contents {
padding-top: 10px;
padding-bottom: 10px;
z-index: 4;
}
.card .card-new {
position: absolute;
margin: 0;
top: -3px;
right: 10px;
font-family: "Helvetica", "Roboto", "-apple-system", "Open Sans", "Arial", sans-serif;
font-weight: 700;
line-height: 1;
z-index: 5;
}
.card .card-new .label {
padding-top: .25rem;
padding-bottom: .25rem;
border-radius: 0 0 0.125rem 0.125rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
@media (min-width: 768px) {
.card .card-new .label {
padding-top: .5rem;
padding-bottom: .5rem;
}
}
.card .card-title {
text-align: center;
}
.card .card-link {
margin-bottom: 0;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.card .btn {
padding-top: 0;
padding-bottom: 0;
height: 2rem;
line-height: 1.9rem;
}
/*doc
---
title: card-linked
name: card-01-linked
category: component-card
parent: card
---
リンクがある場合に付与するクラス。ボタンを絶対配置する。
*/
/*doc
---
title: card-01
name: card-11-01
category: component-card
parent: card
---
サムネイルの上が.card-header、下が.card-contentsとなる。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
.card-01.card-linked .card-inner {
padding-bottom: 3rem;
}
.card-01.card-linked .card-link {
position: absolute;
bottom: 1rem;
left: 0;
width: 100%;
z-index: 6;
}
/*doc
---
title: card-02
name: card-11-02
category: component-card
parent: card
---
.card-headerは常に表示、.card-contentsはホバーするか、.is-activeクラスを付与すると表示される。モバイル端末ではJavaScript等を併用しなければ.card-contentsの内容が読めない。
``` example
```
*/
.card-02 {
overflow: hidden;
}
.card-02 .card-header {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
}
.card-02 .card-contents {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 30px;
color: #fff;
background-color: #000;
opacity: 0;
transition: .3s all;
}
.card-02 > a:hover .card-contents, .card-02 > a:focus .card-contents {
opacity: .85;
}
.card-02.is-active .card-contents {
opacity: .85;
}
/*doc
---
title: card-03
name: card-11-03
category: component-card
parent: card
---
サムネイルに重なるように.card-contentsが配置される。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
.card-03 {
overflow: hidden;
background-color: #000;
}
.card-03 .card-thumb {
opacity: .75;
transition: .3s all;
}
.card-03 .card-thumb .card-object {
width: auto;
height: 101%;
}
.card-03 .card-header {
background-color: #fff;
text-align: center;
}
.card-03 .card-contents {
position: absolute;
bottom: 15%;
left: 50%;
width: 100%;
max-width: 28em;
transform: translate(-50%, 0);
padding-top: 0;
padding-bottom: 0;
color: #fff;
font-size: 1rem;
text-align: center;
}
@media (min-width: 768px) {
.card-03 .card-contents {
/* font-size: 1.125rem; */
}
}
.card-03 .btn {
height: 2.5rem;
line-height: 2.4rem;
max-width: 66.66666666%;
background-color: transparent;
}
@media (min-width: 768px) {
.card-03 .btn {
height: 3rem;
line-height: 2.9rem;
}
}
.card-03 .btn-outline.btn-inverse {
border-color: #fff;
border-width: 2px;
}
.card-03 > a .card-contents {
color: #fff;
}
.card-03 > a:hover .card-thumb, .card-03 > a:focus .card-thumb {
opacity: .6;
}
.card-03 > a:hover .card-contents, .card-03 > a:focus .card-contents {
color: #fff;
}
.card-03 > a:hover .btn, .card-03 > a:focus .btn {
background-color: transparent;
}
/*doc
---
title: headline
name: headline
category: component-headline
---
新着情報のエントリー繰り返し部分などに使用する、日付とタイトルを並列したコンポーネントを表示する。
特定幅を下回るとタイトルがブロック要素となる。
``` example
```
*/
.headline {
position: relative;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.headline {
display: table;
}
}
.headline .headline-date,
.headline .headline-category,
.headline .headline-title {
font-size: 1rem;
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-weight: 300;
line-height: 1.5;
}
@media (min-width: 768px) {
.headline .headline-date,
.headline .headline-category,
.headline .headline-title {
vertical-align: middle;
}
}
.headline .headline-date {
display: inline;
padding-right: 10px;
}
@media (min-width: 768px) {
.headline .headline-date {
display: table-cell;
width: 1%;
padding-right: 20px;
white-space: nowrap;
}
}
.headline .headline-category {
display: inline;
}
@media (min-width: 768px) {
.headline .headline-category {
display: table-cell;
width: 1%;
padding-right: 20px;
white-space: nowrap;
}
}
.headline .headline-category .label {
min-width: 5.5rem;
padding-left: 0;
padding-right: 0;
margin-right: 0;
}
.headline .headline-title {
display: block;
margin: .25rem 0 0;
}
@media (min-width: 768px) {
.headline .headline-title {
display: table-cell;
width: 99%;
margin-top: 0;
}
}
.headline .headline-title a {
color: #333;
text-decoration: none;
}
.headline .headline-title a:hover, .headline .headline-title a:focus {
color: #73b0e1;
text-decoration: underline;
}
/*doc
---
title: hero
name: hero
category: component-hero
---
メインビジュアルなどに使用される全面背景を持つコンポーネントを表示する。
必ず.hero-(type)クラスを付与する必要がある。
*/
.hero {
overflow: hidden;
position: relative;
display: block;
width: 100%;
}
.hero.hero-movie-raster .YTPOverlay.raster {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk0MjE1Njc5RDdGRDExRTc4RDIzRDVDNjIyNkJGNDhCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk0MjE1NjdBRDdGRDExRTc4RDIzRDVDNjIyNkJGNDhCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTQyMTU2NzdEN0ZEMTFFNzhEMjNENUM2MjI2QkY0OEIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTQyMTU2NzhEN0ZEMTFFNzhEMjNENUM2MjI2QkY0OEIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5sSvTOAAAAHklEQVR42mL6DwEMMMzEwMDAyIAEmBjQAIYAQIABAA7kDP2vo9f/AAAAAElFTkSuQmCC) !important;
}
.hero.hero-movie {
height: 0;
padding-top: 75%;
background-color: #000;
}
@media (min-width: 414px) {
.hero.hero-movie {
padding-top: 42.85714%;
}
}
.hero.hero-img .hero-object {
display: block;
width: 100%;
height: auto;
z-index: 12;
}
.hero.hero-img .hero-cover {
width: 100%;
height: 300px;
background: transparent none center center no-repeat;
background-size: cover;
z-index: 12;
}
@media (min-width: 768px) {
.hero.hero-img .hero-cover {
height: 480px;
}
}
@media (min-width: 1280px) {
.hero.hero-img .hero-cover {
height: 640px;
}
}
.hero .mbYTP_wrapper {
z-index: 12 !important;
}
.hero .hero-contents {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
max-width: 960px;
padding-left: 10px;
padding-right: 10px;
color: #333;
line-height: 1.75;
text-align: center;
z-index: 14;
}
.hero .hero-title {
margin: 0;
font-size: 1.2rem;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
font-weight: 300;
line-height: 1;
text-shadow: 0px 0px 1em rgba(255, 255, 255, 0.75), 1px 1px 0.25em rgba(255, 255, 255, 0.75), 1px -1px 0.25em rgba(255, 255, 255, 0.75), -1px 1px 0.25em rgba(255, 255, 255, 0.75), -1px -1px 0.25em rgba(255, 255, 255, 0.75);
letter-spacing: .05em;
}
@media (min-width: 768px) {
.hero .hero-title {
font-size: 1.75rem;
}
}
@media (min-width: 1280px) {
.hero .hero-title {
font-size: 2rem;
letter-spacing: .1em;
}
}
.hero .hero-text {
margin: 2rem 0 0;
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
font-weight: 300;
font-size: 0.875rem;
text-shadow: 0px 0px 0.5em rgba(255, 255, 255, 0.75), 1px 1px 0.05em rgba(255, 255, 255, 0.5), 1px -1px 0.05em rgba(255, 255, 255, 0.5), -1px 1px 0.05em rgba(255, 255, 255, 0.5), -1px -1px 0.05em rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) {
.hero .hero-text {
font-size: 1rem;
}
}
.hero .hero-link {
position: absolute;
bottom: 10px;
right: 10px;
color: #333;
line-height: 1;
z-index: 15;
}
@media (min-width: 768px) {
.hero .hero-link {
bottom: 20px;
right: 20px;
}
}
.hero .hero-link a {
color: #333;
}
.hero .hero-link .fa:before {
font-size: 1rem;
}
@media (min-width: 768px) {
.hero .hero-link .fa:before {
font-size: 2rem;
}
}
/*doc
---
title: hero-img
name: hero-01-img
category: component-hero
parent: hero
---
背景として表示する場合と、レスポンシブイメージで表示する場合ではマークアップが異なる。
``` example
メインビジュアル
吾輩は猫である。名前はまだ無い。
メインビジュアル
吾輩は猫である。名前はまだ無い。
```
*/
/*doc
---
title: hero-movie
name: hero-02-movie
category: component-hero
parent: hero
---
動画を背景として表示する。「jquery.mb.YTPlayer」必須。常に縦横比が維持される。
[https://github.com/pupunzi/jquery.mb.YTPlayer/wiki](https://github.com/pupunzi/jquery.mb.YTPlayer/wiki)
``` example
メインビジュアル
吾輩は猫である。名前はまだ無い。
```
*/
/*doc
---
title: hero-inverse
name: hero-03-inverse
category: component-hero
parent: hero
---
暗色向けに文字色を反転する。
``` example
メインビジュアル
吾輩は猫である。名前はまだ無い。
```
*/
.hero-inverse.hero-movie-raster .YTPOverlay.raster {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEElEQVQImWNgYGD4z0AZAABABAEAuUSdjgAAAABJRU5ErkJggg==) !important;
}
.hero-inverse .hero-contents {
color: #fff;
}
.hero-inverse .hero-title {
color: #fff;
text-shadow: 0px 0px 1em rgba(0, 0, 0, 0.35), 1px 1px 0.25em rgba(0, 0, 0, 0.35), 1px -1px 0.25em rgba(0, 0, 0, 0.35), -1px 1px 0.25em rgba(0, 0, 0, 0.35), -1px -1px 0.25em rgba(0, 0, 0, 0.35);
}
.hero-inverse .hero-text {
color: #fff;
text-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.5), 1px 1px 0.05em rgba(0, 0, 0, 0.5), 1px -1px 0.05em rgba(0, 0, 0, 0.5), -1px 1px 0.05em rgba(0, 0, 0, 0.5), -1px -1px 0.05em rgba(0, 0, 0, 0.5);
}
.hero-inverse .hero-link {
color: #fff;
}
.hero-inverse .hero-link a {
color: #fff;
}
/*doc
---
title: flip
name: flip
category: component-flip
---
全面背景とボックスを持つ、フリップボードのようなコンポーネントを表示する。
必ず .flip-(type) クラスを付与する必要があり、(breakpoint)が lg 以上でタイプによりデザインが変化する。
vhが非対応のブラウザがまだ多いため、高さは固定値としている。 背景が暗色であることが前提となっているので、適当調整すること。
*/
.flip {
position: relative;
width: 100%;
}
@media (max-width: 999.9px) {
.flip {
height: auto !important;
}
}
.flip .flip-cover {
width: 100%;
height: 210.9375px;
background: #000 none no-repeat center center;
background-size: cover;
z-index: 21;
}
@media (min-width: 1000px) {
.flip .flip-cover {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
.flip .flip-container {
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 999.9px) {
.flip .flip-container {
height: auto !important;
}
}
@media (min-width: 1000px) {
.flip .flip-container {
max-width: 960px;
}
}
@media (min-width: 1280px) {
.flip .flip-container {
max-width: 1200px;
}
}
.flip .flip-contents {
display: table;
width: 100%;
position: relative;
background-color: rgba(255, 255, 255, 0.85);
color: inherit;
z-index: 22;
}
@media (min-width: 1000px) {
.flip .flip-contents {
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
}
.flip .flip-contents .flip-contents-inner {
display: table-cell;
padding: 20px 10px;
vertical-align: middle;
}
@media (min-width: 1000px) {
.flip .flip-contents .flip-contents-inner {
padding: 10px;
}
}
/*doc
---
title: flip-01
name: flip-01-01
category: component-flip
parent: flip
---
背景画像がコンテナ幅の半分を埋める。
``` example
```
*/
@media (min-width: 1000px) {
.flip-01 {
height: 700px;
}
}
@media (min-width: 1000px) {
.flip-01 .flip-cover {
width: 50%;
left: auto;
right: 0;
}
}
.flip-01 .flip-contents {
background-color: transparent;
}
@media (min-width: 1000px) {
.flip-01 .flip-contents {
width: 50%;
}
}
@media (min-width: 1000px) {
.flip-01 .flip-contents .flip-contents-inner {
height: 100%;
}
}
/*doc
---
title: flip-02
name: flip-02-02
category: component-flip
parent: flip
---
コンテンツ高さが内容に応じて可変となる。
``` example
```
*/
@media (min-width: 1000px) {
.flip-02 {
height: 700px;
padding-top: 0;
}
}
@media (min-width: 1000px) {
.flip-02 .flip-contents {
width: 50%;
min-height: 25%;
}
}
@media (min-width: 1000px) {
.flip-02 .flip-contents .flip-contents-inner {
padding-top: 40px;
padding-bottom: 40px;
}
}
/*doc
---
title: flip-03
name: flip-03-03
category: component-flip
parent: flip
---
コンテンツ高さは常に一定の上下余白を引いた値となる。
``` example
```
*/
@media (min-width: 1000px) {
.flip-03 {
height: 700px;
}
}
@media (min-width: 1000px) {
.flip-03 .flip-contents {
width: 50%;
height: 90%;
}
}
@media (min-width: 1000px) {
.flip-03 .flip-contents .flip-contents-inner {
border: 2px solid #fff;
height: 100%;
}
}
/*doc
---
title: flip-r
name: flip-11-r
category: component-flip
parent: flip
---
コンテンツの位置が逆となる。
``` example
```
*/
.flip-r.flip-01 .flip-cover {
left: 0;
right: auto;
}
@media (min-width: 1000px) {
.flip-r .flip-contents {
left: auto;
right: 0;
}
}
/*doc
---
title: form-group
name: form-01-group
category: component-form
---
システムで可能な限りフォームの各入力セットを包括する。
フォーム内のパーツは.input, .radio, .select, .checkbox, .btnを参照。
``` example
氏名
メッセージ
```
*/
.form-group {
margin-bottom: 20px;
line-height: 1.5;
}
.form-group:before, .form-group:after {
content: "";
display: table;
}
.form-group:after {
clear: both;
}
/*doc
---
title: form-inline
name: form-02-inline
category: component-form
---
フォームの各入力セットをインラインで表示する。
``` example
姓
名
検索
```
*/
.form-inline {
margin-bottom: 1rem;
}
.form-inline .form-label {
display: inline-block;
padding-bottom: 0;
padding-left: 1rem;
line-height: 1;
}
.form-inline .form-label:first-child {
padding-left: 0;
}
.form-inline .btn {
padding-top: 0;
padding-bottom: 0;
height: 2.5rem;
line-height: 2.5rem;
}
.form-inline .btn.form-sm {
height: 1.5rem;
line-height: 1.5rem;
}
.form-inline .btn.form-lg {
height: 3.75rem;
line-height: 3.75rem;
}
.form-inline .btn.form-xl {
height: 5rem;
line-height: 5rem;
}
/*doc
---
title: form-flex
name: form-03-flex
category: component-form
---
フォームの各入力セットをフレックスボックスで表示する。
*/
.form-flex {
margin-bottom: 1rem;
}
@media (min-width: 1000px) {
.form-flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
}
.form-flex > .form-label {
width: 100%;
padding-left: 0;
padding-top: .375rem;
padding-bottom: .5rem;
line-height: 1;
}
@media (min-width: 1000px) {
.form-flex > .form-label {
width: auto;
padding-bottom: 0;
width: 13rem;
}
}
@media (min-width: 1000px) {
.form-flex > .form-flex-contents {
flex: 1;
}
}
/*doc
---
title: form-label
name: form-04-label
category: component-form
---
フォームの追加テキストやラベルを整列する。
*/
.form-label {
display: inline-block;
padding: 0 .5rem;
line-height: 1;
vertical-align: middle;
}
/*doc
---
title: form-(percentage)
name: form-05-percentage
category: component-form
---
可能な要素であれば入力項目の幅を広げる。 15, 25, 33, 50, 75, 100 に対応している。
``` example
```
*/
.form-15,
.form-15 > select {
width: 15%;
min-width: 100px;
}
.form-20,
.form-20 > select {
width: 20%;
min-width: 100px;
}
.form-25,
.form-25 > select {
width: 25%;
min-width: 100px;
}
.form-33,
.form-33 > select {
width: 33.33333333%;
min-width: 150px;
}
.form-50,
.form-50 > select {
width: 50%;
min-width: 200px;
}
.form-75,
.form-75 > select {
width: 75%;
min-width: 200px;
}
.form-100,
.form-100 > select {
width: 100%;
min-width: 200px;
}
/*doc
---
title: form-error
name: form-06-error
category: component-form
---
フォームの入力を間違えたときに表示される補助テキスト。
*/
.form-error {
margin: 5px 0 0;
color: #e33050;
font-size: 0.875rem;
line-height: 1.5;
}
/*doc
---
title: form-message
name: form-07-message
category: component-form
---
フォームの前書き部分。
*/
.form-message {
margin-bottom: 30px;
}
/*doc
---
title: form-preview
name: form-08-preview
category: component-form
---
フォームの確認部分。
*/
/*doc
---
title: form-submit
name: form-09-submit
category: component-form
---
フォームの送信ボタン部分。
*/
.form-submit {
padding-top: 30px;
line-height: 1.5;
text-align: center;
}
.form-submit:before, .form-submit:after {
content: "";
display: table;
}
.form-submit:after {
clear: both;
}
.form-submit form {
display: inline-block;
}
.form-submit .btn {
min-width: 12em;
}
/*doc
---
title: form-10-return
name: form-return
category: component-form
---
フォームの送信後に指定したページへ誘導する部分。
*/
.form-return {
padding-top: 30px;
line-height: 1.5;
text-align: center;
}
.form-return:before, .form-return:after {
content: "";
display: table;
}
.form-return:after {
clear: both;
}
/*doc
---
title: lead
name: lead
category: component-lead
---
強調された見出しとテキストを持つコンポーネントを表示する。
.title、.list、.btnを含む可能性がある。文字サイズは通常より大きくなる。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
.lead {
min-width: 300px;
margin: 0 auto;
padding: 0 10px;
}
@media (min-width: 1000px) {
.lead {
width: 640px;
}
}
.lead .lead-header,
.lead .lead-contents,
.lead .lead-footer {
/* font-size: 1.125rem; */
word-break: break-word;
}
.lead .lead-header {
margin-bottom: 2rem;
}
.lead .lead-contents {
/* font-size: 0.875rem; */
line-height: 2;
}
@media (min-width: 1000px) {
.lead .lead-contents {
font-size: 1rem;
}
}
.lead .lead-footer {
margin-top: 2rem;
}
.lead .lead-link {
margin: 0;
text-align: center;
}
/*doc
---
title: media
name: media
category: component-media
---
サムネイル等のメディアオブジェクトと、テキストオブジェクトが並列しているコンポーネントを表示する。
必ずmedia-(type)クラスを付与する。リンクがない場合でも .media-innerが必須であることに注意。
``` example
```
*/
.media {
position: relative;
}
.media .media-inner {
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
z-index: 2;
}
.media a.media-inner {
color: #333;
text-decoration: none;
transition: .3s all;
}
.media a.media-inner:hover, .media a.media-inner:focus {
color: #333;
text-decoration: none;
opacity: .8;
}
.media .media-new {
display: inline-block;
margin-left: .5em;
}
@media (min-width: 768px) {
.media .media-new {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 3;
}
}
@media (min-width: 768px) {
.media .media-new .label {
display: block;
transform: none;
}
}
.media .media-img {
min-width: 25%;
padding-right: 10px;
line-height: 1;
}
@media (min-width: 768px) {
.media .media-img {
padding-right: 20px;
}
}
.media .media-contents {
flex: 1;
width: auto;
}
.media .media-contents time {
display: block;
}
/*doc
---
title: media-vm
name: media-01-vm
category: component-media
parent: media
---
画像と本文を、上揃えではなく縦中央に整列させる。
``` example
```
*/
.media-vm .media-inner {
align-items: center;
}
/*doc
---
title: media-r
name: media-02-r
category: component-media
parent: media
---
画像と本文の配置を逆にする。
``` example
```
*/
.media-r .media-inner {
flex-direction: row-reverse;
}
.media-r .media-img {
padding-right: 0;
padding-left: 10px;
}
@media (min-width: 768px) {
.media-r .media-img {
padding-left: 20px;
}
}
/*doc
---
title: media-01
name: media-11-01
category: component-media
parent: media
---
新着情報のエントリー繰り返し部分などに使用する。
``` example
```
*/
.media-01 .media-img {
width: 25%;
min-width: 75px;
}
@media (min-width: 414px) {
.media-01 .media-img {
min-width: 100px;
}
}
@media (min-width: 768px) {
.media-01 .media-img {
min-width: 120px;
}
}
@media (min-width: 1000px) {
.media-01 .media-img {
min-width: 160px;
}
}
@media (min-width: 1280px) {
.media-01 .media-img {
min-width: 200px;
}
}
/*doc
---
title: nav
name: nav
category: component-nav
---
クリック範囲が広いナビゲーションを表示する。
各要素に詳細なクラスを付与できないシステムに対応するため、子・孫階層のセレクタはクラスではなく要素（ul, li）としている。
シングルクラスにしたい場合は /\_scss/config\_advance.css の各変数を調整すること。
``` example
```
*/
.nav {
display: inline-block;
line-height: 1.5;
letter-spacing: -.4rem;
}
.nav a,
.nav .nav-label {
letter-spacing: normal;
}
.nav a {
display: inline-block;
padding: .5rem 1rem;
color: #333;
text-decoration: none;
transition: .3s all;
}
.nav a:hover, .nav a:focus {
background-color: #eaeaea;
color: #333;
border-color: #bbb;
text-decoration: none;
}
.nav .stay,
.nav .stay > a,
.nav .stay > span {
color: #fff;
background-color: #49d;
border-color: #49d;
}
.nav .stay:hover, .nav .stay:focus,
.nav .stay > a:hover,
.nav .stay > a:focus,
.nav .stay > span:hover,
.nav .stay > span:focus {
color: #fff;
background-color: #49d;
border-color: #49d;
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav li {
margin: 0;
padding: 0;
}
.nav .nav-label {
display: inline-block;
padding: .5rem 1rem;
}
/*doc
---
title: nav-flat
name: nav-01-flat
category: component-nav
parent: nav
---
最上層のリストごとにサイトマップ形式で表示する。三段までの階層構造と短いテキストを持たせることができる。
``` example
```
*/
.nav-flat a {
padding-left: 10px;
padding-right: 10px;
}
.nav-flat > ul {
display: block;
}
.nav-flat > ul > li {
margin: 0 0 1em;
}
@media (min-width: 768px) {
.nav-flat > ul > li > a {
float: left;
min-width: 7em;
margin-right: 1em;
}
}
.nav-flat > ul li > ul {
overflow: hidden;
}
.nav-flat > ul li > ul > li {
display: inline-block;
max-width: 30em;
margin-right: 1em;
font-size: .9em;
vertical-align: top;
}
.nav-flat li {
display: block;
}
.nav-flat li:before, .nav-flat li:after {
content: "";
display: table;
}
.nav-flat li:after {
clear: both;
}
/*doc
---
title: nav-vertical
name: nav-02-vertical
category: component-nav
parent: nav
---
三段までの階層構造と複数行のテキストを持たせることができる。
``` example
```
*/
.nav-vertical {
border-top: 1px solid #bbb;
}
.nav-vertical ul {
display: block;
}
.nav-vertical ul li {
position: relative;
display: block;
}
.nav-vertical ul li a {
display: block;
margin: 0;
border-bottom: 1px solid #bbb;
}
.nav-vertical ul li > ul li {
font-size: .875em;
}
.nav-vertical ul li > ul li a {
padding-left: 30px;
}
.nav-vertical ul li > ul li > ul li a {
padding-left: 60px;
}
.nav-horizontal > ul {
display: flex;
}
.nav-horizontal > ul > li {
flex-grow: 1;
}
.nav-horizontal > ul > li > a {
padding: 6px 3px;
text-align: center;
display: block;
}
.nav-pager {
line-height: 1;
}
.nav-pager a {
margin-left: .25em;
margin-right: .25em;
padding: 0;
width: 2.5rem;
height: 2.5rem;
line-height: 2.4rem;
border: 1px solid #bbb;
vertical-align: middle;
text-align: center;
}
.nav-pager a.nav-prev {
width: 10em;
}
.nav-pager a.nav-prev:before {
content: "<";
display: inline-block;
margin-right: 5px;
}
.nav-pager a.nav-next {
width: 10em;
}
.nav-pager a.nav-next:after {
content: ">";
display: inline-block;
margin-left: 5px;
}
.nav-pager .nav-label {
margin-left: .25em;
margin-right: .25em;
padding-left: 0;
padding-right: 0;
}
/*doc
---
title: nav-serial
name: nav-05-serial
category: component-nav
parent: nav
---
複数行に対応した、前後移動リンクを表示する。
アイコンは:before,:after疑似要素で作成しているので適当調整すること。
``` example
エントリータイトルエントリータイトルエントリータイトルエントリータイトルエントリータイトルエントリータイトル
エントリータイトルエントリータイトルエントリータイトルエントリータイトルエントリータイトルエントリータイトル
```
*/
.nav-serial {
margin: 0 auto;
font-size: 0.875rem;
}
.nav-serial:before, .nav-serial:after {
content: "";
display: table;
}
.nav-serial:after {
clear: both;
}
.nav-serial a.nav-prev {
position: relative;
width: 50%;
margin: 0;
padding: 0 1em 0 2rem;
border: 0 none;
}
@media (max-width: 999.9px) {
.nav-serial a.nav-prev + .nav-next {
margin-top: .5rem;
}
}
.nav-serial a.nav-prev:before {
position: absolute;
left: .5rem;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
content: "<";
}
.nav-serial a.nav-next {
position: relative;
width: 50%;
margin: 0;
padding: 0 2rem 0 1em;
border: 0 none;
}
.nav-serial a.nav-next:after {
position: absolute;
right: .5rem;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
content: ">";
}
/*doc
---
title: pagehead
name: pagehead
category: component-pagehead
---
ページタイトルとしての役割を持つコンポーネントを表示する。
``` example
ページタイトル
吾輩は猫である
名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
.pagehead {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.pagehead .pagehead-title {
margin: 0;
font-size: 1.75rem;
line-height: 1;
}
@media (min-width: 414px) {
.pagehead .pagehead-title {
font-size: 2rem;
}
}
@media (min-width: 1000px) {
.pagehead .pagehead-title {
font-size: 2.25rem;
}
}
.pagehead .pagehead-subtitle {
margin: 0;
padding-top: 20px;
font-size: 1rem;
line-height: 1;
letter-spacing: .1em;
}
@media (min-width: 414px) {
.pagehead .pagehead-subtitle {
/* font-size: 1.125rem; */
}
}
@media (min-width: 1000px) {
.pagehead .pagehead-subtitle {
font-size: 1.25rem;
}
}
.pagehead .pagehead-caption {
margin: 0;
padding-top: 20px;
line-height: 2;
}
/*doc
---
title: pagehead-01
name: pagehead-11-01
category: component-pagehead
parent: pagehead
---
シンプルな中央寄せのページタイトル。
``` example
ページタイトル
吾輩は猫である
名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
.pagehead {
padding: 40px 10px;
}
@media (min-width: 414px) {
.pagehead {
padding-top: 60px;
padding-bottom: 60px;
}
}
.pagehead .pagehead-title {
font-weight: 300;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
text-align: center;
letter-spacing: .1em;
}
.pagehead .pagehead-subtitle {
font-weight: 300;
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
letter-spacing: .1em;
}
.pagehead .pagehead-subtitle:before {
content: "-";
margin-right: .25rem;
}
.pagehead .pagehead-subtitle:after {
content: "-";
margin-left: .25rem;
}
.pagehead .pagehead-caption {
text-align: center;
}
/*doc
---
title: post
name: post
category: component-post
---
CMSの投稿の詳細など、ページ本文を表示する。
*/
.post {
padding-bottom: 60px;
}
.post-header {
margin-bottom: 40px;
}
.post-header:before, .post-header:after {
content: "";
display: table;
}
.post-header:after {
clear: both;
}
@media (min-width: 1000px) {
.post-header {
margin-bottom: 60px;
}
}
.post-title {
margin: 0;
font-size: 1.5rem;
}
@media (min-width: 1000px) {
.post-title {
font-size: 1.75rem;
}
}
.post-contents {
word-break: break-word;
}
.post-contents:before, .post-contents:after {
content: "";
display: table;
}
.post-contents:after {
clear: both;
}
.post-footer:before, .post-footer:after {
content: "";
display: table;
}
.post-footer:after {
clear: both;
}
/*doc
---
title: post-01
name: post-11-01
category: component-post
parent: post
---
固定ページ用。
*/
.post-01 .post-header {
padding-top: 20px;
}
@media (min-width: 1000px) {
.post-01 .post-header {
padding-top: 40px;
}
}
.post-01 .post-title {
font-size: 1.75rem;
font-weight: normal;
text-align: center;
line-height: 1;
}
@media (min-width: 1000px) {
.post-01 .post-title {
font-size: 2rem;
}
}
/*doc
---
title: post-02
name: post-12-02
category: component-post
parent: post
---
ランディングページ用。
*/
/*doc
---
title: post-03
name: post-12-03
category: component-post
parent: post
---
お知らせ用。
*/
.post-03 .post-date {
display: block;
margin-top: .5rem;
}
/*doc
---
title: share
name: share
category: component-share
---
SNSの共有ボタン群を表示する。
``` example
```
*/
.share {
text-align: right;
}
.share .share-list {
margin: 0;
padding: 0;
letter-spacing: -.4rem;
line-height: 1;
}
.share .share-list .share-item {
display: inline-block;
margin: 0;
padding: 0 .25rem;
letter-spacing: normal;
vertical-align: middle;
}
.share .share-list .share-item iframe,
.share .share-list .share-item img {
vertical-align: middle;
}
/*doc
---
title: slider
name: slider
category: component-slider
---
スライドショーを表示する。
*/
.slider {
margin-bottom: 0;
}
@media (min-width: 1000px) {
.slider {
position: relative;
z-index: 10;
}
}
.slider .slick-dots {
bottom: 3.33333px;
}
.slider .slick-dots li button:before {
content: "";
font-family: sans-serif;
width: 12px;
height: 3px;
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid #fff;
border-radius: 2px;
transition: .3s all;
opacity: 1;
}
.slider .slick-dots li.slick-active button:before {
width: 9px;
height: 9px;
-webkit-transform: translate(2px, -3px);
-ms-transform: translate(2px, -3px);
transform: translate(2px, -3px);
border-radius: 50%;
}
.slider .slick-dots li button:hover:before,
.slider .slick-dots li button:focus:before {
-webkit-transform: translate(-2px, -6px);
-ms-transform: translate(-2px, -6px);
transform: translate(-2px, -6px);
width: 12px;
height: 12px;
border-width: 2px;
background-color: #000;
border-color: #fff;
border-radius: 50%;
}
.slider .slider-item {
position: relative;
width: 100%;
background-color: #fff;
}
.slider .slider-item .slider-inner {
display: block;
}
.slider .slider-item a.slider-inner {
color: #333;
text-decoration: none;
}
.slider .slider-item .slider-box {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
max-width: 960px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 220;
}
.slider .slider-item .slider-box:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 230;
}
@media (min-width: 1000px) {
.slider .slider-item .slider-box:before {
max-width: 960px;
}
}
@media (min-width: 1280px) {
.slider .slider-item .slider-box:before {
max-width: 1200px;
}
}
.slider .slider-item .slider-contents {
position: relative;
color: #333;
line-height: 1.75;
text-align: center;
z-index: 240;
}
.slider .slider-item.slider-inverse .slider-contents {
color: #fff;
}
.slider .slider-item .slider-edit {
position: absolute;
top: 700px;
left: 700px;
z-index: 250;
}
.slider .slider-item .slider-title {
margin: 0;
font-size: 2rem;
font-family: "Helvetica", "Roboto", "-apple-system", "Open Sans", "Arial", sans-serif;
font-weight: 300;
line-height: 1.5;
text-shadow: 0px 0px 1em rgba(255, 255, 255, 0.75), 1px 1px 0.25em rgba(255, 255, 255, 0.75), 1px -1px 0.25em rgba(255, 255, 255, 0.75), -1px 1px 0.25em rgba(255, 255, 255, 0.75), -1px -1px 0.25em rgba(255, 255, 255, 0.75);
letter-spacing: .05em;
}
.slider .slider-item.slider-inverse .slider-title {
text-shadow: 0px 0px 1em rgba(0, 0, 0, 0.35), 1px 1px 0.25em rgba(0, 0, 0, 0.35), 1px -1px 0.25em rgba(0, 0, 0, 0.35), -1px 1px 0.25em rgba(0, 0, 0, 0.35), -1px -1px 0.25em rgba(0, 0, 0, 0.35);
}
@media (min-width: 768px) {
.slider .slider-item .slider-title {
font-size: 2.5rem;
}
}
@media (min-width: 1280px) {
.slider .slider-item .slider-title {
font-size: 3rem;
}
}
.slider .slider-item .slider-text {
margin: 0;
padding: 40px 0 0;
font-size: 0.875rem;
text-shadow: 0px 0px 0.5em rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(255, 255, 255, 0.5), 1px -1px 0 rgba(255, 255, 255, 0.5), -1px 1px 0 rgba(255, 255, 255, 0.5), -1px -1px 0 rgba(255, 255, 255, 0.5);
}
.slider .slider-item.slider-inverse .slider-text {
text-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
.slider .slider-item .slider-text {
/* font-size: 1.125rem; */
}
}
@media (min-width: 1280px) {
.slider .slider-item .slider-text {
font-size: 1.25rem;
}
}
.slider .slider-item .slider-link {
margin: 0;
padding: 20px 0 0;
font-size: 0.75rem;
}
@media (min-width: 1280px) {
.slider .slider-item .slider-link {
font-size: 1rem;
}
}
/*doc
---
title: slider-longtext
name: slider-01-longtext
category: component-slider
parent: slider
---
タイトル・概要が長いコンテンツに対応する。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
ボタン
```
*/
.slider-longtext .slider-item .slider-title {
margin: 0;
font-size: 1.25rem;
text-align: left;
}
@media (min-width: 768px) {
.slider-longtext .slider-item .slider-title {
font-size: 2rem;
text-align: center;
}
}
@media (min-width: 1280px) {
.slider-longtext .slider-item .slider-title {
font-size: 2.5rem;
}
}
.slider-longtext .slider-item .slider-text {
text-align: left;
}
@media (min-width: 768px) {
.slider-longtext .slider-item .slider-text {
text-align: center;
}
}
/*doc
---
title: slider-01
name: slider-11-01
category: component-slider
parent: slider
---
常にCSSかJSで高さを調整するタイプのスライドショーを表示する。
画像はbackground-imageとしてインラインスタイルで指定するため、意図しないトリミングが発生する可能性がある。
``` example
スライド一枚目
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
ボタン
```
*/
.slider-01 .slider-item {
min-height: 400px;
}
.slider-01 .slider-item .slider-cover {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent center center no-repeat;
background-size: cover;
z-index: 210;
}
/*doc
---
title: slider-02
name: slider-12-02
category: component-slider
parent: slider
---
画像の縦横比に追随するタイプのスライドショーを表示する。
画像はimg要素として指定するため、デバイスによって高さが変動する。レスポンシブイメージを推薦。
``` example
スライド一枚目
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
ボタン
```
*/
@media (min-width: 1000px) {
.slider-02 {
position: relative;
z-index: 10;
}
}
.slider-02 .slider-item .slider-img {
display: block;
position: relative;
width: 100%;
height: auto;
z-index: 210;
}
#document {
/*doc
---
title: bg-(color)
name: bg-01-color
category: utility-bg
---
背景に色をつける。オブジェクト・コンポーネントを可能な限り上書きする。.bgを付与する必要はない。
``` example
bg-first
bg-second
bg-third
bg-info
bg-important
```
*/
/*doc
---
title: bg-mild
name: bg-02-mild
category: utility-bg
---
.bg-(color)と併用すると背景色を弱める。オブジェクト・コンポーネントを可能な限り上書きする。.bgを付与する必要はない。
``` example
bg-first
bg-second
bg-third
bg-info
bg-important
```
*/
/*doc
---
title: bg-fade
name: bg-03-fade
category: utility-bg
---
.bg-(color)と併用すると背景色を薄くする。オブジェクト・コンポーネントを可能な限り上書きする。.bgを付与する必要はない。
``` example
bg-first
bg-second
bg-third
bg-info
bg-important
```
*/
/*doc
---
title: bg-inverse
name: bg-04-inverse
category: utility-bg
---
文字色と背景色を反転する。オブジェクト・コンポーネントを可能な限り上書きする。.bgを付与する必要はない。
``` example
bg-inverse
```
*/
/*doc
---
title: clear
name: clear
category: utility-clear
---
floatを解除する。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ここで解除_掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
```
*/
/*doc
---
title: clearfix
name: clearfix
category: utility-clearfix
---
指定された包括要素が閉じられた時点でfloatを解除する。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
この直前でclearfix_この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
```
*/
/*doc
---
title: container-expand
name: container-expand
category: utility-container-expand
---
コンテナブロックの最大幅を無視して、要素の背景とボーダーのみをウィンドウ全体に広げる。
仕様上、2カラム以上のレイアウトでは使用できない。
.l-document-innerの幅制限を解除していると、横スクロールバーが表示されてしまう。
``` example
(l-container + contents)
(l-container + l-container-expand + contents)
```
*/
/*doc
---
title: float-(direction)
name: float-01-direction
category: utility-float
---
指定した要素を(direction)で指示した方向に寄せる。
``` example
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
```
*/
/*doc
---
title: font-(face)
name: font-01-face
category: utility-font
---
フォントを変更する。オブジェクト・コンポーネントを可能な限り上書きする。.fontを付与する必要はない。
``` example
font-first_デザインフォント01に変更しました
font-second_デザインフォント02に変更しました
font-third_デザインフォント03に変更しました
ここはデザインフォント01ですが、font-root_ここからbody要素のフォントに変更しました
font-mono_等幅フォントに変更しました <p class="font-mono">hello world!</p>
```
*/
/*doc
---
title: hidden
name: hidden
category: utility-hidden
---
常に要素を非表示にする。音声読み上げに対応する場合は.srを使用すること。
*/
/*doc
---
title: hidden-(breakpoint)-up
name: hidden-01-breakpoint-up
category: utility-hidden
---
(breakpoint)で指定した画面幅以上で要素を非表示にする。特性上、hidden-xs-upはない。
``` example
hidden-sm-up
hidden-md-up
hidden-lg-up
hidden-xl-up
hidden-xxl-up
```
*/
/*doc
---
title: hidden-(breakpoint)-down
name: hidden-02-breakpoint-down
category: utility-hidden
---
(breakpoint)で指定した画面幅未満で要素を非表示にする。特性上、hidden-xxl-downはない。
``` example
hidden-xs-down
hidden-sm-down
hidden-md-down
hidden-lg-down
hidden-xl-down
```
*/
/*doc
---
title: img-responsive
name: img-01-responsive
category: utility-img
---
画像が包括要素よりも大きくなった場合のみ、縦横比を保って伸縮させる。
``` example
line-c_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
line-r_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
line-c_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
line-l_何でも薄暗いじめじめした所で
ニャーニャー泣いていた事だけは記憶している。
```
*/
/*doc
---
title: line-(size)
name: line-02-size
category: utility-line
---
文章を指定した行高さに変更する。
``` example
line-none_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
line-sm_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
line-md_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
line-lg_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
/*doc
---
title: m-(direction)-(size)
name: m
category: utility-m
---
ブロック要素の外部余白を変更する。
``` example
m-xs
m-t-xs
m-r-xs
m-b-xs
m-l-xs
m-sm
m-t-sm
m-r-sm
m-b-sm
m-l-sm
m
m-t
m-r
m-b
m-l
m-lg
m-t-lg
m-r-lg
m-b-lg
m-l-lg
m-xl
m-t-xl
m-r-xl
m-b-xl
m-l-xl
m-xxl
m-t-xxl
m-r-xxl
m-b-xxl
m-l-xxl
```
*/
/*doc
---
title: p-(direction)-(size)
name: p
category: utility-p
---
ブロック要素の内部余白を変更する。
``` example
```
*/
/*doc
---
title: position-(y)-(x)
name: position
category: utility-position
---
ブロック要素を親要素の指定した位置に絶対配置する。親要素にposition:relativeを指定している必要がある。
``` example
position-tl
position-tc
position-tr
position-cl
position-cc
position-cr
position-bl
position-bc
position-br
```
*/
/*doc
---
title: .shadow-(size)
name: shadow
category: utility-shadow
---
要素に影をつける。
``` example
shadow
```
*/
/*doc
---
title: shadow-(size)
name: shadow-01-size
category: utility-shadow
---
影をつけた要素と背景の、擬似的な距離を変更する。
``` example
shadow-sm
shadow-lg
```
*/
/*doc
---
title: sr
name: sr
category: utility-sr
---
要素内の文章をスクリーンリーダーに反応するよう、外見のみ非表示にする。
``` example
» sr この文字は表示されません
```
*/
/*doc
---
title: sr-focus
name: sr-01-focus
category: utility-sr
---
要素そのものにフォーカスしたときにテキストが表示される。
``` example
sr-focus
```
*/
/*doc
---
title: sr-focus-inner
name: sr-02-focus-inner
category: utility-sr
---
包括要素にフォーカスしたときにテキストが表示される。
``` example
» sr-focus-inner フォーカスしましたね
```
*/
/*doc
---
title: text-(color)
name: text-01-color
category: utility-text
---
文字色を変更する。
``` example
text-first_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-second_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-third_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-important_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-info_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
/*doc
---
title: text-mild
name: text-02-mild
category: utility-text
---
文字色を弱める。.text-(color)と併用すると、指定した色を弱める。
``` example
text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-first_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-second_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-third_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-info_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-important_text-mild_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
/*doc
---
title: text-inverse
name: text-03-inverse
category: utility-text
---
文字色を反転する（背景色を文字色とする）。
``` example
text-inverse_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
```
*/
/*doc
---
title: text-(size)
name: text-04-size
category: utility-text
---
文字サイズを変更する。単位が**rem**ではなく、**em**である点に注意。
``` example
text-xxs_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-xs_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-sm_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-lg_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-xl_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
text-xxl_吾輩は猫である。名前はまだ無い。text-md_どこで生れたか とんと見当がつかぬ。
```
*/
}
#document .bg-first {
background-color: #49d;
}
#document .bg-first:not(.bg-fade) {
color: #fff;
}
#document .bg-first:not(.bg-fade) a:not([class]) {
color: #fff;
}
#document .bg-first.bg-mild {
background-color: #73b0e1;
}
#document .bg-first.bg-fade {
background-color: #d5ecfa;
}
#document .bg-second {
background-color: #444;
}
#document .bg-second:not(.bg-fade) {
color: #fff;
}
#document .bg-second:not(.bg-fade) a:not([class]) {
color: #fff;
}
#document .bg-second.bg-mild {
background-color: #777;
}
#document .bg-second.bg-fade {
background-color: #eaeaea;
}
#document .bg-third {
background-color: #49B070;
}
#document .bg-third:not(.bg-fade) {
color: #fff;
}
#document .bg-third:not(.bg-fade) a:not([class]) {
color: #fff;
}
#document .bg-third.bg-mild {
background-color: #70bc8d;
}
#document .bg-third.bg-fade {
background-color: #d5f0e1;
}
#document .bg-info {
background-color: #49B070;
}
#document .bg-info:not(.bg-fade) {
color: #fff;
}
#document .bg-info:not(.bg-fade) a:not([class]) {
color: #fff;
}
#document .bg-info.bg-mild {
background-color: #70bc8d;
}
#document .bg-info.bg-fade {
background-color: #d5f0e1;
}
#document .bg-important {
background-color: #e33050;
}
#document .bg-important:not(.bg-fade) {
color: #fff;
}
#document .bg-important:not(.bg-fade) a:not([class]) {
color: #fff;
}
#document .bg-important.bg-mild {
background-color: #e75f77;
}
#document .bg-important.bg-fade {
background-color: #ffe9ee;
}
#document .bg-inverse {
color: #fff;
background-color: #000;
}
#document .bg-inverse a:not([class]) {
color: #fff;
}
#document .clear {
clear: both;
}
#document .clearfix:before, #document .clearfix:after {
content: "";
display: table;
}
#document .clearfix:after {
clear: both;
}
#document .container-expand {
margin-left: -9999px;
margin-right: -9999px;
padding-left: 9999px;
padding-right: 9999px;
}
#document .float-l {
float: left;
}
#document .float-r {
float: right;
}
#document .font-root {
font-family: "PGYuGothic", "YuGothic", "-apple-system", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
#document .font-mono {
font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
}
#document .font-first {
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
}
#document .font-second {
font-family: "Helvetica", "Roboto", "-apple-system", "Open Sans", "Arial", sans-serif;
}
#document .font-third {
font-family: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", "Bookman Old Style", "Times New Roman", "-apple-system", "BlinkMacSystemFont", serif;
}
#document .hidden {
display: none;
}
#document .hidden-default-up {
display: none;
}
@media (min-width: 375px) {
#document .hidden-xs-up {
display: none;
}
}
@media (min-width: 414px) {
#document .hidden-sm-up {
display: none;
}
}
@media (min-width: 768px) {
#document .hidden-md-up {
display: none;
}
}
@media (min-width: 1000px) {
#document .hidden-lg-up {
display: none;
}
}
@media (min-width: 1280px) {
#document .hidden-xl-up {
display: none;
}
}
@media (min-width: 1600px) {
#document .hidden-xxl-up {
display: none;
}
}
@media (max-width: 374.9px) {
#document .hidden-default-down {
display: none;
}
}
@media (max-width: 413.9px) {
#document .hidden-xs-down {
display: none;
}
}
@media (max-width: 767.9px) {
#document .hidden-sm-down {
display: none;
}
}
@media (max-width: 999.9px) {
#document .hidden-md-down {
display: none;
}
}
@media (max-width: 1279.9px) {
#document .hidden-lg-down {
display: none;
}
}
@media (max-width: 1599.9px) {
#document .hidden-xl-down {
display: none;
}
}
#document .img-responsive {
max-width: 100%;
height: auto;
}
#document .img-fill {
width: 100%;
height: auto;
}
#document .line-l {
text-align: left;
}
#document .line-c {
text-align: center;
}
#document .line-r {
text-align: right;
}
#document .line-none {
line-height: 1;
}
#document .line-sm {
line-height: 1.5;
}
#document .line-md {
line-height: 1.75;
}
#document .line-lg {
line-height: 2;
}
#document .m-0 {
margin: 0;
}
#document .m-t-0 {
margin-top: 0;
}
#document .m-r-0 {
margin-right: 0;
}
#document .m-b-0 {
margin-bottom: 0;
}
#document .m-l-0 {
margin-left: 0;
}
#document .m-x-0 {
margin-right: 0;
margin-left: 0;
}
#document .m-y-0 {
margin-top: 0;
margin-bottom: 0;
}
#document .m-xs {
margin: 5px;
}
#document .m-t-xs {
margin-top: 5px;
}
#document .m-r-xs {
margin-right: 5px;
}
#document .m-b-xs {
margin-bottom: 5px;
}
#document .m-l-xs {
margin-left: 5px;
}
#document .m-x-xs {
margin-right: 5px;
margin-left: 5px;
}
#document .m-y-xs {
margin-top: 5px;
margin-bottom: 5px;
}
#document .m-sm {
margin: 10px;
}
#document .m-t-sm {
margin-top: 10px;
}
#document .m-r-sm {
margin-right: 10px;
}
#document .m-b-sm {
margin-bottom: 10px;
}
#document .m-l-sm {
margin-left: 10px;
}
#document .m-x-sm {
margin-right: 10px;
margin-left: 10px;
}
#document .m-y-sm {
margin-top: 10px;
margin-bottom: 10px;
}
#document .m {
margin: 15px;
}
#document .m-t {
margin-top: 15px;
}
#document .m-r {
margin-right: 15px;
}
#document .m-b {
margin-bottom: 15px;
}
#document .m-l {
margin-left: 15px;
}
#document .m-x {
margin-right: 15px;
margin-left: 15px;
}
#document .m-y {
margin-top: 15px;
margin-bottom: 15px;
}
#document .m-lg {
margin: 30px;
}
#document .m-t-lg {
margin-top: 30px;
}
#document .m-r-lg {
margin-right: 30px;
}
#document .m-b-lg {
margin-bottom: 30px;
}
#document .m-l-lg {
margin-left: 30px;
}
#document .m-x-lg {
margin-right: 30px;
margin-left: 30px;
}
#document .m-y-lg {
margin-top: 30px;
margin-bottom: 30px;
}
#document .m-xl {
margin: 45px;
}
#document .m-t-xl {
margin-top: 45px;
}
#document .m-r-xl {
margin-right: 45px;
}
#document .m-b-xl {
margin-bottom: 45px;
}
#document .m-l-xl {
margin-left: 45px;
}
#document .m-x-xl {
margin-right: 45px;
margin-left: 45px;
}
#document .m-y-xl {
margin-top: 45px;
margin-bottom: 45px;
}
#document .m-xxl {
margin: 60px;
}
#document .m-t-xxl {
margin-top: 60px;
}
#document .m-r-xxl {
margin-right: 60px;
}
#document .m-b-xxl {
margin-bottom: 60px;
}
#document .m-l-xxl {
margin-left: 60px;
}
#document .m-x-xxl {
margin-right: 60px;
margin-left: 60px;
}
#document .m-y-xxl {
margin-top: 60px;
margin-bottom: 60px;
}
#document .p-0 {
padding: 0;
}
#document .p-t-0 {
padding-top: 0;
}
#document .p-r-0 {
padding-right: 0;
}
#document .p-b-0 {
padding-bottom: 0;
}
#document .p-l-0 {
padding-left: 0;
}
#document .p-x-0 {
padding-right: 0;
padding-left: 0;
}
#document .p-y-0 {
padding-top: 0;
padding-bottom: 0;
}
#document .p-xs {
padding: 5px;
}
#document .p-t-xs {
padding-top: 5px;
}
#document .p-r-xs {
padding-right: 5px;
}
#document .p-b-xs {
padding-bottom: 5px;
}
#document .p-l-xs {
padding-left: 5px;
}
#document .p-x-xs {
padding-right: 5px;
padding-left: 5px;
}
#document .p-y-xs {
padding-top: 5px;
padding-bottom: 5px;
}
#document .p-sm {
padding: 10px;
}
#document .p-t-sm {
padding-top: 10px;
}
#document .p-r-sm {
padding-right: 10px;
}
#document .p-b-sm {
padding-bottom: 10px;
}
#document .p-l-sm {
padding-left: 10px;
}
#document .p-x-sm {
padding-right: 10px;
padding-left: 10px;
}
#document .p-y-sm {
padding-top: 10px;
padding-bottom: 10px;
}
#document .p {
padding: 15px;
}
#document .p-t {
padding-top: 15px;
}
#document .p-r {
padding-right: 15px;
}
#document .p-b {
padding-bottom: 15px;
}
#document .p-l {
padding-left: 15px;
}
#document .p-x {
padding-right: 15px;
padding-left: 15px;
}
#document .p-y {
padding-top: 15px;
padding-bottom: 15px;
}
#document .p-lg {
padding: 30px;
}
#document .p-t-lg {
padding-top: 30px;
}
#document .p-r-lg {
padding-right: 30px;
}
#document .p-b-lg {
padding-bottom: 30px;
}
#document .p-l-lg {
padding-left: 30px;
}
#document .p-x-lg {
padding-right: 30px;
padding-left: 30px;
}
#document .p-y-lg {
padding-top: 30px;
padding-bottom: 30px;
}
#document .p-xl {
padding: 45px;
}
#document .p-t-xl {
padding-top: 45px;
}
#document .p-r-xl {
padding-right: 45px;
}
#document .p-b-xl {
padding-bottom: 45px;
}
#document .p-l-xl {
padding-left: 45px;
}
#document .p-x-xl {
padding-right: 45px;
padding-left: 45px;
}
#document .p-y-xl {
padding-top: 45px;
padding-bottom: 45px;
}
#document .p-xxl {
padding: 60px;
}
#document .p-t-xxl {
padding-top: 60px;
}
#document .p-r-xxl {
padding-right: 60px;
}
#document .p-b-xxl {
padding-bottom: 60px;
}
#document .p-l-xxl {
padding-left: 60px;
}
#document .p-x-xxl {
padding-right: 60px;
padding-left: 60px;
}
#document .p-y-xxl {
padding-top: 60px;
padding-bottom: 60px;
}
#document .position-tl,
#document .position-tc,
#document .position-tr,
#document .position-cl,
#document .position-cc,
#document .position-cr,
#document .position-bl,
#document .position-bc,
#document .position-br {
position: absolute;
z-index: 99;
}
#document .position-tl {
top: 0;
left: 0;
}
#document .position-tc {
top: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#document .position-tr {
top: 0;
right: 0;
}
#document .position-cl {
top: 50%;
left: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
#document .position-cc {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#document .position-cr {
top: 50%;
right: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
#document .position-bl {
bottom: 0;
left: 0;
}
#document .position-bc {
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#document .position-br {
bottom: 0;
right: 0;
}
#document .shadow {
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
}
#document .shadow-sm {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
#document .shadow-lg {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 2px 6px 12px rgba(0, 0, 0, 0.2);
}
#document .sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
#document .sr-focus:focus, #document .sr-focus:active {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
#document .sr-focus-inner:focus .sr, #document .sr-focus-inner:active .sr {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
#document .text-first {
color: #2283cc;
}
#document .text-first.text-mild {
color: #73b0e1;
}
#document .text-second {
color: #333;
}
#document .text-second.text-mild {
color: #777;
}
#document .text-third {
color: #229644;
}
#document .text-third.text-mild {
color: #70bc8d;
}
#document .text-info {
color: #229644;
}
#document .text-info.text-mild {
color: #70bc8d;
}
#document .text-important {
color: #d70022;
}
#document .text-important.text-mild {
color: #e75f77;
}
#document .text-mild {
color: #888;
}
#document .text-inverse {
color: #fff;
}
#document .text-inverse.text-mild {
color: rgba(255, 255, 255, 0.75);
}
#document .text-xxs {
font-size: .625em;
}
#document .text-xs {
font-size: .75em;
}
#document .text-sm {
font-size: .875em;
}
#document .text-md {
font-size: 1em;
}
#document .text-lg {
font-size: 1.125em;
}
#document .text-xl {
font-size: 1.25em;
}
#document .text-xxl {
font-size: 1.5em;
}
/*
project - block_ex
--------------------
*/
@media (min-width: 768px) {
.block-flip .lead {
width: 480px;
}
}
.block-lead {
padding: 40px 0;
}
@media (min-width: 1000px) {
.block-lead {
padding: 60px 0;
}
}
@media (min-width: 1000px) {
.block-lead .title-02,
.block-lead .title-02-a,
.block-lead .title-02-b {
font-size: 2.5rem;
}
}
.block-balloon {
padding: 40px 0;
}
@media (min-width: 1000px) {
.block-balloon {
padding: 60px 0;
}
}
.block-balloon .balloon:last-child {
margin-bottom: 0;
}
.block-card {
margin-bottom: -20px;
padding: 40px 0;
}
@media (min-width: 1000px) {
.block-card {
padding: 60px 0;
}
}
.block-card .l-row > .l-col,
.block-card .l-f-row > .l-f-col {
padding-bottom: 20px;
}
.block-card .l-row-0 > .l-col,
.block-card .l-f-row-0 > .l-f-col {
padding-bottom: 0;
}
.block-card .l-row-sm > .l-col,
.block-card .l-f-row-sm > .l-f-col {
padding-bottom: 10px;
}
.block-card .l-row-lg > .l-col,
.block-card .l-f-row-lg > .l-f-col {
padding-bottom: 40px;
}
.block-card .card {
height: 100%;
}
.block-card .card-01 .card-thumb {
padding-bottom: 52.3560209%;
}
.block-card .card-03 .card-thumb {
padding-bottom: 75%;
}
.block-instagram .card {
box-shadow: none;
}
.block-instagram .card .card-inner {
padding-bottom: 0;
}
.block-instagram .card .card-thumb {
padding-bottom: 100%;
}
.block-instagram .card .card-contents {
padding-top: 10px;
font-size: 0.75rem;
}
.block-sns {
padding: 40px 0;
}
.block-form {
padding: 40px 0;
}
@media (min-width: 1000px) {
.block-form {
padding: 60px 0;
}
}
.block-recent {
padding: 40px 0;
}
@media (min-width: 1000px) {
.block-recent {
padding: 60px 0;
}
}
.block-archive {
padding-bottom: 60px;
}
.block-archive .block-nav {
padding-bottom: 20px;
text-align: center;
}
.block-archive .block-nav .stay,
.block-archive .block-nav .stay > a,
.block-archive .block-nav .stay > span {
border-color: transparent;
}
.block-media .media {
margin-bottom: 20px;
}
@media (min-width: 1000px) {
.block-media .media {
margin-bottom: 30px;
}
}
@media (max-width: 767.9px) {
.block-media .media-new .label {
padding-top: .25rem;
padding-bottom: .125rem;
}
}
.block-media .media-body {
margin: 0;
padding-top: .5em;
font-size: 0.875rem;
line-height: 1.5;
color: #888;
}
.block-media .media-tags .label {
padding-left: 0;
padding-right: 0;
margin-right: 1em;
}
.block-media .media-tags .label:before {
content: "#";
}
.block-media .media-tags-glue {
display: none;
}
.block-obj [class*="column-map-"] {
overflow: hidden;
}
.block-obj [class*="column-map-"] > div {
width: 100% !important;
}
/*
project - form_ex
--------------------
*/
.form-label .label {
margin-right: 0;
margin-left: .5em;
}
.form-submit .btn {
margin-bottom: .5rem;
}
/*
project - post_ex
--------------------
*/
.post .post-tags {
margin-top: .5rem;
margin-bottom: 0;
}
.post .post-tags .label {
font-size: 1rem;
padding-left: 0;
padding-right: 0;
margin-right: 1em;
}
.post .post-tags .label:before {
content: "#";
}
.post .post-tags-glue {
display: none;
}
/*doc
---
title: .header
name: p-1-header
category: project
---
ヘッダを表示する。
*/
.header {
padding: 20px 0;
}
.header .share {
padding-top: 20px;
text-align: center;
}
@media (min-width: 1000px) {
.header .share {
padding-top: 10px;
text-align: right;
}
}
/*doc
---
title: .header-brand
name: p-1-header-1-brand
category: project
parent: p-1-header
---
ブランドロゴを表示する。
*/
.header-brand {
margin: 0;
text-align: center;
font-weight: 700;
line-height: 1;
font-size: 24px;
}
@media (min-width: 1000px) {
.header-brand {
text-align: left;
text-indent: -.5em;
}
}
.header-brand .header-logo img {
max-width: 66.66666666%;
max-height: 45px;
width: auto;
}
@media (min-width: 414px) {
.header-brand .header-logo img {
max-width: auto;
}
}
.header-brand .header-logo a {
color: #333;
text-decoration: none;
}
.header-brand .header-logo a:hover, .header-brand .header-logo a:focus {
text-decoration: none;
}
/*doc
---
title: .header-title
name: p-1-header-2-title
category: project
parent: p-1-header
---
サイトタイトルを表示する。
*/
.header-title {
font-size: 1.5rem;
}
/*doc
---
title: .globalnav
name: p-2-globalnav
category: project
---
グローバルナビゲーションを表示する。.nav-horizontalを含む。
*/
.globalnav {
width: 100%;
background-color: #fff;
line-height: 1;
}
.globalnav .nav-horizontal {
display: block;
width: 100%;
}
.globalnav .nav-horizontal > ul {
margin-left: auto;
margin-right: auto;
}
.globalnav.is-active {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 99;
}
/*doc
---
title: .footer
name: p-3-footer
category: project
---
フッタを表示する。
*/
.footer {
padding: 20px 0 60px;
font-size: 0.75rem;
text-align: center;
}
.footer .backtotop .btn {
border-color: transparent;
}
.footer .backtotop .btn:hover, .footer .backtotop .btn:focus, .footer .backtotop .btn:active {
background-color: #fff;
}
.footer .backtotop .btn .fa {
transform: translate(0, -0.25em);
}
/*doc
---
title: .footer-nav
name: p-3-footer-1-nav
category: project
parent: p-3-footer
---
フッタナビを表示する。.nav-horizontalを含む。
*/
/*doc
---
title: .footer-copyright
name: p-3-footer-2-copyright
category: project
parent: p-3-footer
---
コピーライト文を表示する。
*/
.footer-copyright {
margin: 0;
font-size: 0.75rem;
}
/*
---
WYSIWYG (a-blog cms)
---
*/
.wysiwyg {
word-break: break-word;
}
.wysiwyg *:first-child {
margin-top: 0 !important;
}
.wysiwyg a:not([class*="link"]):not([class*="btn"]):not([class*="label"]) {
text-decoration: underline;
}
.wysiwyg a:not([class*="link"]):not([class*="btn"]):not([class*="label"]):hover {
color: #73b0e1;
text-decoration: none;
}
.wysiwyg h1:not([class*="title"]),
.wysiwyg h2:not([class*="title"]),
.wysiwyg h3:not([class*="title"]),
.wysiwyg h4:not([class*="title"]),
.wysiwyg h5:not([class*="title"]),
.wysiwyg h6:not([class*="title"]) {
margin: 0;
padding: 0;
background: transparent none;
border: 0 none;
color: #333;
font-weight: bold;
text-align: left;
line-height: 1.5;
border-radius: 0;
}
.wysiwyg h1:not([class*="title"]):before, .wysiwyg h1:not([class*="title"]):after,
.wysiwyg h2:not([class*="title"]):before,
.wysiwyg h2:not([class*="title"]):after,
.wysiwyg h3:not([class*="title"]):before,
.wysiwyg h3:not([class*="title"]):after,
.wysiwyg h4:not([class*="title"]):before,
.wysiwyg h4:not([class*="title"]):after,
.wysiwyg h5:not([class*="title"]):before,
.wysiwyg h5:not([class*="title"]):after,
.wysiwyg h6:not([class*="title"]):before,
.wysiwyg h6:not([class*="title"]):after {
display: none;
}
.wysiwyg h1:not([class*="title"]),
.wysiwyg h2:not([class*="title"]) {
font-size: 1.25rem;
margin-top: 1.5em;
margin-bottom: .75em;
}
@media (min-width: 1000px) {
.wysiwyg h1:not([class*="title"]),
.wysiwyg h2:not([class*="title"]) {
font-size: 1.5rem;
}
}
.wysiwyg h3:not([class*="title"]) {
/* font-size: 1.125rem; */
margin-top: 1.5em;
margin-bottom: .75em;
}
@media (min-width: 1000px) {
.wysiwyg h3:not([class*="title"]) {
font-size: 1.25rem;
}
}
.wysiwyg h4:not([class*="title"]) {
/* font-size: 1.125rem; */
margin-top: 1em;
margin-bottom: .5em;
}
@media (min-width: 1000px) {
.wysiwyg h4:not([class*="title"]) {
/* font-size: 1.125rem; */
}
}
.wysiwyg h5:not([class*="title"]) {
font-size: 1rem;
margin-top: 1em;
margin-bottom: .5em;
}
@media (min-width: 1000px) {
.wysiwyg h5:not([class*="title"]) {
/* font-size: 1.125rem; */
}
}
.wysiwyg h6:not([class*="title"]) {
font-size: 1rem;
margin-bottom: .5em;
}
.wysiwyg ul:not([class*="list"]),
.wysiwyg ol:not([class*="list"]):not([class*="linenums"]) {
overflow: hidden;
}
.wysiwyg ul:not([class*="list"]) {
margin: 0 0 .5rem;
padding: 0;
}
.wysiwyg ul:not([class*="list"]) > li {
position: relative;
margin: .5rem 0;
padding: 0 0 0 1.5rem;
list-style-type: none;
}
.wysiwyg ul:not([class*="list"]) > li:before {
display: block;
content: "";
position: absolute;
top: .75em;
left: .25em;
width: .25em;
height: .25em;
background-color: #333;
}
.wysiwyg ul:not([class*="list"]) > li ul:not([class*="list"]),
.wysiwyg ul:not([class*="list"]) > li ol:not([class*="list"]):not([class*="linenums"]) {
margin-top: .5rem !important;
margin-bottom: 0 !important;
}
.wysiwyg ol:not([class*="list"]):not([class*="linenums"]) {
counter-reset: ol_number;
margin: 0 0 .5rem;
padding: 0;
}
.wysiwyg ol:not([class*="list"]):not([class*="linenums"]) > li {
position: relative;
margin: .5rem 0;
padding: 0 0 0 1.5rem;
list-style-type: none;
}
.wysiwyg ol:not([class*="list"]):not([class*="linenums"]) > li:before {
display: block;
counter-increment: ol_number;
content: counter(ol_number) ".";
position: absolute;
top: 0;
left: 0;
width: 1rem;
text-align: center;
}
.wysiwyg ol:not([class*="list"]):not([class*="linenums"]) > li ul:not([class*="list"]),
.wysiwyg ol:not([class*="list"]):not([class*="linenums"]) > li ol:not([class*="list"]):not([class*="linenums"]) {
margin-top: .5em !important;
margin-bottom: 0 !important;
}
.wysiwyg dl:not([class*="list"]) {
margin: 0;
padding: 0;
}
.wysiwyg dl:not([class*="list"]) > dt {
margin: 0 0 .5em;
padding: 0;
}
.wysiwyg dl:not([class*="list"]) > dd {
margin: 0 0 .5em;
padding: 0 0 0 1.5rem;
}
.wysiwyg hr:not([class]) {
overflow: hidden;
margin: 30px 0;
height: #bbb;
border-width: 1px 0 0;
border-style: solid none none;
border-color: #bbb transparent transparent;
}
.wysiwyg blockquote:not([class]) {
overflow: hidden;
margin: 30px 0;
padding: 10px;
border-width: 0 0 0 5px;
border-style: none none none solid;
border-color: transparent transparent transparent #eaeaea;
font-style: normal;
}
.wysiwyg table:not([class]),
.wysiwyg [class*="column-table"] table {
display: block;
width: 100%;
max-width: 100%;
margin-bottom: 30px;
border-width: 0 0 1px 1px;
border-style: solid;
border-color: #bbb;
}
@media (min-width: 414px) {
.wysiwyg table:not([class]),
.wysiwyg [class*="column-table"] table {
display: table;
}
}
.wysiwyg table:not([class]) thead,
.wysiwyg table:not([class]) tbody,
.wysiwyg table:not([class]) tfoot,
.wysiwyg [class*="column-table"] table thead,
.wysiwyg [class*="column-table"] table tbody,
.wysiwyg [class*="column-table"] table tfoot {
display: block;
}
@media (min-width: 414px) {
.wysiwyg table:not([class]) thead,
.wysiwyg table:not([class]) tbody,
.wysiwyg table:not([class]) tfoot,
.wysiwyg [class*="column-table"] table thead,
.wysiwyg [class*="column-table"] table tbody,
.wysiwyg [class*="column-table"] table tfoot {
display: table-row-group;
}
}
.wysiwyg table:not([class]) tr,
.wysiwyg [class*="column-table"] table tr {
display: block;
border-bottom: 2px solid #bbb;
}
@media (min-width: 414px) {
.wysiwyg table:not([class]) tr,
.wysiwyg [class*="column-table"] table tr {
display: table-row;
border-bottom: 0 none;
}
}
.wysiwyg table:not([class]) th,
.wysiwyg table:not([class]) td,
.wysiwyg [class*="column-table"] table th,
.wysiwyg [class*="column-table"] table td {
display: block;
width: 100%;
padding: 5px 10px;
border-width: 1px 1px 0 0;
border-style: solid;
border-color: #bbb;
line-height: 1.5;
vertical-align: top;
}
@media (min-width: 414px) {
.wysiwyg table:not([class]) th,
.wysiwyg table:not([class]) td,
.wysiwyg [class*="column-table"] table th,
.wysiwyg [class*="column-table"] table td {
display: table-cell;
width: auto;
}
}
.wysiwyg table:not([class]) th,
.wysiwyg [class*="column-table"] table th {
text-align: left;
}
.wysiwyg table:not([class]) thead th,
.wysiwyg [class*="column-table"] table thead th {
vertical-align: bottom;
}
.wysiwyg table:not([class]) .acms-cell-text-center,
.wysiwyg [class*="column-table"] table .acms-cell-text-center {
text-align: center;
}
.wysiwyg table:not([class]) .acms-cell-text-right,
.wysiwyg [class*="column-table"] table .acms-cell-text-right {
text-align: right;
}
/* mintcode */
.text-nowrap {
white-space: nowrap;
display: inline-block;
}
.narrow-container {
max-width: 680px;
margin: 0 auto;
}
.map-book {
display: block;
max-width: 282px;
width: 50vw;
margin-left: auto;
margin-right: auto;
border: 2px solid #ccc;
}
.number {
display: inline-block;
width: 24px;
height: 24px;
background-color: #49B070;
color: #fff;
text-align: center;
line-height: 24px;
margin-right: 4px;
border-radius: 12px;
}
.how-to-buy .btn {
margin-left: 30px;
}
.how-to-buy .btn + .btn {
margin-left: 0;
}
.how-to-buy p {
margin-left: 30px;
}
.btn-block.btn-lg {
width: calc(100vw - 20px);
}
.disc-bullet {
list-style: none;
padding-left: 0;
}
.disc-bullet li {
padding-left: 18px;
line-height: 1.5;
position: relative;
}
.disc-bullet li:before {
content: '';
display: inline-block;
border-radius: 5px;
width: 10px;
height: 10px;
background-color: #49d;
position: absolute;
left: 0;
top: .5em;
}
.table-errata-container {
font-size: 12px;
width: 100%;
}
.table-errata-container td:first-child {
white-space: nowrap;
background-color: #eee;
}
.table-errata-container td:nth-child(3){
background-color: rgba(255,0,0,0.08);
}
.table-errata-container td:nth-child(4){
background-color: rgba(0,255,0,0.08);
}
@media(min-width:768px){
.table-errata-container td:nth-child(2){
width: 20%;
}
}
th {
background-color: #eee;
}
```
*/
/*doc
---
title: img-fill
name: img-02-fill
category: utility-img
---
画像の大きさに関係なく、常に包括要素の幅いっぱいに伸縮させる。
``` example
```
*/
/*doc
---
title: line-(direction)
name: line-01-direction
category: utility-line
---
ブロック要素内の文章を指定した方向へ寄せる。
``` example