@import url('results.css');

/* ===== 共通 ===== */
#class {
    --middle-space : 55px;
}
#class > header {
    background-color: transparent;
    border-bottom: 2px solid var(--color-white);
    position:fixed;
}
#class.scrolled > header {
    background-color: var(--brand-glass-color);
}
.bgc-main {
    background-color: var(--brand-primary);
}

#class main a:hover {
    color: var(--brand-primary) !important;
}

/* ===== ページヘッダ ===== */
#class .page-header {
    background-size: cover;
    width:100%;
    margin-top:0;
    padding-top:calc(var(--header-offset) + 60px);
    color: var(--color-white);
    letter-spacing: 0.2em;
    padding-bottom:80px;
    overflow-x: clip;
}
#class .page-header > div {
    min-height:360px;
}
#class .page-header hgroup > div {
    max-width:300px;
}
#class .page-header hgroup h1 {
    font-size: 2.35em;
    font-weight: bold;
    letter-spacing: 0.25em;
    line-height: 1;
    margin-bottom: 20px;
}
#class .page-header hgroup h1 span {
    display: block;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    font-size: 0.34em;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.57);
    letter-spacing: 0.05em;
}
#class .page-header hgroup p {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 55px;
    text-align:left;
}
#class .page-header figure.trans {
    height: 400px;
    width:50%;
    margin: 0;
    padding-top:20px;
    position: absolute;
    right: 0;
    bottom:0;
    overflow: hidden;
    text-align: right;
}
#class .page-header figure.trans > img {
    height: 100%;
    width:100%;
    object-fit: contain;
    object-position: bottom;
}
#class .page-header figure.trans figcaption {
    max-width: 200px;
    margin: 0;
    position: absolute;
    top: 10%;
    left: 0;
}

#class .page-header figure:not(.trans) {
    width:50%;
    margin: 0;
    position: absolute;
    right: -10%;
    bottom:-20px;
}
#class .page-header figure:not(.trans) > div {
    width:100%;
    border-radius:var(--radius);
}
#class .page-header figure:not(.trans) > div > img {
    object-fit: cover;
    object-position:center;
}
#class .page-header figure:not(.trans) figcaption {
    display:none;
}

#class .page-header .class-curriculum {
    margin-top: var(--middle-space);
    order: 3;
    max-width:50%;
}
#class .page-header .class-curriculum h2 {
    font-size: .89em;
    line-height: 1;
    margin-bottom: 13px;
}

#class .marquee {
    position:static;
    margin:0;
    color: rgba(var(--color-gray-rgb) / .9);
    line-height:1.2;
    z-index: 0;
}


span.class-num {
    --size: 31px;
    display: block;
    width: var(--size);
    height: var(--size);
    color: var(--color-white);
    font-size: 15px;
    text-align: center;
    line-height: var(--size);
    background-color: var(--brand-primary);
    border-radius: var(--radius) 0 var(--radius) 0; 
    margin-inline: auto;
    margin-bottom: 27px;
}

#nav-cover {
    --color-light-glass: var(--brand-glass-color);
}

/* ===== カスタマイズ ===== */
#class.theme-elem .page-header {
    background-image: url(../_img/class/class_main_es.png);
}
#class.theme-junior .page-header {
    background-image: url(../_img/class/class_main_jhs.png);
}
#class.theme-senior .page-header {
    background-image: url(../_img/class/class_main_hs.png);
}
#class.theme-personal .page-header {
    background-image: url(../_img/class/class_main_pt.png);
}

/* ===== 最新テスト情報 ===== */

.notice {
    margin-top: 0;
    top:-80px;
}
.notice > div {
    background-color: var(--color-white);
    padding: var(--pad-4) var(--pad-5) !important;
    border-radius: var(--radius) var(--radius) 0 0;
    position: relative;
    z-index: 1;

    gap: 216px;
}

.notice h2 {
    font-size: 0.9em;
    color: var(--brand-primary);
}
.notice a {
    font-size: 0.89em;
    color: var(--fc-black);
}


/* ===== クラス紹介 ===== */
#class-info {
    padding-top:0;
}
#class-info nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-4);
    margin: 0;
}
#class-info nav li {
    border: 2px solid var(--brand-primary);
    border-radius: var(--radius);
    line-height: 1;
    position: relative;
    transition: all .1s linear;
}
#class-info nav li:hover {
    background-color: rgb(var(--brand-primary-g) / .2);
}

#class-info nav li a {
    color: var(--fc-black);
    padding: 20px 20px 60px 20px;
    display:block;
    height:100%;
}
#class-info nav li a::after {
    content: '\f13a';
    display: block;
    --size:27px;
    width: var(--size);
    height: var(--size);
    font-family: "Font Awesome 7 Free"; 
    font-weight: 900;
    font-size: var(--size);
    color: var(--brand-primary);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    margin: auto;
}

#class-info nav li p {
    font-size: 1.27em;
    line-height: 1.4;
}
#class-info nav li p span {
    display: block;
    font-size: 0.75em;
    color: var(--fc-blue);
    margin-bottom: 18px;
}



/*クラス分け共通*/
.card-class {
    margin-bottom: var(--section-space);
    position: relative;
}
.card-class:not(:last-of-type)::after {
    content: '';
    display: block;
    max-width: var(--container-main);
    width: 100%;
    border-bottom: 1px dashed #c5c5c5;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.last-content::after {
    display: none;
}

.card-class .card-class--header {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: repeat(3, auto) ;
    row-gap: calc(var(--space-2) * 1.25);
    font-weight: bold;
    container-type: inline-size;
}
.card-class .card-title {
    background: #03A566;
    background: linear-gradient( 150deg,
    rgb(var(--brand-primary-g) / 1) 0%,
    rgb(var(--brand-gradient-sub-g) / 1) 100%
    );
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-left: calc(50% - 50vw);
    display: flex;
    justify-content: end;
    align-items: center;
    order: 0;
}
.card-class h3 {
    max-width: 460px;
    width: 65%;
    margin-right:60px;
    padding-block:20px;
    font-size: 1.57em;
    color: var(--color-white);
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.card-class h3 span {
    display: block;
    font-size: 15px;
    margin-bottom: 19px;
}
.card-class h3 .class-num {
    display: inline-block;
    background-color: var(--color-white);
    color: var(--brand-primary);
    margin: 0;
    margin-left: 1em;
}
.card-class .card-class--header p {
    max-width: 415px;
    letter-spacing: 0.05em;
    line-height: 2.15;
    order: 1;
    margin: 0;
}
.card-class .class-tag {
    width: fit-content;
    min-width: 367px;
    background-color: var(--color-gray);
    padding: 10px 20px;
    margin: 0;
    border-radius: 50rem;
    order: 2;
}
.card-class .class-tag div {
    display: flex;
    gap: var(--gap-3);
    align-items: center;
}
.card-class .class-tag dt {
    color: var(--brand-primary);
    width:7em;
}
.card-class .card-class--image {
    grid-row: span 3;
    margin: 0;
    position: relative;
}
.card-class .card-class--image figure {
    max-width: 521px;
    max-height: 351px;
    aspect-ratio: 521 / 351;
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0;
    position: absolute;
    left: -44px;
    top: 47px;
    width:100%;
}
.card-class .card-class--image figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.last-contents {
    border:0;
}
.slick-wrapper {
    overflow: hidden;
    padding-top: var(--space-5);
}
  
.content_area{
    max-width: var(--container-main);
    padding: 0 40px;
    margin: 0 auto;
}

.slick-track {
    display:flex !important;
    align-items: flex-start;
    justify-content: center;
    gap:var(--space-4);
}
.slick-list{
    overflow: visible !important;
}
.slick-item {
    margin:0;
}
.slick-item .card {
    background-color: transparent;
}
.slick-item .card-sec {
    max-width: 423px;
    width: 100%;
    box-shadow: none;
    padding: 0;
}
.slick-item .card figure {
    aspect-ratio: 434 / 296;
    position: static;
    border-radius: var(--radius);
    overflow: hidden;
}
.slick-item .card header {
    color: var(--fc-black);
    justify-content: flex-start;
    margin-top: 0;
}
.slick-item .card header::before {
    background-color: transparent;
}
.slick-item .card header .card-num {
    color: var(--brand-primary);
}
  
.slick-prev, .slick-next{
    --position: 200px;
    --btn-wh: 60px;
    z-index:100;
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 36%;
    display: block;
    width: var(--btn-wh);
    height: var(--btn-wh);
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:before, .slick-next:before{
    content: '';
    display: inline-block;
    font-family: "Font Awesome 7 Free"; 
    font-weight: 600;
    font-size: 3.5rem;
    color: var(--brand-primary);
}
.slick-prev {
    left: var(--position); /*200px*/
}
.slick-prev::before {
    content: '\f137';
  }
.slick-next {
    right: var(--position);
}
.slick-next::before {
    content: '\f138';
    right: 0;
}

/* ===== 合格実績 / results-of-examinations ===== */


/* ===== 学年向けイベント情報 ===== */
#event {/* 個別設定 */
    position: relative;
    padding-block: 0;
}
#event .section-book--lightblue {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    padding-top: 10px;
}

/* ===== 学年別設置クラス - class list ===== */
#schoolhouse {
    padding-top: 200px;
}


#class #nav-for-customer {
    padding: 0;
}
#class #nav-for-customer ul{
    padding: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1000px) {
    .slick-prev, .slick-next {
        --position: clamp(0px, calc(50vw - 300px), 200px);;
    }
}
@media (max-width: 950px) {
    .card-class .card-class--header p {
        width: 45cqw;
    }
}
@media (max-width: 920px) {
    .notice > div {
        gap: 0;
    }

    .mv figure figcaption {
        top: -40px;
        left: -30px;
    }

    #class-info nav ul {
        gap: var(--gap-1);
    }
    #class-info nav li span.class-num {
        margin-bottom: clamp(15px, 1vw + 15px, 27px);
    }
    #class-info nav li p {
        font-size: clamp(1.1em, 1vw + 0.1em, 1.27em);
    }
    #class-info nav li p span {
        margin-bottom: 15px;
    }
}
@media (max-width: 820px) {
    #class .page-header {
        padding-top:calc(var(--header-offset) + 40px);
        padding-bottom:0;
    }
    #class .page-header hgroup p {
        margin-bottom:0;
    }
    #class .page-header figure.trans {
        height: 60vh;
        width:100%;
        max-width:400px;
        margin-inline:auto;
        position: relative;
    }
    #class .page-header figure:not(.trans) {
        width:100%;
        margin-inline:auto;
        position: relative;
        right:0;
        top:20px;
        bottom:auto;
    }
    #class .page-header .class-curriculum {
        max-width:100%;
        width:100%;
        color: var(--brand-primary);
        background-color: var(--color-white);
        margin:0;
        padding-bottom: 0;
        padding: var(--pad-2);
        border-radius: var(--radius) var(--radius) 0 0;
        position:sticky;
        bottom:-80px;
        min-height:80px;
    }
    #class .page-header figure:not(.trans) + .class-curriculum {
        border-radius:0;
    }
    #class .page-header .class-curriculum li {
        color: var(--color-white);
        background-color: var(--brand-primary);
    }

    #class .notice {
        top:0;
        margin-top:var(--margin);
    }
    #class .notice > div {
        font-size: 1em;
        border: 2px solid var(--brand-primary);
        padding: var(--pad-3) var(--pad-2) !important;
        gap: var(--gap-1);
        border-radius:var(--radius);
    }

    #class .marquee {
        position:absolute;
        top:60vh;
        margin:0;
        opacity:0.6;
    }
}
@media (max-width: 768px) {
    #class-info nav li p {
        font-size: 1rem;
    }
}
@media (max-width: 680px) {
    .card-class .card-class--header {
        grid-template-columns: 1fr;
    }
    .card-class .card-title {
        width: 80cqw;
    }
    .card-class h3 {
        width: 85%;
    }

    .card-class .card-class--image figure {
        position: static;
        margin-left: auto;
    }
    .card-class .card-class--header p {
        width: 100cqw;
        max-width: none;
    }

    /* ===== クラス別 ===== */
    /*クラス分け共通*/
    .card-class  {
        margin-bottom: var(--space-2);
    }
    .card-class:last-of-type {
        margin-bottom:0;
        padding-bottom:0;
    }
    .slick-item .card-sec {
        max-width: 375px;
        padding-inline: 4%;
        gap: var(--gap-2);
    }
    .card-class .card-class--header {
        row-gap: var(--space-2);
        margin-bottom: var(--space-3);
    }
    .card-class .card-title {
        width: calc(100% + var(--padding));
        margin-left:calc(var(--padding) * -1);
        padding-left:var(--padding);
        justify-content: flex-start;
    }
    .card-class h3 {
        width: 100%;
        font-size: 1.4em;
        margin-right:var(--padding);
    }
    .card-class .card-class--header p {
        font-size: 16px;
    }
    .card-class dl {
        min-width: auto;
        font-size: 1rem;
    }
}
@media (max-width: 600px) {
    .slick-prev, .slick-next {
        --btn-wh: 44px;
    }
    .slick-prev:before, .slick-next:before {
        font-size: 2.5rem;
    }
}
@media (max-width:560px){
    .content_area{
        padding: 0 30px;
    }
    .slick-item p {
        font-size: 15px;
        line-height: 100px;
        margin: 5px;
        padding: 1.5%;
    }
}
@media (max-width: 520px) {
    /* ===== カスタマイズ ===== */
    #class.theme-elem .page-header {
        background-image: url(../_img/class/class_main_es_sp.png);
    }
    #class.theme-junior .page-header {
        background-image: url(../_img/class/class_main_jhs_sp.png);
    }
    #class.theme-senior .page-header {
        background-image: url(../_img/class/class_main_hs_sp.png);
    }
    #class.theme-private .page-header {
        background-image: url(../_img/class/class_main_pt_sp.png);
    }

    #class .page-header hgroup p {
        font-size:0.9em;
    }

    #class-info nav ul {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--gap-1);
    }

    .card-class .class-tag {
        min-width:100%;
    }

    /* ===== 合格実績 ===== */
    #results-of-examinations {
        padding-bottom: clamp(70px, calc(70px + 13.676vw), 95px);
        margin-bottom: clamp(60px, calc(60px + 3.676vw), 85px);
    }
    /* ===== クラス別 ===== */
    /*クラス分け共通*/
    .card-class  {
        margin-bottom: var(--space-2);
    }
    .card-class:last-of-type {
        margin-bottom:0;
        padding-bottom:0;
    }
    .slick-item .card-sec {
        max-width: 375px;
        padding-inline: 4%;
        gap: var(--gap-2);
    }
    .card-class .card-class--header {
        row-gap: var(--space-2);
        margin-bottom: var(--space-3);
    }
    .card-class .card-title {
        width: calc(100% + var(--padding));
        margin-left:calc(var(--padding) * -1);
        padding-left:var(--padding);
        justify-content: flex-start;
    }
    .card-class h3 {
        width: 100%;
        font-size: 1.4em;
        margin-right:var(--padding);
    }
    .card-class .card-class--header p {
        font-size: 16px;
    }
    .card-class dl {
        min-width: auto;
        font-size: 1rem;
    }
    .slick-prev, .slick-next {
        --position: -20px;
    }
    .slick-prev::before, .slick-next::before {
        color: var(--brand-glass-color);
    }


    /* ===== イベント情報 ===== */
    #event .width-limiter {
        padding-top: var(--pad-4);
    }
    
    #class #nav-for-customer {
        padding-inline: 4%;
    }
}