@charset "utf-8";

/* 旧コンテンツの流用ページでv3のcssとv4のcssを混在させた際の不整合部分を調整するためのcss */

/* 部活ページの旧CSSで左右に白いボーダーが入っているのをデザイン上無色に変更 */

.container.migrate-page {
    background: none;
    border-left-color: transparent;
    border-right-color: transparent;
    /* margin-top: -2%; */
    @media screen and (min-width:769px){
        margin-top: 24px;
    }
}

/* c-breadcrumb上下マージンの相殺 */
.c-breadcrumb__wrapper {
    @media screen and (max-width:768px){
        margin-top: 5px;
        margin-bottom: 5px;
    }
    @media screen and (min-width:769px){
        margin-top: -20px;
        margin-bottom: 100px;
    }
}
@media screen and (min-width:769px){
    .programmingNavi a {
        font-size: 20px;
    }
}

/* 部活ページの旧CSSでフッターのh2に色が着いてしまうのを打ち消し */
.p-footer__sns--heading {
    color: inherit;
}

/* 記事ページ内のワンダーボタンについてjs由来のclassによる旧デザインを打ち消し */
.wonderButton.voted {
    padding: 0;
}

/* 
プロフィールアイコン・背景交換のタブがaタグだと上手く動作しないので、ボタンに変更
その際に反映されなくなったCSSの適用
*/
#item_tag li.c-tab__list .c-tab {
  color: #FFF;
  background-color: #0A1D40;
}
@media (hover: hover) {
    #item_tag li.c-tab__list .c-tab:hover {
    color: #0A1D40;
    background-color: #FFF;
    } 
}


#item_tag li.c-tab__list .is-active {
  color: #0A1D40;
  background-color: #FFF;
}

/* マイノートで先生の場合は先生になるように対応 */
.pg-profile__info--teatcher::after {
    content: '\5148\751F'
}

.c-panel__mynote--list::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #f1f2f4;
    width: 100%;
    height: 1px;
    z-index: 0
}

.c-panel__mynote--list[data-type="card"] {
    border-radius: 8px 8px 0 0
}

.c-panel__mynote--list[data-type="work"],.c-panel__mynote--list[data-type="work_mypage"],.c-panel__mynote--list[data-type="work_bukatsu"] {
    display: block;
    border-radius: 8px 8px 0 0
}

.c-panel__mynote--list[data-type="work_mypage"] {
    position: relative
}

.c-panel__mynote--list[data-type="work_mypage"]::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    background: url("../../img/v4/common/ico/ico_close_circle.svg") center center/100% auto no-repeat;
    width: 30px;
    aspect-ratio: 1;
    top: 8px;
    right: 8px;
    bottom: auto;
    left: auto;
    z-index: 2;
    height: auto
}

.c-panel__mynote--list[data-ico="award"] {
    position: relative
}

.c-panel__mynote--list[data-ico="award"]::after {
    height: auto;
    bottom: inherit;
}

.c-panel__mynote--list[data-ico="award"][data-size="l"]::before {
    width: 46px
}

.c-panel__mynote--list[data-ico="judging"] {
    position: relative;
}

.c-panel__mynote--list[data-ico="judging"]::before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    background: url("../../img/v4/common/img_tag_examination.svg") center center/100% auto no-repeat;
    width: 60px;
    aspect-ratio: 1;
    top: 0px;
    left: 0px;
    z-index: 2
}

.c-panel__mynote--list[data-ico="judging"][data-size="l"]::before {
    width: 80px
}

@media only screen and (max-width: 768px) {
    .c-panel__mynote--list[data-ico="judging"][data-size="l"]::before {
        width:60px
    }
}

.c-panel__mynote--list[data-ico="yoyo_clear"] {
    position: relative
}

.c-panel__mynote--list[data-ico="yoyo_clear"]::before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    background: url("../../img/v4/bukatsu/hyper_yo_yo/icon_great.png") center top/100% auto no-repeat;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 28%;
    height: 100px
}

.c-panel__mynote--list[data-ico="nawatobi_clear"]::before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    background: url("../../img/v4/bukatsu/nawatobi/icon_great.png") center top/100% auto no-repeat;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 28%;
    height: 100px
}

@media only screen and (min-width: 769px) {
    .c-panel__mynote--list[data-ico="yoyo_clear"]::before {
        max-width:70px
    }
}

@media only screen and (max-width: 768px) {
    .c-panel__mynote--list[data-ico="yoyo_clear"]::before {
        max-width:60px
    }
}

.c-panel__mynote--list[data-type="bukatsu-slide"] {
    border-radius: 14px
}

.c-panel__mynote--list[data-size="landscape"] {
    aspect-ratio: 16 / 9
}

.c-panel__mynote--list[data-size="landscape"] .c-thumb__main {
    aspect-ratio: 16 / 9
}

.modalblock .inner_wrap .mainContentPanel{
    width: auto;
    padding: 0;
}

.modalblock .inner_wrap {
    max-width: none;
    width: 100%;
}

.youtube_area {
    text-align: center;
    margin-bottom: 10px;
  }

.youtube {
    width: 100%;
    height: auto;
    max-width: 640px;
    min-height: 360px;
}

.pvArea {
    text-align: center;
    width: 100%;
    height: auto;
    max-width: 640px;
    min-height: 360px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
  }

.gray_out {
    filter: grayscale(1);
    opacity: 0.3;
}

.migrate-page {
    .wonderButton {
        background-color: unset;
        box-shadow: unset;
    }
    .snsBlock .c-btn__wonder {
        min-height: 20px;
        .c-btn__wonder--ico {
            transform:scale(.7);
            transform-origin: center center;
        }
    }
    .worksNewSlider .wonderButton {
        transform: scale(.7);
        transform-origin: bottom right;
        .c-btn__wonder {
            min-height: 30px;
        }
    }
}

.pg-bukatsu__pickups{
    column-gap: 2%;
    row-gap: 30px;
}

.pg-bukatsu__pickup{
    margin-top: 0%;
    margin-left: 0%;
}

@media screen and (min-width: 769px) {
    .pg-bukatsu__pickup:nth-child(n+4) {
        margin-top: 0;
    }
}

/* 「すべて」以外が選択されていない時、すべてのボタンをクリックできないようにする */
.c-row__selects:not(:has(.c-row__select>button.js-btn-select.is-selected:not([data-category="0"]))) .js-btn-select[data-category="0"] {
    pointer-events: none;
}

/* コンテスト作品絞り込み用のdisable表示 */
.c-btn__select[disabled] {
    color: #fff;
    background: #DBDDDE;
    border: 1px solid #DBDDDE;
    pointer-events: none;
    cursor: default;
    opacity: 1;
}

@media (hover: hover) {
    .c-btn__select[disabled]:hover {
        opacity: 1;
        cursor: default;
    }
}
.snsBlock {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin: 10px 0;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Youtubeには角丸設定があるが、通常ビデオ要素にはないため */
.c-video__file[data-corner="round"] {
    border-radius: 14px;
}


.c-list__icon--sample img{
    width:100%;
}


/* プレビューサイズ不具合調整 */
.c-form__file--img {
    max-height: inherit;
    max-width: inherit;
    height: auto;
    margin: auto;
    aspect-ratio: inherit;
    padding: 20px;
}


/*　ハイパーヨーヨー現行の構成踏襲対応に伴うマージン修正 */
@media only screen and (min-width: 769px) {
    .pg-yoyo__bukatsu--official {
        margin: 0 auto ;
    }
}
@media only screen and (max-width: 768px) {
    .pg-yoyo__bukatsu--official {
        margin: 0 auto 0;
    }
}



@media only screen and (min-width: 769px) {
    [data-type*="recommend-"] .swiper-wrapper {
        display: grid;
        margin: 25px auto 0;
    }
    [data-type*="recommend-"] .swiper-wrapper {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px 10px;
    }
}
.pg-tutorial__movie {
    position: relative;
    width: 100%; /* 親要素の幅にフィット */
    max-width: 560px; /* 最大幅を指定 */
    aspect-ratio: 16 / 9; /* アスペクト比を16:9に固定 */
    margin: auto; /* 中央揃え */
}

.pg-tutorial__movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 横幅を親要素に合わせる */
    height: 100%; /* アスペクト比に基づく高さ */
    border: 0; /* 枠線を削除 */
}

/* ロングシャドー表現対応非表示設定 */
.pg-profile::before {
    display: none;
}


/* c-btn 縦並びマージン調整 */
.c-btn + .c-btn{
    margin-top: 20px;
} 


.c-load__wrap {
    position: absolute;
    display: flex;
    z-index: 10; 
    opacity: 1; 
    transition: opacity 1.5s ease; 
}

.c-load__wrap.fade-out {
    opacity: 0; 
}

/* ジーニー検索結果スライダー初期状態: 非表示 */
body#top .c-content__m .p-slider__next,
body#top .c-content__m .p-slider__prev {
    display: none;
}

/* 内容が読み込まれてrole="button" が付与された場合にスライダー表示 */
body#top .c-content__m .p-slider__next[role="button"],
body#top .c-content__m .p-slider__prev[role="button"] {
    display: block;
}
@media (max-width: 768px) {
    body#top .c-content__m .p-slider__next.fade-in[role="button"],
    body#top .c-content__m .p-slider__prev.fade-in[role="button"] {
        display: none; /* モバイル版では非表示 */
    }
}

body#top .c-content__m .p-slider__base,
body#top .c-content__m .p-slider__next,
body#top .c-content__m .p-slider__prev {
opacity: 0;
transition: opacity 0.3s ease-in-out; /* ふわっとした登場 */
}

body#top .p-slider__base.fade-in, 
body#top .p-slider__next.fade-in,
body#top .p-slider__prev.fade-in {
opacity: 1; /* 表示状態 */
}

body#top .p-slider__dummy {
    visibility: hidden; /* 高さを確保しつつ非表示に */
}

body#top .p-slider__dummy2 {
    visibility: hidden; /* 高さを確保しつつ非表示に */
}

.body--clubid-15 .artiMov video{
    width:50%
}

/* ログインボタン用（赤 #C60E20） */
.c-btn.fesLoginColor {
  background-color: #C60E20;
  border:1.5px solid #C60E20;
}

/* TOP並び替えに伴うマージンの調整 */
.c-btn__top--beginner {
    margin-bottom: 1em; 
}

/* ログイン時のみヘッダーのサイズ感を調整する */
@media only screen and (max-width: 768px) {
    .isLoginHeader .p-header__logo--main {
        width: 54%;
    }
}

@media only screen and (max-width: 768px) {
    .isLoginHeader .p-header__logo--bandai {
        width: 12%;
    }
}

.isLoginHeader .p-header__right {
  max-width: 90px;
  order: 3;
  display: flex;
  justify-content: space-between;
}

@media only screen and (max-width: 768px) {
    .isLoginHeader .p-header__right {
        width: 28%;
    }
}

/* コンテスト下部ホバーの文字色が不安定となる点の修正 */
.c-btn.c-fixed__btn--yellow {
    color: #0a1d40
}
/* ハイパーヨーヨー関連コンテストの背景設定 */
body.body--clubid-15 .l-wrap__bg {
    background: url("../../img/v4/bukatsu/hyper_yo_yo/bg_wrapper.jpg") center top no-repeat;
    position: fixed;
    display: block !important
}
body.body--clubid-15 .l-wrap__bg--inner {
    display: none
}
body.body--clubid-15 .c-heading__cat {
    background: none
}

.c-thumb[data-ico="nawatobi_clear"]::before {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    background: url("../../img/v4/bukatsu/nawatobi/icon_great.png") center top/100% auto no-repeat;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 28%;
    height: 100px
}

.c-btn__nawatobi--revenge {
    position: relative;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    width: 30%;
    max-width: 70px;
    aspect-ratio: 0.95;
    background: url("../../img/v4/bukatsu/nawatobi/icon_bad.png") center top/100% auto no-repeat;
    pointer-events: all
}

.c-btn__v3[data-type="nawatobi"] {
    background: #B6BAE9;
    border-color: #666;
    color: #000
}

@media (hover: hover) {
    .c-btn__select--nawatobi {
        transition: background-color .3s, color .3s
    }

    .c-btn__select--nawatobi:hover {
        background: #B6BAE9;
        color: #000
    }
}

.c-btn__select--nawatobi {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    background: #666;
    width: 100%;
    height: 100%;
    padding: 5px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    line-height: 1.4
}

.c-btn__select--nawatobi:link {
    color: #fff
}

.c-btn__select--nawatobi:visited {
    color: #fff
}

.c-btn__select--nawatobi.hover {
    color: #fff
}

.c-btn__select--nawatobi:active {
    color: #fff
}
.c-btn__select--nawatobi.is-active {
    background: #B6BAE9;
    color: #000;
    pointer-events: none
}

.pg-nawatobi .swiper-slide-duplicate-prev,.pg-nawatobi .swiper-slide-duplicate-next {
    opacity:1;
}