@charset "UTF-8";

/* プラレール背景 */
/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px) {
body #common_section_wrapper_10 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_3_sm.png'), /* 画像2（最上レイヤー） */
            url('bg_20.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 画像2は繰り返さない */
            repeat; /* 画像1は繰り返し */
        background-position: 
            bottom; /* 画像2を下%*/
            top; /* 画像1を上 */
        background-size: 
            auto, /* 画像2を自動 */
            auto; /* 画像1は自動 */
    }
}


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


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

/* リカちゃん背景 */
/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px) {
body #common_section_wrapper_11 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_4_sm.png');
        background-repeat: 
            repeat-y;
        background-position: 
            top;
        background-size: 
            100%; /* 画像を自動 */
    }
}


/* 画面幅が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_19.png');
        background-repeat: 
            repeat-y;
        background-position: 
            top;
        background-size: 
            100%; /* 画像を自動 */
    }
}


/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px) {
   body #common_section_wrapper_11 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_19.png');
        background-repeat: 
            repeat-y;
        background-position: 
            top;
        background-size: 
            100%;/* 画像を自動 */
    }
}


/* おふろ図鑑背景 */

/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px) {
    body #common_section_wrapper_5 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_21.png'), /* 画像4 */
            url('bg_9.png'), /* 画像2 */
            url('bg_8.png'), /* 画像3 */
            url('bg_5_sm.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 画像4は横に繰り返す */
            repeat-y, /* 画像3は下に繰り返す */
            repeat-y, /* 画像2は下に繰り返す */
            repeat; /* 画像1は繰り返し */
        background-position: 
            bottom, /* 画像4を一番下に */
            top right 5px, /* 画像2を右から5px、上揃え */
            top left 5px, /* 画像2を左から5px、上揃え */
            top; /* 画像1を上（全面リピート） */
        background-size: 
            auto, /* 画像4は自動 */
            20%, /* 画像2を20%のサイズに */
            20%, /* 画像3を20%のサイズに */
            100%; /* 画像1は自動 */
    }
}

/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_5 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_21.png'), /* 画像4 */
            url('bg_9.png'), /* 画像2 */
            url('bg_8.png'), /* 画像3 */
            url('bg_6.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 画像4は横に繰り返す */
            repeat-y, /* 画像3は下に繰り返す */
            repeat-y, /* 画像2は下に繰り返す */
            repeat; /* 画像1は繰り返し */
        background-position: 
            bottom, /* 画像4を一番下に */
            top right 5px, /* 画像2を右から5px、上揃え */
            top left 5px, /* 画像2を左から5px、上揃え */
            top; /* 画像1を上（全面リピート） */
        background-size: 
            auto, /* 画像4は自動 */
            20%, /* 画像2を20%のサイズに */
            20%, /* 画像3を20%のサイズに */
            50%; /* 画像1は自動 */
    }
}

/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px) {
       body #common_section_wrapper_5 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_21.png'), /* 画像4 */
            url('bg_9.png'), /* 画像2 */
            url('bg_8.png'), /* 画像3 */
            url('bg_6.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 画像4は横に繰り返す */
            repeat-y, /* 画像3は下に繰り返す */
            repeat-y, /* 画像2は下に繰り返す */
            repeat; /* 画像1は繰り返し */
        background-position: 
            bottom, /* 画像4を一番下に */
            top right 5px, /* 画像2を右から5px、上揃え */
            top left 5px, /* 画像2を左から5px、上揃え */
            top; /* 画像1を上（全面リピート） */
        background-size: 
            auto, /* 画像4は自動 */
            15%, /* 画像2を15%のサイズに */
            15%, /* 画像3を15%のサイズに */
            auto; /* 画像1は自動 */
    }
}

/* おふろ図鑑背景2 */

@media screen and (max-width: 640px) {
    body #common_section_wrapper_7 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_21.png'), /* 画像4 */
            url('bg_11.png'), /* 画像2 */
            url('bg_10.png'), /* 画像3 */
            url('bg_5_sm.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 画像4は横に繰り返す */
            repeat-y, /* 画像3は下に繰り返す */
            repeat-y, /* 画像2は下に繰り返す */
            repeat; /* 画像1は繰り返し */
        background-position: 
            bottom, /* 画像4を一番下に */
            top right 5px, /* 画像2を右から5px、上揃え */
            top left 5px, /* 画像2を左から5px、上揃え */
            top; /* 画像1を上（全面リピート） */
        background-size: 
            auto, /* 画像4は自動 */
            20%, /* 画像2を20%のサイズに */
            20%, /* 画像3を20%のサイズに */
            100%; /* 画像1は自動 */
    }
}

/* 画面幅が641pxから1024pxの場合（ミディアムスクリーン） */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    body #common_section_wrapper_7 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_21.png'), /* 画像4 */
            url('bg_11.png'), /* 画像2 */
            url('bg_10.png'), /* 画像3 */
            url('bg_6.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 画像4は横に繰り返す */
            repeat-y, /* 画像3は下に繰り返す */
            repeat-y, /* 画像2は下に繰り返す */
            repeat; /* 画像1は繰り返し */
        background-position: 
            bottom, /* 画像4を一番下に */
            top right 5px, /* 画像2を右から5px、上揃え */
            top left 5px, /* 画像2を左から5px、上揃え */
            top; /* 画像1を上（全面リピート） */
        background-size: 
            auto, /* 画像4は自動 */
            20%, /* 画像2を20%のサイズに */
            20%, /* 画像3を20%のサイズに */
            50%; /* 画像1は自動 */
    }
}

/* 画面幅が1025px以上の場合（ラージスクリーン）*/
@media screen and (min-width: 1025px) {
       body #common_section_wrapper_7 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_21.png'), /* 画像4 */
            url('bg_11.png'), /* 画像2 */
            url('bg_10.png'), /* 画像3 */
            url('bg_6.png'); /* 画像1 */
        background-repeat: 
            repeat-x, /* 画像4は横に繰り返す */
            repeat-y, /* 画像3は下に繰り返す */
            repeat-y, /* 画像2は下に繰り返す */
            repeat; /* 画像1は繰り返し */
        background-position:
            bottom, /* 画像4を一番下に */ 
            top right 5px, /* 画像2を右から5px、上揃え */
            top left 5px, /* 画像2を左から5px、上揃え */
            top; /* 画像1を上（全面リピート） */
        background-size: 
            auto, /* 画像4は自動 */
            15%, /* 画像2を15%のサイズに */
            15%, /* 画像3を15%のサイズに */
            auto; /* 画像1は自動 */
    }
}

/* メッセージ背景 */
/* 画面幅が640px以下の場合（スモールスクリーン） */
@media screen and (max-width: 640px) {
    body #common_section_wrapper_4 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_4.png'), /* 画像4（中間レイヤー） */
            url('bg_5.png'), /* 画像5（中間レイヤー） */
            url('bg_1_sm.png'), /* 画像2（中間レイヤー） */
            url('bg_2_sm.png'), /* 画像3（最上レイヤー） */
            url('bg_1.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 画像4は繰り返さない */
            repeat-x, /* 画像5は繰り返す */
            no-repeat, /* 画像2は繰り返さない */
            no-repeat, /* 画像3は繰り返さない */
            repeat; /* 画像1は繰り返し */
        background-position: 
            bottom -5px right 10px, /* 画像4を右下 */
            bottom left, /* 画像5を左上 */
            top left 5px, /* 画像2を左から10px、上揃え */
            top right 5px, /* 画像3を右から10px、上揃え */
            top; /* 画像1を上（全面リピート） */
        background-size: 
            25%, /* 画像4を30%のサイズに */
            100%, /* 画像5は自動 */
            25%, /* 画像2を25%のサイズに */
            25%, /* 画像3を25%のサイズに */
            100%; /* 画像1は自動 */
    }
}

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

/* 画面幅が1025pxから1600pxの場合（ラージスクリーン）*/
@media screen and (min-width: 1025px) and (max-width: 1600px) {
    body #common_section_wrapper_4 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_4.png'), /* 画像4（中間レイヤー） */
            url('bg_5.png'), /* 画像5（中間レイヤー） */
            url('bg_2_a.png'), /* 画像2（中間レイヤー） */
            url('bg_3_a.png'), /* 画像3（最上レイヤー） */
            url('bg_1.png'); /* 画像1（最下レイヤー） */
        background-repeat: 
            no-repeat, /* 画像4は繰り返さない */
            repeat-x, /* 画像5は繰り返す */
            no-repeat, /* 画像2は繰り返さない */
            no-repeat, /* 画像3は繰り返さない */
            repeat; /* 画像1は繰り返し */
        background-position: 
            bottom -10px right 40px, /* 画像4を右下 */
            bottom left, /* 画像5を左上 */
            top left 40px, /* 画像2を左から30px、上揃え */
            top right 40px, /* 画像3を右から30px、上揃え */
            top left; /* 画像1を左上（全面リピート） */
        background-size: 
            20%, /* 画像4を15%のサイズに */
            auto, /* 画像5は自動 */
            20%, /* 画像2を20%のサイズに */
            20%, /* 画像3を20%のサイズに */
            auto; /* 画像1は自動 */
    }
}

/* 画面幅が1600px以上2000px以下の場合（ラージスクリーン）*/
@media screen and (min-width:1600px)and (max-width: 2000px) {
    body #common_section_wrapper_4 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_4.png'), /* 画像6 */
            url('bg_5.png'), /* 画像5 */
	    url('bg_26_a.png'), /* 画像4 */
            url('bg_25.png'), /* 画像3 */
            url('bg_27_a.png'), /* 画像2 */
            url('bg_1.png'); /* 画像1 */
        background-repeat: 
            no-repeat,
            repeat-x,
            no-repeat,
            no-repeat,
            no-repeat,
            repeat;
        background-position: 
            bottom -10px right 40px, /* 画像6を右下 */
            bottom left, /* 画像5を左下 */
            bottom 60px left 40px, /* 画像4を下から20px、左から40px */
            top left 40px, /* 画像3を左から40px、上揃え */
            top right 40px, /* 画像2を右から30px、上揃え */
            top left; /* 画像1を左上（全面リピート） */
        background-size: 
            20%, /* 画像6を20%のサイズに */
            auto, /* 画像5は自動 */
            20%, /* 画像4を20%のサイズに */
            20%, /* 画像3を20%のサイズに */
            20%, /* 画像2を20%のサイズに */
            auto; /* 画像1は自動 */
    }
}

/* 画面幅が2000px以上の場合（ラージスクリーン）*/
@media screen and (min-width:2000px) {
    body #common_section_wrapper_4 {
        position: relative;
        width: 100%;
        background-image: 
            url('bg_4.png'), /* 画像6 */
            url('bg_5.png'), /* 画像5 */
	    url('bg_31_a.png'), /* 画像4 */
            url('bg_30_a.png'), /* 画像3 */
            url('bg_29_a.png'), /* 画像2 */
            url('bg_1.png'); /* 画像1 */
        background-repeat: 
            no-repeat,
            repeat-x,
            no-repeat,
            no-repeat,
            no-repeat,
            repeat;
        background-position: 
            bottom -30px right 40px, /* 画像6を右下 */
            bottom left, /* 画像5を左下 */
            bottom 5px left 40px, /* 画像4を下から20px、左から40px */
            top left 40px, /* 画像3を左から40px、上揃え */
            top right 20px, /* 画像2を右から30px、上揃え */
            top left; /* 画像1を左上（全面リピート） */
        background-size: 
            20%, /* 画像6を20%のサイズに */
            auto, /* 画像5は自動 */
            20%, /* 画像4を20%のサイズに */
            20%, /* 画像3を20%のサイズに */
            20%, /* 画像2を20%のサイズに */
            auto; /* 画像1は自動 */
    }
}

/* プラレール用遊び方 */
.plaR {
  padding: 12px 80px 12px 80px;
  border-radius: 100em;
  background-color: #033884;
  color: #FFFFFF;
}

@media screen and (max-width: 640px) {
.plaR {
  padding: 12px 60px 12px 60px;
  border-radius: 100em;
  background-color: #033884;
  color: #FFFFFF;
}
}


/* リカちゃん用遊び方 */
.liccaR {
  padding: 12px 80px 12px 80px;
  border-radius: 100em;
  background-color: #f44a76;
  color: #FFFFFF;
}

@media screen and (max-width: 640px) {
.liccaR {
  padding: 12px 60px 12px 60px;
  border-radius: 100em;
  background-color: #f44a76;
  color: #FFFFFF;
}