/*
Theme Name: Blogza
Theme URI: https://themeansar.com/free-themes/blogza-free-wordpress-theme/
Author: Themeansar
Author URI: https://themeansar.com
Description: Blogza is a fast, clean, modern-looking Best Responsive News Magazine WordPress theme. The theme is fully widgetized, so users can manage the content by using easy to use widgets. Blogza is suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. Blogza is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://demos.themeansar.com/blogus/blogza/ and documentation at https://docs.themeansar.com/docs/blogus/
Version: 0.7
Requires PHP: 7.4
Requires at least: 5.4
Tested up to: 6.7
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: blogus
Text Domain: blogza
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

Blogza WordPress Theme is child theme of Blogus, Copyright 2023 Themeansar
Blogza is distributed under the terms of the GNU General Public License v3

Blogza is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
*:focus {
    outline: 1px solid;
}
.navbar-toggler.x:focus,
button:focus {
    border: 1px solid;
    outline: 2px dotted #000;
}
button:focus:not(:focus-visible) {
    outline: 2px dotted #000;
}
p a {
    text-decoration: underline;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Roboto', sans-serif;
}
.site-title {
    font-family: 'Roboto', sans-serif;
}
.navbar-wp .navbar-nav > li> a {
    font-family: 'Roboto', sans-serif;
}
body {
    font-family: 'Roboto', sans-serif;
}
footer .site-branding-text .site-title-footer a{
    font-family: 'Roboto', sans-serif;
}

.article_content a, .bs-blog-post single a, .entry-content a,
.comment-body a, .textwidget a, .content-area a {
    text-decoration: underline;
}

/* -------bs-head three---- */
.bs-headthree .bs-header-main{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: scroll;
}
.bs-headthree .bs-header-main .inner{
	display: flex;
	padding: 15px 0;
	margin: 0;
	height: auto;
    min-height: 150px;
	align-items: center;
	text-align: center;
}
.bs-headthree .navbar-brand {
	margin-right: unset;
}
.bs-menu-full {
	position: relative;
}
.bs-headthree .navbar-brand .custom-logo{
    object-fit: cover;
    max-width: 100%;
    height: auto;
}


/* header Six */
.bs-headthree.six{
    margin-bottom: 50px;
}
.bs-headthree.six .bs-social {
	padding: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.bs-headthree.six .navbar-wp {
    margin: 0;
    z-index: 999;
    transition: all 1s ease-out;
	padding: 0;
	height: auto;
	min-height: 58px;
	border-radius: 0;
	margin-bottom: 30px;
    border: 1px solid;
}
.bs-headthree.six .navbar-wp .navbar-nav > li> a {
    padding: 0px;
}
.right-nav a{
    box-shadow: none;
}
.bs-blog-post .bs-blog-thumb .bs-blog-category{
    margin-left: 0px;
    margin-right: 0px;
    position: absolute;
    top: 20px;
    right: 20px;
    left: 20px;
}
.bs-blog-post .small{
    padding: 0;
}
.bs-blog-post{
    box-shadow: none;
}
.bs-blog-post:hover{
    box-shadow: none;
}
.bs-blog-meta .bs-author .auth img{
    box-shadow: none;
}
.desk-header{
    padding: 0;
}
.site-branding-text .site-title{
    font-size: inherit;
}
.site-branding-text .site-title a{
    font-size: 60px;
}
.bs-masonry-columns.c2 {
    column-gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bs-blog-post .bs-blog-meta a{
    font-weight: 500;
}
.bs-masonry-columns.c3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column-gap: 2rem;
    padding: 0;
}
.bs-blog-thumb.lg{
    height: auto;
}
.bs-blog-post .bs-blog-thumb img{
    min-height: 300px;
    transition: all 0.5s;
}
.bs-blog-post .bs-blog-thumb:hover img{
    transform: scale(1.05);
}
.bs-blog-post.single .bs-blog-thumb:hover img{
    transform: scale(1);
}
.bs-social li a i{
    width: 35px;
    height: 35px;
    font-size: 20px;
}
.right-nav a{
    width: 35px;
    height: 35px;
    font-size: 20px;
}
.menu-link-description {
    font-size: 11px;
    padding: 2px 4px;
    margin: 0 3px;
    line-height: 10px;
    position: absolute;
    border-radius: 1px;
    line-height: normal;
    top: 0;
    margin: 0 3px;
    font-weight: 700;
    display: inline-table;
    word-break: keep-all;
    overflow-wrap: unset;
    width: max-content;
    z-index: 9;
}
.menu-link-description:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    left: 3px;
    bottom: -4px;
}
.bs-info-author-block .bs-author-pic img{
    margin: 0 auto;
}
.switch .slider::before{
    font-size: 20px;
}
.navbar-nav{
    justify-content: flex-start;
    row-gap: 1rem;
    column-gap: 1.5rem;
    padding: 1rem 0;
}
.navbar-nav .nav-link.active {
  color: #1b5b7a !important;
}
.list-blog.bs-blog-post{
    padding: 0;
    margin-bottom: 0;
}
.blog-post-list{
    display: flex;
    flex-direction: column;
    gap: 70px;
}
.bs-blog-post .bs-header{
    padding: 20px 0;
}
.page-class .bs-card-box.padding-20{
    padding: 0;
    box-shadow: none;
}
img {
    max-width: 100%;
    display: block;
}
figure {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
}
figure>img {
    grid-row: 1 / -1;
    grid-column: 1;
}
figure a {
    color: black;
    text-decoration: none;
}
/* blogza bg image wrapper */
.blogza-background-wrapper .squares, .blogza-background-wrapper .circles, .blogza-background-wrapper .triangles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.squares .square, .circles .circle, .triangles .triangle{
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.1;
    animation: animate 8s linear infinite;
    bottom: -100px;
}
.circles .circle{
    border-radius: 100px !important;
}
.triangles .triangle{
    width: 0;
    height: 0;
    border-bottom-width: 42px;
    border-bottom-style: solid;
    border-left-width: 25px;
    border-left-style: solid;
    border-right-width: 25px;
    border-right-style: solid;
    border-radius: 0 !important;
}
.squares .square:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles .circle:nth-child(1){
    left: 10%;
    width: 22px;
    height: 20px;
    animation-delay: 0s;
}
.triangles .triangle:nth-child(1){
    left: 45%;
    border-right-width: 10px;
    border-left-width: 10px;
    border-bottom-width: 22px;
    animation-delay: 0s;
}
.squares .square:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles .circle:nth-child(2){
    left: 45%;
    width: 84px;
    height: 80px;
    animation-delay: 12s;
}
.triangles .triangle:nth-child(2){
    left: 25%;
    border-right-width: 15px;
    border-left-width: 15px;
    border-bottom-width: 28px;
    animation-delay: 12s;
}
.squares .square:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles .circle:nth-child(3){
    left: 90%;
    width: 53px;
    height: 50px;
    animation-delay: 4s;
}
.triangles .triangle:nth-child(3){
    left: 80%;
    border-right-width: 15px;
    border-left-width: 15px;
    border-bottom-width: 28px;
    animation-delay: 4s;
}
.squares .square:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles .circle:nth-child(4){
    left: 60%;
    width: 53px;
    height: 50px;
    animation-delay: 18s;
}
.triangles .triangle:nth-child(4){
    left: 30%;
    border-right-width: 20px;
    border-left-width: 20px;
    border-bottom-width: 38px;
    animation-delay: 18s;
}
.squares .square:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles .circle:nth-child(5){
    left: 90%;
    width: 43px;
    height: 40px;
    animation-delay: 1s;
}
.triangles .triangle:nth-child(5){
    left: 70%;
    border-right-width: 25px;
    border-left-width: 25px;
    border-bottom-width: 42px;
    animation-delay: 1s;
}
.squares .square:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.squares .square:nth-child(7){
    left: 35%;
    width: 100px;
    height: 100px;
    animation-delay: 7s;
}
.squares .square:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.squares .square:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.squares .square:nth-child(10){
    left: 85%;
    width: 100px;
    height: 100px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
@media (max-width: 991.98px) {
    .bs-masonry-columns.c3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 991px){
    .bs-headthree .navbar-brand .custom-logo {
        width: 200px;
        height: auto;
    }
    .bs-headthree.six .navbar-wp .navbar-nav > li> a{
        padding: 13px 8px;
    }
    .navbar-nav{
        gap: 0;
        padding: 0;
    }
}
@media screen and (max-width: 767px){
    .bs-latest-heading span{
        display:none;
    }
    .bs-headthree .navbar-brand .custom-logo {
        width: 120px;
        height: auto;
    }
    .bs-masonry-columns.c3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .bs-masonry-columns.c2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .bs-blog-post .bs-blog-meta {
        justify-content: start;
    }
}
@media screen and (max-width: 480px) {
    .bs-headthree .bs-header-main .inner{
        min-height: 100px;
    }
}

/* アニメアーカイブページ用 */

/* カテゴリ切替タブ */
.season-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}
.season-tabs li a {
    display: inline-block;
    padding: 6px 12px;
    background: #fbe4dc;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
}
.season-tabs li.active a {
    background: #f7bca0;
    font-weight: bold;
}

/* アニメカードのグリッド */
.anime-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* 各アニメカード */
.anime-card {
    background: #fffef5;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: calc(33.333% - 20px);
    box-sizing: border-box;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.anime-card:hover {
    transform: translateY(-3px);
}

/* タイトル */
.anime-card h3 {
    margin-top: 0;
    font-size: 1.2em;
}

.pv-thumb {
    flex: 1 1 50%;
}

/* サムネイル・PV */
.pv-thumb img,
.pv-thumb iframe {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
}

/* あらすじ */
.summary {
    flex: 1 1 50%;
    font-size: 0.9em;
    line-height: 1.5;
}

/* 投票数 */
.stats {
	flex: 1 1 30%;
    margin-top: 10px;
    font-size: 0.9em;
    color: #333;
}

/* OP/ED セクション */
.music-embed {
	flex: 1 1 70%;
    display: flex;
    justify-content: center;
    margin: 10px;
}
.music-embed h4 {
    font-size: 0.95em;
    margin-bottom: 5px;
}
.music-embed iframe {
    border-radius: 6px;
	padding: 1rem 1rem;
    margin-bottom: 10px;
}


.fixed-thumb {
    width: 50%;
    height: 300px; /* 高さ固定 */
    object-fit: cover; /* 中央を切り取って拡大縮小 */
    border-radius: 5px;
}
.card-body {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}
.card-footer-archive {
    display: flex;
    gap: 15px;
	padding: 0.5rem 0.5rem;
	border-top: 1px solid;
}

.site-content-wrapper {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

    .thumbnail {
        height: 200px;
        width: 100%;
        object-fit: cover;
        display: block;
    }

    .tab-content {
      display: none;
      padding: 20px;
      background: #ffffff;
      border: 1px solid #ccc;
      margin-top: -1px;
    }

    .tab-content.active {
      display: block;
    }


    .choice-button {
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #f0f0f0;
      cursor: pointer;
      font-size: 0.9em;
      transition: background 0.2s, color 0.2s;
    }

    .choice-button.selected {
      background-color: #ffb3c1;
      color: white;
      font-weight: bold;
    }

    .favorite-op-button {
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #f0f0f0;
      cursor: pointer;
      font-size: 0.9em;
      transition: background 0.2s, color 0.2s;
    }

    .favorite-op-button.selected {
      background-color: #ffb3c1;
      color: white;
      font-weight: bold;
    }

    .favorite-ed-button {
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #f0f0f0;
      cursor: pointer;
      font-size: 0.9em;
      transition: background 0.2s, color 0.2s;
    }

    .favorite-ed-button.selected {
      background-color: #ffb3c1;
      color: white;
      font-weight: bold;
    }

    .choice-group {
      display: flex;
      justify-content: center; /* ← これが中央寄せのポイント */
      gap: 10px;
      margin: 10px 0;
      margin-top: 8px;
    }

.anime-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  /* これで間隔を均等にして枠を埋める */
  gap: 20px;                      /* 作品間の間隔を設定 */
}

.anime-item {
  width: calc(33.33% - 20px);  /* 3列に並ぶための幅を計算 */
  box-sizing: border-box;
}

.anime-description {
  height: 80px; /* ここで高さを統一！ */
  overflow: hidden;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-anime-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.tab-anime-item {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
  text-align: center;
  max-width: 320px;
  position: relative;
}

.music-type-label {
  position: absolute;
  top: 6px;
  right: 6px;
  background-color: #f06292;
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}

.op-label {
  background-color: #42a5f5; /* 青系 */
}

.ed-label {
  background-color: #ab47bc; /* 紫系 */
}

/* タイトル */
.tab-anime-item .tab-title {
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 10px;
  text-align: left;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.move-btn {
  padding: 4px 8px;
  font-size: 12px;
  margin: 2px;
  line-height: 1.2;
  border: 1px solid #ccc;
  background-color: #f0f4f8; /* 淡いブルーグレー */
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.move-btn:hover {
    background-color: #d9e6f0; /* ホバー時に少し濃く */
  }

  .site-content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .service-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .selected-services-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
  }

  /* 2件＋…ボタンの横並び */
  .service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .service-card {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f9f9f9;
    cursor: pointer;
    font-size: 14px;
  }

  .service-card.selected {
    background-color: #d9f0ff;
  }

  .service-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
  }

  #selected-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

 #weekly-schedule-wrapper h5 {
   font-family: 'Comic Sans MS', 'Hiragino Maru Gothic ProN', cursive, sans-serif;
   font-weight: bold;
   color: #333;
 }

#early-release-section h5 {
  font-family: 'Comic Sans MS', 'Hiragino Maru Gothic ProN', cursive, sans-serif;
  font-weight: bold;
  color: #333;
}

 #early-release-section {
  margin-top: 30px;
  padding: 15px;
  background: #fff5f7;
  border-radius: 10px;
}

.early-release-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 15px;
}

#early-release-cards {
  display: flex;
  flex-wrap: nowrap;              /* 折り返さない */
  overflow-x: auto;               /* 横スクロール可能に */
  gap: 16px;                      /* カード間の余白 */
  padding-bottom: 8px;           /* スクロールバーとの隙間 */
  scrollbar-color: #ccc transparent;  /* スクロールバー色 (Firefox用) */
}

.early-release-card {
  flex: 0 0 auto;                 /* カードの幅を固定 */
  width: 240px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.05);
}

.early-release-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.early-release-link {
  margin-top: 8px;
  font-size: 14px;
  display: block;
  color: #e91e63;
  text-decoration: underline;
}

.vod-service-link {
  display: inline-block;
  margin: 4px 6px 0 0;
  padding: 4px 10px;
  background-color: #ffe0ec;
  color: #000;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  transition: background 0.2s;
}

.vod-service-link:hover {
  background-color: #ffc1da;
}

.vod-service-link.disabled {
  background-color: #ddd;
  color: #888;
  pointer-events: none;
  cursor: default;
}

.schedule-settings h5 {
	margin-top: 50px; /* 「あなた専用〜」との間隔 */
	font-family: 'Comic Sans MS', 'Hiragino Maru Gothic ProN', cursive, sans-serif;
	font-weight: bold;
	color: #333;
}