@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

p {
  font-size: 13px;
  line-height: 1.7;
  font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

strong, span, a, li, h1, h2, h3, h4 {
  font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

a {
  text-decoration: none;
}
a img {
  border: none;
}

body {
  min-width: 1000px;
}

.note {
  font-size: 12px;
  color: #4c4949;
}

.in {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

.contents {
  min-width: 960px;
  margin: 0 auto;
}

.hover {
  position: relative;
}
.hover .clone {
  position: relative;
}

#global_header {
  background: #fff;
  width: 100%;
  height: 55px;
}
#global_header .in .logo {
  position: absolute;
  left: 0;
  top: 7px;
}
#global_header .in nav {
  width: 465px;
  margin-left: auto;
}
#global_header .in nav ul {
  overflow: hidden;
  padding-top: 18px;
}
#global_header .in nav ul li {
  float: left;
  padding: 3px 0;
  transition: 0.2s;
}
#global_header .in nav ul li:hover {
  opacity: 0.8;
}
#global_header .in nav ul li:first-child {
  border-left: 1px dotted #4b1e08;
  border-right: 1px dotted #4b1e08;
}
#global_header .in nav ul li a {
  padding: 0 15px;
  display: block;
}
#global_header .in nav ul .last a {
  padding: 0;
  position: relative;
  top: -28px;
}
#global_header .button_close {
  cursor: pointer;
}
#global_header .tea_time_plus_navi {
  background: rgba(58, 12, 3, 0.9);
  position: absolute;
  min-width: 1000px;
  width: 100%;
  left: 0;
  top: 55px;
  z-index: 10;
  display: none;
}
#global_header .tea_time_plus_navi .in:before {
  content: '';
  position: absolute;
  border-bottom: 8px solid #3a0c03;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 0;
  left: 585px;
  top: -8px;
  opacity: 0.9;
}
#global_header .tea_time_plus_navi .in ul {
  overflow: hidden;
  padding-top: 15px;
  padding-bottom: 15px;
}
#global_header .tea_time_plus_navi .in ul li {
  float: left;
}
#global_header .tea_time_plus_navi .in ul li a {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 20px;
  padding-left: 20px;
  display: block;
  transition: 0.15s;
}
#global_header .tea_time_plus_navi .in ul li a:hover {
  background: #311104;
}
#global_header .tea_time_plus_navi .in .button_close {
  position: absolute;
  right: 0;
  top: 15px;
}
#global_header .campain_navi {
  background: rgba(58, 12, 3, 0.9);
  position: absolute;
  width: 100%;
  left: 0;
  top: 55px;
  display: none;
  z-index: 10;
}
#global_header .campain_navi .in:before {
  content: '';
  position: absolute;
  border-bottom: 8px solid #3a0c03;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 0;
  left: 740px;
  top: -8px;
  opacity: 0.9;
}
#global_header .campain_navi ul {
  padding: 15px 0;
}
#global_header .campain_navi ul li a {
  display: block;
  padding: 15px 0;
}
#global_header .campain_navi ul li a img {
  display: block;
  margin: 0 auto;
}
#global_header .campain_navi .button_close {
  position: absolute;
  right: 0;
  top: 15px;
}

#main {
  background: url(../images/bg_main.jpg) no-repeat center center;
  height: 504px;
}
#main .in {
  height: 504px;
}
#main .in .logo {
  position: absolute;
  left: 50%;
  margin-left: -137px;
  top: 60px;
}
#main .in .anchor {
  position: absolute;
  left: 50%;
  margin-left: -55px;
  bottom: 35px;
  background: rgba(255, 255, 255, 0.3);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: url(../images/bg_anchor.png) no-repeat center center;
}
#main .in .anchor img {
  position: absolute;
  bottom: 25px;
  left: 50%;
  margin-left: -31.5px;
}
#main .in .btn_rental {
  position: absolute;
  opacity: 0;
  left: 50%;
  bottom: 30px;
  margin-left: 100px;
}

.global_navigation_fix {
  position: fixed !important;
  top: -1px;
  left: 0;
}
.global_navigation_fix .main {
  top: -50px !important;
  opacity: 0 !important;
}
.global_navigation_fix .sub {
  opacity: 1 !important;
  top: -39px !important;
}

#global_navigation {
  background: #4b1e08;
  min-width: 1000px;
  width: 100%;
  height: 39px;
  z-index: 20;
  position: absolute;
}
#global_navigation:after {
  content: '';
  width: 100%;
  height: 50px;
  box-shadow: 0 2px 2px black;
  position: absolute;
  bottom: 0;
  opacity: 0.4;
}
#global_navigation .in {
  overflow: hidden;
  height: 39px;
}
#global_navigation .main {
  transition: 0.22s;
  display: block;
  overflow: hidden;
  top: 0;
  position: relative;
  margin: 0 auto;
  transition: 0.3s;
}
#global_navigation .main li {
  float: left;
  position: relative;
  transition: 0.1s;
  padding: 1px 0;
}
#global_navigation .main li a {
  display: block;
  margin: 7px 0;
  padding: 0 54px;
  border-right: 1px dotted #9a8074;
  position: relative;
  z-index: 2;
}
#global_navigation .main li:first-child a {
  border-left: 1px dotted #9a8074;
}
#global_navigation .main .pr:hover {
  background: #9d6d9d;
}
#global_navigation .main .or:hover {
  background: #e28669;
}
#global_navigation .main .ye:hover {
  background: #d4ac35;
}
#global_navigation .sub {
  opacity: 1;
  top: -80px;
  height: 40px;
  transition: 0.22s;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#global_navigation .sub li {
  position: relative;
  margin-top: 7px;
  float: left;
}
#global_navigation .sub li:hover span {
  transition: 0.15s;
  height: 200% !important;
  bottom: -10px !important;
}
#global_navigation .sub li a {
  display: block;
  z-index: 2;
  position: relative;
  padding: 0 16px;
  border-left: 1px dotted #9a8074;
}
#global_navigation .sub li:first-child:before {
  transition: 0.15s;
  content: '';
  width: 100%;
  height: 40px;
  background: #000;
  position: absolute;
  opacity: 0;
  top: -10px;
}
#global_navigation .sub li:first-child a {
  border-left: 0;
}
#global_navigation .sub li:first-child:hover:before {
  opacity: 1;
}
#global_navigation .sub .detail {
  border-left: 1px dotted #9a8074;
  margin-top: 6px;
}
#global_navigation .sub .detail a {
  padding: 3px 10px;
  margin-left: 10px;
  border-left: 0;
  background: #7d4700;
  border-radius: 20px;
  transition: 0.15s;
}
#global_navigation .sub .detail a:hover {
  background: #8cc11e;
}
#global_navigation .sub .pl_box, #global_navigation .sub .or_box, #global_navigation .sub .ye_box {
  position: absolute;
  max-height: 50px;
  background: #9d6d9d;
  bottom: -10px;
  width: 100%;
  z-index: 1;
}
#global_navigation .sub .or_box {
  background: #e28669;
}
#global_navigation .sub .ye_box {
  background: #d4ac35;
}

#about {
  background: url(../images/bg_about.jpg) no-repeat center top;
  height: 560px;
  position: relative;
  margin-top: 39px;
  overflow: hidden;
}
#about .in h2 {
  position: absolute;
  left: 50%;
  margin-left: -222px;
  top: 65px;
}
#about .in .popup01 {
  position: absolute;
  left: 220px;
  top: 180px;
  opacity: 0;
}
#about .in .popup02 {
  position: absolute;
  left: 285px;
  top: 293px;
  opacity: 0;
}
#about .in .popup03 {
  position: absolute;
  left: 570px;
  top: 170px;
  opacity: 0;
}
#about #pager {
  position: absolute;
  top: 61px;
  right: -50px;
  transition: 0.3s;
  z-index: 20;
}
#about #pager ul li {
  margin-bottom: 1px;
}
#about #pager ul li a {
  transition: 0.2s;
  width: 24px;
  background: rgba(46, 32, 12, 0.5);
  padding: 6px 1px 6px 0;
  display: block;
  position: relative;
}
#about #pager ul li a img {
  display: block;
  margin: 0 auto;
}
#about #pager ul .bw a, #about #pager ul .pl a, #about #pager ul .or a, #about #pager ul .ye a {
  background: #7e4800;
}
#about #pager ul .bw a:after, #about #pager ul .pl a:after, #about #pager ul .or a:after, #about #pager ul .ye a:after {
  position: absolute;
  left: -12px;
  top: 0px;
  content: '';
  border-right: 12px solid #7e4800;
  border-left: 0;
  border-top: 12px solid transparent;
  border-bottom: 13px solid transparent;
}
#about #pager ul .pl a {
  background: #b58cb5;
}
#about #pager ul .pl a:after {
  border-right: 12px solid #b58cb5;
}
#about #pager ul .or a {
  background: #e5997b;
}
#about #pager ul .or a:after {
  border-right: 12px solid #e5997b;
}
#about #pager ul .ye a {
  background: #d3ab34;
}
#about #pager ul .ye a:after {
  border-right: 12px solid #d3ab34;
}
#about .pager_fix {
  position: fixed !important;
  right: 0 !important;
}
#about .request_side {
  cursor: pointer;
  position: absolute;
  right: -350px;
  top: 500px;
  z-index: 20;
  padding: 8px 0;
  transition: 0.3s;
  background: rgba(255, 255, 255, 0.5);
}
#about .request_side .button_request {
  position: absolute;
  left: -25px;
  top: 0px;
}
#about .request_side ul {
  overflow: hidden;
  padding-left: 20px;
}
#about .request_side ul li {
  float: left;
  margin-left: 7px;
}
#about .request_side ul li img {
  position: relative;
  top: 2px;
}
#about .request_fix {
  position: fixed !important;
  right: -290px;
}

.obi {
  min-width: 960px;
  width: 100%;
  background: #9d6d9d;
  height: 35px;
  position: relative;
  z-index: 1;
}
.obi h2 {
  width: 960px;
  display: block;
  margin: 0 auto;
}
.obi h2 img {
  position: relative;
  top: -14px;
}

#lineup {
  margin-bottom: 25px;
}
#lineup #manufacturer {
  background: url(../images/bg_lineup.jpg) no-repeat center top;
  height: 525px;
}
#lineup #manufacturer #manufacturer_list {
  margin-top: 140px;
}
#lineup #manufacturer #manufacturer_list ul {
  overflow: hidden;
  width: 835px;
  margin: 0 auto;
}
#lineup #manufacturer #manufacturer_list ul li {
  float: left;
  opacity: 0;
  position: relative;
  bottom: -10px;
  margin-left: -2px;
}
#lineup #manufacturer #manufacturer_list ul li:first-child {
  margin-left: 0;
}
#lineup #manufacturer #manufacturer_list ul li img {
  position: relative;
}
#lineup #brand {
  padding-top: 10px;
  padding-bottom: 70px;
}
#lineup #brand .brand_list {
  width: 835px;
  margin: 20px auto 0;
}
#lineup #brand .brand_list ul {
  overflow: hidden;
  margin-left: -57px;
  margin-top: -50px;
}
#lineup #brand .brand_list ul li {
  float: left;
  width: 240px;
  margin-left: 57px;
  margin-top: 45px;
  padding-bottom: 20px;
}
#lineup #brand .brand_list ul li dt {
  padding-bottom: 6px;
  border-bottom: 1px dotted #4b1e08;
  margin-bottom: 10px;
}
#lineup #brand .brand_list ul li p {
  height: 80px;
  letter-spacing: -1px;
}
#lineup #brand .brand_list ul li a {
  background: #7d4700;
  width: 228px;
  display: block;
  padding: 8px 0;
  border: 1px solid #fff;
  outline: 4px solid #7d4700;
  margin-left: 4px;
  transition: 0.15s;
}
#lineup #brand .brand_list ul li a:nth-child(2) {
  margin-bottom: 15px;
}
#lineup #brand .brand_list ul li a:hover {
  outline: 4px solid #4b1e08;
}
#lineup #brand .brand_list ul li a img {
  display: block;
  margin: 0 auto;
  top: 50%;
  position: relative;
}
#lineup #brand .brand_list .note {
  margin-top: 15px;
}
#lineup #features {
  background: url(../images/bg_features.jpg) no-repeat center top;
  padding-top: 20px;
  height: 560px;
  padding-bottom: 10px;
}
#lineup #features .note {
  display: block;
  text-align: right;
  width: 930px;
}
#lineup #features .catch {
  padding-top: 40px;
}
#lineup #features ol {
  overflow: hidden;
  margin-bottom: -40px;
  margin: 0 auto;
  width: 830px;
}
#lineup #features ol li {
  float: left;
  position: relative;
  width: 230px;
}
#lineup #features ol li h4 {
  margin-bottom: 20px;
}
#lineup #features ol li h4 img {
  display: block;
  margin: 0 auto;
}
#lineup #features ol li p {
  margin-bottom: 60px;
  line-height: 1.5;
}
#lineup #features ol li p span {
  font-size: 12px;
}
#lineup #features ol li:first-child {
  width: 235px;
}
#lineup #features ol .odd {
  width: 225px;
  float: right;
}
#lineup #features ol .odd p {
  margin-bottom: 0;
}
#lineup #features ol .odd .pic {
  position: relative;
  margin-left: -33px;
}
#lineup #featurers_list {
  position: relative;
  background: #fff;
  padding-top: 30px;
}
#lineup #featurers_list ol {
  position: relative;
  z-index: 2;
  width: 830px;
  margin: 0 auto;
  overflow: hidden;
  padding-left: 30px;
}
#lineup #featurers_list ol li {
  float: left;
  width: 230px;
  position: relative;
}
#lineup #featurers_list ol li h4 {
  margin-bottom: 20px;
}
#lineup #featurers_list ol li h4 img {
  display: block;
  margin: 0 auto;
}
#lineup #featurers_list ol li .note {
  position: absolute;
  bottom: -30px;
  left: -3px;
  width: 110%;
}
#lineup #featurers_list ol .odd {
  float: right;
}
#lineup #featurers_list ol .odd p {
  margin-bottom: 20px;
}
#lineup #featurers_list ol .odd .pic {
  margin-left: -50px;
}
#lineup #featurers_list .product {
  position: absolute;
  top: 0;
  left: 50%;
  width: 220px;
  margin-left: -110px;
}
#lineup #featurers_list .product a {
  margin-top: 10px;
  background: #7d4700;
  width: 228px;
  display: block;
  padding: 8px 0;
  border: 1px solid #fff;
  outline: 4px solid #7d4700;
  margin-left: 4px;
  transition: 0.15s;
  position: relative;
  z-index: 10;
}
#lineup #featurers_list .product a img {
  display: block;
  margin: 0 auto;
}
#lineup #featurers_list .product a:hover {
  outline: 4px solid #4b1e08;
}

#overlay_coffee {
  display: none;
}
#overlay_coffee .bg {
  background: black;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: 10;
}
#overlay_coffee .overlay_contents {
  position: absolute;
  opacity: 0;
  z-index: 11;
  background: #fff;
  overflow: hidden;
  padding: 0 30px 30px;
  left: 50%;
  text-align: center;
  margin-left: -190.5px;
}
#overlay_coffee .overlay_contents img {
  border-bottom: 1px solid #505050;
  padding-bottom: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
#overlay_coffee .overlay_contents strong {
  display: block;
  margin-bottom: 7px;
}

.catch {
  padding-top: 55px;
  margin-bottom: 45px;
}
.catch h3 img {
  display: block;
  margin: 0 auto 18px;
}
.catch .description img {
  display: block;
  margin: 0 auto;
}

#more .obi {
  background: #e28669;
}
#more .tittle {
  background: url(../images/bg_more.jpg) no-repeat center top;
  position: relative;
  width: 100%;
  height: 533px;
}
#more .tittle h3 img {
  position: absolute;
  top: 50px;
  left: 185px;
}
#more .about {
  background: url(../images/bg_more_about.jpg) no-repeat center top;
}
#more .about .in {
  position: relative;
  height: 555px;
}
#more .about .in h3 {
  padding-top: 50px;
}
#more .about .in h3 img {
  display: block;
  margin: 0px auto;
}
#more .about .in .popup01 {
  position: absolute;
  left: 0;
  top: 270px;
  opacity: 0;
}
#more .about .in .popup02 {
  position: absolute;
  left: 300px;
  top: 100px;
  opacity: 0;
}
#more .about .in .popup03 {
  position: absolute;
  left: 500px;
  top: 350px;
  opacity: 0;
}
#more .about .in .popup04 {
  position: absolute;
  left: 770px;
  top: 120px;
  opacity: 0;
}
#more .lineup .more_lineup {
  overflow: hidden;
  margin-left: -12px;
  margin-bottom: 30px;
}
#more .lineup .more_lineup li {
  float: left;
  margin-left: 12px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
#more .lineup .more_lineup li a {
  background: #7d4700;
  display: block;
  margin: 15px auto 0;
  width: 115px;
  height: 33px;
  width: 121px;
  border: 1px solid #fff;
  box-shadow: 0 0 0 4px #7d4700;
  transition: 0.25s;
}
#more .lineup .more_lineup li a:hover {
  box-shadow: 0 0 0 4px #4b1e08;
}
#more .lineup .more_lineup li a img {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 5px;
}
#more .lineup .button {
  display: block;
  width: 360px;
  margin: 0 auto 70px;
  height: 64px;
  background: #8dc21f;
  border-radius: 5px;
  transition: 0.2s;
}
#more .lineup .button:hover {
  background: #648d0f;
}
#more .lineup .button img {
  display: block;
  margin: 0 auto;
  top: 17px;
  position: relative;
}
#more .content {
  border-top: 4px solid #fff;
  position: relative;
  margin-bottom: 200px;
  position: relative;
}
#more .content:after {
  content: '';
  top: 0;
  background: url(../images/bg_wavy_line.png) repeat-x;
  position: absolute;
  width: 100%;
  height: 13px;
}
#more .content p {
  font-size: 14px;
}
#more .content h3 img {
  position: absolute;
  left: 50%;
  top: 50px;
  margin-left: -243.5px;
}
#more .content li {
  height: 561px;
  margin: 0 auto;
}
#more .content li .in {
  width: 710px;
}
#more .content li .in h4 {
  margin-bottom: 15px;
}
#more .content li .in h4 img {
  display: block;
  margin: 0 auto;
}
#more .content li .in p {
  width: 250px;
  margin: 0 auto;
}
#more .bx-pager {
  overflow: hidden;
  width: 77px;
  margin: 0 auto 0;
}
#more .bx-pager .bx-pager-item {
  float: left;
  margin-left: 6px;
}
#more .bx-pager .bx-pager-item a {
  color: red;
  background: #968f85;
  text-decoration: none;
  color: #968f85;
  width: 12px;
  height: 12px;
  display: block;
  font-size: 9px;
  border-radius: 50%;
}
#more .bx-pager .active {
  background: #eba997 !important;
  color: #eba997 !important;
}
#more .bx-viewport {
  margin-bottom: 7px;
}
#more .bx-controls-direction {
  width: 900px;
  margin: 0 auto;
  position: relative;
  display: none;
  margin-top: -300px;
  padding: 0 10px;
}
#more .bx-controls-direction .bx-prev, #more .bx-controls-direction .bx-next {
  position: absolute;
  background: #7d4700;
  border: 2px solid #fff;
  box-shadow: 0px 0px 0px 3px #7d4700;
  height: 48px;
  width: 48px;
  display: block;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
}
#more .bx-controls-direction .bx-prev:before, #more .bx-controls-direction .bx-next:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
#more .bx-controls-direction .bx-prev img, #more .bx-controls-direction .bx-next img {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  transition: 0.25s;
}
#more .bx-controls-direction .bx-prev {
  left: 10px;
}
#more .bx-controls-direction .bx-prev img {
  right: 0;
}
#more .bx-controls-direction .bx-prev:hover {
  box-shadow: 0px 0px 0px 10px #fff;
  background: #4b1e08;
}
#more .bx-controls-direction .bx-prev:hover img {
  right: 5px;
}
#more .bx-controls-direction .bx-next {
  right: 10px;
}
#more .bx-controls-direction .bx-next img {
  left: 0;
}
#more .bx-controls-direction .bx-next:hover {
  box-shadow: 0px 0px 0px 10px #fff;
  background: #4b1e08;
}
#more .bx-controls-direction .bx-next:hover img {
  left: 5px;
}
#more .bx-controls-direction .act_prev {
  box-shadow: 0px 0px 0px 10px #fff;
  background: #4b1e08;
}
#more .bx-controls-direction .act_prev img {
  right: 5px;
}
#more .bx-controls-direction .act_next {
  box-shadow: 0px 0px 0px 10px #fff;
  background: #4b1e08;
}
#more .bx-controls-direction .act_next img {
  left: 5px;
}
#more .slide01 {
  background: url(../images/slider/bg_more_content_slide01.jpg) no-repeat center top;
}
#more .slide01 .box {
  position: absolute;
  right: 0;
  top: 135px;
}
#more .slide02 {
  background: url(../images/slider/bg_more_content_slide02.jpg) no-repeat center top;
}
#more .slide02 .box {
  position: absolute;
  left: 0;
  top: 300px;
}
#more .slide03 {
  background: url(../images/slider/bg_more_content_slide03.jpg) no-repeat center top;
}
#more .slide03 .box {
  position: absolute;
  right: 0;
  top: 170px;
}
#more .slide03 .box h4 {
  margin-bottom: 10px;
}
#more .slide03 .box p {
  width: 250px;
  margin: 0 auto;
}
#more .slide04 {
  background: url(../images/slider/bg_more_content_slide04.jpg) no-repeat center top;
}
#more .slide04 .box {
  position: absolute;
  right: 0;
  top: 140px;
}
#more #bx-pager {
  position: absolute;
  z-index: 100;
  overflow: hidden;
  left: 50%;
  bottom: -120px;
  width: 790px;
  z-index: 1;
  margin-left: -395px;
}
#more #bx-pager a {
  width: 196px;
  height: 182px;
  display: block;
  float: left;
  transition: 0.25s;
  transform: scale(0.9);
}
#more #bx-pager a:hover {
  transform: scale(1);
}
#more #bx-pager .pager01 {
  background: url(../images/slider/btn_bx_pager_01_off.png);
}
#more #bx-pager .pager01:hover {
  background: url(../images/slider/btn_bx_pager_01_on.png);
}
#more #bx-pager .p01act {
  background: url(../images/slider/btn_bx_pager_01_on.png);
}
#more #bx-pager .pager02 {
  background: url(../images/slider/btn_bx_pager_02_off.png);
}
#more #bx-pager .pager02:hover {
  background: url(../images/slider/btn_bx_pager_02_on.png);
}
#more #bx-pager .p02act {
  background: url(../images/slider/btn_bx_pager_02_on.png);
}
#more #bx-pager .pager03 {
  background: url(../images/slider/btn_bx_pager_03_off.png);
}
#more #bx-pager .pager03:hover {
  background: url(../images/slider/btn_bx_pager_03_on.png);
}
#more #bx-pager .p03act {
  background: url(../images/slider/btn_bx_pager_03_on.png);
}
#more #bx-pager .pager04 {
  background: url(../images/slider/btn_bx_pager_04_off.png);
}
#more #bx-pager .pager04:hover {
  background: url(../images/slider/btn_bx_pager_04_on.png);
}
#more #bx-pager .p04act {
  background: url(../images/slider/btn_bx_pager_04_on.png);
}
#more #bx-pager .active {
  transform: scale(1);
}

#benefit .obi {
  background: #d4ac35;
}
#benefit .tittle {
  background: url(../images/bg_benefit_tittle.jpg) no-repeat center top;
  height: 529px;
}
#benefit .tittle h3 {
  position: absolute;
  left: 0;
  top: 150px;
}
#benefit .tittle nav {
  position: absolute;
  right: 45px;
  top: 100px;
}
#benefit .tittle nav ul li {
  position: relative;
  margin-bottom: -17px;
}
#benefit .tittle nav ul li a {
  position: relative;
}
#benefit .tittle nav ul li a img {
  position: relative;
  opacity: 0;
  bottom: -15px;
}
#benefit .tittle nav ul .odd {
  left: 35px;
  margin-bottom: -25px;
}
#benefit .comparison {
  position: relative;
}
#benefit .comparison:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 13px;
  top: -13px;
  left: 0;
  background: url(../images/bg_wavy_line_top.png) repeat-x;
}
#benefit .comparison .catch {
  margin-bottom: -40px;
  position: relative;
  z-index: 1;
}
#benefit .comparison .graph {
  width: 872px;
  height: 491px;
  margin: 0 auto;
  background: url(../images/bg_benefit_tittle_comparison_graph.jpg) no-repeat center top;
  position: relative;
}
#benefit .comparison .graph .popup {
  position: absolute;
  right: -60px;
  top: 85px;
  width: 0;
  height: auto;
}
#benefit .comparison .graph span {
  display: block;
  width: 95px;
  background: rgba(74, 29, 7, 0.4);
  position: absolute;
  left: 390px;
  height: 0px;
  bottom: 216px;
}
#benefit .comparison .graph span img {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -32px;
}
#benefit .comparison .graph .gage02 {
  left: 505px;
  height: 0;
}
#benefit .comparison .graph .gage03 {
  left: 620px;
  height: 0;
}
#benefit .comparison .graph .gage04 {
  left: 745px;
  height: 0;
  background: #4a1d07;
}
#benefit .comparison .note {
  position: absolute;
  left: 350px;
  bottom: 60px;
}
#benefit .about {
  background: url(../images/bg_benefit_about.jpg) no-repeat center top;
  height: 555px;
}
#benefit .about iframe {
  position: absolute;
  left: 0px;
  top: 200px;
  width: 465px;
  height: 300px;
}
#benefit .lineup {
  background: red;
  height: 570px;
}
#benefit .functions {
  background: url(../images/bg_benefit_functions.jpg) no-repeat center top;
  padding-top: 70px;
  height: 585px;
}
#benefit .functions h3 img {
  display: block;
  margin: 0 auto;
}
#benefit .functions ol {
  position: relative;
  width: 640px;
  left: 315px;
  top: 35px;
}
#benefit .functions ol li {
  position: relative;
  padding-left: 190px;
}
#benefit .functions ol li h4 {
  margin-bottom: 15px;
}
#benefit .functions ol li p {
  width: 300px;
  margin-left: 100px;
}
#benefit .functions ol li .pic {
  position: absolute;
  left: 90px;
  top: 90px;
}
#benefit .functions ol li:first-child {
  padding-left: 0;
  margin-bottom: 75px;
}
#benefit .functions ol li:first-child .pic {
  top: 0;
  left: 420px;
}
#benefit .functions .note {
  width: 880px;
  text-align: right;
  display: block;
  margin: 0 auto;
  margin-top: 80px;
}
#benefit .products {
  position: relative;
  padding-bottom: 90px;
}
#benefit .products:before {
  position: absolute;
  width: 100%;
  content: '';
  height: 13px;
  background: url(../images/bg_wavy_line_top.png) repeat-x;
  top: -13px;
  z-index: 10;
}
#benefit .products:after {
  position: absolute;
  bottom: -13px;
  content: '';
  background: url(../images/bg_wavy_line.png) repeat-x;
  width: 100%;
  height: 13px;
}
#benefit .products .mb20 {
  margin-bottom: 20px;
}
#benefit .products .products_list {
  overflow: hidden;
  margin-left: -80px;
  margin-bottom: 100px;
}
#benefit .products .products_list li {
  float: left;
  width: 177px;
  margin-left: 80px;
  padding-bottom: 15px;
}
#benefit .products .products_list li a {
  background: #7d4700;
  display: block;
  margin: 15px auto 0;
  width: 170px;
  height: 33px;
  border: 1px solid #fff;
  box-shadow: 0 0 0 4px #7d4700;
  transition: 0.25s;
}
#benefit .products .products_list li a:hover {
  box-shadow: 0 0 0 4px #4b1e08;
}
#benefit .products .products_list li a img {
  position: relative;
  top: 1px;
}
#benefit .products .products_list li img {
  display: block;
  margin: 0 auto;
}
#benefit .products .products_list02 {
  overflow: hidden;
  margin-left: -80px;
  width: 600px;
  margin: 50px auto;
}
#benefit .products .products_list02 li {
  float: left;
  width: 177px;
  margin-left: 80px;
  padding-bottom: 5px;
}
#benefit .products .products_list02 li a {
  background: #7d4700;
  display: block;
  margin: 15px auto 0;
  width: 170px;
  height: 33px;
  border: 1px solid #fff;
  box-shadow: 0 0 0 4px #7d4700;
  transition: 0.25s;
}
#benefit .products .products_list02 li a:hover {
  box-shadow: 0 0 0 4px #4b1e08;
}
#benefit .products .products_list02 li a img {
  position: relative;
  top: 6px;
}
#benefit .products .products_list02 li img {
  display: block;
  margin: 0 auto;
}
#benefit .products .note {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-bottom: 50px;
}
#benefit .products .button_list {
  width: 820px;
  margin: 0 auto 0px;
}
#benefit .products .button_list ul {
  overflow: hidden;
  margin-left: -35px;
}
#benefit .products .button_list ul li {
  float: left;
  margin-left: 35px;
}
#benefit .products .button_list ul li a {
  display: block;
  background: #8dc21f;
  width: 250px;
  height: 65px;
  border-radius: 5px;
  transition: 0.15s;
}
#benefit .products .button_list ul li a:hover {
  background: #648d0f;
}
#benefit .products .button_list ul li a img {
  display: block;
  margin: 0 auto;
  position: relative;
  top: 12px;
}
#benefit .products .button_list ul .one a img {
  position: relative;
  top: 18px;
}

footer aside {
  padding-top: 60px;
  padding-bottom: 30px;
  background: #e0dad6;
  border-top: 4px solid #fff;
}
footer aside .banner {
  display: block;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #fff;
}
footer aside .banner img {
  display: block;
  margin: 0 auto;
  transition: 0.15s;
}
footer aside .banner img:hover {
  opacity: 0.8;
}
footer aside .box {
  overflow: hidden;
}
footer aside .box .left {
  float: left;
  width: 363px;
}
footer aside .box .left img {
  margin-bottom: 5px;
}
footer aside .box .left span {
  display: block;
  font-size: 13px;
}
footer aside .box .right {
  float: right;
  width: 390px;
}
footer aside .box .right a {
  background: #8dc21f;
  border-radius: 5px;
  display: block;
  transition: 0.15s;
}
footer aside .box .right a:hover {
  background: #648d0f;
}
footer aside .box .right a img {
  display: block;
  margin: 0 auto;
  padding: 25px 0;
}
footer .content {
  background: #4b1e08;
  padding-top: 40px;
  position: relative;
  padding-bottom: 35px;
}
footer .content .buttno_back_top {
  position: absolute;
  left: 50%;
  display: block;
  margin-left: -21px;
  top: -44px;
  background: #4b1e08;
  width: 88px;
  padding: 23px 0;
  border-radius: 50%;
  transition: 0.15s;
}
footer .content .buttno_back_top:hover {
  background: #2e200c;
}
footer .content .buttno_back_top img {
  display: block;
  margin: 0 auto;
}
footer .content .logo {
  position: absolute;
  left: 0;
}
footer .content nav {
  width: 700px;
  margin-left: auto;
  color: #fff;
}
footer .content nav p {
  margin-bottom: 30px;
}
footer .content nav .box {
  overflow: hidden;
}
footer .content nav .box .left {
  width: 250px;
  float: left;
}
footer .content nav .box .left strong {
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}
footer .content nav .box .left img {
  transition: 0.15s;
}
footer .content nav .box .left img:hover {
  opacity: 0.8;
}
footer .content nav .box .right {
  float: right;
  width: 420px;
}
footer .content nav .box .right ul {
  overflow: hidden;
}
footer .content nav .box .right ul li {
  float: left;
  width: 210px;
  padding-left: 15px;
  height: 25px;
  line-height: 25px;
  background: url(../images/bg_footer_content_li.png) repeat-y left top;
}
footer .content nav .box .right ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  position: relative;
  padding-left: 10px;
  display: block;
  transition: 0.15s;
}
footer .content nav .box .right ul li a:hover {
  opacity: 0.8;
}
footer .content nav .box .right ul li a:before {
  content: '';
  border-left: 5px solid #8dc21f;
  border-right: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  display: block;
  position: absolute;
  left: 0;
  top: 8px;
}
footer .content nav .box .right ul .odd {
  width: 160px;
}
footer .copy {
  background: #2e200c;
  overflow: hidden;
  padding: 10px 0;
}
footer .copy .left {
  float: left;
  color: #fff;
}
footer .copy .left span {
  font-size: 8px;
  margin-left: 10px;
}
footer .copy .right {
  float: right;
}
footer .copy .right ul {
  margin-right: -13px;
}
footer .copy .right ul li {
  float: left;
  border-left: 1px solid #fff;
  height: 20px;
}
footer .copy .right ul li a {
  font-size: 10px;
  color: #fff;
  position: relative;
  top: -3px;
  padding: 0 13px;
  transition: 0.15s;
}
footer .copy .right ul li a:hover {
  opacity: 0.8;
}

#overlay_server {
  display: none;
}
#overlay_server .close {
  position: absolute;
  left: 900px;
  top: 20px;
  cursor: pointer;
  z-index: 100;
}
#overlay_server .bg {
  background: black;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: 10;
}
#overlay_server .overlay_contents {
  opacity: 0;
  width: 960px;
  left: 50%;
  margin-left: -475px;
  background: #fff;
  position: absolute;
  z-index: 11;
  padding-bottom: 30px;
}
#overlay_server .content {
  width: 720px;
  margin: 0 auto;
  padding: 50px 0;
}
#overlay_server .content h4 {
  font-size: 18px;
  margin-bottom: 10px;
}
#overlay_server .content .spec {
  font-size: 12px;
  color: #646464;
}
#overlay_server .content .spec span {
  position: relative;
  top: -25px;
  margin-right: 5px;
}
#overlay_server .content .spec strong {
  position: relative;
  top: -13px;
  margin-left: 5px;
  font-size: 13px;
  color: #2e200c;
}
#overlay_server .content .spec a {
  cursor: pointer;
}
#overlay_server .content .spec li {
  margin-bottom: 3px;
}
#overlay_server .left {
  float: left;
  width: 460px;
}
#overlay_server .right {
  float: right;
}
#overlay_server .box {
  font-size: 12px;
  color: #646464;
  margin-top: 10px;
}
#overlay_server .box strong {
  display: block;
  font-size: 14px;
  color: #000;
  margin-bottom: 5px;
}
#overlay_server .box strong span {
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 5px;
  font-weight: normal;
}

#overlay_tea {
  display: none;
}
#overlay_tea .bg {
  background: black;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: 10;
}
#overlay_tea .ov {
  opacity: 0;
  width: 960px;
  margin-left: -480px;
  left: 50%;
  position: absolute;
  z-index: 11;
  background: url(../images/overlay_tea/btn_close.png) no-repeat 900px 20px #fff;
}
#overlay_tea .overlay_contents .pic {
  position: absolute;
  left: 0;
  top: 0;
}
#overlay_tea .overlay_contents .material {
  position: absolute;
  top: 50px;
  right: 90px;
}
#overlay_tea .overlay_contents .description {
  text-align: center;
  font-size: 16px;
  display: block;
}
#overlay_tea .overlay_contents h4 img {
  display: block;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 10px;
}
#overlay_tea .overlay_contents .header {
  margin-bottom: 50px;
}
#overlay_tea .overlay_contents .content {
  width: 820px;
  padding-bottom: 40px;
  margin: 0 auto;
}
#overlay_tea .overlay_contents .content ul {
  overflow: hidden;
  margin-left: -25px;
}
#overlay_tea .overlay_contents .content ul li {
  margin-left: 11px;
  float: left;
  width: 200px;
  min-height: 305px;
}
#overlay_tea .overlay_contents .content ul li img {
  border-bottom: 1px solid #505050;
  margin: 0 auto;
  padding-bottom: 5px;
  margin-bottom: 10px;
  display: block;
}
#overlay_tea .overlay_contents .content ul li p {
  text-align: center;
  font-size: 14px;
}
#overlay_tea .overlay_contents .content ul li strong {
  display: block;
  color: #505050;
}
#overlay_tea .mugi .content ul,
#overlay_tea .roncha .content ul,
#overlay_tea .sencha .content ul {
  width: 635px;
  margin: 0 auto;
}
#overlay_tea .miso .content ul,
#overlay_tea .sports .content ul {
  width: 450px;
  margin: 0 auto;
}
#overlay_tea .miso .note {
  display: block;
  margin-top: 20px;
  text-align: center;
}
#overlay_tea .sup {
  font-size: 70%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
}
.cmn-cookie {
  display: flex;
  display: none;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(75, 31, 8, 0.9);
  padding: 28px 105px;
  align-items: center;
  -moz-column-gap: 38px;
       column-gap: 38px;
}

@media (max-width: 1100px) {
  .cmn-cookie {
    padding: 23px 20px;
    flex-direction: column;
    row-gap: 12px;
  }
}

.cmn-cookie--desc {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 425px) {
  .cmn-cookie--desc {
    font-size: 12px;
  }
}

.cmn-cookie_nav {
  --my_color: #95BE43;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (172px)[2];
  grid-template-columns: repeat(2, 172px);
  align-items: center;
  -moz-column-gap: 15px;
       column-gap: 15px;
}

@media (max-width: 425px) {
  .cmn-cookie_nav {
    -ms-grid-columns: (130px)[2];
    grid-template-columns: repeat(2, 130px);
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}

.cmn-cookie_nav--link {
  padding-top: 9px;
  padding-bottom: 11px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 9999px;
  color: var(--my_color);
  border: 2px solid var(--my_color);
  background-color: #fff;
  transition: 0.2s;
}
.cmn-cookie_nav--link:hover {
  color: #fff;
  border-color: #fff;
  background-color: var(--my_color);
}

.cmn-cookie_nav--link-ok {
  color: #fff;
  border-color: #fff;
  background-color: var(--my_color);
}

@media (max-width: 425px) {
  .cmn-cookie_nav--link {
    padding-top: 6px;
    padding-bottom: 7px;
    font-size: 12px;
    border-width: 1px;
  }
}