@charset "UTF-8";
/* CSS Document */

#loading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
    background-color: #ffffff;
}

#loading img {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%); /* Y高さ X幅 */
}

.spinner_box {
	position: fixed;
	top: 54%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%); /* Y高さ X幅 */
}

.spinner_txt {
    color: #ff72ae;
}

.l-main {
    margin-bottom: 0;
}

#cmp_vanilla_box {
    position: relative;
    overflow: hidden;
}

#cmp_vanilla_box img {
    vertical-align: top;
}

#cmp_vanilla_box .center_txt {
    text-align: center;
}

#cmp_vanilla_box .left_txt {
    text-align: left;
}

#cmp_vanilla_box .clear {
    clear: both;
}

#cmp_vanilla_box .mo_br {
    display: none;
}

#cmp_vanilla_box .sp_obj {
    display: none;
}


#cmp_vanilla_box section {
    width: 100%;
}

#cmp_vanilla_box {
    box-sizing: border-box;
}

#cmp_vanilla_box section.contents01 {
    padding: 0 0 130px 0;
    overflow: hidden;
    background-image: url("/products/brand/familia/assets/img/bg_blue.gif");
    background-color: #002378;
}

#cmp_vanilla_box section.contents01 img.header,
#cmp_vanilla_box section.section02_wave img.header {
    width: 100%;
}

#cmp_vanilla_box section .contents_box {
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    top: -40px;
}

#cmp_vanilla_box section .contents_box img.productas01 {
    margin: 0 auto 30px auto;
    vertical-align: bottom;
    display: inline-block;
    position: relative;
}

#cmp_vanilla_box section .contents_box img.productas02 {
    margin: 0 auto 50px auto;
    vertical-align: bottom;
    display: inline-block;
    position: relative;
}

#cmp_vanilla_box section.contents01 .kirakira_box img {
    margin: 25px;
}


#cmp_vanilla_box section.contents01 img.kirakira_left {
    position: absolute;
    left: 0;
    margin: 80px 0 0 5%;
}

#cmp_vanilla_box section.contents01 img.kirakira_right {
    position: absolute;
    right: 0;
    margin: 100px 5% 0 0;
}

.section02_wave {
    width: 100%;
}

#cmp_vanilla_box section.section02_wave .contents02_wave {
    text-align: center;
    position: relative;
    top: -180px;
}

#cmp_vanilla_box section.section02_wave .wave_readbox {
    background-image: url("/products/brand/familia/assets/img/bg_yellow.gif");
    background-color: #fffa00;
}

#cmp_vanilla_box section.contents02 {
    position: relative;
    padding: 0 0 0 0;
    overflow: hidden;
    top: -100px;
}

#cmp_vanilla_box section.contents02 .case02a {
    margin: 0 0 46px 40px;
}

#cmp_vanilla_box section.contents02 .case02b {
    margin: 0 40px 0 0;
}

#cmp_vanilla_box section.contents02 .read_box {
    text-align: center;
    background-image: url("/products/brand/familia/assets/img/bg_yellow.gif");
    background-color: #fffa00;
}

#cmp_vanilla_box section.contents02 .read_box img.check {
    margin: 0 auto 100px auto;
}

#cmp_vanilla_box section.contents03 {
    position: relative;
    padding: 0;
    overflow: hidden;
}

#cmp_vanilla_box section.contents03 .ingredients_box {
    text-align: center;
    background-image: url("/products/brand/familia/assets/img/bg_dot.gif");
    background-color: #fffc7f;
}

#cmp_vanilla_box section.contents03 .settlement_box {
    margin: 0 auto 0 auto;
}

#cmp_vanilla_box section.contents03 .ingredients_box img {
    margin: 60px 35px 90px 35px;
}

#cmp_vanilla_box section.contents03 .ok_box {
    background-image: url("/products/brand/familia/assets/img/bg_ok.gif");
    background-color: #fffa00;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding: 70px 0;
    position: relative;
}


#cmp_vanilla_box section.contents03 .ok_box img.kirakira_left {
    position: absolute;
    left: 0;
    top: 175px;
    margin: 0 0 0 5%;
}

#cmp_vanilla_box section.contents03 .ok_box img.kirakira_right {
    position: absolute;
    right: 0;
    top: 175px;
    margin: 0 5% 0 0;
}

#cmp_vanilla_box section.contents03 .ok_box img.cloud {
    margin: 50px auto;
}

#cmp_vanilla_box section.contents04 {
    text-align: center;
    background-image:
        url("/products/brand/familia/assets/img/bg_cooking_left.gif"),
        url("/products/brand/familia/assets/img/bg_cooking_right.gif"),
        url("/products/brand/familia/assets/img/bg_cooking_center.gif");
    background-repeat:
        repeat-y,
        repeat-y,
        repeat;
    background-size:
        40%,
        25%,
        auto;
    background-position:
        top left,
        top right,
        center center;
    background-color: #0b318f;
}

#cmp_vanilla_box section.contents04 .title {
    margin: 50px auto 0 auto;
}

#cmp_vanilla_box #cooking_box {
    width: 1000px;
    border-radius: 0 0 3px 5px;
    background-image: url("/products/brand/familia/assets/img/bg_cooking_box.gif");
    background-repeat: repeat-x;
    background-position: top;
    background-color: #ffffff;
    margin: 0 auto;
    padding: 0 0 50px 0;
}

#cmp_vanilla_box #cooking_box .menu_box {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    font-size: 120%;
}

#cmp_vanilla_box #cooking_box .menu_top_box {
    padding: 50px 0 0 0;
}

#cmp_vanilla_box #cooking_box .menu_sec_box {
    padding: 100px 0 0 0;
}

#cmp_vanilla_box #cooking_box .menu_box img.title {
    margin: 0 auto 30px auto;
    width: 100%;
}

#cmp_vanilla_box #cooking_box .menu_box .photo_box {
    display: inline-block;
    width: 53%;
}

#cmp_vanilla_box #cooking_box .menu_box .photo_box img {
    width: 100%;
    height: auto;
}

#cmp_vanilla_box #cooking_box .menu_box .photo_right {
    float: right;
    padding: 0 0 0 2%;
}

#cmp_vanilla_box #cooking_box .menu_box .photo_left {
    float: left;
    padding: 0 2% 0 0;
}

#cmp_vanilla_box #cooking_box .menu_box .recipe_box {
    display: inline-block;
    text-align: left;
    width: 45%;
    margin: 20px auto 0 auto;
}

#cmp_vanilla_box #cooking_box .menu_box .recipe_box .sub_title {
    color: #7ac643;
    padding: 5px 0 5px 30px;
    border: #7ac643 solid;
    border-width: 0 0 1px 0;
    background-image: url("/products/brand/familia/assets/img/menu_icon01.gif");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 0 5px;
    margin: 0 auto 30px auto;
}

#cmp_vanilla_box #cooking_box .menu_box .material {
    margin: 50px auto 0 auto;
    width: 100%;
}

#cmp_vanilla_box #cooking_box .menu_box ul,
#cmp_vanilla_box #cooking_box .menu_box ol {
    margin: 0 0 30px 1.5em;
    padding: 0; 
}

#cmp_vanilla_box #cooking_box .menu_box ul li,
#cmp_vanilla_box #cooking_box .menu_box ol li {
    content: "• ";
    color: #1a49ba;
}

#cmp_vanilla_box #cooking_box .menu_box ul li {
    padding: 5px 0;
    background-image: url("/products/brand/familia/assets/img/bg_recipedot.gif");
    background-repeat: repeat-x;
    background-position: 0 50%;
    clear: both;
}

#cmp_vanilla_box #cooking_box .menu_box ul li.span_dot {
    background-image: none;  
}

#cmp_vanilla_box #cooking_box .menu_box ul li .dot {
    background-image: url("/products/brand/familia/assets/img/bg_recipedot.gif");
    background-repeat: repeat-x;
    background-position: 0 50%;
    width: 100%;
    display: block;
    overflow: hidden;
}

#cmp_vanilla_box #cooking_box .menu_box ul li span {
    background-color: #ffffff;
    color: #000000;
    padding: 0 13px 0 0;
}

#cmp_vanilla_box #cooking_box .menu_box ul li span.right {
    float: right;
    padding: 0 0 0 15px;
    width: auto;
}

#cmp_vanilla_box #cooking_box .menu_box ul li .asterisk {
    position: relative;
    left: -20px;
    top: 8px;
    width: 14px;
    height: auto;
}

#cmp_vanilla_box #cooking_box .menu_box ul li .asterisk_txt {
    position: relative;
    left: -0.7em;
}

#cmp_vanilla_box #cooking_box .menu_box ol li {
    padding: 10px 0;
}

#cmp_vanilla_box #cooking_box .menu_box ol li span {
    color: #000000;
}

#cmp_vanilla_box #cooking_box .menu_box ol li span.number {
    color: #1a49ba;
}

#cmp_vanilla_box section.contents04 .bottom_gr {
    height: 150px;
    width: 100%;
}

#cmp_vanilla_box section.contents05 {
    padding: 0 0 100px 0;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    background-image: 
        url("/products/brand/familia/assets/img/bg_bottom.gif"),
        url("/products/brand/familia/assets/img/bg_blue.gif");
    background-size: 
        contain,
        auto;
    background-position: 
        top center,
        center center;
    background-repeat: 
        no-repeat,
        repeat;
    background-color: #002378;
}

#cmp_vanilla_box section.contents05 .left_box {
    margin: 0 20px 0 0;
    vertical-align: middle;
    display: inline-block;
    width: 570px;
}


#cmp_vanilla_box section.contents05 .right_box {
    vertical-align: middle;
    display: inline-block;
    font-size: 120%;
    width: 405px;
}

#cmp_vanilla_box section.contents05 .right_box a img {
    display: block;
    margin: 50px auto 0 auto;
    overflow: hidden;
}

#cmp_vanilla_box section.contents05 .right_box a {
    color: #ffffff;
    text-decoration: none;
}

#cmp_vanilla_box section.contents05 .right_box a:hover,
#cmp_vanilla_box section.contents05 .right_box a img.btn:hover {
    opacity: 0.7;
}

.img1000 {width: 1000px;}/*2000*/
.img540 {width: 540px;}/*1080*/
.img420 {width: 420px;}/*840*/
.img960 {width: 960px;}/*1920*/
.img225 {width: 225px;}/*450*/
.img103 {width: 103px;}/*206*/
.img116 {width: 116px;}/*232*/
.img910 {width: 910px;}/*1820*/
.img600 {width: 600px;}/*1200*/
.img995 {width: 995px;}/*1990*/
.img955 {width: 955px;}/*1910*/
.img270 {width: 270px;}/*540*/
.img91 {width: 91px;}/*182*/
.img523 {width: 523px;}/*1046*/
.img900 {width: 900px;}/*1800*/
.img750 {width: 750px;}/*1500*/
.img591 {width: 591px;}/*1182*/
.img98 {width: 98px;}/*196*/
.img574 {width: 574px;}/*1148*/
.img350 {width: 350px;}/*700*/
.img382 {width: 382px;}/*764*/
.img14 {width: 14px!important; display: inline-block; margin: 0 3px; position: relative; top: 6px;}/*28*/

@media all and (-ms-high-contrast: none) {
.img14 {width: 14px; display: inline-block; margin: 0 3px; position: relative; top: 2px;}/*28*/
}

/* ------------------------------------------------------ */
/* 1920モニター・波対策 */
@media only screen and (max-width : 1440px) {
/* ------------------------------------------------------ */
    #cmp_vanilla_box section.contents01 {
        padding: 0 0 90px 0;
    }
    
    #cmp_vanilla_box section.section02_wave .contents02_wave {
        top: -140px;
    }
    
    #cmp_vanilla_box section.contents02 {
        top: -65px;
    }
    
    #cmp_vanilla_box section.contents03 .settlement_box {
        margin: 35px auto 0 auto;
    }
}
    
/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 1024px) {
/* ------------------------------------------------------ */
    #cmp_vanilla_box img {
    vertical-align: top;
}
    
    #cmp_vanilla_box #cooking_box {
        width: 80%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_top_box {
        padding: 10px 0 0 0;
    }
    
    #cmp_vanilla_box section.contents04 {
        text-align: center;
        background-image:
            none,
            none,
            url("/products/brand/familia/assets/img/bg_cooking_center.gif");
    }
    
    #cmp_vanilla_box section.contents04 .title {
        width: 100%;
    }
    
    #cmp_vanilla_box section.contents05 .left_box {
    width: 470px;
    }
    
    #cmp_vanilla_box section.contents05 .right_box {
    width: 320px;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box .recipe_box {
        width: 100%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box ul li.span_dot {
        background-image: url("/products/brand/familia/assets/img/bg_recipedot.gif");
    }
    
    #cmp_vanilla_box #cooking_box .menu_box ul li .dot {
        background-image: none;
        width: auto;
        display: inline;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box .photo_box {
        width: 100%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box .photo_box img {
        width: 50%;
    }

    #cmp_vanilla_box section .contents_box img.productas01 {
        margin: 0 auto 10px auto;
    }

    #cmp_vanilla_box section .contents_box img.productas02 {
        margin: 0 auto 17.5px auto;
    }
    
    #cmp_vanilla_box section.contents01 .kirakira_box img {
        margin: 17px;
    }
    
    #cmp_vanilla_box section.contents01 img.kirakira_left {
        margin: 28px 0 0 3.5%;
    }
    
    #cmp_vanilla_box section.contents01 img.kirakira_right {
        margin: 70px 3.5% 0 0;
    }
    
    #cmp_vanilla_box section.contents02 .read_box img.check {
        margin: 0 auto 35px auto;
    }
    
    #cmp_vanilla_box section.contents02 {
        top: -85px;
    }
    
    #cmp_vanilla_box section.contents02 .case02a {
        margin: 0 0 25px 40px;
    }
    
    #cmp_vanilla_box section.contents03 .settlement_box {
        margin: 15px auto 0 auto;
    }
    
    #cmp_vanilla_box section.contents03 .ingredients_box img {
    margin: 21px 12px 31px 12px;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box img.cloud {
    margin: 35px auto;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box img.kirakira_left {
        top: 120px;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box img.kirakira_right {
        top: 120px;
    }
    
    #cmp_vanilla_box section.contents04 .bottom_gr {
        height: 50px;
        width: 100%;
    }
    
    #cmp_vanilla_box section.contents05 {
        padding: 0 0 50px 0;
    }
    
    #cmp_vanilla_box section.contents05 .left_box {
        margin: 0 auto 20px auto;
    }
    
    #cmp_vanilla_box section.contents05 .right_box a img {
    margin: 35px auto;
    }
    
.img1000 {width: 700px;}/*2000*/
.img540 {width: 378px;}/*1080*/
.img420 {width: 294px;}/*840*/
.img960 {width: 672px;}/*1920*/
.img225 {width: 158px;}/*450*/
.img103 {width: 72px;}/*206*/
.img116 {width: 81px;}/*232*/
.img910 {width: 637px;}/*1820*/
.img600 {width: 420px;}/*1200*/
.img995 {width: 697px;}/*1990*/
.img955 {width: 669px;}/*1910*/
.img270 {width: 189px;}/*540*/
.img91 {width: 64px;}/*182*/
.img523 {width: 366px;}/*1046*/
.img900 {width: 630px;}/*1800*/
.img750 {width: 525px;}/*1500*/
.img591 {width: 414px;}/*1182*/
.img98 {width: 69px;}/*196*/
.img574 {width: 402px;}/*1148*/
.img350 {width: 245px;}/*700*/
.img382 {width: 267px;}/*764*/

}


/* ------------------------------------------------------ */
/* ipad air and iphone X 横 対策 */
@media only screen and (max-width : 960px) {
/* ------------------------------------------------------ */
    #loading img {
        max-height: 80%;
        max-width: 80%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box .material {
        margin: 10px auto 0 auto;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box img.cloud {
        margin: 30px auto;
    }
    .img900 {width: 70%;}/*1800*/

    #cmp_vanilla_box section.contents03 .ok_box img.kirakira_left {
        top: 145px;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box img.kirakira_right {
        top: 145px;
    }
    
    #cmp_vanilla_box section.contents02 .case02a {
        margin: 0 0 25px 0;
    }
    
    #cmp_vanilla_box section.contents02 .case02b {
        margin: 0;
    }

}

/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 812px) {
/* ------------------------------------------------------ */
    
    
    
    
    #cmp_vanilla_box #cooking_box {
        width: 90%;
        border-radius: 0 0 0 0;
    }
    
    
    
}

/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 667px) {
/* ------------------------------------------------------ */
    
    #cmp_vanilla_box img {
        width: 90%;
    }
    
    #cmp_vanilla_box .mo_br {
        display: inline;
    }
    
    #cmp_vanilla_box .pc_obj {
        display: none;
    }
    
    #cmp_vanilla_box .sp_obj {
        display: inline;
    }
    
    #cmp_vanilla_box section.section02_wave {
    }
    
    #cmp_vanilla_box section.contents01 img.header,
    #cmp_vanilla_box section.section02_wave img.header {
        width: 130%;
        left: -15%;
        position: relative;
    }
    
    #cmp_vanilla_box section .contents_box {
        top: 0;
    }

    #cmp_vanilla_box section .contents_box img.productas01 {
        width: 70%;
        margin: 0 50px 0 0;
    }

    #cmp_vanilla_box section .contents_box img.productas02 {
        width: 50%;
        margin: 0 30px 0 0;
        float: right;
        position: relative;
        top: -20px;
    }
    
    #cmp_vanilla_box section.contents01 {
        padding: 0 0 80px 0;
    }
    
    #cmp_vanilla_box section.contents01 img.kirakira_left,
    #cmp_vanilla_box section.contents01 img.kirakira_right {
        display: none;
    }
    
    #cmp_vanilla_box section.contents01 .kirakira_box img {
        margin: 10px 1%;
        width: 30%;
    }
    
    #cmp_vanilla_box section.section02_wave .contents02_wave {
        top: -80px;
    }
    
    #cmp_vanilla_box section.contents02 {
        top: -40px;
    }
    
    #cmp_vanilla_box section.contents02 .img600,
    #cmp_vanilla_box section.contents02 .img1000 {
        vertical-align: bottom;
    }
    
    #cmp_vanilla_box section.contents02 .case02a {
        margin: 0 0 15px 0;
    }
    
    #cmp_vanilla_box section.contents02 .case02b {
        margin: 0 0 0 0;
    }
    
    #cmp_vanilla_box section.contents02 .img600 {
        width: 80%;
    }
    
    #cmp_vanilla_box section.contents02 .read_box img.check {
        margin: 0 auto 10px auto;
    }
    
    #cmp_vanilla_box section.contents03 {
        top: 0;
    }
    
    #cmp_vanilla_box section.contents03 .settlement_box {
        margin: 0 auto 0 auto;
    }
    
    #cmp_vanilla_box section.contents03 .ingredients_box {
        padding: 0 0 30px 0;
    }
    
    #cmp_vanilla_box section.contents03 .ingredients_box img {
        margin: 30px auto 0 auto;
        width: 30%;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box img.kirakira_left,
    #cmp_vanilla_box section.contents03 .ok_box img.kirakira_right {
        display: none;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box {
        padding: 50px 0;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box img {
        width: 80%;
    }
    
    #cmp_vanilla_box section.contents03 .ok_box img.cloud {
        margin: 30px auto;
    }
    
    #cmp_vanilla_box section.contents04 {
        background-size: 15%, 15%, auto;
    }
    
    #cmp_vanilla_box section.contents04 .title {
        width: 100%;
    }
    
    #cmp_vanilla_box #cooking_box {
        width: 90%;
        border-radius: 0 0 0 0;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box img.title {
        margin: 0 auto 10px auto;
        width: 120%;
        position: relative;
        left: -10%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box .photo_box {
        width: 100%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box .photo_box img {
        width: 80%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box .recipe_box .sub_title {
        margin: 0 auto 10px auto;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box {
        font-size: 100%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box ul li.span_dot {
        background-image: none;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box ul li .dot {
        background-image: url("/products/brand/familia/assets/img/bg_recipedot.gif");
        width: auto;
        display: block;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box .material {
        margin: 0 auto;
        width: 100%;
    }
    
    #cmp_vanilla_box #cooking_box .menu_sec_box {
        padding: 50px 0 0 0;
    }
    
    #cmp_vanilla_box #cooking_box .menu_box ol li {
        padding: 5px 0;
    }
    
    #cmp_vanilla_box section.contents04 .bottom_gr {
        height: 30px;
        width: 100%;
    }
    
    #cmp_vanilla_box section.contents05 {
        padding: 0 0 50px 0;
    }
    
    #cmp_vanilla_box section.contents05 .left_box {
        width: 70%;
        margin: 0 auto 20px auto;
    }

    #cmp_vanilla_box section.contents05 .left_box img {
        width: 100%;
    }
    
    #cmp_vanilla_box section.contents05 .right_box {
        width: 60%;
        margin: 0 auto 0 auto;
    }
    
    #cmp_vanilla_box section.contents05 .right_box a img {
        margin: 30px auto 15px auto;
    }
}

/* ------------------------------------------------------ */
/* Media Query for Tablets */
@media only screen and (max-width : 420px) {
/* ------------------------------------------------------ */
    
    
}