@charset "utf-8";
/* menu */
header {background: rgba(255,255,255,0.3);position: relative;}
    header h1 {
        max-width: 63px;
        position: static;
        margin: 12px auto;
        left:36px;
    }
    header h1 img {filter: none;}
      header nav {
        left: -480px;
        right:auto;
        background:rgba(255,255,255,1);
        padding: 12px 32px;
      }

      .nav_open header nav {left: 0px;}

      header .nav_btn {
        display: block;
        width: 33px;
        height: 33px;
        z-index: 300;
        top: 15px;
        right: auto;
        left: 20px;
        cursor: pointer;
        position: fixed;
      }

      .hamburger_line {
        transition: all .6s;
        width: 33px;
        height: 6px;
        left: 0px;
        background: url(../img/nav-line.png) no-repeat center center / 35px 6px;
        position: absolute;
      }

      .hamburger_line1 { top: 0px; }
      .hamburger_line2 { top: 12px; }
      .hamburger_line3 { top: 24px; }

      .nav_bg {
        opacity: 0;
        transition: all .6s;
        width: 100vw;
        height: 100vh;
        z-index: 100;
        top: 30px;
        left: 0;
        visibility: hidden;
        cursor: pointer;
        position: fixed;
      }

      .nav_open .nav_bg {
        opacity: .8;
        visibility: visible;
      }

      .nav_open .hamburger_line1 {
        transform: rotate(45deg);
        top: 10px;
      }

      .nav_open .hamburger_line2 {
        width: 0;
        left: 50%;
      }

      .nav_open .hamburger_line3 {
        transform: rotate(-45deg);
        top: 10px;
      }
      header .sns img{width:30px;margin:2px 5px;}
      header #gototop{
        display:block;
        position: fixed;
        top: 13px;
        right: 30px;
        z-index: 10;}
      header nav a p,header nav a span,header nav div p,header nav div span{font-size:2.25vh;font-family: 'myfont', sans-serif;line-height: 160%;}
      header nav li small{font-size:1.5vh;}
      header nav ul{margin-top:60px;}
      header nav li {margin-bottom: calc(100% / 9);}
      header .sns {margin: -10px 0 10px;}
      .sns img {width: 5vh;}
/* menu */


.bg-ddd{background:#ddd;}
.bg-f2f2f2{background:#f2f2f2;}
.color-B0905E{color:#B0905E;}
.line-707070{border:#707070 solid 1px;}

  /* links btn */
  .links-btn{
    display: block;
    width: 100%;
    max-width: 100%;
    margin:auto;
    background: rgba(255,255,255,0.85);
    padding:30px 1%;
    text-align: center;
  }
  .links-btn ul.share{width:40%;float:left;}
  .links-btn ul.share li{display: inline-block;width:28%;margin-right:2%;}
  .links-btn ul.share li img{margin-top:15%;}
  .links-btn a.buy{display: inline-block;width:60%;float:right;}
  a.new-client{color:#FF6C00;font-size:11px; line-height: 160%;}

  #bottom-fix.links-btn{
    position: fixed;
    bottom: 0;
    z-index: 10;
    padding:13px 3.5%;
  }
  #bottom-fix.links-btn div{max-width:460px;margin:auto;}

  #mjd-main{/*height:87vh;*/padding:4.25vh 0 0;}
  #mjd-main .bg-ddd{margin:7vh 0 4vh;padding:22px 10px;text-align:center;}
  #mjd-main .bg-ddd h4{font-size:15px;font-weight:700;}
  #mjd-main p {font-size:10px;margin: 5px auto 10px;font-weight:400;}
  #mjd-main .bg-ddd ul{display: inline-flex;max-width:480px;margin:0 auto;}
  #mjd-main .bg-ddd ul li{margin:3px; }
  #mjd-main .bg-ddd ul li{filter: drop-shadow( 0 3px 5px rgba(0,0,0,0.7));}
  #mjd-main hr{border-top: 1px solid #B0905E;margin-top:2vh;}
  #mjd-main h2{font-size:12px;font-weight: bold;text-align:center;}

  .logo-visual {text-align:center;max-width:980px;margin:auto;}
  .logo-visual h1 img{max-width:280px;display: block;margin:2vh auto 5px;}
  .logo-visual h3{margin-top:8px;font-size:1.8vh}

    #mjd-swiper{
  	max-width: 1118px;
  	margin:5px auto 20px;
  	overflow: hidden;
    width: 100%;}
  /*.swiper-container {
      margin-left: 12px;
      margin-right: 12px;
    }*/
  .swiper-slide{overflow: hidden;width: 25%;opacity: .5;padding:5px;}
  .slider .swiper-slide.swiper-slide-active{opacity: 1;}
  .slider-thumbnail .swiper-slide.swiper-slide-thumb-active{opacity: .5!important;}
  .slider-thumbnail .swiper-slide.swiper-slide-visible{opacity: 1;}


  #mjd-pjtitle number{font-size:20px;color:#3B3B3B;}
  #mjd-pjtitle h2{font-size:20px;line-height:120%;margin-top:13px;color:#3B3B3B;}
  #mjd-pjtitle p.information{font-size: 10px;background: #EBEBEB;padding:2%;border-radius: 3px;margin:20px 0;}
  #mjd-pjtitle .project h3{line-height:135%;font-size:17px;margin:20px 0 25px;letter-spacing: -0.5px;border-left:6px solid #555555;padding-left:7px;color:#555555}
  #mjd-pjtitle .project p{font-size:14px;margin:0 10px 0 0;line-height: 200%;}

  #about01-1 ,#about02-1{ padding-top: 90px;margin-top: -90px;}
  #mjd-about01,#mjd-about02{margin-top:12vh}
  #mjd-about01 .logo-visual{margin: 5vh auto 15vh;}
  #mjd-about01 h4,#mjd-about02 h4{color: #555555;position: relative;padding:16px 5px;border-top:1px solid #707070;border-bottom:1px solid #707070;font-size:17px;margin:40px 8px 0 0;}
  #mjd-about01 h4 img,#mjd-about02 h4 img{width:80px;position: absolute;bottom:-8px;right:-8px;z-index: 5;}
  #mjd-about01 p,#mjd-about02 p{font-size:14px;font-weight:600;margin:0 5px;line-height: 210%;}
  #mjd-about01 p span.color-B0905E{font-weight:800;}
  #mjd-about01 p a,#mjd-about02 p a{color:#212529;text-decoration: underline;}
  #mjd-about01 .box .color-B0905E{font-size:18px;margin:30px 0 30px 7vw;line-height: 135%;}

  #mjd-about01 .box,#mjd-about02 .box{margin:30px auto 0;border-radius: 3px;}
    #mjd-about01 .box img,#mjd-about02 .box img{width:168px;margin-top:-30px;}
    #mjd-about01 .box h5{line-height:190%;margin:35px 0 45px;font-size:14px;font-weight:600;}
    #mjd-about01 .box ul,#mjd-about02 .box ul{margin:20px 0;}
    #mjd-about01 .box ul li,#mjd-about02 .box ul li{line-height:140%;margin-bottom:22px;font-weight: bold;font-size:16px;}
    #mjd-about01 .box ul li i,#mjd-about02 .box ul li i{text-shadow: 0px 3px 6px #ccc;font-size:18px;display: block;float: left;height: 30px;}
    #mjd-about01 .box ul li i {color: #fff;  }#mjd-about02 .box ul li i {color: #C74848;  }
  #mjd-logos hr{border-top:1px solid #707070;max-width:250px;text-align: center;margin:100px auto;}
  #mjd-logos img{max-width:130px;margin:50px auto;display: block;}
  #mjd-logos p{font-size:14px;line-height: 200%;letter-spacing: -0.8px;font-weight:600;}

/* Read　more */
  .grad-btn {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  max-width: 283px;
  margin: auto;
  padding: 15px 0;
  border:1px solid #707070;
  background: #fff;
  color: #1B1311;
  font-size: 1.5vh;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  }
  .grad-item {
    position: relative;
    overflow: hidden;
    height: 25vh; /*隠した状態の高さ*/
  }
    #tg3 .grad-item {height: 72vh;}
  .grad-item::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 13vh; /*グラデーションで隠す高さ*/
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,  rgba(255,255,255,0.9) 10%, #fff 100%);
    content: "";
  }
  .grad-trigger {
    display: none; /*チェックボックスは常に非表示*/
  }
  .grad-trigger:checked + .grad-btn {
    display: none; /*チェックされていたら、grad-btnを非表示にする*/
  }
  .grad-trigger:checked ~ .grad-item {
    height: auto!important; /*チェックされていたら、高さを戻す*/
  }
  .grad-trigger:checked ~ .grad-item::before {
    display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
  }

  #mjd-menu{background:#DFFA93;padding:40px 0 65px;}
  #mjd-menu .logo-visual h1 img{max-width:150px;}
  #mjd-menu .logo-visual h3{margin-top:5px;font-size:7.5px;}
  #mjd-menu div.archive{margin-top:50px;display:block;padding:8px 0;border:#707070 solid 1px;max-width:330px;font-size:1.8vh;background:#fff;color:#000;}
  #mjd-menu ul{margin:30px 20px;}
  #mjd-menu ul li{margin-bottom:14px;font-size:12px;}
  #mjd-menu ul li a,#mjd-menu ul li.gray{color:#B1B1B1;}
  #mjd-menu ul li a.active{color:#000;}
  #mjd-menu p{font-size:10px;margin:20px;}

footer{padding:25px 0 12vh;background: #DDDDDD;position: relative;}
footer p{margin:0 auto 24px;font-size:10px;}
footer img{max-width:100px;margin-bottom:30px;}
footer a.mame{margin:-20px 30px 0 0;float: right;}
footer a.mame img{width:52px;
	-webkit-transform: rotate(-19deg);
	-moz-transform: rotate(-19deg); }
footer copyright a{text-align:center;display:block;padding:40px 0 30px;font-size:8px;color:#000;}


@media screen and (min-width:767px) {
  .logo-visual h1 img {max-width: 45vh;}
  .logo-visual h3 {font-size: 2vh;margin-top:1vh;}
  .links-btn{ padding: 3vh 20%;}
}

@media screen and (min-width:1280px) {
  .links-btn{ padding: 4vh 30%;}
  #mjd-main .bg-ddd h4{font-size:160%;}
  #mjd-main .bg-ddd p{font-size:120%;}
  #mjd-main .bg-ddd{margin-bottom:10px;}
  #mjd-main a.new-client{font-size:120%;margin-top:10px;}
  #mjd-main h2{font-size:140%;}

  #mjd-pjtitle h2{font-size:260%;}
  #mjd-pjtitle p.information {font-size: 130%;padding: 1%;}
  .grad-item,#tg3 .grad-item { height: 18vh;}
  #mjd-pjtitle .project p{font-size: 150%;}
  #mjd-pjtitle .project h3{font-size:200%;}

}

/* beans_info */
/*body#beans_info.nav_open header nav {
    left: auto;
    right: 0;
}*/
body#beans_info header {
    background: rgba(255,255,255,0);
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
}


body#beans_info header .nav_btn {
      position: absolute;
    }
@media screen and (max-width:767px) {
  body#beans_info.nav_open header nav {
      left: 0;
      right: auto;
  }
}
@media screen and (min-width:767px) {
    body#beans_info header .nav_btn {
        right: 108px;
        top:108px;
        left:auto;
        width: 78px;
        height: 64px;
    }
    body#beans_info header .hamburger_line {
      width: 78px;
      background: url(../img/nav-line2.png) no-repeat center center / 78px 13.43px;
      height:13.43px;
      filter: brightness(0) invert(1);
    }
    body#beans_info header h1 {
      max-width: 246px;
        position: absolute;
        margin:0;
        left: 108px;
        top: 108px;
    }
    body#beans_info header h1 img {
        filter: brightness(0) invert(1);
    }

    body#beans_info header .hamburger_line2 {top:24px;}
    body#beans_info.nav_open header .hamburger_line2 {display: none;}
    body#beans_info header .hamburger_line3 {top:48px;}

    body#beans_info.nav_open header .hamburger_line3 {top:12px;}
}

body#beans_info header #gototop {
    display: none!important;
}

body#beans_info #main {
    width: 100%;
}

body#beans_info #main section #bi-no01,body#beans_info #main section #bi-no02,body#beans_info #main section #bi-main{
	max-width: 1920px;
	margin-right: auto;
    margin-left: auto;
}
#bi-main{height:500px;
	background:url(../img/beans_info/mainvisual-pc.jpg) no-repeat center center/ cover;
    max-width: 1920px;
    margin: auto;}
#bi-no01{margin:8vh auto 5vh;clear:both;max-width:1920px;}
#bi-no01 .fll{padding: 13vh 0 0 5vw;width:47%;}
  #bi-no01 .fll h2{font-size: 5vw;}
  #bi-no01 .fll h3{font-size:/*30px*/1.8vw;margin:10px;}
#bi-no01 .flr{max-width:970px;width:53%;}
#bi-no02 div{max-width: 1920px;margin: 100px auto;padding: 0 95px;}
#bi-no02 div h3{font-size:3vw/*60px*/;}
#bi-no02 div h4{font-size:2vw/*40px*/;margin:4vh auto 10vh;}
.bi_1500{max-width:1500px;margin:12vh auto;text-align:center;}
.bi_1500 .container{max-width:100%;}
.bi_1500 table td{width:50%;padding:0;vertical-align: middle;}
.bi_1500 table tr{margin:5vh 0;}
.bi_1500 h3{font-size:2.7vw/*50px*/;line-height:130%;}
.bi_1500 h4{font-size:2vw/*36px*/;line-height:130%;}
.bi_1500 a{color:#000;}
.bi_1500 a.under-line{font-size:1.9vw/*36px*/;display: block;line-height:120%; font-weight: bold;text-decoration: underline;}
.bi_1500 p{margin:7vh 0 6vh;font-size:1.35vw/*27px*/;line-height:160%;font-weight:bold;}
.bi_1500 a.kuwashiku{font-size:/*1.2vw*/21px;display:inline-block;}
#decaf-colombia-kiazen-dark,#decaf-colombia-kaizen-light{margin-bottom:10vh;}
#bi-no03 img{max-width:640.45px;margin-right:16px;float:right;}
#bi-no03 h4,#bi-no04.bi_1500 h4{margin-top:6vh;}
#bi-no04 img{max-width:557.75px;margin-left:37px;float: left;}
#bi-no05 h3{margin:20vh auto 0;}
#bi-no05 h3.title{margin:168px auto 138px;}
#bi-no05 h5{font-size:1.4vw/*26px*/;margin:3vh auto 18vh;}
#bi-no05 img{max-width:495.48px;display:block;margin:4vh auto;}
#bi-no06 h4{font-size:2.7vw/*50px*/;}
#bi-no06 img{display:block;}
  #bi-no06 img.asort{max-width:500px;margin:1vh auto;}
  #bi-no06 img.pack{max-width:400px;margin:30px auto 6.5vh;}
#bi-no06 #otokunihajimeru p{margin-top: 5vh;}
#bi-no06 a{color:#606060;}
#bi-no06 h3{margin-bottom:12vh;}
#bi-no07 img{max-width:800px;display:block;margin:auto;}
#bi-no07 h4{margin-bottom:5vh;font-size:2.7vw/*50px*/;}
#bi-no07 p{margin:2vh 0 8vh;}
body#beans_info main hr{max-width:1500px;width:100%;margin:3px auto;border-top: 1px solid #707070;align-items:center;}
body#beans_info #mjd-logos{margin:60px auto 140px;}
body#beans_info #mjd-logos p{font-weight:bold;font-size:1.58vw/*28px*/;letter-spacing: -2px;margin-top:30px;color: #555555;}
body#beans_info #mjd-logos img{margin:50px 3.25vw;display:inline-block;}
body#beans_info #mjd-logos img.bnr01{/*max-width:230.72px*/;max-width:190.72px;}
body#beans_info #mjd-logos img.bnr02{/*max-width:246.49px;*/max-width:206.49px;}
body#beans_info #mjd-logos img.bnr03{/*max-width:244.52px;*/max-width:204.52px;}
  body#beans_info #mjd-logos img.pc-none{display: none;}

@media screen and (max-width:767px) {
    #bi-main{background:url(../img/beans_info/mainvisual-sp.jpg) no-repeat center center/ cover}
    /*body#beans_info header{top:30px;}*/
    body#beans_info header h1 { position: absolute;top:0px;left: 41.55%;}
    body#beans_info header #gototop {display: block!important;position: absolute;}
    #bi-no01{position:absolute;z-index: 99;top: 358px;margin:0;}
    #bi-no01 .fll{padding:0;float:none;width:100%;min-width: 375px;text-align: center;}
      #bi-no01 .fll h2{font-size:40px;color:#fff;}
      #bi-no01 .fll h3{font-size:15px;color:#fff;}
    #bi-no01 .flr{display: none;}
    #bi-no02 div{margin:0 auto;padding: 0;}
    #bi-no02 div h3 {font-size: 24px;margin-top: 58px; }
    #bi-no02 div h4 {font-size: 18px;margin: 20px auto 58px;}
    body#beans_info main .bi_1500 .row .col-12 hr{margin: 9vh auto 4.5vh;}
    .bi_1500{margin: 8vh auto;}
    .bi_1500 table td {width: 94%;display: block;margin:auto;}
    .bi_1500 h3 {font-size: 24px;}
    .bi_1500 h4 {font-size: 18px;}
    .bi_1500#bi-no03 {margin:0 auto;}
    .bi_1500#bi-no04 {margin:0 auto 8vh;}
    #bi-no03 h3, #bi-no04 h3{font-size: 24px;margin-top: 67px;}
    #bi-no03 h4, #bi-no04 h4{margin:20px 0 48px!important;font-size: 18px;}
    #bi-no03 img,#bi-no04 img{margin:0 auto;float:none;}
      #bi-no03 img {max-width:342.44px;}
    #bi-no04 img {max-width: 293px;}
    #bi-no05 h3 {margin: 76px auto 0;}
    #bi-no05 h3.title {margin: 0 0 8vh;font-size: 22px;}
    #bi-no05 h5 {font-size: 10px;margin:10px auto 90px;}
    #bi-no05 #decaf-tokyo-beans img{margin-top:0;}
    #bi-no05 img{max-width: 270px}
    .bi_1500 a.under-line{font-size: 20px;}
    .bi_1500 p{font-size: 15px;margin:3.8vh auto;}
    .bi_1500 a.kuwashiku{font-size:12px;}
    body#beans_info main hr {max-width:295px;}
    #decaf-colombia-kiazen-dark, #decaf-colombia-kaizen-light {margin-bottom:0;}
    #decaf-ethiopia-yilgacef {margin-bottom:75px;}
    #bi-no06 img.asort {  max-width: 280px;}
    #bi-no06 img.pack {  max-width: 230px;margin: 33px auto 23px;}
    #bi-no06 #otokunihajimeru p{margin-top: 23px;}
    #bi-no06.bi_1500 h4 {font-size: 24px;margin: 4vh auto 0;}
    #bi-no06.bi_1500 p {font-size: 12px;margin: 2vh auto 0;}
    #bi-no06.bi_1500 a.under-line {font-size: 15px;}
    #bi-no06 h3 {margin-bottom: 97px;margin-top: 72px;}
    /*.bi_1500 .col-12{border-bottom: 6px #707070 double;}*/
    .bi_1500#bi-no07{margin:67px auto 83px;}
    #bi-no07 h4 {font-size: 18px;    margin-bottom: 42px;}
    #bi-no07 p{font-size: 12px;}
    #bi-no07 img {max-width: 324px;}
    body#beans_info #mjd-logos {margin: 100px auto 114px;}
    body#beans_info #mjd-logos img{display:block;margin:0 auto;}
    body#beans_info #mjd-logos img.bnr01{/*max-width:230.72px*/;max-width:117px;}
    body#beans_info #mjd-logos img.bnr02{/*max-width:246.49px;*/max-width:125px;margin:53px auto 64px;}
    body#beans_info #mjd-logos img.bnr03{/*max-width:244.52px;*/max-width:124px;margin-top:51px;}
    body#beans_info #mjd-logos p{font-size: 14px;    letter-spacing: -1px;}
      body#beans_info #mjd-logos img.pc-none{display:inline-block;}
      body#beans_info #mjd-logos img.sp-none{display: none;}
  }


 @media screen and (min-width:1919px) {
	#bi-no01 .fll h2 {font-size: 100px;}
	#bi-no01 .fll h3 {font-size: 30px;}
	#bi-no02 div h3 {font-size: 60px;}
	#bi-no02 div h4 {font-size: 40px;}
	.bi_1500 h3 {font-size: 50px;}
	.bi_1500 h4 {font-size: 36px;}
	.bi_1500 a.under-line{font-size: 36px;}
	.bi_1500 p {font-size: 26.97px;}
	.bi_1500 a.kuwashiku {font-size: 21px;}
	#bi-no05 h5 {font-size: 26px;}
	#bi-no06 h4 {font-size: 50px;}
	#bi-no07 h4{font-size: 50px;}
	body#beans_info #mjd-logos p{font-size: 28px;}
}