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: -.5em;
margin-left: -.5em;
width: 1em;
height: 1em;
position: absolute;
top: 50%;
left: 50%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
その他のボタン
通常のボタンや、アイコンボタン以外のボタンを定義します。
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: 120px;
height: 40px;
right: 0;
bottom: 10px;
cursor: pointer;
color: #FFFFFF;
text-align: center;
line-height: 40px;
opacity: 0.8;
background-color: #9da3a9;
border-radius: 20px; }
@media only screen and (min-width: 768px) {
.ec-blockTopBtn {
right: 30px;
bottom: 30px; } }
/**
メディアクエリ
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="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal; }
.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] {
display: block; }
.ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] {
display: block;
width: 100%; }
.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
height: auto; }
.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
display: block;
width: 100%;
height: 1rem px12px2 px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857142;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
background-image: none;
border: 1px solid #ccc;
border-radius: var(--bs-border-radius);
-webkit-appearance: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
transition: none; } }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
border-color: #66afe9;
outline: 0; }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
color: #999; }
.ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
color: #999; }
.ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-birth input {
opacity: 1; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-birth input {
cursor: not-allowed; }
@media only screen and (min-width: 768px) {
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
font-size: 0.875rem; } }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
display: block;
width: 100%;
height: 1rem px12px2 px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857142;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
background-image: none;
border: 1px solid #ccc;
border-radius: var(--bs-border-radius);
-webkit-appearance: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
transition: none; } }
.ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
border-color: #66afe9;
outline: 0; }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
color: #999; }
.ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
color: #999; }
.ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-birth select {
opacity: 1; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-birth select {
cursor: not-allowed; }
@media only screen and (min-width: 768px) {
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
font-size: 0.875rem; } }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
display: block;
width: 100%;
height: 1rem px12px2 px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857142;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
background-image: none;
border: 1px solid #ccc;
border-radius: var(--bs-border-radius);
-webkit-appearance: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
transition: none; } }
.ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
border-color: #66afe9;
outline: 0; }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
color: #999; }
.ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
color: #999; }
.ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-birth textarea {
opacity: 1; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-birth textarea {
cursor: not-allowed; }
@media only screen and (min-width: 768px) {
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
font-size: 0.875rem; } }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
box-shadow: none;
border-color: #3c8dbc; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
height: 40px;
margin-bottom: 10px; }
@media only screen and (min-width: 768px) {
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
margin-bottom: 16px; } }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
height: auto;
min-height: 100px; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select, .error.ec-input textarea, .error.ec-halfInput textarea, .error.ec-numberInput textarea, .error.ec-zipInput textarea, .error.ec-telInput textarea, .error.ec-select textarea, .error.ec-birth textarea {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0; }
.ec-checkbox .ec-errorMessage, .ec-radio .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-checkbox input, .error.ec-checkbox label, .error.ec-checkbox div, .error.ec-radio input, .error.ec-radio label, .error.ec-radio div {
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: 768px) {
.ec-halfInput input[type='text'] {
margin-left: 15px;
width: 45%; } }
.ec-halfInput .ec-errorMessage {
display: inline-block;
width: 47%; }
@media only screen and (min-width: 768px) {
.ec-halfInput .ec-errorMessage {
margin-left: 15px;
width: 45%; } }
.ec-halfInput input[type='text']:first-of-type,
.ec-halfInput .ec-errorMessage:first-of-type {
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: 9em;
font-size: 16px; }
.ec-zipInput span {
display: inline-block;
padding: 0 5px 0 3px;
margin-left: 5px; }
.ec-zipInputHelp {
display: inline-block;
margin-left: 10px;
margin-bottom: 16px;
vertical-align: baseline;
line-height: 0; }
.ec-zipInputHelp .ec-zipInputHelp__icon {
display: inline-block;
margin-top: -10px;
width: 20px;
height: 20px;
background: #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: 12em;
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="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal; }
.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] {
display: block; }
.ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] {
display: block;
width: 100%; }
.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
height: auto; }
.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
display: block;
width: 100%;
height: 1rem px12px2 px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857142;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
background-image: none;
border: 1px solid #ccc;
border-radius: var(--bs-border-radius);
-webkit-appearance: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
transition: none; } }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
border-color: #66afe9;
outline: 0; }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
color: #999; }
.ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
color: #999; }
.ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-birth input {
opacity: 1; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-birth input {
cursor: not-allowed; }
@media only screen and (min-width: 768px) {
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
font-size: 0.875rem; } }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
display: block;
width: 100%;
height: 1rem px12px2 px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857142;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
background-image: none;
border: 1px solid #ccc;
border-radius: var(--bs-border-radius);
-webkit-appearance: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
transition: none; } }
.ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
border-color: #66afe9;
outline: 0; }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
color: #999; }
.ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
color: #999; }
.ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-birth select {
opacity: 1; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-birth select {
cursor: not-allowed; }
@media only screen and (min-width: 768px) {
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
font-size: 0.875rem; } }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
display: block;
width: 100%;
height: 1rem px12px2 px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857142;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
background-image: none;
border: 1px solid #ccc;
border-radius: var(--bs-border-radius);
-webkit-appearance: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
transition: none; } }
.ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
border-color: #66afe9;
outline: 0; }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
color: #999; }
.ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
color: #999; }
.ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-birth textarea {
opacity: 1; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-birth textarea {
cursor: not-allowed; }
@media only screen and (min-width: 768px) {
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
font-size: 0.875rem; } }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
box-shadow: none;
border-color: #3c8dbc; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
height: 40px;
margin-bottom: 10px; }
@media only screen and (min-width: 768px) {
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
margin-bottom: 16px; } }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
height: auto;
min-height: 100px; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select, .error.ec-input textarea, .error.ec-halfInput textarea, .error.ec-numberInput textarea, .error.ec-zipInput textarea, .error.ec-telInput textarea, .error.ec-select textarea, .error.ec-birth textarea {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0; }
.ec-checkbox .ec-errorMessage, .ec-radio .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-checkbox input, .error.ec-checkbox label, .error.ec-checkbox div, .error.ec-radio input, .error.ec-radio label, .error.ec-radio div {
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: 768px) {
.ec-halfInput input[type='text'] {
margin-left: 15px;
width: 45%; } }
.ec-halfInput .ec-errorMessage {
display: inline-block;
width: 47%; }
@media only screen and (min-width: 768px) {
.ec-halfInput .ec-errorMessage {
margin-left: 15px;
width: 45%; } }
.ec-halfInput input[type='text']:first-of-type,
.ec-halfInput .ec-errorMessage:first-of-type {
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: 9em;
font-size: 16px; }
.ec-zipInput span {
display: inline-block;
padding: 0 5px 0 3px;
margin-left: 5px; }
.ec-zipInputHelp {
display: inline-block;
margin-left: 10px;
margin-bottom: 16px;
vertical-align: baseline;
line-height: 0; }
.ec-zipInputHelp .ec-zipInputHelp__icon {
display: inline-block;
margin-top: -10px;
width: 20px;
height: 20px;
background: #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: 12em;
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 div {
display: inline-block; }
.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: #f8f8f8;
-webkit-appearance: menulist;
-moz-appearance: menulist; }
.ec-select select:focus {
box-shadow: none; }
.ec-select label {
margin-right: 10px;
font-weight: bold; }
.ec-select label:nth-child(3) {
margin-left: 10px;
font-weight: bold; }
.ec-select__delivery {
display: block;
margin-right: 16px; }
@media only screen and (min-width: 768px) {
.ec-select__delivery {
display: inline-block; } }
.ec-select__time {
display: block; }
@media only screen and (min-width: 768px) {
.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: #f8f8f8;
-webkit-appearance: menulist;
-moz-appearance: menulist; }
.ec-birth select:focus {
box-shadow: none; }
@media only screen and (min-width: 768px) {
.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;
margin-bottom: 5px;
font-weight: 700; }
.ec-checkbox input {
margin-bottom: 10px; }
.ec-checkbox span {
font-weight: normal; }
/*
チェックボックス (垂直)
垂直に並ぶチェックボックス フィールドです。
各要素をlabelでくくって、コーディングします。
Markup:
.ec-blockCheckbox
label
input(type="checkbox")
span 利用規約に同意する
Styleguide 3.2.7
*/
.ec-blockCheckbox label {
display: block; }
.ec-blockCheckbox span {
font-weight: normal; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
フォームラベル
フォームのラベルに関する要素を定義します。
sg-wrapper:
Styleguide 3.3
*/
/*
ラベル
フォーム要素で利用するラベル要素です。
ex [お問い合わせページ ラベル部分](http://demo3.ec-cube.net/contact)
Markup:
.ec-borderedDefs
dl
dt
label.ec-label お名前
dd
.ec-input
input(type="text")
Styleguide 3.3.1
*/
.ec-label {
display: inline-block;
font-weight: bold;
margin-bottom: 5px; }
/*
必須ラベル
必須文字を表示するラベル要素です。
ex [お問い合わせページ 必須ラベル部分](http://demo3.ec-cube.net/contact)
Markup:
.ec-borderedDefs
dl
dt
label.ec-label お名前
span.ec-required 必須
dd
.ec-input
input(type="text")
Styleguide 3.3.2
*/
.ec-required {
display: inline-block;
margin-left: .8em;
vertical-align: 2px;
color: #DE5D50;
font-size: 12px;
font-weight: normal; }
@media only screen and (min-width: 768px) {
.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; }
/**
メディアクエリ
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 {
display: block;
margin: 0; }
@media only screen and (min-width: 768px) {
.ec-grid2 {
display: flex; } }
.ec-grid2 .ec-grid2__cell {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid2 .ec-grid2__cell {
width: 50%; } }
.ec-grid2 .ec-grid2__cell2 {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid2 .ec-grid2__cell2 {
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: 768px) {
.ec-grid3 {
display: flex; } }
.ec-grid3 .ec-grid3__cell {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid3 .ec-grid3__cell {
width: 33.3333333333%; } }
.ec-grid3 .ec-grid3__cell2 {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid3 .ec-grid3__cell2 {
width: 66.6666666667%; } }
.ec-grid3 .ec-grid3__cell3 {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid3 .ec-grid3__cell3 {
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: 768px) {
.ec-grid4 {
display: flex; } }
.ec-grid4 .ec-grid4__cell {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid4 .ec-grid4__cell {
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: 768px) {
.ec-grid6 {
display: flex; } }
.ec-grid6 .ec-grid6__cell {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid6 .ec-grid6__cell {
width: 16.6666666667%; } }
.ec-grid6 .ec-grid6__cell2 {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid6 .ec-grid6__cell2 {
width: 33.3333333333%; } }
.ec-grid6 .ec-grid6__cell3 {
position: relative;
min-height: 1px; }
@media (min-width: 768px) {
.ec-grid6 .ec-grid6__cell3 {
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: 768px) {
.ec-off1Grid {
display: block;
margin: 0; } }
@media only screen and (min-width: 768px) and (min-width: 768px) {
.ec-off1Grid {
display: flex; } }
.ec-off1Grid .ec-off1Grid__cell {
margin: 0; }
@media only screen and (min-width: 768px) {
.ec-off1Grid .ec-off1Grid__cell {
position: relative;
min-height: 1px;
margin-left: 8.3333333333%; } }
@media only screen and (min-width: 768px) and (min-width: 768px) {
.ec-off1Grid .ec-off1Grid__cell {
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: 768px) {
.ec-off2Grid {
display: flex; } }
.ec-off2Grid .ec-off2Grid__cell {
margin: 0; }
@media only screen and (min-width: 768px) {
.ec-off2Grid .ec-off2Grid__cell {
position: relative;
min-height: 1px;
margin-left: 16.6666666667%; } }
@media only screen and (min-width: 768px) and (min-width: 768px) {
.ec-off2Grid .ec-off2Grid__cell {
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: 768px) {
.ec-off3Grid {
display: flex; } }
.ec-off3Grid .ec-off3Grid__cell {
margin: 0; }
@media only screen and (min-width: 768px) {
.ec-off3Grid .ec-off3Grid__cell {
position: relative;
min-height: 1px;
margin-left: 25%; } }
@media only screen and (min-width: 768px) and (min-width: 768px) {
.ec-off3Grid .ec-off3Grid__cell {
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: 768px) {
.ec-off4Grid {
display: flex; } }
.ec-off4Grid .ec-off4Grid__cell {
margin: 0; }
@media only screen and (min-width: 768px) {
.ec-off4Grid .ec-off4Grid__cell {
position: relative;
min-height: 1px;
margin-left: 33.3333333333%; } }
@media only screen and (min-width: 768px) and (min-width: 768px) {
.ec-off4Grid .ec-off4Grid__cell {
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: 768px) {
.ec-imageGrid .ec-imageGrid__img {
padding: 10px;
width: 130px; } }
.ec-imageGrid .ec-imageGrid__img img {
width: 100%; }
.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: 768px) {
.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: 768px) {
.ec-login .ec-login__link {
margin-left: 20px; } }
.ec-login .ec-errorMessage {
color: #DE5D50;
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: 768px) {
.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: 768px) {
.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: 768px) {
.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: .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: 768px) {
.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: .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: 768px) {
.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: 768px) {
.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: .8; }
.ec-displayD .ec-displayD__img {
display: block;
width: 100%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
検索・一覧表示
検索欄や、一覧表示に使用するスタイル群です。
sg-wrapper:
Styleguide 7.2
*/
/*
トピックパス
検索結果で表示されるトピックパスのスタイルです。
ex [商品一覧ページ 横並びリスト部分](http://demo3.ec-cube.net/products/list?category_id=&name=)
Markup:
include /assets/tmpl/elements/7.2.search.pug
+ec-topicpath
Styleguide 7.2.1
*/
.ec-topicpath {
letter-spacing: -.4em;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
border-top: 1px solid #ccc;
border-bottom: 1px dotted #ccc;
padding: 10px;
list-style: none;
overflow: hidden;
font-size: 12px;
color: #0092C4; }
@media only screen and (min-width: 768px) {
.ec-topicpath {
padding: 30px 0 10px;
border: 0;
font-size: 16px; } }
.ec-topicpath .ec-topicpath__item a {
color: inherit;
text-decoration: none; }
.ec-topicpath .ec-topicpath__item a:hover {
text-decoration: none; }
.ec-topicpath .ec-topicpath__divider {
color: #000; }
.ec-topicpath .ec-topicpath__item, .ec-topicpath .ec-topicpath__divider, .ec-topicpath .ec-topicpath__item--active {
display: inline-block;
min-width: 16px;
text-align: center;
position: relative;
letter-spacing: normal; }
.ec-topicpath .ec-topicpath__item--active {
font-weight: bold; }
.ec-topicpath .ec-topicpath__item--active a {
color: inherit;
text-decoration: none; }
.ec-topicpath .ec-topicpath__item--active a:hover {
text-decoration: none; }
/*
ページャ
検索結果で表示される商品一覧のスタイルです。
ex [商品一覧ページ ページャ部分](http://demo3.ec-cube.net/products/list?category_id=&name=)
Markup:
include /assets/tmpl/elements/7.2.search.pug
+ec-pager
Styleguide 7.2.2
*/
.ec-pager {
list-style: none;
list-style-type: none;
margin: 0 auto;
padding: 1em 0;
text-align: center; }
.ec-pager .ec-pager__item, .ec-pager .ec-pager__item--active {
display: inline-block;
min-width: 29px;
padding: 0 3px 0 2px;
text-align: center;
position: relative; }
.ec-pager .ec-pager__item a, .ec-pager .ec-pager__item--active a {
color: inherit;
text-decoration: none; }
.ec-pager .ec-pager__item a:hover, .ec-pager .ec-pager__item--active a:hover {
text-decoration: none; }
.ec-pager .ec-pager__item a, .ec-pager .ec-pager__item--active a {
color: inherit;
display: block;
line-height: 1.8;
padding: 5px 1em;
text-decoration: none; }
.ec-pager .ec-pager__item a:hover, .ec-pager .ec-pager__item--active a:hover {
color: inherit; }
.ec-pager .ec-pager__item--active {
background: #F3F3F3; }
.ec-pager .ec-pager__item:hover {
background: #F3F3F3; }
/**
メディアクエリ
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;
padding: 8px 0 16px;
display: table;
table-layout: fixed;
width: 100%;
max-width: 600px;
list-style: none; }
@media only screen and (min-width: 768px) {
.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; }
.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: 768px) {
.ec-progress .ec-progress__number {
line-height: 42px;
width: 42px;
height: 42px;
font-size: 20px; } }
.ec-progress .ec-progress__label {
font-size: 12px; }
.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
*/
@media only screen and (min-width: 768px) {
.ec-cartNaviWrap {
position: relative; } }
.ec-cartNavi {
display: inline-block;
padding: 10px 0 0 20px;
width: auto;
color: black;
background: transparent; }
@media only screen and (min-width: 768px) {
.ec-cartNavi {
display: flex;
justify-content: space-between;
border-radius: 99999px;
box-sizing: border-box;
padding: 12px 17px 10px;
width: auto;
min-width: 140px;
height: 44px;
white-space: nowrap;
cursor: pointer;
/*background: #F8F8F8;*/ } }
.ec-cartNavi .ec-cartNavi__icon {
display: inline-block;
font-size: 20px;
display: inline-block;
opacity: 1;
visibility: visible;
animation: fadeIn 200ms linear 0s;
position: relative; }
.ec-cartNavi .ec-cartNavi__badge {
display: inline-block;
border-radius: 99999px;
box-sizing: border-box;
padding: 5px;
height: 17px;
font-size: 10px;
line-height: 0.7;
vertical-align: top;
color: #fff;
text-align: left;
white-space: nowrap;
background-color: #DE5D50;
position: absolute;
left: 60%;
top: -10px; }
@media only screen and (min-width: 768px) {
.ec-cartNavi .ec-cartNavi__badge {
display: inline-block;
min-width: 17px;
position: relative;
left: 0;
top: 0; } }
.ec-cartNavi .ec-cartNavi__price {
display: none; }
@media only screen and (min-width: 768px) {
.ec-cartNavi .ec-cartNavi__price {
display: inline-block;
font-size: 14px;
font-weight: normal;
vertical-align: middle; } }
.ec-cartNavi.is-active .ec-cartNavi__icon:before {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: 900; }
.ec-cartNavi.is-active .ec-cartNavi__badge {
display: none; }
@media only screen and (min-width: 768px) {
.ec-cartNavi.is-active .ec-cartNavi__badge {
display: none; } }
/*
カートナビゲーションのポップアップ(商品詳細)
カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
div(style="height:350px;")
// 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
.is_active
.ec-cartNavi
.ec-cartNavi__icon
img(src='/moc/icon/cart-dark.svg', alt='close')
.ec-cartNavi__iconClose
img(src='/moc/icon/cross-dark.svg', alt='close')
.ec-cartNavi__badge 1
.ec-cartNavi__label
| 合計
.ec-cartNavi__price ¥1920
+b.ec-cartNaviIsset
+e.cart
+e.cartImage
img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
+e.cartContent
+e.cartContentTitle ミニテーブル
+e.cartContentPrice ¥ 12,960
+e.cartContentTax 税込
+e.cartContentNumber 数量：1
+e.action
a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
a.ec-blockBtn.ec-cartNavi--cancel キャンセル
Styleguide 7.3.6
*/
.ec-cartNaviIsset {
display: none;
width: 100%;
text-align: center;
background: #EC9CB4;
box-sizing: border-box;
padding: 16px;
z-index: 20;
position: absolute;
right: 0;
box-shadow: #888 1px 1px 2px 1px; }
@media only screen and (min-width: 768px) {
.ec-cartNaviIsset {
margin-top: 10px;
width: 350px; }
.ec-cartNaviIsset::before {
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 8.5px 10px 8.5px;
border-color: transparent transparent #EC9CB4 transparent;
position: absolute;
top: -9px;
left: 66%; } }
.ec-cartNaviIsset .ec-cartNaviIsset__cart {
border-bottom: 1px solid #E8E8E8;
margin-bottom: 16px;
padding: 5px;
background-color: #FFF; }
.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: 35%; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage img {
width: 100%; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
float: right;
width: 65%;
padding-left: 5px;
text-align: left;
box-sizing: border-box;
line-height: 1.2; }
.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
color: #fff;
margin-bottom: 8px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
margin-bottom: 8px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
font-weight: bold; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax {
display: inline-block;
font-size: 12px;
font-weight: normal;
margin-left: 2px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
font-size: 14px; }
.ec-cartNaviIsset.is-active {
display: block; }
/*
カートナビゲーションのポップアップ(商品なし)
カートナビゲーションのポップアップを表示します。商品が登録されていない場合の表示です。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
div(style="height:170px;")
// 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
.is_active
.ec-cartNavi
.ec-cartNavi__icon
img(src='/moc/icon/cart-dark.svg', alt='cart')
.ec-cartNavi__iconClose
img(src='/moc/icon/cross-dark.svg', alt='close')
.ec-cartNavi__badge 1
.ec-cartNavi__label
| 合計
.ec-cartNavi__price ¥1920
.ec-cartNaviNull
.ec-cartNaviNull__message
p 現在カート内に
br
| 商品がございません。
//+b.ec-cartNaviIsset
// +e.cart
// +e.cartImage
// img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
// +e.cartContent
// +e.cartContentTitle ミニテーブル
// +e.cartContentPrice ¥ 12,960
// +e.cartContentTax 税込
// +e.cartContentNumber 数量：1
// +e.action
// a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
// a.ec-blockBtn キャンセル
sg-wrapper:
Styleguide 7.3.7
*/
.ec-cartNaviNull {
display: none;
width: 100%;
text-align: center;
background: #EC9CB4;
box-sizing: border-box;
padding: 16px;
z-index: 3;
position: absolute;
right: 0; }
@media only screen and (min-width: 768px) {
.ec-cartNaviNull {
margin-top: 10px;
min-width: 256px;
max-width: 256px; }
.ec-cartNaviNull::before {
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 8.5px 10px 8.5px;
border-color: transparent transparent #EC9CB4 transparent;
position: absolute;
top: -9px; } }
.ec-cartNaviNull .ec-cartNaviNull__message {
border: 1px solid #D9D9D9;
padding: 16px 0;
font-size: 16px;
font-weight: bold;
color: #000;
background-color: #FFF; }
.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: #DE5D50; }
.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 {
border-top: 1px dotted #ccc;
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: #DE5D50; }
.ec-totalBox .ec-totalBox__price {
margin-left: 16px;
font-size: 16px;
font-weight: bold; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.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: 768px) {
.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: 768px) {
.ec-news {
margin-right: 3%; } }
@media only screen and (min-width: 768px) {
.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: 768px) {
.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 .2s ease-out; }
.ec-newsline.is_active .ec-newsline__description {
height: auto;
transition: all .2s ease-out;
padding-bottom: 16px; }
.ec-newsline.is_active .ec-icon img {
transform: rotateX(180deg); }
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
マイページ
マイページで利用するためのスタイルガイド群です。
sg-wrapper:
Styleguide 9.1
*/
/*
マイページ
マイページで表示するメニューリストです。
ul を利用したリスト要素で記述します。
ex [マイページ メニューリスト部分](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist
Styleguide 9.1.1
*/
.ec-navlistRole .ec-navlistRole__navlist {
display: flex;
flex-wrap: wrap;
border-color: #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: 768px) {
.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: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
margin: 1em 0;
padding-bottom: 32px;
text-align: center;
border-bottom: 1px dotted #ccc; }
.ec-welcomeMsg:after {
content: " ";
display: table; }
.ec-welcomeMsg:after {
clear: both; }
.ec-welcomeMsg textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-welcomeMsg img {
max-width: 100%; }
.ec-welcomeMsg html {
-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: 768px) {
.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: 768px) {
.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; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
標準セクション
通常のコンテナブロックです。
ex [商品詳細ページ コンテナ](http://demo3.ec-cube.net/products/detail/33)
Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-roleRole
Styleguide 11.1
*/
.ec-role {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-role:after {
content: " ";
display: table; }
.ec-role:after {
clear: both; }
.ec-role textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-role img {
max-width: 100%; }
.ec-role html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-role *,
.ec-role *::before,
.ec-role *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-role img {
width: 100%; }
/*
マイページセクション
マイページ専用のコンテナブロックです。
ex [マイページ コンテナ](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-mypageRole
Styleguide 11.1.2
*/
.ec-mypageRole {
margin-right: auto;
margin-left: auto;
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%; }
.ec-mypageRole:after {
content: " ";
display: table; }
.ec-mypageRole:after {
clear: both; }
.ec-mypageRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-mypageRole img {
max-width: 100%; }
.ec-mypageRole html {
-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: 768px) {
.ec-mypageRole {
padding-left: 26px;
padding-right: 26px; } }
@media only screen and (min-width: 768px) {
.ec-mypageRole .ec-pageHeader h1, .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; }
/*
ヘッダー
ヘッダー用のプロジェクトコンポーネントを提供します。
ex [トップページ ヘッダー](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/11.2.header.pug
include /assets/tmpl/elements/11.3.headerNavi.pug
include /assets/tmpl/elements/11.4.categoryNavi.pug
+b.ec-layoutRole
+e.header
+ec-headerRole
+ec-headerNaviRole
+ec-categoryNaviRole
Styleguide 11.2
*/
.ec-layoutRole {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
transition: transform 0.3s;
background-color: #FFFFFF; }
.ec-layoutRole .ec-layoutRole__header {
position: relative;
width: 100%;
max-width: 1130px;
height: 70px;
margin: 0 auto; }
@media only screen and (min-width: 768px) {
.ec-layoutRole .ec-layoutRole__header {
height: 140px; } }
.ec-layoutRole .ec-layoutRole__contentTop {
padding: 0; }
.ec-layoutRole .ec-layoutRole__contents {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 1150px;
display: flex;
flex-wrap: nowrap;
flex-grow: 1;
column-gap: 30px; }
.ec-layoutRole .ec-layoutRole__main {
width: 100%; }
.ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 0; }
@media only screen and (min-width: 768px) {
.ec-layoutRole .ec-layoutRole__mainWithColumn {
flex-grow: 1; } }
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
width: 50%; } }
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
display: none; }
@media only screen and (min-width: 768px) {
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
display: flex;
flex-direction: column;
row-gap: 20px;
width: 250px; } }
.ec-headerRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
/*padding-top: 15px;*/
position: relative;
top: 5px;
left: 60px;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: fit-content;
height: fit-content;
margin: 0;
padding: 0; }
.ec-headerRole:after {
content: " ";
display: table; }
.ec-headerRole:after {
clear: both; }
.ec-headerRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-headerRole img {
max-width: 100%; }
.ec-headerRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-headerRole *,
.ec-headerRole *::before,
.ec-headerRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-headerRole img {
width: 100%; }
.ec-headerRole:after {
display: none; }
@media only screen and (min-width: 768px) {
.ec-headerRole {
position: relative;
left: 5px; }
.ec-headerRole:after {
content: " ";
display: table; }
.ec-headerRole:after {
clear: both; } }
.ec-headerRole::before {
display: none; }
.ec-headerRole .ec-headerRole__title {
width: fit-content;
height: fit-content; }
@media only screen and (min-width: 768px) {
.ec-headerRole .ec-headerRole__title {
position: absolute;
top: 10px; } }
.ec-headerRole .ec-headerRole__navSP {
display: block;
position: absolute;
top: 15px;
width: 27%;
right: 0;
text-align: right; }
@media only screen and (min-width: 768px) {
.ec-headerRole .ec-headerRole__navSP {
display: none; } }
.ec-headerNaviRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 5px;
right: 15px;
left: 15px;
flex-direction: column-reverse;
align-items: flex-end;
width: auto;
max-width: unset;
margin: 0 0 0 auto;
padding: 0; }
.ec-headerNaviRole:after {
content: " ";
display: table; }
.ec-headerNaviRole:after {
clear: both; }
.ec-headerNaviRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-headerNaviRole img {
max-width: 100%; }
.ec-headerNaviRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-headerNaviRole *,
.ec-headerNaviRole *::before,
.ec-headerNaviRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-headerNaviRole img {
width: 100%; }
.ec-headerNaviRole .fa-bars {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
@media only screen and (min-width: 768px) {
.ec-headerNaviRole {
padding-bottom: 0; } }
.ec-headerNaviRole .ec-headerNaviRole__left {
width: fit-content; }
.ec-headerNaviRole .ec-headerNaviRole__search {
display: none; }
@media only screen and (min-width: 768px) {
.ec-headerNaviRole .ec-headerNaviRole__search {
display: inline-block;
margin-top: 10px; }
.ec-headerNaviRole .ec-headerNaviRole__search a {
color: inherit;
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__search a:hover {
text-decoration: none; } }
.ec-headerNaviRole .ec-headerNaviRole__navSP {
display: block; }
@media only screen and (min-width: 768px) {
.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: fit-content;
display: flex;
justify-content: flex-end;
align-items: center; }
.ec-headerNaviRole .ec-headerNaviRole__nav {
display: inline-block; }
.ec-headerNaviRole .ec-headerNaviRole__nav a {
color: inherit;
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__cart {
display: inline-block; }
.ec-headerNaviRole .ec-headerNaviRole__cart a {
color: inherit;
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
text-decoration: none; }
.ec-headerNavSP {
display: block;
cursor: pointer;
border-radius: 50%;
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
font-size: 18px;
text-align: center;
color: black;
background: white;
filter: drop-shadow(0px 0px 3px #555);
position: fixed;
top: 10px;
left: 10px;
z-index: 1000; }
.ec-headerNavSP .fas {
vertical-align: top; }
@media only screen and (min-width: 768px) {
.ec-headerNavSP {
display: none; } }
.ec-headerNavSP.is-active {
display: none; }
/*
ヘッダー：タイトル
ヘッダー内で使用されるタイトルコンポーネントです。
Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerTitle
Styleguide 11.2.1
*/
.ec-headerTitle {
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: fit-content;
height: fit-content; }
.ec-headerTitle textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-headerTitle img {
max-width: 100%; }
.ec-headerTitle html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-headerTitle *,
.ec-headerTitle *::before,
.ec-headerTitle *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-headerTitle img {
width: 100%; }
.ec-headerTitle .ec-headerTitle__title {
width: 110px;
height: auto;
text-align: center; }
@media only screen and (min-width: 768px) {
.ec-headerTitle .ec-headerTitle__title {
width: 210px; } }
.ec-headerTitle .ec-headerTitle__title h1, .ec-headerTitle .ec-headerTitle__title .h1 {
margin: 0;
padding: 0; }
.ec-headerTitle .ec-headerTitle__title a {
display: inline-block;
margin: 0;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: black; }
@media only screen and (min-width: 768px) {
.ec-headerTitle .ec-headerTitle__title a {
font-size: 40px; } }
.ec-headerTitle .ec-headerTitle__title a:hover {
opacity: .8; }
.ec-headerTitle .ec-headerTitle__subtitle {
font-size: 10px;
text-align: center; }
@media only screen and (min-width: 768px) {
.ec-headerTitle .ec-headerTitle__subtitle {
font-size: 16px;
margin-bottom: 10px; } }
.ec-headerTitle .ec-headerTitle__subtitle a {
display: inline-block;
color: #0092C4;
text-decoration: none;
cursor: pointer; }
/*
ヘッダー：ユーザナビゲーション
ヘッダー内でユーザに関与するナビゲーションコンポーネントです。
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`内に記述すると２カラム上の右側に配置することができます。
Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerNav
sg-wrapper:
Styleguide 11.2.3
*/
.ec-headerNav {
text-align: right; }
.ec-headerNav .ec-headerNav__item {
margin-left: 0;
display: inline-block;
font-size: 28px; }
.ec-headerNav .ec-headerNav__itemIcon {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
font-size: 18px;
color: black; }
@media only screen and (min-width: 768px) {
.ec-headerNav .ec-headerNav__itemIcon {
margin-right: 0;
font-size: 20px; } }
.ec-headerNav .ec-headerNav__itemLink {
display: none;
margin-right: 5px;
font-size: 14px;
vertical-align: middle;
color: black; }
@media only screen and (min-width: 768px) {
.ec-headerNav .ec-headerNav__itemLink {
display: inline-block; } }
/*
ヘッダー：検索ボックス
ヘッダー内で使用される商品検索コンポーネントです。
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`内に記述すると２カラム上の右側に配置することができます。
Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerSearch
sg-wrapper:
Styleguide 11.2.4
*/
.ec-headerSearch:after {
content: " ";
display: table; }
.ec-headerSearch:after {
clear: both; }
.ec-headerSearch .ec-headerSearch__category {
float: none; }
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__category {
float: left;
width: 43%; } }
.ec-headerSearch .ec-headerSearch__category .ec-select {
overflow: hidden;
width: 100%;
margin: 0;
text-align: center; }
.ec-headerSearch .ec-headerSearch__category .ec-select select {
width: 100%;
cursor: pointer;
padding: 8px 24px 8px 8px;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
appearance: none;
color: #fff; }
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__category .ec-select select {
max-width: 165px;
height: 36px; } }
.ec-headerSearch .ec-headerSearch__category .ec-select select option {
color: #000; }
.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
display: none; }
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
position: relative;
border: 0;
background: #000;
color: #fff;
border-top-right-radius: 10px;
border-top-left-radius: 10px; }
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
border-top-right-radius: inherit;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px; } }
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
position: absolute;
top: 0.8em;
right: 0.4em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
pointer-events: none; }
.ec-headerSearch .ec-headerSearch__keyword {
position: relative;
color: #525263;
border: 1px solid #ccc;
background-color: #f6f6f6;
border-radius: 10px; }
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__keyword {
float: right;
width: 100%;
border-bottom-left-radius: inherit;
border-radius: 50px; } }
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
width: 100%;
height: 34px;
font-size: 16px;
border: 0 none;
padding: 0.5em 50px 0.5em 1em;
box-shadow: none;
background: none;
box-sizing: border-box;
margin-bottom: 0; }
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
font-size: 12px; } }
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
width: 22px;
height: 22px; }
.ec-headerSearch .ec-headerSearch__keywordBtn {
border: 0;
background: none;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-55%);
display: block;
white-space: nowrap;
z-index: 1; }
/*
ヘッダー：カテゴリナビ
ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。
Markup:
include /assets/tmpl/elements/11.4.categoryNavi.pug
+ec-itemNav
sg-wrapper:
Styleguide 11.2.5
*/
.ec-categoryNaviRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: none; }
.ec-categoryNaviRole:after {
content: " ";
display: table; }
.ec-categoryNaviRole:after {
clear: both; }
.ec-categoryNaviRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-categoryNaviRole img {
max-width: 100%; }
.ec-categoryNaviRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-categoryNaviRole *,
.ec-categoryNaviRole *::before,
.ec-categoryNaviRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-categoryNaviRole img {
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-categoryNaviRole {
display: block;
width: 100%; }
.ec-categoryNaviRole a {
color: inherit;
text-decoration: none; }
.ec-categoryNaviRole a:hover {
text-decoration: none; } }
.ec-itemNav {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center; }
.ec-itemNav__nav {
display: block;
margin: 0 auto;
padding: 0;
width: auto;
height: auto;
list-style-type: none;
text-align: center;
vertical-align: bottom; }
@media only screen and (min-width: 768px) {
.ec-itemNav__nav {
display: inline-block; } }
.ec-itemNav__nav li {
float: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
position: relative; }
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li {
float: left;
width: auto; } }
.ec-itemNav__nav li a {
display: block;
border-bottom: 1px solid #E8E8E8;
margin: 0;
padding: 16px;
height: auto;
color: #2e3233;
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
text-align: left;
background: #fff;
border-bottom: 1px solid #E8E8E8; }
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li a {
text-align: center;
border-bottom: none; } }
.ec-itemNav__nav li ul {
display: none;
z-index: 0;
margin: 0;
padding: 0;
min-width: 200px;
list-style: none;
position: static;
top: 100%;
left: 0; }
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li ul {
display: block;
z-index: 100;
position: absolute; } }
.ec-itemNav__nav li ul li {
overflow: hidden;
width: 100%;
height: auto;
transition: .3s; }
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li ul li {
overflow: hidden;
height: 0; } }
.ec-itemNav__nav li ul li a {
border-bottom: 1px solid #E8E8E8;
padding: 16px 22px 16px 16px;
font-size: 16px;
font-weight: bold;
color: white;
text-align: left;
background: black; }
.ec-itemNav__nav > li:hover > a {
background: #fafafa; }
.ec-itemNav__nav > li:hover li:hover > a {
background: #333; }
@media only screen and (min-width: 768px) {
.ec-itemNav__nav > li:hover > ul > li {
overflow: visible;
height: auto; } }
.ec-itemNav__nav li ul li ul {
top: 0;
left: 100%;
width: auto; }
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li ul li ul:before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 12px;
color: white;
position: absolute;
top: 19px;
right: auto;
left: -20px; } }
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li ul li:hover > ul > li {
overflow: visible;
height: auto;
width: auto; } }
.ec-itemNav__nav li ul li ul li a {
background: #7D7D7D; }
.ec-itemNav__nav li:hover ul li ul li a:hover {
background: #333; }
/*
ヘッダー：カテゴリナビ
ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。
Markup:
include /assets/tmpl/elements/11.4.categoryNavi.pug
+ec-itemNav
sg-wrapper:
Styleguide 11.2.5
*/
.ec-headerMenuRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: none; }
.ec-headerMenuRole:after {
content: " ";
display: table; }
.ec-headerMenuRole:after {
clear: both; }
.ec-headerMenuRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-headerMenuRole img {
max-width: 100%; }
.ec-headerMenuRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-headerMenuRole *,
.ec-headerMenuRole *::before,
.ec-headerMenuRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-headerMenuRole img {
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-headerMenuRole {
display: block; } }
.ec-headerMenuRole .ec-menuItem {
display: flex;
justify-content: center;
width: 100%;
column-gap: 30px;
list-style: none;
margin-bottom: 20px;
padding: 0; }
.ec-headerMenuRole .ec-menuItem a:hover {
color: #D9508E; }
.ec-headerMenuRole .ec-menuItem .ec-headerMenuRole .ec-menuItem__item {
width: 100%; }
/*
ヘッダー：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: #FDF5F8;
width: 260px;
height: 100vh;
transform: translateX(-300px);
position: fixed;
top: 0;
left: 0;
z-index: 1;
transition: z-index 0ms 1ms; }
@media only screen and (min-width: 768px) {
.ec-drawerRole {
display: none; } }
.ec-drawerRole .ec-headerSearchArea {
padding: 20px 10px;
width: 100%;
background: #F8F8F8; }
.ec-drawerRole .ec-headerSearch {
padding: 16px 8px 26px;
background: #EBEBEB;
color: #636378; }
.ec-drawerRole .ec-headerSearch select {
width: 100% !important; }
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding: 1em 10px;
font-size: 16px;
font-weight: bold;
color: black;
background: #F8F8F8; }
.ec-drawerRole .ec-headerCategoryArea p {
margin-top: 0;
margin-bottom: 0; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: black;
font-weight: normal;
background: #f8f8f8; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
border-bottom: 1px solid #ccc;
padding-left: 20px;
font-weight: normal;
background: white; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover > a {
background: #f8f8f8; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover li:hover > a {
background: white; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
padding-left: 40px;
color: black;
background: white; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li:hover ul li ul li a:hover {
background: white; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li ul li a {
padding-left: 60px;
font-weight: normal; }
.ec-drawerRole .ec-headerLinkArea {
background: #FDF5F8; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
border-top: 1px solid #ccc;
padding: 0; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
display: block;
border-bottom: 1px solid #ccc;
padding: 15px 20px;
font-size: 16px;
font-weight: bold;
color: #333; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item > span {
display: flex;
justify-content: space-between;
align-items: center; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item > span:after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
background-image: url(/html/template/lovely/assets/icon/arrow3B.svg);
background-position: center left 0;
background-size: contain;
background-repeat: no-repeat; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item > span.open:after {
background-image: url(/html/template/lovely/assets/icon/arrow3T.svg); }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item ul {
list-style: none;
padding-left: 20px; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item ul li {
padding: 5px 0; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item ul li > span {
display: block;
border-bottom: #CCC 1px solid; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item ul li ul {
list-style: none;
padding-left: 20px; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item ul li ul li {
padding: 5px 0; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
display: inline-block;
width: 28px;
font-size: 17px; }
.ec-drawerRoleClose {
display: none;
cursor: pointer;
border-radius: 50%;
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
font-size: 18px;
text-align: center;
color: black;
background: white;
position: fixed;
top: 10px;
left: 270px;
z-index: 1000; }
.ec-drawerRoleClose .fas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
@media only screen and (min-width: 768px) {
.ec-drawerRoleClose {
display: none; } }
.ec-drawerRole.is_active {
display: block;
transform: translateX(0);
transition: all .3s;
z-index: 100000; }
@media only screen and (min-width: 768px) {
.ec-drawerRole.is_active {
display: none; } }
.ec-drawerRoleClose.is_active {
display: inline-block;
transition: all .3s; }
@media only screen and (min-width: 768px) {
.ec-drawerRoleClose.is_active {
display: none; } }
.ec-overlayRole {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
opacity: 0;
background: transparent;
transform: translateX(0);
transition: all .3s;
visibility: hidden; }
@media only screen and (min-width: 768px) {
.ec-overlayRole {
display: none; } }
.have_curtain .ec-overlayRole {
display: block;
opacity: 1;
background: rgba(0, 0, 0, 0.5);
visibility: visible; }
@media only screen and (min-width: 768px) {
.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: 50px;
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: 50px; }
/* devモードの追加 */
.ec-debugModeAlert {
background: red;
height: 50px;
position: fixed;
top: 0;
width: 100%;
color: white;
z-index: 999;
display: flex;
font-weight: bold;
opacity: 0.2;
pointer-events: none; }
.ec-debugModeAlert > * {
margin: auto; }
.ec-debugModeAlert .ec-debugModeAlert__icon {
display: inline-block;
margin-right: 1rem;
width: 20px;
height: 20px;
color: #fff;
fill: #fff;
vertical-align: top; }
.ec-debugModeAlert + * {
/*margin-top: 50px;*/ }
.ec-twoModeAlert + * {
margin-top: 100px; }
/**
メディアクエリ
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 {
padding-top: 30px;
padding-bottom: 100px;
background-color: #f2f2f2;
/* レンタル手順 */
/* ガイドリンク */
/* 各種ページリンク */
/* copyright */ }
@media only screen and (min-width: 768px) {
.ec-footerRole {
padding-top: 40px;
margin-top: 100px; } }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-footerRole__inner {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-footerRole .ec-footerRole__inner:after {
content: " ";
display: table; }
.ec-footerRole .ec-footerRole__inner:after {
clear: both; }
.ec-footerRole .ec-footerRole__inner textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-footerRole .ec-footerRole__inner img {
max-width: 100%; }
.ec-footerRole .ec-footerRole__inner html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-footerRole .ec-footerRole__inner *,
.ec-footerRole .ec-footerRole__inner *::before,
.ec-footerRole .ec-footerRole__inner *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-footerRole .ec-footerRole__inner img {
width: 100%; } }
.ec-footerRole .ec-stepNavi {
width: 100%;
margin: 0;
padding: 0; }
.ec-footerRole .ec-stepNavi__inner {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0;
padding: 0;
gap: 10px; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__inner {
flex-direction: row;
max-width: 1130px;
margin: 0 auto; } }
.ec-footerRole .ec-stepNavi__step {
display: block;
width: 95%;
height: 120px;
margin: 0 auto;
padding: 5px;
background-color: #EC9CB4; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__step {
width: 22%;
height: 170px; } }
.ec-footerRole .ec-stepNavi__stepInner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
background-color: #FFF; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__stepInner {
flex-direction: column; } }
.ec-footerRole .ec-stepNavi__stepInnerLeft {
width: 30%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__stepInnerLeft {
width: 100%;
height: 55%;
margin-top: 5px; } }
.ec-footerRole .ec-stepNavi__stepInnerRight {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 70%;
height: 100%;
background-color: #FDF5F8; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__stepInnerRight {
width: 100%;
height: 45%; } }
.ec-footerRole .ec-stepNavi__stepNo {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 2.5em;
line-height: 1; }
.ec-footerRole .ec-stepNavi__stepNoText {
font-size: 1.2em;
font-weight: bold; }
.ec-footerRole .ec-stepNavi__stepNoNum {
display: flex;
justify-content: center;
align-items: center;
width: 1.2em;
height: 1.2em;
/* margin-left: 5px;
margin-right: 5px;
margin-bottom: 0.2em;
border: #555 2px solid;
border-radius: 50%;*/
font-size: 1.3em;
font-weight: bold; }
.ec-footerRole .ec-stepNavi__stepNoCap {
display: none; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__stepNoCap {
display: flex;
font-size: 1.2em;
font-weight: bold; } }
.ec-footerRole .ec-stepNavi__stepIcon {
width: 50px;
height: 50px; }
.ec-footerRole .ec-stepNavi__stepCap {
display: flex;
align-items: flex-end;
width: 100%;
height: 3em;
padding: 0 5px;
font-size: 1.2em;
font-weight: bold; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__stepCap {
/* justify-content: center;
height: 2em;
background-color: #FFF;*/
display: none; } }
.ec-footerRole .ec-stepNavi__stepNote {
display: block;
width: 100%;
height: 5rem;
padding: 5px;
text-align: justify;
font-size: 0.95em; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__stepNote {
height: auto;
/*font-size: 0.9em;*/ } }
.ec-footerRole .ec-stepNavi__arrow {
display: block;
width: 20px;
height: 20px;
background-image: url(/html/template/lovely/assets/icon/arrow3B.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-stepNavi__arrow {
background-image: url(/html/template/lovely/assets/icon/arrow3R.svg); } }
.ec-footerRole .ec-guideNavi {
width: 100%;
margin: 0;
padding: 20px 10px; }
.ec-footerRole .ec-guideNavi__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
max-width: 1130px;
margin: 0 auto;
padding: 0; }
.ec-footerRole .ec-guideNavi__navi {
display: flex;
flex-direction: column;
width: 48%;
list-style: none; }
.ec-footerRole .ec-guideNavi__navi__title {
display: block;
width: 100%;
margin-top: 30px;
/*border-bottom: #888 1px solid;*/
font-size: 1.3em;
color: #D9508E; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-guideNavi__navi__title {
font-size: 1.5em;
font-weight: bold;
color: #555; } }
.ec-footerRole .ec-guideNavi__navi__description {
display: block;
width: 100%; }
.ec-footerRole .ec-guideNavi__navi__link {
align-self: flex-end;
display: flex;
align-items: center;
width: auto;
font-size: 0.9em; }
.ec-footerRole .ec-guideNavi__navi__link:before {
content: '';
display: inline-block;
width: 1em;
height: 0.7em;
background-image: url(/html/template/lovely/assets/icon/arrow3R.svg);
background-position: center left 0;
background-size: contain;
background-repeat: no-repeat; }
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-guideNavi__navi {
width: 22%;
list-style: none; } }
.ec-footerRole .ec-footerNavi {
width: 100%;
margin: 0;
padding: 0;
background-color: #EDC5D1; }
.ec-footerRole .ec-footerNavi__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 1130px;
margin: 0 auto;
padding: 10px 0;
gap: 20px; }
.ec-footerRole .ec-footerTitle {
width: 100%;
margin: 0;
padding: 0;
background-color: #EC9CB4; }
.ec-footerRole .ec-footerTitle__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 1130px;
margin: 0 auto;
padding: 10px 0; }
/*
フッターナビ
フッタープロジェクトで使用するナビゲーション用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerNav
sg-wrapper:
Styleguide 11.3.1
*/
.ec-footerNavi {
padding: 0;
color: white;
list-style: none;
text-align: center; }
.ec-footerNavi .ec-footerNavi__link {
display: block; }
@media only screen and (min-width: 768px) {
.ec-footerNavi .ec-footerNavi__link {
display: inline-block; } }
.ec-footerNavi .ec-footerNavi__link a {
display: block;
/*border-bottom: 1px solid #7d7d7d;*/
/*padding: 15px 0;*/
font-size: 14px;
color: inherit;
text-decoration: none; }
@media only screen and (min-width: 768px) {
.ec-footerNavi .ec-footerNavi__link a {
display: inline-block;
border-bottom: none;
margin: 0 10px;
padding: 0;
text-decoration: underline; } }
.ec-footerNavi .ec-footerNavi__link:hover a {
opacity: .8;
text-decoration: none; }
/*
フッタータイトル
フッタープロジェクトで使用するタイトル用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerTitle
sg-wrapper:
Styleguide 11.3.2
*/
.ec-footerTitle {
padding: 40px 0 60px;
text-align: center;
color: white; }
@media only screen and (min-width: 768px) {
.ec-footerTitle {
padding: 50px 0 80px; } }
.ec-footerTitle .ec-footerTitle__logo {
display: block;
margin-bottom: 10px;
font-weight: bold; }
.ec-footerTitle .ec-footerTitle__logo a {
color: inherit;
text-decoration: none; }
.ec-footerTitle .ec-footerTitle__logo a:hover {
text-decoration: none; }
.ec-footerTitle .ec-footerTitle__logo a {
font-size: 22px;
color: inherit; }
@media only screen and (min-width: 768px) {
.ec-footerTitle .ec-footerTitle__logo a {
font-size: 24px; } }
.ec-footerTitle .ec-footerTitle__logo:hover a {
opacity: .8;
text-decoration: none; }
.ec-footerTitle .ec-footerTitle__copyright {
font-size: 10px; }
@media only screen and (min-width: 768px) {
.ec-footerTitle .ec-footerTitle__copyright {
font-size: 12px; } }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
トップページ
トップページ スライド部に関する Project コンポーネントを定義します。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/12.1.slider.pug
+ec-sliderRole
Styleguide 12.1
*/
.ec-sliderRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
margin-bottom: 24px;
padding: 0;
max-width: unset; }
.ec-sliderRole:after {
content: " ";
display: table; }
.ec-sliderRole:after {
clear: both; }
.ec-sliderRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-sliderRole img {
max-width: 100%; }
.ec-sliderRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-sliderRole *,
.ec-sliderRole *::before,
.ec-sliderRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-sliderRole img {
width: 100%; }
.ec-sliderRole .slick-slider {
margin-bottom: 30px; }
.ec-sliderRole .slick-slider .slick-prev, .ec-sliderRole .slick-slider .slick-next {
display: none; }
@media only screen and (min-width: 768px) {
.ec-sliderRole .slick-slider .slick-prev, .ec-sliderRole .slick-slider .slick-next,
.ec-sliderRole .slick-slider .slick-prev:not(:hover):focus, .ec-sliderRole .slick-slider .slick-next:not(:hover):focus {
width: 10%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1; }
.ec-sliderRole .slick-slider .slick-prev:before, .ec-sliderRole .slick-slider .slick-next:before {
display: block;
content: '';
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 30px 30px;
opacity: 0.7; }
.ec-sliderRole .slick-slider .slick-prev {
left: 0; }
.ec-sliderRole .slick-slider .slick-prev:before {
background-image: url("/html/template/lovely/assets/icon/arrow1L.svg");
background-position: center right 5px; }
.ec-sliderRole .slick-slider .slick-next {
right: 0; }
.ec-sliderRole .slick-slider .slick-next:before {
background-image: url("/html/template/lovely/assets/icon/arrow1R.svg");
background-position: center left 5px; }
.ec-sliderRole .slick-slider .slick-prev:hover, .ec-sliderRole .slick-slider .slick-next:hover {
background-color: rgba(0, 0, 0, 0.7); }
.ec-sliderRole .slick-slider .slick-prev:hover:before, .ec-sliderRole .slick-slider .slick-next:hover:before {
opacity: 1; } }
.ec-sliderRole .slick-slider .slick-dots {
position: absolute;
bottom: -30px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center; }
@media only screen and (min-width: 768px) {
.ec-sliderRole .slick-slider .slick-dots {
bottom: -45px; } }
.ec-sliderRole .slick-slider .slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer; }
.ec-sliderRole .slick-slider .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent; }
.ec-sliderRole .slick-slider .slick-dots li button:hover, .ec-sliderRole .slick-slider .slick-dots li button:focus {
outline: none; }
.ec-sliderRole .slick-slider .slick-dots li button:hover:before, .ec-sliderRole .slick-slider .slick-dots li button:focus:before {
opacity: 1; }
.ec-sliderRole .slick-slider .slick-dots li button:before {
content: " ";
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
text-align: center;
opacity: .25;
background-color: black;
border-radius: 50%; }
.ec-sliderRole .slick-slider .slick-dots li button.thumbnail img {
width: 0;
height: 0; }
.ec-sliderRole .slick-slider .slick-dots li.slick-active button:before {
opacity: .75;
background-color: black; }
/*
商品詳細ページ
*/
.ec-sliderItemRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
margin-bottom: 30px;
padding: 0; }
.ec-sliderItemRole:after {
content: " ";
display: table; }
.ec-sliderItemRole:after {
clear: both; }
.ec-sliderItemRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-sliderItemRole img {
max-width: 100%; }
.ec-sliderItemRole html {
-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 .slick-dots {
bottom: -30px;
padding: 0;
list-style: none; }
@media only screen and (min-width: 768px) {
.ec-sliderItemRole .slick-dots {
bottom: -45px; } }
.ec-sliderItemRole .item_nav {
display: none; }
@media only screen and (min-width: 768px) {
.ec-sliderItemRole .item_nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 5px; } }
.ec-sliderItemRole .slideThumb {
display: flex;
justify-content: center;
align-items: center;
width: calc((100% - 5px * 4) / 5);
background-color: #FEFEFE;
border: #C0C0C0 1px solid;
border-radius: 3px;
cursor: pointer; }
.ec-sliderItemRole .slideThumb:focus {
outline: none; }
.ec-sliderItemRole .slideThumb:hover {
background-color: #FFFFFF;
border: #808080 1px solid; }
.ec-sliderItemRole .slideThumb img {
width: calc(100% - 10px);
height: auto;
max-height: calc(100% - 10px);
object-fit: 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;
/* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */ }
@media only screen and (min-width: 768px) {
.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: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__image {
order: 2; } }
.ec-eyecatchRole .ec-eyecatchRole__intro {
color: black; }
@media only screen and (min-width: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__intro {
padding-right: 5%;
order: 1; } }
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-bottom: .8em;
font-size: 16px;
font-weight: normal; }
@media only screen and (min-width: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-top: 45px; } }
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: .8em;
font-size: 24px;
font-weight: bold; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.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: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 30px; } }
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
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;
--bs-btn-padding-y: 6px;
--bs-btn-padding-x: 12px;
--bs-btn-font-size: 0.875rem;
--bs-btn-border-radius: 1.42857142;
-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; }
.ec-inlineBtn--top.disabled, .ec-inlineBtn--top[disabled], fieldset[disabled] .ec-inlineBtn--top {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65; }
.ec-inlineBtn--top:hover {
color: #fff;
background-color: black;
border-color: black; }
.btn-check:focus + .ec-inlineBtn--top, .ec-inlineBtn--top:focus {
color: #fff;
background-color: black;
border-color: black;
box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.5); }
.btn-check:checked + .ec-inlineBtn--top, .btn-check:active + .ec-inlineBtn--top, .ec-inlineBtn--top:active, .ec-inlineBtn--top.active, .show > .ec-inlineBtn--top.dropdown-toggle {
color: #fff;
background-color: black;
border-color: black; }
.btn-check:checked + .ec-inlineBtn--top:focus, .btn-check:active + .ec-inlineBtn--top:focus, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top.active:focus, .show > .ec-inlineBtn--top.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.5); }
.ec-inlineBtn--top:disabled, .ec-inlineBtn--top.disabled {
color: white;
background-color: black;
border-color: black; }
.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;
--bs-btn-padding-y: 6px;
--bs-btn-padding-x: 12px;
--bs-btn-font-size: 0.875rem;
--bs-btn-border-radius: 1.42857142;
-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; }
.ec-blockBtn--top.disabled, .ec-blockBtn--top[disabled], fieldset[disabled] .ec-blockBtn--top {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65; }
.ec-blockBtn--top:hover {
color: #fff;
background-color: black;
border-color: black; }
.btn-check:focus + .ec-blockBtn--top, .ec-blockBtn--top:focus {
color: #fff;
background-color: black;
border-color: black;
box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.5); }
.btn-check:checked + .ec-blockBtn--top, .btn-check:active + .ec-blockBtn--top, .ec-blockBtn--top:active, .ec-blockBtn--top.active, .show > .ec-blockBtn--top.dropdown-toggle {
color: #fff;
background-color: black;
border-color: black; }
.btn-check:checked + .ec-blockBtn--top:focus, .btn-check:active + .ec-blockBtn--top:focus, .ec-blockBtn--top:active:focus, .ec-blockBtn--top.active:focus, .show > .ec-blockBtn--top.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.5); }
.ec-blockBtn--top:disabled, .ec-blockBtn--top.disabled {
color: white;
background-color: black;
border-color: black; }
.ec-blockBtn--top .ec-icon img {
width: 1em;
vertical-align: text-bottom; }
@media only screen and (min-width: 768px) {
.ec-blockBtn--top {
max-width: 260px; } }
/*
サイド部分のバナー
*/
.ec-sideRegistUser {
display: block; }
.ec-sideRegistUser:hover {
box-shadow: #f888 0 0 4px 0px;
filter: brightness(1.05); }
/*
サイド部分のバナー
*/
.ec-sideGuarantee {
display: block; }
.ec-sideGuarantee:hover {
box-shadow: #f888 0 0 4px 0px;
filter: brightness(1.05); }
/*
見出し
トップページで使用されている見出しのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.4
*/
/*
横並び見出し
横並びの見出しです。
Markup:
.ec-secHeading
span.ec-secHeading__en TOPIC
span.ec-secHeading__line |
span.ec-secHeading__ja 特集
Styleguide 12.4.1
*/
.ec-secHeading {
margin-bottom: 15px;
color: black; }
.ec-secHeading .ec-secHeading__en {
font-size: 18px;
font-weight: bold;
letter-spacing: .2em; }
.ec-secHeading .ec-secHeading__line {
display: inline-block;
margin: 0 20px;
width: 1px;
height: 14px;
background: black; }
.ec-secHeading .ec-secHeading__ja {
font-size: 12px;
font-weight: normal;
letter-spacing: .15em;
vertical-align: 2px; }
/*
縦並び見出し
縦並びの見出しです。
Markup:
.ec-secHeading--tandem
span.ec-secHeading__en TOPIC
span.ec-secHeading__line |
span.ec-secHeading__ja 特集
Styleguide 12.4.2
*/
.ec-secHeading--tandem {
margin-bottom: 15px;
color: black;
text-align: center; }
.ec-secHeading--tandem .ec-secHeading__en {
display: block;
font-size: 18px;
font-weight: bold;
letter-spacing: .2em; }
.ec-secHeading--tandem .ec-secHeading__line {
display: block;
margin: 13px auto;
width: 20px;
height: 1px;
background: black; }
.ec-secHeading--tandem .ec-secHeading__ja {
display: block;
margin-bottom: 30px;
font-size: 12px;
font-weight: normal;
letter-spacing: .15em;
vertical-align: 2px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
トピック（アイテム2列）
トップページで使用されているトピックのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.5.1
*/
.ec-topicRole {
padding: 40px 0;
background: #F8F8F8; }
@media only screen and (min-width: 768px) {
.ec-topicRole {
padding: 60px 0; } }
.ec-topicRole .ec-topicRole__list {
display: flex;
flex-wrap: wrap; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.ec-topicRole .ec-topicRole__listItem {
width: calc(100% / 2); }
.ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
margin-right: 30px; } }
.ec-topicRole .ec-topicRole__listItemTitle {
margin-top: .5em;
font-size: 14px;
color: black; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.ec-newItemRole {
padding: 60px 0; } }
.ec-newItemRole .ec-newItemRole__list {
display: flex;
flex-wrap: wrap; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 15px;
width: calc(100% / 4); }
.ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
margin-right: 30px; } }
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 4%; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.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: block;
width: 100%;
margin: 20px 0 0;
padding: 0;
background: transparent;
color: black; }
.ec-categoryRole .ec-categoryRole__title {
padding: 0 0 5px;
font-size: 1.2em; }
@media only screen and (min-width: 768px) {
.ec-categoryRole .ec-categoryRole__title {
border-bottom: #808080 1px solid; } }
.ec-categoryRole .ec-categoryRole__list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none; }
.ec-categoryRole .ec-categoryRole__listItem {
display: flex;
align-items: center;
width: 100%;
height: auto;
margin: 0;
padding: 0; }
@media only screen and (min-width: 768px) {
.ec-categoryRole .ec-categoryRole__listItem {
border-bottom: #808080 1px dotted; } }
.ec-categoryRole .ec-categoryRole__listItem::before {
content: '';
display: block;
width: 1em;
height: 0.7em;
background-image: url(/html/template/lovely/assets/icon/arrow3R.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center left 0; }
.ec-categoryRole .ec-categoryRole__listItem a {
padding: 10px 0; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
見出し
トップページで使用されている新着情報のスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.8.1
*/
.ec-newsRole {
/*padding: 40px 0 0;*/ }
@media only screen and (min-width: 768px) {
.ec-newsRole {
/*padding: 60px 0 0;*/ } }
.ec-newsRole .ec-newsRole__news {
box-sizing: border-box; }
.ec-newsRole .ec-newsRole__newsItem {
width: 100%; }
.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
border-bottom: 1px solid #ccc; }
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 20px; }
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 0; } }
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsItem {
padding: 20px 0; } }
.ec-newsRole .ec-newsRole__newsHeading {
cursor: pointer; }
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsHeading {
display: flex; } }
.ec-newsRole .ec-newsRole__newsDate {
display: block;
margin: 15px 0 5px;
font-size: 12px;
color: black; }
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsDate {
display: inline-block;
margin: 0;
min-width: 120px;
font-size: 14px; } }
.ec-newsRole .ec-newsRole__newsColumn {
display: flex; }
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsColumn {
display: inline-flex;
min-width: calc(100% - 120px); } }
.ec-newsRole .ec-newsRole__newsTitle {
display: inline-block;
margin-bottom: 10px;
width: 90%;
font-size: 14px;
font-weight: bold;
color: #7D7D7D;
line-height: 1.6; }
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsTitle {
margin-bottom: 0;
line-height: 1.8; } }
.ec-newsRole .ec-newsRole__newsClose {
display: inline-block;
width: 10%;
position: relative; }
.ec-newsRole .ec-newsRole__newsCloseBtn {
display: inline-block;
margin-left: auto;
border-radius: 50%;
width: 20px;
height: 20px;
color: white;
text-align: center;
background: black;
cursor: pointer;
position: absolute;
right: 5px; }
.ec-newsRole .ec-newsRole__newsDescription {
display: none;
margin: 0 0 10px;
font-size: 14px;
line-height: 1.4;
overflow: hidden; }
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsDescription {
margin: 20px 0 0;
line-height: 1.8; } }
.ec-newsRole .ec-newsRole__newsDescription a {
color: #0092C4; }
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
margin: 0 0 10px; }
@media only screen and (min-width: 768px) {
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
margin: 20px 0 0; } }
.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
display: inline-block;
transform: rotateX(180deg) translateY(2px); }
/**
メディアクエリ
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; }
@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, .ec-calendar__month td {
border-top: 1px solid #f3f3f3;
border-bottom: 1px solid #f3f3f3;
padding: 8px;
text-align: center;
vertical-align: middle; }
.ec-calendar .ec-calendar__title {
border: 0; }
.ec-calendar .ec-calendar__sun {
background: #F8F8F8;
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 {
background: #F8F8F8;
color: #333; }
.ec-calendar .ec-calendar__sat {
background: #F8F8F8;
color: #5CB1B1; }
.ec-calendar .ec-calendar__day {
background: #FFF;
color: #333; }
.ec-calendar .ec-calendar__holiday {
background: #FFF;
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; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
検索ラベル
商品一覧 ヘッダー部 に関する Project コンポーネントを定義します。
ex [商品一覧 ヘッダー部](http://demo3.ec-cube.net/products/list)
Markup:
include /assets/tmpl/elements/13.1.searchnav.pug
+ec-searchnavRole__topicpath
+ec-searchnavRole__info
Styleguide 13.1
*/
.ec-searchnavRole {
margin-bottom: 0;
padding: 0; }
@media only screen and (min-width: 768px) {
.ec-searchnavRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-searchnavRole:after {
content: " ";
display: table; }
.ec-searchnavRole:after {
clear: both; }
.ec-searchnavRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-searchnavRole img {
max-width: 100%; }
.ec-searchnavRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-searchnavRole *,
.ec-searchnavRole *::before,
.ec-searchnavRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-searchnavRole img {
width: 100%; } }
.ec-searchnavRole .ec-searchnavRole__infos {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: flex;
border-top: 0;
margin-bottom: 16px;
padding-top: 5px;
flex-direction: column; }
.ec-searchnavRole .ec-searchnavRole__infos:after {
content: " ";
display: table; }
.ec-searchnavRole .ec-searchnavRole__infos:after {
clear: both; }
.ec-searchnavRole .ec-searchnavRole__infos textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-searchnavRole .ec-searchnavRole__infos img {
max-width: 100%; }
.ec-searchnavRole .ec-searchnavRole__infos html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-searchnavRole .ec-searchnavRole__infos *,
.ec-searchnavRole .ec-searchnavRole__infos *::before,
.ec-searchnavRole .ec-searchnavRole__infos *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-searchnavRole .ec-searchnavRole__infos img {
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-searchnavRole .ec-searchnavRole__infos {
padding-left: 0;
padding-right: 0;
border-top: 1px solid #ccc;
padding-top: 16px;
flex-direction: row; } }
.ec-searchnavRole .ec-searchnavRole__counter {
margin-bottom: 16px;
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-searchnavRole .ec-searchnavRole__counter {
margin-bottom: 0;
width: 50%; } }
.ec-searchnavRole .ec-searchnavRole__actions {
text-align: right;
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-searchnavRole .ec-searchnavRole__actions {
width: 50%; } }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
商品一覧
商品一覧 に関する Project コンポーネントを定義します。
SP版２列、PC版４列の特殊グリッドを構成します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2
*/
.ec-shelfRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-shelfRole:after {
content: " ";
display: table; }
.ec-shelfRole:after {
clear: both; }
.ec-shelfRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-shelfRole img {
max-width: 100%; }
.ec-shelfRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-shelfRole *,
.ec-shelfRole *::before,
.ec-shelfRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-shelfRole img {
width: 100%; }
/*
商品一覧グリッド
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2.1
*/
.ec-shelfGrid {
display: flex;
margin-left: 0;
margin-right: 0;
flex-wrap: wrap;
padding: 0;
row-gap: 30px;
list-style: none; }
.ec-shelfGrid a {
color: inherit;
text-decoration: none; }
.ec-shelfGrid a:hover {
text-decoration: none; }
@media only screen and (min-width: 768px) {
.ec-shelfGrid {
margin-left: -16px;
margin-right: -16px; } }
.ec-shelfGrid .ec-shelfGrid__item {
/*margin-bottom: 36px;*/
width: 50%;
display: flex;
flex-direction: column; }
.ec-shelfGrid .ec-shelfGrid__item-image {
margin-bottom: 10px;
text-align: center; }
.ec-shelfGrid .ec-shelfGrid__item img {
width: auto;
max-height: 100%; }
@media only screen and (min-width: 768px) {
.ec-shelfGrid .ec-shelfGrid__item {
padding: 0 16px;
width: 25%; } }
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
margin-top: auto;
margin-bottom: 15px; }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
padding-right: 8px; }
@media only screen and (min-width: 768px) {
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
padding: 0 16px; } }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
padding-left: 8px; }
@media only screen and (min-width: 768px) {
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
padding: 0 16px; } }
.ec-shelfGrid .ec-shelfGrid__title {
margin-bottom: 7px; }
.ec-shelfGrid .ec-shelfGrid__plice {
font-weight: bold; }
/*
13.2.2 商品一覧グリッド（中央寄せ）
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。
商品のあまりはセンタリングされ、中央に表示されます。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGridCenter
Styleguide 13.2.2
*/
.ec-shelfGridCenter {
display: flex;
margin-left: 0;
margin-right: 0;
flex-wrap: wrap;
padding: 0;
list-style: none;
justify-content: center; }
.ec-shelfGridCenter a {
color: inherit;
text-decoration: none; }
.ec-shelfGridCenter a:hover {
text-decoration: none; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.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: 768px) {
.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: 768px) {
.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 {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%; }
.ec-modal .ec-modal-wrap {
position: relative;
border-radius: 2px;
border: 1px solid #333;
background-color: #fff;
width: 90%;
margin: 20px;
padding: 40px 5px; }
@media only screen and (min-width: 768px) {
.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-role {
margin-top: 20px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
商品検索条件
商品検索条件 に関する Project コンポーネントを定義します。
Markup:
include /assets/tmpl/elements/13.5.search.pug
+ec-searchRole__cond
+ec-searchRole__condItem
Styleguide 13.5
*/
.ec-searchRole {
display: block; }
.ec-searchRole .ec-searchRole__cond {
display: flex;
flex-direction: column;
/*padding: 10px;*/
/*background-color: #EC9CB4;*/
row-gap: 10px; }
.ec-searchRole .ec-searchRole__condItem {
display: flex;
flex-direction: column;
/*padding: 10px 5px;*/
/*background-color: #EC9CB4;*/ }
.ec-searchRole .ec-searchRole__condItemName {
display: flex;
justify-content: flex-start;
align-items: center;
/*width: 15%;*/
margin-bottom: 5px;
padding: 3px 10px;
background-color: #E7DDE0;
font-weight: bold; }
.ec-searchRole .ec-searchRole__condItemValues {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
/*width: 85%;*/
gap: 5px; }
.ec-searchRole .ec-searchRole__condItemValuesValue {
display: flex;
align-items: center;
/*width: calc((100% - 5px * 4) / 5);*/
margin: 0;
padding: 0 5px;
background-color: #FFFFFF;
border: #808080 1px solid;
border-radius: 5px; }
.ec-searchRole .ec-searchRole__condItemValuesValue.-color {
justify-content: space-between; }
.ec-searchRole .ec-searchRole__condItemValuesValueLabel {
display: inline-block;
margin: 7px 0 5px;
line-height: 1; }
.ec-searchRole .ec-searchRole__condItemValuesValueSample {
width: 22px;
height: 22px;
margin-left: 5px;
border-radius: 3px; }
.ec-searchRole .ec-searchRole__condItem:not(:first-child) {
margin-top: 5px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
商品詳細
商品詳細ページに関する Project コンポーネントを定義します。
ex [商品詳細ページ](http://demo3.ec-cube.net/products/detail/18)
Markup:
include /assets/tmpl/elements/14.1.product.pug
+ec-productSimpleRole
Styleguide 14.1
*/
.ec-productRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
padding: 0; }
.ec-productRole:after {
content: " ";
display: table; }
.ec-productRole:after {
clear: both; }
.ec-productRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-productRole img {
max-width: 100%; }
.ec-productRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-productRole *,
.ec-productRole *::before,
.ec-productRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-productRole img {
width: 100%; }
.ec-productRole .ec-productRole__img {
margin-right: 0;
margin-bottom: 20px; }
@media only screen and (min-width: 768px) {
.ec-productRole .ec-productRole__img {
margin-right: 16px;
margin-bottom: 0; } }
.ec-productRole .ec-productRole__profile {
margin-left: 0;
padding: 0 10px; }
@media only screen and (min-width: 768px) {
.ec-productRole .ec-productRole__profile {
margin-left: 16px;
padding: 0; } }
.ec-productRole .ec-productRole__title {
margin-bottom: 20px; }
.ec-productRole .ec-productRole__title .ec-headingTitle {
border-bottom: #888 1px solid;
font-size: 24px;
font-weight: bold; }
@media only screen and (min-width: 768px) {
.ec-productRole .ec-productRole__title .ec-headingTitle {
font-size: 32px; } }
.ec-productRole .ec-productRole__caption {
margin-bottom: 10px;
border-bottom: #888 1px solid; }
.ec-productRole .ec-productRole__itemInfo {
width: 100%;
margin-bottom: 20px;
border-collapse: collapse; }
.ec-productRole .ec-productRole__itemInfo tr th, .ec-productRole .ec-productRole__itemInfo tr td {
padding: 5px 10px;
border-top: #DDD 1px solid;
border-bottom: #DDD 1px solid;
font-size: 0.8em; }
.ec-productRole .ec-productRole__itemInfo tr th {
background-color: #F8F8F8; }
.ec-productRole .ec-productRole__itemInfo tr td {
background-color: #FFFFFF; }
.ec-productRole .ec-productRole__itemInfo tr span + span:before {
content: '・'; }
.ec-productRole .ec-productRole__itemInfoSizeGuide {
margin-left: 10px; }
.ec-productRole .ec-productRole__itemInfoSizeGuide:before {
content: '';
display: inline-block;
width: 1em;
height: 0.7em;
background-image: url(/html/template/lovely/assets/icon/arrow3R.svg);
background-position: center left 0;
background-size: contain;
background-repeat: no-repeat; }
.ec-productRole .ec-productRole__tags {
margin-top: 16px;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__tag {
display: inline-block;
padding: 2px 5px;
list-style: none;
font-size: 80%;
color: #525263;
border: solid 1px #D7DADD;
border-radius: 3px;
background-color: #F5F7F8; }
.ec-productRole .ec-productRole__priceRegular {
padding-top: 14px; }
.ec-productRole .ec-productRole__priceRegularTax {
margin-left: 5px;
font-size: 10px; }
.ec-productRole .ec-productRole__price {
color: #DE5D50;
/*font-size: 28px;*/
padding: 14px 0;
border-bottom: 1px dotted #ccc;
line-height: 1; }
.ec-productRole .ec-productRole__code {
padding: 14px 0;
border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__priceTotal {
margin-top: 40px;
color: #DE5D50;
font-size: 26px;
font-weight: bold;
padding: 14px 0;
border-bottom: 0;
line-height: 1; }
@media only screen and (min-width: 768px) {
.ec-productRole .ec-productRole__priceTotal {
border-bottom: 1px dotted #ccc; } }
.ec-productRole .ec-productRole__category {
padding: 14px 0;
border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__category a {
color: #33A8D0; }
.ec-productRole .ec-productRole__category ul {
list-style: none;
padding: 0;
margin: 0; }
.ec-productRole .ec-productRole__actions {
padding: 14px 0; }
.ec-productRole .ec-productRole__actions .ec-select select {
height: 40px;
max-width: 100%;
min-width: 100%; }
@media only screen and (min-width: 768px) {
.ec-productRole .ec-productRole__actions .ec-select select {
min-width: 350px;
max-width: 350px; } }
.ec-productRole .ec-productRole__btn {
width: 100%;
margin-bottom: 10px; }
@media only screen and (min-width: 768px) {
.ec-productRole .ec-productRole__btn {
width: 60%;
margin-bottom: 16px;
min-width: 350px; } }
.ec-productRole .ec-productRole__description {
margin-bottom: 20px; }
.ec-productRole .ec-grid2 {
column-gap: 10px; }
.ec-productCalendarCaption {
margin-top: 40px;
font-size: 1.2em;
font-weight: bold; }
.ec-productCalendar {
position: relative;
width: 100%;
height: 300px;
background-color: #FFF;
border: #EC9CB4 5px solid;
overflow-y: auto; }
@media only screen and (max-width: 767px) {
.ec-productCalendar {
overflow-y: scroll; }
.ec-productCalendar::-webkit-scrollbar {
width: 40px; }
.ec-productCalendar::-webkit-scrollbar-track {
background-color: #CCC; }
.ec-productCalendar::-webkit-scrollbar-button {
width: 0px;
height: 0px; }
.ec-productCalendar::-webkit-scrollbar-thumb {
width: 34px;
height: 34px;
background-color: #EC9CB4;
background-clip: padding-box;
border-left: 3px solid transparent;
border-right: 2px solid transparent;
border-radius: 20px; } }
.ec-productCalendar .ec-productCalendar__weekdays {
position: sticky;
top: 0;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
column-gap: 1px;
background-color: #FFF;
border-bottom: #888 1px solid; }
.ec-productCalendar .ec-productCalendar__weekdays div {
display: flex;
justify-content: center;
width: calc(100% / 7);
background-color: #EEE; }
.ec-productCalendar .ec-productCalendar__days {
display: flex;
flex-direction: column;
width: 100%;
row-gap: 1px; }
.ec-productCalendar .ec-productCalendar__month {
display: flex;
justify-content: center;
font-weight: bold;
padding: 3px 0;
background-color: #555;
color: #FFF; }
.ec-productCalendar .ec-productCalendar__week {
display: flex;
flex-wrap: nowrap;
margin: 0;
padding: 0;
column-gap: 1px; }
.ec-productCalendar .ec-productCalendar__day {
display: flex;
justify-content: center;
align-items: center;
width: calc(100% / 7);
border-radius: 0;
cursor: default; }
.ec-productCalendar .ec-productCalendar__day span {
display: flex;
justify-content: center;
align-items: center;
width: 1.5em;
height: 1.5em;
border-radius: 50%; }
.ec-productCalendar .ec-productCalendar__day[data-today="1"] span {
background-color: #FC8; }
.ec-productCalendar .ec-productCalendar__day[data-status="0"] {
cursor: pointer; }
.ec-productCalendar .ec-productCalendar__day[data-status="1"] {
background-color: #CCC; }
.ec-productCalendar .ec-productCalendar__day[data-status="91"], .ec-productCalendar .ec-productCalendar__day[data-status="92"] {
background-color: #EEE;
color: #888; }
.ec-productCalendar .ec-productCalendar__day[data-status="93"], .ec-productCalendar .ec-productCalendar__day[data-status="94"] {
background-color: #EEE;
color: #888; }
@media only screen and (min-width: 768px) {
.ec-productCalendar .ec-productCalendar__day:hover {
background-color: #EEE; } }
.ec-productCalendar .ec-productCalendar__day[data-select="1"] {
background-color: #ADF; }
.ec-productCalendar .ec-productCalendar__day[data-start="1"] {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px; }
.ec-productCalendar .ec-productCalendar__day[data-end="1"] {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px; }
.ec-orderSche {
width: 100%;
margin-top: 10px;
border-collapse: collapse; }
.ec-orderSche tr th, .ec-orderSche tr td {
padding: 5px 10px;
border-top: #DDD 1px solid;
border-bottom: #DDD 1px solid;
font-size: 1em; }
.ec-orderSche tr th {
width: 10em;
background-color: #F8F8F8;
font-weight: normal; }
.ec-orderSche tr td {
background-color: #FFFFFF; }
.ec-orderSche tr span + span:before {
content: '・'; }
.ec-orderGuarantee {
margin-top: 40px; }
.ec-orderGuaranteeCaption {
font-size: 1.2em;
font-weight: bold; }
.ec-orderGuarantee__about {
margin-top: 5px;
font-size: 0.9em; }
.ec-orderGuarantee__about a:before {
content: '';
display: inline-block;
width: 1em;
height: 0.7em;
background-image: url(/html/template/lovely/assets/icon/arrow3R.svg);
background-position: center left 0;
background-size: contain;
background-repeat: no-repeat; }
.ec-coordinateProductsRole {
margin-top: 50px; }
.ec-productsHistoryRole {
margin-top: 50px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
カート
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [カートページ](http://demo3.ec-cube.net/shopping)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartRole
Styleguide 15.1
*/
.ec-cartRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end; }
.ec-cartRole:after {
content: " ";
display: table; }
.ec-cartRole:after {
clear: both; }
.ec-cartRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-cartRole img {
max-width: 100%; }
.ec-cartRole html {
-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%; }
.ec-cartRole::before {
display: none; }
.ec-cartRole .ec-cartRole__progress {
width: 100%;
text-align: center; }
.ec-cartRole .ec-cartRole__error {
width: 100%;
text-align: center; }
.ec-cartRole .ec-cartRole__error .ec-alert-warning {
max-width: 80%;
display: inline-block; }
.ec-cartRole .ec-cartRole__totalText {
margin-bottom: 0;
padding: 16px 0 6px;
width: 100%;
text-align: center;
font-weight: normal; }
@media only screen and (min-width: 768px) {
.ec-cartRole .ec-cartRole__totalText {
margin-bottom: 30px;
padding: 0; } }
.ec-cartRole .ec-cartRole__cart {
margin: 0;
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-cartRole .ec-cartRole__cart {
margin: 0 10%; } }
.ec-cartRole .ec-cartRole__actions {
text-align: right;
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-cartRole .ec-cartRole__actions {
width: 30%;
margin-right: 10%; } }
.ec-cartRole .ec-cartRole__total {
padding: 15px 0 30px;
font-weight: bold;
font-size: 16px; }
.ec-cartRole .ec-cartRole__totalAmount {
margin-left: 30px;
color: #de5d50;
font-size: 16px; }
@media only screen and (min-width: 768px) {
.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: table;
border-top: 1px dotted #ccc;
width: 100%; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.ec-cartHeader {
display: table-row; } }
.ec-cartHeader .ec-cartHeader__label {
display: table-cell;
padding: 16px 5px;
text-align: center;
background: #FFFFFF;
overflow-x: hidden;
word-break: keep-all;
font-weight: bold; }
.ec-cartCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-cartCompleteRole:after {
content: " ";
display: table; }
.ec-cartCompleteRole:after {
clear: both; }
.ec-cartCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-cartCompleteRole img {
max-width: 100%; }
.ec-cartCompleteRole html {
-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%; }
/*
カート内商品
カート内のアイテムを表示するテーブル行です。
スマホでは非表示となります。
ex [カートページ テーブル部分](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
+ec-cartRow
sg-wrapper:
Styleguide 15.1.4
*/
.ec-cartRow {
display: table-row; }
.ec-cartRow .ec-cartRow__delColumn {
border-bottom: 1px dotted #ccc;
text-align: center;
display: table-cell;
width: 14%;
vertical-align: middle; }
@media only screen and (min-width: 768px) {
.ec-cartRow .ec-cartRow__delColumn {
width: 45px; } }
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
width: 1.5em;
height: 1.5em; }
@media only screen and (min-width: 768px) {
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
width: 1em;
height: 1em; } }
.ec-cartRow .ec-cartRow__contentColumn {
border-bottom: 1px dotted #ccc;
padding: 10px 0;
display: table; }
@media only screen and (min-width: 768px) {
.ec-cartRow .ec-cartRow__contentColumn {
display: table-cell; } }
.ec-cartRow .ec-cartRow__img {
display: table-cell;
width: 40%;
vertical-align: middle;
padding-right: 10px; }
@media only screen and (min-width: 768px) {
.ec-cartRow .ec-cartRow__img {
display: inline-block;
min-width: 80px;
max-width: 100px;
padding-right: 0; } }
.ec-cartRow .ec-cartRow__summary {
display: table-cell;
margin-left: 5px;
font-weight: bold;
vertical-align: middle;
width: 46%; }
@media only screen and (min-width: 768px) {
.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__sutbtotalSP {
display: block;
font-weight: normal; }
@media only screen and (min-width: 768px) {
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
display: none; } }
.ec-cartRow .ec-cartRow__amountColumn {
display: table-cell;
border-bottom: 1px dotted #ccc;
vertical-align: middle;
text-align: center;
width: 20%; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
display: block; } }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
display: block;
margin-bottom: 10px; }
@media only screen and (min-width: 768px) {
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
display: none; } }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
display: flex;
justify-content: center; }
@media only screen and (min-width: 768px) {
.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: .8em;
height: .8em;
position: absolute;
top: 28%;
left: 50%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
margin: 0 2px;
display: inline-block;
border: 2px solid #c9c9c9;
border-radius: 50%;
width: 30px;
min-width: 30px;
max-width: 30px;
height: 30px;
cursor: pointer;
line-height: 40px;
vertical-align: middle;
position: relative;
text-align: center;
background: #fff; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img {
display: block;
margin-left: -0.4em;
width: .8em;
height: .8em;
position: absolute;
top: 28%;
left: 50%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
cursor: default; }
.ec-cartRow .ec-cartRow__subtotalColumn {
display: none;
border-bottom: 1px dotted #ccc;
text-align: right;
width: 16.66666667%; }
@media only screen and (min-width: 768px) {
.ec-cartRow .ec-cartRow__subtotalColumn {
display: table-cell; } }
/*
カート内商品(商品が１の場合)
商品が１の場合はカート商品を減らす「-」ボタンの無効化状態になります。
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__inner {
display: inline-block; }
.ec-alert-warning .ec-alert-warning__inner__item {
display: flex;
flex-wrap: wrap;
justify-content: center; }
.ec-alert-warning .ec-alert-warning__icon {
display: inline-block;
margin-right: 1rem;
width: 20px;
height: 20px;
color: #fff;
fill: #fff;
vertical-align: top; }
.ec-alert-warning .ec-alert-warning__text {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
position: relative;
flex: 1;
word-break: break-all; }
/*
アラート(空)
カートが空であることを示す警告メッセージです。
ex [マイページ カート](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-off3Grid
.ec-off3Grid__cell
+ec-alert-warningEnpty
Styleguide 15.1.7
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
注文内容確認
カート内 注文内容確認に関する Project コンポーネントを定義します。
ex [マイページ 注文詳細](http://demo3.ec-cube.net/shopping)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderRole
Styleguide 15.2
*/
.ec-orderRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
display: flex;
flex-direction: column;
margin-top: 0; }
.ec-orderRole:after {
content: " ";
display: table; }
.ec-orderRole:after {
clear: both; }
.ec-orderRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-orderRole 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: 768px) {
.ec-orderRole {
margin-top: 20px;
padding-left: 0;
padding-right: 0;
flex-direction: row; } }
.ec-orderRole .ec-inlineBtn {
font-weight: normal; }
.mypage .ec-orderRole .ec-inlineBtn {
font-weight: bold; }
.ec-orderRole .ec-orderRole__detail {
padding: 0;
width: 100%; }
@media only screen and (min-width: 768px) {
.ec-orderRole .ec-orderRole__detail {
padding: 0 16px 0 0;
width: 66.66666%; } }
.ec-orderRole .ec-orderRole__summary {
width: 100%; }
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: inline-block; }
@media only screen and (min-width: 768px) {
.ec-orderRole .ec-orderRole__summary {
width: 33.33333%;
padding: 0; }
.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: 768px) {
.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: 768px) {
.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: 768px) {
.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%; }
.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: block; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.ec-AddAddress .ec-AddAddress__selectAddress select {
min-width: 350px; } }
.ec-AddAddress .ec-AddAddress__selectNumber {
display: block; }
@media only screen and (min-width: 768px) {
.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; }
@media only screen and (min-width: 768px) {
.ec-AddAddress .ec-AddAddress__actions {
width: 33.3333%;
min-width: 250px;
margin: 0 auto; } }
.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: 768px) {
.ec-historyRole .ec-historyRole__contents {
flex-direction: row; } }
.ec-historyRole .ec-historyRole__header {
width: 100%; }
@media only screen and (min-width: 768px) {
.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: 1rem;
font-weight: bold; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
margin-bottom: 8px;
font-size: 1rem;
font-weight: bold; }
@media only screen and (min-width: 768px) {
.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: .5rem;
font-size: 1.6rem; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
display: inline-block;
padding-left: .5rem;
content: "/";
font-weight: bold; }
/*
注文履歴一覧ヘッダ
注文履歴一覧で使用するヘッダのコンポーネントを定義します。
ex [マイページ 注文履歴一覧ヘッダ](http://demo3.ec-cube.net/mypage)
(要ログイン)
Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyHeader
p hofe
Styleguide 16.1.2
*/
.ec-historyListHeader .ec-historyListHeader__date {
font-weight: bold;
font-size: 16px; }
@media only screen and (min-width: 768px) {
.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: 768px) {
.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 {
display: table;
width: 100%; }
.ec-addressList .ec-addressList__item {
display: table-row;
width: 100%;
position: relative;
border-bottom: 1px dotted #ccc; }
.ec-addressList .ec-addressList__remove {
display: table-cell;
width: 20px;
vertical-align: middle;
padding: 16px;
text-align: center; }
.ec-addressList .ec-addressList__remove input[type="radio"] {
width: 1.2em;
height: 1.2em; }
.ec-addressList .ec-addressList__remove input[type="radio"]:hover {
cursor: pointer; }
.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__address :hover {
cursor: pointer; }
.ec-addressList .ec-addressList__action {
position: relative;
vertical-align: middle;
text-align: right;
top: 27px;
padding-right: 10px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
パスワードリセット
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [パスワードリセット画面](http://demo3.ec-cube.net/forgot)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/18.1.password.pug
+ec-passwordRole
Styleguide 18.1
*/
.ec-forgotRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-forgotRole:after {
content: " ";
display: table; }
.ec-forgotRole:after {
clear: both; }
.ec-forgotRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-forgotRole img {
max-width: 100%; }
.ec-forgotRole html {
-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-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-registerRole:after {
content: " ";
display: table; }
.ec-registerRole:after {
clear: both; }
.ec-registerRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-registerRole img {
max-width: 100%; }
.ec-registerRole html {
-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; }
.ec-registerRole .ec-registerRole__actions p {
margin-bottom: 16px; }
.ec-registerRole .ec-blockBtn--action {
margin-bottom: 16px; }
.ec-registerCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-registerCompleteRole:after {
content: " ";
display: table; }
.ec-registerCompleteRole:after {
clear: both; }
.ec-registerCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-registerCompleteRole img {
max-width: 100%; }
.ec-registerCompleteRole html {
-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%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
お問い合わせ
お問い合わせ に関する Project コンポーネントを定義します。
ex [お問い合わせ](http://demo3.ec-cube.net/contact)
Markup:
include /assets/tmpl/elements/19.2.contact.pug
+ec-contactRole
Styleguide 19.2
*/
.ec-contactRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-contactRole:after {
content: " ";
display: table; }
.ec-contactRole:after {
clear: both; }
.ec-contactRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-contactRole img {
max-width: 100%; }
.ec-contactRole html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.ec-contactRole *,
.ec-contactRole *::before,
.ec-contactRole *::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit; }
.ec-contactRole img {
width: 100%; }
.ec-contactRole .ec-contactRole__actions {
padding-top: 20px; }
.ec-contactRole p {
margin: 16px 0; }
.ec-contactConfirmRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-contactConfirmRole:after {
content: " ";
display: table; }
.ec-contactConfirmRole:after {
clear: both; }
.ec-contactConfirmRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-contactConfirmRole img {
max-width: 100%; }
.ec-contactConfirmRole html {
-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-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-contactCompleteRole:after {
content: " ";
display: table; }
.ec-contactCompleteRole:after {
clear: both; }
.ec-contactCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-contactCompleteRole img {
max-width: 100%; }
.ec-contactCompleteRole html {
-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 デフォルト準拠
*/
/*
お客様情報の入力
ログインせずゲストとして商品を購入する際の、お客様情報の入力 に関する Project コンポーネントを定義します。
ex [カートSTEP2 お客様情報の入力(ゲスト購入)](http://demo3.ec-cube.net/shopping/nonmember)
Markup:
include /assets/tmpl/elements/19.3.customer.pug
+ec-customerRole
hoge
Styleguide 19.3
*/
.ec-customerRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-customerRole:after {
content: " ";
display: table; }
.ec-customerRole:after {
clear: both; }
.ec-customerRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-customerRole img {
max-width: 100%; }
.ec-customerRole html {
-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: 768px) {
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 16px; } }
.ec-contactConfirmRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-contactConfirmRole:after {
content: " ";
display: table; }
.ec-contactConfirmRole:after {
clear: both; }
.ec-contactConfirmRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-contactConfirmRole img {
max-width: 100%; }
.ec-contactConfirmRole html {
-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-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-contactCompleteRole:after {
content: " ";
display: table; }
.ec-contactCompleteRole:after {
clear: both; }
.ec-contactCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-contactCompleteRole img {
max-width: 100%; }
.ec-contactCompleteRole html {
-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: 16px;
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; }
.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-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
text-align: center;
padding: 0 16px; }
.ec-withdrawRole:after {
content: " ";
display: table; }
.ec-withdrawRole:after {
clear: both; }
.ec-withdrawRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-withdrawRole img {
max-width: 100%; }
.ec-withdrawRole html {
-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; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
会員情報編集完了
会員情報編集完了で使用するページコンポーネントです。
ex [会員情報編集完了](http://demo3.ec-cube.net/mypage/change_complete)
Markup:
include /assets/tmpl/elements/22.1.editComplete.pug
+ec-userEditCompleteRole
Styleguide 22.1
*/
.ec-userEditCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
text-align: center;
padding: 0 16px; }
.ec-userEditCompleteRole:after {
content: " ";
display: table; }
.ec-userEditCompleteRole:after {
clear: both; }
.ec-userEditCompleteRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-userEditCompleteRole img {
max-width: 100%; }
.ec-userEditCompleteRole html {
-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: 768px) {
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
font-size: 32px; } }
.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
margin-bottom: 32px;
font-size: 16px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
ガイドセクション
利用者向け文書のコンテナブロックです。
ex [各種文書 コンテナ](http://demo3.ec-cube.net/help/guide)
Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-guide
Styleguide 11.1
*/
.ec-guideDescription {
margin-bottom: 30px; }
.ec-guideIndex__list {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 0; }
.ec-guideIndex__listItem {
display: block;
margin: 0;
padding: 5px 10px;
border: #EC9CB4 1px solid;
border-radius: calc(0.7em + 5px); }
.ec-guideBody h3, .ec-guideBody .h3 {
position: relative;
margin: 30px 0 20px;
border-bottom: #EC9CB4 3px solid; }
.ec-guideBody h3 + div, .ec-guideBody .h3 + div {
margin-top: 10px; }
.ec-guideBody h3 [id], .ec-guideBody .h3 [id] {
position: absolute;
top: -30px; }
.ec-guideBody h4, .ec-guideBody .h4 {
display: flex;
align-items: center;
margin: 30px 0 20px;
padding-left: 5px;
/*border-left: #EC9CB4 1em solid;*/ }
.ec-guideBody h4:before, .ec-guideBody .h4:before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
background-color: #EC9CB4; }
.ec-guideBody__tableTitle {
font-size: 1.2em; }
.ec-guideBody table {
width: 100%;
border-collapse: collapse; }
.ec-guideBody table th, .ec-guideBody table td {
padding: 3px 3px;
border: #888 1px solid; }
.ec-guideBody table th {
background-color: #EC9CB4;
color: #FFF; }
.ec-guideBody__q {
display: block;
width: fit-content;
padding: 5px 10px;
background-color: #FFF;
border-radius: 10px; }
.ec-guideBody__q:before {
content: 'Q.';
display: inline-block;
margin-right: 5px;
font-weight: bold; }
.ec-guideBody__a {
display: block;
width: fit-content;
margin: 5px 0 20px 20px;
padding: 5px 10px;
background-color: #EEE;
border-radius: 10px; }
.ec-guideBody__a:before {
content: 'A.';
display: inline-block;
margin-right: 5px;
font-weight: bold; }
.ec-guideBody__a__link {
display: flex;
/*justify-content: flex-end;*/ }
.ec-guideBody__a__link a {
display: flex;
align-items: center; }
.ec-guideBody__a__link a:before {
content: '';
display: inline-block;
width: 1em;
height: 0.7em;
background-image: url(/html/template/lovely/assets/icon/arrow3R.svg);
background-position: center left 0;
background-size: contain;
background-repeat: no-repeat; }
.ec-guideBody__right {
text-align: right; }
.ec-guideBody__heading {
margin-top: 20px;
margin-bottom: 10px;
font-size: 1.2em;
font-weight: bold; }
.ec-guideBody__text {
margin: 0;
padding: 0 0 0;
white-space: normal; }
.ec-guideBody__card {
display: block;
width: fit-content;
padding: 5px;
border: #888888 1px solid; }
.ec-guideBody__note {
font-size: 0.8em; }
.ec-guideBody__indent {
margin-left: 1em; }
.ec-guideBody__ul {
margin: 0;
padding-left: 1.1em; }
.ec-guideBody__ask {
font-size: 1.2em;
font-weight: bold; }
.ec-guideBody .-mt10 {
margin-top: 10px; }
.ec-guideBody .-mt20 {
margin-top: 20px; }
.ec-guideBody .-mb10 {
margin-bottom: 10px; }
.ec-guideBody .-mb20 {
margin-bottom: 20px; }
.ec-guideBody .-fs110 {
font-size: 1.1em; }
.ec-guideBody .-fs120 {
font-size: 1.2em; }
.ec-guideBody .-red {
color: red; }
.ec-guideBody .-pink {
color: #EC9CB4; }
/*# sourceMappingURL=style.css.map */