@charset "UTF-8";


/* --------------------------------------------------------------------------------------------
1-1: RESET
-------------------------------------------------------------------------------------------- */
@import url(sanitize.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&display=swap');

/* --------------------------------------------------------------------------------------------
  HTML + BODY
-------------------------------------------------------------------------------------------- */
html { font-size: 62.5%; }
body { font-size: 1.8rem;letter-spacing: .075em; font-family: "Noto Sans JP","ヒラギノ角ゴシック","Hiragino Sans","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;color:#000000}
ul,ol {margin:0;padding: 0;}
li{list-style-type: none;}

img{width: 100%;}

@media screen and (max-width:767px){
  body{
    font-size:1.6rem;
  }
}
/* --------------------------------------------------------------------------------------------
  GENERAL SETTING
-------------------------------------------------------------------------------------------- */

@media screen and (min-width:768px){
  .sp{
    display:none!Important;
  }
}
@media screen and (max-width:767px){
  .pc{
    display:none!Important;
  }
}





body{
  /*text-align: center;
  background: #F3EFEC;*/
  line-height: 1.8;
  background:#fff;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

img{width: 100%}



.container-wrap{
  width: 100%;
}

.container{
  max-width: 1400px;
  margin: auto;
  padding: 0 15px 0;
/*  text-align: center;*/
}




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


.fv{
  background-image: url("../img/fv.jpg");
  background-size: cover;
  background-position: center;
  min-height:620px;
}



.container-wrap.copy-block{
  background:#070d31;
  padding-bottom: 7%;
}

.container-wrap.copy-block img{
  max-width:100%;
  width: auto;
}


.container-wrap.copy-block .lead{
  padding:15.7142857143% 0 0 22.8571428571%
}


.container-wrap.copy-block .copy{
  padding:5.71428571429% 0 0 22.8571428571%
}

.container-wrap.copy-block .kamon{
  width: 185px;
  margin: auto;
  padding:3.57142857143% 0 6.42857142857%;
}



.copy-block .flex-block{
  color: #fff;
  font-size:1.6rem;
}


.copy-block .flex-block{
  width: 80%;
  margin: auto;
}

.copy-block .flex-block .item{
/*  width: 32.3%;*/
  width: 48%;
}


.copy-block .flex-block.youtube-block{
  justify-content:center;
}
.copy-block .flex-block.youtube-block .item{
  width: 80%;
}



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

  .fv{
    background-image: url("../img/fv-sp.jpg");
    background-size: contain;
    width:100%;
    height: 0;
    background-position: top;
    padding-top: 68%;
    min-height:auto;
  }

  .container-wrap.copy-block .lead{
    width:70%;
    padding:19.7333333333% 0 0 19.4666666667%
  }

  .container-wrap.copy-block .copy{
    padding:5.71428571429% 0 0 19.4666666667%;
    width:85%;
  }

  .container-wrap.copy-block .kamon{
    width: 25%;
    padding:10.6666666667% 0 20%;
  }

  .copy-block .flex-block .item{
    width: 100%;
  }
  .copy-block .flex-block.youtube-block .item{
    width: 100%;
  }

}






.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and ( max-width:767px) {
  .youtube {
    margin-top: 6%;
  }
}






.container-wrap.bnr-block{
  background:#070d31;
  padding-bottom: 7%;
}

.bnr-block .flex-block{
  width: 80%;
  margin: auto;
}

.bnr-block .flex-block .item{
  width: 48%;
}




@media screen and (max-width:767px){
  .bnr-block .flex-block{
    padding-top: 60px;
  }
  .bnr-block .flex-block .item{
    width: 100%;
    margin-bottom:15px;
  }
}





.kodawari-block{
  background-color:rgba(7,13,49,0.1);
  font-family: 'Zen Old Mincho', serif;
}


.kodawari-block .ttl-box{
  height:124px;
  background:url(../img/bg-line.png) repeat-x;
  position: relative;
}

.kodawari-block .ttl{
  position:absolute;
  width: 350px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -58px;
}


.kodawari-block h2 {
  margin: 10% 0 3.57142857143%;
  text-align:center;
  font-size:5rem;
}

.fish-mark{
  width: 90px;
  margin: 0 auto 0;
  padding:3.92857142857% 0 7.5%;
}

.kodawari-text{
  margin: 0 auto;
  width:640px;
  font-size:2rem;
}



.kodawari-text p {
  display: inline-block;
  text-align: left;
  margin-bottom: 3rem;
}



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

  .kodawari-block .h2-wrap{
      text-align:center;
    }
  .kodawari-block .ttl{
    width: 90%;
  }

  .kodawari-block h2 {
    margin: 36% auto 16%;
    text-align:left;
    font-size:3rem;
    display: inline-block;
  }

  .kodawari-block h2 span{
    padding-left: 3rem;
  }

  .kodawari-text{
    width: 100%;
    font-size:1.6rem;
  }

}









.recipe-block{
  background:url(../img/bg_recipe.jpg) ;
  position: relative;
}

.recipe-block .ttl-box{
  height:124px;
  background:url(../img/bg-line.png) repeat-x;
  position: relative;
}

.recipe-block .ttl{
  position:absolute;
  width: 350px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -58px;
}

.recipe-block .flex-block{
  margin:10% 0 0;
}

.recipe-block .flex-block .item{
  width: 24%;
  margin-bottom:50px;
}


/* 最後のコンテンツを左寄せにする指定 */
.recipe-block .flex-block:after {
    content: "";
    display: block;
    width: 24%;
    height: 0;
}




@media screen and ( max-width:767px) {
  .recipe-block .ttl{
    width: 90%;
  }
  .recipe-block .flex-block{
    margin:36% 0 0;
  }
  .recipe-block .flex-block .item{
    width: 48%;
    margin-bottom:30px;
  }


}









.products-block{
  padding-bottom:12%;
}
.products-block .container{
  width: 880px;
  margin: auto;
}

.products-block h2{
  margin: 20% auto;
  width: 50%;
}

.head-border {
    display: flex;
    align-items: center;
}
 
.head-border:before,
.head-border:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: #666;
}
 
.head-border:before {
    margin-right: 1rem;
}
 
.head-border:after {
    margin-left: 1rem;
}



.products-block .flex-block .item{
  width: 40%;
}


.products-block .flex-block .item .photo{
/*  width: 120px;*/
  height: 300px;
  margin: 0 auto 30px;
}
.products-block .flex-block .item .photo img{
  height: 100%;
  width: auto;
  margin: auto;
}

.products-block h3{
  font-size:2.4rem;
  margin: 0 0 15px;
}


@media screen and (max-width:767px){
  .products-block .container{
    width: 90%;
    margin: auto;
  }
  .products-block h2{
    margin: 20% auto;
    width: 100%;
  }
  .products-block .flex-block .item{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    width: 100%;
    margin: 0 0 60px;
  }
  .products-block .flex-block .item .photo{
    width: 16%;
    margin:0;
  }
  .products-block .flex-block .item .photo img{
    height: auto;
  }

  .products-block .flex-block .item .text{
    width: 74%;
  }
  .products-block h3{
    font-size:2.1rem;
    margin: 0 0 15px;
  }

}






/* --------------------------------------------------------------------------------------------
  footer
-------------------------------------------------------------------------------------------- */

footer{
  padding:60px 0;
  background:#1d1d1d;
  color: #fff;
  text-align:center;
  font-size: 1.2rem;
}


footer img{
  width:200px;
  margin: 0 auto 30px;
}






a.btn_link {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 30%;
  margin:  6% auto;
  padding: 3rem 4rem;
  font-weight: bold;
  background: #A40000;
  color: #fff;
  border-radius: 60px;
  transition: 0.5s;
}
a.btn_link:hover {
  color: #fff;
  background: #dd0202;
}

@media screen and (max-width:767px){
  a.btn_link {
    width:90%;
    margin:  10% auto 20%;

  }



}












.recipe-page header{
  background:#1d1d1d;
  margin-bottom:60px;
}

.recipe-page header img{
  padding: 30px;
}

.recipe-page .container{
  margin: 10% auto 0;
  width: 960px;
}

.recipe-page img{
  width: auto;
}

.recipe-page .container .flex-block .ttl{
  width: 10%;
}
.recipe-page .container .flex-block .recipe-box{
  width: 90%;
}

.recipe-page .recipe-box h1{
  background: url(../recipe/img/bg_common.png) repeat right top;
  padding: 15px 20px;
  font-size:2.4rem;
  margin:0 auto 60px;
}


.recipe-page .recipe-box .photo{
  width: 48%;
}
.recipe-page .recipe-box .text{
  width: 48%;
}


.midashi{
  margin: 10% 0;
}
.midashi:before{
  content: "●";
  color:#D9CFC4;
  margin: 0 0.5rem 0 0;
}



.flow{
  border-top: 1px solid #ccc;
  margin:10% 0;
}
.flow .midashi{
  margin: 5% 0 3%;
}

.flow ol{
  margin: 0 0 0 2rem;
}

.flow ol li{
  list-style-type:decimal;
}


p.text-red{
  margin: 1rem 0;
  color: #e8380d;
}



.recipe-page footer img {
    width: 200px;
    margin: 0 auto 30px;
}





@media screen and (max-width:767px){
  .recipe-page header{
    width:100%;
    margin-bottom:30px;
  }
  .recipe-page header img{
    width:40%;
    padding: 20px;
  }
  .recipe-page .container{
    width: 100%;
    margin: 30% auto 0;
  }
  .recipe-page .container .flex-block .ttl,
  .recipe-page .container .flex-block .recipe-box{
    width: 100%;
  }
  .recipe-page .container .flex-block .ttl{
    margin: 0 0 30px;
  }
  .recipe-page .recipe-box h1{
    font-size:2.1rem;
    padding: 15px 10px;
    margin:0 auto 30px;
  }
  .recipe-page .recipe-box .photo,
  .recipe-page .recipe-box .text{
    width: 100%;
  }
  .recipe-page .recipe-box .photo{
    margin-bottom:30px;
  }

  .recipe-page .recipe-box .text h3{
    font-size:1.8rem;
  }

}