@font-face {
    font-family: 'Roboto';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: local(''), url(../fonts/roboto-v30-latin-regular.woff2) format('woff2'), url(../fonts/roboto-v30-latin-regular.woff) format('woff')
}

@font-face {
    font-family: 'Roboto';
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    src: local(''), url(../fonts/roboto-v30-latin-700italic.woff2) format('woff2'), url(../fonts/roboto-v30-latin-700italic.woff) format('woff')
}

@font-face {
    font-family: 'Noto Sans JP';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: local(''), url(../fonts/noto-sans-jp-v42-japanese-regular.woff2) format('woff2'), url(../fonts/noto-sans-jp-v42-japanese-regular.woff) format('woff')
}

@font-face {
    font-family: 'Noto Sans JP';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: local(''), url(../fonts/noto-sans-jp-v42-japanese-700.woff2) format('woff2'), url(../fonts/noto-sans-jp-v42-japanese-700.woff) format('woff')
}

body {
    font-family: 'Noto Sans JP', 'hiragino kaku gothic', 'inter', sans-serif;
    color: #1E1F1E;
    line-height: 1.7;
    font-size: 16px
}

img {
    width: 100%;
    height: auto
}

.white {
    color: #FFF
}

.green {
    color: #00C853
}

.black-back {
    background-color: #1E1F1E
}

section {
    position: relative;
    overflow: hidden
}

.first-view {
    background-color: #E2F5DC;
    font-weight: 700;
    z-index: -2
}

.first-view-wrapper {
    position: relative
}

.first-view-wrapper::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 152.6px 375px 0 0;
    border-color: #fff transparent transparent transparent;
    z-index: -1
}

.first-view-wrapper::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 152.6px 375px;
    border-color: transparent transparent #fff transparent;
    z-index: -1
}

.fv-circle-wrapper {
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    width: 353px;
    margin: auto;
    padding: 30px 0 25px
}

.fv-circle {
    background-color: #1E1F1E;
    width: 105px;
    height: 32px;
    border-radius: 16px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.fv-circle::before,
.fv-circle::after {
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background-color: #1E1F1E;
    transform: rotate(45deg);
    position: absolute;
    right: -10px
}

.fv-circle::after {
    transform: rotate(-45deg)
}

.fv-circle:nth-child(3)::before,
.fv-circle:nth-child(3)::after {
    display: none
}

h1 {
    text-align: center;
    line-height: 1.4
}

.fv-25 {
    font-size: 25px
}

.fv-26 {
    font-size: 26px
}

.fv-27 {
    font-size: 27px
}

.fv-31 {
    font-size: 31px
}

.fv-32 {
    font-size: 32px
}

.fv-36 {
    font-size: 36px
}

.fv-img-wrapper {
    margin: 18px 0 25px;
    background: url(../img/fv-img-back.png);
    background-size: 100%;
    background-repeat: repeat;
    animation: fv-anim 10s infinite linear;
    animation-delay: 0ms
}

@keyframes fv-anim {
    0% {
        background-position: -100vw 75vw
    }

    100% {
        background-position: 100vw -75vw
    }
}

.fv-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center
}

.fv-content p {
    display: block;
    position: relative;
    line-height: 1.4
}

.fv-hukidashi {
    position: absolute;
    top: -57px;
    left: 219px;
    line-height: 1.28;
    background-color: #3982E6;
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.fv-hukidashi::after {
    position: absolute;
    top: 68px;
    left: -3px;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 17px 8px;
    border-color: transparent transparent #3982E6 transparent;
    transform: rotate(-120deg)
}

.yellow-bar {
    position: relative;
    background: linear-gradient(transparent 0%, transparent 64%, #FCEC74 65%, #FCEC74 100%)
}

.fv-content h2 {
    padding: 22px 0 33px;
    font-size: 50px
}

.fv-content h2>span {
    display: block;
    width: 327px;
    height: 54px;
    line-height: 1;
    text-align: center
}

.fv-content h2>span:nth-child(1) {
    margin-bottom: 7px
}

.button-zone {
    padding: 32px 0;
    text-align: center
}

.cta-title {
    font-size: 36px;
    font-weight: 700
}

.button-zone .cta-title {
    display: block;
    padding: 8px 0 16px
}

.btn-p {
    display: block;
    width: 243px;
    margin: auto;
    text-align: start;
    padding-bottom: 32px
}

.btn {
    display: block;
    margin: auto;
    background: linear-gradient(#03EB63, #02A554);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    width: 294px;
    padding: 6px 0;
    border-radius: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #fff
}

.btn:hover {
    background-color: #5EC15E
}

.btn:active {
    transform: translateY(3px)
}

.btn-sen1 {
    position: relative
}

.btn-sen1::before,
.btn-sen1::after {
    content: "";
    position: absolute;
    top: 4px;
    width: 1px;
    height: 15px;
    background-color: #FFF;
    transform: rotate(-30deg)
}

.btn-sen1::before {
    left: -15px
}

.btn-sen1::after {
    right: -15px;
    transform: rotate(30deg)
}

.btn-sen2 {
    display: block;
    margin-top: 2px;
    font-size: 18px
}

.title {
    font-size: 80px;
    position: absolute;
    top: 17px;
    left: 50%;
    font-family: "Arial", sans-serif;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    transform: translateX(-50%) rotate(-5deg)
}

.title-2 {
    padding-top: 130px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    position: relative
}

.title-2::before {
    position: absolute;
    left: 50%;
    bottom: -8px;
    content: "";
    width: 70px;
    height: 3px;
    background-color: #00C853;
    transform: translateX(-50%)
}

.media {
    width: 328px;
    border: 1px #1E1F1E solid;
    margin: 70px auto 40px;
    display: flex;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .16)
}

.media ul {
    width: 100%;
    padding: 61px 0 32px 54px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.media li {
    position: relative
}

.media li::before {
    content: '';
    display: block;
    position: absolute;
    top: 23.3px;
    left: -30px;
    z-index: 3;
    width: 8px;
    height: 5px;
    border-left: 1px solid #00C853;
    border-bottom: 1px solid #00C853;
    transform: rotate(-45deg)
}

.media li::after {
    content: '';
    display: block;
    position: absolute;
    top: 17px;
    left: -36px;
    width: 20px;
    height: 20px;
    border: solid 1px #00C853;
    border-radius: calc(2400vw/375)
}

.problem {
    background-color: #F6F6F6
}

.problem .title {
    color: #E5E5E5
}

.problem .media {
    position: relative
}

.problem h4 {
    position: absolute;
    top: -31px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 246px;
    height: 62px;
    border-radius: 31px
}

.problem h4::after {
    content: "";
    position: absolute;
    bottom: -13px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 8px 0 8px;
    border-color: #1E1F1E transparent transparent transparent
}

.kaiketsu h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 35px auto;
    width: 304.2px;
    height: 34px;
    transform: rotate(-3deg);
    position: relative
}

.kaiketsu .cta-title{
    font-size: 26px;
}

.dash1,
.dash3 {
    position: absolute;
    display: block;
    width: 43px;
    height: 2px;
    background-color: #1E1F1E
}

.dash1 {
    top: -5px;
    left: -16px
}

.dash3 {
    bottom: -5px;
    right: -16px
}

.dash2,
.dash4 {
    position: absolute;
    display: block;
    width: 43px;
    height: 1px;
    background-color: #1E1F1E
}

.dash2 {
    top: -8px;
    left: -5.3px
}

.dash4 {
    bottom: -8px;
    right: -5.3px
}

.kaiketsu p {
    text-align: center;
    padding-bottom: 32px;
    font-weight: 700
}

.feature .title {
    color: #414141
}

.card-list {
    margin-top: 40px
}

.card-list ul {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.card-list li {
    width: 319px;
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 54px 0 32px
}

.card-circle {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 80px;
    height: 22px;
    background-color: #00C853;
    color: #fff;
    border-radius: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-family: "Roboto", sans-serif;
    font-style: italic;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .16)
}

.card-list h4 {
    text-align: center;
    font-size: 20px;
    font-weight: 700
}

.card-list p {
    display: block;
    margin: auto;
    width: 272px
}

.card-list img {
    margin: 8px auto 16px
}

.feature .btn {
    margin: 32px auto 40px
}

.vision {
    background-color: #F6F6F6
}

.vision .title {
    color: #E5E5E5;
    transform: translateX(-187px) rotate(-5deg)
}

.vision .media {
    border: #00C853 1px solid;
    margin: 32px auto 40px
}

.vision ul {
    padding: 32px 0 32px 54px
}

.risou {
    padding-top: 32px;
    text-align: center
}

.risou .btn {
    margin: 16px auto 24px
}

.contents {
    background-color: #E2F5DC
}

.contents .title {
    color: #C9EDBF
}

.contents ol {
    width: 332px;
    margin: auto;
    padding: 48px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 32px
}

.contents li {
    text-align: start;
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 18px
}

.circle-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border: solid 1px #00C853;
    border-radius: 50%;
    background-color: #FFF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    font-size: 32px;
    position: relative;
    color: #00C853
}

.circle-number::after {
    content: "";
    width: 1px;
    height: 44px;
    position: absolute;
    bottom: -44px;
    background-color: #00C853
}

.circle-number-5::after {
    display: none
}

.profile .title {
    color: #C9EDBF
}

.profile figure {
    padding: 40px 0 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.profile figure>img {
    width: 335px
}

footer p {
    display: flex;
    justify-content: center;
    margin: 13.3px 0 7px
}

.sns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 28px
}

.sns a {
    display: block;
    width: 30px
}

@media screen and (min-width:900px) {
    .fv-img-wrapper {
        animation: unset
    }
}

.present {
    background-color: #E2F5DC;
}

.present .card-list li:last-child {
    margin-bottom: 20px;
}

.present .title {
    color: #C9EDBF
}

.present .card-list li {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.present .large {
    font-size: 40px;
    font-weight: bold;
}

.present .green-large {
    font-size: 36px;
    color: #00C853;
}


.present .yellow{
    background-color: #FCEC74;
}

.more {
    text-align: center;
}

.more img {
    max-width: 60%;
    margin: auto;
    margin-bottom: 15px;
    margin-top: 15px;
}

.more p {
    font-size: 20px;
    font-weight: bold;
}