@charset "utf-8";
/* CSS Document */
@import url("layout_sp.css");
@media screen and (max-width: 959px) {
  /****************************************** mainimg*/
  #mainimg {
    height: auto;
  }
  #mainimg .inner {
    height: 440px;
  }
  @media screen and (max-width: 768px) {
    #mainimg .inner {
      height: 320px;
    }
  }
  @media screen and (max-width: 560px) {
    #mainimg .inner {
      height: 260px;
    }
  }
  /* ------------------------------ slider*/
  .slider_wrap .slider li {
    height: 440px;
  }
  @media screen and (max-width: 768px) {
    .slider_wrap .slider li {
      height: 320px;
    }
  }
  @media screen and (max-width: 560px) {
    .slider_wrap .slider li {
      text-align: center;
      width: 130% !important;
      height: 260px;
    }
    .slider_wrap .slider li img {
      left: -10%;
    }
  }
  @media screen and (max-width: 840px) {
    .slider_wrap .slider li:nth-child(1) img {
      top: -20%;
    }
  }
  /* ------------------------------ 画像*/
  #mainimg .catch_wrap {
    width: calc(100% - 20px);
    /*top: 45%;*/
    top: -160px;
  }
  #mainimg .catch {
    font-size: 2.8rem;
    line-height: 2.0em;
  }
  #mainimg .catch span {
    padding: 4px 4px 6px 4px;
  }
  @media screen and (max-width: 768px) {
    #mainimg .catch_wrap {
      top: -120px;
    }
    #mainimg .catch {
      font-size: 2.2rem;
    }
  }
  @media screen and (max-width: 560px) {
    #mainimg .catch_wrap {
      top: -100px;
    }
    #mainimg .catch {
      font-size: 2.0rem;
    }
  }
  /****************************************** main*/
  #main {
    width: 100%;
    padding: 40px 0 0 0;
  }
  /****************************************** news*/
  #news {}
  #news .inner {
    display: block;
    width: calc(100% - 40px);
  }
  /**/
  #news .head {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    max-width: 100%;
  }
  #news .head h2 {
    font-size: 2.3rem;
    text-align: left;
    margin: 0 0 20px 0;
    padding: 0 0 0 20px;
  }
  #news .head h2::before {
    width: 82px;
    top: 20px;
    left: -5px;
  }
  #news .head h2::after {
    font-size: 0.9rem;
    text-align: center;
    padding: 0 0 0 20px;
    bottom: -20px;
  }
  /**/
  #news .head .btn::before {
    right: 20px;
  }
  #news .head .btn::after {
    right: 20px;
  }
  #news .head .btn:hover::before, #news .head .btn:hover::after {
    right: 10px;
  }
  #news .head a.more {
    width: 150px;
    margin: 0;
    padding: 14px 0 14px 14px;
    font-size: 1.3rem;
  }
  /**/
  #news .news_list {
    margin: 30px 0 0 0;
  }
  #news .news_list a {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    border-bottom: 1px solid #DDDDDD;
    padding: 15px 0;
  }
  /**/
  #news .news_list a h3 {
    width: 100%;
    margin: 10px 0 0 0;
  }
  /**/
  #news .news_list a .day {
    width: 100px;
    font-size: 1.6rem;
    margin: 0;
    text-align: left;
  }
  #news .news_list a .tag {
    font-size: 1.3rem;
    width: 120px;
    margin: 0;
    padding: 4px 0;
  }
  /****************************************** support*/
  #support {}
  #support .inner {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 40px 0;
    overflow: visible;
  }
  /**/
  #support .head {
    width: calc(100% - 40px);
    margin: 0 auto;
    left: 0;
    display: block;
    padding: 20px 0;
  }
  #support .head h2 {
    font-size: 2.3rem;
    text-align: left;
    margin: 0 0 40px 0;
    padding: 0 0 0 20px;
  }
  #support .head h2::before {
    width: 82px;
    top: 20px;
    left: -5px;
  }
  #support .head h2::after {
    font-size: 0.9rem;
    text-align: center;
    padding: 0 0 0 20px;
    bottom: -20px;
  }
  #support .head p {
    font-size: 1.3rem;
    /*font-size: 1.6rem;*/
  }
  @media screen and (max-width: 520px) {
    #support .head p .sp_s {
      display: block;
    }
  }
  #support .head a.more {}
  /**/
  #support .support_list {
    top: 20px;
    left: 0;
    padding: 20px 0 60px 0;
  }
  /*イラスト左*/
  #support .support_list::before {
    top: -160px;
    left: auto;
    right: 5%;
    background-size: 170px;
    width: 170px;
    height: 166px;
  }
  /*イラスト下*/
  #support .support_list ul::after {
    left: 20%;
    right: auto;
    bottom: -100px;
    background-size: 201px;
    width: 201px;
    height: 114px;
  }
  /* ------------------------------ ボタン*/
  #support .support_list ul {
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 760px;
  }
  #support .support_list ul li {
    width: 280px;
    margin: 10px 15px;
  }
  @media screen and (max-width: 640px) {
    #support .support_list ul li {
      max-width: 210px;
      margin: 10px 13px;
    }
    #support .support_list ul li::before {
      top: 35px;
      right: 15px;
      width: 22px;
    }
    #support .support_list ul li::after {
      top: 31px;
      right: 15px;
    }
    #support .support_list ul li:hover::before, #support .support_list ul li:hover::after {
      right: 5px;
    }
  }
  /*斜め線*/
  #support .support_list ul li span {}
  #support .support_list ul li span::before {
    top: 9px;
  }
  @media screen and (max-width: 640px) {
    #support .support_list ul li span::before {
      top: 7px;
      left: -1px;
      width: 24px;
    }
  }
  /*白背景*/
  #support .support_list ul li a {
    width: 280px;
    font-size: 1.8rem;
  }
  @media screen and (max-width: 640px) {
    #support .support_list ul li a {
      max-width: 210px;
      height: 70px;
      font-size: 1.5rem;
      padding: 12px 0 12px 80px;
    }
  }
  /*左上欠け*/
  @media screen and (max-width: 640px) {
    #support .support_list ul li a::before {
      border-width: 0 0 14px 20px;
    }
  }
  /*アイコン*/
  @media screen and (max-width: 640px) {
    #support .support_list ul li.midcareer a {
      background-position: 12px center;
      background-size: 58px;
    }
    #support .support_list ul li.return a {
      background-position: 20px center;
      background-size: 50px;
    }
    #support .support_list ul li.parenting a {
      background-position: 25px center;
      background-size: 45px;
    }
    #support .support_list ul li.saiyou a {
      background-position: 12px center;
      background-size: 58px;
    }
  }
  /****************************************** banner*/
  #banner {}
  /* ------------------------------ slider*/
  .banner_wrap {
    margin: 20px auto 0 auto;
    padding: 0;
  }
  /* ------------------------------ 画像*/
  #banner .banner_wrap .banner {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #banner .banner_wrap .banner li {
    width: calc(100% / 3);
    max-width: 320px;
  }
  @media screen and (max-width: 640px) {
    #banner .banner_wrap .banner li {
      width: calc(100% / 2);
      max-width: 320px;
    }
  }
  #banner .banner_wrap .banner li span {
    font-size: 2.0rem;
  }
  @media screen and (max-width: 414px) {
    #banner .banner_wrap .banner li span {
      font-size: 1.6rem;
    }
  }
}