/* アウトドアでもパックごはん！ */


/* PCレイアウト */
/*-------------------------------------------------------------------------------------------*/

body {
    font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
    text-align:center;
}

/* contents */
#contents {
    background:url("../images/bg_contents.png") center top;
    margin-bottom:40px;
    padding-bottom:60px;
}


/* common */
section img {
    max-width:100%;
    height:auto;
}
section .pc {}
section .sp {display:none;}


/* section */
section {
    width:100%;
    padding:60px 0;
    line-height:1.6;
    font-size:1.5em;
    color:#000000;
}
section#main {
    padding:0 0 60px;
}
section#sec02 {background-color:#fffbc8;}
section#sec03 {background-color:#ccd14d;}

.section_inner {
    width:90%;
    max-width:850px;
    margin:0 auto;
}

/* main */
.img_main {
    width:94%;
    max-width:950px;
    margin:0 auto 20px;
}


/* lead */
#lead {
    width:90%;
    max-width:850px;
    background:url("../images/img_lead.png") no-repeat right bottom;
    margin:0 auto;
    padding-bottom:40px;
}
#lead p {
    display:block;
    width:60%;
    padding-bottom:0;
    line-height:1.6;
    font-size:1.1em;
    font-weight:bold;
}


/* title */
.title {
    overflow:hidden;
    position:relative;
    width:100%;
    height:220px;
    margin:0 auto 20px;
}
.title h2 {
    display:block;
    width:90%;
    max-width:850px;
    margin:0 auto;
    z-index:2;
}
.title .title_bg {
    position:absolute;
    top:0;
    width:100%;
    max-width:640px;
    height:220px;
    z-index:1;
}

.title.title01 h2,
.title.title03 h2 {
    text-align:right;
}
.title.title02 h2 {
    text-align:left;
}
.title.title01 .title_bg {
    right:50%;
    background-image:url("../images/title01_bg.jpg");
    background-position:right top;
    transform:translateX(10px)
}
.title.title02 .title_bg {
    left:50%;
    background-image:url("../images/title02_bg.jpg");
    background-position:left top;
    transform:translateX(-10px)
}
.title.title03 .title_bg {
    right:50%;
    background-image:url("../images/title03_bg.jpg");
    background-position:right top;
    transform:translateX(10px)
}

section h3 {
    margin:0 auto 20px;
    text-align:center;
    font-size:1.2em;
    font-weight:bold;
}
section h3 span {
    font-size:0.8em;
    font-weight:normal;
}

section h2.normal {
    margin-bottom:0.5em;
    line-height:1.6;
    font-size:2.2em;
}

section p {
    margin-bottom:1em;
    text-align:left;
}
section p.center {
    text-align:center;
}

/* box */
.box {
    position:relative;
    width:90%;
    max-width:850px;
    background:url("../images/bg_box.jpg") no-repeat center center;
    background-size:cover;
    margin:0 auto 40px;
    border-radius:24px;
}
.box p {
    font-size:1.2em;
    font-weight:bold;
}


/* box01 */
.box01 {}
.box01 .box_main {
    margin:0 auto 20px;
}
.box01 .box_main h4 {
    float:left;
    width:50%;
    text-align:left;
}
.box01 .box_main p {
    float:right;
    width:46%;
    padding-top:4%;
    padding-right:2%;
}

.box01 .box_sub {
    position:relative;
    margin:0 auto 20px;
}

.box01 .box_sub h5 {
    position:relative;
    width:94%;
    margin:0 auto 1em;
    font-size:1.3em;
    font-weight:bold;
    z-index:1;
}
.box01 .box_sub h5:before,
.box01 .box_sub h5:after {
    display:inline-block;
    width:116px;
    height:16px;
    background:url("../images/img_box01_dots.png") no-repeat center center;
    content:"";
}
.box01 .box_sub h5:before {margin-right:0.5em;}
.box01 .box_sub h5:after {margin-left:0.5em;}

.box01 .box_sub p {
    float:left;
    width:45%;
    padding-left:5%;
}
.box01 .box_sub .img_sub {
    position:relative;
    float:right;
    width:50%;
    margin-top:-50px;
    margin-bottom:30px;
    z-index:2;
}


/* BBQ box */
.bbq {
    width:90%;
    max-width:850px;
    margin:0 auto 60px;
}
section .bbq h3 {
    margin:0 auto;
}
.box_bbq {
    background:#ffffff;
    padding:5%;
    border:6px solid #764303;
    border-radius:24px;
}
.box_bbq p {
    margin-bottom:0;
}
.box_bbq ul {
    text-align:center;
    letter-spacing:-0.5em;
}
.box_bbq ul li {
    position:relative;
    display:inline-block;
    width:30%;
    margin-right:5%;
    margin-bottom:5%;
    font-weight:bold;
    color:#808913;
    letter-spacing:normal;
}
.box_bbq ul li:last-child {
    margin-right:0;
}
.box_bbq ul li img.icon {
    position:absolute;
    right:-5%;
    bottom:-5%;
    width:38%;
}
.box_bbq ul li a:hover img {
    opacity:0.7;
}


/* box balloon */
.box .balloon {
    position:absolute;
    top:-30px;
    right:4%;
}


/* box02 */
.box02 {
    margin:40px auto 40px;
    padding:3% 0;
}
.box02 h4 {
    float:left;
    width:50%;
    text-align:left;
}
.box02 p {
    float:right;
    width:48%;
    padding-top:4%;
}


/* box03 */
.box03 {
    margin:40px auto 60px;
    padding:3% 0;
}
.box03  h4 {
    float:left;
    width:50%;
    text-align:left;
}
.box03 .block_right {
    float:right;
    width:48%;
    padding-right:2%;
    padding-top:4%;
}
.box03 p {
}
.box.box03 p.note {
    padding-left:1em;
    text-indent:-1em;
    font-size:1.0em;
    font-weight:normal;
}


/* box04 */
.box04 {
    margin:40px auto 40px;
    padding:3% 0;
}
.box04  h4 {
    float:left;
    width:50%;
    text-align:left;
}
.box04 p {
    float:right;
    width:48%;
    padding-top:4%;
}


/* sec02 */
#sec02 h2 {
    margin-bottom:0.5em;
    line-height:1.6;
    font-size:2.0em;
}
#sec02 .block {
    
}
#sec02 .block .block_left {
    float:left;
    width:48%;
}
#sec02 .block .block_right {
    float:right;
    width:50%;
}
#sec02 .block .block_left p {
    padding-top:2em;
    text-align:left;
    line-height:2.0;
    font-size:1.1em;
}


/* sec03 */
#sec03 {}
.sec03_box {
    width:90%;
    max-width:850px;
    background-color:#e4ab43;
    background-repeat:no-repeat;
    background-image:url("../images/dot_sec03.png"),
    url("../images/dot_sec03.png"),
    url("../images/dot_sec03.png"),
    url("../images/dot_sec03.png");
    background-position:left top,
    right top,
    left bottom,
    right bottom;
    background-size:7%;
    margin:0 auto;
    padding:5%;
    box-sizing:border-box;
}
.sec03_box h2 {
    margin-bottom:0.5em;
    line-height:1.6;
    font-size:1.8em;
    color:#662900;
}

/* button */
.btn {
    margin:0 auto;
}
.btn a {
    display:block;
    width:100%;
    height:0;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:contain;
    margin:0 auto;
    text-indent:-9999px;
}
.btn_recipe a {
    max-width:660px;
    background-image:url("../images/btn_recipe.png");
    padding-top:13.7878%;
}
.btn a:hover {
    opacity:0.7;
}




/* 950px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 950px) {


/* section */
section {
    font-size:1.3em;
}


/* lead */
#lead {
    background-size:40%;
}
#lead p {
    width:80%;
    font-size:1.0em;
}


/* title */
.title {
    height:auto;
}
.title h2 img {
    display:none;
}
.title h2 {
    width:100%;
    height:0;
    max-width:950px;
    margin:0 auto;
}
.title .title_bg {
    display:none;
}

.title.title01 h2,
.title.title02 h2,
.title.title03 h2 {
    height:0;
    background-repeat:no-repeat;
    background-size:contain;
    padding-top:20.8%;
}
.title.title01 h2 {
    background-image:url("../images/title01.jpg");
    background-position:right top;
    transform:translateX(-5%)
}
.title.title02 h2 {
    background-image:url("../images/title02.jpg");
    background-position:left top;
    transform:translateX(5%)
}
.title.title03 h2 {
    background-image:url("../images/title03.jpg");
    background-position:right top;
    transform:translateX(-5%)
}

/* box */
.box p {
    font-size:1.2em;
}


.box01 .box_main p img {
    width:40%;
}

.box01 .box_sub h5:before,
.box01 .box_sub h5:after {
    width:13%;
    height:16px;
    background-size:contain;
}

/* box balloon */
.box .balloon {
    top:-40px;
    right:3%;
    width:13.8%;
}

.box.box03 p.note {
    font-size:0.8em;
}

/* sec02 */
#sec02 .block .block_left p {
    padding-top:1em;
    line-height:1.8;
    font-size:1.1em;
}




}
/*-------------------------------------------------------------------------------------------*/
/* 950px以下 END */



/* 768px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {

/* main */
.img_main {
    width:100%;
}







}
/*-------------------------------------------------------------------------------------------*/
/* 768px以下 END */



/* 750px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 750px) {

section .pc {display:none;}
section .sp {display:block;}


/* section */
section {
    padding:12% 0;
    font-size:1.2em;
}

/* lead */
#lead {
    background-size:50%;
    padding-bottom:24%;
}
#lead p {
    width:100%;
    font-size:1.0em;
}

section h3 {
    width:90%;
    font-size:1.0em;
}
section h3 span {
    display:inline-block;
    padding-top:1em;
    line-height:1.6;
    font-size:0.8em;
}

/* box */
.box p {
    font-size:1.0em;
}

.box_bbq p {
    margin-bottom:1em;
}
.box_bbq ul li img.icon {
    width:50%;
}


/* sec02 */
#sec02 h2 {
    font-size:1.8em;
}
#sec02 .block {
    background:url("../images/img_sec02_sp.jpg") no-repeat center bottom;
    background-size:contain;
    padding-bottom:55%;
}
#sec02 .block .block_left {
    float:none;
    width:94%;
    margin:0 auto;
}
#sec02 .block .block_right,
#sec02 .block_img {
    display:none;
}
#sec02 .block .block_left p {
    padding-top:0;
    text-align:center;
    font-size:1.0em;
}

/* sec03 */
.sec03_box h2 {
    font-size:1.6em;
}


.btn_recipe a {
    max-width:600px;
    background-image:url("../images/btn_recipe_sp.png");
    padding-top:15%;
}


}
/*-------------------------------------------------------------------------------------------*/
/* 750px以下 END */



/* 480px以下 */
/*-------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {


/* section */
section {
    font-size:1.0em;
}
section .sp2 {display:none;}

/* lead */
#lead {
    background-size:50%;
    padding-bottom:30%;
}
#lead p {
    width:98%;
    margin:0 auto;
}


.box01 .box_main h4 {
    width:43%;
}
.box01 .box_main p {
    width:53%;
    padding-right:3%;
}
.box01 .box_sub p {
    width:53%;
    padding-left:3%;
}
.box01 .box_sub .img_sub {
    width:43%;
    margin-top:-6%;
}

.box01 .box_sub h5 {
    font-size:1.1em;
}

.box_bbq ul li  {
    display:block;
    width:60%;
    margin:0 auto 5%;
}
.box_bbq ul li:last-child  {
    margin:0 auto 5%;
}
.box_bbq ul li img.icon {
    width:38%;
}

/* box balloon */
.box .balloon {
    width:18%;
    top:-17%;
}


.box02 h4,
.box03 h4,
.box04 h4 {
    width:43%;
}
.box02 p,
.box03 .block_right,
.box04 p {
    width:53%;
    padding-right:3%;
}
.box04 p {
    padding-top:2.3em;
}

.box03 {
    margin:50px auto 60px;
}


/* sec02 */
#sec02 h2 {
    font-size:1.6em;
}
#sec02 .block .block_left p {
    text-align:left;
}

/* sec03 */
.sec03_box h2 {
    font-size:1.4em;
}

}
/*-------------------------------------------------------------------------------------------*/
/* 480px以下 END */



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



section .sp3 {display:none;}

section h3 {
    width:94%;
    font-size:1.0em;
}

.box01 .box_sub h5:before,
.box01 .box_sub h5:after {
    width:8%;
    background-size:200%;
    background-position:left center;
}



/* sec02 */
#sec02 h2 {
    font-size:1.5em;
}

/* sec03 */
.sec03_box h2 {
    font-size:1.3em;
}


}
/*-------------------------------------------------------------------------------------------*/
/* 320px以下 END */