@charset "UTF-8";
/* CSS Document */
.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_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; }

.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 {
  padding: 30px 20px 60px;
  position: relative; }
  .school_list .img_bg {
    width: 20%; }
    @media (min-width: 768px) {
      .school_list .img_bg {
        width: auto; } }
  .school_list .bg1 {
    position: absolute;
    left: 0;
    top: 0; }
  .school_list .bg2 {
    position: absolute;
    right: 0;
    bottom: 0; }
  .school_list .school_box {
    padding: 10px 20px;
    width: calc(100%);
    margin: 0 auto 20px;
    max-width: 800px;
    background: #fff;
    border-color: #00913a;
    border-width: 1px 5px 5px 1px;
    border-style: solid; }
    @media (min-width: 768px) {
      .school_list .school_box {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 30% 1fr;
        grid-template-rows: auto 1fr;
        gap: 0px 0px;
        grid-template-areas: "title title" "img article";
        gap: 0 30px; }
        .school_list .school_box .img {
          grid-area: img; }
        .school_list .school_box .title {
          grid-area: title; }
        .school_list .school_box .article {
          grid-area: article; } }
    .school_list .school_box .img img {
      width: 100%; }
    .school_list .school_box .title {
      color: #8bc120;
      border-bottom: 2px solid #06589f; }
    .school_list .school_box .article dl {
      font-size: 1.6rem;
      display: flex;
      margin-bottom: 5px;
      flex-direction: column; }
      @media (min-width: 768px) {
        .school_list .school_box .article dl {
          flex-direction: row;
          justify-content: space-between; } }
      .school_list .school_box .article dl dt {
        color: #06589f;
        background: #cddeec;
        font-weight: bold;
        padding: 5px; }
        @media (min-width: 768px) {
          .school_list .school_box .article dl dt {
            width: 5em;
            text-align: center; } }
      @media (min-width: 768px) {
        .school_list .school_box .article dl dd {
          width: calc(100% - 6em);
          text-align: left; } }

.school_detail {
  font-size: 1.4rem; }
  @media (min-width: 768px) {
    .school_detail {
      font-size: 1.6rem; } }
  .school_detail .flex_catch {
    display: flex;
    flex-direction: column-reverse; }
    @media (min-width: 768px) {
      .school_detail .flex_catch {
        margin-bottom: 20px;
        flex-direction: row; } }
    .school_detail .flex_catch .article {
      background: rgba(255, 255, 255, 0.8);
      border-radius: 8px;
      border: 2px solid #06589f;
      padding: 15px;
      margin: 0 auto 20px; }
      @media (min-width: 768px) {
        .school_detail .flex_catch .article {
          width: 60%;
          margin-right: 10px; } }
    @media (min-width: 768px) {
      .school_detail .flex_catch .school_ph {
        width: 40%; } }
    .school_detail .flex_catch .school_ph img {
      width: 90%;
      display: block;
      margin: 0 auto 20px; }
      @media (min-width: 768px) {
        .school_detail .flex_catch .school_ph img {
          width: 100%; } }

.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; }

.tbl_in th {
  vertical-align: top;
  width: 5em;
  font-weight: normal;
  padding: 5px; }
  .tbl_in th span {
    text-align: justify;
    text-align-last: justify;
    width: 4em;
    display: inline-block; }
  .tbl_in th::after {
    content: ":"; }
.tbl_in td {
  padding: 5px; }

.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; }

.btnset {
  position: relative;
  margin-bottom: 50px; }
  .btnset p {
    text-align: center; }
    .btnset p .btn {
      color: #fff;
      padding: 5px 20px;
      display: inline-block;
      background: #06589f;
      border-radius: 100px;
      border: 1px solid #fff;
      margin-right: 10px;
      font-size: 2rem;
      text-align: center;
      margin: 10px auto; }
  .btnset .qr {
    position: absolute;
    right: 150px;
    top: -40px;
    width: 150px; }
    .btnset .qr img {
      display: block;
      margin: auto; }
    .btnset .qr p {
      font-size: 1.2rem; }