@charset "utf-8";

/* ページ内共通
----------------------------------------- */
:root {
    --red: #cb0009;
    --blue: #0031a1;
    --blue02: #0c4ea0;
    --brown: #97792f;
    --pink: #d43e64;
    --white_text_shade: 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9, 0 0 10px #fffef9;
}
body {
    counter-reset: secTtl ptnList ptnCont sptCont;
}
#lower_container {
    overflow: hidden;
    position: relative;
    padding-top: clamp(40px, 10.666vw, 50px);
    margin-top: 0;
}

/* FV
----------------------------------------- */
.first-view_container {
    background: linear-gradient(rgb(252 250 232) 0, #fff 110%);
    position: relative;
    overflow: hidden;
}
.first-view_container::before,
.first-view_container::after {
    position: absolute;
    content: "";
    display: block;
    width: 400px;
    height: 500px;
    top: 0;
    left: -20px;
    background-image: url(/koukousei/site_wp/wp-content/themes/site/images/2025pass_interview/S25_interview_bg_sakura01.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
.first-view_container::after {
    left: auto;
    right: -20px;
    background-image: url(/koukousei/site_wp/wp-content/themes/site/images/2025pass_interview/S25_interview_bg_sakura02.png);
}
.first-view_container h1,
.first-view {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.first-view_container h1 {
    font-size: clamp(2.3rem, 6.133vw, 3.4rem);
    color: var(--red);
    padding-top: 22px;
    text-shadow: var(--white_text_shade);
}
.first-view_container h1 span.main {
    text-indent: -1em;
    display: inline-block;
    line-height: 1.35;
    padding-left: 7px;
}
.first-view_container h1 span.sub {
    font-size: clamp(1.8rem, 4.8vw, 2.2rem);
    color: #181818;
    font-family: var(--fontFamily-serif-noto);
    display: block;
    line-height: 1.4;
    margin-bottom: 7px;
}
.first-view {
    grid-column-gap: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 10px auto 0;
}
.first-view_img {
    max-width: 385px;
    max-height: 260px;
    font-size: 0;
    position: relative;
}
.first-view_img::before,
.first-view_img::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 50px;
    height: 50px;
    background: url(/koukousei/site_wp/wp-content/themes/site/images/2025pass_interview/S25_interview_play.png) center / contain no-repeat;
    opacity: .9;
    pointer-events: none;
}
.first-view_img::after {
    top: 20px;
    left: 67px;
    z-index: 2;
    width: 130px;
    height: 36px;
    opacity: 1;
    background: url(/koukousei/site_wp/wp-content/themes/site/images/interview/h_moview.svg) center / 75% no-repeat, #fff;
}
.first-view_img img {
    width: 100%;
    border: 2px solid #cecbb0;
}
.first-view_prof {
    display: flex;
    flex-direction: column;
}
.first-view_prof01 {
    font-size: 2.7rem;
    display: inline-block;
    line-height: 1.2;
    padding: 11px 0px;
}
.first-view_prof01 .small01 {
    font-size: 1.8rem;
    display: block;
}
.first-view_prof01 .small02 {
    font-size: 2rem;
}
.first-view_prof02,
.first-view_prof03,
.first-view_prof04 {
    font-size: clamp(1.9rem, 5.066vw, 2.5rem);
    padding-top: 3px;
    font-weight: 600;
}
.category {
    font-size: clamp(1.45rem, 3.866vw, 1.8rem);
    font-weight: 800;
    color: #fff;
    background-color: var(--blue02);
    padding: 0 10px;
    display: inline-block;
    width: clamp(80px, 21.333vw, 100px);
    text-align: center;
    margin: 0 10px 3px 0;
}
@media screen and (max-width: 834px) {
    .first-view_container h1,
    .first-view {
        width: 85%;
    }
    .first-view_container h1 {
        padding-top: 15px;
    }
    .first-view_container::before {
        width: 60%;
        height: 70%;
        transform: rotate(-93deg);
        left: -16%;
        top: 10%;
    }
    .first-view_container::after {
        width: 60%;
        height: 75%;
    }
    .first-view {
        grid-template-columns: 1fr;
    }
    .first-view_img {
        width: 90%;
        margin: 0 auto;
    }
    .first-view_prof01,
    .first-view_prof01 .small01,
    .first-view_prof01 .small02 {
        font-size: 1.5rem;
        display: inline-block;
        text-align: center;
        font-weight: 500;
    }
    .first-view_prof01 {
        padding: 3px 0 12px;
    }
    .first-view_prof02,
    .first-view_prof03,
    .first-view_prof04 {
        padding-top: 0;
    }
}
@media screen and (max-width: 600px) {
    .first-view_img::before {
        width: 45px;
        height: 45px;
    }
}

/* インタビュー欄
----------------------------------------- */
.interview_wrap {
    max-width: 750px;
    margin: 0 auto;
}
#lower_container .interview_wrap p {
    font-size: clamp(1.5rem, 4vw, 1.7rem);
    line-height: 1.8;
    font-family: var(--fontFamily-sans);
    font-weight: 500;
}
.interview {
    margin-bottom: 50px;
}
.interview h3 {
    font-weight: 900;
    font-size: 1.7rem;
    line-height: 1.7;
}
.interview h3.mega {
    font-family: var(--fontFamily-serif-noto);
    margin-bottom: 40px;
    position: relative;
    text-indent: -0.1em;
}
.interview div {
    padding-left: 48px;
    position: relative;
}
.interview span.q,
.interview span.a {
    position: absolute;
    left: 0;
    top: -13px;
    color: #04009b;
    font-size: clamp(2.8rem, 7.466vw, 3.4rem);
    display: inline-block;
    line-height: 1.2;
    font-weight: 800;
}
.interview span.q {
    font-family: var(--fontFamily-serif-noto);
}
.interview span.a {
    color: var(--red);
}
@media screen and (max-width: 834px) {
    .interview_wrap {
        width: 85%;
    }
    .interview {
        padding-left: 45px;
    }
}
@media screen and (max-width: 600px) {
    .interview {
        padding-left: 0;
    }
    .interview h3.mega {
        margin-bottom: 20px;
    }
    .interview h3.mega::before, .interview h3.stu::before {
        top: 5px;
        left: -15px;
    }
    .interview div {
        padding-left: 39px;
    }
    .interview span.q,
    .interview span.a {
        top: -8px;
    }
}

/* 体験記用紙欄
----------------------------------------- */
.taikenki-paper_wrap {
    background: linear-gradient(0.25turn, #fffae7, #fff, #fffae7);
    padding-bottom: 30px;
}
.taikenki-paper_wrap h2 {
    font-size: clamp(2.1rem, 5.6vw, 3.8rem);
    font-family: var(--fontFamily-serif-noto);
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    position: relative;
    padding-top: clamp(14px, 3.733vw, 20px);
}
.taikenki-paper_wrap h2::before,
.taikenki-paper_wrap h2::after {
    position: absolute;
    content: "";
    display: block;
    width: 400px;
    height: 500px;
    top: 0;
    left: 0;
    background-image: url(/koukousei/site_wp/wp-content/themes/site/images/2025pass_interview/S25_interview_bg_sakura01.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
.taikenki-paper_wrap h2::after {
    left: auto;
    right: 0;
    background-image: url(/koukousei/site_wp/wp-content/themes/site/images/2025pass_interview/S25_interview_bg_sakura02.png);
}
.taikenki-paper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    margin: 20px auto;
    width: fit-content;
}
.taikenki-paper_cont {
    border: 1px solid var(--pink);
    background-color: #fff;
    padding: 1px 15px 0 10px;
    display: flex;
    width: 450px;
    max-width: 450px;
    position: relative;
}
.taikenki-paper_cont::after {
    position: absolute;
    content: "";
    display: block;
    width: 126px;
    height: 145px;
    top: 0;
    right: 0;
    background-image: url(/koukousei/site_wp/wp-content/themes/site/images/2025pass_interview/S25_interview_stump.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
.taikenki-paper_cont .img {
    font-size: 0;
}
.taikenki-paper_cont .img img.sample {
    max-width: 195px;
}
.taikenki-paper_cont .img button {
    display: inline-block;
    max-width: 195px;
    height: fit-content;
    background-color: #fff;
}
.taikenki-paper_cont .img button img {
    width: 100%;
}
.taikenki-paper_cont .prof {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
}
.taikenki-paper_cont .prof .category {
    background-color: var(--blue02);
    font-size: clamp(1.2rem, 3.2vw, 1.4rem);
    width: clamp(65px, 17.33vw, 75px);
    padding: 0;
    display: block;
    line-height: 1.5;
}
.taikenki-paper_prof01 {
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    line-height: 1;
    margin-bottom: 20px;
}
.taikenki-paper_prof01 .small01 {
    display: block;
    font-size: 1.4rem;
}
.taikenki-paper_prof02,
.taikenki-paper_prof03,
.taikenki-paper_prof04 {
    font-size: clamp(1.7rem, 4.533vw, 2.2rem);
    font-weight: 600;
    line-height: 1.2;
}
.taikenki-paper_prof02,
.taikenki-paper_prof03 {
    margin-bottom: 10px;
}
@media screen and (max-width: 834px) {
    .taikenki-paper {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .taikenki-paper_wrap h2::before,
    .taikenki-paper_wrap h2::after {
        width: 49vw;
        height: 75vw;
    }
    .taikenki-paper_wrap h2::before {
        left: -36%;
    }
    .taikenki-paper_wrap h2::after {
        right: -35%;
    }
    .taikenki-paper_cont {
        width: 90vw;
        padding: 1px 0 0;
    }
    .taikenki-paper_cont::after {
        width: 32%;
        height: 46%;
    }
    .taikenki-paper_cont .prof {
        padding: 10px 3px 10px 7px;
    }
    .taikenki-paper_cont .prof .category {
        line-height: 1.4;
        padding-top: 2px;
    }
    .taikenki-paper_cont .img {
        width: 48%;
    }
}

/* モーダルを開くボタン */
.modal-open{
  cursor: pointer;
}
.modal-open:hover {
    opacity: 0.7;
}

/* モーダルと背景の指定 */
.modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0,0,0,50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  z-index: 1;
}

/* モーダルの擬似要素の指定 */
.modal:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  margin-left: -0.2em;
}

/* クラスが追加された時の指定 */
.modal.is-active{
  opacity: 1;
  visibility: visible;
}

/* モーダル内側の指定 */
.modal-container {
    top: -15px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 750px;
    width: 90%;
    height: 83%;
    overflow: scroll;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
    .modal-container {
        top: 0px;
        height: 82%;
    }
}

/* モーダルを閉じるボタンの指定 */
.modal-close{
  font-size: 2.6rem;
  line-height: 1.3;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 7px;
  right: 9px;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
}

/* モーダルのコンテンツ部分の指定 */
.modal-content{
  background: #fff;
  text-align: left;
  line-height: 1.8;
  padding: 0;
  max-width: 890px !important;
  width: 100% !important;
  height: fit-content !important;
}
.modal-content img {
    width: 100%;
}

/* モーダルのコンテンツ部分のテキストの指定 */
.modal-content p{
  margin: 1em 0;
}

@media screen and (max-width: 834px) {
    .modal-container {
        top: 0;
    }
}
@media screen and (max-width: 600px) {
    .modal-content {
        padding: 0;
    }
    .modal {
        padding: 40px 0;
    }
    .modal-container {
        top: 3%;
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {
    .modal-container {
        height: fit-content;
        top: 0;
    }
}