.c5-wrap a {
  display: block; }

.c5-wrap h1 {
  margin-bottom: 0; }

.c5__nav_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 30px; }
  .c5__nav_wrap a {
    width: 16.67%;
    max-width: 200px; }
    .c5__nav_wrap a img {
      width: 100%; }

.c5__nav_wrap2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 30px; }
  .c5__nav_wrap2 a {
    width: 16.67%;
    max-width: 200px; }
    .c5__nav_wrap2 a img {
      width: 100%; }

.c5__contents_wrap {
  border-radius: 12px;
  margin-bottom: 130px;
  padding: 20px 20px 60px; }
  .c5__contents_wrap.sec1 {
    background-color: #fff4ed; }
  .c5__contents_wrap.sec2 {
    background-color: #fff7fa; }
  .c5__contents_wrap.sec3 {
    background-color: #f2fbfe; }
  .c5__contents_wrap.sec4 {
    background-color: #eefaf6; }
  .c5__contents_wrap.sec5 {
    background-color: #f9f7fc; }
  .c5__contents_wrap.sec6 {
    background-color: #fefaf2; }
  .c5__contents_wrap.sec7 {
    border: 4px solid #00d8a8; }
  .c5__contents_wrap.sec8 {
    border: 4px solid #0061d8; }
  .c5__contents_wrap h2 {
    margin-bottom: 45px; }
  .c5__contents_wrap .c5__content_txt {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 45px; }

.c5__flexbox {
  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; }
  .c5__flexbox a {
    width: 30%;
    max-width: 293px;
    height: auto;
    margin: 0 3.45%; }

.sec2 .c5__flexbox {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start; }
  .sec2 .c5__flexbox a span {
    display: block;
    margin-top: 5px;
    text-align: right;
    font-size: 16px; }

.sec4 {
  padding-bottom: 30px; }
  .sec4 .c5__flexbox {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .sec4 .c5__flexbox a {
      margin-bottom: 30px; }
      .sec4 .c5__flexbox a span {
        display: block;
        margin-top: 5px;
        font-size: 12px;
        color: #666; }

.sec7 {
  padding-top: 25px;
  padding-bottom: 30px; }

a.c5__link {
  max-width: 350px;
  border-radius: 6px;
  margin: 0 auto;
  padding: 6px 10px 6px 2em;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  background: url("../common/img/icn_arrow.png") no-repeat 5% 50% #4089e2;
  background-size: auto; }
  a.c5__link:hover {
    color: #fff; }
  a.c5__link.top {
    margin-bottom: 50px; }

.sec8 {
  padding: 25px 6.2% 60px; }

.c5__q_top {
  max-width: 1000px;
  margin: 0 auto 35px; }
  .c5__q_top li {
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 15px;
    padding-bottom: 10px;
    font-size: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .c5__q_top li .c5__icn {
      display: block;
      width: 40px;
      height: 40px;
      background: url("../img/icn_q.png") no-repeat center center;
      background-size: contain;
      margin-left: 1em; }
    .c5__q_top li a {
      width: 85%;
      margin-left: 1em; }

.c5__other_q {
  padding-top: 45px;
  border-top: 2px solid #0061d8; }
  .c5__other_q h3 {
    font-size: 28px;
    color: #0061d8;
    text-align: center;
    margin-bottom: 50px; }
  .c5__other_q .c5__flexbox {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .c5__other_q .c5__flexbox .c5__link {
      margin: 0 3.8% 30px;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }

.js-nav-wrap {
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  position: fixed;
  top: -800px;
  width: 100%; }
  .js-nav-wrap.fixed {
    top: 0;
    z-index: 10; }
  .js-nav-wrap .c5__nav_wrap {
    margin-bottom: 0; }

.scroll-nav {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0; }
  .scroll-nav a {
    text-decoration: none;
    background-color: #fff; }
    .scroll-nav a img {
      -webkit-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s; }
      .scroll-nav a img:hover {
        opacity: .5; }

.hide {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%); }

@media screen and (max-width: 768px) {
  .c5-wrap {
    padding: 0; }
    .c5-wrap h1 {
      max-width: 97%;
      margin: 0 auto; }
  .c5__nav_wrap {
    margin-bottom: 20px; }
  .c5__nav_wrap2 {
    margin-bottom: 20px; }
  .c5__contents_wrap {
    border-radius: 0;
    margin-bottom: 100px;
    padding: 10px 10px 20px; }
    .c5__contents_wrap.sec7 {
      border-width: 2px; }
    .c5__contents_wrap.sec8 {
      border-width: 2px; }
    .c5__contents_wrap h2 {
      margin-bottom: 40px; }
    .c5__contents_wrap .c5__content_txt {
      font-size: 24px;
      margin-bottom: 60px; }
  .c5__flexbox {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .c5__flexbox a {
      width: 39%;
      max-width: 100%;
      height: auto;
      margin: 0 3.45% 40px; }
  .sec2 .c5__flexbox a span {
    font-size: 11px; }
  .sec7 {
    width: 97%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    padding-top: 25px; }
  .sec8 {
    width: 97%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    padding: 25px 6.2% 60px; }
  a.c5__link {
    width: 60%;
    max-width: 100%;
    padding: 10px 10px 10px 2em;
    font-size: 24px; }
  .c5__q_top {
    max-width: 800px;
    margin: 0 auto 35px; }
    .c5__q_top li .c5__icn {
      margin-left: 1em; }
    .c5__q_top li a {
      margin-left: 1em; }
  .c5__other_q {
    padding-top: 45px;
    border-top: 1px solid #0061d8; }
    .c5__other_q h3 {
      font-size: 28px;
      margin-bottom: 50px; }
    .c5__other_q .c5__flexbox {
      display: block; }
      .c5__other_q .c5__flexbox .c5__link {
        margin: 0 auto; }
        .c5__other_q .c5__flexbox .c5__link:not(:last-child) {
          margin-bottom: 40px; }
  .scroll-nav a {
    background: none; }
    .scroll-nav a img:hover {
      opacity: 1; } }

@media screen and (max-width: 450px) {
  .c5__nav_wrap {
    margin-bottom: 15px; }
  .c5__nav_wrap2 {
    margin-bottom: 15px; }
  .c5__contents_wrap {
    margin-bottom: 50px;
    padding: 10px 10px 10px; }
    .c5__contents_wrap.sec7 {
      border-width: 1px; }
    .c5__contents_wrap.sec8 {
      border-width: 1px; }
    .c5__contents_wrap h2 {
      margin-bottom: 20px; }
    .c5__contents_wrap .c5__content_txt {
      font-size: 12px;
      margin-bottom: 30px; }
  .c5__flexbox a {
    width: 46%;
    margin: 0 2% 20px; }
  .sec4 {
    padding-bottom: 10px; }
    .sec4 .c5__flexbox a {
      margin-bottom: 20px; }
      .sec4 .c5__flexbox a span {
        font-size: 10px; }
  .sec7 {
    padding-top: 20px; }
    .sec7 h2 img {
      max-width: 85%; }
  .sec8 {
    padding-top: 20px;
    padding-bottom: 25px; }
    .sec8 h2 img {
      max-width: 40%; }
  a.c5__link {
    width: 65%;
    padding: 5px 5px 5px 3.5em;
    font-size: 12px;
    background-size: 6%; }
    a.c5__link.top {
      margin-bottom: 30px; }
  .c5__q_top {
    margin-bottom: 20px; }
    .c5__q_top li {
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      margin-bottom: 10px;
      padding-bottom: 8px;
      font-size: 12px; }
      .c5__q_top li .c5__icn {
        display: block;
        width: 20px;
        height: 20px;
        margin-left: 0; }
      .c5__q_top li a {
        width: 90%;
        margin-left: 1em; }
  .c5__other_q {
    padding-top: 20px; }
    .c5__other_q h3 {
      font-size: 14px;
      margin-bottom: 10px; }
    .c5__other_q .c5__flexbox .c5__link:not(:last-child) {
      margin-bottom: 20px; } }
