@charset "UTF-8";
/*******************************************************************/
/* PC */
/*******************************************************************/
@media print, screen and (min-width: 769px) {
  /*<start>==========================================================*/
  .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
  }
  /*=================================================================*/
  /*	mainvisual */
  /*=================================================================*/
  .page {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #FFFEF8;
  }
  .page .mainvisual {
    width: 90%;
    max-width: 2000px;
    aspect-ratio: 1325/658;
    background: url(../images/top/mainvisual_img.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    color: #fff;
    z-index: 1;
  }
  .page .mainvisual .logo {
    width: 90%;
    max-width: 1165px;
    margin: 12% auto 0;
  }
  .page .mainvisual .logo img {
    width: 100%;
    height: auto;
  }
  .page .mainvisual .mainCatch {
    font-family: "M PLUS 1p", sans-serif;
    font-size: 3.2rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.6;
    padding-top: 2%;
  }
  .page .mainvisual .mainBtn a {
    display: block;
    font-size: 2.7rem;
    font-weight: bold;
    color: #333;
    width: 400px;
    padding: 20px 10px;
    text-align: center;
    background: #fff url(../images/top/arrow01.svg) no-repeat center right 20px;
    border-radius: 50px;
    box-sizing: border-box;
    border: 7px solid #333;
    margin: 50px auto 0;
    transition: 0.3s;
  }
  .page .mainvisual .mainBtn a:hover {
    opacity: 1;
    background: #e9e9e9 url(../images/top/arrow01.svg) no-repeat center right 15px;
  }
  /*紙吹雪のスタイル*/
  .confetti {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .confetti span {
    position: absolute;
    top: -100%; /*アニメーション以外の紙吹雪を非表示*/
    left: 0;
  }
  /*アニメーションの記述*/
  .confetti span:nth-child(2n+1) {
    animation: confetti1 5s 0s linear infinite;
  }
  .confetti span:nth-child(2n+2) {
    animation: confetti2 5s 0s linear infinite;
  }
  /*紙吹雪を回転させる記述*/
  @keyframes confetti1 {
    0% {
      top: -10%;
      transform: translateX(0) rotateX(0) rotateY(0);
    }
    100% {
      top: 100%;
      transform: translateX(20px) rotateX(180deg) rotateY(360deg);
    }
  }
  @keyframes confetti2 {
    0% {
      top: -10%;
      transform: translateX(0) rotateX(0) rotateY(0);
    }
    100% {
      top: 100%;
      transform: translateX(-20vw) rotateX(180deg) rotateY(360deg);
    }
  }
  /*紙吹雪の配置*/
  .confetti span:nth-child(1) {
    left: 0%;
  }
  .confetti span:nth-child(2) {
    left: 10%;
  }
  .confetti span:nth-child(3) {
    left: 20%;
  }
  .confetti span:nth-child(4) {
    left: 30%;
  }
  .confetti span:nth-child(5) {
    left: 40%;
  }
  .confetti span:nth-child(6) {
    left: 50%;
  }
  .confetti span:nth-child(7) {
    left: 60%;
  }
  .confetti span:nth-child(8) {
    left: 70%;
  }
  .confetti span:nth-child(9) {
    left: 80%;
  }
  .confetti span:nth-child(10) {
    left: 90%;
  }
  .confetti span:nth-child(11) {
    left: 100%;
  }
  /*紙吹雪の大きさ*/
  .confetti span:nth-child(3n+1) {
    width: 3vw;
    height: 4.5vw;
  }
  .confetti span:nth-child(3n+2) {
    width: 2vw;
    height: 3vw;
  }
  .confetti span:nth-child(3n+3) {
    width: 1.5vw;
    height: 2.5vw;
  }
  /*紙吹雪の色*/
  .confetti span:nth-child(2n+1) {
    background: red;
  }
  .confetti span:nth-child(2n+2) {
    background: orange;
  }
  .confetti span:nth-child(2n+3) {
    background: purple;
  }
  .confetti span:nth-child(2n+4) {
    background: pink;
  }
  .confetti span:nth-child(2n+5) {
    background: blue;
  }
  .confetti span:nth-child(2n+6) {
    background: green;
  }
  .confetti span:nth-child(2n+7) {
    background: yellow;
  }
  /*アニメーションの秒数*/
  .confetti span:nth-child(2n+1) {
    animation-duration: 5s;
  }
  .confetti span:nth-child(2n+2) {
    animation-duration: 6s;
  }
  .confetti span:nth-child(2n+3) {
    animation-duration: 10s;
  }
  .confetti span:nth-child(2n+4) {
    animation-duration: 4s;
  }
  /*紙吹雪が降り始めるまでの時間*/
  .confetti span:nth-child(2n+1) {
    animation-delay: 0s;
  }
  .confetti span:nth-child(2n+2) {
    animation-delay: 4s;
  }
  .confetti span:nth-child(2n+3) {
    animation-delay: 6s;
  }
  .confetti span:nth-child(2n+4) {
    animation-delay: 2s;
  }
  .confetti span:nth-child(2n+5) {
    animation-delay: 6s;
  }
  .confetti span:nth-child(2n+6) {
    animation-delay: 10s;
  }
  .confetti span:nth-child(2n+7) {
    animation-delay: 2s;
  }
  .confetti span:nth-child(2n+8) {
    animation-delay: 4s;
  }
  .confetti span:nth-child(2n+9) {
    animation-delay: 11s;
  }
  .confetti span:nth-child(2n+10) {
    animation-delay: 1s;
  }
  .confetti span:nth-child(2n+11) {
    animation-delay: 5s;
  }
  /*=================================================================*/
  /*	h2 */
  /*=================================================================*/
  h2 {
    font-size: 6.4rem;
    font-weight: bold;
    line-height: 1;
    margin: 20px 0;
    color: #333;
  }
  h2 .en {
    font-family: "Oswald", sans-serif;
    font-size: 4rem;
    font-weight: bold;
    line-height: 1;
    margin-top: 20px;
  }
  /*=================================================================*/
  /*	bgArea */
  /*=================================================================*/
  .bgArea {
    background: url(../images/top/load.svg) no-repeat center top -126px, url(../images/top/bg_blob.svg) no-repeat top 950px center, url(../images/top/bg_story_obi.svg) no-repeat center 100px/auto, url(../images/top/bg02.png);
  }
  /*=================================================================*/
  /*	story */
  /*=================================================================*/
  .story {
    width: 100%;
    box-sizing: border-box;
  }
  .story h2 .en {
    color: #036EB7;
  }
  .story ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11%;
    margin-top: 34px;
  }
  .story ul li {
    width: 27%;
    position: relative;
    padding-right: 60px;
  }
  .story ul li a {
    display: block;
  }
  .story ul li a .img {
    max-width: 300px;
    width: 100%;
    height: 340px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    box-sizing: border-box;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 8px 8px 0 rgba(17, 50, 14, 0.3);
  }
  .story ul li a .img img {
    width: 102%;
    height: auto;
    transform: scale(1);
    transition: 0.3s;
  }
  .story ul li a .txt {
    font-family: "M PLUS 1p", sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.6;
    position: absolute;
    top: 160px;
    left: 90px;
    margin-bottom: 10px;
  }
  .story ul li a .txt span {
    padding: 2px 10px;
    margin-bottom: 4px;
    display: inline-block;
  }
  .story ul li a .btn {
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    text-align: right;
    color: #333;
    margin-top: 20px;
    background: url(../images/top/arrow02.svg) no-repeat center right 5px;
    padding: 0 56px 0 0;
    transition: 0.3s;
  }
  .story ul li a:hover {
    opacity: 1;
  }
  .story ul li a:hover .img img {
    opacity: 0.7;
    transform: scale(1.1);
  }
  .story ul li a:hover .btn {
    background: url(../images/top/arrow02.svg) no-repeat center right 0px;
  }
  .story ul li:nth-child(1) a .txt span {
    background-color: #4CA14C;
  }
  .story ul li:nth-child(2) {
    margin-top: 45px;
  }
  .story ul li:nth-child(2) a .txt {
    top: 150px;
    left: 176px;
  }
  .story ul li:nth-child(2) a .txt span {
    background-color: #A14C91;
  }
  .story ul li:nth-child(3) a .txt {
    top: 120px;
    left: 106px;
  }
  .story ul li:nth-child(3) a .txt span {
    background-color: #A1534C;
  }
  .story ul li:nth-child(4) {
    margin-top: 45px;
  }
  .story ul li:nth-child(4) a .txt {
    top: 146px;
    left: 150px;
  }
  .story ul li:nth-child(4) a .txt span {
    background-color: #4C4EA1;
  }
  .story .bg {
    width: 100%;
    box-sizing: border-box;
    background: url(../images/top/bg_story_hito01.svg) no-repeat calc(50% - 690px) calc(50% - 450px), url(../images/top/bg_story_hito02.svg) no-repeat calc(50% + 600px) calc(50% + 350px), url(../images/top/bg_story_hito03.svg) no-repeat calc(50% - 290px) calc(50% + 550px), url(../images/top/bg_blob01.svg) no-repeat top -131px left -156px, url(../images/top/bg_blob03.svg) no-repeat top -131px right -100px;
    padding: 100px 0 200px;
  }
  /*=================================================================*/
  /*	動画で見る未来 */
  /*=================================================================*/
  .video {
    padding: 100px 0 200px;
    background: url(../images/top/bg_movie_hito01.svg) no-repeat calc(50% + 370px) 3%;
  }
  .video h2 .en {
    color: #F3AB93;
  }
  .videoList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
  }
  .videoList li {
    width: 340px;
    margin-top: 60px;
  }
  .videoList li .ttl {
    font-size: 2.1rem;
    font-weight: bold;
    padding-left: 10px;
    border-left: 10px solid #8DC21F;
  }
  .videoList li .movie {
    width: 100%;
    aspect-ratio: 340/191;
    background-color: #ffffff;
    margin-top: 10px;
  }
  .videoList li .movie button {
    width: 100%;
    height: 100%;
    transition: 0.3s;
  }
  .videoList li .movie button:hover {
    cursor: pointer;
    opacity: 0.6;
  }
  .videoList li .txt {
    margin-top: 26px;
  }
  .videoList li:nth-child(2) .ttl {
    border-left: 10px solid #FF7451;
  }
  .videoList li:nth-child(3) .ttl {
    border-left: 10px solid #A14C91;
  }
  .videoList li:nth-child(4) .ttl {
    border-left: 10px solid #97D1EF;
  }
  .videoList li:nth-child(5) .ttl {
    border-left: 10px solid #F5D97A;
  }
  /*=================================================================*/
  /*	未来診断 */
  /*=================================================================*/
  .diagnosis {
    width: 100%;
    padding: 80px 0;
    background-color: #FFFEF8;
    position: relative;
    overflow: hidden;
  }
  .diagnosis .inner {
    position: relative;
  }
  .diagnosis .inner::before {
    content: "";
    display: block;
    background: url(../images/top/bg_future_hito01.svg) no-repeat center;
    position: absolute;
    top: -36px;
    left: 47px;
    z-index: 1;
    width: 246px;
    height: 683px;
  }
  .diagnosis .inner::after {
    content: "";
    display: block;
    background: url(../images/top/bg_future_hito02.svg) no-repeat center;
    position: absolute;
    top: -36px;
    right: 25px;
    z-index: 1;
    width: 311px;
    height: 672px;
  }
  .diagnosisBox {
    width: 100%;
    padding: 10px 50px 50px;
    box-sizing: border-box;
    border: 6px solid #333;
    border-radius: 30px;
    background: #FBFAF5;
  }
  .diagnosisBox h2 {
    text-align: center;
  }
  .diagnosisBox h2 .en {
    color: #B0DB73;
  }
  .diagnosisBox .txt {
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.6;
    margin: 20px auto 50px;
    max-width: 794px;
  }
  .diagnosisBox .hukidashi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 30px 0;
  }
  .diagnosisBox .btnArea {
    display: flex;
    justify-content: center;
  }
  .diagnosisBox .btnArea a {
    display: block;
    width: 400px;
    font-size: 3.2rem;
    font-weight: bold;
    color: #FF3232;
    text-align: center;
    padding: 20px 20px;
    border: 4px solid #FF3232;
    border-radius: 35px;
    box-shadow: 4px 6px 0 #FF3232;
    background: #fff url(../images/top/arrow_start.svg) no-repeat center right 30px;
    transition: 0.3s;
  }
  .diagnosisBox .btnArea a:hover {
    opacity: 1;
    background: #ffbcbc url(../images/top/arrow_start.svg) no-repeat center right 20px;
  }
  /*=================================================================*/
  /*	鹿児島県の支援制度 */
  /*=================================================================*/
  .support {
    padding: 100px 0 0;
    background: url(../images/top/bg_support_hito01.svg) no-repeat calc(50% - 104px) 3%;
  }
  .support h2 {
    text-align: center;
  }
  .support h2 .en {
    color: #A7D4AC;
  }
  .support .txt {
    font-size: 2.4rem;
    line-height: 1.6;
    text-align: center;
    margin: 60px 0px;
  }
  .supportLink {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }
  .supportLink li {
    width: 48%;
    margin-top: 30px;
  }
  .supportLink li a {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    border: 4px solid #DBDCDC;
    box-sizing: border-box;
    background: url(../images/top/arrow_g.svg) no-repeat center right 20px #fff;
    padding: 24px 30px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
  }
  .supportLink li a img {
    display: block;
    max-width: 90%;
    height: auto;
  }
  /*=================================================================*/
  /*	SNS */
  /*=================================================================*/
  .sns {
    width: 100%;
    background: url(../images/top/bg_sns.svg) no-repeat top center;
    padding: 150px 0 80px;
  }
  .sns .inner {
    position: relative;
  }
  .sns .inner::before {
    content: "";
    display: block;
    background: url(../images/top/bg_sns_hito01.svg) no-repeat center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 74px;
    height: 225px;
    transform: translate(-400px, -50%);
  }
  .sns .inner::after {
    content: "";
    display: block;
    background: url(../images/top/bg_sns_hito02.svg) no-repeat center;
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 1;
    width: 137px;
    height: 223px;
    transform: translate(400px, -80%);
  }
  .sns .snsTxt {
    text-align: center;
    font-size: 3.2rem;
    font-weight: bold;
    color: #333;
  }
  .sns .follow {
    text-align: center;
    margin: 44px 0 32px;
  }
  .sns .follow span {
    font-size: 3.2rem;
    text-align: center;
    font-weight: bold;
    color: #333;
    display: inline-block;
    position: relative;
  }
  .sns .follow span::before {
    content: "";
    width: 84px;
    height: 50px;
    background: url(../images/top/img_sns.svg) no-repeat center;
    position: absolute;
    top: -10px;
    left: -108px;
  }
  .sns .follow span::after {
    content: "";
    width: 84px;
    height: 50px;
    background: url(../images/top/img_sns_r.svg) no-repeat center;
    position: absolute;
    top: -10px;
    right: -108px;
  }
  .sns .snsList {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
  }
  .sns .snsList li a {
    transition: 0.3s;
  }
  /*=================================================================*/
  /*	footer */
  /*=================================================================*/
  footer {
    width: 100%;
    padding: 30px 80px;
    box-sizing: border-box;
    background: #8DC21F;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
  footer ul {
    display: flex;
    gap: 30px;
  }
  footer ul li a {
    color: #fff;
    transition: 0.3s;
  }
  /*=================================================================*/
  /*	アニメーション */
  /*=================================================================*/
  /* その場で */
  .fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes fadeInAnime {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* 下から */
  .fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes fadeUpAnime {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* 上から */
  .fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes fadeDownAnime {
    from {
      opacity: 0;
      transform: translateY(-100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* 左から */
  .fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes fadeLeftAnime {
    from {
      opacity: 0;
      transform: translateX(-100px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  /* 右から */
  .fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes fadeRightAnime {
    from {
      opacity: 0;
      transform: translateX(100px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .fadeUpTrigger {
    opacity: 0;
  }
  /*<end>============================================================*/
}
/*******************************************************************/
/* SP */
/*******************************************************************/
@media screen and (max-width: 768px) {
  /*<start>==========================================================*/
  .inner {
    max-width: 96%;
    margin: 0 auto;
  }
  /*=================================================================*/
  /*	mainvisual */
  /*=================================================================*/
  .page {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #FFFEF8;
  }
  .page .mainvisual {
    width: 100%;
    height: 100%;
    background: url(../images/top/mainvisual_img_sp.svg) no-repeat center;
    background-size: auto 100%;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    color: #fff;
    z-index: 1;
  }
  .page .mainvisual .logo {
    width: 90%;
    max-width: 1165px;
    margin: 50% auto 10%;
  }
  .page .mainvisual .logo img {
    width: 100%;
    height: auto;
  }
  .page .mainvisual .mainCatch {
    font-family: "M PLUS 1p", sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.6;
    padding-top: 2%;
  }
  .page .mainvisual .mainBtn a {
    display: block;
    font-size: 2.4rem;
    font-weight: bold;
    color: #333;
    max-width: 400px;
    width: 80%;
    padding: 20px 10px;
    text-align: center;
    background: #fff url(../images/top/arrow01.svg) no-repeat center right 20px;
    background-size: 20px;
    border-radius: 50px;
    box-sizing: border-box;
    border: 7px solid #333;
    margin: 50px auto 0;
  }
  /*紙吹雪のスタイル*/
  .confetti {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .confetti span {
    position: absolute;
    top: -100%; /*アニメーション以外の紙吹雪を非表示*/
    left: 0;
  }
  /*アニメーションの記述*/
  .confetti span:nth-child(2n+1) {
    animation: confetti1 5s 0s linear infinite;
  }
  .confetti span:nth-child(2n+2) {
    animation: confetti2 5s 0s linear infinite;
  }
  /*紙吹雪を回転させる記述*/
  @keyframes confetti1 {
    0% {
      top: -10%;
      transform: translateX(0) rotateX(0) rotateY(0);
    }
    100% {
      top: 100%;
      transform: translateX(20px) rotateX(180deg) rotateY(360deg);
    }
  }
  @keyframes confetti2 {
    0% {
      top: -10%;
      transform: translateX(0) rotateX(0) rotateY(0);
    }
    100% {
      top: 100%;
      transform: translateX(-20vw) rotateX(180deg) rotateY(360deg);
    }
  }
  /*紙吹雪の配置*/
  .confetti span:nth-child(1) {
    left: 0%;
  }
  .confetti span:nth-child(2) {
    left: 10%;
  }
  .confetti span:nth-child(3) {
    left: 20%;
  }
  .confetti span:nth-child(4) {
    left: 30%;
  }
  .confetti span:nth-child(5) {
    left: 40%;
  }
  .confetti span:nth-child(6) {
    left: 50%;
  }
  .confetti span:nth-child(7) {
    left: 60%;
  }
  .confetti span:nth-child(8) {
    left: 70%;
  }
  .confetti span:nth-child(9) {
    left: 80%;
  }
  .confetti span:nth-child(10) {
    left: 90%;
  }
  .confetti span:nth-child(11) {
    left: 100%;
  }
  /*紙吹雪の大きさ*/
  .confetti span:nth-child(3n+1) {
    width: 3vw;
    height: 3.5vw;
  }
  .confetti span:nth-child(3n+2) {
    width: 2vw;
    height: 2.5vw;
  }
  .confetti span:nth-child(3n+3) {
    width: 1.5vw;
    height: 2vw;
  }
  /*紙吹雪の色*/
  .confetti span:nth-child(2n+1) {
    background: red;
  }
  .confetti span:nth-child(2n+2) {
    background: orange;
  }
  .confetti span:nth-child(2n+3) {
    background: purple;
  }
  .confetti span:nth-child(2n+4) {
    background: pink;
  }
  .confetti span:nth-child(2n+5) {
    background: blue;
  }
  .confetti span:nth-child(2n+6) {
    background: green;
  }
  .confetti span:nth-child(2n+7) {
    background: yellow;
  }
  /*アニメーションの秒数*/
  .confetti span:nth-child(2n+1) {
    animation-duration: 5s;
  }
  .confetti span:nth-child(2n+2) {
    animation-duration: 6s;
  }
  .confetti span:nth-child(2n+3) {
    animation-duration: 10s;
  }
  .confetti span:nth-child(2n+4) {
    animation-duration: 4s;
  }
  /*紙吹雪が降り始めるまでの時間*/
  .confetti span:nth-child(2n+1) {
    animation-delay: 0s;
  }
  .confetti span:nth-child(2n+2) {
    animation-delay: 4s;
  }
  .confetti span:nth-child(2n+3) {
    animation-delay: 6s;
  }
  .confetti span:nth-child(2n+4) {
    animation-delay: 2s;
  }
  .confetti span:nth-child(2n+5) {
    animation-delay: 6s;
  }
  .confetti span:nth-child(2n+6) {
    animation-delay: 10s;
  }
  .confetti span:nth-child(2n+7) {
    animation-delay: 2s;
  }
  .confetti span:nth-child(2n+8) {
    animation-delay: 4s;
  }
  .confetti span:nth-child(2n+9) {
    animation-delay: 11s;
  }
  .confetti span:nth-child(2n+10) {
    animation-delay: 1s;
  }
  .confetti span:nth-child(2n+11) {
    animation-delay: 5s;
  }
  /*=================================================================*/
  /*	h2 */
  /*=================================================================*/
  h2 {
    font-size: 3.4rem;
    font-weight: bold;
    line-height: 1;
    margin: 20px 0;
    color: #333;
  }
  h2 .en {
    font-family: "Oswald", sans-serif;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    margin-top: 20px;
  }
  /*=================================================================*/
  /*	bgArea */
  /*=================================================================*/
  .bgArea {
    background: url(../images/top/load.svg) no-repeat center top -126px, url(../images/top/bg_blob.svg) no-repeat top 950px center, url(../images/top/bg_story_obi.svg) no-repeat center 100px/auto 700px, url(../images/top/bg02.png);
  }
  /*=================================================================*/
  /*	story */
  /*=================================================================*/
  .story {
    width: 100%;
    box-sizing: border-box;
  }
  .story h2 .en {
    color: #036EB7;
  }
  .story ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4%;
    margin-top: 34px;
  }
  .story ul li {
    width: 46%;
    position: relative;
  }
  .story ul li a {
    aspect-ratio: 300/340;
    display: block;
  }
  .story ul li a .img {
    max-width: 300px;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    box-sizing: border-box;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 8px 8px 0 rgba(17, 50, 14, 0.3);
  }
  .story ul li a .img img {
    width: 102%;
    height: auto;
    transform: scale(1);
    transition: 0.3s;
  }
  .story ul li a .txt {
    font-family: "M PLUS 1p", sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.6;
    position: absolute;
    top: 35%;
    left: 0;
    margin-bottom: 10px;
  }
  .story ul li a .txt span {
    padding: 2px 10px;
    margin-bottom: 4px;
    display: inline-block;
  }
  .story ul li a .txt span.sp_smallTxt {
    font-size: 1.2rem;
  }
  .story ul li a .btn {
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    text-align: right;
    color: #333;
    margin-top: 20px;
    background: url(../images/top/arrow02.svg) no-repeat center right 5px;
    padding: 0 56px 0 0;
    transition: 0.3s;
  }
  .story ul li:nth-child(1) a .txt span {
    background-color: #4CA14C;
  }
  .story ul li:nth-child(2) {
    margin-top: 85px;
  }
  .story ul li:nth-child(2) a .txt span {
    background-color: #A14C91;
  }
  .story ul li:nth-child(3) a .txt span {
    background-color: #A1534C;
  }
  .story ul li:nth-child(4) {
    margin-top: 85px;
  }
  .story ul li:nth-child(4) a .txt span {
    background-color: #4C4EA1;
  }
  .story .bg {
    width: 100%;
    box-sizing: border-box;
    background: url(../images/top/bg_story_hito01.svg) no-repeat -16% 2%/37% auto, url(../images/top/bg_story_hito02.svg) no-repeat 110% 70%/22% auto, url(../images/top/bg_story_hito03.svg) no-repeat 40% 100%/22% auto, url(../images/top/bg_blob01.svg) no-repeat top -10px left -25%/30% auto, url(../images/top/bg_blob03.svg) no-repeat top -10px right -15%/30% auto;
    padding: 50px 0;
  }
  /*=================================================================*/
  /*	動画で見る未来 */
  /*=================================================================*/
  .video {
    padding: 50px 0;
    background: url(../images/top/bg_movie_hito01.svg) no-repeat 110% 6%/70% auto;
  }
  .video h2 .en {
    color: #F3AB93;
  }
  .videoList li {
    width: 90%;
    margin: 60px auto;
  }
  .videoList li .ttl {
    font-size: 2.1rem;
    font-weight: bold;
    padding-left: 10px;
    border-left: 10px solid #8DC21F;
  }
  .videoList li .movie {
    width: 100%;
    aspect-ratio: 340/191;
    background-color: #ffffff;
    margin-top: 10px;
  }
  .videoList li .movie button {
    width: 100%;
    height: 100%;
  }
  .videoList li .movie a {
    display: block;
  }
  .videoList li .movie a img {
    width: 100%;
    height: auto;
  }
  .videoList li .txt {
    margin-top: 26px;
  }
  .videoList li:nth-child(2) .ttl {
    border-left: 10px solid #FF7451;
  }
  .videoList li:nth-child(3) .ttl {
    border-left: 10px solid #A14C91;
  }
  .videoList li:nth-child(4) .ttl {
    border-left: 10px solid #97D1EF;
  }
  .videoList li:nth-child(5) .ttl {
    border-left: 10px solid #F5D97A;
  }
  /*=================================================================*/
  /*	未来診断 */
  /*=================================================================*/
  .diagnosis {
    width: 100%;
    padding: 50px 0;
    background-color: #FFFEF8;
    position: relative;
    overflow: hidden;
  }
  .diagnosis .inner {
    position: relative;
  }
  .diagnosis .inner::before {
    content: "";
    display: block;
    background: url(../images/top/sp_bg_future_hito01.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    top: -36px;
    left: -38px;
    z-index: 1;
    width: 110%;
    height: 18%;
  }
  .diagnosis .inner::after {
    content: "";
    display: block;
    background: url(../images/top/sp_bg_future_hito02.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: -36px;
    right: -21px;
    z-index: 1;
    width: 110%;
    height: 21%;
  }
  .diagnosisBox {
    width: 100%;
    padding: 10px 5% 5%;
    box-sizing: border-box;
    border: 6px solid #333;
    border-radius: 30px;
    background: #FBFAF5;
  }
  .diagnosisBox h2 {
    text-align: center;
  }
  .diagnosisBox h2 .en {
    color: #B0DB73;
  }
  .diagnosisBox .txt {
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.6;
    margin: 20px auto 50px;
    max-width: 794px;
  }
  .diagnosisBox .hukidashi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 30px 0;
  }
  .diagnosisBox .btnArea {
    display: flex;
    justify-content: center;
  }
  .diagnosisBox .btnArea a {
    display: block;
    max-width: 400px;
    width: 70%;
    font-size: 3.2rem;
    font-weight: bold;
    color: #FF3232;
    text-align: center;
    padding: 20px 20px;
    border: 4px solid #FF3232;
    border-radius: 35px;
    box-shadow: 4px 6px 0 #FF3232;
    background: #fff url(../images/top/arrow_start.svg) no-repeat center right 30px;
  }
  /*=================================================================*/
  /*	鹿児島県の支援制度 */
  /*=================================================================*/
  .support {
    padding: 50px 0 0;
    background: url(../images/top/bg_support_hito01.svg) no-repeat top 1% center;
    background-size: 110%;
  }
  .support h2 {
    text-align: center;
  }
  .support h2 .en {
    color: #A7D4AC;
  }
  .support .txt {
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
    margin: 30px 0px;
  }
  .supportLink {
    width: 100%;
  }
  .supportLink li {
    max-width: 500px;
    width: 100%;
    margin: 30px auto;
  }
  .supportLink li a {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    border: 4px solid #DBDCDC;
    box-sizing: border-box;
    background: url(../images/top/arrow_g.svg) no-repeat center right 20px #fff;
    padding: 24px 30px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
  }
  .supportLink li a img {
    display: block;
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 80px;
  }
  /*=================================================================*/
  /*	SNS */
  /*=================================================================*/
  .sns {
    width: 100%;
    background: url(../images/top/bg_sns.svg) no-repeat top center;
    padding: 50px 0;
  }
  .sns .snsTxt {
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
    color: #333;
  }
  .sns .follow {
    text-align: center;
    margin: 44px 0 32px;
  }
  .sns .follow span {
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    color: #333;
    display: inline-block;
    position: relative;
  }
  .sns .follow span::before {
    content: "";
    width: 58px;
    aspect-ratio: 84/50;
    background: url(../images/top/img_sns.svg) no-repeat center;
    position: absolute;
    top: -4px;
    left: -74px;
    background-size: contain;
  }
  .sns .follow span::after {
    content: "";
    width: 58px;
    aspect-ratio: 84/50;
    background: url(../images/top/img_sns_r.svg) no-repeat center;
    position: absolute;
    top: -4px;
    right: -74px;
    background-size: contain;
  }
  .sns .snsList {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
  }
  .sns .snsList li a {
    transition: 0.3s;
  }
  /*=================================================================*/
  /*	footer */
  /*=================================================================*/
  footer {
    width: 100%;
    padding: 30px 2%;
    box-sizing: border-box;
    background: #8DC21F;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
  footer ul {
    display: flex;
    gap: 20px;
  }
  footer ul li a {
    font-size: 1.2rem;
    color: #fff;
  }
  footer .copy {
    font-size: 1rem;
  }
  /*<end>============================================================*/
}

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