@charset "UTF-8";

/* ###########################################
   Custom Property
########################################### */
:root {
    --color-text: #040000;
    --color-border: #d2d0cf;

    /* category color */
    --color-pa: #f29600;
    --color-manga: #d5b200;
    --color-game: #aacc03;
    --color-e_sports: #8f70ae;
    --color-it: #0dac67;
    --color-movie_creator: #c95a9c;
    --color-child: #b979b0;
    --color-sports: #00a8d5;
    --color-hairmake: #eb6d65;
    --color-design: #c88853;
    --color-music: #f9bf11;
    --color-bas: #8f8195;
    --color-fishing: #4593d0;
    --color-scenario: #6aa8bf;
    --color-business: #00b0ad;
    --color-meta: #dd81a6;
    --color-dance: #ffe500;
    --color-topics: #ffb7bb;
    --color-news: #9ccfdb;
    --color-report: #aed6b5;
    --color-yakan: #8ea9e5;
    --color-career: #cccccc;
    --color-others: #c7a499;
    --color-day: #ffabe4;
    --color-hajr: #00cbb2;

    /* format color */
    --color-bg-pk: #ff6c7a;
    --color-bg-pk-l: #ffb7bb;
    --color-bg-bl: #00c3e5;
    --color-bg-bl-l: #b2edf7;
    --color-bg-bl-l_02: #b5f3e1;
    --color-bg-gr: #0bd79b;
    --color-bg-gr-l: #55e3b9;
    --color-bg-gr-d: #0da567;
    --color-bg-yw: #daf721;
    --color-bg-yw-l: #edf4ab;
    --color-bg-gray: #888888;

}


/* ###########################################
   Common
########################################### */
body {
  padding-top: 0;
}

h1.headerTagline{
    color: #666;
}

a {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    color: var(--color-text);
}
@media(hover: hover) {
    a:hover {
        opacity: 0.6;
    }
}
a img {
    transition: all 0.2s ease-in-out;
}
@media(hover: hover) {
    a img:hover {
        opacity: 0.6;
    }
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.default {
    list-style: none;
    margin: 20px 0;
    font-weight: 500;
}
ul.default li {
    padding-left: 30px;
    text-indent: -30px;
}
ul.default li::before {
    content: "●";
    display: inline-block;
    width: 30px;
    text-align: center;
    text-indent: 0;
    color: #4B80D4;
}
ul.default li:not(:first-child) {
    margin-top: 1em;
}
ol.default {
    list-style: decimal;
    margin: 20px 0 20px 30px;
    font-weight: 500;
}
ol.default li:not(:first-child) {
    margin-top: 1em;
}

.center {
    text-align: center;
}

.indent {
	padding-left:1em;
	text-indent:-1em;
}

select {
    color: var(--color-text);
}



/* ###########################################
   PARTS - button
########################################### */
.btn-box02 {
    margin-top: 25px;
    margin-bottom: 6px;
    display: flex;
    justify-content: center;
}
.btn-box02 a {
    display: inline-block;
    position: relative;
    z-index: 0;
}
.btn-box02 a::before,
.btn-box02 a .btn {
    width: 150px;
    height: 48px;
    border: 1px solid #000;
    border-radius: 10px;
}
.btn-box02 a::before {
    content: "";
    display: block;
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_dot03.svg#pgr) repeat center top #FFF;
    background-size: 4px 4px;
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: -1;
}
.btn-box02 a .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 500;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}
@media(hover: hover) {
    .btn-box02 a:hover {
        opacity: 1;
    }
    .btn-box02 a:hover .btn {
        transform: translateX(6px) translateY(6px);
    }
}

/* 終了状態のボタン */
.btn-box02 .btn.btn-disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 48px;
    font-size: 1.4rem;
    font-weight: 500;
    background-color: #d1d1d1;
    color: #a1a1a1;
    border: 1px solid #a1a1a1;
    border-radius: 10px;
    cursor: default;
    pointer-events: none;
}

.btn-box02.small {
    margin-top: 20px;
    margin-bottom: 4px;
}
.btn-box02.small a::before,
.btn-box02.small a .btn {
    width: 126px;
    height: 42px;
    border-radius: 8px;
}
.btn-box02.small a::before {
    top: 4px;
    left: 4px;
}
.btn-box02.small a .btn {
/*
    font-size: 1.2rem;
*/
    font-size: 0.8rem;
}
@media(hover: hover) {
    .btn-box02.small a:hover .btn {
        transform: translateX(4px) translateY(4px);
    }
}
@media screen and (max-width: 480px) {
    .btn-box02 {
        margin-top: 5.33vw;
    }
    .btn-box02 a::before,
    .btn-box02 a .btn,
    .btn-box02 .btn.btn-disabled {
        width: 36.67vw;
        height: 12.27vw;
        border-radius: 1.73vw;
    }
    .btn-box02 a::before {
        top: 1.33vw;
        left: 1.2vw;
    }
    .btn-box02 a .btn,
    .btn-box02 .btn.btn-disabled {
        font-size: 3.47vw;
    }
    .btn-box02.small a::before,
    .btn-box02.small a .btn {
        width: 36.4vw;
        height: 12vw;
        border-radius: 1.73vw;
    }
    .btn-box02.small a::before {
        top: 1.33vw;
        left: 1.2vw;
    }
    .btn-box02.small a .btn {
        font-size: 3.47vw;
    }
}

/* ###########################################
   PARTS - form
########################################### */

/*  */
.pc { display: block;}
.sp { display: none;}

@media screen and (max-width: 480px) {
  .pc { display: none;}
  .sp { display: block;}
}


/* ###########################################
    CMS content
########################################### */
/** cat-color **/
/* 初期値 */
.cat-name {
    background-color: var(--color-others);
}
.cont-name::before {
    background-color: var(--color-others);
}
/* 就職実績 */
.career .cat-name {
    background-color: var(--color-career);
}
.career .cont-name::before {
    background-color: var(--color-career);
}
/* パフォーミングアーツ */
.pa .cat-name {
    background-color: var(--color-pa);
}
.pa .cont-name::before {
    background-color: var(--color-pa);
}
.pa.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#pa) no-repeat center;
}
.pa.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#pa) no-repeat center;
}
.pa.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_pa.svg) no-repeat center;
}
.pa.recommend-title > span > span::after {
    background-color: var(--color-pa);
}
.pa.recommend-title > span > span > span::after {
    border-top-color: var(--color-pa);
}
@media screen and (max-width: 480px) {
    .pa.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#pa) no-repeat center;
    }
    .pa.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#pa) no-repeat center;
    }
}
/* マンガ・イラスト */
.manga .cat-name {
    background-color: var(--color-manga);
}
.manga .cont-name::before {
    background-color: var(--color-manga);
}
.manga.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#manga) no-repeat center;
}
.manga.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#manga) no-repeat center;
}
.manga.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_mi.svg) no-repeat center;
}
.manga.recommend-title > span > span::after {
    background-color: var(--color-manga);
}
.manga.recommend-title > span > span > span::after {
    border-top-color: var(--color-manga);
}
@media screen and (max-width: 480px) {
    .manga.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#manga) no-repeat center;
    }
    .manga.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#manga) no-repeat center;
    }
}
/* ゲーム */
.game .cat-name {
    background-color: var(--color-game);
}
.game .cont-name::before {
    background-color: var(--color-game);
}
.game.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#game) no-repeat center;
}
.game.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#game) no-repeat center;
}
.game.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_gm.svg) no-repeat center;
}
.game.recommend-title > span > span::after {
    background-color: var(--color-game);
}
.game.recommend-title > span > span > span::after {
    border-top-color: var(--color-game);
}
@media screen and (max-width: 480px) {
    .game.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#game) no-repeat center;
    }
    .game.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#game) no-repeat center;
    }
}
/* e-Sports */
.e_sports .cat-name {
    background-color: var(--color-e_sports);
}
.e_sports .cont-name::before {
    background-color: var(--color-e_sports);
}
.e_sports.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#e_sports) no-repeat center;
}
.e_sports.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#e_sports) no-repeat center;
}
.e_sports.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_es.svg) no-repeat center;
}
.e_sports.recommend-title > span > span::after {
    background-color: var(--color-e_sports);
}
.e_sports.recommend-title > span > span > span::after {
    border-top-color: var(--color-e_sports);
}
@media screen and (max-width: 480px) {
    .e_sports.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#e_sports) no-repeat center;
    }
    .e_sports.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#e_sports) no-repeat center;
    }
}
/* IT */
.it .cat-name {
    background-color: var(--color-it);
}
.it .cont-name::before {
    background-color: var(--color-it);
}
.it.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#it) no-repeat center;
}
.it.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#it) no-repeat center;
}
.it.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_it.svg) no-repeat center;
}
.it.recommend-title > span > span::after {
    background-color: var(--color-it);
}
.it.recommend-title > span > span > span::after {
    border-top-color: var(--color-it);
}
@media screen and (max-width: 480px) {
    .it.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#it) no-repeat center;
    }
    .it.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#it) no-repeat center;
    }
}
/* 動画クリエイター */
.movie_creator .cat-name {
    background-color: var(--color-movie_creator);
}
.movie_creator .cont-name::before {
    background-color: var(--color-movie_creator);
}
.movie_creator.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#movie_creator) no-repeat center;
}
.movie_creator.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#movie_creator) no-repeat center;
}
.movie_creator.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_vc.svg) no-repeat center;
}
.movie_creator.recommend-title > span > span::after {
    background-color: var(--color-movie_creator);
}
.movie_creator.recommend-title > span > span > span::after {
    border-top-color: var(--color-movie_creator);
}
@media screen and (max-width: 480px) {
    .movie_creator.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#movie_creator) no-repeat center;
    }
    .movie_creator.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#movie_creator) no-repeat center;
    }
}
/* チャイルドケア */
.child .cat-name {
    background-color: var(--color-child);
}
.child .cont-name::before {
    background-color: var(--color-child);
}
.child.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#child) no-repeat center;
}
.child.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#child) no-repeat center;
}
.child.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_cc.svg) no-repeat center;
}
.child.recommend-title > span > span::after {
    background-color: var(--color-child);
}
.child.recommend-title > span > span > span::after {
    border-top-color: var(--color-child);
}
@media screen and (max-width: 480px) {
    .child.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#child) no-repeat center;
    }
    .child.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#child) no-repeat center;
    }
}
/* スポーツ */
.sports .cat-name {
    background-color: var(--color-sports);
}
.sports .cont-name::before {
    background-color: var(--color-sports);
}
.sports.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#sports) no-repeat center;
}
.sports.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#sports) no-repeat center;
}
.sports.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_sp.svg) no-repeat center;
}
.sports.recommend-title > span > span::after {
    background-color: var(--color-sports);
}
.sports.recommend-title > span > span > span::after {
    border-top-color: var(--color-sports);
}
@media screen and (max-width: 480px) {
    .sports.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#sports) no-repeat center;
    }
    .sports.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#sports) no-repeat center;
    }
}
/* ヘアメイク */
.hairmake .cat-name {
    background-color: var(--color-hairmake);
}
.hairmake .cont-name::before {
    background-color: var(--color-hairmake);
}
.hairmake.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#hairmake) no-repeat center;
}
.hairmake.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#hairmake) no-repeat center;
}
.hairmake.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_hm.svg) no-repeat center;
}
.hairmake.recommend-title > span > span::after {
    background-color: var(--color-hairmake);
}
.hairmake.recommend-title > span > span > span::after {
    border-top-color: var(--color-hairmake);
}
@media screen and (max-width: 480px) {
    .hairmake.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#hairmake) no-repeat center;
    }
    .hairmake.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#hairmake) no-repeat center;
    }
}
/* デザイン */
.design .cat-name {
    background-color: var(--color-design);
}
.design .cont-name::before {
    background-color: var(--color-design);
}
.design.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#design) no-repeat center;
}
.design.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#design) no-repeat center;
}
.design.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_ds.svg) no-repeat center;
}
.design.recommend-title > span > span::after {
    background-color: var(--color-design);
}
.design.recommend-title > span > span > span::after {
    border-top-color: var(--color-design);
}
@media screen and (max-width: 480px) {
    .design.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#design) no-repeat center;
    }
    .design.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#design) no-repeat center;
    }
}
/* ミュージック */
.music .cat-name {
    background-color: var(--color-music);
}
.music .cont-name::before {
    background-color: var(--color-music);
}
.music.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#music) no-repeat center;
}
.music.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#music) no-repeat center;
}
.music.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_mu.svg) no-repeat center;
}
.music.recommend-title > span > span::after {
    background-color: var(--color-music);
}
.music.recommend-title > span > span > span::after {
    border-top-color: var(--color-music);
}
@media screen and (max-width: 480px) {
    .music.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#music) no-repeat center;
    }
    .music.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#music) no-repeat center;
    }
}
/* バスケットボール */
.bas .cat-name {
    background-color: var(--color-bas);
}
.bas .cont-name::before {
    background-color: var(--color-bas);
}
.bas.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#bas) no-repeat center;
}
.bas.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#bas) no-repeat center;
}
.bas.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_bb.svg) no-repeat center;
}
.bas.recommend-title > span > span::after {
    background-color: var(--color-bas);
}
.bas.recommend-title > span > span > span::after {
    border-top-color: var(--color-bas);
}
@media screen and (max-width: 480px) {
    .bas.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#bas) no-repeat center;
    }
    .bas.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#bas) no-repeat center;
    }
}
/* フィッシング */
.fishing .cat-name {
    background-color: var(--color-fishing);
}
.fishing .cont-name::before {
    background-color: var(--color-fishing);
}
.fishing.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#fishing) no-repeat center;
}
.fishing.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#fishing) no-repeat center;
}
.fishing.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_fs.svg) no-repeat center;
}
.fishing.recommend-title > span > span::after {
    background-color: var(--color-fishing);
}
.fishing.recommend-title > span > span > span::after {
    border-top-color: var(--color-fishing);
}
@media screen and (max-width: 480px) {
    .fishing.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#fishing) no-repeat center;
    }
    .fishing.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#fishing) no-repeat center;
    }
}
/* シナリオ */
.scenario .cat-name {
    background-color: var(--color-scenario);
}
.scenario .cont-name::before {
    background-color: var(--color-scenario);
}
.scenario.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#scenario) no-repeat center;
}
.scenario.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#scenario) no-repeat center;
}
.scenario.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_sn.svg) no-repeat center;
}
.scenario.recommend-title > span > span::after {
    background-color: var(--color-scenario);
}
.scenario.recommend-title > span > span > span::after {
    border-top-color: var(--color-scenario);
}
@media screen and (max-width: 480px) {
    .scenario.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#scenario) no-repeat center;
    }
    .scenario.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#scenario) no-repeat center;
    }
}
/* ビジネス */
.business .cat-name {
    background-color: var(--color-business);
}
.business .cont-name::before {
    background-color: var(--color-business);
}
.business.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#business) no-repeat center;
}
.business.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#business) no-repeat center;
}
.business.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_bz.svg) no-repeat center;
}
.business.recommend-title > span > span::after {
    background-color: var(--color-business);
}
.business.recommend-title > span > span > span::after {
    border-top-color: var(--color-business);
}
@media screen and (max-width: 480px) {
    .business.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#business) no-repeat center;
    }
    .business.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#business) no-repeat center;
    }
}
/* メタバース */
.meta .cat-name {
    background-color: var(--color-meta);
}
.meta .cont-name::before {
    background-color: var(--color-meta);
}
.meta.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#meta) no-repeat center;
}
.meta.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#meta) no-repeat center;
}
.meta.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_mb.svg) no-repeat center;
}
.meta.recommend-title > span > span::after {
    background-color: var(--color-meta);
}
.meta.recommend-title > span > span > span::after {
    border-top-color: var(--color-meta);
}
@media screen and (max-width: 480px) {
    .meta.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#meta) no-repeat center;
    }
    .meta.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#meta) no-repeat center;
    }
}
/* ダンス */
.dance .cat-name {
    background-color: var(--color-dance);
}
.dance .cont-name::before {
    background-color: var(--color-dance);
}
.dance.recommend-title > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#dance) no-repeat center;
}
.dance.recommend-title > span::after {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle.svg#dance) no-repeat center;
}
.dance.recommend-title > span > span::before {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_recom_mb.svg) no-repeat center;
}
.dance.recommend-title > span > span::after {
    background-color: var(--color-dance);
}
.dance.recommend-title > span > span > span::after {
    border-top-color: var(--color-dance);
}
@media screen and (max-width: 480px) {
    .dance.recommend-title.sp-line02 > span::before {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#dance) no-repeat center;
    }
    .dance.recommend-title.sp-line02 > span::after {
        background: url(https://ha-base.haproxy.athuman.com/assets/img/pattern_half-circle_02.svg#dance) no-repeat center;
    }
}


/* ###########################################
    COLLEGE
########################################### */
.college-thumbnail-outer {
    position: relative;
}
.college-thumbnail-outer .college-sub-name {
    width: 200px;
    line-height: 38px;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    background-color: #66dbef;
    border: 2px solid #000;
    border-radius: 10px;
    position: absolute;
    top: -20px;
    right: 70px;
    z-index: 9;
}
.college-thumbnail {
    display: none;
    width: 1200px;
    margin: auto;
    padding: 38px;
    background: repeating-linear-gradient(to bottom, #fff, #fff 330px, #cef7eb 330px, #cef7eb 660px);
    border: 2px solid #000;
    border-radius: 50px;
    position: relative;
}
.college-thumbnail.slick-initialized {
    display: block;
}
.college-thumbnail .slick-track {
    display: flex;
    flex-wrap: wrap;
    gap: 80px 40px;
    transform: unset !important;
}
.college-thumbnail .slick-track:before,
.college-thumbnail .slick-track:after {
    content: unset;
}
.college-thumbnail .thumbnail-img {
    width: 250px !important;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
}
.college-thumbnail .thumbnail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.college-thumbnail .slick-current {
    opacity: 1;
}
.college-thumbnail .slick-current:hover {
    opacity: .7;
}

/* パフォーミングアーツ */
.pa.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_pa.svg) no-repeat center top;
    background-size: auto 90px;
}
.pa.slick-item::before,
.pa.slick-item::after {
    background-color: #fbe9cc;
}
/* マンガ・イラスト */
.manga.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_mi.svg) no-repeat center top;
    background-size: auto 90px;
}
.manga.slick-item::before,
.manga.slick-item::after {
    background-color: #f7f0cc;
}
/* ゲーム */
.game.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_gm.svg) no-repeat center top;
    background-size: auto 90px;
}
.game.slick-item::before,
.game.slick-item::after {
    background-color: #eef5cd;
}
/* e-Sports */
.e_sports.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_es.svg) no-repeat center top;
    background-size: auto 90px;
}
.e_sports.slick-item::before,
.e_sports.slick-item::after {
    background-color: #e9e2ef;
}
/* IT */
.it.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_it.svg) no-repeat center top;
    background-size: auto 90px;
}
.it.slick-item::before,
.it.slick-item::after {
    background-color: #cfeee1;
}
/* 動画クリエイター */
.movie_creator.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_vc.svg) no-repeat center top;
    background-size: auto 90px;
}
.movie_creator.slick-item::before,
.movie_creator.slick-item::after {
    background-color: #f4deeb;
}
/* チャイルドケア */
.child.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_cc.svg) no-repeat center top;
    background-size: auto 90px;
}
.child.slick-item::before,
.child.slick-item::after {
    background-color: #f1e4ef;
}
/* スポーツ */
.sports.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_spt.svg) no-repeat center top;
    background-size: auto 90px;
}
.sports.slick-item::before,
.sports.slick-item::after {
    background-color: #cceef7;
}
/* ヘアメイク */
.hairmake.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_hm.svg) no-repeat center top;
    background-size: auto 90px;
}
.hairmake.slick-item::before,
.hairmake.slick-item::after {
    background-color: #fbe2e0;
}
/* デザイン */
.design.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_ds.svg) no-repeat center top;
    background-size: auto 90px;
}
.design.slick-item::before,
.design.slick-item::after {
    background-color: #f5e9dd;
}
/* ミュージック */
.music.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_mu.svg) no-repeat center top;
    background-size: auto 90px;
}
.music.slick-item::before,
.music.slick-item::after {
    background-color: #fef2cf;
}
/* バスケットボール */
.bas.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_bb.svg) no-repeat center top;
    background-size: auto 90px;
}
.bas.slick-item::before,
.bas.slick-item::after {
    background-color: #e9e6ea;
}
/* フィッシング */
.fishing.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_fs.svg) no-repeat center top;
    background-size: auto 90px;
}
.fishing.slick-item::before,
.fishing.slick-item::after {
    background-color: #dae9f6;
}
/* シナリオ */
.scenario.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_sn.svg) no-repeat center top;
    background-size: auto 90px;
}
.scenario.slick-item::before,
.scenario.slick-item::after {
    background-color: #e1eef2;
}
/* ビジネス */
.business.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_bz.svg) no-repeat center top;
    background-size: auto 90px;
}
.business.slick-item::before,
.business.slick-item::after {
    background-color: #ccefef;
}
/* メタバース */
.meta.slick-item .college-ttl {
    background: url(https://ha-base.haproxy.athuman.com/assets/img/icon_modal_mb.svg) no-repeat center top;
    background-size: auto 90px;
}
.meta.slick-item::before,
.meta.slick-item::after {
    background-color: #f8e6ed;
}
@media screen and (max-width: 480px) {
    .college-thumbnail-outer .college-sub-name {
        width: 29.33vw;
        line-height: 5.33vw;
        font-size: 2.67vw;
        border-width: 1px;
        border-radius: 1.33vw;
        top: calc(-5.33vw / 2);
        right: 4.67vw;
    }
    .college-thumbnail {
        width: 93.33vw;
        padding: 6.67vw 5.07vw;
        background: #fff;
        border-width: 1px;
        border-radius: 6.67vw;
    }
    .college-thumbnail .slick-track {
        gap: 5.33vw;
    }
    .college-thumbnail .thumbnail-img {
        width: 38.67vw !important;
    }

}