/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/


html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none;}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html, body {
width: 100%;
height: 100%;
scroll-padding-top: 50px; 
}
body{
font-size:18px;
-webkit-text-size-adjust: 100%;
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体","Yu Gothic",YuGothic,"ＭＳ Ｐゴシック",sans-serif;
text-align:center;
color:#666;
}
img {
vertical-align:bottom;
}
a{
text-decoration:none;
color:#666;
line-height:1.5;
opacity:1;
}
a,a:hover {
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
transition:0.7s;
}
a img:hover {
-moz-opacity:0.75;
opacity:0.75;
}
a:hover{
opacity:0.5;
}
p,li,div,dt,dd,td,th{
box-sizing:border-box;
}
p {
font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS ゴシック","MS Gothic",sans-serif;
text-align:justify;
line-height:2;
padding: 1rem 0;
}
.br_1{
display:block;
}
.br_2{
display:none;
}

/*====================================================
LAYOUT
====================================================*/

#wrapper {
background-size:100%;
}

#header_pc {
display: block;
width: 100%;
margin: 0 auto;
}
#header_pc img{
width: 100%;
}

#header_sp {
display: none;
}
#header_sp img{
width: 100%;
}

.movie {
position: relative;
width: 100%;
padding-top: 56.25%;
margin: 0 auto;
}
.movie iframe{
position: absolute;
top:0;
right:0;
width: 100% !important;
height: 100% !important;
}

#gnav {
background:#2b8fc2;
}
#gnav ul {
width:100%;
}
#gnav ul li {
float:left;
width:20%;
height:70px;
border-right:1px solid #fff;
padding-top: 0.5rem;
}
#gnav ul li.single_line {
padding-top: 1.5rem;
}
#gnav ul li:last-child {
border-right:none;
}
#gnav ul li a{
color:#fff;
text-decoration:none;
}

#sect1,
#sect2,
#sect3,
#sect4 {
padding:6rem 0;
}
#sect2,
#sect4 {
background:#f0f7fb;
}
.f_left {
float:left;
width:50%;
}
.f_right {
float:right;
width:50%;
}
.f_left img,
.f_right img{
width:100%;
}
.sect_inner {
padding:20% 20%;
}
h1 {
color:#2b8fc2;
text-align:left;
font-size: 180%;
font-weight:normal;
border-bottom:1px solid #2b8fc2;
padding-bottom: 0.3rem;
}
h2 {
color:#fff;
text-align:left;
font-weight:normal;
font-size: 150%;
line-height: 1.3;
padding-top: 1.5rem;
}

#sect3 h1 {
width:370px;
text-align:center;
border-bottom:none;
margin:0 auto 1rem;
}
#sect3 p {
text-align:center;
margin-bottom:1rem;
}
.w800 {
width:800px;
margin:0 auto;
}

.recipe {
padding: 0 2rem;
margin-bottom: 1.5rem;
}
.r_ttl {
background:#2b8fc2;
color:#fff;
font-size:24px;
text-align:center;
display: block;
position: relative;
padding: 0.5rem 0 0.3rem 4rem;
margin: 0;
}
.recipe .r_ttl:after {
content: '+';
font-size: 2.5rem;
font-weight: bold;
position: absolute;
top: -0.5rem;
right: 1rem;
}
.recipe .r_ttl.active:after {
content: '-';
}
.detail {
display: none;
width:640px;
text-align:center;
margin:0 auto;
}
.recipe ul li.ingredents {
font-size:130%;
padding:1rem 0;
}
.recipe ul li table {
width:100%;
text-align:left;
}
.recipe ul li table th {
width:40%;
padding:1rem;
}
.material {
color:#001450;
}
.bg_blue {
background:#f0f7fb;
}
.star {
color:#2b8fc2;
}
.circle {
color:#f0788c;
}
.recipe ul li ul.detail li dl {
margin:1rem 0 2rem;
}
.recipe ul li ul.detail li dl dt {
color:#2b8fc2;
font-size:130%;
padding:1rem 0;
border-bottom:1px dotted #666;
}
.recipe ul li ul.detail li dl dd {
background:url(../img/recipe_step1.png) center left no-repeat;
background-size:40px;
text-align:justify;
padding:1rem 0 1rem 3rem;
border-bottom:1px dotted #666;
}
.recipe ul li ul.detail li dl dd.cook_step2 {
background:url(../img/recipe_step2.png) center left no-repeat;
background-size:40px;
}
.recipe ul li ul.detail li dl dd.cook_step3 {
background:url(../img/recipe_step3.png) center left no-repeat;
background-size:40px;
}
.recipe ul li ul.detail li dl dd.cook_step4 {
background:url(../img/recipe_step4.png) center left no-repeat;
background-size:40px;
}

#sect4 h1 {
width:720px;
text-align:center;
margin:0 auto 1rem;
}
#sect4 p {
text-align:center;
margin-bottom:1rem;
}
#sect4 ul {
margin-bottom:3rem;
}
#sect4 ul li {
float:left;
width:14.27%;
}
#sect4 .insta {
width:100px;
text-align:center;
margin:0 auto;
}

#point {
position: relative;
width: 660px;
margin: auto;
padding: 6rem 0 100px;
}

.point_top {
margin: 50px auto 0;
}
.point_image_box {
width: 660px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.point_image_box_inner {
background:#fff;
width: 320px;
padding:20px 30px;
border:1px solid #cccccc;
margin-right:20px;
}
.point_image_box_inner img{
width: 100%;
}
.point_image_box_inner_space {
margin-right: 0px;
}

.point_image {}

h4 {
text-align:center;
color:#000;
font-size:20px;
}
h4 span{
color:#000;
font-size:16px;
}
.point_body {
margin: 5px auto 0;
font-size:16px;
color:#000;
}
.point_body p {
word-break: break-all;
font-size:16px;
}
.point_body dl {
text-align:center;
font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS ゴシック","MS Gothic",sans-serif;
}
.point_body dl dt {
color:#000;
font-weight:bold;
font-size:16px;
}
.point_body dl dd {
color:#666666;
font-size:14px;
margin-bottom:0.5rem;
}

.point_pc {
display: block;
}

.point_sp {
display: none;
}
.w420 {
width:420px;
margin:auto;
}
.w420 img{
width:100%;
}


#footer {
margin: 0 auto;
text-align: center;
padding-bottom:2rem;
}
#footer dl dt{
font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
margin-bottom: 0.5rem;
}
#footer dl dt img {
width:260px;
}
#footer dl dd{
font-size:14px;
font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS ゴシック","MS Gothic",sans-serif;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ctr {
text-align:center;
}
.img100 {
width:100%;
}


/*====================================================
AFTER
====================================================*/

section:after,
#sect1:after,
#sect2:after,
#sect3:after,
#sect4:after,
#sect4 ul:after,
#gnav:after,
#gnav ul:after,
#gnav ul li:after{content:".";display:block;clear:both;height:0;visibility:hidden;font-size:0;}

/*====================================================
MEDIA QUERY
====================================================*/
@media screen and (max-width:1280px) {
.sect_inner {
padding:0 10%;
}
}
@media screen and (max-width:980px) {
#gnav ul li a{
font-size:14px;
}
}
@media screen and (max-width:750px) {
body{
font-size:15px;
}
img {
width: 100%;
height: auto;
}
#wrapper {
}
#header_sp {
display: block;
width: 100%;
}
#header_pc {
display: none;
}
#gnav ul li {
float:none;
width:100%;
height:auto;
border-top:none;
padding: 0.4rem 0 0.5rem;
border-bottom:1px solid #fff;
}
#gnav ul li.single_line {
padding: 0.4rem 0 0.5rem;
}
#gnav ul li:nth-child(even) {
border-right:none;
}
.f_left,
.f_right {
float:none;
width:100%;
}
.sect_inner {
padding:5%;
}
#sect1,
#sect2,
#sect3,
#sect4 {
clear:both;
padding: 3rem 0;
}
h1 {
font-size: 160%;
}
h2 {
font-size: 140%;
margin-top:0;
}
h3 {
font-size: 140%;
}
p {
width:100%;
text-align:justify;
padding: 0.5rem 0;
margin:0 auto;
}
.w420 {
width:90%;
margin:auto;
}
.link01 {
margin-top:-6rem;
padding-top:6rem;
}
#sect3 h1 {
width:60%;
margin-top:6rem;
}
#sect3 p {
width:90%;
text-align:justify;
}
.w800 {
width:100%;
}
.recipe {
padding: 0 1rem;
margin-bottom: 1rem;
}
.r_ttl {
font-size:130%;
text-align:center;
display: block;
position: relative;
padding: 0.5rem 0 0.3rem;
margin: 0;
}
.recipe .r_ttl:after {
font-size: 2rem;
position: absolute;
top: -0.2rem;
right: 0.5rem;
}
.recipe .r_ttl.active:after {
content: '-';
}
.detail {
width:100%;
}
.recipe ul li table th {
width:50%;
padding:0.5rem;
}

#sect4 h1 {
width:90%;
text-align:center;
margin:0 auto 1rem;
}
#sect4 p {
width:90%;
text-align:justify;
}
#sect4 ul {
margin-bottom:3rem;
}
#sect4 ul li {
float:left;
width:33.3%;
}
#sect4 .insta {
width:20%;
text-align:center;
margin:0 auto;
}


#point {
position: relative;
width: 100%;
margin: auto;
padding: 100px 0 0;
}
.point_top {
margin: 100px auto 0;
}
.point_image_box {
width: 782px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.point_image_box_inner {
width: 320px;
  }
.point_image {}
.point_body {
width: 210px;
margin: 20px auto 0;
font-size: 18px;
color: #000;
}
.point_body p {
word-break: break-all;
}
.point_pc {
display: none;
}
.point_sp {
position: relative;
display: block;
margin:  4rem 0 ;
word-break: break-all;
}
.point_body_sp {
width: 100%;
margin: 4vw auto 0;
}
.point_sp_box {
background:#fff;
width:80%;
min-height:660px;
margin: 0 auto;
border:1px solid #ccc;
padding: 1rem;
}
.point_sp_box img {
width:100%;
}
.point_sp_box dl {
text-align:center;
}
.point_sp_box dl dt {
color:#000;
font-weight:bold;
font-size:16px;
font-family:YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS ゴシック","MS Gothic","メイリオ", Meiryo,sans-serif;
}
a .point_sp_box dl dt {
font-size:16px;
}
.point_sp_box dl dd {
font-size:14px;
font-family:YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS ゴシック","MS Gothic","メイリオ", Meiryo,sans-serif;
margin-bottom:0.5rem;
}
a .point_sp_box dl dd {
font-size:14px;
}
.br_1{
display:none;
}
.br_2{
display:block;
}

/* bxslider */
.slider {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.feed-prev-btn {
position: relative;
z-index: 20;
background-image: url(../img/slider_prev.png);
}
.feed-next-btn {
position: relative;
z-index: 20;
background-image: url(../img/slider_next.png);
}

.feed-prev-btn .bx-prev {
opacity: 0;
display: block;
}
.feed-next-btn .bx-next {
opacity: 0;
display: block;
}
.navi-btn-p {
position: absolute;
top: 38%;
left:0;
width: 3rem;
height:3rem;
background-size: 3rem;
}
.navi-btn-n {
position: absolute;
top: 38%;
right: 0;
width: 3rem;
height:3rem;
background-size: 3rem;
}
}