@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  position: relative;
  margin: 0 auto !important;
  font-family: "Hiragino Kaku Gothic ProN" !important;
  background: #C5DDF2;
  color: #fff;
}

img {
  width: -webkit-fill-available;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  /* Safari, Chrome */
  image-rendering: optimizeQuality;
  width: -moz-available;
  pointer-events: none;
  width: 100%;
}

a {
  display: block;
}

iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.fade {
  opacity: 0;
}

.fade-in {
  opacity: 1;
  transition: all 2s;
}

.fade-scale {
  transform: scale(0);
}

.fade-scale-in {
  transform: scale(1);
  transition: all 0.3s;
}

.spview {
  background: #fff;
}

.header {
  display: flex;
  position: fixed;
  z-index: 99;
  padding: 1.5% 2%;
  font-size: 2.325581vw;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  transition: 0.3s;
}
.header__logo {
  width: 11%;
}
.header__list {
  display: flex;
  width: 85%;
  justify-content: space-between;
  align-items: center;
}
.header__item.contact {
  background-color: #2F75B5;
  border-radius: 6px;
  width: 20%;
}
.header__item.contact a {
  padding: 20.02% 14.02%;
}

.header.change-color {
  background: rgba(15, 48, 74, 0.4);
  transition: 0.3s;
}

.campaign {
  background-image: url(../common/img/campaign-bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 3.024% 0 10%;
}
.campaign__limit {
  margin-top: 5.815%;
}
.campaign__txt {
  text-align: center;
  margin-top: 2.326%;
  color: #fff;
  font-size: 4.186047vw;
  font-weight: bold;
}
.campaign__txt span {
  font-size: 5.116279vw;
}
.campaign__btn {
  margin: 2.792% auto 0;
  width: 86.046512%;
}
.campaign__point {
  margin-top: 8.14%;
  position: relative;
}
.campaign__pointBtn {
  position: absolute;
  bottom: 2.5%;
  width: 91.117%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.cause {
  background-image: url(../common/img/cause-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 6.978% 0 2.559%;
  text-align: center;
  font-weight: bold;
  position: relative;
  z-index: 1;
}
.cause__subTxt {
  font-size: 4.186047vw;
}
.cause__txtTop {
  margin-top: 2.326%;
  font-size: 6.27907vw;
  position: relative;
}
.cause__txtTop span {
  font-size: 4.883721vw;
}
.cause__txtTop::after {
  position: absolute;
  content: "";
  background-image: url(../common/img/cause-arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 7.907%;
  height: 159.26%;
  left: 50%;
  bottom: -231%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.cause__txtMiddle {
  margin-top: 18.605%;
  font-size: 5.581395vw;
}
.cause__ttlWrapper {
  margin-top: 3.49%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%;
}
.cause__ttlWrapper h2 {
  padding: 2%;
  background-color: #fff;
  color: #0F304A;
  font-size: 9.302326vw;
  border: 1px solid #707070;
}
.cause__txtBottom {
  font-size: 7.674419vw;
}
.cause__innsetTtl {
  font-size: 9.069767vw;
  background: linear-gradient(transparent 73%, #64B5FF 50%);
  padding-bottom: 1%;
  font-weight: bold;
  width: 36%;
  margin: 10.234% auto 0;
  text-align: center;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.cause__innsetTtl span {
  font-size: 4.186047vw;
}

.innset {
  background-image: url(../common/img/innset-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: -16%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 15.582% 0 10.932%;
  position: relative;
  z-index: 0;
}
.innset__item {
  position: relative;
}
.innset__item:nth-child(2) {
  margin-top: 10.234%;
}
.innset__itemImg {
  position: relative;
  z-index: 1;
}
.innset__itemTxtWrapper {
  width: -moz-fit-content;
  width: fit-content;
  padding: 5.583% 2% 5.118% 5.187%;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
  border-radius: 6px 0 0 6px;
  position: absolute;
  background-color: #fff;
  top: 35%;
  right: 0;
}
.innset__item:nth-child(2) .innset__itemTxtWrapper {
  left: 0;
  padding: 4.652% 2.326% 4.652% 3.489%;
  bottom: -20%;
  top: auto;
  border-radius: 0 6px 6px 0;
}
.innset__itemTxt {
  font-size: 3.488332vw;
  color: #191C1D;
  letter-spacing: 0.044em;
  line-height: 1.3;
}
.innset__txtWrapper {
  margin-top: 20.234%;
  text-align: center;
}
.innset__txtTop {
  color: #191C1D;
  font-size: 3.488372vw;
}
.innset__txtMiddle {
  margin-top: 6.745%;
  font-size: 4.651163vw;
  color: #0F304A;
  line-height: 1.5;
}
.innset__txtBottom {
  margin-top: 6.885%;
  color: #0F304A;
  font-size: 4.651163vw;
}
.innset__txtBottom span {
  background-color: #fff;
  padding: 2%;
  border: 1px solid #8494A3;
  border-radius: 4px;
  margin-right: 1%;
}
.innset__content {
  position: relative;
  margin-top: 5.814%;
}
.innset__contentTxt {
  position: absolute;
  top: 50%;
  left: 11%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #0F304A;
  font-size: 5.581395vw;
  line-height: 1.5;
  text-align: center;
}
.innset__contentMiddle {
  font-size: 7.906977vw;
  color: #317DBF;
}
.innset__contentMiddle span {
  background-color: #fff;
  padding: 3% 4%;
  border-radius: 4px;
}
.innset__point {
  margin-top: -1.5%;
  position: relative;
}
.innset__pointBtn {
  position: absolute;
  bottom: 2.5%;
  width: 91.117%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.target {
  color: #0F304A;
  text-align: center;
  padding: 11.628% 0;
}
.target__ttl {
  font-size: 6.511638vw;
}
.target__ttl span {
  display: block;
  font-size: 3.255814vw;
  margin-top: 1%;
}
.target .swiper {
  margin-top: 10.466%;
  width: 93%;
  text-align: left;
  padding-bottom: 0%;
}
.target .swiper-slide {
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  border: 3px solid rgb(194, 222, 244);
  padding: 5%;
  margin-right: 20px;
  border-radius: 6px;
}
.target__img {
  width: 100%;
}
.target__content {
  width: 70%;
}
.target__content span {
  font-size: 3.023256vw;
  color: #fff;
  background-color: #0F304A;
  padding: 3%;
  border-radius: 2px;
  display: inline-block;
}
.target__txt {
  line-height: 1.5;
  font-size: 16px;
  margin-top: 2%;
}
.target .swiper-pagination-bullet {
  background-color: #fff;
  border: 2px solid #939EA7;
}
.target .swiper-pagination-bullet-active {
  background-color: #0F304A;
}
.target__point {
  margin-top: 11.629%;
  position: relative;
}
.target__pointBtn {
  position: absolute;
  bottom: 5%;
  width: 91.117%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.target table {
  border-collapse: collapse;
  margin-top: 4.996%;
  width: 100%;
  font-size: 4.651163vw;
}
.target th,
.target td {
  border: 1px solid #98A0A3;
}
.target tr {
  line-height: 1.5;
}
.target td {
  line-height: 1.4;
  font-size: 3.255814vw;
}
.target td span {
  font-size: 3.023256vw;
}
.target__size {
  width: 93.1%;
  margin: 10% auto 0;
}
.target__sizeTtl {
  background-color: #0F304A;
  color: #fff;
  padding: 1% 0;
  font-size: 4.651163vw;
  font-weight: bold;
}
.target__sizeAnnotation {
  text-align: left;
  margin-top: 2.498%;
  font-size: 3.023256vw;
}

.inner {
  background-image: url(../common/img/inner-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 13.49% 0 4.652%;
  color: #191C1D;
  text-align: center;
}
.inner__ttl {
  font-size: 6.511628vw;
  color: #0F304A;
}
.inner__ttl span {
  color: #135283;
  font-size: 3.255814vw;
  margin-top: 1%;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}
.inner__txt {
  line-height: 1.3;
  font-size: 3.488372vw;
  margin-top: 4.42%;
}
.inner__list {
  position: relative;
  display: flex;
  width: 93.1%;
  margin: 7.907% auto 0;
}
.inner__list::after {
  position: absolute;
  content: "";
  background-image: url(../common/img/inner-arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 19.985%;
  height: 10.226%;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.inner__itemTtl {
  background-color: #0F304A;
  color: #fff;
  padding: 3%;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 4px;
  margin: 0 auto;
  font-size: 3.488372vw;
}
.inner__itemImg {
  margin-top: 13.956%;
}
.inner__innsetImg {
  margin-top: 12%;
}
.inner__content {
  margin-top: 3.326%;
  font-weight: bold;
}
.inner__contentTxt {
  font-size: 3.488372vw;
}
.inner__contentTxt span {
  background-image: linear-gradient(0deg, rgb(24, 59, 91), rgb(47, 117, 181));
  color: #fff;
  padding: 1.5% 1%;
}
.inner__contentTtlWrapper {
  display: flex;
  justify-content: center;
  align-items: end;
  margin-top: 6.047%;
}
.inner__contentTtlWrapper span {
  font-size: 5.11629vw;
}
.inner__contentTtl {
  background: linear-gradient(180deg, #2F75B5 0%, #183B5B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 8.372093vw;
}
.inner__contentTtl span {
  font-size: 6.27907vw;
}
.inner__contentSubTtl {
  font-size: 5.813953vw;
  margin-top: 3.49%;
}

.point {
  text-align: center;
  margin-top: 9.303%;
  color: #0F304A;
  padding-bottom: 13%;
}
.point__list {
  width: 93.1%;
  margin: 0 auto;
}
.point__item {
  padding: 6.745% 3.747% 5.246%;
  background-color: #E3E9F6;
  border-radius: 6px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
.point__item:nth-child(2) {
  margin-top: 8.994%;
  background-color: #DFE9F3;
}
.point__itemTtl {
  font-size: 6.511628vw;
  color: #135283;
  opacity: 0.09;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.point__itemTtlBottom {
  display: block;
  font-size: 4.651163vw;
  color: #0F304A;
  font-weight: bold;
  margin-top: -3%;
  letter-spacing: 0.04em;
}
.point__itemSubTtl {
  font-size: 6.511638vw;
  font-weight: bold;
  margin-top: 3.49%;
  background: linear-gradient(45deg, #2F75B5 0%, #183B5B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.point__itemTxt {
  margin-top: 7.676%;
  text-align: left;
  line-height: 1.5;
}
.point__itemTxt span {
  background: linear-gradient(transparent 50%, #F9FFB2 50%);
  padding-bottom: 1%;
}
.point__itemImg {
  margin-top: 2.701%;
}

.scenario {
  background-image: url(../common/img/scenario-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 19.536% 0 4.652%;
  text-align: center;
}
.scenario__ttl {
  font-size: 6.511628vw;
  color: #0F304A;
}
.scenario__ttl span {
  color: #135283;
  font-size: 3.255814vw;
  margin-top: 1.5%;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}
.scenario__txtWrapper {
  width: 86%;
  margin: 5% auto 0;
}
.scenario__txt {
  font-size: 3.488372vw;
  color: #191C1D;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.scenario__txt + .scenario__txt {
  margin-top: 7.573%;
}
.scenario__img {
  width: 78.14%;
  margin: 14.42% auto 0;
}

.voice {
  color: #0F304A;
  text-align: center;
  padding: 11.628% 0;
}
.voice__ttl {
  font-size: 6.511638vw;
}
.voice__ttl span {
  display: block;
  font-size: 3.255814vw;
  margin-top: 1%;
}
.voice .swiper {
  margin-top: 10.466%;
  width: 93%;
  text-align: left;
  padding-bottom: 12%;
}
.voice .swiper-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px solid rgb(194, 222, 244);
  padding: 5%;
  margin-right: 20px;
  border-radius: 6px;
}
.voice__icon {
  width: 20%;
}
.voice__content {
  width: 70%;
}
.voice__content span {
  font-size: 3.023256vw;
  color: #fff;
  background-color: #0F304A;
  padding: 3%;
  border-radius: 2px;
  display: inline-block;
}
.voice__txt {
  line-height: 1.5;
  font-size: 3.255814vw;
  margin-top: 2%;
}
.voice .swiper-pagination-bullet {
  background-color: #fff;
  border: 2px solid #939EA7;
}
.voice .swiper-pagination-bullet-active {
  background-color: #0F304A;
}
.voice__point {
  margin-top: 11.629%;
  position: relative;
}
.voice__pointBtn {
  position: absolute;
  bottom: 5%;
  width: 91.117%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.voice table {
  border-collapse: collapse;
  margin-top: 4.996%;
  width: 100%;
  font-size: 4.651163vw;
}
.voice th,
.voice td {
  border: 1px solid #98A0A3;
}
.voice tr {
  line-height: 1.5;
}
.voice td {
  line-height: 1.4;
  font-size: 3.255814vw;
}
.voice td span {
  font-size: 3.023256vw;
}
.voice__size {
  width: 93.1%;
  margin: 10% auto 0;
}
.voice__sizeTtl {
  background-color: #0F304A;
  color: #fff;
  padding: 1% 0;
  font-size: 4.651163vw;
  font-weight: bold;
}
.voice__sizeAnnotation {
  text-align: left;
  margin-top: 2.498%;
  font-size: 3.023256vw;
}

.message {
  background-image: linear-gradient(0deg, rgb(24, 59, 91), rgb(47, 117, 181));
  text-align: center;
  padding: 8.838% 0 11.163%;
}
.message__inner {
  width: 93.1%;
  margin: 0 auto;
}
.message__ttl {
  font-size: 6.511638vw;
  font-weight: 600;
  opacity: 0.34;
}
.message__subTtl {
  font-size: 6.511638vw;
  font-weight: bold;
  margin-top: 4.652%;
}
.message__txt {
  margin-top: 10.698%;
  line-height: 1.5;
}
.message__txt + .message__txt {
  margin-top: 6.512%;
}
.message__img {
  margin-top: 14.187%;
}
.message__ttlBottom {
  font-size: 5.581395vw;
  margin-top: 6.513%;
  font-weight: bold;
  line-height: 1.1;
}

.other {
  color: #191C1D;
  padding: 16.117% 0 11.628%;
  width: 93.1%;
  margin: 0 auto;
}
.other__attentionTtl, .other__aboutTtl {
  background-color: #0F304A;
  color: #fff;
  padding: 1% 0;
  font-size: 4.651163vw;
  text-align: center;
  font-weight: bold;
}
.other__attentionTxt, .other__aboutTxt {
  margin-top: 5.246%;
  line-height: 1.4;
}
.other__about {
  margin-top: 10.493%;
}
.other__aboutTxt {
  padding-left: 3em;
  text-indent: -3em;
}
.other__aboutTxt:nth-child(3) {
  padding-left: 4em;
  text-indent: -4em;
}
.other__aboutTxt:nth-child(4) {
  padding-left: 5em;
  text-indent: -5em;
}

.cta {
  position: fixed;
  bottom: 0;
  width: 100%;
  opacity: 0;
  z-index: 99;
  display: block;
  margin: 0 auto;
  right: 0;
  left: 0;
}
.cta__btn {
  position: absolute;
  z-index: 100;
  bottom: 1%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 75%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.specialbtn a {
  position: relative;
  overflow: hidden;
  transition: 1000ms;
}

.specialbtn a::before {
  content: "";
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  transition: 1000ms;
  animation: shine 3s ease-in-out infinite;
}

@keyframes shine {
  0% {
    -webkit-transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(-45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(-45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(-45deg);
    opacity: 0;
  }
}
/*　上に上がる動き　*/
#cta-btn.UpMove {
  animation: UpAnime 0.8s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#cta-btn.DownMove {
  animation: DownAnime 0.8s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(200px);
  }
}
.footer {
  background-color: #0F304A;
  text-align: center;
  padding: 2% 0;
}

@media screen and (min-width: 1024px) {
  .spview {
    max-width: 480px;
    margin: 0 auto;
    position: relative;
  }
  .header {
    font-size: 0.7rem;
    max-width: 480px;
    padding: 1%;
  }
  .header__item.contact {
    text-align: center;
  }
  .header__item.contact a {
    padding: 10% 0;
  }
  .campaign__txt {
    font-size: 1.25rem;
  }
  .campaign__txt span {
    font-size: 1.5rem;
  }
  .cause__subTxt {
    font-size: 1.25rem;
  }
  .cause__txt {
    font-size: 1.25rem;
  }
  .cause__txtTop {
    font-size: 1.875rem;
  }
  .cause__txtTop span {
    font-size: 1.4375rem;
  }
  .cause__txtMiddle {
    font-size: 1.625rem;
  }
  .cause__ttlWrapper h2 {
    font-size: 2.75rem;
  }
  .cause__txtBottom {
    font-size: 2.25rem;
  }
  .cause__innsetTtl {
    font-size: 2.75rem;
  }
  .cause__innsetTtl span {
    font-size: 1.25rem;
  }
  .innset__itemTxt {
    font-size: 1.05rem;
  }
  .innset__txtTop {
    font-size: 1.05rem;
  }
  .innset__txtMiddle {
    font-size: 1.4rem;
  }
  .innset__txtBottom {
    font-size: 1.4rem;
  }
  .innset__contentTxt {
    font-size: 1.625rem;
  }
  .innset__contentMiddle {
    font-size: 2.375rem;
  }
  .inner__ttl {
    font-size: 2rem;
  }
  .inner__ttl span {
    font-size: 1rem;
  }
  .inner__txt {
    font-size: 1.05rem;
  }
  .inner__itemTtl {
    font-size: 1.05rem;
  }
  .inner__contentTxt {
    font-size: 1.05rem;
  }
  .inner__contentTtlWrapper span {
    font-size: 1.5rem;
  }
  .inner__contentTtl {
    font-size: 2.5rem;
  }
  .inner__contentTtl span {
    font-size: 2rem;
  }
  .inner__contentSubTtl {
    font-size: 1.75rem;
  }
  .point__itemTtl {
    font-size: 2rem;
  }
  .point__itemTtlBottom {
    font-size: 1.4rem;
  }
  .point__itemSubTtl {
    font-size: 2rem;
  }
  .scenario__ttl {
    font-size: 2rem;
  }
  .scenario__ttl span {
    font-size: 1rem;
  }
  .scenario__txt {
    font-size: 1.05rem;
  }
  .voice__ttl {
    font-size: 2rem;
  }
  .voice__ttl span {
    font-size: 1rem;
  }
  .voice__content span {
    font-size: 0.90625rem;
  }
  .voice__txt {
    font-size: 0.97rem;
  }
  .voice__sizeTtl {
    font-size: 1.4375rem;
  }
  .voice table {
    font-size: 1.4375rem;
  }
  .voice td {
    font-size: 0.97rem;
  }
  .voice td span {
    font-size: 0.90625rem;
  }
  .voice__sizeAnnotation {
    font-size: 0.90625rem;
  }
  .message__ttl {
    font-size: 2rem;
  }
  .message__subTtl {
    font-size: 2rem;
  }
  .message__ttlBottom {
    font-size: 1.67rem;
  }
  .other__attentionTtl, .other__aboutTtl {
    font-size: 1.4rem;
  }
  .cta {
    max-width: 480px;
  }
}/*# sourceMappingURL=style.css.map */