@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

:root {
    --bd-purple: #4c0bce;
    --bd-violet: #712cf9;
    --bd-accent: #ffe484;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bd-accent-rgb: 255, 228, 132;
    --bd-pink-rgb: 214, 51, 132;
    --bd-teal-rgb: 32, 201, 151;
    --bd-violet-bg: var(--bd-violet);
    --bd-toc-color: var(--bd-violet);
    --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
    --bd-callout-link: 10, 88, 202;
    --bd-callout-code-color: #ab296a;
    --bd-pre-bg: var(--bs-tertiary-bg);
    /* ----- */
    --color_main: var(--bd-violet);
    xxx--color_htag: var(--bd-violet);

    --swl-h2-margin--x: 0;
    xxx--swl-pad_container: 36px;
    --swl-sidebar_width: 400px;
    --swl-sidebar_width: 40%;
    --swl-sidebar_margin: 36px;
}
@media (min-width: 960px) {
	:root {
        --swl-pad_container: 36px;
    }
}

.btn-bd-primary {
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

:root {
    xxxscroll-behavior: auto !important;
}  

.post_content table small {
    opacity: 1;
    font-size: .8rem;
}
.table-inline-0 th,
.table-inline-0 td {
    padding-inline: 0;
}

body {
    font-family: "Zen Maru Gothic", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.post_content h2 {
    border-color: var(--bs-heading-color);
}
html {
    font-size: 1rem;
}


summary.swell-block-accordion__title {
    border-left: 6px solid var(--color_main);
    padding: 1.25rem 1rem;

}

[class*=is-style-big_icon_]:before,
.is-style-big_icon_caution:before {
    border: 1px solid var(--bs-warning-border-subtle);
    background: var(--bs-warning);
}
.is-style-big_icon_caution {
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    padding: 1.5rem;
    padding-top: 1.75rem;
}

p:empty {
    display: none;
}

/* レイアウト */
@media (min-width: 600px) {
    .l-content {
        padding-top: var(--swl-pad_container, 0);
    }
}

/* ラベル */
.c-postThumb__cat {
    background-color: var(--color_main);
}


/* 見出し */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
h1.c-headLogo {
    margin-bottom: 0;
}


/* オフキャンバス */
.offcanvas {
    --bs-offcanvas-border-color: var(--bs-border-color);
}
#offcanvasLeft,
#offcanvasRight {
    margin-top: var(--wp-admin--admin-bar--height, 0);
}
.offcanvas h2 {
    font-size: 1.25rem;
}
.offcanvas h3 {
    margin-bottom: 1rem;
}

/* ヘッダー */
.-txt .c-headLogo__link {
    font-size: 1.25rem;
}



/* アクティブなテーマのチェックマークを表示 */
.dropdown-item.active .bi-check2 {
    display: block !important;
}

/* ドロップダウン内のアイコン調整 */
.dropdown-item.active .theme-icon {
    opacity: 1 !important; /* アクティブ時は濃く */
}

/* スイッチボタン自体の調整 */
.bd-mode-toggle {
    z-index: 1500; /* 最前面に表示 */
}




.bd-mode-toggle .dropdown-menu {
    --bs-dropdown-min-width: 12rem;
    --bs-dropdown-padding-x: .25rem;
    --bs-dropdown-padding-y: .25rem;
    --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
    --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
    --bs-dropdown-font-size: .875rem;
    font-size: .875rem;
    border-radius: .5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.bd-mode-toggle .dropdown-menu-end {
    --bs-dropdown-min-width: 8rem;
}

.post_content .bd-mode-toggle ul {
    padding-left: 4px;
}
.bd-mode-toggle .dropdown-menu .dropdown-item {
    border-radius: .25rem;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-dropdown-link-active-bg);
}
.post_content .bd-mode-toggle .dropdown-menu li {
    margin: 0;
}
.post_content .bd-mode-toggle .dropdown-menu li+li {
    margin-top: .125rem;
}

/* 検索結果 */
.search .l-mainContent {
    width: 100% !important;
}

/* ヘッダー */
xxx#fix_header {
    visibility: hidden;
}

html {
    scroll-behavior: auto !important;
}
  
xxx.tooltip {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }
  

xxx.c-gnav {
    height: 63px;
}

xxxx.l-header {
    position: sticky;
    top: var(--swl-adminbarH, 0);
    background: transparent;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

xxxx.l-header::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    content: "";
    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), 0.95));
}

xxxx.l-header__inner {
    color: #fff;
}

xxxx.l-header__gnav {
    display: none;
}

.p-spMenu {
    display: block !important;
}

.p-spMenu__inner {
    color: #fff;
    max-width: 400px;
}

.p-spMenu__inner::before {
    background-color: var(--bs-body-bg);
}

xxxx.l-header__logo {
    order: 2;
}

.p-spMenu__body {
    padding: 0 1em 2.5em;
}

@media (min-width: 960px) {

}


.is-style-onborder_ttl2>.cap_box_content {
    background: rgba(var(--bs-emphasis-color-rgb), 0.05);
    border: 0;
}
.popover hr {
    margin-block: .5rem;
}
xxx.vod-horizontal-table li > a {
    color: var(--bs-body-color);
    text-decoration: none;
}
.vod-horizontal-table li > a:focus-visible {
    outline: none;
}


/* フッター */
.l-footer {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
}
.copyright {
    margin: 0;
    color: var(--bs-secondary-color);
}

/* 画像 */
.p-articleThumb__img {
    box-shadow: none;
}

/* SNS */
.-fix.c-shareBtns {
    left: 0;
}
.c-shareBtns__btn {
    background: none;
    box-shadow: none;
}
.c-shareBtns__icon {
    color: var(--bs-body-color);
}
.c-shareBtns .hov-flash-up:hover {
    box-shadow: none;
}

.wp-block-image figcaption {
    margin-bottom: .4rem;
}

.modal-dialog {
    --bs-modal-width: 640px;
}

#media-switcher {
    position: sticky;
    top: calc(var(--swl-headerH) - 1px);
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg);
}
#media-switcher .btn {
    xxxbackground: var(--bs-body-bg);
    border-top-right-radius: 0;
}
#media-switcher select {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/*
.how-to-watch img {
    max-height: 11em;
    width: auto;
}
@media (min-width: 600px) {
    .how-to-watch img {
        max-height: 16em;
    }
}
*/
/* サイドバー */
/*
.w-fixSide {
    top: calc(8px + var(--swl-adminbarH, 0px) + var(--swl-fix_headerH, 0px) + 12px);
}
@media (min-width: 960px) {
    .l-mainContent .c-postTitle__ttl,
    .l-mainContent .p-articleMetas.-top,
    .l-mainContent .p-articleThumb {
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
	.-sidebar-on .l-mainContent {
		width: calc(100% - var(--swl-sidebar_width) - var(--swl-sidebar_margin));
	}
    .w-fixSide {
        margin-top: 0;
    }
}
*/
xxx[data-copyright]::after {
    content: attr(data-copyright);
    display: block;              /* 行として表示 */
    margin-top: .3rem;         /* 画像との余白 */
    font-size: .7rem;          /* 小さめの文字 */
    line-height: 1.4;
    color: var(--bs-tertiary-color);
    text-align: center;
}
xxxdiv[data-copyright] {
    margin-top: -.7rem;
}



.slider-copyright,
.image-copyright {
    margin-top: .3rem;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--bs-tertiary-color);
    text-align: center;
}



.text-emphasis {
    font-weight: 700;
    xxxcolor: var(--bs-code-color) !important;
    color: var(--bs-body-color) !important;
}

.post_content h4.is-style-balloon_box2 {
    font-size: 1rem !important;
    font-weight: 400;
}


/* ポップオーバー内のアイコン用スタイル */
.popover-wiki-icon {
    width: 1.1em;
    height: 1.1em;
    margin-right: 6px;
    vertical-align: -0.2em;
    object-fit: contain;
    padding: 1px; 
}


.vod-catchphrase::before {
    content: '\\ ';
}
.vod-catchphrase::after {
    content: ' /';
}

.is-style-big_icon_caution h4 {
    margin-bottom: 1rem;
}

.post_content > p > strong {
    font-weight: 400;
}

.c-shareBtns__list {
    padding-left: 0;
}

.col3-table {
    table-layout: fixed;
}
.col3-table th,
.col3-table td {
    padding-inline: 0;
    border: 0;
}


table.vod-table th,
table.vod-table td {
    padding-inline: 0;
    border: 0;
}
table.vod-table tbody th {
    font-weight: 400;
}
table.vod-table thead th:nth-child(odd) {
    width: 37%;
}
.vod-logo {
    xxxborder: 1px solid var(--bs-border-color-translucent);
    border-radius: 4px;
    width: 9rem;
}
.vod-horizontal-table .vod-logo {
    width: 9rem;
}

.vod-status {
    width: 3rem;
    height: auto;
}
.vod-service-count-table .vod-status {
    width: 2.2rem;
}
@media not (min-width:600px) {
    table th,
    table td {
        font-size: .8rem;
    }
    xxxtable.vod-table,
    xxx.vod-horizontal-table {
        --swl-pad_container: 4vw;
        margin-inline: calc(var(--swl-pad_container) * -1);
        width: calc(100% + calc(var(--swl-pad_container) * 2));
        max-width: calc(100% + calc(var(--swl-pad_container) * 2));
    }
    table.vod-table img,
    .vod-horizontal-table img {
        max-width: 7rem;
        border-radius: 4px;
    }
    .vod-horizontal-table img {
        max-width: 7rem;
    }
    .vod-status {
        width: 2.5rem;
    }
}

.vod-service-item-none th {
    height: 12rem;
}
.vod-service-item-none td {
    padding-left: 4.5em;
    text-align: left;
}


/* =========================================
   VODボタン共通設定 (Bootstrap 5.3対応)
   ========================================= */
.vod-btn {
    text-box: trim-both cap alphabetic;
    line-height: 1.4;
}

.btn-vod-green,
.btn-vod-orange,
.btn-vod-gray,
.btn-vod-blue {
    padding: .6rem;
    margin: .2em auto auto;

    color: #ffffff !important;
    border: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 心地よい動き */
    position: relative;
    overflow: hidden;
    xxxz-index: 1;

    width: 9rem;

    border-radius: 50rem;

    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;

}
@media not (min-width:600px) {
    .btn-vod-green,
    .btn-vod-orange,
    .btn-vod-gray,
    .btn-vod-blue {
        width: 7rem;
    }
}

/* --- 1. 緑ボタン（無料・本命） --- */
.btn-vod-green {
    background: linear-gradient(135deg, #2ecc71 0%, #198754 100%);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}
.btn-vod-green:hover {
    background: linear-gradient(135deg, #40d47e 0%, #20c997 100%);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.5);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.5);
    xxxtransform: translateY(-2px);
}
/* ダークモード時の緑：少し発光感を強める */
[data-bs-theme="dark"] .btn-vod-green {
    xxxbox-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
    box-shadow: none;
}


/* --- 2. オレンジボタン（有料・購入） --- */
.btn-vod-orange {
    background: linear-gradient(135deg, #fd7e14 0%, #d35400 100%);
    box-shadow: 0 4px 10px rgba(253, 126, 20, 0.3);
}
.btn-vod-orange:hover {
    background: linear-gradient(135deg, #ff922b 0%, #e67e22 100%);
    box-shadow: 0 6px 15px rgba(253, 126, 20, 0.5);
    box-shadow: 0 4px 10px rgba(253, 126, 20, 0.5);
    xxxtransform: translateY(-2px);
}
/* ダークモード時のオレンジ */
[data-bs-theme="dark"] .btn-vod-orange {
    xxxbox-shadow: 0 0 15px rgba(253, 126, 20, 0.4);
    box-shadow: none;
}


/* --- 3. グレーボタン（配信なし・対象外） --- */
.btn-vod-gray {
    /* 通常時：濃いグレー(#6c757d)から、さらに暗いグレー(#495057)へ */
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    /* 影の色：ボタンの色味に合わせたグレー */
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3);
}

.btn-vod-gray:hover {
    /* ホバー時：ワントーン明るくして反応させる */
    background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
    /* 影を濃くする */
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.5);
    /* 浮き上がる動き */
    xxxtransform: translateY(-2px);
}

/* ダークモード時のグレー（重要！） */
[data-bs-theme="dark"] .btn-vod-gray {
    /* 背景が黒だとグレーは沈むので、少し明るくし、境界線を持たせる */
    xxxbackground: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    xxxbox-shadow: 0 0 5px rgba(255, 255, 255, 0.1); /* 白い薄い影で輪郭を出す */
    xxxborder: 1px solid rgba(255, 255, 255, 0.1);   /* 薄い枠線を追加 */
    xxxcolor: #e9ecef !important;
    box-shadow: none;
}

.btn-vod-blue {
    padding: .85rem;
    /* 通常時：明るめの青(#4da3ff)から、深みのある青(#0b5ed7)へ */
    background: linear-gradient(135deg, #4da3ff 0%, #0b5ed7 100%);
    /* 影の色：Bootstrap Primaryの青(RGB:13, 110, 253)ベース */
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);

    xxxmin-height: 4.2rem;
    margin-top: .5em;
}

.btn-vod-blue:hover {
    /* ホバー時：全体をワントーン明るくして発光させる */
    background: linear-gradient(135deg, #6ec0ff 0%, #0d6efd 100%);
    /* 影を濃くする */
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.5);
    /* 浮き上がる動き */
    xxxtransform: translateY(-2px);
}

[data-bs-theme="dark"] .btn-vod-blue {
    box-shadow: none;
}


.btn-vod-green a,
.btn-vod-orange a,
.btn-vod-gray a,
.btn-vod-blue a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;

    padding-block: .4rem;
    display: block;
    width: 100%;
    height: 100%;

    xxxheight: 4rem;
}
.btn-vod-blue a {
display: inline-flex;
align-items: center;
justify-content: center;
xxxheight: 4em;
}
.vod-col3 {
    line-height: 1.8;
    height: 13em;
}
.vod-trial {
    margin: auto;
    padding: .2em .5em;
    width: fit-content;
    border: 1px solid;
    border-radius: 4px;
    xxxbackground: #fff;
    xxxbackground: yellow;
    xxxcolor: #000;
}

.vod-count-num {
    font-size: 1.8rem;
}
.vod-horizontal-table .vod-count-num {
    margin-right: 2px;
    font-weight: 700;
}



.js-scrollable {
    max-width: 100%;
    overflow-x: auto;
}



.swell-block-accordion__title {
    background: rgba(var(--bs-emphasis-color-rgb), 0.05);
}


.p-toc.is-omitted:not([data-omit=nest]):before {
    background: linear-gradient(hsla(0, 0%, 100%, 0), var(--bs-body-bg));
}

.p-toc.is-omitted:not([data-omit=nest]):after {
    background: var(--bs-body-bg);
}
.p-toc:not([data-omit=nest]) .p-toc__expandBtn:before,
.p-toc:not([data-omit=nest]) .p-toc__expandBtn:after {
    border: 0;
}


.vod-horizontal-table thead th:nth-child(2) {
    text-align: left;
    padding-left: 3.3em;
}



  .vod-horizontal-table th,
  .vod-horizontal-table td {
      border: 0;
  }
/* 1列目thを固定（sticky） */
.vod-horizontal-table .sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 7.5rem;
  }

  .vod-horizontal-table .vod-h-col1 {
    padding-inline: 0;
    white-space: nowrap;

    background: var(--color_main);
    color: #fff;
    xxxborder-bottom: 2px solid #fff;
  }
  xxx.vod-horizontal-table tr {
    border-bottom: 1px solid #fff;
  }


  /* iosで線が表示されるバグ対応 */

  .vod-horizontal-table tr:not(:last-child) .vod-h-col1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--bs-table-border-color);
    background: #a77ffa;
  }
  
  [data-bs-theme="dark"] .vod-horizontal-table tr:not(:last-child) .vod-h-col1::after {
    background: #ccc;
    background: #a77ffa;
  }
  .vod-h-col2 {
    position: relative;
  }

  .vod-horizontal-table tr:not(:last-child) .vod-h-col2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--bs-table-border-color);
}
  

  
  /* サービス一覧（横並び） */
  .vod-horizontal-table .vod-service-list {
    display: flex;
    flex-wrap: nowrap;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  /* 各サービスカード（縦並び） */
  .vod-horizontal-table .vod-service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.8;
    width: 9.5em;
  }
  .vod-horizontal-table td {
    padding: .5rem 1.1rem;
  }
  
.vod-count {
    font-weight: 400;
}
.vod-trial-none {
    border-color: transparent;
    background: initial;
}
.table {
    margin-bottom: 0;
}






th img {
    xxxfilter: brightness(120%);
}

summary h3 {
    font-weight: 700 !important;
}


/* スクロールヒントアイコンなし */
.scroll-hint-icon {
    display: none !important;
  }
  
/* スクロールヒントの左の影の位置調整 */
.scroll-hint-shadow-wrap:has(.vod-horizontal-table)::before {
    left: 7.5rem;
    z-index: 2;
}
@media not (min-width:600px) {
    .vod-horizontal-table .sticky-col {
        min-width: 6rem;
      }
    .scroll-hint-shadow-wrap:has(.vod-horizontal-table)::before {
        left: calc(6rem - 4vw);
        left: 6rem;
    }
    .scroll-hint-shadow-wrap:has(.vod-horizontal-table)::after {
        right: calc(0px - 4vw);
        right: 0;
    }
}

.swell-block-accordion__body {
    padding-inline: 0;
}

h4.swell-block-accordion__label {
    font-weight: 700 !important;
}


/* 金額強調用テキスト（黄色） */
.btn-price-highlight {
    color: #fff176;
    color: yellow;
    font-size: 1.3em;
    
    /* 重要：文字に薄い黒影をつけて、背景色との境界をくっきりさせる */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); 
    
    /* 数字のカーニング（隙間）を少し詰めて数字を塊に見せる */
    xxxletter-spacing: -0.02em;
}

/* グレーボタンの中の強調色（例外対応） */
/* グレーボタンの中では黄色だと浮くので、あえて「白のまま太字」にするのが推奨ですが、
   どうしても色をつけるなら「薄いオレンジ」などで控えめに */
xxx.btn-vod-gray .btn-price-highlight {
    color: #ffffff; /* グレーボタンでは色は変えず、影と太さだけで強調する方がスマート */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

xxx#modalOfficialBtn,
.modal .btn {
    color: #fff;
    font-weight: 700;
    border: 0;

    font-size: .8rem;
    border-radius: 50rem;
    padding: 0.75rem;
    min-width: 5rem;
    justify-content: center;

    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
.modal .btn:hover {
    background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
}
@media (min-width:600px) {
    .modal .btn {
        font-size: 1rem;
    }
}
.modal .btn-blue {
    background: linear-gradient(135deg, #4da3ff 0%, #0b5ed7 100%);
}
.modal .btn-blue:hover {
    background: linear-gradient(135deg, #6ec0ff 0%, #0d6efd 100%);
}
.modal .btn-green {
    background: linear-gradient(135deg, #2ecc71 0%, #198754 100%);
}
.modal .btn-green:hover {
    background: linear-gradient(135deg, #40d47e 0%, #20c997 100%);
}

.modal .btn-orange {
    background: linear-gradient(135deg, #fd7e14 0%, #d35400 100%);
}
.modal .btn-orange:hover {
    background: linear-gradient(135deg, #ff922b 0%, #e67e22 100%);
}
xxx.modal .btn-gray {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}


.modal .is-style-note_list {
    position: relative;
    padding-left: 0;
    xxxfont-size: .7rem !important;
    text-align: center;
}
xxx.modal .is-style-note_list li {
    padding-left: 0;
}
xxx.modal .is-style-note_list li:before {
    position: relative;
}
.modal .btn {
    display: inline-flex;
}
#modalOfficialBtn::after {
    margin-left: 2px;
    content: '\F1C5';
    font-family: 'bootstrap-icons';
}

.is-style-note_list li {
    text-align: left;
}

.post_content .cap_box hr {

    border-bottom: 1px solid var(--bs-body-color);
    margin-block: 1rem;
}

.swell-block-accordion__title {
    transition: .25s;
}
.swell-block-accordion__title:hover {
    background: rgba(var(--bs-emphasis-color-rgb), .1);
}

.table-price-plan th:nth-child(2),
.table-price-plan td:nth-child(2) {
    text-align: right;
}
xxx.table-text-center-col1 td:nth-child(1) {
    text-align: right;
}
xxx.table-text-center-col2 td:nth-child(2) {
    text-align: center;
}


/* スクロール対象要素 */
.scroll {
    cursor: grab; /* ホバー時に「ドラッグできる」手のひらアイコン */
  }
  
  /* 実際にドラッグ中（mousedown中）は「つかんでいる」アイコン */
  .scroll:active {
    cursor: grabbing;
  }

  .scroll-hint-icon:after {
    top: 1.3rem;
  }
  .scroll-hint-icon-wrap .scroll-hint-icon {
    border-radius: 50rem;
    padding-top: 2.2rem;
    width: 8em;
    height: 8em;
  }
  xxx.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    opacity: .9;
  }
  .scroll-hint-icon {
    background: #000;
  }
  .scroll-hint-icon-white {
    background: #fff;
  }
  .scroll-hint-text {
    margin-top: .1em;
    font-size: 1rem;
    font-weight: 700;
}
@media not (min-width:600px) {
    .scroll-hint-text {
        font-size: .9em;
    }
}



/* YouTube埋め込みを16:9でレスポンシブ化 */
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9比率 */
    margin-bottom: 2em;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* 動画タイトルの装飾（お好みで） */
.video-title {
    font-size: 1.05em;
    margin-bottom: 0.5em;
    font-weight: bold;
    border-left: 4px solid #333;
    padding-left: 10px;
}

/* アコーディオン間の余白調整 */
xxx.youtube-accordion-list .swell-block-accordion__item {
    margin-bottom: 10px;
}




  

.vod-service-count-table th,
.vod-service-count-table td {
    padding-inline: 0;
    border: 0;
    width: 33.333%;
}
.vod-service-count-table td a {
    font-weight: 700;
    xxxtext-decoration: none;
}


/* テーブル吹き出しキャプション */
table .is-style-balloon_box2 {
    opacity: 1;
    font-size: 1em;
}



/* 目次 */
.p-indexModal__inner {
    font-size: .9rem;
}
xxxol.is-style-index>li {
    margin-left: 1.5em;
}
.p-toc__childList {
    margin-left: -.75em !important;
}


/* BOXデザイン */
.merit .cap_box_ttl {
    background: var(--bs-success);
}
.merit .cap_box_content {
    border-color: var(--bs-success-border-subtle);
    background: var(--bs-success-bg-subtle);
}

.demerit .cap_box_ttl {
    background: var(--bs-danger);
}
.demerit .cap_box_content {
    border-color: var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
}

xxx.caution .cap_box_ttl {
    background: var(--bs-warning);
    color: #000;
}
xxx.caution .cap_box_content {
    border-color: var(--bs-warning-border-subtle);
    background: var(--bs-warning-bg-subtle);
}



.cast-item img {
    border-radius: 50rem;
}
.cast-item dt,
.cast-item dd {
    text-align: center;
}
.post_content .cast-item:first-child {
    margin-top: var(--bs-gutter-y) !important;
}
.cast-actor-label {
    padding: .1rem .25rem;
    font-size: .8em;
    border-radius: 4px;
    height: fit-content;

    /* ★★★ 修正の核心: 不透明な背景色と固定されたテキスト色に変更 ★★★ */
    
    /* 背景色を固定の明るいグレー/ブルーに変更 (例: #E0E0E0 または #6ea8fe のトーン) */
    /* ここでは、BootstrapのSecondaryカラーに近い、明るいグレーをベースとします */
    background: #e9ecef; 
    
    /* テキストの色を濃い色に固定 (ライトモードでもダークモードでも見えるように) */
    color: #495057; 
    
    /* もし、グラデーションの視覚効果をどうしても維持したい場合 */
    /* background: linear-gradient(135deg, #f8f9fa, #e9ecef); */
    
    /* 輪郭を際立たせるために、薄いボーダーを追加 (オプション) */
    border: 1px solid #dee2e6;

    line-height: 1.4;
}


.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}
.swiper-pagination-bullet-active {
    background: #fff;
}
.swiper-slide {
    margin-bottom: 0;
}

.swell-block-accordion .swell-block-accordion .swell-block-accordion__title {
    border: 0;
}


.c-postTitle__ttl {
    font-size: 1.4rem;
}
.post_content h2 {
    font-size: 1.25rem !important;
}
.post_content h3 {
    font-size: 1.055rem !important;
}
.post_content h4 {
    font-size: 1.035rem !important;
}
.post_content h5:not(.card-title) {
    font-size: 1.015rem !important;
}
@media (min-width: 600px) {
    .c-postTitle__ttl {
        font-size: 1.7rem;
    }
    .post_content h2 {
        font-size: 1.5rem !important;
    }
    .post_content h3 {
        font-size: 1.3rem !important;
    }
    .post_content h4 {
        font-size: 1.2rem !important;
    }
    .post_content h5:not(.card-title) {
        font-size: 1.1rem !important;
    }
}
.post_content div > h5:not(.card-title):first-child {
    margin-top: 1rem !important;
}
.post_content h5 {
    margin-top: 1.5rem;
    border-bottom: 1px solid;
    padding-bottom: .5rem;
}

/* スクロールヒント */
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
    animation-iteration-count: infinite;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
    opacity: 0;
}


.info-table-dl ul,
.staff-table-dl ul,
.cast-list-dl ul,
.cast-list-dl ul ul,
.music-table ul,
.broadcast-table ul,
.episode-table-dl ul {
    list-style: none;
    padding-left: 0;
}
xxx.cast-list-dl ul ul {
    list-style: none;
}
.info-table-row,
.staff-table-row,
.episode-table-row {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.info-table-row:last-child,
.staff-table-row:last-child,
.episode-table-row:last-child {
    border-bottom: 0;
}
.info-table-row dd,
.staff-table-row dd,
.episode-table-row dd {
    padding-left: 1rem;
}
dt {
    xxxcolor: var(--bs-secondary-color);
}
ul.site-list {
    list-style: none;
    padding-left: 0;
}

.table-fixed {
    table-layout: fixed;
}
.table-borderless th,
.table-borderless td {
    border: 0;
}

.music-table th,
.music-table td,
.broadcast-table th,
.broadcast-table td {
    white-space: nowrap;
    border: 0;
}
.music-table th:first-child {
    text-align: center;
}

.music-table .badge {
    display: inline-block;
    width: 5.5em; /* 好きな幅に調整 */
    text-align: center;
    font-size: .8rem;
}


.popover-body {
    padding: .7rem 1rem;
}
/*
dd {
    border-bottom: 1px solid var(--bs-border-color);
    xxxpadding: 4px 0 10px 0; 
    xxxmargin: 0 0 10px 0;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

dd:last-of-type {
    border-bottom: none;
}

dt {
    xxxpadding: 4px 0 0 0;
    color: var(--bs-tertiary-color);
}


ul.site-list {
    list-style: none;
    padding-left: 0;
}

dl ul {
    list-style: none !important;
    padding-left: 0 !important;
}
*/


.vod-service-none {
    padding-left: 3rem;
}

.p-spMenu__inner .c-iconBtn,
.p-spMenu__inner .c-spnav a,
.bd-mode-toggle {
    color: var(--bs-body-color);
}
.w-header.pc_ .bd-theme-text {
    display: none;
}

.w-header.pc_ .bd-mode-toggle {
    color: #fff;
}
.p-spMenu__inner .c-spnav {
    padding-left: 0;
}

.btn:first-child:active {
    color: #fff;
}


#footer a {
    color: var(--bs-body-color);
    color: var(--bs-tertiary-color);
}

#fix_sidebar {
    xxxtop: calc(var(--swl-headerH) + var(--swl-offset_y) + 2.5rem);
    margin-top: 0rem;
}
.is-toggle-hidden .input-group button:nth-of-type(1) {
    border-bottom-right-radius: var(--bs-btn-border-radius) !important;
}
  


.cast-actor-info {
    margin-bottom: 0;
    padding: .5rem;
    border: 0;
}
.cast-info dd:nth-child(2n + 1) {
    padding-top: 0;
}


a .bi-box-arrow-up-right {
    margin-left: 3px;
}


.popover {
    font-size: 1rem;
    font-family: "Zen Maru Gothic", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.popover li {
    margin: .25em 0;
}


.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
    border-bottom-color: var(--bs-popover-header-bg);
}




.wiki-keyword {
    color: inherit;            /* 周囲の文字色と同じにする */
    text-decoration: none;     /* 標準の下線を消す */
    border-bottom: 1px dotted var(--bs-tertiary-color); /* 薄い点線の下線のみ引く */
    cursor: pointer;           /* マウスカーソルを指にする */
}








.modal thead td,
.modal thead th {
    background-color: var(--thead-color--bg, var(--color_main));
    color: var(--thead-color--txt, #fff);
}

xxxa.modal-trigger {
    text-decoration: none;
    color: initial;
}



.text-decoration-underline-hover {
    text-decoration: none;
}
.text-decoration-underline-hover:hover {
    text-decoration: underline !important;
}

xxx.form-select {
    --bs-border-color: #6c757d;
}




/* YouTube */
/* --- 基本設定 --- */
#v-box-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--swl-headerH, 0px) + var(--swl-offset_y, 0px) - 1px);
    top: calc(var(--swl-offset_y, 0px) - 1px);
    z-index: 9999;
    transition: opacity 0.2s ease;
}
#v-box-sticky button {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="light"] #v-box-sticky .btn:hover {
    color: #000;
}

/* 初期表示のチラつき防止 */
.v-box-initializing {
    opacity: 0 !important;
    visibility: hidden !important;
}

#v-box-screen figure { margin-bottom: 0; }
#v-box-screen {
    transition: max-height 0.4s ease, opacity 0.3s ease;
    max-height: 1000px;
    overflow: hidden;
}

/* 開閉制御 */
#v-box-screen.is-closed {
    max-height: 0;
    opacity: 0;
}

.v-box-progress-wrap {
    height: 3px;
    background: #eee;
    background: #ddd;
    width: 100%;
}
#v-box-current-bar {
    height: 100%;
    width: 0%;
    background: #f03;
    transition: width 0.2s linear;
}

/* --- レスポンシブ制御 --- */

/* 1. スマホ・横向き（Landscape）時：Sticky解除＋ボタン非表示＋強制表示 */
@media screen and (max-width: 959px) and (orientation: landscape) {
    #v-box-sticky {
        position: relative !important;
        top: 0 !important;
    }
    #v-box-toggle-btn {
        display: none !important;
    }
    #v-box-screen {
        max-height: 1000px !important;
        opacity: 1 !important;
    }
}

/* 2. PC（960px以上）時：ボタン非表示＋強制表示 */
@media screen and (min-width: 960px) {
    #v-box-toggle-btn {
        display: none !important;
    }
    #v-box-screen {
        max-height: 1000px !important;
        opacity: 1 !important;
    }
}

/* ボタン非表示中クラスが付いた時のスタイル例（必要に応じて調整） */
#v-box-sticky.is-toggle-hidden {
    /* 例：ボタンが消えた分、セレクトボックスの角を丸めるなど */
}



/* カードデザイン */
/* カードの横幅：スマホは7割（次があることを示す）、PCは4枚並び */
.post_content div .badge.length:last-child {
    margin-bottom: .5rem !important;
}
.card-title {
    font-size: 1rem;
}
xxx.card.more {
    width: fit-content;
    padding: 1rem;
}
xxx.card-body {
    display: flex;
    flex-direction: column-reverse;
    x--bs-card-spacer-x: .5rem;
    x--bs-card-spacer-y: .5rem;
}
.container + h4 {
    margin-top: 2rem;
}
.related-card {
    width: 60%;
  }

  
  @media (min-width: 768px) {
    .related-card {
      width: calc(25% - .75rem); /* gapの分を引いて調整 */
      width: calc(33.333%);
    }
  }
  
  /* タイトルを2行で省略し、高さを統一する */
  .title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em; /* 2行分の高さを固定（横並びの崩れ防止） */
  }