@charset "utf-8";

/* リセット
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
    box-sizing: border-box;
}

body , html {
    width: 100%;
    height: auto;
    font-size: 62.5%;
    color: #323232;
    scroll-behavior: smooth;
}
body{
    margin:0;
    padding:0;
    font-family: "Noto Sans JP", sans-serif;
    min-height: 100vh;
    background-color: #4A4A4A;
    display: flex;
    flex-direction: column;
}
html {
    scroll-padding-top: 80px;
}

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

.favorite_btn img,
.logo img,
.left_menu img,
footer img.logo {
    -webkit-user-drag: none;
    user-select: none;
}

img[src$=".svg"] {
    width: 100%;
}

a:link { color: #323232;text-decoration: none; }
a:visited { color: #323232;text-decoration: none; }
a:hover { color: #323232; text-decoration: none;}
a:active { color: #323232; text-decoration: none;}

input[type="checkbox"]{display: none}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .45);
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pc {
    display: block;
}
.sp ,
.page_top_bar {
    display: none;
}

.history {
    cursor: pointer;
}

/* ヘッダー --------------------------------------------------- */
header.hd_wrapper {
    display: flex;
    width: 100%;
}

header.hd_wrapper .pc {
    display: flex!important;
    justify-content: space-between!important;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    background-color: #ffffff;
    height: 80px;
    position: fixed;
    z-index: 99;
}
header.hd_wrapper .pc ul.left_menu ,
header.hd_wrapper .pc .right_menu {
    display: flex;
    padding-left: 0;
    align-items: center;
    margin-bottom: 0;
    margin-top: 0;
    gap: 20px;
}
header.hd_wrapper .pc .right_menu:first-of-type {
    gap: 10px;
}
header.hd_wrapper .pc .right_menu .login_btn a ,
header.hd_wrapper .pc .right_menu .login_btn ,
header.hd_wrapper .pc .right_menu .info_btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    gap: 4px;
}
header.hd_wrapper .pc .right_menu .info_btn p ,
header.hd_wrapper .pc .right_menu .login_btn p {
    display: inline-block;
    color: #4A4A4A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
}
header.hd_wrapper .pc ul.left_menu img ,
header.hd_wrapper .pc .right_menu img {
    width: 100%;
    max-width: 100%;
}
header.hd_wrapper ul li {
    list-style: none;
    width: 100%;
    max-width: max-content;
}
header.hd_wrapper ul li img {
    width: 100%;
    max-height: 50px;
}
/* ハンバーガーメニューボタンの土台 */
.hd_wrapper .pc .right_menu .ham_menu_btn {
    width: 100%;
    max-width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    z-index: 110;
}
/* 3本線の共通設定 */
.ham_menu_btn span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #4A4A4A;
    position: absolute;
    left: 7px;
    transition: all 0.3s;
}
.ham_menu_btn span:nth-child(1) { top: 10px; }
.ham_menu_btn span:nth-child(2) { top: 20px; }
.ham_menu_btn span:nth-child(3) { top: 30px; }

/* クリック時（activeクラス）の3本線変化 */
.ham_menu_btn.active span:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
}
.ham_menu_btn.active span:nth-child(2) {
    opacity: 0;
}
.ham_menu_btn.active span:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
}

/* メニューのスタイル */
.ham_menu {
    position: fixed;
    top: 80px;
    right: -100%; /* 初期位置は隠す */
    width: 250px;
    height: auto;
    padding: 10px 0;
    background-color: #fff;
    transition: right 0.3s;
    z-index: 109;
}
.ham_menu.is-open {
    right: 0; /* 表示時 */
}

.ham_menu ul {
    padding-left: 20px;
    margin: 0;
}
.ham_menu li {
    height: 35px;
}
.ham_menu li .ham_menu_link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 15px;
}

/* ▼ 全面メニューの背景設定 START ▼ ---------------------------- */
.search_contents {
    position: fixed;
    left: 0;
    bottom: -100%;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 80px;
    overflow-y: auto;
}
.search_contents.active {
    bottom: 0;
    padding-top: 10px;
    z-index: 10;
    overflow-y: auto;
}
.search_contents .search_inner {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 100px;

    height: auto;
    overflow: visible;
}
.search_contents .search_top_area {
    display: flex;
    flex-direction: column;
    align-items: center; /* c から修正 */
    width: 100%;
    flex-shrink: 0;
    background: #fff;
    z-index: 10;
    padding-bottom: 15px;
}
.search_contents .search_bottom_area {
    height: 100%;
    overflow: auto;
}
/* 3. 閉じるボタン */
.search_close_btn {
    position: absolute;
    top: 100px;
    right: max(10px, calc(50% - 580px));
    width: 40px;
    height: 56px;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.search_close_btn::before,
.search_close_btn::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 40px;
    height: 2px;
    background-color: #4A4A4A;
}
.search_close_btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.search_close_btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.search_close_btn:hover::before,
.search_close_btn:hover::after {
    background-color: #A61918;
}
.search_close_label {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: #4A4A4A;
    line-height: 1;
    user-select: none;
}
.search_close_btn:hover .search_close_label {
    color: #A61918;
}
.search_contents h2 {
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 500;
    margin-top: 47px;
    margin-bottom: 37px;
}
.search_contents h3 {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 15px;
}
.search_contents .search_textarea {
    height: 70px;
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    border: 1px solid #ccc;
    background-color: #fcfcfc;
}
.search_contents a.search_button {
    display: none;
    align-items: center;
    justify-content: center;
    margin : 15px 0;
    padding: 6px 20px;
    border-radius: 50px;
    border: 1px solid #ccc;
    background-color: #A61918;
    box-shadow: 0 1px 2px #00000029;
    height: 38px;
    width: 100%;
    max-width: 236px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

.search_contents a.search_button.active {
    display: flex;
    font-weight: 500;
    position: absolute;
    bottom: 70px;
}

.search_contents a.search_button:hover {
    background-color: #A61918;
    color: #fff;
}

.search_contents a.search_button img {
    width: 13.1px;
    height: 13.98px;
    margin-left: 3px;
}

/* 7. タグ選択エリア（お皿） */
.search_contents .selected_tag_area {
    background-color: #F4F4F4;
    width: 100%;
    max-width: 722px;
    min-height: 93px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 17px 26px;
    margin-bottom: 51px;
    border-radius: 8px;
    box-sizing: border-box;
}

.search_contents .selected_tag_area .dish_tag {
    background-color: #fff;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: max-content;
    padding: 0 1.7rem;
    border-radius: 50px;
    color: #00000099;
    font-size: 12px;
    border: 1px solid transparent;
    transition: all 1.5s;
}

.search_contents .selected_tag_area .dish_tag .tag_close {
    margin-left: 10px;
    cursor: pointer;
}

/* 8. カテゴリ別タグ一覧エリア */
.search_tag_area_wrap {
    display: flex;
    width: 100%;
    /* max-width: 100%; */
    padding: 0 5%;
    height: 91vh;
    overflow-y: auto;
    margin-bottom: 3%;

    max-width: 1100px;
    padding: 0%;
    height: 91vh;
    overflow-y: auto;
    gap: 5rem;
    padding: 0 20px;
    margin: 0 auto 3%;
    gap: 67px;
}

.search_tag_area_wrap .search_tag_area {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    gap: 0;
}

.search_tag_area_wrap .search_tag_area .search_category {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-bottom: 36px;
}

.search_tag_area_wrap .search_tag_area .search_category:last-of-type {
    padding-bottom: 3rem;
}

.search_tag_area_wrap .search_tag_area .search_category h3 {
    font-size: 16px;
}

.search_tag_area_wrap .search_tag_area .search_category .tag_wrap {
    width: 100%;
    padding-left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 9. タグボタン単体の設定（修正反映済み） */
.search_tag_area_wrap .search_tag_area .search_category .tag_wrap .tag_button {
    width: 100%;
    max-width: max-content;
    height: 30px;
    padding: 6px 12px;
    background-color: #fff;
    box-shadow: 0 1px 2px #00000029;
    color: #00000099;
    border-radius: 50px;
    font-size: 12px;
    border: 1px solid #eee;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, border 0.3s;
    cursor: pointer;
    outline: none !important;
}
/* 9. タグボタン単体の設定 */
.search_tag_area_wrap .search_tag_area .search_category .tag_wrap .tag_button:not(.is-active) {
    border: 1px solid #eee !important;
    box-shadow: 0 1px 2px #00000029;
}

.search_tag_area_wrap .search_tag_area .search_category .tag_wrap .tag_button:hover {
    border: 1px solid #A61918 !important;
    box-shadow: none;
}

.search_tag_area_wrap .search_tag_area .search_category .tag_wrap .tag_button.is-active {
    border: 1px solid #A61918 !important;
    box-shadow: none;
}

/* 10. メニュー開閉用アイコン切り替え（検索ボタン） */
.SearchButton .img_normal {
    display: inline-block;
    width: 26px;
}
.SearchButton .img_active {
    display: none;
}
.SearchButton.active .img_normal {
    display: none;
}
.SearchButton.active .img_active {
    display: inline-block;
    width: 26px;
}

/* ▲ 全面メニューの背景設定 END ▲ -------------------------------------- */

.search_contents {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    pointer-events: none; /* 閉じている時は下の要素を触れるようにする */
    visibility: hidden;  /* 物理的に隠す */
    display: none;
}

.search_contents.active {
    pointer-events: auto; /* 開いた時だけ操作可能にする */
    visibility: visible;
    display: flex;
    flex-direction: column;
}

.search_contents .search_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.95); /* 背後を少し透かす */
    margin-top: 4rem;
}

.search_contents .search_inner .selected_tag_area {
    flex-shrink: 0;
    min-height: 93px;
    height: auto;
    width: 90%;
    max-width: 722px;
    margin: 20px auto 51px;
    background-color: #F4F4F4;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 17px 26px;
    border-radius: 8px;
    box-sizing: border-box;
}

.search_contents .search_inner .search_tag_area_wrap_pc {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 0 5%;
    display: block;
}


/*　▼ MHWメイン START ▼ ----------------------------------------------- */
main {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    overflow-x: hidden;
    flex: 1;
}
main.login_page .favorite_history_btn_area ,
main.login_page .home_btn a ,
main.login_page .page_top_btn a {
    display: none;
}
/* --- メインビジュアル全体の箱 --- */
.main-visual {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}
/* --- 背景画像（写真）の設定 --- */
.main-visual .bg-img {
    width: 100%;
    height: 92vh;
    display: block;
    object-fit: cover;
    margin-top: 70px;
    aspect-ratio: 16 / 6.7;
}
/* --- コンテンツ（ロゴと文字）の箱 --- */
.main-visual-content {
    position: absolute;
    top: calc(50% + 35px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 90%;
    max-width: 700px;
    text-align: center;
}
/* --- ロゴ画像の設定（比率の干渉を断つ） --- */
.main-visual .logo-img {
    width: 100%;
    max-width: 50%;
    /* width: clamp(800px, 25vh, 30%); */
    width: clamp(250px, 40vh, 800px);
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 auto 20px;
    display: block;
    animation: zoomInAnim 0.7s ease-out forwards;
}
/* --- アニメーションの定義 --- */
@keyframes zoomInAnim {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* --- テキストの設定 --- */
.main-visual-content h2.main-text {
    color: #fff;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}


/*  動画 スライダーエリア
---------------------------------------------------------- */
.swiper {
    height: auto;
}
.slide_wrap.short .swiper {
    height: auto;
}

section.movie_wrapper {
    padding: 0;/* スライドの左右ボタンをぎりぎりに設置 */
    width: 100%;
    background-color: #4A4A4A;
    position: relative;
    left: auto;
    transform: none;
    overflow: visible!important;/* 右にはみ出させる */
    isolation: isolate;
}
section.movie_wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(45,45,45,1) 0%, rgba(0,0,0,0) 5%, rgba(0,0,0,0) 95%, rgba(45,45,45,1) 100%);
    z-index: 15;
    pointer-events: none;
}

section.movie_wrapper h2 {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}
/* スライドの横幅 */
section.movie_wrapper .movie_area.swiper {
    width: 100%;
    /* 左右に余白を作ることで、実質的な動画表示エリアを狭くする */
    padding: 0 5.5% !important;
    overflow: visible !important;
    height: auto;
    z-index: auto !important;
}
/* スライド（ショート動画）の横幅 */
.slide_wrap.short .movie_area.swiper.swiper-initialized.swiper-horizontal.swiper-watch-progress {
    width: 100%;
    padding: 0 4.5% !important;
    overflow: visible !important;
    height: auto;
}

.detail.movie_wrapper .slide_wrap.short ,
.movie_wrapper .slide_wrap.short {
    height: auto;
    width: 70% !important;
}
.index .slide_wrap.short,
.detail .slide_wrap.short {
    margin-left: 2.125%;
}
/* 最初と最後の左右スライド */
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
/* --- 各スライド（動画カード）の設定 --- */
/* スライダーの左右余白 */
.swiper-wrapper ,
.detail .swiper-wrapper {
    padding: 0px;
}

section.movie_wrapper .movie_area .movie.swiper-slide {
    color: #fff;
    position: relative;
    margin: 0px;
    /* margin-right: 14px!important; */
    margin-left: 0!important;
    height: auto;
}
section.movie_wrapper .movie_area.pickup .movie.swiper-slide {
    transform: none!important;
}

section.movie_wrapper .movie_area .movie.swiper-slide.title_description {
    cursor: default;
}
.detail section.movie_wrapper .movie_area .movie.swiper-slide.title_description h3 {
    font-size: 15px;
    font-weight: 400;
}
.detail section.movie_wrapper .movie_area .movie.swiper-slide.title_description p {
    font-size: 14px;
    font-weight: 300;
}

/* --- ホバー時カード全体を大きくする --- */
.index section.movie_wrapper .movie_area .movie.swiper-slide ,
.detail section.movie_wrapper .movie_area:not(.pickup) .movie.swiper-slide {
    transition: transform 0.5s, background-color 0.5s;
}
/* 動画 */
.index section.movie_wrapper .movie_area .movie.swiper-slide:not(.short_movie):hover ,
.detail section.movie_wrapper .movie_area:not(.pickup) .movie.swiper-slide:not(.short_movie):hover {
    z-index: 20 !important;
    /* background-color: #383838; */
    transform: scale(1.3) translateY(-40px);
    padding: 10px;
}

/* ショート */
.detail section.movie_wrapper .movie_area:not(.pickup) .movie.short_movie.swiper-slide:not(.short_movie):hover {
    z-index: 20 !important;
    /* background-color: #383838; */
    transform: scale(1.3) translateY(-40px);
    padding: 16px 20px 0px;
}

.index section.movie_wrapper .movie_area .movie.swiper-slide:hover a img ,
.detail section.movie_wrapper .movie_area:not(.pickup) .movie.swiper-slide:hover a img {
    transform: scale(1);
}

.index section.movie_wrapper .movie_area button.favorite_btn img:hover ,
.detail section.movie_wrapper .movie_area button.favorite_btn img:hover {
    width: 26.58px;
}

/* テキスト・ホバーボックスの調整 */
.index section.movie_wrapper .movie_area .movie.swiper-slide h3,
.index section.movie_wrapper .movie_area .movie.swiper-slide .hover_box ,
.detail section.movie_wrapper .movie_area .movie.swiper-slide h3,
.detail section.movie_wrapper .movie_area .movie.swiper-slide .hover_box {
    transform: scale(1);
    transform-origin: left top;
    width: 100%;
}

.index section.movie_wrapper .movie_area .movie.swiper-slide .hover_box h3 {
    margin-bottom: 6px;
}
.detail section.movie_wrapper .movie_area .movie.swiper-slide h3 {
    margin-bottom: 6px;
    font-size: 14px;
    padding: 0 5px;
}

.index section.movie_wrapper .movie_area .movie.swiper-slide h3 {
    color: #fff;
    margin: 16px 0 10px 0;
    padding:0 5px;
    font-size: 14px;
    display: block;
}
.index section.movie_wrapper .movie_area .movie.swiper-slide h3.top10 {
    display: flex;
    align-items: center;
}
.index section.movie_wrapper .movie_area .movie.swiper-slide h3.top10 .ranking_num {
    padding-right: 14px;
    color: #4A4A4A;
    font-size: 33pt;
    font-weight: 500;
    text-shadow: 
        1px  1px 1px #fff,
        -1px  1px 1px #fff,
        1px -1px 1px #fff,
        -1px -1px 1px #fff,
        1px  0px 1px #fff,
        0px  1px 1px #fff,
        -1px  0px 1px #fff,
        0px -1px 1px #fff;
}

.index section.movie_wrapper .movie_area .movie.swiper-slide .hover_box ,
.detail section.movie_wrapper .movie_area .movie.swiper-slide .hover_box {
    display: none;
}

.index section.movie_wrapper .movie_area .movie.swiper-slide:hover .hover_box ,
.detail section.movie_wrapper .movie_area .movie.swiper-slide:hover .hover_box {
    display: block!important;
}
/* タグデザイン */
.index .hover_box ul ,
.detail .hover_box ul {
    display: block;
    gap: 5px;
    list-style: none;
    padding: 0;
    width: 100%;
    transform: scale(1);
}
.index .hover_box li,
.detail .hover_box li {
    font-size: 10px;
    background-color: #fff;
    color: #333;
    border-radius: 50px;
    height: 22px;
    line-height: 20px !important;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    transition: all 0.3s;
    border: 1px solid transparent;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 0 4px 4px 0 !important;
    background-color: #fff !important;
    color: #333 !important;
    white-space: nowrap !important;
}
.detail .hover_box li {
    font-size: 13px;
    height: 26px;
    padding: 2px 10px;
}

.index .hover_box li a ,
.detail .hover_box li a {
    height: 100%;
    padding: 0;
    justify-content: center;
    align-items: center;
    color: inherit;
    text-decoration: none;
    display: inline !important; /* aタグも幅を持たせない */
    text-decoration: none !important;
}

.index .hover_box li:hover ,
.detail .hover_box li:hover {
    border: 1px solid #A61918;
}


/* --- ビデオ要素の設定 --- */
section.movie_wrapper .movie_area .movie video {
    width: 100%;
    display: block;
    background-color:  #E3E3E3;
    /* aspect-ratio: 16 / 9; */
    aspect-ratio: 397 / 234;
    object-fit: cover;
    position: relative;
    cursor: pointer;
}

/* Swiper標準アイコンを非表示 */
.swiper-button-prev::after,
.swiper-button-next::after {
    display: none !important;
}

/* ボタンの土台（縦長の背景エリア） */
.index .swiper-button-prev,
.index .swiper-button-next,
.detail .swiper-button-prev,
.detail .swiper-button-next {
    display: flex !important;
    background: transparent !important;
    width: 47px !important;
    /* height: 245px !important; */

    /* ガタガタを防ぐための重要設定 */
    position: absolute !important;
    top: 0 !important;
    /* transform: translateY(-50%) !important; */
    margin-top: 0 !important; /* Swiperのデフォルト計算を無効化 */

    z-index: 200;
    align-items: center;
    justify-content: center;
}

/* 矢印の線（共通設定） */
.index .swiper-button-prev::before,
.index .swiper-button-next::before,
.detail .swiper-button-prev::before,
.detail .swiper-button-next::before {
    content: "";
    width: 20px;
    height: 20px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    display: block;
    position: relative; /* absoluteから変更して中央に配置 */
    top: auto;
    right: auto;
    left: auto;
}
.index .short_prev_button,
.detail .short_prev_button {
    margin-left: -2%;
}
.short_next_button {
    margin-right: 0.5%;
}

/* 左向き ＜ の設定 */
.index .swiper-button-prev,
.detail .swiper-button-prev {
    left: 2.5% !important;
}
.index .swiper-button-prev::before,
.detail .swiper-button-prev::before {
    transform: rotate(-135deg);
    margin-left: 6px;
}

/* 右向き ＞ の設定 */
.index .swiper-button-next,
.detail .swiper-button-next {
    right: 2.5% !important;
}
.index .slide_wrap.short .swiper-button-next,
.detail .slide_wrap.short .swiper-button-next {
    right: calc(-1 * (100vw - 69%) / 2)!important;
}
.index .swiper-button-next::before,
.detail .swiper-button-next::before {
    transform: rotate(45deg);
    margin-right: 6px;
}

/* 無効時の表示 */
.swiper-button-disabled {
    opacity: 0;
}

.index .swiper-button-prev-cover,
.index .swiper-button-next-cover,
.detail .swiper-button-prev-cover,
.detail .swiper-button-next-cover {
    display: flex !important;
    background: transparent !important;
    width: calc(2.5% + 40px) !important;
    height: auto !important;

    /* 親コンテナの高さいっぱいに追従させる */
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    z-index: 100;
    align-items: center;
    justify-content: center;
}
.index .swiper-button-prev-cover,
.detail .swiper-button-prev-cover {
    left: 0;
}
.index .swiper-button-next-cover,
.detail .swiper-button-next-cover {
    right: 0;
}
.index .short_prev_cover,
.detail .short_prev_cover {
    width: calc(2.5vw + 47px) !important;
    left: -2.125vw;
}
.index .short_next_cover,
.detail .short_next_cover {
    width: calc(2.5vw + 47px) !important;
    right: calc(-1 * (100vw - 64%) / 2)!important;
}

.member-only,
.recommend {
    position: absolute;
    right: 8px;
    bottom: 8px;
    margin: 0;
    pointer-events: none;
    z-index: 20;
}

/* 二重線 */
.title_line {
    width: 100%;
    max-width: 95%!important;
    padding-top: 50px;
}
section.movie_wrapper span.line_2 {
    width: 100%;
    display: block;
    height: 1px;
    margin: 45px 0 38px;
    padding: 3px 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

/* スライドの枠。ここを高さの基準点にする */
.movie.swiper-slide {
    position: relative;
    height: auto !important;
    overflow: visible !important;
}

/* ホバーされる中身 */
.movie-inner ,
.shortmovie-inner {
    width: 100%;
    height: auto;
    background-color: transparent;
    transition: transform 0.5s ease, background-color 0.5s ease;
    box-sizing: border-box;
    position: relative; /* 通常時は相対配置 */
    z-index: 1;
}

.img_area {
    position: relative;
    display: block;
}

@media (min-width: 769px) {
  .index .movie-inner .img_area,
  .detail .movie-inner .img_area {
    width: 352.6px;
    max-width: 100%;
  }
  .search_results .img_area {
    width: 408px;
    max-width: 100%;
  }
  .detail .movie_area.pickup .member-only::after,
  .detail .movie_area.pickup .recommend::after {
    font-size: 13px;
    font-weight: 400;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
  }
  .detail .movie_area.pickup .search_tag_area {
    width: 100%;
    margin: 22px auto;
  }
  section.movie_wrapper.search_results_detail {
    position: relative;
  }
  section.movie_wrapper div.link_to_top_detail {
    position: absolute;
    top: 10rem;
  }
}

.movie-inner img.cover_img,
.shortmovie-inner img.cover_img {
    width: 352.6px;
    /* height: 200px; */
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #000;
}
.short_movie img.cover_img {
    height: auto !important;
}
.movie.swiper-slide a img.searched_cover_img {
    width: 408px;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #000;
}
.short_movie .short_title {
    cursor: pointer;
}

/* ホバー時の中身（浮かせる） */
.movie.swiper-slide:hover .movie-inner {
    position: absolute; /* レイアウトの流れから完全に切り離す */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #383838;
    z-index: 100;
    padding: 0; /* 必要に応じて調整 */
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.5s;
}
/* ショート動画はすぐに変更＆背景色は変えない */
.movie.short_movie.swiper-slide:hover .movie-inner {
    transition-delay: 0s;
    background-color: transparent;
}

/* テキスト設定 */
section.movie_wrapper h2 {
    font-size: 25px;
    color: #fff;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
}
section.movie_wrapper h2.link_to_top_spacer {
    padding-top: 18px;
}
section.movie_wrapper div.link_to_top {
    font-size: 12px;
    width: 70%;
    padding-left: 5.5%;
}
section.movie_wrapper div.link_to_top a {
    color: #fff;
    text-decoration: underline;
}

section.movie_wrapper .movie h3 {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    padding: 0 5px;
}

/* 動画右下のバッジラベル */

/* 会員限定ラベル */
.member-only::before {
    content: none;
}
.member-only::after {
    content: "会員限定";
    display: block;
    background-color: #A61918;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 50px;
    white-space: nowrap;
    position: static;
    transform: none;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.4));
}

/* おすすめラベル */
.recommend::before {
    content: none;
}
.recommend::after {
    content: "おすすめ";
    display: block;
    background-color: #fff;
    color: #A61918;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 50px;
    white-space: nowrap;
    position: static;
    transform: none;
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.3));
}

/* ショート動画用（バッジスタイルはベースに準拠） */
.movie.short_movie:hover .member-only::before,
.movie.short_movie:hover .recommend::before {
    content: none;
}

/* お気に入りハートボタン */
section.movie_wrapper .movie_area button.favorite_btn {
    position: absolute;
    z-index: 20;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
section.movie_wrapper .movie_area button.favorite_btn img {
    width: 26.58px;
    background: none;
}

section.movie_wrapper .movie_area .short_movie button.favorite_btn img {
    width: 26.58px;
    background-color: transparent;
    background: none;
    margin-right: 0px;
    margin-top: 0px;
}

button.favorite_btn {
  overflow: visible;
}
/* --- お気に入りON時の拡大アニメーション --- */
@keyframes favorite-on-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}

button.favorite_btn.favorite-on-pop .favorite_on {
    opacity: 1;
    animation: favorite-on-pop 0.5s ease-in-out;
}

/* --- お気に入りOFF時の縮小アニメーション --- */
@keyframes favorite-off-shrink {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.5); }
    100% { transform: scale(1); }
}

button.favorite_btn.favorite-off-shrink .favorite_off {
    opacity: 1;
    animation: favorite-off-shrink 0.5s ease-in-out;
}


/* --- ホバー時のお気に入りボタンの調整 --- */
.index section.movie_wrapper .movie_area .movie.swiper-slide:hover .favorite_btn,
.detail section.movie_wrapper .movie_area:not(.pickup) .movie.swiper-slide:hover .favorite_btn {
    transform: scale(1);
    transform-origin: right top;
    top: 8px;
    right: 10px;
    width: 26.58px;
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.5s;
}
/* ショート動画も上記汎用ルールに統一（個別ルールは削除して二重管理を回避） */

/* 初期状態：ON画像を隠す */
.favorite_on {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
}
/* active時：OFF画像を隠してON画像を表示 */
.favorite_btn.active .favorite_off {
    opacity: 0;
}
.favorite_btn.active .favorite_on {
    opacity: 1;
}

/* ランキング？ラベル -----------------------------*/
section.movie_wrapper .movie_area label.Ranking {
    position: absolute;
    bottom: 50px;
    left: 10px;
    z-index: 20;
    font-size: 40px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px #A61918;
}

/* ショート動画 */
section.movie_wrapper .movie_area .short_movie video,
section.movie_wrapper .movie_area .short_movie video {
    max-width: 350px;
    aspect-ratio: 274 / 424;
    background-color: #E3E3E3;
    height: auto;
}

/* 右下　ホームへもどるボタン */
.home_btn {
    right: 0;
    bottom: 165px;
    position: fixed;
    z-index: 10;
}
.home_btn a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 53px;
    background-color: #ffffff;
    border-radius: 4px 0 0 4px;
    color: #4A4A4A;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: opacity 0.3s;
    font-size: 10px;
    text-align: center;
    padding-top: 30px;
    font-weight: 350;
}
.home_btn a::before {
    display: inline-block;
    content: url(../img/home.png);
    width: 40px;
    margin-top: -30px;
    vertical-align: middle;
}

/* ホバー時：aタグにhoverした時の::beforeを変更する */
.home_btn a:hover::before {
    content: url(../img/home_w.png);
}

.home_btn a:hover {
    background-color: #8f8f8f;
    color: #fff;
}
/* 右下　トップへもどるボタン */
.page_top_btn {
    right: 0;
    bottom: 105px;
    position: fixed;
    z-index: 10;
}
.page_top_btn a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 53px;
    background-color: #ffffff;
    border-radius: 4px 0 0 4px;
    color: #4A4A4A;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: opacity 0.3s;
    font-size: 9px;
    text-align: center;
    padding-top: 30px;
    font-weight: 350;
    z-index: 300;
}
.page_top_btn a:hover {
    background-color: #868686;
    color: #fff;
}
/* 通常時 */
.page_top_btn a::before {
    display: inline-block;
    content: url(../img/top_b.png);
    width: 40px;
    margin-top: -30px;
}

/* ホバー時：aタグをホバーした時にbeforeの画像を差し替える */
.page_top_btn a:hover::before {
    content: url(../img/top_w.png);
}

/* ホバー時のaタグ自体の背景色など */
.page_top_btn a:hover {
    background-color: #868686;
    color: #fff;
}

/* 左上　お気に入りと履歴ボタン --------------------------------------- */
.favorite_history_btn_area {
    left: 0;
    top: 80px;
    position: fixed;
    z-index: 10;
}
.favorite_history_btn_area a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33px;
    height: 46px;
    background-color: #ffffff;
    border-radius: 0 4px 4px 0;
    color: #4A4A4A;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-size: 14px;
    text-align: center;
    padding-top: 0;
    font-weight: 350;
    writing-mode:vertical-rl;
    letter-spacing: 0.1em;
}
.favorite_history_btn_area a.favorite {
    height: 150px;
    margin-top: 41px;
}
.favorite_history_btn_area a.history {
    height: 60px;
    margin-top: 8px;
}

.favorite_history_btn_area a:hover {
    background-color: #868686;
    color: #fff;
}

/* ▼ フッター START ▼ --------------------------------------------------- */
footer {
    display: flex;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 155px;
    padding-bottom: 65px;
    bottom: 0;
    position: relative;
    z-index: 2;
}
footer .footer_area_wrap.pc {
    display: flex!important;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    height: 85px;
    align-items: center;
    justify-content: center;
}
footer .footer_link_area {
    display: flex;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
footer .footer_link_area ul {
    width: 100%;
    height: auto;
    display: flex;
    list-style: none;
    gap: 0px;
    padding-left: 0;
}
footer .footer_link_area li {
    width: 100%;
    max-width: max-content;
    height: auto;
    display: flex;
    display: block;
    font-size: 10px;
    font-weight: 700;
    border-right: 1px solid #4A4A4A;
    padding-right: 8px;
    padding-left: 10px;
    height: 14px;
}
footer .footer_link_area li:first-of-type {
    padding-left: 0;
}
footer .footer_link_area li:last-of-type {
    padding-right: 0;
    border-right: 0;
}
footer .footer_link_area .copyright {
    font-size: 8px;
    font-weight: 500;
    margin: 10px 0;
}
footer img.logo {
    display: block;
    width: 150px;
    height: auto;
}
/* ▲ フッター END ▲ --------------------------------------------------- */
/* タブバー */
.tab_bar {
    display: block;
    position: fixed;
    bottom: -1px;
    width: 100%;
    max-width: 100%;
    z-index: 102;
    padding-right: var(--scrollbar-compensation, 0px);
    box-sizing: border-box;
}
.tab_bar .tab_bar_item {
    display: block;
    position: static;
    bottom: 0;
    background-color: #E7E5DD;
    width: 100%;
    max-width: 100%;
    z-index: 99;
    height: 58px;
}
.tab_bar .link_btn {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0 2rem;
    margin-top: 0;
    padding: 1rem;
    height: 100%;
}
.tab_bar .link_btn a {
    display: flex;
    width: 100%;
    max-width: 200px;
    background-color: #fff;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
}
/* オンライン相談 */
.tab_bar .link_btn a.OnlineConsultation {
    display: flex;
    width: 100%;
    max-width: 170px;
    height: 40px;
    box-shadow: 0 1px 2px #00000029;
    border-radius: 3px;
    font-size: 12px;
    color: #00000099;
    border: 1px solid transparent;
    transition: border 0.3s ease;
}
.tab_bar .link_btn a.OnlineConsultation:hover {
    border: 1px solid #A61918;
}
/* 検索ボタン */
.tab_bar .link_btn a.SearchButton {
    display: flex;
    width: 70%;
    max-width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
    top: 5px;
    border: 5px solid #E7E5DD;
    box-sizing: border-box;
}
.tab_bar .link_btn a.SearchButton.active {
    background-color: #D0D0D0;
}
.tab_bar .link_btn li.SearchButton img {/* 検索ボタン画像 */
    width: 40px;
}
/* 来場予約 */
.tab_bar .link_btn a.VisitReservation {
    display: flex;
    width: 100%;
    max-width: 170px;
    height: 40px;
    box-shadow: 0 1px 2px #00000029;
    border-radius: 3px;
    font-size: 12px;
    color: #00000099;
    border: 1px solid transparent;
    transition: border 0.3s ease;
}
.tab_bar .link_btn a.VisitReservation:hover {
    border: 1px solid #A61918;
}
.tab_bar .link_btn a.VisitReservation:checked {
    border: 1px solid #A61918;
}

/*　▲ MHWメイン END ▲ --------------------------------------------------- */


/* ▼ ログイン画面 START ▲ ----------------------------------------------- */
main.login_page .main-visual {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}
/* 背景の親要素（すでに設定済みならそのままでOK） */
main.login_page .main-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/* --- オーバーレイ --- */
.main-visual::before {
    content: ""; /* 必須 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #43434366;
    z-index: 2; /* 画像より上に重ねる */
}
/* 画像は一番下に配置 */
.main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.main-visual .login_form_area {
    margin: 0 auto;
    z-index: 89;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 12px;
    display: block;
    position: absolute;
    width: 100%;
    max-width: 782px;
    height: auto;
    text-align: center;
    max-height: 60vh;
    /* overflow-y: auto; */
    padding: 45px 0 50px;
}
.main-visual .login_form_area img {
    width: 25.68px;
    height: 34.04px;
    margin: 0 auto;
}
.main-visual .login_form_area p {
    font-size: 10px;
    font-weight: 600;
    margin: 4px 0;
}
.main-visual .login_form_area h2 {
    font-size: 16px;
    line-height: 26px;
    margin: 32px 0 41px;
    font-weight: 500;
}
.main-visual .login_form_area .btn-area {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    gap: 10px;
    align-items: center;
}
.main-visual .login_form_area .login_error {
    margin-top: 5px;
    font-size: 12px;
    color: #A61918;
}
.main-visual .login_form_area .btn-area a.login_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 212px;
    height: 37px;
    background-color: #A61918;
    color: #fff;
    font-size: 12px;
    padding: 12px 61px;
    border-radius: 50px;
    box-shadow :0px 2px 3px #ccc;
}
.main-visual .login_form_area .btn-area a.register_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 212px;
    height: 37px;
    background-color: #fff;
    color: #A61918;
    font-size: 12px;
    padding: 12px 61px;
    border-radius: 50px;
    border: 1px solid #A61918;
    box-shadow :0px 2px 3px #ccc;
}

/* ログイン画面のフッター */
footer.login_page_footer {
    display: flex;
    background-color: #fff;
    width: 100%;
    height: 100px;
    padding: 0;
    position: absolute; /* absoluteは使わない */
    z-index: 2;
}
/* 内部パーツも位置をリセット */
footer.login_page_footer .footer_area_wrap.pc {
    display: flex !important;
    width: 100%;
    margin: 0 auto;
    height: auto; /* 高さを固定しすぎない */
    align-items: center;
    justify-content: center;
    position: relative; /* absoluteを解除 */
    bottom: auto;       /* absoluteの指定を打ち消す */
}
footer.login_page_footer .footer_link_area {
    display: flex;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
footer.login_page_footer .footer_link_area ul {
    width: 100%;
    height: auto;
    display: flex;
    list-style: none;
    gap: 0px;
    padding-left: 0;
}
footer.login_page_footer .footer_link_area li {
    width: 100%;
    max-width: max-content;
    height: auto;
    display: flex;
    display: block;
    font-size: 10px;
    font-weight: 800;
    border-right: 1px solid #4A4A4A;
    padding-right: 8px;
    padding-left: 10px;
    height: 14px;
}
footer.login_page_footer .footer_link_area li:first-of-type {
    padding-left: 0;
}
footer.login_page_footer .footer_link_area li:last-of-type {
    padding-right: 0;
    border-right: 0;
}
footer.login_page_footer .footer_link_area .copyright {
    font-size: 8px;
    font-weight: 500;
    margin: 10px 0;
}
footer.login_page_footer img.logo {
    display: block;
    width: 150px;
    height: auto;
}
/* ▲ ログイン画面のフッター END ▲ -------------------------------------- */
/* ▲ ログイン画面 END ▲ ----------------------------------------------- */



/*　▼ 検索結果画面 START ▼ ---------------------------------------------- */
main .search_results {
    padding-top: 10rem;
    height: auto;
}
main .search_results h2 {
    text-align: center;
    color: #fff;
    font-size: 21px;
    margin-bottom: 20px;
}
/* 前ページで検索したタグボタンを表示するエリア */
.search_results_tag_list .search_tag_area {
    justify-content: center;
    display: flex;
}
.search_results_tag_list .search_tag_area ul li {
    height: 30px;
    padding: 6px 14px;
}
.search_results_tag_list .search_tag_area ul li .tag_close  {
    margin-left: 10px;
    cursor: pointer;
}
.search_results .tab_bar {
    display: none;
}
.search_results section.movie_wrapper {
    padding: 0;
    list-style: none;
}
.search_results .search_tag_area ul {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.search_results .search_tag_area ul li {
    list-style: none;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 12px;
    height: 30px;
    width: 100%;
    max-width: max-content;
    font-size: 12px;
    color: #00000099;
    border-radius: 50px;
    padding: 0px 12px;
    box-shadow: 0 1px 2px #00000029;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s;
}
.search_results .search_tag_area ul li:hover {
    border: 1px solid #A61918;
}
.movie .search_tag_area  {
    display: block;
}
.movie .search_tag_area  {
    display: block;
}
.search_results .movie_wrapper {
    padding: 0 28px;
    width: 100%;
    max-width: 1200px;
    background-color: #4A4A4A;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    left: auto;
    transform: none;
    padding-bottom: 5rem;
    margin: 0 auto;
}
.search_results .swiper-wrapper {
    position: relative;
    width: 70% !important;
    height: auto;
    display: flex !important;
    flex-wrap: wrap !important;
    transform: none !important;
    transition: none !important;
    justify-content: flex-start !important;
    gap: 0;
    margin: 0 auto;
}

@media (max-width: 1600px) {/* 動画静止 ノートPCサイズ調整 */
    .search_results .swiper-wrapper {
        width: 90%!important;
    }
}
@media (max-width: 1260px) {/* 動画静止 ノートPCサイズ調整 */
    .search_results .swiper-wrapper {
        width: 95%!important;
    }
}
.search_results .movie.swiper-slide {
    width: calc(33.333% - 10px) !important;
    margin: 0 !important;
    margin-bottom: 50px !important;
    flex-shrink: 0;
    height: auto;
}
.search_results .short_movie.swiper-slide {
    width: 24% !important;
    margin: 0 !important;
    margin-bottom: 14px !important;
    flex-shrink: 0;
    height: auto;
}
.short_movie.swiper-slide a ,
.index .short_movie.swiper-slide a ,
.index .short_movie.swiper-slide a ,
.search_results .short_movie.swiper-slide a ,
.search_results_detail .short_movie.swiper-slide a img {
    display: block;
    width: 100%;
    /* aspect-ratio: 9 / 14 !important; */
    overflow: hidden;
}
.short_movie.swiper-slide a ,
.search_results .short_movie.swiper-slide a ,
.search_results_detail .short_movie.swiper-slide a {
    display: block;
    width: 100%;
    aspect-ratio: auto !important;
    overflow: hidden;
}
.short_movie.swiper-slide a img,
.search_results .short_movie.swiper-slide a img,
.search_results_detail .short_movie.swiper-slide a img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    aspect-ratio: 4 / 6;
}

.search_results .movie_area.swiper {
    overflow: visible !important;
    width: 100%;
}

/* 左右スライドボタン削除 */
.search_results .swiper-button-prev::before,
.search_results .swiper-button-next::before {
    display: none;
}
section.movie_wrapper.search_results .movie_area .movie.swiper-slide {
    color: #fff;
    position: relative;
    height: auto;
    margin: 0px;
    margin-right: 5px !important;
    margin-left: 5px !important;
    justify-content: center!important;
    align-items: center!important;
    touch-action: none;
    pointer-events: auto;
    flex-shrink: 0;
}

/* 検索結果 ショート動画用（バッジスタイルはベースに準拠） */
.search_results .movie.short_movie:hover .member-only::before,
.search_results .movie.short_movie:hover .recommend::before {
    content: none;
}

/*　▲ 検索結果画面 END ▲ ------------------------------------------------- */


/*　▼ 検索結果 詳細画面 START ▼ ---------------------------------------------- */
main .search_results_detail {
    padding-top: 10rem;
}
main .pickup .movie h3 {
    font-size: 18px;
    color: #fff;
    margin: 24px 0 12px;
}
main .pickup .movie p {
    font-size: 15px;
    color: #fff;
    margin: 15px 0 20px;
}
/* 選択動画ピックアップ */
.pickup .swiper-wrapper {
    width: 100%;
    /* max-width: 75%; */
    max-width: 52%;
    /* max-width: 45%; */
    margin: 0 auto;
}
.pickup .swiper-wrapper.is_short_movie {
    max-width: 39%;
}
.pickup .swiper-wrapper.is_short_movie .video-detail,
.pickup .swiper-wrapper.is_short_movie .video-player-slide {
    max-width: 50%;
    left: 25%;
}
/* 前ページで検索したタグボタンを表示するエリア */
/* .search_results_tag_list .search_tag_area {
	justify-content: center;
	display: flex;
	margin: 20px 0 20px ;
}
.search_results_tag_list .search_tag_area ul li {
	height: 30px;
	padding: 6px 14px;
	font-size: 12px;
} */

.search_results_detail .tab_bar {
    display: none;
}
.search_results_detail section.movie_wrapper {
    padding: 0;
    list-style: none;
}
.search_results_detail .search_tag_area ul {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* スワイパーボタンの左右矢印 非表示 */
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 1!important;
    cursor: auto;
    pointer-events: none;
    top: var(--swiper-navigation-top-offset, 50%);
    display: none;
}

.swiper-button-prev:before ,
.swiper-button-next::before {
    right: -20px;
    transform: translateY(-50%) rotate(45deg);
    display: none;
}

/* .search_results_detail .search_tag_area ul li {
	list-style: none;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	width: 100%;
	max-width: max-content;
	font-size: 12px;
	color: #00000099;
	border-radius: 15px;
	padding: 6px 11px;
	box-shadow: 0 1px 2px #00000029;
	cursor: pointer;
} */

.search_results_detail .movie_wrapper {
    padding: 0 28px;
    width: 100%;
    max-width: 1200px;
    background-color: #4A4A4A;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    left: auto;
    transform: none;
    padding-bottom: 5rem;
}

/* ピックアップ画像の下のタグエリア */
.search_results_detail .search_tag_area ul {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* 会員限定ラベル */
.member-only.select::before {
    content: "";
    top: 0px;
    left: 0px;
    border-bottom: 14em solid transparent;
    border-left: 14em solid #A61918;
    filter: drop-shadow(0px 2px 2px #00000099);
    position: absolute;
    z-index: 2;
}
.member-only.select::after {
    content: "会員限定";
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    writing-mode: horizontal-tb;
    top: 22px;
    left: 0px;
    transform: rotate(-45deg);
    transform-origin: center;
    color: #fff;
    position: absolute;
    z-index: 10;
    white-space: nowrap;
}

/* おすすめラベル */
.recommend.select::before {
    content: "";
    top: 0px;
    left: 0px;
    border-bottom: 14em solid transparent;
    border-left: 14em solid #fff;
    filter: drop-shadow(0px 2px 2px #00000099);
    position: absolute;
    z-index: 2;
}
.recommend.select::after {
    content: "おすすめ";
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    writing-mode: horizontal-tb;
    top: 22px;
    left: 0px;
    transform: rotate(-45deg);
    transform-origin: center;
    color: #A61918;
    position: absolute;
    z-index: 10;
    white-space: nowrap;
}

/* スライド自体の高さ・幅を固定し、中身がはみ出しても影響を与えないようにする */

main.detail section.movie_wrapper .movie_area .movie.swiper-slide {
    position: relative;
    transition: none;
    overflow: visible !important;
    transform: none !important;
}

.movie-inner, .shortmovie-inner {
    transition: transform 0.5s ease; /* 0.5sは長すぎるので少し短く */
    transform-origin: center center;
}

/* ホバーした時の中身だけを「絶対配置」にして浮かせる */
.index section.movie_wrapper .movie_area .movie.swiper-slide:not(.short_movie):hover .slide_movie_inner,
.detail section.movie_wrapper .movie_area .movie.swiper-slide:not(.short_movie):hover .slide_movie_inner {
    position: absolute; /* 浮かせることで下の段を押し出さない */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #383838;
    transform: scale(1.3); /* 浮かせてから拡大 */
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 浮いている感を出す */
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.5s;
}

main.detail .movie.swiper-slide:not(.short_movie):hover .movie-inner {
    position: absolute; /* 親の高さに影響を与えず浮かせる */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #383838;
    transform: scale(1.3) translateY(0px);
    padding: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.5s;
}

.swiper, .swiper-wrapper, .movie_area {/* 親要素の強制visible */
    overflow: visible !important;
}

.thumb-player iframe {
    /* pointer-events: none; */
    width: 100%!important;
    height: 100%!important;
}

/*　▲ 検索結果 詳細画面 END ▲ ------------------------------------------------- */

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

    html {
        scroll-padding-top: 50px;
    }

    /* スライダー左右ボタン */
    .index .swiper-button-prev-cover ,
    .detail .swiper-button-prev-cover ,
    .index .swiper-button-next-cover ,
    .detail .swiper-button-next-cover ,
    .index .swiper-button-prev ,
    .detail .swiper-button-prev ,
    .index .swiper-button-next ,
    .detail .swiper-button-next {
        display: none !important;
    }

    .movie.swiper-slide:hover .movie-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background:none;
        z-index: 100;
        padding: 0px;
    }

    main.detail .movie.swiper-slide:hover .movie-inner {
        position: absolute; /* 親の高さに影響を与えず浮かせる */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background: transparent !important;
        transform: scale(1) translateY(0px) !important;
        padding: 10px;
        box-shadow: none !important;
        transition: none !important;
        transition-delay: 0s !important;
        padding: 0!important;
        padding-right: 10px;
    }


    /* ヘッダー --------------------------------------------------- */
    header.hd_wrapper .pc {
        display: none!important;
    }
    header.hd_wrapper .sp {
        width: 100%;
        height: 50px;
        display: flex!important;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;
        padding: 0 10px;
        background-color: #fff;
        position: fixed;
        z-index: 100;
    }
    header.hd_wrapper .sp ul.logo {
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        padding-right: 60px;
        gap: 0 6px;
        align-items: center;
        width: 100%;
        height: 50px;
        background-color: #fff;
        margin: 0;
    }
    header.hd_wrapper .sp ul.logo li img {
        width: 100%;
        max-width: 90px;
    }
    /* ハンバーガーメニューボタンの土台 */
    .ham_menu_btn {
        width: 100%;
        max-width: 40px;
        height: 40px;
        position: relative;
        cursor: pointer;
        z-index: 110;
    }
    /* 3本線の共通設定 */
    .ham_menu_btn span {
        display: block;
        width: 25px;
        height: 1px;
        background-color: #4A4A4A;
        position: absolute;
        left: 7px;
        transition: all 0.3s;
    }
    /* 3本線の位置 */
    .ham_menu_btn span:nth-child(1) { top: 18px; }
    .ham_menu_btn span:nth-child(2) { top: 26px; }
    .ham_menu_btn span:nth-child(3) { top: 34px; }

    /* クリック時（activeクラス）の3本線変化 */
    .ham_menu_btn.active span:nth-child(1) {
        top: 25px;
        transform: rotate(45deg);
    }
    .ham_menu_btn.active span:nth-child(2) {
        opacity: 0; /* 真ん中の線は消す */
    }
    .ham_menu_btn.active span:nth-child(3) {
        top: 25px;
        transform: rotate(-45deg);
    }

    .ham_menu {
        top: 50px;
        width: 200px;
    }
    .ham_menu li {
        height: 25px;
    }
    .ham_menu li .ham_menu_link {
        font-size: 12px;
    }
    
    /* 左上　お気に入りと履歴ボタン --------------------------------------- */
    .favorite_history_btn_area {
        left: 0;
        top: 82px;
        position: fixed;
        z-index: 10;
    }
    .favorite_history_btn_area a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25px;
        background-color: #ffffff;
        border-radius: 0 4px 4px 0;
        color: #00000099;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        font-size: 11px;
        text-align: center;
        padding-top: 0;
        font-weight: 350;
        writing-mode:vertical-rl;
        margin-top: 0px!important;
        margin-bottom: 1rem;
        letter-spacing: 0.1em;
    }
    .favorite_history_btn_area a.favorite {
        height: 87px;
        margin-top: 26.5px;
        margin-bottom: 5px;
    }
    .favorite_history_btn_area a.history {
        height: 46px;
    }
    .favorite_history_btn_area a:hover {
        background-color: #868686;
        color: #fff;
    }

    /* タブバーから開いた検索画面の背景設定 */
    .search_contents {
        position: fixed;
        left: 0;
        bottom: -100%;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        padding: 1rem;
        z-index: 100;
        /* transition: all 0.5s; */
        display: block;
        justify-content: center;
        align-items: center;
    }
    /* メニューが開いた時 */
    .search_contents.active {
        bottom: 0;
    }
    .search_contents h2{
        color: #6d6d6d;
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        margin-bottom: 0px;
        text-align: center;
    }

    /* 検索フォーム */
    .search_contents .search_inner .selected_tag_area {
        flex-shrink: 0;
        min-height: 93px;
        height: auto;
        width: 100%;
        max-width: 722px;
        margin: 15px 0;
        background-color: #F4F4F4;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 17px 26px;
        border-radius: 8px;
        box-sizing: border-box;
    }
    .search_contents h3{
        font-size: 12px;
    }
    .search_contents .search_textarea {
        height: 70px;
        width: 100%;
        max-width: 600px;
        border-radius: 10px;
        border: 1px solid #ccc;
        background-color: #fcfcfc;
    }
    .search_contents a.search_button {
        display: none;
        align-items: center;
        justify-content: center;
        margin : 30px 0;
        padding: 6px 20px;
        border-radius: 50px;
        border: 1px solid #ccc;
        background-color: #A61918;
        box-shadow: 0 1px 2px #00000029;
        height: 38px;
        width: 100%;
        max-width: 236px;
        color: #fff;
        font-size: 12px;
        cursor: pointer;
        position: fixed;
        bottom: 65px;
    }
    .search_contents.active a.search_button.active {
        display: flex;
        margin: 15px 0 23px;
    }
    .search_contents a.search_button:hover {
        background-color: #A61918;
        color: #fff;
        border: 1px solid transparent;
    }
    .search_contents a.search_button img {
        width: 20px;
        padding-left: 4px;
    }
    .search_tag_area_wrap {/* PCは４分割、SPではcolumnで縦1列にする */
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 0;
        height: auto;
        overflow-y: auto;
    }
    .search_tag_area_wrap .double_line {
        width: 100%;
        display: block;
        padding: 1px;
        border-left: 0;
        border-right: 0;
        padding: 3px 0;
        margin: 30px 0 30px;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .search_tag_area_wrap .search_tag_area {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
    .search_tag_area_wrap .search_tag_area .search_category {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .search_tag_area_wrap .search_tag_area .search_category .tag_wrap {
        width: 100%;
        padding-left: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .search_tag_area_wrap .search_tag_area .search_category .tag_wrap .tag_button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: max-content;
        height: 30px;
        padding: 3px 12px;
        background-color: #fff;
        box-shadow: 0 1px 2px #00000029;
        color: #00000099;
        border-radius: 50px;
        font-size: 12px;
        border: 1px solid transparent;
        transition: all 1s;
        cursor: pointer;
    }
    .search_tag_area_wrap .search_tag_area .search_category .tag_wrap .tag_button:hover{
        border: 1px solid transparent!important;
        box-shadow: 0 1px 2px #00000029!important;
    }
    .search_tag_area_wrap .search_tag_area .search_category .tag_wrap .tag_button.is-active {
        border: 1px solid #A61918!important;
        box-shadow: 0 1px 2px #00000029!important;
        color: #A61918;
    }
    .search_contents {
        position: fixed;
        left: 0;
        bottom: -100%;
        width: 100%;
        height: 94.7vh;
        background-color: #ffffff;
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 75px;
        padding-bottom: 80px;
        overflow: hidden;
    }
    .search_contents .search_inner {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
        margin-top: 0;
    }
    /* 検索メニューが開いた時 */
    .search_contents.active {
        bottom: 0;
        padding-top: 10px;
        padding: 26px 28px 120px;
        overflow: hidden;
        display: flex;
        z-index: 101;
    }
    .search_contents .search_top_area {
        display: block;
        width: 100%;
        flex-shrink: 0;
        background: #fff;
        z-index: 10;
        padding-bottom: 15px;
    }
    .search_close_btn {
        position: absolute;
        top: 20px;
        right: 18px;
        width: 32px;
        height: 44px;
        cursor: pointer;
        padding: 0;
        margin: 0;
    }
    .search_close_label {
        font-size: 9px;
        bottom: 6px;
    }

    /* 1. 外枠（設定済みとのことなので確認のみ） */
    .search_contents {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        display: none;
    }

    /* 2. 【ここが重要】お皿と一覧を包む親 */
    .search_contents .search_inner {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        width: 100%;
        overflow: hidden;
    }

    /* 3. お皿エリア（上部） */
    .search_contents .selected_tag_area {
        flex-shrink: 0;
        min-height: 93px;
        height: auto;

        background-color: #F4F4F4;
        width: 90%;
        max-width: 722px;
        margin: 20px auto 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 17px 26px;
        border-radius: 8px;
        box-sizing: border-box;
    }

    /* 4. タグ一覧エリア（下部） */
    .search_tag_area_wrap {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;

        width: 100%;
        padding: 0 5%;
    }

    .search_close_btn::before,
    .search_close_btn::after {
        content: "";
        position: absolute;
        top: 16px;
        left: 50%;
        width: 24px;
        height: 2px;
        background-color: #4A4A4A;
    }
    .search_close_btn::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .search_close_btn::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    .search_close_btn:hover::before,
    .search_close_btn:hover::after {
        background-color: #A61918;
    }
    .search_contents .selected_tag_area {
        margin-bottom: 15px;
    }
    .search_contents .selected_tag_area .dish_tag {
        background-color: #fff;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: max-content;
        padding: 3px 9px;
        border-radius: 50px;
        color: #00000099;
        font-size: 10px;
        border: 1px solid transparent;
    }
    .search_contents .selected_tag_area .dish_tag:hover {
        border: 1px solid #fff;
    }
    .search_contents .selected_tag_area .dish_tag .tag_close {
        margin-left: 10px;
        cursor: pointer;
    }

    /* スクロールさせたいタグエリア */
    .search_tag_area_wrap {
        flex-grow: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        gap: 0;
        padding: 0;
    }
    /* カテゴリーのGAP PCでつけていたもの削除 */
    .search_tag_area_wrap .search_tag_area .search_category:last-of-type {
        padding-bottom: 0;
    }

    .search_button {
        flex-shrink: 0;
        margin-top: 10px;
    }


    /* メイン --------------------------------------------------- */
    main {
        overflow-x: hidden;
    }
    .main-visual {
        min-height: auto;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .main-visual .bg-img {
        margin-top: 50px;
        aspect-ratio: 3 / 4;
        width: 100%;
        height: auto;
        display: block;
    }

    /* コンテンツを写真の真ん中に自動配置 */
    .main-visual-content {
        position: absolute;
        top: calc(50% + 25px);
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        text-align: center;
        z-index: 10;
    }
    .main-visual .logo-img {
        max-width: 202px;
        margin: 0 auto 15px;
    }

    .main-visual-content h2.main-text {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 動画エリア */
    /* --- Swiperコンテナの設定 --- */
    section.movie_wrapper {
        padding: 0 28px;
        width: 100%;
        margin-top: 0rem;
    }

    .title_line {
        width: 100%;
        max-width: 100% !important;
        padding-top: 30px;
    }

    .index .title_line,
    .detail .title_line {
        padding-left: 0 !important;
    }

    .index .slide_wrap.short,
    .detail .slide_wrap.short {
        margin-left: 0;
    }

    .index .short_prev_cover,
    .detail .short_prev_cover {
        left: 0;
    }

    .index .short_next_cover,
    .detail .short_next_cover {
        right: 0 !important;
    }

    .index .slide_wrap.short .swiper-button-next,
    .detail .slide_wrap.short .swiper-button-next {
        right: 0 !important;
    }

    .index .short_prev_button,
    .detail .short_prev_button {
        margin-left: 0;
    }

    .short_next_button {
        margin-right: 0;
    }

    section.movie_wrapper h2 {
        font-size: 18px;
        font-weight: 500;
        padding-left: 0rem;
        margin: 0;
        display: block;
        margin-bottom: 15px;
    }
    section.movie_wrapper h2.link_to_top_spacer {
        padding-top: 17px;
    }
    section.movie_wrapper div.link_to_top {
        font-size: 11px;
        font-weight: 400;
        padding: 0 2.5%;
        margin: 0 auto;
        width: 100%;
    }
    section.movie_wrapper div.link_to_top_detail {
        margin-bottom: 15px;
    }

    section.movie_wrapper .movie_area.swiper {
        display: block !important;
        width: 100%;
        position: relative;
        left: 50%;
        margin: 0 auto;
        transform: translateX(-50%);
    }
    .swiper-wrapper {
        display: flex !important;
    }
    /* --- 各スライド（動画カード）の設定 --- */
    section.movie_wrapper .movie_area .movie.swiper-slide {
        background-color: #4A4A4A;
        color: #fff;
        position: relative;
        transition: transform 0.4s ease, opacity 0.4s ease;
        transform: scale(0.85);
        opacity: 0.5;
        margin: 0;
        margin-right: 0;
    }

    .detail section.movie_wrapper .movie_area.pickup {
        min-height: 350px !important;
    }

    /* --- ホバー時カード全体を大きくする --- */
    .index section.movie_wrapper .movie_area .movie.swiper-slide ,
    .detail section.movie_wrapper .movie_area:not(.pickup) .movie.swiper-slide {
        transition: none;
        background: none;
    }

    .index section.movie_wrapper .movie_area .movie.swiper-slide:hover ,
    .detail section.movie_wrapper .movie_area:not(.pickup) .movie.swiper-slide:hover {
        z-index: 20 !important;
        background: none;
        transform: scale(1) translateY(0)!important;
        padding: 0;
    }
    .detail section.movie_wrapper .movie_area:not(.pickup) .movie.short_movie.swiper-slide:hover {
        z-index: 20 !important;
        background: none;
        transform: scale(1) translateY(0) !important;
        padding: 0;
    }

    .index section.movie_wrapper .movie_area .movie.swiper-slide:hover a img ,
    .detail section.movie_wrapper .movie_area:not(.pickup) .movie.swiper-slide:hover a img {
        transform: scale(1) !important;
    }

    /* .movie-inner img.cover_img, 
    .shortmovie-inner img.cover_img {
        height: 138px !important;
    } */
    .short_movie img.cover_img, 
    .short_movie img.searched_cover_img {
        height: auto !important;
    }
    .movie.swiper-slide a img.searched_cover_img {
        height: 87px;
    }

    /* .index section.movie_wrapper .movie_area .movie.swiper-slide:hover label.recommend{
        z-index: 100 !important;
        transform: scale(1);
        padding: 10px;
        top: 20px;
    } */

    .index section.movie_wrapper .movie_area button.favorite_btn img:hover ,
    .detail section.movie_wrapper .movie_area button.favorite_btn img:hover {
        width: 26.58px;
    }

    .index section.movie_wrapper .movie_area .movie.swiper-slide:hover .favorite_btn,
    .detail section.movie_wrapper .movie_area:not(.pickup) .movie.swiper-slide:hover .favorite_btn {
        transform: scale(1);
        transform-origin: right top;
        top: 8px;
        right: 10px;
        width: 26.58px;
    }

    /* テキスト・ホバーボックスの調整 */
    .index section.movie_wrapper .movie_area .movie.swiper-slide h3,
    .index section.movie_wrapper .movie_area .movie.swiper-slide .hover_box ,
    .detail section.movie_wrapper .movie_area .movie.swiper-slide h3,
    .detail section.movie_wrapper .movie_area .movie.swiper-slide .hover_box {
        transform: scale(1);
        transform-origin: left top;
        width: 100%;
    }

    .index section.movie_wrapper .movie_area .movie.swiper-slide .hover_box h3 ,
    .detail section.movie_wrapper .movie_area .movie.swiper-slide h3 {
        margin-bottom: 6px;
    }

    .index section.movie_wrapper .movie_area .movie.swiper-slide h3 {
        color: #fff;
        margin: 16px 0 10px 0;
        font-size: 14px;
        display: block;
    }

    .index section.movie_wrapper .movie_area .movie.swiper-slide .hover_box ,
    .detail section.movie_wrapper .movie_area .movie.swiper-slide .hover_box {
        display: none;
    }

    .index section.movie_wrapper .movie_area .movie.swiper-slide:hover .hover_box ,
    .detail section.movie_wrapper .movie_area .movie.swiper-slide:hover .hover_box {
        display: none!important;
    }
    /* タグデザイン */
    .index .hover_box ul ,
    .detail .hover_box ul {
        display: block;
        gap: 5px;
        list-style: none;
        padding: 0;
        width: 100%;
    }
    .index .hover_box li,
    .detail .hover_box li {
        font-size: 10px;
        border-radius: 50px;
        height: 22px;
        line-height: 20px !important;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
        transition: all 0.3s;
        border: 1px solid transparent;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        display: inline-block !important;
        vertical-align: top !important;
        margin: 0 4px 4px 0 !important;
        background-color: #fff !important;
        color: #333 !important;
        white-space: nowrap !important;
    }
    .index .hover_box li a ,
    .detail .hover_box li a {
        height: 100%;
        padding: 0 4px;
        justify-content: center;
        align-items: center;
        color: inherit;
        text-decoration: none;
        display: inline !important; /* aタグも幅を持たせない */
        text-decoration: none !important;
    }
    .index .hover_box li:hover ,
    .detail .hover_box li:hover {
        border: 1px solid #A61918;
    }
    /* hoverでアップするカード END */



    /* 中央のアクティブなスライド */
    section.movie_wrapper .movie_area .movie.swiper-slide-active {
        transform: scale(1.0) !important;
        opacity: 1 !important;
        z-index: 10;
        border: 1px solid #4A4A4A;
    }
    /* --- ビデオ要素の設定 --- */
    section.movie_wrapper .movie_area .movie video {
        width: 100%;
        display: block;
        background-color: #E3E3E3;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        position: relative;
    }
    section.movie_wrapper .movie_area .short_movie video {
        width: 100%;
        max-width: 350px;
        display: block;
        background-color: #E3E3E3;
        aspect-ratio: 4 / 6;
        object-fit: cover;
        position: relative;
    }
    section.movie_wrapper .movie_area .swiper-slide-prev ,
    section.movie_wrapper .movie_area .swiper-slide-next {
        margin-right: 0;
    }

    .member-only,
    .recommend {
        position: absolute;
        right: 6px;
        bottom: 6px;
        margin: 0;
    }
    section.movie_wrapper .movie h3 {
        font-size: 12px;
        color: #fff;
    }
    /* 動画右上のお気に入りボタン位置 */
    section.movie_wrapper .movie_area button.favorite_btn {
        position: absolute;
        z-index: 30;
        top: 8px;
        right: 10px;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }
    section.movie_wrapper .short_movie button.favorite_btn {
        position: absolute;
        z-index: 30;
        /* top: 14.9px;
        right: 14.9px; */
        top: 11px;
        right: 8px;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }


    /* ログイン画面 ----------------------------------------------- */
    main.login_page .favorite_history_btn_area {
        display: none;
    }
    main.login_page .main-visual {
        position: relative;
        width: 100%;
        min-height: auto;
        display: flex;
        flex-direction: column;
    }
    main.login_page .main-visua {
        position: relative;
        width: 100%;
        min-height: auto;
        display: flex;
        flex-direction: column;
    }
    .main-visual .login_form_area {
        margin: 0 auto;
        z-index: 89;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        border-radius: 12px;
        display: block;
        position: absolute;
        width: 100%;
        max-width: 330px;
        height: auto;
        text-align: center;
        padding: 3rem 0;
        margin: auto;
    }
    .main-visual .login_form_area img {
        width: 18.13px;
        height: 24.03px;
        margin: 0 auto;
    }
    .main-visual .login_form_area p {
        font-size: 10px;
        font-weight: 500;
    }
    .main-visual .login_form_area h2 {
        font-size: 12px;
        line-height: 26px;
        margin: 27px 0 34px;
    }
    .main-visual .login_form_area .btn-area {
        display: flex;
        flex-direction: column;
        margin: 30px auto;
        gap: 14px;
        align-items: center;
    }
    .main-visual .login_form_area .btn-area a.login_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        background-color: #A61918;
        color: #fff;
        padding: 10px;
        border-radius: 50px;
        box-shadow :0px 2px 3px #ccc;
        font-size: 12px;
        font-weight: 500;
    }
    .main-visual .login_form_area .btn-area a.register_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        background-color: #fff;
        color: #A61918;
        padding: 10px;
        border-radius: 50px;
        border: 1px solid #A61918;
        box-shadow: 0 1px 2px #00000029;
        font-size: 12px;
        font-weight: 500;
    }

    /* ログイン画面のフッター START */
    /* ログイン画面のフッター：修正版 */

    .login_page_footer {
        display: block;
        background-color: #ffffff;
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px; /* 下に少し余白を持たせる */
        position: relative;
        margin-top: auto;
        z-index: 10;
    }

    /* PC版は非表示 */
    footer.login_page_footer .footer_area_wrap.pc {
        display: none !important;
    }

    /* SP版の設定：ここが重要 */
    footer.login_page_footer .footer_area_wrap.sp {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        height: 170px;
        align-items: center;
        background-color: #fff;
        position: relative;
        padding: 20px 0 0!important;
    }

    footer.login_page_footer .footer_area_wrap.sp img {
        margin-bottom: 0px;
        width: 225px;
    }

    .login_page_footer .footer_link_area {
        width: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        line-height: 2;
        justify-content: center;
        align-items: center;
    }

    .login_page_footer .footer_link_area a {
        font-size: 10px;
        font-weight: 600;
        color: #333;
        text-decoration: none;
    }

    .login_page_footer .footer_link_area span.line {
        margin: 0 10px;
    }

    .login_page_footer .footer_link_area .copyright {
        font-size: 12px;
        font-weight: 500;
        margin: 10px 0;
    }

    .login_page .main_visual_area {
        width: 100%;
        height: 90vh;
        overflow: hidden;
        position: relative;
    }

    .login_page .main_visual_area img.bg-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    /* ログイン画面のフッター END */



    /*　▼ 検索結果画面 START ▼ ---------------------------------------------- */
    main .search_results {
        margin-top: 5rem;
        padding-top: 1rem;
        height: auto;
        -webkit-touch-callout: none;
    }
    main .search_results h2 {
        text-align: center;
        color: #fff;
        /* font-size: 21px; */
        font-size: 12px;
        margin-bottom: 15px;
    }
    .search_results_tag_list .search_tag_area {
        justify-content: center;
        display: flex;
    }

    .search_results_tag_list .search_tag_area ul li {
        height: 30px;
        padding: 6px 14px;
    }
    .search_results_tag_list .search_tag_area ul li .tag_close {
        margin-left: 10px;
        cursor: pointer;
    }
    .search_results .tab_bar {
        display: none;
    }
    .search_results section.movie_wrapper {
        padding: 0;
        list-style: none;
    }
    .search_results .search_tag_area ul {
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .search_results .search_tag_area ul li {
        list-style: none;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 10px;
        height: 20px;
        width: 100%;
        max-width: max-content;
        font-size: 9px;
        color: #00000099;
        border-radius: 50px;
        padding: 0px 8px;
        box-shadow: 0 1px 2px #00000029;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.3s;
    }
    .search_results .search_results_tag_list .search_tag_area ul li {
        list-style: none;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 10px;
        height: 22px;
        width: 100%;
        max-width: max-content;
        font-size: 10px;
        color: #00000099;
        border-radius: 50px;
        padding: 0px 8px;
        box-shadow: 0 1px 2px #00000029;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all 0.3s;
    }
    .search_results .search_tag_area ul li:hover {
        border: 1px solid #A61918;
    }
    .movie .search_tag_area {
        display: block;
    }
    .detail .movie_area.pickup .search_tag_area {
        margin: 10px auto 20px;
    }
    .search_results .movie_wrapper {
        padding: 0 28px;
        width: 100%;
        max-width: 1200px;
        background-color: #4A4A4A;
        margin: 0 auto;
        position: relative;
        overflow: visible !important;
        left: auto;
        transform: none;
        padding-bottom: 5rem;
    }
    .search_results .movie_area.swiper {
        width: 100%;
        touch-action: pan-y !important;
    }
    .search_results .swiper-wrapper {
        position: relative;
        width: 100% !important;
        height: auto;
        display: flex !important;
        flex-wrap: wrap !important;
        /* JSによる横移動を強制リセット */
        transform: translate3d(0,0,0) !important;
        transition: none !important;
        justify-content: center !important;
        gap: 0;
    }
    section.movie_wrapper.search_results .movie_area .movie.swiper-slide {
        width: 100% !important;
        margin: 0px!important;
        gap: 0!important;
        flex-shrink: 0;
        height: auto;
        color: #fff;
        /* オーバーレイ（透明度）を解除 */
        opacity: 1 !important;
        visibility: visible !important;
        touch-action: auto !important;
    }
    section.movie_wrapper .movie_area .movie.swiper-slide {
        background: none;
        color: #fff;
        position: relative;
        transform: scale(1);
        opacity: 1;
    }


    .search_results .short_movie.swiper-slide {
        width: 100% !important;
        margin: 0px !important;
    }

    .search_results .swiper-button-prev,
    .search_results .swiper-button-next {
        display: none !important;
    }

    .search_results section.movie_wrapper .movie_area.swiper {
        display: block !important;
        width: 100%;
        position: relative;
        left: 0;
        margin: 0 auto;
        transform: translateX(-50%);
    }

    /* 親要素をグリッド化して2列に強制する */
    .search_results .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); /* きっちり2分割 */
        gap: 30px 10px!important;
        width: 100% !important;
        left: 0 !important;
    }

    .search_results .swiper-wrapper.no-videos {
        grid-template-columns: 1fr;
    }

    section.movie_wrapper .movie_area.swiper {
        display: block !important;
        width: 100%;
        position: relative;
        left: 0%;
        margin: 0 auto;
        transform: translateX(0%);
        padding: 0 !important;
    }

    /* 子要素の幅設定をリセット（グリッドに任せる） */
    .search_results .movie.swiper-slide,
    .search_results .short_movie.swiper-slide {
        width: 100% !important;
        margin: 0 !important;
    }

    /* SwiperのJSが付ける余計な余白を消す */
    .search_results .swiper-slide {
        margin-right: 0 !important;
    }

    /*　▲ 検索結果画面 END ▲ ------------------------------------------------- */


    /*　▼ 検索結果 詳細画面 START ▼ ---------------------------------------------- */
    .detail section.movie_wrapper .movie_area .movie.swiper-slide h3 {
        transform: scale(1);
        margin: 15px 0;
        font-size: 12px;
        font-weight: 300;
    }

    main .pickup .movie p {
        font-size: 12px;
        color: #fff;
        margin: 0 0 15px;
    }
    .detail section.movie_wrapper .movie_area .movie.swiper-slide.title_description h3 {
        font-size: 12px;
        font-weight: 400;
        padding: 0;
    }
    .detail section.movie_wrapper .movie_area .movie.swiper-slide.title_description p {
        font-size: 12px;
        font-weight: 300;
    }

    /* 二重線 */
    section.movie_wrapper span.line_2 {
        width: 100%;
        display: block;
        height: 1px;
        /* margin: 45px 0 38px; */
        margin: 33px 0 38px;
        padding: 3px 0;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .detail .title_line {
        width: 100%;
        max-width: 100%!important;
    }
    /* 上部のタグエリア */
    .detail .search_tag_area.hover_box {
        width: 100%;
        max-width: 100%!important;
    }

    .search_results_detail .tab_bar {
        display: none;
    }
    section.search_results_detail {
        margin-top: 5rem;
        padding-top: 1rem;
        list-style: none;
    }
    .search_results_detail .search_tag_area ul {
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 5px;
    }
    .pickup .swiper-wrapper {
        width: 100%;
        max-width: 100%!important;
        margin: 0 auto;
        opacity: 10!important;
        width: 100%;
        margin: 0;
        margin-right: 0 !important;
        transform: scale(1);
        transition: auto;
    }
    .pickup .swiper-wrapper.is_short_movie .video-detail,
    .pickup .swiper-wrapper.is_short_movie .video-player-slide {
        max-width: 60% !important;
        left: 20%;
    }
    section.movie_wrapper .pickup .movie.swiper-slide {
        background-color: #4A4A4A;
        color: #fff;
        position: relative;
        transition: transform 0.4s ease, opacity 0.4s ease;
        opacity: 1.5;
    }
    /* スワイパーボタンの左右矢印 */
    .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
        opacity: 1!important;
        cursor: auto;
        pointer-events: none;
    }
    .search_results_detail .search_tag_area ul li {
        list-style: none;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        width: 100%;
        max-width: max-content;
        font-size: 9px;
        color: #00000099;
        border-radius: 15px;
        /* padding: 6px 11px; */
        box-shadow: 0 1px 2px #00000029;
        cursor: pointer;
    }
    .search_results_detail .search_tag_area ul li:hover {
        border: 1px solid #A61918;
    }
    .search_results_detail .movie_wrapper {
        padding: 0 28px;
        width: 100%;
        max-width: 1200px;
        background-color: #4A4A4A;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        left: auto;
        transform: none;
        padding-bottom: 5rem;
    }
    /* ピックアップ画像の下のタグエリア */
    .search_results_detail .search_tag_area ul {
        width: 100%;
        max-width: 90%;
        margin: 0;
    }

    /* ハートボタンサイズ */
    section.movie_wrapper .movie_area button.favorite_btn img {
        width: 26.58px;
    }

    section.movie_wrapper .movie_area .short_movie button.favorite_btn img {
        width: 26.58px;
        margin-right: 0px;
        margin-top: 0px;
    }


    .detail .member-only.select::before {
        content: "";
        top: 0px;
        left: 0px;
        border-bottom: 60px solid transparent;
        border-left: 60px solid #A61918;
        filter: drop-shadow(0px 2px 2px #00000099);
        position: absolute;
        z-index: 2;
    }

    .member-only.select::after {
        content: "会員限定";
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1em;
        writing-mode: horizontal-tb;
        top: 14px;
        left: -2px;
        transform: rotate(-45deg);
        transform-origin: center;
        color: #fff;
        position: absolute;
        z-index: 10;
        white-space: nowrap;
    }

    .detail .recommend.select::before {
        content: "";
        top: 0px;
        left: 0px;
        border-bottom: 60px solid transparent;
        border-left: 60px solid #fff;
        filter: drop-shadow(0px 2px 2px #00000099);
        position: absolute;
        z-index: 2;
    }

    .recommend.select::after {
        content: "おすすめ";
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.1em;
        writing-mode: horizontal-tb;
        top: 14px;
        left: -2px;
        transform: rotate(-45deg);
        transform-origin: center;
        color: #A61918;
        position: absolute;
        z-index: 10;
        white-space: nowrap;
    }

    /*　▲ 検索結果 詳細画面 END ▲ ------------------------------------------------- */


    /* ▼ フッター START ▼ ---------------------------------------------------------- */
    footer {
        display: block;
        background-color: #ffffff;
        width: 100%;
        padding-top: 20px;
        padding-bottom: 0!important;
        position: relative;
        margin-top: auto;
        height: 285px;
    }
    footer .footer_area_wrap.pc {
        display: none!important;
        padding-bottom: 80px;
    }
    footer .footer_area_wrap.sp {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        height: auto;
        align-items: center;
        background-color: #fff;
        padding-top: 0!important;
        padding-bottom: 8rem;
    }
    footer .footer_area_wrap.sp img {
        margin-bottom: 20px;
        width: 250px;
    }
    footer .footer_link_area {
        width: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        line-height: 2;
        justify-content: center;
        align-items: center;
    }
    footer .footer_link_area a {
        font-size: 10px;
        font-weight: 600;
        align-items: center;
        padding-bottom: 0;
    }
    footer .footer_link_area span.line {
        margin: 0 10px;
    }
    footer .footer_link_area .copyright {
        font-size: 12px;
        font-weight: 500;
        margin: 10px 0;
    }
    footer img.logo {
        display: block;
        width: 200px;
    }
    /* ▲ フッター END ▲---------------------------------------------------------- */


    /* ▼ 画面下部トップへもどるバー START ▼--------------------------------------- */
    .page_top_bar {
        right: 0;
        bottom: 0;
    }
    .page_top_bar a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 70px;
        background-color: #000;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 1px 2px #00000029;
        transition: opacity 0.3s;
        font-size: 16px;
        padding-top: 30px;
        font-weight: 350;
    }
    .page_top_bar a::before {
        content: "";
        width: 20px;
        height: 14px;
        /* 極細の矢印をデータとして直接指定 */
        background-image: url(../img/top_w.png);
        background-repeat: no-repeat;
        background-position: center;
        margin-top: -30px;
        transform: none;
    }
    .page_top_bar a:hover {
        opacity: 0.8;
    }
    /* 右下　ホームへもどるボタン */
    .home_btn {
        right: 0;
        bottom: 165px;
        position: fixed;
        z-index: 10;
    }
    .home_btn a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 53px;
        background-color: #ffffff;
        border-radius: 4px 0 0 4px;
        color: #4A4A4A;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        transition: opacity 0.3s;
        font-size: 10px;
        text-align: center;
        padding-top: 30px;
        font-weight: 350;
    }
    .home_btn a::before {
        display: inline-block;
        content: url(../img/home.png);
        width: 40px;
        margin-top: -30px;
        vertical-align: middle;
    }

    /* ホバー時：aタグにhoverした時の::beforeを変更する */
    .home_btn a:hover::before {
        content: url(../img/home_w.png);
    }

    .home_btn a:hover {
        background-color: #8f8f8f;
        color: #fff;
    }
    /* 右下　トップへもどるボタン */
    .page_top_btn {
        right: 0;
        bottom: 105px;
        position: fixed;
        z-index: 10;
    }
    .page_top_btn a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 53px;
        background-color: #ffffff;
        border-radius: 4px 0 0 4px;
        color: #4A4A4A;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        transition: opacity 0.3s;
        font-size: 9px;
        text-align: center;
        padding-top: 30px;
        font-weight: 350;
        z-index: 300;
    }
    .page_top_btn a:hover {
        background-color: #868686;
        color: #fff;
    }
    /* 通常時 */
    .page_top_btn a::before {
        display: inline-block;
        content: url(../img/top_b.png);
        width: 40px;
        margin-top: -30px;
    }

    /* ホバー時：aタグをホバーした時にbeforeの画像を差し替える */
    .page_top_btn a:hover::before {
        content: url(../img/top_w.png);
    }

    /* ホバー時のaタグ自体の背景色など */
    .page_top_btn a:hover {
        background-color: #868686;
        color: #fff;
    }

    /* 右下　ホームへもどるボタン */
    .home_btn {
        right: 0;
        bottom: 165px;
        position: fixed;
        z-index: 10;
    }
    .home_btn a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 53px;
        background-color: #ffffff;
        border-radius: 4px 0 0 4px;
        color: #4A4A4A;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        transition: opacity 0.3s;
        font-size: 10px;
        text-align: center;
        padding-top: 30px;
        font-weight: 350;
    }
    .home_btn a::before {
        display: inline-block;
        content: url(../img/home.png);
        width: 40px;
        margin-top: -30px;
        vertical-align: middle; /* 位置調整が必要な場合 */
    }

    /* ホバー時：aタグにhoverした時の::beforeを変更する */
    .home_btn a:hover::before {
        content: url(../img/home_w.png);
    }

    .home_btn a:hover {
        background-color: #8f8f8f;
        color: #fff;
    }
    /* 右下　トップへもどるボタン */
    .page_top_btn {
        right: 0;
        bottom: 105px;
        position: fixed;
        z-index: 10;
    }
    .page_top_btn a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 53px;
        background-color: #ffffff;
        border-radius: 4px 0 0 4px;
        color: #4A4A4A;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        transition: opacity 0.3s;
        font-size: 9px;
        text-align: center;
        padding-top: 30px;
        font-weight: 350;
        z-index: 300;
    }
    .page_top_btn a:hover {
        background-color: #868686;
        color: #fff;
    }
    /* 通常時 */
    .page_top_btn a::before {
        display: inline-block;
        content: url(../img/top_b.png);
        width: 40px;
        margin-top: -30px;
    }
    .page_top_btn a:hover::before {
        content: url(../img/top_w.png);
    }

    /* ホバー時のaタグ自体の背景色など */
    .page_top_btn a:hover {
        background-color: #868686;
        color: #fff;
    }
    /* HOMEに戻るボタン */
    /* 右下　ホームへもどるボタン */
    .home_btn {
        right: 0;
        bottom: 165px;
        position: fixed;
        z-index: 10;
    }
    .home_btn a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 53px;
        background-color: #ffffff;
        border-radius: 4px 0 0 4px;
        color: #4A4A4A;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        transition: opacity 0.3s;
        font-size: 9px;
        text-align: center;
        padding-top: 30px;
        font-weight: 350;
    }
    .home_btn a::before {
        display: inline-block;
        content: url(../img/home.png);
        width: 40px;
        margin-top: -30px;
        vertical-align: middle;
    }
    .home_btn a:hover::before {
        content: url(../img/home_w.png);
    }

    .home_btn a:hover {
        background-color: #8f8f8f;
        color: #fff;
    }
    /* 右下　トップへもどるボタン */
    .page_top_btn {
        right: 0;
        bottom: 105px;
        position: fixed;
        z-index: 10;
    }
    .page_top_btn a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 53px;
        background-color: #ffffff;
        border-radius: 4px 0 0 4px;
        color: #4A4A4A;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        transition: opacity 0.3s;
        font-size: 9px;
        text-align: center;
        padding-top: 30px;
        font-weight: 350;
        z-index: 300;
    }
    .page_top_btn a:hover {
        background-color: #868686;
        color: #fff;
    }
    /* 通常時 */
    .page_top_btn a::before {
        display: inline-block;
        content: url(../img/top_b.png);
        width: 40px;
        margin-top: -30px;
    }

    /* ホバー時：aタグをホバーした時にbeforeの画像を差し替える */
    .page_top_btn a:hover::before {
        content: url(../img/top_w.png); /* 白いアイコン */
    }

    /* ホバー時のaタグ自体の背景色など */
    .page_top_btn a:hover {
        background-color: #868686;
        color: #fff;
    }
}