@charset "utf-8";

.containerBox {
  max-width: inherit !important;
}

#mainContent {
  overflow-x: hidden !important;
}

.breadcrumb {
  display: none !important;
}

header .outerBox {
  padding-bottom: 0;
}


.kvBox {
  background: url(../img/kv_bg.png) no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: right bottom;
  padding: 0 0 var(--large-space);
  text-align: center;
  margin-bottom: calc(var(--large-space)*2);
}

.kvBox p {
  background-color: #ffffff8c;
  margin-bottom: 0;
  display: inline-block;
  padding: var(--small-space);
  font-size: 80%;
}

.bx-wrapper {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 2.5rem !important;
}

.bx-wrapper img {
  margin: auto;
  cursor: pointer;
  position: relative;
}

.slider_item {
  margin: auto;
  background-color: transparent;
}

#zoomBtn,
#bxslider_pause,
#bxslider_start {
  border: solid 2px var(--font-color);
  border-radius: 5px;
  cursor: pointer;
  font-size: smaller;
  display: flex;
  align-items: center;
  background-color: #ffffff8c;
  padding: .2em;
  transition: var(--transition-speed);
}

#zoomBtn:hover,
#bxslider_pause:hover,
#bxslider_start:hover {
  background-color: #9696968c;
}

#zoomBtn::before {
  background: url(../img/icon_zoom.svg) no-repeat;
}

#bxslider_pause::before {
  background: url(../img/icon_pause.svg) no-repeat;
}

#bxslider_start::before {
  background: url(../img/icon_play.svg) no-repeat;
}

#zoomBtn::before,
#bxslider_pause::before,
#bxslider_start::before {
  content: '';
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  background-size: contain;
  margin-right: .2em;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background-color: var(--border-color) !important;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background-color: #000 !important;
  transform: scale(1.5);
}

.bx-wrapper .bx-pager.bx-default-pager a:focus,
#zoomBtn:focus,
#bxslider_pause:focus,
#bxslider_start:focus {
  outline: auto;
  outline-color: orange;
  outline-offset: 2px;
}

.slider_info {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-bottom: var(--small-space);
  font-weight: bold;
}

.slider_info .active {
  background-color: var(--main-color) !important;
  color: #fff;
}

.topPage section {
  margin-bottom: var(--large-space);
}

.top_h2 {
  border-bottom: var(--border-style);
  padding-bottom: var(--medium-space);
}

.top_h2 span {
  display: block;
  font-size: 50%;
  padding-left: .5em;
}

.topContets_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.topContets_grid_item a {
  display: flex;
  align-items: baseline;
  padding: var(--small-space) 0;
  text-decoration: none;
  color: var(--font-color) !important;
  border-bottom: var(--border-style);
  text-decoration: none !important;
  position: relative;
  gap: .5em;
}

.topContets_grid_item a .badge {
  text-align: center;
  color: var(--main-color);
  border: solid 1px currentColor;
  font-size: small;
  font-weight: bold;
  padding: 0 .1em;
  display: inline;
}

.topContets_grid_item a:hover {
  color: var(--main-color);
  background-color: var(--background-color);
}

.topContets_grid_item a::after {
  display: block;
  content: '';
  width: 1em;
  height: 1em;
  background: url(../img/icon_arrow.svg) no-repeat;
  background-size: contain;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 1px;
  transition: var(--transition-speed);
}

.topContets_grid_item a:hover::after {
  background: url(../img/icon_arrow_hover.svg) no-repeat;
  display: block;
  content: '';
  width: 1em;
  height: 1em;
  background-size: contain;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 1px;
}

.topContets_grid_item h3 {
  color: var(--main-color);
  margin-top: 0;
  margin-bottom: var(--small-space);
}

.topContets_grid_item h3 img {
  width: 2.5em;
  height: auto;
}

.topContets_grid_item h3 a {
  align-items: center;
  justify-content: flex-start;
  gap: 1em;
  font-size: large;
  border-bottom: none;
  width: fit-content;
}

.topContets_grid_item h3 a:hover {
  background-color: transparent;
}

.topContets_grid_item h3 a:hover::after,
.topContets_grid_item h3 a::after {
  content: none;
}

.topContets_grid_item:nth-of-type(2),
.topContets_grid_item:nth-of-type(5) {
  border-left: var(--border-style);
  border-right: var(--border-style);
  padding: 0 var(--large-space);
}

.topContets_grid_item:nth-of-type(1),
.topContets_grid_item:nth-of-type(4) {
  padding-right: var(--large-space);
}

.topContets_grid_item:nth-of-type(3),
.topContets_grid_item:nth-of-type(6) {
  padding-left: var(--large-space);
}

.topContets_grid_item {
  margin: var(--medium-space) 0;
}


.topNews_box {
  margin: var(--large-space) 0;
  padding: var(--small-space);
  height: 12.5rem;
  overflow-y: auto;
}

.topNews_item {
  display: grid;
  grid-template-columns: 5.6rem 3rem 1fr;
  row-gap: var(--small-space);
  padding: var(--medium-space) 0;
  border-bottom: dashed 1px var(--border-color);
}

.topNews_item .badge {
  text-align: center;
}

.topNews_item .badge span {
  text-align: center;
  color: var(--main-color);
  border: solid 1px currentColor;
  font-size: small;
  font-weight: bold;
  padding: 0 .1em;
}

.topNews_item .badge span {
  text-align: center;
  color: var(--main-color);
  border: solid 1px currentColor;
  font-size: small;
  font-weight: bold;
  padding: 0 .1em;
}

@media screen and (max-width: 1280px) {
  .kvBox {
    background-position: left bottom;
  }

  .kvBox p {
    text-align: left;
    font-size: 85%;
  }

  .topContets_grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--large-space);
  }

  .topContets_grid_item:nth-of-type(1),
  .topContets_grid_item:nth-of-type(3),
  .topContets_grid_item:nth-of-type(5) {
    padding: 0 var(--large-space);
    border-left: none;
    border-right: var(--border-style);
  }

  .topContets_grid_item:nth-of-type(2),
  .topContets_grid_item:nth-of-type(4),
  .topContets_grid_item:nth-of-type(6) {
    padding: 0 var(--large-space);
    border: none;
  }

  .topNews_box {
    max-height: 40vh;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .outerBox {
    padding: 0 !important;
  }

  .topContainer {
    padding: 1.25rem;
  }

  .topContets_grid {
    grid-template-columns: repeat(1, 1fr);
    row-gap: var(--large-space);
  }

  .topContets_grid_item:nth-of-type(1),
  .topContets_grid_item:nth-of-type(2),
  .topContets_grid_item:nth-of-type(3),
  .topContets_grid_item:nth-of-type(4),
  .topContets_grid_item:nth-of-type(5),
  .topContets_grid_item:nth-of-type(6) {
    border: none;
    padding: 0 var(--small-space);
  }

  .topNews_item {
    grid-template-columns: 5.6rem 1fr;
    text-align: left;
  }

  .topNews_item .title {
    grid-column: 1/3;
  }

  .topNews_item .badge {
    text-align: left;
  }
}

/* モーダル */

#modalBox01,
#modalBox02,
#modalBox03,
#modalBox04 {
  display: none;
}

.modal {
  width: 100%;
  height: 100%;
  background-color: #0000004d;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .modalClose {
  position: absolute;
  top: 10%;
  right: 10%;
  cursor: pointer;
  text-align: center;
  width: 3rem;
}

.modal img {
  max-width: 75rem;
  width: 100%;
}