/* 

タイトル

*/

.top-h2{
    position:relative;
    font-size:27px;
    font-weight:normal;
    padding-left:20px;
    padding-top:.5em;
    padding-bottom:.5em;
    margin-bottom:20px;
}

.top-h2::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:2px;
    height:50%;
    background-color:#0071c1;
}

.top-h2::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:2px;
    height:50%;
    background-color:#b0c7dd;
}

.top-h2 span{
    color:#355c8e;
    background:linear-gradient(transparent 60%, #fffeba 60%);
}

@media screen and (max-width:768px){
    .top-h2{
        font-size:20px;
    }
}


.top-h2-white{
    font-family: 'Noto Serif JP', serif;
    font-size:32px;
    color:#FFF;
    text-align:center;
    background-image:url(../images/title-border.png);
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:80% auto;
    padding-bottom:.5em;
    margin-bottom:30px;
}

@media screen and (max-width:768px){

    .top-h2-white{
        font-size:20px;
        background-size:95%;
    }

}

.top-h2-gray{
    position:relative;
    font-family: 'Noto Serif JP', serif;
    font-size:27px;
    color:#666666;
    text-align:center;
    margin-bottom:30px;
}

.top-h2-gray::after{
    content:"";
    display:block;
    width:80px;
    height:1px;
    background-color:#0071c1;
    border-right:80px solid #b0c7dd;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
}

.top-h3{
    position:relative;
    font-size:21px;
    padding:.5em .5rem .5rem 60px;
    margin-bottom:20px;
}

.top-h3__number{
    position:absolute;
    top:0;
    left:0;
    right:calc( 100% - 50px );
    bottom:0;
    display:flex;
    justify-content:center;
    align-items:center;
    width:50px;
    font-family: 'Noto Serif JP', serif;
    color:#FFF;
    text-align:center;
    border:1px solid #005796;
    border-right:none;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    background-color:#006ebe;
}

.top-h3__btn{
    display:inline-block;
    height:24px;
    line-height:24px;
    font-family: 'Noto Serif JP', serif;
    font-size:15px;
    color:#006ebe;
    border:1px solid #006ebe;
    border-radius:4px;
    padding:0 .75em;
}

@media screen and (max-width:768px){

    .top-h3{
        font-size:16px;
        margin-bottom:10px;
    }

    .top-h3__btn{
        font-size:13px;
    }

}


/* 

ボタン

*/

.top-btn{
    display:block;
    width:490px;
    height:65px;
    line-height:65px;
    font-size:18px;
    color:#FFF !important;
    text-align:center;
    border:1px solid #FFF;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
}

@media screen and (max-width:768px){
    .top-btn{
        width:100% !important;
    }
    
}



/* 

メインビジュアル

*/

.top-mv{
    padding:0;
    position: relative;
}

.top-mv__image--pc{
    display:block;
}

.top-mv__image--sp{
    display:none;
}

.top-catch{display: block;width: 100%;height: 8vw;position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.4);}
.top-catch div{display: block;width: 100%;text-align: center;color: #fff;font-weight: bold;line-height: 1;}
.top-catch .catch1{font-size: 2.6vw;}
.top-catch .catch1 span{color: #fffd9c;}
.top-catch .catch1 span strong{font-size: 3.9vw;}
.top-catch .catch2{font-size: 1.5vw;}
.top-catch .catch2 br{display: none;}

@media screen and (min-width:768px) and (max-width:1200px) {
    .top-catch{height: 100px;}
    .top-catch .catch1{font-size: 31px;}
    .top-catch .catch1 span strong{font-size: 47px;}
    .top-catch .catch2{font-size: 18px;}
}

@media screen and (max-width:768px){

    .top-mv__image--pc{
        display:none;
    }
    
    .top-mv__image--sp{
        display:block;
    }
    .top-catch{height: 100%;top: 0;background: unset;}
    .top-catch .catch1{height: 21vw;padding-top: 3vw;font-size: 6vw;background: rgba(0, 0, 0, 0.4);}
    .top-catch .catch1 span{color: #fff;}
    .top-catch .catch1 span strong{font-size: 10vw;}
    .top-catch .catch2{padding: 0 10px 10px;position: absolute;/*bottom: 0;*/bottom: 6vw;font-size: 2.8vw;line-height: 1.4;}
    .top-catch .catch2 br{display: block;}
}


/* 

官澤綜合法律事務所の交通事故事件にかける想い


*/

.top-msg{
    background-color:#d5dadf;
}

.top-msg__inner{
    display:flex;
    align-items:center;
}

.top-msg__image{
    flex:none;
    width:290px;
    margin-right:35px;
}

.top-msg__image--pc{
    display:block;
}

.top-msg__image--sp{
    display:none;
}

.top-msg__text{
    flex:1;
    display:flex;
    flex-direction:column;
}

.top-msg__text__title{
    font-family: 'Noto Serif JP', serif;
    font-size:28px;
    padding-left:1em;
    border-left:3px solid #074093;
    margin-bottom:1em;
}

.top-msg__text__content{
    font-size:15px;
    line-height:180%;
    margin-bottom:40px;
}

.top-msg__text__sign{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    font-family: 'Noto Serif JP', serif;
}

.top-msg__text__sign__company{
    font-size:15px;
    margin-right:.5em;
}

.top-msg__text__sign__name{
    font-size:24px;
    font-weight:bold;
}

@media screen and (max-width:768px){

    .top-msg__image--pc{
        display:none;
    }
    
    .top-msg__image--sp{
        flex:none;
        display:block;
    }

    .top-msg__text__title{
        font-size:20px;
    }

    .top-msg__text__content{
        order:2;
        font-size:13.5px;
        margin-bottom:0;
    }

    .top-msg__text__sign{
        order:1;
        display:block;
        text-align:center;
        margin-top:.5em;
        margin-bottom:.5em;
    }

    .top-msg__text__sign__company{
        font-size:11px;
    }

    .top-msg__text__sign__name{
        font-size:20px;
    }

}


/*

当事務所の交通事故問題解決事例

*/


.top-case{
    background-image:url(../images/top-case-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
}

.top-case-price{
    font-size:40px;
}

.top-case-price span{
    font-size:24px;
}

.top-case__list{
    display:flex;
    flex-wrap:wrap;
    margin-left:-20px;
    margin-bottom:-40px;
}

.top-case__item{
    flex:none;
    width:50%;
    padding-left:20px;
    margin-bottom:40px;
}
.top-case__item li{height: 100%;}

.top-case__item__card{
    display:flex;
    font-weight:bold;
    height: 100%;
}

.top-case__item__card__left{
    position:relative;
    flex:none;
    width:53%;
    background-color:#FFF;
    padding:20px 10px;
}

.top-case__item__card__left::after{
    content:"";
    position:absolute;
    top:calc( 50% - 17.5px );
    right:-20px;
    display:block;
    border-top:17.5px solid transparent;
    border-bottom:17.5px solid transparent;
    border-left:20px solid #FFF;
}

.top-case__item__card__left .top-case-price{
    color:#4ea87a;
    line-height:1;
}

.top-case__item__card__left__item{
    display:flex;
    margin-bottom:8px;
}

.top-case__item__card__left__key{
    flex:none;
    width:42px;
    height:22px;
    line-height:22px;
    font-size:14px;
    color:#4ea87a;
    text-align:center;
    border-radius:3px;
    border:1px solid #4ea87a;
    margin-right:10px;
}

.top-case__item__card__left__value{
    font-size:16px;
}

.top-case__item__card__left__number{
    align-self:flex-end;
    font-size:16px;
    color:#4ea87a;
    margin-right:10px;
}

.top-case__item__card__right{
    flex:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:47%;
    background: -moz-linear-gradient(left, #338c5b, #4ea87a);
    background: -webkit-linear-gradient(left, #338c5b, #4ea87a);
    background: linear-gradient(to right, #338c5b, #4ea87a);
}

.top-case__item__card__right__number{
    width:120px;
    height:30px;
    font-size:18px;
    color:#FFF;
    text-align:center;
    border-radius:3px;
    border:1px solid #FFF;
}

.top-case__item__card__right .top-case-price{
    color:#fffe9d;
}

.top-case__btn{
    background-color:#408a75;
    text-shadow:1px 1px 2px #22493d;
}

@media screen and (max-width:768px){

    .top-case-price{
        font-size:32px;
    }

    .top-case__list{
        display:block;
        margin-left:auto;
        margin-bottom:10px;
    }

    .top-case__item{
        display:block;
        width:100%;
        padding-left:0;
        margin-bottom:10px;
    }

    .top-case__item__card__left__item--price{
        flex-direction:column;
        margin-top:16px;
    }
    
    .top-case__item__card__left,
    .top-case__item__card__right{
        width:50%;
    }

    .top-case__item__card__left__key,
    .top-case__item__card__left__value{
        font-size:12px;
    }

    .top-case__item__card__left__number{
        font-size:13px;
        align-self:flex-start;
    }

}


/* 

２カラム

*/

.top-2-col{
    display:flex;
    margin-top:40px;
    margin-bottom:40px;
}

.top-2-col__main{
    flex:1;

}

.top-2-col__aside{
    flex:none;
    width:280px;
    margin-left:30px;
}

.top-2-col section{
    padding:0;
}

@media screen and (max-width:768px){

    .top-2-col{
        display:block;
        margin-top:20px;
        margin-bottom:20px;
    }
    
    .top-2-col__aside{
        width:auto;
        margin-left:0;
    }
    
}


/* 

交通事故無料相談会

*/

.top-seminar{
    margin-bottom:20px;
}

.top-seminar__image--pc{
    display:block;
}

.top-seminar__image--sp{
    display:none;
}

@media screen and (max-width:768px){

    .top-seminar__image--pc{
        display:none;
    }
    
    .top-seminar__image--sp{
        display:block;
    }
    
}


/* 

交通事故問題解決の３つのポイント

*/

.top-point{
    margin-bottom:20px;
}

.top-point__item{
    background-image:url(../images/top-point-bg.png);
    background-repeat:no-repeat;
    background-size:90px auto;
    background-position:bottom right;

}

.top-point__item__text{
    position:relative;
    font-size:14px;
    border:1px solid #c7c7c7;
    border-radius:5px;
    background-color:#fffff6;
    padding:1em;
    margin-right:100px;
    margin-bottom:20px;
}

.top-point .top-point__item:last-of-type .top-point__item__text{
    margin-bottom:0;
}

.top-point__item__text::after{
    content:"";
    position:absolute;
    right:-10px;
    bottom:30px;
    display:block;
    border-left:10px solid #c7c7c7;
    border-bottom:10px solid transparent;
}

@media screen and (max-width:768px){

    .top-point__item__text{
        font-size:13px;
    }

    .top-point__item{
        background-size:40px auto;
    }

    .top-point__item__text{
        margin-right:50px;
    }

}


/* 

交通事故を弁護士に相談するタイミング

*/

.top-timing{
    margin-bottom:20px;
}

.top-timing__image--pc{
    display:block;
}

.top-timing__image--sp{
    display:none;
}

@media screen and (max-width:768px){

    .top-timing__image--pc{
        display:none;
    }
    
    .top-timing__image--sp{
        display:block;
    }

}


/* 

当事務所が交通事故に強い理由

*/

.top-reason{
    margin-bottom:20px;
}

.top-reason .top-h3__btn{
    position:absolute;
    right:10px;
    top:calc( 50% - 12px );
}

.top-reason a:last-of-type .top-h3{
    margin-bottom:0;
}

@media screen and (max-width:768px){

    .top-reason .top-h3{
        padding-bottom:35px;
    }

    .top-reason .top-h3__btn{
        top:calc( 100% - 30px );
    }

}


/* 

交通事故に遭ったらすべきこと・状況別解説

*/

.top-todo{
    padding:0;
}

.top-todo__list{
    display:flex;
    margin-left:-17px;
}

.top-todo__item{
    flex:none;
    width:160px;
    margin-left:17px;
}

.top-todo__item__card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:30px 15px 20px;
}

.top-todo__item__card__image{
    width:auto;
    height:80px;
    margin-bottom:30px;
}

.top-todo__item__card__title{
    font-family: 'Noto Serif JP', serif;
    font-size:16px;
    margin-bottom:10px;
}

.top-todo__item__card__btn{
    flex:none;
    width:100%;
    display:block;
    font-size:14px;
    color:#FFF;
    background-color:#074193;
    border-radius:4px;
    padding-top:.25em;
    padding-bottom:.25em;
}


@media screen and (max-width:768px){

    .top-todo{
        margin-bottom:20px;
    }

    .top-todo__list{
        flex-wrap:wrap;
        margin-left:-10px;
        margin-bottom:-10px;
    }

    .top-todo__item{
        width:calc( 50% - 10px );
        margin-left:10px;
        margin-bottom:10px;
    }
    
    .top-todo__item__card__title{
        font-size:14px;
    }

    .top-todo__item__card__btn{
        font-size:13px;
    }

}


/* 

交通事故発生から問題解決までの流れ

*/

.top-flow{
    background-image:url(../images/top-flow-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
}

.top-flow__image--pc{
    display:block;
}

.top-flow__image--sp{
    display:none;
}

.top-flow .top-h2-white{
    margin-bottom:20px;
}

.top-flow_subtitle{
    font-size:18px;
    color:#FFF;
    text-align:center;
    margin-bottom:20px;
}

.top-flow__btn{
    background-color:rgba(255,255,255,.1);
}

@media screen and (max-width:768px){

    .top-flow_subtitle{
        font-size:12px;
    }

    .top-flow__image-wrap{
        display:block;
        background-color:#f5f7f9;
        padding:20px;
        margin-left:-20px;
        margin-right:-20px;
    }

    .top-flow__image--pc{
        display:none;
    }
    
    .top-flow__image--sp{
        display:block;
    }

}


/* 

記事一覧

*/

.top-post{
    display:flex;
    font-size:13px;
    margin-bottom:10px;
}

.top-post__title{
    font-weight:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.top-post__slash{
    margin-left:5px;
    margin-right:5px;
}

.top-post__time{
    color:#349363;
}

@media screen and (max-width:768px){

    .top-post{
        flex-wrap:wrap;
    }

    .top-post__slash{
        display:none;
    }

    .top-post__title{
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        text-overflow:clip;
        white-space:normal;
        overflow: hidden;
        order:2;
    }

    .top-post__time{
        width:100%;
        order:1;
    }

}


/* 

新着情報

*/

.top-news{
    background-color:#f7f7f7;
}


/* 

交通事故コラム

*/

.top-column__list{
    display:flex;
    flex-wrap:wrap;
    color:#349363;
    margin-bottom:30px;
}

.top-column__list a:hover{
    text-decoration:underline;
}

.top-column__item{
    margin-right:1em;
    margin-bottom:.25em;
}



.top-flow__image-wrap{position: relative;}
.top-flow__image-wrap .top-flow-link1,
.top-flow__image-wrap .top-flow-link2{display: block;text-indent:100%;white-space:nowrap;overflow:hidden;position: absolute;}
.top-flow__image-wrap .top-flow-link1:hover,
.top-flow__image-wrap .top-flow-link2:hover{background: rgba(255, 255, 255, 0.5);}
.top-flow__image-wrap .top-flow-link1{display: block;width: 187px;height: 314px;top: 4px;left: 96px;}
.top-flow__image-wrap .top-flow-link2{display: block;width: 187px;height: 314px;top: 4px;left: 400px;}
@media screen and (max-width:768px){
    .top-flow__image-wrap .top-flow-link1{width: 90%;height: 54vw;top: 21vw;left: 5vw;}
    .top-flow__image-wrap .top-flow-link2{width: 90%;height: 57vw;top: 133vw;left: 5vw;}
}