@charset "utf-8";


.page_box2{
    width: 99%;
    padding: 40px 0 0 0;
    background-color: #fff;
    border-radius: 15px;
    margin: 40px auto;
    position: relative;
    font-size: 15px;
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    z-index: 1;
    overflow: hidden;
}
.page_box2 .inner{
    width: 88%;
    padding: 0 5% 0 7%;
    margin-bottom: 20px;
}
.rec_top_cp{
    width: 90%;
    font-size: 20px;
    color: #078330;
    line-height: 1.6em;
    font-weight: 700;
    text-align: left;
    margin: 10px 5% 30px 5%;
}
.rec_cp{
    width: 90%;
    color: #000;
    font-size: 15px;
    line-height: 1.8em;
    margin: 10px 5% 30px 5%;
}
.rec_base{
    width: 100%;
    margin: 10px auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px 0;
    height: 45vh;
}
.rec_p1{
    width: 60%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 3;
}
.rec_p2{
    width: 50%;
    position: absolute;
    top:30px;
    right: 10px;
    z-index: 2;
    background-color: #fff;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.rec_p3{
    width: 50%;
    position: absolute;
    top:130px;
    left: 10px;
    z-index: 1;
    background-color: #fff;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    margin-bottom: 40px;
}
.rec_btn{
    width:80%;
    margin: 10px auto 30px auto;
    padding: 20px 30px;
    background-color: #0F8F3A;
    font-size: 20px;
    border-radius: 10px;
    text-align: left;
    font-weight: 500;
    color: #fff;
}
.rec_btn a{
    color: #FFFFFF;
    text-decoration: none
}.rec_btn a:hover{
    color: #FBCF4B;
}
/*PUBLIC*/
.public_list{
    width: 90%;
    margin: 30px auto;
}
.public_list ul li{
    list-style: none;
    font-size: 18px;
    background-image: url("../images/public/list_icon.png");
    background-size: 10%;
    background-repeat: no-repeat;
    text-align: left;
    border-bottom: 2px solid #096858;
    padding: 20px 0 20px 100px;
    margin: 20px 0;
    line-height: 1.6em
}
.public_list a{
    color: #096858;
}
.public_list a:hover{
    color: #A20B0D;
}
/*COMPLAIN*/

.comp_base{
    width: 90%;
    margin: 10px auto 40px auto;
}
.comp_base p{
    margin: 20px 0;
    color: #000;
    line-height: 2em;
}
.comp_green{
    color: #0F8F3A;
}
.comp_btn{
        width:80%;
    margin: 10px auto 50px auto;
    padding: 20px 30px;
    background-color:#C24034;
    font-size: 20px;
    border-radius: 10px;
    text-align: left;
    font-weight: 500;
    color: #fff;
}
.comp_btn a{
    color: #FFFFFF;
    text-decoration: none
}.comp_btn a:hover{
    color: #B576F1;
}
/*PRIVACY*/

.privacy_num{
    font-size: 20px;
    color:#008f3a;
    margin-left: -10px;
}
.privacy_bottom{
    clear: both;
    float: right;
    margin: 50px 30px 40px auto;
    color:#008f3a; 
    font-size: 18px;
    text-align: left;
    line-height: 1.8em;
}
/* DOWNLOAD*/
.dl_top{
    width: 90%;
    font-size:25px;
    font-weight: 700;
    text-align: left;
    margin: 10px 5% 30px 5%;
    color: #006858;
}
.dl_top p{
    font-size: 16px;
    margin: 0;
    color: #000;
}
.download_list_1{
    width: 84%;
    margin: 10px auto;
    padding: 10px 20px;
    text-align: left;
    font-size: 20px;
    border: 2px solid #c44035;
    border-radius: 10px;
    background-color: #FFF5F4;
    color:#c44035; 
}.download_list_1 a{
    color: #c44035;
    text-decoration: none;
}
.download_list_1 a:hover{
    color: #1868B0;
}
.download_list_2{
    width: 84%;
    margin: 10px auto 20px auto;
    padding: 10px 20px;
    text-align: left;
    font-size: 20px;
    border: 2px solid #008f3a;
    border-radius: 10px;
    background-color: #F6F5ED;
    color:#008f3a; 
}
.download_list_2 a{
    color: #008f3a;
    text-decoration: none;
}
.download_list_2 a:hover{
    color: #BD7C04;
}


/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){
.rec_top_cp{
    width: 90%;
    font-size: 18px;
    color: #078330;
    line-height: 1.6em;
    font-weight: 700;
    text-align: left;
    margin: 10px 5% 0 5%;
}
.rec_cp{
    width: 90%;
    color: #000;
    font-size: 15px;
    line-height: 1.8em;
    margin: 0 5% 30px 5%;
}
.rec_base{
    width: 100%;
    margin: 10px auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 10px 0;
    height: 35vh;
}
.rec_p1{
    width: 60%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 3;
}
.rec_p2{
    width: 50%;
    position: absolute;
    top:0;
    right: 10px;
    z-index: 2;
    background-color: #fff;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.rec_p3{
    width: 50%;
    position: absolute;
    top:120px;
    left: 10px;
    z-index: 1;
    background-color: #fff;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    margin-bottom: 40px;
}
.rec_btn{
    width:82%;
    margin: 10px auto 30px auto;
    padding: 20px 30px;
    background-color: #0F8F3A;
    font-size: 17px;
    border-radius: 10px;
    text-align: left;
    font-weight: 500;
    color: #fff;
}
.rec_btn a{
    color: #FFFFFF;
    text-decoration: none
}.rec_btn a:hover{
    color: #FBCF4B;
}
    
/*PUBLIC*/
.public_list{
    width: 90%;
    margin: 30px auto;
}
.public_list ul li{
    list-style: none;
    font-size: 18px;
    background-image: url("../images/public/list_icon.png");
    background-size: 10%;
    background-repeat: no-repeat;
    background-position: left;
    text-align: left;
    border-bottom: 2px solid #096858;
    padding: 25px 0 20px 80px;
    margin: 20px 0;
    line-height: 1.6em
}


}



/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
.rec_top_cp{
    width: 90%;
    font-size: 16px;
    color: #078330;
    line-height: 1.6em;
    font-weight: 700;
    text-align: left;
    margin: 10px 5% 20px 5%;
}
.rec_cp{
    width: 90%;
    color: #000;
    font-size: 14px;
    line-height: 1.8em;
    margin: 0 5% 30px 5%;
}
.rec_base{
    width: 100%;
    margin: 10px auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 0;
    height: auto;
}
.rec_p1{
    width: 80%;
    position: relative;
    margin: 10px auto;
    z-index: 1;
}
.rec_p2{
    width: 80%;
    position: relative;
    margin: 10px auto;
    top:0;
    right: 0;
    z-index: 1;
    background-color: #fff;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.rec_p3{
    width: 80%;
    position: relative;
    margin: 10px auto;
    top:0px;
    left: 0px;
    z-index: 1;
    background-color: #fff;
    padding: 10px;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.3);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    margin-bottom: 40px;
}
.rec_btn{
    width:75%;
    margin: 0 auto 30px auto;
    padding: 20px 30px;
    background-color: #0F8F3A;
    font-size: 17px;
    border-radius: 10px;
    text-align: left;
    font-weight: 500;
    color: #fff;
}
/* DOWNLOAD*/
.dl_top{
    width: 90%;
    font-size:16px;
    font-weight: 700;
    text-align: left;
    margin: 10px 0 30px 5%;
    color: #006858;
}
.dl_top p{
    font-size: 14px;
    margin: 0;
    color: #000;
    line-height: 1.6em
}
.download_list_1{
    width: 74%;
    margin: 20px auto;
    padding: 10px 20px;
    text-align: left;
    font-size: 18px;
    border: 2px solid #c44035;
    border-radius: 10px;
    background-color: #FFF5F4;
    color:#c44035; 
}.download_list_1 a{
    color: #c44035;
    text-decoration: none;
}
.download_list_1 a:hover{
    color: #1868B0;
}
.download_list_2{
    width: 80%;
    margin: 10px auto 20px auto;
    padding: 10px 0 10px 20px;
    text-align: left;
    font-size: 16px;
    line-height: 1.6em;
    border: 2px solid #008f3a;
    border-radius: 10px;
    background-color: #F6F5ED;
    color:#008f3a; 
}
/*PUBLIC*/
.public_list{
    width: 90%;
    margin: 30px auto;
}
.public_list ul li{
    list-style: none;
    font-size: 16px;
    background-image: url("../images/public/list_icon.png");
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: left;
    text-align: left;
    border-bottom: 2px solid #096858;
    padding: 20px 0 20px 60px;
    margin: 10px 0;
    line-height: 1.6em
}
/*COMPLAIN*/

.comp_base{
    width: 90%;
    margin: 10px auto 40px auto;
    font-size: 14px;
}

.comp_btn{
    width:75%;
    margin: 10px auto 50px auto;
    padding: 20px 30px;
    background-color:#C24034;
    font-size: 18px;
    border-radius: 10px;
    text-align: left;
    font-weight: 500;
    color: #fff;
    line-height: 1.6em;
}
.privacy_bottom{
    clear: both;
    float: right;
    margin: 0 10px 40px auto;
    color:#008f3a; 
    font-size: 16px;
    text-align: right;
    line-height: 1.8em;
}
}