/* TABLE OF CONTENTS:
 * 
 * 00 どのサイズでも共通で適用されるスタイル
 *    - 見出し等
 *    - イントロ
 *    - 理由１
 *    - 理由２
 *    - 理由３
 *    - 理由４
 *    - 理由５
 *    - 理由６
 * 01 幅 768px 未満 ( スマホの時だけ適用されるスタイル )
 * 02 幅 480px 以上
 * 03 幅 768px 以上 ( PCの時だけ適用されるスタイル )
 * 04 幅 880px 以上
 * 05 幅 1072px 以上
 * 06 幅 1264px 以上
 */

/* ---------------------------------------------------
   00
 *
 * どのサイズでも共通で適用されるスタイル
 */

/* 見出し、行揃え、フォント */
.reason ul li {
    list-style-type: none;
}

/* イントロ */
section[id*="reason"] h2 + p {
    color: #333;
}

.reason-list a {
    border-radius: 12px;
}

.reason-list a:hover {
    box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.25), 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

/* 理由詳細 */

section#reason-1 h2,
section#reason-2 h2,
section#reason-3 h2,
section#reason-4 h2,
section#reason-5 h2 {
    position: relative;
    background-color: #fff;
    margin-top: 0 !important;
    border-radius: 10px 10px 0 0;
    height: 90px;
    z-index: 1;
}

section#reason-1 h2:before {
    content: "";
    background: url(../img/contents/i-r1.png) no-repeat;
    width: 80px;
    height: 81px;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

section#reason-2 h2:before {
    content: "";
    background: url(../img/contents/i-r2.png) no-repeat;
    width: 80px;
    height: 81px;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

section#reason-3 h2:before {
    content: "";
    background: url(../img/contents/i-r3.png) no-repeat;
    width: 80px;
    height: 81px;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

section#reason-4 h2:before {
    content: "";
    background: url(../img/contents/i-r4.png) no-repeat;
    width: 80px;
    height: 81px;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

section#reason-5 h2:before {
    content: "";
    background: url(../img/contents/i-r5.png) no-repeat;
    width: 80px;
    height: 81px;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.reason-sec .img-l {
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    margin-top: -1px;
    border-top: none;
}

section.reason-sec {
    border: 5px solid #000;
    border-radius: 15px;
}

.appeal {
    font-size: 2rem;
    color: #f51100;
}

/* ------------------------------------------------
   01
 *
 * 幅 768px 未満 ( スマホの時だけ適用されるスタイル )
 */
@media screen and (max-width: 767px) {

    .reason-list li {
        width: 48%;
        padding-bottom: 0.3em;
    }

    .reason-list li:nth-child(1) {
        margin-left: 0;
    }

    .reason-list li:nth-child(2) {
        margin-right: 0;
    }

    /* 理由詳細 */

    section#reason-1 h2,
    section#reason-2 h2,
    section#reason-3 h2,
    section#reason-4 h2,
    section#reason-5 h2 {
        padding: 1.1em 0 0.5em 6em;
        font-size: 1.2em;
    }

    section#reason-1 h2:before,
    section#reason-2 h2:before,
    section#reason-3 h2:before,
    section#reason-4 h2:before,
    section#reason-5 h2:before {
        position: absolute;
        left: 0.4em;
        bottom: 0.2em;
    }

    .reason-sec .img-l .cont {
        padding: 0 1em 1em;
    }

    .reason-sec .img-l .image {
        padding-top: 1em;
    }
}

/* End max 767px */



/* ------------------------------------------------
   02
 *
 * 幅 480px 以上
 */

@media screen and (min-width: 30em) {
    /* ●●● */
}

/* End min 480px*/



/* ------------------------------------------------
   03
 *
 * 幅 768px 以上 ( PCの時だけ適用されるスタイル )
 */
@media screen and (min-width: 48em) {

    /* 理由詳細 */

    .appeal {
        font-size: 2.4rem;
    }

    .outline {
        display: inline-block;
        letter-spacing: 4px;
        /* 文字間 */
        text-shadow:
            2px 2px 1px #ffffff,
            -2px 2px 1px #ffffff,
            2px -2px 1px #ffffff,
            -2px -2px 1px #ffffff,
            2px 0px 1px #ffffff,
            0px 2px 1px #ffffff,
            -2px 0px 1px #ffffff,
            0px -2px 1px #ffffff;
        /* 文字の影 */
    }

    .reason-appeal p {
        background-color: #fff9c4;
        border-radius: 20px;
        max-width: 820px;
        margin-right: auto;
        margin-left: auto;
        padding: 20px;
        position: relative;
        font-size: 1.6rem;
    }

    .reason-appeal p:before {
        content: "";
        background: url(../img/contents/reason-p2.png) no-repeat;
        width: 80px;
        height: 80px;
        background-size: 40px auto;
        position: absolute;
        left: 3em;
        bottom: 0.5em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .reason-appeal p:after {
        content: "";
        background: url(../img/contents/reason-p.png) no-repeat;
        width: 110px;
        height: 110px;
        background-size: 110px auto;
        position: absolute;
        right: 1em;
        bottom: -0.4em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    section#reason-1 h2,
    section#reason-2 h2,
    section#reason-3 h2,
    section#reason-4 h2,
    section#reason-5 h2 {
        padding: 1em 0 0.75em 3.8em;
        font-size: 1.63em;
    }

    section#reason-1 h2:before,
    section#reason-2 h2:before,
    section#reason-3 h2:before,
    section#reason-4 h2:before,
    section#reason-5 h2:before {
        position: absolute;
        left: 0.5em;
        bottom: 0em;
    }

    .reason-sec .img-l .cont {
        padding: 0 2em 1.5em 0;
    }

    .reason-sec .img-l .image {
        margin: 1em 1em 1.5em 1em !important;
        padding-top: 0;
    }
}

/* End min 768px */


/* --------------------------------------------------
   04
 *
 * 幅 880px 以上
 */
@media screen and (min-width: 55em) {

    section#reason-1 h2,
    section#reason-2 h2,
    section#reason-3 h2,
    section#reason-4 h2,
    section#reason-5 h2 {
        padding: 1em 0 0.75em 5em;
    }

    section#reason-1 h2:before,
    section#reason-2 h2:before,
    section#reason-3 h2:before,
    section#reason-4 h2:before,
    section#reason-5 h2:before {
        left: 1em;
    }
}

/* End min 880px */



/* --------------------------------------------------
   05
 *
 * 幅 1072px 以上
 */
@media screen and (min-width: 67em) {
    /* ここにスタイル */

}

/* End min 1072px */



/* --------------------------------------------------
   06
 *
 * 幅 1264px 以上
 */
@media screen and (min-width: 79em) {

    /* ここにスタイル */

}

/* End min 1264px */