@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------*/
#front .cmHd{
    position:relative;
    font-family: 'Noto Serif JP',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align:center;
    font-size: 200%;
    font-weight: 500;
    line-height: 110%;
    margin: 3rem 0 4rem 0;
}
#front .cmHd:before{
    content: "";
    background: #000;
    width: 90px;
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    margin: auto;
}
#front .cmHd span{
    display:block;
    font-size: 60%;
}
#front .deco{
    text-align:center;
    font-weight: 500;
}

/*------------------------------------------------------------
  mainView
------------------------------------------------------------*/
#front #mainView{
    margin-top: 161px;
}
#front #mainView .innerWrap{
    background: url(../img/index/mvBg.jpg) no-repeat #f3f3f5;
    background-size: contain;
}
#front #mainView .ap{
    color: #FFF;
    background: #a00000;
    text-align: center;
    font-size: 150%;
    font-weight: 600;
    padding: 20px;
    margin: 0;
}
#front #mainView .txtWrap{
    width: 60%;
    margin: 0 0 0 auto;
    padding: 4rem 1rem;
    background: url(../img/index/mvRound.png) no-repeat;
    background-size: 140%;
    background-position: left -5vw top -26vw;
}
#front #mainView .txtWrap h2{
    text-align: center;
    font-size: 260%;
    font-weight: 600;
    color: #32405b;
}
#front #mainView .txtWrap h2 span.red{
    color: #a00000;
    font-size: 130%;
}
#front #mainView .txtWrap .pr{
    text-align: center;
    box-shadow: 0 0 10px #7775862e;
    border-radius: 80px;
    width: 80%;
    margin: 1rem auto;
    font-weight: 600;
    font-size: 130%;
    padding: 10px;
}
#front #mainView .txtWrap .pointFlex{
    justify-content: center;
    gap: 1%;
}
#front #mainView .txtWrap .pointFlex li{
    width: 20%;
}
#front #mainView .txtWrap .deco{
    text-align: center;
    font-size: 150%;
    font-weight: 600;
    line-height: 140%;
}
#front #mainView .txtWrap .deco span{
    color: #a00000;  
}
#front #mainView .spOnly{
    display:none;
}

/*------------------------------------------------------------
  emergency
------------------------------------------------------------*/
#front #emergency{
    padding:4rem 1rem;
    background: url(../img/common/whiteBg.jpg) no-repeat;
    background-size: cover;
    background-position:bottom;
}
#front #emergency h2{
    text-align: center;
    font-size: 240%;
    font-weight: 700;
}
#front #emergency h2 span{
    color: #a00000;
}
#front #emergency .menuFlex{
    gap:2%;
    flex-wrap:wrap;
    margin: 3rem 0;
}
#front #emergency .menuFlex li{
    width:32%;
    margin-bottom: 2rem;
}
#front #emergency .menuFlex li .imgWrap{
    position:relative;
}
#front #emergency .menuFlex li .imgWrap img{
    border-radius: 5px;
}
#front #emergency .menuFlex li .imgWrap i{
    font-style: normal;
    text-align: center;
    padding: 4px;
    display: block;
    background: #8f0002;
    color: #FFF;
    font-weight: 500;
    border-radius: 80px;
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    margin: auto;
    width: 95%;
}
#front #emergency .menuFlex li .txtWrap h3{
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid;
    margin: 5px 0;
}
#front #emergency .menuFlex li .txtWrap p{
    font-size: 90%;
    margin: 1rem 0;
}
#front #emergency .menuFlex li .txtWrap a{
    text-align: center;
    display: block;
    font-weight: 600;
    border-radius: 80px;
    border: 2px solid #32405b;
    background: #FFF;
    margin: 5px 0;
}


/*------------------------------------------------------------
  message
------------------------------------------------------------*/
#front #message{

}
#front #message h2{
    color:#FFF;
    margin-bottom: 5rem;
}
#front #message h2:before{
    background:#FFF;
}
#front #message .upper{
    padding:1rem 1rem 0 1rem;
    background: url(../img/common/blueBg.jpg) no-repeat;
    background-size: cover;
    background-position:bottom;
}
#front #message .upper .innerWrap{
    background: #FFF;
    padding: 4rem;
    position:relative;
    z-index:1;
}
#front #message .upper .msgFlex{
    gap:3%;
}
#front #message .upper .msgFlex .leftWrap{
    flex: 3;
}
#front #message .upper .msgFlex .leftWrap h3{
    font-family: 'Noto Serif JP', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    font-size: 160%;
    font-weight: 600;
    border-bottom: 1px solid;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
#front #message .upper .msgFlex .leftWrap p{
    font-family: 'Noto Serif JP',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin:1rem 0;
    font-weight: 500;
    line-height: 230%;
}
#front #message .upper .msgFlex .leftWrap span{
    color: #a00000;
}
#front #message .upper .msgFlex .rightWrap{
    flex: 1;
}
#front #message .upper .msgFlex .rightWrap .name{
    font-family: 'Noto Serif JP',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align:center;
    font-size: 150%;
    line-height: 120%;
}
#front #message .upper .msgFlex .rightWrap .name span{
    display:block;
    font-size: 60%;
}
#front #message .upper .infoBox{
    background: #32405b;
    padding: 4px;
}
#front #message .upper .infoBox .innerBox{
    border: 1px solid #FFF;
    padding: 1.5rem;
}
#front #message .upper .infoBox .innerBox h4{
    text-align: center;
    color: #FFF;
    font-size: 160%;
    border-bottom: 1px solid;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
#front #message .upper .infoBox .innerBox h4 i{
    color: #32405b;
    font-style: normal;
    font-weight: 600;
    background: #FFF;
    padding: 0px 10px;
    margin-right: 10px;
    font-size: 90%;
}
#front #message .upper .infoBox .innerBox .innerFlex{
    margin: 1rem 0;
}
#front #message .upper .infoBox .innerBox .innerFlex .leftBox{
    flex: 2;
}
#front #message .upper .infoBox .innerBox .innerFlex .leftBox .txt{
    color: #FFF;
    font-size: 110%;
    margin: 0;
}
#front #message .upper .infoBox .innerBox .innerFlex .rightBox{
    flex: 1.5;
    background: #777586;
    padding: 10px;
}
#front #message .upper .infoBox .innerBox .innerFlex .rightBox .num{
    margin: 0;
    color: #FFF;
    font-size: 200%;
    text-align: center;
    line-height: 100%;
}
#front #message .upper .infoBox .innerBox .innerFlex .rightBox .num span{
    font-size: 50%;
}
#front #message .upper .infoBox .innerBox .innerFlex .rightBox .time{
    margin: 0;
    text-align: center;
    color: #FFF;
    font-size: 93%;
    line-height: 100%;
}
#front #message .bottom{
    padding: 7rem 1rem 3rem 1rem;
    margin-top: -5rem;
    background: url(../img/common/indBg.jpg) no-repeat;
    background-size: cover;
    position: relative;
    z-index: 0;
}
#front #message .bottom .leftWrap{
    flex:2;
}
#front #message .bottom .leftWrap h3{
    color: #FFF;
    font-size: 190%;
    font-weight: 600;
    margin: 0;
}
#front #message .bottom .leftWrap p{
    color: #FFF;
    margin: 0;
    font-weight: 600;
    font-size: 110%;
}
#front #message .bottom .rightWrap{
    flex:1.5;
    background: #FFF;
    padding: 10px;
}
#front #message .bottom .rightWrap .num{
    margin: 0;
    font-size: 300%;
    text-align: center;
    line-height: 100%;
    padding-top: 6px;
}
#front #message .bottom .rightWrap .num span{
    font-size: 50%;   
}
#front #message .bottom .rightWrap .time{
    margin: 0;
    text-align: center;
    font-size: 93%;
    line-height: 100%;  
}

/*------------------------------------------------------------
  service
------------------------------------------------------------*/
#front #service{
    padding:4rem 1rem;
    background: url(../img/common/whiteBg.jpg) no-repeat;
    background-size: cover;
    background-position:bottom;
}
#front #service .menuFlex{
    gap: 2%;
    flex-wrap: wrap;
    margin: 3rem 0;
}
#front #service .menuFlex li{
    width: 32%;
    margin-bottom: 2rem;
    box-shadow: 0 0 10px #77758652;
    padding: 1.5rem;
    border-radius: 5px; 
    background: #FFF;
}
#front #service .menuFlex li i{
    font-style: normal;
    text-align: center;
    padding: 4px;
    display: block;
    background: #777586;
    color: #FFF;
    font-weight: 500;
    border-radius: 80px; 
}
#front #service .menuFlex li h3{
    text-align: center;
    font-weight: 600;
    margin: 1rem 0;  
}
#front #service .menuFlex li p{
    margin: 1rem 0;
    font-size: 86%;
}
#front #service .menuFlex li a{
    text-align: center;
    display: block;
    font-weight: 600;
    border-radius: 80px;
    border: 2px solid #32405b;
    background: #FFF;
    margin: 5px 0;
}

/*------------------------------------------------------------
  flow
------------------------------------------------------------*/
#front #flow{
    padding:4rem 1rem;
}
#front #flow .flowFlex{
    gap: 3%;
    margin: 8rem 0 4rem 0;
}
#front #flow .flowFlex .flowBox{
    position:relative;
    flex: 1;
}
#front #flow .flowFlex .flowBox .inBox{
    border: 1px solid #32405b;
    padding: 1rem 1rem 2rem 1rem;
    height: 90%;
}
#front #flow .flowFlex .flowBox img{
    width: 100px;
    position: absolute;
    top: -67px;
    left: 0;
    right: 0;
    margin: auto;
}
#front #flow .flowFlex .flowBox h3{
    background: #32405b;
    color: #FFF;
    padding: 20px 5px 5px 5px;
    text-align: center;
    font-family: 'Noto Serif JP', "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 180%; 
}
#front #flow .flowFlex .flowBox .time{
    text-align: center;
    background: #777586;
    color: #FFF;
    font-size: 120%;
    border-radius: 80px;
    padding: 2px;
    margin: 0;
}
#front #flow .flowFlex .flowBox .txt{
    
}
#front #flow .flowFlex .flowBox .title{
    text-align: center;
    color: #777586;
    border-bottom: 80px;
    border: 2px solid;
    border-radius: 80px;
    font-weight: 700;
    margin-bottom: 5px;
}
#front #flow .flowFlex .flowBox ul li{
    color: #32405b;
    font-size: 120%;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    font-weight: 600;  
}
#front #flow .flowFlex .flowBox.red h3{
    background: #a00000
}
#front #flow .flowFlex .flowBox.red .inBox{
    border: 1px solid #a00000;
}
#front #flow .flowFlex .flowBox.red .title{
    color:#a00000;
}
#front #flow .flowFlex .flowBox.red .time{
    background: #a00000;   
}
#front #flow .flowFlex .flowBox.red ul li{
    color:#a00000;
}
#front #flow .pointBox{
    box-shadow: 0 0 10px #77758657;
    margin: 3rem 0;
    padding: 2rem;
    text-align: center;
}
#front #flow .pointBox h3{
    background: #32405b;
    color: #FFF;
    padding: 5px;
    border-radius: 80px;
    font-size: 140%;
    font-weight: 600;
}
#front #flow .pointBox p{
    font-size: 140%;
    font-weight: 600;
    margin: 10px 0;
}
#front #flow .pointBox p span{
    color: #a00000;
    display:block;
}

/*------------------------------------------------------------
  point
------------------------------------------------------------*/
#front #point{
    padding:4rem 1rem;
    background:#edeff2;
}
#front #point .pointBox{
    gap: 3%;
    background: #FFF;
    border: 1px solid #32405b;
    padding: 3px;
    margin-bottom: 1rem;
}
#front #point .pointBox .leftWrap{
    flex:1;
}
#front #point .pointBox .rightWrap{
    flex:3;
}
#front #point .pointBox h3{
    font-size: 160%;
    font-weight: 600;
    margin: 1rem 0;
}
#front #point .pointBox p{
    margin: 1rem 0;
}

/*------------------------------------------------------------
  solveCase
------------------------------------------------------------*/
#front #solveCase{
    padding:4rem 1rem;
    background: url(../img/common/whiteBg.jpg) no-repeat;
    background-size: cover;
    background-position:bottom;
}
#front #solveCase h2{
    background:none;
    color:#333;
}

/*------------------------------------------------------------
  qa
------------------------------------------------------------*/
#front #qa{
    padding:4rem 1rem 7rem 1rem;
}
#front #qa .deco{
    margin-bottom: 4rem;
}
#front #qa .qaContent dl dt{
    background: #edeff2;
    border: none;
    font-family: 'Noto Serif JP',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#front #qa .qaContent dl dd{
    padding: 0;
    font-family: 'Noto Serif JP',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#front #qa .qaContent dl dd::before{
    display:none;
}

/*------------------------------------------------------------
  fee
------------------------------------------------------------*/
#front #fee{
    padding:4rem 1rem;
    background:#edeff2
}
#front #fee ul{
    justify-content:center;
    margin-top:4rem;
    gap: 3%;
}
#front #fee ul li{
    flex: 1;
    background: #FFF;
    text-align: center;
    padding: 1rem;
    box-shadow: 0 0 10px #7775862e;
    border-radius: 5px;
}
#front #fee ul li .label{
    margin: 1rem 0 0 0;
    font-weight: bold;
}
#front #fee ul li .title{
    margin: 0;
    font-size: 220%;
    color: #a00000;
    font-weight: 600;
}
#front #fee ul li .title span{
    font-size: 70%;  
}
#front #fee ul li .txt{
    margin: 0 0 1rem 0;
}

@media (max-width: 1581px) {

    #front #mainView .txtWrap{
        width: 70%;
    }
    #front #mainView .innerWrap{
        background: url(../img/index/mvBg.jpg) no-repeat #f3f3f5;
        background-size: cover;
        background-position: left -25vw top;
    }
}

@media (max-width: 1099px) {
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView .txtWrap h2{
        font-size: 200%;
    }

}

@media (max-width: 850px) {

    #front #mainView{
        margin-top: 86px;
    }
    #front #mainView .innerWrap{
        background-position: left -39vw top;
    }
    #front #mainView .ap{
        font-size: 120%;
    }
    #front #mainView .txtWrap{
        width:60%;
        background-size: 210%;
        background-position: left -8vw top -26vw;
    }
    #front #mainView .txtWrap span.break{
        display:block;
    }
    #front #mainView .txtWrap .deco{
        font-size: 120%;
    }
    #front #mainView .txtWrap .pr{
        line-height: 120%;
    }
    #front #emergency .menuFlex li{
        width: 49%;
    }
    #front #emergency h2{
        font-size: 160%;
    }
    #front #emergency .menuFlex li .imgWrap i{
        padding: 0px;
        font-size: 12px;
    }
    #front #message .upper .msgFlex{
        display:block;
    }
    #front #message .upper .msgFlex .rightWrap{
        width: 60%;
        margin: 2rem auto;
    }
    #front #message .upper .infoBox .innerBox h4 i{
        margin-bottom: 6px;
    }
    #front #message .upper .infoBox .innerBox h4 i,
    #front #message .upper .infoBox .innerBox .innerFlex{
        display:block;
        text-align: center;
    }
    #front #message .upper .infoBox .innerBox .innerFlex .leftBox{
        margin: 10px 0;
    }
    #front #message .bottom .flex{
        display:block;
    }
    #front #message .bottom .leftWrap{
        text-align: center;
        margin-bottom: 1rem;
    }
    #front #service .menuFlex li{
        width:49%;
    }
    #front #flow .flowFlex{
        flex-wrap:wrap;
    }
    #front #flow .flowFlex .flowBox{
        width: 48%;
        flex: inherit;
        margin-bottom: 4rem;
    }
    #front #flow .pointBox p span.break{
        display:block;
    }
    #front #point .pointBox{
        display:block;
        padding: 1rem;
    }
    #front #fee ul{
        display:block;
    }
    #front #fee ul li{
        margin-bottom:1rem;
    }
}

@media (max-width: 700px) {

    #front #mainView .spOnly{
        display:block;
    }
    #front #mainView .spOnly img{
        width:100%;
    }
    #front #mainView .pcOnly{
        display:none;
    }
}

@media (max-width: 600px) {
    #front .cmHd{
        margin: 0rem 0 4rem 0;
    }
    #front .cmHd span{
        font-size:40%;
    }
    #front .underlayerWrapper.double{
        padding: 10px;
    }
    #front #mainView .ap{
        font-size:100%;
        padding: 10px;
    }
    #front #emergency{
        padding: 2rem 1rem;
    }
    #front #emergency .menuFlex{
        margin: 3rem 0 0 0;
    }
    #front #emergency .menuFlex li{
        width:100%;
    }
    #front #emergency .menuFlex li .txtWrap p{
        margin: 5px 0 10px 0;
    }
    #front #message .upper .innerWrap{
        padding: 2rem;
    }
    #front #message .upper .infoBox .innerBox h4{
        font-size: 130%;
    }
    #front #message .upper .infoBox .innerBox .innerFlex .leftBox .txt{
        font-size: 100%;
        text-align: left;
    }
    #front #message .bottom .leftWrap h3{
        font-size: 180%;
        margin: 0 0 1rem 0;
    }
    #front #message .bottom .leftWrap p{
        text-align:left;
    }
    #front #service{
        padding: 2rem 1rem;
    }
    #front #service .menuFlex li{
        width: 100%;
    }
    #front #flow .pointBox p{
        font-size: 174%;
    }
    #front #point h2 .break{
        display:block;
    }

}


@media (max-width: 400px) {

    #front .cmHd{
        font-size: 170%;
    }
    #front #emergency{
        padding: 2rem 1rem;
    }
    #front #emergency h2 span{
        display:block;
    }
    #front #emergency .menuFlex{
        margin: 2rem 0;
    }
    #front #message .upper{
        padding: 3rem 1rem 0 1rem;
    }
    #front #message .upper .innerWrap{
        padding: 2rem 1rem;
    }
    #front #message .upper .infoBox .innerBox .innerFlex .rightBox .num{
        font-size: 180%;
    }
    #front #message .upper .infoBox .innerBox .innerFlex .rightBox .time{
        font-size: 90%;
    }
    #front #flow{
        padding: 4rem 0;
    }
    #front #flow .flowFlex{
        margin: 5rem 0 4rem 0;
    }
    #front #flow .flowFlex .flowBox .time{
        font-size: 100%;
    }
    #front #solveCase{
        padding: 1rem 1rem;
    }

}