/* カスタマイズ用CSS */

/*全体のフォントと色の定義*/
body {
  font-family: sans-serif;
  color: #333333;
}

/*URLが長いリンクテキストを改行させる（スマホ対応）*/
a { word-break: break-all; }

/*各ページの基本文字色を設定*/
.ec-customerRole,
.ec-shelfRole, .ec-searchnavRole .ec-searchnavRole__infos,
.ec-headingTitle, .ec-productRole,
.ec-cartRole, .ec-role {
  color: #333333;
}

/*ヘッダーの画面最上部からの位置を調整（トップページのみ影響：理由がわからないがずれる現象を解決）*/
.ec-layoutRole .ec-layoutRole__contentTop {
    padding-top: 110px;
}

/*ヘッダーロゴの上下の部分の余白調整*/
.ec-headerNaviRole {
    padding-top: 0;
    padding-bottom: 0;
}

/*スマホヘッダーの余白調整*/
@media only screen and (max-width: 767px) {
.ec-headerNaviRole {
        padding-bottom: 5px !important;
    }
}

/* スマホ用のロゴの調整 */
.ec-headerNaviRole__center {
	text-align:center;
}

/*ヘッダーの多機能カート内デザイン*/
.ec-cartNaviIsset .ec-cartNaviIsset__cart {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    border-top: 1px solid #E8E8E8;
    margin-top: 16px;
    padding-top: 16px;
    font-size: 13px;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage {
    width: 35%;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
    width: 65%;
}
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
    font-size: 12px;
}
.ec-cartNaviIsset__cart_wrapper {
    max-height: 350px;
    overflow-y: auto;
}

/*パソコンヘッダーでの検索ボックスなどの調整*/
@media only screen and (min-width: 768px){
    .ec-itemNav__nav li ul li ul:before {
        top: 25px !important;
    }
    .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .ec-headerSearch .ec-headerSearch__keyword {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }
}

/* キーワード検索フォームの調整 */
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
	height: auto;
}
/* キーワード検索フォーム（スマホ用）の調整 */
.ec-drawerRole .ec-headerSearch {
    padding: 16px 8px;
}

/*カテゴリアイコンの大きさの定義*/
.l-categorynav_list_pc .l-categorynav_img {
    width: auto !important;
    height: 35px;
}

/*カテゴリメニューの調整*/
.ec-itemNav__nav li ul li a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.ec-itemNav__nav li ul li .l-categorynav_list_pc {
    min-height: 64px !important;
}
/* 「ご指定のカテゴリは存在しません」の文字の位置調整 */
.ec-searchnavRole > .errormsg {
    margin-top: 40px;
    padding-left:20px;
    font-size:18px;
}
/* 商品詳細ページのSNSボタンのレイアウト調整 */
.ec-productRole .mg_socialbutton_2 iframe {
  width: 80px;
}

/* 昔のクーポン利用時の表示テキストの色 */
.ec-orderCoupon .text-danger {
    color: #DE5D50;
}

/* YAMADA customized start*/

/* 商品詳細ページ挿入動画のレスポンシブル対応 */

.ec-productRole video {
  width: 100%;
  max-width: 500px; /* 最大でも500px以下に */
}

.ec-productRole IFRAME {
  width: 100%;
  max-width: 600px; /* 最大でも600px以下に */
}

/*商品詳細ページの書式調整*/

.ec-productRole__description h2 {
    font-weight: bold; /*商品詳細ページのh2を太字にする*/
}
.ec-productRole__description p {
    margin-bottom: 15px; /* ブログに合わせる */
}
@media only screen and (max-width: 767px){
    .ec-productRole__description h2 {
        font-size: 20px;
    }
    .ec-productRole__description p {
        margin-bottom: 20px; /* ブログに合わせる */
    }
    .ec-productRole__description big {
        font-size: 18px;
    }
    .ec-productRole__description ul {
        padding-left: 25px;
    }
    .ec-productRole__description > div {
        /*font-size: 14px !important;*/
        line-height: 140% !important;
    }
}

.ec-price {
    font-weight: bold;
    color: #d33828; /*値段の色*/
}

.ec-productRole__description p img {
    height: auto; /* 画像の比率がおかしくなるのを解消 */
}
.ec-productRole__description a img:hover {
    opacity: 0.7 ; /*マウスオーバーで半透明*/
}

/*商品詳細ページのボタンの下の余白調整*/
.ec-productRole .ec-productRole__btn {
    margin-bottom: 13px;
}

/*商品詳細ページのリンク色を変える場合に使うが今はOFF
.ec-productRole__description a {
    color: #006600;
} */

/*商品詳細ページの画像のレスポンシブル対応*/
.ec-productRole img {
    width: auto;
}

/*商品一覧ページの書式調整*/

.price02-default {
    font-weight: bold;
    color: #d33828; /*値段の色*/
}

.ec-shelfGrid__item-image img:hover {
    opacity: 0.7 ;/*マウスオーバーで半透明*/
}

.ec-shelfGrid__item .item_comment { /*商品説明を入れるときの書式*/
    font-size:13px;
    color:#525263;
    margin-bottom:10px;
    padding:5px 10px 5px 15px;
    background: rgb(248, 248, 248);
    /*background-color:#F5F7F8;*/
    font-weight:bold;
    border-radius:5px;
}

/*商品一覧ページの上部余白調整*/
@media only screen and (min-width: 500px){
.space_top_category {
    margin-top:0px;
	}
}

@media only screen and (min-width: 600px){
.space_top_category {
    margin-top:10px;
	}
}

@media only screen and (min-width: 768px){
.space_top_category {
    margin-top:0px;
	}
}

@media only screen and (min-width: 1138px){
.space_top_category {
    margin-top:-20px;
	}
}

/*商品詳細ページの上部余白調整*/
@media only screen and (min-width: 500px){
.space_top_detail {
    margin-top:20px;
	}
}

@media only screen and (min-width: 600px){
.space_top_detail {
    margin-top:30px;
	}
}

@media only screen and (min-width: 768px){
.space_top_detail {
    margin-top:50px;
	}
}

@media only screen and (min-width: 1138px){
.space_top_detail {
    margin-top:10px;
	}
}

/*クレジットカード番号の入力欄の幅指定*/
#card_CardNo {
    width: 210px;
}

/*クレジットカード購入画面の文字色*/

.sln_card_payment_container .ec-off1Grid{
    color: #525263;
}

/*クレジット購入画面と登録済みカード編集画面の入力欄の太字化*/
.sln_card_payment_container .ec-halfInput input,
.sln_card_payment_container .ec-birth,
.sln_card_payment_container .sln-scInput,
.sln_card_payment_container .ec-select,
.ec-slnCardRole .ec-halfInput input,
.ec-slnCardRole .ec-birth,
.ec-slnCardRole .sln-scInput{
    font-weight: 600;
    color: #525263;
}

/*クレジット購入画面と登録済みカード編集画面のカード番号入力欄のフォントサイズ*/
.sln_card_payment_container .ec-halfInput input,
.ec-slnCardRole .ec-halfInput input{
    font-size: 16px;
}

/* スマホサイズのタイトル書式を外部から全体指定 */
@media only screen and (max-width: 767px) {
.ec-pageHeader h1 {
  margin: 0 0 8px;
  border-bottom: 1px dotted #ccc;
  border-top: 1px solid #ccc;
  padding: 8px 0 12px;
  font-size: 16px;
  font-weight: bold; }
}

/*　スマホサイズのタイトル書式の部分的な指定をOFF
登録済みカード編集画面のスマホでのタイトル調整
@media only screen and (max-width: 767px) {
#page_sln_edit_card .ec-pageHeader h1 {
    font-size: 16px;
    margin: 0 0 8px;
}
}

クレジットカード購入画面のスマホでのタイトル調整
@media only screen and (max-width: 767px) {
    .sln_card_payment_container .ec-pageHeader h1 {
  margin: 0 0 8px;
  border-bottom: 1px dotted #ccc;
  border-top: 1px solid #ccc;
  padding: 8px 0 12px;
  font-size: 16px;
  font-weight: bold; }
      }
上記の部分的な指定をOFF */

/* 同じカテゴリの商品＆この商品を見たひとはプラグインの調整 */

.hsd_h4 {
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 20px;
        }

.pickup_item a {
    color: #333333;
    text-decoration: none;
}

.pickup_item img:hover {
    opacity: 0.7 ;/*オーバーで半透明*/
}

.item_name {
    font-weight: bold;
    font-size:13px;
    padding-top: 10px;
}

.item_price {
    font-weight: bold;
    color:#d33828;/*値段の色*/
    font-size:13px;
}

.item_comment { /*商品説明を入れるときの書式*/
    font-size:13px;
    margin-bottom:5px;
    margin-top:10px;
    font-weight:bold;
}

/* 下層ページのレスポンシブル対応と書式 */

.ec-role img {
    width: auto;
}

.ec-role h2 {
    font-weight: bold;
}

.ec-role {
    font-size: large;
    line-height: 170%;
}

.ec-role p {
    line-height: 170%;
    margin-bottom: 15px;
}

.ec-role a {
    font-weight: bold;
}

.ec-role video {
  width: 100%;
  max-width: 500px; /* 最大でも500px以下に */
}

.ec-role IFRAME {
  width: 100%;
  max-width: 700px; /* 最大でも700px以下に */
}

/* 独自コンテンツのマージン・最大幅・フォントサイズの設定 */
.ec-pageBody {
    margin-left: 0;
    font-size: 18px;
    max-width: 830px;
}

@media only screen and (min-width: 768px){
    .ec-pageBody {
        margin-left: 40px;
    }
}
@media only screen and (max-width: 767px){
    .ec-role, .ec-role p {
        /*font-size: 14px !important;*/
        line-height: 140% !important;
    }
    .ec-pageBody {
        /*font-size: 14px;*/
    }
    .ec-role h2 {
        font-size: 24px;
    }
    /* スマホのみpタグの改行間隔を広げる */
    .ec-role p {
        margin-bottom: 20px;
    }
    .ec-role big {
        font-size: 18px;
    }
}

/*下層ページの上部余白レスポンシブル対応*/
@media only screen and (min-width: 500px){
.ec-role, .ec-contactRole, .ec-contactConfirmRole, .ec-registerRole, .ec-customerRole {
    margin-top:10px;
	}
}

@media only screen and (min-width: 600px){
.ec-role, .ec-contactRole, .ec-contactConfirmRole, .ec-registerRole, .ec-customerRole {
    margin-top:20px;
	}
}

@media only screen and (min-width: 768px){
.ec-role, .ec-contactRole, .ec-contactConfirmRole, .ec-registerRole, .ec-customerRole {
    margin-top:40px;
	}
}

@media only screen and (min-width: 1138px){
.ec-role, .ec-contactRole, .ec-contactConfirmRole, .ec-registerRole, .ec-customerRole {
    margin-top:0px;
	}
}

/*マイページの上部余白レスポンシブル対応*/
@media only screen and (min-width: 500px){
.ec-layoutRole__main {
    margin-top:10px;
	}
}

@media only screen and (min-width: 600px){
.ec-layoutRole__main {
    margin-top:10px;
	}
}

@media only screen and (min-width: 768px){
.ec-layoutRole__main {
    margin-top:30px;	}
}

@media only screen and (min-width: 1138px){
.ec-layoutRole__main {
    margin-top:0px;
	}
}

/* マイページのようこそとポイントの太字化 
.ec-welcomeMsg {
    font-weight: bold;
}*/

/* フッターのポム画像の制御 */

.ec-footerTitle .ec-footerTitle__logo img {
    width: 100px;
}

/* YAMADA customized end*/

/* クーポンを非表示にするにはコメントアウトをはずす（昔のクーポンプラグイン） */

#page_shopping #coupon, #page_shopping #coupon_copy_form {
    display: none;
}

/* スマホの場合は画像サイズを小さくする */
@media only screen and (max-width: 767px){
    .ec-productRole__description img.sp-small {
        width: 50%;
        height: auto;
    }
    .ec-productRole__description img.sp-small2 {
        zoom: 0.5;
        height: auto;
    }
    .ec-productRole__description img.sp-small3 {
        zoom: 0.8;
        height: auto;
    }
}

/* recAPCHAの位置調整 */

.grecaptcha-badge {
    bottom: 90px !important;
}

@media only screen and (max-width: 767px){
.grecaptcha-badge {
    display: none;
    bottom: 60px !important;
}
}

/* 商品詳細ページの写真のスライドで写真のサイズ調整 */
#page_product_detail .slick-initialized .slick-slide, #page_product_detail .ec-sliderItemRole .slideThumb {
    position: relative;
}
#page_product_detail .ec-sliderItemRole .slideThumb {
    width: 25%;
}
#page_product_detail .slick-initialized .slick-slide:before, #page_product_detail .ec-sliderItemRole .slideThumb:before {
    content: '';
    display: block;
    padding-top: 100%;
}
#page_product_detail .slick-initialized .slick-slide img, #page_product_detail .ec-sliderItemRole .slideThumb img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    object-fit: contain;
}

/* youtubeの埋め込み用「width="560" height="315"」を消して「class="iframe-youtube" 」に差し替える。 */
iframe.iframe-youtube {
    width: 100%;
    height: auto;
    aspect-ratio: 177 / 100;
}

/* 背景色付きの枠 */
.ash-box {
    margin: 0px auto;
    padding: 20px;
    max-width: 100%;
    background-color: #eee;/*灰色*/
}
@media only screen and (max-width: 767px){
    .ash-box {
        padding: 15px;
    }
}

.fuji-box {
    margin: 0px auto;
    padding: 20px;
    max-width: 100%;
    background-color: #eef;/*藤色*/
}
@media only screen and (max-width: 767px){
    .fuji-box {
        padding: 15px;
    }
}

.momo-box {
    margin: 0px auto;
    padding: 20px;
    max-width: 100%;
    font-weight: bold;
    color: white;
    background-color: #ff5757;/*桃色*/
}
@media only screen and (max-width: 767px){
    .momo-box {
        padding: 15px;
    }
}

.eg-box {
    margin: 0px auto;
    padding: 20px;
    max-width: 100%;
    font-weight: bold;
    color: white;
    background-color: #0097b2;/*エメラルドグリーン色*/
}
@media only screen and (max-width: 767px){
    .eg-box {
        padding: 15px;
    }
}

.kusa-box {
    margin: 0px auto;
    padding: 20px;
    max-width: 100%;
    background-color: #efe;/*草色*/
}
@media only screen and (max-width: 767px){
    .kusa-box {
        padding: 15px;
    }
}