@charset "UTF-8";
/*
---
name: Sassのcolor変数
category:
- atoms/00_colors
tag:
- pc
- sp
---
Sassのカラー変数一覧
```html
<p class="aigis__notice">現状定義されてるのは以下のとおり。使うものを決めたい・・・</p>
<dl class="aigis__color">
<dt style="background-color:#616062;"></dt>
<dd>$black</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#5C666B;"></dt>
<dd>$txtGray</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#DDDDDD;"></dt>
<dd>$borderGray</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#63C1AE;"></dt>
<dd>$green</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#e2f7f5;"></dt>
<dd>$green02</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#7bc5b6;"></dt>
<dd>$green03</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#0fafaa;"></dt>
<dd>$btnGreen</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#F87E7E;"></dt>
<dd>$red</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#6ACCEB;"></dt>
<dd>$blue</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#FFCF58;"></dt>
<dd>$yellow</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#f0f1f4;"></dt>
<dd>$adminBG</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#e8e8e8;"></dt>
<dd>$gray01</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#cccccc;"></dt>
<dd>$gray02</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#bbbbbb;"></dt>
<dd>$gray03</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#666666;"></dt>
<dd>$gray04</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#dcdcdc;"></dt>
<dd>$gray05</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#A0A0A0;"></dt>
<dd>$gray06</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#0063f0;"></dt>
<dd>$payblue</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#00a099;"></dt>
<dd>$hGreen</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#F3F3F3;"></dt>
<dd>$hGray01</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#0E5AC7;"></dt>
<dd>$hPayBlue</dd>
</dl>
```
*/
@font-face {
font-family: "baseicon";
font-style: normal;
font-weight: normal;
src: url("https://static.thebase.in/font/v1/baseicon.eot?htu8ks");
src: url("https://static.thebase.in/font/v1/baseicon.eot?htu8ks#iefix") format("embedded-opentype"), url("https://static.thebase.in/font/v1/baseicon.ttf?htu8ks") format("truetype"), url("https://static.thebase.in/font/v1/baseicon.woff?htu8ks") format("woff"), url("https://static.thebase.in/font/v1/baseicon.svg?htu8ks#baseicon") format("svg");
}
@font-face {
font-family: "baseappsicon";
font-style: normal;
font-weight: normal;
src: url("https://static.thebase.in/font/v1/baseappsicon.eot?gce0lq");
src: url("https://static.thebase.in/font/v1/baseappsicon.eot?gce0lq#iefix") format("embedded-opentype"), url("https://static.thebase.in/font/v1/baseappsicon.ttf?gce0lq") format("truetype"), url("https://static.thebase.in/font/v1/baseappsicon.woff?gce0lq") format("woff"), url("https://static.thebase.in/font/v1/baseappsicon.svg?gce0lq#baseappsicon") format("svg");
}
@font-face {
font-family: "baseicon";
font-style: normal;
font-weight: normal;
src: url("https://static.thebase.in/font/v1/baseicon.eot?htu8ks");
src: url("https://static.thebase.in/font/v1/baseicon.eot?htu8ks#iefix") format("embedded-opentype"), url("https://static.thebase.in/font/v1/baseicon.ttf?htu8ks") format("truetype"), url("https://static.thebase.in/font/v1/baseicon.woff?htu8ks") format("woff"), url("https://static.thebase.in/font/v1/baseicon.svg?htu8ks#baseicon") format("svg");
}
[class^=i_]:before,
[class*=" i_"]:before {
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
/* use !important to prevent issues with browser extensions that change fonts */
speak: none;
text-transform: none;
}
/*
---
name: アイコンフォント
category:
- atoms/06_アイコン
tag:
- pc
- sp
---
アイコンフォント一覧
`<i>`タグにクラスを指定
```html
<p class="aigis__notice">icomoonで作成・更新</p>
<table class="aigis__fontTable">
<tr>
<th>クラス名</th>
<th>アイコンフォント</th>
</tr>
<tr>
<th>i_gear01</th>
<td><i class="i_gear01"></i></td>
</tr>
<tr>
<th>i_graph01</th>
<td><i class="i_graph01"></i></td>
</tr>
<tr>
<th>i_item01</th>
<td><i class="i_item01"></i></td>
</tr>
<tr>
<th>i_list01</th>
<td><i class="i_list01"></i></td>
</tr>
<tr>
<th>i_mobile01</th>
<td><i class="i_mobile01"></i></td>
</tr>
<tr>
<th>i_money01</th>
<td><i class="i_money01"></i></td>
</tr>
<tr>
<th>i_page01</th>
<td><i class="i_page01"></i></td>
</tr>
<tr>
<th>i_tipi01</th>
<td><i class="i_tipi01"></i></td>
</tr>
<tr>
<th>i_tool01</th>
<td><i class="i_tool01"></i></td>
</tr>
<tr>
<th>i_menu01</th>
<td><i class="i_menu01"></i></td>
</tr>
<tr>
<th>i_crown01</th>
<td><i class="i_crown01"></i></td>
</tr>
<tr>
<th>i_shop01</th>
<td><i class="i_shop01"></i></td>
</tr>
<tr>
<th>i_attention</th>
<td><i class="i_attention"></i></td>
</tr>
<tr>
<th>i_caution</th>
<td><i class="i_caution"></i></td>
</tr>
<tr>
<th>i_check-circle</th>
<td><i class="i_check-circle"></i></td>
</tr>
<tr>
<th>i_closs-circle</th>
<td><i class="i_closs-circle"></i></td>
</tr>
<tr>
<th>i_information</th>
<td><i class="i_information"></i></td>
</tr>
<tr>
<th>i_notification</th>
<td><i class="i_notification"></i></td>
</tr>
<tr>
<th>i_plus-circle</th>
<td><i class="i_plus-circle"></i></td>
</tr>
<tr>
<th>i_question</th>
<td><i class="i_question"></i></td>
</tr>
<tr>
<th>i_tipi</th>
<td><i class="i_tipi"></i></td>
</tr>
<tr>
<th>i_camera</th>
<td><i class="i_camera"></i></td>
</tr>
<tr>
<th>i_check</th>
<td><i class="i_check"></i></td>
</tr>
<tr>
<th>i_clock</th>
<td><i class="i_clock"></i></td>
</tr>
<tr>
<th>i_cross</th>
<td><i class="i_cross"></i></td>
</tr>
<tr>
<th>i_drag</th>
<td><i class="i_drag"></i></td>
</tr>
<tr>
<th>i_email</th>
<td><i class="i_email"></i></td>
</tr>
<tr>
<th>i_loupe</th>
<td><i class="i_loupe"></i></td>
</tr>
<tr>
<th>i_menu</th>
<td><i class="i_menu"></i></td>
</tr>
<tr>
<th>i_pencil</th>
<td><i class="i_pencil"></i></td>
</tr>
<tr>
<th>i_plus</th>
<td><i class="i_plus"></i></td>
</tr>
<tr>
<th>i_share</th>
<td><i class="i_share"></i></td>
</tr>
<tr>
<th>i_trash</th>
<td><i class="i_trash"></i></td>
</tr>
<tr>
<th>i_logout</th>
<td><i class="i_logout"></i></td>
</tr>
<tr>
<th>i_newtab</th>
<td><i class="i_newtab"></i></td>
</tr>
<tr>
<th>i_pin</th>
<td><i class="i_pin"></i></td>
</tr>
<tr>
<th>i_cart</th>
<td><i class="i_cart"></i></td>
</tr>
<tr>
<th>i_page02</th>
<td><i class="i_page02"></i></td>
</tr>
<tr>
<th>i_signin01</th>
<td><i class="i_signin01"></i></td>
</tr>
<tr>
<th>i_pencil02</th>
<td><i class="i_pencil02"></i></td>
</tr>
<tr>
<th>i_page03</th>
<td><i class="i_page03"></i></td>
</tr>
<tr>
<th>i_login01</th>
<td><i class="i_login01"></i></td>
</tr>
<tr>
<th>i_book01</th>
<td><i class="i_book01"></i></td>
</tr>
<tr>
<th>i_logout02</th>
<td><i class="i_logout02"></i></td>
</tr>
<tr>
<th>i_arrow-down</th>
<td><i class="i_arrow-down"></i></td>
</tr>
<tr>
<th>i_arrow-left</th>
<td><i class="i_arrow-left"></i></td>
</tr>
<tr>
<th>i_arrow-right</th>
<td><i class="i_arrow-right"></i></td>
</tr>
<tr>
<th>i_arrow-up</th>
<td><i class="i_arrow-up"></i></td>
</tr>
<tr>
<th>i_attention-triangle</th>
<td><i class="i_attention-triangle"></i></td>
</tr>
<tr>
<th>i_attention-circle</th>
<td><i class="i_attention-circle"></i></td>
</tr>
<tr>
<th>i_beginner</th>
<td><i class="i_beginner"></i></td>
</tr>
<tr>
<th>i_calendar</th>
<td><i class="i_calendar"></i></td>
</tr>
<tr>
<th>i_card</th>
<td><i class="i_card"></i></td>
</tr>
<tr>
<th>i_coins</th>
<td><i class="i_coins"></i></td>
</tr>
<tr>
<th>i_cross-circle</th>
<td><i class="i_cross-circle"></i></td>
</tr>
<tr>
<th>i_edit</th>
<td><i class="i_edit"></i></td>
</tr>
<tr>
<th>i_file</th>
<td><i class="i_file"></i></td>
</tr>
<tr>
<th>i_heart</th>
<td><i class="i_heart"></i></td>
</tr>
<tr>
<th>i_information-circle</th>
<td><i class="i_information-circle"></i></td>
</tr>
<tr>
<th>i_link-add</th>
<td><i class="i_link-add"></i></td>
</tr>
<tr>
<th>i_link</th>
<td><i class="i_link"></i></td>
</tr>
<tr>
<th>i_movie</th>
<td><i class="i_movie"></i></td>
</tr>
<tr>
<th>i_question-circle</th>
<td><i class="i_question-circle"></i></td>
</tr>
<tr>
<th>i_star</th>
<td><i class="i_star"></i></td>
</tr>
<tr>
<th>i_truck</th>
<td><i class="i_truck"></i></td>
</tr>
<tr>
<th>i_yen-circle</th>
<td><i class="i_yen-circle"></i></td>
</tr>
<tr>
<th>i_bell</th>
<td><i class="i_bell"></i></td>
</tr>
<tr>
<th>i_book</th>
<td><i class="i_book"></i></td>
</tr>
<tr>
<th>i_caret-down</th>
<td><i class="i_caret-down"></i></td>
</tr>
<tr>
<th>i_caret-left</th>
<td><i class="i_caret-left"></i></td>
</tr>
<tr>
<th>i_caret-right</th>
<td><i class="i_caret-right"></i></td>
</tr>
<tr>
<th>i_caret-up</th>
<td><i class="i_caret-up"></i></td>
</tr>
<tr>
<th>i_crown</th>
<td><i class="i_crown"></i></td>
</tr>
<tr>
<th>i_designmarket</th>
<td><i class="i_designmarket"></i></td>
</tr>
<tr>
<th>i_gear</th>
<td><i class="i_gear"></i></td>
</tr>
<tr>
<th>i_graph</th>
<td><i class="i_graph"></i></td>
</tr>
<tr>
<th>i_item</th>
<td><i class="i_item"></i></td>
</tr>
<tr>
<th>i_list</th>
<td><i class="i_list"></i></td>
</tr>
<tr>
<th>i_message</th>
<td><i class="i_message"></i></td>
</tr>
<tr>
<th>i_mobile</th>
<td><i class="i_mobile"></i></td>
</tr>
<tr>
<th>i_page</th>
<td><i class="i_page"></i></td>
</tr>
<tr>
<th>i_shop</th>
<td><i class="i_shop"></i></td>
</tr>
<tr>
<th>i_shopbag</th>
<td><i class="i_shopbag"></i></td>
</tr>
<tr>
<th>i_tipi-square</th>
<td><i class="i_tipi-square"></i></td>
</tr>
<tr>
<th>i_tool</th>
<td><i class="i_tool"></i></td>
</tr>
<tr>
<th>i_angle-down</th>
<td><i class="i_angle-down"></i></td>
</tr>
<tr>
<th>i_angle-left</th>
<td><i class="i_angle-left"></i></td>
</tr>
<tr>
<th>i_angle-right</th>
<td><i class="i_angle-right"></i></td>
</tr>
<tr>
<th>i_angle-up</th>
<td><i class="i_angle-up"></i></td>
</tr>
<tr>
<th>i_dropper</th>
<td><i class="i_dropper"></i></td>
</tr>
<tr>
<th>i_ameba</th>
<td><i class="i_ameba"></i></td>
</tr>
<tr>
<th>i_facebook-square</th>
<td><i class="i_facebook-square"></i></td>
</tr>
<tr>
<th>i_facebook</th>
<td><i class="i_facebook"></i></td>
</tr>
<tr>
<th>i_instagram</th>
<td><i class="i_instagram"></i></td>
</tr>
<tr>
<th>i_line</th>
<td><i class="i_line"></i></td>
</tr>
<tr>
<th>i_twitter</th>
<td><i class="i_twitter"></i></td>
</tr>
<tr>
<th>i_angle-double-left</th>
<td><i class="i_angle-double-left"></i></td>
</tr>
<tr>
<th>i_angle-double-right</th>
<td><i class="i_angle-double-right"></i></td>
</tr>
<tr>
<th>i_asterisk</th>
<td><i class="i_asterisk"></i></td>
</tr>
<tr>
<th>i_moon</th>
<td><i class="i_moon"></i></td>
</tr>
<tr>
<th>i_sun</th>
<td><i class="i_sun"></i></td>
</tr>
<tr>
<th>i_preview</th>
<td><i class="i_preview"></i></td>
</tr>
<tr>
<th>i_image</th>
<td><i class="i_image"></i></td>
</tr>
<tr>
<th>i_phone</th>
<td><i class="i_phone"></i></td>
</tr>
<tr>
<th>i_send</th>
<td><i class="i_send"></i></td>
</tr>
<tr>
<th>i_like</th>
<td><i class="i_like"></i></td>
</tr>
<tr>
<th>i_grid</th>
<td><i class="i_grid"></i></td>
</tr>
<tr>
<th>i_dislike</th>
<td><i class="i_dislike"></i></td>
</tr>
<tr>
<th>i_copy</th>
<td><i class="i_copy"></i></td>
</tr>
<tr>
<th>i_checkbox</th>
<td><i class="i_checkbox"></i></td>
</tr>
<tr>
<th>i_minus</th>
<td><i class="i_minus"></i></td>
</tr>
<tr>
<th>i_meatball</th>
<td><i class="i_meatball"></i></td>
</tr>
<tr>
<th>i_lock</th>
<td><i class="i_lock"></i></td>
</tr>
<tr>
<th>i_mail</th>
<td><i class="i_mail"></i></td>
</tr>
</table>
```
*/
.i_gear01:before {
font-family: "baseicon" !important;
content: "\e900";
}
.i_graph01:before {
font-family: "baseicon" !important;
content: "\e901";
}
.i_item01:before {
font-family: "baseicon" !important;
content: "\e902";
}
.i_list01:before {
font-family: "baseicon" !important;
content: "\e903";
}
.i_mobile01:before {
font-family: "baseicon" !important;
content: "\e904";
}
.i_money01:before {
font-family: "baseicon" !important;
content: "\e905";
}
.i_page01:before {
font-family: "baseicon" !important;
content: "\e906";
}
.i_tipi01:before {
font-family: "baseicon" !important;
content: "\e907";
}
.i_tool01:before {
font-family: "baseicon" !important;
content: "\e908";
}
.i_menu01:before {
font-family: "baseicon" !important;
content: "\e909";
}
.i_crown01:before {
font-family: "baseicon" !important;
content: "\e90a";
}
.i_shop01:before {
font-family: "baseicon" !important;
content: "\e90b";
}
.i_attention:before {
font-family: "baseicon" !important;
content: "\e918";
}
.i_caution:before {
font-family: "baseicon" !important;
content: "\e919";
}
.i_check-circle:before {
font-family: "baseicon" !important;
content: "\e91a";
}
.i_closs-circle:before {
font-family: "baseicon" !important;
content: "\e91b";
}
.i_information:before {
font-family: "baseicon" !important;
content: "\e91c";
}
.i_notification:before {
font-family: "baseicon" !important;
content: "\e91d";
}
.i_plus-circle:before {
font-family: "baseicon" !important;
content: "\e91e";
}
.i_question:before {
font-family: "baseicon" !important;
content: "\e91f";
}
.i_skip:before {
font-family: "baseicon" !important;
content: "\e920";
}
.i_sort:before {
font-family: "baseicon" !important;
content: "\e921";
}
.i_tipi:before {
font-family: "baseicon" !important;
content: "\e922";
}
.i_camera:before {
font-family: "baseicon" !important;
content: "\e90c";
}
.i_check:before {
font-family: "baseicon" !important;
content: "\e90d";
}
.i_clock:before {
font-family: "baseicon" !important;
content: "\e90e";
}
.i_cross:before {
font-family: "baseicon" !important;
content: "\e90f";
}
.i_drag:before {
font-family: "baseicon" !important;
content: "\e910";
}
.i_email:before {
font-family: "baseicon" !important;
content: "\e911";
}
.i_loupe:before {
font-family: "baseicon" !important;
content: "\e912";
}
.i_menu:before {
font-family: "baseicon" !important;
content: "\e913";
}
.i_pencil:before {
font-family: "baseicon" !important;
content: "\e914";
}
.i_plus:before {
font-family: "baseicon" !important;
content: "\e915";
}
.i_share:before {
font-family: "baseicon" !important;
content: "\e916";
}
.i_trash:before {
font-family: "baseicon" !important;
content: "\e917";
}
.i_logout:before {
font-family: "baseicon" !important;
content: "\e927";
}
.i_newtab:before {
font-family: "baseicon" !important;
content: "\e928";
}
.i_pin:before {
font-family: "baseicon" !important;
content: "\e92a";
}
.i_cart:before {
font-family: "baseicon" !important;
content: "\e929";
}
.i_page02:before {
font-family: "baseicon" !important;
content: "\e92b";
}
.i_signin01:before {
font-family: "baseicon" !important;
content: "\e930";
}
.i_pencil02:before {
font-family: "baseicon" !important;
content: "\e92f";
}
.i_page03:before {
font-family: "baseicon" !important;
content: "\e92e";
}
.i_login01:before {
font-family: "baseicon" !important;
content: "\e92d";
}
.i_book01:before {
font-family: "baseicon" !important;
content: "\e92c";
}
.i_logout02:before {
font-family: "baseicon" !important;
content: "\e931";
}
.i_arrow-down:before {
font-family: "baseicon" !important;
content: "\e923";
}
.i_arrow-left:before {
font-family: "baseicon" !important;
content: "\e924";
}
.i_arrow-right:before {
font-family: "baseicon" !important;
content: "\e925";
}
.i_arrow-up:before {
font-family: "baseicon" !important;
content: "\e926";
}
.i_attention-triangle:before {
font-family: "baseicon" !important;
content: "\e932";
}
.i_attention-circle:before {
font-family: "baseicon" !important;
content: "\e933";
}
.i_beginner:before {
font-family: "baseicon" !important;
content: "\e934";
}
.i_calendar:before {
font-family: "baseicon" !important;
content: "\e935";
}
.i_card:before {
font-family: "baseicon" !important;
content: "\e936";
}
.i_coins:before {
font-family: "baseicon" !important;
content: "\e938";
}
.i_cross-circle:before {
font-family: "baseicon" !important;
content: "\e939";
}
.i_edit:before {
font-family: "baseicon" !important;
content: "\e93a";
}
.i_file:before {
font-family: "baseicon" !important;
content: "\e93b";
}
.i_heart:before {
font-family: "baseicon" !important;
content: "\e93c";
}
.i_information-circle:before {
font-family: "baseicon" !important;
content: "\e93d";
}
.i_link-add:before {
font-family: "baseicon" !important;
content: "\e93e";
}
.i_link:before {
font-family: "baseicon" !important;
content: "\e93f";
}
.i_movie:before {
font-family: "baseicon" !important;
content: "\e940";
}
.i_question-circle:before {
font-family: "baseicon" !important;
content: "\e941";
}
.i_star:before {
font-family: "baseicon" !important;
content: "\e942";
}
.i_truck:before {
font-family: "baseicon" !important;
content: "\e943";
}
.i_yen-circle:before {
font-family: "baseicon" !important;
content: "\e944";
}
.i_bell:before {
font-family: "baseicon" !important;
content: "\e937";
}
.i_book:before {
font-family: "baseicon" !important;
content: "\e945";
}
.i_caret-down:before {
font-family: "baseicon" !important;
content: "\e946";
}
.i_caret-left:before {
font-family: "baseicon" !important;
content: "\e947";
}
.i_caret-right:before {
font-family: "baseicon" !important;
content: "\e948";
}
.i_caret-up:before {
font-family: "baseicon" !important;
content: "\e949";
}
.i_crown:before {
font-family: "baseicon" !important;
content: "\e94a";
}
.i_designmarket:before {
font-family: "baseicon" !important;
content: "\e94b";
}
.i_gear:before {
font-family: "baseicon" !important;
content: "\e94c";
}
.i_graph:before {
font-family: "baseicon" !important;
content: "\e94d";
}
.i_item:before {
font-family: "baseicon" !important;
content: "\e94e";
}
.i_list:before {
font-family: "baseicon" !important;
content: "\e94f";
}
.i_message:before {
font-family: "baseicon" !important;
content: "\e950";
}
.i_mobile:before {
font-family: "baseicon" !important;
content: "\e951";
}
.i_page:before {
font-family: "baseicon" !important;
content: "\e952";
}
.i_shop:before {
font-family: "baseicon" !important;
content: "\e953";
}
.i_shopbag:before {
font-family: "baseicon" !important;
content: "\e954";
}
.i_tipi-square:before {
font-family: "baseicon" !important;
content: "\e955";
}
.i_tool:before {
font-family: "baseicon" !important;
content: "\e956";
}
.i_angle-down:before {
font-family: "baseicon" !important;
content: "\e957";
}
.i_angle-left:before {
font-family: "baseicon" !important;
content: "\e958";
}
.i_angle-right:before {
font-family: "baseicon" !important;
content: "\e959";
}
.i_angle-up:before {
font-family: "baseicon" !important;
content: "\e95a";
}
.i_dropper:before {
font-family: "baseicon" !important;
content: "\e95b";
}
.i_ameba:before {
font-family: "baseicon" !important;
content: "\e95c";
}
.i_facebook-square:before {
font-family: "baseicon" !important;
content: "\e95d";
}
.i_facebook:before {
font-family: "baseicon" !important;
content: "\e95e";
}
.i_instagram:before {
font-family: "baseicon" !important;
content: "\e95f";
}
.i_line:before {
font-family: "baseicon" !important;
content: "\e960";
}
.i_twitter:before {
font-family: "baseicon" !important;
content: "\e961";
}
.i_angle-double-left:before {
font-family: "baseicon" !important;
content: "\e962";
}
.i_angle-double-right:before {
font-family: "baseicon" !important;
content: "\e963";
}
.i_asterisk:before {
font-family: "baseicon" !important;
content: "\e964";
}
.i_moon:before {
font-family: "baseicon" !important;
content: "\e965";
}
.i_sun:before {
font-family: "baseicon" !important;
content: "\e966";
}
.i_preview:before {
font-family: "baseicon" !important;
content: "\e967";
}
.i_image:before {
font-family: "baseicon" !important;
content: "\e968";
}
.i_phone:before {
font-family: "baseicon" !important;
content: "\e969";
}
.i_send:before {
font-family: "baseicon" !important;
content: "\e96a";
}
.i_like:before {
font-family: "baseicon" !important;
content: "\e96f";
}
.i_grid:before {
font-family: "baseicon" !important;
content: "\e96e";
}
.i_dislike:before {
font-family: "baseicon" !important;
content: "\e96d";
}
.i_copy:before {
font-family: "baseicon" !important;
content: "\e96c";
}
.i_checkbox:before {
font-family: "baseicon" !important;
content: "\e96b";
}
.i_minus:before {
font-family: "baseicon" !important;
content: "\e973";
}
.i_meatball:before {
font-family: "baseicon" !important;
content: "\e972";
}
.i_lock:before {
font-family: "baseicon" !important;
content: "\e971";
}
.i_mail:before {
font-family: "baseicon" !important;
content: "\e970";
}
@font-face {
font-family: "baseappsicon";
font-style: normal;
font-weight: normal;
src: url("https://static.thebase.in/font/v1/baseappsicon.eot?gce0lq");
src: url("https://static.thebase.in/font/v1/baseappsicon.eot?gce0lq#iefix") format("embedded-opentype"), url("https://static.thebase.in/font/v1/baseappsicon.ttf?gce0lq") format("truetype"), url("https://static.thebase.in/font/v1/baseappsicon.woff?gce0lq") format("woff"), url("https://static.thebase.in/font/v1/baseappsicon.svg?gce0lq#baseappsicon") format("svg");
}
[class^=i_app_]:before,
[class*=" i_app_"]:before {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "baseappsicon" !important;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-transform: none;
}
/*
---
name: Appsアイコンフォント
category:
- atoms/06_アイコン
tag:
- pc
- sp
---
Appsアイコンフォント一覧
`<i>`タグにクラスを指定
```html
<p class="aigis__notice">icomoonで作成・更新</p>
<table class="aigis__fontTable">
<tr>
<th>クラス名</th>
<th>アイコンフォント</th>
</tr>
<tr>
<th>i_app_AgeVerification</th>
<td><i class="i_app_AgeVerification"></i></td>
</tr>
<tr>
<th>i_app_BaseEraser</th>
<td><i class="i_app_BaseEraser"></i></td>
</tr>
<tr>
<th>i_app_Blog</th>
<td><i class="i_app_Blog"></i></td>
</tr>
<tr>
<th>i_app_Chargeback</th>
<td><i class="i_app_Chargeback"></i></td>
</tr>
<tr>
<th>i_app_ClubT</th>
<td><i class="i_app_ClubT"></i></td>
</tr>
<tr>
<th>i_app_Conversion</th>
<td><i class="i_app_Conversion"></i></td>
</tr>
<tr>
<th>i_app_Coupon</th>
<td><i class="i_app_Coupon"></i></td>
</tr>
<tr>
<th>i_app_CsvLite</th>
<td><i class="i_app_CsvLite"></i></td>
</tr>
<tr>
<th>i_app_DeliveryNote</th>
<td><i class="i_app_DeliveryNote"></i></td>
</tr>
<tr>
<th>i_app_Download</th>
<td><i class="i_app_Download"></i></td>
</tr>
<tr>
<th>i_app_GiftKit</th>
<td><i class="i_app_GiftKit"></i></td>
</tr>
<tr>
<th>i_app_GoogleAd</th>
<td><i class="i_app_GoogleAd"></i></td>
</tr>
<tr>
<th>i_app_GoogleAdCoupon</th>
<td><i class="i_app_GoogleAdCoupon"></i></td>
</tr>
<tr>
<th>i_app_GoogleAnalytics</th>
<td><i class="i_app_GoogleAnalytics"></i></td>
</tr>
<tr>
<th>i_app_I18n</th>
<td><i class="i_app_I18n"></i></td>
</tr>
<tr>
<th>i_app_Interview</th>
<td><i class="i_app_Interview"></i></td>
</tr>
<tr>
<th>i_app_ItemCategory</th>
<td><i class="i_app_ItemCategory"></i></td>
</tr>
<tr>
<th>i_app_ItemLabel</th>
<td><i class="i_app_ItemLabel"></i></td>
</tr>
<tr>
<th>i_app_ItemQuantityLimit</th>
<td><i class="i_app_ItemQuantityLimit"></i></td>
</tr>
<tr>
<th>i_app_Logo</th>
<td><i class="i_app_Logo"></i></td>
</tr>
<tr>
<th>i_app_MailMagazine</th>
<td><i class="i_app_MailMagazine"></i></td>
</tr>
<tr>
<th>i_app_Meta</th>
<td><i class="i_app_Meta"></i></td>
</tr>
<tr>
<th>i_app_MyDomain</th>
<td><i class="i_app_MyDomain"></i></td>
</tr>
<tr>
<th>i_app_OfflinePayment</th>
<td><i class="i_app_OfflinePayment"></i></td>
</tr>
<tr>
<th>i_app_Photo</th>
<td><i class="i_app_Photo"></i></td>
</tr>
<tr>
<th>i_app_Review</th>
<td><i class="i_app_Review"></i></td>
</tr>
<tr>
<th>i_app_Sale</th>
<td><i class="i_app_Sale"></i></td>
</tr>
<tr>
<th>i_app_SavingsPlus</th>
<td><i class="i_app_SavingsPlus"></i></td>
</tr>
<tr>
<th>i_app_Search</th>
<td><i class="i_app_Search"></i></td>
</tr>
<tr>
<th>i_app_SecretEc</th>
<td><i class="i_app_SecretEc"></i></td>
</tr>
<tr>
<th>i_app_ShippingFee</th>
<td><i class="i_app_ShippingFee"></i></td>
</tr>
<tr>
<th>i_app_SpCase</th>
<td><i class="i_app_SpCase"></i></td>
</tr>
<tr>
<th>i_app_Template</th>
<td><i class="i_app_Template"></i></td>
</tr>
<tr>
<th>i_app_YahooAd</th>
<td><i class="i_app_YahooAd"></i></td>
</tr>
<tr>
<th>i_app_DeliveryDate</th>
<td><i class="i_app_DeliveryDate"></i></td>
</tr>
<tr>
<th>i_app_Ezlogi</th>
<td><i class="i_app_Ezlogi"></i></td>
</tr>
<tr>
<th>i_app_Subscription</th>
<td><i class="i_app_Subscription"></i></td>
</tr>
<tr>
<th>i_app_BaseLive</th>
<td><i class="i_app_BaseLive"></i></td>
</tr>
<tr>
<th>i_app_CoinFunding</th>
<td><i class="i_app_CoinFunding"></i></td>
</tr>
<tr>
<th>i_app_BulkDispatch</th>
<td><i class="i_app_BulkDispatch"></i></td>
</tr>
<tr>
<th>i_app_Message</th>
<td><i class="i_app_Message"></i></td>
</tr>
<tr>
<th>i_app_YamatoDelivery</th>
<td><i class="i_app_YamatoDelivery"></i></td>
</tr>
</table>
```
*/
.i_app_AgeVerification:before {
content: "\e900";
}
.i_app_BaseEraser:before {
content: "\e901";
}
.i_app_Blog:before {
content: "\e902";
}
.i_app_Chargeback:before {
content: "\e903";
}
.i_app_ClubT:before {
content: "\e904";
}
.i_app_Conversion:before {
content: "\e905";
}
.i_app_Coupon:before {
content: "\e906";
}
.i_app_CsvLite:before {
content: "\e907";
}
.i_app_DeliveryNote:before {
content: "\e908";
}
.i_app_Download:before {
content: "\e909";
}
.i_app_GiftKit:before {
content: "\e90a";
}
.i_app_GoogleAd:before {
content: "\e90b";
}
.i_app_GoogleAdCoupon:before {
content: "\e90c";
}
.i_app_GoogleAnalytics:before {
content: "\e90d";
}
.i_app_I18n:before {
content: "\e90e";
}
.i_app_Interview:before {
content: "\e90f";
}
.i_app_ItemCategory:before {
content: "\e910";
}
.i_app_ItemLabel:before {
content: "\e911";
}
.i_app_ItemQuantityLimit:before {
content: "\e912";
}
.i_app_Logo:before {
content: "\e913";
}
.i_app_MailMagazine:before {
content: "\e914";
}
.i_app_Meta:before {
content: "\e915";
}
.i_app_MyDomain:before {
content: "\e916";
}
.i_app_OfflinePayment:before {
content: "\e917";
}
.i_app_Photo:before {
content: "\e918";
}
.i_app_Review:before {
content: "\e919";
}
.i_app_Sale:before {
content: "\e91a";
}
.i_app_SavingsPlus:before {
content: "\e91b";
}
.i_app_Search:before {
content: "\e91c";
}
.i_app_SecretEc:before {
content: "\e91d";
}
.i_app_ShippingFee:before {
content: "\e91e";
}
.i_app_SpCase:before {
content: "\e91f";
}
.i_app_Template:before {
content: "\e920";
}
.i_app_YahooAd:before {
content: "\e921";
}
.i_app_DeliveryDate:before {
content: "\e922";
}
.i_app_Ezlogi:before {
content: "\e923";
}
.i_app_Subscription:before {
content: "\e926";
}
.i_app_BaseLive:before {
content: "\e925";
}
.i_app_CoinFunding:before {
content: "\e924";
}
.i_app_BulkDispatch:before {
content: "\e927";
}
.i_app_BaseMessage:before {
content: "\e928";
}
.i_app_YamatoDelivery:before {
content: "\e929";
}
/*====================================================================
その部分だけで使用したいユーティリティ
====================================================================*/
.u_mLR15 {
margin-left: 15px !important;
margin-right: 15px !important;
}
.u_mT0 {
margin-top: 0 !important;
}
.u_mT05 {
margin-top: 5px !important;
}
.u_mT10 {
margin-top: 10px !important;
}
.u_mT15 {
margin-top: 15px !important;
}
.u_mT16 {
margin-top: 16px !important;
}
.u_mT20 {
margin-top: 20px !important;
}
.u_mT25 {
margin-top: 25px !important;
}
.u_mT30 {
margin-top: 30px !important;
}
.u_mT35 {
margin-top: 35px !important;
}
.u_mT40 {
margin-top: 40px !important;
}
.u_mT45 {
margin-top: 45px !important;
}
.u_mT50 {
margin-top: 50px !important;
}
.u_mR0 {
margin-right: 0 !important;
}
.u_mR05 {
margin-right: 5px !important;
}
.u_mR10 {
margin-right: 10px !important;
}
.u_mR15 {
margin-right: 15px !important;
}
.u_mR20 {
margin-right: 20px !important;
}
.u_mR25 {
margin-right: 25px !important;
}
.u_mR30 {
margin-right: 30px !important;
}
.u_mR35 {
margin-right: 35px !important;
}
.u_mR40 {
margin-right: 40px !important;
}
.u_mR45 {
margin-right: 45px !important;
}
.u_mR50 {
margin-right: 50px !important;
}
.u_mB0 {
margin-bottom: 0 !important;
}
.u_mB05 {
margin-bottom: 5px !important;
}
.u_mB08 {
margin-bottom: 8px !important;
}
.u_mB10 {
margin-bottom: 10px !important;
}
.u_mB12 {
margin-bottom: 12px !important;
}
.u_mB15 {
margin-bottom: 15px !important;
}
.u_mB16 {
margin-bottom: 16px !important;
}
.u_mB20 {
margin-bottom: 20px !important;
}
.u_mB24 {
margin-bottom: 24px !important;
}
.u_mB25 {
margin-bottom: 25px !important;
}
.u_mB30 {
margin-bottom: 30px !important;
}
.u_mB32 {
margin-bottom: 32px !important;
}
.u_mB35 {
margin-bottom: 35px !important;
}
.u_mB36 {
margin-bottom: 36px !important;
}
.u_mB40 {
margin-bottom: 40px !important;
}
.u_mB45 {
margin-bottom: 45px !important;
}
.u_mB50 {
margin-bottom: 50px !important;
}
.u_mL0 {
margin-left: 0 !important;
}
.u_mL05 {
margin-left: 5px !important;
}
.u_mL10 {
margin-left: 10px !important;
}
.u_mL15 {
margin-left: 15px !important;
}
.u_mL20 {
margin-left: 20px !important;
}
.u_mL25 {
margin-left: 25px !important;
}
.u_mL30 {
margin-left: 30px !important;
}
.u_mL35 {
margin-left: 35px !important;
}
.u_mL40 {
margin-left: 40px !important;
}
.u_mL45 {
margin-left: 45px !important;
}
.u_mL50 {
margin-left: 50px !important;
}
.u_pAL10 {
padding: 10px !important;
}
.u_pAL15 {
padding: 15px !important;
}
.u_pAL20 {
padding: 20px !important;
}
.u_pLR15 {
padding-left: 15px !important;
padding-right: 15px !important;
}
.u_pT0 {
padding-top: 0 !important;
}
.u_pT05 {
padding-top: 5px !important;
}
.u_pT10 {
padding-top: 10px !important;
}
.u_pT15 {
padding-top: 15px !important;
}
.u_pT16 {
padding-top: 16px !important;
}
.u_pT20 {
padding-top: 20px !important;
}
.u_pT24 {
padding-top: 24px !important;
}
.u_pT25 {
padding-top: 25px !important;
}
.u_pT30 {
padding-top: 30px !important;
}
.u_pT35 {
padding-top: 35px !important;
}
.u_pT40 {
padding-top: 40px !important;
}
.u_pT45 {
padding-top: 45px !important;
}
.u_pT50 {
padding-top: 50px !important;
}
.u_pR0 {
padding-right: 0 !important;
}
.u_pR05 {
padding-right: 5px !important;
}
.u_pR10 {
padding-right: 10px !important;
}
.u_pR15 {
padding-right: 15px !important;
}
.u_pR20 {
padding-right: 20px !important;
}
.u_pR25 {
padding-right: 25px !important;
}
.u_pR30 {
padding-right: 30px !important;
}
.u_pR35 {
padding-right: 35px !important;
}
.u_pR40 {
padding-right: 40px !important;
}
.u_pR45 {
padding-right: 45px !important;
}
.u_pR50 {
padding-right: 50px !important;
}
.u_pB0 {
padding-bottom: 0 !important;
}
.u_pB05 {
padding-bottom: 5px !important;
}
.u_pB10 {
padding-bottom: 10px !important;
}
.u_pB15 {
padding-bottom: 15px !important;
}
.u_pB20 {
padding-bottom: 20px !important;
}
.u_pB25 {
padding-bottom: 25px !important;
}
.u_pB30 {
padding-bottom: 30px !important;
}
.u_pB35 {
padding-bottom: 35px !important;
}
.u_pB40 {
padding-bottom: 40px !important;
}
.u_pB45 {
padding-bottom: 45px !important;
}
.u_pB50 {
padding-bottom: 50px !important;
}
.u_pL0 {
padding-left: 0 !important;
}
.u_pL05 {
padding-left: 5px !important;
}
.u_pL10 {
padding-left: 10px !important;
}
.u_pL15 {
padding-left: 15px !important;
}
.u_pL20 {
padding-left: 20px !important;
}
.u_pL25 {
padding-left: 25px !important;
}
.u_pL30 {
padding-left: 30px !important;
}
.u_pL35 {
padding-left: 35px !important;
}
.u_pL40 {
padding-left: 40px !important;
}
.u_pL45 {
padding-left: 45px !important;
}
.u_pL50 {
padding-left: 50px !important;
}
.u_taL {
text-align: left !important;
}
.u_taC {
text-align: center !important;
}
.u_taR {
text-align: right !important;
}
.u_fwB {
font-weight: bold !important;
}
.u_fwN {
font-weight: normal !important;
}
.u_floatR {
float: right !important;
}
.u_floatL {
float: left !important;
}
.u_fz10 {
font-size: 10px !important;
}
.u_fz11 {
font-size: 11px !important;
}
.u_fz12 {
font-size: 12px !important;
}
.u_fz13 {
font-size: 13px !important;
}
.u_fz14 {
font-size: 14px !important;
}
.u_fz15 {
font-size: 15px !important;
}
.u_fz16 {
font-size: 16px !important;
}
.u_fz17 {
font-size: 17px !important;
}
.u_fz18 {
font-size: 18px !important;
}
.u_fz19 {
font-size: 19px !important;
}
.u_fz20 {
font-size: 20px !important;
}
/*
---
name: Sassのcolor変数
category:
- atoms/00_colors
tag:
- pc
- sp
---
Sassのカラー変数一覧
```html
<p class="aigis__notice">現状定義されてるのは以下のとおり。使うものを決めたい・・・</p>
<dl class="aigis__color">
<dt style="background-color:#616062;"></dt>
<dd>$black</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#5C666B;"></dt>
<dd>$txtGray</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#DDDDDD;"></dt>
<dd>$borderGray</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#63C1AE;"></dt>
<dd>$green</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#e2f7f5;"></dt>
<dd>$green02</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#7bc5b6;"></dt>
<dd>$green03</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#0fafaa;"></dt>
<dd>$btnGreen</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#F87E7E;"></dt>
<dd>$red</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#6ACCEB;"></dt>
<dd>$blue</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#FFCF58;"></dt>
<dd>$yellow</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#f0f1f4;"></dt>
<dd>$adminBG</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#e8e8e8;"></dt>
<dd>$gray01</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#cccccc;"></dt>
<dd>$gray02</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#bbbbbb;"></dt>
<dd>$gray03</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#666666;"></dt>
<dd>$gray04</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#dcdcdc;"></dt>
<dd>$gray05</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#A0A0A0;"></dt>
<dd>$gray06</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#0063f0;"></dt>
<dd>$payblue</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#00a099;"></dt>
<dd>$hGreen</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#F3F3F3;"></dt>
<dd>$hGray01</dd>
</dl>
<dl class="aigis__color">
<dt style="background-color:#0E5AC7;"></dt>
<dd>$hPayBlue</dd>
</dl>
```
*/
.chargebackApp {
font-size: 14px;
}
.chargebackApp .statusMessage .message {
background-color: #63c1ae;
color: #fff;
padding: 10px 0;
text-align: center;
}
.chargebackApp .blockWrapper {
line-height: 1.6;
min-height: 400px;
}
.chargebackApp .formPlan {
font-size: 16px;
margin: 10px 0 20px;
}
.chargebackApp .formIntro {
margin: 10px 0 50px;
}
.chargebackApp .form__block {
border-bottom: 1px solid #e7e7e7;
margin-bottom: 30px;
}
.chargebackApp .form__line {
display: table;
margin-bottom: 30px;
width: 100%;
}
.chargebackApp .form__label {
display: table-cell;
margin-bottom: 8px;
width: 220px;
}
.chargebackApp .form__notice {
color: #aaa;
display: block;
font-size: 12px;
line-height: 1.7em;
margin-top: 8px;
padding-right: 8px;
}
.chargebackApp .form__field {
display: table-cell;
}
.chargebackApp .form__field .fieldNotice {
background-color: #f0f1f4;
box-sizing: border-box;
display: block;
font-size: 12px;
line-height: 1.7em;
margin: 0 0 20px;
padding: 10px;
}
.chargebackApp .form__field input[type=text],
.chargebackApp .form__field input[type=tel],
.chargebackApp .form__field input[type=email],
.chargebackApp .form__field input[type=number],
.chargebackApp .form__field textarea {
font-size: 14px;
width: 100%;
}
.chargebackApp .form__field.field--s input[type=text],
.chargebackApp .form__field.field--s input[type=tel],
.chargebackApp .form__field.field--s input[type=email],
.chargebackApp .form__field.field--s input[type=number],
.chargebackApp .form__field.field--s select,
.chargebackApp .form__field.field--s textarea {
width: 40%;
}
.chargebackApp .form__line.line--1cell {
display: block;
}
.chargebackApp .form__line.line--1cell .form__label,
.chargebackApp .form__line.line--1cell .form__field {
display: block;
}
.chargebackApp .form__line.line--1cell .form__label {
width: 100%;
}
.chargebackApp .error-message {
color: #f87e7e;
font-size: 14px;
font-weight: bold;
margin: 8px 0;
}
.chargebackApp .statusLabel {
border-radius: 100px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 15px 0;
text-align: center;
width: 180px;
}
.chargebackApp .statusLabel.status--prepared {
background-color: #a0a0a0;
}
.chargebackApp .statusLabel.status--requested {
background-color: #a0a0a0;
}
.chargebackApp .statusLabel.status--authrized {
background-color: #63c1ae;
}
.chargebackApp .statusLabel.status--rejected {
background-color: #f87e7e;
}
.chargebackApp .statusLabel.status--activated {
background-color: #63c1ae;
}
.chargebackApp .statusLabel.status--edited {
background-color: #63c1ae;
}
.chargebackApp .statusLabel.status--paused {
background-color: #f87e7e;
}
.chargebackApp .statusLabel.status--cancelled {
background-color: #a0a0a0;
}
.chargebackApp .statusLabel.status--cancell_completed {
background-color: #a0a0a0;
}
.chargebackApp .statusLabel.status--blocked {
background-color: #f87e7e;
}
.chargebackApp .statusLabel.status--completed {
background-color: #63c1ae;
}
.chargebackApp .btn--reapplry {
margin: 50px auto 0;
width: 300px;
}
.chargebackApp .btnTelAuth {
display: inline-block;
font-size: 14px;
margin-left: 10px;
padding: 9px 34px;
vertical-align: bottom;
}
.chargebackApp .telAuth__merit {
background-color: #f0f1f4;
box-sizing: border-box;
font-size: 12px;
line-height: 1.7em;
margin: 10px 0 0;
padding: 10px;
width: 420px;
}
.chargebackApp .validNumber {
display: none;
}
.chargebackApp .telBlock.telBlock--valid .btnTelAuth {
display: none;
}
.chargebackApp .telBlock.telBlock--valid .telAuth__merit {
display: none;
}
.chargebackApp .telBlock.telBlock--valid .validNumber {
color: #0fafaa;
display: inline-block;
margin-left: 10px;
}
.chargebackApp .telBlock.telBlock--valid .valid__icon {
margin: 0 8px 0 0;
vertical-align: -8px;
}
.chargebackApp .authBox {
position: relative;
text-align: center;
}
.chargebackApp .authBox__num {
font-size: 24px;
letter-spacing: 1px;
margin: 0 0 20px;
text-align: center;
}
.chargebackApp .authBox__intro {
font-size: 14px;
line-height: 24px;
}
.chargebackApp .authBox .loadingCover {
background-color: rgba(255, 255, 255, 0.8);
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.chargebackApp .authBox .loadingCover img {
bottom: 0;
display: block;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.chargebackApp .authBox.loading .loadingCover {
display: block;
}
.chargebackApp .authBox .successCover {
background-color: rgba(255, 255, 255, 0.99);
box-sizing: border-box;
display: none;
height: 100%;
left: 0;
padding-top: 110px;
position: absolute;
top: 0;
width: 100%;
}
.chargebackApp .authBox .successCover .succsess__icon {
margin: 0 8px 0 0;
vertical-align: -8px;
}
.chargebackApp .authBox .successCover .success__text {
font-size: 18px;
margin: 30px 0 0;
}
.chargebackApp .authBox.success .successCover {
display: block;
}
.chargebackApp .authCode {
background-color: #f0f0f0;
padding: 20px;
}
.chargebackApp .authCode__field {
font-size: 18px;
height: 30px;
letter-spacing: 10px;
margin: 10px 0;
text-align: center;
}
.chargebackApp .receiveBtns {
margin: 20px auto;
text-align: center;
width: 70%;
}
.chargebackApp .receiveBtns__li {
display: inline-block;
width: 50%;
}
.chargebackApp .receiveBtns__txt {
color: #00bfae;
margin: 8px 0 0;
}
.chargebackApp .receive {
border: 2px solid #0fafaa;
border-radius: 100px;
box-sizing: border-box;
display: block;
height: 60px;
margin: 0 auto;
padding-top: 12px;
text-align: center;
width: 60px;
}
.chargebackApp .receive:hover {
background-color: rgba(15, 175, 170, 0.1);
}
.chargebackApp .btn--auth {
font-size: 14px;
margin: 0 auto;
padding: 12px 8px;
width: 140px;
}
.chargebackApp .itemsCB {
margin-bottom: 10px;
}
.chargebackApp .itemsCB label {
font-size: 14px;
}
.chargebackApp .unit {
display: inline-block;
margin-left: 10px;
}
.chargebackApp .option {
padding: 30px 0;
text-align: center;
}
.chargebackApp .option__line {
display: inline-block;
text-align: left;
}
.chargebackApp .option__line > div {
margin-bottom: 5px;
}
.chargebackApp .option__line label {
font-size: 14px;
}
.chargebackApp .btnBlock {
text-align: center;
}
.chargebackApp .btnBlock .cancelBtn {
display: inline-block;
margin: 0 10px 0 0;
width: 300px;
}
.chargebackApp .btnBlock .submitBtn {
display: inline-block;
width: 300px;
}
.chargebackApp .btnBlock .editBtn {
margin: 0 auto;
width: 300px;
}
.chargebackApp .isPersonal .onlyCorp {
display: none;
}
.chargebackApp .confBox {
color: #2e3242;
height: 780px;
width: 700px;
}
.chargebackApp .confBox__intro {
text-align: center;
width: 100%;
}
.chargebackApp .confBox__data {
border-bottom: 1px solid #e7e7e7;
border-top: 1px solid #e7e7e7;
font-size: 14px;
margin: 30px 0 0;
padding: 20px 0 0;
}
.chargebackApp .confBox__line {
display: table;
margin-bottom: 20px;
}
.chargebackApp .confBox__label {
display: table-cell;
font-size: 12px;
width: 200px;
}
.chargebackApp .confBox__val {
display: table-cell;
font-weight: bold;
margin-left: 10px;
}
.chargebackApp .confBox__btns {
padding: 30px 0 0;
text-align: center;
}
.chargebackApp .confBox__btnCancel {
display: inline-block;
margin-right: 10px;
width: 300px;
}
.chargebackApp .confBox__btnSubmit {
display: inline-block;
width: 300px;
}
.chargebackApp .mode--static .element__edit {
display: none;
}
.chargebackApp .mode--edit .element__static {
display: none;
}
.chargebackApp .form__field .element__static {
font-weight: bold;
}
.chargebackApp .statusBlock .statusBox {
display: table;
width: 100%;
}
.chargebackApp .statusBlock .statusBox__plan,
.chargebackApp .statusBlock .statusBox__status {
display: table-cell;
}
.chargebackApp .statusBlock .statusBox__planName {
font-size: 18px;
}
.chargebackApp .statusBlock .statusBox__price {
margin-top: 20px;
}
.chargebackApp .statusBlock .statusBox .pricetable {
border: 1px solid #e7e7e7;
display: inline-table;
}
.chargebackApp .statusBlock .statusBox .pricetable__name,
.chargebackApp .statusBlock .statusBox .pricetable__value {
display: table-cell;
padding: 5px 0;
text-align: center;
width: 100px;
}
.chargebackApp .statusBlock .statusBox .pricetable__name {
background-color: #f5f5f5;
}
.chargebackApp .statusBlock .statusBox__status {
text-align: right;
vertical-align: middle;
}
.chargebackApp .statusBlock .defaultTxt {
border-top: 1px solid #979797;
font-size: 16px;
line-height: 1.7em;
margin-top: 30px;
padding-top: 20px;
}
.chargebackApp .chargeBackList__title {
font-size: 18px;
margin-bottom: 30px;
}
.chargebackApp .chargeBackList .chargeBackTable {
border: 1px solid #ccc;
margin: 0;
width: 100%;
}
.chargebackApp .chargeBackList .chargeBackTable tr:not(:last-child) td {
border-bottom: 1px solid #eee;
}
.chargebackApp .chargeBackList .chargeBackTable th,
.chargebackApp .chargeBackList .chargeBackTable td {
padding: 10px;
vertical-align: middle;
}
.chargebackApp .chargeBackList .chargeBackTable th:not(:last-child),
.chargebackApp .chargeBackList .chargeBackTable td:not(:last-child) {
border-right: 1px solid #eee;
}
.chargebackApp .chargeBackList .chargeBackTable th {
background-color: #f5f5f5;
text-align: center;
}
.chargebackApp .chargeBackList .chargeBackTable__date {
width: 100px;
}
.chargebackApp .chargeBackList .chargeBackTable__orderID {
width: 280px;
}
.chargebackApp .chargeBackList .chargeBackTable__status {
text-align: center;
}
.chargebackApp .chargeBackList .chargeBackTable .btnOpenForm {
font-size: 14px;
padding: 8px 0;
}
.chargebackApp .chargeBackList .chargeBackTable .statusLabel {
padding: 8px 0;
}
.coverLayer {
background: none repeat scroll 0% 0% rgba(94, 94, 94, 0.6);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.modal {
background-color: white;
border-radius: 10px;
box-shadow: 2px 2px 8px 0 rgba(100, 100, 100, 0.5);
box-sizing: border-box;
display: none;
left: 0;
margin: auto;
padding: 30px;
position: fixed;
right: 0;
top: 120px;
width: 500px;
z-index: 101;
}
.modal .closeModal {
position: absolute;
right: 0;
top: -40px;
}
.modal .closeModal:hover {
text-decoration: none;
}
.modal .closeModal svg {
width: 24px;
}
.modal .closeModal svg .cross {
stroke: #fff;
}
@font-face {
font-family: "baseicon";
font-style: normal;
font-weight: normal;
src: url("/font/baseicon.eot?htu8ks");
src: url("/font/baseicon.eot?htu8ks#iefix") format("embedded-opentype"), url("/font/baseicon.ttf?htu8ks") format("truetype"), url("/font/baseicon.woff?htu8ks") format("woff"), url("/font/baseicon.svg?htu8ks#baseicon") format("svg");
}
[class^=i_]:before,
[class*=" i_"]:before {
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
/* use !important to prevent issues with browser extensions that change fonts */
speak: none;
text-transform: none;
}
/*
---
name: アイコンフォント
category:
- atoms/06_アイコン
tag:
- pc
- sp
---
アイコンフォント一覧
`<i>`タグにクラスを指定
```html
<p class="aigis__notice">icomoonで作成・更新</p>
<table class="aigis__fontTable">
<tr>
<th>クラス名</th>
<th>アイコンフォント</th>
</tr>
<tr>
<th>i_gear01</th>
<td><i class="i_gear01"></i></td>
</tr>
<tr>
<th>i_graph01</th>
<td><i class="i_graph01"></i></td>
</tr>
<tr>
<th>i_item01</th>
<td><i class="i_item01"></i></td>
</tr>
<tr>
<th>i_list01</th>
<td><i class="i_list01"></i></td>
</tr>
<tr>
<th>i_mobile01</th>
<td><i class="i_mobile01"></i></td>
</tr>
<tr>
<th>i_money01</th>
<td><i class="i_money01"></i></td>
</tr>
<tr>
<th>i_page01</th>
<td><i class="i_page01"></i></td>
</tr>
<tr>
<th>i_tipi01</th>
<td><i class="i_tipi01"></i></td>
</tr>
<tr>
<th>i_tool01</th>
<td><i class="i_tool01"></i></td>
</tr>
<tr>
<th>i_menu01</th>
<td><i class="i_menu01"></i></td>
</tr>
<tr>
<th>i_crown01</th>
<td><i class="i_crown01"></i></td>
</tr>
<tr>
<th>i_shop01</th>
<td><i class="i_shop01"></i></td>
</tr>
<tr>
<th>i_attention</th>
<td><i class="i_attention"></i></td>
</tr>
<tr>
<th>i_caution</th>
<td><i class="i_caution"></i></td>
</tr>
<tr>
<th>i_check-circle</th>
<td><i class="i_check-circle"></i></td>
</tr>
<tr>
<th>i_closs-circle</th>
<td><i class="i_closs-circle"></i></td>
</tr>
<tr>
<th>i_information</th>
<td><i class="i_information"></i></td>
</tr>
<tr>
<th>i_notification</th>
<td><i class="i_notification"></i></td>
</tr>
<tr>
<th>i_plus-circle</th>
<td><i class="i_plus-circle"></i></td>
</tr>
<tr>
<th>i_question</th>
<td><i class="i_question"></i></td>
</tr>
<tr>
<th>i_tipi</th>
<td><i class="i_tipi"></i></td>
</tr>
<tr>
<th>i_camera</th>
<td><i class="i_camera"></i></td>
</tr>
<tr>
<th>i_check</th>
<td><i class="i_check"></i></td>
</tr>
<tr>
<th>i_clock</th>
<td><i class="i_clock"></i></td>
</tr>
<tr>
<th>i_cross</th>
<td><i class="i_cross"></i></td>
</tr>
<tr>
<th>i_drag</th>
<td><i class="i_drag"></i></td>
</tr>
<tr>
<th>i_email</th>
<td><i class="i_email"></i></td>
</tr>
<tr>
<th>i_loupe</th>
<td><i class="i_loupe"></i></td>
</tr>
<tr>
<th>i_menu</th>
<td><i class="i_menu"></i></td>
</tr>
<tr>
<th>i_pencil</th>
<td><i class="i_pencil"></i></td>
</tr>
<tr>
<th>i_plus</th>
<td><i class="i_plus"></i></td>
</tr>
<tr>
<th>i_share</th>
<td><i class="i_share"></i></td>
</tr>
<tr>
<th>i_trash</th>
<td><i class="i_trash"></i></td>
</tr>
<tr>
<th>i_logout</th>
<td><i class="i_logout"></i></td>
</tr>
<tr>
<th>i_newtab</th>
<td><i class="i_newtab"></i></td>
</tr>
<tr>
<th>i_pin</th>
<td><i class="i_pin"></i></td>
</tr>
<tr>
<th>i_cart</th>
<td><i class="i_cart"></i></td>
</tr>
<tr>
<th>i_page02</th>
<td><i class="i_page02"></i></td>
</tr>
<tr>
<th>i_signin01</th>
<td><i class="i_signin01"></i></td>
</tr>
<tr>
<th>i_pencil02</th>
<td><i class="i_pencil02"></i></td>
</tr>
<tr>
<th>i_page03</th>
<td><i class="i_page03"></i></td>
</tr>
<tr>
<th>i_login01</th>
<td><i class="i_login01"></i></td>
</tr>
<tr>
<th>i_book01</th>
<td><i class="i_book01"></i></td>
</tr>
<tr>
<th>i_logout02</th>
<td><i class="i_logout02"></i></td>
</tr>
<tr>
<th>i_arrow-down</th>
<td><i class="i_arrow-down"></i></td>
</tr>
<tr>
<th>i_arrow-left</th>
<td><i class="i_arrow-left"></i></td>
</tr>
<tr>
<th>i_arrow-right</th>
<td><i class="i_arrow-right"></i></td>
</tr>
<tr>
<th>i_arrow-up</th>
<td><i class="i_arrow-up"></i></td>
</tr>
<tr>
<th>i_attention-triangle</th>
<td><i class="i_attention-triangle"></i></td>
</tr>
<tr>
<th>i_attention-circle</th>
<td><i class="i_attention-circle"></i></td>
</tr>
<tr>
<th>i_beginner</th>
<td><i class="i_beginner"></i></td>
</tr>
<tr>
<th>i_calendar</th>
<td><i class="i_calendar"></i></td>
</tr>
<tr>
<th>i_card</th>
<td><i class="i_card"></i></td>
</tr>
<tr>
<th>i_coins</th>
<td><i class="i_coins"></i></td>
</tr>
<tr>
<th>i_cross-circle</th>
<td><i class="i_cross-circle"></i></td>
</tr>
<tr>
<th>i_edit</th>
<td><i class="i_edit"></i></td>
</tr>
<tr>
<th>i_file</th>
<td><i class="i_file"></i></td>
</tr>
<tr>
<th>i_heart</th>
<td><i class="i_heart"></i></td>
</tr>
<tr>
<th>i_information-circle</th>
<td><i class="i_information-circle"></i></td>
</tr>
<tr>
<th>i_link-add</th>
<td><i class="i_link-add"></i></td>
</tr>
<tr>
<th>i_link</th>
<td><i class="i_link"></i></td>
</tr>
<tr>
<th>i_movie</th>
<td><i class="i_movie"></i></td>
</tr>
<tr>
<th>i_question-circle</th>
<td><i class="i_question-circle"></i></td>
</tr>
<tr>
<th>i_star</th>
<td><i class="i_star"></i></td>
</tr>
<tr>
<th>i_truck</th>
<td><i class="i_truck"></i></td>
</tr>
<tr>
<th>i_yen-circle</th>
<td><i class="i_yen-circle"></i></td>
</tr>
<tr>
<th>i_bell</th>
<td><i class="i_bell"></i></td>
</tr>
<tr>
<th>i_book</th>
<td><i class="i_book"></i></td>
</tr>
<tr>
<th>i_caret-down</th>
<td><i class="i_caret-down"></i></td>
</tr>
<tr>
<th>i_caret-left</th>
<td><i class="i_caret-left"></i></td>
</tr>
<tr>
<th>i_caret-right</th>
<td><i class="i_caret-right"></i></td>
</tr>
<tr>
<th>i_caret-up</th>
<td><i class="i_caret-up"></i></td>
</tr>
<tr>
<th>i_crown</th>
<td><i class="i_crown"></i></td>
</tr>
<tr>
<th>i_designmarket</th>
<td><i class="i_designmarket"></i></td>
</tr>
<tr>
<th>i_gear</th>
<td><i class="i_gear"></i></td>
</tr>
<tr>
<th>i_graph</th>
<td><i class="i_graph"></i></td>
</tr>
<tr>
<th>i_item</th>
<td><i class="i_item"></i></td>
</tr>
<tr>
<th>i_list</th>
<td><i class="i_list"></i></td>
</tr>
<tr>
<th>i_message</th>
<td><i class="i_message"></i></td>
</tr>
<tr>
<th>i_mobile</th>
<td><i class="i_mobile"></i></td>
</tr>
<tr>
<th>i_page</th>
<td><i class="i_page"></i></td>
</tr>
<tr>
<th>i_shop</th>
<td><i class="i_shop"></i></td>
</tr>
<tr>
<th>i_shopbag</th>
<td><i class="i_shopbag"></i></td>
</tr>
<tr>
<th>i_tipi-square</th>
<td><i class="i_tipi-square"></i></td>
</tr>
<tr>
<th>i_tool</th>
<td><i class="i_tool"></i></td>
</tr>
<tr>
<th>i_angle-down</th>
<td><i class="i_angle-down"></i></td>
</tr>
<tr>
<th>i_angle-left</th>
<td><i class="i_angle-left"></i></td>
</tr>
<tr>
<th>i_angle-right</th>
<td><i class="i_angle-right"></i></td>
</tr>
<tr>
<th>i_angle-up</th>
<td><i class="i_angle-up"></i></td>
</tr>
<tr>
<th>i_dropper</th>
<td><i class="i_dropper"></i></td>
</tr>
<tr>
<th>i_ameba</th>
<td><i class="i_ameba"></i></td>
</tr>
<tr>
<th>i_facebook-square</th>
<td><i class="i_facebook-square"></i></td>
</tr>
<tr>
<th>i_facebook</th>
<td><i class="i_facebook"></i></td>
</tr>
<tr>
<th>i_instagram</th>
<td><i class="i_instagram"></i></td>
</tr>
<tr>
<th>i_line</th>
<td><i class="i_line"></i></td>
</tr>
<tr>
<th>i_twitter</th>
<td><i class="i_twitter"></i></td>
</tr>
<tr>
<th>i_angle-double-left</th>
<td><i class="i_angle-double-left"></i></td>
</tr>
<tr>
<th>i_angle-double-right</th>
<td><i class="i_angle-double-right"></i></td>
</tr>
<tr>
<th>i_asterisk</th>
<td><i class="i_asterisk"></i></td>
</tr>
<tr>
<th>i_moon</th>
<td><i class="i_moon"></i></td>
</tr>
<tr>
<th>i_sun</th>
<td><i class="i_sun"></i></td>
</tr>
<tr>
<th>i_preview</th>
<td><i class="i_preview"></i></td>
</tr>
<tr>
<th>i_image</th>
<td><i class="i_image"></i></td>
</tr>
<tr>
<th>i_phone</th>
<td><i class="i_phone"></i></td>
</tr>
<tr>
<th>i_send</th>
<td><i class="i_send"></i></td>
</tr>
<tr>
<th>i_like</th>
<td><i class="i_like"></i></td>
</tr>
<tr>
<th>i_grid</th>
<td><i class="i_grid"></i></td>
</tr>
<tr>
<th>i_dislike</th>
<td><i class="i_dislike"></i></td>
</tr>
<tr>
<th>i_copy</th>
<td><i class="i_copy"></i></td>
</tr>
<tr>
<th>i_checkbox</th>
<td><i class="i_checkbox"></i></td>
</tr>
<tr>
<th>i_minus</th>
<td><i class="i_minus"></i></td>
</tr>
<tr>
<th>i_meatball</th>
<td><i class="i_meatball"></i></td>
</tr>
<tr>
<th>i_lock</th>
<td><i class="i_lock"></i></td>
</tr>
<tr>
<th>i_mail</th>
<td><i class="i_mail"></i></td>
</tr>
</table>
```
*/
.i_gear01:before {
font-family: "baseicon" !important;
content: "\e900";
}
.i_graph01:before {
font-family: "baseicon" !important;
content: "\e901";
}
.i_item01:before {
font-family: "baseicon" !important;
content: "\e902";
}
.i_list01:before {
font-family: "baseicon" !important;
content: "\e903";
}
.i_mobile01:before {
font-family: "baseicon" !important;
content: "\e904";
}
.i_money01:before {
font-family: "baseicon" !important;
content: "\e905";
}
.i_page01:before {
font-family: "baseicon" !important;
content: "\e906";
}
.i_tipi01:before {
font-family: "baseicon" !important;
content: "\e907";
}
.i_tool01:before {
font-family: "baseicon" !important;
content: "\e908";
}
.i_menu01:before {
font-family: "baseicon" !important;
content: "\e909";
}
.i_crown01:before {
font-family: "baseicon" !important;
content: "\e90a";
}
.i_shop01:before {
font-family: "baseicon" !important;
content: "\e90b";
}
.i_attention:before {
font-family: "baseicon" !important;
content: "\e918";
}
.i_caution:before {
font-family: "baseicon" !important;
content: "\e919";
}
.i_check-circle:before {
font-family: "baseicon" !important;
content: "\e91a";
}
.i_closs-circle:before {
font-family: "baseicon" !important;
content: "\e91b";
}
.i_information:before {
font-family: "baseicon" !important;
content: "\e91c";
}
.i_notification:before {
font-family: "baseicon" !important;
content: "\e91d";
}
.i_plus-circle:before {
font-family: "baseicon" !important;
content: "\e91e";
}
.i_question:before {
font-family: "baseicon" !important;
content: "\e91f";
}
.i_skip:before {
font-family: "baseicon" !important;
content: "\e920";
}
.i_sort:before {
font-family: "baseicon" !important;
content: "\e921";
}
.i_tipi:before {
font-family: "baseicon" !important;
content: "\e922";
}
.i_camera:before {
font-family: "baseicon" !important;
content: "\e90c";
}
.i_check:before {
font-family: "baseicon" !important;
content: "\e90d";
}
.i_clock:before {
font-family: "baseicon" !important;
content: "\e90e";
}
.i_cross:before {
font-family: "baseicon" !important;
content: "\e90f";
}
.i_drag:before {
font-family: "baseicon" !important;
content: "\e910";
}
.i_email:before {
font-family: "baseicon" !important;
content: "\e911";
}
.i_loupe:before {
font-family: "baseicon" !important;
content: "\e912";
}
.i_menu:before {
font-family: "baseicon" !important;
content: "\e913";
}
.i_pencil:before {
font-family: "baseicon" !important;
content: "\e914";
}
.i_plus:before {
font-family: "baseicon" !important;
content: "\e915";
}
.i_share:before {
font-family: "baseicon" !important;
content: "\e916";
}
.i_trash:before {
font-family: "baseicon" !important;
content: "\e917";
}
.i_logout:before {
font-family: "baseicon" !important;
content: "\e927";
}
.i_newtab:before {
font-family: "baseicon" !important;
content: "\e928";
}
.i_pin:before {
font-family: "baseicon" !important;
content: "\e92a";
}
.i_cart:before {
font-family: "baseicon" !important;
content: "\e929";
}
.i_page02:before {
font-family: "baseicon" !important;
content: "\e92b";
}
.i_signin01:before {
font-family: "baseicon" !important;
content: "\e930";
}
.i_pencil02:before {
font-family: "baseicon" !important;
content: "\e92f";
}
.i_page03:before {
font-family: "baseicon" !important;
content: "\e92e";
}
.i_login01:before {
font-family: "baseicon" !important;
content: "\e92d";
}
.i_book01:before {
font-family: "baseicon" !important;
content: "\e92c";
}
.i_logout02:before {
font-family: "baseicon" !important;
content: "\e931";
}
.i_arrow-down:before {
font-family: "baseicon" !important;
content: "\e923";
}
.i_arrow-left:before {
font-family: "baseicon" !important;
content: "\e924";
}
.i_arrow-right:before {
font-family: "baseicon" !important;
content: "\e925";
}
.i_arrow-up:before {
font-family: "baseicon" !important;
content: "\e926";
}
.i_attention-triangle:before {
font-family: "baseicon" !important;
content: "\e932";
}
.i_attention-circle:before {
font-family: "baseicon" !important;
content: "\e933";
}
.i_beginner:before {
font-family: "baseicon" !important;
content: "\e934";
}
.i_calendar:before {
font-family: "baseicon" !important;
content: "\e935";
}
.i_card:before {
font-family: "baseicon" !important;
content: "\e936";
}
.i_coins:before {
font-family: "baseicon" !important;
content: "\e938";
}
.i_cross-circle:before {
font-family: "baseicon" !important;
content: "\e939";
}
.i_edit:before {
font-family: "baseicon" !important;
content: "\e93a";
}
.i_file:before {
font-family: "baseicon" !important;
content: "\e93b";
}
.i_heart:before {
font-family: "baseicon" !important;
content: "\e93c";
}
.i_information-circle:before {
font-family: "baseicon" !important;
content: "\e93d";
}
.i_link-add:before {
font-family: "baseicon" !important;
content: "\e93e";
}
.i_link:before {
font-family: "baseicon" !important;
content: "\e93f";
}
.i_movie:before {
font-family: "baseicon" !important;
content: "\e940";
}
.i_question-circle:before {
font-family: "baseicon" !important;
content: "\e941";
}
.i_star:before {
font-family: "baseicon" !important;
content: "\e942";
}
.i_truck:before {
font-family: "baseicon" !important;
content: "\e943";
}
.i_yen-circle:before {
font-family: "baseicon" !important;
content: "\e944";
}
.i_bell:before {
font-family: "baseicon" !important;
content: "\e937";
}
.i_book:before {
font-family: "baseicon" !important;
content: "\e945";
}
.i_caret-down:before {
font-family: "baseicon" !important;
content: "\e946";
}
.i_caret-left:before {
font-family: "baseicon" !important;
content: "\e947";
}
.i_caret-right:before {
font-family: "baseicon" !important;
content: "\e948";
}
.i_caret-up:before {
font-family: "baseicon" !important;
content: "\e949";
}
.i_crown:before {
font-family: "baseicon" !important;
content: "\e94a";
}
.i_designmarket:before {
font-family: "baseicon" !important;
content: "\e94b";
}
.i_gear:before {
font-family: "baseicon" !important;
content: "\e94c";
}
.i_graph:before {
font-family: "baseicon" !important;
content: "\e94d";
}
.i_item:before {
font-family: "baseicon" !important;
content: "\e94e";
}
.i_list:before {
font-family: "baseicon" !important;
content: "\e94f";
}
.i_message:before {
font-family: "baseicon" !important;
content: "\e950";
}
.i_mobile:before {
font-family: "baseicon" !important;
content: "\e951";
}
.i_page:before {
font-family: "baseicon" !important;
content: "\e952";
}
.i_shop:before {
font-family: "baseicon" !important;
content: "\e953";
}
.i_shopbag:before {
font-family: "baseicon" !important;
content: "\e954";
}
.i_tipi-square:before {
font-family: "baseicon" !important;
content: "\e955";
}
.i_tool:before {
font-family: "baseicon" !important;
content: "\e956";
}
.i_angle-down:before {
font-family: "baseicon" !important;
content: "\e957";
}
.i_angle-left:before {
font-family: "baseicon" !important;
content: "\e958";
}
.i_angle-right:before {
font-family: "baseicon" !important;
content: "\e959";
}
.i_angle-up:before {
font-family: "baseicon" !important;
content: "\e95a";
}
.i_dropper:before {
font-family: "baseicon" !important;
content: "\e95b";
}
.i_ameba:before {
font-family: "baseicon" !important;
content: "\e95c";
}
.i_facebook-square:before {
font-family: "baseicon" !important;
content: "\e95d";
}
.i_facebook:before {
font-family: "baseicon" !important;
content: "\e95e";
}
.i_instagram:before {
font-family: "baseicon" !important;
content: "\e95f";
}
.i_line:before {
font-family: "baseicon" !important;
content: "\e960";
}
.i_twitter:before {
font-family: "baseicon" !important;
content: "\e961";
}
.i_angle-double-left:before {
font-family: "baseicon" !important;
content: "\e962";
}
.i_angle-double-right:before {
font-family: "baseicon" !important;
content: "\e963";
}
.i_asterisk:before {
font-family: "baseicon" !important;
content: "\e964";
}
.i_moon:before {
font-family: "baseicon" !important;
content: "\e965";
}
.i_sun:before {
font-family: "baseicon" !important;
content: "\e966";
}
.i_preview:before {
font-family: "baseicon" !important;
content: "\e967";
}
.i_image:before {
font-family: "baseicon" !important;
content: "\e968";
}
.i_phone:before {
font-family: "baseicon" !important;
content: "\e969";
}
.i_send:before {
font-family: "baseicon" !important;
content: "\e96a";
}
.i_like:before {
font-family: "baseicon" !important;
content: "\e96f";
}
.i_grid:before {
font-family: "baseicon" !important;
content: "\e96e";
}
.i_dislike:before {
font-family: "baseicon" !important;
content: "\e96d";
}
.i_copy:before {
font-family: "baseicon" !important;
content: "\e96c";
}
.i_checkbox:before {
font-family: "baseicon" !important;
content: "\e96b";
}
.i_minus:before {
font-family: "baseicon" !important;
content: "\e973";
}
.i_meatball:before {
font-family: "baseicon" !important;
content: "\e972";
}
.i_lock:before {
font-family: "baseicon" !important;
content: "\e971";
}
.i_mail:before {
font-family: "baseicon" !important;
content: "\e970";
}
@font-face {
font-family: "baseappsicon";
font-style: normal;
font-weight: normal;
src: url("/font/baseappsicon.eot?gce0lq");
src: url("/font/baseappsicon.eot?gce0lq#iefix") format("embedded-opentype"), url("/font/baseappsicon.ttf?gce0lq") format("truetype"), url("/font/baseappsicon.woff?gce0lq") format("woff"), url("/font/baseappsicon.svg?gce0lq#baseappsicon") format("svg");
}
[class^=i_app_]:before,
[class*=" i_app_"]:before {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "baseappsicon" !important;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-transform: none;
}
/*
---
name: Appsアイコンフォント
category:
- atoms/06_アイコン
tag:
- pc
- sp
---
Appsアイコンフォント一覧
`<i>`タグにクラスを指定
```html
<p class="aigis__notice">icomoonで作成・更新</p>
<table class="aigis__fontTable">
<tr>
<th>クラス名</th>
<th>アイコンフォント</th>
</tr>
<tr>
<th>i_app_AgeVerification</th>
<td><i class="i_app_AgeVerification"></i></td>
</tr>
<tr>
<th>i_app_BaseEraser</th>
<td><i class="i_app_BaseEraser"></i></td>
</tr>
<tr>
<th>i_app_Blog</th>
<td><i class="i_app_Blog"></i></td>
</tr>
<tr>
<th>i_app_Chargeback</th>
<td><i class="i_app_Chargeback"></i></td>
</tr>
<tr>
<th>i_app_ClubT</th>
<td><i class="i_app_ClubT"></i></td>
</tr>
<tr>
<th>i_app_Conversion</th>
<td><i class="i_app_Conversion"></i></td>
</tr>
<tr>
<th>i_app_Coupon</th>
<td><i class="i_app_Coupon"></i></td>
</tr>
<tr>
<th>i_app_CsvLite</th>
<td><i class="i_app_CsvLite"></i></td>
</tr>
<tr>
<th>i_app_DeliveryNote</th>
<td><i class="i_app_DeliveryNote"></i></td>
</tr>
<tr>
<th>i_app_Download</th>
<td><i class="i_app_Download"></i></td>
</tr>
<tr>
<th>i_app_GiftKit</th>
<td><i class="i_app_GiftKit"></i></td>
</tr>
<tr>
<th>i_app_GoogleAd</th>
<td><i class="i_app_GoogleAd"></i></td>
</tr>
<tr>
<th>i_app_GoogleAdCoupon</th>
<td><i class="i_app_GoogleAdCoupon"></i></td>
</tr>
<tr>
<th>i_app_GoogleAnalytics</th>
<td><i class="i_app_GoogleAnalytics"></i></td>
</tr>
<tr>
<th>i_app_I18n</th>
<td><i class="i_app_I18n"></i></td>
</tr>
<tr>
<th>i_app_Interview</th>
<td><i class="i_app_Interview"></i></td>
</tr>
<tr>
<th>i_app_ItemCategory</th>
<td><i class="i_app_ItemCategory"></i></td>
</tr>
<tr>
<th>i_app_ItemLabel</th>
<td><i class="i_app_ItemLabel"></i></td>
</tr>
<tr>
<th>i_app_ItemQuantityLimit</th>
<td><i class="i_app_ItemQuantityLimit"></i></td>
</tr>
<tr>
<th>i_app_Logo</th>
<td><i class="i_app_Logo"></i></td>
</tr>
<tr>
<th>i_app_MailMagazine</th>
<td><i class="i_app_MailMagazine"></i></td>
</tr>
<tr>
<th>i_app_Meta</th>
<td><i class="i_app_Meta"></i></td>
</tr>
<tr>
<th>i_app_MyDomain</th>
<td><i class="i_app_MyDomain"></i></td>
</tr>
<tr>
<th>i_app_OfflinePayment</th>
<td><i class="i_app_OfflinePayment"></i></td>
</tr>
<tr>
<th>i_app_Photo</th>
<td><i class="i_app_Photo"></i></td>
</tr>
<tr>
<th>i_app_Review</th>
<td><i class="i_app_Review"></i></td>
</tr>
<tr>
<th>i_app_Sale</th>
<td><i class="i_app_Sale"></i></td>
</tr>
<tr>
<th>i_app_SavingsPlus</th>
<td><i class="i_app_SavingsPlus"></i></td>
</tr>
<tr>
<th>i_app_Search</th>
<td><i class="i_app_Search"></i></td>
</tr>
<tr>
<th>i_app_SecretEc</th>
<td><i class="i_app_SecretEc"></i></td>
</tr>
<tr>
<th>i_app_ShippingFee</th>
<td><i class="i_app_ShippingFee"></i></td>
</tr>
<tr>
<th>i_app_SpCase</th>
<td><i class="i_app_SpCase"></i></td>
</tr>
<tr>
<th>i_app_Template</th>
<td><i class="i_app_Template"></i></td>
</tr>
<tr>
<th>i_app_YahooAd</th>
<td><i class="i_app_YahooAd"></i></td>
</tr>
<tr>
<th>i_app_DeliveryDate</th>
<td><i class="i_app_DeliveryDate"></i></td>
</tr>
<tr>
<th>i_app_Ezlogi</th>
<td><i class="i_app_Ezlogi"></i></td>
</tr>
<tr>
<th>i_app_Subscription</th>
<td><i class="i_app_Subscription"></i></td>
</tr>
<tr>
<th>i_app_BaseLive</th>
<td><i class="i_app_BaseLive"></i></td>
</tr>
<tr>
<th>i_app_CoinFunding</th>
<td><i class="i_app_CoinFunding"></i></td>
</tr>
<tr>
<th>i_app_BulkDispatch</th>
<td><i class="i_app_BulkDispatch"></i></td>
</tr>
<tr>
<th>i_app_Message</th>
<td><i class="i_app_Message"></i></td>
</tr>
<tr>
<th>i_app_YamatoDelivery</th>
<td><i class="i_app_YamatoDelivery"></i></td>
</tr>
</table>
```
*/
.i_app_AgeVerification:before {
content: "\e900";
}
.i_app_BaseEraser:before {
content: "\e901";
}
.i_app_Blog:before {
content: "\e902";
}
.i_app_Chargeback:before {
content: "\e903";
}
.i_app_ClubT:before {
content: "\e904";
}
.i_app_Conversion:before {
content: "\e905";
}
.i_app_Coupon:before {
content: "\e906";
}
.i_app_CsvLite:before {
content: "\e907";
}
.i_app_DeliveryNote:before {
content: "\e908";
}
.i_app_Download:before {
content: "\e909";
}
.i_app_GiftKit:before {
content: "\e90a";
}
.i_app_GoogleAd:before {
content: "\e90b";
}
.i_app_GoogleAdCoupon:before {
content: "\e90c";
}
.i_app_GoogleAnalytics:before {
content: "\e90d";
}
.i_app_I18n:before {
content: "\e90e";
}
.i_app_Interview:before {
content: "\e90f";
}
.i_app_ItemCategory:before {
content: "\e910";
}
.i_app_ItemLabel:before {
content: "\e911";
}
.i_app_ItemQuantityLimit:before {
content: "\e912";
}
.i_app_Logo:before {
content: "\e913";
}
.i_app_MailMagazine:before {
content: "\e914";
}
.i_app_Meta:before {
content: "\e915";
}
.i_app_MyDomain:before {
content: "\e916";
}
.i_app_OfflinePayment:before {
content: "\e917";
}
.i_app_Photo:before {
content: "\e918";
}
.i_app_Review:before {
content: "\e919";
}
.i_app_Sale:before {
content: "\e91a";
}
.i_app_SavingsPlus:before {
content: "\e91b";
}
.i_app_Search:before {
content: "\e91c";
}
.i_app_SecretEc:before {
content: "\e91d";
}
.i_app_ShippingFee:before {
content: "\e91e";
}
.i_app_SpCase:before {
content: "\e91f";
}
.i_app_Template:before {
content: "\e920";
}
.i_app_YahooAd:before {
content: "\e921";
}
.i_app_DeliveryDate:before {
content: "\e922";
}
.i_app_Ezlogi:before {
content: "\e923";
}
.i_app_Subscription:before {
content: "\e926";
}
.i_app_BaseLive:before {
content: "\e925";
}
.i_app_CoinFunding:before {
content: "\e924";
}
.i_app_BulkDispatch:before {
content: "\e927";
}
.i_app_BaseMessage:before {
content: "\e928";
}
.i_app_YamatoDelivery:before {
content: "\e929";
}
/*====================================================================
その部分だけで使用したいユーティリティ
====================================================================*/
.u_mLR15 {
margin-left: 15px !important;
margin-right: 15px !important;
}
.u_mT0 {
margin-top: 0 !important;
}
.u_mT05 {
margin-top: 5px !important;
}
.u_mT10 {
margin-top: 10px !important;
}
.u_mT15 {
margin-top: 15px !important;
}
.u_mT16 {
margin-top: 16px !important;
}
.u_mT20 {
margin-top: 20px !important;
}
.u_mT25 {
margin-top: 25px !important;
}
.u_mT30 {
margin-top: 30px !important;
}
.u_mT35 {
margin-top: 35px !important;
}
.u_mT40 {
margin-top: 40px !important;
}
.u_mT45 {
margin-top: 45px !important;
}
.u_mT50 {
margin-top: 50px !important;
}
.u_mR0 {
margin-right: 0 !important;
}
.u_mR05 {
margin-right: 5px !important;
}
.u_mR10 {
margin-right: 10px !important;
}
.u_mR15 {
margin-right: 15px !important;
}
.u_mR20 {
margin-right: 20px !important;
}
.u_mR25 {
margin-right: 25px !important;
}
.u_mR30 {
margin-right: 30px !important;
}
.u_mR35 {
margin-right: 35px !important;
}
.u_mR40 {
margin-right: 40px !important;
}
.u_mR45 {
margin-right: 45px !important;
}
.u_mR50 {
margin-right: 50px !important;
}
.u_mB0 {
margin-bottom: 0 !important;
}
.u_mB05 {
margin-bottom: 5px !important;
}
.u_mB08 {
margin-bottom: 8px !important;
}
.u_mB10 {
margin-bottom: 10px !important;
}
.u_mB12 {
margin-bottom: 12px !important;
}
.u_mB15 {
margin-bottom: 15px !important;
}
.u_mB16 {
margin-bottom: 16px !important;
}
.u_mB20 {
margin-bottom: 20px !important;
}
.u_mB24 {
margin-bottom: 24px !important;
}
.u_mB25 {
margin-bottom: 25px !important;
}
.u_mB30 {
margin-bottom: 30px !important;
}
.u_mB32 {
margin-bottom: 32px !important;
}
.u_mB35 {
margin-bottom: 35px !important;
}
.u_mB36 {
margin-bottom: 36px !important;
}
.u_mB40 {
margin-bottom: 40px !important;
}
.u_mB45 {
margin-bottom: 45px !important;
}
.u_mB50 {
margin-bottom: 50px !important;
}
.u_mL0 {
margin-left: 0 !important;
}
.u_mL05 {
margin-left: 5px !important;
}
.u_mL10 {
margin-left: 10px !important;
}
.u_mL15 {
margin-left: 15px !important;
}
.u_mL20 {
margin-left: 20px !important;
}
.u_mL25 {
margin-left: 25px !important;
}
.u_mL30 {
margin-left: 30px !important;
}
.u_mL35 {
margin-left: 35px !important;
}
.u_mL40 {
margin-left: 40px !important;
}
.u_mL45 {
margin-left: 45px !important;
}
.u_mL50 {
margin-left: 50px !important;
}
.u_pAL10 {
padding: 10px !important;
}
.u_pAL15 {
padding: 15px !important;
}
.u_pAL20 {
padding: 20px !important;
}
.u_pLR15 {
padding-left: 15px !important;
padding-right: 15px !important;
}
.u_pT0 {
padding-top: 0 !important;
}
.u_pT05 {
padding-top: 5px !important;
}
.u_pT10 {
padding-top: 10px !important;
}
.u_pT15 {
padding-top: 15px !important;
}
.u_pT16 {
padding-top: 16px !important;
}
.u_pT20 {
padding-top: 20px !important;
}
.u_pT24 {
padding-top: 24px !important;
}
.u_pT25 {
padding-top: 25px !important;
}
.u_pT30 {
padding-top: 30px !important;
}
.u_pT35 {
padding-top: 35px !important;
}
.u_pT40 {
padding-top: 40px !important;
}
.u_pT45 {
padding-top: 45px !important;
}
.u_pT50 {
padding-top: 50px !important;
}
.u_pR0 {
padding-right: 0 !important;
}
.u_pR05 {
padding-right: 5px !important;
}
.u_pR10 {
padding-right: 10px !important;
}
.u_pR15 {
padding-right: 15px !important;
}
.u_pR20 {
padding-right: 20px !important;
}
.u_pR25 {
padding-right: 25px !important;
}
.u_pR30 {
padding-right: 30px !important;
}
.u_pR35 {
padding-right: 35px !important;
}
.u_pR40 {
padding-right: 40px !important;
}
.u_pR45 {
padding-right: 45px !important;
}
.u_pR50 {
padding-right: 50px !important;
}
.u_pB0 {
padding-bottom: 0 !important;
}
.u_pB05 {
padding-bottom: 5px !important;
}
.u_pB10 {
padding-bottom: 10px !important;
}
.u_pB15 {
padding-bottom: 15px !important;
}
.u_pB20 {
padding-bottom: 20px !important;
}
.u_pB25 {
padding-bottom: 25px !important;
}
.u_pB30 {
padding-bottom: 30px !important;
}
.u_pB35 {
padding-bottom: 35px !important;
}
.u_pB40 {
padding-bottom: 40px !important;
}
.u_pB45 {
padding-bottom: 45px !important;
}
.u_pB50 {
padding-bottom: 50px !important;
}
.u_pL0 {
padding-left: 0 !important;
}
.u_pL05 {
padding-left: 5px !important;
}
.u_pL10 {
padding-left: 10px !important;
}
.u_pL15 {
padding-left: 15px !important;
}
.u_pL20 {
padding-left: 20px !important;
}
.u_pL25 {
padding-left: 25px !important;
}
.u_pL30 {
padding-left: 30px !important;
}
.u_pL35 {
padding-left: 35px !important;
}
.u_pL40 {
padding-left: 40px !important;
}
.u_pL45 {
padding-left: 45px !important;
}
.u_pL50 {
padding-left: 50px !important;
}
.u_taL {
text-align: left !important;
}
.u_taC {
text-align: center !important;
}
.u_taR {
text-align: right !important;
}
.u_fwB {
font-weight: bold !important;
}
.u_fwN {
font-weight: normal !important;
}
.u_floatR {
float: right !important;
}
.u_floatL {
float: left !important;
}
.u_fz10 {
font-size: 10px !important;
}
.u_fz11 {
font-size: 11px !important;
}
.u_fz12 {
font-size: 12px !important;
}
.u_fz13 {
font-size: 13px !important;
}
.u_fz14 {
font-size: 14px !important;
}
.u_fz15 {
font-size: 15px !important;
}
.u_fz16 {
font-size: 16px !important;
}
.u_fz17 {
font-size: 17px !important;
}
.u_fz18 {
font-size: 18px !important;
}
.u_fz19 {
font-size: 19px !important;
}
.u_fz20 {
font-size: 20px !important;
}
/**
* メインボタンmixin
*/
/**
* PAYボタンmixin
*/
/**
* サブボタンmixin
*/
/**
* キャンセル系ボタンmixin
*/
/**
* 削除系ボタンmixin
*/
/**
* ゴーストボタンmixin
*/
/**
* cursor（ > ）←こういうやつ作るmixin
* :after や :before で作る前提
*/
/**
* 三角の矢印（▼）←こういうやつ作るmixin
*/
/**
* 現Admin画面コンテナー
*/
/**
* タイトル
*/
/**
* ブロック
*/
/**
* フォームグループ
*/
/**
* ラベル
*/
/**
* 注意書き
*/
/**
* エラーメッセージ
*/
/**
* 必須マーク
*/
/**
* 入力フィールド
*/
/**
* カスタムチェックボックス
*/
/**
* ツールチップ
* TODO:data属性 を使ったシンプルな形式に変更予定
* 参考：http://kazzkiq.github.io/balloon.css/
*/
/**
* ブロックタイトル
*/
/**
* 大見出し
*/
/**
* 中見出し
*/
/**
* フォームグループ
*/
/**
* ラベル
*/
/**
* 注意書き
*/
/**
* エラーメッセージ
*/
/**
* 必須マーク
*/
/**
* 入力フィールド
*/
/**
* 入力確認テキスト
*/
/**
* 下部固定エリア
*/
/**
* カスタムチェックボックス
*/
/**
* hover時効果
*/
/**
* スクロール連動フェードイン
*/
/*
---
name: メインボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--main
* submit系のボタンに利用します。
* `a` タグ、 `button` タグ、`input` タグで利用可能
```html
<a class="btn--main">保存する</a>
<br>
<button class="btn--main">保存する</button>
<br>
<input type="submit" class="btn--main" value="保存する">
```
*/
.btn--main {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #0fafaa;
border-radius: 6px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: block;
outline: none;
text-align: center;
text-decoration: none;
border: none;
font-size: 16px;
padding: 14px 12px;
}
.btn--main:hover, .btn--main:active {
text-decoration: none;
background-color: #00a099;
color: #fff;
transition: 0.2s;
border: none;
}
.btn--main.is_disabled, .btn--main:disabled {
background-color: #ccc;
cursor: default;
}
/*
---
name: PAY ID
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--payid
* PAY IDでの購入、ログインなどで使用
* `a` タグ、 `button` タグ、`input` タグで利用可能
```html
<button type="button" class="btn--payid btn--wMax">
<img class="btn--payid__img" src="/img/payment/payid_logo_b.png" alt="PAY ID">PAY IDで購入
</button>
<br><br>
<a href="" class="btn--payid">
<img class="btn--payid__img" src="/img/payment/payid_logo_b.png" alt="PAY IDでログイン">PAY IDでログイン
</a>
```
*/
.btn--payid {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #000435;
border-radius: 6px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: block;
outline: none;
text-align: center;
text-decoration: none;
border: none;
font-size: 16px;
padding: 14px 12px;
vertical-align: middle;
}
.btn--payid:hover, .btn--payid:active {
text-decoration: none;
background-color: #000324;
color: #fff;
transition: 0.2s;
border: none;
}
.btn--payid.is_disabled, .btn--payid:disabled {
background-color: #ccc;
cursor: default;
}
.btn--payid__img {
height: 20px;
margin-right: 10px;
vertical-align: middle;
width: auto;
}
/*
---
name: サブボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--mainGray
* メインではないボタンで使用
* `a` タグ、 `button` タグ、`input` タグで利用可能
```html
<a class="btn--mainGray">挿入</a>
<br>
<button class="btn--mainGray">挿入</button>
<br>
<input type="submit" class="btn--mainGray" value="挿入">
```
*/
.btn--mainGray {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #666;
border-radius: 6px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: block;
outline: none;
text-align: center;
text-decoration: none;
border: none;
font-size: 16px;
padding: 14px 12px;
}
.btn--mainGray:hover, .btn--mainGray:active {
text-decoration: none;
background-color: #333;
color: #fff;
transition: 0.2s;
border: none;
}
.btn--mainGray.is_disabled, .btn--mainGray:disabled {
background-color: #ccc;
cursor: default;
}
/*
---
name: キャンセルボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--cancel
* キャンセル系のボタンに利用します。
* `a` タグ、 `button` タグ、`input` タグで利用可能
```html
<a class="btn--cancel">戻る</a>
```
*/
.btn--cancel {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #ccc;
border-radius: 6px;
box-sizing: border-box;
color: #6c6c6c;
cursor: pointer;
display: block;
outline: none;
text-align: center;
text-decoration: none;
border: none;
font-size: 16px;
padding: 14px 12px;
}
.btn--cancel:hover, .btn--cancel:active {
text-decoration: none;
background-color: #999;
color: #6c6c6c;
transition: 0.2s;
border: none;
}
.btn--cancel.is_disabled, .btn--cancel:disabled {
background-color: #ccc;
cursor: default;
}
/*
---
name: 削除ボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--del
* 削除処理系のボタンに利用します。
* `a` タグ、 `button` タグ、`input` タグで利用可能
* 例）appsの「無効にする」ボタン
```html
<a class="btn--del">無効にする</a>
```
*/
.btn--del {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #f87e7e;
border-radius: 6px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: block;
outline: none;
text-align: center;
text-decoration: none;
border: none;
font-size: 16px;
padding: 14px 12px;
}
.btn--del:hover, .btn--del:active {
text-decoration: none;
background-color: #cc5754;
color: #fff;
transition: 0.2s;
border: none;
}
.btn--del.is_disabled, .btn--del:disabled {
background-color: #ccc;
cursor: default;
}
/*
---
name: ゴーストボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--ghost
* submitが発生しないボタンに利用
* `a` タグ、 `button` タグ、`input` タグで利用可能
* 例）商品管理の「種類の追加」、「カテゴリ選択」など
```html
<a class="btn--ghost">種類を追加する</a>
```
*/
.btn--ghost {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border-radius: 6px;
box-sizing: border-box;
color: #0fafaa;
cursor: pointer;
display: block;
outline: none;
text-align: center;
text-decoration: none;
border: 2px solid #0fafaa;
font-size: 16px;
padding: 12px 18px;
}
.btn--ghost:hover, .btn--ghost:active {
text-decoration: none;
opacity: 0.8;
transition: 0.2s;
}
.btn--ghost.is_disabled, .btn--ghost:disabled {
background-color: #ccc;
cursor: default;
}
.btn--ghost:disabled {
background: #fff;
border-color: #c2c8d2;
color: #c2c8d2;
opacity: 0.5;
}
/*
---
name: ゴーストボタン(グレー)
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--ghostGray
* ゴーストボタンのグレー版
* `a` タグ、 `button` タグ、`input` タグで利用可能
* 例）
```html
<a class="btn--ghostGray">種類を追加する</a>
```
*/
.btn--ghostGray {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border-radius: 6px;
box-sizing: border-box;
color: #384359;
cursor: pointer;
display: block;
outline: none;
text-align: center;
text-decoration: none;
border: 2px solid #384359;
font-size: 16px;
padding: 12px 18px;
}
.btn--ghostGray:hover, .btn--ghostGray:active {
text-decoration: none;
opacity: 0.8;
transition: 0.2s;
}
.btn--ghostGray.is_disabled, .btn--ghostGray:disabled {
background-color: #ccc;
cursor: default;
}
/*
---
name: 「＋」つきボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--add
* 追加ボタンなど、＋マークを表示したいときに使用
```html
<a class="btn--main btn--add">商品を追加する</a>
<br>
<a class="btn--ghost btn--add">商品を追加する</a>
```
*/
.btn--add:before {
content: "\e915";
font-family: "baseicon";
padding: 0 8px 0 0;
}
/*
---
name: 幅100%のボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--wMax
* btn--mainなどをbuttonタグで使用する時に幅100%にするために使用
```html
<button class="btn--main btn--wMax">保存する</button>
```
*/
.btn--wMax {
width: 100%;
}
/*
---
name: 小さいボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--small01
* リストなどで小さいボタンが必要な時に使用
```html
<button class="btn--main btn--small01">保存する</button>
```
*/
.btn--small01 {
font-size: 14px;
line-height: 1.1;
padding: 9px 12px;
}
/*
---
name: 「＋」つきボタン
category:
- atoms/01_ボタン
tag:
- pc
- sp
---
.btn--add
* 追加ボタンなど、＋マークを表示したいときに使用
```html
<a class="btn--main btn--add">商品を追加する</a>
<br>
<a class="btn--ghost btn--add">商品を追加する</a>
```
*/
.btn--add:before {
content: "\e915";
font-family: "baseicon";
padding: 0 8px 0 0;
}
/*
---
name: シェアボタン
category:
- atoms/01_ボタン
tag:
- pc
---
.shareBtn
```html
<a class="btn--toApp" href="https://thebase.in/to_app?s=search&q=%E3%83%95%E3%82%A1%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3">アプリでもっと見る</a>
<!-- スクリーンショット -->
<p class="aigis__notice">※実際は以下のようにアイコン画像が表示されます</p>
<img src="../../../../../webroot/img/cap/btn--toApp.png">
```
*/
.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
<div class="flashMessage">
<div class="flashMessage__error">設定を保存できませんでした。</div>
</div>
<br><br>
<div class="flashMessage">
<div class="flashMessage__success">設定を保存しました。</div>
</div>
```
*/
.flashMessage__error {
background-color: #f2dede;
box-sizing: border-box;
color: #b94a48;
font-size: 14px;
line-height: 1.3;
padding: 8px 14px;
}
.flashMessage__success {
background-color: #dff0d8;
box-sizing: border-box;
color: #468847;
font-size: 14px;
line-height: 1.3;
padding: 8px 14px;
}
/*
---
name: error-message
category:
- atoms/09_テキスト
tag:
- pc
- sp
---
エラーテキスト。
Flashメッセージとは違うので注意。
```html
<div class="error-message">選択肢の中から1つ以上チェックしてください。</div>
```
*/
.error-message {
color: #f87e7e;
font-size: 12px;
font-weight: bold;
line-height: 1.4;
margin: 5px auto;
}
/*
---
name: フラッシュメッセージ
category:
- atoms/09_フラッシュメッセージ
tag:
- pc
---
.flashMessage
* submit後の画面に表示します。
* 注！）ナビゲーション下部に表示させるため、画面上部から `75px` 取っています。
```html
<div class="flashMessage01 flashMessage01--success">
<p class="flashMessage01__text">成功時のメッセージ</p>
</div>
<br>
<div class="flashMessage01 flashMessage--error">
<p class="flashMessage01__text">エラー時のメッセージ</p>
</div>
```
*/
.flashMessage01 {
left: 0;
opacity: 1;
padding: 15px 0;
position: fixed;
top: 72px;
transition: 0.4s linear;
width: 100%;
z-index: 100;
}
.flashMessage01__text {
font-size: 16px;
font-weight: bold;
margin: 0;
text-align: center;
}
.flashMessage01--error {
background-color: #fcdcdc;
color: #2e3242;
}
.flashMessage01--error .flashMessage01__text:before {
content: "\e932";
font-family: bbqicon;
padding: 0 8px 0 0;
}
.flashMessage01--success {
background-color: #c7e9eb;
color: #2e3242;
}
.flashMessage01--success .flashMessage01__text:before {
content: "\e91a";
font-family: bbqicon;
padding: 0 8px 0 0;
}
.flashMessage01--hidden {
opacity: 0;
transition: 0.4s linear;
z-index: -1;
}
body.is_sp .flashMessage01 {
top: 49px;
}
/*
---
name: フォーム系共通ラベル .label01
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.label01
* フォーム系でラベルが必要な時に使用
```html
<label class="label01">ラベルテキスト<span class="label01__requireIcon">*</span></label>
<input class="f_text01" type="text" value="" placeholder="あいうえお">
```
*/
.label01 {
display: block;
font-size: 12px;
font-weight: bold;
margin: 0 0 5px;
}
.label01__requireIcon {
color: #f87e7e;
padding: 0 0 0 3px;
vertical-align: top;
}
/*
---
name: 入力フィールド .f_field
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_field
* 入力フィールド。
* `inpute type="text"` タグ、 `textarea` タグなどで利用可能
* .f_field--wMaxで幅100%
* todo: `.f_text01` とマージする
```html
<input type="text" class="f_field" value="" placeholder="氏名">
<br><br>
<input type="text" class="f_field f_field--wMax" value="" placeholder="氏名">
<br><br>
<textarea class="f_field" placeholder="お問い合わせ内容を記入してください。" rows="5" cols="50"></textarea>
```
*/
.f_field {
background: #fff;
border: 1px solid #cfcfcf;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
min-height: 40px;
padding: 5px;
}
.f_field:focus {
border: 1px solid #7cd8b7;
box-shadow: 0 0 5px 0 #7cd8b7;
outline: none;
}
.f_field--wMax {
width: 100%;
}
textarea.f_field {
resize: vertical;
}
/*
テキストカウント付き入力フィールド
*/
.textField--count {
display: block;
}
.textField--count__field {
appearance: none;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
min-height: 40px;
padding: 5px;
width: 100%;
}
.textField--count__number {
font-size: 12px;
padding: 8px 0 0;
text-align: right;
}
/*
---
name: テキストフィールド .f_text01
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_text01
* テキストフィールド
* `<input type="text">` で使用
* .f_text01--widthMaxで幅100%
```html
<input class="f_text01" type="text" value="" placeholder="あいうえお">
<br><br>
<input class="f_text01 f_text01--widthMax" type="text" value="" placeholder="かきくけこ">
```
*/
.f_text01 {
appearance: none;
background: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box !important;
font-size: 16px;
min-height: 40px;
padding: 5px;
}
.f_text01:focus {
border: 1px solid #7cd8b7;
box-shadow: 0 0 5px 0 #7cd8b7;
outline: none;
}
.f_text01--widthMax {
width: 100%;
}
textarea.f_text01 {
resize: vertical;
}
/*
---
name: テキストフィールド .f_text02
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_text02
* テキストフィールド
* フィールド内にテキストも含みたい時に使用
* 幅はインラインでCSSを記述することで汎用性をもたせる
* .f_text02__field--taRでフィールド内を右寄せ
* .is_disabledでグレーアウト
* .f_text02--wMaxで幅100%
```html
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">テキスト</span>
<input name="" class="f_text02__field" style="width:96px" type="number" value="100" id="">
<span class="f_text02__text01">円</span>
</label>
<label class="f_text02 is_disabled">
<span class="f_text02__text01" style="width:65px;">テキスト</span>
<input name="" class="f_text02__field f_text02__field--taR" style="width:96px" type="number" value="200" id="" disabled>
<span class="f_text02__text01">円</span>
</label>
```
*/
.f_text02 {
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
display: table;
font-size: 16px;
line-height: 40px;
min-height: 40px;
padding: 0 10px;
}
.f_text02__text01 {
display: table-cell;
font-size: 14px;
vertical-align: middle;
}
.f_text02__field {
background: transparent;
border: none;
box-sizing: border-box;
display: table-cell;
font-size: 16px;
min-height: 40px;
vertical-align: middle;
}
.f_text02__field:focus {
border: 1px solid #7cd8b7;
box-shadow: 0 0 5px 0 #7cd8b7;
outline: none;
}
.f_text02__field--taR {
text-align: right;
}
.f_text02--wMax {
width: 100%;
}
.f_text02.is_disabled {
background: #ddd;
}
/*
---
name: テキストフィールド .f_text03
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_text03
* キーワード検索などの時に使用するフィールド
* サイズを変える時は中身のf_text03__fieldにスタイルでwidthを指定
* .f_text03--wMaxで幅100%
```html
<div class="f_text03">
<input type="text" name="" class="f_text03__field" style="width:300px;" value="" placeholder="商品名・説明から検索">
<button type="submit" value="検索" class="f_text03__btn"><span class="f_text03__icon i_loupe"></span></button>
</div>
<br>
<br>
<div class="f_text03 f_text03--wMax">
<input type="text" name="" class="f_text03__field" value="" placeholder="商品名・説明から検索">
<button type="submit" value="検索" class="f_text03__btn"><span class="f_text03__icon i_loupe"></span></button>
</div>
```
*/
.f_text03 {
background-color: #fff;
border: 1px solid #dcdcdc;
border-radius: 25px;
box-sizing: border-box;
display: inline-block;
position: relative;
}
.f_text03__field {
background: #fff;
border: none;
border-radius: 25px;
box-shadow: none;
box-sizing: border-box;
font-size: 14px;
outline: none;
padding: 11px 40px 11px 13px;
width: 100%;
}
.f_text03__btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
cursor: pointer;
display: block;
margin-top: -9px;
outline: 0;
padding: 0;
position: absolute;
right: 15px;
top: 50%;
color: #000;
}
.f_text03__icon:before {
font-size: 18px;
line-height: 1.1;
vertical-align: top;
}
.f_text03--wMax {
width: 100%;
}
/*
---
name: チェックボックス .f_checkbox
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_checkbox
* チェックボックス
* `inpute type="checkbox"` で利用
```html
<input type="checkbox" class="f_checkbox" checked>
<input type="checkbox" class="f_checkbox" >
```
*/
.f_checkbox {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none !important;
background-color: #fff;
border: 1px solid #ddd;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 25px;
outline: none;
position: relative;
vertical-align: middle;
width: 25px;
}
.f_checkbox:checked {
background-color: #0fafaa;
border: none;
}
.f_checkbox:checked:after {
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
box-sizing: border-box;
content: "";
display: block;
height: 14px;
left: 7px;
position: absolute;
top: 2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
}
.f_checkbox + label {
cursor: pointer;
display: inline-block;
line-height: 25px;
margin: 0;
padding: 2px 0 0 5px;
vertical-align: middle;
}
/*
---
name: チェックボックス01 .f_checkbox01
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_checkbox01
* チェックボックス01
* `inpute type="checkbox"` で利用
* IE, FF 対応版
* ※隣接セレクタとして`<label>`が必須
```html
<input id="check1" type="checkbox" class="f_checkbox01" checked><label for="check1"></label>
<input id="check2" type="checkbox" class="f_checkbox01"><label for="check2"></label>
```
*/
.f_checkbox01 {
display: none;
}
.f_checkbox01 + label {
cursor: pointer;
font-size: 13px;
padding-left: 33px;
position: relative;
}
.f_checkbox01 + label:before {
background-color: #fff;
border: 1px solid #ddd;
box-sizing: border-box;
content: "";
cursor: pointer;
display: block;
height: 25px;
left: 0;
outline: none;
position: absolute;
top: 0;
transition: background-color 0.2s linear;
width: 25px;
}
.f_checkbox01:checked + label:before {
background-color: #0fafaa;
border: none;
transition: background-color 0.2s linear;
}
.f_checkbox01:checked + label:after {
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
box-sizing: border-box;
content: "";
display: block;
height: 14px;
left: 7px;
position: absolute;
top: 3px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
}
/*
---
name: チェックボックスラッパー .f_checkboxWrapper
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_checkboxWrapper
* cakeのHTMLヘルパー利用時、checkbox自体にクラスつけられない場合、checkboxを囲むブロック要素にこのクラスを当てます
```html
<div class="f_checkboxWrapper">
<input type="checkbox" checked>
</div>
```
*/
.f_checkboxWrapper input[type=checkbox] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none !important;
background-color: #fff;
border: 1px solid #ddd;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 25px;
outline: none;
position: relative;
vertical-align: middle;
width: 25px;
}
.f_checkboxWrapper input[type=checkbox]:checked {
background-color: #0fafaa;
border: none;
}
.f_checkboxWrapper input[type=checkbox]:checked:after {
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
box-sizing: border-box;
content: "";
display: block;
height: 14px;
left: 7px;
position: absolute;
top: 2px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
}
.f_checkboxWrapper input[type=checkbox] + label {
cursor: pointer;
display: inline-block;
line-height: 25px;
margin: 0;
padding: 2px 0 0 5px;
vertical-align: middle;
}
/*
---
name: ラジオボタン .f_radio
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_radio
* ラジオボタン
* `inpute type="radio"` で使用
```html
<input id="f_radio_id_1" type="radio" class="f_radio" name="f_radio_name" checked>
<br>
<input id="f_radio_id_2" type="radio" class="f_radio" name="f_radio_name">
```
*/
.f_radio {
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 25px;
outline: none;
position: relative;
vertical-align: middle;
width: 25px;
}
.f_radio:checked {
background-color: #0fafaa;
border: none;
}
.f_radio:checked:after {
background-color: #fff;
border-radius: 100px;
bottom: 0;
box-sizing: border-box;
content: "";
height: 7px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 7px;
}
/*
---
name: ラジオボタン01 .f_radio01
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_radio01
* ラジオボタン
* `inpute type="radio"` で使用
* IE,FF対応版
* 隣接セレクタとして`<label>`が必須
```html
<input id="f_radio01_id_1" type="radio" class="f_radio01" name="f_radio01_name" checked><label for="f_radio01_id_1"></label>
<br>
<input id="f_radio01_id_2" type="radio" class="f_radio01" name="f_radio01_name"><label for="f_radio01_id_2"></label>
```
*/
.f_radio01 {
display: none;
}
.f_radio01 + label {
cursor: pointer;
display: inline-block;
font-size: 13px;
height: 25px;
padding-left: 33px;
position: relative;
}
.f_radio01 + label:before {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 100px;
box-sizing: border-box;
content: "";
cursor: pointer;
display: block;
height: 25px;
left: 0;
outline: none;
position: absolute;
top: 0;
transition: background-color 0.2s linear;
vertical-align: middle;
width: 25px;
}
.f_radio01:checked + label:before {
background-color: #0fafaa;
border: none;
transition: background-color 0.2s linear;
}
.f_radio01:checked + label:after {
background-color: #fff;
border-radius: 100px;
box-sizing: border-box;
content: "";
height: 7px;
left: 9px;
position: absolute;
top: 9px;
width: 7px;
}
/*
---
name: セレクトボックス .f_select01
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_select01
* セレクト
* `<select></select>`を囲むブロック要素に使用します
* f_select01--wMaxで幅100%
* f_select01--w350でwidth350px
* f_select01__arrowDownで矢印付きにする。selectをlabelで囲う。
```html
<div class="f_select01">
<select>
<option value="1">あいうえお</option>
<option value="2">かきくけこ</option>
<option value="3">さしすせそ</option>
</select>
</div>
<br>
<div class="f_select01 f_select01--w350">
<label class="f_select01__arrowDown">
<select>
<option value="1">たちつてと</option>
<option value="2">なにぬねの</option>
<option value="3">はひふへほ</option>
</select>
</label>
</div>
<br>
<div class="f_select01 f_select01--wMax">
<label class="f_select01__arrowDown">
<select>
<option value="1">まみむめも</option>
<option value="2">やゆよ</option>
<option value="3">らりるれろ</option>
</select>
</label>
</div>
```
*/
.f_select01 {
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
display: inline-block;
}
.f_select01 select {
background-color: #fff;
border: none;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
height: 38px;
padding: 4px 8px;
color: #000;
}
.f_select01--wMax {
width: 100%;
}
.f_select01--wMax select {
width: 100%;
}
.f_select01--w350 {
width: 350px;
}
.f_select01--w350 select {
width: 100%;
}
.f_select01__arrowDown {
display: block;
position: relative;
}
.f_select01__arrowDown:before {
border-right: 2px solid #cacaca;
border-top: 2px solid #cacaca;
bottom: 4px;
content: "";
height: 8px;
margin: auto;
pointer-events: none;
position: absolute;
right: 15px;
top: 0;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
vertical-align: top;
width: 8px;
}
.f_select01__arrowDown select {
-webkit-appearance: none;
appearance: none;
padding-right: 35px;
}
.f_select01__arrowDown select::-ms-expand {
display: none;
}
/*
---
name: レンジ
category:
- atoms/02_フォーム
tag:
- pc
- sp
---
.f_range01
* input type="range"に使用
```html
<input type="range" class="f_range01" name="" value="">
```
*/
.f_range01 {
-webkit-appearance: none;
cursor: pointer;
padding: 0;
vertical-align: middle;
/* fix for FF unable to apply focus style bug */
/*required for proper track sizing in FF*/
/*hide the outline behind the border*/
}
.f_range01::-webkit-slider-runnable-track {
background: #ddd;
border: none;
border-radius: 3px;
height: 2px;
}
.f_range01::-webkit-slider-thumb {
-webkit-appearance: none;
background: #0fafaa;
border: 2px solid #fff;
border-radius: 50%;
height: 20px;
margin-top: -9px;
width: 20px;
}
.f_range01:focus {
outline: none;
}
.f_range01:focus::-webkit-slider-runnable-track {
background: #bbb;
}
.f_range01::-moz-range-track {
background: #ddd;
border: none;
border-radius: 3px;
height: 2px;
}
.f_range01::-moz-range-thumb {
background-color: #0fafaa;
border: 2px solid #fff;
border-radius: 50%;
height: 20px;
width: 20px;
}
.f_range01:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
.f_range01:focus::-moz-range-track {
background: #bbb;
}
.f_range01::-ms-track {
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 12px 0;
/*remove default tick marks*/
color: transparent;
height: 2px;
}
.f_range01::-ms-fill-lower {
background: #bbb;
border-radius: 10px;
}
.f_range01::-ms-fill-upper {
background: #ddd;
border-radius: 10px;
}
.f_range01::-ms-thumb {
background: #0fafaa;
border: 2px solid #fff;
border-radius: 50%;
height: 20px;
margin-top: -3px;
width: 20px;
}
.f_range01:focus::-ms-fill-lower {
background: #bbb;
}
.f_range01:focus::-ms-fill-upper {
background: #ddd;
}
/*
---
name: スイッチ(非推奨)
category:
- atoms/03_フォームパーツ拡張
tag:
- pc
---
.f_switch01
* checkboxのデザイン拡張、スイッチUI
* jsとセットじゃないと動かない。今後使わない方向で。
```html
<label class="f_switch01">
<input type="checkbox" checked="">
<span class="label">
<span class="on">表示</span><span class="separator"></span><span class="off">非表示</span>
</span>
</label>
```
*/
.f_switch01 {
border: solid 1px #ccc;
border-radius: 20px;
display: inline-block;
*display: inline;
font-size: 11px;
height: 22px;
overflow: hidden;
-ms-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 80px;
*zoom: 1;
}
.f_switch01 input {
display: none;
}
.f_switch01 .label {
cursor: pointer;
display: block;
-ms-transition: margin 0.1s;
-moz-transition: margin 0.1s;
-o-transition: margin 0.1s;
-webkit-transition: margin 0.1s;
transition: margin 0.1s;
white-space: nowrap;
}
.f_switch01 .on,
.f_switch01 .off {
display: inline-block;
*display: inline;
height: 22px;
line-height: 22px;
text-align: center;
vertical-align: top;
width: 69px;
*zoom: 1;
}
.f_switch01 .on {
background-color: #0fafaa;
color: #fff;
text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
}
.f_switch01 .separator {
background-color: #eee;
border: solid 1px #999;
border-radius: 50%;
box-shadow: 1px 2px #fff inset, 1px 1px 5px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: inline-block;
*display: inline;
height: 22px;
margin: 0 -11px;
position: relative;
vertical-align: top;
width: 22px;
*zoom: 1;
}
.f_switch01 .off {
background-color: #eee;
color: #777;
text-shadow: 1px 1px #fff;
}
/*
---
name: スイッチ
category:
- atoms/03_フォームパーツ拡張
tag:
- pc
---
.f_switch02
* checkboxのデザイン拡張、スイッチUI
```html
<label class="f_switch02">
<input class="switch__input" type="checkbox" checked>
<div class="switch__container">
<ul class="switch__label">
<li class="switchLabel switchLabel--on">公開
<li class="switchLabel switchLabel--off">非公開
</ul>
</div>
</label>
```
*/
.f_switch02 {
cursor: pointer;
display: inline-block;
vertical-align: top;
}
.f_switch02 .switch__input {
display: none;
}
.f_switch02 .switch__input + .switch__container {
background-color: #b2bcca;
border: 2px solid #b2bcca;
border-radius: 100px;
box-sizing: border-box;
height: 26px;
overflow: hidden;
position: relative;
transition: 0.4s linear;
width: 82px;
}
.f_switch02 .switch__input + .switch__container .switch__label {
border-radius: 100px;
box-sizing: border-box;
height: 26px;
position: absolute;
right: 0;
top: 0;
transition: right 0.2s ease-in;
width: 136px;
}
.f_switch02 .switch__input:checked + .switch__container {
background-color: #0fafaa;
border: 2px solid #0fafaa;
transition: 0.4s linear;
}
.f_switch02 .switch__input:checked + .switch__container .switch__label {
right: -57px;
transition: right 0.2s ease-in;
}
.f_switch02 .switchLabel {
box-sizing: border-box;
color: #fff;
display: inline-block;
font-size: 12px;
height: 22px;
line-height: 22px;
padding: 0 8px;
vertical-align: top;
width: 50%;
}
.f_switch02 .switchLabel.switchLabel--on {
text-align: left;
}
.f_switch02 .switchLabel.switchLabel--on:after {
background-color: #fff;
border-radius: 50%;
box-sizing: border-box;
content: "";
display: block;
height: 22px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 22px;
}
.f_switch02 .switchLabel.switchLabel--off {
text-align: right;
}
/*
---
name: タブスイッチ
category:
- atoms/03_フォームパーツ拡張
tag:
- pc
- sp
---
.f_tabswitch01
* radioボタンのデザイン拡張、タブ切り替えUI
* `<input type="radio">`を囲むブロック要素に使用
```html
<div class="f_tabswitch01">
<input type="radio" id="type_official" name="appType" checked value="1">
<label for="type_official">Official Apps</label>
<input type="radio" id="type_connect" name="appType" value="2">
<label for="type_connect">Connect Apps</label>
</div>
```
*/
.f_tabswitch01 {
background-color: #ccc;
border-radius: 4px;
display: table;
overflow: hidden;
}
.f_tabswitch01 input[type=radio] {
display: none;
}
.f_tabswitch01 label {
background-color: rgba(136, 136, 136, 0);
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: table-cell;
font-size: 14px;
-webkit-font-smoothing: antialiased;
height: 36px;
line-height: 1.1;
padding: 0 10px;
text-align: center;
transition: background-color 0.2s ease-out;
vertical-align: middle;
width: 50%;
}
.f_tabswitch01 label:not(:last-child) {
border-right: 1px solid #fff;
}
.f_tabswitch01 input[type=radio]:checked + label {
background-color: #888888;
font-weight: bold;
transition: background-color 0.3s ease-out;
}
.f_tabswitch01--h40 label {
height: 40px;
}
/*
---
name: タグ選択
category:
- atoms/03_フォームパーツ拡張
tag:
- pc
- sp
---
.f_tagSelect01
* ラジオボタンのデザイン拡張、タグ選択UI
* `<input type="radio">`要素に使用
```html
<input class="f_tagSelect01 x_switchCat" type="radio" id="cat_all" name="appcat" value="" checked="">
<label for="cat_all">すべて</label>
<br><br>
<input class="f_tagSelect01 x_switchCat" type="radio" id="cat_function_shop" name="appcat" value=".function_shop">
<label for="cat_function_shop">ショップ機能</label>
<br><br>
<input class="f_tagSelect01 x_switchCat" type="radio" id="cat_function_item" name="appcat" value=".function_item">
<label for="cat_function_item">商品機能</label>
```
*/
.f_tagSelect01 {
display: none;
}
.f_tagSelect01 + label {
background-color: #ccc;
border-radius: 50px;
color: #fff;
cursor: pointer;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 20px;
text-align: center;
transition: background-color 0.2s ease-out;
}
.f_tagSelect01 + label:hover {
background-color: #0fafaa;
transition: background-color 0.2s ease-out;
}
.f_tagSelect01:checked + label {
background-color: #0fafaa;
}
/*
---
name: 見出しタイトル
category:
- atoms/04_見出し
tag:
- sp
---
.heading--title
* 見出しタイトル
* `h1` 、`h2` で利用
```html
<h1 class="heading--title">見出し<h1>
```
*/
.heading--title {
background-color: #666;
color: #fff;
font-size: 14px;
-webkit-font-smoothing: antialiased;
font-weight: bold;
line-height: 1.2;
margin: 10px 0 20px;
padding: 7px 0;
text-align: center;
}
.heading--title__sub {
font-size: 12px;
margin-left: 10px;
}
/*
---
name: title01
category:
- atoms/04_見出し
tag:
- pc
---
.title01
* admin(商品詳細や注文管理等のページ)で使用している共通の見出し
* 主に第1レベルで使用
```html
<h1 class="title01">見出し<h1>
```
*/
.title01 {
font-size: 22px;
margin: 0 0 30px;
}
/*
---
name: title02
category:
- atoms/04_見出し
tag:
- pc
---
.title02
* 第2レベル以降で使用する共通見出し
```html
<h2 class="title02">見出し<h2>
```
*/
.title02 {
color: #000;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
}
/*
---
name: title03
category:
- atoms/04_見出し
tag:
- pc
- sp
---
.title03
* 第2レベル以降で使用する共通見出し
```html
<h2 class="title03">見出し<h2>
```
*/
.title03 {
background: #f5f5f5;
line-height: 34px;
padding-left: 10px;
}
/*
---
name: title04
category:
- atoms/04_見出し
tag:
- sp
---
.title04
* 第2レベル以降で使用する共通見出し
```html
<h2 class="title04">見出し<h2>
```
*/
.title04 {
color: #444;
font-size: 14px;
font-weight: bold;
}
/*
---
name: title05
category:
- atoms/04_見出し
tag:
- sp
---
.title05
* 第2レベル以降で使用する共通見出し
```html
<h2 class="title05">見出し<h2>
```
*/
.title05 {
border-left: 5px solid #ddd;
font-size: 14px;
padding-left: 5px;
}
/*
---
name: steps01
category:
- atoms/08_ステップ表示
tag:
- pc
---
.steps01
* ステップ表示
* 過去のステップにはsteps01--doneを付ける
* 現在のページにはsteps01--nowを付ける
```html
<ul class="steps01">
<li class="steps01__child steps01--done">ステップ1</li>
<li class="steps01__child steps01--now">ステップ2</li>
<li class="steps01__child">ステップ3</li>
</ul>
```
*/
.steps01 {
overflow: hidden;
}
.steps01__child {
float: left;
font-size: 12px;
line-height: 29px;
position: relative;
}
.steps01__child:before {
background: #d8d8d8;
border-radius: 13px;
content: "";
display: inline-block;
height: 26px;
margin: -3px 10px 0 0;
vertical-align: middle;
width: 26px;
}
.steps01__child + .steps01__child {
margin: 0 0 0 20px;
padding: 0 0 0 29px;
}
.steps01__child + .steps01__child:after {
border-right: 1px solid #333;
border-top: 1px solid #333;
bottom: 0;
content: "";
height: 6px;
left: 0;
margin: auto 0;
position: absolute;
top: 0;
transform: rotate(45deg);
width: 6px;
}
.steps01--done:before {
background-color: #0fafaa;
color: #fff;
content: "\e90d";
font-family: "baseicon" !important;
line-height: 26px;
text-align: center;
}
.steps01--now {
color: #0fafaa;
font-weight: bold;
}
.steps01--now:before {
background-color: #fff;
border: 2px solid #0fafaa;
box-sizing: border-box;
}
/*
---
name: steps02
category:
- atoms/08_ステップ表示
tag:
- sp
---
.steps02
* ステップ表示
* 過去のステップにはsteps02--doneを付ける
* 現在のページにはsteps02--nowを付ける
```html
<ul class="steps02">
<li class="steps02__child steps02--done">ステップ1</li>
<li class="steps02__child steps02--now">ステップ2</li>
<li class="steps02__child">ステップ3</li>
</ul>
```
*/
.steps02 {
display: table;
table-layout: fixed;
width: 100%;
}
.steps02__child {
display: table-cell;
font-size: 12px;
padding: 0 0 30px;
position: relative;
text-align: center;
}
.steps02__child:before {
background: #d8d8d8;
border-radius: 13px;
bottom: 0;
content: "";
display: inline-block;
height: 26px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
vertical-align: middle;
width: 26px;
z-index: 20;
}
.steps02__child + .steps02__child:after {
border-top: 1px solid #ccc;
bottom: 12px;
content: "";
height: 1px;
left: -50%;
margin: auto 0;
position: absolute;
width: 100%;
z-index: 10;
}
.steps02--done:before {
background-color: #0fafaa;
color: #fff;
content: "\e90d";
font-family: "baseicon" !important;
line-height: 26px;
text-align: center;
}
.steps02--done:after {
border-color: #0fafaa;
}
.steps02--now {
font-weight: bold;
}
.steps02--now:before {
background-color: #fff;
border: 1px solid #0fafaa;
box-sizing: border-box;
}
.steps02--now:after {
border-color: #0fafaa;
}
/*
---
name: validアイコン
category:
- atoms/06_アイコン
tag:
- pc
- sp
---
.i_valid
* 認証アイコン
* 電話番号認証などで利用
* `<i>`タグで利用します.
```html
<i class='i_valid'></i>
```
*/
.i_valid {
background-color: #0fafaa;
border-radius: 50px;
display: inline-block;
height: 26px;
position: relative;
width: 26px;
}
.i_valid:after {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
content: "";
display: block;
height: 14px;
left: 8px;
position: absolute;
top: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
}
/*
---
name: validアイコン（大）
category:
- atoms/06_アイコン
tag:
- pc
- sp
---
.i_valid--L
* 認証アイコン
* 電話番号認証などで利用
* `<i>`タグで利用します.
```html
<i class='i_valid--L'></i>
```
*/
.i_valid--L {
background-color: #0fafaa;
border-radius: 100px;
display: inline-block;
height: 60px;
position: relative;
width: 60px;
}
.i_valid--L:after {
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
box-sizing: border-box;
content: "";
display: block;
height: 28px;
left: 20px;
position: absolute;
top: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 20px;
}
/*
---
name: ステータスラベル
category:
- atoms/05_ラベル
tag:
- pc
- sp
---
.status01
* status01--checkはチェックマークをつける。
* status01--red、status01--greenはそれぞれ色を変える。
* status01--small01はリストなどで出現が多い時に使用。
* status01--wMaxはエリア幅一杯に伸びるラベル。センター揃え。
```html
<span class="status01">ラベル</span>
<br><br>
<span class="status01 status01--check">ラベル</span>
<br><br>
<span class="status01 status01--red">ラベル</span>
<br><br>
<span class="status01 status01--redGhost">ラベル</span>
<br><br>
<span class="status01 status01--green">ラベル</span>
<br><br>
<span class="status01 status01--small01">小さいラベル</span>
<br><br>
<span class="status01 status01--wMax">伸びるラベル</span>
```
*/
.status01 {
background: #a0a0a0;
border-radius: 19px;
color: #fff;
display: inline-block;
font-size: 14px;
line-height: 38px;
padding: 0 20px;
position: relative;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.status01--check {
padding-left: 45px;
}
.status01--check:after {
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
bottom: 5px;
box-sizing: border-box;
content: "";
display: block;
height: 14px;
left: 20px;
margin: auto;
position: absolute;
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 10px;
}
.status01--gray {
background: #a0a0a0;
}
.status01--green {
background: #0fafaa;
}
.status01--red {
background: #f87e7e;
}
.status01--redGhost {
background: #fff1f1;
color: #f87e7e;
}
.status01--small01 {
font-size: 12px;
line-height: 26px;
padding: 0 10px;
}
.status01--wMax {
display: block;
padding: 0;
}
/*
---
name: ステータスラベル
category:
- atoms/05_ラベル
tag:
- pc
- sp
---
.status02
*
```html
<span class="status02">ラベル</span>
```
*/
.status02 {
border: 1px solid #f6a623;
border-radius: 3px;
color: #f6a623;
display: inline-block;
font-size: 10px;
line-height: 1.1;
margin: 0 0 6px;
padding: 3px 8px;
text-align: center;
}
.status02--orange {
border-color: #f6a623;
color: #f6a623;
}
.status02--blue {
border-color: #83adda;
color: #83adda;
}
.coverLayer {
background: none repeat scroll 0% 0% rgba(94, 94, 94, 0.6);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 5999999;
}
/* -----------------------------------------------------------------
text01
----------------------------------------------------------------- */
/*
---
name: text01
category:
- atoms/09_テキスト
tag:
- sp
---
通常のテキスト。両サイドのマージンが必要な時はblock01などのブロックコンポーネントを使う
```html
<div class="block01">
<p class="text01">これはダミーです。これはダミーです。これはダミーです。これはダミーです。これはダミーです。</p>
</div>
```
*/
.text01 {
line-height: 1.6;
}
.text01 + .text01 {
margin-top: 10px;
}
/*
---
name: センター揃えで幅320pxのボタン
category:
- molecules/ボタン
tag:
- pc
---
.m_btnWrap01
* センター揃えで幅320px
```html
<p class="m_btnWrap01"><button type="submit" class="btn--main">保存する</button></p>
```
*/
.m_btnWrap01 {
margin: 0 auto;
width: 320px;
}
.m_btnWrap01 [class^=btn--] {
width: 100%;
}
/*
---
name: 横並びにボタンを2つ並べる
category:
- molecules/ボタン
tag:
- pc
---
.m_btnWrap02
* センター揃えで幅320px
```html
<ul class="m_btnWrap02">
<li class="m_btnWrap02__child">
<a href="" onclick="history.back(); return false;" class="btn--cancel">戻る</a>
</li>
<li class="m_btnWrap02__child">
<button type="submit" class="btn--main">次へ</button>
</li>
</ul><!-- /.m_btnWrap02 -->
```
*/
.m_btnWrap02 {
display: table;
width: 100%;
}
.m_btnWrap02__child {
display: table-cell;
padding: 0 0 0 15px;
vertical-align: top;
width: 50%;
}
.m_btnWrap02__child:first-child {
padding: 0 15px 0 0;
}
.m_btnWrap02__child a,
.m_btnWrap02__child button {
line-height: 1.4;
}
.m_btnWrap02 [class^=btn--] {
width: 100%;
}
/*
---
name: チェックボックス + ラベルテキスト（1行）
category:
- molecules/フォーム
tag:
- pc
- sp
---
.m_checkboxWrapper01
* チェックボックス + ラベルの組み合わせ
* チェックボックスとラベルを内包するブロック要素に使う
* ※チェックボックスにはatomクラスの`f_checkbox01`が必要
```html
<div class="m_checkboxWrapper01">
<input id="check1" type="checkbox" class="f_checkbox01" checked><label for="check1">あいうえお</label>
</div>
```
*/
.m_checkboxWrapper01 label {
display: inline-block;
height: 25px;
line-height: 25px;
}
/*
---
name: ラジオボタン + ラベルテキスト
category:
- molecules/フォーム
tag:
- pc
- sp
---
.m_radioWrapper01
* ラジオボタン + ラベルの組み合わせ
* ラジオボタンとラベルを内包するブロック要素に使う
* ※チラジオボタンにはatomクラスの`f_radio01`が必要
* .m_radioWrapper01--multiLineのモディファイヤでラベル複数行
* 隣り合う.m_radioWrapper01は隣接セレクタで10pxのマージン
```html
<div class="m_radioWrapper01">
<input id="radio11" type="radio" class="f_radio01" name="test_radio" checked><label for="radio11">あいうえお</label>
</div>
<br>
<div class="m_radioWrapper01">
<input id="radio12" type="radio" class="f_radio01" name="test_radio"><label for="radio12">かきくけこ</label>
</div>
<br>
<div class="m_radioWrapper01 m_radioWrapper01--multiLine">
<input id="radio12" type="radio" class="f_radio01" name="test_radio"><label for="radio12">複数行複数行複数行複数行複数行複数行複数行複数行複数行複数行複数行複数行複数行複数行</label>
</div>
```
*/
.m_radioWrapper01 label {
display: inline-block;
height: 25px;
line-height: 25px;
}
.m_radioWrapper01 + .m_radioWrapper01 {
margin-top: 10px;
}
.m_radioWrapper01--multiLine label {
display: inline-block;
height: auto;
line-height: 1.5;
padding: 4px 0 0 33px;
}
/*
---
name: ラジオボタン + ラベルテキスト を横並びに
category:
- molecules/フォーム
tag:
- pc
- sp
---
.m_radioWrapper02
* ラジオボタン + ラベルの組み合わせ
* ラジオボタンとラベルを内包するブロック要素に使う
* ※ラジオボタンにはatomクラスの`f_radio01`が必要
* それぞれのラジオボタンを横並びにする
```html
<ul class="m_radioWrapper02">
<li class="m_radioWrapper02__child">
<input id="radio1" type="radio" class="f_radio01" name="test_radio2" checked><label for="radio1">あいうえお</label>
</li>
<li class="m_radioWrapper02__child">
<input id="radio2" type="radio" class="f_radio01" name="test_radio2"><label for="radio2">かきくけこ</label>
</li>
<li class="m_radioWrapper02__child">
<input id="radio3" type="radio" class="f_radio01" name="test_radio2"><label for="radio3">さしすせそ</label>
</li>
<li class="m_radioWrapper02__child">
<input id="radio4" type="radio" class="f_radio01" name="test_radio2"><label for="radio4">たちつてと</label>
</li>
<li class="m_radioWrapper02__child">
<input id="radio5" type="radio" class="f_radio01" name="test_radio2"><label for="radio5">なにぬねの</label>
</li>
</ul><!-- /.m_radioWrapper02 -->
```
*/
.m_radioWrapper02 {
overflow: hidden;
}
.m_radioWrapper02 label {
display: inline-block;
height: 25px;
line-height: 25px;
}
.m_radioWrapper02__child {
float: left;
margin-right: 20px;
}
/*
---
name: テキストフィールド + テキスト
category:
- molecules/フォーム
tag:
- pc
---
.m_fieldWrapper01
* f_field + テキストの組み合わせ
* f_fieldとテキストを内包するブロック要素に使う
* CakePHPのヘルパーで書かれている場合はオプションで`'div' => false,`とすることで余計な`<div>`を消す
```html
<div class="m_fieldWrapper01">
<input type="text" class="f_field"><p class="m_fieldWrapper01__text">テキスト</p>
</div>
```
*/
.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
<ul class="m_fieldWrapper02">
<li class="m_fieldWrapper02__child">
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">茨城県</span>
<input name="" class="f_text02__field" style="width:96px" type="text" value="" id="">
<span class="f_text02__text01">円</span>
</label><!-- /.f_text02 -->
</li>
<li class="m_fieldWrapper02__child">
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">栃木県</span>
<input name="" class="f_text02__field" style="width:96px" type="text" value="" id="">
<span class="f_text02__text01">円</span>
</label><!-- /.f_text02 -->
</li>
<li class="m_fieldWrapper02__child">
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">群馬県</span>
<input name="" class="f_text02__field" style="width:96px" type="text" value="" id="">
<span class="f_text02__text01">円</span>
</label><!-- /.f_text02 -->
</li>
<li class="m_fieldWrapper02__child">
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">埼玉県</span>
<input name="" class="f_text02__field" style="width:96px" type="text" value="" id="">
<span class="f_text02__text01">円</span>
</label><!-- /.f_text02 -->
</li>
<li class="m_fieldWrapper02__child">
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">千葉県</span>
<input name="" class="f_text02__field" style="width:96px" type="text" value="" id="">
<span class="f_text02__text01">円</span>
</label><!-- /.f_text02 -->
</li>
<li class="m_fieldWrapper02__child">
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">東京都</span>
<input name="" class="f_text02__field" style="width:96px" type="text" value="" id="">
<span class="f_text02__text01">円</span>
</label><!-- /.f_text02 -->
</li>
<li class="m_fieldWrapper02__child">
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">神奈川県</span>
<input name="" class="f_text02__field" style="width:96px" type="text" value="" id="">
<span class="f_text02__text01">円</span>
</label><!-- /.f_text02 -->
</li>
<li class="m_fieldWrapper02__child">
<label class="f_text02">
<span class="f_text02__text01" style="width:65px;">山梨県</span>
<input name="" class="f_text02__field" style="width:96px" type="text" value="" id="">
<span class="f_text02__text01">円</span>
</label><!-- /.f_text02 -->
</li>
</ul><!-- /.m_fieldWrapper02 -->
```
*/
.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
<div class="m_errorMessage u_mT10">
<div class="error-message">エラーメッセージ</div>
</div>
```
*/
.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
<ul class="mediaList01 mediaList01--noArrow">
<li class="mediaList01__child">
<a class="mediaList01__link" href="xxx">
<p class="mediaList01__labelWrap"><span class="mediaList01__label01 mediaList01__labelGreen">有効</span></p>
<p class="mediaList01__text01">テキストテキストテキストテキスト</p>
<p class="mediaList01__subText01">5.00 %OFF ／ 無期限</p>
</a>
</li>
<li class="mediaList01__child">
<a class="mediaList01__link" href="xxx">
<p class="mediaList01__labelWrap"><span class="mediaList01__label01 mediaList01__labelGray">有効</span></p>
<p class="mediaList01__text01">テキストテキストテキストテキスト</p>
<p class="mediaList01__subText01">5.00 %OFF ／ 無期限</p>
</a>
</li>
</ul>
<ul class="mediaList01 u_mT30">
<li class="mediaList01__child">
<a href="xxx" class="mediaList01__link">
<p class="mediaList01__labelWrap"><span class="mediaList01__label01 mediaList01__labelGreen">未発送</span></p>
<p class="mediaList01__text01">Schwarzenegger Arnold</p>
<p class="mediaList01__subText01"><span class="u_mR10">2017/12/12</span>注文個数 : 1個</p>
</a>
</li>
<li class="mediaList01__child">
<a href="xxx" class="mediaList01__link">
<p class="mediaList01__labelWrap"><span class="mediaList01__label01 mediaList01__labelGray">発送済</span></p>
<p class="mediaList01__text01">鈴木 太郎</p>
<p class="mediaList01__subText01"><span class="u_mR10">2017/12/07</span>注文個数 : 1個</p>
</a>
</li>
</ul>
<ul class="mediaList01 u_mT30">
<li class="mediaList01__child">
<a href="xxx" class="mediaList01__link">
<figure class="mediaList01__inner">
<p class="mediaList01__imgWrap">
<img class="mediaList01__img" src="https://placehold.jp/3d4070/ffffff/160x160.png?text=80%C3%9780" alt="タイトルタイトルタイトルタイトル">
</p>
<figcaption class="mediaList01__box">
<p class="mediaList01__text02">タイトルタイトルタイトルタイトル</p>
</figcaption>
</figure>
</a>
</li>
<li class="mediaList01__child">
<a href="xxx" class="mediaList01__link">
<figure class="mediaList01__inner">
<p class="mediaList01__imgWrap">
<img class="mediaList01__img" src="https://placehold.jp/3d4070/ffffff/160x160.png?text=80%C3%9780" alt="タイトルタイトルタイトルタイトル">
</p>
<figcaption class="mediaList01__box">
<p class="mediaList01__text02">タイトルタイトルタイトルタイトル</p>
<p class="mediaList01__subText01">2017/12/07</p>
</figcaption>
</figure>
</a>
</li>
</ul>
```
*/
.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
<div class="pagerGroup pagerGroup--center pagerGroup--shadow">
<div class="pagerGroup__header">1 件 から 20 件 まで ( 全 109 件 )</div>
<ol class="pagerGroup__order">
<li class="pagerGroup__list"><a href="#"><< 前</a></li>
<li class="pagerGroup__list pagerGroup__list--active">1</li>
<li class="pagerGroup__list"><a href="">2</a></li>
<li class="pagerGroup__list"><a href="">3</a></li>
<li class="pagerGroup__list"><a href="">4</a></li>
<li class="pagerGroup__list"><a href="">5</a></li>
<li class="pagerGroup__list"><a href="">6</a></li>
<li class="pagerGroup__list"><a href="">次 >></a></li>
</ol><!-- /.pagerGroup__order -->
</div>
```
*/
.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
<table class="tableStyle01">
<tr>
<th class="tableStyle01__th tableStyle01__w60">幅60px</th>
<th class="tableStyle01__th tableStyle01__w80">幅80px</th>
<th class="tableStyle01__th tableStyle01__w90">幅90px</th>
<th class="tableStyle01__th">幅自動</th>
<th class="tableStyle01__th tableStyle01__w60">幅60px</th>
</tr>
<tr>
<td class="tableStyle01__td tableStyle01__taL">左揃え</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taR">右揃え</td>
</tr>
<tr>
<td class="tableStyle01__td tableStyle01__taL"><span class="status01 status01--small01 status01--wMax">例</span></td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taR"><a class="btn--main btn--small01" href="xxx">詳細</a></td>
</tr>
</table>
<br>
<br>
<table class="tableStyle01 tableStyle01--borderTop">
<tr class="tableStyle01--hoverTr">
<td class="tableStyle01__td tableStyle01__taL"><span class="status01 status01--small01 status01--wMax">例</span></td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taR"><a class="btn--main btn--small01" href="xxx">詳細</a></td>
</tr>
<tr class="tableStyle01--hoverTr">
<td class="tableStyle01__td tableStyle01__taL"><span class="status01 status01--small01 status01--wMax">例</span></td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taC">センター</td>
<td class="tableStyle01__td tableStyle01__taR"><a class="btn--main btn--small01" href="xxx">詳細</a></td>
</tr>
</table>
<br>
<br>
<table class="tableStyle01 tableStyle01--borderTop">
<tr>
<td class="tableStyle01__td tableStyle01__imgContainer"><img class="tableStyle01__img" src="https://placehold.jp/76x76.png" alt="" /></td>
<td class="tableStyle01__td tableStyle01__taL">テキストテキストテキストテキストテキストテキストテキスト</td>
<td class="tableStyle01__td tableStyle01__taR"><a class="btn--main btn--small01" href="xxx">詳細</a></td>
</tr>
<tr>
<td class="tableStyle01__td tableStyle01__imgContainer"><img class="tableStyle01__img" src="https://placehold.jp/76x76.png" alt="" /></td>
<td class="tableStyle01__td tableStyle01__taL">テキストテキストテキストテキストテキストテキストテキスト</td>
<td class="tableStyle01__td tableStyle01__taR"><a class="btn--main btn--small01" href="xxx">詳細</a></td>
</tr>
</table>
```
*/
.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
<table class="tableStyle02">
<tr>
<th class="tableStyle02__th tableStyle02__w60">幅60px</th>
<th class="tableStyle02__th tableStyle02__w100">幅100px</th>
<th class="tableStyle02__th tableStyle02__w150">幅150px</th>
<th class="tableStyle02__th">幅自動</th>
<th class="tableStyle02__th tableStyle02__w100">幅100px</th>
</tr>
<tr>
<td class="tableStyle02__td tableStyle02__taL">左揃え</td>
<td class="tableStyle02__td tableStyle02__taC">センター</td>
<td class="tableStyle02__td tableStyle02__taC">センター</td>
<td class="tableStyle02__td tableStyle02__taC">センター</td>
<td class="tableStyle02__td tableStyle02__taR">右揃え</td>
</tr>
<tr>
<td class="tableStyle02__td tableStyle02__taL"><span class="status01 status01--small01 status01--wMax">例</span></td>
<td class="tableStyle02__td tableStyle02__taC">センター</td>
<td class="tableStyle02__td tableStyle02__taC">センター</td>
<td class="tableStyle02__td tableStyle02__taC">センター</td>
<td class="tableStyle02__td tableStyle02__taR"><a class="btn--main btn--small01" href="xxx">詳細</a></td>
</tr>
</table>
```
*/
.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;
}
/* -----------------------------------------------------------------
/pages/ サブページ系
----------------------------------------------------------------- */
html[data-scope-controller=pages] {
/* レイアウト
----------------------------------------------------------------- */
/* .利用規約ページ
------------------------------------------------------------------ */
/* .pagesBlock
----------------------------------------------------------------- */
/* pagesTitle01
----------------------------------------------------------------- */
/* pagesBody01
----------------------------------------------------------------- */
}
html[data-scope-controller=pages] body {
background-color: #edeef1;
}
html[data-scope-controller=pages] #mainContent {
background: none;
}
html[data-scope-controller=pages] #content-wrap {
margin: 0 auto 90px;
max-width: 1000px;
}
html[data-scope-controller=pages] .termsContent {
align-items: flex-start;
display: flex;
}
html[data-scope-controller=pages] .termsContent__block {
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
margin: 0 auto;
margin-right: 0;
padding: 36px;
width: 744px;
}
html[data-scope-controller=pages] .termsContent__block.center {
margin-right: auto;
}
html[data-scope-controller=pages] .termsContent__updateList {
text-align: right;
}
html[data-scope-controller=pages] .termsContent__updateList li {
line-height: 24px;
}
html[data-scope-controller=pages] .pagesNav {
width: 236px;
}
html[data-scope-controller=pages] .pagesNav__child {
background: #fff;
border-bottom: 1px solid #f0f1f4;
margin-right: auto;
}
html[data-scope-controller=pages] .pagesNav__child:first-child {
border-radius: 4px 4px 0 0;
overflow: hidden;
}
html[data-scope-controller=pages] .pagesNav__child:last-child {
border-radius: 0 0 4px 4px;
overflow: hidden;
}
html[data-scope-controller=pages] .pagesNav__link {
box-sizing: border-box;
color: #2e3242;
display: inline-block;
font-size: 14px;
line-height: 1.4;
padding: 18px 16px;
position: relative;
width: 236px;
}
html[data-scope-controller=pages] .pagesNav__link:after {
color: #b2bcca;
content: "\e959";
font-family: "baseicon" !important;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
html[data-scope-controller=pages] .pagesNav__link:hover {
background-color: #fcfcfd;
}
html[data-scope-controller=pages] .pagesNav__small {
font-size: 13px;
}
html[data-scope-controller=pages] .pagesNav .is_active {
background-color: #fcfcfd;
font-weight: bold;
}
html[data-scope-controller=pages] .pagesBlock {
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
margin: 0 auto;
padding: 36px;
}
html[data-scope-controller=pages] .pagesTitle01 {
font-size: 22px;
margin: 0 0 30px;
margin: 0 0 24px;
font-weight: bold;
}
html[data-scope-controller=pages] .pagesBody01 h2 {
font-size: 18px;
font-weight: bold;
margin: 35px 0 15px;
}
html[data-scope-controller=pages] .pagesBody01 p {
font-size: 14px;
line-height: 1.8;
margin: 0 0 20px;
}
html[data-scope-controller=pages] .pagesBody01 dl {
margin: 0 0 20px;
}
html[data-scope-controller=pages] .pagesBody01 dl dt {
font-size: 14px;
font-weight: bold;
margin: 0 0 8px;
}
html[data-scope-controller=pages] .pagesBody01 dl dd {
font-size: 14px;
line-height: 1.6;
margin: 0 0 8px;
}
html[data-scope-controller=pages] .pagesBody01 dl dd ul {
margin: 10px 20px;
}
html[data-scope-controller=pages] .pagesBody01 dl dd li {
margin: 0 0 10px;
}
html[data-scope-controller=pages] .pagesBody01 dl dd + dt {
margin-top: 30px;
}
@media only screen and (max-width: 828px) {
html[data-scope-controller=pages] {
/* レイアウト
----------------------------------------------------------------- */
/* .pagesNav
------------------------------------------------------------------ */
/* pagesTitle01
----------------------------------------------------------------- */
/* .pagesBlock
----------------------------------------------------------------- */
/* pagesBody01
----------------------------------------------------------------- */
}
html[data-scope-controller=pages] body {
background: #fff;
}
html[data-scope-controller=pages] #content-wrap {
margin: 0 0 50px;
max-width: none;
padding: 49px 0 0;
}
html[data-scope-controller=pages] .termsContent {
display: block;
}
html[data-scope-controller=pages] .termsContent__block {
padding: 0;
width: 100%;
}
html[data-scope-controller=pages] .pagesTitle01 {
margin: 0 !important;
}
html[data-scope-controller=pages] .pagesNav {
display: flex;
flex-wrap: wrap;
background: #fff;
border: none;
padding: 0;
width: 100%;
}
html[data-scope-controller=pages] .pagesNav__child {
box-sizing: border-box;
display: inline-block;
float: left;
margin: 0;
width: 50%;
}
html[data-scope-controller=pages] .pagesNav__child:nth-child(odd) {
border-right: 1px solid #f0f1f4;
}
html[data-scope-controller=pages] .pagesNav__link {
font-size: 12px;
line-height: 1.4;
padding: 10px 8px;
padding-right: 18px;
width: 100%;
}
html[data-scope-controller=pages] .pagesNav__small {
font-size: 11px;
}
html[data-scope-controller=pages] .pagesTitle01 {
background-color: #666;
color: #fff;
font-size: 16px;
font-weight: normal;
height: 36px;
line-height: 36px;
margin: 0 0 20px;
text-align: center;
text-shadow: none;
}
html[data-scope-controller=pages] .pagesBlock {
border: none;
margin: 0;
padding: 0;
}
html[data-scope-controller=pages] .pagesBody01 {
box-sizing: border-box;
margin: 0;
padding: 16px;
}
html[data-scope-controller=pages] .pagesBody01 dd ul {
margin: 10px;
}
}
@media only screen and (max-width: 374px) {
html[data-scope-controller=pages] {
/* .pagesNav
------------------------------------------------------------------ */
}
html[data-scope-controller=pages] .pagesNav__link {
font-size: 11px;
}
html[data-scope-controller=pages] .pagesNav__link:after {
display: none;
}
html[data-scope-controller=pages] .pagesNav__small {
font-size: 10px;
}
}
/* Slider */
.slick-slider {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: relative;
-webkit-tap-highlight-color: transparent;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slick-list {
display: block;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
display: block;
left: 0;
position: relative;
top: 0;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir=rtl] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
border: 1px solid transparent;
display: block;
height: auto;
}
.slick-arrow.slick-hidden {
display: none;
}
.topFooter {
background-color: #2e3242;
padding: 76px 0 62px 0;
}
.topFooter__wrapper {
width: 860px;
margin: 0 auto;
}
.topFooter__contents {
display: flex;
justify-content: space-between;
}
.topFooter__heading {
font-size: 16px;
color: #fff;
margin-bottom: 12px;
letter-spacing: 2px;
}
.topFooter__listRow {
display: flex;
}
.topFooter__listRow > *:not(:first-child) {
margin-left: 80px;
}
.topFooter__list {
white-space: nowrap;
}
.topFooter__link {
color: #DBD4D4;
font-size: 12px;
line-height: 24px;
}
.topFooter__notes {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 56px;
}
.topFooter__message {
display: flex;
align-items: center;
}
.topFooter__messageText {
margin-left: 16px;
color: #fff;
font-size: 12px;
letter-spacing: 2px;
}
.topFooter__tipi {
font-size: 24px;
color: #fff;
}
.topFooter__sns {
display: flex;
justify-content: flex-end;
}
.topFooter__snsItem:not(:first-child) {
margin-left: 16px;
}
.topFooter__snsLink {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
}
.topFooter__copy {
margin-top: 26px;
color: #fff;
font-size: 12px;
letter-spacing: 2px;
}
@media only screen and (max-width: 899px) {
.topFooter {
padding: 30px 0 67px;
}
.topFooter__wrapper {
box-sizing: border-box;
width: 100%;
padding: 0 16px;
}
.topFooter__contents {
flex-wrap: wrap;
}
.topFooter__section {
width: 50%;
margin-top: 16px;
}
.topFooter__listRow {
display: block;
}
.topFooter__listRow > *:not(:first-child) {
margin-left: 0px;
}
.topFooter__list {
margin-left: 0;
}
.topFooter__listItem {
margin-top: 2px;
}
.topFooter__notes {
flex-direction: column;
}
.topFooter__messageText {
letter-spacing: px2Rem(1);
}
.topFooter__info {
margin-top: 56/2px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
.topFooter__copy {
margin-top: 0;
}
}
/*# sourceMappingURL=index.css.map */