html {
    max-width: 100%;
    height: 100%;
}

body {
    width: 100%;
    min-height: 100%;
    font-family: 'Gotham SSm A', 'Gotham SSm B', '-apple-system', 'BlinkMacSystemFont',
        'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Original Yu Gothic', 'Yu Gothic', 'YuGothic',
        'Meiryo', 'sans-serif';
    margin: 0;
    letter-spacing: 0.04em;
    color: #3b434b;
}

::-webkit-scrollbar {
    display: none;
}

h2 {
    margin: 28px 0;
}

p {
    margin: 0;
}

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

.hiraginoSans {
    font-family: Hiragino Sans;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.block__img img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/* top Topのセクション
======================================== */

.header-section {
    width: 100%;
    max-width: 600px;
    position: fixed;
    top: 0;
    z-index: 2;
    display: flex;
    height: 64px;
    background: rgba(255, 255, 255, 0.6);
}

.header-logo {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 24px;
}

.header-logo .img {
    width: 160px;
}

.header-cv {
    opacity: 1;
    background-color: #fe5fa9;
    color: #fff;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    line-height: 15px;
    font-family: Hiragino Sans;
    width: 64px;
}

.header-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-size: 10px;
    width: 64px;
    text-decoration: none;
    padding: 12px 0;
    cursor: pointer;
    background: #3b434b;
}

.header-login img {
    display: block;
    margin: 0 auto;
    width: 16px;
    padding-bottom: 2px;
}

.top-section {
    position: relative;
    overflow: hidden;
    margin-top: 64px;
}

.top-fv {
    display: block;
    width: 100%;
    min-height: 560px;
}

.top-heading {
    display: none;
}

.top-inner {
    position: absolute;
    bottom: 3%;
    color: #ffffff;
    margin: 0 auto;
    width: 100%;
}

.top-scrollIcon {
    position: absolute;
    bottom: 0;
    left: 6px;
    width: 15px;
}

.top-attentionContainer {
    position: absolute;
    top: 8px;
    left: 8px;
}

.top-attentionBg {
    height: 116px;
    width: 116px;
    background: #ffb431;
    border-radius: 50%;
}

.top-attention {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    letter-spacing: 0.05em;
    transform: rotate(-15.26deg);
}

.top-attention .min {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
}

.top-attention .bold {
    font-size: 37px;
    letter-spacing: -0.08em;
    position: relative;
    margin: 3px 12px 0 0;
}

.top-attention .floatText {
    font-size: 12px;
    font-weight: 900;
    position: absolute;
    right: -15px;
    bottom: 3px;
    letter-spacing: 0.02em;
    writing-mode: vertical-rl;
}

.top-section-campeign {
    position: relative;
    width: 80%;
    margin: 0 auto;
    left: 8px;
}

.top-section-campeign img {
    width: 100%;
}

.top-section-campeign-countdown-time-wrappar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: 45px;
}

.top-section-campeign-countdown-time-wrappar.closed {
    top: 0;
}

.top-section-campeign-countdown-time {
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    letter-spacing: 0.1em;
    text-align: center;
    width: 60%;
    background-color: #65c3ca;
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-text {
    color: #fff;
    width: 40%;
    font-size: 11px;
    background-color: #36afb8;
    height: 100%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-section-campeign-img-sp {
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
}

.top-section-campeign-img-pc {
    display: none;
}

.top-catch {
    display: block;
    max-width: 363px;
    margin: 0 auto;
}

.top-button {
    margin: 10px auto 0;
    max-width: 500px;
    width: 87%;
}

.top-section-campeign-warn {
    margin: 10px auto 0 auto;
    width: 80%;
}

.top-section-campeign-text {
    font-size: 10px;
    text-align: center;
}

/* program カルーセルセクション
======================================== */
.program {
    padding: 60px 0 50px;
    display: block;
    width: 100%;
    background: url(./img/program-bg.png) no-repeat center center / cover;
}

.program__img img {
    display: block;
    width: 87%;
    height: 100%;
    margin: 0 auto;
}

.program__swiper {
    margin-top: 35px;
    --add-bottom: 50px;
    padding-bottom: var(--add-bottom);
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 4px;
    padding: 11px 0 0;
    height: 440px;
    box-sizing: border-box;
}

.card__emphasis {
    font-size: 18px;
    font-weight: 700;
}

.card__mp4 {
    width: 91%;
    margin: 0 auto;
    flex-shrink: 0;
}

.card__mp4 video {
    width: 100%;
    height: 100%;
    aspect-ratio: 252 / 141;
    object-fit: cover;
}

.card__title {
    text-align: center;
    margin: 25px 0 0;
    font-size: 16px;
    font-weight: 700;
}

.card__title span{
    font-size: 20px;
    font-weight: 800;
}

.card__title.card__title--sm {
    margin-top: 15px;
}

.card__img {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 19px 0 12px;
}

.card__img.card__img--sm {
    margin-top: 5px;
}

.card__img img {
    height: 100%;
    width: auto;
}

.card__body {
    padding: 0 14px 10px;
    flex-grow: 1;
}

.card__dashed-line {
    width: 100%;
    height: 2px;
    border-bottom: dotted 2px;
}

.card__text {
    font-size: 15px;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: 0.75px;
}

.card__tag {
    font-size: 10px;
    margin-top: 9px;
}

.card__tag li {
    margin-top: 5px;
    padding: 5px 11px;
    color: #229cc2;
    font-weight: bold;
    background-color: #eff9fc;
    border-radius: 14px;
    display: inline-block;
}

.swiper-slide {
    display: block;
    width: 274px;
}

.swiper-button-prev,
.swiper-button-next {
    width: 38px;
    height: 38px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    background-size: contain;
    content: "";
    height: 38px;
    margin: auto;
    width: 38px;
    background-repeat: no-repeat;
}

.swiper-button-prev::after {
    background: url(./img/prev_arrow.png) no-repeat center center / cover;
}

.swiper-button-next::after {
    background: url(./img/next_arrow.png) no-repeat center center / cover;
}

.swiper-pagination-bullet {
    background-color: transparent;
    background: url(./img/pagination1.png) no-repeat center center / cover;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: unset;
    height: 10px;
    opacity: 1;
    width: 10px;
}

.swiper-pagination-bullet-active {
    background: url(./img/pagination2.png) no-repeat center center / cover;
    height: 10px;
    width: 10px;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px;
}

.program__swiper [class^="swiper-button-"]{
    width: 18%;
    top: 48%;
}

@media screen and (max-width: 374px) {

    .card__text {
        font-size: 13px;
    }

}

@media screen and (min-width: 410px) {

    .program__swiper [class^="swiper-button-"]{
        width: 25%;
        top:52%;
    }

    .card {
        height: 460px;
    }

}

@media screen and (min-width: 550px) {

    .program__swiper [class^="swiper-button-"]{
        width: 26%;
        top: 55%;
    }

    .card {
        height: 480px;
    }

}

/* featuredLesson 特集レッスンセクション
======================================== */

.featuredLesson-section {
    background: #f2dae5;
}

.featuredLesson-wrappar {
    background-image: url(../../img/lp_main/featured_lesson_section_background_sp.png);
    background-position: center;
    background-size: cover;
    padding: 2.3rem 1.3rem;
}

.featuredLesson-header-img {
    width: 198px;
    margin: 0 auto;
}

.featuredLesson-header-img img {
    width: 100%;
}

.featuredLesson-title {
    width: 327px;
    margin: 0 auto;
}

.featuredLesson-title img {
    width: 100%;
}

.featuredLesson-content {
    max-width: 375px;
    margin: 0 auto;
}

.featuredLesson-content-iframe-wrappar {
    width: 100%;
    max-width: 660px;
    margin: 1rem auto;
    position: relative;
}

.featuredLesson-content-iframe-wrappar:before {
    content: '';
    display: block;
    padding-top: 56.25%;
}

.featuredLesson-content-iframe-wrappar iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.featuredLesson-message {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.featuredLesson-message-img {
    width: 85px;
    position: absolute;
    z-index: 1;
    top: -12px;
    left: -10px;
}

.featuredLesson-message-img img {
    width: 100%;
}

.featuredLesson-message-text-wrappar {
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), #ffffff;
    border: 2px solid #ff569d;
    box-sizing: border-box;
    border-radius: 14px;
    width: 90%;
    height: 55px;
    margin: auto 0 auto auto;
    padding: 0 0 0 3rem;
    display: table;
    position: relative;
}

.featuredLesson-message-text {
    font-size: 11px;
    color: #ff569d;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: table-cell;
    vertical-align: middle;
}

/* mediaPublication メディア掲載セクション
======================================== */

.mediaPublication-section {
    padding: 40px 12px;
    /* background-color: #f7fcfe; */
}

.mediaPublication-title {
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    line-height: 27px;
    margin-bottom: 16px;
}

.mediaPublication-logos {
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    color: #5dbfe3;
    padding: 23px 24px 18px;
    position: relative;
    border: 2px solid #5dbfe3;
    width: 303px;
    margin: 0 auto;
}

.mediaPublication-logos-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.mediaPublication-logos-title .text {
    margin-left: 8px;
}

.mediaPublication-logos-tvlogos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.mediaPublication-logos-tvlogos .logo {
    margin-bottom: 10px;
    max-height: 33px;
}

.mediaPublication-logos-tvlogos .logo.logo_wwd {
    width: 66px;
}

.mediaPublication-logos-tvlogos .logo.logo_miyaneya {
    margin: 0 4px 10px;
}

.mediaPublication-logos-etc {
    color: #5dbfe3;
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    margin-bottom: 10px;
    text-align: right;
    letter-spacing: 0.04em;
    position: relative;
    top: -8px;
    right: -4px;
}

.mediaPublication-logos-magazine-and-tv {
    display: flex;
    justify-content: space-between;
}

.mediaPublication-logos-magazine-and-tv .title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.mediaPublication-logos-magazine-and-tv .title-text {
    margin-left: 8px;
}

.mediaPublication-logos-magazine-and-tv .mediaImg {
    width: 142px;
}

/* chosenReasons 選ばれた理由セクション
======================================== */
.chosenReasons-section {
    padding: 40px 0 0;
    background: linear-gradient(46.52deg, #7cc1c9 19.64%, #d0e0ad 87.68%);
    overflow: hidden;
}

.chosenReasons-tile {
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
}

.chosenReasons-tile .subtitle {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
}

.chosenReasons-desc {
    font-size: 16px;
    font-weight: 600;
    margin: 70px auto 16px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 328px;
}

.chosenReasons-desc.right {
    align-items: flex-end;
}

.chosenReasons-desc.three {
    justify-content: right;
    margin-bottom: 272px;
    align-items: flex-end;
}

.chosenReasons-desc .boldWithWhiteBg {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    background-color: #ffffff;
    display: inline-block;
    padding-left: 3px;
    padding-right: 3px;
    margin: 6px 3px 0 0;
}

.chosenReasons-desc .bgImg {
    position: absolute;
    width: 261px;
}

.chosenReasons-desc .bgImg.one {
    top: -35px;
    left: -114px;
}

.chosenReasons-desc .bgImg.two {
    top: -45px;
    left: 214px;
}

.chosenReasons-desc .bgImg.three {
    top: -45px;
    left: -118px;
}

.chosenReasons-desc .text {
    position: relative;
}

.chosenReasons-trainers {
    display: flex;
    overflow: scroll;
    padding: 0 24px;
    position: relative;
}

.chosenReasons-twoTrainers {
    margin-right: 16px;
}

.chosenReasons-twoTrainers .trainer {
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    width: 90px;
}

.chosenReasons-twoTrainers .trainer:nth-of-type(2n + 1) {
    margin-bottom: 17px;
}

.chosenReasons-twoTrainers .trainer-icon {
    margin-bottom: 4px;
    width: 90px;
}

.chosenReasons-twoTrainers .trainer .harukakuriyama {
    white-space: nowrap;
}

.chosenReasons-andMore {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    width: 67px;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.chosenReasons-andMorePc {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    margin-top: 14px;
}

.chosenReasons-movies {
    display: flex;
    overflow: scroll;
    margin-top: 16px;
    padding: 0 8px 0 24px;
}

.chosenReasons-movie {
    margin: 60px 16px 0 0;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
}

.chosenReasons-movie .title {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 84px auto 7px;
    width: 256px;
}

.chosenReasons-movie .title .icon {
    margin-right: 4px;
}

.chosenReasons-movie .img {
    position: absolute;
    top: -58px;
    width: 240px;
    left: 8px;
    border-radius: 8px;
}

.chosenReasons-moviesDesc {
    display: flex;
    justify-content: center;
    margin: 16px auto 0;
    font-weight: 500;
}

.chosenReasons-moviesDesc .text {
    margin: 0 4px;
    color: #ffffff;
}

.chosenReasons-movieDialogBg {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(59, 67, 75, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.chosenReasons-movieDialogBg.show {
    display: flex;
}

.chosenReasons-movieDialog {
    position: fixed;
    width: 294px;
    top: calc(50% - 168px);
    margin: 0 auto;
    padding: 32px 16px 40px;
    background-color: #ffffff;
    border-radius: 8px;
}

.chosenReasons-movieDialog .text {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    margin: 24px 0 30px;
    text-align: center;
}

.chosenReasons-movieDialog .youtube {
    width: 100%;
}

.chosenReasons-movieDialog .closeIcon {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.chosenReasons-liveImg {
    position: absolute;
    width: 100%;
    top: 58px;
    left: -4px;
}

.cv-section {
    color: #3b434b;
    background-image: url(../../img/lessons-background-sp.jpg);
    padding: 27px 24px 18px;
    background-position: center;
    background-size: cover;
}

.cv-section-campeign {
    position: relative;
    max-width: 375px;
    margin: 0 auto 15px auto;
}

.cv-section-campeign.cv-section-campeign-price {
    padding-left: 4%;
    margin-top: -10%;
}

@media screen and (min-width: 450px) {

    .cv-section-campeign.cv-section-campeign-price {
        margin-top: -5%;
    }

}

.cv-section-campeign-img-sp {
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    display: block;
    position: relative;
}

.cv-section-campeign-img-pc {
    display: none;
}

.cv-section .number-of-attendance {
    width: 100px;
}

.cv-header {
    display: flex;
    justify-content: center;
}

.cv-title {
    color: #ffffff;
    font-weight: 500;
    font-size: 1.45rem;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
}

.cv-title .service-name {
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 1.7rem;
}

.cv-content {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.between-cv-box {
    color: #ffffff;
    font-size: 1.5rem;
    align-items: center;
    display: flex;
    margin: 0 0.5rem;
}

.cv-box {
    background-color: #ffffff;
    opacity: 0.9;
    border-radius: 8px;
    width: 8rem;
    text-align: center;
    padding: 1.5rem 0.6rem;
}

.cv-box-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.cv-box-content {
    margin-top: 0.5rem;
    font-size: 1.45rem;
    font-weight: bold;
}

.cv-cta {
    max-width: 500px;
    margin: 0 auto;
}

.price-section {
    background: #eff9fc;
}

.price-content {
    text-align: center;
    color: #3b434b;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 2.5rem;
}

.price-annotation {
    text-align: center;
    color: #3b434b;
    font-size: 10px;
    margin-top: 0.5rem;
    font-weight: 600;
}

.price-price {
    font-size: 3.7rem;
}

.price-asterisk {
    position: relative;
    top: -35px;
    left: -5px;
}

.price-title {
    color: #229cc2;
    font-size: 20px;
    margin-bottom: 0.8rem;
}

.campaign-price-image-wrappar {
    width: 300px;
    margin: 0 auto;
}

.campaign-price-image {
    width: 100%;
}

.price-yen {
    position: relative;
    left: -13px;
    font-size: 2rem;
    bottom: 1px;
}

.feature-section {
    background: linear-gradient(
        252.43deg,
        rgba(93, 190, 227, 0.3) 0%,
        rgba(101, 206, 217, 0.3) 100%
    );
    padding: 3rem 0 1rem 0;
    overflow: hidden;
}

.feature-header,
.customer-header {
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.feature-title,
.customer-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.feature-contents {
    width: 100%;
    margin: 0 auto;
    max-width: 680px;
}

.feature-problem-and-solution {
    background: linear-gradient(252.43deg, #5dbee3 0%, #65ced9 100%);
    opacity: 0.9;
    border-radius: 4px;
    position: relative;
    padding: 10% 5% 20% 5%;
    width: 60%;
    max-width: 500px;
}

.feature-problem-and-solution.left {
    border-radius: 0 4px 4px 0;
}

.feature-problem-and-solution.right {
    border-radius: 4px 0 0 4px;
    margin-left: auto;
    padding: 10% 2% 20% 10%;
}

.feature-problem {
    color: #ffffff;
    position: relative;
    margin-bottom: 20%;
    font-size: 14px;
    font-weight: 500;
}

.feature-problem-title {
    color: #3b434b;
    margin-bottom: 0.8rem;
    font-weight: bold;
    font-size: 0.75rem;
}

.feature-problem-number {
    position: absolute;
    z-index: -1;
}

.feature-problem-number.one {
    width: 22%;
    top: -12px;
    left: -15px;
}

.feature-problem-number.two {
    width: 35%;
    top: -17px;
    left: -15px;
}

.feature-problem-number.three {
    width: 40%;
    top: -12px;
    left: -25px;
}

.feature-problem-number.four {
    top: -15px;
    width: 40%;
    left: -40px;
}

.feature-solution {
    font-size: 1rem;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.feature-solution .boldWithWhiteBg {
    background: white;
}

.feature-solution-title {
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.feature-solution-title .service-name {
    font-size: 1rem;
}

.feature-solution-img-box {
    position: relative;
}

.feature-solution-img {
    position: absolute;
    z-index: 1;
}

.feature-solution-img.one {
    width: 40%;
    bottom: 35px;
    right: -15px;
    max-width: 170px;
}

.feature-solution-img.two {
    bottom: 30px;
    left: -35px;
    max-width: 165px;
}

.feature-solution-img.three {
    max-width: 140px;
    top: -360px;
    right: 0px;
}

.feature-solution-img.four {
    bottom: -15px;
    max-width: 300px;
    left: -95px;
    width: 20rem;
}

.feature-problem-and-solution.four {
    padding: 10% 2% 10% 10%;
}

.feature-users-voice-box {
    width: 95%;
    margin: 0 auto;
    top: -45px;
    position: relative;
}

.feature-users-voice-title {
    color: white;
    font-size: 0.9rem;
}

.feature-users-voice-title.right {
    text-align: right;
    margin-right: 3%;
}

.feature-users-voice-content {
    display: flex;
    background: #eff9fc;
    border-radius: 4px;
    font-size: 12px;
    padding: 0.8rem;
    max-width: 615px;
}

.feature-user-name {
    color: #229cc2;
    margin-bottom: 4px;
    font-weight: 600;
}

.feature-users-voice {
    letter-spacing: 0.1em;
}

.feature-user-img-box {
    margin-right: 15px;
}

.feature-user-img {
    width: 100px;
}

.sns-section {
    justify-content: center;
    padding: 3rem 0;
    overflow: hidden;
    background-color: #EFF9FC;
}

.sns-header {
    color: #5dbfe3;
    text-align: center;
    font-size: 1rem;
    margin-bottom: 2rem;
    font-weight: 500;
}

.sns-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.sns-user-video {
    width: 53%;
}

.sns-user-video-1 {
    right: 0;
    top: 15px;
    position: relative;
}

.sns-user-video-3 {
    top: -15px;
    position: relative;
    right: 0;
}

.sns-user-image {
    width: 30%;
    height: 30%;
    padding: 12%;
}

.sns-user-image-1 {
    padding-left: 5%;
    position: relative;
    top: 15px;
}

.sns-user-image-2 {
    padding-right: 5%;
}

.sns-user-image-3 {
    padding-left: 5%;
}

.sns-contents-wrappar {
    position: relative;
}

.sns-contents {
    display: flex;
    justify-content: center;
    max-width: 375px;
    margin: 0 auto;
}

.sns-background {
    background: linear-gradient(252.43deg, #5dbee3 0%, #65ced9 100%);
    width: 300px;
    height: 450px;
    position: absolute;
    opacity: 0.2;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 4.5rem;
    z-index: -1;
}

.plan-section {
    background: linear-gradient(252.43deg, #5dbee3 0%, #65ced9 100%);
    padding: 2.5rem 0 1rem 0;
}

.plan-section-header {
    margin-bottom: 1.875rem;
}

.plan-section-title {
    color: #ffffff;
    font-size: 1rem;
    text-align: center;
    font-weight: 700;
}

.plan-section-title span {
    font-size: 1.3rem;
    font-weight: 700;
}

.plan-section-plan {
    width: 100%;
}

.plan-section-content {
    width: 93%;
    max-width: 350px;
    margin: 0 auto;
}

.faq-section {
    background: url(../img/lp_main/bg-faq-section.png) no-repeat center center;
    background-size: cover;
    padding: 0 32px 64px;
}

.faq-section-title {
    background: url(../img/lp_main/faq-section-title.png) no-repeat right;
    background-size: 100%;
    padding-bottom: calc(200px * 94 / 158);
    width: 200px;
    margin-left: auto;
}

.faq__title {
    color: #229CC2;
    font-family: "Hiragino Sans";
    font-size: 24px;
    font-weight: 700;
    line-height: 140%; /* 33.6px */
    letter-spacing: 1.92px;
    text-align: center;
    margin-top: 20px;
}

.faq-list__item:nth-child( n + 2 ) {
    margin-top: 20px;
}

.faq-list__item-question {
    color: #229CC2;
    font-family: "Hiragino Kaku Gothic ProN";
    font-weight: 600;
    line-height: 140%; /* 19.6px */
    font-size: 15px;
    border-bottom: 1px solid #B1B4B7;
    padding: 7px 22px 10px 33px;
    text-indent: -30px;
    position: relative;
}

.faq-list__item-question span {
    color: #229CC2;
    font-size: 24px;
    font-weight: 700;
    line-height: 110%; /* 26.4px */

}

.faq-list__item-question::before,
.faq-list__item-question::after {
    content: "";
    position: absolute;
    top: 21px;
    right: 0;
    width: 18px;
    height: 2px;
    background: #898E93;
    transition: .3s;
}

.faq-list__item-question::after {
    transform: rotate(90deg);
}

.faq-list__item-question.is-open::after {
    transform: rotate(0deg);
}

.faq-list__item-answer {
    padding: 7px 22px 10px 30px;
    display: none;
    text-indent: -27px;
    color: #229CC2;
    font-family: "Hiragino Sans";
    font-size: 13px;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
}

.faq-list__item-answer span {
    color: #229CC2;
    font-size: 24px;
    font-weight: 700;
    line-height: 110%; /* 26.4px */
}

@media screen and (min-width: 450px) {
    .faq-list__item-question {
        font-size: 17px;
    }
    .faq-list__item-answer {
        font-size: 14px;
    }
}

@media screen and (min-width: 500px) {
    .faq-list__item-question {
        font-size: 18px;
    }
    .faq-list__item-answer {
        font-size: 15px;
    }
}

footer {
    text-align: center;
    background: #3b424b;
    padding: 24px;
}

.footer-logo {
    width: 120px;
    margin-bottom: 16px;
}

.footer-line {
    width: 200px;
    margin-bottom: 16px;
}

.footer-link {
    list-style: none;
    padding: 0;
    font-weight: bold;
    margin-bottom: 32px;
}

.footer-link li {
    margin-bottom: 4px;
}

.footer-link a {
    font-size: 12px;
    text-decoration: none;
    color: #95a0ac;
}

.footer-copyright {
    font-size: 10px;
    color: #95a0ac;
}

.solution-item {
    margin-top: 40px;
}

.solution-item.item-1 {
    padding: 0 10px;
}

.solution-item.item-2 {
    padding-right: 10px;
    margin-top: 0;
}

.solution-item.item-4 {
    padding-left: 10px;
    margin-top: 0;
}

.solution-item img {
    width: 100%;
}

.customer-seciton {
    padding: 80px 0;
    background-color: #EFF9FC;
}

.customer-list {
    width: 90%;
    margin: 24px auto 0;
}

.customer-list-item {
    margin-top: 12px;
    padding: 20px;
    background: linear-gradient(
        252.43deg,
        rgba(93, 190, 227, 0.3) 0%,
        rgba(101, 206, 217, 0.3) 100%
    );
    border-radius: 8px;
}

.customer-name {
    font-weight: bold;
    font-size: 12px;
}

.customer-message {
    color: #229cc2;
    margin-top: 8px;
    font-size: 14px;
    font-weight: bold;
}

.customer-box {
    display: flex;
    margin-top: 13px;
}

.customer-img {
    max-width: 100px;
    flex-shrink: 0;
}

.customer-img img {
    width: 100%;
}

.customer-comment {
    margin-left: 15px;
    padding-top: 12px;
    border-top: solid 2px #fff;
    font-size: 13px;
}

/* =====================================
  汎用スタイル
======================================== */

/* SPのみ表示
======================================== */
.is-only-sp {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .is-only-sp {
        display: block !important;
    }
}

/* PCのみ表示
======================================== */
@media screen and (max-width: 767px) {
    .is-only-pc {
        display: none !important;
    }
}

/* 1300px以降のみ表示
======================================== */
.is-over-1300 {
    display: none !important;
}

.is-under-1300 {
    display: none !important;
}

@media screen and (min-width: 1300px) {
    .is-over-1300 {
        display: block !important;
    }
}

@media screen and (max-width: 1299px) {
    .is-under-1300 {
        display: block !important;
    }
}

/* CTAボタン
======================================== */
.cta-button {
    box-sizing: border-box;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    line-height: 27px;
    font-weight: bold;
    letter-spacing: 0.2em;
    padding: 12px 32px;
    border-radius: 75px;
    background: linear-gradient(100.59deg, #65c3ca 0%, #67d2e8 103.13%);
    white-space: nowrap;
    text-align: center;
    border: 4px solid #ffffff;
}

.cta-button-white {
    color: #65c3ca;
    background: #fff;
}

.cta-button-pink {
    color: #fff;
    background: #fe5fa9;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.25);
}

.cta-button-primary {
    color: #fff;
    background: linear-gradient(92.07deg, #65c3ca 0%, #67d2e8 103.13%);
}

@media screen and (min-width: 599px) {
    .cta-button {
        padding: 24px;
        font-size: 24px;
    }

    .cta-button.cv-cta-button {
        padding: 18px;
        font-size: 22px;
    }

    .cv-section {
        padding-bottom: 27px;
    }
}