@charset "UTF-8";
/*タブレットは端末判定で幅1200pxを画面100%で表示するようJ-Queryで制御*/
/*media-pc02はPCブラウザ可変対応*/
/*グラデーション用*/
/*グラデーション用*/
/*グラデーション用*/
/*グラデーション用*/
.commonTitle01 {
  color: #00336A;
  font-weight: 700;
  font-size: 212.5%;
  letter-spacing: 0.1em;
  margin-bottom: 0.8em;
  line-height: 1.5;
}
@media screen and (max-width: 599px) {
  .commonTitle01 {
    font-size: 125%;
  }
}
.commonTitle01::after {
  display: block;
  content: "";
  width: 9.375rem;
  height: 2px;
  background: linear-gradient(to right, #BEAF73 0%, #BEAF73 33.33%, #00336A 33.33%, #00336A 100%);
  margin-top: 0.6em;
}
@media screen and (max-width: 599px) {
  .commonTitle01::after {
    width: 3.75em;
  }
}

@media screen and (max-width: 599px) {
  #top {
    font-size: 4.2vw;
  }
}

/*******************************
mainVisual
*******************************/
#mainVisual .img01 {
  position: relative;
}
#mainVisual .img01 .txt {
  position: absolute;
  top: 20%;
  right: 7vw;
  width: 100%;
  max-width: 570px;
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  #mainVisual .img01 .txt {
    top: 15%;
    right: 4vw;
    max-width: 330px;
  }
}
@media screen and (max-width: 599px) {
  #mainVisual .img01 .txt {
    top: 50%;
    font-size: 100%;
    line-height: 1.4;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-family: "Noto Serif JP", serif;
    color: #00336A;
    text-align: right;
  }
}
#mainVisual .img01 .txt h1 {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 2.6vw;
  color: #00336A;
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  #mainVisual .img01 .txt h1 {
    font-size: 3.5vw;
  }
}
@media screen and (max-width: 599px) {
  #mainVisual .img01 .txt h1 {
    font-size: 100%;
    line-height: 1.4;
    box-sizing: border-box;
  }
}
#mainVisual .img01 .txt .moreBtn05 {
  margin: 0 auto;
}
#mainVisual .img01 .btn01 {
  position: absolute;
  bottom: 18.8%;
  right: 20.9%;
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  #mainVisual .img01 .btn01 {
    right: 23.5%;
    bottom: 10%;
  }
}
@media screen and (max-width: 599px) {
  #mainVisual .img01 .btn01 {
    right: 0.75em;
    bottom: 5%;
  }
}
#mainVisual .img01 .btn01 a {
  display: block;
  padding: 0.35em 1em 0.5em 0em;
  width: 15em;
  background: url(/common2022/images/icon_basic.svg) no-repeat 98.5% center rgba(255, 255, 255, 0.5);
  color: #00336A;
  font-size: 1vw;
  background-size: 1em auto;
  font-weight: 500;
  text-align: center;
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  #mainVisual .img01 .btn01 a {
    font-size: 1.25vw;
  }
}
@media screen and (max-width: 599px) {
  #mainVisual .img01 .btn01 a {
    padding: 0.25em 1.75em 0.25em 0.75em;
    font-size: 0.7em;
    width: auto;
  }
}

/*******************************
information
*******************************/
.information {
  margin: 2.5em auto 0;
  text-align: center;
  width: 30em;
  max-width: 92%;
}
@media screen and (max-width: 599px) {
  .information {
    width: 92%;
  }
}
.information a {
  display: block;
  background-color: #D93A49;
  padding: 1.25em;
  border-radius: 8px;
  line-height: 1.4;
  box-sizing: border-box;
  /*img {
      width: 100%;
      height: auto;
  }*/
}
.information__subTtl {
  padding: 2px 24px 4px;
  background-color: #000;
  color: #fff;
  border-radius: 500px;
  max-width: 20em;
  margin: 0 auto;
  font-weight: 900;
  font-size: 125%;
}
@media screen and (max-width: 599px) {
  .information__subTtl {
    font-size: 112.5%;
  }
}
.information__ttl {
  margin-top: 0.5em;
  font-size: 1.625em;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}
@media screen and (max-width: 599px) {
  .information__ttl {
    font-size: 1.5em;
  }
}
.information__ttl span {
  display: block;
  font-size: 60%;
}
.information__inner {
  margin-top: 0.5em;
}
.information .txt01 {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
  text-align: center;
  font-size: 137.5%;
}
@media screen and (max-width: 599px) {
  .information .txt01 {
    font-size: 112.5%;
  }
}
.information .btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0.5em;
  color: #00336A;
  font-size: 1em;
  font-weight: bold;
  border-radius: 6px;
  width: 360px;
  margin: 0.75em auto 0;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
}
@media screen and (max-width: 599px) {
  .information .btn {
    font-size: 16px;
  }
}
.information .btn .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
}

/*******************************
moreBtn01
*******************************/
.moreBtn01 {
  width: 92%;
  max-width: 43.5em;
  margin: 50px auto -10px;
}
@media screen and (max-width: 599px) {
  .moreBtn01 {
    margin: 30px auto;
  }
}
.moreBtn01 a {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.75em 0 0.5em;
  font-size: 125%;
  font-weight: 700;
  color: #fff;
  background: url(/common2022/images/icon_basic-gold.svg) no-repeat 98.5% center #00336a;
  background-size: 1.15em auto;
  background-color: #00336a;
  box-sizing: border-box;
}
@media screen and (max-width: 599px) {
  .moreBtn01 a {
    font-size: 100%;
    line-height: 1.4;
  }
}
.moreBtn01 a:not(:last-child) {
  margin-bottom: 0.75em;
}
.moreBtn01 a .icon01 {
  width: 4.5em;
  height: auto;
  margin-top: -0.35em;
  margin-right: 1em;
}
@media screen and (max-width: 599px) {
  .moreBtn01 a .icon01 {
    width: 3.5em;
    margin-right: 0.5em;
  }
}
.moreBtn01 a strong {
  line-height: 1.6;
}
.moreBtn01 a strong span {
  font-size: 75%;
  display: block;
}
@media screen and (max-width: 599px) {
  .moreBtn01 a strong span {
    font-size: 60%;
  }
}

/*******************************
moreBtn01
*******************************/
/*.moreBtn01 {
	width: 90%;
	max-width: 43.5em;
    max-width: 46em;
	margin: 50px auto -10px;

	@include media-sp {
		margin: 30px auto;
	}

	a {
		display: flex;
        justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0.5em 5px 0.7em;
        font-size: 200%;
		font-weight: 700;
		color: #fff;
        background: url(/common2022/images/icon_basic-gold.svg) no-repeat 98.5% center #00336a;
        background-size: 0.85em auto;
		background-color: #00336a;
		box-sizing: border-box;
        position: relative;

		@include media-sp {
            font-size: 112.5%;
            line-height: 1.3;
            display: block;
            text-align: center;
            padding: 0 0 0.7em;
		}

        &:not(:last-child) {
            margin-bottom: 0.75em;
        }

        &.bnr01 {
            padding: 0.85em 5px 1em;
            font-size: 1.25em;

            @include media-sp {
                font-size: 100%;
                padding: 0.5em 0 0.6em;
            }

            img {
                width: 3.5em;
                height: auto;
                position: absolute;
                top: 50%;
                left: 2.5%;
                transform: translate(0, -50%);

                @include media-sp {
                    width: 3.75em;
                    left: -2.5%;
                }
            }
        }

        .icon01 {
            width: 5em;
            height: auto;
            position: absolute;
            top: 50%;
            left: -1.5px;
            transform: translate(0,-50%);

            @include media-sp {
                width: 100%;
                position: static;
                transform: none;
                font-weight: 900;
                color: #ff0000;
                background: #ffff00;
                text-align: center;
                font-size: 75%;
                padding: 0.1em 0;
                letter-spacing: 0.1em;
            }
        }

        .icon02 {
            width: 3.25em;
            height: auto;
            position: absolute;
            top: 50%;
            right: 6%;
            transform: translate(0, -50%);

            @include media-sp {
                width: 3em;
                top: 28%;
                right: 8%;
                transform: none;
            }
        }

        strong {
            line-height: 1.1;
            text-align: center;

            @include media-sp {
                line-height: 1.2;
                text-align: left;
                display: block;
                padding: 0.5em 0 0 3.5%;
            }

            span {
                font-size: 60%;
                // display: block;

                @include media-sp {
                    font-size: 70%;
                }
            }

            b {
                margin-left: 0.5em;
            }
        }
	}
}*/
/*******************************
moreBtn02
*******************************/
.moreBtn02 {
  border: 2px solid #00336a;
  background: #fff;
  color: #00336a;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  display: block;
  font-weight: 700;
  height: auto;
  width: 90%;
  max-width: 35em;
  font-size: 125%;
  margin: 0 auto;
  padding: 3px;
  line-height: 2.25em;
}
@media screen and (max-width: 599px) {
  .moreBtn02 {
    width: 92.9%;
    font-size: 100%;
    line-height: 1.4;
    margin: 0 auto;
  }
}
.moreBtn02::after {
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background-image: url(/faculty/common/images/arrow01.svg);
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -13px;
}
@media screen and (max-width: 599px) {
  .moreBtn02::after {
    width: 20px;
    height: 20px;
  }
}
.moreBtn02 div {
  border: 1px solid #00336a;
  box-sizing: border-box;
  text-align: center;
  height: auto;
  width: auto;
  margin: 0;
  display: block;
}
@media screen and (max-width: 599px) {
  .moreBtn02 div {
    padding-bottom: 0.2em;
  }
}
.moreBtn02 div a {
  display: block;
}
.moreBtn02 div a span {
  font-size: 80%;
}

/*******************************
moreBtn03
*******************************/
.moreBtn03 {
  width: 1200px;
  max-width: 92%;
  margin: 0 auto;
  padding: 0 0 1.5em;
}
@media screen and (max-width: 599px) {
  .moreBtn03 {
    margin: 1.5em auto 0;
  }
}
.moreBtn03 ul {
  display: flex;
  justify-content: space-between;
}
.moreBtn03 ul li {
  width: 48%;
}
.moreBtn03 ul li a {
  display: block;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3215686275);
  border-radius: 0.375em;
}
.moreBtn03 ul li a:hover {
  box-shadow: none;
}
.moreBtn03 p {
  width: 48%;
  margin: -1em auto -1.5em;
}
.moreBtn03 p a {
  display: block;
}

/*******************************
moreBtn04
*******************************/
.moreBtn04 {
  width: 92%;
  max-width: 43.5em;
  margin: 50px auto 0;
}
@media screen and (max-width: 599px) {
  .moreBtn04 {
    display: block;
    margin: 30px auto;
  }
}
.moreBtn04 ul {
  width: 100%;
}
.moreBtn04 ul li {
  width: 48%;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  .moreBtn04 ul li {
    width: 100%;
  }
}
.moreBtn04 ul li:nth-child(even) {
  margin-left: 4%;
}
.moreBtn04 ul li a {
  display: block;
}
@media screen and (max-width: 599px) {
  .moreBtn04 ul li a {
    width: 100%;
    margin: 0 0 0.8em;
  }
}

/*******************************
moreBtn05-Wcampaign
*******************************/
.moreBtn05 {
  width: 92%;
  max-width: 43.5em;
  margin: 50px auto -10px;
  position: relative;
}
@media screen and (max-width: 599px) {
  .moreBtn05 {
    margin: 30px auto;
  }
}
.moreBtn05 .moreBtn05Btn01 {
  display: block;
  position: absolute;
  width: 45.833%;
  left: 0.86%;
  bottom: 1.66%;
}
.moreBtn05 .moreBtn05Btn02 {
  display: block;
  position: absolute;
  width: 45.833%;
  right: 0.86%;
  bottom: 1.66%;
}

/*******************************
entryBtn01
*******************************/
.entryBtn01 {
  width: 92%;
  max-width: 43.5em;
  margin: 2.5em auto -0.75em;
}
@media screen and (max-width: 599px) {
  .entryBtn01 {
    display: block;
    margin: 1.35em auto 0;
  }
}
.entryBtn01 ul {
  display: flex;
  justify-content: space-between;
}
.entryBtn01 ul li {
  width: 48%;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  .entryBtn01 ul li {
    width: 100%;
  }
}
.entryBtn01 ul li:nth-child(even) {
  margin-left: 4%;
}
.entryBtn01 ul li a {
  display: block;
  background: url("/common2022/images/icon_cellphone.svg") 96% center no-repeat #A5934A;
  background-size: 1em auto;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  padding: 0.5em 0;
  font-size: 1.125em;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  .entryBtn01 ul li a {
    font-size: 1em;
    padding: 0.35em 0;
  }
}

/*******************************
notice
*******************************/
#notice {
  background: #E4E9FE;
  padding: 0.625em 1.875em;
  color: #00336A;
}
@media screen and (max-width: 599px) {
  #notice {
    padding-right: 2.5%;
    padding-left: 2.5%;
  }
}
#notice dl {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 599px) {
  #notice dl {
    justify-content: space-between;
    align-items: inherit;
  }
}
#notice dl dt {
  font-weight: 700;
  padding-right: 1.875em;
  margin-right: 1.5em;
  border-right: 2px solid #BEAF73;
  line-height: 1.5;
}
@media screen and (max-width: 599px) {
  #notice dl dt {
    padding-right: 0.85em;
    margin-right: 0.85em;
    font-size: 75%;
    display: flex;
    min-height: 100%;
    align-items: center;
    white-space: nowrap;
  }
}
#notice dl dd {
  display: flex;
  font-size: 87.5%;
}
@media screen and (max-width: 599px) {
  #notice dl dd {
    display: block;
    font-size: 75%;
    line-height: 1.5;
  }
}
#notice dl dd .date {
  margin-right: 1.4285em;
}
@media screen and (max-width: 599px) {
  #notice dl dd .date {
    margin-right: 0;
    font-size: 83.33%;
    margin-bottom: 0.25em;
  }
}
/*******************************
oc
*******************************/
#oc {
  margin-top: 3.125em;
  padding: 3em 0 2.5em;
  background: rgb(144, 236, 206);
  background: linear-gradient(to right, rgb(144, 236, 206) 0%, rgb(131, 232, 248) 100%);
}
@media screen and (max-width: 599px) {
  #oc {
    padding-bottom: 1.75em;
  }
}
#oc section {
  width: 1200px;
  max-width: 93.5%;
  margin: 0 auto;
}
#oc section h2 {
  font-size: 2.625em;
  color: #00336A;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (max-width: 599px) {
  #oc section h2 {
    font-size: 1.25em;
    line-height: 1.3;
  }
}
#oc section .list {
  padding: 0 4.4%;
  margin-top: 1.35em;
}
@media screen and (max-width: 599px) {
  #oc section .list {
    padding: 0 2.5%;
    margin-top: 1em;
  }
}
#oc section .list li {
  background: #fff;
  box-shadow: 0 0.375em 0.5em rgba(0, 0, 0, 0.16);
  text-align: center;
  margin: 0 0.5em;
  border-radius: 0.375em;
  transition: all 0.2s ease;
}
#oc section .list li:hover {
  box-shadow: none;
}
#oc section .list li a {
  display: block;
  padding: 1em 0;
}
#oc section .list li .active {
  background: #CEC396;
  font-size: 75%;
  text-align: center;
  width: 8.33em;
  margin: 0 auto 0.2em;
}
@media screen and (max-width: 599px) {
  #oc section .list li .active {
    font-size: 87.5%;
    width: 7em;
    margin: 0 auto 0.5em;
    line-height: 1.8;
  }
}
#oc section .list li .date {
  margin-bottom: 0.2em;
  line-height: 1.45;
  white-space: nowrap;
  font-size: 98%;
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  #oc section .list li .date {
    font-size: 1.15vw;
  }
}
@media screen and (max-width: 599px) {
  #oc section .list li .date {
    font-size: 65%;
    font-feature-settings: "palt";
  }
}
#oc section .list li .date strong {
  background: linear-gradient(transparent 30%, #F2EF5E 30%);
}
#oc section .list li .date .txt01 {
  color: #00336A;
  font-size: 3.5em;
}
#oc section .list li .date .txt02 {
  color: #00336A;
  font-size: 1.75em;
}
#oc section .list li .date .week {
  color: #000000;
  font-size: 1.125em;
}
#oc section .list li .btn {
  border: 1px solid #00336A;
  border-radius: 0.375em;
  padding: 0.2em;
  text-align: center;
  color: #00336A;
  font-weight: 700;
  background: url(/common2022/images/icon_basic-gold.svg) no-repeat 96% center;
  margin: 0.5em auto 0;
  width: 85%;
}
@media screen and (max-width: 599px) {
  #oc section .list li .btn {
    margin-top: 1.25em;
    font-size: 75%;
    width: 80%;
  }
}
#oc section .slide .slide-arrow {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 2.5em;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media screen and (max-width: 599px) {
  #oc section .slide .slide-arrow {
    width: 2.25em;
    display: none !important;
  }
}
#oc section .slide .slide-arrow:hover {
  opacity: 0.8;
}
#oc section .slide .prev-arrow {
  left: 0;
}
#oc section .slide .next-arrow {
  right: 0;
}
#oc section .slide .slick-list {
  padding: 1em 0.2em 2em !important;
}
@media screen and (max-width: 599px) {
  #oc section .slide .slick-list {
    padding: 0 25% !important;
  }
}

/*******************************
learning
*******************************/
#learning {
  padding: 7.5em 0 0;
}
@media screen and (max-width: 599px) {
  #learning {
    padding: 3.5em 0 0;
  }
}
#learning .flex {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  #learning .flex {
    gap: 0;
  }
}
#learning .flex > section {
  width: calc((100% - 24px) / 2);
}
@media screen and (max-width: 599px) {
  #learning .flex > section {
    width: 100%;
  }
}
#learning .flex > section section .list01 li {
  width: 80%;
}
@media screen and (max-width: 599px) {
  #learning .flex > section section .list01 li {
    width: 100%;
  }
}
#learning section {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#learning section h2 {
  text-align: center;
}
#learning section h2::after {
  margin-right: auto;
  margin-left: auto;
}
#learning section .txt01 {
  padding-top: 0.5em;
  text-align: center;
}
@media screen and (max-width: 599px) {
  #learning section .txt01 {
    font-size: 87.5%;
    text-align: left;
  }
}
#learning section section {
  margin-top: 3.5em;
  max-width: 100%;
}
@media screen and (max-width: 599px) {
  #learning section section {
    margin-top: 2.25em;
  }
}
#learning section section h3 {
  font-size: 2em;
  text-align: center;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  background: #00336A;
  padding: 0.55em 0;
}
@media screen and (max-width: 599px) {
  #learning section section h3 {
    font-size: 1.25em;
    padding: 0.85em 0;
  }
}
#learning section section h3 img {
  height: 1em;
  vertical-align: middle;
  margin: -0.2em 0.6em 0 0;
}
#learning section section section {
  margin-top: 2.25em;
  max-width: 100%;
}
@media screen and (max-width: 599px) {
  #learning section section section {
    margin-top: 1em;
  }
}
#learning section section section .img-wrap {
  width: 100%;
  max-width: 1000px;
  height: 300px;
  margin: 0 auto 16px auto;
}
@media screen and (max-width: 599px) {
  #learning section section section .img-wrap {
    height: 180px;
  }
}
#learning section section section .img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#learning section section section h4 {
  margin-bottom: 24px;
  color: #00336A;
  font-weight: 700;
  text-align: center;
  font-size: 1.75em;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 599px) {
  #learning section section section h4 {
    font-size: 1.3em;
  }
}
#learning section section section h4 strong {
  background: linear-gradient(transparent 70%, #E4E9FE 70%);
}
@media screen and (max-width: 599px) {
  #learning section section section h4 strong {
    background: linear-gradient(transparent 40%, #E4E9FE 40%);
  }
}
#learning section section section .list01 {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  flex-wrap: wrap;
}
@media screen and (max-width: 599px) {
  #learning section section section .list01 {
    gap: 0;
    width: 95%;
    margin-top: 1.5em;
    padding-bottom: 3em;
  }
}
#learning section section section .list01 li {
  width: calc((100% - 32px) / 3);
  box-shadow: 0 0.375em 1.125em rgba(0, 0, 0, 0.16);
  background: #fff;
  position: relative;
  transition: all 0.2s ease;
}
@media screen and (max-width: 599px) {
  #learning section section section .list01 li {
    width: 100%;
    margin-right: 0;
  }
}
#learning section section section .list01 li:hover {
  box-shadow: none;
}
#learning section section section .list01 li:nth-child(4n) {
  margin-right: 0;
}
#learning section section section .list01 li.night .time {
  background: #AC9020;
}
#learning section section section .list01 li.night dl dt {
  color: #A18100;
}
#learning section section section .list01 li.online .time {
  background: #026185;
}
#learning section section section .list01 li.online dl dt {
  color: #026185;
}
#learning section section section .list01 li a {
  display: block;
}
#learning section section section .list01 li a .time {
  background: #00336A;
  color: #fff;
  text-align: center;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  #learning section section section .list01 li a .time {
    padding: 0.2em 0;
  }
}
#learning section section section .list01 li a .time img {
  display: inline-block;
  height: 1.2em;
  vertical-align: middle;
  margin: -0.25em 0.45em 0 0;
}
#learning section section section .list01 li a dl {
  padding: 1em 1em 4em;
  font-feature-settings: "palt";
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  #learning section section section .list01 li a dl {
    font-size: 1.2vw;
  }
}
@media screen and (max-width: 599px) {
  #learning section section section .list01 li a dl {
    padding: 1em;
  }
}
#learning section section section .list01 li a dl dt {
  font-weight: 700;
  font-size: 112.5%;
  color: #00336A;
  margin-bottom: 0.5em;
  line-height: 1.6;
}
@media screen and (max-width: 599px) {
  #learning section section section .list01 li a dl dt {
    font-size: 100%;
  }
}
#learning section section section .list01 li a dl dt span {
  font-size: 66.66%;
}
#learning section section section .list01 li a dl dd p {
  line-height: 1.4;
  text-indent: -2.5em;
  margin-left: 2.5em;
}
@media screen and (max-width: 599px) {
  #learning section section section .list01 li a dl dd p {
    font-size: 84%;
  }
}
#learning section section section .list01 li a dl dd .btn {
  display: block;
  border: 1px solid #00336A;
  border-radius: 0.375em;
  padding: 0.2em;
  text-align: center;
  color: #00336A;
  font-weight: 700;
  background: url(/common2022/images/icon_basic.svg) no-repeat 96% center;
  background-size: 1.5em auto;
  font-size: 75%;
  width: 80%;
  position: absolute;
  bottom: 1.33em;
  left: 50%;
  transform: translate(-50%, 0);
}
@media screen and (max-width: 599px) {
  #learning section section section .list01 li a dl dd .btn {
    width: 65%;
    position: static;
    transform: none;
    margin: 1em auto 0;
  }
}
#learning section section section.night h4 strong {
  background: linear-gradient(transparent 70%, #F1E9C8 70%);
}
@media screen and (max-width: 599px) {
  #learning section section section.night h4 strong {
    background: linear-gradient(transparent 40%, #F1E9C8 40%);
  }
}
#learning section section section.night d .list01 li a dl dd .btn {
  background: url("/common2022/images/icon_basic-gold.svg") no-repeat 96% center;
  background-size: 1.5em auto;
}
#learning section section.online h3 {
  background: #026185;
}
#learning section section.online section h4 strong {
  background: linear-gradient(transparent 70%, #D7F1FB 70%);
}
@media screen and (max-width: 599px) {
  #learning section section.online section h4 strong {
    background: linear-gradient(transparent 40%, #D7F1FB 40%);
  }
}
#learning section section.online section .list01 li a dl dd .btn {
  background: url("/common2022/images/icon_basic-blue01.svg") no-repeat 96% center;
  background-size: 1.5em auto;
}

/*******************************
feature
*******************************/
#feature {
  margin-top: 5em;
  background: rgb(228, 233, 254);
  background: linear-gradient(90deg, #E4E9FE 0%, #EFFFFE 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="$bg_color0401",endColorstr="$bg_color0402",GradientType=1);
  padding: 7.75em 0 5em;
}
@media screen and (max-width: 599px) {
  #feature {
    margin-top: 1em;
    padding: 4em 0 3em;
  }
}
#feature section {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#feature section h2 {
  text-align: center;
}
#feature section h2::after {
  margin-left: auto;
  margin-right: auto;
}
#feature section .txt01 {
  text-align: center;
  padding-top: 0.5em;
}
@media screen and (max-width: 599px) {
  #feature section .txt01 {
    font-size: 87.5%;
    text-align: left;
  }
}
@media screen and (max-width: 599px) {
  #feature section .txt01 br {
    display: none;
  }
}
#feature section .list01 {
  display: flex;
  justify-content: space-between;
  margin: 3.75em 0 0;
}
@media screen and (max-width: 599px) {
  #feature section .list01 {
    display: block;
    margin: 1.65em 0 0;
    padding: 0 4.5%;
  }
}
#feature section .list01 li {
  width: 30.83%;
}
@media screen and (max-width: 599px) {
  #feature section .list01 li {
    width: auto;
    margin-bottom: 1em;
  }
}
#feature section .list01 li a {
  display: flex;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
}
#feature section .list01 li a:hover {
  box-shadow: none;
}
#feature section .list01 li a div {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 1.875em 1.875em 3em 1.875em;
}
@media screen and (max-width: 599px) {
  #feature section .list01 li a div {
    padding: 1.2em 1.2em 2.25em 1.2em;
  }
}
#feature section .list01 li a div h3 {
  font-size: 125%;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  background: #00336A;
  width: 16.5em;
  height: 3.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #BEAF73;
  position: relative;
  margin: -1.6em 0 0.45em -2.3em;
}
@media screen and (max-width: 599px) {
  #feature section .list01 li a div h3 {
    font-size: 112.5%;
    width: 16em;
    margin: -1.6em 0 0.45em -1.85em;
  }
}
#feature section .list01 li a div h3::after {
  content: "";
  display: block;
  border-top: 0.4em solid #476C93;
  border-right: 0.4em solid #476C93;
  border-bottom: 0.4em solid transparent;
  border-left: 0.4em solid transparent;
  position: absolute;
  top: 103%;
  left: 0;
}
#feature section .list01 li a div p {
  line-height: 1.8;
}
@media screen and (max-width: 599px) {
  #feature section .list01 li a div p {
    font-size: 87.5%;
    min-height: 8.75em;
  }
}
#feature section .list01 li a div .btn01 {
  position: absolute;
  bottom: 1em;
  right: 1.875em;
  color: #00336A;
  font-weight: 700;
  background: url(/common2022/images/icon_basic-gold.svg) no-repeat 100% center;
  background-size: 1.375em auto;
  padding-right: 1.875em;
}
@media screen and (max-width: 599px) {
  #feature section .list01 li a div .btn01 {
    font-size: 100%;
    right: 1em;
    bottom: 0.75em;
    min-height: 1em;
  }
}
#feature section .list02 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3.75em;
}
@media screen and (max-width: 599px) {
  #feature section .list02 {
    display: block;
    margin-top: 2em;
  }
}
#feature section .list02 li {
  width: 48.35%;
  margin-bottom: 2.5em;
}
@media screen and (max-width: 599px) {
  #feature section .list02 li {
    width: auto;
    margin-bottom: 1em;
  }
}
#feature section .list02 li:nth-child(odd) {
  margin-right: 3.3%;
}
@media screen and (max-width: 599px) {
  #feature section .list02 li:nth-child(odd) {
    margin-right: 0;
  }
}
#feature section .list02 li:last-child {
  margin-right: 0;
}
#feature section .list02 li a {
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.3215686275);
  border-radius: 0.375em;
  display: block;
}
#feature section .list02 li a:hover {
  box-shadow: none;
}
/*******************************
go
*******************************/
#go {
  background: url(/top2022/images/bg_logo.png) no-repeat 92% -5.75em;
  background-size: 23em auto;
  padding: 7.75em 0 5em;
}
@media screen and (max-width: 599px) {
  #go {
    background: url(/top2022/images/bg_logo.png) no-repeat 108% -2.2em;
    background-size: 42% auto;
    padding: 4em 0 3em;
  }
}
#go section {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#go section h2 {
  text-align: center;
}
#go section h2::after {
  margin-left: auto;
  margin-right: auto;
}
#go section .list01 {
  display: flex;
  /*justify-content: space-between;*/
  justify-content: center;
  padding-top: 3em;
}
@media screen and (max-width: 599px) {
  #go section .list01 {
    display: block;
    padding-top: 1.5em;
  }
}
#go section .list01 li {
  width: 48.3%;
  margin-bottom: 2.125em;
}
@media screen and (max-width: 599px) {
  #go section .list01 li {
    width: auto;
    margin-bottom: 1.25em;
  }
}
#go section .list01 li a {
  display: block;
  position: relative;
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
}
#go section .list01 li a:hover {
  box-shadow: none;
}
#go section .list01 li a dl {
  position: absolute;
  top: 3.4375em;
  left: 0;
  width: 21.875em;
}
@media screen and (max-width: 599px) {
  #go section .list01 li a dl {
    position: static;
    width: auto;
    margin-top: -1px;
  }
}
#go section .list01 li a dl dt {
  font-weight: 700;
  color: #fff;
  font-size: 175%;
  text-align: center;
  line-height: 1.464;
  letter-spacing: 0.1em;
  background: #00336A;
  padding: 0.35em 0;
  border-radius: 0 6px 0 0;
}
@media screen and (max-width: 599px) {
  #go section .list01 li a dl dt {
    font-size: 112.5%;
    padding: 0.5em 0.75em;
    border-radius: 0;
    text-align: left;
  }
}
#go section .list01 li a dl dd {
  padding: 0.75em 1em;
  color: #00336A;
  line-height: 1.6;
  border-radius: 0 0 6px 0;
  background: #fff;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  #go section .list01 li a dl dd {
    font-size: 87.5%;
    border-radius: 0 0 6px 6px;
  }
}
#go section .list01 li a .arrow01 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2.5em;
}
@media screen and (max-width: 599px) {
  #go section .list01 li a .arrow01 {
    bottom: 26.75%;
    right: 0.75em;
    width: 1.25em;
  }
}
#go section .list01 li a .img01 {
  border-radius: 6px;
}
@media screen and (max-width: 599px) {
  #go section .list01 li a .img01 {
    border-radius: 6px 6px 0 0;
  }
}
#go section .list02 {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 599px) {
  #go section .list02 {
    display: block;
  }
}
#go section .list02 li {
  width: 31%;
  margin-bottom: 1.75em;
}
@media screen and (max-width: 599px) {
  #go section .list02 li {
    width: auto;
    margin-bottom: 1.25em;
  }
}
#go section .list02 li a {
  display: block;
  position: relative;
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
}
#go section .list02 li a:hover {
  box-shadow: none;
}
#go section .list02 li a strong {
  position: absolute;
  top: 1.66em;
  left: 0;
  width: 12.5rem;
  font-weight: 700;
  color: #fff;
  font-size: 150%;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
  background: #00336A;
  padding: 0.3em 0;
  border-radius: 0 6px 6px 0;
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  #go section .list02 li a strong {
    width: 12.5em;
  }
}
@media screen and (max-width: 599px) {
  #go section .list02 li a strong {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 100%;
    padding: 0.57em 1em;
    border-radius: 0 0 6px 6px;
    text-align: left;
    box-sizing: border-box;
  }
}
#go section .list02 li a .arrow01 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2.5em;
}
@media screen and (max-width: 599px) {
  #go section .list02 li a .arrow01 {
    bottom: 0.7em;
    right: 0.75em;
    width: 1.25em;
  }
}
#go section .list02 li a .img01 {
  border-radius: 6px;
}
#go section .list03 {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 599px) {
  #go section .list03 {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
#go section .list03 li {
  width: 31%;
  margin-bottom: 1.75em;
  margin-right: 1.5%;
  margin-left: 1.5%;
}
@media screen and (max-width: 599px) {
  #go section .list03 li {
    width: 47.6%;
    margin-bottom: 1.25em;
    margin-right: 0;
    margin-left: 0;
  }
}
#go section .list03 li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.333em;
  background: url(/common2022/images/icon_basic.svg) no-repeat 16em 52% #fff;
  background-size: 1.2em auto;
  border: 1px solid #00336A;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
  font-size: 112.5%;
  color: #00336A;
  text-align: center;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  #go section .list03 li a {
    line-height: 1.4;
    font-size: 100%;
    background: url(/common2022/images/icon_basic.svg) no-repeat 93% 52% #fff;
    background-size: 1.4em auto;
  }
}
#go section .list03 li a:hover {
  box-shadow: none;
}
@media screen and (max-width: 599px) {
  #go section .list03 li.center {
    margin-right: auto;
    margin-left: auto;
  }
}

/*******************************
news
*******************************/
#news {
  background: url(/top2022/images/bg_square.svg) no-repeat 0 100% #F9F7F1;
  background-size: 27.18em auto;
  padding: 6.25em 0;
}
@media screen and (max-width: 599px) {
  #news {
    padding: 3.5em 0;
  }
}
#news .inner {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#news .inner section {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 2.8125em;
}
@media screen and (max-width: 599px) {
  #news .inner section {
    max-width: 90%;
    margin: 0 auto 2em;
  }
}
#news .inner section h2 {
  color: #00336A;
  font-weight: 700;
  font-size: 175%;
  line-height: 1.464;
}
@media screen and (max-width: 599px) {
  #news .inner section h2 {
    font-size: 125%;
    letter-spacing: 0.1em;
  }
}
#news .inner section h2::after {
  display: block;
  content: "";
  width: 2.5em;
  height: 2px;
  background: linear-gradient(to right, #BEAF73 0%, #BEAF73 33.33%, #00336A 33.33%, #00336A 100%);
  margin-top: 0.6em;
}
#news .inner section #newsTab {
  display: flex;
  flex-wrap: wrap;
  width: 85%;
}
@media screen and (max-width: 599px) {
  #news .inner section #newsTab {
    display: none;
  }
}
#news .inner section #newsTab li {
  box-sizing: border-box;
  margin-bottom: 0.25em;
  margin-left: 0.25%;
  width: 14%;
  font-size: 87.5%;
  color: #00336A;
  font-weight: 700;
  text-align: center;
  border: 1px solid #00336A;
  background: #F2F4F7;
  border-radius: 4px;
  cursor: pointer;
  line-height: 2;
  transition: all 0.2s ease;
}
#news .inner section #newsTab li:hover {
  opacity: 0.8;
}
#news .inner section #newsTab li.active {
  background: #00336A;
  color: #fff;
}
#news .inner section #newsSelect {
  background: url(/common2022/images/icon_white-arrow.svg) no-repeat 95% center #00336A;
  width: 54%;
  background-size: 0.9em auto;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0.35rem;
  padding: 0.45em 0.5em;
  border: 1px solid #00336A;
  outline: none;
  transition: all 0.2s ease;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  text-align: -webkit-center;
  font-size: 87.5%;
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel {
    overflow-x: scroll;
  }
}
#news .inner .panels_area .tabs_panel#panels1 ul {
  display: flex;
}
#news .inner .panels_area .tabs_panel ul {
  display: none;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 237.28vw;
  }
}
#news .inner .panels_area .tabs_panel ul li {
  width: 32.5%;
  margin-bottom: 1.25em;
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li {
    width: 37.33vw;
  }
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li:first-child {
    margin-left: 5vw;
  }
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li:not(:last-child) {
    margin-right: 2.66vw;
  }
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li:last-child {
    margin-right: 5vw;
  }
}
#news .inner .panels_area .tabs_panel ul li a {
  display: flex;
  height: 11.25em;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li a {
    height: 100%;
  }
}
#news .inner .panels_area .tabs_panel ul li a:hover {
  box-shadow: none;
}
#news .inner .panels_area .tabs_panel ul li a dl {
  position: relative;
  width: 100%;
}
#news .inner .panels_area .tabs_panel ul li a dl dt {
  position: absolute;
  font-size: 75%;
  color: #fff;
  background: #00336A;
  width: 9em;
  text-align: center;
  line-height: 1;
  padding: 0.5em 0;
  top: 0;
  left: 46.15%;
  font-feature-settings: "palt";
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
  #news .inner .panels_area .tabs_panel ul li a dl dt {
    left: 40%;
  }
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li a dl dt {
    font-size: 75%;
    top: 32vw;
    left: 0;
    font-size: 62.5%;
    font-weight: 300;
  }
}
#news .inner .panels_area .tabs_panel ul li a dl dd {
  display: flex;
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li a dl dd {
    display: block;
  }
}
#news .inner .panels_area .tabs_panel ul li a dl dd img {
  width: 11.25em;
  height: 11.25em;
  border-radius: 6px 0 0 6px;
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li a dl dd img {
    width: 37.33vw;
    height: 37.33vw;
    border-radius: 6px 6px 0 0;
  }
}
#news .inner .panels_area .tabs_panel ul li a dl dd p {
  box-sizing: border-box;
  padding: 2.25em 1em 1.125em;
  line-height: 1.6;
  font-size: 93.75%;
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li a dl dd p {
    padding: 2em 0.65em 0.75em;
    font-size: 81.25%;
  }
}
#news .inner .panels_area .tabs_panel ul li a dl dd p.day {
  position: absolute;
  top: 0.25em;
  right: 0.75em;
  font-size: 75%;
  color: #00336A;
  font-weight: 700;
  padding: 0;
  text-align: right;
}
@media screen and (max-width: 599px) {
  #news .inner .panels_area .tabs_panel ul li a dl dd p.day {
    top: 38.5vw;
    right: 0.75em;
    font-size: 62.5%;
  }
}
#news .inner .btn01 {
  width: 20em;
  margin: 1em auto 0;
}
#news .inner .btn01 a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.33em;
  background: url(/common2022/images/icon_basic.svg) no-repeat 95% center #fff;
  background-size: 1.22em auto;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1607843137);
  border: 1px solid #00336A;
  border-radius: 6px;
  text-align: center;
  color: #00336A;
  font-weight: 700;
  font-size: 112.5%;
}
@media screen and (max-width: 599px) {
  #news .inner .btn01 a {
    width: auto;
    height: 2.75em;
    background: url(/common2022/images/icon_basic.svg) no-repeat 96% center #fff;
    background-size: 1.35em auto;
    font-size: 100%;
  }
}
#news .inner .btn01 a:hover {
  box-shadow: none;
}

/*******************************
sns
*******************************/
#sns {
  padding: 6.25em 0;
}
@media screen and (max-width: 599px) {
  #sns {
    padding: 4em 0;
  }
}
#sns section {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#sns section h2 {
  text-align: center;
}
#sns section h2::after {
  margin-left: auto;
  margin-right: auto;
}
#sns section .sns01 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 1em;
}
#sns section .sns01 li {
  width: 15%;
}
@media screen and (max-width: 599px) {
  #sns section .sns01 li {
    width: 20%;
  }
}
#sns section .sns01 li a {
  display: block;
  font-size: 125%;
  color: #00336A;
  text-align: center;
  line-height: 1.8;
}
#sns section .sns01 li a img {
  width: 3em;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 599px) {
  #sns section .sns01 li a span {
    display: none;
  }
}
#sns section .sns02 {
  margin-top: 2.5em;
  text-align: center;
}
#sns section .sns02 a {
  width: 25em;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/*******************************
pamphlet
*******************************/
#pamphlet {
  background: #EFFBFF;
  padding: 3.125em 0;
}
@media screen and (max-width: 599px) {
  #pamphlet {
    padding: 3.75em 0;
  }
}
#pamphlet section {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 599px) {
  #pamphlet section {
    display: block;
  }
}
#pamphlet section h2 {
  color: #00336A;
  font-weight: 700;
  font-size: 175%;
  line-height: 1.464;
  width: 36.25%;
}
@media screen and (max-width: 599px) {
  #pamphlet section h2 {
    font-size: 125%;
    width: auto;
  }
}
#pamphlet section h2::after {
  display: block;
  content: "";
  width: 2.5em;
  height: 2px;
  background: linear-gradient(to right, #BEAF73 0%, #BEAF73 33.33%, #00336A 33.33%, #00336A 100%);
  margin-top: 0.6em;
}
@media screen and (max-width: 599px) {
  #pamphlet section h2::after {
    width: 3.5em;
  }
}
#pamphlet section .inner {
  width: 63.75%;
}
@media screen and (max-width: 599px) {
  #pamphlet section .inner {
    width: auto;
  }
}
#pamphlet section .inner ul {
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 599px) {
  #pamphlet section .inner ul {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1.5em;
    gap: 20px;
  }
}
#pamphlet section .inner ul li {
  width: 49.67%;
  margin-right: 3.3%;
}
@media screen and (max-width: 599px) {
  #pamphlet section .inner ul li {
    width: 100%;
    margin-right: 0;
  }
}
#pamphlet section .inner ul li:last-child a {
  position: relative;
  height: 100%;
}
#pamphlet section .inner ul li:last-child a .img01 {
  width: 50%;
}
#pamphlet section .inner ul li:last-child a .txt01 {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  height: 100%;
  background: rgba(0, 51, 106, 0.8);
  border-radius: 0 6px 6px 0;
  z-index: 2;
}
#pamphlet section .inner ul li:last-child a .txt01 p {
  width: 100%;
}
#pamphlet section .inner ul li a {
  background: #00336A;
  color: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
}
#pamphlet section .inner ul li a:hover {
  box-shadow: none;
}
#pamphlet section .inner ul li a .img01 {
  width: 50%;
  border-radius: 6px 0 0 6px;
}
#pamphlet section .inner ul li a .txt01 {
  width: 50%;
  text-align: center;
  font-size: 137.5%;
  font-weight: 700;
}
@media screen and (max-width: 599px) {
  #pamphlet section .inner ul li a .txt01 {
    width: 40%;
    position: relative;
    font-size: 112.5%;
    text-align: left;
    padding: 0 0.75em;
  }
}
#pamphlet section .inner ul li a .txt01 .icon {
  display: block;
  margin: 0.25em auto 0;
  width: 1em;
}
@media screen and (max-width: 599px) {
  #pamphlet section .inner ul li a .txt01 .icon {
    margin: 0;
    width: 1.25em;
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translate(0, -50%);
  }
}
#pamphlet section .inner .btn01 {
  width: 20em;
  margin: 1.5em auto 0;
}
#pamphlet section .inner .btn01 a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.33em;
  background: url(/common2022/images/icon_basic.svg) no-repeat 95% center #fff;
  background-size: 1.22em auto;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1607843137);
  border: 1px solid #00336A;
  border-radius: 6px;
  text-align: center;
  color: #00336A;
  font-weight: 700;
  font-size: 112.5%;
}
@media screen and (max-width: 599px) {
  #pamphlet section .inner .btn01 a {
    width: auto;
    height: 2.75em;
    background: url(/common2022/images/icon_basic.svg) no-repeat 96% center #fff;
    background-size: 1.35em auto;
    font-size: 100%;
  }
}
#pamphlet section .inner .btn01 a:hover {
  box-shadow: none;
}

/*******************************
bnrArea01
*******************************/
#bnrArea01 {
  background: #EAEEF7;
  padding: 3.75em 0 2.25em;
}
@media screen and (max-width: 599px) {
  #bnrArea01 {
    padding: 2.5em 0 1.25em;
  }
}
#bnrArea01 .inner {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#bnrArea01 .inner ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul {
    display: block;
  }
}
#bnrArea01 .inner ul li {
  width: 49.16%;
  margin-bottom: 1.25em;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li {
    width: auto;
    margin-bottom: 1em;
  }
}
#bnrArea01 .inner ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.25em;
  background: url(/common2022/images/icon_gold-arrow.svg) no-repeat 95% center #fff;
  background-size: 0.75em auto;
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
  color: #00336A;
  font-weight: 700;
  overflow: hidden;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li a {
    font-size: 75%;
    height: 6em;
    background: url(/common2022/images/icon_gold-arrow.svg) no-repeat 97% center #fff;
    background-size: 0.75em auto;
  }
}
#bnrArea01 .inner ul li a:hover {
  box-shadow: none;
}
#bnrArea01 .inner ul li a img {
  width: 22%;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li a img {
    width: 28%;
  }
}
#bnrArea01 .inner ul li a .txt {
  width: 73.5%;
  line-height: 1.5;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li a .txt {
    width: 69%;
  }
}
#bnrArea01 .inner ul li a .txt strong {
  font-size: 175%;
  display: block;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li a .txt strong {
    font-size: 150%;
  }
}
#bnrArea01 .inner ul li a .txt strong.b01 {
  line-height: 1.2;
}
#bnrArea01 .inner ul li a .txt .img01 {
  display: block;
  width: 16.875em;
  margin-top: 0.2em;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li a .txt .img01 {
    width: 11.5em;
    margin-top: 0.25em;
  }
}
#bnrArea01 .inner ul li.publication .txt {
  font-family: "Noto Serif JP", serif;
  display: inline-block;
  background: #00ab70;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li.publication .txt {
    font-size: 16px;
  }
}
#bnrArea01 .inner ul li.publication .txt strong {
  font-size: 150%;
}
#bnrArea01 .inner ul li.jctc a {
  position: relative;
}
#bnrArea01 .inner ul li.jctc a .txt {
  line-height: 1.2;
  margin-top: -0.75em;
}
#bnrArea01 .inner ul li.jctc a .txt strong {
  font-size: 150%;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li.jctc a .txt strong {
    font-size: 125%;
  }
}
#bnrArea01 .inner ul li.jctc a .logo01 {
  position: absolute;
  bottom: 0.45em;
  right: 5%;
  width: 8em;
}
#bnrArea01 .inner ul li.blank a {
  background: url(/common2022/images/icon_blank-gold.svg) no-repeat 95% center #fff;
  background-size: 1.4375em auto;
}
@media screen and (max-width: 599px) {
  #bnrArea01 .inner ul li.blank a {
    background: url(/common2022/images/icon_blank-gold.svg) no-repeat 96% center #fff;
    background-size: 1.25em auto;
  }
}

/*******************************
bnrArea02
*******************************/
#bnrArea02 {
  padding: 3.75em 0;
}
@media screen and (max-width: 599px) {
  #bnrArea02 {
    padding: 2.75em 0 1.75em;
  }
}
#bnrArea02 .inner {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#bnrArea02 .inner ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 599px) {
  #bnrArea02 .inner ul {
    display: block;
  }
}
#bnrArea02 .inner ul li {
  width: 31%;
}
@media screen and (max-width: 599px) {
  #bnrArea02 .inner ul li {
    width: auto;
    margin-bottom: 1em;
  }
}
#bnrArea02 .inner ul li a {
  display: block;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
  overflow: hidden;
}
#bnrArea02 .inner ul li a:hover {
  box-shadow: none;
}

/*******************************
notice01(ondemand)
*******************************/
.notice01 {
  margin: 0 auto -0.5em;
  padding-top: 1.25em;
  text-align: center;
  width: 92%;
  max-width: 43.5em;
}
@media screen and (max-width: 599px) {
  .notice01 {
    margin: 0 auto;
    padding-top: 0;
  }
}
.notice01 a {
  margin-top: 1em;
  text-align: center;
  display: block;
  font-size: 1.25em;
  color: #ff0000;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  border: 1px solid #ff0000;
  background: #fff;
  padding: 0.5em;
  box-sizing: border-box;
  margin-top: 1em;
  line-height: 1.3;
}
@media screen and (max-width: 599px) {
  .notice01 a {
    font-size: 0.95em;
  }
}
.notice01 a strong {
  text-decoration: underline;
  font-weight: 700;
}
.notice01 a span {
  display: block;
  margin-top: 0.5em;
  font-size: 0.762em;
}

/*******************************
interview
*******************************/
#interview {
  background: url(/top2022/images/bg_square.svg) no-repeat 0 100% #F9F7F1;
  background-size: 27.18em auto;
  padding: 6.25em 0;
}
@media screen and (max-width: 599px) {
  #interview {
    padding: 3.5em 0;
  }
}
#interview section {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
#interview section h2 {
  text-align: center;
}
#interview section h2::after {
  margin-left: auto;
  margin-right: auto;
}
#interview section section {
  width: 100%;
  max-width: 100%;
  margin-top: 3em;
}
#interview section section h3 {
  font-size: 2em;
  text-align: center;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  background: #00336A;
  padding: 0.55em 0;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 599px) {
  #interview section section h3 {
    font-size: 1.25em;
    padding: 0.85em 0;
  }
}
#interview section .panels_area .tabs_panel {
  position: relative;
}
#interview section .panels_area .tabs_panel .slideArrow {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 1.5em;
  height: auto;
  z-index: 5;
  cursor: pointer;
  transition: all 0.2s ease;
}
#interview section .panels_area .tabs_panel .slideArrow.prevArrow {
  left: 0;
}
#interview section .panels_area .tabs_panel .slideArrow.nextArrow {
  right: 0;
}
#interview section .panels_area .tabs_panel .slideArrow:hover {
  opacity: 0.8;
}
#interview section .panels_area .tabs_panel .slick-list {
  padding-top: 1em !important;
  padding-bottom: 2em !important;
}
#interview section .panels_area .tabs_panel .slick-track {
  display: flex;
}
#interview section .panels_area .tabs_panel .slick-slide {
  height: auto !important;
}
#interview section .panels_area .tabs_panel ul li {
  margin: 0 1em;
}
#interview section .panels_area .tabs_panel ul li a {
  display: block;
  height: 100%;
  background: #fff;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1607843137);
  border-radius: 6px;
  padding: 1em 5% 0;
  line-height: 1.5;
}
#interview section .panels_area .tabs_panel ul li a:hover {
  box-shadow: none;
}
#interview section .panels_area .tabs_panel ul li a img {
  display: block;
  margin: 0 auto 0.5em;
  height: auto;
}
@media screen and (max-width: 599px) {
  #interview section .panels_area .tabs_panel ul li a p {
    font-size: 0.875em;
  }
}
#interview section .btn01 {
  width: 20em;
  margin: 1em auto 0;
}
#interview section .btn01 a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.33em;
  background: url(/common2022/images/icon_basic.svg) no-repeat 95% center #fff;
  background-size: auto;
  background-size: 1.22em auto;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1607843137);
  border: 1px solid #00336A;
  border-radius: 6px;
  text-align: center;
  color: #00336A;
  font-weight: 700;
  font-size: 112.5%;
}
#interview section .btn01 a:hover {
  box-shadow: none;
}
@media screen and (max-width: 599px) {
  #interview section .btn01 a {
    width: auto;
    height: 2.75em;
    background: url(/common2022/images/icon_basic.svg) no-repeat 96% center #fff;
    background-size: 1.35em auto;
    font-size: 100%;
  }
}