// <weight>: Use a value from 200 to 900
// <uniquifier>: Use a unique and descriptive class name

.noto-serif-jp-<uniquifier> {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

body {
    background-color: #f1efe4;
    margin: 0;
}

p {
    font-size: 1.4em;
    line-height: 1.6;
}

.l-pageBody {
    background: none;
}

.l-main {
    font-family: "Noto Serif JP", serif;
    background-color: #f1efe4 !important;
    background-image: url(/files/user/img/careers/topinterview/bg_pc.jpg?v=1773296258) !important;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
}

/* --- アニメーション定義 --- */
@keyframes imgFadeInFocus { to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes bgExtend { to { width: 100%; } }
@keyframes simpleFade { to { opacity: 1; } }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes barSlideIn { to { transform: scaleX(1); } }

/* --- 1. メインビジュアル --- */
.hero-section {
    width: 100%;
    position: relative;
    padding-bottom: 6em;
}
.hero-visual {
    width: 100%;
    overflow: hidden;
}
.main-img {
    width: 100%;
    display: block;
    opacity: 0;
    filter: blur(20px);
    transform: scale(1.05);
    animation: imgFadeInFocus 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.hero-content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
    margin-top: -14em; 
    position: relative;
    z-index: 10;
}
.meta-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: #fff;
    opacity: 0;
    animation: simpleFade 0.8s ease forwards 0.8s;
}
.tag {
    border: 2px solid #fff;
    padding: 0 8px;
    font-size: 2em;
    font-weight: 700;
}
.sub-title {
    font-size: 2.2em;
    font-weight: 700;
}
.title-row {
    position: relative;
    width: fit-content;
    overflow: hidden;
    margin-bottom: 10px;
}
.title-bg-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    height: auto;
    background-image: url('/files/user/img/careers/topinterview/title_bg.png');
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.title-text {
    display: block;
    position: relative;
    z-index: 2;
    font-size: 5em;
    line-height: 1.2;
    opacity: 0;
    background: linear-gradient(90deg, #81d632, #4ec7f4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.row1 .title-bg-box { animation: bgExtend 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.6s; }
.row1 .title-text { animation: simpleFade 0.5s ease forwards 1.2s; }
.row2 .title-bg-box { animation: bgExtend 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.7s; }
.row2 .title-text { animation: simpleFade 0.5s ease forwards 1.4s; }


/* --- 2. ナビゲーション --- */
.nav-wrapper {
    position: relative;
    width: 400px;
    margin: 0 auto;
}
.nav-container {
    position: relative;
    display: flex;
    padding-bottom: 8px;
    justify-content: center; 
}
.nav-link {
    font-size: 1.5em;
    font-weight: 900;
    text-decoration: none !important;
    color: #333;
    padding: 10px 40px;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}
.nav-link:hover {
    color: #000; text-decoration: none !important;
}
.base-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #d1cdc2;
    z-index: 1;
}
.active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 2px;
    background-color: #000;
    z-index: 3;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}
.nav-link:nth-child(1):hover ~ .active-bar {
    opacity: 1;
    transform: translateX(0);
}
.nav-link:nth-child(2):hover ~ .active-bar {
    opacity: 1;
    transform: translateX(100%);
}
.lead {
    margin-top: 5em;
}

.lead p {
    width: 85%;
    max-width: 1400px;
    margin: 0 auto;
}


/* --- 3. セクション共通（アニメーション同期） --- */
.video-section, .article-section {
    width: 100%;
    margin-top: 100px;
    display: flex;
    justify-content: center;
}
.video-container, .article-container {
    width: 80%;
    max-width: 1400px;
}
.video-header, .article-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}
.video-bar, .article-bar {
    width: 100px;
    height: 8px;
    background: linear-gradient(90deg, #81d632, #4ec7f4);
    transform: scaleX(0);
    transform-origin: left;
    view-timeline: --section block;
    animation: barSlideIn linear forwards; animation-timeline: --section; animation-range: entry 10% contain 30%;
}
.video-title, .article-title {
    font-size: 4em;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-10px);
    view-timeline: --section block;
    animation: simpleFade linear forwards; animation-timeline: --section; animation-range: entry 15% contain 35%;
}
.video-content {
    opacity: 0;
    view-timeline: --section block;
    animation: fadeInUp linear forwards;
    animation-timeline: --section;
    animation-range: entry 10% contain 35%;
    width: 80%;
    margin: 0 auto;
}
.iframe-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 20px;
    overflow: hidden;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- スクロール検知と実行アニメーション --- */

/* 表示された時に適用するクラス（またはCSSのみのスクロール検知） */
@keyframes slideInBar {
    to { transform: scaleX(1); }
}
@keyframes fadeInText {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUpVideo {
    to { opacity: 1; transform: translateY(0); }
}

/* 最新ブラウザ用：JavaScriptなしでスクロール検知 
  ※検知範囲に入ると一度だけ実行
*/
.video-container, .article-container {
    view-timeline-name: --video-scroll;
    view-timeline-axis: block;
}

.video-bar, .article-bar {
    animation: slideInBar 0.6s ease forwards;
    animation-timeline: --video-scroll;
    animation-range: entry 10% contain 20%;
}

.video-title, .article-title {
    animation: fadeInText 0.6s ease forwards;
    animation-timeline: --video-scroll;
    animation-range: entry 15% contain 25%;
}

.video-content, .article-content {
    animation: fadeInUpVideo 0.8s ease forwards;
    animation-timeline: --video-scroll;
    animation-range: entry 15% contain 30%;
}

/* --- 4. 記事詳細 --- */
.article-prof {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prof-text {
    text-align: center;
    font-size: 2em;
    font-weight: 500;
}
.prof-text span {
    font-size: 0.6em;
    font-weight: 300;
}
.article-prof figure {
    width: 70%;
}
.article-paragraph {
    margin-top: 100px;
    opacity: 0;
    view-timeline: --para block;
    animation: fadeInUp linear forwards; animation-timeline: --para; animation-range: entry 5% contain 20%;
}
.article-paragraph h3 {
    display: inline-block;
    font-size: 1.8em;
    border-bottom: #c8a51b 6px solid; 
    margin-bottom: 60px;
}
.article-image {
    width: 80%;
    margin: 0 auto;
    margin-top: 60px;
}
.article-image a {
    color: #000;
}
.article-paragraph p a {
    text-decoration: underline;
    color: #000;
}

/* --- 5. 関連リンク --- */
.related-links {
    margin: 200px 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.links-title {
    display: inline-block;
    font-size: 2.2em;
    font-weight: 500;
    border-bottom: 6px solid #000;
    border-image: linear-gradient(90deg, #81d632, #4ec7f4) 1;
    margin-bottom: 40px;
}
.links-wrapper {
    text-align: center;
    max-width: 1000px;
    width: 100%;
    padding: 100px 50px;
    background-color: #e4e1d0;
    background-image: url('/files/user/img/careers/topinterview/links_bg_pc.jpg');
    background-position: bottom;
    background-size: 100%;
    border-radius: 40px;
}
.links-list {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
}
.links-students {
        width: 75%;
}
.links-students .button-list {
    display: flex;
    justify-content: space-around;
    gap: 15px;
}
.button-link {
    width: 30%;
    background-color: #c8a51b;
    height: 100px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.button-link:hover {
    text-decoration: none;
    transform: scale(1.1);
    color: #fff;
}
.links-students p, .links-careers p {
    margin-bottom: 20px;
    font-size: 1.7em;
    font-weight: 500;
    text-align: left;
}
.links-careers {
        width: 25%;
}
.links-careers .button-link {
    width: 100%;
}




/* --- レスポンシブ (1100px以下) --- */
@media screen and (max-width: 1400px) {
    .hero-content {
        padding: 0 20px;
        width: 80%;
        margin-top: -12.5em; /* ズレ幅調整 */
    }
    .title-text {
        font-size: 3em;
        padding: 8px;
    }
    .meta-info {
        gap: 10px;
    }
    .hero-section {
        padding-bottom: 4em;
    }
    .related-links {
        width: 80%;
        margin: 0 auto;
    }
    .links-wrapper {
        margin: 100px 0 200px 0;
    }
    .links-list {
        display: block;
    }
    .links-students .button-list {
        display: block;
    }
    .links-students, .links-students .button-link, .links-careers {
        width: 100%;
        margin-bottom: 20px;
    }
    .pc_br {
        display: none;
    }
}
/* --- レスポンシブ (768px以下) --- */
@media screen and (max-width: 768px) {
    p {
        font-size: 1.1em;
    }
    .hero-content {
        padding: 0 20px;
        width: 90%;
        margin-top: -8em; /* ズレ幅調整 */
    }
    .title-text {
        font-size: 1.6em;
    }
    .tag {
        font-size: 1.3em;
    }
    .sub-title {
        font-size: 1.4em;
    }
    .meta-info {
        gap: 10px;
    }
    .hero-section {
        padding-bottom: 3em;
    }
    .nav-link {
        font-size: 1.1em;
    }
    .video-container, .article-container { width: 90%; }
    .video-title, .article-title { font-size: 2.2em; }
    .video-bar, .article-bar { width: 50px; }
    .prof-text {
        font-size: 1.4em;
        font-weight: 500;
    }
    .prof-text span {
        font-size: 0.5em;
        font-weight: 300;
    }
    .article-prof figure {
        width: 70%;
    }
    .article-paragraph h3 {
        font-size: 1.4em;
    }
    .links-title {
        font-size: 1.6em;
    }
    .links-students p, .links-careers p {
        font-size: 1.4em;
        font-weight: 600;
    }
}