@charset "utf-8";

/* コンテンツ
------------------------------------------------------------ */
/* 見出し */
h2 span{
    display:block;
}
h2 span em{
    font-weight:bold;
    font-size:28px;
}
/* 3つの特徴 */
.feature_list{
    counter-reset:number 0;
}
.feature_list li{
    position:relative;
    padding:15px 15px 15px 50px;
    font-weight:bold;
    line-height:1.4;
}
.feature_list li::before{
    position:absolute;
    top:15px;
    left:0;
    width:30px;
    color:#fff;
    font-size:24px;
    text-align:center;
    counter-increment:number;
    content:counter(number);
    z-index:+1;
}
.feature_list li::after{
    position:absolute;
    content:'';
    top:17px;
    left:0;
    width:30px;
    height:30px;
    background:#8dc556;
}
.feature_list li:not(:last-child){
    border-bottom:2px dotted #22a84b;
}
.feature_list li strong{
    font-weight:bold;
    font-size:20px;
}
.feature_list li small{
    display:block;
    padding:10px 0 0;
    font-weight:normal;
}
/* 保障内容・保障プランと保険料 */
.compensation_block{
    width:100%;
    border:2px solid #7a6a56;
}
.compensation_block th,
.compensation_block td{
    border:1px solid #7a6a56;
}
.compensation_block th,
.compensation_block td{
    padding:5px 10px;
}
.compensation_block thead th{
    white-space:nowrap;
    font-weight:bold;
    text-align:center;
}
.compensation_block tbody th.main_item{
    width:1em;
    background:#f9cd9d;
    font-weight:bold;
    line-height:1.2;
}
.compensation_block tbody th:not(.main_item){
    white-space:nowrap;
}
.compensation_block .plan{
    background:#f9cd9d;
}
.compensation_block .amount{
    background:#fde9d4;
}
.compensation_block .rent{
    background:#fbe3e2;
}
.compensation_block .owned{
    background:#e9f1f9;
}
/* 保障内容 */
.type_guarantee{
    min-width:700px;
    border-top:none;
    border-left:none;
}
.type_guarantee thead td{
    border-width:0 0 2px 0;
}
.type_guarantee thead th{
    border-width:2px;
}
.type_guarantee thead th:first-of-type{
    background:#f0a9b1;
}
.type_guarantee thead th:last-of-type{
    background:#c7e8fa;
}
.type_guarantee tbody th.main_item{
    border-left-width:2px;
    -moz-border-start-width:4px;
    color:#dc6a29;
    font-size:18px;
}
.type_guarantee tbody th.sub_item{
    width:1em;
    background:#fcdfc1;
    color:#dc6a29;
    font-size:18px;
    line-height:1.2;
    white-space:break-spaces;
}
.type_guarantee tbody th:not([class]){
    color:#ed6d1f;
    font-weight:bold;
    text-align:center;
}
.type_guarantee tbody td:not([class]){
    font-size:14px
}
.type_guarantee tbody td.rent,
.type_guarantee tbody td.owned{
    width:90px;
    font-size:18px;
    text-align:center;
    border-left-width:2px;
}
/* 補償プラン */
.type_plan{
    min-width:700px;
}
.type_plan thead th{
    font-weight:bold;
}
.type_plan thead th,
.type_plan tbody tr.amount th.main_item,
.type_plan tbody tr.amount:nth-child(2) th,
.type_plan tbody tr.amount:nth-child(2) td{
    border-bottom:2px solid #7a6a56;
}
.type_plan tbody th:not(.main_item){
    white-space:break-spaces;
    text-align:center;
}
.type_plan tbody td{
    text-align:right;
    white-space:nowrap;
}
.type_plan tbody td em{
    font-weight:bold;
    font-size:22px;
}
.type_plan tbody tr.rent td,
.type_plan tbody tr.owned td{
    color:#ea5504;
}
/* スクロール */
.scroll_att{
    font-size:14px;
}
.scroll_wrap{
    overflow:auto;
    padding:0 0 5px;
}
/* 注記 */
.att_txt{
    display:table;
    font-size:14px;
}
.att_txt span{
    display:table-cell;
}
.plan_att_wrap{
    margin:0 0 15px;
}
/* 家財の保険金額のめやす */
.guideline_title{
    margin:0 0 10px;
    font-weight:bold;
    font-size:18px;
}
.guideline_title span{
    position:relative;
    padding:0 24px;
}
.guideline_title span::before,
.guideline_title span::after{
    position:absolute;
    content:'';
    top:4px;
    width:14px;
    height:14px;
    background:#333;
}
.guideline_title span::before{
    left:0;
}
.guideline_title span::after{
    right:0;
}
.guideline_wrap p{
    margin:0 0 10px;
}
.type_guideline{
    border-width:1px;
}
.type_guideline th{
    background:#fde9d4 !important;
    text-align:center;
}
.type_guideline thead th:first-child{
    width:130px;
}
.type_guideline thead th:not(:first-child){
    width:calc((100% - 130px) / 4);
}

/* 画面サイズ別調整
---------------------------------------------------------------- */
@media screen and (max-width:374px){
    .type_guideline{
        font-size:14px;
    }
    .type_guideline tbody th:not(.main_item) {
        white-space:break-spaces;
    }
}

@media screen and (min-width:768px){
    /* 見出し */
    h2 span{
        display:inline-block;
        margin:0 0 0 20px;
    }
    .feature_list li small{
        display:inline-block;
        padding:0;
    }
    /* スクロール */
    .scroll_att{
        display:none;
    }
}