/************************************
** リセット
************************************/
/*サイト全体*/
body{
    overflow-x: hidden;
    font-family: 'Noto Sans JP', sans-serif;
    font-family: 'Roboto', sans-serif;
    color: rgba(49, 24, 0,0.9); /*基本文字色*/
    letter-spacing: 0.1em;/*文字間*/
    line-height: 1.8;
    font-size: 16px;/*フォントサイズの基準*/
    background-color: #ffffff;
}
/*ページ全体フェードイン*/
.ec-layoutRole{
    opacity: 0;
}
.ec-layoutRole.show{
    opacity: 1;
    animation: fadeInShow 0.5s;
}
.ec-layoutRole-roading_parent{
    position: relative;
    height: 50vh;
}
.ec-layoutRole-roading{
    opacity: 1;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    z-index: 10000;
}
.ec-layoutRole-roading_parent.hide{
    opacity: 0;
    animation: fadeOut 0.5s;
}
.ec-layoutRole-roading.hide{
    display:none;
}
@keyframes fadeInShow { /*animation-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}
@keyframes fadeOut { /*animation-nameで設定した値を書く*/

    100% {opacity: 1} /*アニメーション開始時は不透明度0%*/
  
    0% {opacity: 0} /*アニメーション終了時は不透明度100%*/
  
  }
/*見出しのmarginをリセット*/
h1, h2, h3{
    margin-top: 0;
    margin-bottom: 0;
}
/*価格の文字間隔をリセット*/
.ec-newItemRole__listItemPrice,
.ec-productRole__priceRegular,
.ec-productRole__price,
.price02-default,
.ec-productRole__priceRegularPrice,
.ec-productRole__priceRegularTax,
.ec-price__price{
    letter-spacing:normal;
}
/*商品スライドとカゴ周りのコンテナ*/
.ec-grid2 .ec-grid2__cell{
    background-color: rgba(255,255,255,1.0);/*商品詳細で背景画像が見えるように透過*/
}
/*商品レビューブロック*/
#product_review_area {
    position: relative;
    border-top: 1px solid #E8E8E8;
    padding-bottom: 0;
    margin-bottom: 0;
    background-color: #fff;
}

/*============
お客様の声
=============*/
/*個別ブロック*/
#reviewContent ul.review_list li{
    list-style: none;
    padding: 20px;
    border: dotted 3px rgba(247, 235, 204,1.0);
    margin-right: 40px;
    background-color: #ffffff;
    margin-bottom: 20px;
}
#reviewContent ul.review_list p.review_title{
    font-size: x-large;
    font-weight: 700;
    color: #8c2300;
    padding-bottom: 20px;
}
#reviewContent ul.review_list p.review_title::before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 500;
    padding-right: 15px;    
    content:"\f118";
    color: #1f4c1e;
}
@media screen and (max-width: 480px){
    #reviewContent ul.review_list{
        padding: 0;
    }
    #reviewContent ul.review_list li{
        margin-right: 0;
    }    
}
/*font awasome fa-fw アイコン */
.fa-fw {
    text-align: center;
    width: 1.0em;
}
/*ヘッダー内カートアイコンのリンク色を変更*/
.ec-cartNavi a{
    color: #f7ebcc;
}
/*トップページだけパララクス用に調整*/
.ec-layoutRole .ec-layoutRole__contentTop{
    position: fixed;
}
/*購入ページの見出し*/
#shopping-form .ec-rectHeading h2,
#page_mypage_history .ec-rectHeading h2{
    margin-top: 30px;
    margin-bottom: 15px;
}
/*商品一覧のタイトル*/
.ec-newItemRole__listItemTitle{
    margin-top: 10px;
    font-size: 14px;
    font-weight: 300;
}
/*価格表示*/
.ec-newItemRole__listItemPrice{
    margin: 0;
    margin-top: -10px;
    font-size: 14px;
    font-weight: 300;
}
/*ニュース記事ブロック*/
.ec-newsRole {
    padding: 0;/*リセット*/
}
/*商品詳細ページで関連商品が重複されるため非表示*/
.ec-shelfRole{
    display: none;
}
/*ぱんくずリスト*/
.ec-topicpath{
    margin-bottom: 20px;
}
/*============
商品詳細のスライダー及びカゴ周りのブロック
=============*/
.ec-productRole {
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #525263;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1080px;/*レイアウトに影響、ブレイクポイントで調整*/
}
/*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
.ec-productRole .ec-productRole__btn {
    width: 50%;
    margin-bottom: 16px;
    min-width: 350px; 
}
/*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
.am_naviframe_productDetail-child_right_review{
    display: table-cell;
    width: auto;
    background-color: #ffffff;  
    padding-right: 100px;  
    max-width: 960px;/*レイアウトに影響、ブレイクポイントで調整*/    
}
/*項目選択肢（規格管理）テキスト*/
p.classcaption_top{
    padding: 5px;
    font-weight: bold;
}
p.classcaption_bottom{
    padding: 10px 5px 20px 5px;
}
/*フッターリセット*/
.ec-footerRole {
    border-top: none;
    margin-top: 0;
    background:#ffffff;
}

    @media screen and (max-width:1280px){
        .ec-productRole {
            max-width: 960px;/*レイアウトに影響、ブレイクポイントで調整*/           
        }
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 50%;
            margin-bottom: 16px;
            min-width: 300px; 
        }
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            max-width: 960px;/*レイアウトに影響、ブレイクポイントで調整*/    
        }        
    }
    @media screen and (max-width:1150px){
        .ec-productRole {
            max-width: 900px;/*レイアウトに影響、ブレイクポイントで調整*/           
        }
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 50%;
            margin-bottom: 16px;
            min-width: 280px; 
        }
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            max-width: 900px;/*レイアウトに影響、ブレイクポイントで調整*/    
        }     
        /*ぱんくずリスト*/
        .ec-topicpath{
            margin-left: 50px;
        }              
    }
    @media screen and (max-width:1080px){
        .ec-productRole {
            max-width: 820px;/*レイアウトに影響、ブレイクポイントで調整*/           
        }   
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 50%;
            margin-bottom: 16px;
            min-width: 250px; 
        }  
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            max-width: 820px;/*レイアウトに影響、ブレイクポイントで調整*/           
        }                      
    }
    @media screen and (max-width:960px){
        .ec-productRole {
            max-width: 760px;/*レイアウトに影響、ブレイクポイントで調整*/           
        } 
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 50%;
            margin-bottom: 16px;
            min-width: 220px; 
        } 
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            max-width: 760px;/*レイアウトに影響、ブレイクポイントで調整*/           
        }                              
    }
    @media screen and (max-width:850px){
        .ec-productRole {
            max-width: 620px;/*レイアウトに影響、ブレイクポイントで調整*/           
        }     
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 50%;
            margin-bottom: 16px;
            min-width: 220px; 
        } 
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            max-width: 620px;/*レイアウトに影響、ブレイクポイントで調整*/           
        }                         
    }    
    @media screen and (max-width: 768px){
        .ec-productRole {
            margin: 0 auto;  
            max-width: 580px;/*レイアウトに影響、ブレイクポイントで調整*/           
            width: 100%;
        }         
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 90%;
            margin-bottom: 16px;
            min-width: none; 
        }   
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            position: relative;
            display: block;
            margin: 0 auto;
            left: 0;/*1カラムに変更*/
            padding-right:20px;
            padding-left: 20px;
            max-width: 580px;/*レイアウトに影響、ブレイクポイントで調整*/                  
            width: 100%; 
        }   
        /*ぱんくずリスト*/
        .ec-topicpath{
            margin-left: 0;
            margin-bottom: 50px;
        }       
        /*商品詳細の価格*/
        .ec-price .ec-price__price{
            font-size:2.5rem;
        }           
    }
    @media screen and (max-width: 600px){
        .ec-productRole {
            margin: 0 auto;  
            max-width: 480px;/*レイアウトに影響、ブレイクポイントで調整*/           
            width: 100%;
        }         
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 90%;
            margin-bottom: 16px;
            min-width: none; 
        }   
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            position: relative;
            display: block;
            margin: 0 auto;
            left: 0;/*1カラムに変更*/
            padding-right:20px;
            padding-left: 20px;
            max-width: 480px;/*レイアウトに影響、ブレイクポイントで調整*/           
            width: 100%;
        }
    }    
    @media screen and (max-width: 480px){
        .ec-productRole {
            margin: 0 auto;  
            max-width: 340px;/*レイアウトに影響、ブレイクポイントで調整*/           
            width: 100%;
            padding-left: 0;
            padding-right: 0;
        }         
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 90%;
            margin-bottom: 16px;
            min-width: none; 
        }  
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            position: relative;
            display: block;
            margin: 0 auto;
            left: 0;/*1カラムに変更*/
            padding-right:20px;
            padding-left: 20px;
            max-width: 470px;/*レイアウトに影響、ブレイクポイントで調整*/           
            width: 100%;
        }               
    }
    @media screen and (max-width: 360px){
        .ec-productRole {
            margin: 0 auto;  
            max-width: 320px;/*レイアウトに影響、ブレイクポイントで調整*/           
            width: 100%;
        }         
        /*カートに入れる、お気入りに追加ボタンレイアウト絡み*/
        .ec-productRole .ec-productRole__btn {
            width: 90%;
            margin-bottom: 16px;
            min-width: none; 
        }  
        /*レビュー用の「.ec-productRole」部分に幅を合わせる　am_naviframe_productDetail-parentブロックの子*/
        .am_naviframe_productDetail-child_right_review{
            position: relative;
            display: block;
            margin: 0 auto;
            left: 0;/*1カラムに変更*/
            padding-right:20px;
            padding-left: 20px;
            max-width: 350px;/*レイアウトに影響、ブレイクポイントで調整*/           
            width: 100%;
        }                     
    }          
/************************************
** デバイス表示制御
************************************/
.pc-nondisplay{/*PCで非表示*/
    display: none;
}
.sp-nondisplay{/*spで非表示*/
    display: block;
}

.display-pc{/*PCで表示*/
    display: block;
}
.display-sp{/*spで表示*/
    display: none;
}

@media screen and (max-width: 960px){
    .pc-nondisplay{/*spで表示*/
        display: block;
    }
    .sp-nondisplay{/*spで非表示*/
        display: none;
    }
    .display-pc{/*PCで表示*/
        display: none !important;
    }
    .display-sp{/*spで表示*/
        display:block;
    }
}

@media screen and (max-width: 480px){
    .pc-nondisplay{/*spで表示*/
        display: block;
    }
    .sp-nondisplay{/*spで非表示*/
        display: none;
    }
    .display-pc{/*PCで表示*/
        display: none;
    }
    .display-sp{/*spで表示*/
        display:block;
    }
}

/************************************
** ブロック内HTML
************************************/
/*太字にするテキスト*/
.bolder-text{
    font-weight:700;
}
/*商品説明などで、少し小さなテキスト*/
.item_description{
    font-size: small;
    padding: 10px 0 10px 0;
}
/*============
動画
=============*/
/*動画*/
#movie1 video,
#movie2 video,
#movie3 video {
    object-fit: fill;
    max-width: 640px;
    width: 60vw;
    height:auto;
    display: block;
}
/*動画 PLAY アイコン*/
.movie_wrap .mv_map{
    position: relative;
    width: 100%;
    padding: 10px;
}
.movie_wrap .mv_map:hover{
    opacity: 0.7;
    transition: 0.5s all;
}
.movie_wrap .mv_map img{
    /*max-width: 320px;*/
    width: 100%;    
}
.movie_wrap .mv_map i{
    font-size: 70pt;
    color: rgba(247, 235, 204,0.7);
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin:auto;
    cursor: pointer;
    z-index: 10;
}

/*============
表（TABLEタグ）
=============*/
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*============
ランキング
=============*/
/*ランキング*/
.rankig_gold {
    color: #B67B03;/*非対応のブラウザでの文字色を設定*/
    background: -webkit-linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);/*背景色にグラデーションを指定*/
    -webkit-background-clip: text;/*テキストでくり抜く*/
    -webkit-text-fill-color: transparent;/*くり抜いた部分は背景を表示*/
}
.rankig_silver {
    color: #757575;/*非対応のブラウザでの文字色を設定*/
    background: -webkit-linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);/*背景色にグラデーションを指定*/
    -webkit-background-clip: text;/*テキストでくり抜く*/
    -webkit-text-fill-color: transparent;/*くり抜いた部分は背景を表示*/
}
.rankig_blonz {
    color: #6c2e16;/*非対応のブラウザでの文字色を設定*/
    background: -webkit-linear-gradient(45deg, #6c2e16 0%, #97461a 45%, #fbd8c5 70%, #97461a 85%, #97461a 90% 100%);/*背景色にグラデーションを指定*/
    -webkit-background-clip: text;/*テキストでくり抜く*/
    -webkit-text-fill-color: transparent;/*くり抜いた部分は背景を表示*/
}
.ranking.am_grid2{
    padding-left:0;
}
h3.ranking{
    counter-reset: ranking 3;
    margin-bottom:50px;
}
ul.ranking{
    list-style-type: none;
}
li.ranking::before{
    counter-increment: ranking;
    content: counter(ranking)"位"; /*位：は好きな文字に変更可能。空なら何も表示されない。*/
    position: absolute;
    background-color: rgba(31,76,30,0.7);
    color: #f7ebcc;
    font-weight: 500;
    padding: 15px;
    border-radius: 50%;
    margin-top: 10px;
    margin-left: 10px;
    z-index:1;
}
ul.ranking .ranking_name_block{
    position:relative;
    width: 100%;
    background-color: rgba(247, 235, 204,0.7);
    height: 70px;
    text-align: center;
}
ul.ranking .ranking_name{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    margin: auto;
}
ul.ranking a{
    color:inherit;
}
ul.ranking a:hover{
    opacity:0.7;
    transition:0.5s;
}


    @media screen and (max-width: 768px){
        /*============
        動画
        =============*/      
        /*動画*/
        #movie1 video,
        #movie2 video,
        #movie3 video {
            object-fit: fill;
            max-width: 640px;
            width: 90vw;
            height:auto;
            display: block;
        }
    }

    @media screen and (max-width: 480px){
    }

/************************************
** ヘッダー
************************************/
/*ヘッダー内の余分な余白をリセット*/
.ec-headerNaviRole{
    padding: 22px;
    padding-top: 50px;
    padding-right: 0;
}
/*トップページだけヘッダー調整*/
.ec-headerNaviRole.toppage{
    position: absolute;    
    padding: 22px;
    padding-top: 25;
    background-color: transparent;
    z-index: 9999;
    right: 0;
    color: #f7ebcc;
}
/*トップページだけのスマホメニュー用*/
.ec-headerNaviRole-absolute{
    position: absolute;
    z-index: 9999;
    top:30px;
}
.ec-headerNaviRole__left .ec-headerTitle__title a{
    margin: 0;
}
.ec-headerNaviRole.mg_headerfixed{
    width: none;
}

/*============
固定ヘッダー
=============*/
/*固定ヘッダー親*/
.custom-fixed-header-cacth_parent{
    position: fixed;
    display: table;
    top:0;
    width: 100%;
    height: 40px;
    padding: 0;
    background-color: #1f4c1e;
    z-index: 9999;
}

/*　上に上がる動き　*/
.custom-fixed-header-cacth_parent.UpMove{
    animation: UpAnime 1.0s forwards;
}

@keyframes UpAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 0;
  transform: translateY(-100px);
  }
}

/*　下に下がる動き　*/
.custom-fixed-header-cacth_parent.DownMove{
    animation: DownAnime 1.0s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/*固定ヘッダーの子*/
.custom-fixed-header-cacth_child{
    display: table-cell;
    white-space: nowrap;
}
.custom-fixed-header-cacth_child:first-child{
    width: 50%;
    white-space: nowrap;
    vertical-align: middle;
}
.custom-fixed-header-cacth_child:last-child{
    width: 100px;
    padding-left: 20px;
    display: flex;
}
/*固定ヘッダー内メッセージ*/
.custom-fixed-header-cacth_child span.message{
    color: #f7ebcc;
    padding-left: 20px;
}
/*カテゴリメニューをタブ化*/
.ec-itemNav__nav li a {
    background-color: #999999;
}
.ec-itemNav__nav li ul li a {
    background-color: #999999;   
}
/*固定ページメニュー*/
.fixed-menu-header{
    position: relative;
    display: block;
    width: 100%;
    right: 0;
    height: 50px;
    text-align: right;
}
.fixed-menu-header__innner{
    position: absolute;
    right: 0;
}
.fixed-menu-outer{
    position: relative;
    display: table;
    text-align: center;
    margin-top: 10px;
    margin-bottom: none;
}
.fixed-menu-outer ul li{
    display: inline;
    list-style: none;
    font-size: 14px;
    padding: 5px;
}
/*固定ヘッダー内メッセージ*/
/*ログインリンク　style.cssで基本設定*/
.custom-fixed-header-cacth_child span.message,
.ec-headerNav .ec-headerNav__itemLink{
    font-size: 11px;
}
/*ログインアイコン　style.cssで基本設定*/
/*カートアイコン　style.cssで基本設定*/
.ec-headerNav .ec-headerNav__itemIcon,
.ec-cartNavi .ec-cartNavi__icon{
    font-size: 12px;
    padding-top: 0;
    margin-right: 0;
    vertical-align: middle;
} 
    @media screen and (max-width: 1080px){
        /*固定ヘッダー内メッセージ*/
        /*ログインリンク　style.cssで基本設定*/
        .custom-fixed-header-cacth_child span.message,
        .ec-headerNav .ec-headerNav__itemLink{
            font-size: 11px;
        }
        /*ログインアイコン　style.cssで基本設定*/
        /*カートアイコン　style.cssで基本設定*/
        .ec-headerNav .ec-headerNav__itemIcon,
        .ec-cartNavi .ec-cartNavi__icon{
            font-size: 14px;
            padding-top: 0;
            margin-right: 0;
            vertical-align: middle;
        } 
    }
    @media screen and (max-width: 768px){
        /*============
        固定ヘッダー
        =============*/        
        /*固定ヘッダー親*/
        .custom-fixed-header-cacth_parent{
            position: fixed;
            display: table;
            top:0;
            width: 100%;
            height: 40px;
            padding: 0;
            background-color: rgba(255,255,255,0);/*背景を透明に*/
            z-index: 9999;
        }
        /*固定ヘッダー親（背景あり）*/
        .custom-fixed-header-cacth_parent.withBG{
            position: fixed;
            display: table;
            top:0;
            width: 100%;
            height: 70px;
            padding: 0;
            background-color: rgba(31, 76, 30,0.7);
            z-index: 9999;
        }        
        /*　上に上がる動き　*/
        .custom-fixed-header-cacth_parent.UpMove{
        }
        /*　下に下がる動き＝スマホの時は背景を暗くする　*/
        .custom-fixed-header-cacth_parent.DownMove{
            height: 70px;
            background-color: rgba(31, 76, 30,0.7);/*背景を透明に*/
        }
        /*固定ヘッダーの子*/
        .custom-fixed-header-cacth_child{
            display: table-cell;
        }
        .custom-fixed-header-cacth_child:first-child{
            width: 10%;
            white-space: nowrap;
            vertical-align: middle;
        }
        .custom-fixed-header-cacth_child:last-child{
            width: 180px;
            position: absolute;/*ヘッダーのカートとロゴを調整*/
            right: 15px;/*ヘッダーのカートとロゴ、右端からの距離*/
            top:5px;
            z-index: 99999;/*スマホメニューでも見えるようにする*/
            cursor: pointer;
        }
        /*固定ヘッダー内メッセージ*/
        .custom-fixed-header-cacth_child span.message{
            display:none;/*メッセージを非表示にする*/
        }
        /*スマホの場合表示されるロゴ*/
        .sp-headerLogo-lowerpage{
            -ms-flex-preferred-size: 120px;
            flex-basis: 120px;
            z-index: 2;    
            padding-top: 3px;       
        }
        .sp-headerLogo-lowerpage img{
            width: 110px;
        }
        /*ヘッダーのログインアイコンの調整*/
        .ec-headerNav{
            position: relative;
            right: 180px;
            top:6px;
            z-index: 99999;
        }  
        .ec-headerNav .ec-headerNav__itemIcon {/*ログインアイコン　style.cssで基本設定*/
            display: inline-block;
            margin-right: 5px;
            margin-left: 5px;
            font-size: 16px;
            color: #f7ebcc; 
        }
        .ec-headerNav .ec-headerNav__itemLink {/*ログインリンク　style.cssで基本設定*/
            display: none;
        }           
        /*ヘッダーのカートアイコンの調整*/
        .ec-cartNavi{
            padding: 14px 20px 0 5px;/*ec-headerNavと、大きさ・配置を合わせる*/
            position: relative;
            z-index: 99999;
        }   
        .ec-cartNavi .ec-cartNavi__icon {/*カートアイコン　style.cssで基本設定*/
            display: inline-block;
            font-size: 16px;
            position: relative; 
        }        
        /*トップページのロゴ*/
        .sp-headerLogo-toppage{
            position: absolute;
            display: block;
            top:0;   
            right: 0;
            z-index: 2;
        }  
        .sp-headerLogo-toppage img{
            width: 170px;    
        } 
        /*カートをクリックした時のメッセージ*/
        .ec-cartNaviNull .ec-cartNaviNull__message{
            white-space: normal;
        }
        .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 screen and (max-width: 480px){
        .fixed-menu-header{
            display: none;
        }
    }
    @media screen and (max-width: 320px){
        .sp-headerLogo-lowerpage img{
            width: 90px;
        }
        .ec-headerNav{
            right:140px;
        }
        .custom-fixed-header-cacth_child:last-child{
            right:10px;
            width:150px;
            padding-right:0;
        }
    }    



/************************************
** スライドショーを横幅いっぱいにする
************************************/
/* メインコンテンツ外枠の横幅固定を外す */
.ec-layoutRole .ec-layoutRole__contents {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: none; /* 1150px;横幅固定をリセット*/
    display: flex;
    flex-wrap: nowrap;
}
/*スライドショー下のメッセージブロック*/
.slide_messe{
    position: relative;
    margin-top: 100vh;
    /*border-top-right-radius: 100%;
    border-top-left-radius: 100%;*/
}

/************************************
** レフトナビゲーション
************************************/
/*トップページ用レフトナビゲーション*/
.left-navi.toppage{
    position: fixed;
    display: none;/*フェードイン用に非表示*/
    top:0;
    left: 20px;
    width: 200px;
    height: 100%;
    padding: 20px;
    background-color: rgba(247, 235, 204,0.7);
    z-index: 9998;
    /*box-shadow: 1px 2px 3px #333333;*/  
    /*overflow-y: auto;*/   
}
/*下層ページ用レフトナビゲーション*/
.left-navi.lowerpage{
    /*position: fixed;*/
    position: fixed;
    display: none;/*フェードイン用に非表示*/
    top:0;    
    left: 20px;
    width: 200px;
    height: 100%;
    padding: 20px;
    background-color: rgba(247, 235, 204,0.7);
    background-repeat: repeat-y;
    z-index: 9998; 
    /*box-shadow: 1px 2px 3px #333333;*/  
    /*overflow-y: auto;*/                          
}
.left-navi ul{ 
    margin: 0; 
    padding :0; 
    list-style: none; 
}
.left-navi li{ 
    line-height: 120%;
    letter-spacing: 1px;    
    padding :0;
    margin:0;
    border-top: 1px dotted #333333;
    border-bottom: 1px dotted #333333;
}
.left-navi li+li{
    border-top:none;
}
.left-navi li a{
    display: block;
    padding: 2px 0px 3px 18px;
    color:#311800;
    margin-left: -15px;
    width: 100%;
    text-decoration:none;
    font-size: 14px;
    font-weight: 500;    
}
.left-navi li:hover{
    display: block;    
    background-color: rgba(31, 76, 30,0.7);
    padding: 2 0 0 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
.left-navi i{
    margin: 0;
    padding: 0;
    padding-right: 5px;
}
/*レフトナビゲーション内P*/
.left-navi p{
    font-size: 14px;
    line-height: 200%;
}

/*見出しブロック*/
.leftnavi-title{
    text-align: left;
    margin-top: 20px;
    border:solid 1px rgba(51, 51, 51,0.3);
    border-radius: 10px;
    text-align: center; 
    margin-bottom: 10px;
    background-color: rgba(31, 76, 30,0.1);
    background-image: radial-gradient(rgba(31, 76, 30,0.7) 0.35000000000000003px, rgba(31, 76, 30,0.1) 0.35000000000000003px);
    background-image: -moz-radial-gradient(rgba(31, 76, 30,0.7) 0.35000000000000003px, rgba(31, 76, 30,0.1) 0.35000000000000003px);
    background-image: -webkit-radial-gradient(rgba(31, 76, 30,0.7) 0.35000000000000003px, rgba(31, 76, 30,0.1) 0.35000000000000003px);
    background-size: 7px 7px;
}
.leftnavi-title p{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}

/*ロゴブロック*/
.leftnavi-logo{
    position: relative;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 10px;
}
.leftnavi-logo img{/*ロゴimg*/
    width: 100%;
}
/*メニューブロック*/
.leftnavi-fixedmenu{
    display: block;
    margin-left: 0;
}
.left-navi ul{
    list-style: none;   
}
.left-navi ul li{
    list-style: none;
}
/*SNSブロック*/
.left-navi .sns-icon{
    text-align: center;
    margin-top: 30px;
}
.left-navi .sns-icon a{
    color: inherit;
}
.left-navi .sns-icon a:hover{
    opacity: 0.7;
    transition: 0.5s;
}
.left-navi .sns-icon i{
    font-size: 24px;
    padding: 5px;
}

    @media screen and (max-width: 1080px){
        /*トップページ用レフトナビゲーション*/
        .left-navi.toppage{
            position: fixed;
            top:0;
            left: 20px;
            width: 170px;
            height: 100vh;
            padding: 20px;
            background-color: rgba(247, 235, 204,0.7);
            z-index: 9998;        
        }
        /*下層ページ用レフトナビゲーション*/
        .left-navi.lowerpage{
            position: fixed;
            top:0;    
            left: 20px;
            width: 170px;
            height: 100vh;
            padding: 20px;
            background-color: rgba(247, 235, 204,0.7);
            z-index: 9998;        
        }
        .left-navi ul{ 
            margin: 0; 
            padding :0; 
            list-style: none; 
        }
        .left-navi li{ 
            line-height: 125%;
            letter-spacing: 1px;    
            padding :0;
            margin:0;
            border-top: 1px dotted #333333;
            border-bottom: 1px dotted #333333;
        }
        .left-navi li+li{
            border-top:none;
        }
        .left-navi li a{
            display: block;
            padding: 2px 0px 3px 18px;
            color:#311800;
            margin: 1px 0px;
            margin-left: -15px;
            width: 100%;
            text-decoration:none;
            font-size: 11px;
            font-weight: 500;
        }

        .left-navi li:hover{
            background-color: rgba(31, 76, 30,0.7);
        }
        .left-navi i{
            margin: 0;
            padding: 0;
            padding-right: 3px;
        }
        /*レフトナビゲーション内P*/
        .left-navi p{
            font-size: 11px;
            line-height: 200%;
        }

        /*見出しブロック*/
        .leftnavi-title{
            text-align: left;
            margin-top: 20px;
            text-align: center;    
        }
        .leftnavi-title p{
            font-size: 14px;
            font-weight: 700;            
        }

        /*ロゴブロック*/
        .leftnavi-logo{
            position: relative;
            width: 100%;
            margin-top: 40px;
            margin-bottom: 10px;
        }
        .leftnavi-logo img{/*ロゴimg*/
            width: 100%;
        }
        /*メニューブロック*/
        .leftnavi-fixedmenu{
            display: block;
            margin-left: 0;
        }
        /*SNSブロック*/
        .left-navi .sns-icon{
            text-align: center;
            margin-top: 30px;
        }
        .left-navi .sns-icon i{
            font-size: 24px;
            padding: 5px;
        }
    }
    @media screen and (max-height: 768px){/*画面高さが800px以下　kindle,ipad横画面など*/
        .left-navi li{ 
            line-height: 100%;
            letter-spacing: 1px;    
            padding :0;
            margin:0;
            border-top: 1px dotted #333333;
            border-bottom: 1px dotted #333333;
        }
        .left-navi li+li{
            border-top:none;
        }
        .left-navi li a{
            display: block;
            padding: 2px 0px 1px 18px;
            color:#311800;
            margin: 1px 0px;
            margin-left: -15px;
            width: 100%;
            text-decoration:none;
            font-size: 11px;
            font-weight: 500;
        }

        .left-navi li:hover{
            background-color: rgba(31, 76, 30,0.7);
        }
        .left-navi i{
            margin: 0;
            padding: 0;
            padding-right: 3px;
        }
        /*レフトナビゲーション内P*/
        .left-navi p{
            font-size: 11px;
            line-height: 200%;
        }
        /*見出しブロック*/
        .leftnavi-title{
            text-align: left;
            margin-top: 20px;
            text-align: center;    
        }
        .leftnavi-title p{
            font-size: 14px;
            font-weight: 700;            
        }
        /*ロゴブロック*/
        .leftnavi-logo{
            position: relative;
            width: 100%;
            margin-top: 40px;
            margin-bottom: 10px;
        }
        .leftnavi-logo img{/*ロゴimg*/
            width: 100%;
        }
        /*メニューブロック*/
        .leftnavi-fixedmenu{
            display: block;
            margin-left: 0;
        }
        /*SNSブロック*/
        .left-navi .sns-icon{
            text-align: center;
            margin-top: 20px;
        }
        .left-navi .sns-icon i{
            font-size: 20px;
            padding: 5px;
        }
    }

    @media screen and (max-height: 480px){/*画面高さが480px以下　iphone横画面など*/
        /*トップページ用レフトナビゲーション*/
        .left-navi.toppage{
            position: absolute;/*固定解除*/
            top:0;
            left: 20px;
            width: 170px;
            height: 100vh;
            padding: 20px;
            background-color: rgba(247, 235, 204,0.7);
            z-index: 9998;        
        }
        /*下層ページ用レフトナビゲーション*/
        .left-navi.lowerpage{
            position: absolute;/*固定解除*/
            top:0;    
            left: 20px;
            width: 170px;
            height: 100vh;
            padding: 20px;
            background-color: rgba(247, 235, 204,0.7);
            z-index: 9998;        
        }        
    }

/************************************
** 商品リスト
************************************/
/* メインビジュアル */
.am_header-category-image{
    position: relative;
    max-width: 100%; 
    width: 100%;
    text-align: center;
}
.am_header-category-image h1{/* 画像上のH1 */
    position: absolute;
    color: #ffffff;
    font-weight: 700;
    font-size: 4.0rem;
    top: 55%;
    left: 55%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin:auto;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    width: 100%;
}
.am_header-category-image img{
    object-fit: cover;    
    width: 100%;
    height: 300px;
}


    @media screen and (max-width: 768px){
        .am_header-category-image h1{/* 画像上のH1 */
            font-weight: 700;
            font-size: 3.5rem;
            top: 55%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            -webkit-transform: translateY(-50%) translateX(-50%);
            width: 100%;
        }
    }

    @media screen and (max-width: 480px){
        .am_header-category-image h1{/* 画像上のH1 */
            font-weight: 700;
            font-size: 3.0rem;
            top: 55%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            -webkit-transform: translateY(-50%) translateX(-50%);
            width: 100%;
        }
    }

/************************************
** 商品詳細
************************************/
/*============
全体のレイアウト
=============*/
/*ヘッダーアイキャッチ以外を囲む親ブロック、レフトナビゲーションとの関係を制御*/
.itemDetail_wrapper{
    position: relative;
    background: linear-gradient(rgba(255,255,255,0), 50px, rgba(255,255,255,0.9));
    /*background-color: rgba(255,255,255,0.8); */
    width: calc(100% - 220px);/*ページ設定「商品詳細」におけるレフトナビゲーション間の距離を差し引いて幅を決定する*/
    left: 220px;
    padding-top:100px;
    padding-bottom: 30px;
}
/*ヘッダーアイキャッチ以外を囲む親ブロック、レフトナビゲーションとの関係を制御*/
.itemDetail_wrapper_page{
    position: relative;
    background: linear-gradient(rgba(255,255,255,0), 50px, rgba(255,255,255,0.9));
    /*background-color: rgba(255,255,255,0.8); */
    width:  calc(100% + 100px);
    padding-top:100px;
    padding-bottom: 30px;
    margin-left: -30px;
}
/*「.ec-productRole」部分　ブロックの親*/
.am_naviframe_productDetail-parent{
    position: relative;
    display: table;
    width: 100%;
    padding:0;
    padding-top: 70px;
    background-color: #fff;    
}
/*「.ec-productRole」部分　ブロックの子*/
.am_naviframe_productDetail-child_left{
    display: table-cell;
    width: 250px;
    background-color: #ffffff;
}
.am_naviframe_productDetail-child_right{
    display: table-cell;
    width: auto;
    background-color: #ffffff;    
}

    @media screen and (max-width: 1080px){
        .itemDetail_wrapper{
            width: calc(100% - 190px);/*ページ設定「商品詳細」におけるレフトナビゲーション間の距離を差し引いて幅を決定する*/
            left: 190px;
        }
        /*ヘッダーアイキャッチ以外を囲む親ブロック、レフトナビゲーションとの関係を制御*/
        .itemDetail_wrapper_page{
            width:  calc(100% + 110px);
            margin-left: -60px;
        }
    }
    @media screen and (max-width: 768px){
        .itemDetail_wrapper{
            width: 100%;/*1カラムに変更*/
            left: 0;
            right:0;
        }
        /*ヘッダーアイキャッチ以外を囲む親ブロック、レフトナビゲーションとの関係を制御*/
        .itemDetail_wrapper_page{
            width: calc(100% + 40px);
            margin-left: -20px;
        }        
        .am_naviframe_productDetail-child_left{
            display: none;
        }        
        .am_naviframe_productDetail-child_right{
            position: relative;
            display: block;
            left: 0;/*1カラムに変更*/
        }        
    }

/*============
商品詳細ページのヘッダーメインビジュアル
=============*/
/* メインビジュアル 各商品説明で画像設定するが、absoluteで大きくレイアウトする*/
.am_header-eyecatch-image-item{
    position: fixed;
    display: block;
    width: 100%;
    height: 100vh; 
    top:-30px;/*ヘッダー分マイナス*/ 
    bottom: 0;  
    left: 0;
    right: 0;
    z-index: 0;
}
.am_header-eyecatch-image-item img{
    object-fit: cover;    
    width: 100%;
    height:100vh;/*.header-eyecatch-image-itemと高さ揃える*/  
} 
/*キャッチコピー*/
.am_header-eyecatch-image-item h1{
    position: absolute; 
    font-size: 4.0rem;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    margin:auto;
    font-weight:700;
    width: 100%;
    text-align: center;
    padding-left: 50px;
}
/*キャッチコピー色分け*/
.black{
    color:#311800;
    text-shadow: 1px 1px 5px rgba(255,255,255,0.9);
}
.white{
    color:#ffffff;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.9);   
}


    @media screen and (max-width: 1280px){
        .am_header-eyecatch-image-item h1{
            padding-left: 150px;
        }
    }
    @media screen and (max-width: 1080px){
        .am_header-eyecatch-image-item h1{
            padding-left: 150px;
        }
    }
    @media screen and (max-width: 960px){
        .am_header-eyecatch-image-item h1{
            padding-left: 150px;
        }
    }
    @media screen and (max-width: 870px){
        .am_header-eyecatch-image-item h1{
            padding-left: 180px;
        }
    }
    @media screen and (max-width: 768px){
        .am_header-eyecatch-image-item h1{
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    @media screen and (max-width: 480px){
        .am_header-eyecatch-image-item h1{
            font-size:3.0rem;
        }
    }


/*============
LPない場合のスペーサー
=============*/
.am_itemDetail_block_spacer{
    content: "";
    position: relative;
    display: block;
    height:100vh ;
    background-color: #ffffff;           
}


/*============
ランディングページ部分　display:table;の親
=============*/
/*テーブルカラムデザイン・メインコンテンツブロックの親*/
.am_itemDetail_block_parent{
    position: relative;
    display: table;
    border-collapse: separate;/*table内でpaddingを有効にする*/
    padding:0;
    padding-bottom: 150px;/*次のセクションとの距離*/
}
/*商品詳細のアイキャッチとの距離*/
.release-eyecatch{
    margin-top: 100vh;
}


/*テーブルカラムデザイン・メインコンテンツブロックの親　画像1枚だけをセンタリングして表示*/
.am_itemDetail_block_parent.insertion-image{
    position: relative;
    display: table;
    border-collapse: separate;/*table内でpaddingを有効にする*/
    padding:0;
    margin-top: 100px;
    padding-bottom: 50px;/*次のセクションとの距離*/
    text-align: center;
}
/*テーブルカラムデザイン・メインコンテンツブロックの親　画像1枚だけをセンタリングして表示 img部分*/
.am_itemDetail_block_parent.insertion-image img{
    width: 90%;
    display: inline-block;
}

/*============
ランディングページ部分　display:table;の子 70%:30%
=============*/
/*左側70%*/
.am_itemDetail_block_left70{
    display: table-cell;    
    width: 70%;
    padding: 10px;
}
/*右側30%*/
.am_itemDetail_block_right30{ 
    display: table-cell;      
    width: 30%;
    vertical-align: middle;
    padding: 10px; 
    position: relative;   /*商品説明ブロックの基点になる*/
}
.am_itemDetail_block_right30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
    background-color: rgba(255, 255, 255, 0.9);
    /*background-color:#ffffff;*/
    position: absolute;
    bottom: -100px;
    right: 15%;
    width: 150%;
    min-height: 250px;
    padding: 50px;
    /*box-shadow: 1px 1px 5px 1px #f7ebcc;*/
    box-shadow: 1px 1px 5px 1px #ffffff;
}
.am_itemDetail_block_right30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
    position: relative;
    padding-bottom: 30px;
    font-weight: 700;
}
.am_itemDetail_block_right30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明のボーダー*/
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    border: 1px solid #1f4c1e;
    bottom: unset;
    top: 14px;
    left: -115px;
}
/*左側70%のイメージ*/
.am_itemDetail_block_left70 img{
    width: 100%;
    height: auto;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0,0.3);
}
/*リバース　30%：70%*/
/*左側30%*/
.am_itemDetail_block_left30{ 
    display: table-cell;    
    width: 30%;
    vertical-align: middle;   
    padding: 10px;     
    position: relative;   /*商品説明ブロックの基点になる*/
}
.am_itemDetail_block_left30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
    background-color: rgba(255, 255, 255, 0.9);
    /*background-color:#ffffff;*/
    position: absolute;
    bottom: -100px;
    left: 15%;
    width: 150%;
    padding: 50px;
    /*box-shadow: 1px 1px 5px 1px #f7ebcc;*/
    box-shadow: 1px 1px 5px 1px #ffffff;
}
.am_itemDetail_block_left30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
    padding-bottom: 30px;
    font-weight: 700;
}
.am_itemDetail_block_left30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明のボーダー*/
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    border: 1px solid #1f4c1e;
    bottom: unset;
    top: 70px;
    right: -50px;
}
/*右側70%*/
.am_itemDetail_block_right70{
    display: table-cell;    
    width: 70%;
    padding: 10px;
}
/*右側70%のイメージ*/
.am_itemDetail_block_right70 img{
    width: 100%;
    height: auto;    
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0,0.3);
}
    @media screen and (max-width: 1080px){
        /*テーブルカラムデザイン・メインコンテンツブロックの親*/
        .am_itemDetail_block_parent{
            padding-bottom: 250px;/*次のセクションとの距離*/
        }        
        .am_itemDetail_block_right30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
            bottom: -120px;
            right: 15%;
            width: 150%;
            padding: 50px;
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
            padding-bottom: 30px;
            font-weight: 700;
            font-size: 2.8rem;
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明のボーダー*/
            width: 100px;
            bottom: unset;
            top: 14px;
            left: -115px;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
            bottom: -120px;
            left: 15%;
            width: 150%;
            padding: 50px;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
            padding-bottom: 30px;
            font-weight: 700;
            font-size: 2.8rem;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明のボーダー*/
            width: 100px;
            bottom: unset;
            top: 70px;
            right: -50px;
        }
    }
    @media screen and (max-width: 980px){
        /*テーブルカラムデザイン・メインコンテンツブロックの親*/
        .am_itemDetail_block_parent{
            padding-bottom: 250px;/*次のセクションとの距離*/
        }        
        .am_itemDetail_block_right30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
            bottom: -150px;
            right: 15%;
            width: 160%;
            padding: 50px;
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
            padding-bottom: 30px;
            font-weight: 700;
            font-size: 2.8rem;
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明のボーダー*/
            width: 100px;
            bottom: unset;
            top: 14px;
            left: -115px;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
            bottom: -150px;
            left: 15%;
            width: 160%;
            padding: 50px;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
            padding-bottom: 30px;
            font-weight: 700;
            font-size: 2.8rem;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明のボーダー*/
            width: 100px;
            bottom: unset;
            top: 70px;
            right: -50px;
        }
    }
    @media screen and (max-width: 850px){
        /*============
        ランディングページ部分　display:table;の親
        =============*/
  
        /*テーブルカラムデザイン・メインコンテンツブロックの親*/
        .am_itemDetail_block_parent{
            display: flex;
            display: -ms-flexbox;
            display: -webkit-flex;
            -webkit-flex-wrap:wrap;
            -ms-flex-wrap:wrap;
            flex-wrap:wrap;          
            flex-direction: column;            
            width: 100%;
            padding-bottom: 250px;/*次のセクションとの距離*/
        }
        /*商品詳細のアイキャッチとの距離*/
        .release-eyecatch{
            /*margin-top: 550px;*/
        }        
        /*============
        ランディングページ部分　display:table;の子 70%:30%
        =============*/
        /*左側70%*/
        .am_itemDetail_block_left70{
            display: block;    
            width: 100%;
            order: 1;             
        }
        /*右側30%*/
        .am_itemDetail_block_right30{ 
            display: block;    
            width: 100%;
            order: 2;             
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
            bottom: -150px;
            left: 10%;
            width: 90%;
            padding: 30px;
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
            padding-bottom: 30px;
            font-weight: 700;
            font-size: 2.5rem;
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明ブロックのボーダー*/
            border: none;
            border-left: 1px solid #1f4c1e;
            bottom: unset;
            top: -100px;
            left: -15px;
            height: 70px;
        }
        /*左側70%のイメージ*/
        .am_itemDetail_block_left70 img{
            width: 100%;
            height: auto;  
        }
        /*リバース　30%：70%*/
        /*左側30%*/
        .am_itemDetail_block_left30{ 
            display: block;    
            width: 100%;
            order: 2;                
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
            bottom: -150px;
            left: 10%;
            width: 90%;
            padding: 30px;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
            padding-bottom: 30px;
            font-weight: 700;
            font-size: 2.5rem;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明ブロックのボーダー*/
            width:0;
            border: none;
            border-left: 1px solid #1f4c1e;
            bottom: unset;
            top: -70px;
            left: 15px;
            height: 70px;
            right: unset;
        }          
        /*右側70%*/
        .am_itemDetail_block_right70{
            display: block;    
            width: 100%;
            order: 1;            
        }
        /*右側70%のイメージ*/
        .am_itemDetail_block_right70 img{
            width: 100%;
            height: auto;    
        }      
    }
    @media screen and (max-width: 480px){
        /*============
        ランディングページ部分　display:table;の親
        =============*/
  
        /*テーブルカラムデザイン・メインコンテンツブロックの親*/
        .am_itemDetail_block_parent{
            display: flex;
            display: -ms-flexbox;
            display: -webkit-flex;
            -webkit-flex-wrap:wrap;
            -ms-flex-wrap:wrap;
            flex-wrap:wrap;          
            flex-direction: column;            
            width: 100%;
            padding-bottom: 300px;/*次のセクションとの距離*/
        }
        /*商品詳細のアイキャッチとの距離*/
        .release-eyecatch{
            /*margin-top: 550px;*/
        }        
        /*============
        ランディングページ部分　display:table;の子 70%:30%
        =============*/
        /*左側70%*/
        .am_itemDetail_block_left70{
            display: block;    
            width: 100%;
            order: 1;             
        }
        /*右側30%*/
        .am_itemDetail_block_right30{ 
            display: block;    
            width: 100%;
            order: 2;             
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
            bottom: -280px;
            left: 10%;
            width: 90%;
            padding: 30px;
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
            padding-bottom: 30px;
            font-weight: 700;
            font-size: 2.5rem;
        }
        .am_itemDetail_block_right30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明ブロックのボーダー*/
            border: none;
            border-left: 1px solid #1f4c1e;
            bottom: unset;
            top: -100px;
            left: -15px;
            height: 70px;
        }
        /*左側70%のイメージ*/
        .am_itemDetail_block_left70 img{
            width: 100%;
            height: auto;  
        }
        /*リバース　30%：70%*/
        /*左側30%*/
        .am_itemDetail_block_left30{ 
            display: block;    
            width: 100%;
            order: 2;                
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock{/*写真に重なる商品説明ブロック*/
            bottom: -280px;
            left: 10%;
            width: 90%;
            padding: 30px;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock h2{/*写真に重なる商品説明ブロックH2*/
            padding-bottom: 30px;
            font-weight: 700;
            font-size: 2.5rem;
        }
        .am_itemDetail_block_left30 .LP_descriptionBlock h2::after{/*写真に重なる商品説明ブロックのボーダー*/
            width:0;
            border: none;
            border-left: 1px solid #1f4c1e;
            bottom: unset;
            top: -70px;
            left: 15px;
            height: 70px;
            right: unset;
        }          
        /*右側70%*/
        .am_itemDetail_block_right70{
            display: block;    
            width: 100%;
            order: 1;            
        }
        /*右側70%のイメージ*/
        .am_itemDetail_block_right70 img{
            width: 100%;
            height: auto;    
        }      
    }    
/*============
商品詳細ブロック
=============*/

/*gridの親*/
.am_grid_itemDetail {
    position: relative;
    display: grid;
    background-color: #ffffff;
    gap: 10px;
    grid-template-columns: 1fr 1fr;    
    /*grid-template-columns: repeat(auto-fit, 50%);*/
}
.am_grid_itemDetail_item {

}
.am_grid_itemDetail_item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}   

/*フリーエリア*/
h5.freearea_heading{
    color: #1f4c1e;
    font-weight: 700;
    font-size: 2.0rem;
    padding-top: 20px;
}
hr.freearea{
    border-bottom:1px solid #333333;
}


/*商品詳細ページのアクション*/
.am_onecolumn_block-promotion{
    position: relative;
    display: block;
    background-color: #f7ebcc;
    border:solid 2px #8c2300;
    padding: 15px;
    margin: 0 auto;
    margin-bottom: 70px;
    text-align: center;
    border-radius: 10px;
    max-width: 640px;
    width: 90%;
}
.am_onecolumn_block-promotion h3{
    font-size: 3.0rem;
    font-weight: 700;
    padding-top: 30px;
    padding-bottom: 30px;    
}
/*フリーエリア内おすすめ商品*/
.itemDetail_recommend_parent{
    position: relative;
    width: 100%;
}
.itemDetail_recommend_parent h3{
    color: #1f4c1e;
    background-color: rgba(247, 235, 204,0.9);
    font-weight: 700;
    padding: 20px 10px;
    margin-bottom: 20px;
    text-align: center;
    border-radius: 10px;
} 
.am_grid3_itemDetail_recommend{
    position: relative;
    display: grid;
    background-color: #ffffff;
    /*grid-template-columns: 1fr 1fr 1fr;*/
    grid-template-columns: repeat(auto-fit, 30%);
    gap:10px;
    justify-content: left;
}
.am_item3_itemDetail_recommend{
    padding: 0 2px;
}
.am_item3_itemDetail_recommend p{
    font-size: 1.5rem;
}
.am_item3_itemDetail_recommend p.price02-default{
    color: #8c2300;
    font-weight: 500;
}
.am_item3_itemDetail_recommend a{
    color: inherit;
    text-decoration: none;
}
.am_item3_itemDetail_recommend img {
    width:100%;
    height: auto;
    object-fit: cover;
}
.am_item3_itemDetail_recommend img:hover {
    /*transform:scale(1.1,1.1);親要素のoverflowが効かないので課題*/
    opacity: 0.7;
    transition: 0.5s;
}
/*「カートに入れる」上部の最終訴求セクション*/
.item_info_cartbuttontop{
    padding-top: 50px;
}
.item_price_cartbuttontop{
    padding-top: 20px;
    padding-bottom: 10px;
}

/************************************
** ec-layoutRole__contentsをレフトナビゲーション分に分割するレイアウト
************************************/
/*============
TOPページ用
=============*/
/*レイアウト親*/
.am_naviframe_top-parent{
    position: relative;
    display:table;
    width: 100%;
    padding-right: 50px;  
    z-index: 1; 
    background-color: #ffffff;   
}
/*左カラム*/
.am_naviframe_top-child-left{
    display: table-cell;
    width: 250px;
}
/*右カラム*/
.am_naviframe_top-child-right{
    display: table-cell;
    width: auto;
}
    @media screen and (max-width: 768px){
        /*レイアウト親*/
        .am_naviframe_top-parent{
            position: relative;
            display:block;
            width: 100%;
            padding-right: 20px;
            padding-left: 20px;
            z-index: 1; 
        }
        /*左カラム*/
        .am_naviframe_top-child-left{
            display:block;
            width: 100%;
        }
        /*右カラム*/
        .am_naviframe_top-child-right{
            display:block;
            width: 100%;
        }    
    }

    @media screen and (max-width: 480px){
             
    }


/************************************
** 下層ページ用レイアウト
************************************/
/* メインビジュアル */
.am_header-eyecatch-image{
    position: relative;
    max-width: 100%; 
    width: 100%;
    text-align: center;
}
.am_header-eyecatch-image img{
    object-fit: cover;    
    width: 100%;
    height: 300px;    
}
/************************************
** レスポンシブカラムレイアウト
************************************/
/*スペーサー*/
.am_block_spacer{
    content: "";
    position: relative;
    display: block;
    height:80px ;
    background-color: #ffffff;  
    z-index: 1;         
}
/*1カラムデザイン基本ブロック*/
.am_onecolumn_block{
    position: relative;
    display: block;
    width: 100%;
    background-color: #ffffff;    
}
/*商品ラインナップが必要なブロック*/
.am_onecolumn_block.category{
    position: relative;
    display: block;
    width: 100%;
    background-color: transparent;   
    padding:0 20px ;
}
.am_onecolumn_block img.banner{
    display: block;    
    max-width: 100%;
    width: 100%;
    height: auto;
}
/*ログインレイアウト　1カラムデザイン基本ブロック*/
.am_onecolumn_block_login{
    position: relative;
    display: block;
    margin: 0 auto;
    width: 90%;
    background-color: #ffffff;    
}
/*============
見出し
=============*/
.am_onecolumn_block h1{
    padding-bottom: 50px;
    font-size: 4.0rem;
    font-weight: 700;
}
.am_onecolumn_block h1.toppageHeading{
    padding-bottom: 50px;
    font-size: 5.0rem;
    font-weight: 700;
    color:#1f4c1e;
}
.am_onecolumn_block h2{
    padding-bottom: 30px;
    padding-top: 50px;
    font-weight:700;
    /*padding-left: 20px;*/
    /*border-left: 5px solid #1f4c1e;*/
}
/*H2のバーティカルバー*/
.am_onecolumn_block h2 .separate{
    color: #8c2300;
    font-size: 1.5rem;
    padding: 0 10px 0 20px;
}
/*英語のタイトル*/
.am_onecolumn_block h2 .enh2Title{
    font-family: 'Courier New', Courier, monospace;
    color: #8c2300;
    font-size: 1.5rem;
}
.am_onecolumn_block h2.article-heading{
    background-color: #f7ebcc;
    padding: 20px;
    margin-bottom: 30px;
    
}
.am_onecolumn_block h3{
    padding-bottom: 20px;
    padding-top: 50px;
}
.am_onecolumn_block h3.article-heading{
    display: inline-block;
    /*background-color: #f7ebcc;*/
    border-bottom: 1px solid #1f4c1e;
    padding: 0;    
    margin-top: 50px;
    margin-bottom: 30px;
    padding-bottom: 5px;
}
.am_onecolumn_block h3.article-heading i{
    color: #1f4c1e;
    padding-right:10px;
}
.am_onecolumn_block p{
    margin-top:10px ;
    margin-bottom: 20px;
}
.am_onecolumn_block h4{
    display: inline-block;
    margin-top: 50px;
    margin-bottom: 20px;
    border: solid 1px #1f4c1e;
    background-color: #f7ebcc;
    padding: 20px;
}
.am_onecolumn_block p{
    margin-top:0 ;
    margin-bottom:0;
}
    @media screen and (max-width: 768px){
        .am_onecolumn_block h1{
            margin-bottom: 50px;
            font-size: 3.5rem;
        }        
    }
    @media screen and (max-width: 480px){
        .am_onecolumn_block h1{
            margin-bottom: 50px;
            font-size: 2.5rem;
        } 
        .am_onecolumn_block h2{
            font-size: 2.0rem;
        }
        .am_onecolumn_block h1.toppageHeading{
            padding-bottom: 0;
            font-size: 2.5rem;
            font-weight: 700;
        }        
    }    
/*============
テーブルカラムデザイン
=============*/
/*テーブルカラムデザイン・メインコンテンツブロックの親*/
.maincontent_flexblock_parent{
    position: relative;
    display: table;
    width: 100%;
    border-collapse: separate;/*table内でpaddingを有効にする*/
    padding:20px;
}
/*見出し*/
.maincontent_flexblock_parent h2{
    padding-bottom: 30px;
    padding-top: 50px;
    font-weight:700;
    color:#1f4c1e;
}
/*============
display:table;の子 70%:30%
=============*/
/*左側70%*/
.maincontent_flexblock_item_left70{
    display: table-cell;    
    width: 70%;
    padding: 10px;
}
/*右側30%*/
.maincontent_flexblock_item_right30{ 
    display: table-cell;      
    width: 30%;
    vertical-align: middle;
    padding: 10px;    
}
/*左側70%のイメージ*/
.maincontent_flexblock_item_left70 img{
    width: 100%;
    height: auto;
}
/*リバース　30%：70%*/
/*左側30%*/
.maincontent_flexblock_item_left30{ 
    display: table-cell;    
    width: 30%;
    vertical-align: middle;   
    padding: 10px;     
}
/*右側70%*/
.maincontent_flexblock_item_right70{
    display: table-cell;    
    width: 70%;
    padding: 10px;
}
/*右側70%のイメージ*/
.maincontent_flexblock_item_right70 img{
    width: 100%;
    height: auto;    
}
/*============
display:table;の子 50%:50%
=============*/
/*display:table;の子　一律で同じ幅 */
.maincontent_flexblock_item_50{
    display: table-cell;     
    width: 50%;
    padding: 10px;
    vertical-align: middle;
}
.maincontent_flexblock_item_50 h3{
    color: #1f4c1e;
    background-color: rgba(247, 235, 204,0.9);
    font-weight: 700;
    padding: 10px 5px;
    margin-bottom: 20px;
}
/*display:table;の子内IMG*/
.maincontent_flexblock_item_50 img{
    width: 100%;
    height: auto;
}
/*display:table;の子内IMG ランキング上位3位　.item-visual*/
.maincontent_flexblock_item_50 img.item-visual{
    width: 100%;
    height: auto;
}

    @media screen and (max-width: 768px){
        /*============
        テーブルカラムデザインの表示順をFLEXで変更
        =============*/
        /*テーブルカラムデザイン・メインコンテンツブロックの親*/        
        .maincontent_flexblock_parent.addflex{
            display: flex;
            display: -ms-flexbox;
            display: -webkit-flex;
            -webkit-flex-wrap:wrap;
            -ms-flex-wrap:wrap;
            flex-wrap:wrap;          
            flex-direction: column;            
            width: 100%;
            padding:0;
        }

        /*============
        display:table;の子 70%:30%
        =============*/
        /*左側70%*/
        .maincontent_flexblock_item_left70{
            display: block;    
            width: 100%;
            order: 1;             
        }
        /*右側30%*/
        .maincontent_flexblock_item_right30{ 
            display: block;    
            width: 100%;
            padding:20px;     
            order: 2;           
        }
        /*左側70%のイメージ*/
        .maincontent_flexblock_item_left70 img{
            width: 100%;
            height: auto;  
        }
        /*リバース　30%：70%*/
        /*左側30%*/
        .maincontent_flexblock_item_left30{ 
            display: block;    
            width: 100%;
            padding:20px;     
            order: 2;                
        }
        /*右側70%*/
        .maincontent_flexblock_item_right70{
            display: block;    
            width: 100%;
            order: 1;            
        }
        /*右側70%のイメージ*/
        .maincontent_flexblock_item_right70 img{
            width: 100%;
            height: auto;    
        }
        /*============
        display:table;の子 50%:50%
        =============*/
        /*display:table;の子　一律で同じ幅 */
        .maincontent_flexblock_item_50{
            display: block;    
            width: 100%;
        }
    }

  
/*============
gridグリッド
=============*/
/*グリッドブロック2カラム*/
.am_grid2 {
    position: relative;
    display: grid;
    background-color: #ffffff;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    row-gap:50px;
}
.am_item2 {
}
.am_item2 img {
    width:100%;
    height: auto;
    object-fit: cover;
} 
/*ランキングの商品*/
.am_item2 .item_ranking{

}

/*まん丸画像3列 ブレイクポイントで画像大きさ制御*/
.am_grid_round3{
    position: relative;
    display: grid;
    gap: 50px;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 300px;
    align-items: center;
    justify-content: center;
}
.am_item_round3{
 	width: 100%;
 	height:0;
 	padding-bottom: 100%;
}
.am_item_round3 img{
    border-radius: 50%;
    width: 300px;
    height: 300px;
    object-fit: cover;
}
/*カテゴリイメージ3列（全ページ共通）　横幅可変*/
.am_grid3{
    position: relative;
    display: grid;
    background-color: #ffffff;
    /*grid-template-columns: 1fr 1fr 1fr;*/
    grid-template-columns: repeat(auto-fit, 33%);
    align-items: center;
    justify-content: left;
    grid-row-gap:20px;
}
.am_item3{
  padding: 10px;
}
.am_item3 a{
    color: inherit;
    text-decoration: none;
}
.am_item3 img {
    width:100%;
    height: auto;
    object-fit: cover;
}
.am_item3 img:hover {
    /*transform:scale(1.1,1.1);親要素のoverflowが効かないので課題*/
    opacity: 0.7;
    transition: 0.5s;
}
/*カテゴリーメニュー用*/
.am_item3 .banner_hover{
    position: relative;
    padding: 0;
}
.am_item3 .banner_hover:hover{
    transition: 0.5s all;
    opacity: 0.7;
}
.am_item3 .banner_hover p.am_category_menu{/*カテゴリーメニュー*/
    background-color: rgba(247, 235, 204,0.7);
    color: #311800;
    padding-top: 5px;
    padding-bottom: 5px;
    position: absolute;
    top: 50%;
    left: 50%;/*微妙な隙間ができるので調整*/
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding: 0;
    width: 100%;
    text-align: center;
}
/*商品ラインナップが必要な3カラムグリッド*/
.am_grid3_category{
    position: relative;
    display: grid;
    background-color: transparent;
    /*grid-template-columns: 1fr 1fr 1fr;*/
    grid-template-columns: repeat(auto-fit, 33%);
    /*align-items: center;*/
    justify-content: left;
    grid-row-gap:20px;
}
.am_item3_category{
  padding: 10px;
}
.am_item3_category a{
    color: inherit;
    text-decoration: none;
}
.am_item3_category img {
    width:100%;
    height: auto;
    object-fit: cover;
}
.am_item3_category img:hover {
    /*transform:scale(1.1,1.1);親要素のoverflowが効かないので課題*/
    opacity: 0.7;
    transition: 0.5s;
}
/*4カラムブロック*/
.am_grid4 {
    position: relative;
    display: grid;
    background-color: #ffffff;
    /*grid-template-columns: repeat(4,25%);*/
    grid-template-columns: repeat(auto-fit, 23%);
    /*align-items: center;*/
    justify-content: left;
    gap:20px;
    row-gap:70px;
    padding-bottom:10px;
}
.am_item4{
  padding: 0;
  box-shadow: 2px 2px 4px gray;
  background-color:rgba(250, 250, 250,0.8);
  padding-bottom:10px;
  position:relative;
}
.am_item4 .ProoductList_titlebox{
    background-color:transparent;
}
.am_item4 a{
    text-decoration: none;
    color: #311800;
}
.am_item4 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /*border-top-left-radius: 10px;    
    border-top-right-radius:10px ;    */
} 
.am_item4 img:hover {
    opacity: 0.7;
    transition: 0.5s all;
}
/*価格表示*/
.am_item4 p.price02-default .price{
    color:#8c2300;
    font-weight:900;
}
/*商品を見る　テキストリンク　商品リスト、おすすめ商品で使用*/
.am_item4 .viewMore{  
    position:absolute;
    bottom:0;
    right:0;
}
.am_item4 .viewMore i{ 
    padding-right:10px; 
}
.am_item4 .viewMore p{
    text-align:right;
    padding-right:10px;   
}
.am_item4 .viewMore a{  
    color:#1f4c1e;  
    font-weight:700;
}
.am_item4 .viewMore a:hover{  
    opacity:0.7;
    transition:0.5s;
}
/*商品タイトルと価格*/
.ProoductList_titlebox{
    background-color: rgba(247, 235, 204,0.7);
    padding: 20px 20px 20px 20px;
}
.ProoductList_titlebox .ec-blockBtn{
    background-color:rgba(31,76,30,0.7);
    color:#f7ebcc;
    font-weight:500;
    width:90%;
    margin: 0 auto;
    margin-top:20px;
    border-radius:10px;
}
.ProoductList_titlebox .ec-blockBtn:hover{
    opacity:0.7;
    transition:0.5s;
}
    @media screen and (max-width:1280px){  
        /*まん丸画像3列 ブレイクポイントで画像大きさ制御*/
        .am_grid_round3{
            gap: 30px;
            grid-template-columns: 250px 250px 250px;
            grid-template-rows: 250px;
        }
        .am_item_round3 img{
            width: 250px;
            height: 250px;
        }
    }
    @media screen and (max-width:1080px){  
        /*まん丸画像3列 ブレイクポイントで画像大きさ制御*/
        .am_grid_round3{
            gap: 30px;
            grid-template-columns: 220px 220px 220px;
            grid-template-rows: 220px;
        }
        .am_item_round3 img{
            width: 220px;
            height: 220px;
        }
        /*カテゴリイメージ3列（全ページ共通）　横幅可変*/
        .am_grid3,.am_grid3_category{
            grid-template-columns: repeat(auto-fit, 50%);
        }
        .am_item3 .banner_hover p.am_category_menu{/*カテゴリーメニュー*/
            padding-top: 5px;
            padding-bottom: 5px;
        }
        /*4カラムブロック*/
        .am_grid4 {
            grid-template-columns: repeat(auto-fit, 23%);
            gap:15px;
            row-gap:5.0em;
        }
    }
    @media screen and (max-width:960px){  
        /*まん丸画像3列 ブレイクポイントで画像大きさ制御*/
        .am_grid_round3{
            gap: 20px;
            grid-template-columns: 180px 180px 180px;
            grid-template-rows: 180px;
        }
        .am_item_round3 img{
            width: 180px;
            height: 180px;
        }
        /*4カラムブロック*/
        .am_grid4 {
            grid-template-columns: repeat(auto-fit, 22%);
            gap:15px;
            row-gap:5.0em;
        }        
    }
    @media screen and (max-width:830px){  
        /*まん丸画像3列 ブレイクポイントで画像大きさ制御*/
        .am_grid_round3{
            gap: 20px;
            grid-template-columns: 160px 160px 160px;
            grid-template-rows: 160px;
        }
        .am_item_round3 img{
            width: 160px;
            height: 160px;
        }
        /*4カラムブロック⇒2カラム化*/
        .am_grid4 {
            grid-template-columns: repeat(auto-fit, 48%);
            gap:10px;
            row-gap:5.0em;
        }        
    }
    @media screen and (max-width:768px){        
        /*まん丸画像3列 ブレイクポイントで画像大きさ制御*/
        .am_grid_round3{
            gap: 20px;
            grid-template-columns: 180px 180px 180px;
            grid-template-rows: 180px;
        }
        .am_item_round3 img{
            width: 180px;
            height: 180px;
        }
        /*カテゴリイメージ3列（全ページ共通）　横幅可変*/
        .am_grid3,.am_grid3_category{
            grid-template-columns: repeat(auto-fit, 50%);
        }
        .am_item3 .banner_hover p.am_category_menu{/*カテゴリーメニュー*/
            padding-top: 5px;
            padding-bottom: 5px;
        }        
    }
    @media screen and (max-width: 640px){
        /*まん丸画像3列 ブレイクポイントで画像大きさ制御*/
        .am_grid_round3{
            gap: 10px;
            grid-template-columns: 150px 150px 150px;
            grid-template-rows: 150px;
        }
        .am_item_round3 img{
            width: 150px;
            height: 150px;
        }
    }
    @media screen and (max-width: 480px){
        /*まん丸画像3列 ブレイクポイントで画像大きさ制御*/
        .am_grid_round3{
            gap: 50px;
            grid-template-columns: 250px;
            grid-template-rows: 250px;
        }
        .am_item_round3 img{
            width: 250px;
            height: 250px;
        }    
        /*カテゴリイメージ3列（全ページ共通）　横幅可変*/
        .am_grid3,.am_grid3_category{
            grid-template-columns: repeat(auto-fit, 100%);
            margin-left: -20px;/*横幅いっぱいに調整*/
            margin-right: -20px;/*横幅いっぱいに調整*/
            row-gap:50px;
        }
        .am_item3,.am_item3_category{
            padding: 0;
        }
        .am_item3 img,.am_item3_category img{
            width: 100%;
        }
        .am_item3 .banner_hover p.am_category_menu{/*カテゴリーメニュー*/
            padding-top: 5px;
            padding-bottom: 5px;
        }
        /*4カラムブロック*/
        .am_grid4 {
            grid-template-columns: repeat(auto-fit, 100%);
            gap:10px;
            row-gap:100px;
        }  
        .ProoductList_titlebox{
            padding-top: 10px;
            padding-left: 20px;
        }
    }
    @media screen and (max-width: 320px){
        /*4カラムブロック*/
        .am_grid4 {
            grid-template-columns: repeat(auto-fit, 100%);
            gap:10px;
            row-gap:100px;
            justify-content: center;            
        }          
    }

/************************************
** ご利用ガイド
************************************/
/*画像ブロックの親*/
.shopping-guide_parent{
    position: relative;
    display: block;
    margin-top: 70px;
    margin-bottom: 40px;
}
/*画像PC*/
.shopping-guide{
    margin-top: 20px;
}
.shopping-guide img{
    border:1px solid #333333;
    max-width: 640px;
    width: 90%;    
}

/*画像SP*/
.shopping-guide-sp{
    margin-top: 20px;
}
.shopping-guide-sp img{
   border: 1px solid #333333;
    max-width: 360px;    
    width: 90%;    
}
/*決済方法*/
.shopping-guide_bill img{
    width: auto;
    max-width: 100%;
}

/************************************
** 装飾
************************************/
/*============
ページ途中の緩いカーブ
=============*/
.am_container {
  position: relative;
  background: transparent;
  background-image: url("https://aozora-marche.jp/html/user_data/assets/img/siteimg/bg_withe.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: bottom;
  height: 150px;
}

/*.am_wave {
  position: absolute;
  height: 42px;
  width: 100%;
  background: #2c3e50;
  bottom: 0;
  z-index: 0;
}

.am_wave::before, .am_wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
}

.am_wave::before {
  width: 55%;
  height: 109%;
  background-color: #fff;
  right: -1.5%;
  top: 60%;
}
.am_wave::after {
  width: 55%;
  height: 100%;
  background-color: #2c3e50;
  left: -1.5%;
  top: 40%;
}*/
/*============
背景色
=============*/
/*薄い背景色*/
.am_naviframe_top-parent.backgroundcolor{
    position: relative;
    background-color:#ffffff;
    z-index: 1;
    
}
.am_naviframe_top-parent.backgroundcolor::after{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;    
    content: "";
    z-index: 0;
    background-color: rgba(31, 76, 30,0.1);
    background-image: radial-gradient(rgba(31, 76, 30,0.7) 0.35000000000000003px, rgba(31, 76, 30,0.1) 0.35000000000000003px);
    background-image: -moz-radial-gradient(rgba(31, 76, 30,0.7) 0.35000000000000003px, rgba(31, 76, 30,0.1) 0.35000000000000003px);
    background-image: -webkit-radial-gradient(rgba(31, 76, 30,0.7) 0.35000000000000003px, rgba(31, 76, 30,0.1) 0.35000000000000003px);
    background-size: 7px 7px;    
}
/*============
タグ
=============*/
.ec-productRole .ec-productRole__tag {
    display: inline-block;
    padding: 10px 10px;
    list-style: none;
    font-size: 80%;
    font-weight:700;
    color: #f7ebcc;
    border: solid 1px #D7DADD;
    border-radius: 10px;
    background-color: rgba(31,76,30,0.7); }

    @media screen and (max-width: 768px){
.ec-productRole .ec-productRole__tag {
    display: inline-block;
    padding: 10px 10px;
    list-style: none;
    font-size: 80%;
    font-weight:700;
    color: #f7ebcc;
    border: solid 1px #D7DADD;
    border-radius: 10px;
    background-color: rgba(31,76,30,0.7); }
        
    }
    @media screen and (max-width: 480px){
.ec-productRole .ec-productRole__tag {
    display: inline-block;
    padding: 10px 10px;
    list-style: none;
    font-size: 80%;
    font-weight:700;
    color: #f7ebcc;
    border: solid 1px #D7DADD;
    border-radius: 10px;
    background-color: rgba(31,76,30,0.7); }

   }      

/************************************
** ニュースブロック（新着情報、お知らせ、ブログ）
************************************/

.am_onecolumn_block.newsblock{
    padding-top: 10px;
    padding-bottom: 50px;
    z-index: 5;
    background-color: transparent;
}
.onecolumn_block.newsblock h3{

}
.onecolumn_block.newsblock i{
}
/*ニュースブロック*/
.ec-newsRole .ec-newsRole__news{
    padding: 20px 30px 10px 0;
    background-color: rgba(255,255,255,0.9);    
}
/*お知らせの記事見出し*/
.ec-newsRole .ec-newsRole__newsHeading{
    padding-left: 30px;
}
/*お知らせ記事本体*/
.ec-newsRole .ec-newsRole__newsDescription{
    padding-left: 30px;
}
/*PHP設定のブログ*/
ul.php_newsBlock li{
    list-style: none;
    font-size: 14px;
}
ul.php_newsBlock li .news_date{
    padding-right: 30px;
}

    @media screen and (max-width:1280px){
    }
    @media screen and (max-width:1080px){
    }
    @media screen and (max-width:960px){
    }
    @media screen and (max-width:830px){
    }    
    @media screen and (max-width: 768px){
   }
    @media screen and (max-width: 480px){
   }   


/************************************
** お客様の声（wp_query　でデータ取得）
************************************/
.uservoice_block_parent{/*親ブロック*/
    
}
.uservoice_block_parent ul{
    padding: 0;
}
.uservoice_block_parent ul li{
    list-style: none;
}
.php_uservoice_block{/*php内のブロック親*/
    border:1px solid #1f4c1e ;
    padding: 20px;    
    margin-bottom: 30px;
}
.php_uservoice_block_title{/*phpブロック内「タイトル」*/
    border-left:5px solid #1f4c1e ;
    padding-left: 20px;
}
.php_uservoice_block_Heading{
    font-size: 2.0rem;
    font-weight: 700;
}
.php_uservoice_block_content{/*phpブロック内「本文」*/
    margin-top: 20px;
    margin-bottom: 30px;
    margin-left: 20px;
}
.php_uservoice_block_content blockquote{/*お客様の声に対するコメント*/
    margin-top: 30px;
    margin-left: 30px;
}
.php_uservoice_block_content blockquote::before{/*お客様の声に対するコメント*/
    content: "あおぞらマルシェからのコメント";
    font-size: 0.8rem;
    color: #8c2300;
}


/************************************
** フッター
************************************/

/*SNSアイコン親*/
.sns-icon-outer{
    position: relative;
    display: table;
    width: 100%;
    text-align: center;
    margin-bottom: none;
    margin-top: 50px;
}
.sns-icon-outer .sns-icon{
    padding-left: 0;
}
.sns-icon-outer ul li{
    display: inline;
    list-style: none;
    font-size: 3rem;
    padding: 20px;
}

/*フッター3列化*/
.am_footerGrid{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    align-items: flex-start;
    justify-content: left;
    gap:10px;
    padding-left: 20px;
    padding-right: 20px;
}
.am_footerGriditem{
}
.am_footerGriditem a{
    color: inherit;
    text-decoration: none;
}
.am_footerGriditem a:hover{
    opacity: 0.7;
    transition: 0.5s;
}
/*ロゴブロック*/
.footerGrid-logo{
    position: relative;
    display: block;
    margin-left: 50px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.footerGrid-logo p{
    font-size: 1.2rem;
    color: #f7ebcc;
}
.footerGrid-logo p.siteTitle{
    font-size: 1.8rem;
    padding-bottom: 20px;
}
.footerGrid-logo p.siteLink{
    padding-top: 20px;
}
.footerGrid-logo img,.ec-footerRole .ec-footerRole__inner img{/*ロゴimg*/
    display: block;
    width: 200px;
    margin-bottom: 50px;
}
    @media only screen and (max-width: 768px) {
        /*フッター3列化*/
        .am_footerGrid{
            position: relative;
            display: grid;
            grid-template-rows: 1fr 1fr;
            grid-template-columns: 1fr 1fr;
            align-items: baseline;
            justify-content: left;
            gap:10px;
            padding-left: 20px;
            padding-right: 20px;
        }    
        .am_footerGriditem:first-child{
            grid-row: 1 / 2;
            grid-column: 1 / 2;
        }
        .am_footerGriditem:nth-child(2){
            grid-row: 1 / 2;
            grid-column: 2 / 3;
        }
        .am_footerGriditem:last-child{
            grid-row: 2 / 2;
            grid-column: 1 / 3;
        }    
        /*ロゴブロック*/
        .footerGrid-logo{
            position: relative;
            display: block;
            margin-left: 20px;
            width: 100%;
            height: 300px;
            margin-top: 50px;
            margin-bottom: 10px;
        }
        .footerGrid-logo p{
            white-space: nowrap;
        }
        .footerGrid-logo img,.ec-footerRole .ec-footerRole__inner img{/*ロゴimg*/
            display: block;
            width: 120px;
            margin-bottom: 50px;
        }        
    }

/*通常用フッター*/
div.ec-layoutRole__footer{/*包括要素*/
    position: relative;
    display: block;
    height: 100%;
}
div.ec-footerRole{
    background-image: url("https://aozora-marche.jp/html/user_data/assets/img/siteimg/_O0A4340-w1920xh600-min.webp");    
    margin-top:0;
    color: #f7ebcc;  
    /* 画像を常に天地左右の中央に配置 */
    background-position: center center;
    /* 画像をタイル状に繰り返し表示しない */
    background-repeat: no-repeat;
    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
    background-attachment: fixed;
    /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
    background-size: cover;  
}

div.ec-footerRole::after{/*背景画像に色を透過色*/
    position: absolute;
    content: "";
    background-color: rgba(31, 76, 30,0.7); 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
 
/*フッター内コンテンツ*/
.ec-footerRole__inner{
    position: relative;
    color: #f7ebcc;  
    z-index: 1; 
}
    @media only screen and (max-width: 768px) {
        /*通常用フッター*/
        div.ec-layoutRole__footer{/*包括要素*/
            position: relative;
            display: block;
            height: 100%;
        }
        div.ec-footerRole{
            background-image:none; 
            margin-top:0;
            color: #f7ebcc;  
        }
        div.ec-footerRole span{
        }        
        div.ec-footerRole::before{
            background: url("https://aozora-marche.jp/html/user_data/assets/img/siteimg/_O0A4340-w1920xh600-min.webp") no-repeat center;/* 画像（ここにfixedは入れない） */
            background-size: cover;/* cover指定できる */
            content: "";
            display: block;
            position: sticky;
            position: -webkit-sticky; /* Safari */              
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;/* 横幅いっぱい */
            height: 100vh;/* 縦幅いっぱい */
        }
        div.ec-footerRole::after{/*背景画像に色を透過色*/
            position: absolute;
            content: "東北を食べよう";
            top:450px;
            text-align: center;
            font-size: 5.0rem;
            background-color: transparent;
            z-index: 1;
            color: #ffffff;
            height: auto;
            text-shadow: 1px 1px 5px rgba(0,0,0,0.9);
        }
        /*フッター内コンテンツ*/
        .ec-footerRole__inner{
            /*position: relative;*/
            position: sticky;
            position: -webkit-sticky; /* Safari */                
            color: #f7ebcc;  
            z-index: 2; 
            background-color: rgba(0,0,0,0.3);  
            padding-top: 50px;
        }
    }
    @media only screen and (max-width: 480px) {
        div.ec-footerRole::after{/*背景画像に色を透過色*/
            top:320px;
            font-size: 3.2rem;
        }
    }


/*フッター内ナビ*/
.ec-footerNavi {
  padding: 0;
  color: #f7ebcc;   
  list-style: none;
  text-align: left; 
}
.ec-footerNavi .ec-footerNavi__link {
    display: block; }
.ec-footerNavi .ec-footerNavi__link a {
      display: block;
      border-bottom: 1px solid #7d7d7d;
      padding: 10px 0 5px 0;
      font-size: 12px;
      text-decoration: none; 
}
.ec-footerNavi .ec-footerNavi__link:hover a {
    opacity: 0.7;
    transition: 0.5s all;
    text-decoration: none; 
}
.ec-footerTitle {
  padding:0;
  padding-bottom: 30px;
  text-align: center;
  color: white; }
.ec-footerTitle .ec-footerTitle__logo {
    display: block;
    margin-bottom: 10px;
    font-weight: 700; }
.ec-footerTitle .ec-footerTitle__logo a {
      color: inherit;
      text-decoration: none; }
.ec-footerTitle .ec-footerTitle__logo a:hover {
      text-decoration: none; }
.ec-footerTitle .ec-footerTitle__logo a {
      font-size: 22px;
      color: #f7ebcc;   }
.ec-footerTitle .ec-footerTitle__logo:hover a {
    opacity: .8;
    transition: 0.5s all;
    text-decoration: none; }
.ec-footerTitle .ec-footerTitle__copyright {
    font-size: 10px; }
.ec-footerRole__inner i{/*アイコン*/
  color: #f7ebcc;  
}   


/*パララクス用フッター*/
.fotter_spacer{
    content: "";
    position: relative;
    display: block;
    margin-bottom: 100%;
    background-color: #ffffff;    
}
.custom-footer{
    position: relative;
    width: 100vw;  
    max-width:100vw;
    height: 100vh;
    background-color: transparent;
    border: none;
    background-image: url("https://aozora-marche.jp/html/user_data/assets/img/siteimg/_O0A4340-w1920xh600-min.jpg");    
    color: #f7ebcc;  
    /* 画像を常に天地左右の中央に配置 */
    background-position: center center;
    /* 画像をタイル状に繰り返し表示しない */
    background-repeat: no-repeat;
    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
    background-attachment: fixed;
    /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
    background-size: cover;  
    z-index: 0;
}
/*フッター内コンテンツ*/
.custom-footer__inner {
    position: absolute;
    content: "";
    background-color: rgba(31, 76, 30,0.7); 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;  
    max-width:100vw;
    height: 100vh;
}

/*フッター内ナビ*/
.custom-footerNavi {
    position: relative;
    width: 100%;
    margin-top: 50px;
    margin-bottom: none;
}
.custom-footerNavi ul li{
    display: inline;
    list-style: none;
    font-size: 1rem;
    padding: 20px;
}


.custom-footerNavi .ec-footerNavi__link {
    display: block; 
}
.custom-footerNavi .ec-footerNavi__link a {
    display: block;
    border-bottom: 1px solid #7d7d7d;
    padding: 15px 0;
    font-size: 14px;
    color: inherit;
    text-decoration: none; 
}
.custom-footerNavi .ec-footerNavi__link:hover a {
    opacity: .7;
    transition: 0.5s all;
    text-decoration: none; 
}
.custom-footerTitle {
  padding: 40px 0 60px;
  text-align: center;
  color: white; }
.custom-footerTitle .ec-footerTitle__logo {
    display: block;
    margin-bottom: 10px;
    font-weight: 700; }
.custom-footerTitle .ec-footerTitle__logo a {
      color: inherit;
      text-decoration: none; }
.custom-footerTitle .ec-footerTitle__logo a:hover {
      text-decoration: none; }
.custom-footerTitle .ec-footerTitle__logo a {
      font-size: 22px;
      color: #f7ebcc;   }
.custom-footerTitle .ec-footerTitle__logo:hover a {
        opacity: .7;
        transition: 0.5s all;
        text-decoration: none; }
.custom-footerTitle .ec-footerTitle__copyright {
    font-size: 10px; }
.custom-footerRole__inner i{/*アイコン*/
  color: #f7ebcc;  
} 

    @media only screen and (min-width: 768px) {
        .custom-footerNavi .ec-footerNavi__link {
            display: inline-block; 
        }
        .custom-footerNavi .ec-footerNavi__link a {
            display: inline-block;
            border-bottom: none;
            margin: 0 10px;
            padding: 0;
            text-decoration: underline; 
        }
        /*パララクス用フッター*/
        .fotter_spacer{
            content: "";
            position: relative;
            display: block;
            margin-bottom: 100%;
            background-color: #ffffff;    
        }
        .custom-footer{
            position: relative;
            display: block;
            width: 100vw;  
            max-width:100vw;
            height: 100%;
            background-color: transparent;
            border: none;
            margin-top: 25%;
            z-index: 0;
        }
        /*フッター内コンテンツ*/
        .custom-footer__inner {
            position: absolute;
            display: block;
            color: #f7ebcc;  
            background-color: rgba(31, 76, 30,0.7);  
            width: 100vw;
            max-width:100vw;
            margin: 0;
            padding: 0;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
        }
    }
    @media only screen and (max-width: 768px) {
            div.ec-footerRole{
            /*padding-top: 30px;*/
        }
    }



/************************************
** ボタン
************************************/
/*もっと見る*/
.ec-blockBtn--top,.ec-inlineBtn--top {
    background-color: #1f4c1e;
    border-color: #1f4c1e; 
    color: #f7ebcc;
    border-radius: 10px;
    max-width: 250px;
    padding: 0;
}
.ec-blockBtn--top:hover,.ec-inlineBtn--top:hover{
    background-color: #1f4c1e;
    border-color: #1f4c1e; 
    opacity: 0.7;
    transition: 0.5s all;
}
/*検索窓*/
.ec-headerSearch{
    margin: 20px;
    margin-top: 50px;
}
.searchform{
    max-width: 480px;
    width: 100%;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {/*カテゴリ枠*/
    background-color: #333333;
    border-color: #1f4c1e; 
    color: #f7ebcc; 
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;    
}
.ec-headerSearch .ec-headerSearch__keyword{/*検索フォーム*/
      border-bottom-left-radius: inherit;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;     
}
/*FAX注文メッセージ*/
.message_fax_parent{
    position: absolute;
    right: 10px;
}

/*商品詳細内ボタン*/ 
/*商品リスト（商品一覧）のボタン*/
.ec-productRole__btn
{
    background-color: rgba(140, 35, 0,0.7);
    color: #f7ebcc; 
    border: none;       
    width: 98%;
    max-width: 640px;
    margin:10px;
    border-radius:10px ;    
}
.ec-productRole__btn:hover{
    opacity: 0.7;
    transition: 0.5s all;    
}
/*カートに入れる*/
.ec-productRole__btn .ec-blockBtn--action,
.ec-cartRole__actions .ec-blockBtn--action,
.ec-RegisterRole__actions .ec-blockBtn--action,
.ec-registerRole .ec-blockBtn--action,
.ec-registerCompleteRole .ec-blockBtn--action,
.ec-totalBox__btn .ec-blockBtn--action,
.ec-cartCompleteRole .ec-blockBtn--action,
.ec-AddAddress__actions .ec-blockBtn--action,
.ec-blockBtn--action.load-overlay,
.ec-forgotRole .ec-blockBtn--action  {
    background-color: #8c2300;
    color: #f7ebcc;
    border: none;
    border-radius:10px ;
}
.ec-productRole__btn .ec-blockBtn--action:hover,
.ec-cartRole__actions .ec-blockBtn--action:hover,
.ec-RegisterRole__actions .ec-blockBtn--action:hover,
.ec-registerRole .ec-blockBtn--action:hover,
.ec-registerCompleteRole .ec-blockBtn--action:hover,
.ec-totalBox__btn .ec-blockBtn--action:hover,
.ec-cartCompleteRole .ec-blockBtn--action:hover,
.ec-AddAddress__actions .ec-blockBtn--action:hover,
.ec-blockBtn--action.load-overlay:hover,
.ec-forgotRole .ec-blockBtn--action:hover  {
    opacity: 0.7;
    transition: 0.5s all;
}
/*お気に入りに追加*/
.ec-productRole__btn .ec-blockBtn--cancel,
.ec-cartRole__actions .ec-blockBtn--cancel,
.ec-RegisterRole__actions .ec-blockBtn--cancel,
.ec-registerRole .ec-blockBtn--cancel,
.ec-registerCompleteRole .ec-blockBtn--cancel,
.ec-totalBox__btn .ec-blockBtn--cancel,
.ec-cartCompleteRole .ec-blockBtn--cancel,
.ec-AddAddress__actions .ec-blockBtn--cancel,
.ec-blockBtn--primary  {
    background-color: #333333;
    color: #f7ebcc;
    border: none; 
    border-radius:10px ;   
}
.ec-productRole__btn .ec-blockBtn--cancel:hover,
.ec-cartRole__actions .ec-blockBtn--cancel:hover,
.ec-RegisterRole__actions .ec-blockBtn--cancel:hover,
.ec-registerRole .ec-blockBtn--cancel:hover,
.ec-registerCompleteRole .ec-blockBtn--cancel:hover,
.ec-totalBox__btn .ec-blockBtn--cancel:hover,
.ec-cartCompleteRole .ec-blockBtn--cancel:hover,
.ec-AddAddress__actions .ec-blockBtn--cancel:hover  {
    opacity: 0.7;
    transition: 0.5s all;    
}

/*============
上へ戻るボタン
=============*/
.ec-blockTopBtn {
    display: none;
    position: fixed;
    display: block;
    width:50px ;
    height: 50px;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
    color: transparent;
    text-align: center;
    line-height: 0;
    opacity: 0.8;
    background-color: transparent;
    border-radius: 100%;
    vertical-align: middle;
    z-index:10;
}
.ec-blockTopBtn i{
    color: #1f4c1e;  
    font-size: 45px;
    padding: 0;
    margin: 0;
    border-radius: 100%;
}

    /*768px以下*/
    @media screen and (max-width: 768px){
        /*商品詳細内ボタン*/ 
        .ec-productRole__btn/*商品リスト（商品一覧）のボタン*/
        {
            width: 98%;
        }
        .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {/*カテゴリ枠*/
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;    
        }
        .ec-headerSearch .ec-headerSearch__keyword{/*検索フォーム*/
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;     
        }
    }

    /*480px以下*/
    @media screen and (max-width: 480px){
        /*商品詳細内ボタン*/ 
        .ec-productRole__btn/*商品リスト（商品一覧）のボタン*/
        {
            width:98%;
        }
        /*カートに入れた後のダイアログ内ボタン*/ 
        .ec-inlineBtn--cancel {      
            margin-bottom: 20px;
        }     
        /*============
        上へ戻るボタン
        =============*/
        .ec-blockTopBtn {
            right: 15px;
            bottom: 15px;
        }             
    }
/*
カートナビゲーションのポップアップ(商品詳細)

カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。

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: rgba(255,255,255,0.7);
  box-sizing: border-box;
  padding: 16px;
  z-index: 20;
  position: absolute;
  left: 0; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart {
    border-bottom: 1px solid #E8E8E8;
    margin-bottom: 16px;
    padding-bottom: 32px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
      content: " ";
      display: table; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
      clear: both; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage {
    float: left;
    width: 45%; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage img {
      width: 100%; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
    float: right;
    width: 55%;
    padding-left: 16px;
    text-align: left;
    box-sizing: border-box; }
.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
    color: #fff;
    margin-bottom: 8px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
    margin-bottom: 8px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
    font-weight: bold; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax {
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    margin-left: 2px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
    font-size: 14px; }
.ec-cartNaviIsset.is-active {
  display: block; }
/*
/************************************
** 確認用インスタレイアウト（本番で削除予定だが、ランキングで使用中）
************************************/
ul.am_insta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding-left: 0;
}
li.am_insta {
  list-style: none;
  width: 25%;
  padding: 3px;
}
li.am_insta i {
  padding-bottom: 7px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
li.am_insta a {
  position: relative;
  display: block;
  color: rgba(140,35,0,0.7);
}
li.am_insta a:hover {
    opacity: 0.7;
    transition: 0.5s;
}
li.am_insta a .like {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items:flex-end;
  justify-content: flex-end;
  font-size: 16px;
  color: rgba(140,35,0,0.7);
  opacity: 0.7;
  /*text-shadow: 0 0 7px #000;*/
  padding-right: 10px;
}
    @media screen and (max-width: 768px){
    /*必要ならばここにコードを書く*/

    }

    @media screen and (max-width: 480px){
        li.am_insta a .like {
            font-size: 12px;            
            padding-right: 0;        
        }
    }

/************************************
** SNSシェアボタン
************************************/
/*FBページ　likebox*/
.fb-likebox-likebutton{
    position: relative;
    padding-top: 20px;
    margin-left: -40px;
    z-index: 1;
    background-color: #ffffff;
}
.fb-likebox-likebutton ul{
    margin-bottom: 0;
}
.fb-likebox-likebutton ul li{
    list-style: none;
    display: inline-block;
    padding: 0;
}
.fb-likebox-likebutton img.instagram{
    height: 29px;
}
.fb-likebox-likebutton img.facebook{
    height: 29px;
}
.fb-likebox-likebutton img.facebook:hover,
.fb-likebox-likebutton img.instagram:hover{
    filter: brightness(80%);
}
/*レイアウトコンテナ*/
.ec-productRole__SNS_Share {
    position: relative;
    display: inline-block;
    left:0;
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
}
.ec-productRole__SNS_Share ul li{
    list-style: none;
}
/* ボタン全体 */
.flowbtn8{
border-radius:50%;
position:relative;
display:inline-block;
width:30px;
height:30px;
font-size:15px;
text-decoration:none;
transition:.5s;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn8:hover{
color:#fff!important;
}
/* アイコンをど真ん中に */
.flowbtn8 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.flowbtn8.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn8.insta_btn2 {
border:solid 1px #c6529a;
color:#c6529a;
font-size:15px;
}
/* Instagramマウスホバー時 */
.flowbtn8.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* Facebook */
.flowbtn8.fl_fb2{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn8.fl_fb2:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* Feedly */
.flowbtn8.fl_fd2{
border:solid 1px #6cc655;
color:#6cc655;
font-size:15px;
}
/* Feedlyマウスホバー時 */
.flowbtn8.fl_fd2:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* Pocket */
.flowbtn8.fl_pk2{
border:solid 1px #ef3f56;
color:#ef3f56;
font-size:15px;
}
/* Pocketマウスホバー時 */
.flowbtn8.fl_pk2:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* はてブ */
.flowbtn8.fl_hb2{
border:solid 1px #1ba5dc;
color:#1ba5dc;
font-size:15px;
}
/* はてブマウスホバー時 */
.flowbtn8.fl_hb2:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* YouTube */
.flowbtn8.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
font-size:15px;
}
/* YouTubeマウスホバー時 */
.flowbtn8.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn8.fl_li2{
border:solid 1px #00c300;
color:#00c300;
font-size:15px;
}
/* LINEマウスホバー時 */
.flowbtn8.fl_li2:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* お問い合わせ */
.flowbtn8.fl_ma2{
border:solid 1px #f3981d;
color:#f3981d;	
font-size:15px;
}
/* お問い合わせマウスホバー時 */
.flowbtn8.fl_ma2:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
}
/*マージンのリセット*/
.snsbtniti ul{
    margin-bottom: 0;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 35px;
text-align:center!important;
}


/************************************
** ショッピングカート周り
************************************/
.cart_page .history_back{
    position: relative;
    display: block;
    padding: 50px;
    text-align: center;
}
.cart_page .history_back a{
    font-weight: 700;
}

/************************************
** ハンバーガーメニューボタン
************************************/
.hamburger,nav.globalMenuSp {
    position: relative;
    display: none;
    z-index: -1;
}

    @media screen and (max-width: 768px){
        /*============
        ハンバーガーボタン
        =============*/
        /*ハンバーガーボタン親*/
        .hamburger_parent{
            display: none;
            content: "";
            position: fixed;
            width: 100%;
            height: 65px;
            background-color: rgba(255,255,255,0.7);
            left: 0;
            top: 0;
        }
        .hamburger_parent.hidden{
            display: none;
        }
        .hamburger_parent.active{
            display: block;
        }        
        .hamburger::before {
            display: none;
            content: "";
            position: fixed;
            width: 100%;
            height: 60px;
            background-color: rgba(255,255,255,0.7);
            left: 0;
            top: 0;
        }        
        /*　ハンバーガーボタン　*/
        .hamburger {
        display : block;
        position: fixed;
        z-index : 2;
        left : 13px;
        top   : 17px;
        width : 42px;
        height: 42px;
        cursor: pointer;
        text-align: center;
        z-index: 9999999;
        }
        .hamburger span {
        display : block;
        position: absolute;
        width   : 30px;
        height  : 2px ;
        left    : 6px;
        background : #f7ebcc;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition   : 0.3s ease-in-out;
        transition        : 0.3s ease-in-out;
        }
        .hamburger span:nth-child(1) {
        top: 10px;
        }
        .hamburger span:nth-child(2) {
        top: 20px;
        }
        .hamburger span:nth-child(3) {
        top: 30px;
        }
        /* ナビ開いてる時のボタン */
        .hamburger.active span:nth-child(1) {
        top : 16px;
        left: 6px;
        background :#f7ebcc;
        -webkit-transform: rotate(-45deg);
        -moz-transform   : rotate(-45deg);
        transform        : rotate(-45deg);
        }
        .hamburger.active span:nth-child(2),
        .hamburger.active span:nth-child(3) {
        top: 16px;
        background :#f7ebcc;
        -webkit-transform: rotate(45deg);
        -moz-transform   : rotate(45deg);
        transform        : rotate(45deg);
        }
        /*============
        スマホメニュー本体
        =============*/
        nav.globalMenuSp {
        display: block;
        position: fixed;
        z-index : 99999;
        top  : 0;
        left : 0;
        color: #f7ebcc;
        background: rgba(0,0,0,0.7);
        text-align: center;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity .6s ease, visibility .6s ease;
        }
        nav.globalMenuSp ul {
        margin: 0 auto;
        padding: 0;
        width: 100%;
        margin-top: 70px;
        text-align: left;
        }
        nav.globalMenuSp ul li {
        list-style-type: none;
        padding: 0;
        width: 100%;
        transition: .4s all;
        }
        nav.globalMenuSp ul li:last-child {
        padding-bottom: 0;
        }
        nav.globalMenuSp ul li:hover{
            background-color: rgba(255,255,255,0.7);
            transition: 0.5s all;
        }
        nav.globalMenuSp ul li a {
        display: block;
        color: #f7ebcc;
        padding: 0.3em 0;
        text-decoration :none;
        padding-left: 50px;
        border-bottom: dotted 1px rgba(247, 235, 204,0.5);
        user-select:none
        }
        /* このクラスを、jQueryで付与・削除する */
        nav.globalMenuSp.hidden {
        display: none;
        z-index:-1;
        }
        /* このクラスを、jQueryで付与・削除する */
        nav.globalMenuSp.active{ 
        opacity: 100;
        z-index:99999;
        height: 100vh;
        }
        /*============
        商品カテゴリーボックス
        =============*/
        /*ボックス全体*/
        .switchbox {
            padding: 0;
            border-bottom: dotted 1px rgba(247, 235, 204,0.5);        
        }
        /*ラベル*/
        .switchbox label {
            display: block;
            font-weight: bold;
            cursor :pointer;
            font-weight: 500;
            padding-left: 50px;/*nav.globalMenuSp ul li a と合わせる*/
            user-select:none
        }
        /*チェックボックスを非表示にする*/
        .switchbox input {
            display: none; 
        }
        /*中身を非表示にしておく*/
        .switchbox div {
            height: 0;
            overflow-y: hidden;
            transition: 0.8s;/*ゆっくり表示させる*/
            opacity: 0;
        }
        .switchbox div ul{
            margin-top: -5px;
        }        
        .switchbox div ul li {
            list-style-type: none;
            padding: 0;
            width: 100%;
            transition: .4s all;
            user-select:none
        }
        .switchbox div ul li a{
            margin-left: 10%;
            border-bottom: none;
            user-select:none
        }        
        .switchbox div ul li:last-child {
            padding-bottom: 0;
        }
        .switchbox div ul li:hover{
            width: 100%;
            background-color: rgba(255,255,255,0.7);
            transition: 0.5s all;
        }
        /*クリックで中身を表示*/
        .switchbox input:checked + label + div {
            height: auto;
            opacity: 1;
        }
        /*アイコン*/
        .switchbox label::after {
            content: '\f078';
            font-family: 'Font Awesome 5 Free';
            font-weight: 700;
            padding-left: 15px;
        }
        /*クリックでアイコン入れ替え*/
        .switchbox input:checked + label::after {
            content: '\f077';
        }
        /*============
        SNSブロック、会社リンク
        =============*/
        /*SNSブロック*/
        .globalMenuSp_sns-icon{
            text-align: center;
            margin-top: 50px;
        }
        .globalMenuSp_sns-icon a{
            color: inherit;
            user-select:none
        }
        .globalMenuSp_sns-icon a:hover{
            opacity: 0.7;
            transition: 0.5s;
        }
        .globalMenuSp_sns-icon i{
            font-size: 24px;
            padding: 5px;
        }
        /*会社リンク*/
        .globalMenuSp_companylink{
            position: relative;
            font-size:16px ;
            bottom: 0;
            padding-top: 50px;
        }
        .globalMenuSp_companylink a{
            color: inherit;
            text-decoration: none;
            user-select:none
        }
        .globalMenuSp_companylink a{
            opacity: 0.7;
            transition: 0.5s;
        }        
    }

    @media screen and (max-width: 480px){
        /*============
        SNSブロック、会社リンク
        =============*/
        /*SNSブロック*/
        .globalMenuSp_sns-icon{
            margin-top: 20px;
        }       
        /*会社リンク*/
        .globalMenuSp_companylink{
            padding-top: 20px;
        }         
    }