@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/
#front img{
    width:100%;
}


/*------------------------------------------------------------
  mainWrapper
------------------------------------------------------------*/
#front .mainWrapper{
    width:98%;
    margin:0 auto;
}


/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    background: url(../img/index/mvImg.jpg) no-repeat;
    background-size: cover;
    position: relative;
    height: 50vw;
    min-height: 600px;
}
#front #mainView .mainTxt{
    position: absolute;
    bottom: 0;
    right: 0;
    background: #FFF;
    width: 500px;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    text-align:center;
}
#front #mainView .mainTxt h2{
    color: #b70000;
    font-size: 170%;
    font-weight: 700;
}
#front #mainView .mainTxt p{
    font-size: 140%;
    font-weight: 600;
    margin: 5px 0;
}

/*------------------------------------------------------------
  info
------------------------------------------------------------*/
#front #info{
    z-index: 1;
    position: relative;
}
#front #info .innerFlex{
    flex:3;
}
#front #info h2{
    background: #b70000;
    color: #FFF;
    flex: 2;
    margin: 0;
    text-align: center;
    padding: 9px 5px 0 5px;
    font-size:100%;
}
#front #info a.arrowLink{
    width: 50px;
    background: #cf1604;
    text-align: center;
    padding: 5px 10px 5px 5px;
}
#front #info a.arrowLink .arrow {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 14px;
  margin-top: 10px;
}
#front #info a.arrowLink .arrow::before,
#front #info a.arrowLink .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  background-color: #FFF;
  transform-origin: calc(100% - 1px) 50%;
}
#front #info a.arrowLink .arrow::before {
  transform: rotate(45deg);
}
#front #info a.arrowLink .arrow::after {
  transform: rotate(-45deg);
}
#front #info .rightWrapper{
    flex: 7;
}
#front #info .infoWrapper{
    margin: 0;
    align-items: baseline;
    gap: 1%;
    border: none;
    padding: 5px;
    padding: 0 5px 7px 5px;
    background: #FFF;
}
#front #info .infoWrapper time{
    font-weight: 600;
}
#front #info .infoWrapper .categoly a{
    font-weight: 600;
}
#front #info .infoWrapper h3{
    padding: 0;
}
#front #info .infoWrapper .error{
    padding: 8px 0 0px 20px;
    margin: 0;
}
#front #info .infoWrapper h3 a{
    font-weight: 600;
}


/*------------------------------------------------------------
  service
------------------------------------------------------------*/
#front #service{
    padding: 20rem 1rem 4rem 1rem;
    background: #f6f6f6;
    margin-top: -15rem;
}
#front #service .innerWrap{
    width: 80%;
    margin: 0 0 0 auto;
    position: relative;
}
#front #service .innerWrap .cmHdWrap{
    width: 260px;
    position: absolute;
    left: -109px;
    bottom: 0;
}
#front #service .innerWrap p{
    font-size: 95%;
    line-height: 200%;
    margin: 1.5rem 1.5rem  1.5rem auto;
    width: 80%;
}
#front #service ul{
    flex-wrap: wrap;
    margin: 0 0 0 auto;
    width: 87%;
    gap: 4%;
}
#front #service ul li{
    width: 30%;
    margin: 0 0 1rem 0;
}
#front #service ul li a{
    font-size: 95%;
    padding: 1rem 1rem 1rem 3rem;
    width: 100%;
    position: relative;
    font-weight: 600;
    background: #FFF;
    border-radius: 5px;
}
#front #service ul li a:before{
    content: "";
    background: url(../img/common/smallBoxArrow.png) no-repeat;
    background-size: cover;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
}

/*------------------------------------------------------------
  office
------------------------------------------------------------*/
#front #office{
    padding:0;
}
#front #office .hdWrap{
    position:relative;
    border-bottom: 15px solid #c40d02;
}
#front #office .hdWrap .cmHdWrap{
    width: 260px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -140px;
}
#front #office .innerBox{
    background: #e4e4e4;
    padding: 9rem 2rem;
}
#front #office .innerBox p{
    font-size: 90%;
    line-height: 200%;
    width: 80%;
    margin: 1rem auto 3rem auto;
}
#front #office .innerBox ul.menuFlex{
    flex-wrap: wrap;
    margin: 1rem auto;
    width: 95%;
    gap: 4%; 
    justify-content: center;
}
#front #office .innerBox ul.menuFlex li{
    width: 30%;
    margin: 0 0 1rem 0;
}
#front #office .innerBox ul.menuFlex li a{
    font-size: 95%;
    border-radius: 5px;
    padding: 1rem 1rem 1rem 3rem;
    width: 100%;
    position: relative;
    background: #FFF;
    font-weight: 600;
}
#front #office .innerBox ul.menuFlex li a:before{
    content: "";
    background: url(../img/common/boxArrow.png) no-repeat;
    background-size: cover;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;  
}
#front #office .mottoFlex{
    justify-content: center;
    gap: 3%;
    width: 50%;
    min-width: 650px;
    margin: 0 auto 4rem auto;
}

/*------------------------------------------------------------
  messege
------------------------------------------------------------*/
#front #messege{
    padding: 9rem 1rem 4rem 1rem;
    background: #f6f6f6;
}
#front #messege .innerWrap{
    background: #FFF;
    padding: 4rem 2rem;
    position: relative;
}
#front #messege .innerWrap:after{
    content: "";
    background: url(../img/index/Messege.png) no-repeat;
    background-size: contain;
    width: 300px;
    height: 280px;
    position: absolute;
    right: 0;
    top: -60px;
}
#front #messege .flex{
    gap: 7%;
}
#front #messege .imgWrap{
    flex: 1;
}
#front #messege .imgWrap p.place{
    text-align: center;
    margin-bottom: 0;
}
#front #messege .imgWrap p.name{
    text-align: center;
    margin: 0;
    font-weight: 600;
    font-size: 130%;
}
#front #messege .imgWrap p.name span{
    font-weight: 400;
    font-size: 70%;
    margin-right: 8px;
}
#front #messege .txtWarp{
    flex: 3;
}
#front #messege .txtWarp h3{
    font-weight: 600;
    font-size: 150%;
}
#front #messege .txtWarp p{
    margin: 3rem 0
}

@media (max-width: 1120px) {

    #front #office{
        padding:0;
    }

}


@media (max-width: 1099px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
}

@media (max-width: 990px) {
    #front #mainView .innerWrap{
        height: 63vw;
    }
    #front #mainView .floatBox{
        padding: 2rem;
        width: 60%;
    }
    #front #service .innerWrap p{
        width:70%;
    }
    #front #messege .innerWrap{
        width: 100%;
    }
    #front #messege .flex{
        display:block;
    }
    #front #messege .imgWrap{
        width: 30%;
        margin: 0 auto 2rem auto;
    }
    #front #messege .txtWarp h3{
        text-align:center;
    }
}

@media (max-width: 758px) {

    #front #mainView .floatBox{
        width: 90%;
    }
    #front #service .innerWrap{
        width: 100%;
    }
    #front #service .innerWrap .cmHdWrap{
        width: 200px;
        left: 0;
        right: 0;
        top: 100px;
        margin: auto;
    }
    #front #service ul{
        width:100%;
    }
    #front #service .innerWrap img.borderImg{
        border-bottom: 10px solid  #c30a05;
    }
    #front #service .innerWrap p{
        width: 90%;
        margin: 10rem auto 3rem auto;
    }
    #front #office .hdWrap .cmHdWrap{
        width: 200px;
    }
    #front #office .innerBox p{
        width: 100%;
    }
    #front #messege .flex{
        display:block;
    }
    #front #messege .txtWarp h3{
        text-align:center;
    }
    #front #office .mottoFlex{
        min-width: 100%;
        width:100%;
    }
    #front #office .innerBox ul.menuFlex li{
        width: 48%;
    }
    #front #messege .txtWarp h3{
        font-size: 130%;
        text-align: left;
    }

}

@media (max-width: 650px) {

    #front .mainWrapper{
        width:100%;
    }
    #front #mainView .innerWrap{
        height: 100vw;
    }
    #front #info{
        display: block;
    }
    #front #info a.arrowLink{
        display: inline-block;
    }
    #front #service .innerWrap p{
        margin: 12rem auto 3rem auto;
    }
    #front #service ul li{
        width: 47%;
    }
    #front #messege .imgWrap{
        width: 50%;
    }

}

@media (max-width: 501px) {

    #front #mainView{
        background-size: 250%;
        background-position: left 20% top;
    }
    #front #mainView .mainTxt{
        width: 100%;
        padding: 1.5rem;
    }
    #front #messege .innerWrap:after{
        width: 180px;
        height: 130px;
        top: -30px;
    }
    #front #messege .txtWarp h3{
        line-height: 160%;
    }

}

@media (max-width: 480px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView{
        min-height: 510px;
    }
    #front #service{
        padding: 16rem 0 4rem 0;
    }
    #front #service .innerWrap .cmHdWrap,
    #front #office .hdWrap .cmHdWrap{
        width: 150px;
    }
    #front #service .innerWrap .cmHdWrap{
        top: 95px;
    }
    #front #service .innerWrap p{
        margin: 10rem auto 3rem auto;
    }
    #front #service ul li a{
        font-size: 90%;
    }
    #front #service ul{
        width: 90%;
        display: block;
        margin: 0 auto;
    }
    #front #service ul li{
        width:100%;
    }
    #front #office .innerBox ul.menuFlex{
        display:block;
    }
    #front #office .innerBox ul.menuFlex li{
        width:100%;
    }
    #front #office .innerBox{
        padding: 9rem 2rem 3rem 2rem;
    }
    #front #messege{
        padding: 1rem 1rem 4rem 1rem;
    }
    #front #messege .imgWrap{
        width: 80%;
    }

}

@media (max-width: 380px) {

    #front #mainView .mainTxt{
        padding: 20px 10px;
    }
    #front #mainView .mainTxt h2{
        font-size: 140%;
    }
    #front #mainView .mainTxt p{
        font-size: 120%;
    }
    #front #service .innerWrap .cmHdWrap{
        top: 65px;
    }
    #front #messege .txtWarp p{
        font-size: 90%;
        line-height: 210%;
    }


}