@charset "UTF-8";
.l-main-legacy {
/* body { リニューアル作業 */
    background: #fff;
    color: #000;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 13px;
    position: relative;
}

.l-main-legacy {
/* body#top { リニューアル作業 */
    overflow: visible!important;
}

.l-main.var-02 .l-main__pagetitleMainHdgTxt {
  font-size: 15.5px;
  font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-weight: 700;
}
.l-main.var-02 .l-main__pagetitleSubTxt {
  line-height: 1.6;
}
@media screen and (min-width: 751px) {
  .l-main.var-02 .l-main__pagetitleMainHdgTxt {
    font-size: 30px;
  }
}

#mainArea p {
    /* margin: 0; リニューアル作業 */
}

section {
    width: 100%;
}

.l-main-legacy img[src$=".svg"] {
/* img[src$=".svg"] { リニューアル作業 */
    width: 100%;
}

.wrap {
    position: relative;
    width: 960px;
    height: 100%;
    margin: 0 auto;
}
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}

@media screen and (max-width:750px){
    .wrap {
        max-width: 100%;
    }
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }

}

/* ------------------------------------------
        topic path
   ------------------------------------------ */
#topicPath_wrap {
    border-bottom: #eaeaea 10px solid;
    background: url(https://d18f657670wm8u.cloudfront.net/otona/legacy/car_common/images/bg_contents.gif?20210517) left top repeat-x;
    line-height: 1.5;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #313333;
    width: 100%;
}
#area-topicPath {
    margin: 0 auto;
    text-align: left;
    width: 960px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* #area-topicPath .topicPath {
    position: absolute;
} */
#area-topicPath div.topicPath p {
    margin-bottom: 0;
    padding-top: 10px;
    font-size: 85%;
    flex-shrink: 0;
}
#area-topicPath h1 {
    margin-bottom: 5px;
    padding-top: 10px;
    font-size: 85%;
    font-weight: normal;
    text-align: right;
    flex-shrink: 0;
}

@media screen and (max-width:750px){
    #topicPath_wrap {
        display: none;
    }
}

/* ------------------------------------------
        パンくずリスト
   ------------------------------------------ */
#mainArea {
    width: 100%;
    margin: 0 auto;
}
.bc {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}
.bc * {
    box-sizing: border-box;
}
.bc .wrap * {
    display: inline-flex;
    align-items: baseline;
    font-size: 100%;
}
.bc .wrap p {
    line-height: 15px;
    margin: 0;
}
.bc .wrap p:first-of-type:before {
    content: "";
    background: url(https://d18f657670wm8u.cloudfront.net/otona/compensate/advice/img/pc/common/bc_icon_home.png?20250815) no-repeat center center;
    width: 15px;
    height: 14px;
    margin: 0 5px 0 0;
    display: block;
}
.bc .wrap p:not(:first-of-type):before {
    content: "";
    background: url(https://d18f657670wm8u.cloudfront.net/otona/compensate/advice/img/pc/common/bc_icon_arrow.png?20250815) no-repeat center center;
    width: 7px;
    height: 11px;
    margin: 0 8px 0 6px;
    display: block;
}
.bc .wrap p a {
    color: #000;
    text-decoration: none;
}
.bc .wrap p a:hover {
    text-decoration: none;
}
#topicPath_btm {
    /* border-bottom: #e8e8e8 1px solid; */
}

@media screen and (max-width:750px){
    .bc {
        padding: 3.733vw 0;
    }
    .bc .wrap {
        padding: 0 5.333vw;
    }
    .bc .wrap *,
    .bc .wrap p {
        font-size: 2.4vw;
        margin: 0;
    }
    .bc .wrap p:first-of-type::before {
        content: "";
        background: url(https://d18f657670wm8u.cloudfront.net/otona/compensate/advice/img/sp/common/bc_icon_home.png?20250815) no-repeat center center/contain;
        width: 3.066vw;
        height: 2.933vw;
        margin: 0 1.066vw 0 0;

    }
    .bc .wrap p:not(:first-of-type):before {
        content: "";
        background: url(https://d18f657670wm8u.cloudfront.net/otona/compensate/advice/img/sp/common/bc_icon_arrow.png?20250815) no-repeat center center/contain;
        width: 1.466vw;
        height: 2.266vw;
        margin: 0 1.066vw;
    }
    #topicPath_btm {
        background: #dadada;
    }
}


/* ------------------------------------------
        下部リンク
   ------------------------------------------ */
#info {
    /* padding: 25px 0; */
    padding: 15px 0 25px;
}
#info ul {
    display: flex;
}
#info ul li {
    border-left: #dadada 1px solid;
    width: 240px;
    padding: 0 16px;
}
#info ul li:last-child {
    border-right: #dadada 1px solid;
}
#info ul li h5 {
    color: #000;
    font-size: 108%;
    font-weight: normal;
    margin: 23px 0 18px;
}
#info ul li a {
    display: block;
}
#info ul li a p {
    color: #014099;
    font-size: 93%;
    line-height: 1.66em;
    text-decoration: underline;
}

@media screen and (max-width:750px){
    #info {
        padding: 7.6vw 0 4vw;
    }
    #info * {
        box-sizing: border-box;
    }
    #info .wrap {
        padding: 0 5.333vw;
    }
    #info ul {
        flex-flow: wrap;
    }
    #info ul li {
        border: none;
        width: 44.666vw;
        height: auto;
        min-height: 50.133vw;
        padding: 0;
        flex: 0 0 50%;
    }
    #info ul li:nth-child(odd){
        padding-right: 1.2vw;
        border-right: #dadada 1px solid;
    }
    #info ul li:nth-child(even){
        padding-left: 1.066vw;
    }
    #info ul li:nth-child(-n+2){
        margin-bottom: 5.333vw;
    }
    #info ul li:last-child {
        border: none;
    }
    #info ul li img {
        width: 100%;
    }
    #info ul li h5 {
        height: 11.2vw;
        font-size: 3.2vw;
        font-weight: bold;
        margin: 2.933vw 0 0;
        line-height: 1.33em;
    }
    #info ul li:nth-child(n+3) h5 {
        height: 6.5vw;
    }
    #info ul li a p {
        font-size: 2.66vw;
    }
}


/* ------------------------------------------
        contentsWrap
   ------------------------------------------ */
#contentsWrap * {
    /* letter-spacing: 0.02em; */
    box-sizing: border-box;
}
#contentsWrap .innerWrap {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width:750px){
    #contentsWrap .innerWrap {
        width: 100%;
    }
}


/* ------------------------------------------
        contentsMain
   ------------------------------------------ */
#contentsMain {
    padding: 0 0 80px;
}

@media screen and (max-width:750px){
    #contentsMain {
        padding: 0;
    }
}

@media only screen and (max-width: 768px) {
    #page {
        padding-top: 60px;
    }
}