a {transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease;}
a:hover {opacity: 0.7;}

h2{line-height: 1.3;}

.headLang{ top: 0; left: 0; padding-left: 10px;font-size: 11px; position: absolute;  z-index: 999;}
.headLang a{}


.container {max-width: 1020px; width: 100%; margin: 0 auto; padding: 0 20px;}
header .container { max-width: 1300px;}
header {background: #000; text-align: center; color: #fff; padding: 50px 0 20px; position: relative; z-index: 99999 !important; }
header .contact {position: absolute; right: 0; top: 0; width: 158px; height: 146px;}
header .contact a:hover{ opacity: 1;}
header .contact .inner{ position: relative;}
header .contact .inner span{ position: absolute; background-image: url(../../images/common/ic_contact.png); background-repeat: no-repeat; background-position: right 40% bottom 0; display: block; padding-bottom: 35px; top: 10px; right: 10px; transition: all .3s; -webkit-transition: all .3s;}
header .contact .inner span:hover{ background-position: right 10% bottom 7%;}

header .container h1 {padding: 0 0 40px;}
header .container h1 a:hover {opacity: 1;}
/*header .container .gnav {text-align: center; font-size: 0;}
header .container .gnav li {display: inline-block;}
header .container .gnav li:nth-of-type(5) {display: none;}
header .container .gnav li a { display: block; padding: 10px 50px; letter-spacing: 2px; font-size: 18px; line-height: 1; }
header .container .gnav li a:hover {background: #373232;}
header .container .gnav li .active {background: #373232;}
*/
nav.gnav{}
.gnav > ul {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.gnav > ul > li {
  margin: 0 10px;
  display: flex; /* フレックスボックスを使用 */
  align-items: center; /* 縦方向の中央寄せ */  
}

/*
.gnav > ul > li:nth-child(1) {
  width: 16%;
}
.gnav > ul > li:nth-child(2) {
  width: 14%;
}
.gnav > ul > li:nth-child(3) {
  width: 32%;
}
.gnav > ul > li:nth-child(5) {
  width: 32%;
}
.gnav > ul > li:nth-child(6) {
  width: 18%;
}
*/


.gnav > ul > li:hover {
  color: #fff;
  background-color: #474747;
}
.gnav > ul > li:hover > a {
  color: #fff; ;
}
.gnav > ul > li:hover .menu {
  max-height: 9999px;
  opacity: 1;
  transition: max-height 2s ease-in;
}
.gnav > ul > li > a {
  display: block;
  padding: 10px 0.4em 10px;
  transition: all .2s ease-in;
font-size: 16px;
}
.gnav > ul .menu {
	transition: all .2s ease-in;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	width: 100%;
	left: 1px;
	text-align: center;
	position: absolute;
	background-color: hsla(0,0%,0%,0.80);
	top: 207px;
}
.gnav > ul .menu .menu_inner {
  padding: 1em 0;
}
.gnav > ul .menu .menu_inner li {
  display: inline-block;
  margin: 1em;
  padding-top: 30px;
	width: 21%;
}
.gnav > ul .menu .menu_inner li span{
  display: block;
}
.gnav > ul .menu a {
  color: #fff;
}

/* .gnav  ul  li:nth-child(6),.gnav  ul  li:nth-child(7) {
	background-image: url(../../images/common/icon_new.png);
	background-repeat: no-repeat;
	background-position: center top;
} */

/*header .container .gnav li:nth-of-type(8) {display: none;}*/
header .container .gnav li a:hover {background: #373232;}
header .container .gnav li .active {background: #373232;}


header .container .gnav .sp {display: none;}

header .logo {position: relative;}

.menusp {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  display: none;
}

.menusp a {
  position: relative;
  width:34px;
  height: 24px;
  display: block;
  margin: 0 auto;
}

.menusp a span {
  display: block;
  position: absolute;
  width: 100%;
  background: #fff;
  height: 2px;
  margin: 0;
  left:0;
  transition:all 0.5s ease-in-out;
}

.menusp a span:nth-of-type(1) {
  top:0;
}

.menusp a span:nth-of-type(2) {
  top:50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.menusp a span:nth-of-type(3) {
  bottom:0;
}

.menusp a.active span:nth-of-type(1) {
  -webkit-transform: rotate(-225deg);
  transform: rotate(-225deg);
  top:50%; margin:-1px 0 0 0;
}

.menusp a.active span:nth-of-type(2) {
  opacity:0;
}

.menusp a.active span:nth-of-type(3) {
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  bottom:50%; margin:0 0 -1px 0;
}

footer {background: #000; color: #fff; padding: 70px 0 40px; text-align: center;}
footer .follow {padding: 50px 0; text-transform: uppercase;}
footer .follow * {display: inline-block; line-height: 1;}
footer .follow span {padding: 0 20px 0 0; border-right: 1px solid #fff; margin: 0 20px 0 0;}
footer .follow i {margin: 0 20px 0 0;}
footer .f-nav {max-width: 1000px; width: 100%; margin: 0 auto; padding: 70px 0;}
footer  ul.f-nav{ display:flex; justify-content: space-between}
/*footer .f-nav li {float: left; width: 28%; margin: 0 2% 0 0;}
footer .f-nav li:nth-of-type(3) {width:19% ;}
footer .f-nav li:nth-of-type(4) {width:19% ; margin: 0 0 0 0;}*/
footer .f-nav li>a {display: block; text-align: left;  margin-bottom: 8px; font-size: 14px;}
footer ul.f-nav  li li a{font-size: 12px; }
/*footer .f-nav li a:nth-of-type(1) {font-weight: bold;}*/
footer .f-nav li a:hover,footer .f-nav li .active {text-decoration: underline;}
footer > p > span { margin-left: .5em;}

footer .logoFooter-JPB{padding: 15px; text-align: center;}
footer .logoFooter-JPB img{display: inline-block; width: 80px;}

.footSanyosangyo{text-align: center; margin-bottom: 15px;padding-top: 20px;}

.spDisp{display: none;}
.pcDisp{display: block;}

.bnrInterview{ padding: 0 10px 100px; text-align: center; }

.changLang{margin-bottom: 15px; font-size: 14px; z-index: 9998;}

.ftBnrBox{text-align: center; padding: 10px 10px 30px ; display: block; clear:both; margin-bottom: 40px; }

.roastLevelMv{text-align: center;margin-bottom: 40px; padding: 0 10px;}

.bnrBrewingGuide{text-align: center; margin-bottom: 60px;}
.bnrBrewingGuide a{transition: 0.5s;box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; display: inline-block}

.caption{ font-size: 12px; margin-top: 5px;}

@media only screen and (max-width: 1024px){
  header .container h1 {padding: 0 0 15px;}
  header .container h1 img {width: 120px;}
  header .contact { height: 111px; width: 120px; background-size: 17px auto; background-position: right 28% bottom 55%;}
  header .contact a {font-size: 14px;}
  header .contact .inner span{ background-position: right 30% bottom 3%; display: block; padding-bottom: 35px; top: 7px; right: 10px;}
  header .contact .inner span:hover{ background-position: right 10% bottom 10%;}
  .gnav > ul .menu .menu_inner li { width: 28%;}
}


@media only screen and (max-width: 767px){
  header {position: fixed; top: 0; left: 0; width: 100%; z-index: 999; padding: 0;}
  header .container {padding: 0;}
  header .container h1 {padding: 0;}
  header .logo {padding: 22px 0;}
  header .contact {display: none;}

  .menusp {display: block;}

    nav.gnav{}
.gnav > ul {
  display: block;
  width: 100%;
	justify-content: center
}
    .gnav > ul > li {
  margin: 0 0px;
}

  header .container .gnav {display: none;}
  header .container .gnav .sp {display: block; padding: 10px 20px 20px;}
  header .container .gnav .sp p {font-size: 14px; padding: 0 0 20px;}
  header .container .gnav .sp a {display: block; text-align: left; position: relative; padding: 0; margin: 0 auto 15px;}
  header .container .gnav .sp a:last-of-type {margin: 0;}
  header .container .gnav .sp a img {width: 30%; text-align: left;}
  header .container .gnav .sp a span {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); left: 50%; font-size: 16px;}
  header .container .gnav .sp .active {background: none; color: #ea5000;}

  header .container .gnav .pc {display: none;}
  header .container .gnav li {display: block; width: 100%; border-top: 1px solid #423b3b;}
  header .container .gnav li:nth-of-type(8) {display: block; background-color: #e8540c;}
  header .container .gnav li .active {background: #423b3b;}


  footer .f-nav li {float: none; width: 100% !important; margin: 0 auto 10px;}
  footer .f-nav li a {text-align: center !important;}
  footer > p > span {display: block; text-align: center; margin-left: 0;}
  footer ul.f-nav {display: block;}

	
	.anchorlink{ margin-top: -60px; padding-top: 60px;}
.pcDisp{display: none;}
.spDisp{display: block;}
	
}