.breadcrumb-list{
    display: flex;
}
.breadcrumb{
    position: relative;
    margin-right: 2rem;
}
.breadcrumb:not(:last-child)::after{
    position: absolute;
    content: ">";
    top: 0;
    right: -1.5rem;
}
.breadcrumb-link.breadcrumb-link{
    text-decoration: underline;
}
.main-content{
    display: flex;
    padding: 0 1rem;
}
.main-subject-title{
    display: flex;
    align-items: center;
    padding: 1rem;
    justify-content: space-between;
    position: relative;
}
.main-subject-title-text{
    color: #fff;
    font-weight: bold;
}
.main-subject-title-link{
    background: linear-gradient(to bottom, rgba(254,252,255,1) 1%,rgba(230,230,230,1) 100%);
    display: flex;
    border: solid 1px #aaa;
    align-items: center;
    justify-content: space-around;
    padding: .5rem;
    border-radius: 5px;
    position: relative;
}
.pdf-image.pdf-image{
    width: 30px;
}
.main-subject-title-pdf-link{
    font-weight: bold;
    color: #000;
    margin-left: .5rem;
}
.detail-container {
    margin: 3vh 0;
}
.main-subject-title-bg{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: block;
}
.main-subject-title-bg::before, .main-subject-title-bg::after{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-style: solid;
    width: 1px;
    height: 1px;
}
.main-subject-title-bg::before{
    border-width: 0 0 40px 100px;
}
.main-subject-title-bg::after{
    border-width: 0 0 40px 30px;
}
.main-subject-title[data-subject="geography-history-citizen"]{
    background-color: #6ECF72;
}
.main-subject-title[data-subject="english"]{
    background-color: #DCC81C;
}
.main-subject-title[data-subject="japanese"]{
    background-color: #FF7C98;
}
.main-subject-title[data-subject="rika"]{
    background-color: #E766FD;
}
.main-subject-title[data-subject="suugaku1"], .main-subject-title[data-subject="suugaku2"]{
    background-color: #4A85D1;
}
.main-subject-title[data-subject="jouhou"]{
    background-color: #39486A;
}
.main-subject-title[data-subject="geography-history-citizen"] .main-subject-title-bg::before{
    border-color: transparent transparent #5e9a61 transparent;
}
.main-subject-title[data-subject="geography-history-citizen"] .main-subject-title-bg::after{
    border-color: transparent transparent #C8E0C9 transparent;
}
.main-subject-title[data-subject="english"] .main-subject-title-bg::after{
    border-color: transparent transparent #f7eb7f transparent;
}
.main-subject-title[data-subject="english"] .main-subject-title-bg::before{
    border-color: transparent transparent #c6b422 transparent;
}
.main-subject-title[data-subject="japanese"] .main-subject-title-bg::after{
    border-color: transparent transparent #ECCBD2 transparent;
}
.main-subject-title[data-subject="japanese"] .main-subject-title-bg::before{
    border-color: transparent transparent #ad5b6d transparent;
}
.main-subject-title[data-subject="rika"] .main-subject-title-bg::before{
    border-color: transparent transparent #a55eb1 transparent;
}
.main-subject-title[data-subject="rika"] .main-subject-title-bg::after{
    border-color: transparent transparent #f8e4fb transparent;
}
.main-subject-title[data-subject="suugaku1"] .main-subject-title-bg::before, .main-subject-title[data-subject="suugaku2"] .main-subject-title-bg::before{
    border-color: transparent transparent #436898 transparent;
}
.main-subject-title[data-subject="suugaku1"] .main-subject-title-bg::after, .main-subject-title[data-subject="suugaku2"] .main-subject-title-bg::after{
    border-color: transparent transparent #d5e0ef transparent;
}
.main-subject-title[data-subject="jouhou"] .main-subject-title-bg::before{
    border-color: transparent transparent #1e2431 transparent;
}
.main-subject-title[data-subject="jouhou"] .main-subject-title-bg::after{
    border-color: transparent transparent #abaeb5 transparent;
}

.advice-block{
    border: 1px solid #3C7FE8;
    padding: 1rem;
    margin-bottom: 1rem;
}
.advice-grade{
    position: relative;
    display: inline-block;
    padding: 1rem 3rem;
    color: #fff;
    border-radius: 0 100vh 100vh 0;
    background: #3C7FE8;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
    font-size: 2.6rem;
    transform: translate(-2rem);
}
.advice-grade::after{
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 0;
    content: '';
    border-top: 8px solid #00368B;
    border-left: 8px solid transparent;
}
.advice-body{
    margin-top: 1rem;
}
.advice-content > p:not(:last-child){
    margin-bottom: 1rem;
}
.menu{
    font-size: 1.4rem;
    margin: .2rem 0 1rem;
}
.sub-title{
    font-size: 2.6rem;
    font-weight: bold;
    margin: 2rem 0 0;
}
.sub-title[data-subject="geography-history"]{
    background: linear-gradient(transparent 80%, #d8ecdc 70%);
}
.about-container table{
    border-collapse: collapse;
    margin: 2rem auto;
    font-size: 1.3rem;
}
.about-container table td{
    border: solid 2px #808080;
    text-align: center;
    padding: 5px;
}
.question-pdf-link{
    display: inline-flex;
}
.question-pdf-image.question-pdf-image{
    width: 20px;
}
.about-container table{
    width: 96%;
}
.menu > a{
    text-decoration: underline;
}
.txt img{
    max-width: 620px;
}
.question-active {
    border-radius: 50%;
    border: solid #ff0000;
    color: #000;
    font-weight: bold;
}

.yell-banner {
  display: block;
  margin: 30px auto;
  max-width: 728px;
}