@charset "utf-8";
/* CSS Document */

/* -------------------------
/* Created date: --
/* Created user: --
/* Last up date: 2022.09.14
/* Last up date user: yamaguchi
/* for sp and pc
--------------------------*/
/* ======== newschool voice start ================*/
:root{
  --svgMokumokuUe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399 92"><path fill="rgba(255,255,255,1)" fill-rule="evenodd" d="M43.978,41.395 C51.9,36.759 76.729,33.918 78.381,60.137 C90.89,52.722 108.524,54.497 115.266,71.453 C124.531,49.773 150.378,61.552 150.378,61.552 C149.226,40.662 186.525,28.659 198.968,53.64 C216.988,39.920 233.526,56.632 234.789,67.210 C234.789,67.210 245.850,61.411 252.522,71.807 C261.459,46.305 291.879,49.981 300.48,56.954 C299.959,31.80 330.578,29.636 340.125,43.163 C345.372,33.410 361.34,32.376 367.79,38.919 C377.453,21.200 394.566,18.416 398.999,18.55 C398.999,48.700 398.999,0.0 398.999,0.0 L0.0,0.0 C0.0,0.0 0.0,48.700 0.0,18.55 C29.43,16.906 39.643,34.616 43.978,41.395 Z" /></svg>') center top / auto 100px repeat-x;
  --svgMokumokuShita: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 399 92"><path fill="rgba(255,255,255,1)" fill-rule="evenodd" d="M43.978,23.395 C51.9,18.759 76.729,15.918 78.381,42.137 C90.89,34.722 108.524,36.497 115.266,53.453 C124.531,31.773 150.378,43.552 150.378,43.552 C149.226,22.662 186.525,10.659 198.968,35.64 C216.988,21.920 233.526,38.632 234.789,49.210 C234.789,49.210 245.850,43.411 252.522,53.807 C261.459,28.305 291.879,31.981 300.48,38.954 C299.959,13.80 330.578,11.636 340.125,25.163 C345.372,15.410 361.34,14.376 367.79,20.919 C377.453,3.200 394.566,0.416 398.999,0.55 C398.999,30.700 398.999,61.354 398.999,91.999 C266.13,91.999 132.986,91.999 0.0,91.999 C0.0,61.354 0.0,30.700 0.0,0.55 C29.43,-1.93 39.643,16.616 43.978,23.395 Z" /></svg>') center top / auto 100px repeat-x;
}

/* Bottom Block --------------------------- */
.scVoiceInner {
  background: var(--svgMokumokuShita), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0 2px, rgba(255, 255, 255, 0) 3px 6px), rgb(var(--naviCream));
  background-position: center 60px, center;
}

.scVoiceInner .inner {
  position: relative;
  display: grid;
  gap: var(--paddingMid);
  margin: 0 auto var(--paddingMid);
  padding: 0 0 var(--paddingMid);
}

.scVoiceInner .inner::before {
  content: '';
  top: 30px;
  left: 0;
  width: 100%;
  height: calc(100% - 30px);
  background: linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) 30px, rgba(255, 255, 255, 0) calc(100% - 30px),
      #fff 100%),
    radial-gradient(rgb(var(--naviCream)) 0, #fff 2px) left top / 5px 5px repeat;
}

.scVoiceInner h3 {
  margin: 0 auto;
  padding: 30px 5px;
  max-width: var(--contentsWidth);
  text-align: center;
  font-size: 2.6rem;
}

.scVoiceInner .senior {
  --mainColor: rgb(var(--naviKoiBlue));
}

.scVoiceInner .teacher {
  --mainColor: rgb(var(--naviViolet));
}

.scVoiceInner .senior+.teacher {
  background: var(--svgMokumokuUe);
  background-position: center top, ;
}

.scVoiceInner .scVoiceTtl {
  position: relative;
  margin: 0 auto var(--paddingMinMin);
  padding: 0 var(--paddingMinMin) 3px;
  width: calc(100% - var(--paddingMin));
  max-width: var(--contentsWidth);
  color: var(--mainColor);
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: center;
}

.scVoiceInner .scVoiceTtl span {
  position: relative;
  display: inline-block;
}

.scVoiceInner .scVoiceTtl span::before,
.scVoiceInner .scVoiceTtl span::after {
  content: '';
  top: 50%;
  left: calc(100% + 5px);
  width: 15vw;
  max-width: 250px;
  height: 1px;
  background: var(--mainColor);
}

.scVoiceInner .scVoiceTtl span::after {
  left: auto;
  right: calc(100% + 5px);
}


.scVoiceInner .scVoiceTtl em {
  font-size: 150%;
}

.scVoiceInner .voiceList {
  display: grid;
  gap: var(--paddingMid);
  margin: 0 auto;
  width: calc(100% - var(--paddingMin));
  max-width: var(--contentsWidth);
}

.scVoiceInner .voiceList>li {
  position: relative;
  max-width: var(--contentsWidth);
}

.scVoiceInner .naiyou{
  container: naiyou / inline-size;
}

.scVoiceInner .itemThmb {
  margin: 0 auto 15px;
  width: 100cqw;
}

.scVoiceInner .itemThmb h5 {
  position: relative;
  z-index: 2;
  margin: 0 auto 5px;
  padding: 10px 15px;
  width: 100%;
  background: #fff;
  border: solid 3px rgb(var(--naviCream));
  border-bottom-width: 4px;
  border-radius: 2em;
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: center;
}

.scVoiceInner .itemThmb h5::before {
  content: '';
  top: calc(100% + 2px);
  left: 50%;
  width: 15px;
  height: 15px;
  background: #fff;
  border-right: solid 4px rgb(var(--naviCream));
  border-bottom: solid 4px rgb(var(--naviCream));
  transform: translate(-50%, -50%) rotate(45deg);
}

.scVoiceInner .itemThmb .itemTitle * {
  position: relative;
  z-index: 3;
}

.scVoiceInner .itemThmb figure {
  margin: 0 auto;
  width: 100%;
  max-width: var(--imageMaxWidth);
  border-radius: 1rem;
  overflow: hidden;
}

.scVoiceInner .itemThmb figure img {
  width: 100%;
  object-fit: contain;
}

.scVoiceInner .inner .itemTxt {
  position: relative;
  display: grid;
  gap: var(--paddingMinMin);
  padding: var(--paddingMinMin);
  background: #fff;
  border: solid 3px rgb(var(--naviCream));
  font-size: 1.8rem;
}

.scVoiceInner .inner .itemTxt::before,
.scVoiceInner .inner .itemTxt::after {
  content: '';
  width: 80px;
  height: 60px;
  border-width: 5px;
  border-color: var(--mainColor);
}

.scVoiceInner .inner .itemTxt::before {
  top: -4px;
  right: -4px;
  border-top-style: solid;
  border-right-style: solid;
}

.scVoiceInner .inner .itemTxt::after {
  bottom: -4px;
  left: -4px;
  border-bottom-style: solid;
  border-left-style: solid;
}

.scVoiceInner .itemDetail {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.scVoiceInner .itemDetail li {
  position: relative;
  padding: 3px;
  background: rgb(var(--naviCream));
  font-size: 1.2rem;
  line-height: 1.2;
}

.scVoiceInner .itemDetail .name {
  padding: 0;
  width: 100%;
  background: #fff;
  font-weight: bold;
  font-size: 1.6rem;
}

.scVoiceInner .itemDept {
  position: relative;
  display: grid;
  gap: 5px;
  grid-template-columns: 11em auto;
  align-items: center;
  font-size: 1.2rem;
}

.scVoiceInner .itemDept .arrow {
  padding: 0 0 0 1.5em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.91 42.51"><path fill="rgba(102,102,102,1)" fill-rule="evenodd" d="M58.2,14.79,55.77,15.9V26.83A1.63,1.63,0,0,1,56.05,30l1.39,9.17H51L52.43,30a1.63,1.63,0,0,1,.28-3.19V17.31L32.13,26.77a6.46,6.46,0,0,1-5.35,0L.71,14.79A1.25,1.25,0,0,1,0,13.68a1.22,1.22,0,0,1,.71-1.11L26.78.59a6.36,6.36,0,0,1,5.35,0l26.07,12a1.22,1.22,0,0,1,.71,1.11A1.25,1.25,0,0,1,58.2,14.79ZM29.46,31.7a8.88,8.88,0,0,0,3.72-.82L45.93,25V36.7c0,2.56-7.75,5.81-16.47,5.81S13,39.26,13,36.7V25l12.75,5.86A8.89,8.89,0,0,0,29.46,31.7Z" /></svg>') center / contain no-repeat;
  background-position: left 0.1em;
  background-size: 1.2em auto;
  font-size: 1.2rem;
}

.scVoiceInner .itemDept .name {
  line-height: 1.4;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: right;
}

.scVoiceInner .itemDept .name a {
  position: relative;
  display: inline-grid;
  grid-template-columns: 100%;
  align-items: center;
  padding: 5px 1.5em 5px 0.75em;
  background: var(--mainColor);
  border-radius: 1.4em;
  box-shadow: var(--dropShadowBokashi);
  line-height: 1.2;
  color: #fff;
  text-align: center;
}

.scVoiceInner .teacherVoice .itemDept .name a {
  background: var(--mainColor);
}

.scVoiceInner .itemDept a::before {
  content: '';
  top: 50%;
  right: 0.75em;
  width: 0.5em;
  height: 0.5em;
  border-bottom: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: translate(0, -50%) rotate(-45deg);
}

.scVoiceInner li .itemContents {
  position: relative;
  line-height: 1.8;
}

.scVoiceInner li .itemYear {
  padding: 3px;
  background: rgb(var(--naviGray));
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: right;
}

.scVoiceInner li .itemYear span {
  position: relative;
  padding: 0 5px 0 1.25em;
  background: var(--svgPencilGray);
  background-position: left 0.2em;
  background-size: 1em auto;
}

.scVoiceInner li .yerrowLink {
  position: relative;
  padding: 0 10px 0 0;
  width: 100%;
  font-size: 1.4rem;
  text-align: right;
  font-weight: bold;
}

.scVoiceInner li .yerrowLink span {
  display: inline-block;
  padding: 2px 3px;
  background: linear-gradient(to top, rgb(var(--naviCream)) 0px, rgb(var(--naviCream)) 7px, rgba(255, 255, 255, 0) 7px);
}

.scVoiceInner li .yerrowLink::after {
  content: '';
  top: 50%;
  right: 0;
  width: 0.5em;
  height: 0.5em;
  border-bottom: solid 1px #333;
  border-right: solid 1px #333;
  transform: translate(0, -50%) rotate(-45deg);
}

.scVoiceInner li .bigBtn {
  margin: var(--paddingMin) auto 0;
}

@media screen and (min-width: 768px) {
  .scVoiceInner {
    padding: 60px 0 0;
    background-position: center 100px, center;
  }

  .scVoiceInner .naiyou {
    position: relative;
    background: #fff;
    border: solid 3px rgb(var(--naviCream));
  }

  .scVoiceInner .naiyou::before,
  .scVoiceInner .naiyou::after {
    content: '';
    width: 200px;
    height: 100px;
    border-width: 5px;
    border-color: var(--mainColor);
  }

  .scVoiceInner .naiyou::before {
    top: -4px;
    right: -4px;
    border-top-style: solid;
    border-right-style: solid;
  }

  .scVoiceInner .naiyou::after {
    bottom: -4px;
    left: -4px;
    border-bottom-style: solid;
    border-left-style: solid;
  }

  .scVoiceInner .voiceList>li:nth-child(even) .naiyou::before {
    right: auto;
    left: -4px;
    border-right: 0;
    border-left-style: solid;
  }

  .scVoiceInner .voiceList>li:nth-child(even) .naiyou::after {
    left: auto;
    right:-4px;
    border-left: 0;
    border-right-style: solid;
  }

  .scVoiceInner .itemThmb {
    position: relative;
    display: grid;
    grid-template-columns: auto var(--imageMaxWidth);
    gap: var(--paddingMinMin);
    align-items: center;
    margin: 0;
    padding: var(--paddingMinMin);
  }

  .scVoiceInner .itemThmb::before {
    content: '';
    bottom: 0;
    left: var(--paddingMinMin);
    width: calc(100% - var(--paddingMin));
    height: 2px;
    background: rgb(var(--naviGray));
  }

  .scVoiceInner .voiceList>li:nth-child(even) .itemThmb {
    grid-template-columns: var(--imageMaxWidth) auto;
  }

  .scVoiceInner .voiceList>li:nth-child(even) .itemThmb figure {
    grid-area: 1 / 1 / 2 / 2;
  }

  .scVoiceInner .voiceList>li:nth-child(even) .scCnt .itemTitle {
    grid-area: 1 / 2 / 2 / 3;
  }

  .scVoiceInner .itemThmb figure {
    margin: 0;
  }

  .scVoiceInner .itemThmb h5 {
    margin: 0 auto 30px;
    padding: 0;
    border: none;
    font-size: 2rem;
  }

  .scVoiceInner .itemThmb h5 span {
    display: block;
    margin: 0 auto;
    width: fit-content;
  }

  .scVoiceInner .itemThmb h5::before {
    content: none;
  }

  .scVoiceInner .itemDetail {
    margin: 0 auto;
    justify-content: center;
  }

  .scVoiceInner .itemDetail li {
    text-align: center;
  }

  .scVoiceInner .itemDetail .name {
    background: none;
  }

  .scVoiceInner .inner .itemTxt{
    border: none;
  }

  .scVoiceInner .inner .itemTxt::before,
  .scVoiceInner .inner .itemTxt::after{
    content: none;
  }
}