@charset "utf-8";

/******************************************************


    Thin      font-weight:100;
    Light     font-weight:200;
    DemiLight font-weight:300;
    Regular   font-weight:400;
    Medium    font-weight:500;

    green #628b6b;


******************************************************/

article.wideContents{
    width: 100%;
    padding:0 50px;
    box-sizing: border-box;
    overflow: hidden;

    section{
        padding: 50px 0;
        min-width: 1000px;

        .inner{
            width: 1000px;
            overflow: hidden;
            margin: 0 auto;
        }

    }
    .bg{
        background: #fff;
    }

}

p.largeTxt{
    font-size: 50px;
    font-weight: 100;
    line-height: 65px;
    letter-spacing:-0.04em ;
}
.largeTxt.fz90{
    font-size: 45px;
}

p.largeTxt.vertical{
    writing-mode: tb-rl; /* IE独自仕様 */
    writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;

    b{
        display:inline-block;
        position:relative;
        width: 1em;
        height: 1em;
    }

    s{
        text-decoration: none;
        position: absolute;
        left: 0.5em;
        top: -0.5em;
        display: block;
        font-weight: 100;

    }
}

.vertical.winChrome{
    letter-spacing: -20px !important;
}


.cirlceBtns{
    float: right;
    width: 660px;

    li{
        float: left;
        display: table;
        position: relative;
        margin-left: 20px;
        margin-bottom: 20px;

        a{
            display:table-cell;
            vertical-align: middle;
            font-size: 2.1rem;
            font-weight: 300;
            text-align: center;
            color: #fff;
            width: 198px;
            height: 195px;
            position: relative;
            z-index: 10;
        }
        a:hover{
            color: #fff799;
        }
    }
    li img{
        width: 98%;
        height: 98%;
        position: absolute;
        left: 1%;
        top: 1%;
        transition: all 0.5s ease;
    }
    li:hover img {
    	animation: spin 5s linear infinite;
        width: 90%;
        height: 90%;
        left: 5%;
        top: 5%;
    }

    @keyframes spin {
    	0% {transform: rotate(0deg);}
    	100% {transform: rotate(360deg);}
    }

}

.drsBox{
    width: 100%;
    overflow: hidden;
    padding-top: 50px;

    div{
        float: left;
        width: 268px;
        text-align: center;

        p{
            padding-top: 10px;
            font-size: 2.1rem;
            line-height: 1.2;

            small{
                display: block;
                font-size: 1.5rem;
            }
        }

    }

.btn-double{
    margin-left: 350px;
    margin-top: 50px;
    }


    div + p{
        margin-left: 350px;
        line-height: 2;
        letter-spacing:-0.06em;
    }

}



h2{
    text-align: center;
    font-size: 6rem;
    color: #554023;
    font-weight: 200;
    line-height: 1;
    margin-bottom: 50px;

    span{
        display: inline-block;
        padding-bottom: 20px;
        border-bottom: #d03b3b solid 2px;

    }

}

h3{
    font-size: 4rem;
    text-align: center;
    font-weight: 200;
    margin-top: 50px;
    line-height: 1;
}

.fqList{
    width: 100%;
    margin-top: 50px;
    overflow: hidden;

    li{
        width: 240px;
        height: 190px;
        float: left;
        margin-right: 10px;

        a{
            display: block;
            height: 190px;
            background: #fff;
            text-align: center;
            position: relative;
            img{
                margin-top: 40px;
            }

            span{
                display: block;
                font-size: 1.8rem;
                letter-spacing: -0.06em;
                text-align: center;
                position: absolute;
                left: 0;
                top: 118px;
                width: 100%;
                line-height: 1.2;
            }
            i{
                display: block;
                font-size: 10px;
                text-align: center;
                position: absolute;
                left: 0;
                bottom:20px;
                width: 100%;
            }

        }
        a:hover{
            background: #fffff0;

            img{
                opacity: 1;
            }
        }
    }
    li:last-child{
        margin-right: 0;
    }
}



.pickupList{
    float: left;
    width: 755px;
    overflow: hidden;

    li{
        padding-bottom: 50px;
        width: 100%;
        overflow: hidden;
        img{
            float: left;
        }
        dl{
            margin-left: 230px;
        }
        dt{
            font-size: 2.5rem;
            font-weight: 300;
        }
        dd{
            padding-top: 10px;
            letter-spacing:-0.06em ;

            p{
                padding-bottom: 20px;
            }
            a{
                float: right;
            }
        }

    }


    li:nth-child(2){
        img{
            float: right;
        }
        dl{
            margin-left: 0;

            a{
                float: left;
            }
        }
    }

}



.topicsList{
    width: 100%;
    overflow: hidden;
    margin-top: 50px;
    li{
        float: left;
        width: 325px;
        position: relative;
        margin-right: 12px;

        a{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 10;
        }
        a:hover{
            background: rgba(255, 255, 255, 0.45);
        }
        p{
            width: 100%;
            height: 55px;
            background: #fff;
            text-align: center;
            line-height: 55px;
            font-size: 1.9rem;
            color: #d03b3b;
            position: relative;

            i{
                font-size: 14px;
                position: absolute;
                right: 0px;
                top: 50%;
                margin-top: -7px;
            }
        }
    }
    li:last-child{
        margin-right: 0;
    }
}

.featureList{
    width: 100%;
    overflow: hidden;
    margin-bottom: 50px;

    li{
        float: left;
        width: 242.5px;
        overflow: hidden;
        position: relative;
        margin-right: 10px;

        p{
            background: rgba(255, 255, 255, 0.9);
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 10px;
            width: 100%;
            box-sizing: border-box;
            font-size: 1.5rem;
            letter-spacing:-0.1em ;
            color: #d03b3b;
            font-weight: 400;
            text-align: center;
            min-height: 90px;
            z-index: 10;
        }
    }
    li:nth-child(1) p,
    li:nth-child(2) p{
        padding-top: 30px;
    }
    li:nth-child(3) p{
        line-height:1.5;
    }
    li:nth-child(4) p{
        line-height:1.5;
        padding-top: 20px;
    }
    li:last-child{
        margin-right: 0;
    }
}
.featureList + .center{
    padding-bottom: 50px;
    border-bottom: #333 dashed 1px;
}

.flowList{
    width: 100%;
    overflow: hidden;
    margin-top: 50px;
    li{
        float: left;
        width: 176px;
        margin-right: 20px;
        dt{
            white-space: nowrap;
            font-size: 2rem;
            color: #1e7032;
            font-weight: 400;

            em{
                display: inline-block;
                width: 26px;
                height: 26px;
                text-align: center;
                line-height: 26px;
                color: #fff799;
                font-weight: 400;
                background: #1e7032;
                border-radius: 50%;
                margin-right: 10px;
            }
        }
        dd{

            color: #1e7032;
        }

    }
    li:nth-child(4){
        width: 216px;
    }
    li:last-child{
        margin-right: 0;
    }
}


.bannersBox{
    margin-top: 50px;
    background: #fff;
    border: #f4f4f4 solid 10px;
    border-bottom: 0;

    .blogNews{
        border-bottom: #f4f4f4 solid 10px;
    }

    .blogNews > li{
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
        background: #fff;
        border-top: #f4f4f4 solid 10px;
        dl{
            display: table;

            dt{
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                width: 280px;
                font-size: 2.6rem;
                font-weight: 200;
                color: #548e62;
                line-height: 1.5;
                border-right: #548e62 dotted 1px;
                small{
                    display: block;
                    font-size: 1.3rem;
                }

            }
            dd{
                display: table-cell;
                padding-left: 60px;

                li{
                    width: 100%;
                    overflow: hidden;
                    padding:6px 0;
                    position: relative;
                    a{
                        time{
                            float: left;
                            font-weight: 500;
                        }
                        p{
                            margin-left: 100px;
                            color: #333;
                        }

                    }
                    a:hover{
                        text-decoration: underline;
                    }

                }
            }
        }
    }
    .blogNews > li:nth-child(2) dt,
    .blogNews > li:nth-child(2) time{
        color: #4f311f;
    }
    .blogNews > li:nth-child(3) dt,
    .blogNews > li:nth-child(3) time{
        color: #e5000b;
    }

    .bannersList{
        width: 100%;
        overflow: hidden;
        background: #f4f4f4;

        li:first-child{
            margin: 0;
        }
        li{
            float: left;
            display: block;
            margin: 0 0 10px 10px;
            background: #fff;
        }
    }


}

#home footer,
#home footer section{
    padding-top: 0;
}