/* ============================================
   c-important
   抽出元: assets/css/top.css, assets/css/common.css
   ============================================ */
.important {
  width: 56rem;
  margin: 0 auto;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .important {
    width: 86%;
  }
}


/* ------------------------------------------
   ベーススタイル
   ------------------------------------------ */

.c-important-body-child {
  margin-left: 0.8vw;
}

.c-important-body-child .c-important-body-group p {
  font-size: 1.2rem;
}

.c-important {
    position: relative;
    background-color: #fff;
    border-radius: 2rem;
    overflow: hidden;
}
@media screen and (max-width: 834px) {
  .c-important {
    border-radius: 0.7rem;
  }
  .c-important-body-child {
    margin-left: 2.5vw;
  }
  .c-important-body-child .c-important-body-group p {
    font-size: 2.6vw;
  }
}

.indent {
  text-indent: -0.8em;
  padding-left: 0.8em;
}

.c-important.is-faq {
    border: 1px solid #000
}

.c-important-header {
    position: relative;
    line-height: 1.6;
    letter-spacing: .15em;
    cursor: pointer;
    background-color: #fff;
    transition: color .1s cubic-bezier(.25, .25, .75, .75)
}

.c-important-header i,
.c-important-header i:after,
.c-important-header i:before {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto
}

.c-important-header i:after,
.c-important-header i:before {
    right: 0;
    left: 0;
    width: 100%;
    content: "";
    background-color: #000;
    transition: background-color .1s cubic-bezier(.25, .25, .75, .75), transform 1s cubic-bezier(.19, 1, .22, 1)
}

.c-important-header i:after {
    transform: rotate(90deg)
}

.c-important-header.is-show i:before {
    transform: rotate(0deg)
}

.c-important-header.is-show i:after {
    transform: rotate(180deg)
}

.c-important-body {
    height: 0;
    overflow: hidden;
    line-height: 1.6;
    letter-spacing: .12em;
    background-color: #ececec;
    transition: height .6s cubic-bezier(.19, 1, .22, 1)
}

.c-important-body-inner {
    position: relative
}

.c-important-body-ttl {
    text-align: center
}

.c-important-body-group p.note {
    color: #9d9d9d
}

.c-important-body-group p small.sanko {
    letter-spacing: 0
}

.c-important-body-group p a {
    text-decoration: underline
}

.c-important {
    margin-top: 0;
}

/* ------------------------------------------
   .p-case-important ラッパー内
   (common.css より)
   ------------------------------------------ */
.p-case-important .c-important {
    margin-top: 0;
}

/* ------------------------------------------
   PC: min-width 834px
   ------------------------------------------ */
@media screen and (min-width: 768px) {
    .c-important {
        margin-top: 6rem
    }

    .c-important+.c-important {
        margin-top: .8rem
    }

    .c-important-header {
        height: 7.5rem;
        padding: 2.4rem 6.4rem 2.2rem 3rem;
        font-size: 2rem
    }

    .c-important-header i {
        right: 3.2rem;
        width: 1.6rem;
        height: 1.6rem
    }

    .c-important-header i:after,
    .c-important-header i:before {
        height: 2px
    }

    .c-important-body {
        font-size: 2rem
    }

    .c-important-body-inner {
        padding: 0rem 3.2rem 2.6rem 3rem
    }

    .c-important-body-ttl {
        font-size: 1.8rem
    }

    .c-important-body-group {
        margin-top: 2.4rem
    }

    .c-important-body-group h5 {
        font-size: 1.8rem
    }

    .c-important-body-group p {
        margin-top: .5rem;
        font-size: 1.4rem
    }

    .c-important-body-group p small {
        font-size: 1.2rem
    }
}

.c-important-header {
  transition: 0.3s;
}

/* ------------------------------------------
   SP: max-width 833px
   ------------------------------------------ */
@media screen and (max-width: 767px) {
    .c-important {
        margin-top: 8vw
    }

    .c-important+.c-important {
        margin-top: 3.2vw
    }

    .c-important-header {
        height: 13.33vw;
        padding: 4vw 12.27vw 2.93vw 5.07vw;
        font-size: 3.73vw;
    }

    .c-important-header i {
        right: 4.8vw;
        width: 3.73vw;
        height: 3.73vw
    }

    .c-important-header i:after,
    .c-important-header i:before {
        height: 0.53vw
    }

    .c-important-body {
        font-size: 3.73vw
    }

    .c-important-body-inner {
        padding: 0.5vw 4.8vw 6.27vw 5.07vw
    }

    .c-important-body-ttl {
        font-size: 3.2vw
    }

    .c-important-body-group {
        margin-top: 4.67vw
    }

    .c-important-body-group h5 {
        font-size: 3.73vw
    }

    .c-important-body-group p {
        margin-top: 1.33vw;
        font-size: 2.93vw
    }

    .c-important-body-group p small {
        font-size: 2.67vw
    }
}

/* ------------------------------------------
   ホバー (hover: hover)
   ------------------------------------------ */
@media (hover: hover) {
    .c-important-header:hover,
    .c-important-header:hover:before {
        opacity: 0.5;
    }

    /* .c-important-header:hover i:after,
    .c-important-header:hover i:before {
        background-color: #d45b41;
    } */
}