@charset "utf-8";
@media only screen and (max-width:640px){
article{
  padding:0 0 8%;
	min-width:auto;
	min-width:initial;
	font-size:3.4vw;
  background:url(../images/bg.png) center top;
  background-size:180% auto;
}
.only_smart{
	display:block !important;
}
.only_smart_i{
	display:inline-block !important;
}
.only_pc{
	display:none !important;
}


#mv{
	padding:0 0 1%;
  background:url(../images/mv_bg_s.png)no-repeat center top;
  background-size:100% auto;
}
#mv h1{
  margin-top:0;
}
#mv ul.nav{
  margin-bottom:18%;
}
#mv ul.nav li{
  width:45%;
	display:inline-block;
	vertical-align:top;
	margin:0 0.3%;
}
#mv h2{
  margin-bottom:8%;
}
#mv h2 img{
  width:20%;
}
#mv p{
	padding:3% 0;
	font-size:3.2vw;
  background:url(../images/mv_bg2_s.png)no-repeat center center;
  background-size:100% auto;
}
#mv nav{
  width:auto;
  padding-top:3%;
}
#mv nav ul li{
  width:44%;
  margin:0.5%;
}



/* .cont */
.cont{
  padding-bottom:8%;
}
.cont h3{
  margin-bottom:0;
}
.cont h3 + p{
  margin:0 0 1%;
  padding:2% 0;
  line-height:2;
  font-size:3.4vw;
}
.cont > ul{
  padding:0 5%;
}
.cont > ul > li{
  width:49%;
  padding:5% 2% 0px;
  margin:1.5% 0;
}
.cont > ul > li section{
  padding:8% 0;
}
.cont > ul > li section h4{
  margin:0 0 5px;
  font-size:3.5vw;
}
.cont > ul > li section ul{
  padding:0px 0px 10px;
  font-weight:normal;
}
.cont > ul > li section ul li{
  font-size:3.1vw;
  letter-spacing:-0.03em;
}
.cont .more{
  width:100%;
  line-height:2.7;
  font-size:3.4vw;
  border-radius:3px;
}


/* #cont1 */
#cont1 h3 + p{
  background:url(../images/cont1_bg.png)no-repeat center top;
  background-size:94% auto;
}
#cont1 > ul > li.new:before{
  display:block;
  width:12%;
  padding-top:12%;
  left:3%;
  top:3%;
}
#cont1 > ul > li:nth-child(-n+2){
  width:100%;
  padding:3% 0 0;
}
#cont1 > ul > li:last-child{
  padding-top:15%;
}
#cont1 > ul > li img{
  width:70%;
  vertical-align:middle;
}
#cont1 > ul > li:nth-child(-n+2) img{
  width:31%;
}
#cont1 > ul > li:last-child img{
  width:90%;
}
#cont1 > ul > li:nth-child(-n+2) section{
  padding:5% 0 5% 3%;
}
#cont1 > ul > li:nth-child(-n+2) section .more{
  width:85%;
}


/* #cont2 */
#cont2 {
}
#cont2 > ul{
  display: block;
}
#cont2 > ul > li{
  width:100%;
  margin:0;
  padding:0 0 3%;
  display: block;
  background-color:#fff;
}
#cont2 > ul > li:first-child{
  margin-bottom:5%;
}
#cont2 > ul > li > div{
  width:auto;
  background-color:#fff;
  position:relative;
}
#cont2 > ul > li > div:before{
  display:block;
  width:12%;
  padding-top:12%;
  left:3%;
  top:3%;
}
#cont2 > ul > li > div img{
  width:33%;
}
#cont2 > ul > li > div section{
  width:55%;
  margin-left:3%;
  padding:5% 0;
}
#cont2 > ul > li > div section .more{
  width:82%;
}
#cont2 > ul li > a{
  width:84%;
  display:inline-block;
  border:1px solid;
}



/* #cont3 */
#cont3 {
}
#cont3 > ul > li:first-child{
  width:100%;
  padding:18% 8% 8%;
  background:url(../images/cont3_bg_s.png)no-repeat center center;
  background-size:100% auto;
  text-align:left;
}
#cont3 > ul > li:first-child img{
  width:68%;
  vertical-align:middle;
}
#cont3 > ul > li:first-child section{
  width:auto;
  margin:2% 0 0;
  display:inline-block;
  vertical-align:middle;
  text-align:left;
  position:relative;
}
#cont3 > ul > li:first-child section h4{
  text-align:center;
}
#cont3 > ul > li:first-child section ul{
  text-align:center;
}
#cont3 > ul > li:first-child section ul li{
  display:inline-block;
  margin-right:1em;
}
#cont3 > ul > li section.new:before{
  width:11%;
  padding-top:11%;
  right:0%;
  top:6%; 
}
#cont3 > ul > li:first-child .more{
  width:90%;
  display:block;
  margin:auto;
}



/* #cont4 */
#cont4 {
}
#cont4 > ul:before{
  content:'';
  display:block;
  width:9%;
  padding-top:16%;
  background:url(../images/cont4_bg.png)no-repeat center bottom;
  background-size:100% auto;
  position:absolute;
  bottom:98%;
  right:8%;
  z-index:1;
}
#cont4 > ul > li section{
  padding-top:5px;
}
#cont4 > ul > li section h4{
  height:3.2em;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
#cont4 > ul > li img{
  width:70%;
}


/* #cont5 */
#cont5 {
}
#cont5 > div{
  width:90%;
  margin:auto;
  padding:2% 2% 5%;
}
#cont5 > div:before{
  width:12%;
  padding-top:16%;
  background:url(../images/cont5_bg.png)no-repeat center bottom;
  background-size:100% auto;
  top:0;
  left:3%;
  transform:translateY(-85%);
}
#cont5 > div ul:last-of-type{
  margin-bottom:3%;
  padding:0;
  border-bottom:none;
}
#cont5 > div ul:after{
  content:'';
  display:block;
  width:100%;
  height:1px;
  background-color:#ccc;
  position:absolute;
  top:33.33%;
  left:0;
}
#cont5 > div ul:before{
  content:'';
  display:block;
  width:100%;
  height:1px;
  background-color:#ccc;
  position:absolute;
  top:66.66%;
  left:0;
}

#cont5 > div ul li{
  width:32%;
  display:inline-block;
  vertical-align:top;
  padding:5px 5px;
  box-sizing:border-box;
  line-height:1.5;
  font-size:2.8vw;
}
#cont5 > div ul:last-of-type li:last-child{
  width:66%;
  padding:5% 5% 0;
  box-sizing:border-box;
}
#cont5 > div ul li h4{
  height:3em;
  margin-bottom:5px;
  letter-spacing:-0.05em;
  white-space:nowrap;
}
#cont5 > div ul li p{
  margin-top:5px;
  font-weight:normal;
}
#cont5 > div ul:last-of-type + img{
  position:absolute;
  bottom:140px;
  left:0;
}
#cont5 > div .more{
  width:80%;
}


/* #cont6 */
#cont6 {
  padding-bottom:5%;
}
#cont6 > ul{
  position:relative;
}
#cont6 > ul:before{
  content:'';
  display:block;
  width:12%;
  padding-top:15%;
  top:0;
  left:1%;
  z-index:1;
  transform:translateY(-80%);
  background:url(../images/cont6_bg.png)no-repeat center bottom;
  background-size:100% auto;
}
#cont6 > ul > li img{
  width:70%;
}
#cont6 > ul > li section{
  padding-top:5px;
}
#cont6 > ul > li section h4{
  height:3.2em;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
#cont6 > ul > li:nth-child(n+5){
  width:100%;
  margin:0;
  padding-bottom:30px;
  position:relative;
}
#cont6 > ul > li:nth-child(5){
  margin-top:3%;
  padding:10% 0 0;
}
#cont6 > ul > li:nth-child(5):before{
  content:'';
  display:block;
  width:33%;
  padding-top:15%;
  background:url(../images/cont6_bg2.png)no-repeat center top;
  background-size:100% auto;
  position:absolute;
  right:0;
  top:-2%;
}
#cont6 > ul > li:nth-child(5):after{
  content:'';
  display:block;
  width:94%;
  height:1px;
  background-color:#ccc;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
}
#cont6 > ul > li:nth-child(5) img{
  width:90%;
  vertical-align:middle;
}
#cont6 > ul > li:nth-child(5) section{
  width:90%;
  display:block;
  margin:5% auto 0;
  padding-bottom:5%;
  text-align:center;
}
#cont6 > ul > li:nth-child(5) section h4{
  height:auto;
  display:block;
}
#cont6 > ul > li:nth-child(5) section p{
  text-align:left;
}
#cont6 > ul > li:nth-child(5) section ul{
  text-align:left;
}
#cont6 > ul > li:nth-child(5) section ul li{
  margin-right:1em;
  display:inline-block;
}

#cont6 > ul > li:last-child{
  padding:4% 0 5%;
  background-image:none;
}
#cont6 > ul > li:last-child:after{
  content:'';
  display:block;
  width:25%;
  padding-top:26%;
  background:url(../images/cont6_bg4_s.png)no-repeat center top;
  background-size:100% auto;
  position:absolute;
  right:-5%;
  top:-25%;
}

#cont6 > ul > li:last-child img{
  width:32%;
  vertical-align:middle;
}
#cont6 > ul > li:last-child section{
  width:60%;
  padding-bottom:0;
  display:inline-block;
  vertical-align:middle;
  margin-left:0;
  text-align:left;
}
#cont6 > ul > li:last-child section h4{
  height:auto;
  display:block;
}
#cont6 > ul > li:last-child .more{
  width:80%;
  margin-top:5%;
}


/* .recipe */
.recipe{
  padding:8% 0 3%;
}
.recipe h3{
  margin-bottom:5%;
}
.recipe > ul{
  width:90%;
  margin:auto;
  padding:4% 0 2%;
}
.recipe > ul:after{
  content:'';
  display:block;
  width:100%;
  padding-top:3%;
  background:url(../images/recipe_bottom.png)no-repeat center top;
  background-size:40% auto;
  position:absolute;
  bottom:0;
  transform:translateY(50%);
}
.recipe > ul li{
  width:45%;
  margin:0 1% 5%;
}
.recipe > ul li a figure figcaption{
  margin-top:3px;
  font-size:3.4vw;
}
.recipe .more{
  display:inline-block;
  width:80%;
  line-height:2.7;
  font-size:3.4vw;
  border-radius:3px;
}



/* #cont7 */
#cont7 {
  margin-top:5%;
  padding:6% 5%;
  background:url(../images/cont7_bg_s.png)no-repeat center top;
  background-size:100% auto;
}
#cont7 .video{
  width:auto;
  margin:0 auto 5%;
  padding:3%;
  background-color:#fff;
}
#cont7 .video video{
  width:100%;
}
#cont7 .youtube{
  width:auto;
  margin:auto;
  padding:3%;
  box-sizing:border-box;
  background-color:#fff;
}
#cont7 .youtube p{
  margin:5px 0;
  font-size:4vw;
}


/* #cont8 */
#cont8 {
}
#cont8 section{
  margin-bottom:3%;
  padding:8% 0;
  background:url(../images/cont8_bg_s.png)no-repeat center center;
  background-size:90% 100%;
}
#cont8 section h4{
  width:65%;
  line-height:1.3;
  margin:0 auto 10px;
  font-size:4vw;
  background:
    url(../images/cont8_tit1.png)no-repeat left center,
    url(../images/cont8_tit2.png)no-repeat right center;
  background-size:11% auto;
}

#cont8 section div{
  display:block;
  margin:auto;
}
#cont8 section div:first-of-type{
  width:75%;
}
#cont8 section div:first-of-type .more{
  width:90%;
  margin-top:2%;
}
#cont8 section div:last-of-type{
  width:75%;
  margin-left:auto;
}
#cont8 section div:last-of-type figure{
  width:50%;
  margin-top:10%;
}
#cont8 section div:last-of-type figure figcaption{
  font-size:3.8vw;
}
#cont8 section div:last-of-type .link{
  display:inline-block;
  width:100%;
  line-height:2.8;
  margin-top:3%;
  font-size:3.4vw;
}


/* #cont9 */
#cont9 {
}
#cont9 ul:before {
  content:none;
}


/* #cont10 */
#cont10 {
}
#cont10 ul:before {
  content:'';
  display:block;
  width:20%;
  padding-top:40%;
  background:url(../images/cont10_bg_s.png)no-repeat center bottom;
  background-size:100% auto;
  position:absolute;
  left:3%;
  bottom:3%;
  transform:none;
}


/* #cont11 */
#cont11 {
}
#cont11 ul:before {
  content:'';
  display:block;
  width:15%;
  padding-top:40%;
  background:url(../images/cont11_bg_s.png)no-repeat center bottom;
  background-size:100% auto;
  position:absolute;
  right:3%;
  bottom:5%;
  transform:none;
}


/* #cont12 */
#cont12 {
}
#cont12 ul:before {
  content:'';
  display:block;
  width:15%;
  padding-top:30%;
  background:url(../images/cont12_bg_s.png)no-repeat center bottom;
  background-size:100% auto;
  position:absolute;
  left:3%;
  bottom:3%;
  transform:none;
}
#cont12 > ul li a figure figcaption{
  height:auto;
  display: block;
}


/* #cont13 */
#cont13 {
}
#cont13 ul:before {
  content:'';
  display:block;
  width:15%;
  padding-top:30%;
  background:url(../images/cont13_bg_s.png)no-repeat center bottom;
  background-size:100% auto;
  position:absolute;
  right:3%;
  bottom:3%;
  transform:none;
}



article > p{
  width:98%;
  margin:0 auto 8%;
  font-size:4vw;
  background:
    url(../images/bottom_icon1.png)no-repeat left center,
    url(../images/bottom_icon2.png)no-repeat right center;
  background-size:8% auto;
}
article > p span{
  display:inline-block;
  line-height:0.5;
  box-sizing:border-box;
  border-bottom:7px solid #ffd71f;
}
article > a{
  display:inline-block;
  width:90%;
  margin-top:8%;
}



}