/* しまねの概要
========================================= */
.miryoku_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3.0rem;
  justify-content: center;
  align-items: start;

  dl {
    margin-block: 0;
    display: flex;
    flex-direction: column;
  }

  dt {
    font-size: 1.1em;
    font-weight: 700;
  }

  dd {
    margin-left: 0;
  }

  dd:last-of-type {
    order: -1;

    img {
      aspect-ratio: 3/2;
      object-fit: cover;
      display: block;
    }
  }
}

/* 立地環境
========================================= */
.kankyo_gaiyo {

  table {
    width: 100%;
  }

  .value_box+img {
    max-width: 40%;
  }

  .value_box dl {
    border: solid 2px #E30213;
    padding: 2.0rem 4.0rem;
    width: fit-content;

    dt {
      font-size: 2.2rem;
      font-weight: 600;
    }

    dd img {
      width: 100%;
      max-width: 400px;
    }
  }
}

.kankyo_grid {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  div {
    margin: 0 auto;
    width: fit-content;
  }
}

/* 交通ネットワーク
========================================= */
.plane_table {
  min-width: 40.0rem;
}

.access_figure {
  margin: 0;
}

.sea_root_img {
  margin-block: 5.0rem;
  position: relative;

  .access_figure:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.sanin-do_potal_site {
  min-width: 28.0rem;
  font-size: 1.3rem;
  text-align: center;
  margin-top: 3.0rem;
}

.matome {
  border: solid 2px #222;
  margin-block: 5.0rem;
  padding: 2.0rem 4.0rem;

  p {
    font-size: 2.2rem;
    margin-block: 0;
  }
}

/* 歴史・文化・観光
========================================= */
.colture_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4.0rem 3.0rem;
  justify-content: center;
}


.colture_list_item {
  img {
    width: 100%;
  }
}

.cultures_title {
  display: flex;
  align-items: center;
  line-height: 1.3;
  /* gap: 0.8rem; */
  margin-bottom: 1.0rem;
}

.culture_text {
  margin-left: 0.8rem;
}

.num-icon {
  background-color: #e8811c;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0;
  width: 3.5rem;
  border-radius: 50%;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

/* Rubyの聖地しまね
========================================= */
.ruby_sangakukan {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 5.0rem 3.0rem;

  dl {
    display: flex;
    flex-direction: column;

    dt {
      font-weight: 700;
      margin-block: 0.4em;
    }

    dd {
      margin-left: 0;
    }

    dd:last-of-type {
      order: -1;
      height: 60%;
      aspect-ratio: 5/3;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 1px #bbb;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;

      a {
        display: block;
      }
    }
  }
}

.circle_label::before {
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 1.0rem;
  left: 1.0rem;
  z-index: 2;

}

.label_san::before {
  content: '産';
  background-color: #e8811c;
}

.label_gaku::before {
  content: '学';
  background-color: #185e9c;
}

.label_kan::before {
  content: '官';
  background-color: #189c9c;
}

.label_min::before {
  content: '民';
  background-color: #fa5860;
}

/* 充実の支援体制
========================================= */
.itoc_box {
  p {
    width: 60%;
  }
}

/* IT人材採用支援
========================================= */
.it-works_box {
  gap: clamp(2.0rem, 3vw, 6.0rem);
}

.it-works_list {
  grid-template-columns: 1fr 1fr;
  list-style-type: none;
  padding-left: 0;
  gap: 2.0rem 3.0rem;
  width: min(100%, 600px);

  li {
    text-align: center;
    background-color: #222;
    color: #fff;
    padding: 0.5em 1em;
    border-radius: 6px;
  }
}

.color_box {
  background-color: #D9EAF6;
  padding: 2em 3em;

  h4 {
    font-size: 1.8rem;
  }

  .flexBox img {
    width: 50%;
  }
}

.it_event_box {
  div:first-child {
    max-width: 55%;
  }
}

/* IT人材育成支援
========================================= */
.img_box {
  width: 100%;
  min-width: 300px;
  max-width: 350px;
  text-align: center;

  img {
    width: 100%;
  }
}



/* 産学官連携
========================================= */
.jirei_img,
.kyoten_img {
  max-width: 45%;
}

.jirei_img_flex {
  max-width: 700px;
  display: flex;
  gap: 2.0rem;
  margin-inline: auto;

  figcaption {
    text-align: center;
    font-size: 1.5rem;

  }
}

/* しまねの産業集積
========================================= */
.sangyo_data_box {
  margin-block: 2em;

  >div:nth-child(1) {
    width: 45%;
  }

  >div:nth-child(2) {
    width: 55%;
  }
}

.pages .kigyo_hp,
.pages .kanren_hp {
  white-space: nowrap;
  padding: 0.2rem 1rem;
  font-size: 1.3rem;
}

.pages .kigyo_hp:hover,
.pages .kanren_hp:hover {
  color: #fff;
  background-color: #222;
}



@media (max-width:767px) {

  /* しまねの概要
========================================= */
  .miryoku_list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    dt,
    dd {
      margin: auto;
    }

    dd {
      font-size: 1.5rem;
    }
  }


  /* 立地環境
========================================= */
  .kankyo_gaiyo {

    .value_box+img {
      max-width: 80%;
    }

    .value_box dl {
      padding: 2.0rem 4.0rem;
      max-width: 400px;

      dt {
        font-size: 2.2rem;
        font-weight: 600;
      }

      dd img {
        width: 100%;
        max-width: 400px;
      }
    }
  }

  .plane_table {
    min-width: initial;
    width: auto;
  }

  .sea_root_img {
    margin-block: 5.0rem;
    position: relative;

    .access_figure:nth-child(2) {
      position: initial;
    }
  }

  .matome {
    margin-block: 3.0rem;
    padding: 2.0rem;

    p {
      font-size: 1.9rem;
      text-align: justify;
    }
  }


  /* Rubyの聖地しまね
========================================= */
  .ruby_sangakukan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .jirei_img,
  .kyoten_img {
    max-width: 100%;
    order: -1;
  }

  /* 充実の支援体制
========================================= */
  .itoc_box {
    p {
      width: initial;
      margin-block: 0;
    }
  }

  /* IT人材採用支援
========================================= */
  .it-works_box {
    gap: 3.0rem;
    align-items: center;
  }

  .it-works_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }

  .color_box {
    padding: 2rem;

    .flexBox img {
      width: 100%;
    }
  }

  .it_event_box {
    div:first-child {
      max-width: initial;
    }
  }

  /* しまねの産業集積
========================================= */
  .sangyo_data_box {
    gap: 5.0rem;
    align-items: center;

    >div:nth-child(1),
    >div:nth-child(2) {
      width: 100%;
      max-width: 450px;
    }
  }

}