@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/*==================== 全体 ====================*/

html {
    scroll-behavior: auto !important;
}

body {
    width: 100%;
    font-size: 16px;
    font-family: "Zen Maru Gothic", serif;
    background: url(img/bg_tile.jpeg);
}

p {
    color: #000;
    font-size: 1rem;
}

#blend {
    background: rgba(143, 195, 31, 0.2);
    margin-top: 6rem;
}

.container {
    width: 100%;
    max-width: 1096px;
    height: auto;
    padding: 0 15px;
    margin: 0 auto;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    opacity: 0.7;
}


h2 {
    color: #000;
    font-size: 34px;
    text-align: center;
    font-style: normal;
    letter-spacing: 5px;
}

.mini_text {
    color: #6DC058;
    font-family: "Darumadrop One", sans-serif;
    font-size: 1rem;
}

h3,
h4 {
    color: #000;
    font-size: 24px;
    line-height: 34px;
    font-weight: bold;
}

.line-28 {
    line-height: 28px;
}

.line-26 {
    line-height: 26px;
}


/*===== フォトコン応募要項 始まり =====*/
h1{
    max-width: 1000px;
    margin: 0 auto;
}
h1 img{
    width: 100%;
}
html body p.obo{
    text-align: center;
    margin: 50px auto 60px auto;
}
html body p.obo.first{
    margin: 80px auto 80px auto;
}
html body p.obo a{
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    background: #00623B;
    color: #FFF;
    padding: 13px 55px 18px 110px;
    font-size: 2.5rem;
    background: url(img/kobushi-link.png) 45px 23px no-repeat #00623B;
    border-radius: 50px;
}
@media (max-width: 850px) {
html body p.obo.first{
/*    margin: -33px auto 60px auto;*/
    margin: 60px auto 60px auto;
}
html body p.obo a{
    padding: 4px 25px 8px 60px;
    font-size: 1.5rem;
    background: url(img/kobushi-link.png) 25px 11px no-repeat #00623B;
    background-size: 25px;
}
}
.overview h2,
.overview > p,
.overview .requirements{
    max-width: 1000px;
    width: 96%;
    margin: 0 auto;
}
.overview h2{
    margin-bottom: 20px;
}
.overview > p span{
    width: 90%;
    display: block;
    margin: 0 auto 80px auto;
    font-size: 1.2rem;
}
@media (max-width: 600px) {
.overview > p span{
    width: 100%;
    font-size: 1rem;
}
}
.overview h3,
.overview dl dt{
    font-size: 24px;
    border-bottom: #00623B solid 2px;
    padding-bottom: 4px;
    margin-bottom: 10px;
    margin-top: 40px;
}
.overview dl:nth-of-type(1) dd{
    font-size: 1.1rem;
}
.overview dl dd p,
.overview dl dd li{
    font-size: 1rem;
}
html body .overview dl dd ol li::marker{
    font-size: 1.1em;
}
html body ol,html body ul {
    padding-left: 1.5rem;
}
html body ul.nolist {
    list-style: none;
    padding-left: 1.3rem;
    text-indent: -1.0rem;
}

/*===== フォトコン応募要項 終わり =====*/






/*==================== スクロールでふわっと出現 ====================*/
.fade-in {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 1;
}

.fade-in.on {
    transform: translateY(0);
    opacity: 1;
}


.character-in {
    transition: 0.4s linear;
    transform: translateY(150px);
    opacity: 1;
    display: none;
}

.character-in.on {
    transform: translateY(0);
    opacity: 1;
}








/*==================== 背景いろいろ ====================*/
/*===== 参加方法 =====*/
.bg_sanka01,
.bg_sanka02,
.bg_spot01,
.bg_spot02,
.bg_area {
    height: auto;
    position: absolute;
    z-index: -1;
}

.bg_sanka01 {
    top: 10%;
    left: -10rem;
}

.bg_sanka01 img {
    width: 175%;
}

.bg_sanka02 {
    width: 30%;
    top: 40%;
    right: 0;
}


/*===== スタンプスポット =====*/
.bg_spot01 {
    top: -10rem;
    left: -10rem;
    display: none;
}

.bg_spot02 {
    top: 15%;
    left: -5rem;
}

.bg_area {
    display: none;
}








/*==================== 改行 ====================*/
.br_1none,
.br_3none,
.br_4none {
    display: none;
}

.br_1block,
.br_11block
.br_2block,
.br_5none {
    display: block;
}







/*==================== メイン ====================*/
main {
    width: 100%;
    height: auto;
    background: #8FC31F;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.main_inner {
    max-width: 1096px;
    background: url(img/main_bg.png) no-repeat center center;
    background-size: cover;
    padding: 0 15px 75px;
}

#main_logo img {
    margin-top: -4rem;
}

.main_text{
    max-width: 580px;
}

.main_text p {
    font-size: 14px;
    line-height: 28px;
}




.img_box {
    width: 100%;
    height: calc(100px + 20vw);
    min-height: 170px;
    display: flex;
    position: relative;
    margin-top: -1rem;
}

.img_01 {
    width: 30%;
    position: absolute;
    top: 3rem;
    left: 0;
}

.img_02 {
    width: 28%;
    position: absolute;
    top: 1rem;
    left: 24%;
}

.img_03 {
    width: 28%;
    position: absolute;
    top: 3rem;
    left: 46%;
}

.img_04 {
    width: 30%;
    position: absolute;
    top: 2rem;
    left: 70%;
}







/*==================== 甲武信ユネスコパークとは ====================*/
.about_text {
    font-size: 18px;
    line-height: 30px;
}

.btn_kobushi {
    max-width: 400px;
    height: 52px;
    background: #0081CC;
    border-radius: 50px;
    box-shadow: 0 4px 0 0 #003452;
}

.btn_arrow {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    width: 17px;
    height: 17px;
    border: 1px solid currentColor;
    background: currentColor;
    border-radius: 50%;
    box-sizing: content-box;
}

.btn_arrow::before {
    content: '';
    color: #0081CC;
    width: 5px;
    height: 5px;
    border-style: solid;
    border-color: transparent;
    border-width: 4px 6px;
    border-left-color: currentColor;
    border-right: 0;
    transform: translateX(15%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.btn_kobushitext {
    font-size: 15px;
    text-align: center;
}




/*==================== 参加方法 ====================*/
.howto {
    margin-top: 2rem;
}

.howto_inner {
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
    padding: 50px 20px;
}

.howto_flow {
    width: 66%;
    background: #ECF4F5;
    border-radius: 20px;
}

.howto_flow p {
    font-size: 14px;
}

.howto_flow .step {
    font-size: 2rem;
    font-family: "Darumadrop One", sans-serif;
}

.orange_arrow {
    width: 18px;
    height: 2px;
    color: #FFC700;
    line-height: 1;
    vertical-align: middle;
    background: #FFC700;
    display: none;
    position: relative;
}

.orange_arrow::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 2.5px solid #FFC700;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg);
    transform-origin: top right;
    position: absolute;
    top: 50%;
    right: -1px;
    box-sizing: border-box;
}

.howto_inner img {
    width: 50%;
    height: auto;
}







.btn_entry {
    max-width: calc(100% - 30px);
    height: auto;
    max-height: 106px;
    background: #0081CC;
    border-radius: 50px;
    box-shadow: 0 4px 0 0 #003452;
    padding: 7px 0;
    margin: 2rem 15px 8rem 15px;
}

.btn_entrytext {
    font-family: "Darumadrop One", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.btn_entrytext .span_mini {
    font-size: 18px;
}

.btn_entrytext .entry {
    display: block;
}







/*==================== プレゼント ====================*/
.present_box {
    background: url(img/bg_presentsp.png) no-repeat center center;
    background-size: cover;
    padding: 3rem 0 10rem;
}

.chusen {
    font-size: 20px;
}

.present {
    font-size: calc(1rem + 1.5vw);
}

.present_gift {
    height: 250px;
    border-radius: 10px;
    padding: 10px;
}

.present_gift div{
    width: 100%;
    height: 100%;
    border: 1px dashed #329B00;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.p35 {
    padding: 35px!important;
}

.p45 {
    padding: 45px!important;
}

.present_gift img {
    max-height: 200px;
}

.present_gifttext {
    min-height: 86px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    flex-grow: 1;
    padding: 10px;
    position: relative;
}

.present_gifttext div {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.present_np {
    width: 30%;
    position: absolute;
    top: -3.2rem;
    right: 0.5rem;
}







.present_butterfly {
    position: absolute;
    top: -9rem;
    left: 0;
}

.present_butterfly img {
    width: 40%;
}



.comp_also {
    width: 40%;
    position: absolute;
    top: -4rem;
    left: 2rem;
    z-index: 10;
}

.comp_box {
    border-radius: 10px;
    padding: 5px;
    margin-top: 6rem;
}

.comp_inner {
    border: 1px dashed #329B00;
    border-radius: 10px;
    position: relative;
}

.comp_t {
    font-size: 24px;
    line-height: 34.75px;
}

.comp_b,
.present_attention li {
    color: #000;
    font-size: 14px;
    margin-bottom: 10px;
}

.present_attention p {
    font-size: 20px;
}







/*==================== スタンプスポット ====================*/
.bg_spotbox {     /*container的な役割*/
    width: 100%;
    margin: 1rem 0 100px;
}

.spot {
    height: auto;
    margin-left: 15px;
}

.spot_inner {
    background: #fff;
    border-radius: 30px 0 0 30px;
    padding: 100px 0 50px 15px;
}






.course_tab img {
    max-width: 20%;
}

.course_box {
    padding-top: 40px;
    margin: 0 0 50px 0;
}

.course {
    width: auto;
    font-family: "Darumadrop One", sans-serif;
    background: #89D1E8;
    border-radius: 50px;
    padding: 4px 25px 0px 25px;
    margin-bottom: 10px !important;
}

.course span {
    font-size: 36px;
}
@media (max-width: 600px) {
.course {
    padding: 4px 25px 7px 25px;
}
.course span {
    font-size: 26px;
}
}

.course_name {
    font-size: 32px;
    line-height: 38px;
}






#course_a .course,
#course_a .place_nam {
    background: #C7E869;
}

#course_b .course,
#course_b .place_nam {
    background: #89D1E8;
}

#course_c .course,
#course_c .place_nam {
    background: #C8A0E1;
}

#course_d .course,
#course_d .place_nam {
    background: #F1ADB9;
}

#course_e .course,
#course_e .place_nam {
    background: #F8B374;
}

#course_f .course,
#course_f .place_nam {
    background: #F7E95C;
}





.place_box {
    width: 315px;
    height: auto;
    display: flex;
    flex-direction: column;
}

.stamp_place {
    min-width: 315px;
    margin-right: 2rem;
}

.stamp_place img {
    width: 315px;
    height: 226px;
    border-radius: 30px;
    object-fit: cover;
}

.place_nam {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: 5px;
}

.place_nam p {
    line-height: 20px;     /* でもこれがスマホでちょうどいい */
}

.place {
    font-size: 20px;
    line-height: 25px;
}

.place_text p {
    height: 222px;
}

.place_text6 p,
.place_text7 p {
    height: 196px;
}


.place_address {
    font-size: 14px;
    border-top: 1px solid #ccc;
    padding-top: 5px;
}


.slick-prev {
    z-index: 10;
}

.slick-next {
    right: 0;
}

.slick-arrow:before{
	content:""!important;           /* 元々の矢印を消す */
    width: 40px!important;
    height: 40px!important;
    position: absolute;
    top: -4.5rem;
    opacity: 1!important;
}

.slick-prev:before{                   /* ひだりの矢印 */
    background: url(img/arrow_left.png)!important;
    background-size: contain!important;
}

.slick-next:before{                   /* みぎの矢印 */
    background: url(img/arrow_right.png)!important;
    background-size: contain!important;
    left: calc(100% - 50px);
}






/*==================== エリアマップ ====================*/
.area {
    height: auto;
    background: #fff;
    border-radius: 0 30px 30px 0;
    padding: 100px 15px 50px 25px;
    margin: 20px 15px 100px 0;
}

.character_area {
    position: absolute;
    top: -8rem;
    right: 15px;
}

.character_area img {
    width: 40%;
}

.character_position {
    top: -10rem;
}





/*==================== フッター ====================*/
.f_inner img {
    width: 60%;
}

.f_inner p {
    font-size: 14px;
}

.f_inner a {
    color: #FFF;
    display: inline-block;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.f_copy {
    font-size: 12px;
}



.bg_footer {
    padding-top: 12rem;
    background: url(img/bg_fl.png) no-repeat top;
    padding-bottom: 3rem;
}

.f_character {
    text-align: end;
    position: absolute;
    top: -3rem;
    right: 50px;
}

.f_character img {
    width: 40%;
}















/* ========================================
メディアクエリ 375px
======================================== */
@media screen and (min-width: 375px) {


    /*==================== 改行 ====================*/
    .br_11block {
        display: none;
    }




    /*==================== 甲武信ユネスコパークとは ====================*/
    .btn_arrow {
        width: 24px;
        height: 24px;
    }

    .btn_arrow::before {
        border-width: 5px 8px;
    }




    /*==================== プレゼント ====================*/
    .present_np {
        top: -3.8rem;
    }


    /*==================== スタンプスポット ====================*/
    .place_text6 p {
        height: 220px;
    }


    /*==================== エリアマップ ====================*/
    .character_position {
        top: -12rem;
    }





}













/* ========================================
メディアクエリ 425px
======================================== */
@media screen and (min-width: 425px) {


    /*==================== 参加方法 ====================*/
    .btn_entry {
        max-width: 370px;
        margin: 2rem auto 8rem auto;
    }





    /*==================== プレゼント====================*/
    .present_np {
        top: -3.1rem;
        right: 1rem;
    }







    /*==================== スタンプスポット ====================*/
    .place_box {
        width: 380px;
    }

    .stamp_place {
        min-width: 380px;
    }

    .stamp_place img {
        width: 380px;
        height: 272px;
    }


    .place_text p,
    .place_text6 p{
        height: 220px;
    }


}






















/* ========================================
メディアクエリ sm　576px
======================================== */
@media screen and (min-width: 576px) {

    /*==================== 改行 ====================*/
    .br_1none {
        display: block;
    }

    .br_1block {
        display: none;
    }





    /*==================== 全体 ====================*/
    .container {
        width: 90%;
        padding: 0;
    }





    /*==================== 甲武信ユネスコパークとは ====================*/
.about_text {
    font-size: 18px;
    line-height: 30px;
}

.btn_kobushi {
    max-width: 400px;
    height: 52px;
    background: #0081CC;
    border-radius: 50px;
    box-shadow: 0 4px 0 0 #003452;
}

.btn_kobushitext {
    text-align: start;
}









    /*==================== 参加方法 ====================*/
    .btn_entry {
        max-width: 400px;
    }






    /*==================== プレゼント ====================*/
    .present {
        font-size: calc(1rem + 0.8vw);
    }


    .present_butterfly {
        top: -12rem;
    }

    .comp_also {
        width: 30%;
    }




    /*==================== スタンプスポット ====================*/
    .spot {
        margin-left: 5%;
    }

    .spot_inner {
        padding: 50px 0 75px 50px;
    }

    .slick-arrow:before{
        left: 0;
    }

    .slick-next:before{
        left: calc(100% - 85px);
    }




    /*==================== エリアマップ ====================*/
    .area {
        padding: 50px 50px 75px 30px;
    }

    .character_position {
        top: -10rem;
    }





}
















/* ========================================
メディアクエリ md　768px
======================================== */
@media screen and (min-width: 768px) {

    /*==================== 改行 ====================*/
    .br_2none {
        display: none;
    }

    .br_4none {
        display: block;
    }

    .br_2block {
        display: none;
    }



    /*==================== 背景いろいろ ====================*/
    /*===== 参加方法 =====*/
    .bg_sanka01 {
        top: 30%;
    }

    .bg_sanka01 img,
    .bg_sanka02 img {
        width: 50%;
    }

    .bg_sanka02 {
        width: 100%;
        top: 5%;
        right: -10rem;
    }


    /*===== スタンプスポット =====*/
    .bg_spot01 {
        top: 15%;
        left: -15rem;
    }

    .bg_spot02 {
        top: 40%;
        left: -5rem;
    }

    .bg_spot01 img,
    .bg_spot02 img {
        width: 150%;
    }






    /*==================== メイン ====================*/
    main {
        padding-top: 3rem;
        padding-bottom: 7em;            /* 背景を伸ばす */
    }

    .main_inner {
        background: url(img/main_bgsp.png) no-repeat center center;
        background-size: contain;
        padding: 0 15px 75px;
    }

    .img_box {
        width: 80%;
        margin-top: 1rem;
    }






    /*==================== 甲武信ユネスコパークとは ====================*/
    .about_text {
        max-width: 600px;
    }

    .btn_kobushi {
        max-width: 620px;
        height: 76px;
    }

    .btn_arrow {
        width: 40px;
        height: 40px;
    }

    .btn_arrow::before {
        border-width: 8px 12px;
    }

    .btn_kobushitext {
        font-size: 24px;
    }




    /*==================== 参加方法 ====================*/
    .howto {
        margin-top: -20rem;
    }

    .howto_flow {
        width: 28%;
    }

    .howto_arrow {
        width: 6%;
        padding: 0 1%;
    }


    .howto_inner {
        padding: 50px 75px;
    }

    .orange_arrow {
        display: inline-block;
    }


    .btn_entry {
        max-width: 620px;
    }






    /*==================== プレゼント ====================*/
    .present_box {
        background: url(img/bg_present.png) no-repeat center center;
        background-size: cover;     /* こっちもかけないと真四角 */
    }

    .present {
        font-size: calc(1rem + 0.5vw);
    }

    .present_np {
        top: -2.5rem;
    }


    .comp_b,
    .present_attention li {
        line-height: 26px;
        margin-bottom: 0;
    }

    .comp_also {
        width: 22%;
        top: -5rem;
        left: 1rem;
    }

    .comp_box {
        margin-top: 7rem;
    }




    /*==================== スタンプスポット ====================*/
    .course_tab {
        padding-right: 5%;
    }

    .course_tab div {
        display: inline;
    }

    .course_tab img {
        max-width: 12%;
    }

    .course {
        line-height: 50px;
        margin-right: 15px;
    }




    .place_box {
        width: 438px;
    }

    .stamp_place {
        min-width: 438px;
    }

    .stamp_place img {
        width: 438px;
        height: 314px;
    }

    .place_text p,
    .place_text6 p,
    .place_text7 p {
        height: 175px;
    }


    .slick-arrow:before{
        width: 50px!important;
        height: 50px!important;
        top: -4rem;
    }





    /*==================== エリアマップ ====================*/
    .area {
        margin: 20px 5% 100px 0;
    }

    .character_position {
        right: 5%;
    }




    /*==================== フッター ====================*/
    footer {
        background: url(img/bg_fr.png) no-repeat;
        background-position: left 0 top 7rem;
    }

    .f_inner {
        width: 500px;
    }

    .f_inner img {
        width: 50%;
    }

    .bg_footer {
        background-position: right -12rem top 0;
    }

    .f_character {
        top: 12rem;
        right: 5%;
    }



}


















/* ========================================
メディアクエリ lg　992px
======================================== */
@media screen and (min-width: 992px) {

    /*==================== 全体 ====================*/





    /*==================== 改行 ====================*/
    .br_2none,
    .br_3none {
        display: block;
    }

    .br_4none,
    .br_5none {
        display: none;
    }




    /*==================== メイン ====================*/

    .main_inner {
        background: url(img/main_bg.png) no-repeat center center;
        background-size: contain;
        padding: 0 50px 100px;
    }

    #main_logo img {
        margin-top: -7rem;
    }

    .main_text p {
        font-size: 1rem;
    }



    .img_box {
        width: 100%;
        max-width: 1200px;
        height: 0;
        min-height: 0;
        margin-bottom: 4rem;
    }

    .img_01 {
        width: 25%;
        position: absolute;
        top: 11rem;
        left: -7rem;
    }

    .img_02 {
        width: 22%;
        position: absolute;
        top: -3rem;
        left: -3.5rem;
    }

    .img_03 {
        width: 23%;
        position: absolute;
        top: -1.4rem;
        left: 83%;
    }

    .img_04 {
        width: 22%;
        position: absolute;
        top: 10.6rem;
        left: 89%;
    }




    /*==================== 甲武信ユネスコパークとは ====================*/



    /*==================== 参加方法 ====================*/
    .btn_entry {
        max-width: 908px;
        height: 106px;
        margin-top: 3rem;
    }

    .btn_entrytext {
        font-size: 48px;
        line-height: auto;
    }

    .btn_entrytext .span_mini {
        font-size: 38px;
    }





    /*==================== プレゼント ====================*/
    .chusen {
        font-size: 2rem;
    }

    .present {
        font-size: 24px;
    }


    .present_np {
        top: -3.2rem;
    }





    .comp_inner div:first-child {
        margin-right: -3rem;
    }


    .comp_also {
        width: 20%;
        top: -6rem;
        left: 2rem;
    }






    /*==================== スタンプスポット ====================*/
    .spot_inner {
        padding-left: 75px;
    }

    .course_tab img {
        max-width: 10%;
    }

    .course {
        margin-right: 30px;
    }

    .course_name {
        font-size: 40px;
    }



    .slick-arrow:before{
        width: 62px!important;
        height: 62px!important;
        left: -5px;
    }

    .slick-next:before{
        left: calc(100% - 150px);
    }






    /*==================== エリアマップ ====================*/
    .area {
        padding-right: 75px;
        padding-left: 100px;
    }

    .character_area img {
        width: 50%;
    }




    /*==================== フッター ====================*/
    .bg_footer {
        background-position: right -5rem top 0;
    }

    .f_character {
        top: 7rem;
    }

    .f_character img {
        width: 50%;
    }


}










/* ========================================
メディアクエリ　1140px
======================================== */
@media screen and (min-width: 1140px) {

    /*==================== 背景いろいろ ====================*/
    /*===== 参加方法 =====*/
    .bg_sanka01 {
        top: 32%;
        left: -20rem;
    }

    .bg_sanka01 img,
    .bg_sanka02 img {
        width: 40%;
    }

    .bg_sanka02 {
        right: -15rem;
    }


    /*===== スタンプスポット =====*/
    .bg_spot01 {
        left: -20rem;
    }

    .bg_spot01 img,
    .bg_spot02 img {
        width: 100%;
    }

    .bg_area {
        width: 50%;
        display: block;
        top: 90%;
        right: 0;
    }




    /*==================== 甲武信ユネスコパークとは ====================*/
    .about_text {
        max-width: 720px;
    }





    /*==================== 参加方法 ====================*/
    .btn_entrytext .entry {
        display: inline;
    }





    /*==================== プレゼント ====================*/
    .present_butterfly img {
        width: 50%;
    }





    /*==================== スタンプスポット ====================*/
    .course_tab {
        width: 1096px;
    }


    .spot {
        margin-left: calc((100% - 1096px) / 2);
    }





    /*==================== エリアマップ ====================*/
    .area {
        padding-left: calc((100% - 1096px) / 2);
        margin-right: calc((100% - 1096px) / 2);
    }

    .character_position {
        top: -12rem;
        right: calc(100% - 1000px);
    }





    /*==================== フッター ====================*/
    .f_inner {
        width: auto;
    }

    .bg_footer {
        background-position: right 0 top 0;
    }

    .f_character {
        top: 6rem;
        right: calc((100% - 1096px) / 2);
    }



}













/* ========================================
メディアクエリ　1200px
======================================== */
@media screen and (min-width: 1200px) {

    /*==================== フッター ====================*/
    .bg_footer {
        background-position: right 5rem top 0;
    }

}







/* ========================================
メディアクエリ　1400px
======================================== */
@media screen and (min-width: 1400px) {

    /*==================== フッター ====================*/
    footer {
        background-position: left -25rem top 12rem;
    }

    .bg_footer {
        background-position: right 5rem top 0;
    }

}







/* ========================================
メディアクエリ　1500px
======================================== */
@media screen and (min-width: 1600px) {

    /*==================== フッター ====================*/
    .bg_footer {
        background-position: right -20% top 0;
    }

}