@charset "euc-jp";

/* CSS Document */
.pc-br {
    display: block;
}

.sp-br {
    display: none;
}

.hero-anim-item {
    opacity: 0;
    transform: translateY(12px);
}

.show-animation .hero-anim-item {
    animation: fadeInUp 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.show-animation .delay-1 {
    animation-delay: 1.5s;
    animation-name: zoomIn;
    z-index: 100;
    position: relative;
}

.show-animation .delay-2 {
    animation-name: fadeInUp, float;
    animation-duration: 1.5s, 3s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1), ease-in-out;
    animation-delay: 2.0s, 4.2s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, 5;
}

.show-animation .delay-3 {
    animation-delay: 3.2s;
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes float {
    0% {
        transform: scale(1) translateY(0);
    }

    50% {
        transform: scale(1) translateY(-10px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.review {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-style: normal;
    color: var(--base);
    background: #F0F4F8;
}

.review .breadcrumb-wrap {
    max-width: 1200px;
    margin: 0 auto;
}

.review .breadcrumb-wrap a {
    color: #ffffff;
}

.review section {
    min-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* ------------ Base ------------ */
:root {
    --brand: #015AB4;
    /* コアのアクセント */
    --base: #292929;
    /* 補助アクセント */
    --text: #676572;
    /* 罫線 */
    --bg: #ffffff;
    /* 背景 */
    --section: #f7f9ff;
    /* セクション薄色 */
    --radius: 24px;
    --start: #015AB4;
    --standard: #67C5E1;
    --visual: #A588DB;
    --enter: #E7C658;
}

.review a {
    color: var(--brand);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.review .container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.review section {
    margin: 0 auto;
}

.review h1,
.review h2 {
    margin: 0 0 16px;
    line-height: 1.3;
    font-weight: 600
}

.review h3 {
    margin: 0 0 16px;
    line-height: 1.6;
    font-weight: 600
}

.review h1 {
    font-size: 48px;
    letter-spacing: .02em;
    margin: 0 0 var(--radius);
}

.review h2 {
    font-size: 36px;
}

.review h3 {
    font-size: var(--radius);
}

.review h4 {
    font-size: 16px;
}

.review p {
    line-height: 180%;
    opacity: .8;
}

.title {
    margin-bottom: 36px;
}

.title p {
    font-size: 14px;
}

.title div {
    background: var(--brand);
    border-radius: 5px;
    padding: 0 10px;
    display: inline-block;
    color: #ffffff;
    margin-bottom: var(--radius);
}

.review .btn-wrap {
    display: flex;
    gap: var(--radius);
    justify-content: center;
    margin-top: var(--radius);
}

.review .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: #fff;
    transition: .2s ease;
    cursor: pointer;
    height: 48px;
    width: 254px;
    font-size: 14px;
    margin: 3px 0;
}

.review .btn p {
    opacity: 1;
}

.review .btn.btn-free {
    background: var(--basic-color-red);
}

.review .btn.btn-login {
    background: var(--base);
}

.review .btn.btn-login+span {
    font-size: 11px;
    display: block;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(90, 107, 255, .28);
}

.content-wrap {
    background: #ffffff;
    margin: 0 auto;
    max-width: 1200px;
    padding: 50px 0;
    margin: -40px auto 0;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.content-wrap #cta {
    border: none;
}


/* ------------ Hero ------------ */
#top {
    padding: 0;
    background: var(--brand);
    border-radius: var(--radius);
    border: 10px solid #F0F4F8;
    color: #ffffff;
    padding: 80px 0 0 0;
}

#top .hero {
    padding: 36px 0 0 0;
    max-width: 1200px;
}

#top .hero p.lead {
    font-size: 16px;
    margin: 0 0 var(--radius);
    color: #ffffff;
}

#top .hero-visual {
    margin: 30px auto -100px;
    position: relative;
    display: flex;
    align-items: flex-start;
}

#top .hero-visual img {
    display: block;
    margin: 0 auto;
}

#top .text-wrap {
    text-align: center;
}

#top .text-wrap h1 {
    font-weight: 600;
    color: #ffffff;
}

/* ------------ (point) ------------ */
#point {
    background: #F0F4F8;
    border-radius: var(--radius);
    padding: 130px 30px 50px;
    margin: 0 auto;
    text-align: center;
}

#point .point-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

#point .point-wrap .card {
    background: #fff;
    padding: 16px;
    /*display: flex;
    align-items: center;
    gap: 20px;*/
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

#point .point-wrap .card img {
    margin: 0 auto;
    display: none;
}

#point .point-wrap .card p {
    /*max-width: 200px;*/
    font-size: 16px;
    /*font-weight: 600;*/
    line-height: 1.5;
    text-align: left;
}

/* ------------ (feature) ------------ */
#feature {
    background: #E5F3FF;
    text-align: center;
    padding: 40px;
    border-radius: var(--radius);
}

#feature .feature-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

#feature .feature-wrap .card {
    padding: 36px;
    gap: 16px;
    text-align: left;
    background: #ffffff;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

#feature .feature-wrap .card p {
    margin-bottom: var(--radius);
}

#feature .feature-wrap .card p span+span {
    font-size: var(--radius);
}


/* ------------ (enterprise) ------------ */
#enterprise {
    background: var(--base);
    border-radius: var(--radius);
    border-right: 10px solid #F0F4F8;
    border-left: 10px solid #F0F4F8;
    border-bottom: 10px solid #F0F4F8;
    border-top: 10px solid #ffffff;
    color: #ffffff;
    padding: 80px 0;
}

#enterprise .enterprise-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

#enterprise .enterprise-wrap .card {
    background: #ffffff;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    padding: var(--radius) var(--radius) 12px var(--radius);
    color: var(--base);
}

#enterprise .enterprise-wrap .card h4 {
    margin-top: 16px;
}



/* ------------ (Price) ------------ */
#price {
    padding: 100px 0;
}

#price .container {
    text-align: center;
    width: 1200px;
    max-width: 1200px;
}

#price h2+p {
    font-size: var(--radius);
    margin: 0 0 20px;
    font-weight: 600;
}

#price .price-wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    align-items: center;
}

#price ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#price .pricecard {
    background: #ffffff;
    text-align: center;
    border: 1px solid var(--base);
    padding-bottom: 1rem;
    box-sizing: border-box;
    margin: 0 auto 3em;
    border-radius: 20px;
    height: 400px;
}

#price .pricecard.pick {
    height: 460px;
}

#price .pricecard-wrap {
    padding: 0 16px 16px 16px;
}

#price .pricecard h3 {
    background: #a2bc10;
    color: #fff;
    padding: 10px;
    margin: 0;
}

#price .pricecard.start {
    border: 3px solid #06c7ea;
    padding-bottom: 3rem
}

#price .pricecard.start h3 {
    background: #06c7ea;
    color: #fff;
    padding: 10px;
    margin: 0;
}

#price .pricecard h4 {
    font-size: var(--radius);
    margin: 0 auto;
    padding: 1rem 0;
    font-weight: 600;
}

#price .pricecard h4 span {
    font-size: 12px;
    font-weight: normal;
    color: var(--base);
}

#price .pricecard h4+p {
    font-size: 13px;
}

#price .pricecard p {
    margin: 0;
    text-align: left;
}

#price .pricecard a {
    padding: 10px 40px;
    background: #fb5859;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    display: inline-block;
}

#price .pricecard .point {
    font-size: 11px;
    margin: 16px 0 0 10px;
}

#price .pricecard .point p {
    padding: 0;
    position: relative;
}

#price .pricecard .point p::before {
    width: 4px;
    height: 4px;
    position: absolute;
    content: "";
    background: #737373;
    border-radius: 50%;
    margin: 8px 0 0 -10px;
}

#price .plan-title {
    font-size: 14px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    color: #ffffff;
}

#price .free {
    background: var(--base);
}

#price #start .plan-title {
    background: var(--start);
}

#price #standard .plan-title {
    background: var(--standard);
}

#price #visual .plan-title {
    background: var(--visual);
}

#price #enter .plan-title {
    background: var(--enter);
}

#price #start h4 {
    color: var(--start);
}

#price #standard h4 {
    color: var(--standard);
}

#price #visual h4 {
    color: var(--visual);
}

#price #enter h4 {
    color: var(--enter);
}

#price #start {
    border: 4px solid var(--start);
    height: 460px;
}

#price #standard {
    border: 2px solid var(--standard);
}

#price #visual {
    border: 2px solid var(--visual);
}

#price #enter {
    border: 2px solid var(--enter);
}

#price #start.pricecard .point {
    font-size: 13px !important;
}

#price #start.pricecard h4 {
    font-size: 30px;
    padding: 2rem 0;
}

/* ------------ (cta) ------------ */
#cta {
    background: var(--brand);
    color: #ffffff;
    padding: 56px;
    border-radius: var(--radius);
    border: 10px solid #F0F4F8;
}

#cta .logo-wrap {
    margin: var(--radius) auto;
}

#cta h2+p {
    font-size: 18px;
}

#cta h3 {
    font-size: 36px !important;
}

#cta .logo {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
}

#cta .logo-wrap p {
    margin-bottom: 8px;
}


@media (max-width: 1024px) and (min-width: 769px) {
    .pc-br {
        display: block;
    }

    .sp-br {
        display: none;
    }

    .review h1 {
        font-size: 34px;
    }

    .review h1 span {
        font-size: 50px;
    }

}

/* ------------ Mobile ------------ */
@media (max-width: 768px) {
    .pc-br {
        display: none;
    }

    .sp-br {
        display: block;
    }

    .review section {
        padding: 50px 18px;
        min-width: auto;
        margin: 30px auto;
    }

    .breadcrumb-wrap {
        padding: 0 20px;
    }

    .show-animation .delay-2 {
        animation-delay: 2.0s;
        animation-name: zoomIn;
    }

    .show-animation .delay-3 {
        animation-name: fadeInUp, float;
        animation-duration: 1.5s, 3s;
        animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1), ease-in-out;
        animation-delay: 3.2s, 4.2s;
        animation-iteration-count: 1, infinite;
        animation-fill-mode: forwards, none;
        animation-iteration-count: 1, 5;
        margin: -40px 0 -80px 0;
        width: 65%;
    }

    .show-animation .delay-1 {
        animation-delay: 1.5s;
    }

    .review .btn-wrap {
        display: block;
    }

    .title p {
        font-size: 13px;
        text-align: left;
    }

    .content-wrap {
        max-width: 88%;
        margin: -100px auto 0;
        padding: 150px 0 50px;
    }

    #top {
        padding: 30px 0 0;
    }

    #top .hero p.lead {
        font-size: 14px;
    }

    #top .hero {
        padding: var(--radius) 18px 10px;
    }

    #top .hero-visual {
        margin: 50px auto -20px;
        width: 170%;
        display: block;
    }

    #top .hero-visual img {
        margin: 0 -50px 0 0;
    }

    #top .btn-wrap {
        width: 80%;
        margin: 0 auto !important;
    }

    #top .btn-wrap {
        margin: 0 0 5px 0;
    }

    .review h1 {
        font-size: 36px;
        letter-spacing: .02em;
        margin: 0 0 var(--radius);
    }

    .review h1 span {
        font-weight: 500;
        font-size: 40px;
        background: linear-gradient(90deg, #758EFF, #E38FFF);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .review h2 {
        font-size: var(--radius);
    }

    .review h3 {
        font-size: 20px;
    }

    .review h4 {
        font-size: 16px;
    }

    #point {
        margin: 0 auto;
        padding: 80px 16px 30px;
        width: 90%;
    }

    #point .point-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    #point .point-wrap .card {
        display: block;
        padding: 16px;
    }

    #point .point-wrap .card p {
        font-size: 13px;
        font-weight: normal;
    }

    #feature {
        padding: 64px 16px 16px 16px;
        width: 90%;
    }

    #feature .feature-wrap {
        display: block;
    }

    #feature .feature-wrap .card {
        margin-bottom: var(--radius);
        padding: 16px;
    }

    #feature .feature-wrap .card p {
        margin: 0 0 10px 0;
    }

    .content-wrap #cta {
        width: 90%;
    }

    .review .btn {
        width: 100%;
    }

    #enterprise {
        padding: 64px var(--radius);
        margin: -50px 0 0 0;
    }

    #enterprise .enterprise-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    #enterprise .enterprise-wrap .card {
        padding: 16px;
    }

    #price {
        padding: 0;
    }

    #price .container {
        padding: var(--radius) 16px 0;
        width: 100%;
    }

    #price h2+p {
        font-size: 16px;
        text-align: center;
    }

    #price .pricecard {
        height: auto;
        margin: 0 auto 1em;
    }

    #price .price-wrap {
        display: block;
    }

    #price .pricecard h4 {
        font-size: 36px;
        padding: 2rem 0;
    }

    #price .pricecard-wrap {
        padding: 0 12px 6px;
    }

    #price #start {
        height: auto;
    }

    #price #start.pricecard h4 {
        font-size: 36px;
    }

    #cta {
        padding: 64px var(--radius);
    }

    #cta .container {
        display: block;
    }

    #cta .container h2 {
        font-size: var(--radius);
        margin-bottom: 16px;
    }


    #cta h3 {
        font-size: 20px !important;
    }

    #cta .logo {
        max-width: 200px;
    }

    #cta .logo-wrap {
        margin: var(--radius) auto 0;
    }
}


.fade-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* カスタム */
/* ------------ (Price) ------------ */
#price2 {
    padding: 100px 0;
}

#price2 .container {
    text-align: center;
    width: 960px;
    max-width: 960px;
}

#price2 h2+p {
    font-size: var(--radius);
    margin: 0 0 20px;
    font-weight: 600;
}

#price2 .price-wrap {
    gap: 24px;
    align-items: center;
}

#price2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.grid {
    --grid-gap: 24px;
    display: grid;
    gap: var(--grid-gap);
    margin-bottom: 24px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#price2 .grid-2 .pricecard {
    height: 342px;
}

#price2 .pricecard {
    background: #ffffff;
    text-align: center;
    border: 1px solid var(--base);
    box-sizing: border-box;
    margin: 0 auto 3em;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    height: 436px;
    width: 100%;
}

#price2 .pricecard-wrap {
    padding: 0 16px 16px 16px;
}

#price2 .pricecard h3 {
    background: #a2bc10;
    color: #fff;
    padding: 10px;
    margin: 0;
}

#price2 .pricecard.start {
    border: 3px solid #06c7ea;
    padding-bottom: 3rem
}

#price2 .pricecard.start h3 {
    background: #06c7ea;
    color: #fff;
    padding: 10px;
    margin: 0;
}

#price2 .pricecard h4 {
    font-size: 32px;
    margin: 0 auto;
    padding: 24px 0 16px;
    font-weight: 600;
}

#price2 .pricecard h4 span {
    font-size: 12px;
    font-weight: normal;
    color: var(--base);
    margin: 0 3px;
}

#price2 .grid-2 .pricecard h4+p {
    text-align: center;
}

#price2 .pricecard p {
    margin: 0;
    text-align: left;
}

#price2 .pricecard a {
    padding: 10px 40px;
    background: #fb5859;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    display: inline-block;
}

#price2 .pricecard .point {
    font-size: 13px;
    margin: 16px 0 0 10px;
}

#price2 .pricecard .point p {
    padding: 0;
    position: relative;
}

#price2 .pricecard .point p::before {
    width: 4px;
    height: 4px;
    position: absolute;
    content: "";
    background: #737373;
    border-radius: 50%;
    margin: 8px 0 0 -10px;
}

#price2 .grid-2 .pricecard .point {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
}

#price2 .plan-title {
    font-size: 14px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    color: #ffffff;
}

#price2 .free {
    background: var(--base);
}

#price2 #start .plan-title {
    background: var(--start);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

#price2 #standard .plan-title {
    background: var(--standard);
}

#price2 #visual .plan-title {
    background: var(--visual);
}

#price2 #enter .plan-title {
    background: var(--enter);
}

#price2 #start h4 {
    color: var(--start);
}

#price2 #standard h4 {
    color: var(--standard);
}

#price2 #visual h4 {
    color: var(--visual);
}

#price2 #enter h4 {
    color: var(--enter);
}

#price2 #start {
    border: 4px solid var(--start);
}

#price2 #standard {
    border: 2px solid var(--standard);
}

#price2 #visual {
    border: 2px solid var(--visual);
}

#price2 #enter {
    border: 2px solid var(--enter);
}

#price2 #start.pricecard .point {
    font-size: 13px !important;
}

#price2 #start.pricecard h4 {
    font-size: 48px;
    padding: 36px 0px 16px;
}

#price2 #free.pricecard h4 {
    font-size: 42px;
    padding: 36px 0px 24px;
    line-height: 1;
}

@media (max-width: 768px) {
    #price2 {
        padding: 0;
    }

    #price2 .container {
        padding: var(--radius) 16px 0;
        width: 100%;
    }

    #price2 h2+p {
        font-size: 16px;
        text-align: center;
    }

    #price2 .pricecard {
        height: auto;
    }

    #price2 .grid-2 .pricecard {
        height: auto;
        margin: 0 auto 1em;
    }

    #price2 .price-wrap {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    #price2 .pricecard h4 {
        font-size: 36px;
        padding: 2rem 0;
    }

    #price2 .pricecard-wrap {
        padding: 0 12px 6px;
    }

    #price2 #start {
        height: auto;
    }

    #price2 #start.pricecard h4 {
        font-size: 36px;
    }

    #price2 .grid-2 .pricecard h4+p {
        text-align: left;
    }

    #price2 .grid-2 .pricecard .point {
        display: block;
    }
}