@charset "UTF-8";

body{
  font-feature-settings: "palt";
}

/*全て共通：hideエリアをはじめは非表示*/
.hide-area {
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
  background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
  background: #666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title {
  font-size: 1.2rem;
  text-align: center;
  margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper {
  padding: 0;
}

.pageContainer {
  padding: 80px 0 60px;
  /* トップ動画 */
  /* トップ レシピコンテンツエリア */
  /* 各レシピページ */
}


@media screen and (min-width:1601px) {
.sp {display:none;}
.tb {display:none;}
.pc {display:none;}
.pc2 {display:block;}
}

@media screen and (max-width:1600px) {
.sp {display:none;}
.tb {display:none;}
.pc {display:block;}
.pc2 {display:none;}
}

@media screen and (max-width:1200px) {
.sp {display:none;}
.tb {display:block;}
.pc {display:none;}
.pc2 {display:none;}
}

@media screen and (max-width:767px) {
.sp {display:block;}
.tb {display:none;}
.pc {display:none;}
.pc2 {display:none;}
}



.pageContainer .wwrecipe_archive {margin:150px auto 180px; }


.pageContainer .wwrecipe_top { }
.pageContainer .wwrecipe_top img {width:100%; height:555px; object-fit:cover;}
.pageContainer .wwrecipe_top img:hover {opacity:0.75;}

.pageContainer .movieContainer {position:relative; height:auto; /*padding-top:56.25%;*/ width:100%; max-width:900px; margin:auto; }


.pageContainer .movieContainer video {width:100%; max-width:900px; height:auto; }
.pageContainer .movieContainer iframe {width:100%; height:100%; position:absolute; left:0; top:0; }


/*
.pageContainer .wwrecipe_top {width:100%; height:555px; position:relative; overflow:hidden; }
.pageContainer .wwrecipe_top img {width:auto; height:auto; min-width: 100%;
    min-height: 100%;
    max-width: inherit;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);}*/

.pageContainer .wwrecipe_contents {
  max-width: 1360px;
  width: 100%;
  margin: auto;
}
.pageContainer .wwrecipe_contents .wwrecipe_logo {
  margin: 50px 0;
  width: 580px;
}
@media screen and (max-width: 767px) {
  .pageContainer .wwrecipe_contents .wwrecipe_logo {
    width: 80%;
    margin: 30px 0;
  }
}

/* サカナごはんトップ リード */
.pageContainer .wwrecipe_contents .wwrecipe_lead_top {
text-align: center;
margin: 20px 0 20px 0;
}
.pageContainer .wwrecipe_contents .wwrecipe_lead_top p {
font-family: a-otf-ryumin-pr6n,serif;
/*font-family: '游明朝','Yu Mincho',YuMincho,serif;*/
font-weight: 600;
font-style: normal;
font-size:20px;
line-height: 2.2em;
}


@media screen and (max-width:1200px) {
.pageContainer .wwrecipe_contents .wwrecipe_lead_top p {
font-size:21px;
}
.pageContainer .wwrecipe_archive {
margin: 90px auto 180px;
}
}

@media screen and (max-width: 767px) {
.pageContainer .wwrecipe_contents .wwrecipe_lead_top p {
font-size:17px;
line-height: 1.9em;
}
.pageContainer .wwrecipe_archive {
margin: 40px auto 70px;
}
.youtube-wrapper {
margin-bottom: 70px;
}

}

/* 各レシピページ リード */
.pageContainer .wwrecipe_contents .wwrecipe_lead {
font-family: "Noto Sans JP", sans-serif;
font-size:16px;
text-align: center;
margin: 0 0 80px 0;
}
.pageContainer .wwrecipe_contents .wwrecipe_lead .recipe_title_box {
  display: block;
}
@media screen and (max-width: 767px) {
  .pageContainer .wwrecipe_contents .wwrecipe_lead .recipe_title_box img {
    width: 60px;
  }
}
.pageContainer .wwrecipe_contents .wwrecipe_lead .recipe_title_box .recipe_title .country {
  color: #666;
  font-size: 14px;
  display: block;
}
.pageContainer .wwrecipe_contents .wwrecipe_lead .recipe_title_box .recipe_title .title {
  display: block;
}
.pageContainer .wwrecipe_contents ul.wwrecipeList {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 25px 0;
}
.pageContainer .wwrecipe_contents ul.wwrecipeList li a div img {
  width: 100%;
}
.pageContainer .wwrecipe_contents ul.wwrecipeList li .recipe_ttl {
  display: flex;
  align-items: start;
  margin: 8px 0 0;
}
.pageContainer .wwrecipe_contents ul.wwrecipeList li .recipe_ttl img {
  width: 50px;
}
.pageContainer .wwrecipe_contents ul.wwrecipeList li .recipe_ttl span.name {
  display: block;
  margin-left: 1em;
  line-height: 1.25em;
}
.pageContainer .wwrecipe_contents ul.wwrecipeList li .recipe_ttl span.name .country {
  font-size: 12px;
  color: #9f9b9b;
  display: block;
  padding-top: 3px;
}
@media (min-width: 1321px) {
  .pageContainer .wwrecipe_contents ul.wwrecipeList li {
    width: calc((100% - 105px) / 4);
    margin: 0 35px 35px 0;
  }
  .pageContainer .wwrecipe_contents ul.wwrecipeList li:nth-child(4n) {
    margin-right: 0;
  }
}
@media (min-width: 921px) and (max-width: 1320px) {
  .pageContainer .wwrecipe_contents ul.wwrecipeList li {
    width: calc((100% - 70px) / 3);
    margin: 0 35px 35px 0;
  }
  .pageContainer .wwrecipe_contents ul.wwrecipeList li:nth-child(3n) {
    margin-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 920px) {
  .pageContainer .wwrecipe_contents ul.wwrecipeList li {
    width: calc((100% - 35px) / 2);
    margin: 0 35px 35px 0;
  }
  .pageContainer .wwrecipe_contents ul.wwrecipeList li:nth-child(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .pageContainer .wwrecipe_contents ul.wwrecipeList li {
    width: 100%;
    margin: 0 0 50px 0;
  }
}
.pageContainer .wwrecipe_contents h2 {
  display: flex;
  align-items: center;
  color: #ca0c15;
}
@media (max-width: 1320px) {
  .pageContainer .wwrecipe_contents {
    width: 90%;
  }
}
.pageContainer .topImage {
  margin: 100px auto 0;
  width: 100%;
  max-width: 1600px;
}
@media screen and (max-width: 767px) {
  .pageContainer .topImage {
    margin: 60px auto;
  }
}
.pageContainer .wwrecipeMovie {
  height: 560px;
  margin-bottom: 20px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 920px) {
  .pageContainer .wwrecipeMovie {
    height: auto;
    margin: -15px auto 10px;
  }
}
.pageContainer .wwrecipeMovie .movie {
  width: 940px;
  height: 0;
  padding-top: calc(940px * 0.5625);
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.pageContainer .wwrecipeMovie .movie iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 920px) {
  .pageContainer .wwrecipeMovie .movie {
    width: 100%;
    padding-top: calc(100% * 0.5625);
  }
}
.pageContainer .wwrecipeMovie.recipe001 {
  background-image: url("/img/fin01_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe002 {
  background-image: url("/img/fin02_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe003 {
  background-image: url("/img/fin03_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe004 {
  background-image: url("/img/fin04_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe005 {
  background-image: url("/img/fin05_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe006 {
  background-image: url("/img/fin06_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe007 {
  background-image: url("/img/fin07_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe008 {
  background-image: url("/img/fin08_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe009 {
  background-image: url("/img/fin09_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe010 {
  background-image: url("/img/fin10_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe011 {
  background-image: url("/img/fin11_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe012 {
  background-image: url("/img/fin12_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe013 {
  background-image: url("/img/fin13_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe014 {
  background-image: url("/img/fin14_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe015 {
  background-image: url("/img/fin15_bg.jpg");
}
.pageContainer .wwrecipeMovie.recipe016 {
  background-image: url("/img/fin16_bg.jpg");
}
.pageContainer section.recipeDetail {
  width: 100%;
  max-width: 1360px;
  padding: 0;
  /* 材料 */
  /* 作り方 */
  /* Pickup */
}
.pageContainer section.recipeDetail h2 {
  border-bottom: 1px solid #ca0c15;
  display: flex;
  align-items: center;
  color: #ca0c15;
  font-size: 100%;
}
@media screen and (max-width: 767px) {
  .pageContainer section.recipeDetail h2 {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .pageContainer section.recipeDetail h2 img {
    width: 55%;
    display: block;
    padding-bottom: 3px;
  }
}
.pageContainer section.recipeDetail h3 {
  margin: 10px 0 20px;
}
.pageContainer section.recipeDetail .ingredients {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 0 110px 0;
}
.pageContainer section.recipeDetail .ingredients .ingredients_box {
  width: 47%;
}
@media screen and (max-width: 920px) {
  .pageContainer section.recipeDetail .ingredients .ingredients_box {
    width: 100%;
  }
}
.pageContainer section.recipeDetail .ingredients .ingredients_box table {
  width: 100%;
}
.pageContainer section.recipeDetail .ingredients .ingredients_box table th {
  /* max-width: 70%; */
  border-bottom: 1px solid #b3b3b3;
  padding: 16px 0;
}
.pageContainer section.recipeDetail .ingredients .ingredients_box table td {
  text-align: right;
  border-bottom: 1px solid #b3b3b3;
  padding: 16px 0;
  /* white-space: nowrap; */
}
.pageContainer section.recipeDetail .procedure {
  display: flex;
  justify-content: space-between;
  /* align-items: flex-start; */
  flex-wrap: wrap;
  margin: 0 0 90px 0;
}
@media screen and (max-width: 920px) {
  .pageContainer section.recipeDetail .procedure {
    display: block;
  }
}
.pageContainer section.recipeDetail .procedure .process {
  display: flex;
  border-bottom: 1px solid #b3b3b3;
  padding: 20px 0 0px 54px;
  width: 48%;
  /*max-width:640px;*/
  position: relative;
  margin: 0 0 10px 0;
}
@media screen and (max-width: 920px) {
  .pageContainer section.recipeDetail .procedure .process {
    width: 100%;
    max-width: none;
    display: block;
  }
}
.pageContainer section.recipeDetail .procedure .process i {
  width: 38px;
  height: 38px;
  font-size: 21px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  background: #d7000f;
  position: absolute;
  left: 0;
  top: 24px;
}
.pageContainer section.recipeDetail .procedure .process p {
  flex: 4;
  margin-right: 15px;
}
.pageContainer section.recipeDetail .procedure .process figure {
  flex: 6;
  margin-bottom: 60px;
}
.pageContainer section.recipeDetail .pickup {
  display: flex;
  justify-content: flex-start;
  /*align-items:end;*/
  margin-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .pageContainer section.recipeDetail .pickup {
    flex-direction: column;
  }
}
.pageContainer section.recipeDetail .pickup .column {
  width: calc(100% / 3);
  border-right: 1px solid #ca0c15;
  padding: 0 35px;
  display: flex;
  flex-direction: column;
}
.pageContainer section.recipeDetail .pickup .column:nth-child(3n) {
  border-right: 0;
}
@media screen and (max-width: 767px) {
  .pageContainer section.recipeDetail .pickup .column {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #ca0c15;
    padding: 35px 0;
  }
}
.pageContainer section.recipeDetail .pickup .column p strong {
  color: #ca0c15;
  font-size: 19px;
}
.pageContainer section.recipeDetail .pickup .column img {
  margin-top: auto;
}
.pageContainer section.recipeDetail .pickup .column4 {
  width: 25%;
  border-right: 1px solid #ca0c15;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
}
.pageContainer section.recipeDetail .pickup .column4:nth-child(4n) {
  border-right: 0;
}
@media screen and (max-width: 767px) {
  .pageContainer section.recipeDetail .pickup .column4 {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #ca0c15;
    padding: 35px 0;
  }
}
.pageContainer section.recipeDetail .pickup .column4 p strong {
  color: #ca0c15;
  font-size: 19px;
}
.pageContainer section.recipeDetail .pickup .column4 img {
  margin-top: auto;
}
.pageContainer section.recipeDetail .pickup .column2 {
  width: 50%;
  border-right: 1px solid #ca0c15;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
}
.pageContainer section.recipeDetail .pickup .column2:nth-child(2n) {
  border-right: 0;
}
@media screen and (max-width: 767px) {
  .pageContainer section.recipeDetail .pickup .column2 {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #ca0c15;
    padding: 35px 0;
  }
}
.pageContainer section.recipeDetail .pickup .column2 p strong {
  color: #ca0c15;
  font-size: 19px;
}
.pageContainer section.recipeDetail .pickup .column2 img {
  margin-top: auto;
  max-width: 320px;
  margin: auto;
}

.gotoTop {
  width: 9em;
  margin: 70px auto 30px;
  text-align: center;
}
.gotoTop a {
  color: #d70c18;
}
.gotoTop a img {
  display: block;
  margin: 0 auto 10px;
}

.mb60 {
  margin-bottom: 60px;
}

.pb12 {
  padding-bottom: 12px;
}

/** youtube **/
@media screen and (max-width: 640px) {
  .mask {
    background: url("../img/maskbg.jpg") top center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    height: 200px;
  }
  .mask a {
    margin-top: 0;
    display: inline-block;
    padding: 20px;
    width: 50vw;
    border: solid 1px #ce0c14;
    background: #ce0c14;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    transition: 0.5s;
  }
  .mask a:hover {
    color: #ce0c14;
    background: #fff;
  }
}
.mask.active {
  background: url("../img/maskbg.jpg") top center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
}
.mask.active a {
  margin-top: 0;
  display: inline-block;
  padding: 20px;
  width: 50vw;
  border: solid 1px #ce0c14;
  background: #ce0c14;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  transition: 0.5s;
  margin-top: 15vh;
}
.mask.active a:hover {
  color: #ce0c14;
  background: #fff;
}
@media screen and (max-width: 640px) {
  .mask.active a {
    margin-top: 0;
  }
}

@media screen and (max-width: 640px) {
  .pageContainer {
    padding: 65px 0 0;
  }

  #wrap_main_visual {
    height: auto !important;
  }

  .tubular-container {
    display: none !important;
  }

  .mask.active {
    height: 200px !important;
  }

  .pageContainer #wrap_main_visual {
    margin-top: 0;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}