@charset "utf-8";
/* CSS Document */
@import url("layout_sp.css");
@media screen and (max-width: 1023px) {
  /* **************************************************************

 *  

*************************************************************** */
  body {
    font-size: 1.6rem;
    line-height: 1.8;
  }
  /* **************************************************************

 * main

*************************************************************** */
  main {}
  /* **************************************************************

 * mainimg

*************************************************************** */
  #mainimg {}
  #mainimg .inner {
    display: block;
  }
  #mainimg .visual {
    text-align: center;
    margin: 20px 0 0 0;
    width: auto;
  }
  /* -------------------- catch*/
  #mainimg .catch_wrap {
    display: block;
  }
  /**/
  #mainimg .catch {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  #mainimg .catch p:first-of-type {}
  @media screen and (max-width: 575px) {
    #mainimg .catch p:first-of-type {
      font-size: 1.6rem;
      letter-spacing: 0.2em;
    }
  }
  @media screen and (max-width: 420px) {
    #mainimg .catch p:first-of-type {
      font-size: 1.4rem;
    }
  }
  #mainimg .catch p:nth-of-type(2) {
    font-size: 5.0rem;
    letter-spacing: 0.02em;
  }
  @media screen and (max-width: 575px) {
    #mainimg .catch p:nth-of-type(2) {
      font-size: 4.2rem;
      letter-spacing: 0em;
    }
  }
  @media screen and (max-width: 420px) {
    #mainimg .catch p:nth-of-type(2) {
      font-size: 3.2rem;
    }
  }
  #mainimg .catch p:nth-of-type(3) {
    padding: 0;
  }
  @media screen and (max-width: 575px) {
    #mainimg .catch p:nth-of-type(3) {
      font-size: 1.6rem;
      letter-spacing: 0.2em;
    }
  }
  @media screen and (max-width: 420px) {
    #mainimg .catch p:nth-of-type(3) {
      font-size: 1.4rem;
    }
  }
  #mainimg .catch p:nth-of-type(3)::before {
    display: none;
  }
  /* -------------------- bx-controls*/
  @media screen and (max-width: 575px) {
    .card_wrap .bx-wrapper .bx-controls-direction .bx-prev, .card_wrap .bx-wrapper .bx-controls-direction .bx-next {
      top: 15px;
    }
  }
  /* -------------------- 中身*/
  .card_wrap {
    margin: 0 auto;
  }
  @media screen and (max-width: 767px) {
    .card_wrap ul.card {
      margin: 0;
    }
  }
  @media screen and (max-width: 767px) {
    .card_wrap ul.card li {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding: 30px 25px 0 25px;
    }
  }
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li {
      min-height: 160px;
    }
  }
  @media screen and (max-width: 420px) {
    .card_wrap ul.card li {
      padding: 40px 25px 0 25px;
      min-height: 170px;
    }
  }
  /**/
  .card_wrap ul.card li a .tag {
    right: 20px;
  }
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li a .tag {
      font-size: 1.4rem;
      padding: 8px 0 2px 0;
    }
  }
  /* -------------------- 画像*/
  .card_wrap ul.card li a .box .poster {}
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li a .box .poster {
      top: -20px;
      width: 80px;
      height: 110px;
      background-size: 60px;
    }
  }
  /* -------------------- 中身*/
  .card_wrap ul.card li a .box dl {
    width: calc(100% - 125px);
  }
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li a .box dl {
      width: calc(100% - 100px);
    }
  }
  /*日付*/
  .card_wrap ul.card li a .box dl dt {}
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li a .box dl dt {
      display: block;
    }
  }
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li a .box dl dt .date, .card_wrap ul.card li a .box dl dt .date span {
      font-size: 1.5rem;
    }
  }
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li a .box dl dt .date {
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      margin: 0 0 10px 0;
    }
  }
  /*カテゴリ*/
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li a .box dl dt .cate {
      display: inline;
      margin: 0;
      padding: 4px 10px 6px 10px;
    }
  }
  @media screen and (max-width: 389px) {
    .card_wrap ul.card li a .box dl dt .cate {
      font-size: 1.1rem;
    }
  }
  /*タイトル*/
  @media screen and (max-width: 575px) {
    .card_wrap ul.card li a .box dl dd {
      margin: 10px 0 0 0;
      font-size: 1.4rem;
      line-height: 1.5em;
      -webkit-line-clamp: 2;
    }
  }
  @media screen and (max-width: 389px) {
    .card_wrap ul.card li a .box dl dd {
      font-size: 1.3rem;
    }
  }
  /* **************************************************************

 * news

*************************************************************** */
  #news {}
  #news .inner {
    padding: 10px 0 40px 0;
  }
  /* -------------------- タブ*/
  #news .tab_box {
    margin: 20px auto;
  }
  input[type="radio"] {}
  #news .tab_area {}
  @media screen and (max-width: 767px) {
    #news .tab_area {
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      border-bottom: none;
    }
  }
  #news .tab_area label {
    font-size: 1.5rem;
    background-color: #eee;
  }
  @media screen and (max-width: 767px) {
    #news .tab_area label {
      width: 30%;
      border-radius: 100vh;
      margin: 0 12px 12px 0;
      padding: 8px 0;
    }
  }
  @media screen and (max-width: 575px) {
    #news .tab_area label {
      width: 47%;
      font-size: 1.4rem;
      margin: 0 8px 10px 0;
    }
  }
  @media screen and (max-width: 767px) {
    #news .tab_area label:hover::after, #news .tab_area label:hover::before {
      display: none;
    }
  }
  @media screen and (max-width: 767px) {
    #news .tab_area label:hover {
      background-color: var(--bl);
      color: #fff;
    }
  }
  @media screen and (max-width: 767px) {
    #tab1:checked ~ .tab_area .tab1_label, #tab2:checked ~ .tab_area .tab2_label, #tab3:checked ~ .tab_area .tab3_label, #tab4:checked ~ .tab_area .tab4_label, #tab5:checked ~ .tab_area .tab5_label {
      background-color: var(--bl);
      color: #fff;
    }
    #tab1:checked ~ .tab_area .tab1_label::before, #tab2:checked ~ .tab_area .tab2_label::before, #tab3:checked ~ .tab_area .tab3_label::before, #tab4:checked ~ .tab_area .tab4_label::before, #tab5:checked ~ .tab_area .tab5_label::before {
      display: none;
    }
    #tab1:checked ~ .tab_area .tab1_label::after, #tab2:checked ~ .tab_area .tab2_label::after, #tab3:checked ~ .tab_area .tab3_label::after, #tab4:checked ~ .tab_area .tab4_label::after, #tab5:checked ~ .tab_area .tab5_label::after {
      display: none;
    }
  }
  /* -------------------- 中身*/
  .panel_area {
    margin: 20px 0;
  }
  .panel_area .tab_panel {}
  /* ------------------------------ news*/
  /*---------- タグ*/
  #news .info_list .tag {
    padding: 15px 0 4px 0;
  }
  @media screen and (max-width: 575px) {
    #news .info_list .tag {
      padding: 12px 0 4px 0;
      right: 20px;
      font-size: 1.6rem;
    }
  }
  /*---------- 枠*/
  #news .info_list .box {
    padding: 25px 30px;
  }
  @media screen and (max-width: 575px) {
    #news .info_list .box {
      padding: 25px 25px;
    }
  }
  #news .info_list .box:hover {}
  /* -------------------- 矢印*/
  /* -------------------- 中身*/
  #news .info_list .box dl {
    display: block;
  }
  /*日付*/
  #news .info_list .box dl dt {}
  @media screen and (max-width: 480px) {
    #news .info_list .box dl dt {
      display: block;
    }
  }
  #news .info_list .box dl dt .date, #news .info_list .box dl dt .date span {}
  #news .info_list .box dl dt .date {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }
  @media screen and (max-width: 575px) {
    #news .info_list .box dl dt .date {
      font-size: 2.0rem;
    }
  }
  #news .info_list .box dl dt .date span {
    margin: 0 .5em 0 0;
  }
  /* -------------------- カテゴリ*/
  #news .info_list .box dl dt .cate {
    font-size: 1.3rem;
  }
  @media screen and (max-width: 575px) {
    #news .info_list .box dl dt .cate {
      margin: 0 15px;
      padding: 8px 0;
    }
  }
  @media screen and (max-width: 480px) {
    #news .info_list .box dl dt .cate {
      margin: 10px 0 0 0;
      padding: 8px 0;
    }
  }
  /* -------------------- タイトル*/
  #news .info_list .box dl dd {
    padding: .5em 0 0 0;
  }
  @media screen and (max-width: 575px) {
    #news .info_list .box dl dd {
      padding: .5em 0 0 0;
      -webkit-line-clamp: 3;
      font-size: 1.4rem;
    }
  }
  /* **************************************************************

 * role

*************************************************************** */
  #role {}
  #role .inner {
    padding: 20px 0 0 0;
  }
  /**/
  #role .message {
    margin: 30px 0;
    line-height: 2.0em;
  }
  #role .message em {
    font-size: 3.8rem;
  }
  #role .message em::before {}
  #role .message span {
    font-size: 3.8rem;
  }
  /* -------------------- list*/
  #role .list {
    border-radius: 80px;
    padding: 30px;
  }
  @media screen and (max-width: 575px) {
    #role .list {
      border-radius: 40px;
      padding: 20px;
    }
  }
  #role .list ol {}
  @media screen and (max-width: 575px) {
    #role .list ol {
      display: block;
    }
  }
  #role .list ol li {
    width: calc(100% / 2);
    padding: 15px 0;
  }
  @media screen and (max-width: 575px) {
    #role .list ol li {
      width: 100%;
      border-left: none;
    }
    #role .list ol li br {
      display: none;
    }
  }
  #role .list ol li:nth-child(3), #role .list ol li:nth-child(7) {
    border-left: none;
  }
  #role .list ol li:nth-child(5), #role .list ol li:nth-child(6), #role .list ol li:nth-child(7), #role .list ol li:nth-child(8) {
    border-bottom: 2px dashed #ccc;
  }
  #role .list ol li:nth-child(7), #role .list ol li:nth-child(8) {
    border-bottom: none;
  }
  @media screen and (max-width: 575px) {
    #role .list ol li:nth-child(7) {
      border-bottom: 2px dashed #ccc;
    }
  }
  #role .list ol li:before {}
  /* -------------------- training*/
  #role .training {
    padding: 20px 0;
  }
  #role .training ul {}
  @media screen and (max-width: 575px) {
    #role .training ul {
      display: block;
    }
  }
  #role .training ul li {
    margin: 5px;
  }
  @media screen and (max-width: 575px) {
    #role .training ul li {
      width: 100%;
      max-width: 380px;
      margin: 10px auto;
    }
  }
  #role .training ul li a {}
  #role .training ul li a h2 {
    font-size: 1.6rem;
    padding: 25px 20px 25px 0;
  }
  @media screen and (max-width: 575px) {
    #role .training ul li a h2 {
      font-size: 1.8rem;
    }
  }
  #role .training ul li a h2::before {
    width: 6px;
    height: 6px;
    right: 20px;
    top: calc(50% - 2px);
  }
  #role .training ul li a h2::after {
    width: 10px;
    right: 22px;
  }
  #role .training ul li a::after {
    width: 30px;
    height: 30px;
    right: -8px;
    bottom: 17px;
  }
  /* **************************************************************

 * banner

*************************************************************** */
  #banner {}
  #banner .inner {
    text-align: center;
    padding: 20px 0;
  }
  /**/
  #banner .inner ul {
    display: block;
  }
  #banner .inner ul li {}
  #banner .inner ul li img {}
  #banner .inner ul li a {}
}