@charset "UTF-8";

#entrance {
  width    : 100%;
  max-width: 150rem;
  height   : 50rem;
  margin   : auto auto 3rem;
  overflow : hidden;
}

@media (max-width: 558px) {
  #entrance .swiper-slide {
    background: #ffffff;
  }
}

@media (min-width: 559px) and (max-width: 958px) {
  #entrance {
    height: 40rem;
    margin: auto auto 5rem;
  }
}

@media (min-width: 959px) {
  #entrance {
    /* margin-bottom: 10rem; */
    height       : 60rem;
    margin-bottom: 20px;
  }
}

.entrance-item {
  position: relative;
  height  : 100%;
}

@media (min-width: 559px) {
  .entrance-item {
    display    : flex;
    align-items: center;
  }

  .entrance-item.position_left {
    justify-content: flex-start;
  }

  .entrance-item.position_right {
    justify-content: flex-end;
  }
}

.entrance-img {
  position  : absolute;
  z-index   : 0;
  top       : 0;
  left      : 0;
  background: #ffffff;
}

.entrance-img img {
  width        : 100%;
  height       : 30rem;
  -o-object-fit: cover;
  object-fit   : cover;
}

@media (min-width: 559px) {
  .entrance-img img {
    width        : 100%;
    height       : 40rem;
    -o-object-fit: cover;
    object-fit   : cover;
  }
}

@media (min-width: 959px) {
  .entrance-img img {
    height: 60rem;
  }
}

.entrance-set01,
.entrance-set02,
.entrance-set03,
.entrance-set04 {
  position: absolute;
  z-index : 1;
}

@media (max-width: 558px) {

  .entrance-set01,
  .entrance-set02,
  .entrance-set03,
  .entrance-set04 {
    bottom : 1rem;
    padding: 2rem;
  }
}

@media (min-width: 559px) {

  .entrance-set01,
  .entrance-set02,
  .entrance-set03,
  .entrance-set04 {
    padding: 4rem;
  }
}

@media (max-width: 558px) {
  .entrance-set01 {
    padding-bottom: 12rem;
  }
}

@media (min-width: 959px) {
  .entrance-set01 {
    padding: 0 24rem 0 10rem;
  }
}

@media (min-width: 959px) {
  .entrance-set02 {
    padding: 0 24rem 0 10rem;
  }
}

@media (min-width: 959px) {
  .entrance-set03 {
    padding: 0 20rem 0 10rem;
  }
}

@media (min-width: 959px) {
  .entrance-set04 {
    padding: 0 10rem 0 0;
  }
}

.entrance-tit {
  font-size: 6rem;
  color    : #185AA5;
}

@media (min-width: 559px) {
  .entrance-tit {
    color: #0E335D;
  }
}

@media (min-width: 959px) {
  .entrance-tit {
    font-size: 8rem;
  }
}

.entrance-tit small {
  display    : block;
  font-size  : 1.8rem;
  font-weight: bold;
  line-height: 1.6;
}

@media (min-width: 959px) {
  .entrance-tit small {
    font-size     : 2.3rem;
    letter-spacing: 4px;
  }
}

@media (min-width: 559px) {
  .entrance-tit.color_white {
    color: #ffffff;
  }
}

.accent_line {
  content   : "";
  display   : block;
  width     : 100%;
  height    : 2rem;
  margin    : 1rem 0;
  background: linear-gradient(to bottom right, transparent 49%, #185AA5 50%, transparent 51%) right/1.5rem 1.5rem;
}

@media (min-width: 559px) {
  .accent_line {
    background: linear-gradient(to bottom right, transparent 49%, #0E335D 50%, transparent 51%) right/1.5rem 1.5rem;
  }
}

@media (min-width: 959px) {
  .accent_line {
    width: 26rem;
  }
}

@media (min-width: 559px) {
  .accent_line.color_white {
    background: linear-gradient(to bottom right, transparent 49%, #ffffff 50%, transparent 51%) right/1.5rem 1.5rem;
  }
}

.entrance-btn {
  width     : 20rem;
  margin-top: 2rem;
}

.entrance-btn a {
  position   : relative;
  display    : block;
  padding    : 1.6rem 0;
  background : linear-gradient(to bottom right, transparent 49%, #185AA5 50%) #0E335D right/3rem 100% no-repeat;
  border     : 2px solid #185AA5;
  text-align : center;
  font-family: "DINPro Medium";
  font-weight: normal;
  color      : #ffffff;
}

.entrance-btn a:hover {
  background: linear-gradient(to bottom right, transparent 49%, #FFC332 50%) right/3rem 100% no-repeat;
  border    : 2px solid #FFC332;
  background: #0E335D;
  color     : #FFC332;
}

@media (min-width: 959px) {
  .entrance-btn a {
    margin    : 2rem auto 0 0;
    background: linear-gradient(to bottom right, transparent 49%, #0E335D 50%) right/3rem 100% no-repeat;
    border    : 2px solid #0E335D;
    color     : #0E335D;
  }
}

@media (min-width: 959px) {
  .entrance-btn.color_white a {
    background: linear-gradient(to bottom right, transparent 49%, #ffffff 50%) right/3rem 100% no-repeat;
    border    : 2px solid #ffffff;
    color     : #ffffff;
  }
}

.entrance-btn.color_white a:hover {
  background: linear-gradient(to bottom right, transparent 49%, #FFC332 50%) right/3rem 100% no-repeat;
  border    : 2px solid #FFC332;
  background: #0E335D;
  color     : #FFC332;
}

@media (min-width: 959px) {
  .entrance-btn.set01 {
    position: absolute;
    right   : 0;
    bottom  : 1rem;
  }
}

@media (min-width: 959px) {
  .entrance-btn.set02 {
    position: absolute;
    right   : 10rem;
    bottom  : 1rem;
  }
}

@media (min-width: 959px) {
  .entrance-btn.set03 {
    position: absolute;
    right   : 0;
    bottom  : 1rem;
  }
}

@media (min-width: 959px) {
  .entrance-btn.set04 {
    position: absolute;
    right   : 10rem;
    bottom  : 1rem;
  }
}

/* common -----------------------------------------------*/
.sec-tit {
  display              : grid;
  grid-template-columns: auto 1fr;
  grid-gap             : 3rem;
  align-items          : center;
  margin-left          : 3rem;
  font-size            : 3rem;
}

.sec-tit small {
  font-size: 1.5rem;
}

@media (min-width: 959px) {
  .sec-tit {
    margin-left: 0;
    font-size  : 4rem;
  }

  .sec-tit small {
    font-size: 1.6rem;
  }
}

.sec-tit2 {
  margin-left: 3rem;
  font-size  : 3rem;
}

.sec-tit2 small {
  display   : block;
  margin-top: 1rem;
  font-size : 1.5rem;
}

@media (min-width: 959px) {
  .sec-tit2 {
    display              : grid;
    grid-template-columns: auto 1fr;
    grid-gap             : 3rem;
    align-items          : center;
    max-width            : 100rem;
    margin               : 0 auto 2rem;
    font-size            : 4rem;
  }

  .sec-tit2 small {
    font-size: 1.6rem;
  }
}

/* sec01 -----------------------------------------------*/
.sec01-swiper {
  width       : 100%;
  /* max-width: 120rem; */
  max-width   : 1500px;
  /* height   : 28rem; */
  margin      : auto;
  /* padding  : 2rem; */
  overflow    : hidden;
}

.sec01-swiper .swiper-slide {
  width : 30rem !important;
  height: 24rem !important;
}

.sec01-swiper .swiper-slide img {}

/* sec02 -----------------------------------------------*/
.sec02-tit {
  display              : grid;
  grid-template-columns: auto 1fr;
  grid-gap             : 3rem;
  align-items          : center;
  margin-left          : 3rem;
  font-size            : 3rem;
  color                : #0E335D;
}

.sec02-tit small {
  font-size: 1.5rem;
}

@media (min-width: 959px) {
  .sec02-tit {
    margin-left: 0;
    font-size  : 4rem;
  }

  .sec02-tit small {
    font-size: 1.6rem;
  }
}

.sec02-inner {
  padding: 5rem 1rem;
}

@media (min-width: 959px) {
  .sec02-inner {
    max-width: 100rem;
    margin   : auto;
    padding  : 10rem 1rem;
  }
}

@media (min-width: 959px) {
  .sec02-con01 {
    position: relative;
  }
}

.news-more {
  width    : 20rem;
  margin   : 3rem auto 0;
  font-size: 1.7rem;
}

@media (min-width: 959px) {
  .news-more {
    position: absolute;
    top     : 0;
    right   : 0;
    margin  : 0;
  }
}

.news-list {
  margin-top: 3rem;
  border-top: 2px solid #CCCCCC;
}

.news-list-item {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  align-items          : center;
  padding              : 1.5rem 0;
  border-bottom        : 2px solid #CCCCCC;
}

@media (min-width: 959px) {
  .news-list-item {
    grid-template-columns: 15rem 10rem 1fr;
    padding              : 1.5rem 10rem;
  }
}

.news-time {
  text-align: center;
}

@media (max-width: 959px) {
  .news-tit {
    grid-column-start: 1;
    grid-column-end  : 3;
  }
}

.news-icon01,
.news-icon02,
.news-icon03 {
  width      : 100%;
  padding    : 0.5rem;
  text-align : center;
  font-family: "DINPro Medium";
  font-weight: normal;
}

.news-icon01 {
  border: 2px solid #0E335D;
  color : #0E335D;
}

.news-icon02 {
  border: 2px solid #77B3D4;
  color : #77B3D4;
}

.news-icon03 {
  border: 2px solid #FFC332;
  color : #FFC332;
}

/* sec03 -----------------------------------------------*/
.sec03 {
  max-width: 2000px;
  margin   : 0px auto;
}

.sec03-tit {
  display              : grid;
  grid-template-columns: 1fr;
  grid-gap             : 1rem;
  align-items          : center;
  margin-left          : 3rem;
  padding              : 2rem 1rem;
  font-size            : 3rem;
  color                : #0E335D;
}

.sec03-tit small {
  font-size: 1.5rem;
}

@media (min-width: 959px) {
  .sec03-tit {
    grid-template-columns: auto 1fr;
    grid-gap             : 3rem;
    max-width            : 100rem;
    margin               : auto;
    padding              : 3rem 1rem;
    font-size            : 4rem;
  }

  .sec03-tit small {
    font-size: 1.6rem;
  }
}

.sec03-inner {
  position: relative;
}

@media (min-width: 959px) {
  .sec03-inner {
    height: 34rem;
  }
}

.sec03-item01-inner {
  max-width: 44rem;
  padding  : 1rem;
}

.sec03-item01 {
  position       : absolute;
  z-index        : 1;
  top            : 0;
  display        : flex;
  justify-content: center;
  align-items    : center;
  width          : 100%;
  height         : 100%;
}

@media (max-width: 959px) {
  .sec03-item01.sp_01 {
    background: linear-gradient(112deg, transparent 20%, rgba(13, 50, 93, 0.9) 20.5%) top/100% 100% no-repeat;
  }

  .sec03-item01.sp_02 {
    background: linear-gradient(112deg, rgba(13, 50, 93, 0.9) 80%, transparent 80.5%) top/100% 100% no-repeat;
  }
}

@media (min-width: 959px) {
  .sec03-item01 {
    width     : calc(50% - 7rem);
    background: #0E335D;
  }

  .sec03-item01:before {
    position: absolute;
    top     : 0;
    display : block;
    content : "";
    width   : 14rem;
    height  : 100%;
  }

  .sec03-item01.pc_left {
    left: 0;
  }

  .sec03-item01.pc_left:before {
    left      : 100%;
    background: linear-gradient(to bottom left, transparent 49.8%, #0E335D 50%) top/100% 100% no-repeat;
  }

  .sec03-item01.pc_right {
    right: 0;
  }

  .sec03-item01.pc_right:before {
    right     : 100%;
    background: linear-gradient(to bottom right, transparent 49.8%, #0E335D 50%) top/100% 100% no-repeat;
  }
}

.sec03-item-tit {
  text-align: center;
  font-size : 3.7rem;
  color     : #FFC332;
}

.sec03-item-tit small {
  display   : block;
  margin-top: 1rem;
  font-size : 1.5rem;
}

@media (min-width: 959px) {
  .sec03-item-tit {
    text-align: left;
    font-size : 4rem;
  }

  .sec03-item-tit small {
    font-size: 1.8rem;
  }
}

.sec03-text {
  margin-top : 2rem;
  padding    : 0 2rem;
  line-height: 1.8;
  color      : #ffffff;
  text-shadow: 0 0 6px #000000;
}

@media (min-width: 959px) {
  .sec03-text {
    padding  : 0;
    font-size: 1.6rem;
  }
}

.sec03-item02-left {
  display: block;
  top    : 0;
  width  : 100%;
}

@media (min-width: 559px) and (max-width: 1920px) {
  .sec03-item02-left {
    max-width   : 110rem;
    height      : 34rem;
    margin-right: auto;
  }

  .sec03-item02-left img {
    width        : 100%;
    height       : 34rem;
    -o-object-fit: cover;
    object-fit   : cover;
  }
}

@media (min-width: 1921px) {
  .sec03-item02-left {
    max-width   : 1350px;
    height      : 34rem;
    margin-right: auto;
  }

  .sec03-item02-left img {
    width        : 100%;
    height       : 34rem;
    -o-object-fit: cover;
    object-fit   : cover;
  }
}

.sec03-item02-right {
  display: block;
  top    : 0;
  width  : 100%;
}

@media (min-width: 559px) and (max-width: 1920px) {
  .sec03-item02-right {
    display    : block;
    max-width  : 110rem;
    height     : 34rem;
    margin-left: auto;
  }

  .sec03-item02-right img {
    width        : 100%;
    height       : 34rem;
    -o-object-fit: cover;
    object-fit   : cover;
  }
}

@media (min-width: 1921px) {
  .sec03-item02-right {
    display    : block;
    max-width  : 1350px;
    height     : 34rem;
    margin-left: auto;
  }

  .sec03-item02-right img {
    width        : 100%;
    height       : 34rem;
    -o-object-fit: cover;
    object-fit   : cover;
  }
}

.sec03-btn {
  width : 20rem;
  margin: 2rem auto 0;
}

.sec03-btn a {
  position   : relative;
  display    : block;
  padding    : 1.6rem 0;
  background : linear-gradient(to bottom right, transparent 49%, #ffffff 50%) right/3rem 100% no-repeat;
  border     : 2px solid #ffffff;
  text-align : center;
  font-family: "DINPro Medium";
  font-weight: normal;
  color      : #ffffff;
}

.sec03-btn a:hover {
  background: linear-gradient(to bottom right, transparent 49%, #FFC332 50%) right/3rem 100% no-repeat;
  border    : 2px solid #FFC332;
  color     : #FFC332;
}

@media (min-width: 959px) {
  .sec03-btn {
    margin: 2rem 0 0;
  }
}

@media (max-width: 559px) {

  .sec03-con02,
  .sec03-con03,
  .sec03-con04 {
    margin-top: 0.5rem;
  }
}

/* sec04 -----------------------------------------------*/
.sec04-tit {
  display              : grid;
  grid-template-columns: auto 1fr;
  grid-gap             : 3rem;
  align-items          : center;
  margin-left          : 3rem;
  font-size            : 3rem;
  color                : #0E335D;
}

.sec04-tit small {
  font-size: 1.5rem;
}

@media (min-width: 959px) {
  .sec04-tit {
    margin-left: 0;
    font-size  : 4rem;
  }

  .sec04-tit small {
    font-size: 1.6rem;
  }
}

.sec04-inner {
  padding: 5rem 1rem;
}

@media (min-width: 959px) {
  .sec04-inner {
    max-width: 100rem;
    margin   : auto;
    padding  : 5rem 1rem 8rem;
  }
}

/* sec05 -----------------------------------------------*/
/* _top-sec05.scss 読み込み
-------------------------------------------------------------------------- */
button {
  -webkit-appearance: none;
  -moz-appearance   : none;
  border            : none;
  padding           : 0;
  background        : transparent;
  cursor            : pointer;
  line-height       : 1;
  outline           : none;
}

/* sec05 -----------------------------------------------*/
.sec05 {
  overflow  : hidden;
  background: #F2F2F1;
}

.sec05-tit {
  display              : grid;
  grid-template-columns: auto 1fr;
  grid-gap             : 3rem;
  align-items          : center;
  margin-left          : 3rem;
  font-size            : 3rem;
  color                : #98958E;
}

.sec05-tit small {
  font-size: 1.5rem;
}

@media (min-width: 959px) {
  .sec05-tit {
    margin-left: 0;
    font-size  : 4rem;
  }

  .sec05-tit small {
    font-size: 1.6rem;
  }
}

.sec05-inner {
  padding: 5rem 1rem;
}

@media (min-width: 959px) {
  .sec05-inner {
    max-width: 100rem;
    margin   : auto;
    padding  : 10rem 1rem;
  }
}

.sec05-con01 {
  position: relative;
}

@media (max-width: 558px) {
  .sec05-con01 {
    height: auto;
  }
}

@media (min-width: 559px) {
  .sec05-con01 {
    height: 80rem;
  }
}

@media (min-width: 959px) {
  .sec05-con01 {
    height: 46rem;
  }
}

@media (max-width: 558px) {
  .sec05-con01-item01 {
    width : 100%;
    margin: 2rem auto 0;
  }
}

@media (min-width: 559px) and (max-width: 958px) {
  .sec05-con01-item01 {
    position: absolute;
    top     : 0;
    left    : 0;
    bottom  : 0;
    right   : 0;
    width   : 53rem;
    height  : 53rem;
    margin  : 50px auto 0;
  }
}

@media (min-width: 959px) {
  .sec05-con01-item01 {
    position: absolute;
    top     : 0;
    right   : 0;
    width   : 63rem;
    height  : 53rem;
  }
}

.service_text {
  width      : 28rem;
  margin     : auto;
  line-height: 1.6;
}

#service {
  position           : relative;
  transition-duration: 1s;
}

#service .sliderLine {
  position           : absolute;
  top                : 0;
  left               : 0;
  bottom             : 0;
  right              : 0;
  margin             : auto;
  z-index            : 2;
  transform          : rotate(-90deg);
  opacity            : 0;
  transition-duration: 1s;
}

@media (max-width: 558px) {
  #service .sliderLine {
    width: 300px;
  }
}

@media (min-width: 559px) and (max-width: 958px) {
  #service .sliderLine {
    width: 428px;
  }
}

@media (min-width: 959px) {
  #service .sliderLine {
    width : 428px;
    height: 428px;
  }
}

#service .sliderLine circle {
  fill        : none;
  stroke      : #FFC332;
  stroke-width: 4px;
}

#service .sliderLine circle.bg {
  opacity: 0.15;
}

#service .sliderLine circle.change {
  stroke-dasharray   : 1445;
  stroke-dashoffset  : 1445;
  transition-duration: 1s;
}

#service .slider {
  opacity            : 0;
  transition-duration: 1s;
}

/* 矢印の設定*/
#service .slider .slick-arrow {
  display            : block;
  width              : 14px;
  height             : 14px;
  position           : absolute;
  top                : 50%;
  margin             : -15px 0 0;
  z-index            : 11;
  border-top         : 7px solid #0E335D;
  border-right       : 7px solid #0E335D;
  border-bottom      : 7px solid transparent;
  border-left        : 7px solid transparent;
  transform          : rotate(45deg);
  text-indent        : -9999px;
  transition-duration: 0.5s;
}

@media (min-width: 559px) {
  #service .slider .slick-arrow {
    width        : 30px;
    height       : 30px;
    border-top   : 15px solid #0E335D;
    border-right : 15px solid #0E335D;
    border-bottom: 15px solid transparent;
    border-left  : 15px solid transparent;
  }
}

#service .slider .slick-arrow.slick-prev {
  left     : 5px;
  transform: rotate(225deg);
}

#service .slider .slick-arrow.slick-next {
  right: 5px;
}

/* サークル上のドットの配置設定*/
#service .slider .slick-dots {
  position: absolute;
  display : block;
  top     : 0;
  left    : 0;
  bottom  : 0;
  right   : 0;
  z-index : 10;
  margin  : auto;
}

@media (max-width: 558px) {
  #service .slider .slick-dots {
    width : 300px;
    height: 300px;
  }
}

@media (min-width: 559px) {
  #service .slider .slick-dots {
    width : 428px;
    height: 428px;
  }
}

/* サークル上のドットのサイズ設定*/
#service .slider .slick-dots li {
  border-radius      : 50%;
  position           : absolute;
  opacity            : 0;
  transition-duration: 1s;
  top                : 50%;
  left               : 50%;
  width              : 36px;
  height             : 36px;
  margin             : -18px 0 0 -18px;
}

#service .slider .slick-dots li button {
  position     : relative;
  text-indent  : -9999px;
  display      : block;
  width        : 36px;
  height       : 36px;
  background   : #FFC332;
  border       : 0.5rem solid #F2F2F1;
  border-radius: 50%;
}

#service .slider .slick-dots li button+button {
  display: none;
}

.pcView #service .slider .slick-dots li button:hover:before {
  transform: translate(-50%, -50%) scale(2);
}

#service .slider .slick-dots li.slick-active button:after {
  transform: translate(-50%, -50%) scale(1);
}

#service .slider .slick-dots li button:after {
  content            : "";
  display            : block;
  width              : 60px;
  height             : 60px;
  border-radius      : 50%;
  border             : 1rem solid #F2F2F1;
  background         : #FFC332;
  position           : absolute;
  top                : 50%;
  left               : 50%;
  transform          : translate(-50%, -50%) scale(0);
  transition-duration: 0.5s;
  transition-delay   : 0.35s;
}

.ie9 #service .slider .slick-dots {
  display: none;
}

#service .slider .slide {
  outline: none;
  z-index: 1 !important;
}

/* サークル内のサイズ設定*/
#service .slider .slide .slideDetail {
  position     : relative;
  border-radius: 50%;
}

@media (max-width: 558px) {
  #service .slider .slide .slideDetail {
    height : 320px;
    padding: 5rem 0;
  }
}

@media (min-width: 559px) {
  #service .slider .slide .slideDetail {
    height: 428px;
  }
}

#service .slider .slide .slideDetail .slideTxt {
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  text-align: center;
  color     : #0E335D;
}

@media (max-width: 558px) {
  #service .slider .slide .slideDetail .slideTxt {
    padding: 220px 0 0;
  }
}

@media (min-width: 559px) {
  #service .slider .slide .slideDetail .slideTxt {
    padding: 200px 0 0;
  }
}

#service .slider .slide .slideDetail .slideTxt .ttl {
  font-weight        : bold;
  opacity            : 0;
  transform          : translateY(30px);
  transition-duration: 0.5s;
  transition-delay   : 0.2s;
}

@media (max-width: 558px) {
  #service .slider .slide .slideDetail .slideTxt .ttl {
    font-size: 1.9rem;
  }
}

@media (min-width: 559px) {
  #service .slider .slide .slideDetail .slideTxt .ttl {
    margin   : 0 0 1.5rem;
    font-size: 2.4rem;
  }
}

#service .slider .slide .slideDetail .slideTxt p {
  opacity            : 0;
  transform          : translateY(30px);
  transition-duration: 0.5s;
  transition-delay   : 0.4s;
}

@media (max-width: 558px) {
  #service .slider .slide .slideDetail .slideTxt p {
    display: none;
  }
}

#service .slider .slide .slideDetail figure {
  width                     : 200px;
  margin                    : 60px auto 0;
  transition-duration       : 0.5s;
  transition-delay          : 0.5s;
  transform                 : scale(0.9);
  transition-timing-function: cubic-bezier(0.635, 0.255, 0.49, 2);
  opacity                   : 0;
}

@media (max-width: 558px) {
  #service .slider .slide .slideDetail figure {
    width : 160px;
    margin: 2rem auto 0;
  }
}

#service .slider .slide.slick-current .slideDetail .slideTxt .ttl {
  opacity  : 1;
  transform: translateY(0);
}

#service .slider .slide.slick-current .slideDetail .slideTxt p {
  opacity  : 1;
  transform: translateY(0);
}

#service .slider .slide.slick-current .slideDetail figure {
  opacity  : 1;
  transform: scale(1);
}

#service.change01 .sliderLine circle.change {
  stroke-dashoffset: 1772;
  stroke-opacity   : 0;
}

#service.change02 .sliderLine circle.change {
  stroke-dashoffset: 1196;
}

#service.change03 .sliderLine circle.change {
  stroke-dashoffset: 1020;
}

#service.change04 .sliderLine circle.change {
  stroke-dashoffset: 858;
}

#service.change05 .sliderLine circle.change {
  stroke-dashoffset: 576;
}

#service.change06 .sliderLine circle.change {
  stroke-dashoffset: 450;
}

#service.change07 .sliderLine circle.change {
  stroke-dashoffset: 260;
}

#service.change01.change07 .sliderLine circle.change {
  stroke-dashoffset: 0;
  stroke-opacity   : 0;
}

#service.animated .sliderLine {
  opacity         : 1;
  transition-delay: 1s;
}

#service.animated .slider {
  opacity: 1;
}

#service.animated .slider .slick-dots li {
  margin : 0;
  opacity: 1;
}

@media (max-width: 558px) {
  #service.animated .slider .slick-dots li:nth-child(1) {
    top : -13px;
    left: 132px;
  }

  #service.animated .slider .slick-dots li:nth-child(2) {
    top : 80px;
    left: 272px;
  }

  #service.animated .slider .slick-dots li:nth-child(3) {
    top : 200px;
    left: 272px;
  }

  #service.animated .slider .slick-dots li:nth-child(4) {
    top : 258px;
    left: 212px;
  }

  #service.animated .slider .slick-dots li:nth-child(5) {
    top : 258px;
    left: 52px;
  }

  #service.animated .slider .slick-dots li:nth-child(6) {
    top : 200px;
    left: 0px;
  }

  #service.animated .slider .slick-dots li:nth-child(7) {
    top : 80px;
    left: -8px;
  }
}

@media (min-width: 559px) {
  #service.animated .slider .slick-dots li:nth-child(1) {
    top : -20px;
    left: 192px;
  }

  #service.animated .slider .slick-dots li:nth-child(2) {
    top : 80px;
    left: 376px;
  }

  #service.animated .slider .slick-dots li:nth-child(3) {
    top : 240px;
    left: 404px;
  }

  #service.animated .slider .slick-dots li:nth-child(4) {
    top : 380px;
    left: 310px;
  }

  #service.animated .slider .slick-dots li:nth-child(5) {
    top : 380px;
    left: 80px;
  }

  #service.animated .slider .slick-dots li:nth-child(6) {
    top : 240px;
    left: -12px;
  }

  #service.animated .slider .slick-dots li:nth-child(7) {
    top : 80px;
    left: 18px;
  }
}

#service.animated .slider .slick-dots li:after {
  content          : "";
  display          : inline-block;
  background-size  : contain;
  background-repeat: no-repeat;
  vertical-align   : middle;
  position         : absolute;
  top              : 50%;
  left             : 50%;
  transform        : translateY(-50%) translateX(-50%);
}

@media (max-width: 558px) {
  #service.animated .slider .slick-dots li:after {
    width : 90px;
    height: 90px;
  }
}

@media (min-width: 559px) {
  #service.animated .slider .slick-dots li:after {
    width : 148px;
    height: 148px;
  }
}

#service.animated .slider .slick-dots li:nth-child(1):after {
  background-image: url("../img/top/service-icon01-tit.svg");
}

#service.animated .slider .slick-dots li:nth-child(2):after {
  background-image: url("../img/top/service-icon02-tit.svg");
}

#service.animated .slider .slick-dots li:nth-child(3):after {
  background-image: url("../img/top/service-icon03-tit.svg");
}

#service.animated .slider .slick-dots li:nth-child(4):after {
  background-image: url("../img/top/service-icon04-tit.svg");
}

#service.animated .slider .slick-dots li:nth-child(5):after {
  background-image: url("../img/top/service-icon05-tit.svg");
}

#service.animated .slider .slick-dots li:nth-child(6):after {
  background-image: url("../img/top/service-icon06-tit.svg");
}

#service.animated .slider .slick-dots li:nth-child(7):after {
  background-image: url("../img/top/service-icon07-tit.svg");
}

@media (min-width: 559px) and (max-width: 958px) {
  .sec05-con01-item02 {
    position: absolute;
    top     : 540px;
    left    : 0;
    right   : 0;
    margin  : auto;
  }
}

.sec-tit {
  color: #98958E;
}

.sec05-con01-item02-text {
  text-align : center;
  font-size  : 1.7rem;
  font-weight: bold;
  color      : #0E335D;
}

@media (min-width: 959px) {
  .sec05-con01-item02-text {
    margin-top : 5rem;
    text-align : left;
    font-size  : 2.2rem;
    line-height: 2.2;
  }
}

.sec05-con01-item02-btn {
  width    : 18rem;
  font-size: 1.7rem;
  margin   : 3rem auto 0;
}

@media (min-width: 959px) {
  .sec05-con01-item02-btn {
    margin: 5rem 0 0;
  }
}

/* sec06 -----------------------------------------------*/
.sec06-inner {
  padding: 5rem 1rem;
}

@media (min-width: 959px) {
  .sec06-inner {
    max-width: 100rem;
    margin   : auto;
    padding  : 10rem 1rem;
  }
}

.sec06-message {
  text-align : center;
  font-size  : 1.7rem;
  line-height: 1.8;
  font-weight: bold;
  color      : #0E335D;
}

@media (min-width: 959px) {
  .sec06-message {
    font-size: 2.2rem;
  }
}

.sec06-con01 {
  display        : grid;
  grid-row-gap   : 2rem;
  justify-content: center;
  margin-top     : 3rem;
}

@media (min-width: 959px) {
  .sec06-con01 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.sec06-con01-item {
  display      : grid;
  justify-self : center;
  align-content: center;
  width        : 26rem;
  height       : 26rem;
  padding      : 2rem;
  background   : #FFC332;
  border-radius: 50%;
  text-align   : center;
  color        : #0E335D;
}

.sec06-con01-tit {
  font-size  : 2rem;
  font-weight: bold;
}

.sec06-con01-num {
  margin-top : 1rem;
  font-size  : 6rem;
  font-weight: bold;
}

.sec06-con01-num small {
  font-size: 2rem;
}

/* Bar Chart */
.h2_graph {
  text-align : center;
  font-size  : 2.2rem;
  line-height: 1.8;
  font-weight: bold;
  color      : #0E335D;
  margin     : 30px 0px 50px 0px;
}

.div_graph_flex {
  width          : 100%;
  display        : flex;
  flex-wrap      : nowrap;
  flex-direction : row;
  align-content  : flex-start;
  justify-content: space-evenly;
  align-items    : stretch;
  margin-top     : 30px;
}

.div_graph_flex>div {
  width: 25%;
}

.div_graph {
  margin-bottom: 100px;
}

.g_frame {
  border-left  : 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  height       : 300px;
  width        : 100%;
  margin       : 0px auto;
  position     : relative;
}

.g_bar {
  width     : 3.4%;
  background: #FFC332;
  position  : absolute;
  bottom    : 0px;
  transform : translateX(-100%);
  transition: background 0.2s;
  cursor    : pointer;
}

.g_bar:hover {
  background: #185AA5;
}

.g_bar1 { left: 1%; }
.g_bar2 { left: 6.5%; }
.g_bar3 { left: 12%; }
.g_bar4 { left: 17.5%; }
.g_bar5 { left: 23%; }
.g_bar6 { left: 28.5%; }
.g_bar7 { left: 34%; }
.g_bar8 { left: 39.5%; }
.g_bar9 { left: 45%; }
.g_bar10 { left: 50.5%; }
.g_bar11 { left: 56%; }
.g_bar12 { left: 61.5%; }
.g_bar13 { left: 67%; }
.g_bar14 { left: 72.5%; }
.g_bar15 { left: 78%; }
.g_bar16 { left: 83.5%; }
.g_bar17 { left: 89%; }
.g_bar18 { left: 94.5%; }
.g_bar19 { left: 100%; } /* 第33期 */

.g_left {
  width       : 30px;
  height      : 100%;
  position    : absolute;
  bottom      : 0px;
  right       : 100%;
  text-align  : center;
  writing-mode: vertical-lr;
}

.g_value {
  opacity    : 0;
  transition : opacity 0.2s;
  padding-top: 10px;
  line-height: 100%;
  top        : -30px;
  left       : 50%;
  position   : absolute;
  font-size  : 1.6rem;
  text-align : center;
  transform  : translateX(-50%);
  font-weight: bold;
  color      : #185aa5;
}

.g_bar:hover {
  z-index: 9;
  /*ok??*/
}

.g_bar:hover .g_value,
.g_bar:hover .g_term {
  opacity: 1;
}

.g_bar:hover~.g_bottom {
  opacity: 0;
}

.g_term {
  opacity    : 0;
  transition : opacity 0.2s;
  position   : absolute;
  bottom     : -30px;
  left       : 50%;
  line-height: 30px;
  color      : #185aa5;
  font-size  : 1.6rem;
  font-weight: bold;
  text-align : center;
  width      : 50px;
  transform  : translateX(-50%);
}

.g_bottom {
  position   : absolute;
  bottom     : -40px;
  line-height: 30px;
  text-align : center;
  width      : 100%;
}

.g_total {
  font-family   : "DINPro Medium";
  font-weight   : normal;
  font-size     : 4rem;
  color         : #185aa5;
  text-align    : center;
  pointer-events: none;
}

@media (max-width: 959px) {
  .div_graph_flex {
    flex-direction: column;
    align-items   : center;
  }

  .div_graph_flex>div {
    width: 50vw;
  }
}

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