/*============================================================================
雑草対策によるコストシミュレーション
============================================================================*/
@charset "utf-8";

/*----------------------------------------------------------------------------
基本スタイル
----------------------------------------------------------------------------*/
article .base{
    margin:20px 5px 20px 5px;
}

article .base h3,
article .nextis h3{
    color:#ffffff;    
    background:#c5c5c5;
    margin:10px 0 10px 0;
    padding:10px 0;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:24px;
    line-height:24px;
    box-shadow:1px 1px 1px rgba(0,0,0,0.4);
}

article .base h3.top{
    margin:0 0 10px 0;
}

article .base .mowing h3{
    background:#bc3a3a;    
}

article .base .sheet h3{
    background:#2b7218;    
}

article .base .stone h3{
    background:#134b78;    
}

article .base input[type='text'],
article .base select,
article .nextis input[type='text'],
article .nextis select{
    background:#ffffff;
    border-radius:5px;
    box-shadow:inset 2px 2px 2px rgba(0,0,0,0.3);
    padding:3px 5px;
    width:70%;
}

article .base input[type='text']:disabled,
article .base select:disabled,
article .nextis input[type='text']:disabled,
article .nextis select:disabled{
    background:#d0d0d0;    
}

article .base select,
article .nextis select{
    /* position:relative; */
    width:60%;
}

/*
article .base select:after,
article .nextis select:after{
    position:absolute;
    content:'';
    right:5px;
    top:13px;
    width:0;
    border-left:solid 8px transparent;
    border-right:solid 8px transparent;
    border-top:solid 10px #ff0000;
}
*/

article .base button,
article .nextis button{ 
    padding:10px 0;
    width:90%;
    font-weight:bold;
    background:#e0e0e0;
    border-radius:30px;
    box-shadow:1px 1px 1px rgba(0,0,0,0.4);
}

article .base button:hover,
article .nextis button:hover{
    background:#7c7575;
    color:#ffffff;
}

article .base button:active,
article .nextis button:active{
    background:#4568d1;
}

article .base input[type='checkbox'],
article .nextis input[type='checkbox']{
    display:none;
}

article .base input[type='checkbox']+label,
article .nextis input[type='checkbox']+label{
    padding:0 10px 0 10px;
    margin-left:32px;
}

article .base input[type='checkbox']+label::before,
article .nextis input[type='checkbox']+label::before{
    margin-left:-40px;
    content:"□ ";
}

article .base input[type='checkbox']:checked+label::before,
article .nextis input[type='checkbox']:checked+label::before{
    margin-left:-40px;
    color:#636d23;
    content:"✓ ";
}

@media screen and (max-width:1000px){
    article .base{
        margin:6vw 0 3vw 0;
    }
    
    article .base h3,
    article .nextis h3{
        margin:2vw 0 1vw 0;
        padding:2vw 0;
        font-size:5vw;
        line-height:5vw;
        box-shadow:0.2vw 0.2vw 0.2vw rgba(0,0,0,0.4);
    }

    article .base h3.top{
        margin:0 0 1vw 0;
    }

    article .base input[type='text'],
    article .base select,
    article .nextis input[type='text'],
    article .nextis select{
        border-radius:1vw;
        box-shadow:inset 0.5vw 0.5vw 0.5vw rgba(0,0,0,0.3);
        padding:0.5vw 1vw;
        width:70%;
        font-size:6vw;
        line-height:6vw;
    }
    
    article .base button,
    article .nextis button{
        padding:2vw 0;
        border-radius:10vw;
        box-shadow:0.3vw 0.3vw 0.3vw rgba(0,0,0,0.4);
    }
}

/*----------------------------------------------------------------------------
対策別タブ
----------------------------------------------------------------------------*/
article .base ul.index li{
    list-style:none;
    float:left;
    padding:10px 30px;
    background:#afafaf;    
    color:#000000;
    cursor:pointer;
    margin-right:1px;
    border-radius:10px 10px 0 0;
    font-size:24px;
    line-height:24px;
}

article .base ul.index li.selected{
    background:#bc3a3a;    
    font-weight:bold;
}

article .base .index input[type='radio']{
    display:none;
}

/*
article .base ul.index li.selected.mowing{
    color:#bc3a3a;    
}

article .base ul.index li.selected.sheet{
    color:#2b7218;    
}

article .base ul.index li.selected.stone{
    color:#134b78;    
}
*/

article .base ul.index li.mowing,
article .base .body.mowing{
    background:#e6abab;    
}

article .base ul.index li.sheet,
article .base .body.sheet{
    background:#c8e3c1;    
}

article .base ul.index li.stone,
article .base .body.stone{
    background:#b8cee1;    
}

@media screen and (max-width:1000px){
    article .base ul.index li{
        width:calc(30vw - 0.2vw);
        height:10vw;
        text-align:center;
        font-size:3.2vw;
        line-height:3.2vw;
        padding:3.5vw 0;
        margin-right:0.2vw;
        border-radius:2vw 2vw 0 0;
    }
}

/*----------------------------------------------------------------------------
対策別ページ
----------------------------------------------------------------------------*/
article .base .body,
article .nextis .body{
    padding:20px;
    font-size:24px;
    line-height:24px;
}

article .base .body .calcurate{
    text-align:center;
    margin:30px 0 30px 0;
}

article .base .body .page{
    margin-top:20px;
}

article .base .body dl{
    width:100%;
}

article .base .body dt,
article .base .body dd{
    margin:10px 0;    
}

article .base .body dt{
    float:left;
    width:350px;    
}

article .base .body dd{
    margin-left:350px;
    width:calc(100% - 350px);
}

/* 結果表示 */
article .base .body .calc_frame,
article .nextis .body .calc_frame{
    margin-top:20px;
    background:#ffffff;
    min-height:200px;
    border-radius:5px;
    box-shadow:inset 2px 2px 2px rgba(0,0,0,0.3);
    padding:20px;
    font-size:24px;
    line-height:24px;
}

article .base .body .calc_process dl{
    width:100%;
    border-right:solid 1px #404040;
    border-bottom:solid 1px #404040;
}

article .base .body .calc_process dt,
article .base .body .calc_process dd{
    padding:10px 5px;
    margin:0;
    border-top:solid 1px #404040;
    border-left:solid 1px #404040;
}

article .base .body .calc_process dt{
    color:#000000;
    background:#a95f5f;
    float:left;
    width:40%;
}

article .base .mowing .calc_process dt{
    background:#e6abab;    
}

article .base .sheet .calc_process dt{
    background:#c8e3c1;    
}

article .base .stone .calc_process dt{
    background:#b8cee1;    
}

article .base .body .calc_process dd{
    margin-left:40%;       
    width:60%;   
}

article .base .body .calc_process dd.total{
    font-weight:bold;    
}

/*
article .base .body .calc_result{
    margin-top:15px;
    font-size:32px;
    line-height:32px;
}
*/

@media screen and (max-width:1000px){
    article .base .body{
        padding:2vw;
        font-size:5vw;
        line-height:7vw;
    }
    
    article .base .body .calcurate{
        margin:4vw 0 4vw 0;
    }
    
    article .base .body .page{
        margin-top:4vw;
    }
    
    article .base .body dl{
        width:100%;
    }
    
    article .base .body dt,
    article .base .body dd{
        padding:0.5vw 0;
        margin:0;    
    }
    
    article .base .body dt{
        float:none;
        width:100%;    
    
    }
    
    article .base .body dd{
        width:100%;    
        margin-left:0;
    }
    
    article .base .body .calc_frame{
        margin-top:4vw;
        padding:2vw;
        min-height:10vw;
        font-size:4vw;
        line-height:4vw;
        box-shadow:inset 0.5vw 0.5vw 0.5vw rgba(0,0,0,0.3);
        border-radius:0.5vw;
    }
    
    article .base .body .calc_process dt,
    article .base .body .calc_process dd{
        padding:3vw 1.5vw;
    }

    /*
    article .base .body .calc_result{
        margin-top:4vw;
        font-size:5vw;
        line-height:5vw;
    }
    */
}

/*----------------------------------------------------------------------------
ネクストでは
----------------------------------------------------------------------------*/
/* 下矢印 */
article .arrow_bottom{          /* 四角 */
    position:relative;
    margin:0 auto 70px auto;
    width:80px;
    height:30px;
    background:#ffd9b3;
}

article .arrow_bottom:before{   /* 下向き三角 */
    content:'';             
    position:absolute;
    left:-60px;
    top:30px;
    background:transparent;
    border-top:solid 50px #ffd9b3;
    border-left:solid 100px transparent;
    border-right:solid 100px transparent;
}

article .nextis{
    margin:40px 5px 40px 5px;
    background:#f1df9d;    
}

article .nextis h3{
    margin:0 0 10px 0;
    background:#053b8d;    
    font-size:32px;
    line-height:32px;
}

article .nextis .body .calc_frame{
    font-size:32px;
    line-height:48px;
}

@media screen and (max-width:1000px){
    article .nextis{
        margin:12vw 0 12vw 0;
    }
    
    article .nextis h3{
        margin:2vw 0 1vw 0;
        font-size:5vw;
        line-height:5vw;
    }
    
    article .nextis .body .calc_frame{
        font-size:5.5vw;
        line-height:7vw;
    }
}

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