Styleguide 2.2
*/
/*
アイコンボタン
閉じるなどSVGアイコンを用いたボタン装飾で利用します。
ex [ログイン画面 ☓ボタン部分](http://demo3.ec-cube.net/mypage/login)
Markup:
a.ec-closeBtn
.ec-icon
img(src='/moc/icon/cross.svg', alt='close')
Styleguide 2.2.1
*/
.ec-closeBtn {
cursor: pointer;
}
.ec-closeBtn .ec-icon img {
display: inline-block;
margin-right: 5px;
width: 1em;
height: 1em;
position: relative;
top: -1px;
vertical-align: middle;
}
/*
アイコンボタン(○)
閉じるなどSVGアイコンを用いたボタン装飾で利用します。
ex [ログイン画面 ☓ボタン部分](http://demo3.ec-cube.net/mypage/login)
ex [お届け先編集画面 ☓ボタン部分](http://demo3.ec-cube.net/mypage/delivery)
Markup:
a.ec-closeBtn--circle
.ec-icon
img(src='/moc/icon/cross-white.svg', alt='close')
Styleguide 2.2.2
*/
.ec-closeBtn--circle {
display: block;
border: 0 none;
padding: 0;
margin: 0;
text-shadow: none;
box-shadow: none;
border-radius: 50%;
background: #B8BEC4;
cursor: pointer;
width: 40px;
min-width: 40px;
max-width: 40px;
height: 40px;
line-height: 40px;
vertical-align: middle;
position: relative;
text-align: center;
}
.ec-closeBtn--circle .ec-icon img {
display: block;
margin-top: -0.5em;
margin-left: -0.5em;
width: 1em;
height: 1em;
position: absolute;
top: 50%;
left: 50%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
その他のボタン
通常のボタンや、アイコンボタン以外のボタンを定義します。
sg-wrapper:
Styleguide 2.3
*/
/*
ページトップボタン
ページトップボタンを表示します
ex [商品詳細ページ カートボタン部分](http://demo3.ec-cube.net/products/detail/30)
Markup:
.ec-blockTopBtn
Styleguide 2.3.1
*/
.ec-blockTopBtn {
display: none;
position: fixed;
width: 50px;
height: 50px;
right: 3%;
bottom: 10px;
cursor: pointer;
color: #FFFFFF;
text-align: center;
line-height: 50px;
background-color: #fedcd2;
border-radius: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-blockTopBtn {
right: 100px;
}
}
.ec-blockTopBtn img {
margin-top: -2px;
}
/**
メディアクエリ
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-birth input[type=search], .ec-select input[type=search], .ec-telInput input[type=search], .ec-zipInput input[type=search], .ec-numberInput input[type=search], .ec-halfInput input[type=search] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-input input[type=radio], .ec-birth input[type=radio], .ec-select input[type=radio], .ec-telInput input[type=radio], .ec-zipInput input[type=radio], .ec-numberInput input[type=radio], .ec-halfInput input[type=radio],
.ec-input input[type=checkbox],
.ec-birth input[type=checkbox],
.ec-select input[type=checkbox],
.ec-telInput input[type=checkbox],
.ec-zipInput input[type=checkbox],
.ec-numberInput input[type=checkbox],
.ec-halfInput input[type=checkbox] {
margin: 4px 0 0;
margin-top: 1px \9 ;
line-height: normal;
}
.ec-input input[type=file], .ec-birth input[type=file], .ec-select input[type=file], .ec-telInput input[type=file], .ec-zipInput input[type=file], .ec-numberInput input[type=file], .ec-halfInput input[type=file] {
display: block;
}
.ec-input input[type=range], .ec-birth input[type=range], .ec-select input[type=range], .ec-telInput input[type=range], .ec-zipInput input[type=range], .ec-numberInput input[type=range], .ec-halfInput input[type=range] {
display: block;
width: 100%;
}
.ec-input select[multiple], .ec-birth select[multiple], .ec-select select[multiple], .ec-telInput select[multiple], .ec-zipInput select[multiple], .ec-numberInput select[multiple], .ec-halfInput select[multiple],
.ec-input select[size],
.ec-birth select[size],
.ec-select select[size],
.ec-telInput select[size],
.ec-zipInput select[size],
.ec-numberInput select[size],
.ec-halfInput select[size] {
height: auto;
}
.ec-input input[type=file]:focus, .ec-birth input[type=file]:focus, .ec-select input[type=file]:focus, .ec-telInput input[type=file]:focus, .ec-zipInput input[type=file]:focus, .ec-numberInput input[type=file]:focus, .ec-halfInput input[type=file]:focus,
.ec-input input[type=radio]:focus,
.ec-birth input[type=radio]:focus,
.ec-select input[type=radio]:focus,
.ec-telInput input[type=radio]:focus,
.ec-zipInput input[type=radio]:focus,
.ec-numberInput input[type=radio]:focus,
.ec-halfInput input[type=radio]:focus,
.ec-input input[type=checkbox]:focus,
.ec-birth input[type=checkbox]:focus,
.ec-select input[type=checkbox]:focus,
.ec-telInput input[type=checkbox]:focus,
.ec-zipInput input[type=checkbox]:focus,
.ec-numberInput input[type=checkbox]:focus,
.ec-halfInput input[type=checkbox]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.428571429;
color: rgb(85.425, 85.425, 85.425);
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px;
}
.ec-input input:focus, .ec-birth input:focus, .ec-select input:focus, .ec-telInput input:focus, .ec-zipInput input:focus, .ec-numberInput input:focus, .ec-halfInput input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
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-birth input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-halfInput input::-moz-placeholder {
color: #999;
opacity: 1;
}
.ec-input input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder {
color: #999;
}
.ec-input input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder {
color: #999;
}
.ec-input input::-ms-expand, .ec-birth input::-ms-expand, .ec-select input::-ms-expand, .ec-telInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-halfInput input::-ms-expand {
border: 0;
background-color: transparent;
}
.ec-input input[disabled], .ec-birth input[disabled], .ec-select input[disabled], .ec-telInput input[disabled], .ec-zipInput input[disabled], .ec-numberInput input[disabled], .ec-halfInput input[disabled], .ec-input input[readonly], .ec-birth input[readonly], .ec-select input[readonly], .ec-telInput input[readonly], .ec-zipInput input[readonly], .ec-numberInput input[readonly], .ec-halfInput input[readonly], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-birth input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-halfInput input {
background-color: rgb(238.425, 238.425, 238.425);
opacity: 1;
}
.ec-input input[disabled], .ec-birth input[disabled], .ec-select input[disabled], .ec-telInput input[disabled], .ec-zipInput input[disabled], .ec-numberInput input[disabled], .ec-halfInput input[disabled], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-birth input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-halfInput input {
cursor: not-allowed;
}
@media only screen and (min-width: 1020px) {
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
font-size: 14px;
}
}
.ec-input select, .ec-birth select, .ec-select select, .ec-telInput select, .ec-zipInput select, .ec-numberInput select, .ec-halfInput select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.428571429;
color: rgb(85.425, 85.425, 85.425);
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px;
}
.ec-input select:focus, .ec-birth select:focus, .ec-select select:focus, .ec-telInput select:focus, .ec-zipInput select:focus, .ec-numberInput select:focus, .ec-halfInput select:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
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-birth select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-halfInput select::-moz-placeholder {
color: #999;
opacity: 1;
}
.ec-input select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder {
color: #999;
}
.ec-input select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder {
color: #999;
}
.ec-input select::-ms-expand, .ec-birth select::-ms-expand, .ec-select select::-ms-expand, .ec-telInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-halfInput select::-ms-expand {
border: 0;
background-color: transparent;
}
.ec-input select[disabled], .ec-birth select[disabled], .ec-select select[disabled], .ec-telInput select[disabled], .ec-zipInput select[disabled], .ec-numberInput select[disabled], .ec-halfInput select[disabled], .ec-input select[readonly], .ec-birth select[readonly], .ec-select select[readonly], .ec-telInput select[readonly], .ec-zipInput select[readonly], .ec-numberInput select[readonly], .ec-halfInput select[readonly], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-birth select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-halfInput select {
background-color: rgb(238.425, 238.425, 238.425);
opacity: 1;
}
.ec-input select[disabled], .ec-birth select[disabled], .ec-select select[disabled], .ec-telInput select[disabled], .ec-zipInput select[disabled], .ec-numberInput select[disabled], .ec-halfInput select[disabled], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-birth select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-halfInput select {
cursor: not-allowed;
}
@media only screen and (min-width: 1020px) {
.ec-input select, .ec-birth select, .ec-select select, .ec-telInput select, .ec-zipInput select, .ec-numberInput select, .ec-halfInput select {
font-size: 14px;
}
}
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-telInput textarea, .ec-zipInput textarea, .ec-numberInput textarea, .ec-halfInput textarea {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.428571429;
color: rgb(85.425, 85.425, 85.425);
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px;
}
.ec-input textarea:focus, .ec-birth textarea:focus, .ec-select textarea:focus, .ec-telInput textarea:focus, .ec-zipInput textarea:focus, .ec-numberInput textarea:focus, .ec-halfInput textarea:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
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-birth textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder {
color: #999;
opacity: 1;
}
.ec-input textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder {
color: #999;
}
.ec-input textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder {
color: #999;
}
.ec-input textarea::-ms-expand, .ec-birth textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-halfInput textarea::-ms-expand {
border: 0;
background-color: transparent;
}
.ec-input textarea[disabled], .ec-birth textarea[disabled], .ec-select textarea[disabled], .ec-telInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-halfInput textarea[disabled], .ec-input textarea[readonly], .ec-birth textarea[readonly], .ec-select textarea[readonly], .ec-telInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-halfInput textarea[readonly], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-birth textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-halfInput textarea {
background-color: rgb(238.425, 238.425, 238.425);
opacity: 1;
}
.ec-input textarea[disabled], .ec-birth textarea[disabled], .ec-select textarea[disabled], .ec-telInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-halfInput textarea[disabled], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-birth textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-halfInput textarea {
cursor: not-allowed;
}
@media only screen and (min-width: 1020px) {
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-telInput textarea, .ec-zipInput textarea, .ec-numberInput textarea, .ec-halfInput textarea {
font-size: 14px;
}
}
.ec-input input:focus, .ec-birth input:focus, .ec-select input:focus, .ec-telInput input:focus, .ec-zipInput input:focus, .ec-numberInput input:focus, .ec-halfInput input:focus, .ec-input textarea:focus, .ec-birth textarea:focus, .ec-select textarea:focus, .ec-telInput textarea:focus, .ec-zipInput textarea:focus, .ec-numberInput textarea:focus, .ec-halfInput textarea:focus {
box-shadow: none;
border-color: #3c8dbc;
}
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
height: 40px;
margin-bottom: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
margin-bottom: 16px;
}
}
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-telInput textarea, .ec-zipInput textarea, .ec-numberInput textarea, .ec-halfInput textarea {
height: auto;
min-height: 100px;
}
.ec-input p, .ec-birth p, .ec-select p, .ec-telInput p, .ec-zipInput p, .ec-numberInput p, .ec-halfInput p {
line-height: 1.4;
}
.ec-input .ec-errorMessage, .ec-birth .ec-errorMessage, .ec-select .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-halfInput .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #df744a;
}
.error.ec-input input, .error.ec-birth input, .error.ec-select input, .error.ec-telInput input, .error.ec-zipInput input, .error.ec-numberInput input, .error.ec-halfInput input, .error.ec-input select, .error.ec-birth select, .error.ec-select select, .error.ec-telInput select, .error.ec-zipInput select, .error.ec-numberInput select, .error.ec-halfInput select, .error.ec-input textarea, .error.ec-birth textarea, .error.ec-select textarea, .error.ec-telInput textarea, .error.ec-zipInput textarea, .error.ec-numberInput textarea, .error.ec-halfInput textarea {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0;
}
.ec-checkbox .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #df744a;
}
.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%;
}
@media only screen and (min-width: 1020px) {
.ec-halfInput input[type=text] {
margin-left: 15px;
width: 45%;
}
}
.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 !important;
}
.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: #525263;
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: #0092C4;
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-birth input[type=search], .ec-select input[type=search], .ec-halfInput input[type=search], .ec-numberInput input[type=search], .ec-zipInput input[type=search], .ec-telInput input[type=search] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-input input[type=radio], .ec-birth input[type=radio], .ec-select input[type=radio], .ec-halfInput input[type=radio], .ec-numberInput input[type=radio], .ec-zipInput input[type=radio], .ec-telInput input[type=radio],
.ec-input input[type=checkbox],
.ec-birth input[type=checkbox],
.ec-select input[type=checkbox],
.ec-halfInput input[type=checkbox],
.ec-numberInput input[type=checkbox],
.ec-zipInput input[type=checkbox],
.ec-telInput input[type=checkbox] {
margin: 4px 0 0;
margin-top: 1px \9 ;
line-height: normal;
}
.ec-input input[type=file], .ec-birth input[type=file], .ec-select input[type=file], .ec-halfInput input[type=file], .ec-numberInput input[type=file], .ec-zipInput input[type=file], .ec-telInput input[type=file] {
display: block;
}
.ec-input input[type=range], .ec-birth input[type=range], .ec-select input[type=range], .ec-halfInput input[type=range], .ec-numberInput input[type=range], .ec-zipInput input[type=range], .ec-telInput input[type=range] {
display: block;
width: 100%;
}
.ec-input select[multiple], .ec-birth select[multiple], .ec-select select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple],
.ec-input select[size],
.ec-birth select[size],
.ec-select select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size] {
height: auto;
}
.ec-input input[type=file]:focus, .ec-birth input[type=file]:focus, .ec-select 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-input input[type=radio]:focus,
.ec-birth input[type=radio]:focus,
.ec-select 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-input input[type=checkbox]:focus,
.ec-birth input[type=checkbox]:focus,
.ec-select 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 {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.428571429;
color: rgb(85.425, 85.425, 85.425);
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px;
}
.ec-input input:focus, .ec-birth input:focus, .ec-select input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
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-birth input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder {
color: #999;
opacity: 1;
}
.ec-input input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder, .ec-select 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 {
color: #999;
}
.ec-input input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder, .ec-select 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 {
color: #999;
}
.ec-input input::-ms-expand, .ec-birth input::-ms-expand, .ec-select input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand {
border: 0;
background-color: transparent;
}
.ec-input input[disabled], .ec-birth input[disabled], .ec-select input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-input input[readonly], .ec-birth input[readonly], .ec-select input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-birth input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input {
background-color: rgb(238.425, 238.425, 238.425);
opacity: 1;
}
.ec-input input[disabled], .ec-birth input[disabled], .ec-select input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-birth input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input {
cursor: not-allowed;
}
@media only screen and (min-width: 1020px) {
.ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
font-size: 14px;
}
}
.ec-input select, .ec-birth select, .ec-select select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.428571429;
color: rgb(85.425, 85.425, 85.425);
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px;
}
.ec-input select:focus, .ec-birth select:focus, .ec-select select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
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-birth select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder {
color: #999;
opacity: 1;
}
.ec-input select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder, .ec-select 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 {
color: #999;
}
.ec-input select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder, .ec-select 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 {
color: #999;
}
.ec-input select::-ms-expand, .ec-birth select::-ms-expand, .ec-select select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand {
border: 0;
background-color: transparent;
}
.ec-input select[disabled], .ec-birth select[disabled], .ec-select select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-input select[readonly], .ec-birth select[readonly], .ec-select select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-birth select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select {
background-color: rgb(238.425, 238.425, 238.425);
opacity: 1;
}
.ec-input select[disabled], .ec-birth select[disabled], .ec-select select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-birth select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select {
cursor: not-allowed;
}
@media only screen and (min-width: 1020px) {
.ec-input select, .ec-birth select, .ec-select select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select {
font-size: 14px;
}
}
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.428571429;
color: rgb(85.425, 85.425, 85.425);
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px;
}
.ec-input textarea:focus, .ec-birth textarea:focus, .ec-select textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
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-birth textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder {
color: #999;
opacity: 1;
}
.ec-input textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder, .ec-select 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 {
color: #999;
}
.ec-input textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder, .ec-select 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 {
color: #999;
}
.ec-input textarea::-ms-expand, .ec-birth textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand {
border: 0;
background-color: transparent;
}
.ec-input textarea[disabled], .ec-birth textarea[disabled], .ec-select textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-input textarea[readonly], .ec-birth textarea[readonly], .ec-select textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-birth textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea {
background-color: rgb(238.425, 238.425, 238.425);
opacity: 1;
}
.ec-input textarea[disabled], .ec-birth textarea[disabled], .ec-select textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-birth textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea {
cursor: not-allowed;
}
@media only screen and (min-width: 1020px) {
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
font-size: 14px;
}
}
.ec-input input:focus, .ec-birth input:focus, .ec-select input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-input textarea:focus, .ec-birth textarea:focus, .ec-select textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus {
box-shadow: none;
border-color: #3c8dbc;
}
.ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
height: 40px;
margin-bottom: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
margin-bottom: 16px;
}
}
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
height: auto;
min-height: 100px;
}
.ec-input p, .ec-birth p, .ec-select p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p {
line-height: 1.4;
}
.ec-input .ec-errorMessage, .ec-birth .ec-errorMessage, .ec-select .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #df744a;
}
.error.ec-input input, .error.ec-birth input, .error.ec-select input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-input select, .error.ec-birth select, .error.ec-select select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-input textarea, .error.ec-birth textarea, .error.ec-select textarea, .error.ec-halfInput textarea, .error.ec-numberInput textarea, .error.ec-zipInput textarea, .error.ec-telInput textarea {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0;
}
.ec-checkbox .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #df744a;
}
.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%;
}
@media only screen and (min-width: 1020px) {
.ec-halfInput input[type=text] {
margin-left: 15px;
width: 45%;
}
}
.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 !important;
}
.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: #525263;
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: #0092C4;
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;
}
/*
フォーム部品(その他)
フォーム部品でテキストの入力以外の動作要素を定義します。
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;
border-bottom: 1px dotted #ccc;
}
.ec-select {
margin-bottom: 16px;
}
.ec-select select {
display: inline-block;
width: auto;
max-width: 100%;
background-color: rgb(248, 248, 248);
-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;
}
@media only screen and (min-width: 1020px) {
.ec-select__delivery {
display: inline-block;
}
}
.ec-select__time {
display: block;
}
@media only screen and (min-width: 1020px) {
.ec-select__time {
display: inline-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: rgb(248, 248, 248);
-webkit-appearance: menulist;
-moz-appearance: menulist;
}
.ec-birth select:focus {
box-shadow: none;
}
@media only screen and (min-width: 1020px) {
.ec-birth select {
margin: 0 8px 10px;
}
}
.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: inherit;
}
/*
必須ラベル
必須文字を表示するラベル要素です。
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: 0.8em;
vertical-align: 2px;
color: #DE5D50;
font-size: 12px;
font-weight: normal;
}
@media only screen and (min-width: 1020px) {
.ec-required {
margin-left: 1em;
}
}
/*
アイコン
デフォルトテンプレートのアイコンは`.ec-icon`>`img`タグで使用することができます
sg-wrapper:
Markup:
include /assets/tmpl/elements/4.1.icon.pug
div(style="background-color: rgba(130,130,130,.15); padding: 20px;")
+icon-all
Styleguide 4.1
*/
.ec-icon img {
max-width: 80px;
max-height: 80px;
}
#svgicon {
display: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
グリッド
画面を12分割し、グリッドレイアウトに対応するためのスタイルです。
sg-wrapper:
Styleguide 5.1
*/
/*
2分割グリッド
画面 ２分割の グリッドです。
Bootstrap の col-sm-6 相当のグリッドを提供します。
Markup:
.ec-grid2
.ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell
.ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid2__cell
sg-wrapper:
Styleguide 5.1.1
*/
.ec-grid2 {
border-bottom: 1px solid #ddd;
display: block;
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-grid2 {
display: flex;
}
}
.ec-grid2 .ec-grid2__cell {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid2 .ec-grid2__cell {
flex-basis: 50%;
max-width: 50%;
}
}
.ec-grid2 .ec-grid2__cell2 {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid2 .ec-grid2__cell2 {
flex-basis: 100%;
max-width: 100%;
}
}
/*
3分割グリッド
画面 ３分割の グリッドです。
Markup:
.ec-grid3
.ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell
.ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell
.ec-grid3__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid3__cell
Styleguide 5.1.2
*/
.ec-grid3 {
display: block;
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-grid3 {
display: flex;
}
}
.ec-grid3 .ec-grid3__cell {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid3 .ec-grid3__cell {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
}
.ec-grid3 .ec-grid3__cell2 {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid3 .ec-grid3__cell2 {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
}
.ec-grid3 .ec-grid3__cell3 {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid3 .ec-grid3__cell3 {
flex-basis: 100%;
max-width: 100%;
}
}
/*
4分割グリッド
画面 ４分割の グリッドです。
Markup:
.ec-grid4
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid4__cell
Styleguide 5.1.3
*/
.ec-grid4 {
display: block;
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-grid4 {
display: flex;
}
}
.ec-grid4 .ec-grid4__cell {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid4 .ec-grid4__cell {
flex-basis: 25%;
max-width: 25%;
}
}
/*
6分割グリッド
2つにまとめた cell2 や 3つをまとめた cell3 タグも使用可能です。
Markup:
.ec-grid6
.ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
.ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
.ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
.ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
.ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
.ec-grid6__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell
.ec-grid6
.ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
.ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
.ec-grid6__cell2(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell2
.ec-grid6
.ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3
.ec-grid6__cell3(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") .ec-grid6__cell3
Styleguide 5.1.4
*/
.ec-grid6 {
display: block;
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-grid6 {
display: flex;
}
}
.ec-grid6 .ec-grid6__cell {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid6 .ec-grid6__cell {
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
}
.ec-grid6 .ec-grid6__cell2 {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid6 .ec-grid6__cell2 {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
}
.ec-grid6 .ec-grid6__cell3 {
position: relative;
min-height: 1px;
}
@media (min-width: 1020px) {
.ec-grid6 .ec-grid6__cell3 {
flex-basis: 50%;
max-width: 50%;
}
}
/*
中央寄せグリッド 10/12
左右にマージンを持つ、中央寄せグリッドを提供します。１２分の１０グリッドです
ex [ご利用規約ページ 本文](http://demo3.ec-cube.net/help/agreement)
Markup:
.ec-off1Grid
.ec-off1Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Styleguide 5.1.5
*/
.ec-off1Grid {
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-off1Grid {
display: block;
margin: 0;
}
}
@media only screen and (min-width: 1020px) and (min-width: 1020px) {
.ec-off1Grid {
display: flex;
}
}
.ec-off1Grid .ec-off1Grid__cell {
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-off1Grid .ec-off1Grid__cell {
position: relative;
min-height: 1px;
margin-left: 8.3333333333%;
}
}
@media only screen and (min-width: 1020px) and (min-width: 1020px) {
.ec-off1Grid .ec-off1Grid__cell {
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
}
/*
中央寄せグリッド 8/12
左右にマージンを持つ、中央寄せグリッドを提供します。１２分の８グリッドです
Markup:
.ec-off2Grid
.ec-off2Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Styleguide 5.1.6
*/
.ec-off2Grid {
display: block;
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-off2Grid {
display: flex;
}
}
.ec-off2Grid .ec-off2Grid__cell {
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-off2Grid .ec-off2Grid__cell {
position: relative;
min-height: 1px;
margin-left: 16.6666666667%;
}
}
@media only screen and (min-width: 1020px) and (min-width: 1020px) {
.ec-off2Grid .ec-off2Grid__cell {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
}
/*
中央寄せグリッド 6/12
左右にマージンを持つ、中央寄せグリッドを提供します。１２分の６グリッドです
Markup:
.ec-off3Grid
.ec-off3Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Styleguide 5.1.7
*/
.ec-off3Grid {
display: block;
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-off3Grid {
display: flex;
}
}
.ec-off3Grid .ec-off3Grid__cell {
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-off3Grid .ec-off3Grid__cell {
position: relative;
min-height: 1px;
margin-left: 25%;
}
}
@media only screen and (min-width: 1020px) and (min-width: 1020px) {
.ec-off3Grid .ec-off3Grid__cell {
flex-basis: 50%;
max-width: 50%;
}
}
/*
中央寄せグリッド 4/12
左右にマージンを持つ、中央寄せグリッドを提供します。１２分の４グリッドです
Markup:
.ec-off4Grid
.ec-off4Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Styleguide 5.1.8
*/
.ec-off4Grid {
display: block;
margin: 0;
}
@media only screen and (min-width: 1020px) {
.ec-off4Grid {
display: flex;
}
}
.ec-off4Grid .ec-off4Grid__cell {
margin: 0;
}
@media screen and (max-width: 1020px) {
.ec-off4Grid .ec-off4Grid__cell {
margin-bottom: 70px;
}
}
@media only screen and (min-width: 1020px) {
.ec-off4Grid .ec-off4Grid__cell {
position: relative;
min-height: 1px;
margin-left: 33.3333333333%;
}
}
@media only screen and (min-width: 1020px) and (min-width: 1020px) {
.ec-off4Grid .ec-off4Grid__cell {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
}
/*
グリッドオプション
グリッドのセルに対して「左寄せ」「中央寄せ」「右寄せ」のオプションを付与することができます。
sg-wrapper:
Styleguide 5.1.9
*/
/*
グリッドセルの左寄せ
.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。
Markup:
.ec-grid4.ec-grid--left
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
Styleguide 5.1.10
*/
.ec-grid--left {
justify-content: flex-start;
}
/*
グリッドセルの右寄せ
.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。
Markup:
.ec-grid4.ec-grid--right
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
Styleguide 5.1.11
*/
.ec-grid--right {
justify-content: flex-end;
}
/*
グリッドセルの中央寄せ
.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。
Markup:
.ec-grid4.ec-grid--center
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
.ec-grid4__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") ec-grid4__cell
Styleguide 5.1.12
*/
.ec-grid--center {
justify-content: center;
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
レイアウト
様々なレイアウトを変更する為のスタイル群です。
Styleguide 5.2
*/
/*
画像レイアウト
画像とテキストを水平に並べるレイアウトです。
画像は20%で表示されます。
ex [注文履歴 ログイン後→注文履歴ボタンを押下](http://demo3.ec-cube.net/mypage)
Markup:
.ec-imageGrid
.ec-imageGrid__img: img(src="http://demo3.ec-cube.net/upload/save_image/0701113537_559351f959620.jpeg")
.ec-imageGrid__content
p.ec-font-bold ホーローマグ
p ¥ 1,728 x 1
sg-wrapper:
Styleguide 5.2.1
*/
.ec-imageGrid {
display: table;
border-top: 1px dotted #ccc;
width: 100%;
}
.ec-imageGrid .ec-imageGrid__img {
display: table-cell;
padding: 10px;
width: 100px;
}
@media only screen and (min-width: 1020px) {
.ec-imageGrid .ec-imageGrid__img {
padding: 10px;
width: 130px;
}
}
.ec-imageGrid .ec-imageGrid__img img {
width: 100%;
border-radius: 10px;
}
.ec-imageGrid .ec-imageGrid__content {
vertical-align: middle;
display: table-cell;
}
.ec-imageGrid .ec-imageGrid__content span {
margin-left: 10px;
}
.ec-imageGrid .ec-imageGrid__content p {
margin-bottom: 0;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
ログイン
主にログインフォームのスタイルを表示します。
sg-wrapper:
Styleguide 6.1
*/
/*
ログインフォーム
ログインフォームを表示します。
ex [ログイン画面](http://demo3.ec-cube.net/mypage/login)
Markup:
include /assets/tmpl/elements/6.3.login.pug
+ec-login
Styleguide 6.1.1
*/
.ec-login {
margin: 0 0 20px;
padding: 30px 13% 20px;
height: auto;
background: #F3F4F4;
box-sizing: border-box;
}
@media only screen and (min-width: 1020px) {
.ec-login {
margin: 0 16px;
padding: 30px 13% 60px;
}
}
.ec-login .ec-login__icon {
text-align: center;
}
.ec-login .ec-icon {
margin-bottom: 10px;
}
.ec-login .ec-icon img {
width: 90px;
height: 90px;
display: inline-block;
}
.ec-login .ec-login__input {
margin-bottom: 40px;
}
.ec-login .ec-login__input .ec-checkbox span {
margin-left: 5px;
font-weight: normal;
}
.ec-login .ec-login__actions {
color: #fff;
}
.ec-login .ec-login__actions a {
color: inherit;
text-decoration: none;
}
.ec-login .ec-login__actions a:hover {
text-decoration: none;
}
.ec-login .ec-login__link {
margin-top: 5px;
margin-left: 0;
}
@media only screen and (min-width: 1020px) {
.ec-login .ec-login__link {
margin-left: 20px;
}
}
.ec-login .ec-errorMessage {
color: #df744a;
margin-bottom: 20px;
}
/*
ゲスト購入
ゲスト購入ボタンとそのフォームを表示します。
ex [ゲスト購入画面](http://demo3.ec-cube.net/shopping/login)
Markup:
include /assets/tmpl/elements/6.3.login.pug
+ec-guest
hoge
Styleguide 6.1.2
*/
.ec-guest {
display: table;
margin: 0;
padding: 13%;
height: auto;
box-sizing: border-box;
background: #F3F4F4;
}
@media only screen and (min-width: 1020px) {
.ec-guest {
height: 100%;
margin: 0 16px;
}
}
.ec-guest .ec-guest__inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.ec-guest .ec-guest__inner p {
margin-bottom: 16px;
}
.ec-guest .ec-guest__actions {
display: block;
vertical-align: middle;
text-align: center;
color: #fff;
}
.ec-guest .ec-guest__actions a {
color: inherit;
text-decoration: none;
}
.ec-guest .ec-guest__actions a:hover {
text-decoration: none;
}
.ec-guest .ec-guest__icon {
font-size: 70px;
text-align: center;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
商品掲載
トップページに商品掲載するスタイルガイド群です。
sg-wrapper:
Styleguide 7.1
*/
/*
商品アイテム（商品紹介B）
３項目横並びの商品アイテムを表示します。
必要に応じて商品詳細や、キャッチコピーなどを添えることが出来ます。
ex [トップページ 商品紹介部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayB
Styleguide 7.1.1
*/
.ec-displayB {
margin-bottom: 24px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
@media only screen and (min-width: 1020px) {
.ec-displayB {
flex-direction: row;
}
}
.ec-displayB .ec-displayB__cell {
width: 100%;
margin-bottom: 16px;
}
.ec-displayB .ec-displayB__cell a {
color: inherit;
text-decoration: none;
}
.ec-displayB .ec-displayB__cell a:hover {
text-decoration: none;
}
@media only screen and (min-width: 1020px) {
.ec-displayB .ec-displayB__cell {
width: 31.4466%;
margin-bottom: 0;
}
}
.ec-displayB .ec-displayB__cell:hover {
text-decoration: none;
}
.ec-displayB .ec-displayB__cell:hover img {
opacity: 0.8;
}
.ec-displayB .ec-displayB__cell:hover a {
text-decoration: none;
}
.ec-displayB .ec-displayB__img {
margin-bottom: 15px;
}
.ec-displayB .ec-displayB__catch {
margin-bottom: 15px;
text-decoration: none;
font-weight: bold;
color: #9a947e;
}
.ec-displayB .ec-displayB__comment {
margin-bottom: 14px;
text-decoration: none;
color: #525263;
font-size: 14px;
}
.ec-displayB .ec-displayB__link {
text-decoration: none;
font-weight: bold;
color: #9a947e;
}
/*
商品アイテム（商品紹介C）
４項目横並びの商品アイテムを表示します。
ex [トップページ 商品紹介部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayC
p hoge
Styleguide 7.1.2
*/
.ec-displayC {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 24px;
}
.ec-displayC .ec-displayC__cell {
width: 47%;
}
.ec-displayC .ec-displayC__cell a {
color: inherit;
text-decoration: none;
}
.ec-displayC .ec-displayC__cell a:hover {
text-decoration: none;
}
@media only screen and (min-width: 1020px) {
.ec-displayC .ec-displayC__cell {
width: 22.8775%;
}
}
.ec-displayC .ec-displayC__cell:hover a {
text-decoration: none;
}
.ec-displayC .ec-displayC__cell:hover img {
opacity: 0.8;
}
.ec-displayC .ec-displayC__img {
display: block;
width: 100%;
margin-bottom: 15px;
}
.ec-displayC .ec-displayC__catch {
display: block;
width: 100%;
font-weight: bold;
color: #9a947e;
}
.ec-displayC .ec-displayC__title {
display: block;
width: 100%;
color: #525263;
}
.ec-displayC .ec-displayC__price {
display: block;
width: 100%;
font-weight: bold;
color: #525263;
}
.ec-displayC .ec-displayC__price--sp {
display: block;
width: 100%;
font-weight: bold;
color: #DE5D50;
}
/*
商品アイテム（商品紹介D）
６項目横並びの商品アイテムを表示します。
ex [トップページ 商品紹介部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/7.1.itembanner.pug
+ec-displayD
Styleguide 7.1.3
*/
.ec-displayD {
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
}
@media only screen and (min-width: 1020px) {
.ec-displayD {
box-sizing: border-box;
flex-wrap: nowrap;
}
}
.ec-displayD .ec-displayD__cell {
width: 30%;
margin-bottom: 8px;
}
.ec-displayD .ec-displayD__cell a {
color: inherit;
text-decoration: none;
}
.ec-displayD .ec-displayD__cell a:hover {
text-decoration: none;
}
@media only screen and (min-width: 1020px) {
.ec-displayD .ec-displayD__cell {
width: 14.3083%;
margin-bottom: 16px;
}
}
.ec-displayD .ec-displayD__cell:hover {
text-decoration: none;
}
.ec-displayD .ec-displayD__cell:hover img {
opacity: 0.8;
}
.ec-displayD .ec-displayD__img {
display: block;
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;
}
/*
検索・一覧表示
検索欄や、一覧表示に使用するスタイル群です。
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 {
display: flex;
margin: 0;
padding: 0.7em 0;
}
.ec-topicpath, .ec-topicpath li {
list-style: none;
}
.ec-topicpath .ec-topicpath__item, .ec-topicpath .ec-topicpath__item--active {
color: #333;
font-size: 1.2rem;
}
@media only screen and (min-width: 1020px) {
.ec-topicpath .ec-topicpath__item, .ec-topicpath .ec-topicpath__item--active {
font-size: 1.6rem;
}
}
.ec-topicpath .ec-topicpath__item a:hover, .ec-topicpath .ec-topicpath__item--active a:hover {
color: inherit;
}
.ec-topicpath .ec-topicpath__item--active {
font-weight: bold;
}
.ec-topicpath .ec-topicpath__divider {
padding: 0 20px;
line-height: 1.2;
}
/*
ページャ
検索結果で表示される商品一覧のスタイルです。
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;
}
@media only screen and (min-width: 1020px) {
.ec-pager .ec-pager__item a, .ec-pager .ec-pager__item--active a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-pager .ec-pager__item a:hover, .ec-pager .ec-pager__item--active a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-pager .ec-pager__item a:hover, .ec-pager .ec-pager__item--active a:hover {
color: inherit;
}
.ec-pager .ec-pager__item--active a {
background: url(../img/common/bg_gray.png);
border-radius: 50%;
}
/**
メディアクエリ
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;
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
カート
ショッピングカートに関するスタイルです。
sg-wrapper:
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 !important;
padding: 8px 0 16px;
display: table;
table-layout: fixed;
width: 100%;
max-width: 600px;
list-style: none;
}
@media only screen and (min-width: 1020px) {
.ec-progress {
margin-bottom: 30px;
padding: 0;
}
}
.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: #525263;
width: 100%;
height: 0.25em;
top: 1.25em;
left: 50%;
margin-left: 1.5em\9 ;
z-index: -1;
}
@media screen and (max-width: 1019px) {
.ec-progress .ec-progress__item:after {
top: 13px;
}
}
.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: #525263;
color: #fff;
top: 0;
left: 18px;
display: inline-block;
text-align: center;
vertical-align: middle;
border-radius: 50%;
}
@media only screen and (min-width: 1020px) {
.ec-progress .ec-progress__number {
line-height: 42px;
width: 42px;
height: 42px;
font-size: 20px;
}
}
.ec-progress .ec-progress__label {
font-size: 12px;
margin: 0 2px 0 2px;
}
.ec-progress .is-complete .ec-progress__number {
background: #5CB1B1;
}
.ec-progress .is-complete .ec-progress__label {
color: #5CB1B1;
}
/*
カートナビゲーション
カートナビゲーションを表示します。 カートに追加された商品の個数も表示します。
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-cartNaviWrap {
position: absolute;
right: 60px;
top: 18px;
}
@media only screen and (min-width: 1020px) {
.ec-cartNaviWrap {
position: relative;
right: 0;
top: 0;
}
}
.ec-cartNavi {
display: flex;
width: auto;
height: 32px;
color: black;
cursor: pointer;
white-space: nowrap;
background: transparent;
}
@media only screen and (min-width: 1020px) {
.ec-cartNavi {
height: 22px;
}
}
.ec-cartNavi .ec-cartNavi__label {
display: none;
}
.ec-cartNavi .ec-cartNavi__icon {
display: inline-block;
opacity: 1;
visibility: visible;
animation: fadeIn 200ms linear 0s;
display: flex;
font-size: 0;
width: 50px;
height: 44px;
position: relative;
}
@media only screen and (min-width: 1020px) {
.ec-cartNavi .ec-cartNavi__icon {
width: auto;
height: 22px;
}
}
.ec-cartNavi .ec-cartNavi__icon svg {
font-size: 30px;
fill: #fff;
width: 1em;
height: 1em;
margin-top: 2px;
}
@media only screen and (min-width: 1020px) {
.ec-cartNavi .ec-cartNavi__icon svg {
font-size: 22px;
}
}
.ec-cartNavi .ec-cartNavi__icon::before {
content: "";
}
.ec-cartNavi .ec-cartNavi__badge {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-sizing: border-box;
width: 17px;
height: 17px;
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: 0.7;
color: #626265;
white-space: nowrap;
background-color: #fff;
margin-left: 3px;
}
@media only screen and (min-width: 1020px) {
.ec-cartNavi .ec-cartNavi__badge {
font-size: 1.2rem;
min-width: 17px;
}
}
.ec-cartNavi .ec-cartNavi__price {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-cartNavi .ec-cartNavi__price {
display: inline-block;
font-size: 14px;
font-weight: normal;
vertical-align: middle;
}
}
.ec-cartNavi {
position: relative;
}
.ec-cartNavi .ec-cartNavi__icon.fa-shopping-cart {
opacity: 1;
transition: ease 0.3s opacity;
}
.ec-cartNavi .ec-cartNavi__icon.fa-shopping-cartClose {
position: absolute;
left: 0;
opacity: 0;
transition: ease 0.3s opacity;
}
.ec-cartNavi .ec-cartNavi__icon.fa-shopping-cartClose svg {
margin: 0 auto;
}
.ec-cartNavi.is-active .ec-cartNavi__icon.fa-shopping-cart {
opacity: 0;
}
.ec-cartNavi.is-active .ec-cartNavi__icon.fa-shopping-cartClose {
opacity: 1;
}
/*
カートナビゲーションのポップアップ(商品詳細)
カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。
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: calc(99vw - 20px);
max-height: calc(100vh - 100px);
text-align: center;
background: url(../img/common/bg_image_01.png);
box-sizing: border-box;
padding: 16px;
z-index: 20;
position: absolute;
right: -55px;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.ec-cartNaviIsset::-webkit-scrollbar {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-cartNaviIsset {
background: #f8f8f8;
margin-top: 10px;
min-width: 350px;
max-width: 350px;
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: 32%;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage img {
width: 100%;
border-radius: 10px;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
float: right;
width: 68%;
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__action .ec-cartNavi--cancel {
border-color: #df744a;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
margin-bottom: 8px;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
font-weight: bold;
color: #df744a;
font-size: 2.4rem;
}
.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: calc(99vw - 20px);
text-align: center;
background: url(../img/common/bg_image_01.png);
box-sizing: border-box;
padding: 16px;
z-index: 3;
position: absolute;
right: -55px;
}
@media only screen and (min-width: 1020px) {
.ec-cartNaviNull {
margin-top: 10px;
min-width: 350px;
max-width: 350px;
right: 0;
}
}
.ec-cartNaviNull .ec-cartNaviNull__message {
border: 1px solid #D9D9D9;
padding: 16px 0;
font-size: 1rem;
font-weight: bold;
color: #fff;
background-color: #df744a;
}
.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: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
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: #df744a;
}
.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: #df744a;
}
.ec-totalBox .ec-totalBox__price {
margin-left: 16px;
font-size: 16px;
font-weight: bold;
}
@media only screen and (min-width: 1020px) {
.ec-totalBox .ec-totalBox__price {
font-size: 24px;
}
}
.ec-totalBox .ec-totalBox__taxLabel {
margin-left: 8px;
font-size: 12px;
}
@media only screen and (min-width: 1020px) {
.ec-totalBox .ec-totalBox__taxLabel {
font-size: 14px;
}
}
.ec-totalBox .ec-totalBox__taxRate {
display: -ms-flexbox;
display: flex;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-bottom: 8px;
font-size: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-totalBox .ec-totalBox__taxRate {
font-size: 12px;
}
}
.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;
}
@media only screen and (min-width: 1020px) {
.ec-news {
margin-right: 3%;
}
}
@media only screen and (min-width: 1020px) {
.ec-news {
margin-bottom: 32px;
}
}
.ec-news .ec-news__title {
font-weight: bold;
padding: 8px;
font-size: 16px;
text-align: center;
}
@media only screen and (min-width: 1020px) {
.ec-news .ec-news__title {
padding: 16px;
text-align: left;
font-size: 24px;
}
}
.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 0.2s ease-out;
}
.ec-newsline.is_active .ec-newsline__description {
height: auto;
transition: all 0.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: #D0D0D0;
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;
}
@media only screen and (min-width: 1020px) {
.ec-navlistRole .ec-navlistRole__navlist {
flex-wrap: nowrap;
}
}
.ec-navlistRole .ec-navlistRole__item {
display: flex;
width: 50%;
border-color: #D0D0D0;
border-style: solid;
border-width: 0 1px 1px 0;
text-align: center;
font-weight: bold;
}
.ec-navlistRole .ec-navlistRole__item:hover {
background: #f5f7f8;
}
.ec-navlistRole .ec-navlistRole__item a {
margin: auto;
padding: 16px 10px;
width: 100%;
display: inline-block;
}
.ec-navlistRole .active a {
color: #DE5D50;
}
/*
マイページ（お気に入り機能無効）
マイページで表示するメニューリストです。
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;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
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 !important;
}
.ec-welcomeMsg ul, .ec-welcomeMsg ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-welcomeMsg dl, .ec-welcomeMsg dt, .ec-welcomeMsg dd, .ec-welcomeMsg li {
margin: 0;
padding: 0;
}
.ec-welcomeMsg img {
max-width: 100%;
}
.ec-welcomeMsg html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-welcomeMsg *,
.ec-welcomeMsg *::before,
.ec-welcomeMsg *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-welcomeMsg img {
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-welcomeMsg {
padding-left: 26px;
padding-right: 26px;
}
}
/*
お気に入り一覧
お気に入り一覧で表示するアイテムの表示コンポーネントです。
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 {
margin-bottom: 10px;
text-align: center;
}
.ec-favoriteRole .ec-favoriteRole__item img {
width: auto;
max-height: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-favoriteRole .ec-favoriteRole__item {
width: 25%;
}
}
.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;
}
@media screen and (max-width: 767px) {
#page_mypage_history .ec-backButton {
margin-bottom: 40px;
}
}
/**
メディアクエリ
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
*/
/*
マイページセクション
マイページ専用のコンテナブロックです。
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;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
width: auto;
margin: 0 -30px;
}
.ec-mypageRole:after {
content: " ";
display: table;
}
.ec-mypageRole:after {
clear: both;
}
.ec-mypageRole textarea { /* for chrome fontsize bug */
font-family: sans-serif !important;
}
.ec-mypageRole ul, .ec-mypageRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-mypageRole dl, .ec-mypageRole dt, .ec-mypageRole dd, .ec-mypageRole li {
margin: 0;
padding: 0;
}
.ec-mypageRole img {
max-width: 100%;
}
.ec-mypageRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-mypageRole *,
.ec-mypageRole *::before,
.ec-mypageRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-mypageRole img {
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-mypageRole {
padding-left: 26px;
padding-right: 26px;
}
}
@media only screen and (min-width: 1020px) {
.ec-mypageRole {
width: 100%;
margin: 0 auto;
}
}
@media only screen and (min-width: 1020px) {
.ec-mypageRole .ec-pageHeader h1 {
margin: 10px 0 48px;
padding: 8px 0 18px;
}
}
/**
メディアクエリ
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;
}
.content-title {
font-family: "Bona Nova", serif;
font-size: 34px;
font-weight: normal;
letter-spacing: 0.1em;
color: #626265;
}
.ec-layoutRole__left .ec-pickupRole__title {
text-align: left !important;
}
.ec-layoutRole__left .content-title {
font-size: 20px;
font-weight: normal;
letter-spacing: 0.1em;
}
.ec-layoutRole {
width: 100%;
transition: transform 0.3s;
background: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ec-layoutRole .ec-layoutRole__header {
position: relative;
z-index: 100;
width: 100%;
}
body.front_page .ec-layoutRole .ec-layoutRole__header {
position: absolute;
}
.ec-layoutRole .ec-layoutRole__contents {
flex-grow: 1;
margin-right: auto;
margin-left: auto;
width: 100%;
display: flex;
flex-wrap: nowrap;
}
body:not(.front_page) .ec-layoutRole .ec-layoutRole__contents {
padding: 0 8px;
}
@media only screen and (min-width: 1020px) {
body:not(.front_page) .ec-layoutRole .ec-layoutRole__contents {
padding: 140px 6px 50px;
min-height: 100%;
}
}
.ec-layoutRole .ec-layoutRole__main, .ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 90%;
margin: 0 auto 0px;
}
body.front_page .ec-layoutRole .ec-layoutRole__main, body.front_page .ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 70%;
margin: 0 auto 70px 0;
}
}
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
display: block;
width: 22%;
}
}
.ec-headerRole {
padding: 0 2%;
margin: 0 0 20px 0;
position: relative;
}
@media only screen and (min-width: 1020px) {
.ec-headerRole {
margin: 0 auto;
padding: 0;
width: 1020px;
}
}
.ec-headerRole .ec-headerRole__title {
padding: 2%;
}
@media only screen and (min-width: 1020px) {
.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;
}
@media only screen and (min-width: 1020px) {
.ec-headerRole .ec-headerRole__navSP {
display: none;
}
}
.ec-headerRole.nav_02 {
background: rgba(149, 184, 176, 0.85);
}
@media only screen and (min-width: 1020px) {
.ec-headerRole.nav_02 {
position: fixed;
display: flex;
justify-content: space-between;
top: 0px;
left: 0px;
width: 100%;
min-width: 1020px;
padding: 0 calc((100% - 1020px) / 2);
}
.ec-headerRole.nav_02:not(.anime_off) {
transition: background 2s;
}
.ec-headerRole.nav_02 .ec-headerRole__title {
width: 25%;
}
.ec-headerRole.nav_02 .ec-headerRole__title .ec-headerTitle {
margin: 0;
}
.ec-headerRole.nav_02 .ec-headerRole__navigation {
width: 72%;
padding: 50px 0 0 0;
}
}
.ec-headerTitle {
margin-bottom: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-headerTitle {
width: 100%;
text-align: center;
}
}
.ec-headerTitle .ec-headerTitle__subtitle {
margin: 0;
padding: 2px 0 0 0;
color: white;
font-size: 1.2rem;
text-align: left;
}
@media only screen and (min-width: 1020px) {
.ec-headerTitle .ec-headerTitle__subtitle {
padding: 0;
vertical-align: middle;
margin: 0 0 8px 0;
}
}
.ec-headerTitle .ec-headerTitle__title {
font-size: 2rem;
margin: 0;
width: 50%;
padding-top: 3px;
}
@media only screen and (min-width: 1020px) {
.ec-headerTitle .ec-headerTitle__title {
padding: 0;
width: 100%;
}
}
.ec-headerTitle .ec-headerTitle__title a {
width: 100%;
}
.ec-headerTitle .ec-headerTitle__title a img {
width: 100%;
}
.nav_02 .ec-headerTitle .ec-headerTitle__subtitle {
text-align: left !important;
}
.nav_02 .ec-headerTitle .ec-headerTitle__title a img {
width: 100% !important;
}
.ec-headerNavigation {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-headerNavigation {
display: flex;
width: 100%;
justify-content: space-between;
list-style: none;
text-align: center;
}
}
.ec-headerNavigation li {
flex-basis: 20%;
border-left: dotted 1px #fff;
}
.ec-headerNavigation li:last-child {
border-right: dotted 1px #fff;
}
@media only screen and (min-width: 1020px) {
.ec-headerNavigation li:last-child {
border-right: none;
}
}
.ec-headerNavigation li a {
display: block;
color: white !important;
}
@media only screen and (min-width: 1020px) {
.ec-headerNavigation li a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-headerNavigation li a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-headerNaviRole {
position: absolute;
z-index: 100;
right: 1%;
top: 3px;
display: block;
}
.ec-headerNaviRole .fa-bars {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
@media only screen and (min-width: 1020px) {
.ec-headerNaviRole {
position: fixed;
width: 350px;
padding: 5px 0 0 0;
}
.ec-headerNaviRole.nav_02 {
display: flex;
width: 500px;
}
}
.ec-headerNaviRole .ec-headerNaviRole__left {
display: block;
}
@media only screen and (min-width: 1020px) {
.ec-headerNaviRole .ec-headerNaviRole__left {
width: 100%;
}
}
.ec-headerNaviRole .ec-headerNaviRole__search {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-headerNaviRole .ec-headerNaviRole__search {
display: block;
}
.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: block;
}
@media only screen and (min-width: 1020px) {
.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-headerNaviRole .ec-headerNaviRole__right {
width: 70%;
display: flex;
margin-left: auto;
padding-top: 6px;
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;
}
@media only screen and (min-width: 1020px) and (min-width: 1020px) {
.ec-headerNaviRole .ec-headerRole__cart {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-headerNaviRole .ec-headerRole__cart:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-headerNaviRole.nav_02 .ec-headerNaviRole__left {
width: 70%;
}
.ec-headerNaviRole.nav_02 .ec-headerNaviRole__right {
width: 30%;
padding: 0;
}
.ec-headerNavSP {
display: block;
cursor: pointer;
width: 40px;
height: 40px;
font-size: 18px;
text-align: center;
color: black;
background: transparent;
position: absolute;
top: 18px;
right: 10px;
z-index: 1000;
}
@media only screen and (min-width: 1020px) {
.ec-headerNavSP {
display: none;
}
}
.ec-headerNavSP .fas {
background: white;
height: 2px;
width: 35px;
position: relative;
transition: background 0.3s 0.3s;
}
.ec-headerNavSP .fas::before, .ec-headerNavSP .fas::after {
content: "";
display: block;
background: white;
height: 2px;
width: 100%;
position: absolute;
transition: transform 0.3s 0.3s;
transform-origin: 10% center;
}
.ec-headerNavSP .fas::before {
top: -10px;
}
.ec-headerNavSP .fas::after {
top: 10px;
}
.ec-headerNavSP.is_active .fas {
background: transparent;
}
.ec-headerNavSP.is_active .fas::before {
transform: rotateZ(45deg);
}
.ec-headerNavSP.is_active .fas::after {
transform: rotateZ(-45deg);
}
.ec-headerNavSP.is-active {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-headerSearch .ec-headerSearch__category {
float: left;
width: 50%;
height: 25px;
border: 1px solid #fff;
box-shadow: none;
box-sizing: border-box;
background: rgba(255, 255, 255, 0);
border-radius: 5px;
padding: 0;
color: #fff;
}
}
.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%;
height: 100%;
cursor: pointer;
padding: 0px 6px 1px;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
appearance: none;
color: #fff;
font-size: 1.3rem;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select option {
color: #000;
padding: 0;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
display: none;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
position: relative;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
position: absolute;
top: 50%;
right: 0.4em;
transform: translateY(-50%);
width: 0;
height: 0;
padding: 0;
content: "";
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #fff;
pointer-events: none;
}
@media only screen and (min-width: 1020px) {
.ec-headerSearch .ec-headerSearch__keyword {
float: right;
width: 47%;
height: 25px;
position: relative;
color: #fff;
box-shadow: none;
box-sizing: border-box;
border: 1px solid #fff;
background: rgba(255, 255, 255, 0);
border-radius: 5px;
padding: 0 1%;
}
}
.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
color: #fff;
width: 100%;
height: 20px;
font-size: 16rem;
border: 0 none;
padding: 0.5em 0;
box-shadow: none;
background: none;
box-sizing: border-box;
margin-bottom: 0;
}
@media only screen and (min-width: 1020px) {
.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
font-size: 12px;
}
}
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
width: 25px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.ec-headerSearch .ec-headerSearch__keyword .ec-icon svg {
width: 1em;
height: 1em;
fill: #fff;
font-size: 1.5rem;
}
.ec-headerSearch .ec-headerSearch__keywordBtn {
border: 0;
background: none;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: block;
white-space: nowrap;
z-index: 1;
padding: 0;
}
.ec-headerNav {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-headerNav {
display: flex;
}
}
.ec-headerNav .ec-headerNav__item {
margin-left: 0;
margin-right: 13px;
display: inline-block;
font-size: 28px;
width: 20px;
}
@media only screen and (min-width: 1020px) {
.ec-headerNav .ec-headerNav__item {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-headerNav .ec-headerNav__item:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-headerNav .ec-headerNav__itemIcon {
display: inline-block;
font-size: 2rem;
color: black;
width: 1em;
height: 1em;
fill: #fff;
}
@media only screen and (min-width: 1020px) {
.ec-headerNav .ec-headerNav__itemIcon {
margin-right: 0;
font-size: 20px;
}
}
.ec-headerNav .ec-headerNav__itemLink {
display: none;
}
/**
* 下層ページ: 左サイドカテゴリメニュー
*/
.ec-categoryNaviRole {
padding: 4% 18.6%;
}
.ec-categoryNaviRole .ec-categoryNaviRole__header {
background: url(../img/common/tit_line_01.png) repeat-x bottom;
margin: 0 0 27px 0;
padding: 0 0 10px 0;
text-align: left;
font-size: 1.6rem;
font-weight: 700;
}
.ec-categoryNaviRole p {
margin-top: 0;
margin-bottom: 0;
}
.ec-categoryNaviRole .ec-itemNav__nav ul,
.ec-categoryNaviRole .ec-itemNav__nav li {
list-style: none;
}
.ec-categoryNaviRole .ec-itemNav__nav a {
height: 50px;
line-height: 50px;
display: block;
padding: 0 10px;
color: #525263;
font-size: 1.6rem;
font-weight: bold;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
text-decoration: none;
border-bottom: 1px solid #eee;
}
@media only screen and (min-width: 1020px) {
.ec-categoryNaviRole .ec-itemNav__nav a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-categoryNaviRole .ec-itemNav__nav a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-categoryNaviRole .ec-itemNav__nav li ul li a {
padding-left: 12%;
}
.ec-categoryNaviRole .ec-itemNav__nav li ul li a:before {
position: absolute;
left: 9%;
top: 41%;
content: " ";
display: inline-block;
width: 4px;
height: 8px;
background: url(../img/common/arrow_07.png) no-repeat center left;
background-size: contain;
}
/*
ヘッダー：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: url(../img/common/bg_image_01.png);
width: 82vw;
height: 100vh;
transform: translateX(100vw);
position: fixed;
top: 0;
left: 0;
z-index: 1;
transition: z-index 0ms 1ms;
border-left: 1px solid #e0e0e0;
}
@media only screen and (min-width: 768px) {
.ec-drawerRole {
width: 40vw;
}
}
@media only screen and (min-width: 1020px) {
.ec-drawerRole {
display: none;
}
}
.ec-drawerRole .ec-headerSearch {
padding: 10px 3% 15px;
background: transparent;
}
.ec-drawerRole .ec-headerSearch select {
width: 100% !important;
}
.ec-drawerRole .ec-headerSearch .ec-headerSearch__category,
.ec-drawerRole .ec-headerSearch .ec-headerSearch__keyword {
overflow: hidden;
font-size: 1.6rem;
margin-bottom: 10px;
border-radius: 5px;
position: relative;
}
.ec-drawerRole .ec-headerSearch .ec-headerSearch__category select,
.ec-drawerRole .ec-headerSearch .ec-headerSearch__category input,
.ec-drawerRole .ec-headerSearch .ec-headerSearch__keyword select,
.ec-drawerRole .ec-headerSearch .ec-headerSearch__keyword input {
padding: 0.5em 1em;
height: 50px;
background: white;
color: inherit;
font-size: inherit;
}
.ec-drawerRole .ec-headerSearch .ec-headerSearch__category .ec-icon,
.ec-drawerRole .ec-headerSearch .ec-headerSearch__keyword .ec-icon {
margin-right: 8px;
}
.ec-drawerRole .ec-headerSearch .ec-headerSearch__category .ec-icon svg,
.ec-drawerRole .ec-headerSearch .ec-headerSearch__keyword .ec-icon svg {
font-size: 2rem;
fill: #636378;
right: 22px;
}
.ec-drawerRole .ec-headerSearchArea {
padding: 20px 10px;
width: 100%;
background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
display: flex;
align-items: center;
border-bottom: 1px dotted #e0e0e0;
padding: 10px 20px;
font-size: 1.6rem;
font-weight: 700;
color: #525263;
background: url(../img/common/arrow_04.png) 95% center no-repeat #fff;
background-size: 10px;
}
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading.active {
background: url(../img/common/arrow_03.png) 95% center no-repeat #fff;
background-size: 10px;
}
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading p {
margin: 0;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itenNav__nav {
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a, .ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
display: block;
border-bottom: 1px solid #eee;
color: #525263;
height: 50px;
line-height: 50px;
font-weight: 600;
background: white;
padding: 0 0 0 20px;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a:hover {
background: white !important;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul {
display: block;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
padding-left: 12%;
position: relative;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a::before {
position: absolute;
left: 9%;
top: 41%;
content: " ";
display: inline-block;
width: 4px;
height: 8px;
background: url(../img/common/arrow_07.png) no-repeat center left;
background-size: contain;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemPageLinkNav li {
padding: 0 2%;
border-bottom: 1px solid #e0e0e0;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemPageLinkNav li a {
display: block;
padding: 10px 20px;
font-weight: bold;
color: #242121;
}
.ec-drawerRole .ec-headerLinkArea {
background: transparent;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
border-top: 1px solid #d8d7d3;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
display: flex;
align-items: center;
padding: 0 10px;
font-size: 1.5rem;
line-height: 50px;
white-space: nowrap;
color: #161616;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item:not(:last-child) {
border-bottom: 1px solid #d8d7d3;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
margin: auto 10px;
font-size: 17px;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon svg {
fill: #626265;
font-size: 2rem;
width: auto;
height: 1em;
}
.ec-drawerRoleClose {
cursor: pointer;
display: none;
}
.ec-drawerRole.is_active {
display: block;
transform: translateX(100vw) translateX(-100%);
transition: all 0.3s;
z-index: 100000;
}
@media only screen and (min-width: 1020px) {
.ec-drawerRole.is_active {
display: none;
}
}
.ec-layoutRole {
transition: transform 0.3s;
}
@media only screen and (max-width: 1019px) {
.ec-layoutRole.is_active {
transform: translateX(-40vw);
}
}
@media only screen and (max-width: 767px) {
.ec-layoutRole.is_active {
transform: translateX(-82vw);
}
}
.ec-overlayRole {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
opacity: 0;
background: transparent;
transform: translateX(0);
transition: all 0.3s;
visibility: hidden;
}
@media only screen and (min-width: 1020px) {
.ec-overlayRole {
display: none;
}
}
.have_curtain .ec-overlayRole {
display: block;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
visibility: hidden;
}
@media only screen and (min-width: 1020px) {
.have_curtain .ec-overlayRole {
display: none;
}
}
/*
ヘッダー：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;
}
.ec-maintenanceAlert {
background: steelblue;
height: 5rem;
position: fixed;
top: 0;
width: 100%;
color: white;
z-index: 9999;
display: flex;
font-weight: bold;
}
.ec-maintenanceAlert > * {
margin: auto;
}
.ec-maintenanceAlert .ec-maintenanceAlert__icon {
display: inline-block;
margin-right: 1rem;
width: 20px;
height: 20px;
color: #fff;
fill: #fff;
vertical-align: top;
}
.ec-maintenanceAlert + * {
margin-top: 5rem;
}
@media only screen and (min-width: 1020px) {
#page_homepage .ec-headerTitle .ec-headerTitle__subtitle {
text-align: center;
}
}
#page_homepage .ec-headerTitle .ec-headerTitle__title a img {
width: auto;
}
.ec-debugModeAlert > div {
text-align: center;
}
.ec-debugModeAlert__icon {
text-align: center;
}
.ec-debugModeAlert__icon img {
height: 30px;
}
/**
メディアクエリ
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 {
position: relative;
font-size: 1.3rem;
background: rgba(149, 184, 176, 0.85);
}
@media only screen and (min-width: 1020px) {
.ec-footerRole {
margin: 0;
padding: 30px 0 0 0;
}
}
@media only screen and (min-width: 1020px) {
.ec-footerRole a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-footerRole a:hover {
transform: translateY(-5px);
color: inherit;
}
}
@media only screen and (min-width: 1020px) {
.ec-footerRole .ec-footerRole__inner {
width: 1020px;
margin: 0 auto;
}
}
/*
フッターナビ
フッタープロジェクトで使用するナビゲーション用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerNav
sg-wrapper:
Styleguide 11.3.1
*/
.ec-footerNaviRole {
display: flex;
justify-content: center;
padding-bottom: 23px;
}
@media only screen and (min-width: 1020px) {
.ec-footerNaviRole {
justify-content: space-between;
border-bottom: 1px solid white;
}
}
.ec-footerNaviRole .ec-footerNaviRole__left {
display: none;
flex: 1 0 auto;
}
@media only screen and (min-width: 1020px) {
.ec-footerNaviRole .ec-footerNaviRole__left {
display: flex;
align-items: center;
list-style: none;
margin: 0;
}
}
.ec-footerNaviRole .ec-footerNaviRole__left .ec-footerNavi__link {
color: white;
}
.ec-footerNaviRole .ec-footerNaviRole__left .ec-footerNavi__link:not(:first-child) {
border-left: 1px solid white;
}
.ec-footerNaviRole .ec-footerNaviRole__left .ec-footerNavi__link a {
display: block;
padding: 0 10px;
color: inherit;
}
.ec-footerNaviRole .ec-footerNaviRole__right {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
width: 50%;
}
@media only screen and (min-width: 1020px) {
.ec-footerNaviRole .ec-footerNaviRole__right {
width: 140px;
}
}
.ec-footerNaviRole .ec-footerNaviRole__right .ec-footerNavi__link {
max-width: 33.3%;
}
@media only screen and (min-width: 1020px) {
.ec-footerNaviRole .ec-footerNaviRole__right .ec-footerNavi__link {
margin-left: 10%;
}
}
.ec-footerNaviRole .ec-footerNaviRole__right .ec-footerNavi__link a {
display: block;
width: 100%;
text-align: center;
}
.ec-footerNaviRole .ec-footerNaviRole__right .ec-footerNavi__link a img {
height: 43px;
width: auto;
}
@media only screen and (min-width: 1020px) {
.ec-footerNaviRole .ec-footerNaviRole__right .ec-footerNavi__link a img {
width: 100%;
height: 28px;
}
}
/*
フッタータイトル
フッタープロジェクトで使用するタイトル用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerTitle
sg-wrapper:
Styleguide 11.3.2
*/
.ec-footerTitle {
padding: 40px 0;
display: flex;
justify-content: center;
}
@media only screen and (min-width: 1020px) {
.ec-footerTitle {
justify-content: flex-start;
margin: 0;
padding: 0 0 20px 0;
}
}
.ec-footerTitle .ec-footerTitle__logo a {
display: block;
}
.ec-footerCopyright {
text-align: center;
color: white;
padding: 16px 0;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/* Icons */
@font-face {
font-family: "slick";
font-weight: normal;
font-style: normal;
src: url("../font/slick.eot");
src: url("../font/slick.eot?#iefix") format("embedded-opentype"), url("../font/slick.woff") format("woff"), url("../font/slick.ttf") format("truetype"), url("../font/slick.svg#slick") format("svg");
}
.ec-newArrival__list,
.main_visual,
.ec-productRole .ec-productRole__slider .item_visual,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
/* Arrows */
/* Dots */
}
.ec-newArrival__list .slick-track,
.main_visual .slick-track,
.ec-productRole .ec-productRole__slider .item_visual .slick-track,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-track,
.ec-newArrival__list .slick-list,
.main_visual .slick-list,
.ec-productRole .ec-productRole__slider .item_visual .slick-list,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-list {
transform: translate3d(0, 0, 0);
}
.ec-newArrival__list .slick-list,
.main_visual .slick-list,
.ec-productRole .ec-productRole__slider .item_visual .slick-list,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-list {
position: relative;
display: block;
overflow: hidden;
padding: 0;
margin-top: -5px;
padding-top: 5px;
}
.ec-newArrival__list .slick-list:focus,
.main_visual .slick-list:focus,
.ec-productRole .ec-productRole__slider .item_visual .slick-list:focus,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-list:focus {
outline: none;
}
.ec-newArrival__list .slick-list.dragging,
.main_visual .slick-list.dragging,
.ec-productRole .ec-productRole__slider .item_visual .slick-list.dragging,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-loading .ec-newArrival__list .slick-list,
.slick-loading .main_visual .slick-list,
.slick-loading .ec-productRole .ec-productRole__slider .item_visual .slick-list,
.ec-productRole .ec-productRole__slider .slick-loading .item_visual .slick-list,
.slick-loading .ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-list,
.ec-productRelatedRole .ec-productRelatedRole__plugin .slick-loading .ec-shelfGrid .slick-list {
background: #fff url("../img/common/ajax-loader.gif") center center no-repeat;
}
.ec-newArrival__list .slick-track,
.main_visual .slick-track,
.ec-productRole .ec-productRole__slider .item_visual .slick-track,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.ec-newArrival__list .slick-track:before,
.main_visual .slick-track:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-track:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-track:before, .ec-newArrival__list .slick-track:after,
.main_visual .slick-track:after,
.ec-productRole .ec-productRole__slider .item_visual .slick-track:after,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-track:after {
display: table;
content: "";
}
.ec-newArrival__list .slick-track:after,
.main_visual .slick-track:after,
.ec-productRole .ec-productRole__slider .item_visual .slick-track:after,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-track:after {
clear: both;
}
.slick-loading .ec-newArrival__list .slick-track,
.slick-loading .main_visual .slick-track,
.slick-loading .ec-productRole .ec-productRole__slider .item_visual .slick-track,
.ec-productRole .ec-productRole__slider .slick-loading .item_visual .slick-track,
.slick-loading .ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-track,
.ec-productRelatedRole .ec-productRelatedRole__plugin .slick-loading .ec-shelfGrid .slick-track {
visibility: hidden;
}
.ec-newArrival__list .slick-slide,
.main_visual .slick-slide,
.ec-productRole .ec-productRole__slider .item_visual .slick-slide,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir=rtl] .ec-newArrival__list .slick-slide,
[dir=rtl] .main_visual .slick-slide,
[dir=rtl] .ec-productRole .ec-productRole__slider .item_visual .slick-slide,
.ec-productRole .ec-productRole__slider [dir=rtl] .item_visual .slick-slide,
[dir=rtl] .ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-slide,
.ec-productRelatedRole .ec-productRelatedRole__plugin [dir=rtl] .ec-shelfGrid .slick-slide {
float: right;
}
.ec-newArrival__list .slick-slide img,
.main_visual .slick-slide img,
.ec-productRole .ec-productRole__slider .item_visual .slick-slide img,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-slide img {
display: block;
}
.ec-newArrival__list .slick-slide.slick-loading img,
.main_visual .slick-slide.slick-loading img,
.ec-productRole .ec-productRole__slider .item_visual .slick-slide.slick-loading img,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-slide.slick-loading img {
display: none;
}
.ec-newArrival__list .slick-slide.dragging img,
.main_visual .slick-slide.dragging img,
.ec-productRole .ec-productRole__slider .item_visual .slick-slide.dragging img,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized.ec-newArrival__list .slick-slide,
.slick-initialized.main_visual .slick-slide,
.ec-productRole .ec-productRole__slider .slick-initialized.item_visual .slick-slide,
.ec-productRelatedRole .ec-productRelatedRole__plugin .slick-initialized.ec-shelfGrid .slick-slide {
display: block;
}
.slick-loading.ec-newArrival__list .slick-slide,
.slick-loading.main_visual .slick-slide,
.ec-productRole .ec-productRole__slider .slick-loading.item_visual .slick-slide,
.ec-productRelatedRole .ec-productRelatedRole__plugin .slick-loading.ec-shelfGrid .slick-slide {
visibility: hidden;
}
.slick-vertical.ec-newArrival__list .slick-slide,
.slick-vertical.main_visual .slick-slide,
.ec-productRole .ec-productRole__slider .slick-vertical.item_visual .slick-slide,
.ec-productRelatedRole .ec-productRelatedRole__plugin .slick-vertical.ec-shelfGrid .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.ec-newArrival__list .slick-arrow.slick-hidden,
.main_visual .slick-arrow.slick-hidden,
.ec-productRole .ec-productRole__slider .item_visual .slick-arrow.slick-hidden,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-arrow.slick-hidden {
display: none;
}
.ec-newArrival__list .slick-prev,
.main_visual .slick-prev,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev,
.ec-newArrival__list .slick-next,
.main_visual .slick-next,
.ec-productRole .ec-productRole__slider .item_visual .slick-next,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.ec-newArrival__list .slick-prev:hover,
.main_visual .slick-prev:hover,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev:hover,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:hover, .ec-newArrival__list .slick-prev:focus,
.main_visual .slick-prev:focus,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev:focus,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:focus,
.ec-newArrival__list .slick-next:hover,
.main_visual .slick-next:hover,
.ec-productRole .ec-productRole__slider .item_visual .slick-next:hover,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:hover,
.ec-newArrival__list .slick-next:focus,
.main_visual .slick-next:focus,
.ec-productRole .ec-productRole__slider .item_visual .slick-next:focus,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.ec-newArrival__list .slick-prev:hover:before,
.main_visual .slick-prev:hover:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev:hover:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:hover:before, .ec-newArrival__list .slick-prev:focus:before,
.main_visual .slick-prev:focus:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev:focus:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:focus:before,
.ec-newArrival__list .slick-next:hover:before,
.main_visual .slick-next:hover:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-next:hover:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:hover:before,
.ec-newArrival__list .slick-next:focus:before,
.main_visual .slick-next:focus:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-next:focus:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:focus:before {
opacity: 1;
}
.ec-newArrival__list .slick-prev.slick-disabled:before,
.main_visual .slick-prev.slick-disabled:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev.slick-disabled:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev.slick-disabled:before,
.ec-newArrival__list .slick-next.slick-disabled:before,
.main_visual .slick-next.slick-disabled:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-next.slick-disabled:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next.slick-disabled:before {
opacity: 0.25;
}
.ec-newArrival__list .slick-prev:before,
.main_visual .slick-prev:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:before,
.ec-newArrival__list .slick-next:before,
.main_visual .slick-next:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-next:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
opacity: 1;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ec-newArrival__list .slick-prev,
.main_visual .slick-prev,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev {
left: -25px;
}
[dir=rtl] .ec-newArrival__list .slick-prev,
[dir=rtl] .main_visual .slick-prev,
[dir=rtl] .ec-productRole .ec-productRole__slider .item_visual .slick-prev,
.ec-productRole .ec-productRole__slider [dir=rtl] .item_visual .slick-prev,
[dir=rtl] .ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev,
.ec-productRelatedRole .ec-productRelatedRole__plugin [dir=rtl] .ec-shelfGrid .slick-prev {
right: -25px;
}
.ec-newArrival__list .slick-prev:before,
.main_visual .slick-prev:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-prev:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:before {
content: "←";
}
[dir=rtl] .ec-newArrival__list .slick-prev:before,
[dir=rtl] .main_visual .slick-prev:before,
[dir=rtl] .ec-productRole .ec-productRole__slider .item_visual .slick-prev:before,
.ec-productRole .ec-productRole__slider [dir=rtl] .item_visual .slick-prev:before,
[dir=rtl] .ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin [dir=rtl] .ec-shelfGrid .slick-prev:before {
content: "→";
}
.ec-newArrival__list .slick-next,
.main_visual .slick-next,
.ec-productRole .ec-productRole__slider .item_visual .slick-next,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next {
right: -25px;
}
[dir=rtl] .ec-newArrival__list .slick-next,
[dir=rtl] .main_visual .slick-next,
[dir=rtl] .ec-productRole .ec-productRole__slider .item_visual .slick-next,
.ec-productRole .ec-productRole__slider [dir=rtl] .item_visual .slick-next,
[dir=rtl] .ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next,
.ec-productRelatedRole .ec-productRelatedRole__plugin [dir=rtl] .ec-shelfGrid .slick-next {
right: auto;
left: -25px;
}
.ec-newArrival__list .slick-next:before,
.main_visual .slick-next:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-next:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:before {
content: "→";
}
[dir=rtl] .ec-newArrival__list .slick-next:before,
[dir=rtl] .main_visual .slick-next:before,
[dir=rtl] .ec-productRole .ec-productRole__slider .item_visual .slick-next:before,
.ec-productRole .ec-productRole__slider [dir=rtl] .item_visual .slick-next:before,
[dir=rtl] .ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin [dir=rtl] .ec-shelfGrid .slick-next:before {
content: "←";
}
.slick-dotted.ec-newArrival__list,
.slick-dotted.main_visual,
.ec-productRole .ec-productRole__slider .slick-dotted.item_visual,
.ec-productRelatedRole .ec-productRelatedRole__plugin .slick-dotted.ec-shelfGrid {
margin-bottom: 30px;
}
.ec-newArrival__list .slick-dots,
.main_visual .slick-dots,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots {
width: 100%;
padding: 10px 5px;
margin: 0;
list-style: none;
text-align: center;
}
.ec-newArrival__list .slick-dots li,
.main_visual .slick-dots li,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li {
position: relative;
display: inline-block;
padding: 0;
cursor: pointer;
width: 20px;
height: 20px;
margin: 0 5px;
}
.ec-newArrival__list .slick-dots li button,
.main_visual .slick-dots li button,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li button,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li button {
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
font-size: 0;
line-height: 0;
display: block;
}
.ec-newArrival__list .slick-dots li button:hover,
.main_visual .slick-dots li button:hover,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li button:hover,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li button:hover, .ec-newArrival__list .slick-dots li button:focus,
.main_visual .slick-dots li button:focus,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li button:focus,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li button:focus {
outline: none;
}
.ec-newArrival__list .slick-dots li button:hover:before,
.main_visual .slick-dots li button:hover:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li button:hover:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li button:hover:before, .ec-newArrival__list .slick-dots li button:focus:before,
.main_visual .slick-dots li button:focus:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li button:focus:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li button:focus:before {
opacity: 1;
}
.ec-newArrival__list .slick-dots li button:before,
.main_visual .slick-dots li button:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li button:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li button:before {
font-family: "slick";
font-size: 16px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: "•";
text-align: center;
opacity: 1;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-size: 13px;
}
.ec-newArrival__list .slick-dots li.slick-active,
.main_visual .slick-dots li.slick-active,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li.slick-active,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li.slick-active {
color: #626265;
}
.ec-newArrival__list .slick-dots li.slick-active button,
.main_visual .slick-dots li.slick-active button,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li.slick-active button,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li.slick-active button {
color: inherit;
}
.ec-newArrival__list .slick-dots li.slick-active button:before,
.main_visual .slick-dots li.slick-active button:before,
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li.slick-active button:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li.slick-active button:before {
opacity: 1;
color: inherit;
}
/*
トップページ
トップページ スライド部に関する Project コンポーネントを定義します。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/12.1.slider.pug
+ec-sliderRole
Styleguide 12.1
*/
.ec-sliderRole {
margin-bottom: 24px;
width: 100%;
padding: 0;
margin: 0;
}
.ec-sliderRole ul {
padding: 0;
list-style: none;
}
.ec-sliderItemRole {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
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 !important;
}
.ec-sliderItemRole ul, .ec-sliderItemRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-sliderItemRole dl, .ec-sliderItemRole dt, .ec-sliderItemRole dd, .ec-sliderItemRole li {
margin: 0;
padding: 0;
}
.ec-sliderItemRole img {
max-width: 100%;
}
.ec-sliderItemRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-sliderItemRole *,
.ec-sliderItemRole *::before,
.ec-sliderItemRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-sliderItemRole img {
width: 100%;
}
.ec-sliderItemRole ul {
padding: 0;
list-style: none;
}
.ec-sliderItemRole .item_nav {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-sliderItemRole .item_nav {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 0;
}
}
.ec-sliderItemRole .slideThumb {
margin-bottom: 25px;
width: 33%;
opacity: 0.8;
cursor: pointer;
}
.ec-sliderItemRole .slideThumb:focus {
outline: none;
}
.ec-sliderItemRole .slideThumb:hover {
opacity: 1;
}
.ec-sliderItemRole .slideThumb img {
width: 80%;
}
.main_visual {
margin-bottom: 0px !important;
}
.main_visual .slick-prev:before,
.main_visual .slick-next:before {
opacity: 0.75;
}
.main_visual.slick-dotted {
margin-bottom: 0px;
}
.main_visual .slick-dots {
position: absolute;
bottom: 15px;
display: block;
padding: 0;
text-align: center;
}
.main_visual .slick-dots li {
width: 20px;
height: 20px;
margin: 0 5px;
}
.main_visual .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
}
.main_visual .slick-dots li button:before {
font-family: "slick";
font-size: 16px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: "•";
color: #fff;
background-size: 13px;
}
.main_visual .slick-dots li.slick-active button:before {
color: #626265;
}
.main_visual a {
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
text-align: center;
font-size: 3rem;
position: relative;
height: 100vh;
}
@media only screen and (min-width: 1020px) {
.main_visual a {
height: 100vh;
font-size: 4.3rem;
position: relative;
}
}
.main_visual a p {
margin: auto;
font-size: 80%;
width: 90%;
min-width: 70%;
color: #fff;
}
@media only screen and (min-width: 1020px) {
.main_visual a p {
width: 70%;
font-size: 3.4rem;
}
}
.main_visual .main_visual_01 {
background: url(../img/top/mv01.jpg) no-repeat center;
background-size: cover;
}
.main_visual .main_visual_02 {
background: url(../img/top/mv02.jpg) no-repeat center;
background-size: cover;
}
.main_visual .main_visual_03 {
background: url(../img/top/mv03.jpg) no-repeat center right;
background-size: cover;
}
/**
メディアクエリ
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;
}
@media only screen and (min-width: 1020px) {
.ec-eyecatchRole {
flex-wrap: nowrap;
}
}
.ec-eyecatchRole .ec-eyecatchRole__image {
display: block;
margin-bottom: 40px;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-eyecatchRole .ec-eyecatchRole__image {
order: 2;
}
}
.ec-eyecatchRole .ec-eyecatchRole__intro {
color: black;
}
@media only screen and (min-width: 1020px) {
.ec-eyecatchRole .ec-eyecatchRole__intro {
padding-right: 5%;
order: 1;
}
}
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-bottom: 0.8em;
font-size: 16px;
font-weight: normal;
}
@media only screen and (min-width: 1020px) {
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-top: 45px;
}
}
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: 0.8em;
font-size: 24px;
font-weight: bold;
}
@media only screen and (min-width: 1020px) {
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: 1em;
font-size: 26px;
}
}
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
margin-bottom: 20px;
font-size: 16px;
line-height: 2;
}
@media only screen and (min-width: 1020px) {
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
margin-bottom: 30px;
}
}
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 20px;
font-size: 16px;
line-height: 2;
}
@media only screen and (min-width: 1020px) {
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 30px;
}
}
/**
メディアクエリ
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.428571429;
border-radius: 5px;
-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: #525263;
text-decoration: none;
}
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
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;
-webkit-box-shadow: none;
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.428571429;
border-radius: 5px;
-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: #525263;
text-decoration: none;
}
.ec-blockBtn--top:active, .ec-blockBtn--top.active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
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;
-webkit-box-shadow: none;
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;
}
@media only screen and (min-width: 1020px) {
.ec-blockBtn--top {
max-width: 260px;
}
}
/*
見出し
トップページで使用されている見出しのスタイルです。
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: 0.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: 0.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: 0.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: 0.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;
}
@media only screen and (min-width: 1020px) {
.ec-topicRole {
padding: 60px 0;
}
}
.ec-topicRole .ec-topicRole__list {
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: 1020px) {
.ec-topicRole .ec-topicRole__list {
flex-wrap: nowrap;
}
}
.ec-topicRole .ec-topicRole__listItem {
margin-bottom: 20px;
width: 100%;
height: auto;
}
@media only screen and (min-width: 1020px) {
.ec-topicRole .ec-topicRole__listItem {
width: 50%;
}
.ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
margin-right: 30px;
}
}
.ec-topicRole .ec-topicRole__listItemTitle {
margin-top: 0.5em;
font-size: 14px;
color: black;
}
@media only screen and (min-width: 1020px) {
.ec-topicRole .ec-topicRole__listItemTitle {
margin-top: 1em;
}
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カテゴリ（アイテム4列 スマホの時は2列）
トップページで使用されているアイテムリストのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.6.1
*/
.ec-newItemRole {
padding: 40px 0;
}
@media only screen and (min-width: 1020px) {
.ec-newItemRole {
padding: 60px 0;
}
}
.ec-newItemRole .ec-newItemRole__list {
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: 1020px) {
.ec-newItemRole .ec-newItemRole__list {
flex-wrap: nowrap;
}
}
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 4%;
width: 48%;
height: auto;
}
.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
color: black;
}
@media only screen and (min-width: 1020px) {
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 15px;
width: 25%;
}
.ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
margin-right: 30px;
}
}
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 4%;
}
@media only screen and (min-width: 1020px) {
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 30px;
}
}
.ec-newItemRole .ec-newItemRole__listItemHeading {
margin-top: calc(45% - 20px);
}
.ec-newItemRole .ec-newItemRole__listItemTitle {
margin: 8px 0;
font-size: 14px;
font-weight: bold;
}
@media only screen and (min-width: 1020px) {
.ec-newItemRole .ec-newItemRole__listItemTitle {
margin: 20px 0 10px;
}
}
.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 {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-categoryRole {
display: block;
padding: 40px 0 0 0;
text-align: center;
background: white;
width: 1020px;
margin: 0 auto;
margin-bottom: 70px;
}
}
.ec-categoryRole .ec-categoryRole__list {
display: flex;
flex-wrap: wrap;
}
.ec-categoryRole .ec-categoryRole__listItem {
margin-bottom: 25px;
width: 15.6%;
height: auto;
}
.ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
margin-right: 1%;
}
.ec-categoryRole .ec-categoryRole__listItem a {
display: block;
}
@media only screen and (min-width: 1020px) {
.ec-categoryRole .ec-categoryRole__listItem a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-categoryRole .ec-categoryRole__listItem a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-categoryRole .ec-categoryRole__listItem a img {
margin: 0 0 5px 0;
}
.ec-categoryRole .ec-categoryRole__listItem a p {
margin: 0;
}
.ec-categoryRole .ec-secHeading__en {
background: url(../img/common/tit_line_01.png) repeat-x bottom;
text-align: center;
margin: 0 0 27px 0;
padding: 5px 0 15px 0;
}
.ec-categoryRole .ec-secHeading__en img {
width: 122px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
見出し
トップページで使用されている新着情報のスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.8.1
*/
.ec-newsRole {
margin: 0 0 20px 0;
padding: 20px 0 40px 0;
width: 100%;
max-width: inherit;
}
.ec-newsRole .ec-newsRole__wrapper {
margin: 0 auto;
width: 100%;
max-width: inherit;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole .ec-newsRole__wrapper {
width: 1020px;
}
}
.ec-newsRole .ec-secHeading {
background: url(../img/common/tit_line_01.png) repeat-x bottom;
text-align: center;
margin: 0 auto 27px;
padding: 5px 0 10px 0;
width: 97%;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole .ec-secHeading {
margin: 0 0 27px 0;
padding: 5px 0 15px 0;
width: 100%;
}
}
.ec-newsRole .ec-secHeading img {
width: 73px;
}
.ec-newsRole .ec-newsRole__news {
box-sizing: border-box;
}
.ec-newsRole .ec-newsRole__newsItem {
width: 100%;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 10px;
}
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 20px;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 0;
}
}
.ec-newsRole .ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn svg {
transform: rotateZ(180deg);
margin-top: -1px;
}
.ec-newsRole .ec-newsRole__newsHeading {
cursor: pointer;
padding: 8px;
position: relative;
display: flex;
}
.ec-newsRole .ec-newsRole__newsDate {
display: block;
margin: 0 1% 0 0;
font-size: 1.5rem;
color: black;
min-width: 30%;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole .ec-newsRole__newsDate {
display: inline-block;
width: 8%;
min-width: auto;
}
}
.ec-newsRole .ec-newsRole__newsColumn {
display: flex;
flex: 1 0 auto;
max-width: 60%;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole .ec-newsRole__newsColumn {
display: inline-flex;
min-width: calc(100% - 120px);
}
}
.ec-newsRole .ec-newsRole__newsTitle {
display: inline-block;
width: 90%;
font-size: 1.4rem;
font-weight: bold;
color: #242221;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole .ec-newsRole__newsTitle {
font-size: 1.5rem;
margin-bottom: 0;
}
}
.ec-newsRole .ec-newsRole__newsTitle:hover {
text-decoration: underline;
}
.ec-newsRole .ec-newsRole__newsClose {
display: flex;
align-items: center;
justify-content: flex-end;
width: 10%;
}
.ec-newsRole .ec-newsRole__newsCloseBtn {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
border-radius: 50%;
width: 25px;
height: 25px;
color: white;
text-align: center;
background: #eee;
cursor: pointer;
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
}
.ec-newsRole .ec-newsRole__newsCloseBtn svg {
width: 1em;
height: 1em;
fill: white;
font-size: 11px;
margin-top: 1px;
}
.ec-newsRole .ec-newsRole__newsDescription {
display: none;
width: calc(100% - 16px);
margin: 0 8px;
font-size: 1.3rem;
line-height: 1.3;
overflow: hidden;
color: #242221;
padding: 8px;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole .ec-newsRole__newsDescription {
margin: 0 0 0 10%;
width: 85%;
}
}
.ec-newsRole .ec-newsRole__newsDescription a {
color: #242221;
display: block;
background: #fedcd2;
width: 40%;
text-align: center;
padding: 10px 0;
border-radius: 5px;
margin: 20px 0 20px 0;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole .ec-newsRole__newsDescription a {
width: 15%;
}
}
@media only screen and (min-width: 1020px) and (min-width: 1020px) {
.ec-newsRole .ec-newsRole__newsDescription a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-newsRole .ec-newsRole__newsDescription a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-newsRole a#news_readmore {
width: 60%;
margin: 30px auto 60px;
display: block;
background: #fedcd2;
border-radius: 10px;
color: #242221;
text-align: center;
padding: 10px 0;
position: relative;
border-width: 0;
font-weight: normal;
}
@media only screen and (min-width: 1020px) {
.ec-newsRole a#news_readmore {
width: 30%;
}
}
.ec-newsRole a#news_readmore::after {
position: absolute;
right: 7%;
margin: 1% 0 0 0;
content: " ";
display: inline-block;
width: 15px;
height: 15px;
background: url(../img/common/arrow_06.png) no-repeat center;
background-size: contain;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
見出し
トップページで使用されているカレンダーのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.9.1
*/
/* 背景や文字の色調整 */
.ec-calendar {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}
@media screen and (min-width: 768px) {
.ec-calendar {
flex-direction: row;
margin-left: -30px;
}
}
.ec-calendar__month {
border-collapse: collapse;
margin-top: 30px;
}
@media screen and (min-width: 768px) {
.ec-calendar__month {
margin-top: 0;
margin-left: 30px;
}
}
.ec-calendar__month th:not(.ec-calendar__title) {
background: #ddd;
}
.ec-calendar__month th, .ec-calendar__month td {
padding: 8px;
text-align: center;
vertical-align: middle;
}
.ec-calendar .ec-calendar__title {
border: 0;
}
.ec-calendar .ec-calendar__sun {
color: #DE5D50;
}
.ec-calendar .ec-calendar__mon, .ec-calendar .ec-calendar__tue, .ec-calendar .ec-calendar__wed, .ec-calendar .ec-calendar__thu, .ec-calendar .ec-calendar__fri {
color: #333;
}
.ec-calendar .ec-calendar__sat {
color: #5CB1B1;
}
.ec-calendar .ec-calendar__day {
color: #333;
}
.ec-calendar .ec-calendar__holiday {
color: #DE5D50 !important;
}
.ec-calendar .ec-calendar__today {
color: #333;
position: relative;
z-index: 1;
}
.ec-calendar .ec-calendar__today::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background: #FFFDE7;
transform: translate(-50%, -50%);
z-index: -1;
}
@media only screen and (max-width: 767px) {
.ec-calendar, .ec-calendar-comment {
padding: 0 15px;
}
}
/**
メディアクエリ
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: 0 -8px;
padding-bottom: 16px;
}
@media only screen and (min-width: 1020px) {
.ec-searchnavRole {
margin: 0;
padding: 0;
}
}
.ec-searchnavRole .ec-searchnavRole__topicpath {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 0 8px;
margin: 0 -8px;
}
@media only screen and (min-width: 1020px) {
.ec-searchnavRole .ec-searchnavRole__topicpath {
margin: 0 -6px;
border-top: none;
border-bottom: none;
}
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole .ec-searchnavRole__infos {
display: flex;
justify-content: space-between;
}
}
.ec-searchnavRole .ec-searchnavRole__counter {
margin: 16px 0;
padding: 0 8px;
}
@media only screen and (min-width: 1020px) {
.ec-searchnavRole .ec-searchnavRole__counter {
flex: 1 0 auto;
margin: 0;
padding: 0.5em 8px 28px;
}
}
.ec-searchnavRole .ec-searchnavRole__actions {
flex-basis: 0 0 auto;
margin: 0;
padding: 0 16px 20px 0;
text-align: right;
}
@media only screen and (min-width: 1020px) {
.ec-searchnavRole .ec-searchnavRole__actions {
text-align: left;
}
}
.ec-searchnavRole .ec-searchnavRole__actions .ec-select {
margin: 0;
}
.ec-searchnavRole .ec-searchnavRole__actions .ec-select select {
margin: 0 0 10px 0;
padding: 10px 12px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 5px;
font-size: 1.6rem;
line-height: 1.5;
height: 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;
}
/*
商品一覧
商品一覧 に関する Project コンポーネントを定義します。
SP版２列、PC版４列の特殊グリッドを構成します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2
*/
/*
商品一覧グリッド
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2.1
*/
.ec-shelfGrid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0 -8px;
padding: 0;
padding: 0;
list-style: none;
}
.ec-shelfGrid a {
color: inherit;
text-decoration: none;
}
.ec-shelfGrid a:hover {
text-decoration: none;
}
@media only screen and (min-width: 1020px) {
.ec-shelfGrid {
margin-left: 0;
margin-right: 0;
}
}
@media only screen and (min-width: 768px) {
.ec-shelfGrid {
justify-content: flex-start;
}
}
.ec-shelfGrid .ec-shelfGrid__item {
padding: 0 8px 16px;
flex-basis: 50%;
max-width: 50%;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 768px) {
.ec-shelfGrid .ec-shelfGrid__item {
flex-basis: 25%;
max-width: 25%;
}
.ec-shelfGrid .ec-shelfGrid__item .slick-track {
min-width: 100% !important;
}
}
@media only screen and (min-width: 1020px) {
.ec-shelfGrid .ec-shelfGrid__item {
padding-bottom: 40px;
}
}
.ec-shelfGrid .ec-shelfGrid__item a {
height: 100%;
display: block;
}
@media only screen and (min-width: 1020px) {
.ec-shelfGrid .ec-shelfGrid__item a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-shelfGrid .ec-shelfGrid__item a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-shelfGrid .ec-shelfGrid__item-image {
margin: 0 0 8px;
}
.ec-shelfGrid .ec-shelfGrid__item-image img {
width: 100%;
border-radius: 10px;
}
.ec-shelfGrid .ec-shelfGrid__item-name {
margin: 0;
}
.ec-shelfGrid .ec-shelfGrid__item-description {
margin: 0 0 8px;
}
.ec-shelfGrid .ec-shelfGrid__item .price02-default {
color: #df744a;
font-weight: bold;
margin-bottom: 10px;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__actions select {
background: white;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
margin-top: auto;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn button.add-cart {
background-color: #df744a;
border-radius: 5px;
}
/*
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;
}
@media only screen and (min-width: 1020px) {
.ec-shelfGridCenter {
margin-left: -16px;
margin-right: -16px;
}
}
.ec-shelfGridCenter .ec-shelfGridCenter__item {
margin-bottom: 36px;
width: 50%;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
margin-bottom: 10px;
text-align: center;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item img {
width: auto;
max-height: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-shelfGridCenter .ec-shelfGridCenter__item {
padding: 0 16px;
width: 25%;
}
}
.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;
}
@media only screen and (min-width: 1020px) {
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
padding: 0 16px;
}
}
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
padding-left: 8px;
}
@media only screen and (min-width: 1020px) {
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
padding: 0 16px;
}
}
.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 {
width: 100%;
height: 100%;
display: flex;
background-color: rgba(0, 0, 0, 0.3);
}
.ec-modal .ec-modal-wrap {
background-color: #fff;
border: 1px solid #333;
width: 90%;
margin: 20px;
padding: 40px 5px;
border-radius: 2px;
transition: all 0.5s ease;
-ms-flex-item-align: center;
align-self: center;
}
@media only screen and (min-width: 1020px) {
.ec-modal .ec-modal-wrap {
padding: 40px 10px;
width: 50%;
margin: 20px auto;
}
}
.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-modal-box div {
margin-top: 20px;
}
/*
.ec-modal-overlay-close {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: -100;
}
input:checked {
~ .ec-modal-overlay-close {
z-index: 9998;
}
~ .ec-modal-overlay {
transform: scale(1);
opacity: 1;
z-index: 9997;
overflow: auto;
}
~ .ec-modal-overlay .ec-modal-wrap {
transform: translateY(0);
z-index: 9999;
}
}
*/
/**
メディアクエリ
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
*/
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-grid2 {
justify-content: space-between;
}
}
@media only screen and (min-width: 768px) {
.ec-productRole .ec-grid2 {
display: flex;
}
.ec-productRole .ec-grid2__cell {
flex-basis: 50%;
max-width: 50%;
}
}
.ec-productRole .ec-productRole__slider {
margin: 0;
padding: 8px;
width: 100%;
max-width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__slider {
margin: 0 2% 30px 0;
}
}
.ec-productRole .ec-productRole__slider .slick-slider {
margin-bottom: 0;
}
.ec-productRole .ec-productRole__slider .slick-slide {
padding: 0 10px;
}
.ec-productRole .ec-productRole__slider .slick-slide img {
border-radius: 10px;
}
.ec-productRole .ec-productRole__slider .item_nav {
display: none;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__slider .item_nav {
display: inherit;
margin: 0;
padding: 15px 10px 10px;
display: flex;
justify-content: flex-start;
}
.ec-productRole .ec-productRole__slider .item_nav .slideThumb {
flex-basis: 33%;
max-width: calc(33% - 3px);
margin-right: 6px;
}
.ec-productRole .ec-productRole__slider .item_nav .slideThumb:nth-child(3n) {
margin-right: 0;
}
.ec-productRole .ec-productRole__slider .item_nav .slideThumb img {
width: 100%;
border-radius: 10px;
}
}
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li button::before {
color: #ccc !important;
}
.ec-productRole .ec-productRole__slider .item_visual .slick-dots li.slick-active button::before {
color: inherit !important;
}
.ec-productRole .ec-productRole__profile {
margin: 0 0 20px 0;
padding: 0 8px;
}
.ec-productRole .ec-productRole__profile .ec-productRole__title h2 {
font-size: 2rem;
font-weight: normal;
margin-bottom: 5px;
color: #242221;
line-height: 1.4;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__title h2 {
font-size: 3.2rem;
margin-bottom: 10px;
}
}
.ec-productRole .ec-productRole__profile .ec-productRole__tags {
padding-bottom: 20px;
margin-bottom: 20px;
list-style: none;
display: flex;
}
.ec-productRole .ec-productRole__profile .ec-productRole__tags:not(.noline) {
border-bottom: 1px solid #eee;
}
.ec-productRole .ec-productRole__profile .ec-productRole__tags .ec-productRole__tag {
padding: 3px 15px;
background: url(../img/common/bg_image_01.png);
font-size: 80%;
color: #525263;
border-radius: 5px;
}
.ec-productRole .ec-productRole__profile .ec-productRole__tags .ec-productRole__tag:not(:last-child) {
margin-right: 0.5em;
}
.ec-productRole .ec-productRole__profile .ec-productRole__priceRegularPrice .price01-default {
text-decoration: line-through;
}
.ec-productRole .ec-productRole__profile .ec-productRole__priceRegularTax {
font-size: 1.2rem;
}
.ec-productRole .ec-productRole__profile .ec-productRole__price .ec-price__price {
padding: 0;
font-size: 1.8rem;
color: #df744a;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__price .ec-price__price {
font-size: 2.8rem;
}
}
.ec-productRole .ec-productRole__profile .ec-productRole__price .ec-price__tax {
font-size: 1rem;
color: #df744a;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__price .ec-price__tax {
font-size: 1.6rem;
}
}
.ec-productRole .ec-productRole__profile .ec-productRole__code {
margin: 0;
padding: 8px 0;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__code {
margin: 14px 0;
}
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper {
padding-top: 8px;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper {
padding: 20px;
background: url(../img/common/bg_image_01.png);
}
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-select {
margin-top: 8px;
margin-bottom: 0;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-select {
margin-top: 16px;
}
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-select:first-child {
margin-top: 0;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-select:first-child {
margin-top: 8px;
}
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-select select {
margin: 0 0 10px 0;
padding: 10px 0;
width: 100%;
height: auto;
font-size: 1.6rem;
border: 1px solid #e0e0e0;
border-radius: 5px;
background: white;
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-numberInput {
margin: 8px 0 40px 0;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-numberInput {
margin: 14px 0;
}
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-numberInput span {
min-height: 40px;
line-height: 40px;
float: left;
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__actions .ec-numberInput input {
margin: 0 0 10px 1em;
padding: 10px 12px;
width: auto;
max-width: 100px;
line-height: 1.5;
border: 1px solid #e0e0e0;
border-radius: 5px;
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__btn {
padding: 0 8px;
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__btn button#favorite, .ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__btn button.add-cart {
margin: 0 0 15px 0;
color: white;
border-radius: 5px;
height: 53px;
line-height: 53px;
font-size: 1.6rem;
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__btn button.add-cart {
background: #df744a;
}
.ec-productRole .ec-productRole__profile .ec-productRole__cartWrapper .ec-productRole__btn button#favorite {
background: #72726f;
height: 43px;
line-height: 43px;
}
.ec-productRole .ec-productRole__profile .ec-productRole__description {
margin: 0 0 8px 0;
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__profile .ec-productRole__description {
margin: 14px 0;
clear: both;
}
}
.ec-productRole .ec-productRole__description {
margin: 0 auto 20px;
padding: 0 0 16px 0;
width: 83.3%;
}
@media only screen and (min-width: 1020px) {
.ec-productRole .ec-productRole__description {
padding: 0 0 6px 0;
}
}
.ec-productRole .ec-productRole__category {
margin: 0 0 20px 0;
padding: 20px 2%;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.ec-productRole .ec-productRole__category div {
margin: 0;
font-size: 1.4rem;
}
.ec-productRole .ec-productRole__category ul {
margin: 0;
list-style: none;
}
.ec-productRole .ec-productRole__category ul li {
font-size: 0;
}
.ec-productRole .ec-productRole__category ul li a {
padding: 0 0.5em;
display: inline-block;
font-size: 1.4rem;
}
.ec-productRole .ec-productRole__category ul li a:first-child {
padding-left: 0;
}
.ec-productRole .ec-productRole__category ul li span {
font-size: 1.4rem;
}
.ec-productRole .ec-productRole__description {
padding: 72.5px 0 0;
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
.ec-productRole .ec-productRole__description h3 {
font-size: 24px;
font-weight: 700;
color: #222;
margin-top: 0;
margin-bottom: 52px;
}
.ec-productRole .ec-productRole__description .ec-descriptionRole__description {
margin-bottom: 69px;
color: #525263;
font-size: 16px;
line-height: 26px;
}
.ec-productRole .ec-productRole__description .ec-descriptionRole__image img {
width: 100%;
margin-bottom: 70px;
}
.ec-productRole .ec-productRole__description .ec-descriptionRole__spec dl {
display: flex;
font-size: 16px;
border-bottom: 1px solid #ddd;
}
.ec-productRole .ec-productRole__description .ec-descriptionRole__spec dt {
color: #222;
width: 222px;
font-weight: 400;
padding-bottom: 19.5px;
}
.ec-productRole .ec-productRole__description .ec-descriptionRole__spec dd {
color: #222;
font-weight: 400;
line-height: 26px;
padding-bottom: 19.5px;
}
.ec-productRelatedRole .ec-productRelatedRole__title {
margin: 0 0 18px 0;
padding: 18px 0 0 0;
font-size: 1.4rem;
font-weight: bold;
}
@media only screen and (min-width: 1020px) {
.ec-productRelatedRole .ec-productRelatedRole__title {
font-size: 2.4rem;
}
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid {
position: relative;
margin: 0 -8px;
}
@media only screen and (min-width: 1020px) {
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid {
margin: 0 -16px;
}
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid__item {
padding: 0 8px;
}
@media only screen and (min-width: 768px) {
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid__item {
padding: 0 16px;
}
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid__item-image {
margin: 0 0 15px;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid__item a {
padding-bottom: 16px;
margin: 0 0 10px;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid__item a p:nth-child(2) {
margin: 0;
color: #242221;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid__item a p:nth-child(3) {
margin: 0;
color: #df744a;
font-weight: bold;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next {
height: 30px;
border-radius: 50%;
background: #bfbfbf;
display: flex;
justify-content: center;
align-items: center;
padding-left: 2px;
margin-top: -26px;
}
@media only screen and (min-width: 768px) {
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next {
width: 35px;
height: 35px;
}
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:before,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:before {
display: none;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev:hover,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next:hover {
opacity: 0.8;
background: #bfbfbf;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev.slick-disabled,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next.slick-disabled {
opacity: 0.4;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev svg,
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next svg {
left: 0;
top: 0;
width: 25px;
height: 25px;
fill: white;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-prev {
left: -40px;
transform: translateY(-50%) rotateZ(180deg);
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-next {
right: -40px;
}
.ec-productRelatedRole .ec-productRelatedRole__plugin .ec-shelfGrid .slick-dots li button::before {
color: #ccc;
}
/**
メディアクエリ
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: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
width: 93%;
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 !important;
}
.ec-cartRole ul, .ec-cartRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-cartRole dl, .ec-cartRole dt, .ec-cartRole dd, .ec-cartRole li {
margin: 0;
padding: 0;
}
.ec-cartRole img {
max-width: 100%;
}
.ec-cartRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-cartRole *,
.ec-cartRole *::before,
.ec-cartRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-cartRole img {
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-cartRole {
width: 100%;
}
}
.ec-cartRole .ec-cartRole__error-noItem {
width: 100%;
}
.ec-cartRole form.ec-cartRole {
width: 100%;
}
.ec-cartRole::before {
display: none;
}
.ec-cartRole .ec-cartRole__progress {
padding: 8px 0 16px;
width: 100%;
text-align: center;
}
.ec-cartRole .ec-cartRole__progress:not(:first-child) {
display: none;
}
.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: 0;
padding: 16px 0;
width: 100%;
text-align: left;
font-weight: normal;
border-top: 1px dotted #ccc;
}
@media only screen and (min-width: 1020px) {
.ec-cartRole .ec-cartRole__totalText {
margin: 0 10%;
border-top: none;
}
}
.ec-cartRole .ec-cartRole__cart {
margin: 0;
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-cartRole .ec-cartRole__cart {
margin: 24px 10% 0;
}
}
.ec-cartRole .ec-cartRole__actions {
text-align: right;
width: 100%;
}
@media screen and (max-width: 1020px) {
.ec-cartRole .ec-cartRole__actions {
margin-bottom: 70px;
}
}
@media only screen and (min-width: 1020px) {
.ec-cartRole .ec-cartRole__actions {
width: 30%;
min-width: 256px;
margin-right: 10%;
}
}
.ec-cartRole .ec-cartRole__actions .ec-blockBtn--action {
font-size: 1.6rem;
}
@media only screen and (min-width: 1020px) {
.ec-cartRole .ec-cartRole__actions .ec-blockBtn--action {
margin: 16px 0;
}
}
.ec-cartRole .ec-cartRole__actions .ec-blockBtn--cancel {
font-size: 1.6rem;
height: 43px;
line-height: 43px;
}
.ec-cartRole .ec-cartRole__total {
padding: 15px 0 30px;
font-weight: bold;
font-size: 16px;
}
.ec-cartRole .ec-cartRole__totalAmount {
margin-left: 30px;
color: #df744a;
font-size: 16px;
}
@media only screen and (min-width: 1020px) {
.ec-cartRole .ec-cartRole__totalAmount {
font-size: 24px;
}
}
.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: block;
border-top: 1px dotted #ccc;
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-cartTable {
border-top: none;
}
}
/*
カート商品表示枠（テーブルヘッダ）
カート内の商品を表示するテーブルのヘッダです。
スマホでは非表示となります。
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;
}
@media only screen and (min-width: 1020px) {
.ec-cartHeader {
display: flex;
}
}
.ec-cartHeader .ec-cartHeader__label {
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
text-align: center;
background: #F4F3F0;
overflow-x: hidden;
font-weight: bold;
}
.ec-cartHeader .ec-cartHeader__label:nth-child(1) {
padding-left: 0px;
padding-right: 0px;
flex: 0 0 13%;
max-width: 13%;
}
.ec-cartHeader .ec-cartHeader__label:nth-child(2) {
padding-left: 0px;
padding-right: 0px;
flex: 1 1;
}
.ec-cartHeader .ec-cartHeader__label:nth-child(3) {
padding-left: 0px;
padding-right: 0px;
flex: 0 0 23%;
max-width: 23%;
}
.ec-cartHeader .ec-cartHeader__label:nth-child(4) {
padding-left: 0px;
padding-right: 0px;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
@media only screen and (min-width: 1020px) {
.ec-cartHeader .ec-cartHeader__label:nth-child(1) {
padding-left: 16px;
padding-right: 16px;
max-width: 8.3333333333%;
flex: 0 0 8.3333333333%;
}
.ec-cartHeader .ec-cartHeader__label:nth-child(2) {
padding-left: 16px;
padding-right: 16px;
flex: 1 1;
}
.ec-cartHeader .ec-cartHeader__label:nth-child(3) {
padding-left: 16px;
padding-right: 16px;
max-width: 16.6666666667%;
flex: 0 0 16.6666666667%;
}
.ec-cartHeader .ec-cartHeader__label:nth-child(4) {
padding-left: 16px;
padding-right: 16px;
max-width: 16.6666666667%;
flex: 0 0 16.6666666667%;
}
}
.ec-cartCompleteRole {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
}
.ec-cartCompleteRole:after {
content: " ";
display: table;
}
.ec-cartCompleteRole:after {
clear: both;
}
.ec-cartCompleteRole textarea { /* for chrome fontsize bug */
font-family: sans-serif !important;
}
.ec-cartCompleteRole ul, .ec-cartCompleteRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-cartCompleteRole dl, .ec-cartCompleteRole dt, .ec-cartCompleteRole dd, .ec-cartCompleteRole li {
margin: 0;
padding: 0;
}
.ec-cartCompleteRole img {
max-width: 100%;
}
.ec-cartCompleteRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-cartCompleteRole *,
.ec-cartCompleteRole *::before,
.ec-cartCompleteRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-cartCompleteRole img {
width: 100%;
}
.ec-cartCompleteRole .ec-reportDescription {
text-align: left;
}
/*
カート内商品
カート内のアイテムを表示するテーブル行です。
スマホでは非表示となります。
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: flex;
}
.ec-cartRow .ec-cartRow__delColumn {
border-bottom: 1px dotted #ccc;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
width: 14%;
vertical-align: middle;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__delColumn {
width: 8.3333333%;
}
}
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
width: 1.5em;
height: 1.5em;
margin-right: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
width: 1em;
height: 1em;
margin-right: 0px;
}
}
.ec-cartRow .ec-cartRow__contentColumn {
border-bottom: 1px dotted #ccc;
padding: 10px 0;
display: flex;
align-items: center;
}
.ec-cartRow .ec-cartRow__img {
display: inline-block;
width: 110px;
padding-right: 8px;
vertical-align: middle;
padding-right: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__img {
display: inline-block;
width: 40%;
min-width: 160px;
padding-right: 16px;
}
}
.ec-cartRow .ec-cartRow__img a {
display: block;
}
.ec-cartRow .ec-cartRow__img a:hover {
opacity: 0.8;
}
.ec-cartRow .ec-cartRow__img a img {
border-radius: 10px;
}
.ec-cartRow .ec-cartRow__summary {
display: block;
margin-left: 5px;
font-weight: bold;
vertical-align: middle;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__summary {
display: inline-block;
width: calc(100% - 130px);
margin-left: 20px;
vertical-align: middle;
}
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
margin-bottom: 5px;
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__name a:hover {
color: #9797a1;
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
display: block;
font-weight: normal;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
display: none;
}
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__unitPrice {
color: #df744a;
}
.ec-cartRow .ec-cartRow__amountColumn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 1px dotted #ccc;
vertical-align: middle;
text-align: center;
width: 20%;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__amountColumn {
width: 16.66666667%;
}
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
display: none;
margin-bottom: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
display: block;
}
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
display: block;
margin-bottom: 10px;
font-size: 1.4rem;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
display: none;
font-size: inherit;
}
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
display: flex;
justify-content: center;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
display: block;
}
}
.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: 0.8em;
height: 0.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: 0.8em;
height: 0.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%;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow .ec-cartRow__subtotalColumn {
padding: 16px;
display: flex;
justify-content: center;
align-items: center;
}
}
.ec-cartRow > *:nth-child(1) {
padding-left: 0px;
padding-right: 0px;
flex: 0 0 13%;
max-width: 13%;
}
.ec-cartRow > *:nth-child(2) {
padding-left: 0px;
padding-right: 0px;
flex: 1 1;
}
.ec-cartRow > *:nth-child(3) {
padding-left: 0px;
padding-right: 0px;
flex: 0 0 23%;
max-width: 23%;
}
.ec-cartRow > *:nth-child(4) {
padding-left: 0px;
padding-right: 0px;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
@media only screen and (min-width: 1020px) {
.ec-cartRow > *:nth-child(1) {
padding-left: 16px;
padding-right: 16px;
max-width: 8.3333333333%;
flex: 0 0 8.3333333333%;
}
.ec-cartRow > *:nth-child(2) {
padding-left: 16px;
padding-right: 16px;
flex: 1 1;
}
.ec-cartRow > *:nth-child(3) {
padding-left: 16px;
padding-right: 16px;
max-width: 16.6666666667%;
flex: 0 0 16.6666666667%;
}
.ec-cartRow > *:nth-child(4) {
padding-left: 16px;
padding-right: 16px;
max-width: 16.6666666667%;
flex: 0 0 16.6666666667%;
}
}
/*
カート内商品(商品が１の場合)
商品が１の場合はカート商品を減らす「-」ボタンの無効化状態になります。
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;
margin-bottom: 5px;
}
@media only screen and (min-width: 1020px) {
.ec-alert-warning .ec-alert-warning__icon {
margin-bottom: 0;
}
}
.ec-alert-warning .ec-alert-warning__text {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
position: relative;
line-height: normal;
}
/*
アラート(空)
カートが空であることを示す警告メッセージです。
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: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
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 !important;
}
.ec-orderRole ul, .ec-orderRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-orderRole dl, .ec-orderRole dt, .ec-orderRole dd, .ec-orderRole li {
margin: 0;
padding: 0;
}
.ec-orderRole img {
max-width: 100%;
}
.ec-orderRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-orderRole *,
.ec-orderRole *::before,
.ec-orderRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-orderRole img {
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-orderRole {
margin-top: 20px;
flex-direction: row;
}
}
.ec-orderRole .ec-inlineBtn {
font-weight: normal;
}
.ec-orderRole .ec-orderRole__detail {
padding: 0;
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-orderRole .ec-orderRole__detail {
padding: 0 16px;
width: 66.66666%;
}
}
.ec-orderRole .ec-orderRole__summary {
width: 100%;
}
@media only screen and (max-width: 1019px) {
.ec-orderRole .ec-orderRole__summary {
margin-top: 20px !important;
}
}
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: inline-block;
}
@media only screen and (min-width: 1020px) {
.ec-orderRole .ec-orderRole__summary {
width: 33.33333%;
padding: 0 16px;
}
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: none;
}
}
.ec-orderRole .ec-borderedList {
margin-bottom: 20px;
border-top: 1px dotted #ccc;
}
@media only screen and (min-width: 1020px) {
.ec-orderRole .ec-borderedList {
border-top: none;
}
}
/*
注文履歴詳細 オーダ情報
マイページ 注文履歴詳細部に関する 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;
}
@media only screen and (min-width: 1020px) {
.ec-orderConfirm {
margin-bottom: 0;
}
}
.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;
}
@media only screen and (min-width: 1020px) {
.ec-AddAddress {
margin: 0 10%;
}
}
.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%;
border-radius: 10px;
}
.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%;
}
@media only screen and (min-width: 1020px) {
.ec-AddAddress .ec-AddAddress__selectAddress select {
min-width: 350px;
}
}
.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: #525263;
}
@media only screen and (min-width: 1020px) {
.ec-historyRole .ec-historyRole__contents {
flex-direction: row;
}
}
.ec-historyRole .ec-historyRole__header {
width: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-historyRole .ec-historyRole__header {
width: 33.3333%;
}
}
.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;
}
@media only screen and (min-width: 1020px) {
.ec-historyRole .ec-historyRole__detail {
width: 66.6666%;
border-top: none;
}
}
/*
注文履歴一覧 規格
マイページ 注文履歴内アイテムの規格を定義します。
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: 0.5rem;
font-size: 1.6rem;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
display: inline-block;
padding-left: 0.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;
}
@media only screen and (min-width: 1020px) {
.ec-historyListHeader .ec-historyListHeader__date {
font-weight: bold;
font-size: 20px;
}
}
.ec-historyListHeader .ec-historyListHeader__action {
margin: 16px 0;
}
.ec-historyListHeader .ec-historyListHeader__action a {
font-size: 12px;
font-weight: normal;
}
@media only screen and (min-width: 1020px) {
.ec-historyListHeader .ec-historyListHeader__action a {
font-size: 14px;
}
}
/**
* 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: #0092C4;
text-decoration: none;
cursor: pointer;
}
.ec-orderMail .ec-orderMail__link a:hover {
color: #33A8D0;
}
.ec-orderMail .ec-orderMail__close a {
color: #0092C4;
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: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
}
.ec-forgotRole:after {
content: " ";
display: table;
}
.ec-forgotRole:after {
clear: both;
}
.ec-forgotRole textarea { /* for chrome fontsize bug */
font-family: sans-serif !important;
}
.ec-forgotRole ul, .ec-forgotRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-forgotRole dl, .ec-forgotRole dt, .ec-forgotRole dd, .ec-forgotRole li {
margin: 0;
padding: 0;
}
.ec-forgotRole img {
max-width: 100%;
}
.ec-forgotRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-forgotRole *,
.ec-forgotRole *::before,
.ec-forgotRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
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;
padding: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
}
.ec-registerRole:after {
content: " ";
display: table;
}
.ec-registerRole:after {
clear: both;
}
.ec-registerRole textarea { /* for chrome fontsize bug */
font-family: sans-serif !important;
}
.ec-registerRole ul, .ec-registerRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-registerRole dl, .ec-registerRole dt, .ec-registerRole dd, .ec-registerRole li {
margin: 0;
padding: 0;
}
.ec-registerRole img {
max-width: 100%;
}
.ec-registerRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-registerRole *,
.ec-registerRole *::before,
.ec-registerRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-registerRole img {
width: 100%;
}
.ec-registerRole .ec-registerRole__actions {
padding-top: 20px;
text-align: center;
}
@media only screen and (min-width: 1020px) {
.ec-registerRole .ec-registerRole__actions {
text-align: left;
}
}
.ec-registerRole .ec-registerRole__actions p {
margin-bottom: 16px;
}
.ec-registerRole .ec-blockBtn--action {
margin-bottom: 16px;
}
.ec-registerRole dl {
padding: 8px 0;
}
@media only screen and (min-width: 1020px) {
.ec-registerRole dl {
padding: inherit;
}
}
.ec-registerRole .ec-label {
font-weight: bold;
}
.ec-registerCompleteRole {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
}
.ec-registerCompleteRole:after {
content: " ";
display: table;
}
.ec-registerCompleteRole:after {
clear: both;
}
.ec-registerCompleteRole textarea { /* for chrome fontsize bug */
font-family: sans-serif !important;
}
.ec-registerCompleteRole ul, .ec-registerCompleteRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-registerCompleteRole dl, .ec-registerCompleteRole dt, .ec-registerCompleteRole dd, .ec-registerCompleteRole li {
margin: 0;
padding: 0;
}
.ec-registerCompleteRole img {
max-width: 100%;
}
.ec-registerCompleteRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-registerCompleteRole *,
.ec-registerCompleteRole *::before,
.ec-registerCompleteRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-registerCompleteRole img {
width: 100%;
}
button, input, optgroup, select, textarea {
font-family: inherit !important;
}
/**
メディアクエリ
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 .ec-contactRole__actions {
padding-top: 20px;
}
.ec-contactRole p {
margin: 16px 0;
}
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
padding-top: 20px;
}
.ec-contactConfirmRole .ec-blockBtn--action {
margin-bottom: 16px;
}
/**
メディアクエリ
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: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
}
.ec-customerRole:after {
content: " ";
display: table;
}
.ec-customerRole:after {
clear: both;
}
.ec-customerRole textarea { /* for chrome fontsize bug */
font-family: sans-serif !important;
}
.ec-customerRole ul, .ec-customerRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-customerRole dl, .ec-customerRole dt, .ec-customerRole dd, .ec-customerRole li {
margin: 0;
padding: 0;
}
.ec-customerRole img {
max-width: 100%;
}
.ec-customerRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-customerRole *,
.ec-customerRole *::before,
.ec-customerRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-customerRole img {
width: 100%;
}
.ec-customerRole .ec-customerRole__actions {
padding-top: 20px;
}
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 10px;
}
@media only screen and (min-width: 1020px) {
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 16px;
}
}
.ec-contactConfirmRole {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
}
.ec-contactConfirmRole:after {
content: " ";
display: table;
}
.ec-contactConfirmRole:after {
clear: both;
}
.ec-contactConfirmRole textarea { /* for chrome fontsize bug */
font-family: sans-serif !important;
}
.ec-contactConfirmRole ul, .ec-contactConfirmRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-contactConfirmRole dl, .ec-contactConfirmRole dt, .ec-contactConfirmRole dd, .ec-contactConfirmRole li {
margin: 0;
padding: 0;
}
.ec-contactConfirmRole img {
max-width: 100%;
}
.ec-contactConfirmRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
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: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
}
.ec-contactCompleteRole:after {
content: " ";
display: table;
}
.ec-contactCompleteRole:after {
clear: both;
}
.ec-contactCompleteRole textarea { /* for chrome fontsize bug */
font-family: sans-serif !important;
}
.ec-contactCompleteRole ul, .ec-contactCompleteRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-contactCompleteRole dl, .ec-contactCompleteRole dt, .ec-contactCompleteRole dd, .ec-contactCompleteRole li {
margin: 0;
padding: 0;
}
.ec-contactCompleteRole img {
max-width: 100%;
}
.ec-contactCompleteRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
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 {
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-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 !important;
}
.ec-404Role ul, .ec-404Role ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-404Role dl, .ec-404Role dt, .ec-404Role dd, .ec-404Role li {
margin: 0;
padding: 0;
}
.ec-404Role img {
max-width: 100%;
}
.ec-404Role html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-404Role *,
.ec-404Role *::before,
.ec-404Role *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
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: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
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 !important;
}
.ec-withdrawRole ul, .ec-withdrawRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-withdrawRole dl, .ec-withdrawRole dt, .ec-withdrawRole dd, .ec-withdrawRole li {
margin: 0;
padding: 0;
}
.ec-withdrawRole img {
max-width: 100%;
}
.ec-withdrawRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-withdrawRole *,
.ec-withdrawRole *::before,
.ec-withdrawRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
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;
}
#page_mypage_withdraw_complete .ec-off4Grid .ec-off4Grid__cell {
flex-basis: 70%;
max-width: 70%;
margin-left: 15%;
}
@media screen and (max-width: 767px) {
#page_mypage_withdraw_complete .ec-off4Grid .ec-off4Grid__cell {
flex-basis: 100%;
max-width: 100%;
margin-left: 0;
}
}
/**
メディアクエリ
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: 0;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: inherit;
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 !important;
}
.ec-userEditCompleteRole ul, .ec-userEditCompleteRole ol {
list-style: none;
margin: 0;
padding: 0;
}
.ec-userEditCompleteRole dl, .ec-userEditCompleteRole dt, .ec-userEditCompleteRole dd, .ec-userEditCompleteRole li {
margin: 0;
padding: 0;
}
.ec-userEditCompleteRole img {
max-width: 100%;
}
.ec-userEditCompleteRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ec-userEditCompleteRole *,
.ec-userEditCompleteRole *::before,
.ec-userEditCompleteRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
.ec-userEditCompleteRole img {
width: 100%;
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
margin-bottom: 16px;
font-weight: bold;
font-size: 24px;
}
@media only screen and (min-width: 1020px) {
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
font-size: 32px;
}
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
margin-bottom: 32px;
font-size: 16px;
}
/**
メディアクエリ
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;
}
.ec-newArrival {
background: url(../img/common/bg_gray.png);
margin: 0 0 20px 0;
padding: 20px 0 40px 0;
width: 100%;
max-width: inherit;
}
.ec-newArrival .ec-newArrival__wrapper {
margin: 0 auto;
width: 100%;
max-width: inherit;
}
@media only screen and (min-width: 1020px) {
.ec-newArrival .ec-newArrival__wrapper {
width: 1020px;
}
}
.ec-newArrival .ec-newArrival__title {
background: url(../img/common/tit_line_01.png) repeat-x bottom;
text-align: center;
margin: 0 auto 27px;
padding: 5px 0 10px 0;
width: 97%;
}
@media only screen and (min-width: 1020px) {
.ec-newArrival .ec-newArrival__title {
margin: 0 0 27px 0;
padding: 5px 0 15px 0;
width: 100%;
}
}
.ec-newArrival .ec-newArrival__title img {
width: 157px;
}
.ec-newArrival .ec-newArrival__list {
position: relative;
margin: 0 auto 50px;
padding: 0 8px;
width: 100%;
}
.ec-newArrival .ec-newArrival__list .slick-track {
min-width: 100%;
}
.ec-newArrival .ec-newArrival__list .slick-prev,
.ec-newArrival .ec-newArrival__list .slick-next {
width: 30px;
height: 30px;
background: #626265;
background-size: 90%;
border-radius: 50%;
}
.ec-newArrival .ec-newArrival__list .slick-prev:before,
.ec-newArrival .ec-newArrival__list .slick-next:before {
content: "";
display: inline-block;
background-size: contain;
vertical-align: middle;
}
.ec-newArrival .ec-newArrival__list .slick-prev:hover,
.ec-newArrival .ec-newArrival__list .slick-next:hover {
background: #626265;
}
.ec-newArrival .ec-newArrival__list .slick-prev {
left: -4%;
}
.ec-newArrival .ec-newArrival__list .slick-prev:before {
width: 7px;
height: 17px;
margin: 4px 3px 0 0;
background: url(../img/common/arrow_01.png) no-repeat;
}
.ec-newArrival .ec-newArrival__list .slick-next {
right: -4%;
}
.ec-newArrival .ec-newArrival__list .slick-next:before {
width: 7px;
height: 18px;
margin: 5px 0 0 3px;
background: url(../img/common/arrow_02.png) no-repeat;
}
.ec-newArrival .ec-newArrival__list .slick-dots {
position: absolute;
bottom: -25px;
display: block;
padding: 0;
margin: 0;
}
.ec-newArrival .ec-newArrival__list .slick-dots li.slick-active button:before {
opacity: 0.75;
}
.ec-newArrival .ec-newArrival__list .slick-list {
width: 100% !important;
}
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem {
margin: 5px;
padding: 0;
height: 100%;
}
@media only screen and (min-width: 1020px) {
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem a {
display: block;
}
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem a img {
width: 100%;
height: auto;
margin: 0 0 15px;
border-radius: 10px;
}
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem a p {
display: none;
}
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem a dl {
margin-bottom: 0;
}
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem a .item_name {
font-weight: normal;
text-align: center;
}
.ec-newArrival .ec-newArrival__list .ec-newArrival__listItem a .item_price {
font-weight: bold;
color: #df744a;
text-align: center;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-rankingRole {
padding: 0 1%;
margin-bottom: 70px;
}
@media only screen and (min-width: 1020px) {
.ec-rankingRole {
width: 1020px;
margin: auto;
padding: 0;
}
}
.ec-rankingRole .ec-rankingRole__title {
background: url(../img/common/tit_line_01.png) repeat-x bottom;
text-align: center;
margin: 0 0 27px 0;
padding: 5px 0 15px 0;
}
.ec-rankingRole .ec-rankingRole__title img {
width: 117px;
}
.ec-rankingRole .ec-rankingRole__list {
list-style: none;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
.ec-rankingRole .ec-rankingRole__list {
justify-content: space-between;
}
}
.ec-rankingRole .ec-rankingRole__listItem {
margin: 0 0 10px 0;
text-align: center;
min-width: 0;
flex-basis: 32%;
}
.ec-rankingRole .ec-rankingRole__listItem:nth-child(-n+4) {
flex-basis: 48%;
}
@media only screen and (min-width: 768px) {
.ec-rankingRole .ec-rankingRole__listItem {
flex-basis: 16%;
}
.ec-rankingRole .ec-rankingRole__listItem:nth-child(-n+4) {
flex-basis: 23.5%;
}
}
.ec-rankingRole .ec-rankingRole__listItem a {
display: block;
}
@media only screen and (min-width: 1020px) {
.ec-rankingRole .ec-rankingRole__listItem a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-rankingRole .ec-rankingRole__listItem a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-rankingRole .ec-rankingRole__itemRank {
width: 30%;
margin: 0 auto 10px;
}
.ec-rankingRole .ec-rankingRole__itemRank img {
max-height: 20px;
}
.ec-rankingRole .ec-rankingRole__itemPhoto {
margin: 0 0 15px;
}
.ec-rankingRole .ec-rankingRole__itemPhoto img {
border-radius: 10px;
width: 100%;
}
.ec-rankingRole .ec-rankingRole__itemName {
font-weight: inherit;
}
.ec-rankingRole .ec-rankingRole__itemPrice {
color: #df744a;
font-weight: bold;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-pickupRole {
margin: 0;
padding: 20px 0 40px 0;
width: 100%;
max-width: inherit;
}
.ec-pickupRole .ec-pickupRole__wrapper {
margin: 0 auto;
width: 100%;
max-width: inherit;
}
.ec-pickupRole .ec-pickupRole__title {
background: url(../img/common/tit_line_01.png) repeat-x bottom;
text-align: center;
margin: 0 auto 27px;
padding: 5px 0 10px 0;
width: 97%;
}
@media only screen and (min-width: 1020px) {
.ec-pickupRole .ec-pickupRole__title {
margin: 0 0 27px 0;
padding: 5px 0 15px 0;
}
}
.ec-pickupRole .ec-pickupRole__title img {
width: 112px;
}
.ec-pickupRole .ec-pickupRole__list:after {
content: " ";
display: table;
}
.ec-pickupRole .ec-pickupRole__list:after {
clear: both;
}
.ec-pickupRole .ec-pickupRole__list ul,
.ec-pickupRole .ec-pickupRole__list li {
list-style: none;
margin: 0;
padding-left: 8px;
padding-right: 8px;
}
.ec-pickupRole .ec-pickupRole__list ul a,
.ec-pickupRole .ec-pickupRole__list li a {
display: block;
}
@media only screen and (min-width: 1020px) {
.ec-pickupRole .ec-pickupRole__list ul a,
.ec-pickupRole .ec-pickupRole__list li a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-pickupRole .ec-pickupRole__list ul a:hover,
.ec-pickupRole .ec-pickupRole__list li a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-pickupRole .ec-pickupRole__list ul img,
.ec-pickupRole .ec-pickupRole__list li img {
width: 100%;
height: auto;
}
.ec-pickupRole .ec-pickupRole__list li {
padding: 2%;
}
@media screen and (min-width: 1020px) {
#page_homepage .ec-pickupRole {
background: url(../img/common/bg_gray.png);
}
#page_homepage .ec-pickupRole .ec-pickupRole__wrapper {
width: 1020px;
}
#page_homepage .ec-pickupRole .ec-pickupRole__title {
width: 1020px;
}
.ec-layoutRole__left .ec-pickupRole {
padding: 4% 18.6%;
}
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-guideRole {
background: white;
margin: 0 0 20px 0;
padding: 20px 0 40px 0;
width: 100%;
max-width: inherit;
}
.ec-guideRole .ec-guideRole__wrapper {
margin: 0 auto;
width: 100%;
max-width: inherit;
}
@media only screen and (min-width: 1020px) {
.ec-guideRole .ec-guideRole__wrapper {
width: 1020px;
}
}
.ec-guideRole .ec-guideRole__title {
background: url(../img/common/tit_line_01.png) repeat-x bottom;
text-align: center;
margin: 0 auto 27px;
padding: 5px 0 10px 0;
width: 97%;
}
@media only screen and (min-width: 1020px) {
.ec-guideRole .ec-guideRole__title {
margin: 0 0 27px 0;
padding: 5px 0 15px 0;
width: 1020px;
}
}
.ec-guideRole .ec-guideRole__title img {
width: 86px;
}
.ec-guideRole .ec-guideRole__list {
list-style: none;
width: 98%;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
}
.ec-guideRole .ec-guideRole__listItem {
flex-basis: 48%;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-guideRole .ec-guideRole__listItem {
flex-basis: calc(25% - 5px);
}
}
.ec-guideRole .ec-guideRole__listItem:not(:last-child) {
border-right: 1px solid #e0e0e0;
}
.ec-guideRole .ec-guideRole__listItem:nth-child(2n):not(:last-child) {
border-right: none;
}
@media only screen and (min-width: 768px) {
.ec-guideRole .ec-guideRole__listItem:nth-child(2n):not(:last-child) {
border-right: 1px solid #e0e0e0;
}
}
.ec-guideRole .ec-guideRole__listItem:nth-child(-n+2) {
border-bottom: 1px solid #e0e0e0;
}
@media only screen and (min-width: 768px) {
.ec-guideRole .ec-guideRole__listItem:nth-child(-n+2) {
border-bottom: none;
}
}
.ec-guideRole .ec-guideRole__listItem a {
display: block;
padding: 10% 0 70%;
}
@media only screen and (min-width: 768px) {
.ec-guideRole .ec-guideRole__listItem a {
padding: 3% 0 46%;
}
}
@media only screen and (min-width: 768px) and (min-width: 1020px) {
.ec-guideRole .ec-guideRole__listItem a {
transition-duration: 0.3s;
transition-property: transform;
}
.ec-guideRole .ec-guideRole__listItem a:hover {
transform: translateY(-5px);
color: inherit;
}
}
.ec-guideRole .ec-guideRole__listItem:nth-child(1) a {
background: url(../img/common/btn_guide_01.svg) no-repeat center 80%/50%;
}
@media only screen and (min-width: 768px) {
.ec-guideRole .ec-guideRole__listItem:nth-child(1) a {
background: url(../img/common/btn_guide_01.svg) no-repeat center 80%/40%;
}
}
.ec-guideRole .ec-guideRole__listItem:nth-child(2) a {
background: url(../img/common/btn_guide_02.svg) no-repeat center 80%/50%;
}
@media only screen and (min-width: 768px) {
.ec-guideRole .ec-guideRole__listItem:nth-child(2) a {
background: url(../img/common/btn_guide_02.svg) no-repeat center 80%/40%;
}
}
.ec-guideRole .ec-guideRole__listItem:nth-child(3) a {
background: url(../img/common/btn_guide_03.svg) no-repeat center 80%/50%;
}
@media only screen and (min-width: 768px) {
.ec-guideRole .ec-guideRole__listItem:nth-child(3) a {
background: url(../img/common/btn_guide_03.svg) no-repeat center 80%/40%;
}
}
.ec-guideRole .ec-guideRole__listItem:nth-child(4) a {
background: url(../img/common/btn_guide_04.svg) no-repeat center 80%/50%;
}
@media only screen and (min-width: 768px) {
.ec-guideRole .ec-guideRole__listItem:nth-child(4) a {
background: url(../img/common/btn_guide_04.svg) no-repeat center 80%/40%;
}
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-shoppingLoginRole .ec-grid3 {
display: block;
}
@media only screen and (min-width: 768px) {
.ec-shoppingLoginRole .ec-grid3 {
display: flex;
}
}
@media only screen and (min-width: 768px) {
.ec-shoppingLoginRole .ec-grid3__cell2 {
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
}
@media only screen and (min-width: 768px) {
.ec-shoppingLoginRole .ec-grid3__cell {
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
}
@media only screen and (min-width: 768px) {
.ec-shoppingLoginRole .ec-login {
margin: 0 16px;
padding: 30px 13% 60px;
}
}
/**
* plgProductReview
*
* 商品レビュープラグイン(ProductReview: https://github.com/EC-CUBE/ProductReview-plugin)
* のデフォルトスタイルを上書きします。
* Ver.4.0.1に対応しています
*/
#product_review_area {
border-top: none !important;
}
#product_review_area .recommend_name {
margin-right: 0.5em;
}
@media only screen and (min-width: 1020px) {
#product_review_area .review_date + p {
margin-left: 6em;
}
}
#product_review_area .ec-inlineBtn--action {
color: #242221 !important;
display: block;
background: #fedcd2;
width: 40%;
text-align: center;
padding: 10px 0;
border-radius: 5px;
border: none;
margin: 20px 0 20px 0;
font-weight: normal;
}
@media only screen and (min-width: 1020px) {
#product_review_area .ec-inlineBtn--action {
width: 15%;
}
}
@media only screen and (min-width: 1020px) and (min-width: 1020px) {
#product_review_area .ec-inlineBtn--action {
transition-duration: 0.3s;
transition-property: transform;
}
#product_review_area .ec-inlineBtn--action:hover {
transform: translateY(-5px);
color: inherit;
}
}
#product_review_area #reviewContent > p {
padding: 20px 0 40px;
text-align: center;
}
#product_review_area .ec-rectHeading h4 {
font-size: 1.5rem;
}
#product_review_area .review_list {
padding-left: 0.75em !important;
}
@media only screen and (min-width: 1020px) {
#product_review_area .review_list {
padding-left: 1em !important;
}
}
#product_review_area .review_list li {
list-style: none;
}
#product_review_comment {
font-family: inherit !important;
}
/**
* plgRelatedProduct
*
* 関連商品プラグイン(RelatedProduct: https://github.com/EC-CUBE/related-product-plugin)
* のデフォルトスタイルを上書きします。
* Ver.4.0.1に対応しています
*/
#RelatedProduct-product_area .ec-shelfGrid .ec-shelfGrid__item {
flex-basis: auto;
max-width: 100%;
}
@media only screen and (min-width: 768px) {
#RelatedProduct-product_area .ec-shelfGrid .ec-shelfGrid__item {
flex-basis: auto;
max-width: 100%;
}
}
/*# sourceMappingURL=style.css.map */