/* reset
------------------------------------------*/
@charset "shift_jis";

html, body, div, h1, h2, h3, section {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
}

/* PC
------------------------------------------------------------------------*/
@media screen and (min-width : 641px){
/* common
------------------------------------------*/
#wrap {
    font-size: 18px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    margin:0 auto;
    width: auto;
}
#wrap .section_area {
    width: 950px;
    margin: 0 auto;
}
#wrap .section_left {
    float: left;
}
#wrap .section_right {
    float: left;
}
/* header
------------------------------------------*/
.wrap_header .header_inner {
    height: 631px;
}
.wrap_header .header_inner h1 img {
    position: absolute;
    left: 50%;
    margin-left: -640px;
}


/* area01
------------------------------------------*/
section.area01 {
    text-align: center;
    margin-top: 58px;
}
section.area01 h2 {
    margin-bottom: 64px;
}
.recipe_txt {
    padding-top: 13px;
    clear: both;
}
/* area02
------------------------------------------*/
section.area02 {
    margin-top: 60px;
}
section.area02 .section_left {
    margin-bottom: 50px;
}
section.area02 .section_right {
    width: 432px;
    margin-left: 37px;
    line-height: 1.7em;
}
/* area03
------------------------------------------*/
section.area03 {
    background-color: #fb941a;
    clear: both;
    position: relative;
    margin-left: -640px;
    width: 1280px;
    left: 50%;
}
section.area03 h3 {
    padding: 20px 0;
}
section.area03 p.area03_sub {
    position: absolute;
    bottom: -44px;
    left: 50%;
    margin-left: -284px;
    z-index: 10;
}
section.area03 p.area03_img {
    position: absolute;
    bottom: -21px;
    right: 45px;
    z-index: 10;
    font-size:1px;
}
/* area04
------------------------------------------*/
section.area04 {
    background: url(../images/pc_page/area04_bg.jpg) no-repeat top center;
    background-size: cover;
    clear: both;
    position: relative;
    height: 1685px;
    margin-left: -640px;
    width: 1280px;
    left: 50%;
}
.recipe_title01, .recipe_title02, .recipe_title03 {
    margin: 20px 0 25px 0;
}
.recipe01 {
    padding-top: 80px;
}
.recipe01 .section_right h4 {
    margin-top: 38px;
    margin-left: 46px;
}
.recipe02 {
    padding-top: 80px;
    clear: both;
}
.recipe02 .section_left h4 {
    margin-left: 35px;
    margin-right: 40px;
}
.recipe03 {
    padding-top: 85px;
    clear: both;
}
.recipe03 .section_right h4 {
    margin-left: 104px;
}
/* area05
------------------------------------------*/
section.area05 {
    clear: both;
    position: relative;
    padding-top: 63px;
}
section.area05 .section_area {
    text-align: center;
}
section.area05 h4 {
    margin-bottom: 40px;
}
section.area05 p {
    line-height: 2em;
}
/* area06
------------------------------------------*/
section.area06 {
    padding-top: 82px;
}
section.area06 .section_area {
    text-align: center;
}
section.area06 h4 {
    margin-bottom: 25px;
}
section.area06 p {
    line-height: 2em;
    margin-top: 45px;
}
}
/* SP
------------------------------------------------------------------------*/
@media screen and (max-width : 640px){
/* common
------------------------------------------*/
body {
    min-height: 100%;
    height: auto;
    position: relative;
}
#wrap {
    font-size: 15px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    width: 100%;
    padding: 0;
}
#wrap .section_area {
    width: 94%;
    margin: 0 auto;
}
#wrap img {
    width: 100%;
}
/* header
------------------------------------------*/
.wrap_header .header_inner {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
/* area01
------------------------------------------*/
section.area01 {
    text-align: center;
    margin-top: 8%;
}
section.area01 h2 {
    margin-bottom: 8%;
}
.recipe_txt {
    padding-top: 3%;
    clear: both;
}
/* area02
------------------------------------------*/
section.area02 {
    margin-top: 10%;
}
section.area02 .section_left {
    margin-bottom: 7%;
}
section.area02 .section_right {
    line-height: 1.7em;
    margin-bottom: 8%;
}
/* area03
------------------------------------------*/
section.area03 {
    background-color: #fb941a;
    clear: both;
    position: relative;
    width: 100%;
    margin: 0 auto;
}
section.area03 h3 {
    padding: 7% 0;
}
section.area03 p.area03_sub {
    position: absolute;
    bottom: -26%;
    z-index: 100;
    width: 95%;
}
section.area03 p.area03_img {
    position: absolute;
    bottom: -15%;
    right: 0;
    z-index: 10;
    font-size: 1px;
    width: 17%;
}
/* area04
------------------------------------------*/
section.area04 {
    background: url(../images/sp_page/area04_bg.jpg) no-repeat top center;
    background-size: cover;
    clear: both;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 4%;
}
.recipe_title01 {
    margin: 2.3% 0 7.8% 0;
    width: 42%;
}
.p_recipe01 {
    width: 37%;
}
.recipe01 {
    padding-top: 20%;
}
.recipe01 .section_right h4 {
    position:absolute;
    top:3.9%;
    right:3%;
    width:47%;
}
.p_recipe02 {
    width: 40%;
    margin-left: 52%;
}
.recipe02 {
    padding-top: 15%;
    clear: both;
}
.recipe_title02 {
    margin: 3% 0 5% 52%;
    width: 32%;
}

.recipe02 .section_left h4 {
    position:absolute;
    top:41%;
    left:2%;
    width:47%;
}
.recipe03 {
    padding-top: 11%;
    clear: both;
}
.p_recipe03 {
    width: 40%;
}
.recipe_title03 {
    margin: 3% 0 7% 0;
    width: 63%;
}
.recipe03 .section_right h4 {
    position:absolute;
    top:75.1%;
    right:7%;
    width:27%;
}
/* area05
------------------------------------------*/
section.area05 {
    clear: both;
    position: relative;
    padding-top: 6.5%;
}
section.area05 .section_area {
    text-align: center;
}
section.area05 h4 {
    width: 54%;
    margin: 0 auto;
}
section.area05 p {
    line-height: 2em;
    margin-top: 5%;
}
/* area06
------------------------------------------*/
section.area06 {
    clear: both;
    position: relative;
    padding-top: 6.5%;
}
section.area06 .section_area {
    text-align: center;
}
section.area06 h4 {
    width: 73%;
    margin: 0 auto;
}
section.area06 .area06_logo {
    width: 28%;
    margin: 3% auto;
}
section.area06 p.p_txt {
    line-height: 2em;
    margin-top: 5%;
}
}