@charset "UTF-8";

/* メッセージ背景 */

/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px)  {
    body #common_section_wrapper_9 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_40_sm.png'), /* 画像1（最上レイヤー） */
            url('bg_41_sm.png'), /* 画像2（中間レイヤー） */
	    url('bg_43.png'), /* 画像5（中間レイヤー） */
            url('bg_42_sm.png'); /* 画像3（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat, /* 繰り返さない */
            repeat-x, /* 繰り返す */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像2を左上*/
	    top right, /* 画像1を右上 */
            top left, /* 画像2を左上*/
	    center; /* 画像1を真ん中*/
        background-size: 
            auto 100%, /* 画像1を横100%のサイズに */
            auto 100%, /* 画像2を横100%のサイズに */
            5% auto, /* 画像3を縦5%のサイズに */
            100% auto; /* 画像3を縦100%のサイズに */
    }
}

/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_9 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_40.png'), /* 画像1（最上レイヤー） */
            url('bg_41.png'), /* 画像2（中間レイヤー） */
            url('bg_42.png'); /* 画像3（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像2を左上*/
	    top right, /* 画像1を右上 */
	    center; /* 画像1を真ん中*/
        background-size: 
            auto 100%, /* 画像1を縦100%のサイズに */
            auto 100%, /* 画像2を縦100%のサイズに */
            100% auto; /* 画像3を縦100%のサイズに */
    }
}


/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px)and (max-width: 1366px){
    body #common_section_wrapper_9 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_40.png'), /* 画像1（最上レイヤー） */
            url('bg_41.png'), /* 画像2（中間レイヤー） */
            url('bg_42.png'); /* 画像3（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像2を左上*/
	    top right, /* 画像1を右上 */
	    center; /* 画像1を真ん中*/
        background-size: 
            auto 100%, /* 画像1を縦100%のサイズに */
            auto 100%, /* 画像2を縦100%のサイズに */
            100% auto; /* 画像3を縦100%のサイズに */
    }
}

/* 画面幅が1366px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1366px){
    body #common_section_wrapper_9 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_40.png'), /* 画像1（最上レイヤー） */
            url('bg_41.png'), /* 画像2（中間レイヤー） */
            url('bg_43.png'), /* 画像5（中間レイヤー） */
            url('bg_44.png'), /* 画像4（中間レイヤー） */
            url('bg_42.png'); /* 画像3（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat, /* 繰り返さない */
            repeat-x, /* 繰り返す */
            repeat-x, /* 繰り返す */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像2を左上*/
	    top right, /* 画像1を右上 */
            top left, /* 画像5を左上*/
            bottom left, /* 画像4を左下*/
	    center; /* 画像1を真ん中*/
        background-size: 
            auto 100%, /* 画像1を縦100%のサイズに */
            auto 100%, /* 画像2を縦100%のサイズに */
            auto, /* 画像5を自動に */
            auto, /* 画像4を自動に */
            100% auto; /* 画像3を縦100%のサイズに */
    }
}


/* 製品紹介背景 */

/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px)  {
    body #common_section_wrapper_11 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_25_sm.png'), /* 画像2（最上レイヤー） */
            url('bg_26_sm.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left bottom 20px, /* 画像2を左*/
	    right bottom 20px; /* 画像1を右上 */
        background-size: 
            60%, /* 画像2を30%のサイズに */
            60%; /* 画像2を30%のサイズに */
    }
}

/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_11 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_43.png'), /* 画像4（中間レイヤー） */
            url('bg_44.png'), /* 画像3（中間レイヤー） */
            url('bg_25.png'), /* 画像2（最上レイヤー） */
            url('bg_26.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            repeat-x, /* 繰り返す */
            repeat-x, /* 繰り返す */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像4を左上*/
            bottom left, /* 画像3を左下*/
            left bottom 20px, /* 画像2を左*/
	    right bottom 10px; /* 画像1を右上 */
        background-size: 
            auto, /* 画像4を自動に */
            auto, /* 画像3を自動に */
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px) {
    body #common_section_wrapper_11 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_43.png'), /* 画像4（中間レイヤー） */
            url('bg_44.png'), /* 画像3（中間レイヤー） */
            url('bg_25.png'), /* 画像2（最上レイヤー） */
            url('bg_26.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            repeat-x, /* 繰り返す */
            repeat-x, /* 繰り返す */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像4を左上*/
            bottom left, /* 画像3を左下*/
            left, /* 画像2を左*/
	    right; /* 画像1を右上 */
        background-size: 
            auto, /* 画像4を自動に */
            auto, /* 画像3を自動に */
            30%, /* 画像2を30%のサイズに */
            30%; /* 画像2を30%のサイズに */
    }
}

/* よくばりミルキー背景 */

/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px)  {
    body #common_section_wrapper_16 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_29_sm.png'); /* 画像 */
        background-repeat: 
            no-repeat; /* 繰り返さない */
        background-position: 
            top 310px right -50px; /* 画像を左*/
        background-size: 
            60%; /* 画像を60%のサイズに */
    }
}


/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_16 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_29_md.png'), /* 画像2（最上レイヤー） */
            url('bg_30.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left, /* 画像2を左*/
	    top 140px right 60px ; /* 画像1を右上 */
        background-size: 
            40%, /* 画像2を100%のサイズに */
            40%; /* 画像1は自動 */
    }
}


/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px)and (max-width: 1366px) {
    body #common_section_wrapper_16 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_29.png'), /* 画像2（最上レイヤー） */
            url('bg_30.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left, /* 画像2を左*/
	    top -200px right 60px ; /* 画像1を右上 */
        background-size: 
            40%, /* 画像2を100%のサイズに */
            40%; /* 画像1は自動 */
    }
}

/* 画面幅が1367px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1367px) {
    body #common_section_wrapper_16 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_43.png'), /* 画像4（中間レイヤー） */
            url('bg_44.png'), /* 画像3（中間レイヤー） */
            url('bg_29.png'), /* 画像2（最上レイヤー） */
            url('bg_30.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            repeat-x, /* 繰り返す */
            repeat-x, /* 繰り返す */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像4を左上*/
            bottom left, /* 画像3を左下*/
            left, /* 画像2を左*/
	    top -200px right 60px ; /* 画像1を右上 */
        background-size: 
            auto, /* 画像5を自動に */
            auto, /* 画像4を自動に */
            40%, /* 画像2を100%のサイズに */
            40%; /* 画像1は自動 */
    }
}


/* かろやかDAYS背景 */

/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px)  {
    body #common_section_wrapper_18 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_31_sm.png'), /* 画像2 */
            url('bg_32_sm.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left bottom 170px, /* 画像2を左*/
	    right bottom 270px; /* 画像1を右下 */
        background-size: 
            60%, /* 画像2を40%のサイズに */
            60%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_18 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_31.png'), /* 画像2 */
            url('bg_32_md.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left, /* 画像2を左*/
	    top right; /* 画像1を右上 */
        background-size: 
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px)and (max-width: 1366px)  {
    body #common_section_wrapper_18 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_31.png'), /* 画像2 */
            url('bg_32.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left, /* 画像2を左*/
	    top -200px right 40px ; /* 画像1を右上 */
        background-size: 
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1367px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1367px) {
    body #common_section_wrapper_18 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_43.png'), /* 画像4（中間レイヤー） */
            url('bg_44.png'), /* 画像3（中間レイヤー） */
            url('bg_31.png'), /* 画像2 */
            url('bg_32.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 繰り返す */
            repeat-x, /* 繰り返す */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像4を左上*/
            bottom left, /* 画像3を左下*/
            left, /* 画像2を左*/
	    top -200px right 40px ; /* 画像1を右上 */
        background-size: 
            auto, /* 画像5を自動に */
            auto, /* 画像4を自動に */
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* NIGHTモード背景 */

/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px)  {
    body #common_section_wrapper_20 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_33_sm.png'), /* 画像2 */
            url('bg_34.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left -30px bottom 200px, /* 画像2を左*/
	    right -30px bottom 180px; /* 画像1を右下 */
        background-size: 
            60%, /* 画像2を40%のサイズに */
            70%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_20 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_33.png'), /* 画像2 */
            url('bg_34.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left, /* 画像2を左*/
	     bottom 240px right -30px; /* 画像1を右下 */
        background-size: 
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px)and (max-width: 1366px) {
    body #common_section_wrapper_20 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_33.png'), /* 画像2 */
            url('bg_34.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left bottom -30px, /* 画像2を左*/
	    right bottom 90px; /* 画像1を右下 */
        background-size: 
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1367px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1367px) {
    body #common_section_wrapper_20 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_43.png'), /* 画像4（中間レイヤー） */
            url('bg_44.png'), /* 画像3（中間レイヤー） */
            url('bg_33.png'), /* 画像2 */
            url('bg_34.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 繰り返す */
            repeat-x, /* 繰り返す */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像4を左上*/
            bottom left, /* 画像3を左下*/
            left bottom 50px, /* 画像2を左*/
	    right bottom 150px; /* 画像1を右下 */
        background-size: 
            auto, /* 画像5を自動に */
            auto, /* 画像4を自動に */
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* スッキリFREE背景 */

/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px)  {
    body #common_section_wrapper_22 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_35.png'), /* 画像2 */
            url('bg_36_sm.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left -30px bottom 160px, /* 画像2を左*/
	    right bottom 120px; /* 画像1を右下 */
        background-size: 
            70%, /* 画像2を70%のサイズに */
            60%; /* 画像2を60%のサイズに */
    }
}

/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_22 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_35.png'), /* 画像2 */
            url('bg_36.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left, /* 画像2を左*/
	     bottom 90px right; /* 画像1を右下 */
        background-size: 
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px)and (max-width: 1366px) {
    body #common_section_wrapper_22 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_35.png'), /* 画像2 */
            url('bg_36.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left bottom, /* 画像2を左下*/
	    right bottom; /* 画像1を右下 */
        background-size: 
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1367px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1367px) {
    body #common_section_wrapper_22 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_43.png'), /* 画像4（中間レイヤー） */
            url('bg_44.png'), /* 画像3（中間レイヤー） */
            url('bg_35.png'), /* 画像2 */
            url('bg_36.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 繰り返す */
            repeat-x, /* 繰り返す */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像4を左上*/
            bottom left, /* 画像3を左下*/
            left bottom, /* 画像2を左下*/
	    right bottom -520px; /* 画像1を右下 */
        background-size: 
            auto, /* 画像5を自動に */
            auto, /* 画像4を自動に */
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* ゆるんとジャグジー背景 */

/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px)  {
    body #common_section_wrapper_24{
        position: relative;
        width: 100%;
        background-image: 
            url('bg_37_sm.png'), /* 画像2 */
            url('bg_38_sm.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left -30px bottom 160px, /* 画像2を左*/
	    right bottom 130px; /* 画像1を右下 */
        background-size: 
            70%, /* 画像2を70%のサイズに */
            60%; /* 画像2を60%のサイズに */
    }
}

/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_24{
        position: relative;
        width: 100%;
        background-image: 
            url('bg_37.png'), /* 画像2 */
            url('bg_38_md.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left -20px bottom 290px, /* 画像2を左*/
	     bottom 300px right; /* 画像1を右下 */
        background-size: 
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px) and (max-width: 1366px) {
    body #common_section_wrapper_24{
        position: relative;
        width: 100%;
        background-image: 
            url('bg_37.png'), /* 画像2 */
            url('bg_38.png'); /* 画像1 */
        background-repeat: 
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            left bottom 80px, /* 画像2を左下*/
	    right bottom 60px; /* 画像1を右下 */
        background-size: 
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}

/* 画面幅が1367px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1367px) {
    body #common_section_wrapper_24{
        position: relative;
        width: 100%;
        background-image: 
            url('bg_43.png'), /* 画像4（中間レイヤー） */
            url('bg_44.png'), /* 画像3（中間レイヤー） */
            url('bg_37.png'), /* 画像2 */
            url('bg_38.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 繰り返す */
            repeat-x, /* 繰り返す */
            no-repeat, /* 繰り返さない */
            no-repeat; /* 繰り返さない */
        background-position: 
            top left, /* 画像4を左上*/
            bottom left, /* 画像3を左下*/
            left bottom 80px, /* 画像2を左下*/
	    right bottom 210px; /* 画像1を右下 */
        background-size: 
            auto, /* 画像5を自動に */
            auto, /* 画像4を自動に */
            40%, /* 画像2を40%のサイズに */
            40%; /* 画像2を40%のサイズに */
    }
}