/* ==========================================================================
   学科トップページ (page-department.php)
   ========================================================================== */

/* 背景：グラデーション画像を使わず白背景 */
[data-pagename="course/artist"] #gradient-bg-img,
[data-pagename="course/soundcreator"] #gradient-bg-img,
[data-pagename="course/staff"] #gradient-bg-img,
[data-pagename="course/tuning"] #gradient-bg-img,
[data-pagename="course/repair"] #gradient-bg-img,
[data-pagename="course/craft"] #gradient-bg-img {
    background-image: none;
    background-color: #fff;
}

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */
.l-department-mv {
    position: relative;
    width: 100%;
    height: 372px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* PC 背景画像 */
.l-department-mv[data-department="artist"]      { background-image: url('../../img/hero-artists.webp'); }
.l-department-mv[data-department="soundcreator"]{ background-image: url('../../img/hero-soundcreator.webp'); }
.l-department-mv[data-department="staff"]       { background-image: url('../../img/hero-staff.webp'); }
.l-department-mv[data-department="tuning"]      { background-image: url('../../img/hero-tuning.webp'); }
.l-department-mv[data-department="repair"]      { background-image: url('../../img/hero-repair.webp'); }
.l-department-mv[data-department="craft"]       { background-image: url('../../img/hero-craft.webp'); }

/* --------------------------------------------------------------------------
   ヒーロー（新デザイン）: CSSグラデーションアニメーション背景 + 人物画像のレイヤー構成
   mv-dept-{slug}.png が揃っている学科のみ適用
   -------------------------------------------------------------------------- */
@property --mv-color-1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --mv-color-2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
@property --mv-color-3 { syntax: '<color>'; inherits: false; initial-value: transparent; }

.l-department-mv.has-mv-layers {
    background-image: none !important;
    overflow: hidden;
}

.l-department-mv .department-mv-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 372px;
    background-image:
        radial-gradient(circle at 80% 20%, var(--mv-color-1) 0%, transparent 35%),
        radial-gradient(circle at 40% 60%, var(--mv-color-2) 0%, transparent 40%),
        radial-gradient(circle at 90% 70%, var(--mv-color-3) 0%, transparent 20%);
    background-size: 300% 150%;
    background-repeat: no-repeat;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    z-index: 0;
}

.l-department-mv .department-mv-object {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1440px;
    max-width: none;
    transform: translateX(-50%);
    z-index: 1;
}

.l-department-mv.has-mv-layers .department-mv-inner {
    position: relative;
    z-index: 2;
}

/* 学科別: ベースカラー + グラデーションの色をアニメーションさせるkeyframe
   アニメーションの方法は共通、色だけを学科ごとに@keyframesで切り替える */
.l-department-mv[data-department="artist"] .department-mv-bg {
    background-color: #5da0eb;
    animation-name: departmentMvBg-artist;
}

@keyframes departmentMvBg-artist {
    0% {
        --mv-color-1: rgba(65, 105, 225, 0.8);
        --mv-color-2: rgba(147, 112, 219, 0.8);
        --mv-color-3: rgba(0, 206, 209, 0.6);
        background-position: 0% 0%, 50% 50%, 100% 100%;
    }
    33% {
        --mv-color-1: rgba(30, 144, 255, 0.8);
        --mv-color-2: rgba(106, 90, 205, 0.8);
        --mv-color-3: rgba(135, 206, 250, 0.7);
        background-position: 100% 0%, 0% 50%, 50% 100%;
    }
    66% {
        --mv-color-1: rgba(123, 104, 238, 0.8);
        --mv-color-2: rgba(72, 61, 139, 0.7);
        --mv-color-3: rgba(72, 209, 204, 0.7);
        background-position: 50% 0%, 100% 100%, 0% 50%;
    }
    100% {
        --mv-color-1: rgba(65, 105, 225, 0.8);
        --mv-color-2: rgba(147, 112, 219, 0.8);
        --mv-color-3: rgba(0, 206, 209, 0.6);
        background-position: 0% 0%, 50% 50%, 100% 100%;
    }
}

.l-department-mv[data-department="soundcreator"] .department-mv-bg {
    background-color: #00b4d8;
    animation-name: departmentMvBg-soundcreator;
}

@keyframes departmentMvBg-soundcreator {
    0% {
        --mv-color-1: rgba(0, 255, 255, 0.7);
        --mv-color-2: rgba(152, 255, 212, 0.6);
        --mv-color-3: rgba(0, 191, 255, 0.6);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
    33% {
        --mv-color-1: rgba(0, 230, 240, 0.7);
        --mv-color-2: rgba(180, 255, 180, 0.6);
        --mv-color-3: rgba(0, 255, 200, 0.6);
        background-position: 80% 30%, 20% 50%, 40% 20%;
    }
    66% {
        --mv-color-1: rgba(100, 255, 210, 0.7);
        --mv-color-2: rgba(0, 180, 216, 0.7);
        --mv-color-3: rgba(200, 255, 255, 0.7);
        background-position: 40% 50%, 70% 20%, 10% 70%;
    }
    100% {
        --mv-color-1: rgba(0, 255, 255, 0.7);
        --mv-color-2: rgba(152, 255, 212, 0.6);
        --mv-color-3: rgba(0, 191, 255, 0.6);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
}

.l-department-mv[data-department="repair"] .department-mv-bg {
    background-color: #7209b7;
    animation-name: departmentMvBg-repair;
}

@keyframes departmentMvBg-repair {
    0% {
        --mv-color-1: rgba(157, 78, 221, 0.8);
        --mv-color-2: rgba(247, 37, 133, 0.7);
        --mv-color-3: rgba(255, 0, 255, 0.7);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
    33% {
        --mv-color-1: rgba(189, 93, 233, 0.8);
        --mv-color-2: rgba(255, 105, 180, 0.7);
        --mv-color-3: rgba(147, 112, 219, 0.7);
        background-position: 80% 30%, 20% 50%, 40% 20%;
    }
    66% {
        --mv-color-1: rgba(123, 104, 238, 0.8);
        --mv-color-2: rgba(220, 20, 60, 0.7);
        --mv-color-3: rgba(255, 192, 203, 0.7);
        background-position: 40% 50%, 70% 20%, 10% 70%;
    }
    100% {
        --mv-color-1: rgba(157, 78, 221, 0.8);
        --mv-color-2: rgba(247, 37, 133, 0.7);
        --mv-color-3: rgba(255, 0, 255, 0.7);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
}

.l-department-mv[data-department="staff"] .department-mv-bg {
    background-color: #dc143c;
    animation-name: departmentMvBg-staff;
}

@keyframes departmentMvBg-staff {
    0% {
        --mv-color-1: rgba(255, 0, 0, 0.8);
        --mv-color-2: rgba(255, 140, 0, 0.7);
        --mv-color-3: rgba(255, 165, 0, 0.7);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
    33% {
        --mv-color-1: rgba(255, 69, 0, 0.8);
        --mv-color-2: rgba(255, 215, 0, 0.7);
        --mv-color-3: rgba(255, 99, 71, 0.7);
        background-position: 80% 30%, 20% 50%, 40% 20%;
    }
    66% {
        --mv-color-1: rgba(220, 20, 60, 0.8);
        --mv-color-2: rgba(255, 160, 122, 0.7);
        --mv-color-3: rgba(255, 127, 80, 0.7);
        background-position: 40% 50%, 70% 20%, 10% 70%;
    }
    100% {
        --mv-color-1: rgba(255, 0, 0, 0.8);
        --mv-color-2: rgba(255, 140, 0, 0.7);
        --mv-color-3: rgba(255, 165, 0, 0.7);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
}

.l-department-mv[data-department="tuning"] .department-mv-bg {
    background-color: #ffb703;
    animation-name: departmentMvBg-tuning;
}

@keyframes departmentMvBg-tuning {
    0% {
        --mv-color-1: rgba(255, 215, 0, 0.7);
        --mv-color-2: rgba(255, 140, 0, 0.5);
        --mv-color-3: rgba(255, 178, 102, 0.6);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
    33% {
        --mv-color-1: rgba(255, 230, 100, 0.7);
        --mv-color-2: rgba(255, 165, 0, 0.6);
        --mv-color-3: rgba(255, 200, 150, 0.6);
        background-position: 80% 30%, 20% 50%, 40% 20%;
    }
    66% {
        --mv-color-1: rgba(255, 190, 50, 0.7);
        --mv-color-2: rgba(255, 120, 0, 0.6);
        --mv-color-3: rgba(255, 245, 180, 0.7);
        background-position: 40% 50%, 70% 20%, 10% 70%;
    }
    100% {
        --mv-color-1: rgba(255, 215, 0, 0.7);
        --mv-color-2: rgba(255, 140, 0, 0.5);
        --mv-color-3: rgba(255, 178, 102, 0.6);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
}

.l-department-mv[data-department="craft"] .department-mv-bg {
    background-color: #70e000;
    animation-name: departmentMvBg-craft;
}

@keyframes departmentMvBg-craft {
    0% {
        --mv-color-1: rgba(50, 205, 50, 0.7);
        --mv-color-2: rgba(0, 250, 154, 0.6);
        --mv-color-3: rgba(235, 255, 100, 0.6);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
    33% {
        --mv-color-1: rgba(0, 255, 127, 0.7);
        --mv-color-2: rgba(173, 255, 47, 0.6);
        --mv-color-3: rgba(200, 255, 150, 0.6);
        background-position: 80% 30%, 20% 50%, 40% 20%;
    }
    66% {
        --mv-color-1: rgba(34, 139, 34, 0.7);
        --mv-color-2: rgba(0, 255, 0, 0.6);
        --mv-color-3: rgba(255, 255, 180, 0.7);
        background-position: 40% 50%, 70% 20%, 10% 70%;
    }
    100% {
        --mv-color-1: rgba(50, 205, 50, 0.7);
        --mv-color-2: rgba(0, 250, 154, 0.6);
        --mv-color-3: rgba(235, 255, 100, 0.6);
        background-position: 10% 20%, 50% 40%, 80% 60%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l-department-mv .department-mv-bg { animation: none; }
}

/* インナー：1200px センタリング、タイトルを下端左寄せ */
.department-mv-inner {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    padding-bottom: 24px;
}

.department-mv-title {
    font-size: 56px;
    color: #fff;
    font-weight: 400;
    line-height: 1;
}

/* SP 背景画像・ヒーローサイズ */
@media (max-width: 767px) {
    .l-department-mv[data-department="artist"]       { background-image: url('../../img/hero-artists-sp.webp'); }
    .l-department-mv[data-department="soundcreator"] { background-image: url('../../img/hero-soundcreator--sp.webp'); }
    .l-department-mv[data-department="staff"]        { background-image: url('../../img/hero-staff-sp.webp'); }
    .l-department-mv[data-department="tuning"]       { background-image: url('../../img/hero-tuning-sp.webp'); }
    .l-department-mv[data-department="repair"]       { background-image: url('../../img/hero-repair-sp.webp'); }
    .l-department-mv[data-department="craft"]        { background-image: url('../../img/hero-craft-sp.webp'); }

    .l-department-mv {
        height: 46.67vw; /* 175px / 375px */
    }

    .department-mv-inner {
        padding-left: 6.4vw; /* 24px / 375px */
        padding-bottom: 0;
    }

    .department-mv-title {
        font-size: 8vw; /* 30px / 375px */
        font-weight: normal;
        line-height: 1;
    }

    /* PC比(1440px幅 / 372px高さ)を保ったままSPの高さ(46.67vw)に合わせて縮小（SP専用画像が無い学科向けの暫定値） */
    .l-department-mv .department-mv-object {
        width: 180vw;
    }

    /* SP専用画像（mv-dept-sp-{slug}.png）がある学科: 画面幅ぴったりに表示 */
    .l-department-mv.has-mv-object-sp .department-mv-object {
        width: 100vw;
    }
}

/* --------------------------------------------------------------------------
   コース一覧
   -------------------------------------------------------------------------- */
.l-department-courses {
    padding: 40px 0;
}

.department-courses-inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 学科カラー変数 */
.department-year-group--artist       { --dept-color: #005CD4; }
.department-year-group--soundcreator { --dept-color: #00B6AB; }
.department-year-group--staff        { --dept-color: #FF5A00; }
.department-year-group--tuning       { --dept-color: #FF9100; }
.department-year-group--repair       { --dept-color: #8D67CF; }
.department-year-group--craft        { --dept-color: #00B700; }

/* 年制グループ */
.department-year-group {
    margin-bottom: 40px;
}
@media (max-width: 767px) {
.department-year-group {
    margin-bottom: 0;
}
}

.department-year-heading {
    display: block;
    height: 50px;
    padding: 0 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 50px;
    background-color: transparent;
    border: 1px solid var(--dept-color);
    color: var(--dept-color);
    margin-bottom: 20px;
}

/* コースリスト：3列グリッド */
.department-course-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 40px;
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}

.department-course-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 20px;
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    color: #000;
    border-bottom: 1px solid var(--dept-color);
    text-decoration: none;
}

.department-course-item .course-arrow {
    flex-shrink: 0;
    color: var(--dept-color);
}

/* シラバスリンク */
.department-syllabus-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 40px;
}

.department-syllabus-link {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 20px;
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    color: #000;
    border-bottom: 1px solid #000;
    text-decoration: none;
}

/* サウンドクリエイター科・音楽芸能スタッフ科・ギタークラフト科: 年制グループをPCでもSPと同じ2カラム表示に */
@media (min-width: 768px) {
    [data-pagename="course/soundcreator"] .department-courses-inner,
    [data-pagename="course/staff"] .department-courses-inner,
    [data-pagename="course/craft"] .department-courses-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 40px;
        align-items: start;
    }

    [data-pagename="course/soundcreator"] .department-year-group,
    [data-pagename="course/staff"] .department-year-group,
    [data-pagename="course/craft"] .department-year-group {
        margin-bottom: 0;
    }

    [data-pagename="course/soundcreator"] .department-course-list,
    [data-pagename="course/staff"] .department-course-list,
    [data-pagename="course/craft"] .department-course-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    [data-pagename="course/soundcreator"] .department-syllabus-wrap,
    [data-pagename="course/staff"] .department-syllabus-wrap,
    [data-pagename="course/craft"] .department-syllabus-wrap {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    html:has([data-pagename^="course/"]) {
        overflow-x: hidden;
    }

    .l-department-courses {
        padding: 4.80vw 6.40vw;
    }

    .department-courses-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4.27vw 2.40vw;
        padding: 0;
        width: 100%;
    }

    .department-mv-title {
font-size:8.00vw;
    }

    .department-year-heading {
        width: 100%;
        height: auto;
        font-size: 3.20vw;
        line-height: 1.75;
        margin: 0 0 2.13vw;
        padding: 0 2.13vw;
    }

    .department-course-list {
        grid-template-columns: 1fr;
        gap: 1.60vw;
        margin: 0 0 1.60vw;
    }

    /* 年制グループが1つだけの学科：フル幅＋コースを2列に */
    .department-year-group:first-child:nth-last-child(2) {
        grid-column: 1 / -1;
    }
    .department-year-group:first-child:nth-last-child(2) .department-course-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.60vw;
    }

    .department-course-item a {
        font-size: 3.20vw;
        line-height: 1;
        padding: 1.87vw 1.33vw 1.87vw 0;
		letter-spacing:-.06em;
    }

    .department-course-item .course-arrow {
        width: 4.27vw;
        height: 4.27vw;
        flex-shrink: 0;
    }

    .department-syllabus-wrap {
        grid-column: 1 / -1;
        display: block;
        width: calc(50% - 1.20vw);
        margin: 0 auto;
    }

    .department-syllabus-link {
        grid-column: auto;
        font-size: 3.20vw;
        line-height: 1;
        padding: 1.87vw 1.33vw 1.87vw 1.87vw;
    }

    [data-pagename^="course/"] .l-news .news-ttl-wrap {
        width: 100%;
        padding: 0 6.4vw;
margin:0 auto 2.5vw !important;
    }

    [data-pagename^="course/"] .l-news .news-ttl {
        width: 30.93vw;
    }

    [data-pagename^="course/"] .news-box-wrap {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   SNSセクション
   -------------------------------------------------------------------------- */
.dept-sns-inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 36px 0 40px;
    border-top: 1px solid #000;
}

.dept-sns-lead {
    font-size: 40px;
    font-weight: normal;
    line-height: 1.7;
    margin: 0 0 40px;
    text-align: center;
}

.dept-sns-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dept-sns-btn {
    display: inline-flex;
    text-decoration: none;
    transition: opacity 0.2s;
}

.dept-sns-btn img {
    width: 64px;
    height: 64px;
}

.dept-sns-btn:hover {
    opacity: 0.75;
}

@media (max-width: 767px) {
    .l-department-sns {
        padding: 6.4vw;
    }

    .dept-sns-inner {
        padding: 6.4vw 0 0;
    }

    .dept-sns-lead {
        font-size: 4.80vw;
line-height:1.35;
        margin-bottom: 6.4vw;
    }

    .dept-sns-list {
        gap: 2.67vw;
    }

    .dept-sns-btn img {
        width: 12vw;
        height: 12vw;
    }
}

/* --------------------------------------------------------------------------
   ニュースセクション
   -------------------------------------------------------------------------- */
[data-pagename^="course/"] .l-news {
    padding: 56px 0;
    border-top: none !important;
}

[data-pagename^="course/"] .l-news .news-ttl-wrap {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto 32px;
}

[data-pagename^="course/"] .l-news .news-ttl {
    display: block;
}

[data-pagename^="course/"] .news-box-wrap {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

[data-pagename^="course/"] .news-box-wrap::after {
    display: none;
}

[data-pagename^="course/"] .l-news .news-content {
    max-width: 100%;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
margin:0 0 40px;
}

/* カテゴリタブ */
[data-pagename^="course/"] .l-news .l-category-wrap {
    display: flex;
    margin-bottom: 24px;
}

[data-pagename^="course/"] .l-news .l-archive_list .archive-item {
    align-items: stretch;
}

[data-pagename^="course/"] .l-news .l-archive_list .archive-meta {
    flex-grow: 1;
    align-content: flex-start;
}

[data-pagename^="course/"] .l-news .l-archive_list .archive-meta .l-category {
    display: flex;
    flex-wrap: wrap;
}

[data-pagename^="course/"] .l-news .l-archive_list .archive-meta .l-category .category-item {
    margin-right: 0;
}

[data-pagename^="course/"] .l-news .l-archive_list .archive-title {
    font-weight: bold;
}

[data-pagename^="course/"] .l-news .news-btn {
    display: none;
}

@media (min-width: 768px) {
    [data-pagename^="course/"] .l-news .l-archive_list .archive-item:nth-child(n+2) {
        margin-top: 40px;
    }

    [data-pagename^="course/"] .l-news .l-archive_list .archive-meta {
        padding-bottom: 2.5rem;
        border-bottom: 0.656px solid #0071bc;
    }

    [data-pagename^="course/"] .l-news .l-archive_list .archive-meta .l-category {
        gap: 0.625rem;
    }
}

@media (max-width: 767.98px) {
    [data-pagename^="course/"] .l-news .l-archive_list .l-thumb {
        max-width: 100px;
    }

    [data-pagename^="course/"] .l-news .l-archive_list .archive-meta {
        padding-bottom: 1.25rem;
        border-bottom: 1.312px solid #0071bc;
    }

    [data-pagename^="course/"] .l-news .l-archive_list .archive-meta .l-category {
        gap: 0.5rem;
    }
}

@media (max-width: 767px) {
    [data-pagename^="course/"] .l-news {
        padding: 10.67vw 0 0;
    }

    [data-pagename^="course/"] .news-box-wrap {
        width: 100%;
        padding: 0 6.4vw;
    }
}