@charset "Shift_JIS";

.otherLink {
    padding: 2rem;
    background-color: #cddfed;
    border-radius: 10px;
}

@media screen and (max-width:767px) {
    .otherLink {
        padding: 1rem;
    }
}

.coment_mini {
    display: flex;
    gap: 1rem;
}

.coment_mini div {
    display: flex;
    margin-top: 0 !important;
    padding: 1rem;
    background: #fff;
    border-radius: 10px;
    flex: 1;
    font-weight: bold;
    color: #2a4997;
    border: 3px solid #7285b6;
    gap: 1rem;
}

@media screen and (max-width:767px) {
    .coment_mini div {
        padding: 1rem;
        flex-direction: column;
    }
}


.coment_mini div img {
    width: 60px;
    height: 60px;
}

@media screen and (max-width:767px) {
    .coment_mini div img {
        margin: auto
    }
}

.otherLink h4 {
    border-left: 8px solid #004f9e;
    font-weight: 800;
    font-size: 18px;
}

.listBox {
    padding: 2rem;
    background-color: #cddfed;
    border-radius: 10px;
    margin-bottom: 20px;
}

dl.voiceBOX {
    position: relative;
    border: 4px solid #ffbaba;
    padding: 2rem;
    border-radius: 10px;
}

dl.voiceBOX img {
    position: absolute;
    top: -13px;
    right: -20px;
    transform: rotate(20deg);
}


@media screen and (max-width:767px) {
    dl.voiceBOX img {
        position: absolute;
        top: -13px;
        right: -13px;
    }
}

dl.voiceBOX dt {
    font-weight: 800;
    color: #ff0000;
    font-size: 1.4rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

dl.voiceBOX dt:after {
    content: "さん";
    font-size: 0.8rem;
}

dl.voiceBOX dt span.year {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    --r: .8em;
    /* control the cutout */
    padding-right: calc(var(--r) + .5em);
    line-height: 1.8;
    clip-path: polygon(-1em 0,
            100% 0,
            calc(100% - var(--r)) 50%,
            100% 100%,
            -1em 100%);
    border-image: conic-gradient(#bcb14d 0 0) fill 0 / / 100vw;
    width: fit-content;
    padding: 5px 30px 5px 0;
    margin-right: 10px;
}

@media screen and (max-width:767px) {
    dl.voiceBOX dt span.year {
        font-size: 14px;
        --r: .8em;
        padding-right: calc(var(--r) + .5em);
        padding: 5px 12px px 0;
    }
}
.voice_jukou {
    padding: 2rem;
    margin-bottom: 23px;
    border-radius: 16px;
    border: 3px solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border: 3px solid #7285b6;

}

.voice_jukou p{
line-height:1.8;
}

@media screen and (max-width:767px) {
    .voice_jukou {
        padding: 1rem;
        flex-direction: column;
    }
}

.voice_jukou img {
    display: inline-block;
    width: 100;
    height: 100px;
}


@media screen and (max-width:767px) {
    .voice_jukou img {
        width: 60px;
        height: 60px;
    }
}

h3.teacher {
    color: #284ead;
    display: flex;
    align-items: center;
    justify-content:center;
    font-weight:800;
    margin+b: 2;
    margin+b: 20px;
    margin+b: 20px;
    margin+b: 20p;
    margin+b: 20;
    margin-bottom: 23px;
    border-bottom:none;
}

h3.teacher:after{
background:transparent;
}


/*ボタンの上書き*/a.btnRed {
  display: inline-block;
  padding: 20px;
  font-weight: 800;
  border-radius: 10px;
  background: linear-gradient(to bottom, #ff000e 0%, #d61f29 60%, #d1000a 80%);
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
  transition: transform .3s, box-shadow .3s, opacity .3s;
}

a.btnRed:hover {
  transform: translateY(3px);
  box-shadow: none;
  text-decoration:none;
  background:#d61f29;
    opacity: .9;
}
span.marker{
     /* background: linear-gradient(transparent 60%, #fff64d6b 60%); */
     font-weight: 800;
     color: #1d4bbc;
}