/* topics */
.topics {
    background: #DFF1FF;
    margin: 0 0 25px;
    padding: 15px 0;
}
.topics-inner {
    margin: 0 auto;
    width: 95%;
    max-width: var(--main-column);
}
.topics-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.topics-list dt {
    color: #3E9CE6;
    font-family: var(--ft-poppins);
    font-size: 16px;
    font-weight: 400;
    margin-right: 15px;
    width: 60px;
}
.topics-list dd {
    width: calc(100% - 75px);
}
.topics-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.topics-date {
    font-family: var(--ft-poppins);
    font-size: 14px;
    font-weight: 400;
    margin-right: 10px;
    line-height: 1.3;
}
.topics-cat {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 5px;
    margin-right: 10px;
    line-height: 1.3;
}
.topics-cat span {
    border: 1px solid #262626;
    border-radius: 6px;
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    padding: 1px 5px;
    width: max-content;
}
.topics-ttl {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
}
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {
    .topics-ttl {
        margin: 5px 0 0;
        width: 100%;
    }
}
/* mv */
.mv {
    background: url(../images/mv-bg.png) no-repeat;
    background-position: center;
    background-size: contain;
    overflow: hidden;
    padding: 0 0 85px;
}
.mv-slider {
    overflow: hidden;
    position: relative;
}
.mv-slide {
    width: 758px;
}
.mv-prev,
.mv-next {
    background: #fff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 52.5px;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 52.5px;
}
.mv-prev {
    background-image: url(../images/slide-arrow-left.svg);
    left: calc((758px + 80px) * -1);
}
.mv-next {
    background-image: url(../images/slide-arrow-right.svg);
    right: calc((758px + 80px) * -1);
}
.mv-prev::after,
.mv-next::after {
    display: none;
}

.mv-loopslide {
    background: #fff;
    border: 1px solid #BAB9B9;
    border-right: 0;
    border-left: 0;
    margin: 25px 0 0;
    overflow: hidden;
    padding: 20px 0 15px;
    position: relative;
    width: 100%;
    white-space: nowrap;
}
.mv-loopslide__inner {
    display: inline-flex;
    justify-content: space-between;
    width: 50%;
    animation: slideLeft 100s linear infinite;
}
.mv-loopslide__item {
    flex: 0 0 auto;
    line-height: 0;
    width: 20%;
    height: 52px;
    padding: 0 16px;
    /* width: 1376px;
    height: 52px; */
}
.mv-loopslide__item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* アニメーション */
@keyframes slideLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
@media screen and (max-width: 968px) {
    .mv {
        padding: 0 0 45px;
    }
    .mv-slide {
        width: 580px;
    }
    .mv-prev {
        left: calc((580px + 55px) * -1);
    }
    .mv-next {
        right: calc((580px + 55px) * -1);
    }
    .mv-prev,
    .mv-next {
        height: 40px;
        width: 40px;
    }
}
@media screen and (max-width: 768px) {
    .mv {
        padding: 0 0 25px;
    }
    .mv-slide {
        width: 90%;
    }
    .mv-slider {
        padding: 30px 0;
    }
    .mv-prev,
    .mv-next {
        height: 32.5px;
        width: 32.5px;
    }
    .mv-prev {
        left: 10px;
        right: inherit;
    }
    .mv-next {
        right: 10px;
        left: inherit;
    }
    .mv-loopslide {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .mv-loopslide__item {
        width: 20%;
        padding: 0;
    }
    .mv-loopslide__item {
        /* width: 800px;
        height: auto; */
    }
    .mv-loopslide__item img {
        object-fit: contain;
    }
}

/* reviews */
.reviews-body,
.column-body,
.counselorvoice-body {
    border-top: 2px solid #262626;
    padding: 20px 0;
}
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}

/* reviews */
.reviews-items,
.counselorvoice-items {
    display: grid;
    gap: 10px;
}
.reviews-item a,
.counselorvoice-item a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.reviews-ttl,
.counselorvoice-ttl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 15px;
    width: 65%;
}

.reviews-ttl::before {
    background-image: url(../images/reviews-icon-p.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 33.81px;
    margin: 0;
    width: 39.18px;
}

.reviews-ttl span,
.counselorvoice-ttl span {
    display: block;
    font-size: 16px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
    width: calc(100% - 68px);
}

.reviews-item.new a .reviews-ttl::after,
.counselorvoice-item.new a .counselorvoice-ttl::after {
    color: #FE6854;
    content: "NEW";
    font-family: var(--ft-jomhuria);
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
    position: relative;
    top: 2px;
    text-decoration: none;
    width: 18px;
}

.reviews-name,
.counselorvoice-name {
    color: #DC8D43;
    font-size: 16px;
    font-weight: 500;
    margin-right: 25px;
}

.reviews-time,
.counselorvoice-time {
    color: #7E7E7E;
    font-family: var(--ft-poppins);
    font-size: 14px;
    font-weight: 500;
    line-height: 0;
}
@media screen and (max-width: 1168px) {
    .reviews-ttl,
    .counselorvoice-ttl {
        width: 45%;
    }
    
}
@media screen and (max-width: 768px) {
    .reviews-ttl,
    .counselorvoice-ttl {
        width: 100%;
    }
    .reviews-name,
    .reviews-time {
        margin-left: 39.18px;
    }
}
@media screen and (max-width: 568px) {
    .reviews-ttl span,
    .counselorvoice-ttl span {
        max-width: 325px;
    }
}
@media screen and (max-width: 468px) {
    .reviews-ttl span,
    .counselorvoice-ttl span {
        max-width: 260px;
    }
}
@media screen and (max-width: 368px) {
    .reviews-ttl span,
    .counselorvoice-ttl span {
        max-width: 200px;
    }
}
@media screen and (max-width: 300px) {
    .reviews-ttl span,
    .counselorvoice-ttl span {
        max-width: 180px;
    }
}

/* column */
.column-item {
    border-bottom: 1px solid #D9D9D9;
    padding: 0 0 12px;
}
.column-item:not(:last-child) {
    margin: 0 0 12px;
}
.column-item a {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}
.column-item__image {
    margin-right: 15px;
    width: 202px;
    aspect-ratio: 16/9;
}
.column-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.column-item__text {
    width: calc(100% - 217px);
}
.column-date {
    color: #8F8F8F;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 10px;
}
.column-item.new .column-date::after {
    color: #FE6854;
    content: "NEW";
    font-family: var(--ft-jomhuria);
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
    position: relative;
    top: 2px;
}
.column-ttl {
    font-size: 18px;
    font-weight: 500;
}
.column-tags {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 2px;
    margin: 5px 0 0;
}
.column-tags span {
    color: #42A5F3;
    font-size: 12px;
    font-weight: 500;
}
.column-tags span::before {
    color: #42A5F3;
    content: "#";
    font-size: 12px;
    font-weight: 500;
}
.reviews-cat {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 5px 0 0;
}
.reviews-cat span {
    border: 1px solid #FE6854;
    border-radius: 2px;
    color: #FE6854;
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    padding: 2px 10px;
}
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {
    .column-item__image {
        margin-right: 15px;
        width: 180px;
    }
    .column-item__text {
        width: calc(100% - 195px);
    }
    .column-ttl {
        font-size: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
@media screen and (max-width: 468px) {
    .column-item__image {
        margin-right: 15px;
        width: 120px;
    }
    .column-item__text {
        width: calc(100% - 135px);
    }
}


/* maincontent-more */
.maincontent-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 25px 0 0 auto;
    width: 100%;
    max-width: max-content;
}
.maincontent-more a {
    color: #42A5F3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    height: 100%;
    width: 100%;
}
.maincontent-more a::after {
    background: url(../images/icon-arrow-r.svg) no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    display: block;
    height: 11.67px;
    margin-left: 15px;
    width: 5.83px;
}
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* about */
.about {
    background: url(../images/about-bg.png) no-repeat;
    background-position: left -5% center;
    background-size: contain;
}
.about-head p {
    color: #42A5F3;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.8em;
    margin: 45px 0 0;
}
.about-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.about-image {
    border-radius: 0 10px 10px 0;
    line-height: 0;
    overflow: hidden;
    width: 48.5%;
}
.about-text {
    width: 48.5%;
}
.about-text p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8em;
}
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {
    .about-image {
        margin: 0 0 25px;
        width: 100%;
    }
    .about-text {
        width: 100%;
    }
}


/* wave */
.maincontent-block.wave {
    margin: 0;
}
.wave.top {
    background: rgb(64,120,242);
    background: linear-gradient(184deg, rgba(64,120,242,1) 0%, rgba(62,168,230,1) 100%);
    margin-left: -3%;
    overflow: hidden;
    padding: 150px 10px;
    position: relative;
    width: calc(100% + 6%);
}
.wave.bottom {
    background: url(../images/wave-bg.png) no-repeat;
    background-position: center;
    background-size: cover;
    padding: 35px 0;
}
.wave.top::before,
.wave.top::after {
    background-size: 100%;
    background-repeat: no-repeat;
    content: "";
    height: 70px;
    position: absolute;
    left: 0;
    width: 100%;
}
.wave.top::before {
    background-image: url(../images/wave-top.svg);
    background-position: center top;
    top: 0;
}
.wave.top::after {
    background-image: url(../images/wave-bottom.svg);
    background-position: center bottom;
    bottom: 0;
}
.wave-contents {
    display: grid;
    gap: 35px;
}
.wave-content.half {
    background: url(../images/wave-image.png) no-repeat;
    background-position: right top;
    background-size: 48.5%;
    margin-right: -5%;
    padding: 0 0 35px;
}
.wave-content.half .wave-content__text {
    width: 48.5%;
}
.wave-content__text h2 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 15px;
}
.wave-content__text h2::before {
    background-image: url(../images/wave-ttl.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 25.43px;
    margin-right: 10px;
    width: 24.03px;
}
.wave-content__text p {
    font-size: 16px;
    font-weight: 500;
}
.wave.top .wave-content__text h2 {
    color: #fff;
}
.wave.top .wave-content__text h2::before {
    background-image: url(../images/wave-ttl-w.svg);
}
.wave.top .wave-content__text p {
    color: #fff;
}
@media screen and (max-width: 768px) {
    .wave.top {
        padding: 90px 10px;
    }
    .wave-content__text h2 {
        font-size: 18px;
    }
}
@media screen and (max-width: 568px) {
    .wave-content.half {
        background-size: 75%;
        background-position: right bottom;
        padding: 0 25px 55vw 0;
    }
    .wave-content.half .wave-content__text {
        width: 100%;
    }
}


/* waveline */
.beginner-head p {
    font-size: 16px;
    font-weight: 500;
    margin: 45px 0 0;
    text-align: center;
}
.beginner-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {
    .beginner-cards {
        grid-template-columns: 1fr;
    }
}


/* beginner card */
.beginner-card {
    background: #fff;
    border-radius: 10px;
    filter: drop-shadow(0 10px 15px rgb(0 0 0 / 10%));
    padding: 45px 20px 20px;
    position: relative;
}
.beginner-card.active {
    border: 2px solid #E95F80;
}
.beginner-tag {
    background: #54D690;
    border-radius: 10px 0 10px 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    padding: 2px 10px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: max-content;
}
.beginner-card.active .beginner-tag {
    background: #E95F80;
}
.beginner-card_top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.beginner-card__image {
    border-radius: 50%;
    height: 77px;
    margin-right: 15px;
    overflow: hidden;
    width: 77px;
}
.beginner-card__image img {
    object-fit: cover;
    object-position: center;
}
.beginner-card__text {
    width: calc(100% - 93px);
}
.beginner-card__catchcopy {
    font-size: 14px;
    font-weight: 400;
}
.beginner-card__name {
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 10px;
}
.beginner-card__consultation,
.beginner-card__evaluation {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 3px;
}
.beginner-card__consultation p,
.beginner-card__evaluation p,
.beginner-card__consultation span,
.beginner-card__evaluation span {
    color: #737373;
    font-size: 14px;
    font-weight: 400;
}
.beginner-card__consultation span,
.beginner-card__evaluation span {
    margin-right: 10px;
}
.beginner-card__consultation span {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.beginner-card__consultation span::before {
    background: url(../images/voice-icon.svg) no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 15px;
    margin-right: 5px;
    width: 15px;
}
.beginner-card__star {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.beginner-card__star .v_star {
    margin-right: 10px;
    width: 70px;
}
.beginner-card__star .v_star .star-img {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
}
.beginner-card__star a {
    color: #2B8AE1;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
}
.beginner-card_bottom {
    background: #FDF7F1;
    margin: 15px 0 0;
    padding: 20px;
}
.beginner-card_bottom p {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.beginner-card_btn {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 15px 0 0;
}
.beginner-card__showdetail {
    height: 48px;
    width: calc(100% - 63px);
}
.beginner-card__showdetail a {
    background: rgb(64, 120, 242);
    background: linear-gradient(0deg, rgba(64, 120, 242, 1) 0%, rgba(62, 168, 230, 1) 100%);
    border-radius: 6px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    height: 100%;
    width: 100%;
}
.beginner-card__showdetail a::before {
    background: url(../images/user-icon.svg) no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 18.33px;
    margin-right: 5px;
    width: 18.33px;
}
.beginner-card__audio {
    background-color: #FDF7F1;
    background-image: url(../images/volume-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 21px;
    border: 1px solid #F2AE6A;
    border-radius: 50%;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 6%));
    height: 48px;
    width: 48px;
}
.beginner-card__audio audio {
    display: none;
}
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}

/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}


/* bbbb */
@media screen and (max-width: 968px) {}
@media screen and (max-width: 768px) {}

/*============================
#voice_area
============================*/
/* #voice_area,#voice_area-all,#each_voice_area1,#each_voice_area2,#each_voice_area3 {} */

.voice-commmon {}

.voice-commmon article {
    margin-top: 24px;
    border-bottom: 1px solid #ccc;
}

/* #voice_area article,#voice_area-all article,#each_voice_area1 article,#each_voice_area2 article,#each_voice_area3 article {
  margin-top: 24px;
  border-bottom: 1px solid #ccc;
} */

.voice-commmon .name{
    font-size: 18px;
    font-weight: bold;
}

/* #voice_area .name,#voice_area-all .name,#each_voice_area1 .name,#each_voice_area2 .name,#each_voice_area3 .name {
  font-size: 18px;
  font-weight: bold;
} */

.voice-commmon .star{
    color: #ffa200;
    letter-spacing: .2em;
    font-size: 20px;
}

/* #voice_area .star,#voice_area-all .star,#each_voice_area1 .star,#each_voice_area2 .star,#each_voice_area3 .star {
  color: #ffa200;
  letter-spacing: .2em;
  font-size: 20px;
} */

.voice-commmon .info{
    font-weight: bold;
    color: #999;
}

/* #voice_area .info,#voice_area-all .info,#each_voice_area1 .info,#each_voice_area2 .info,#each_voice_area3 .info {
  font-weight: bold;
  color: #999;
} */

.voice-commmon .text{}

/* #voice_area .text,#voice_area-all .text,#each_voice_area1 .text,#each_voice_area2 .text,#each_voice_area3 .text {} */

.voice-commmon .date{
    text-align: right;
    font-style: italic;
    color: #ccc;
}

/* #voice_area .date,#voice_area-all .date,#each_voice_area1 .date,#each_voice_area2 .date,#each_voice_area3 .date {
  text-align: right;
  font-style: italic;
  color: #ccc;
} */

.to-list {
  font-size: 18px;
  text-align: right;
  text-decoration: underline;
}

.v_point {
  font-size: 18px;
  font-weight: bold;
  color: #da3333;
  padding-left: 4px;
}

.v_star {
  line-height: 1;
  display: flex;
  justify-content: center;
}

.v_star img {
  height: 16px;
  width: 16px;
  vertical-align: top;
  margin-top: 4px;
}

.comment {
  width: auto;
  line-height: 1.5;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  height: auto;
  font-size: .8rem;
  padding: .8rem 1rem .5rem 1rem;
  margin-top: .8rem;
  text-align: left;
  margin-right: 7px;
  margin-left: 7px;
}

.comment::after {
  position: absolute;
  left: 28px;
  top: -22px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 23.5px 19px 7.5px 0;
  border-color: transparent #ffffff transparent transparent;
}

.menber-flex {
  display: flex;
  flex-wrap: wrap;
}

.col-sm-3.col-xs-6.box-style {
  padding: 0;
  margin: 0 1.5%;
  width: 22%;
  background-color: #e0ebfb;
  margin-top: 15px;
}

.modal-content {
    position: relative;
    display: none;
    width: 80%;
    margin: 30px auto;
    padding: 10px 20px;
    border: 2px solid #aaa;
    background: #fff;
  }
  
  .modal-content p {
    margin: 0;
    padding: 0;
  }
  
  .modal-overlay {
    z-index: 100;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.75);
  }
  
  .modal-wrap {
    z-index: 101;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  
  .modal-open {
    color: #00f;
    text-decoration: underline;
    font-size: 11px;
    margin-left: 10px;
    padding: 7px 7px 7px 0;
    display: block;
    position: relative;
    width:100%;
    height:100%;
  }
  
  .modal-open:hover {
    cursor: pointer;
    color: #f00;
  }


  .modal-open-all {
    position: relative;
  }
  
  .modal-close {
    color: #00f;
    text-decoration: underline;
  }
  
  .modal-close:hover {
    cursor: pointer;
    color: #f00;
  }
  
  .more_member_wrap {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }