@charset "Shift_JIS";

/*common*/
body.renew_page #contents { padding-bottom: 60px; }
body.renew_page #contents * { box-sizing: border-box; }
body.renew_page #contents #contents_wrapper { width: 100%; }
body.renew_page #contents .contents_area { min-width: 1130px; width: 1130px; margin: 0 auto; padding: 5vw 0; }
body.renew_page #contents h2 { border: none; padding: 0; margin: 0; }

@media screen and (max-width:640px){
    body.renew_page #contents .contents_area { min-width: auto; width: 100%; }
    body.renew_page #contents #contents_wrapper { margin: 0; }
    body.renew_page #contents .contents_area { padding: 10% 20px; }
}

/*btn*/
.btn1,.btn2 { margin-top: 50px; }
.btn1 a { display: inline-block; padding: 20px 0; font-weight: bold; color: #ffffff !important; min-width: 400px; position: relative; border-radius: 50px; box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, .1); background: linear-gradient(to right, #22a1ff, #035daa); }
.btn1 a::before,
.btn1 a::after { content: ""; position: absolute; top: calc(50% - 2px); right: 15px; width: 10px; height: 3px; border-radius: 9999px; background-color: #ffffff; transform-origin: calc(100% - 2px) 50%; }
.btn1 a::before { transform: rotate(50deg); }
.btn1 a::after { transform: rotate(-50deg); }
.btn2 a { display: inline-block; padding: 20px 0; font-weight: bold; color: #00417e !important; min-width: 400px; position: relative; border-radius: 50px; box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, .1); border: 2px solid #00417e; }
.btn2 a::before,
.btn2 a::after { content: ""; position: absolute; top: calc(50% - 2px); right: 15px; width: 10px; height: 3px; border-radius: 9999px; background-color: #00417e; transform-origin: calc(100% - 2px) 50%; }
.btn2 a::before { transform: rotate(50deg); }
.btn2 a::after { transform: rotate(-50deg); }

@media screen and (max-width:640px){
    .btn1 a { min-width: 300px; padding: 15px 0; }
    .btn2 a { min-width: 300px; padding: 15px 0; }
}

/*MV*/
#main_title_sec { background: url("/products/public/energyearth_special/images/mv_bg_pc.jpg") no-repeat center top / cover; padding-bottom: 24vw; }

@media screen and (max-width:640px){
   #main_title_sec { background: url("/products/public/energyearth_special/images/mv_bg_sp.jpg") no-repeat center top / cover; } 
}

/*merit*/
#merit_sec { background: url("/products/public/energyearth_special/images/merit_bg_pc.jpg") no-repeat center top / 100%; }
#merit_sec h4 { margin-top: 20px !important; }
#merit_sec ul { display: flex; justify-content: space-between; }
#merit_sec ul li { width: 30%; }

@media screen and (max-width:640px){
    #merit_sec { background: url("/products/public/energyearth_special/images/merit_bg_sp.jpg") no-repeat center top / 100%; }
    #merit_sec h4 { margin-top: 0 !important; }
    #merit_sec ul { display: block; }
    #merit_sec ul li { width: 100%; }
}

/*use*/
#use_sec { background: #fff9ed; }
#use_sec #plan_box { background: #fff; border-radius: 30px; box-shadow: 0px 0px 20px 0px rgba(255, 210, 160, .4); padding: 30px 30px 20px; margin-top: 0 !important; }
#use_sec p { text-align: right; font-size: 82%; }
#use_sec p + div { margin-top: 10px; }

@media screen and (max-width:640px){
    #use_sec #plan_box { border-radius: 15px; padding: 20px; }
    #use_sec p { text-align: left; font-size: 82%; }
}

/*reason*/
#reason_sec { background: url("/products/public/energyearth_special/images/reason_bg_pc.jpg") no-repeat center top / cover; }
#reason_sec h2 { text-align: center; }
#reason_sec h2 img { max-width: 680px; }
#reason_sec .reason_box { background: #fff; border-radius: 30px 30px 28px 28px; padding: 0 0 20px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, .4); text-align: center; }
#reason_sec .reason_box h3 { text-align: center; background: #035daa; width: 100%; padding: 30px 0 25px; border-radius: 28px 28px 0 0; }
#reason_sec .reason_box h3 img { max-width: 400px; }
#reason_sec .reason_box h3 + div { margin-top: 30px; }
#reason_sec .reason_box h4 img { max-width: 460px; }
#reason_sec .reason_box h5 { background: #e0f3ff; border: 2px solid #035daa; padding: 4px; text-align: center; border-radius: 30px; font-weight: bold; color: #035daa; }

#reason_sec .reason_box ul { display: flex; justify-content: space-between; max-width: 1070px; margin: 0 auto; }
#reason_sec .reason_box ul li { width: 31%; text-align: left; }
#reason_sec .reason_box ul li p { margin-top: 5px; font-size: 110%; line-height: 1.5; font-weight: 500; }
#reason_sec .reason_box ul li img { width: 100%; margin-top: 20px; }

#reason_sec .reason_box ul#downLight_inner li { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
#reason_sec .reason_box ul#downLight_inner li div img { width: 100%; }
#reason_sec .reason_box ul#downLight_inner li > div:nth-child(1) { width: 50%; }
#reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) { width: 45%; display: flex; justify-content: space-between; }
#reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) div:nth-child(1) { width: 180px; margin-bottom: 30px; }
#reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) div:nth-child(1) img { margin-top: 0; }
#reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) div:nth-child(2) { width: calc(100% - 200px);}
#reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) div:nth-child(2) h6 { color: #ffcc00; text-align: center; background: linear-gradient(to right, #22a1ff, #035daa); border-radius: 30px; font-weight: bold; padding: 2px 0 4px; }
#reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) div:nth-child(2) p { margin-top: 15px; }

#reason_sec .reason_box:nth-of-type(3) { position: relative; }
#reason_sec .reason_box:nth-of-type(3) div { margin-top: 20px; }
#reason_sec .reason_box:nth-of-type(3) div.guarantee { position: absolute; right: 35px; top: 30px; }

@media screen and (max-width:640px){
    #reason_sec { background: url("/products/public/energyearth_special/images/reason_bg_sp.jpg") no-repeat center top / cover; }
    #reason_sec .reason_box { border-radius: 15px 15px 14px 14px; }
    #reason_sec .reason_box h3 { padding: 15px 0 13px; border-radius: 14px 14px 0 0; margin-top: 30px !important; }
    #reason_sec .reason_box h3 img { max-width: 200px; }
    #reason_sec .reason_box h3 + div { margin-top: 20px; }
    
    #reason_sec .reason_box ul { display: block; }
    #reason_sec .reason_box ul li { width: 90%; margin: 0 auto; font-size: 90%; margin-top: 20px; }
    #reason_sec .reason_box ul li img { margin-top: 10px; }
    
    #reason_sec .reason_box ul#downLight_inner li { width: 90%; margin: 0 auto; display: block; }
    #reason_sec .reason_box ul#downLight_inner li > div:nth-child(1) { width: 100%; }
    #reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) { width: 100%; margin-top: 20px; }
    #reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) div:nth-child(1) { width: 100px; margin-bottom: 30px; }
    #reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) div:nth-child(1) img { margin-top: 0; }
    #reason_sec .reason_box ul#downLight_inner li > div:nth-child(2) div:nth-child(2) { width: calc(100% - 120px); font-size: 80%; }
    
    #reason_sec .reason_box:nth-of-type(3) div.guarantee { display: none; }
}

/*lineup*/
#lineup_sec h2 { text-align: center; }
#lineup_sec h2 img { max-width: 680px; }
#lineup_sec h3 { background: #e0f3ff; border: 2px solid #035daa; padding: 10px; text-align: center; border-radius: 30px; font-weight: bold; color: #035daa; }
#lineup_sec h3 img { max-width: 261px; }
#lineup_sec ul + h3 { margin-top: 70px !important; }

#lineup_sec ul { display: flex; }
#lineup_sec ul li { width: 31%; border-radius: 30px; text-align: center; background: #035daa; box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, .4); margin: 10px 0 0 3.5%; }
#lineup_sec ul li:nth-child(1) { margin-left: 0; }
#lineup_sec ul li a { display: block; }
#lineup_sec ul li p { color: #fff; font-weight: bold; font-size: 130%; padding: 10px 0 12px; margin: 0 !important; }
#lineup_sec ul li img { width: 100%; border-radius: 28px 28px 0 0; }

@media screen and (max-width:640px){
    #lineup_sec h3 img { max-width: 140px; }
    #lineup_sec ul + h3 { margin-top: 30px !important; }
    
    #lineup_sec ul { display: block; }
    #lineup_sec ul li { width: 100%; border-radius: 15px; margin: 30px 0 0 0; }
    #lineup_sec ul li img { border-radius: 14px 14px 0 0; }
}

/*case*/
#case_sec { background: #fff9ed; text-align: center; }
#case_sec h2 img { max-width: 680px; }
#case_sec li img { border-radius: 15px; }
#case_sec li p { margin-top: 5px !important; font-weight: 500; }

#case_sec .prev-arrow { position: absolute; left: -50px; top: 50%; transform: translateY(-50%); transition: all .4s; }
#case_sec .next-arrow { position: absolute; right: -50px; top: 50%; transform: translateY(-50%); transition: all .4s; }
#case_sec .prev-arrow:hover,
#case_sec .next-arrow:hover { opacity: 0.7; }

@media screen and (max-width:640px){
    #case_sec ul { width: 90%; margin: 0 auto; }
    #case_sec .prev-arrow { left: -25px; width: 15px; top: 40%; transform: translateY(-40%); }
    #case_sec .next-arrow { right: -25px; width: 15px; top: 40%; transform: translateY(-40%); }
    #case_sec .prev-arrow img { width: 100%; }
}

/*inquiry*/
#inquiry_sec { text-align: center; }


/*inview*/
.animTarget { opacity:0; transition:all 1.5s; }
.animLeftTarget { opacity:0; transition:all 1.5s; transform:translate(-40px, 0); }
.animRightTarget { opacity:0; transition:all 1.5s; transform:translate(40px, 0); }
/*.animBottomTarget { opacity:0; transition:all 1.5s; transform:translate(0, 40px); }*/
.animBottomTarget { opacity:0; transition:all .5s; transform:translate(0, 0); }
.animTopTarget { opacity:0; transition:all 1.5s; transform:translate(0, -40px); }
.animTarget.animStart { opacity:1 !important; }
.animLeftTarget.animStart,
.animRightTarget.animStart,
.animBottomTarget.animStart,
.animTopTarget.animStart{ opacity:1 !important; transform:translate(0, 0) !important; }