@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

*************************************
動画中央寄せ
*************************************
.video-container {
margin: 0px auto;
}

/* =========================================================
01 共通設定
========================================================= */

body{
    background:#f7f7f7;
    color:#333;
}

a{
    text-decoration:none;
    transition:0.3s;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}


/* =========================================================
02 セクションタイトル
works archive page
========================================================= */

/* タイトル */

.archive-title{
    font-size:32px;
    font-weight:700;
    margin-bottom:30px;
}


/* =========================================================
03 FILTER TAGS
========================================================= */

.works-filter-section{
    margin-bottom:40px;
}

.filter-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:15px;
}

/* タグ一覧 */

.filter-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

/* タグ */

.filter-tag{
    display:inline-block;
    background:#fff;
    border:1px solid #ddd;
    padding:10px 18px;
    border-radius:999px;
    color:#333;
    font-size:14px;
    transition:0.3s;
}

.filter-tag:hover{
    background:#ff4d7a;
    color:#fff;
    border-color:#ff4d7a;
    transform:translateY(-2px);
}

/* ジャンル */

.genre-tag:hover{
    background:#ff7aa2;
    border-color:#ff7aa2;
}


/* =========================================================
04 作品一覧グリッド
========================================================= */

/* =========================================================
SEARCH FILTER
========================================================= */

.works-search-filter{

    background:#fff;

    padding:24px;

    border-radius:20px;

    margin-bottom:40px;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.08);
}

/* フォーム */

.searchandfilter{

    width:100%;
}

.searchandfilter ul{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    padding:0;

    margin:0;

    list-style:none;
}

/* 項目 */

.searchandfilter li{

    margin:0;
}

/* select */

.searchandfilter select{

    min-width:220px;

    padding:12px 16px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#fff;

    font-size:14px;
}

/* 検索欄 */

.searchandfilter input[type="text"]{

    min-width:220px;

    padding:12px 16px;

    border:1px solid #ddd;

    border-radius:12px;
}

/* ボタン */

.searchandfilter input[type="submit"]{

    background:#ff4d7a;

    color:#fff;

    border:none;

    padding:12px 24px;

    border-radius:999px;

    cursor:pointer;

    transition:0.3s;
}

.searchandfilter input[type="submit"]:hover{

    opacity:0.85;
}

/* スマホ */

@media screen and (max-width:768px){

    .searchandfilter ul{

        flex-direction:column;
    }

    .searchandfilter select,
    .searchandfilter input[type="text"]{

        width:100%;
    }
}

/* =========================================================
04 作品一覧 横スクロール
========================================================= */

.works-grid{

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto;

    overflow-y:hidden;

    gap:24px;

    margin-top:40px;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;

    scroll-behavior:smooth;
}

/* スクロールバー */

.works-grid::-webkit-scrollbar{

    height:8px;
}

.works-grid::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:999px;
}

/* カード固定 */

.works-card{

    flex:0 0 220px;

    min-width:220px;

    max-width:220px;
}

/* カード */

.works-card{
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    transition:0.3s;
    box-shadow:0 3px 12px rgba(0,0,0,0.08);
}

.works-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
}

/* リンク */

.works-card a{
    color:#333;
    text-decoration:none;
}

/* サムネ */

.works-thumb{
    overflow:hidden;
    aspect-ratio:2 / 3;
    background:#f5f5f5;
}

.works-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
}

.works-card:hover img{
    transform:scale(1.05);
}

/* タイトル */

.works-title{
    font-size:15px;
    line-height:1.5;
    padding:12px 14px 6px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
    min-height:48px;
}

/* 女優 */

.works-actress{
    padding:0 14px 8px;
}

.actress-name{
    display:inline-block;
    background:#f2f2f2;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    margin-right:6px;
}

/* ジャンル */

.works-genre{
    padding:0 14px 14px;
}

.genre-name{
    display:inline-block;
    background:#ffeef2;
    color:#ff4d7a;
    padding:4px 10px;
    border-radius:20px;
    font-size:11px;
    margin-right:6px;
    margin-top:6px;
}

/* 女優名サイズ修正 */

.works-actress{
    font-size:12px;
    line-height:1.4;
}

.actress-name{
    font-size:12px !important;
    font-weight:400;
    color:#666;
}

/* =========================================================
人気ランキング
========================================================= */

/* ランク */

.rank-badge{

    position:absolute;

    top:10px;

    left:10px;

    background:#ff4d7a;

    color:#fff;

    font-size:13px;

    font-weight:700;

    padding:6px 10px;

    border-radius:999px;

    z-index:10;
}

/* カード */

.top-card{

    position:relative;
}

/* =========================================================
05 SINGLE WORKS
========================================================= */

.single-works-wrap{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:40px;
    margin-bottom:60px;
}

/* 左画像 */

.single-works-image img{
    width:100%;
    border-radius:14px;
    box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

/* 右情報 */

.single-works-info{
    background:#fff;
    padding:30px;
    border-radius:14px;
    box-shadow:0 3px 12px rgba(0,0,0,0.08);
}

/* タイトル */

.single-works-title{
    font-size:32px;
    line-height:1.5;
    margin-bottom:20px;
}

/* メタ */

.single-meta{
    margin-bottom:16px;
    font-size:15px;
    line-height:1.8;
}

/* =========================================================
CTA
========================================================= */

.works-cta{

    margin-top:30px;

    margin-bottom:40px;
}

/* ボタン */

.dmm-button{

    display:block;

    width:100%;

    text-align:center;

    background:#ff4d7a;

    color:#fff;

    padding:18px 24px;

    border-radius:999px;

    font-size:18px;

    font-weight:700;

    box-shadow:
    0 8px 24px rgba(255,77,122,0.3);

    transition:0.3s;
}

.dmm-button:hover{

    transform:translateY(-3px);

    opacity:0.9;
}

/* サブテキスト */

.cta-sub-text{

    margin-top:12px;

    text-align:center;

    color:#777;

    font-size:13px;
}

/* =========================================================
Sticky CTA
========================================================= */

.sticky-cta{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    background:#fff;

    padding:12px 16px;

    box-shadow:
    0 -4px 20px rgba(0,0,0,0.1);

    z-index:9999;
}

/* ボタン */

.sticky-cta a{

    display:block;

    width:100%;

    background:#ff4d7a;

    color:#fff;

    text-align:center;

    padding:16px;

    border-radius:999px;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:0.3s;
}

.sticky-cta a:hover{

    opacity:0.9;

    transform:translateY(-2px);
}

/* PCでは非表示 */

@media screen and (min-width:769px){

    .sticky-cta{

        display:none;
    }
}

/* Sticky CTA分余白 */

body{

    padding-bottom:100px;
}

/* =========================================================
06 RELATED WORKS
========================================================= */

.related-works{
    margin-top:80px;
}

/* タイトル */

.related-title{
    font-size:26px;
    font-weight:700;
    margin-bottom:20px;
}

/* 横スクロール */

.related-scroll{

    display:flex !important;

    flex-wrap:nowrap !important;

    gap:20px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:10px;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;
}

/* スクロールバー */

.related-scroll::-webkit-scrollbar{
    height:8px;
}

.related-scroll::-webkit-scrollbar-thumb{
    background:#ddd;
    border-radius:999px;
}

/* カード */

.related-card{

    min-width:220px;

    max-width:220px;

    flex:0 0 220px;

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    flex-shrink:0;

    transition:0.3s;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.08);

    position:relative;
}

.related-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
}

/* サムネ */

.related-thumb{
    overflow:hidden;
    aspect-ratio:2 / 3;
}

.related-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
}

.related-card:hover img{
    transform:scale(1.05);
}

/* タイトル */

.related-card-title{
    font-size:14px;
    line-height:1.5;
    padding:12px;
    color:#333;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
    min-height:48px;
}


/* =========================================================
07 TOP PAGE
========================================================= */

.top-section{
    margin-bottom:60px;
}

.section-title{
    font-size:26px;
    font-weight:700;
    margin-bottom:20px;
}

/* 横スクロール */

.top-scroll{
    display:flex;
    gap:20px;
    overflow-x:auto;
    padding-bottom:10px;
}

/* カード */

.top-card{
    min-width:220px;
    max-width:220px;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    flex-shrink:0;
    transition:0.3s;
    box-shadow:0 3px 12px rgba(0,0,0,0.08);
}

.top-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 24px rgba(0,0,0,0.15);
}

/* サムネ */

.top-image{
    overflow:hidden;
    aspect-ratio:2 / 3;
}

.top-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
}

.top-card:hover img{
    transform:scale(1.05);
}

/* タイトル */

.top-title{
    font-size:14px;
    line-height:1.5;
    padding:12px;
    color:#333;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
    min-height:48px;
}


/* =========================================================
08 PAGINATION
========================================================= */

.works-pagination{
    margin-top:50px;
    text-align:center;
}

/* =========================================================
09 actress
========================================================= */


/* 女優ヘッダー */

.actress-header{

    background:#fff;

    padding:40px;

    border-radius:20px;

    margin-bottom:40px;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.08);
}

/* 横並び */

.actress-profile{

    display:flex;

    gap:40px;

    align-items:flex-start;
}

/* 画像 */

.actress-image{

    width:220px;

    flex-shrink:0;
}

.actress-image img{

    width:100%;

    aspect-ratio:2 / 3;

    object-fit:cover;

    border-radius:20px;

    display:block;
}

/* 情報 */

.actress-info{

    flex:1;
}

/* 名前 */

.actress-title{

    font-size:36px;

    font-weight:700;

    margin-bottom:20px;
}

/* 説明 */

.actress-description{

    line-height:1.9;

    color:#666;

    margin-bottom:20px;
}

/* 件数 */

.actress-count{

    color:#999;

    font-size:14px;
}

/* =========================================================
人気女優
========================================================= */

/* =========================================================
横スクロール
========================================================= */

.popular-actress-grid{

    display:flex !important;

    flex-wrap:nowrap !important;

    overflow-x:auto;

    overflow-y:hidden;

    gap:24px;

    margin-top:30px;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;
}

/* スクロールバー */

.popular-actress-grid::-webkit-scrollbar{

    height:8px;
}

.popular-actress-grid::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:999px;
}

/* カード固定 */

.popular-actress-card{

    flex:0 0 180px;

    min-width:180px;

    max-width:180px;
}

/* カード */

.popular-actress-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 3px 10px rgba(0,0,0,0.05);

    transition:0.3s;
}

.popular-actress-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.12);
}

/* 画像枠 */

.popular-actress-thumb{

    width:100%;

    aspect-ratio:2 / 3;

    overflow:hidden;

    background:#eee;
}

/* 画像 */

.popular-actress-thumb img{

    width:100% !important;

    height:100% !important;

    object-fit:cover;

    display:block;
}

/* 名前 */

.popular-actress-name{

    padding:14px;

    font-size:15px;

    font-weight:700;

    text-align:center;

    color:#222;
}

/* =========================================================
10 GENRE PAGE
taxonomy-genre.php
========================================================= */

/* =========================================================
ジャンルヘッダー
========================================================= */

.genre-header{

    background:#fff;

    padding:40px;

    border-radius:20px;

    margin-bottom:40px;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.08);
}

/* 情報 */

.genre-info{

    width:100%;
}

/* タイトル */

.genre-title{

    font-size:38px;

    font-weight:700;

    line-height:1.4;

    margin-bottom:20px;

    color:#222;
}

/* 説明 */

.genre-description{

    font-size:15px;

    line-height:1.9;

    color:#666;

    margin-bottom:20px;
}

/* 件数 */

.genre-count{

    font-size:14px;

    color:#999;
}


/* =========================================================
作品一覧セクション
========================================================= */

.genre-works-section{

    margin-top:60px;
}


/* =========================================================
作品なし
========================================================= */

.no-posts{

    background:#fff;

    padding:40px;

    border-radius:16px;

    text-align:center;

    color:#777;

    font-size:15px;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.06);
}


/* =========================================================
スマホ
========================================================= */

@media screen and (max-width:768px){

    .genre-header{

        padding:24px;
    }

    .genre-title{

        font-size:28px;
    }

    .genre-description{

        font-size:14px;

        line-height:1.8;
    }

    .genre-works-section{

        margin-top:40px;
    }
}

/* =========================================================
人気ジャンル
========================================================= */

.popular-genre-section{

    margin-top:80px;
}

/* 横スクロール */

.popular-genre-scroll{

    display:flex;

    gap:16px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;

    scroll-behavior:smooth;
}

/* スクロールバー */

.popular-genre-scroll::-webkit-scrollbar{

    height:6px;
}

.popular-genre-scroll::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:999px;
}

/* カード */

.popular-genre-card{

    flex:0 0 auto;

    background:#fff;

    border-radius:999px;

    padding:16px 22px;

    color:#333;

    text-decoration:none;

    box-shadow:
    0 3px 10px rgba(0,0,0,0.08);

    transition:0.3s;
}

/* hover */

.popular-genre-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 8px 20px rgba(0,0,0,0.12);

    background:#ff4d7a;

    color:#fff;
}

/* 名前 */

.popular-genre-name{

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;
}

/* 件数 */

.popular-genre-count{

    font-size:12px;

    opacity:0.7;
}

/* =========================================================
関連ジャンル
========================================================= */

.related-genres{

    margin-top:80px;
}

/* 横スクロール */

.related-genres-scroll{

    display:flex;

    gap:16px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;

    scroll-behavior:smooth;
}

/* スクロールバー */

.related-genres-scroll::-webkit-scrollbar{

    height:6px;
}

.related-genres-scroll::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:999px;
}

/* カード */

.related-genre-card{

    flex:0 0 auto;

    background:#fff;

    border-radius:999px;

    padding:16px 22px;

    color:#333;

    text-decoration:none;

    box-shadow:
    0 3px 10px rgba(0,0,0,0.08);

    transition:0.3s;
}

/* hover */

.related-genre-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 8px 20px rgba(0,0,0,0.12);

    background:#ff4d7a;

    color:#fff;
}

/* 名前 */

.related-genre-name{

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;
}

/* 件数 */

.related-genre-count{

    font-size:12px;
	
	color:#999;
	
	margin-top:4px;

    opacity:0.7;
}

/* =========================================================
11 LABEL PAGE
taxonomy-label.php
========================================================= */

/* =========================================================
レーベルヘッダー
========================================================= */

.label-header{

    background:#fff;

    padding:40px;

    border-radius:20px;

    margin-bottom:40px;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.08);
}

/* 情報 */

.label-info{

    width:100%;
}

/* タイトル */

.label-title{

    font-size:38px;

    font-weight:700;

    line-height:1.4;

    margin-bottom:20px;

    color:#222;
}

/* 説明 */

.label-description{

    font-size:15px;

    line-height:1.9;

    color:#666;

    margin-bottom:20px;
}

/* 件数 */

.label-count{

    font-size:14px;

    color:#999;
}

/* =========================================================
作品一覧セクション
========================================================= */

.label-works-section{

    margin-top:60px;
}


/* =========================================================
LABEL LINK
single works
========================================================= */

.label-link{

    display:inline-block;

    background:#f3f3f3;

    color:#555;

    padding:6px 12px;

    border-radius:999px;

    font-size:13px;

    margin-right:8px;

    margin-top:6px;

    transition:0.3s;
}

.label-link:hover{

    background:#ff4d7a;

    color:#fff;
}


/* =========================================================
スマホ
========================================================= */

@media screen and (max-width:768px){

    .label-header{

        padding:24px;
    }

    .label-title{

        font-size:28px;
    }

    .label-description{

        font-size:14px;

        line-height:1.8;
    }

    .label-works-section{

        margin-top:40px;
    }
}

/* =========================================================
人気レーベル
========================================================= */

.popular-label-section{

    margin-top:80px;
}

/* 横スクロール */

.popular-label-scroll{

    display:flex;

    gap:16px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;

    scroll-behavior:smooth;
}

/* スクロールバー */

.popular-label-scroll::-webkit-scrollbar{

    height:6px;
}

.popular-label-scroll::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:999px;
}

/* カード */

.popular-label-card{

    flex:0 0 auto;

    background:#fff;

    border-radius:999px;

    padding:16px 22px;

    color:#333;

    text-decoration:none;

    box-shadow:
    0 3px 10px rgba(0,0,0,0.08);

    transition:0.3s;
}

/* hover */

.popular-label-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 8px 20px rgba(0,0,0,0.12);

    background:#ff4d7a;

    color:#fff;
}

/* 名前 */

.popular-label-name{

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;
}

/* 件数 */

.popular-label-count{

    font-size:12px;

    opacity:0.7;
}

/* =========================================================
折りたたみ検索
========================================================= */

/* 外枠 */

.search-toggle-wrap{

    margin-bottom:30px;
}

/* ボタン */

.search-toggle-btn{

    width:100%;

    background:#fff;

    border:none;

    padding:16px 20px;

    border-radius:16px;

    font-size:16px;

    font-weight:700;

    text-align:left;

    cursor:pointer;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.08);

    transition:0.3s;
}

.search-toggle-btn:hover{

    transform:translateY(-2px);
}

/* 中身 */

.search-toggle-content{

    display:none;

    margin-top:16px;
}


/* =========================================================
人気検索
========================================================= */

.popular-shortcuts{

    margin-bottom:40px;
}

.popular-shortcuts-title{

    font-size:20px;

    font-weight:700;

    margin-bottom:16px;
}


/* =========================================================
スマホ検索UI
========================================================= */

@media screen and (max-width:768px){

    .search-filter-wrap{

        overflow-x:auto;
    }

    .searchandfilter{

        flex-wrap:nowrap !important;

        overflow-x:auto;

        gap:12px;
    }

    .searchandfilter select,
    .searchandfilter input[type="text"]{

        min-width:160px;

        flex-shrink:0;
    }

    .searchandfilter input[type="submit"]{

        flex-shrink:0;
    }
}

/* =========================================================
Search & Filter
========================================================= */

.search-filter-wrap{

    background:#fff;

    padding:24px;

    border-radius:20px;

    margin-bottom:40px;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.08);
}

/* フォーム */

.searchandfilter{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    align-items:center;
}

/* select */

.searchandfilter select,
.searchandfilter input[type="text"]{

    min-width:220px;

    padding:12px 16px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#fff;

    font-size:14px;
}

/* 検索ボタン */

.searchandfilter input[type="submit"]{

    background:#ff4d7a;

    color:#fff;

    border:none;

    padding:12px 24px;

    border-radius:999px;

    cursor:pointer;

    font-weight:700;

    transition:0.3s;
}

.searchandfilter input[type="submit"]:hover{

    opacity:0.9;

    transform:translateY(-2px);
}

/* =========================================================
PCでは検索を常時表示
========================================================= */

@media screen and (min-width:769px){

    .search-toggle-content{

        display:block !important;
    }

    .search-toggle-btn{

        display:none;
    }
}

/* =========================================================
現在の検索条件
========================================================= */

.active-filters{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:24px;
}

.active-filter{

    display:inline-block;

    background:#ffeef2;

    color:#ff4d7a;

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;
}

/* =========================================================
キーワード検索
========================================================= */

.keyword-search-wrap{

    margin-bottom:24px;
}

.keyword-search-form{

    display:flex;

    gap:12px;
}

.keyword-search-form input[type="text"]{

    flex:1;

    padding:14px 18px;

    border:1px solid #ddd;

    border-radius:14px;

    font-size:15px;

    background:#fff;
}

/* ボタン */

.keyword-search-form button{

    background:#ff4d7a;

    color:#fff;

    border:none;

    padding:14px 24px;

    border-radius:999px;

    font-weight:700;

    cursor:pointer;

    transition:0.3s;

    box-shadow:
    0 3px 12px rgba(0,0,0,0.08);
}

/* hover */

.keyword-search-form button:hover{

    opacity:0.9;

    transform:translateY(-2px);

    box-shadow:
    0 8px 24px rgba(0,0,0,0.15);
}


/* スマホ */

@media screen and (max-width:768px){

    .keyword-search-form{

        flex-direction:column;
    }

    .keyword-search-form button{

        width:100%;
    }
}

/* =========================================================
共通badge
========================================================= */

.item-badge{

    display:inline-flex;

    align-items:center;

    gap:4px;

    font-size:11px;

    font-weight:700;

    padding:4px 10px;

    border-radius:999px;

    margin-bottom:10px;

    line-height:1;
}

/* HOT */

.item-badge.hot{

    background:#ff4d7a;

    color:#fff;
}

/* 人気 */

.item-badge.popular{

    background:#ffb800;

    color:#fff;
}

/* 注目 */

.item-badge.trend{

    background:#6c63ff;

    color:#fff;
}

/* NEW */

.item-badge.new{

    background:#00b894;

    color:#fff;
}

/* =========================================================
Hero Section
========================================================= */

.hero-section{

    margin-bottom:50px;
}

.hero-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    min-height:520px;

    background:#111;
}

/* 背景 */

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;
}

/* overlay */

.hero-bg::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.88) 0%,

            rgba(0,0,0,.55) 35%,

            rgba(0,0,0,.25) 60%,

            rgba(0,0,0,.45) 100%

        );
}

/* image */

.hero-bg img{

    width:100%;

    height:100%;

    object-fit:contain;

    position:relative;

    z-index:1;
}

/* コンテンツ */

.hero-content{

    position:relative;

    z-index:5;

    max-width:600px;

    padding:80px 60px;

    color:#fff;
}

/* タイトル */

.hero-title{

    font-size:48px;

    line-height:1.2;

    margin:20px 0;
	
	text-shadow:

        0 4px 20px rgba(0,0,0,.7);
}

/* 説明 */

.hero-excerpt{

    font-size:15px;

    line-height:1.9;

    color:rgba(255,255,255,.85);

    margin-bottom:30px;
	
	text-shadow:

        0 2px 10px rgba(0,0,0,.7);
}

/* ボタン */

.hero-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 32px;

    border-radius:999px;

    background:#fff;

    color:#111;

    font-weight:700;

    text-decoration:none;

    transition:.3s;
}

.hero-button:hover{

    transform:translateY(-2px);

    opacity:.9;
}

/* スマホ */

@media(max-width:768px){

    .hero-card{

        min-height:420px;
    }

    .hero-content{

        padding:40px 24px;
    }

    .hero-title{

        font-size:28px;
    }

}

.hero-bg img{

    animation:heroZoom 12s ease-in-out infinite alternate;
}

@keyframes heroZoom{

    from{

        transform:scale(1);
    }

    to{

        transform:scale(1.08);
    }
}

/* =========================================================
Hero Swiper
========================================================= */

.hero-section{

    position:relative;

    overflow:hidden;
}

/* pagination */

.hero-section .swiper-pagination{

    bottom:20px !important;
}

/* arrows */

.hero-section .swiper-button-prev,
.hero-section .swiper-button-next{

    color:#fff;
}

/* fade対策 */

.swiper-slide{

    height:auto;
}

/* =========================================================
Hero Slide Fix
========================================================= */

.heroSwiper .swiper-slide{

    background:#000;
}


/* =========================================================
Hero Meta
========================================================= */

/* actress */

.hero-actress{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:18px;
}

.hero-actress a{

    color:#fff;

    font-size:14px;

    text-decoration:none;

    opacity:.9;
}

/* genres */

.hero-genres{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:18px;
}

.hero-genre{

    display:inline-flex;

    align-items:center;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:12px;

    text-decoration:none;

    backdrop-filter:blur(6px);
}

/* labels */

.hero-labels{

    margin-bottom:14px;
}

.hero-label{

    font-size:13px;

    color:#ddd;
}

.hero-card{

    position:relative;

    background:#000;

    overflow:hidden;
}

/* =========================================================
99 RESPONSIVE
========================================================= */

@media screen and (max-width:768px){

    /* タイトル */

    .section-title{

        font-size:24px;
    }

    /* 女優プロフィール */

    .actress-profile{

        flex-direction:column !important;

        gap:20px;
    }

    .actress-image{

        width:180px;

        margin:0 auto;
    }

    .actress-info{

        width:100%;
    }

    .actress-title{

        font-size:28px;
    }

/* =========================================================
関連レーベル
========================================================= */

.related-labels{

    margin-top:80px;
}

/* 横スクロール */

.related-labels-scroll{

    display:flex;

    gap:16px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;

    scroll-behavior:smooth;
}

/* スクロールバー */

.related-labels-scroll::-webkit-scrollbar{

    height:6px;
}

.related-labels-scroll::-webkit-scrollbar-thumb{

    background:#ddd;

    border-radius:999px;
}

/* カード */

.related-label-card{

    flex:0 0 auto;

    background:#fff;

    border-radius:999px;

    padding:16px 22px;

    color:#333;

    text-decoration:none;

    box-shadow:
    0 3px 10px rgba(0,0,0,0.08);

    transition:0.3s;
}

/* hover */

.related-label-card:hover{

    transform:translateY(-3px);
	
heroSwiper{
	
    box-shadow:
    0 8px 20px rgba(0,0,0,0.12);

    background:#000;

    color:#fff;
}
.heroSwiper .swiper-slide{
	
	background:#000; 
}
	
/* 名前 */

.related-label-name{

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;
}

/* 件数 */

.related-label-count{

    font-size:12px;

    opacity:0.7;
}

/* =========================================================
女優ページ スマホ修正
========================================================= */

@media screen and (max-width:768px){

    .actress-profile{

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        gap:20px;
    }

    /* 画像 */

    .actress-image{

        width:180px !important;

        max-width:100%;

        margin:0 auto;
    }

    /* 情報 */

    .actress-info{

        width:100%;

        min-width:0;
    }

    /* タイトル */

    .actress-title{

        font-size:28px;

        line-height:1.5;
    }

    /* 説明文 */

    .actress-description{

        font-size:14px;

        line-height:1.9;

        word-break:break-word;
    }
}