@charset "UTF-8";


/* IE9 */
:root .content2 .changeImg.img03 {
    top: 120px\0/;
    left: -117px\0/;
    z-index: 1\0/;
}

/*****************************************************
　Torofuwa
*****************************************************/
#torofuwa .sp-show{ display: none; }

#torofuwa { -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; border:solid 3px #f39800; overflow:hidden;}
#torofuwa img { display:block;}
.contents .title { }
.movie { width:640px; height:360px; margin:0 auto 23px; overflow:hidden; position:relative;}
.content2 {
  height: 633px;
  position: relative;
  overflow: hidden;
  background:url(../img/bg_01.png) no-repeat;
  background-size: cover;
}
.content2 .title{
  display: inline-block;
  margin: 45px 141px 0;
}
.content2 .changeImg{
  display: inline-block;
  position: absolute;
}
#torofuwa .content2 .changeImg img{
  display: inline-block;
}
.content2 .changeImg.img01{
  right: 0px;
  bottom: 6px;
  z-index: 5;
}
.content2 .changeImg.img02{
    right: 65px;
    top: 120px;
  z-index: 3;
}
.content2 .changeImg.img03{
  left: 0px;
	bottom: 0;
  z-index: 1;
}
.recipe_movie{
  text-align: center;
  background: url(../img/recipe_movie_bg.png) no-repeat;
  background-size: cover;
}
.recipe_movie .title.sp-hide,
#torofuwa .recipe_movie .movie-demo{
  display: inline-block;
}
.recipe_movie .title.sp-hide{
  margin: 47px 0 32px;
}
.recipe_movie .movie-demo{
  margin-bottom: 14px;
}
.content_recipe {
  background:url(../img/bg_recipe.png) no-repeat;
  background-size: cover;
}
.content_recipe .thumbnails {
  position:relative;
  height:344px;
  padding-left: 66px;
  padding-right: 77px;
}
.content_recipe .thumbnailsTop,
.content_recipe .thumbnailsBtm { display:none;}
.content_recipe .thumbnails{
  text-align: center;
}
.content_recipe .thumbnailsTop img,
.content_recipe .thumbnailsBtm img{ width: 100%}
.content_recipe ul{
  position: relative;
  top: 66px;
}
#torofuwa .content_recipe img{
  float: left;
}
#torofuwa .content_recipe .img{
  position: relative;
  top: 63px;
}
#torofuwa .content_recipe .txt.sp-hide{
  position: relative;
  top: 60px;
  left: 51px;
}
.content3 {
  background:url(../img/bg_02.png) no-repeat center top;
}
.content3 .thumbnails {
  position:relative;
  height:939px;
}
.content3 .thumbnailsTop,
.content3 .thumbnailsBtm { display:none;}
.content3 .thumbnailsTop img,
.content3 .thumbnailsBtm img{ width: 100%}
.content3 .thumbnails{
  text-align: center;
}
.content3 ul{
  position: relative;
  top: 66px;
}
.content3 .changeImg{
  position: relative;
  width: 743px;
  text-align: left;
}
#torofuwa .content3 img{
  display: inline-block;
}
.content3 .num{
  position: absolute;
  left: 7%;
}
.content3 .img{
  margin-left: 69px;
}
.content3 .text-area{
  position: absolute;
  max-width: 60%;
  height: 100px;
  top: calc(50% - 50px);
  left: 331px;
  line-height: 20px;
}
.content3 .text-area p{
  display: table-cell;
  vertical-align: middle;
}
.content3 ul .changeImg:after{
  content:"";
  display: block;
  width: 80px;
  height: 20px;
  background: url(../img/arrow.png);
  background-size: 80px 20px;
  margin-left: 146px;
}
.content3 ul .changeImg:last-of-type:after{
  display: none;
}
.content4 {
  background:url(../img/bg_03.png) repeat center 135px;
}
.content4 .title{
  display: inline-block;
  margin: 48px 324px 31px;
}

.content5 {
  background-image: url(../img/content_bg.jpg);
  margin-bottom: -24px;
}

.content5 .title{
  text-align: center;
}

.content5 .title img{
  display: inline-block !important;
  margin: 40px 0;
}

.content4:after { content:'.'; display:block; clear:both; height:0; visibility:hidden;}
.content4 h3 { width:330px; margin:0 auto 13px; }
.content4 .movie { margin-bottom:20px;}
.content4 h4 { width:250px; margin:0 auto 30px;}
.btn { margin-left:275px; height:188px;}
.btn li { display:inline; float:left; width:142px; height:142px; margin-right:50px; text-indent:-9999px; }
.btn li a { display:block; width:142px; height:142px;}
.btn li.time15 { background-image:url(../img/btn_a_on_pc.gif);}
.btn li.time30 { background-image:url(../img/btn_b_on_pc.gif);}
.btn li.time15 a { background-image:url(../img/btn_a_off_pc.gif);}
.btn li.time30 a { background-image:url(../img/btn_b_off_pc.gif);}
.btn li,
.btn li a { -webkit-background-size:142px 142px; -moz-background-size:142px 142px; -ms-background-size:142px 142px; -o-background-size:142px 142px; background-size:142px 142px; background-repeat:no-repeat; background-position: left top;}
.btn li.on a { filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}
#movie1,
#movie2 { position:absolute; left:-9999px;}
#movie1.on,
#movie2.on { left:0;}
.playerBtn { position:absolute; left:-9999px;}


/*youtube*/
.youtube{
 width: 100%;
 padding-top: 56.25%;
 position: relative;
}
.youtube-box{
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 height: 100%;
}
.youtube-box iframe {
 width: 100%;
 height: 100%;
}

@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 736px) {

/*****************************************************
　Torofuwa
*****************************************************/
#torofuwa .sp-show{ display: block; }
#torofuwa .sp-hide{ display: none; }
#torofuwa { margin:0 3px;}
#torofuwa img { max-width:100%;}
#main { overflow-x:hidden;}
#main .contents { background-repeat:repeat; background-position: center top;}
#main .contents .inner { width:100%; margin:0 auto; position:relative;}
#main .content1 { background-size:auto 125%; height:auto;}
#main .content2 { background-size:auto 90%; height:auto;}
#main .content_recipe { background-size:auto 125%; height:auto;}
#main .content3 { background-size:auto 125%; height:auto;}
#main .content4 { background-size:auto 125%; height:auto;}
.movie { width:255px; height:143px; margin:0 auto 10px; overflow:hidden; position:relative;}
.contents .title { margin-bottom:0;}
.content1 h1 { width:100%; position:relative; left:0;}
.content2 { height: 800px; }
.content2 .title{
  width: 80%;
  margin: 23px auto 24px;
}
.content2 .changeImg.img01{
  bottom: initial;
  width: 33%;
  right: 0px;
  top: 60%;
}
.content2 .changeImg.img02{
  width: 100%;
  text-align: center;
  top: initial;
  right: initial;
}
.content2 .changeImg.img03{
  width: 100%;
  text-align: center;
  left: initial;
  bottom: -17px;
}
#torofuwa .recipe_movie .title.sp-show{
  display: inline-block;
  width: 90%;
}
.recipe_movie .title.sp-show{
  margin: 51px 0 27px;
}
.recipe_movie .movie-demo{
  width: 95%;
  margin-bottom: 35px;
}
.content_recipe .thumbnails { position:relative; width:100%; height:auto;  padding-right:0;padding-left:0; background:url(../img/bg_recipe_sp.png) repeat-y center top; left:0; -webkit-background-size:100% auto; -moz-background-size:100% auto; -ms-background-size:100% auto; -o-background-size:100% auto; background-size:100% auto;}
.content_recipe .thumbnailsTop { display:block;  width:100%; position:relative; z-index:2;}
.content_recipe .thumbnailsBtm { display:block; width:100%; position:relative; z-index:2; }
.content_recipe .thumbnails ul{
  width: 76%;
  margin: 0 calc(24%/2);
  top: 0;
}
#torofuwa .content_recipe img.sp-show{
  float: none;
  display: block;
  margin: 0 auto;
}
#torofuwa .content_recipe .img{
  display: inline-block;
  width: 43%;
  top: initial;
  float: none;
  margin-bottom: 31px;
}
.content3 .thumbnails { position:relative; width:100%; height:auto; background:url(../img/bg_02_sp.png) repeat-y center top; left:0; -webkit-background-size:100% auto; -moz-background-size:100% auto; -ms-background-size:100% auto; -o-background-size:100% auto; background-size:100% auto;}
.content3 .thumbnailsTop { display:block; width:100%; position:relative; z-index:2;}
.content3 .thumbnailsBtm { display:block; position:relative; z-index:2; }
#torofuwa .thumbnailsTop img{
  display: block;
}
.content3 .thumbnails ul{
  width: 76%;
  margin: 0 auto;
  top: 0;
}
#torofuwa .content3 .num {
  width: auto;
  bottom: auto;
  top: 0;
  left: -5px;
}
.content3 .img{
  width: 100%;
  margin: 0;
}
.content3 .text-area{
  position: relative;
  top:0; left:0;
  max-width: 100%;
  height: auto;
}
.content3 .changeImg{
  width: 100%;
}
.content3 ul .changeImg:after{
  margin: 7px calc((100% - 80px)/2);
}
.content4 { padding-bottom:0; margin-bottom:0;}
.content4 .title{ margin: 34px 126px 11px; }
.content4 h3 { width:168px; margin:0 auto 13px; }
.content4 .torofuwa01,
.content4 .torofuwa02 { display:none;}
.content4 .movie { margin-bottom:9px;}
.content4 h4 { width:149px; margin:0 auto 17px;}
.btn { margin-left:0; text-align:center; width:227px; margin:0 auto; height:129px;}
.btn li { display:table-cell; float:none; width:96px; height:96px; margin-right:0; text-indent:-9999px; margin:0 10px;}
.btn li a { display:block; width:96px; height:96px;}
/*.btn li.time15 { background:url(../img/btn_a_on.gif) no-repeat left top; -webkit-background-size:96px 96px; -moz-background-size:96px 96px; -ms-background-size:96px 96px; -o-background-size:96px 96px; background-size:96px 96px; padding-right:34px;}*/
/*.btn li.time30 { background:url(../img/btn_b_on.gif) no-repeat center top; -webkit-background-size:96px 96px; -moz-background-size:96px 96px; -ms-background-size:96px 96px; -o-background-size:96px 96px; background-size:96px 96px;}*/
.btn li.time15 { background:url(../img/btn_a_on.gif) no-repeat center top; -webkit-background-size:96px 96px; -moz-background-size:96px 96px; -ms-background-size:96px 96px; -o-background-size:96px 96px; background-size:96px 96px;}
.btn li.time30 { background:url(../img/btn_b_on.gif) no-repeat left top; -webkit-background-size:96px 96px; -moz-background-size:96px 96px; -ms-background-size:96px 96px; -o-background-size:96px 96px; background-size:96px 96px; padding-right:34px;}
.btn li.time15 a { background:url(../img/btn_a_off.gif) no-repeat left top; -webkit-background-size:96px 96px; -moz-background-size:96px 96px; -ms-background-size:96px 96px; -o-background-size:96px 96px; background-size:96px 96px;}
.btn li.time30 a { background:url(../img/btn_b_off.gif) no-repeat left top; -webkit-background-size:96px 96px; -moz-background-size:96px 96px; -ms-background-size:96px 96px; -o-background-size:96px 96px; background-size:96px 96px;}
.btn li.on a { filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}
#movie1,
#movie2 { position:absolute; left:-9999px;}
#movie1.on,
#movie2.on { left:0;}
.playerBtn { position:absolute; left:-9999px;}



}
@media screen and (max-width: 686px){
.content2{ height: 990px; }
}
@media screen and (max-width: 596px){
.content2{ height: 970px; }
}
@media screen and (max-width: 566px){
.content2{ height: 930px; }
}
@media screen and (max-width: 536px){
.content2{ height: 890px; }
}
@media screen and (max-width: 506px){
.content2{ height: 910px; }
}
@media screen and (max-width: 476px){
.content2{ height: 850px; }
}
@media screen and (max-width: 446px){
.content2{ height: 790px; }
}
@media screen and (max-width: 416px){
.content2{ height: 730px; }
}
@media screen and (max-width: 386px){
.content2{ height: 670px; }
}
@media screen and (max-width: 356px){
.content2{ height: 610px; }
}
@media screen and (max-width: 326px){
.content2{ height: 550px; }
}