`を消す
```html
```
*/
.m_fieldWrapper01 {
overflow: hidden;
}
.m_fieldWrapper01 .f_field {
float: left;
margin-right: 10px;
}
.m_fieldWrapper01__text {
float: left;
font-size: 14px;
line-height: 40px;
margin: 0;
}
/*
---
name: テキストフィールド + フィールド内にテキスト
category:
- molecules/フォーム
tag:
- pc
- sp
---
.m_fieldWrapper02
* f_text02とセットで使う
* 幅はインラインでCSSを記述することで2列、3列など調整する
```html
```
*/
.m_fieldWrapper02 {
overflow: hidden;
width: 100%;
}
.m_fieldWrapper02__child {
float: left;
margin-bottom: 10px;
margin-right: 10px;
}
.m_fieldWrapper02--twoColumn .m_fieldWrapper02__child {
box-sizing: border-box;
margin-bottom: 6px;
margin-right: 0;
padding-right: 3px;
width: 50%;
}
.m_fieldWrapper02--twoColumn .m_fieldWrapper02__child:nth-child(2n) {
padding-left: 3px;
padding-right: 0;
}
/*
---
name: エラーメッセージ
category:
- molecules/フォーム
tag:
- pc
---
.m_errorMessage
* CakePHPのヘルパーで吐き出されるエラーを囲う
* 使用箇所に応じてユーティリティでマージンを設定すること
```html
```
*/
.m_errorMessage .error-message {
color: #f87e7e;
line-height: 1.4;
}
/* -----------------------------------------------------------------
mediaList01
----------------------------------------------------------------- */
/*
---
name: mediaList01
category:
- molecules/リスト
tag:
- sp
---
リンク付きテキスト。未読や未処理などのステータスがある場合は赤のマークが付く。
画像、テキスト2種、ラベル、リンクから構成される。
基本的には `>` の矢印がつくが、例外として `mediaList01--noArrow` をつければ無くすことも可能。
現状では主に下記で使用
- *ショップのブログ一覧
- *クーポンAppのクーポン一覧
- *定期便Appの商品一覧
- *スマホAppの注文一覧
- *TシャツAppの注文一覧
```html
```
*/
.mediaList01 {
background: #fff;
}
.mediaList01__child {
border-bottom: 1px solid #eee;
}
.mediaList01__link {
color: #1c1c1c;
display: block;
padding: 15px 30px 15px 15px;
position: relative;
text-decoration: none;
}
.mediaList01__link:before, .mediaList01__link:after {
bottom: 0;
content: "";
margin: auto;
position: absolute;
right: 0;
top: 0;
vertical-align: middle;
}
.mediaList01__link:before {
border-right: 1px solid #979797;
border-top: 1px solid #979797;
height: 9px;
right: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 9px;
}
.mediaList01__inner {
display: table;
margin: 0;
}
.mediaList01__imgWrap {
display: table-cell;
height: 80px;
text-align: center;
vertical-align: middle;
width: 80px;
}
.mediaList01__img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
.mediaList01__box {
display: table-cell;
padding: 0 0 0 10px;
vertical-align: middle;
}
.mediaList01__text01 {
-webkit-box-orient: vertical;
/* ▼行数制限 */
display: -webkit-box;
font-size: 14px;
-webkit-line-clamp: 3;
line-height: 1.6;
overflow: hidden;
word-break: break-word;
/* ▲行数制限 */
}
.mediaList01__text02 {
font-size: 14px;
font-weight: bold;
line-height: 1.6;
margin-bottom: 2px;
}
.mediaList01__subText01 {
color: #999;
font-size: 12px;
line-height: 1.6;
}
.mediaList01__labelWrap {
margin: 0 0 5px;
}
.mediaList01__label01 {
border-radius: 10px;
color: #fff;
display: inline-block;
font-size: 10px;
line-height: 1.6;
margin-right: 5px;
padding: 2px 10px;
}
.mediaList01__labelGreen {
background: #0fafaa;
}
.mediaList01__labelGray {
background: #a0a0a0;
}
.mediaList01__labelRed {
background: #f87e7e;
}
.mediaList01--noArrow .mediaList01__link:before,
.mediaList01--noArrow .mediaList01__link:after {
border: none;
}
.o_form__topinfo {
background-color: #fcfcfd;
border: 4px solid #f0f1f4;
box-sizing: border-box;
margin: 40px 0 0;
padding: 24px;
}
.o_form__row {
border-bottom: 1px solid #f0f1f4;
box-sizing: border-box;
display: table;
font-size: 14px;
padding: 40px 0;
width: 100%;
}
.o_form__row--noborder {
border-bottom: none;
}
.o_form__header {
display: table-cell;
vertical-align: middle;
width: 210px;
}
.o_form__data {
display: table-cell;
vertical-align: middle;
}
.o_form__title {
display: inline-block;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
}
.o_form__relatvie {
height: 100%;
position: relative;
width: 100%;
}
.o_form__notification {
background-color: #f0f1f4;
font-size: 12px;
line-height: 1.4;
margin-top: 16px;
padding: 20px;
}
.o_form__btnBlock {
padding-top: 32px;
text-align: center;
}
.o_form__contentBlock {
padding: 32px 0;
text-align: center;
}
.o_form__separator {
background-color: #f0f1f4;
box-sizing: border-box;
font-size: 14px;
height: 50px;
line-height: 50px;
padding: 0 0 0 100px;
}
.o_form__separator span {
font-weight: bold;
}
.o_form__inputBlock {
margin-bottom: 16px;
}
.o_form__inputLabel {
margin-bottom: 8px;
}
.o_form__inner {
margin: 0 0 40px;
padding: 0 100px;
}
@media only screen and (max-width: 519px) {
.o_form__topinfo {
background-color: #fcfcfd;
border: 4px solid #f0f1f4;
box-sizing: border-box;
font-size: 12px;
margin: 20px 0 0;
padding: 12px;
}
.o_form__row {
display: block;
font-size: 14px;
padding: 32px 0;
width: 100%;
}
.o_form__row.--noborder {
border-bottom: none;
}
.o_form__header {
display: block;
margin: 0 0 16px;
width: 100%;
}
.o_form__data {
display: block;
}
.o_form__notification {
font-size: 12px;
line-height: 1.4;
margin-top: 16px;
padding: 16px;
}
}
/*
---
name: ページャー
category:
- Organisms/ページャー
tag:
- pc
---
.pagerGroup
* ページャーとして使用する
* 今後はエレメントファイルを使って設置すること。既存は随時置き換える。
* modifier
* pagerGroup--center : 中央寄せにしたい時に.pagerGroupに付与
* pagerGroup--shadow : 影を付けたい時に.pagerGroupに付与
* pagerGroup__list--active : 現在のページの.pagerGroup__listに付与
```html
```
*/
.pagerGroup {
font-size: 12px;
padding: 30px 10px 0;
}
.pagerGroup--center {
text-align: center;
}
.pagerGroup__header {
font-size: 13px;
}
.pagerGroup__order {
background: #fff;
border-radius: 3px;
display: inline-block;
height: 36px;
list-style: disc;
margin-top: 10px;
padding: 0;
text-align: center;
}
.pagerGroup--shadow.pagerGroup__order, .pagerGroup--shadow .pagerGroup__order {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagerGroup__list {
display: inline;
}
.pagerGroup__list--active,
.pagerGroup__list a {
color: #63c1ae;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
.pagerGroup__list--active {
color: #000;
font-weight: bold;
}
/*
---
name: テーブル1
category:
- Organisms/テーブル
tag:
- pc
- sp
---
.tableStyle01
* 共通のテーブルのスタイル1
* 行ホバーで色をつけたいときはtableStyle01--hoverTr
* thの行が無くてトップにボーダーをつけたい時はtableStyle01--borderTop
```html
| 幅60px |
幅80px |
幅90px |
幅自動 |
幅60px |
| 左揃え |
センター |
センター |
センター |
右揃え |
| 例 |
センター |
センター |
センター |
詳細 |
| 例 |
センター |
センター |
センター |
詳細 |
| 例 |
センター |
センター |
センター |
詳細 |
 |
テキストテキストテキストテキストテキストテキストテキスト |
詳細 |
|
テキストテキストテキストテキストテキストテキストテキスト |
詳細 |
```
*/
.tableStyle01 {
width: 100%;
}
.tableStyle01--borderTop {
border-top: 1px solid #ddd;
}
.tableStyle01--hoverTr:hover {
background: #eaf6f3;
}
.tableStyle01__th {
font-size: 12px;
}
.tableStyle01__th, .tableStyle01__td {
border-bottom: 1px solid #ddd;
line-height: 1.5;
vertical-align: middle;
}
.tableStyle01__th {
background-color: #777;
color: #fff;
padding: 7px 10px;
}
.tableStyle01__td {
padding: 12px 0;
}
.tableStyle01__imgContainer {
height: 50px;
text-align: center;
width: 50px;
}
.tableStyle01__img {
max-height: 50px;
max-width: 50px;
}
.tableStyle01__taC {
text-align: center;
}
.tableStyle01__taL {
padding-left: 10px;
text-align: left;
}
.tableStyle01__taR {
padding-right: 10px;
text-align: right;
}
.tableStyle01__w40 {
width: 40px;
}
.tableStyle01__w50 {
width: 50px;
}
.tableStyle01__w60 {
width: 60px;
}
.tableStyle01__w80 {
width: 80px;
}
.tableStyle01__w90 {
width: 90px;
}
.tableStyle01__w100 {
width: 100px;
}
.tableStyle01__w120 {
width: 120px;
}
.tableStyle01__w130 {
width: 130px;
}
/*
---
name: テーブル2
category:
- Organisms/テーブル
tag:
- pc
- sp
---
.tableStyle02
* 共通のテーブルのスタイル2
```html
| 幅60px |
幅100px |
幅150px |
幅自動 |
幅100px |
| 左揃え |
センター |
センター |
センター |
右揃え |
| 例 |
センター |
センター |
センター |
詳細 |
```
*/
.tableStyle02--wMax {
width: 100%;
}
.tableStyle02__th, .tableStyle02__td {
border-bottom: 1px solid #e7e7e7;
border-top: 1px solid #e7e7e7;
padding: 7px 0;
}
.tableStyle02__th {
background: #f5f5f5;
}
.tableStyle02__w60 {
width: 60px;
}
.tableStyle02__w100 {
width: 100px;
}
.tableStyle02__w150 {
width: 150px;
}
.tableStyle02__taC {
text-align: center;
}
.tableStyle02__taL {
padding-left: 10px;
text-align: left;
}
.tableStyle02__taR {
padding-right: 10px;
text-align: right;
}
.hide {
display: none !important;
}
/* .Flashメッセージ
----------------------------------------------------------------- */
.message.error {
background-color: #fcdcdc;
color: #2e3242;
font-size: 14px;
font-weight: bold;
line-height: 47px;
text-align: center;
}
.message.save {
background-color: #c7e9eb;
color: #2e3242;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
padding: 16px 0;
text-align: center;
}
body.is-login-flow {
background: #0fafaa;
}
.itemList01 {
margin-bottom: 20px;
overflow: hidden;
}
.itemList01__itemListInner {
border: 1px solid #dcdcdc;
max-height: 530px;
overflow-y: scroll;
position: relative;
}
.itemList01__itemListchild {
position: relative;
}
.itemList01__itemListchild + .itemList01__itemListchild {
border-top: 1px solid #dcdcdc;
}
.itemList01__itemRemove {
background: #b2bcca;
border-radius: 10px;
bottom: 0;
cursor: pointer;
display: inline-block;
height: 20px;
margin: auto;
margin: auto;
position: absolute;
right: 10px;
top: 0;
vertical-align: middle;
width: 20px;
}
.itemList01__itemRemove:before, .itemList01__itemRemove:after {
border-top: 3px solid #fff;
bottom: 0;
content: "";
display: block;
height: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 14px;
}
.itemList01__itemRemove:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.itemList01__itemRemove:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.itemList01__inputCheck {
display: none;
}
.itemList01__itemWrap {
display: block;
padding: 10px;
position: relative;
}
.itemList01__itemImg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
height: 50px;
vertical-align: middle;
width: 50px;
}
.itemList01__itemTitle {
display: inline-block;
font-size: 14px;
line-height: 1.5;
margin: 0 0 0 10px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: 523px;
}
.itemSelect01__btnAdd {
margin: 0 auto 70px;
width: 320px;
}
.itemSelect01__modal {
background: #fff;
bottom: 80px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
display: none;
left: 0;
margin: auto;
max-height: 1000px;
position: fixed;
right: 0;
top: 80px;
width: 690px;
z-index: 6000000;
}
.itemSelect01__modal .itemSelect01__btns {
background: #f5f5f5;
padding: 20px;
}
.itemSelect01__modalTitle {
background: #666;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 42px;
padding: 0 10px;
}
.itemSelect01__modalSearch {
background: #f5f5f5;
display: table;
height: 60px;
width: 100%;
}
.itemSelect01__allCheck {
display: table-cell;
padding: 18px 0 17px 20px;
vertical-align: middle;
}
.itemSelect01__allCheckLabel {
font-size: 14px;
}
.itemSelect01__allCheckInput {
margin: 0 10px 0 0;
vertical-align: -6px !important;
}
.itemSelect01__totalNum {
display: table-cell;
font-size: 14px;
padding: 0 0 0 15px;
text-align: right;
vertical-align: middle;
white-space: nowrap;
width: 60px;
}
.itemSelect01__changeView {
display: table-cell;
overflow: hidden;
vertical-align: middle;
width: 70px;
}
.itemSelect01__changeViewBtns {
float: left;
padding: 0 5px;
width: 25px;
}
.itemSelect01__changeViewList, .itemSelect01__changeViewColumn {
border: 1px solid #d8d8d8;
box-sizing: border-box;
height: 25px;
position: relative;
width: 25px;
}
.itemSelect01__changeViewList:focus, .itemSelect01__changeViewColumn:focus {
outline: none;
}
.itemSelect01__changeViewList {
background: #fff;
}
.itemSelect01__changeViewList:before, .itemSelect01__changeViewList:after {
border-bottom: 2px solid #d8d8d8;
border-top: 2px solid #d8d8d8;
content: "";
height: 3px;
left: 4px;
position: absolute;
right: 4px;
}
.itemSelect01__changeViewList:before {
top: 3px;
}
.itemSelect01__changeViewList:after {
bottom: 3px;
}
.itemSelect01__changeViewList.is-active {
background: #0fafaa;
border-color: #0fafaa;
}
.itemSelect01__changeViewList.is-active:before, .itemSelect01__changeViewList.is-active:after {
border-color: #fff;
}
.itemSelect01__changeViewColumn {
background: #d8d8d8;
box-shadow: inset 0 0 0 3px #fff;
}
.itemSelect01__changeViewColumn:before, .itemSelect01__changeViewColumn:after {
background: #fff;
bottom: 3px;
content: "";
left: 3px;
margin: auto;
position: absolute;
right: 3px;
top: 3px;
}
.itemSelect01__changeViewColumn:before {
width: 3px;
}
.itemSelect01__changeViewColumn:after {
height: 3px;
}
.itemSelect01__changeViewColumn.is-active {
background: #fff;
border-color: #0fafaa;
box-shadow: inset 0 0 0 3px #0fafaa;
}
.itemSelect01__changeViewColumn.is-active:before, .itemSelect01__changeViewColumn.is-active:after {
background: #0fafaa;
}
.itemSelect01__search {
display: table-cell;
letter-spacing: -0.4em;
padding: 10px 20px;
vertical-align: middle;
width: 266px;
}
.itemSelect01__searchInput {
border-radius: 4px 0 0 4px;
letter-spacing: normal;
vertical-align: top;
width: 200px;
}
.itemSelect01__searchButton {
border-radius: 0 4px 4px 0;
display: inline-block;
height: 40px;
letter-spacing: normal;
line-height: 1;
vertical-align: top;
width: 66px;
}
.itemSelect01__itemList {
overflow: hidden;
}
.itemSelect01__loading {
background: url("/images/gif-load.gif") no-repeat center center;
clear: both;
display: none;
height: 100px;
width: 100%;
}
.itemSelect01__itemListInner {
bottom: 84px;
box-sizing: border-box;
left: 0;
overflow-y: scroll;
position: absolute;
top: 106px;
width: 100%;
}
.itemSelect01__itemListInner.is-loading .itemSelect01__loading {
display: block;
}
.itemSelect01__itemListInner.is-listView .itemSelect01__itemListchild {
border-bottom: 1px solid #ddd;
position: relative;
}
.itemSelect01__itemListInner.is-listView .itemSelect01__inputCheck {
bottom: 0;
left: 20px;
margin: auto;
position: absolute;
top: 0;
}
.itemSelect01__itemListInner.is-listView .itemSelect01__itemWrap {
box-sizing: border-box;
display: inline-block !important;
line-height: 1 !important;
padding: 20px 20px 20px 65px !important;
width: 100%;
}
.itemSelect01__itemListInner.is-listView .itemSelect01__itemImg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
height: 50px;
margin: 0 18px 0 0;
vertical-align: middle;
width: 50px;
}
.itemSelect01__itemListInner.is-listView .itemSelect01__itemTitle {
display: inline-block;
font-size: 14px;
line-height: 1.5;
max-width: 518px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.itemSelect01__itemListInner.is-columnView {
padding: 20px 0 0 20px;
width: 690px;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__itemListchild {
float: left;
height: 168px;
margin: 0 10px 12px 0;
position: relative;
width: 120px;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__inputCheck {
display: none;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__itemWrap {
border: 1px solid #dcdcdc;
display: block;
height: 168px;
padding: 0 !important;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__inputCheck:checked + .itemSelect01__itemWrap {
border: 2px solid #0fafaa;
height: 164px;
position: relative;
width: 116px;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__inputCheck:checked + .itemSelect01__itemWrap::before {
border-bottom: 6px solid #0fafaa;
border-left: 6px solid #0fafaa;
content: "";
display: block;
height: 25px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 40px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 45px;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__inputCheck:checked + .itemSelect01__itemWrap .itemSelect01__itemImg {
margin: -1px 0 0 -1px;
opacity: 0.3;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__inputCheck:checked + .itemSelect01__itemWrap .itemSelect01__itemTitle {
margin-left: 4px;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__itemImg {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 118px;
width: 118px;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__itemTitle {
font-size: 12px;
line-height: 1.3 !important;
margin: 9px 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.itemSelect01__itemListInner.is-columnView .itemSelect01__loading {
width: 650px;
}
.itemSelect01__btns {
bottom: 0;
left: 0;
margin: 0 auto;
overflow: hidden;
position: absolute;
width: 650px;
}
.itemSelect01__btnsChild {
float: left;
width: 315px;
}
.itemSelect01__btnsChild:first-child {
margin: 0 20px 0 0;
}
.itemSelect01__btnsChildBtn {
width: 313px;
}
.itemSelect02__modal {
position: fixed;
top: 80px;
right: 0;
bottom: 80px;
left: 0;
z-index: 6000000;
display: none;
margin: auto;
border-radius: 8px;
max-width: 744px;
max-height: 1000px;
width: 100%;
background: #fff;
}
.itemSelect02__modalHeader {
position: relative;
border-bottom: 1px solid #f0f1f4;
padding: 23px 12px;
}
.itemSelect02__modalTitle {
font-size: 20px;
font-weight: bold;
line-height: 1;
text-align: center;
}
.itemSelect02__close {
position: absolute;
top: 0;
right: 0;
box-sizing: border-box;
border-radius: 0;
border: none;
padding: 0;
width: 68px;
height: 68px;
background: transparent;
cursor: pointer;
}
.itemSelect02__closeIcon {
font-size: 16px;
}
.itemSelect02__utility {
padding: 0 32px;
}
.itemSelect02__utilityInner {
border-bottom: 1px solid #f0f1f4;
padding: 32px 0 25px;
}
.itemSelect02__allCheck {
margin-top: 12px;
}
.itemSelect02__loading {
background: url("/images/gif-load.gif") no-repeat center center;
display: none;
height: 100px;
width: 100%;
}
.itemSelect02__itemList {
overflow: hidden;
}
.itemSelect02__itemListInner {
bottom: 96px;
box-sizing: border-box;
left: 0;
overflow-y: scroll;
position: absolute;
top: 201px;
padding: 0 32px;
width: 100%;
}
.itemSelect02__itemListInner.is-loading .itemSelect02__loading {
display: block;
}
.itemSelect02__itemListchild {
padding: 16px 16px 16px 0;
}
.itemSelect02__itemListchild:not(:first-child) {
border-top: 1px solid #f0f1f4;
}
.itemSelect02__checkboxLabel {
width: 100%;
}
.itemSelect02__textWrapper {
align-items: center;
}
.itemSelect02__textWrapper::after {
top: 50% !important;
margin-top: -9px;
}
.itemSelect02__itemWrapper {
display: flex;
align-items: center;
margin-left: 16px;
}
.itemSelect02__itemDisabled {
opacity: 0.5;
}
.itemSelect02__itemImg {
width: 54px;
height: 54px;
object-fit: cover;
}
.itemSelect02__textContent {
margin-left: 8px;
}
.itemSelect02__labels {
display: flex;
flex-wrap: wrap;
margin-bottom: 7px;
}
.itemSelect02__label:not(:first-child) {
margin-left: 8px;
}
.itemSelect02__itemTitle {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
font-size: 14px;
font-weight: bold;
line-height: 1.2;
color: #2e3242;
}
.itemSelect02__notice {
margin-top: 6px;
font-size: 12px;
color: #a0a7b4;
}
.itemSelect02__notice + .itemSelect02__notice {
margin-top: 0;
}
.itemSelect02__footer {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
box-sizing: border-box;
margin: 0 auto;
padding: 16px 44px 32px;
max-width: 744px;
width: 100%;
}
.itemSelect02__checkedItem {
display: none;
margin-bottom: 10px;
font-size: 14px;
text-align: center;
}
.itemSelect02__btns {
display: flex;
justify-content: space-between;
}
.itemSelect02__btnsChild {
width: 50%;
}
.itemSelect02__btnsChild:not(:first-child) {
margin-left: 16px;
}
.itemSelect02__private .itemSelect02__imgWrapper {
position: relative;
}
.itemSelect02__private .itemSelect02__imgWrapper::after {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
content: "非公開";
width: 100%;
height: 100%;
background: rgba(38, 43, 59, 0.6);
font-size: 12px;
line-height: 1;
color: #fff;
}
/* -----------------------------------------------------------------
tab01
----------------------------------------------------------------- */
.tab01 {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 24px;
}
.tab01__child {
border-radius: 4px 4px 0 0;
text-align: center;
width: 33%;
background-color: #FFF;
height: 58px;
line-height: 58px;
font-size: 16px;
font-weight: 700;
}
.tab01__link {
border-radius: 4px 4px 0 0;
background-color: #d9dee6;
color: inherit;
display: block;
font-weight: normal;
}
.tab01__link.is-active {
font-weight: bold;
background-color: #FFF;
}
/* -----------------------------------------------------------------
Apps PC/SP共通
----------------------------------------------------------------- */
body {
background: #edeef1;
color: #2e3242;
}
p {
margin: 0;
}
a {
color: #0fafaa;
text-decoration: none;
}
fieldset {
margin: 0;
padding: 0;
}
/* -----------------------------------------------------------------
共通コンポーネント
----------------------------------------------------------------- */
/* セクションタイトル
----------------------------------------------------------------- */
.apps_sectionTitle {
font-size: 16px;
font-weight: bold;
margin: 0 16px 0;
}
.theme-pc .apps_sectionTitle {
margin: 0 0 20px;
}
/* App詳細の見出し
----------------------------------------------------------------- */
.apps_paragraphTitle {
border-bottom: 1px solid #f0f1f4;
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
padding-bottom: 8px;
}
/* 小見出し
----------------------------------------------------------------- */
.apps_lowerTitle {
font-size: 16px;
font-weight: bold;
height: 20px;
line-height: 20px;
margin: 0 16px 20px;
padding-left: 16px;
position: relative;
}
.apps_lowerTitle:before {
background: #2e3242;
border-radius: 2px;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
top: 0;
width: 4px;
}
.theme-pc .apps_lowerTitle {
margin: 0 0 20px;
}
/* インプットタイトル
----------------------------------------------------------------- */
.apps_inputTitle {
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
/* apps_pulldownSelector
----------------------------------------------------------------- */
.apps_pulldownSelector {
position: relative;
}
.apps_pulldownSelector__activeText {
background: #fff;
border: 1px solid #c2c8d2;
border-radius: 8px;
box-sizing: border-box;
cursor: pointer;
height: 40px;
line-height: 40px;
/* 1行制限 */
overflow: hidden;
padding: 0 12px;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
/* 1行制限 */
}
.apps_pulldownSelector__activeText.is_disabled {
cursor: not-allowed;
}
.apps_pulldownSelector__icon {
bottom: 0;
font-size: 14px;
height: 14px;
margin: auto 0;
position: absolute;
right: 10px;
top: 0;
}
.apps_pulldownSelector__icon:before {
vertical-align: top;
}
.apps_pulldownSelector__selectList {
background: #fff;
border: 1px solid #c2c8d2;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
box-sizing: border-box;
display: none;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.apps_pulldownSelector__radio {
display: none;
}
.apps_pulldownSelector__radio:checked + .apps_pulldownSelector__label {
background: #f8f9fa;
}
.apps_pulldownSelector__label {
box-sizing: border-box;
display: block;
height: 40px;
line-height: 40px;
/* 1行制限 */
overflow: hidden;
padding: 0 12px;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
/* 1行制限 */
}
.apps_pulldownSelector__label:hover {
background: #f8f9fa;
}
.theme-pc .apps_pulldownSelector {
width: 231px;
}
/* flex
----------------------------------------------------------------- */
.apps_flex {
display: flex;
justify-content: space-between;
}
.theme-sp .apps_flex__child {
box-sizing: border-box;
padding-right: 8px;
width: 50%;
}
.theme-sp .apps_flex__child + .apps_flex__child {
padding-left: 8px;
padding-right: 0;
}
/* スライダー
----------------------------------------------------------------- */
.apps_slider {
opacity: 0;
overflow: hidden;
}
.apps_slider--single {
opacity: 1;
}
.apps_slider.is_active {
opacity: 1;
overflow: visible;
transition: 0.3s;
}
.apps_slider__img {
height: auto;
width: 100%;
}
.apps_slider--shadow .slick-list {
box-shadow: 0 0 8px rgba(46, 50, 66, 0.3);
transition: 0.3s;
}
.apps_slider--shadow .slick-list:hover {
box-shadow: 0 0 12px rgba(46, 50, 66, 0.5);
transition: 0.3s;
}
.apps_slider .slick-dots {
display: block;
margin: 16px 0 0;
text-align: center;
}
.apps_slider .slick-dots li {
display: inline-block;
padding: 0 4px;
}
.apps_slider .slick-dots button {
-webkit-appearance: none;
background: #c2c8d2;
border: none;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
height: 8px;
padding: 0;
text-indent: -9999px;
width: 8px;
}
.apps_slider .slick-dots .slick-active button {
background: #0fafaa;
}
.theme-pc .apps_slider .slick-list {
border-radius: 3px;
}
.theme-sp .apps_slider {
margin: 0 0 24px;
}
.theme-sp .apps_slider--single {
height: auto;
}
.theme-sp .apps_slider.is_active {
height: auto;
}
/* スライダーローディング
----------------------------------------------------------------- */
.apps_sliderLoading {
height: 90px;
margin: auto;
opacity: 1;
padding: 40px 0;
transition: 0.2s;
width: 90px;
z-index: -1;
}
.apps_sliderLoading.is_active {
opacity: 1;
transition: 0.2s;
z-index: 100;
}
.apps_sliderLoading__svg {
animation: sliderRotate 1s linear infinite;
height: 90px;
transform-origin: center center;
width: 90px;
}
.apps_sliderLoading__imgBase {
fill: none;
stroke: rgba(194, 200, 210, 0.2);
stroke-width: 8;
}
.apps_sliderLoading__imgSpinning {
animation: sliderDash 2s ease-in-out infinite;
fill: none;
stroke: #0fafaa;
stroke-dasharray: 262px;
stroke-dashoffset: 262px;
stroke-linecap: round;
stroke-width: 8;
}
@keyframes sliderRotate {
100% {
transform: rotate(360deg);
}
}
@keyframes sliderDash {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -524px;
}
}
/* インストールローディング
----------------------------------------------------------------- */
.apps_sortLoading {
bottom: 0;
height: 90px;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.2s;
width: 90px;
z-index: -1;
}
.apps_sortLoading.is_active {
opacity: 1;
transition: 0.2s;
z-index: 100;
}
.apps_sortLoading__svg {
animation: rotate 1s linear infinite;
height: 90px;
transform-origin: center center;
width: 90px;
}
.apps_sortLoading__imgBase {
fill: none;
stroke: rgba(194, 200, 210, 0.2);
stroke-width: 8;
}
.apps_sortLoading__imgSpinning {
animation: dash 2s ease-in-out infinite;
fill: none;
stroke: #0fafaa;
stroke-dasharray: 262px;
stroke-dashoffset: 262px;
stroke-linecap: round;
stroke-width: 8;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -524px;
}
}
.theme-sp .apps_sortLoading {
padding: 0 0 50px;
}
/* ラジオボタン
----------------------------------------------------------------- */
.apps_radio {
display: none;
}
.apps_radio + label {
cursor: pointer;
display: inline-block;
font-size: 14px;
min-height: 18px;
padding: 6px 0 0 33px;
position: relative;
}
.apps_radio + label:before {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
box-sizing: border-box;
content: "";
cursor: pointer;
display: block;
height: 24px;
left: 0;
outline: none;
position: absolute;
top: 0;
transition: background-color 0.2s linear;
vertical-align: middle;
width: 24px;
}
.apps_radio:checked + label:before {
background-color: #0fafaa;
border: none;
transition: background-color 0.2s linear;
}
.apps_radio:checked + label:after {
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
content: "";
height: 8px;
left: 8px;
position: absolute;
top: 8px;
width: 8px;
}
/* ボタン
----------------------------------------------------------------- */
.apps_btns {
display: flex;
width: 100%;
}
.apps_btns__child {
box-sizing: border-box;
padding-right: 8px;
width: 50%;
}
.apps_btns__child + .cb_btns__child {
padding-left: 8px;
padding-right: 0;
}
.apps_btns__child .c-primaryBtn,
.apps_btns__child .c-tertiaryBtn {
height: 48px;
line-height: 48px;
padding: 0;
width: 100%;
}
/* ボタン ローディング
----------------------------------------------------------------- */
.apps_loadingBtn {
text-align: center;
}
.apps_loadingBtn__text {
font-weight: bold;
}
.apps_loadingBtn__bounce1, .apps_loadingBtn__bounce2, .apps_loadingBtn__bounce3 {
animation: loadingBounce 1.4s infinite ease-in-out both;
background-color: #fff;
border-radius: 100%;
display: none;
height: 14px;
width: 14px;
}
.apps_loadingBtn__bounce1 {
animation-delay: -0.32s;
}
.apps_loadingBtn__bounce2 {
animation-delay: -0.16s;
}
.apps_loadingBtn.is_loading .apps_loadingBtn__text {
display: none;
}
.apps_loadingBtn.is_loading .apps_loadingBtn__bounce1,
.apps_loadingBtn.is_loading .apps_loadingBtn__bounce2,
.apps_loadingBtn.is_loading .apps_loadingBtn__bounce3 {
display: inline-block;
}
@-webkit-keyframes loadingBounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes loadingBounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* FlashMessage
----------------------------------------------------------------- */
.apps_flashMessage > div {
animation: flashMessage 4s 1 ease-in-out both;
background: #c7e9eb;
font-size: 14px;
font-weight: bold;
height: 47px;
left: 0;
line-height: 47px;
opacity: 0;
position: fixed;
text-align: center;
top: 44px;
width: 100%;
z-index: 100;
}
.apps_flashMessage > div:empty {
display: none;
}
.apps_flashMessage > div:before {
content: "\e91a";
font-family: "baseicon" !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
margin-right: 7px;
speak: none;
text-transform: none;
}
.theme-pc .apps_flashMessage > div {
top: 75px;
}
@-webkit-keyframes flashMessage {
0%, 20% {
opacity: 0;
}
30% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes flashMessage {
0%, 20% {
opacity: 0;
}
30% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* 絞り込み用Appsリストの親
----------------------------------------------------------------- */
.apps_listWrapper {
min-height: 200px;
position: relative;
}
.apps_listWrapper__empty {
color: #c2c8d2;
display: none;
font-size: 14px;
font-weight: bold;
line-height: 200px;
text-align: center;
}
.theme-pc .apps_listWrapper {
min-height: 400px;
}
/* Appsリスト
----------------------------------------------------------------- */
.apps_appsList__child {
background: #fff;
border-top: 1px solid #f0f1f4;
}
.apps_appsList__child:last-child {
border-bottom: 1px solid #f0f1f4;
}
.apps_appsList__link {
box-sizing: border-box;
display: flex;
padding: 16px;
text-decoration: none;
transition: 0.3s;
width: 100%;
}
.apps_appsList__icon {
align-self: center;
flex: none;
height: 40px;
vertical-align: top;
width: 40px;
}
.apps_appsList__box {
align-self: center;
padding: 0 10px;
width: 100%;
}
.apps_appsList__name {
color: #2e3242;
font-size: 14px;
font-weight: bold;
line-height: 1.2;
}
.apps_appsList__text {
-webkit-box-orient: vertical;
color: #2e3242;
display: -webkit-box;
font-size: 12px;
-webkit-line-clamp: 2;
line-height: 1.6;
margin-top: 4px;
overflow: hidden;
word-break: break-word;
}
.apps_appsList__labelWrap {
align-self: center;
flex: none;
width: 70px;
}
.apps_appsList__label {
background: #f0f1f4;
border-radius: 2px;
color: #2e3242;
font-size: 12px;
height: 26px;
line-height: 26px;
text-align: center;
}
.apps_appsList__labelSub {
color: #c2c8d2;
font-size: 10px;
margin-top: 8px;
text-align: center;
line-height: 1.2;
}
.apps_appsList__labelSub:empty {
display: none;
}
.theme-pc .apps_appsList {
margin-bottom: 0;
}
.theme-pc .apps_appsList__child {
border: none;
border-radius: 4px;
}
.theme-pc .apps_appsList__child + .apps_appsList__child {
margin-top: 10px;
}
.theme-pc .apps_appsList__link {
padding: 16px;
}
.theme-pc .apps_appsList__link:hover {
box-shadow: 0 0 8px rgba(46, 50, 66, 0.2);
transition: 0.3s;
}
.theme-pc .apps_appsList__icon {
align-self: center;
height: 40px;
width: 40px;
}
.theme-pc .apps_appsList__box {
width: 548px;
}
.theme-pc .apps_appsList__text {
-webkit-line-clamp: 1;
line-height: 1.2;
width: 100%;
}
.theme-pc .apps_appsList__labelWrap {
width: 100px;
}
/* -----------------------------------------------------------------
Apps Detail
----------------------------------------------------------------- */
/* お問い合わせ先
----------------------------------------------------------------- */
.apps_inquiry {
color: #c2c8d2;
font-size: 14px;
line-height: 1.4;
margin-top: 24px;
padding: 0 16px;
text-align: center;
}
.apps_inquiry__link {
color: #c2c8d2;
text-align: center;
text-decoration: underline;
}
.apps_inquiry__link:hover {
text-decoration: none;
}
.theme-sp .apps_inquiry {
padding: 0 0 32px;
}
/* App詳細のメインエリア
----------------------------------------------------------------- */
.apps_detailBody {
background: #fff;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.apps_detailBody__inner {
margin-top: 32px;
padding: 0 32px 32px;
}
/* App詳細の詳しく見るボタン
----------------------------------------------------------------- */
.apps_detailBtn {
margin: 24px auto;
width: 100%;
}
.theme-pc .apps_detailBtn {
width: 320px;
}
/* App詳細のインストールボタンのラッパー
----------------------------------------------------------------- */
.apps_installBtnWrap {
margin: 32px auto 0;
}
.theme-pc .apps_installBtnWrap {
margin: 0 auto;
width: 320px;
}
/* App詳細のエクストラボタン 各Appのエレメントでapplications_extra_button.ctpに存在
----------------------------------------------------------------- */
.apps_extraBtn {
margin: 32px auto 0;
text-align: center;
}
.apps_extraBtn__link:hover {
text-decoration: underline;
}
/* App詳細のテキスト
----------------------------------------------------------------- */
.app_detailText {
font-size: 14px;
line-height: 1.4;
}
/* App詳細の機能概要のリスト
----------------------------------------------------------------- */
.app_dotList {
margin: 20px 0;
}
.app_dotList__child, .app_dotList > li {
font-size: 14px;
line-height: 1.6;
padding: 0 0 0 24px;
position: relative;
vertical-align: middle;
}
.app_dotList__child + .app_dotList__child, .app_dotList__child + li, .app_dotList > li + .app_dotList__child, .app_dotList > li + li {
margin-top: 8px;
}
.app_dotList__child:before, .app_dotList > li:before {
background: #c2c8d2;
border-radius: 3px;
content: "";
height: 6px;
left: 4px;
position: absolute;
top: 6px;
vertical-align: middle;
width: 6px;
}
/* App詳細のHTML入稿エリア
----------------------------------------------------------------- */
.apps_htmlArea {
font-size: 14px;
line-height: 1.6;
}
.apps_htmlArea h2,
.apps_htmlArea h3,
.apps_htmlArea h4 {
font-size: 14px;
font-weight: bold;
margin: 10px 0;
}
.apps_htmlArea p {
font-size: 14px;
line-height: 1.6;
margin: 20px 0;
}
.apps_htmlArea p + p {
margin-top: 10px;
}
.apps_htmlArea ul li,
.apps_htmlArea ol li {
font-size: 14px;
}
.apps_htmlArea ul li + li,
.apps_htmlArea ol li + li {
margin-top: 10px;
}
.apps_htmlArea img {
display: block;
height: auto;
margin: 32px auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
/* App詳細のこんな方におすすめ
----------------------------------------------------------------- */
.apps_recommendForUser {
margin: 20px 0;
}
.apps_recommendForUser__child, .apps_recommendForUser > li {
font-size: 14px;
line-height: 1.4;
position: relative;
vertical-align: middle;
}
.apps_recommendForUser__child + .apps_recommendForUser__child, .apps_recommendForUser__child + li, .apps_recommendForUser > li + .apps_recommendForUser__child, .apps_recommendForUser > li + li {
margin-top: 8px;
}
.apps_recommendForUser__icon, .apps_recommendForUser > li > i {
color: #c2c8d2;
font-size: 14px;
margin-right: 7px;
}
/* App詳細の使い方動画
----------------------------------------------------------------- */
.app_howToMovie {
margin: 30px 0;
}
.app_howToMovie__iframe {
display: block;
height: 192px;
margin: 0 auto;
max-width: 100%;
width: 343px;
}
.theme-pc .app_howToMovie {
height: 380px;
}
.theme-pc .app_howToMovie__iframe {
height: 100%;
width: 100%;
}
/* App詳細のstep付きリスト
----------------------------------------------------------------- */
.apps_stepList {
margin: 20px 0;
}
.apps_stepList__child, .apps_stepList > li {
padding-left: 65px;
position: relative;
}
.apps_stepList__child + .apps_stepList__child, .apps_stepList > li + .apps_stepList__child {
margin-top: 16px;
}
.apps_stepList__label,
.apps_stepList .label {
background: #f0f1f4;
border-radius: 2px;
display: inline-block;
font-size: 10px;
font-weight: bold;
height: 22px;
left: 0;
line-height: 22px;
margin-right: 10px;
position: absolute;
text-align: center;
top: 0;
width: 55px;
}
.apps_stepList__text,
.apps_stepList .text {
font-size: 14px;
line-height: 1.4;
}
/* App詳細の利用にあたってのご注意
----------------------------------------------------------------- */
.apps_attention {
background: #f0f1f4;
border-radius: 4px;
font-size: 12px;
line-height: 1.6;
margin: 32px 0;
padding: 16px;
}
.apps_attention__title {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
line-height: 1.2;
}
/* インストールローディング
----------------------------------------------------------------- */
.apps_installLoading {
align-items: center;
background: rgba(46, 50, 66, 0.5);
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
.apps_installLoading__svg {
height: 90px;
margin: auto;
opacity: 0;
width: 90px;
}
.apps_installLoading__imgBase {
fill: none;
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 8;
}
.apps_installLoading.is_active {
display: flex;
opacity: 1;
transition: opacity 0.2s;
z-index: 1000;
}
.apps_installLoading.is_active .apps_installLoading__svg {
opacity: 1;
transition: opacity 0.2s;
}
.apps_installLoading__imgProgress {
fill: none;
stroke: #fff;
stroke-dasharray: 800;
stroke-dashoffset: 800;
stroke-linecap: round;
stroke-width: 8;
}
.apps_installLoading__imgProgress.is_start {
animation: progressMotion 1s linear 0s 1;
}
.apps_installLoading__imgProgress.is_stop {
animation-play-state: paused;
}
@keyframes progressMotion {
0% {
stroke-dashoffset: 800;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes progressMotion {
0% {
stroke-dashoffset: 800;
}
100% {
stroke-dashoffset: 0;
}
}
/* スタッフへのメッセージ
----------------------------------------------------------------- */
.apps_installDisableMessage {
margin-bottom: 12px;
text-align: center;
}
.theme-sp .apps_installDisableMessage {
margin-bottom: 10px;
font-size: 12px;
}
.theme-sp .apps_fixedBtn .apps_installDisableMessage {
position: absolute;
top: -21px;
left: 50%;
border-top: 1px solid #d9dee6;
padding-top: 8px;
width: 100%;
background: #fff;
transform: translateX(-50%);
}
.theme-pc .apps_installDisableMessage {
margin-bottom: 14px;
font-size: 12px;
}
.theme-pc .apps_sideInfo__btn .apps_installDisableMessage {
margin-bottom: 8px;
}
/* -----------------------------------------------------------------
Apps Feature
----------------------------------------------------------------- */
/* 特集のAppsリスト
----------------------------------------------------------------- */
.apps_featureList {
margin-top: 20px;
}
.apps_featureList__child + .apps_featureList__child {
margin-top: 40px;
}
.apps_featureList__link {
display: inline-block;
margin-bottom: 20px;
}
.apps_featureList__img {
height: auto;
vertical-align: top;
width: 100%;
}
.apps_featureList__name {
font-size: 14px;
font-weight: bold;
margin-bottom: 12px;
}
.apps_featureList__text {
font-size: 14px;
line-height: 1.6;
margin-bottom: 28px;
}
.theme-pc .apps_featureList__btn {
margin: 0 auto;
width: 320px;
}
/* -----------------------------------------------------------------
Apps Top
----------------------------------------------------------------- */
/* 人気のApps
----------------------------------------------------------------- */
.apps_popular {
display: flex;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
padding: 16px 0 24px;
width: 100%;
}
.apps_popular__child {
width: 240px;
}
.apps_popular__child:first-child {
padding-left: 16px;
}
.apps_popular__child:last-child {
padding-right: 16px;
}
.apps_popular__child + .apps_popular__child {
padding-left: 12px;
}
.apps_popular__link {
display: block;
width: 240px;
}
.apps_popular__img {
border-radius: 3px;
box-shadow: 0 0 8px rgba(46, 50, 66, 0.3);
transition: 0.3s;
width: 240px;
}
.theme-pc .apps_popular {
justify-content: space-between;
overflow-x: visible;
padding: 0;
width: auto;
}
.theme-pc .apps_popular__child {
width: auto;
}
.theme-pc .apps_popular__child:first-child {
padding-left: 0;
}
.theme-pc .apps_popular__child:last-child {
padding-right: 0;
}
.theme-pc .apps_popular__child + .apps_popular__child {
padding-left: 0;
}
.theme-pc .apps_popular__img:hover {
box-shadow: 0 0 12px rgba(46, 50, 66, 0.5);
transition: 0.3s;
}
/* 利用中のApps全体
----------------------------------------------------------------- */
.apps_installedApps {
background: #fff;
border-radius: 4px;
margin-bottom: 32px;
padding-bottom: 8px;
position: relative;
}
.apps_installedApps__title {
color: #2e3242;
font-size: 16px;
font-weight: bold;
padding: 20px 10px 15px;
}
.apps_installedApps__emptyText {
color: #c2c8d2;
font-size: 14px;
line-height: 1.6;
padding: 16px 16px 24px;
text-align: center;
}
.apps_installedApps__edit {
background: none;
border: none;
color: #0fafaa;
font-size: 14px;
height: 20px;
padding: 0;
position: absolute;
right: 10px;
text-decoration: none;
top: 20px;
}
.apps_installedApps__edit.is_disable {
color: #c2c8d2;
}
.apps_installedApps__sortFinish {
background: none;
border: none;
color: #0fafaa;
display: none;
font-size: 14px;
height: 20px;
padding: 0;
position: absolute;
right: 10px;
text-decoration: none;
top: 20px;
}
.apps_installedApps__loginBtn {
margin: 0 16px;
padding: 0 0 16px;
}
.apps_installedApps__cancel {
display: none;
}
.theme-pc .apps_installedApps__emptyText {
padding: 160px 0;
}
.theme-sp .apps_installedApps {
border-radius: 0;
margin-bottom: 40px;
}
.theme-sp .apps_installedApps__title {
border-bottom: 1px solid #f8f9fa;
}
/* リスト並び替え中の背景 */
.apps_sortingBg {
background: rgba(255, 255, 255, 0.7);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 2000;
}
/* リスト並び替え中の状態変化 */
.is_sorting .apps_installedApps {
z-index: 2001;
}
.is_sorting .apps_installedApps__edit {
display: none;
}
.is_sorting .apps_installedApps__sortFinish {
display: block;
}
.is_sorting .apps_usingAppsList__link {
cursor: move;
}
.is_sorting .apps_sortingBg {
display: block;
}
/* インストール済みAppsのリスト部分
----------------------------------------------------------------- */
.apps_usingAppsList {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-gap: 10px 16px;
padding: 0 10px;
}
.apps_usingAppsList__li {
background: #f7f8f9;
}
.apps_usingAppsList__link {
color: #384359;
display: block;
font-size: 12px;
font-weight: 600;
/* 1行制限 */
overflow: hidden;
padding: 10px 14px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
/* 1行制限 */
}
.apps_usingAppsList__link:hover {
background: #f8f9fa;
}
.apps_usingAppsList__img {
margin-right: 10px;
vertical-align: middle;
width: 24px;
}
.apps_usingAppsList__name {
vertical-align: middle;
}
.apps_usingAppsList .ui-sortable-helper {
background: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}
.apps_usingAppsList__placeholder {
background: rgba(15, 175, 170, 0.05);
border: 1px dashed #0fafaa;
height: 50px;
}
.theme-sp .apps_usingAppsList__li.ui-sortable-handle {
touch-action: auto;
}
.theme-sp .apps_usingAppsList__placeholder {
box-sizing: border-box;
width: 50%;
}
/* -----------------------------------------------------------------
Apps PC
----------------------------------------------------------------- */
/* レイアウト
----------------------------------------------------------------- */
div.root main .apps_appsLayout {
flex-direction: row-reverse;
margin: 0 auto 80px;
position: relative;
width: 1000px;
}
div.root main .apps_appsLayout:after {
clear: both;
content: "";
display: block;
}
div.root main .apps_appsLayout__top {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 32px;
}
div.root main .apps_appsLayout__main {
float: right;
position: relative;
width: 744px;
}
div.root main .apps_appsLayout__side {
float: left;
margin-right: 24px;
width: 232px;
}
/* パンくず
----------------------------------------------------------------- */
.apps_breadcrumb {
align-items: center;
display: flex;
height: 20px;
overflow: hidden;
}
.apps_breadcrumb__child {
font-size: 12px;
line-height: 1.4;
}
.apps_breadcrumb__link {
color: #2e3242;
text-decoration: none;
}
.apps_breadcrumb__link:after {
content: ">";
margin: 0 10px;
}
/* snsボタン
----------------------------------------------------------------- */
.app_socialBtn {
align-items: center;
display: flex;
height: 20px;
overflow: hidden;
}
.app_socialBtn__btn {
margin-left: 8px;
}
/* ボタンとセットのinput
----------------------------------------------------------------- */
.apps_inputWithBtn {
display: table;
}
.apps_inputWithBtn--wMax {
width: 100%;
}
.apps_inputWithBtn__inputWrap {
display: table-cell;
vertical-align: top;
}
.apps_inputWithBtn__input {
background: #fff;
border: 1px solid #c2c8d2;
border-radius: 8px 0 0 8px;
border-right: none;
box-sizing: border-box;
font-size: 14px;
height: 40px;
padding: 0 10px;
width: 100%;
}
.apps_inputWithBtn__input:disabled {
cursor: not-allowed;
}
.apps_inputWithBtn__input:focus {
outline: none;
}
.apps_inputWithBtn__btnWrap {
display: table-cell;
vertical-align: top;
width: 100px;
}
.apps_inputWithBtn__btn {
background: #2e3242;
border: none;
border-radius: 0 8px 8px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-size: 14px;
height: 40px;
width: 100%;
}
.apps_inputWithBtn__btn:disabled {
cursor: not-allowed;
}
.apps_inputWithBtn__btn:focus {
outline: none;
}
.apps_inputWithBtn__icon {
margin-right: 8px;
}
/* モーダル
----------------------------------------------------------------- */
.apps_modal {
background: #fff;
border-radius: 8px;
bottom: 100px;
color: #2e3242;
display: flex;
flex-direction: column;
left: 0;
margin: auto;
opacity: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 100px;
transition: opacity 0.3s;
transition: z-index 1s;
width: 744px;
z-index: -1;
}
.apps_modal.is_active {
opacity: 1;
transition: opacity 0.3s;
transition: z-index 0.1;
z-index: 2001;
}
.apps_modal__title {
background: #fff;
border-bottom: 1px solid #f0f1f4;
color: #2e3242;
font-size: 20px;
font-weight: bold;
line-height: 70px;
text-align: center;
}
.apps_modal__text {
font-size: 14px;
}
.apps_modal__inner {
overflow-y: scroll;
padding: 32px;
}
.apps_modal__closeBtn {
align-items: center;
-webkit-appearance: none;
background: none;
border: none;
color: #2e3242;
display: flex;
height: 44px;
padding: 0;
position: absolute;
right: 0;
text-decoration: none;
top: 0;
width: 44px;
}
.apps_modal__closeIcon {
display: block;
font-size: 18px;
margin: auto;
}
.apps_modalBg {
background: rgba(46, 50, 66, 0.5);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 2000;
}
body.is_appsModalActive {
overflow-y: scroll;
position: fixed;
width: 100%;
}
body.is_appsModalActive .apps_modalBg {
display: block;
}
.apps_sliderLoading {
position: absolute;
text-align: center;
width: 100%;
}
.apps_slider {
height: 420px;
}
.apps_slider .slick-track {
height: 390px;
}
.apps__detail-feedbackLinkWrap {
margin: 40px auto 0;
}
/* -----------------------------------------------------------------
Apps Detail
----------------------------------------------------------------- */
/* サイドエリア
----------------------------------------------------------------- */
.apps_sideInfo {
background: #fff;
border-radius: 4px;
overflow: hidden;
padding: 0 0 24px;
position: relative;
width: 232px;
}
.apps_sideInfo.is_fixed {
position: fixed;
top: 114px;
}
.apps_sideInfo.is_fixedBottom {
bottom: 0;
position: absolute;
}
.apps_sideInfo__title {
padding: 40px 0 30px;
text-align: center;
}
.apps_sideInfo__logo {
height: auto;
width: 64px;
}
.apps_sideInfo__titleText {
display: block;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
padding: 8px 16px 0;
}
.apps_sideInfo__btn {
margin: 24px 16px;
}
.apps_sideInfo__btn .c-primaryBtn {
height: 40px;
line-height: 40px;
padding: 0;
width: 100%;
}
/* プラン選択
----------------------------------------------------------------- */
.apps_selectPlan {
line-height: 1.4;
margin: 0 0 32px;
width: 100%;
}
.apps_selectPlan__tr:hover {
background: #f8f9fa;
}
.apps_selectPlan__th {
background: #f0f1f4;
border: 1px solid #ebecee;
font-size: 14px;
font-weight: bold;
height: 42px;
text-align: center;
vertical-align: middle;
}
.apps_selectPlan__td {
border: 1px solid #ebecee;
font-size: 14px;
padding: 16px 12px;
vertical-align: middle;
}
.apps_selectPlan__td--center {
text-align: center;
}
.apps_selectPlan__td--noWrap {
white-space: nowrap;
}
/* App情報リスト
----------------------------------------------------------------- */
.apps_infoList {
border-top: 1px solid #f0f1f4;
font-size: 12px;
line-height: 1.4;
}
.apps_infoList__title {
color: #c2c8d2;
padding: 12px 16px 4px;
vertical-align: middle;
}
.apps_infoList__text {
border-bottom: 1px solid #f0f1f4;
padding: 4px 16px 12px;
}
.apps_infoList__trialdays {
color: #c2c8d2;
margin-top: 4px;
display: block;
}
/* -----------------------------------------------------------------
ログイン・新規登録フォーム
----------------------------------------------------------------- */
.login_form {
position: relative;
}
.login_form__header {
display: none;
}
.login_form__closeBtn {
position: absolute;
right: 0;
top: 0;
}
.login_form__logoWrap {
margin-bottom: 32px;
text-align: center;
}
.login_form__logo {
height: 40px;
vertical-align: top;
}
.login_form__section + .login_form__section {
margin-top: 64px;
}
.login_form__title {
font-size: 16px;
font-weight: bold;
margin-bottom: 16px;
text-align: center;
}
.login_form__inputWrap {
align-items: center;
border: 1px solid #c2c8d2;
border-radius: 4px;
display: flex;
margin-bottom: 16px;
overflow: hidden;
}
.login_form__input {
border: 0;
font-size: 14px;
height: 40px;
padding: 0 0 0 12px;
width: 100%;
}
.login_form__inputIcon {
display: block;
flex: none;
font-size: 14px;
line-height: 1;
padding: 0 0 0 16px;
}
.login_form__inputLayout {
align-items: center;
display: flex;
margin-bottom: 16px;
width: 100%;
}
.login_form__inputSubText {
padding: 0 0 0 8px;
white-space: nowrap;
}
.login_form__domainInput {
box-sizing: border-box;
padding-right: 12px;
width: 100%;
}
.login_form__domainInput .login_form__inputWrap {
margin-bottom: 0;
}
.login_form__domainSelectWrap {
border: 1px solid #c2c8d2;
border-radius: 4px;
box-sizing: border-box;
flex: none;
height: 40px;
position: relative;
width: 160px;
}
.login_form__domainSelectIcon {
align-items: center;
display: flex;
height: 38px;
justify-content: center;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 38px;
z-index: 0;
}
.login_form__domainSelect {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: none;
color: #2e3242;
font-size: 14px;
height: 38px;
padding-left: 12px;
position: relative;
width: 100%;
z-index: 1;
}
.login_form__domainText {
line-height: 40px;
white-space: nowrap;
}
.login_form__reminder {
font-size: 12px;
margin-bottom: 48px;
text-align: right;
}
.login_form__termCheckWrap {
line-height: 25px;
margin-bottom: 24px;
text-align: center;
}
.login_form__termCheck + label {
font-size: 14px;
padding-top: 4px;
}
.login_form__btn {
display: block;
line-height: 48px;
margin: 0 auto;
padding: 0;
width: 320px;
}
/* colorbox setting
----------------------------------------------------------------- */
#colorbox,
#cboxOverlay,
#cboxWrapper {
z-index: 6000000;
}
#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight {
background: #fff;
}
#cboxLoadingOverlay {
background: none;
}
#colorbox {
border-radius: 8px;
box-shadow: 0 0 12px rgba(46, 50, 66, 0.3);
}
#cboxLoadedContent {
margin: 0;
}
#cboxOverlay {
background: rgba(46, 50, 66, 0.5);
}
/*# sourceMappingURL=market.css.map */
PAY IDでログイン
```
*/
.shareBtn {
letter-spacing: -0.4em;
width: 100%;
}
.shareBtn__btn {
border-radius: 6px;
display: inline-block;
letter-spacing: normal;
margin-right: 2%;
padding: 10px 0;
text-align: center;
text-decoration: none;
vertical-align: top;
width: 32%;
}
.shareBtn__btn:last-child {
margin-right: 0;
}
.shareBtn__btn img {
display: inline-block;
height: auto;
padding-right: 12px;
vertical-align: middle;
width: 24px;
}
.shareBtn__btn p {
color: #fff;
display: inline-block;
font-size: 14px;
margin: 0;
vertical-align: middle;
}
.shareBtn__btn .hide {
display: none;
}
.shareBtn__btnIcon {
color: #fff;
display: inline-block;
font-size: 24px;
height: 24px;
margin-right: 5px;
vertical-align: middle;
}
.shareBtn .twitter {
background: #000000;
letter-spacing: 1.4px;
}
.shareBtn .twitter:hover {
opacity: 0.6;
}
.shareBtn .facebook {
background: #315096;
letter-spacing: 1.4px;
}
.shareBtn .facebook:hover {
background-color: #263e70;
}
.shareBtn .directLink {
background: #0fafaa;
letter-spacing: 1.4px;
}
.shareBtn .directLink:hover {
background-color: #0ea596;
cursor: pointer;
}
.shareBtn .shareBtn__wrp {
background: #fff;
border: 3px solid #ddd;
border-radius: 4px;
bottom: -84px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
color: #666;
padding: 8px 10px;
position: absolute;
right: 0;
width: 450px;
z-index: 5;
}
.shareBtn .shareBtn__wrp:hover {
opacity: 2;
}
.shareBtn .shareBtn__wrp:after {
border: solid transparent;
border-bottom-color: #ddd;
border-width: 10px;
bottom: 100%;
content: "";
height: 0;
left: 0;
left: 330px;
pointer-events: none;
position: absolute;
width: 0;
}
.shareBtn .shareBtn__wrp label {
display: block;
font-size: 14px;
margin: 5px 0;
text-align: left;
}
.shareBtn .shareBtn__wrp input {
box-sizing: border-box;
cursor: pointer;
padding: 3px;
width: 100%;
}
/* -----------------------------------------------------------------
flashMessage
----------------------------------------------------------------- */
/*
---
name: flashMessage
category:
- atoms/09_テキスト
tag:
- pc
- sp
---
サイト内にいろいろあるflashMessageをここにまとめる。
flashMessageはサイト内でいろいろなクラス名がつけられているが、
今後は下記のクラスに統一すること。
その際PCとSP共通で変化するので注意。
クラス名はコントローラーで変更可能。 `$this->Session->setFlash` で指定されている部分のクラスの値を変更する。
```html