@charset "UTF-8";

/* -----------------------------------------------

知っておきたい生命保険の基本 - STEP1

----------------------------------------------- */

/* .bloToStep2Links STEP2へのリンク群
----------------------------------------------- */
.bloToStep2Links {
    padding-top: 20px;
}
.bloToStep2Links > .linkToStep2 {
    position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #333333;
}
.bloToStep2Links > .linkToStep2::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #009cde;
}
.bloToStep2Links > .linkToStep2:hover {
    opacity: 0.8;
}
.bloToStep2Links > .linkToStep2 > .titleToStep2Link {
    font-weight: bold;
}
@media print, screen and (min-width: 768px) {   /* PC */
    .bloToStep2Links {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    .bloToStep2Links > .linkToStep2 {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        width: calc(100% / 3 - 9px);
        border-radius: 12px;
        padding: 25px 40px;
        margin-bottom: 22px;
        font-size: 14px;
        box-shadow: 0 3px 4px 2px rgba(0, 0, 0, 0.25);
    }
    .bloToStep2Links > .linkToStep2 > .titleToStep2Link {
        margin-bottom: 8px;
        font-size: 17px;
    }
}
@media only screen and (max-width: 767px) {     /* SP */
    .bloToStep2Links > .linkToStep2 {
        border-radius: 6px;
        padding: 15px 45px 17px;
        margin: 0 2px 12px;
        font-size: 12px;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
    }
    .bloToStep2Links > .linkToStep2 > .titleToStep2Link {
        margin-bottom: 5px;
        font-size: 16px;
    }
}