@charset "UTF-8";

@font-face {
  font-family: 'NotoSansRegular';
  src: url("/recipe/stewmix_ss/fonts/NotoSansJP-Regular.eot") format("eot"), url("/recipe/stewmix_ss/fonts/NotoSansJP-Regular.woff") format("woff"), url("/recipe/stewmix_ss/fonts/NotoSansJP-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansMedium';
  src: url("/recipe/stewmix_ss/fonts/NotoSansJP-Medium.eot") format("eot"), url("/recipe/stewmix_ss/fonts/NotoSansJP-Medium.woff") format("woff"), url("/recipe/stewmix_ss/fonts/NotoSansJP-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansBold';
  src: url("/recipe/stewmix_ss/fonts/NotoSansJP-Bold.eot") format("eot"), url("/recipe/stewmix_ss/fonts/NotoSansJP-Bold.woff") format("woff"), url("/recipe/stewmix_ss/fonts/NotoSansJP-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

.mainContents{
padding: 0;
margin: 0;
color:#4b0000;
}

.mainContents main {
overflow: hidden;
}
@media screen and (max-width: 768px) {
.mainContents main {
font-size: 14px;
}
}

.mainContents ul {
padding-inline-start: 0;
}

.mainContents li {
list-style-type: none;
}

.mainContents h2,
.mainContents h3,
.mainContents h4,
.mainContents h5,
.mainContents h6,
.mainContents p {
margin: 0;
}

.mainContents img {
vertical-align: bottom;
}
@media screen and (max-width: 768px) {
.mainContents img {
width: 100%;
height: auto;
}
}

.mainContents a:hover {
opacity: 0.6;
}

/* ===========================================
 * parts
 * ======================================== */
.mainContents .for_sp{display: none;}
@media screen and (max-width: 768px) {
.mainContents .for_sp{display: block;}
}

.mainContents .for_pc{display: block;}
@media screen and (max-width: 768px) {
.mainContents .for_pc{display: none;}
}

/* fadeの設定  */
.mainContents .fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s, transform 0.75s;
}
.mainContents .fade.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .gradation{
/*display: inline-block;*/
background:linear-gradient(60deg, #00a5d0, #6ac6e5, #00a5d0, #6ac6e5, #00a5d0);
background: -webkit-linear-gradient(60deg, #00a5d0, #6ac6e5, #00a5d0, #6ac6e5, #00a5d0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.mainContents .ta_c{text-align: center !important;}
.mainContents .ta_l{text-align: left !important;}
.mainContents .ta_r{text-align: right !important;}

.mainContents .p-re{position: relative;}

/* clearFix */
.mainContents .cf:after{
content:"."; 
display:block; 
height:0; 
clear:both; 
visibility:hidden;
}

/* ===========================================
 * sec_kv
 * ======================================== */

.mainContents .sec_kv{
width: 100%;
height: 600px;
background: url("/recipe/stewmix_ss/images/kv_bg.jpg") no-repeat;
background-position: center center;
background-size: cover;
/*padding-top: 31.25%; /* (画像の高さ / 画像の横幅) × 100 */
}

@media (min-width: 769px) and (max-width: 1919px) {
.mainContents .sec_kv{
height:calc(100vw / 1919 * 600);
}
}

@media screen and (max-width: 768px) {
.mainContents .sec_kv{
height: calc(100vw / 750 * 1027);
/*padding-top: 137%; /* (画像の高さ / 画像の横幅) × 100 */
background: url("/recipe/stewmix_ss/images/kv_bg_sp.jpg") no-repeat;
background-position: center center;
background-size: cover;
}
}

.mainContents .sec_kv .wrap{
max-width: 1920px;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .wrap{
max-width: 100%;
}
}

.mainContents .sec_kv h2{
position: absolute;
width: 62%;
top: 15%;
left:0;
right:0;
margin:0 auto;
opacity: 0;
animation: kv_fadein 0.8s 0.5s ease-in-out forwards;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv h2{
width: 96%;
top: calc(100vw / 750 * 350);
z-index: 30;
}
}

.mainContents .sec_kv .kv_img01{
position: absolute;
width: 96%;
top: 0;
left:0;
right:0;
margin:0 auto;
opacity: 0;
animation: kv_fadein 0.8s 1.5s ease-in-out forwards;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img01{
width: 90%;
top: calc(100vw / 750 * 40);
left:0;
right:0;
}
}

.mainContents .sec_kv .kv_img02{
position: absolute;
width: 100%;
top: 0;
left:0;
right:0;
margin:0 auto;
opacity: 0;
animation: kv_fadein 0.8s 2.25s ease-in-out forwards;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img02{
width: 88%;
top: calc(100vw / 750 * 70);
right:calc(100vw / 750 * 40);
}
}

.mainContents .sec_kv .kv_img03{
mix-blend-mode:screen;
position: absolute;
width: 100%;
top: 0;
left:0;
right:0;
margin:0 auto;
opacity: 0;
animation: kv_fadein 0.8s 2.5s ease-in-out forwards;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img03{
width: 76%;
top: 0;
left:calc(100vw / 750 * 150);
margin:0 auto;
}
}

@keyframes kv_fadein {
0% {opacity: 0;}
100% {opacity: 1;}
}


/* ===========================================
 * sec_read
 * ======================================== */
.mainContents .sec_read{
width: 100%;
margin: 0 auto;
padding: 0;
background: url("/recipe/stewmix_ss/images/bg_sec_read.jpg") no-repeat;
background-size: cover;
background-position: center;
}

.mainContents .sec_read .wrap{
width: 1300px;
margin: 0 auto;
padding: 0;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read .wrap{
width: calc(100vw / 1299 * 1105);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read .wrap{
width: 100%;
}
}

.mainContents .sec_read h3{
width: 930px;
margin: 0 auto;
padding: 80px 0 170px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read h3{
width: calc(100vw / 1299 * 837);
padding: calc(100vw / 1299 * 68) 0 calc(100vw / 1299 * 145);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read h3{
width: 96%;
margin: 0 auto;
padding: calc(100vw / 750 * 100) 0 calc(100vw / 750 * 120);
}
}

.mainContents .sec_read .wd_text{
position: absolute;
width: 230px;
top:-54px;
left:155px;
z-index: 11;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read .wd_text{
width: calc(100vw / 1299 * 196);
top:calc(100vw / 1299 * -46);
left:calc(100vw / 1299 * 132);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read .wd_text{
position: absolute;
width: 42%;
top:calc(100vw / 750 * 80);
left:calc(100vw / 750 * 220);
}
}

.mainContents .sec_read .wd_bg{
position: absolute;
width: 330px;
top:-120px;
left:100px;
z-index: 10;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read .wd_bg{
width: calc(100vw / 1299 * 281);
top:calc(100vw / 1299 * -102);
left:calc(100vw / 1299 * 85);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read .wd_bg{
position:static;
width: 60%;
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_read ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1200px;
margin: 0 auto;
padding-bottom: 50px;
align-items: flex-end;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read ul{
width: calc(100vw / 1299 * 1020);
padding-bottom: calc(100vw / 1299 * 43);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read ul{
display:block;
width: 82%;
margin: 0 auto;
padding-bottom: calc(100vw / 750 * 110);
}
}

.mainContents .sec_read ul li.box1{
width: 530px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read ul li.box1{
width: calc(100vw / 1299 * 451);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read ul li.box1{
width: 90%;
margin: 0 auto;
text-align: center;
padding: 0 0 0 calc(100vw / 750 * 25);
}
}

.mainContents .sec_read ul li.box2,
.mainContents .sec_read ul li.box3{
background: #ffffe1;
border-radius: 20px;
padding: 20px 0 20px;
margin: 0 0 15px 20px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read ul li.box2,
.mainContents .sec_read ul li.box3{
border-radius: calc(100vw / 1299 * 17);
padding: calc(100vw / 1299 * 17) 0 calc(100vw / 1299 * 17);
margin: 0 0 calc(100vw / 1299 * 13) calc(100vw / 1299 * 17);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read ul li.box2,
.mainContents .sec_read ul li.box3{
width: 100%;
margin: calc(100vw / 750 * 24) auto 0;
padding: calc(100vw / 750 * 24) 0;
}
}

.mainContents .sec_read ul li.box2 p,
.mainContents .sec_read ul li.box3 p{
font-size: 22px;
font-weight: bold;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read ul li.box2 p,
.mainContents .sec_read ul li.box3 p{
font-size: calc(100vw / 1299 * 19);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read ul li.box2 p,
.mainContents .sec_read ul li.box3 p{
font-size: calc(100vw / 750 * 32);
line-height: 1.5;
float:left;
width: 46%;
}
}

@media screen and (max-width: 768px) {
.mainContents .sec_read ul li.box2 p{
padding: calc(100vw / 750 * 8)  0 0 calc(100vw / 750 * 30);
}
}

@media screen and (max-width: 768px) {
.mainContents .sec_read ul li.box3 p{
padding: calc(100vw / 750 * 42) 0 0 calc(100vw / 750 * 30);
}
}

.mainContents .sec_read ul li.box2 div,
.mainContents .sec_read ul li.box3 div{
text-align: center;
margin: 0 auto;
width: 230px;
padding: 0 30px 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read ul li.box2 div,
.mainContents .sec_read ul li.box3 div{
width: calc(100vw / 1299 * 196);
padding: 0 calc(100vw / 1299 * 26) 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read ul li.box2 div,
.mainContents .sec_read ul li.box3 div{
float:right;
width: 40%;
padding: 0 calc(100vw / 750 * 40) 0 0;
}
}

.mainContents .sec_read .wrap .kazari_01{position: absolute; top:305px; left:-40px;}
.mainContents .sec_read .wrap .kazari_02{position: absolute; top:520px; right:-30px;}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_read .wrap .kazari_01{width:calc(100vw / 1299 * 39); top:calc(100vw / 1299 * 260); left:calc(100vw / 1299 * -34);}
.mainContents .sec_read .wrap .kazari_02{width:calc(100vw / 1299 * 36); top:calc(100vw / 1299 * 442); right:calc(100vw / 1299 * -26);}
}
@media screen and (max-width: 768px) {
.mainContents .sec_read .wrap .kazari_01{width:calc(100vw / 750 * 40); top:calc(100vw / 750 * 770); left:calc(100vw / 750 * 85);}
.mainContents .sec_read .wrap .kazari_02{width:calc(100vw / 750 * 40); top:calc(100vw / 750 * 150); right:calc(100vw / 750 * 90);}
}


/* ===========================================
 * sec_anchor
 * ======================================== */

.mainContents .sec_anchor{
width: 100%;
margin: 0 auto;
padding: 0;
background: url("/recipe/stewmix_ss/images/bg_sec_anchor.jpg") repeat-x;
}
@media screen and (max-width: 768px) {
.mainContents .sec_anchor .wrap{
background: url("/recipe/stewmix_ss/images/bg_sec_anchor_sp.jpg") no-repeat;
background-size: cover;
}
}

.mainContents .sec_anchor .wrap{
width: 1300px;
margin: 0 auto;
padding: 80px 0 90px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_anchor .wrap{
width: calc(100vw / 1299 * 1105);
padding: calc(100vw / 1299 * 68) 0 calc(100vw / 1299 * 76);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_anchor .wrap{
width: 100%;
padding: calc(100vw / 750 * 70) 0 calc(100vw / 750 * 80);
}
}

.mainContents .sec_anchor h3{
width: 1160px;
margin: 0 auto 50px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_anchor h3{
width: calc(100vw / 1299 * 986);
margin: 0 auto calc(100vw / 1299 * 43);
text-align: center;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_anchor h3{
width: 82%;
margin: 0 auto calc(100vw / 750 * 40);
}
}

.mainContents .sec_anchor ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1160px;
margin: 0 auto;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_anchor ul{
width: calc(100vw / 1299 * 986);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_anchor ul{
display: block;
width: 76%;
margin: 0 auto;
}
}

.mainContents .sec_anchor ul li{
width: 570px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_anchor ul li{
width: calc(100vw / 1299 * 485);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_anchor ul li{
width: 100%;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_anchor ul li:nth-child(1){
margin: 0 auto calc(100vw / 750 * 30);
}
}


/* ===========================================
 * sec_recipe_a
 * ======================================== */

.mainContents .sec_recipe_a{
width: 100%;
margin: 0 auto;
padding: 85px 0 85px;
background: url("/recipe/stewmix_ss/images/bg_sec_recipe_a.jpg") repeat;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a{
padding: calc(100vw / 1299 * 73) 0 calc(100vw / 1299 * 73);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a{
padding: calc(100vw / 750 * 100) 0 calc(100vw / 750 * 20);
}
}

.mainContents .sec_recipe_a .wrap{
width: 1300px;
margin: 0 auto;
background: url("/recipe/stewmix_ss/images/bg_sec_recipe_wrap.jpg") repeat;
border-top-left-radius: 250px;
border-top-right-radius: 240px;
border-bottom-right-radius: 210px;
border-bottom-left-radius: 200px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .wrap{
width: calc(100vw / 1299 * 1105);
margin: 0 auto;
border-top-left-radius: calc(100vw / 1299 * 213);
border-top-right-radius: calc(100vw / 1299 * 204);
border-bottom-right-radius: calc(100vw / 1299 * 179);
border-bottom-left-radius: calc(100vw / 1299 * 170);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .wrap{
width: 88%;
border-top-left-radius: calc(100vw / 750 * 125);
border-top-right-radius: calc(100vw / 750 * 120);
border-bottom-right-radius: calc(100vw / 750 * 105);
border-bottom-left-radius: calc(100vw / 750 * 100);
padding: 0 0 calc(100vw / 750 * 40);
}
}

.mainContents .sec_recipe_a h3{
width: 740px;
margin: 0 auto;
text-align: center;
padding: 80px 0 60px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a h3{
width: calc(100vw / 1299 * 629);
padding: calc(100vw / 1299 * 68) 0 calc(100vw / 1299 * 51);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a h3{
width: 62%;
margin: 0 auto;
text-align: center;
padding: calc(100vw / 750 * 60) 0 calc(100vw / 750 * 70);
}
}

.mainContents .sec_recipe_a .inner1{
width: 1120px;
margin:0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner1{
width: calc(100vw / 1299 * 952);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner1{
width: 94%;
}
}

.mainContents .sec_recipe_a .inner1 .box_L {
float: left;
width: 50%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner1 .box_L {
float:none;
width: 100%;
}
}

.mainContents .sec_recipe_a .inner1 .box_L p{
text-align: left;
font-size: 20px;
line-height: 1.8;
font-weight: bold;
padding: 70px 0 0 35px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner1 .box_L p{
font-size: calc(100vw / 1299 * 17);
padding: calc(100vw / 1299 * 60) 0 0 calc(100vw / 1299 * 28);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner1 .box_L p{
text-align: center;
font-size: calc(100vw / 750 * 32);
line-height: 1.7;
padding: 0 0 calc(100vw / 750 * 60);
}
}

.mainContents .sec_recipe_a .inner1 .box_R {
float: right;
width: 50%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner1 .box_R {
float: none;
width: 94%;
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_recipe_a h4{
width: 620px;
margin: 0 auto;
text-align: center;
padding: 30px 0 50px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a h4{
width: calc(100vw / 1299 * 527);
padding: calc(100vw / 1299 * 26) 0 calc(100vw / 1299 * 43);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a h4{
width: 88%;
padding: calc(100vw / 750 * 24) 0 0;
}
}

.mainContents .sec_recipe_a .inner2{
width: 1160px;
margin:0 auto 70px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2{
width: calc(100vw / 1299 * 952);
margin:0 auto calc(100vw / 1299 * 60);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2{
width: 88%;
margin:calc(100vw / 750 * 180) auto calc(100vw / 750 * 120);
}
}

.mainContents .sec_recipe_a h5{
width: 145px;
margin: 0;
padding: 0 0 5px;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a h5{
width: calc(100vw / 1299 * 124);
padding: 0 0 calc(100vw / 1299 * 5);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a h5{
width: 36%;
padding: 0 0 calc(100vw / 750 * 6);
}
}

.mainContents .sec_recipe_a .inner2 p{
font-size: 18px;
line-height: 1.7;
font-weight: bold;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 p{
font-size: calc(100vw / 1299 * 16);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 p{
font-size: calc(100vw / 750 * 26);
line-height: 1.7;
}
}

.mainContents .sec_recipe_a .inner2 .box_L {
float: left;
width: 38%;
text-align: left;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_L {
float: none;
width: 100%;
}
}

.mainContents .sec_recipe_a .inner2 .box_L .column_box{
padding: 10px 0 0;
margin: 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 .box_L .column_box{
padding: calc(100vw / 1299 * 9) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_L .column_box{
padding: 0;
margin: 0;
}
}

.mainContents .sec_recipe_a .inner2 .box_L .kagi{
width: 12%;
float: left;
text-align: left;
padding: 16px 2px 0 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 .box_L .kagi{
padding: calc(100vw / 1299 * 14) calc(100vw / 1299 * 2) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_L .kagi{
width: 12%;
padding: calc(100vw / 750 * 20) 2% 0 0;
}
}

.mainContents .sec_recipe_a .inner2 .box_L .text{
width: 45%;
float: left;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 .box_L .text{
width: 46%;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_L .text{
width: 50%;
}
}

.mainContents .sec_recipe_a .inner2 .box_L .phot{
width: 40%;
float: right;
padding: 25px 0 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 .box_L .phot{
width: 39%;
padding: calc(100vw / 1299 * 22) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_L .phot{
width: 33%;
padding: calc(100vw / 750 * 46) 0 0;
}
}

.mainContents .p_line {
position: relative;
height: 1.7em;
}
.mainContents .p_line::before {
content: "";
display: block;
width: 100%;
position: absolute;
margin-top: 0.8em;
border-top: 1px dashed #000;
}
.mainContents .p_line .name {
position: absolute;
padding-right: 1ex;
background-color: #fffef9;
}
.mainContents .p_line .quantity {
right: 0;
position: absolute;
padding-left: 1ex;
background-color: #fffef9;
}

.mainContents .sec_recipe_a .inner2 .box_R {
float: right;
width: 44%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_R {
margin: calc(100vw / 750 * 50) auto 0;
float: none;
width: 100%;
}
}

.mainContents .sec_recipe_a .inner2 .box_R dl{
margin: 0 auto;
padding: 20px 0 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 .box_R dl{
padding: calc(100vw / 1299 * 17) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_R dl{
padding: calc(100vw / 750 * 30) 0 0;
}
}

.mainContents .sec_recipe_a .inner2 .box_R dt{
float: left;
width: 7%;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_R dt{
width: 7%;
padding: calc(100vw / 750 * 6) 0 0;
}
}

.mainContents .sec_recipe_a .inner2 .box_R dd {
float: left;
width: 90%;
font-size:18px;
text-align: left;
font-weight: bold;
margin: -3px 0 0;
padding: 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 .box_R dd {
font-size:calc(100vw / 1299 * 16);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_R dd {
width: 90%;
font-size: calc(100vw / 750 * 26);
line-height: 1.7;
padding: 0 0 0 1%;
}
}

.mainContents .sec_recipe_a .inner2 .box_R .num {
height:22px;
width:22px;
border-radius:50%;
line-height:23px;
text-align:center;
background:#8cd0e7;
font-size:16px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 .box_R .num {
height:calc(100vw / 1299 * 19);
width:calc(100vw / 1299 * 19);
line-height:calc(100vw / 1299 * 20);
font-size:calc(100vw / 1299 * 14);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .box_R .num {
height:calc(100vw / 750 * 32);
width:calc(100vw / 750 * 32);
line-height:calc(100vw / 750 * 32);
font-size: calc(100vw / 750 * 26);
}
}

.mainContents .sec_recipe_a .inner2 .kobako{
width: 180px;
position: absolute;
top:10px;
left:435px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner2 .kobako{
width: calc(100vw / 1299 * 153);
top:calc(100vw / 1299 * 9);
left:calc(100vw / 1299 * 370);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner2 .kobako{
width: 50%;
top:calc(100vw / 750 * -130);
left:calc(100vw / 750 * 280);
}
}

.mainContents .sec_recipe_a .inner3{
width: 1160px;
height: 423px;
background: url(../images/recipe_a_bg.png) no-repeat;
background-size: cover;
margin:0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner3{
width: calc(100vw / 1299 * 986);
height: calc(100vw / 1299 * 360);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner3{
width: 88%;
height: auto;
background-image: none;
background-color: #fffee9;
border-radius: calc(100vw / 750 * 80);
margin:calc(100vw / 750 * 120) auto 0;
}
}

.mainContents .sec_recipe_a .inner3 ul{
margin: 0;
padding: 0;
text-align: left;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner3 ul{
padding: 0 calc(100vw / 750 * 20) calc(100vw / 750 * 60);
}
}

.mainContents .sec_recipe_a .inner3 li{
font-size: 16px;
line-height: 1.5;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner3 li{
font-size: calc(100vw / 1299 * 14);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner3 li{
font-size: calc(100vw / 750 * 26);
}
}

.mainContents .sec_recipe_a .inner3 li span{
font-size: 21px;
font-weight: bold;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner3 li span{
font-size: calc(100vw / 1299 * 18);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner3 li span{
font-size: calc(100vw / 750 * 36);
}
}

.mainContents .sec_recipe_a .inner3 h6{
width: 420px;
position: absolute;
top:-40px;
left:-20px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner3 h6{
width: calc(100vw / 1299 * 357);
top:calc(100vw / 1299 * -34);
left:calc(100vw / 1299 * -17);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner3 h6{
width: 78%;
position: absolute;
top: calc(100vw / 750 * -70);
left: calc(100vw / 750 * -20);
}
}

.mainContents .sec_recipe_a .inner3 li.text1{position: absolute; top:40px; left:515px;}
.mainContents .sec_recipe_a .inner3 li.text2{position: absolute; top:265px; left:180px;}
.mainContents .sec_recipe_a .inner3 li.text3{position: absolute; top:220px; left:515px;}
.mainContents .sec_recipe_a .inner3 li.text4{position: absolute; top:104px; left:784px;}
.mainContents .sec_recipe_a .inner3 li.text5{position: absolute; top:286px; left:784px;}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner3 li.text1{top:calc(100vw / 1299 * 34); left:calc(100vw / 1299 * 438);}
.mainContents .sec_recipe_a .inner3 li.text2{top:calc(100vw / 1299 * 226); left:calc(100vw / 1299 * 153);}
.mainContents .sec_recipe_a .inner3 li.text3{top:calc(100vw / 1299 * 187); left:calc(100vw / 1299 * 438);}
.mainContents .sec_recipe_a .inner3 li.text4{top:calc(100vw / 1299 * 89); left:calc(100vw / 1299 * 667);}
.mainContents .sec_recipe_a .inner3 li.text5{top:calc(100vw / 1299 * 244); left:calc(100vw / 1299 * 667);}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner3 li.text1{position: static; padding: calc(100vw / 750 * 250) 0 0;}
.mainContents .sec_recipe_a .inner3 li.text2{position: static; padding: calc(100vw / 750 * 40) 0 0;}
.mainContents .sec_recipe_a .inner3 li.text3{position: static; padding: calc(100vw / 750 * 40) 0 0;}
.mainContents .sec_recipe_a .inner3 li.text4{position: static; padding: calc(100vw / 750 * 140) 0 0;}
.mainContents .sec_recipe_a .inner3 li.text5{position: static; padding: calc(100vw / 750 * 140) 0 0;}
}

.mainContents .sec_recipe_a .inner3 .illust1{position: absolute; top:60px; left:420px;}
.mainContents .sec_recipe_a .inner3 .illust2{position: absolute; top:255px; left:65px;}
.mainContents .sec_recipe_a .inner3 .illust3{position: absolute; top:230px; left:430px;}
.mainContents .sec_recipe_a .inner3 .illust4{position: absolute; top:20px; left:880px;}
.mainContents .sec_recipe_a .inner3 .illust5{position: absolute; top:220px; left:930px;}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner3 .illust1{width:calc(100vw / 1299 * 63); top:calc(100vw / 1299 * 51); left:calc(100vw / 1299 * 357);}
.mainContents .sec_recipe_a .inner3 .illust2{width:calc(100vw / 1299 * 86); top:calc(100vw / 1299 * 217); left:calc(100vw / 1299 * 56);}
.mainContents .sec_recipe_a .inner3 .illust3{width:calc(100vw / 1299 * 58); top:calc(100vw / 1299 * 196); left:calc(100vw / 1299 * 366);}
.mainContents .sec_recipe_a .inner3 .illust4{width:calc(100vw / 1299 * 167); top:calc(100vw / 1299 * 17); left:calc(100vw / 1299 * 748);}
.mainContents .sec_recipe_a .inner3 .illust5{width:calc(100vw / 1299 * 152); top:calc(100vw / 1299 * 187); left:calc(100vw / 1299 * 791);}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner3 .illust1{width:34%; top:calc(100vw / 750 * 215); left:calc(100vw / 750 * 350);}
.mainContents .sec_recipe_a .inner3 .illust2{width:26%; top:calc(100vw / 750 * 450); left:calc(100vw / 750 * 400);}
.mainContents .sec_recipe_a .inner3 .illust3{width:36%; top:calc(100vw / 750 * 660); left:calc(100vw / 750 * 320);}
.mainContents .sec_recipe_a .inner3 .illust4{width:54%; top:calc(100vw / 750 * 880); left:calc(100vw / 750 * 220);}
.mainContents .sec_recipe_a .inner3 .illust5{width:44%; top:calc(100vw / 750 * 1140); left:calc(100vw / 750 * 270);}
}

.mainContents .sec_recipe_a .wrap .kazari_l01{position: absolute; top:40px; right:-120px;}
.mainContents .sec_recipe_a .wrap .kazari_l02{position: absolute; top:105px; right:65px;}
.mainContents .sec_recipe_a .wrap .kazari_l03{position: absolute; top:150px; right:200px;}
.mainContents .sec_recipe_a .wrap .kazari_l04{position: absolute; top:225px; left:504px;}
.mainContents .sec_recipe_a .wrap .kazari_l05{position: absolute; top:245px; left:-220px;}
.mainContents .sec_recipe_a .wrap .kazari_f01{position: absolute; top:-50px; left:-310px; mix-blend-mode:screen;}
.mainContents .sec_recipe_a .wrap .kazari_f02{position: absolute; bottom:-70px; right:-265px; mix-blend-mode:screen;}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .wrap .kazari_l01{width:calc(100vw / 1299 * 45); top:calc(100vw / 1299 * 34); right:calc(100vw / 1299 * -52);}
.mainContents .sec_recipe_a .wrap .kazari_l02{width:calc(100vw / 1299 * 21); top:calc(100vw / 1299 * 90); right:calc(100vw / 1299 * 66);}
.mainContents .sec_recipe_a .wrap .kazari_l03{width:calc(100vw / 1299 * 62); top:calc(100vw / 1299 * 128); right:calc(100vw / 1299 * 170);}
.mainContents .sec_recipe_a .wrap .kazari_l04{width:calc(100vw / 1299 * 28); top:calc(100vw / 1299 * 192); left:calc(100vw / 1299 * 429);}
.mainContents .sec_recipe_a .wrap .kazari_l05{width:calc(100vw / 1299 * 74); top:calc(100vw / 1299 * 209); left:calc(100vw / 1299 * -67);}
.mainContents .sec_recipe_a .wrap .kazari_f01{width:calc(100vw / 1299 * 389); top:calc(100vw / 1299 * -43); left:calc(100vw / 1299 * -264);}
.mainContents .sec_recipe_a .wrap .kazari_f02{width:calc(100vw / 1299 * 353); bottom:calc(100vw / 1299 * -60); right:calc(100vw / 1299 * -226);}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .wrap .kazari_l01{width:calc(100vw / 750 * 60); top:calc(100vw / 750 * -50); right:calc(100vw / 750 * -20);}
.mainContents .sec_recipe_a .wrap .kazari_l02{display: none;}
.mainContents .sec_recipe_a .wrap .kazari_l03{width:calc(100vw / 750 * 86); top:calc(100vw / 750 * 40); right:calc(100vw / 750 * -20);}
.mainContents .sec_recipe_a .wrap .kazari_l04{width:calc(100vw / 750 * 60); top:calc(100vw / 750 * 290); left:calc(100vw / 750 * 470);}
.mainContents .sec_recipe_a .wrap .kazari_l05{width:calc(100vw / 750 * 76); top:calc(100vw / 750 * 210); left:calc(100vw / 750 * -30);}
.mainContents .sec_recipe_a .wrap .kazari_f01{width:calc(100vw / 750 * 300); top:calc(100vw / 750 * -140); left:calc(100vw / 750 * -70);}
.mainContents .sec_recipe_a .wrap .kazari_f02{width:calc(100vw / 750 * 300); bottom:calc(100vw / 750 * -130); right:calc(100vw / 750 * -70)}
}

.mainContents .sec_recipe_a .inner4{
width: 940px;
margin:0 auto;
text-align: center;
padding: 30px 0 50px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner4{
width: calc(100vw / 1299 * 799);
padding: calc(100vw / 1299 * 26) 0 calc(100vw / 1299 * 43);
}
}

.mainContents .sec_recipe_a .inner4 p{
font-size: 12px;
text-align: right;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_a .inner4 p{
font-size: calc(100vw / 1299 * 11);
}
}

@media screen and (max-width: 768px) {
.mainContents .sec_recipe_a .inner5{
width: 90%;
margin:0 auto;
text-align: center;
padding: calc(100vw / 750 * 80) 0 0;
}
.mainContents .sec_recipe_a .inner5 p{
font-size: calc(100vw / 750 * 24);
text-align: right;
}
}


/* ===========================================
 * sec_recipe_b
 * ======================================== */
.mainContents .sec_recipe_b{
width: 100%;
margin: 0 auto;
padding: 85px 0 0;
background: url("/recipe/stewmix_ss/images/bg_sec_recipe_b.jpg") repeat;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b{
padding: calc(100vw / 1299 * 73) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b{
padding: calc(100vw / 750 * 100) 0 0;
}
}

.mainContents .sec_recipe_b .wrap{
width: 1300px;
margin: 0 auto;
background: url("/recipe/stewmix_ss/images/bg_sec_recipe_wrap.jpg") repeat;
border-top-left-radius: 250px;
border-top-right-radius: 240px;
border-bottom-right-radius: 210px;
border-bottom-left-radius: 200px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .wrap{
width: calc(100vw / 1299 * 1105);
border-top-left-radius: calc(100vw / 1299 * 213);
border-top-right-radius: calc(100vw / 1299 * 204);
border-bottom-right-radius: calc(100vw / 1299 * 179);
border-bottom-left-radius: calc(100vw / 1299 * 170);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .wrap{
width: 88%;
border-top-left-radius: calc(100vw / 750 * 125);
border-top-right-radius: calc(100vw / 750 * 120);
border-bottom-right-radius: calc(100vw / 750 * 105);
border-bottom-left-radius: calc(100vw / 750 * 100);
padding: 0 0 calc(100vw / 750 * 40);
}
}

.mainContents .sec_recipe_b h3{
width: 700px;
margin: 0 auto;
text-align: center;
padding: 80px 0 50px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b h3{
width: calc(100vw / 1299 * 595);
padding: calc(100vw / 1299 * 68) 0 calc(100vw / 1299 * 43);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b h3{
width: 62%;
margin: 0 auto;
text-align: center;
padding: calc(100vw / 750 * 60) 0 calc(100vw / 750 * 70);
}
}

.mainContents .sec_recipe_b .inner1{
width: 900px;
margin:0 auto;
text-align: center;
padding: 0 0 40px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .inner1{
width: calc(100vw / 1299 * 765);
padding: 0 0 calc(100vw / 1299 * 34);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner1{
width: 94%;
padding: 0 0 0;
}
}

.mainContents .sec_recipe_b .inner1 h4{
width: 100%;
margin: 0 auto;
text-align: center;
padding: 0 0 50px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .inner1 h4{
padding: 0 0 calc(100vw / 1299 * 43);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner1 h4{
width: 90%;
margin: 0 auto;
text-align: center;
padding: calc(100vw / 750 * 70) 0 calc(100vw / 750 * 30);
}
}

.mainContents .sec_recipe_b .inner1 .box_L {
float: left;
width: 59%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner1 .box_L {
float:none;
width: 100%;
}
}

.mainContents .sec_recipe_b .inner1 .box_L p{
text-align: left;
font-size: 20px;
line-height: 1.8;
font-weight: bold;
padding: 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .inner1 .box_L p{
font-size: calc(100vw / 1299 * 17);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner1 .box_L p{
text-align: center;
font-size: calc(100vw / 750 * 32);
line-height: 1.7;
}
}

.mainContents .sec_recipe_b .inner1 .box_R {
float: right;
width: 40%;
border: 1px solid #4b0000;
border-radius: 25px;
background: #ffffff;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner1 .box_R {
float:none;
width: 90%;
margin: 0 auto;
text-align: center;
border-radius: calc(100vw / 750 * 26);
}
}

.mainContents .sec_recipe_b .inner1 .box_R h5{
padding: 20px 0 20px;
margin: 0 auto;
width: 220px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .inner1 .box_R h5{
padding: calc(100vw / 1299 * 17) 0 calc(100vw / 1299 * 10);
width: calc(100vw / 1299 * 187);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner1 .box_R h5{
padding: calc(100vw / 750 * 20) 0 calc(100vw / 750 * 20);
margin: 0 auto;
width: 42%;
}
}

.mainContents .sec_recipe_b .inner1 .box_R p{
padding: 0 40px 30px;
text-align: left;
font-size: 16px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .inner1 .box_R p{
padding: 0 calc(100vw / 1299 * 34) calc(100vw / 1299 * 20);
font-size: calc(100vw / 1299 * 14);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner1 .box_R p{
padding: 0 calc(100vw / 750 * 30) calc(100vw / 750 * 26);
font-size: calc(100vw / 750 * 24);
line-height: 1.7;
}
}

.mainContents .sec_recipe_b .inner2{
width: 1160px;
margin:0 auto;
text-align: center;
padding: 0 0 20px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .inner2{
width: calc(100vw / 1299 * 986);
padding: 0 0 calc(100vw / 1299 * 17);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner2{
width: 94%;
margin:0 auto;
text-align: center;
padding: calc(100vw / 750 * 60) 0 calc(100vw / 750 * 0);
}
}

.mainContents .slider_area {
width: 970px;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider_area {
width: calc(100vw / 1299 * 825);
}
}
@media screen and (max-width: 768px) {
.mainContents .slider_area {
display: none;
}
}

.mainContents .slick-slide {
margin: 10px 20px 20px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slick-slide {
margin: calc(100vw / 1299 * 9) calc(100vw / 1299 * 17) calc(100vw / 1299 * 17);
}
}

.mainContents .slider_area .recipe{
width: 940px;
text-align: center;
background: #ffffeb;
border-radius: 20px;
box-shadow: 3px 3px 6px 3px #c7c7c7;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider_area .recipe{
width: calc(100vw / 1299 * 799);
box-shadow: calc(100vw / 1299 * 3) calc(100vw / 1299 * 3) calc(100vw / 1299 * 6) calc(100vw / 1299 * 3) #c7c7c7;
}
}

.mainContents .slider_area .recipe img{
display: inline;
}

.mainContents .slider_area .recipe h6{
padding: 35px 0 30px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider_area .recipe h6{
padding: calc(100vw / 1299 * 30) 0 calc(100vw / 1299 * 26);
}
}

.mainContents .slider_area .flat_box{
padding: 0 50px 15px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider_area .flat_box{
padding: 0 calc(100vw / 1299 * 43) calc(100vw / 1299 * 13);
}
}

.mainContents .slider_area .recipe .fl {
float: left !important;
width: 52%;
}

.mainContents .slider_area .recipe .fr {
float: right !important;
width: 46%;
}

.mainContents .slider_area .recipe .btn{
margin: 10px auto 0;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider_area .recipe .btn{
margin: calc(100vw / 1299 * 9) auto 0;
}
}

.mainContents .slider_area .recipe p{
text-align: left;
font-size:20px;
font-weight: bold;
padding: 0 50px 30px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider_area .recipe p{
font-size:calc(100vw / 1299 * 17);
padding: 0 calc(100vw / 1299 * 43) calc(100vw / 1299 * 26);
}
}

/* スライダーの設定 ① */
.mainContents .slider .slick-prev{
left: -70px;
background: url(../images/howtocook_list_arrow_prev.png)top center/contain no-repeat;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider .slick-prev{
left: calc(100vw / 1299 * -60);
}
}

.mainContents .slider .slick-next{
right: -70px;
background: url(../images/howtocook_list_arrow_next.png)top center/contain no-repeat;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider .slick-next{
right: calc(100vw / 1299 * -60);
}
}

.mainContents .slider .slick-prev,
.mainContents .slider .slick-next{
width: 50px;
height: 50px;
z-index: 100;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider .slick-prev,
.mainContents .slider .slick-next{
width: calc(100vw / 1299 * 43);
height: calc(100vw / 1299 * 43);
}
}

.mainContents .slider .slick-prev::before,
.mainContents .slider .slick-next::before {
  content: "";
  color: #000; 
}

.mainContents .slider .slick-disabled{
display: none!important;
}

.mainContents .slider .slick-dots li{
margin: 0 2px;
bottom: -20px!important;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider .slick-dots li{
margin: 0 calc(100vw / 1299 * 2);
bottom: calc(100vw / 1299 * -17)!important;
}
}

.mainContents .slider .slick-dots li button::before{
content: "";
width: 15px;
height: 15px;
border-radius: 15px;
background: #dbcac6;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .slider .slick-dots li button::before{
width: calc(100vw / 1299 * 13);
height: calc(100vw / 1299 * 13);
border-radius: calc(100vw / 1299 * 13);
}
}

.mainContents .slider .slick-dots li.slick-active button::before{
background: #4b0000;
}

.mainContents .sec_recipe_b .sp_recipe_area{
display: none;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .sp_recipe_area{
display: block;
width: 90%;
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_recipe_b .sp_recipe_area ul{
width: 100%;
}

.mainContents .sec_recipe_b .sp_recipe_area li{
width: 100%;
text-align: center;
border-radius: calc(100vw / 750 * 26);
box-shadow: 3px 3px 6px 3px #c7c7c7;
margin: 0 auto calc(100vw / 750 * 50);
}

.mainContents .sec_recipe_b .sp_recipe_area .box1{
background: #ffffeb;
border-top-left-radius: calc(100vw / 750 * 26);
border-top-right-radius: calc(100vw / 750 * 26);
border-bottom-right-radius: calc(100vw / 750 * 0);
border-bottom-left-radius: calc(100vw / 750 * 0);
}

.mainContents .sec_recipe_b .sp_recipe_area .box2{
background: #ffffff;
border-top-left-radius: calc(100vw / 750 * 0);
border-top-right-radius: calc(100vw / 750 * 0);
border-bottom-right-radius: calc(100vw / 750 * 26);
border-bottom-left-radius: calc(100vw / 750 * 26);
}

.mainContents .sec_recipe_b .sp_recipe_area h6{
padding: calc(100vw / 750 * 25) 0 calc(100vw / 750 * 20);
width: 68%;
margin: 0 auto;
text-align: center;
}

.mainContents .sec_recipe_b .sp_recipe_area .phot{
padding: 0 0 calc(100vw / 750 * 20);
width: 84%;
margin: 0 auto;
text-align: center;
}

.mainContents .sec_recipe_b .sp_recipe_area .btn{
padding: 0 0 calc(100vw / 750 * 20);
width: 84%;
margin: 0 auto;
text-align: center;
}

.mainContents .sec_recipe_b .sp_recipe_area .glaph{
padding: calc(100vw / 750 * 25) 0 calc(100vw / 750 * 15);
width: 88%;
margin: 0 auto;
text-align: center;
}

.mainContents .sec_recipe_b .sp_recipe_area .text{
padding: 0 0 calc(100vw / 750 * 40);
width: 84%;
margin: 0 auto;
text-align: center;
}

.mainContents .sec_recipe_b .sp_recipe_area .text p{
text-align: left;
font-size: calc(100vw / 750 * 24);
line-height: 1.7;
font-weight: bold;
}

.mainContents .sec_recipe_b .inner3{
width: 940px;
margin:0 auto;
text-align: center;
padding: 0 0 50px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .inner3{
width: calc(100vw / 1299 * 765);
padding: 0 0 calc(100vw / 1299 * 43);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner3{
width: 86%;
padding: 0 0 calc(100vw / 750 * 50);
}
}

.mainContents .sec_recipe_b .inner3 p{
font-size: 12px;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .inner3 p{
font-size: calc(100vw / 1299 * 11);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .inner3 p{
font-size: calc(100vw / 750 * 24);
}
}

.mainContents .sec_recipe_b .wrap .researcher_pc{
position: absolute;
bottom: -70px;
right:-120px;
width: 220px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .wrap .researcher_pc{
bottom: calc(100vw / 1299 * -60);
right: calc(100vw / 1299 * -80);
width: calc(100vw / 1299 * 187);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .box_R .researcher_sp{
position: absolute;
bottom: calc(100vw / 750 * -30);
right:calc(100vw / 750 * -90);
width: 34%;
}
}

.mainContents .sec_recipe_b .wrap2{
width: 1160px;
padding: 40px 0 20px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .wrap2{
width: calc(100vw / 1299 * 935);
padding: calc(100vw / 1299 * 34) 0 calc(100vw / 1299 * 17);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .wrap2{
width: 90%;
padding: calc(100vw / 750 * 70) 0 calc(100vw / 750 * 20);
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_recipe_b .wrap2 p{
font-size: 12px;
text-align: right;
margin: 0 40px 0 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .wrap2 p{
font-size: calc(100vw / 1299 * 11);
margin: 0 calc(100vw / 1299 * 34) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe_b .wrap2 p{
font-size: calc(100vw / 750 * 24);
margin: 0;
}
}

.mainContents .sec_recipe_b .wrap .kazari_sp{width:calc(100vw / 750 * 580); position: absolute; top:calc(100vw / 750 * 280); left:calc(100vw / 750 * 32);}
.mainContents .sec_recipe_b .wrap .kazari_l01{position: absolute; top:163px; left:-155px;}
.mainContents .sec_recipe_b .wrap .kazari_l02{position: absolute; top:509px; left:-245px;}
.mainContents .sec_recipe_b .wrap .kazari_l03{position: absolute; top:870px; left:-185px;}
.mainContents .sec_recipe_b .wrap .kazari_l04{position: absolute; top:1380px; left:-225px;}
.mainContents .sec_recipe_b .wrap .kazari_r01{position: absolute; top:250px; right:-225px;}
.mainContents .sec_recipe_b .wrap .kazari_r02{position: absolute; top:700px; right:-135px;}
.mainContents .sec_recipe_b .wrap .kazari_r03{position: absolute; top:1060px; right:-240px;}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_recipe_b .wrap .kazari_l01{width:calc(100vw / 1299 * 95); top:calc(100vw / 1299 * 139); left:calc(100vw / 1299 * -112);}
.mainContents .sec_recipe_b .wrap .kazari_l02{width:calc(100vw / 1299 * 74); top:calc(100vw / 1299 * 433); left:calc(100vw / 1299 * -122);}
.mainContents .sec_recipe_b .wrap .kazari_l03{width:calc(100vw / 1299 * 83); top:calc(100vw / 1299 * 740); left:calc(100vw / 1299 * -112);}
.mainContents .sec_recipe_b .wrap .kazari_l04{width:calc(100vw / 1299 * 130); top:calc(100vw / 1299 * 1173); left:calc(100vw / 1299 * -142);}
.mainContents .sec_recipe_b .wrap .kazari_r01{width:calc(100vw / 1299 * 95); top:calc(100vw / 1299 * 213); right:calc(100vw / 1299 * -112);}
.mainContents .sec_recipe_b .wrap .kazari_r02{width:calc(100vw / 1299 * 64); top:calc(100vw / 1299 * 595); right:calc(100vw / 1299 * -90);}
.mainContents .sec_recipe_b .wrap .kazari_r03{width:calc(100vw / 1299 * 100); top:calc(100vw / 1299 * 901); right:calc(100vw / 1299 * -114);}
}

.mainContents .sec_recipe_b sub{
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
bottom: -.1em
}


/* ===========================================
 * sec_bnn
 * ======================================== */

.mainContents .sec_bnn{
width: 100%;
margin: 0 auto;
padding: 0;
background: #ffffff;
}

.mainContents .sec_bnn .wrap{
width: 1160px;
margin: 0 auto;
padding: 80px 0 0;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_bnn .wrap{
width: calc(100vw / 1299 * 986);
padding: calc(100vw / 1299 * 68) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_bnn .wrap{
width: 78%;
margin: 0 auto;
padding: calc(100vw / 750 * 90) 0 0;
}
}

.mainContents .sec_bnn ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 1160px;
margin: 0 auto;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_bnn ul{
width: calc(100vw / 1299 * 986);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_bnn ul{
display: block;
width: 100%;
}
}

.mainContents .sec_bnn ul li{
width: 550px;
}
@media (min-width: 769px) and (max-width: 1299px) {
.mainContents .sec_bnn ul li{
width: calc(100vw / 1299 * 467);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_bnn ul li{
width: 100%;
}
}

@media screen and (max-width: 768px) {
.mainContents .sec_bnn ul li:nth-child(1){
margin: 0 auto calc(100vw / 750 * 50);
}
}

/* ===========================================
 * sns_area
 * ======================================== */
 
.mainContents .sns_area {
display: flex;
justify-content: center;
margin-top: 50px;
}

.mainContents .sns_area li:not(:first-child) {
margin-left: 49px;
}
@media screen and (max-width: 768px) {
.mainContents .sns_area li {
width: 15.47%;
}
.mainContents .sns_area li:not(:first-child) {
margin-left: 10.7%;
}
}

/* ===========================================
 * animation
 * ======================================== */

/* KV以外のアニメーション設定 */

.mainContents .anime01{
transform-origin: center bottom;
animation: floating-x1 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes floating-x1 {
0% {
transform: translateX(-10%);
}
100% {
transform: translateX(10%);
}
}

.mainContents .anime02{
transform-origin: center bottom;
animation: floating-x2 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes floating-x2 {
0% {
transform: translateX(10%);
}
100% {
transform: translateX(-10%);
}
}


.mainContents .anime03{
animation: size 3s ease-in-out infinite;
-webkit-animation: size 3s ease-in-out infinite;
-moz-animation: size 3s ease-in-out infinite;
}
@keyframes size{
0% { transform: scale(0.95); }
50% { transform: scale(1); }
100% { transform: scale(0.95); }
}


.mainContents .anime04{
animation: blink1 2s linear infinite;
}
@keyframes blink1 {
0% {opacity: 1;}
80% {opacity: 1;}
90% {opacity: 0.5;}
100% {opacity: 1;}
}

.mainContents .anime05{
animation: blink 2s linear infinite;
}
@keyframes blink {
0% {opacity: 1;}
10% {opacity: 0.5;}
20% {opacity: 1;}
100% {opacity: 1;}
}