@charset "utf-8";

/* ranking.html PC renewal
   既存CSSへの影響を避けるため .ranking-renewal 配下だけに指定
*/

.ranking-renewal {
    color: #0b2c63;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

.ranking-renewal a {
    text-decoration: none;
}

/* hero */
.ranking-renewal .rr-hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 28px;
    padding: 54px 58px 48px;
    min-height: 260px;
    box-sizing: border-box;
    border: 1px solid #dceaf8;
    border-radius: 18px;
    background:
            radial-gradient(circle at 82% 20%, rgba(187,220,255,.65), rgba(255,255,255,0) 32%),
            linear-gradient(135deg, #f8fcff 0%, #edf6ff 48%, #e4f1ff 100%);
    box-shadow: 0 12px 34px rgba(16,71,128,.10);
}

.ranking-renewal .rr-hero:before {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -105px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(255,255,255,.78);
}

.ranking-renewal .rr-hero:after {
    content: "";
    position: absolute;
    right: 70px;
    top: 42px;
    width: 280px;
    height: 180px;
    opacity: .7;
    background:
            linear-gradient(to top, rgba(0,83,177,.16) 0 55%, transparent 55%),
            linear-gradient(90deg, transparent 0 12%, rgba(0,83,177,.18) 12% 18%, transparent 18% 28%, rgba(0,83,177,.18) 28% 35%, transparent 35% 45%, rgba(0,83,177,.18) 45% 55%, transparent 55% 70%, rgba(0,83,177,.18) 70% 80%, transparent 80%);
}

.ranking-renewal .rr-hero__body {
    position: relative;
    z-index: 2;
    width: 58%;
}

.ranking-renewal .rr-hero__label {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #fff7df;
    color: #bc8500;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
}

.ranking-renewal .rr-hero__title {
    margin: 0 0 18px;
    color: #00398a;
    font-size: 48px;
    line-height: 1.18;
    letter-spacing: .08em;
    font-weight: 800;
}

.ranking-renewal .rr-hero__lead {
    margin: 0;
    color: #12366f;
    font-size: 20px;
    line-height: 1.9;
    font-weight: 700;
    letter-spacing: .04em;
}

.ranking-renewal .rr-hero__visual {
    position: absolute;
    z-index: 3;
    right: 80px;
    bottom: 44px;
    width: 320px;
    height: 190px;
}

.ranking-renewal .rr-podium {
    position: relative;
    width: 100%;
    height: 100%;
}

.ranking-renewal .rr-podium:before {
    content: "🏆";
    position: absolute;
    left: 132px;
    top: -16px;
    font-size: 60px;
    filter: drop-shadow(0 8px 12px rgba(179,128,0,.20));
}

.ranking-renewal .rr-podium__item {
    position: absolute;
    bottom: 0;
    display: block;
    width: 86px;
    border-radius: 12px 12px 5px 5px;
    background: linear-gradient(180deg, #f9fbff 0%, #dcecff 100%);
    box-shadow: 0 12px 24px rgba(0,61,145,.18);
    text-align: center;
    color: #0b54b5;
    font-size: 52px;
    line-height: 1;
    font-weight: 800;
    padding-top: 28px;
}

.ranking-renewal .rr-podium__item--1 {
    left: 115px;
    height: 128px;
    color: #d99900;
}

.ranking-renewal .rr-podium__item--2 {
    left: 32px;
    height: 100px;
}

.ranking-renewal .rr-podium__item--3 {
    left: 198px;
    height: 82px;
    color: #d99900;
}

/* main cards */
.ranking-renewal .rr-maincards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 0 0 24px;
}

.ranking-renewal .rr-maincard {
    display: block;
    min-height: 188px;
    padding: 30px 30px 24px;
    border: 1px solid #dce8f6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(14,56,104,.12);
    text-align: center;
    box-sizing: border-box;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ranking-renewal .rr-maincard:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(14,56,104,.17);
}

.ranking-renewal .rr-maincard__icon {
    display: block;
    margin: 0 auto 14px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #0648a7;
    color: #fff;
    line-height: 58px;
    font-size: 28px;
}

.ranking-renewal .rr-maincard--hs .rr-maincard__icon {
    background: #18a063;
}

.ranking-renewal .rr-maincard--jhs .rr-maincard__icon {
    background: #ed4c83;
}

.ranking-renewal .rr-maincard__title {
    display: block;
    margin: 0 0 10px;
    color: #00398a;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 800;
}

.ranking-renewal .rr-maincard--hs .rr-maincard__title {
    color: #138650;
}

.ranking-renewal .rr-maincard--jhs .rr-maincard__title {
    color: #d93c73;
}

.ranking-renewal .rr-maincard__text {
    display: block;
    margin: 0 0 16px;
    min-height: 42px;
    color: #334967;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 700;
}

.ranking-renewal .rr-maincard__button {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    background: #0648a7;
    color: #fff;
    font-weight: 700;
}

.ranking-renewal .rr-maincard--hs .rr-maincard__button {
    background: #18a063;
}

.ranking-renewal .rr-maincard--jhs .rr-maincard__button {
    background: #ed4c83;
}

/* anchor */
.ranking-renewal .rr-anchor {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 36px;
    padding: 0;
    border: 1px solid #dce8f6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(14,56,104,.08);
    list-style: none;
}

.ranking-renewal .rr-anchor li {
    margin: 0;
    padding: 0;
    border-left: 1px solid #e2ecf7;
}

.ranking-renewal .rr-anchor li:first-child {
    border-left: 0;
}

.ranking-renewal .rr-anchor a {
    display: block;
    padding: 18px 12px;
    color: #17366d;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
}

.ranking-renewal .rr-anchor a:hover {
    background: #f4f9ff;
    color: #0052b8;
}

/* section */
.ranking-renewal .rr-section {
    margin: 0 0 46px;
}

.ranking-renewal .rr-section__head {
    position: relative;
    margin: 0 0 22px;
    padding: 0 0 0 18px;
    border-left: 6px solid #0648a7;
}

.ranking-renewal .rr-section--hs .rr-section__head {
    border-left-color: #18a063;
}

.ranking-renewal .rr-section--jhs .rr-section__head {
    border-left-color: #ed4c83;
}

.ranking-renewal .rr-section--material .rr-section__head {
    border-left-color: #834ec8;
}

.ranking-renewal .rr-section__label {
    margin: 0 0 4px;
    color: #7a91b0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .08em;
}

.ranking-renewal .rr-section__title {
    margin: 0 0 7px;
    color: #00398a;
    font-size: 30px;
    line-height: 1.3;
    font-weight: 800;
}

.ranking-renewal .rr-section--hs .rr-section__title {
    color: #138650;
}

.ranking-renewal .rr-section--jhs .rr-section__title {
    color: #d93c73;
}

.ranking-renewal .rr-section--material .rr-section__title {
    color: #7b3fbd;
}

.ranking-renewal .rr-section__lead {
    margin: 0;
    color: #2f4665;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 700;
}

.ranking-renewal .rr-section__link {
    position: absolute;
    right: 0;
    top: 16px;
    display: block;
    padding: 11px 34px 11px 20px;
    border: 1px solid #0648a7;
    border-radius: 8px;
    color: #0648a7;
    background: #fff;
    font-size: 14px;
    font-weight: 800;
}

.ranking-renewal .rr-section__link:after {
    content: "›";
    position: absolute;
    right: 16px;
    top: 7px;
    font-size: 24px;
}

.ranking-renewal .rr-section__link--green {
    border-color: #18a063;
    color: #138650;
}

.ranking-renewal .rr-section__link--pink {
    border-color: #ed4c83;
    color: #d93c73;
}

.ranking-renewal .rr-section__link--purple {
    border-color: #834ec8;
    color: #7b3fbd;
}

/* college cards */
.ranking-renewal .rr-college-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0 0 24px;
}

.ranking-renewal .rr-college-card__link {
    display: block;
    height: 100%;
    overflow: hidden;
    border: 1px solid #dce8f6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(14,56,104,.08);
    color: #17366d;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ranking-renewal .rr-college-card__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(14,56,104,.13);
}

.ranking-renewal .rr-college-card__image {
    display: block;
    height: 118px;
    overflow: hidden;
    background: linear-gradient(135deg, #eff7ff 0%, #ffffff 100%);
}

.ranking-renewal .rr-college-card__image img {
    display: block;
    width: 100%;
    height: 118px;
    object-fit: cover;
}

.ranking-renewal .rr-college-card__body {
    display: block;
    padding: 18px 18px 16px;
}

.ranking-renewal .rr-college-card__title {
    display: block;
    margin: 0 0 4px;
    color: #00398a;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 800;
}

.ranking-renewal .rr-college-card__sub {
    display: block;
    margin: 0 0 10px;
    color: #6a83a8;
    font-size: 13px;
    font-weight: 700;
}

.ranking-renewal .rr-college-card__text {
    display: block;
    min-height: 56px;
    color: #394d67;
    font-size: 13px;
    line-height: 1.7;
}

.ranking-renewal .rr-college-card__more {
    display: block;
    margin: 12px 0 0;
    color: #0648a7;
    text-align: right;
    font-size: 13px;
    font-weight: 800;
}

/* sublist / other-rank */
.ranking-renewal .rr-sublist {
    padding: 22px 22px 18px;
    border: 1px solid #dce8f6;
    border-radius: 12px;
    background: #f8fbff;
}

.ranking-renewal .rr-sublist__title {
    margin: 0 0 16px;
    color: #00398a;
    font-size: 20px;
    font-weight: 800;
}

.ranking-renewal .rr-sublist .rank-other {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
}

.ranking-renewal .rr-sublist .rank-other li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ranking-renewal .rr-sublist .rank-other a {
    display: block;
    padding: 10px 12px;
    border: 1px solid #dce8f6;
    border-radius: 8px;
    background: #fff;
    color: #12366f;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.ranking-renewal .rr-sublist .rank-other a:hover {
    border-color: #9dc4ef;
    background: #f2f8ff;
}

/* high school logo */
.ranking-renewal .rr-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ranking-renewal .rr-logo-grid li {
    margin: 0;
    padding: 0;
}

.ranking-renewal .rr-logo-grid a {
    display: block;
    height: 132px;
    padding: 18px 14px 14px;
    border: 1px solid #dce8f6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(14,56,104,.08);
    box-sizing: border-box;
    text-align: center;
    color: #12366f;
}

.ranking-renewal .rr-logo-grid a:hover {
    border-color: #a8d9c1;
    box-shadow: 0 12px 26px rgba(14,56,104,.12);
}

.ranking-renewal .rr-logo-grid__image {
    display: block;
    height: 65px;
    margin: 0 0 12px;
}

.ranking-renewal .rr-logo-grid__image img {
    max-width: 100%;
    height: auto;
}

.ranking-renewal .rr-logo-grid__name {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 800;
}

/* jhs schools */
.ranking-renewal .rr-school-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ranking-renewal .rr-school-grid li {
    margin: 0;
    padding: 0;
}

.ranking-renewal .rr-school-grid a {
    position: relative;
    display: block;
    padding: 14px 30px 14px 14px;
    border: 1px solid #f5b9cc;
    border-radius: 10px;
    background: #fff;
    color: #17366d;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
    box-sizing: border-box;
}

.ranking-renewal .rr-school-grid a:hover {
    background: #fff8fb;
}

.ranking-renewal .rr-school-grid__icon {
    margin-right: 6px;
    color: #ed4c83;
}

.ranking-renewal .rr-school-grid__arrow {
    position: absolute;
    right: 13px;
    top: 50%;
    margin-top: -15px;
    color: #ed4c83;
    font-size: 24px;
}

/* material */
.ranking-renewal .rr-material-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ranking-renewal .rr-material-card a {
    position: relative;
    display: block;
    min-height: 120px;
    padding: 24px 24px 22px 88px;
    border: 1px solid #dce8f6;
    border-radius: 12px;
    background: #fff;
    color: #17366d;
    box-shadow: 0 8px 20px rgba(14,56,104,.08);
    box-sizing: border-box;
}

.ranking-renewal .rr-material-card__icon {
    position: absolute;
    left: 24px;
    top: 28px;
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #f3ecff;
    color: #7b3fbd;
    text-align: center;
    line-height: 46px;
    font-size: 25px;
}

.ranking-renewal .rr-material-card__title {
    display: block;
    margin: 0 0 7px;
    color: #7b3fbd;
    font-size: 19px;
    line-height: 1.4;
    font-weight: 800;
}

.ranking-renewal .rr-material-card__text {
    display: block;
    color: #334967;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 700;
}

.ranking-renewal .rr-material-card__more {
    position: absolute;
    right: 22px;
    top: 42px;
    color: #7b3fbd;
    font-size: 13px;
    font-weight: 800;
}

/* note */
.ranking-renewal .rr-note {
    margin-top: 34px;
    padding: 24px 28px;
    border: 1px solid #c9def4;
    border-radius: 12px;
    background: #f8fbff;
    color: #263f61;
}

.ranking-renewal .rr-note .ttl {
    margin-bottom: 12px;
    color: #00398a;
    font-size: 20px;
    font-weight: 800;
}

.ranking-renewal .rr-note p {
    line-height: 1.8;
}

/* IE/old browser fallback: grid非対応時の最低限 */
@supports not (display: grid) {
    .ranking-renewal .rr-maincard,
    .ranking-renewal .rr-college-card,
    .ranking-renewal .rr-logo-grid li,
    .ranking-renewal .rr-school-grid li,
    .ranking-renewal .rr-material-card {
        float: left;
        width: 31%;
        margin-right: 2%;
        margin-bottom: 18px;
    }
}

/* v2 adjustments: section list buttons removed / college cards partly no-image */
.ranking-renewal .rr-section__head {
    padding-right: 0;
}

.ranking-renewal .rr-section__link {
    display: none;
}

.ranking-renewal .rr-college-card__link {
    position: relative;
}

.ranking-renewal .rr-college-card--image .rr-college-card__image {
    height: 128px;
    background: #eaf4ff;
}

.ranking-renewal .rr-college-card--image .rr-college-card__image img {
    width: 100%;
    height: 128px;
    object-fit: cover;
}

.ranking-renewal .rr-college-card--noimage .rr-college-card__link {
    overflow: hidden;
    border-color: #d9e8f8;
    background:
            radial-gradient(circle at 88% 12%, rgba(235,244,255,.95) 0, rgba(235,244,255,.95) 56px, transparent 57px),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.ranking-renewal .rr-college-card--noimage .rr-college-card__link:before {
    content: "";
    display: block;
    height: 8px;
    background: linear-gradient(90deg, #0648a7 0%, #2f8dff 65%, #e0a31a 100%);
}

.ranking-renewal .rr-college-card--noimage .rr-college-card__link:after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    border: 1px solid rgba(60,132,217,.18);
    background: rgba(236,246,255,.55);
}

.ranking-renewal .rr-college-card--noimage .rr-college-card__body {
    position: relative;
    z-index: 2;
    min-height: 194px;
    padding: 22px 20px 18px;
    box-sizing: border-box;
}

.ranking-renewal .rr-college-card__icon {
    display: block;
    float: right;
    width: 48px;
    height: 48px;
    margin: -4px 0 8px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef6ff 0%, #dcecff 100%);
    color: #0648a7;
    text-align: center;
    line-height: 48px;
    font-size: 25px;
    box-shadow: inset 0 0 0 1px rgba(6,72,167,.08);
}

.ranking-renewal .rr-college-card--noimage .rr-college-card__title {
    padding-top: 2px;
}

.ranking-renewal .rr-college-card--noimage .rr-college-card__sub {
    color: #54739e;
}

.ranking-renewal .rr-college-card--noimage .rr-college-card__text {
    min-height: 70px;
}

.ranking-renewal .rr-sublist {
    margin-top: 6px;
    padding-top: 20px;
}