@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/*---------------------------------
  general
---------------------------------*/
.flex {
  display: flex;
}

/*---------------------------------
  common
---------------------------------*/
#main_contents {
  display: block;
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;

}
#main_contents .inner {
  width: 1000px;
  padding: 0;
}
#main_contents h2 {
  text-align: center;
  font-family: 'Averia Serif Libre', cursive;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.foods_btn,
.goods_btn {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 26px;
  padding: 30px 197px;
  color: #fff;
  border-radius: 999px;
  background-image: url(../img/arrow-long-right.svg);
  background-repeat: no-repeat;
  background-position: right 40px center;
  display: block;
}
#index .foods_btn {
  background-image: url(../img/arrow-long-right-or.svg);
  border: 4px solid #E19C01;
  color: #E19C01;
  pointer-events: none;
}
#index .goods_btn {
  background-color: #689288;
}
#index .goods_btn:hover {
  background-color: #537c73;
  opacity: 1;
}
#goods .foods_btn {
  background-color: #E19C01;
}
#goods .foods_btn:hover {
  background-color: #cc8f00;
  opacity: 1;
}
#goods .goods_btn {
  background-image: url(../img/arrow-long-right-bl.svg);
  border: 4px solid #689288;
  color: #689288;
  pointer-events: none;
}

/*---------------------------------
  parts
---------------------------------*/
/* main_v */
#main_v {
  margin-top: 105px;
}
#main_v h1 img {
  width: 100%;
}

/* anker */
#anker {
  align-items: center;
  justify-content: center;
  padding: 100px 0 140px;
}
#anker ul {
  align-items: center;
  justify-content: center;
}
#anker ul li {
  margin: 0 28px;
}

/* brands */
#brands {
  padding: 30px 0 145px;
}
#brands h2 {
  margin-bottom: 45px;
}
#brands ul .slick-prev,
#brands ul .slick-next {
  width: 40px;
  height: 40px;
}
#brands ul .slick-prev {
  left: -85px;
}
#brands ul .slick-next {
  right: -85px;
}
#brands ul .slick-prev:hover,
#brands ul .slick-next:hover {
  opacity: 0.7;
}
#brands ul li a:hover img {
  opacity: 0.7;
}

/* items */
#items {
  padding: 160px 0 115px;
  position: relative;
}
#items [class^="bg_img"] {
  position: absolute;
}
#index #items {
  background-color: #FFF8EE;
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgb(255 243 219) 26px, rgb(255 243 219) 26px, transparent 27px, transparent 51px, rgb(255 243 219) 52px, rgb(255 243 219) 52px, transparent 53px, transparent 77px, rgb(255 243 219) 78px, rgb(255 243 219) 78px, transparent 79px, transparent 103px, rgb(255 243 219) 104px, rgb(255 243 219) 104px, transparent 105px, transparent 129px, rgb(255 243 219) 130px, rgb(255 243 219) 130px), repeating-linear-gradient(to right, transparent 25px, rgb(255 243 219) 26px, rgb(255 243 219) 26px, transparent 27px, transparent 51px, rgb(255 243 219) 52px, rgb(255 243 219) 52px, transparent 53px, transparent 77px, rgb(255 243 219) 78px, rgb(255 243 219) 78px, transparent 79px, transparent 103px, rgb(255 243 219) 104px, rgb(255 243 219) 104px, transparent 105px, transparent 129px, rgb(255 243 219) 130px, rgb(255 243 219) 130px);
}
#index #items .bg_img01 {
  top: -90px;
  left: calc(50% - 690px);
  max-width: 340px;
}
#index #items .bg_img02 {
  top: 610px;
  left: calc(50% + 445px);
  max-width: 275px;
}
#index #items .bg_img03 {
  top: 1615px;
  left: calc(50% - 660px);
  max-width: 165px;
}
#goods #items {
  background-color: #E7EFED;
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgb(220 231 229) 26px, rgb(220 231 229) 26px, transparent 27px, transparent 51px, rgb(220 231 229) 52px, rgb(220 231 229) 52px, transparent 53px, transparent 77px, rgb(220 231 229) 78px, rgb(220 231 229) 78px, transparent 79px, transparent 103px, rgb(220 231 229) 104px, rgb(220 231 229) 104px, transparent 105px, transparent 129px, rgb(220 231 229) 130px, rgb(220 231 229) 130px), repeating-linear-gradient(to right, transparent 25px, rgb(220 231 229) 26px, rgb(220 231 229) 26px, transparent 27px, transparent 51px, rgb(220 231 229) 52px, rgb(220 231 229) 52px, transparent 53px, transparent 77px, rgb(220 231 229) 78px, rgb(220 231 229) 78px, transparent 79px, transparent 103px, rgb(220 231 229) 104px, rgb(220 231 229) 104px, transparent 105px, transparent 129px, rgb(220 231 229) 130px, rgb(220 231 229) 130px);
}
#goods #items .bg_img01 {
  top: -12px;
  left: calc(50% - 473px);
}
#goods #items .bg_img02 {
  top: 480px;
  left: calc(50% + 500px);
  max-width: 150px;
}
#goods #items .bg_img03 {
  top: 1140px;
  left: calc(50% - 710px);
  max-width: 160px;
}
#goods #items .bg_img04 {
  top: 1588px;
  left: calc(50% + 500px);
  max-width: 160px;
}
#items h2 {
  margin-bottom: 70px;
  padding-left: 5px;
  position: absolute;
  top: -37px;
  left: 50%;
  transform: translateX(-50%);
}
#index #items h2 {
  border-bottom: 5px solid #E19C01;
}
#goods #items h2 {
  border-bottom: 5px solid #689288;
}
#items .item_list {
  flex-wrap: wrap;
  z-index: 2;
}
#items .item_list::after {
  content: none;
}
#items .item_list .item {
  padding-bottom: 28px;
  position: relative;
  text-align: center;
  background-color: #fff;
  width: 31.2%;
}
#items .item_list .item + .item {
  margin-left: 3.2%;
}
#items .item_list .item:nth-of-type(3n+1) {
  margin-left: 0;
}
#items .item_list .item:nth-of-type(n+4) {
  margin-top: 115px;
}
#items .item_list .item:hover::after {
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  border-width: 6px;
  border-style: solid;
  border-bottom: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
#index #items .item_list .item:hover::after {
  border-color: #ffecd0;
}
#goods #items .item_list .item:hover::after {
  border-color: #d8e7e4;
}
#items .item_list .item .txt {
  padding: 20px 0 17px;
}
#items .item_list .item .txt h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px !important;
  font-weight: bold;
  color: #c71233;
  margin-bottom: 12px;
}
#items .item_list .item .txt p {
  font-size: 16px;
  line-height: 1.3125;
}

/* btns */
#items .btns {
  justify-content: space-between;
  position: absolute;
  width: 100%;
  bottom: -15px;
}
#items .btns li {
  width: 100%;
}
#items .btns .product_info {
  margin-left: 1px;
}
#items .btns :nth-of-type(1) {
  margin-left: 5px;
  margin-right: 10px;
}
#items .btns :nth-of-type(2) {
  margin-right: 15px;  
}
#items .btns li a {
  border-radius: 999px;
  color: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
  font-size: 16px;
  font-weight: bold;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0.5em 0;
  z-index: 2;
}
#items .btns li a span {
  position: relative;
  top: -1px;
}
#items .btns li a:hover {
  opacity: 1 !important;
}
#index #items .btns li:nth-of-type(1) a {
  background: #E4A001;
}
#index #items .btns li:nth-of-type(1) a:hover {
  background: #cc8f00;
}
#goods #items .btns li:nth-of-type(1) a {
  background: #689288;
}
#goods #items .btns li:nth-of-type(1) a:hover {
  background: #59857a;
}
#items .btns li:nth-of-type(1) a span {
  margin-left: 8px;
  margin-right: 0;
}
#items .btns li:nth-of-type(1) a img {
  position: relative;
  top: -1px;
}
#items .btns .product_info a {
  background-image: url(../img/arrow-right-white.svg) !important;
  background-color: #6a6a68 !important;
  background-size: 13px 13px !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
#items .btns .product_info a:hover {
  background-color: #000 !important;
}
#items .btns .product_info a span {
  left: -5px !important;
}

/* cate */
#items .item_list .item .cate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -25px;
  display: flex;
  z-index: 2;
}
#items .item_list .item .cate span {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-position: center top 37%;
  color: #fff;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: bold;
  background-repeat: no-repeat;
}
#items .item_list .item .cate span + span {
  margin-left: 7px;
}
#items .item_list .item .cate .dog {
  background-color: #3e4697;
  background-image: url(../img/icon-dog.svg);
}
#items .item_list .item .cate .cat {
  background-color: #ed981e;
  background-image: url(../img/icon-cat.svg);
}

/* colorbox */
#cboxOverlay {
  background-color: #000 !important;
}
#colorbox,
#cboxOverlay,
#cboxWrapper,
#cboxContent {
  overflow: visible !important;
}
#cboxMiddleLeft,
#cboxMiddleRight,
#cboxBottomCenter,
#cboxTopCenter {
  display: none;
}
#cboxContent {
  background-color: #000 !important;
}
#cboxLoadedContent {
  margin-bottom: 0 !important;
}
#colorbox {
  max-width: 100%;
}
#cboxClose {
  display: none !important;
}

/* movie-modal */
.movie-modal {
  display: none;
}
.movie-modal-content {
  max-width: 678px;
  background-color: #000;
}
.movie-area {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 56.25%;
  margin-bottom: 5%;
}
.movie-area iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.movie-select {
  justify-content: center;
  flex-wrap: wrap;
}
.movie-select li + li {
  margin-left: 2.5%;
}
.movie-select li:nth-of-type(3n+1) {
  margin-left: 0;
}
.movie-select li:nth-of-type(n+4) {
  margin-top: 2.5%;
}
.movie-select li a {
  font-size: 18px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  padding: 0.6em 3em;
  display: block;
}
.movie-select li a:hover {
  opacity: 1;
}
#index .movie-select li a {
  background-color: #97ae02;
}
#index .movie-select li a:hover {
  background-color: #417a05;
}
#goods .movie-select li a {
  background-color: #d48e34;
}
#goods .movie-select li a:hover {
  background-color: #da7b00;
}
.btn_close {
  position: absolute;
  bottom: inherit !important;
  top: -100px;
  right: -80px;
  background-image: url(../img/close.svg)!important;
  width: 44px !important;
  height: 44px !important;
  background-size: contain;
  background-repeat: no-repeat;
}

/* link */
#link {
  background-color: transparent;
  text-align: center;
  padding: 120px 0 0;
}
#link ul {
  justify-content: center;
}

/* banner */
#banner {
  background: #fff;
  padding: 66px 0 72px;
}
#banner ul {
  justify-content: center;
  flex-wrap: wrap;
}
#banner ul li {
  width: 48%;
  margin: 0 20px 20px 0;
}
/*#banner ul li.full-width {
  width: 100%;
  text-align: center;
}
#banner ul li.full-width img {
  max-width: 49%;
}*/

@media screen and (max-width:768px) {

  /*---------------------------------
    common
  ---------------------------------*/
  #main_contents .inner {
    width: 100%;
    padding: 0 5%;
    position: relative;
  }
  #main_contents h2 {
    font-size: 8vw;
  }
  .foods_btn,
  .goods_btn {
    padding: 7vw 0;
    width: 100%;
    text-align: center;
    font-size: 4.26666667vw;
  }
  #index .goods_btn,
  #index .foods_btn,
  #goods .foods_btn,
  #goods .goods_btn {
    background-size: 10vw;
    background-position: center right 4vw;
  }


  /*---------------------------------
    parts
  ---------------------------------*/

  /* main_v */
  #main_v {
    margin-top: 12.8vw;
  }

  /* anker */
  #anker {
    padding: 6vw 0;
  }
  #anker .inner {
    padding: 0 2%;
  }
  #anker ul {
    justify-content: space-between;
  }
  #anker ul li {
    margin: 0;
    width: 49%;
  }

  /* brands */
  #brands {
    padding: 5vw 0 15vw;
  }
  #brands h2 {
    margin-bottom: 4vw;
  }
  #brands ul li {
    margin: 0 1vw;
  }
  #brands ul .slick-prev,
  #brands ul .slick-next {
    width: 4vw;
    height: 4vw;
  }
  #brands ul .slick-prev {
    left: -4.5vw;
  }
  #brands ul .slick-next {
    right: -4.5vw;
  }

  /* items */
  #items {
    padding: 15vw 0 0;
  }
  #items .inner {
    width: 100%;
    padding: 90px 0 5%;
  }
  #items #link .inner {
      padding: 0 5% 5%;
  }
  #items [class^="bg_img"] {
    display: none;
  }
  #items h2 {
    margin-bottom: 12vw;
    top: -20px;
  }
  #items .item_list {
    display: block;
  }
  #items .item_list .item {
    width: 100%;
  }
  #items .item_list .item + .item {
    margin-left: 0;
  }
  #items .item_list .item:nth-of-type(n+2) {
    margin-top: 20vw;
  }
  #items .item_list .item .img img {
    width: 100%;
  }
  #items .item_list .item .txt {
    padding: 5vw 0;
  }
  #items .item_list .item .txt h3 {
    font-size: 5.33333333vw;
  }
  #items .item_list .item .txt p {
    font-size: 4.26666667vw;
  }

  /* btn */
  #items .btns {
    position: static;
  }
  #items .btns li a {
    font-size: 4.8vw;
    padding: 0.8em 0;
  }
  #items .btns li a span {
    top: -0.3vw;
  }
  #items .btns li:nth-of-type(1) a img {
    width: 5vw;
    margin-left: 2vw;
  }
  #items .btns li:nth-of-type(2) a {
    background-size: 3.46666667vw !important;
  }
  #items .btns li:nth-of-type(2) a span {
    left: -5px;
  }

  /* cate */
  #items .item_list .item .cate {
    top: -6vw;
  }
  #items .item_list .item .cate span {
    width: 17vw;
    height: 17vw;
    font-size: 3.46666667vw;
    background-size: 9.5vw;
    padding-bottom: 0.5vw;
  }
  #items .item_list .item .cate span + span {
    margin-left: 2vw;
  }

  /* movie-modal */
  #colorbox * {
    overflow: visible !important;
  }
  .movie-area {
    margin-bottom: 5%;
  }
  .movie-area iframe html {
    overflow-y: scroll !important;
  }
  .movie-select::after {
    content: none;
  }
  .movie-select li a {
    font-size: 3vw;
    padding: 0.6em 3em;
  }
  .btn_close {
    right: 2vw;
    width: 10vw !important;
    height: 10vw !important;
    top: -21vw;
  }

  /* link */
  #link {
    padding: 10vw 0;
  }
  #link ul li {
    width: 100%;
  }

  /* banner */
  #banner {
    padding: 4vw 0;
  }
  #banner ul {
    display: block;
  }
  #banner ul li {
    width: 100%;
  }
  #banner ul li + li {
    margin-top: 4vw;
  }
}