@import url("../../css/cssreset.css");
@import url("../../css/base.css");
@import url("../../css/contents.css");


/*--------------------------------------*/
/* products recipe */
/*--------------------------------------*/
/* recipe.css */
/*--------------------------------------*/
body,
#wrapper {
    background:#f6f4e7;
}

#content {
    width:90%;
    max-width:900px;
    margin:0 auto;
    padding:5%;
    line-height:1.6;
    font-size:1.2em;
    text-align:left;
}
#content img {
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}

/* font */
#content h1 {
    line-height:1.4;
    font-size:2.4em;
    font-weight:bold;
}
#content h2 {
    margin-bottom:0.5em;
    font-size:2.0em;
    font-weight:bold;
}
#content h2 span {
    font-size:0.7em;
}
#content h3 {
}
#content h4 {
    font-weight:bold;
}
#content p {
    margin-bottom:1.5em;
}


/* title area */
.title_area {
    position:relative;
    margin-bottom:8%;
}
.title_area .main_img {
    float:left;
    width:50%;
}
.title_area .title_right {
    float:right;
    width:50%;
    padding:0 3%;
    text-align:left;
    box-sizing:border-box;
}
.title_area .icon_time {
    position:absolute;
    left:53%;
    bottom:0;
}
#content .title_area .icon_time img {
    width:126px;
}


/* intro area */
.intro_area {
    margin-bottom:8%;
}
.intro_area .intro_left {
    float:left;
    width:48%;
    padding-right:2%;
}
.intro_area .intro_right {
    float:left;
    width:50%
}
.intro_area ul li {
    margin-bottom:0.5em;
}
.intro_area ul.preparation {
    margin-bottom:1.5em;
}
.intro_area ul.preparation li {
    display:inline-block;
    width:46%;
}
.intro_area ul.preparation li:first-child {
    margin-right:5%;
}
.intro_area ul.preparation li img {
    border:1px solid #cccccc;
}

/* step */
.step_img {
    width:70%;
    max-width:410px;
    margin:0 auto 0.5em;
}



/* - 720px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 720px) {

/* font */
#content h1 {
    margin-bottom:0.5em;
    font-size:2.0em;
}
#content h2 {
    font-size:1.8em;
}



/* title area */
.title_area {
}
.title_area .main_img {
    float:none;
    width:100%;
}
.title_area .title_right {
    float:none;
    width:100%;
    padding:0;
}
.title_area .icon_time {
    position:static;
    margin-bottom:1em;
}
#content .title_area .icon_time img {
    width:20%;
}


/* intro area */
.intro_area {
}
.intro_area .intro_left {
    float:none;
    width:100%;
    margin-bottom:2.5em;
    padding-right:0;
}
.intro_area .intro_right {
    float:none;
    width:100%;
}


}
/* - 720px end */




/* - 375px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 375px) {

/* font */
#content h1 {
    font-size:1.8em;
}
#content h2 {
    font-size:1.4em;
}


}
/* - 375px end */




/* - 320px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 320px) {

/* font */
#content h1 {
    font-size:1.6em;
}

}
/* - 320px end */