@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;*/
  display:none;
}
#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 0 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;
}

#news .inner {
  padding-bottom:1rem;
	border-bottom:1px solid #ccc9c9;
  
}

/*----------------
カルビーが考える「食と健康」
------------------*/
#food_health{
  padding:4rem 0 2.5rem 0;
}
#food_health h2{
  text-align: center;
  font-size:2.2rem;
  color:#EB0100;
  margin-bottom:1.5em;
}
#food_health h2 img{
  width:2.4em;
  position:relative;
  bottom:-0.65em;
  margin-right: 0.5em;
}

#food_health .inner {
display:flex;
row-gap:2.5rem;
flex-wrap:wrap;
}


#food_health .banner a{
  border-radius: 1rem;
  display:block;
  font-size:0;
}

#food_health .banner a img{
  width: 100%;
		border-radius: 1rem;
}
#food_health .banner p{
  text-align: center;
  border-top:1px solid #000;
  margin-top:3.6rem;
}
#food_health .banner p span{
  font-size:1.8rem;
  display:inline-block;
  padding:0 1em;
  background-color:#FFF;
  position:relative;
  top:-0.85em;
  font-family: Sawarabi Gothic;
}


/*----------------
おすすめコンテンツ
------------------*/
#recommend{
  margin-bottom:7rem;
}
#recommend ul li {
  width: 22.522%;
	position:relative;
	opacity:1;
	box-shadow: 0.2em 0.2em 0.5em 0.2em rgba(0,0,0,0.1);
  border-radius: 1.3rem;
  outline: 1px solid transparent;
  overflow: hidden;
}
#recommend ul li img{
	position:relative;
	vertical-align:bottom;	
}
#recommend ul li img.logo{
	position:absolute;
	width:66.045%;
	left:50%;
	top:14%;
	margin-left:-33%;
	z-index:11;
	transition-duration:0.3s;
	opacity:0;
}
#recommend ul li a:hover img.logo{
	opacity:1;
}
#recommend ul li a {
  display: block;
  box-sizing: border-box;
  /*justify-content:center;*/
  align-items: center;
  font-family: "Sawarabi Gothic", sans-serif;
  color: #fff;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  /*transform: rotate(0.0001deg);*/
  outline: 1px solid transparent;
  position: relative;
	opacity:1;
	padding-top:13.5em;
}
#recommend ul li a:after{
	opacity:0;
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	content:"";
	background-color:#8e5736;
  transition-duration: 0.3s;
}
#recommend ul li a:hover:after{
	opacity:0.7;
	z-index:10;
}
#recommend ul li a:focus{
  border: solid 2px #000;
}
#recommend ul li a p{
	display:flex;
	height:5.8em;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	position:relative;
	z-index:12;
	background-color:#FFF;
	width:100%;
}
#recommend ul li a span:nth-of-type(1) {
  position: relative;
	color:#EB0100;
	display:block;
}

#recommend ul li a span:nth-of-type(2) {
  font-size: 2.1rem;
  font-family: "Sawarabi Gothic", sans-serif;
  transform: rotate(0.001deg);
  text-align: center;
  padding-top: 0.3em;
  text-shadow: none;
  color: #3c3c3c;
  font-weight: normal;
	display:block;
}
#recommend ul li:nth-of-type(1) a {
  background: url(../img/recommned_bnr_profile.jpg) center top / contain
    no-repeat;
}
#recommend ul li:nth-of-type(2) a {
  background: url(../img/recommned_bnr_diary.jpg) center top / contain
    no-repeat;
}
#recommend ul li:nth-of-type(3) a {
  background: url(../img/recommned_bnr_foodcom.jpg) center top / contain
    no-repeat;
}
#recommend ul li:nth-of-type(4) a {
  background: url(../img/recommned_bnr_factory.jpg) center top / contain
    no-repeat;
}


#recommend ul li img {
  width: 100%;
}
/*----------------
キャンペーン
------------------*/
#campaign {
  background-color: #f1eee9;
  padding: 4rem 0rem;
	margin-bottom:3rem;
}
#campaign ul {
  justify-content: flex-start;
}
#campaign ul li {
  width: 23.21%;
  font-size: 0px;
  margin-right: 2.386%;
}
#campaign ul li img{
	width:100%;
}
#campaign ul li:last-child {
  margin-right: 0px;
}
#campaign ul li a {
  display: block;
  overflow: hidden;
  border-radius: 0.6rem;
  position: relative;
}

  #campaign ul li a span.icon_link {
    display: block;
    position: absolute;
    right: 3px;
    bottom: 5px;
  }

/*----------------
noteコンテンツ
------------------*/
#note {
  background:#f1eee9;
	padding-top: 4rem;
  /* margin-bottom:3rem;
  padding-bottom:5rem; */
}
#note ul {
gap: 0 2.386%;
}

#note ul li {
	position:relative;
  border-radius: 1.3rem;
  background:#fff;
  flex: 1;
}
#note ul li img{
  height:auto;
	position:relative;
  width:100%;
}

#note ul li a {
  display: block;
  box-sizing: border-box;
  font-family: "Sawarabi Gothic", sans-serif;
  text-decoration: none;
  border-radius: 1.3rem;
  overflow: hidden;
}

#note ul li a:hover{
color: #EB0100;
}

#note ul li a p{
	display:flex;
	align-items:center;
  text-align:left;
  line-height: 1.4;
  font-size:1.8rem;
  padding: 0.5em 1em 1em 1em;
}


/*----------------
商品
------------------*/
.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: 1em;
  display: block;
  position: relative;
}


#product .package li a:hover {
  color: #EB0100;
}

#product .package li.new a:after {
content: "";
  background: url(/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;
  padding:1em;
}

.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(/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;
  margin-top:8rem;
}
#sns h2 {
  margin-bottom: 1rem;
}
#sns ul {
  text-align: center;
  font-size: 0px;
}
#sns ul li {
  display: inline-block;
  margin: 0 1.5rem;
  width: 6.8rem;
}

/*----------------
CM・動画
------------------*/
#cm_recommend {
  background-color:#f1eee9;
  padding: 7rem 0 6rem 0;
  margin-bottom:7rem;
}
#cm li {
  width: 48.35%;
}
#cm li a {
  display: block;
  position: relative;
  font-size: 0px;
  background-color:#FFF;
  padding:0.9rem;
  box-shadow: 0.4rem 0.4rem 1rem 0.4rem rgba(0,0,0,0.1);
  border-radius: 1rem;

}
/*#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%;
}

/*----------------
ジャックバナー
------------------*/
#modal{
	position:relative;
	padding-top:2.6rem;
}
#modal img{
	width:100%;
}
#modal .btn_close{
	width:7.9rem;
	height:1.8rem;
	position:absolute;
	right:0px;
	top:0rem;
	background:url(../img/btn_close.png) 0 0 /contain no-repeat;
	cursor:pointer;
}
 

/*---------------------------------------------------------------
横幅768px～1190pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1150px) {
#recommend ul li a {
	padding-top:18.5vw;
}
#recommend ul li a p {
    height: 5.5em;
}
  #recommend ul li a span:nth-of-type(1) {
    font-size: 1.35vw;
  }
  #recommend ul li a span:nth-of-type(2) {
    font-size: 1.87vw;
  }
  #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;
}

/*----------------
noteコンテンツ
------------------*/
#note ul li a p{
	display:flex;
	height:4.4em;
	align-items:center;
  text-align:left;
  line-height: 1.4;
  font-size:1.6vw;
  padding:1em 1em;
}

}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@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 1.2rem 2rem 1.2rem;
  }
  
  #news .inner{
    padding: 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;
  }
/*----------------
カルビーが考える「食と健康」
------------------*/
#food_health{
  padding:2rem 0;
}
#food_health h2{
  font-size:2rem;
  margin-bottom:1em;
}
  #food_health .banner p {
    border-top: none;
    margin-top: 1.6rem;
}
  #food_health .banner p span {
    font-size: 1.4rem;
    display: inline-block;
    padding: 0 0.5em;
    background-color: #FFF;
    position: relative;
    top: -0.8em;
}

#food_health .inner {
row-gap:1rem;
}

  
  
  /*----------------
おすすめコンテンツ
------------------*/
  #recommend {
    width:100%;
    padding: 4rem 0 1rem 0;
    margin-bottom:3rem;
  }
  #recommend h2 {
    margin-bottom: 1em;
  }
  #recommend h2 img {
    max-width: 100%;
    width: auto;
  }
  #recommend ul li {
    width: 48.5%;
    margin-bottom: 1.5rem;
  }
	#recommend ul li a {
		padding-top:32.8vw;
    background-position: center -2vw!important;
	}
#recommend ul li a p {
    height: 4.3em;
}
	#recommend ul li a span:nth-of-type(1) {
		font-size:1.4rem;
	}
  #recommend ul li a span:nth-of-type(2) {
		font-size: 1.6rem;
  }

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

  #campaign ul li {
    width: 48%;
    font-size: 0px;
    margin-right: 4%;
    margin-bottom: 1rem;
  }
  #campaign ul li:nth-of-type(even) {
    margin-right: 0px;
  }

  #campaign ul li a span.icon_link{
    right: 0.1vw;
    bottom: 0.6vw;
    width:4vw; 
  }
  
  /*----------------
noteコンテンツSP
------------------*/
  #note {
		padding: 3rem 0 1rem 0;
  }
  #note h2 {
    font-size: 2rem;
  }
  
   #note  ul {
    display:block;
  }
  
  #note  ul li{
    margin-bottom:1.5rem;
  }
  
  
  #note ul li a p{
	display:flex;
	height:4.4em;
	align-items:center;
  text-align:left;
  line-height: 1.4;
  font-size:1.6rem;
  padding:1em 1em;
}
  
  
  /*----------------
商品
------------------*/
  .inner_product {
    padding: 2rem 1.2rem;
  }
  #product {
    width: 100%;
    padding-bottom: 3rem;
  }
  #product .package li {
    width: 33%;
  }
  #product .package {
    height: auto;
    margin-bottom: 0px;
  }
    #product .package li img {
    max-height: 25vw;
}

  #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;
  }
  #company_information {
    width: 100%;
  }
  #company_information .img {
    height: auto;
    margin-bottom: 1rem;
  }
  /*----------------
商品
------------------*/
  #sns{
    margin-top:4rem;
  }
  #sns {
    padding: 2rem 0 2rem 0;
  }
  #sns h2 {
    font-size: 2.5rem;
  }
  #sns ul li {
    width: 13%;
    margin: 0 0.7rem;
  }
  
  #sns ul li:first-child{
    margin: 0 0.7rem 0 0;
  }
  
  #sns ul li:last-child{
    margin: 0 0 0 0.7rem;
  }
  
  #sns ul li img {
    width: 100%;
  }

  /*----------------
CM・動画
------------------*/
  #cm_recommend {
    padding: 2rem 0 5rem 0;
    margin-bottom: 3rem;
}
  #cm_recommend .inner {
    display: block;
}
  #cm {
    padding: 0;
    width:100%;
  }
  #cm .flex {
    width: 100%;
    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;
  }
/*----------------
ジャックバナー
------------------*/
#modal{
  max-width:350px!important;
}

  
 
}