@charset "utf-8";

@import url("./font-awesome.min.css");

/* COMMON */
.area_ct {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

#header {
  z-index: 2;
  position: relative;
  background: url("/assets/caffebene/images/common/header_bg.png") repeat-x left top;
}
#lnb {
  height: 48px;
  line-height: 48px;
  text-align: right;
}
#lnb p {
  font-size: 150%;
  color: #fff;
}
#lnb p .tick2 {
  margin-left: 11px;
}
#gnb {
  position: relative;
  height: 96px;
}
#gnb .logo {
  position: absolute;
  left: 0;
  top: 21px;
}
#navi_wrap {
  z-index: 1;
}
#navi {
  float: right;
  position: relative;
  width: 964px;
  height: 97px;
  line-height: 97px;
}
.nav_depth {
  float: left;
  width: 241px;
  text-align: center;
}
.nav_depth:after {
  display: block;
  clear: both;
  content: "";
}
.nav_depth span {
  float: left;
  width: 100%;
}
.navi_fir {
  position: relative;
}
.navi_fir a {
  display: block;
}
.navi_fir a:hover {
  color: #0257c0;
}
.navi_fir strong {
  text-align: center;
  font-size: 166.7%;
}
.navi_sec {
  display: none;
  clear: left;
  position: absolute;
  left: 0;
  top: 97px;
  width: 241px;
}
.navi_sec ul {
  min-height: 160px;
  padding-top: 9px;
  border-right: 1px solid #cccccc;
}
.navi_sec li {
  padding: 18px 0 18px 30px;
  text-align: left;
  font-size: 100%;
  line-height: 1;
}
.navi_sec li a {
  display: inline-block;
  padding-left: 10px;
  background: url("/assets/caffebene/images/icon/gnb_bullet01.gif") no-repeat scroll 0 4px
    rgba(0, 0, 0, 0);
  font-size: 108.333%;
  color: #666666;
}
.navi_sec li a:hover {
  background: url("/assets/caffebene/images/icon/gnb_bullet02.gif") no-repeat scroll 0 4px
    rgba(0, 0, 0, 0);
  font-weight: bold;
  color: #0257c0;
}
.menu_480 {
  display: none;
}
#navi_bg {
  display: none;
  position: absolute;
  left: 0;
  top: 96px;
  width: 100%;
  height: 170px;
  background: none repeat scroll 0 0 #ebebeb;
}
.navi_bg_img {
  min-height: 263px;
}

#container {
}
.main_banner {
  background: url("/assets/caffebene/images/main/spot_bg_131022.jpg") no-repeat center top #000;
}
.main_bn_box {
  padding: 40px 0;
}
.main_bn_box img {
  width: 440px;
  height: 605px;
}
.product_wrap {
  position: relative;
  margin-top: 36px;
  margin-bottom: 30px;
}
.best_menu {
  position: absolute;
  left: 0;
  top: -6px;
  width: 157px;
  height: 41px;
  background: url("/assets/caffebene/images/main/menu_box.png") no-repeat left top;
}
.best_menu p {
  padding: 10px 0 0 15px;
  font-size: 166.666%;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}
.best_menu p.smaller {
  padding: 10px 0 0 0;
  font-size: 1.48em;
  text-align: center;
}
.product_box {
  overflow: hidden;
  border: 1px solid #c3c2c2;
  border-top: 2px solid #267ac1;
}
.product_box01 {
  float: left;
  width: 298px;
  height: 236px;
  margin-top: 35px;
  border-right: 1px dashed #c3c2c2;
  background: url("/assets/caffebene/images/main/main_menu01.jpg") no-repeat left bottom;
}
.product_box02 {
  float: left;
  width: 299px;
  height: 236px;
  margin-top: 35px;
  border-right: 1px dashed #c3c2c2;
  background: url("/assets/caffebene/images/main/beverages.jpg") no-repeat left bottom;
}
.product_box03 {
  float: left;
  width: 299px;
  height: 236px;
  margin-top: 35px;
  border-right: 1px dashed #c3c2c2;
  background: url("/assets/caffebene/images/main/dessert.jpg") no-repeat left bottom;
}
.product_box04 {
  float: left;
  width: 299px;
  height: 236px;
  margin-top: 35px;
  background: url("/assets/caffebene/images/main/main_menu02.jpg") no-repeat left bottom;
}
.product_box01 a,
.product_box02 a,
.product_box03 a,
.product_box04 a {
  display: block;
  height: 236px;
}
.product_box01 span,
.product_box02 span,
.product_box03 span,
.product_box04 span {
  display: block;
  padding: 11px 0 0 19px;
  font-size: 150%;
  font-weight: bold;
  line-height: 1;
}

#footer {
  height: 82px;
  background-color: #513a2a;
}
.footer_wrap {
  overflow: hidden;
}
.foot_logo {
  float: left;
  padding: 20px 0 0 24px;
}
.copyright {
  float: left;
  padding: 38px 0 0 34px;
}
.copyright ul {
  overflow: hidden;
}
.copyright ul.wide2 {
  width: 696px;
}
.copyright li {
  font-family: Verdana, Geneva, sans-serif;
  float: left;
  padding: 0 12px;
  color: #fff;
  border-right: 1px solid #fff;
  line-height: 1;
}
.copyright li.first {
  padding-left: 0;
}
.copyright li.last {
  padding-right: 0;
  border-right: 0 none;
}
.copyright p {
  font-family: Verdana, Geneva, sans-serif;
  margin-top: 10px;
  color: #fff;
  line-height: 1;
}
.global_btn {
  float: right;
  padding-top: 20px;
}

/******************** SUB START ********************/
/* COMMON */
.sub_contents {
  margin-top: 36px;
  margin-bottom: 40px;
}
.sub_title_box {
  overflow: hidden;
  width: 100%;
}
.sub_title {
  float: left;
  font-size: 370%;
  letter-spacing: -0.02em;
  font-weight: bold;
  line-height: 1;
}
.sub_path {
  float: right;
  margin-top: 26px;
}
.sub_main_img {
  border: 1px solid #c5c5c5;
}
.sub_main_img {
  margin-top: 40px;
}

/* CAFFE BENE */
.sub01_bene {
  margin-top: 33.6px;
}
.sub01_bene p {
  margin-bottom: 33.6px;
  text-align: justify;
  font-size: 141.666%;
  line-height: 176.47%;
}

/* CEO MESSAGE */
.sub01_ceo {
  overflow: hidden;
  margin-top: 31px;
}
.sub01_ceo .ceo_text01 {
  margin-bottom: 98px;
  text-align: justify;
  font-size: 141.666%;
  line-height: 205.882%;
}
.sub01_ceo .ceo_text02 {
  margin-bottom: 15px;
  font-size: 166.666%;
  color: #666666;
  line-height: 1;
}
.sub01_ceo .ceo_text03 {
  font-size: 208.333%;
  color: #473224;
  line-height: 1;
}
.ceo_l {
  float: left;
  width: 786px;
}
.ceo_r {
  float: right;
  margin-top: 9px;
}

/* History */
.sub01_history {
  margin-top: 40px;
}
.history_table {
  width: 100%;
}
.history_box {
  padding-bottom: 40px;
  padding-top: 40px;
  border-bottom: 1px dashed #c5c5c5;
  vertical-align: top;
}
.hbox_first {
  padding-top: 0;
}
.history_box_last {
  padding-bottom: 0;
  border-bottom: 0 none;
}
.history_table th {
  width: 177px;
  border-right: 1px solid #868686;
  vertical-align: top;
  text-align: left;
  font-weight: bold;
}
.history_year01 {
  font-size: 291.6%;
  color: #267ac1;
}
.history_year02 {
  display: block;
  font-size: 116.66%;
  color: #3f3f3f;
}
.history_box td {
  background: url("/assets/caffebene/images/icon/bullet01.png") no-repeat 60px 8px;
  text-align: left;
  font-size: 116.66%;
  line-height: 1;
}
.history_box td p {
  margin-left: 75px;
  margin-bottom: 26px;
}
.history_table .history_plast {
  margin-bottom: 0px;
}
.history_box td span {
  font-weight: bold;
  color: #267ac1;
}

/* Coffee story */
.sub02_story {
  margin-top: 37px;
}
.sub02_story h2 {
  font-size: 250%;
  font-weight: bold;
  line-height: 1;
}
.sub02_story p {
  margin: 17.5px 0 34.5px;
  font-size: 133.333%;
  line-height: 156.25%;
}
.sub02_story dl {
  margin-bottom: 58px;
}
.sub02_story dl.last {
  margin-bottom: 33px;
}
.sub02_story dt {
  margin-bottom: 15px;
  padding-left: 28px;
  background: url("/assets/caffebene/images/icon/icon_arrow01.png") no-repeat left center;
  font-size: 133.333%;
  font-weight: bold;
  line-height: 1.1;
}
.sub02_story dd {
  padding-left: 28px;
  font-size: 108.333%;
  line-height: 192.307%;
}

/* BI */
.sub02_bi {
  margin-top: 35px;
}
.sub02_bi h2 {
  font-size: 250%;
  font-size: bold;
}
.sub02_bi p {
  margin: 9.5px 0 30.5px;
  font-size: 133.333%;
  line-height: 218.75%;
}
.sub02_bi ul {
  list-style-type: circle;
}
.sub02_bi li {
  margin: 9.5px 0 15px;
  font-size: 133.33%;
  line-height: 120%;
}

/* Menu */
.sub03_coffee {
  margin: 40px 0 80px;
  border-top: 2px solid #267ac1;
  border-bottom: 1px solid #d6d6d6;
}
.sub03_coffee ul {
  overflow: hidden;
}
.sub03_coffee li {
  float: left;
  border-right: 1px solid #d6d6d6;
}
.sub03_coffee li.last {
  border-right: 1px solid #fff;
}

/* Tell us */
.sub04_think {
  margin-top: 33.5px;
}
.sub04_think p {
  font-size: 141.666%;
  line-height: 176.47%;
}
.sub04_assist {
  margin: 53.5px 0 30px;
  padding-bottom: 13px;
  border-bottom: 1px dotted #b0b0b0;
}
.sub04_assist p {
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1;
}
.sub04_assist dl {
  overflow: hidden;
  margin-bottom: 17px;
}
.sub04_assist dt {
  float: left;
}
.sub04_assist dd {
  float: left;
  margin-left: 20px;
  font-size: 141.666%;
}
.sub04_assist02 {
}
.sub04_assist02 p {
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1;
}
.sub04_assist02 dl {
  overflow: hidden;
}
.sub04_assist02 dt {
  float: left;
}
.sub04_assist02 dd {
  float: left;
  margin-left: 20px;
  font-size: 141.666%;
}

/* Global site */
.global_wrap {
  margin-top: 40px;
}
.global_wrap ul {
  overflow: hidden;
  margin-top: 40px;
}
.global_wrap li {
  float: left;
  width: 400px;
  height: 50px;
  margin-bottom: 60px;
}
.global_wrap li.global01 {
  background: url("/assets/caffebene/images/sub/flag_cambodia.jpg") no-repeat left top;
}
.global_wrap li.global02 {
  background: url("/assets/caffebene/images/sub/flag_china.jpg") no-repeat left top;
}
.global_wrap li.global03 {
  background: url("/assets/caffebene/images/sub/flag_indonesia.jpg") no-repeat left top;
}
.global_wrap li.global04 {
  background: url("/assets/caffebene/images/sub/flag_japan.jpg") no-repeat left top;
}
.global_wrap li.global05 {
  background: url("/assets/caffebene/images/sub/flag_korea.jpg") no-repeat left top;
}
.global_wrap li.global06 {
  background: url("/assets/caffebene/images/sub/flag_malaysia.jpg") no-repeat left top;
}
.global_wrap li.global07 {
  background: url("/assets/caffebene/images/sub/flag_mongolia.jpg") no-repeat left top;
}
.global_wrap li.global08 {
  background: url("/assets/caffebene/images/sub/flag_philippinse.jpg") no-repeat left top;
}
.global_wrap li.global09 {
  background: url("/assets/caffebene/images/sub/flag_saudi.jpg") no-repeat left top;
}
.global_wrap li.global10 {
  margin-bottom: 0;
  background: url("/assets/caffebene/images/sub/flag_singapore.jpg") no-repeat left top;
}
.global_wrap li.global11 {
  margin-bottom: 0;
  background: url("/assets/caffebene/images/sub/flag_taiwan.jpg") no-repeat left top;
}
.global_wrap li.global12 {
  margin-bottom: 0;
  background: url("/assets/caffebene/images/sub/flag_usa.jpg") no-repeat left top;
}
.global_wrap li dl {
  padding-left: 112px;
}
.global_wrap li dt {
  margin: 5px 0 14px;
  font-size: 116.666%;
  font-weight: bold;
  line-height: 1;
}
.global_wrap li dd {
  line-height: 1;
}
.global_wrap li dd:hover {
  text-decoration: underline;
}

/* responsive websites */

#toggle-nav {
  display: none;
}

@media (max-width: 991px) {
  .area_ct,
  .copyright ul.wide2 {
    width: 100%;
  }

  .sub03_coffee li {
    float: none;
    border: none;
    text-align: center;
  }

  #gnb {
    height: auto;
    padding: 0;
  }

  #gnb .logo {
    position: static;
    text-align: left;
  }

  #gnb .logo img {
    max-width: 170px;
    height: auto;
  }

  #navi_wrap {
    box-sizing: border-box;
    min-height: 76px;
    padding: 0 58px 0 16px !important;
    display: flex;
    align-items: center;
  }

  #navi {
    position: absolute;
    left: 0;
    right: 0;
    float: none;
    width: 100%;
    height: auto;
    top: 100%;
    line-height: 1;
    box-sizing: border-box;
    background: #ffffff;
    margin-top: 0;
    display: none;
    z-index: 10000;
    box-shadow: 0 18px 36px rgba(31, 31, 29, 0.18);
  }

  #navi.open {
    display: block;
  }

  .nav_depth {
    float: none;
    margin: 0 auto;
  }

  .navi_fir a {
    padding: 1.2rem 3rem 1.2rem 1rem;
    margin: 0 auto;
  }

  .nav_depth span {
    float: none;
    display: block;
  }

  .product_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  #footer {
    height: auto;
  }

  .foot_logo {
    float: none;
    padding: 1rem;
    margin: 0 auto;
    text-align: center;
  }

  .copyright {
    float: none;
    padding: 1rem;
    text-align: center;
  }

  .copyright li {
    border: none;
    float: none;
    margin-bottom: 1rem;
  }

  #container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .main_bn_box img {
    height: auto;
  }

  #toggle-nav {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 11px 10px;
    border: 1px solid #d6d3d1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(31, 31, 29, 0.16);
    z-index: 10001;
    cursor: pointer;
    display: block;
  }

  #toggle-nav span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 0 6px;
    border-radius: 2px;
    background: #2f2b27;
  }

  #toggle-nav span:last-child {
    margin-bottom: 0;
  }

  #toggle-nav[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  #toggle-nav[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  #toggle-nav[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* responsive navigation */

  .navi_sec {
    position: static;
    margin: 0 auto !important;
    border: none;
    width: 100%;
    display: none !important;
  }

  .nav_depth > .navi_sec.toggled {
    display: block !important;
    background: #f7f7f5;
    width: 100%;
    z-index: 100000;
  }

  .navi_sec ul {
    min-height: 0;
    padding: 0;
    border-right: none;
  }

  .navi_sec li {
    padding: 0;
    text-align: center;
  }

  .navi_sec li a {
    display: block;
    min-height: 44px;
    padding: 15px 1rem;
    background: none;
  }

  .nav_depth {
    position: relative;
    width: 100%;
    border-top: 1px solid #d6d3d1;
  }

  .ceo_l {
    width: 100%;
  }

  .nav_depth > .fa-angle-down {
    position: absolute;
    right: 4px;
    top: 0;
    width: 48px;
    height: 54px;
    font-size: 20px;
    line-height: 54px;
    text-align: center;
    font-weight: bold;
    z-index: 10001;
    pointer-events: none;
  }
}