/*============================================================================
コストダウン
============================================================================*/
@charset "utf-8";

/*----------------------------------------------------------------------------
3つの理由
----------------------------------------------------------------------------*/
article .costdown_point{
    margin:20px 40px;
    padding:10px 20px 10px 20px;
    /* border:solid 5px #a5a5ec; */
    border-radius:10px;
    background:linear-gradient(180deg,#ffd45e,#fff6de);
    box-shadow:7px 7px #ffd45e;
}

article .costdown_point h4{
    color:#302020;/* #443f0f; */
    margin:10px 0 0 0;
    font-family:'M PLUS 1p', sans-serif;
    font-size:36px;
    line-height:36px;
    font-weight:bold;
    text-decoration:none;
    font-style:normal;
    text-align:center;
    border:none;
}

article .costdown_point ol{
    counter-reset:number;
    list-style-type:none!important;
    padding-left:20px;
}

article .costdown_point li{
    position:relative;
    margin:15px 0 15px 10px;
    font-weight:normal;
    font-size:24px;
    line-height:30px;
    text-decoration:none;
    font-style:normal;
    width:100%;
    text-align:left;
    /* background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255, 251, 195, 0.8)); */
}

article .costdown_point li:before{
    position:absolute;
    counter-increment:number;
    content:counter(number);
    display:inline-block;
    color:#ffffff;
    background:#bd3f3f;
    font-weight:bold;
    font-size:24px;
    line-height:24px;
    border-radius:50%;
    left:-30px;
    top:0;
    width:30px;
    height:30px;
    padding:1px;
    text-align:center;
}

article .costdown_point li a{
    color:#303030;
    text-decoration:none;
    font-style:normal;
}

article .costdown_point li a:hover{
    text-decoration:underline;
}

article .costdown_point b{
    color:#ff0000;
}

@media screen and (max-width:639px){
    article .costdown_point{
        margin:4vw 1vw;
        padding:3vw;
        border-radius:3vw;
        box-shadow:1vw 1vw #ffd45e;
    }
    
    article .costdown_point h4{
        margin:2vw 0 0 0;
        font-size:6vw;
        line-height:6vw;
    }
    
    article .costdown_point ol{
        padding-left:3vw;
    }
    
    article .costdown_point li{
        margin:2vw 0 2vw 3vw;
        font-size:5vw;
        line-height:5vw;
    }
    
    article .costdown_point li:before{
        font-size:4vw;
        line-height:4vw;
        left:-6vw;
        top:0;
        width:6vw;
        height:6vw;
        padding:0.5vw;
    }
}

/*----------------------------------------------------------------------------
各ケースのバー
----------------------------------------------------------------------------*/
article .subtitle{
    width:100%;
    margin:60px auto 20px auto;
    padding:5px 0;
    background-image:linear-gradient(135deg,rgba(0,0,0,0),#c6e5ff,#98b7fa,rgba(0,0,0,0));
}

article .subtitle .image{
    width:800px;
    margin:0 auto 0 auto;
}

article .subtitle .image img{
    width:100%;
}

article .subtitle .text{
    color:#202020;
    padding:0;
    margin:0;
    font-family:'M PLUS 1p',sans-serif;
    font-size:32px;
    line-height:32px;
    text-align:center;
}

article .subtitle .text b{
    color:#ff0000;
    font-weight:bold;
}

article .subtitle .memo{
    font-size:16px;
    line-height:16px;
    position:absolute;
    left:760px;
    top:73px;
}

@media screen and (max-width:639px){
    article .subtitle{
        width:100%;
        margin:10vw auto 5vw auto;
        padding:2vw 0;
    }
    
    article .subtitle .image{
        width:100%;
    }
    
    article .subtitle .image img{
        width:100%;
    }
    
    article .subtitle .text{
        font-size:4vw;
        line-height:4vw;
    }

    article .subtitle .memo{
        position:static;
        margin-top:1vw;
        margin-right:2vw;
        font-size:2.5vw;
        line-height:2.5vw;
        text-align:right;
    }
}

/*----------------------------------------------------------------------------
以上使用できる
----------------------------------------------------------------------------*/
article .costdown_graph{
    width:950px;
    margin:20px auto 0 auto;
    border:dotted 5px #ff9100;
    border-radius:10px;
    padding:10px;
}

/* 比較方法 */
article .costdown_graph .means{
    position:relative;
    background-image:linear-gradient(#c7e9ff,#f7fcff);
    margin:10px;
    padding:30px 10px 10px 10px;
    border-radius:10px;
    box-shadow:6px 6px #c7e9ff;
}

article .costdown_graph .means .caption{
    position:absolute;
    font-size:24px;
    font-weight:bold;
    line-height:24px;
    padding:3px 10px;
    left:20px;
    top:0;
}


/* 比較方法リスト */
article .costdown_graph .means_list li{
    list-style:disc;
    margin:10px 5px 10px 50px;
    font-size:20px;
    line-height:20px;
}

article .costdown_graph .means_list li.kusakari{
    color:#042ee7;
}

article .costdown_graph .means_list li.oldbouso{
    color:#096e50;
}

article .costdown_graph .means_list li.newbouso{
    color:#ff0000;
}

article .costdown_graph .means_list li.memo::before{
    content:"※";
}

article .costdown_graph .means_list li.memo{
    list-style:none;
    margin-left:20px;
    margin-top:20px;
}

article .costdown_graph .image{
    width:920px;
    margin:20px auto 0 auto;
}

article .costdown_graph .image img{
    width:100%;
}

article .costdown_graph .detail{
    text-align:center;
    font-size:30px;
    line-height:35px;
    font-weight:bold;
    color:#ff0000;
    margin:20px;
}

article .costdown_graph .go_inflation{
    text-align:center;
    margin:50px 0 20px 0;
}

article .costdown_graph .go_inflation a{
    padding:1px 20px 5px 20px;
    background:#61f1c5;
    color:#000000;
    font-size:32px;
    font-weight:bold;
    line-height:32px;
    border-left:solid 20px #61f1c5;
    border-right:solid 20px #61f1c5;
    border-radius:50px;
}

@media screen and (max-width:639px){
    article .costdown_graph{
        width:100%;
        margin:5vw auto 0 auto;
        border:dotted 1vw #ff9100;
        border-radius:5vw;
        padding:1vw;
    }

    article .costdown_graph .means{
        margin:2vw;
        padding:8vw 1vw 1vw 1vw;
        border-radius:2vw;
        box-shadow:1vw 1vw #c7e9ff;
    }
    
    article .costdown_graph .means .caption{
        font-size:4vw;
        line-height:8vw;
        padding:1vw 2vw;
        left:4vw;
        top:0;
    }

    article .costdown_graph .means_list li{
        margin:1vw 1px 2vw 10vw;
        font-size:4vw;
        line-height:5vw;
    }
 
    article .costdown_graph .means_list li.memo{
        margin-left:5vw;
        margin-top:5vw;
    }
    
    article .costdown_graph .image{
        width:100%;
        margin:5vw auto 0 auto;
    }
    
    article .costdown_graph .image img{
        width:100%;
    }
    
    article .costdown_graph .detail{
        font-size:4vw;
        line-height:5vw;
        margin:3vw 1vw;
    }
}

/*----------------------------------------------------------------------------
資材コスト
----------------------------------------------------------------------------*/
article .costdown_seesaw{
    display:block;
    width:800px;
    margin:20px auto 50px auto;
}

article .costdown_seesaw img{
    width:800px;
}

article .costdown_seesaw .memo{
    display:block;
    margin:20px 0 0 0;
    padding:0;
    font-size:16px;
    line-height:16px;
    text-align:right;
}

@media screen and (max-width:639px){
    article .costdown_seesaw{
        width:90vw;
        margin:5vw auto 10vw auto;
    }
    
    article .costdown_seesaw img{
        width:100%;
    }
    
    article .costdown_seesaw .memo{
        margin:0 0 0 0;
        font-size:2vw;
        line-height:2vw;
    }

}

/*----------------------------------------------------------------------------
全面に敷く
----------------------------------------------------------------------------*/
article .costdown_flow{
    display:flex;
    width:980px;
    margin:20px auto 0 auto;
    padding:10px;
    background-image:linear-gradient(135deg,#70defa,#f4fffe);
    border-radius:5px;
    box-shadow:6px 6px #70defa;
}

article .costdown_flow .flow{
    float:left;
    margin:0;
    padding:15px 8px;
    background-image:linear-gradient(135deg,#b9faf5,#f4fffe);
}

article .costdown_flow .flow.entry_1{
    width:330px;
}

article .costdown_flow .arrow{
    float:left;
    border-left:solid 30px #0cacb8;
    border-top:solid 50px transparent;
    border-bottom:solid 50px transparent;
    width:0;
    height:0;
    margin:120px 5px 0 5px;
}

article .costdown_flow .flow.entry_2{
    width:640px;
}

article .costdown_flow .flow .title{
    font-family:"M PLUS 1p","Helvetica Neue",sans-serif;
    font-weight:bold;
    font-size:30px;
    line-height:30px;
    margin-bottom:20px;
    color:#000080;
    text-align:center;
}

article .costdown_flow .flow .image{
    width:300px;
}

article .costdown_flow .flow .image img{
    width:100%;
    border-radius:10px;
}

article .costdown_flow .flow .text{
    margin-top:10px;
    font-size:20px;
    line-height:25px;
}

article .costdown_flow .flow .frame .image{
    float:left;
}

article .costdown_flow .flow .frame .matome{
    float:left;
    margin-left:10px;
    width:270px;
}

article .costdown_flow .flow.entry_2 .text{
    font-size:30px;
    line-height:34px;
}

@media screen and (max-width:639px){
    article .costdown_flow{
        display:block;
        width:100%;
        margin:5vw auto 0 auto;
        padding:2vw;
        border-radius:2vw;
        box-shadow:1.5vw 1.5vw #70defa;
    }
    
    article .costdown_flow .flow{
        float:none;
        margin:0;
        padding:15px 8px;
        background-image:linear-gradient(135deg,#b9faf5,#f4fffe);
    }
    
    article .costdown_flow .flow.entry_1{
        width:100%;
    }
    
    article .costdown_flow .arrow{
        float:none;
        border-top:solid 8vw #0cacb8;
        border-left:solid 20vw transparent;
        border-right:solid 20vw transparent;
        border-bottom:none;
        margin:3vw auto 3vw auto;
    }
    
    article .costdown_flow .flow.entry_2{
        width:100%;
    }
    
    article .costdown_flow .flow .title{
        font-size:5vw;
        line-height:5vw;
        margin-bottom:20px;
    }
    
    article .costdown_flow .flow .image{
        width:100%;
    }
    
    article .costdown_flow .flow .image img{
        width:100%;
        border-radius:3vw;
    }
    
    article .costdown_flow .flow .text{
        margin-top:1vw;
        font-size:4vw;
        line-height:5vw;
    }
    
    article .costdown_flow .flow .frame .image{
        float:none;
    }
    
    article .costdown_flow .flow .frame .matome{
        float:none;
        margin-left:0;
        width:100%;
    }
    
    article .costdown_flow .flow.entry_2 .text{
        font-size:5vw;
        line-height:6vw;
    }
}

/*----------------------------------------------------------------------------
既設の発電所に導入する
----------------------------------------------------------------------------*/
article .costdown_existingpv{
    display:block;
    width:840px;
    margin:20px auto 0 auto;
}

article .costdown_existingpv li{
    list-style-type:none;
    float:left;
    width:400px;
    margin:10px;
    text-align:center;
}

article .costdown_existingpv li.first{
    width:840px;
}

article .costdown_existingpv li.detail{
    margin:60px 10px;
    padding:20px 10px;
    background:#f1e3e3;
    border-radius:10px;
    box-shadow:inset 3px 3px 1px rgba(0,0,0,0.1);
}

article .costdown_existingpv img{
    width:400px;
    border-radius:10px;
}

@media screen and (max-width:639px){
    article .costdown_existingpv{
        width:100%;
        margin:5vw auto 0 auto;
    }
    
    article .costdown_existingpv li{
        float:none;
        width:90vw;
        margin:3vw auto 0 auto;
    }
    
    article .costdown_existingpv li.first{
        width:100%;
    }
    
    article .costdown_existingpv li.detail{
        margin:3vw 1vw;
        padding:4vw 2vw;
        border-radius:3vw;
        box-shadow:inset 3px 3px 1px rgba(0,0,0,0.1);
    }
    
    article .costdown_existingpv img{
        width:100%;
        border-radius:3vw;
    }
}

/*----------------------------------------------------------------------------
注意書き
----------------------------------------------------------------------------*/
article .attention{
    font-size:16px;
    line-height:20px;
    margin:20px 0 20px 40px;
}

article .attention li::before{
    content:"※ ";
    margin-left:-20px;
}

article .attention li{
    margin-left:20px;
}

@media screen and (max-width:639px){
    article .attention{
        font-size:3vw;
        line-height:4vs;
        margin:4vw 0 4vw 3vw;
    }
    
    article .attention li::before{
        content:"※ ";
        margin-left:-4vw;
    }
    
    article .attention li{
        margin-left:3vw;
    }   
}


/*============================================================================
EOF
============================================================================*/