@charset "UTF-8";

/* =========================================================
  保護者さまの声（中学TOP）
  幼児・小学TOPの .l-sect-voice と同じ構成を中学の配色で再現
========================================================= */
.p-parent-voice {
  --_color: #0059AB;
  --_card-bg: #EAF2FA;
  --_quote: #9CC3EA;
  padding: 56px 0 0;
  overflow: hidden;
}

.p-parent-voice__head {
  text-align: center;
  padding-inline: 24px;
}

.p-parent-voice__label {
  display: inline-block;
  margin: 0;
  padding: 6px 20px;
  border-radius: 8px;
  background-color: var(--_color);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.p-parent-voice__title {
  margin: 16px 0 0;
  color: #333;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.p-parent-voice__slider {
  margin-top: 16px;
}

/* カード */
.p-voice-card {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  margin: 28px 10px 76px;
  padding: 28px 16px;
  border-radius: 20px;
  background-color: var(--_card-bg);
}

.p-parent-voice .splide__slide {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
}

.p-parent-voice .splide__slide .p-voice-card {
  flex: 1 1 auto;
  height: auto;
}

/* 左上の引用符 */
.p-voice-card::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  display: block;
  width: 38px;
  height: 29px;
  background-color: var(--_quote);
  mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzOCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzhfMTE5MSkiPgo8cGF0aCBkPSJNMjguNzIgMTIuMjRDMzMuMDQgMTIuMTIgMzYuNjQgMTUuNDggMzYuNjQgMTkuOEMzNi42NCAyNCAzMy4xNiAyNy40OCAyOC45NiAyNy40OEMyMy45MiAyNy40OCAyMS40IDIyLjggMjEuNCAxOC4yNEMyMS40IDEzLjkyIDIyLjcyIDkuNTk5OTkgMjUuMjQgNkMyNi44IDMuNiAyOS41NiAwLjk1OTk5NiAzMi44IDAuOTU5OTk2QzM0LjI0IDAuOTU5OTk2IDM1LjQ0IDIuMzk5OTkgMzUuNDQgMy44Mzk5OUMzNS40NCA1LjQgMzQuNDggNiAzMi44IDYuOTZDMzEuMTIgNy45MTk5OSAyOS4zMiA5LjI0IDI4LjcyIDEyLjI0Wk05LjY0IDEyLjI0QzEzLjk2IDEyLjEyIDE3LjU2IDE1LjQ4IDE3LjU2IDE5LjhDMTcuNTYgMjQgMTQuMDggMjcuNDggOS44OCAyNy40OEM0Ljg0IDI3LjQ4IDIuMiAyMi44IDIuMiAxOC4yNEMyLjIgMTMuOTIgMy42NCA5LjU5OTk5IDYuMDQgNkM3LjcyIDMuNiAxMC40OCAwLjk1OTk5NiAxMy42IDAuOTU5OTk2QzE1LjE2IDAuOTU5OTk2IDE2LjI0IDIuMzk5OTkgMTYuMjQgMy44Mzk5OUMxNi4yNCA1LjQgMTUuMjggNiAxNC4wOCA2LjcxOTk5QzExLjIgOC4zOTk5OSAxMC4zNiA5LjQ3OTk5IDkuNjQgMTIuMjRaIiBmaWxsPSIjRkZCRTlCIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfOF8xMTkxIj4KPHJlY3Qgd2lkdGg9IjM4IiBoZWlnaHQ9IjI5IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=') center / contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMjkiIHZpZXdCb3g9IjAgMCAzOCAyOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzhfMTE5MSkiPgo8cGF0aCBkPSJNMjguNzIgMTIuMjRDMzMuMDQgMTIuMTIgMzYuNjQgMTUuNDggMzYuNjQgMTkuOEMzNi42NCAyNCAzMy4xNiAyNy40OCAyOC45NiAyNy40OEMyMy45MiAyNy40OCAyMS40IDIyLjggMjEuNCAxOC4yNEMyMS40IDEzLjkyIDIyLjcyIDkuNTk5OTkgMjUuMjQgNkMyNi44IDMuNiAyOS41NiAwLjk1OTk5NiAzMi44IDAuOTU5OTk2QzM0LjI0IDAuOTU5OTk2IDM1LjQ0IDIuMzk5OTkgMzUuNDQgMy44Mzk5OUMzNS40NCA1LjQgMzQuNDggNiAzMi44IDYuOTZDMzEuMTIgNy45MTk5OSAyOS4zMiA5LjI0IDI4LjcyIDEyLjI0Wk05LjY0IDEyLjI0QzEzLjk2IDEyLjEyIDE3LjU2IDE1LjQ4IDE3LjU2IDE5LjhDMTcuNTYgMjQgMTQuMDggMjcuNDggOS44OCAyNy40OEM0Ljg0IDI3LjQ4IDIuMiAyMi44IDIuMiAxOC4yNEMyLjIgMTMuOTIgMy42NCA5LjU5OTk5IDYuMDQgNkM3LjcyIDMuNiAxMC40OCAwLjk1OTk5NiAxMy42IDAuOTU5OTk2QzE1LjE2IDAuOTU5OTk2IDE2LjI0IDIuMzk5OTkgMTYuMjQgMy44Mzk5OUMxNi4yNCA1LjQgMTUuMjggNiAxNC4wOCA2LjcxOTk5QzExLjIgOC4zOTk5OSAxMC4zNiA5LjQ3OTk5IDkuNjQgMTIuMjRaIiBmaWxsPSIjRkZCRTlCIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfOF8xMTkxIj4KPHJlY3Qgd2lkdGg9IjM4IiBoZWlnaHQ9IjI5IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=') center / contain no-repeat;
}

.p-voice-card__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.p-voice-card__heading {
  margin: 0;
  color: var(--_color);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

.p-voice-card__text {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

/* 投稿者: カード右下の外側に出す */
.p-voice-card__user {
  position: absolute;
  right: 10px;
  bottom: -62px;
  display: grid;
  grid-template-columns: auto 54px;
  grid-template-rows: auto auto auto;
  gap: 4px;
  align-items: end;
}

.p-voice-card__user-type {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  justify-self: end;
  margin: 0;
  padding: 2px 8px;
  border-radius: 9999px;
  background-color: #DBDBDB;
  color: #333;
  font-size: 10px;
  line-height: 1.5;
  max-width: max-content;
  white-space: nowrap;
}

.p-voice-card__user-name {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  margin: 0;
  color: #333;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.p-voice-card__user-avater {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  width: 54px;
  height: 54px;
}

.p-voice-card__user-avater > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.p-parent-voice__note {
  margin: 8px 0 0;
  padding-inline: 24px;
  color: #333;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

@media screen and (min-width: 768px) {
  .p-parent-voice {
    padding-top: 72px;
  }
  .p-parent-voice__label {
    font-size: 17px;
  }
  .p-parent-voice__title {
    font-size: 32px;
  }
  .p-voice-card {
    margin: 32px 12px 84px;
    padding: 36px 28px;
    border-radius: 24px;
  }
  .p-voice-card__heading {
    font-size: 21px;
  }
  .p-voice-card__text {
    font-size: 15px;
  }
  .p-parent-voice__note {
    padding-inline: 0;
    font-size: 10px;
  }
}

/* 「2学期のテストで結果が出た!」(.p-result) とタブレット訴求の間に置く場合:
   タブレット訴求は .p-result に重なる前提の負マージンを持つため、口コミが前にあるときは打ち消す */
/* .p-result の下余白はタブレット訴求が重なるぶんの確保なので、口コミが続く場合は詰める */
.p-result:has(+ .p-parent-voice) {
  padding-bottom: 24px !important;
}
.p-result + .p-parent-voice {
  padding-top: 40px;
  margin-bottom: 40px !important;
}
.p-parent-voice + .p-test-fun__tablet {
  margin-top: 0 !important;
}
@media screen and (min-width: 768px) {
  .p-result:has(+ .p-parent-voice) {
    padding-bottom: 32px !important;
  }
  .p-result + .p-parent-voice {
    padding-top: 56px;
    margin-bottom: 56px !important;
  }
}