@charset "UTF-8";
/* COMMON
------------------------------------------- */
:root {
    --color1: #FD5925;
    --color2: #FFF;
    --rank1: #C9A514;
    --rank2: #999;
    --rank3: #89584E;
}
.lpcont {
    max-width: 1280px;
    margin: auto;
    font-size: 14px;
}
.lpcont img {
    max-width: 100%;
    height: auto;
}
.lpcont a:hover {
    opacity: 0.8;
}
.lpcont .att {
    color: var(--color1);
    font-weight: bold;
}
.lpcont sup {
    font-size: 10px;
}
.lpcont .note {
    font-size: 12px;
}
.lpcont .pc_br {
    display: none;
}
/* MV
------------------------------------------- */
.lpcont .mv_wrap {
    background: #FFFCE3;
}
.lpcont .mv_wrap h1 {
    max-width: 700px;
    margin: auto;
}
.lpcont .mv_wrap .note {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px 6px;
    font-size: 10px;
    color: #888;
}
/* ランキング */
.lpcont .onlinerank_list {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: auto;
    padding: 30px 8px 0;
    background: rgba(201, 165, 20, .18);
}
.lpcont .onlinerank_list li {
    position: relative;
    width: calc((100% - 12px) / 3);
    max-width: 176px;
    border: 3px solid;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: var(--color2);
    padding: 20px min(1.3vw, 20px) 12px;
}
.lpcont .onlinerank_list li.onlinerank_1 {
    order: 1;
    border-color: var(--rank1);
}
.lpcont .onlinerank_list li.onlinerank_2 {
    order: 0;
    border-color: var(--rank2);
}
.lpcont .onlinerank_list li.onlinerank_3 {
    order: 2;
    border-color: var(--rank3);
}
.lpcont .onlinerank_list li::before {
    position: absolute;
    left: 50%;
    top: -30px;
    content: '';
    width: 46px;
    height: 38px;
    transform: translateX(-50%);
    background-size: contain;
}
.lpcont .onlinerank_list li.onlinerank_1::before {
    background-image: url(images/onlinerank01.webp);
}
.lpcont .onlinerank_list li.onlinerank_2::before {
    background-image: url(images/onlinerank02.webp);
}
.lpcont .onlinerank_list li.onlinerank_3::before {
    background-image: url(images/onlinerank03.webp);
}
.lpcont .onlinerank_list li:not(.on) {
    border-width: 2px;
    bottom: -12px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}
.lpcont .onlinerank_list li:not(.on):hover {
    transition: transform .4s ease;
    transform: translatey(-12px);
}
.lpcont .onlinerank_list li:not(.on):hover::after,
.lpcont .onlinerank_list li.on::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 12px 0 12px;
    border-color: #fff transparent transparent transparent;
    transform: translatex(-50%);
    z-index: +1;
}
.lpcont .onlinerank_list li figure figcaption {
    line-height: 1.2;
    padding: 10px 0;
    font-size: min(3.2vw, 16px);
    text-align: center;
}
.lpcont .onlinerank_list li.on figcaption {
    color: #DD1D0E;
    font-weight: bold;
}
/* TITLE - COMPANY INFO
------------------------------------------- */
.lpcont .lp_company_info .category_box {
    background: #FAF4E1;
}
.lpcont .lp_company_info h2 {
    position: relative;
    padding: 20px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
    line-height: 1;
}
.lpcont .lp_company_info.pc_info h2 {
    background: var(--rank1);
}
.lpcont .lp_company_info.ln_info h2 {
    background: var(--rank2);
}
.lpcont .lp_company_info.ha_info h2 {
    background: var(--rank3);
}
.lpcont .lp_company_info h2 span {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 15px;
    border-radius: 2px;
    background: var(--color2);
    color: var(--color1);
    font-size: .818em;
}
/* BTN - COMPANY INFO
------------------------------------------- */
.lpcont .btn_wrap {
    text-align: center;
}
.lpcont .lp_company_info>.btn_wrap {
    padding: 0 16px;
}
.lpcont .product_box .btn_wrap {
    margin-top: 18px;
}
.lpcont .lp_company_info .point_list + .btn_wrap {
    margin-top: 44px;
}
.lpcont .lp_company_info .btn_wrap .btn_simulation {
    display: block;
    margin: 16px 0;
    padding: 16px 10px;
    border-radius: 100px;
    background: #18BE7E;
    box-shadow: 0 3px 6px #00000033;
    color: var(--color2);
    font-weight: bold;
    font-size: min(4.9vw, 18px);
    text-decoration: none;
}
.lpcont .lp_company_info .btn_simulation {
    margin: 16px 0 10px;
}
.lpcont .lp_company_info .more_link {
    margin-top: 10px;
    text-align: right;
}
.lpcont .lp_company_info .txtlink {
    color: #264CE2;
}
/* TAB-NAV - COMPANY INFO
------------------------------------------- */
.lp_company_info {
    padding: 0 0 40px;
}
/* TAB-CONTENTS - COMPANY INFO
------------------------------------------- */
.lp_company_info .product_wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.lp_company_info .category_box {
    border-radius: 16px;
    background: #e6e5e1;
    padding: 24px 16px;
}
.lp_company_info .category_box .cat_ttl {
    color: var(--color1);
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    margin: 0 0 12px;
}
.lp_company_info .product_box {
    padding: 16px 16px 24px;
    border-top: 5px solid var(--color1);
    border-radius: 0 0 4px 4px;
    background: var(--color2);
}
.lp_company_info .product_box .logo_blk {
    padding-bottom: 15px;
    border-bottom: 2px dotted #D6D6D6;
}
.lp_company_info .product_logo_link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    text-decoration: none;
}
.lp_company_info .product_logo_link div {
    width: 110px;
}
.lp_company_info .product_logo_link div img {
    width: 100%;
}
.lp_company_info .product_logo_link p {
    width: calc(100% - 120px);
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3;
}
.lp_company_info .product_logo_link p span {
    display: block;
    font-weight: normal;
    font-size: 14px;
    margin: 0 0 4px;
}
.lp_company_info .ranking_bnr {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 20px auto 6px;
}
.lp_company_info .ranking_bnr .bnr_box{
    text-align: center;
}
.lp_company_info .ranking_bnr .bnr_box:only-child {
    width: 100%;
    max-width: 500px;
    margin: auto;
}
.lp_company_info .ranking_bnr .ttl {
    font-size: 14px;
    font-weight: bold;
    background: #F6AC00;
    text-align: center;
    color: #fff;
    padding: 3px 6px;
    margin-bottom: 6px;
}
.lp_company_info .ranking_bnr .no2 .ttl {
    background: #8197BB;
}
.lp_company_info .ranking_bnr .bnr {
    width: calc(100% - 12px);
    max-width: 400px;
}
.lp_company_info .ranking_bnr + .note {
    font-size: 11px;
    color: #666;
    line-height: 1.3;
    max-width: 500px;
    margin: auto;
}
.lp_company_info .point_list {
    position: relative;
    padding-top: 16px;
}
.lp_company_info .point_list p:not(.more_link) {
    position: relative;
    padding: 0 0 5px 15px;
}
.lp_company_info .point_list p:not(.more_link)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: var(--color1);
}
.lp_company_info .point_list p span {
    display: block;
    color: #888;
    font-size: 12px;
}
/* OPEN - 開閉 */
.lp_company_info .fold_box {
    display: none;
}
.lp_company_info .fold_btn {
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 100%;
    padding: 35px 0 0px;
    background: linear-gradient(to bottom, rgba(255, 172, 195, 0) 0%, rgb(255 255 255) 30%, rgb(255 255 255) 100%);
}
.lp_company_info .fold_btn span {
    position: relative;
    display: block;
    width: fit-content;
    line-height: 1;
    margin: 0 auto;
    padding: 10px 40px;
    border-radius: 50px;
    background: #E6E6E6;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    color: #666;
}
.lp_company_info .fold_btn span::before,
.lp_company_info .fold_btn span::after {
    content: "";
    position: absolute;
    transform: translateY(-50%) rotate(135deg);
}
.lp_company_info .fold_btn span::before {
    right: 10px;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background: var(--color2);
}
.lp_company_info .fold_btn span::after {
    right: 15px;
    top: 46%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
}
/* CLOSE - 開閉 */
.lp_company_info .fold_btn.close {
    position: relative;
    padding: 0;
    background: none;
}
.lp_company_info .fold_btn.close span::after {
    top: 54%;
    transform: translateY(-50%) rotate(-45deg);
}
/* FP */
.lp_company_info .fp_comment {
    margin: 40px auto 16px;
    padding: 16px 0;
    border-radius: 4px;
    background: #FFF4ED;
}
.lp_company_info .fp_comment dt {
    position: relative;
    line-height: 1.8;
    margin-bottom: 10px;
    padding: 0 60px 0 16px;
    border-bottom: 1px solid var(--color1);
    font-weight: bold;
}
.lp_company_info .fp_comment dt span {
    display: inline-block;
    line-height: 1;
    padding: 5px 10px;
    background: var(--color1);
    color: var(--color2);
    font-weight: normal;
    font-size: 12px;
}
.lp_company_info .fp_comment dt::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 69px;
    height: 69px;
    background: url(images/img_fp.webp) no-repeat;
    background-size: cover;
}
.lp_company_info .fp_comment dt p {
    margin-right: 15px;
}
.lp_company_info .fp_comment dd {
    line-height: 1.7;
    padding: 0 16px;
}
.lp_company_info .item_att_block {
    margin-top: 20px;
}
.lp_company_info .item_att_block li {
    margin-bottom: 0.5em;
    padding-left: 2em;
    text-indent: -2em;
    color: #888;
    font-size: 12px;
}
/* キャンペーン導線
------------------------------------------- */
.cp_container {
    margin: -8px auto 0;
    padding: 0 16px 32px;
}
.cp_container .cp_wrap {
    border: 4px solid #28A1CC;
    border-radius: 30px;
    background: #FFF;
    overflow: hidden;
    font-size: min(4.6vw, 16px);
    text-align: center;
}
.cp_container .cp_wrap .cp_mv {
    margin-bottom: 12px;
}
.cp_container .cp_wrap p {
    margin: 0 6px 12px;
}
.cp_container .cp_wrap em {
    font-weight: bold;
}
.cp_container .cp_wrap .marker {
    line-height: 1.3;
    background: linear-gradient(transparent 35%, #FFFF99 35%);
    font-weight: bold;
    font-size: min(5.5vw, 20px);
}
.cp_container .cp_wrap .cp_btn {
    margin: 10px 15px 20px;
}
.cp_container .cp_wrap .cp_btn .cp_btn_tit {
    margin-bottom: 6px;
}
.cp_container .cp_wrap .cp_btn .cp_btn_tit span {
    display: inline-block;
    line-height: 1;
    padding: 8px 30px 0 0;
    background: url(images/ico_gift.webp) no-repeat right bottom;
    background-size: 22px;
}
.cp_container .cp_wrap .cp_btn a {
    display: block;
    max-width: 500px;
    line-height: 1.3;
    margin: auto;
    padding: 8px;
    border-radius: 100px;
    background: #FD5925;
    box-shadow: 0px 4px 6px #3542474D;
    color: #FFF;
    font-weight: bold;
    font-size: 17px;
    text-decoration: none;
}
.cp_container .cp_wrap .cp_btn a span {
    display: block;
    font-weight: normal;
    font-size: 13px;
}
/* 保険相談
------------------------------------------- */
.lpcont .soudan_wrap {
    padding: 30px 15px;
    background: #E1F6F6;
}
.lpcont .soudan_wrap .soudan_area {
    max-width: 410px;
    margin: 0 auto 15px;
}
.lpcont .soudan_wrap .soudan_area dl {
    background: var(--color2);
    border-radius: 10px;
    padding: 10px 10px 0;
    box-shadow: 0 0 6px rgba(0, 0, 0, 30%);
    position: relative;
}
.lpcont .soudan_wrap .soudan_area dl dt {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    margin: 0 0 10px;
}
.lpcont .soudan_wrap .soudan_area dl dd {
    margin: 0 15px;
    padding: 0 0 10px 30px;
    background: url(images/check_ico.webp) no-repeat left top;
    background-size: 21px;
    font-size: 16px;
}
.lpcont .soudan_wrap .soudan_area .arrow {
    margin: 0 auto 5px;
    width: 140px;
}
.lpcont .soudan_wrap .soudan_area .soudan_txt {
    margin: 0 0 10px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}
.lpcont .soudan_wrap .soudan_area figure {
    margin: 0 0 20px;
}
/* 相談エリア - ボタン */
.lpcont .soudan_wrap ul {
    max-width: 720px;
    margin: 0 auto;
}
.lpcont .soudan_wrap ul li:first-child {
    margin: 0 0 25px;
}
.lpcont .soudan_wrap ul li p {
    margin: 0 0 5px;
    padding: 0 10px;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
}
/* 吹き出し */
.lpcont .soudan_wrap ul li p.speech span {
    position: relative;
    padding: 0 10px;
}
.lpcont .soudan_wrap ul li p.speech span::before,
.lpcont .soudan_wrap ul li p.speech span::after {
    content: '';
    width: 2px;
    height: 100%;
    position: absolute;
    bottom: 0;
    background: #333;
}
.lpcont .soudan_wrap ul li p.speech span::before {
    left: 0;
    transform: rotate(-20deg);
}
.lpcont .soudan_wrap ul li p.speech span::after {
    right: 0;
    transform: rotate(20deg);
}
.lpcont .soudan_wrap ul li a {
    display: block;
    padding: 10px 25px;
    border-radius: 100px;
    color: #fff;
    font-weight: bold;
    font-size: min(6.8vw, 24px);
    text-decoration: none;
    text-align: center;
}
.lpcont .soudan_wrap ul li:nth-child(1) a {
    box-shadow: 0 4px 0 #061A5B;
    background: #295AAA;
}
.lpcont .soudan_wrap ul li:nth-child(2) a {
    box-shadow: 0 4px 0 #00392D;
    background: #055241;
}
.lpcont .lp_att {
    max-width: 730px;
    margin: 0 auto;
    padding: 15px;
    font-size: 12px;
    line-height: 2.4;
}
/* 会社情報
------------------------------------------- */
.company_area {
    font-size: 14px;
}
.company_area .ttl {
    background-color: #FDf5DC;
    padding: 3px 15px;
}
.company_area .text {
    margin: 3px 15px 10px;
}
/* 募文番号
------------------------------------------- */
.document_area {
    margin: 0 15px 30px;
    text-align: right;
}
@media screen and (min-width: 768px) {
    /* COMMON
    ------------------------------------------- */
    .lpcont {
        margin-bottom: 30px;
        font-size: 16px;
    }
    .lpcont .pc_br {
        display: block;
    }
    /* MV
    ------------------------------------------- */
    .lpcont .mv_wrap .note {
        font-size: 12px;
    }
    .lpcont .onlinerank_list {
        gap: 20px;
    }
    .lpcont .onlinerank_list li::before {
        width: 56px;
        height: 46px;
    }
    /* TITLE - COMPANY INFO
    ------------------------------------------- */
    .lpcont .lp_company_info h2 {
        margin-bottom: 32px;
        font-size: 30px;
    }
    .lpcont .lp_company_info h2 span {
        padding: 5px 10px;
        font-size: 24px;
    }
    /* BTN - COMPANY INFO
    ------------------------------------------- */
    .lp_company_info .product_wrap {
        padding: 0 40px;
        gap: 32px;
    }
    .lp_company_info .category_box .cat_ttl {
        font-size: 26px;
    }
    .lpcont .lp_company_info .btn_wrap {
        max-width: 500px;
        margin: 0 auto 24px;
        padding: 0;
    }
    .lpcont .lp_company_info .point_list + .btn_wrap {
        margin-top: 64px;
    }
    .lpcont .lp_company_info .btn_wrap .btn_simulation {
        margin: auto;
        padding: 22px 0;
        font-size: 22px;
    }
    .lpcont .document_link {
        display: inline-block;
        margin-top: 10px;
    }
    /* TAB-CONTENTS - COMPANY INFO
    ------------------------------------------- */
    .lp_company_info .product_box {
        overflow: hidden;
        max-width: 800px;
        margin: auto;
        padding: 32px 80px 0;
    }
    .lp_company_info .product_logo_link {
        justify-content: center;
    }
    .lp_company_info .product_logo_link p {
        width: auto;
        margin-left: 16px;
    }
    .lp_company_info .ranking_bnr {
        max-width: 500px;
        margin-bottom: 10px;
    }
    .lp_company_info .ranking_bnr .bnr_box:only-child {
        display: flex;
        gap: 16px;
    }
    .lp_company_info .ranking_bnr .bnr_box:only-child .ttl {
        display: flex;
        align-items: center;
        width: 40%;
        justify-content: center;
        margin: 0;
    }
    .lp_company_info .ranking_bnr .bnr_box:only-child .bnr {
        width: 60%;
    }
    .lp_company_info .ranking_bnr .bnr_box:not(:only-child) .bnr {
        width: calc(100% - 80px);
    }
    .lp_company_info .point_list {
        padding: 16px 58px 0;
    }
    .lp_company_info .fold_btn {
        bottom: -40px;
    }
    .lp_company_info .fold_btn span {
        cursor: pointer;
    }
    .lp_company_info .fp_comment {
        margin: 62px auto 32px;
    }
    .lp_company_info .fp_comment dt {
        line-height: 2;
        padding: 0 64px;
    }
    .lp_company_info .fp_comment dt::before {
        right: 64px;
        width: 69px;
        height: 69px;
    }
    .lp_company_info .fp_comment dd {
        padding: 0 64px;
        font-size: 14px;
    }
    .lp_company_info .item_att_block {
        max-width: 500px;
        margin: auto;
        padding-bottom: 20px;
    }
    /* キャンペーン導線
    ------------------------------------------- */
    .cp_container {
        max-width: 750px;
        margin: auto;
    }
    .cp_container .cp_wrap {
        font-size: 18px;
    }
    .cp_container .cp_wrap .cp_btn {
        margin-bottom: 30px;
    }
    .cp_container .cp_wrap .cp_btn a {
        padding: 14px 0;
        font-size: 26px;
    }
    .cp_container .cp_wrap .cp_btn a span {
        font-size: 14px;
    }
    /* 保険相談
    ------------------------------------------- */
    .lpcont .soudan_wrap ul {
        display: flex;
        justify-content: space-between;
    }
    .lpcont .soudan_wrap ul li {
        width: calc((100% - 30px) / 2);
    }
    /* 会社情報
    ------------------------------------------- */
    .company_area {
        display: flex;
        gap: 30px;
        justify-content: center;
        max-width: 1040px;
        margin: 0 auto 20px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 15px 0;
        flex-wrap: wrap;
    }
    .company_area>div {
        width: calc((100% - 90px) / 2);
    }
    .company_area .ttl {
        background: none;
        padding: 0;
        margin: 0 0 10px;
    }
    /* 募文番号
    ------------------------------------------- */
    .company_area .document_area {
        width: 100%;
    }
}