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

body {
  color: #231815;
  /*font-family: brandon-grotesque, 'Noto Sans JP', sans-serif, "Yu Gothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", " Osaka", "ＭＳ Ｐゴシック";*/
  /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";*/
}

h3,h4,h5,.recipe_link{
  /*font-family: "fot-tsukuardgothic-std",sans-serif,'ヒラギノ丸ゴ Pro W4', 'ヒラギノ丸ゴ Pro', brandon-grotesque, 'Noto Sans JP', sans-serif, "Yu Gothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", " Osaka", "ＭＳ Ｐゴシック";
  font-weight: 700!important;
  font-style: normal;*/
}

.br_sp{display: none;}

@media all and (-ms-high-contrast: none) {

}

@media screen and (max-width: 700px) {
  .br_sp {display: block;}
}

/*======================================================================

======================================================================*/

.pc {display: block;}
.sp {display: none;}

q {display: none;}
.sec {overflow: hidden;}

.lineup .inner {
  width: 980px;
  margin: 0 auto;
  max-width: 90%;
}

.lineup .inner {width: 940px;}

main {
  width: 100%;
  display: block;
  margin: 0 auto;
}

main img{width: 100%;}

.sec01 {
  text-align: center;
  padding: 120px 0 120px;
  background: url(../img/common/lineup_bg.png) repeat-x top left / 43px;
}

/*.sec01 h2,
.lineup h3 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 40px;
}*/

.sec01 p {
  font-size: 14px;
  line-height: 30px;
  width: 980px;
  max-width: 90%;
  margin: 0 auto;
}

/*		----.lineup-----		*/

.lineup {
  background: url(../img/bg.jpg) top center;
  width: 100%;
  padding: 60px 0 100px;
  margin-bottom: -20px;
}

.lineup .item {float: left;}

.lineup dl {
  display: inline-block;
  background-color: #fff;
  width: 460px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
}

.lineup dl.first {margin-right: 20px;}

.lineup dl dt {float: left;}
.lineup dl dd {
  text-align: center;
  padding: 45px 0 0;
}

.lineup dl dd::after {
  content: "";
  border-top: 7.5px solid transparent;
  border-right: 7.5px solid #5a2200;
  border-bottom: 7.5px solid #5a2200;
  border-left: 7.5px solid transparent;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.lineup dl dd strong {
  font-weight: bold;
  font-size: 24px;
  display: block;
}

.lineup dl dd a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.lineup dl:hover {opacity: 0.8;}

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

  /*img {width: 100%;}*/
  main img{ width: 100%; }

  .pc {display: none;}
  .sp {display: block;}

  .lineup dl dd br {display: none;}
  .sec01 {width: 100%;}

  .sec01 p,
  .lineup .inner {
    width: 90%;
    margin: 0 auto;
  }

  .sec01 {padding: 100px 0 80px;}
  .sec01 h2,
  .lineup h3 {
    font-size: 30px;
    line-height: 40px;
    padding-bottom: 30px;
  }

  /*		----.lineup-----		*/

  .lineup {
    background: url(../img/bg_sp.jpg) top center;
    padding: 45px 0 50px;
  }

  .lineup .item {float: none;}

  .lineup dl {
    max-width: 500px;
    width: 100%;
    float: none;
    margin: 0 auto 20px;
  }

  .lineup dl.first {
    margin-right: auto;
    margin-bottom: 20px;
  }

  .lineup dl dt {
    max-width: 270px;
    width: 40%;
  }

  .lineup dl dd {
    font-size: 13px;
    line-height: 16px;
    padding: 12% 0 0;
  }

  .lineup dl dd::after {
    border-top: 6.5px solid transparent;
    border-right: 6.5px solid #5a2200;
    border-bottom: 6.5px solid #5a2200;
    border-left: 6.5px solid transparent;
    position: absolute;
    bottom: 7px;
    right: 7px;
  }

  .lineup dl dd strong {
    font-size: 20px;
    line-height: 25px;
    padding-top: 5px;
  }
}

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

  .lineup dl dd {padding: 5.5% 0 0;}
  .lineup dl.first dd {padding-top: 7%;}
  .lineup dl dd br {display: block;}

}

/*		footer  	 */

/*footer#footer {
  margin-top: 100px;
  font-size: 12px;
  line-height: 20px;
}*/


/******************************
*******************************


2023.06.改修


********************************
********************************/

/********************
YouTube動画挿入
********************/

#movie{
  margin: 0 auto;
  padding: 0 0 138px;
}

#movie ul{
  display: flex;
  justify-content: center;
  justify-content: space-between;
  width: 980px;
  max-width: 90%;
  margin: 0 auto;
}

#movie>h3 {
  font-size: 40px;
  margin-bottom: 30px;
  font-weight: bold;
}

#movie>h3::before {
  background: url(../img/common/h3_icon.png)no-repeat top left/ 121px;
  content: '';
  display: inline-block;
  height: 81px;
  width: 121px;
  margin: 0 20px 0 0;
  vertical-align: middle;
}

.youtube {
  width: 31%;
  aspect-ratio: 16 / 9;
}

.youtube iframe {
  width: 100%;
  height: 200px;
  /*height: 79%;*/
}

.youtube h3{
  font-size: 20px;
  letter-spacing: 0.1em;
  margin-top: 10px;
  font-weight: bold;
}

.youtube h3::after{
  background:url(../img/dot1.png)top left repeat-x;
  background-size: 10px;
  content: '';
  display: block;
  height: 10px;
  width: 52%;
  margin: 0 auto;
}

.youtube .boder_long::after {
  background: url(../img/dot1.png)top left repeat-x;
  background-size: 10px;
  content: '';
  display: block;
  height: 10px;
  width: 75%;
  margin: 0 auto;
}

.youtube p{
  font-size: 14px;
  margin-top: 16px;
}

@media screen and (max-width: 1000px) {
  .youtube{width: 32%;}
  .youtube iframe {height: 180px;}
}

@media screen and (max-width: 700px) {
  #movie{padding: 0 0 70px;}
  #movie ul {display: block;}
  .youtube {
    width: 100%;
    margin-bottom: 30px;
  }
  .youtube:last-of-type{margin-bottom: 0;}
  .youtube iframe {height: 100%;}
  .youtube p {margin-top: 8px;}

  #movie>h3 {
    font-size: 30px;
    margin-bottom: 20px;
  }

  #movie>h3::before {
    background: url(../img/common/h3_icon.png)no-repeat top left/ 100px;
    content: '';
    height: 64px;
    width: 100px;
    margin: 0 12px 0 0;
  }

  .youtube h3::after {width: 28%;}
  .youtube .boder_long::after {width: 38%;}
}

/****************************************
アレンジレシピ　スライド
****************************************/
#slide_recipe{
  margin: 0 auto;
  background: url(../img/common/lineup_bg.png) repeat-x top left / 43px;
  padding-top: 116px;
  margin-bottom: 100px;
}

#slide_recipe h3 {
  font-size: 40px;
  margin-bottom: 30px;
  font-weight: bold;
}

#slide_recipe h3::before {
  background: url(../img/common/h3_icon.png)no-repeat top left/ 121px;
  content: '';
  display: inline-block;
  height: 81px;
  width: 121px;
  margin: 0 20px 0 0;
  vertical-align: middle;
}

#slide_recipe ul{
  display: flex;
  justify-content: space-between;
  width: 1200px;
  max-width: 90%;
}
#slide_recipe ul li{width: 25%;}
#slide_recipe ul li>img{margin: 0 auto;}
#slide_recipe .recipe_img{width: 100%;}
#slide_recipe li>div{
  background: #fffded;
  padding: 20px;
  border-top: #fff462 solid 6px;
  border-bottom: #fff462 solid 6px;
  box-sizing: border-box;
  min-height: 388px;
  margin-top: 10px;
}
#slide_recipe .yellow{background: #fff462;}

#slide_recipe li>div>div{overflow: hidden;}
#slide_recipe li>div>div>img{float: left;}

#slide_recipe p{
  font-size: 14px;
  width: 70%;
  float: right;
  text-align: left;
}
#slide_recipe h5{
  font-size: 18px;
  line-height: 1.2;
  margin: 16px 0 30px;
  font-weight: bold;
}
#slide_recipe span{
  font-size: 12px;
  margin-bottom: 8px;
  text-align: left;
  float: right;
  width: 70%;
  font-weight: bold;
}
#slide_recipe span::after{
  /*background: radial-gradient(circle farthest-side, #fff462, #fff462 3px, transparent 3px, transparent);*/
  background: url(../img/dot1.png)top left repeat-x;
  background-size: 11px;
  content: '';
  display: block;
  height: 10px;
  width: 100%;
  margin: 2px 0 0 -6px;
}

#slide_recipe .yellow span::after {
  /*background: radial-gradient(circle farthest-side, #fffded, #fffded 3px, transparent 3px, transparent);*/
  background: url(../img/dot2.png)top left repeat-x;
  background-size: 11px;
  content: '';
  display: block;
  height: 10px;
  width: 100%;
  margin: 2px 0 0 -6px;
}

#slide_recipe>a{
  background: #fff462;
  color: #000000;
  padding: 26px 20px;
  display: block;
  font-size: 17px;
  width: 380px;
  max-width: 90%;
  margin: 30px auto 0;
  position: relative;
}

#slide_recipe>a:hover {
  opacity: 0.7;
  text-decoration: none;
}

#slide_recipe>a::after {
  content: '▶';
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 3px 0;
  position: absolute;
  right: 6%;
  top: 39%;
}

.slider {margin: 0 auto;}
.slider-img {margin: 0 5px;}

.slider-img img {
  height: auto;
  width: 100%;
}
@media screen and (max-width: 1200px) {
  #slide_recipe li>div { min-height: 425px; }
}

@media screen and (max-width: 850px) {
  #slide_recipe h5{
    margin-bottom: 16px;
    font-size: 16px;
  }
}

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

  #slide_recipe{
    padding-top: 80px;
    margin-bottom: 70px;
  }

  #slide_recipe h3 {
    font-size: 30px;
    margin-bottom: 14px;
  }

  #slide_recipe h3::before {
    background: url(../img/common/h3_icon.png)no-repeat top left/ 100px;
    content: '';
    height: 64px;
    width: 100px;
    margin: 0 12px 0 0;
  }
  #slide_recipe>a{margin: 20px auto 0;}
  #slide_recipe>a:hover {opacity: 1;}

  #slide_recipe li>div{ min-height: 370px; }

}

/****************************************
おうちでjoyfull ラインナップ
****************************************/
#j_line_up{
  padding: 100px 0 50px;
  background: url(../img/common/lineup_bg.png)#f8f6e7 repeat-x top left / 43px;
}

#j_line_up ul{
  width: 980px;
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  /*justify-content: space-between;*/
  flex-wrap: wrap;
  gap: 0 2.5%;
}

#j_line_up li{
  width: 18%;
  margin-bottom: 50px;
}

#j_line_up h3{
  font-size: 40px;
  margin-bottom: 40px;
  font-weight: bold;
}

#j_line_up h3::before{
  background: url(../img/common/h3_icon.png)no-repeat top left/ 121px;
  content: '';
  display: inline-block;
  height: 81px;
  width: 121px;
  margin: 0 20px 0 0;
  vertical-align: middle;
}

#j_line_up h4{
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: bold;
}

#j_line_up h4::before{
  background: url(../img/common/icon.png)no-repeat top left/ 16px;
  content: '';
  display: inline-block;
  height: 40px;
  width: 16px;
  margin: 0 20px 0 0;
  vertical-align: middle;
}
#j_line_up h4::after {
  background: url(../img/common/icon2.png)no-repeat top right/ 16px;
  content: '';
  display: inline-block;
  height: 40px;
  width: 16px;
  margin: 0 0 0 20px;
  vertical-align: middle;
}

/*#j_line_up ul:first-of-type{ margin-bottom: 55px; }*/

#j_line_up ul p{
  font-size: 15px;
  margin: 18px auto;
}

#j_line_up ul a{
  background: #e60012;
  color: #ffffff;
  font-size: 14px;
  padding: 5px 28px;
  border-radius: 15px;
  letter-spacing: 0.1em;
  font-weight: 400;
  position: relative;
  display: inline-block;
  font-weight: bold;
}

#j_line_up ul a:hover{
  text-decoration: none;
  opacity: 0.7;
}

#j_line_up ul a::after{
  content: '▶';
  font-size: 6px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 3px 0;
  position: absolute;
  right: 7%;
  top: 35%;
}

@media screen and (max-width: 980px) {
  #j_line_up ul li {width: 23%;}
  #j_line_up ul li img {width: 100%;}
  #j_line_up ul p{font-size: 16px;}
}

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

  #j_line_up{ padding: 100px 0 70px ;}

  #j_line_up h3 {
    font-size: 30px;
    margin-bottom: 20px;
  }

  #j_line_up h3::before {
    background: url(../img/common/h3_icon.png)no-repeat top left/ 100px;
    content: '';
    height: 64px;
    width: 100px;
    margin: 0 12px 0 0;
  }

  #j_line_up ul {flex-wrap: wrap;}
  #j_line_up ul li{
    width: 48%;
    margin-bottom: 30px;
  }
  /*#j_line_up ul li:nth-child(odd) {margin-right: 10px;}*/
  #j_line_up ul:first-of-type {margin-bottom: 0;}
  #j_line_up ul li:last-child {margin-bottom: 0;}
  #j_line_up ul img {width: 100%;}

  #j_line_up ul p{ margin: 12px auto; font-size: 15px; }

  #j_line_up ul a{
    padding: 7px 50px;
    border-radius: 20px;
    font-size: 13px;
  }
  #j_line_up ul a:hover {opacity: 1;}

}

/****************************************
ヒカルシリーズ
****************************************/

#h_line_up {
  padding: 80px 0;
  background: #000000;
}
#h_line_up h3{ margin-bottom: 40px; }
#h_line_up h3 img{ margin: 0 auto; }
#h_line_up ul {
  width: 860px;
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#h_line_up ul li{ margin-bottom: 20px; }
#h_line_up ul li:last-child { margin-bottom: 0; }

#h_line_up a{ display: block; }
#h_line_up a:hover{ opacity: 0.7; }

@media screen and (max-width: 1000px) {
  #h_line_up ul li{width: 49%;}
  #h_line_up ul li img{width: 100%;}
}

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

  #h_line_up{padding: 60px 0;}
  #h_line_up ul li {
    width: 100%;
    margin-bottom: 10px;
  }
  #h_line_up h3{
    width: 60%;
    margin: 0 auto 30px;
  }
  #h_line_up h3 img{ width: 100%; }
  #h_line_up a:hover {opacity: 1;}

}


/****************************************
オンラインショップbnr
****************************************/
.online{
  width: 980px;
  max-width: 80%;
  margin: 80px auto 0;
}
.online p{
  font-size: 30px;
  margin-bottom: 10px;
  color: #502700;
}
.online img {
  box-shadow: 10px 5px 5px grey;
}

.online_btn img { margin-bottom: 40px; }

.online ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.online div ul li {
  padding: 0 !important;
  margin: 0 0 15px 0 !important;
  background: none !important;
}

.online div ul li img {
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: 10px 5px 5px grey !important;
}

@media screen and (max-width: 1200px) {
  .online ul li{width: 31.5%;}
  .online ul img{width: 100%;}
}

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

  .online{max-width: 90%;}
  .online p{font-size: 18px;}

  .online_btn img{margin-bottom: 30px;}

  .online ul li {
    width: 48%;
    margin-bottom: 12px;
  }

}


/****************************************
冷凍商品pdfとオンラインショップ
****************************************/

#link_btn{
  width: 850px;
  max-width: 90%;
  margin: 60px auto 0!important;
}

#link_btn p{
  font-size: 30px;
  margin-bottom: 10px;
  color: #502700;
}

#link_btn ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#link_btn li{width: 48%; margin: 0 auto;}
#link_btn a { display: block; }

@media screen and (max-width: 1000px) {
  #link_btn img{ width: 100%; }
}
@media screen and (max-width: 700px) {
  #link_btn li{width: 100%;}
  #link_btn li:first-of-type{margin-bottom: 10px;}
  #link_btn p {font-size: 18px;}
}

/****************************************
footer
****************************************/

footer#footer{ margin-top: 60px; }