/* ==========================================================================
  plugin
  https://github.com/protonet/jquery.inview
========================================================================== */
.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
  transition-delay:0.2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_up.delayA {
  transition-delay:0.3s;
}
.fadeIn_up.delayB {
  transition-delay:0.6s;
}
.fadeIn_up.delayC {
  transition-delay:0.9s;
}
.fadeIn_up.delayD {
  transition-delay:1.2s;
}
.fadeIn_up.delayX {
  transition-delay:0s;
}


/* ==========================================================================
  header-visual
========================================================================== */
#content{
  /* padding-top:86px;
  font-family: YuGothic, Meiryo, "Hiragino Kaku Gothic ProN", Arial, sans-serif; */
  font-size: 14px;
  line-height: 1.7;
}
#content *{
  box-sizing: border-box;
}
.bg-page-title {
  max-height: 400px;
  padding: 144px 10px 98px;
}
.bg-page-title h2{
  background-color: rgba(51,51,51,0.5);
  display: inline-block;
  padding: 20px 25px;
}
@media screen and (max-width: 1920px) {
  .bg-page-title {
    background-position-y: 20%;
  }
}
@media screen and (max-width: 900px) {
  .bg-page-title {
    background-position-y: 0%;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 14vw 10px;
    max-height: 41vw;
  }
}
@media screen and (max-width: 700px) {
  .bg-page-title h2{
    padding: 2vw 2.5vw;
  }
  .bg-page-title img{
    width:22vw;
    height: auto;
  }
}
@media screen and (max-width: 500px) {
  /* #content{
    padding-top:81px;
  } */
  .bg-page-title {
    height: 200px;
    padding: 65px 10px;
    max-height: none;
  }
  .bg-page-title h2{
    padding: 11px 15px;
  }

}
/* ==========================================================================
  sec common
========================================================================== */
.ttl-sec{
  font-size: 26px;
  font-weight: 900;
  line-height: 1.0;
  margin-bottom:16px;
}
.ttl-sec .eng{
  color:#f00;
  font-size: 14px;
  font-weight: 400;
}
.ttl-sec .dotted{
  display: inline-block;
  padding-bottom:22px;
  background: url(/saiyou/img/newgrads/welfare/dotted_red.png.webp) left bottom no-repeat;
  background-size: 130px 2px;
  line-height: 1.2;
}
.copy{
  font-size: 20px;
  margin-bottom: 8px;
}
.txt{
  font-size:14px;
  margin-bottom:21px;
}
.ttl-item{
  font-size:21px;
  display: block;
  padding-bottom:10px;
  background: url(/saiyou/img/newgrads/welfare/dotted_black.png.webp) left bottom no-repeat;
  background-size: 130px 2px;
  line-height: 1.2;
  margin-bottom:30px;
}
.keyword{
  font-size:24px;
  color:#11335f;
  line-height: 1.5;
}
@media screen and (max-width: 1000px) {
  section > .bg-white{
    padding:21px 44px 39px;
  }
}
@media screen and (max-width: 700px) {
  section > .bg-white{
    padding:21px 10px 39px;
  }
  .ttl-sec{
    font-size:22px;
  }
}
@media screen and (max-width: 500px) {
  .ttl-sec{
    font-size:18px;
  }
  .ttl-sec .eng{
    font-size:10px;
  }
  .ttl-sec .dotted{
    line-height: 1.3;
    background-size: 100px 1px;
    padding-bottom:10px;
  }
  section > .bg-white{
    max-width: 94%;
    margin-left: 0px;
    padding: 16px 15px 0px 20px;
  }
  .copy{
    font-size:12px; /* 16px; */
    line-height: 1.4;
  }
  .txt{
    font-size:12px;
  }
}
/* ==========================================================================
  bg
========================================================================== */
.bg1{
  position: relative;
  overflow: hidden;
}
.bg-gradient{
  content: '';
  display: block;
  width: 49.5%;
  max-width: 970px;
  position: absolute;
  top: 50px;
  left: 0%;
	height: 97.9%;
  background:linear-gradient(10deg, #acb6fe,#6bb988,#dfd63d,#6bb988,#acb6fe);
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 22s ease infinite;
}
.bg2{
  content: '';
  display: block;
  width: 37.5%;
  height: 99%;
  max-width: 813px;
  position: absolute;
  top: -55px;
  left: 62.5%;
  background-color: rgba(213,213,213,0.5);
}
@keyframes bggradient{
	0% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 50% 100%;
	}
	100% {
		background-position: 50% 0%;
	}
}

@media screen and (max-width: 1000px) {
  .bg-gradient{
    width: 49%;
    left: 0%;
  }
  .bg2{
    width: 35%;
    left: 75%;
  }
}
@media screen and (max-width: 500px) {
  .bg-gradient {
    width: 43%;
    left: 0%;
    top: 62px;
        height: 94.9%;
  }
  .bg2 {
    top: 0px;
    left: 72.5%;
  }
}

/* ==========================================================================
  sec1
========================================================================== */
.sec1{
  position: relative;
  padding-bottom: 103px;
}
.sec1 > *{
  position: relative;
}
section > .bg-white{
  background-color: #fff;
  max-width: 1560px;
  margin: 84px 0 80px 11.5%;
  padding: 24px 45px 105px 45px;
}
section > .bg-white .bg-white-inner{
  max-width: 1440px;
  margin: 0 auto;;
}

.sec1 .ttl-sec{
  max-width: 1431px;
  margin:48px auto 80px;
  padding:0px 33px;
}

.sec1 img{
  height: auto;
  max-width: 100%;
}
.item-content + .item-content{
  margin-top:90px;
}
.item-content .col2{
  display: flex;
}
.indent4{
  text-indent:-3.2em;
  padding-left:3.5em;
}
.ttl-sub{
  font-size:16px;
  font-weight: 900;
}
@media screen and (max-width: 2560px) {
  section > .bg-white {
    max-width: 61%;
}
}
@media screen and (max-width: 1600px) {
  section > .bg-white {
    max-width: 84.5%;
    margin: 84px 5.5% 80px 0;
    padding: 23px 34px 105px 34px;
  }
  .accordion-content{
    max-width:36em;
  }
}
@media screen and (max-width: 1160px) {
  .br1{
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  .sec1 .ttl-sec{
    padding:0px 44px;
  }
  section > .bg-white {
    max-width: 94.5%;
    margin: 84px 5.5% 80px 0;
    padding: 23px 30px 105px 30px;
  }
  .copy{
    padding-left: 10px;
  }

}
@media screen and (max-width: 700px) {
  .sec1 .ttl-sec{
    padding:0px 10px;
  }
}

@media screen and (max-width: 500px) {
  .sec1 .ttl-sec{
    margin:22px auto 55px;
    padding:0px 0px 0px 20px;
  }
  section > .bg-white{
    padding: 23px 15px 105px 15px;
  }
  .ttl-item {
    font-size: 18px;
    margin-bottom: 15px;
    background-size: 100px 1px;
  }
  .item-content + .item-content {
    margin-top:44px;
  }
}