@charset "utf-8";

/* 共通 
------------------------------------------------------------ */
.content_wrapper{
    padding:20px 0;
    background:#fff
}
.content_wrapper *,
.content_wrapper *::before,
.content_wrapper *::after{
    box-sizing:border-box;
}
.content_wrapper .ct_box{
    padding:0 15px;
    border:none;
}
/* 画像 */
.content_wrapper picture,
.content_wrapper img{
    display:block;
}
.content_wrapper img{
    max-width:100%;
    height:auto;
    backface-visibility:hidden;
}

/* コンテンツ
------------------------------------------------------------ */
.head_text{
    margin:0 0 30px;
    color:#04af7a;
    font-weight:bold;
    font-size:24px;
    line-height:1.4;
}
/* 見出し */
.sub_heading{
    position:relative;
    margin:0 0 30px;
    padding:0 0 15px 40px;
    background:url(../images/informative_bg.webp) no-repeat top left / 30px;
    font-weight:bold;
    font-size:20px;
    line-height:1.4;
}
.sub_heading small{
    display:block;
    font-weight:normal;
    font-size:14px;
}
.sub_heading::after{
    position:absolute;
    content:"";
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    background:#04af7a;
    background:linear-gradient(to right, #04af7a 50%, #f0908a 50%);
}
/* 告知事項 */
.inform{
    width:100%;
    border:1px solid #7c828e;
    border-radius:20px;
    border-collapse:separate;
}
.inform th{
    width:40%;
    padding:10px;
    border-right:1px solid #7c828e;
}
.inform td{
    padding:10px;
}
.inform tr:not(:first-of-type) th,
.inform tr:not(:first-of-type) td{
    border-top:1px solid #7c828e;
}
.inform th p{
    position:relative;
    padding:0 0 0 25px;
    text-indent:-0.5em;
    line-height:1.4;
}
.inform th p span{
    position:absolute;
    top:2px;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:100%;
    background:#04af7a;
    color:#fff;
    font-weight:bold;
    font-size:12px;
    text-indent:0;
    line-height:1;
}
li.circle_mark{
    position:relative;
    padding:0 0 0 20px;
}
li.circle_mark::before {
    position:absolute;
    content:'';
    top:5px;
    left:0;
    width:15px;
    height:15px;
    border:1px solid #7c828e;
    border-radius:100%;
}
.inform td sup{
    font-size:14px;
    margin:0 0 0 -0.3em;
    padding:0 0.5em 0 0;
}
/* 保障開始までの流れ */
.flow_wrap{
    padding:15px 0;
}
.flow_wrap img{
    margin:0 auto 5px;
}
/* 保険料 */
.detail_heading h3{
    padding:10px 0;
    border-bottom:#04af7a 1px solid;
    background:#e4f7f1;
    color:#04af7a;
    font-weight:bold;
    font-size:20px;
    text-align:center;
}
.detail_heading p{
    padding:15px 10px;
    color:#04af7a;
    font-weight:bold;
}
.detail_heading p small{
    font-size:14px;
}
.gender_heading{
    margin:0 0 15px;
    padding:5px 0;
    border-radius:20px;
    color:#fff;
    font-weight:bold;
    font-size:20px;
    text-align:center;
}
.premium_wrap dt{
    font-weight:bold;
    font-size:20px;
}
.premium_wrap dt:nth-child(3){
    padding:15px 0 0;
}
.premium_wrap figcaption{
    font-size:14px;
    text-align:right;
}
.premium_att{
    padding:5px 0 0;
    color:#2b4d72;
    font-size:12px;
}
/* 女性 */
.premium_woman{
    margin:0 0 30px;
}
.premium_woman .gender_heading{
    background:#d76f88;
}
.premium_woman dt,
.premium_woman figcaption{
    color:#d76f88;
}
/* 男性 */
.premium_man .gender_heading{
    background:#7199ca;
}
.premium_man dt,
.premium_man figcaption{
    color:#7199ca;
}

/* 付帯サービス
------------------------------------------------------------ */
.service_wrap{
    margin:0 15px 20px;
    padding:15px;
    background:#04af7a;
    background:linear-gradient(135deg, #04af7a 50%, #f0908a 50%);
}
.service_wrap_inner{
    padding:20px 15px;
    border-radius:20px;
    background:#fff;
}
.service_heading{
    margin:0 0 15px;
    padding:10px 0 0 85px;
    background:url(../images/service_heading_bg.webp) no-repeat top left / 75px;
    color:#de7e34;
    font-weight:bold;
    font-size:18px;
}
.service_heading strong{
    font-weight:bold;
    font-size:24px;
    line-height:1.4;
}
.service_catch{
    margin:0 0 30px;
    padding:15px;
    border-radius:20px;
    background:#fef9e6;
    color:#d14631;
    font-weight:bold;
    font-size:18px;
    line-height:1.4;
    text-align:center;
}
.service_wrap_inner p:nth-child(3){
    margin:0 0 30px;
}
.service_wrap_inner p:nth-child(n + 6){
    margin:0 0 15px;
}
.service_wrap_inner p:last-child{
    margin:0;
}
.service_wrap_inner p sup{
    font-size:12px;
    vertical-align:top;
}
.service_att{
    display:table;
    width:100%;
    font-size:14px;
    line-height:1.4;
}
.service_att span{
    display:table-cell;
}

/* 画面サイズ別
------------------------------------------------------------ */
@media screen and (min-width:480px){
    .inform th,
    .gender_heading{
        width:220px;
    }
    .service_heading{
        padding:15px 0 0 110px;
        background-size:90px;
    }
}

@media screen and (min-width:768px){
    .head_text{
        font-size:28px;
    }
    .detail_heading{
        display:table;
        margin:0 0 30px;
    }
    .detail_heading h3{
        display:table-cell;
        width:300px;
        border-bottom:none;
        border-right:1px solid;
        vertical-align:middle;
    }
    .service_wrap,
    .service_wrap_inner{
        padding:30px;
    }
    .service_heading{
        margin:0 0 15px;
        font-size:20px;
    }
    .service_heading strong{
        font-size:28px;
    }
    .premium_att{
        text-align:right;
    }
}