@charset "UTF-8";

/* CSS Document */
/*===================================================
    ビデオライブラリー一覧ページ専用CSS スマホ版
===================================================*/

/*//////////////////////////////////////////////////
    共通
///////////////////////////////////////////////////*/
#main {
    padding: 0px;
}

/* 見出し */
.heading-1 {
    font-size: 3.2rem;
}

.heading-2 {
    font-size: var(--heading-2);
    font-weight: var(--weight-bold);
    line-height: 1.5;
    letter-spacing: 0.0em;
}

.heading-3 {
    font-size: var(--heading-3);
    font-weight: var(--weight-bold);
    line-height: 1.5;
    letter-spacing: 0.0em;
}

.subtitle {
    font-size: var(--subtitle);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    letter-spacing: 0.03em;
}

/* --------------------------------------------------------
        ビデオライブラリー > スライダー
-------------------------------------------------------- */
#librarySlider .librarySlider__titleWrapper {
    margin-right: 20px;
    margin-left: 20px;
}

#librarySlider .librarySlider__item {
    margin-right: 9px;
    margin-left: 9px;
}

#librarySlider .librarySlider__itemContentDuration {
    font-size: 1.2rem;
}

#librarySlider .librarySlider__itemContentTitle h2 {
    font-size: 1.8rem;
}

/* --------------------------------------------------------
        ビデオライブラリー > 検索
-------------------------------------------------------- */
#librarySearch {
    margin-right: 20px;
    margin-left: 20px;
    padding: 24px 20px 10px;
}

#librarySearch .librarySearch__keyword {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

#librarySearch .librarySearch__keyword label {
    min-width: auto;
    font-size: var(--font-size-md);
    font-weight: var(--weight-medium);
    line-height: 1.6;
    color: var(--text-subtler);
    margin-bottom: 8px;
    margin-right: 0px;
}

#librarySearch .librarySearch__categories {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
}

#librarySearch .librarySearch__categories span {
    min-width: auto;
    margin-bottom: 16px;
    margin-right: 0px;
    margin-top: 0px;
}

/* 全て表示ボタン */
#librarySearch .librarySearch__categoriesOpen {
    position: absolute;
    top: 0;
    right: 0;
}

/* すべて外すボタン */
#librarySearch .librarySearch__categoriesClear {
    position: absolute;
    top: -5px;
    right: 40px;
}

#librarySearch .librarySearch__categoriesClear button {
    justify-content: center;
    align-items: center;
}


#librarySearch .librarySearch__categoriesClear button img {
    width: 24px;
    height: 24px;
}

#librarySearch .librarySearch__categoriesClear button span {
    margin-bottom: 0px;
}

/* --------------------------------------------------------
        ビデオライブラリー > 一覧
-------------------------------------------------------- */
#libraryList {
    margin: 40px 20px 120px 20px;
}

/* --------------------------------------------------------
        ビデオライブラリー > 一覧 > さらに表示
-------------------------------------------------------- */
#libraryList .libraryList__more {
    margin-top: 40px;
    text-align: center;
}

#libraryList .libraryList__moreButton {
    width: 100%;
    max-width: 335px;
}

/* --------------------------------------------------------
        ビデオライブラリー > 一覧 > 検索結果なしメッセージ
-------------------------------------------------------- */
#libraryList .libraryList__noResults {
    text-align: center;
    padding: 30px 20px;
}

#libraryList .libraryList__noResults p {
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------
        ビデオライブラリー > 詳細モーダル
-------------------------------------------------------- */
.libraryModal{
    width: 90vw;
    max-width: 90vw;
    max-height: 95dvh;
}

.libraryModal__content{
    padding: 16px 16px 80px;
}

.libraryModal__content h1{
    font-size: 1.8rem;
}

.libraryModal__tags .libraryModal__tag {
    font-size: 1.3rem;
}

.libraryModal__relatedVideoContainer{
    @media screen and (max-width: 657px) {
        gap: 40px;
    }
}