/* リセット *****************************************************/
*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/************************************************************/

/* ベース ****************************************************/
body {
	font-family: "Lato", "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; font-feature-settings: "palt"; line-break: strict; overflow-wrap: break-word; word-wrap: break-word; word-break: normal; color: #666; text-align: justify; letter-spacing: 0.04em; font-size: 16px; line-height: 1.8;}
caption{margin-bottom: 20px;}

img.new_mark_img1:not([alt]) {filter: none;}

h1{font-size: 1.8em; line-height: 1.3em; padding: 0 40px; margin-bottom: 40px;}
h2{line-height: 1.3; margin-bottom: 40px; padding: 0 40px;}
h3, h4, p{padding: 0 40px; margin: 0 0 20px;}

p.last{margin-bottom: 0;}
p::before, h3::before {content: ''; display: block; height: 0; width: 0; margin-top: -0.4em;}
p::after, h3::after {content: ''; display: block; height: 0; width: 0; margin-bottom: 0.4em;}

.bold{font-weight: 700;}

.align_center{margin-left: auto; margin-right: auto;}

.pc{display: none;}
.sp{display: block;}

ul{margin: 0 0 20px 0; list-style-type: none; padding: 0 40px;}

i:before{margin-right: 0.5em;}

.clear:after{content: ''; clear: both;  display: block; height: 0; width: 0; visibility: hidden;}

a:hover, a:focus{color: #004f77; text-decoration: none;}
.br_sp:before{content: "\A"; white-space: pre;}

.yellow_box{border: 1px solid #E2C80F; margin: 0 40px 40px; padding: 10px 15px; border-radius: 10px; background-color: #fbf4c2;}
.yellow_box span{font-weight: 700;}
.yellow_box:before, .yellow_box:after{margin-top: 0; margin-bottom: 0;}

.ie{background-color: red; color: #fff; margin-bottom: 0; text-align: center; position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}

/************************************************************/


/* Header */
header{background-color: #3C1619; width: 100%; padding: 5px;}
#logo{width: 160px;}

/* カートボタン */
#cart_button{position: relative; z-index: 99;}
#cart_button .cart_number{position: absolute; color: #fff; width: 20px; height: 20px; top: 6px; left: 8px; text-align: center; line-height: 16px; font-size: 16px; vertical-align: middle;}
#cart_button a{ background-color: red; padding: 0; bottom: 15px; right: 15px; width: 40px; height: 40px; border-radius: 50%; position: fixed; z-index: 99; }
#cart_button a img{width: 100%;}

#navi_table{position: fixed; top: auto; bottom: 0; left: 0; background-color: #3C1619; width: 100%; padding: 15px; z-index:598;}
#nav-drawer {position: relative;}

/*チェックボックス等は非表示に*/
.nav-unshown {display:none;}

/*アイコンのスペース*/
#nav-open {width: 40px; height: 40px; vertical-align: middle; margin-bottom: 0; background-color: #E2C80F; padding: 11px 10px 0; border-radius: 50%; position: relative; z-index: 999;/*最前面に*/

}

/*ハンバーガーアイコン*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 2px;/*線の太さ*/
  width: 20px;/*長さ*/
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  position: fixed;
  z-index: 797;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: #3C1619;
  opacity: 0;
}
/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 799;/*最前面に*/
  width: 70%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 350px;/*最大幅*/
  height: 100%;
  background: #3C1619;/*背景色*/
  color: #E2C80F;
  opacity: 0.9;
  transition: .1s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: 0.3;
}


#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15); border-right: 1px solid #E2C80F;
}

#nav-content>ul{position: absolute; top: 60px; left: 0; padding: 0 10px; margin: 0 0 10px; width: 100%;}
#nav-content ul li{margin-bottom: 10px; line-height: 1.2; list-style: none;}
#nav-content>ul>li{border-bottom: 1px solid #534905; padding-bottom: 10px;}
#nav-content>ul>li:first-child{border-top: 1px solid #534905; padding-top: 5px;}
#nav-content>ul>li:last-child{border: none; margin-bottom: 60px;}
#nav-content ul li a{color: #E2C80F; opacity: 1; display: block; padding: 5px 0;}
#nav-content ul li .icon-envelop{display: none;}
#nav-content ul li.search_list{display: none;}
#nav-content ul li .icon-user{display: none;}
#nav-content ul.menu_small_category{margin: 5px 0 0 1em;}
#nav-content ul li.login a{display: block; width: 100%; border: 1px solid #E2C80F; padding: 12px 15px; border-radius: 5px; text-align: center;}

/*検索フォーム*/
input#search_form, .search_btn{display: none;}
.form_box{padding: 10px;}
.form_hidden_show [type="text"]{width: 100%; height: 30px;}
/* 検索フォームここまで */
/* Headerここまで */

/* Main */
main{}
.breadcrumb{font-size: 13px; background-color: #f7f7f7; height: 50px; overflow-x: auto; white-space: nowrap; padding: 0 20px;}
.breadcrumb ul.breadcrumb__list{margin: 0; padding: 0;}
.breadcrumb__item{display: inline; line-height: 50px;}
.breadcrumb__item:after{content: ">"; padding: 0 0.3em;}
.breadcrumb__item:last-child{padding-right: 20px;}
.breadcrumb__item:last-child:after{content: none;}

/* Mainここまで */


/* Footer*/
footer{background-color: #3C1619; height: 30px; padding-bottom: 130px;}
.footer_privacy{text-align: center; font-size: 0.8em; padding-top: 10px;}
.footer_privacy a{color: #7f7f7f; padding: 0 5px;}
.copyright{text-align: center; color: #7f7f7f;}
/* Footerここまで */

/* 以下フリーページ */
/* free共通 */
main.free section{max-width: 750px; margin: 0 auto; padding: 0 25px 20px;}
main.free img{display: block; margin: 0 auto 30px; width: 100%; max-width: 600px;}

/* free1, free2 */
main.free1, main.free2{background-color: #3C1619; color: #E2C80F;}
main.free1 section.our_story, main.free2{font-family:"Hannari", serif;}
#loading{width: 100vw; height: calc(100vh - 120px); transition: all 2s; background-color: #3C1619; position: fixed; top: 50px; left: 0; z-index: 9999; max-width: none;}
.loaded{opacity: 0; visibility: hidden;}
main.free1 .h1_box{height: calc(100vh - 120px); position: relative;}
main.free1 h1{position: absolute; left: 50%; top: 50%; transform: translate(-50% ,-50%); width: 100%; font-weight: normal;}
main.free1 .our_story img{}
main.free1 .our_story img.ourstory_logo{width: 90%; max-width: 400px;}
main.free1 .our_story p, main.free2 p{color: #E2C80F; margin: 0 auto 50px; padding: 0; max-width: 720px;}
main.free1 .story_intro{font-size: 18px;}
main.free2 section{padding-top: 30px;}
main.free2 .philosophy{text-align: center; margin-bottom: 30px; padding: 30px 20px; border: 1px solid #E2C80F; max-width: 700px;}
main.free2 h1{padding: 30px 0 150px;}

main.free2 .info-text{padding-top: 30px;}
main.free2 h2{max-width: 720px; font-weight: 400; margin: 60px auto 40px; line-height: 1.5;}
main.free2 h3{max-width: 720px; font-weight: 400; margin: 20px auto; line-height: 1.5;}


main.free .goto_top_box{text-align: center;}
main.free p.goto_top{font-family:"Hannari", serif; position: relative; max-width: 300px; text-align: center;  display: inline-block; padding: 5px 80px; border: 1px solid; border-radius: 28px; color: #E2C80F; 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease}
main.free p.goto_top:before{content:""; display: block; position: absolute; top: 50%; left: 40px; width: 33px; height: 17px; margin-top: 0; background:url(https://contents.vidacafetera.com/images/our_coffee_left.svg) no-repeat; transform: translateY(-50%);}
main.free p.goto_top:after{content:""; display: block; position: absolute; top: 50%; left: auto; right: 40px; width: 33px; height: 17px; margin-top: 0; background:url(https://contents.vidacafetera.com/images/our_coffee_right.svg) no-repeat; transform: translateY(-50%);}




@media screen and (min-width: 897px){
/* ベース */
  
h1, h2, h3, p{padding: 0;}

.pc{display: block;}
.sp{display: none;}

.br_sp:before{content: none; white-space: normal;}
.br_pc:before{content: "\A"; white-space: pre;}

/* Header */
  header{position: static; padding: 50px 0;}
  #head_box{display: table; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px;}
  #logo, #navi_table{display: table-cell;}
  #logo{width: 230px;}


  /* ナビ */
  #navi_table{position: static; background-color: transparent; vertical-align: top; width: auto; padding: 0;}
  #nav-drawer {position: static;}
  #nav-open, #nav-open span, #nav-open span:before, #nav-open span:after{display: none;}
  #nav-content{position: static; transform: none; height: auto; background: transparent; color: #E2C80F; opacity: 1; width: auto; max-width: none;}
  #nav-content ul{display: flex; align-items: center; justify-content: flex-end; position: static; margin: 0; padding: 0; top: auto; bottom: auto; left: auto;}
  #nav-content ul li{padding: 10px 20px; list-style: none;}
  #nav-content ul li span.envelop{display: none;}
  #nav-content>ul>li:last-child{margin-bottom: 10px; padding-right: 0;}
  #nav-content>ul>li{border: none;}
  #nav-content ul li .icon-envelop{display: inline;}
  #nav-content ul li.search_list{display: list-item; padding-top: 15px;}
  #nav-content ul li .icon-user{display: inline;}
  #nav-content ul li span.my_account{display: none;}
  .menu_group, #nav-content ul.menu_small_category{display: none;}
/* Headerここまで */

/* カートボタン */
  #cart_button .cart_number{width: 40px; height: 40px; top: 16px; font-size: 20px;}
  #cart_button a{width: 60px; height: 60px;}

/* 検索フォーム */
  .form_box{padding: 0;}
/*中身を非表示*/
.form_hidden_show {height: 0; padding: 0; overflow: hidden; opacity: 0; transition: 0.8s; width: 350px; float: right; margin-right: 30px;}
/*クリックで中身表示*/
input:checked ~ .form_hidden_show { padding: 0; height: auto; opacity: 1; }
/* 検索フォームここまで */


/* Main */
  main{padding-bottom: 0;}
  main>article>*, main>section>*, main>nav>ul[class]{max-width: 1200px; margin-left: auto; margin-right: auto;}

  .breadcrumb ul.breadcrumb__list{margin: 0 auto; max-width: 1200px;}
/* Mainここまで */

/* Footer */
  footer{position: static; height: auto; padding: 20px 0;}
  .footer_privacy{padding-top: 0;}

/* Footerここまで */

  /* free共通 */
  main.free section{max-width: 1200px;}
  /* free1 */
  main.free1 #loading{height: calc(100vh - 110px); top: 170px;}
  main.free1 .h1_box{height: calc(100vh - 200px); top: -50px;}
  main.free1 h1{max-width: 450px; text-align: center;}
  
  main.free p.goto_top:hover{color: #3C1619; background-color: #E2C80F;}
  main.free p.goto_top:hover:before{background:url(https://contents.vidacafetera.com/images/our_coffee_left_hover.svg) no-repeat;}
  main.free p.goto_top:hover:after{background:url(https://contents.vidacafetera.com/images/our_coffee_right_hover.svg) no-repeat;}
  /* free2 */
main.free2 .info-text img{max-width: 700px;}


  
  /* 売れ筋スライドショー */
  .slick-list{padding: 20px 0 0 !important;}
  .seller_title{top: 0; left: 36%; font-size: 18px; line-height: 1.3;}
  .slider_item{margin: 0 35px; transform: none;}
  .slider_item.slick-center a img.new_mark_img1{box-shadow: none;}


  }