.fs-170 { font-size: 1.7rem; }
.fs-180 { font-size: 1.8rem; }
.fs-200 { font-size: 2.0rem; }
.fw-bold { font-weight: 700 !important; }
.text-alert { color: #c0392b; font-weight: bold;}
.text-red { color: #c0392b; }
.text-blue { color: #2a5298; }
.link-blue { color: #4970be; }
.text-orange { color: #a35a00; }
.text-teal { color: #008080; }
.text-navy { color: #3061AD; }
.text-pureblue { color: #0000ff; }
.text-indent-4 { display: inline-block; margin-left: 4rem; }
.text-indent-6 { display: inline-block; margin-left: 6rem; }
.text-indent-12 { display: inline-block; margin-left: 12rem; }
.text-indent-30 { display: inline-block; margin-left: 30rem; }
.nowrap { white-space: nowrap; }

.circle-mark {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  line-height: 1em;
  text-align: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.9em;
}

.img-border2 {
  border: 2px solid #999;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
}

.img-border {
  border: 8px solid #999;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
}

img.sp-image-11{
  text-decoration : none;
  border-top-left-radius : 50% 50%;
  border-top-right-radius : 50% 50%;
  border-bottom-right-radius : 50% 50%;
  border-bottom-left-radius : 50% 50%;
  max-width : 100%;
  position : relative;
}
.sp-table td:first-child {
	white-space: nowrap;
}

.img-dotted-border {
  border: 3px dotted #4970be;
  padding: 4px;
}
.img-solid-border {
  border: 6px solid #cccccc;
  padding: 4px;
}
.img-oval {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 8px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}
.img-border3 {
  border: 8px solid #ffffff;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
  max-width: 100%;
  box-sizing: border-box;
}

.gallery-wrap {
  margin-left: -5px;
  margin-right: -5px;
}

.gallery-wrap .col-6 {
  padding-left: 5px;
  padding-right: 5px;
}

.gallery-item {
  border: 1px solid #d0d0d0;
  overflow: hidden;
}

.gallery-title {
  font-size: 1.2em;
  line-height: 2em;
  color: #3b434b;
  padding-left: 10px;
  border-left: 3px solid #3b434b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
  margin-bottom: 0;
  background-image: url(/campus/centers/ict/items/back-30.png);
  background-repeat: repeat;
  background-position: center top;
}
.gallery-item p {
  padding: 0 8px;
}
.gallery-wrap .row {
  display: flex;
  flex-wrap: wrap;
}

.gallery-wrap .col-6 {
  display: flex;
}

.gallery-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* スライダー */
#main-slider img {
  width: 100%;
  height: 400px !important;
  object-fit: cover;
}
.slider-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.my-custom-prev,
.my-custom-next,
#slider-toggle-btn {
  position: absolute;
  z-index: 10; 
  background: rgba(0, 0, 0, 0.5); 
  border: none;
  border-radius: 50%;
  width: 35px; 
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, outline 0.1s;
}
.my-custom-prev svg,
.my-custom-next svg,
#slider-toggle-btn svg {
  fill: #ffffff; 
}
.my-custom-prev:hover,
.my-custom-next:hover,
#slider-toggle-btn:hover {
 background: rgba(0, 0, 0, 0.8); 
}
.my-custom-prev,
.my-custom-next {
  top: 50%; 
  transform: translateY(-50%);
}
.my-custom-prev {
  left: 20px;
}
.my-custom-next {
  right: 20px;
}
.slider-controls {
  position: absolute;
  bottom: 30px; 
  right: 20px;
  z-index: 10;
}
#slider-toggle-btn {
  position: static; 
}
#slider-toggle-btn .icon-play {
  display: none;
}
#slider-toggle-btn .icon-pause {
  display: block;
}
#slider-toggle-btn.is-paused .icon-play {
  display: block;
}
#slider-toggle-btn.is-paused .icon-pause {
  display: none;
}
#slider-toggle-btn.is-paused {
  background: rgba(0, 123, 194, 0.7); 
}
#slider-toggle-btn.is-paused:hover {
  background: rgba(0, 123, 194, 0.9); 
}
.my-custom-prev:focus-visible,
.my-custom-next:focus-visible,
#slider-toggle-btn:focus-visible {
  outline: 3px solid #007bc2;
  outline-offset: 2px;
}

@media not screen, screen and (min-width: 569px) {
#sp-image-13 {
	width: 50%;
	float: right;
}
}
@media screen and (max-width: 568px) {
#sp-image-13 {
	max-width: 100%;
}
  #main-slider img {
    height: 250px !important;
  }
  #main-slider img.text-image {
    object-fit: contain;
    background: #fff;
  }
  .slider-controls {
    bottom: 40px;
    right: 15px;
  }
}