/* CSS Document */
/* CSS Document */
.page_img {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 30px;
  background-size: cover;
  overflow: hidden; }

#topph {
  justify-content: center;
  align-items: center; }
  #topph .pic_catch {
    z-index: 1;
    position: relative;
    width: 100%; }
    #topph .pic_catch h1 {
      color: #ffffff;
      font-size: min(4rem, 4vw);
      text-shadow: 0 0 10px #000;
      text-align: center;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      margin: auto;
      height: 2em;
      letter-spacing: .5em;
      font-weight: 500; }
    #topph .pic_catch .index_slide img {
      width: 100%;
      padding: 0;
      display: block;
      aspect-ratio: 25 / 19;
      object-fit: cover;
      border-radius: 10px; }
      @media (min-width: 768px) {
        #topph .pic_catch .index_slide img {
          border-radius: 20px; } }

.slick-slide div {
  padding: 0 10px; }
  @media (min-width: 768px) {
    .slick-slide div {
      padding: 0 15px; } }

.single_col .inner .cards {
  display: block;
  margin-bottom: 50px;
  background: #f0f0f0;
  padding: 40px 20px; }
  @media (min-width: 768px) {
    .single_col .inner .cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; } }
  .single_col .inner .cards .card {
    font-size: 1.8rem;
    width: calc(100% - 30px);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    aspect-ratio: 20 / 9;
    margin: 0 auto 20px;
    position: relative;
    background: white; }
    @media (min-width: 768px) {
      .single_col .inner .cards .card {
        width: calc((100% - 50px) / 3);
        aspect-ratio: 20 / 12; } }
    .single_col .inner .cards .card .imgbox {
      display: block;
      width: 100%;
      height: 100%;
      transition: all 0.3s ease-in-out;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 8px; }
      .single_col .inner .cards .card .imgbox img {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 8px;
        transition: .7s all;
        object-fit: cover;
        opacity: .4; }
    .single_col .inner .cards .card h2 {
      position: absolute;
      color: #00469c;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 5px 10px 10px;
      margin: auto;
      border: 0;
      display: inline-block;
      height: 1em;
      letter-spacing: 0.15em;
      font-size: 3rem;
      font-weight: normal;
      text-align: center;
      text-shadow: white 2px 0px,  white -2px 0px, white 0px -2px, white 0px 2px, white 2px 2px , white -2px 2px, white 2px -2px, white -2px -2px, white 1px 2px,  white -1px 2px, white 1px -2px, white -1px -2px, white 2px 1px,  white -2px 1px, white 2px -1px, white -2px -1px; }
      @media (min-width: 768px) {
        .single_col .inner .cards .card h2 {
          font-size: 3.5rem; } }
    .single_col .inner .cards .card::before {
      background: #fff;
      content: '';
      width: calc(100% - 60px);
      height: 2px;
      position: absolute;
      left: 30px;
      bottom: 30px;
      transform-origin: right top;
      transform: scale(0, 1);
      transition: transform .5s;
      z-index: 1; }
    .single_col .inner .cards .card:hover h2 {
      text-shadow: rgba(255, 255, 255, 0) 0 0;
      color: #fff; }
    .single_col .inner .cards .card:hover .imgbox {
      background: #00469c; }
      .single_col .inner .cards .card:hover .imgbox img {
        transition: .7s all; }
    .single_col .inner .cards .card:hover::before {
      transform-origin: left top;
      transform: scale(1, 1); }
.single_col .inner .access {
  padding: 0 20px;
  margin-bottom: 40px; }
  @media (min-width: 768px) {
    .single_col .inner .access {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 100px 40px; } }
  .single_col .inner .access .address {
    margin-bottom: 20px;
    border-left: 6px solid #00469c;
    padding: 5px 0 5px 20px; }
    @media (min-width: 768px) {
      .single_col .inner .access .address {
        width: 48%;
        border-left: 10px solid #00469c; } }
    .single_col .inner .access .address h2 {
      color: #00469c;
      margin: 10px 0; }
      @media (min-width: 768px) {
        .single_col .inner .access .address h2 {
          margin: 20px 0 40px;
          font-size: 3.5rem; } }
    .single_col .inner .access .address p {
      font-size: 1.6rem; }
      @media (min-width: 768px) {
        .single_col .inner .access .address p {
          font-size: 2rem; } }
  .single_col .inner .access .map {
    aspect-ratio: 16 / 9;
    max-width: 600px; }
    @media (min-width: 768px) {
      .single_col .inner .access .map {
        width: 48%;
        aspect-ratio: 2 / 1; } }
    .single_col .inner .access .map iframe {
      width: 100%;
      height: 100%; }