@import url('contact.css');

/* ===== 全体の調整 ===== */
/* 本の部分 */
.book-base {
    --book-h: 180px;
    color: var(--fc-black);
    background-color: var(--color-bg-light);
    z-index: 0;
    margin-top: -1px;
    margin-bottom:0;
}
.book-base::before {
    top: calc(-1 * var(--book-h) + 15px);
    z-index: -1;
}
.section-book--blue::after { background-position: center bottom; }
.book-base.section-book--blue::after,
.book-base.section-book--lightblue::after { bottom: -15px; }
.book-base.section-book-mask--white { background-color: var(--color-white);  }

#recruit main :where(figure, ul, ol) { margin-left: 0; }

/* =============================
  // #recruit
  // #mv メインビュー
  =============================*/
#mv {
    max-height: calc(100vh - 75px);
    background-image: url(../_img/recruit/recruit_mv.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
}
#mv > div { margin-top: 0; }
#mv .mv-image { height: inherit; }
#mv .mv-image img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
#mv div:has(h2) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--pad-6);
}
#mv h2 {
    color: var(--color-white);
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}
#mv h2.character-in i {
    font-style:italic !important;
}
#mv h2 .tab { display: none; }

/* =============================
  // #recruit
  // #message メッセージ
  =============================*/
#message {
    --gap:var(--gap-6);
    grid-template-columns: 1fr clamp(250px, 30vw, 342px);
    padding-block: var(--pad-9);
}
#message h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    color: var(--color-bg-light);
    text-transform: uppercase;
    font-size: 6.84em;
    line-height: 1;
    letter-spacing: 0.1em;
    position: absolute;
    top: -60px;
    left: -40px;
}
#message p {
    text-align: justify;
    line-height: 2.16;
    letter-spacing: 0.05em;
    margin-top: var(--space-3);
}
#message p:first-of-type { margin-top: var(--space-1); }
#message p.text-blue {
    font-size: 1.16em;
    color: var(--main-color);
    line-height: 2.05;
    text-align: left;
    font-weight:bold;
}
#message p:last-of-type { font-size: 15px; }
#message p img { padding-inline: 10px; }
#message figure {
    max-width: 342px;
    width: inherit;
    height: 478px;
}

/* =============================
  // #recruit
  // #analyze 数字で見る誠泉塾
  =============================*/
.book-base:has(#analyze).section-book--blue {
    color: var(--color-white);
    background-color: var(--main-color);
    padding-bottom: var(--pad-8);
    margin-top: var(--space-3);
}
#analyze > div { margin-top: var(--space-5); }
#analyze .card {
    color: var(--main-color);
    letter-spacing: 0.075em;
    text-align: center;
    box-shadow: none;
    border: 1.7px solid var(--main-color);
    padding: var(--pad-4) 0;
}
#analyze .card h4 { font-size: 1.16em; }
#analyze .card p { line-height: 1; }
#analyze .card .number {
    font-size: 3.73em;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
}
#analyze .card .unit {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-left: .2em;
}

/* =============================
  // #recruit
  // #interview 社員インタビュー
  =============================*/
#interview { padding-block: var(--pad-9);}
#interview .interview-list { 
    --gap: var(--gap-4);
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-block: var(--space-7) var(--space-5);
}
#interview .interview-list li {
    padding: var(--padding);
    transition:var(--transition);
    border-radius: calc(var(--radius) + (var(--padding) / 2));
}
#interview .interview-list li:hover {
    cursor: pointer;
    background-color: #d1e9f9;
}
#interview .interview-list figure {
    border-radius: var(--radius);
    overflow: hidden;
    width:100%;
    aspect-ratio:1;
}
#interview .interview-list p:first-of-type {
    color:var(--main-color);
}
#interview .interview-list .teacher-comment {
    font-size: 1.05em;
    line-height: 1.85;
}
#interview .interview-list :where(.teacher-name, .teacher-joining) {
    color: var(--fc-black);
    font-size: 15px;
    line-height: 1;
}
#interview .interview-list .teacher-name { margin-top: var(--space-2); }
#interview .interview-list .teacher-name > span {
    font-size: 1.47em;
    margin-left: 0.5em;
}
.teacher-data { font-weight: bold; }
.teacher-data.grid.grid-column-2 { grid-template-columns: 303px 1fr; }
.teacher-data img { object-position: top center;}
.teacher-data .teacher-name {
    font-size: 0.79em;
}
.teacher-data .teacher-name span {
    font-size: 1.47em;
    padding-inline:5px;
}
.teacher-data > section > section > h3 {
    display: inline-flex;
    align-items: center;
    text-align: left !important;
    min-width: 270px;
    font-size: 0.95em !important;
    line-height: 1.8;
    color: var(--color-white);
    background-color: var(--main-color);
    padding: 5px var(--pad-1);
}
.teacher-data > section > section > h3::after { display: none; }
.teacher-data > section > section > h3 + p {
    letter-spacing: 0.05em;
    line-height: 1.94;
}
/* =============================
  // #recruit
  // #recruit-type 募集要項
  =============================*/
#recruit-type .buttons {
    text-align: center; 
    margin-top: var(--space-4);
}
#recruit-type .buttons .button {
    --btn-w: 270px;
    --btn-h: 50px;
    width: 100%;
    font-size: 17px;
    color: var(--main-color);
    justify-content: center;
    margin-top: var(--pad-1);
}
#recruit-type .buttons .button::after {
    width: 1em;
    height: 1em;
    font-size: 1.2em;
    position: absolute;    
    left: unset;
    right: 8px;
    bottom: 0;
    top: 0;
    margin: auto;
    transform: rotate(90deg); 
}
#recruit-type .buttons .button.active::after,
#recruit-type .buttons .button:hover::after {
    right: 18px;
}
#recruit-type  .js-recruit .button.active,
#recruit-type  .js-recruit .button:hover {
    color: var(--color-white);
    background-color: var(--main-color);
}
#recruit-type .js-recruit .button.active::after,
#recruit-type  .js-recruit .button:hover::after {
    color: var(--color-white);
    transform: rotate(-90deg);
}

#recruit-type .recruit-container {
    max-width: 850px;
    margin-inline: auto;
    margin-top: var(--space-6);
}
#recruit-type .recruit-container .grid.grid-column-2 {
    grid-template-columns: 140px 1fr;
    font-weight: bold;
    gap: 0;
}
#recruit-type .recruit-container .grid.grid-column-2 > :where(dt, dd) {
    border-bottom: 1px dashed #d1d1d1;
    padding-block: var(--pad-4);
}
#recruit-type .recruit-container .grid.grid-column-2 > dt {
    color: var(--main-color);
    font-size: 0.95em;
    letter-spacing: 0.05em;
    padding-inline: var(--pad-1);
}
#recruit-type .recruit-container .grid.grid-column-2 > dd {
    padding-inline: var(--pad-2) var(--pad-1);
}


#recruit-type .recruit-container.show { display: block; }
#recruit-type .recruit-container { display: none; }

/* =============================
  // #recruit
  // #flow 選考の流れ
  =============================*/
#flow ol { margin: 0; }
#flow ol.step-flow > li {
      --gap: var(--gap-3);
      text-align: left;
      letter-spacing: 0.05em;
      border-radius: var(--radius);
      padding-block:var(--pad-3);
      padding-inline: var(--pad-4) var(--pad-3);
      margin-top: var(--space-4);
      background-color: var(--color-bg-light);
  }
#flow ol > li:not(:last-child)::after {
      content: '';
      display: block;
      --size: 0px;
      width: var(--size);
      height: var(--size);
      border: 20px solid transparent;
      border-top-color: #76a1ce;
      border-left-width: 30px;
      border-right-width: 30px;
      position: absolute;
      bottom: -68px;
      left: 0;
      right: 0;
      margin: auto;
  }
#flow ol li .enterflow-title { color: var(--brand-primary);}
#flow ol li .enterflow-title .card-tag {
      --tag-h: 39px;    
      display: inline-flex;
      justify-content: center;
      align-items: center;
      position: static;
      transform: none;
      font-size: 0.80em;
      text-transform: uppercase;
      height: var(--tag-h);
      min-width: 103px;
      background-color: var(--brand-primary);
      padding-inline: 1em;
      margin-right: 1em;
  }
#flow ol li .enterflow-title .card-tag span {
      font-size: 1.2em;
      padding-left: 5px;
  }
#flow .step {
      display: grid;
      grid-template-columns: 1fr 232px;
      gap: 0;
      column-gap: clamp( 25px, calc(25px + 60 * ((100vw - 520px) / 680)), 85px );
  }
#flow .step h3 { order: 0; }
#flow .step :where(p, div) { order: 1; }
#flow .step figure {
    aspect-ratio: 232 / 174; 
    grid-row: span 2;
}
#flow .step figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#flow .step.step--3 > div { margin-top: var(--space-2);}
#flow .step.step--3 > div span { 
    color: var(--main-color);
    padding-right: .5em;
    font-weight: bold;
}

/* =============================
  // #recruit
  // #Entry
=============================*/
#entry {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    background-image: url(../_img/recruit/closing.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    margin-bottom: var(--space-5);
}
#entry .button.btn-square {
    max-width: unset;
    max-height: unset;
    width: 564px;
    height: 164px;
    min-width: 300px;
    color: var(--color-white);
    font-size: 2.21em;
    justify-content: center;
    background-color: var(--color-red);
    border: 0;
    border-radius: var(--radius);
    text-transform: uppercase;
}
#entry .button.btn-square::after {
    color: var(--color-white);
    font-size: .6em;
    position: absolute;
    left: unset;
    right: 25px;
}


@media (min-width: 1200.1px) {
    .book-base { 
        --book-h: 200px;
        margin-bottom: 0; 
    }
    .book-base::before,
    .book-base::after {
        max-width: 1500px;
        left: 0;
        right: 0;
        margin-inline: auto;
    }
}
@media (min-width: 662px) {
    /* =============================
    // #recruit
    // #interview 社員インタビュー min-662
    =============================*/
    .teacher-data figure {
        max-width: 303px;
        max-height: 504.8px;
        aspect-ratio: 303 / 505;
    }
}
@media (max-width: 1030px) {
    /* =============================
    // #recruit
    // #analyze 数字で見る誠泉塾 1030
    =============================*/
    #analyze > div { --gap: var(--gap-3); }

    /* =============================
    // #recruit
    // #flow 選考の流れ 1030px
    =============================*/
    #flow .grid.grid-column-2 {
        grid-template-columns: 1fr;
    }
    #flow .card h4 { order: 0; }
    #flow .card p { order: 2; }
    #flow .card > div {
        grid-row: span 3;
        order: 1;
    }
}

@media (max-width: 960px) {
    /* =============================
    // #recruit
    // #mv メインビュー 960
    =============================*/
    #mv .mv-image img { object-fit: contain; }
    #mv br.tab { display: block; }
}
@media (max-width: 920px) {
    #recruit section { font-size: 18px; }

    /* =============================
    // #recruit
    // #mv メインビュー 960
    =============================*/
    #mv div:has(h2) { bottom: var(--pad-3); }
    #mv h2 { font-size: 1.6em; }
}
    
@media (max-width: 810px) {
    /* =============================
    // #recruit
    // #analyze 数字で見る誠泉塾 810
    =============================*/
    #analyze > div.grid.grid-column-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    /* =============================
    // #recruit
    // #mv メインビュー 768
    =============================*/
    #mv .mv-image img { object-fit: cover; }

    /* =============================
    // #recruit
    // #message メッセージ 768
    =============================*/
    #message { grid-template-columns: 1fr; }
    #message figure { margin-left: auto; }

    /* =============================
    // #recruit
    // #interview 社員インタビュー 768
    =============================*/
    .teacher-data.grid.grid-column-2 { grid-template-columns: 200px 1fr; }


    /* =============================
    // #recruit
    // #flow 選考の流れ 768
    =============================*/
    #flow .step { gap: var(--gap);}
    #flow .card { grid-template-columns: 1fr; }
    #flow .card h4 { 
        align-items: center;
        order: unset; 
    }
    #flow .card .card-tag { margin-bottom: 0; }
    #flow .card > div {
        width: 100%;
        line-height: 1.8;
        grid-row: unset;
        order: unset;
        margin-inline: auto;
    }
    #flow .card p { order: unset; }

    /* =============================
    // #recruit
    // #Entry 768
    =============================*/
    #entry .button.btn-square {
        max-width: 65vw;
    }
}
@media (max-width: 660px) {
    /* =============================
    // #recruit
    // #interview 社員インタビュー 660
    =============================*/
    .teacher-data.grid.grid-column-2 { grid-template-columns: 1fr; }
    .teacher-data > section > section > h3 + p { font-size: 1rem; }
}
@media (max-width: 600px) {
    /* =============================
    // #recruit
    // #message メッセージ
    =============================*/
    #message h3 { font-size: clamp(4.84em, 5vw + 2em, 6.84em); }

    /* =============================
    // #recruit
    // #recruit-type 募集要項 600
    =============================*/
    #recruit-type .buttons .button { --btn-w: 200px; }

}
@media (max-width: 545px) {
    /* =============================
    // #recruit
    // #mv メインビュー545
    =============================*/
    #mv h2 { font-size: 1.06em; }
}
@media (max-width: 533px) {

    /* =============================
    // #recruit
    // #analyze 数字で見る誠泉塾 533
    =============================*/
    #analyze > div.grid.grid-column-3 { grid-template-columns: repeat(1, 1fr); }
}
@media (max-width: 519.9px) {/* 520じゃ微妙なところがあったため採用 */
    #recruit section { font-size: 1rem; }

    /* =============================
    // #recruit
    // #analyze 数字で見る誠泉塾 520
    =============================*/
    #analyze .card { padding: var(--pad-2) 0; }
    #analyze .card p { font-size: 14px;}
    
    /* =============================
    // #recruit
    // #interview 社員インタビュー 520
    =============================*/
    #interview { padding-top: var(--pad-6); }
    #interview .interview-list { margin-block: var(--space-5) var(--space-3); }
    #interview .interview-list.grid-column-2 {
        grid-template-columns: 1fr;
    }

    /*ダイアログ*/
    dialog {
        max-height: calc(100vh - var(--header-offset));
        top: var(--header-offset);
        bottom: unset;
    }
    dialog button.close {
        top: 15px;
        right: 15px;
    }

    /* =============================
    // #recruit
    // #recruit-type 募集要項 520
    =============================*/
    #recruit-type .recruit-container .grid.grid-column-2 > :where(dt, dd) { padding-block: var(--pad-2); }
    #recruit-type .recruit-container .grid.grid-column-2 { grid-template-columns: auto; }
    #recruit-type .recruit-container .grid.grid-column-2 > dt { 
        border-bottom: 0;
        padding-bottom: 0;
    }
    #recruit-type .recruit-container .grid.grid-column-2 > dd { font-size: 14px; }

    
    /* =============================
    // #recruit
    // #flow 選考の流れ 520
    =============================*/
    #flow .card { padding: var(--pad-3); }
    #flow .card .button {
        width: 277px;
        padding: var(--pad-2); 
        font-size: 14px;
    }
    #flow .step.step--3 > div { margin-top: 0;}
    #flow ol li .enterflow-title { text-align: center; }
    #flow ol li .enterflow-title .card-tag {
        display: block;
        margin-right: 0;
        margin-bottom: var(--space-1);
    }

    /* =============================
    // #recruit
    // #Entry 520
    =============================*/
    #entry .button.btn-square {
        width: 100%;
        font-size: 1.9em;
        text-indent: -1em;
    }
    #entry .button.btn-square::after { font-size: .9em; }
}