@charset "utf-8";

/*----螢幕寬度小於1380px時----*/
/*---------------------------*/
@media screen and (max-width: 1380px){

}


/*----螢幕寬度小於1485px時----*/
/*---------------------------*/
@media screen and (max-width: 1486px){
    .btnTop-Wrap{right: 75px;}
}


/*----螢幕寬度小於於952px時----*/
/*---------------------------*/
@media screen and (max-width: 952px){
}


/*----螢幕寬度小於於900px時----*/
/*---------------------------*/
@media screen and (max-width: 900px){
    .theme-along{width: 30%;}
}




/*----螢幕寬度小於於855px時----*/
/*---------------------------*/
@media screen and (max-width: 855px){

    .btnTop-Wrap {right: 55px;}
    footer{text-align: left;}
    footer .announce{text-align: left;}
}



/*----螢幕寬度小於於800px時----*/
/*---------------------------*/
@media screen and (max-width: 800px){


    #theme-mb{display: inline-block;}
    #theme-pc{display: none;}

    .rightBN-wrap {top: -110px;}
    .rightBN-wrap a{width: 80px;}
    .rightBN-wrap > a > img {width: 100%;}    
}



/*----螢幕寬度小於於788px時----*/
/*---------------------------*/
@media screen and (max-width: 788px){
  .btn-wrap div{
    flex-direction: column-reverse;}

  .btn-wrap div:nth-of-type(1) a {
    flex: 2;
    min-width: 85%;}

  .btn-wrap div:nth-of-type(2) a {
    flex: 1;
    max-width: 85%;}
}


/*----螢幕寬度小於於688px時----*/
/*---------------------------*/
@media screen and (max-width: 688px){
    .navi-warp ul li {
        padding: 10px 2px;
        font-size: 16px;}
    .navi-warp ul li span.w-break{ display: block;}
}


/*----螢幕寬度小於於625px時----*/
/*---------------------------*/
@media screen and (max-width: 625px){
    .section-title-wrap.deco-plant h3 .w-break{ display: block;}
}


/*----螢幕寬度小於於600px時----*/
/*---------------------------*/
@media screen and (max-width: 600px){


    #chart-pc{display: none;}
    #chart-mobile{display: inline-block;}

    .btn-wrap { justify-content: center;}
    .btn-wrap a{
        width: 50%;
        font-size: 1.1em;}

    .sec-wrap .sec > div:nth-of-type(2){
        width: 80%;
        margin-left: 10%;}

    .prize-card .prize-card-list{ padding: 0;}
    .prize-col .prize-card .prize-card-list span{
        flex: initial;
        width: 70%;}

    .prize-card{ padding: 15px 10px;}
    .note-list ul{
        padding: 10px;
        font-size: 1.1em;}

    .camp-100plants .plants100 .col{ padding: 0;}
    .camp-certify .certify > div{ padding: 20px 20px 10px;}
    .sec-wrap,
    .sec-wrap .sec > div,
    .sec-cnotent{padding: 10px 2%;}
    .company{padding: 0;}

    /*footer*/
    footer {text-align: left;}
    footer .announce{text-align: left;} 

}




/*----螢幕寬度小於於455px時----*/
/*--------------------------*/
@media screen and (max-width: 455px){
    .btn-wrap{
        div{
            a{
                span{font-size: 1.5em;}
			}
        }
    }

}


/*----螢幕寬度小於於360px時----*/
/*---------------------------*/
@media screen and (max-width: 360px){
  .btn-wrap div a span {font-size: 1.2em;}
  .btn-wrap div:nth-of-type(1) a { min-width: 95%;}
  .btn-wrap div:nth-of-type(2) a { max-width: 95%;}

}


/*------------iPhone5-------*/
/*--------------------------*/
@media screen and (max-width: 320px){
    .rightBN-wrap {top: -50px;}
    .rightBN-wrap a{width: 80px;}

}