Styleguide 7.3
*/
/*
カートヘッダ
購入完了までの手順や、現在の状態を表示します。
ul 要素を用いたリスト要素としてマークアップします。
ex [カートページ ヘッダ部分](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/7.3.cart.pug
+ec-progress
sg-wrapper:
Styleguide 7.3.1
*/
.ec-progress {
margin: 0 auto;
padding: 8px 0 16px;
display: table;
table-layout: fixed;
width: 100%;
max-width: 600px;
list-style: none;
}
.ec-progress .ec-progress__item {
display: table-cell;
position: relative;
font-size: 14px;
text-align: center;
font-weight: bold;
z-index: 10;
}
.ec-progress .ec-progress__item:after {
content: '';
position: absolute;
display: block;
background: #5d4136;
width: 100%;
height: 0.25em;
top: 1.25em;
left: 50%;
z-index: -1;
}
.ec-progress .ec-progress__item:last-child:after {
display: none;
}
.ec-progress .ec-progress__number {
line-height: 30px;
width: 30px;
height: 30px;
margin-bottom: 5px;
font-size: 12px;
background: #5d4136;
color: #fff;
top: 0;
left: 18px;
display: inline-block;
text-align: center;
vertical-align: middle;
border-radius: 50%;
}
.ec-progress .ec-progress__label {
font-size: 12px;
}
.ec-progress .is-complete .ec-progress__number {
background: #e17777;
}
.ec-progress .is-complete .ec-progress__label {
color: #5d4136;
}
/*
カートナビゲーション
カートナビゲーションを表示します。 カートに追加された商品の個数も表示します。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerCart
sg-wrapper:
Styleguide 7.3.5
*/
.ec-cartNavi {
display: inline-block;
padding: 10px 0 0 20px;
width: auto;
color: black;
background: transparent;
}
.ec-cartNavi .ec-cartNavi__icon {
display: inline-block;
font-size: 20px;
display: inline-block;
opacity: 1;
visibility: visible;
-webkit-animation: fadeIn 200ms linear 0s;
animation: fadeIn 200ms linear 0s;
position: relative;
}
.ec-cartNavi .ec-cartNavi__badge {
display: inline-block;
border-radius: 99999px;
box-sizing: border-box;
padding: 5px;
height: 17px;
font-size: 10px;
line-height: 0.7;
vertical-align: top;
color: #fff;
text-align: left;
white-space: nowrap;
background-color: #e17777;
position: absolute;
left: 60%;
top: -10px;
}
.ec-cartNavi .ec-cartNavi__price {
display: none;
}
.ec-cartNavi.is-active .ec-cartNavi__icon:before {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.ec-cartNavi.is-active .ec-cartNavi__badge {
display: none;
}
/*
カートナビゲーションのポップアップ(商品詳細)
カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
div(style="height:350px;")
// 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
.is_active
.ec-cartNavi
.ec-cartNavi__icon
img(src='/moc/icon/cart-dark.svg', alt='close')
.ec-cartNavi__iconClose
img(src='/moc/icon/cross-dark.svg', alt='close')
.ec-cartNavi__badge 1
.ec-cartNavi__label
| 合計
.ec-cartNavi__price ¥1920
+b.ec-cartNaviIsset
+e.cart
+e.cartImage
img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
+e.cartContent
+e.cartContentTitle ミニテーブル
+e.cartContentPrice ¥ 12,960
+e.cartContentTax 税込
+e.cartContentNumber 数量：1
+e.action
a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
a.ec-blockBtn.ec-cartNavi--cancel キャンセル
Styleguide 7.3.6
*/
.ec-cartNaviIsset {
display: none;
width: 100%;
text-align: center;
background: #f8f8f8;
box-sizing: border-box;
padding: 16px;
z-index: 20;
position: absolute;
right: 0;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cart {
border-bottom: 1px solid #E8E8E8;
margin-bottom: 16px;
padding-bottom: 32px;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
content: " ";
display: table;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
clear: both;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage {
float: left;
width: 45%;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage img {
width: 100%;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
float: right;
width: 55%;
padding-left: 16px;
text-align: left;
box-sizing: border-box;
}
.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
color: #fff;
margin-bottom: 8px;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
margin-bottom: 8px;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
font-weight: bold;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax {
display: inline-block;
font-size: 12px;
font-weight: normal;
margin-left: 2px;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
font-size: 14px;
}
.ec-cartNaviIsset.is-active {
display: block;
}
/*
カートナビゲーションのポップアップ(商品なし)
カートナビゲーションのポップアップを表示します。商品が登録されていない場合の表示です。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
div(style="height:170px;")
// 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
.is_active
.ec-cartNavi
.ec-cartNavi__icon
img(src='/moc/icon/cart-dark.svg', alt='cart')
.ec-cartNavi__iconClose
img(src='/moc/icon/cross-dark.svg', alt='close')
.ec-cartNavi__badge 1
.ec-cartNavi__label
| 合計
.ec-cartNavi__price ¥1920
.ec-cartNaviNull
.ec-cartNaviNull__message
p 現在カート内に
br
| 商品がございません。
//+b.ec-cartNaviIsset
// +e.cart
// +e.cartImage
// img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
// +e.cartContent
// +e.cartContentTitle ミニテーブル
// +e.cartContentPrice ¥ 12,960
// +e.cartContentTax 税込
// +e.cartContentNumber 数量：1
// +e.action
// a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
// a.ec-blockBtn キャンセル
sg-wrapper:
Styleguide 7.3.7
*/
.ec-cartNaviNull {
display: none;
width: 100%;
text-align: center;
background: #f8f8f8;
box-sizing: border-box;
padding: 16px;
z-index: 3;
position: absolute;
right: 0;
}
.ec-cartNaviNull .ec-cartNaviNull__message {
border: 1px solid #D9D9D9;
padding: 16px 0;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #F99;
}
.ec-cartNaviNull .ec-cartNaviNull__message p {
margin: 0;
}
.ec-cartNaviNull.is-active {
display: block;
}
/*
総計
会計時の合計金額、総計を表示します。
ex [カートページ 統計部分](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/7.3.cart.pug
+ec-totalBox
Styleguide 7.3.8
*/
.ec-totalBox {
background: #F3F3F3;
padding: 16px;
margin-bottom: 16px;
}
.ec-totalBox .ec-totalBox__spec {
display: flex;
justify-content: space-between;
-ms-flex-pack: space-between;
margin-bottom: 8px;
}
.ec-totalBox .ec-totalBox__spec dt {
font-weight: normal;
text-align: left;
}
.ec-totalBox .ec-totalBox__spec dd {
text-align: right;
}
.ec-totalBox .ec-totalBox__spec .ec-totalBox .ec-totalBox__spec__specTotal {
color: #e17777;
}
.ec-totalBox .ec-totalBox__total {
border-top: 1px dotted #ccc;
padding: 8px 0;
text-align: right;
font-size: 14px;
font-weight: bold;
}
.ec-totalBox .ec-totalBox__paymentTotal {
padding: 8px 0;
text-align: right;
font-size: 14px;
font-weight: bold;
}
.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__price, .ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__taxLabel {
color: #e17777;
}
.ec-totalBox .ec-totalBox__price {
margin-left: 16px;
font-size: 16px;
font-weight: bold;
}
.ec-totalBox .ec-totalBox__taxLabel {
margin-left: 8px;
font-size: 12px;
}
.ec-totalBox .ec-totalBox__taxRate {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
font-size: 10px;
}
.ec-totalBox .ec-totalBox__taxRate dt {
font-weight: normal;
text-align: left;
margin-right: 8px;
}
.ec-totalBox .ec-totalBox__taxRate dt::before {
content: "[ ";
}
.ec-totalBox .ec-totalBox__taxRate dd {
text-align: right;
}
.ec-totalBox .ec-totalBox__taxRate dd::after {
content: " ]";
}
.ec-totalBox .ec-totalBox__pointBlock {
padding: 18px 20px 10px;
margin-bottom: 10px;
background: #fff;
}
.ec-totalBox .ec-totalBox__btn {
color: #fff;
}
.ec-totalBox .ec-totalBox__btn a {
color: inherit;
text-decoration: none;
}
.ec-totalBox .ec-totalBox__btn a:hover {
text-decoration: none;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
font-size: 16px;
font-weight: bold;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
margin-top: 8px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
お知らせ
新着情報やバナーなどの掲載項目を紹介していきます。
sg-wrapper:
Styleguide 8.1
*/
/*
新着情報
新着情報の掲載をします。
ex [トップページ 新着情報部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/8.1.info.pug
+ec-news
Styleguide 8.1.1
*/
.ec-news {
margin-bottom: 16px;
background: #F8F8F8;
}
.ec-news .ec-news__title {
font-weight: bold;
padding: 8px;
font-size: 16px;
text-align: center;
}
.ec-news .ec-news__items {
padding: 0;
list-style: none;
border-top: 1px dotted #ccc;
}
/*
折りたたみ項目
折りたたみ項目を掲載します。
ex [トップページ 折りたたみ項目部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/8.1.info.pug
+b.ec-news
+e.title 新着情報
+e.UL.items
+e.LI.item
+b.ec-newsline.is_active
+e.info
+e.date 2016/09/29
+e.comment サイトオープンしました
+e.close
a.ec-closeBtn--circle
span.ec-closeBtn--circle__icon
.ec-icon
img(src='/moc/icon/angle-down-white.svg', alt='')
+e.description 一人暮らしからオフィスなどさまざまなシーンで あなたの生活をサポートするグッズをご家庭へお届けします！
Styleguide 8.1.2
*/
.ec-newsline {
display: flex;
flex-wrap: wrap;
overflow: hidden;
padding: 0 16px;
}
.ec-newsline .ec-newsline__info {
width: 100%;
padding: 16px 0;
}
.ec-newsline .ec-newsline__info:after {
content: " ";
display: table;
}
.ec-newsline .ec-newsline__info:after {
clear: both;
}
.ec-newsline .ec-newsline__date {
display: inline-block;
margin-right: 10px;
float: left;
}
.ec-newsline .ec-newsline__comment {
display: inline-block;
float: left;
}
.ec-newsline .ec-newsline__close {
float: right;
display: inline-block;
text-align: right;
}
.ec-newsline .ec-newsline__close .ec-closeBtn--circle {
display: inline-block;
width: 25px;
height: 25px;
min-width: 25px;
min-height: 25px;
}
.ec-newsline .ec-newsline__description {
width: 100%;
height: 0;
transition: all .2s ease-out;
}
.ec-newsline.is_active .ec-newsline__description {
height: auto;
transition: all .2s ease-out;
padding-bottom: 16px;
}
.ec-newsline.is_active .ec-icon img {
transform: rotateX(180deg);
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
マイページ
マイページで利用するためのスタイルガイド群です。
sg-wrapper:
Styleguide 9.1
*/
/*
マイページ
マイページで表示するメニューリストです。
ul を利用したリスト要素で記述します。
ex [マイページ メニューリスト部分](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist
Styleguide 9.1.1
*/
.ec-navlistRole .ec-navlistRole__navlist {
display: flex;
flex-wrap: wrap;
border-color: #E8DFC4;
border-style: solid;
border-width: 1px 0 0 1px;
margin-bottom: 32px;
padding: 0;
list-style: none;
}
.ec-navlistRole .ec-navlistRole__navlist a {
color: inherit;
text-decoration: none;
}
.ec-navlistRole .ec-navlistRole__navlist a:hover {
text-decoration: none;
}
.ec-navlistRole .ec-navlistRole__item {
width: 50%;
border-color: #E8DFC4;
border-style: solid;
border-width: 0 1px 1px 0;
text-align: center;
font-weight: bold;
}
.ec-navlistRole .ec-navlistRole__item a {
padding: 16px;
width: 100%;
display: inline-block;
background: #F6F2E8;
}
.ec-navlistRole .ec-navlistRole__item a:hover {
background: #E8DFC4;
}
.ec-navlistRole .active a {
color: #e17777;
}
/*
マイページ（お気に入り機能無効）
マイページで表示するメニューリストです。
ul を利用したリスト要素で記述します。
ex [マイページ メニューリスト部分](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist_noFavorite
Styleguide 9.1.2
*/
/*
Welcome メッセージ
マイページで表示するログイン名の表示コンポーネントです。
ex [マイページ メニューリスト下部分](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-welcomeMsg
Styleguide 9.1.3
*/
.ec-welcomeMsg {
margin-right: auto;
margin-left: auto;
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
margin: 1em 0;
padding-bottom: 32px;
text-align: center;
border-bottom: 1px dotted #ccc;
}
.ec-welcomeMsg:after {
content: " ";
display: table;
}
.ec-welcomeMsg:after {
clear: both;
}
.ec-welcomeMsg textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-welcomeMsg img {
max-width: 100%;
}
.ec-welcomeMsg html {
box-sizing: border-box;
}
.ec-welcomeMsg *, .ec-welcomeMsg *::before, .ec-welcomeMsg *::after {
box-sizing: inherit;
}
.ec-welcomeMsg img {
width: 100%;
}
/*
お気に入り一覧
お気に入り一覧で表示するアイテムの表示コンポーネントです。
ex [マイページ お気に入り一覧](http://demo3.ec-cube.net/mypage/favorite)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-favorite
Styleguide 9.1.4
*/
.ec-favoriteRole .ec-favoriteRole__header {
margin-bottom: 16px;
}
.ec-favoriteRole .ec-favoriteRole__itemList {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
}
.ec-favoriteRole .ec-favoriteRole__itemList a {
color: inherit;
text-decoration: none;
}
.ec-favoriteRole .ec-favoriteRole__itemList a:hover {
text-decoration: none;
}
.ec-favoriteRole .ec-favoriteRole__item {
margin-bottom: 8px;
width: 47.5%;
position: relative;
box-sizing: border-box;
padding: 10px;
}
.ec-favoriteRole .ec-favoriteRole__item-image {
height: 150px;
margin-bottom: 10px;
text-align: center;
}
.ec-favoriteRole .ec-favoriteRole__item img {
width: auto;
max-height: 150px;
}
.ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle {
position: absolute;
right: 10px;
top: 10px;
}
.ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle .ec-icon img {
width: 1em;
height: 1em;
}
.ec-favoriteRole .ec-favoriteRole__itemThumb {
display: block;
height: auto;
margin-bottom: 8px;
}
.ec-favoriteRole .ec-favoriteRole__itemTitle {
margin-bottom: 2px;
}
.ec-favoriteRole .ec-favoriteRole__itemPrice {
font-weight: bold;
margin-bottom: 0;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
標準セクション
通常のコンテナブロックです。
ex [商品詳細ページ コンテナ](http://demo3.ec-cube.net/products/detail/33)
Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-roleRole
Styleguide 11.1
*/
.ec-role {
margin: 0 auto 20px auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-role:after {
content: " ";
display: table;
}
.ec-role:after {
clear: both;
}
.ec-role textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-role img {
max-width: 100%;
}
.ec-role html {
box-sizing: border-box;
}
.ec-role *, .ec-role *::before, .ec-role *::after {
box-sizing: inherit;
}
.ec-role img {
width: 100%;
}
/*
マイページセクション
マイページ専用のコンテナブロックです。
ex [マイページ コンテナ](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-mypageRole
Styleguide 11.1.2
*/
.ec-mypageRole {
margin-right: auto;
margin-left: auto;
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
}
.ec-mypageRole:after {
content: " ";
display: table;
}
.ec-mypageRole:after {
clear: both;
}
.ec-mypageRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-mypageRole img {
max-width: 100%;
}
.ec-mypageRole html {
box-sizing: border-box;
}
.ec-mypageRole *, .ec-mypageRole *::before, .ec-mypageRole *::after {
box-sizing: inherit;
}
.ec-mypageRole img {
width: 100%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
@keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.bg-load-overlay {
background: rgba(255, 255, 255, 0.4);
box-sizing: border-box;
position: fixed;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: space-around;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2147483647;
opacity: 1;
}
/*
ヘッダー
ヘッダー用のプロジェクトコンポーネントを提供します。
ex [トップページ ヘッダー](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/11.2.header.pug
include /assets/tmpl/elements/11.3.headerNavi.pug
include /assets/tmpl/elements/11.4.categoryNavi.pug
+b.ec-layoutRole
+e.header
+ec-headerRole
+ec-headerNaviRole
+ec-categoryNaviRole
Styleguide 11.2
*/
.ec-layoutRole {
width: 100%;
transition: transform 0.3s;
background: #fff;
}
.ec-layoutRole .ec-layoutRole__contentTop {
padding: 0;
}
.ec-layoutRole .ec-layoutRole__contents {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 1150px;
display: flex;
flex-wrap: nowrap;
}
.ec-layoutRole .ec-layoutRole__main {
width: 100%;
}
.ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 100%;
}
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
width: 100%;
}
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
display: none;
}
.ec-headerRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
padding-top: 15px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: auto;
}
.ec-headerRole:after {
content: " ";
display: table;
}
.ec-headerRole:after {
clear: both;
}
.ec-headerRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-headerRole img {
max-width: 100%;
}
.ec-headerRole html {
box-sizing: border-box;
}
.ec-headerRole *, .ec-headerRole *::before, .ec-headerRole *::after {
box-sizing: inherit;
}
.ec-headerRole img {
width: 100%;
}
.ec-headerRole:after {
display: none;
}
.ec-headerRole::before {
display: none;
}
.ec-headerRole .ec-headerRole__title {
width: 100%;
}
.ec-headerRole .ec-headerRole__navSP {
display: block;
position: absolute;
top: 15px;
width: 27%;
right: 0;
text-align: right;
}
.ec-headerNaviRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
}
.ec-headerNaviRole:after {
content: " ";
display: table;
}
.ec-headerNaviRole:after {
clear: both;
}
.ec-headerNaviRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-headerNaviRole img {
max-width: 100%;
}
.ec-headerNaviRole html {
box-sizing: border-box;
}
.ec-headerNaviRole *, .ec-headerNaviRole *::before, .ec-headerNaviRole *::after {
box-sizing: inherit;
}
.ec-headerNaviRole img {
width: 100%;
}
.ec-headerNaviRole .fa-bars {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ec-headerNaviRole .ec-headerNaviRole__left {
width: calc(100% / 3);
}
.ec-headerNaviRole .ec-headerNaviRole__search {
display: none;
}
.ec-headerNaviRole .ec-headerNaviRole__navSP {
display: block;
}
.ec-headerNaviRole .ec-headerNaviRole__right {
width: calc(100% * 2 / 3);
display: flex;
justify-content: flex-end;
align-items: center;
}
.ec-headerNaviRole .ec-headerNaviRole__nav {
display: inline-block;
}
.ec-headerNaviRole .ec-headerNaviRole__nav a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__cart {
display: inline-block;
}
.ec-headerNaviRole .ec-headerNaviRole__cart a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
text-decoration: none;
}
.ec-headerNavSP {
display: block;
cursor: pointer;
border-radius: 50%;
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
font-size: 18px;
text-align: center;
color: black;
background: white;
position: fixed;
top: 10px;
left: 10px;
z-index: 1000;
}
.ec-headerNavSP .fas {
vertical-align: top;
}
.ec-headerNavSP.is-active {
display: none;
}
/*
ヘッダー：タイトル
ヘッダー内で使用されるタイトルコンポーネントです。
Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerTitle
Styleguide 11.2.1
*/
.ec-headerTitle {
color: #5d4136;
-webkit-text-size-adjust: 100%;
}
.ec-headerTitle textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-headerTitle img {
max-width: 100%;
}
.ec-headerTitle html {
box-sizing: border-box;
}
.ec-headerTitle *, .ec-headerTitle *::before, .ec-headerTitle *::after {
box-sizing: inherit;
}
.ec-headerTitle img {
width: 100%;
}
.ec-headerTitle .ec-headerTitle__title {
text-align: center;
}
.ec-headerTitle .ec-headerTitle__title h1 {
margin: 0;
padding: 0;
}
.ec-headerTitle .ec-headerTitle__title a {
display: inline-block;
margin-bottom: 30px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: black;
}
.ec-headerTitle .ec-headerTitle__title a:hover {
opacity: .8;
}
.ec-headerTitle .ec-headerTitle__subtitle {
font-size: 10px;
text-align: center;
}
.ec-headerTitle .ec-headerTitle__subtitle a {
display: inline-block;
color: #5d4136;
text-decoration: none;
cursor: pointer;
}
/*
ヘッダー：ユーザナビゲーション
ヘッダー内でユーザに関与するナビゲーションコンポーネントです。
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`内に記述すると２カラム上の右側に配置することができます。
Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerNav
sg-wrapper:
Styleguide 11.2.3
*/
.ec-headerNav {
text-align: right;
}
.ec-headerNav .ec-headerNav__item {
margin-left: 0;
display: inline-block;
font-size: 28px;
}
.ec-headerNav .ec-headerNav__itemIcon {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
font-size: 18px;
color: black;
}
.ec-headerNav .ec-headerNav__itemLink {
display: none;
margin-right: 5px;
font-size: 14px;
vertical-align: middle;
color: black;
}
/*
ヘッダー：検索ボックス
ヘッダー内で使用される商品検索コンポーネントです。
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`内に記述すると２カラム上の右側に配置することができます。
Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerSearch
sg-wrapper:
Styleguide 11.2.4
*/
.ec-headerSearch:after {
content: " ";
display: table;
}
.ec-headerSearch:after {
clear: both;
}
.ec-headerSearch .ec-headerSearch__category {
float: none;
}
.ec-headerSearch .ec-headerSearch__category .ec-select {
overflow: hidden;
width: 100%;
margin: 0;
text-align: center;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select {
width: 100%;
cursor: pointer;
padding: 8px 24px 8px 8px;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #fff;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select option {
color: #000;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
display: none;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
position: relative;
border: 0;
background: #000;
color: #fff;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
position: absolute;
top: 0.8em;
right: 0.4em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
pointer-events: none;
}
.ec-headerSearch .ec-headerSearch__keyword {
position: relative;
color: #5d4136;
border: 1px solid #ccc;
background-color: #f6f6f6;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
width: 100%;
height: 34px;
font-size: 16px;
border: 0 none;
padding: 0.5em 50px 0.5em 1em;
box-shadow: none;
background: none;
box-sizing: border-box;
margin-bottom: 0;
}
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
width: 22px;
height: 22px;
}
.ec-headerSearch .ec-headerSearch__keywordBtn {
border: 0;
background: none;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-55%);
display: block;
white-space: nowrap;
z-index: 1;
}
/*
ヘッダー：カテゴリナビ
ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。
Markup:
include /assets/tmpl/elements/11.4.categoryNavi.pug
+ec-itemNav
sg-wrapper:
Styleguide 11.2.5
*/
.ec-categoryNaviRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: none;
}
.ec-categoryNaviRole:after {
content: " ";
display: table;
}
.ec-categoryNaviRole:after {
clear: both;
}
.ec-categoryNaviRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-categoryNaviRole img {
max-width: 100%;
}
.ec-categoryNaviRole html {
box-sizing: border-box;
}
.ec-categoryNaviRole *, .ec-categoryNaviRole *::before, .ec-categoryNaviRole *::after {
box-sizing: inherit;
}
.ec-categoryNaviRole img {
width: 100%;
}
.ec-itemNav {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.ec-itemNav__nav {
display: block;
margin: 0 auto;
padding: 0;
width: auto;
height: auto;
list-style-type: none;
text-align: center;
vertical-align: bottom;
}
.ec-itemNav__nav li {
float: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
position: relative;
}
.ec-itemNav__nav li a {
display: block;
border-bottom: 1px solid #E8E8E8;
margin: 0;
padding: 16px;
height: auto;
color: #2e3233;
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
text-align: left;
background: #fff;
border-bottom: 1px solid #E8E8E8;
}
.ec-itemNav__nav li ul {
display: none;
z-index: 0;
margin: 0;
padding: 0;
min-width: 200px;
list-style: none;
position: static;
top: 100%;
left: 0;
}
.ec-itemNav__nav li ul li {
overflow: hidden;
width: 100%;
height: auto;
transition: .3s;
}
.ec-itemNav__nav li ul li a {
border-bottom: 1px solid #E8E8E8;
padding: 16px 22px 16px 16px;
font-size: 16px;
font-weight: bold;
color: white;
text-align: left;
background: black;
}
.ec-itemNav__nav > li:hover > a {
background: #fafafa;
}
.ec-itemNav__nav > li:hover li:hover > a {
background: #333;
}
.ec-itemNav__nav li ul li ul {
top: 0;
left: 100%;
width: auto;
}
.ec-itemNav__nav li ul li ul li a {
background: #7D7D7D;
}
.ec-itemNav__nav li:hover ul li ul li a:hover {
background: #333;
}
/*
ヘッダー：SPヘッダー
SP時のみ出現するヘッダーに関係するコンポーネントです。
ex [トップページ](http://demo3.ec-cube.net/)画面サイズが768px以下に該当。
`.ec-drawerRole`：SPのドロワー内の要素をwrapするコンポーネントです。
`.ec-headerSearch`、`.ec-headerNav`、`.ec-itemNav`は`.ec-drawerRole`の子要素にある場合、ドロワーに適したスタイルに変化します。
`.ec-overlayRole`：SPのドロワー出現時にz-indexがドロワー以下の要素に半透明の黒背景をかぶせるコンポーネントです。
Styleguide 11.2.6
*/
.ec-drawerRole {
overflow-y: scroll;
background: black;
width: 260px;
height: 100vh;
transform: translateX(-300px);
position: fixed;
top: 0;
left: 0;
z-index: 1;
transition: z-index 0ms 1ms;
}
.ec-drawerRole .ec-headerSearchArea {
padding: 20px 10px;
width: 100%;
background: #F8F8F8;
}
.ec-drawerRole .ec-headerSearch {
padding: 16px 8px 26px;
background: #EBEBEB;
color: #636378;
}
.ec-drawerRole .ec-headerSearch select {
width: 100% !important;
}
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding: 1em 10px;
font-size: 16px;
font-weight: bold;
color: black;
background: #F8F8F8;
}
.ec-drawerRole .ec-headerCategoryArea p {
margin-top: 0;
margin-bottom: 0;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: black;
font-weight: normal;
background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
border-bottom: 1px solid #ccc;
padding-left: 20px;
font-weight: normal;
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover > a {
background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover li:hover > a {
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
padding-left: 40px;
color: black;
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li:hover ul li ul li a:hover {
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li ul li a {
padding-left: 60px;
font-weight: normal;
}
.ec-drawerRole .ec-headerLinkArea {
background: black;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
border-top: 1px solid #ccc;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
display: block;
border-bottom: 1px solid #ccc;
padding: 15px 20px;
font-size: 16px;
font-weight: bold;
color: white;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
display: inline-block;
width: 28px;
font-size: 17px;
}
.ec-drawerRoleClose {
display: none;
cursor: pointer;
border-radius: 50%;
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
font-size: 18px;
text-align: center;
color: black;
background: white;
position: fixed;
top: 10px;
left: 270px;
z-index: 1000;
}
.ec-drawerRoleClose .fas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ec-drawerRole.is_active {
display: block;
transform: translateX(0);
transition: all .3s;
z-index: 100000;
}
.ec-drawerRoleClose.is_active {
display: inline-block;
transition: all .3s;
}
.ec-overlayRole {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
opacity: 0;
background: transparent;
transform: translateX(0);
transition: all .3s;
visibility: hidden;
}
.have_curtain .ec-overlayRole {
display: block;
opacity: 1;
background: rgba(0, 0, 0, 0.5);
visibility: visible;
}
/*
ヘッダー：test
test
Markup:
span.ec-itemAccordionParent test1
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test2
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test3
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test4
Styleguide 11.2.7
*/
.ec-itemNavAccordion {
display: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
フッター
全ページで使用されるフッターのプロジェクトコンポーネントです。
ex [トップページ フッター](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerRole
Styleguide 11.3
*/
.ec-footerRole {
border-top: 1px solid #7d7d7d;
margin-top: 30px;
background: black;
}
/*
フッターナビ
フッタープロジェクトで使用するナビゲーション用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerNav
sg-wrapper:
Styleguide 11.3.1
*/
.ec-footerNavi {
padding: 0;
color: white;
list-style: none;
text-align: center;
}
.ec-footerNavi .ec-footerNavi__link {
display: block;
}
.ec-footerNavi .ec-footerNavi__link a {
display: block;
border-bottom: 1px solid #7d7d7d;
padding: 15px 0;
font-size: 14px;
color: inherit;
text-decoration: none;
}
.ec-footerNavi .ec-footerNavi__link:hover a {
opacity: .8;
text-decoration: none;
}
/*
フッタータイトル
フッタープロジェクトで使用するタイトル用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerTitle
sg-wrapper:
Styleguide 11.3.2
*/
.ec-footerTitle {
padding: 40px 0 60px;
text-align: center;
color: white;
}
.ec-footerTitle .ec-footerTitle__logo {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.ec-footerTitle .ec-footerTitle__logo a {
color: inherit;
text-decoration: none;
}
.ec-footerTitle .ec-footerTitle__logo a:hover {
text-decoration: none;
}
.ec-footerTitle .ec-footerTitle__logo a {
font-size: 22px;
color: inherit;
}
.ec-footerTitle .ec-footerTitle__logo:hover a {
opacity: .8;
text-decoration: none;
}
.ec-footerTitle .ec-footerTitle__copyright {
font-size: 10px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
トップページ
トップページ スライド部に関する Project コンポーネントを定義します。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/12.1.slider.pug
+ec-sliderRole
Styleguide 12.1
*/
.ec-sliderRole {
margin: 10px auto 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1000px;
margin-bottom: 24px;
}
.ec-sliderRole:after {
content: " ";
display: table;
}
.ec-sliderRole:after {
clear: both;
}
.ec-sliderRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-sliderRole img {
max-width: 100%;
}
.ec-sliderRole html {
box-sizing: border-box;
}
.ec-sliderRole *, .ec-sliderRole *::before, .ec-sliderRole *::after {
box-sizing: inherit;
}
.ec-sliderRole img {
width: 100%;
}
.ec-sliderRole ul {
padding: 0;
list-style: none;
}
.ec-sliderItemRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
margin-bottom: 24px;
}
.ec-sliderItemRole:after {
content: " ";
display: table;
}
.ec-sliderItemRole:after {
clear: both;
}
.ec-sliderItemRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-sliderItemRole img {
max-width: 100%;
}
.ec-sliderItemRole html {
box-sizing: border-box;
}
.ec-sliderItemRole *, .ec-sliderItemRole *::before, .ec-sliderItemRole *::after {
box-sizing: inherit;
}
.ec-sliderItemRole img {
width: 100%;
}
.ec-sliderItemRole ul {
padding: 0;
list-style: none;
}
.ec-sliderItemRole .item_nav {
display: none;
}
.ec-sliderItemRole .slideThumb {
margin-bottom: 25px;
width: 33%;
opacity: .8;
cursor: pointer;
}
.ec-sliderItemRole .slideThumb:focus {
outline: none;
}
.ec-sliderItemRole .slideThumb:hover {
opacity: 1;
}
.ec-sliderItemRole .slideThumb img {
width: 80%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
アイキャッチ
トップページ アイキャッチ部に関する Project コンポーネントを定義します。
ex [トップページスライダー直下 アイキャッチ部](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/12.2.eyecatch.pug
+ec-eyecatchRole
Styleguide 12.2
*/
.ec-eyecatchRole {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
/* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */
}
.ec-eyecatchRole .ec-eyecatchRole__image {
display: block;
margin-bottom: 40px;
width: 100%;
height: 100%;
}
.ec-eyecatchRole .ec-eyecatchRole__intro {
color: black;
}
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-bottom: .8em;
font-size: 16px;
font-weight: normal;
}
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: .8em;
font-size: 24px;
font-weight: bold;
}
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
margin-bottom: 20px;
font-size: 16px;
line-height: 2;
}
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 20px;
font-size: 16px;
line-height: 2;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
ボタン
トップページで使用されているボタンのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.3
*/
/*
通常ボタン
インラインの要素としてボタンを定義出来ます。
Markup:
.ec-inlineBtn--top more
Styleguide 12.3.1
*/
.ec-inlineBtn--top {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: white;
background-color: black;
border-color: black;
}
.ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-inlineBtn--top:hover, .ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
color: #5d4136;
text-decoration: none;
}
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/*.ec-inlineBtn--top.disabled, .ec-inlineBtn--top[disabled], fieldset[disabled] .ec-inlineBtn--top {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
color: white;
background-color: black;
border-color: black;
}
.ec-inlineBtn--top:hover {
color: white;
background-color: black;
border-color: black;
}
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active, .open > .ec-inlineBtn--top.dropdown-toggle {
color: white;
background-color: black;
background-image: none;
border-color: black;
}
.ec-inlineBtn--top:active:hover, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:hover, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus, .open > .ec-inlineBtn--top.dropdown-toggle:hover, .open > .ec-inlineBtn--top.dropdown-toggle:focus, .open > .ec-inlineBtn--top.dropdown-toggle.focus {
color: white;
background-color: black;
border-color: black;
}
.ec-inlineBtn--top.disabled:hover, .ec-inlineBtn--top.disabled:focus, .ec-inlineBtn--top.disabled.focus, .ec-inlineBtn--top[disabled]:hover, .ec-inlineBtn--top[disabled]:focus, .ec-inlineBtn--top[disabled].focus, fieldset[disabled] .ec-inlineBtn--top:hover, fieldset[disabled] .ec-inlineBtn--top:focus, fieldset[disabled] .ec-inlineBtn--top.focus {
background-color: black;
border-color: black;
}
.ec-inlineBtn--top .badge {
color: black;
background-color: white;
}
.ec-inlineBtn--top .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
/*
ロングボタン（全幅）
ロングタイプのボタンです。
Markup:
.ec-blockBtn--top 商品一覧へ
Styleguide 2.1.2
*/
.ec-blockBtn--top {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: white;
background-color: black;
border-color: black;
display: block;
height: 56px;
line-height: 56px;
padding-top: 0;
padding-bottom: 0;
}
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-blockBtn--top:hover, .ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
color: #5d4136;
text-decoration: none;
}
.ec-blockBtn--top:active, .ec-blockBtn--top.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/*
.ec-blockBtn--top.disabled, .ec-blockBtn--top[disabled], fieldset[disabled] .ec-blockBtn--top {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
color: white;
background-color: black;
border-color: black;
}
.ec-blockBtn--top:hover {
color: white;
background-color: black;
border-color: black;
}
.ec-blockBtn--top:active, .ec-blockBtn--top.active, .open > .ec-blockBtn--top.dropdown-toggle {
color: white;
background-color: black;
background-image: none;
border-color: black;
}
.ec-blockBtn--top:active:hover, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:hover, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus, .open > .ec-blockBtn--top.dropdown-toggle:hover, .open > .ec-blockBtn--top.dropdown-toggle:focus, .open > .ec-blockBtn--top.dropdown-toggle.focus {
color: white;
background-color: black;
border-color: black;
}
.ec-blockBtn--top.disabled:hover, .ec-blockBtn--top.disabled:focus, .ec-blockBtn--top.disabled.focus, .ec-blockBtn--top[disabled]:hover, .ec-blockBtn--top[disabled]:focus, .ec-blockBtn--top[disabled].focus, fieldset[disabled] .ec-blockBtn--top:hover, fieldset[disabled] .ec-blockBtn--top:focus, fieldset[disabled] .ec-blockBtn--top.focus {
background-color: black;
border-color: black;
}
.ec-blockBtn--top .badge {
color: black;
background-color: white;
}
.ec-blockBtn--top .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
/*
見出し
トップページで使用されている見出しのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.4
*/
/*
横並び見出し
横並びの見出しです。
Markup:
.ec-secHeading
span.ec-secHeading__en TOPIC
span.ec-secHeading__line |
span.ec-secHeading__ja 特集
Styleguide 12.4.1
*/
.ec-secHeading {
margin-bottom: 15px;
color: black;
}
.ec-secHeading .ec-secHeading__en {
font-size: 18px;
font-weight: bold;
letter-spacing: .2em;
}
.ec-secHeading .ec-secHeading__line {
display: inline-block;
margin: 0 20px;
width: 1px;
height: 14px;
background: black;
}
.ec-secHeading .ec-secHeading__ja {
font-size: 12px;
font-weight: normal;
letter-spacing: .15em;
vertical-align: 2px;
}
/*
縦並び見出し
縦並びの見出しです。
Markup:
.ec-secHeading--tandem
span.ec-secHeading__en TOPIC
span.ec-secHeading__line |
span.ec-secHeading__ja 特集
Styleguide 12.4.2
*/
.ec-secHeading--tandem {
margin-bottom: 15px;
color: black;
text-align: center;
}
.ec-secHeading--tandem .ec-secHeading__en {
display: block;
font-size: 18px;
font-weight: bold;
letter-spacing: .2em;
}
.ec-secHeading--tandem .ec-secHeading__line {
display: block;
margin: 13px auto;
width: 20px;
height: 1px;
background: black;
}
.ec-secHeading--tandem .ec-secHeading__ja {
display: block;
margin-bottom: 30px;
font-size: 12px;
font-weight: normal;
letter-spacing: .15em;
vertical-align: 2px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
トピック（アイテム2列）
トップページで使用されているトピックのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.5.1
*/
.ec-topicRole {
padding: 40px 0;
background: #F8F8F8;
}
.ec-topicRole .ec-topicRole__list {
display: flex;
flex-wrap: wrap;
}
.ec-topicRole .ec-topicRole__listItem {
margin-bottom: 20px;
width: 100%;
height: auto;
}
.ec-topicRole .ec-topicRole__listItemTitle {
margin-top: .5em;
font-size: 14px;
color: black;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カテゴリ（アイテム4列 スマホの時は2列）
トップページで使用されているアイテムリストのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.6.1
*/
.ec-newItemRole {
padding: 40px 0;
}
.ec-newItemRole .ec-newItemRole__list {
display: flex;
flex-wrap: wrap;
}
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 4%;
width: 48%;
height: auto;
}
.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
color: black;
}
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 4%;
}
.ec-newItemRole .ec-newItemRole__listItemHeading {
margin-top: calc(45% - 20px);
}
.ec-newItemRole .ec-newItemRole__listItemTitle {
margin: 8px 0;
font-size: 14px;
font-weight: bold;
}
.ec-newItemRole .ec-newItemRole__listItemPrice {
font-size: 12px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カテゴリ（アイテム3列）
トップページで使用されているカテゴリのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.7.1
*/
.ec-categoryRole {
padding: 40px 0;
color: black;
background: #F8F8F8;
}
.ec-categoryRole .ec-categoryRole__list {
display: flex;
flex-wrap: wrap;
}
.ec-categoryRole .ec-categoryRole__listItem {
margin-bottom: 20px;
width: 100%;
height: auto;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
見出し
トップページで使用されている新着情報のスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.8.1
*/
.ec-newsRole {
padding: 40px 0 0;
}
.ec-newsRole .ec-newsRole__news {
box-sizing: border-box;
}
.ec-newsRole .ec-newsRole__newsItem {
width: 100%;
}
.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
border-bottom: 1px solid #ccc;
}
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 20px;
}
.ec-newsRole .ec-newsRole__newsHeading {
cursor: pointer;
}
.ec-newsRole .ec-newsRole__newsDate {
display: block;
margin: 15px 0 5px;
font-size: 12px;
color: black;
}
.ec-newsRole .ec-newsRole__newsColumn {
display: flex;
}
.ec-newsRole .ec-newsRole__newsTitle {
display: inline-block;
margin-bottom: 10px;
width: 90%;
font-size: 14px;
font-weight: bold;
color: #7D7D7D;
line-height: 1.6;
}
.ec-newsRole .ec-newsRole__newsClose {
display: inline-block;
width: 10%;
position: relative;
}
.ec-newsRole .ec-newsRole__newsCloseBtn {
display: inline-block;
margin-left: auto;
border-radius: 50%;
width: 20px;
height: 20px;
color: white;
text-align: center;
background: black;
cursor: pointer;
position: absolute;
right: 5px;
}
.ec-newsRole .ec-newsRole__newsDescription {
display: none;
margin: 0 0 10px;
font-size: 14px;
line-height: 1.4;
overflow: hidden;
}
.ec-newsRole .ec-newsRole__newsDescription a {
color: #5d4136;
}
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
margin: 0 0 10px;
}
.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
display: inline-block;
transform: rotateX(180deg) translateY(2px);
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
検索ラベル
商品一覧 ヘッダー部 に関する Project コンポーネントを定義します。
ex [商品一覧 ヘッダー部](http://demo3.ec-cube.net/products/list)
Markup:
include /assets/tmpl/elements/13.1.searchnav.pug
+ec-searchnavRole__topicpath
+ec-searchnavRole__info
Styleguide 13.1
*/
.ec-searchnavRole {
margin-bottom: 0;
padding: 0;
}
.ec-searchnavRole .ec-searchnavRole__infos {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: flex;
border-top: 0;
margin-bottom: 16px;
padding-top: 5px;
flex-direction: column;
}
.ec-searchnavRole .ec-searchnavRole__infos:after {
content: " ";
display: table;
}
.ec-searchnavRole .ec-searchnavRole__infos:after {
clear: both;
}
.ec-searchnavRole .ec-searchnavRole__infos textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-searchnavRole .ec-searchnavRole__infos img {
max-width: 100%;
}
.ec-searchnavRole .ec-searchnavRole__infos html {
box-sizing: border-box;
}
.ec-searchnavRole .ec-searchnavRole__infos *, .ec-searchnavRole .ec-searchnavRole__infos *::before, .ec-searchnavRole .ec-searchnavRole__infos *::after {
box-sizing: inherit;
}
.ec-searchnavRole .ec-searchnavRole__infos img {
width: 100%;
}
.ec-searchnavRole .ec-searchnavRole__counter {
margin-bottom: 16px;
width: 100%;
}
.ec-searchnavRole .ec-searchnavRole__actions {
text-align: right;
width: 100%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
商品一覧
商品一覧 に関する Project コンポーネントを定義します。
SP版２列、PC版４列の特殊グリッドを構成します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2
*/
.ec-shelfRole {
margin: 10px auto;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-shelfRole:after {
content: " ";
display: table;
}
.ec-shelfRole:after {
clear: both;
}
.ec-shelfRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-shelfRole img {
max-width: 100%;
}
.ec-shelfRole html {
box-sizing: border-box;
}
.ec-shelfRole *, .ec-shelfRole *::before, .ec-shelfRole *::after {
box-sizing: inherit;
}
.ec-shelfRole img {
width: 100%;
}
/*
商品一覧グリッド
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2.1
*/
.ec-shelfGrid {
display: flex;
margin-left: 0;
margin-right: 0;
flex-wrap: wrap;
padding: 0;
list-style: none;
}
.ec-shelfGrid a:link,.ec-shelfGrid a:visited {
color: inherit;
text-decoration: none;
}
.ec-shelfGrid a:hover,
.ec-shelfGrid a[href]:hover{
text-decoration: none;
text-decoration: none;
}
.ec-shelfGrid .ec-shelfGrid__item {
margin-bottom: 36px;
width: 50%;
display: flex;
flex-direction: column;
text-align: center;
}
.ec-shelfGrid .ec-shelfGrid__item-image {
width: auto;
height: 150px;
margin-bottom: 10px;
text-align: center;
overflow: hidden;
position: relative;
}
.ec-shelfGrid .ec-shelfGrid__item-image .item_mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
display: flex;
justify-content: center;
align-items: center;
}
.ec-shelfGrid .ec-shelfGrid__item-image .item_caption {
font-size: 15px;
color: rgb(255, 255, 255);
width: 64%;
box-sizing: border-box;
padding: 13px 0px;
border-width: 2px;
border-style: solid;
border-color: rgb(255, 255, 255);
border-image: initial;
text-align: center;
}
.ec-shelfGrid .ec-shelfGrid__item-image:hover .item_mask {
opacity: 1;
}
.ec-shelfGrid .ec-shelfGrid__item .ttl {
font-weight: bold;
margin-bottom: 5px;
}
.ec-shelfGrid .ec-shelfGrid__item .ttl_member {
font-weight: bold;
font-size: 120%;
margin-bottom: 5px;
color: #E63F36;
}
.ec-shelfGrid .ec-shelfGrid__item .sp_item_caption{display: none;}
@media only screen and (max-width: 768px) {
.ec-shelfGrid .ec-shelfGrid__item .sp_item_caption{
display: inherit;
font-weight: bold;}
}
.ec-shelfGrid .ec-shelfGrid__item .price02-default {
font-weight: bold;
margin: 20px 0;
color: #48382B;
}
.ec-shelfGrid .ec-shelfGrid__item .price02-default .price02-default_price--sub {
margin-left: 2px;
font-size: 1rem;
}
.ec-shelfGrid .ec-shelfGrid__item img {
width: auto;
height: 150px;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
margin-top: auto;
margin-bottom: 15px;
}
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
padding-right: 8px;
}
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
padding-left: 8px;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__actions{
margin-bottom: 15px;
margin-bottom: 15px;
}
.ec-shelfGrid .ec-shelfGrid__title {
margin-bottom: 7px;
}
.ec-shelfGrid .ec-shelfGrid__plice {
font-weight: bold;
}
/*
13.2.2 商品一覧グリッド（中央寄せ）
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。
商品のあまりはセンタリングされ、中央に表示されます。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGridCenter
Styleguide 13.2.2
*/
.ec-shelfGridCenter {
display: flex;
margin-left: 0;
margin-right: 0;
flex-wrap: wrap;
padding: 0;
list-style: none;
justify-content: center;
}
.ec-shelfGridCenter a {
color: inherit;
text-decoration: none;
}
.ec-shelfGridCenter a:hover {
text-decoration: none;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item {
margin-bottom: 36px;
width: 50%;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
height: 150px;
margin-bottom: 10px;
text-align: center;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item img {
width: auto;
max-height: 100%;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item .ec-productRole__btn {
margin-top: auto;
padding-top: 1em;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
padding-right: 8px;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
padding-left: 8px;
}
.ec-shelfGridCenter .ec-shelfGridCenter__title {
margin-bottom: 7px;
}
.ec-shelfGridCenter .ec-shelfGridCenter__plice {
font-weight: bold;
}
/*
商品一覧フッター
商品一覧 フッター に関する Project コンポーネントを定義します。
ex [商品一覧 ページャ部](http://demo3.ec-cube.net/products/list)
Markup:
include /assets/tmpl/elements/13.3.pager.pug
+ec-pagerRole
Styleguide 13.3
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カート追加モーダル
カート追加モーダルに関する Project コンポーネントを定義します。
ex [商品一覧、商品詳細](http://demo3.ec-cube.net/products/list)
+ec-modal
Styleguide 13.4
*/
.ec-modal {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 100%;
}
.ec-modal.small {
width: 30%;
}
.ec-modal.full {
width: 100%;
height: 100%;
}
.ec-modal .ec-modal-overlay {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.ec-modal .ec-modal-wrap {
position: relative;
border-radius: 2px;
border: 1px solid #333;
background-color: #fff;
width: 90%;
margin: 20px;
padding: 40px 5px;
}
.ec-modal .ec-modal-close {
cursor: pointer;
position: absolute;
right: 20px;
top: 10px;
font-size: 20px;
height: 30px;
width: 20px;
}
.ec-modal .ec-modal-close:hover {
color: #4b5361;
}
.ec-modal .ec-modal-box {
text-align: center;
}
.ec-modal .ec-role {
margin-top: 20px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
商品詳細
商品詳細ページに関する Project コンポーネントを定義します。
ex [商品詳細ページ](http://demo3.ec-cube.net/products/detail/18)
Markup:
include /assets/tmpl/elements/14.1.product.pug
+ec-productSimpleRole
Styleguide 14.1
*/
.ec-productRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-productRole:after {
content: " ";
display: table;
}
.ec-productRole:after {
clear: both;
}
.ec-productRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-productRole img {
max-width: 100%;
}
.ec-productRole html {
box-sizing: border-box;
}
.ec-productRole *, .ec-productRole *::before, .ec-productRole *::after {
box-sizing: inherit;
}
.ec-productRole img {
width: 100%;
}
.ec-productRole .ec-productRole__img {
margin-right: 0;
margin-bottom: 20px;
}
.ec-productRole .ec-productRole__profile {
margin-left: 0;
}
.ec-productRole .ec-productRole__title .ec-headingTitle {
font-size: 20px;
}
.ec-productRole .ec-productRole__tags {
margin-top: 16px;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px dotted #ccc;
}
.ec-productRole .ec-productRole__tag {
display: inline-block;
padding: 2px 5px;
list-style: none;
font-size: 80%;
color: #5d4136;
border: solid 1px #D7DADD;
border-radius: 3px;
background-color: #F5F7F8;
}
.ec-productRole .ec-productRole__priceRegular {
padding-top: 14px;
}
.ec-productRole .ec-productRole__priceRegularTax {
margin-left: 5px;
font-size: 10px;
}
.ec-productRole .ec-productRole__price {
color: #e17777;
font-size: 28px;
padding: 0;
border-bottom: 0;
}
.ec-productRole .ec-productRole__code {
padding: 14px 0;
border-bottom: 1px dotted #ccc;
}
.ec-productRole .ec-productRole__category {
padding: 14px 0;
border-bottom: 1px dotted #ccc;
}
.ec-productRole .ec-productRole__category a {
color: #33A8D0;
}
.ec-productRole .ec-productRole__category ul {
list-style: none;
padding: 0;
margin: 0;
}
.ec-productRole .ec-productRole__actions {
padding: 14px 0;
margin-bottom: 10px;
}
.ec-productRole .ec-productRole__actions .ec-select select {
height: 40px;
max-width: 100%;
min-width: 100%;
}
.ec-productRole .ec-productRole__btn {
width: 100%;
margin-bottom: 10px;
}
.ec-productRole .ec-productRole__description {
margin-bottom: 16px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
カート
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [カートページ](http://demo3.ec-cube.net/shopping)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartRole
Styleguide 15.1
*/
.ec-cartRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.ec-cartRole:after {
content: " ";
display: table;
}
.ec-cartRole:after {
clear: both;
}
.ec-cartRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-cartRole img {
max-width: 100%;
}
.ec-cartRole html {
box-sizing: border-box;
}
.ec-cartRole *, .ec-cartRole *::before, .ec-cartRole *::after {
box-sizing: inherit;
}
.ec-cartRole img {
width: 100%;
}
.ec-cartRole::before {
display: none;
}
.ec-cartRole .ec-cartRole__progress {
width: 100%;
text-align: center;
margin-top: 20px;
}
.ec-cartRole .ec-cartRole__error {
width: 100%;
text-align: center;
}
.ec-cartRole .ec-cartRole__error .ec-alert-warning {
max-width: 80%;
display: inline-block;
}
.ec-cartRole .ec-cartRole__totalText {
margin-bottom: 0;
padding: 16px 0 6px;
width: 100%;
text-align: center;
font-weight: normal;
}
.ec-cartRole .ec-cartRole__cart {
margin: 0;
width: 100%;
}
.ec-cartRole .ec-cartRole__actions {
text-align: right;
width: 100%;
}
.ec-cartRole .ec-cartRole__total {
padding: 15px 0 30px;
font-weight: bold;
font-size: 16px;
}
.ec-cartRole .ec-cartRole__totalAmount {
margin-left: 30px;
color: #e17777;
font-size: 16px;
}
.ec-cartRole .ec-blockBtn--action {
margin-bottom: 10px;
}
/*
カート商品表示枠（テーブルヘッダ）
カート内の商品をを表示するテーブル枠です。
ex [カートページ テーブル部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartTable
sg-wrapper:
Styleguide 15.1.2
*/
.ec-cartTable {
display: table;
border-top: 1px dotted #ccc;
width: 100%;
}
/*
カート商品表示枠（テーブルヘッダ）
カート内の商品を表示するテーブルのヘッダです。
スマホでは非表示となります。
ex [カートページ カートテーブルヘッダ部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
+ec-cartHeader
sg-wrapper:
Styleguide 15.1.3
*/
.ec-cartHeader {
display: none;
width: 100%;
background: #F4F3F0;
}
.ec-cartHeader .ec-cartHeader__label {
display: table-cell;
padding: 16px;
text-align: center;
background: #F4F3F0;
overflow-x: hidden;
font-weight: bold;
}
.ec-cartCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-cartCompleteRole:after {
content: " ";
display: table;
}
.ec-cartCompleteRole:after {
clear: both;
}
.ec-cartCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-cartCompleteRole img {
max-width: 100%;
}
.ec-cartCompleteRole html {
box-sizing: border-box;
}
.ec-cartCompleteRole *, .ec-cartCompleteRole *::before, .ec-cartCompleteRole *::after {
box-sizing: inherit;
}
.ec-cartCompleteRole img {
width: 100%;
}
/*
カート内商品
カート内のアイテムを表示するテーブル行です。
スマホでは非表示となります。
ex [カートページ テーブル部分](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
+ec-cartRow
sg-wrapper:
Styleguide 15.1.4
*/
.ec-cartRow {
display: table-row;
}
.ec-cartRow .ec-cartRow__delColumn {
border-bottom: 1px dotted #ccc;
text-align: center;
display: table-cell;
width: 14%;
vertical-align: middle;
}
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
width: 1.5em;
height: 1.5em;
}
.ec-cartRow .ec-cartRow__contentColumn {
border-bottom: 1px dotted #ccc;
padding: 10px 0;
display: table;
}
.ec-cartRow .ec-cartRow__img {
display: table-cell;
width: 40%;
vertical-align: middle;
padding-right: 10px;
}
.ec-cartRow .ec-cartRow__summary {
display: table-cell;
margin-left: 5px;
font-weight: bold;
vertical-align: middle;
width: 46%;
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
margin-bottom: 5px;
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
display: block;
font-weight: normal;
}
.ec-cartRow .ec-cartRow__amountColumn {
display: table-cell;
border-bottom: 1px dotted #ccc;
vertical-align: middle;
text-align: center;
width: 20%;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
display: none;
margin-bottom: 10px;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
display: block;
margin-bottom: 10px;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
display: flex;
justify-content: center;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton {
margin: 0 2px;
display: inline-block;
border: 2px solid #c9c9c9;
border-radius: 50%;
width: 30px;
min-width: 30px;
max-width: 30px;
height: 30px;
cursor: pointer;
line-height: 40px;
vertical-align: middle;
position: relative;
text-align: center;
background: #fff;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton .ec-cartRow__amountUpButton__icon img {
display: block;
margin-left: -0.4em;
width: .8em;
height: .8em;
position: absolute;
top: 28%;
left: 50%;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
margin: 0 2px;
display: inline-block;
border: 2px solid #c9c9c9;
border-radius: 50%;
width: 30px;
min-width: 30px;
max-width: 30px;
height: 30px;
cursor: pointer;
line-height: 40px;
vertical-align: middle;
position: relative;
text-align: center;
background: #fff;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img {
display: block;
margin-left: -0.4em;
width: .8em;
height: .8em;
position: absolute;
top: 28%;
left: 50%;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
cursor: default;
}
.ec-cartRow .ec-cartRow__subtotalColumn {
display: none;
border-bottom: 1px dotted #ccc;
text-align: right;
width: 16.66666667%;
}
/*
カート内商品(商品が１の場合)
商品が１の場合はカート商品を減らす「-」ボタンの無効化状態になります。
ex [カートページ テーブル部分](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
+ec-cartRowOnly
sg-wrapper:
Styleguide 15.1.5
*/
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
cursor: default;
}
/*
アラート
カート内の商品に問題があることを示す警告メッセージです。
ex [マイページ カート](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartRole
.ec-cartRole__cart
+ec-alert-warning
Styleguide 15.1.6
*/
.ec-alert-warning {
width: 100%;
padding: 10px;
text-align: center;
background: #F99;
margin-bottom: 20px;
}
.ec-alert-warning .ec-alert-warning__icon {
display: inline-block;
margin-right: 1rem;
width: 20px;
height: 20px;
color: #fff;
fill: #fff;
vertical-align: top;
}
.ec-alert-warning .ec-alert-warning__text {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
position: relative;
}
/*
アラート(空)
カートが空であることを示す警告メッセージです。
ex [マイページ カート](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-off3Grid
.ec-off3Grid__cell
+ec-alert-warningEnpty
Styleguide 15.1.7
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
注文内容確認
カート内 注文内容確認に関する Project コンポーネントを定義します。
ex [マイページ 注文詳細](http://demo3.ec-cube.net/shopping)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderRole
Styleguide 15.2
*/
.ec-orderRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: flex;
flex-direction: column;
margin-top: 0;
}
.ec-orderRole:after {
content: " ";
display: table;
}
.ec-orderRole:after {
clear: both;
}
.ec-orderRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-orderRole html {
box-sizing: border-box;
}
.ec-orderRole *, .ec-orderRole *::before, .ec-orderRole *::after {
box-sizing: inherit;
}
.ec-orderRole img {
width: 100%;
max-width: 280px;
}
.ec-orderRole .ec-inlineBtn {
font-weight: normal;
}
.ec-orderRole .ec-orderRole__detail {
padding: 0;
width: 100%;
}
.ec-orderRole .ec-orderRole__summary {
width: 100%;
}
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: inline-block;
}
.ec-orderRole .ec-borderedList {
margin-bottom: 20px;
border-top: 1px dotted #ccc;
}
/*
注文履歴詳細 オーダ情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ オーダ情報](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderInfo
Styleguide 15.2.1
*/
.ec-orderOrder {
margin-bottom: 30px;
}
.ec-orderOrder .ec-orderOrder__items {
border-bottom: 1px dotted #ccc;
border-top: 1px dotted #ccc;
}
/*
注文履歴詳細 お客様情報
マイページ 注文詳細部に関する Project コンポーネントを定義します。
ex [マイページ オーダ情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAccount
Styleguide 15.2.2
*/
.ec-orderAccount {
margin-bottom: 30px;
}
.ec-orderAccount p {
margin-bottom: 0;
}
.ec-orderAccount:after {
content: " ";
display: table;
}
.ec-orderAccount:after {
clear: both;
}
.ec-orderAccount .ec-orderAccount__change {
display: inline-block;
margin-left: 10px;
float: right;
}
.ec-orderAccount .ec-orderAccount__account {
margin-bottom: 16px;
}
/*
注文詳細 配送情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ 配送情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderDelivery
Styleguide 15.2.3
*/
.ec-orderDelivery .ec-orderDelivery__title {
padding: 16px 0 17px;
font-weight: bold;
font-size: 18px;
position: relative;
}
.ec-orderDelivery .ec-orderDelivery__change {
display: inline-block;
position: absolute;
right: 0;
top: 0;
}
.ec-orderDelivery .ec-orderDelivery__items {
border-bottom: 1px dotted #ccc;
border-top: 1px dotted #ccc;
}
.ec-orderDelivery .ec-orderDelivery__address {
margin: 10px 0 18px;
}
.ec-orderDelivery .ec-orderDelivery__address p {
margin: 0;
}
/*
注文履歴詳細 支払情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ 支払情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
.ec-orderRole
.ec-orderPayment
.ec-rectHeading
h2 お支払方法
p 支払方法： 郵便振替
Styleguide 15.2.4
*/
/*
注文履歴詳細 お問い合わせ
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ お問い合わせ(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
.ec-orderRole
.ec-orderConfirm
.ec-rectHeading
h2 お問い合わせ
p 記載なし
Styleguide 15.2.5
*/
.ec-orderConfirm {
margin-bottom: 20px;
}
.ec-orderConfirm .ec-input textarea, .ec-orderConfirm .ec-halfInput textarea, .ec-orderConfirm .ec-numberInput textarea, .ec-orderConfirm .ec-zipInput textarea, .ec-orderConfirm .ec-telInput textarea, .ec-orderConfirm .ec-select textarea, .ec-orderConfirm .ec-birth textarea {
height: 96px;
}
/*
お届け先の複数指定
お届け先の複数指定に関するコンポーネントを定義します。
ex [マイページ お届け先の複数指定](http://demo3.ec-cube.net/shopping/shipping_multiple)
(商品購入画面 → 「お届け先を追加する」を押下)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAddAddress
Styleguide 15.2.6
*/
.ec-AddAddress {
padding: 0 10px;
}
.ec-AddAddress .ec-AddAddress__info {
margin-bottom: 32px;
text-align: center;
font-size: 16px;
}
.ec-AddAddress .ec-AddAddress__add {
border-top: 1px solid #f4f4f4;
padding-top: 20px;
margin-bottom: 20px;
}
.ec-AddAddress .ec-AddAddress__item {
display: table;
padding: 16px;
background: #f4f4f4;
margin-bottom: 16px;
}
.ec-AddAddress .ec-AddAddress__itemThumb {
display: table-cell;
min-width: 160px;
width: 20%;
}
.ec-AddAddress .ec-AddAddress__itemThumb img {
width: 100%;
}
.ec-AddAddress .ec-AddAddress__itemtContent {
display: table-cell;
vertical-align: middle;
padding-left: 16px;
font-size: 16px;
}
.ec-AddAddress .ec-AddAddress__itemtTitle {
font-weight: bold;
margin-bottom: 10px;
}
.ec-AddAddress .ec-AddAddress__itemtSize {
margin-bottom: 10px;
}
.ec-AddAddress .ec-AddAddress__select {
margin-bottom: 5px;
}
.ec-AddAddress .ec-AddAddress__selectAddress {
display: inline-block;
}
.ec-AddAddress .ec-AddAddress__selectAddress label {
font-size: 16px;
font-weight: normal;
}
.ec-AddAddress .ec-AddAddress__selectAddress select {
min-width: 100%;
}
.ec-AddAddress .ec-AddAddress__selectNumber {
display: inline-block;
margin-left: 30px;
}
.ec-AddAddress .ec-AddAddress__selectNumber label {
font-size: 16px;
font-weight: normal;
}
.ec-AddAddress .ec-AddAddress__selectNumber input {
display: inline-block;
margin-left: 10px;
width: 80px;
}
.ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action {
margin-bottom: 8px;
}
.ec-AddAddress .ec-AddAddress__new {
margin-bottom: 20px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
注文履歴一覧
マイページ 注文履歴部に関する Project コンポーネントを定義します。
ex [マイページ 注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)
Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole
Styleguide 16.1
*/
.ec-historyRole .ec-historyRole__contents {
padding-top: 1em;
padding-bottom: 16px;
border-top: 1px solid #ccc;
display: flex;
flex-direction: column;
color: #5d4136;
}
.ec-historyRole .ec-historyRole__header {
width: 100%;
}
.ec-historyRole .ec-historyRole__detail {
border-top: 1px dotted #ccc;
width: 100%;
}
.ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
border-top: none;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
margin-bottom: 8px;
font-size: 1.6rem;
font-weight: bold;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
margin-bottom: 8px;
font-size: 1.6rem;
font-weight: bold;
}
/*
注文履歴一覧 規格
マイページ 注文履歴内アイテムの規格を定義します。
ex [マイページ 注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)
Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole-option
Styleguide 16.1.1
*/
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption {
display: inline-block;
margin-bottom: 8px;
margin-right: .5rem;
font-size: 1.6rem;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
display: inline-block;
padding-left: .5rem;
content: "/";
font-weight: bold;
}
/*
注文履歴一覧ヘッダ
注文履歴一覧で使用するヘッダのコンポーネントを定義します。
ex [マイページ 注文履歴一覧ヘッダ](http://demo3.ec-cube.net/mypage)
(要ログイン)
Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyHeader
p hofe
Styleguide 16.1.2
*/
.ec-historyListHeader .ec-historyListHeader__date {
font-weight: bold;
font-size: 16px;
}
.ec-historyListHeader .ec-historyListHeader__action {
margin: 16px 0;
}
.ec-historyListHeader .ec-historyListHeader__action a {
font-size: 12px;
font-weight: normal;
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
注文履歴詳細
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ 注文詳細](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailRole
Styleguide 16.2
*/
/*
注文履歴詳細 メール履歴
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ メール履歴](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailMail
Styleguide 16.2.5
*/
.ec-orderMails .ec-orderMails__item {
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
.ec-orderMails .ec-orderMails__time {
margin: 0;
}
.ec-orderMails .ec-orderMails__body {
display: none;
}
/*
注文履歴詳細 メール履歴個別
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ メール履歴個別](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailMailHistory
Styleguide 16.2.6
*/
.ec-orderMail {
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
margin-bottom: 16px;
}
.ec-orderMail .ec-orderMail__time {
margin: 0;
}
.ec-orderMail .ec-orderMail__body {
display: none;
}
.ec-orderMail .ec-orderMail__time {
margin-bottom: 4px;
}
.ec-orderMail .ec-orderMail__link {
margin-bottom: 4px;
}
.ec-orderMail .ec-orderMail__link a {
color: #5d4136;
text-decoration: none;
cursor: pointer;
}
.ec-orderMail .ec-orderMail__link a:hover {
color: #33A8D0;
}
.ec-orderMail .ec-orderMail__close a {
color: #5d4136;
text-decoration: none;
cursor: pointer;
}
.ec-orderMail .ec-orderMail__close a:hover {
color: #33A8D0;
}
/*
住所一覧
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [マイページ内 お届け先編集](http://demo3.ec-cube.net/mypage/delivery)
Markup:
include /assets/tmpl/elements/17.1.address.pug
+ec-addressList
+ec-addressRole
sg-wrapper:
Styleguide 17.1
*/
.ec-addressRole .ec-addressRole__item {
border-top: 1px dotted #ccc;
}
.ec-addressRole .ec-addressRole__actions {
margin-top: 32px;
padding-bottom: 20px;
border-bottom: 1px dotted #ccc;
}
.ec-addressList .ec-addressList__item {
display: table;
width: 100%;
position: relative;
border-bottom: 1px dotted #ccc;
}
.ec-addressList .ec-addressList__remove {
vertical-align: middle;
padding: 16px;
text-align: center;
}
.ec-addressList .ec-addressList__remove .ec-icon img {
width: 1em;
height: 1em;
}
.ec-addressList .ec-addressList__address {
display: table-cell;
vertical-align: middle;
padding: 16px;
margin-right: 4em;
width: 80%;
}
.ec-addressList .ec-addressList__action {
position: relative;
vertical-align: middle;
text-align: right;
top: 27px;
padding-right: 10px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
パスワードリセット
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [パスワードリセット画面](http://demo3.ec-cube.net/forgot)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/18.1.password.pug
+ec-passwordRole
Styleguide 18.1
*/
.ec-forgotRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-forgotRole:after {
content: " ";
display: table;
}
.ec-forgotRole:after {
clear: both;
}
.ec-forgotRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-forgotRole img {
max-width: 100%;
}
.ec-forgotRole html {
box-sizing: border-box;
}
.ec-forgotRole *, .ec-forgotRole *::before, .ec-forgotRole *::after {
box-sizing: inherit;
}
.ec-forgotRole img {
width: 100%;
}
.ec-forgotRole .ec-forgotRole__intro {
font-size: 16px;
}
.ec-forgotRole .ec-forgotRole__form {
margin-bottom: 16px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
会員登録
新規会員登録 に関する Project コンポーネントを定義します。
ex [新規会員登録画面 会員登録](http://demo3.ec-cube.net/entry)
Markup:
include /assets/tmpl/elements/19.1.register.pug
+ec-registerRole
Styleguide 19.1
*/
.ec-registerRole {
margin: 0 auto 20px auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
}
.ec-registerRole:after {
content: " ";
display: table;
}
.ec-registerRole:after {
clear: both;
}
.ec-registerRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-registerRole img {
max-width: 100%;
}
.ec-registerRole html {
box-sizing: border-box;
}
.ec-registerRole *, .ec-registerRole *::before, .ec-registerRole *::after {
box-sizing: inherit;
}
.ec-registerRole img {
width: 100%;
}
.ec-registerRole .ec-registerRole__actions {
padding-top: 20px;
text-align: center;
}
.ec-registerRole .ec-registerRole__actions p {
margin-bottom: 16px;
}
.ec-registerRole .ec-blockBtn--action {
margin-bottom: 16px;
}
.ec-registerCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-registerCompleteRole:after {
content: " ";
display: table;
}
.ec-registerCompleteRole:after {
clear: both;
}
.ec-registerCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-registerCompleteRole img {
max-width: 100%;
}
.ec-registerCompleteRole html {
box-sizing: border-box;
}
.ec-registerCompleteRole *, .ec-registerCompleteRole *::before, .ec-registerCompleteRole *::after {
box-sizing: inherit;
}
.ec-registerCompleteRole img {
width: 100%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
お問い合わせ
お問い合わせ に関する Project コンポーネントを定義します。
ex [お問い合わせ](http://demo3.ec-cube.net/contact)
Markup:
include /assets/tmpl/elements/19.2.contact.pug
+ec-contactRole
Styleguide 19.2
*/
.ec-contactRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-contactRole:after {
content: " ";
display: table;
}
.ec-contactRole:after {
clear: both;
}
.ec-contactRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-contactRole img {
max-width: 100%;
}
.ec-contactRole html {
box-sizing: border-box;
}
.ec-contactRole *, .ec-contactRole *::before, .ec-contactRole *::after {
box-sizing: inherit;
}
.ec-contactRole img {
width: 100%;
}
.ec-contactRole .ec-contactRole__actions {
padding-top: 20px;
}
.ec-contactRole p {
margin: 16px 0;
line-height: 1.8em;
}
.ec-contactConfirmRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-contactConfirmRole:after {
content: " ";
display: table;
}
.ec-contactConfirmRole:after {
clear: both;
}
.ec-contactConfirmRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-contactConfirmRole img {
max-width: 100%;
}
.ec-contactConfirmRole html {
box-sizing: border-box;
}
.ec-contactConfirmRole *, .ec-contactConfirmRole *::before, .ec-contactConfirmRole *::after {
box-sizing: inherit;
}
.ec-contactConfirmRole img {
width: 100%;
}
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
padding-top: 20px;
}
.ec-contactConfirmRole .ec-blockBtn--action {
margin-bottom: 16px;
}
.ec-contactCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-contactCompleteRole:after {
content: " ";
display: table;
}
.ec-contactCompleteRole:after {
clear: both;
}
.ec-contactCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-contactCompleteRole img {
max-width: 100%;
}
.ec-contactCompleteRole html {
box-sizing: border-box;
}
.ec-contactCompleteRole *, .ec-contactCompleteRole *::before, .ec-contactCompleteRole *::after {
box-sizing: inherit;
}
.ec-contactCompleteRole img {
width: 100%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
お客様情報の入力
ログインせずゲストとして商品を購入する際の、お客様情報の入力 に関する Project コンポーネントを定義します。
ex [カートSTEP2 お客様情報の入力(ゲスト購入)](http://demo3.ec-cube.net/shopping/nonmember)
Markup:
include /assets/tmpl/elements/19.3.customer.pug
+ec-customerRole
hoge
Styleguide 19.3
*/
.ec-customerRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-customerRole:after {
content: " ";
display: table;
}
.ec-customerRole:after {
clear: both;
}
.ec-customerRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-customerRole img {
max-width: 100%;
}
.ec-customerRole html {
box-sizing: border-box;
}
.ec-customerRole *, .ec-customerRole *::before, .ec-customerRole *::after {
box-sizing: inherit;
}
.ec-customerRole img {
width: 100%;
}
.ec-customerRole .ec-customerRole__actions {
padding-top: 20px;
}
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 10px;
}
.ec-contactConfirmRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-contactConfirmRole:after {
content: " ";
display: table;
}
.ec-contactConfirmRole:after {
clear: both;
}
.ec-contactConfirmRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-contactConfirmRole img {
max-width: 100%;
}
.ec-contactConfirmRole html {
box-sizing: border-box;
}
.ec-contactConfirmRole *, .ec-contactConfirmRole *::before, .ec-contactConfirmRole *::after {
box-sizing: inherit;
}
.ec-contactConfirmRole img {
width: 100%;
}
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
padding-top: 20px;
}
.ec-contactConfirmRole .ec-blockBtn--action {
margin-bottom: 16px;
}
.ec-contactCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-contactCompleteRole:after {
content: " ";
display: table;
}
.ec-contactCompleteRole:after {
clear: both;
}
.ec-contactCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-contactCompleteRole img {
max-width: 100%;
}
.ec-contactCompleteRole html {
box-sizing: border-box;
}
.ec-contactCompleteRole *, .ec-contactCompleteRole *::before, .ec-contactCompleteRole *::after {
box-sizing: inherit;
}
.ec-contactCompleteRole img {
width: 100%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
@keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.bg-load-overlay {
background: rgba(255, 255, 255, 0.4);
box-sizing: border-box;
position: fixed;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: space-around;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2147483647;
opacity: 1;
}
/*
404ページ
404 エラー画面で使用するページコンポーネントです。
ex [404エラー画面](http://demo3.ec-cube.net/404)
Markup:
include /assets/tmpl/elements/20.1.404.pug
+ec-404Role
Styleguide 20.1
*/
.ec-404Role {
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
height: 100vh;
background-color: #f2f2f2;
text-align: center;
box-sizing: border-box;
}
.ec-404Role textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-404Role img {
max-width: 100%;
}
.ec-404Role html {
box-sizing: border-box;
}
.ec-404Role *, .ec-404Role *::before, .ec-404Role *::after {
box-sizing: inherit;
}
.ec-404Role img {
width: 100%;
}
.ec-404Role .ec-404Role__icon img {
width: 1em;
height: 1em;
}
.ec-404Role .ec-404Role__title {
font-weight: bold;
font-size: 25px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
退会手続き
退会手続きで使用するページコンポーネントです。
ex [退会手続き](http://demo3.ec-cube.net/mypage/withdraw)
Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawRole
Styleguide 21.1
*/
.ec-withdrawRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
text-align: center;
padding: 0 16px;
}
.ec-withdrawRole:after {
content: " ";
display: table;
}
.ec-withdrawRole:after {
clear: both;
}
.ec-withdrawRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-withdrawRole img {
max-width: 100%;
}
.ec-withdrawRole html {
box-sizing: border-box;
}
.ec-withdrawRole *, .ec-withdrawRole *::before, .ec-withdrawRole *::after {
box-sizing: inherit;
}
.ec-withdrawRole img {
width: 100%;
}
.ec-withdrawRole .ec-withdrawRole__title {
margin-bottom: 16px;
font-weight: bold;
font-size: 24px;
}
.ec-withdrawRole .ec-withdrawRole__description {
margin-bottom: 32px;
font-size: 16px;
}
.ec-withdrawRole .ec-icon img {
width: 100px;
height: 100px;
}
/*
退会手続き実行確認
退会手続き実行確認で使用するページコンポーネントです。
ex [退会手続き 退会手続きへボタン→押下](http://demo3.ec-cube.net/mypage/withdraw)
Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawConfirm
Styleguide 21.1.2
*/
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__cancel {
margin-bottom: 20px;
}
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__title {
margin-bottom: 16px;
font-weight: bold;
font-size: 24px;
}
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__description {
margin-bottom: 32px;
font-size: 16px;
}
.ec-withdrawConfirmRole .ec-icon img {
width: 100px;
height: 100px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
会員情報編集完了
会員情報編集完了で使用するページコンポーネントです。
ex [会員情報編集完了](http://demo3.ec-cube.net/mypage/change_complete)
Markup:
include /assets/tmpl/elements/22.1.editComplete.pug
+ec-userEditCompleteRole
Styleguide 22.1
*/
.ec-userEditCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
text-align: center;
padding: 0 16px;
}
.ec-userEditCompleteRole:after {
content: " ";
display: table;
}
.ec-userEditCompleteRole:after {
clear: both;
}
.ec-userEditCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-userEditCompleteRole img {
max-width: 100%;
}
.ec-userEditCompleteRole html {
box-sizing: border-box;
}
.ec-userEditCompleteRole *, .ec-userEditCompleteRole *::before, .ec-userEditCompleteRole *::after {
box-sizing: inherit;
}
.ec-userEditCompleteRole img {
width: 100%;
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
margin-bottom: 16px;
font-weight: bold;
font-size: 24px;
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
margin-bottom: 32px;
font-size: 16px;
}
@media (min-width: 768px) {
.ec-grid2 .ec-grid2__cell {
width: 50%;
}
.ec-grid2 .ec-grid2__cell2 {
width: 100%;
}
.ec-grid3 .ec-grid3__cell {
width: 33.33333%;
}
.ec-grid3 .ec-grid3__cell2 {
width: 100%;
}
.ec-grid3 .ec-grid3__cell3 {
width: 100%;
}
.ec-grid4 .ec-grid4__cell {
width: 25%;
}
.ec-grid6 .ec-grid6__cell {
width: 16.66667%;
}
.ec-grid6 .ec-grid6__cell2 {
width: 33.33333%;
}
.ec-grid6 .ec-grid6__cell3 {
width: 50%;
}
}
.ec-price .ec-price__tax {
font-size: 0.57em;
}
.price .ec-price__tax {
font-size: 0.57em;
}
@media only screen and (min-width: 768px) {
.ec-pageHeader h1 {
border-top: none;
border-bottom: 1px solid #ccc;
margin: 10px 16px 48px;
padding: 8px;
font-size: 32px;
font-weight: bold;
}
.ec-heading-bold {
font-size: 18px;
}
.ec-reportHeading {
border-top: 0;
font-size: 18px;
}
.ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3, .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p {
font-size: 18px;
text-align: center;
font-weight: bold;
}
.ec-price .ec-price__unit {
font-size: 1em;
}
.ec-price .ec-price__price {
font-size: 1em;
}
.ec-price .ec-price__tax {
font-size: 0.57em;
}
.price .ec-price__tax {
font-size: 0.57em;
}
.ec-borderedDefs{
margin-bottom: 20px;
}
.ec-borderedDefs dl {
flex-wrap: nowrap;
padding: 15px 0 4px;
}
.ec-borderedDefs dt {
padding-top: 14px;
width: 35%;
}
.ec-borderedDefs dd {
width: 65%;
line-height: 3;
}
.ec-list-chilled dt, .ec-list-chilled dd {
padding: 16px 0;
}
.ec-list-chilled dd {
padding: 16px;
}
.ec-borderedList {
border-top: 1px dotted #ccc;
}
.ec-blockTopBtn {
right: 30px;
bottom: 30px;
}
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
font-size: 14px;
}
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
font-size: 14px;
}
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
font-size: 14px;
}
.ec-halfInput input[type='text'] {
margin-left: 15px;
width: 45%;
}
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
font-size: 14px;
}
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
font-size: 14px;
}
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
font-size: 14px;
}
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
margin-bottom: 16px;
}
.ec-halfInput input[type='text'] {
margin-left: 15px;
width: 45%;
}
.ec-select__delivery {
display: inline-block;
}
.ec-select__time {
display: inline-block;
}
.ec-birth select {
margin: 0 8px 10px;
}
.ec-required {
margin-left: 1em;
}
.ec-grid2 {
display: flex;
}
.ec-grid3 {
display: flex;
}
.ec-grid4 {
display: flex;
}
.ec-grid6 {
display: flex;
}
.ec-off1Grid {
display: block;
margin: 0;
}
.ec-off1Grid .ec-off1Grid__cell {
position: relative;
min-height: 1px;
margin-left: 8.33333%;
}
.ec-off2Grid {
display: flex;
}
.ec-off2Grid .ec-off2Grid__cell {
position: relative;
min-height: 1px;
margin-left: 16.66667%;
}
.ec-off3Grid {
display: flex;
}
.ec-off3Grid .ec-off3Grid__cell {
position: relative;
min-height: 1px;
margin-left: 25%;
}
.ec-off4Grid {
display: flex;
}
.ec-off4Grid .ec-off4Grid__cell {
position: relative;
min-height: 1px;
margin-left: 33.33333%;
}
.ec-imageGrid .ec-imageGrid__img {
padding: 10px;
width: 130px;
}
.ec-login {
margin: 0 16px;
padding: 30px 13% 60px;
}
.ec-login .ec-login__link {
margin-left: 20px;
}
.ec-guest {
height: 100%;
margin: 0 16px;
}
.ec-displayB {
flex-direction: row;
}
.ec-displayB .ec-displayB__cell {
width: 31.4466%;
margin-bottom: 0;
}
.ec-displayC .ec-displayC__cell {
width: 22.8775%;
}
.ec-displayD {
box-sizing: border-box;
flex-wrap: nowrap;
}
.ec-displayD .ec-displayD__cell {
width: 14.3083%;
margin-bottom: 16px;
}
.ec-topicpath {
padding: 30px 0 10px;
border: 0;
font-size: 16px;
}
.ec-progress {
margin-bottom: 30px;
padding: 0;
}
.ec-progress .ec-progress__number {
line-height: 42px;
width: 42px;
height: 42px;
font-size: 20px;
}
.ec-cartNaviWrap {
position: relative;
}
.ec-cartNavi {
display: flex;
justify-content: space-between;
border-radius: 99999px;
box-sizing: border-box;
padding: 12px 17px 10px;
width: auto;
min-width: 140px;
height: 44px;
white-space: nowrap;
cursor: pointer;
background: #F8F8F8;
}
.ec-cartNavi .ec-cartNavi__badge {
display: inline-block;
min-width: 17px;
position: relative;
left: 0;
top: 0;
}
.ec-cartNavi .ec-cartNavi__price {
display: inline-block;
font-size: 14px;
font-weight: normal;
vertical-align: middle;
}
.ec-cartNavi.is-active .ec-cartNavi__badge {
display: none;
}
.ec-cartNaviIsset {
margin-top: 10px;
min-width: 256px;
max-width: 256px;
}
.ec-cartNaviIsset::before {
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 8.5px 10px 8.5px;
border-color: transparent transparent #f8f8f8 transparent;
position: absolute;
top: -9px;
}
.ec-cartNaviNull {
margin-top: 10px;
min-width: 256px;
max-width: 256px;
}
.ec-cartNaviNull::before {
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 8.5px 10px 8.5px;
border-color: transparent transparent #f8f8f8 transparent;
position: absolute;
top: -9px;
}
.ec-totalBox .ec-totalBox__price {
font-size: 24px;
}
.ec-totalBox .ec-totalBox__taxLabel {
font-size: 14px;
}
.ec-totalBox .ec-totalBox__taxRate {
font-size: 12px;
}
.ec-news {
margin-right: 3%;
}
.ec-news {
margin-bottom: 32px;
}
.ec-news .ec-news__title {
padding: 16px;
text-align: left;
font-size: 24px;
}
.ec-navlistRole .ec-navlistRole__navlist {
flex-wrap: nowrap;
}
.ec-welcomeMsg {
padding-left: 26px;
padding-right: 26px;
}
.ec-favoriteRole .ec-favoriteRole__item-image {
height: 150px;
}
.ec-favoriteRole .ec-favoriteRole__item {
width: 25%;
}
.ec-mypageRole {
padding-left: 26px;
padding-right: 26px;
}
.ec-mypageRole .ec-pageHeader h1 {
margin: 10px 0 48px;
padding: 8px 0 18px;
}
.ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 75%;
}
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
width: 50%;
}
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
display: block;
width: 25%;
}
.ec-headerRole:after {
content: " ";
display: table;
}
.ec-headerRole:after {
clear: both;
}
.ec-headerRole {
width: 100%;
}
.ec-headerRole:after {
content: " ";
display: table;
}
.ec-headerRole:after {
clear: both;
}
.ec-headerRole .ec-headerRole__navSP {
display: none;
}
.ec-headerNaviRole {
padding-bottom: 40px;
}
.ec-headerNaviRole .ec-headerNaviRole__search {
display: inline-block;
margin-top: 10px;
}
.ec-headerNaviRole .ec-headerNaviRole__search a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__search a:hover {
text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__navSP {
display: none;
}
.ec-headerNaviRole .ec-headerNaviRole__navSP a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__navSP a:hover {
text-decoration: none;
}
.ec-headerNavSP {
display: none;
}
.ec-headerTitle .ec-headerTitle__title a {
font-size: 40px;
}
.ec-headerTitle .ec-headerTitle__subtitle {
font-size: 16px;
margin-bottom: 10px;
}
.ec-headerNav .ec-headerNav__itemIcon {
margin-right: 0;
font-size: 20px;
}
.ec-headerNav .ec-headerNav__itemLink {
display: inline-block;
}
.ec-headerSearch .ec-headerSearch__category {
float: left;
width: 43%;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select {
max-width: 165px;
height: 36px;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
border-top-right-radius: inherit;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.ec-headerSearch .ec-headerSearch__keyword {
float: right;
width: 57%;
border-bottom-left-radius: inherit;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
font-size: 12px;
}
.ec-categoryNaviRole {
display: block;
width: 100%;
}
.ec-categoryNaviRole a {
color: inherit;
text-decoration: none;
}
.ec-categoryNaviRole a:hover {
text-decoration: none;
}
.ec-itemNav__nav {
display: inline-block;
}
.ec-itemNav__nav li {
float: left;
width: auto;
}
.ec-itemNav__nav li a {
text-align: center;
border-bottom: none;
}
.ec-itemNav__nav li ul {
display: block;
z-index: 100;
position: absolute;
}
.ec-itemNav__nav li ul li {
overflow: hidden;
height: 0;
}
.ec-itemNav__nav > li:hover > ul > li {
overflow: visible;
height: auto;
}
.ec-itemNav__nav li ul li ul:before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 12px;
color: white;
position: absolute;
top: 19px;
right: auto;
left: -20px;
}
.ec-itemNav__nav li ul li:hover > ul > li {
overflow: visible;
height: auto;
width: auto;
}
.ec-drawerRole {
display: none;
}
.ec-drawerRoleClose {
display: none;
}
.ec-drawerRole.is_active {
display: none;
}
.ec-drawerRoleClose.is_active {
display: none;
}
.ec-overlayRole {
display: none;
}
.have_curtain .ec-overlayRole {
display: none;
}
.ec-footerRole {
padding-top: 40px;
margin-top: 100px;
}
.ec-footerRole .ec-footerRole__inner {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-footerRole .ec-footerRole__inner:after {
content: " ";
display: table;
}
.ec-footerRole .ec-footerRole__inner:after {
clear: both;
}
.ec-footerRole .ec-footerRole__inner textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-footerRole .ec-footerRole__inner img {
max-width: 100%;
}
.ec-footerRole .ec-footerRole__inner html {
box-sizing: border-box;
}
.ec-footerRole .ec-footerRole__inner *, .ec-footerRole .ec-footerRole__inner *::before, .ec-footerRole .ec-footerRole__inner *::after {
box-sizing: inherit;
}
.ec-footerRole .ec-footerRole__inner img {
width: 100%;
}
.ec-footerNavi .ec-footerNavi__link {
display: inline-block;
}
.ec-footerNavi .ec-footerNavi__link a {
display: inline-block;
border-bottom: none;
margin: 0 10px;
padding: 0;
text-decoration: underline;
}
.ec-footerTitle {
padding: 50px 0 80px;
}
.ec-footerTitle .ec-footerTitle__logo a {
font-size: 24px;
}
.ec-footerTitle .ec-footerTitle__copyright {
font-size: 12px;
}
.ec-sliderItemRole .item_nav {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 0;
}
.ec-eyecatchRole {
flex-wrap: nowrap;
}
.ec-eyecatchRole .ec-eyecatchRole__image {
order: 2;
}
.ec-eyecatchRole .ec-eyecatchRole__intro {
padding-right: 5%;
order: 1;
}
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-top: 45px;
}
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: 1em;
font-size: 26px;
}
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
margin-bottom: 30px;
}
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 30px;
}
.ec-blockBtn--top {
max-width: 260px;
}
.ec-topicRole {
padding: 60px 0;
}
.ec-topicRole .ec-topicRole__list {
flex-wrap: nowrap;
}
.ec-topicRole .ec-topicRole__listItem {
width: calc(100% / 2);
}
.ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
margin-right: 30px;
}
.ec-topicRole .ec-topicRole__listItemTitle {
margin-top: 1em;
}
.ec-newItemRole {
padding: 60px 0;
}
.ec-newItemRole .ec-newItemRole__list {
flex-wrap: nowrap;
}
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 15px;
width: calc(100% / 4);
}
.ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
margin-right: 30px;
}
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 30px;
}
.ec-newItemRole .ec-newItemRole__listItemTitle {
margin: 20px 0 10px;
}
.ec-categoryRole {
padding: 60px 0;
}
.ec-categoryRole .ec-categoryRole__list {
flex-wrap: nowrap;
}
.ec-categoryRole .ec-categoryRole__listItem {
width: calc(100% / 3);
}
.ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
margin-right: 30px;
}
.ec-newsRole {
padding: 60px 0 0;
}
.ec-newsRole .ec-newsRole__news {
border: 16px solid #F8F8F8;
padding: 20px 30px;
}
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 0;
}
.ec-newsRole .ec-newsRole__newsItem {
padding: 20px 0;
}
.ec-newsRole .ec-newsRole__newsHeading {
display: flex;
}
.ec-newsRole .ec-newsRole__newsDate {
display: inline-block;
margin: 0;
min-width: 120px;
font-size: 14px;
}
.ec-newsRole .ec-newsRole__newsColumn {
display: inline-flex;
min-width: calc(100% - 120px);
}
.ec-newsRole .ec-newsRole__newsTitle {
margin-bottom: 0;
line-height: 1.8;
}
.ec-newsRole .ec-newsRole__newsDescription {
margin: 20px 0 0;
line-height: 1.8;
}
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
margin: 20px 0 0;
}
.ec-searchnavRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
color: #5d4136;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
}
.ec-searchnavRole:after {
content: " ";
display: table;
}
.ec-searchnavRole:after {
clear: both;
}
.ec-searchnavRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-searchnavRole img {
max-width: 100%;
}
.ec-searchnavRole html {
box-sizing: border-box;
}
.ec-searchnavRole *, .ec-searchnavRole *::before, .ec-searchnavRole *::after {
box-sizing: inherit;
}
.ec-searchnavRole img {
width: 100%;
}
.ec-searchnavRole .ec-searchnavRole__infos {
padding-left: 0;
padding-right: 0;
border-top: 1px solid #ccc;
padding-top: 16px;
flex-direction: row;
}
.ec-searchnavRole .ec-searchnavRole__counter {
margin-bottom: 0;
width: 50%;
}
.ec-searchnavRole .ec-searchnavRole__actions {
width: 50%;
}
.ec-shelfGrid {
margin-left: -16px;
margin-right: -16px;
}
.ec-shelfGrid .ec-shelfGrid__item-image {
max-height: 150px;
overflow: hidden;
position: relative;
}
.ec-shelfGrid .ec-shelfGrid__item-image .item_mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
display: flex;
justify-content: center;
align-items: center;
}
.ec-shelfGrid .ec-shelfGrid__item-image .item_caption {
font-size: 15px;
color: rgb(255, 255, 255);
width: 64%;
box-sizing: border-box;
padding: 13px 0px;
border-width: 2px;
border-style: solid;
border-color: rgb(255, 255, 255);
border-image: initial;
text-align: center;
}
.ec-shelfGrid .ec-shelfGrid__item-image:hover .item_mask {
opacity: 1;
}
.ec-shelfGrid .ec-shelfGrid__item {
padding: 0 16px;
width: 33%;
}
.ec-shelfGrid .ec-shelfGrid__item .ttl {
font-weight: bold;
margin-bottom: 5px;
}
.ec-shelfGrid .ec-shelfGrid__item .price02-default {
font-weight: bold;
margin: 20px 0 5px 0;
color: #48382B;
}
.ec-shelfGrid .ec-shelfGrid__item .price02-default .price02-default_price--sub {
margin-left: 2px;
font-size: 1rem;
}
.ec-shelfGrid .ec-shelfGrid__item .ttl_member .ec-price__tax {
margin-left: 2px;
font-size: 1rem;
}
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
padding: 0 16px;
}
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
padding: 0 16px;
}
.ec-shelfGridCenter {
margin-left: -16px;
margin-right: -16px;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
height: 250px;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item {
padding: 0 16px;
width: 25%;
}
@media only screen and (max-width: 768px) {
.ec-shelfGrid .ec-shelfGrid__item {
padding: 0 16px;
width: 50%;
}
}
@media only screen and (max-width: 414px) {
.ec-shelfGrid .ec-shelfGrid__item {
padding: 0 16px;
width: 100%;
}
}
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
padding: 0 16px;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
padding: 0 16px;
}
.ec-modal .ec-modal-wrap {
padding: 40px 10px;
width: 50%;
margin: 20px auto;
}
.ec-productRole .ec-productRole__img {
margin-right: 16px;
margin-bottom: 0;
}
.ec-productRole .ec-productRole__profile {
margin-left: 16px;
}
.ec-productRole .ec-productRole__title .ec-headingTitle {
font-size: 32px;
}
.ec-productRole .ec-productRole__price {
padding: 14px 0;
border-bottom: 1px dotted #ccc;
}
.ec-productRole .ec-productRole__actions .ec-select select {
min-width: 350px;
max-width: 350px;
}
.ec-productRole .ec-productRole__btn {
width: 60%;
margin-bottom: 16px;
min-width: 350px;
}
.ec-cartRole .ec-cartRole__totalText {
margin-bottom: 30px;
padding: 0;
}
.ec-cartRole .ec-cartRole__cart {
margin: 0 10%;
}
.ec-cartRole .ec-cartRole__actions {
width: 20%;
margin-right: 10%;
}
.ec-cartRole .ec-cartRole__totalAmount {
font-size: 24px;
}
.ec-cartTable {
border-top: none;
}
.ec-cartHeader {
display: table-row;
}
.ec-cartRow .ec-cartRow__delColumn {
width: 8.3333333%;
}
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
width: 1em;
height: 1em;
}
.ec-cartRow .ec-cartRow__contentColumn {
display: table-cell;
}
.ec-cartRow .ec-cartRow__img {
display: inline-block;
min-width: 80px;
max-width: 100px;
padding-right: 0;
}
.ec-cartRow .ec-cartRow__summary {
display: inline-block;
margin-left: 20px;
vertical-align: middle;
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
display: none;
}
.ec-cartRow .ec-cartRow__amountColumn {
width: 16.66666667%;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
display: block;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
display: none;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
display: block;
}
.ec-cartRow .ec-cartRow__subtotalColumn {
display: table-cell;
}
.ec-orderRole {
margin-top: 20px;
flex-direction: row;
}
.ec-orderRole .ec-orderRole__detail {
padding: 0 16px;
width: 50%;
}
.ec-orderRole .ec-orderRole__summary {
width: 50%;
padding: 0 16px;
}
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: none;
}
.ec-orderRole .ec-borderedList {
border-top: none;
}
.ec-orderConfirm {
margin-bottom: 0;
}
.ec-AddAddress {
margin: 0 10%;
}
.ec-AddAddress .ec-AddAddress__selectAddress select {
min-width: 350px;
}
.ec-historyRole .ec-historyRole__contents {
flex-direction: row;
}
.ec-historyRole .ec-historyRole__header {
width: 33.3333%;
}
.ec-historyRole .ec-historyRole__detail {
width: 66.6666%;
border-top: none;
}
.ec-historyListHeader .ec-historyListHeader__date {
font-weight: bold;
font-size: 20px;
}
.ec-historyListHeader .ec-historyListHeader__action a {
font-size: 14px;
}
.ec-registerRole .ec-registerRole__actions {
text-align: left;
}
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 16px;
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
font-size: 32px;
}
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
.ec-off1Grid {
display: flex;
}
.ec-off1Grid .ec-off0Grid__cell {
width: 100%;
}
.ec-off1Grid .ec-off1Grid__cell {
width: 83.33333%;
}
.ec-off2Grid .ec-off2Grid__cell {
width: 66.66667%;
}
.ec-off3Grid .ec-off3Grid__cell {
width: 50%;
}
.ec-off4Grid .ec-off4Grid__cell {
width: 33.33333%;
}
}
/*# sourceMappingURL=style.css.map */
/*
ボタンサイズ
ボタンサイズを変更するスタイル群です。
sg-wrapper:
Styleguide 2.1
*/
/*
通常ボタン
インラインの要素としてボタンを定義出来ます。
ex [トップページ ボタン部分](http://demo3.ec-cube.net/)
Markup:
.ec-inlineBtn 住所検索
.ec-inlineBtn--primary もっと見る
.ec-inlineBtn--action カートに入れる
.ec-inlineBtn--cancel キャンセル
Styleguide 2.1.1
*/
.ec-inlineBtn {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: #5d4136;
background-color: #F5F7F8;
border-color: #ccc;
}
.ec-inlineBtn:focus, .ec-inlineBtn.focus, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-inlineBtn:hover, .ec-inlineBtn:focus, .ec-inlineBtn.focus {
color: #5d4136;
text-decoration: none;
}
.ec-inlineBtn:active, .ec-inlineBtn.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}/*
.ec-inlineBtn.disabled, .ec-inlineBtn[disabled], fieldset[disabled] .ec-inlineBtn {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-inlineBtn:focus, .ec-inlineBtn.focus {
color: #5d4136;
background-color: #d7dfe3;
border-color: #8c8c8c;
}
.ec-inlineBtn:hover {
color: #5d4136;
background-color: #d7dfe3;
border-color: #adadad;
}
.ec-inlineBtn:active, .ec-inlineBtn.active, .open > .ec-inlineBtn.dropdown-toggle {
color: #5d4136;
background-color: #d7dfe3;
background-image: none;
border-color: #adadad;
}
.ec-inlineBtn:active:hover, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:hover, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus, .open > .ec-inlineBtn.dropdown-toggle:hover, .open > .ec-inlineBtn.dropdown-toggle:focus, .open > .ec-inlineBtn.dropdown-toggle.focus {
color: #5d4136;
background-color: #c2ced4;
border-color: #8c8c8c;
}
.ec-inlineBtn.disabled:hover, .ec-inlineBtn.disabled:focus, .ec-inlineBtn.disabled.focus, .ec-inlineBtn[disabled]:hover, .ec-inlineBtn[disabled]:focus, .ec-inlineBtn[disabled].focus, fieldset[disabled] .ec-inlineBtn:hover, fieldset[disabled] .ec-inlineBtn:focus, fieldset[disabled] .ec-inlineBtn.focus {
background-color: #F5F7F8;
border-color: #ccc;
}
.ec-inlineBtn .badge {
color: #F5F7F8;
background-color: #5d4136;
}
.ec-inlineBtn .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
.ec-inlineBtn--primary {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: #fff;
background-color: #5d4136;
border-color: #5d4136;
}
.ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-inlineBtn--primary:hover, .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
color: #5d4136;
text-decoration: none;
}
.ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}/*
.ec-inlineBtn--primary.disabled, .ec-inlineBtn--primary[disabled], fieldset[disabled] .ec-inlineBtn--primary {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
color: #fff;
background-color: #479393;
border-color: #2e6060;
}
.ec-inlineBtn--primary:hover {
color: #fff;
background-color: #479393;
border-color: #438d8d;
}
.ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active, .open > .ec-inlineBtn--primary.dropdown-toggle {
color: #fff;
background-color: #479393;
background-image: none;
border-color: #438d8d;
}
.ec-inlineBtn--primary:active:hover, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:hover, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus, .open > .ec-inlineBtn--primary.dropdown-toggle:hover, .open > .ec-inlineBtn--primary.dropdown-toggle:focus, .open > .ec-inlineBtn--primary.dropdown-toggle.focus {
color: #fff;
background-color: #3b7b7b;
border-color: #2e6060;
}
.ec-inlineBtn--primary.disabled:hover, .ec-inlineBtn--primary.disabled:focus, .ec-inlineBtn--primary.disabled.focus, .ec-inlineBtn--primary[disabled]:hover, .ec-inlineBtn--primary[disabled]:focus, .ec-inlineBtn--primary[disabled].focus, fieldset[disabled] .ec-inlineBtn--primary:hover, fieldset[disabled] .ec-inlineBtn--primary:focus, fieldset[disabled] .ec-inlineBtn--primary.focus {
background-color: #5d4136;
border-color: #5d4136;
}
.ec-inlineBtn--primary .badge {
color: #5d4136;
background-color: #fff;
}
.ec-inlineBtn--primary .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
.ec-inlineBtn--action {
display: inline-block;
margin-top: 10px;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: #ffffff;
background-color: #e17777;
border-color: #e17777;
}
.ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-inlineBtn--action:hover,.ec-inlineBtn--action:visited,.ec-inlineBtn--action:link, .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
color: #fff;
text-decoration: none;
}
.ec-inlineBtn--action:active, .ec-inlineBtn--action.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/*
.ec-inlineBtn--action.disabled, .ec-inlineBtn--action[disabled], fieldset[disabled] .ec-inlineBtn--action {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
color: #fff;
background-color: #de5959;
border-color: #de5959;
text-decoration: none;
}
.ec-role a:hover{color: #fff;}
.ec-inlineBtn--action[href]:hover,
.ec-inlineBtn--action:link:hover{
color: #fff;
background-color: #de5959;
border-color: #de5959;
text-decoration: none;
}
.ec-inlineBtn--action:active, .ec-inlineBtn--action.active, .open > .ec-inlineBtn--action.dropdown-toggle {
color: #fff;
background-color: #5d4136;
background-image: none;
border-color: #5d4136;
}
.ec-inlineBtn--action:active:hover, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:hover, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus, .open > .ec-inlineBtn--action.dropdown-toggle:hover, .open > .ec-inlineBtn--action.dropdown-toggle:focus, .open > .ec-inlineBtn--action.dropdown-toggle.focus {
color: #fff;
background-color: #5d4136;
border-color: #5d4136;
}
.ec-inlineBtn--action.disabled:hover, .ec-inlineBtn--action.disabled:focus, .ec-inlineBtn--action.disabled.focus, .ec-inlineBtn--action[disabled]:hover, .ec-inlineBtn--action[disabled]:focus, .ec-inlineBtn--action[disabled].focus, fieldset[disabled] .ec-inlineBtn--action:hover, fieldset[disabled] .ec-inlineBtn--action:focus, fieldset[disabled] .ec-inlineBtn--action.focus {
background-color: #e17777;
border-color: #e17777;
}
.ec-inlineBtn--action .badge {
color: #fff;
background-color: #fff;
}
.ec-inlineBtn--action .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
.ec-inlineBtn--cancel {
display: inline-block;
margin-top: 10px;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: #fff;
background-color: #5d4136;
border-color: #5d4136;
}
.ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
color: #5d4136;
text-decoration: none;
}
.ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/*
.ec-inlineBtn--cancel.disabled, .ec-inlineBtn--cancel[disabled], fieldset[disabled] .ec-inlineBtn--cancel {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
color: #fff;
background-color: #4a342c;
border-color: #18181d;
}
.ec-inlineBtn--cancel:hover {
color: #fff;
background-color: #4a342c;
border-color: #3c2a24;
}
.ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active, .open > .ec-inlineBtn--cancel.dropdown-toggle {
color: #fff;
background-color: #4a342c;
background-image: none;
border-color: #3c2a24;
}
.ec-inlineBtn--cancel:active:hover, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:hover, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus, .open > .ec-inlineBtn--cancel.dropdown-toggle:hover, .open > .ec-inlineBtn--cancel.dropdown-toggle:focus, .open > .ec-inlineBtn--cancel.dropdown-toggle.focus {
color: #fff;
background-color: #2b2b34;
border-color: #18181d;
}
.ec-inlineBtn--cancel.disabled:hover, .ec-inlineBtn--cancel.disabled:focus, .ec-inlineBtn--cancel.disabled.focus, .ec-inlineBtn--cancel[disabled]:hover, .ec-inlineBtn--cancel[disabled]:focus, .ec-inlineBtn--cancel[disabled].focus, fieldset[disabled] .ec-inlineBtn--cancel:hover, fieldset[disabled] .ec-inlineBtn--cancel:focus, fieldset[disabled] .ec-inlineBtn--cancel.focus {
background-color: #5d4136;
border-color: #5d4136;
}
.ec-inlineBtn--cancel .badge {
color: #5d4136;
background-color: #fff;
}
.ec-inlineBtn--cancel .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
/*
ブロックボタン（全幅）
ボタンサイズは em で指定するため、テキストサイズの変更でボタンサイズを変更できます。
ex [商品詳細ページ カートボタン部分](http://demo3.ec-cube.net/products/detail/30)
Markup:
p: .ec-blockBtn 住所検索
p: .ec-blockBtn--primary もっと見る
p: .ec-blockBtn--action カートに入れる
p: .ec-blockBtn--cancel キャンセル
Styleguide 2.1.2
*/
.ec-blockBtn--action:link, .ec-blockBtn--action:visited,
.ec-blockBtn--cancel:link, .ec-blockBtn--cancel:visited,
.ec-blockBtn--action:hover, .ec-blockBtn--cancel:hover,
.ec-blockBtn--action:focus, .ec-blockBtn--cancel:focus{
text-decoration: none;
}
.ec-blockBtn {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: #5d4136;
background-color: #F5F7F8;
border-color: #ccc;
display: block;
width: 100%;
height: 56px;
line-height: 56px;
padding-top: 0;
padding-bottom: 0;
}
.ec-blockBtn:focus, .ec-blockBtn.focus, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-blockBtn:hover, .ec-blockBtn:focus, .ec-blockBtn.focus {
color: #5d4136;
text-decoration: none;
}
.ec-blockBtn:active, .ec-blockBtn.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/*
.ec-blockBtn.disabled, .ec-blockBtn[disabled], fieldset[disabled] .ec-blockBtn {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-blockBtn:focus, .ec-blockBtn.focus {
color: #5d4136;
background-color: #d7dfe3;
border-color: #8c8c8c;
}
.ec-blockBtn:hover {
color: #5d4136;
background-color: #d7dfe3;
border-color: #adadad;
}
.ec-blockBtn:active, .ec-blockBtn.active, .open > .ec-blockBtn.dropdown-toggle {
color: #5d4136;
background-color: #d7dfe3;
background-image: none;
border-color: #adadad;
}
.ec-blockBtn:active:hover, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:hover, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus, .open > .ec-blockBtn.dropdown-toggle:hover, .open > .ec-blockBtn.dropdown-toggle:focus, .open > .ec-blockBtn.dropdown-toggle.focus {
color: #5d4136;
background-color: #c2ced4;
border-color: #8c8c8c;
}
.ec-blockBtn.disabled:hover, .ec-blockBtn.disabled:focus, .ec-blockBtn.disabled.focus, .ec-blockBtn[disabled]:hover, .ec-blockBtn[disabled]:focus, .ec-blockBtn[disabled].focus, fieldset[disabled] .ec-blockBtn:hover, fieldset[disabled] .ec-blockBtn:focus, fieldset[disabled] .ec-blockBtn.focus {
background-color: #F5F7F8;
border-color: #ccc;
}
.ec-blockBtn .badge {
color: #F5F7F8;
background-color: #5d4136;
}
.ec-blockBtn .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
.ec-blockBtn--primary {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: #fff;
background-color: #5d4136;
border-color: #5d4136;
display: block;
width: 100%;
height: 56px;
line-height: 56px;
padding-top: 0;
padding-bottom: 0;
}
.ec-blockBtn--primary:visited{color: #fff;}
.ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-blockBtn--primary:hover, .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
color: #5d4136;
text-decoration: none;
}
.ec-blockBtn--primary:active, .ec-blockBtn--primary.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/*
.ec-blockBtn--primary.disabled, .ec-blockBtn--primary[disabled], fieldset[disabled] .ec-blockBtn--primary {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
color: #fff;
background-color: #2C2C2C;
border-color: #2C2C2C;
}
.ec-blockBtn--primary:hover {
color: #fff;
background-color: #2C2C2C;
border-color:#2C2C2C;
}
.ec-blockBtn--primary:active, .ec-blockBtn--primary.active, .open > .ec-blockBtn--primary.dropdown-toggle {
color: #fff;
background-color: #479393;
background-image: none;
border-color: #2C2C2C;
}
.ec-blockBtn--primary:active:hover, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:hover, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus, .open > .ec-blockBtn--primary.dropdown-toggle:hover, .open > .ec-blockBtn--primary.dropdown-toggle:focus, .open > .ec-blockBtn--primary.dropdown-toggle.focus {
color: #fff;
background-color: #2C2C2C;
border-color: #2C2C2C;
}
.ec-blockBtn--primary.disabled:hover, .ec-blockBtn--primary.disabled:focus, .ec-blockBtn--primary.disabled.focus, .ec-blockBtn--primary[disabled]:hover, .ec-blockBtn--primary[disabled]:focus, .ec-blockBtn--primary[disabled].focus, fieldset[disabled] .ec-blockBtn--primary:hover, fieldset[disabled] .ec-blockBtn--primary:focus, fieldset[disabled] .ec-blockBtn--primary.focus {
background-color: #5d4136;
border-color: #5d4136;
}
.ec-blockBtn--primary .badge {
color: #5d4136;
background-color: #fff;
}
.ec-blockBtn--primary .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
.ec-blockBtn--action {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: #fff;
background-color: #e17777;
border-color: #e17777;
display: block;
width: 100%;
height: 56px;
line-height: 56px;
padding-top: 0;
padding-bottom: 0;
}
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-blockBtn--action:hover, .ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
color: #5d4136;
text-decoration: none;
}
.ec-blockBtn--action:active, .ec-blockBtn--action.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
/*
.ec-blockBtn--action.disabled, .ec-blockBtn--action[disabled], fieldset[disabled] .ec-blockBtn--action {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
color: #fff;
background-color: #5d4136;
border-color: #5d4136;
}
.ec-blockBtn--action:hover {
color: #fff;
background-color:#5d4136;
border-color: #5d4136;
}
.ec-blockBtn--action:active, .ec-blockBtn--action.active, .open > .ec-blockBtn--action.dropdown-toggle {
color: #fff;
background-color: #5d4136;
background-image: none;
border-color: #5d4136;
}
.ec-blockBtn--action:active:hover, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:hover, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus, .open > .ec-blockBtn--action.dropdown-toggle:hover, .open > .ec-blockBtn--action.dropdown-toggle:focus, .open > .ec-blockBtn--action.dropdown-toggle.focus {
color: #fff;
background-color:#5d4136;
border-color: #5d4136;
}
.ec-blockBtn--action.disabled:hover, .ec-blockBtn--action.disabled:focus, .ec-blockBtn--action.disabled.focus, .ec-blockBtn--action[disabled]:hover, .ec-blockBtn--action[disabled]:focus, .ec-blockBtn--action[disabled].focus, fieldset[disabled] .ec-blockBtn--action:hover, fieldset[disabled] .ec-blockBtn--action:focus, fieldset[disabled] .ec-blockBtn--action.focus {
background-color: #e17777;
border-color: #e17777;
}
.ec-blockBtn--action .badge {
color: #fff;
background-color: #fff;
}
.ec-blockBtn--action .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
.ec-blockBtn--cancel {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: #fff;
background-color: #5d4136;
border-color: #5d4136;
display: block;
width: 100%;
height: 56px;
line-height: 56px;
padding-top: 0;
padding-bottom: 0;
}
.ec-blockBtn--cancel:visited,
.ec-blockBtn--cancel:link
{text-decoration: none;
color: #fff;}
.ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-blockBtn--cancel:hover, .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
color: #5d4136;
text-decoration: none;
}
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}/*
.ec-blockBtn--cancel.disabled, .ec-blockBtn--cancel[disabled], fieldset[disabled] .ec-blockBtn--cancel {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none;
}*/
.ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
color: #fff;
background-color: #4a342c;
border-color: #18181d;
}
.ec-blockBtn--cancel:hover {
color: #fff;
background-color: #4a342c;
border-color: #3c2a24;
text-decoration: none;
}
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active, .open > .ec-blockBtn--cancel.dropdown-toggle {
color: #fff;
background-color: #4a342c;
background-image: none;
border-color: #3c2a24;
}
.ec-blockBtn--cancel:active:hover, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:hover, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus, .open > .ec-blockBtn--cancel.dropdown-toggle:hover, .open > .ec-blockBtn--cancel.dropdown-toggle:focus, .open > .ec-blockBtn--cancel.dropdown-toggle.focus {
color: #fff;
background-color: #e17777;
border-color: #e17777;
}
.ec-blockBtn--cancel.disabled:hover, .ec-blockBtn--cancel.disabled:focus, .ec-blockBtn--cancel.disabled.focus, .ec-blockBtn--cancel[disabled]:hover, .ec-blockBtn--cancel[disabled]:focus, .ec-blockBtn--cancel[disabled].focus, fieldset[disabled] .ec-blockBtn--cancel:hover, fieldset[disabled] .ec-blockBtn--cancel:focus, fieldset[disabled] .ec-blockBtn--cancel.focus {
background-color: #5d4136;
border-color: #5d4136;
}
.ec-blockBtn--cancel .badge {
color: #5d4136;
background-color: #fff;
}
.ec-blockBtn--cancel .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
検索・一覧表示
検索欄や、一覧表示に使用するスタイル群です。
sg-wrapper:
Styleguide 7.2
*/
/*
トピックパス
検索結果で表示されるトピックパスのスタイルです。
ex [商品一覧ページ 横並びリスト部分](http://demo3.ec-cube.net/products/list?category_id=&name=)
Markup:
include /assets/tmpl/elements/7.2.search.pug
+ec-topicpath
Styleguide 7.2.1
*/
.ec-topicpath {
letter-spacing: -.4em;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
padding: 10px;
list-style: none;
overflow: hidden;
font-size: 12px;
color: #5d4136;
}
.ec-topicpath .ec-topicpath__item a {
color: inherit;
text-decoration: none;
}
.ec-topicpath .ec-topicpath__item a:hover {
text-decoration: none;
}
.ec-topicpath .ec-topicpath__divider {
color: #000;
}
.ec-topicpath .ec-topicpath__item, .ec-topicpath .ec-topicpath__divider, .ec-topicpath .ec-topicpath__item--active {
display: inline-block;
min-width: 16px;
text-align: center;
position: relative;
letter-spacing: normal;
}
.ec-topicpath .ec-topicpath__item--active {
font-weight: bold;
}
.ec-topicpath .ec-topicpath__item--active a {
color: inherit;
text-decoration: none;
}
.ec-topicpath .ec-topicpath__item--active a:hover {
text-decoration: none;
}
/*
ページャ
検索結果で表示される商品一覧のスタイルです。
ex [商品一覧ページ ページャ部分](http://demo3.ec-cube.net/products/list?category_id=&name=)
Markup:
include /assets/tmpl/elements/7.2.search.pug
+ec-pager
Styleguide 7.2.2
*/
.ec-pager {
list-style: none;
list-style-type: none;
margin: 0 auto;
padding: 1em 0;
text-align: center;
}
.ec-pager .ec-pager__item, .ec-pager .ec-pager__item--active {
display: inline-block;
min-width: 29px;
padding: 0 3px 0 2px;
text-align: center;
position: relative;
}
.ec-pager .ec-pager__item a, .ec-pager .ec-pager__item--active a {
color: inherit;
text-decoration: none;
}
.ec-pager .ec-pager__item a:hover, .ec-pager .ec-pager__item--active a:hover {
text-decoration: none;
}
.ec-pager .ec-pager__item a, .ec-pager .ec-pager__item--active a {
color: inherit;
display: block;
line-height: 1.8;
padding: 5px 1em;
text-decoration: none;
}
.ec-pager .ec-pager__item a:hover, .ec-pager .ec-pager__item--active a:hover {
color: inherit;
}
.ec-pager .ec-pager__item--active {
background: #F6F2E8;
}
.ec-pager .ec-pager__item:hover {
background: #F6F2E8;
}
/*
数量ボタン
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [商品詳細画面 数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)
Markup:
.ec-numberInput
span 数量
input(type="number",value="0")
Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
display: inline-block;
width: auto;
max-width: 120px;
text-align: right;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
フォーム部品(テキスト)
テキストや数値の入力項目に関する要素を定義します。
sg-wrapper:
Styleguide 3.1
*/
/*
フォーム
`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。
ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change)
Markup:
p.ec-input
input(type="number")
p.ec-input
textarea(rows="6")
Styleguide 3.1.1
*/
.ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"] {
box-sizing: border-box; }
.ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal; }
.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] {
display: block; }
.ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] {
display: block;
width: 100%; }
.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
height: auto; }
.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
color: #999;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
color: #999; }
.ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
color: #999; }
.ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
background-color: #eeeeee;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
cursor: not-allowed; }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
color: #999;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
color: #999; }
.ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
color: #999; }
.ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
background-color: #eeeeee;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
cursor: not-allowed; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #E2DCD3;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
color: #999;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
color: #999; }
.ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
color: #999; }
.ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
background-color: #eeeeee;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
cursor: not-allowed; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
box-shadow: none;
border-color: #3c8dbc; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
height: 40px;
margin-bottom: 10px; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
height: auto;
min-height: 100px; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0; }
.ec-checkbox .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-checkbox input, .error.ec-checkbox label {
border-color: #CF3F34;
background: #FDF1F0; }
/*
フォーム（text２つ）
姓名など2つ入力させたい入力項目で使用します。
入力フォームを半分で用意したいときにも利用可能です。
ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change)
Markup:
p.ec-halfInput
input(type="text")
input(type="text")
p.ec-halfInput
input(type="text")
Styleguide 3.1.2
*/
.ec-halfInput input[type='text'] {
display: inline-block;
width: 47%;
margin-left: 2%; }
.ec-halfInput input[type='text']:first-child {
margin-left: 0; }
/*
数量ボタン
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [商品詳細画面 数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)
Markup:
.ec-numberInput
span 数量
input(type="number",value="0")
Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
display: inline-block;
width: auto;
max-width: 100px;
text-align: right; }
/*
郵便番号フォーム
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面 郵便番号部分](http://demo3.ec-cube.net/mypage/change)
Markup:
.ec-zipInput
span 〒
input(type="text")
.ec-zipInputHelp
a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
.ec-zipInputHelp__icon
.ec-icon
img(src='/moc/icon/question-white.svg', alt='')
span 郵便番号検索
.ec-zipAuto
a.ec-inlineBtn 郵便番号から自動入力
Styleguide 3.1.4
*/
.ec-zipInput {
display: inline-block; }
.ec-zipInput input {
display: inline-block;
text-align: left;
width: auto;
max-width: 8em;
font-size: 16px; }
.ec-zipInput span {
display: inline-block;
padding: 0 5px 0 3px;
margin-left: 5px; }
.ec-zipInputHelp {
display: inline-block;
margin-left: 10px;
margin-bottom: 16px;
vertical-align: baseline;
line-height: 0; }
.ec-zipInputHelp .ec-zipInputHelp__icon {
display: inline-block;
margin-top: -10px;
width: 20px;
height: 20px;
background: #5D4136;
border-radius: 50%;
font-size: 13px;
position: relative;
top: -6px; }
.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
width: 1em;
height: 1em;
position: relative;
left: 3px;
top: 3px; }
.ec-zipInputHelp span {
margin-left: 8px;
display: inline-block;
color: #5D4136;
vertical-align: 3px; }
.ec-zipAuto {
margin-bottom: 16px; }
.ec-zipAuto .ec-inlineBtn {
font-weight: normal; }
/*
電話番号ボタン
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面 電話番号部分](http://demo3.ec-cube.net/mypage/change)
Markup:
.ec-telInput
input(type="text")
Styleguide 3.1.5
*/
.ec-telInput input {
max-width: 10em;
text-align: left; }
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
フォーム部品(テキスト)
テキストや数値の入力項目に関する要素を定義します。
sg-wrapper:
Styleguide 3.1
*/
/*
フォーム
`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。
ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change)
Markup:
p.ec-input
input(type="number")
p.ec-input
textarea(rows="6")
Styleguide 3.1.1
*/
.ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"] {
box-sizing: border-box; }
.ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal; }
.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] {
display: block; }
.ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] {
display: block;
width: 100%; }
.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
height: auto; }
.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
color: #999;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
color: #999; }
.ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
color: #999; }
.ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
background-color: #eeeeee;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
cursor: not-allowed; }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
color: #999;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
color: #999; }
.ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
color: #999; }
.ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
background-color: #eeeeee;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
cursor: not-allowed; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
color: #999;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
color: #999; }
.ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
color: #999; }
.ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
background-color: #eeeeee;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
cursor: not-allowed; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
box-shadow: none;
border-color: #3c8dbc; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
height: 40px;
margin-bottom: 10px; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
height: auto;
min-height: 100px; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage,.ec-radio .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0; }
.ec-checkbox .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-checkbox input, .error.ec-checkbox label {
border-color: #CF3F34;
background: #FDF1F0; }
/*
フォーム（text２つ）
姓名など2つ入力させたい入力項目で使用します。
入力フォームを半分で用意したいときにも利用可能です。
ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change)
Markup:
p.ec-halfInput
input(type="text")
input(type="text")
p.ec-halfInput
input(type="text")
Styleguide 3.1.2
*/
.ec-halfInput input[type='text'] {
display: inline-block;
width: 47%;
margin-left: 2%; }
.ec-halfInput input[type='text']:first-child {
margin-left: 0; }
/*
数量ボタン
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [商品詳細画面 数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)
Markup:
.ec-numberInput
span 数量
input(type="number",value="0")
Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
display: inline-block;
width: auto;
max-width: 100px;
text-align: right; }
/*
郵便番号フォーム
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面 郵便番号部分](http://demo3.ec-cube.net/mypage/change)
Markup:
.ec-zipInput
span 〒
input(type="text")
.ec-zipInputHelp
a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
.ec-zipInputHelp__icon
.ec-icon
img(src='/moc/icon/question-white.svg', alt='')
span 郵便番号検索
.ec-zipAuto
a.ec-inlineBtn 郵便番号から自動入力
Styleguide 3.1.4
*/
.ec-zipInput {
display: inline-block; }
.ec-zipInput input {
display: inline-block;
text-align: left;
width: auto;
max-width: 8em;
font-size: 16px; }
.ec-zipInput span {
display: inline-block;
padding: 0 5px 0 3px;
margin-left: 5px; }
.ec-zipInputHelp {
display: inline-block;
margin-left: 10px;
margin-bottom: 16px;
vertical-align: baseline;
line-height: 0; }
.ec-zipInputHelp .ec-zipInputHelp__icon {
display: inline-block;
margin-top: -10px;
width: 20px;
height: 20px;
background: #5D4136;
border-radius: 50%;
position: relative;
top: -6px; }
.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
width: 1em;
height: 1em;
position: relative;
left: 3px;
top: 3px; }
.ec-zipInputHelp span {
margin-left: 6px;
display: inline-block;
color: #5D4136;
vertical-align: 0px; }
.ec-zipAuto {
margin-bottom: 16px; }
.ec-zipAuto .ec-inlineBtn {
font-weight: normal; }
/*
電話番号ボタン
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面 電話番号部分](http://demo3.ec-cube.net/mypage/change)
Markup:
.ec-telInput
input(type="text")
Styleguide 3.1.5
*/
.ec-telInput input {
max-width: 10em;
text-align: left; }
/*
フォーム部品(その他)
フォーム部品でテキストの入力以外の動作要素を定義します。
sg-wrapper:
Styleguide 3.2
*/
/*
ラジオ（水平）
水平に並ぶラジオボタンフィールドです。
各要素をlabelでくくって、コーディングします。
ex [新規会員登録画面 性別選択部分](http://demo3.ec-cube.net/entry)
Markup:
.ec-radio
label
input(type="radio")
span 男性
label
input(type="radio")
span 女性
Styleguide 3.2.2
*/
.ec-radio label {
margin-right: 20px; }
.ec-radio input {
margin-right: 10px;
margin-bottom: 10px; }
.ec-radio span {
font-weight: normal; }
/*
ラジオ(垂直)
垂直に並ぶラジオボタンフィールドです。
各要素をlabelでくくって、コーディングします。
ex [購入画面 お支払方法](http://demo3.ec-cube.net/shopping)
Markup:
.ec-blockRadio
label
input(type="radio")
span 郵便振替
label
input(type="radio")
span 現金書留
label
input(type="radio")
span 銀行振込
label
input(type="radio")
span 代金引換
Styleguide 3.2.3
*/
.ec-blockRadio label {
display: block; }
.ec-blockRadio span {
padding-left: 10px;
font-weight: normal; }
/*
セレクトボックス
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [新規会員登録画面 都道府県選択部分](http://demo3.ec-cube.net/entry)
Markup:
.ec-select
select
option 都道府県を選択
option 北海道
option 青森県
option 岩手県
option ...
.ec-select
select
option 選択して下さい
option 公務員
option コンサルタント
option コンピュータ関連技術職
option コンピュータ関連以外の技術職
option ...
Styleguide 3.2.4
*/
.ec-selects {
margin-bottom: 20px;}
.ec-select {
margin-bottom: 16px; }
.ec-select select {
display: inline-block;
width: auto;
background-color: #f8f8f8;
-webkit-appearance: menulist;
-moz-appearance: menulist; }
.ec-select select:focus {
box-shadow: none; }
.ec-select label {
margin-right: 10px;
font-weight: bold; }
.ec-select label:nth-child(3) {
margin-left: 10px;
font-weight: bold; }
.ec-select__delivery {
display: block;
margin-right: 16px; }
.ec-select__time {
display: block; }
/*
生年月日選択
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [新規会員登録画面 生年月日選択部分](http://demo3.ec-cube.net/entry)
Markup:
.ec-birth
select
option ----
option 1960
option 1961
option 1962
option ...
span /
select
option --
option 01
option 02
option 03
option ...
span /
select
option --
option 01
option 02
option 03
option ...
Styleguide 3.2.5
*/
.ec-birth select {
display: inline-block;
width: auto;
margin: 0 0 10px;
background-color: #f8f8f8;
-webkit-appearance: menulist;
-moz-appearance: menulist; }
.ec-birth select:focus {
box-shadow: none; }
.ec-birth span {
margin-left: 5px; }
/*
チェックボックス （水平）
水平に並ぶチェックボックス フィールドです。
各要素をlabelでくくって、コーディングします。
ex [新規会員登録画面 利用規約](http://demo3.ec-cube.net/entry)
Markup:
.ec-checkbox
label
input(type="checkbox")
span 利用規約に同意する
Styleguide 3.2.6
*/
.ec-checkbox label {
display: inline-block; }
.ec-checkbox input {
margin-bottom: 10px; }
.ec-checkbox span {
font-weight: normal; }
/*
チェックボックス (垂直)
垂直に並ぶチェックボックス フィールドです。
各要素をlabelでくくって、コーディングします。
Markup:
.ec-blockCheckbox
label
input(type="checkbox")
span 利用規約に同意する
Styleguide 3.2.7
*/
.ec-blockCheckbox label {
display: block; }
.ec-blockCheckbox span {
font-weight: normal; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
フォームラベル
フォームのラベルに関する要素を定義します。
sg-wrapper:
Styleguide 3.3
*/
/*
ラベル
フォーム要素で利用するラベル要素です。
ex [お問い合わせページ ラベル部分](http://demo3.ec-cube.net/contact)
Markup:
.ec-borderedDefs
dl
dt
label.ec-label お名前
dd
.ec-input
input(type="text")
Styleguide 3.3.1
*/
.ec-label {
display: inline-block;
font-weight: bold;
margin-bottom: 5px; }
/*
必須ラベル
必須文字を表示するラベル要素です。
ex [お問い合わせページ 必須ラベル部分](http://demo3.ec-cube.net/contact)
Markup:
.ec-borderedDefs
dl
dt
label.ec-label お名前
span.ec-required 必須
dd
.ec-input
input(type="text")
Styleguide 3.3.2
*/
.ec-required {
display: inline-block;
margin-left: .8em;
vertical-align: 2px;
color: #DE5D50;
font-size: 12px;
font-weight: normal; }