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 {
list-style: none;
display: flex;
width: 100%;
max-width: 1000px;
margin: 0 auto 10px;
padding: 0 0.8em 0 0;
border-radius: 5px;
background: #d9d9d9;
font-size: 1.1rem;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.ec-progress {
margin-bottom: 30px;
font-size: 1.8rem;
}
}
#page_shopping_complete .ec-progress {
background: #0097c6;
}
.ec-progress .ec-progress__item {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0.8em 0 0.8em 2.8em;
background: #d9d9d9;
position: relative;
text-align: center;
font-weight: bold;
color: #d9d9d9;
font-feature-settings: "palt";
}
@media only screen and (min-width: 768px) {
.ec-progress .ec-progress__item {
padding-left: 2.4rem;
}
}
.ec-progress .ec-progress__item:first-child {
padding-left: 0.8em;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.ec-progress .ec-progress__item:not(:last-child) span {
display: flex;
align-items: center;
justify-content: center;
height: 94%;
aspect-ratio: 1/1;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
transform: translate(46%, -50%) rotate(45deg);
}
@media only screen and (min-width: 768px) {
.ec-progress .ec-progress__item:not(:last-child) span {
height: 88%;
}
}
.ec-progress .ec-progress__item:not(:last-child) span:after {
content: "";
display: block;
height: 100%;
aspect-ratio: 1/1;
border-radius: 6px;
border: 1px solid transparent;
border-top-color: #fff;
border-right-color: #fff;
background: linear-gradient(45deg, transparent 50%, currentColor 50%);
background-origin: border-box;
transform: skew(-6deg, -6deg);
}
.ec-progress .ec-progress__number {
display: none;
/*
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%;
@include media_desktop(){
line-height: 42px;
width: 42px;
height: 42px;
font-size: 20px;
}
*/
}
.ec-progress .ec-progress__label {
font-size: 1.1rem;
color: #000;
word-break: keep-all;
}
@media only screen and (min-width: 768px) {
.ec-progress .ec-progress__label {
font-size: 1.8rem;
}
}
.ec-progress .is-complete {
background: #0097c6;
color: #0097c6;
}
.ec-progress .is-complete .ec-progress__label {
color: #fff;
}
/*
カートナビゲーション
カートナビゲーションを表示します。 カートに追加された商品の個数も表示します。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerCart
sg-wrapper:
Styleguide 7.3.5
*/
.ec-cartNaviWrap {
height: 100%;
}
@media only screen and (min-width: 768px) {
.ec-cartNaviWrap {
position: relative;
}
}
.ec-cartNavi {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
color: black;
background: transparent;
}
.ec-cartNavi .ec-cartNavi__icon {
display: inline-block;
display: inline-block;
opacity: 1;
visibility: visible;
animation: fadeIn 200ms linear 0s;
position: relative;
}
.ec-cartNavi .ec-cartNavi__badge {
display: inline-block;
border-radius: 10px;
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: #469bff;
position: absolute;
left: 48%;
top: -3px;
}
@media only screen and (min-width: 768px) {
.ec-cartNavi .ec-cartNavi__badge {
display: inline-block;
min-width: 17px;
}
}
.ec-cartNavi .ec-cartNavi__price {
display: none;
}
@media only screen and (min-width: 768px) {
.ec-cartNavi .ec-cartNavi__price {
display: inline-block;
font-size: 14px;
font-weight: normal;
vertical-align: middle;
}
}
.ec-cartNavi .ec-cartNavi__itemIcon {
display: block;
font-size: 24px;
line-height: 1;
color: black;
}
@media only screen and (min-width: 768px) {
.ec-cartNavi .ec-cartNavi__itemIcon {
font-size: 32px;
}
}
.ec-cartNavi .ec-cartNavi__itemLink {
display: block;
font-size: 10px;
line-height: 1;
vertical-align: middle;
color: black;
padding-top: 2px;
}
@media only screen and (min-width: 768px) {
.ec-cartNavi .ec-cartNavi__itemLink {
font-size: 12px;
}
}
.ec-cartNavi.is-active .ec-cartNavi__icon:before {
content: "\f00d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.ec-cartNavi.is-active .ec-cartNavi__badge {
display: none;
}
@media only screen and (min-width: 768px) {
.ec-cartNavi.is-active .ec-cartNavi__badge {
display: none;
}
}
/*
カートナビゲーションのポップアップ(商品詳細)
カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。
ex [カートページ ナビゲーション部分](http://demo3.ec-cube.net/cart)
Markup:
div(style="height:350px;")
// 上記のdivはスタイルガイド都合上、高さをもたせるため設置(mocでは不要)
.is_active
.ec-cartNavi
.ec-cartNavi__icon
img(src='/moc/icon/cart-dark.svg', alt='close')
.ec-cartNavi__iconClose
img(src='/moc/icon/cross-dark.svg', alt='close')
.ec-cartNavi__badge 1
.ec-cartNavi__label
| 合計
.ec-cartNavi__price ¥1920
+b.ec-cartNaviIsset
+e.cart
+e.cartImage
img(src='http://demo3.ec-cube.net/upload/save_image/0701104933_5593472d8d179.jpeg')
+e.cartContent
+e.cartContentTitle ミニテーブル
+e.cartContentPrice ¥ 12,960
+e.cartContentTax 税込
+e.cartContentNumber 数量：1
+e.action
a.ec-blockBtn--action(href="/moc/guest/cart1") カートへ進む
a.ec-blockBtn.ec-cartNavi--cancel キャンセル
Styleguide 7.3.6
*/
.ec-cartNaviIsset {
display: none;
width: 100%;
text-align: center;
background: #f8f8f8;
box-sizing: border-box;
padding: 16px;
z-index: 20;
position: absolute;
right: 0;
}
@media only screen and (min-width: 768px) {
.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-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;
}
@media only screen and (min-width: 768px) {
.ec-cartNaviNull {
margin-top: 10px;
min-width: 256px;
max-width: 256px;
}
.ec-cartNaviNull::before {
display: inline-block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 8.5px 10px 8.5px;
border-color: transparent transparent #f8f8f8 transparent;
position: absolute;
top: -9px;
}
}
.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 {
margin-top: 15px;
}
@media only screen and (min-width: 768px) {
.ec-totalBox {
margin-top: 0;
position: sticky;
top: 15px;
}
#page_mypage_history .ec-totalBox {
margin-top: 30px;
}
}
@media only screen and (min-width: 1100px) {
.ec-totalBox {
top: 104px;
}
}
.ec-totalBox__spec {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
padding: 0 15px 6px;
background: #efefef;
line-height: 1;
}
.ec-totalBox__spec dt {
font-size: 1.4rem;
font-weight: normal;
}
.ec-totalBox__spec dd {
margin-bottom: 0;
font-size: 1.6rem;
}
.ec-totalBox__spec:first-child {
padding-top: 10px;
}
.ec-totalBox__spec:last-of-type {
padding-bottom: 10px;
border-bottom: 1px solid #fff;
}
.ec-totalBox .delivery_fee {
padding-bottom: 10px;
border-bottom: 1px solid #fff;
}
.ec-totalBox .delivery_fee + .ec-totalBox__spec,
.ec-totalBox .delivery_fee + .ec-totalBox__pointBlock > .ec-totalBox__spec:first-child {
padding-top: 10px;
}
.ec-totalBox .ec-totalBox__pointBlock + .ec-totalBox__spec {
padding-top: 10px;
}
.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 {
display: flex;
align-items: center;
padding: 15px;
background: #efefef;
font-weight: bold;
}
.ec-totalBox .ec-totalBox__paymentTotal span {
font-weight: normal;
}
.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__price {
margin-left: auto;
font-size: 2rem;
}
.ec-totalBox .ec-totalBox__price {
margin-left: 16px;
font-size: 16px;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-totalBox .ec-totalBox__price {
font-size: 24px;
}
}
.ec-totalBox .ec-totalBox__taxLabel {
margin-top: 6px;
margin-left: 8px;
font-size: 1.2rem;
}
.ec-totalBox .ec-totalBox__taxRate {
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
font-size: 10px;
}
@media only screen and (min-width: 768px) {
.ec-totalBox .ec-totalBox__taxRate {
font-size: 12px;
}
}
.ec-totalBox .ec-totalBox__taxRate dt {
font-weight: normal;
text-align: left;
margin-right: 8px;
}
.ec-totalBox .ec-totalBox__taxRate dt::before {
content: "[ ";
}
.ec-totalBox .ec-totalBox__taxRate dd {
text-align: right;
}
.ec-totalBox .ec-totalBox__taxRate dd::after {
content: " ]";
}
.ec-totalBox__receiptBlock {
margin-top: 15px;
}
.ec-totalBox__receiptBlock__heading {
padding: 15px 0;
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
font-weight: bold;
}
.ec-totalBox__receiptBlock__content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid #efefef;
}
.ec-totalBox__receiptBlock__content p {
width: 100%;
margin-bottom: 15px;
font-size: 1.4rem;
line-height: 1;
}
.ec-totalBox__receiptBlock__content input {
margin-bottom: 0;
background: #efefef;
border-color: #efefef;
}
.ec-totalBox__receiptBlock__content button {
width: 105px;
background: #000;
border-color: #000;
color: #fff;
font-size: 1.2rem;
}
.ec-totalBox .ec-totalBox__btn {
margin-top: 30px;
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--cart {
width: 270px;
margin-inline: auto;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
width: 270px;
margin-inline: auto;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
width: 270px;
margin-inline: auto;
margin-top: 15px;
}
.ec-totalBox .ec-color-accent {
margin-top: 10px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
お知らせ
新着情報やバナーなどの掲載項目を紹介していきます。
sg-wrapper:
Styleguide 8.1
*/
/*
新着情報
新着情報の掲載をします。
ex [トップページ 新着情報部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/8.1.info.pug
+ec-news
Styleguide 8.1.1
*/
.ec-news {
margin-bottom: 16px;
background: #F8F8F8;
}
@media only screen and (min-width: 768px) {
.ec-news {
margin-right: 3%;
}
}
@media only screen and (min-width: 768px) {
.ec-news {
margin-bottom: 32px;
}
}
.ec-news .ec-news__title {
font-weight: bold;
padding: 8px;
font-size: 16px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-news .ec-news__title {
padding: 16px;
text-align: left;
font-size: 24px;
}
}
.ec-news .ec-news__items {
padding: 0;
list-style: none;
border-top: 1px dotted #ccc;
}
/*
折りたたみ項目
折りたたみ項目を掲載します。
ex [トップページ 折りたたみ項目部分](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/8.1.info.pug
+b.ec-news
+e.title 新着情報
+e.UL.items
+e.LI.item
+b.ec-newsline.is_active
+e.info
+e.date 2016/09/29
+e.comment サイトオープンしました
+e.close
a.ec-closeBtn--circle
span.ec-closeBtn--circle__icon
.ec-icon
img(src='/moc/icon/angle-down-white.svg', alt='')
+e.description 一人暮らしからオフィスなどさまざまなシーンで あなたの生活をサポートするグッズをご家庭へお届けします！
Styleguide 8.1.2
*/
.ec-newsline {
display: flex;
flex-wrap: wrap;
overflow: hidden;
padding: 0 16px;
}
.ec-newsline .ec-newsline__info {
width: 100%;
padding: 16px 0;
}
.ec-newsline .ec-newsline__info:after {
content: " ";
display: table;
}
.ec-newsline .ec-newsline__info:after {
clear: both;
}
.ec-newsline .ec-newsline__date {
display: inline-block;
margin-right: 10px;
float: left;
}
.ec-newsline .ec-newsline__comment {
display: inline-block;
float: left;
}
.ec-newsline .ec-newsline__close {
float: right;
display: inline-block;
text-align: right;
}
.ec-newsline .ec-newsline__close .ec-closeBtn--circle {
display: inline-block;
width: 25px;
height: 25px;
min-width: 25px;
min-height: 25px;
}
.ec-newsline .ec-newsline__description {
width: 100%;
height: 0;
transition: all 0.2s ease-out;
}
.ec-newsline.is_active .ec-newsline__description {
height: auto;
transition: all 0.2s ease-out;
padding-bottom: 16px;
}
.ec-newsline.is_active .ec-icon img {
transform: rotateX(180deg);
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
マイページ
マイページで利用するためのスタイルガイド群です。
sg-wrapper:
Styleguide 9.1
*/
/*
マイページ
マイページで表示するメニューリストです。
ul を利用したリスト要素で記述します。
ex [マイページ メニューリスト部分](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist
Styleguide 9.1.1
*/
.ec-navlistRole {
margin-inline: -15px;
padding-inline: 15px;
border-bottom: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-navlistRole {
max-width: 1000px;
margin-inline: auto;
padding-inline: 0;
}
}
.ec-navlistRole .ec-navlistRole__navlist {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
padding: 10px 0;
list-style: none;
}
@media only screen and (min-width: 768px) {
.ec-navlistRole .ec-navlistRole__navlist a {
transition: all 0.5s ease 0s;
}
.ec-navlistRole .ec-navlistRole__navlist a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-navlistRole .ec-navlistRole__navlist {
padding: 20px 0;
}
}
.ec-navlistRole .ec-navlistRole__item {
display: flex;
}
.ec-navlistRole .ec-navlistRole__item a {
display: block;
width: 100%;
margin: auto;
padding: 10px;
font-size: 1.4rem;
line-height: 1;
color: currentColor;
text-decoration: underline;
text-underline-offset: 2px;
}
@media only screen and (min-width: 768px) {
.ec-navlistRole .ec-navlistRole__item a {
font-size: 1.8rem;
}
}
.ec-navlistRole .active a {
font-weight: bold;
}
/*
マイページ（お気に入り機能無効）
マイページで表示するメニューリストです。
ul を利用したリスト要素で記述します。
ex [マイページ メニューリスト部分](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-navlist_noFavorite
Styleguide 9.1.2
*/
/*
Welcome メッセージ
マイページで表示するログイン名の表示コンポーネントです。
ex [マイページ メニューリスト下部分](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/9.1.mypage.pug
+ec-welcomeMsg
Styleguide 9.1.3
*/
.ec-welcomeMsg {
margin-right: auto;
margin-left: auto;
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
width: auto;
margin: 0 -15px;
padding: 10px 15px;
border-bottom: 1px solid #efefef;
}
.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%;
height: auto;
}
.ec-welcomeMsg html {
box-sizing: border-box;
}
.ec-welcomeMsg *,
.ec-welcomeMsg *::before,
.ec-welcomeMsg *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 768px) {
.ec-welcomeMsg {
max-width: 1000px;
margin-inline: auto;
padding: 30px 0;
}
}
#page_mypage .ec-welcomeMsg, #page_mypage_favorite .ec-welcomeMsg {
border: none;
}
.ec-welcomeMsg p {
font-size: 1.2rem;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-welcomeMsg p {
font-size: 1.6rem;
}
}
/*
お気に入り一覧
お気に入り一覧で表示するアイテムの表示コンポーネントです。
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__header {
margin: 0 -15px 30px;
padding: 10px 15px;
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-favoriteRole__header {
display: flex;
justify-content: space-between;
margin-inline: 0;
padding: 30px 0 0;
border-bottom: none;
}
}
.ec-favoriteRole__header__pager {
display: none;
}
@media only screen and (min-width: 768px) {
.ec-favoriteRole__header__pager {
display: block;
}
.ec-favoriteRole__header__pager .ec-pager {
padding-top: 0;
}
}
.ec-favoriteRole__header__count {
font-size: 1.2rem;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-favoriteRole__header__count {
font-size: 1.6rem;
}
}
.ec-shelfGrid .ec-favoriteRole__delete {
width: 100%;
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #efefef;
text-align: center;
}
.ec-shelfGrid .ec-favoriteRole__delete a {
color: currentColor;
font-size: 1.4rem;
text-decoration: underline;
text-underline-offset: 2px;
}
.ec-favoriteRole__noItem {
margin-bottom: -20px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-favoriteRole__noItem {
margin-bottom: 0;
padding-top: 20px;
font-size: 1.8rem;
}
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-coupon {
width: -moz-fit-content;
width: fit-content;
margin-bottom: 30px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.ec-coupon__name {
font-weight: bold;
}
.ec-coupon .ec-coupon__button-area {
font-size: inherit;
}
.register_coupon {
display: flex;
gap: 20px;
}
.register_coupon__form {
width: calc(100% - 80px);
}
@media only screen and (min-width: 768px) {
.register_coupon__form {
max-width: 35%;
}
}
.register_coupon__btn {
width: 60px;
}
.register_coupon .ec-blockBtn--action {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 16px;
font-size: 1.4rem;
}
.register_coupon,
.registered_coupon {
padding-top: 30px;
}
#coupon_use_Coupon .choice_coupon:first-child {
display: none;
}
#coupon_use_Coupon .products {
font-feature-settings: "palt";
}
#coupon_use_Coupon .info {
color: #777;
}
.shopping_coupon_use {
padding-top: 30px;
}
@media only screen and (min-width: 768px) {
.shopping_coupon_use {
display: flex;
align-items: end;
gap: 20px;
}
}
.shopping_coupon_use__cd {
margin: -10px 0 6px;
padding-left: 29px;
}
@media only screen and (min-width: 768px) {
.shopping_coupon_use__cd {
margin-bottom: 12px;
padding-left: 0;
}
}
.shopping_coupon_use__example {
margin-bottom: 16px;
padding-left: 29px;
color: #777;
}
@media only screen and (min-width: 768px) {
.shopping_coupon_use__example {
padding-left: 0;
}
}
.shopping_coupon_use .ec-errorMessage {
margin-bottom: -6px;
font-size: 1rem;
font-weight: bold;
color: #DE5D50;
}
.choice_coupon {
display: flex;
align-items: start;
gap: 16px;
margin-bottom: 16px;
}
.choice_coupon input {
margin-top: 6px;
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-commonNav {
display: flex;
padding-top: 3px;
}
.ec-commonNav .ec-commonNav__item {
flex-grow: 1;
margin-left: 0;
display: inline-block;
text-align: center;
max-width: 50px;
min-width: 46px;
min-height: 46px;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-commonNav .ec-commonNav__item a {
transition: all 0.5s ease 0s;
}
.ec-commonNav .ec-commonNav__item a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-commonNav .ec-commonNav__item {
max-width: unset;
min-width: 60px;
min-height: 60px;
}
}
.ec-commonNav .ec-commonNav__item + .ec-commonNav__item {
margin-left: 15px;
}
@media only screen and (min-width: 768px) {
.ec-commonNav .ec-commonNav__item + .ec-commonNav__item {
margin-left: 20px;
}
}
.ec-commonNav .ec-commonNav__item + .ec-commonNav__item:before {
content: "";
display: block;
width: 1px;
height: 16px;
background: #efefef;
position: absolute;
left: -8px;
top: calc(50% - 8px);
}
@media only screen and (min-width: 768px) {
.ec-commonNav .ec-commonNav__item + .ec-commonNav__item:before {
left: -10px;
}
}
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-commonNav .ec-commonNav__item:last-child {
margin-right: 20px;
}
}
.ec-headerSearch .ec-commonNav .ec-commonNav__item:last-child:after {
content: "";
display: block;
width: 1px;
height: 16px;
background: #efefef;
position: absolute;
right: -10px;
top: calc(50% - 8px);
}
.ec-commonNav .ec-commonNav__item a {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
position: relative;
}
.ec-commonNav .ec-commonNav__item a.current:before {
display: block;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #469bff;
position: absolute;
top: 2px;
left: calc((100% - 7px) / 2);
}
.ec-commonNav .ec-commonNav__itemIcon {
display: block;
font-size: 24px;
line-height: 1;
color: black;
}
@media only screen and (min-width: 768px) {
.ec-commonNav .ec-commonNav__itemIcon {
font-size: 32px;
}
}
.ec-commonNav .ec-commonNav__itemLink {
display: block;
font-size: 10px;
line-height: 1;
letter-spacing: 0;
vertical-align: middle;
color: black;
padding-top: 4px;
word-break: keep-all;
}
@media only screen and (min-width: 768px) {
.ec-commonNav .ec-commonNav__itemLink {
font-size: 12px;
}
}
.ec-commonNav .ec-commonNav__itemLink img {
max-width: 100%;
width: 38px;
height: 10px;
margin-top: -1px;
margin-bottom: -1px;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (min-width: 768px) {
.ec-commonNav .ec-commonNav__itemLink img {
width: 46px;
height: 17px;
margin-top: -2px;
margin-bottom: -2px;
}
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-categoryNav__itemList {
list-style: none;
padding: 0;
margin: 0;
font-size: 0;
border-bottom: 1px solid #efefef;
display: flex;
flex-wrap: wrap;
}
.ec-categoryNav__itemList a {
color: inherit;
text-decoration: none;
}
.ec-categoryNav__itemList a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-categoryNav__itemList a {
transition: all 0.5s ease 0s;
}
.ec-categoryNav__itemList a:hover {
opacity: 0.7;
}
}
.ec-categoryNav__item {
width: 50%;
border-bottom: 1px solid #efefef;
}
.ec-categoryNav__item:nth-child(2n+1) {
border-right: 1px solid #efefef;
}
.ec-categoryNav__item:nth-child(2n+1):last-child {
border-bottom: none;
}
.ec-categoryNav__item:nth-child(2n+1):last-child + .ec-categoryNav__item {
border-bottom: none;
}
.ec-categoryNav__item:last-child {
border-bottom: none;
}
.ec-categoryNav__item:nth-last-child(2):first-child {
border-bottom: none;
}
@media only screen and (min-width: 1100px) {
.ec-categoryNav__item {
width: 25%;
}
.ec-categoryNav__item:nth-child(4n+1), .ec-categoryNav__item:nth-child(4n+2), .ec-categoryNav__item:nth-child(4n+3) {
border-right: 1px solid #efefef;
}
.ec-categoryNav__item:nth-child(4n+1):last-child {
border-bottom: none;
}
.ec-categoryNav__item:nth-child(4n+1):last-child + .ec-categoryNav__item {
border-bottom: none;
}
.ec-categoryNav__item:nth-last-child(3):first-child {
border-bottom: none;
}
.ec-categoryNav__item:nth-last-child(3):first-child + .ec-categoryNav__item {
border-bottom: none;
}
.ec-categoryNav__item:nth-last-child(4):first-child {
border-bottom: none;
}
.ec-categoryNav__item:nth-last-child(4):first-child + .ec-categoryNav__item {
border-bottom: none;
}
}
.ec-categoryNav__item a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 15px;
}
.ec-categoryNav__item__text {
font-size: 1.4rem;
line-height: 1;
}
@media only screen and (min-width: 1100px) {
.ec-categoryNav__item__text {
font-size: 1.6rem;
}
}
.ec-categoryNav__item i {
font-size: 1.6rem;
line-height: 1;
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-oshiraseList {
list-style: none;
margin: 0;
padding: 0;
}
.ec-oshiraseList a {
color: inherit;
text-decoration: none;
}
.ec-oshiraseList a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-oshiraseList a {
transition: all 0.5s ease 0s;
}
.ec-oshiraseList a:hover {
opacity: 0.7;
}
}
.ec-oshiraseList--noList {
padding-top: 10px;
font-size: 12px;
text-align: center;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList--noList {
padding-top: 30px;
font-size: 16px;
}
}
.ec-oshiraseList__item {
border-bottom: 1px solid #efefef;
}
.ec-oshiraseList__item:first-child {
border-top: 1px solid #efefef;
}
.ec-oshiraseModal .ec-oshiraseList__item:first-child {
border-top: none;
}
.ec-oshiraseModal .ec-oshiraseList__item:nth-child(n+3) {
display: none;
}
.ec-oshiraseList__item a {
display: flex;
flex-wrap: wrap;
padding: 10px 15px;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__item a {
padding: 10px 0;
}
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseModal .ec-oshiraseList__item a {
padding: 10px 15px;
}
}
.ec-oshiraseList__item dl {
margin: 0 0 0 10px;
flex: 1;
}
.ec-oshiraseList__item dl dt {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__item dl dt {
font-size: 14px;
}
}
.ec-oshiraseList__item dl dd {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 5px 0 0;
}
.ec-oshiraseList__item__img {
display: flex;
width: 60px;
height: 60px;
}
.ec-oshiraseList__item__img img {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.ec-oshiraseList__item__noImage {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
min-height: 60px;
background: #d9d9d9;
text-align: center;
font-size: 12px;
color: #666666;
padding: 3px;
}
.ec-oshiraseList__item__icon {
display: flex;
justify-content: center;
width: 24px;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__item__icon {
width: 36px;
}
}
.ec-oshiraseList__item__icon i {
font-size: 24px;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__item__icon i {
font-size: 36px;
}
}
.ec-oshiraseList__item__category {
font-size: 12px;
flex: 1;
color: #666666;
font-weight: normal;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__item__category {
font-size: 14px;
}
}
.ec-oshiraseModal .ec-oshiraseList__item__category {
font-size: 10px;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseModal .ec-oshiraseList__item__category {
font-size: 14px;
}
}
.ec-oshiraseList__item__category > span + span {
margin-left: 10px;
}
.ec-oshiraseList__item__date {
font-size: 12px;
margin-left: auto;
min-width: 11em;
text-align: right;
color: #666666;
font-weight: normal;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__item__date {
font-size: 14px;
margin-left: 10px;
}
}
.ec-oshiraseModal .ec-oshiraseList__item__date {
font-size: 10px;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseModal .ec-oshiraseList__item__date {
font-size: 14px;
}
}
.ec-oshiraseList__item__title {
font-size: 12px;
font-weight: normal;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__item__title {
font-size: 14px;
}
}
.ec-oshiraseList__item__tag > span {
display: inline-block;
font-size: 10px;
color: #000;
font-weight: normal;
background: #efefef;
padding: 5px 10px;
border-radius: 3px;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__item__tag > span {
font-size: 12px;
}
}
.ec-oshiraseList__item__tag > span + span {
margin-left: 10px;
}
.ec-oshiraseList__moreBtn {
text-align: center;
margin-top: 10px;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__moreBtn {
margin-top: 20px;
}
}
.ec-oshiraseList__moreBtn a {
font-size: 14px;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__moreBtn a {
font-size: 16px;
}
}
.ec-oshiraseList__moreBtn a i {
font-size: 18px;
margin-left: 3px;
vertical-align: bottom;
}
@media only screen and (min-width: 1100px) {
.ec-oshiraseList__moreBtn a i {
font-size: 20px;
}
}
.ec-oshiraseList__moreBtn a span {
vertical-align: bottom;
}
.ec-oshiraseList__moreBtn__close {
display: none;
}
/**
メディアクエリ
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, .ec-role--800 {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.ec-role:after, .ec-role--800:after {
content: " ";
display: table;
}
.ec-role:after, .ec-role--800:after {
clear: both;
}
.ec-role textarea, .ec-role--800 textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-role img, .ec-role--800 img {
max-width: 100%;
height: auto;
}
.ec-role html, .ec-role--800 html {
box-sizing: border-box;
}
.ec-role *, .ec-role--800 *,
.ec-role *::before,
.ec-role--800 *::before,
.ec-role *::after,
.ec-role--800 *::after {
box-sizing: inherit;
}
.ec-role--800 {
max-width: calc(800px + 2 * 15px);
}
/*
マイページセクション
マイページ専用のコンテナブロックです。
ex [マイページ コンテナ](http://demo3.ec-cube.net/mypage)
Markup:
include /assets/tmpl/elements/11.1.role.pug
+ec-mypageRole
Styleguide 11.1.2
*/
.ec-mypageRole {
margin-right: auto;
margin-left: auto;
padding-left: 16px;
padding-right: 16px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-mypageRole html {
box-sizing: border-box;
}
.ec-mypageRole *,
.ec-mypageRole *::before,
.ec-mypageRole *::after {
box-sizing: inherit;
}
/*
トップページ等 ブロックスタイル
*/
.ec-block {
position: relative;
padding-top: 50px;
margin-bottom: 50px;
}
.ec-block:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: 0;
}
@media only screen and (min-width: 768px) {
.ec-block:before {
width: calc(100% - 15px * 2);
left: 15px;
}
}
.ec-block:last-child {
margin-bottom: 0;
}
/**
メディアクエリ
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: 1000;
opacity: 1;
}
/*
ヘッダー
ヘッダー用のプロジェクトコンポーネントを提供します。
ex [トップページ ヘッダー](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/11.2.header.pug
include /assets/tmpl/elements/11.3.headerNavi.pug
include /assets/tmpl/elements/11.4.categoryNavi.pug
+b.ec-layoutRole
+e.header
+ec-headerRole
+ec-headerNaviRole
+ec-categoryNaviRole
Styleguide 11.2
*/
.ec-layoutRole {
display: flex;
flex-direction: column;
width: 100%;
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: 1310px;
display: flex;
flex-wrap: nowrap;
flex-grow: 1;
}
.ec-layoutRole .ec-layoutRole__main {
width: 100%;
}
.ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 100%;
}
@media only screen and (min-width: 768px) {
.ec-layoutRole .ec-layoutRole__mainWithColumn {
width: 75%;
}
}
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
width: 100%;
}
@media only screen and (min-width: 768px) {
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
width: 50%;
}
}
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
display: none;
}
@media only screen and (min-width: 768px) {
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
display: block;
width: 25%;
}
}
.ec-layoutRole__footer {
margin-top: 50px;
}
#page_product_detail .ec-layoutRole__footer, #page_mypage .ec-layoutRole__footer {
margin-top: 0;
}
#page_shopping .ec-layoutRole__footer, #page_shopping_confirm .ec-layoutRole__footer, #page_mypage_history .ec-layoutRole__footer {
margin-top: 30px;
}
@media only screen and (min-width: 768px) {
#page_shopping .ec-layoutRole__footer, #page_shopping_confirm .ec-layoutRole__footer, #page_mypage_history .ec-layoutRole__footer {
margin-top: 50px;
}
}
.ec-headerRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
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%;
height: auto;
}
.ec-headerRole html {
box-sizing: border-box;
}
.ec-headerRole *,
.ec-headerRole *::before,
.ec-headerRole *::after {
box-sizing: inherit;
}
.ec-headerRole:after {
display: none;
}
@media only screen and (min-width: 768px) {
.ec-headerRole:after {
content: " ";
display: table;
}
.ec-headerRole:after {
clear: both;
}
}
.ec-headerRole::before {
display: none;
}
@media only screen and (min-width: 768px) {
.ec-headerRole {
width: 100%;
}
.ec-headerRole:after {
content: " ";
display: table;
}
.ec-headerRole:after {
clear: both;
}
}
.ec-headerRole .ec-headerRole__title {
width: 100%;
}
.ec-headerRole .ec-headerRole__navSP {
display: block;
position: absolute;
top: 15px;
width: 27%;
right: 0;
text-align: right;
}
@media only screen and (min-width: 768px) {
.ec-headerRole .ec-headerRole__navSP {
display: none;
}
}
.ec-headerNaviRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: fixed;
z-index: 2;
background: #fff;
}
.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%;
height: auto;
}
.ec-headerNaviRole html {
box-sizing: border-box;
}
.ec-headerNaviRole *,
.ec-headerNaviRole *::before,
.ec-headerNaviRole *::after {
box-sizing: inherit;
}
.ec-headerNaviRole .fa-bars {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
.ec-headerNaviRole {
padding-top: 16px;
padding-bottom: 16px;
position: initial;
}
}
.ec-headerNaviRole__left {
flex: 1;
}
@media only screen and (min-width: 768px) {
.ec-headerNaviRole__left {
flex: initial;
width: 252px;
}
}
@media only screen and (min-width: 768px) {
.ec-headerNaviRole__search {
display: inline-block;
margin-top: 10px;
}
.ec-headerNaviRole__search a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole__search a:hover {
text-decoration: none;
}
}
.ec-headerNaviRole__navSP {
display: block;
}
@media only screen and (min-width: 768px) {
.ec-headerNaviRole__navSP {
display: none;
}
.ec-headerNaviRole__navSP a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole__navSP a:hover {
text-decoration: none;
}
}
.ec-headerNaviRole__right {
display: flex;
justify-content: flex-end;
align-items: center;
flex: 1;
}
.ec-headerNaviRole__nav {
display: inline-block;
}
.ec-headerNaviRole__nav a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole__nav a:hover {
text-decoration: none;
}
.ec-headerNaviRole__cart {
display: inline-block;
}
.ec-headerNaviRole__cart a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole__cart a:hover {
text-decoration: none;
}
.ec-headerNaviRole__commonNav {
display: none;
}
.ec-headerNaviRole__commonNav a {
color: inherit;
text-decoration: none;
}
.ec-headerNaviRole__commonNav a:hover {
text-decoration: none;
}
@media only screen and (min-width: 1100px) {
.ec-headerNaviRole__commonNav {
display: inline-block;
}
}
.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;
}
@media only screen and (min-width: 768px) {
.ec-headerNavSP {
display: none;
}
}
.ec-headerNavSP.is-active {
display: none;
}
.ec-headerSearchRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
padding-top: 3px;
padding-bottom: 8px;
margin-top: 46px;
}
.ec-headerSearchRole:after {
content: " ";
display: table;
}
.ec-headerSearchRole:after {
clear: both;
}
.ec-headerSearchRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-headerSearchRole img {
max-width: 100%;
height: auto;
}
.ec-headerSearchRole html {
box-sizing: border-box;
}
.ec-headerSearchRole *,
.ec-headerSearchRole *::before,
.ec-headerSearchRole *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 768px) {
.ec-headerSearchRole {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
}
}
.ec-headerSearchRole.ec-largeModal {
display: block;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearchRole__fixed {
display: flex;
width: 100%;
align-items: center;
background: #fff;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
border-radius: 20px;
padding: 0 20px;
}
}
.ec-headerSearchRole__fixed.fixed {
position: fixed;
z-index: 11;
top: 15px;
max-width: 1280px;
width: calc(100vw - 40px);
}
.ec-headerSearchRole__search a {
color: inherit;
text-decoration: none;
}
.ec-headerSearchRole__search a:hover {
text-decoration: none;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearchRole__search {
width: 100%;
}
}
/*
ヘッダー：タイトル
ヘッダー内で使用されるタイトルコンポーネントです。
Markup:
include /assets/tmpl/elements/11.2.header.pug
+ec-headerTitle
Styleguide 11.2.1
*/
.ec-headerTitle {
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
max-width: 132px;
}
.ec-headerTitle textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-headerTitle img {
max-width: 100%;
height: auto;
}
.ec-headerTitle html {
box-sizing: border-box;
}
.ec-headerTitle *,
.ec-headerTitle *::before,
.ec-headerTitle *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 768px) {
.ec-headerTitle {
max-width: 252px;
}
}
.ec-headerTitle .ec-headerTitle__title {
text-align: center;
}
.ec-headerTitle .ec-headerTitle__title h1, .ec-headerTitle .ec-headerTitle__title .h1 {
margin: 0;
padding: 0;
font-size: 0;
}
.ec-headerTitle .ec-headerTitle__title a {
display: inline-block;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: black;
}
@media only screen and (min-width: 768px) {
.ec-headerTitle .ec-headerTitle__title a {
font-size: 40px;
}
}
.ec-headerTitle .ec-headerTitle__title a:hover {
opacity: 0.8;
}
.ec-headerTitle .ec-headerTitle__subtitle {
font-size: 10px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-headerTitle .ec-headerTitle__subtitle {
font-size: 16px;
margin-bottom: 10px;
}
}
.ec-headerTitle .ec-headerTitle__subtitle a {
display: inline-block;
color: #0092C4;
text-decoration: none;
cursor: pointer;
}
/*
ヘッダー：ユーザナビゲーション
ヘッダー内でユーザに関与するナビゲーションコンポーネントです。
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`内に記述すると２カラム上の右側に配置することができます。
Markup:
include /assets/tmpl/elements/11.3.headerNavi.pug
+ec-headerNav
sg-wrapper:
Styleguide 11.2.3
*/
.ec-headerNav {
display: flex;
}
.ec-headerNav .ec-headerNav__item, .ec-headerNav .ec-headerNav__item--cart, .ec-headerNav .ec-headerNav__item--search {
margin-left: 0;
display: inline-block;
text-align: center;
min-width: 46px;
min-height: 46px;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-headerNav .ec-headerNav__item a, .ec-headerNav .ec-headerNav__item--cart a, .ec-headerNav .ec-headerNav__item--search a {
transition: all 0.5s ease 0s;
}
.ec-headerNav .ec-headerNav__item a:hover, .ec-headerNav .ec-headerNav__item--cart a:hover, .ec-headerNav .ec-headerNav__item--search a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-headerNav .ec-headerNav__item, .ec-headerNav .ec-headerNav__item--cart, .ec-headerNav .ec-headerNav__item--search {
min-width: 60px;
min-height: 60px;
}
}
@media (hover: hover) {
.ec-headerNav .ec-headerNav__item:is(.has_modal):hover, .ec-headerNav .ec-headerNav__item--cart:is(.has_modal):hover, .ec-headerNav .ec-headerNav__item--search:is(.has_modal):hover {
z-index: 3;
}
.ec-headerNav .ec-headerNav__item:is(.has_modal):hover .ec-headerNav__item__link, .ec-headerNav .ec-headerNav__item--cart:is(.has_modal):hover .ec-headerNav__item__link, .ec-headerNav .ec-headerNav__item--search:is(.has_modal):hover .ec-headerNav__item__link {
opacity: 0.7;
}
.ec-headerNav .ec-headerNav__item:is(.has_modal):hover .ec-headerNav__modal, .ec-headerNav .ec-headerNav__item--cart:is(.has_modal):hover .ec-headerNav__modal, .ec-headerNav .ec-headerNav__item--search:is(.has_modal):hover .ec-headerNav__modal {
opacity: 1;
pointer-events: all;
}
}
@media (hover: none) {
.ec-headerNav .ec-headerNav__item:is(.active), .ec-headerNav .ec-headerNav__item--cart:is(.active), .ec-headerNav .ec-headerNav__item--search:is(.active) {
z-index: 3;
}
.ec-headerNav .ec-headerNav__item:is(.active) .ec-headerNav__item__link, .ec-headerNav .ec-headerNav__item--cart:is(.active) .ec-headerNav__item__link, .ec-headerNav .ec-headerNav__item--search:is(.active) .ec-headerNav__item__link {
opacity: 0.7;
}
.ec-headerNav .ec-headerNav__item:is(.active) .ec-headerNav__modal, .ec-headerNav .ec-headerNav__item--cart:is(.active) .ec-headerNav__modal, .ec-headerNav .ec-headerNav__item--search:is(.active) .ec-headerNav__modal {
opacity: 1;
pointer-events: all;
}
}
@media only screen and (min-width: 768px) {
.ec-headerNav .ec-headerNav__item + .ec-headerNav__item, .ec-headerNav .ec-headerNav__item--cart + .ec-headerNav__item, .ec-headerNav .ec-headerNav__item + .ec-headerNav__item--cart, .ec-headerNav .ec-headerNav__item--cart + .ec-headerNav__item--cart, .ec-headerNav .ec-headerNav__item--search + .ec-headerNav__item, .ec-headerNav .ec-headerNav__item--search + .ec-headerNav__item--cart, .ec-headerNav .ec-headerNav__item + .ec-headerNav__item--search, .ec-headerNav .ec-headerNav__item--cart + .ec-headerNav__item--search, .ec-headerNav .ec-headerNav__item--search + .ec-headerNav__item--search {
margin-left: 20px;
}
}
@media only screen and (min-width: 768px) {
.ec-headerNav .ec-headerNav__item + .ec-headerNav__item:before, .ec-headerNav .ec-headerNav__item--cart + .ec-headerNav__item:before, .ec-headerNav .ec-headerNav__item + .ec-headerNav__item--cart:before, .ec-headerNav .ec-headerNav__item--cart + .ec-headerNav__item--cart:before, .ec-headerNav .ec-headerNav__item--search + .ec-headerNav__item:before, .ec-headerNav .ec-headerNav__item--search + .ec-headerNav__item--cart:before, .ec-headerNav .ec-headerNav__item + .ec-headerNav__item--search:before, .ec-headerNav .ec-headerNav__item--cart + .ec-headerNav__item--search:before, .ec-headerNav .ec-headerNav__item--search + .ec-headerNav__item--search:before {
content: "";
display: block;
width: 1px;
height: 16px;
background: #efefef;
position: absolute;
left: -10px;
top: calc(50% - 8px);
}
}
@media only screen and (min-width: 1100px) {
.ec-headerNav .ec-headerNav__item--search {
display: none;
}
}
@media only screen and (min-width: 1100px) {
.ec-headerNav .ec-headerNav__item--cart:after {
content: "";
display: block;
width: 1px;
height: 16px;
background: #efefef;
position: absolute;
left: -15px;
top: calc(50% - 8px);
}
}
.ec-headerNav .ec-headerNav__item__link {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
border: none;
background: #fff;
}
.ec-headerNav .ec-headerNav__item__link[type=button] {
padding: 0;
width: 100%;
}
.ec-headerNav .ec-headerNav__itemIcon {
display: block;
font-size: 24px;
line-height: 1;
color: black;
}
@media only screen and (min-width: 768px) {
.ec-headerNav .ec-headerNav__itemIcon {
font-size: 32px;
}
}
.ec-headerNav .ec-headerNav__itemLink, .ec-headerNav .ec-headerNav__itemLink--mypage {
display: block;
font-size: 10px;
line-height: 1;
letter-spacing: 0;
vertical-align: middle;
color: black;
padding-top: 2px;
}
@media only screen and (min-width: 768px) {
.ec-headerNav .ec-headerNav__itemLink, .ec-headerNav .ec-headerNav__itemLink--mypage {
font-size: 12px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
}
.ec-headerNav .ec-headerNav__itemLink--mypage {
letter-spacing: -0.1em;
}
.ec-headerNav__modal {
width: 200px;
padding-top: 3px;
position: absolute;
top: 100%;
right: -10px;
z-index: 1;
opacity: 0;
pointer-events: none;
transition: all 0.5s ease 0s;
}
.ec-headerNav__modal__inner {
border-radius: 20px;
background: #fff;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}
.ec-headerNav__modal a {
display: flex;
align-items: center;
height: 50px;
padding-inline: 20px;
border-radius: 20px;
}
.ec-headerNav .oshirase-link:hover {
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.ec-headerNav .oshirase-link:hover a {
transition: all 0.5s ease 0s;
}
.ec-headerNav .oshirase-link:hover a:hover {
opacity: 0.7;
}
}
/*
ヘッダー：検索ボックス
ヘッダー内で使用される商品検索コンポーネントです。
`.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__left {
display: none;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch .ec-headerSearch__left {
display: block;
width: 400px;
padding: 5px 0;
}
}
.ec-headerSearch .ec-headerSearch__right {
display: flex;
align-items: center;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch .ec-headerSearch__right {
justify-content: flex-end;
flex: 1;
padding: 10px 0;
}
}
.ec-headerSearchRole.show .ec-headerSearch .ec-headerSearch__right {
justify-content: space-between;
}
.ec-headerSearch .ec-headerSearch__right > .ec-largeModal__close, .ec-headerSearch .ec-headerSearch__right > .ec-largeModal__close--suggest {
display: none;
position: relative;
transform: none;
top: 0;
margin-left: 15px;
right: auto;
}
.ec-headerSearchRole.show .ec-headerSearch .ec-headerSearch__right > .ec-largeModal__close, .ec-headerSearchRole.show .ec-headerSearch .ec-headerSearch__right > .ec-largeModal__close--suggest {
display: block;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch .ec-headerSearch__right > .ec-largeModal__close, .ec-headerSearch .ec-headerSearch__right > .ec-largeModal__close--suggest {
display: none;
}
.ec-headerSearchRole.show .ec-headerSearch .ec-headerSearch__right > .ec-largeModal__close, .ec-headerSearchRole.show .ec-headerSearch .ec-headerSearch__right > .ec-largeModal__close--suggest {
display: none;
}
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch .searchform > .ec-largeModal__header {
display: flex;
}
}
.ec-headerSearch .ec-headerSearch__category {
float: none;
}
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__category {
float: left;
width: 43%;
}
}
.ec-headerSearch .ec-headerSearch__category .ec-select {
overflow: hidden;
width: 100%;
margin: 0;
text-align: center;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select {
width: 100%;
cursor: pointer;
padding: 8px 24px 8px 8px;
text-indent: 0.01px;
text-overflow: ellipsis;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #fff;
}
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__category .ec-select select {
max-width: 165px;
height: 36px;
}
}
.ec-headerSearch .ec-headerSearch__category .ec-select select option {
color: #000;
}
.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
display: none;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
position: relative;
border: 0;
background: #000;
color: #fff;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
border-top-right-radius: inherit;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
position: absolute;
top: 0.8em;
right: 0.4em;
width: 0;
height: 0;
padding: 0;
content: "";
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
pointer-events: none;
}
.ec-headerSearch__recommendKeywords, .ec-headerSearch__suggest {
position: absolute;
width: 100%;
right: 0;
top: calc(100% + 1px);
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__recommendKeywords, .ec-headerSearch__suggest {
right: auto;
}
}
.ec-headerSearch .ec-headerSearch__keyword {
flex: 1;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch .ec-headerSearch__keyword {
position: relative;
border-radius: 5px;
padding: 0 20px 0 10px;
height: 100%;
}
}
.ec-headerSearchRole.show .ec-headerSearch .ec-headerSearch__keyword {
padding: 7px 15px 7px 10px;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearchRole.show .ec-headerSearch .ec-headerSearch__keyword {
padding: 0 20px 0 10px;
}
}
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__keyword .ec-input, .ec-headerSearch .ec-headerSearch__keyword .ec-halfInput, .ec-headerSearch .ec-headerSearch__keyword .ec-numberInput, .ec-headerSearch .ec-headerSearch__keyword .ec-zipInput, .ec-headerSearch .ec-headerSearch__keyword .ec-telInput, .ec-headerSearch .ec-headerSearch__keyword .ec-select, .ec-headerSearch .ec-headerSearch__keyword .ec-birth {
height: 100%;
}
}
.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
width: 100%;
height: 40px;
font-size: 16px;
border: 0 none;
padding: 10px;
box-shadow: none;
background: none;
box-sizing: border-box;
margin-bottom: 0;
background: #efefef;
border-radius: 5px;
}
@media only screen and (min-width: 768px) {
.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
font-size: 18px;
height: 100%;
}
}
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
width: 22px;
height: 22px;
}
.ec-headerSearch #fixed-nav-search-open, .ec-headerSearch #fixed-nav-search-close {
display: none;
background: #0097c6;
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 10px 40px;
height: 100%;
align-items: center;
cursor: pointer;
transition: all 0.5s ease 0s;
}
.ec-headerSearch #fixed-nav-search-open:hover, .ec-headerSearch #fixed-nav-search-close:hover {
opacity: 0.7;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch #fixed-nav-search-open {
display: flex;
}
.ec-headerSearchRole.show .ec-headerSearch #fixed-nav-search-open {
display: none;
}
}
.ec-headerSearch #fixed-nav-search-close {
background: #666666;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch #fixed-nav-search-close {
display: none;
}
.ec-headerSearchRole.show .ec-headerSearch #fixed-nav-search-close {
display: flex;
}
}
.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;
}
.ec-headerSearch__keywordResetBtn {
border: 0;
background: none;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-55%);
display: block;
white-space: nowrap;
z-index: 1;
width: 10px;
height: 10px;
}
.ec-headerSearch__bulkOrder {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
line-height: 1;
padding: 10px 20px;
border-radius: 5px;
background: #000;
color: #fff !important;
width: 100%;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__bulkOrder {
font-size: 18px;
padding: 10px 20px;
}
}
.ec-headerSearch__bulkOrder i {
font-size: 14px;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__bulkOrder i {
font-size: 20px;
}
}
.ec-headerSearch__submit {
display: flex;
align-items: center;
justify-content: center;
background: #23B13A;
font-size: 18px;
letter-spacing: 0.1em;
font-weight: bold;
border-radius: 5px;
height: 100%;
padding: 10px 40px;
border: none;
color: #fff;
}
.ec-headerSearch__submit::-moz-selection {
color: #fff;
}
.ec-headerSearch__submit::selection {
color: #fff;
}
.ec-headerSearch__reset input[type=reset] {
border: none;
text-decoration: underline;
font-size: 14px;
background: none;
}
.ec-headerSearch.detail-open #detail-search-open {
display: none;
}
.ec-headerSearch.detail-open #detail-search-close {
display: flex;
}
.ec-headerSearch #detail-search-open, .ec-headerSearch #detail-search-close {
display: flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
font-size: 16px;
color: #fff;
font-weight: bold;
border-radius: 5px;
}
.ec-headerSearch #detail-search-open i, .ec-headerSearch #detail-search-close i {
font-size: 24px;
margin-right: 5px;
}
.ec-headerSearch #detail-search-open {
background: #0097c6;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch #detail-search-open {
display: none;
}
}
.ec-headerSearch #detail-search-close {
background: #666666;
display: none;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch #detail-search-close {
display: none;
}
}
.ec-headerSearch__currentSearch {
font-size: 14px;
white-space: nowrap;
overflow: auto;
}
.ec-headerSearch__detailSearch__expand {
background: #efefef;
display: none;
border-bottom: 1px solid #efefef;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__detailSearch__expand {
display: block;
background: #fff;
border-bottom: none;
}
}
.ec-headerSearch.detail-open .ec-headerSearch__detailSearch__expand {
display: block;
}
.ec-headerSearch__detailSearch__expandButton {
background: #efefef !important;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__detailSearch__expandButton {
display: none;
}
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__detailSearch__currentSearch {
display: none;
}
}
.ec-headerSearch__bottom {
display: flex;
justify-content: space-between;
background: #efefef;
padding: 15px;
position: sticky;
bottom: 0;
width: 100%;
}
@media only screen and (min-width: 768px) {
.ec-headerSearch__bottom a {
transition: all 0.5s ease 0s;
}
.ec-headerSearch__bottom a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__bottom {
background: #fff;
border-top: 1px solid #efefef;
padding: 20px 0 0 0;
}
}
.ec-headerSearch__bottom__bulkOrder {
display: none;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__bottom__bulkOrder {
display: flex;
align-items: center;
}
}
.ec-headerSearch__bottom__search {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__bottom__search {
justify-content: flex-end;
width: auto;
}
}
.ec-headerSearch__bottom__search .ec-headerSearch__submit {
min-width: 164px;
min-height: 44px;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__bottom__search .ec-headerSearch__submit {
margin-left: 30px;
min-height: 53px;
transition: all 0.5s ease 0s;
}
.ec-headerSearch__bottom__search .ec-headerSearch__submit:hover {
opacity: 0.7;
}
}
.ec-headerSearch__itemList > div, .ec-headerSearch__itemList--checkbox > div, .ec-headerSearch__itemList--radio > div {
display: flex;
flex-wrap: wrap;
}
.ec-headerSearch__itemList label, .ec-headerSearch__itemList--checkbox label, .ec-headerSearch__itemList--radio label {
display: inline-block;
position: relative;
font-size: 1.4rem;
padding: 2px 15px 2px 22px;
margin: 2px 0;
width: 50%;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__itemList label, .ec-headerSearch__itemList--checkbox label, .ec-headerSearch__itemList--radio label {
width: auto;
}
}
.ec-headerSearch__itemList--radio input[type=radio] {
display: none;
}
.ec-headerSearch__itemList--radio input[type=radio] + label:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 3px;
width: 17px;
height: 17px;
border-radius: 50%;
}
.ec-headerSearch__itemList--radio input[type=radio] + label:before {
border: 3px solid #999999;
}
.ec-headerSearch__itemList--radio input[type=radio]:checked + label:before, .ec-headerSearch__itemList--radio input[type=radio].checked + label:before {
border: 3px solid #000;
background: #000;
}
.ec-headerSearch__itemList--checkbox input[type=checkbox] {
display: none;
}
.ec-headerSearch__itemList--checkbox input[type=checkbox] + span:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 3px;
width: 17px;
height: 17px;
}
.ec-headerSearch__itemList--checkbox input[type=checkbox] + span:before {
border: 3px solid #999999;
}
.ec-headerSearch__itemList--checkbox input[type=checkbox]:checked + span:before {
border: 3px solid #000;
background: #000;
}
.ec-headerSearch__itemList__nextList {
display: none;
}
.ec-headerSearch__orderItemList {
padding-top: 5px;
}
.ec-headerSearch__orderItemList > div {
display: flex;
flex-wrap: wrap;
margin: -8px -8px;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__orderItemList > div {
margin: auto;
}
}
.ec-headerSearch__orderItemList label {
display: inline-block;
position: relative;
font-size: 1.4rem;
margin: 8px;
width: calc(50% - 16px);
text-align: center;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__orderItemList label {
width: auto;
min-width: 160px;
margin: 0 15px 0 0;
}
}
.ec-headerSearch__orderItemList input[type=radio] {
display: none;
}
.ec-headerSearch__orderItemList input[type=radio] + label {
padding: 10px;
border-radius: 10px;
border: 2px solid #999999;
background: #fff;
}
.ec-headerSearch__orderItemList input[type=radio] + label span {
position: relative;
font-size: 14px;
}
.ec-headerSearch__orderItemList input[type=radio]:checked + label {
border: 2px solid #000;
background: #efefef;
}
.ec-headerSearch__orderItemList input[type=radio]:checked + label span {
padding-left: 23px;
}
.ec-headerSearch__orderItemList input[type=radio]:checked + label span:before {
content: "✔️";
font-size: 14px;
display: block;
position: absolute;
left: 0;
}
@media only screen and (min-width: 1100px) {
.ec-headerSearch__linkList {
display: none;
}
}
.ec-headerSearch__linkList .ec-headerSearch__bulkOrder {
width: calc(100% - 15px - 15px);
margin: 20px 15px;
}
/*
ヘッダー：カテゴリナビ
ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
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%;
height: auto;
}
.ec-categoryNaviRole html {
box-sizing: border-box;
}
.ec-categoryNaviRole *,
.ec-categoryNaviRole *::before,
.ec-categoryNaviRole *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 768px) {
.ec-categoryNaviRole {
display: block;
width: 100%;
}
.ec-categoryNaviRole a {
color: inherit;
text-decoration: none;
}
.ec-categoryNaviRole a:hover {
text-decoration: none;
}
}
.ec-itemNav {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.ec-itemNav__nav {
display: block;
margin: 0 auto;
padding: 0;
width: auto;
height: auto;
list-style-type: none;
text-align: center;
vertical-align: bottom;
}
@media only screen and (min-width: 768px) {
.ec-itemNav__nav {
display: inline-block;
}
}
.ec-itemNav__nav li {
float: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li {
float: left;
width: auto;
}
}
.ec-itemNav__nav li a {
display: block;
border-bottom: 1px solid #E8E8E8;
margin: 0;
padding: 16px;
height: auto;
color: #2e3233;
font-size: 16px;
font-weight: bold;
line-height: 20px;
text-decoration: none;
text-align: left;
background: #fff;
border-bottom: 1px solid #E8E8E8;
}
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li a {
text-align: center;
border-bottom: none;
}
}
.ec-itemNav__nav li ul {
display: none;
z-index: 0;
margin: 0;
padding: 0;
min-width: 200px;
list-style: none;
position: static;
top: 100%;
left: 0;
}
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li ul {
display: block;
z-index: 100;
position: absolute;
}
}
.ec-itemNav__nav li ul li {
overflow: hidden;
width: 100%;
height: auto;
transition: 0.3s;
}
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li ul li {
overflow: hidden;
height: 0;
}
}
.ec-itemNav__nav li ul li a {
border-bottom: 1px solid #E8E8E8;
padding: 16px 22px 16px 16px;
font-size: 16px;
font-weight: bold;
color: white;
text-align: left;
background: black;
}
.ec-itemNav__nav > li:hover > a {
background: #fafafa;
}
.ec-itemNav__nav > li:hover li:hover > a {
background: #333;
}
@media only screen and (min-width: 768px) {
.ec-itemNav__nav > li:hover > ul > li {
overflow: visible;
height: auto;
}
}
.ec-itemNav__nav li ul li ul {
top: 0;
left: 100%;
width: auto;
}
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li ul li ul:before {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 12px;
color: white;
position: absolute;
top: 19px;
right: auto;
left: -20px;
}
}
@media only screen and (min-width: 768px) {
.ec-itemNav__nav li ul li:hover > ul > li {
overflow: visible;
height: auto;
width: auto;
}
}
.ec-itemNav__nav li ul li ul li a {
background: #7D7D7D;
}
.ec-itemNav__nav li:hover ul li ul li a:hover {
background: #333;
}
/*
ヘッダー：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;
}
@media only screen and (min-width: 768px) {
.ec-drawerRole {
display: none;
}
}
.ec-drawerRole .ec-headerSearchArea {
padding: 20px 10px;
width: 100%;
background: #F8F8F8;
}
.ec-drawerRole .ec-headerSearch {
padding: 16px 8px 26px;
background: #EBEBEB;
color: #636378;
}
.ec-drawerRole .ec-headerSearch select {
width: 100% !important;
}
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding: 1em 10px;
font-size: 16px;
font-weight: bold;
color: black;
background: #F8F8F8;
}
.ec-drawerRole .ec-headerCategoryArea p {
margin-top: 0;
margin-bottom: 0;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #ccc;
color: black;
font-weight: normal;
background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
border-bottom: 1px solid #ccc;
padding-left: 20px;
font-weight: normal;
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover > a {
background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover li:hover > a {
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
padding-left: 40px;
color: black;
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li:hover ul li ul li a:hover {
background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li ul li a {
padding-left: 60px;
font-weight: normal;
}
.ec-drawerRole .ec-headerLinkArea {
background: 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%);
}
@media only screen and (min-width: 768px) {
.ec-drawerRoleClose {
display: none;
}
}
.ec-drawerRole.is_active {
display: block;
transform: translateX(0);
transition: all 0.3s;
z-index: 100000;
}
@media only screen and (min-width: 768px) {
.ec-drawerRole.is_active {
display: none;
}
}
.ec-drawerRoleClose.is_active {
display: inline-block;
transition: all 0.3s;
}
@media only screen and (min-width: 768px) {
.ec-drawerRoleClose.is_active {
display: none;
}
}
.ec-overlayRole {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
opacity: 0;
background: transparent;
transform: translateX(0);
transition: all 0.3s;
visibility: hidden;
}
@media only screen and (min-width: 768px) {
.ec-overlayRole {
display: none;
}
}
.have_curtain {
overflow-y: hidden;
position: fixed;
width: 100%;
}
@media only screen and (min-width: 1100px) {
.have_curtain {
position: revert;
}
}
.have_curtain .ec-overlayRole {
display: block;
opacity: 1;
background: rgba(0, 0, 0, 0.3);
visibility: visible;
z-index: 1;
}
/*
ヘッダー：test
test
Markup:
span.ec-itemAccordionParent test1
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test2
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test3
ul.ec-itemNavAccordion
li.ec-itemNavAccordion__item
a(href='') test4
Styleguide 11.2.7
*/
.ec-itemNavAccordion {
display: none;
}
.ec-maintenanceAlert {
background: steelblue;
height: 50px;
position: fixed;
top: 0;
width: 100%;
color: white;
z-index: 9999;
display: flex;
font-weight: bold;
}
.ec-maintenanceAlert > * {
margin: auto;
}
.ec-maintenanceAlert .ec-maintenanceAlert__icon {
display: inline-block;
margin-right: 1rem;
width: 20px;
height: 20px;
color: #fff;
fill: #fff;
vertical-align: top;
}
.ec-maintenanceAlert + * {
margin-top: 50px;
}
.ec-headerCommonNav {
display: flex;
}
.ec-headerSearch .ec-headerCommonNav {
flex-wrap: wrap;
border-bottom: 1px solid #efefef;
}
.ec-headerCommonNav .ec-headerCommonNav__item {
margin: 0 15px;
display: inline-block;
}
@media only screen and (min-width: 768px) {
.ec-headerCommonNav .ec-headerCommonNav__item a {
transition: all 0.5s ease 0s;
}
.ec-headerCommonNav .ec-headerCommonNav__item a:hover {
opacity: 0.7;
}
}
.ec-headerCommonNav .ec-headerCommonNav__item a {
color: inherit;
text-decoration: none;
}
.ec-headerCommonNav .ec-headerCommonNav__item a:hover {
text-decoration: none;
}
.ec-headerSearch .ec-headerCommonNav .ec-headerCommonNav__item {
margin: 0;
width: 50%;
}
.ec-headerSearch .ec-headerCommonNav .ec-headerCommonNav__item:nth-child(-n+2) {
border-bottom: 1px solid #efefef;
}
.ec-headerSearch .ec-headerCommonNav .ec-headerCommonNav__item:nth-child(2n+1) {
border-right: 1px solid #efefef;
}
.ec-headerCommonNav .ec-headerCommonNav__item__link {
display: flex;
flex-wrap: wrap;
align-items: center;
cursor: pointer;
}
.ec-headerCommonNav .ec-headerCommonNav__item__link:hover {
opacity: 0.7;
}
.ec-headerSearch .ec-headerCommonNav .ec-headerCommonNav__item__link {
padding: 20px 15px;
}
.ec-headerCommonNav .ec-headerCommonNav__itemIcon {
display: block;
font-size: 20px;
line-height: 1;
width: 20px;
}
.ec-headerCommonNav .ec-headerCommonNav__itemLink {
display: block;
font-size: 14px;
line-height: 1;
font-weight: bold;
padding-left: 5px;
flex: 1;
}
@media only screen and (min-width: 768px) {
.ec-headerCommonNav .ec-headerCommonNav__itemLink {
font-size: 16px;
color: #333333;
}
}
.ec-headerSuggest, .ec-headerSuggest--list, .ec-headerSuggest--list-history, .ec-headerSuggest--list-keyword, .ec-headerSuggest--list-category, .ec-headerSuggest--list-product, .ec-headerSuggest--list-catalogCode, .ec-headerSuggest--tags {
list-style: none;
margin: 0;
padding: 0;
}
.ec-headerSuggest a, .ec-headerSuggest--list a, .ec-headerSuggest--list-history a, .ec-headerSuggest--list-keyword a, .ec-headerSuggest--list-category a, .ec-headerSuggest--list-product a, .ec-headerSuggest--list-catalogCode a, .ec-headerSuggest--tags a {
color: inherit;
text-decoration: none;
}
.ec-headerSuggest a:hover, .ec-headerSuggest--list a:hover, .ec-headerSuggest--list-history a:hover, .ec-headerSuggest--list-keyword a:hover, .ec-headerSuggest--list-category a:hover, .ec-headerSuggest--list-product a:hover, .ec-headerSuggest--list-catalogCode a:hover, .ec-headerSuggest--tags a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-headerSuggest a, .ec-headerSuggest--list a, .ec-headerSuggest--list-history a, .ec-headerSuggest--list-keyword a, .ec-headerSuggest--list-category a, .ec-headerSuggest--list-product a, .ec-headerSuggest--list-catalogCode a, .ec-headerSuggest--tags a {
transition: all 0.5s ease 0s;
}
.ec-headerSuggest a:hover, .ec-headerSuggest--list a:hover, .ec-headerSuggest--list-history a:hover, .ec-headerSuggest--list-keyword a:hover, .ec-headerSuggest--list-category a:hover, .ec-headerSuggest--list-product a:hover, .ec-headerSuggest--list-catalogCode a:hover, .ec-headerSuggest--tags a:hover {
opacity: 0.7;
}
}
.ec-headerSuggest--tags li {
display: inline-block;
font-size: 0;
margin-right: 10px;
margin-bottom: 10px;
}
.ec-headerSuggest--tags li a {
display: block;
padding: 8px 10px;
border: 1px solid #000;
font-size: 1.2rem;
}
@media only screen and (min-width: 1100px) {
.ec-headerSuggest--tags li a {
font-size: 1.4rem;
}
}
.ec-headerSuggest--tags li a:focus, .ec-headerSuggest--tags li a:focus-visible {
outline: #337ab7 auto 1px;
outline-offset: 1px;
}
.ec-headerSuggest--list li a, .ec-headerSuggest--list-history li a, .ec-headerSuggest--list-keyword li a, .ec-headerSuggest--list-category li a, .ec-headerSuggest--list-product li a, .ec-headerSuggest--list-catalogCode li a {
display: inline-block;
width: 100%;
padding: 15px 0;
font-size: 1.4rem;
}
@media only screen and (min-width: 1100px) {
.ec-headerSuggest--list li a, .ec-headerSuggest--list-history li a, .ec-headerSuggest--list-keyword li a, .ec-headerSuggest--list-category li a, .ec-headerSuggest--list-product li a, .ec-headerSuggest--list-catalogCode li a {
font-size: 1.6rem;
}
}
.ec-headerSuggest--list-history a:focus, .ec-headerSuggest--list-history a:focus-visible, .ec-headerSuggest--list-keyword a:focus, .ec-headerSuggest--list-keyword a:focus-visible, .ec-headerSuggest--list-category a:focus, .ec-headerSuggest--list-category a:focus-visible, .ec-headerSuggest--list-product a:focus, .ec-headerSuggest--list-product a:focus-visible, .ec-headerSuggest--list-catalogCode a:focus, .ec-headerSuggest--list-catalogCode a:focus-visible, .ec-headerSuggest--list-article a:focus, .ec-headerSuggest--list-article a:focus-visible {
outline: #337ab7 auto 1px;
outline-offset: 1px;
}
.ec-headerSuggest--list-history li, .ec-headerSuggest--list-keyword li {
display: flex;
justify-content: space-between;
}
.ec-headerSuggest--list-keyword {
margin-top: -15px;
}
.ec-headerSuggest--list-product li a, .ec-headerSuggest--list-catalogCode li a {
display: flex;
align-items: center;
padding: 6px 0;
}
.ec-headerSuggest--list-product li a img, .ec-headerSuggest--list-catalogCode li a img {
width: 40px;
height: 40px;
margin-right: 10px;
}
@media only screen and (min-width: 1100px) {
.ec-headerSuggest--list-product li a img, .ec-headerSuggest--list-catalogCode li a img {
margin-right: 15px;
}
}
.ec-headerSuggest--list-article li {
list-style: initial;
}
.ec-headerSuggest__matchWord {
font-weight: bold;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
フッター
全ページで使用されるフッターのプロジェクトコンポーネントです。
ex [トップページ フッター](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerRole
Styleguide 11.3
*/
.ec-footerRole {
padding-bottom: 100px;
}
@media only screen and (min-width: 768px) {
.ec-footerRole {
background: #fbfbfb;
}
}
@media only screen and (min-width: 1100px) {
.ec-footerRole {
padding-bottom: 50px;
}
}
.ec-footerRole .ec-footerRole__inner {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
display: flex;
flex-direction: column;
font-size: 1.4rem;
}
.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%;
height: auto;
}
.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;
}
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-footerRole__inner {
flex-direction: row;
justify-content: space-between;
}
}
.ec-footerRole__calendar {
position: relative;
padding-top: 51px;
}
@media only screen and (min-width: 768px) {
.ec-footerRole__calendar {
width: 50%;
}
}
@media only screen and (min-width: 1100px) {
.ec-footerRole__calendar {
width: calc(50% - 50px);
}
}
.ec-footerRole__calendar:before {
content: "";
display: block;
width: calc(100% + 2 * 15px);
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: -15px;
}
@media only screen and (min-width: 768px) {
.ec-footerRole__calendar:before {
display: none;
}
}
.ec-footerRole__navi {
position: relative;
padding-top: 51px;
}
@media only screen and (min-width: 768px) {
.ec-footerRole__navi {
padding-bottom: 30px;
position: relative;
width: calc(50% - 60px);
margin-left: auto;
}
}
@media only screen and (min-width: 1100px) {
.ec-footerRole__navi {
width: calc(50% - 50px);
}
}
.ec-footerRole__navi:before {
content: "";
display: block;
width: calc(100% + 2 * 15px);
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: -15px;
}
@media only screen and (min-width: 768px) {
.ec-footerRole__navi:before {
width: 1px;
height: calc(100% - 50px);
top: 50px;
left: -30px;
}
}
@media only screen and (min-width: 1100px) {
.ec-footerRole__navi:before {
left: -50px;
}
}
.ec-footerRole .ec-footerRole__commonNav {
position: fixed;
z-index: 1;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 2 * 15px);
max-width: 345px;
background: #fff;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
border-radius: 20px;
padding: 5px 17px;
bottom: 10px;
}
@media only screen and (min-width: 768px) {
.ec-footerRole .ec-footerRole__commonNav {
width: -moz-fit-content;
width: fit-content;
max-width: 420px;
}
}
@media only screen and (min-width: 1100px) {
.ec-footerRole .ec-footerRole__commonNav {
display: none;
}
}
.ec-footerRole__copyright {
font-size: 1rem;
color: #999999;
}
.ec-footerHeading {
margin-top: 0;
margin-bottom: 15px;
}
.ec-footerHeading p {
margin-top: -3px;
margin-bottom: -2px;
font-weight: bold;
font-size: 2.4rem;
}
@media only screen and (min-width: 768px) {
.ec-footerHeading p {
font-size: 2rem;
}
}
/*
フッターナビ
フッタープロジェクトで使用するナビゲーション用のコンポーネントです。
Markup:
include /assets/tmpl/elements/11.8.footer.pug
+ec-footerNav
sg-wrapper:
Styleguide 11.3.1
*/
.ec-footerNavi {
margin-bottom: 50px;
padding: 0;
list-style: none;
}
.ec-footerNavi__group {
padding: 0;
margin-bottom: 28px;
}
.ec-footerNavi__heading {
margin-top: 0;
margin-bottom: 10px;
}
.ec-footerNavi__heading p {
margin-top: -3px;
margin-bottom: -2px;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-footerNavi__heading p {
font-size: 2rem;
}
}
.ec-footerNavi__linkList, .ec-footerNavi__linkList--other, .ec-footerNavi__linkList--note {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: -5px -10px;
padding: 0;
}
.ec-footerNavi__linkList--other {
margin: -5px -7px;
}
.ec-footerNavi__link a {
display: block;
padding: 5px 10px;
color: currentColor;
font-size: 1.2rem;
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-footerNavi__link a {
font-size: 1.4rem;
}
}
.ec-footerNavi__link a:hover {
color: currentColor;
text-decoration: underline;
text-underline-offset: 2px;
}
@media only screen and (min-width: 768px) {
.ec-footerNavi__link a:hover a {
transition: all 0.5s ease 0s;
}
.ec-footerNavi__link a:hover a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-footerNavi__linkList--note .ec-footerNavi__link a {
transition: all 0.5s ease 0s;
}
.ec-footerNavi__linkList--note .ec-footerNavi__link a:hover {
opacity: 0.7;
}
}
.ec-footerNavi__linkList--note .ec-footerNavi__link a {
font-size: 1.4rem;
font-weight: bold;
text-decoration: underline;
text-underline-offset: 2px;
line-height: 0.5;
}
@media only screen and (min-width: 768px) {
.ec-footerNavi__linkList--note .ec-footerNavi__link a {
font-size: 2rem;
}
}
.ec-footerNavi__linkList--other .ec-footerNavi__link {
position: relative;
}
.ec-footerNavi__linkList--other .ec-footerNavi__link:not(:last-child):before {
content: "/";
position: absolute;
top: 50%;
right: -5px;
transform: translate(-50%, -50%);
font-size: 1rem !important;
}
.ec-footerNavi__linkList--other .ec-footerNavi__link a {
padding: 5px 7px;
font-size: 1rem !important;
}
.ec-footerCalendar {
display: flex;
flex-direction: column;
margin-bottom: 50px;
}
@media only screen and (min-width: 768px) {
.ec-footerCalendar {
display: block;
margin-bottom: 0;
}
}
.ec-footerCalendar .ec-footerHeading {
order: 1;
}
@media only screen and (min-width: 768px) {
.ec-footerCalendar .ec-footerHeading {
float: left;
clear: left;
}
}
.ec-footerCalendar__date {
order: 2;
margin-bottom: 24px;
}
@media only screen and (min-width: 768px) {
.ec-footerCalendar__date {
float: left;
clear: left;
width: 140px;
}
}
.ec-footerCalendar__date span {
display: inline-block;
margin-left: 10px;
font-size: 1.6rem;
}
@media only screen and (min-width: 768px) {
.ec-footerCalendar__date span {
width: 100%;
margin-left: 0;
}
}
.ec-footerCalendar__legend {
order: 4;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 210px;
margin: 0 auto 50px;
padding: 1.4rem 0;
border-radius: 5px;
background: #efefef;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-footerCalendar__legend {
float: left;
clear: left;
width: 140px;
margin: 0;
}
}
@media only screen and (min-width: 1100px) {
.ec-footerCalendar__legend {
width: 180px;
}
}
.ec-footerCalendar__legendShipping, .ec-footerCalendar__legendClosing {
display: flex;
align-items: center;
line-height: 1;
}
.ec-footerCalendar__legendShipping:before, .ec-footerCalendar__legendClosing:before {
content: "";
width: 1.3rem;
height: 1.3rem;
margin-right: 0.8rem;
border-radius: 99px;
}
.ec-footerCalendar__legendShipping:before {
background: #469bff;
}
.ec-footerCalendar__legendClosing:before {
background: #FFA0A0;
}
.ec-footerCalendar__calendar {
order: 3;
margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
.ec-footerCalendar__calendar {
float: right;
width: calc(100% - 160px);
}
}
@media only screen and (min-width: 1100px) {
.ec-footerCalendar__calendar {
width: calc(100% - 220px);
}
}
.ec-footerCalendar__international {
order: 5;
padding-left: 15px;
border-left: 2px solid #efefef;
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
.ec-footerCalendar__international {
float: left;
clear: both;
width: 100%;
font-size: 1.2rem;
}
}
.ec-footerCalendar__international .ec-font-bold {
margin-bottom: 10px;
}
.ec-footerCalendar__international span {
display: inline-block;
width: 100%;
}
@media only screen and (min-width: 768px) {
.ec-footerCalendar__international span {
width: auto;
margin-left: 16px;
}
}
/**
メディアクエリ
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 {
min-height: 100vw;
padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
.ec-sliderRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
min-height: 369px;
}
.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%;
height: auto;
}
.ec-sliderRole html {
box-sizing: border-box;
}
.ec-sliderRole *,
.ec-sliderRole *::before,
.ec-sliderRole *::after {
box-sizing: inherit;
}
}
.main_visual {
width: 100%;
margin-bottom: 50px !important;
}
@media only screen and (min-width: 768px) {
.main_visual {
max-width: 1000px;
margin-bottom: 100px !important;
margin-inline: auto;
}
}
.main_visual .slick-slide {
transition: all 0.5s;
opacity: 0;
}
.main_visual .slick-current {
opacity: 1;
}
.main_visual .item {
position: relative;
}
@media only screen and (min-width: 768px) {
.main_visual .item a {
transition: all 0.5s ease 0s;
}
.main_visual .item a:hover {
opacity: 0.7;
}
}
.main_visual .item a {
display: block;
color: currentColor;
}
.main_visual .item_link--text {
width: -moz-fit-content;
width: fit-content;
}
.main_visual .item img {
width: 100%;
aspect-ratio: 1/1;
margin-bottom: 50px;
-o-object-fit: contain;
object-fit: contain;
}
@media only screen and (min-width: 768px) {
.main_visual .item img {
aspect-ratio: 2/1;
margin-bottom: 65px;
}
}
.main_visual .item_text {
padding: 0 15px;
line-height: 1.7;
}
@media only screen and (min-width: 768px) {
.main_visual .item_text {
padding: 0;
}
}
.main_visual .item_title {
margin-bottom: 10px;
font-size: 1.6rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.main_visual .item_title {
font-size: 2rem;
}
}
.main_visual .item_desc {
text-align: justify;
word-break: break-all;
font-size: 1.2rem;
font-weight: 300;
}
@media only screen and (min-width: 768px) {
.main_visual .item_desc {
font-size: 1.6rem;
}
}
.main_visual .item:not(:first-child) {
display: none;
}
.main_visual .slick-initialized .item {
display: block !important;
}
.ec-sliderItemRole {
margin-bottom: 30px;
position: sticky;
top: 103px;
}
.ec-sliderItemRole__main {
position: relative;
}
.ec-sliderItemRole ul {
padding: 0;
list-style: none;
}
.ec-sliderItemRole img {
width: 100%;
height: auto;
aspect-ratio: 1/1;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
}
.ec-sliderItemRole .item_visual {
margin-bottom: 10px;
}
@media only screen and (min-width: 1100px) {
.ec-sliderItemRole .item_visual {
margin-bottom: 25px;
}
}
.ec-sliderItemRole .slide-item {
aspect-ratio: 1/1;
}
.ec-sliderItemRole .slide-item:not(:first-child) {
display: none;
}
.ec-sliderItemRole .item_nav {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: 0 calc(-15px);
opacity: 0;
}
@media only screen and (min-width: 1100px) {
.ec-sliderItemRole .item_nav {
width: auto;
margin-inline: -5px;
}
}
.ec-sliderItemRole .item_nav.slick-initialized {
opacity: 1;
}
.ec-sliderItemRole .item_nav .slick-list {
padding-inline: calc(15px - 5px) 14%;
}
@media only screen and (min-width: 1100px) {
.ec-sliderItemRole .item_nav .slick-list {
padding: 0;
width: 100%;
}
}
@media only screen and (min-width: 1100px) {
.ec-sliderItemRole .item_nav .slick-track {
width: 100% !important;
transform: unset !important;
}
}
.ec-sliderItemRole .item_nav .slick-slide {
position: relative;
}
@media only screen and (min-width: 1100px) {
.ec-sliderItemRole .item_nav .slick-slide {
width: 14.2857142857% !important;
}
}
.ec-sliderItemRole .item_nav .slick-current:after {
content: "";
width: calc(100% - 8px);
aspect-ratio: 1/1;
border: 1px solid #469bff;
position: absolute;
top: 0;
left: 4px;
z-index: 1;
}
.ec-sliderItemRole .slideThumb {
padding: 1px 5px;
cursor: pointer;
}
@media only screen and (min-width: 1100px) {
.ec-sliderItemRole .slideThumb {
margin-bottom: 5px;
}
}
.ec-sliderItemRole .slideThumb:focus {
outline: none;
}
.ec-sliderItemRole .slideThumb:hover {
opacity: 1;
}
.leaflet-pane--stay {
transform: translate3d(0px, 0px, 0px) !important;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
アイキャッチ
トップページ アイキャッチ部に関する Project コンポーネントを定義します。
ex [トップページスライダー直下 アイキャッチ部](http://demo3.ec-cube.net/)
Markup:
include /assets/tmpl/elements/12.2.eyecatch.pug
+ec-eyecatchRole
Styleguide 12.2
*/
.ec-eyecatchRole {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
/* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */
}
@media only screen and (min-width: 768px) {
.ec-eyecatchRole {
flex-wrap: nowrap;
}
}
.ec-eyecatchRole .ec-eyecatchRole__image {
display: block;
margin-bottom: 40px;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__image {
order: 2;
}
}
.ec-eyecatchRole .ec-eyecatchRole__intro {
color: black;
}
@media only screen and (min-width: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__intro {
padding-right: 5%;
order: 1;
}
}
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-bottom: 0.8em;
font-size: 16px;
font-weight: normal;
}
@media only screen and (min-width: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
margin-top: 45px;
}
}
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: 0.8em;
font-size: 24px;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
margin-bottom: 1em;
font-size: 26px;
}
}
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
margin-bottom: 20px;
font-size: 16px;
line-height: 2;
}
@media only screen and (min-width: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
margin-bottom: 30px;
}
}
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 20px;
font-size: 16px;
line-height: 2;
}
@media only screen and (min-width: 768px) {
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
margin-bottom: 30px;
}
}
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
ボタン
トップページで使用されているボタンのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.3
*/
/*
通常ボタン
インラインの要素としてボタンを定義出来ます。
Markup:
.ec-inlineBtn--top more
Styleguide 12.3.1
*/
.ec-inlineBtn--top {
display: inline-block;
margin-bottom: 0;
padding: 10px 16px;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
font-size: 1.8rem;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-decoration: none;
transition: all 0.5s ease 0s;
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 {
opacity: 0.7;
text-decoration: none;
color: white;
}
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
outline: 0;
background-image: none;
}
.ec-inlineBtn--top.disabled, .ec-inlineBtn--top[disabled], fieldset[disabled] .ec-inlineBtn--top {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
}
.ec-inlineBtn--top .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;
padding: 10px 16px;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
font-size: 1.8rem;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-decoration: none;
transition: all 0.5s ease 0s;
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 {
opacity: 0.7;
text-decoration: none;
color: white;
}
.ec-blockBtn--top:active, .ec-blockBtn--top.active {
outline: 0;
background-image: none;
}
.ec-blockBtn--top.disabled, .ec-blockBtn--top[disabled], fieldset[disabled] .ec-blockBtn--top {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
}
.ec-blockBtn--top .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
@media only screen and (min-width: 768px) {
.ec-blockBtn--top {
max-width: 260px;
}
}
/*
見出し
トップページで使用されている見出しのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.4
*/
/*
横並び見出し
横並びの見出しです。
Markup:
.ec-secHeading
span.ec-secHeading__en TOPIC
span.ec-secHeading__line |
span.ec-secHeading__ja 特集
Styleguide 12.4.1
*/
.ec-secHeading {
margin-bottom: 15px;
color: black;
}
.ec-secHeading .ec-secHeading__en {
font-size: 18px;
font-weight: bold;
letter-spacing: 0.2em;
}
.ec-secHeading .ec-secHeading__line {
display: inline-block;
margin: 0 20px;
width: 1px;
height: 14px;
background: black;
}
.ec-secHeading .ec-secHeading__ja {
font-size: 12px;
font-weight: normal;
letter-spacing: 0.15em;
vertical-align: 2px;
}
/*
縦並び見出し
縦並びの見出しです。
Markup:
.ec-secHeading--tandem
span.ec-secHeading__en TOPIC
span.ec-secHeading__line |
span.ec-secHeading__ja 特集
Styleguide 12.4.2
*/
.ec-secHeading--tandem {
margin-bottom: 15px;
color: black;
text-align: center;
}
.ec-secHeading--tandem .ec-secHeading__en {
display: block;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.2em;
}
.ec-secHeading--tandem .ec-secHeading__line {
display: block;
margin: 13px auto;
width: 20px;
height: 1px;
background: black;
}
.ec-secHeading--tandem .ec-secHeading__ja {
display: block;
margin-bottom: 30px;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.15em;
vertical-align: 2px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
トピック（アイテム2列）
トップページで使用されているトピックのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.5.1
*/
.ec-topicRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
position: relative;
padding-top: 50px;
margin-bottom: 50px;
}
.ec-topicRole:after {
content: " ";
display: table;
}
.ec-topicRole:after {
clear: both;
}
.ec-topicRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-topicRole img {
max-width: 100%;
height: auto;
}
.ec-topicRole html {
box-sizing: border-box;
}
.ec-topicRole *,
.ec-topicRole *::before,
.ec-topicRole *::after {
box-sizing: inherit;
}
.ec-topicRole:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: 0;
}
@media only screen and (min-width: 768px) {
.ec-topicRole:before {
width: calc(100% - 15px * 2);
left: 15px;
}
}
.ec-topicRole:last-child {
margin-bottom: 0;
}
.ec-topicRole .ec-topicRole__list {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 0 calc(15px / -2) calc(15px * -2);
padding: 0;
}
@media only screen and (min-width: 768px) {
.ec-topicRole .ec-topicRole__list {
margin-inline: -8px;
}
}
.ec-topicRole .ec-topicRole__listItem {
margin-bottom: calc(15px * 2);
padding: 0 calc(15px / 2);
width: 50%;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 768px) {
.ec-topicRole .ec-topicRole__listItem a {
transition: all 0.5s ease 0s;
}
.ec-topicRole .ec-topicRole__listItem a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-topicRole .ec-topicRole__listItem {
width: 25%;
padding-inline: 8px;
}
}
.ec-topicRole .ec-topicRole__listItem a {
display: block;
color: currentColor;
}
.ec-topicRole .ec-topicRole__listItem img {
width: 100%;
margin-bottom: 15px;
}
.ec-topicRole .ec-topicRole__listItem__noImage {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 1.5/1;
background: #d9d9d9;
text-align: center;
font-size: 12px;
color: #666666;
padding: 3px;
margin-bottom: 15px;
}
.ec-topicRole .ec-topicRole__listItemTitle {
margin-bottom: 10px;
font-size: 1.2rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-topicRole .ec-topicRole__listItemTitle {
font-size: 1.6rem;
}
}
.ec-topicRole__listItemDesc {
font-size: 1.4rem;
line-height: 1.7;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カテゴリ（アイテム4列 スマホの時は2列）
トップページで使用されているアイテムリストのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.6.1
*/
.ec-newItemRole .ec-newItemRole__list {
display: flex;
flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
.ec-newItemRole .ec-newItemRole__list {
flex-wrap: nowrap;
}
}
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 4%;
width: 48%;
height: auto;
}
.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
color: black;
}
@media only screen and (min-width: 768px) {
.ec-newItemRole .ec-newItemRole__listItem {
margin-bottom: 15px;
width: 25%;
}
.ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
margin-right: 30px;
}
}
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 4%;
}
@media only screen and (min-width: 768px) {
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
margin-right: 30px;
}
}
.ec-newItemRole .ec-newItemRole__listItemHeading {
margin-top: calc(45% - 20px);
}
.ec-newItemRole .ec-newItemRole__listItemTitle {
margin: 8px 0;
font-size: 14px;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-newItemRole .ec-newItemRole__listItemTitle {
margin: 20px 0 10px;
}
}
.ec-newItemRole .ec-newItemRole__listItemPrice {
font-size: 12px;
}
.tabs {
position: relative;
width: 100%;
}
@media only screen and (min-width: 768px) {
.ec-blockHeading--large ~ .tabs {
margin-top: -65px;
}
}
.tab-list {
list-style: none;
display: flex;
width: 100%;
max-width: 1030px;
margin: 0 auto 24px;
padding: 0 15px;
}
@media only screen and (min-width: 768px) {
.tab-list {
margin-bottom: 50px;
padding-inline: 0;
}
}
.tab-list li {
width: 33.3333333333%;
padding: 0 10px;
}
@media only screen and (min-width: 768px) {
.tab-list li {
padding-inline: 15px;
}
}
.tab {
width: 100%;
height: 37px;
border-radius: 5px;
border: 5px solid #efefef;
background: #fff;
position: relative;
font-size: 1.6rem;
font-weight: bold;
transition: all 0.5s ease 0s;
}
@media only screen and (min-width: 768px) {
.tab {
height: 63px;
border-radius: 0;
border: none;
font-size: 2.4rem;
}
.tab:before {
content: "";
display: block;
width: 100%;
height: 5px;
border-radius: 99px;
background: #efefef;
position: absolute;
bottom: 0;
left: 0;
}
.tab:hover {
background: #efefef;
}
.tab:hover:before {
background: #469bff;
}
}
.tab[aria-selected=true] {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
@media only screen and (min-width: 768px) {
.tab[aria-selected=true] {
filter: none;
}
.tab[aria-selected=true]:before {
background: #469bff;
}
}
.tab-panel {
width: 100%;
position: absolute;
top: 61px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
opacity: 1;
}
@media only screen and (min-width: 768px) {
.tab-panel {
top: 113px;
}
}
.tab-panel[aria-hidden=true] {
z-index: -1;
opacity: 0;
pointer-events: none;
}
#panel-1 {
position: static !important;
transform: none !important;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カテゴリ（アイテム3列）
トップページで使用されているカテゴリのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.7.1
*/
.ec-categoryRole {
position: relative;
padding-top: 50px;
margin-bottom: 50px;
margin-bottom: -1px;
padding-bottom: 0;
}
.ec-categoryRole:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: 0;
}
@media only screen and (min-width: 768px) {
.ec-categoryRole:before {
width: calc(100% - 15px * 2);
left: 15px;
}
}
.ec-categoryRole:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
.ec-categoryRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
margin-bottom: 50px;
}
.ec-categoryRole:after {
content: " ";
display: table;
}
.ec-categoryRole:after {
clear: both;
}
.ec-categoryRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-categoryRole img {
max-width: 100%;
height: auto;
}
.ec-categoryRole html {
box-sizing: border-box;
}
.ec-categoryRole *,
.ec-categoryRole *::before,
.ec-categoryRole *::after {
box-sizing: inherit;
}
}
.ec-categoryRole .ec-blockHeading {
padding-inline: 15px;
}
@media only screen and (min-width: 768px) {
.ec-categoryRole .ec-blockHeading {
padding-inline: 0;
}
}
.ec-categoryRole .ec-categoryRole__list {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-categoryRole .ec-categoryRole__list {
padding: 0 15px;
}
}
.ec-categoryRole .ec-categoryRole__list:first-of-type:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: 0;
}
@media only screen and (min-width: 768px) {
.ec-categoryRole .ec-categoryRole__list:first-of-type:before {
width: calc(100% - 15px * 2);
left: 15px;
}
}
@media only screen and (min-width: 768px) {
.ec-categoryRole .ec-categoryRole__list:after {
content: "";
display: block;
width: calc(100% - 15px * 2);
height: 1px;
background: #efefef;
position: absolute;
bottom: 0;
left: 15px;
}
}
.ec-categoryRole .ec-categoryRole__listItem {
margin: 0;
padding: 0;
width: 50%;
height: 57px;
border-bottom: 1px solid #efefef;
position: relative;
}
.ec-categoryRole .ec-categoryRole__listItem:nth-child(2n+1):before {
content: "";
display: block;
width: 1px;
height: 100%;
background: #efefef;
position: absolute;
top: 0;
right: 0;
}
@media only screen and (min-width: 768px) {
.ec-categoryRole .ec-categoryRole__listItem {
width: 25%;
}
.ec-categoryRole .ec-categoryRole__listItem:not(:nth-child(4n)):before {
content: "";
display: block;
width: 1px;
height: 100%;
background: #efefef;
position: absolute;
top: 0;
right: 0;
}
}
.ec-categoryRole .ec-categoryRole__listItem a {
display: flex;
justify-content: start;
align-items: center;
height: 100%;
padding: 0 32px 0 15px;
color: currentColor;
font-size: 1.4rem;
transition: all 0.5s ease 0s;
}
@media only screen and (min-width: 768px) {
.ec-categoryRole .ec-categoryRole__listItem a {
font-size: 1.6rem;
font-weight: bold;
}
}
.ec-categoryRole .ec-categoryRole__listItem a:hover {
background: #efefef;
}
.ec-categoryRole .ec-categoryRole__listItem a:after {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
position: absolute;
top: 50%;
right: 25px;
transform: translateY(-50%) rotate(45deg);
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
見出し
トップページで使用されている新着情報のスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.8.1
*/
.ec-newsRole {
padding: 40px 0 0;
}
@media only screen and (min-width: 768px) {
.ec-newsRole {
padding: 60px 0 0;
}
}
.ec-newsRole .ec-newsRole__news {
box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__news {
border: 16px solid #F8F8F8;
padding: 20px 30px;
}
}
.ec-newsRole .ec-newsRole__newsItem {
width: 100%;
}
.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
border-bottom: 1px solid #ccc;
}
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
margin-bottom: 0;
}
}
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsItem {
padding: 20px 0;
}
}
.ec-newsRole .ec-newsRole__newsHeading {
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsHeading {
display: flex;
}
}
.ec-newsRole .ec-newsRole__newsDate {
display: block;
margin: 15px 0 5px;
font-size: 12px;
color: black;
}
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsDate {
display: inline-block;
margin: 0;
min-width: 120px;
font-size: 14px;
}
}
.ec-newsRole .ec-newsRole__newsColumn {
display: flex;
}
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsColumn {
display: inline-flex;
min-width: calc(100% - 120px);
}
}
.ec-newsRole .ec-newsRole__newsTitle {
display: inline-block;
margin-bottom: 10px;
width: 90%;
font-size: 14px;
font-weight: bold;
color: #7D7D7D;
line-height: 1.6;
}
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsTitle {
margin-bottom: 0;
line-height: 1.8;
}
}
.ec-newsRole .ec-newsRole__newsClose {
display: inline-block;
width: 10%;
position: relative;
}
.ec-newsRole .ec-newsRole__newsCloseBtn {
display: inline-block;
margin-left: auto;
border-radius: 50%;
width: 20px;
height: 20px;
color: white;
text-align: center;
background: black;
cursor: pointer;
position: absolute;
right: 5px;
}
.ec-newsRole .ec-newsRole__newsDescription {
display: none;
margin: 0 0 10px;
font-size: 14px;
line-height: 1.4;
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.ec-newsRole .ec-newsRole__newsDescription {
margin: 20px 0 0;
line-height: 1.8;
}
}
.ec-newsRole .ec-newsRole__newsDescription a {
color: #0092C4;
}
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
margin: 0 0 10px;
}
@media only screen and (min-width: 768px) {
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
margin: 20px 0 0;
}
}
.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
display: inline-block;
transform: rotateX(180deg) translateY(2px);
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
見出し
トップページで使用されているカレンダーのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)
Markup:
sg-wrapper:
Styleguide 12.9.1
*/
/* 背景や文字の色調整 */
.ec-calendar {
display: flex;
max-width: 210px;
}
@media only screen and (min-width: 768px) {
.ec-calendar {
max-width: 245px;
}
}
.ec-calendar__month {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
margin: auto;
}
.ec-calendar__month th, .ec-calendar__month td {
height: 30px;
text-align: center;
vertical-align: middle;
line-height: 1;
font-size: 1.2rem;
}
@media only screen and (min-width: 1100px) {
.ec-calendar__month th, .ec-calendar__month td {
height: 35px;
font-size: 1.6rem;
}
}
.ec-calendar__month td {
width: 30px;
padding-left: 0.1em;
}
@media only screen and (min-width: 1100px) {
.ec-calendar__month td {
width: 35px;
}
}
.ec-calendar .ec-calendar__title {
height: 38px;
border: 0;
font-size: 1.4rem;
}
@media only screen and (min-width: 1100px) {
.ec-calendar .ec-calendar__title {
font-size: 1.6rem;
}
}
.ec-calendar .ec-calendar__sun {
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
background: transparent;
color: #FFA0A0;
}
.ec-calendar .ec-calendar__mon, .ec-calendar .ec-calendar__tue, .ec-calendar .ec-calendar__wed, .ec-calendar .ec-calendar__thu, .ec-calendar .ec-calendar__fri {
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
background: transparent;
color: #000;
}
.ec-calendar .ec-calendar__sat {
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
background: transparent;
color: #469bff;
}
.ec-calendar .ec-calendar__day {
background: transparent;
color: #333;
}
.ec-calendar .ec-calendar__holiday {
background: transparent;
color: #fff !important;
position: relative;
}
.ec-calendar .ec-calendar__holiday:before {
content: "";
display: block;
width: 24px;
height: 24px;
border-radius: 99px;
background: #FFA0A0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
@media only screen and (min-width: 768px) {
.ec-calendar .ec-calendar__holiday:before {
width: 26px;
height: 26px;
}
}
.ec-calendar .next_commit_date {
background: transparent;
color: #fff !important;
position: relative;
}
.ec-calendar .next_commit_date:before {
content: "";
display: block;
width: 24px;
height: 24px;
border-radius: 99px;
background: #469bff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
@media only screen and (min-width: 768px) {
.ec-calendar .next_commit_date:before {
width: 26px;
height: 26px;
}
}
.ec-calendar .ec-calendar__today {
color: #333;
position: relative;
z-index: 1;
}
.ec-calendar .ec-calendar__today::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
display: block;
width: 11px;
height: 1px;
background: #469bff;
transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
.ec-calendar .ec-calendar__today::after {
width: 13px;
}
}
.ec-calendar.slick-slider {
margin: 0 auto;
background: #fff;
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
.ec-calendar.slick-slider .arrow {
display: flex;
align-items: center;
width: 40px;
height: 100%;
border: none;
position: absolute;
top: 0;
}
.ec-calendar.slick-slider .arrow:hover, .ec-calendar.slick-slider .arrow:focus {
opacity: 0.7;
transition: all 0.5s ease 0s;
color: currentColor;
}
.ec-calendar.slick-slider .prev {
left: -60px;
background: no-repeat left 10px center/10px url("/html/template/yanoman/assets/icon/angle-left-solid.svg");
}
@media only screen and (min-width: 768px) {
.ec-calendar.slick-slider .prev {
left: -20px;
}
}
@media only screen and (min-width: 1100px) {
.ec-calendar.slick-slider .prev {
left: -60px;
}
}
.ec-calendar.slick-slider .next {
right: -60px;
background: no-repeat right 10px center/10px url("/html/template/yanoman/assets/icon/angle-right-solid.svg");
}
@media only screen and (min-width: 768px) {
.ec-calendar.slick-slider .next {
right: -20px;
}
}
@media only screen and (min-width: 1100px) {
.ec-calendar.slick-slider .next {
right: -60px;
}
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
検索ラベル
商品一覧 ヘッダー部 に関する Project コンポーネントを定義します。
ex [商品一覧 ヘッダー部](http://demo3.ec-cube.net/products/list)
Markup:
include /assets/tmpl/elements/13.1.searchnav.pug
+ec-searchnavRole__topicpath
+ec-searchnavRole__info
Styleguide 13.1
*/
.ec-searchnavRole {
margin-bottom: 0;
padding: 0;
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-searchnavRole html {
box-sizing: border-box;
}
.ec-searchnavRole *,
.ec-searchnavRole *::before,
.ec-searchnavRole *::after {
box-sizing: inherit;
}
.ec-wpRole .ec-searchnavRole {
padding-right: 0;
padding-left: 0;
}
}
.ec-searchnavRole:first-child .ec-searchnavRole__search {
padding-top: 0;
}
.ec-searchnavRole .ec-searchnavRole__infos {
border-top: 1px solid #efefef;
display: flex;
margin-bottom: 30px;
padding-inline: 15px;
flex-direction: column;
}
.ec-wpRole .ec-searchnavRole .ec-searchnavRole__infos {
margin-bottom: 20px;
border: none;
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole .ec-searchnavRole__infos {
flex-wrap: wrap;
padding-left: 0;
padding-right: 0;
flex-direction: row;
justify-content: space-between;
}
.ec-wpRole .ec-searchnavRole .ec-searchnavRole__infos {
margin-bottom: 30px;
border: none;
}
}
.ec-searchnavRole__search {
padding: 20px 0 18px;
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole__search {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
padding: 15px 0;
border-bottom: 1px solid #efefef;
}
}
.ec-searchnavRole__search .ec-blockBtn,
.ec-searchnavRole__search .ec-blockBtn--primary {
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
font-size: 1.6rem;
letter-spacing: 0.1em;
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole__search .ec-blockBtn,
.ec-searchnavRole__search .ec-blockBtn--primary {
width: 165px;
}
}
.ec-searchnavRole__search .ec-blockBtn {
height: 48px;
line-height: 48px;
border-width: 2px;
}
.ec-searchnavRole__search .ec-blockBtn span {
display: flex;
align-items: center;
}
.ec-searchnavRole__search .ec-blockBtn i {
margin-right: auto;
font-size: 3rem;
}
@media only screen and (min-width: 375px) {
.ec-searchnavRole__search .ec-blockBtn i {
margin-right: 1.2rem;
}
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole__search .ec-blockBtn i {
margin-right: 0.8rem;
}
}
.ec-searchnavRole__search .ec-blockBtn--primary {
height: 34px;
line-height: 34px;
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole__search .ec-blockBtn--primary {
height: 48px;
line-height: 48px;
}
}
.ec-searchnavRole__search .ec-blockBtn--primary i {
margin-right: 1.2rem;
font-size: 2.2rem;
}
.ec-searchnavRole__search .ec-blockBtn:not(:is(.selected)) {
border-color: #999999;
background: #fff;
color: #999999;
}
.ec-searchnavRole__search__sort {
display: flex;
margin-bottom: 12px;
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole__search__sort {
margin-bottom: 0;
}
}
.ec-searchnavRole__search__sort :not(:first-child) {
margin-left: 15px;
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole__search__search {
margin-left: 15px;
}
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole .ec-searchnavRole__counter {
padding-top: 15px;
}
.ec-wpRole .ec-searchnavRole .ec-searchnavRole__counter {
padding-top: 0;
}
}
@media only screen and (min-width: 1100px) {
.ec-searchnavRole .ec-searchnavRole__counter {
flex-shrink: 1;
}
}
.ec-searchnavRole .ec-searchnavRole__counter__filter, .ec-searchnavRole .ec-searchnavRole__counter__result {
display: block;
padding-left: 5em;
position: relative;
}
.ec-searchnavRole .ec-searchnavRole__counter__filter:before, .ec-searchnavRole .ec-searchnavRole__counter__result:before {
display: block;
position: absolute;
left: 0;
top: 0;
}
.ec-searchnavRole .ec-searchnavRole__counter__filter {
margin-bottom: 5px;
}
@media only screen and (min-width: 768px) {
.ec-searchnavRole .ec-searchnavRole__counter__filter {
margin-bottom: 10px;
}
}
.ec-searchnavRole .ec-searchnavRole__counter__filter:before {
content: "検索条件：";
}
.ec-searchnavRole .ec-searchnavRole__counter__result:before {
content: "検索結果：";
}
.ec-searchnavRole .ec-searchnavRole__actions {
display: none;
text-align: right;
width: 100%;
}
.ec-searchnavRole .ec-pagerRole {
display: none;
}
@media only screen and (min-width: 1100px) {
.ec-searchnavRole .ec-pagerRole {
display: block;
padding: 15px 0 0;
}
.ec-wpRole .ec-searchnavRole .ec-pagerRole {
padding: 0;
}
}
.ec-searchnavRole .ec-pagerRole .ec-pager {
padding-top: 0;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
商品一覧
商品一覧 に関する Project コンポーネントを定義します。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2
*/
.ec-shelfRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-shelfRole html {
box-sizing: border-box;
}
.ec-shelfRole *,
.ec-shelfRole *::before,
.ec-shelfRole *::after {
box-sizing: inherit;
}
body:not(#page_product_detail) .ec-layoutRole__main > div:last-child .ec-shelfRole:last-child {
margin-bottom: -50px;
}
/*
商品一覧グリッド
商品一覧 で使用するグリッドコンポーネントです。
Markup:
include /assets/tmpl/elements/13.2.shelf.pug
+b.ec-shelfRole
+ec-shelfGrid
Styleguide 13.2.1
*/
.ec-shelfGrid {
margin: 0 0 -50px;
padding: 0;
list-style: none;
}
.ec-shelfGrid a {
color: inherit;
text-decoration: none;
}
.ec-shelfGrid a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-shelfGrid {
display: flex;
flex-wrap: wrap;
}
#page_product_list .ec-shelfGrid, #page_mypage_favorite .ec-shelfGrid {
margin-inline: -10px;
}
}
.ec-shelfGrid__item {
display: flex !important;
flex-wrap: wrap;
width: 100%;
margin-bottom: 50px;
padding-inline: 21px 20px;
}
@media only screen and (min-width: 768px) {
.ec-shelfGrid__item a {
transition: all 0.5s ease 0s;
}
.ec-shelfGrid__item a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-shelfGrid__item {
width: 33.3333333333%;
}
}
#page_product_list .ec-shelfGrid__item, #page_mypage_favorite .ec-shelfGrid__item {
padding: 0;
}
@media only screen and (min-width: 768px) {
#page_product_list .ec-shelfGrid__item, #page_mypage_favorite .ec-shelfGrid__item {
flex-direction: column;
padding: 0 10px;
}
}
@media only screen and (min-width: 1100px) {
#page_product_list .ec-shelfGrid__item, #page_mypage_favorite .ec-shelfGrid__item {
width: 20%;
}
}
.ec-shelfGrid__item__top {
order: 1;
width: calc((100% - 15px) / 2);
transition: all 0.5s ease 0s;
}
@media only screen and (min-width: 768px) {
#page_product_list .ec-shelfGrid__item__top, #page_mypage_favorite .ec-shelfGrid__item__top {
width: 100%;
}
}
.ec-shelfGrid__item__top a {
display: block;
position: relative;
}
.ec-shelfGrid__item__middle {
order: 2;
width: calc((100% - 15px) / 2);
margin-left: 15px;
padding-top: 2px;
}
#page_product_list .ec-shelfGrid__item__middle, #page_mypage_favorite .ec-shelfGrid__item__middle {
padding-top: 0;
}
@media only screen and (min-width: 768px) {
#page_product_list .ec-shelfGrid__item__middle, #page_mypage_favorite .ec-shelfGrid__item__middle {
width: 100%;
margin-left: 0;
padding-inline: 10px;
}
}
.ec-shelfGrid__item__middle:hover ~ .ec-shelfGrid__item__top {
opacity: 0.7;
}
.ec-shelfGrid__item__bottom {
order: 3;
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin-top: 25px;
}
.ec-shelfGrid__item__bottom > button {
width: calc(50% + 7px);
}
.ec-shelfGrid__item__form {
width: calc(50% - 7px);
padding-right: 15px;
}
.ec-shelfGrid__item__form .ec-numberInput {
display: flex;
align-items: center;
white-space: nowrap;
font-size: 1.8rem;
}
.ec-shelfGrid__item__form .ec-numberInput input {
max-width: calc(100% - 50px);
margin-bottom: 0;
font-size: 1.8rem;
}
.ec-shelfGrid__item__image {
display: block;
margin-bottom: 25px;
}
#page_product_list .ec-shelfGrid__item__image, #page_mypage_favorite .ec-shelfGrid__item__image {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
#page_product_list .ec-shelfGrid__item__image, #page_mypage_favorite .ec-shelfGrid__item__image {
margin-bottom: 18px;
}
}
.ec-shelfGrid__item__tagList {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
.ec-shelfGrid__item__tagList span {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 9px;
border-radius: 3px;
background: #469bff;
color: #fff;
font-size: 1rem;
font-weight: bold;
line-height: 1;
}
.ec-shelfGrid__item__tagList span.frame {
padding: 4px 6px;
border: 1px solid currentColor;
background: #fff;
color: #000;
}
.ec-shelfGrid__item__release {
margin-bottom: 5px;
color: #469bff;
font-size: 1rem;
font-weight: bold;
}
.ec-shelfGrid__item__release:first-child {
margin-top: -0.2em;
}
.ec-shelfGrid__item__catalogCode {
margin-bottom: 2px;
color: #666666;
font-size: 1.2rem;
}
.ec-shelfGrid__item__catalogCode:first-child {
margin-top: -0.2em;
}
.ec-shelfGrid__item__janCode {
margin-bottom: 5px;
color: #666666;
font-size: 1.2rem;
}
.ec-shelfGrid__item__janCode:first-child {
margin-top: -0.2em;
}
.ec-shelfGrid__item__name {
margin-bottom: 5px;
font-size: 1.2rem;
font-weight: bold;
line-height: 1.7;
text-align: justify;
word-break: break-all;
}
.ec-shelfGrid__item__name:first-child {
margin-top: -0.35em;
}
.ec-shelfGrid__item__copyright {
margin-bottom: 15px;
font-size: 1rem;
font-weight: 300;
text-align: justify;
word-break: break-all;
}
.ec-shelfGrid__item__supply {
margin-bottom: 15px;
padding: 5px 7px;
background: #f6d471;
font-size: 1rem;
font-feature-settings: "palt";
}
@media only screen and (min-width: 375px) {
.ec-shelfGrid__item__supply {
padding: 5px 9px;
}
}
.ec-shelfGrid__item__piece, .ec-shelfGrid__item__price, .ec-shelfGrid__item__price--sale {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-size: 1.2rem;
font-weight: bold;
}
.ec-shelfGrid__item__price--sale {
margin-bottom: 0;
color: #e05a87;
}
#page_product_list .ec-shelfGrid .ec-blockBtn--active,
#page_product_list .ec-shelfGrid .ec-blockBtn--cart, #page_mypage_favorite .ec-shelfGrid .ec-blockBtn--active,
#page_mypage_favorite .ec-shelfGrid .ec-blockBtn--cart {
height: 32px;
margin-top: 20px;
line-height: 30px;
font-size: 1.4rem;
}
.ec-shelfGrid .ec-blockBtn--cart.yoyaku {
background: #E0B45A;
border-color: #E0B45A;
}
#RelatedProduct-product_area,
#product_recommend_products,
#other_look_products,
#page_cart #past,
#page_cart #other {
width: auto;
margin-inline: -15px;
padding: 30px 0;
border-top: 1px solid #efefef;
}
@media only screen and (min-width: 1100px) {
#RelatedProduct-product_area,
#product_recommend_products,
#other_look_products,
#page_cart #past,
#page_cart #other {
margin-inline: 0;
padding-inline: 20px;
}
}
#RelatedProduct-product_area .ec-productRole__blockHeader,
#product_recommend_products .ec-productRole__blockHeader,
#other_look_products .ec-productRole__blockHeader,
#page_cart #past .ec-productRole__blockHeader,
#page_cart #other .ec-productRole__blockHeader {
padding-inline: 15px;
}
@media only screen and (min-width: 1100px) {
#RelatedProduct-product_area .ec-productRole__blockHeader,
#product_recommend_products .ec-productRole__blockHeader,
#other_look_products .ec-productRole__blockHeader,
#page_cart #past .ec-productRole__blockHeader,
#page_cart #other .ec-productRole__blockHeader {
padding-inline: 0;
}
}
#RelatedProduct-product_area .slick-slider,
#product_recommend_products .slick-slider,
#other_look_products .slick-slider,
#page_cart #past .slick-slider,
#page_cart #other .slick-slider {
position: relative;
}
@media only screen and (min-width: 1100px) {
#RelatedProduct-product_area .slick-slider:before, #RelatedProduct-product_area .slick-slider:after,
#product_recommend_products .slick-slider:before,
#product_recommend_products .slick-slider:after,
#other_look_products .slick-slider:before,
#other_look_products .slick-slider:after,
#page_cart #past .slick-slider:before,
#page_cart #past .slick-slider:after,
#page_cart #other .slick-slider:before,
#page_cart #other .slick-slider:after {
content: "";
width: 22px;
height: calc(100% - 48px);
background: #fff;
position: absolute;
top: -1px;
z-index: 1;
}
#RelatedProduct-product_area .slick-slider:before,
#product_recommend_products .slick-slider:before,
#other_look_products .slick-slider:before,
#page_cart #past .slick-slider:before,
#page_cart #other .slick-slider:before {
left: -23px;
}
#RelatedProduct-product_area .slick-slider:after,
#product_recommend_products .slick-slider:after,
#other_look_products .slick-slider:after,
#page_cart #past .slick-slider:after,
#page_cart #other .slick-slider:after {
right: -22px;
}
}
#RelatedProduct-product_area .slick-arrow,
#product_recommend_products .slick-arrow,
#other_look_products .slick-arrow,
#page_cart #past .slick-arrow,
#page_cart #other .slick-arrow {
width: 100%;
position: absolute;
top: 0;
z-index: 1;
pointer-events: none;
}
#RelatedProduct-product_area .arrow,
#product_recommend_products .arrow,
#other_look_products .arrow,
#page_cart #past .arrow,
#page_cart #other .arrow {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
background: none;
position: absolute;
bottom: 20px;
pointer-events: all;
font-size: 3.2rem;
}
#RelatedProduct-product_area .prev,
#product_recommend_products .prev,
#other_look_products .prev,
#page_cart #past .prev,
#page_cart #other .prev {
right: 55px;
}
@media only screen and (min-width: 1100px) {
#RelatedProduct-product_area .prev,
#product_recommend_products .prev,
#other_look_products .prev,
#page_cart #past .prev,
#page_cart #other .prev {
right: 40px;
}
}
#RelatedProduct-product_area .next,
#product_recommend_products .next,
#other_look_products .next,
#page_cart #past .next,
#page_cart #other .next {
right: 7px;
}
@media only screen and (min-width: 1100px) {
#RelatedProduct-product_area .next,
#product_recommend_products .next,
#other_look_products .next,
#page_cart #past .next,
#page_cart #other .next {
right: -8px;
}
}
#RelatedProduct-product_area .slick-list,
#product_recommend_products .slick-list,
#other_look_products .slick-list,
#page_cart #past .slick-list,
#page_cart #other .slick-list {
margin-left: calc(15px - 21px);
}
@media only screen and (min-width: 1100px) {
#RelatedProduct-product_area .slick-list,
#product_recommend_products .slick-list,
#other_look_products .slick-list,
#page_cart #past .slick-list,
#page_cart #other .slick-list {
margin-inline: -21px -20px;
padding-left: 0;
}
}
#RelatedProduct-product_area .slick-disabled .arrow,
#product_recommend_products .slick-disabled .arrow,
#other_look_products .slick-disabled .arrow,
#page_cart #past .slick-disabled .arrow,
#page_cart #other .slick-disabled .arrow {
color: #efefef;
cursor: not-allowed;
}
#RelatedProduct-product_area .slick-track,
#product_recommend_products .slick-track,
#other_look_products .slick-track,
#page_cart #past .slick-track,
#page_cart #other .slick-track {
display: flex;
}
#RelatedProduct-product_area .slick-slide,
#product_recommend_products .slick-slide,
#other_look_products .slick-slide,
#page_cart #past .slick-slide,
#page_cart #other .slick-slide {
height: auto;
position: relative;
}
#RelatedProduct-product_area .slick-slide:not(:first-child):before,
#product_recommend_products .slick-slide:not(:first-child):before,
#other_look_products .slick-slide:not(:first-child):before,
#page_cart #past .slick-slide:not(:first-child):before,
#page_cart #other .slick-slide:not(:first-child):before {
content: "";
width: 1px;
padding-top: 15%;
border-bottom: 130px solid #efefef;
position: absolute;
top: 0;
left: 0;
}
#other_look_products .ec-productRole__blockHeader h3, #other_look_products .ec-productRole__blockHeader .h3 {
font-feature-settings: "palt";
letter-spacing: 0.07em;
}
/*
商品一覧フッター
商品一覧 フッター に関する Project コンポーネントを定義します。
ex [商品一覧 ページャ部](http://demo3.ec-cube.net/products/list)
Markup:
include /assets/tmpl/elements/13.3.pager.pug
+ec-pagerRole
Styleguide 13.3
*/
.ec-pagerRole {
padding-inline: 15px;
text-align: right;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
カート追加モーダル
カート追加モーダルに関する Project コンポーネントを定義します。
ex [商品一覧、商品詳細](http://demo3.ec-cube.net/products/list)
+ec-modal
Styleguide 13.4
*/
.ec-modal {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 100%;
}
.ec-modal.small {
width: 30%;
}
.ec-modal.full {
width: 100%;
height: 100%;
}
.ec-modal .ec-modal-overlay {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.ec-modal .ec-modal-wrap {
position: relative;
border-radius: 2px;
border: 1px solid #333;
background-color: #fff;
width: 90%;
margin: 20px;
padding: 40px 5px;
}
@media only screen and (min-width: 768px) {
.ec-modal .ec-modal-wrap {
padding: 40px 10px;
width: 50%;
margin: 20px auto;
}
}
.ec-modal .ec-modal-close {
cursor: pointer;
position: absolute;
right: 20px;
top: 10px;
font-size: 20px;
height: 30px;
width: 20px;
}
.ec-modal .ec-modal-close:hover {
color: #4b5361;
}
.ec-modal .ec-modal-box {
text-align: center;
}
.ec-modal .ec-modal-box__addCart {
margin: -5px;
}
.ec-modal .ec-modal-box__addCart > a, .ec-modal .ec-modal-box__addCart > span {
margin: 5px;
}
.ec-modal .ec-role, .ec-modal .ec-role--800 {
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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-productRole html {
box-sizing: border-box;
}
.ec-productRole *,
.ec-productRole *::before,
.ec-productRole *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__header {
display: flex;
}
}
.ec-productRole__header__left {
padding-top: 20px;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-productRole__header__left {
padding-top: 0;
}
}
@media only screen and (min-width: 1100px) {
.ec-productRole__header__left {
width: calc(100% - 548px);
}
}
@media only screen and (min-width: 1100px) {
.ec-productRole__header__right {
width: 548px;
}
}
.ec-productRole__fav {
position: absolute;
bottom: 0;
right: 0;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__fav {
bottom: 20px;
right: 20px;
}
}
.ec-productRole__favBtn {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
border-radius: 99px;
border: 2px solid transparent;
background: #d9d9d9;
color: #fff;
font-size: 30px;
cursor: pointer;
transition: all 0.5s ease 0s;
}
@media only screen and (min-width: 768px) {
.ec-productRole__favBtn {
width: 80px;
height: 80px;
font-size: 48px;
}
}
.ec-productRole__favBtn[disabled] {
border-color: #FFA0A0;
background: #fff;
color: #FFA0A0;
}
.ec-productRole__favBtn:hover {
border-color: #FFA0A0;
background: #fff;
color: #FFA0A0;
}
.ec-productRole__profile {
margin-left: 0;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__profile {
margin-left: 50px;
}
}
.ec-productRole__profile__heading {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
}
.ec-productRole__tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
padding: 0;
}
.ec-productRole__tags span {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 9px;
border-radius: 3px;
background: #469bff;
color: #fff;
font-size: 1rem;
font-weight: bold;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-productRole__tags span {
padding: 6px 8px;
font-size: 1.6rem;
}
}
.ec-productRole__release {
margin-left: 5px;
color: #469bff;
font-size: 1.2rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-productRole__release {
margin-left: 10px;
font-size: 1.8rem;
}
}
.ec-productRole__title {
margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
.ec-productRole__title {
margin-bottom: 50px;
}
}
.ec-productRole__title .ec-headingTitle {
display: block;
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-productRole__title .ec-headingTitle {
font-size: 3rem;
}
}
.ec-productRole__copyright {
display: block;
font-size: 1rem;
font-weight: 300;
}
@media only screen and (min-width: 768px) {
.ec-productRole__copyright {
font-size: 1.6rem;
}
}
.ec-productRole__priceBox {
width: 100%;
text-align: right;
}
.ec-productRole__priceBox__inner {
display: inline-flex;
flex-direction: column;
margin-left: auto;
}
.ec-productRole__priceRegular, .ec-productRole__price, .ec-productRole__point {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 1.6rem;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-productRole__priceRegular, .ec-productRole__price, .ec-productRole__point {
font-size: 1.8rem;
}
}
.ec-productRole__priceRegular__title, .ec-productRole__price__title, .ec-productRole__point__title {
margin-right: 40px;
}
@media only screen and (min-width: 768px) {
.ec-productRole__priceRegular__title, .ec-productRole__price__title, .ec-productRole__point__title {
margin-right: 70px;
}
}
.ec-productRole__priceRegular__num, .ec-productRole__price__num, .ec-productRole__point__num {
margin-left: auto;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-productRole__priceRegular__num, .ec-productRole__price__num, .ec-productRole__point__num {
font-size: 2.4rem;
}
}
@media only screen and (min-width: 768px) {
.ec-productRole__priceRegular__tax, .ec-productRole__price__tax, .ec-productRole__point__tax {
font-size: 1.8rem;
}
}
.ec-productRole__priceRegular, .ec-productRole__price {
align-items: center;
margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.ec-productRole__priceRegular, .ec-productRole__price {
margin-bottom: 16px;
}
}
.ec-productRole__point {
align-items: flex-end;
margin-bottom: 15px;
}
.ec-productRole__price {
color: #e05a87;
}
.ec-productRole__login {
margin: -10px 0 30px;
text-align: right;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-productRole__login a {
transition: all 0.5s ease 0s;
}
.ec-productRole__login a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-productRole__login {
font-size: 1.4rem;
}
}
.ec-productRole__login a {
display: inline-block;
padding: 10px 0;
color: currentColor;
font-weight: bold;
text-decoration: underline;
text-underline-offset: 1.4px;
}
.ec-productRole__login__desc {
display: inline-block;
text-align: left;
line-height: 1.7;
}
@media only screen and (min-width: 768px) {
.ec-productRole__login__desc {
text-align: inherit;
}
}
.ec-productRole__bulk {
font-size: 1.4rem;
margin-bottom: 15px;
text-align: left;
padding: 5px;
font-weight: normal;
border-radius: 5px;
border: 2px dotted #ffaa00;
}
.ec-productRole__bulk span {
font-size: 1.6rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-productRole__bulk {
font-size: 1.6rem;
}
}
.ec-productRole__form {
margin-bottom: 30px;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__form {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
}
.ec-productRole__actions {
width: 270px;
margin: 0 auto 15px;
text-align: right;
font-size: 1.8rem;
font-weight: bold;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__actions {
width: calc(100% - 310px);
margin: 0;
text-align: left;
}
}
.ec-productRole__actions .ec-select select {
height: 40px;
max-width: 100%;
}
.ec-productRole__actions .ec-numberInput input {
margin-bottom: 0;
font-size: 1.8rem;
}
.ec-productRole__btn {
width: 270px;
margin: 0 auto;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__btn {
margin-right: 0;
}
}
.ec-productRole__btn .ec-blockBtn--cart.yoyaku {
background: #E0B45A;
border-color: #E0B45A;
}
.ec-productRole__btn .ec-blockBtn--cart.nyuka {
background: #000;
border-color: #000;
}
.ec-productRole__btn .ec-blockBtn--cart.nyuka.registered {
background: gray;
border-color: gray;
}
.ec-productRole__daibikiOnly {
width: 100%;
margin-bottom: 15px;
font-size: 1.2rem;
color: red;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__daibikiOnly {
order: 4;
margin-top: 5px;
margin-bottom: 0;
}
}
.ec-productRole__orderUnit {
width: 100%;
margin-bottom: 15px;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__orderUnit {
order: 3;
margin-bottom: 0;
margin-top: 15px;
}
}
.ec-productRole__share {
display: flex;
flex-wrap: wrap;
margin-inline: calc(-15px);
padding: 10px 15px;
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-productRole__share a {
transition: all 0.5s ease 0s;
}
.ec-productRole__share a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 1100px) {
.ec-productRole__share {
margin-inline: 0;
padding-inline: 20px;
}
}
.ec-productRole__share__link {
display: flex;
align-items: center;
height: 20px;
margin-right: 10px;
padding-inline: 6px;
font-size: 1rem;
line-height: 1;
color: #fff !important;
}
.ec-productRole__share .facebook {
background: #1877F2;
}
.ec-productRole__share .facebook i {
font-size: 1.3rem;
}
.ec-productRole__share .twitter {
background: #1D9BF0;
}
.ec-productRole__share .twitter i {
font-size: 1.3rem;
}
.ec-productRole__share .line {
background: #06C755;
}
.ec-productRole__share .line i {
font-size: 2rem;
margin-right: 0.1rem;
}
.ec-productRole__info {
margin-inline: calc(-15px);
padding: 30px 40px;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__info {
margin: 0;
padding-inline: 20px;
}
}
.ec-productRole__info__inner {
border-top: 1px solid #999999;
border-left: 1px solid #999999;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-productRole__info__inner {
font-size: 1.4rem;
}
}
.ec-productRole__info dl {
display: flex;
width: 100%;
margin: 0;
}
.ec-productRole__info dt {
width: 88px;
padding: 5px 10px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background: #efefef;
font-weight: normal;
}
@media only screen and (min-width: 768px) {
.ec-productRole__info dt {
width: 100px;
}
}
.ec-productRole__info dd {
width: calc(100% - 88px);
margin: 0;
padding: 5px 10px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
}
@media only screen and (min-width: 768px) {
.ec-productRole__info dd {
width: calc(100% - 100px);
}
}
.ec-productRole__info__wide dt {
width: 140px;
}
@media only screen and (min-width: 768px) {
.ec-productRole__info__wide dt {
width: 160px;
}
}
.ec-productRole__info__wide dd {
width: calc(100% - 140px);
}
@media only screen and (min-width: 768px) {
.ec-productRole__info__wide dd {
width: calc(100% - 160px);
}
}
.ec-productRole__info .btn {
display: inline-block;
margin: -6px 0;
vertical-align: baseline;
}
.ec-productRole__info .btn :focus {
box-shadow: none;
}
.ec-productRole__character {
margin-inline: calc(-15px);
padding: 30px 15px;
border-top: 1px solid #efefef;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__character {
margin-inline: 0;
padding-inline: 20px;
}
}
.ec-productRole__character__header {
margin-bottom: 20px;
}
.ec-productRole__character__header h3, .ec-productRole__character__header .h3 {
margin: 0;
font-size: 1.6rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-productRole__character__header h3, .ec-productRole__character__header .h3 {
font-size: 2.4rem;
}
}
.ec-productRole__character__content {
display: flex;
}
.ec-productRole__character__content:not(:last-child) {
margin-bottom: 15px;
}
.ec-productRole__character__icon {
width: 27px;
margin-right: 10px;
}
.ec-productRole__character__text {
width: calc(100% - 37px);
text-align: justify;
word-break: break-all;
}
.ec-productRole__character__text h4, .ec-productRole__character__text .h4 {
margin-top: -0.1em;
font-size: 1.4rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-productRole__character__text h4, .ec-productRole__character__text .h4 {
font-size: 1.6rem;
}
}
.ec-productRole__character__text p {
font-size: 1.2rem;
line-height: 1.7;
}
@media only screen and (min-width: 768px) {
.ec-productRole__character__text p {
font-size: 1.4rem;
}
}
.ec-productRole .detail__reservation--bto {
color: #fff;
padding: 10px;
margin-bottom: 0;
background: #f6d471;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-productRole .detail__reservation--bto {
padding: 5px 20px 5px;
}
}
.ec-productRole__blockHeader {
margin-bottom: 30px;
}
.ec-productRole__blockHeader h3, .ec-productRole__blockHeader .h3 {
margin: 0;
font-size: 1.6rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-productRole__blockHeader h3, .ec-productRole__blockHeader .h3 {
font-size: 2.4rem;
}
}
.ec-productRole__description {
margin: 0 calc(-15px);
padding: 30px 15px;
border-top: 1px solid #efefef;
text-align: justify;
word-break: break-all;
font-size: 1.4rem;
line-height: 1.7;
}
@media only screen and (min-width: 768px) {
.ec-productRole__description {
font-size: 1.6rem;
}
}
@media only screen and (min-width: 1100px) {
.ec-productRole__description {
margin-inline: 0;
padding-inline: 20px;
}
}
.ec-productRole__description .ec-productRole__blockHeader {
margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
.ec-productRole__description .ec-productRole__blockHeader {
margin-bottom: 30px;
}
}
.ec-productRole__descText, .ec-productRole__noDiscount {
margin-top: 1em;
}
.ec-productRole__relatedTag {
margin-inline: -15px;
padding: 30px 0;
border-top: 1px solid #efefef;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__relatedTag {
margin-inline: 0;
padding-inline: 20px;
}
}
.ec-productRole__relatedTag .ec-productRole__blockHeader {
padding-inline: 15px;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__relatedTag .ec-productRole__blockHeader {
padding-inline: 0;
}
}
.ec-productRole__relatedTag .ec-productRole__blockHeader i {
font-size: 2.2rem;
vertical-align: bottom;
line-height: 1.92rem;
}
@media only screen and (min-width: 768px) {
.ec-productRole__relatedTag .ec-productRole__blockHeader i {
font-size: 3.4rem;
vertical-align: bottom;
line-height: 2.88rem;
}
}
.ec-productRole__relatedTag__list {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 0 0 -20px;
padding: 0 5px;
position: relative;
z-index: 1;
}
@media (hover: none) {
.ec-productRole__relatedTag__list {
flex-wrap: nowrap;
overflow-x: auto;
margin: -20px 0 -20px;
padding: 20px calc(15px - 10px) 0;
}
}
@media only screen and (min-width: 1100px) {
.ec-productRole__relatedTag__list {
margin-inline: -10px;
padding: 0;
}
}
.ec-productRole__relatedTag__list li {
margin: 0 0 20px;
padding: 0 10px;
}
.ec-productRole__relatedTag__list a {
display: flex;
align-items: center;
height: 30px;
padding: 0 10px;
border-radius: 5px;
border: 2px solid #efefef;
color: currentColor;
font-size: 1.4rem;
line-height: 1;
white-space: nowrap;
transition: all 0.5s ease 0s;
}
@media only screen and (min-width: 768px) {
.ec-productRole__relatedTag__list a {
font-size: 1.6rem;
}
}
.ec-productRole__relatedTag__list a:hover {
background: #efefef;
}
.ec-productRole__pickup {
margin-inline: -15px;
padding: 30px 15px;
background: #efefef;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__pickup {
margin-inline: 0;
padding-inline: 20px;
}
}
.ec-productRole__pickup__inner {
max-width: 480px;
margin-inline: auto;
}
.ec-productRole__pickup__inner iframe {
display: block;
width: 100%;
margin: 0;
border: 0;
position: static;
visibility: visible;
}
.ec-productRole__pickup .ec-productRole__blockHeader span {
display: inline-block;
margin-left: 1rem;
}
.ec-productRole__note {
margin-inline: -15px;
padding: 30px 0;
border-top: 1px solid #efefef;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__note {
margin-inline: 0;
padding-inline: 20px;
}
}
.ec-productRole__pickup + .ec-productRole__note {
border-top: none;
}
.ec-productRole__note .ec-productRole__blockHeader {
padding-inline: 15px;
}
@media only screen and (min-width: 1100px) {
.ec-productRole__note .ec-productRole__blockHeader {
padding-inline: 0;
}
}
.ec-productRole__note__list {
display: flex;
flex-wrap: wrap;
padding-inline: calc(15px - 8px);
}
@media (hover: none) {
.ec-productRole__note__list {
flex-wrap: nowrap;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.ec-productRole__note__list::-webkit-scrollbar {
display: none;
}
}
@media only screen and (min-width: 1100px) {
.ec-productRole__note__list {
margin-bottom: -30px;
margin-inline: -8px;
padding-inline: 0;
}
}
.ec-productRole__note__item {
width: 33.3333333333%;
margin-bottom: 30px;
padding-inline: 8px;
}
.ec-productRole__note__item a {
color: inherit;
text-decoration: none;
}
.ec-productRole__note__item a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-productRole__note__item a {
transition: all 0.5s ease 0s;
}
.ec-productRole__note__item a:hover {
opacity: 0.7;
}
}
@media (hover: none) {
.ec-productRole__note__item {
flex-shrink: 0;
width: 46%;
margin-bottom: 0;
}
}
@media only screen and (min-width: 1100px) {
.ec-productRole__note__item {
width: 20%;
}
}
.ec-productRole__note__item a {
display: block;
cursor: pointer;
}
.ec-productRole__note__image {
margin-bottom: 16px;
}
.ec-productRole__note__magazine {
margin-bottom: 10px;
font-size: 1.2rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-productRole__note__magazine {
font-size: 1.4rem;
}
}
.ec-productRole__note__magazine i {
font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
.ec-productRole__note__magazine i {
font-size: 1.6rem;
}
}
.ec-productRole__note__title {
margin-bottom: 7px;
font-size: 1.4rem;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 768px) {
.ec-productRole__note__title {
font-size: 1.6rem;
}
}
#relatedTopic_slider .ec-productRole__note__title, #faq_slider .ec-productRole__note__title, #piece_slider .ec-productRole__note__title {
color: #333333;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
#relatedTopic_slider .ec-productRole__note__title, #faq_slider .ec-productRole__note__title, #piece_slider .ec-productRole__note__title {
font-size: 1.4rem;
}
}
.ec-productRole__note__date {
color: #999999;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-productRole__note__date {
font-size: 1.4rem;
}
}
.ec-productRole #product_review_area .review, .ec-productRole #product_review_area .review--pc, .ec-productRole #product_review_area .review--sp {
padding-inline: 0;
}
.ec-productRole #product_review_area #no_review {
margin-bottom: 15px;
}
#leaflet-wrapper {
width: 100%;
margin-bottom: 15px;
aspect-ratio: 1/1;
transition: all 0.5s ease 0s;
}
@media only screen and (min-width: 768px) {
#leaflet-wrapper {
margin-bottom: 30px;
}
}
#leaflet-wrapper .slick-list {
height: 100%;
}
#leaflet-wrapper .slick-slide > div {
width: 100%;
aspect-ratio: 1/1;
position: relative;
}
#leaflet-wrapper .leaflet-container {
width: 100% !important;
height: 100% !important;
background: #fff;
top: 0 !important;
left: 0 !important;
}
.leaflet-container {
opacity: 0;
}
#leaflet-wrapper.slick-initialized .leaflet-container {
opacity: 1;
}
/**
メディアクエリ
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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
max-width: calc(1000px + 2 * 15px);
}
.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%;
height: auto;
}
.ec-cartRole html {
box-sizing: border-box;
}
.ec-cartRole *,
.ec-cartRole *::before,
.ec-cartRole *::after {
box-sizing: inherit;
}
.ec-cartRole::before {
display: none;
}
#page_bulk .ec-cartRole {
padding-top: 30px;
}
@media only screen and (min-width: 768px) {
#page_bulk .ec-cartRole {
padding-top: 50px;
}
}
.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 {
padding-bottom: 10px;
width: 100%;
border-bottom: 1px solid #efefef;
font-size: 1.2rem;
font-weight: normal;
}
@media only screen and (min-width: 768px) {
.ec-cartRole .ec-cartRole__totalText {
padding-bottom: 30px;
font-size: 1.6rem;
}
}
.ec-cartRole .ec-cartRole__totalText p {
margin: 0;
}
.ec-cartRole__shipping {
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
}
.ec-cartRole__shipping__text {
margin-bottom: -3px;
font-size: 1.4rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__shipping__text {
margin-bottom: 0;
font-size: 1.6rem;
}
}
.ec-cartRole__shipping__text p {
display: inline-block;
margin-right: 0.4rem;
margin-bottom: 8px;
}
.ec-cartRole__shipping__text p i {
font-size: 1.2em;
vertical-align: bottom;
}
.ec-cartRole__shipping__text p .color2 {
font-weight: normal;
}
.ec-cartRole__shipping__sub {
font-size: 1rem;
font-feature-settings: "palt";
letter-spacing: 0.1em;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__shipping__sub {
font-size: 1.2rem;
}
}
.ec-cartRole__nonMember {
width: 100%;
padding: 10px 10px 10px 40px;
border-radius: 5px;
background: #efefef;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__nonMember a {
transition: all 0.5s ease 0s;
}
.ec-cartRole__nonMember a:hover {
opacity: 0.7;
}
}
.ec-cartRole__nonMember:before {
content: "\f05a";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 2rem;
position: absolute;
top: 10px;
left: 10px;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__nonMember:before {
font-size: 2.2rem;
top: 12px;
left: 12px;
}
}
.ec-cartRole__nonMember p {
margin-bottom: 6px;
font-size: 1.2rem;
line-height: 1.7;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__nonMember p {
font-size: 1.4rem;
}
}
.ec-cartRole__nonMember a {
display: inline-block;
margin: 0 0.8rem 0 0;
color: #469bff;
font-size: 1.2rem;
text-decoration: underline;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__nonMember a {
font-size: 1.4rem;
}
}
.ec-cartRole__userInfo {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.ec-cartRole__userInfo__inner {
width: 100%;
border: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__userInfo__inner {
width: calc(50% - 10px);
}
}
.ec-cartRole__userInfo__inner:not(:last-child) {
margin-bottom: 8px;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__userInfo__inner:not(:last-child) {
margin-bottom: 0;
}
}
.ec-cartRole__userInfo__header {
padding: 5px 10px;
background: #efefef;
}
.ec-cartRole__userInfo__header p {
font-size: 1.2rem;
font-weight: bold;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__userInfo__header p {
font-size: 1.4rem;
}
}
.ec-cartRole__userInfo__content {
padding: 8px 10px;
}
.ec-cartRole__userInfo__content:not(:last-child) {
border-bottom: 1px dashed #efefef;
}
.ec-cartRole__userInfo__content p {
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__userInfo__content p {
font-size: 1.4rem;
}
}
.ec-cartRole__userInfo__content p:not(:last-child) {
margin-bottom: 5px;
}
.ec-cartRole__userInfo__content i {
margin-right: 0.5em;
font-size: 1.2em;
vertical-align: bottom;
}
.ec-cartRole__userInfo__content span {
display: inline;
}
.ec-cartRole__userInfo__content .ec-cartRole__userInfo__content__sub {
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__userInfo__content .ec-cartRole__userInfo__content__sub {
font-size: 1.2rem;
}
}
.ec-cartRole__userInfo__gold {
font-weight: bold;
border-bottom: 2px solid #E0B45A;
}
.ec-cartRole__cartHeader {
width: 100%;
margin-bottom: 15px;
padding: 15px 0;
border-bottom: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__cartHeader {
margin-bottom: 30px;
padding: 30px 0;
}
}
.ec-cartRole__cartHeader h2, .ec-cartRole__cartHeader .h2 {
margin: 0;
padding: 0;
font-size: 1.6rem;
font-weight: bold;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__cartHeader h2, .ec-cartRole__cartHeader .h2 {
font-size: 2.4rem;
}
}
.ec-cartRole__cart {
margin: 0;
width: 100%;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__cart {
max-width: 800px;
margin: 0 auto;
}
}
.ec-cartRole__nonMemberPrice {
margin-top: 10px;
font-size: 1rem;
text-align: right;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__nonMemberPrice a {
transition: all 0.5s ease 0s;
}
.ec-cartRole__nonMemberPrice a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-cartRole__nonMemberPrice {
font-size: 1.2rem;
}
}
.ec-cartRole__nonMemberPrice a {
color: #469bff;
font-weight: bold;
text-decoration: underline;
text-underline-offset: 2px;
}
.ec-cartRole__notice, .ec-cartRole__notice--top {
width: 100%;
margin-top: 15px;
margin-bottom: 30px;
border-radius: 5px;
border: 1px solid #666666;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__notice, .ec-cartRole__notice--top {
margin-top: 30px;
}
}
.ec-cartRole__notice--top {
margin-top: 0;
margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__notice--top {
margin-top: 0;
}
}
.ec-cartRole__notice__header {
padding: 5px 0 6px;
background: #666666;
text-align: center;
}
.ec-cartRole__notice__header p {
margin: 0;
color: #fff;
font-size: 1.2rem;
font-weight: bold;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__notice__header p {
font-size: 1.4rem;
}
}
.ec-cartRole__notice__content {
padding: 10px;
}
.ec-cartRole__notice__content p {
display: block;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__notice__content p {
font-size: 1.4rem;
}
}
.ec-cartRole__notice__content p:not(:last-child) {
margin-bottom: 10px;
}
.ec-cartRole__notice__content .color2 {
margin-bottom: 0 !important;
font-weight: bold;
}
.ec-cartRole .ec-cartRole__actions {
text-align: center;
width: 100%;
margin: 30px 0;
}
.ec-cartRole .ec-inlineBtn--cart {
width: 270px;
margin: 0;
}
@media only screen and (min-width: 768px) {
.ec-cartRole .ec-inlineBtn--cart {
font-size: 2.4rem;
}
}
#page_bulk .ec-cartRole .ec-inlineBtn--cart {
margin-top: 15px;
}
@media only screen and (min-width: 768px) {
#page_bulk .ec-cartRole .ec-inlineBtn--cart {
margin-top: 30px;
}
}
.ec-cartRole__total {
display: flex;
width: 100%;
}
.ec-cartRole__total__inner {
width: 100%;
max-width: 345px;
margin-inline: auto 0;
background: #efefef;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__total__inner {
margin-right: 0;
}
}
.ec-cartRole__total dl {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding-inline: 15px;
}
.ec-cartRole__total dt, .ec-cartRole__total dd {
margin: 0;
}
.ec-cartRole__total__totalPoint {
height: 49px;
border-bottom: 1px solid #fff;
}
.ec-cartRole__total__totalPoint dt {
font-size: 1.4rem;
}
.ec-cartRole__total__totalPoint dd {
font-size: 2rem;
}
.ec-cartRole__total__totalPrice {
height: 50px;
}
.ec-cartRole__total__totalPrice dt {
font-size: 1.6rem;
}
.ec-cartRole__total__totalPrice dd {
font-size: 2rem;
}
.ec-cartRole__total__totalPrice .ec-price__tax {
left: 6px;
font-size: 1.2rem;
}
.ec-cartRole__noItem {
width: 100%;
}
.ec-cartRole__noItem__content {
margin: 30px 0;
text-align: center;
}
.ec-cartRole__noItem__content a {
color: inherit;
text-decoration: none;
}
.ec-cartRole__noItem__content a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__noItem__content a {
transition: all 0.5s ease 0s;
}
.ec-cartRole__noItem__content a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-cartRole__noItem__content {
margin: 50px 0;
font-size: 1.8rem;
}
}
.ec-cartRole__noItem__content p {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__noItem__content p {
font-size: 1.8rem;
}
}
.ec-cartRole__bottomLink {
display: flex;
flex-direction: column;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 30px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-cartRole__bottomLink a {
transition: all 0.5s ease 0s;
}
.ec-cartRole__bottomLink a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-cartRole__bottomLink {
margin-bottom: 50px;
}
}
.ec-cartRole__bottomLink a {
color: currentColor;
font-size: 1.4rem;
text-decoration: underline;
text-underline-offset: 2px;
}
.ec-cartRole__bottomLink a:not(:last-child) {
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-cartRole__error + form .ec-cartTable {
border-top: 1px solid #efefef;
}
/*
カート商品表示枠（テーブルヘッダ）
カート内の商品を表示するテーブルのヘッダです。
スマホでは非表示となります。
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;
@include media_desktop {
display: table-row;
}
& &__label{
display: table-cell;
padding: 16px;
text-align: center;
background: #F4F3F0;
overflow-x: hidden;
font-weight: bold;
}
}*/
.ec-cartCompleteRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-cartCompleteRole html {
box-sizing: border-box;
}
.ec-cartCompleteRole *,
.ec-cartCompleteRole *::before,
.ec-cartCompleteRole *::after {
box-sizing: inherit;
}
/*
カート内商品
カート内のアイテムを表示するテーブル行です。
スマホでは非表示となります。
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: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto 60px;
grid-template-areas: "left summary" "left price" "amountRow amountRow";
gap: 15px;
margin-top: 15px;
border-bottom: 1px solid #efefef;
}
.ec-cartRow a {
color: inherit;
text-decoration: none;
}
.ec-cartRow a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-cartRow a {
transition: all 0.5s ease 0s;
}
.ec-cartRow a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-cartRow {
grid-template-columns: 165px 1fr 1fr;
grid-template-rows: auto 60px;
grid-template-areas: "left summary price" "left summary amountRow";
margin-top: 30px;
padding-bottom: 30px;
}
}
#page_bulk .ec-cartRow {
grid-template-rows: auto auto;
grid-template-areas: "left summary" "del amountRow";
}
@media only screen and (min-width: 768px) {
#page_bulk .ec-cartRow {
grid-template-columns: 165px 2fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "left summary amountRow del";
}
}
.ec-cartRow:not(:last-child) {
margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
.ec-cartRow:not(:last-child) {
margin-bottom: 30px;
}
}
.ec-cartRow__left {
grid-area: left;
display: flex;
}
.ec-cartRow__img {
width: 100%;
margin: auto;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-cartRow__img {
margin-top: 0;
}
}
.ec-cartRow__img img {
display: block;
width: 100%;
aspect-ratio: 1/1;
-o-object-fit: contain;
object-fit: contain;
}
.ec-cartRow__img a {
display: block;
position: relative;
}
.ec-cartRow__tagList {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
.ec-cartRow__tagList span {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 9px;
border-radius: 3px;
background: #469bff;
color: #fff;
font-size: 1rem;
font-weight: bold;
line-height: 1;
}
.ec-cartRow .ec-cartRow__delete {
display: inline-block;
padding: 5px;
font-size: 1.4rem;
text-decoration: underline;
text-underline-offset: 2px;
}
#page_bulk .ec-cartRow .ec-cartRow__delete {
grid-area: del;
text-align: center;
}
@media only screen and (min-width: 768px) {
#page_bulk .ec-cartRow .ec-cartRow__delete {
border-left: 1px solid #efefef;
}
}
.ec-cartRow__summary {
grid-area: summary;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-cartRow__summary {
padding-right: 23px;
}
.ec-cartRow__summary:before {
content: "";
display: block;
width: 1px;
height: 100%;
background: #efefef;
position: absolute;
top: 0;
right: -8px;
}
}
.ec-cartRow__release {
margin-bottom: 5px;
color: #469bff;
font-size: 1rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-cartRow__release {
font-size: 1.2rem;
}
}
.ec-cartRow__release:first-child {
margin-top: -0.2em;
}
.ec-cartRow__catalogCode {
margin-bottom: 2px;
color: #666666;
font-size: 1.2rem;
}
.ec-cartRow__catalogCode:first-child {
margin-top: -0.2em;
}
.ec-cartRow__janCode {
margin-bottom: 5px;
color: #666666;
font-size: 1.2rem;
}
.ec-cartRow__janCode:first-child {
margin-top: -0.2em;
}
.ec-cartRow__name {
margin-bottom: 5px;
font-size: 1.2rem;
font-weight: bold;
line-height: 1.7;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 768px) {
.ec-cartRow__name {
font-size: 1.4rem;
}
}
.ec-cartRow__name:first-child {
margin-top: -0.35em;
}
.ec-cartRow__copyright {
margin-bottom: 5px;
font-size: 1rem;
font-weight: 300;
}
.ec-cartRow__info__inner {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
.ec-cartRow__info__inner {
font-size: 1.2rem;
}
}
.ec-cartRow__info dl {
display: flex;
width: 100%;
margin: 0;
line-height: 1.2;
}
.ec-cartRow__info dt {
width: 66px;
padding: 3px 5px;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
font-weight: normal;
}
@media only screen and (min-width: 768px) {
.ec-cartRow__info dt {
width: 76px;
}
}
.ec-cartRow__info dd {
width: calc(100% - 66px);
margin: 0;
padding: 3px 5px;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-cartRow__info dd {
width: calc(100% - 76px);
}
}
.ec-cartRow__price {
grid-area: price;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-cartRow__price {
padding-left: 23px;
font-size: 1.4rem;
}
}
.ec-cartRow__price dl {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 5px;
}
.ec-cartRow__price dt {
margin: 0 1em 0 0;
font-weight: normal;
}
.ec-cartRow__price dd {
margin: 0;
}
.ec-cartRow__unitPrice + .ec-cartRow__subtotal {
margin-top: 5px;
}
.ec-cartRow .ec-cartRow__subtotal {
font-weight: bold;
}
.ec-cartRow .ec-cartRow__subtotal .line-through {
text-decoration: line-through;
}
@media only screen and (min-width: 768px) {
.ec-cartRow .ec-cartRow__subtotal dd {
font-size: 1.6rem;
}
}
.ec-cartRow__amountRow {
grid-area: amountRow;
vertical-align: middle;
}
#page_bulk .ec-cartRow__amountRow {
margin-bottom: 15px;
}
.ec-cartRow__amountUpDown {
display: flex;
justify-content: center;
margin-left: auto;
}
.ec-cartRow__amountUpButton, .ec-cartRow__amountDownButton, .ec-cartRow__amountDownButtonDisabled {
margin: 0 6px;
border-radius: 5px;
width: 60px;
height: 44px;
background: #d9d9d9;
position: relative;
}
.ec-cartRow__amountUpButton:before, .ec-cartRow__amountDownButton:before, .ec-cartRow__amountDownButtonDisabled:before {
content: "";
display: block;
width: 14px;
height: 14px;
border-top: 1px solid #000;
border-right: 1px solid #000;
position: absolute;
top: 50%;
left: 50%;
}
.ec-cartRow__amountDownButton:before, .ec-cartRow__amountDownButtonDisabled:before {
transform: translate(-50%, -66%) rotate(135deg);
}
.ec-cartRow__amountUpButton:before {
transform: translate(-50%, -14%) rotate(-45deg);
}
.ec-cartRow__amountDownButtonDisabled {
cursor: default;
border: none;
}
.ec-cartRow__amountDownButtonDisabled:before {
border-color: #999999;
}
.ec-cartRow .ec-input input, .ec-cartRow .ec-halfInput input, .ec-cartRow .ec-numberInput input, .ec-cartRow .ec-zipInput input, .ec-cartRow .ec-telInput input, .ec-cartRow .ec-select input, .ec-cartRow .ec-birth input {
width: 88px;
height: 44px;
text-align: right;
}
#cart_clear {
display: inline-block;
padding: 15px 0;
border: none;
background: none;
color: currentColor;
font-size: 1.4rem;
text-decoration: underline;
text-underline-offset: 2px;
}
#cart_clear:hover {
opacity: 0.7;
}
/*
アラート
カート内の商品に問題があることを示す警告メッセージです。
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;
}
/**
メディアクエリ
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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
display: flex;
flex-direction: column;
margin-top: 0;
font-size: 1.4rem;
/*
注文履歴詳細 項目見出し
*/
}
.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%;
height: auto;
}
.ec-orderRole html {
box-sizing: border-box;
}
.ec-orderRole *,
.ec-orderRole *::before,
.ec-orderRole *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 768px) {
.ec-orderRole {
max-width: calc(1000px + 2 * 15px);
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
font-size: 1.6rem;
}
}
#page_mypage_history .ec-orderRole {
margin-top: 0;
}
body:not(.mypage) .ec-orderRole .ec-inlineBtn {
font-weight: normal;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.mypage .ec-orderRole .ec-inlineBtn {
font-weight: bold;
}
.ec-orderRole .ec-orderRole__detail {
width: 100%;
padding: 0;
}
@media only screen and (min-width: 768px) {
.ec-orderRole .ec-orderRole__detail {
width: calc(100% - 300px);
}
}
@media only screen and (min-width: 1100px) {
.ec-orderRole .ec-orderRole__detail {
width: calc(100% - 375px);
}
}
.ec-orderRole .ec-orderRole__summary {
margin-top: 0 !important;
width: 100%;
}
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: inline-block;
}
@media only screen and (min-width: 768px) {
.ec-orderRole .ec-orderRole__summary {
width: 270px;
margin-left: auto;
}
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
display: none;
}
}
@media only screen and (min-width: 1100px) {
.ec-orderRole .ec-orderRole__summary {
width: 345px;
}
}
.ec-orderRole .ec-borderedList {
margin-bottom: 20px;
border-top: 1px solid #efefef;
}
.ec-orderRole .ec-borderedList li {
border-bottom: 1px solid #efefef;
}
.ec-orderRole .ec-borderedList .ec-imageGrid {
border: none;
}
.ec-orderRole__detail div:first-child > .ec-rectHeading {
margin-top: 0;
}
#page_mypage_history .ec-orderRole__detail div:first-child > .ec-rectHeading h2, #page_mypage_history .ec-orderRole__detail div:first-child > .ec-rectHeading .h2 {
border-top: none;
}
.ec-orderRole .ec-rectHeading {
margin: 15px 0;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-orderRole .ec-rectHeading {
margin: 30px 0;
}
}
.ec-orderRole .ec-rectHeading h2, .ec-orderRole .ec-rectHeading .h2 {
margin: 0;
padding: 15px 0;
background: #fff;
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
font-size: 1.6rem;
font-weight: bold;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-orderRole .ec-rectHeading h2, .ec-orderRole .ec-rectHeading .h2 {
padding: 30px 0;
font-size: 2.4rem;
}
}
.ec-orderOrder .ec-orderRole .ec-rectHeading h2, .ec-orderOrder .ec-orderRole .ec-rectHeading .h2 {
border-top: none;
}
/*
注文履歴詳細 オーダ情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ オーダ情報](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderInfo
Styleguide 15.2.1
*/
.ec-orderOrder {
margin-bottom: 30px;
}
.ec-orderOrder .ec-definitions--soft {
width: 100%;
margin: 10px 0;
font-size: 1.4rem;
}
.ec-orderOrder .ec-definitions--soft:first-of-type {
margin-top: 15px;
}
/*
注文履歴詳細 お客様情報
マイページ 注文詳細部に関する 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;
}
/*
注文詳細 配送情報
マイページ 注文履歴詳細部に関する 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: 15px 0;
font-weight: bold;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-orderDelivery__title {
font-size: 2.4rem;
}
}
.ec-orderDelivery .ec-orderDelivery__multipleTitle {
margin-top: 30px;
padding: 6px 0 6px 1em;
background: #efefef;
font-weight: bold;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-orderDelivery__multipleTitle {
font-size: 2.4rem;
}
}
.ec-orderDelivery .ec-orderDelivery__change {
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.ec-orderDelivery .ec-orderDelivery__change span {
text-decoration: underline;
}
.ec-orderDelivery .ec-orderDelivery__items {
border-bottom: 1px solid #efefef;
border-top: 1px solid #efefef;
}
.ec-orderDelivery__heading {
margin-bottom: 15px;
font-size: 1.4rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery__heading {
font-size: 2rem;
}
}
.ec-orderDelivery .ec-orderDelivery__address {
margin-bottom: 15px;
}
.ec-orderDelivery .ec-orderDelivery__address p:not(:last-child) {
margin: 0 0 6px;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-orderDelivery__address p:not(:last-child) {
margin: 0 0 7px;
}
}
#page_shopping_confirm .ec-orderDelivery .ec-orderDelivery__actions:last-child .ec-selects {
margin-bottom: -15px;
border: none;
}
.ec-orderDelivery .ec-orderDelivery__edit {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-orderDelivery__edit {
margin-top: 30px;
padding-top: 30px;
}
}
.ec-orderDelivery__actions .ec-selects {
border-bottom: none;
}
.ec-orderDelivery__actions__text {
margin-bottom: 15px;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery__actions__text {
font-size: 1.4rem;
}
}
.ec-orderDelivery__actions__shortShipping {
padding: 10px;
border: 4px solid #efefef;
text-align: center;
font-size: 1.4rem;
word-break: keep-all;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery__actions__shortShipping {
font-size: 1.6rem;
}
}
.ec-orderDelivery__actions__yoyaku__heading {
font-size: 1.4rem;
font-weight: 700;
}
.ec-orderDelivery__actions__yoyaku__text {
margin-top: 5px;
padding-left: 1em;
position: relative;
font-size: 1.2rem;
}
.ec-orderDelivery__actions__yoyaku__text:before {
content: "・";
position: absolute;
left: 0;
width: 1em;
}
.ec-orderDelivery__mypageShipping .ec-definitions--soft:not(:last-child) {
margin: 0 0 6px;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery__mypageShipping .ec-definitions--soft:not(:last-child) {
margin: 0 0 7px;
}
}
.ec-orderDelivery .ec-imageGrid {
display: flex;
padding: 15px 0;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid {
padding: 30px 0;
}
}
.ec-orderDelivery .ec-imageGrid__img {
width: 165px !important;
padding: 0 !important;
}
.ec-orderDelivery .ec-imageGrid__content {
width: calc(100% - 165px);
padding-left: 15px;
}
.ec-orderDelivery .ec-imageGrid__content__yoyaku {
margin-bottom: 5px !important;
color: #469bff;
line-height: 1;
font-size: 1rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content__yoyaku {
font-size: 1.2rem;
}
}
.ec-orderDelivery .ec-imageGrid__content__catalogCode {
margin-bottom: 2px !important;
color: #666666;
font-size: 1.2rem;
}
.ec-orderDelivery .ec-imageGrid__content__catalogCode:first-child {
margin-top: -0.2em;
}
.ec-orderDelivery .ec-imageGrid__content__janCode {
margin-bottom: 5px !important;
color: #666666;
font-size: 1.2rem;
}
.ec-orderDelivery .ec-imageGrid__content__janCode:first-child {
margin-top: -0.35em;
}
.ec-orderDelivery .ec-imageGrid__content__name {
margin-bottom: 5px !important;
font-size: 1.2rem;
font-weight: bold;
line-height: 1.7;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content__name a {
transition: all 0.5s ease 0s;
}
.ec-orderDelivery .ec-imageGrid__content__name a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content__name {
font-size: 1.4rem;
}
}
.ec-orderDelivery .ec-imageGrid__content__name:first-child {
margin-top: -0.35em;
}
.ec-orderDelivery .ec-imageGrid__content__name a {
color: currentColor;
}
.ec-orderDelivery .ec-imageGrid__content__copyright {
margin-bottom: 5px !important;
font-size: 1rem;
font-weight: 300;
}
.ec-orderDelivery .ec-imageGrid__content__info {
max-width: 280px;
}
.ec-orderDelivery .ec-imageGrid__content__info__inner {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content__info__inner {
font-size: 1.2rem;
}
}
.ec-orderDelivery .ec-imageGrid__content__info dl {
display: flex;
width: 100%;
margin: 0;
line-height: 1.2;
}
.ec-orderDelivery .ec-imageGrid__content__info dt {
width: 66px;
padding: 3px 5px;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
font-weight: normal;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content__info dt {
width: 76px;
}
}
.ec-orderDelivery .ec-imageGrid__content__info dd {
width: calc(100% - 66px);
margin: 0;
padding: 3px 5px;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content__info dd {
width: calc(100% - 76px);
}
}
.ec-orderDelivery .ec-imageGrid__content__tradelaw {
margin-top: 10px;
font-size: 1.2rem;
font-weight: bold;
}
.ec-orderDelivery .ec-imageGrid__content__price {
margin-top: 5px;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content__price {
font-size: 1.4rem;
}
}
.ec-orderDelivery .ec-imageGrid__content__subtotal {
margin-top: 5px;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content__subtotal {
font-size: 1.4rem;
}
}
.ec-orderDelivery .ec-imageGrid__content .ec-inlineBtn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 166px;
height: 2.2rem;
margin-top: 10px;
font-size: 1.2rem;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-orderDelivery .ec-imageGrid__content .ec-inlineBtn {
width: 166px;
height: 2.4rem;
font-size: 1.4rem;
}
}
.ec-orderDelivery .ec-rectHeading {
margin-top: 0 !important;
}
/*
注文履歴詳細 支払情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ 支払情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
.ec-orderRole
.ec-orderPayment
.ec-rectHeading
h2 お支払方法
p 支払方法： 郵便振替
Styleguide 15.2.4
*/
.ec-orderPayment input {
margin-top: 10px;
}
.ec-orderPayment img {
max-height: 20px;
}
#default_choice_payment .ec-radio > div {
display: block;
}
@media only screen and (min-width: 768px) {
#default_choice_payment .ec-radio > div {
display: flex;
align-items: center;
}
}
#default_choice_payment .ec-radio > div p {
margin-left: 26px;
margin-bottom: 5px;
}
@media only screen and (min-width: 768px) {
#default_choice_payment .ec-radio > div p {
margin-left: 0;
margin-bottom: 0;
}
}
/*
注文履歴詳細 お問い合わせ
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ お問い合わせ(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)
Markup:
.ec-orderRole
.ec-orderConfirm
.ec-rectHeading
h2 お問い合わせ
p 記載なし
Styleguide 15.2.5
*/
.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 {
display: block;
height: 96px;
}
/*
お届け先の複数指定
お届け先の複数指定に関するコンポーネントを定義します。
ex [マイページ お届け先の複数指定](http://demo3.ec-cube.net/shopping/shipping_multiple)
(商品購入画面 → 「お届け先を追加する」を押下)
Markup:
include /assets/tmpl/elements/15.2.order.pug
+ec-orderAddAddress
Styleguide 15.2.6
*/
.ec-AddAddress {
padding: 0 10px;
}
@media only screen and (min-width: 768px) {
.ec-AddAddress {
margin: 0 10%;
}
}
.ec-AddAddress .ec-AddAddress__info {
margin-bottom: 30px;
padding-top: 30px;
text-align: center;
font-size: 16px;
}
.ec-AddAddress .ec-AddAddress__add {
border-top: 1px solid #efefef;
padding-top: 20px;
margin-bottom: 20px;
}
.ec-AddAddress .ec-AddAddress__item {
display: table;
padding: 16px;
background: #efefef;
margin-bottom: 16px;
}
.ec-AddAddress .ec-AddAddress__itemThumb {
display: table-cell;
min-width: 160px;
width: 20%;
}
.ec-AddAddress .ec-AddAddress__itemThumb img {
width: 100%;
}
.ec-AddAddress .ec-AddAddress__itemtContent {
display: table-cell;
vertical-align: middle;
padding-left: 16px;
font-size: 16px;
}
.ec-AddAddress .ec-AddAddress__itemtTitle {
font-weight: bold;
margin-bottom: 10px;
}
.ec-AddAddress .ec-AddAddress__itemtSize {
margin-bottom: 10px;
}
.ec-AddAddress .ec-AddAddress__select {
margin-bottom: 5px;
}
.ec-AddAddress .ec-AddAddress__selectAddress {
display: block;
}
@media only screen and (min-width: 768px) {
.ec-AddAddress .ec-AddAddress__selectAddress {
display: inline-block;
}
}
.ec-AddAddress .ec-AddAddress__selectAddress label {
font-size: 16px;
font-weight: normal;
}
.ec-AddAddress .ec-AddAddress__selectAddress select {
min-width: 100%;
}
@media only screen and (min-width: 768px) {
.ec-AddAddress .ec-AddAddress__selectAddress select {
min-width: 350px;
}
}
.ec-AddAddress .ec-AddAddress__selectNumber {
display: block;
}
@media only screen and (min-width: 768px) {
.ec-AddAddress .ec-AddAddress__selectNumber {
display: inline-block;
margin-left: 30px;
}
}
.ec-AddAddress .ec-AddAddress__selectNumber label {
font-size: 16px;
font-weight: normal;
}
.ec-AddAddress .ec-AddAddress__selectNumber input {
display: inline-block;
margin-left: 10px;
width: 80px;
}
.ec-AddAddress .ec-AddAddress__actions {
width: 270px;
margin: 0 auto;
}
.ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action {
margin-bottom: 15px;
}
.ec-AddAddress .ec-AddAddress__new {
margin-bottom: 20px;
}
.ec-orderCoupon #customer_detail_box .ec-inlineBtn {
margin-top: 10px;
}
/**
メディアクエリ
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 {
max-width: 1000px;
margin-inline: auto;
}
.ec-historyRole__userInfo {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
.ec-historyRole__userInfo {
margin-bottom: 30px;
}
}
.ec-historyRole__userInfo__inner {
width: 100%;
border: 1px solid #efefef;
}
.ec-historyRole__userInfo__header {
padding: 5px 10px;
background: #efefef;
}
.ec-historyRole__userInfo__header p {
font-size: 1.2rem;
font-weight: bold;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-historyRole__userInfo__header p {
font-size: 1.4rem;
}
}
.ec-historyRole__userInfo__content {
padding: 8px 10px;
border-bottom: 1px dashed #efefef;
}
.ec-historyRole__userInfo__content p {
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-historyRole__userInfo__content p {
font-size: 1.4rem;
}
}
.ec-historyRole__userInfo__content p:not(:last-child) {
margin-bottom: 5px;
}
.ec-historyRole__userInfo__content span {
display: inline;
margin-left: 10px;
}
.ec-historyRole__userInfo__content .text-period {
margin-left: 0;
}
.ec-historyRole__userInfo__content .ec-historyRole__userInfo__content__sub {
font-size: 1rem;
font-feature-settings: "palt";
letter-spacing: 0.1em;
}
@media only screen and (min-width: 768px) {
.ec-historyRole__userInfo__content .ec-historyRole__userInfo__content__sub {
font-size: 1.2rem;
}
}
.ec-historyRole__count {
margin-inline: -15px;
padding: 10px 15px;
border-top: 1px solid #efefef;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-historyRole__count {
margin-inline: 0;
padding: 15px 0;
font-size: 1.6rem;
}
}
.ec-historyRole__content {
display: flex;
flex-direction: column;
margin-inline: -15px;
padding: 15px 15px;
border-top: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-historyRole__content {
margin-inline: 0;
padding: 30px 0 15px;
}
}
.ec-historyRole__header {
width: 100%;
}
.ec-historyRole .ec-historyRole__detail {
border-top: 1px solid #efefef;
width: 100%;
}
.ec-historyRole .ec-historyRole__detail .ec-imageGrid {
display: flex;
padding: 15px 0;
border-top: 1px solid #efefef;
}
.ec-historyRole .ec-historyRole__detail .ec-imageGrid__img {
width: 80px;
margin-right: 10px;
padding: 0;
}
.ec-historyRole .ec-historyRole__detail .ec-imageGrid__content {
width: calc(100% - 90px);
}
.ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
border-top: none;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__yoyaku {
margin-bottom: 5px;
color: #469bff;
line-height: 1;
font-size: 1rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-historyRole .ec-historyRole__detail .ec-historyRole__yoyaku {
font-size: 1.2rem;
}
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
margin-top: -0.35em;
margin-bottom: 8px;
line-height: 1.7;
font-size: 1.2rem;
font-weight: bold;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 768px) {
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
font-size: 1.4rem;
}
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
margin-bottom: 8px;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
font-size: 1.4rem;
}
}
.ec-historyRole__noItem {
margin-bottom: -20px;
padding-top: 30px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-historyRole__noItem {
margin-bottom: 0;
padding-top: 50px;
font-size: 1.8rem;
}
}
/*
注文履歴一覧ヘッダ
注文履歴一覧で使用するヘッダのコンポーネントを定義します。
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 {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 10px;
}
.ec-historyListHeader__date {
display: inline-block;
margin-right: 30px;
font-weight: bold;
font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
.ec-historyListHeader__date {
font-size: 1.6rem;
}
}
.ec-historyListHeader__action {
display: inline-flex;
width: calc(100vw - 214px);
max-width: 166px;
height: 2.2rem;
}
@media only screen and (min-width: 768px) {
.ec-historyListHeader__action {
height: 2.4rem;
}
}
.ec-historyListHeader__action a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 1.2rem;
font-weight: normal;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-historyListHeader__action a {
font-size: 1.4rem;
}
}
.ec-historyListHeader .ec-definitions--soft {
width: 100%;
margin-top: 0;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-historyListHeader .ec-definitions--soft {
font-size: 1.4rem;
}
}
.ec-historyListHeader .ec-definitions--soft:first-of-type {
margin-top: 15px;
}
/**
* 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 solid #efefef;
}
.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 {
margin-bottom: 15px;
}
.ec-orderMail:last-child {
margin-bottom: -10px;
}
.ec-orderMail .ec-orderMail__time {
margin-bottom: 10px;
line-height: 1;
}
.ec-orderMail .ec-orderMail__link {
margin-bottom: 10px;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.ec-orderMail .ec-orderMail__link a {
transition: all 0.5s ease 0s;
}
.ec-orderMail .ec-orderMail__link a:hover {
opacity: 0.7;
}
}
.ec-orderMail .ec-orderMail__link:hover a {
opacity: 0.7;
}
.ec-orderMail .ec-orderMail__link a {
display: inline-block;
padding-right: 30px;
font-size: 1.4rem;
text-decoration: underline !important;
text-underline-offset: 2px;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
position: relative;
transition: all 0.5s ease 0s;
}
@media only screen and (min-width: 768px) {
.ec-orderMail .ec-orderMail__link a {
padding-right: 35px;
font-size: 1.6rem;
}
}
.ec-orderMail .ec-orderMail__link a:before {
content: "\f0ab";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 2.4rem;
line-height: 1;
position: absolute;
top: 0;
right: -2px;
}
@media only screen and (min-width: 768px) {
.ec-orderMail .ec-orderMail__link a:before {
font-size: 2.6rem;
}
}
.ec-orderMail .active a::before {
content: "\f0aa";
}
.ec-orderMail .ec-orderMail__body {
display: none;
padding: 10px;
border: 1px solid #efefef;
}
.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 solid #efefef;
}
.ec-addressRole .ec-addressRole__actions {
margin-top: 32px;
padding-bottom: 20px;
border-bottom: 1px solid #efefef;
}
.ec-addressList .ec-addressList__item {
display: table;
width: 100%;
position: relative;
border-bottom: 1px solid #efefef;
}
.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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
margin-top: 20px;
}
.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%;
height: auto;
}
.ec-forgotRole html {
box-sizing: border-box;
}
.ec-forgotRole *,
.ec-forgotRole *::before,
.ec-forgotRole *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 768px) {
.ec-forgotRole {
margin-top: 30px;
}
}
.ec-forgotRole .ec-forgotRole__intro {
font-size: 16px;
}
.ec-forgotRole .ec-forgotRole__form {
margin-bottom: 16px;
}
.ec-forgetCompleteRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.ec-forgetCompleteRole:after {
content: " ";
display: table;
}
.ec-forgetCompleteRole:after {
clear: both;
}
.ec-forgetCompleteRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-forgetCompleteRole img {
max-width: 100%;
height: auto;
}
.ec-forgetCompleteRole html {
box-sizing: border-box;
}
.ec-forgetCompleteRole *,
.ec-forgetCompleteRole *::before,
.ec-forgetCompleteRole *::after {
box-sizing: inherit;
}
/**
メディアクエリ
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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-registerRole html {
box-sizing: border-box;
}
.ec-registerRole *,
.ec-registerRole *::before,
.ec-registerRole *::after {
box-sizing: inherit;
}
.ec-registerRole .ec-registerRole__actions {
padding-top: 20px;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-registerRole .ec-registerRole__actions a {
transition: all 0.5s ease 0s;
}
.ec-registerRole .ec-registerRole__actions a:hover {
opacity: 0.7;
}
}
.ec-registerRole .ec-registerRole__actions p {
margin-bottom: 16px;
}
.ec-registerRole .ec-registerRole__actions .agree-link {
color: currentColor;
text-decoration: underline;
text-underline-offset: 2px;
}
.ec-registerRole .ec-blockBtn--action {
margin-top: 50px;
margin-bottom: 30px;
}
.ec-registerCompleteRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-registerCompleteRole html {
box-sizing: border-box;
}
.ec-registerCompleteRole *,
.ec-registerCompleteRole *::before,
.ec-registerCompleteRole *::after {
box-sizing: inherit;
}
/**
メディアクエリ
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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-contactRole html {
box-sizing: border-box;
}
.ec-contactRole *,
.ec-contactRole *::before,
.ec-contactRole *::after {
box-sizing: inherit;
}
.ec-contactRole .ec-contactRole__actions {
padding-top: 20px;
}
.ec-contactRole p {
margin: 16px 0;
}
.ec-contactConfirmRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-contactConfirmRole html {
box-sizing: border-box;
}
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
box-sizing: inherit;
}
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
padding-top: 20px;
}
.ec-contactConfirmRole .ec-blockBtn--action {
margin-bottom: 16px;
}
.ec-contactCompleteRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-contactCompleteRole html {
box-sizing: border-box;
}
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
box-sizing: inherit;
}
/**
メディアクエリ
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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-customerRole html {
box-sizing: border-box;
}
.ec-customerRole *,
.ec-customerRole *::before,
.ec-customerRole *::after {
box-sizing: inherit;
}
.ec-customerRole .ec-customerRole__actions {
padding-top: 20px;
}
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
.ec-customerRole .ec-blockBtn--action {
margin-bottom: 16px;
}
}
.ec-contactConfirmRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-contactConfirmRole html {
box-sizing: border-box;
}
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
box-sizing: inherit;
}
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
padding-top: 20px;
}
.ec-contactConfirmRole .ec-blockBtn--action {
margin-bottom: 16px;
}
.ec-contactCompleteRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
.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%;
height: auto;
}
.ec-contactCompleteRole html {
box-sizing: border-box;
}
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
box-sizing: inherit;
}
/**
メディアクエリ
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: 1000;
opacity: 1;
}
/*
404ページ
404 エラー画面で使用するページコンポーネントです。
ex [404エラー画面](http://demo3.ec-cube.net/404)
Markup:
include /assets/tmpl/elements/20.1.404.pug
+ec-404Role
Styleguide 20.1
*/
.ec-404Role {
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
height: 100vh;
text-align: center;
box-sizing: border-box;
}
.ec-404Role textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-404Role img {
max-width: 100%;
height: auto;
}
.ec-404Role html {
box-sizing: border-box;
}
.ec-404Role *,
.ec-404Role *::before,
.ec-404Role *::after {
box-sizing: inherit;
}
.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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
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%;
height: auto;
}
.ec-withdrawRole html {
box-sizing: border-box;
}
.ec-withdrawRole *,
.ec-withdrawRole *::before,
.ec-withdrawRole *::after {
box-sizing: inherit;
}
.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: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
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%;
height: auto;
}
.ec-userEditCompleteRole html {
box-sizing: border-box;
}
.ec-userEditCompleteRole *,
.ec-userEditCompleteRole *::before,
.ec-userEditCompleteRole *::after {
box-sizing: inherit;
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
margin-bottom: 16px;
font-weight: bold;
font-size: 24px;
}
@media only screen and (min-width: 768px) {
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
font-size: 32px;
}
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
margin-bottom: 32px;
font-size: 16px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
* 子カテゴリー一覧 Product/list.twig
*/
.ec-categoryChildrenRole {
margin: -20px auto 20px;
padding-inline: 15px;
border-bottom: 1px solid #efefef;
overflow-x: auto;
}
@media only screen and (min-width: 768px) {
.ec-categoryChildrenRole {
margin-top: 0;
margin-bottom: 30px;
border: none;
overflow-x: hidden;
}
}
.ec-categoryChildrenRole__list {
list-style: none;
display: flex;
width: -moz-fit-content;
width: fit-content;
margin: 0 -5px;
padding: 10px 0;
}
@media only screen and (min-width: 768px) {
.ec-categoryChildrenRole__list a {
transition: all 0.5s ease 0s;
}
.ec-categoryChildrenRole__list a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-categoryChildrenRole__list {
flex-wrap: wrap;
width: 100%;
margin-inline: 0;
padding: 15px;
background: #efefef;
}
}
.ec-categoryChildrenRole__item {
padding: 0 5px;
}
@media only screen and (min-width: 768px) {
.ec-categoryChildrenRole__item {
padding: 5px;
}
}
.ec-categoryChildrenRole__item a {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 18px;
border: 2px solid #efefef;
border-radius: 10px;
background: #fff;
color: currentColor;
font-size: 1.2rem;
line-height: 1;
white-space: nowrap;
}
@media only screen and (min-width: 768px) {
.ec-categoryChildrenRole__item a {
height: 44px;
font-size: 1.4rem;
font-weight: bold;
}
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
* カテゴリーヘッダー Product/list.twig
*/
.ec-categoryHeaderRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
position: relative;
}
.ec-categoryHeaderRole:after {
content: " ";
display: table;
}
.ec-categoryHeaderRole:after {
clear: both;
}
.ec-categoryHeaderRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-categoryHeaderRole img {
max-width: 100%;
height: auto;
}
.ec-categoryHeaderRole html {
box-sizing: border-box;
}
.ec-categoryHeaderRole *,
.ec-categoryHeaderRole *::before,
.ec-categoryHeaderRole *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 1100px) {
.ec-categoryHeaderRole {
display: flex;
}
}
.ec-categoryHeaderRole:after {
display: none;
}
@media only screen and (min-width: 1100px) {
.ec-categoryHeaderRole__text {
width: 100%;
margin: auto 0;
}
.has_image .ec-categoryHeaderRole__text {
width: 50%;
}
}
.ec-categoryHeaderRole__text__title {
margin: 0 auto 20px;
font-size: 1.8rem;
}
@media only screen and (min-width: 1100px) {
.ec-categoryHeaderRole__text__title {
font-size: 3rem;
}
}
.ec-categoryHeaderRole__text__desc {
margin: 20px 0 0;
padding-bottom: 20px;
font-size: 1.4rem;
line-height: 1.7;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 1100px) {
.ec-categoryHeaderRole__text__desc {
padding-bottom: 30px;
font-size: 1.8rem;
}
}
.ec-categoryHeaderRole__image {
width: calc(100% + 2 * 15px);
margin-inline: calc(-15px);
padding-bottom: 60px;
}
@media only screen and (min-width: 1100px) {
.ec-categoryHeaderRole__image {
width: 100%;
margin: 0;
padding-inline: calc(6.8% + 30px) 6.8%;
}
.has_image .ec-categoryHeaderRole__image {
width: 50%;
}
}
.ec-categoryHeaderRole__image #category_slider img {
aspect-ratio: 1/1;
-o-object-fit: contain;
object-fit: contain;
}
.ec-categoryHeaderRole__image #category_slider img:not(:first-child) {
display: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
.ec-guideRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
max-width: calc(1000px + 2 * 15px);
font-size: 1.4rem;
line-height: 1.7;
}
.ec-guideRole:after {
content: " ";
display: table;
}
.ec-guideRole:after {
clear: both;
}
.ec-guideRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-guideRole img {
max-width: 100%;
height: auto;
}
.ec-guideRole html {
box-sizing: border-box;
}
.ec-guideRole *,
.ec-guideRole *::before,
.ec-guideRole *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 768px) {
.ec-guideRole a {
transition: all 0.5s ease 0s;
}
.ec-guideRole a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-guideRole {
font-size: 1.8rem;
}
}
.ec-guideRole > section {
margin-bottom: 50px;
padding-top: 50px;
border-top: 1px solid #efefef;
}
.ec-guideRole > section:first-of-type {
border-top: none;
}
.ec-guideRole > section:last-child {
margin-bottom: 0;
}
.ec-guideRole h2, .ec-guideRole .h2 {
margin: 0 0 20px;
font-size: 2rem;
font-weight: bold;
line-height: 1.4;
}
@media only screen and (min-width: 768px) {
.ec-guideRole h2, .ec-guideRole .h2 {
font-size: 2.6rem;
}
}
.ec-guideRole h3, .ec-guideRole .h3 {
margin-top: 20px;
margin-bottom: 10px;
padding-left: 15px;
border-left: 5px solid #efefef;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.4;
}
@media only screen and (min-width: 768px) {
.ec-guideRole h3, .ec-guideRole .h3 {
font-size: 2.4rem;
}
}
.ec-guideRole h4, .ec-guideRole .h4 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 1.6rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-guideRole h4, .ec-guideRole .h4 {
font-size: 2rem;
}
}
.ec-guideRole p {
margin-bottom: 10px;
text-align: justify;
word-break: break-all;
}
.ec-guideRole a {
color: #469bff;
text-decoration: underline;
text-underline-offset: 2px;
}
.ec-guideRole__nav {
margin-bottom: 20px;
padding-top: 20px;
}
.ec-guideRole__nav__preface {
margin-bottom: 20px;
font-weight: bold;
}
.ec-guideRole__nav dt {
margin: 20px 0 10px;
}
.ec-guideRole__nav dt::before {
content: "▼";
display: inline-block;
margin-right: 5px;
}
.ec-guideRole__nav dt a {
color: inherit;
}
.ec-guideRole__nav dd {
margin: 5px 0;
}
.ec-guideRole__nav dd a {
color: inherit;
text-decoration: underline;
}
.ec-guideRole .page-content__card {
display: flex;
align-items: center;
}
.ec-guideRole .page-content__card > div {
padding: 0 1%;
}
.ec-guideRole .payment-logo {
width: 200px;
display: inline-block;
padding: 0 5px;
}
.ec-guideRole .payment-logo-au {
width: 140px;
display: inline-block;
}
.ec-guideRole .gmo-link {
display: inline-block;
margin: 10px 5px;
}
.new-member h4, .new-member .h4 {
margin: 20px 0 15px;
font-size: 2rem;
}
@media only screen and (min-width: 768px) {
.new-member h4, .new-member .h4 {
font-size: 2.6rem;
}
}
.new-member__contents {
padding: 0;
margin: 20px auto;
line-height: 1.7;
}
.new-member__header {
padding: 20px;
background: #f6d471;
text-align: center;
font-size: 2rem;
font-weight: bold;
letter-spacing: 3px;
color: #fff;
display: flex;
justify-content: space-around;
}
@media only screen and (min-width: 1100px) {
.new-member__header {
font-size: 3rem;
}
}
@media only screen and (min-width: 768px) {
.new-member__header {
font-size: 2.4rem;
}
}
.new-member__header div span {
vertical-align: middle;
}
.new-member__header img {
max-width: 50px;
}
@media only screen and (min-width: 1100px) {
.new-member__header img {
max-width: 100px;
}
}
@media only screen and (min-width: 768px) {
.new-member__header img {
max-width: 80px;
}
}
.new-member__heading {
font-size: 2rem;
margin-bottom: 10px;
font-weight: bold;
}
@media only screen and (min-width: 1100px) {
.new-member__heading {
font-size: 2.2rem;
}
}
.new-member__text {
padding: 10px 20px;
}
.new-member__business-list {
line-height: 1.7;
}
.new-member__business-list li span {
font-weight: bold;
}
.new-member__business-list li::before {
content: "■";
color: #274a78;
}
.new-member__paid-text {
border: 1px solid #274a78;
border-radius: 5px;
padding: 10px;
line-height: 1.7;
font-size: 1.4rem;
}
.new-member__accent {
display: inline-block;
line-height: 1.4;
border-bottom: 3px solid #fcf1d1;
margin-bottom: 5px;
font-weight: bold;
}
.new-member__annotation {
font-size: 1.2rem;
line-height: 1.4;
}
.new-member__table, .new-member__table--sp {
display: none;
width: 100%;
}
@media only screen and (min-width: 768px) {
.new-member__table, .new-member__table--sp {
display: table;
}
}
.new-member__table th, .new-member__table--sp th, .new-member__table td, .new-member__table--sp td {
padding: 10px;
border: 2px solid #ffffff;
}
.new-member__table thead th, .new-member__table--sp thead th {
font-size: 1.6rem;
}
@media only screen and (min-width: 768px) {
.new-member__table thead th, .new-member__table--sp thead th {
text-align: center;
}
}
.new-member__table thead th span, .new-member__table--sp thead th span {
display: inline-block;
line-height: 1.4;
background: url("../img/common/crown.png") no-repeat 0 center/20px;
padding-left: 30px;
}
@media only screen and (min-width: 768px) {
.new-member__table thead th span, .new-member__table--sp thead th span {
background-position: center 0;
padding-top: 16px;
padding-left: 0;
}
}
.new-member__table td, .new-member__table--sp td {
font-size: 1.2rem;
}
.new-member__table tbody th, .new-member__table--sp tbody th {
text-align: left;
font-size: 1.4rem;
}
@media only screen and (min-width: 1100px) {
.new-member__table tbody th, .new-member__table--sp tbody th {
font-size: 1.6rem;
}
}
.new-member__table tbody th:first-child, .new-member__table--sp tbody th:first-child {
background: #FCF1D1;
}
@media only screen and (min-width: 768px) {
.new-member__table tbody span, .new-member__table--sp tbody span {
display: block;
}
}
.new-member__table--sp {
display: table;
}
@media only screen and (min-width: 768px) {
.new-member__table--sp {
display: none;
}
}
.new-member__table--sp thead {
margin-top: 20px;
}
.new-member__silver {
background-color: #c9caca;
color: #ffffff;
}
.new-member__silver--th {
background-color: #e3e3e3;
color: #969797;
}
.new-member__gold {
background-color: #e6b82e;
color: #ffffff;
}
.new-member__gold--th {
background-color: #f1d789;
color: #9b7913;
}
.new-member__platinum {
background-color: #5DD2FF;
color: #ffffff;
}
.new-member__platinum--th {
background-color: #c3eeff;
color: #00b2f6;
}
.new-member__discount-number {
font-size: 1.8rem;
font-weight: bold;
}
@media only screen and (min-width: 1100px) {
.new-member__discount-number {
font-size: 2rem;
}
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
.ec-largeModal {
display: none;
}
.ec-largeModal.show {
display: block;
}
.ec-largeModal__wrap, .ec-largeModal__wrap--suggest {
position: relative;
background-color: #fff;
width: 100%;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__wrap, .ec-largeModal__wrap--suggest {
max-width: 1280px;
height: auto;
max-height: calc(100vh - 15px - 15px);
border-radius: 20px;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}
}
.ec-largeModal.show .ec-largeModal__wrap, .ec-largeModal.show .ec-largeModal__wrap--suggest {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal.show .ec-largeModal__wrap, .ec-largeModal.show .ec-largeModal__wrap--suggest {
padding: 0 20px 20px;
height: auto;
width: calc(100% - 15px - 15px);
top: 15px;
left: 50%;
transform: translateX(-50%);
}
}
.ec-largeModal.show .ec-largeModal__wrap--suggest {
position: relative;
padding: 0;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal.show .ec-largeModal__wrap--suggest {
padding: 0;
border-radius: 0;
top: 2px;
left: auto;
transform: none;
}
}
.ec-largeModal__close, .ec-largeModal__close--suggest {
cursor: pointer;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
height: 24px;
width: 24px;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__close, .ec-largeModal__close--suggest {
right: 0;
height: 30px;
width: 30px;
}
}
.ec-largeModal__close--suggest {
background: none;
border: none;
padding: 0;
top: 10px;
right: 15px;
transform: none;
color: inherit;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__close--suggest {
top: 10px;
right: 15px;
}
}
.ec-largeModal__close--suggest:focus, .ec-largeModal__close--suggest:focus-visible {
outline: #337ab7 auto 1px;
outline-offset: 1px;
}
.ec-largeModal__close i, .ec-largeModal__close--suggest i {
font-size: 24px;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__close i, .ec-largeModal__close--suggest i {
font-size: 30px;
}
}
.ec-largeModal__box {
text-align: center;
}
.ec-largeModal .ec-role, .ec-largeModal .ec-role--800 {
margin-top: 20px;
}
.ec-largeModal__header {
position: relative;
}
.ec-largeModal__header + .ec-largeModal__contents {
border-top: 1px solid #efefef;
}
.ec-largeModal__wrap--suggest .ec-largeModal__header + .ec-largeModal__contents {
border-top: none;
}
.ec-largeModal__title {
font-size: 16px;
font-weight: bold;
padding: 16px 40px;
line-height: 1;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__title {
font-size: 20px;
padding: 20px 30px;
}
}
.ec-largeModal__contents {
display: none;
height: calc(100vh - 54px);
overflow: auto;
overscroll-behavior-y: contain;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__contents {
height: auto;
max-height: calc(100vh - 165px);
}
}
.ec-oshiraseModal .ec-largeModal__contents {
height: calc(100vh - 48px);
}
.ec-largeModal.show .ec-largeModal__contents {
display: block;
}
.ec-largeModal__contents__inner {
padding-bottom: 80px;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__contents__inner {
padding-bottom: 0;
}
}
.ec-largeModal__content, .ec-largeModal__content--oshirase, .ec-largeModal__content--suggest, .ec-largeModal__content--hierarchy, .ec-largeModal__content--searchProduct {
background: #fff;
padding: 10px 15px;
}
.ec-largeModal__content + .ec-largeModal__content, .ec-largeModal__content--oshirase + .ec-largeModal__content, .ec-largeModal__content + .ec-largeModal__content--oshirase, .ec-largeModal__content--oshirase + .ec-largeModal__content--oshirase, .ec-largeModal__content--suggest + .ec-largeModal__content, .ec-largeModal__content--suggest + .ec-largeModal__content--oshirase, .ec-largeModal__content + .ec-largeModal__content--suggest, .ec-largeModal__content--oshirase + .ec-largeModal__content--suggest, .ec-largeModal__content--suggest + .ec-largeModal__content--suggest, .ec-largeModal__content--hierarchy + .ec-largeModal__content, .ec-largeModal__content--hierarchy + .ec-largeModal__content--oshirase, .ec-largeModal__content--hierarchy + .ec-largeModal__content--suggest, .ec-largeModal__content + .ec-largeModal__content--hierarchy, .ec-largeModal__content--oshirase + .ec-largeModal__content--hierarchy, .ec-largeModal__content--suggest + .ec-largeModal__content--hierarchy, .ec-largeModal__content--hierarchy + .ec-largeModal__content--hierarchy, .ec-largeModal__content--searchProduct + .ec-largeModal__content, .ec-largeModal__content--searchProduct + .ec-largeModal__content--oshirase, .ec-largeModal__content--searchProduct + .ec-largeModal__content--suggest, .ec-largeModal__content--searchProduct + .ec-largeModal__content--hierarchy, .ec-largeModal__content + .ec-largeModal__content--searchProduct, .ec-largeModal__content--oshirase + .ec-largeModal__content--searchProduct, .ec-largeModal__content--suggest + .ec-largeModal__content--searchProduct, .ec-largeModal__content--hierarchy + .ec-largeModal__content--searchProduct, .ec-largeModal__content--searchProduct + .ec-largeModal__content--searchProduct {
border-top: 1px solid #efefef;
}
.ec-largeModal__content__title {
font-size: 1.6rem;
font-weight: bold;
padding-bottom: 10px;
line-height: 1;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content__title {
font-size: 2rem;
padding-bottom: 15px;
}
}
.ec-largeModal__content__title:has(button) {
display: flex;
align-items: center;
}
.ec-largeModal__content__item {
padding: 0;
}
.ec-largeModal__content__item + .ec-largeModal__content__item {
border-top: 1px solid #efefef;
}
.ec-largeModal__content--suggest .ec-largeModal__content__item + .ec-largeModal__content__title {
margin-top: 20px;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--suggest .ec-largeModal__content__item + .ec-largeModal__content__title {
margin-top: 30px;
}
}
.ec-largeModal__content--searchProduct {
margin: 0 5px;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--searchProduct {
margin: 0;
padding: 15px 0;
background: #fff;
}
}
.ec-largeModal__content--hierarchy {
padding: 0;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--hierarchy {
padding: 15px 0 0;
}
}
.ec-largeModal__content--hierarchy .ec-largeModal__content__title {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 0;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--hierarchy .ec-largeModal__content__title {
padding-top: 15px;
padding-left: 0;
}
}
.ec-largeModal__content--hierarchy ul.ec-largeModal__content__item {
list-style: none;
margin-bottom: 0;
}
.ec-largeModal__content--hierarchy ul.ec-largeModal__content__item li:first-child {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--hierarchy ul.ec-largeModal__content__item li:first-child {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 0;
}
}
.ec-largeModal__content--hierarchy ul.ec-largeModal__content__item ul {
border-top: 1px solid #efefef;
border-left: 10px solid #efefef;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--hierarchy ul.ec-largeModal__content__item ul {
border-left: none;
padding-left: 20px;
}
}
.ec-largeModal__content--suggest {
padding: 30px 15px 15px;
}
.ec-largeModal__content--suggest .ec-largeModal__content__title {
padding-bottom: 15px;
}
.ec-headerSearch__suggest .ec-largeModal__content--suggest {
display: none;
}
.ec-largeModal__content--oshirase {
padding: 20px 0;
max-width: 1030px;
margin: auto;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--oshirase {
padding: 30px 15px;
}
}
.ec-largeModal__content--oshirase .ec-largeModal__content__title {
display: flex;
justify-content: space-between;
align-items: end;
padding: 0 15px 5px;
border-bottom: 1px solid #efefef;
}
.ec-largeModal__content--oshirase .ec-largeModal__content__title a {
color: inherit;
text-decoration: none;
}
.ec-largeModal__content--oshirase .ec-largeModal__content__title a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-largeModal__content--oshirase .ec-largeModal__content__title a {
transition: all 0.5s ease 0s;
}
.ec-largeModal__content--oshirase .ec-largeModal__content__title a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--oshirase .ec-largeModal__content__title {
padding: 0 0 15px;
}
}
.ec-largeModal__content--oshirase .ec-largeModal__content__title a {
font-size: 12px;
line-height: 1;
font-weight: normal;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--oshirase .ec-largeModal__content__title a {
font-size: 16px;
}
}
.ec-largeModal__content--oshirase .ec-largeModal__content__title a i {
font-size: 14px;
}
@media only screen and (min-width: 1100px) {
.ec-largeModal__content--oshirase .ec-largeModal__content__title a i {
font-size: 18px;
}
}
.ec-largeModal__content--oshirase + .ec-largeModal__content--oshirase {
border-top: none;
}
.btn_history_delete--all {
display: flex;
align-items: center;
margin-left: 0.5em;
padding: 0.5em;
border: none;
border-radius: 0.3em;
font-size: 0.8em;
color: inherit;
transition: all 0.5s ease 0s;
}
.btn_history_delete--all:hover {
opacity: 0.7;
}
.btn_history_delete--all i {
margin-right: 0.1em;
font-size: 1.2em;
transform: translateY(1px);
}
.btn_history_delete {
display: flex;
align-items: center;
padding: 0;
border: none;
background: none;
font-size: 1.2rem;
color: #aaa;
white-space: nowrap;
transition: all 0.5s ease 0s;
}
@media only screen and (min-width: 1100px) {
.btn_history_delete {
font-size: 1.6rem;
}
}
.btn_history_delete:hover {
opacity: 0.7;
}
.btn_history_delete i {
margin-right: 0.1em;
font-size: 1.2em;
transform: translateY(1px);
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
新商品 new_item.twig
おすすめ商品 recommend_product_block.twig
*/
.ec-linkShelfRole {
position: relative;
padding-top: 50px;
margin-bottom: 50px;
}
.ec-linkShelfRole:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: 0;
}
@media only screen and (min-width: 768px) {
.ec-linkShelfRole:before {
width: calc(100% - 15px * 2);
left: 15px;
}
}
.ec-linkShelfRole:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
.ec-linkShelfRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
margin-bottom: 50px;
padding-top: 100px;
padding-bottom: 50px;
}
.ec-linkShelfRole:after {
content: " ";
display: table;
}
.ec-linkShelfRole:after {
clear: both;
}
.ec-linkShelfRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-linkShelfRole img {
max-width: 100%;
height: auto;
}
.ec-linkShelfRole html {
box-sizing: border-box;
}
.ec-linkShelfRole *,
.ec-linkShelfRole *::before,
.ec-linkShelfRole *::after {
box-sizing: inherit;
}
}
@media only screen and (min-width: 768px) {
.ec-linkShelfRole__listLink a {
transition: all 0.5s ease 0s;
}
.ec-linkShelfRole__listLink a:hover {
opacity: 0.7;
}
}
.ec-linkShelfRole__listLink .ec-blockBtn {
display: flex;
align-items: center;
justify-content: center;
width: 271px;
height: 43px;
margin: 0 auto;
border-radius: 3px;
border: none;
background: #469bff;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-linkShelfRole__listLink .ec-blockBtn {
height: 50px;
font-size: 2rem;
}
}
.ec-recommendRole .ec-linkShelfRole__listLink .ec-blockBtn {
background: #FFA0A0;
}
.ec-linkShelfGrid {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 1030px;
margin: 0 auto 37px;
padding: 0;
list-style: none;
}
.ec-linkShelfGrid a {
color: inherit;
text-decoration: none;
}
.ec-linkShelfGrid a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-linkShelfGrid {
max-width: calc(100% - 170px);
margin: 0 auto 40px;
padding-inline: 0;
}
}
@media only screen and (min-width: 1210px) {
.ec-linkShelfGrid {
max-width: 1030px;
}
}
.ec-linkShelfGrid .slick-list {
padding-inline: 12%;
}
@media only screen and (min-width: 768px) {
.ec-linkShelfGrid .slick-list {
padding-inline: 0;
}
}
.ec-linkShelfGrid__item {
display: flex;
flex-direction: column;
width: 100%;
padding: 10px 15px;
position: relative;
}
@media only screen and (min-width: 768px) {
.ec-linkShelfGrid__item a {
transition: all 0.5s ease 0s;
}
.ec-linkShelfGrid__item a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-linkShelfGrid__item {
width: 50%;
min-height: 300px;
}
}
@media only screen and (min-width: 1100px) {
.ec-linkShelfGrid__item {
width: 33.3333333333%;
min-height: 319px;
}
}
.ec-linkShelfGrid__item img {
width: 100%;
max-height: 100%;
aspect-ratio: 1/1;
margin-bottom: 10px;
}
.ec-linkShelfGrid__item__release {
margin-bottom: 5px;
color: #469bff;
font-size: 1rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-linkShelfGrid__item__release {
font-size: 1.2rem;
}
}
.ec-linkShelfGrid__item__name {
margin-bottom: 5px;
font-size: 1.2rem;
font-weight: bold;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 768px) {
.ec-linkShelfGrid__item__name {
font-size: 1.4rem;
}
}
.ec-linkShelfGrid__item__copyright {
font-size: 1rem;
font-weight: 300;
text-align: justify;
word-break: break-all;
}
.ec-linkShelfGrid__item__tagList {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 0;
position: absolute;
top: 10px;
left: 15px;
}
.ec-linkShelfGrid__item__tagList span {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 9px;
border-radius: 3px;
background: #469bff;
color: #fff;
font-size: 1rem;
font-weight: bold;
line-height: 1;
}
.ec-linkShelfGrid.slick-slider .slick-arrow {
width: 100%;
padding-top: 36%;
position: absolute;
top: 0;
z-index: 1;
pointer-events: none;
}
@media only screen and (min-width: 1100px) {
.ec-linkShelfGrid.slick-slider .slick-arrow {
padding-top: 24%;
}
}
.ec-linkShelfGrid.slick-slider .arrow {
width: 90px;
height: 90px;
border: none;
background: none;
position: absolute;
bottom: 0;
pointer-events: all;
}
.ec-linkShelfGrid.slick-slider .arrow:hover:before, .ec-linkShelfGrid.slick-slider .arrow:focus-visible:before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 999px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
}
.ec-linkShelfGrid.slick-slider .arrow:after {
content: "";
width: 38px;
height: 38px;
border-top: 5px solid #efefef;
border-right: 5px solid #efefef;
position: absolute;
top: 50%;
left: 50%;
}
.ec-linkShelfGrid.slick-slider .prev {
right: 100%;
}
.ec-linkShelfGrid.slick-slider .prev:after {
transform: translate(-22%, -50%) rotate(-135deg);
}
.ec-linkShelfGrid.slick-slider .next {
left: 100%;
}
.ec-linkShelfGrid.slick-slider .next::after {
transform: translate(-72%, -50%) rotate(45deg);
}
.ec-linkShelfGrid.slick-slider .arrow.slick-disabled:before {
border-color: transparent;
}
#recommend_slider .ec-linkShelfGrid__item:not(:first-child),
.newItem_slider .ec-linkShelfGrid__item:not(:first-child) {
display: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
商品情報 popup
*/
.modal-open {
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.modal-open {
padding-right: 15px;
}
}
.modal {
display: none;
width: 100vw;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
}
@media only screen and (min-width: 768px) {
.modal {
padding-right: 15px;
pointer-events: none;
}
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
pointer-events: auto;
}
.modal-content {
position: relative;
background-color: #F3F3F3;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
background-clip: padding-box;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
filter: alpha(opacity=0);
}
.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50);
}
.modal-header {
padding: 16px 55px 16px 16px;
min-height: 16.42857143px;
}
.modal-header .close {
padding: 0 10px;
position: absolute;
right: 10px;
top: 10px;
font-size: 2.6rem;
}
.modal-header .close:hover {
opacity: 0.8;
}
.modal-title {
margin: 0;
font-size: 1.6rem;
line-height: 1.42857143;
}
.modal-body {
position: relative;
padding: 0 16px 16px;
}
.modal-body__inner {
background: #ffffff;
padding: 5px;
}
.modal-body__title {
font-weight: bold;
text-align: center;
padding: 5px;
border-bottom: 2px solid #469bff;
}
.modal-body__list, .modal-body__list--ticket, .modal-body__list--difficulty {
font-size: 1.2rem;
margin: 10px auto 0;
}
.modal-body__list:after, .modal-body__list--ticket:after, .modal-body__list--difficulty:after {
content: "";
display: table;
clear: both;
}
.modal-body__list dt, .modal-body__list--ticket dt, .modal-body__list--difficulty dt, .modal-body__list dd, .modal-body__list--ticket dd, .modal-body__list--difficulty dd {
margin-bottom: 5px;
}
.modal-body__list dt, .modal-body__list--ticket dt, .modal-body__list--difficulty dt {
float: left;
}
.modal-body__list--difficulty {
width: 12em;
}
.modal-body__list--difficulty dt {
width: 6em;
}
.modal-body__list--difficulty dd {
margin-left: 6em;
}
.modal-body__list--ticket {
width: 22em;
}
.modal-body__list--ticket dt {
width: 5em;
font-weight: bold;
}
.modal-body__list--ticket dd {
margin-left: 5em;
}
.modal-body__contents, .modal-body__contents--ticket, .modal-body__contents--difficulty {
font-size: 1.2rem;
margin: 10px auto 0;
line-height: 1.7;
}
.modal-body__contents br, .modal-body__contents--ticket br, .modal-body__contents--difficulty br {
height: 1em;
}
.modal-footer {
padding: 16px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
max-width: 600px;
margin: 30px auto;
}
.modal-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
ビジネス会員登録
*/
.new-member__text {
padding: 10px 20px;
}
.new-member__business-list {
list-style: none;
line-height: 1.7;
}
.new-member__business-list li span {
font-weight: bold;
}
.new-member__business-list li::before {
content: "■";
color: #274a78;
}
.new-member__paid-text {
border: 1px solid #274a78;
border-radius: 5px;
padding: 10px;
line-height: 1.7;
font-size: 1.4rem;
}
.new-member__paid-text p,
.new-member__paid-text ~ #confirm_box__message {
margin-top: 1em;
margin-bottom: 1em;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
フッター 閲覧履歴
*/
.ec-productHistoryRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
position: relative;
padding-top: 50px;
margin-bottom: 50px;
}
.ec-productHistoryRole:after {
content: " ";
display: table;
}
.ec-productHistoryRole:after {
clear: both;
}
.ec-productHistoryRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-productHistoryRole img {
max-width: 100%;
height: auto;
}
.ec-productHistoryRole html {
box-sizing: border-box;
}
.ec-productHistoryRole *,
.ec-productHistoryRole *::before,
.ec-productHistoryRole *::after {
box-sizing: inherit;
}
.ec-productHistoryRole:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: 0;
}
@media only screen and (min-width: 768px) {
.ec-productHistoryRole:before {
width: calc(100% - 15px * 2);
left: 15px;
}
}
.ec-productHistoryRole:last-child {
margin-bottom: 0;
}
.ec-productHistoryRole__itemList {
list-style: none;
margin: 0 -10px;
padding: 0;
}
.ec-productHistoryRole__item {
padding: 0 10px;
}
@media only screen and (min-width: 768px) {
.ec-productHistoryRole__item {
width: 100px;
}
}
.ec-productHistoryRole .slick-slider {
margin-bottom: 0;
}
.ec-productHistoryRole .slick-list {
margin-right: -5px;
margin-left: -5px;
padding-right: 15%;
padding-left: 5px;
}
@media only screen and (min-width: 768px) {
.ec-productHistoryRole .slick-list {
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
}
}
.ec-productHistoryRole .slick-track {
margin-left: 0;
}
#historySlider .ec-productHistoryRole__item:not(:first-child) {
display: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
* 関連ワード Product/list.twig
*/
.ec-relatedWordRole {
display: none;
flex-direction: column;
width: 100%;
margin: 0 auto;
padding-top: 8px;
border-top: 1px solid #efefef;
font-size: 1.2rem;
white-space: nowrap;
}
.ec-relatedWordRole a {
color: inherit;
text-decoration: none;
}
.ec-relatedWordRole a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-relatedWordRole a {
transition: all 0.5s ease 0s;
}
.ec-relatedWordRole a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 1100px) {
.ec-relatedWordRole {
flex-direction: row;
max-width: 1310px;
margin-bottom: 0;
padding: 15px 15px 0;
border: 0;
}
}
.ec-relatedWordRole.show {
display: flex;
}
.ec-relatedWordRole__header {
margin-bottom: 5px;
padding-left: 15px;
}
@media only screen and (min-width: 1100px) {
.ec-relatedWordRole__header {
margin-bottom: 0;
padding-top: 6px;
padding-left: 0;
}
}
.ec-relatedWordRole__body {
padding-inline: 15px;
padding-bottom: 8px;
overflow-x: auto;
}
@media only screen and (min-width: 1100px) {
.ec-relatedWordRole__body {
padding: 0;
overflow-x: hidden;
}
}
.ec-relatedWordRole ul {
list-style: none;
display: flex;
gap: 10px;
width: -moz-fit-content;
width: fit-content;
margin: 0;
padding: 0;
}
@media only screen and (min-width: 1100px) {
.ec-relatedWordRole ul {
flex-wrap: wrap;
}
}
.ec-relatedWordRole li a {
display: block;
padding: 5px;
border: 1px solid #000;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
商品レビュー
*/
.review, .review--pc, .review--sp {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
}
@media only screen and (min-width: 768px) {
.review a, .review--pc a, .review--sp a {
transition: all 0.5s ease 0s;
}
.review a:hover, .review--pc a:hover, .review--sp a:hover {
opacity: 0.7;
}
}
.review:after, .review--pc:after, .review--sp:after {
content: " ";
display: table;
}
.review:after, .review--pc:after, .review--sp:after {
clear: both;
}
.review textarea, .review--pc textarea, .review--sp textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.review img, .review--pc img, .review--sp img {
max-width: 100%;
height: auto;
}
.review html, .review--pc html, .review--sp html {
box-sizing: border-box;
}
.review *, .review--pc *, .review--sp *,
.review *::before,
.review--pc *::before,
.review--sp *::before,
.review *::after,
.review--pc *::after,
.review--sp *::after {
box-sizing: inherit;
}
.review__inner {
margin-inline: -15px;
padding: 30px 15px 20px;
border-top: 1px solid #efefef;
font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
.review__inner {
font-size: 1.6rem;
}
}
@media only screen and (min-width: 1100px) {
.review__inner {
margin-inline: 0;
padding: 30px 20px;
}
}
.review--sp {
width: auto;
margin-inline: -15px;
padding: 20px 15px;
border-top: 1px solid #efefef;
}
@media only screen and (min-width: 1100px) {
.review--sp {
display: none;
}
}
.review--pc {
display: none;
}
@media only screen and (min-width: 1100px) {
.review--pc {
display: block;
padding: 30px 20px;
border-top: 1px solid #efefef;
}
}
.review__header {
display: inline-block;
margin-bottom: 10px;
font-size: 1.6rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.review__header {
margin-bottom: 20px;
font-size: 2.4rem;
}
#product_review_area .review__header {
margin-bottom: 5px;
}
}
.review__header h3, .review__header .h3 {
display: inline-block;
margin: 0;
font-size: inherit;
font-weight: bold;
}
.review__count {
margin-left: 15px;
}
@media only screen and (min-width: 768px) {
#product_review_area .review__count {
margin-left: 10px;
font-size: 1.8rem;
}
}
.review__link {
margin-left: 25px;
color: currentColor !important;
font-size: 1.4rem;
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-offset: 2.4px;
}
@media only screen and (min-width: 768px) {
.review__link {
font-size: 1.6rem;
}
}
.review__star {
font-weight: bold;
}
.review__star__count {
font-size: 1.6rem;
}
@media only screen and (min-width: 768px) {
.review__star__count {
font-size: 1.8rem;
}
}
#product_review_area .review__star {
margin-bottom: 30px;
}
.review__star span {
vertical-align: middle;
line-height: 1;
}
.review .review_list, .review--sp .review_list, .review--pc .review_list {
list-style: none;
margin: 0;
padding: 0;
font-size: 1.4rem;
line-height: 1.7;
}
@media only screen and (min-width: 768px) {
.review .review_list, .review--sp .review_list, .review--pc .review_list {
font-size: 1.6rem;
}
}
.review .review_list li, .review--sp .review_list li, .review--pc .review_list li {
margin: 0 0 30px;
padding: 0;
}
.review .review_list li:not(:first-child), .review--sp .review_list li:not(:first-child), .review--pc .review_list li:not(:first-child) {
display: none;
}
.review .review_date, .review--sp .review_date, .review--pc .review_date {
margin-bottom: 10px;
}
.review .review_date span, .review--sp .review_date span, .review--pc .review_date span {
display: inline-block;
}
.review .review_title, .review--sp .review_title, .review--pc .review_title {
margin-bottom: 10px;
margin-left: 1px;
}
.review .recommend_average, .review--sp .recommend_average, .review--pc .recommend_average,
.review .recommend_level,
.review--sp .recommend_level,
.review--pc .recommend_level {
color: #f6d471;
}
.review .recommend_average .negative, .review--sp .recommend_average .negative, .review--pc .recommend_average .negative,
.review .recommend_level .negative,
.review--sp .recommend_level .negative,
.review--pc .recommend_level .negative {
color: #efefef;
}
.review .recommend_average, .review--sp .recommend_average, .review--pc .recommend_average {
margin-left: 12px;
font-size: 1.8rem;
}
.review .recommend_level, .review--sp .recommend_level, .review--pc .recommend_level {
margin-right: 12px;
font-size: 1.6rem;
}
.review .recommend_level_num, .review--sp .recommend_level_num, .review--pc .recommend_level_num {
margin-right: 25px;
font-weight: bold;
}
.review .recommend_date, .review--sp .recommend_date, .review--pc .recommend_date,
.review .recommend_sex,
.review--sp .recommend_sex,
.review--pc .recommend_sex {
margin-right: 20px;
}
.review .recommend_date, .review--sp .recommend_date, .review--pc .recommend_date,
.review .recommend_sex,
.review--sp .recommend_sex,
.review--pc .recommend_sex,
.review .recommend_comment,
.review--sp .recommend_comment,
.review--pc .recommend_comment {
color: #333333;
}
.review .recommend_comment, .review--sp .recommend_comment, .review--pc .recommend_comment {
line-height: 1.7;
}
.review .ec-blockBtn, .review--sp .ec-blockBtn, .review--pc .ec-blockBtn {
width: 270px;
margin: 0 auto;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
/*
フッター SNS
*/
.ec-snsRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
position: relative;
padding-top: 50px;
margin-bottom: 50px;
}
.ec-snsRole:after {
content: " ";
display: table;
}
.ec-snsRole:after {
clear: both;
}
.ec-snsRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-snsRole img {
max-width: 100%;
height: auto;
}
.ec-snsRole html {
box-sizing: border-box;
}
.ec-snsRole *,
.ec-snsRole *::before,
.ec-snsRole *::after {
box-sizing: inherit;
}
.ec-snsRole:before {
content: "";
display: block;
width: 100%;
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: 0;
}
@media only screen and (min-width: 768px) {
.ec-snsRole:before {
width: calc(100% - 15px * 2);
left: 15px;
}
}
.ec-snsRole:last-child {
margin-bottom: 0;
}
.ec-snsRole .ec-blockHeading {
margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
.ec-snsRole .ec-blockHeading {
margin-bottom: 50px;
}
}
.ec-snsRole__itemList {
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: column;
margin: 0 -15px -20px;
padding: 0;
}
@media only screen and (min-width: 768px) {
.ec-snsRole__itemList {
flex-direction: row;
}
}
.ec-snsRole__item {
width: 100%;
margin-bottom: 20px;
padding: 0 15px;
}
@media only screen and (min-width: 768px) {
.ec-snsRole__item {
width: 25%;
}
}
.ec-snsRole__itemLink {
display: flex;
height: 100%;
min-height: 87.2px;
color: currentColor;
}
.ec-snsRole__itemLink:hover, .ec-snsRole__itemLink:focus {
opacity: 0.7;
transition: all 0.5s ease 0s;
color: currentColor;
}
.ec-snsRole__itemIcon {
display: flex;
align-items: center;
justify-content: center;
width: 75px;
}
.ec-snsRole__itemIcon img:is([src*=tiktok]) {
width: 37px;
}
.ec-snsRole__itemIcon img:is([src*=twitter], [src*=youtube], [src*=instagram], [src*=facebook], [src*=line]) {
width: 45px;
}
.ec-snsRole__itemText {
display: flex;
align-items: center;
width: calc(100% - 75px);
padding: 10px 10px 10px 0;
font-size: 1.2rem;
line-height: 1.7;
text-align: justify;
word-break: break-all;
}
@media only screen and (min-width: 768px) {
.ec-snsRole__itemText {
padding: 14px 14px 14px 0;
font-size: 1.4rem;
line-height: 1.45;
}
}
.ec-snsRole__itemName {
font-weight: bold;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
トップページ ヘッダー直下お知らせ index.tiwg
*/
@media only screen and (min-width: 768px) {
.ec-topNewsRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
margin-bottom: 30px;
padding-top: 20px;
}
.ec-topNewsRole:after {
content: " ";
display: table;
}
.ec-topNewsRole:after {
clear: both;
}
.ec-topNewsRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-topNewsRole img {
max-width: 100%;
height: auto;
}
.ec-topNewsRole html {
box-sizing: border-box;
}
.ec-topNewsRole *,
.ec-topNewsRole *::before,
.ec-topNewsRole *::after {
box-sizing: inherit;
}
}
.ec-topNewsRole__inner {
padding: 0 15px;
}
@media only screen and (min-width: 768px) {
.ec-topNewsRole__inner {
padding: 5px 20px;
background: #efefef;
}
}
.ec-topNewsRole__shipping {
padding: 5px 0;
text-align: right;
font-size: 1.3rem;
position: relative;
line-height: 1;
font-feature-settings: "palt";
letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
.ec-topNewsRole__shipping {
padding: 10px 0;
text-align: left;
font-size: 1.6rem;
}
}
.ec-topNewsRole__shipping:before {
content: "";
display: block;
width: calc(100% + 2 * 15px);
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: -15px;
}
@media only screen and (min-width: 768px) {
.ec-topNewsRole__shipping:before {
display: none;
}
}
.ec-topNewsRole__shippingIcon {
font-size: 1.2em;
}
.ec-topNewsRole__shippingIcon i {
vertical-align: middle;
}
.ec-topNewsRole .ec-topNewsRole__news {
position: relative;
padding: 5px 0;
}
.ec-topNewsRole .ec-topNewsRole__news:before {
content: "";
display: block;
width: calc(100% + 2 * 15px);
height: 1px;
background: #efefef;
position: absolute;
top: 0;
left: -15px;
}
@media only screen and (min-width: 768px) {
.ec-topNewsRole .ec-topNewsRole__news:before {
display: none;
}
}
.ec-topNewsRole .ec-topNewsRole__newsHeading {
cursor: pointer;
}
.ec-topNewsRole .ec-topNewsRole__newsTitle {
width: 100%;
font-size: 1.2rem;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-topNewsRole .ec-topNewsRole__newsTitle a {
transition: all 0.5s ease 0s;
}
.ec-topNewsRole .ec-topNewsRole__newsTitle a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-topNewsRole .ec-topNewsRole__newsTitle {
font-size: 1.4rem;
}
}
.ec-topNewsRole .ec-topNewsRole__newsTitle a {
display: block;
color: currentColor;
}
.ec-topNewsRole .ec-topNewsRole__newsTitle span {
display: inline-block;
max-width: 100%;
padding: 5px 0;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (min-width: 768px) {
.ec-topNewsRole .ec-topNewsRole__newsTitle span {
padding: 8px 0;
}
}
.ec-topNewsRole .ec-topNewsRole__newsTitle span:before {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
bottom: 3px;
background: currentColor;
}
@media only screen and (min-width: 768px) {
.ec-topNewsRole .ec-topNewsRole__newsTitle span:before {
bottom: 6px;
}
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/*
フッター上 ページ上部へ*/
.ec-toTopRole {
padding: 30px 0;
border-top: 1px solid #efefef;
}
@media only screen and (min-width: 768px) {
.ec-toTopRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
padding: 50px 0;
}
.ec-toTopRole:after {
content: " ";
display: table;
}
.ec-toTopRole:after {
clear: both;
}
.ec-toTopRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-toTopRole img {
max-width: 100%;
height: auto;
}
.ec-toTopRole html {
box-sizing: border-box;
}
.ec-toTopRole *,
.ec-toTopRole *::before,
.ec-toTopRole *::after {
box-sizing: inherit;
}
}
.ec-toTopRole .ec-toTopBtn {
display: inline-block;
margin-bottom: 0;
padding: 10px 16px;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
font-size: 1.8rem;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-decoration: none;
transition: all 0.5s ease 0s;
color: #333333;
background-color: #fff;
border-color: #333333;
display: block;
width: 270px;
margin: auto;
}
.ec-toTopRole .ec-toTopBtn:focus, .ec-toTopRole .ec-toTopBtn.focus, .ec-toTopRole .ec-toTopBtn:active:focus, .ec-toTopRole .ec-toTopBtn:active.focus, .ec-toTopRole .ec-toTopBtn.active:focus, .ec-toTopRole .ec-toTopBtn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.ec-toTopRole .ec-toTopBtn:hover, .ec-toTopRole .ec-toTopBtn:focus, .ec-toTopRole .ec-toTopBtn.focus {
opacity: 0.7;
text-decoration: none;
color: #333333;
}
.ec-toTopRole .ec-toTopBtn:active, .ec-toTopRole .ec-toTopBtn.active {
outline: 0;
background-image: none;
}
.ec-toTopRole .ec-toTopBtn.disabled, .ec-toTopRole .ec-toTopBtn[disabled], fieldset[disabled] .ec-toTopRole .ec-toTopBtn {
cursor: not-allowed;
filter: alpha(opacity=65);
opacity: 0.65;
}
.ec-toTopRole .ec-toTopBtn .ec-icon img {
width: 1em;
vertical-align: text-bottom;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
.ec-wpRole {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.4;
-webkit-text-size-adjust: 100%;
width: 100%;
max-width: 1310px;
padding-left: 0;
padding-right: 0;
}
.ec-wpRole:after {
content: " ";
display: table;
}
.ec-wpRole:after {
clear: both;
}
.ec-wpRole textarea { /* for chrome fontsize bug */
font-family: sans-serif;
}
.ec-wpRole img {
max-width: 100%;
height: auto;
}
.ec-wpRole html {
box-sizing: border-box;
}
.ec-wpRole *,
.ec-wpRole *::before,
.ec-wpRole *::after {
box-sizing: inherit;
}
@media only screen and (min-width: 768px) {
.ec-wpRole {
padding-left: 15px;
padding-right: 15px;
}
}
.ec-wpRole .aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
.ec-wpRole .main-0 {
clear: both;
}
.ec-wpRole .main-0:after {
content: "";
display: block;
clear: both;
}
.ec-wpRole .main-1, .ec-wpRole .main-2 {
margin: 0;
}
.ec-wpRole .main-1 p, .ec-wpRole .main-2 p {
padding: 0 10px 20px 0 !important;
}
.ec-wpRole .main-1 p:first-child, .ec-wpRole .main-2 p:first-child {
margin-top: 0;
}
@media only screen and (min-width: 768px) {
.ec-wpRole .main-1 {
float: left;
width: 48%;
}
}
@media only screen and (min-width: 768px) {
.ec-wpRole .main-2 {
float: right;
width: 48%;
}
}
@media only screen and (min-width: 768px) {
.ec-wpRole .collapse .main-1 {
float: left;
width: 50%;
}
}
@media only screen and (min-width: 768px) {
.ec-wpRole .collapse .main-2 {
float: right;
width: 50%;
}
}
.ec-wpRole .main-0-col4 {
display: flex;
justify-content: space-between;
}
.ec-wpRole .main-0-col4 .main-1, .ec-wpRole .main-0-col4 .main-2, .ec-wpRole .main-0-col4 .main-3, .ec-wpRole .main-0-col4 .main-4 {
float: none;
width: 23%;
}
.ec-wpRole .main-0-col4.collapse .main-1, .ec-wpRole .main-0-col4.collapse .main-2, .ec-wpRole .main-0-col4.collapse .main-3, .ec-wpRole .main-0-col4.collapse .main-4 {
float: none;
width: 25%;
}
@media screen and (max-width: 1000px) {
.ec-wpRole .main-0-col4 {
flex-wrap: wrap;
}
.ec-wpRole .main-0-col4 .main-1, .ec-wpRole .main-0-col4 .main-2, .ec-wpRole .main-0-col4 .main-3, .ec-wpRole .main-0-col4 .main-4 {
width: 48%;
}
.ec-wpRole .main-0-col4.collapse .main-1, .ec-wpRole .main-0-col4.collapse .main-2, .ec-wpRole .main-0-col4.collapse .main-3, .ec-wpRole .main-0-col4.collapse .main-4 {
width: 50%;
}
}
.ec-wpRole .ec-pageHeader, .ec-wpRole .ec-pageHeader--note {
margin-inline: 0 !important;
}
.ec-wpRole .ec-pageHeader + *, .ec-wpRole .ec-pageHeader--note + * {
margin-top: 20px;
}
@media only screen and (min-width: 768px) {
.ec-wpRole .ec-pageHeader + *, .ec-wpRole .ec-pageHeader--note + * {
margin-top: 30px;
}
}
.ec-wpRole .ec-pageHeader + .ec-pageSwitchNavi, .ec-wpRole .ec-pageHeader--note + .ec-pageSwitchNavi, .ec-wpRole .ec-pageHeader + .ec-loginGuideLink, .ec-wpRole .ec-pageHeader--note + .ec-loginGuideLink, .ec-wpRole .ec-pageHeader + .ec-loginGuideLink--note, .ec-wpRole .ec-pageHeader--note + .ec-loginGuideLink--note, .ec-wpRole .ec-pageHeader + .ec-navlistRole, .ec-wpRole .ec-pageHeader--note + .ec-navlistRole {
margin-top: 0;
}
.ec-wpRole .ec-pageHeader + .ec-pageSwitchNavi + *, .ec-wpRole .ec-pageHeader--note + .ec-pageSwitchNavi + *, .ec-wpRole .ec-pageHeader + .ec-loginGuideLink + *, .ec-wpRole .ec-pageHeader--note + .ec-loginGuideLink + *, .ec-wpRole .ec-pageHeader + .ec-loginGuideLink--note + *, .ec-wpRole .ec-pageHeader--note + .ec-loginGuideLink--note + *, .ec-wpRole .ec-pageHeader + .ec-navlistRole + *, .ec-wpRole .ec-pageHeader--note + .ec-navlistRole + * {
margin-top: 20px;
}
@media only screen and (min-width: 768px) {
.ec-wpRole .ec-pageHeader + .ec-pageSwitchNavi + *, .ec-wpRole .ec-pageHeader--note + .ec-pageSwitchNavi + *, .ec-wpRole .ec-pageHeader + .ec-loginGuideLink + *, .ec-wpRole .ec-pageHeader--note + .ec-loginGuideLink + *, .ec-wpRole .ec-pageHeader + .ec-loginGuideLink--note + *, .ec-wpRole .ec-pageHeader--note + .ec-loginGuideLink--note + *, .ec-wpRole .ec-pageHeader + .ec-navlistRole + *, .ec-wpRole .ec-pageHeader--note + .ec-navlistRole + * {
margin-top: 30px;
}
}
@media only screen and (min-width: 768px) {
.ec-wpRole .ec-pageHeader h1, .ec-wpRole .ec-pageHeader--note h1, .ec-wpRole .ec-pageHeader .h1, .ec-wpRole .ec-pageHeader--note .h1 {
max-width: none;
}
}
.ec-wpRole .ec-navlistRole {
margin-inline: auto;
}
@media only screen and (min-width: 768px) {
.ec-wpRole .ec-navlistRole {
max-width: none;
}
}
.ec-wpRole__squareLink {
width: 100%;
border: 3px #ff2f7d solid;
padding: 40px 0;
color: #ff2f7d !important;
text-decoration: none !important;
display: block;
transition: all 0.5s ease 0s;
text-align: center;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__squareLink:hover {
background: #f8f8f8;
}
}
.ec-wpRole__squareLink p {
padding: 20px;
line-height: 160%;
letter-spacing: 0.5px;
text-align: center !important;
margin: 0 auto !important;
}
.ec-wpRole__recommendKeywordsSearch {
margin-bottom: 30px;
padding-inline: 15px;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__recommendKeywordsSearch {
padding-inline: 0;
}
}
.ec-wpRole__recommendKeywordsSearch__title {
font-size: 1.4rem;
font-weight: bold;
padding-bottom: 20px;
line-height: 1;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__recommendKeywordsSearch__title {
font-size: 1.8rem;
padding-bottom: 15px;
}
}
.ec-wpRole__recommendKeywordsSearch__tags {
list-style: none;
margin: -5px;
padding: 0;
}
.ec-wpRole__recommendKeywordsSearch__tags li {
display: inline-block;
font-size: 0;
padding: 5px;
}
.ec-wpRole__recommendKeywordsSearch__tags li a {
display: block;
padding: 8px 10px;
border: 1px solid #000;
font-size: 1.2rem;
color: #000;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__recommendKeywordsSearch__tags li a {
font-size: 1.4rem;
}
.ec-wpRole__recommendKeywordsSearch__tags li a:hover {
color: #000;
}
}
.ec-wpRole__recommendKeywordsSearch + .ec-navlistRole {
border-top: 1px solid #efefef;
}
.ec-wpRole__articleSearch {
margin-bottom: 20px;
padding-inline: 15px;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch {
margin-bottom: 30px;
padding-inline: 0;
}
}
.ec-wpRole__articleSearch__header {
font-size: 1.4rem;
font-weight: bold;
color: #fff;
background: #333333;
padding: 7px 15px;
border-radius: 3px 3px 0 0;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch__header {
font-size: 1.8rem;
}
}
.ec-wpRole__articleSearch__formArea {
padding: 20px 15px;
border: 2px solid #efefef;
border-radius: 0 0 3px 3px;
}
.ec-wpRole__articleSearch__title {
font-size: 1.4rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch__title {
font-size: 1.6rem;
}
}
.ec-wpRole__articleSearch__form {
font-size: 1.4rem;
font-weight: bold;
margin-top: 15px;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch__form {
font-size: 1.6rem;
}
}
.ec-wpRole__articleSearch__form + .ec-wpRole__articleSearch__title {
margin-top: 20px;
}
.ec-wpRole__articleSearch__form .ec-input input, .ec-wpRole__articleSearch__form .ec-halfInput input, .ec-wpRole__articleSearch__form .ec-numberInput input, .ec-wpRole__articleSearch__form .ec-zipInput input, .ec-wpRole__articleSearch__form .ec-telInput input, .ec-wpRole__articleSearch__form .ec-select input, .ec-wpRole__articleSearch__form .ec-birth input {
background: #efefef;
border-color: #efefef;
}
.ec-wpRole__articleSearch__form__tags {
padding: 0;
margin: -5px;
font-size: 0;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch__form__tags a {
transition: all 0.5s ease 0s;
}
.ec-wpRole__articleSearch__form__tags a:hover {
opacity: 0.7;
}
}
.ec-wpRole__articleSearch__form__tags li {
display: inline-block;
padding: 5px;
}
.ec-wpRole__articleSearch__form__tags li a {
display: block;
padding: 8px 10px;
border: 1px solid #efefef;
border-radius: 3px;
font-size: 1.2rem;
font-weight: normal;
color: #000;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch__form__tags li a {
font-size: 1.4rem;
}
.ec-wpRole__articleSearch__form__tags li a:hover {
color: #000;
}
}
.ec-wpRole__articleSearch__form__tags li label {
display: block;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch__form__tags li label {
transition: all 0.5s ease 0s;
}
.ec-wpRole__articleSearch__form__tags li label:hover {
opacity: 0.7;
}
}
.ec-wpRole__articleSearch__form__tags li input[type=checkbox] {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
border: 0;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
}
.ec-wpRole__articleSearch__form__tags li input[type=checkbox]:checked + span {
border-color: #000;
background: #efefef;
}
.ec-wpRole__articleSearch__form__tags li input[type=checkbox]:checked + span:before {
content: "✔️";
display: inline-block;
margin-right: 7px;
}
.ec-wpRole__articleSearch__form__tags li span {
display: block;
padding: 8px 10px;
border: 1px solid #efefef;
border-radius: 3px;
font-size: 1.2rem;
font-weight: normal;
color: #000;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch__form__tags li span {
font-size: 1.4rem;
}
}
.ec-wpRole__articleSearch__searchBtnArea {
margin-top: 20px;
}
.ec-wpRole__articleSearch__searchBtnArea a,
.ec-wpRole__articleSearch__searchBtnArea button {
display: block;
text-align: center;
font-size: 1.6rem;
font-weight: bold;
background: #0097c6;
padding: 5px 15px;
border-radius: 5px;
border: none;
width: 100%;
max-width: 150px;
margin: auto;
color: #fff;
}
@media only screen and (min-width: 768px) {
.ec-wpRole__articleSearch__searchBtnArea a,
.ec-wpRole__articleSearch__searchBtnArea button {
margin: 0 auto 0 0;
}
}
.ec-wpRole .navigation.pagination {
display: block;
padding-inline: 15px;
text-align: right;
padding-top: 0;
}
@media only screen and (min-width: 1100px) {
.ec-wpRole .navigation.pagination {
padding-inline: 0;
}
}
.ec-wpRole .navigation.pagination li {
display: inline-block;
min-width: 29px;
text-align: center;
position: relative;
}
.ec-wpRole .navigation.pagination li a {
color: inherit;
text-decoration: none;
}
.ec-wpRole .navigation.pagination li a:hover {
text-decoration: none;
}
.ec-wpRole .navigation.pagination ul.page-numbers {
list-style: none;
list-style-type: none;
display: flex;
justify-content: flex-end;
gap: 5px;
margin: 0;
padding: 50px 0 0;
text-align: center;
}
.ec-wpRole .navigation.pagination ul.page-numbers .page-numbers {
display: flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 4.6rem;
height: 4.6rem;
color: inherit !important;
font-size: 2rem;
font-weight: bold;
text-decoration: none;
}
.ec-wpRole .navigation.pagination ul.page-numbers .page-numbers.current, .ec-wpRole .navigation.pagination ul.page-numbers .page-numbers:hover {
background: #efefef;
}
.ec-wpRole .ec-searchnavRole .navigation.pagination {
display: none;
}
@media only screen and (min-width: 1100px) {
.ec-wpRole .ec-searchnavRole .navigation.pagination {
display: block;
width: 50%;
padding: 0;
}
}
.ec-wpRole .ec-searchnavRole .navigation.pagination ul.page-numbers {
padding-top: 0;
}
.ec-wpRole .video {
max-width: 640px;
margin: auto !important;
}
.ec-wpRole .video__inner {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.ec-wpRole .video__inner iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 768px) {
.ec-wpWide a {
transition: all 0.5s ease 0s;
}
.ec-wpWide a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-wpWide button {
transition: all 0.5s ease 0s;
}
.ec-wpWide button:hover {
opacity: 0.7;
}
}
.ec-wpNarrow {
max-width: 1000px;
margin: 20px auto 0;
}
@media only screen and (min-width: 768px) {
.ec-wpNarrow a {
transition: all 0.5s ease 0s;
}
.ec-wpNarrow a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-wpNarrow {
margin-top: 30px;
}
}
.ec-wpArticle {
max-width: 1000px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle a {
transition: all 0.5s ease 0s;
}
.ec-wpArticle a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-wpArticle {
padding-left: 0;
padding-right: 0;
}
}
.ec-wpArticle h1, .ec-wpArticle .h1, .ec-wpArticle h2, .ec-wpArticle .h2, .ec-wpArticle h3, .ec-wpArticle .h3, .ec-wpArticle h4, .ec-wpArticle .h4, .ec-wpArticle h5, .ec-wpArticle .h5 {
margin: 50px 0 30px;
font-weight: bold;
line-height: 1.4;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle h1, .ec-wpArticle .h1, .ec-wpArticle h2, .ec-wpArticle .h2, .ec-wpArticle h3, .ec-wpArticle .h3, .ec-wpArticle h4, .ec-wpArticle .h4, .ec-wpArticle h5, .ec-wpArticle .h5 {
font-size: 3rem;
}
}
.ec-wpArticle h1 + h1, .ec-wpArticle .h1 + h1, .ec-wpArticle h1 + .h1, .ec-wpArticle .h1 + .h1, .ec-wpArticle h1 + h2, .ec-wpArticle .h1 + h2, .ec-wpArticle h1 + .h2, .ec-wpArticle .h1 + .h2, .ec-wpArticle h1 + h3, .ec-wpArticle .h1 + h3, .ec-wpArticle h1 + .h3, .ec-wpArticle .h1 + .h3, .ec-wpArticle h1 + h4, .ec-wpArticle .h1 + h4, .ec-wpArticle h1 + .h4, .ec-wpArticle .h1 + .h4, .ec-wpArticle h1 + h5, .ec-wpArticle .h1 + h5, .ec-wpArticle h1 + .h5, .ec-wpArticle .h1 + .h5, .ec-wpArticle h2 + h1, .ec-wpArticle .h2 + h1, .ec-wpArticle h2 + .h1, .ec-wpArticle .h2 + .h1, .ec-wpArticle h2 + h2, .ec-wpArticle .h2 + h2, .ec-wpArticle h2 + .h2, .ec-wpArticle .h2 + .h2, .ec-wpArticle h2 + h3, .ec-wpArticle .h2 + h3, .ec-wpArticle h2 + .h3, .ec-wpArticle .h2 + .h3, .ec-wpArticle h2 + h4, .ec-wpArticle .h2 + h4, .ec-wpArticle h2 + .h4, .ec-wpArticle .h2 + .h4, .ec-wpArticle h2 + h5, .ec-wpArticle .h2 + h5, .ec-wpArticle h2 + .h5, .ec-wpArticle .h2 + .h5, .ec-wpArticle h3 + h1, .ec-wpArticle .h3 + h1, .ec-wpArticle h3 + .h1, .ec-wpArticle .h3 + .h1, .ec-wpArticle h3 + h2, .ec-wpArticle .h3 + h2, .ec-wpArticle h3 + .h2, .ec-wpArticle .h3 + .h2, .ec-wpArticle h3 + h3, .ec-wpArticle .h3 + h3, .ec-wpArticle h3 + .h3, .ec-wpArticle .h3 + .h3, .ec-wpArticle h3 + h4, .ec-wpArticle .h3 + h4, .ec-wpArticle h3 + .h4, .ec-wpArticle .h3 + .h4, .ec-wpArticle h3 + h5, .ec-wpArticle .h3 + h5, .ec-wpArticle h3 + .h5, .ec-wpArticle .h3 + .h5, .ec-wpArticle h4 + h1, .ec-wpArticle .h4 + h1, .ec-wpArticle h4 + .h1, .ec-wpArticle .h4 + .h1, .ec-wpArticle h4 + h2, .ec-wpArticle .h4 + h2, .ec-wpArticle h4 + .h2, .ec-wpArticle .h4 + .h2, .ec-wpArticle h4 + h3, .ec-wpArticle .h4 + h3, .ec-wpArticle h4 + .h3, .ec-wpArticle .h4 + .h3, .ec-wpArticle h4 + h4, .ec-wpArticle .h4 + h4, .ec-wpArticle h4 + .h4, .ec-wpArticle .h4 + .h4, .ec-wpArticle h4 + h5, .ec-wpArticle .h4 + h5, .ec-wpArticle h4 + .h5, .ec-wpArticle .h4 + .h5, .ec-wpArticle h5 + h1, .ec-wpArticle .h5 + h1, .ec-wpArticle h5 + .h1, .ec-wpArticle .h5 + .h1, .ec-wpArticle h5 + h2, .ec-wpArticle .h5 + h2, .ec-wpArticle h5 + .h2, .ec-wpArticle .h5 + .h2, .ec-wpArticle h5 + h3, .ec-wpArticle .h5 + h3, .ec-wpArticle h5 + .h3, .ec-wpArticle .h5 + .h3, .ec-wpArticle h5 + h4, .ec-wpArticle .h5 + h4, .ec-wpArticle h5 + .h4, .ec-wpArticle .h5 + .h4, .ec-wpArticle h5 + h5, .ec-wpArticle .h5 + h5, .ec-wpArticle h5 + .h5, .ec-wpArticle .h5 + .h5 {
margin-top: 30px;
}
.ec-wpArticle h1, .ec-wpArticle .h1 {
font-size: 2.4rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle h1, .ec-wpArticle .h1 {
font-size: 3rem;
}
}
.ec-wpArticle h2, .ec-wpArticle .h2 {
font-size: 2rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle h2, .ec-wpArticle .h2 {
font-size: 2.6rem;
}
}
.page-template-page-support-top .ec-wpArticle h2, .page-template-page-support-top .ec-wpArticle .h2 {
text-align: center;
font-weight: bold;
}
.page-template-page-support-top .ec-wpArticle h2 hr, .page-template-page-support-top .ec-wpArticle .h2 hr {
display: inline-block;
width: 30px;
height: 3px;
background: #ffaaca;
border: none;
margin: 0 15px;
vertical-align: middle;
opacity: 1;
}
.ec-wpArticle h3, .ec-wpArticle .h3 {
font-size: 1.8rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle h3, .ec-wpArticle .h3 {
font-size: 2.4rem;
}
}
.ec-wpArticle h4, .ec-wpArticle .h4, .ec-wpArticle h5, .ec-wpArticle .h5 {
font-size: 1.6rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle h4, .ec-wpArticle .h4, .ec-wpArticle h5, .ec-wpArticle .h5 {
font-size: 2rem;
}
}
.ec-wpArticle__detail > *:first-child {
margin-top: 0;
}
.ec-wpArticle__detail p, .ec-wpArticle__detail ul, .ec-wpArticle__detail ol, .ec-wpArticle__detail div {
margin: 30px 0 0;
text-align: justify;
word-break: break-all;
line-height: 2;
font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle__detail p, .ec-wpArticle__detail ul, .ec-wpArticle__detail ol, .ec-wpArticle__detail div {
font-size: 1.8rem;
}
}
.ec-wpArticle__detail .ec-borderedDefs p, .ec-wpArticle__detail .ec-borderedDefs ul, .ec-wpArticle__detail .ec-borderedDefs ol, .ec-wpArticle__detail .ec-borderedDefs div {
margin: 0;
text-align: left;
line-height: 1.4;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle__detail .ec-borderedDefs dt {
padding-top: 2px;
}
}
.ec-wpArticle__detail .center {
text-align: center !important;
}
.ec-wpArticle__detail img {
max-width: 100%;
height: auto;
}
.ec-wpArticle__detail a {
color: #000;
text-decoration: underline;
text-underline-offset: 2px;
}
.ec-wpArticle__detail ul, .ec-wpArticle__detail ol {
margin-bottom: 30px;
}
.ec-wpArticle__detail ul li, .ec-wpArticle__detail ol li {
list-style-type: inherit;
}
.ec-wpArticle__detail .question > h2:first-child, .ec-wpArticle__detail .question > .h2:first-child, .ec-wpArticle__detail .answer > h2:first-child, .ec-wpArticle__detail .answer > .h2:first-child {
margin-bottom: 20px;
}
.ec-wpArticle__detail .question > h2:first-child i, .ec-wpArticle__detail .question > .h2:first-child i, .ec-wpArticle__detail .answer > h2:first-child i, .ec-wpArticle__detail .answer > .h2:first-child i {
margin-right: 6px;
}
.ec-wpArticle__detail .question > h2:first-child + *, .ec-wpArticle__detail .question > .h2:first-child + *, .ec-wpArticle__detail .answer > h2:first-child + *, .ec-wpArticle__detail .answer > .h2:first-child + * {
margin-top: 20px;
}
.ec-wpArticle__thumbnail {
margin-bottom: 30px;
}
.ec-wpArticle__thumbnail img {
display: block;
margin-left: auto;
margin-right: auto;
}
.ec-wpArticle #hero-lower {
margin-bottom: 50px;
}
.ec-wpArticle #hero-lower h1, .ec-wpArticle #hero-lower .h1 {
margin: 0;
padding: 18px 15px;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle #hero-lower h1, .ec-wpArticle #hero-lower .h1 {
padding: 0 0 30px;
}
}
.ec-wpArticle__postInfo {
margin-bottom: 10px;
}
.ec-wpArticle__postInfo__postType {
display: inline-block;
font-size: 1.4rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle__postInfo__postType {
font-size: 1.8rem;
}
}
.ec-wpArticle__postInfo__date {
display: inline-block;
font-size: 1.2rem;
color: #666666;
margin-left: 10px;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle__postInfo__date {
font-size: 1.6rem;
}
}
.ec-wpArticle__relatedInfo {
padding-left: 10px;
border-left: 1px solid #efefef;
}
.ec-wpArticle__relatedInfo a {
color: #000;
text-decoration: underline;
}
.ec-wpArticle__relatedInfo > div + div {
margin-top: 5px;
}
.ec-wpArticle__relatedInfo__itemList__name {
display: inline-block;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle__relatedInfo__itemList__name {
font-size: 1.4rem;
}
}
.ec-wpArticle__relatedInfo__itemList > a {
display: inline-block;
margin-left: 10px;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle__relatedInfo__itemList > a {
font-size: 1.4rem;
}
}
.ec-wpArticle__relatedInfo__category ul {
margin: 0;
padding: 0;
}
.ec-wpArticle__relatedInfo__category li {
display: inline-block;
}
.ec-wpArticle__relatedInfo__category li + li {
margin-left: 10px;
}
.ec-wpArticle__relatedInfo__category li a {
display: block;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle__relatedInfo__category li a {
font-size: 1.4rem;
}
}
.ec-wpArticle__relatedInfo__category > a {
display: inline-block;
margin-left: 10px;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-wpArticle__relatedInfo__category > a {
font-size: 1.4rem;
}
}
.ec-wpArticle__backBtnArea {
text-align: center !important;
margin-top: 50px;
}
.page-template-page-support-top .ec-wpArticle__backBtnArea {
margin-top: 30px;
}
.ec-wpArticle__backBtnArea a {
display: inline-block;
}
.ec-pageSwitchNavi {
border-bottom: 1px solid #efefef;
}
.ec-pageSwitchNavi__itemList {
display: flex;
justify-content: center;
padding: 0;
margin: 0;
}
@media only screen and (min-width: 768px) {
.ec-pageSwitchNavi__itemList {
justify-content: left;
}
}
.ec-pageSwitchNavi__itemList__item a {
display: block;
font-size: 1.4rem;
color: #666666;
font-weight: bold;
padding: 15px;
border-bottom: 2px solid transparent;
}
@media only screen and (min-width: 768px) {
.ec-pageSwitchNavi__itemList__item a {
font-size: 1.8rem;
}
.ec-pageSwitchNavi__itemList__item a:hover {
color: #000;
border-color: #000;
}
}
.ec-pageSwitchNavi__itemList__item a.active {
color: #000;
border-color: #000;
}
.ec-articleList, .ec-articleList--note {
padding: 0 15px;
}
@media only screen and (min-width: 768px) {
.ec-articleList, .ec-articleList--note {
padding: 0;
}
}
.ec-articleList__itemList {
display: flex;
flex-wrap: wrap;
margin: -25px -8px;
}
.ec-articleList__item {
width: 50%;
padding: 25px 8px;
}
.ec-articleList__item a {
color: inherit;
text-decoration: none;
}
.ec-articleList__item a:hover {
text-decoration: none;
}
@media only screen and (min-width: 768px) {
.ec-articleList__item a {
transition: all 0.5s ease 0s;
}
.ec-articleList__item a:hover {
opacity: 0.7;
}
}
@media only screen and (min-width: 768px) {
.ec-articleList__item {
width: 33.3333333333%;
}
}
@media only screen and (min-width: 1100px) {
.ec-articleList__item {
width: 20%;
}
}
.ec-articleList__item a {
display: block;
}
.ec-articleList__item__image {
margin-bottom: 10px;
}
.ec-articleList--note .ec-articleList__item__image {
border: 2px solid #efefef;
border-radius: 10px;
overflow: hidden;
}
.ec-articleList__item__magazine {
margin-bottom: 10px;
font-size: 1.2rem;
font-weight: bold;
}
@media only screen and (min-width: 768px) {
.ec-articleList__item__magazine {
font-size: 1.4rem;
}
}
.ec-articleList__item__magazine i {
font-size: 1.4rem;
}
@media only screen and (min-width: 768px) {
.ec-articleList__item__magazine i {
font-size: 1.6rem;
}
}
.ec-articleList__item__title {
margin-bottom: 7px;
text-align: justify;
word-break: break-all;
color: #333333;
font-size: 1.2rem;
}
.ec-articleList--note .ec-articleList__item__title {
font-size: 1.4rem;
color: #000;
}
@media only screen and (min-width: 768px) {
.ec-articleList__item__title {
font-size: 1.4rem;
}
}
.ec-articleList__item__date {
color: #999999;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.ec-articleList__item__date {
font-size: 1.4rem;
}
}
#contact-index {
width: 100%;
}
@media only screen and (min-width: 768px) {
#contact-index .main {
width: 30%;
margin-left: auto;
margin-right: auto;
}
}
#lower-news .ec-oshiraseList, #faq .ec-oshiraseList {
margin-left: -15px;
margin-right: -15px;
}
@media only screen and (min-width: 768px) {
#lower-news .ec-oshiraseList, #faq .ec-oshiraseList {
margin-left: 0;
margin-right: 0;
}
}
#lower-news h2, #lower-news .h2 {
margin-top: 30px;
}
.ec-pieceRequestLink {
margin-top: 30px;
}
.ec-pieceRequestLink a {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
color: #000;
padding: 10px 15px;
border: 2px solid #efefef;
border-radius: 5px;
max-width: 500px;
}
@media only screen and (min-width: 768px) {
.ec-pieceRequestLink a {
padding: 28px 15px;
}
.ec-pieceRequestLink a:hover {
color: #000;
background: #f8f8f8;
}
}
.ec-pieceRequestLink a i {
display: inline-block;
font-size: 24px;
width: 24px;
}
@media only screen and (min-width: 768px) {
.ec-pieceRequestLink a i {
font-size: 28px;
width: 28px;
}
}
.ec-pieceRequestLink a span {
display: inline-block;
font-size: 1.8rem;
font-weight: bold;
padding-left: 5px;
}
@media only screen and (min-width: 768px) {
.ec-pieceRequestLink a span {
font-size: 2.4rem;
}
}
.mw_wp_form .horizontal-item + .horizontal-item {
margin-left: 0;
}
.page-template-page-form .ec-wpArticle__detail a {
color: #0097c6;
}
.page-template-page-form .submit.ec-blockBtn--action {
letter-spacing: 0.05em;
margin-right: auto;
margin-left: auto;
max-width: 270px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
*/
/**
* ECCUBE 固有のスタイルユーティリティ
*/
.lp {
margin-top: 0;
line-height: 1.7;
font-size: 1.6rem;
}
.lp p, .lp ul, .lp ol, .lp div {
font-size: 1.6rem;
line-height: 1.7;
}
@media only screen and (min-width: 768px) {
.lp p, .lp ul, .lp ol, .lp div {
font-size: 1.6rem;
}
}
.lp div {
margin-top: 0;
}
.lp h2, .lp .h2 {
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-size: 1.6rem;
font-weight: bold;
line-height: inherit;
}
@media only screen and (min-width: 768px) {
.lp h2, .lp .h2 {
font-size: 2.4rem;
}
}
.lp h3, .lp .h3 {
margin-block-start: 1.33em;
margin-block-end: 1.33em;
font-size: 1.17em;
font-weight: bold;
line-height: inherit;
}
.lp h4, .lp .h4 {
margin-block-start: 1.33em;
margin-block-end: 1.33em;
font-weight: bold;
line-height: inherit;
}
.lp h5, .lp .h5 {
font-weight: bold;
line-height: inherit;
}
.lp hr {
width: 100%;
height: 1px;
margin-top: 10px;
margin-bottom: 10px;
border: none;
background-image: linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 4px);
background-size: 10px 1px;
background-position: bottom;
background-repeat: repeat-x;
background-color: unset;
opacity: 1;
}
.lp p {
margin-top: 1em;
margin-bottom: 1em;
}
.lp a {
transition: 0.2s;
color: #4a60cf;
text-decoration: none;
}
.lp a:hover {
color: #333;
opacity: 0.8;
}
.lp ul, .lp ol {
list-style: none;
margin: 0;
padding: 0;
}
.lp dl, .lp dt, .lp dd, .lp li {
margin: 0;
padding: 0;
}
.lp img {
max-width: 100%;
}
.lp figure {
text-align: center;
margin-top: 10px;
margin-bottom: 16px;
}
.lp figcaption {
text-align: center;
font-weight: bold;
margin-top: 16px;
}
.lp .container {
width: auto;
max-width: 100%;
padding-left: 16px;
padding-right: 16px;
}
.lp .row {
--bs-gutter-x: 8px;
--bs-gutter-y: 0;
margin-inline: calc(-1 * var(--bs-gutter-x));
padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
.lp .row {
--bs-gutter-x: 16px;
}
}
.lp [class^=col] {
position: relative;
padding-inline: var(--bs-gutter-x);
}
.lp .row.ec-para-normal {
margin-bottom: 16px;
}
.lp .lp__eyecatch {
text-align: center;
line-height: 1;
width: 100%;
margin-bottom: 30px;
}
.lp .lp__section {
position: relative;
background-color: #fcf1d1;
margin-top: 40px;
margin-bottom: 60px;
padding-top: 50px;
padding-bottom: 40px;
}
.lp .lp__nav {
margin-bottom: 25px;
}
.lp .lp__nav__list {
text-align: center;
font-size: 0;
}
.lp .lp__nav__item {
display: inline-block;
font-size: 1.8rem;
font-weight: bold;
margin: 0 5px 5px;
}
.lp .lp__nav__link {
display: block;
transition: 0.2s;
border-radius: 5px;
border: 2px solid #f6d471;
color: #333;
padding: 10px 15px;
}
.lp .lp__nav__link:hover, .lp .lp__nav__link:active {
background-color: #f6d471;
color: #333;
opacity: 1;
}
.lp .lp__link-menu__list {
text-align: left;
}
.lp .lp__link-menu__item, .lp .lp__link-menu__item--lg {
display: inline-block;
font-size: 1.8rem;
margin-bottom: 10px;
}
.lp .lp__link-menu__item--lg {
font-size: 3rem;
}
.lp .lp__link-menu__link {
display: block;
border-radius: 5px;
border: 2px solid #f6d471;
background-color: #fff;
font-weight: bold;
color: #333;
padding: 8px;
}
.lp .lp__link-menu__link:hover {
background-color: #f6d471;
opacity: 1;
}
.lp .lp__product {
margin-top: 20px;
margin-bottom: 20px;
}
.lp .lp__product__img {
text-align: center;
margin-bottom: 20px;
}
.lp .lp__product__body {
border-radius: 10px;
background-color: #fff;
margin-bottom: 20px;
padding: 20px;
}
.lp .lp__product__heading {
background-image: linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 4px);
background-size: 10px 1px;
background-position: bottom;
background-repeat: repeat-x;
font-size: 1.8rem;
font-weight: bold;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
.lp .lp__product__heading--2 {
font-size: 1.8rem;
margin-top: 10px;
margin-bottom: 10px;
}
.lp .lp__product__list {
padding: 0 8px;
font-size: 1.2rem;
}
@media only screen and (min-width: 768px) {
.lp .lp__product__list {
padding: 0 16px;
}
}
.lp .lp__product__title {
padding: 10px 8px;
font-weight: normal;
}
@media only screen and (min-width: 768px) {
.lp .lp__product__title {
padding-inline: 16px;
}
}
.lp .lp__product__title:nth-of-type(odd) {
background-color: #ebebeb;
}
.lp .lp__product__item {
padding: 10px 8px;
}
@media only screen and (min-width: 768px) {
.lp .lp__product__item {
padding-inline: 16px;
}
}
.lp .lp__product__item:nth-of-type(odd) {
background-color: #ebebeb;
}
.lp .lp__product__price {
font-size: 1.6rem;
font-weight: bold;
text-align: right;
margin-top: 10px;
margin-bottom: 10px;
}
.lp .lp__product__price__num {
font-size: 2.4rem;
}
.lp__product__button {
display: block;
width: 100%;
max-width: 600px;
height: 74px;
padding: 0 16px;
background-image: none;
border: 1px solid #e05a87;
border-radius: 3px;
background-color: #e05a87;
color: #fff;
line-height: 74px;
font-size: 2rem;
font-weight: bold;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: all 0.5s ease 0s;
cursor: pointer;
margin: auto;
}
.lp__product__button:hover {
opacity: 0.7;
}
.lp .lp__product__button {
max-width: none;
}
.lp .lp__panel {
background-color: #fff;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.lp .lp__panel *:first-child {
margin-top: 0;
}
.lp .lp__panel *:last-child {
margin-bottom: 0;
}
.lp .lp__panel ul {
list-style-type: disc;
margin-top: 16px;
margin-bottom: 16px;
}
.lp .lp__panel li {
margin-left: 1em;
}
.lp .lp__panel dl {
font-size: 1.2rem;
margin-top: 16px;
margin-bottom: 16px;
padding: 0 16px;
}
.lp .lp__panel dt {
padding-top: 10px;
padding-bottom: 10px;
}
.lp .lp__panel dt:nth-of-type(odd) {
background-color: #ebebeb;
}
.lp .lp__panel dd {
padding-top: 10px;
padding-bottom: 10px;
}
.lp .lp__panel dd:nth-of-type(odd) {
background-color: #ebebeb;
}
.lp .lp__panel.video-outer {
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
.lp .lp__panel .video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.lp .lp__panel .video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.lp .lp__border-panel {
text-align: center;
margin-top: 55px;
margin-bottom: 10px;
padding: 20px 0;
}
.lp .lp__border-panel__inner {
position: relative;
display: inline-block;
border-radius: 16px;
border: 8px solid;
background-color: #fff;
text-align: left;
padding: 0 32px 16px;
}
@media (min-width: 992px) {
.lp .lp__border-panel__inner {
border-top-left-radius: 0;
padding: 40px 32px 16px;
}
}
.lp .lp__border-panel__heading {
font-size: 2rem;
color: #fff;
width: calc(100% + 64px);
margin-left: -32px;
}
@media (min-width: 992px) {
.lp .lp__border-panel__heading {
position: absolute;
top: -4px;
left: -8px;
transform: translateY(-50%);
border-radius: 999px;
width: auto;
margin: 0;
padding: 12px 32px;
}
}
.lp .lp__border-panel ul {
list-style-type: disc;
margin-top: 16px;
margin-bottom: 16px;
}
.lp .lp__border-panel li {
margin-left: 1em;
}
.lp .lp__img {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.lp .lp__img img {
line-height: 1;
}
.lp .lp__heading {
font-size: 2rem;
font-weight: bold;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.lp .lp__heading--1 {
position: absolute;
top: -50px;
transform: translateY(-50%);
margin: 0;
}
.lp .lp__heading--1::after {
content: "";
position: absolute;
bottom: -17px;
right: 5px;
z-index: -1;
transform: rotate(2.5deg);
background-color: #c2af75;
width: 90%;
height: 100%;
}
@media only screen and (min-width: 768px) {
.lp .lp__heading--1::after {
bottom: -15px;
}
}
.lp .lp__heading--1 small, .lp .lp__heading--1 .small {
margin-left: 10px;
}
.lp .lp__heading--1 .lp__heading__inner {
background-color: #f6d471;
color: #666;
padding: 20px;
}
.lp .lp__heading--2 {
margin-top: 40px;
margin-bottom: 1em;
text-align: center;
padding: 0 24px;
}
.lp .lp__heading--2 small, .lp .lp__heading--2 .small {
margin-left: 10px;
}
.lp .lp__heading--2 .lp__heading__inner {
position: relative;
background: linear-gradient(transparent 40%, #fff 40%);
padding-left: 20px;
padding-right: 20px;
}
.lp .lp__heading--2 .lp__heading__inner::before, .lp .lp__heading--2 .lp__heading__inner::after {
content: "";
display: inline-block;
position: absolute;
bottom: 0;
background-image: url("/html/template/yanoman/assets/img/lp/clover-bg-icon.png");
background-size: 24px 30px;
background-position: center center;
background-repeat: no-repeat;
width: 24px;
height: 30px;
}
.lp .lp__heading--2 .lp__heading__inner::before {
left: -34px;
}
.lp .lp__heading--2 .lp__heading__inner::after {
right: -34px;
}
.lp .lp__heading--3 {
background-image: linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 4px);
background-size: 10px 1px;
background-position: bottom;
background-repeat: repeat-x;
font-size: 1.8rem;
font-weight: bold;
padding-top: 15px;
margin-bottom: 8px;
}
.lp .lp__heading--3 small, .lp .lp__heading--3 .small {
margin-left: 10px;
}
.lp .lp__heading--3 + * {
margin-top: 0;
}
.lp .lp__heading--4 {
font-size: 2.4rem;
}
.lp .lp__heading--4 small, .lp .lp__heading--4 .small {
margin-left: 10px;
}
.lp .lp__heading--5 {
background-image: linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 4px);
background-size: 10px 1px;
background-position: bottom;
background-repeat: repeat-x;
font-size: 3rem;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
}
.lp .lp__heading--5 small, .lp .lp__heading--5 .small {
margin-left: 10px;
}
.lp .lp__heading--5 + * {
margin-top: 0;
}
.lp__text-center {
text-align: center;
}/*# sourceMappingURL=style.css.map */