@charset "utf-8";
/* CSS Document */

main {
  border-top: none;
}

/*----------------
メインビジュアル 
------------------*/
#main_v {
  position: relative;
  /*overflow: hidden;
  height: 35vw;
  height: 647px;*/
  background-color:#f1eee9;
}

#main_v .slide_inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  box-sizing: border-box;
}
#main_v h1 {
  text-align: center;
  position: absolute;
  top: 15vw;
  left: 0px;
  z-index: 10;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
#main_v h1 img {
  width: 42.1%;
}

#main_v #video {
  width: 100%;
  top: 0px !important;
  height: 100% !important;
  position: relative;
}
#main_v .scroll {
  font-size: 0px;
  position: absolute;
  bottom: 2vw;
  left: 50%;
  transform: translate(-50%);
  z-index: 10;
  display:none!important;
}

#main_v #main_v_anchor {
  position: absolute;
  bottom: 0px;
  font-size:0px;
}

#main_v .btn{
  position:absolute;
  width:9em;
  z-index: 10;
    bottom: 12rem;
    right: 10px;
  display:none;
}
#main_v .btn a{
  display:block;
  text-align: center;
  color:#FFF;
  padding: 0.38em 1em 0.38em 0.4em;
  border-radius: 0.3em;
  position:relative;
  background-color:#EB0100;
  transition-duration: 0.3s;
}
#main_v .btn a:after{
  content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.25em;
    right: 0.8em;
    width: 0.3em;
    height: 0.3em;
    border-top: 0.15em solid #FFF;
    border-right: 0.15em solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#movie_controller {
  position: absolute;
  z-index: 10;
    bottom: 1rem;
  right: 10px;
  /*height: 38px;*/
}
#movie_controller a {
  font-size: 1.4rem;
  color: #fff;
  font-weight: bold;
  background:url("../img/movie_btn_bg.png");
  padding:0.7rem 1rem;
  border-radius: 0.5rem;
  letter-spacing: 1px;
align-items: center;
  cursor : pointer;
}

#movie_controller img {
  width: 1.643em;
  margin-right:0.3rem;
  vertical-align: middle;
  position:relative;
  top:-1px;
}

#main_v .movieBg-out {
  padding: 0;
  pointer-events: none;
  margin-top: -20vw;
}
#main_v #fade_bg {
  display: block;
  width:100%;
}
#main_v #fade_bg img {
width: 100%;
}

#main_v #fade_bg {
  display: none;
}
#main_v #fade_bg.slick-initialized {
  display: block;
}

#main_v a.btn_stop{
  display:block;
}
#main_v a.btn_play{
display: block;
}
/*----------------
大切なお知らせ 
------------------*/
#news {
  padding: 2rem 0;
}
#news .btn {
  width: 13em;
  padding: 0.3em 0 0.3em 1.5em;
  text-indent: 0px;
  position: relative;
  right: auto;
}
#news .btn:hover {
  opacity: 0.7;
  cursor: pointer;
}
#news .btn:before,
#news .btn:after {
  left: 4em;
  margin-top: -0.15em;
  width: 1em;
  height: 1em;
  border-top: 0.3em solid #3c3c3c;
}

#news .btn.close:after {
  left: 3em;
  margin-top: -0.65em;
}
/*----------------
おすすめコンテンツ
------------------*/
#recommend {
  background: url(../img/bg_recommend.jpg) center center no-repeat;
  padding: 4rem 0 10rem 0;
}
#recommend h2 {
  text-align: center;
  font-size: 2rem;
  color: #EB0100;
  margin-bottom: 3rem;
}
#recommend ul li {
  width: 23.21%;
}
#recommend ul li a {
  display: flex;
  flex-wrap: wrap;
  height: 26.7rem;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: 5.3em;
  /*justify-content:center;*/
  align-items: center;
  font-size: 2.2rem;
  font-family: "Sawarabi Gothic", sans-serif;
  transform: rotate(0.001deg);
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  text-shadow: 0em 0em 1em #000, 0em 0em 1em #000;
  transition-duration: 0.3s;
  transform: rotate(0.0001deg);
  outline: 1px solid transparent;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}
#recommend ul li a:hover {
  transform: scale(1.1);
}
#recommend ul li a span:nth-of-type(1) {
  position: relative;
}
/*#recommend ul li a span:nth-of-type(1):after{
	content:"";
	position:absolute;
	bottom:-0.5em;
	left:50%;
	width:2em;
	margin-left:-1em;
	border-bottom:0.2rem solid #FFF;
}*/
#recommend ul li a span:nth-of-type(2) {
  font-size: 1.7rem;
  font-family: "Sawarabi Gothic", sans-serif;
  transform: rotate(0.001deg);
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  padding: 0.5em 0;
  text-shadow: none;
  color: #3c3c3c;
  font-weight: normal;
}

#recommend ul li:nth-of-type(1) a {
  background: url(../img/recommned_bnr_profile.png) center center / contain
    no-repeat;
}
#recommend ul li:nth-of-type(2) a {
  background: url(../img/recommned_bnr_diary.png) center center / contain
    no-repeat;
}
#recommend ul li:nth-of-type(3) a {
  background: url(../img/recommned_bnr_foodcom.png) center center / contain
    no-repeat;
}
#recommend ul li:nth-of-type(4) a {
  background: url(../img/recommned_bnr_factory.png) center center / contain
    no-repeat;
}

#recommend ul li img {
  width: 100%;
}
/*----------------
キャンペーン
------------------*/
#campaign {
  background-color: #f1eee9;
  padding: 4rem 0rem;
}
#campaign ul li {
  width: 23.21%;
}
#campaign ul li img {
  width: 100%;
}
/*----------------
商品
------------------*/
.inner_product {
  padding: 4rem 0rem;
}
#product {
  width: 46%;
}
#product .package {
  justify-content: space-around;
  height: 29.5rem;
  margin-bottom: 1.8rem;
}
#product .package li {
  width: 23%;
  text-align: center;
}
#product .package li a {
  color: #3c3c3c;
  font-size: 1.5rem;
  text-decoration: none;
  margin-bottom: 2em;
  display: block;
  position: relative;
}
#product .package li.new a:after {
  content: "";
  background: url(/en/common/img/icon_new.png) 0 0 / contain no-repeat;
  width: 4em;
  height: 4.2em;
  position: absolute;
  right: -0.8em;
  top: -1.7em;
}
#product .package li img {
    display: block;
    width: auto;
    max-height: 94px;
    margin: 0 auto 0.5em;
    transition-duration: 0s;
}
.inner_product .btn li {
  width: 48.5%;
  margin-bottom: 1.5rem;
}
.inner_product .btn li a {
  display: block;
  border: solid 1px #ccc9c9;
  color: #2f2f2f;
  font-size: 1.8rem;
  text-align: center;
  padding: 1em 0;
  border-radius: 0.3em;
  text-decoration: none;
  position: relative;
}

.inner_product .btn li a:after {
  content: "";
  vertical-align: middle;
  position: absolute;
  top: 50%;
  margin-top: -0.2em;
  right: 0.7em;
  width: 0.35em;
  height: 0.35em;
  border-top: 0.15em solid #EB0100;
  border-right: 0.15em solid #EB0100;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.inner_product .btn li.search a:after {
  background: url(/en/common/img/icon_search_02.png) 0 0 / contain no-repeat;
  top: 50%;
  margin-top: -0.5em;
  right: 0.5em;
  width: 1em;
  height: 1em;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.inner_product .btn li a:hover {
  color: #EB0100;
}

/*----------------
企業情報
------------------*/
#company_information {
  width: 46%;
}
#company_information .img {
  height: 29.5rem;
  margin-bottom: 1.8rem;
}
#company_information .img img {
  width: 100%;
}

/*----------------
公式SNS
------------------*/
#sns {
  background-color: #f1eee9;
  padding: 4rem 0 10rem 0;
}
#sns h2 {
  margin-bottom: 1rem;
}
#sns ul {
  text-align: center;
  font-size: 0px;
}
#sns ul li {
  display: inline-block;
  margin: 0 1rem;
  width: 7.5rem;
}

/*----------------
CM・動画
------------------*/
#cm {
  padding: 4rem 0 8rem 0;
}
#cm li {
  width: 47.131%;
}
#cm li a {
  display: block;
  position: relative;
  font-size: 0px;
  transition-duration: 0.3s;
}
#cm li a:after {
  content: "";
  position: absolute;
  background: url(../img/icon_play.png) 0 0 / contain no-repeat;
  top: 50%;
  left: 50%;
  width: 6.6rem;
  height: 6.6rem;
  margin: -3.3rem 0 0 -3.3rem;
  transition-duration: 0.3s;
}
#cm li a:hover:after {
  background: url(../img/icon_play_hover.png) 0 0 / contain no-repeat;
}
#cm li img {
  width: 100%;
}

/*---------------------------------------------------------------
横幅768px～1190pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1150px) {

  #recommend ul li a {
    height: 22.5vw;
    font-size: 1.87vw;
  }

  #recommend ul li a span:nth-of-type(2) {
    font-size: 1.53vw;
  }
  #product .package {
    height: 24.7vw;
  }
  #product .package li a {
    font-size: 1.19vw;
  }
  .inner_product {
    padding: 4rem 1.2rem;
  }

  .inner_product .btn li a {
    font-size: 1.53vw;
  }

  #company_information .img {
    height: 24.7vw;
  }
  #product .package li img {
    max-height: 8.5vw;
	}
}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  /*----------------
メインビジュアル 
------------------*/
  #main_v {
    height: auto;
    position: relative;
    background: none;
    overflow: visible;
  }
  #main_v h1 {
    /*top: 29vw;*/
  }
  #main_v h1 img {
    width: 68%;
  }
  #main_v .scroll {
    bottom: 4vw;
    width: 6%;
    margin-left: -3%;
  }
  #main_v #movieBg {
    display: none;
  }
  #main_v .movieBg-out {
    display: none;
  }
  #main_v #fade_bg {
    display: block;
  }
  #main_v .inner {
    position: static;
    transform: none;
  }
  #main_v .btn {
    font-size:3vw;
    bottom: -1.5em;
    right: 1vw;
  }
  #video {
    display: none;
  }
    #main_v .btn_stop{
    display: block;
  }
  #movie_controller a{
    padding:0.7rem 1rem;
  }
  /*----------------
大切なお知らせ 
------------------*/
  #news {
    padding: 1rem 0 2rem 0;
  }
  #news dl {
    margin-top: 0.3em;
  }
  #news .btn {
    width: 100%;
  }
  #news .btn:hover {
    opacity: 1;
  }
  #news .btn:before,
  #news .btn:after {
    left: 9.5em;
    margin-top: -0.18em;
    border-top: 0.3em solid;
    width: 1em;
  }
  #news .btn.close:after {
    left: 8.48em;
    margin-top: -0.65em;
  }

  /*----------------
おすすめコンテンツ 
------------------*/
  #recommend {
    background: url(../img/bg_recommend_sp.jpg) center center/cover no-repeat;
    padding: 2rem 0 5rem 0;
  }
  #recommend h2 {
    margin-bottom: 1.5rem;
  }
  #recommend h2 img {
    max-width: 100%;
    width: auto;
  }
  #recommend ul li {
    width: 48.5%;
  }
  #recommend ul li a {
    height: 45.5vw;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    padding-top: 4.1em;
  }
  #recommend ul li a span:nth-of-type(2) {
    font-size: 1.3rem;
    padding: 0.25em 0;
  }

  /*----------------
キャンペーン 
------------------*/
  #campaign {
    padding: 2rem 0rem;
  }
  #campaign h2 {
    font-size: 2rem;
  }

  #campaign ul li {
    width: 48%;
    font-size: 0px;
    margin-bottom: 1rem;
  }

  /*----------------
商品
------------------*/
  .inner_product {
    padding: 2rem 1.2rem;
  }
  #product {
    width: 100%;
    padding-bottom: 3rem;
  }
  #product .package li {
    width: 33%;
  }
  #product .package li img {
    max-height: 25vw;
}
  #product .package {
    height: auto;
    margin-bottom: 0px;
  }
  #product .package li a {
    font-size: 1.6rem;
  }
  #product .package li.new a:after {
    width: 3.6em;
    height: 3.7em;
    right: -0.5em;
  }

  .inner_product .btn li {
    margin-bottom: 1rem;
  }
  .inner_product .btn li a {
    font-size: 1.6rem;
  }
  .inner_product .btn li.brand a {
    font-size: 1.4rem;
    padding: 1.25em 0;
  }
  .inner_product .btn li a span {
    font-size: 0.8em;
  }
  #company_information {
    width: 100%;
  }
  #company_information .img {
    height: auto;
    margin-bottom: 1rem;
  }
  /*----------------
商品
------------------*/
  #sns {
    padding: 2rem 0 2rem 0;
  }
  #sns h2 {
    font-size: 2.5rem;
  }
  #sns ul li {
    width: 16%;
    margin: 0 0.5rem;
  }
  #sns ul li img {
    width: 100%;
  }

  /*----------------
CM・動画
------------------*/
  #cm {
    padding: 2rem 0 3rem 0;
  }
  #cm .flex {
    width: 90%;
    margin: 0 auto;
  }
  #cm li {
    width: 100%;
    font-size: 0px;
    margin-bottom: 2rem;
  }
  #cm li:last-child {
    margin-bottom: 0px;
  }
  #cm li a:after {
    width: 4rem;
    height: 4rem;
    margin: -2rem 0 0 -2rem;
  }
}