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 デフォルト準拠
*/
/*
その他のボタン
通常のボタンや、アイコンボタン以外のボタンを定義します。
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;
letter-spacing: .65px;
line-height: 33px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 600;
font-style: normal;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
フォーム部品(テキスト)
テキストや数値の入力項目に関する要素を定義します。
sg-wrapper:
Styleguide 3.1
*/
/*
フォーム
`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。
ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change)
Markup:
p.ec-input
input(type="number")
p.ec-input
textarea(rows="6")
Styleguide 3.1.1
*/
.ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"] {
box-sizing: border-box; }
.ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal; }
.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] {
display: block; }
.ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] {
display: block;
width: 100%; }
.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
height: auto; }
.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
color: #999; }
.ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
color: #999; }
.ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
background-color: #eeeeee;
opacity: 1; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
cursor: not-allowed; }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
color: #999; }
.ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
color: #999; }
.ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
background-color: #eeeeee;
opacity: 1; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
cursor: not-allowed; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
color: #999; }
.ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
color: #999; }
.ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
background-color: #eeeeee;
opacity: 1; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
cursor: not-allowed; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
box-shadow: none;
border-color: #3c8dbc; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
height: 40px;
margin-bottom: 10px; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
height: auto;
min-height: 100px; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0; }
.ec-checkbox .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-checkbox input, .error.ec-checkbox label {
border-color: #CF3F34;
background: #FDF1F0; }
/*
フォーム（text２つ）
姓名など2つ入力させたい入力項目で使用します。
入力フォームを半分で用意したいときにも利用可能です。
ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change)
Markup:
p.ec-halfInput
input(type="text")
input(type="text")
p.ec-halfInput
input(type="text")
Styleguide 3.1.2
*/
.ec-halfInput input[type='text'] {
display: inline-block;
width: 47%;
margin-left: 2%; }
.ec-halfInput input[type='text']:first-child {
margin-left: 0; }
/*
数量ボタン
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [商品詳細画面 数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)
Markup:
.ec-numberInput
span 数量
input(type="number",value="0")
Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
display: inline-block;
width: auto;
max-width: 100px;
text-align: right; }
/*
郵便番号フォーム
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面 郵便番号部分](http://demo3.ec-cube.net/mypage/change)
Markup:
.ec-zipInput
span 〒
input(type="text")
.ec-zipInputHelp
a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
.ec-zipInputHelp__icon
.ec-icon
img(src='/moc/icon/question-white.svg', alt='')
span 郵便番号検索
.ec-zipAuto
a.ec-inlineBtn 郵便番号から自動入力
Styleguide 3.1.4
*/
.ec-zipInput {
display: inline-block; }
.ec-zipInput input {
display: inline-block;
text-align: left;
width: auto;
max-width: 8em;
font-size: 16px; }
.ec-zipInput span {
display: inline-block;
padding: 0 5px 0 3px;
margin-left: 5px; }
.ec-zipInputHelp {
display: inline-block;
margin-left: 10px;
margin-bottom: 16px;
vertical-align: baseline;
line-height: 0; }
.ec-zipInputHelp .ec-zipInputHelp__icon {
display: inline-block;
margin-top: -10px;
width: 20px;
height: 20px;
background: #525263;
border-radius: 50%;
font-size: 13px;
position: relative;
top: -6px; }
.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
width: 1em;
height: 1em;
position: relative;
left: 3px;
top: 3px; }
.ec-zipInputHelp span {
margin-left: 8px;
display: inline-block;
color: #0092C4;
vertical-align: 3px; }
.ec-zipAuto {
margin-bottom: 16px; }
.ec-zipAuto .ec-inlineBtn {
font-weight: normal; }
/*
電話番号ボタン
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面 電話番号部分](http://demo3.ec-cube.net/mypage/change)
Markup:
.ec-telInput
input(type="text")
Styleguide 3.1.5
*/
.ec-telInput input {
max-width: 10em;
text-align: left; }
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
フォーム部品(テキスト)
テキストや数値の入力項目に関する要素を定義します。
sg-wrapper:
Styleguide 3.1
*/
/*
フォーム
`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。
ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change)
Markup:
p.ec-input
input(type="number")
p.ec-input
textarea(rows="6")
Styleguide 3.1.1
*/
.ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"] {
box-sizing: border-box; }
.ec-input input[type="radio"], .ec-halfInput input[type="radio"], .ec-numberInput input[type="radio"], .ec-zipInput input[type="radio"], .ec-telInput input[type="radio"], .ec-select input[type="radio"], .ec-birth input[type="radio"],
.ec-input input[type="checkbox"],
.ec-halfInput input[type="checkbox"],
.ec-numberInput input[type="checkbox"],
.ec-zipInput input[type="checkbox"],
.ec-telInput input[type="checkbox"],
.ec-select input[type="checkbox"],
.ec-birth input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal; }
.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"] {
display: block; }
.ec-input input[type="range"], .ec-halfInput input[type="range"], .ec-numberInput input[type="range"], .ec-zipInput input[type="range"], .ec-telInput input[type="range"], .ec-select input[type="range"], .ec-birth input[type="range"] {
display: block;
width: 100%; }
.ec-input select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple], .ec-select select[multiple], .ec-birth select[multiple],
.ec-input select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size],
.ec-select select[size],
.ec-birth select[size] {
height: auto; }
.ec-input input[type="file"]:focus, .ec-halfInput input[type="file"]:focus, .ec-numberInput input[type="file"]:focus, .ec-zipInput input[type="file"]:focus, .ec-telInput input[type="file"]:focus, .ec-select input[type="file"]:focus, .ec-birth input[type="file"]:focus,
.ec-input input[type="radio"]:focus,
.ec-halfInput input[type="radio"]:focus,
.ec-numberInput input[type="radio"]:focus,
.ec-zipInput input[type="radio"]:focus,
.ec-telInput input[type="radio"]:focus,
.ec-select input[type="radio"]:focus,
.ec-birth input[type="radio"]:focus,
.ec-input input[type="checkbox"]:focus,
.ec-halfInput input[type="checkbox"]:focus,
.ec-numberInput input[type="checkbox"]:focus,
.ec-zipInput input[type="checkbox"]:focus,
.ec-telInput input[type="checkbox"]:focus,
.ec-select input[type="checkbox"]:focus,
.ec-birth input[type="checkbox"]:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder {
color: #999; }
.ec-input input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder {
color: #999; }
.ec-input input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand, .ec-select input::-ms-expand, .ec-birth input::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled], .ec-input input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], .ec-select input[readonly], .ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
background-color: #eeeeee;
opacity: 1; }
.ec-input input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-select input[disabled], .ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
cursor: not-allowed; }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus, .ec-select select:focus, .ec-birth select:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder {
color: #999; }
.ec-input select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder {
color: #999; }
.ec-input select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand, .ec-select select::-ms-expand, .ec-birth select::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled], .ec-input select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], .ec-select select[readonly], .ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
background-color: #eeeeee;
opacity: 1; }
.ec-input select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-select select[disabled], .ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
cursor: not-allowed; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857;
color: #555555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-appearance: none;
box-shadow: none;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
border-radius: 3px; }
.ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder {
color: #999;
opacity: 1; }
.ec-input textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder {
color: #999; }
.ec-input textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder {
color: #999; }
.ec-input textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-birth textarea::-ms-expand {
border: 0;
background-color: transparent; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled], .ec-input textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], .ec-select textarea[readonly], .ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
background-color: #eeeeee;
opacity: 1; }
.ec-input textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-select textarea[disabled], .ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
cursor: not-allowed; }
.ec-input input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus, .ec-select input:focus, .ec-birth input:focus, .ec-input textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus, .ec-select textarea:focus, .ec-birth textarea:focus {
box-shadow: none;
border-color: #3c8dbc; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
height: 40px;
margin-bottom: 10px; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
height: auto;
min-height: 100px; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p {
line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-input input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input, .error.ec-select input, .error.ec-birth input, .error.ec-input select, .error.ec-halfInput select, .error.ec-numberInput select, .error.ec-zipInput select, .error.ec-telInput select, .error.ec-select select, .error.ec-birth select {
margin-bottom: 5px;
border-color: #CF3F34;
background: #FDF1F0; }
.ec-checkbox .ec-errorMessage {
margin-bottom: 25px;
font-size: 12px;
font-weight: bold;
color: #DE5D50; }
.error.ec-checkbox input, .error.ec-checkbox label {
border-color: #CF3F34;
background: #FDF1F0; }
/*
フォーム（text２つ）
姓名など2つ入力させたい入力項目で使用します。
入力フォームを半分で用意したいときにも利用可能です。
ex [会員情報編集画面 フォーム部分](http://demo3.ec-cube.net/mypage/change)
Markup:
p.ec-halfInput
input(type="text")
input(type="text")
p.ec-halfInput
input(type="text")
Styleguide 3.1.2
*/
.ec-halfInput input[type='text'] {
display: inline-block;
width: 47%;
margin-left: 2%; }
.ec-halfInput input[type='text']:first-child {
margin-left: 0; }
/*
数量ボタン
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [商品詳細画面 数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)
Markup:
.ec-numberInput
span 数量
input(type="number",value="0")
Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
display: inline-block;
width: auto;
max-width: 100px;
text-align: right; }
/*
郵便番号フォーム
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面 郵便番号部分](http://demo3.ec-cube.net/mypage/change)
Markup:
.ec-zipInput
span 〒
input(type="text")
.ec-zipInputHelp
a(href="http://www.post.japanpost.jp/zipcode/" target="_blank")
.ec-zipInputHelp__icon
.ec-icon
img(src='/moc/icon/question-white.svg', alt='')
span 郵便番号検索
.ec-zipAuto
a.ec-inlineBtn 郵便番号から自動入力
Styleguide 3.1.4
*/
.ec-zipInput {
display: inline-block; }
.ec-zipInput input {
display: inline-block;
text-align: left;
width: auto;
max-width: 8em;
font-size: 16px; }
.ec-zipInput span {
display: inline-block;
padding: 0 5px 0 3px;
margin-left: 5px; }
.ec-zipInputHelp {
display: inline-block;
margin-left: 10px;
margin-bottom: 16px;
vertical-align: baseline;
line-height: 0; }
.ec-zipInputHelp .ec-zipInputHelp__icon {
display: inline-block;
margin-top: -10px;
width: 20px;
height: 20px;
background: #525263;
border-radius: 50%;
font-size: 13px;
position: relative;
top: -6px; }
.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
width: 1em;
height: 1em;
position: relative;
left: 3px;
top: 3px; }
.ec-zipInputHelp span {
margin-left: 8px;
display: inline-block;
color: #0092C4;
vertical-align: 3px; }
.ec-zipAuto {
margin-bottom: 16px; }
.ec-zipAuto .ec-inlineBtn {
font-weight: normal; }
/*
電話番号ボタン
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面 電話番号部分](http://demo3.ec-cube.net/mypage/change)
Markup:
.ec-telInput
input(type="text")
Styleguide 3.1.5
*/
.ec-telInput input {
max-width: 10em;
text-align: left; }
/*
フォーム部品(その他)
フォーム部品でテキストの入力以外の動作要素を定義します。
sg-wrapper:
Styleguide 3.2
*/
/*
ラジオ（水平）
水平に並ぶラジオボタンフィールドです。
各要素をlabelでくくって、コーディングします。
ex [新規会員登録画面 性別選択部分](http://demo3.ec-cube.net/entry)
Markup:
.ec-radio
label
input(type="radio")
span 男性
label
input(type="radio")
span 女性
Styleguide 3.2.2
*/
.ec-radio label {
margin-right: 20px; }
.ec-radio input {
margin-right: 10px;
margin-bottom: 10px; }
.ec-radio span {
font-weight: normal; }
/*
ラジオ(垂直)
垂直に並ぶラジオボタンフィールドです。
各要素をlabelでくくって、コーディングします。
ex [購入画面 お支払方法](http://demo3.ec-cube.net/shopping)
Markup:
.ec-blockRadio
label
input(type="radio")
span 郵便振替
label
input(type="radio")
span 現金書留
label
input(type="radio")
span 銀行振込
label
input(type="radio")
span 代金引換
Styleguide 3.2.3
*/
.ec-blockRadio label {
display: block; }
.ec-blockRadio span {
padding-left: 10px;
font-weight: normal; }
/*
セレクトボックス
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [新規会員登録画面 都道府県選択部分](http://demo3.ec-cube.net/entry)
Markup:
.ec-select
select
option 都道府県を選択
option 北海道
option 青森県
option 岩手県
option ...
.ec-select
select
option 選択して下さい
option 公務員
option コンサルタント
option コンピュータ関連技術職
option コンピュータ関連以外の技術職
option ...
Styleguide 3.2.4
*/
.ec-selects {
margin-bottom: 20px;
border-bottom: 1px dotted #ccc; }
.ec-select {
margin-bottom: 16px; }
.ec-select select {
display: inline-block;
width: auto;
background-color: #f8f8f8;
-webkit-appearance: menulist;
-moz-appearance: menulist; }
.ec-select select:focus {
box-shadow: none; }
.ec-select label {
margin-right: 10px;
font-weight: bold; }
.ec-select label:nth-child(3) {
margin-left: 10px;
font-weight: bold; }
.ec-select__delivery {
display: block;
margin-right: 16px; }
.ec-select__time {
display: block; }
/*
生年月日選択
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [新規会員登録画面 生年月日選択部分](http://demo3.ec-cube.net/entry)
Markup:
.ec-birth
select
option ----
option 1960
option 1961
option 1962
option ...
span /
select
option --
option 01
option 02
option 03
option ...
span /
select
option --
option 01
option 02
option 03
option ...
Styleguide 3.2.5
*/
.ec-birth select {
display: inline-block;
width: auto;
margin: 0 0 10px;
background-color: #f8f8f8;
-webkit-appearance: menulist;
-moz-appearance: menulist; }
.ec-birth select:focus {
box-shadow: none; }
.ec-birth span {
margin-left: 5px; }
/*
チェックボックス （水平）
水平に並ぶチェックボックス フィールドです。
各要素をlabelでくくって、コーディングします。
ex [新規会員登録画面 利用規約](http://demo3.ec-cube.net/entry)
Markup:
.ec-checkbox
label
input(type="checkbox")
span 利用規約に同意する
Styleguide 3.2.6
*/
.ec-checkbox label {
display: inline-block; }
.ec-checkbox input {
margin-bottom: 10px; }
.ec-checkbox span {
font-weight: normal; }
/*
チェックボックス (垂直)
垂直に並ぶチェックボックス フィールドです。
各要素をlabelでくくって、コーディングします。
Markup:
.ec-blockCheckbox
label
input(type="checkbox")
span 利用規約に同意する
Styleguide 3.2.7
*/
.ec-blockCheckbox label {
display: block; }
.ec-blockCheckbox span {
font-weight: normal; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
フォームラベル
フォームのラベルに関する要素を定義します。
sg-wrapper:
Styleguide 3.3
*/
/*
ラベル
フォーム要素で利用するラベル要素です。
ex [お問い合わせページ ラベル部分](http://demo3.ec-cube.net/contact)
Markup:
.ec-borderedDefs
dl
dt
label.ec-label お名前
dd
.ec-input
input(type="text")
Styleguide 3.3.1
*/
.ec-label {
display: inline-block;
font-weight: bold;
margin-bottom: 5px; }
/*
必須ラベル
必須文字を表示するラベル要素です。
ex [お問い合わせページ 必須ラベル部分](http://demo3.ec-cube.net/contact)
Markup:
.ec-borderedDefs
dl
dt
label.ec-label お名前
span.ec-required 必須
dd
.ec-input
input(type="text")
Styleguide 3.3.2
*/
.ec-required {
display: inline-block;
margin-left: .8em;
vertical-align: 2px;
color: #DE5D50;
font-size: 12px;
font-weight: normal; }
/*
アイコン
デフォルトテンプレートのアイコンは`.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; }
.ec-grid2 .ec-grid2__cell {
position: relative;
min-height: 1px; }
.ec-grid2 .ec-grid2__cell2 {
position: relative;
min-height: 1px; }
/*
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; }
.ec-grid3 .ec-grid3__cell {
position: relative;
min-height: 1px; }
.ec-grid3 .ec-grid3__cell2 {
position: relative;
min-height: 1px; }
.ec-grid3 .ec-grid3__cell3 {
position: relative;
min-height: 1px; }
/*
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; }
.ec-grid4 .ec-grid4__cell {
position: relative;
min-height: 1px; }
/*
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; }
.ec-grid6 .ec-grid6__cell {
position: relative;
min-height: 1px; }
.ec-grid6 .ec-grid6__cell2 {
position: relative;
min-height: 1px; }
.ec-grid6 .ec-grid6__cell3 {
position: relative;
min-height: 1px; }
/*
中央寄せグリッド 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; }
.ec-off1Grid .ec-off1Grid__cell {
margin: 0; }
/*
中央寄せグリッド 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; }
.ec-off2Grid .ec-off2Grid__cell {
margin: 0; }
/*
中央寄せグリッド 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; }
.ec-off3Grid .ec-off3Grid__cell {
margin: 0; }
/*
中央寄せグリッド 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; }
.ec-off4Grid .ec-off4Grid__cell {
margin: 0; }
/*
グリッドオプション
グリッドのセルに対して「左寄せ」「中央寄せ」「右寄せ」のオプションを付与することができます。
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; }
.ec-imageGrid .ec-imageGrid__img img {
width: 100%;
max-width: 110px;
max-height: 200px;
}
.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; }
.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; }
.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; }
.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; }
.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; }
.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; }
.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; }
.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; }
.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; }
.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 デフォルト準拠
*/
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden; }
100% {
opacity: 1;
visibility: visible; } }
@keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden; }
100% {
opacity: 1;
visibility: visible; } }
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
visibility: visible; }
100% {
opacity: 0;
visibility: hidden; } }
@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; }
.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%; }
.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
*/
.ec-cartNavi {
display: inline-block;
padding: 10px 0 0 20px;
width: auto;
color: black;
background: transparent; }
.ec-cartNavi .ec-cartNavi__icon {
display: inline-block;
font-size: 20px;
display: inline-block;
opacity: 1;
visibility: visible;
-webkit-animation: fadeIn 200ms linear 0s;
animation: fadeIn 200ms linear 0s;
position: relative; }
.ec-cartNavi .ec-cartNavi__badge {
display: inline-block;
border-radius: 99999px;
box-sizing: border-box;
padding: 5px;
height: 17px;
font-size: 10px;
line-height: 0.7;
vertical-align: top;
color: #fff;
text-align: left;
white-space: nowrap;
background-color: #DE5D50;
position: absolute;
left: 60%;
top: -10px; }
.ec-cartNavi .ec-cartNavi__price {
display: none; }
.ec-cartNavi.is-active .ec-cartNavi__icon:before {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: 900; }
.ec-cartNavi.is-active .ec-cartNavi__badge {
display: none; }
/*
カートナビゲーションのポップアップ(商品詳細)
カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
div(style="height:350px;")
// 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
.is_active
.ec-cartNavi
.ec-cartNavi__icon
img(src='/moc/icon/cart-dark.svg', alt='close')
.ec-cartNavi__iconClose
img(src='/moc/icon/cross-dark.svg', alt='close')
.ec-cartNavi__badge 1
.ec-cartNavi__label
| 合計
.ec-cartNavi__price ¥1920
+b.ec-cartNaviIsset
+e.cart
+e.cartImage
img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
+e.cartContent
+e.cartContentTitle ミニテーブル
+e.cartContentPrice ¥ 12,960
+e.cartContentTax 税込
+e.cartContentNumber 数量：1
+e.action
a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
a.ec-blockBtn.ec-cartNavi--cancel キャンセル
Styleguide 7.3.6
*/
.ec-cartNaviIsset {
display: none;
width: 100%;
text-align: center;
background: #f8f8f8;
box-sizing: border-box;
padding: 16px;
z-index: 20;
position: absolute;
right: 0; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart {
border-bottom: 1px solid #E8E8E8;
margin-bottom: 16px;
padding-bottom: 32px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
content: " ";
display: table; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
clear: both; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage {
float: left;
width: 45%; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage img {
width: 100%; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
float: right;
width: 55%;
padding-left: 16px;
text-align: left;
box-sizing: border-box; }
.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
color: #fff;
margin-bottom: 8px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
margin-bottom: 8px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
font-weight: bold; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax {
display: inline-block;
font-size: 12px;
font-weight: normal;
margin-left: 2px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
font-size: 14px; }
.ec-cartNaviIsset.is-active {
display: block; }
/*
カートナビゲーションのポップアップ(商品なし)
カートナビゲーションのポップアップを表示します。商品が登録されていない場合の表示です。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
div(style="height:170px;")
// 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
.is_active
.ec-cartNavi
.ec-cartNavi__icon
img(src='/moc/icon/cart-dark.svg', alt='cart')
.ec-cartNavi__iconClose
img(src='/moc/icon/cross-dark.svg', alt='close')
.ec-cartNavi__badge 1
.ec-cartNavi__label
| 合計
.ec-cartNavi__price ¥1920
.ec-cartNaviNull
.ec-cartNaviNull__message
p 現在カート内に
br
| 商品がございません。
//+b.ec-cartNaviIsset
// +e.cart
// +e.cartImage
// img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
// +e.cartContent
// +e.cartContentTitle ミニテーブル
// +e.cartContentPrice ¥ 12,960
// +e.cartContentTax 税込
// +e.cartContentNumber 数量：1
// +e.action
// a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
// a.ec-blockBtn キャンセル
sg-wrapper:
Styleguide 7.3.7
*/
.ec-cartNaviNull {
display: none;
width: 100%;
text-align: center;
background: #f8f8f8;
box-sizing: border-box;
padding: 16px;
z-index: 3;
position: absolute;
right: 0; }
.ec-cartNaviNull .ec-cartNaviNull__message {
border: 1px solid #D9D9D9;
padding: 16px 0;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #F99; }
.ec-cartNaviNull .ec-cartNaviNull__message p {
margin: 0; }
.ec-cartNaviNull.is-active {
display: block; }
/*
総計
会計時の合計金額、総計を表示します。
ex [カートページ 統計部分](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/7.3.cart.pug
+ec-totalBox
Styleguide 7.3.8
*/
.ec-totalBox {
background: #F3F3F3;
padding: 16px;
margin-bottom: 16px; }
.ec-totalBox .ec-totalBox__spec {
display: flex;
justify-content: space-between;
-ms-flex-pack: space-between;
margin-bottom: 8px; }
.ec-totalBox .ec-totalBox__spec dt {
font-weight: normal;
text-align: left; }
.ec-totalBox .ec-totalBox__spec dd {
text-align: right; }
.ec-totalBox .ec-totalBox__spec .ec-totalBox .ec-totalBox__spec__specTotal {
color: #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 {
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; }
.ec-totalBox .ec-totalBox__taxLabel {
margin-left: 8px;
font-size: 12px; }
.ec-totalBox .ec-totalBox__taxRate {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
font-size: 10px; }
.ec-totalBox .ec-totalBox__taxRate dt {
font-weight: normal;
text-align: left;
margin-right: 8px; }
.ec-totalBox .ec-totalBox__taxRate dt::before {
content: "[ "; }
.ec-totalBox .ec-totalBox__taxRate dd {
text-align: right; }
.ec-totalBox .ec-totalBox__taxRate dd::after {
content: " ]"; }
.ec-totalBox .ec-totalBox__pointBlock {
padding: 18px 20px 10px;
margin-bottom: 10px;
background: #fff; }
.ec-totalBox .ec-totalBox__btn {
color: #fff; }
.ec-totalBox .ec-totalBox__btn a {
color: inherit;
text-decoration: none; }
.ec-totalBox .ec-totalBox__btn a:hover {
text-decoration: none; }
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
font-size: 16px;
font-weight: bold; }
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
margin-top: 8px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
お知らせ
新着情報やバナーなどの掲載項目を紹介していきます。
sg-wrapper:
Styleguide 8.1
*/
/*
新着情報
新着情報の掲載をします。
ex [トップページ 新着情報部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/8.1.info.pug
+ec-news
Styleguide 8.1.1
*/
.ec-news {
margin-bottom: 16px;
background: #F8F8F8; }
.ec-news .ec-news__title {
font-weight: bold;
padding: 8px;
font-size: 16px;
text-align: center; }
.ec-news .ec-news__items {
padding: 0;
list-style: none;
border-top: 1px dotted #ccc; }
/*
折りたたみ項目
折りたたみ項目を掲載します。
ex [トップページ 折りたたみ項目部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/8.1.info.pug
+b.ec-news
+e.title 新着情報
+e.UL.items
+e.LI.item
+b.ec-newsline.is_active
+e.info
+e.date 2016/09/29
+e.comment サイトオープンしました
+e.close
a.ec-closeBtn--circle
span.ec-closeBtn--circle__icon
.ec-icon
img(src='/moc/icon/angle-down-white.svg', alt='')
+e.description 一人暮らしからオフィスなどさまざまなシーンで あなたの生活をサポートするグッズをご家庭へお届けします！
Styleguide 8.1.2
*/
.ec-newsline {
display: flex;
flex-wrap: wrap;
overflow: hidden;
padding: 0 16px; }
.ec-newsline .ec-newsline__info {
width: 100%;
padding: 16px 0; }
.ec-newsline .ec-newsline__info:after {
content: " ";
display: table; }
.ec-newsline .ec-newsline__info:after {
clear: both; }
.ec-newsline .ec-newsline__date {
display: inline-block;
margin-right: 10px;
float: left; }
.ec-newsline .ec-newsline__comment {
display: inline-block;
float: left; }
.ec-newsline .ec-newsline__close {
float: right;
display: inline-block;
text-align: right; }
.ec-newsline .ec-newsline__close .ec-closeBtn--circle {
display: inline-block;
width: 25px;
height: 25px;
min-width: 25px;
min-height: 25px; }
.ec-newsline .ec-newsline__description {
width: 100%;
height: 0;
transition: all .2s ease-out; }
.ec-newsline.is_active .ec-newsline__description {
height: auto;
transition: all .2s ease-out;
padding-bottom: 16px; }
.ec-newsline.is_active .ec-icon img {
transform: rotateX(180deg); }
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
マイページ
マイページで利用するためのスタイルガイド群です。
sg-wrapper:
Styleguide 9.1
*/
/*
マイページ
マイページで表示するメニューリストです。
ul を利用したリスト要素で記述します。
ex [マイページ メニューリスト部分](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist
Styleguide 9.1.1
*/
.ec-navlistRole .ec-navlistRole__navlist {
display: flex;
flex-wrap: wrap;
border-color: #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; }
.ec-navlistRole .ec-navlistRole__item {
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 a {
padding: 16px;
width: 100%;
display: inline-block; }
.ec-navlistRole .ec-navlistRole__item a:hover {
background: #f5f7f8; }
.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 {
box-sizing: border-box; }
.ec-welcomeMsg *,
.ec-welcomeMsg *::before,
.ec-welcomeMsg *::after {
box-sizing: inherit; }
.ec-welcomeMsg img {
width: 100%; }
/*
お気に入り一覧
お気に入り一覧で表示するアイテムの表示コンポーネントです。
ex [マイページ お気に入り一覧](http://demo3.ec-cube.net/mypage/favorite)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-favorite
Styleguide 9.1.4
*/
.ec-favoriteRole .ec-favoriteRole__header {
margin-bottom: 16px; }
.ec-favoriteRole .ec-favoriteRole__itemList {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none; }
.ec-favoriteRole .ec-favoriteRole__itemList a {
color: inherit;
text-decoration: none; }
.ec-favoriteRole .ec-favoriteRole__itemList a:hover {
text-decoration: none; }
.ec-favoriteRole .ec-favoriteRole__item {
margin-bottom: 8px;
width: 47.5%;
position: relative;
box-sizing: border-box;
padding: 10px; }
.ec-favoriteRole .ec-favoriteRole__item-image {
height: 150px;
margin-bottom: 10px;
text-align: center; }
.ec-favoriteRole .ec-favoriteRole__item img {
width: auto;
max-height: 100%; }
.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 {
box-sizing: border-box; }
.ec-role *,
.ec-role *::before,
.ec-role *::after {
box-sizing: inherit; }
.ec-role img {
width: 100%;
aspect-ratio: 1;
object-fit: scale-down;
}
/*
マイページセクション
マイページ専用のコンテナブロックです。
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 {
box-sizing: border-box; }
.ec-mypageRole *,
.ec-mypageRole *::before,
.ec-mypageRole *::after {
box-sizing: inherit; }
.ec-mypageRole img {
width: 100%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
@keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden; }
100% {
opacity: 1;
visibility: visible; } }
@keyframes fadeOut {
0% {
opacity: 1;
visibility: visible; }
100% {
opacity: 0;
visibility: hidden; } }
.bg-load-overlay {
background: rgba(255, 255, 255, 0.4);
box-sizing: border-box;
position: fixed;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: space-around;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2147483647;
opacity: 1; }
/*
ヘッダー
ヘッダー用のプロジェクトコンポーネントを提供します。
ex [トップページ ヘッダー](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/11.2.header.pug
include /assets/tmpl/elements/11.3.headerNavi.pug
include /assets/tmpl/elements/11.4.categoryNavi.pug
+b.ec-layoutRole
+e.header
+ec-headerRole
+ec-headerNaviRole
+ec-categoryNaviRole
Styleguide 11.2
*/
.ec-layoutRole {
width: 100%;
transition: transform 0.3s;
background: #fff; }
.ec-layoutRole .ec-layoutRole__contentTop {
padding: 0; }
.ec-layoutRole .ec-layoutRole__contents {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 1150px;
display: flex;
flex-wrap: nowrap; }
.ec-layoutRole .ec-layoutRole__main {
width: 100%; }
.ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 100%; }
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
width: 100%; }
.ec-layoutRole .ec-layoutRole__left,
.ec-layoutRole .ec-layoutRole__right {
display: none; }
.ec-headerRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
padding-top: 15px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: auto; }
.ec-headerRole:after {
content: " ";
display: table; }
.ec-headerRole:after {
clear: both; }
.ec-headerRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-headerRole img {
max-width: 100%; }
.ec-headerRole html {
box-sizing: border-box; }
.ec-headerRole *,
.ec-headerRole *::before,
.ec-headerRole *::after {
box-sizing: inherit; }
.ec-headerRole img {
width: 100%; }
.ec-headerRole:after {
display: none; }
.ec-headerRole::before {
display: none; }
.ec-headerRole .ec-headerRole__title {
width: 100%; }
.ec-headerRole .ec-headerRole__navSP {
display: block;
position: absolute;
top: 15px;
width: 27%;
right: 0;
text-align: right; }
.ec-headerNaviRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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;
padding-top: 15px; }
.ec-headerNaviRole:after {
content: " ";
display: table; }
.ec-headerNaviRole:after {
clear: both; }
.ec-headerNaviRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-headerNaviRole img {
max-width: 100%; }
.ec-headerNaviRole html {
box-sizing: border-box; }
.ec-headerNaviRole *,
.ec-headerNaviRole *::before,
.ec-headerNaviRole *::after {
box-sizing: inherit; }
.ec-headerNaviRole img {
width: 100%; }
.ec-headerNaviRole .fa-bars {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.ec-headerNaviRole .ec-headerNaviRole__left {
width: calc(100% / 3); }
@media screen and (min-width: 768px){
.ec-headerNaviRole .ec-headerNaviRole__search {
display: none; }
}
.ec-headerNaviRole .ec-headerNaviRole__navSP {
display: block; }
.ec-headerNaviRole .ec-headerNaviRole__right {
width: calc(100% * 2 / 3);
display: flex;
justify-content: flex-end;
align-items: center; }
.ec-headerNaviRole .ec-headerNaviRole__nav {
display: inline-block; }
.ec-headerNaviRole .ec-headerNaviRole__nav a {
color: inherit;
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__cart {
display: inline-block; }
.ec-headerNaviRole .ec-headerNaviRole__cart a {
color: inherit;
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
text-decoration: none; }
.ec-headerNavSP {
display: block;
cursor: pointer;
border-radius: 50%;
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
font-size: 18px;
text-align: center;
color: black;
background: white;
position: fixed;
top: 10px;
left: 10px;
z-index: 1000; }
.ec-headerNavSP .fas {
vertical-align: top; }
.ec-headerNavSP.is-active {
display: none; }
/*
ヘッダー：タイトル
ヘッダー内で使用されるタイトルコンポーネントです。
Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerTitle
Styleguide 11.2.1
*/
.ec-headerTitle {
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%; }
.ec-headerTitle textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-headerTitle img {
max-width: 100%; }
.ec-headerTitle html {
box-sizing: border-box; }
.ec-headerTitle *,
.ec-headerTitle *::before,
.ec-headerTitle *::after {
box-sizing: inherit; }
.ec-headerTitle img {
width: 100%; }
.ec-headerTitle .ec-headerTitle__title {
text-align: center; }
.ec-headerTitle .ec-headerTitle__title h1 {
margin: 0;
padding: 0; }
.ec-headerTitle .ec-headerTitle__title a {
display: inline-block;
margin-bottom: 30px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: black; }
.ec-headerTitle .ec-headerTitle__title a:hover {
opacity: .8; }
.ec-headerTitle .ec-headerTitle__subtitle {
font-size: 10px;
text-align: center; }
.ec-headerTitle .ec-headerTitle__subtitle a {
display: inline-block;
color: #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; }
.ec-headerNav .ec-headerNav__itemLink {
display: none;
margin-right: 5px;
font-size: 14px;
vertical-align: middle;
color: black; }
/*
ヘッダー：検索ボックス
ヘッダー内で使用される商品検索コンポーネントです。
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`内に記述すると２カラム上の右側に配置することができます。
Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerSearch
sg-wrapper:
Styleguide 11.2.4
*/
.ec-headerSearch:after {
content: " ";
display: table; }
.ec-headerSearch:after {
clear: both; }
.ec-headerSearch .ec-headerSearch__category {
float: none; }
.ec-headerSearch .ec-headerSearch__category .ec-select {
overflow: hidden;
width: 100%;
margin: 0;
text-align: center; }
.ec-headerSearch .ec-headerSearch__category .ec-select select {
width: 100%;
cursor: pointer;
padding: 8px 24px 8px 8px;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #fff; }
.ec-headerSearch .ec-headerSearch__category .ec-select select option {
color: #000; }
.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
display: none; }
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
position: relative;
border: 0;
background: #000;
color: #fff;
border-top-right-radius: 10px;
border-top-left-radius: 10px; }
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
position: absolute;
top: 0.8em;
right: 0.4em;
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
pointer-events: none; }
.ec-headerSearch .ec-headerSearch__keyword {
position: relative;
color: #525263;
border: 1px solid #ccc;
background-color: #f6f6f6;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px; }
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
width: 100%;
height: 34px;
font-size: 16px;
border: 0 none;
padding: 0.5em 50px 0.5em 1em;
box-shadow: none;
background: none;
box-sizing: border-box;
margin-bottom: 0; }
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
width: 22px;
height: 22px; }
.ec-headerSearch .ec-headerSearch__keywordBtn {
border: 0;
background: none;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-55%);
display: block;
white-space: nowrap;
z-index: 1; }
/*
ヘッダー：カテゴリナビ
ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。
Markup:
include /assets/tmpl/elements/11.4.categoryNavi.pug
+ec-itemNav
sg-wrapper:
Styleguide 11.2.5
*/
.ec-categoryNaviRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-categoryNaviRole *,
.ec-categoryNaviRole *::before,
.ec-categoryNaviRole *::after {
box-sizing: inherit; }
.ec-categoryNaviRole img {
width: 100%; }
.ec-itemNav {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center; }
.ec-itemNav__nav {
display: block;
margin: 0 auto;
padding: 0;
width: auto;
height: auto;
list-style-type: none;
text-align: center;
vertical-align: bottom; }
.ec-itemNav__nav li {
float: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
position: relative; }
.ec-itemNav__nav li a {
display: block;
border-bottom: 1px solid #E8E8E8;
margin: 0;
padding: 16px;
height: auto;
color: #2e3233;
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
text-align: left;
background: #fff;
border-bottom: 1px solid #E8E8E8; }
.ec-itemNav__nav li ul {
display: none;
z-index: 0;
margin: 0;
padding: 0;
min-width: 200px;
list-style: none;
position: static;
top: 100%;
left: 0; }
.ec-itemNav__nav li ul li {
overflow: hidden;
width: 100%;
height: auto;
transition: .3s; }
.ec-itemNav__nav li ul li a {
border-bottom: 1px solid #E8E8E8;
padding: 16px 22px 16px 16px;
font-size: 16px;
font-weight: bold;
color: white;
text-align: left;
background: black; }
.ec-itemNav__nav > li:hover > a {
background: #fafafa; }
.ec-itemNav__nav > li:hover li:hover > a {
background: #333; }
.ec-itemNav__nav li ul li ul {
top: 0;
left: 100%;
width: auto; }
.ec-itemNav__nav li ul li ul li a {
background: #7D7D7D; }
.ec-itemNav__nav li:hover ul li ul li a:hover {
background: #333; }
/*
ヘッダー：SPヘッダー
SP時のみ出現するヘッダーに関係するコンポーネントです。
ex [トップページ](http://demo3.ec-cube.net/)画面サイズが768px以下に該当。
`.ec-drawerRole`：SPのドロワー内の要素をwrapするコンポーネントです。
`.ec-headerSearch`、`.ec-headerNav`、`.ec-itemNav`は`.ec-drawerRole`の子要素にある場合、ドロワーに適したスタイルに変化します。
`.ec-overlayRole`：SPのドロワー出現時にz-indexがドロワー以下の要素に半透明の黒背景をかぶせるコンポーネントです。
Styleguide 11.2.6
*/
.ec-drawerRole {
overflow-y: scroll;
background: black;
width: 260px;
height: 100vh;
transform: translateX(-300px);
position: fixed;
top: 0;
left: 0;
z-index: 1;
transition: z-index 0ms 1ms; }
.ec-drawerRole .ec-headerSearchArea {
padding: 20px 10px;
width: 100%;
background: #F8F8F8; }
.ec-drawerRole .ec-headerSearch {
padding: 16px 8px 26px;
background: #EBEBEB;
color: #636378; }
.ec-drawerRole .ec-headerSearch select {
width: 100% !important; }
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding: 1em 10px;
font-size: 16px;
font-weight: bold;
color: black;
background: #F8F8F8; }
.ec-drawerRole .ec-headerCategoryArea p {
margin-top: 0;
margin-bottom: 0; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: black;
font-weight: normal;
background: #f8f8f8; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
border-bottom: 1px solid #ccc;
padding-left: 20px;
font-weight: normal;
background: white; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover > a {
background: #f8f8f8; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover li:hover > a {
background: white; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
padding-left: 40px;
color: black;
background: white; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li:hover ul li ul li a:hover {
background: white; }
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li ul li a {
padding-left: 60px;
font-weight: normal; }
.ec-drawerRole .ec-headerLinkArea {
background: black; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
border-top: 1px solid #ccc; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
display: block;
border-bottom: 1px solid #ccc;
padding: 15px 20px;
font-size: 16px;
font-weight: bold;
color: white; }
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
display: inline-block;
width: 28px;
font-size: 17px; }
.ec-drawerRoleClose {
display: none;
cursor: pointer;
border-radius: 50%;
box-sizing: border-box;
padding: 10px;
width: 40px;
height: 40px;
font-size: 18px;
text-align: center;
color: black;
background: white;
position: fixed;
top: 10px;
left: 270px;
z-index: 1000; }
.ec-drawerRoleClose .fas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
.ec-drawerRole.is_active {
display: block;
transform: translateX(0);
transition: all .3s;
z-index: 100000; }
.ec-drawerRoleClose.is_active {
display: inline-block;
transition: all .3s; }
.ec-overlayRole {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
opacity: 0;
background: transparent;
transform: translateX(0);
transition: all .3s;
visibility: hidden; }
.have_curtain .ec-overlayRole {
display: block;
opacity: 1;
background: rgba(0, 0, 0, 0.5);
visibility: visible; }
/*
ヘッダー：test
test
Markup:
span.ec-itemAccordionParent test1
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test2
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test3
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test4
Styleguide 11.2.7
*/
.ec-itemNavAccordion {
display: none; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
フッター
全ページで使用されるフッターのプロジェクトコンポーネントです。
ex [トップページ フッター](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerRole
Styleguide 11.3
*/
.ec-footerRole {
border-top: 1px solid #7d7d7d;
margin-top: 30px;
background: black; }
/*
フッターナビ
フッタープロジェクトで使用するナビゲーション用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerNav
sg-wrapper:
Styleguide 11.3.1
*/
.ec-footerNavi {
padding: 0;
color: white;
list-style: none;
text-align: center; }
.ec-footerNavi .ec-footerNavi__link {
display: block; }
.ec-footerNavi .ec-footerNavi__link a {
display: block;
border-bottom: 1px solid #7d7d7d;
padding: 15px 0;
font-size: 14px;
color: inherit;
text-decoration: none; }
.ec-footerNavi .ec-footerNavi__link:hover a {
opacity: .8;
text-decoration: none; }
/*
フッタータイトル
フッタープロジェクトで使用するタイトル用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerTitle
sg-wrapper:
Styleguide 11.3.2
*/
.ec-footerTitle {
padding: 40px 0 60px;
text-align: center;
color: white; }
.ec-footerTitle .ec-footerTitle__logo {
display: block;
margin-bottom: 10px;
font-weight: bold; }
.ec-footerTitle .ec-footerTitle__logo a {
color: inherit;
text-decoration: none; }
.ec-footerTitle .ec-footerTitle__logo a:hover {
text-decoration: none; }
.ec-footerTitle .ec-footerTitle__logo a {
font-size: 22px;
color: inherit; }
.ec-footerTitle .ec-footerTitle__logo:hover a {
opacity: .8;
text-decoration: none; }
.ec-footerTitle .ec-footerTitle__copyright {
font-size: 10px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
トップページ
トップページ スライド部に関する Project コンポーネントを定義します。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/12.1.slider.pug
+ec-sliderRole
Styleguide 12.1
*/
.ec-sliderRole {
margin: 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; }
.ec-sliderRole:after {
content: " ";
display: table; }
.ec-sliderRole:after {
clear: both; }
.ec-sliderRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-sliderRole img {
max-width: 100%; }
.ec-sliderRole html {
box-sizing: border-box; }
.ec-sliderRole *,
.ec-sliderRole *::before,
.ec-sliderRole *::after {
box-sizing: inherit; }
.ec-sliderRole img {
width: 100%; }
.ec-sliderRole ul {
padding: 0;
list-style: none; }
.ec-sliderItemRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px;
margin-bottom: 24px; }
.ec-sliderItemRole:after {
content: " ";
display: table; }
.ec-sliderItemRole:after {
clear: both; }
.ec-sliderItemRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-sliderItemRole img {
max-width: 100%; }
.ec-sliderItemRole html {
box-sizing: border-box; }
.ec-sliderItemRole *,
.ec-sliderItemRole *::before,
.ec-sliderItemRole *::after {
box-sizing: inherit; }
.ec-sliderItemRole img {
width: 100%; }
.ec-sliderItemRole ul {
padding: 0;
list-style: none; }
.ec-sliderItemRole .item_nav {
display: none; }
.ec-sliderItemRole .slideThumb {
margin-bottom: 25px;
width: 33%;
opacity: .8;
cursor: pointer; }
.ec-sliderItemRole .slideThumb:focus {
outline: none; }
.ec-sliderItemRole .slideThumb:hover {
opacity: 1; }
.ec-sliderItemRole .slideThumb img {
width: 80%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
アイキャッチ
トップページ アイキャッチ部に関する Project コンポーネントを定義します。
ex [トップページスライダー直下 アイキャッチ部](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/12.2.eyecatch.pug
+ec-eyecatchRole
Styleguide 12.2
*/
.ec-eyecatchRole {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
/* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */ }
.ec-eyecatchRole .ec-eyecatchRole__image {
display: block;
margin-bottom: 40px;
width: 100%;
height: 100%; }
.ec-eyecatchRole .ec-eyecatchRole__intro {
color: black; }
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-bottom: .8em;
font-size: 16px;
font-weight: normal; }
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: .8em;
font-size: 24px;
font-weight: bold; }
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
margin-bottom: 20px;
font-size: 16px;
line-height: 2; }
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 20px;
font-size: 16px;
line-height: 2; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
ボタン
トップページで使用されているボタンのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.3
*/
/*
通常ボタン
インラインの要素としてボタンを定義出来ます。
Markup:
.ec-inlineBtn--top more
Styleguide 12.3.1
*/
.ec-inlineBtn--top {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: white;
background-color: black;
border-color: black; }
.ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ec-inlineBtn--top:hover, .ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
color: #525263;
text-decoration: none; }
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-inlineBtn--top.disabled, .ec-inlineBtn--top[disabled],
fieldset[disabled] .ec-inlineBtn--top {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none; }
.ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
color: white;
background-color: black;
border-color: black; }
.ec-inlineBtn--top:hover {
color: white;
background-color: black;
border-color: black; }
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active,
.open > .ec-inlineBtn--top.dropdown-toggle {
color: white;
background-color: black;
background-image: none;
border-color: black; }
.ec-inlineBtn--top:active:hover, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:hover, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus,
.open > .ec-inlineBtn--top.dropdown-toggle:hover,
.open > .ec-inlineBtn--top.dropdown-toggle:focus,
.open > .ec-inlineBtn--top.dropdown-toggle.focus {
color: white;
background-color: black;
border-color: black; }
.ec-inlineBtn--top.disabled:hover, .ec-inlineBtn--top.disabled:focus, .ec-inlineBtn--top.disabled.focus, .ec-inlineBtn--top[disabled]:hover, .ec-inlineBtn--top[disabled]:focus, .ec-inlineBtn--top[disabled].focus,
fieldset[disabled] .ec-inlineBtn--top:hover,
fieldset[disabled] .ec-inlineBtn--top:focus,
fieldset[disabled] .ec-inlineBtn--top.focus {
background-color: black;
border-color: black; }
.ec-inlineBtn--top .badge {
color: black;
background-color: white; }
.ec-inlineBtn--top .ec-icon img {
width: 1em;
vertical-align: text-bottom; }
/*
ロングボタン（全幅）
ロングタイプのボタンです。
Markup:
.ec-blockBtn--top 商品一覧へ
Styleguide 2.1.2
*/
.ec-blockBtn--top {
display: inline-block;
margin-bottom: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 10px 16px;
text-decoration: none;
color: white;
background-color: black;
border-color: black;
display: block;
height: 56px;
line-height: 56px;
padding-top: 0;
padding-bottom: 0; }
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.ec-blockBtn--top:hover, .ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
color: #525263;
text-decoration: none; }
.ec-blockBtn--top:active, .ec-blockBtn--top.active {
outline: 0;
background-image: none;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.ec-blockBtn--top.disabled, .ec-blockBtn--top[disabled],
fieldset[disabled] .ec-blockBtn--top {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
box-shadow: none; }
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
color: white;
background-color: black;
border-color: black; }
.ec-blockBtn--top:hover {
color: white;
background-color: black;
border-color: black; }
.ec-blockBtn--top:active, .ec-blockBtn--top.active,
.open > .ec-blockBtn--top.dropdown-toggle {
color: white;
background-color: black;
background-image: none;
border-color: black; }
.ec-blockBtn--top:active:hover, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:hover, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus,
.open > .ec-blockBtn--top.dropdown-toggle:hover,
.open > .ec-blockBtn--top.dropdown-toggle:focus,
.open > .ec-blockBtn--top.dropdown-toggle.focus {
color: white;
background-color: black;
border-color: black; }
.ec-blockBtn--top.disabled:hover, .ec-blockBtn--top.disabled:focus, .ec-blockBtn--top.disabled.focus, .ec-blockBtn--top[disabled]:hover, .ec-blockBtn--top[disabled]:focus, .ec-blockBtn--top[disabled].focus,
fieldset[disabled] .ec-blockBtn--top:hover,
fieldset[disabled] .ec-blockBtn--top:focus,
fieldset[disabled] .ec-blockBtn--top.focus {
background-color: black;
border-color: black; }
.ec-blockBtn--top .badge {
color: black;
background-color: white; }
.ec-blockBtn--top .ec-icon img {
width: 1em;
vertical-align: text-bottom; }
/*
見出し
トップページで使用されている見出しのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.4
*/
/*
横並び見出し
横並びの見出しです。
Markup:
.ec-secHeading
span.ec-secHeading__en TOPIC
span.ec-secHeading__line |
span.ec-secHeading__ja 特集
Styleguide 12.4.1
*/
.ec-secHeading {
margin-bottom: 15px;
color: black; }
.ec-secHeading .ec-secHeading__en {
font-size: 18px;
font-weight: bold;
letter-spacing: .2em; }
.ec-secHeading .ec-secHeading__line {
display: inline-block;
margin: 0 20px;
width: 1px;
height: 14px;
background: black; }
.ec-secHeading .ec-secHeading__ja {
font-size: 12px;
font-weight: normal;
letter-spacing: .15em;
vertical-align: 2px; }
/*
縦並び見出し
縦並びの見出しです。
Markup:
.ec-secHeading--tandem
span.ec-secHeading__en TOPIC
span.ec-secHeading__line |
span.ec-secHeading__ja 特集
Styleguide 12.4.2
*/
.ec-secHeading--tandem {
margin-bottom: 15px;
color: black;
text-align: center; }
.ec-secHeading--tandem .ec-secHeading__en {
display: block;
font-size: 18px;
font-weight: bold;
letter-spacing: .2em; }
.ec-secHeading--tandem .ec-secHeading__line {
display: block;
margin: 13px auto;
width: 20px;
height: 1px;
background: black; }
.ec-secHeading--tandem .ec-secHeading__ja {
display: block;
margin-bottom: 30px;
font-size: 12px;
font-weight: normal;
letter-spacing: .15em;
vertical-align: 2px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
トピック（アイテム2列）
トップページで使用されているトピックのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.5.1
*/
.ec-topicRole {
padding: 40px 0;
background: #F8F8F8; }
.ec-topicRole .ec-topicRole__list {
display: flex;
flex-wrap: wrap; }
.ec-topicRole .ec-topicRole__listItem {
margin-bottom: 20px;
width: 100%;
height: auto; }
.ec-topicRole .ec-topicRole__listItemTitle {
margin-top: .5em;
font-size: 14px;
color: black; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カテゴリ（アイテム4列 スマホの時は2列）
トップページで使用されているアイテムリストのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.6.1
*/
.ec-newItemRole {
padding: 40px 0; }
.ec-newItemRole .ec-newItemRole__list {
display: flex;
flex-wrap: wrap; }
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 4%;
width: 48%;
height: auto; }
.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
color: black; }
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 4%; }
.ec-newItemRole .ec-newItemRole__listItemHeading {
margin-top: calc(45% - 20px); }
.ec-newItemRole .ec-newItemRole__listItemTitle {
margin: 8px 0;
font-size: 14px;
font-weight: bold; }
.ec-newItemRole .ec-newItemRole__listItemPrice {
font-size: 12px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カテゴリ（アイテム3列）
トップページで使用されているカテゴリのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.7.1
*/
.ec-categoryRole {
padding: 40px 0;
color: black;
background: #F8F8F8; }
.ec-categoryRole .ec-categoryRole__list {
display: flex;
flex-wrap: wrap; }
.ec-categoryRole .ec-categoryRole__listItem {
margin-bottom: 20px;
width: 100%;
height: auto; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
見出し
トップページで使用されている新着情報のスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.8.1
*/
.ec-newsRole {
padding: 40px 0 0; }
.ec-newsRole .ec-newsRole__news {
box-sizing: border-box; }
.ec-newsRole .ec-newsRole__newsItem {
width: 100%; }
.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
border-bottom: 1px solid #ccc; }
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 20px; }
.ec-newsRole .ec-newsRole__newsHeading {
cursor: pointer; }
.ec-newsRole .ec-newsRole__newsDate {
display: block;
margin: 15px 0 5px;
font-size: 12px;
color: black; }
.ec-newsRole .ec-newsRole__newsColumn {
display: flex; }
.ec-newsRole .ec-newsRole__newsTitle {
display: inline-block;
margin-bottom: 10px;
width: 90%;
font-size: 14px;
font-weight: bold;
color: #7D7D7D;
line-height: 1.6; }
.ec-newsRole .ec-newsRole__newsClose {
display: inline-block;
width: 10%;
position: relative; }
.ec-newsRole .ec-newsRole__newsCloseBtn {
display: inline-block;
margin-left: auto;
border-radius: 50%;
width: 20px;
height: 20px;
color: white;
text-align: center;
background: black;
cursor: pointer;
position: absolute;
right: 5px; }
.ec-newsRole .ec-newsRole__newsDescription {
display: none;
margin: 0 0 10px;
font-size: 14px;
line-height: 1.4;
overflow: hidden; }
.ec-newsRole .ec-newsRole__newsDescription a {
color: #0092C4; }
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
margin: 0 0 10px; }
.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
display: inline-block;
transform: rotateX(180deg) translateY(2px); }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
検索ラベル
商品一覧 ヘッダー部 に関する Project コンポーネントを定義します。
ex [商品一覧 ヘッダー部](http://demo3.ec-cube.net/products/list)
Markup:
include /assets/tmpl/elements/13.1.searchnav.pug
+ec-searchnavRole__topicpath
+ec-searchnavRole__info
Styleguide 13.1
*/
.ec-searchnavRole {
margin-bottom: 0;
padding: 0; }
.ec-searchnavRole .ec-searchnavRole__infos {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-searchnavRole .ec-searchnavRole__infos *,
.ec-searchnavRole .ec-searchnavRole__infos *::before,
.ec-searchnavRole .ec-searchnavRole__infos *::after {
box-sizing: inherit; }
.ec-searchnavRole .ec-searchnavRole__infos img {
width: 100%; }
.ec-searchnavRole .ec-searchnavRole__counter {
margin-bottom: 16px;
width: 100%; }
.ec-searchnavRole .ec-searchnavRole__actions {
text-align: right;
width: 100%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
商品一覧
商品一覧 に関する Project コンポーネントを定義します。
SP版２列、PC版４列の特殊グリッドを構成します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2
*/
.ec-shelfRole {
margin: 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 {
box-sizing: border-box; }
.ec-shelfRole *,
.ec-shelfRole *::before,
.ec-shelfRole *::after {
box-sizing: inherit; }
.ec-shelfRole img {
width: 100%; }
/*
商品一覧グリッド
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2.1
*/
.ec-shelfGrid {
display: flex;
margin-left: 0;
margin-right: 0;
flex-wrap: wrap;
padding: 0;
list-style: none; }
.ec-shelfGrid a {
color: inherit;
text-decoration: none; }
.ec-shelfGrid a:hover {
text-decoration: none; }
.ec-shelfGrid .ec-shelfGrid__item {
margin-bottom: 36px;
width: 50%;
display: flex;
flex-direction: column; }
.ec-shelfGrid .ec-shelfGrid__item-image {
height: 150px;
margin-bottom: 10px;
text-align: center; }
.ec-shelfGrid .ec-shelfGrid__item img {
width: auto;
max-height: 100%; }
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
margin-top: auto;
margin-bottom: 15px; }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
padding-right: 8px; }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
padding-left: 8px; }
.ec-shelfGrid .ec-shelfGrid__title {
margin-bottom: 7px; }
.ec-shelfGrid .ec-shelfGrid__plice {
font-weight: bold; }
/*
13.2.2 商品一覧グリッド（中央寄せ）
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。
商品のあまりはセンタリングされ、中央に表示されます。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGridCenter
Styleguide 13.2.2
*/
.ec-shelfGridCenter {
display: flex;
margin-left: 0;
margin-right: 0;
flex-wrap: wrap;
padding: 0;
list-style: none;
justify-content: center; }
.ec-shelfGridCenter a {
color: inherit;
text-decoration: none; }
.ec-shelfGridCenter a:hover {
text-decoration: none; }
.ec-shelfGridCenter .ec-shelfGridCenter__item {
margin-bottom: 36px;
width: 50%; }
.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
height: 150px;
margin-bottom: 10px;
text-align: center; }
.ec-shelfGridCenter .ec-shelfGridCenter__item img {
width: auto;
max-height: 100%; }
.ec-shelfGridCenter .ec-shelfGridCenter__item .ec-productRole__btn {
margin-top: auto;
padding-top: 1em; }
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
padding-right: 8px; }
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
padding-left: 8px; }
.ec-shelfGridCenter .ec-shelfGridCenter__title {
margin-bottom: 7px; }
.ec-shelfGridCenter .ec-shelfGridCenter__plice {
font-weight: bold; }
/*
商品一覧フッター
商品一覧 フッター に関する Project コンポーネントを定義します。
ex [商品一覧 ページャ部](http://demo3.ec-cube.net/products/list)
Markup:
include /assets/tmpl/elements/13.3.pager.pug
+ec-pagerRole
Styleguide 13.3
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カート追加モーダル
カート追加モーダルに関する Project コンポーネントを定義します。
ex [商品一覧、商品詳細](http://demo3.ec-cube.net/products/list)
+ec-modal
Styleguide 13.4
*/
.ec-modal {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 100%; }
.ec-modal.small {
width: 30%; }
.ec-modal.full {
width: 100%;
height: 100%; }
.ec-modal .ec-modal-overlay {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%; }
.ec-modal .ec-modal-wrap {
position: relative;
border-radius: 2px;
border: 1px solid #333;
background-color: #fff;
width: 90%;
margin: 20px;
padding: 40px 5px; }
.ec-modal .ec-modal-close {
cursor: pointer;
position: absolute;
right: 20px;
top: 10px;
font-size: 20px;
height: 30px;
width: 20px; }
.ec-modal .ec-modal-close:hover {
color: #4b5361; }
.ec-modal .ec-modal-box {
text-align: center; }
.ec-modal .ec-role {
margin-top: 20px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
商品詳細
商品詳細ページに関する Project コンポーネントを定義します。
ex [商品詳細ページ](http://demo3.ec-cube.net/products/detail/18)
Markup:
include /assets/tmpl/elements/14.1.product.pug
+ec-productSimpleRole
Styleguide 14.1
*/
.ec-productRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
font-size: 16px;
line-height: 1.4;
color: #525263;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1130px; }
.ec-productRole:after {
content: " ";
display: table; }
.ec-productRole:after {
clear: both; }
.ec-productRole textarea {
/* for chrome fontsize bug */
font-family: sans-serif; }
.ec-productRole img {
max-width: 100%; }
.ec-productRole html {
box-sizing: border-box; }
.ec-productRole *,
.ec-productRole *::before,
.ec-productRole *::after {
box-sizing: inherit; }
.ec-productRole img {
width: 100%; }
.ec-productRole .ec-productRole__img {
margin-right: 0;
margin-bottom: 20px; }
.ec-productRole .ec-productRole__profile {
margin-left: 0; }
.ec-productRole .ec-productRole__title .ec-headingTitle {
font-size: 20px; }
.ec-productRole .ec-productRole__tags {
margin-top: 16px;
padding: 0;
padding-bottom: 16px;
border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__tag {
display: inline-block;
padding: 2px 5px;
list-style: none;
font-size: 80%;
color: #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: 0;
border-bottom: 0; }
.ec-productRole .ec-productRole__code {
padding: 14px 0;
border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__category {
padding: 14px 0;
border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__category a {
color: #33A8D0; }
.ec-productRole .ec-productRole__category ul {
list-style: none;
padding: 0;
margin: 0; }
.ec-productRole .ec-productRole__actions {
padding: 14px 0; }
.ec-productRole .ec-productRole__actions .ec-select select {
height: 40px;
max-width: 100%;
min-width: 100%; }
.ec-productRole .ec-productRole__btn {
width: 100%;
margin-bottom: 10px; }
.ec-productRole .ec-productRole__description {
margin-bottom: 16px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
カート
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [カートページ](http://demo3.ec-cube.net/shopping)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartRole
Styleguide 15.1
*/
.ec-cartRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-cartRole *,
.ec-cartRole *::before,
.ec-cartRole *::after {
box-sizing: inherit; }
.ec-cartRole img {
width: 100%; }
.ec-cartRole::before {
display: none; }
.ec-cartRole .ec-cartRole__progress {
width: 100%;
text-align: center; }
.ec-cartRole .ec-cartRole__error {
width: 100%;
text-align: center; }
.ec-cartRole .ec-cartRole__error .ec-alert-warning {
max-width: 80%;
display: inline-block; }
.ec-cartRole .ec-cartRole__totalText {
margin-bottom: 0;
padding: 16px 0 6px;
width: 100%;
text-align: center;
font-weight: normal; }
.ec-cartRole .ec-cartRole__cart {
margin: 0;
width: 100%; }
.ec-cartRole .ec-cartRole__actions {
text-align: right;
width: 100%; }
.ec-cartRole .ec-cartRole__total {
padding: 15px 0 30px;
font-weight: bold;
font-size: 16px; }
.ec-cartRole .ec-cartRole__totalAmount {
margin-left: 30px;
color: #de5d50;
font-size: 16px; }
.ec-cartRole .ec-blockBtn--action {
margin-bottom: 10px; }
/*
カート商品表示枠（テーブルヘッダ）
カート内の商品をを表示するテーブル枠です。
ex [カートページ テーブル部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
+ec-cartTable
sg-wrapper:
Styleguide 15.1.2
*/
.ec-cartTable {
display: table;
border-top: 1px dotted #ccc;
width: 100%; }
/*
カート商品表示枠（テーブルヘッダ）
カート内の商品を表示するテーブルのヘッダです。
スマホでは非表示となります。
ex [カートページ カートテーブルヘッダ部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
+ec-cartHeader
sg-wrapper:
Styleguide 15.1.3
*/
.ec-cartHeader {
display: none;
width: 100%;
background: #F4F3F0; }
.ec-cartHeader .ec-cartHeader__label {
display: table-cell;
padding: 16px;
text-align: center;
background: #F4F3F0;
overflow-x: hidden;
font-weight: bold; }
.ec-cartCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-cartCompleteRole *,
.ec-cartCompleteRole *::before,
.ec-cartCompleteRole *::after {
box-sizing: inherit; }
.ec-cartCompleteRole img {
width: 100%; }
/*
カート内商品
カート内のアイテムを表示するテーブル行です。
スマホでは非表示となります。
ex [カートページ テーブル部分](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
+ec-cartRow
sg-wrapper:
Styleguide 15.1.4
*/
.ec-cartRow {
display: table-row; }
.ec-cartRow .ec-cartRow__delColumn {
border-bottom: 1px dotted #ccc;
text-align: center;
display: table-cell;
width: 14%;
vertical-align: middle; }
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
width: 1.5em;
height: 1.5em; }
.ec-cartRow .ec-cartRow__contentColumn {
border-bottom: 1px dotted #ccc;
padding: 10px 0;
display: table; }
.ec-cartRow .ec-cartRow__img {
display: table-cell;
width: 40%;
vertical-align: middle;
padding-right: 10px; }
.ec-cartRow .ec-cartRow__summary {
display: table-cell;
margin-left: 5px;
font-weight: bold;
vertical-align: middle;
width: 46%; }
.ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
margin-bottom: 5px; }
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
display: block;
font-weight: normal; }
.ec-cartRow .ec-cartRow__amountColumn {
display: table-cell;
border-bottom: 1px dotted #ccc;
vertical-align: middle;
text-align: center;
width: 20%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
display: none;
margin-bottom: 10px; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
display: block;
margin-bottom: 10px; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
display: flex;
justify-content: center; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton {
margin: 0 2px;
display: inline-block;
border: 2px solid #c9c9c9;
border-radius: 50%;
width: 30px;
min-width: 30px;
max-width: 30px;
height: 30px;
cursor: pointer;
line-height: 40px;
vertical-align: middle;
position: relative;
text-align: center;
background: #fff; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton .ec-cartRow__amountUpButton__icon img {
display: block;
margin-left: -0.4em;
width: .8em;
height: .8em;
position: absolute;
top: 28%;
left: 50%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
margin: 0 2px;
display: inline-block;
border: 2px solid #c9c9c9;
border-radius: 50%;
width: 30px;
min-width: 30px;
max-width: 30px;
height: 30px;
cursor: pointer;
line-height: 40px;
vertical-align: middle;
position: relative;
text-align: center;
background: #fff; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img {
display: block;
margin-left: -0.4em;
width: .8em;
height: .8em;
position: absolute;
top: 28%;
left: 50%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
cursor: default; }
.ec-cartRow .ec-cartRow__subtotalColumn {
display: none;
border-bottom: 1px dotted #ccc;
text-align: right;
width: 16.66666667%; }
/*
カート内商品(商品が１の場合)
商品が１の場合はカート商品を減らす「-」ボタンの無効化状態になります。
ex [カートページ テーブル部分](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartTable
+ec-cartRowOnly
sg-wrapper:
Styleguide 15.1.5
*/
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
cursor: default; }
/*
アラート
カート内の商品に問題があることを示す警告メッセージです。
ex [マイページ カート](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-cartRole
.ec-cartRole__cart
+ec-alert-warning
Styleguide 15.1.6
*/
.ec-alert-warning {
width: 100%;
padding: 10px;
text-align: center;
background: #F99;
margin-bottom: 20px; }
.ec-alert-warning .ec-alert-warning__icon {
display: inline-block;
margin-right: 1rem;
width: 20px;
height: 20px;
color: #fff;
fill: #fff;
vertical-align: top; }
.ec-alert-warning .ec-alert-warning__text {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
position: relative; }
/*
アラート(空)
カートが空であることを示す警告メッセージです。
ex [マイページ カート](http://demo3.ec-cube.net/cart)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/15.1.cart.pug
.ec-off3Grid
.ec-off3Grid__cell
+ec-alert-warningEnpty
Styleguide 15.1.7
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
注文内容確認
カート内 注文内容確認に関する Project コンポーネントを定義します。
ex [マイページ 注文詳細](http://demo3.ec-cube.net/shopping)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderRole
Styleguide 15.2
*/
.ec-orderRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-orderRole *,
.ec-orderRole *::before,
.ec-orderRole *::after {
box-sizing: inherit; }
.ec-orderRole img {
width: 100%; }
.ec-orderRole .ec-inlineBtn {
font-weight: normal; }
.ec-orderRole .ec-orderRole__detail {
padding: 0;
width: 100%; }
.ec-orderRole .ec-orderRole__summary {
width: 100%; }
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: inline-block; }
.ec-orderRole .ec-borderedList {
margin-bottom: 20px;
border-top: 1px dotted #ccc; }
/*
注文履歴詳細 オーダ情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ オーダ情報](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderInfo
Styleguide 15.2.1
*/
.ec-orderOrder {
margin-bottom: 30px; }
.ec-orderOrder .ec-orderOrder__items {
border-bottom: 1px dotted #ccc;
border-top: 1px dotted #ccc; }
/*
注文履歴詳細 お客様情報
マイページ 注文詳細部に関する Project コンポーネントを定義します。
ex [マイページ オーダ情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAccount
Styleguide 15.2.2
*/
.ec-orderAccount {
margin-bottom: 30px; }
.ec-orderAccount p {
margin-bottom: 0; }
.ec-orderAccount:after {
content: " ";
display: table; }
.ec-orderAccount:after {
clear: both; }
.ec-orderAccount .ec-orderAccount__change {
display: inline-block;
margin-left: 10px;
float: right; }
.ec-orderAccount .ec-orderAccount__account {
margin-bottom: 16px; }
/*
注文詳細 配送情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ 配送情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderDelivery
Styleguide 15.2.3
*/
.ec-orderDelivery .ec-orderDelivery__title {
padding: 16px 0 17px;
font-weight: bold;
font-size: 18px;
position: relative; }
.ec-orderDelivery .ec-orderDelivery__change {
display: inline-block;
position: absolute;
right: 0;
top: 0; }
.ec-orderDelivery .ec-orderDelivery__items {
border-bottom: 1px dotted #ccc;
border-top: 1px dotted #ccc; }
.ec-orderDelivery .ec-orderDelivery__address {
margin: 10px 0 18px; }
.ec-orderDelivery .ec-orderDelivery__address p {
margin: 0; }
/*
注文履歴詳細 支払情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ 支払情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
.ec-orderRole
.ec-orderPayment
.ec-rectHeading
h2 お支払方法
p 支払方法： 郵便振替
Styleguide 15.2.4
*/
/*
注文履歴詳細 お問い合わせ
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ お問い合わせ(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
.ec-orderRole
.ec-orderConfirm
.ec-rectHeading
h2 お問い合わせ
p 記載なし
Styleguide 15.2.5
*/
.ec-orderConfirm {
margin-bottom: 20px; }
.ec-orderConfirm .ec-input textarea, .ec-orderConfirm .ec-halfInput textarea, .ec-orderConfirm .ec-numberInput textarea, .ec-orderConfirm .ec-zipInput textarea, .ec-orderConfirm .ec-telInput textarea, .ec-orderConfirm .ec-select textarea, .ec-orderConfirm .ec-birth textarea {
height: 96px; }
/*
お届け先の複数指定
お届け先の複数指定に関するコンポーネントを定義します。
ex [マイページ お届け先の複数指定](http://demo3.ec-cube.net/shopping/shipping_multiple)
(商品購入画面 → 「お届け先を追加する」を押下)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAddAddress
Styleguide 15.2.6
*/
.ec-AddAddress {
padding: 0 10px; }
.ec-AddAddress .ec-AddAddress__info {
margin-bottom: 32px;
text-align: center;
font-size: 16px; }
.ec-AddAddress .ec-AddAddress__add {
border-top: 1px solid #f4f4f4;
padding-top: 20px;
margin-bottom: 20px; }
.ec-AddAddress .ec-AddAddress__item {
display: table;
padding: 16px;
background: #f4f4f4;
margin-bottom: 16px; }
.ec-AddAddress .ec-AddAddress__itemThumb {
display: table-cell;
min-width: 160px;
width: 20%; }
.ec-AddAddress .ec-AddAddress__itemThumb img {
width: 100%; }
.ec-AddAddress .ec-AddAddress__itemtContent {
display: table-cell;
vertical-align: middle;
padding-left: 16px;
font-size: 16px; }
.ec-AddAddress .ec-AddAddress__itemtTitle {
font-weight: bold;
margin-bottom: 10px; }
.ec-AddAddress .ec-AddAddress__itemtSize {
margin-bottom: 10px; }
.ec-AddAddress .ec-AddAddress__select {
margin-bottom: 5px; }
.ec-AddAddress .ec-AddAddress__selectAddress {
display: inline-block; }
.ec-AddAddress .ec-AddAddress__selectAddress label {
font-size: 16px;
font-weight: normal; }
.ec-AddAddress .ec-AddAddress__selectAddress select {
min-width: 100%; }
.ec-AddAddress .ec-AddAddress__selectNumber {
display: inline-block;
margin-left: 30px; }
.ec-AddAddress .ec-AddAddress__selectNumber label {
font-size: 16px;
font-weight: normal; }
.ec-AddAddress .ec-AddAddress__selectNumber input {
display: inline-block;
margin-left: 10px;
width: 80px; }
.ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action {
margin-bottom: 8px; }
.ec-AddAddress .ec-AddAddress__new {
margin-bottom: 20px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
注文履歴一覧
マイページ 注文履歴部に関する Project コンポーネントを定義します。
ex [マイページ 注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)
Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole
Styleguide 16.1
*/
.ec-historyRole .ec-historyRole__contents {
padding-top: 1em;
padding-bottom: 16px;
border-top: 1px solid #ccc;
display: flex;
flex-direction: column;
color: #525263; }
.ec-historyRole .ec-historyRole__header {
width: 100%; }
.ec-historyRole .ec-historyRole__detail {
border-top: 1px dotted #ccc;
width: 100%; }
.ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
border-top: none; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
margin-bottom: 8px;
font-size: 1.6rem;
font-weight: bold; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
margin-bottom: 8px;
font-size: 1.6rem;
font-weight: bold; }
/*
注文履歴一覧 規格
マイページ 注文履歴内アイテムの規格を定義します。
ex [マイページ 注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)
Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyRole-option
Styleguide 16.1.1
*/
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption {
display: inline-block;
margin-bottom: 8px;
margin-right: .5rem;
font-size: 1.6rem; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
display: inline-block;
padding-left: .5rem;
content: "/";
font-weight: bold; }
/*
注文履歴一覧ヘッダ
注文履歴一覧で使用するヘッダのコンポーネントを定義します。
ex [マイページ 注文履歴一覧ヘッダ](http://demo3.ec-cube.net/mypage)
(要ログイン)
Markup:
include /assets/tmpl/elements/16.1.history.pug
+ec-historyHeader
p hofe
Styleguide 16.1.2
*/
.ec-historyListHeader .ec-historyListHeader__date {
font-weight: bold;
font-size: 16px; }
.ec-historyListHeader .ec-historyListHeader__action {
margin: 16px 0; }
.ec-historyListHeader .ec-historyListHeader__action a {
font-size: 12px;
font-weight: normal; }
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
注文履歴詳細
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ 注文詳細](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailRole
Styleguide 16.2
*/
/*
注文履歴詳細 メール履歴
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ メール履歴](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailMail
Styleguide 16.2.5
*/
.ec-orderMails .ec-orderMails__item {
padding-bottom: 10px;
border-bottom: 1px dotted #ccc; }
.ec-orderMails .ec-orderMails__time {
margin: 0; }
.ec-orderMails .ec-orderMails__body {
display: none; }
/*
注文履歴詳細 メール履歴個別
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ メール履歴個別](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/16.2.historyDetail.pug
+ec-historyDetailMailHistory
Styleguide 16.2.6
*/
.ec-orderMail {
padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
margin-bottom: 16px; }
.ec-orderMail .ec-orderMail__time {
margin: 0; }
.ec-orderMail .ec-orderMail__body {
display: none; }
.ec-orderMail .ec-orderMail__time {
margin-bottom: 4px; }
.ec-orderMail .ec-orderMail__link {
margin-bottom: 4px; }
.ec-orderMail .ec-orderMail__link a {
color: #0092C4;
text-decoration: none;
cursor: pointer; }
.ec-orderMail .ec-orderMail__link a:hover {
color: #33A8D0; }
.ec-orderMail .ec-orderMail__close a {
color: #0092C4;
text-decoration: none;
cursor: pointer; }
.ec-orderMail .ec-orderMail__close a:hover {
color: #33A8D0; }
/*
住所一覧
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [マイページ内 お届け先編集](http://demo3.ec-cube.net/mypage/delivery)
Markup:
include /assets/tmpl/elements/17.1.address.pug
+ec-addressList
+ec-addressRole
sg-wrapper:
Styleguide 17.1
*/
.ec-addressRole .ec-addressRole__item {
border-top: 1px dotted #ccc; }
.ec-addressRole .ec-addressRole__actions {
margin-top: 32px;
padding-bottom: 20px;
border-bottom: 1px dotted #ccc; }
.ec-addressList .ec-addressList__item {
display: table;
width: 100%;
position: relative;
border-bottom: 1px dotted #ccc; }
.ec-addressList .ec-addressList__remove {
vertical-align: middle;
padding: 16px;
text-align: center; }
.ec-addressList .ec-addressList__remove .ec-icon img {
width: 1em;
height: 1em; }
.ec-addressList .ec-addressList__address {
display: table-cell;
vertical-align: middle;
padding: 16px;
margin-right: 4em;
width: 80%; }
.ec-addressList .ec-addressList__action {
position: relative;
vertical-align: middle;
text-align: right;
top: 27px;
padding-right: 10px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
パスワードリセット
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [パスワードリセット画面](http://demo3.ec-cube.net/forgot)
(カート内に商品がある状態でアクセス)
Markup:
include /assets/tmpl/elements/18.1.password.pug
+ec-passwordRole
Styleguide 18.1
*/
.ec-forgotRole {
margin: 0 auto;
padding-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 {
box-sizing: border-box; }
.ec-forgotRole *,
.ec-forgotRole *::before,
.ec-forgotRole *::after {
box-sizing: inherit; }
.ec-forgotRole img {
width: 100%; }
.ec-forgotRole .ec-forgotRole__intro {
font-size: 16px; }
.ec-forgotRole .ec-forgotRole__form {
margin-bottom: 16px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
会員登録
新規会員登録 に関する Project コンポーネントを定義します。
ex [新規会員登録画面 会員登録](http://demo3.ec-cube.net/entry)
Markup:
include /assets/tmpl/elements/19.1.register.pug
+ec-registerRole
Styleguide 19.1
*/
.ec-registerRole {
margin: 0 auto;
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 {
box-sizing: border-box; }
.ec-registerRole *,
.ec-registerRole *::before,
.ec-registerRole *::after {
box-sizing: inherit; }
.ec-registerRole img {
width: 100%; }
.ec-registerRole .ec-registerRole__actions {
padding-top: 20px;
text-align: center; }
.ec-registerRole .ec-registerRole__actions p {
margin-bottom: 16px; }
.ec-registerRole .ec-blockBtn--action {
margin-bottom: 16px; }
.ec-registerCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-registerCompleteRole *,
.ec-registerCompleteRole *::before,
.ec-registerCompleteRole *::after {
box-sizing: inherit; }
.ec-registerCompleteRole img {
width: 100%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
お問い合わせ
お問い合わせ に関する Project コンポーネントを定義します。
ex [お問い合わせ](http://demo3.ec-cube.net/contact)
Markup:
include /assets/tmpl/elements/19.2.contact.pug
+ec-contactRole
Styleguide 19.2
*/
.ec-contactRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-contactRole *,
.ec-contactRole *::before,
.ec-contactRole *::after {
box-sizing: inherit; }
.ec-contactRole img {
width: 100%; }
.ec-contactRole .ec-contactRole__actions {
padding-top: 20px; }
.ec-contactRole p {
margin: 16px 0; }
.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 {
box-sizing: border-box; }
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
box-sizing: inherit; }
.ec-contactConfirmRole img {
width: 100%; }
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
padding-top: 20px; }
.ec-contactConfirmRole .ec-blockBtn--action {
margin-bottom: 16px; }
.ec-contactCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
box-sizing: inherit; }
.ec-contactCompleteRole img {
width: 100%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
お客様情報の入力
ログインせずゲストとして商品を購入する際の、お客様情報の入力 に関する Project コンポーネントを定義します。
ex [カートSTEP2 お客様情報の入力(ゲスト購入)](http://demo3.ec-cube.net/shopping/nonmember)
Markup:
include /assets/tmpl/elements/19.3.customer.pug
+ec-customerRole
hoge
Styleguide 19.3
*/
.ec-customerRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-customerRole *,
.ec-customerRole *::before,
.ec-customerRole *::after {
box-sizing: inherit; }
.ec-customerRole img {
width: 100%; }
.ec-customerRole .ec-customerRole__actions {
padding-top: 20px; }
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 10px; }
.ec-contactConfirmRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
box-sizing: inherit; }
.ec-contactConfirmRole img {
width: 100%; }
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
padding-top: 20px; }
.ec-contactConfirmRole .ec-blockBtn--action {
margin-bottom: 16px; }
.ec-contactCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
box-sizing: inherit; }
.ec-contactCompleteRole img {
width: 100%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
@keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden; }
100% {
opacity: 1;
visibility: visible; } }
@keyframes fadeOut {
0% {
opacity: 1;
visibility: visible; }
100% {
opacity: 0;
visibility: hidden; } }
.bg-load-overlay {
background: rgba(255, 255, 255, 0.4);
box-sizing: border-box;
position: fixed;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: space-around;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2147483647;
opacity: 1; }
/*
404ページ
404 エラー画面で使用するページコンポーネントです。
ex [404エラー画面](http://demo3.ec-cube.net/404)
Markup:
include /assets/tmpl/elements/20.1.404.pug
+ec-404Role
Styleguide 20.1
*/
.ec-404Role {
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 {
box-sizing: border-box; }
.ec-404Role *,
.ec-404Role *::before,
.ec-404Role *::after {
box-sizing: inherit; }
.ec-404Role img {
width: 100%; }
.ec-404Role .ec-404Role__icon img {
width: 1em;
height: 1em; }
.ec-404Role .ec-404Role__title {
font-weight: bold;
font-size: 25px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
退会手続き
退会手続きで使用するページコンポーネントです。
ex [退会手続き](http://demo3.ec-cube.net/mypage/withdraw)
Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawRole
Styleguide 21.1
*/
.ec-withdrawRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-withdrawRole *,
.ec-withdrawRole *::before,
.ec-withdrawRole *::after {
box-sizing: inherit; }
.ec-withdrawRole img {
width: 100%; }
.ec-withdrawRole .ec-withdrawRole__title {
margin-bottom: 16px;
font-weight: bold;
font-size: 24px; }
.ec-withdrawRole .ec-withdrawRole__description {
margin-bottom: 32px;
font-size: 16px; }
.ec-withdrawRole .ec-icon img {
width: 100px;
height: 100px; }
/*
退会手続き実行確認
退会手続き実行確認で使用するページコンポーネントです。
ex [退会手続き 退会手続きへボタン→押下](http://demo3.ec-cube.net/mypage/withdraw)
Markup:
include /assets/tmpl/elements/21.1.withdraw.pug
+ec-withdrawConfirm
Styleguide 21.1.2
*/
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__cancel {
margin-bottom: 20px; }
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__title {
margin-bottom: 16px;
font-weight: bold;
font-size: 24px; }
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__description {
margin-bottom: 32px;
font-size: 16px; }
.ec-withdrawConfirmRole .ec-icon img {
width: 100px;
height: 100px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
会員情報編集完了
会員情報編集完了で使用するページコンポーネントです。
ex [会員情報編集完了](http://demo3.ec-cube.net/mypage/change_complete)
Markup:
include /assets/tmpl/elements/22.1.editComplete.pug
+ec-userEditCompleteRole
Styleguide 22.1
*/
.ec-userEditCompleteRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-userEditCompleteRole *,
.ec-userEditCompleteRole *::before,
.ec-userEditCompleteRole *::after {
box-sizing: inherit; }
.ec-userEditCompleteRole img {
width: 100%; }
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
margin-bottom: 16px;
font-weight: bold;
font-size: 24px; }
.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
margin-bottom: 32px;
font-size: 16px; }
@media (min-width: 768px) {
.ec-grid2 .ec-grid2__cell {
width: 50%; }
.ec-grid2 .ec-grid2__cell2 {
width: 100%; }
.ec-grid3 .ec-grid3__cell {
width: 33.33333%; }
.ec-grid3 .ec-grid3__cell2 {
width: 66.66667%; }
.ec-grid3 .ec-grid3__cell3 {
width: 100%; }
.ec-grid4 .ec-grid4__cell {
width: 25%; }
.ec-grid6 .ec-grid6__cell {
width: 16.66667%; }
.ec-grid6 .ec-grid6__cell2 {
width: 33.33333%; }
.ec-grid6 .ec-grid6__cell3 {
width: 50%; } }
@media only screen and (min-width: 768px) {
.ec-pageHeader h1 {
border-top: none;
border-bottom: 1px solid #ccc;
margin: 10px 16px 48px;
padding: 8px;
font-size: 32px;
font-weight: bold; }
.ec-heading-bold {
font-size: 18px; }
.ec-reportHeading {
border-top: 0;
font-size: 32px; }
.ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3,
.ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p {
font-size: 32px; }
.ec-price .ec-price__unit {
font-size: 1em; }
.ec-price .ec-price__price {
font-size: 1em; }
.ec-price .ec-price__tax {
font-size: 0.57em; }
.ec-borderedDefs dl {
flex-wrap: nowrap;
padding: 15px 0 4px; }
.ec-borderedDefs dt {
padding-top: 14px;
width: 30%; }
.ec-borderedDefs dd {
width: 70%;
line-height: 3; }
.ec-list-chilled dt, .ec-list-chilled dd {
padding: 16px 0; }
.ec-list-chilled dd {
padding: 16px; }
.ec-borderedList {
border-top: 1px dotted #ccc; }
.ec-blockTopBtn {
right: 30px;
bottom: 30px;
letter-spacing: .65px;
line-height: 33px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 600;
font-style: normal;
}
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
font-size: 14px; }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
font-size: 14px; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
font-size: 14px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
margin-bottom: 16px; }
.ec-halfInput input[type='text'] {
margin-left: 15px;
width: 45%; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
font-size: 14px; }
.ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select {
font-size: 14px; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea {
font-size: 14px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input {
margin-bottom: 16px; }
.ec-halfInput input[type='text'] {
margin-left: 15px;
width: 45%; }
.ec-select__delivery {
display: inline-block; }
.ec-select__time {
display: inline-block; }
.ec-birth select {
margin: 0 8px 10px; }
.ec-required {
margin-left: 1em; }
.ec-grid2 {
display: flex; }
.ec-grid3 {
display: flex; }
.ec-grid4 {
display: flex; }
.ec-grid6 {
display: flex; }
.ec-off1Grid {
display: block;
margin: 0; }
.ec-off1Grid .ec-off1Grid__cell {
position: relative;
min-height: 1px;
margin-left: 8.33333%; }
.ec-off2Grid {
display: flex; }
.ec-off2Grid .ec-off2Grid__cell {
position: relative;
min-height: 1px;
margin-left: 16.66667%; }
.ec-off3Grid {
display: flex; }
.ec-off3Grid .ec-off3Grid__cell {
position: relative;
min-height: 1px;
margin-left: 25%; }
.ec-off4Grid {
display: flex; }
.ec-off4Grid .ec-off4Grid__cell {
position: relative;
min-height: 1px;
margin-left: 33.33333%; }
.ec-imageGrid .ec-imageGrid__img {
padding: 10px;
width: 130px; }
.ec-login {
margin: 0 16px;
padding: 30px 13% 60px; }
.ec-login .ec-login__link {
margin-left: 20px; }
.ec-guest {
height: 100%;
margin: 0 16px; }
.ec-displayB {
flex-direction: row; }
.ec-displayB .ec-displayB__cell {
width: 31.4466%;
margin-bottom: 0; }
.ec-displayC .ec-displayC__cell {
width: 22.8775%; }
.ec-displayD {
box-sizing: border-box;
flex-wrap: nowrap; }
.ec-displayD .ec-displayD__cell {
width: 14.3083%;
margin-bottom: 16px; }
.ec-topicpath {
padding: 30px 0 10px;
border: 0;
font-size: 16px; }
.ec-progress {
margin-bottom: 30px;
padding: 0; }
.ec-progress .ec-progress__number {
line-height: 42px;
width: 42px;
height: 42px;
font-size: 20px; }
.ec-cartNaviWrap {
position: relative; }
.ec-cartNavi {
display: flex;
justify-content: space-between;
border-radius: 99999px;
box-sizing: border-box;
padding: 12px 17px 10px;
width: auto;
min-width: 140px;
height: 44px;
white-space: nowrap;
cursor: pointer;
background: #F8F8F8; }
.ec-cartNavi .ec-cartNavi__badge {
display: inline-block;
min-width: 17px;
position: relative;
left: 0;
top: 0; }
.ec-cartNavi .ec-cartNavi__price {
display: inline-block;
font-size: 14px;
font-weight: normal;
vertical-align: middle; }
.ec-cartNavi.is-active .ec-cartNavi__badge {
display: none; }
.ec-cartNaviIsset {
margin-top: 10px;
min-width: 256px;
max-width: 256px; }
.ec-cartNaviIsset::before {
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 8.5px 10px 8.5px;
border-color: transparent transparent #f8f8f8 transparent;
position: absolute;
top: -9px; }
.ec-cartNaviNull {
margin-top: 10px;
min-width: 256px;
max-width: 256px; }
.ec-cartNaviNull::before {
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 8.5px 10px 8.5px;
border-color: transparent transparent #f8f8f8 transparent;
position: absolute;
top: -9px; }
.ec-totalBox .ec-totalBox__price {
font-size: 24px; }
.ec-totalBox .ec-totalBox__taxLabel {
font-size: 14px; }
.ec-totalBox .ec-totalBox__taxRate {
font-size: 12px; }
.ec-news {
margin-right: 3%; }
.ec-news {
margin-bottom: 32px; }
.ec-news .ec-news__title {
padding: 16px;
text-align: left;
font-size: 24px; }
.ec-navlistRole .ec-navlistRole__navlist {
flex-wrap: nowrap; }
.ec-welcomeMsg {
padding-left: 26px;
padding-right: 26px; }
.ec-favoriteRole .ec-favoriteRole__item-image {
height: 250px; }
.ec-favoriteRole .ec-favoriteRole__item {
width: 25%; }
.ec-mypageRole {
padding-left: 26px;
padding-right: 26px; }
.ec-mypageRole .ec-pageHeader h1 {
margin: 10px 0 48px;
padding: 8px 0 18px; }
.ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 75%; }
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
width: 50%; }
.ec-layoutRole .ec-layoutRole__left,
.ec-layoutRole .ec-layoutRole__right {
display: block;
width: 25%; }
.ec-headerRole:after {
content: " ";
display: table; }
.ec-headerRole:after {
clear: both; }
.ec-headerRole {
width: 100%; }
.ec-headerRole:after {
content: " ";
display: table; }
.ec-headerRole:after {
clear: both; }
.ec-headerRole .ec-headerRole__navSP {
display: none; }
.ec-headerNaviRole {
padding-bottom: 40px; }
.ec-headerNaviRole .ec-headerNaviRole__search {
display: inline-block;
margin-top: 10px; }
.ec-headerNaviRole .ec-headerNaviRole__search a {
color: inherit;
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__search a:hover {
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__navSP {
display: none; }
.ec-headerNaviRole .ec-headerNaviRole__navSP a {
color: inherit;
text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__navSP a:hover {
text-decoration: none; }
.ec-headerNavSP {
display: none; }
.ec-headerTitle .ec-headerTitle__title a {
font-size: 40px; }
.ec-headerTitle .ec-headerTitle__subtitle {
font-size: 16px;
margin-bottom: 10px; }
.ec-headerNav .ec-headerNav__itemIcon {
margin-right: 0;
font-size: 20px; }
.ec-headerNav .ec-headerNav__itemLink {
display: inline-block; }
.ec-headerSearch .ec-headerSearch__category {
float: left;
width: 43%; }
.ec-headerSearch .ec-headerSearch__category .ec-select select {
max-width: 165px;
height: 36px; }
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
border-top-right-radius: inherit;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px; }
.ec-headerSearch .ec-headerSearch__keyword {
float: right;
width: 57%;
border-bottom-left-radius: inherit;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px; }
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
font-size: 12px; }
.ec-categoryNaviRole {
display: block;
width: 100%; }
.ec-categoryNaviRole a {
color: inherit;
text-decoration: none; }
.ec-categoryNaviRole a:hover {
text-decoration: none; }
.ec-itemNav__nav {
display: inline-block; }
.ec-itemNav__nav li {
float: left;
width: auto; }
.ec-itemNav__nav li a {
text-align: center;
border-bottom: none; }
.ec-itemNav__nav li ul {
display: block;
z-index: 100;
position: absolute; }
.ec-itemNav__nav li ul li {
overflow: hidden;
height: 0; }
.ec-itemNav__nav > li:hover > ul > li {
overflow: visible;
height: auto; }
.ec-itemNav__nav li ul li ul:before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 12px;
color: white;
position: absolute;
top: 19px;
right: auto;
left: -20px; }
.ec-itemNav__nav li ul li:hover > ul > li {
overflow: visible;
height: auto;
width: auto; }
.ec-drawerRole {
display: none; }
.ec-drawerRoleClose {
display: none; }
.ec-drawerRole.is_active {
display: none; }
.ec-drawerRoleClose.is_active {
display: none; }
.ec-overlayRole {
display: none; }
.have_curtain .ec-overlayRole {
display: none; }
.ec-footerRole {
padding-top: 40px;
margin-top: 100px; }
.ec-footerRole .ec-footerRole__inner {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-footerRole .ec-footerRole__inner *,
.ec-footerRole .ec-footerRole__inner *::before,
.ec-footerRole .ec-footerRole__inner *::after {
box-sizing: inherit; }
.ec-footerRole .ec-footerRole__inner img {
width: 100%; }
.ec-footerNavi .ec-footerNavi__link {
display: inline-block; }
.ec-footerNavi .ec-footerNavi__link a {
display: inline-block;
border-bottom: none;
margin: 0 10px;
padding: 0;
text-decoration: underline; }
.ec-footerTitle {
padding: 50px 0 80px; }
.ec-footerTitle .ec-footerTitle__logo a {
font-size: 24px; }
.ec-footerTitle .ec-footerTitle__copyright {
font-size: 12px; }
.ec-sliderItemRole .item_nav {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 0; }
.ec-eyecatchRole {
flex-wrap: nowrap; }
.ec-eyecatchRole .ec-eyecatchRole__image {
order: 2; }
.ec-eyecatchRole .ec-eyecatchRole__intro {
padding-right: 5%;
order: 1; }
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-top: 45px; }
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: 1em;
font-size: 26px; }
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
margin-bottom: 30px; }
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 30px; }
.ec-blockBtn--top {
max-width: 260px; }
.ec-topicRole {
padding: 60px 0; }
.ec-topicRole .ec-topicRole__list {
flex-wrap: nowrap; }
.ec-topicRole .ec-topicRole__listItem {
width: calc(100% / 2); }
.ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
margin-right: 30px; }
.ec-topicRole .ec-topicRole__listItemTitle {
margin-top: 1em; }
.ec-newItemRole {
padding: 60px 0; }
.ec-newItemRole .ec-newItemRole__list {
flex-wrap: nowrap; }
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 15px;
width: calc(100% / 4); }
.ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
margin-right: 30px; }
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 30px; }
.ec-newItemRole .ec-newItemRole__listItemTitle {
margin: 20px 0 10px; }
.ec-categoryRole {
padding: 60px 0; }
.ec-categoryRole .ec-categoryRole__list {
flex-wrap: nowrap; }
.ec-categoryRole .ec-categoryRole__listItem {
width: calc(100% / 3); }
.ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
margin-right: 30px; }
.ec-newsRole {
padding: 60px 0 0; }
.ec-newsRole .ec-newsRole__news {
border: 16px solid #F8F8F8;
padding: 20px 30px; }
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 0; }
.ec-newsRole .ec-newsRole__newsItem {
padding: 20px 0; }
.ec-newsRole .ec-newsRole__newsHeading {
display: flex; }
.ec-newsRole .ec-newsRole__newsDate {
display: inline-block;
margin: 0;
min-width: 120px;
font-size: 14px; }
.ec-newsRole .ec-newsRole__newsColumn {
display: inline-flex;
min-width: calc(100% - 120px); }
.ec-newsRole .ec-newsRole__newsTitle {
margin-bottom: 0;
line-height: 1.8; }
.ec-newsRole .ec-newsRole__newsDescription {
margin: 20px 0 0;
line-height: 1.8; }
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
margin: 20px 0 0; }
.ec-searchnavRole {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
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 {
box-sizing: border-box; }
.ec-searchnavRole *,
.ec-searchnavRole *::before,
.ec-searchnavRole *::after {
box-sizing: inherit; }
.ec-searchnavRole img {
width: 100%; }
.ec-searchnavRole .ec-searchnavRole__infos {
padding-left: 0;
padding-right: 0;
border-top: 1px solid #ccc;
padding-top: 16px;
flex-direction: row; }
.ec-searchnavRole .ec-searchnavRole__counter {
margin-bottom: 0;
width: 50%; }
.ec-searchnavRole .ec-searchnavRole__actions {
width: 50%; }
.ec-shelfGrid {
margin-left: -16px;
margin-right: -16px; }
.ec-shelfGrid .ec-shelfGrid__item-image {
height: 250px; }
.ec-shelfGrid .ec-shelfGrid__item {
padding: 0 16px;
width: 25%; }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
padding: 0 16px; }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
padding: 0 16px; }
.ec-shelfGridCenter {
margin-left: -16px;
margin-right: -16px; }
.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
height: 250px; }
.ec-shelfGridCenter .ec-shelfGridCenter__item {
padding: 0 16px;
width: 25%; }
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
padding: 0 16px; }
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
padding: 0 16px; }
.ec-modal .ec-modal-wrap {
padding: 40px 10px;
width: 50%;
margin: 20px auto; }
.ec-productRole .ec-productRole__img {
margin-right: 16px;
margin-bottom: 0; }
.ec-productRole .ec-productRole__profile {
margin-left: 16px; }
.ec-productRole .ec-productRole__title .ec-headingTitle {
font-size: 32px; }
.ec-productRole .ec-productRole__price {
padding: 14px 0;
border-bottom: 1px dotted #ccc; }
.ec-productRole .ec-productRole__actions .ec-select select {
min-width: 350px;
max-width: 350px; }
.ec-productRole .ec-productRole__btn {
width: 60%;
margin-bottom: 16px;
min-width: 350px; }
.ec-cartRole .ec-cartRole__totalText {
margin-bottom: 30px;
padding: 0; }
.ec-cartRole .ec-cartRole__cart {
margin: 0 10%; }
.ec-cartRole .ec-cartRole__actions {
width: 20%;
margin-right: 10%; }
.ec-cartRole .ec-cartRole__totalAmount {
font-size: 24px; }
.ec-cartTable {
border-top: none; }
.ec-cartHeader {
display: table-row; }
.ec-cartRow .ec-cartRow__delColumn {
width: 8.3333333%; }
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
width: 1em;
height: 1em; }
.ec-cartRow .ec-cartRow__contentColumn {
display: table-cell; }
.ec-cartRow .ec-cartRow__img {
display: inline-block;
min-width: 80px;
max-width: 100px;
padding-right: 0; }
.ec-cartRow .ec-cartRow__summary {
display: inline-block;
margin-left: 20px;
vertical-align: middle; }
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
display: none; }
.ec-cartRow .ec-cartRow__amountColumn {
width: 16.66666667%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
display: block; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
display: none; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
display: block; }
.ec-cartRow .ec-cartRow__subtotalColumn {
display: table-cell; }
.ec-orderRole {
margin-top: 20px;
flex-direction: row; }
.ec-orderRole .ec-orderRole__detail {
padding: 0 16px;
width: 66.66666%; }
.ec-orderRole .ec-orderRole__summary {
width: 33.33333%;
padding: 0 16px; }
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: none; }
.ec-orderRole .ec-borderedList {
border-top: none; }
.ec-orderConfirm {
margin-bottom: 0; }
.ec-AddAddress {
margin: 0 10%; }
.ec-AddAddress .ec-AddAddress__selectAddress select {
min-width: 350px; }
.ec-historyRole .ec-historyRole__contents {
flex-direction: row; }
.ec-historyRole .ec-historyRole__header {
width: 33.3333%; }
.ec-historyRole .ec-historyRole__detail {
width: 66.6666%;
border-top: none; }
.ec-historyListHeader .ec-historyListHeader__date {
font-weight: bold;
font-size: 20px; }
.ec-historyListHeader .ec-historyListHeader__action a {
font-size: 14px; }
.ec-registerRole .ec-registerRole__actions {
text-align: left; }
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 16px; }
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
font-size: 32px; } }
@media only screen and (min-width: 768px) and (min-width: 768px) {
.ec-off1Grid {
display: flex; }
.ec-off1Grid .ec-off1Grid__cell {
width: 83.33333%; }
.ec-off2Grid .ec-off2Grid__cell {
width: 66.66667%; }
.ec-off3Grid .ec-off3Grid__cell {
width: 50%; }
.ec-off4Grid .ec-off4Grid__cell {
width: 33.33333%; } }
/*# sourceMappingURL=style.css.map */
#page_entryShop .ec-halfInput input[type='text']{
width: 100%;
}
.custom_header_title_outer{
width:100%;
border-bottom: 1px solid #eaeaea;
}
.custom_header_title{
max-width: 1600px;
width: 100%;
margin: 0 auto;
/*padding: 0 60px;*/
height: 45px;
line-height: 45px;
}
.custom_header_title > p{
float: left;
font-weight: 600;
}
.custom_header_title > .toolbar__item{
float: right;
}
.custom_header_title .inline-list {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.custom_header_title .toolbar__social li {
margin-left: 20px;
}
.custom_header_title .icon__fallback-text {
clip: rect(0,0,0,0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
ul, ol {
list-style: none;
}
.toolbar__social li svg {
width: 18px;
height: 18px;
}
.ec-headerRole {
max-width: 1600px;
}
.custom_header_logo_nav .ec-headerTitle{
float: left;
width: 200px;
}
.custom_header_logo_nav .ec-headerTitle .ec-headerTitle__title a{
margin: 0;
}
.custom_header_logo_nav_ul{
float: right;
margin-right: 30%;
padding-top: 30px;
}
.custom_header_logo_nav_ul li{
display: inline-block;
padding-left: 40px;
}
.custom_header_logo_nav_ul li a{
font-weight: 600;
color:#222;
font-size: 13px;
vertical-align: middle;
}
.ec-headerNaviRole{
position: relative;
max-width: 1600px;
padding: 0;
}
.ec-headerNaviRole__right{
position: absolute;
top: -100px;
right: 30px;
}
.ec-headerNav__item{
margin-right: 20px;
}
.ec-headerNav__item a{
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-align: center;
}
/*.ec-headerNav__item s{
margin: 0;
}*/
.ec-headerNav__item a span{
margin-top: 14px;
margin-right: 0 !important;
font-weight: bold;
}
.ec-headerNav__item.favorite a svg{
width: 20px;
height: 20px;
}
.ec-headerRole__cart{
display: none !important;
}
.ec-cartNavi{
background: #fff;
}
.ec-cartNavi a {
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-align: center;
}
.ec-cartNavi a svg{
width: 20px;
height: 20px;
}
.ec-headerNav__item.cart a svg{
overflow: visible !important;
}
@media screen and (min-width: 768px){
.ec-headerNaviRole__search{
position: absolute;
right: 60px;
padding: 18px 18px 18px 600px;
background: #eee;
z-index: 999;
border-radius: 10px;
box-shadow: 0 3px 5px 0 rgb(0 0 0 / 22%);
}
}
@media screen and (max-width: 768px){
.ec-layoutRole .ec-headerNaviRole .ec-headerNaviRole__search{
width: 100%;
position: absolute;
/*right: 60px;
padding: 18px 18px 18px 600px;*/
background: #eee;
z-index: 999;
/*border-radius: 10px;*/
box-shadow: 0 3px 5px 0 rgb(0 0 0 / 22%);
margin-top: 10px;
padding: 20px;
}
.ec-layoutRole .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search{
display: none;
}
.ec-layoutRole .ec-headerSearch .ec-headerSearch__keyword{
background: #fff !important;
width: 80%;
margin: 0 auto;
border-radius: 30px;
}
.ec-layoutRole .ec-headerNaviRole #hotkeyword {
font-size: 16px;
font-size: 1.6rem;
clear: both;
position: relative;
z-index: 100;
background: #fff;
position: absolute;
box-shadow: 0 3px 5px 0 rgb(0 0 0 / 22%);
padding: 0 10px;
top: 70px;
width: 100%;
left: 0;
}
}
.ec-headerNaviRole .ec-headerNaviRole__left{
width: 100%;
}
@media screen and (min-width: 768px){
#hotkeyword {
font-size: 16px;
font-size: 1.6rem;
clear: both;
position: relative;
z-index: 100;
background: #fff;
position: absolute;
box-shadow: 0 3px 5px 0 rgb(0 0 0 / 22%);
padding: 0 10px;
left: 20px;
top: 10px;
}
}
#hotkeyword ul.list_word {
width: 100%;
font-size: 16px;
font-size: 1.2rem;
color: #000;
/* background: #FFF; */
/* border-bottom: 1px solid #D9D9D9; */
padding: 0;
margin: 0;
text-align: center;
display: block;
clear: both;
position: relative;
box-sizing: border-box;
margin-top: 10px;
}
#hotkeyword ul.list_word:before {
content: "HOT検索ワード";
height: 24px;
font-size: 12px;
font-size: 1.2rem;
color: #FFF;
background: #FF6347;
padding: 4px 8px;
border-radius: 2px;
display: inline-block;
position: relative;
top: -12px;
margin-right: 5px;
}
#hotkeyword ul.list_word li {
display: inline-block;
margin: 0;
padding: 0 3px;
text-align: center;
line-height: 1;
list-style: none;
}
#hotkeyword ul.list_word a, #hotkeyword ul.list_word a:link, #hotkeyword ul.list_word a:visited {
height: 30px;
line-height: 30px;
color: #333;
position: relative;
display: block;
float: left;
margin: 0;
padding: 0 10px;
border: #DDD solid 1px;
border-radius: 3px;
white-space: nowrap;
}
#hotkeyword ul.list_word a:link, #hotkeyword ul.list_word a:visited {
color: #333;
background: #FFF;
}
#hotkeyword ul.list_word a{ text-decoration:none; font-weight:400;}
#hotkeyword ul.list_word a:link,
#hotkeyword ul.list_word a:visited { color:#333; background:#FFF;}
#hotkeyword ul.list_word a:hover,
#hotkeyword ul.list_word a:focus{ color:#F60; background:#F0F0F0;}
#hotkeyword ul.list_word a img { border-style: none; margin:0;padding:0;}
.dis_none{
display: none !important;
}
.ec-headerNaviRole .ec-headerNaviRole__right{
width: auto;
}
#shopify-section-menu-tabs {
position: relative;
z-index: 99;
margin-top: 2px;
border-top: 1px solid #eee;
}
#shopify-section-menu-tabs .c-menu-tabs {
background-color: #fff;
}
#shopify-section-menu-tabs .c-menu-tabs > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
padding:0;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li {
width: 20%;
text-align: center;
border: solid 1px #eaeaea;
border-right: none;
border-top: none;
cursor: pointer;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > a {
display: inline-block;
vertical-align: middle;
text-decoration: none;
padding: 16px 20px;
white-space: nowrap;
color: #222;
color: var(--colorNavText);
text-transform: uppercase;
font-size: 15px;
letter-spacing: .75px;
line-height: 23px;
font-family: poppins,sans-serif;
font-weight: 500;
font-style: normal;
color: #222!important;
padding: 21px 20px 19px;
position: relative;
left: 3px;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul{
visibility: hidden;
position: absolute;
left: 0;
z-index: 6;
background-color: #fff;
background-color: var(--colorBody);
min-width: 100%;
padding: 10px 0 5px;
box-shadow: 0 10px 20px #00000017;
padding-top: 30px;
background-color: #f8f8f8;
border-top: solid 1px #e2e2e2;
padding: 40px 20%;
line-height: 1.8;
text-align: left!important;
display: flex;
flex-wrap: wrap;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li:nth-child(1) > a:before {
position: absolute;
content: "";
background: url(../img/top/fashion01.png) no-repeat center;
background-size: contain;
width: 35.04px;
height: 37.26px;
top: 49%;
left: -22.6px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li:nth-child(2) > a:before {
position: absolute;
content: "";
background: url(../img/top/beauty02.png) no-repeat center;
background-size: contain;
width: 35.04px;
height: 37.26px;
top: 49%;
left: -22.6px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li:nth-child(3) > a:before {
position: absolute;
content: "";
background: url(../img/top/kids03.png) no-repeat center;
background-size: contain;
width: 35.04px;
height: 37.26px;
top: 49%;
left: -22.6px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li:nth-child(4) > a:before {
position: absolute;
content: "";
background: url(../img/top/living04.png) no-repeat center;
background-size: contain;
width: 35.04px;
height: 37.26px;
top: 49%;
left: -22.6px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > a:after {
position: absolute;
content: "";
background: url(../img/top/icon-arrow.svg) no-repeat center;
background-size: contain;
width: 7.52px;
height: 3.76px;
top: 52%;
bottom: auto;
right: 4px;
left: auto;
-webkit-transform: translate(0%,-50%);
transform: translateY(-50%);
display: block;
margin: 0;
border: none;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li{
width: calc(100% / 3);
padding: 0 5px;
margin-bottom: 20px;
position: relative;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li > a{
font-size: 14px;
letter-spacing: -.5px;
line-height: 1.5;
color: #fff;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
border-radius: 30px;
padding: 15px 25px;
background-color: #006CB8;
position: relative;
white-space: normal;
display: block;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li > a:before {
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-arrow-menu.png?v=1629967601) no-repeat center;
background-size: contain;
width: 9px;
height: 9px;
top: 50%;
right: 15px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li > ul{
visibility: hidden;
z-index: 7;
position: absolute;
top: 0;
right: -210px;
background: #eee;
padding: 20px;
border-radius: 10px;
width: 210px;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li > ul > li{
margin-bottom: 20px;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li > ul > li > a{
font-size: 14px;
letter-spacing: -.5px;
line-height: 1.5;
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
border-radius: 30px;
padding: 10px 20px;
background-color: #fff;
position: relative;
white-space: normal;
display: block;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li > ul > li > a:before {
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-arrow-menu.png?v=1629967601) no-repeat center;
background-size: contain;
width: 9px;
height: 9px;
top: 50%;
right: 10px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li:hover > ul{
visibility: visible;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li:hover > ul{
visibility: visible;
}
.ec-layoutRole .ec-layoutRole__contents{
max-width: 100%;
margin-top: -20px;
}
.ec-layoutRole .ec-layoutRole__contents .ec-sliderRole{
max-width: 100%;
padding: 0;
margin-top: -20px;
}
.slick-dots li.slick-active button:before{
background: #006CB8 !important;
width: 20px !important;
height: 6px !important;
border-radius: 0 !important;
}
.slick-dots li button:before{
background: #ccc !important;
width: 20px !important;
height: 6px !important;
border-radius: 0 !important;
}
.ec-secHeading .ec-secHeading__ja{
/*display: none;*/
}
.ec-secHeading__en{
display: inline-block;
font-size: 18px;
letter-spacing: .9px;
line-height: 24px;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
}
.ec-newsRole .ec-newsRole__newsItem{
padding: 0;
}
.customer_news_new {
max-width: 1600px;
padding: 0 60px;
position: relative;
}
.customer_news_new .ec-newsRole{
padding: 0;
}
.customer_news_new .ec-newsRole__news{
width: 70%;
display: inline-block;
padding: 0;
margin: 0;
background: #fff;
border: none;
position: absolute;
top: 4px;
left: 280px;
}
.customer_news_new .slick-prev, .customer_news_new .slick-next{
color: transparent;
background: transparent;
border: none;
width: 0;
height: 0;
}
.customer_news_new .slick-prev:after {
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-arrow-orange.png?v=1630296280) no-repeat center;
background-size: contain;
width: 25px;
height: 15px;
top: 30px;
right: -100px;
-webkit-transform: translate(-50%,-33%) scaleX(-1);
transform: translate(-50%,-33%) scaleX(-1);
}
.customer_news_new .slick-next:after {
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-arrow-orange.png?v=1630296280) no-repeat center;
background-size: contain;
width: 25px;
height: 15px;
top: 32px;
right: -130px;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.ec-newsRole .ec-newsRole__newsTitle{
color:#222;
}
.custom_collection{
margin-top: 50px;
}
.custom_collection .c-collection-list {
padding-bottom: 99px;
border-bottom: solid 1px #eaeaea;
}
.custom_collection .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_collection .c-collection-list__main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin: 0 -26.25px;
}
.custom_collection .c-collection-list__item {
width: 25%;
padding: 0 26.25px;
}
.custom_collection .c-collection-list__link {
display: block;
background-color: #f8f8f8;
border-bottom-right-radius: 100px;
}
.custom_collection .c-collection-list__itemBox {
position: relative;
}
.custom_collection .c-collection-list__itemImg {
width: 70.15873%;
margin: 0 auto;
padding-top: 30px;
}
.custom_collection .u-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.custom_collection .c-collection-list__itemContent {
text-align: center;
margin-top: -25px;
position: relative;
}
.custom_collection .c-collection-list__itemTitle {
font-size: 16px;
letter-spacing: 1.24px;
line-height: 31px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
color: #222;
margin-bottom: 1px;
}
.custom_collection .c-collection-list__itemText {
font-size: 15px;
letter-spacing: .75px;
line-height: 31px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
color: #222;
}
.custom_collection .c-collection-list__itemLabel {
position: absolute;
top: 20px;
left: 20px;
}
.custom_collection .c-collection-list__itemLabelText {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
font-size: 14px;
letter-spacing: .28px;
line-height: 19px;
font-family: poppins,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
border-left: solid 1px #006CB8;
padding-left: 4px;
}
.custom_collection .c-collection-list__itemButton {
text-align: right;
line-height: 0;
}
.custom_collection .c-collection-list__btn {
width: 52px;
height: 52px;
background-color: #006CB8;
border-radius: 100%;
position: relative;
-webkit-transition: .5s;
transition: .5s;
border: none;
}
.custom_collection .c-collection-list__btn:before {
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-white.png?v=1630031765) no-repeat center;
background-size: contain;
width: 15.73px;
height: 5.51px;
top: 49%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.custom_collection .c-collection-list__item:hover .c-collection-list__btn {
background-color: #333;
}
.custom_newback .c-collection-template {
padding-top: 83px;
margin: 0;
padding-bottom: 80px;
}
.custom_newback .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_newback .section-header {
margin-bottom: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.custom_newback .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_newback .section-header--with-link .section-header__title {
flex: 1 1 auto;
margin-bottom: 0;
}
.custom_newback .section-header__titleText {
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_newback .section-header__title p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
margin: 0;
padding-left: 29px;
position: relative;
top: -4px;
}
.custom_newback .section-header__link {
flex: 0 1 auto;
margin-top: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.custom_newback .section-header__link {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
padding-right: 37px;
position: relative;
right: 0;
top: 7px;
}
.custom_newback .section-header--with-link .section-header__link {
margin-top: 0;
}
.custom_newback .section-header__link:before {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-organe.png?v=1629973403) no-repeat center;*/
background: url(../img/top/yajirushimigi.png) no-repeat center;
background-size: contain;
width: 15.73px;
height: 5.51px;
top: 50%;
right: 0;
}
.custom_newback .new-grid {
margin: 0 -11.5px;
}
.custom_newback .new-grid {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
word-break: break-word;
}
.custom_newback .new-grid .grid-item {
flex: 0 0 100%;
align-items: stretch;
display: flex;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
flex: 0 0 20%;
padding: 0 11.5px;
position: relative;
}
.custom_newback .grid-item__content {
position: relative;
display: flex;
flex-direction: column;
text-align: left;
width: 100%;
background-color: #fff;
background-color: var(--colorBody);
}
.custom_newback .grid-item__content {
background-color: unset!important;
}
.custom_newback .grid-item__link {
display: block;
width: 100%;
}
.custom_newback .grid-product__image-wrap {
margin: 0 0 15px;
}
.custom_newback .grid-product__image-wrap {
position: relative;
}
.custom_newback .grid-product__tags {
position: absolute;
bottom: 0;
left: 0;
margin-left: calc(var(--productTileMargin)*-1);
z-index: 1;
}
.custom_newback .grid-product__tags {
top: 0;
left: 0;
margin-left: 0;
z-index: 9;
}
.custom_newback .grid-product__wishlist {
position: absolute;
top: 10px;
right: 13px;
width: 36px;
height: 36px;
border: 1px solid #E3E3E3;
background: #fff;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 10;
}
.custom_newback button.wk-button-product {
width: auto;
height: auto;
background: none;
line-height: normal;
cursor: pointer;
color: currentColor;
background: rgba(0,0,0,0);
display: flex;
align-content: center;
justify-content: flex-start;
flex-direction: row;
display: block;
margin: 18px 0 0!important;
padding: 0;
border: none;
border-radius: 0;
}
.custom_newback .grid-product__wishlist button.wk-button-product {
width: 100%;
height: 100%;
margin: 0!important;
}
.custom_newback button.wk-button-product .wk-icon {
display: inline-block;
margin: 0 5px 0 0;
padding: 0;
position: relative;
top: 2px;
}
.custom_newback .grid-product__wishlist button.wk-button-product .wk-icon {
position: initial;
width: 11.8px;
height: 10.9px;
margin: 0;
}
.custom_newback button.wk-button-product .wk-icon svg {
overflow: visible;
width: 100%;
height: 100%;
}
.custom_newback .grid-product__wishlist button.wk-button-product .wk-label {
display: none;
}
.custom_newback button.wk-button-product .wk-label {
text-align: center;
margin: 0;
display: inline;
text-transform: uppercase;
font-size: 13px;
font-weight: 400;
}
.custom_newback .grid__image-ratio {
position: relative;
background-color: #fff;
}
.custom_newback .grid__image-ratio--square:before {
padding-bottom: 100%;
}
.custom_newback .grid__image-ratio:before {
content: "";
display: block;
height: 0;
width: 100%;
}
.custom_newback .grid__image-ratio img {
/*opacity: 0;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.custom_newback .grid__image-ratio img.lazyloaded {
/*opacity: 0;*/
animation: fade-in .5s cubic-bezier(.29,.65,.58,1) 0s forwards;
}
.custom_newback .grid-product__secondary-image {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
opacity: 0;
background-color: #fff;
transition: opacity 0s cubic-bezier(.26,.54,.32,1);
pointer-events: none;
}
.custom_newback .grid-product__secondary-image img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.custom_newback .lazyloaded {
/*opacity: 0;*/
animation: fade-in .5s cubic-bezier(.29,.65,.58,1) forwards;
}
.custom_newback .grid-item__meta {
margin: 0;
margin-top: 20px!important;
}
.custom_newback .grid-item__meta-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.custom_newback .grid-product__title {
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
font-size: 13px;
letter-spacing: .75px;
line-height: 19px;
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.custom_newback .grid-product__vendor {
margin-top: 5px;
width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
font-size: 12px;
letter-spacing: .6px;
line-height: 17px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
color: #222;
opacity: .5;
margin-bottom: 13px;
}
.custom_newback .grid-item__collections {
display: none;
}
.custom_newback .grid-item__meta-secondary {
margin-top: 1px;
}
.custom_newback .grid-product__price {
color: #1c1d1d;
color: var(--colorPrice);
}
.custom_newback .grid-product__price--current {
display: inline-block;
font-weight: 700;
margin-right: 5px;
font-size: calc(var(--typeBaseSize) + 2px);
}
.custom_newback .grid-product__price--current {
font-size: calc(var(--typeBaseSize) + 2px);
}
.custom_newback .grid-product__price--current span {
font-size: 15px;
letter-spacing: .3px;
line-height: 20px;
color: #e84f4f;
font-family: poppins,sans-serif;
font-weight: 500;
font-style: normal;
}
.custom_newback span.grid-product__price--current.grid-product__price--currentBlack span {
color: #222;
}
.custom_newback .visually-hidden {
clip: rect(0,0,0,0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
.custom_newback .grid-product__price--current span.priceText {
font-size: 10px;
letter-spacing: .5px;
line-height: 14px;
color: #e84f4f;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
}
.custom_newback .grid-item__collection {
margin-top: 8px;
}
.custom_ranking .c-collection-template {
padding-top: 83px;
margin: 0;
padding-bottom: 80px;
}
.custom_ranking .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_ranking .section-header {
margin-bottom: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.custom_ranking .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_ranking .section-header--with-link .section-header__title {
flex: 1 1 auto;
margin-bottom: 0;
}
.custom_ranking .section-header__titleText {
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_ranking .section-header__title p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
margin: 0;
padding-left: 29px;
position: relative;
top: -4px;
}
.custom_ranking .section-header__link {
flex: 0 1 auto;
margin-top: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.custom_ranking .section-header__link {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
padding-right: 37px;
position: relative;
right: 0;
top: 7px;
}
.custom_ranking .section-header--with-link .section-header__link {
margin-top: 0;
}
.custom_ranking .section-header__link:before {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-organe.png?v=1629973403) no-repeat center;*/
background: url(../img/top/yajirushimigi.png) no-repeat center;
background-size: contain;
width: 15.73px;
height: 5.51px;
top: 50%;
right: 0;
}
.custom_ranking .new-grid {
margin: 0 -11.5px;
}
.custom_ranking .new-grid {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
word-break: break-word;
}
.custom_ranking .new-grid .grid-item {
flex: 0 0 100%;
align-items: stretch;
display: flex;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
flex: 0 0 20%;
padding: 0 11.5px;
position: relative;
}
.custom_ranking .grid-item__content {
position: relative;
display: flex;
flex-direction: column;
text-align: left;
width: 100%;
background-color: #fff;
background-color: var(--colorBody);
}
.custom_ranking .grid-item__content {
background-color: unset!important;
}
.custom_ranking .grid-item__link {
display: block;
width: 100%;
}
.custom_ranking .grid-product__image-wrap {
margin: 0 0 15px;
}
.custom_ranking .grid-product__image-wrap {
position: relative;
}
.custom_ranking .grid-product__tags {
position: absolute;
bottom: 0;
left: 0;
margin-left: calc(var(--productTileMargin)*-1);
z-index: 1;
}
.custom_ranking .grid-product__tags {
top: 0;
left: 0;
margin-left: 0;
z-index: 9;
}
.custom_ranking .grid-product__wishlist {
position: absolute;
top: 10px;
right: 13px;
width: 36px;
height: 36px;
border: 1px solid #E3E3E3;
background: #fff;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 10;
}
.custom_ranking button.wk-button-product {
width: auto;
height: auto;
background: none;
line-height: normal;
cursor: pointer;
color: currentColor;
background: rgba(0,0,0,0);
display: flex;
align-content: center;
justify-content: flex-start;
flex-direction: row;
display: block;
margin: 18px 0 0!important;
padding: 0;
border: none;
border-radius: 0;
}
.custom_ranking .grid-product__wishlist button.wk-button-product {
width: 100%;
height: 100%;
margin: 0!important;
}
.custom_ranking button.wk-button-product .wk-icon {
display: inline-block;
margin: 0 5px 0 0;
padding: 0;
position: relative;
top: 2px;
}
.custom_ranking .grid-product__wishlist button.wk-button-product .wk-icon {
position: initial;
width: 11.8px;
height: 10.9px;
margin: 0;
}
.custom_ranking button.wk-button-product .wk-icon svg {
overflow: visible;
width: 100%;
height: 100%;
}
.custom_ranking .grid-product__wishlist button.wk-button-product .wk-label {
display: none;
}
.custom_ranking button.wk-button-product .wk-label {
text-align: center;
margin: 0;
display: inline;
text-transform: uppercase;
font-size: 13px;
font-weight: 400;
}
.custom_ranking .grid__image-ratio {
position: relative;
background-color: #fff;
}
.custom_ranking .grid__image-ratio--square:before {
padding-bottom: 100%;
}
.custom_ranking .grid__image-ratio:before {
content: "";
display: block;
height: 0;
width: 100%;
}
.custom_ranking .grid__image-ratio img {
/*opacity: 0;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.custom_ranking .grid__image-ratio img.lazyloaded {
/*opacity: 0;*/
animation: fade-in .5s cubic-bezier(.29,.65,.58,1) 0s forwards;
}
.custom_ranking .grid-product__secondary-image {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
opacity: 0;
background-color: #fff;
transition: opacity 0s cubic-bezier(.26,.54,.32,1);
pointer-events: none;
}
.custom_ranking .grid-product__secondary-image img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.custom_ranking .lazyloaded {
/*opacity: 0;*/
animation: fade-in .5s cubic-bezier(.29,.65,.58,1) forwards;
}
.custom_ranking .grid-item__meta {
margin: 0;
margin-top: 20px!important;
}
.custom_ranking .grid-item__meta-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.custom_ranking .grid-product__title {
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
font-size: 13px;
letter-spacing: .75px;
line-height: 19px;
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.custom_ranking .grid-product__vendor {
margin-top: 5px;
width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
font-size: 12px;
letter-spacing: .6px;
line-height: 17px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
color: #222;
opacity: .5;
margin-bottom: 13px;
}
.custom_ranking .grid-item__collections {
display: none;
}
.custom_ranking .grid-item__meta-secondary {
margin-top: 1px;
}
.custom_ranking .grid-product__price {
color: #1c1d1d;
color: var(--colorPrice);
}
.custom_ranking .grid-product__price--current {
display: inline-block;
font-weight: 700;
margin-right: 5px;
font-size: calc(var(--typeBaseSize) + 2px);
}
.custom_ranking .grid-product__price--current {
font-size: calc(var(--typeBaseSize) + 2px);
}
.custom_ranking .grid-product__price--current span {
font-size: 15px;
letter-spacing: .3px;
line-height: 20px;
color: #e84f4f;
font-family: poppins,sans-serif;
font-weight: 500;
font-style: normal;
}
.custom_ranking span.grid-product__price--current.grid-product__price--currentBlack span {
color: #222;
}
.custom_ranking .visually-hidden {
clip: rect(0,0,0,0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
.custom_ranking .grid-product__price--current span.priceText {
font-size: 10px;
letter-spacing: .5px;
line-height: 14px;
color: #e84f4f;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
}
.custom_ranking .grid-item__collection {
margin-top: 8px;
}
.custom_new_product .c-recommend-collection {
background-color: #f8f8f8;
padding: 94px 0 91px;
}
.custom_new_product .c-collection-template {
padding-top: 83px;
margin: 0;
padding-bottom: 80px;
}
.custom_new_product .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_new_product .section-header {
margin-bottom: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.custom_new_product .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_new_product .section-header--with-link .section-header__title {
flex: 1 1 auto;
margin-bottom: 0;
}
.custom_new_product .section-header__titleText {
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_new_product .section-header__title p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
margin: 0;
padding-left: 29px;
position: relative;
top: -4px;
}
.custom_new_product .section-header__link {
flex: 0 1 auto;
margin-top: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.custom_new_product .section-header__link {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
padding-right: 37px;
position: relative;
right: 0;
top: 7px;
}
.custom_new_product .section-header--with-link .section-header__link {
margin-top: 0;
}
.custom_new_product .section-header__link:before {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-organe.png?v=1629973403) no-repeat center;*/
background: url(../img/top/yajirushimigi.png) no-repeat center;
background-size: contain;
width: 15.73px;
height: 5.51px;
top: 50%;
right: 0;
}
.custom_new_product .new-grid {
margin: 0 -11.5px;
}
.custom_new_product .new-grid {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
word-break: break-word;
}
.custom_new_product .new-grid .grid-item {
flex: 0 0 100%;
align-items: stretch;
display: flex;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
flex: 0 0 20%;
padding: 0 11.5px;
position: relative;
}
.custom_new_product .grid-item__content {
position: relative;
display: flex;
flex-direction: column;
text-align: left;
width: 100%;
background-color: #fff;
background-color: var(--colorBody);
}
.custom_new_product .grid-item__content {
background-color: unset!important;
}
.custom_new_product .grid-item__link {
display: block;
width: 100%;
}
.custom_new_product .grid-product__image-wrap {
margin: 0 0 15px;
}
.custom_new_product .grid-product__image-wrap {
position: relative;
}
.custom_new_product .grid-product__tags {
position: absolute;
bottom: 0;
left: 0;
margin-left: calc(var(--productTileMargin)*-1);
z-index: 1;
}
.custom_new_product .grid-product__tags {
top: 0;
left: 0;
margin-left: 0;
z-index: 9;
}
.custom_new_product .grid-product__wishlist {
position: absolute;
top: 10px;
right: 13px;
width: 36px;
height: 36px;
border: 1px solid #E3E3E3;
background: #fff;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 10;
}
.custom_new_product button.wk-button-product {
width: auto;
height: auto;
background: none;
line-height: normal;
cursor: pointer;
color: currentColor;
background: rgba(0,0,0,0);
display: flex;
align-content: center;
justify-content: flex-start;
flex-direction: row;
display: block;
margin: 18px 0 0!important;
padding: 0;
border: none;
border-radius: 0;
}
.custom_new_product .grid-product__wishlist button.wk-button-product {
width: 100%;
height: 100%;
margin: 0!important;
}
.custom_new_product button.wk-button-product .wk-icon {
display: inline-block;
margin: 0 5px 0 0;
padding: 0;
position: relative;
top: 2px;
}
.custom_new_product .grid-product__wishlist button.wk-button-product .wk-icon {
position: initial;
width: 11.8px;
height: 10.9px;
margin: 0;
}
.custom_new_product button.wk-button-product .wk-icon svg {
overflow: visible;
width: 100%;
height: 100%;
}
.custom_new_product .grid-product__wishlist button.wk-button-product .wk-label {
display: none;
}
.custom_new_product button.wk-button-product .wk-label {
text-align: center;
margin: 0;
display: inline;
text-transform: uppercase;
font-size: 13px;
font-weight: 400;
}
.custom_new_product .grid__image-ratio {
position: relative;
background-color: #fff;
}
.custom_new_product .grid__image-ratio--square:before {
padding-bottom: 100%;
}
.custom_new_product .grid__image-ratio:before {
content: "";
display: block;
height: 0;
width: 100%;
}
.custom_new_product .grid__image-ratio img {
/*opacity: 0;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.custom_new_product .grid__image-ratio img.lazyloaded {
/*opacity: 0;*/
animation: fade-in .5s cubic-bezier(.29,.65,.58,1) 0s forwards;
}
.custom_new_product .grid-product__secondary-image {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
opacity: 0;
background-color: #fff;
transition: opacity 0s cubic-bezier(.26,.54,.32,1);
pointer-events: none;
}
.custom_new_product .grid-product__secondary-image img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.custom_new_product .lazyloaded {
/*opacity: 0;*/
animation: fade-in .5s cubic-bezier(.29,.65,.58,1) forwards;
}
.custom_new_product .grid-item__meta {
margin: 0;
margin-top: 20px!important;
}
.custom_new_product .grid-item__meta-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.custom_new_product .grid-product__title {
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
font-size: 13px;
letter-spacing: .75px;
line-height: 19px;
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.custom_new_product .grid-product__vendor {
margin-top: 5px;
width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
font-size: 12px;
letter-spacing: .6px;
line-height: 17px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
color: #222;
opacity: .5;
margin-bottom: 13px;
}
.custom_new_product .grid-item__collections {
display: none;
}
.custom_new_product .grid-item__meta-secondary {
margin-top: 1px;
}
.custom_new_product .grid-product__price {
color: #1c1d1d;
color: var(--colorPrice);
}
.custom_new_product .grid-product__price--current {
display: inline-block;
font-weight: 700;
margin-right: 5px;
font-size: calc(var(--typeBaseSize) + 2px);
}
.custom_new_product .grid-product__price--current {
font-size: calc(var(--typeBaseSize) + 2px);
}
.custom_new_product .grid-product__price--current span {
font-size: 15px;
letter-spacing: .3px;
line-height: 20px;
color: #e84f4f;
font-family: poppins,sans-serif;
font-weight: 500;
font-style: normal;
}
.custom_new_product span.grid-product__price--current.grid-product__price--currentBlack span {
color: #222;
}
.custom_new_product .visually-hidden {
clip: rect(0,0,0,0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
.custom_new_product .grid-product__price--current span.priceText {
font-size: 10px;
letter-spacing: .5px;
line-height: 14px;
color: #e84f4f;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
}
.custom_new_product .grid-item__collection {
margin-top: 8px;
}
.custom_brand .c-logo-section__main {
padding: 84px 0 98px;
}
.custom_brand {
margin-top: 0;
margin-bottom: 0;
background-color: #f8f8f8;
}
.custom_brand .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_brand .section-header {
margin-bottom: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.custom_brand .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_brand .section-header--with-link .section-header__title {
flex: 1 1 auto;
margin-bottom: 0;
}
.custom_brand .section-header__titleText {
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_brand .section-header__title p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
margin: 0;
padding-left: 29px;
position: relative;
top: -4px;
}
.custom_brand .section-header__link {
flex: 0 1 auto;
margin-top: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.custom_brand .section-header__link {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
padding-right: 37px;
position: relative;
right: 0;
top: 7px;
}
.custom_brand .section-header--with-link .section-header__link {
margin-top: 0;
}
.custom_brand .section-header__link:before {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-organe.png?v=1629973403) no-repeat center;*/
background: url(../img/top/yajirushimigi.png) no-repeat center;
background-size: contain;
width: 15.73px;
height: 5.51px;
top: 50%;
right: 0;
}
.custom_brand .logo-bar {
text-align: center;
}
.custom_brand .new-grid {
/*display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
word-break: break-word;*/
}
.custom_brand .grid-item {
height: auto;
display: inline-block;
width: 16.6667%;
/* flex: 0 0 100%; */
align-items: stretch;
/* display: flex; */
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.custom_brand .grid-item {
/*flex: 0 0 16.66667%;*/
}
.custom_brand [data-grid-style*=grey] .grid-product {
position: relative;
}
.custom_brand .c-logo-section .grid-item {
margin-bottom: 23px;
}
.custom_brand .logo-bar__item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
background-color: #fff;
background-color: var(--colorBody);
}
.custom_brand .logo-bar__link {
display: block;
}
.custom_brand .logo-bar__image {
opacity: 1;
animation: none;
display: block;
margin: 0 auto;
padding: 25px 30px;
width: 100%;
}
.custom_brand .c-logo-section .logo-bar__image {
padding: 0;
}
.custom_about .c-custom-section {
padding: 100px 0 110px;
position: relative;
}
.custom_about .c-custom-section:before {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/background-about.png?v=1630056228) no-repeat center;*/
background: url(../img/top/about_back1.png) no-repeat center;
background-size: contain;
width: 582.71px;
height: 321.4px;
bottom: 0px;
left: -17.71px;
}
.custom_about .c-custom-section__main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.custom_about .c-custom-section__content {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding-top: 140px;
padding-left: 26px;
text-align: center;
}
.custom_about .c-custom-section__subHeading {
font-size: 27px;
letter-spacing: .54px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
margin-bottom: 50px;
border-bottom: solid 4px #006CB8;
display: inline-block;
padding-bottom: 10.5px;
}
.custom_about .c-custom-section__heading {
font-size: 32px;
letter-spacing: 1.6px;
line-height: 43px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 600;
margin-bottom: 36px;
}
.custom_about .c-custom-section__heading span {
color: #F74B57;
}
.custom_about .c-custom-section__text {
font-size: 13px;
letter-spacing: .65px;
line-height: 29px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
margin-bottom: 46px;
}
.custom_about .c-custom-section__btn {
width: 226px;
line-height: 65px;
color: #fff;
font-size: 13px;
letter-spacing: .65px;
background-color: #006CB8;
border-radius: 50px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
border: none;
text-align: left;
padding: 0 0 0 31px;
position: relative;
display: block;
margin: 0 auto;
z-index: 1;
-webkit-transition: .5s;
transition: .5s;
}
.custom_about .c-custom-section__btn:before {
position: absolute;
content: "";
width: 45px;
height: 45px;
background-color: #fff;
border-radius: 50px;
right: 12px;
top: 50%;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
-webkit-transition: .5s;
transition: .5s;
z-index: -1;
}
.custom_about .c-custom-section__btn:after {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-right-dk.svg?v=1633590232) no-repeat center;*/
background: url(../img/top/yajirushimigi.png) no-repeat center;
background-size: contain;
width: 14.21px;
height: 4.98px;
top: 50%;
right: 27px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
}
.custom_about .c-custom-section__imgBox {
width: 60.625%;
}
.custom_about .u-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.custom_column {
background-color: #f8f8f8;
margin: 0;
position: relative;
padding: 99px 0;
}
.custom_column .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_column .section-header {
margin-bottom: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.custom_column .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_column .section-header--with-link .section-header__title {
flex: 1 1 auto;
margin-bottom: 0;
}
.custom_column .section-header__titleText {
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_column .section-header__title p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
margin: 0;
padding-left: 29px;
position: relative;
top: -4px;
}
.custom_column .section-header__link {
flex: 0 1 auto;
margin-top: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.custom_column .section-header__link {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
padding-right: 37px;
position: relative;
right: 0;
top: 7px;
}
.custom_column .section-header--with-link .section-header__link {
margin-top: 0;
}
.custom_column .section-header__link:before {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-organe.png?v=1629973403) no-repeat center;*/
background: url(../img/top/yajirushimigi.png) no-repeat center;
background-size: contain;
width: 15.73px;
height: 5.51px;
top: 50%;
right: 0;
}
.custom_column .blog-layout {
display: flex;
flex-wrap: nowrap;
}
.custom_column .blog-layout__main {
flex: 1 1 70%;
}
.custom_column .blog-layout__main {
margin-bottom: 20px;
}
.custom_column .new-grid {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
word-break: break-word;
}
.custom_column .grid-article:last-child {
margin-bottom: 0;
}
.custom_column .grid-item {
flex: 0 0 100%;
align-items: stretch;
display: flex;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.custom_column .grid-article {
flex: 0 0 100%;
display: flex;
flex-wrap: wrap;
text-align: center;
margin-bottom: 40px;
}
.custom_column .grid-article[data-style=large], .grid-article[data-style=medium] {
display: block;
}
.custom_column .grid-article__image {
position: relative;
flex: 0 0 100%;
margin-bottom: 15px;
}
.custom_column .blog-layout__main .grid-article__image {
margin-bottom: 25px;
}
.custom_column .image-wrap {
background: var(--colorSmallImageBg);
overflow: hidden;
}
.custom_column .grid__image-ratio {
position: relative;
background-color: var(--colorSmallImageBg);
}
.custom_column .grid__image-ratio:before {
content: "";
display: block;
height: 0;
width: 100%;
}
.custom_column .grid__image-ratio--wide:before {
padding-bottom: 56.25%;
}
.custom_column .grid__image-ratio img {
/*opacity: 0;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.custom_column .grid__image-ratio img.lazyloaded {
/*opacity: 0;*/
animation: fade-in .5s cubic-bezier(.29,.65,.58,1) 0s forwards;
}
.custom_column .image-wrap img:not([role=presentation]) {
display: block;
}
.custom_column .grid-article__meta {
flex: 0 0 100%;
}
.custom_column .grid-article__meta {
text-align: left;
}
.custom_column .grid-article__title {
margin-top: 17px;
}
.custom_column .grid-article__title a {
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.custom_column .blog-layout__main .grid-article__title a {
font-size: 16px;
}
.custom_column .blog-layout__sidebar {
flex: 0 0 30%;
padding-left: 45px;
margin-left: 45px;
border-left: 1px solid;
border-left-color: #e2e2e2;
border-left-color: var(--colorBorder);
align-self: flex-start;
}
.custom_column .grid-item {
flex: 0 0 100%;
align-items: stretch;
display: flex;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.custom_column .grid-article {
flex: 0 0 100%;
display: flex;
flex-wrap: wrap;
text-align: center;
margin-bottom: 40px;
}
.custom_column .grid-article[data-style=compact] {
flex: 0 0 100%;
flex-wrap: nowrap;
text-align: left;
margin-bottom: 20px;
padding: 0;
}
.custom_column .grid-article__image {
position: relative;
flex: 0 0 100%;
margin-bottom: 15px;
}
.custom_column .grid-article[data-style=compact] .grid-article__image {
flex: 0 0 40%;
align-self: flex-start;
}
.custom_column .image-wrap {
background: var(--colorSmallImageBg);
overflow: hidden;
}
.custom_column .grid__image-ratio {
position: relative;
background-color: var(--colorSmallImageBg);
}
.custom_column .grid__image-ratio:before {
content: "";
display: block;
height: 0;
width: 100%;
}
.custom_column .grid__image-ratio--wide:before {
padding-bottom: 56.25%;
}
.custom_column .grid__image-ratio img {
/*opacity: 0;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.custom_column .grid__image-ratio img.lazyloaded {
/*opacity: 0;*/
animation: fade-in .5s cubic-bezier(.29,.65,.58,1) 0s forwards;
}
.custom_column .image-wrap img:not([role=presentation]) {
display: block;
}
.custom_column .grid-article__meta {
text-align: left;
}
.custom_column .grid-article[data-style=compact] .grid-article__meta {
flex: 0 0 60%;
padding-left: 15px;
}
.custom_column .blog-layout__sidebar .grid-article__meta {
padding-left: 20px;
}
.custom_column .grid-article__title {
margin-top: 17px;
}
.custom_column .grid-article__title a {
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.custom_column .blog-layout__sidebar .grid-article__title a {
font-size: 12px;
}
.custom_instagram .c-instagram {
padding: 98px 0 97px;
}
.custom_instagram .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_instagram .section-header {
margin-bottom: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.custom_instagram .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_instagram .section-header--with-link .section-header__title {
flex: 1 1 auto;
margin-bottom: 0;
}
.custom_instagram .section-header__titleText {
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_instagram .section-header__title p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
margin: 0;
padding-left: 29px;
position: relative;
top: -4px;
}
.custom_instagram .section-header__link {
flex: 0 1 auto;
margin-top: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.custom_instagram .section-header__link {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
padding-right: 37px;
position: relative;
right: 0;
top: 7px;
}
.custom_instagram .section-header--with-link .section-header__link {
margin-top: 0;
}
.custom_instagram .c-instagram .section-header__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.custom_instagram svg:not(:root) {
overflow: hidden;
}
.custom_instagram .c-instagram .section-header__right svg {
margin-right: 15px;
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
.custom_fax .c-informations {
border-top: 1px solid #EAEAEA;
padding: 53px 0 58px;
}
.custom_fax .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_fax .c-informations .c-rows {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0 -10px;
}
.custom_fax .c-informations .c-rows__col {
width: 50%;
padding: 0 10px;
text-align: center;
}
.c-informations__content h2 {
font-size: 1.8rem;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
line-height: 1.5;
letter-spacing: .5px;
margin-bottom: 20px;
}
.c-informations__content img {
margin-right: 11px;
-webkit-transform: translateY(5px);
transform: translateY(5px);
width: auto;
}
.c-informations__content p {
font-size: 1.2rem;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
line-height: 1.5;
letter-spacing: .5px;
margin-bottom: 25px;
}
.c-informations__content a {
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-size: 1.4rem;
display: block;
width: 100%;
text-align: center;
border: 1px solid #E6E6E6;
border-radius: 30px;
padding: 16px 15px;
position: relative;
-webkit-transition: all .3s ease;
transition: all .3s ease;
color:#222;
}
.c-informations__content a:before {
content: "";
position: absolute;
background-image: url(../img/fax.svg);
top: 43%;
right: 25px;
width: 14.187px;
height: 6.605px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.c-informations__content a:hover {
background: #006CB8;
color: #fff;
border-color: #006CB8;
}
.c-informations__content a:hover::before {
background-image: url(../img/fax_white.svg);
}
.custom_songliao .c-service-grid__main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.custom_songliao .c-service-grid__itemBox {
width: calc(100% / 3);
padding: 0 1.5px;
}
.custom_songliao .c-service-grid__item {
background-color: #f8f8f8;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 44.5px 0;
}
.custom_songliao .c-service-grid__imgBox {
max-width: 113px;
width: 100%;
}
.custom_songliao .c-service-grid__img {
position: relative;
display: block;
padding-bottom: 100%;
}
.custom_songliao .u-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.custom_songliao .c-service-grid__img img {
position: absolute;
top: 0;
left: 0;
}
.custom_songliao .c-service-grid__content {
padding-left: 31px;
height: 120px;
}
.custom_songliao .c-service-grid__contentTitle {
font-size: 22px;
letter-spacing: 1.1px;
line-height: 30px;
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
}
.custom_songliao .c-service-grid__contentTitle span {
color: #F74B57;
}
.custom_songliao .c-service-grid__contentText {
font-size: 14px;
letter-spacing: .7px;
line-height: 30px;
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
}
.custom_mail .index-section {
padding: 97.5px 0 93.5px!important;
margin: 0;
background-color: #006CB8;
position: relative;
border: none;
margin-top: 0;
}
.c-newsletter__imgBox {
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: .25;
width: 100%;
height: 100%;
}
.c-newsletter__img {
width: 100%;
height: 100%;
}
.u-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-newsletter__imgBox {
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: .25;
width: 100%;
height: 100%;
}
.c-newsletter__img {
width: 100%;
height: 100%;
}
.page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.c-newsletter-container {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.text-center {
text-align: center!important;
}
.c-newsletter-containerBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c-newsletter-containerBox p.h2 {
font-size: 30px;
letter-spacing: .6px;
line-height: 1;
color: #fff;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
margin: 0;
}
.rte:last-child {
margin-bottom: 0;
}
.rte>div:last-child {
margin-bottom: 0;
}
.c-newsletter-containerBox .enlarge-text p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
color: #fff;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
padding-left: 60px;
padding-top: 6px;
}
.rte ol:last-child, .rte p:last-child, .rte table:last-child, .rte ul:last-child {
margin-bottom: 0;
}
#shopify-section-footer {
clear: both;
}
footer {
padding-top: 128px;
background-color: #fff!important;
}
.site-footer {
font-size: calc(var(--typeBaseSize) - 1px);
background-color: #f9f9fb;
background-color: var(--colorFooter);
color: #242430;
color: var(--colorFooterText);
}
footer .footer__section {
padding: 0;
border: none;
}
.site-footer .footer__section {
border-top-color: #e8e8e1;
border-top-color: var(--colorFooterBorder);
}
#shopify-section-footer .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
footer .footer__mainBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 109px;
position: relative;
}
footer .footer__logo {
max-width: 289px;
width: 100%;
}
footer .footer__logoImg {
line-height: 0;
position: relative;
display: block;
padding-bottom: 9.37%;
}
.u-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
footer .footer__logoImg img {
/*position: absolute;
top: 0;
left: 0;
-o-object-fit: contain;
object-fit: contain;*/
}
footer .footer__blocks {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 79px;
padding-top: 3px;
}
footer .footer__blocks {
padding-right: 30px;
}
footer .footer__block {
-webkit-box-flex: unset;
-ms-flex: unset;
flex: unset;
max-width: unset;
width: 100%;
margin: 0;
}
footer .footer__block--1 {
margin-right: 55px;
}
.footer__menu {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
footer .footer__menu {
margin: 0;
}
footer .footer__menu--pc {
display: block;
}
footer .footer__menu li {
margin: 0;
line-height: 1;
}
.site-footer a {
color: #242430;
color: var(--colorFooterText);
}
.footer__menu a {
display: inline-block;
padding: 4px 0;
}
footer .footer__menu a {
padding: 0;
font-size: 14px;
letter-spacing: .7px;
line-height: 1;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
margin-bottom: 24px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
footer .footer__menu--sp {
display: none;
}
footer .footer__Nav {
padding: 0;
border-top: solid 1px #eaeaea;
}
footer .footer__Nav .Collapsible {
border-bottom: solid 1px #eaeaea;
}
footer .footer__Nav .Collapsible__Button.u-h6 {
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 600;
font-style: normal;
font-size: 12px;
letter-spacing: .24px;
line-height: 21px;
color: #000;
text-transform: uppercase;
position: relative;
width: 100%;
text-align: left;
padding: 26.5px 0 24px;
display: block;
}
footer .footer__Nav .Collapsible__Inner .Collapsible__Content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 -10px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
footer .footer__Nav .Collapsible__Inner .Collapsible__Content .Collapsible {
padding: 0 10px;
border: none;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-bottom: 10px;
}
footer .footer__Nav .Collapsible__Button.u-h7 {
font-size: 11px;
letter-spacing: .22px;
line-height: 16px;
color: #000;
opacity: .6;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
display: block;
}
.footer__menu {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
footer .footer__block--2 {
margin-right: 68px;
}
footer .footer__menu--menu-footer-2 {
border-left: solid 1px #e2e2e2;
padding-left: 63px;
margin: 0;
}
footer .footer__menu--pc {
display: block;
}
footer .footer__menu li {
margin: 0;
line-height: 1;
}
.site-footer a {
color: #242430;
color: var(--colorFooterText);
}
.footer__menu a {
display: inline-block;
padding: 4px 0;
}
footer .footer__menu a {
padding: 0;
font-size: 14px;
letter-spacing: .7px;
line-height: 1;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
margin-bottom: 24px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
footer .footer__block--2 li a {
white-space: nowrap;
}
footer .footer__menu--sp {
display: none;
}
footer .footer__Nav {
padding: 0;
border-top: solid 1px #eaeaea;
}
footer .footer__Nav--menu-footer-2, footer .footer__Nav--menu-footer-3 {
border-top: none;
}
footer .footer__Nav .Collapsible__Button.u-h6 {
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 600;
font-style: normal;
font-size: 12px;
letter-spacing: .24px;
line-height: 21px;
color: #000;
text-transform: uppercase;
position: relative;
width: 100%;
text-align: left;
padding: 26.5px 0 24px;
display: block;
}
footer .footer__Nav .Collapsible {
border-bottom: solid 1px #eaeaea;
}
.footer__menu {
margin: 0;
padding: 0;
list-style: none;
}
footer .footer__menu--pc {
display: block;
}
footer .footer__block--3 ul {
border-left: solid 1px #e2e2e2;
padding-left: 63px;
}
footer .footer__menu li {
margin: 0;
line-height: 1;
}
.site-footer a {
color: #242430;
color: var(--colorFooterText);
}
.footer__menu a {
display: inline-block;
padding: 4px 0;
}
footer .footer__menu a {
padding: 0;
font-size: 14px;
letter-spacing: .7px;
line-height: 1;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
margin-bottom: 24px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
footer .footer__block--3 ul li a {
white-space: nowrap;
}
footer .footer__block[data-type=payment] {
display: none;
}
footer .footer__paymentBox {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
height: 155px;
padding-bottom: 12px;
}
.inline-list {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.payment-icons {
-webkit-user-select: none;
user-select: none;
cursor: default;
margin-bottom: 20px;
}
footer .footer__paymentBox .payment-icons {
margin-bottom: 0;
}
.inline-list li {
display: block;
margin-bottom: 0;
}
.payment-icons li {
cursor: default;
margin: 0 8px 4px 0;
}
svg:not(:root) {
overflow: hidden;
}
footer .footer__section {
padding: 0;
border: none;
}
footer .footer__section--copyright {
border-top: solid 1px #eaeaea;
padding: 29px 0 40px;
}
.site-footer .footer__section {
border-top-color: #e8e8e1;
}
.page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
footer .footer__section--copyright .page-width {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.text-center {
text-align: center!important;
}
.footer__base-links {
font-size: 13px;
}
.footer__base-links a, .footer__base-links span {
display: inline-block;
padding: 2px 20px 2px 0;
}
footer .footer__base-links span {
font-size: 11px;
letter-spacing: .55px;
line-height: 36px;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
padding: 0;
}
footer .footer__policy {
padding-right: 25px;
}
footer .footer__policy a {
font-size: 13px;
letter-spacing: .65px;
line-height: 33px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
padding-left: 20px;
}
.ec-blockTopBtn{
background-color: #006CB8;
letter-spacing: .65px;
line-height: 33px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 600;
font-style: normal;
}
@media screen and (max-width: 768px){
#hotkeyword{
/*display: none !important;*/
}
.ec-headerNaviRole{
max-width: 100%;
}
.ec-headerRole .custom_header_logo_nav_ul{
display: none;
}
.custom_header_logo_nav_ul{
float: none;
margin: 0;
padding: 0;
}
.custom_header_logo_nav_ul li{
display: block;
list-style: none;
padding: 0;
margin: 0;
padding: 16px;
border-bottom: 1px solid #eee;
background: #000;
}
.custom_header_logo_nav_ul li a{
color: #fff;
}
.page-width {
max-width: 100%;
padding: 0 20px;
}
.custom_header_title{
height: 35px;
line-height: 35px;
text-align: center;
}
.custom_header_title > .toolbar__item{
display: none;
}
.custom_header_title > p{
float: none;
}
.custom_header_logo_nav .ec-headerTitle{
float: none;
width: 100px;
text-align: center;
margin: 0 auto;
}
.ec-headerRole{
padding-top: 10px;
}
.ec-headerNaviRole__right{
position: relative;
}
#shopify-section-menu-tabs{
display: none;
}
.ec-headerNaviRole{
height: 10px;
display: block;
}
.ec-headerNav__item.favorite{
display: none;
}
.ec-headerNaviRole__right{
display: block;
}
.ec-headerNaviRole .ec-headerNaviRole__right{
top: auto;
right: auto;
display: block;
}
.ec-layoutRole .ec-layoutRole__contents .ec-sliderRole{
margin-top: 0;
}
.ec-headerNav__item:nth-child(1){
position: absolute;
right: 60px;
margin: 0;
top: -34px;
}
.ec-headerNav__item:nth-child(2){
position: absolute;
left: 60px;
margin: 0;
top: -34px;
}
.ec-headerNav__item:nth-child(4){
position: absolute;
right: 20px;
margin: 0;
top: -34px;
}
.custom_pc_logout{
position: absolute;
left: 80px;
margin: 0;
top: -34px;
}
.ec-headerNavSP{
background: #eee;
top: 54px;
}
.customer_news_new{
padding-left: 10px;
padding-right: 10px;
}
.ec-secHeading{
margin:0;
}
.customer_news_new .ec-newsRole__news{
position: relative;
display: block;
left: 0;
top: 0;
width: 100%;
}
/*.customer_news_new .slick-prev, .customer_news_new .slick-next{
position: absolute;
}*/
.customer_news_new .slick-next:after{
top: -10px;
right: -10px;
}
.customer_news_new .slick-prev:after{
top: -13px;
right: 20px;
}
.ec-newsRole__news .slick-list{
top: -20px;
}
.custom_collection .c-collection-list__item {
width: 50%;
padding: 0 7.5px;
margin-bottom: 20px;
}
.custom_collection .page-width {
max-width: 100%;
padding: 0 20px;
}
.custom_collection .c-collection-list__main {
margin: 0 -7.5px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.custom_collection .c-collection-list__link {
border-bottom-right-radius: 60px;
}
.custom_collection .c-collection-list__itemImg {
padding-top: 14px;
}
.custom_collection{
margin-top: 0;
}
.custom_collection .c-collection-list{
padding-bottom: 0;
}
.custom_newback .c-featured-collection .c-collection-template {
padding-top: 36px;
padding-bottom: 50px;
}
.custom_newback .page-width {
max-width: 100%;
padding: 0 20px;
}
.custom_newback .section-header {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 30px;
}
.custom_newback .section-header__title {
display: block;
}
.custom_newback .section-header__titleText {
font-size: 28px;
letter-spacing: .56px;
line-height: 70px;
}
.custom_newback .section-header__title p {
font-size: 12px;
letter-spacing: .6px;
line-height: 3px;
padding-left: 0;
top: 0;
}
.custom_newback .section-header__link {
font-size: 12px;
letter-spacing: -.4px;
line-height: 17px;
padding-right: 28px;
margin-bottom: 2px;
}
.custom_newback .page-width.page-width--flush-small {
padding: 0 0 0 20px;
}
.custom_newback .new-grid {
margin: 0 -7.5px;
padding-left: 0;
-ms-overflow-style: none;
scrollbar-width: none;
}
.custom_newback .new-grid .grid-item {
padding: 0 7.5px;
-webkit-box-flex: 0;
-ms-flex: 0 0 46.745%;
flex: 0 0 46.745%;
}
.custom_newback .grid-product__image-wrap {
margin-bottom: 0;
}
.custom_newback .grid-product__wishlist {
top: 5px;
right: 5px;
width: 32px;
height: 32px;
}
.custom_newback .c-collection-template {
padding-top: 36px;
padding-bottom: 50px;
}
.custom_newback .scrollable-grid--small {
overflow: hidden;
overflow-x: auto;
flex-wrap: nowrap;
justify-content: flex-start;
margin: -10px 0px 0 0;
padding: 10px 17px 0 0;
}
.custom_ranking .c-ranking-collection {
padding-top: 34px;
padding-bottom: 51px;
}
.custom_ranking .page-width {
max-width: 100%;
padding: 0 20px;
}
.custom_ranking .c-ranking-collection .section-header {
margin-bottom: 24px;
}
.custom_ranking .section-header {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 30px;
}
.custom_ranking .section-header__title {
display: block;
}
.custom_ranking .section-header__titleText {
font-size: 28px;
letter-spacing: .56px;
line-height: 70px;
}
.custom_ranking .section-header__title p {
font-size: 12px;
letter-spacing: .6px;
line-height: 3px;
padding-left: 0;
top: 0;
}
.custom_ranking .section-header__link {
font-size: 12px;
letter-spacing: -.4px;
line-height: 17px;
padding-right: 28px;
margin-bottom: 2px;
}
.custom_ranking .page-width.page-width--flush-small {
padding: 0 0 0 20px;
}
.custom_ranking .c-ranking-collection .new-grid {
padding-top: 0;
}
.custom_ranking .new-grid {
margin: 0 -7.5px;
padding-left: 0;
-ms-overflow-style: none;
scrollbar-width: none;
}
.custom_ranking .scrollable-grid--small {
overflow: hidden;
overflow-x: auto;
flex-wrap: nowrap;
justify-content: flex-start;
margin: -10px 0px 0 0;
padding: 10px 17px 0 0;
}
.custom_ranking .new-grid .grid-item {
padding: 0 7.5px;
-webkit-box-flex: 0;
-ms-flex: 0 0 46.745%;
flex: 0 0 46.745%;
}
.custom_ranking .c-ranking-collection .grid-product__image-wrap {
margin-bottom: 0;
}
.custom_ranking .grid-product__wishlist {
top: 5px;
right: 5px;
width: 32px;
height: 32px;
}
.custom_ranking .grid-product__title {
font-size: 12px;
letter-spacing: -.4px;
line-height: 18px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.custom_ranking .c-ranking-collection .grid-product__vendor {
margin-top: 4px;
}
.custom_ranking .grid-product__vendor {
font-size: 9px;
letter-spacing: .45px;
line-height: 13px;
margin-bottom: 11px;
}
.custom_ranking .grid-item__meta-secondary {
margin-top: 0;
}
.custom_new_product .c-recommend-collection {
padding-top: 56px;
padding-bottom: 51px;
}
.custom_new_product .page-width {
max-width: 100%;
padding: 0 20px;
}
.custom_new_product .c-ranking-collection .section-header {
margin-bottom: 24px;
}
.custom_new_product .section-header {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 30px;
}
.custom_new_product .section-header__title {
display: block;
}
.custom_new_product .section-header__titleText {
font-size: 28px;
letter-spacing: .56px;
line-height: 70px;
}
.custom_new_product .section-header__title p {
font-size: 12px;
letter-spacing: .6px;
line-height: 3px;
padding-left: 0;
top: 0;
}
.custom_new_product .section-header__link {
font-size: 12px;
letter-spacing: -.4px;
line-height: 17px;
padding-right: 28px;
margin-bottom: 2px;
}
.custom_new_product .page-width.page-width--flush-small {
padding: 0 0 0 20px;
}
.custom_new_product .new-grid {
margin: 0 -7.5px;
padding-left: 0;
-ms-overflow-style: none;
scrollbar-width: none;
}
.custom_new_product .scrollable-grid--small {
overflow: hidden;
overflow-x: auto;
flex-wrap: nowrap;
justify-content: flex-start;
margin: -10px 0px 0 0;
padding: 10px 17px 0 0;
}
.custom_new_product .new-grid .grid-item {
padding: 0 7.5px;
-webkit-box-flex: 0;
-ms-flex: 0 0 46.745%;
flex: 0 0 46.745%;
}
.custom_new_product .c-ranking-collection .grid-product__image-wrap {
margin-bottom: 0;
}
.custom_new_product .grid-product__wishlist {
top: 5px;
right: 5px;
width: 32px;
height: 32px;
}
.custom_new_product .grid-product__title {
font-size: 12px;
letter-spacing: -.4px;
line-height: 18px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.custom_new_product .c-ranking-collection .grid-product__vendor {
margin-top: 4px;
}
.custom_new_product .grid-product__vendor {
font-size: 9px;
letter-spacing: .45px;
line-height: 13px;
margin-bottom: 11px;
}
.custom_new_product .grid-item__meta-secondary {
margin-top: 0;
}
.custom_brand .c-recommend-collection {
padding-top: 56px;
padding-bottom: 51px;
}
.custom_brand .page-width {
max-width: 100%;
padding: 0 20px;
}
.custom_brand .c-ranking-collection .section-header {
margin-bottom: 24px;
}
.custom_brand .section-header {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 30px;
}
.custom_brand .section-header__title {
display: block;
}
.custom_brand .section-header__titleText {
font-size: 28px;
letter-spacing: .56px;
line-height: 70px;
}
.custom_brand .section-header__title p {
font-size: 12px;
letter-spacing: .6px;
line-height: 3px;
padding-left: 0;
top: 0;
}
.custom_brand .section-header__link {
font-size: 12px;
letter-spacing: -.4px;
line-height: 17px;
padding-right: 28px;
margin-bottom: 2px;
}
.custom_brand .c-logo-section__main {
padding: 36px 0 44px;
}
.custom_brand .grid-item{
width: 48%;
}
.custom_about .c-custom-section {
padding: 54px 0 60px;
}
.custom_about .c-custom-section:before {
width: 357.11px;
height: 196.97px;
bottom: 203px;
left: 50%;
-webkit-transform: translate(-50%,0);
transform: translate(-50%);
}
.custom_about .c-custom-section__main {
display: block;
}
.custom_about .c-custom-section__content {
-webkit-box-flex: unset;
-ms-flex: unset;
flex: unset;
padding: 0 20px;
margin-bottom: 70px;
}
.custom_about .c-custom-section__subHeading {
font-size: 19px;
letter-spacing: .38px;
line-height: 1;
padding-bottom: 6.5px;
border-bottom: solid 3px #006CB8;
margin-bottom: 37px;
}
.custom_about .c-custom-section__heading {
font-size: 23px;
letter-spacing: 1.15px;
line-height: 32px;
margin-bottom: 21px;
}
.custom_about .c-custom-section__text {
font-size: 12px;
letter-spacing: .6px;
line-height: 22px;
padding: 0 28px;
margin-bottom: 39px;
}
.custom_about .c-custom-section__btn {
font-size: 12px;
letter-spacing: .6px;
line-height: 60px;
padding-left: 39px;
}
.custom_about .c-custom-section__btn:before {
width: 42px;
height: 42px;
right: 10px;
}
.custom_about .c-custom-section__imgBox {
width: 94.6667%;
margin-left: auto;
position: relative;
}
.custom_about .c-custom-section__imgBox img {
border-bottom-left-radius: 100px;
}
.ec-headerNavSP{
/*position: relative;*/
}
.custom_column {
padding: 39px 0 30px;
}
.custom_column .page-width {
max-width: 100%;
padding: 0 20px;
}
.custom_column .c-ranking-collection .section-header {
margin-bottom: 24px;
}
.custom_column .section-header {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 30px;
}
.custom_column .section-header__title {
display: block;
}
.custom_column .section-header__titleText {
font-size: 28px;
letter-spacing: .56px;
line-height: 70px;
}
.custom_column .section-header__title p {
font-size: 12px;
letter-spacing: .6px;
line-height: 3px;
padding-left: 0;
top: 0;
}
.custom_column .section-header__link {
font-size: 12px;
letter-spacing: -.4px;
line-height: 17px;
padding-right: 28px;
margin-bottom: 2px;
}
.custom_column .blog-layout__main {
margin-bottom: 38px;
}
.custom_column .blog-layout__main .grid-article__image {
margin-bottom: 17px;
}
.custom_column .grid-article__title {
margin-top: 11px;
}
.custom_column .blog-layout__main .grid-article__title a {
font-size: 15px;
}
.custom_column .blog-layout__sidebar {
margin-left: 0;
}
.custom_column .blog-layout__sidebar .grid-article[data-style=compact] {
margin-bottom: 15.5px;
}
.custom_column .blog-layout__sidebar .grid-article[data-style=compact] .grid-article__image {
-webkit-box-flex: 0;
-ms-flex: 0 0 38%;
flex: 0 0 38%;
}
.custom_column .blog-layout__sidebar .grid-article[data-style=compact] .grid-article__image .grid__image-ratio--wide:before {
padding-bottom: 56.33659%;
}
.custom_column .blog-layout__sidebar .grid-article__meta {
padding-left: 20px;
line-height: 1.5;
position: relative;
top: 3px;
}
.custom_column .grid-article__title {
margin-top: 11px;
}
.custom_column .blog-layout{
display: block;
}
.custom_column .blog-layout__sidebar{
padding: 0;
border: none;
}
}
#insta-feed a,.instafeed-shopify a {
border: none!important;
position: static;
display: inline;
padding: 0;
z-index: 999999;
text-decoration: none;
color: transparent
}
#insta-feed,.instafeed-shopify {
position: relative
}
#insta-feed .post-date a,.instafeed-shopify .post-date a {
color: initial
}
#insta-feed,.instafeed-shopify {
text-align: center;
clear: both;
margin: 0 auto;
margin-top: 30px
}
#insta-feed .slider-arrow,.instafeed-shopify .slider-arrow {
border: 1px solid #eee;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background-color: #fff;
height: 40px;
width: 40px;
line-height: 40px;
font-size: 25px;
z-index: 101;
border-radius: 50%;
box-shadow: 0 2px 10px rgb(54 54 54/15%);
cursor: pointer
}
#insta-feed .slider-arrow:hover,.instafeed-shopify .slider-arrow:hover {
background-color: #eee
}
#insta-feed h2 {
margin-bottom: 30px
}
#insta-feed h3 {
font-size: 16px;
padding: 8px
}
#insta-feed a:focus,#insta-feed a:hover,.instafeed-shopify a:focus,.instafeed-shopify a:hover {
opacity: 1!important
}
#insta-feed a:after,.instafeed-shopify a:after {
border: none
}
#insta-feed .instafeed-container:hover .instafeed-overlay,.instafeed-shopify .instafeed-container:hover .instafeed-overlay {
opacity: 1
}
#insta-feed img,.instafeed-shopify img {
max-width: none;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0 auto;
width: 100%;
height: 100%;
border-radius: 0;
transform: initial;
display: initial;
opacity: 1
}
#insta-feed .instafeed-container,.instafeed-shopify .instafeed-container {
display: inline-block;
position: relative;
vertical-align: top;
padding: 0;
color: #fff
}
#insta-feed .instafeed-overlay,.instafeed-shopify .instafeed-overlay {
opacity: 0;
position: absolute;
background-color: transparent;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0 auto;
transition: all .2s linear
}
#insta-feed .likes,.instafeed-shopify .likes {
position: absolute;
display: flex;
font-size: 14px;
bottom: 2%;
right: 3%;
margin: 0 auto;
z-index: 200;
color: #fff
}
#insta-feed .instafeed-overlay::after,.instafeed-shopify .instafeed-overlay::after {
content: ' ';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .5
}
#insta-feed .instafeed-overlay::before,.instafeed-shopify .instafeed-overlay::before {
content: ' ';
opacity: 1;
background: url(../img/instagram-icon.svg) no-repeat center center;
background-size: 20px 20px;
position: absolute;
z-index: 100;
top: 0;
left: 0;
bottom: 0;
right: 0
}
#insta-feed .instafeed-overlay.instafeed-video::before,.instafeed-shopify .instafeed-overlay.instafeed-video::before {
content: ' ';
background: url(/assets/img/video-icon.png) no-repeat center center;
background-size: 20px 20px
}
.instafeed-lightbox {
display: none!important;
position: fixed!important;
font-size: 15px;
z-index: 99999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,.8)
}
.instafeed-lightbox:focus {
opacity: 1!important
}
.instafeed-lightbox .lightbox-instagram {
height: 500px;
width: 900px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -450px
}
.instafeed-lightbox .lightbox-instagram video {
width: 50%;
height: 100%;
position: absolute;
background-color: #eee;
left: 0;
top: 0;
margin: 0 auto;
outline: 0
}
.instafeed-lightbox .lightbox-instagram .sub-header {
height: 32px;
color: grey;
position: relative
}
.instafeed-lightbox .lightbox-instagram .products-tagging {
margin-top: 15px;
font-size: 14px
}
.instafeed-lightbox .lightbox-instagram .instafeed-caption {
margin-top: 20px;
word-wrap: break-word;
white-space: pre-wrap;
clear: both;
color: #666
}
.instafeed-lightbox .lightbox-instagram .post-date {
color: grey;
font-size: 11px;
margin-top: 50px;
border-top: 1px solid #eee;
padding-top: 5px
}
.instafeed-lightbox .lightbox-instagram .post-engagement {
position: absolute!important;
margin: auto!important;
left: 0!important;
right: 0!important;
bottom: 0!important;
top: 0!important;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
letter-spacing: .05em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.instafeed-lightbox .lightbox-instagram .description {
position: absolute;
right: 0;
width: 450px;
text-align: left;
color: #000;
text-decoration: none;
box-sizing: content-box;
padding: 0;
display: block
}
.instafeed-lightbox .lightbox-instagram .profile-picture {
height: 45px!important;
width: 45px!important;
border-radius: 50%!important;
margin: 12px!important;
border: 1px solid #eee
}
.instafeed-lightbox .lightbox-instagram .name-section {
position: absolute;
top: 14px;
left: 65px
}
.instafeed-lightbox .lightbox-instagram .name-section:hover {
color: #ccc
}
.instafeed-lightbox .lightbox-instagram .fullname {
color: #000;
letter-spacing: .05em;
font-weight: 600;
line-height: 24px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.instafeed-lightbox .lightbox-instagram .username {
color: grey;
font-size: 11px;
display: block;
line-height: 16px
}
.instafeed-lightbox .lightbox-instagram .username a {
color: #000
}
.instafeed-lightbox .lightbox-instagram .instafeed-header {
height: 58px!important;
position: relative!important;
transform: none;
margin: 0;
padding: 0;
text-align: inherit;
opacity: 1;
background: 0 0;
margin-top: 5px
}
.instafeed-lightbox .lightbox-instagram .box-content {
padding: 10px 20px 20px;
max-height: 530px;
overflow-x: hidden;
position: initial
}
.instafeed-lightbox .tagged-products {
margin: 40px 0;
display: flex
}
.instafeed-lightbox .tagged-products a {
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 600;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #666!important
}
.instafeed-lightbox .tagged-products img {
position: relative!important;
object-fit: contain!important;
height: 70px!important;
width: 70px!important
}
.instafeed-lightbox .tagged-products .product-title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-left: 16px;
font-size: initial
}
.instafeed-lightbox .tagged-products .tagged-buy-button {
margin: 0;
padding: 7px 16px;
height: auto;
width: auto;
background: 0 0;
border: 1px solid #ccc;
font-weight: 700;
font-size: 11px;
margin: 5px 0 7px;
cursor: pointer;
display: block;
box-shadow: none;
color: #000!important;
outline: 0;
font-size: .8rem!important;
line-height: 1.6!important;
text-transform: uppercase!important;
letter-spacing: .15rem!important;
font-weight: 700!important;
padding: .375rem .75rem!important;
text-align: center;
width: 150px!important
}
.instafeed-lightbox .tagged-products .tagged-buy-button:hover {
background-color: #eee;
border-color: #ccc;
color: #000
}
.instafeed-lightbox .tagged-products #delete-product {
font-size: xx-large
}
.instafeed-lightbox .lightbox-instagram .follow:hover {
color: grey
}
.instafeed-lightbox .lightbox-instagram hr {
margin: 10px;
border: 0;
border-bottom: 1px solid #e8e9eb;
background: 0 0;
max-width: 100%;
width: auto
}
.instafeed-lightbox .lightbox-instagram .arrows {
display: flex;
justify-content: space-between
}
.instafeed-lightbox .lightbox-instagram .description .box-content .sub-header .arrows img {
position: relative!important;
width: 32px!important;
object-position: 99999px 99999px;
background: no-repeat 50%/100% 100%;
background-size: 50%
}
.instafeed-lightbox .lightbox-instagram .description .box-content .sub-header .arrows object:first-child img {
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NzcuMTc1IDQ3Ny4xNzUnIHdpZHRoPSc1MTInIGhlaWdodD0nNTEyJz48cGF0aCBkPSdNMTQ1LjE4OCAyMzguNTc1bDIxNS41LTIxNS41YzUuMy01LjMgNS4zLTEzLjggMC0xOS4xcy0xMy44LTUuMy0xOS4xIDBsLTIyNS4xIDIyNS4xYy01LjMgNS4zLTUuMyAxMy44IDAgMTkuMWwyMjUuMSAyMjVjMi42IDIuNiA2LjEgNCA5LjUgNHM2LjktMS4zIDkuNS00YzUuMy01LjMgNS4zLTEzLjggMC0xOS4xbC0yMTUuNC0yMTUuNXonIGZpbGw9J2JsYWNrJy8+PC9zdmc+)
}
.instafeed-lightbox .lightbox-instagram .description .box-content .sub-header .arrows object:nth-child(2) img {
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NzcuMTc1IDQ3Ny4xNzUnIHdpZHRoPSc1MTInIGhlaWdodD0nNTEyJz48cGF0aCBkPSdNMzYwLjczMSAyMjkuMDc1bC0yMjUuMS0yMjUuMWMtNS4zLTUuMy0xMy44LTUuMy0xOS4xIDBzLTUuMyAxMy44IDAgMTkuMWwyMTUuNSAyMTUuNS0yMTUuNSAyMTUuNWMtNS4zIDUuMy01LjMgMTMuOCAwIDE5LjEgMi42IDIuNiA2LjEgNCA5LjUgNCAzLjQgMCA2LjktMS4zIDkuNS00bDIyNS4xLTIyNS4xYzUuMy01LjIgNS4zLTEzLjguMS0xOXonIGZpbGw9J2JsYWNrJy8+PC9zdmc+)
}
.instafeed-lightbox .lightbox-instagram .arrows a {
display: inline-block!important;
height: 32px
}
.lightbox-instagram a,.lightbox-instagram a:link,.lightbox-instagram a:visited {
font-weight: initial
}
.instafeed-lightbox .lightbox-instagram .arrows a:hover {
background-color: #eee
}
.instafeed-lightbox img {
max-width: 450px!important;
right: auto!important
}
.instafeed-lightbox:target {
outline: 0;
display: block!important
}
.instafeed-lightbox .lightbox-instagram .close-button {
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMCcgaGVpZ2h0PScyMCcgY2xhc3M9J2ljb24nPjxwYXRoIGZpbGw9JyM5Mzk1OTgnIGQ9J00xNS44OSAxNC42OTZsLTQuNzM0LTQuNzM0IDQuNzE3LTQuNzE3Yy40LS40LjM3LTEuMDg1LS4wMy0xLjQ4NXMtMS4wODUtLjQzLTEuNDg1LS4wM0w5LjY0MSA4LjQ0NyA0Ljk3IDMuNzc2Yy0uNC0uNC0xLjA4NS0uMzctMS40ODUuMDNzLS40MyAxLjA4NS0uMDMgMS40ODVsNC42NzEgNC42NzEtNC42ODggNC42ODhjLS40LjQtLjM3IDEuMDg1LjAzIDEuNDg1czEuMDg1LjQzIDEuNDg1LjAzbDQuNjg4LTQuNjg3IDQuNzM0IDQuNzM0Yy40LjQgMS4wODUuMzcgMS40ODUtLjAzcy40My0xLjA4NS4wMy0xLjQ4NXonLz48L3N2Zz4=);
position: absolute;
right: 0;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin: 1rem
}
@media(min-width: 768px) and (max-width:991.98px) {
.instafeed-lightbox .lightbox-instagram {
width:760px!important;
height: 380px!important;
margin-left: -380px!important
}
.instafeed-lightbox .lightbox-instagram .instafeed-post-image img {
max-width: 380px!important
}
.instafeed-lightbox .lightbox-instagram .description {
width: 380px!important;
height: 380px!important
}
.instafeed-lightbox .lightbox-instagram .description .box-content {
max-height: 285px!important
}
}
@media only screen and (min-width: 992px) {
.instafeed-lightbox .lightbox-instagram {
width:1000px!important;
margin-left: -500px!important;
margin-top: -330px!important;
height: 625px!important
}
.instafeed-lightbox .lightbox-instagram .instafeed-post-image img {
max-width: 620px!important
}
.instafeed-lightbox .lightbox-instagram .description {
width: 375px!important
}
.instafeed-lightbox .lightbox-instagram video {
width: 62.5%
}
}
@media only screen and (max-width: 767.98px) {
.instafeed-lightbox .lightbox-instagram .close-button {
background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMCcgaGVpZ2h0PScyMCcgY2xhc3M9J2ljb24nPjxwYXRoIGZpbGw9JyM5Mzk1OTgnIGQ9J00xNS44OSAxNC42OTZsLTQuNzM0LTQuNzM0IDQuNzE3LTQuNzE3Yy40LS40LjM3LTEuMDg1LS4wMy0xLjQ4NXMtMS4wODUtLjQzLTEuNDg1LS4wM0w5LjY0MSA4LjQ0NyA0Ljk3IDMuNzc2Yy0uNC0uNC0xLjA4NS0uMzctMS40ODUuMDNzLS40MyAxLjA4NS0uMDMgMS40ODVsNC42NzEgNC42NzEtNC42ODggNC42ODhjLS40LjQtLjM3IDEuMDg1LjAzIDEuNDg1czEuMDg1LjQzIDEuNDg1LjAzbDQuNjg4LTQuNjg3IDQuNzM0IDQuNzM0Yy40LjQgMS4wODUuMzcgMS40ODUtLjAzcy40My0xLjA4NS4wMy0xLjQ4NXonLz48L3N2Zz4=);
position: absolute;
right: 0;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin: 1rem;
z-index: 1
}
.instafeed-lightbox .lightbox-instagram {
height: 98%!important;
overflow: scroll!important;
width: unset!important;
max-height: unset!important;
top: unset!important;
left: unset!important;
margin-top: .5rem!important;
margin-left: .5rem!important;
margin-right: .5rem!important;
position: relative!important
}
.instafeed-lightbox .lightbox-instagram video {
width: 100%!important;
height: 60vh!important;
position: static!important
}
.instafeed-lightbox .lightbox-instagram .instafeed-post-image img {
position: static!important;
width: 100%!important;
max-width: unset!important
}
.instafeed-lightbox .lightbox-instagram .description {
width: unset!important;
position: relative!important
}
.instafeed-lightbox .lightbox-instagram .box-content {
max-height: none
}
}
@media screen and (max-width: 768px){
.custom_fax .c-informations {
padding: 49px 0 60px;
}
.custom_fax .page-width {
max-width: 100%;
padding: 0 20px;
}
.custom_fax .c-informations .c-rows__col {
width: 100%;
margin-bottom: 48px;
}
.custom_songliao .c-service-grid__main {
display: block;
margin: 0;
}
.custom_songliao .c-service-grid__itemBox {
width: 100%;
padding: 0;
margin-bottom: 2px;
}
.custom_songliao .c-service-grid__item {
padding: 42px 0 37px;
}
.custom_songliao .c-service-grid__imgBox {
max-width: 71px;
width: 100%;
position: relative;
left: -29px;
}
.custom_songliao .c-service-grid__content {
padding-left: 0;
position: relative;
left: -2px;
}
.custom_songliao .c-service-grid__contentTitle {
font-size: 20px;
letter-spacing: 1px;
line-height: 30px;
}
.custom_songliao .c-service-grid__contentText {
font-size: 12px;
letter-spacing: .6px;
}
.c-newsletter .index-section {
padding: 75.5px 0 83.5px!important;
}
.sp {
display: block!important;
}
.c-newsletter-container {
display: block;
}
.c-newsletter-containerBox {
display: block;
padding-bottom: 40px;
}
.c-newsletter-containerBox p.h2 {
margin-bottom: 27px;
}
.c-newsletter-containerBox .enlarge-text p {
font-size: 12px;
letter-spacing: .6px;
line-height: 22px;
padding: 0 40px;
}
footer {
padding-top: 70px;
}
.page-width {
max-width: 100%;
padding: 0 20px;
}
footer .footer__mainBox {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
footer .footer__mainBox {
display: block;
margin-bottom: 50px;
}
footer .footer__logo {
max-width: 100%;
width: 100%;
margin: 0 auto 30px;
}
footer .footer__blocks {
display: block;
padding: 0;
}
footer .footer__block--1 {
margin-right: 25px;
}
footer .footer__menu--pc {
display: none;
}
footer .footer__menu--sp {
display: block;
}
footer .footer__Nav .Collapsible__Inner {
padding: 0 0 18px 3px;
}
footer .footer__block--2 {
margin-right: 25px;
}
footer .footer__menu--menu-footer-2 {
padding-left: 25px;
}
footer .footer__block--3 ul {
padding-left: 25px;
}
footer .footer__Nav--menu-footer-3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 4px;
margin: 0 -9.5px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
footer .footer__Nav--menu-footer-3 .Collapsible {
border: none;
padding: 0 9.5px;
}
footer .footer__Nav--menu-footer-3 .Collapsible__Button.u-h6 {
font-size: 12px;
letter-spacing: .24px;
line-height: 26px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 600;
font-style: normal;
padding: 0;
}
.footer__block[data-type=contact], .footer__block[data-type=payment] {
flex: 1 0 100%;
}
footer .footer__paymentBox {
width: 100%;
-webkit-box-flex: unset;
-ms-flex: unset;
flex: unset;
height: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 30px 0 0;
}
footer .footer__paymentBox {
position: relative;
right: auto;
bottom: auto;
}
footer .footer__paymentBox {
padding-top: 0;
}
.footer__mobile-section {
margin-top: 20px;
margin-left: -40px;
margin-left: calc(var(--pageWidthPadding)*-1);
margin-right: -40px;
margin-right: calc(var(--pageWidthPadding)*-1);
padding: 20px 40px 0;
padding: 20px var(--pageWidthPadding) 0;
border-top: 1px solid;
border-top-color: #e8e8e1;
border-top-color: var(--colorFooterBorder);
}
footer .footer__paymentBox .footer__mobile-section {
border: 0;
}
.footer__blocks--mobile {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.footer__block, .footer__block--mobile {
max-width: none;
flex: 1 1 50%;
}
footer .footer__section--copyright {
padding: 24px 0 38px;
}
footer .footer__section--copyright .page-width {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
footer .footer__base-links span {
text-align: center;
font-size: 9px;
letter-spacing: .45px;
line-height: 32px;
padding: 0;
display: block;
position: relative;
left: -10px;
}
footer .footer__policy {
padding: 0;
}
footer .footer__policy a {
font-size: 11px;
letter-spacing: .22px;
line-height: 46px;
}
footer .footer__policy a:nth-child(1) {
padding-left: 33px;
}
footer .footer__policy a:nth-child(2) {
padding-left: 16px;
}
footer .footer__Nav .Collapsible__Button.u-h6{
background: #fff;
border: none;
}
}
#page_product_detail .ec-productRole{
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
padding-top: 65px;
}
.ec-headingTitle{
color:#222;
font-size: 2.3rem !important;
line-height: 1.5;
letter-spacing: .5px;
font-family: noto-sans,sans-serif;
font-weight: 600;
margin: 0;
word-wrap: initial;
}
.ec-productRole .ec-productRole__tags{
margin: 0;
border: none;
}
.ec-productRole .ec-productRole__priceRegular{
padding: 0;
}
.ec-productRole .ec-productRole__code{
display: none;
}
.ec-productRole .ec-productRole__price{
padding: 0;
}
.ec-productRole .ec-productRole__category ul{
display: none;
}
.ec-productRole .ec-productRole__category ul:last-child{
display: block;
}
.ec-productRole .ec-productRole__btn {
width: 90%;
border: none;
}
.custom_pro_ask button{
background: #006CB8;
}
.custom_add_cart button{
background: #F74B57;
border-radius: 35px;
border: none;
}
.custom_add_cart button:hover{
background: #006CB8;
}
button.contact{
background: #006CB8;
border: none;
border-radius: 35px;
}
button#favorite {
border-radius: 35px;
}
.ec-productRole .ec-productRole__category a{
color:#222;
}
.ec-productRole > .ec-productRole__description{
max-width: 750px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 50px;
}
.ec-layoutRole__mainBottom{
padding-top: 40px;
border-top: 1px solid #eee;
margin-top: 30px;
}
.custom_related_items {
max-width: 100%;
}
.custom_related_items .page-width {
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_related_items .section-header {
margin-bottom: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.custom_related_items .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin-bottom: 0;
}
.custom_related_items .section-header__title span {
margin-left: 32px;
display: inline-block;
font-size: 1.3rem;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
line-height: 26px;
letter-spacing: .5px;
}
.custom_related_items .ec-shelfGrid .ec-shelfGrid__item{
width: 20%;
}
#page_product_detail .ec-sliderItemRole .slideThumb {
width: 20% !important;
}
#page_product_detail .slick-initialized .slick-slide {
height: 500px;
}
#page_product_detail .slick-initialized .slick-slide img {
width: auto;
margin: 0 auto;
max-height: 100%;
}
#RelatedProduct-product_area{
/*display: none;*/
}
@media screen and (max-width: 768px){
#page_product_detail .slick-initialized .slick-slide {
height: auto;
}
#page_product_detail .ec-productRole{
padding: 0 20px;
padding-top: 20px;
}
.custom_related_items .page-width {
max-width: 100%;
padding: 0;
}
.custom_related_items .section-header {
margin-bottom: 32px;
}
.custom_related_items .section-header__title {
font-size: 2.8rem;
line-height: 1.5;
letter-spacing: .6px;
}
.custom_related_items .section-header__title {
display: block;
}
.custom_related_items .section-header__title span {
display: block;
font-size: 1.2rem;
line-height: 17px;
margin-left: 0;
margin-top: 6px;
}
.custom_related_items .ec-shelfGrid .ec-shelfGrid__item{
width: 50%;
}
.ec-productRole .ec-productRole__btn{
width: 100%;
}
.custom_cat{
display: none;
}
.ec-layoutRole .ec-layoutRole__contents{
margin-top: 4px;
}
.ec-layoutRole__mainBottom{
padding-top: 0;
}
#page_product_list .ec-shelfRole{
margin-top: 0 !important;
}
}
#page_product_list .ec-shelfGrid__item form{
display: none;
}
#page_product_list .ec-productRole__btn{
display: none;
}
#page_product_list .ec-shelfGrid__item p{
color:#222;
font-weight: bold;
}
#page_product_list .ec-searchnavRole{
max-width: 100%;
padding: 0;
background: #F8F8F8;
}
#page_product_list .ec-searchnavRole .ec-searchnavRole__infos{
max-width: 1600px;
}
#page_product_list .ec-searchnavRole__topicpath{
max-width: 1600px;
padding: 0 65px;
margin: 0 auto;
padding: 30px 0;
}
#page_product_list .ec-searchnavRole__topicpath ol li a{
font-size: 2.8rem;
line-height: 1.5;
letter-spacing: .5px;
font-family: noto-sans,sans-serif;
font-weight: 700;
font-style: normal;
color:#222 ;
}
#page_product_list .ec-shelfRole{
max-width: 1600px;
margin-top: 50px;
}
.custom_cat{
width: 20%;
float: left;
}
.custom_cat .ec-headerCategoryArea__heading p{
color: rgba(34,34,34,1);
font-size: 18px;
font-weight: 700;
color: #006CB8;
}
.custom_cat .ec-itemNav{
/*overflow-y: auto;
overflow-x: hidden;*/
width: 100%;
max-height: 380px!important;
text-align: left;
}
.custom_cat .ec-itemNav li{
float: none;
}
.custom_cat .ec-itemNav li a{
text-align: left;
font-weight: normal;
color:#222;
}
.custom_cat .ec-itemNav > ul{
padding: 0;
}
/*.custom_cat .ec-headerCategoryArea__heading:before {
content: "";
position: absolute;
width: 1px;
height: 10px;
top: 15%;
right: 11px;
pointer-events: none;
background: #006CB8;
opacity: 0;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.custom_cat .ec-headerCategoryArea__heading :after {
content: "";
position: absolute;
width: 1px;
height: 10px;
top: 15%;
right: 11px;
pointer-events: none;
-webkit-transform: rotateZ(90deg);
transform: rotate(90deg);
background: #006CB8;
}*/
.custom_cat .ec-headerCategoryArea__heading{
position: relative;
margin-bottom: 20px;
}
.custom_cat .ec-itemNav > ul > li > ul{
padding: 10px;
padding-bottom: 0;
}
.custom_cat .ec-itemNav > ul > li{
padding: 10px 0;
border-bottom: 1px solid #ddd;
margin-bottom: 6px;
}
.custom_cat .ec-itemNav > ul > li > ul > li{
padding: 6px;
}
.custom_cat .ec-itemNav > ul > li > ul > li > ul{
padding: 10px;
padding-bottom: 0;
}
.custom_cat .ec-itemNav > ul > li > a{
font-weight: bold;
}
.ec-searchnavRole__counter .ec-font-bold{
color: #006CB8;
}
.ec-layoutRole__footer{
border-top: 1px solid #ccc;
}
#FooterMenus ul li a{
color:#222;
font-weight: bold;
}
@media screen and (max-width: 768px){
.ec-drawerRole{
width: 280px;
}
.ec-drawerRoleClose{
left: 290px;
}
.custom_pc_logout{
/*display: none !important;*/
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item{
display: inline-block;
}
.custom_sp_login{
width: 49%;
background-color: #006CB8;
letter-spacing: .22px;
line-height: 40px;
font-weight: 500;
border-radius: 20px;
padding: 0 !important;
text-align: center;
font-size: 12px !important;
}
.custom_sp_sign{
width: 49%;
background-color: #333;
letter-spacing: .22px;
line-height: 40px;
font-weight: 500;
border-radius: 20px;
padding: 0 !important;
text-align: center;
font-size: 12px !important;
}
.custom_sp_logout{
width: 49%;
background-color: #333;
letter-spacing: .22px;
line-height: 40px;
font-weight: 500;
border-radius: 20px;
padding: 0 !important;
text-align: center;
font-size: 12px !important;
}
.custom_sp_favorite{
width: 100%;
border: solid 1px #e2e2e2;
color: #222 !important;
letter-spacing: .22px;
line-height: 40px;
font-family: noto-sans-cjk-jp,sans-serif;
font-style: normal;
border-radius: 20px;
color: #fff;
padding: 0 !important;
text-align: center;
font-size: 12px !important;
margin-top: 20px;
}
.custom_sp_cart{
display: none !important;
}
.custom_sp_home{
display: none !important;
}
.ec-drawerRole .ec-headerLinkArea{
background: #fff;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list{
border: none;
margin: 20px 10px;
}
.ec-drawerRole{
background: #fff;
}
.ec-drawerRole .ec-headerSearch{
background: #fff;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search{
background: #006CB8;
}
.ec-headerSearch .ec-headerSearch__keyword{
background: #f2f2f2;
border: none;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover > a{
background: #fff;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li{
border-bottom: 1px solid #eee;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li > a{
margin-right: 40px;
border: none;
background: #fff;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li > .custom_nav_li_jia {
display: inline-block;
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-plus.png?v=1630225844) no-repeat center;
background-size: contain;
width: 10px;
height: 10px;
right: 12.5px;
top: 24px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
z-index: 9999;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li > .custom_nav_li_jian {
display: inline-block;
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-minus.png?v=1630225844) no-repeat center;
background-size: contain;
width: 10px;
height: 10px;
right: 12.5px;
top: 24px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
z-index: 9999;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li{
position: relative;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li > ul > li > .custom_nav_li_jia {
display: inline-block;
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-plus.png?v=1630225844) no-repeat center;
background-size: contain;
width: 10px;
height: 10px;
right: 12.5px;
top: 24px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
z-index: 9999;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li > ul > li > .custom_nav_li_jian {
display: inline-block;
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-minus.png?v=1630225844) no-repeat center;
background-size: contain;
width: 10px;
height: 10px;
right: 12.5px;
top: 24px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
z-index: 9999;
}
}
.custom_cat .ec-itemNav > ul > li > ul > li > ul{
display: none;
}
.custom_cat .ec-itemNav > ul > li > ul > li > .custom_nav_li_jia {
display: inline-block;
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-plus.png?v=1630225844) no-repeat center;
background-size: contain;
width: 10px;
height: 10px;
right: 12.5px;
top: 24px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
z-index: 9999;
}
.custom_cat .ec-itemNav > ul > li > ul > li > .custom_nav_li_jian {
display: inline-block;
position: absolute;
content: "";
background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/icon-minus.png?v=1630225844) no-repeat center;
background-size: contain;
width: 10px;
height: 10px;
right: 12.5px;
top: 24px;
-webkit-transform: translate(0,-50%);
transform: translateY(-50%);
z-index: 9999;
}
.custom_cat .ec-itemNav > ul > li > ul > li{
position: relative;
}
.ec-shelfGrid__item > a > p:nth-child(2){
height: 68px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 15px;
letter-spacing: .3px;
line-height: 20px;
color: #e84f4f;
font-family: poppins,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
}
.ec-shelfGrid__item > a > p:nth-child(3){
height: 44px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
#category_extension_b_header_contents{
max-width: 1600px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
#category_extension_b_footer_contents{
max-width: 1600px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
}
.custom_cat{
overflow-y: auto;
min-height: 600px;
}
#page_product_detail .ec-productRole__category > div{
display: none;
}
.ec-inlineBtn--cancel{
border-radius: 20px;
}
.ec-inlineBtn--action{
border-radius: 20px;
}
.ec-blockBtn--action{
border-radius: 20px;
}
.ec-blockBtn--cancel{
border-radius: 20px;
}
.ec-layoutRole__contents .ec-layoutRole__main .ec-layoutRole__main .ec-mypageRole{
max-width: 1600px;
margin: 0 auto;
}
.custom_related_items .ec-shelfGrid__item > a > p:nth-child(2){
height: 44px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.custom_related_items .ec-shelfGrid__item > a > dl .item_name{
height: 66px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
.custom_check_pro{
max-width: 1600px;
}
.custom_check_pro .ec-secHeading__en{
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_check_pro .ec-secHeading__line{
display: none;
}
.custom_check_pro .ec-checkProductRole__listItemTitle{
height: 40px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
@media screen and (max-width: 768px){
.custom_check_pro{
max-width: 100%;
}
.custom_check_pro .ec-secHeading__en {
font-size: 2.8rem;
line-height: 1.5;
letter-spacing: .6px;
}
.custom_check_pro .ec-checkProductRole__listItem {
margin-bottom: 15px;
width: calc(100% / 2);
margin-right: 0 !important;
}
.custom_check_pro .ec-checkProductItemRole__list{
flex-wrap: wrap !important;
}
.custom_check_pro .ec-checkProductRole__listItem a{
margin-right: 10px;
display: block;
}
}
.custom_shop_desc{
display: none;
}
.custom_shop_detail .custom_shop_desc{
display: block;
}
.custom_ru_pro{
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0;
margin-top: 30px;
}
.custom_ru_pro .section-header {
margin-bottom: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.custom_ru_pro .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_ru_pro .section-header--with-link .section-header__title {
flex: 1 1 auto;
margin-bottom: 0;
}
.custom_ru_pro .section-header__titleText {
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_ru_pro .section-header__title p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
margin: 0;
padding-left: 29px;
position: relative;
top: -4px;
}
.custom_ru_pro .section-header__link {
flex: 0 1 auto;
margin-top: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.custom_ru_pro .section-header__link {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
padding-right: 37px;
position: relative;
right: 0;
top: 7px;
}
.custom_ru_pro .section-header--with-link .section-header__link {
margin-top: 0;
}
.custom_ru_pro .section-header__link:before {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-organe.png?v=1629973403) no-repeat center*/;
background: url(../img/top/yajirushimigi.png) no-repeat center;
background-size: contain;
width: 15.73px;
height: 5.51px;
top: 50%;
right: 0;
}
.custom_ru_pro .ec-shelfGrid .ec-shelfGrid__item{
width: 20% !important;
}
.custom_ru_pro .ec-shelfGrid .ec-shelfGrid__item img {
aspect-ratio: 1;
object-fit: scale-down;
width: 100%;
}
.custom_ru_pro .ec-shelfGrid__item > a > p{
font-size: 12px;
letter-spacing: .6px;
line-height: 17px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 400;
font-style: normal;
color: #222;
opacity: .5;
margin-bottom: 13px;
margin-top: 5px;
height: auto;
}
.custom_ru_pro .ec-shelfGrid__item > a > dl > dt
{
font-size: 13px;
letter-spacing: .75px;
line-height: 19px;
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
}
.custom_ru_pro .ec-shelfGrid__item > a > dl > dt{
font-size: 15px;
letter-spacing: .3px;
line-height: 20px;
color: #e84f4f;
font-family: poppins,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
}
.custom_zuijin{
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0 60px;
}
.custom_zuijin .ec-checkProductRole__listItem{
/*width: calc(100% / 5);*/
width: 20%;
}
.custom_zuijin .ec-secHeading .ec-secHeading__en{
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_zuijin .ec-checkProductRole__listItemTitle{
font-size: 15px;
letter-spacing: .3px;
line-height: 20px;
color: #e84f4f;
font-family: poppins,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
}
@media screen and (max-width: 768px){
.custom_ru_pro .ec-shelfGrid .ec-shelfGrid__item{
width: 50% !important;
}
.custom_ru_pro .ec-shelfGrid .ec-shelfGrid__item img {
aspect-ratio: 1;
object-fit: scale-down;
width: 100%;
}
.custom_ru_pro .section-header {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 30px;
}
.custom_ru_pro .section-header__title {
display: block;
}
.custom_ru_pro .section-header__titleText {
font-size: 28px;
letter-spacing: .56px;
line-height: 70px;
}
.custom_ru_pro .section-header__title p {
font-size: 12px;
letter-spacing: .6px;
line-height: 3px;
padding-left: 0;
top: 0;
}
.custom_ru_pro .section-header__link {
font-size: 12px;
letter-spacing: -.4px;
line-height: 17px;
padding-right: 28px;
margin-bottom: 2px;
}
.custom_zuijin .ec-secHeading .ec-secHeading__en {
font-size: 28px;
letter-spacing: .56px;
}
.custom_zuijin{
padding:0 20px;
}
.custom_zuijin .ec-checkProductRole__listItem {
width: 45% !important;
flex-direction: column;
margin-right: 10px !important;
}
.custom_zuijin .ec-checkProductItemRole__list{
flex-wrap: wrap;
}
.custom_related_pro .ec-shelfGrid .ec-shelfGrid__item {
width: 45% !important;
}
}
.custom_zuijin .ec-checkProductItemRole__list{
flex-wrap: wrap;
}
.custom_zuijin .ec-checkProductRole__listItem{
margin-right: 0 !important;
padding: 0 16px;
width: 20%;
}
.ec-productRole__priceRegularPrice{
font-size: 18px;
padding: 0;
border-bottom: 0;
font-weight: bold;
}
.ec-productRole__priceRegularTax{
font-size: 12px !important;
}
.custom_related_pro{
max-width: 1600px;
width: 100%;
margin: 0 auto;
padding: 0;
margin-top: 30px;
}
.custom_related_pro .section-header {
margin-bottom: 52px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.custom_related_pro .section-header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
font-size: 40px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
}
.custom_related_pro .section-header--with-link .section-header__title {
flex: 1 1 auto;
margin-bottom: 0;
}
.custom_related_pro .section-header__titleText {
font-size: 32px;
letter-spacing: .8px;
line-height: 1;
font-family: poppins,sans-serif;
font-weight: 600;
font-style: normal;
color: #222;
margin: 0;
}
.custom_related_pro .section-header__title p {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
margin: 0;
padding-left: 29px;
position: relative;
top: -4px;
}
.custom_related_pro .section-header__link {
flex: 0 1 auto;
margin-top: 15px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.custom_related_pro .section-header__link {
font-size: 13px;
letter-spacing: .65px;
line-height: 18px;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
color: #222;
padding-right: 37px;
position: relative;
right: 0;
top: 7px;
}
.custom_related_pro .section-header--with-link .section-header__link {
margin-top: 0;
}
.custom_related_pro .section-header__link:before {
position: absolute;
content: "";
/*background: url(https://cdn.shopify.com/s/files/1/0584/4438/2394/files/arrow-organe.png?v=1629973403) no-repeat center*/;
background: url(../img/top/yajirushimigi.png) no-repeat center;
background-size: contain;
width: 15.73px;
height: 5.51px;
top: 50%;
right: 0;
}
.custom_related_pro .ec-shelfGrid .ec-shelfGrid__item {
width: 20%;
}
.product-name {
font-weight: normal;
height: auto;
margin-bottom: 10px;
}
.ec-orderBySaleRole .item_name{
word-break: break-word;
-webkit-hyphens: auto;
hyphens: auto;
font-size: 13px;
letter-spacing: .75px;
line-height: 19px;
color: #222;
font-family: noto-sans-cjk-jp,sans-serif;
font-weight: 500;
font-style: normal;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
margin-top: 20px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
.custom_ru_pro .item_name{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
}
.ec-layoutRole__footer > table{
width: 180px;
position: fixed;
bottom: 90px;
right: 4px;
}
#shopify-section-menu-tabs .c-menu-tabs > ul > li > ul > li > ul > li:nth-child(n+51) {
display: none !important;
}
@keyframes shake {
0% { transform: translateX(0); }
20% { transform: translateX(-5px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
100% { transform: translateX(0); }
}
.logo-bar__item {
display: inline-block;
animation: none;
}
.logo-bar__item:hover {
animation: shake 0.5s ease-in-out;
}