@font-face {
  font-family: "mplus";
  src: url("/recipe/seasonal/assets/font/mplus-1p-light.woff") format("woff"), url("/recipe/seasonal/assets/font/mplus-1p-light.ttf") format("truetype");
  font-weight: 300; }
@font-face {
  font-family: "mplus";
  src: url("/recipe/seasonal/assets/font/mplus-1p-regular.woff") format("woff"), url("/recipe/seasonal/assets/font/mplus-1p-regular.ttf") format("truetype");
  font-weight: 400; }
@font-face {
  font-family: "mplus";
  src: url("/brand/lifestory-new/assets/font/mplus/mplus-1p-medium.woff") format("woff"), url("/brand/lifestory-new/assets/font/mplus/mplus-1p-medium.ttf") format("truetype");
  font-weight: 500; }
@font-face {
  font-family: "mplus";
  src: url("/brand/lifestory-new/assets/font/mplus/mplus-1p-bold.woff") format("woff"), url("/brand/lifestory-new/assets/font/mplus/mplus-1p-bold.ttf") format("truetype");
  font-weight: 700; }
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/recipe/seasonal/assets/font/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/recipe/seasonal/assets/font/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(/recipe/seasonal/assets/font/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(/recipe/seasonal/assets/font/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /*inherit*/
  line-height: 1; /*inherit*/
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: 'liga';
     -moz-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

i.material-icons.home:before { content: "\e88a";  font-size: inherit; line-height: 1; vertical-align: -22%; margin-right: 5px; }

i.material-icons.archive:before { content: "\e03b";  font-size: inherit; line-height: 1; vertical-align: -24%; margin-right: 5px; }

i.material-icons.link:after { content: "\e315";  font-size: inherit; line-height: 1; vertical-align: -28%;}

i.material-icons.totop:before { content: "\e25a";  font-size: inherit; line-height: 1; vertical-align: ; margin-right: 5px; }

.rotate-270 {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.negativemargin_main { margin-top: -90px;}
@media screen and (max-width:64em){
.negativemargin_main { margin-top: -60px;}  
}

@media screen and (orientation: landscape) {
   /* 横向きの場合のスタイル */
  .landscape { display: block !important; }
  .portrait { display: none !important; }
}
@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
  .landscape { display: none !important; }
  .portrait { display: block !important; }
}

.container_wide .row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  width: 100%;
}

.slider_limit { width: 100%; margin: 0 auto;}
.slider_negative_m {margin-top: -60px !important;}
@media screen and (min-width:47.938em){
.slider_limit { max-width: 70%; margin: 0 auto;}
.slider_negative_m {margin-top: -120px !important;}
}
  
.containerInner {
  width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	}
  .containerInner.sec-end-height {
		height: 100%;
	}
	
#header-image h2 {
	position: absolute;
	left: 50%;
	bottom: 5%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	background: ;
	color: #fff;
	z-index: 2;
}
#header-image h2 i {
	font-size: .8em; line-height: 1; vertical-align: 16%; margin-right: 0; margin-top: ;
	}
#header-image .logo { position: absolute; top: 80px; left: 2rem; background: ; width: 100px; }
@media only screen and (min-width: 601px) {
  #header-image .logo { width: 180px; }
  }
@media only screen and (min-width: 993px) {
  #header-image .logo { width: 200px; }
  } 

#main_bg {
  height: 100%;
  width: 100%;
  position: absolute; /* PCではposition:fixed;で問題なく全画面背景として固定できるが、mobilesafariで効かないので擬似要素::beforeでbackgroundとfixedの設定をする。*/
  z-index: -1;
	}
#main_bg::before{
  content: "";
  display: block;
  position: absolute; /* position:fixed; けれども、scrollmagicでpin操作するので、ここでもfixedしない。*/
  top: 0;
  left: 0;
  z-index: ;
  width: 100%;
  height: 100vh;
  background:url('/recipe/seasonal/assets/img/18/bg_fixed.jpg') center center / cover no-repeat;
  -webkit-background-size:cover;
  }

/*** sectionIntro ***/
#introContainer {
  width: 100%;
  height: ;
  overflow: hidden;
  position: relative;
  z-index: 1;
  }
#intro_bg {
  width: 100%;
  height: ;
  position: relative;
	}


@media screen and (orientation: landscape) {
#intro_logo {
  width: 16%;
  left: 42%;
  position: absolute;
  z-index: 3;
  top: 10%;
	}
#intro_title {
  width: 40%;
  position: absolute;
  z-index: 3;
  bottom: 5%;
  right: 5%;
  padding: 1em; background: rgba(255, 255, 255, .7); color: #231815; text-align: left;
	}
#intro_title .intro_number { width: 20%; padding: 0; background: rgba(242, 66, 66, 0);}
#intro_title .title{
  z-index: 3;
  padding: .2em .2em .2em 0; color: #231815; text-align: left; font-size: 4em; line-height: 1.1; font-weight: 700;
	}
#intro_title .caption{
  z-index: 3;
  padding: 0; background: rgba(242, 66, 66, 0); color: #231815; text-align: left; font-size: 2em; line-height: 1.2; font-weight: 400;
	}
}
@media screen and (max-width: 1440px) and (orientation: landscape) {
#intro_title {
  width: 40%;
  position: absolute;
  z-index: 3;
  bottom: 5%;
  right: 5%;
  padding: 1em;
	}
#intro_title .intro_number { width: 20%;}
#intro_title .title{
  z-index: 3;
  font-size: 3.5em; line-height: 1.1;
	}
#intro_title .caption{
  z-index: 3;
  font-size: 1.6em; line-height: 1.2;
	}
}
@media screen and (max-width: 1280px) and (orientation: landscape) {
#intro_title {
  width: 40%;
  position: absolute;
  z-index: 3;
  bottom: 5%;
  right: 5%;
  padding: 1em;
	}
#intro_title .intro_number { width: 20%;}
#intro_title .title{
  z-index: 3;
  font-size: 3em; line-height: 1.1;
	}
#intro_title .caption{
  z-index: 3;
  font-size: 1.4em; line-height: 1.2;
	}
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
#intro_title {
  width: 40%;
  position: absolute;
  z-index: 3;
  bottom: 5%;
  right: 5%;
  padding: 1em;
	}
#intro_title .intro_number { width: 20%;}
#intro_title .title{
  z-index: 3;
  font-size: 2.5em; line-height: 1.1;
	}
#intro_title .caption{
  z-index: 3;
  font-size: 1.2em; line-height: 1.2;
	}
}
@media screen and (max-width: 960px) and (orientation: landscape) {
#intro_title {
  width: 40%;
  position: absolute;
  z-index: 3;
  bottom: 5%;
  right: 5%;
  padding: 1em;
	}
#intro_title .intro_number { width: 20%;}
#intro_title .title{
  z-index: 3;
  font-size: 2em; line-height: 1.1;
	}
#intro_title .caption{
  z-index: 3;
  font-size: 1.2em; line-height: 1.2;
	}
}
@media screen and (max-width: 800px) and (orientation: landscape) {
#intro_title {
  width: 70%;
  position: absolute;
  z-index: 3;
  bottom: 3%;
  right: 5%;
  padding: 1em;
	}
#intro_title .intro_number { width: 15%;}
#intro_title .title{
  z-index: 3;
  font-size: 1.3em; line-height: 1.1;
	}
#intro_title .caption{
  z-index: 3;
  font-size: 1em; line-height: 1.2;
	}
}
/*landscape*/

/*portrait*/
@media screen and (orientation: portrait) {
#intro_logo {
  width: 20%;
  left: 40%;
  position: absolute;
  z-index: 3;
  top: 12%;
	}
#intro_title {
  width: 90%;
  position: absolute;
  z-index: 3;
  bottom: 3%;
  right: 5%;
  padding: .5em; background: rgba(255, 255, 255, .7); color: #231815; text-align: left;
	}
#intro_title .intro_number { width: 20%; padding: 0; background: rgba(242, 66, 66, 0);}
#intro_title .title{
  z-index: 3;
  padding: .2em .2em .2em 0; text-align: left; font-size: 1.2em; line-height: 1.1; font-weight: 700;
	}
#intro_title .caption{
  z-index: 3;
  padding: 0; text-align: left; font-size: .8em; line-height: 1.1; font-weight: 400;
	}
} 
@media screen and (min-width: 480px) and (orientation: portrait) {
#intro_title {
  width: 70%;
  bottom: 5%;
  right: 5%;
	}
#intro_title .title{
  font-size: 1.4em;
	}
#intro_title .caption{
  font-size: 1em;
	}
}
@media screen and (min-width: 768px) and (orientation: portrait) {
#intro_title {
  width: 45%;
  bottom: 8%;
  right: 5%;
	}
#intro_title .title{
  font-size: 1.5em;
	}
#intro_title .caption{
  font-size: 1.1em;
	}
}
@media screen and (min-width: 1024px) and (orientation: portrait) {
#intro_title {
  width: 45%;
  bottom: 8%;
  right: 5%;
	}
#intro_title .title{
  font-size: 2em;
	}
#intro_title .caption{
  font-size: 1.5em;
	}
}
/*portrait*/


/*** section001 ***/
#section001 table {
    border: none;
  }
#section001 table thead {
    display: none;
  }
#section001 table tr {
    display: block;
    margin-bottom: 0px;
  }
#section001 table td {
    display: block;
    padding: 4px;
    text-align: right;
  }
#section001 table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }


#section001 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 4;
  top: 0;
  background: rgba(71, 146, 225, 0);
  }
#section001 .list { background: rgba(255, 255, 255, .7); padding: .5em; margin-top: 5%;}
#section001 .coriander { position: absolute; width: 40%; top: 10%; left: -10%; }
#section001 .udon { position: absolute; width: 45%; top: 32%; left: -2%; }
#section001 .tomato { position: absolute; width: 35%; bottom: 25%; left: -5%; }
#section001 .shimeji { position: absolute; width: 32%; top: 14%; right: -7%; }
#section001 .negi { position: absolute; width: 45%; bottom: 40%; right: -5%; }
#section001 .ebi { position: absolute; width: 20%; bottom: 25%; right: 30%; }
@media screen and (min-width: 540px) {
#section001 .coriander { position: absolute; width: 40%; top: 10%; left: -10%; }
#section001 .udon { position: absolute; width: 45%; top: 32%; left: -2%; }
#section001 .tomato { position: absolute; width: 35%; bottom: 25%; left: -5%; }
#section001 .shimeji { position: absolute; width: 32%; top: 14%; right: -7%; }
#section001 .negi { position: absolute; width: 40%; bottom: 25%; right: -5%; }
#section001 .ebi { position: absolute; width: 20%; bottom: 35%; right: 35%; }
}
@media screen and (min-width: 680px) {
#section001 .list { background: rgba(255, 255, 255, .7); padding: 2em;}
#section001 .coriander { position: absolute; width: 30%; top: 0; left: -5%; }
#section001 .udon { position: absolute; width: 40%; top: 30%; left: -10%; }
#section001 .tomato { position: absolute; width: 25%; bottom: 5%; left: -5%; }
#section001 .shimeji { position: absolute; width: 20%; top: 2%; right: -2%; }
#section001 .negi { position: absolute; width: 30%; bottom: 7%; right: -5%; }
#section001 .ebi { position: absolute; width: 16%; bottom: 12%; right: 30%; }
}
/*** section001 ***/
  
/*** section002 ***/
#section002 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 5;
  top: 0;
  background: rgba(71, 225, 120, 0);
  }
#section002 .list { background: rgba(255, 255, 255, .7); padding: 1em; margin-top: 5%;}
#section002 .materialA { margin-bottom: 40%; margin-top: 5%;}
#section002 .leaf { position: absolute; width: 35%; top: 10%; left: -2%; }
#section002 .coriander { position: absolute; width: 20%; top: 3%; right: 3%; }
#section002 .ebi { position: absolute; width: 90%; bottom: 1%; left: 5%; }
/*** section002 ***/

/*** section003 ***/
#section003 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 6;
  top: 0;
  background: rgba(250, 245, 86, 0);
  }
#section003 .chef_inner { position: absolute; top: 12%; left: -4%; width: 35%; }
#section003 .chef { position: absolute; top: 10%; right: -4%; width: 35%; }
#section003 .video { margin-top: 5%;}
#section003 .list { background: rgba(255, 255, 255, .7); padding: 1em; margin-top: 5%; margin-bottom: 5%;}
/*** section003 ***/


/*** section004 ***/
#section004 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 6;
  top: 0;
  background: rgba(240, 44, 201, 0);
  }
#section004 .appetite { margin-top: 0;}
#section004 .list { background: rgba(255, 255, 255, .7); padding: 1em; margin-top: 5%; margin-bottom: 5%;}
/*** section004 ***/

/*** #section_end ***/
#section_end .subtitle { position: absolute; top: 50px; left: 120px; color: #6f848d;}
#section_end .subtitle h2 { font-weight: 300; font-size: 3em; margin: 0; padding: 0; }
#section_end .subtitle p { font-weight: 300; font-size: 1.2em; margin: 0; padding: 0; }
@media only screen and (min-width: 601px) {
  #section_end .subtitle { top: 80px; left: 30%;}
  #section_end .subtitle h2 { font-weight: 300; font-size: 4em; margin: 0; padding: 0; }
}
@media only screen and (min-width: 993px) {
  #section_end .subtitle { top: 100px; left: 20%;}
  #section_end .subtitle h2 { font-weight: 300; font-size: 5.5em; margin: 0; padding: 0; }
}
#section_end .number { position: absolute; top: 1.5rem; left: 1rem; width: 100px;}
@media only screen and (min-width: 601px) {
  #section_end .number { top: 2rem; left: 1.5rem; width: 145px;}
}
@media only screen and (min-width: 993px) {
  #section_end .number { top: 3rem; left: 2rem; width: 190px;}
}
#section_end .text01 {margin-top: 100px; background: rgba(0, 0, 0, 0); color: #000;}
@media only screen and (min-width: 601px) {
  #section_end .text01 {margin-top: 20px; padding-right: 2em; background: rgba(0, 0, 0, 0);}
}
@media only screen and (min-width: 993px) {
  #section_end .text01 {margin-top: 30px; background: rgba(0, 0, 0, 0);}
}
#section_end .video {margin-top: 280px; background: rgba(0, 0, 0, 0); color: #000;}
@media only screen and (min-width: 601px) {
  #section_end .video {margin-top: 280px; background: rgba(0, 0, 0, 0);}
}
@media only screen and (min-width: 993px) {
  #section_end .video {margin-top: 280px; background: rgba(0, 0, 0, 0);}
}
/*** #section_end ***/ 

.plyr input[type=range]::-ms-fill-lower {
	background:#56cd6a;
}
.plyr input[type=range]:active::-webkit-slider-thumb {
	background:#56cd6a;
}
.plyr input[type=range]:active::-moz-range-thumb {
	background:#56cd6a;
}
.plyr input[type=range]:active::-ms-thumb {
	background:#56cd6a;
}
.plyr--video .plyr__controls button.tab-focus:focus,.plyr--video .plyr__controls button:hover {
	background:#56cd6a;
}
.plyr--audio .plyr__controls {
	padding:10px;
	border-radius:inherit;
	background:#fff;
	border:1px solid #56cd6a;
	color:#56cd6a;
}
.plyr--audio .plyr__controls button.tab-focus:focus,.plyr--audio .plyr__controls button:hover,.plyr__play-large {
	background:#56cd6a;
}
.plyr__progress--played,.plyr__volume--display {
	color:#56cd6a;
}
.plyr--audio .plyr__progress--buffer,.plyr--audio .plyr__volume--display {
	background: rgba(56, 166, 69, 0.66);
}

.plyr--audio .plyr__progress--buffer {
	color: rgba(56, 166, 69, 0.66);
}
.plyr--audio.plyr--loading .plyr__progress--buffer {
	background-color:rgba(56, 166, 69, 0.66);
}