/*
 * このサイトで足したスタイル（旧テーマの style.css / xlab.css には手を入れず、ここで上書き・追加する）
 *  1. 旧テーマのページに直書きされていた <style> を移した物（トップの最新情報・パートナーのモーダル）
 *  2. 旧テーマの JS がインラインで付けていたスタイル（メンバーのカルーセル・詳細）
 *  3. 記事本文の独自の箱（吹き出し・商品一覧・動画の埋め込み）と WordPress の本文用スタイルの一部
 *  4. 新しく付けた物（ページ送り・問い合わせフォームの表示）
 */

/* ---------- Font Awesome 6（X のアイコン。旧サイトは外部の kit を読み込んでいた） ---------- */
@font-face {
  font-display: block;
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/fa-brands-400.woff2) format("woff2"), url(../fonts/fa-brands-400.ttf) format("truetype");
}
body:not(.home) .fa-brands {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1;
  text-rendering: auto;
}
body:not(.home) .fa-x-twitter::before { content: "\e61b"; }
body:not(.home) .fa-2x { font-size: 2em; }

/* 旧テーマはリンクに乗せると jQuery で半透明にしていた */
body:not(.home) a:hover { opacity: .7; }

/* ---------- トップ ---------- */
a.mobile-menu-privacy { display: block; text-decoration: none; }

/* News Section Layout */
.hq-news-section {
  padding: 60px 20px;
  background-color: #fff;
  margin-bottom: 40px;
}

/* Scroll Area Container */
.hq-news-scroll-container {
  max-width: 1200px;
  margin: 0;
  height: 600px;
  overflow-y: scroll;
  /* 常にスクロールバーを表示 */

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #bbb #f5f5f5;

  padding-right: 16px;
  position: relative;
  width: 100%;
}

/* Webkit (Chrome, Safari, Edge) */
.hq-news-scroll-container::-webkit-scrollbar {
  width: 6px;
  /* 細くスタイリッシュに */
}

.hq-news-scroll-container::-webkit-scrollbar-track {
  background: #f9f9f9;
  border-radius: 3px;
}

.hq-news-scroll-container::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.hq-news-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}

/* List Items */
.hq-news-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.hq-news-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding-bottom: .5rem;
  transition: opacity 0.3s;
  text-align: left;
}

.hq-news-card:hover {
  opacity: 0.8;
}

.hq-news-card:last-child {
  border-bottom: none;
}

/* Desktop: Fixed Image Size */
.hq-news-image-wrapper {
  flex-shrink: 0;
  width: 260px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.hq-news-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content Side */
.hq-news-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 146px;
  /* 16:9 of 260px approx */
}

.hq-news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.hq-news-date {
  font-family: 'Poppins', sans-serif;
  color: #888;
  letter-spacing: 0.05em;
}

.hq-news-cat {
  background-color: #f0f0f0;
  color: #555;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.hq-news-item-title {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  color: #333;
  margin: 0;
}

/* Responsive: Mobile Stack */
@media screen and (max-width: 768px) {
    .hq-news-scroll-container {
      margin: 0 auto;
      padding-left: .25rem;
      padding-right: .25rem;
    }
    .hq-news-card {
      flex-direction: column;
      gap: 16px;
    }

    .hq-news-image-wrapper {
      width: 100%;
      /* Full width on mobile */
      aspect-ratio: 16 / 9;
    }

    .hq-news-content {
      min-height: auto;
    }

    .hq-news-item-title {
      font-size: 16px;
    }
  }
                
/* メンバーのカルーセル（旧 main.js がインラインで付けていた物） */
.member-3-carousel.is-scripted {
  display: flex;
  overflow-x: hidden;
  gap: 20px;
  padding: 20px 0;
}
.member-3-carousel.is-scripted .member-3-card { flex: 0 0 auto; }

/* メンバーの詳細（下から出るシート。旧 main.js のインラインのスタイルを移した物） */
.member-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: rgba(0, 0, 0, .15);
}
.member-modal[hidden] { display: none; }
.member-modal__content {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 100%;
  padding: 40px;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform .3s ease-out;
  max-height: 90vh;
  overflow-y: auto;
}
.member-modal.is-open .member-modal__content { transform: translateY(0); }
.member-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  color: #333;
}
.member-modal__grid { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; text-align: left; }
.member-modal__photo { flex: 1; min-width: 200px; position: relative; }
.member-modal__photo > img { width: 100%; border-radius: 8px; }
.member-modal__face { position: absolute; bottom: 0; right: 0; width: 50%; max-width: 200px; }
.member-modal__face img { width: 100%; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .1); }
.member-modal__text { flex: 1.5; min-width: 280px; padding-top: 10px; }
.member-modal__head { margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.member-modal__name { margin: 0 15px 0 0; font-size: 1.8em; font-weight: bold; display: inline-block; line-height: 1.3; }
.member-modal__en { font-size: 1em; color: #888; font-family: sans-serif; }
.member-modal__role { font-size: 1.1em; color: #333; margin-bottom: 20px; font-weight: bold; background: #f5f5f5; display: inline-block; padding: 5px 15px; border-radius: 20px; }
.member-modal__desc { font-size: .95em; line-height: 1.8; color: #444; }
@media screen and (max-width: 540px) {
  .member-modal__content { padding: 56px 20px 32px; }
  .member-modal__text { min-width: 0; }
}

/* ---------- パートナー（旧 page-partners.php に直書きされていた <style>） ---------- */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, .4);
}
.modal-content {
  background-color: #fefefeee;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 95%;
  transition: transform .3s ease-out;
  overflow: hidden;
}
@media (min-width: 768px) { .modal-content { width: 60%; } }
@media (min-width: 1024px) { .modal-content { width: 50%; } }
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  z-index: 100;
  cursor: pointer;
}
.close:hover, .close:focus { color: #000; text-decoration: none; }
@keyframes fadeInModal {
  0% { opacity: 0; transform: translateX(80px); }
  100% { opacity: 1; transform: translateX(0); }
}
.fade-in-modal { animation: fadeInModal 2s forwards; }
.partner-link, .partner-link:visited { color: #000; }
.partner-link:hover { color: purple; }
.partner-link--text { text-decoration: underline; text-underline-offset: .6rem; }
.partner-links { display: flex; gap: 1rem; align-items: baseline; }
.modal-link { cursor: pointer; }
.partner-body p { margin: 0 0 .5em; white-space: normal; }
.partner-intro p { margin: 0; }

/* 記事ページの右側のバナー（旧サイトは WordPress の画像用スタイルで幅を収めていた） */
aside .sidemenu img { max-width: 100%; height: auto; }

/* ---------- 記事の本文 ---------- */
.post-body img { max-width: 100%; height: auto; }
.post-body figure { margin: 0 0 1em; }
.post-body figure figcaption { font-size: .85em; color: #666; margin-top: .4em; text-align: center; }
.post-body audio { display: block; width: 100%; max-width: 480px; margin: .5em 0 1em; }
.post-body .table-scroll { overflow-x: auto; }
.post-body .table-scroll table { margin: 0; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; margin: 0 0 1em 1em; }
.alignleft { float: left; margin: 0 1em 1em 0; }

/* 吹き出し（旧テーマのショートコード .voice.left / .voice.right の見た目に合わせる） */
.fukidashi {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 18px;
  align-items: start;
  margin: 0 0 1.2em;
}
.fukidashi > img {
  grid-column: 1;
  grid-row: 1;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid #eee;
  object-fit: cover;
  margin: 0;
}
.fukidashi > .fukidashi__name {
  grid-column: 1;
  grid-row: 2;
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  word-break: break-all;
}
.fukidashi > p,
.fukidashi > div,
.fukidashi > ul {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  justify-self: start;
  margin: 10px 70px 0 9px;
  padding: .5em 1em;
  font-size: .9em;
  line-height: 1.5;
  color: #333;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 10px;
}
.fukidashi > p::before,
.fukidashi > p::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
}
.fukidashi > p::before { right: 100%; top: 10px; border-width: 8px 11px; border-right-color: #ccc; }
.fukidashi > p::after { right: 100%; top: 13px; border-width: 5px 8px; border-right-color: #fff; }
.fukidashi--right { grid-template-columns: minmax(0, 1fr) 70px; }
.fukidashi--right > img,
.fukidashi--right > .fukidashi__name { grid-column: 2; }
.fukidashi--right > p,
.fukidashi--right > div,
.fukidashi--right > ul { grid-column: 1; justify-self: end; margin: 10px 9px 0 0; }
.fukidashi--right > p::before { right: auto; left: 100%; border-right-color: transparent; border-left-color: #ccc; }
.fukidashi--right > p::after { right: auto; left: 100%; border-right-color: transparent; border-left-color: #fff; }
@media screen and (max-width: 600px) {
  .fukidashi { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; }
  .fukidashi--right { grid-template-columns: minmax(0, 1fr) 56px; }
  .fukidashi > img { width: 56px; height: 56px; }
  .fukidashi > p, .fukidashi > div, .fukidashi > ul { margin-right: 0; }
  .fukidashi--right > p, .fukidashi--right > div, .fukidashi--right > ul { margin-left: 0; }
}

/* 商品一覧（V-tamp のアーティストのページへのカード） */
.vtamp-products { margin: 1.5em 0; }
.vtamp-products__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.vtamp-products__label { font-size: 12px; font-weight: bold; color: #601986; letter-spacing: .05em; }
.vtamp-products__title { font-size: 16px; font-weight: bold; }
.vtamp-products__title::after { content: " ›"; }
.vtamp-products__url { font-size: 12px; color: #888; word-break: break-all; }

/* 動画の埋め込み（YouTube） */
.post-body figure.embed { margin: 1.5em 0; }
.video-embed { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 実績・プロジェクトの外部の記事へのリンク */
.external-link { margin: 1.5em 0; text-align: center; }
.external-link .btn { color: #fff !important; text-decoration: none; }

/* ---------- ページ送り（新しく付けた物） ---------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 40px auto 20px;
  font-size: 14px;
}
.pager ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pager li { list-style: none; margin: 0; }
.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  background: #fff;
  text-decoration: none;
}
.pager [aria-current="page"] { background: #601986; border-color: #601986; color: #fff; }
.pager .is-disabled { color: #bbb; border-color: #eee; }

/* ---------- 問い合わせフォーム ---------- */
.contact-form .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .cf-turnstile { margin: 0 0 1rem; min-height: 65px; }
.contact-form input[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }
.contact-form .form-message { margin-top: 1rem; }
.contact-form .form-message__error { color: #c00; font-weight: bold; }
.contact-form .form-done { padding: 24px; border: 2px solid #46b450; border-radius: 4px; background: #f6fff6; }
.contact-form .form-done p { margin: 0 0 .5em; }

/* 本文中のサイト内の記事のカード（旧 WordPress の埋め込みの代わり） */
.post-body ul.blog-card { margin: 1em 0; padding: 0; }
.post-body ul.blog-card li { list-style: none; }
span.video-embed { display: block; margin: 1em 0; }