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

/*---------------------------------------------------------------------------
   共通(全ページ・全ブロック)
---------------------------------------------------------------------------*/
body {
background: #fff;
}
.mb30 {
    margin-bottom: 30px;
}
.mb50 {
    margin-bottom: 50px;
}
.mt30 {
    margin-top: 30px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb5 {
    margin-bottom: 5px;
}
.mt15 {
    margin-top: 15px;
}
.mt30 {
    margin-top: 30px;
}

.pl16 {
    padding-left: 16px;
}
.for_sp{
	display: none;
}
.p_side15{
    padding: 0 15px 0 15px;
}
/*------------------------------------------------
    デフォルトのボタンを再定義
--------------------------------------------------*/

[class^="ec-blockBtn"],
[class^="ec-inlineBtn"]{
    border-radius: 2em;
    border-width: 2px;
}
/*決定・進む系ボタン*/
.ec-blockBtn--action,
.ec-inlineBtn--action,
.ec-guest__actions .ec-blockBtn--action{
    background: #9dc426;
    border: 2px solid #9dc426;
}
.ec-blockBtn--action:hover,
.ec-blockBtn--action:active,
.ec-blockBtn--action:focus,
.ec-inlineBtn--action:hover,
.ec-inlineBtn--action:active,
.ec-inlineBtn--action:focus,
.ec-guest__actions .ec-blockBtn--action:hover,
.ec-guest__actions .ec-blockBtn--action:active,
.ec-guest__actions .ec-blockBtn--action:focus{
    background: #FFF;
    border: 2px solid #9dc426;
    color: #9dc426;
}

/*キャンセル・戻る系ボタン*/
.ec-blockBtn--cancel,
.ec-inlineBtn--cancel,
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel{
    background: #FFF;
    border: 2px solid #999;
    color: #999;
}
.ec-blockBtn--cancel:hover,
.ec-blockBtn--cancel:active,
.ec-blockBtn--cancel:focus,
.ec-inlineBtn--cancel:hover,
.ec-inlineBtn--cancel:active,
.ec-inlineBtn--cancel:focus,
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel:hover,
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel:active,
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel:focus{
    background: #999;
    border: 2px solid #999;
    color: #FFF;
}

/*リンク：hoverでふわっと変化する*/
a:link,button,a:link:before{
    transition: all 0.8s;
}

/*------------------------------------------------
    たまごアイコン
--------------------------------------------------*/
.ec-headerNavSP, .is_active, .ec-blockTopBtn, .egg_icon_before:before {
    background: url(/html/user_data/assets/img/common/egg.png) center /contain no-repeat;
    color: #ecbf45;
}

/*たまごアイコンをマーカーとして使う*/
.egg_icon_before {
    position: relative;
    padding-left: 2em;
}
.egg_icon_before:before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    top: -0.2em;
    left: 0;
}
/*
.egg_icon_beforeは先頭にたまごアイコンをくっつけるためのクラスです。
個別にアイコンの位置を変えたい時は、新しいクラスを作って
クラス.egg_icon_beforeと一緒に指定してください。

例)特定の<a>だけアイコンの位置を変えたい

★CSS(クラスを新しく作る)
.hoge:before{
    top:2em;
    left:1em;
}
★HTML
<a class="egg_icon_before hoge">・・・・</a>

*/

/*新着情報*/
.ec-newsRole__newsDescription{
    color: #525263;
}
.ec-newsRole .ec-secHeading .ec-secHeading__en{
color: #ffa616;
font-size: 25px;
}
.ec-newsRole .ec-newsRole__news{
    border-bottom: 0 !important;
}
/*moreボタン*/
.ec-inlineBtn--top{
display: block;
margin: 20px auto;
width: 200px;
}

/*---------------------------------------------------------------------------
    下層ページ共通
/*---------------------------------------------------------------------------*/

/*TOPページ以外はナビゲーションの下に余白を付ける*/
/*body:not(.front_page) .ec-layoutRole__contents {
    margin-top: 30px;
}*/

/*---------------------------------------------------------------------------
    ヘッダー
---------------------------------------------------------------------------*/
/*ロゴ*/
.ec-headerTitle img {
    max-width: 500px;
}
@media screen and (max-width:767px) {
    .ec-headerTitle img {
    max-width: 80%;
    }
}
/*ログインナビ*/
.ec-headerNaviRole__right i, .ec-headerNav .ec-headerNav__itemIcon {
    color: #ecbf45;
}
.ec-headerNaviRole .ec-headerNaviRole__right{
    width: 600px;
}
/*検索窓*/
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
    background: #ecbf45;
}
.ec-headerNaviRole {
    padding-bottom: 10px;
}

/*カテゴリナビ*/
.cg .ec-secHeading .ec-secHeading__en{
color: #ffa616;
font-size: 25px;
}
.cg_sp .ec-secHeading .ec-secHeading__en{
color: #ffa616;
font-size: 25px;
}
@media only screen and (min-width: 768px){
.ec-itemNav__nav{
    display: table;
    table-layout: fixed;
    width:100%;
}
.ec-itemNav__nav>li{
    float: none;
    display: table-cell;
}
.ec-itemNav__nav>li>a{
    overflow: hidden;
}
.ec-itemNav__nav>li>a:before{
    top: 100%;
    left: 1em;
    opacity: 0.5;
}
.ec-itemNav__nav>li>a,
.ec-itemNav__nav>li>a:before{
}

.ec-itemNav__nav>li:hover>a{
    background: #ecbf45;
    color: #fff;
}
.ec-itemNav__nav>li:hover>a:before{
    top: 0.8em;
    left: 1em;
    opacity: 1;
}
.ec-itemNav__nav > li:hover li > a.egg_icon_before:before{
    display: none;
}
.ec-itemNav__nav li ul li a{
    background: #FFF;
    color: #2e3233;
}
.ec-itemNav__nav li:hover ul li:hover a{
    background: #ecbf45;
    color: #FFF;
}
}
@media screen and (max-width: 400px) {
.cg_sp ul{
margin-bottom: 0px;
}}
/*電話番号*/
.ec-headerNaviRole .tel a{
    color: #525263;
}
.ec-role .tel a{
    color: #ecbf45;
}

@media only screen and (min-width: 800px){
.ec-headerNaviRole .tel {
    font-size: 180%;
    font-weight: bolder;
    width: 300px;
    padding-top: 10px;
    padding-right: 10px;
    
}
.ec-role .tel{
         display: none;
}
}
@media only screen and (max-width: 797px){
.ec-headerNaviRole .tel{
     display: none;
 }  
 .ec-role .tel{
     text-align: center;
             font-size: 140%;
    font-weight: bold;
    background: #fff;
    border: 2px solid #ecbf45;
    color: #ecbf45;
    border-radius: 2em;
    padding: 10px 0 10px 0;
    width: 280px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
 }
}

/*---------------------------------------------------------------------------
    フッター
---------------------------------------------------------------------------*/
.ec-footerRole {
    background: url(/html/user_data/assets/img/common/bg_footer.png) 0 0 repeat-x;
    background-color: #ecbf45;
    border-top-color: #fff;
    padding-top: 120px;
}
.ec-footerNavi .ec-footerNavi__link a {
    border-bottom-color: #FFF;
    text-decoration: none;
    font-weight: bold;
}
.ec-footerNavi .ec-footerNavi__link a.egg_icon_before:before {
    top: -0.15em;
    left: -2em;
}
@media screen and (max-width:767px) {
    .ec-footerRole {
        background-size: 100%;
        background-position: center top;
        padding-top: 60px;
    }
    .ec-footerNavi .ec-footerNavi__link a:before {
        top: 1em;
        left: 10px;
    }
}
@media screen and (min-width:767px) {
    .ec-footerNavi .ec-footerNavi__link {
        margin: 0 1em;
    }
}
/*TOPへ戻るボタン*/
.ec-blockTopBtn {
    height: 80px;
    background: url(/html/user_data/assets/img/common/egg_top.png) center no-repeat;
    color: #ecbf45;z-index: 999;
    
}
.ec-blockTopBtn em {
    display: none;
}
/*電話番号*/

.ec-footerTitle .tel{
       font-size: 25px;
       color: #fff;
       margin-bottom: 10px;
}
.ec-footerTitle .tel a{
    color: #fff;
    font-weight: bold;
}
/*---------------------------------------------------------------------------
    TOPページ
---------------------------------------------------------------------------*/
.ec-categoryRole{
    background: #fff;
    padding: 0px;
}
.ec-categoryRole img{
    width: 70%;
    padding-bottom: 20px;
}
.ec-categoryRole .ec-categoryRole__listItem{
    text-align: center;
}
.ec-secHeading {
    text-align: center;
    margin-top: 0px;
}
.ec-blockBtn--top {
    background: #fff;
    border: 2px solid #ecbf45;
    color: #ecbf45;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}
.ec-blockBtn--top:hover {
    background: #ecbf45;
    border: 2px solid #ecbf45;
    color: #fff;
}
/*スライドを全幅にする*/
.ec-sliderRole {
    max-width: none;
    padding: 0;
}
/*トピック*/
#top_topics {
    position: relative;
    left: 0;
    /*
    width: 100%;
    */
    background: #fbf5d9;
}
#top_topics .ec-secHeading__en{
    color: #612303;
    font-size: 25px;
}
.ec-topicRole .ec-topicRole__listItemTitle.egg_icon_before {
    font-size: 105%;
    font-weight: bold;
}
.ec-topicRole .ec-topicRole__listItemTitle:before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    top: -0.2em;
    left: 0;
}
/*安心・安全な飼料で育てた自慢のたまごです。*/
.ec-eyecatchRole__image{
    margin-top: 40px;
}
/*カテゴリ*/
.ec-role .CATEGORY{
    font-size: 14px;
    font-weight: bold;
    color: black;
    text-align: center;
    margin-top: 15px;
}
.hover{
     cursor: pointer;
  transition: all 0.3s ease 0s;
}
.hover:hover {
  opacity: 0.6;
}
.cg{
     border-top: solid 1px #c9c9c9;
    padding-top: 15px;
    margin-bottom: 60px;
}
.cg .ec-secHeading{
margin-top: 60px;
margin-bottom: 30px;
}
.ec-categoryRole img{
    width: 58%;
}
@media only screen and (min-width: 768px){
  .cg_sp{display: none;  
}}
@media only screen and (max-width: 767px){
  .cg{display: none; }
  .cg_sp{display: inherit;}
  .cg_sp ul{
      list-style: none;
      padding-left: 0;
  }
   .cg_sp ul li img{width: 100%;   
  }}
/*フェイスブック*/
/* PC用 */
@media screen and (min-width: 401px)  {
	.fb_block{
	width: 500px;
	}
}
/* スマホ用 */
@media screen and (max-width: 400px) {
	.fb_block{
		width: 100%;
		max-width: 500px;
	}
}
/*お客様の声*/
.report{
overflow-y: scroll;
height: 330px;
}
.report .uvoice {
    display: table;
    background: #FFF;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
}
.report .arrow_box {
    position: relative;
    background: #ffffff;
    border: 2px solid #d8d8d8;
    margin: 10px;
    height: 60px;
    padding: 10px 20px;
    border-radius: 4px;
}
.report .arrow_box:before {
 content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    margin-top: -6px;
    border: 6px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
}
.report .arrow_box:after {
content: "";
    position: absolute;
    top: 50%;
    left: -17px;
    margin-top: -6px;
    border: 6px solid transparent;
    border-right: 10px solid #d8d8d8;
    z-index: 1;
}
.report .uvoice dt {
    width: 30%;
    font-size: 12px;
    text-align: center;
}


.report .uvoice dt, .report .uvoice dd {
    display: table-cell;
    vertical-align: middle;
}
.report .uvoice dt img {
    width: 50%;
    border-radius: 60px;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}

.voice{
 border-radius: 16px;
border: 3px solid #ecbf45;
height: 470px;
}
.voice1{
    border-bottom: 2px dashed #d8d8d8;
 text-align: center;
 margin-top: 15px;
}
@media only screen and (max-width: 991px){
.voice{
margin-left: 9%;
}
.fb{
 margin-left: 16%;
    margin-bottom: 35px;
}
}
@media only screen and (max-width: 400px){
.report .uvoice dt{
  display: table-caption;
}
.fb{
 margin-left: 9%;
 margin-bottom: 20px;
}
.voice1 img{
    width: 75%;
    margin-bottom: 10px;
}
.report .uvoice dt img{
    width: 89%;
}
.report .uvoice dt{
   margin-left: auto;
    margin-right: auto;
}
.voice{
height: 320px;
}
.report{
height: 219px;
}
.report .uvoice dt {
    width: 35%;}
}
@media only screen and (max-width: 399px){
    .fb{
 margin-left: 9%;
 margin-bottom: 20px;
}
}
/*画像*/
.ec-role img {
    max-width: 100%;
}
/*月一キャンペーン*/
.campaign{
    text-align: center;
    margin-top: 50px;
    margin-bottom: 60px;
}
.campaign img{
width:65%;
}
@media only screen and (max-width: 991px){
.campaign img{
width:100%;
}}
/*本日のお料理*/
.cooking{
background-size: auto auto;
background-color: rgba(255, 250, 213, 1);
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 245, 191, 1) 6px, rgba(255, 245, 191, 1) 20px );
}
.cooking .video{
width: 80%;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.cooking p{
    text-align:center;
    margin-bottom: 15px;
}
.cooking .h1_img{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 50px;
    padding-bottom: 10px;
}
@media only screen and (max-width: 800px){
.cooking .h1_img{
width:40%;
}}
@media only screen and (max-width: 400px){
.cooking .h1_img{
width:80%;
}}
.cooking .cooking_img{
position: relative;
max-width: 1200px;
margin: 0 auto;
width: 90%;
}
/*@media screen and (max-width: 1240px){
.cooking .cooking_img{
    height: calc(500 / 1200 * (100vw - 40px));
}}*/
.h1_img2{
position: absolute;
top: -20px;
    left: 0px;
z-index: 10;
}
@media screen and (max-width: 1240px){
.h1_img2 {
    top: calc(-20 / 1200 * (100vw - 40px));
    left: calc(0 / 1200 * (100vw - 40px));
}}
@media screen and (max-width: 800px){
.h1_img2 {
    top: calc(10 / 1200 * (100vw - 40px));
    left: calc(0 / 1200 * (100vw - 40px));
}}
@media screen and (max-width: 400px){
.h1_img2 {
display: none;
}}
/*あいさつ*/
@media only screen and (min-width: 900px){
    .message_top{
padding-left: 40px;
}
/*.message{
    position: relative;
}
.message_top{
position: absolute;
    z-index: 100;
   top: 80px;
    left: 45px;
}
.message_back{
 position: absolute;
    z-index: 99;
    top: 43px;
    left: 13px;
    background-color: #fff;
    width: 568px;
    height: 424px;
    opacity: 0.9;
    display: block;
    border-radius: 0 0 20px 20px;
}
.message_img{
position: absolute;
    z-index: 1;
    bottom: 0px;
    right: -30%;
}*/
}
.message h1{
    line-height: 54px;
    margin-bottom: 10px;
    font-size: 20px;
    text-align: center;
}
.message_h1{
    font-size: 43px;
    color: #ffa616;
    font-weight: 700;
    letter-spacing: 1px;
    
}
.message p{
        line-height: 36px;
    font-size: 16px;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-align: center;
}

.message_img img{
    width: 100%;
}
.message .for_sp{
	display: none;
}
/*.message_top col-md-6,message_top col-lg-6{
padding-right: 0px;
    padding-left: 0px;
}*/
@media only screen and (min-width: 1400px){
.message_top {
    margin-top: 88px;
}
}
@media only screen and (max-width: 1092px){
.message_h1{
line-height:10px;
    font-size: 32px;
}
.message p {
line-height: 31px;
font-size: 15px;
}
}
@media only screen and (max-width: 991px){
.message h1,.message p{
text-align: center;
}}
@media only screen and (max-width: 375px){
.message_back{
display: none;}
    .message_h1{
        font-size: 26px;
        padding-left: 10px;
        letter-spacing: 3px;
    }
    .message p {
    line-height: 31px;
    font-size: 13px;}
    .message_top {
    text-align: center;
    /*top: -20px;
    left: 17px;*/
}
.message_img img{
    width: 100%;
}

}
@media only screen and (max-width: 320px){
.message_back{
display: none;}
    .message_h1{
        font-size: 26px;
        letter-spacing: 1px;
    }
    .message p {
    line-height: 30px;
    font-size: 13px;}
    .message_top {
    text-align: center;
    /*top: -20px;
    left: 20px;*/
}
.message .for_sp{
	display:inherit;
}
}
/*新着商品*/
.ec-newItemRole img{
max-width: 74%;
    border-radius: 130px;
}
.ec-newItemRole{
padding:15px 0;
}
.ec-newItemRole .ec-newItemRole__listItemHeading{
  margin-top: 0px; 

}
.ec-newItemRole .ec-newItemRole__listItem{
   text-align: center;  
}
.ec-secHeading_new {
    text-align: center;
    margin-top: 70px;
    padding-bottom: 25px;
}
.ec-secHeading_new .ec-secHeading__en {
    font-size: 25px;
    font-weight: bold;
    letter-spacing: .2em;
    color: #ffa616;
    
}
.ec-secHeading_new .ec-secHeading__line {
    display: inline-block;
    margin: 0 20px;
    width: 1px;
    height: 14px;
    background: black;
}
.ec-secHeading_new .ec-secHeading__ja {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px;
}
/*ニュース*/
@media only screen and (min-width: 768px){
.ec-newsRole .ec-newsRole__news{
border: none;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
 .ec-newsRole{
    margin-bottom: 50px ;
 }   
    
}
/*---------------------------------------------------------------------------
    商品一覧ページ
---------------------------------------------------------------------------*/
.ec-shelfGrid .ec-shelfGrid__item-image {
    height: auto;
}

   /*送料込み　タグ*/
.ec-productRole .ec-productRole__tag ,.ec-shelfRole .ec-productRole__tag {
    display: inline-block;
    padding: 4px 17px;
    list-style: none;
    font-size: 90%;
    color: #3d3d3d;
    border:none;
    border-radius: 3px;
    background-color: #ECBF45;
    font-weight: bold;
    margin-bottom: 5px;
}
.ec-shelfRole .ec-productRole__tags{
    padding-left: 0;
    margin-bottom: 10px;
    margin-top: 5px;
}

   /*一覧ページ　詳細*/
.ec-shelfRole .about{
    padding-top: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    border-top: dotted 1px #ccc;
}
   /*選択ボタン*/
.ec-productRole__actions .ec-select select{
    width: 100%;
}
/*---------------------------------------------------------------------------
    ご利用ガイド
---------------------------------------------------------------------------*/
#guide table {
    margin: 15px auto 20px auto;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
#guide table th {
    padding: 8px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #333;
    background-color: #FEF4EA;
    font-weight: normal;
}
#guide table td {
    margin: 0;
    border: 0;
    border-collapse: collapse;
    /* border-spacing: 0px; */
    empty-cells: show;
    text-align: left;
    font-weight: normal;
    padding: 8px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#guide p strong {
    font-size: 150%;
    color: #C00;
}
#guide img{
max-width: 70%;
}

/*---------------------------------------------------------------------------
    購入画面
---------------------------------------------------------------------------*/

/*購入フロー*/

.ec-progress .ec-progress__number{
    background: #999;
}
.ec-progress .ec-progress__item::after{
    background: #999;
}
.ec-progress .is-complete .ec-progress__number{
    background: #9dc426;
}
.ec-progress .is-complete .ec-progress__label{
    color: #9dc426;
}
/*---------------------------------------------------------------------------
    当サイトについて
---------------------------------------------------------------------------*/
.ec-role table th{
    font-weight: 600;
    background: #eee;
    white-space: nowrap;
    text-align: center;
}
.ec-pageHeader h1{
margin: 10px 0px 48px;
}
@media (max-width: 991px){
.ec-role table.table-bordered td, table.table-bordered th {
    display: block;
    width: 100%;
}
.for_sp{
	display:inherit;
}
.ec-role iframe{
    height: 200px;}
    
table.table-bordered th, table.table-bordered tr{
    border: none;
} 
.table-bordered{
    border: none;
}
.ec-role table.table-bordered td{
border-width: 0px 1px 0px 1px;   
}
.ec-role h2{
    font-size: 18px;
    font-weight: 600;
}
.ec-pageHeader h1{
margin: 10px 0px 20px;
    
}
}
/*---------------------------------------------------------------------------
   養鶏所について
---------------------------------------------------------------------------*/
.ec-eyecatchRole__introTitle{
   margin-bottom: 15px;
    font-size: 26px;
        font-weight: bold;

}
.ec-eyecatchRole__introDescriptiron{
        font-size: 16px;
    line-height: 2;
    font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
        color: black;
}
@media only screen and (max-width: 736px){
.ec-eyecatchRole__introTitle{
   margin-bottom: 10px;
    font-size: 20px;
        font-weight: bold;
        text-align: center;

        
}
.ec-eyecatchRole__introDescriptiron{
        font-size: 14px;
    line-height: 1.5;
    font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
        color: black;
        margin-bottom: 10px;
}
}
/*---------------------------------------------------------------------------
   新規会員登録
---------------------------------------------------------------------------*/
.ec-required{
        font-size: 16px;
            font-weight: 600;
}
/*---------------------------------------------------------------------------
   プライバシーポリシー
---------------------------------------------------------------------------*/
.ec-role .contact{
width: 100%;
    border: solid 1px #a9a9a9;
    padding: 10px 0 10px 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.contact .tel2{
    padding-right: 20px;
}

.ec-borderedDefs .text{
    width: 70%;
    line-height: 2;
}
@media (max-width: 700px){
   .ec-role{
       font-size: 14px;
           line-height: 1.6;
           
   }
       .ec-role .mb15{
           margin-bottom: 5px;
   } 
  .ec-role .ec-heading-bold{
          margin: 10px 0;
  }
.contact .tel2{
    padding-right: 0px;
}
.ec-borderedDefs .text{
    width: 100%;
    line-height: 2;
}
}