/*保険料例*/
.premium_example{
    display:grid;
    grid-template-columns: 35% 5% 1fr;
    grid-template-rows: repeat(6,auto);
    grid-gap:1em 1.5em;
    margin:1em 0 3em;
}
.premium_example_space{
    border:none;
    border-bottom: 8px dotted #b9e9ff;
    margin: 5em auto;
    width: 75%;
}

/*保険料例ータイトルなど*/
.premium_example_text{
    grid-row:1;
    grid-column:2 / 4;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
}
.premium_example_text h3{
    display: flex;
    align-items: center;
    gap:0 0.5em;
    color:#066eb8;
    margin:0 0 0.5em;
}
.premium_example_text h3 em{
    display:block;
    width:fit-content;
    box-sizing: border-box;
    color:#fff;
    background:#066eb8;
    border-radius:0.5em;
    padding: 0.3em 0.5em;
    line-height:1;
    font-size:90%;
}

/*保険料例ー画像など*/
.premium_example_img{
    grid-row:1 / 3;
    grid-column:1;
}

/*保険料例ー料金３つ*/
.premium_example_list{
    grid-row:2;
    grid-column:2 / 4;
    display:flex;
    flex-flow: row wrap;
    gap:1em;
    margin-bottom:1em;
}
.premium_example_list li{
    display: flex;
    width:calc((100% - 2em) / 3);
    box-sizing: border-box;
    border-radius:0.5em;
    padding:0.5em 1em;
    background:#fff;
    border:2px solid #066eb8;
    text-align: center;
    flex-flow:column wrap;
    justify-content: center;
    align-items: center;
}
.premium_example_list li span{
    display:block;
    color:#066eb8;
    font-size:1.4rem;
    line-height:1.3;
    font-weight:bold;
}
.premium_example_list li strong{
    display:block;
    font-size:150%;
}


/*保険料例ー算出条件など*/
.premium_example_conditions{
    grid-row:3;
    grid-column:3;
    display:flex;
    flex-flow: row wrap;
    gap:0.5em;
}
.premium_example_conditions li{
    display:grid;
    grid-template-columns: 3.5em 1fr;
    grid-template-rows: repeat(2,auto);
    border:1px solid #c4e1f5;
    border-radius:0.5em;
    flex:1 0 auto;
}
.premium_example_conditions li span{
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff9fd;
    text-align: center;
    box-sizing: border-box;
    padding:0 0.3em;
}
.premium_example_conditions img{
    display: block;
}
.premium_example_conditions small,
.premium_example_conditions p{
    display:block;
    margin:0;
    line-height: 1.3;
    box-sizing: border-box;
    padding:2px 0.5em 0;
}

/*保険料例ー補償*/
.premium_example_hosho{
    grid-row: 3;
    grid-column: 1 / 3;
}
.pre_ex_hosho_list{
    display:flex;
    flex-flow:row wrap;
}
.pre_ex_hosho_list li{
    display: block;
    width:fit-content;
    flex:1 0 auto;
    box-sizing: border-box;
    padding:4px;
}
.pre_ex_hosho_list li a{
    display:flex;
    gap:0 5px;
    align-items: center;
    box-sizing: border-box;
    padding:0 0.5em;
    background:#f0f0f1;
    justify-content: center;
}
.pre_ex_hosho_list li.pre_ex_hosho_select a{
    background: #b9e9ff;
}
.pre_ex_hosho_list li.pre_ex_hosho_select a::after{
    content:"";
    display:block;
    width: 1em;
    height:1em;
    border:2px solid #ff6400;
    border-radius:50%;
    box-sizing: border-box;
    background:#fff;
}
.pre_ex_hosho_list li:not(.pre_ex_hosho_select) a::after{
    content:"×";
    display:block;
}

/*保険料例ー詳細テーブル*/
.premium_example_detail{
    grid-row:5;
    grid-column: 1 / 4;
    display:flex;
    flex-flow: column wrap;
    gap:1em;

}
.premium_example_table{
    border-collapse: collapse;
    border:1px solid #066eb8;
    overflow: hidden;
    box-sizing: border-box;
    table-layout:fixed;
    width:100%;
}
.premium_example_table caption{
    background:#c2e0f5;
    color:#066eb8;
    position:relative;
    box-sizing: border-box;
    padding:0.3em 1em;
    cursor: pointer;
    border:1px solid #066eb8;
}
.premium_example_table caption::after{
    content:"＞";
    display:inline-block;
    margin-left:5px;
    transform: rotate(90deg);
    width:1em;
    height:1em;
    line-height: 1;
    font-size:1.2rem;
}
.premium_example_table.is-open caption::after {
    transform: rotate(-90deg);
}

.premium_example_table thead{
    background:#066eb8;
    color: #fff;
}
.premium_example_table thead td{
    box-sizing: border-box;
    padding:0 1em;
}
.premium_example_table thead small{
    color:yellow;
}

.premium_example_table tfoot{
    background: #eff9fd;
}
.premium_example_table tfoot td{
    box-sizing: border-box;
    padding: 0.5em 1em;
}
.premium_example_table tfoot td:nth-child(1){
    background:#066eb8;
    color: #fff;
}
.premium_example_table tfoot small{
    display:block;
    color:#066eb8;
}
.premium_example_table tfoot a{margin:8px auto 0;}

.premium_example_table tbody td,
.premium_example_table tbody th{
    box-sizing: border-box;
    padding: 0.5em 1em;
    border:1px solid #066eb8;
}
.premium_example_table tbody tr:nth-child(odd){
    background:#eff9fd;
}
.premium_example_table th,
.premium_example_table td:nth-child(1){width:20%;}
.premium_example_table td:last-child{width:45%;}

.premium_example_table th:not(.ta_l){
    text-align: right;
}


/*保険料例ー割引状況など*/
.premium_example_discount{
    grid-row:6;
    grid-column:1 / 4;
    display: flex;
    background:linear-gradient(to right, #ff6400 8em, #fff7d6 8em);
    border-radius:0.5em;
    align-items: center;
    overflow: hidden;
    font-weight: bold;
    color:#066eb8;
    text-align: center;
}
.premium_example_discount01{
    font-size:1.6rem;
    width:8em;
    box-sizing:border-box;
    padding:1em;
    color:#fff;
}
.premium_example_discount02{
    width: calc((100% - 8em) * 0.45);
    font-size:120%;
}
.premium_example_discount04{
    width: calc((100% - 8em) * 0.2);
    font-size:120%;
}
.premium_example_discount05{
    width: calc((100% - 8em) * 0.25);
    font-size:150%;
}
.premium_example_discount02 small{
    font-size:2rem;
    color:#ff6400;
}

.premium_example_discount03{
    width: calc((100% - 8em) * 0.1);
    font-size: 4rem;
    color: #ff6400;
}

.premium_example_discount p strong{
    color:#ff6400;
    display:block;
}

@media screen and (max-width:640px){
.premium_example{
grid-template-columns: 1fr;
grid-template-rows: repeat(7,auto);
}
.premium_example_img{grid-row:1;grid-column:1;}
.premium_example_text{grid-row: 2; grid-column: 1;}
.premium_example_list{grid-row: 3; grid-column: 1;}
.premium_example_discount{grid-row: 4; grid-column: 1;}
.premium_example_hosho{grid-row: 5; grid-column: 1;}
.premium_example_conditions{grid-row: 6; grid-column: 1;}
.premium_example_detail{grid-row: 7; grid-column: 1;}

.premium_example_list li{padding: 0.5em;
    display: grid;
    grid-template-columns: 60% 1fr;
    width: 100%;
    grid-gap: 0 1em;}
.premium_example_list li span{grid-column:1;}
.premium_example_list li strong{grid-column:2;grid-row:1 / 3;}
.premium_example_discount{
    background: #fff7d6;
    box-sizing: border-box;
    border: solid #ff6400 3px;
    flex-flow: column wrap;}
.premium_example_discount01{    width: 100%;
    background: #ff6400;
    padding: 0.3em;}
.premium_example_discount02{width: 100%;
    font-size: 100%;}
.premium_example_discount03{transform: rotate(90deg);
    width: fit-content;
    height: fit-content;
    line-height: 1.5;
    font-size: 3.0rem;}
.premium_example_discount04{width:100%;}
.premium_example_discount05{width:100%;}

.premium_example_table,
.premium_example_table caption,
.premium_example_table thead,
.premium_example_table tbody,
.premium_example_table tfoot,
.premium_example_table  td,
.premium_example_table  th{display:block;}

.premium_example_table tr{display:flex;flex-flow:row wrap;}
.premium_example_table thead  td:nth-child(1),
.premium_example_table tbody th{width:24%;border:none;}
.premium_example_table thead  td:nth-child(2),
.premium_example_table thead  td:nth-child(3),
.premium_example_table tbody td{width:38%;border:none;}
.premium_example_table tbody td:last-child{width:38%;}
.premium_example_table tfoot tr{flex-flow:column wrap;}
.premium_example_table tfoot td:nth-child(1){width:100%;order:2;padding:0.5em 0.3em;text-align:center;}
.premium_example_table tfoot a{display:inline-block;margin: 8px 8px 0 auto;}
.premium_example_table tfoot td:last-child{order:1;width:100%;}
}