/* CSS Document */
html {
  scroll-behavior: smooth;
  min-width: 280px;
  overflow-x: hidden;
}

body {
  background: #E5FAFF;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.05rem;
}

.index-header {
  padding: 26px 25px;
  position: sticky;
  top: 0;
  z-index: 10;
}

@media screen and (max-width: 567px) {
  .index-header {
    display: none;
  }
}

.FV {
  width: 100%;
  margin: -80px auto 0;
  padding: 110px 0 clamp(40px, 5vw, 50px);
  background: #fff;
}

@media screen and (max-width: 567px) {
  .FV {
    padding: 0;
    margin: 0;
  }
}

.FV .FVinner {
  max-width: 1260px;
  margin: 0 auto;
  position: relative;
}

.FV .FVinner .FV-sp {
  display: none;
}

@media screen and (max-width: 567px) {
  .FV .FVinner .FV-sp {
    display: block;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    padding-bottom: 10px;
  }
}

.FV .FVinner div {
  display: flex;
  justify-content: space-around;
}

@media screen and (max-width: 567px) {
  .FV .FVinner div {
    display: none;
  }
}

@media screen and (max-width: 567px) {
  .FV .FVinner div h1 {
    margin: 0 auto 0 0;
  }
}

.FV .FVinner div h1 .h1-img {
  margin: 0 30px;
  width: clamp(200px, 31vw, 395px);
}

@media screen and (max-width: 567px) {
  .FV .FVinner div h1 .h1-img {
    width: 20vw;
    text-align: left;
    margin: -15px 0 0 15px;
  }
}

.FV .FVinner div .visual {
  right: 0;
  -o-object-fit: contain;
  object-fit: contain;
  width: clamp(280px, 50vw, 637px);
}

.FV .FVinner div .visual_square {
  position: absolute;
  left: -15%;
  top: 30%;
}

.FV .FVinner div .visual_triangle {
  position: absolute;
  left: -5%;
  bottom: 30%;
}

.FV .FVinner h2 {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 30px;
  font-size: clamp(1.25rem, 1vw, 1.875rem);
  font-weight: 500;
  color: #0054A7;
  letter-spacing: clamp(0.25rem, 0.179rem + 0.41vw, 0.5rem);
}

@media screen and (max-width: 768px) {
  .FV .FVinner h2 {
    top: -15%;
  }
}

@media screen and (max-width: 567px) {
  .FV .FVinner h2 {
    top: 10%;
    font-size: clamp(1.125rem, 1vw, 1.875rem);
  }
}

.FV .FVinner h2 span {
  writing-mode: vertical-lr;
  background: #fff;
  border: #398FE4 solid;
  border-width: 0 5px 5px 0;
  padding: 5px 10px 10px 10px;
}

nav {
  background: #0054A7;
  color: #fff;
}

nav .pcNav {
  max-width: 1090px;
  margin: 0 auto;
  padding: 31px 5%;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  nav .pcNav {
    padding: 15px;
  }
}

@media screen and (max-width: 768px) {
  nav .pcNav li {
    display: none;
  }
}

nav .pcNav li .fa-caret-down {
  transform: scaleY(1.4);
  margin-right: 8px;
  vertical-align: baseline;
}

nav .pcNav li:nth-child(3) .fa-caret-down {
  margin-right: 0;
}

p {
  line-height: 2;
}

.movieColumn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
  .movieColumn {
    display: block;
  }
}

.movieColumn li {
  /* width: calc((100% - 60px) / 3);*/
  width: 32%;
}

@media screen and (max-width: 768px) {
  .movieColumn li {
    width: 100%;
    margin: 0 0 50px 0;
  }
}

.movieColumn li iframe {
  display: block;
  border-radius: 10px;
  border: solid 1px #0054A7;
  aspect-ratio: 16/9;
  width: 100%;
  margin-bottom: 10px;
}

.movieColumn li .name {
  display: flex;
  justify-content: space-between;
}

.movieColumn li .name a {
  width: 100%;
  padding-bottom: 7px;
  border-bottom: dotted 1px #0054A7;
  position: relative;
  padding-right: 2em;
}

.movieColumn li .name a::after {
  position: absolute;
  right: 0;
  color: #0054A7;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f138";
  top: 50%;
  transform: translateY(-50%);
}

.companyBtn {
  display: block;
  background: #398FE4;
  color: #fff;
  padding: 16px;
  font-weight: 500;
  width: 200px;
  border-radius: 40px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1rem;
  position: relative;
}

.companyBtn .fa-angle-right {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(-50%, -50%);
}

main {
  overflow-x: hidden;
}

main .mainWrap {
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 3%;
}

@media screen and (max-width: 567px) {
  main .mainWrap {
    padding: 0;
  }
}

main .mainWrap .read {
  padding: clamp(50px, 8vw, 100px) 5vw 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

@media screen and (max-width: 859px) {
  main .mainWrap .read {
    display: block;
    padding: clamp(50px, 8vw, 100px) 15px;
  }
}

main .mainWrap .read .read-item01 {
  position: absolute;
  z-index: -5;
  right: -30%;
  bottom: -100px;
  width: clamp(300px, 22vw, 438px);
}

main .mainWrap .read .readLeft {
  flex: 1;
}

@media screen and (max-width: 859px) {
  main .mainWrap .read .readLeft {
    margin-bottom: 30px;
  }
}

main .mainWrap .read .readLeft .read_h3 {
  font-size: clamp(1.563rem, 1.473rem + 0.51vw, 1.875rem);
  font-weight: 700;
  padding-bottom: 10px;
  letter-spacing: 0.1rem;
  line-height: 1.8;
}

@media screen and (max-width: 859px) {
  main .mainWrap .read .readLeft .read_h3 {
    text-align: center;
    line-height: 1.5;
  }
}

main .mainWrap .read .readLeft .sp_h3 {
  display: none;
}

@media screen and (max-width: 567px) {
  main .mainWrap .read .readLeft .sp_h3 {
    display: inline;
  }
}
main .mainWrap .read .readLeft span {
  font-weight: 700;
  color: #0054A7;
}
main .mainWrap .read .readRight {
  padding-left: clamp(20px, 5vw, 120px);
}

@media screen and (max-width: 859px) {
  main .mainWrap .read .readRight {
    padding-left: 0;
    text-align: center;
  }
}

main .mainWrap .read .readRight .ytBtn {
  display: block;
  padding: 30.5px;
  color: #fff;
  background: #F04E75;
  border-radius: 50px;
  letter-spacing: 0.1rem;
  font-weight: 500;
}

main .mainWrap .read .readRight .ytBtn .fa-youtube {
  transform: scale(1.7);
  margin-left: 15px;
}

@media screen and (max-width: 859px) {
  main .mainWrap .read .readRight .ytBtn {
    display: inline-block;
  }
}
main .mainWrap .nav-lead {
    color: #0054a7;
    font-size: 24px;
    padding-bottom: 20px;
    display: block;
    text-align: center;
}
main .mainWrap .movie {
  background: #fff;
  padding: clamp(45px, 8vw, 82px) clamp(30px, 8vw, 67px) clamp(45px, 8vw, 102px);
  margin: 0 auto clamp(80px, 10vw, 150px);
  border-radius: 35px;
}

@media screen and (max-width: 567px) {
  main .mainWrap .movie {
    border-radius: 0px;
  }
}

main .mainWrap .movie .fa-angle-right {
  margin-left: 10px;
}

main .mainWrap .movie h4 {
  font-weight: 700;
  font-size: clamp(1.5rem, 1.071rem + 1.02vw, 1.875rem);
  color: #0054A7;
  text-align: center;
  margin: 0 0 45px;
  position: relative;
}

main .mainWrap .movie .button {
  display: block;
  background: #0054A7;
  color: #fff;
  padding: 16px;
  font-weight: 500;
  width: 185px;
  border-radius: 30px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1rem;
  position: relative;
}

main .mainWrap .movie .button .fa-angle-right {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(-50%, -50%);
}

main .box {
  position: relative;
}

main .box .box01-item01 {
  width: clamp(150px, 10vw, 200px);
  position: absolute;
  left: -100px;
  top: -90px;
  z-index: -5;
}

@media screen and (max-width: 567px) {
  main .box .box01-item01 {
    opacity: 0.8;
  }
}

main .box .box01-item02 {
  position: absolute;
  top: -5%;
  right: -3%;
  width: clamp(85px, 5vw, 112px);
}

@media screen and (max-width: 567px) {
  main .box .box01-item02 {
    opacity: 0.8;
  }
}

main .box .box01-item03 {
  position: absolute;
  bottom: -15%;
  right: -20%;
  z-index: -5;
  width: clamp(200px, 30vw, 400px);
}

main .box .box01-item04 {
  position: absolute;
  left: -3%;
  bottom: -15%;
  rotate: -18deg;
  width: clamp(100px, 12vw, 130px);
}

@media screen and (max-width: 768px) {
  main .box .box01-item04 {
    width: clamp(100px, 12vw, 180px);
    left: 0;
    bottom: -8%;
  }
}

@media screen and (max-width: 567px) {
  main .box .box01-item04 {
    display: none;
  }
}

@media screen and (max-width: 375px) {
  main .box .box01-item04 {
    display: none;
  }
}

main .rotate {
  animation-name: rotate;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

main .box02-item01 {
  width: clamp(100px, 15vw, 165px);
  position: absolute;
  left: -8%;
  top: 5%;
}

@media screen and (max-width: 567px) {
  main .box02-item01 {
    opacity: 0.8;
    top: 3%;
  }
}

main .box02-item02 {
  width: clamp(120px, 17vw, 180px);
  position: absolute;
  top: -5%;
  right: 3%;
}

@media screen and (max-width: 768px) {
  main .box02-item02 {
    width: clamp(120px, 20vw, 180px);
    top: -3%;
  }
}

@media screen and (max-width: 567px) {
  main .box02-item02 {
    display: none;
  }
}

@media screen and (max-width: 375px) {
  main .box02-item02 {
    display: none;
  }
}

main .box02-item03 {
  position: absolute;
  bottom: 0;
  left: -15%;
  top: 50%;
}

main .box02-item04 {
  position: absolute;
  bottom: 0;
  right: -10%;
  bottom: -10%;
  width: clamp(150px, 15vw, 200px);
}

@media screen and (max-width: 768px) {
  main .box02-item04 {
    z-index: -5;
  }
}

main .box02-li {
  position: relative;
  z-index: 5;
}

main .box03-item01 {
  position: absolute;
  top: -15%;
  left: -25%;
  z-index: -5;
  width: clamp(300px, 22vw, 438px);
}

main .box03-item02 {
  position: absolute;
  top: 25%;
  right: -35%;
  z-index: -5;
}

main .box03-item03 {
  position: absolute;
  left: -8%;
  bottom: -10%;
  width: clamp(250px, 25vw, 350px);
}

@media screen and (max-width: 768px) {
  main .box03-item03 {
    width: clamp(230px, 40vw, 350px);
    left: -10%;
    bottom: -5%;
  }
}

@media screen and (max-width: 567px) {
  main .box03-item03 {
    display: none;
  }
}

@media screen and (max-width: 375px) {
  main .box03-item03 {
    display: none;
  }
}

main .box03-item04 {
  position: absolute;
  width: 20%;
  width: clamp(120px, 20vw, 232px);
  bottom: -25%;
  left: -15%;
  z-index: -5;
}

main .box04-item01 {
  position: absolute;
  right: -5%;
  top: 5%;
  width: clamp(80px, 15vw, 119px);
}

@media screen and (max-width: 768px) {
  main .box04-item01 {
    top: -5%;
  }
}

main .box04-item02 {
  position: absolute;
  z-index: -5;
  right: -30%;
  bottom: -10%;
  width: clamp(300px, 22vw, 438px);
}

main .box04-item03 {
  position: absolute;
  width: clamp(100px, 12vw, 170px);
  rotate: 15deg;
  bottom: -10%;
  right: -7%;
  z-index: 5;
}

@media screen and (max-width: 768px) {
  main .box04-item03 {
    width: clamp(120px, 20vw, 350px);
  }
}

@media screen and (max-width: 567px) {
  main .box04-item03 {
    bottom: -13%;
  }
}

@media screen and (max-width: 375px) {
  main .box04-item03 {
    display: none;
  }
}

main .box04-item04 {
  position: absolute;
  bottom: 0;
  right: -6%;
  bottom: -20%;
  width: clamp(160px, 12vw, 213px);
}

@media screen and (max-width: 768px) {
  main .box04-item04 {
    width: clamp(160px, 20vw, 213px);
    right: -10%;
    bottom: -13%;
  }
}

@media screen and (max-width: 567px) {
  main .box04-item04 {
    bottom: -15%;
  }
}

@media screen and (max-width: 375px) {
  main .box04-item04 {
    display: none;
  }
}

main .logoScroll {
  height: 70px;
  background: url(../images/HIROSHIMANO_GAKKOU_CH.png) repeat-x center bottom/auto;
  animation-name: logoScroll;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@keyframes logoScroll {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 1570px 0;
  }
}

main #about {
  background: #fff;
  margin: 0 auto;
  padding: clamp(70px, 10vw, 130px) 5%;
}

@media screen and (max-width: 567px) {
  main #about {
    /* padding: clamp(70px, 10vw, 130px) 0; */
    padding: 130px 0;
  }
}

main #about .aboutWrap {
  max-width: 980px;
  margin: 0 auto;
}

main #about .aboutInner {
  display: flex;
  margin-bottom: 85px;
  gap: clamp(1.25rem, 0.941rem + 1.76vw, 3.125rem);
}

@media screen and (max-width: 768px) {
  main #about .aboutInner {
    flex-direction: column-reverse;
  }
}

@media screen and (max-width: 567px) {
  main #about .aboutInner {
    max-width: 90%;
    margin: 0 auto 20px;
  }
}

main #about .aboutInner .aboutLeft {
  display: flex;
  gap: 20px;
}

@media screen and (max-width: 768px) {
  main #about .aboutInner .aboutLeft {
    margin: 0 auto;
    min-width: 280px;
  }
}

@media screen and (max-width: 567px) {
  main #about .aboutInner .aboutLeft {
    display: block;
  }
}

main #about .aboutInner .aboutLeft .book {
  width: 100%;
}

@media screen and (max-width: 567px) {
  main #about .aboutInner .aboutLeft .book {
    margin-bottom: 50px;
  }
}

main #about .aboutInner .aboutLeft .book img {
  max-width: 100%;
  display: block;
  margin-bottom: 20px;
}

main #about .aboutInner .aboutLeft .book .bookBtn {
  display: block;
  background: #398FE4;
  color: #fff;
  padding: 16px;
  font-weight: 500;
  width: 185px;
  border-radius: 40px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1rem;
  position: relative;
}

main #about .aboutInner .aboutLeft .book .bookBtn .fa-angle-right {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(-50%, -50%);
}

main #about .aboutInner .aboutRight {
  max-width: 590px;
}

@media screen and (max-width: 768px) {
  main #about .aboutInner .aboutRight {
    max-width: 100%;
  }
}

main #about .aboutInner .aboutRight h5 {
  font-size: clamp(1.25rem, 1.107rem + 0.82vw, 1.75rem);
  color: #398FE4;
  font-weight: 700;
  margin-bottom: 25px;
}

@media screen and (max-width: 768px) {
  main #about .aboutInner .aboutRight h5 {
    text-align: center;
  }
}

@media screen and (max-width: 567px) {
  main #about .aboutInner .aboutRight h5 {
    font-size: 1.5rem;
  }
}

main #about p {
  margin-bottom: 20px;
}

main #about .aboutCompany {
  background: #E5FAFF;
  padding: 68px;
}

@media screen and (max-width: 768px) {
  main #about .aboutCompany {
    padding: 50px;
    padding: clamp(30px, 8vw, 50px);
  }
}

main #about .aboutCompany .company {
  color: #398FE4;
  font-weight: 500;
  margin-bottom: 10px;
}

footer {
  background: #0054A7;
  padding: 29px 0;
}

footer img {
  display: block;
  margin: 0 auto;
}

footer small {
  display: block;
  color: #fff;
  text-align: center;
  margin: 12px 0;
}

footer a {
  display: block;
}

footer a .fa-youtube {
  width: 100%;
  color: #fff;
  margin: 0 auto;
  text-align: center;
}

/*================================
archive
=================================*/
.pc_bgi-top {
  position: relative;
  z-index: -1;
}

@media screen and (max-width: 768px) {
  .pc_bgi-top {
    display: none;
  }
}

.pc_bgi-top .pc-bgi_item01 {
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  width: clamp(300px, 75vw, 960px);
  z-index: 1;
}

.pc_bgi-top .pc-bgi_item02 {
  position: absolute;
  right: 0;
  width: clamp(300px, 75vw, 960px);
  z-index: 5;
}

.pc_bgi-bottom .pc-bgi_item03 {
  position: absolute;
  bottom: 0;
  width: clamp(600px, 50vw, 960px);
}

@media screen and (max-width: 768px) {
  .pc_bgi-bottom .pc-bgi_item03 {
    display: none;
  }
}

.pc_bgi-bottom .pc-bgi_item04 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(600px, 50vw, 960px);
  z-index: 5;
}

@media screen and (max-width: 768px) {
  .pc_bgi-bottom .pc-bgi_item04 {
    display: none;
  }
}

.tb_bgi-top {
  display: none;
}

@media screen and (max-width: 768px) {
  .tb_bgi-top {
    display: block;
    position: absolute;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
  }
}

.archive-header {
  padding: 44px 0;
}

.archive-header h1 {
  max-width: 1260px;
  margin: 0 auto;
  text-align: center;
}

.archive-header h1 img {
  width: clamp(150px, 50vw, 212px);
}

.archive-main {
  background: #fff;
  position: relative;
  z-index: -5;
}

@media screen and (max-width: 1260px) {
  .archive-main {
    padding: 0 5vw;
  }
}

@media screen and (max-width: 768px) {
  .archive-main {
    padding: 0 clamp(30px, 5vw, 50px);
  }
}

.archive-main article {
  max-width: 1100px;
  margin: 0 auto;
}

.archive-main h2 {
  text-align: center;
  padding: clamp(50px, 5vw, 120px) 0 clamp(40px, 5vw, 80px);
  font-size: 30px;
  font-weight: 700;
  color: #0054A7;
}

.archive-main h2 span {
  font-size: 25px;
}

.archive-main ul {
  margin: 0 auto;
  flex-wrap: wrap;
}

.archive-main ul li {
  margin-bottom: clamp(50px, 5vw, 80px);
}

.footList {
  margin: 0 auto clamp(50px, 5vw, 80px);
  display: flex;
  align-items: center;
  color: #0054A7;
  font-weight: 700;
}

@media screen and (max-width: 567px) {
  .footList {
    justify-content: space-between;
    margin-bottom: clamp(30px, 5vw, 50px);
  }
}

.footList .fa-angle-right {
  margin-right: 0.5rem;
}

@media screen and (max-width: 567px) {
  .footList a {
    font-size: 14px;
  }
}

.footList .footLink li {
  margin-bottom: 0;
}

.footList .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footList .page-numbers li {
  padding: 1.5rem;
  margin: 0;
}

@media screen and (max-width: 567px) {
  .footList .page-numbers li {
    padding: 1rem;
  }
}

.footList .page-numbers span {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  line-height: 1;
  background: #0054A7;
  color: white;
  box-sizing: border-box;
  width: 30px;
}

.footList .page-numbers span .current {
  background: #0054A7;
  color: white;
}

/*================================
single
=================================*/
.singleWrap {
  max-width: 720px;
  margin: 0 auto;
  z-index: 99 !important;
  position: relative;
}

.singleWrap iframe {
  margin-bottom: 50px;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.singleWrap section {
  margin-bottom: 50px;
}

.singleWrap h3 {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05rem;
  margin-bottom: 10px;
}

.singleWrap h3 .fa-circle {
  color: #0054A7;
  margin-right: 0.25rem;
}

.singleWrap .fa-square-check {
  margin-right: 0.25rem;
  color: #0054A7;
}

.singleWrap .schoolinfo .schoolinfoInner {
  padding: 55px;
  background: #ECF4FD;
  border-radius: 15px;
  margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
  .singleWrap .schoolinfo .schoolinfoInner {
    padding: clamp(30px, 5vw, 50px);
  }
}

.singleWrap .schoolinfo .schoolinfoInner div {
  margin-bottom: 30px;
}

.singleWrap .schoolinfo .schoolinfoInner div:last-child {
  margin-bottom: 0;
}

.singleWrap .schoolinfo .schoolinfoInner li {
  margin-bottom: 0;
  line-height: 2;
}

.singleWrap .schoolinfo .schoolinfoInner .check {
  text-indent: -0.6em;
  padding-left: 1em;
}

.singleWrap .schoolinfo .schoolinfoInner dl {
  display: flex;
  flex-wrap: wrap;
  line-height: 2;
}

@media screen and (max-width: 768px) {
  .singleWrap .schoolinfo .schoolinfoInner dl {
    display: block;
  }
}

.singleWrap .schoolinfo .schoolinfoInner dl dt {
  width: 15%;
}

@media screen and (max-width: 768px) {
  .singleWrap .schoolinfo .schoolinfoInner dl dt {
    width: 100%;
  }
}

.singleWrap .schoolinfo .schoolinfoInner dl dd {
  width: 85%;
}

@media screen and (max-width: 768px) {
  .singleWrap .schoolinfo .schoolinfoInner dl dd {
    width: 100%;
  }
}

.singleWrap .footLink {
  display: flex;
  text-align: center;
  padding: 30px 0;
}

.singleWrap .footLink li {
  padding: 0 40px;
}

.singleWrap .footLink li:first-child {
  border-right: #0054A7 2px solid;
}

/*# sourceMappingURL=it.css.map */

/*===　追　記　===*/

main .mainWrap .movie h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

main .mainWrap .movie h4 i {
  font-size: 0.9em;
}

.movieColumn li {
  /* width: calc((100% - 60px) / 3);*/
  width: 32%;
}

@media screen and (max-width: 768px) {
  .movieColumn li {
    width: 100%;
    margin: 0 0 50px 0;
  }
}

.movieColumn li img {
  width: 100%;
  display: block;
  margin-bottom: 15px;
  border-radius: 8px;
  border: solid 1px #0054A7;
}

.movieColumn li .youtube-img {
  position: relative;
}

.movieColumn li .youtube-BTN {
  position: absolute;
  width: 20%;
  max-width: 86px;
  min-width: 45px;
  border: none;
  padding-bottom: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.movieColumn li a {
  transition: 0.3s ease;
}

.movieColumn li a:hover {
  opacity: 0.65;
}

.movieColumn li .name {
  width: 96%;
  margin: 0 auto;
  position: relative;
  padding-right: 1.5em;
  padding-bottom: 10px;
  border-bottom: dotted 1px #0054A7;
}

.movieColumn li .name:after {
  position: absolute;
  right: 0;
  color: #0054A7;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f138";
}

#school {
  padding-top: 100px;
  margin-top: -100px;
}

.category-nav {
  /*年代別のナビ*/
  width: 90%;
  box-sizing: border-box;
  padding: 0 40px;
  margin: 0 auto 100px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 768px) {
  .category-nav {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .category-nav {
    border: none;
    padding: 0 20px;
    margin: 0 auto 15px;
  }
}

.category-nav:before,
.category-nav:after {
  display: block;
  content: "";
  width: 30px;
  height: 100%;
  background: #e5faff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
}

@media screen and (max-width: 567px) {

  .category-nav:before,
  .category-nav:after {
    width: 30px;
  }
}

.category-nav:after {
  left: initial;
  right: 0;
  top: 0;
}

.category-nav .swiper-wrapper {
  padding: 0;
  display: flex;
  box-sizing: border-box;
  justify-content: flex-start;
}

.category-nav .swiper-slide {
  flex-shrink: 0;
  width: auto;
  padding: 10px 20px 10px 0;
  text-align: center;
  /* margin-right は書かない or Swiper に任せる */
}

@media screen and (max-width: 567px) {
  .category-nav .swiper-slide {
    padding: 10px 0;
  }
}

.category-nav .swiper-slide a {
  font-weight: 600;
  background: #0054a7;
  color: white;
  width: 8em;
  padding: 10px 0;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: opacity 0.3s;
}
.category-nav .swiper-slide:last-of-type a {
  width: 15em;
}

.category-nav .swiper-slide a:hover {
  color: white;
  opacity: 0.65;
}

.category-nav .swiper-slide a.current {
  border: 1px solid #0054a7;
  color: #0054a7;
  background: white;
  opacity: 1;
}

.category-nav .swiper-button-prev,
.category-nav .swiper-button-next {
  position: absolute;
  background-image: none;
  top: calc(50% + 3px);
  left: 0px;
  bottom: initial;
  z-index: 999;
}

.category-nav .swiper-button-next {
  left: initial;
  right: 0;
  z-index: 999;
}

.category-nav .swiper-button-prev::after,
.category-nav .swiper-button-next::after {
  display: block !important;
  font-size: 16px;
  content: "\f137";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #0054a7;
}

.category-nav .swiper-button-next::after {
  content: "\f138";
}

/* ドロップダウン　メニュー　追加　*/
.select_nav {
  display: none;
  width: 90%;
  margin: 0 auto 35px;
  border: 2px solid #0054a7;
  padding: 10px;
  border-radius: 5px;
  position: relative;
  z-index: 99;
  background: white;
}

.select_nav:after {
  font-family: "Font Awesome 5 Free";
  content: "\f078";
  font-size: 12px;
  font-weight: 900;
  height: 10px;
  margin: auto;
  line-height: 10px;
  position: absolute;
  top: 0;
  right: 1.5rem;
  bottom: 0;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .select_nav {
    display: block;
  }
}
.select_nav select {
  width: 100%;
  padding: 5px;
  font-size: 16px;
  border: none;
  outline: none;
}

.select_nav select:focus {
  border: none;
}

br.br_sp {
	display:none;
}

@media screen and (max-width: 567px) {
	br.br_sp {
	display:block;
}	
	.read_h3 {
	padding-bottom:25px!important;
}
}

.read p {
	text-align:justify;
}
.movieColumn li .post-date {
  color: #0054A7;
  font-size: 0.8em;
  font-weight: 600;
  display: block;
  width: 96%;
  margin: 0 auto;
  padding-bottom: 7px;
}
small {
            font-size: 95%;
        }