@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*naga add*/
/* 下からフェードイン(初期値) */
.js-fadeUp, .js-fadeUpSlow {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* 下からフェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 0s;
  /*開始を遅らせる */
}

.js-fadeUpSlow.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: .5s;
  /* 開始を遅らせる */
}

/* 左からフェードイン(初期値) */
.js-fadeIn, .js-fadeInSlow {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateX(-100px);
  /* 左に100pxの位置から */
  transition: opacity .8s, transform .8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* 左からフェードイン(スクロールした後) */
.js-fadeIn.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateX(0);
  /* 100px右に移動する */
  transition-delay: 0s;
  /* 開始を遅らせる */
}

.js-fadeInSlow.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateX(0);
  /* 100px右に移動する */
  transition-delay: .5s;
  /* 開始を遅らせる */
}

/*ゆらゆら*/
.js-swing.is-inview {
  animation: swing 2.5s infinite;
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/*跳ねる*/
.js-bounce.is-inview {
  animation: bounce 2.5s;
  transform-origin: center bottom;
}

@keyframes bounce {
  0%,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
/* 用紙サイズの指定（A4） */
@page {
  margin: 8mm;
  size: 210mm 297mm;
  /* A4縦 */
}
@media print {
  /* 全体設定 */
  body {
    -webkit-print-color-adjust: exact;
    /* 印刷時でも背景色や背景画像を表示 */
    width: 1400px;
    /* 印刷時の全ページ幅を統一 */
    zoom: 0.8;
    /* なるべく多くのブラウザで切れないようにするため */
    /*no animation*/
  }
  body header {
    position: absolute !important;
    max-width: 1400px;
    width: 1400px !important;
  }
  body .header--flex {
    width: 1400px !important;
  }
  body .btnBox {
    display: none;
  }
  body #btn_pagetop {
    display: none;
  }
  body .js-fadeUp,
  body .js-fadeIn,
  body .js-fadeUpSlow,
  body .js-fadeInSlow {
    opacity: 1;
  }
  body .js-fadeIn,
  body .js-fadeInSlow {
    transform: translateX(0);
  }
  body .js-fadeUp,
  body .js-fadeUpSlow {
    transform: translateY(0);
  }
  body .js-fadeUp.is-view,
  body .js-fadeIn.is-view,
  body .js-fadeUpSlow.is-view,
  body .js-fadeInSlow.is-view {
    animation-name: none;
  }
}
main {
  width: 100%;
  height: auto;
  background-color: #0063b1;
  background-image: url("../img/common/img02.png");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-attachment: fixed;
  display: flex;
}
@media screen and (max-width: 1280px) {
  main {
    justify-content: space-evenly;
  }
}

.leftside {
  position: sticky;
  overflow-x: clip;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: calc(50% - 280px);
}
.leftside > img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 75px auto 50px;
}
@media screen and (max-width: 1280px) {
  .leftside {
    display: none;
  }
}

.center {
  width: 560px;
  height: auto;
  margin: 0 auto;
  position: relative;
  /*center-inner END*/
}
@media screen and (max-width: 1280px) {
  .center {
    margin: 0;
  }
}
@media screen and (max-width: 750px) {
  .center {
    width: 100%;
  }
}
.center__inner {
  padding: 0 10px;
  background-color: #fff;
  position: relative;
}
@media screen and (max-width: 750px) {
  .center__inner {
    padding-left: 0;
    padding-right: 0;
    background-color: inherit;
  }
}
.center .c-whiteLine {
  width: 560px;
  height: 10px;
  background-color: #fff;
  position: sticky;
}
@media screen and (max-width: 750px) {
  .center .c-whiteLine {
    display: none;
  }
}
.center .c-whiteLine.top {
  top: 0;
  left: 0;
}
.center .c-mv {
  display: block;
  height: auto;
  max-width: 540px;
}
@media screen and (max-width: 750px) {
  .center .c-mv {
    max-width: 100%;
  }
}

/*center END*/
.c-cnts {
  background-color: #cbe4ab;
  padding-bottom: 94px;
  background-image: url("../img/index/bg10.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  /*  @include sp {
      padding-top: 20px;
    };*/
}
.c-cnts__hl {
  text-align: center;
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 15px 40px;
}
.c-cnts__hl .ja {
  display: block;
  font: 900 50px/1.5 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #033;
}
@media screen and (min-width: 751px), screen and (max-width: 540px) {
  .c-cnts__hl .ja {
    font-size: 40px;
  }
}
@media screen and (max-width: 480px) {
  .c-cnts__hl .ja {
    font-size: 36px;
  }
}
.c-cnts__hl .en {
  display: block;
  font: 700 20px/1.5 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #033;
  text-transform: uppercase;
}
@media screen and (max-width: 480px) {
  .c-cnts__hl .en {
    font-size: 16px;
  }
}
.c-cnts time {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 4.7%;
  margin-right: 4.7%;
  font: 500 28px/1.2 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #666;
  padding-bottom: 25px;
}
@media screen and (max-width: 480px) {
  .c-cnts time {
    font-size: 20px;
  }
}
.c-cnts h2 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 4.7%;
  margin-right: 4.7%;
  padding-bottom: 50px;
  font: 500 50px/1.2 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000;
}
@media screen and (min-width: 751px), screen and (max-width: 540px) {
  .c-cnts h2 {
    font-size: 40px;
  }
}
@media screen and (max-width: 480px) {
  .c-cnts h2 {
    font-size: 30px;
  }
}
.c-cnts .system-free {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 4.7%;
  margin-right: 4.7%;
  padding-bottom: 80px;
}
.c-cnts__pdf {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 25px 30px 30px;
  margin-left: 4.7%;
  margin-right: 4.7%;
  margin-bottom: 80px;
  background-color: #ebf5df;
}
@media screen and (max-width: 480px) {
  .c-cnts__pdf {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.c-cnts__pdf a {
  font: 500 20px/1.5 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #333;
  text-decoration: underline;
  text-underline-offset: 6px;
  padding-left: 60px;
  display: flex;
  position: relative;
}
@media screen and (max-width: 480px) {
  .c-cnts__pdf a {
    font-size: 16px;
    padding-left: 45px;
  }
}
.c-cnts__pdf a:before {
  content: "PDF";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 40px;
  height: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 7px;
  padding-top: 2px;
  font: 500 13px/1.2 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  background-color: #333;
  text-align: center;
}
@media screen and (max-width: 480px) {
  .c-cnts__pdf a:before {
    margin-top: 4px;
    width: 35px;
  }
}

.returnLink {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 4.7%;
  margin-right: 4.7%;
  text-align: center;
}
.returnLink a {
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 414px;
  min-height: 70px;
  margin: 0 auto 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 1px solid #000;
  background-color: #000;
  font: 500 20px/1.5 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
}
@media screen and (max-width: 480px) {
  .returnLink a {
    font-size: 18px;
    padding: 10px 40px;
  }
}
.returnLink a:after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  /*margin-left: 10px;*/
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  position: absolute;
  top: 50%;
  left: 30px;
  transform: rotate(-135deg) translateX(10px);
}
.returnLink a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .returnLink a:hover {
    background-color: #fff;
    color: #000;
  }
  .returnLink a:hover::after {
    border-top: 3px solid #000;
    border-right: 3px solid #000;
  }
}

.c-contact {
  background-color: #37a182;
  padding-top: 40px;
  padding-bottom: 260px;
  background-image: url("../img/common/img02.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  text-align: center;
}
@media screen and (min-width: 751px), screen and (max-width: 540px) {
  .c-contact {
    padding-bottom: 200px;
  }
}
@media screen and (max-width: 480px) {
  .c-contact {
    padding-bottom: 180px;
  }
}
@media screen and (max-width: 329px) {
  .c-contact {
    padding-bottom: 150px;
  }
}
.c-contact h3 {
  font: 500 24px/1.2 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  margin-bottom: 15px;
}
@media screen and (max-width: 480px) {
  .c-contact h3 {
    font-size: 20px;
  }
}
.c-contact p {
  font: 500 20px/1.6 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  margin-bottom: 10px;
}
@media screen and (max-width: 480px) {
  .c-contact p {
    font-size: 16px;
  }
}
.c-contact .copyright {
  font: 500 13px/1.6 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
}

.rightside {
  position: sticky;
  overflow-x: clip;
  top: 0px;
  right: 0px;
  height: 100vh;
  width: calc(50% - 280px);
}
@media screen and (max-width: 1280px) {
  .rightside {
    width: 30%;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 15px;
  }
}
@media screen and (max-width: 900px) {
  .rightside {
    display: none;
  }
}
.rightside > img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 75px auto 5px;
}
.rightside .r-gNav {
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.rightside .r-gNav__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  flex-direction: column;
  row-gap: 15px;
}
.rightside .r-gNav__item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: auto;
  height: 100%;
  padding: 0;
  position: relative;
  /*a END*/
}
.rightside .r-gNav__item a {
  width: 330px;
  height: auto;
  min-height: 40px;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 60px;
  background-color: #4c7ac7;
  margin: 0 auto;
  padding: 13px 10px;
  transition: .3s linear;
  font: 700 20px/1.2 "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1280px) {
  .rightside .r-gNav__item a {
    padding: 5px 10px;
    font-size: 18px;
    min-height: 30px;
  }
}
.rightside .r-gNav__item a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .rightside .r-gNav__item a:hover {
    color: #fef100 !important;
    background-color: #6A95DD;
  }
  .rightside .r-gNav__item a:hover::after {
    border-top: 3px solid #000;
    border-right: 3px solid #000;
  }
}