/* ==========================================================================
   Index
   ========================================================================== */
/* adjust
  ========================================================================== */
.content_inner {
  padding-top: 0;
}
.mainvisual + .section {
  margin-top: 0;
  padding-top: 80px;
}
.button01 {
    position: absolute;
    left: 50px;
    bottom: 300px;
}

.button02 {
    position: absolute;
    bottom: 250px;
    left: 500px;

}
.button03 {
    position: absolute;
    bottom: 300px;
    right: 50px;

}
@media screen and (max-width: 767px) {
  .mainvisual + .section,
  .mainvisual + .section.theme-gray {
    padding-top: 16%;
  }
.button01_sp {
    position: absolute;
    bottom: 160px;
    left: 10px;
}
.button02_sp {
    position: absolute;
    bottom: 150px;
    left: 150px;
}
.button03_sp {
    position: absolute;
    bottom: 160px;
    right: 5px;
}
}
/* Common
  ========================================================================== */
/****** index_header ******/
.top-contents-banner{
  text-align:center;
  margin-bottom:30px;
}
.top-contents-banner img{
  width: 340px;
}
.index_header_title,
.index_header_text {
  text-align: center;
}
.index_header_text {
  margin-top: 12px;
  font-size: 1.6rem;
  letter-spacing: .16em;
  color: #637780;
}
@media screen and (max-width: 767px) {
  .index_header_text {
    margin-top: 7px;
    font-size: 1.2rem;
    letter-spacing: .04em;
  }
 .top-contents-banner img{
  width: 255px;
}
}
/* mainvisual
  ========================================================================== */
@-webkit-keyframes logo {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  70% {
    -webkit-transform: scale(1.16);
            transform: scale(1.16);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes logo {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  70% {
    -webkit-transform: scale(1.16);
            transform: scale(1.16);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.mainvisual {
  position: relative;
}
.mainvisual:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 366px;
  height: 150px;
  margin: auto;
  background: url(../img/index_mainvisual_bg02.png) no-repeat center center;
  background-size: contain;
  -webkit-animation: logo 9.4s ease forwards;
          animation: logo 9.4s ease forwards;
  -webkit-transition: opacity 3s ease;
  transition: opacity 3s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.mainvisual.is-initialized:before {
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .mainvisual:before {
    width: 63.73%;
    height: 0;
    padding-top: 26.13%;
  }
}
@-webkit-keyframes line1 {
  0% {
    height: 0;
  }
  100% {
    height: 5.27%;
  }
}
@keyframes line1 {
  0% {
    height: 0;
  }
  100% {
    height: 5.27%;
  }
}
@-webkit-keyframes line2 {
  0% {
    height: 0;
  }
  100% {
    height: 8.79%;
  }
}
@keyframes line2 {
  0% {
    height: 0;
  }
  100% {
    height: 8.79%;
  }
}
@-webkit-keyframes line1_sp {
  0% {
    height: 0;
  }
  100% {
    height: 7.5%;
  }
}
@keyframes line1_sp {
  0% {
    height: 0;
  }
  100% {
    height: 7.5%;
  }
}
@-webkit-keyframes line2_sp {
  0% {
    height: 0;
  }
  100% {
    height: 10%;
  }
}
@keyframes line2_sp {
  0% {
    height: 0;
  }
  100% {
    height: 10%;
  }
}
.mainvisual_inner {
  position: relative;
}
.mainvisual_inner:before,
.mainvisual_inner:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  width: 1px;
  margin: 0 auto;
  z-index: 2;
}
.mainvisual_inner:before {
  top: 94.83%;
  background-color: #fff;
}
.is-initialized .mainvisual_inner:before {
  -webkit-animation: line1 .6s linear forwards;
          animation: line1 .6s linear forwards;
}
.mainvisual_inner:after {
  top: 100%;
  background-color: #003344;
}
.is-initialized .mainvisual_inner:after {
  -webkit-animation: line2 .6s .6s linear forwards;
          animation: line2 .6s .6s linear forwards;
}
@media screen and (max-width: 767px) {
  .mainvisual_inner:before {
    top: 92.5%;
  }
  .is-initialized .mainvisual_inner:before {
    -webkit-animation-name: line1_sp;
            animation-name: line1_sp;
  }
  .mainvisual_inner:after .is-initialized {
    -webkit-animation-name: line2_sp;
            animation-name: line2_sp;
  }
}
.mainvisual_title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(-11.5%, rgba(0, 0, 0, 0.15)), color-stop(29.52%, rgba(48, 48, 48, 0)));
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.15) -11.5%, rgba(48, 48, 48, 0) 29.52%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.15) -11.5%, rgba(48, 48, 48, 0) 29.52%);
  opacity: 0;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}
.is-initialized .mainvisual_title {
  opacity: 1;
}
.mainvisual_title img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}
@media screen and (max-width: 767px) {
  .mainvisual_title {
    top: auto;
    height: auto;
    text-align: center;
    padding: 0 0 15.33%;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(32%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 0));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 0));
  }
  .mainvisual_title img {
    position: relative;
    width: 348px;
  }
}
@media screen and (max-width: 500px) {
  .mainvisual_title {
    padding-bottom: 13.33%;
  }
}
@-webkit-keyframes icon {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes icon {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.mainvisual_image {
  position: relative;
  margin: 0 auto;
  padding-top: 41.67%;
}
.mainvisual_image:after {
  content: '';
  display: block;
  position: absolute;
  top: 86.14%;
  right: 0;
  left: 0;
  width: 100%;
  height: 6.49%;
  margin: 0 auto;
  background: url(../img/index_mainvisual_bg01.png) no-repeat center center;
  background-size: auto 100%;
  z-index: 2;
  -webkit-animation: icon .6s linear forwards;
          animation: icon .6s linear forwards;
}
@media screen and (max-width: 767px) {
  .mainvisual_image {
    padding-top: 100%;
  }
  .mainvisual_image:after {
    top: 82.5%;
    height: 6.75%;
  }
}
.mainvisual_image_inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mainvisual_image_item_wrap {
  opacity: 0;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
}
.mainvisual_image_item_wrap.slick-initialized {
  opacity: 1;
}
@-webkit-keyframes current-slide {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.16);
            transform: scale(1.16);
  }
}
@keyframes current-slide {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.16);
            transform: scale(1.16);
  }
}
.mainvisual_image_item {
  text-align: center;
}
.mainvisual_image_item img {
  width: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 3s ease;
  transition: -webkit-transform 3s ease;
  transition: transform 3s ease;
  transition: transform 3s ease, -webkit-transform 3s ease;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-animation: current-slide 6.6s ease 1;
          animation: current-slide 6.6s ease 1;
}
.mainvisual_image_item.slick-current img {
  -webkit-transition: -webkit-transform 7s ease;
  transition: -webkit-transform 7s ease;
  transition: transform 7s ease;
  transition: transform 7s ease, -webkit-transform 7s ease;
  -webkit-transform: scale(1.16);
      -ms-transform: scale(1.16);
          transform: scale(1.16);
}
/* recommend
  ========================================================================== */
@media screen and (max-width: 767px) {
  .recommend_list > li {
    display: none;
  }
  .recommend_list > li:nth-child(-n+3) {
    display: block;
  }
}
/* products
  ========================================================================== */
.products_list {
  margin-top: 50px;
  font-size: 0;
  text-align: center;
}
.products_list > li {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 33.33%;
  padding: 0 20px;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .products_list {
    margin-top: 40px;
  }
  .products_list > li {
    display: block;
    width: auto;
    margin-top: 40px;
    padding: 0;
  }
  .products_list > li:first-child {
    margin-top: 0;
  }
}
.products_item > a {
  display: block;
}
.products_item > a:hover,
.products_item > a:active {
  text-decoration: none;
}
.products_item_inner {
  position: relative;
  padding-top: 100%;
}
@media screen and (max-width: 767px) {
  .products_item_inner {
    padding-top: 75.36%;
  }
}
.products_item_title {
  margin-top: 9px;
  font-size: 2.4rem;
  font-weight: bold;
  color: #003d4c;
}
@media screen and (max-width: 767px) {
  .products_item_title {
    margin-top: 3px;
    font-size: 2rem;
  }
}
.products_item_image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
}
.products_item_image > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #f5f5f5;
  border-radius: 50%;
  overflow: hidden;
}
.products_item_image > div > img {
  position: absolute;
  right: -9px;
  bottom: 15.67%;
  left: 9px;
  max-width: 91.67%;
  margin: 0 auto;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.products_item_image > figcaption {
  position: absolute;
  top: .67%;
  left: 0;
  width: 41.67%;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.products_item_image > figcaption img {
  max-width: 100%;
}
a:hover .products_item_image > div > img,
a:active .products_item_image > div > img {
  -webkit-transform: scale(1.25);
      -ms-transform: scale(1.25);
          transform: scale(1.25);
}
a:hover .products_item_image > figcaption,
a:active .products_item_image > figcaption {
  -webkit-transform: rotate(-5deg) translateY(-15px);
      -ms-transform: rotate(-5deg) translateY(-15px);
          transform: rotate(-5deg) translateY(-15px);
}
@media screen and (max-width: 767px) {
  .products_item_image {
    padding-top: 75.36%;
  }
  .products_item_image > div {
    width: 75.36%;
    height: 100%;
  }
  .products_item_image > figcaption {
    width: 36.11%;
    left: 12.46%;
  }
  a:hover .products_item_image > div > img {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
  a:hover .products_item_image > figcaption {
    -webkit-transform: rotate(0) translateY(0);
        -ms-transform: rotate(0) translateY(0);
            transform: rotate(0) translateY(0);
  }
}
.opt-beef .products_item_image > div > img {
  right: -3.33%;
  left: 3.33%;
  max-width: 85.33%;
}
.opt-beef .products_item_image > figcaption {
  top: 2.33%;
  width: 35.33%;
}
.opt-prosessedfood .products_item_image > div > img {
  right: -0.67%;
  left: .67%;
  max-width: 78.33%;
}
.opt-prosessedfood .products_item_image > figcaption {
  top: .33%;
  width: 79%;
}
@media screen and (max-width: 767px) {
  .opt-beef .products_item_image > figcaption {
    width: 30.62%;
  }
  .opt-prosessedfood .products_item_image > figcaption {
    width: 68.47%;
  }
}
.products_item_link {
  width: 160px;
  max-width: 100%;
  margin: 0 auto;
}
a:hover .products_item_link > span,
a:active .products_item_link > span {
  background: none;
  border-color: #000;
  color: #000;
}
@media screen and (max-width: 767px) {
  .products_item_link {
    width: 120px;
  }
  a:hover .products_item_link > span {
    background-color: #003d4c;
    border-color: #003d4c;
    color: #fff;
  }
}
/* point
  ========================================================================== */
.point {
  border: 1px solid #003d4c;
  position: relative;
  margin: 34px 5.1% 0;
}
.point > a {
  display: block;
  text-decoration: none;
  color: #333333;
}
@media screen and (max-width: 767px) {
  .point {
    margin: 35px 0 0;
  }
}
.point_inner {
  padding-right: 50%;
}
@media screen and (max-width: 767px) {
  .point_inner {
    padding-top: 54.2%;
    padding-right: 0;
  }
}
.point_detail {
  padding: 31px 25px 36px;
}
@media screen and (max-width: 767px) {
  .point_detail {
    padding-top: 12px;
    padding-bottom: 25px;
  }
}
.point_title {
  display: table;
  position: relative;
  margin: 0 auto;
  padding: 0 31px;
  font-size: 2.4rem;
  text-align: center;
  color: #003d4c;
}
.point_title:before,
.point_title:after {
  content: '';
  display: block;
  position: absolute;
  top: .48em;
  width: 18px;
  height: 14px;
  background: no-repeat center center;
  background-size: 100%;
}
.point_title:before {
  left: 0;
  background-image: url(../img/index_point_bg01.png);
}
.point_title:after {
  right: 0;
  background-image: url(../img/index_point_bg02.png);
}
@media screen and (max-width: 767px) {
  .point_title {
    padding: 0 27px;
    font-size: 2rem;
  }
  .point_title:before,
  .point_title:after {
    width: 16px;
    height: 12px;
  }
}
.point_text {
  margin-top: 15px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .point_text {
    margin-top: 2px;
    text-align: left;
  }
}
.point_link {
  width: 160px;
  margin: 22px auto 0;
}
a:hover .point_link > span,
a:active .point_link > span {
  background-color: #003d4c;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .point_link {
    width: 120px;
    margin-top: 11px;
  }
  a:hover .point_link > span {
    background-color: transparent;
    color: #000;
  }
}
.point_image {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.point_image > img {
  position: absolute;
  top: -100%;
  right: -100%;
  left: -100%;
  bottom: -100%;
  min-width: 200%;
  min-height: 200%;
  margin: auto;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
a:hover .point_image > img,
a:active .point_image > img {
  -webkit-transform: scale(0.63);
      -ms-transform: scale(0.63);
          transform: scale(0.63);
}
@media screen and (max-width: 767px) {
  .point_image {
    right: 0;
    left: 0;
    bottom: auto;
    width: 100%;
    height: 0;
    padding-top: 54.2%;
  }
  a:hover .point_image > img {
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
  }
}
/* about
  ========================================================================== */
.about {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 88px auto 0;
  background-color: #003d4c;
}
@media screen and (max-width: 767px) {
  .about {
    display: block;
    width: auto;
    margin-top: 60px;
  }
}
.about_image {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .about_image {
    display: block;
  }
}
.about_image_inner {
  position: relative;
  padding-top: 57.6%;
}
.about_image_slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.about_image_item {
  text-align: center;
}
.about_image_item img {
  width: 100%;
}
.about_detail {
  display: table-cell;
  padding: 60px 15px;
  vertical-align: middle;
  text-align: center;
  background: url(../img/index_about_bg01.png) no-repeat center 22px;
  background-size: cover;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .about_detail {
    display: block;
    padding: 60px 15px;
    background-size: 129.07%;
  }
}
.about_header > h2 img {
  max-width: 100%;
}
.about_header > p {
  margin-top: 12px;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .about_header > p {
    margin-top: 6px;
    font-size: 1.2rem;
  }
}
.about_text {
  margin-top: 29px;
  letter-spacing: .16em;
}
@media screen and (max-width: 767px) {
  .about_text {
    margin-top: 24px;
    letter-spacing: .04em;
  }
}
.about_link {
  margin: 36px auto 0;
}
.about_link > a {
  width: 320px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .about_link {
    margin-top: 23px;
  }
  .about_link > a {
    width: 315px;
    margin: 0 auto;
  }
}
/* restaurant
  ========================================================================== */
.restaurant_list {
  margin: 34px auto 0;
  font-size: 0;
  text-align: center;
}
.restaurant_list > li {
  display: inline-block;
  width: 50%;
  font-size: 1.4rem;
}
.restaurant_list > li > a {
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  display: block;
}
.restaurant_list > li > a:hover,
.restaurant_list > li > a:active {
  opacity: 0.6;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .restaurant_list > li > a:hover {
    opacity: 1;
  }
}
.restaurant_list > li img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .restaurant_list {
    margin-top: 25px;
  }
  .restaurant_list > li {
    display: block;
    width: auto;
  }
}
/* photolist
  ========================================================================== */
.photo-list {
  margin: 100px auto 0;
  font-size: 0;
  text-align: center;
}
.photo-list:first-child {
  margin-top: 0;
}
.photo-list > li {
  display: inline-block;
  width: 25%;
  font-size: 1.4rem;
  background-color: #000;
  text-align: center;
}
.photo-list > li img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .photo-list {
    max-width: none;
    overflow: hidden;
  }
  .photo-list > li {
    float: left;
    width: 50%;
  }
  .photo-list > li:nth-child(2n+1) {
    clear: left;
  }
}




/* 181226 add */
.mainvisual_title .only-pc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  /* background: rgba(0,0,0,0.4); */
  color: #fff;
  text-align: center;
  /* width: 300px; */
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 35px;
}

@media screen and (max-width: 767px) {
  .mainvisual_title .only-sp {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 15px 30px;
    /* background: rgba(0,0,0,0.4); */
    color: #fff;
    text-align: center;
    width: 300px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 25px;
  }

}