@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box; }

img,
embed,
object,
iframe {
  vertical-align: bottom; }

img {
  -webkit-backface-visibility: hidden; }

a {
  text-decoration: none; }

b {
  font-weight: 700; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Zen Kaku Gothic Antique', "YuGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-weight: 500; }

.hidden {
  overflow: hidden; }

.bodyArea {
  position: relative; }

.animate {
  opacity: 0;
  top: 80px;
  position: relative; }

.inlineB {
  display: inline-block; }

@media print, screen and (max-width: 960px) {
  .animate.moving {
    animation: fadeAnimeInsp 0.3s ease 0.1s 1 forwards; } }
@media print, screen and (min-width: 960px) {
  .animate.moving {
    animation: fadeInAnime 0.6s ease 0.3s 1 forwards; } }
.kv,
.nyushi {
  opacity: 0;
  animation: fadeIn 0.6s ease 0.3s 1 forwards; }

@keyframes fadeInAnime {
  0% {
    opacity: 0;
    top: 120px; }
  30% {
    opacity: .3; }
  100% {
    opacity: 1;
    top: 0; } }
@keyframes fadeAnimeInsp {
  0% {
    opacity: 0;
    top: 50px; }
  30% {
    opacity: .3; }
  100% {
    opacity: 1;
    top: 0; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  30% {
    opacity: .3; }
  100% {
    opacity: 1; } }
h1 {
  margin: 8px 0 0;
  font-size: 14px;
  padding: 3px .8rem .8rem; }

h2 {
  font-size: 32px;
  color: #001D42;
  position: relative; }

h3 {
  font-size: 32px;
  color: #001D42;
  text-align: center; }

p {
  color: #281F1C;
  font-size: 14px; }

.conWrap {
  padding: 15px; }
  @media screen and (min-width: 1279px) {
    .conWrap {
      padding: 30px 15px; } }

h1 {
  position: relative; }
  h1 img {
    width: 108px; }
    @media screen and (min-width: 1279px) {
      h1 img {
        width: 150px; } }
  @media screen and (min-width: 1279px) {
    h1 {
      padding-top: 5px; } }
  h1:before, h1:after {
    content: "";
    background: #ffff64;
    display: block;
    position: absolute;
    z-index: 5; }
  h1:before {
    height: 1px;
    top: 0px;
    left: 10px;
    right: 10px; }
  h1:after {
    height: 40vh;
    width: 1px;
    top: 8px;
    left: 8px; }
  @media screen and (min-width: 1279px) {
    h1:after {
      height: 60vh;
      width: 1px;
      top: 55px;
      left: 4rem; } }

h2:before {
  content: "";
  display: block;
  background: #ffff64;
  width: 1px;
  height: 100vw;
  position: absolute;
  right: -10vw;
  bottom: -20vw;
  transform: rotate(45deg); }
  @media screen and (min-width: 960px) {
    h2:before {
      display: none; } }

.kv {
  background-size: 100% auto;
  background-position: left top;
  position: relative;
  overflow: hidden;
  background-image: url(/img/page/special/info/kv_t.jpg);
  background-repeat: no-repeat;
  position: relative; }
  @media screen and (min-width: 960px) {
    .kv:before {
      content: "";
      display: block;
      background: #ffff64;
      width: 1px;
      height: 100vw;
      position: absolute;
      right: -10vw;
      bottom: -20vw;
      transform: rotate(45deg); } }
  @media screen and (max-aspect-ratio: 11 / 10) {
    .kv {
      height: 100vh;
      background-size: 100% auto; } }
  @media screen and (min-aspect-ratio: 11 / 10) {
    .kv {
      height: 100vh;
      background-size: 100% auto;
      background-image: url(/img/page/special/info/kv_pc.jpg); } }
  @media screen and (orientation: portrait) {
    .kv {
      height: calc(100vh - 75px);
      background-image: url(/img/page/special/info/kv.jpg); } }
  .kv h2 {
    color: #ffff64;
    font-size: 32px;
    margin: 0;
    padding: .5rem .8rem; }
    .kv h2 span {
      display: block;
      border-bottom: 1px solid #ffff64; }
    @media screen and (min-width: 960px) {
      .kv h2 {
        font-size: 70px; } }
    @media screen and (min-width: 1279px) {
      .kv h2 {
        margin-left: 2rem; }
        .kv h2 span {
          display: inline-block;
          padding: 0 2em 0 1em; } }
  .kv .catch {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #001d42;
    background: linear-gradient(0deg, rgba(0, 29, 66, 0.4) 0%, rgba(0, 29, 66, 0.4) 80%, rgba(0, 29, 66, 0) 100%); }
    @media screen and (max-width: 960px) {
      .kv .catch {
        padding-top: 2em; } }
    @media screen and (min-width: 960px) {
      .kv .catch {
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(45deg, rgba(0, 29, 66, 0.2) 0%, rgba(0, 29, 66, 0.3) 50%, rgba(0, 29, 66, 0) 100%); } }
    .kv .catch p {
      margin: .5em .8rem 1em;
      color: #fff;
      font-size: 38px; }
      @media screen and (min-width: 1279px) {
        .kv .catch p {
          margin: 3rem .8rem 1em 10%; } }

.lead p {
  padding: 1em 1.3em;
  line-height: 2.28em;
  text-align: justify; }
  @media screen and (min-width: 1279px) {
    .lead p {
      max-width: 960px;
      margin: 2rem auto;
      font-size: 18px; } }

#course {
  background: url(/img/page/special/info/course_bg_sp.jpg);
  background-size: cover;
  background-position: left center;
  padding: .2rem 0 1rem; }
  @media screen and (min-width: 960px) {
    #course {
      background: url(/img/page/special/info/course_bg_pc.jpg);
      background-position: center 40%; } }
  #course h3 {
    background: rgba(255, 255, 255, 0.4);
    padding: .5em 5px;
    border-top: 1px solid #ffff64; }
    @media screen and (min-width: 960px) {
      #course h3 {
        background: rgba(255, 255, 255, 0.75); } }
  #course ul {
    list-style: none;
    padding: 0;
    margin: 1.5em 20px;
    max-width: 1440px; }
    @media screen and (min-width: 960px) {
      #course ul {
        display: flex;
        flex-wrap: wrap;
        margin: 1.5em auto; } }
    #course ul li:not(:last-child) {
      margin-bottom: 10px; }
    @media screen and (min-width: 960px) {
      #course ul li {
        width: calc( 100% / 3);
        padding: 10px; } }
    #course ul a {
      color: #001D42;
      font-weight: 700;
      font-size: 18px;
      display: block;
      text-align: center;
      background: #fff;
      transition: .4s all; }
      #course ul a:hover {
        background: #001D42;
        color: #fff; }
      #course ul a span {
        display: block; }
      #course ul a > span:nth-of-type(1) {
        border-bottom: 1px solid #ffff64;
        font-size: 0.777em;
        padding: .3em;
        font-weight: 500; }
        @media screen and (min-width: 960px) {
          #course ul a > span:nth-of-type(1) {
            padding: .5em; } }
      #course ul a > span:nth-of-type(2) {
        padding: .2em; }
        @media screen and (min-width: 960px) {
          #course ul a > span:nth-of-type(2) {
            padding: .8em; } }

#pickup h3,
#admission h3,
#facility h3 {
  margin: auto;
  border-top: 1px solid #001D42;
  position: relative;
  padding: 1em .5em;
  max-width: 1483px; }
  @media screen and (min-width: 1279px) {
    #pickup h3,
    #admission h3,
    #facility h3 {
      font-size: 54px; } }
  #pickup h3:after, #pickup h3:before,
  #admission h3:after,
  #admission h3:before,
  #facility h3:after,
  #facility h3:before {
    content: "";
    display: block;
    position: absolute;
    height: 10px;
    left: 0;
    top: -5px; }
  #pickup h3:before,
  #admission h3:before,
  #facility h3:before {
    background: #001D42;
    width: 25%;
    max-width: 290px; }
  #pickup h3:after,
  #admission h3:after,
  #facility h3:after {
    background: #ffff64;
    width: 8%;
    max-width: 54px; }

#pickup {
  margin-top: 30px;
  margin-bottom: 90px;
  padding-top: 5px; }
  @media screen and (min-width: 1279px) {
    #pickup {
      margin-bottom: 150px; } }
  #pickup h3 span {
    width: 130px;
    height: 26px;
    display: block;
    margin: .3em auto .5em; }
    @media screen and (min-width: 1279px) {
      #pickup h3 span {
        width: 217px;
        height: 81px;
        margin-bottom: 0; } }
    #pickup h3 span img {
      width: 100%;
      display: block; }

.pickup {
  position: relative; }
  @media screen and (min-width: 1279px) {
    .pickup {
      max-width: 1489px;
      margin: 0 auto;
      padding: 0 10px; } }
  .pickup:before {
    content: "";
    display: block;
    width: 70px;
    height: 65px;
    background-size: 70px auto;
    position: absolute;
    top: -35px;
    left: 5px;
    z-index: 6; }
  @media screen and (min-width: 1279px) {
    .pickup:before {
      left: auto;
      right: 0;
      top: 70px; }
    .pickup:after {
      content: "";
      display: block;
      height: 1px;
      position: absolute;
      top: 100px;
      right: 80px;
      left: 60px;
      z-index: -1;
      background: #ffff64; } }
  .pickup:nth-of-type(1):before {
    background-image: url(/img/page/special/info/pickup01.svg);
    background-size: 70px auto; }
  .pickup:nth-of-type(2):before {
    background-image: url(/img/page/special/info/pickup02.svg);
    background-size: 70px auto; }
  .pickup:nth-of-type(3):before {
    background-image: url(/img/page/special/info/pickup03.svg);
    background-size: 70px auto; }
  .pickup:nth-of-type(2), .pickup:nth-of-type(3) {
    margin-top: 96px; }
    .pickup:nth-of-type(2):after, .pickup:nth-of-type(3):after {
      content: "";
      display: block;
      height: 60px;
      width: 1px;
      background: #001D42;
      position: absolute;
      top: -90px;
      left: 35px; }
      @media screen and (min-width: 1279px) {
        .pickup:nth-of-type(2):after, .pickup:nth-of-type(3):after {
          left: auto;
          right: 35px;
          height: 90px;
          top: -60px; } }
  .pickup .mv {
    position: relative;
    background: #F1F6FC;
    padding-top: 30px;
    border-top: 1px solid #ffff64;
    z-index: 5; }
    @media screen and (min-width: 960px) {
      .pickup .mv {
        background: transparent;
        border-top: none; }
        .pickup .mv:before {
          content: "";
          display: block;
          height: 1px;
          background: #ffff64;
          position: absolute;
          left: 0;
          width: 100vw;
          top: 0; } }
    @media screen and (min-width: 1279px) {
      .pickup .mv:before {
        display: none; } }
    .pickup .mv h4 {
      position: absolute;
      bottom: 0;
      right: 0;
      background: rgba(241, 248, 255, 0.8);
      color: #001D42;
      margin: 0;
      font-size: 19px;
      padding: 15px 20px;
      z-index: 6; }
      @media screen and (min-width: 1279px) {
        .pickup .mv h4 {
          font-size: 35px;
          background: #F1F6FC; } }
    .pickup .mv img {
      width: 100%; }
      @media screen and (min-width: 960px) {
        .pickup .mv img {
          max-width: 645px; } }
    @media screen and (min-width: 1279px) {
      .pickup .mv {
        margin-right: 15px; } }
    .pickup .mv > div {
      position: relative; }
  @media screen and (min-width: 960px) {
    .pickup {
      display: flex; }
      .pickup .mv,
      .pickup .right {
        width: 50%; }
      .pickup .right {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 10vw;
        position: relative;
        z-index: 1; }
        .pickup .right:before {
          content: "";
          display: block;
          background: #F1F6FC;
          position: absolute;
          top: 30%;
          bottom: 8%;
          left: -60%;
          right: -10px;
          z-index: -1; } }
  @media screen and (min-width: 1279px) {
    .pickup .right {
      padding-top: 180px;
      padding-bottom: 0; }
      .pickup .right:before {
        right: -900px;
        left: -80%; }
      .pickup .right:after {
        content: "";
        display: block;
        height: 1px;
        position: absolute;
        top: 100px;
        right: 80px;
        left: -150px;
        z-index: -1;
        background: #ffff64; } }

#facility {
  background-color: #001D42;
  padding-bottom: 1.5em;
  margin-bottom: 90px;
  position: relative; }
  @media screen and (min-width: 1279px) {
    #facility {
      margin-bottom: 150px;
      padding-bottom: 2.5em; } }
  #facility:before, #facility:after {
    content: "";
    display: block;
    background: #001D42;
    position: absolute; }
  #facility:before {
    height: 60px;
    width: 1px;
    top: -75px;
    left: 50%; }
  #facility:after {
    width: 50%;
    height: 1px;
    right: 0;
    bottom: -45px; }
  #facility h3 {
    color: #F1F6FC; }
    #facility h3:before {
      left: auto;
      right: 0;
      max-width: initial; }
    #facility h3:after {
      left: 75%; }
  #facility .h3Wrap {
    position: relative; }
    #facility .h3Wrap:after {
      content: "";
      display: block;
      left: 0;
      right: 0;
      top: 5px;
      height: 1px;
      background: #fff;
      position: absolute; }
  #facility ul {
    padding: 0; }
  #facility p {
    color: #fff;
    margin: 5px; }

#admission {
  background-color: rgba(241, 248, 255, 0.8);
  padding-bottom: 15px;
  position: relative; }
  @media screen and (min-width: 1279px) {
    #admission {
      padding-bottom: 0;
      display: flex; }
      #admission > div:nth-of-type(1) {
        width: 55%; }
      #admission > div:nth-of-type(2) {
        max-width: 700px;
        width: 45%; } }
  @media screen and (min-width: 1381px) {
    #admission > div:nth-of-type(1) {
      width: 50%; }
    #admission > div:nth-of-type(2) {
      width: 40%; } }
  #admission h3 {
    padding-left: 0;
    padding-right: 0;
    font-feature-settings: "palt";
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0, 29, 66, 0.4);
    padding-top: .5em; }
    #admission h3.noTag {
      padding-top: 1em; }
    #admission h3 span.tag {
      font-size: 18px;
      color: #ffff64;
      border-bottom: 1px solid #ffff64;
      margin: auto;
      width: auto;
      padding-bottom: 5px;
      display: table; }
    #admission h3 span.block {
      display: block;
      margin: 0 0 10px;
      width: 100%; }
    @media screen and (min-width: 1279px) {
      #admission h3 {
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; } }
    #admission h3 span {
      width: 235px;
      height: 26px;
      display: block;
      margin: .3em auto .5em; }
      #admission h3 span img {
        width: 100%;
        display: block; }
  #admission .h3Wrap {
    position: relative;
    z-index: 5;
    display: block; }
    @media screen and (min-width: 1279px) {
      #admission .h3Wrap {
        height: 100%; } }
  #admission .ad_header {
    position: relative; }
    #admission .ad_header img {
      width: 100%;
      display: block;
      position: relative; }
    @media screen and (min-width: 960px) {
      #admission .ad_header .img {
        position: relative;
        height: 350px;
        overflow: hidden; }
        #admission .ad_header .img img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); } }
    @media screen and (min-width: 1279px) {
      #admission .ad_header .img {
        position: absolute;
        height: auto;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; } }
  #admission h4 {
    margin-bottom: 0; }
    @media screen and (min-width: 1279px) {
      #admission h4 {
        margin-top: 0; } }
  #admission ul {
    list-style: none;
    margin: 1.5em 0 0 0;
    padding: 0;
    display: flex;
    justify-content: space-between; }
    #admission ul li {
      width: calc(50% - 5px); }
    @media screen and (min-width: 1279px) {
      #admission ul.long {
        display: block; }
        #admission ul.long li {
          width: 90%;
          max-width: 670px;
          margin-bottom: 1.3em; } }
  #admission a {
    display: block;
    text-align: center;
    position: relative;
    border: 1px solid #001D42;
    color: #001D42;
    padding: .8em;
    font-size: 18px;
    font-weight: 700;
    background-color: #fff;
    transition: .4s all; }
    #admission a:hover {
      background: #001D42;
      color: #fff; }
    #admission a:after {
      content: "";
      background: url(/img/page/special/info/yellow_arrow.svg);
      height: 18px;
      width: 22.13px;
      background-size: auto 18px;
      background-position: left center;
      position: absolute;
      top: calc(50% - 9px);
      left: 0; }

#slide img {
  width: 100%; }
#slide .slide-arrow {
  height: 28px;
  width: 28px;
  position: absolute; }
@media screen and (min-width: 960px) {
  #slide.slick01 {
    margin: 0 30px; } }
#slide.slick01 .slide-arrow {
  top: 23vw;
  z-index: 5; }
  @media screen and (min-width: 960px) {
    #slide.slick01 .slide-arrow {
      top: calc( 50% - 2em); } }
#slide.slick01 .next-arrow {
  right: 4px; }
  @media screen and (min-width: 960px) {
    #slide.slick01 .next-arrow {
      right: -10px; } }
#slide.slick01 .prev-arrow {
  left: 4px; }
  @media screen and (min-width: 960px) {
    #slide.slick01 .prev-arrow {
      left: -10px; } }
#slide.slick01 .slick-slide {
  margin: 0 8px; }
#slide.slick01 li > span {
  position: relative;
  display: inline-block; }
#slide.slick01 span.name {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #001D42;
  color: #ffff64;
  display: inline-block;
  padding: .2em .7em 0em .3em; }
@media screen and (max-width: 560px) {
  #slide.slickpickup {
    max-width: 560px;
    max-height: 560px;
    border: 5px solid #F1F6FC; } }
@media screen and (min-width: 960px) and (max-width: 1279px) {
  #slide.slickpickup {
    max-width: 360px;
    max-height: 360px;
    border: 5px solid #F1F6FC; } }
@media screen and (min-width: 1279px) {
  #slide.slickpickup {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    #slide.slickpickup .img {
      width: 50%;
      max-width: 340px;
      padding: 5px; }
      #slide.slickpickup .img p {
        border-bottom: 1px solid #001D42;
        padding: 0 .5rem .5rem;
        margin-top: 0.5em; }
    #slide.slickpickup .message {
      max-width: 680px;
      margin-top: 3rem; }
    #slide.slickpickup .message {
      display: flex;
      background: #001D42;
      margin: 5px;
      align-items: flex-start; }
      #slide.slickpickup .message img, #slide.slickpickup .message p {
        display: block;
        max-width: 340px; } }
#slide.slickpickup .slide-arrow {
  top: calc( 50% - 14px);
  z-index: 5; }
#slide.slickpickup .next-arrow {
  right: -5px; }
#slide.slickpickup .prev-arrow {
  left: -5px; }
#slide.slickpickup .slick-slide {
  position: relative; }
@media screen and (max-width: 1279px) {
  #slide.slickpickup .img p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 29, 66, 0.4);
    color: #fff;
    margin: 0;
    padding: 0.6em;
    line-height: 1.8em; } }
#slide.slickpickup .message > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em; }
  @media screen and (max-width: 1279px) {
    #slide.slickpickup .message > div {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
      background: rgba(0, 29, 66, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1em 1.5em; } }
#slide.slickpickup .message p {
  color: #fff;
  line-height: 1.8em; }

.nyushi {
  background: #ffff64;
  writing-mode: vertical-rl;
  margin: 0;
  position: fixed;
  right: 0;
  top: auto;
  bottom: 25%;
  z-index: 10;
  transition: .2s all;
  opacity: 1;
  visibility: visible; }
  .nyushi.hide, .nyushi.hide a {
    opacity: 0;
    visibility: hidden; }
  .nyushi.hide a {
    transition: .3s all; }
  .nyushi.scrolled {
    bottom: auto;
    top: 5%; }
  .nyushi a {
    color: #001D42;
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: 5px;
    padding: .5em;
    display: block;
    transition: .4s all;
    opacity: 1;
    visibility: visible; }
    .nyushi a:hover {
      opacity: .7; }
    .nyushi a span {
      border-top: 1px solid #001D42;
      border-bottom: 1px solid #001D42;
      padding: .3em;
      display: block; }

footer {
  padding: 40px 0;
  text-align: center; }
  @media screen and (min-width: 1279px) {
    footer {
      padding: 70px 0; } }

.slidepc {
  position: relative; }
  .slidepc .message {
    position: absolute;
    bottom: 0;
    right: 0; }

/*先生確認中の変更 */
.h2Com {
  color: #ffff64;
  font-size: 0.5em;
  display: inline-block; }

#facility h3 {
  line-height: 1em;
  padding-top: .5em; }

/* KV変更案↓*/
@media screen and (max-width: 1279px) {
  .nyushi {
    bottom: auto;
    top: 5%; }

  .kv h2 {
    letter-spacing: 2px;
    padding-bottom: 3px; }
  .kv .catch {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    padding-top: 0;
    background: linear-gradient(0deg, rgba(0, 29, 66, 0.55) 0%, rgba(0, 29, 66, 0.1) 50%, rgba(0, 29, 66, 0) 100%); }
    .kv .catch p {
      letter-spacing: 2px;
      margin-top: 0;
      font-size: 35px;
      margin-bottom: 0.5em;
      line-height: 1.35em; } }
@media screen and (min-width: 1279px) {
  .kv .catch {
    background: linear-gradient(90deg, rgba(0, 29, 66, 0.4) 0%, rgba(0, 29, 66, 0.2) 60%, rgba(0, 29, 66, 0) 100%); }
    .kv .catch p span.bg {
      display: inline-block;
      position: relative;
      z-index: 1;
      padding: .8em;
      line-height: 1em; }
      .kv .catch p span.bg:before, .kv .catch p span.bg:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0; }
      .kv .catch p span.bg:after {
        top: 0;
        left: 0;
        right: 0;
        background: #e0e048;
        mix-blend-mode: soft-light;
        z-index: -1;
        opacity: 0.3; }
      .kv .catch p span.bg:before {
        height: 1px;
        left: 0;
        right: 15%;
        background: #ffff64; } }