@charset "UTF-8";
/* CSS Document */
.topimg {
  aspect-ratio: 11 / 7; }

.tb_line {
  text-align: center;
  position: relative;
  color: #06589f;
  padding: 10px 20px;
  margin: 10px 0; }
  .tb_line::before {
    content: "";
    height: 2px;
    background: #06589f;
    display: block;
    position: absolute;
    left: 20%;
    right: 20%;
    top: 0;
    margin: auto; }
    @media (min-width: 768px) {
      .tb_line::before {
        left: 200px;
        right: 200px; } }
  .tb_line::after {
    content: "";
    height: 2px;
    background: #06589f;
    display: block;
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    margin: auto; }
    @media (min-width: 768px) {
      .tb_line::after {
        left: 200px;
        right: 200px; } }
  @media (min-width: 768px) {
    .tb_line {
      margin: 60px 0; } }

.page_img {
  margin-top: -100px; }
  .page_img .catch_img {
    position: absolute;
    width: 100%;
    aspect-ratio: 11 / 4;
    z-index: 1;
    bottom: 0; }
    .page_img .catch_img img {
      filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5)); }
  .page_img .buttons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1em;
    text-align: center;
    margin: auto;
    z-index: 850;
    display: inline;
    line-height: 2em;
    border-radius: 4px;
    padding: 5px; }
    @media (min-width: 768px) {
      .page_img .buttons {
        left: auto;
        right: 0;
        bottom: -4em; } }
    .page_img .buttons span.button {
      background: #fff;
      width: 1em;
      height: 1em;
      line-height: 1em;
      display: inline-block;
      border-radius: 3em;
      cursor: pointer;
      transition: 300ms ease;
      vertical-align: middle;
      margin: 5px;
      box-shadow: 0px 0px 5px 3px rgba(6, 88, 159, 0.5); }
      .page_img .buttons span.button.now {
        background: #06589f;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 1.5rem; }
      .page_img .buttons span.button:hover {
        background: rgba(6, 88, 159, 0.7); }
    .page_img .buttons span.pause, .page_img .buttons span.play, .page_img .buttons span.next, .page_img .buttons span.prev {
      color: white;
      height: 1em;
      width: 1.0em;
      line-height: 1em;
      cursor: pointer;
      display: inline-block;
      font-size: 1.8rem;
      transition: 300ms ease;
      vertical-align: middle;
      text-shadow: 0px 0px 5px rgba(6, 88, 159, 0.5); }
      .page_img .buttons span.pause:hover, .page_img .buttons span.play:hover, .page_img .buttons span.next:hover, .page_img .buttons span.prev:hover {
        color: #06589f; }

.top_content {
  background: url(../img/bg.webp); }

.news {
  position: relative;
  height: 300px;
  pointer-events: none;
  padding: 20px; }
  @media (min-width: 768px) {
    .news {
      background: none; }
      .news::after {
        content: "";
        background: url(../img/news_bg.webp);
        display: block;
        width: 307px;
        background-size: contain;
        position: absolute;
        aspect-ratio: 10 / 5;
        right: 160px;
        top: -40px; } }
  .news .news_box {
    pointer-events: auto;
    width: 100%;
    margin: auto;
    box-shadow: 0 0 8px rgba(6, 88, 159, 0.5);
    background: #fff;
    border-radius: 10px; }
    @media (min-width: 768px) {
      .news .news_box {
        position: absolute;
        width: 50%;
        top: -100px;
        left: 40px; } }
    .news .news_box .flex_title {
      padding: 10px 25px;
      display: flex;
      justify-content: space-between;
      font-size: 1.4rem; }
      .news .news_box .flex_title .pagelink {
        position: relative; }
        .news .news_box .flex_title .pagelink::before {
          position: absolute;
          left: -25px;
          content: "";
          display: inline-block;
          border-radius: 30px;
          background: linear-gradient(70deg, #8bc120 0%, #00913a 100%);
          width: 20px;
          height: 20px; }
        .news .news_box .flex_title .pagelink::after {
          position: absolute;
          left: -19px;
          top: 4px;
          content: "";
          display: inline-block;
          width: 10px;
          aspect-ratio: cos(30deg)/1;
          clip-path: polygon(0 0, 0% 100%, 100% 50%);
          background: #fff;
          display: block; }
    .news .news_box .news_list {
      padding: 15px;
      font-size: 1.2rem; }
      @media (min-width: 768px) {
        .news .news_box .news_list {
          padding: 0 25px 25px;
          font-size: 1.8rem; } }
      .news .news_box .news_list dl {
        display: flex;
        flex-direction: column;
        position: relative;
        border-bottom: 1px dashed #000;
        padding: 5px 0;
        margin: 5px 0; }
        .news .news_box .news_list dl dd {
          width: calc(100% - 6.5em); }
          .news .news_box .news_list dl dd i {
            background: #65ba00;
            position: absolute;
            right: 0;
            color: #fff;
            width: 1.5em;
            height: 1.5em;
            border-radius: 30px;
            text-align: center;
            line-height: 1.5em; }
      .news .news_box .news_list .category_icon {
        font-size: .8em;
        padding: 2px 1em;
        border-radius: 4px;
        background: linear-gradient(135deg, var(--bg-color, #666) 0%, var(--bg-color2, #666) 100%);
        /* 第2引数は未定義時のフォールバック */
        color: var(--text-color, #fff);
        /* 第2引数は未定義時のフォールバック */ }
        .news .news_box .news_list .category_icon i {
          font-style: normal; }

.page_link {
  text-align: center; }
  .page_link a {
    display: inline-block;
    padding: 5px 30px;
    border-radius: 50px;
    border: 1px solid #06589f;
    background: yellow;
    font-size: 1.6rem;
    margin: 20px auto; }

.catch {
  position: relative;
  background: linear-gradient(to bottom, transparent 0%, transparent 10%, #fff 30%);
  text-align: center;
  margin: 0 auto 50px; }
  @media (min-width: 768px) {
    .catch {
      margin-top: -100px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between; }
      .catch .article {
        flex-grow: 1.5;
        margin: 0 15px; }
        .catch .article h2 {
          font-size: 3rem; }
        .catch .article p {
          font-size: 1.6rem; } }
  .catch h2 {
    font-size: 2.2rem; }
  .catch p {
    font-size: 1.6rem; }
  .catch img {
    width: 100%; }
    .catch img.top_image {
      filter: drop-shadow(0px 0px 4px white); }
    .catch img.bottom_image {
      width: 280px; }

.school {
  padding: 10px 20px 20px;
  position: relative; }
  @media (min-width: 768px) {
    .school {
      padding: 30px 20px 20px; } }
  .school .img_bg {
    width: 20%; }
    @media (min-width: 768px) {
      .school .img_bg {
        width: auto; } }
  .school .bg1 {
    position: absolute;
    left: 0;
    top: 0; }
  .school .bg2 {
    position: absolute;
    right: 0;
    top: 0; }

.school_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px; }
  @media (min-width: 768px) {
    .school_list {
      grid-template-columns: 1fr 1fr 1fr; } }
  .school_list .card {
    font-size: 1.8rem;
    transition: 0.3s ease-in-out;
    border-radius: 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    background: #fff; }
    .school_list .card .imgbox {
      display: block;
      border-radius: 8px 8px 0 0;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden; }
      .school_list .card .imgbox img {
        display: block;
        border-radius: 8px 8px 0 0;
        width: 100%;
        aspect-ratio: 16 / 9;
        transform: scale(1.2, 1.2);
        transform-origin: top center;
        transition: .7s all;
        object-fit: cover;
        object-position: center; }
    .school_list .card h2 {
      color: #00913a;
      text-align: center;
      margin: 0;
      transition: 0.3s ease-in-out;
      background: #fff;
      position: relative;
      border: 0;
      border-radius: 0 0 8px 8px;
      font-size: 2.2rem; }
      .school_list .card h2::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(70deg, #00913a 0%, #8bc120 100%);
        opacity: 0;
        transition: opacity 0.5s;
        z-index: -1;
        border-radius: 0 0 8px 8px; }
    .school_list .card p {
      padding: 5px;
      color: #000;
      font-size: 1.6rem; }
    .school_list .card:hover {
      transform: translateY(-2px);
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); }
      .school_list .card:hover .imgbox img {
        transform: scale(1.1, 1.1);
        transition: .7s all; }
      .school_list .card:hover h2 {
        color: #fff;
        background: #00913a; }
        .school_list .card:hover h2::before {
          opacity: 1; }

.training_camp {
  padding: 30px 20px 60px;
  position: relative;
  background-image: url("/img/index/training_camp_lb.svg"), url("/img/index/training_camp_tr.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, top right;
  background-size: 150px,150px;
  background-color: #f8fdfe; }
  .training_camp .img_bg {
    width: 20%; }
    @media (min-width: 768px) {
      .training_camp .img_bg {
        width: auto; } }
  .training_camp .bg1 {
    position: absolute;
    left: 0;
    top: 0; }
  .training_camp .bg2 {
    position: absolute;
    right: 0;
    bottom: 0; }
  @media (min-width: 768px) {
    .training_camp {
      background-size: 400px,400px; } }
  .training_camp .training_box {
    padding: 10px 20px; }
    @media (min-width: 768px) {
      .training_camp .training_box {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 50% 1fr;
        grid-template-rows: auto 1fr;
        gap: 0px 0px;
        grid-template-areas: "title title" "img article";
        margin: 0 auto 20px;
        gap: 0 30px;
        width: calc(100% - 350pz);
        max-width: 750px; }
        .training_camp .training_box .img {
          grid-area: img; }
        .training_camp .training_box .title {
          grid-area: title; }
        .training_camp .training_box .article {
          grid-area: article; } }
    .training_camp .training_box .img img {
      width: 100%; }
    .training_camp .training_box .title {
      color: #8bc120;
      border-bottom: 2px solid #06589f; }
    .training_camp .training_box .article dl {
      font-size: 1.6rem;
      display: flex;
      margin-bottom: 5px;
      flex-direction: column; }
      @media (min-width: 768px) {
        .training_camp .training_box .article dl {
          flex-direction: row;
          justify-content: space-between; } }
      .training_camp .training_box .article dl dt {
        color: #06589f;
        background: #cddeec;
        font-weight: bold;
        padding: 5px; }
        @media (min-width: 768px) {
          .training_camp .training_box .article dl dt {
            width: 5em;
            text-align: center; } }
      @media (min-width: 768px) {
        .training_camp .training_box .article dl dd {
          width: calc(100% - 6em);
          text-align: left; } }

.main_col .inner:first-of-type .site_links {
  margin-top: 100px; }
  @media (min-width: 768px) {
    .main_col .inner:first-of-type .site_links {
      margin-top: 300px; } }

.site_links {
  position: relative;
  background: #eee;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px 20px 80px;
  margin-bottom: -60px; }
  @media (min-width: 768px) {
    .site_links {
      padding: 20px 80px 80px;
      margin-bottom: -60px;
      grid-template-columns: 1fr 1fr; } }
  .site_links::before {
    content: "";
    width: 40%;
    aspect-ratio: 1 / 1;
    position: absolute;
    background: #eee;
    top: -40px;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 50%; }
  .site_links .block h2 {
    position: relative;
    width: 100%;
    padding: 12px 16px;
    border-bottom: 2px solid #06589f;
    background-color: #eee;
    isolation: isolate;
    text-align: center;
    margin: 0 0 20px; }
    .site_links .block h2::before {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 50%;
      width: 17px;
      height: 17px;
      box-sizing: border-box;
      background-color: #eee;
      /* 背景色と同じ色を指定 */
      rotate: 135deg;
      translate: -50% 0; }
    .site_links .block h2::after {
      content: "";
      position: absolute;
      bottom: -9px;
      left: 50%;
      z-index: -1;
      width: 17px;
      height: 17px;
      box-sizing: border-box;
      border: 2px solid;
      border-color: #06589f #06589f transparent transparent;
      background-color: #ffffff;
      rotate: 135deg;
      translate: -50% 0; }
  .site_links .block .card {
    font-size: 1.8rem;
    transition: 0.3s ease-in-out;
    border-radius: 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    background: #fff; }
    .site_links .block .card .imgbox {
      display: block;
      border-radius: 8px 8px 0 0;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden; }
      .site_links .block .card .imgbox img {
        display: block;
        border-radius: 8px 8px 0 0;
        width: 100%;
        aspect-ratio: 16 / 9;
        transform: scale(1.2, 1.2);
        transform-origin: top center;
        transition: .7s all;
        object-fit: cover;
        object-position: center; }
    .site_links .block .card h2 {
      color: #00913a;
      text-align: center;
      margin: 0;
      transition: 0.3s ease-in-out; }
    .site_links .block .card p {
      padding: 5px;
      color: #fff;
      font-size: 1.6rem;
      text-align: right;
      background: linear-gradient(70deg, #00913a 0%, #8bc120 100%);
      border-radius: 0 0 8px 8px;
      position: relative;
      padding-right: 40px; }
      .site_links .block .card p::before {
        position: absolute;
        right: 10px;
        content: "";
        display: inline-block;
        border-radius: 30px;
        background: #fff;
        width: 25px;
        height: 25px;
        margin: auto;
        top: 0;
        bottom: 0; }
      .site_links .block .card p::after {
        position: absolute;
        right: 15px;
        top: 12px;
        content: "";
        display: inline-block;
        width: 12px;
        aspect-ratio: cos(30deg)/1;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        background: #8bc120;
        display: block;
        margin: auto; }
    .site_links .block .card:hover {
      transform: translateY(-2px);
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); }
      .site_links .block .card:hover .imgbox img {
        transform: scale(1.1, 1.1);
        transition: .7s all; }
      .site_links .block .card:hover h2 {
        color: #fff;
        background: #00913a;
        text-align: center;
        margin: 0; }

.bg_box {
  background-color: #eaf4f9;
  opacity: 1;
  background-image: linear-gradient(#daeef7 1px, transparent 1px), linear-gradient(to right, #daeef7 1px, #eaf4f9 1px);
  background-size: 20px 20px; }